/* ═══════════════════════════════════════════════════════════════
   EPHORATE — cinematic marketing site
   Obsidian, burnished gold, a disciplined imperial red.
   Base styles are the no-JS / reduced-motion fallback; the scroll
   engine layers pinned-scrub layout on top under html.js.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --void:      #060504;
  --bg:        #0b0a08;
  --bg-soft:   #0e0d0a;
  --panel:     #14110c;
  --ivory:     #ece8dc;
  --muted:     #a8a294;
  --gold:      #d4a843;
  --gold-hot:  #eccb6f;
  --gold-deep: #8a6520;
  --red:       #b83232;
  --allow:     #3fb27f;
  --deny:      #d24444;
  --transform: #4d8fd1;
  --approval:  #d4a843;
  --line:      rgba(236,232,220,.09);
  --line-gold: rgba(212,168,67,.28);
  --line-gold-dim: rgba(212,168,67,.14);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --ease-out: cubic-bezier(.19,1,.22,1);
  --ease-spring: cubic-bezier(.22,1.35,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:var(--font-body);
  background:var(--void);
  color:var(--ivory);
  line-height:1.65;
  font-size:clamp(.95rem, .9rem + .25vw, 1.05rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain over everything (beneath the header) */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:90;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
code{ font-family:var(--font-mono); }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:440;
  line-height:1.04;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.beat h1, .beat__title, .beat__display{ font-weight:490; }

::selection{ background:var(--gold); color:var(--void); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.kicker{
  font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.3rem;
}
.kicker--h{ display:block; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* metallic gradient for display numerals */
.metal, .stat, .rn, .beat__num{
  background:linear-gradient(168deg, #f4dc92 6%, #d4a843 38%, #97701f 62%, #e8c568 94%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ── scroll progress ───────────────────────────────────────────── */
.progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:210;
  pointer-events:none;
}
.progress i{
  display:block; height:100%;
  transform-origin:0 50%;
  transform:scaleX(var(--sp, 0));
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-hot));
}

/* ── buttons ───────────────────────────────────────────────────── */
.btn{
  display:inline-block;
  font-weight:600; font-size:.85rem; letter-spacing:.03em;
  text-decoration:none;
  padding:.8em 1.7em;
  border-radius:9px;
  border:1px solid transparent;
  transition:transform .55s var(--ease-spring), background .3s, color .3s,
             border-color .3s, box-shadow .3s;
  will-change:transform;
}
.btn--lg{ padding:1em 2.1em; font-size:.92rem; }
.btn--ghost{
  border-color:rgba(236,232,220,.26);
  color:var(--ivory);
  background:rgba(5,6,8,.25);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-hot); }
.btn--gold{
  background:linear-gradient(180deg, #eac760 0%, #cfa23c 58%, #b98d2e 100%);
  color:#140f04;
  box-shadow:inset 0 1px 0 rgba(255,241,200,.65), 0 8px 24px -10px rgba(212,168,67,.55);
}
.btn--gold:hover{
  background:linear-gradient(180deg, #f4d67c 0%, #ddb04a 58%, #c69a38 100%);
  box-shadow:inset 0 1px 0 rgba(255,241,200,.7), 0 12px 30px -10px rgba(212,168,67,.7);
}
.btn:hover{ transform:translateY(-2px); }

/* ── header ────────────────────────────────────────────────────── */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.3rem var(--pad);
  will-change:transform;
  transition:background .5s, box-shadow .5s, padding .5s, transform .55s var(--ease-out);
}
.site-head.hidden{ transform:translateY(-110%); }
.site-head.hidden:focus-within{ transform:none; }
.site-head.scrolled{
  background:rgba(5,6,8,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:.62rem var(--pad);
  box-shadow:0 1px 0 var(--line-gold-dim);
}
.brand{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:1.02rem; font-weight:600; letter-spacing:-.02em;
}
.brand svg{ color:var(--gold); flex:none; }
.site-nav{ display:flex; gap:1.7rem; }
.site-nav a{
  font-size:.8rem; font-weight:500; letter-spacing:.04em;
  text-decoration:none; color:var(--muted);
  transition:color .25s;
}
.site-nav a:hover{ color:var(--gold-hot); }
.head-cta{ display:flex; align-items:center; gap:.8rem; }

.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  color:inherit; padding:.4rem; line-height:0;
  border-radius:6px;
}

/* ═════════════════════════════════════════════════════════════════
   CINE sections — base = static fallback (no JS / reduced motion)
   ═════════════════════════════════════════════════════════════════ */
.cine{ position:relative; background:var(--void); }
.cine__stick{
  position:relative;
  padding:clamp(5.5rem, 12vh, 9rem) var(--pad) clamp(3rem, 7vh, 5rem);
  max-width:80rem; margin:0 auto;
}
.cine__canvas{ display:none; }
.cine__shade{ display:none; }
.cine__cue{ display:none; }
.cine__poster{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  margin-bottom:clamp(2.5rem, 6vh, 4rem);
}
.beat{ max-width:46rem; margin:0 0 3.2rem; }
.beat:last-child{ margin-bottom:0; }

.beat h1{
  font-size:clamp(3rem, 8vw, 7rem);
  margin-bottom:1.5rem;
}
.beat h1 em{ font-style:italic; color:var(--gold); }
.beat__title{
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  margin-bottom:1rem;
}
.beat__display{
  font-size:clamp(2.1rem, 5vw, 4.3rem);
}
.beat__display--sm{ font-size:clamp(1.8rem, 4vw, 3.4rem); }
.beat__sub{
  color:var(--muted);
  font-size:clamp(1rem, 1.3vw, 1.18rem);
  max-width:38rem;
}
.beat__num{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:.14em;
  margin-bottom:1rem;
}
.beat__num::after{
  content:"";
  display:inline-block;
  width:3.4rem; height:1px;
  margin-left:1rem;
  vertical-align:middle;
  background:linear-gradient(90deg, var(--line-gold), transparent);
}
.beat__actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin:2.2rem 0 1.5rem;
}
.beat__pill code{
  display:inline-block;
  font-size:.82rem; color:var(--muted);
  border:1px solid var(--line);
  background:rgba(13,16,23,.72);
  padding:.55em 1.3em; border-radius:100px;
}

/* verdict plaques */
.verdict{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(2.3rem, 7.5vw, 5.2rem);
  letter-spacing:.01em;
  line-height:1.1;
  margin-bottom:.8rem;
  text-shadow:0 1px 0 rgba(255,255,255,.08), 0 -1px 0 rgba(0,0,0,.85);
}
.verdict--allow{ color:var(--allow); text-shadow:0 0 46px rgba(63,178,127,.45); }
.verdict--deny{ color:var(--deny); text-shadow:0 0 46px rgba(210,68,68,.5); }
.verdict--transform{ color:var(--transform); text-shadow:0 0 46px rgba(77,143,209,.45); }
.verdict--approval{ color:var(--approval); text-shadow:0 0 46px rgba(212,168,67,.5); }

/* ── the dynamic scrub layout (desktop, JS, motion allowed) ────── */
html.js:not(.rm):not(.mob) .cine{ height:460vh; }
html.js:not(.rm):not(.mob) .cine--hall{ height:540vh; }
html.js:not(.rm):not(.mob) .cine__stick{
  position:sticky; top:0;
  height:100svh; max-width:none;
  padding:0; margin:0;
  overflow:hidden;
}
html.js:not(.rm):not(.mob) .cine__poster,
html.js.mob:not(.rm) .cine__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border:0; border-radius:0; margin:0;
  transition:opacity .9s;
}
html.js:not(.rm) .cine__poster.faded{ opacity:0; }
html.js:not(.rm):not(.mob) .cine__canvas,
html.js.mob:not(.rm) .cine__canvas{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
}
html.js:not(.rm):not(.mob) .cine__shade,
html.js.mob:not(.rm) .cine__shade{
  display:block;
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(72% 58% at 50% 46%, rgba(6,5,4,0) 0%, rgba(6,5,4,.2) 58%, rgba(6,5,4,.44) 80%, rgba(6,5,4,.68) 100%),
    linear-gradient(180deg, rgba(6,5,4,.5) 0%, rgba(6,5,4,0) 16%, rgba(6,5,4,0) 80%, var(--void) 100%);
}
html.js:not(.rm):not(.mob) .cine__beats,
html.js.mob:not(.rm) .cine__beats{
  position:absolute; inset:0;
}
html.js:not(.rm):not(.mob) .beat{
  position:absolute;
  margin:0;
  opacity:0;
  transform:translateY(var(--by, 0px));
}
html.js:not(.rm):not(.mob) .beat--intro,
html.js:not(.rm):not(.mob) .beat--center{
  left:50%; top:50%;
  transform:translate(-50%, calc(-50% + var(--by, 0px)));
  text-align:center;
  width:min(56rem, calc(100vw - 2*var(--pad)));
}
html.js:not(.rm):not(.mob) .beat--intro{ width:min(62rem, calc(100vw - 2*var(--pad))); }
html.js:not(.rm):not(.mob) .beat--intro .beat__sub,
html.js:not(.rm):not(.mob) .beat--center .beat__sub{ margin-inline:auto; }
html.js:not(.rm):not(.mob) .beat--intro .beat__actions{ justify-content:center; }
html.js:not(.rm):not(.mob) .beat--left{
  left:max(var(--pad), 7vw); top:50%;
  transform:translateY(calc(-50% + var(--by, 0px)));
  width:min(30rem, 40vw);
}
html.js:not(.rm):not(.mob) .beat--right{
  right:max(var(--pad), 7vw); top:50%;
  transform:translateY(calc(-50% + var(--by, 0px)));
  text-align:right;
  width:min(30rem, 40vw);
}
html.js:not(.rm):not(.mob) .beat--right .beat__sub{ margin-left:auto; }
html.js:not(.rm) .beat .beat__sub{
  color:rgba(236,232,220,.88);
  text-shadow:0 2px 20px rgba(0,0,0,.9), 0 0 44px rgba(0,0,0,.7);
}
html.js:not(.rm):not(.mob) .beat h1,
html.js:not(.rm):not(.mob) .beat h2{ text-shadow:0 3px 38px rgba(0,0,0,.85), 0 1px 8px rgba(0,0,0,.55); }

/* scroll cue */
html.js:not(.rm):not(.mob) .cine--hero .cine__cue{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  position:absolute; left:50%; bottom:2.2rem;
  transform:translateX(-50%);
  opacity:var(--cue, 1);
  transition:opacity .5s;
}
.cine__cue span{
  font-size:.66rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.cine__cue i{
  width:1px; height:44px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:cue 2.1s var(--ease-out) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1) translateY(10px); opacity:0; }
}

/* ── mobile autoplay layout (JS, coarse pointer / narrow) ──────── */
html.js.mob:not(.rm) .cine{ height:auto; }
html.js.mob:not(.rm) .cine__stick{
  position:relative;
  height:100svh; max-width:none;
  padding:0; margin:0;
  overflow:hidden;
}
html.js.mob:not(.rm) .beat{
  position:absolute; inset:0; margin:auto;
  height:fit-content;
  max-height:calc(100svh - 7rem);
  text-align:center;
  padding:0 1.3rem;
  width:100%;
  opacity:0;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transform:translateY(14px);
}
html.js.mob:not(.rm) .beat.on{ opacity:1; transform:none; }
html.js.mob:not(.rm) .beat .beat__sub{ margin-inline:auto; text-shadow:0 2px 16px rgba(0,0,0,.9); }
html.js.mob:not(.rm) .beat h1,
html.js.mob:not(.rm) .beat h2{ text-shadow:0 3px 28px rgba(0,0,0,.85); }
html.js.mob:not(.rm) .beat__actions{ justify-content:center; }
html.js.mob:not(.rm) .beat h1{ font-size:clamp(2.6rem, 11.5vw, 4rem); }

/* ═════════════════════════════════════════════════════════════════
   In-flow sections
   ═════════════════════════════════════════════════════════════════ */

/* ── deck: the control plane ───────────────────────────────────── */
.deck{
  position:relative;
  padding:clamp(5rem, 11vh, 8.5rem) var(--pad) clamp(4rem, 9vh, 7rem);
  background:linear-gradient(180deg, var(--void) 0%, var(--bg) 24%);
}
.deck__head{ text-align:center; max-width:52rem; margin:0 auto clamp(3rem, 6vh, 4.5rem); }
.deck__head h2{ font-size:clamp(2.2rem, 4.8vw, 3.9rem); margin-bottom:1.1rem; }
.deck__sub{ color:var(--muted); }

/* browser-chrome frame for screenshots */
.shot{
  position:relative;
  max-width:min(1060px, 100%);
  margin:0 auto;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.75),
    0 24px 50px -20px rgba(0,0,0,.6);
}
.shot::before{
  content:"";
  position:absolute; top:-1px; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(236,203,111,.6), transparent);
  z-index:1;
}
.shot__bar{
  display:flex; align-items:center; gap:.45rem;
  padding:.62rem .95rem;
  border-bottom:1px solid var(--line);
  background:rgba(236,232,220,.03);
  border-radius:14px 14px 0 0;
}
.shot__bar i{
  width:10px; height:10px; border-radius:50%;
  background:rgba(236,232,220,.14);
}
.shot__bar i:first-child{ background:rgba(184,50,50,.6); }
.shot__bar i:nth-child(2){ background:rgba(212,168,67,.55); }
.shot__bar i:nth-child(3){ background:rgba(63,178,127,.5); }
.shot__bar span{
  margin-left:.6rem;
  font-family:var(--font-mono);
  font-size:.68rem; color:var(--muted);
}
.shot__media{ overflow:hidden; border-radius:0 0 14px 14px; }
.shot__media img{ width:100%; }
html.js:not(.rm):not(.mob) .shot[data-plx]{
  transform:translateY(var(--plx, 0px));
  will-change:transform;
}
.shot--deck{ max-width:min(1150px, 100%); }

/* stats band */
.stats{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
  max-width:72rem;
  margin:clamp(4rem, 8vh, 6rem) auto 0;
}
.stats li{
  border-top:1px solid var(--line-gold-dim);
  padding-top:1.3rem;
}
.stat{
  display:block;
  font-family:var(--font-display);
  font-weight:560;
  font-size:clamp(2.7rem, 5vw, 4.2rem);
  line-height:1;
  margin-bottom:.45rem;
  font-variant-numeric:tabular-nums;
}
.stats span{ font-size:.88rem; color:var(--muted); }
.stats code{ font-size:.82rem; color:var(--ivory); }

/* ── pillars ───────────────────────────────────────────────────── */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap:clamp(2.5rem, 5vw, 5rem);
  padding:clamp(5rem, 11vh, 8.5rem) max(var(--pad), calc((100vw - 82rem) / 2)) clamp(6rem, 13vh, 10rem);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 78%, var(--void) 100%);
}
.pillar{
  border-left:1px solid var(--line-gold-dim);
  padding-left:clamp(1.4rem, 2.5vw, 2.2rem);
}
.pillar h2{ font-size:clamp(2rem, 3.6vw, 3rem); margin-bottom:1.1rem; }
.pillar p{ color:var(--muted); }
.pillar code{ color:var(--ivory); font-size:.9em; }
.pillar p em{ color:var(--ivory); font-style:italic; }
.pillar__list{ list-style:none; margin-top:1.5rem; }
.pillar__list li{
  padding:.6rem 0 .6rem 1.6rem;
  position:relative;
  color:var(--muted); font-size:.95rem;
  border-top:1px solid var(--line);
}
.pillar__list li::before{
  content:"›"; position:absolute; left:.2rem;
  color:var(--gold); font-weight:700;
}
.pillar__list code{ font-size:.85em; }

/* ── tour ──────────────────────────────────────────────────────── */
.tour{
  padding:clamp(5rem, 11vh, 8rem) var(--pad);
  max-width:88rem; margin:0 auto;
}
.tour__head{ text-align:center; margin-bottom:clamp(2.5rem, 6vh, 4rem); }
.tour__head h2{ font-size:clamp(2.2rem, 4.6vw, 3.8rem); }
.tour__note{
  margin-top:1.1rem; font-size:.85rem; color:var(--muted);
  font-family:var(--font-mono);
}
.feature{
  display:grid;
  grid-template-columns:minmax(260px, 5fr) 7fr;
  gap:clamp(1.5rem, 4vw, 4.5rem);
  align-items:center;
  padding:clamp(2.4rem, 5.5vh, 4.5rem) 0;
  border-top:1px solid var(--line);
}
.feature--flip{ grid-template-columns:7fr minmax(260px, 5fr); }
.feature--flip .feature__copy{ order:2; }
.feature--flip .shot{ order:1; }
.feature__num{
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.22em;
  color:var(--gold);
  margin-bottom:1rem;
}
.feature__num::after{
  content:"";
  display:inline-block;
  width:3.2rem; height:1px;
  margin-left:.9rem;
  vertical-align:middle;
  background:linear-gradient(90deg, var(--line-gold), transparent);
}
.feature__copy h3{
  font-size:clamp(1.6rem, 2.7vw, 2.3rem);
  margin-bottom:.9rem;
}
.feature__copy p{ color:var(--muted); }
.feature__copy code{ color:var(--ivory); font-size:.88em; }

/* ── code section ──────────────────────────────────────────────── */
.code{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap:clamp(2rem, 4vw, 4rem);
  padding:clamp(5rem, 11vh, 8.5rem) var(--pad);
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.code__col h2{ font-size:clamp(1.8rem, 3vw, 2.6rem); margin-bottom:1.6rem; }
.codeblock{
  background:#090705;
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.5rem 1.6rem;
  overflow-x:auto;
  font-size:.82rem; line-height:1.7;
  box-shadow:inset 0 1px 0 rgba(236,232,220,.04), 0 24px 60px -30px rgba(0,0,0,.8);
}
.codeblock code{ color:#c9cfda; }
.codeblock .c{ color:#5d6675; font-style:italic; }
.codeblock .k{ color:#8ab4e8; }
.codeblock .s{ color:#9ece8f; }
.codeblock .n{ color:#e0bc63; }
.codeblock .v--approval{ color:var(--approval); }
.codeblock .v--transform{ color:var(--transform); }
.code__foot{ margin-top:1rem; font-size:.85rem; color:var(--muted); }
.code__foot code{ color:var(--ivory); }

/* ── bundles ───────────────────────────────────────────────────── */
.bundles{
  padding:clamp(5rem, 11vh, 8.5rem) var(--pad);
  max-width:82rem; margin:0 auto;
}
.bundles h2{ font-size:clamp(2rem, 4vw, 3.2rem); margin-bottom:3rem; }
.bundles__grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
}
.bundles__grid li{
  position:relative;
  background:var(--bg);
  padding:2rem 1.7rem 2.2rem;
  transition:background .4s;
}
.bundles__grid li::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-gold), transparent);
  opacity:0;
  transition:opacity .4s;
}
.bundles__grid li:hover{ background:var(--panel); }
.bundles__grid li:hover::before{ opacity:1; }
.rn{
  display:block;
  font-family:var(--font-display);
  font-weight:560;
  font-size:1.9rem;
  line-height:1;
  margin-bottom:1.1rem;
}
.bundles__grid strong{
  display:block;
  font-family:var(--font-mono);
  font-size:1rem; color:var(--gold);
  margin-bottom:.5rem;
}
.bundles__grid span{ font-size:.88rem; color:var(--muted); }

/* ── stack strip ───────────────────────────────────────────────── */
.stack{
  padding:clamp(4rem, 9vh, 6.5rem) var(--pad);
  border-top:1px solid var(--line);
  max-width:82rem; margin:0 auto;
}
.stack__row{ list-style:none; }
.stack__row li{
  display:grid;
  grid-template-columns:minmax(140px, 220px) 1fr;
  gap:1rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.stack__row code{ color:var(--gold); font-size:.88rem; }
.stack__row span{ color:var(--muted); }

/* ── cta + footer ──────────────────────────────────────────────── */
.cta{
  position:relative;
  text-align:center;
  padding:clamp(7rem, 18vh, 12rem) var(--pad);
  background:
    radial-gradient(46% 62% at 50% 88%, rgba(212,168,67,.14) 0%, transparent 100%),
    var(--void);
  overflow:hidden;
}
.cta__laurel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -54%);
  width:clamp(260px, 38vw, 460px);
  color:var(--gold);
  opacity:.13;
  pointer-events:none;
}
.cta h2{
  position:relative;
  font-size:clamp(3rem, 8.5vw, 6.6rem);
  margin-bottom:1.2rem;
}
.cta p{
  position:relative;
  color:var(--muted); max-width:34rem; margin:0 auto 2.6rem;
}
.cta__actions{ position:relative; }

.site-foot{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:2rem 3rem;
  padding:3rem var(--pad) 3.4rem;
  font-size:.8rem; color:var(--muted);
  border-top:1px solid var(--line-gold-dim);
  background:var(--void);
}
.site-foot__mark{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-weight:600; font-size:.95rem;
  color:var(--ivory);
  margin-bottom:.7rem;
}
.site-foot__mark svg{ color:var(--gold); }
.site-foot nav{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.site-foot nav a{
  text-decoration:none; color:var(--muted);
  transition:color .25s;
}
.site-foot nav a:hover{ color:var(--gold-hot); }
.site-foot__meta{ display:flex; flex-direction:column; gap:.55rem; }
.site-foot__note{ font-size:.74rem; opacity:.8; }

/* ── reveals ───────────────────────────────────────────────────── */
html.js:not(.rm) .reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:calc(var(--stagger, 0) * 85ms);
}
html.js:not(.rm) .reveal.in{ opacity:1; transform:none; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 1000px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    padding:.4rem var(--pad) 1.1rem;
    background:rgba(5,6,8,.96);
    box-shadow:0 18px 30px rgba(0,0,0,.5);
  }
  .site-nav.open{ display:flex; }
  .site-nav a{
    padding:.85rem 0; font-size:.95rem;
    border-bottom:1px solid var(--line);
  }
  .feature, .feature--flip{ grid-template-columns:1fr; }
  .feature--flip .feature__copy{ order:1; }
  .feature--flip .shot{ order:2; }
}
@media (max-width: 640px){
  .head-cta .btn--ghost{ display:none; }
  .beat__actions .btn{ width:100%; text-align:center; }
  .stack__row li{ grid-template-columns:1fr; gap:.2rem; }
  .stats{ grid-template-columns:1fr 1fr; }
  html.js.mob:not(.rm) .beat .beat__pill{ display:none; }
  .beat--intro .kicker{ font-size:.6rem; letter-spacing:.17em; }
  .beat__sub{ font-size:.98rem; }
}

/* ── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
  .cine__cue i{ animation:none; }
}

/* ── print ─────────────────────────────────────────────────────── */
@media print{
  .site-head, .progress, .cine__cue{ display:none; }
  body{ background:#fff; color:#000; }
  body::after{ display:none; }
  .beat__sub, .pillar p, .feature__copy p, .bundles__grid span,
  .stack__row span, .cta p, .deck__sub{ color:#333; }
  html.js .reveal{ opacity:1; transform:none; }
  .beat{ position:static !important; opacity:1 !important; transform:none !important; }
}