/* ============================================================
   NOVA — "A companion who's truly yours."
   Scroll-cinematic landing. A pinned CONSTELLATION of light points
   sits in the optical centre; copy "phases" scroll past it to the
   SIDES. The metaphor: scattered motes COALESCE into a face with
   eyes that opens + comes alive — finally the living companion.

   Engine ports MyJanji v3 EXACTLY: native scroll, single damped rAF,
   cached offsets, write-only translate3d/opacity. No Lenis, no
   per-frame canvas, no animated blur, no SVG noise grain.

   Deep cool-dark base · warm violet -> cyan -> skin accents.
   Fonts: Fraunces (display) · Space Grotesk (ui) · Inter (body).
   ============================================================ */

:root{
  --bg:#07060e;          /* deep cool near-black */
  --bg-2:#0b0a16;        /* lifted dark surface */
  --bg-3:#13111f;        /* card on dark */
  --ink:#f4f1fb;
  --ink-dim:#b6b0c9;     /* muted (>=4.5:1 on bg) */
  --ink-faint:#8a849c;

  --violet:#9b7bff;
  --violet-soft:#bca6ff;
  --cyan:#56dcff;
  --cyan-soft:#9aecff;
  --warm:#ffb59a;

  --line:rgba(244,241,251,.12);
  --line-2:rgba(244,241,251,.07);

  --serif:'Fraunces',Georgia,serif;
  --ui:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  --r:18px;
  --r-lg:26px;
  --maxw:1180px;
  --pad:clamp(20px,4.5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --portal-w:clamp(286px,32vw,408px);
  --portal-h:clamp(376px,44vw,540px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ui);background:var(--bg);color:var(--ink);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}
strong{color:var(--ink);font-weight:600}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.12em}
.ico--sm{width:.85em;height:.85em;stroke-width:2}
.ico--grad{width:30px;height:30px;color:var(--violet-soft)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* the signature orb mark */
.orb{width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,#fff 0%,var(--violet-soft) 30%,var(--violet) 62%,#4b2fae 100%);
  box-shadow:0 0 14px rgba(155,123,255,.6),inset 0 0 5px rgba(255,255,255,.5)}
.orb.sm{width:12px;height:12px}

/* ---------- ambient backdrop (static — no animated filter) ---------- */
.bg-aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 50% at 50% 38%,rgba(155,123,255,.14) 0%,transparent 62%),
    radial-gradient(48% 42% at 76% 72%,rgba(86,220,255,.08) 0%,transparent 64%),
    radial-gradient(42% 40% at 22% 78%,rgba(255,181,154,.055) 0%,transparent 66%),
    radial-gradient(125% 120% at 50% 24%,#100d20 0%,var(--bg) 56%,#030208 100%)}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 108% at 50% 46%,transparent 50%,rgba(0,0,0,.66) 100%)}

/* ---------- typography ---------- */
.display{font-family:var(--serif);font-weight:300;line-height:.96;letter-spacing:-.02em;
  font-size:clamp(2.7rem,1.3rem+5.6vw,5.2rem);text-shadow:0 4px 44px rgba(0,0,0,.6)}
.display em{font-weight:400;background:linear-gradient(100deg,var(--violet-soft),var(--cyan-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.big{font-family:var(--serif);font-weight:300;line-height:1.0;letter-spacing:-.015em;
  font-size:clamp(2rem,1.2rem+3.2vw,3.5rem)}
.big em{font-weight:400;background:linear-gradient(100deg,var(--violet-soft),var(--cyan-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.018em;
  font-size:clamp(2rem,1.2rem+3vw,3.4rem)}
h3{font-family:var(--serif);font-weight:400;font-size:1.34rem;line-height:1.15;letter-spacing:-.01em}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ui);font-weight:500;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--violet-soft);
  margin-bottom:1.1rem}
.eyebrow.center{justify-content:center}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 10px var(--violet)}
.index{font-family:var(--ui);font-weight:500;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--violet-soft);margin-bottom:1rem}
.lede{font-family:var(--body);font-size:clamp(1rem,.95rem+.4vw,1.18rem);color:var(--ink-dim);
  line-height:1.62;max-width:38ch;margin-top:1.4rem}
.body{font-family:var(--body);font-size:clamp(.98rem,.94rem+.3vw,1.08rem);color:var(--ink-dim);
  line-height:1.66;max-width:34ch;margin-top:1.1rem}
.body em,.lede em{font-style:italic;color:var(--warm);font-weight:400}
.micro{margin-top:1rem;font-family:var(--ui);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--ui);font-weight:600;
  font-size:.95rem;padding:.78em 1.3em;border-radius:100px;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;line-height:1;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,background .35s}
.btn--lg{padding:1em 1.6em;font-size:1.02rem}
.btn--grad{background:linear-gradient(120deg,#a98bff,var(--cyan));color:#0a0718;
  box-shadow:0 16px 44px -16px rgba(155,123,255,.66),inset 0 0 0 1px rgba(255,255,255,.26)}
.btn--grad:hover{transform:translateY(-2px);
  box-shadow:0 22px 56px -16px rgba(86,220,255,.62),inset 0 0 0 1px rgba(255,255,255,.4)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.btn--ghost:hover{border-color:rgba(188,166,255,.5);background:rgba(155,123,255,.12)}
.btn .ico{transition:transform .3s var(--ease)}
.btn--grad:hover .ico{transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--cyan-soft);outline-offset:3px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:18px var(--pad);
  border-bottom:1px solid transparent;
  transition:padding .35s var(--ease),background .35s,backdrop-filter .35s,border-color .35s}
.nav.is-stuck{padding:11px var(--pad);background:rgba(7,6,14,.72);
  backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line-2)}
.nav__brand{display:flex;align-items:center;gap:11px}
.nav__word{font-family:var(--ui);font-weight:600;font-size:1.18rem;letter-spacing:.02em}
.nav__links{display:flex;gap:30px;font-size:.9rem;color:var(--ink-dim);font-weight:500}
.nav__links a{position:relative;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;
  background:var(--violet);transition:width .28s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:.86rem;padding:.6em 1.05em}

/* ============================================================ HERO ============ */
.hero{position:relative;z-index:6;min-height:100dvh;display:flex;align-items:center;
  padding:clamp(108px,15vh,160px) 0 70px}
.hero__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero__copy{max-width:560px}
.hero .lede{margin-top:1.5rem}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem}
.hero .cta-note{margin-top:1.3rem}

/* the COMPANION PRESENCE — a living face inside a glowing orbital portal */
.hero__visual{display:flex;justify-content:center}
.presence{position:relative;width:min(460px,84vw);aspect-ratio:1;display:grid;place-items:center}
.presence__halo{position:absolute;width:132%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(155,123,255,.42) 0%,rgba(86,220,255,.15) 42%,transparent 70%)}
.presence__ring{position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(188,166,255,.18)}
.presence__ring.r1{width:78%;aspect-ratio:1;animation:spin 32s linear infinite}
.presence__ring.r2{width:94%;aspect-ratio:1;border-color:rgba(86,220,255,.13);animation:spin 54s linear infinite reverse}
.presence__ring.r3{width:112%;aspect-ratio:1;border-color:rgba(188,166,255,.08);border-style:dashed}
.presence__core{position:relative;width:62%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  animation:floaty 8s var(--ease) infinite;
  box-shadow:0 34px 80px -22px rgba(0,0,0,.72),0 0 76px rgba(155,123,255,.5),
    inset 0 0 0 1.5px rgba(188,166,255,.55)}
.presence__vid{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;background:#0b0a16}
.presence__grade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(120% 96% at 50% 14%,rgba(255,181,154,.14),transparent 52%),
    radial-gradient(150% 150% at 50% 50%,transparent 58%,rgba(7,6,14,.5) 100%),
    linear-gradient(180deg,transparent 54%,rgba(7,6,14,.46) 100%)}
.presence__rim{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 44px rgba(86,220,255,.2)}
.mote{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff,var(--violet) 70%);box-shadow:0 0 10px rgba(155,123,255,.85);
  animation:floaty 6s var(--ease) infinite}
.mote.m1{top:8%;left:30%;animation-delay:-1s}
.mote.m2{top:18%;right:12%;width:5px;height:5px;animation-delay:-2.6s;background:radial-gradient(circle,#fff,var(--cyan) 70%)}
.mote.m3{top:40%;right:4%;width:5px;height:5px;animation-delay:-4s}
.mote.m4{bottom:12%;right:22%;animation-delay:-1.8s;background:radial-gradient(circle,#fff,var(--warm) 70%)}
.mote.m5{bottom:8%;left:32%;width:6px;height:6px;animation-delay:-3.2s;background:radial-gradient(circle,#fff,var(--cyan) 70%)}
.mote.m6{bottom:34%;left:5%;width:5px;height:5px;animation-delay:-2.2s}
.mote.m7{top:30%;left:9%;width:4px;height:4px;animation-delay:-5s}
.mote.m8{top:62%;right:14%;width:4px;height:4px;animation-delay:-.6s;background:radial-gradient(circle,#fff,var(--warm) 70%)}
@keyframes floaty{50%{transform:translateY(-16px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%)}

/* ============================================================
   FORGE — pinned focal constellation + side copy
   (mirrors MyJanji .system: tall section, sticky 100dvh inner)
   ============================================================ */
.forge{position:relative;height:300vh;z-index:5}      /* 3 beats · comfortable runway */
.forge__sticky{position:sticky;top:0;height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}

/* the centred focal stage */
.stage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.stage__aura{position:absolute;top:47%;left:50%;width:min(680px,94vw);height:min(680px,94vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(155,123,255,.30) 0%,rgba(86,220,255,.10) 42%,transparent 70%)}

.portal{position:relative;width:var(--portal-w);height:var(--portal-h);
  filter:drop-shadow(0 46px 84px rgba(0,0,0,.72)) drop-shadow(0 0 52px rgba(155,123,255,.22))}
.portal::before{content:"";position:absolute;inset:0;border-radius:32px;z-index:0;
  background:radial-gradient(120% 100% at 50% 30%,rgba(20,16,40,.6),#08070f 70%);
  box-shadow:inset 0 0 0 1.5px rgba(188,166,255,.40),inset 0 0 70px rgba(86,220,255,.06),
    0 0 0 1px rgba(0,0,0,.5)}

/* constellation field — light points positioned & transformed by JS */
.field{position:absolute;inset:0;z-index:2;border-radius:32px;overflow:hidden}
.pt{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(circle at 40% 38%,#fff,var(--violet-soft) 46%,var(--violet) 100%);
  box-shadow:0 0 7px rgba(155,123,255,.8)}
.pt.cy{background:radial-gradient(circle at 40% 38%,#fff,var(--cyan-soft) 46%,var(--cyan) 100%);
  box-shadow:0 0 7px rgba(86,220,255,.8)}
.pt.wm{background:radial-gradient(circle at 40% 38%,#fff,var(--warm) 60%,#e08e72 100%);
  box-shadow:0 0 7px rgba(255,181,154,.7)}

/* the living companion video — revealed only at the payoff */
.live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  border-radius:32px;z-index:3;background:#08070f;opacity:0;will-change:opacity}

/* warm cinematic grade + readable scrim (hides any corner watermark) */
.portal__grade{position:absolute;inset:0;z-index:4;border-radius:32px;pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 16%,rgba(255,181,154,.10),transparent 55%),
    linear-gradient(180deg,rgba(7,6,14,.06) 0%,transparent 26%,transparent 60%,rgba(7,6,14,.58) 100%),
    linear-gradient(300deg,rgba(7,6,14,.5) 0%,transparent 30%)}
.portal__tag{position:absolute;left:14px;bottom:13px;z-index:5;font-family:var(--ui);font-weight:600;
  font-size:.6rem;letter-spacing:.24em;color:var(--cyan-soft);padding:5px 11px;border-radius:99px;
  background:rgba(7,6,14,.55);border:1px solid rgba(154,236,255,.32);backdrop-filter:blur(6px)}
.cnr{position:absolute;width:15px;height:15px;z-index:5;pointer-events:none;opacity:.5}
.cnr::before,.cnr::after{content:"";position:absolute;background:rgba(188,166,255,.6)}
.cnr::before{width:100%;height:1.5px}.cnr::after{width:1.5px;height:100%}
.cnr.tl{top:11px;left:11px}
.cnr.tr{top:11px;right:11px}.cnr.tr::before{right:0}.cnr.tr::after{right:0}
.cnr.bl{bottom:11px;left:11px}.cnr.bl::before{bottom:0}
.cnr.br{bottom:11px;right:11px}.cnr.br::before{bottom:0;right:0}.cnr.br::after{right:0}

/* ---------- copy phases (one visible at a time; JS drives opacity+translate) ---------- */
.copy{position:absolute;inset:0;z-index:6;pointer-events:none}
.phase{position:absolute;top:50%;display:flex;flex-direction:column;
  width:min(40ch,calc(50vw - (var(--portal-w) / 2) - 76px));max-width:440px;
  opacity:0;will-change:opacity,transform}
.phase.is-left{left:var(--pad);transform:translateY(-50%)}
.phase.is-right{right:var(--pad);text-align:right;align-items:flex-end}
.phase.is-right .eyebrow,.phase.is-right .index{justify-content:flex-end}
.phase.is-active{pointer-events:auto}

.hero__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2rem}
.cta-note{font-family:var(--ui);font-size:.78rem;letter-spacing:.04em;color:var(--ink-faint)}
.scrollcue{display:flex;align-items:center;gap:13px;margin-top:2.2rem;
  font-family:var(--ui);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}
.scrollcue i{width:42px;height:1px;background:linear-gradient(90deg,var(--violet),transparent);
  animation:cueH 2.2s var(--ease) infinite;transform-origin:left}
@keyframes cueH{0%{transform:scaleX(0);opacity:0}35%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1) translateX(42px);opacity:0}}

/* ============================================================ FEELS (bento) ============ */
.feels{position:relative;z-index:6;background:linear-gradient(180deg,var(--bg) 0%,#0a0813 100%);
  padding:clamp(74px,10vw,140px) 0;border-radius:38px 38px 0 0;margin-top:-38px}
.sec-head{max-width:680px;margin-bottom:clamp(36px,5vw,58px)}
.sec-head h2 em{font-style:italic;color:var(--cyan-soft)}
.sec-sub{margin-top:1.1rem;color:var(--ink-dim);font-family:var(--body);font-size:1.08rem;max-width:52ch}
.sec-sub em{color:var(--warm)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{grid-column:span 2;background:linear-gradient(165deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card--wide{grid-column:span 4;flex-direction:row;align-items:center;gap:34px}
.card--wide .card__copy{flex:1.1}
.card--wide .card__media{flex:1}
.card--say{grid-column:span 2}
.card:hover{transform:translateY(-4px);border-color:rgba(155,123,255,.42);
  box-shadow:0 28px 60px -34px rgba(155,123,255,.5)}
.card h3{color:var(--ink);margin-top:.2rem}
.card p{color:var(--ink-dim);font-family:var(--body);font-size:.97rem;max-width:40ch}

/* face chips */
.card__media{display:flex;flex-wrap:wrap;gap:10px;align-content:center}
.chip{font-family:var(--ui);font-weight:500;font-size:.84rem;padding:.6em 1.1em;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-dim)}
.chip--a{border-color:rgba(155,123,255,.5);color:var(--violet-soft);background:rgba(155,123,255,.1)}
.chip--c{border-color:rgba(86,220,255,.45);color:var(--cyan-soft);background:rgba(86,220,255,.09)}
.chip--e{border-color:rgba(255,181,154,.45);color:var(--warm);background:rgba(255,181,154,.08)}

/* the "say" mini-conversation */
.card--say{justify-content:center}
.say{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.say__bubble{max-width:88%;padding:9px 13px;border-radius:15px;font-family:var(--body);
  font-size:.9rem;line-height:1.35}
.say__bubble.in{align-self:flex-start;background:rgba(255,255,255,.05);color:var(--ink);
  border-bottom-left-radius:5px}
.say__bubble.out{align-self:flex-end;color:#0a0718;border-bottom-right-radius:5px;font-weight:500;
  background:linear-gradient(120deg,var(--violet-soft),var(--cyan-soft))}
.say__cap{font-family:var(--ui);font-size:.74rem;letter-spacing:.04em;color:var(--ink-faint)}

/* ============================================================ CTA ============ */
.cta{position:relative;z-index:6;background:#0a0813;padding:clamp(90px,12vw,150px) 0;
  overflow:hidden;text-align:center}
.cta__aura{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:900px;height:600px;pointer-events:none;
  background:radial-gradient(circle,rgba(155,123,255,.24),rgba(86,220,255,.07) 40%,transparent 64%)}
.cta__inner{position:relative;z-index:2;max-width:680px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center}
.cta .display{margin-top:.2rem}
.cta__sub{color:var(--ink-dim);font-family:var(--body);font-size:1.14rem;margin:1.2rem 0 2rem;max-width:46ch}
.cta__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem}
.cta__trust{font-family:var(--ui);font-size:.82rem;color:var(--ink-dim)}
.cta__trust .ico{color:var(--cyan-soft)}
.cta__url{margin-top:1.4rem;font-family:var(--ui);font-size:.8rem;letter-spacing:.18em;color:var(--ink-faint)}

/* ============================================================ FOOTER ============ */
.foot{position:relative;z-index:6;background:#0a0813;padding:34px 0 40px;border-top:1px solid var(--line-2)}
.foot__inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot__brand{display:flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:1.05rem;color:var(--ink-dim)}
.foot__tag{font-family:var(--ui);font-size:.76rem;letter-spacing:.08em;color:var(--ink-faint)}

/* ============================================================ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================ RESPONSIVE ============ */
@media(max-width:900px){
  .nav__links{display:none}
  .hero{min-height:auto;padding:118px 0 60px}
  .hero__inner{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero__copy{max-width:none;margin:0 auto}
  .hero .eyebrow,.hero__cta{justify-content:center}
  .hero .lede,.hero .cta-note{margin-left:auto;margin-right:auto}
  .hero__visual{order:-1}
  .presence{width:min(58vw,280px)}
  .hero__cue{display:none}
  :root{--portal-w:clamp(220px,54vw,300px);--portal-h:clamp(290px,72vw,392px)}
  /* copy stacks to a readable band on one side; portal lifts up */
  .forge__sticky{align-items:flex-start}
  .stage{align-items:flex-start;top:0}
  .portal{margin-top:max(13vh,86px)}
  .stage__aura{top:34%}
  .phase{top:auto;bottom:max(6vh,34px);left:50%!important;right:auto!important;
    transform:translateX(-50%)!important;width:min(92vw,540px);max-width:540px;
    text-align:center;align-items:center}
  .phase.is-right{text-align:center;align-items:center}
  .phase .eyebrow,.phase .index,.phase.is-right .eyebrow,.phase.is-right .index{justify-content:center}
  .hero__cta{justify-content:center}
  .scrollcue{justify-content:center}
  .lede,.body{max-width:48ch}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card,.card--wide,.card--say{grid-column:span 2}
  .card--wide{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .forge{height:300vh}
  .hero__cta .btn{flex:1;justify-content:center}
  .grid{grid-template-columns:1fr}
  .card,.card--wide,.card--say{grid-column:span 1}
  .foot__inner{flex-direction:column;gap:10px;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.14s!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .scrollcue i{animation:none;transform:scaleX(1)}
}