/* -------------------------------------
   BUTTONS
------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 600;
  padding: 8px 18px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-primary { background: #fff; color: #000; border-color: #fff; }
.btn-primary:hover {
  background: #e6e6e6; border-color: #e6e6e6;
  transform: translateY(-1px);
}
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: #fff; border-color: #444; background: #111; }
.btn-lg { padding: 12px 24px; font-size: .95rem; border-radius: 10px; }
.btn-outline { background: transparent; color: #ededed; border-color: var(--border); }
.btn-outline:hover { background: #111; border-color: #444; }
.btn-full { width: 100%; }
.btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover {
  background: var(--blue-h); border-color: var(--blue-h);
  transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,112,243,.35);
}

/* -------------------------------------
   LANGUAGE TOGGLE
------------------------------------- */
.lang-toggle {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  min-width: 40px; padding: 6px 10px;
  appearance: none; -webkit-appearance: none;
  font-family: 'Inter', sans-serif;
}

/* -------------------------------------
   HERO BADGE
------------------------------------- */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px;
  font-size: .8rem; font-weight: 500; color: var(--muted);
  margin-bottom: 28px;
}
.hero-badge span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); display: block;
  animation: pulse 2s infinite;
}

/* -------------------------------------
   AVATARS
------------------------------------- */
.av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #000;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
  margin-left: -8px;
}
.av:first-child { margin-left: 0; }

/* -------------------------------------
   HERO WINDOW DOTS
------------------------------------- */
.win-dot { width: 10px; height: 10px; border-radius: 50%; }
.win-dot.r { background: #ff5f57; }
.win-dot.y { background: #febc2e; }
.win-dot.g { background: #28c840; }

/* -------------------------------------
   WIN SIDEBAR ITEMS
------------------------------------- */
.win-item {
  padding: 8px 12px; border-radius: 6px;
  font-size: .78rem; color: var(--subtle); cursor: pointer;
  transition: all .2s;
}
.win-item:hover { color: #ededed; background: rgba(255,255,255,.05); }
.win-item.active { background: rgba(0,112,243,.15); color: var(--blue); font-weight: 600; }

/* -------------------------------------
   WIN STAT VALUES
------------------------------------- */
.win-stat-value { font-size: 1.1rem; font-weight: 700; color: #ededed; }
.win-stat-value.green { color: #28c840; }
.win-stat-value.blue  { color: var(--cyan); }

/* -------------------------------------
   CHART BAR
------------------------------------- */
.bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(0,112,243,.25);
  transition: background .2s;
}
.bar:hover, .bar.active { background: var(--blue); }

/* -------------------------------------
   LOGOS ROW
------------------------------------- */
.logos-row {
  display: flex; justify-content: center;
  align-items: center; flex-wrap: wrap; gap: 40px;
}
.logos-row span {
  font-size: 1rem; font-weight: 700; color: var(--subtle);
  letter-spacing: -.02em; opacity: .45;
  transition: opacity .2s;
}
.logos-row span:hover { opacity: .75; }

/* -------------------------------------
   FEATURE CARD ICON
------------------------------------- */
.feat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(0,112,243,.1); border: 1px solid rgba(0,112,243,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); margin-bottom: 20px;
}

/* -------------------------------------
   SECTION LABEL PILL
------------------------------------- */
.section-label {
  display: inline-block; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--blue); background: rgba(0,112,243,.1);
  border: 1px solid rgba(0,112,243,.2);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
}

/* -------------------------------------
   PLAN BADGE
------------------------------------- */
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}