/* ═══════════════ SENTHORA — CINEMATIC ═══════════════ */
@font-face { font-family:'Nohemi'; src:url('../assets/fonts/Nohemi-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('../assets/fonts/Nohemi-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('../assets/fonts/Nohemi-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('../assets/fonts/Nohemi-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }

:root {
  --bg:      #0A090E;
  --bg-2:    #100E17;
  --panel:   #151320;
  --violet:  #00C8FF;
  --violet-dim: rgba(0, 200, 255, .14);
  --pink:    #D000FF;
  --text:    #EAEAF0;
  --muted:   #9BA4BD;
  --muted-2: #BDC7E0;
  --line:    rgba(234,234,240,.08);
  --trace:   rgba(0, 200, 255, .42);
  --trace-bright: #00C8FF;
  /* design tokens: one grid, one spacing rhythm, one heading scale */
  --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; }
/* nothing may widen the page: decorative glows/nets that spill sideways get clipped
   (fixes the page sitting left-of-center on phones) */
html { overflow-x:hidden; overflow-x:clip; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  background-color:var(--bg);
  /* hero backdrop: pure CSS gradients — resolution-independent, crisp on any screen
     (replaced the compressed webp that showed banding on large displays) */
  background-image:
    radial-gradient(110% 80% at 50% -12%, rgba(124,92,240,.14), rgba(124,92,240,0) 62%),
    radial-gradient(55% 60% at -8% 28%, rgba(124,92,240,.10), rgba(124,92,240,0) 70%),
    radial-gradient(55% 60% at 108% 55%, rgba(154,138,251,.08), rgba(154,138,251,0) 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(204,51,102,.05), rgba(204,51,102,0) 72%);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100vh;
  color:var(--text);
  /* Segoe UI fallback keeps Cyrillic and accented text clean when translated */
  font-family:'Nohemi', 'Segoe UI', system-ui, sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Google Translate wraps text in <font> tags — force them to inherit our styles */
font { font-family:inherit !important; color:inherit !important; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:600; letter-spacing:-.02em; }
section { position:relative; z-index:2; }

/* ─────────── section hue shifts ───────────
   design review: one static canvas for the whole page gave no compositional
   rhythm — key sections now carry their own subtle hue so each block reads
   as its own space (slight shift only, the starry canvas stays underneath) */
.steps {
  background:linear-gradient(180deg, rgba(0,200,255,0), rgba(0,200,255,.06) 20%, rgba(0,200,255,.06) 80%, rgba(0,200,255,0));
}
.signature {
  background:linear-gradient(180deg, rgba(32,75,234,0), rgba(32,75,234,.055) 20%, rgba(32,75,234,.055) 80%, rgba(32,75,234,0));
}
.features {
  background:linear-gradient(180deg, rgba(208,0,255,0), rgba(208,0,255,.05) 20%, rgba(208,0,255,.05) 80%, rgba(208,0,255,0));
}
.exploded {
  background:linear-gradient(180deg, rgba(0,200,255,0), rgba(0,200,255,.055) 20%, rgba(0,200,255,.055) 80%, rgba(0,200,255,0));
}
.imagine {
  background:linear-gradient(180deg, rgba(157,0,255,0), rgba(157,0,255,.05) 20%, rgba(157,0,255,.05) 80%, rgba(157,0,255,0));
}
.pricing {
  background:linear-gradient(180deg, rgba(0,200,255,0), rgba(0,200,255,.07) 25%, rgba(0,200,255,.07) 75%, rgba(0,200,255,0));
}
.faq {
  background:linear-gradient(180deg, rgba(32,75,234,0), rgba(32,75,234,.045) 20%, rgba(32,75,234,.045) 80%, rgba(32,75,234,0));
}

/* ─────────── app chip (logo display) ─────────── */
.app-chip {
  width:104px; aspect-ratio:1;
  background:transparent;
  border:none;
  box-shadow:none;
  display:flex; align-items:center; justify-content:center;
}
.app-chip img {
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(0, 210, 255, 0.55)) drop-shadow(0 4px 18px rgba(180, 0, 255, 0.45));
  animation:none;
}

/* ─────────── icon tiles ─────────── */
.icon-tile {
  width:46px; height:46px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(0,200,255,.12);
  border:1px solid rgba(0,200,255,.28);
  color:var(--violet);
}
.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; }

/* ─────────── clean original logo presentation ─────────── */
.app-chip { animation:none; }
.nav-logo img, .footer > img:not(.footer-qr) { animation:none; opacity:1; }

/* 3D rotating chip (scroll-scrubbed) */
.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:none; }

/* ─────────── 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(8,7,10,.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(--violet), var(--pink));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 12px rgba(154,138,251,.8);
  pointer-events:none;
}

/* ─────────── scroll-to-top button ─────────── */
.to-top {
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg, #00D2FF 0%, #204BEA 50%, #D000FF 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(0,200,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(0,200,255,.75); }
@media (max-width: 640px) { .to-top { right:16px; bottom:16px; width:46px; height:46px; } }

/* ─────────── custom cursor (tech reticle, desktop only) ─────────── */
.cursor { display:none; }
@media (pointer: fine) {
  /* hide the native cursor everywhere, but only on pages that render the custom one;
     !important beats the scattered cursor:pointer rules (lang button, to-top, FAQ, plans) */
  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(0,200,255,.95));
    transition:scale .3s ease;
  }
  .cursor.is-hover svg { scale:1.5; }
}

/* ─────────── circuit nets & connectors (BOLD) ─────────── */
.net path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
.net path.faint { stroke:rgba(0,180,255,.22); stroke-width:2; }
.net path.spine { stroke:rgba(0,200,255,.55); stroke-width:3.4; }
.net path[data-pulse] {
  stroke:#80E0FF; stroke-width:4.5; opacity:.95;
  filter:drop-shadow(0 0 8px rgba(0,200,255,1));
}
.connector {
  position:relative; z-index:2; height:36vh; min-height:220px;
  display:flex; justify-content:center;
  margin-top:-30px; margin-bottom:-30px;
}
.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:#80E0FF; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(0,200,255,1));
}

/* continuous section spine connector */
.section-spine-net {
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:min(560px, 90vw); height:100%; z-index:0; pointer-events:none; overflow:visible;
}
.section-spine-net svg { width:100%; height:100%; overflow:visible; }
.section-spine-net path { stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.section-spine-net path.spine { stroke:rgba(0,200,255,.55); stroke-width:3.4; }
.section-spine-net path[data-pulse] { stroke:#80E0FF; stroke-width:4.6; filter:drop-shadow(0 0 9px rgba(0,200,255,1)); }

.estimator-net-wrap {
  position:absolute; top:0; bottom:0; left:0; right:0;
  z-index:0; pointer-events:none; overflow:visible;
}
.estimator-net { width:100%; height:100%; }

/* edge glows */
.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(124,92,240,.55), transparent 70%); }
.edge-glow.right { right:-56px; background:radial-gradient(ellipse at center, rgba(124,92,240,.55), transparent 70%); }

/* ─────────── nav ─────────── */
.nav {
  /* z-index above every page layer so content can never paint over the 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(17,15,20,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:.02em; }
.nav-logo img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(0,200,255,.45)); }
.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(--violet), #7B68F0);
  color:#0E0C12 !important; font-weight:600;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(154,138,251,.4);
  transition:transform .3s, box-shadow .3s;
}
.nav-cta font { color:#0E0C12 !important; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(154,138,251,.6); }

/* ─────────── hero ─────────── */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  /* bottom-anchored: any leftover space goes above the phone,
     so the net's end sits flush with the hero's bottom edge */
  align-items:center; justify-content:flex-end; text-align:center;
  padding:80px 0 72px;
}
.hero-content { padding:0 24px; position:relative; }
.hero-phone {
  position:relative; z-index:2;
  width:clamp(220px, 25vw, 360px);
  margin:0 auto 20px;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 20px 45px rgba(0,200,255,.25)) drop-shadow(0 15px 35px rgba(0,0,0,.75));
  transition:transform .4s ease;
}
.hero-phone img { width:100%; height:auto; display:block; }
.hero-title, .hero-sub, .hero-badges { position:relative; z-index:2; }
.hero-sub span { display:inline-block; }
.hero-title {
  font-size:clamp(38px, 6.4vw, 88px); line-height:1.02; margin-bottom:18px;
  text-shadow:0 6px 30px rgba(17,15,20,.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(--violet) 20%, var(--pink) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub { max-width:520px; margin:0 auto 22px; color:var(--muted-2); font-size:clamp(15px, 1.6vw, 18px); font-weight:400; line-height:1.6; }
.reveal-line { overflow:hidden; }
/* breathing room so the buttons' hover lift is never clipped by the reveal mask */
.hero-badges.reveal-line { padding:8px 0 14px; margin:-8px 0 -14px; }
.badges-wrap { display:inline-flex; gap:14px; }
/* store buttons: official badge look — black rounded rectangle, thin light
   outline, white text, original full-color store icons (current versions) */
.store-btn {
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 24px 12px 16px; border-radius:14px;
  background:#000;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.store-btn:hover {
  transform:translateY(-3px); border-color:rgba(255,255,255,.75);
  box-shadow:0 16px 55px rgba(154,138,251,.35);
}
.store-btn img { height:32px; width:32px; object-fit:contain; }
.store-btn span { display:flex; flex-direction:column; line-height:1.15; font-size:16px; font-weight:500; color:#fff; }
.store-btn b { font-weight:500; white-space:nowrap; color:#fff; }
.store-btn small { font-size:10px; font-weight:300; color:rgba(255,255,255,.75); letter-spacing:.04em; }
.store-btn font { color:#fff !important; }

/* Custom Algostrum CTA buttons */
.custom-hero-cta {
  background:linear-gradient(145deg, #BCA9FF 0%, #8F7BF7 45%, #6A4EE8 100%) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  box-shadow:0 10px 30px rgba(124,92,240,.45) !important;
  cursor:pointer;
}
.custom-hero-cta.secondary {
  background:rgba(30,28,38,.9) !important;
  border:1px solid rgba(154,138,251,.35) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.4) !important;
}
.custom-hero-cta.secondary:hover {
  border-color:rgba(154,138,251,.8) !important;
  box-shadow:0 14px 40px rgba(154,138,251,.3) !important;
}
.custom-hero-cta svg {
  color:#fff; flex-shrink:0;
}

/* hero circuit visual — full-bleed traces that wrap down the screen edges */
.hero-visual {
  position:relative; width:100vw; max-width:none; margin-top:8px;
  height:clamp(150px, 24vh, 260px);
  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%; }

/* ─────────── statement (pinned story, PCB frame) ─────────── */
.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:#D6CCFF; stroke-width:4.5; vector-effect:non-scaling-stroke; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(154,138,251,1));
  opacity:0;
}
.statement-text { position:relative; z-index:2; }
.statement-text {
  max-width:1000px; text-align:center;
  font-size:clamp(28px, 4.6vw, 60px); font-weight:500; line-height:1.25; letter-spacing:-.02em;
  /* animated narrative text — selectable text here read as accidental highlighting */
  user-select:none; -webkit-user-select:none;
}
.statement-text .word { color:rgba(234,234,240,.3); transition:color .3s linear; }
.statement-text .word.is-on { color:var(--text); }

/* ─────────── languages marquee ─────────── */
.languages { padding:clamp(48px, 7vh, 90px) 0 clamp(24px, 4vh, 48px); overflow:hidden; }
/* the connector between the marquee and Under the Hood ran too long,
   creating a large empty gap — shorten just that one */
.languages + .connector { height:20vh; min-height:140px; }
.section-kicker {
  font-size:clamp(14px, 1.6vw, 18px); font-weight:700; letter-spacing:.34em;
  color:var(--violet); text-align:center; margin-bottom:38px;
  text-shadow:0 0 24px rgba(154,138,251,.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:12px;
  padding:16px 30px; border-radius:100px;
  background:var(--panel); border:1px solid var(--line);
  font-size:clamp(16px, 2vw, 22px); font-weight:500; white-space:nowrap;
  color:var(--muted-2);
}
.lang-chip img { width:26px; height:26px; border-radius:50%; object-fit:cover; }

/* ─────────── 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); } /* pinned: tighter gap is intentional */
.steps-head h2 { font-size:var(--fs-h2); line-height:1.1; }
.steps-body {
  display:grid; grid-template-columns:1fr minmax(340px, 660px); gap:clamp(24px, 5vw, 80px);
  align-items:center; max-width:1380px; margin:0 auto; width:100%;
}
.steps-text { position:relative; padding-left:34px; }

/* vertical scroll rail — the cinematic scrub bar */
.steps-rail {
  position:absolute; left:0; top:8px; bottom:54px; width:3px;
  background:rgba(234,234,240,.08); border-radius:3px;
}
.steps-rail-fill {
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--violet), var(--pink));
  border-radius:3px;
  box-shadow:0 0 14px rgba(154,138,251,.8);
}
.steps-rail-dot {
  position:absolute; left:50%; top:0%;
  width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:#EDE9FF;
  box-shadow:0 0 0 4px rgba(154,138,251,.35), 0 0 18px rgba(154,138,251,1);
}
.steps-counter {
  position:absolute; right:0; top:-8px;
  font-weight:300; color:var(--muted); font-size:14px; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.steps-counter #stepsCounterNum { font-size:30px; font-weight:500; color:var(--violet); }

.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; /* steps are switchable by click */
}
.step-item:hover { opacity:.75; }
.step-item:first-child { border-top:none; }
.step-item.is-active { opacity:1; transform:translateX(0); }

/* 01–04 switcher dots: the tap targets for changing steps on mobile,
   where only the active step item is visible */
.steps-dots { display:none; gap:8px; justify-content:center; margin:10px 0 4px; }
.steps-dots button {
  font-family:'Nohemi', 'Segoe UI', 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(--violet); background:var(--violet-dim);
}
.step-num { font-size:12px; letter-spacing:.35em; color:var(--violet); margin-bottom:8px; }
.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; }
/* auto-advance progress line under the active step (6s per step) */
.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(--violet), var(--pink));
  box-shadow:0 0 10px rgba(154,138,251,.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(154,138,251,.28), transparent 65%);
  filter:blur(30px);
}
/* videos are 1080x1080 with the phone at x294-784, y44-1054 — crop to the phone exactly */
.phone-frame {
  position:relative; z-index:1;
  width:min(660px, 92vw); aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  filter:drop-shadow(0 20px 50px rgba(0,200,255,.22)) drop-shadow(0 30px 60px rgba(0,0,0,.7));
}
.step-video, .step-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0; transition:opacity .6s ease;
}
.step-video.is-active, .step-img.is-active { opacity:1; }

/* ─────────── inside: connected engineering rows ───────────
   compact, viewport-scaled sizing so the whole section (head + all 4 rows,
   Azure included) is visible on one screen without scrolling */
.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);
}
/* vertical spine running through the tile column */
.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(37,33,48,.96), rgba(22,19,28,.96));
  border:1px solid rgba(154,138,251,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  position:relative; z-index:1;
  /* no transform transition here — it would fight the GSAP entrance scale */
  transition:border-color .35s, box-shadow .35s;
}
.i-tile:hover {
  border-color:rgba(154,138,251,.6);
  box-shadow:0 24px 60px rgba(124,92,240,.25);
}
.i-tile img { width:clamp(38px, 6vh, 52px); height:clamp(38px, 6vh, 52px); object-fit:contain; }
.i-tile span { font-size:13.5px; letter-spacing:.08em; color:var(--muted-2); font-weight:400; }
.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; }
/* PCB routing: chamfered main line, ghost trace, solder pads, traveling light */
.i-trace .i-line {
  stroke:rgba(154,138,251,.62); stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.i-trace .i-pulse {
  stroke:#D6CCFF; stroke-width:4.2; opacity:0;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(154,138,251,1));
}
.i-trace .i-pad {
  stroke:#B4A6FF; stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(154,138,251,.8));
}
.i-trace .i-pad.ring { stroke:rgba(154,138,251,.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 (circuit board) ─────────── */
.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:500; }
.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 {
  position:relative;
  display:flex; gap:16px; align-items:center;
  flex:1; /* every card in a column gets the same height */
  background:linear-gradient(150deg, rgba(26,24,34,.94), rgba(15,14,20,.96));
  border:1px solid rgba(112,216,255,.16);
  border-radius:18px;
  padding:26px 26px;
  overflow:hidden;
  backdrop-filter:blur(10px);
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.f-card:hover {
  transform:translateY(-5px);
  border-color:rgba(112,216,255,.45);
  box-shadow:0 16px 45px rgba(112,216,255,.12), inset 0 0 25px rgba(154,138,251,.06);
}
.f-card img { width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.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; }

/* Corner Crosshairs (+) */
.bento-cross {
  position:absolute;
  font-family:'SF Mono', 'Space Mono', Monaco, monospace;
  font-size:12px; font-weight:600;
  color:rgba(112,216,255,.35);
  line-height:1;
  pointer-events:none;
  user-select:none;
  transition:color .3s, text-shadow .3s;
}
.bento-cross.tl { top:6px; left:8px; }
.bento-cross.tr { top:6px; right:8px; }
.bento-cross.bl { bottom:6px; left:8px; }
.bento-cross.br { bottom:6px; right:8px; }

.f-card:hover .bento-cross {
  color:#70D8FF;
  text-shadow:0 0 8px rgba(112,216,255,.85);
}

/* Bento Monospace Technical Spec Tag */
.bento-tag {
  position:absolute;
  top:10px; right:20px;
  font-family:'SF Mono', 'Space Mono', Monaco, monospace;
  font-size:9.5px; font-weight:600;
  letter-spacing:.08em;
  color:rgba(112,216,255,.75);
  background:rgba(112,216,255,.08);
  border:1px solid rgba(112,216,255,.2);
  padding:2.5px 7px;
  border-radius:4px;
  text-transform:uppercase;
  pointer-events:none;
  transition:all .3s;
}
.f-card:hover .bento-tag {
  color:#FFF;
  background:rgba(112,216,255,.25);
  border-color:rgba(112,216,255,.6);
  box-shadow:0 0 10px rgba(112,216,255,.4);
}

/* Electric Orange Bento Feature Card in #features */
.bento-card.flagship-orange {
  background:linear-gradient(145deg, rgba(255,107,0,.15), rgba(18,16,24,.96));
  border:1px solid rgba(255,107,0,.4);
  box-shadow:0 12px 35px rgba(255,107,0,.14);
}
.bento-card.flagship-orange:hover {
  border-color:rgba(255,136,0,.7);
  box-shadow:0 16px 50px rgba(255,107,0,.25), inset 0 0 25px rgba(255,107,0,.1);
}
.bento-card.flagship-orange .bento-cross {
  color:rgba(255,136,0,.5);
}
.bento-card.flagship-orange:hover .bento-cross {
  color:#FF8800;
  text-shadow:0 0 8px rgba(255,136,0,.9);
}
.bento-card.flagship-orange .bento-tag {
  color:#FFAA33;
  background:rgba(255,107,0,.12);
  border-color:rgba(255,107,0,.35);
}
.bento-card.flagship-orange:hover .bento-tag {
  color:#FFF;
  background:rgba(255,107,0,.35);
  border-color:rgba(255,136,0,.8);
  box-shadow:0 0 12px rgba(255,107,0,.6);
}
.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:1380px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px, 5vw, 90px); align-items:center;
}
/* ⚡ Electric Orange Accent Flagship Card */
.sig-flagship {
  position:relative;
  background:linear-gradient(135deg, rgba(255,107,0,.12) 0%, rgba(22,20,30,.95) 50%, rgba(14,12,18,.98) 100%);
  border:1px solid rgba(255,107,0,.38);
  border-radius:28px;
  padding:40px clamp(24px, 4vw, 50px);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(255,107,0,.18), inset 0 0 35px rgba(255,107,0,.08);
  backdrop-filter:blur(12px);
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.sig-flagship::before {
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,107,0,.035) 0, rgba(255,107,0,.035) 1px, transparent 0, transparent 40px);
  pointer-events:none; z-index:0;
}
.sig-flagship:hover {
  border-color:rgba(255,136,0,.65);
  box-shadow:0 25px 70px rgba(255,107,0,.28), inset 0 0 45px rgba(255,107,0,.12);
}
.sig-flagship .sig-copy, .sig-flagship .sig-phone {
  position:relative; z-index:1;
}
.orange-badge {
  background:linear-gradient(120deg, #FF5500, #FF9900) !important;
  box-shadow:0 8px 26px rgba(255,85,0,.5) !important;
  color:#FFF !important;
}
.orange-txt {
  color:#FF8800 !important;
  text-shadow:0 0 16px rgba(255,136,0,.4);
}
.sig-flagship .sig-copy li::before {
  background:linear-gradient(135deg, #FF5500, #FFB800) !important;
  box-shadow:0 0 12px rgba(255,107,0,.7) !important;
}
.sig-flagship .sig-phone img {
  filter:drop-shadow(0 20px 50px rgba(255,107,0,.35)) drop-shadow(0 25px 50px rgba(0,0,0,.7)) !important;
}
/* sideways PCB trace between feature rows */
.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:#D6CCFF; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(154,138,251,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:#fff;
  background:linear-gradient(120deg, var(--violet), var(--pink));
  box-shadow:0 8px 26px rgba(154,138,251,.4);
}
.sig-copy h3 { font-size:clamp(26px, 3.2vw, 44px); line-height:1.12; margin-bottom:18px; }
.sig-copy h3 .lav { color:var(--violet); }
.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%; /* unified round markers (design review) */
  background:linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow:0 0 10px rgba(154,138,251,.6);
}
.sig-copy li em { font-style:normal; color:var(--violet); }
.sig-phone { display:flex; justify-content:center; width:100%; }
.sig-phone img {
  width:100%; max-width:720px; height:auto; display:block;
  object-fit:contain; aspect-ratio:16/9;
  filter:drop-shadow(0 20px 45px rgba(0,200,255,.2)) drop-shadow(0 25px 50px rgba(0,0,0,.65));
  will-change:transform;
  transition:transform .4s ease;
}
.sig-phone:hover img {
  transform:scale(1.025);
}
@media (max-width: 900px) {
  .sig-row { grid-template-columns:1fr; gap:34px; }
  .sig-rev .sig-copy { order:1; }
  .sig-rev .sig-phone { order:2; }
  .sig-phone img { max-width:280px; max-height:none; width:100%; }
}

/* ─────────── tech ─────────── */
.tech { padding:10vh 24px 12vh; text-align:center; }
.tech .section-kicker { margin-bottom:40px; }
.tech-logos { display:flex; justify-content:center; gap:clamp(16px, 3vw, 32px); flex-wrap:wrap; }
.tech-logo {
  display:flex; align-items:center; gap:18px;
  padding:24px 42px; border-radius:22px;
  background:linear-gradient(160deg, rgba(31,29,39,.92), rgba(21,19,26,.92));
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .35s;
}
.tech-logo:hover {
  border-color:rgba(154,138,251,.55);
  box-shadow:0 20px 55px rgba(124,92,240,.22);
}
.tech-logo img { height:54px; width:auto; }
.tech-logo span { font-size:clamp(19px, 2vw, 24px); font-weight:500; color:var(--text); }
@media (max-width: 640px) {
  .tech-logo { padding:16px 26px; gap:12px; }
  .tech-logo img { height:38px; }
  .tech-logo span { font-size:17px; }
}

/* ─────────── imagine: speak without fear ─────────── */
.imagine { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.imagine-grid {
  max-width:1380px; margin:0 auto;
  display:grid; grid-template-columns:minmax(300px, 1fr) minmax(320px, 1.3fr);
  gap:clamp(30px, 5vw, 80px); align-items:center;
}
.imagine-title { font-size:var(--fs-h2); line-height:1.08; margin-bottom:36px; }
/* accent system: gradient text only in hero + final CTA; violet elsewhere */
.imagine-title .accent { color:var(--violet); }
.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 img { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(124,92,240,.45)); }
.imagine-points span { 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(154,138,251,.35);
  background:linear-gradient(160deg, rgba(37,33,48,.9), rgba(22,19,28,.9));
  box-shadow:0 16px 44px rgba(124,92,240,.14);
}
.stat-num {
  font-size:clamp(30px, 3.2vw, 42px); font-weight:700; white-space:nowrap;
  background:linear-gradient(120deg, var(--violet), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(154,138,251,.4));
}
.imagine-stat p { font-size:14.5px; line-height:1.5; color:var(--muted-2); }
.imagine-stat strong { color:var(--text); font-weight:500; }
.imagine-badges { justify-content:flex-start; }

/* the "Speak up" app screen mounted inside a CSS phone frame */
.imagine-phones { position:relative; display:flex; justify-content:center; align-items:center; }
.imagine-device {
  position:relative; width:100%; max-width:780px; margin:0 auto;
  background:transparent; border:none; box-shadow:none; padding:0;
}
.imagine-device img {
  width:100%; height:auto; display:block; object-fit:contain;
  filter:drop-shadow(0 20px 50px rgba(0,200,255,.22)) drop-shadow(0 30px 60px rgba(0,0,0,.7));
}

@media (max-width: 900px) {
  .imagine-grid { grid-template-columns:1fr; }
  /* phone leads the section on stacked layouts */
  .imagine-phones { order:-1; margin:0 auto; width:100%; }
  .imagine-device { width:min(280px, 74vw); }
  .imagine-badges { justify-content:flex-start; }
}

/* ─────────── reviews ─────────── */
.reviews { padding:12vh clamp(20px, 5vw, 72px); text-align:center; }
.reviews-title { font-size:clamp(30px, 4.4vw, 58px); line-height:1.1; margin-bottom:clamp(44px, 7vh, 80px); }
.reviews-title .dim { color:var(--muted); }
.reviews-grid {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px;
}
.review-card {
  text-align:left; padding:30px 28px; border-radius:24px;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .35s, box-shadow .35s;
}
.review-card:hover { border-color:rgba(154,138,251,.45); box-shadow:0 18px 50px rgba(124,92,240,.16); }
.review-stars { color:var(--violet); font-size:17px; letter-spacing:.2em; text-shadow:0 0 14px rgba(154,138,251,.6); }
.review-card blockquote { color:var(--muted-2); font-size:15px; line-height:1.65; flex:1; }
.review-card figcaption { color:var(--muted); font-size:13px; }

/* ─────────── QR download ─────────── */
.qr-box {
  margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px;
}
.qr-pair { display:flex; gap:clamp(28px, 5vw, 52px); justify-content:center; }
.qr-tile { display:flex; flex-direction:column; align-items:center; gap:10px; }
.qr-tile img {
  width:clamp(110px, 14vw, 140px); height:auto; border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(124,92,240,.18);
}
.qr-tile figcaption { font-size:12.5px; color:var(--muted-2); letter-spacing:.06em; }
.qr-box > span { font-size:12.5px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }

/* ─────────── INTERACTIVE SCOPE ESTIMATOR ─────────── */
.estimator { padding:var(--space-section) var(--space-inline); text-align:center; position:relative; z-index:2; }
.estimator-header {
  position:relative; z-index:3; max-width:840px; margin:0 auto var(--space-title);
  padding:20px 28px; border-radius:28px;
  background:radial-gradient(ellipse at center, rgba(17,15,20,0.96) 55%, rgba(17,15,20,0.75) 82%, transparent 100%);
  backdrop-filter:blur(14px);
}
.estimator-header .section-kicker { margin-bottom:12px; }
.estimator-header .estimator-sub { margin-bottom:0; }
.estimator-title { font-size:var(--fs-h2); line-height:1.1; margin-bottom:14px; }
.estimator-sub { font-size:clamp(15px, 1.8vw, 18px); color:var(--muted); max-width:680px; margin:0 auto; line-height:1.6; }

.estimator-card {
  max-width:1120px; margin:0 auto; padding:44px 40px;
  background:linear-gradient(165deg, rgba(30,27,42,.96), rgba(16,14,22,.98));
  border:1px solid rgba(154,138,251,.35); border-radius:32px;
  box-shadow:0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(154,138,251,.1);
  backdrop-filter:blur(18px); text-align:left;
}

.estimator-grid {
  display:grid; grid-template-columns:1.35fr 1fr; gap:36px; align-items:stretch;
}

@media (max-width: 940px) {
  .estimator-card { padding:24px 18px; border-radius:24px; }
  .estimator-grid { grid-template-columns:1fr; gap:28px; }
}

.estimator-controls { display:flex; flex-direction:column; gap:32px; }

.estimator-step { display:flex; flex-direction:column; gap:16px; }
.step-head { display:flex; align-items:center; gap:12px; }
.step-num {
  font-family:'Nohemi', sans-serif; font-size:13px; font-weight:700; color:var(--violet);
  background:var(--violet-dim); border:1px solid rgba(154,138,251,.4);
  padding:4px 12px; border-radius:100px; letter-spacing:0.05em;
}
.step-title { font-size:18px; font-weight:600; color:var(--text); margin:0; }

.type-options { display:flex; flex-direction:column; gap:12px; }
.est-option {
  display:flex; align-items:flex-start; gap:14px; padding:16px 20px;
  background:rgba(12,11,17,.7); border:1px solid rgba(154,138,251,.2);
  border-radius:18px; cursor:pointer; transition:all .25s ease;
  position:relative;
}
.est-option input[type="radio"] {
  display:none !important; appearance:none !important; opacity:0 !important;
  width:0 !important; height:0 !important; position:absolute !important;
}
.est-radio-indicator {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(154,138,251,.4); background:transparent;
  flex-shrink:0; margin-top:2px; transition:all .25s ease; position:relative;
}
.est-option:hover { border-color:rgba(154,138,251,.5); background:rgba(154,138,251,.06); }
.est-option.is-selected {
  border-color:var(--violet);
  background:linear-gradient(135deg, rgba(154,138,251,.16), rgba(112,216,255,.06));
  box-shadow:0 0 24px rgba(154,138,251,.2);
}
.est-option.is-selected .est-radio-indicator {
  border-color:var(--violet); background:var(--violet);
  box-shadow:0 0 10px var(--violet);
}
.est-option.is-selected .est-radio-indicator::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%); width:7px; height:7px;
  border-radius:50%; background:#0E0C12;
}

.opt-content { display:flex; flex-direction:column; gap:4px; width:100%; }
.opt-label-wrap { display:flex; justify-content:space-between; align-items:center; width:100%; flex-wrap:wrap; gap:6px; }
.opt-label { font-size:16px; font-weight:600; color:var(--text); }
.opt-tag {
  font-size:11px; font-weight:600; color:var(--violet);
  background:var(--violet-dim); padding:3px 10px; border-radius:100px;
  border:1px solid rgba(154,138,251,.3);
}
.opt-desc { font-size:13.5px; color:var(--muted); line-height:1.45; }

.estimator-chips { display:flex; flex-wrap:wrap; gap:10px; }
.est-chip {
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  background:rgba(12,11,17,.7); border:1px solid rgba(154,138,251,.2);
  border-radius:100px; cursor:pointer; font-size:13.5px; color:var(--muted);
  transition:all .25s ease; user-select:none;
}
.est-chip input[type="checkbox"] {
  display:none !important; appearance:none !important; opacity:0 !important;
  width:0 !important; height:0 !important; position:absolute !important;
}
.est-check-icon {
  font-size:12px; opacity:0; transform:scale(0.6);
  transition:all .20s ease; color:var(--violet); font-weight:700;
}
.est-chip:hover { border-color:rgba(154,138,251,.5); color:var(--text); }
.est-chip.is-active {
  background:var(--violet-dim); border-color:rgba(154,138,251,.6);
  color:var(--text); font-weight:500;
  box-shadow:0 0 16px rgba(154,138,251,.2);
}
.est-chip.is-active .est-check-icon { opacity:1; transform:scale(1); }

/* Right Summary Card */
.estimator-summary {
  display:flex; flex-direction:column; justify-content:space-between;
  padding:32px 28px; background:rgba(14,13,20,.95);
  border:1px solid rgba(154,138,251,.35); border-radius:24px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.5);
  position:relative;
}
.summary-badge {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.08em;
  color:#70D8FF; background:rgba(112,216,255,.12); border:1px solid rgba(112,216,255,.35);
  padding:4px 14px; border-radius:100px; margin-bottom:18px; align-self:flex-start;
}
.summary-project-title { font-size:24px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.2; }
.summary-features-list { font-size:14px; color:var(--muted); margin-bottom:24px; line-height:1.5; min-height:42px; }

.summary-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.meta-box {
  display:flex; flex-direction:column; gap:4px; padding:14px 16px;
  background:rgba(255,255,255,.03); border:1px solid rgba(154,138,251,.2); border-radius:14px;
}
.meta-lbl { font-size:10.5px; font-weight:700; letter-spacing:0.05em; color:var(--muted-2); }
.meta-val { font-size:16px; font-weight:700; color:var(--text); }
.meta-val.highlight { color:var(--violet); }

.summary-note {
  font-size:13px; color:var(--muted); line-height:1.5; padding:14px 16px;
  background:rgba(154,138,251,.06); border:1px dashed rgba(154,138,251,.3);
  border-radius:14px; margin-bottom:24px;
}
.summary-note b { color:var(--text); }

.summary-actions { display:flex; flex-direction:column; gap:12px; }
.btn-est-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 24px; border-radius:100px; border:none;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  color:#0E0C12; font-weight:700; font-size:15.5px; cursor:pointer;
  box-shadow:0 8px 30px rgba(154,138,251,.35); transition:all .3s ease;
}
.btn-est-primary:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(154,138,251,.55); }
.btn-est-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 24px; border-radius:100px;
  background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.4);
  color:#25D366; font-weight:600; font-size:14.5px; cursor:pointer; text-decoration:none;
  transition:all .3s ease;
}
.btn-est-secondary:hover { background:rgba(37,211,102,.25); border-color:rgba(37,211,102,.7); transform:translateY(-2px); }

.btn-primary {
  display:inline-block; padding:17px 44px; border-radius:100px;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  color:#0E0C12; font-weight:600; font-size:16px;
  box-shadow:0 12px 44px rgba(154,138,251,.35);
  transition:transform .3s, box-shadow .3s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 60px rgba(154,138,251,.55); }

/* ─────────── cta ─────────── */
/* sized by content — a forced min-height left a large empty band above the footer */
.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(34px, 5.6vw, 84px); line-height:1.08; 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(--violet) 20%, var(--pink) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─────────── 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(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line); border-radius:18px;
  transition:border-color .35s;
}
.faq-item[open] { border-color:rgba(154,138,251,.4); }
.faq-item summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px;
  font-size:clamp(16px, 1.9vw, 19px); font-weight:500;
}
.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(154,138,251,.45); color:var(--violet);
  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(--violet-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:500; }

/* ─────────── language switcher ─────────── */
.lang-switch { position:relative; }
.lang-btn {
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:'Nohemi', 'Segoe UI', sans-serif; font-size:12.5px; letter-spacing:.06em;
  color:var(--muted-2); background:rgba(234,234,240,.05);
  border:1px solid var(--line); border-radius:100px;
  padding:8px 14px; cursor:pointer; transition:all .3s;
}
.lang-btn:hover { color:var(--text); border-color:rgba(154,138,251,.5); }
.lang-btn .lang-caret { opacity:.7; transition:transform .3s; }
.lang-btn:hover .lang-caret { opacity:1; }
.lang-menu {
  position:absolute; top:calc(100% + 10px); right:0; min-width:150px;
  background:rgba(23,21,28,.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; }
.lang-menu button {
  font-family:'Nohemi', 'Segoe UI', sans-serif; font-size:13.5px; text-align:left;
  color:var(--muted-2); background:none; border:none;
  padding:9px 14px; border-radius:9px; cursor:pointer; transition:all .25s;
}
.lang-menu button:hover, .lang-menu button.is-active { color:var(--text); background:var(--violet-dim); }

/* ─────────── compact nav menu (translated pages + mobile) ─────────── */
.nav-menu { position:relative; display:none; }
.nav-menu-btn { padding:8px 12px; }
/* translated labels are long — swap inline links for the dropdown,
   shrink the CTA and tighten gaps so nothing overlaps */
body.is-translated .nav-link { display:none; }
body.is-translated .nav-menu { display:block; }
body.is-translated .nav-right { gap:8px; min-width:0; }
body.is-translated .nav-cta { font-size:12px; padding:9px 14px; flex-shrink:0; }
body.is-translated .nav-logo span { font-size:15px; }
.nav-drop {
  right: 0;
  left: auto;
  min-width: 210px;
  max-width: calc(100vw - 24px);
  background: rgba(18, 15, 24, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(154, 138, 251, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 24px rgba(154, 138, 251, 0.15);
  border-radius: 16px;
  padding: 8px;
  z-index: 1000;
}
.nav-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
  padding: 10px 14px;
  border-radius: 10px;
  white-space: nowrap;
  transition: all .2s ease;
}
.nav-drop a:hover {
  color: var(--text);
  background: rgba(154, 138, 251, 0.15);
}

/* hide the Google Translate banner/artifacts */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display:none !important; }
body { top:0 !important; }
.skiptranslate iframe { visibility:hidden !important; height:0 !important; }

/* ─────────── footer ─────────── */
.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-credit { font-size:12px; color:var(--muted); }
.footer-credit .notranslate { color:var(--violet); font-weight:500; }

.footer { display:flex; flex-direction:column; align-items:center; gap:14px; padding:60px 24px 46px; border-top:1px solid var(--line); }
.footer img { width:44px; height:44px; object-fit:contain; opacity:1; filter:drop-shadow(0 2px 12px rgba(0,200,255,.45)); }
.footer p { font-size:12px; color:var(--muted); letter-spacing:.05em; }

/* ─────────── responsive ─────────── */
/* tablet */
@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%); }
  .i-tile { width:230px; }
  .inside-list::before { left:115px; }
}
/* mobile */
@media (max-width: 900px) {
  .nav-link { display:none; }
  .nav-menu { display:block; }
  .nav { padding:16px 18px; }
  .hero { padding-top:88px; }
  .hero-phone { width:min(240px, 65vw); margin:0 auto 14px; }
  .hero-phone img {
    clip-path:none;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .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; }
  .store-btn { padding:9px 16px 9px 12px; }
  .store-btn span { font-size:14px; }
  .hero-visual { height:clamp(130px, 20vh, 200px); }
  .statement-pin { min-height:75vh; padding:60px 20px; }
  .statement-text { font-size:clamp(18px, 5.2vw, 26px); line-height:1.48; letter-spacing:-.01em; max-width:92vw; padding:20px 16px; }
  
  @media (max-width: 480px) {
    .statement-pin { min-height:65vh; padding:40px 14px; }
    .statement-text { font-size:clamp(16px, 4.8vw, 21px); line-height:1.52; padding:14px 10px; }
  }
  /* mobile steps: phone + ONLY the active step, with a visible counter + progress bar */
  .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(340px, 90vw); aspect-ratio:16/9; }
  .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; } /* the big counter already shows the step number */
  .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; }
}

/* compact nav + footer clearance on small phones */
@media (max-width: 640px) {
  .nav { padding:10px 6px; }
  .nav-logo { gap:6px; }
  .nav-logo img { width:22px; }
  .nav-logo span { font-size:14.5px; }
  .nav-right { gap:4px; }
  .nav-cta { padding:7px 9px; font-size:11px; }
  .hide-xs { display:none; }
  .lang-btn { padding:6px 7px; font-size:10.5px; gap:4px; }
  .lang-btn svg { width:12px; height:12px; }
  .nav-menu-btn { padding:6px 7px; }
  .to-top { right:34px; bottom:16px; width:44px; height:44px; }
}
/* ultra-narrow phones: icon-only logo so every nav control fits */
@media (max-width: 360px) {
  .nav-logo span { display:none; }
  .nav-logo img { width:28px; }
  /* keep footer content clear of the fixed scroll-to-top button */
  .footer { padding:44px 18px 112px; }
  .footer-links { flex-wrap:wrap; justify-content:center; row-gap:6px; }
}
/* ─────────── large displays (QHD / 4K): scale the whole experience up ─────────── */
@media (min-width: 2000px) {
  /* nav */
  .nav { padding:26px 64px; }
  .nav-logo img { width:36px; }
  .nav-logo span { font-size:24px; }
  .nav-link { font-size:17px; }
  .nav-cta { font-size:16px; padding:13px 28px; }
  .lang-btn { font-size:15px; padding:11px 18px; }
  /* hero */
  .hero-title { font-size:110px; }
  .hero-sub { font-size:23px; max-width:780px; }
  .hero-phone { width:340px; margin:0 auto 24px; }
  .store-btn { padding:14px 28px 14px 20px; }
  .store-btn img { width:42px; height:42px; }
  .store-btn span { font-size:20px; }
  .store-btn small { font-size:12.5px; }
  .hero-visual { height:340px; }
  /* shared */
  .section-kicker { font-size:22px; }
  .btn-primary { font-size:19px; padding:18px 42px; }
  .connector svg { width:760px; }
  .to-top { width:64px; height:64px; right:40px; bottom:40px; }
  /* statement */
  .statement-text { font-size:58px; max-width:1240px; }
  /* steps */
  .steps-head h2 { font-size:84px; }
  .steps-body { max-width:1720px; gap:130px; }
  .phone-frame { width:400px; }
  .step-item h3 { font-size:42px; }
  .step-item p { font-size:20px; max-width:640px; }
  .steps-counter #stepsCounterNum { font-size:44px; }
  /* signature features */
  .sig-title { font-size:84px; }
  .sig-row, .sig-connector { max-width:1620px; }
  .sig-copy h3 { font-size:60px; }
  .sig-copy p { font-size:22px; }
  .sig-copy li { font-size:19px; padding-left:32px; }
  .sig-badge { font-size:14px; padding:12px 22px; }
  .sig-phone img { max-width:680px; }
  /* features grid */
  .features { max-width:1760px; }
  .features-title { font-size:78px; max-width:1620px; }
  .features-wrap { max-width:1620px; grid-template-columns:1fr clamp(300px, 22vw, 440px) 1fr; }
  .f-card { padding:28px 30px; gap:20px; }
  .f-card img { width:60px; height:60px; }
  .f-card h3 { font-size:24px; }
  .f-card p { font-size:17px; }
  .f-chip { width:150px; }
  /* languages marquee */
  .lang-chip { font-size:21px; padding:18px 34px; gap:14px; }
  .lang-chip img { width:36px; height:36px; }
  /* inside */
  .exploded-title { font-size:84px; }
  .inside-list { max-width:1520px; }
  .i-row { grid-template-columns:350px 1fr minmax(320px, 44%); }
  .i-tile { width:350px; min-height:195px; }
  .i-tile img { width:78px; height:78px; }
  .i-tile .icon-tile--lg { width:78px; height:78px; border-radius:20px; }
  .i-tile .icon-tile--lg svg { width:36px; height:36px; }
  .i-tile span { font-size:19px; }
  .i-tile .app-chip { width:150px; }
  .i-info h4 { font-size:27px; }
  .i-info p { font-size:17.5px; }
  /* imagine */
  .imagine-grid { max-width:1640px; }
  .imagine-title { font-size:78px; }
  .imagine-points img { width:50px; height:50px; }
  .imagine-points span { font-size:22px; }
  .imagine-stat { max-width:560px; padding:26px 34px; }
  .stat-num { font-size:56px; }
  .imagine-stat p { font-size:18px; }
  .imagine-device { width:420px; }
  /* pricing */
  .pricing h2 { font-size:78px; }
  .price-card { max-width:680px; padding:60px 54px; }
  .price-amount { font-size:104px; }
  .plan { font-size:16px; padding:12px 24px; }
  .price-note { font-size:17px; }
  /* faq */
  .faq { max-width:1180px; }
  .faq-title { font-size:78px; }
  .faq-item summary { font-size:22px; padding:28px 32px; }
  .faq-body { font-size:18px; padding:0 32px 30px; }
  /* cta + footer */
  .cta-title { font-size:112px; max-width:1560px; }
  .qr-tile img { width:180px; }
  .qr-tile figcaption { font-size:15px; }
  .footer img { width:46px; }
  .footer-links { font-size:16px; }
  .footer p { font-size:14px; }
}

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

.whatsapp-float {
  display: none !important;
}
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 15px 40px rgba(37, 211, 102, 0.65);
}
.whatsapp-tooltip {
  position: absolute;
  left: 72px; top: 50%; transform: translateY(-50%);
  background: rgba(18, 20, 28, 0.94);
  color: #FFF;
  font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(37, 211, 102, 0.35);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-10px);
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* 📝 Full Working Contact Us Form */
.contact-form-card {
  max-width: 680px; margin: 40px auto 0;
  background: linear-gradient(150deg, rgba(26, 24, 34, 0.94), rgba(15, 14, 20, 0.96));
  border: 1px solid rgba(154, 138, 251, 0.3);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 44px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(154, 138, 251, 0.04);
  text-align: left;
}
.contact-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px;
}
@media (max-width: 640px) { .contact-form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 13.5px; font-weight: 500; color: var(--muted-2); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: rgba(12, 11, 16, 0.8);
  border: 1px solid rgba(154, 138, 251, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
  color: #FFF; font-size: 14.5px;
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: #70D8FF;
  box-shadow: 0 0 12px rgba(112, 216, 255, 0.3);
}
.form-actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; grid-column: 1 / -1;
}
.btn-submit {
  flex: 1; min-width: 200px;
  background: linear-gradient(145deg, #BCA9FF 0%, #8F7BF7 45%, #6A4EE8 100%);
  color: #FFF; font-weight: 600; font-size: 15.5px;
  padding: 14px 24px; border: none; border-radius: 12px;
  cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 10px 30px rgba(124, 92, 240, 0.45);
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(124, 92, 240, 0.6);
}
.btn-wa-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #25D366; font-weight: 600; font-size: 14.5px;
  padding: 14px 22px; border-radius: 12px;
  text-decoration: none; cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.btn-wa-submit:hover {
  background: rgba(37, 211, 102, 0.3);
  border-color: #25D366;
}
.form-status-msg {
  display: none; padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; text-align: center; margin-top: 16px; grid-column: 1 / -1;
}
.form-status-msg.success {
  display: block; background: rgba(37, 211, 102, 0.15); border: 1px solid #25D366; color: #25D366;
}

/* ══════════ STORYLINE VERTICAL TIMELINE RAIL (FIXED RIGHT) ══════════ */
.story-timeline {
  position: fixed;
  top: 100px;
  bottom: 60px;
  right: 32px;
  width: 56px;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

@media (max-width: 1024px) {
  .story-timeline {
    display: none !important;
  }
}

.story-rail {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Thin vertical circuit rail stroke */
.story-rail-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg, 
    rgba(112, 216, 255, 0.4) 0%, 
    rgba(154, 138, 251, 0.6) 50%, 
    rgba(112, 216, 255, 0.4) 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(112, 216, 255, 0.3);
}

/* Active scroll progress fill */
.story-rail-progress {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 0%;
  background: linear-gradient(180deg, #70D8FF 0%, #9A8AFB 100%);
  box-shadow: 0 0 14px rgba(112, 216, 255, 0.9);
  border-radius: 4px;
  transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Nodes container */
.story-nodes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

/* Individual Node Button */
.story-node {
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

/* Node Dot Style */
.node-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(18, 15, 26, 0.95);
  border: 2px solid rgba(154, 138, 251, 0.7);
  box-shadow: 0 0 8px rgba(154, 138, 251, 0.3);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Completed Node Dot state (scrolled past) */
.story-node.is-completed .node-dot {
  background: #70D8FF;
  border-color: #FFFFFF;
  box-shadow: 0 0 14px rgba(112, 216, 255, 0.95);
  transform: scale(1.15);
}

/* Upcoming Node Dot state (hollow/outline) */
.story-node.is-upcoming .node-dot {
  background: rgba(14, 12, 22, 0.9);
  border: 2px solid rgba(154, 138, 251, 0.5);
  box-shadow: 0 0 6px rgba(154, 138, 251, 0.2);
}

/* Hover state on node */
.story-node:hover .node-dot {
  border-color: #70D8FF;
  box-shadow: 0 0 16px rgba(112, 216, 255, 1);
  transform: scale(1.4);
}

/* Tooltip on hover */
.node-tooltip {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(22, 14, 10, 0.97);
  border: 1px solid rgba(255, 120, 40, 0.65);
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 120, 40, 0.4);
  pointer-events: none;
}

.story-node:hover .node-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Active Node State - Dot shrinks under active badge */
.story-node.is-active .node-dot {
  opacity: 0;
  transform: scale(0.3);
}

/* Active Floating Badge */
.story-active-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(32, 20, 16, 0.97), rgba(14, 10, 18, 0.98));
  border: 2px solid #FF7828;
  box-shadow: 0 0 30px rgba(255, 120, 40, 0.65), inset 0 0 16px rgba(255, 85, 0, 0.35);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: auto;
  cursor: pointer;
}

/* Active badge pulse burst ring */
.active-badge-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 40, 0.7) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.story-active-badge.pulse .active-badge-glow {
  animation: badgePulseBurst 0.65s ease-out forwards;
}

@keyframes badgePulseBurst {
  0% { transform: scale(0.8); opacity: 0.9; }
  50% { transform: scale(1.45); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Icon Wrap inside Active Badge */
.active-icon-wrap {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF7828;
  filter: drop-shadow(0 0 8px rgba(255, 120, 40, 0.9));
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.active-icon-wrap svg {
  width: 100%;
  height: 100%;
}

.active-icon-wrap.swap-out {
  transform: scale(0.3) rotate(-15deg);
  opacity: 0;
}

.active-icon-wrap.swap-in {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* Floating Toast Label on Active Badge (Orange Theme + Larger Font) */
.active-badge-label {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: linear-gradient(135deg, rgba(40, 22, 14, 0.98), rgba(20, 10, 8, 0.98));
  border: 1.5px solid rgba(255, 120, 40, 0.9);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 24px;
  white-space: nowrap;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 120, 40, 0.6);
  backdrop-filter: blur(18px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.6s ease;
}

.active-badge-label.is-visible,
.story-active-badge:hover .active-badge-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.8), 0 0 32px rgba(255, 120, 40, 0.8);
}