/* ===========================================================================
   AgentSphere SecureOps — Produx-inspired visual system
   Layers, in cascade order:
     1. Fonts + design tokens
     2. Base elements and shared components
     3. Section layouts
     4. Editorial layer (oversized display type, marquee, hero)
     5. Scroll choreography (all custom properties written by script.js)
     6. Produx motion layer (masked line reveals, pinned scenes, cursor)
     7. Breakpoints
     8. Reduced motion
   =========================================================================== */

/* 1. Fonts + tokens ------------------------------------------------------- */
@font-face{font-family:Inter;src:url('assets/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url('assets/jetbrains-mono.woff2') format('woff2');font-weight:100 800;font-display:swap}

:root{
  /* Produx green-black system */
  --ink:#1B211B;
  --ink-deep:#141914;
  --stone:#303930;
  --stone-2:#545E54;
  --paper:#EDEBE3;
  --accent:#C8BE9E;
  --gold:var(--accent);              /* legacy alias */
  --muted:#9DA69B;
  --green:#8FBF9F;
  --red:#D8776A;

  /* Text ramps */
  --t1:#EDEBE3;                      /* primary on dark */
  --t2:#A7AFA5;                      /* secondary on dark */
  --t3:#7E877D;                      /* tertiary on dark */
  --p1:#1B211B;                      /* primary on paper */
  --p2:#56605A;                      /* secondary on paper */
  --p3:#7C857C;                      /* tertiary on paper */

  /* Surfaces + strokes */
  --surface:#1E241E;
  --surface-2:#262E26;
  --line:rgba(237,235,227,.14);
  --line-2:#3A443A;
  --line-paper:#C6C4B8;

  --ease:cubic-bezier(.16,1,.3,1);

  font-family:Inter,system-ui,sans-serif;
  color:var(--paper);
  background:var(--ink);
}

/* 2. Base + components ---------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--ink);color:var(--paper)}
section{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--ink-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

.skip{position:fixed;top:-5rem;left:1rem;z-index:99;background:var(--accent);color:var(--ink-deep);padding:.8rem 1rem}
.skip:focus{top:1rem}

.pad{padding:clamp(6rem,12vw,13rem) clamp(1.2rem,5.5vw,6.5rem)}
.paper{background:var(--paper);color:var(--p1)}

.eyebrow,.index,.label{font:600 .64rem/1.3 Mono,monospace;text-transform:uppercase;letter-spacing:.15em;color:var(--accent)}
.index{color:var(--p3)}
.index.dark{color:var(--t2)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.visible{opacity:1;transform:none}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;padding:.8rem 1.4rem;border:1px solid var(--line);background:none;text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;font-weight:700;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.button.gold{background:var(--accent);border-color:var(--accent);color:var(--ink-deep)}
.button.gold:hover{background:transparent;color:var(--accent)}
.button:disabled{opacity:.55;cursor:not-allowed}
.text-link{text-transform:uppercase;font-size:.7rem;letter-spacing:.1em}
.actions{display:flex;align-items:center;gap:2rem;margin-top:2.3rem}

/* Header */
.header{position:fixed;z-index:10;inset:0 0 auto;height:4.6rem;display:flex;align-items:center;gap:2rem;padding:0 clamp(1.2rem,4.5vw,5rem);background:linear-gradient(var(--ink-deep) 0%,rgba(20,25,20,.78) 60%,transparent)}
.brand{display:flex;align-items:center;gap:.75rem;font-size:1rem;font-weight:420;letter-spacing:-.03em}
.brand img,.brand small{display:none}
.brand span{display:flex;flex-direction:column}
.header nav{display:flex;gap:2rem;margin-left:auto;font:500 .58rem Mono,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--t2)}
.header nav a:before{content:'[ '}
.header nav a:after{content:' ]'}
.header nav a:hover,.text-link:hover{color:var(--accent)}
.header-cta{font:600 .66rem Mono,monospace;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--accent);padding:.4rem 0}
.menu{display:none;background:transparent;border:0;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em}

/* 3. Section layouts ------------------------------------------------------ */

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.5fr .5fr;align-content:end;align-items:end;gap:5vw;padding:36vh clamp(1.2rem,4.5vw,5rem) 5vh;overflow:hidden;background:var(--ink-deep)}
.hero:before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 72% 40%,rgba(84,94,84,.55),transparent 62%),var(--ink-deep);pointer-events:none}
.hero:after{content:'';position:absolute;inset:0;z-index:0;background:url('assets/hero-field.webp') center/cover no-repeat;opacity:.5;mask-image:linear-gradient(to bottom,#000 30%,transparent 96%);pointer-events:none;transform:scale(var(--hero-zoom,1)) translate3d(0,calc(var(--hero-shift,0px) * .45),0);transform-origin:52% 45%;will-change:transform}
/* The scene dims as it leaves, so the handoff into the identity reveal has weight. */
.hero .veil{position:absolute;inset:0;z-index:2;background:var(--ink-deep);opacity:var(--hero-veil,0);pointer-events:none}
.mega-word{position:absolute;z-index:0;left:-.025em;right:-.025em;top:-.12em;white-space:nowrap;font-size:clamp(6rem,16.4vw,19rem);font-weight:390;line-height:.82;letter-spacing:-.09em;color:var(--t1);opacity:.96}
.hero-copy,.hero-side{position:relative;z-index:1}
.hero .eyebrow{color:var(--t1);margin:0 0 2.2rem}
.hero h1{max-width:12ch;margin:0;font-size:clamp(3.5rem,7.4vw,9rem);font-weight:360;line-height:.86;letter-spacing:-.07em}
.hero h1 em{font-family:Inter,sans-serif;font-style:normal;color:var(--accent)}
.hero-side{align-self:end;padding-bottom:.5rem}
.hero-side>p{max-width:24rem;font:400 clamp(.95rem,1.15vw,1.2rem)/1.5 Inter,sans-serif;color:var(--t1)}
.hero-side .actions{display:block;margin-top:2.3rem}
.hero-side .button{display:none}
.hero-side .text-link{display:inline-block;color:var(--t1);border-bottom:1px solid var(--t1);padding-bottom:.3rem}
.scroll-note{position:absolute;z-index:1;left:clamp(1.2rem,4.5vw,5rem);top:30vh;font:500 .57rem Mono,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}

/* Identity reveal */
.brand-reveal{position:relative;height:280vh;background:var(--ink-deep)}
.reveal-caption{position:sticky;top:0;z-index:3;height:100vh;display:flex;align-items:flex-start;padding:6rem clamp(1.2rem,4.5vw,5rem);font:500 .58rem Mono,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--t2);pointer-events:none}
.reveal-caption p{margin:0 auto 0 2rem}
.reveal-caption small{font:inherit;color:var(--t3)}
/* Pulled back over .reveal-caption: both are sticky 100vh siblings, so without this
   the mosaic's flow position starts one viewport down and the scene opens empty. */
.mosaic{position:sticky;top:0;height:100vh;margin-top:-100vh;overflow:hidden}
.mosaic:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,transparent 20%,rgba(20,25,20,.5) 88%);pointer-events:none}
/* Fracture layer: the screen cracks as the mark shatters, then heals as it lands. */
.mosaic{isolation:isolate}
.mosaic .crack{position:absolute;inset:0;z-index:0;background:url('assets/crack-glow.webp') center/cover no-repeat;
  opacity:var(--crack-opacity,0);transform:scale(var(--crack-scale,1.2));transform-origin:center;
  /* screen, so the glowing fracture lines add light instead of darkening the scene */
  mix-blend-mode:screen;filter:contrast(1.25) brightness(1.15);
  mask-image:radial-gradient(circle at center,#000 55%,transparent 95%);pointer-events:none;will-change:transform,opacity}
/* An animated background keeps decoding off-screen — drop it out of the tree entirely. */
.mosaic .crack:not(.live){display:none}

/* Marquee */
.ticker{overflow:hidden;background:var(--paper);color:var(--p1);border-block:1px solid var(--line-paper);padding:.7rem 0;transform:skewX(var(--ticker-skew,0deg));transition:transform .55s var(--ease)}
.ticker div{width:max-content;font-size:clamp(2.8rem,6vw,7rem);font-weight:350;letter-spacing:-.055em;line-height:.95;white-space:nowrap;animation:ticker var(--ticker-duration,26s) linear infinite}
.ticker div+div{color:transparent;-webkit-text-stroke:1px var(--stone-2);animation-direction:reverse;animation-duration:calc(var(--ticker-duration,26s) * 1.35)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Problem */
.problem{padding-top:8rem}
.split-heading{display:grid;grid-template-columns:1fr;gap:8vw;align-items:end;margin-top:4rem}
.split-heading h2,.sticky-copy h2,.evidence-heading h2,.docs-heading h2{margin:0;font-weight:280;line-height:.92;letter-spacing:-.06em}
.split-heading h2{max-width:12ch;font-size:clamp(4rem,8.8vw,10rem)}
.split-heading>p{justify-self:end;max-width:28rem;margin:-4rem 0 0;font:400 clamp(1.25rem,2vw,2rem)/1.35 Georgia,serif;color:var(--p2)}
.problem-list{margin-top:8rem;border-top:1px solid var(--line-paper)}
.problem-list article{display:grid;grid-template-columns:4rem 1fr .8fr;gap:2rem;align-items:center;min-height:18vh;padding:1.8rem 0;border-bottom:1px solid var(--line-paper)}
.problem-list span{font:600 .65rem Mono,monospace;color:var(--p3)}
.problem-list h3{margin:0;font-size:clamp(2rem,4vw,4.8rem);font-weight:350;letter-spacing:-.05em}
.problem-list p{margin:0;color:var(--p2);line-height:1.6}

/* Solution */
.solution{background:var(--surface)}
.center-heading{max-width:75rem;margin:4rem 0 0}
.center-heading h2{max-width:11ch;margin:1rem 0;font-size:clamp(4rem,9vw,10rem);font-weight:260;line-height:.94;letter-spacing:-.055em}
.center-heading>p:last-child{max-width:42rem;margin:2rem 0 2rem auto;color:var(--t2);line-height:1.6}
.agent-map{position:relative;max-width:70rem;height:min(63vw,44rem);margin:1rem auto}
.agent-map:before,.agent-map:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(200,190,158,.24);border-radius:50%;aspect-ratio:1}
.agent-map:before{width:70%}
.agent-map:after{width:46%}
.agent-map .gate-art{position:absolute;left:50%;top:50%;z-index:0;width:min(52rem,90%);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain;opacity:.42;pointer-events:none;mask-image:radial-gradient(closest-side,#000 55%,transparent 92%)}
.core{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:10.5rem;height:10.5rem;border-radius:50%;background:var(--accent);color:var(--ink-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-transform:uppercase;font:700 .68rem Mono,monospace;letter-spacing:.1em}
.core img{width:3rem;filter:brightness(0)}
.agent{position:absolute;z-index:1;width:10rem;height:4rem;display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--line);background:var(--surface-2);font-size:.78rem}
.agent b{font:600 .6rem Mono,monospace;color:var(--accent)}
.a1{left:7%;top:22%}.a2{left:2%;top:50%}.a3{left:18%;bottom:10%}
.a4{right:18%;bottom:10%}.a5{right:2%;top:50%}.a6{right:7%;top:22%}
.controls{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.controls article{min-height:17rem;padding:2rem;border-right:1px solid var(--line)}
.controls article:last-child{border-right:0}
.controls span{font:600 .6rem Mono,monospace;color:var(--accent);text-transform:uppercase}
.controls h3{font-size:clamp(1.3rem,2vw,2rem);font-weight:350}
.controls p{font-size:.86rem;color:var(--t2);line-height:1.6}

/* Workflow */
.how{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw}
.sticky-copy{position:sticky;top:6rem;align-self:start}
.sticky-copy h2{margin-top:4rem;font-size:clamp(3rem,6.2vw,7.5rem)}
.sticky-copy>p:last-child{max-width:30rem;color:var(--p2);line-height:1.7}
.steps{position:relative;border-top:1px solid var(--line-paper)}
.steps:before{content:'';position:absolute;left:1.2rem;top:0;z-index:1;width:1px;height:calc(var(--trust-progress,0) * 100%);background:var(--p1)}
.steps article{min-height:12rem;display:grid;grid-template-columns:5rem 1fr;gap:2rem;padding:2.5rem 0;border-bottom:1px solid var(--line-paper)}
.steps>article>span{font:600 .65rem Mono,monospace;color:var(--p3)}
.steps h3{margin:0;font-size:clamp(2rem,3.5vw,4rem);font-weight:300;letter-spacing:-.04em}
.steps p{color:var(--p2);line-height:1.6}

/* Demo */
.demo{background:var(--ink-deep)}
.demo-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem}
.demo-heading h2{margin:3rem 0 0;font-size:clamp(4rem,8.5vw,9.5rem);font-weight:260;line-height:.94;letter-spacing:-.055em}
.mode{display:flex;align-items:center;gap:.6rem;color:var(--t3);font:500 .6rem Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.mode i{width:.45rem;height:.45rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 .25rem rgba(143,191,159,.12)}
.console{margin-top:5rem;border:1px solid var(--line-2);background:var(--surface)}
.console-bar{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line-2);color:var(--t3);font:500 .57rem Mono,monospace;letter-spacing:.07em}
.console-body{display:grid;grid-template-columns:1.25fr .75fr}
.stages{padding:1rem 1.5rem}
.stages article{display:grid;grid-template-columns:2rem 1fr 2rem;gap:1rem;padding:1.2rem .5rem;border-bottom:1px solid var(--line);opacity:.4;transition:.3s var(--ease)}
.stages article.active{opacity:1;background:rgba(200,190,158,.08)}
.stages article.done{opacity:1}
.stages>article>span,.stages>article>b{color:var(--accent);font:600 .6rem Mono,monospace}
.stages h3{margin:0;font-size:1rem}
.stages small{display:block;margin-top:.25rem;color:var(--t3);font:500 .56rem Mono,monospace;text-transform:uppercase}
.stages p{color:var(--t2);font-size:.8rem;line-height:1.5}
.decision{display:flex;flex-direction:column;padding:2rem;border-left:1px solid var(--line-2)}
.decision>h3{margin:1.4rem 0 .2rem;font-size:clamp(2rem,3vw,3.5rem);font-weight:280;letter-spacing:-.04em}
.confidence{color:var(--accent);font:500 .65rem Mono,monospace}
.decision dl{margin:2rem 0;border-top:1px solid var(--line)}
.decision dl div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.75rem}
.decision dt{color:var(--t3)}
.decision dd{margin:0;text-align:right;text-transform:capitalize}
.citations{display:flex;flex-wrap:wrap;gap:.4rem}
.citations span{width:100%;color:var(--t3);font:500 .56rem Mono,monospace;text-transform:uppercase}
.citations code{padding:.4rem;border:1px solid var(--line-2);color:var(--t2);font:500 .57rem Mono,monospace}
.decision>.button{margin-top:auto;width:100%}
.gate-lock{margin-top:auto;display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid rgba(200,190,158,.32);background:rgba(200,190,158,.09)}
.gate-lock>b{color:var(--accent);font-size:1.7rem}
.gate-lock strong,.gate-lock small{display:block}
.gate-lock strong{font-size:.75rem}
.gate-lock small{margin-top:.25rem;color:var(--t2);font-size:.65rem;line-height:1.4}

/* Tamper evidence */
.proof{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center;margin-top:8rem}
.proof>div:first-child{position:relative}
.proof .proof-art{position:absolute;left:50%;top:50%;z-index:0;width:min(46rem,150%);transform:translate(-50%,-50%);opacity:.3;mix-blend-mode:screen;pointer-events:none;mask-image:radial-gradient(closest-side,#000 25%,transparent 78%)}
.proof h3{position:relative;z-index:1;font-size:clamp(2.5rem,4vw,5rem);font-weight:280;line-height:1;letter-spacing:-.05em}
.proof h3 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.proof>div:first-child>p:last-child{position:relative;z-index:1;color:var(--t2);line-height:1.7}
.integrity{padding:2rem;border:1px solid var(--line-2);background:var(--surface);transition:.4s var(--ease)}
.integrity.tampered{border-color:#5E3A34;background:#241614}
.integrity h4{display:flex;align-items:center;gap:.8rem;margin:0;padding-bottom:2rem;color:var(--green);font-size:clamp(2.5rem,5vw,5.8rem);letter-spacing:-.05em}
.integrity h4 i{width:1rem;height:1rem;border-radius:50%;background:currentColor}
.integrity.tampered h4{color:var(--red)}
.integrity>div{display:grid;grid-template-columns:8rem 1fr auto;gap:1rem;align-items:center;padding:1.1rem 0;border-top:1px solid var(--line)}
.integrity>div span{color:var(--t3);font-size:.7rem}
.integrity code{font:500 .66rem Mono,monospace}
.integrity>div b{color:var(--green);font:600 .56rem Mono,monospace}
.integrity.tampered>div:nth-of-type(2) b{color:var(--red)}
.integrity footer{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
.integrity button,.integrity a{padding:0;border:0;background:none;color:var(--accent);font:600 .6rem Mono,monospace;text-transform:uppercase;cursor:pointer}
.integrity button:disabled{color:var(--t3);cursor:not-allowed}

/* Evidence */
.evidence-heading,.docs-heading{display:grid;grid-template-columns:.25fr 1fr .5fr;gap:4vw;align-items:end}
.evidence-heading h2,.docs-heading h2{font-size:clamp(4rem,8vw,9rem)}
.evidence-heading>p:last-child{color:var(--p2);line-height:1.6}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:7rem;border-top:1px solid var(--line-paper);border-left:1px solid var(--line-paper)}
.metrics article{min-height:14rem;padding:2rem;border-right:1px solid var(--line-paper);border-bottom:1px solid var(--line-paper)}
.metrics strong{font-size:clamp(3rem,5.3vw,6rem);font-weight:260;letter-spacing:-.06em}
.metrics h3{font:600 .65rem Mono,monospace;text-transform:uppercase}
.metrics p{margin-top:2rem;color:var(--p3);font-size:.8rem}
.honesty{display:grid;grid-template-columns:.45fr repeat(3,1fr);gap:2rem;margin-top:7rem;padding-top:2rem;border-top:1px solid var(--line-paper)}
.honesty>.eyebrow{margin:0;color:#7A6B45}
.honesty h3{margin:0;font-size:1.2rem;font-weight:450}
.honesty article p{color:var(--p2);font-size:.85rem;line-height:1.6}

/* Documentation */
.docs{background:var(--surface)}
.docs-heading>p:last-child{color:var(--t2);line-height:1.6}
.accordion{margin-top:6rem;border-top:1px solid var(--line-2)}
.accordion details{border-bottom:1px solid var(--line-2)}
.accordion summary{list-style:none;display:grid;grid-template-columns:5rem 1fr 2rem;align-items:center;padding:1.5rem 0;cursor:pointer}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary span{color:var(--accent);font:600 .6rem Mono,monospace}
.accordion summary h3{margin:0;font-size:clamp(1.2rem,2vw,2rem);font-weight:350}
.accordion summary i{font-style:normal;font-size:1.5rem;transition:transform .4s var(--ease)}
.accordion details[open] summary i{transform:rotate(45deg)}
.accordion details>div{display:grid;grid-template-columns:1fr .7fr;gap:5vw;padding:0 3rem 2rem 5rem}
.accordion details p{margin:0;color:var(--t2);line-height:1.7}
.accordion details code{color:var(--accent);font:500 .65rem/1.6 Mono,monospace}
.contracts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6rem;border:1px solid var(--line-2)}
.contracts>div{min-height:10rem;display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;border-right:1px solid var(--line-2)}
.contracts>div:last-child{border-right:0}
.contracts span{color:var(--t3);font:500 .56rem Mono,monospace;text-transform:uppercase}
.contracts strong,.contracts code{margin-top:1rem}
.contracts code{font-family:Mono,monospace}
.contracts small{margin-top:.3rem;color:var(--t3)}
.contracts a{margin-top:auto;color:var(--accent);font:600 .58rem Mono,monospace;text-transform:uppercase}

/* Closing */
.closing{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(84,94,84,.5),transparent 42%)}
.closing-mark{width:7rem}
.closing h2{font-size:clamp(3.3rem,7vw,8rem);font-weight:260;line-height:.9;letter-spacing:-.06em}
.closing h2 em{font-family:Inter,sans-serif;font-style:normal;color:var(--accent)}
.closing-copy{color:var(--t2)}
.team{display:grid;grid-template-columns:repeat(3,1fr);width:min(70rem,100%);margin-top:4rem;border-block:1px solid var(--line)}
.team>div{padding:1.5rem;text-align:left;border-right:1px solid var(--line)}
.team>div:last-child{border-right:0}
.team span{display:block;color:var(--t3);font:500 .56rem Mono,monospace;text-transform:uppercase}
.team strong,.team small{display:block}
.team strong{margin-top:1rem}
.team a{color:inherit;text-decoration:none}
.team a:hover{text-decoration:underline;text-underline-offset:.25em}
.team .member-links{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.team small{margin-top:.3rem;color:var(--t3)}

.page-footer{position:relative;display:flex;justify-content:space-between;gap:1rem;padding:1.5rem clamp(1.2rem,5.5vw,6.5rem);border-top:1px solid var(--line);color:var(--t3);font:500 .56rem Mono,monospace;text-transform:uppercase}

/* 5. Scroll choreography -------------------------------------------------- */
:root{--page-progress:0;--hero-shift:0px;--closing-shift:34px}
[data-scroll-section]{--section-progress:0;--section-shift:0px;position:relative}

.progress-rail{position:fixed;z-index:30;right:1.1rem;top:50%;width:2.6rem;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--t1);mix-blend-mode:difference}
.progress-track{position:absolute;right:.15rem;top:0;bottom:0;width:1px;background:rgba(255,255,255,.2)}
.progress-track i{position:absolute;left:0;top:0;width:1px;height:calc(var(--page-progress) * 100%);background:#fff}
.progress-rail>p{position:absolute;right:1.2rem;top:-.25rem;display:flex;align-items:center;gap:.7rem;margin:0;white-space:nowrap;transform:rotate(-90deg) translateX(-100%);transform-origin:right top;font:500 .53rem Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.progress-rail>p span{opacity:.6}
.progress-rail>p b{font-weight:500}
.progress-rail nav{display:flex;flex-direction:column;gap:.68rem;margin-left:auto}
.progress-rail nav a{position:relative;z-index:2;width:.42rem;height:.42rem;border:1px solid currentColor;border-radius:50%;background:var(--ink-deep);transition:transform .3s var(--ease),background .3s var(--ease)}
.progress-rail nav a.active{background:#fff;transform:scale(1.45)}

/* Zooms out and sinks as the hero leaves, so the next scene covers it instead of
   the page sitting still between the two. */
.mega-word{transform:translate3d(var(--hero-shift),var(--hero-word-lift,0px),0) scale(var(--hero-word-scale,1)) scaleX(1.03);transform-origin:50% 0;will-change:transform}
.hero-copy{transform:translate3d(0,var(--section-shift),0)}
.hero-side{transform:translate3d(0,var(--hero-side-shift,0px),0)}

/* No drop-shadow here: it forces the whole 8-child subtree to re-filter every frame. */
.logo-stage{position:absolute;left:50%;top:50%;width:min(47rem,58vw);aspect-ratio:1.25/1;transform:translate(-50%,-50%)}
.logo-piece{position:absolute;inset:0;overflow:hidden;transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(var(--rot,0deg)) scale(var(--piece-scale,1));transform-origin:center;will-change:transform,opacity;filter:blur(var(--piece-blur,0px));opacity:var(--piece-opacity,1)}
.logo-piece img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.logo-piece.p1{clip-path:polygon(0 0,50% 0,50% 27%,0 27%)}
.logo-piece.p2{clip-path:polygon(50% 0,100% 0,100% 27%,50% 27%)}
.logo-piece.p3{clip-path:polygon(0 27%,34% 27%,34% 58%,0 58%)}
.logo-piece.p4{clip-path:polygon(34% 27%,68% 27%,68% 58%,34% 58%)}
.logo-piece.p5{clip-path:polygon(68% 27%,100% 27%,100% 58%,68% 58%)}
.logo-piece.p6{clip-path:polygon(0 58%,42% 58%,42% 100%,0 100%)}
.logo-piece.p7{clip-path:polygon(42% 58%,73% 58%,73% 100%,42% 100%)}
.logo-piece.p8{clip-path:polygon(73% 58%,100% 58%,100% 100%,73% 100%)}

.problem-list [data-scrub-row]{transform:translate3d(var(--row-shift,0px),0,0);filter:blur(var(--row-blur,0px));opacity:var(--row-opacity,1);will-change:transform,filter}
.solution .center-heading h2{transform:translate3d(var(--section-shift),0,0)}
.agent-map{--orbit-turn:0deg;--orbit-inner-turn:0deg}
.agent-map:before{transform:translate(-50%,-50%) rotate(var(--orbit-turn))}
.agent-map:after{transform:translate(-50%,-50%) rotate(var(--orbit-inner-turn))}
.agent{transform:translate3d(var(--agent-x,0px),var(--agent-y,0px),0);will-change:transform}
.core{box-shadow:0 0 var(--core-glow,0px) rgba(200,190,158,.34)}

.steps [data-trust-step]{position:relative;opacity:var(--step-opacity,.38);transform:translate3d(var(--step-shift,20px),0,0);transition:opacity .25s var(--ease)}
.steps [data-trust-step].scroll-active{--step-opacity:1}
.steps [data-trust-step]>span{position:relative;z-index:2;background:var(--paper)}

.stages [data-stage].scroll-active:not(.done):not(.active){opacity:.86;background:rgba(200,190,158,.04)}
.demo-heading h2{transform:translate3d(var(--section-shift),0,0)}
.proof{transform:translate3d(0,var(--proof-shift,0px),0)}

.metrics [data-metric]{transform:translate3d(0,var(--metric-shift,0px),0) scale(var(--metric-scale,1));will-change:transform}
.metrics [data-metric] strong{font-variant-numeric:tabular-nums}
.accordion [data-doc-row]{opacity:var(--doc-opacity,.46);transform:translate3d(var(--doc-shift,16px),0,0);transition:opacity .25s var(--ease),border-color .25s var(--ease)}
.accordion [data-doc-row].scroll-focus{--doc-opacity:1;border-color:var(--accent)}
.closing-mark{transform:translate3d(0,var(--closing-shift),0) rotate(var(--closing-rotate,-12deg));will-change:transform}
.closing h2{transform:translate3d(0,var(--closing-title-shift,0px),0)}
.page-footer{transform:translate3d(0,var(--footer-shift,16px),0);opacity:var(--footer-opacity,.4)}

/* 6. Produx motion layer -------------------------------------------------- */

/* Masked line reveals — script.js wraps each heading line in .split-line > i */
.split-line{display:block;overflow:hidden;padding-bottom:.06em}
.split-line>i{display:block;font-style:inherit;transform:translate3d(0,110%,0);transition:transform 1.05s var(--ease);transition-delay:var(--line-delay,0ms)}
.visible .split-line>i{transform:none}

/* Pinned scene: the agent map holds while the control grid slides over it */
@media (min-width:981px){
  .agent-map{position:sticky;top:12vh;margin-bottom:12vh}
  .controls{position:relative;z-index:3;background:var(--surface)}
}

/* Orbital instrument — "02 / The system" reads as a machine that is running.
   Continuous spin lives on .orbit's children; scroll-driven rotation stays on
   .agent-map's rings, so the two never fight over one transform. */
.orbit{position:absolute;inset:0;z-index:0;pointer-events:none}
.orbit i{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}

/* Fine degree scale, slow clockwise */
.orbit .dial{height:96%;background:repeating-conic-gradient(from 0deg,var(--stone-2) 0deg .35deg,transparent .35deg 5deg);
  mask-image:radial-gradient(closest-side,transparent 96.5%,#000 97%);opacity:.55;
  animation:orbit-cw 120s linear infinite}
/* Dashed mid ring, counter-clockwise */
.orbit .dashed{height:66%;border:1px dashed rgba(200,190,158,.4);animation:orbit-ccw 44s linear infinite}
/* Radar sweep — the one bright moving element */
.orbit .sweep{height:78%;background:conic-gradient(from 0deg,rgba(200,190,158,.3),transparent 22%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 42%,#000 62%,#000 99%,transparent 100%);
  animation:orbit-cw 9s linear infinite}

@keyframes orbit-cw{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbit-ccw{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes core-breathe{0%,100%{box-shadow:0 0 var(--core-glow,0px) rgba(200,190,158,.34)}50%{box-shadow:0 0 calc(var(--core-glow,0px) + 26px) rgba(200,190,158,.5)}}

/* The aperture is a video loop now — it carries its own rotation. */
.core{animation:core-breathe 5.5s ease-in-out infinite}

/* Cursor */
.cursor{position:fixed;z-index:200;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);pointer-events:none;mix-blend-mode:difference;opacity:0;transform:translate3d(var(--cx,0px),var(--cy,0px),0) scale(var(--cs,1));transition:transform .16s var(--ease),opacity .3s var(--ease)}
.cursor.on{opacity:1}
@media (pointer:coarse){.cursor{display:none}}

/* Load intro */
body:not(.loaded) .mega-word,body:not(.loaded) .hero-copy,body:not(.loaded) .hero-side,body:not(.loaded) .scroll-note{opacity:0}
body.loaded .mega-word{animation:intro-rise 1.2s var(--ease) both}
body.loaded .hero-copy{animation:intro-rise 1.1s var(--ease) .12s both}
body.loaded .hero-side{animation:intro-rise 1.1s var(--ease) .24s both}
body.loaded .scroll-note{animation:intro-fade 1s var(--ease) .5s both}
@keyframes intro-rise{from{opacity:0;transform:translate3d(0,7vh,0)}to{opacity:1;transform:none}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}

/* 7. Breakpoints ---------------------------------------------------------- */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:32vh}
  .mega-word{font-size:22vw;top:.25em}
  .hero-side{margin-top:2rem}
  .scroll-note{top:25vh}
  .brand-reveal{height:230vh}
  .split-heading{grid-template-columns:1fr}
  .split-heading>p{margin-top:1rem}
  .how,.proof{grid-template-columns:1fr}
  .sticky-copy{position:static}
  .proof .proof-art{display:none}
  .controls{grid-template-columns:repeat(2,1fr)}
  .console-body{grid-template-columns:1fr}
  .decision{min-height:30rem;border-left:0;border-top:1px solid var(--line-2)}
  .evidence-heading,.docs-heading{grid-template-columns:1fr}
  .honesty{grid-template-columns:1fr 1fr}
  .honesty>.eyebrow{grid-column:1/-1}
  .contracts{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .header{height:4.4rem;padding:0 1.2rem}
  .brand span,.header-cta{display:none}
  .brand{font-size:.9rem}
  .menu{display:block;margin-left:auto}
  .header nav{display:none;position:absolute;top:4.2rem;left:1rem;right:1rem;flex-direction:column;padding:1.2rem;background:var(--surface);border:1px solid var(--line-2)}
  .header nav.open{display:flex}
  .pad{padding:5rem 1.2rem}
  .hero{padding:29vh 1.2rem 2.5rem;min-height:auto}
  .hero h1{font-size:15vw}
  .hero-side>p{font-size:.9rem}
  .mega-word{font-size:23vw;top:.6em}
  .scroll-note{top:22vh}
  .actions{flex-direction:column;align-items:flex-start}
  .brand-reveal{height:200vh}
  .reveal-caption{padding:5rem 1.2rem}
  .reveal-caption small{display:none}
  .logo-stage{width:84vw}
  .ticker div{font-size:14vw}
  .split-heading h2,.center-heading h2,.demo-heading h2,.evidence-heading h2,.docs-heading h2{font-size:16vw}
  .problem-list{margin-top:4rem}
  .problem-list article{grid-template-columns:2rem 1fr;min-height:0}
  .problem-list article p{grid-column:2}
  .problem-list [data-scrub-row]{filter:none}
  .agent-map{height:44rem}
  .agent-map:before{width:130%}
  .agent-map:after{width:80%}
  .agent-map .gate-art{width:118%}
  .core{width:8.5rem;height:8.5rem}
  .agent{width:8.6rem;height:3.7rem;padding:.65rem}
  .a1{left:0;top:14%}.a2{left:0;top:38%}.a3{left:0;bottom:12%}
  .a4{right:0;bottom:12%}.a5{right:0;top:38%}.a6{right:0;top:14%}
  .controls{grid-template-columns:1fr}
  .controls article{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .steps{margin-top:3rem}
  .steps:before{left:.7rem}
  .steps article{grid-template-columns:2rem 1fr}
  .demo-heading{flex-direction:column;align-items:flex-start}
  .console-bar{flex-direction:column}
  .stages{padding:.7rem}
  .stages article{grid-template-columns:1.5rem 1fr 1.5rem;gap:.6rem}
  .decision{padding:1.2rem}
  .proof{margin-top:5rem}
  .integrity{padding:1rem}
  .integrity>div{grid-template-columns:1fr auto}
  .integrity code{grid-column:1/-1;grid-row:2}
  .integrity footer{flex-direction:column;align-items:flex-start;gap:.9rem}
  .metrics{grid-template-columns:1fr 1fr}
  .metrics article{min-height:12rem;padding:1.2rem}
  .honesty{grid-template-columns:1fr}
  .accordion{margin-top:4rem}
  .accordion summary{grid-template-columns:2rem 1fr 1.5rem}
  .accordion details>div{grid-template-columns:1fr;padding:0 0 2rem 2rem}
  .accordion [data-doc-row]{transform:none}
  .contracts{grid-template-columns:1fr}
  .contracts>div{min-height:0;border-right:0;border-bottom:1px solid var(--line-2)}
  .team{grid-template-columns:1fr}
  .team>div{border-right:0;border-bottom:1px solid var(--line)}
  .page-footer{flex-direction:column;align-items:center;text-align:center;padding-bottom:2.4rem}
  .progress-rail{left:0;right:0;top:auto;bottom:0;width:100%;height:3px;display:block;transform:none;background:rgba(255,255,255,.18)}
  .progress-track{inset:0;width:auto}
  .progress-track i{width:calc(var(--page-progress) * 100%);height:3px}
  .progress-rail>p,.progress-rail nav{display:none}
}

/* 8. Reduced motion ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  :root{--hero-shift:0px!important;--closing-shift:0px!important;--hero-zoom:1!important;--hero-veil:0!important}
  .hero:after{transform:none!important}
  .reveal{opacity:1;transform:none}
  .progress-rail,.cursor,.orbit .sweep{display:none}
  .agent-map{position:static}
  .orbit i,.core{animation:none!important}
  .split-line>i{transform:none!important}
  body:not(.loaded) .mega-word,body:not(.loaded) .hero-copy,body:not(.loaded) .hero-side,body:not(.loaded) .scroll-note{opacity:1}
  .logo-piece{--tx:0px!important;--ty:0px!important;--rot:0deg!important;--piece-scale:1!important;--piece-blur:0px!important;--piece-opacity:1!important}
  .problem-list [data-scrub-row],.agent,.steps [data-trust-step],.metrics [data-metric],.accordion [data-doc-row],.closing-mark,.closing h2,.page-footer{transform:none!important;filter:none!important;opacity:1!important}
  .ticker div{animation:none}
}