/* NOERDAR site. Dark-only by design. Tokens per docs/spec section 1. */
/* Self-hosted variable fonts (latin subset, SIL OFL). No third-party requests. */
@font-face{font-family:"Inter";src:url("../fonts/inter-var-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-var-latin.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Orbitron";src:url("../fonts/orbitron-var-latin.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
:root{
  --bg-0:#04070a; --bg-1:#081014; --bg-2:#0c171b; --bg-3:#11212a;
  --panel:rgba(10,22,26,.62);
  --line:rgba(47,230,200,.14); --line-strong:rgba(47,230,200,.32); --grid:rgba(47,230,200,.05);
  --neon:#19f5b0; --teal:#2fe6c8; --ice:#4cc9f0; --blue:#2b8cff; --amber:#ffb547;
  --tx-1:#e6f2ef; --tx-2:#a3b8b3; --tx-3:#6f8682; --tx-on-neon:#02140e;
  --grad-neon:linear-gradient(90deg,#19f5b0 0%,#2fe6c8 45%,#4cc9f0 100%);
  --grad-halo:radial-gradient(60% 60% at 50% 45%,rgba(25,245,176,.18),rgba(76,201,240,.06) 45%,transparent 70%);
  --glow-xs:0 0 6px rgba(25,245,176,.55);
  --glow-sm:0 0 0 1px rgba(25,245,176,.35),0 0 12px rgba(25,245,176,.28);
  --glow-md:0 0 0 1px rgba(25,245,176,.45),0 0 24px rgba(25,245,176,.30),0 0 60px rgba(47,230,200,.12);
  --glow-ice:0 0 0 1px rgba(76,201,240,.40),0 0 22px rgba(76,201,240,.22);
  --tshadow-logo:0 0 2px #b9ffe9,0 0 10px rgba(25,245,176,.85),0 0 28px rgba(25,245,176,.45),0 0 64px rgba(47,230,200,.25);
  --f-display:"Orbitron",system-ui,sans-serif;
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-logo:clamp(2.5rem,11vw,8.5rem);
  --t-h1:clamp(2.2rem,5vw,4rem);
  --t-h2:clamp(1.8rem,3.4vw,2.8rem);
  --t-body:1.0625rem; --t-small:.875rem; --t-mono:.875rem; --t-eyebrow:.75rem;
  --r-sm:6px; --r-md:12px; --r-lg:18px;
  --gutter:16px; --max:1200px;
  --section-y:clamp(64px,8vw,112px);
  --nav-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-snap:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
@media (min-width:768px){:root{--gutter:24px}}
@media (min-width:1200px){:root{--gutter:32px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-0);color:var(--tx-2);font:400 var(--t-body)/1.65 var(--f-sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--neon)}
h1,h2,h3{color:var(--tx-1);margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
code{font-family:var(--f-mono);color:var(--neon);font-size:.92em}
.mono{font-family:var(--f-mono)}
.neon{color:var(--neon)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--lg{width:22px;height:22px}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:4px}
::selection{background:rgba(25,245,176,.3);color:#fff}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--neon);color:var(--tx-on-neon);padding:10px 14px;border-radius:var(--r-sm);font-weight:600}
.skip-link:focus{top:12px;color:var(--tx-on-neon)}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.cursor{color:var(--neon);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-sm);font:600 .95rem/1 var(--f-sans);letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .25s var(--ease),border-color .25s,background-color .25s,color .25s;white-space:nowrap}
.btn--neon{background:var(--neon);color:var(--tx-on-neon)}
.btn--neon:hover{color:var(--tx-on-neon)}
@media (hover:hover){.btn--neon:hover{box-shadow:var(--glow-md);transform:translateY(-1px)}}
.btn--neon:active{transform:scale(.98)}
.btn--ghost{background:rgba(4,7,10,.35);border-color:var(--line-strong);color:var(--tx-1)}
.btn--ghost:hover{border-color:var(--neon);color:var(--neon);box-shadow:var(--glow-sm)}
.btn--sm{min-height:44px;padding:0 16px;font-size:.875rem}
.btn--block{width:100%}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);transition:background-color .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.is-solid{background:var(--panel);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav__inner{height:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:24px}
.nav__brand{font:800 18px/1 var(--f-display);letter-spacing:.18em;color:var(--tx-1);text-shadow:0 0 12px rgba(25,245,176,.35)}
.nav__brand{display:inline-flex;align-items:center;gap:10px}
.nav__hood{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-strong),0 0 12px rgba(25,245,176,.35)}
.nav__brand:hover{color:#fff}
.nav__links{display:none;align-items:center;gap:26px;margin:0 auto}
.nav__links a{position:relative;color:var(--tx-2);font:500 14px/1 var(--f-sans);padding:8px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--neon);box-shadow:var(--glow-xs);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a.is-active{color:var(--tx-1)}
.nav__links a.is-active::after{transform:scaleX(1)}
@media (hover:hover){.nav__links a:hover{color:var(--tx-1)}.nav__links a:hover::after{transform:scaleX(1)}}
.nav__right{display:flex;align-items:center;gap:14px;margin-left:auto}
.status-pill{display:none;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--teal);padding:7px 11px;border:1px solid var(--line);border-radius:99px;background:rgba(4,7,10,.4)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:var(--glow-xs);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.nav__right .btn--ghost{display:none}
.nav__burger{width:44px;height:44px;display:grid;place-content:center;gap:6px;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--tx-1);transition:transform .3s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.sheet{position:fixed;inset:var(--nav-h) 0 0;z-index:49;background:rgba(4,7,10,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:32px var(--gutter);font-family:var(--f-mono);border-top:1px solid var(--line);overflow-y:auto}
.sheet__cmd{color:var(--teal);font-size:.9rem}
.sheet li a{display:block;padding:14px 0;color:var(--tx-1);font-size:1.05rem;border-bottom:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.sheet li a:hover{color:var(--neon)}}
@media (min-width:600px){.nav__right .btn--ghost{display:inline-flex}}
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__burger,.sheet{display:none !important}
}
@media (min-width:1100px){.status-pill{display:inline-flex}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(640px,100svh);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 40px) 0 0;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3;
  background:
    linear-gradient(180deg,rgba(4,7,10,.55) 0%,transparent 22%,transparent 62%,var(--bg-0) 100%),
    linear-gradient(90deg,rgba(4,7,10,.72) 0%,rgba(4,7,10,.55) 35%,transparent 60%),
    radial-gradient(120% 90% at 78% 55%,transparent 30%,rgba(4,7,10,.7) 80%),
    url("../img/hero.webp") 72% center/cover no-repeat,
    radial-gradient(60% 60% at 75% 50%,rgba(25,245,176,.12),transparent 70%),var(--bg-0);
  opacity:.38;transform:scale(1.04);transform-origin:70% 50%}
.hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 96% 30%,rgba(4,7,10,.55),transparent 70%)}
@media (min-width:900px){.hero__bg{opacity:.85}}
.hero__grid{position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  -webkit-mask-image:radial-gradient(80% 80% at 40% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 80% at 40% 50%,#000 30%,transparent 85%)}
.hero__scan{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.hero__wrap{position:relative;display:grid;grid-template-columns:1fr;align-items:center}
.hero__content{text-align:center;max-width:720px;margin:0 auto}
.hero__prompt{color:var(--teal);font-size:var(--t-mono);margin-bottom:22px;min-height:3.3em}
.hero__prompt .t-out{color:var(--tx-1)}
.hero__hood{width:128px;height:128px;margin:-6px auto 6px;border-radius:50%;overflow:hidden;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 52%,transparent 71%);mask-image:radial-gradient(circle at 50% 45%,#000 52%,transparent 71%)}
.hero__hood img{width:100%;height:100%;object-fit:cover;opacity:.92}
@media (min-width:1100px){.hero__hood{display:none}}
.logo-wrap{position:relative;display:inline-block}
.halo{position:absolute;left:50%;top:50%;width:min(78%,400px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:var(--grad-halo);border-radius:50%}
.halo svg{width:100%;height:100%;overflow:visible}
.halo circle{fill:none;stroke:var(--neon);stroke-width:.5;opacity:.28;stroke-dasharray:604;stroke-dashoffset:604;filter:drop-shadow(0 0 3px rgba(25,245,176,.9));animation:draw 2.2s .3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.logo{position:relative;font:800 var(--t-logo)/1 var(--f-display);letter-spacing:.06em;margin:0;padding-left:.06em;color:#d9fff3;text-shadow:var(--tshadow-logo);white-space:nowrap;outline:none}
.logo::before,.logo::after{content:attr(data-text);position:absolute;inset:0;padding-left:inherit;pointer-events:none;mix-blend-mode:screen;opacity:0;text-shadow:none}
.logo::before{color:var(--neon)}
.logo::after{color:var(--ice)}
.logo.is-glitch::before{animation:glitchA .28s steps(1) both}
.logo.is-glitch::after{animation:glitchB .28s steps(1) both}
.logo.is-glitch{animation:shake .28s steps(2) both}
@keyframes glitchA{
  0%{opacity:.9;clip-path:inset(8% 0 72% 0);transform:translateX(-3px)}
  17%{clip-path:inset(55% 0 20% 0);transform:translateX(3px)}
  34%{clip-path:inset(30% 0 52% 0);transform:translateX(-2px)}
  51%{clip-path:inset(78% 0 4% 0);transform:translateX(2px)}
  68%{clip-path:inset(12% 0 64% 0);transform:translateX(-3px)}
  85%{clip-path:inset(44% 0 38% 0);transform:translateX(1px)}
  100%{opacity:0}}
@keyframes glitchB{
  0%{opacity:.9;clip-path:inset(62% 0 14% 0);transform:translateX(3px)}
  17%{clip-path:inset(4% 0 80% 0);transform:translateX(-3px)}
  34%{clip-path:inset(70% 0 8% 0);transform:translateX(2px)}
  51%{clip-path:inset(22% 0 60% 0);transform:translateX(-2px)}
  68%{clip-path:inset(50% 0 30% 0);transform:translateX(3px)}
  85%{clip-path:inset(86% 0 2% 0);transform:translateX(-1px)}
  100%{opacity:0}}
@keyframes shake{50%{transform:translateX(1px)}}
/* dry-brush streak texture on the wordmark */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .logo{background:linear-gradient(180deg,#f2fffb 0%,#d9fff3 48%,#b8f7e2 52%,#e6fff8 100%),repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 7px,rgba(166,240,217,.25) 7px 8px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 0 1px #b9ffe9) drop-shadow(0 0 10px rgba(25,245,176,.7)) drop-shadow(0 0 30px rgba(25,245,176,.35))}
  .logo::before{-webkit-text-fill-color:var(--neon)}
  .logo::after{-webkit-text-fill-color:var(--ice)}
}
.subtitle{display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0 18px;font:600 clamp(.85rem,1.6vw,1.1rem)/1 var(--f-display);letter-spacing:.6em;color:var(--teal);padding-left:.6em}
.subtitle::before,.subtitle::after{content:"";width:40px;height:1px;background:var(--line-strong);box-shadow:0 0 6px rgba(47,230,200,.6)}
.subtitle span{margin-right:-.6em}
.tagline{color:var(--tx-2);font-size:.8rem;letter-spacing:.3em;margin-bottom:26px;text-shadow:0 0 14px #04070a,0 0 2px #04070a}
.hero__lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--tx-2);max-width:56ch;margin:0 auto 32px;text-shadow:0 0 14px #04070a,0 0 2px #04070a}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:599px){.hero__cta{flex-direction:column;align-items:stretch;max-width:320px;margin-inline:auto}.hero__cta .btn{justify-content:center}}

.hud{display:none}
@media (min-width:1100px){
  .hero__wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px}
  .hero__content{text-align:left;margin:0}
  .subtitle{justify-content:flex-start}
  .subtitle::before{display:none}
  .hero__lead{margin-left:0}
  .hero__cta{justify-content:flex-start}
  .halo{left:50%}
  .hud{display:block;justify-self:end;align-self:start;width:300px;margin-top:-24px;background:var(--panel);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 18px 14px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
}
.hud__head{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;color:var(--neon);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.hud__id{margin-left:auto;color:var(--tx-2);letter-spacing:.08em}
.bars li{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:4px 10px;margin-bottom:12px;font-size:.8rem}
.bars__k{color:var(--teal);font-size:11px;letter-spacing:.12em}
.bars__l{color:var(--tx-2)}
.bars__v{color:var(--tx-1);font-size:11px;font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:4px;background:rgba(47,230,200,.1);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--grad-neon);box-shadow:0 0 8px rgba(25,245,176,.6);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.hud__map{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.hud__k{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;color:var(--tx-2);margin:0 0 8px}
.uptime{width:100%;height:30px}
.uptime rect{fill:var(--teal);opacity:.55}
.uptime rect:last-child{fill:var(--neon);opacity:1;animation:pulse 2s ease-in-out infinite}
.hud__loc{font-size:12px;letter-spacing:.2em;color:var(--tx-2);margin:12px 0 0}

.hero__strip{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:56px;padding-bottom:28px}
.counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin:0;flex:1;max-width:900px}
.counter{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.counter dt{margin:8px 0 0}
.counter dd{margin:0;color:var(--tx-1);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.counter .inf{display:inline-block;color:var(--neon);text-shadow:var(--glow-xs)}
.counter .inf.is-pulse{animation:pulseOnce 1.2s var(--ease)}
@keyframes pulseOnce{40%{transform:scale(1.25)}}
.eyebrow-s{font:500 12px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);margin-bottom:6px}
.scroll-hint{display:none;flex-direction:column;align-items:center;gap:10px;color:var(--tx-3);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.scroll-hint i{position:relative;width:1px;height:48px;background:var(--line-strong);overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:-1px;top:-6px;width:3px;height:6px;border-radius:2px;background:var(--neon);box-shadow:var(--glow-xs);animation:travel 2s var(--ease) infinite}
@keyframes travel{to{transform:translateY(60px)}}
@media (min-width:768px){.counters{grid-template-columns:repeat(4,minmax(0,1fr))}.scroll-hint{display:flex}}

/* ---------- sections ---------- */
.section{position:relative;padding:var(--section-y) 0}
.section--alt{background:var(--bg-1)}
.section--alt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 80%)}
.section > .wrap{position:relative}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head--c{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font:500 var(--t-eyebrow)/1 var(--f-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--teal);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.eyebrow--c{justify-content:center}
.eyebrow__n{font:600 .8rem/1 var(--f-display);letter-spacing:.1em;color:var(--neon);text-shadow:var(--glow-xs)}
.h2{font-size:var(--t-h2);margin-bottom:16px}
.sub{color:var(--tx-2);font-size:1.1rem;max-width:60ch}
.sub--c{margin-left:auto;margin-right:auto;text-align:center}
.center{text-align:center;margin-top:48px}
.foot-line{color:var(--tx-3);font-size:var(--t-small);margin-top:28px}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.nd-failopen [data-reveal]{opacity:1!important;transform:none!important}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 12px/1.3 var(--f-mono);color:var(--teal);border:1px solid var(--line-strong);border-radius:99px;padding:7px 12px;text-wrap:balance;background:rgba(47,230,200,.04);transition:box-shadow .25s,border-color .25s,color .25s}
@media (hover:hover) and (pointer:fine){.chips li:hover{border-color:var(--neon);color:var(--neon);box-shadow:var(--glow-sm)}}
.chips--sm li{font-size:11px;padding:5px 10px}

/* ---------- terminal (shared) ---------- */
.term{background:rgba(5,10,12,.92);border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 40px rgba(25,245,176,.05)}
.term__bar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(17,33,42,.6);font-size:12px;color:var(--tx-3)}
.term__dots{display:flex;gap:6px}
.term__dots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--tx-3)}
.term__body{margin:0;padding:20px 22px;font-size:var(--t-mono);line-height:1.75;color:var(--tx-2);white-space:pre-wrap;min-height:21.5em}
.term__body .p{color:var(--neon)}
.term__body .o{color:var(--tx-1)}

/* ---------- whoami ---------- */
.whoami{display:grid;gap:56px}
.whoami .h2{margin-bottom:28px}
.about{margin-top:32px}
.about p{max-width:62ch}
.sig{color:var(--neon);font-size:var(--t-small);letter-spacing:.08em}
@media (min-width:900px){.whoami{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}.whoami__right{position:sticky;top:calc(var(--nav-h) + 32px)}}

/* identity card */
.idcard{position:relative;margin:0 auto;max-width:440px;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:14px}
.idcard[data-state="decrypted"]{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:var(--glow-md)}}
.corner{position:absolute;width:14px;height:14px;border-radius:0 !important;border-color:var(--neon);border-style:solid;filter:drop-shadow(0 0 3px rgba(25,245,176,.8))}
.corner.c-tl{top:-6px;left:-6px;border-width:2px 0 0 2px;border-top-left-radius:var(--r-lg)}
.corner.c-tr{top:-6px;right:-6px;border-width:2px 2px 0 0;border-top-right-radius:var(--r-lg)}
.corner.c-bl{bottom:-6px;left:-6px;border-width:0 0 2px 2px;border-bottom-left-radius:var(--r-lg)}
.corner.c-br{bottom:-6px;right:-6px;border-width:0 2px 2px 0;border-bottom-right-radius:var(--r-lg)}
.idcard__head{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.08em;color:var(--tx-3);padding:2px 4px 12px}
.idcard__head b{font-weight:500;color:var(--amber)}
.idcard[data-state="decrypted"] .idcard__head b{color:var(--neon)}
.idcard__media{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:#05090b}
.idcard__img,.idcard__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.idcard__img{filter:blur(6px) saturate(.6) brightness(.7);transform:scale(1.06)}
.js .idcard__img{filter:none;transform:none;opacity:0;transition:opacity .2s}
.js .idcard[data-state="decrypted"] .idcard__img{opacity:1}
.idcard__canvas{image-rendering:pixelated}
.idcard[data-state="decrypted"] .idcard__canvas{opacity:0}
.idcard__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);opacity:.5}
.idcard[data-state="decrypted"] .idcard__scan{opacity:.25}
.idcard__sweep{position:absolute;left:0;right:0;top:0;height:2px;background:var(--neon);box-shadow:var(--glow-md),0 -40px 40px rgba(25,245,176,.12);opacity:0;pointer-events:none}
.stamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-8deg);pointer-events:none}
.stamp span{display:block;font:600 clamp(1rem,3vw,1.35rem)/1 var(--f-mono);letter-spacing:.3em;padding:12px 10px 12px 16px;color:var(--amber);border:2px solid var(--amber);border-radius:4px;background:rgba(4,7,10,.45);text-shadow:0 0 10px rgba(255,181,71,.4);transition:opacity .4s,transform .5s var(--ease),clip-path .5s}
.idcard[data-state="decrypting"] .stamp span,.idcard[data-state="decrypted"] .stamp span{opacity:0;transform:scale(1.25);clip-path:polygon(0 0,30% 0,22% 100%,0 100%,0 0,60% 0,48% 100%,30% 100%)}
.idcard__btn{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--neon);background:rgba(4,7,10,.75);color:var(--neon);font-size:12px;letter-spacing:.18em;cursor:pointer;white-space:nowrap;transition:box-shadow .25s,opacity .3s}
.idcard__btn:hover{box-shadow:var(--glow-md)}
.idcard__hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);text-align:center;font-size:12px;color:var(--tx-2);margin:0;letter-spacing:.1em;background:rgba(4,7,10,.75);padding:2px 8px;border-radius:4px;white-space:nowrap}
.idcard:not([data-state="locked"]) .idcard__btn,.idcard:not([data-state="locked"]) .idcard__hint{opacity:0;pointer-events:none}
.no-js-hide{display:none}
html:not(.js) .idcard__btn,html:not(.js) .idcard__hint{display:none}
.idcard__data{padding:14px 6px 2px;font-size:12px;letter-spacing:.06em}
.idcard__data dl{margin:0;display:grid;gap:6px}
.idcard__data dl div{display:grid;grid-template-columns:110px 1fr}
.idcard__data dt{color:var(--tx-3)}
.idcard__data dd{margin:0;color:var(--tx-1);word-break:break-all}
.idcard__data dd.redacted{color:var(--tx-3);letter-spacing:0}
.idcard__data dd.flash{color:var(--amber)}
.idcard__re{margin-top:12px;background:none;border:0;color:var(--teal);font-size:12px;cursor:pointer;min-height:44px;padding:0}
.idcard__re:hover{color:var(--neon)}

/* ---------- services ---------- */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;isolation:isolate;transition:border-color .3s,transform .3s var(--ease),opacity .6s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(25,245,176,.10),transparent 60%)}
.card__img{position:absolute;inset:0 0 auto;width:100%;height:58%;object-fit:cover;z-index:-2;opacity:.22;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 100%);mask-image:linear-gradient(180deg,#000 10%,transparent 100%);transition:opacity .4s}
@media (hover:hover) and (pointer:fine){
  .card:hover,.js .card[data-reveal].is-in:hover{border-color:var(--line-strong);transform:translateY(-2px)}
  .card:hover::before{opacity:1}
  .card:hover .card__img{opacity:.4}
}
.card__top{display:flex;justify-content:space-between;align-items:center;color:var(--teal);margin-bottom:32px}
@media (min-width:640px){.card__top{margin-bottom:56px}}
.card__id{font-size:12px;color:var(--tx-2);letter-spacing:.1em}
.card__title{font-size:1.125rem;margin-bottom:10px}
.card__copy{font-size:.95rem;line-height:1.6;flex:1;margin-bottom:20px}
.legacy{display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:center;margin-top:16px;padding:20px 22px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:rgba(12,23,27,.5)}
.legacy p{margin:0;font-size:.95rem}
.legacy__t{color:var(--tx-1);font-weight:600}
.legacy__icon{color:var(--amber)}
.legacy__cmd{grid-column:1/-1;justify-self:start;background:none;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--teal);font-size:12px;padding:0 12px;min-height:40px;cursor:pointer}
.legacy__cmd:hover{color:var(--neon);border-color:var(--neon);box-shadow:var(--glow-sm)}
@media (min-width:768px){.legacy{grid-template-columns:auto 1fr auto}.legacy__cmd{grid-column:auto}}

/* ---------- stack ---------- */
.stack{position:relative;display:grid;gap:10px;padding-left:22px}
.stack__flow{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.stack__flow i{position:absolute;inset:0;background:linear-gradient(0deg,var(--neon),var(--ice));box-shadow:0 0 10px rgba(25,245,176,.7);transform:scaleY(0);transform-origin:bottom;transition:transform 1.6s var(--ease)}
.stack.is-in .stack__flow i{transform:scaleY(1)}
.stack__band{position:relative;display:grid;gap:14px;padding:18px 20px;background:linear-gradient(90deg,rgba(17,33,42,.65),rgba(12,23,27,.3));border:1px solid var(--line);border-radius:var(--r-md)}
.stack__band::before{content:"";position:absolute;left:-26px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--bg-0);border:2px solid var(--teal)}
.stack__label{display:flex;align-items:center;gap:12px;color:var(--tx-1);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.stack__code{font:600 .75rem/1 var(--f-display);color:var(--neon);border:1px solid var(--line-strong);border-radius:4px;padding:5px 6px}
@media (min-width:900px){.stack__band{grid-template-columns:260px 1fr;align-items:center}}

/* ---------- timeline ---------- */
.tl{position:relative}
.tl__ctrl{display:none;justify-content:flex-end;gap:10px;margin-top:-40px;margin-bottom:16px}
.tl__btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--teal);cursor:pointer;transition:color .25s,border-color .25s,box-shadow .25s,opacity .25s}
@media (hover:hover) and (pointer:fine){.tl__btn:hover:not(:disabled){color:var(--neon);border-color:var(--neon);box-shadow:var(--glow-sm)}}
.tl__btn:disabled{opacity:.35;cursor:default}
.ico--flip{transform:scaleX(-1)}
@media (min-width:768px){.tl__ctrl{display:flex}}
.tl__rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding:0 var(--gutter) 24px;scroll-padding-inline:var(--gutter)}
.tl__rail:focus-visible{outline-offset:-2px}
.tl__list{position:relative;display:flex;gap:20px;width:max-content;padding-top:36px}
.tl__list::before,.tl__list::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line-strong);pointer-events:none}
.tl__list::after{background:var(--grad-neon);box-shadow:0 0 8px rgba(25,245,176,.6);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s linear}
.tl__item{position:relative;scroll-snap-align:start;width:min(320px,80vw)}
.tl__node{position:absolute;left:0;top:-36px;width:11px;height:11px;border-radius:50%;background:var(--bg-1);border:2px solid var(--teal);box-shadow:var(--glow-xs)}
.tl__node--live{background:var(--neon);animation:pulse 2s infinite}
.tl__card{height:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column}
.tl__era{font:600 .95rem/1 var(--f-display);letter-spacing:.14em;color:var(--neon);text-shadow:var(--glow-xs);margin-bottom:8px}
.tl__years{font-size:12px;color:var(--tx-3);margin-bottom:18px}
.tl__title{font-size:1.15rem;margin-bottom:10px}
.tl__copy{font-size:.95rem;flex:1;margin-bottom:18px}
.tl__item--next{width:240px;display:flex;align-items:flex-start}
.tl__next{color:var(--teal);font-size:.9rem;margin:0}
@media (min-width:1200px){.tl__rail{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2));scroll-padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2))}}
/* vertical on small screens */
@media (max-width:767px){
  .tl__rail{overflow:visible;scroll-snap-type:none;padding:0 var(--gutter)}
  .tl__list{flex-direction:column;width:auto;padding:0 0 0 28px;gap:18px}
  .tl__list::before,.tl__list::after{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .tl__list::after{transform-origin:top;transform:scaleY(var(--p,0))}
  .tl__item,.tl__item--next{width:auto}
  .tl__node{left:-28px;top:24px}
}

/* ---------- approach ---------- */
.approach{text-align:left;overflow:hidden}
.approach::before{content:"";position:absolute;left:50%;top:0;width:900px;max-width:100%;height:600px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 30%,rgba(25,245,176,.08),transparent 70%);pointer-events:none}
.statement .grad{display:inline-block}
.statement{font-size:var(--t-h1);text-align:center;max-width:22ch;margin:0 auto 20px;line-height:1.08}
.grad{background:var(--grad-neon);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--neon)}
.flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:48px auto 72px;max-width:760px}
.flow__node{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--teal);font:500 .9rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;flex:none}
.flow__node svg{width:52px;height:52px;padding:14px;border:1px solid var(--line-strong);border-radius:50%;background:var(--bg-2);box-shadow:var(--glow-sm)}
.flow__node span{color:var(--tx-1)}
.flow__node--end svg{color:var(--tx-on-neon);background:var(--neon);border-color:var(--neon);box-shadow:var(--glow-md)}
.flow__path{flex:1;height:10px;min-width:20px;margin-bottom:24px}
.flow__path path{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.principles{display:grid;gap:36px 32px;grid-template-columns:1fr}
@media (min-width:640px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.principles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.principle{border-top:1px solid var(--line-strong);padding-top:20px;position:relative}
.principle::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:1px;background:var(--neon);box-shadow:var(--glow-xs)}
.principle__n{font:600 .8rem/1 var(--f-display);color:var(--neon);letter-spacing:.1em;margin-bottom:14px}
.principle__t{font-size:1.15rem;margin-bottom:10px}
.principle p:last-child{font-size:.95rem;margin:0}
.marquee{margin-top:96px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;color:var(--tx-3);font-size:clamp(.9rem,2vw,1.25rem);letter-spacing:.3em;white-space:nowrap}
.marquee__track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee .sep{color:var(--neon);font-weight:400;margin:0 .6em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- engage ---------- */
.modes{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.modes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mode{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px 20px;display:flex;flex-direction:column}
.mode--priority{border-color:rgba(25,245,176,.45);box-shadow:var(--glow-sm)}
.badge{position:absolute;top:18px;right:18px;font-size:10px;letter-spacing:.2em;color:var(--amber);border:1px solid rgba(255,181,71,.5);padding:5px 8px;border-radius:4px}
.mode__t{font-size:1.2rem;margin:0 0 18px}
.mode--priority .mode__t{margin-right:84px}
.mode__label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);margin-bottom:6px}
.mode__when{font-size:.95rem;color:var(--tx-1);margin-bottom:18px}
.mode__list{margin-bottom:22px;flex:1}
.mode__list li{position:relative;padding-left:20px;font-size:.92rem;margin-bottom:8px}
.mode__list li::before{content:">";position:absolute;left:0;color:var(--neon);font-family:var(--f-mono)}
.mode__foot{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--tx-3)}

/* ---------- interactive shell ---------- */
.shell-wrap{max-width:900px;margin:0 auto}
.suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.chip-btn{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);background:rgba(47,230,200,.04);color:var(--teal);font-size:12.5px;cursor:pointer;transition:all .25s}
@media (hover:hover) and (pointer:fine){.chip-btn:hover{color:var(--neon);border-color:var(--neon);box-shadow:var(--glow-sm)}}
.term--live{display:flex;flex-direction:column;height:min(460px,72svh)}
.term__out{flex:1;overflow-y:auto;padding:18px 20px 6px;font-size:var(--t-mono);line-height:1.65;color:var(--tx-2);white-space:pre-wrap;word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.term__out .l-cmd{color:var(--tx-1)}
.term__out .l-cmd::before{content:"> ";color:var(--neon)}
.term__out .l-ok{color:var(--neon)}
.term__out .l-warn{color:var(--amber)}
.term__out .l-dim{color:var(--tx-3)}
.term__in{display:flex;align-items:center;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--line)}
.term__in .p{color:var(--neon)}
.term__in input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--tx-1);font:400 16px/1.4 var(--f-mono);caret-color:var(--neon);min-height:36px}
.term__in input::placeholder{color:var(--tx-3)}
.term--live:focus-within{border-color:rgba(25,245,176,.5);box-shadow:0 30px 80px rgba(0,0,0,.5),var(--glow-sm)}
@media (min-width:768px) and (hover:hover) and (pointer:fine){.term__in input{font-size:var(--t-mono)}}

/* ---------- contact ---------- */
.contact{overflow:hidden}
.contact__amb{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 85% 60%,rgba(76,201,240,.07),transparent 70%),radial-gradient(40% 50% at 10% 20%,rgba(25,245,176,.06),transparent 70%)}
.contact__grid{display:grid;gap:48px}
@media (min-width:960px){.contact__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}
.direct{margin:36px 0 28px}
.direct__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.direct__mail{display:inline-flex;align-items:center;gap:10px;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--tx-1);min-height:44px;word-break:break-all}
.direct__mail:hover{color:var(--neon);text-shadow:var(--glow-xs)}
.direct__mail .ico{color:var(--neon)}
.direct__status{min-height:1.4em;font-size:12px;color:var(--neon);margin:8px 0 0}
.notes li{position:relative;padding-left:22px;margin-bottom:10px;font-size:.95rem}
.notes li::before{content:"//";position:absolute;left:0;color:var(--tx-3);font-family:var(--f-mono);font-size:.85em}
.avatar{position:relative;width:140px;aspect-ratio:1;margin:40px auto 0;border-radius:50%}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:.9}
.avatar__ring{position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--line-strong);box-shadow:var(--glow-sm)}
.avatar__ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:var(--neon);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:960px){.avatar{width:180px;margin-left:0}}
.panel{position:relative;background:var(--panel);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:clamp(20px,4vw,36px);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.field{margin-bottom:20px}
.field label{display:block;font:500 .85rem/1.3 var(--f-sans);color:var(--tx-1);margin-bottom:8px}
.opt{color:var(--tx-3);font-weight:400}
.field input,.field textarea,.field select{width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx-1);font:400 16px/1.5 var(--f-sans);padding:12px 14px;min-height:48px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:150px}
.field ::placeholder{color:var(--tx-3)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--neon);box-shadow:var(--glow-sm)}
.field [aria-invalid="true"]{border-color:var(--amber)}
.select{position:relative}
.select::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.field select{padding-right:40px;cursor:pointer}
.field select:has(option[value=""]:checked){color:var(--tx-3)}
.field option{background:var(--bg-2);color:var(--tx-1)}
.field__meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.count{font-size:12px;color:var(--tx-2);margin-left:auto;font-variant-numeric:tabular-nums}
.count.is-ok{color:var(--teal)}
.form__err{color:var(--amber);font-size:12.5px;margin:6px 0 0}
.form__err--top{margin:0 0 16px;padding:10px 12px;border:1px solid rgba(255,181,71,.35);border-radius:var(--r-sm);background:rgba(255,181,71,.05)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form.is-sending .btn{pointer-events:none;background:var(--bg-3);color:var(--neon);border-color:var(--line-strong);font-family:var(--f-mono);position:relative;overflow:hidden}
.form.is-sending .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(25,245,176,.25),transparent);transform:translateX(-100%);animation:shimmer 1s linear infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.tx-ok{margin:0;padding:8px 0;font-size:var(--t-mono);line-height:1.9;color:var(--tx-1);white-space:pre-wrap;outline:none}
.tx-ok .ok{color:var(--neon)}

/* ---------- footer ---------- */
.footer{position:relative;padding:72px 0 0;border-top:1px solid var(--line);background:var(--bg-0)}
.footer__grid{display:grid;gap:36px;padding-bottom:48px}
@media (min-width:860px){.footer__grid{grid-template-columns:1.2fr 1fr 1fr;align-items:start}}
.footer__mark{font:800 1.6rem/1 var(--f-display);letter-spacing:.16em;color:var(--tx-1);text-shadow:0 0 14px rgba(25,245,176,.35);margin-bottom:8px}
.footer__sub{font:600 .7rem/1 var(--f-display);letter-spacing:.6em;color:var(--teal);margin-bottom:18px}
.footer__line{color:var(--tx-2);margin:0}
.footer__nav{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 28px;font-size:13px}
.footer__nav a{color:var(--tx-2);display:inline-block;padding:6px 0}
.footer__nav a:hover{color:var(--neon)}
.footer__meta{font-size:12px;color:var(--tx-3);letter-spacing:.06em}
.footer__meta p{margin:0 0 6px}
.footer__rule{position:relative;height:1px;background:var(--line);overflow:hidden}
.footer__rule i{position:absolute;top:0;left:0;width:120px;height:1px;background:var(--neon);box-shadow:0 0 8px var(--neon);animation:rule 9s linear infinite}
@keyframes rule{from{transform:translateX(-120px)}to{transform:translateX(100vw)}}

/* ---------- boot overlay ---------- */
.boot{position:fixed;inset:0;z-index:300;background:var(--bg-0);display:flex;align-items:center;justify-content:center;padding:var(--gutter);cursor:pointer;transition:opacity .6s var(--ease)}
.boot.is-out{opacity:0;pointer-events:none}
.boot pre{margin:0;font:400 clamp(11px,2.6vw,14px)/1.8 var(--f-mono);color:var(--tx-2);white-space:pre-wrap;max-width:640px;width:100%}
.boot pre .ok{color:var(--neon)}
.boot pre .hi{color:var(--tx-1)}
.boot pre .big{color:var(--neon);text-shadow:var(--glow-xs);letter-spacing:.3em}
.boot__skip{position:absolute;right:var(--gutter);bottom:20px;font:400 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--tx-3);text-transform:uppercase}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .js [data-reveal]{transform:none;transition:opacity .15s linear}
  .halo circle{stroke-dashoffset:0}
  .marquee__track{animation:none}
  .cursor,.dot,.tl__node--live{animation:none}
  .footer__rule i{display:none}
  .bar i,.stack__flow i,.tl__list::after{transition:none}
}
@media print{.nav,.boot,.hero__grid,.term--live,.suggest,.tl__ctrl{display:none}body{background:#fff;color:#000}.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- consultant positioning (v6) ---------- */
/* hero kicker: longer text than the old IT GEEK, so tighter tracking on small screens */
.subtitle{letter-spacing:.32em;padding-left:.32em;font-size:clamp(.78rem,1.5vw,1.05rem);text-align:center}
.subtitle span{margin-right:-.32em}
@media (max-width:479px){.subtitle{letter-spacing:.2em;padding-left:.2em}.subtitle span{margin-right:-.2em}.subtitle::before,.subtitle::after{width:18px}}
.tagline{letter-spacing:.22em;text-wrap:balance}
@media (max-width:479px){.tagline{letter-spacing:.12em;font-size:.72rem}}
.hero__alt{margin:18px 0 0;font-size:12.5px;color:var(--tx-3);letter-spacing:.04em;text-shadow:0 0 14px #04070a,0 0 2px #04070a}
.hero__alt a{color:var(--teal)}
.hero__alt a:hover{color:var(--neon)}
.hero__alt code{font-size:1em}

/* nav cta: neon on desktop, steps aside once the contact form is on screen */
.nav__right .nav__cta{display:none;transition:opacity .25s,visibility .25s}
@media (min-width:600px){.nav__right .nav__cta{display:inline-flex}}
.at-contact .nav__right .nav__cta{opacity:0;visibility:hidden;pointer-events:none}
.sheet__cta{margin-top:28px;font-family:var(--f-sans)}

/* why hybrid */
.why-sec{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(25,245,176,.035),transparent 60%)}
.why{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.why{grid-template-columns:repeat(4,minmax(0,1fr))}}
.why__item{position:relative;background:rgba(12,23,27,.6);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 22px 18px}
.why__item::before{content:"";position:absolute;left:22px;top:-1px;width:40px;height:1px;background:var(--neon);box-shadow:var(--glow-xs)}
.why__top{display:flex;justify-content:space-between;align-items:center;color:var(--teal);margin-bottom:22px}
.why__n{font-size:12px;color:var(--tx-3);letter-spacing:.1em}
.why__t{font-size:1.1rem;margin-bottom:10px}
.why__item p{font-size:.95rem;margin:0}
.why__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:36px 0 0}
.why__note{font-size:12px;color:var(--tx-3);letter-spacing:.06em}

/* "discuss this" links on service cards and hire modes */
.card__cta,.mode__cta{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:12.5px;color:var(--teal);letter-spacing:.04em}
.card__cta{align-self:flex-start;margin-top:14px;padding:0 2px;border-bottom:1px solid transparent}
.card__cta .ico,.mode__cta .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.card__cta:hover,.mode__cta:hover{color:var(--neon)}
.card__cta:hover .ico,.mode__cta:hover .ico{transform:translateX(3px)}
.legacy__acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.legacy__acts .card__cta{margin-top:0}
@media (min-width:768px){.legacy__acts{grid-column:auto}}
.legacy__cmd{grid-column:auto}
.mode__cta{margin:0;padding-top:12px;border-top:1px solid var(--line);width:100%;justify-content:space-between}
.mode--priority .mode__cta{color:var(--neon)}
.center__note{margin:14px 0 0;font-size:12px;color:var(--tx-3);letter-spacing:.06em}

/* contact */
.direct{padding:18px 20px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:rgba(25,245,176,.04)}
.direct__mail{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--neon);text-shadow:var(--glow-xs)}
.field-row{display:grid;gap:0 16px;grid-template-columns:1fr}
@media (min-width:640px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form__pre{min-height:1.4em;margin:-8px 0 14px;font-size:12px;color:var(--neon)}
.form__pre:empty{display:none}
/* Cloudflare Turnstile (contact form). interaction-only: the widget box only appears when a visitor must click; the status line is ours */
.ts{margin:0 0 14px}
.ts .cf-turnstile{max-width:100%}
.ts .cf-turnstile:has(iframe){margin:0 0 8px}
.ts__status{margin:0;font-size:12px;color:var(--tx-2)}
.ts__status:empty{display:none}
.ts__status.is-ok{color:var(--neon)}
.ts .form__err a{color:inherit;text-decoration:underline}
.field select.is-preset{animation:preset 1.2s var(--ease)}
@keyframes preset{0%{border-color:var(--neon);box-shadow:var(--glow-md)}100%{border-color:var(--line);box-shadow:none}}
.footer__mail{margin:14px 0 0}
.footer__mail a{font-size:13px}

/* floating "get in contact" on phones */
.fab{display:none}
@media (max-width:599px){
  .js .fab{display:inline-flex;position:fixed;z-index:40;right:var(--sr);bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:48px;padding:0 18px;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.55),var(--glow-sm);opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  .js .fab.is-shown{opacity:1;transform:none;pointer-events:auto;visibility:visible}
}
@media (prefers-reduced-motion:reduce){
  .js .fab,.nav__right .nav__cta{transition:none}
  .js .fab{transform:none}
  .field select.is-preset{animation:none}
}
@media print{.fab{display:none!important}}
.direct{padding:16px 20px 6px}
.direct__status{margin:4px 0 0}
@media (max-width:959px){.avatar{width:110px;margin-top:28px}}

/* trust and process notes (contact + hire) */
.center__trust{margin:10px auto 0;max-width:60ch;font-size:.9rem;color:var(--tx-2)}
.trust{margin:4px 0 0;padding-left:22px;font-size:.95rem;color:var(--tx-2);position:relative}
.trust::before{content:"//";position:absolute;left:0;color:var(--tx-3);font-family:var(--f-mono);font-size:.85em}
.how{margin-top:24px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(4,7,10,.35)}
.how__list{margin:8px 0 0;padding-left:1.4em;list-style:decimal;color:var(--tx-1);font-size:.95rem}
.how__list li{margin-bottom:6px}
.how__list li::marker{color:var(--neon);font-family:var(--f-mono)}
.how__note{margin:10px 0 0;font-size:.9rem;color:var(--tx-2)}

/* ---------- availability (v9, owner-confirmed text) ---------- */
.dot--calm{background:var(--teal);animation-duration:3s}
.avail--hero{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:22px auto 0;padding:8px 14px;max-width:100%;border:1px solid var(--line);border-radius:99px;background:rgba(4,7,10,.55);font-size:12px;color:var(--tx-1);letter-spacing:.04em}
.avail--hero .avail__l{color:var(--tx-2)}
@media (max-width:599px){.avail--hero{border-radius:var(--r-md);text-align:center}}
@media (min-width:1100px){.avail--hero{display:none}}
.hud__avail{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.hud__note{margin:0;font-size:.82rem;line-height:1.5;color:var(--tx-2)}
.avail--box{margin:24px 0 0;padding:14px 18px;border:1px solid var(--line);border-left:2px solid var(--teal);border-radius:var(--r-sm);background:rgba(47,230,200,.03)}
.avail__h{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.avail--box .avail__l{margin:0;font-size:.95rem;color:var(--tx-2)}

/* ---------- whoami roles ---------- */
.roles{margin:28px 0 24px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(12,23,27,.5);max-width:62ch}
.roles__list{margin:10px 0 14px;display:grid;gap:10px}
.roles__list li{display:grid;gap:2px;padding-left:18px;position:relative;font-size:.93rem}
.roles__list li::before{content:">";position:absolute;left:0;top:0;color:var(--neon);font-family:var(--f-mono)}
.roles__r{color:var(--tx-1);font-weight:500}
.roles__c{color:var(--tx-2)}
.roles__lang{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:.9rem;color:var(--tx-1);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.roles__lang .eyebrow-s{margin:0}
.about .roles p{max-width:none}

/* ---------- services: second link ---------- */
.card__acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:14px}
.card__acts .card__cta{margin-top:0}
.card__more{display:inline-flex;align-items:center;font-size:12px;color:var(--tx-2);border-bottom:1px dashed var(--line-strong);line-height:1.2;padding:4px 0}
.card__more:hover{color:var(--neon);border-bottom-color:var(--neon)}

/* ---------- stack: full arsenal ---------- */
.arsenal{margin-top:16px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:rgba(12,23,27,.5)}
.arsenal__sum{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:center;padding:14px 20px;min-height:48px;cursor:pointer;color:var(--teal);font-size:13px;list-style:none}
.arsenal__sum::-webkit-details-marker{display:none}
.arsenal__sum:hover{color:var(--neon)}
.arsenal__hint{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3)}
.arsenal__hint::after{content:" +";color:var(--neon)}
.arsenal[open] .arsenal__hint::after{content:" -"}
.arsenal__grid{margin:0;padding:4px 20px 18px;display:grid;gap:0 32px}
@media (min-width:900px){.arsenal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.arsenal__row{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
@media (min-width:600px){.arsenal__row{grid-template-columns:190px 1fr;gap:12px}}
.arsenal__row dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);padding-top:2px}
.arsenal__row dd{margin:0;font-size:.92rem;color:var(--tx-1)}

/* ---------- zero trust (compact, one screen) ---------- */
.zt-sec{border-top:1px solid var(--line);background:radial-gradient(60% 40% at 80% 0%,rgba(76,201,240,.06),transparent 70%),linear-gradient(180deg,rgba(25,245,176,.03),transparent 40%)}
.zt-box{position:relative;padding:28px 22px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:rgba(12,23,27,.55)}
.zt-box::before{content:"";position:absolute;left:22px;top:-1px;width:96px;height:2px;background:var(--grad-neon);box-shadow:var(--glow-xs)}
@media (min-width:900px){.zt-box{padding:40px 44px}}
.zt-box__head{max-width:820px}
.zt-box__head .sub{margin-bottom:18px}
.zt-princ{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.zt-princ li{font-size:12px;letter-spacing:.06em;padding:6px 12px;border:1px solid rgba(25,245,176,.45);border-radius:999px;color:var(--neon);background:rgba(25,245,176,.05)}
.zt-pillars{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:640px){.zt-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.zt-pillars{grid-template-columns:repeat(5,minmax(0,1fr))}}
.zt-pillar{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2)}
.zt-pillar__top{display:flex;align-items:center;gap:10px;margin:0}
.zt-pillar__t{font-size:1rem;color:var(--tx-1);font-weight:600}
.zt-pillar__f{font-size:.88rem;line-height:1.45;margin:0;flex:1}
.zt-pillar__w{margin:0;font-size:11.5px;line-height:1.5;color:var(--teal)}
.zt-start{margin:18px 0 0;font-size:12.5px;color:var(--tx-2);letter-spacing:.02em}
.zt-start__k{color:var(--neon)}
.zt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:24px}
.zt-cta__note{margin:0;font-size:.92rem;color:var(--tx-2);flex:1 1 280px}
@media (max-width:599px){.zt-cta .btn{flex:1 1 100%}}

/* ---------- ai ---------- */
.ai-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ai-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ai-item{position:relative;padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}
.ai-item::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:var(--grad-neon);opacity:.7}
.ai-item__k{margin:0 0 10px;font-size:11.5px;letter-spacing:.12em;color:var(--neon)}
.ai-item__t{font-size:1.02rem;margin:0 0 8px;line-height:1.25}
.ai-item__c{margin:0;font-size:.9rem;line-height:1.55}

/* ---------- stack: vendor-neutral wall ---------- */
.vendors{display:grid;gap:20px 40px;margin-bottom:28px;padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(12,23,27,.5)}
@media (min-width:1000px){.vendors{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;padding:28px 32px}}
.vendors__k{margin:0 0 10px;color:var(--teal)}
.vendors__line{margin:0 0 10px;font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.35;font-weight:600;color:var(--tx-1)}
.vendors__copy{margin:0;font-size:.92rem}
.vendors__wall{margin:0;display:grid;gap:12px}
.vendors__g{display:grid;gap:6px}
@media (min-width:600px){.vendors__g{grid-template-columns:170px 1fr;align-items:baseline;gap:12px}}
.vendors__g dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.vendors__g dd{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.vendors__g dd span{font-size:.95rem;color:var(--tx-1);letter-spacing:.01em}

/* ---------- 2026-10-10: motto, off hours, wide SOW card ---------- */
.hud__loop{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.motto{position:relative;max-width:880px;margin:-24px auto 72px;padding:32px 24px 28px;text-align:center;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:radial-gradient(60% 120% at 50% 0%,rgba(25,245,176,.07),transparent 70%)}
.motto::before{content:"";position:absolute;left:50%;top:-1px;width:120px;height:2px;transform:translateX(-50%);background:var(--grad-neon);box-shadow:0 0 12px rgba(25,245,176,.6)}
.motto__q{margin:0}
.motto__q p{margin:0 auto;max-width:32ch;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.35;font-weight:600;color:var(--tx-1);text-wrap:balance}
.motto__c{margin-top:16px;font-size:12px;letter-spacing:.12em;color:var(--teal)}
.card--wide{grid-column:1/-1}
.card__outline{margin:4px 0 0;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:rgba(4,7,10,.45);font-size:.8125rem}
.card__outline-h{margin:0 0 10px;color:var(--teal);font-size:12px;overflow-wrap:anywhere}
.card__outline ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.card__outline li{color:var(--tx-1)}
.card__outline li::before{content:"## ";color:var(--neon)}
@media (min-width:900px){
  .card--wide{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:48px;align-items:start;
    grid-template-areas:"top outline" "title outline" "copy outline" "tags outline" "acts outline"}
  .card--wide .card__top{grid-area:top;margin-bottom:24px}
  .card--wide .card__title{grid-area:title}
  .card--wide .card__copy{grid-area:copy;max-width:62ch}
  .card--wide > .chips{grid-area:tags}
  .card--wide .card__acts{grid-area:acts}
  .card--wide .card__outline{grid-area:outline;align-self:center;margin:0}
}
@media (max-width:899px){.card--wide .card__outline{margin:4px 0 6px}}

/* ======================================================================
   2026-10-10: separate pages, global terminal console, page transitions
   ====================================================================== */
html:not(.js) .js-only{display:none !important}
html:has(dialog.console[open]){overflow:hidden}

/* page heads: the first section on every page clears the fixed nav */
.page-head-sec{padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px))}
.h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08;margin-bottom:18px;letter-spacing:-.025em}
.whoami .h1{margin-bottom:28px}
.contact .h1{font-size:clamp(2rem,3.8vw,3rem)}
.page-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:40px}
.page-next .foot-line{flex-basis:100%;margin:0 0 6px}
.page-next--c{justify-content:center;margin:64px 0 0}

/* nav: active page, terminal button */
.nav__links a[aria-current="page"]{color:var(--tx-1)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
/* the terminal is a first-class nav item (button, opens the global console) */
.nav__tl{position:relative;display:none;align-items:center;gap:7px;padding:8px 0;background:none;border:0;color:var(--tx-2);font:500 14px/1 var(--f-sans);cursor:pointer}
.js .nav__tl{display:inline-flex}
.nav__tl::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--neon);box-shadow:var(--glow-xs);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__tl:hover,.nav__tl[aria-expanded="true"]{color:var(--tx-1)}
.nav__tl:hover::after{transform:scaleX(1)}
.nav__tl-p{color:var(--neon);font-size:12.5px;letter-spacing:-.05em;text-shadow:var(--glow-xs)}
.nav__tl kbd{font:500 10.5px/1 var(--f-mono);padding:2px 5px;border:1px solid var(--line-strong);border-radius:4px;color:var(--tx-3);background:rgba(47,230,200,.05)}
@media (max-width:1199px){.nav__tl kbd{display:none}}
.page-contact .nav__right .nav__cta{display:none}
.sheet li a[aria-current="page"]{color:var(--neon)}
.sheet__term{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--tx-1);font:inherit;font-size:1.05rem;cursor:pointer}
.sheet__term:hover{color:var(--neon)}
.sheet__term-p{color:var(--neon);font-size:.85rem;letter-spacing:.04em;padding:4px 8px;border:1px solid var(--line-strong);border-radius:4px}
html:not(.js) .sheet__term{display:none}
.footer__nav a[aria-current="page"]{color:var(--neon)}
.footer__term{display:inline-block;padding:6px 0;background:none;border:0;color:var(--tx-2);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.footer__term:hover{color:var(--neon)}
html:not(.js) .footer__term{display:none}

/* home: compact why strip, teasers, motto and CTA band */
.sec-head--row{max-width:none;display:grid;gap:12px 56px;margin-bottom:36px}
.sec-head--row .h2,.sec-head--row .sub{margin:0}
@media (min-width:1000px){.sec-head--row{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end}}
.why-sec--compact{padding:clamp(56px,6vw,88px) 0}
.why-sec--compact .why__item{padding:18px 18px 16px}
.why-sec--compact .why__top{margin-bottom:14px}
.why-sec--compact .why__item p{font-size:.9rem;line-height:1.55}
.teasers{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.teasers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.teasers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.teaser{position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);color:var(--tx-2);overflow:hidden;isolation:isolate}
.teaser::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(120% 80% at 0% 0%,rgba(25,245,176,.10),transparent 60%);transition:opacity .3s}
.teaser::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad-neon);box-shadow:var(--glow-xs);transform:scaleX(.18);transform-origin:left;transition:transform .45s var(--ease)}
.teaser:hover{color:var(--tx-2)}
.teaser:focus-visible::after{transform:scaleX(1)}
@media (hover:hover){.teaser:hover{border-color:var(--line-strong)}.teaser:hover::before{opacity:1}.teaser:hover::after{transform:scaleX(1)}}
@media (hover:none){.teaser:active{border-color:var(--line-strong)}.teaser:active::after{transform:scaleX(1)}}
.js .teaser[data-reveal].is-in{transition:opacity .45s var(--ease),transform .3s var(--ease),border-color .3s}
@media (hover:hover) and (pointer:fine){.js .teaser[data-reveal].is-in:hover{transform:translateY(-3px)}}
.teaser__top{display:flex;justify-content:space-between;align-items:center;color:var(--teal);margin-bottom:18px}
.teaser__n{font:600 .8rem/1 var(--f-display);color:var(--neon);letter-spacing:.1em;text-shadow:var(--glow-xs)}
.teaser__t{font-size:1.3rem;font-weight:600;color:var(--tx-1);letter-spacing:-.01em}
.teaser__c{font-size:.95rem;line-height:1.55;flex:1}
.teaser__cmd{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--teal)}
.teaser__cmd .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
@media (hover:hover){.teaser:hover .teaser__cmd{color:var(--neon)}.teaser:hover .teaser__cmd .ico{transform:translateX(3px)}}
.home-motto{padding-top:clamp(72px,8vw,120px)}
.home-motto .motto{margin:0 auto 64px}
.cta-band{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:720px;margin:0 auto}
.cta-band__t{margin:0;font-size:var(--t-h2);font-weight:600;color:var(--tx-1);letter-spacing:-.02em;line-height:1.15}
.cta-band__s{margin:0 0 14px;color:var(--tx-2);font-size:1.05rem}
.cta-band__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:599px){.cta-band__acts{flex-direction:column;align-items:stretch;width:100%;max-width:320px}}

/* hire: how it works */
.hire-how{display:grid;gap:8px}
.how--big{margin:0;padding:28px 24px}
@media (min-width:900px){.how--big{padding:36px 40px}}
.how__steps{display:grid;gap:14px;margin:8px 0 0}
@media (min-width:900px){.how__steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.how__steps li{display:grid;align-content:start;gap:6px;padding:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2)}
.how__k{font-size:12px;letter-spacing:.14em;color:var(--neon)}
.how__t{color:var(--tx-1);font-weight:600}
.how__c{font-size:.92rem;line-height:1.55}
.how--big .how__note{margin-top:18px}
.how--big .h2{margin-bottom:12px}

/* 404 */
.nf{min-height:70svh}
.nf__wrap{max-width:860px}
.nf__term{margin:28px 0 8px}
.nf__body{min-height:0}
.nf__body .w{color:var(--amber)}
.nf__body a{color:var(--teal);border-bottom:1px dashed var(--line-strong)}
.nf__body a:hover{color:var(--neon);border-bottom-color:var(--neon)}

/* ---------- global terminal console (modal dialog, top layer) ---------- */
.console{position:fixed;inset:0;bottom:auto;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:calc(var(--nav-h) + 12px) var(--gutter) var(--gutter);border:0;background:transparent;color:inherit;overflow:hidden}
.console[open]{display:flex;align-items:flex-start;justify-content:center}
.console::backdrop{background:rgba(2,5,7,.74);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
.console__win{position:relative;width:min(920px,100%);height:min(580px,100%);display:flex;flex-direction:column;box-shadow:0 40px 120px rgba(0,0,0,.7),var(--glow-sm)}
.console[open] .console__win{animation:con-in .26s var(--ease) both}
.console[open] .console__win::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--neon);box-shadow:var(--glow-md);pointer-events:none;animation:con-scan .32s var(--ease) both}
@keyframes con-in{from{opacity:0;transform:translateY(-8px) scale(.985);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes con-scan{from{transform:translateY(0);opacity:1}to{transform:translateY(560px);opacity:0}}
.console .term__bar{gap:12px}
.console__title{flex:1;min-width:0;margin:0;font:400 12px/1.2 var(--f-mono);letter-spacing:0;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console__title span{color:var(--neon)}
.console__x{min-height:44px;min-width:44px;padding:0 10px;border:1px solid var(--line-strong);border-radius:4px;background:none;color:var(--tx-2);font-size:12px;letter-spacing:.14em;cursor:pointer}
.console__x:hover{color:var(--neon);border-color:var(--neon)}
.console .suggest{justify-content:flex-start;margin:0;padding:10px 14px;gap:6px;border-bottom:1px solid var(--line)}
.console .chip-btn{min-height:32px;padding:0 12px;font-size:12px}
@media (max-width:599px){
  .console{padding:calc(env(safe-area-inset-top,0px) + 8px) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .console__win{height:100%}
  .console .suggest{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .console .chip-btn{flex:none}
}

/* ---------- page transitions ----------
   Cross-document view transitions (Chrome, Edge, Safari). Two phases, one after the other:
   the old page glitches and collapses to a CRT line (0 to 200ms), then a neon scan bar sweeps
   down and draws the new page behind it (190 to 450ms). Nav and logo switch in one frame.
   Back/forward (html.vt-back) is shorter and sweeps up, like a rewind. The same look runs as
   a JS fallback elsewhere (html.fx-out / html.fx-in). Filters are kept off the big snapshots
   where possible: they cost a full-viewport raster per frame on phones without GPU raster. */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
.nav__brand{view-transition-name:site-brand}
.vt-fx{view-transition-name:vt-fx}
.console[open] .console__win{view-transition-name:console}

::view-transition{background:var(--bg-0)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){transform-origin:50% 50%;animation:vt-out .2s linear both}
::view-transition-new(root){animation:vt-wipe .26s .19s cubic-bezier(.25,.7,.25,1) both,vt-crt .26s .19s linear both}
/* the nav and the logo never move: no morph, no cross-fade, the new one shows at once */
::view-transition-group(site-nav),::view-transition-group(site-brand),::view-transition-new(site-nav),::view-transition-new(site-brand){animation:none}
::view-transition-old(site-nav),::view-transition-old(site-brand){display:none}
::view-transition-group(vt-fx),::view-transition-new(vt-fx){animation:none}
::view-transition-old(vt-fx){display:none}
/* a terminal command that leaves the page: the console window switches off with it */
::view-transition-group(console){animation:none}
::view-transition-old(console){transform-origin:50% 50%;animation:vt-out .18s linear both}

@keyframes vt-out{
  0%{transform:none;filter:none;clip-path:inset(0);opacity:1;animation-timing-function:steps(1,end)}
  8%{transform:translate3d(-14px,0,0);filter:brightness(1.35) saturate(1.9) hue-rotate(30deg);clip-path:inset(0);animation-timing-function:steps(1,end)}
  16%{transform:translate3d(12px,0,0) skewX(-4deg);filter:brightness(1.5) saturate(2) hue-rotate(-34deg);clip-path:inset(16% 0 30% 0);animation-timing-function:steps(1,end)}
  24%{transform:translate3d(-7px,0,0);filter:brightness(1.4);clip-path:inset(44% 0 10% 0);animation-timing-function:steps(1,end)}
  30%{transform:none;filter:brightness(1.6);clip-path:inset(0);animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  75%{transform:scale(1,.008);filter:brightness(1.6);opacity:1;clip-path:inset(0)}
  100%{transform:scale(.12,.008);filter:brightness(1.6);opacity:0;clip-path:inset(0)}
}
@keyframes vt-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-wipe-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
/* CRT settle: opacity flicker only (no filter on the full-page snapshot) */
@keyframes vt-crt{0%{opacity:.85}50%{opacity:1}66%{opacity:.8}72%{opacity:1}84%{opacity:.9}100%{opacity:1}}

/* back/forward: quick fade of the old page, the new one rewinds in from the bottom */
html.vt-back::view-transition-old(root){animation:vt-fade-out .12s linear both}
html.vt-back::view-transition-new(root){animation:vt-wipe-up .24s .1s cubic-bezier(.25,.7,.25,1) both}

/* overlay: scan bar, tear strips, collapse line, scanlines. Hidden until a transition runs. */
.vt-fx{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:0;overflow:hidden;contain:strict}
.vt-fx i{position:absolute;left:0;right:0;display:block;opacity:0}
.vt-fx__bar{top:0;height:2px;background:#dcfff4;box-shadow:0 0 6px #19f5b0,0 0 18px rgba(25,245,176,.9),0 0 40px rgba(25,245,176,.5)}
.vt-fx__bar::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:64px;background:linear-gradient(to top,rgba(25,245,176,.20),transparent)}
.vt-fx__bar::after{content:"";position:absolute;left:0;right:0;top:2px;height:20px;background:linear-gradient(to bottom,rgba(25,245,176,.18),transparent)}
html.vt-back .vt-fx__bar::before{bottom:auto;top:2px;background:linear-gradient(to bottom,rgba(25,245,176,.20),transparent)}
html.vt-back .vt-fx__bar::after{top:auto;bottom:2px;background:linear-gradient(to top,rgba(25,245,176,.18),transparent)}
.vt-fx__scan{inset:0;background:repeating-linear-gradient(0deg,rgba(25,245,176,.07) 0 1px,transparent 1px 3px)}
/* tears sit at top:0 and move by transform only: no layout per frame, no layout shift */
.vt-fx__tear{top:0;height:var(--h,14px);will-change:transform}
.vt-fx__tear--a{--h:18px;background:rgba(25,245,176,.18);box-shadow:0 0 0 1px rgba(25,245,176,.35)}
.vt-fx__tear--b{--h:9px;background:rgba(76,201,240,.2);box-shadow:0 0 0 1px rgba(76,201,240,.4)}
.vt-fx__tear--c{--h:3px;background:rgba(220,255,244,.45)}
.vt-fx__line{top:50%;height:2px;margin-top:-1px;background:#e9fff8;box-shadow:0 0 10px #19f5b0,0 0 30px rgba(25,245,176,.8)}

html.vt-in .vt-fx,html.fx-in .vt-fx,html.fx-out .vt-fx,html.vt-armed .vt-fx{opacity:1}
html.vt-in .vt-fx__tear--a,html.fx-out .vt-fx__tear--a,html.vt-armed .vt-fx__tear--a{animation:vt-tear-a .2s steps(1,end) both}
html.vt-in .vt-fx__tear--b,html.fx-out .vt-fx__tear--b,html.vt-armed .vt-fx__tear--b{animation:vt-tear-b .2s .02s steps(1,end) both}
html.vt-in .vt-fx__tear--c,html.fx-out .vt-fx__tear--c,html.vt-armed .vt-fx__tear--c{animation:vt-tear-c .16s .05s steps(1,end) both}
html.vt-in .vt-fx__line,html.fx-out .vt-fx__line{animation:vt-line .24s linear both}
html.vt-in .vt-fx__scan{animation:vt-scan .45s linear both}
html.vt-in .vt-fx__bar{animation:vt-bar .26s .19s cubic-bezier(.25,.7,.25,1) both}
html.vt-in.vt-back .vt-fx__line{animation:none}
html.vt-in.vt-back .vt-fx__scan{animation:vt-scan .34s linear both}
html.vt-in.vt-back .vt-fx__bar{animation:vt-bar-up .24s .1s cubic-bezier(.25,.7,.25,1) both}
html.fx-in .vt-fx__scan{animation:vt-scan .42s linear both}
html.fx-in .vt-fx__bar{animation:vt-bar .38s cubic-bezier(.25,.7,.25,1) both}
html.fx-out .vt-fx__bar{animation:vt-bar 1.1s .3s linear infinite}
@keyframes vt-bar{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(100vh)}}
@keyframes vt-bar-up{0%{opacity:1;transform:translateY(100vh)}90%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@keyframes vt-scan{0%{opacity:.9}100%{opacity:0}}
/* the CRT line flashes as the old page reaches it (about 150ms in) */
@keyframes vt-line{0%,55%{opacity:0;transform:scaleX(1)}65%{opacity:1;transform:scaleX(.9)}80%{opacity:1;transform:scaleX(.5)}100%{opacity:0;transform:scaleX(.04)}}
@keyframes vt-tear-a{0%{opacity:1;transform:translate3d(-18px,22vh,0)}30%{transform:translate3d(24px,61vh,0)}60%{transform:translate3d(-8px,38vh,0)}90%,100%{opacity:0;transform:translate3d(-8px,38vh,0)}}
@keyframes vt-tear-b{0%{opacity:1;transform:translate3d(20px,64vh,0)}35%{transform:translate3d(-26px,17vh,0)}70%{transform:translate3d(10px,80vh,0)}95%,100%{opacity:0;transform:translate3d(10px,80vh,0)}}
@keyframes vt-tear-c{0%{opacity:1;transform:translate3d(0,41vh,0)}40%{transform:translate3d(0,9vh,0)}75%{transform:translate3d(0,70vh,0)}100%{opacity:0;transform:translate3d(0,70vh,0)}}
/* instant click feedback on the old page while the next one loads */
.vt-armed-link{animation:vt-link .2s steps(2,end) both}
@keyframes vt-link{0%{text-shadow:-2px 0 rgba(25,245,176,.9),2px 0 rgba(76,201,240,.9)}50%{text-shadow:2px 0 rgba(25,245,176,.9),-2px 0 rgba(76,201,240,.9)}100%{text-shadow:none}}
/* entering through a transition: the scan bar is the reveal for the first screen */
html.vt-in [data-reveal],html.fx-in [data-reveal]{transition:none !important}

/* JS fallback (browsers without cross-document view transitions) */
html.fx-out main,html.fx-out .footer{animation:fx-out .3s linear both;pointer-events:none}
@keyframes fx-out{
  0%{transform:none;filter:none;clip-path:inset(0);opacity:1;animation-timing-function:steps(1,end)}
  12%{transform:translate3d(-14px,0,0);filter:brightness(1.35) saturate(1.9) hue-rotate(30deg);animation-timing-function:steps(1,end)}
  24%{transform:translate3d(12px,0,0) skewX(-4deg);filter:brightness(1.5) saturate(2) hue-rotate(-34deg);clip-path:inset(16% 0 30% 0);animation-timing-function:steps(1,end)}
  36%{transform:none;filter:brightness(1.6);clip-path:inset(0);opacity:1;animation-timing-function:ease-in}
  100%{filter:brightness(1.6);opacity:0;clip-path:inset(0)}
}
html.fx-in main{animation:fx-wipe .4s cubic-bezier(.25,.7,.25,1) both,vt-crt .4s linear both}
html.fx-in .footer{animation:vt-crt .4s linear both}
@keyframes fx-wipe{0%{clip-path:polygon(0 0,100% 0,100% 0,0 0)}99%{clip-path:polygon(0 0,100% 0,100% 100vh,0 100vh)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),html.vt-back::view-transition-old(root){animation:vt-fade-out .14s linear both}
  ::view-transition-new(root),html.vt-back::view-transition-new(root){animation:vt-fade-in .14s linear both}
  ::view-transition-old(console){animation:vt-fade-out .14s linear both}
  .vt-fx{display:none}
  .vt-armed-link{animation:none}
  html.fx-out main,html.fx-out .footer,html.fx-in main,html.fx-in .footer{animation:vt-fade-in .14s linear both}
  .console[open] .console__win,.console[open] .console__win::after{animation:none}
}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
@media print{.console,.vt-fx,.nav__tl,.footer__term{display:none !important}}

/* ---------- availability badge (hire header, ID card) ---------- */
.avail-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:9px 14px;border:1px solid rgba(25,245,176,.5);border-radius:var(--r-sm);background:rgba(25,245,176,.06);box-shadow:var(--glow-sm);font-size:12px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);text-shadow:0 0 8px rgba(25,245,176,.35)}
.avail-badge .dot{flex:none}
.avail-badge__b{color:var(--tx-1);text-shadow:none}
.avail-badge__sep{color:var(--tx-3)}
.avail-badge--hire{margin-top:22px}
@media (max-width:599px){
  .avail-badge--hire{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:10px;row-gap:4px;letter-spacing:.12em;font-size:11.5px;padding:10px 14px}
  .avail-badge--hire .dot{grid-row:1 / 3}
  .avail-badge--hire .avail-badge__sep{display:none}
  .avail-badge--hire .avail-badge__a,.avail-badge--hire .avail-badge__b{grid-column:2}
}
/* on the ID card: a rubber stamp in the top corner, on top of the canvas in every state */
.avail-badge--card{position:absolute;left:12px;top:14px;z-index:2;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;row-gap:3px;padding:8px 12px 8px 10px;font-size:11px;letter-spacing:.18em;background:rgba(4,7,10,.82);border:2px solid var(--neon);border-radius:4px;outline:1px solid rgba(25,245,176,.35);outline-offset:2px;transform:rotate(-4deg);transform-origin:left top;pointer-events:none}
.avail-badge--card .dot{grid-row:1 / 3}
.avail-badge--card .avail-badge__sep{display:none}
.avail-badge--card .avail-badge__a,.avail-badge--card .avail-badge__b{grid-column:2}
.avail-badge--card .avail-badge__b{font-size:11px;letter-spacing:.14em}

/* ---------- about: motto only ---------- */
.about-motto .motto{margin:8px auto 40px}

/* ---------- services: jump chips (sticky under the nav on small screens) ---------- */
.svc-head{padding-bottom:24px}
.svc-head .sec-head{margin-bottom:0}
.svc-body{padding-top:32px}
.jump{position:relative;z-index:30}
.jump__in{display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;flex:none;min-height:38px;padding:0 14px;border:1px solid var(--line-strong);border-radius:99px;font-size:12px;letter-spacing:.08em;color:var(--teal);background:rgba(47,230,200,.04);transition:color .25s,border-color .25s,box-shadow .25s}
.jump a::before{content:"#";margin-right:6px;color:var(--tx-3)}
@media (hover:hover) and (pointer:fine){.jump a:hover{color:var(--neon);border-color:var(--neon);box-shadow:var(--glow-sm)}}
@media (max-width:899px){
  .jump{position:sticky;top:var(--nav-h);padding:8px 0;background:rgba(4,7,10,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .jump__in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #domains,#zerotrust,#ai{scroll-margin-top:56px}
}

/* ---------- no JS: the burger cannot open the sheet, so show the links as a row ---------- */
.nav__nojs{display:none}
html:not(.js) .nav__burger{display:none}
@media (max-width:899px){
  html:not(.js) .nav__links{display:flex;flex-wrap:wrap;position:absolute;left:0;right:0;top:100%;margin:0;padding:4px var(--gutter);gap:0 18px;background:rgba(4,7,10,.94);border-bottom:1px solid var(--line)}
  html:not(.js) .nav__links a{font-size:13px;padding:8px 0}
  html:not(.js) .nav__nojs{display:inline-block}
}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible,section[tabindex="-1"]:focus-visible{outline:none}

/* ======================================================================
   2026-10-10: responsive pass (phones, tablets, landscape, notch)
   ====================================================================== */
/* safe areas: viewport-fit=cover lets the page run under a notch, so every edge keeps at least the gutter or the inset */
:root{--sl:max(var(--gutter),env(safe-area-inset-left,0px));--sr:max(var(--gutter),env(safe-area-inset-right,0px));--sb:env(safe-area-inset-bottom,0px)}
.wrap,.nav__inner{padding-left:var(--sl);padding-right:var(--sr)}
.sheet{padding:32px var(--sr) calc(32px + var(--sb)) var(--sl);overscroll-behavior:contain}
.tl__rail{padding-left:var(--sl);padding-right:var(--sr);scroll-padding-inline:var(--sl) var(--sr)}
@media (min-width:1200px){.tl__rail{padding-left:max(var(--sl),calc((100vw - var(--max)) / 2));scroll-padding-left:max(var(--sl),calc((100vw - var(--max)) / 2))}}
@media (max-width:767px){.tl__rail{padding:0 var(--sr) 0 var(--sl)}}
.footer__grid{padding-bottom:calc(48px + var(--sb))}
@media (min-width:600px){.console{padding-left:var(--sl);padding-right:var(--sr);padding-bottom:max(var(--gutter),var(--sb))}}

/* the sheet locks the page behind it (body overflow alone does not hold on iOS) */
html:has(#sheet:not([hidden])){overflow:hidden}

/* console: sized to the visible viewport (site.js sets top and height from visualViewport while open) */
@supports (height:100dvh){.console{height:100dvh}}
.console__win .term__out{min-height:0}
@media (pointer:coarse){
  .console .suggest{gap:8px}
  .console .chip-btn{min-height:44px;padding:0 14px;font-size:13px}
  .console__x{min-width:56px}
}
@media (pointer:coarse) and (min-width:600px){.console__win{height:100%;max-height:580px}}
@media (max-height:500px){
  .console{padding-top:max(8px,env(safe-area-inset-top,0px))}
  .console__win{height:100%;max-height:none}
  .console .suggest{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:6px}
  .console .chip-btn{flex:none}
}
@media (max-height:300px){.console .suggest,.console .console__title{display:none}}

/* touch: 44px targets */
@media (pointer:coarse){
  .footer__nav a,.footer__term{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .footer__mail a,.hero__alt a{display:inline-block;padding:12px 0}
  .jump a,.card__cta,.mode__cta,.legacy__cmd,.chip-btn{min-height:44px}
  .card__more{min-height:44px;padding:0;border-bottom:0;text-decoration:underline dashed var(--line-strong);text-underline-offset:4px}
  .nf__body a{display:inline-block;padding:10px 2px}
  .nav__brand{min-height:44px}
  .nav__links{gap:18px}
  .nav__links a:not(.nav__nojs),.nav__tl{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .nav__links a::after,.nav__tl::after{bottom:8px}
  .nav__tl kbd{display:none}
}
/* nothing stays under the floating contact pill at the end of a page */
@media (max-width:599px){.js body:not(.page-contact) main{padding-bottom:72px}}

/* small labels: larger on phones and touch tablets */
@media (pointer:coarse),(max-width:599px){
  .chips li{font-size:12.5px}
  .chips--sm li{font-size:12px;padding:6px 11px}
  .zt-pillar__w,.ai-item__k,.arsenal__row dt,.vendors__g dt{font-size:12.5px}
  .arsenal__hint{font-size:12px}
  .idcard__head{font-size:12px}
  .idcard__data{font-size:13px}
  .avail-badge--card{font-size:12px;letter-spacing:.14em}
  .avail-badge--card .avail-badge__b{font-size:11.5px;letter-spacing:.12em}
  .footer__sub{font-size:.75rem;letter-spacing:.4em}
}
@media (max-width:599px){.avail-badge--hire{font-size:12.5px}}
@media (max-width:399px){.idcard__head{flex-wrap:wrap;letter-spacing:.04em}.idcard__head span{white-space:nowrap}}

/* ID card: the portrait itself decrypts on tap */
.idcard[data-state="locked"] .idcard__media{cursor:pointer}

/* page-end buttons: full width on phones, primary first */
@media (max-width:599px){
  .page-next{flex-direction:column;align-items:stretch}
  .page-next .btn{width:100%}
  .page-next .foot-line{order:-2}
  .page-next .btn--neon{order:-1}
}

/* home hero: lighter image below 900px, CTAs above the fold on short phones */
@media (max-width:899px){
  .hero__bg{background:
    linear-gradient(180deg,rgba(4,7,10,.55) 0%,transparent 22%,transparent 62%,var(--bg-0) 100%),
    linear-gradient(90deg,rgba(4,7,10,.72) 0%,rgba(4,7,10,.55) 35%,transparent 60%),
    radial-gradient(120% 90% at 78% 55%,transparent 30%,rgba(4,7,10,.7) 80%),
    url("../img/hero-m.webp") 72% center/cover no-repeat,
    radial-gradient(60% 60% at 75% 50%,rgba(25,245,176,.12),transparent 70%),var(--bg-0)}
}
@media (max-width:399px),(max-height:700px) and (max-width:1099px){
  .hero{padding-top:calc(var(--nav-h) + 20px)}
  .hero__prompt{margin-bottom:10px}
  .hero__hood{width:96px;height:96px}
  .tagline{margin-bottom:18px}
  .hero__lead{margin-bottom:24px}
}
@media (max-height:500px) and (orientation:landscape){
  :root{--section-y:48px}
  .hero{min-height:auto;padding:calc(var(--nav-h) + 16px) 0 24px}
  .hero__hood,.hero__prompt,.hero .tagline,.scroll-hint{display:none}
  .logo{font-size:clamp(2.2rem,7vw,3.6rem)}
  .hero__lead{font-size:1rem;margin-block:12px}
  .hero__strip{margin-top:32px}
  .sheet{padding-top:12px;padding-bottom:calc(12px + var(--sb))}
  .sheet ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .sheet li a,.sheet__term{padding:12px 0}
  .sheet__cmd{margin:0 0 4px}
  .sheet__cta{margin-top:12px}
  .idcard{max-width:300px}
}
/* centered hero between 900 and 1099px sits on the bright part of the image */
@media (min-width:900px) and (max-width:1099px){
  .hero__bg{opacity:.6}
  .hero__lead{text-shadow:0 1px 12px rgba(4,7,10,.9),0 0 2px #04070a}
}

/* contact: the form comes into view sooner on tablets */
@media (max-width:959px){.contact .avatar{display:none}.contact__grid{gap:32px}}
@media (min-width:768px) and (max-width:959px){.contact__grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:28px}}

/* two-column grids with five items: the last one spans the row */
@media (min-width:640px) and (max-width:1099px){.zt-pillars > :last-child:nth-child(odd),.ai-grid > :last-child:nth-child(odd){grid-column:1 / -1}}
.console:focus{outline:none}

/* ---------- no JS, below 900px: the link row is one fixed-height strip under the header,
   and main moves down by that height, so it never covers the eyebrow or the H1.
   The Terminal item needs JS, so it is hidden. ---------- */
html:not(.js) .nav__tl{display:none !important}
@media (max-width:899px){
  html:not(.js){scroll-padding-top:calc(var(--nav-h) + 52px)}
  html:not(.js) .nav__links{flex-wrap:nowrap;align-items:center;height:44px;padding:0 var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  html:not(.js) .nav__links::-webkit-scrollbar{display:none}
  html:not(.js) .nav__links a{flex:none;min-height:0;padding:8px 0}
  html:not(.js) main{padding-top:44px}
}