/* ============================================================
   SignalOS — Premium Glass Redesign
   Palette: red #e8193c + cyan #25f4ee · deep dark · DM Sans + Plus Jakarta
   ============================================================ */

:root {
  --red: #e8193c;
  --red-2: #ff2d55;
  --red-dim: #c8102a;
  --cyan: #25f4ee;
  --cyan-2: #00d8d3;

  --bg: #060509;
  --bg-2: #0a0810;

  /* glass system */
  --glass: rgba(255,255,255,0.035);
  --glass-2: rgba(255,255,255,0.055);
  --glass-strong: rgba(20,18,26,0.55);
  --stroke: rgba(255,255,255,0.09);
  --stroke-soft: rgba(255,255,255,0.06);
  --hairline: rgba(255,255,255,0.045);

  --white: #ffffff;
  --t1: rgba(255,255,255,0.92);
  --t2: rgba(255,255,255,0.58);
  --t3: rgba(255,255,255,0.38);
  --t4: rgba(255,255,255,0.24);

  --shadow-lg: 0 40px 90px -20px rgba(0,0,0,0.7);
  --shadow-md: 0 24px 60px -24px rgba(0,0,0,0.65);
  --radius: 22px;

  --display: 'DM Sans', sans-serif;
  --body: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

::selection { background: rgba(232,25,60,0.35); color: #fff; }

/* ─────────────────────────────────────────────
   AMBIENT BACKGROUND — aurora orbs + grid + grain
   ───────────────────────────────────────────── */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, #120710 0%, transparent 55%),
    linear-gradient(180deg, #070509 0%, #05040a 100%);
}
.orb {
  position: fixed; border-radius: 50%; filter: blur(90px);
  z-index: -1; pointer-events: none; opacity: 0.55;
  will-change: transform;
}
.orb-red   { width: 620px; height: 620px; top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(232,25,60,0.55) 0%, transparent 70%);
  animation: drift1 26s ease-in-out infinite; }
.orb-cyan  { width: 520px; height: 520px; top: 30%; right: -160px;
  background: radial-gradient(circle, rgba(37,244,238,0.28) 0%, transparent 70%);
  animation: drift2 32s ease-in-out infinite; }
.orb-red-2 { width: 480px; height: 480px; bottom: -160px; left: 30%;
  background: radial-gradient(circle, rgba(232,25,60,0.30) 0%, transparent 70%);
  animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(80px,60px) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-70px,90px) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-70px) scale(1.15)} }

.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
}
.grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ─────────────────────────────────────────────
   GLASS PRIMITIVE
   ───────────────────────────────────────────── */
.glass {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.07);
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, transparent 38%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
}

/* ─────────────────────────────────────────────
   TOP BANNER
   ───────────────────────────────────────────── */
.top-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 599;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 16px; cursor: pointer;
  background: linear-gradient(90deg, rgba(26,5,20,0.85), rgba(45,10,30,0.7) 50%, rgba(26,5,20,0.85));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(232,25,60,0.18);
}
.tb-badge {
  background: linear-gradient(90deg, var(--red), var(--cyan));
  border-radius: 100px; padding: 3px 11px; font-size: 0.66rem; font-weight: 800;
  color: #fff; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.tb-text { font-size: 0.82rem; color: var(--t2); }
.tb-text strong { color: #fff; font-weight: 700; }
.tb-countdown {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px; padding: 3px 11px; font-size: 0.72rem; color: var(--t3); flex-shrink: 0;
}
.tb-countdown strong { color: #fff; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────
   NAV — floating glass pill
   ───────────────────────────────────────────── */
nav {
  position: fixed; top: calc(var(--banner-h, 44px) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 598; width: calc(100% - 48px); max-width: 1240px;
  height: 64px; padding: 0 12px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(12,10,16,0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 18px 50px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background 0.3s, box-shadow 0.3s;
}
/* scrolled = darker glass only; position never moves */
.nav-scrolled { background: rgba(10,8,14,0.85) !important;
  box-shadow: 0 22px 60px -16px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06) !important; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo svg { filter: drop-shadow(0 0 8px rgba(232,25,60,0.5)); }
.logo-text { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; color: #fff; }
.logo-text span { color: var(--red); }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a {
  color: var(--t2); text-decoration: none; font-size: 0.83rem; font-weight: 500;
  transition: color 0.2s, background 0.2s; white-space: nowrap;
  padding: 7px 11px; border-radius: 9px;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-links a.active-nav { color: #fff; background: rgba(255,255,255,0.08); }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-login {
  color: var(--t2); text-decoration: none; font-size: 0.83rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.16); padding: 8px 15px; border-radius: 10px;
  transition: all 0.2s;
}
.nav-login:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.nav-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--red-2), var(--red));
  color: #fff; text-decoration: none; font-size: 0.83rem; font-weight: 700;
  padding: 9px 18px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 8px 22px -6px rgba(232,25,60,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -6px rgba(232,25,60,0.7), inset 0 1px 0 rgba(255,255,255,0.25); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 600; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s; }
.mobile-menu {
  display: none; flex-direction: column; position: fixed; inset: 0; z-index: 700;
  background: rgba(8,6,12,0.96); backdrop-filter: blur(24px);
  padding: 92px 22px 40px; gap: 2px; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--t2); text-decoration: none; font-size: 1.05rem; font-weight: 600;
  padding: 16px 16px; border-radius: 12px; border-bottom: 1px solid var(--hairline); transition: all 0.2s;
}
.mobile-menu a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.mob-cta { background: linear-gradient(135deg,var(--red-2),var(--red)) !important; color: #fff !important; text-align: center; margin-top: 14px; border-bottom: none !important; }
.mob-login { border: 1px solid rgba(255,255,255,0.16) !important; text-align: center; color: var(--t2) !important; border-bottom: none !important; margin-top: 6px; }
.mob-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.08); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 1.15rem; cursor: pointer; }

/* ─────────────────────────────────────────────
   SHARED SECTION SYSTEM
   ───────────────────────────────────────────── */
section { padding: 120px 40px; position: relative; }
.max-w { max-width: 1180px; margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  color: var(--red); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, var(--red), transparent); }
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::before { display: none; }
h2.section-title {
  font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  letter-spacing: -0.035em; line-height: 1.02; color: #fff; font-weight: 800;
  text-wrap: balance;
}
.section-sub { color: var(--t2); font-size: 1.02rem; line-height: 1.7; max-width: 520px; margin-top: 16px; text-wrap: pretty; }
.section-head { max-width: 640px; }
.section-head.centered { margin: 0 auto; text-align: center; }
.section-head.centered .section-sub { margin-left: auto; margin-right: auto; }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero {
  min-height: 100vh; padding: 190px 40px 90px; position: relative; overflow-x: clip;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  max-width: 1240px; margin: 0 auto;
}
.hero-copy { max-width: 600px; }
.hero-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.h-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(10px);
  border-radius: 100px; padding: 6px 13px; font-size: 0.72rem; font-weight: 500; color: var(--t2);
}
.h-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.h-badge .dot-red { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.6s infinite; }
.h-badge .dot-green { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 currentColor; opacity:1} 50%{box-shadow:0 0 0 5px transparent; opacity:0.6} }

h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.8rem, 5.4vw, 4.6rem);
  line-height: 0.98; letter-spacing: -0.045em; color: #fff;
  margin-bottom: 26px; text-wrap: balance;
}
h1 .acc-red {
  background: linear-gradient(115deg, #ff486a 0%, var(--red) 60%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
h1 .acc-cyan {
  background: linear-gradient(115deg, var(--cyan) 0%, #00b5b0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: 1.08rem; color: var(--t2); max-width: 470px; margin-bottom: 38px; line-height: 1.7; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--red-2), var(--red));
  color: #fff; padding: 15px 32px; border-radius: 13px;
  font-family: var(--body); font-size: 0.98rem; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 14px 36px -10px rgba(232,25,60,0.65), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 0.22s, box-shadow 0.22s;
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg); transition: left 0.7s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -10px rgba(232,25,60,0.75), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn-primary:hover::after { left: 130%; }
.btn-secondary {
  color: var(--t2); font-size: 0.94rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; padding: 15px 20px; border-radius: 13px;
  border: 1px solid var(--stroke); background: var(--glass); backdrop-filter: blur(10px);
  transition: all 0.2s;
}
.btn-secondary:hover { color: #fff; border-color: rgba(255,255,255,0.28); }

/* proof bar */
.proof-bar {
  display: flex; gap: 30px; margin-top: 48px; flex-wrap: wrap; align-items: center;
}
.proof-stat { display: flex; flex-direction: column; gap: 3px; }
.proof-num { font-family: var(--display); font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1; color: #fff; font-weight: 800; }
.proof-num .g-red { color: var(--red); }
.proof-num .g-cyan { color: var(--cyan); }
.proof-lbl { font-size: 0.68rem; color: var(--t3); text-transform: uppercase; letter-spacing: 0.07em; }
.proof-div { width: 1px; height: 38px; background: var(--stroke); }

/* ── HERO CONSOLE (floating glass) ── */
.console-wrap { position: relative; perspective: 1600px; }
.console {
  position: relative; padding: 18px; border-radius: 26px;
  background: var(--glass-strong);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: rotateY(-7deg) rotateX(3deg); transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.console::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,0.1) 0%, transparent 30%);
}
.console-glow {
  position: absolute; inset: -40px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,25,60,0.3) 0%, transparent 65%);
  filter: blur(30px);
}
.console-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px;
}
.console-dots { display: flex; gap: 6px; }
.cdot { width: 9px; height: 9px; border-radius: 50%; }
.console-title { font-size: 0.7rem; color: var(--t3); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.4s infinite; }

.console-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.console-phone {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke-soft);
  background: #0a0a12; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.7);
}
.tiktok-area {
  background: linear-gradient(165deg, #160b1f 0%, #0d1f3c 55%, #1a0a22 100%);
  aspect-ratio: 9/14; position: relative; display: flex; align-items: flex-end; padding: 10px;
}
.tk-play { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); font-size: 2.2rem; opacity: 0.65; color: #fff; }
.tk-scan { position: absolute; left: 0; right: 0; height: 30%; top: 0;
  background: linear-gradient(180deg, rgba(37,244,238,0.12), transparent); animation: scan 3.5s ease-in-out infinite; }
@keyframes scan { 0%,100%{top:-30%} 50%{top:80%} }
.tk-right { position: absolute; right: 8px; bottom: 60px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.tk-action { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tk-ico { font-size: 1.25rem; }
.tk-count { font-size: 0.56rem; color: rgba(255,255,255,0.85); font-weight: 600; }
.tk-info { position: relative; z-index: 1; }
.tk-user { font-size: 0.72rem; font-weight: 700; color: #fff; }
.tk-cap { font-size: 0.62rem; color: rgba(255,255,255,0.65); margin-top: 2px; }

.console-feed { display: flex; flex-direction: column; }
.feed-head { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); font-weight: 700; margin-bottom: 12px; }
.feed-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.feed-row {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--stroke-soft);
  border-radius: 11px; padding: 8px 10px;
  animation: feedIn 0.5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes feedIn { from{opacity:0; transform:translateY(8px) scale(0.98)} to{opacity:1; transform:none} }
.feed-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.56rem; font-weight: 700; color: #fff; }
.feed-body { flex: 1; min-width: 0; }
.feed-name { font-size: 0.68rem; font-weight: 600; color: var(--t1); }
.feed-act { font-size: 0.62rem; color: var(--t3); }
.feed-time { font-size: 0.6rem; color: var(--red); font-weight: 700; white-space: nowrap; }
.feed-next {
  display: flex; align-items: center; gap: 9px; margin-top: 4px;
  background: rgba(232,25,60,0.06); border: 1px dashed rgba(232,25,60,0.28);
  border-radius: 11px; padding: 9px 11px;
}
.feed-next-text { font-size: 0.64rem; color: var(--t3); }
.feed-next-text strong { color: var(--red); }
.console-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.cstat { background: rgba(255,255,255,0.03); border: 1px solid var(--stroke-soft); border-radius: 11px; padding: 11px 8px; text-align: center; }
.cstat-v { font-family: var(--display); font-size: 1.25rem; font-weight: 800; }
.cstat-l { font-size: 0.56rem; color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* typing dots */
.typing { display: inline-flex; gap: 3px; align-items: center; }
.tdot { width: 4px; height: 4px; background: var(--t3); border-radius: 50%; animation: tdot 1.2s infinite; }
.tdot:nth-child(2){animation-delay:.2s} .tdot:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

/* ── HERO DEMO VIDEO ── */
.hero-demo { grid-column: 1 / -1; margin-top: 64px; }
.demo-frame {
  position: relative; width: 100%; max-width: 940px; margin: 0 auto;
  aspect-ratio: 16/9; border-radius: 26px; overflow: hidden; cursor: pointer;
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), border-color 0.4s;
}
.demo-frame:hover { transform: translateY(-4px); border-color: rgba(37,244,238,0.3); }
.demo-poster {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 32px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(37,244,238,0.1), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 14px, transparent 14px 28px),
    linear-gradient(165deg, #160b1f 0%, #0c1a32 55%, #16091e 100%);
}
.demo-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan);
  background: rgba(37,244,238,0.07); border: 1px solid rgba(37,244,238,0.2);
  padding: 6px 13px; border-radius: 100px; backdrop-filter: blur(8px);
}
.demo-play {
  width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
  background: linear-gradient(135deg, var(--red-2), var(--red));
  box-shadow: 0 16px 40px -8px rgba(232,25,60,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative; transition: transform 0.25s;
}
.demo-play::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid rgba(232,25,60,0.4); animation: ring 2.4s ease-out infinite;
}
@keyframes ring { 0%{transform:scale(0.9);opacity:0.8} 100%{transform:scale(1.5);opacity:0} }
.demo-frame:hover .demo-play { transform: scale(1.08); }
.demo-title { font-family: var(--display); font-size: 1.18rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; max-width: 440px; text-wrap: balance; }
.demo-hint { font-family: 'DM Sans', monospace; font-size: 0.74rem; color: var(--t3); letter-spacing: 0.02em; }
.demo-frame video, .demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; object-fit: cover; background: #000; }

/* ─────────────────────────────────────────────
   TICKER
   ───────────────────────────────────────────── */
.ticker-wrap { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,0.015); padding: 15px 0; position: relative; }
.ticker-wrap::before, .ticker-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker-track { display: flex; white-space: nowrap; animation: tick 36s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 11px; padding: 0 30px;
  font-size: 0.74rem; color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.ticker-item .dot { color: var(--red); font-size: 0.5rem; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─────────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────────── */
.how-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 64px; margin-top: 64px; align-items: start; }
.how-steps { display: flex; flex-direction: column; }
.how-step {
  display: flex; gap: 26px; padding: 30px 22px; border-radius: 18px;
  border: 1px solid transparent; transition: all 0.35s; position: relative;
}
.how-step + .how-step { margin-top: 6px; }
.how-step:hover { background: var(--glass); border-color: var(--stroke-soft); }
.how-step:hover .step-n { color: var(--red); text-shadow: 0 0 20px rgba(232,25,60,0.5); }
.step-n { font-family: var(--display); font-size: 2.6rem; letter-spacing: -0.04em; color: rgba(255,255,255,0.12); line-height: 1; width: 58px; flex-shrink: 0; font-weight: 800; transition: all 0.35s; }
.step-title { font-family: var(--display); font-size: 1.22rem; letter-spacing: -0.02em; font-weight: 700; color: #fff; margin-bottom: 9px; }
.step-desc { color: var(--t2); font-size: 0.9rem; line-height: 1.7; max-width: 480px; }

.how-sticky { position: sticky; top: 110px; }
.how-visual { padding: 16px; border-radius: var(--radius); }
.hv-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 13px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }

/* ─────────────────────────────────────────────
   BENTO FEATURES
   ───────────────────────────────────────────── */
.bento-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 60px; }
.bento-card {
  position: relative; overflow: hidden; padding: 30px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), border-color 0.35s;
}
.bento-card:hover { transform: translateY(-4px); border-color: rgba(232,25,60,0.32); }
.bento-card::after {
  content: ''; position: absolute; bottom: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,25,60,0.1) 0%, transparent 70%); pointer-events: none;
  transition: opacity 0.35s; opacity: 0.7;
}
.bento-card:hover::after { opacity: 1; }
.bento-card.cyan-glow::after { background: radial-gradient(circle, rgba(37,244,238,0.09) 0%, transparent 70%); }
.bento-card.wide { grid-column: span 2; }
.bento-icon {
  width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; margin-bottom: 22px; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.bento-icon.red { background: rgba(232,25,60,0.14); border: 1px solid rgba(232,25,60,0.25); }
.bento-icon.cyan { background: rgba(37,244,238,0.1); border: 1px solid rgba(37,244,238,0.2); }
.bento-title { font-family: var(--display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-bottom: 10px; }
.bento-desc { color: var(--t2); font-size: 0.9rem; line-height: 1.7; }
.bento-wide-inner { display: flex; gap: 40px; align-items: center; }
.bento-wide-copy { flex: 1; }
.bento-wide-visual { width: 280px; flex-shrink: 0; }

/* timeline visual */
.tl-viz { position: relative; padding: 20px 0; }
.tl-line { position: absolute; top: 28px; left: 6px; right: 6px; height: 2px; background: linear-gradient(90deg, var(--red), var(--cyan)); opacity: 0.4; border-radius: 2px; }
.tl-nodes { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.tl-node { text-align: center; }
.tl-pt { width: 13px; height: 13px; border-radius: 50%; margin: 0 auto 8px; }
.tl-pt.red { background: var(--red); box-shadow: 0 0 0 4px rgba(232,25,60,0.18); }
.tl-pt.cyan { background: var(--cyan); box-shadow: 0 0 0 4px rgba(37,244,238,0.18); }
.tl-pt.off { background: rgba(255,255,255,0.18); }
.tl-t { font-size: 0.58rem; font-weight: 700; }
.tl-t.red { color: var(--red); } .tl-t.cyan { color: var(--cyan); } .tl-t.off { color: var(--t4); }
.tl-e { font-size: 0.66rem; margin-top: 6px; }

/* ─────────────────────────────────────────────
   GUARANTEE STRIP
   ───────────────────────────────────────────── */
.guarantee-strip {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 0 40px;
}
.gs-item {
  display: flex; align-items: center; gap: 11px; padding: 16px 22px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 14px;
  backdrop-filter: blur(14px); flex: 1; min-width: 220px;
}
.gs-icon { font-size: 1.2rem; flex-shrink: 0; }
.gs-text { font-size: 0.82rem; color: var(--t2); }
.gs-text strong { color: #fff; font-weight: 700; }

/* ─────────────────────────────────────────────
   METRICS
   ───────────────────────────────────────────── */
.metrics-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 60px;
}
.metric-item {
  padding: 40px 28px; text-align: center; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.35s, border-color 0.35s;
}
.metric-item:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.16); }
.metric-val { font-family: var(--display); font-size: 3rem; letter-spacing: -0.04em; line-height: 1; font-weight: 800; color: #fff; }
.metric-val .g-red { color: var(--red); }
.metric-val .g-cyan { color: var(--cyan); }
.metric-label { color: var(--t3); font-size: 0.78rem; margin-top: 12px; line-height: 1.5; }

/* ─────────────────────────────────────────────
   TESTIMONIALS
   ───────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 60px; }
.testi-card {
  padding: 30px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.35s, border-color 0.35s; position: relative; overflow: hidden;
}
.testi-card:hover { transform: translateY(-4px); border-color: rgba(232,25,60,0.28); }
.testi-stars { color: var(--red); font-size: 0.78rem; letter-spacing: 4px; margin-bottom: 16px; }
.testi-text { color: var(--t1); font-size: 0.92rem; line-height: 1.7; margin-bottom: 22px; opacity: 0.86; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 0.82rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.testi-name { font-weight: 700; font-size: 0.86rem; color: #fff; }
.testi-handle { color: var(--t3); font-size: 0.74rem; }

/* ─────────────────────────────────────────────
   PRICING
   ───────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 60px; align-items: stretch; }
.plan-card {
  position: relative; display: flex; flex-direction: column; padding: 32px 26px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 24px;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s, border-color 0.3s;
}
.plan-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2); }
.plan-card.featured {
  border-color: rgba(232,25,60,0.5);
  background: linear-gradient(180deg, rgba(232,25,60,0.08), var(--glass));
  box-shadow: 0 0 0 1px rgba(232,25,60,0.4), 0 30px 70px -20px rgba(232,25,60,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.plan-card.featured::before {
  content: ''; position: absolute; inset: -1px; border-radius: 24px; pointer-events: none; z-index: -1;
  background: radial-gradient(80% 50% at 50% 0%, rgba(232,25,60,0.4), transparent 70%); filter: blur(20px);
}
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--red-2), var(--red)); color: #fff; font-size: 0.66rem; font-weight: 800;
  padding: 5px 15px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  box-shadow: 0 8px 22px -6px rgba(232,25,60,0.7);
}
.plan-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--t3); font-weight: 700; margin-bottom: 12px; }
.plan-card.featured .plan-name { color: var(--red); }
.plan-price-row { display: flex; align-items: baseline; gap: 2px; margin-bottom: 2px; }
.plan-price-sup { font-size: 1.05rem; font-weight: 700; color: var(--t2); }
.plan-price-int { font-family: var(--display); font-size: 3.3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.plan-price-dec { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--t2); }
.plan-card.featured .plan-price-int { color: #fff; }
.plan-period { font-size: 0.78rem; color: var(--t3); margin-bottom: 22px; }
.plan-accounts {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px; margin-bottom: 4px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--stroke-soft);
}
.plan-card.featured .plan-accounts { background: rgba(232,25,60,0.1); border-color: rgba(232,25,60,0.25); }
.plan-acc-num { font-family: var(--display); font-size: 2.1rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.plan-card.featured .plan-acc-num { color: var(--red); }
.plan-acc-lbl { font-size: 0.76rem; color: var(--t2); line-height: 1.4; }
.plan-signals-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t4); font-weight: 700; margin: 18px 0 11px; }
.sig-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sig-ico { font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; }
.sig-name { font-size: 0.76rem; color: var(--t2); font-weight: 500; flex: 1; }
.sig-dots { display: flex; gap: 4px; }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.sdot.on { background: var(--red); box-shadow: 0 0 6px rgba(232,25,60,0.6); }
.plan-cm { background: rgba(232,25,60,0.06); border: 1px solid rgba(232,25,60,0.2); border-radius: 13px; padding: 14px 16px; margin: 16px 0 20px; }
.plan-cm-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.plan-cm-title { font-size: 0.85rem; font-weight: 700; color: #fff; }
.plan-cm-desc { font-size: 0.76rem; color: var(--t2); line-height: 1.55; }
.plan-features { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 24px; }
.plan-feat { display: flex; align-items: flex-start; gap: 9px; font-size: 0.8rem; color: var(--t2); }
.plan-feat .fi-check { color: var(--red); flex-shrink: 0; font-weight: 700; font-size: 0.74rem; margin-top: 2px; }
.plan-feat .fi-dash { color: var(--t4); flex-shrink: 0; font-size: 0.74rem; margin-top: 2px; }
.plan-feat.dim { color: var(--t4); }
.plan-cta {
  display: block; text-align: center; padding: 14px; border-radius: 12px; font-size: 0.92rem; font-weight: 700;
  text-decoration: none; transition: all 0.22s; margin-top: auto; font-family: var(--body);
}
.plan-cta.primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--red-2), var(--red)); color: #fff;
  box-shadow: 0 12px 30px -8px rgba(232,25,60,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.plan-cta.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -8px rgba(232,25,60,0.75), inset 0 1px 0 rgba(255,255,255,0.25); }
.plan-cta.ghost { border: 1px solid rgba(255,255,255,0.18); color: var(--t2); }
.plan-cta.ghost:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

.pricing-note {
  max-width: 1180px; margin: 18px auto 0; display: flex; gap: 14px; align-items: flex-start;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px 22px; backdrop-filter: blur(14px);
}
.pricing-note-text { font-size: 0.82rem; color: var(--t2); line-height: 1.6; }
.pricing-note-text strong { color: #fff; }
.pricing-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.ptag { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke-soft); border-radius: 100px; padding: 4px 11px; font-size: 0.7rem; font-weight: 600; color: var(--t2); white-space: nowrap; }
.ptag .auto { color: #16a34a; } .ptag .manual { color: var(--red); }
.pricing-link {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 12px;
  border: 1px solid var(--stroke); color: var(--t2); text-decoration: none; font-size: 0.9rem; font-weight: 600;
  background: var(--glass); backdrop-filter: blur(10px); transition: all 0.2s;
}
.pricing-link:hover { border-color: rgba(255,255,255,0.35); color: #fff; }

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-list { margin-top: 56px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 16px; backdrop-filter: blur(14px);
  overflow: hidden; transition: border-color 0.3s, background 0.3s;
}
.faq-item.open { border-color: rgba(232,25,60,0.3); background: var(--glass-2); }
.faq-q { padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-size: 0.96rem; font-weight: 600; color: var(--t1); gap: 14px; transition: color 0.2s; }
.faq-q:hover { color: #fff; }
.faq-icon { width: 26px; height: 26px; border: 1px solid var(--stroke); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--t2); flex-shrink: 0; transition: all 0.3s; }
.faq-item.open .faq-icon { background: linear-gradient(135deg, var(--red-2), var(--red)); border-color: transparent; color: #fff; transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; color: var(--t2); font-size: 0.9rem; line-height: 1.75; padding: 0 26px; }
.faq-item.open .faq-a { max-height: 320px; padding: 0 26px 24px; }

/* ─────────────────────────────────────────────
   CTA
   ───────────────────────────────────────────── */
.cta-section { text-align: center; padding: 140px 40px; position: relative; }
.cta-card {
  position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; padding: 80px 48px;
  background: linear-gradient(180deg, rgba(232,25,60,0.08), var(--glass));
  border: 1px solid var(--stroke); border-radius: 32px; backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cta-card::before {
  content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(232,25,60,0.22) 0%, transparent 65%);
}
.cta-card::after {
  content: ''; position: absolute; bottom: -40%; left: 30%;
  width: 500px; height: 400px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(37,244,238,0.12) 0%, transparent 65%);
}
.cta-title { font-family: var(--display); font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 760px; margin: 0 auto 22px; color: #fff; font-weight: 800; position: relative; z-index: 1; text-wrap: balance; }
.cta-title .grad { background: linear-gradient(120deg, var(--red-2), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cta-sub { color: var(--t2); font-size: 1.05rem; max-width: 440px; margin: 0 auto 40px; line-height: 1.7; position: relative; z-index: 1; }
.cta-btns { display: flex; gap: 14px; justify-content: center; position: relative; z-index: 1; flex-wrap: wrap; }
.cta-guarantee { margin-top: 22px; font-size: 0.78rem; color: var(--t3); position: relative; z-index: 1; }

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
footer { border-top: 1px solid var(--hairline); padding: 48px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 22px; max-width: 1240px; margin: 0 auto; }
.footer-logo { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.03em; color: var(--t2); display: flex; align-items: center; gap: 9px; font-weight: 800; }
.footer-logo span { color: var(--red); }
.footer-copy { color: var(--t4); font-size: 0.76rem; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--t3); font-size: 0.76rem; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: #fff; }

/* ─────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .orb, .tk-scan, .live-dot, .dot-red, .dot-green { animation: none !important; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .hamburger { display: flex; }
  nav { padding: 0 8px 0 18px; }
  .hero { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .hero-copy { max-width: 100%; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-badges, .hero-ctas, .proof-bar { justify-content: center; }
  .console { transform: none; max-width: 460px; margin: 0 auto; }
  .how-wrap { grid-template-columns: 1fr; gap: 32px; }
  .how-sticky { position: static; }
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .hero-demo { margin-top: 8px; margin-bottom: 28px; }
}
@media (max-width: 768px) {
  section { padding: 68px 18px; }
  .max-w, .faq-inner { width: 100%; }
  .top-banner { flex-direction: column; gap: 4px; padding: 9px 14px; }
  .tb-countdown { display: none; }
  .tb-text { font-size: 0.78rem; text-align: center; line-height: 1.45; }
  nav { width: calc(100% - 24px); height: 58px; padding: 0 8px 0 16px; }
  .logo-text { font-size: 0.95rem; }

  .hero { padding: calc(var(--banner-h, 56px) + 92px) 18px 56px; gap: 38px; }
  h1 { letter-spacing: -0.035em; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 30px; }
  .hero-badges { gap: 7px; }
  .h-badge { font-size: 0.68rem; padding: 5px 11px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 11px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary { justify-content: center; width: 100%; }

  .console { padding: 14px; border-radius: 22px; }
  .console-grid { grid-template-columns: 1fr; }
  .console-phone { max-width: 220px; margin: 0 auto; }

  .proof-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 40px; }
  .proof-div { display: none; }
  .proof-stat { align-items: center; }
  .proof-num { font-size: 1.7rem; }

  /* demo video */
  .hero-demo { margin-top: 6px; margin-bottom: 24px; }
  .demo-frame { border-radius: 20px; aspect-ratio: auto; min-height: 320px; }
  .demo-poster { gap: 14px; padding: 24px; }
  .demo-play { width: 60px; height: 60px; }
  .demo-play svg { width: 24px; height: 24px; }
  .demo-title { font-size: 1.02rem; }
  .demo-hint { font-size: 0.68rem; padding: 0 8px; }

  .ticker-wrap::before, .ticker-wrap::after { width: 56px; }
  .ticker-item { font-size: 0.7rem; padding: 0 20px; }

  .how-step { gap: 16px; padding: 22px 14px; }
  .step-n { font-size: 2.1rem; width: 44px; }
  .step-title { font-size: 1.08rem; }
  .step-desc { font-size: 0.86rem; }

  .bento-grid { grid-template-columns: 1fr; gap: 12px; }
  .bento-card { padding: 26px 22px; }
  .bento-card.wide { grid-column: span 1; }
  .bento-wide-inner { flex-direction: column; gap: 26px; align-items: flex-start; }
  .bento-wide-visual { width: 100%; }

  .guarantee-strip { padding: 0 18px; gap: 10px; }
  .gs-item { min-width: 100%; padding: 14px 18px; }

  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .metric-item { padding: 30px 18px; }
  .metric-val { font-size: 2.4rem; }

  .testi-grid { grid-template-columns: 1fr; }
  .testi-card { padding: 26px 22px; }

  .plans-grid { grid-template-columns: 1fr; gap: 18px; }
  .plan-card { padding: 30px 24px; }
  .pricing-note { flex-direction: column; gap: 10px; padding: 18px; }

  .faq-q { padding: 18px 20px; font-size: 0.92rem; }
  .faq-a { padding: 0 20px; }
  .faq-item.open .faq-a { padding: 0 20px 20px; }

  .cta-section { padding: 80px 18px; }
  .cta-card { padding: 56px 24px; border-radius: 26px; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn-primary, .cta-btns .btn-secondary { justify-content: center; }

  footer { padding: 36px 18px; flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 460px) {
  h1 { font-size: clamp(2.1rem, 11vw, 2.9rem); }
  .proof-num { font-size: 1.55rem; }
  .demo-play { width: 54px; height: 54px; }
  .demo-title { font-size: 0.94rem; }
  .metric-val { font-size: 2.1rem; }
  .plan-price-int { font-size: 2.9rem; }
}

/* ════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ════════════════════════════════════════════ */
.theme-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--glass); color: var(--t2); cursor: pointer; transition: all 0.2s; flex-shrink: 0; padding: 0; }
.theme-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); transform: translateY(-1px); }
.theme-btn svg { display: none; }
.theme-btn .ic-sun { display: block; }
html[data-theme="light"] .theme-btn .ic-sun { display: none; }
html[data-theme="light"] .theme-btn .ic-moon { display: block; }
html[data-theme="light"] .theme-btn:hover { color: #0c0c12; border-color: rgba(0,0,0,0.3); }

/* ═══ LANG SWITCHER (dropdown) ═══ */
.lang-dd { position: relative; margin: 0 2px; }
.lang-cur { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--stroke); background: var(--glass); cursor: pointer; transition: all 0.25s;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.76rem; font-weight: 800; color: var(--t2); letter-spacing: 0.04em; }
.lang-cur svg.flag { border-radius: 3px; display: block; }
.lang-cur .chev { transition: transform 0.25s; color: var(--t3); }
.lang-dd.open .lang-cur .chev { transform: rotate(180deg); }
.lang-cur:hover { transform: translateY(-1px); border-color: rgba(232,25,60,0.5); color: var(--t1, #fff); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 700; min-width: 168px;
  background: var(--bg-2, #14141c); border: 1px solid var(--stroke); border-radius: 14px; padding: 6px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.55); backdrop-filter: blur(18px);
  opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none; transition: opacity 0.22s, transform 0.22s; }
html[data-theme="light"] .lang-menu { background: #ffffff; box-shadow: 0 24px 60px -20px rgba(13,13,21,0.3); }
.lang-dd.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 9px;
  border: none; background: none; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem; font-weight: 600; color: var(--t2); text-align: left; transition: background 0.18s, color 0.18s; }
.lang-opt svg { border-radius: 3px; flex-shrink: 0; }
.lang-opt:hover { background: rgba(232,25,60,0.08); color: var(--t1, #fff); }
html[data-theme="light"] .lang-opt:hover { color: #0d0d15; }
.lang-opt.on { color: var(--red, #e8193c); font-weight: 800; }
.lang-opt .ck { margin-left: auto; font-weight: 800; color: var(--red, #e8193c); }
@media (max-width: 1000px) {
  .lang-dd { margin: 0 4px 0 0; }
  .lang-cur { height: 34px; padding: 0 8px; }
}

/* ancien switcher (conservé pour compat) */
.lang-sw { display: flex; align-items: center; gap: 5px; margin: 0 2px; }
.lang-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--stroke); background: var(--glass); cursor: pointer; padding: 0; transition: all 0.25s; }
.lang-btn svg { border-radius: 3px; display: block; }
.lang-btn:hover { transform: translateY(-1px); border-color: rgba(232,25,60,0.5); }
.lang-btn.on { border-color: rgba(232,25,60,0.65); box-shadow: 0 0 0 2px rgba(232,25,60,0.18); }
.lang-btn:not(.on) svg { opacity: 0.55; filter: saturate(0.5); transition: opacity 0.25s, filter 0.25s; }
.lang-btn:not(.on):hover svg { opacity: 1; filter: none; }
@media (max-width: 1000px) {
  .lang-sw { gap: 4px; margin: 0 4px 0 0; }
  .lang-btn { width: 34px; height: 34px; }
}

/* keep theme button visible on mobile (hide only login/cta links) */
@media (max-width: 1000px) {
  nav .nav-actions { display: flex !important; margin-left: auto; gap: 9px; }
  nav .nav-actions .nav-login, nav .nav-actions .nav-cta { display: none !important; }
  nav .hamburger { margin-left: 6px; }
}

/* ════════════════════════════════════════════
   LIGHT THEME — TikTok white
   ════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg: #ffffff; --bg-2: #f4f4f6;
  --glass: rgba(18,18,26,0.035);
  --glass-2: rgba(18,18,26,0.06);
  --glass-strong: rgba(255,255,255,0.72);
  --stroke: rgba(18,18,26,0.12);
  --stroke-soft: rgba(18,18,26,0.08);
  --hairline: rgba(18,18,26,0.07);
  --white: #0c0c12;
  --t1: rgba(12,12,18,0.92);
  --t2: rgba(12,12,18,0.62);
  --t3: rgba(12,12,18,0.46);
  --t4: rgba(12,12,18,0.30);
  --ink: #0c0c12;
  --shadow-lg: 0 40px 90px -24px rgba(20,20,40,0.18);
  --shadow-md: 0 24px 60px -28px rgba(20,20,40,0.15);
  /* deeper teal so cyan accents stay readable on white (gradients use hardcoded stops) */
  --cyan: #0a8f8c;
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .ambient { background: radial-gradient(120% 90% at 50% -10%, #ffe6ec 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #f5f5f8 100%); }
html[data-theme="light"] .orb { opacity: 0.16; }
html[data-theme="light"] .grid-overlay { background-image: linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px); }
html[data-theme="light"] .grain { opacity: 0.02; }

/* nav + menus */
html[data-theme="light"] nav { background: rgba(255,255,255,0.72); box-shadow: 0 18px 50px -22px rgba(20,20,40,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }
html[data-theme="light"] .nav-scrolled { background: rgba(255,255,255,0.9) !important; box-shadow: 0 22px 60px -20px rgba(20,20,40,0.25), inset 0 1px 0 rgba(255,255,255,0.6) !important; }
html[data-theme="light"] .nav-links a:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
html[data-theme="light"] .nav-links a.active-nav { color: var(--ink); background: rgba(0,0,0,0.06); }
html[data-theme="light"] .nav-login { border-color: rgba(0,0,0,0.16); }
html[data-theme="light"] .nav-login:hover { color: var(--ink); border-color: rgba(0,0,0,0.35); }
html[data-theme="light"] .hamburger span { background: var(--ink); }
html[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.97); }
html[data-theme="light"] .mobile-menu a:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
html[data-theme="light"] .feat-nav { background: rgba(255,255,255,0.82); }
html[data-theme="light"] .fn-item:hover { color: var(--ink); }

/* headings + white text → ink */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] .logo-text,
html[data-theme="light"] .section-title,
html[data-theme="light"] .cta-title,
html[data-theme="light"] .metric-val,
html[data-theme="light"] .plan-price-int,
html[data-theme="light"] .plan-acc-num,
html[data-theme="light"] .plan-cm-title,
html[data-theme="light"] .proof-num,
html[data-theme="light"] .testi-name,
html[data-theme="light"] .bento-title,
html[data-theme="light"] .feed-name,
html[data-theme="light"] .step-title,
html[data-theme="light"] .feat-title,
html[data-theme="light"] .gs-title,
html[data-theme="light"] .fresh-title,
html[data-theme="light"] .fresh-name,
html[data-theme="light"] .ch-title,
html[data-theme="light"] .qa-q-text,
html[data-theme="light"] .pc-name,
html[data-theme="light"] .pc-stat-val,
html[data-theme="light"] .card-title,
html[data-theme="light"] .niche-name,
html[data-theme="light"] .th-name,
html[data-theme="light"] .wt-stat-val,
html[data-theme="light"] .comp-card-price,
html[data-theme="light"] .comp-row strong,
html[data-theme="light"] .dm-top,
html[data-theme="light"] .pl-name,
html[data-theme="light"] .stat-val,
html[data-theme="light"] .gs-text strong,
html[data-theme="light"] .pricing-note-text strong { color: var(--ink); }

/* outlined numbers → dark stroke */
html[data-theme="light"] .step-num-big, html[data-theme="light"] .feat-num { -webkit-text-stroke-color: rgba(18,18,26,0.2); }
/* filled faint step numbers (homepage "how it works") → visible on white */
html[data-theme="light"] .step-n { color: rgba(18,18,26,0.18); }

/* mockup row backgrounds → legible on light */
html[data-theme="light"] .feed-row,
html[data-theme="light"] .cstat,
html[data-theme="light"] .row-item,
html[data-theme="light"] .eng-item,
html[data-theme="light"] .fresh-item,
html[data-theme="light"] .fresh-item-s,
html[data-theme="light"] .pc-stat,
html[data-theme="light"] .acc-card,
html[data-theme="light"] .pl-item,
html[data-theme="light"] .dm-action,
html[data-theme="light"] .plan-item,
html[data-theme="light"] .stat-box,
html[data-theme="light"] .wt-stat,
html[data-theme="light"] .wt-panel,
html[data-theme="light"] .dash-mock,
html[data-theme="light"] .dash-side,
html[data-theme="light"] .ds-item,
html[data-theme="light"] .cm-input { background: rgba(18,18,26,0.04); border-color: rgba(18,18,26,0.08); }

html[data-theme="light"] .sdot { background: rgba(18,18,26,0.2); }
html[data-theme="light"] .sdot.on { background: var(--red); box-shadow: none; }

/* demo poster stays dark (video placeholder) — keep its text light */
html[data-theme="light"] .demo-hint { color: rgba(255,255,255,0.6); }

/* top promo banner — light variant */
html[data-theme="light"] .top-banner { background: linear-gradient(90deg, #fff1f4 0%, #fdeef7 50%, #fff1f4 100%); border-bottom: 1px solid rgba(232,25,60,0.18); }
html[data-theme="light"] .tb-text { color: rgba(12,12,18,0.7); }
html[data-theme="light"] .tb-text strong { color: #0c0c12; }
html[data-theme="light"] .tb-countdown { background: rgba(12,12,18,0.05); border-color: rgba(12,12,18,0.12); color: rgba(12,12,18,0.55); }
html[data-theme="light"] .tb-countdown strong { color: #0c0c12; }

/* high-specificity page-title fixes (page CSS uses element-qualified `.page-hero h1`
   which ties on specificity and wins by load order — beat it here) */
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .feat-inner .feat-title,
html[data-theme="light"] .step-inner .step-title,
html[data-theme="light"] .hero-copy h1 { color: var(--ink); }
/* keep gradient spans gradient */
html[data-theme="light"] .page-hero h1 .grad,
html[data-theme="light"] h1 .acc-red,
html[data-theme="light"] h1 .acc-cyan,
html[data-theme="light"] .cta-title .grad { -webkit-text-fill-color: transparent; }

/* ── light: page-specific element-qualified / missed text fixes ── */
/* tarifs */
html[data-theme="light"] .explain-title,
html[data-theme="light"] .note-text strong,
html[data-theme="light"] .comp-card-price,
html[data-theme="light"] .comp-table th .th-name,
html[data-theme="light"] .comp-row strong { color: var(--ink); }
html[data-theme="light"] .comp-table th.hl .th-name { color: var(--red); }
html[data-theme="light"] .comp-tab.active { background: rgba(18,18,26,0.08); color: var(--ink); }
html[data-theme="light"] .comp-tab.comp-tab-elite.active { color: var(--red); }
html[data-theme="light"] .comp-table th { background: rgba(18,18,26,0.025); }
html[data-theme="light"] .comp-table .section-row td { background: rgba(18,18,26,0.04); }
/* assistance */
html[data-theme="light"] .status-bar strong,
html[data-theme="light"] .ch-hours strong,
html[data-theme="light"] .wa-num,
html[data-theme="light"] .wa-num-text strong,
html[data-theme="light"] .ch-visual-big { color: var(--ink); }
html[data-theme="light"] .country-btn.active { background: rgba(18,18,26,0.08); color: var(--ink); }
/* featured (Pro) plan price is white by default — card is light in light theme */
html[data-theme="light"] .plan-card.featured .plan-price-int { color: var(--ink); }

/* ── light: more page titles / numbers that defaulted to white ── */
html[data-theme="light"] .algo-card-title,
html[data-theme="light"] .an-stat-val,
html[data-theme="light"] .ov-title,
html[data-theme="light"] .row-total strong,
html[data-theme="light"] .pl-abo { color: var(--ink); }

/* ── light: pastel profile/account tags → darker, readable on white ── */
html[data-theme="light"] .tag-pub  { color: #0369a1; background: rgba(56,189,248,0.16); }
html[data-theme="light"] .tag-priv { color: var(--t1); background: rgba(18,18,26,0.07); }
html[data-theme="light"] .tag-age  { color: #15803d; background: rgba(34,197,94,0.15); }
html[data-theme="light"] .tag-f    { color: #be185d; background: rgba(236,72,153,0.13); }
html[data-theme="light"] .tag-h    { color: #6d28d9; background: rgba(124,58,237,0.13); }
html[data-theme="light"] .tag-fr   { color: #b45309; background: rgba(245,158,11,0.16); }