/* ============================================================================
   15 — MNEME-NET  ·  AI Knowledge Graph Product
   Light SaaS · white-on-white · indigo + violet accent · magazine grid
   ============================================================================ */
:root{
  /* INK */
  --ink:        #0f172a;     /* deep navy text */
  --ink-2:      #1e293b;     /* heading dark */
  --ink-mute:   #475569;     /* secondary text */
  --ink-faint:  #94a3b8;     /* tertiary / labels */
  --ink-ghost:  #cbd5e1;     /* dividers */

  /* PAPER */
  --paper:      #fafafa;     /* page bone-white */
  --paper-2:    #ffffff;     /* card white */
  --paper-tint: #f5f5f7;     /* subtle bg tint */
  --paper-warm: #fdfcfa;     /* warm-paper variation */

  /* ACCENTS */
  --indigo:     #6366f1;
  --indigo-2:   #818cf8;
  --indigo-deep:#4f46e5;
  --violet:     #a855f7;     /* pulse */
  --violet-2:   #c084fc;
  --cyan:       #0ea5e9;
  --emerald:    #10b981;
  --amber:      #f59e0b;

  /* HAIRLINES */
  --hair:       rgba(15,23,42,.08);
  --hair-2:     rgba(15,23,42,.05);
  --hair-soft:  rgba(15,23,42,.12);
  --halo-indigo:rgba(99,102,241,.18);
  --halo-violet:rgba(168,85,247,.18);

  /* TYPE */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'JetBrains Mono',monospace;

  /* MOTION */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* SCALE */
  --gutter:clamp(20px,4.6vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
html{
  background:
    radial-gradient(1200px 900px at 12% 8%,  rgba(99,102,241,.10), transparent 62%),
    radial-gradient(1100px 800px at 92% 18%, rgba(168,85,247,.08), transparent 60%),
    radial-gradient(1300px 1000px at 50% 100%, rgba(14,165,233,.06), transparent 65%),
    var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  overflow:hidden;
  font-size:calc(15px*var(--res-scale-text,1));
  line-height:1.55;
  background:transparent;
}
body.is-locked{overflow:hidden}
::selection{background:var(--indigo);color:#fff}

button,a{font-family:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{text-decoration:none}

/* ============================================================================
   3D backdrop canvas + paper veil
   ============================================================================ */
#fxCanvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;background:transparent;pointer-events:none;
}
.paper-wash{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    /* soft top-down white veil so the graph sits IN the paper, not on top */
    linear-gradient(180deg, rgba(250,250,250,.55) 0%, rgba(250,250,250,.30) 28%, rgba(250,250,250,.18) 50%, rgba(250,250,250,.42) 78%, rgba(250,250,250,.78) 100%),
    /* very faint paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.16 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================================
   TOP BAR — clean SaaS, glass
   ============================================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gutter);
  background:rgba(250,250,250,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--hair);
}
.topbar__brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.topbar__mark{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 8px rgba(99,102,241,.18))}
.topbar__name{font:600 16px/1 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.topbar__sep{color:var(--indigo);margin:0 1px;font-weight:500}

.topbar__nav{display:flex;align-items:center;gap:28px;font:500 13.5px/1 var(--sans);color:var(--ink-mute)}
.topbar__nav a{position:relative;transition:color .22s var(--ease)}
.topbar__nav a:hover{color:var(--ink)}
.topbar__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--indigo);transition:right .35s var(--ease-out)}
.topbar__nav a:hover::after{right:0}

.topbar__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.topbar__build{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--ink-faint);padding:6px 10px;border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.55)}

/* Buttons (used everywhere) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:500 13.5px/1 var(--sans);letter-spacing:-.005em;
  padding:11px 18px;border-radius:10px;
  transition:all .22s var(--ease);position:relative;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
}
.btn--lg{padding:15px 24px;font-size:15px;border-radius:12px;gap:12px}
.btn--block{width:100%}

.btn--primary{
  background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-deep) 100%);
  color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 6px 18px rgba(99,102,241,.32),
    0 2px 6px rgba(99,102,241,.18);
}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -1px 0 rgba(0,0,0,.18) inset,0 10px 28px rgba(99,102,241,.42),0 4px 10px rgba(99,102,241,.22)}
.btn--primary .btn__caret{transition:transform .22s var(--ease)}
.btn--primary:hover .btn__caret{transform:translateX(3px)}

.btn--ghost{
  background:rgba(255,255,255,.7);
  color:var(--ink);
  border-color:var(--hair-soft);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{background:rgba(255,255,255,.92);border-color:var(--ink-ghost);transform:translateY(-1px)}

.btn__play{display:inline-flex;align-items:center;gap:2px}
.btn__play span{display:inline-block;width:2px;height:10px;background:var(--ink-mute);transition:background .22s var(--ease)}
.btn__play span:nth-child(2){height:14px}
.btn__play span:nth-child(3){height:7px}
.btn--ghost:hover .btn__play span{background:var(--indigo)}

/* ============================================================================
   STATUS PILL (top-right) — SaaS "All systems normal" small pill
   ============================================================================ */
.status{
  position:fixed;top:84px;right:var(--gutter);z-index:40;
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px 6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--hair);
  font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--ink-mute);
  box-shadow:0 2px 8px rgba(15,23,42,.04), 0 0 0 1px rgba(16,185,129,.06);
}
.status__pill{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;font-family:var(--sans);font-size:11.5px;letter-spacing:-.005em}
.status__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 2px rgba(16,185,129,.18), 0 0 8px rgba(16,185,129,.55);animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.status__sep{width:1px;height:11px;background:var(--hair-soft)}
.status__line{display:inline-flex;gap:5px;font-size:10.5px;color:var(--ink-faint)}
.status__line em{font-style:normal;font-weight:600;color:var(--ink-mute);font-variant-numeric:tabular-nums}

/* ============================================================================
   RECALL LATENCY PILL — tiny, sits under .status
   ============================================================================ */
.recall-pill{
  position:fixed;top:124px;right:var(--gutter);z-index:40;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--hair);
  font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--ink-faint);
  pointer-events:none;
}
.recall-pill__k{text-transform:uppercase;font-size:9px;letter-spacing:.14em}
.recall-pill__v{font-style:normal;font-weight:600;color:var(--indigo);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:-.005em}

/* ============================================================================
   HIDDEN SCENE RAIL — JS bindings only, visually removed
   ============================================================================ */
.rail{
  position:fixed;left:-9999px;top:-9999px;
  width:1px;height:1px;overflow:hidden;
  visibility:hidden;pointer-events:none;
}
.rail__num,.rail__sep,.rail__label,.rail__bar,.rail__fill{display:none}

/* ============================================================================
   FOOTBAR — subtle SaaS copyright + status bar (replaces broadcast HUD)
   ============================================================================ */
.footbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:10px var(--gutter);
  background:linear-gradient(0deg, rgba(250,250,250,.86) 0%, rgba(250,250,250,.55) 100%);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--hair);
  font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--ink-faint);
  pointer-events:none;
}
.footbar__copy{color:var(--ink-mute);font-weight:500}
.footbar__sep{color:var(--indigo);margin:0 1px;font-weight:600}
.footbar__dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 6px rgba(16,185,129,.55);
  animation:dotPulse 1.6s ease-in-out infinite;
}
.footbar__status{color:var(--ink-mute);font-weight:500}
.footbar__spacer{flex:1}
.footbar__love{
  color:var(--ink-faint);font-weight:500;font-family:var(--sans);font-size:11.5px;letter-spacing:-.005em;
  opacity:.78;transition:opacity .3s var(--ease), color .3s var(--ease);
  pointer-events:none;
}
.footbar__heart{
  color:var(--violet);font-size:12px;font-weight:600;display:inline-block;
  vertical-align:-1px;margin:0 1px;
  animation:heartBeat 2.6s ease-in-out infinite;
}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  10%{transform:scale(1.18)}
  20%{transform:scale(1)}
  30%{transform:scale(1.12)}
  40%{transform:scale(1)}
}

/* ============================================================================
   TRY-IT PILL (top-right, under status) — interactive recall demo
   ============================================================================ */
.tryit{
  position:fixed;top:164px;right:var(--gutter);z-index:42;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-deep) 100%);
  color:#fff;
  font:500 12px/1 var(--sans);letter-spacing:-.005em;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 8px 22px rgba(99,102,241,.36),
    0 2px 6px rgba(99,102,241,.18);
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .3s var(--ease);
  opacity:0;transform:translateY(-6px);
}
.tryit.is-ready{opacity:1;transform:translateY(0)}
.tryit:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.18) inset,0 12px 30px rgba(99,102,241,.46),0 4px 10px rgba(99,102,241,.22)}
.tryit:active{transform:translateY(0) scale(.98)}
.tryit.is-firing{pointer-events:none;opacity:.72}
.tryit__dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.85);animation:tryitDot 1.4s ease-in-out infinite}
@keyframes tryitDot{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.tryit__arrow{transition:transform .22s var(--ease)}
.tryit:hover .tryit__arrow{transform:translateX(3px)}

/* ============================================================================
   SCROLL CUE (bottom-right)
   ============================================================================ */
.scroll-cue{
  position:fixed;bottom:54px;right:var(--gutter);z-index:41;
  display:flex;align-items:center;gap:10px;
  font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-mute);
  transition:opacity .6s var(--ease);
}
.scroll-cue.is-hidden{opacity:0;pointer-events:none}
.scroll-cue .arrow{font-size:14px;color:var(--indigo);animation:nudge 2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============================================================================
   DECK + scenes
   ============================================================================ */
.deck{
  position:relative;z-index:5;
  height:100svh;overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.deck::-webkit-scrollbar{display:none}

.scene{
  scroll-snap-align:start;
  min-height:100svh;
  display:flex;align-items:center;
  /* bottom padding clears the footbar (~38px) */
  padding:clamp(120px,12vh,160px) var(--gutter) clamp(108px,10vh,140px);
  position:relative;
}
.scene__inner{width:100%;max-width:1320px;margin:0 auto;position:relative;z-index:1}

.two-col{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);
  align-items:center;
}
.two-col--rev{grid-template-columns:.9fr 1.1fr}

.reach-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:760px;margin:0 auto}

/* Section kickers */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.kicker--center{justify-content:center;display:flex}
.kicker__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--indigo);box-shadow:0 0 8px var(--halo-indigo)}
.kicker__num{
  font-weight:600;color:var(--indigo);
  padding:3px 8px;border:1px solid var(--halo-indigo);border-radius:999px;
  background:rgba(99,102,241,.06);
  letter-spacing:.04em;
}

/* ----- Reveal animation ----- */
[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease-out) var(--rd,0ms), transform .9s var(--ease-out) var(--rd,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ----- GSAP letter-reveal (split into spans by JS) ----- */
.letter{
  display:inline-block;will-change:transform,opacity;
  opacity:0;transform:translateY(0.5em) rotateX(-30deg);
  transform-origin:50% 100%;
}
.letter--space{display:inline-block;width:.28em}

/* ----- Typewriter cursor on the recall code panel ----- */
.panel__code .typer-cursor{
  display:inline-block;width:7px;height:1.05em;vertical-align:-2px;
  margin-left:1px;background:var(--indigo);
  animation:typerBlink .9s steps(1,end) infinite;border-radius:1px;
}
@keyframes typerBlink{0%,55%{opacity:1}55.01%,100%{opacity:0}}
.panel__code.is-typing{min-height:0}
.panel--snippet.is-firing{box-shadow:
  0 1px 0 rgba(255,255,255,.6) inset,
  0 24px 60px -20px rgba(99,102,241,.42),
  0 8px 24px -8px rgba(168,85,247,.18),
  0 0 0 1px rgba(99,102,241,.22);
  transition:box-shadow .35s var(--ease);
}

/* ============================================================================
   HERO (Scene 01)
   ============================================================================ */
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,5vw,88px);
  align-items:center;
}

.display{
  font:300 clamp(48px,7.2vw,108px)/0.96 var(--sans);
  letter-spacing:-.028em;
  color:var(--ink-2);
  margin-bottom:clamp(22px,2.4vw,32px);
}
.display__line{display:block}
.display em{
  font-style:normal;font-weight:300;
  background:linear-gradient(120deg,var(--indigo) 0%,var(--violet) 60%,var(--cyan) 110%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  font-style:italic;
}

.lede{
  font:400 clamp(15.5px,1.18vw,18px)/1.65 var(--sans);
  color:var(--ink-mute);max-width:560px;
  margin-bottom:clamp(28px,3vw,40px);
}

.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(40px,4vw,56px);
}

.proof-list{
  list-style:none;display:flex;gap:clamp(28px,3.4vw,48px);
  padding-top:24px;border-top:1px solid var(--hair);
}
.proof-list li{display:flex;flex-direction:column;gap:4px}
.proof-list__num{font:600 22px/1 var(--sans);letter-spacing:-.012em;color:var(--ink);}
.proof-list__cap{font:500 11.5px/1.4 var(--mono);letter-spacing:.03em;color:var(--ink-faint)}

/* Hero side panel — code snippet card */
.hero-grid__panel{display:flex;justify-content:flex-end}
.panel{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--hair);
  border-radius:18px;
  padding:0;
  width:100%;max-width:480px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 60px -20px rgba(99,102,241,.22),
    0 8px 24px -8px rgba(15,23,42,.08);
  overflow:hidden;
}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(245,245,247,.4));
}
.panel__filename{font:500 12px/1 var(--mono);color:var(--ink);letter-spacing:.02em}
.panel__lang{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;padding:4px 7px;background:rgba(99,102,241,.08);border:1px solid var(--halo-indigo);border-radius:5px;color:var(--indigo)}

.panel__code{
  padding:20px 22px;
  font:400 13px/1.7 var(--mono);
  color:var(--ink);
  overflow-x:auto;
  white-space:pre;
  letter-spacing:-.005em;
}
.panel__code code{font-family:inherit}
.c-key{color:var(--indigo);font-weight:500}
.c-str{color:var(--emerald)}
.c-num{color:var(--violet)}
.c-com{color:var(--ink-faint);font-style:italic}

.panel__foot{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-top:1px solid var(--hair);
  background:rgba(245,245,247,.5);
  font:500 11.5px/1 var(--mono);color:var(--ink-mute);letter-spacing:.02em;
}
.panel__pulse{display:flex;width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 0 rgba(168,85,247,.45);animation:panelPulse 1.6s ease-out infinite}
@keyframes panelPulse{
  0%{box-shadow:0 0 0 0 rgba(168,85,247,.45)}
  100%{box-shadow:0 0 0 12px rgba(168,85,247,0)}
}

/* ============================================================================
   H2 / copy used across narrative scenes
   ============================================================================ */
.h2{
  font:300 clamp(38px,5.2vw,72px)/1.02 var(--sans);
  letter-spacing:-.026em;
  color:var(--ink-2);
  margin-bottom:clamp(22px,2.4vw,32px);
}
.h2--center{text-align:center}
.h2 em{
  font-style:italic;font-weight:300;
  background:linear-gradient(120deg,var(--indigo) 0%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.copy{font:400 clamp(15px,1.05vw,17px)/1.65 var(--sans);color:var(--ink-mute);max-width:560px;margin-bottom:18px}
.copy--mute{color:var(--ink-faint)}
.copy--center{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:clamp(32px,3.4vw,48px)}
.copy strong{color:var(--ink);font-weight:600}
.copy em{color:var(--indigo);font-style:normal;font-weight:500}

/* ============================================================================
   STEPS (Scene 02)
   ============================================================================ */
.steps{
  list-style:none;
  display:flex;flex-direction:column;gap:18px;
  margin-top:clamp(28px,3vw,40px);
}
.steps li{
  display:flex;gap:18px;align-items:flex-start;
  padding:18px 22px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--hair);
  border-radius:14px;
  transition:all .3s var(--ease);
}
.steps li:hover{background:rgba(255,255,255,.85);border-color:var(--halo-indigo);transform:translateX(4px)}
.steps__no{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:600 12px/1 var(--mono);letter-spacing:.02em;
  background:linear-gradient(180deg,var(--indigo),var(--indigo-deep));color:#fff;
  box-shadow:0 4px 12px rgba(99,102,241,.32);
}
.steps li h4{font:600 15px/1.3 var(--sans);color:var(--ink);margin-bottom:4px}
.steps li p{font:400 13.5px/1.55 var(--sans);color:var(--ink-mute)}

/* Cluster card (Scene 02 right) */
.cluster-card{
  position:relative;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 60px -20px rgba(168,85,247,.18),
    0 8px 24px -8px rgba(15,23,42,.06);
  overflow:hidden;
}
.cluster-card__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 12%, rgba(99,102,241,.10), transparent 50%),
    radial-gradient(circle at 8% 92%, rgba(168,85,247,.10), transparent 50%);
}
.cluster-card__title{font:600 16px/1.3 var(--sans);color:var(--ink);margin-bottom:6px;position:relative}
.cluster-card__sub{font:400 13.5px/1.55 var(--sans);color:var(--ink-mute);margin-bottom:24px;position:relative}
.cluster-card__list{list-style:none;display:flex;flex-direction:column;gap:9px;position:relative}
.cluster-card__list li{display:flex;align-items:center;gap:10px;font:400 13.5px/1.4 var(--sans);color:var(--ink)}
.cluster-card__pill{
  display:inline-flex;align-items:center;
  font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;
  background:color-mix(in srgb,var(--p,#6366f1) 12%,transparent);
  color:var(--p,#6366f1);
  border:1px solid color-mix(in srgb,var(--p,#6366f1) 22%,transparent);
  flex:0 0 auto;
}
.cluster-card__foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);
  font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--ink-faint);
  position:relative;
}
.cluster-card__live{display:inline-flex;align-items:center;gap:6px;color:var(--emerald)}
.cluster-card__live span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 6px rgba(16,185,129,.5);animation:dotPulse 1.6s ease-in-out infinite}

/* ============================================================================
   RETRIEVE PANEL (Scene 03)
   ============================================================================ */
.retrieve-panel{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--hair);
  border-radius:18px;
  padding:24px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 60px -20px rgba(99,102,241,.18),
    0 8px 24px -8px rgba(15,23,42,.06);
}
.retrieve-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.retrieve-panel__title{font:600 14px/1 var(--sans);color:var(--ink);letter-spacing:-.005em}
.retrieve-panel__live{display:inline-flex;align-items:center;gap:7px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.retrieve-panel__live span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 6px rgba(16,185,129,.5);animation:dotPulse 1.6s ease-in-out infinite}

.retrieve-panel__rows{list-style:none;display:flex;flex-direction:column;gap:11px}
.retrieve-panel__rows li{
  display:grid;grid-template-columns:30px 1fr 110px 50px;gap:14px;align-items:center;
  font:400 13px/1 var(--mono);
}
.retrieve-panel__rank{color:var(--ink-faint);font-weight:500;font-size:11.5px;letter-spacing:.04em}
.retrieve-panel__name{color:var(--ink);font-weight:500;letter-spacing:-.01em}
.retrieve-panel__bar{position:relative;height:5px;background:rgba(15,23,42,.08);border-radius:3px;overflow:hidden}
.retrieve-panel__bar span{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--indigo),var(--violet));
  border-radius:3px;
  box-shadow:0 0 10px rgba(99,102,241,.42);
  animation:barFlow 3.4s ease-in-out infinite;
}
@keyframes barFlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.18)}
}
.retrieve-panel__score{color:var(--indigo);font-weight:600;text-align:right;letter-spacing:-.01em}

.retrieve-panel__foot{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);
  font:500 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-faint);
}

.retrieve-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  margin-top:clamp(24px,3vw,36px);
  padding-top:24px;border-top:1px solid var(--hair);
}
.retrieve-stats__cell{display:flex;flex-direction:column;gap:6px}
.retrieve-stats__num{
  font:300 30px/1 var(--sans);letter-spacing:-.022em;color:var(--ink-2);
}
.retrieve-stats__num small{font-size:14px;font-weight:400;color:var(--ink-mute);margin-left:4px}
.retrieve-stats__cap{font:500 11.5px/1.4 var(--mono);letter-spacing:.03em;color:var(--ink-faint)}

/* ============================================================================
   CAP GRID (Scene 04 — capabilities)
   ============================================================================ */
.cap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:clamp(36px,4vw,52px);
}
.cap{
  position:relative;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--hair);
  border-radius:18px;
  padding:28px 26px;
  display:flex;flex-direction:column;gap:14px;
  transition:all .3s var(--ease);
  overflow:hidden;
}
.cap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--halo-indigo),transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.cap:hover{transform:translateY(-3px);background:rgba(255,255,255,.92);border-color:var(--halo-indigo);box-shadow:0 16px 40px -16px rgba(99,102,241,.22),0 8px 20px -8px rgba(15,23,42,.06)}
.cap:hover::before{opacity:1}

.cap--feat{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,245,247,.85));
  border-color:var(--halo-indigo);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 16px 40px -16px rgba(99,102,241,.28),
    0 8px 20px -8px rgba(15,23,42,.06);
}
.cap--feat::before{opacity:1}

.cap__num{
  font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-faint);
  align-self:flex-start;
}
.cap__title{font:600 18px/1.3 var(--sans);color:var(--ink-2);letter-spacing:-.01em}
.cap__desc{font:400 14px/1.6 var(--sans);color:var(--ink-mute)}
.cap__bullets{
  list-style:none;display:flex;flex-direction:column;gap:6px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-2);
}
.cap__bullets li{
  position:relative;padding-left:18px;
  font:400 13px/1.5 var(--sans);color:var(--ink);
}
.cap__bullets li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:1px;background:var(--indigo);
}

/* ============================================================================
   COMPARISON TABLE (Scene 05) — Stripe / Linear / Vercel pricing pattern
   ============================================================================ */
.cmp{
  margin-top:clamp(36px,4vw,52px);
  border:1px solid var(--hair);
  border-radius:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  overflow:hidden;
  box-shadow:0 32px 80px -32px rgba(15,23,42,.10);
}

/* Header row — sticky tier columns */
.cmp__head{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(250,250,255,.6),rgba(255,255,255,.0));
}
.cmp__h-label{
  display:flex;align-items:flex-end;
  padding:28px 24px 22px;
  font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.cmp__h-tier{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:28px 22px 22px;
  border-left:1px solid var(--hair-2);
  background:transparent;
  transition:background .3s var(--ease);
}
.cmp__h-tier--feat{
  background:linear-gradient(180deg,rgba(99,102,241,.06),rgba(168,85,247,.04));
}
.cmp__h-tier--feat::after{
  content:"";position:absolute;inset:0 0 -1px 0;
  border-top:2px solid var(--indigo);
  pointer-events:none;
}
.cmp__h-pill{
  position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);
  font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,var(--indigo),var(--indigo-deep));
  padding:6px 10px;border-radius:999px;
  box-shadow:0 4px 12px rgba(99,102,241,.4);
}
.cmp__h-id{
  font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-faint);
  display:inline-block;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-tint);border:1px solid var(--hair);border-radius:6px;
}
.cmp__h-tier--feat .cmp__h-id{
  color:var(--indigo);background:#fff;border-color:rgba(99,102,241,.3);
}
.cmp__h-name{
  font:600 19px/1.2 var(--sans);color:var(--ink);letter-spacing:-.01em;
}
.cmp__h-price{
  font:300 28px/1 var(--sans);color:var(--ink-2);letter-spacing:-.022em;
  margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.cmp__h-price small{
  font:500 11px/1 var(--mono);color:var(--ink-faint);letter-spacing:.02em;margin-left:4px;
}
.cmp__h-sub{
  font:400 12.5px/1.4 var(--sans);color:var(--ink-mute);
  margin-top:4px;
}

/* Body rows — alternating shade, subtle on hover */
.cmp__body{
  display:flex;flex-direction:column;
}
.cmp__row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  border-top:1px solid var(--hair-2);
  transition:background .25s var(--ease);
}
.cmp__row:nth-child(even){background:rgba(245,245,247,.45)}
.cmp__row:hover{background:rgba(99,102,241,.04)}

.cmp__cell{
  padding:14px 22px;
  font:400 13.5px/1.4 var(--sans);
  color:var(--ink);
  border-left:1px solid var(--hair-2);
  display:flex;align-items:center;
  font-variant-numeric:tabular-nums;
}
.cmp__cell--label{
  font-weight:500;
  color:var(--ink);
  border-left:0;
  padding-left:24px;
}
.cmp__cell--feat{
  background:linear-gradient(180deg,rgba(99,102,241,.05),rgba(168,85,247,.02));
  font-weight:500;
}
.cmp__cell--check{
  color:var(--indigo);
  font-weight:600;
  font-size:16px;
}
.cmp__cell--no{
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:14px;
}

/* Footer row — CTAs aligned per column */
.cmp__foot{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(250,250,255,.4));
  padding:18px 0 22px;
}
.cmp__foot-label{padding:0 22px}
.cmp__foot-cta{
  padding:0 16px;
  border-left:1px solid var(--hair-2);
}
.cmp__foot-cta--feat{
  background:linear-gradient(180deg,rgba(99,102,241,.04),rgba(168,85,247,.02));
}

.tiers__note{
  margin-top:32px;text-align:center;
  font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-faint);
}

/* ============================================================================
   REACH (Scene 06)
   ============================================================================ */
.reach-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px;margin-bottom:clamp(40px,4vw,56px)}

.reach-meta{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  width:100%;max-width:720px;
  padding:24px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.reach-meta li{display:flex;flex-direction:column;gap:5px;text-align:center;align-items:center}
.reach-meta span{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.reach-meta em{font:500 13px/1.3 var(--sans);font-style:normal;color:var(--ink)}

.foot{
  display:flex;align-items:center;gap:14px;
  margin-top:48px;
  font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--ink-faint);
}
.foot__sep{flex:0 0 24px;height:1px;background:var(--hair-soft)}

/* ============================================================================
   GATE (loading)
   ============================================================================ */
.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,.92), rgba(250,250,250,.96) 60%, var(--paper) 100%);
  backdrop-filter:blur(8px);
  transition:opacity .65s var(--ease), visibility .65s var(--ease);
}
.gate.is-open{opacity:0;visibility:hidden;pointer-events:none}
.gate__inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:480px;text-align:center;padding:0 24px}
.gate__mark{width:72px;height:72px;filter:drop-shadow(0 4px 18px rgba(99,102,241,.28));animation:gateFloat 3.4s ease-in-out infinite}
@keyframes gateFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gate__title{
  font:300 36px/1 var(--sans);letter-spacing:-.022em;color:var(--ink-2);
  margin-top:6px;
}
.gate__sep{color:var(--indigo);font-weight:500;margin:0 2px}
.gate__sub{font:400 14px/1.4 var(--sans);color:var(--ink-mute);margin-bottom:18px}

.gate__bar{
  position:relative;width:240px;height:3px;background:rgba(15,23,42,.06);border-radius:3px;overflow:hidden;margin:6px 0;
}
.gate__bar-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--indigo),var(--violet));
  border-radius:3px;
  box-shadow:0 0 12px rgba(99,102,241,.45);
  transition:width .4s var(--ease);
}

.gate__loading{font:500 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--ink-mute);min-height:18px}
.gate__small{font:400 11.5px/1.5 var(--sans);color:var(--ink-faint);max-width:340px;margin-top:8px}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-grid__panel{justify-content:flex-start;max-width:560px}
  .two-col, .two-col--rev{grid-template-columns:1fr;gap:36px}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .cmp{border-radius:14px}
  .cmp__head,.cmp__row,.cmp__foot{grid-template-columns:1fr}
  .cmp__h-label{display:none}
  .cmp__h-tier{border-left:0;border-top:1px solid var(--hair-2);padding:18px 18px}
  .cmp__h-tier:first-of-type{border-top:0}
  .cmp__cell{border-left:0;border-top:1px solid var(--hair-2);padding:10px 18px;font-size:13px}
  .cmp__cell--label{background:rgba(245,245,247,.6);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:var(--ink-faint);padding:8px 18px;border-top:1px solid var(--hair)}
  .cmp__row{border-top:0}
  .cmp__row:nth-child(even){background:transparent}
  .cmp__foot-cta{border-left:0;border-top:1px solid var(--hair-2);padding:10px 18px}
  .reach-meta{grid-template-columns:repeat(2,1fr)}
  .topbar__nav{display:none}
  .status{display:none}
  .recall-pill{display:none}
  .tryit{top:80px;right:16px;padding:7px 12px;font-size:11.5px}
  .retrieve-stats{grid-template-columns:repeat(2,1fr)}
  .footbar__love{display:none}
}
@media (max-width: 720px){
  .display{font-size:clamp(40px,11vw,64px)}
  .h2{font-size:clamp(32px,8vw,52px)}
  .cap-grid{grid-template-columns:1fr}
  .reach-meta{grid-template-columns:1fr 1fr;gap:18px}
  .topbar__cta .btn--ghost{display:none}
  .topbar__build{display:none}
  .scroll-cue{display:none}
  .proof-list{flex-direction:column;gap:14px}
  .retrieve-stats{grid-template-columns:1fr 1fr}
  .panel__code{font-size:11.5px;padding:16px}
  .scene{padding:96px 24px 80px}
  .footbar{padding:8px 16px;font-size:10px;gap:8px}
  .footbar__status{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
}