/* Archeron Technologies, site stylesheet v2.
   Dark, single look. Every colour is a token on :root. No third-party requests. */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/space-grotesk-400-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-400-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --ink:#03060D;
  --ground:#060B17;
  --navy:#080F20;
  --panel:#0A1326;
  --panel-2:#0D1830;
  --line:rgba(150,175,220,.12);
  --line-2:rgba(150,175,220,.24);
  --text:#EAF0F8;
  --soft:#BAC6D8;
  --muted:#8C99B0;
  --dim:#5A667E;
  --mint:#4EFFB8;
  --mint-2:#2FD497;
  --mint-a:rgba(78,255,184,.10);
  --mint-b:rgba(78,255,184,.22);
  --ice:#7CCBFF;
  --ice-a:rgba(124,203,255,.10);
  --ice-b:rgba(124,203,255,.24);
  --violet:#C2A8FF;
  --violet-a:rgba(194,168,255,.10);
  --violet-b:rgba(194,168,255,.24);
  --acc:var(--mint);
  --acc-a:var(--mint-a);
  --acc-b:var(--mint-b);
  --shade:rgba(3,6,13,.86);
  --f-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1280px;
  --gut:clamp(16px,4vw,40px);
  --hdr:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
.acc-ice{--acc:var(--ice);--acc-a:var(--ice-a);--acc-b:var(--ice-b)}
.acc-violet{--acc:var(--violet);--acc-a:var(--violet-a);--acc-b:var(--violet-b)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--mint);color:var(--ink);padding:10px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;padding:clamp(88px,11vw,168px) 0}
.sec-tight{padding:clamp(64px,8vw,112px) 0}
.sec-line{border-top:1px solid var(--line)}
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.split-even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-c{align-items:center}
@media (max-width:1020px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.split,.split-even{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ---------- Type ---------- */
.display{font-family:var(--f-display);font-weight:500;font-size:clamp(2.75rem,1.2rem + 6vw,6.6rem);line-height:.96;letter-spacing:-.04em}
.h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.5rem,1.35rem + 4.6vw,5.4rem);line-height:.98;letter-spacing:-.035em}
.h2{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,1.3rem + 2.9vw,3.9rem);line-height:1.02;letter-spacing:-.03em}
.h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);line-height:1.15;letter-spacing:-.015em}
.big{font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,1.1rem + 3.2vw,4.1rem);line-height:1.06;letter-spacing:-.03em;max-width:22ch}
.big em{font-style:normal;color:var(--acc)}
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:500;font-size:11.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.label a{color:var(--muted);transition:color .2s}
.label a:hover{color:var(--text)}
.label .sep{color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-a),0 0 14px var(--acc);flex:none}
.lede{font-size:clamp(1.05rem,.98rem + .35vw,1.26rem);line-height:1.55;color:var(--soft);max-width:44ch}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.mono{font-family:var(--f-mono)}
.small{font-size:15px}
.prose p+p{margin-top:1.1em}
.prose p{color:var(--soft);max-width:62ch}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,72px);max-width:880px}
.sec-head .lede{max-width:56ch}
.mt-s{margin-top:16px}.mt{margin-top:28px}.mt-l{margin-top:clamp(40px,5vw,64px)}

/* ---------- Buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:2px;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease);cursor:pointer;background:transparent;white-space:nowrap}
.btn:hover{border-color:var(--text)}
.btn-primary{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.btn-primary:hover{background:#7DFFCC;border-color:#7DFFCC}
.btn-ghost{background:rgba(3,6,13,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-text{min-height:0;padding:0;border:0;color:var(--acc)}
.btn-text:hover{border:0;color:var(--text)}
.arw{position:relative;display:inline-block;width:16px;height:1px;background:currentColor;flex:none;transition:transform .25s var(--ease)}
.arw::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
a:hover>.arw,button:hover>.arw{transform:translateX(4px)}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.hdr.is-solid,.menu-open .hdr{background:rgba(3,6,13,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.hdr-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text)}
.brand .mark{width:30px;height:auto;fill:var(--mint);flex:none}
.brand-word{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.26em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav a{position:relative;font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);padding:8px 0;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--mint)}
.nav .nav-cta{padding:10px 16px;border:1px solid var(--line-2);border-radius:2px;color:var(--text)}
.nav .nav-cta:hover{border-color:var(--mint);color:var(--mint)}
.nav .nav-cta[aria-current="page"]::after{display:none}
.menu-btn{display:none;align-items:center;gap:10px;height:40px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:2px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.menu-btn i{position:relative;display:block;width:14px;height:1px;background:currentColor}
.menu-btn i::before{content:"";position:absolute;left:0;top:-4px;width:14px;height:1px;background:currentColor;transition:transform .25s}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{top:0;transform:rotate(45deg);box-shadow:none}
.menu-btn[aria-expanded="true"] i::after{content:"";position:absolute;left:0;top:0;width:14px;height:1px;background:currentColor;transform:rotate(-45deg)}
@media (max-width:980px){
  .js .menu-btn{display:inline-flex}
  .js .nav{position:fixed;left:0;right:0;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut) 40px;background:rgba(3,6,13,.97);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
  .js .menu-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .25s var(--ease)}
  .js .nav a{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,7vw,2.4rem);letter-spacing:-.02em;text-transform:none;color:var(--text);padding:14px 0;border-bottom:1px solid var(--line)}
  .js .nav a[aria-current="page"]{color:var(--mint)}
  .js .nav a[aria-current="page"]::after{display:none}
  .js .nav .nav-cta{margin-top:28px;border:1px solid var(--mint);color:var(--mint);text-align:center;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:16px}
  .no-js .hdr{position:absolute;height:auto}
  .no-js .hdr-in{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
  .no-js .nav{flex-wrap:wrap;gap:6px 16px}
}
.menu-open{overflow:hidden}

/* ---------- Footer ---------- */
.ftr{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink),#02040A);padding:clamp(64px,8vw,104px) 0 32px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.ftr-brand .brand{margin-bottom:22px}
.ftr-tag{font-family:var(--f-display);font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.1;letter-spacing:-.02em;max-width:14ch}
.ftr-note{margin-top:14px;color:var(--muted);font-size:15px;max-width:34ch}
.ftr h2{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.ftr-col a,.ftr-col span{display:block;color:var(--soft);font-size:15px;padding:4px 0;transition:color .2s}
.ftr-col a:hover{color:var(--mint)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
@media (max-width:900px){.ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-brand{grid-column:1/-1}}
@media (max-width:480px){.ftr-top{grid-template-columns:minmax(0,1fr)}}

/* ---------- Reveal ---------- */
.rv-on .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}
.rv-on .rv-d1{transition-delay:.08s}.rv-on .rv-d2{transition-delay:.16s}.rv-on .rv-d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none}}

/* ---------- Corner ticks (HUD frame) ---------- */
.ticks{--t:var(--acc);--tl:12px;background:
  linear-gradient(var(--t),var(--t)) top left/var(--tl) 1px no-repeat,
  linear-gradient(var(--t),var(--t)) top left/1px var(--tl) no-repeat,
  linear-gradient(var(--t),var(--t)) top right/var(--tl) 1px no-repeat,
  linear-gradient(var(--t),var(--t)) top right/1px var(--tl) no-repeat,
  linear-gradient(var(--t),var(--t)) bottom left/var(--tl) 1px no-repeat,
  linear-gradient(var(--t),var(--t)) bottom left/1px var(--tl) no-repeat,
  linear-gradient(var(--t),var(--t)) bottom right/var(--tl) 1px no-repeat,
  linear-gradient(var(--t),var(--t)) bottom right/1px var(--tl) no-repeat}

/* ---------- Home hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(120% 80% at 70% 60%,#0A1730 0%,var(--ink) 62%)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media canvas{width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-media canvas.is-on{opacity:1}
.hero-static .hero-media,.no-js .hero-media{background:url('../img/hero-poster.webp') 70% 50%/cover no-repeat}
@media (prefers-reduced-motion:reduce){.hero-media{background:url('../img/hero-poster.webp') 70% 50%/cover no-repeat}.hero-media canvas{display:none}}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,13,.94) 0%,rgba(3,6,13,.72) 30%,rgba(3,6,13,.12) 58%,rgba(3,6,13,0) 72%),linear-gradient(0deg,var(--ink) 0%,rgba(3,6,13,0) 22%),linear-gradient(180deg,rgba(3,6,13,.7) 0%,rgba(3,6,13,0) 18%)}
.hero-in{padding-top:calc(var(--hdr) + 40px);padding-bottom:120px}
.hero-copy{max-width:640px;display:grid;gap:26px}
.hero-copy .lede{max-width:40ch}
.hero-hud{position:absolute;right:var(--gut);top:calc(var(--hdr) + 36px);display:grid;gap:10px;min-width:260px;padding:16px 18px;background:rgba(3,6,13,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;--t:var(--mint);--tl:8px}
.hero-hud div{display:flex;justify-content:space-between;gap:24px;color:var(--muted)}
.hero-hud b{font-weight:500;color:var(--text)}
.hero-hud .hud-live b{color:var(--mint)}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.scroll-cue::after{content:"";width:1px;height:36px;background:linear-gradient(var(--mint),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){
  .hero{align-items:flex-end}
  .hero-shade{background:linear-gradient(0deg,var(--ink) 0%,rgba(3,6,13,.9) 34%,rgba(3,6,13,.35) 58%,rgba(3,6,13,0) 75%),linear-gradient(180deg,rgba(3,6,13,.6) 0%,rgba(3,6,13,0) 16%)}
  .hero-in{padding-bottom:64px}
  .hero-hud,.scroll-cue{display:none}
}

/* ---------- Problem beats (scroll-driven) ---------- */
.beats-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px)}
.beats-visual{position:sticky;top:calc(var(--hdr) + 6vh);height:min(76vh,640px);align-self:start}
.beats-visual .frame{position:relative;height:100%;border:1px solid var(--line);background:radial-gradient(90% 70% at 50% 50%,#0B1630 0%,#050A15 100%);overflow:hidden}
.beats-visual svg{position:absolute;inset:0;width:100%;height:100%}
.beats-steps{display:grid}
.beat{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:40px 0;opacity:.28;transition:opacity .5s var(--ease)}
.beat.is-on{opacity:1}
.no-js .beat,.beat:focus-within{opacity:1}
.beat .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--mint)}
.beat p{color:var(--soft);max-width:38ch;font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.beat .h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem)}
.bv-state{opacity:0;transition:opacity .7s var(--ease)}
.bv-state.is-on{opacity:1}
.no-js .bv-state[data-state="0"]{opacity:1}
.bv-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;fill:var(--muted)}
.bv-tag-hi{fill:var(--text)}
.bv-alarm{fill:#FF6B5B;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em}
.bv-ping{transform-box:fill-box;transform-origin:center;animation:ping 1.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.bv-blink{animation:blink 1.1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}
.bv-step-mark{fill:none;stroke:var(--mint);stroke-width:1}
/* Each beat carries its own picture on narrow screens (built by site.js). */
.beat-vis{display:none}
@media (max-width:860px){
  .beats-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .beats-visual{position:static;height:auto;margin-bottom:8px}
  .beats-visual .frame{height:auto;aspect-ratio:4/3}
  .has-copies .beats-visual{display:none}
  .beat-vis{display:block;margin-bottom:22px}
  .beat-vis .frame{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:radial-gradient(90% 70% at 50% 50%,#0B1630 0%,#050A15 100%);overflow:hidden}
  .beat-vis svg{position:absolute;inset:0;width:100%;height:100%}
  .beat{min-height:0;padding:28px 0 36px;opacity:1}
  .beat .h2{font-size:clamp(1.8rem,7vw,2.4rem)}
}
.answers{margin-top:clamp(56px,8vw,120px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.answers li{padding:28px 28px 8px 0;display:grid;gap:10px}
.answers li+li{padding-left:28px;border-left:1px solid var(--line)}
.answers .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.answers b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.15;letter-spacing:-.015em}
@media (max-width:860px){.answers{grid-template-columns:minmax(0,1fr)}.answers li,.answers li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* ---------- Statement ---------- */
.statement{position:relative;overflow:hidden;isolation:isolate}
.statement::before{content:"";position:absolute;inset:auto -20% -40% 30%;height:80%;background:radial-gradient(closest-side,rgba(78,255,184,.07),transparent);pointer-events:none;z-index:-1}
.statement .big{margin-top:24px}
.statement .sig{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.statement .sig b{color:var(--text);font-weight:500}

/* ---------- Product cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),var(--ground);transition:border-color .35s,transform .35s var(--ease)}
.pcard:hover{border-color:var(--acc-b);transform:translateY(-4px)}
.pcard-art{position:relative;aspect-ratio:4/3;border-bottom:1px solid var(--line);overflow:hidden;background:radial-gradient(80% 70% at 50% 60%,var(--acc-a),transparent 70%)}
.pcard-art svg{position:absolute;inset:0;width:100%;height:100%}
.pcard-body{display:grid;gap:14px;padding:26px 26px 28px;flex:1;align-content:start}
.pcard-name{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pcard-name .h3{font-size:clamp(1.7rem,1.4rem + 1vw,2.3rem);letter-spacing:-.03em}
.pcard ul{display:grid;gap:8px;margin-top:4px}
.pcard li{position:relative;padding-left:20px;color:var(--soft);font-size:15px}
.pcard li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--acc)}
.pcard .more{margin-top:auto;padding-top:12px}
.pcard .stretch::after{content:"";position:absolute;inset:0}
@media (max-width:1020px){.pcards{grid-template-columns:minmax(0,1fr)}.pcard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.pcard-art{aspect-ratio:auto;min-height:260px;border-bottom:0;border-right:1px solid var(--line)}}
@media (max-width:640px){.pcard{display:flex}.pcard-art{aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--line)}}
.art-stroke{fill:none;stroke:var(--line-2);stroke-width:1}
.art-acc{fill:none;stroke:var(--acc);stroke-width:1.2}
.art-node{fill:var(--acc)}
.art-ring{fill:none;stroke:var(--acc);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ring 3.2s var(--ease) infinite}
.art-ring.d2{animation-delay:1.06s}.art-ring.d3{animation-delay:2.12s}
@keyframes ring{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1);opacity:0}}
.art-text{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;fill:var(--muted)}

/* ---------- Pillars (why) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillar{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px) clamp(32px,3.4vw,48px);display:grid;gap:16px;align-content:start}
.pillar+.pillar{border-left:1px solid var(--line)}
.pillar .ic{width:44px;height:44px;stroke:var(--acc);fill:none;stroke-width:1.2}
.pillar p{color:var(--soft)}
.pillar .h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);letter-spacing:-.03em}
@media (max-width:860px){.pillars{grid-template-columns:minmax(0,1fr)}.pillar+.pillar{border-left:0;border-top:1px solid var(--line)}.pillar{padding-left:0;padding-right:0}}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tools b{color:var(--text);font-weight:500}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(70% 120% at 85% 100%,rgba(78,255,184,.10),transparent 60%),radial-gradient(60% 100% at 10% 0%,rgba(124,203,255,.07),transparent 60%),var(--ground)}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.cta .h2{max-width:16ch}
.cta p{margin-top:20px;color:var(--soft);max-width:46ch;font-size:1.1rem}
.cta-rings{position:absolute;z-index:0;right:-120px;top:50%;width:520px;height:520px;transform:translateY(-50%);pointer-events:none;opacity:.6}
.cta-in{position:relative;z-index:1}
@media (max-width:860px){.cta-in{grid-template-columns:minmax(0,1fr);align-items:start}.cta-rings{right:-260px;opacity:.35}}

/* ---------- Page hero (product and inner pages) ---------- */
.phero{position:relative;padding:calc(var(--hdr) + clamp(48px,8vw,112px)) 0 clamp(56px,7vw,96px);overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:-10% -10% auto auto;width:70%;height:120%;z-index:-1;background:radial-gradient(closest-side,var(--acc-a),transparent);pointer-events:none}
.phero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.phero-copy{display:grid;gap:24px}
.phero-fig{position:relative;margin:0}
.phero-fig img{width:100%;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.phero-fig figcaption{position:absolute;left:0;bottom:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.phero-simple .phero-copy{max-width:880px}
@media (max-width:860px){.phero-grid{grid-template-columns:minmax(0,1fr)}.phero-fig{max-width:460px}}
.grid-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 70% 30%,#000,transparent);mask-image:radial-gradient(70% 60% at 70% 30%,#000,transparent);opacity:.55}

/* ---------- Spec bar ---------- */
.specbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(40px,5vw,72px) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specbar div{padding:20px 20px 22px 0;display:grid;gap:6px}
.specbar div+div{padding-left:20px;border-left:1px solid var(--line)}
.specbar dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.specbar dd{margin:0;font-family:var(--f-display);font-size:1.12rem;letter-spacing:-.01em}
.specbar-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1020px){.specbar,.specbar-4{grid-template-columns:repeat(2,minmax(0,1fr))}.specbar div,.specbar div+div{padding:16px 16px 16px 0;border-left:0;border-bottom:1px solid var(--line)}.specbar div:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);counter-reset:s}
.steps li{position:relative;padding:28px 24px 8px 0;display:grid;gap:12px;align-content:start}
.steps li+li{padding-left:24px;border-left:1px solid var(--line)}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--acc)}
.steps li::after{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--acc)}
.steps li+li::after{left:24px}
.steps p{color:var(--soft);font-size:16px}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.steps,.steps-3{grid-template-columns:minmax(0,1fr)}.steps li,.steps li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}.steps li+li::after{left:0}}

/* ---------- Cards ---------- */
.card{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 50%),var(--ground);padding:clamp(22px,2.4vw,32px);display:grid;gap:14px;align-content:start;transition:border-color .3s}
.card:hover{border-color:var(--line-2)}
.card p{color:var(--soft);font-size:16px}
.card .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.kv{display:grid;gap:4px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
.kv dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.kv dd{margin:0;color:var(--soft);font-size:15.5px}

/* ---------- Figures ---------- */
.fig{margin:0;display:grid;gap:14px}
.fig .frame{position:relative;border:1px solid var(--line);background:#050A14;overflow:hidden}
.fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig figcaption{font-size:14.5px;color:var(--muted);max-width:52ch}
.fig figcaption b{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-right:10px}

/* ---------- Site list ---------- */
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.sites li{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .5vw,1.45rem);letter-spacing:-.01em}
.sites li:nth-child(3n+2),.sites li:nth-child(3n+3){padding-left:24px;border-left:1px solid var(--line)}
.sites .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--acc)}
@media (max-width:860px){.sites{grid-template-columns:minmax(0,1fr)}.sites li:nth-child(n){padding-left:0;border-left:0}}

/* ---------- Integration strip ---------- */
.strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:clamp(28px,3vw,40px);border:1px solid var(--line);background:linear-gradient(90deg,var(--acc-a),transparent 60%)}
.strip .chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line-2);border-radius:2px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
@media (max-width:860px){.strip{grid-template-columns:minmax(0,1fr)}}

/* ---------- State badges (bar language) ---------- */
.st{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.st i{display:block;width:30px;height:8px;border:1px solid var(--mint);border-radius:1px}
.st-act{color:var(--mint)}.st-act i{background:var(--mint)}
.st-check{color:var(--mint)}.st-check i{background:repeating-linear-gradient(135deg,var(--mint) 0 2px,transparent 2px 5px)}
.st-held{color:var(--soft)}.st-held i{border-color:var(--soft)}
.st-info{color:var(--ice)}.st-info i{border-color:var(--ice);border-style:dashed}

/* ---------- Operator view (Argus) ---------- */
.ov{position:relative;border:1px solid var(--line-2);background:#040812;box-shadow:0 40px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(78,255,184,.04) inset}
.ov-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ov-bar b{color:var(--text);font-weight:500}
.ov-bar .ov-mode b{color:var(--mint)}
.ov-bar .ov-mode.is-alert b{color:#FFD27A}
.ov-bar-l,.ov-bar-r{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.ov-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:520px}
.ov-map{position:relative;border-right:1px solid var(--line);background:radial-gradient(80% 80% at 50% 50%,#08132A,#040812)}
.ov-map svg{width:100%;height:100%}
.ov-feed{display:flex;flex-direction:column;min-width:0}
.ov-feed h3{padding:14px 16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.ov-list{flex:1;overflow:hidden;display:flex;flex-direction:column}
.ov-card{padding:14px 16px;border-bottom:1px solid var(--line);display:grid;gap:8px;animation:cardIn .5s var(--ease)}
.ov-card:first-child{background:linear-gradient(90deg,rgba(78,255,184,.06),transparent)}
@keyframes cardIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ov-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ov-card .t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--dim)}
.ov-card .what{font-family:var(--f-display);font-size:1.12rem;letter-spacing:-.01em}
.ov-card .what span{color:var(--muted)}
.ov-card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;font-size:13px}
.ov-card dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.ov-card dd{margin:0;color:var(--soft)}
.ov-empty{padding:18px 16px;color:var(--muted);font-size:14px}
.ov-ctrl{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-top:1px solid var(--line);align-items:center}
.ov-ctrl .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-right:6px}
.ov-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:rgba(255,255,255,.02);border:1px solid var(--line-2);border-radius:2px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ov-btn:hover{border-color:var(--mint);color:var(--text)}
.ov-btn.is-on{border-color:var(--mint);color:var(--ink);background:var(--mint)}
.ov-btn-reset{margin-left:auto}
.ov-legend{display:flex;flex-wrap:wrap;gap:10px 22px;padding:12px 16px;border-top:1px solid var(--line)}
@media (max-width:980px){.ov-body{grid-template-columns:minmax(0,1fr)}.ov-map{border-right:0;border-bottom:1px solid var(--line);aspect-ratio:800/520}.ov-list{max-height:330px}.ov-btn-reset{margin-left:0}}
@media (max-width:480px){.ov-bar-r .ov-clock{display:none}.ov-btn{flex:1 1 calc(50% - 8px);justify-content:center;padding:0 8px;font-size:10px}}
/* map elements */
.ov-grid{stroke:rgba(150,175,220,.06);stroke-width:1}
.ov-contour{fill:none;stroke:rgba(150,175,220,.12);stroke-width:1}
.ov-fence{fill:rgba(78,255,184,.025);stroke:rgba(234,240,248,.32);stroke-width:1;stroke-dasharray:5 5}
.ov-track{fill:none;stroke:rgba(234,240,248,.18);stroke-width:9;stroke-linecap:round}
.ov-track-c{fill:none;stroke:rgba(234,240,248,.32);stroke-width:1;stroke-dasharray:2 6}
.ov-bldg{fill:#0E1A33;stroke:rgba(234,240,248,.45);stroke-width:1}
.ov-tree{fill:rgba(150,175,220,.10)}
.ov-water{fill:rgba(124,203,255,.07);stroke:rgba(124,203,255,.3);stroke-width:1}
.ov-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase}
.ov-link{stroke:rgba(78,255,184,.18);stroke-width:1;transition:stroke .4s,opacity .4s}
.ov-link.is-path{stroke:var(--mint);stroke-width:1.6}
.ov-link.is-dead{stroke:rgba(255,120,100,.25);stroke-dasharray:3 5}
.ov-node .halo{fill:rgba(78,255,184,.08);stroke:rgba(78,255,184,.25);stroke-width:1;transition:fill .3s,stroke .3s}
.ov-node .core{fill:var(--mint);transition:fill .3s}
.ov-node text{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;fill:var(--dim)}
.ov-node.is-hit .halo{fill:rgba(78,255,184,.28);stroke:var(--mint)}
.ov-node.is-hit text{fill:var(--text)}
.ov-node.is-faint .halo{fill:rgba(234,240,248,.10);stroke:rgba(234,240,248,.3)}
.ov-node.is-lost .core{fill:#FF7A66}
.ov-node.is-lost .halo{fill:rgba(255,122,102,.08);stroke:rgba(255,122,102,.5);stroke-dasharray:2 3}
.ov-node.is-lost text{fill:#FF9A8A}
.ov-hub rect{fill:none;stroke:var(--mint);stroke-width:1}
.ov-hub text{font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;fill:var(--mint)}
.ov-hub{transition:transform .8s var(--ease)}
.ov-ripple{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ovr 1.8s var(--ease) forwards}
.ov-ripple.s{stroke:var(--mint)}.ov-ripple.a{stroke:var(--ice)}.ov-ripple.w{stroke:rgba(234,240,248,.45);animation-duration:1.2s}
@keyframes ovr{from{transform:scale(.05);opacity:.95}to{transform:scale(1);opacity:0}}
.ov-packet{fill:#fff;filter:drop-shadow(0 0 4px var(--mint))}
.ov-src{fill:#FFD27A}
.ov-src-ring{fill:none;stroke:#FFD27A;stroke-width:1;opacity:.6}

/* ---------- Mesh diagram (technology) ---------- */
.mesh{border:1px solid var(--line-2);background:#040812}
.mesh-bar{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mesh-bar b{color:var(--text);font-weight:500}
.mesh-bar .bad b{color:#FF9A8A}
.mesh-stage{position:relative;aspect-ratio:900/460;background:radial-gradient(80% 90% at 50% 50%,#08132A,#040812)}
.mesh-stage svg{position:absolute;inset:0;width:100%;height:100%}
.mesh-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.mesh-foot p{font-size:14px;color:var(--muted)}
.m-link{stroke:rgba(78,255,184,.2);stroke-width:1;transition:stroke .3s}
.m-link.is-path{stroke:var(--mint);stroke-width:1.8}
.m-link.is-dead{stroke:rgba(255,122,102,.18);stroke-dasharray:3 5}
.m-node{cursor:pointer;outline:none}
.m-node .hit{fill:transparent}
.m-node .halo{fill:rgba(78,255,184,.08);stroke:rgba(78,255,184,.3);stroke-width:1;transition:fill .25s,stroke .25s}
.m-node .core{fill:var(--mint);transition:fill .25s}
.m-node text{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;fill:var(--dim);pointer-events:none}
.m-node:hover .halo,.m-node:focus-visible .halo{stroke:#fff;fill:rgba(255,255,255,.08)}
.m-node:focus-visible .halo{stroke-width:2}
.m-node.is-path .halo{fill:rgba(78,255,184,.22);stroke:var(--mint)}
.m-node.is-path text{fill:var(--text)}
.m-node.is-lost .core{fill:#FF7A66}
.m-node.is-lost .halo{fill:rgba(255,122,102,.06);stroke:rgba(255,122,102,.55);stroke-dasharray:2 3}
.m-node.is-lost text{fill:#FF9A8A}
.m-node.is-hub .halo{stroke:var(--mint);stroke-width:1.5}
.m-hub rect{fill:none;stroke:var(--mint)}
.m-hub text,.m-op text{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.16em;fill:var(--mint)}
.m-hub{transition:transform .7s var(--ease)}
.m-op rect{fill:#0B1730;stroke:rgba(234,240,248,.5)}
.m-op text{fill:var(--text)}
.m-up{stroke:var(--mint);stroke-width:1.2;stroke-dasharray:4 4;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
.m-ripple{fill:none;stroke:#FFD27A;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ovr 1.6s var(--ease) forwards}
.m-packet{fill:#fff;filter:drop-shadow(0 0 4px var(--mint))}

/* ---------- Principles list ---------- */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.principles li{padding:32px 28px 36px 0;display:grid;gap:12px;align-content:start;border-bottom:1px solid var(--line)}
.principles li:nth-child(3n+2),.principles li:nth-child(3n+3){padding-left:28px;border-left:1px solid var(--line)}
.principles .n{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;color:var(--acc)}
.principles p{color:var(--soft);font-size:16px}
@media (max-width:900px){.principles{grid-template-columns:minmax(0,1fr)}.principles li:nth-child(n){padding-left:0;border-left:0}}

/* ---------- Stack diagram ---------- */
.stack{display:grid;gap:10px}
.stack-row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:center;padding:20px 22px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(78,255,184,calc(var(--i,0)*.025)),transparent 70%),var(--ground);position:relative}
.stack-row+.stack-row::before{content:"";position:absolute;left:40px;top:-11px;width:1px;height:10px;background:var(--mint)}
.stack-row .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.stack-row b{font-family:var(--f-display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.stack-row p{color:var(--soft);font-size:15.5px}
@media (max-width:760px){.stack-row{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ---------- Theia scene ---------- */
.sea{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#050B16 0%,#071528 30%,#06101F 100%);overflow:hidden}
.sea svg{width:100%;height:auto;aspect-ratio:1200/520}
.sea-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;fill:var(--muted);text-transform:uppercase}
.sea-tag-hi{fill:var(--text)}
.sea-wave{fill:none;stroke:rgba(124,203,255,.45);stroke-width:1.2}
.sea-wave2{fill:none;stroke:rgba(124,203,255,.18);stroke-width:1}
.sea-bed{fill:#040912}
.sea-strata{fill:none;stroke:rgba(150,175,220,.10);stroke-width:1}
.sea-cable{fill:none;stroke:rgba(124,203,255,.55);stroke-width:1.6}
.sea-node .dome{fill:#0C1D33;stroke:var(--ice);stroke-width:1}
.sea-node .core{fill:var(--ice)}
.sea-node .ring{fill:none;stroke:var(--ice);stroke-width:1;opacity:0}
.sea-node.is-hit .dome{fill:#123457;stroke:#fff}
.sea-node.is-hit .core{fill:#fff}
.sea-ship{fill:#0E1D33;stroke:rgba(234,240,248,.55);stroke-width:1}
.sea-chain{stroke:rgba(255,210,122,.6);stroke-width:1;stroke-dasharray:3 3}
.sea-anchor{fill:#FFD27A}
.sea-scar{fill:none;stroke:rgba(255,210,122,.4);stroke-width:1;stroke-dasharray:2 4}
.sea-ripple{fill:none;stroke:#FFD27A;stroke-width:1}
.sea-packet{fill:#fff;filter:drop-shadow(0 0 4px var(--ice))}
.sea-shore{fill:#071224;stroke:rgba(150,175,220,.3);stroke-width:1}
.sea-call rect{fill:rgba(3,6,13,.85);stroke:var(--ice)}
.sea-call text{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;fill:var(--text)}
.sea-call .ok{fill:var(--ice)}

/* ---------- Atlas dossier ---------- */
.dossier{position:relative;border:1px solid var(--line-2);background:#040812;box-shadow:0 40px 120px -40px rgba(0,0,0,.8)}
.dos-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dos-call{padding:20px 18px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.dos-call .what{font-family:var(--f-display);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.02em;line-height:1.1}
.dos-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.dos-row .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dos-row .v{font-size:14.5px;color:var(--soft)}
.dos-wave{height:38px;width:100%;overflow:hidden;position:relative}
.dos-wave svg{height:100%;width:200%;animation:wave 9s linear infinite}
.dos-wave.slow svg{animation-duration:14s}
@keyframes wave{to{transform:translateX(-50%)}}
.dos-wave path{fill:none;stroke:var(--mint);stroke-width:1.2;vector-effect:non-scaling-stroke}
.dos-wave.ice path{stroke:var(--ice)}
.dos-out{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px}
.bars{display:grid;gap:22px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.bar-row .vis{height:22px;border:1px solid var(--acc);border-radius:2px}
.bar-row.solid .vis{background:var(--acc);width:92%}
.bar-row.hatch .vis{background:repeating-linear-gradient(135deg,var(--acc) 0 3px,transparent 3px 8px);width:68%}
.bar-row.outline .vis{width:44%;border-color:var(--soft)}
.bar-row b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);letter-spacing:-.015em;display:block}
.bar-row p{color:var(--soft);font-size:16px;margin-top:6px}
@media (max-width:640px){.bar-row{grid-template-columns:minmax(0,1fr)}}

/* ---------- Routes (partners) ---------- */
.route{gap:16px}
.route .h3{font-size:clamp(1.5rem,1.25rem + .9vw,2rem);letter-spacing:-.025em}
.chooser{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;border:1px solid var(--line-2);margin-top:clamp(28px,4vw,48px)}
.chooser fieldset{margin:0;border:0;padding:clamp(22px,2.6vw,34px);display:grid;gap:10px;border-right:1px solid var(--line)}
.chooser legend{padding:0;margin-bottom:14px;font-family:var(--f-display);font-size:1.4rem;letter-spacing:-.015em}
.opt{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s;color:var(--soft);font-size:15.5px}
.opt:hover{border-color:var(--line-2)}
.opt input{appearance:none;-webkit-appearance:none;margin:3px 0 0;width:16px;height:16px;border:1px solid var(--soft);border-radius:50%;display:grid;place-content:center;cursor:pointer}
.opt input::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);transform:scale(0);transition:transform .2s var(--ease)}
.opt input:checked{border-color:var(--mint)}
.opt input:checked::before{transform:scale(1)}
.opt:has(input:checked){border-color:var(--mint);background:var(--mint-a);color:var(--text)}
.chooser .result{padding:clamp(22px,2.6vw,34px);display:grid;gap:14px;align-content:start;background:linear-gradient(180deg,var(--mint-a),transparent 70%)}
.chooser .result p{color:var(--soft)}
@media (max-width:860px){.chooser{grid-template-columns:minmax(0,1fr)}.chooser fieldset{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- Table ---------- */
.tablewrap{overflow-x:auto;border-top:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-bottom:1px solid var(--line)}
th{font-weight:500;font-family:var(--f-display);font-size:1.08rem;letter-spacing:-.01em;width:34%}
td{color:var(--soft)}
thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500}
.cmp th[scope="col"]{width:auto}
.cmp td,.cmp th{padding-right:24px}
.cmp td:first-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);width:16%}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--f-display);font-size:clamp(1.12rem,1rem + .4vw,1.35rem);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--mint),var(--mint)) center/12px 1px no-repeat,linear-gradient(var(--mint),var(--mint)) center/1px 12px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--soft);max-width:68ch}

/* ---------- Manifesto ---------- */
.manifesto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.manifesto .big{position:sticky;top:calc(var(--hdr) + 40px)}
@media (max-width:860px){.manifesto{grid-template-columns:minmax(0,1fr)}.manifesto .big{position:static}}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.vcard{display:grid;gap:22px;padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);background:var(--ground)}
.vcard .who{font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.015em;line-height:1.2}
.vcard address{font-style:normal;display:grid;gap:8px}
.vcard address a{color:var(--mint)}
.vcard address a:hover{text-decoration:underline}
.vcard address span{color:var(--soft)}
@media (max-width:860px){.contact{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.f2{grid-template-columns:minmax(0,1fr)}}
.f{display:grid;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{width:100%;font-family:var(--f-body);font-size:16px;letter-spacing:0;text-transform:none;color:var(--text);background:#050A15;border:1px solid var(--line-2);border-radius:2px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.f select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.f textarea{min-height:150px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-a)}
.f ::placeholder{color:var(--dim)}
.hp{position:absolute;left:-9999px}
.form .note{font-size:14px;color:var(--muted)}
.form .note a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}

/* ---------- Careers ---------- */
.role{gap:16px}
.role .h3{font-size:clamp(1.45rem,1.25rem + .8vw,1.9rem);letter-spacing:-.02em}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.values li{padding:26px 22px 30px 0;display:grid;gap:10px;align-content:start}
.values li+li{padding-left:22px;border-left:1px solid var(--line)}
.values b{font-family:var(--f-display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.values p{color:var(--soft);font-size:15.5px}
@media (max-width:900px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}.values li:nth-child(n){padding:22px 16px 22px 0;border-left:0;border-bottom:1px solid var(--line)}.values li:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}}
@media (max-width:520px){.values{grid-template-columns:minmax(0,1fr)}.values li:nth-child(n){padding-left:0;border-left:0}}

/* ---------- Legal / prose page ---------- */
.legal{max-width:760px}
.legal h2{font-family:var(--f-display);font-size:1.35rem;letter-spacing:-.01em;margin:40px 0 12px}
.legal p{color:var(--soft)}
.legal a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}

/* ---------- 404 ---------- */
.lost{min-height:100vh;min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.lost-rings{position:absolute;right:-10%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translateY(-50%);z-index:-1;opacity:.7}
.lost .code{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--mint)}
.bv-ping.p1{animation-delay:.4s}.bv-ping.p2{animation-delay:.8s}.bv-ping.p3{animation-delay:1.2s}
.principles.one{grid-template-columns:minmax(0,1fr)}
.principles.one li:nth-child(n){padding:26px 0;border-left:0}
.principles.one li{grid-template-columns:48px minmax(0,1fr);column-gap:16px}
.principles.one li .n{grid-row:span 2;padding-top:6px}
.split .sec-head{margin-bottom:0}
.sea-rip{fill:none;stroke:#FFD27A;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ovr 2.2s var(--ease) forwards}
.sea-swell{animation:swell 5s linear infinite}
@keyframes swell{to{transform:translateX(-80px)}}
.sea-node .ring{transform-box:fill-box;transform-origin:center}
.sea-node.is-hit .ring{animation:ring 1.6s var(--ease) infinite;opacity:1}
.sea-call{transition:opacity .5s}
.pcard .more{justify-content:flex-start}
.phero-board img{border-radius:50%;aspect-ratio:1;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);filter:hue-rotate(85deg) saturate(.8) brightness(.9)}
.phero-board::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1px solid var(--ice-b);pointer-events:none}
.phero-board figcaption{left:50%;transform:translateX(-50%);bottom:-6px;white-space:nowrap}
@media (max-width:1180px){.hero-hud{display:none}}
@media (max-height:700px){.scroll-cue{display:none}}
.move-fig{margin:0;border:1px solid var(--line);background:linear-gradient(180deg,#071528,#050B16);position:relative}
.move-fig svg{width:100%;height:auto;aspect-ratio:2/1}
/* CAD visuals: feather the tile edges into the page */
img.cad{width:100%;height:auto;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.phero-cad img.cad{-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.fig img.cad{aspect-ratio:auto;object-fit:contain}
.cad-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(16px,2vw,28px) clamp(20px,3vw,48px);align-items:center}
.cad-grid .cad-main{grid-row:span 2}
@media (max-width:860px){.cad-grid{grid-template-columns:minmax(0,1fr)}.cad-grid .cad-main{grid-row:auto}}
img.cad-band{width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.cad-band-fig figcaption{max-width:none}
.fig img.cad-band{aspect-ratio:auto;object-fit:contain}

/* ---------- Product accents on product pages ----------
   Argus pages stay mint. Theia (acc-ice) and Atlas (acc-violet) carry their own colour on the
   page-level elements a visitor notices first. The brand mark, focus ring and nav Contact button stay mint everywhere. */
.acc-ice .btn-primary,.acc-violet .btn-primary{background:var(--acc);border-color:var(--acc)}
.acc-ice .nav a[aria-current="page"]::after,.acc-violet .nav a[aria-current="page"]::after{background:var(--acc)}
.js .acc-ice .nav a[aria-current="page"],.js .acc-violet .nav a[aria-current="page"]{color:var(--acc)}
.acc-ice .st-act,.acc-violet .st-act,.acc-ice .st-check,.acc-violet .st-check{color:var(--acc)}
.acc-ice .st-act i,.acc-violet .st-act i{background:var(--acc);border-color:var(--acc)}
.acc-ice .st-check i,.acc-violet .st-check i{background:repeating-linear-gradient(135deg,var(--acc) 0 2px,transparent 2px 5px);border-color:var(--acc)}
.acc-violet .dos-wave:not(.ice) path{stroke:var(--acc)}
.acc-ice .stack-row .k,.acc-violet .stack-row .k{color:var(--acc)}
.acc-ice .stack-row+.stack-row::before,.acc-violet .stack-row+.stack-row::before{background:var(--acc)}