/* ============ tokens ============ */
:root{
  --canvas:#0A1120;
  --panel:#111A2E;
  --accent:#8FB3E8;
  --accent-hover:#A9C6F2;
  --accent-muted:#31415E;
  --text-secondary:#98A4BD;
  --text-primary:#EEF1F7;
  --display:'Space Grotesk',sans-serif;
  --body:'Instrument Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}
/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:-48px;left:16px;z-index:99;background:var(--panel);color:var(--text-primary);padding:10px 16px;border-radius:8px;transition:top .25s var(--ease-soft);text-decoration:none;font-size:14px}
.skip:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-muted);color:var(--text-primary)}

/* ============ fixed environment layer ============ */
.env{position:fixed;inset:-12%;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 70% 55% at 28% 18%,rgba(65,88,132,.16) 0%,rgba(65,88,132,0) 60%),
  radial-gradient(ellipse 90% 70% at 72% 88%,rgba(28,40,66,.35) 0%,rgba(28,40,66,0) 65%);
  animation:envdrift 96s var(--ease-soft) -30s infinite alternate}
.env i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:.09;animation:mote 74s linear infinite}
.env i:nth-child(1){left:16%;top:34%;animation-delay:-12s}
.env i:nth-child(2){left:44%;top:70%;animation-delay:-38s;opacity:.06}
.env i:nth-child(3){left:71%;top:24%;animation-delay:-55s;opacity:.07}
.env i:nth-child(4){left:87%;top:58%;animation-delay:-24s;opacity:.05}
@keyframes envdrift{from{transform:translate3d(-1.5%,-1%,0)}to{transform:translate3d(1.5%,1.2%,0)}}
@keyframes mote{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(26px,-48px,0)}100%{transform:translate3d(0,0,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============ nav ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,4vw,44px)}
nav::before{content:"";position:absolute;inset:0;height:150%;pointer-events:none;background:linear-gradient(rgba(6,10,20,.62),rgba(6,10,20,0));z-index:-1}
.brand{display:flex;align-items:center;gap:20px;text-decoration:none}
.brand-logo{width:96px;height:96px;border-radius:50%;box-shadow:0 6px 26px rgba(4,7,16,.6)}
.brand-word{height:26px;width:auto;mix-blend-mode:screen;opacity:.97;filter:brightness(1.35) saturate(.7)}
.nav-links{display:flex;gap:clamp(16px,3vw,38px)}
.nav-links a{font-family:var(--display);font-weight:500;font-size:20.5px;letter-spacing:.04em;color:var(--text-secondary);text-decoration:none;transition:color .3s var(--ease-soft);text-shadow:var(--tshadow)}
.nav-links a:hover{color:var(--text-primary)}
@media (max-width:1100px){.brand-logo{width:72px;height:72px}.brand-word{height:21px}.brand{gap:14px}}

/* ============ hero ============ */
.hero{position:relative;height:700vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#scrubLayer{position:absolute;inset:0;background-color:var(--canvas);background-image:url('assets/stage-plate.jpg');background-size:cover;background-position:center}
#heroCradle{position:absolute;inset:0;width:100%;height:100%}
#heroCradle .hw{stroke:#8794AD;stroke-width:2.2;opacity:.7}
#reflLayer{opacity:.9}
#reflLayer .hw{opacity:.25}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:var(--text-secondary);opacity:.8;transition:opacity .6s var(--ease-soft);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-align:center;text-shadow:var(--tshadow)}
.cue svg{margin:6px auto 0;animation:cuebob 2.6s var(--ease-soft) -1.2s infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* caption bands */
.band{position:absolute;left:50%;top:16vh;transform:translateX(-50%);width:min(92vw,760px);text-align:center;opacity:0;pointer-events:none;text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-18% -14%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.62) 0%,rgba(5,5,10,.42) 46%,rgba(5,5,10,0) 76%)}
.band[data-band="3"]::before{background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.7) 0%,rgba(5,5,10,.47) 46%,rgba(5,5,10,0) 76%)}
.band h2,.band .h{font-family:var(--display);font-weight:500;font-size:clamp(26px,4.6vw,46px);line-height:1.22;letter-spacing:.01em;max-width:24ch;margin:0 auto}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block}
.start-cue{margin-top:26px;font-family:var(--mono);font-size:clamp(24px,3vw,29px);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);opacity:var(--k,0);transition:opacity .6s var(--ease-soft)}
.start-cue.gone{opacity:0}

/* band 1: blur-to-sharp (two stacked copies) */
.b-blur{position:relative}
.b-blur .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.b-blur .sharp{opacity:var(--k,0)}

/* band 2: drift-down */
.b-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}

/* band 3: word-punch with overshoot */
.b-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.b-punch .w.em{--ov:0.24;--sd:0.16;--ss:2.6;color:var(--accent)}

/* band 4: word-by-word rise */
.b-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}

/* band 5: staged settle */
.band.b-settle{width:min(94vw,1120px)}
.b-settle .h{font-weight:700;font-size:clamp(40px,8vw,92px);letter-spacing:.22em;text-indent:.22em;max-width:none;white-space:nowrap}

/* the yin-yang O, matching the logo's own mark */
.oy{display:inline-block;width:.66em;height:.66em;vertical-align:.01em;line-height:0}
.oy svg{width:100%;height:100%;display:block}

/* in the settle headline it materializes last: a slow fade, soft scale,
   and a quiet quarter-turn into place while the letters rise around it */
.b-settle .c.oy-c{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - .8)*5.5,1);opacity:calc(var(--kc)*var(--kc));transform:scale(calc(.55 + .63*var(--kc) - .18*var(--ks))) rotate(calc((1 - var(--kc))*-60deg))}
.b-settle .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*34px))}
.b-settle .sub{--ks:clamp(0,(var(--k,0) - .58)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px));margin-top:18px;font-size:clamp(16px,2vw,20px);color:var(--text-secondary);transition:none}
.b-settle .row{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px));margin-top:34px;pointer-events:auto}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.08em;color:var(--canvas);background:var(--accent);padding:14px 30px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:background .3s var(--ease-soft),transform .3s var(--ease-soft);text-shadow:none}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{display:inline-block;font-family:var(--display);font-weight:500;font-size:14.5px;letter-spacing:.08em;color:var(--text-primary);background:transparent;border:1px solid var(--accent-muted);padding:13px 28px;border-radius:999px;text-decoration:none;cursor:pointer;transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft),transform .3s var(--ease-soft)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* static hero (phones, portrait tablets, reduced motion) */
#staticHero{display:none;position:relative;height:100%;background-image:url('assets/hero-ending.jpg');background-size:cover;background-position:center;align-items:flex-end;justify-content:flex-start}
#staticHero::before{content:"";position:absolute;inset:0;background:linear-gradient(198deg,rgba(10,17,32,.06) 34%,rgba(8,12,24,.78) 82%)}
.s-inner{position:relative;padding:0 clamp(22px,6vw,48px) clamp(64px,12vh,110px);max-width:620px}
.s-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--accent);margin-bottom:14px}
.s-head{font-family:var(--display);font-weight:700;font-size:clamp(38px,11vw,84px);letter-spacing:.14em;line-height:1.05;text-shadow:var(--tshadow);white-space:nowrap}
.s-sub{margin-top:14px;font-size:17px;color:var(--text-secondary);max-width:34ch;text-shadow:var(--tshadow)}
.s-inner .btn{margin-top:28px}

/* ============ the five static-hero gates (must match JS exactly) ============ */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:100vh;height:100svh}
  #scrubLayer{display:none}
  #staticHero{display:flex}
}
@media (max-height:560px){.cue,.start-cue{display:none}}

/* ============ shared section furniture ============ */
main{position:relative;z-index:1}
section{position:relative;padding:clamp(84px,12vh,150px) clamp(22px,5vw,64px)}
.wrap{max-width:1120px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.3em;color:var(--accent);margin-bottom:18px}
h2.title{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.14;letter-spacing:.005em;max-width:22ch}
h2.title-one{max-width:none;white-space:nowrap;font-size:clamp(19px,3.5vw,52px)}
.lede{color:var(--text-secondary);font-size:clamp(16px,1.9vw,18.5px);max-width:58ch;margin-top:22px;text-align:justify;hyphens:auto}
.lede strong{color:var(--text-primary);font-weight:500}

/* transfer-line divider (signature) */
.tline{position:relative;display:flex;justify-content:center;align-items:center;gap:30px;height:68px;margin:0 auto}
.tline .dot{width:12px;height:12px;border-radius:50%;background:var(--accent-muted);transition:background .8s var(--ease-soft)}
.tline .pulse{position:absolute;left:50%;top:50%;width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border-radius:50%;background:var(--accent);opacity:0;filter:blur(1px)}
.tline.in .pulse{animation:tpulse 1.6s var(--ease-soft) .2s 1}
.tline.in .dot{background:var(--accent-muted)}
@keyframes tpulse{0%{opacity:0;transform:translateX(-92px) scale(.6)}12%{opacity:.95}88%{opacity:.85}100%{opacity:0;transform:translateX(92px) scale(.6)}}

/* entrance choreography */
.rv .part{opacity:0;transform:translateY(26px)}
.rv.in .part{opacity:1;transform:translateY(0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in .part:nth-child(2){transition-delay:.1s}
.rv.in .part:nth-child(3){transition-delay:.2s}
.rv.in .part:nth-child(4){transition-delay:.3s}
.rv.in .part:nth-child(5){transition-delay:.42s}
.rv.in .part:nth-child(6){transition-delay:.52s}
.rv.in .part:nth-child(7){transition-delay:.62s}
.rv.in.done .part:nth-child(2),.rv.in.done .part:nth-child(3),.rv.in.done .part:nth-child(4),.rv.in.done .part:nth-child(5),.rv.in.done .part:nth-child(6),.rv.in.done .part:nth-child(7){transition-delay:0s}

/* ============ section 1: physics ============ */
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,84px);align-items:center}
.fcard{position:relative;background:var(--panel);border:1px solid var(--accent-muted);border-radius:18px;padding:clamp(28px,3.6vw,44px);overflow:hidden}
.fcard::after{content:"";position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(ellipse 40% 32% at 30% 20%,rgba(143,179,232,.14),rgba(143,179,232,0) 70%);opacity:.5;animation:fglow 7s var(--ease-soft) -2s infinite alternate}
@keyframes fglow{from{opacity:.28;transform:translate3d(0,0,0)}to{opacity:.6;transform:translate3d(4%,3%,0)}}
.formula{font-family:var(--mono);font-weight:500;font-size:clamp(34px,4.4vw,52px);letter-spacing:.1em;color:var(--text-primary)}
.formula b{color:var(--accent);font-weight:500}
.fdef{margin-top:26px;display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:10px;font-family:var(--mono);font-size:14px}
.fdef dt{color:var(--accent)}
.fdef dd{color:var(--text-secondary)}
.fnote{margin-top:26px;padding-top:22px;border-top:1px solid var(--accent-muted);color:var(--text-secondary);font-size:15px;line-height:1.65}
.fnote strong{color:var(--text-primary);font-weight:500}
.arc-wrap{position:relative;margin-top:34px;border-radius:18px;overflow:hidden}
.arc-wrap img{width:100%;height:auto}
.arc-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arc-svg path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:620;stroke-dashoffset:620;opacity:.65}
.rv.in .arc-svg path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease-out) .5s}

/* ============ section 2: a body in motion ============ */
.motion-band{max-width:1120px;margin:0 auto}
.motion-head{max-width:720px}
.motion-anim{position:relative;margin:clamp(36px,6vh,60px) 0 0;max-width:720px;border-radius:18px;overflow:hidden;background:linear-gradient(168deg,#131D33 0%,#0C1426 62%,#0A1120 100%);border:1px solid rgba(143,179,232,.14)}
.motion-anim::before{content:"";position:absolute;inset:-30%;pointer-events:none;background:radial-gradient(ellipse 46% 36% at 32% 22%,rgba(143,179,232,.13),rgba(143,179,232,0) 68%);animation:fglow 8s var(--ease-soft) -3s infinite alternate}
.motion-anim svg{position:relative;display:block;width:100%;height:auto}
.mo-wire{stroke:#7E8CA6;stroke-width:1.4;opacity:.75}
.pull-lines{margin-top:clamp(44px,7vw,84px);display:flex;flex-direction:column;gap:clamp(18px,3vw,30px)}
.pull{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.7vw,34px);line-height:1.2;color:var(--accent-muted);transition:color 1.1s var(--ease-soft);letter-spacing:.01em;text-wrap:balance}
@media (min-width:721px){.pull{white-space:nowrap}}
.pull.lit{color:var(--text-primary)}
.pull i{font-style:normal;color:var(--accent);opacity:0;transition:opacity 1.1s var(--ease-soft)}
.pull.lit i{opacity:1}

/* ============ section 3: interactive cradle ============ */
.play{background:linear-gradient(rgba(17,26,46,0),rgba(17,26,46,.5) 22%,rgba(17,26,46,.5) 78%,rgba(17,26,46,0))}
.play .wrap{text-align:center}
.play-note{font-family:var(--mono);font-size:clamp(17px,2vw,20px);letter-spacing:.1em;color:var(--text-secondary);margin-top:14px}
.pn-em{font-style:normal;color:var(--accent);font-weight:500}
.pn-flash{animation:pnpulse .8s var(--ease-soft) 2}
@keyframes pnpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.grab-ring{transform-box:view-box;transform-origin:428px 240px;opacity:0}
.cradle-nudge .grab-ring{animation:grabping 1.7s ease-out 1}
@keyframes grabping{0%{opacity:.95;transform:scale(.72)}44%{opacity:0;transform:scale(1.5)}50%{opacity:.95;transform:scale(.72)}94%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.lift-chips{display:flex;gap:10px;justify-content:center;margin-top:20px}
.lchip{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--text-secondary);background:transparent;border:1px solid var(--accent-muted);border-radius:999px;padding:9px 18px;cursor:pointer;transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.lchip:hover{border-color:var(--accent);color:var(--text-primary)}
.lchip.on{color:var(--canvas);background:var(--accent);border-color:var(--accent)}
.cradle-stage{margin:clamp(26px,4vh,44px) auto 0;max-width:1100px;touch-action:none;user-select:none;-webkit-user-select:none}
#cradle{width:100%;height:auto;overflow:visible}
#cradle .hit{cursor:grab}
#cradle.holding .hit{cursor:grabbing}
#cradle .wire{stroke:#8794AD;stroke-width:1.6;opacity:.8}
#cradle .grabme{filter:drop-shadow(0 0 10px rgba(143,179,232,.35))}
.play-lines{margin-top:clamp(30px,5vh,48px);display:flex;flex-direction:column;gap:14px;align-items:center}
.pline{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.6vw,27px);color:var(--accent-muted);opacity:.55;transform:translateY(8px);transition:color .9s var(--ease-soft),opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.pline.lit{color:var(--text-primary);opacity:1;transform:translateY(0)}

/* ============ section 4: the idea ============ */
.idea .wrap{max-width:860px}
.chaos-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);margin:clamp(34px,5vh,54px) 0}
.plate{position:relative;background:#000;border-radius:18px;overflow:hidden;height:clamp(220px,26vw,320px);display:flex;align-items:center;justify-content:center}
.plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(143,179,232,.16);border-radius:18px;pointer-events:none}
.plate video{width:100%;height:100%;object-fit:contain}
.chaos-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(14px,2vw,22px);margin:clamp(34px,5vh,54px) 0}
.chaos-trio img{width:100%;height:clamp(150px,15vw,210px);object-fit:contain;background:#000;border-radius:14px;border:1px solid rgba(143,179,232,.16)}
.refl{font-family:var(--mono);font-size:.76em;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted);word-break:break-all;transition:border-color .3s var(--ease-soft)}
.refl:hover{border-color:var(--accent)}
.idea p.prose{color:var(--text-secondary);font-size:clamp(16.5px,2vw,19px);line-height:1.75;max-width:62ch;margin-top:26px;text-align:justify;hyphens:auto}
.idea p.prose strong{color:var(--text-primary);font-weight:500}
.idea .glow{position:absolute;left:50%;top:38%;width:640px;height:640px;margin-left:-320px;pointer-events:none;background:radial-gradient(circle,rgba(143,179,232,.07),rgba(143,179,232,0) 62%);animation:ideaglow 11s var(--ease-soft) -4s infinite alternate}
@keyframes ideaglow{from{opacity:.4;transform:translate3d(-2%,0,0) scale(.94)}to{opacity:.9;transform:translate3d(2%,2%,0) scale(1.04)}}

/* ============ section 5: honest questions ============ */
.faq-grid{display:grid;gap:clamp(16px,2.2vw,24px);margin-top:clamp(36px,6vh,56px)}
.qa{background:var(--panel);border:1px solid var(--accent-muted);border-radius:16px;overflow:hidden}
.qa-h{margin:0}
.qa-q{display:flex;align-items:center;gap:clamp(14px,2vw,24px);width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px);font-family:var(--display);font-weight:500;font-size:clamp(16.5px,2vw,21px);line-height:1.4;color:var(--text-primary)}
.qa-t{flex:1}
.qa-plus{font-family:var(--mono);font-weight:400;font-size:26px;color:var(--accent);line-height:1;transition:transform .45s var(--ease-out)}
.qa.open .qa-plus{transform:rotate(45deg)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:14px;padding:0 clamp(22px,3vw,34px)}
.qa-in p:last-child{padding-bottom:clamp(22px,2.6vw,30px)}
.qa p{color:var(--text-secondary);font-size:clamp(16px,1.9vw,18.5px);line-height:1.75;max-width:none;text-align:justify;hyphens:auto}
.qa .qm{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.24em;white-space:nowrap}

/* ============ section 5b: contact and feedback ============ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,84px);align-items:start}
.contact-mail{margin-top:34px;display:flex;flex-direction:column;gap:10px}
.cm-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.28em;color:var(--accent)}
.cm-link{font-size:clamp(16px,1.9vw,19px);width:fit-content}
.fb-form{position:relative;background:var(--panel);border:1px solid var(--accent-muted);border-radius:18px;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.fb-form::after{content:"";position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(ellipse 40% 32% at 26% 14%,rgba(143,179,232,.1),rgba(143,179,232,0) 70%);opacity:.5;animation:fglow 8s var(--ease-soft) -3s infinite alternate}
.fb-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;color:var(--text-secondary);margin-top:10px}
.fb-label:first-child{margin-top:0}
.fb-opt{opacity:.6;letter-spacing:.1em}
.fb-input{position:relative;z-index:1;background:#0B1322;border:1px solid var(--accent-muted);border-radius:10px;padding:13px 15px;color:var(--text-primary);font-family:var(--body);font-size:16px;transition:border-color .3s var(--ease-soft)}
.fb-input:focus{outline:none;border-color:var(--accent)}
.fb-area{resize:vertical;min-height:130px;line-height:1.6}
.fb-row{display:flex;align-items:center;gap:18px;margin-top:10px;position:relative;z-index:1}
.fb-status{color:var(--text-secondary);font-size:13.5px;line-height:1.5;max-width:34ch}
.fb-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ============ section 6: the conclusion ============ */
.conclude{text-align:center}
.cwrap{max-width:880px;margin:0 auto}
.conclude .kicker{margin-bottom:34px}
.q-lead{color:var(--text-secondary);font-size:clamp(17px,1.8vw,20px);margin-top:18px}
.q-line{font-family:var(--display);font-weight:700;line-height:1.2;margin-top:14px}
.q-muted{font-size:clamp(24px,3.4vw,38px);color:var(--text-secondary)}
.q-strong{font-size:clamp(28px,4.4vw,50px);color:var(--text-primary)}
.eight{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);margin:clamp(44px,7vh,72px) 0;padding:0}
.eight li{font-family:var(--display);font-weight:500;font-size:clamp(15px,1.7vw,19px);color:var(--accent-muted);opacity:.55;transform:translateY(8px);transition:color .9s var(--ease-soft),opacity .9s var(--ease-soft),transform .9s var(--ease-soft);padding:16px 8px;border-top:1px solid rgba(49,65,94,.55)}
.eight li span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--accent);margin-bottom:8px;opacity:.75}
.eight li.lit{color:var(--text-primary);opacity:1;transform:translateY(0)}
.prose-c{color:var(--text-secondary);font-size:clamp(16.5px,2vw,19px);line-height:1.75;max-width:58ch;margin:26px auto 0}
.prose-c strong{color:var(--text-primary);font-weight:600}
.moments{display:flex;flex-direction:column;gap:12px;margin:clamp(40px,6vh,64px) 0}
.moments p{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.4vw,26px);color:var(--accent-muted);opacity:.55;transform:translateY(8px);transition:color .9s var(--ease-soft),opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.moments p.lit{color:var(--text-primary);opacity:1;transform:translateY(0)}
.moments p i,.q-strong i{font-style:normal;color:var(--accent)}

/* ============ section 6b: closing ============ */
.closing{padding:0}
.close-stage{position:relative;min-height:86vh;display:flex;align-items:flex-start;justify-content:center;text-align:center;background-size:cover;background-position:center bottom}
.close-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 80% at 50% 55%,rgba(8,12,24,.28) 0%,rgba(8,12,24,.88) 100%);animation:vign 12s var(--ease-soft) -5s infinite alternate}
@keyframes vign{from{opacity:.92}to{opacity:1}}
.close-inner{position:relative;padding:clamp(64px,12vh,130px) 24px 0}
.close-line{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,34px);margin:0 auto;text-shadow:var(--tshadow);text-wrap:balance}
@media (min-width:721px){.close-line{white-space:nowrap}}
.close-line i{font-style:normal;color:var(--accent)}
.close-inner .btn-ghost{margin-top:38px}

/* footer */
footer{position:relative;z-index:1;padding:56px clamp(22px,5vw,64px);display:grid;grid-template-columns:1fr minmax(0,52ch) 1fr;align-items:center;gap:clamp(20px,3vw,44px);border-top:1px solid rgba(49,65,94,.5)}
.foot-copy{color:var(--text-secondary);font-size:14px;justify-self:start;white-space:nowrap}
.foot-made{color:var(--text-secondary);font-size:14px;max-width:52ch;text-align:justify;hyphens:auto}
.foot-made strong{font-family:var(--mono);font-weight:500;font-size:.95em;color:#7A92B8}
.foot-word{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;justify-self:end}
.fw-name{font-family:var(--display);font-weight:700;letter-spacing:.3em;text-indent:.3em;font-size:15px;color:var(--text-primary)}
.fw-tag{color:var(--text-secondary);font-size:14px}

/* ============ responsive ============ */
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
  .foot-word{justify-self:start;align-items:flex-start;text-align:left}
  .foot-copy{white-space:normal}
  .chaos-duo{grid-template-columns:1fr}
  .plate{height:min(64vw,300px)}
  .chaos-trio{grid-template-columns:1fr}
  .chaos-trio img{height:min(52vw,240px)}
  .eight{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  nav{padding:12px 16px}
  .brand{gap:10px}
  .brand-logo{width:54px;height:54px}
  .brand-word{height:15px}
  .nav-links{gap:12px}
  .nav-links a{font-size:13.5px;white-space:nowrap}
  #staticHero{background-position:50% center}
}
@media (max-width:600px){
  .brand-word{display:none}
}
@media (pointer:coarse){
  .btn,.btn-ghost,.nav-links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .lchip{min-height:44px}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv .part{opacity:1;transform:none}
  .arc-svg path{stroke-dashoffset:0}
  .pull{color:var(--text-primary)}
  .pull i{opacity:1}
  .pline{color:var(--text-primary);opacity:1;transform:none}
  .eight li,.moments p{color:var(--text-primary);opacity:1;transform:none}
  .lift-chips{display:none}
  .tline .dot{background:var(--accent-muted)}
}