/* ═══════════════ CAMPIO — SCHOOL MANAGEMENT SAAS ═══════════════ */
:root {
  --bg:      #0A0D14;
  --bg-2:    #10141D;
  --panel:   #161A24;
  --indigo:  #5A72FF;
  --indigo-dim: rgba(90,114,255,.14);
  --gold:    #FFB84D;
  --text:    #ECEFF6;
  --muted:   #8A93A8;
  --muted-2: #C0C6D6;
  --line:    rgba(236,239,246,.08);
  --trace:   rgba(96,116,225,.42);
  --trace-bright: #7C90FF;
  --container:     1200px;
  --space-inline:  clamp(20px, 5vw, 72px);
  --space-section: clamp(84px, 12vh, 150px);
  --space-title:   clamp(44px, 7vh, 76px);
  --fs-h2:         clamp(30px, 4.4vw, 58px);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
html.lenis, html.lenis body { height:auto; }
html { overflow-x:hidden; overflow-x:clip; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  background-color:var(--bg);
  background-image:
    radial-gradient(110% 80% at 50% -12%, rgba(90,114,255,.14), rgba(90,114,255,0) 62%),
    radial-gradient(55% 60% at -8% 28%, rgba(90,114,255,.10), rgba(90,114,255,0) 70%),
    radial-gradient(55% 60% at 108% 55%, rgba(124,144,255,.08), rgba(124,144,255,0) 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(255,184,77,.05), rgba(255,184,77,0) 72%);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100vh;
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:'Sora', 'Inter', system-ui, sans-serif; font-weight:700; letter-spacing:-.02em; }
section { position:relative; z-index:2; }

.steps    { background:linear-gradient(180deg, rgba(90,114,255,0), rgba(90,114,255,.06) 20%, rgba(90,114,255,.06) 80%, rgba(90,114,255,0)); }
.signature{ background:linear-gradient(180deg, rgba(124,144,255,0), rgba(124,144,255,.055) 20%, rgba(124,144,255,.055) 80%, rgba(124,144,255,0)); }
.features { background:linear-gradient(180deg, rgba(255,184,77,0), rgba(255,184,77,.05) 20%, rgba(255,184,77,.05) 80%, rgba(255,184,77,0)); }
.exploded { background:linear-gradient(180deg, rgba(90,110,255,0), rgba(90,110,255,.055) 20%, rgba(90,110,255,.055) 80%, rgba(90,110,255,0)); }
.imagine  { background:linear-gradient(180deg, rgba(124,144,255,0), rgba(124,144,255,.05) 20%, rgba(124,144,255,.05) 80%, rgba(124,144,255,0)); }
.pricing  { background:linear-gradient(180deg, rgba(90,114,255,0), rgba(90,114,255,.07) 25%, rgba(90,114,255,.07) 75%, rgba(90,114,255,0)); }
.faq      { background:linear-gradient(180deg, rgba(124,144,255,0), rgba(124,144,255,.045) 20%, rgba(124,144,255,.045) 80%, rgba(124,144,255,0)); }

/* ─────────── app chip ─────────── */
.app-chip {
  width:96px; aspect-ratio:1; border-radius:26%;
  background:linear-gradient(145deg, #93A6FF 0%, #6478FF 45%, #3B4EDB 100%);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(34,42,140,.55),
    0 0 44px rgba(90,114,255,.45),
    0 18px 50px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.app-chip svg { width:52%; height:52%; }

.icon-tile {
  width:46px; height:46px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(90,114,255,.12);
  border:1px solid rgba(124,144,255,.28);
  color:var(--indigo);
}
.icon-tile svg { width:22px; height:22px; }
.icon-tile--lg { width:60px; height:60px; border-radius:16px; }
.icon-tile--lg svg { width:28px; height:28px; }

@keyframes chipBreath {
  0%, 100% { box-shadow:inset 0 2px 6px rgba(255,255,255,.45), inset 0 -6px 14px rgba(34,42,140,.55), 0 0 44px rgba(90,114,255,.45), 0 18px 50px rgba(0,0,0,.5); }
  50% { box-shadow:inset 0 2px 6px rgba(255,255,255,.5), inset 0 -6px 14px rgba(34,42,140,.55), 0 0 78px rgba(90,114,255,.85), 0 18px 50px rgba(0,0,0,.5); }
}
@keyframes markBreath {
  0%, 100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(90,114,255,.35)); }
  50%      { transform:scale(1.09); filter:drop-shadow(0 0 13px rgba(90,114,255,.85)); }
}
.app-chip { animation:chipBreath 3.6s ease-in-out infinite; }
.footer-mark { animation:markBreath 3.6s ease-in-out infinite; }

.chip3d { position:relative; transform-style:preserve-3d; }
.chip-face { position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; }
.chip-face.back { transform:rotateY(180deg); filter:brightness(.82); }

/* ─────────── canvas layers & progress ─────────── */
#gl { position:fixed; inset:0; z-index:0; pointer-events:none; }
.vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(6,7,11,.75) 100%); }
#grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:overlay; }
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:linear-gradient(90deg, var(--indigo), var(--gold));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 12px rgba(90,114,255,.8);
  pointer-events:none;
}

.to-top {
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg, #93A6FF 0%, #6478FF 45%, #3B4EDB 100%);
  border:1px solid rgba(255,255,255,.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(90,114,255,.45);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .35s, transform .35s, visibility .35s, box-shadow .35s;
}
.to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { box-shadow:0 14px 44px rgba(90,114,255,.75); }
@media (max-width: 640px) { .to-top { right:16px; bottom:16px; width:46px; height:46px; } }

.cursor { display:none; }
@media (pointer: fine) {
  body:has(#cursor), body:has(#cursor) * { cursor:none !important; }
  .cursor { display:block; position:fixed; left:0; top:0; z-index:210; width:38px; height:38px; pointer-events:none; will-change:transform; }
  .cursor svg { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 0 8px rgba(90,114,255,.95)); transition:scale .3s ease; }
  .cursor.is-hover svg { scale:1.5; }
}

/* ─────────── circuit nets & connectors ─────────── */
.net path { stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.net path.faint { stroke:rgba(96,116,225,.22); stroke-width:2; }
.net path.spine { stroke:rgba(124,144,255,.55); stroke-width:3.4; }
.net path[data-pulse] { stroke:#D3DAFF; stroke-width:4.5; opacity:.95; filter:drop-shadow(0 0 8px rgba(90,114,255,1)); }
.connector { position:relative; z-index:2; height:36vh; min-height:220px; display:flex; justify-content:center; }
.connector svg { width:min(560px, 90vw); height:100%; overflow:visible; }
.connector path { stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.connector path[data-pulse] { stroke:#D3DAFF; stroke-width:4.6; filter:drop-shadow(0 0 9px rgba(90,114,255,1)); }

.edge-glow { position:absolute; top:12%; bottom:12%; width:120px; z-index:0; pointer-events:none; filter:blur(34px); opacity:.55; }
.edge-glow.left  { left:-56px; background:radial-gradient(ellipse at center, rgba(90,114,255,.55), transparent 70%); }
.edge-glow.right { right:-56px; background:radial-gradient(ellipse at center, rgba(90,114,255,.55), transparent 70%); }

/* ─────────── nav ─────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px, 4vw, 56px);
  transition:background .4s, backdrop-filter .4s;
}
.nav.is-solid { background:rgba(10,13,20,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-logo { display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; font-size:18px; letter-spacing:.01em; }
.logo-mark {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(145deg, #93A6FF, #6478FF 55%, #3B4EDB);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(90,114,255,.4);
}
.nav-right { display:flex; align-items:center; gap:clamp(14px, 2.5vw, 32px); }
.nav-link { font-size:13px; color:var(--muted-2); letter-spacing:.05em; transition:color .3s; }
.nav-link:hover { color:var(--text); }
.nav-cta {
  font-size:13px; padding:10px 22px; border-radius:100px;
  background:linear-gradient(100deg, var(--indigo), #4759E0);
  color:#fff !important; font-weight:600;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(90,114,255,.4);
  transition:transform .3s, box-shadow .3s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(90,114,255,.6); }

/* ─────────── buttons ─────────── */
.btn-cta { display:flex; align-items:center; gap:8px; padding:15px 30px; border-radius:100px; font-weight:600; font-size:15px; transition:transform .3s, box-shadow .3s, border-color .3s; }
.btn-primary-cta { background:linear-gradient(100deg, var(--indigo), #4759E0); color:#fff; box-shadow:0 12px 40px rgba(90,114,255,.4); }
.btn-primary-cta:hover { transform:translateY(-3px); box-shadow:0 18px 55px rgba(90,114,255,.6); }
.btn-ghost-cta {     
    background: var(--indigo-dim);
    border: 1px solid rgba(124, 144, 255, .4);
    color:var(--text);
}
.btn-ghost-cta:hover { transform:translateY(-3px); border-color:rgba(124,144,255,.5); background:var(--indigo-dim); }

/* ─────────── hero ─────────── */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:80px 0 72px; }
.hero-content { padding:0 24px; position:relative; z-index:2; }
.hero-kicker span { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.3em; color:var(--indigo); text-shadow:0 0 22px rgba(90,114,255,.5); margin-bottom:20px; }
.hero-title { font-size:clamp(38px, 6.4vw, 86px); line-height:1.02; margin-bottom:18px; text-shadow:0 6px 30px rgba(6,7,11,.85); }
.hero-title .line { display:block; overflow:hidden; }
.word-w { display:inline-block; white-space:nowrap; }
.hero-title .char { display:inline-block; will-change:transform; }
.hero-title .accent, .hero-title .accent .char { background:linear-gradient(100deg, var(--indigo) 20%, var(--gold) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { max-width:560px; margin:0 auto 30px; color:var(--muted-2); font-size:clamp(15px, 1.6vw, 18px); font-weight:400; line-height:1.6; }
.hero-sub span { display:inline-block; }
.reveal-line { overflow:hidden; }
.hero-badges.reveal-line { padding:8px 0 14px; margin:-8px 0 -14px; }
.badges-wrap { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.hero-visual { position:relative; width:100vw; max-width:none; margin-top:30px; height:clamp(180px, 26vh, 300px); display:flex; align-items:center; justify-content:center; perspective:900px; }
.hero-net { width:100%; height:100%; display:block; overflow:visible; }
.hero-chip { position:absolute; left:50%; top:50%; width:clamp(72px, 8vw, 96px); aspect-ratio:1; transform:translate(-50%, -50%); }
.hero-chip .app-chip { width:100%; height:100%; }

/* floating dashboard stat cards over the hero net */
.hero-dash { position:absolute; inset:0; pointer-events:none; z-index:3; }
.dash-card {
  position:absolute; width:190px; padding:16px 18px; border-radius:16px;
  background:linear-gradient(160deg, rgba(22,26,36,.92), rgba(13,16,23,.92));
  border:1px solid rgba(124,144,255,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:4px; text-align:left;
}
.dash-card[data-card="0"] { left:6%; top:6%; }
.dash-card[data-card="1"] { right:6%; top:2%; }
.dash-card[data-card="2"] { left:50%; bottom:0; transform:translateX(-50%); }
.dash-label { font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.dash-value { font-family:'Sora',sans-serif; font-size:24px; font-weight:700; color:var(--text); }
.dash-trend { font-size:11px; color:var(--muted-2); }
.dash-trend.up { color:#7CE0A6; }
@media (max-width: 900px) {
  .hero-dash { display:none; }
}

/* ─────────── statement ─────────── */
.statement-pin { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:0 24px; }
.statement-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.statement-net path.s-pulse { stroke:#D3DAFF; stroke-width:4.5; vector-effect:non-scaling-stroke; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(90,114,255,1)); opacity:0; }
.statement-text { position:relative; z-index:2; max-width:1000px; text-align:center; font-size:clamp(28px, 4.6vw, 60px); font-weight:600; font-family:'Sora',sans-serif; line-height:1.25; letter-spacing:-.02em; user-select:none; -webkit-user-select:none; }
.statement-text .word { color:rgba(236,239,246,.3); transition:color .3s linear; }
.statement-text .word.is-on { color:var(--text); }

/* ─────────── marquee ─────────── */
.languages { padding:clamp(48px, 7vh, 90px) 0 clamp(24px, 4vh, 48px); overflow:hidden; }
.languages + .connector { height:20vh; min-height:140px; }
.section-kicker { font-size:clamp(14px, 1.6vw, 18px); font-weight:700; letter-spacing:.34em; color:var(--indigo); text-align:center; margin-bottom:38px; text-shadow:0 0 24px rgba(90,114,255,.45); }
.marquee { overflow:hidden; padding:12px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display:flex; gap:18px; width:max-content; will-change:transform; }
.lang-chip { display:flex; align-items:center; gap:10px; padding:16px 30px; border-radius:100px; background:var(--panel); border:1px solid var(--line); font-size:clamp(15px, 1.8vw, 19px); font-family:'Sora',sans-serif; font-weight:500; white-space:nowrap; color:var(--muted-2); }
.lang-chip .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(255,184,77,.7); }

/* ─────────── steps ─────────── */
.steps-pin { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:90px var(--space-inline) 60px; }
.steps-head { text-align:center; margin-bottom:clamp(28px, 5vh, 64px); }
.steps-head h2 { font-size:var(--fs-h2); line-height:1.1; }
.steps-body { display:grid; grid-template-columns:1fr minmax(280px, 420px); gap:clamp(24px, 6vw, 96px); align-items:center; max-width:1200px; margin:0 auto; width:100%; }
.steps-text { position:relative; padding-left:34px; }

.steps-rail { position:absolute; left:0; top:8px; bottom:54px; width:3px; background:rgba(236,239,246,.08); border-radius:3px; }
.steps-rail-fill { position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(180deg, var(--indigo), var(--gold)); border-radius:3px; box-shadow:0 0 14px rgba(90,114,255,.8); }
.steps-rail-dot { position:absolute; left:50%; top:0%; width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%); background:#EDF0FF; box-shadow:0 0 0 4px rgba(90,114,255,.35), 0 0 18px rgba(90,114,255,1); }
.steps-counter { position:absolute; right:0; top:-8px; font-weight:400; color:var(--muted); font-size:14px; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.steps-counter #stepsCounterNum { font-family:'Sora',sans-serif; font-size:30px; font-weight:700; color:var(--indigo); }

.step-item { padding:22px 0; opacity:.45; border-top:1px solid var(--line); transform:translateX(-14px); transition:opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); cursor:pointer; }
.step-item:hover { opacity:.75; }
.step-item:first-child { border-top:none; }
.step-item.is-active { opacity:1; transform:translateX(0); }

.steps-dots { display:none; gap:8px; justify-content:center; margin:10px 0 4px; }
.steps-dots button { font-family:'Sora',sans-serif; font-size:12px; letter-spacing:.14em; color:var(--muted-2); background:transparent; border:1px solid var(--line); border-radius:100px; padding:8px 14px; cursor:pointer; transition:all .3s; }
.steps-dots button.is-active, .steps-dots button:hover { color:var(--text); border-color:var(--indigo); background:var(--indigo-dim); }
.step-num { font-size:12px; letter-spacing:.35em; color:var(--indigo); margin-bottom:8px; font-weight:600; }
.step-item h3 { font-size:clamp(20px, 2.4vw, 30px); margin-bottom:8px; }
.step-item p { color:var(--muted-2); font-weight:400; font-size:15px; line-height:1.6; max-width:440px; }
.step-line { height:3px; max-width:440px; margin-top:14px; border-radius:3px; overflow:hidden; background:var(--line); opacity:0; transition:opacity .4s; }
.step-item.is-active .step-line { opacity:1; }
.step-line-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--indigo), var(--gold)); box-shadow:0 0 10px rgba(90,114,255,.7); }

.steps-phone { position:relative; display:flex; justify-content:center; }
.phone-glow { position:absolute; inset:-12%; z-index:0; border-radius:50%; background:radial-gradient(circle, rgba(90,114,255,.28), transparent 65%); filter:blur(30px); }
.phone-frame {
  position:relative; z-index:1; width:min(300px, 68vw); aspect-ratio:490/1010;
  border-radius:16% / 7.8%; overflow:hidden; padding:22px 18px;
  background:linear-gradient(165deg, rgba(22,26,36,.98), rgba(11,13,19,.98));
  border:1px solid rgba(124,144,255,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}

/* generic mock-ui bits used inside phone frames / signature panels / imagine device */
.mock-topbar { display:flex; gap:6px; margin-bottom:16px; }
.mock-topbar span { width:8px; height:8px; border-radius:50%; background:rgba(236,239,246,.18); }
.mock-topbar span:first-child { background:var(--gold); }
.mock-title { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; margin-bottom:10px; }
.mock-sub { font-size:11.5px; color:var(--muted); margin:6px 0 12px; }
.mock-progress { height:8px; border-radius:8px; background:rgba(236,239,246,.08); overflow:hidden; margin:8px 0; }
.mock-progress-fill { height:100%; width:64%; background:linear-gradient(90deg, var(--indigo), var(--gold)); border-radius:8px; box-shadow:0 0 10px rgba(90,114,255,.6); }
.mock-table { display:flex; flex-direction:column; gap:8px; }
.mock-trow { display:flex; justify-content:space-between; font-size:12px; color:var(--muted-2); padding:8px 10px; border-radius:9px; background:rgba(236,239,246,.04); }
.mock-setup-row { display:flex; align-items:center; gap:10px; padding:9px 0; }
.mock-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg, #93A6FF, #3B4EDB); flex-shrink:0; }
.mock-lines { flex:1; display:flex; flex-direction:column; gap:6px; }
.mock-line { height:7px; border-radius:5px; background:rgba(236,239,246,.12); }
.mock-line.w70 { width:70%; } .mock-line.w60 { width:60%; } .mock-line.w80 { width:80%; }
.mock-line.w40 { width:40%; } .mock-line.w30 { width:30%; } .mock-line.w50 { width:50%; }
.mock-check { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; background:rgba(124,224,166,.16); color:#7CE0A6; flex-shrink:0; }
.mock-check.pending { background:rgba(255,184,77,.16); color:var(--gold); }
.mock-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:14px 0; }
.mock-dot { width:100%; aspect-ratio:1; border-radius:50%; }
.mock-dot.present { background:#7CE0A6; box-shadow:0 0 8px rgba(124,224,166,.6); }
.mock-dot.absent { background:#FF7A8A; box-shadow:0 0 8px rgba(255,122,138,.6); }
.mock-timetable { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.mock-chat { display:flex; flex-direction:column; gap:10px; }
.mock-bubble { font-size:12px; line-height:1.5; padding:11px 14px; border-radius:14px 14px 14px 4px; background:rgba(236,239,246,.06); color:var(--muted-2); }
.mock-bubble.accent { background:var(--indigo-dim); color:var(--text); border:1px solid rgba(124,144,255,.3); }

.step-visual { position:absolute; inset:0; padding:22px 18px; opacity:0; transition:opacity .6s; }
.step-visual.is-active { opacity:1; }

/* ─────────── inside (engineering rows) ─────────── */
.exploded { padding:clamp(40px, 6vh, 90px) var(--space-inline); }
.exploded-head { text-align:center; margin-bottom:clamp(20px, 3.5vh, 44px); }
.exploded-title { font-size:var(--fs-h2); line-height:1.1; }
.exploded-title .dim { color:var(--muted); }
.inside-list { position:relative; max-width:var(--container); margin:0 auto; display:flex; flex-direction:column; gap:clamp(12px, 2.2vh, 26px); }
.inside-list::before { content:''; position:absolute; left:115px; top:-24px; bottom:-24px; width:3px; background:linear-gradient(180deg, transparent, var(--trace) 8%, var(--trace) 92%, transparent); border-radius:3px; }
.i-row { display:grid; grid-template-columns:230px 1fr minmax(260px, 46%); align-items:center; gap:0; position:relative; }
.i-tile {
  width:230px; height:clamp(92px, 13vh, 128px); border-radius:22px;
  background:linear-gradient(160deg, rgba(28,32,44,.96), rgba(15,17,24,.96));
  border:1px solid rgba(124,144,255,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  position:relative; z-index:1;
  transition:border-color .35s, box-shadow .35s;
}
.i-tile:hover { border-color:rgba(124,144,255,.6); box-shadow:0 24px 60px rgba(90,114,255,.25); }
.i-tile span:not(.icon-tile) { font-size:13.5px; letter-spacing:.05em; color:var(--muted-2); font-weight:500; }
.i-tile.chip-tile { background:none; border:none; box-shadow:none; }
.x-chip { width:clamp(76px, 11vh, 104px); }
.i-trace { height:54px; width:100%; align-self:center; overflow:visible; }
.i-trace .i-line { stroke:rgba(124,144,255,.62); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.i-trace .i-pulse { stroke:#D3DAFF; stroke-width:4.2; opacity:0; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 7px rgba(90,114,255,1)); }
.i-trace .i-pad { stroke:#9AABFF; stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(90,114,255,.8)); }
.i-trace .i-pad.ring { stroke:rgba(90,114,255,.28); stroke-width:15; filter:none; }
.i-info h4 { font-size:clamp(16px, 1.8vw, 20px); margin-bottom:6px; }
.i-info p { font-size:14px; color:var(--muted-2); font-weight:400; line-height:1.6; }

/* ─────────── features ─────────── */
.features { padding:var(--space-section) var(--space-inline); }
.features-title { font-size:var(--fs-h2); line-height:1.12; margin-bottom:var(--space-title); text-align:center; max-width:var(--container); margin-left:auto; margin-right:auto; }
.features-title .dim { color:var(--muted); font-weight:600; }
.features-wrap { position:relative; display:grid; grid-template-columns:1fr clamp(220px, 26vw, 360px) 1fr; align-items:stretch; max-width:var(--container); margin:0 auto; }
.f-col { display:flex; flex-direction:column; gap:22px; justify-content:space-between; }
.f-card {
  display:flex; gap:16px; align-items:center; flex:1;
  background:linear-gradient(160deg, rgba(24,28,38,.92), rgba(14,16,23,.92));
  border:1px solid var(--line); border-radius:20px; padding:26px;
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.f-card:hover { transform:translateY(-4px); border-color:rgba(124,144,255,.4); box-shadow:0 16px 50px rgba(90,114,255,.18); }
.f-icon { width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(90,114,255,.12); border:1px solid rgba(124,144,255,.28); color:var(--indigo); }
.f-icon svg { width:22px; height:22px; }
.f-card h3 { font-size:18px; margin-bottom:6px; }
.f-card p { color:var(--muted-2); font-weight:400; font-size:14px; line-height:1.55; }
.f-center { position:relative; min-height:420px; }
.f-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.f-chip { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(84px, 9vw, 110px); }

/* ─────────── signature features ─────────── */
.signature { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.sig-title { text-align:center; font-size:var(--fs-h2); line-height:1.1; margin-bottom:var(--space-title); }
.sig-title .dim { color:var(--muted); }
.sig-row { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr); gap:clamp(30px, 5vw, 90px); align-items:center; }
.sig-connector { max-width:var(--container); margin:0 auto; height:clamp(120px, 18vh, 200px); }
.sig-connector svg { width:100%; height:100%; overflow:visible; }
.sig-connector path { stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.sig-connector path[data-pulse] { stroke:#D3DAFF; stroke-width:4.6; filter:drop-shadow(0 0 9px rgba(90,114,255,1)); }
.sig-rev .sig-copy { order:2; }
.sig-rev .sig-phone { order:1; }
.sig-badge { display:inline-block; margin-bottom:18px; font-size:11.5px; font-weight:700; letter-spacing:.26em; padding:9px 16px; border-radius:100px; color:#080A10; background:linear-gradient(120deg, var(--indigo), var(--gold)); box-shadow:0 8px 26px rgba(90,114,255,.4); }
.sig-copy h3 { font-size:clamp(26px, 3.2vw, 44px); line-height:1.12; margin-bottom:18px; }
.sig-copy h3 .lav { color:var(--indigo); }
.sig-copy p { color:var(--muted-2); font-size:clamp(15px, 1.5vw, 17.5px); line-height:1.65; margin-bottom:22px; }
.sig-copy ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.sig-copy li { position:relative; padding-left:26px; color:var(--muted-2); font-size:14.5px; line-height:1.5; }
.sig-copy li::before { content:''; position:absolute; left:0; top:7px; width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg, var(--indigo), var(--gold)); box-shadow:0 0 10px rgba(90,114,255,.6); }
.sig-phone { display:flex; justify-content:center; }

.mock-panel {
  width:100%; max-width:360px; border-radius:26px; padding:26px 24px;
  background:linear-gradient(165deg, rgba(22,26,36,.95), rgba(11,13,19,.95));
  border:1px solid rgba(124,144,255,.22);
  box-shadow:0 34px 80px rgba(0,0,0,.55), 0 0 60px rgba(90,114,255,.15);
}
.mock-panel-head { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:18px; color:var(--muted-2); }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:#7CE0A6; box-shadow:0 0 10px rgba(124,224,166,.8); animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.mock-list { display:flex; flex-direction:column; gap:10px; }
.mock-item { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-radius:12px; background:rgba(236,239,246,.04); font-size:13.5px; color:var(--muted-2); }
.mock-item i { font-style:normal; font-weight:600; font-size:12.5px; padding:4px 10px; border-radius:100px; }
.mock-item i.ok { color:#7CE0A6; background:rgba(124,224,166,.12); }
.mock-item i.no { color:#FF7A8A; background:rgba(255,122,138,.12); }
.mock-item i.grade { color:var(--indigo); background:var(--indigo-dim); }
.mock-big-num { font-family:'Sora',sans-serif; font-size:48px; font-weight:800; margin:6px 0 4px; background:linear-gradient(100deg, var(--indigo), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width: 900px) {
  .sig-row { grid-template-columns:1fr; gap:34px; }
  .sig-rev .sig-copy { order:1; }
  .sig-rev .sig-phone { order:2; }
}

/* ─────────── imagine ─────────── */
.imagine { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.imagine-grid { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:minmax(300px, 1fr) minmax(300px, 1fr); gap:clamp(30px, 5vw, 80px); align-items:center; }
.imagine-title { font-size:var(--fs-h2); line-height:1.08; margin-bottom:36px; }
.imagine-title .accent { color:var(--indigo); }
.imagine-points { list-style:none; display:flex; flex-direction:column; gap:20px; margin-bottom:38px; }
.imagine-points li { display:flex; align-items:center; gap:16px; }
.imagine-points span:last-child { font-size:clamp(15.5px, 1.5vw, 18.5px); color:var(--muted-2); }
.imagine-stat { display:flex; align-items:center; gap:20px; padding:20px 26px; margin-bottom:38px; max-width:440px; border-radius:20px; border:1px solid rgba(124,144,255,.35); background:linear-gradient(160deg, rgba(28,32,44,.9), rgba(15,17,24,.9)); box-shadow:0 16px 44px rgba(90,114,255,.14); }
.stat-num { font-family:'Sora',sans-serif; font-size:clamp(30px, 3.2vw, 42px); font-weight:800; white-space:nowrap; background:linear-gradient(120deg, var(--indigo), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px rgba(90,114,255,.4)); }
.imagine-stat p { font-size:14.5px; line-height:1.5; color:var(--muted-2); }
.imagine-stat strong { color:var(--text); font-weight:600; }
.imagine-badges { justify-content:flex-start; }

.imagine-phones { position:relative; }
.imagine-device {
  position:relative; width:min(380px, 88vw); margin:0 auto; padding:24px;
  border-radius:28px;
  background:linear-gradient(160deg, rgba(24,28,38,.98), rgba(11,13,19,.98));
  border:1px solid rgba(124,144,255,.25);
  box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 60px rgba(90,114,255,.2);
  will-change:transform;
}
.mock-dash-head { display:flex; align-items:center; justify-content:space-between; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; margin-bottom:16px; }
.mock-dash-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.mock-dash-stats div { text-align:center; padding:12px 6px; border-radius:14px; background:rgba(236,239,246,.04); }
.mock-dash-stats b { display:block; font-family:'Sora',sans-serif; font-size:18px; color:var(--text); }
.mock-dash-stats small { font-size:10.5px; color:var(--muted); }
.mock-chart { display:flex; align-items:flex-end; gap:8px; height:80px; margin-bottom:18px; }
.mock-chart div { flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--indigo), rgba(90,114,255,.15)); }

@media (max-width: 900px) {
  .imagine-grid { grid-template-columns:1fr; }
  .imagine-phones { order:-1; margin:0 auto; width:100%; }
  .imagine-badges { justify-content:flex-start; }
}

/* ─────────── pricing ─────────── */
.pricing { padding:var(--space-section) var(--space-inline); text-align:center; }
.pricing h2 { font-size:var(--fs-h2); line-height:1.1; margin-bottom:var(--space-title); }
.price-card { max-width:520px; margin:0 auto; padding:44px 38px; background:linear-gradient(170deg, rgba(24,28,38,.95), rgba(10,13,20,.95)); border:1px solid rgba(124,144,255,.3); border-radius:32px; box-shadow:0 0 80px rgba(90,114,255,.12); }
.price-plans { display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.plan { font-family:'Sora',sans-serif; font-size:13px; color:var(--muted-2); background:transparent; border:1px solid var(--line); border-radius:100px; padding:9px 18px; cursor:pointer; transition:all .3s; white-space:nowrap; }
.plan.is-active, .plan:hover { color:var(--text); border-color:var(--indigo); background:var(--indigo-dim); }
.price-amount { font-family:'Sora',sans-serif; font-size:clamp(48px, 6.5vw, 68px); font-weight:800; letter-spacing:-.02em; }
.price-amount span { font-size:.28em; color:var(--muted); font-weight:500; }
.price-save { display:inline-block; margin-top:12px; padding:7px 16px; border-radius:100px; font-size:13px; color:var(--text); background:var(--indigo-dim); border:1px solid rgba(124,144,255,.4); }
.price-save b { color:var(--indigo); font-weight:600; }
.price-note { color:var(--indigo); font-size:14px; margin:12px 0 30px; }
.price-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ─────────── cta ─────────── */
.cta { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-section) var(--space-inline); }
.cta-title { font-size:clamp(32px, 5.4vw, 78px); line-height:1.1; margin-bottom:48px; max-width:1100px; }
.cta-title .line { display:block; overflow:hidden; }
.cta-title .char { display:inline-block; }
.cta-title .accent, .cta-title .accent .char { background:linear-gradient(100deg, var(--indigo) 20%, var(--gold) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta-note { margin-top:26px; font-size:13.5px; letter-spacing:.03em; color:var(--muted); }

/* ─────────── faq ─────────── */
.faq { padding:var(--space-section) var(--space-inline); max-width:calc(860px + 2 * var(--space-inline)); margin:0 auto; }
.faq-title { text-align:center; font-size:var(--fs-h2); margin-bottom:var(--space-title); }
.faq-title .dim { color:var(--muted); }
.faq-list { display:flex; flex-direction:column; gap:14px; }
.faq-item { background:linear-gradient(160deg, rgba(24,28,38,.92), rgba(14,16,23,.92)); border:1px solid var(--line); border-radius:18px; transition:border-color .35s; }
.faq-item[open] { border-color:rgba(124,144,255,.4); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; font-family:'Sora',sans-serif; font-size:clamp(16px, 1.9vw, 19px); font-weight:600; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid rgba(124,144,255,.45); color:var(--indigo); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:400; transition:transform .35s, background .35s; }
.faq-item[open] summary::after { transform:rotate(45deg); background:var(--indigo-dim); }
.faq-body { padding:0 26px 24px; color:var(--muted-2); font-size:15px; line-height:1.7; }
.faq-body p + p, .faq-body p + ul { margin-top:10px; }
.faq-body ul { margin-left:18px; display:flex; flex-direction:column; gap:8px; }
.faq-body strong { color:var(--text); font-weight:600; }

/* ─────────── nav menu (mobile compact) ─────────── */
.nav-menu { position:relative; display:none; }
.nav-menu-btn { padding:8px 12px; }
.lang-btn { display:flex; align-items:center; gap:7px; font-family:'Sora',sans-serif; font-size:12.5px; color:var(--muted-2); background:rgba(236,239,246,.05); border:1px solid var(--line); border-radius:100px; cursor:pointer; transition:all .3s; }
.lang-btn:hover { color:var(--text); border-color:rgba(124,144,255,.5); }
.lang-menu { position:absolute; top:calc(100% + 10px); right:0; min-width:150px; background:rgba(16,20,29,.97); border:1px solid var(--line); border-radius:14px; padding:6px; z-index:60; display:none; flex-direction:column; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.lang-menu.is-open { display:flex; }
.nav-drop { right:auto; left:0; min-width:200px; }
.nav-drop a { display:block; font-size:13.5px; color:var(--muted-2); padding:9px 14px; border-radius:9px; transition:all .25s; }
.nav-drop a:hover { color:var(--text); background:var(--indigo-dim); }

/* ─────────── footer ─────────── */
.footer { display:flex; flex-direction:column; align-items:center; gap:14px; padding:60px 24px 46px; border-top:1px solid var(--line); }
.footer-links { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); }
.footer-links a { color:var(--muted-2); transition:color .3s; }
.footer-links a:hover { color:var(--text); }
.footer p { font-size:12px; color:var(--muted); letter-spacing:.05em; }

/* ─────────── responsive ─────────── */
@media (max-width: 1080px) {
  .steps-body { gap:28px; }
  .features-wrap { grid-template-columns:1fr clamp(170px, 20vw, 240px) 1fr; }
  .f-card { padding:20px; }
  .i-row { grid-template-columns:230px 1fr minmax(240px, 50%); }
  .inside-list::before { left:115px; }
}
@media (max-width: 900px) {
  .nav-link { display:none; }
  .nav-menu { display:block; }
  .nav { padding:16px 18px; }
  .hero { padding-top:96px; }
  .hero-title { font-size:clamp(34px, 10vw, 52px); }
  .hero-sub { font-size:14px; padding:0 6px; }
  .badges-wrap { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .hero-visual { height:clamp(130px, 20vh, 200px); }
  .hero-chip { width:clamp(56px, 7vh, 72px); }
  .statement-text { font-size:clamp(24px, 6.6vw, 34px); }
  .steps-pin { padding:74px 18px 36px; }
  .steps-head { margin-bottom:14px; }
  .steps-body { grid-template-columns:1fr; gap:14px; }
  .steps-phone { order:-1; }
  .phone-frame { width:min(200px, 50vw); padding:14px 12px; }
  .steps-text { padding-left:0; text-align:center; }
  .steps-rail { display:none; }
  .steps-counter { position:static; display:block; margin-bottom:2px; font-size:13px; }
  .steps-counter #stepsCounterNum { font-size:26px; }
  .steps-dots { display:flex; }
  .step-item { display:none; padding:6px 0 0; border-top:none; }
  .step-item.is-active { display:block; transform:none; }
  .step-num { display:none; }
  .step-item p { font-size:13.5px; max-width:100%; }
  .step-line { margin:14px auto 0; }
  .features { padding:8vh 18px; }
  .features-wrap { grid-template-columns:1fr; }
  .f-center { order:-1; min-height:190px; }
  .f-net path { display:none; }
  .f-net path.spine { display:block; }
  .f-col { gap:14px; }
  .f-col + .f-col { margin-top:14px; }
  .connector { height:20vh; min-height:130px; }
  .edge-glow { display:none; }
  .exploded { padding:9vh 18px; }
  .inside-list::before { display:none; }
  .i-row { grid-template-columns:1fr; gap:12px; justify-items:center; text-align:center; }
  .i-trace { display:none; }
  .i-info { max-width:420px; }
  .price-card { padding:32px 20px; }
  .cta-title { font-size:clamp(26px, 7.4vw, 44px); }
  .footer { padding:44px 18px 36px; }
}
@media (max-width: 640px) {
  .nav { padding:10px 6px; }
  .nav-logo { gap:6px; }
  .logo-mark { width:24px; height:24px; }
  .nav-logo span { font-size:14.5px; }
  .nav-right { gap:4px; }
  .nav-cta { padding:7px 9px; font-size:11px; }
  .lang-btn { padding:6px 7px; font-size:10.5px; gap:4px; }
  .nav-menu-btn { padding:6px 7px; }
  .to-top { right:34px; bottom:16px; width:44px; height:44px; }
}
@media (max-width: 360px) {
  .nav-logo span { display:none; }
  .footer { padding:44px 18px 112px; }
  .footer-links { flex-wrap:wrap; justify-content:center; row-gap:6px; }
}
@media (min-width: 2000px) {
  .nav { padding:26px 64px; }
  .hero-title { font-size:104px; }
  .hero-sub { font-size:22px; max-width:800px; }
  .section-kicker { font-size:22px; }
  .connector svg { width:760px; }
  .statement-text { font-size:56px; max-width:1240px; }
  .steps-head h2 { font-size:80px; }
  .phone-frame { width:400px; }
  .sig-title { font-size:80px; }
  .features-title { font-size:74px; max-width:1620px; }
  .exploded-title { font-size:80px; }
  .imagine-title { font-size:74px; }
  .pricing h2 { font-size:74px; }
  .price-card { max-width:680px; padding:60px 54px; }
  .price-amount { font-size:96px; }
  .faq-title { font-size:74px; }
  .cta-title { font-size:100px; max-width:1560px; }
}

@media (prefers-reduced-motion: reduce) {
  #gl, #grain { display:none; }
}

/* ═══════════════════════════════════════
   STATEMENT V2
   ═══════════════════════════════════════ */

   .statement-v2 {
    position: relative;
    min-height: 150vh;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(75, 95, 255, 0.10),
            transparent 38%
        ),
        #080A11;
    overflow: hidden;
}


/* subtle background grid */

.statement-v2::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );

    pointer-events: none;
}


/* main container */

.statement-v2-inner {
    position: sticky;
    top: 0;

    height: 100vh;

    display: flex;
    align-items: center;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 8vw;
}


/* ═══════════════════════════════════════
   LEFT INDICATOR
   ═══════════════════════════════════════ */

.statement-indicator {
    position: absolute;

    left: 5vw;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    color: rgba(255,255,255,.45);

    font-family: 'Sora', sans-serif;

    font-size: 10px;

    letter-spacing: .18em;
}


.indicator-label {
    font-weight: 700;

    color: #8D9BFF;
}


.indicator-label.bottom {
    writing-mode: vertical-rl;

    color: rgba(255,255,255,.25);
}


/* vertical line */

.indicator-line {
    position: relative;

    width: 1px;

    height: 180px;

    background: rgba(255,255,255,.12);

    overflow: visible;
}


/* progress */

.indicator-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 0%;

    background: #6F7FFF;

    box-shadow:
        0 0 10px rgba(91,112,255,.9),
        0 0 25px rgba(91,112,255,.5);
}


/* moving dot */

.indicator-dot {
    position: absolute;

    left: 50%;

    top: 0;

    width: 9px;
    height: 9px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #D9DEFF;

    box-shadow:
        0 0 0 4px rgba(91,112,255,.15),
        0 0 15px rgba(91,112,255,1);
}

.statement-v2 {
  position: relative;
  min-height: 115vh;              /* was 150vh — shorter runway, no dead scroll */
  background:
    radial-gradient(circle at 50% 45%, rgba(75,95,255,0.10), transparent 38%),
    #080A11;
  overflow: hidden;
}

.statement-v2-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 8vw;
  will-change: transform;
}

/* word reveal — blur + rise instead of a flat color snap */
.statement-text-v2 .word {
  display: inline-block;
  color: rgba(255,255,255,.15);
  filter: blur(4px);
  transform: translateY(6px);
  opacity: .5;
  transition: color .45s cubic-bezier(.22,1,.36,1),
              filter .45s cubic-bezier(.22,1,.36,1),
              transform .45s cubic-bezier(.22,1,.36,1),
              opacity .45s cubic-bezier(.22,1,.36,1);
}

.statement-text-v2 .word.is-on {
  color: #F2F4FF;
  filter: blur(0);
  transform: translateY(0);
  opacity: 1;
  text-shadow: 0 0 30px rgba(110,125,255,.10);
}

/* shimmer sweep across the highlighted line once active */
.statement-highlight {
  position: relative;
  color: rgba(125,140,255,.25);
  transition: color .5s ease, text-shadow .5s ease;
}

.statement-highlight.is-active {
  color: #8794FF;
  text-shadow: 0 0 35px rgba(92,112,255,.28);
  background: linear-gradient(100deg,
    #8794FF 0%, #D9DEFF 45%, #8794FF 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 2.4s ease-in-out .1s 1 both;
}

@keyframes shimmerSweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* footer chips — stagger in near the end instead of sitting static */
.statement-footer span {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.statement-footer.is-on span {
  opacity: 1;
  transform: translateY(0);
}
.statement-footer span:nth-child(1) { transition-delay: 0s; }
.statement-footer span:nth-child(2) { transition-delay: .08s; }
.statement-footer span:nth-child(3) { transition-delay: .16s; }
.statement-footer span:nth-child(4) { transition-delay: .24s; }

.indicator-progress { transition: height .1s linear; }
.indicator-dot { transition: top .1s linear; }

@media (prefers-reduced-motion: reduce) {
  .statement-text-v2 .word,
  .statement-highlight,
  .statement-footer span { transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════ */

.statement-content {
    position: relative;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    text-align: center;

    z-index: 2;
}


/* eyebrow */

.statement-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 42px;

    font-family: 'Sora', sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .22em;

    color: rgba(255,255,255,.42);
}


.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #6F7FFF;

    box-shadow:
        0 0 10px #6F7FFF;
}


/* ═══════════════════════════════════════
   MAIN TEXT
   ═══════════════════════════════════════ */

.statement-text-v2 {
    margin: 0;

    font-family: 'Sora', sans-serif;

    font-size: clamp(
        36px,
        5.1vw,
        72px
    );

    font-weight: 600;

    line-height: 1.16;

    letter-spacing: -.045em;

    color: rgba(255,255,255,.16);
}


/* individual words */

.statement-text-v2 .word {
    display: inline;

    color: rgba(255,255,255,.15);

    transition:
        color .5s ease,
        text-shadow .5s ease;
}


/* active words */

.statement-text-v2 .word.is-on {
    color: #F2F4FF;

    text-shadow:
        0 0 30px rgba(110,125,255,.08);
}


/* highlighted sentence */

.statement-highlight {
    color: rgba(125,140,255,.25);

    transition:
        color .5s ease,
        text-shadow .5s ease;
}


.statement-highlight.is-active {
    color: #8794FF;

    text-shadow:
        0 0 35px rgba(92,112,255,.25);
}


/* ═══════════════════════════════════════
   BOTTOM DATA
   ═══════════════════════════════════════ */

.statement-footer {
    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 55px;

    flex-wrap: wrap;
}


.statement-footer span {
    padding: 9px 14px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 100px;

    font-family: 'Sora', sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .15em;

    color: #fff;

    background: rgba(255,255,255,.025);

    backdrop-filter: blur(10px);
    
    background: var(--indigo-dim);
    border: 1px solid rgba(124, 144, 255, .4);
    box-shadow: 0 16px 104px rgb(90 114 255 / 27%);
}


/* ═══════════════════════════════════════
   CONNECTOR
   ═══════════════════════════════════════ */

.connector-v2 {
    position: relative;

    height: 220px;

    display: flex;

    justify-content: center;
}


.connector-line {
    width: 1px;

    height: 100%;

    background: linear-gradient(
        to bottom,
        rgba(100,120,255,.7),
        rgba(100,120,255,.05)
    );
}


.connector-dot {
    position: absolute;

    top: 0;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #AAB3FF;

    box-shadow:
        0 0 15px #6475FF,
        0 0 40px rgba(100,117,255,.6);
}


/* ═══════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════ */

@media (max-width: 768px) {

    .statement-v2 {
        min-height: 130vh;
    }

    .statement-v2-inner {
        padding: 0 28px;
    }

    .statement-indicator {
        display: none;
    }

    .statement-eyebrow {
        margin-bottom: 28px;

        font-size: 9px;

        letter-spacing: .16em;
    }

    .statement-text-v2 {
        font-size: clamp(
            34px,
            10vw,
            48px
        );

        line-height: 1.2;
    }

    .statement-footer {
        gap: 7px;

        margin-top: 35px;
    }

    .statement-footer span {
        font-size: 8px;

        padding: 7px 10px;
    }
}