/* ============================================================
   Samuel Valmiki — portfolio stylesheet
   Dark neon UI, sans-serif body copy, mono reserved for accents
   ============================================================ */

:root{
  --bg:      #04060a;
  --bg-2:    #080c13;
  --panel:   rgba(12,18,25,.72);
  /* text ramp, measured against --bg. Every step clears WCAG AA (4.5:1)
     for normal text: ink 18.2:1 · body 13.5:1 · dim 9.3:1 · dimmer 6.0:1 */
  --ink:     #eef4f2;
  --body:    #c8d5d6;
  --dim:     #a2b2b7;
  --dimmer:  #7d8f96;
  --line:    rgba(255,255,255,.11);
  --line-2:  rgba(0,255,156,.22);
  --acid:    #00ff9c;
  --cyan:    #00e5ff;
  --magenta: #ff2e97;
  --gold:    #ffb300;
  --red:     #ff5252;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;

  --pad: clamp(20px, 5vw, 80px);
  --gx: 0px;
  --nav-h: 68px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.intro-on,body.pal-open{overflow:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--sans); font-weight:700; color:var(--ink); line-height:1.1; letter-spacing:-.02em}
::selection{background:var(--acid); color:#000}
:focus-visible{outline:2px solid var(--acid); outline-offset:3px}

code{font-family:var(--mono); font-size:.88em; color:var(--acid); background:rgba(0,255,156,.09); padding:2px 6px; border-radius:3px}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#020407}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--acid),var(--cyan))}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ============================================================
   BACKDROP
   ============================================================ */
.layer{position:fixed; inset:0; pointer-events:none}
.layer--bg{z-index:0; will-change:opacity}
.layer--vignette{
  z-index:5;
  background:
    radial-gradient(ellipse 60% 48% at 50% 42%, rgba(4,6,10,.80), rgba(4,6,10,.38) 58%, transparent 80%),
    radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(0,0,0,.55) 84%, rgba(0,0,0,.85) 100%);
}
.flash{position:fixed; inset:0; z-index:7; pointer-events:none; opacity:0; background:var(--acid); mix-blend-mode:overlay}
.flash.on{animation:fl .3s steps(3)}
@keyframes fl{0%{opacity:.16}100%{opacity:0}}

/* ============================================================
   CURSOR / PROGRESS
   ============================================================ */
.cursor{position:fixed; top:0; left:0; z-index:99; pointer-events:none; mix-blend-mode:difference}
.cursor__ring{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid var(--acid); border-radius:50%; transition:width .25s,height .25s,margin .25s}
.cursor__dot{position:absolute; width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--acid); border-radius:50%}
.cursor.hot .cursor__ring{width:56px; height:56px; margin:-28px 0 0 -28px}
.cursor.down .cursor__ring{width:22px; height:22px; margin:-11px 0 0 -11px}
@media (hover:none){.cursor{display:none}}

.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:80; background:rgba(255,255,255,.05)}
.progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--acid),var(--cyan) 50%,var(--gold)); box-shadow:0 0 12px var(--acid)}

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:200; background:#020407;
  display:grid; place-items:center; transition:opacity .5s ease, transform .6s cubic-bezier(.7,0,.3,1);
}
.intro.done{opacity:0; transform:scale(1.05); pointer-events:none}
.intro__inner{text-align:center; width:min(420px,80vw)}
.intro__name{
  font-family:var(--mono); font-size:clamp(13px,2.4vw,18px); letter-spacing:.5em;
  color:var(--acid); text-shadow:0 0 24px rgba(0,255,156,.5); margin-bottom:22px;
  animation:introIn .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes introIn{from{opacity:0; letter-spacing:1em; filter:blur(8px)}to{opacity:1}}
.intro__bar{height:2px; background:rgba(255,255,255,.08); overflow:hidden}
.intro__bar i{display:block; height:100%; width:0; background:var(--acid); box-shadow:0 0 12px var(--acid)}
.intro__skip{
  margin-top:24px; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--dim); transition:color .3s;
}
.intro__skip:hover{color:var(--acid)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 var(--pad); border-bottom:1px solid transparent; transition:background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.stuck{background:rgba(4,6,10,.82); backdrop-filter:blur(16px); border-bottom-color:var(--line)}
.nav__brand{display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:13px; color:var(--ink); letter-spacing:.02em}
.nav__brand em{font-style:normal; color:var(--acid); font-size:11px}
.nav__mark{width:11px; height:11px; border:2px solid var(--acid); box-shadow:0 0 12px rgba(0,255,156,.6); animation:mark 6s linear infinite}
@keyframes mark{50%{transform:rotate(180deg) skew(10deg,3deg)}100%{transform:rotate(360deg)}}

.nav__links{display:flex; gap:30px}
.nav__links a{
  position:relative; font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  color:var(--dim); padding:6px 0; transition:color .3s;
}
.nav__links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--acid); transition:width .35s cubic-bezier(.16,1,.3,1)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__links a.on{color:var(--acid)}
.nav__links a.on::after{width:100%}
.nav__end{display:flex; align-items:center; gap:14px}




/* ============================================================
   COMMAND PALETTE  (Cmd/Ctrl+K) — replaces the hamburger menu
   ============================================================ */
.cmdk{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:rgba(255,255,255,.02); border:1px solid var(--line);
  padding:8px 12px; transition:border-color .3s, background .3s;
}
.cmdk:hover{border-color:var(--line-2); background:rgba(0,255,156,.05)}
.cmdk__ico{display:flex; flex-direction:column; gap:3.5px; width:15px}
.cmdk__ico i{display:block; height:1.5px; background:var(--acid); transition:width .3s}
.cmdk__ico i:nth-child(1){width:100%}
.cmdk__ico i:nth-child(2){width:65%}
.cmdk__ico i:nth-child(3){width:85%}
.cmdk:hover .cmdk__ico i{width:100%}
.cmdk__hint{display:flex; gap:3px}
.cmdk kbd,.pal kbd{
  font-family:var(--mono); font-size:10.5px; line-height:1; padding:4px 5px;
  color:var(--dim); border:1px solid var(--line); background:rgba(0,0,0,.35);
}
@media (max-width:1000px){ .cmdk__hint{display:none} .cmdk{padding:9px 11px} }

.pal{position:fixed; inset:0; z-index:120; display:none}
.pal.on{display:block}
.pal__scrim{position:absolute; inset:0; background:rgba(2,4,7,.78); backdrop-filter:blur(4px)}
.pal__panel{
  position:relative; width:min(640px, calc(100vw - 32px)); margin:14vh auto 0;
  background:#070c12; border:1px solid var(--line-2);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(0,255,156,.2);
  display:flex; flex-direction:column; max-height:70vh;
  animation:palIn .18s cubic-bezier(.16,1,.3,1);
}
@keyframes palIn{from{opacity:0; transform:translateY(-8px) scale(.99)}}

.pal__bar{display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid var(--line)}
.pal__prompt{font-family:var(--mono); color:var(--acid); font-size:15px}
.pal__input{
  flex:1; background:none; border:0; outline:none; color:var(--ink);
  font-family:var(--mono); font-size:15px;
}
.pal__input::placeholder{color:var(--dimmer)}

.pal__list{overflow-y:auto; padding:8px 0; flex:1}
.pal__group{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dimmer); padding:12px 18px 6px;
}
.pal__row{
  width:100%; display:flex; align-items:center; gap:12px; padding:10px 18px;
  background:none; border:0; cursor:pointer; text-align:left; color:inherit;
  border-left:2px solid transparent;
}
.pal__row.on{background:rgba(0,255,156,.07); border-left-color:var(--acid)}
.pal__kind{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--acid); border:1px solid var(--line-2); padding:3px 7px; flex:none; min-width:62px; text-align:center;
}
.pal__title{color:var(--ink); font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal__sub{
  font-family:var(--mono); font-size:11.5px; color:var(--dimmer); margin-left:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%;
}
.pal__ext{color:var(--dim); font-size:13px}
.pal__empty{padding:28px 18px; text-align:center; color:var(--dim); font-family:var(--mono); font-size:13px}
.pal__foot{
  display:flex; gap:18px; padding:11px 17px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--dimmer); flex-wrap:wrap;
}
.pal__foot span{display:flex; align-items:center; gap:5px}
.pal__esc{flex:none}
@media (max-width:640px){
  .pal__panel{margin:8vh auto 0; max-height:82vh}
  .pal__sub{display:none}
  .pal__foot{display:none}
}

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; padding:15px 26px;
  border:1px solid var(--line); transition:border-color .35s, box-shadow .35s; cursor:pointer; background:none;
}
.btn span{position:relative; z-index:2; transition:color .3s}
.btn i{position:relative; z-index:2; width:18px; height:1px; background:currentColor}
.btn::before{content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn:hover::before{transform:none}
.btn--sm{padding:10px 18px; font-size:11px}
.btn--full{width:100%; justify-content:center; margin-top:20px}
.btn--primary{color:var(--acid); background:rgba(0,255,156,.05); border-color:var(--line-2)}
.btn--primary::before{background:var(--acid)}
.btn--primary:hover{box-shadow:0 0 34px rgba(0,255,156,.28)}
.btn--primary:hover span,.btn--primary:hover i{color:#000; background-color:#000}
.btn--ghost{color:var(--dim)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ghost:hover span{color:#000}

.link-more{font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--acid); border-bottom:1px solid transparent; transition:.3s; white-space:nowrap}
.link-more:hover{border-bottom-color:var(--acid)}

.is-pending{color:var(--dimmer) !important; cursor:not-allowed; pointer-events:none}
.pending{color:var(--dimmer); font-style:italic}
/* buttons whose target isn't configured yet say so once, in place */
[data-resume].is-pending span::after,
[data-link].is-pending span::after{content:' — link pending'; opacity:.8}
.btn.is-pending{border-color:var(--line); background:none}
.btn.is-pending::before{display:none}

/* ============================================================
   SECTION SHELL
   ============================================================ */
main{position:relative; z-index:10}
.sec{position:relative; padding:clamp(70px,10vh,130px) var(--pad)}
.sec--tight{padding-top:0}

.sechead{max-width:900px; margin:0 auto clamp(38px,6vw,68px); text-align:center}
.sechead--row{
  max-width:1280px; display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; text-align:left; flex-wrap:wrap;
}
.sechead__no{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  color:var(--acid); border:1px solid var(--line-2); padding:6px 13px; margin-bottom:18px; text-transform:uppercase;
}
.sechead__t{font-size:clamp(32px,5.4vw,62px); text-transform:none}
.sechead__p{margin-top:16px; color:var(--dim); font-size:17px; max-width:58ch; margin-inline:auto}
.sechead--row .sechead__p{margin-inline:0}
.stroke{-webkit-text-stroke:1px var(--acid); color:transparent; text-shadow:calc(var(--gx) * -1) 0 rgba(0,229,255,.45), var(--gx) 0 rgba(255,46,151,.45)}

/* page hero (inner pages) */
.phero{padding:calc(var(--nav-h) + clamp(60px,11vh,120px)) var(--pad) clamp(40px,6vh,70px); text-align:center}
.phero__no{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--acid); border:1px solid var(--line-2); padding:6px 13px; margin-bottom:20px; text-transform:uppercase}
.phero__t{font-size:clamp(38px,7vw,84px)}
.phero__p{margin:20px auto 0; max-width:56ch; color:var(--dim); font-size:17.5px}

/* reveal — direction aware, replays both ways */
[data-reveal]{
  opacity:0; transform:translate3d(0,var(--rv,38px),0);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--dly,0ms), transform .8s cubic-bezier(.16,1,.3,1) var(--dly,0ms);
  will-change:transform,opacity;
}
html[data-dir="up"] [data-reveal]{--rv:-38px}
[data-reveal].in{opacity:1; transform:none}

/* ============================================================
   GLITCH TYPE
   ============================================================ */
.glitch{position:relative; display:inline-block; color:var(--ink)}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; top:0; left:0; width:100%; pointer-events:none; mix-blend-mode:screen}
.glitch::before{color:var(--cyan); transform:translate(calc(var(--gx) * -1 - 1px),0); clip-path:inset(0 0 58% 0)}
.glitch::after{color:var(--magenta); transform:translate(calc(var(--gx) + 1px),0); clip-path:inset(42% 0 0 0)}

/* ============================================================
   HOME HERO
   ============================================================ */
.hero{min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:calc(var(--nav-h) + 40px)}
/* static ambient glow — costs nothing to animate, gives the canvas depth */
.hero::before,.phero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(ellipse 46% 40% at 50% 46%, rgba(0,255,156,.10), transparent 70%),
    radial-gradient(ellipse 30% 26% at 68% 30%, rgba(0,229,255,.07), transparent 72%),
    radial-gradient(ellipse 26% 22% at 30% 66%, rgba(255,179,0,.05), transparent 74%);
}
.phero{position:relative}
.hero__inner{max-width:1000px; position:relative; z-index:2}
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase;
  border:1px solid var(--line-2); padding:8px 16px; border-radius:999px; background:rgba(0,255,156,.03);
}
.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); animation:pulse 1.9s infinite}
@keyframes pulse{50%{opacity:.25}}

.hero__title{
  font-size:clamp(44px,10.5vw,150px); line-height:.88; letter-spacing:-.04em;
  margin:24px 0 18px; display:flex; flex-direction:column; align-items:center; text-transform:uppercase;
}
.hero__title .glitch{animation:heroIn 1s cubic-bezier(.16,1,.3,1) both}
.hero__title .glitch.alt{animation-delay:.12s; color:var(--acid); text-shadow:0 0 46px rgba(0,255,156,.3)}
@keyframes heroIn{from{opacity:0; transform:translateY(40px); filter:blur(14px)}to{opacity:1; filter:none}}

.hero__role{font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--dim)}
.hero__role .sep{color:var(--dimmer); margin:0 6px}
.hero__role b{color:var(--gold); font-weight:400}
.hero__sub{margin:22px auto 0; max-width:52ch; font-size:clamp(16px,1.8vw,19px); color:var(--body)}
.hero__cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.hero__meta{display:flex; gap:clamp(22px,5vw,56px); justify-content:center; margin-top:48px; flex-wrap:wrap}
.hero__meta b{display:block; font-size:20px; color:var(--acid); font-family:var(--mono); font-weight:400}
.hero__meta span{font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; color:var(--dimmer); text-transform:uppercase}

.scrollcue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--dimmer); text-transform:uppercase}
.scrollcue i{width:1px; height:46px; background:linear-gradient(var(--acid),transparent); position:relative; overflow:hidden}
.scrollcue i::after{content:''; position:absolute; top:0; width:100%; height:12px; background:var(--acid); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-14px); opacity:0}40%{opacity:1}100%{transform:translateY(46px); opacity:0}}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; overflow:hidden; background:rgba(0,255,156,.02)}
.ticker__track{display:flex; gap:30px; align-items:center; white-space:nowrap; width:max-content}
.ticker__track span{font-size:clamp(15px,2.2vw,28px); font-weight:600; color:transparent; -webkit-text-stroke:1px rgba(228,236,234,.32); transition:.3s}
.ticker__track span:hover{color:var(--acid); -webkit-text-stroke-color:var(--acid)}
.ticker__track em{color:var(--gold); font-size:11px; font-style:normal}

/* ============================================================
   BENTO
   ============================================================ */
.bento{display:grid; gap:14px; max-width:1280px; margin:0 auto; grid-template-columns:repeat(4,1fr)}
.card{
  position:relative; overflow:hidden; padding:28px; min-height:220px;
  border:1px solid var(--line); background:linear-gradient(160deg, var(--panel), rgba(4,7,11,.86)); transition:border-color .4s, box-shadow .4s;
}
.card--xl{grid-column:span 2; grid-row:span 2; min-height:460px}
.card--wide{grid-column:span 2}
.card:hover{border-color:var(--line-2); box-shadow:0 28px 70px -30px rgba(0,255,156,.28)}
.card--accent{background:linear-gradient(160deg, rgba(255,179,0,.08), rgba(4,7,11,.9)); border-color:rgba(255,179,0,.2)}
.card--accent .card__no{color:var(--gold)}
.card__no{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--acid)}
.card h3{font-size:clamp(19px,2vw,26px); margin:14px 0 12px}
.card--xl h3{font-size:clamp(26px,3.2vw,40px)}
.card p{font-size:15.5px; color:var(--dim); max-width:46ch}
.card__bars{display:flex; flex-direction:column; gap:8px; margin-top:28px}
.card__bars i{display:block; height:2px; background:rgba(255,255,255,.07); position:relative; overflow:hidden}
.card__bars i::after{content:''; position:absolute; inset:0; width:var(--w); background:linear-gradient(90deg,var(--acid),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.card.in .card__bars i::after{transform:none}
.card__glow{position:absolute; width:320px; height:320px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle, rgba(0,255,156,.14), transparent 68%); transform:translate(-50%,-50%); transition:opacity .4s; left:var(--mx,50%); top:var(--my,50%)}
.card:hover .card__glow{opacity:1}

/* ============================================================
   METHOD STAGE
   ============================================================ */
.payload{padding:0; height:400vh; position:relative}
.payload__stick{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; padding:0 var(--pad)}
.payload__bg{position:absolute; inset:0; background:radial-gradient(circle at 50% 55%, rgba(0,255,156,.06), transparent 58%), linear-gradient(180deg, rgba(4,6,10,.9), rgba(4,6,10,.5) 30%, rgba(4,6,10,.9))}
.payload__head{position:absolute; top:clamp(84px,13vh,130px); left:0; right:0; text-align:center; z-index:3; justify-self:stretch}
.payload__t{font-size:clamp(28px,5vw,60px); margin-top:14px}
.stage{position:relative; width:min(520px,74vw); aspect-ratio:1; display:grid; place-items:center; z-index:2}
.stage__core{position:relative; width:100%; height:100%; display:grid; place-items:center; perspective:1200px}
.ring{position:absolute; border:1px solid rgba(0,255,156,.26); border-radius:50%}
.ring--1{width:52%; height:52%; border-color:rgba(0,255,156,.42); animation:r1 14s linear infinite}
.ring--2{width:74%; height:74%; border-style:dashed; border-color:rgba(0,229,255,.28); animation:r2 22s linear infinite}
.ring--3{width:96%; height:96%; border-color:rgba(255,179,0,.2); animation:r3 30s linear infinite}
@keyframes r1{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes r2{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(-360deg)}}
@keyframes r3{from{transform:rotateX(28deg) rotateY(28deg) rotateZ(0)}to{transform:rotateX(28deg) rotateY(28deg) rotateZ(360deg)}}
.cube{position:relative; width:126px; height:126px; transform-style:preserve-3d; transform:rotateX(var(--rx,-24deg)) rotateY(var(--ry,32deg))}
.face{position:absolute; inset:0; display:grid; place-items:center; border:1px solid rgba(0,255,156,.5); background:rgba(0,255,156,.05); font-family:var(--mono); font-size:26px; color:var(--acid); text-shadow:0 0 18px rgba(0,255,156,.6)}
.f1{transform:translateZ(63px)} .f2{transform:rotateY(90deg) translateZ(63px)} .f3{transform:rotateY(180deg) translateZ(63px)}
.f4{transform:rotateY(-90deg) translateZ(63px)} .f5{transform:rotateX(90deg) translateZ(63px)}
.f6{transform:rotateX(-90deg) translateZ(63px); color:var(--gold); border-color:rgba(255,179,0,.5); background:rgba(255,179,0,.06)}
.stage__hud{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.hcirc{fill:none; stroke:rgba(0,255,156,.14); stroke-width:1}
.hcirc.dash{stroke-dasharray:3 12; stroke:rgba(255,179,0,.22); transform-origin:center; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.htick{stroke:rgba(0,255,156,.35); stroke-width:1.5}

.steps{list-style:none; position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); z-index:4; width:min(330px,30vw)}
.step{opacity:.18; transform:translateX(-14px); transition:.5s cubic-bezier(.16,1,.3,1); padding:12px 0 12px 18px; border-left:1px solid var(--line)}
.step b{font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; color:var(--dimmer)}
.step h4{font-size:clamp(17px,2.2vw,26px); margin:3px 0 5px}
.step p{font-size:14.5px; color:var(--dim); max-height:0; overflow:hidden; opacity:0; transition:.5s}
.step.on{opacity:1; transform:none; border-left-color:var(--acid)}
.step.on b{color:var(--acid)}
.step.on p{max-height:90px; opacity:1}

/* ============================================================
   TIMELINE
   ============================================================ */
.tl{position:relative; max-width:840px; margin:0 auto; padding-left:clamp(38px,6vw,80px)}
.tl__spine{position:absolute; left:clamp(8px,1.6vw,22px); top:6px; bottom:6px; width:1px; background:rgba(255,255,255,.08)}
.tl__spine i{display:block; width:100%; height:0; background:linear-gradient(var(--acid),var(--cyan),var(--gold)); box-shadow:0 0 12px var(--acid)}
.tl__item{position:relative; padding-bottom:clamp(38px,6vw,64px)}
.tl__item::before{content:''; position:absolute; left:calc(clamp(8px,1.6vw,22px) - clamp(38px,6vw,80px) - 4px); top:8px; width:9px; height:9px; background:var(--bg); border:1px solid var(--acid); transform:rotate(45deg); transition:.4s}
.tl__item.in::before{background:var(--acid); box-shadow:0 0 14px var(--acid)}
.tl__yr{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; color:var(--gold); border:1px solid rgba(255,179,0,.26); padding:4px 10px; display:inline-block; text-transform:uppercase}
.tl__body h3{font-size:clamp(20px,2.8vw,32px); margin:13px 0 10px}
.tl__body p{font-size:15.5px; color:var(--dim); max-width:60ch}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(28px,4vw,56px); align-items:start}
.about__body h2{font-size:clamp(22px,2.6vw,30px); margin:34px 0 14px}
.about__body h2:first-child{margin-top:0}
.about__body p{margin-bottom:16px; font-size:17px; max-width:64ch}
.about__body em{color:var(--acid); font-style:normal}
.about__side{display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--nav-h) + 20px)}

.panel{border:1px solid var(--line); background:var(--panel); padding:24px}
.panel h3{font-family:var(--mono); font-size:12px; letter-spacing:.15em; color:var(--acid); text-transform:uppercase; font-weight:400; margin-bottom:16px}
.panel h3.mt{margin-top:24px}
.spec{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:15px}
.spec dt{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--dimmer); text-transform:uppercase; align-self:center}
.spec dd{color:var(--ink)}
.spec dd.acid{color:var(--acid)}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chips span{font-family:var(--mono); font-size:12.5px; padding:5px 10px; border:1px solid var(--line); color:var(--dim)}

.skills{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
.skill span{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--dim); margin-bottom:8px}
.skill i{display:block; height:3px; background:rgba(255,255,255,.07); position:relative; overflow:hidden}
.skill i::after{content:''; position:absolute; inset:0; width:var(--w); background:linear-gradient(90deg,var(--acid),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.16,1,.3,1) .1s; box-shadow:0 0 12px rgba(0,255,156,.5)}
.skill.in i::after{transform:none}

/* ============================================================
   TOOLBAR / CHIPS / SEARCH
   ============================================================ */
.toolbar{max-width:1280px; margin:0 auto 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.chips--filter{gap:8px}
.chip{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; padding:8px 14px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--dim); transition:.3s;
}
.chip:hover{color:var(--ink); border-color:var(--dim)}
.chip.on{color:#000; background:var(--acid); border-color:var(--acid)}
.search{display:flex; align-items:center; gap:9px; border:1px solid var(--line); padding:0 14px; background:rgba(255,255,255,.02)}
.search__ico{color:var(--dimmer); font-size:14px}
.search input{background:none; border:0; outline:none; color:var(--ink); font-family:var(--mono); font-size:13.5px; padding:11px 0; width:190px}
.search input::placeholder{color:var(--dimmer)}

.notice{
  max-width:1280px; margin:0 auto 20px; padding:12px 16px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.04em; color:var(--gold); border:1px dashed rgba(255,179,0,.34); background:rgba(255,179,0,.05);
}
.emptystate{
  grid-column:1/-1; text-align:center; padding:clamp(50px,9vw,90px) 24px;
  border:1px dashed var(--line); background:rgba(255,255,255,.015);
}
.emptystate h2{font-size:clamp(22px,3vw,32px); margin-bottom:12px}
.emptystate p{color:var(--dim); max-width:46ch; margin:0 auto}
.emptystate a{color:var(--acid); border-bottom:1px solid rgba(0,255,156,.4)}
.empty{text-align:center; color:var(--dim); padding:50px 0; font-family:var(--mono); font-size:14.5px}
.loading{text-align:center; color:var(--dim); padding:120px 0; font-family:var(--mono); font-size:13px}

/* ============================================================
   MEDIA CARDS — shared by projects and posts
   ============================================================ */
.postgrid,.grid3{display:grid; gap:16px; max-width:1280px; margin:0 auto; grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.cover{position:relative; overflow:hidden; background:#070d14}
.cover .cover__art,.cover .cover__img{display:block; width:100%; height:100%; object-fit:cover}

.mcard{
  display:flex; flex-direction:column; border:1px solid var(--line);
  background:linear-gradient(160deg, var(--panel), rgba(4,7,11,.9));
  overflow:hidden; transition:border-color .4s, box-shadow .4s, transform .4s;
}
.mcard:hover{border-color:var(--line-2); box-shadow:0 26px 66px -30px rgba(0,255,156,.32); transform:translateY(-3px)}
.mcard__cover{height:172px; flex:none}
.mcard__cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(4,7,11,.72));
}
.mcard .cover__art,.mcard .cover__img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.mcard:hover .cover__art,.mcard:hover .cover__img{transform:scale(1.05)}
.mcard__badge{
  position:absolute; left:14px; bottom:13px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 10px; background:rgba(4,6,10,.82); border:1px solid var(--line-2); color:var(--acid);
}
.mcard__body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.mcard h3{font-size:21px; line-height:1.25}
.mcard p{font-size:15px; color:var(--dim); flex:1}

.tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:2px}
.tags span{font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; padding:4px 9px; border:1px solid var(--line); color:var(--dim)}
.mcard__go{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--acid); transition:letter-spacing .3s}
.mcard:hover .mcard__go{letter-spacing:.18em}

.meta{display:flex; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.07em; color:var(--dimmer); text-transform:uppercase; flex-wrap:wrap}
.meta__type{color:var(--acid)}

/* ============================================================
   ARTICLE
   ============================================================ */
.article{max-width:760px; margin:0 auto; padding:calc(var(--nav-h) + clamp(50px,9vh,100px)) var(--pad) clamp(70px,10vh,120px)}
.back{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--acid); display:inline-block; margin-bottom:26px; transition:.3s}
.back:hover{letter-spacing:.2em}
.article__head h1{font-size:clamp(30px,5vw,52px); margin:14px 0 18px}
.article__head .meta{margin-bottom:6px}
.article__cover{margin-top:36px; height:clamp(190px,34vw,320px); border:1px solid var(--line)}
.article__body{margin-top:40px; font-size:18px; line-height:1.8; color:var(--body)}
.article__body h2{font-size:clamp(21px,2.8vw,28px); margin:42px 0 16px}
.article__body p{margin-bottom:20px}
.article__body ul,.article__body ol{margin:0 0 22px 22px}
.article__body li{margin-bottom:9px}
.article__body pre{
  background:#020407; border:1px solid var(--line); border-left:2px solid var(--acid);
  padding:18px 20px; overflow-x:auto; margin:0 0 24px; font-size:13.5px; line-height:1.65;
}
.article__body pre code{background:none; padding:0; color:var(--acid)}
.article__body img{margin:0 0 24px; border:1px solid var(--line)}
.article__body a{color:var(--cyan); border-bottom:1px solid rgba(0,229,255,.4)}
.article__nav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:60px; padding-top:30px; border-top:1px solid var(--line)}
.article__nav a{border:1px solid var(--line); padding:18px; transition:border-color .3s}
.article__nav a:hover{border-color:var(--line-2)}
.article__nav a.r{text-align:right}
.article__nav b{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; color:var(--acid); font-weight:400; margin-bottom:6px; text-transform:uppercase}
.article__nav span{font-size:15.5px; color:var(--ink)}
/* ---------- project detail ---------- */
.detail{max-width:1180px; margin:0 auto; padding:calc(var(--nav-h) + clamp(46px,8vh,90px)) var(--pad) clamp(70px,10vh,120px)}
.detail__head{max-width:800px}
.detail__head h1{font-size:clamp(30px,5.2vw,56px); margin:14px 0 16px}
.detail__lead{font-size:clamp(17px,2vw,20px); color:var(--body); max-width:62ch}
.detail__cover{height:clamp(200px,38vw,380px); margin:38px 0 0; border:1px solid var(--line)}
.detail__grid{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(28px,4vw,56px); margin-top:44px; align-items:start}
.detail__body{font-size:17px; line-height:1.8; color:var(--body); min-width:0}
.detail__body h2{font-size:clamp(21px,2.6vw,28px); margin:38px 0 15px}
.detail__body h2:first-child{margin-top:0}
.detail__body p{margin-bottom:19px}
.detail__body ul{margin:0 0 22px 21px}
.detail__body li{margin-bottom:9px}
.detail__body strong{color:var(--ink); font-weight:600}
.detail__body pre{background:#020407; border:1px solid var(--line); border-left:2px solid var(--acid); padding:18px 20px; overflow-x:auto; margin:0 0 24px; font-size:13.5px; line-height:1.65}
.detail__body pre code{background:none; padding:0; color:var(--acid)}
.detail__side{display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--nav-h) + 20px)}
.detail__side .btn{margin-top:10px}
.detail__side .btn:first-of-type{margin-top:0}
.sidenote{font-size:13.5px; color:var(--dimmer); line-height:1.6}
.detail .article__nav{margin-top:56px}

.gallery{margin-top:46px}
.gallery h2{font-size:clamp(21px,2.6vw,28px); margin-bottom:18px}
.gallery__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.gallery figure{border:1px solid var(--line); background:var(--panel); overflow:hidden}
.gallery img{width:100%; height:auto; display:block}
.gallery figcaption{padding:11px 14px; font-family:var(--mono); font-size:12px; color:var(--dim)}

.notfound{text-align:center; padding:60px 0}
.notfound h1{font-size:clamp(28px,5vw,44px); margin-bottom:14px}
.notfound p{margin-bottom:26px; color:var(--dim)}


/* ============================================================
   INLINE MEDIA — figures, image rows, callouts, lightbox
   Applies inside both article bodies and project bodies.
   ============================================================ */
.article__body img,.detail__body img{width:100%; height:auto; display:block}

.figure{margin:0 0 28px}
.figure img{border:1px solid var(--line); background:#070d14; cursor:zoom-in; transition:border-color .3s}
.figure img:hover{border-color:var(--line-2)}
.figure figcaption{
  margin-top:10px; font-family:var(--mono); font-size:12.5px; line-height:1.6;
  color:var(--dimmer); border-left:2px solid var(--line-2); padding-left:12px;
}

/* wider than the text column, still inside the page */
.figure--wide{width:min(115%,100vw - var(--pad) * 2); margin-left:calc((100% - min(115%,100vw - var(--pad) * 2)) / 2)}
.figure--full{width:calc(100vw - var(--pad) * 2); margin-left:calc(50% - (100vw - var(--pad) * 2) / 2)}

.figure__row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.figure--row[data-n="3"] .figure__row{grid-template-columns:repeat(3,1fr)}
.figure__row span{display:block; min-width:0}
.figure__row em{
  display:block; margin-top:8px; font-family:var(--mono); font-style:normal;
  font-size:12px; color:var(--dimmer);
}

.callout{
  margin:0 0 26px; padding:18px 22px; font-size:15.5px; line-height:1.7;
  border:1px solid var(--line-2); border-left-width:3px; background:rgba(0,255,156,.045); color:var(--body);
}
.callout strong{color:var(--acid); font-weight:600}
.callout--warn{border-color:rgba(255,179,0,.4); background:rgba(255,179,0,.05)}
.callout--warn strong{color:var(--gold)}

.article__body blockquote,.detail__body blockquote{
  margin:0 0 26px; padding:4px 0 4px 22px; border-left:2px solid var(--gold);
  font-size:17px; color:var(--ink);
}
.article__body video,.detail__body video{width:100%; border:1px solid var(--line); margin-bottom:26px}

.gallery img{cursor:zoom-in}


/* tables inside a post — scroll horizontally rather than break the layout */
.article__body table,.detail__body table{
  width:100%; border-collapse:collapse; margin:0 0 26px; font-size:15px;
  display:block; overflow-x:auto; white-space:nowrap;
}
.article__body th,.detail__body th{
  text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--acid); font-weight:400;
  padding:11px 16px 11px 0; border-bottom:1px solid var(--line-2);
}
.article__body td,.detail__body td{
  padding:11px 16px 11px 0; border-bottom:1px solid var(--line); color:var(--body);
}
.article__body tbody tr:hover td,.detail__body tbody tr:hover td{color:var(--ink)}
.article__body td code,.detail__body td code{font-size:14px}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:clamp(16px,4vw,60px);
  background:rgba(2,4,7,.94); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; cursor:zoom-out;
}
.lightbox.on{opacity:1; visibility:visible}
.lightbox img{max-width:100%; max-height:88vh; width:auto; border:1px solid var(--line-2); background:#070d14}
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:22px; text-align:center;
  font-family:var(--mono); font-size:12.5px; color:var(--dim); padding:0 20px;
}
.lightbox__close{
  position:absolute; top:18px; right:22px; width:40px; height:40px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--acid); font-size:18px; line-height:1;
}
.lightbox__close:hover{border-color:var(--acid)}

@media (max-width:640px){
  .figure__row,.figure--row[data-n="3"] .figure__row{grid-template-columns:1fr}
  .figure--wide,.figure--full{width:100%; margin-left:0}
}



/* ============================================================
   STAT TILES
   ============================================================ */
.mgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  max-width:1280px; margin:0 auto; background:var(--line); border:1px solid var(--line);
}
.metric{background:var(--bg-2); padding:34px 24px; text-align:center; transition:background .4s}
.metric:hover{background:rgba(0,255,156,.05)}
.metric b{
  display:block; font-weight:700; font-size:clamp(34px,5vw,58px); color:var(--acid);
  line-height:1; letter-spacing:-.02em; text-shadow:0 0 40px rgba(0,255,156,.3);
}
.metric span{
  display:block; margin-top:10px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; color:var(--dimmer); text-transform:uppercase;
}

/* ============================================================
   RECOGNITION — bug bounty / halls of fame
   ============================================================ */
.recgrid{display:grid; gap:16px; max-width:1280px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.reccard{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:26px;
  border:1px solid var(--line); background:linear-gradient(160deg, var(--panel), rgba(4,7,11,.9));
  transition:border-color .4s, box-shadow .4s, transform .4s;
}
.reccard:hover{border-color:var(--line-2); box-shadow:0 26px 66px -30px rgba(0,255,156,.3); transform:translateY(-3px)}
.reccard[hidden]{display:none !important}

.reccard__top{display:flex; align-items:center; gap:14px}
.orgbadge{width:52px; height:52px; flex:none; display:grid; place-items:center; overflow:hidden}
.orgbadge__art,.orgbadge__img{width:100%; height:100%; display:block; object-fit:contain}
.reccard__id{flex:1; min-width:0}
.reccard__id h3{font-size:19px; line-height:1.2}
.reccard__kind{
  display:inline-block; margin-top:4px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--acid);
}
.reccard__check{
  flex:none; width:22px; height:22px; display:grid; place-items:center; font-size:12px;
  color:var(--acid); border:1px solid var(--line-2); border-radius:50%;
}
.reccard>p{font-size:15px; color:var(--dim)}

.reccard__as{font-family:var(--mono); font-size:12px; color:var(--dimmer)}
.reccard__as code{font-size:12px; padding:1px 5px}
.reccard__periods{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0}
.reccard__periods li{
  font-family:var(--mono); font-size:11.5px; padding:4px 9px;
  border:1px solid var(--line); color:var(--dim);
}
.reccard__facts{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:auto; padding-top:6px;
  font-family:var(--mono); font-size:12px; color:var(--dimmer);
}
.reccard__facts b{color:var(--ink); font-weight:600}
.reccard__foot{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding-top:14px; border-top:1px solid var(--line);
}
.reccard__proof{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--acid); transition:letter-spacing .3s}
.reccard__proof:hover{letter-spacing:.12em}
.reccard__proof.is-muted{color:var(--dimmer); cursor:default}
.reccard__writeup{font-family:var(--mono); font-size:12px; color:var(--cyan); border-bottom:1px solid rgba(0,229,255,.35)}

/* ============================================================
   PROFILE LINKS
   ============================================================ */
.plinks{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.plinks--stack{grid-template-columns:1fr; gap:8px; max-width:none}
.plink{
  display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--line);
  background:rgba(255,255,255,.015); transition:border-color .3s, background .3s, transform .3s;
}
.plink:hover{border-color:var(--line-2); background:rgba(0,255,156,.04); transform:translateX(3px)}
.plink b{font-size:16px; color:var(--ink); font-weight:600}
.plink span{flex:1; font-family:var(--mono); font-size:12.5px; color:var(--gold)}
.plink i{font-style:normal; color:var(--acid); transition:transform .3s}
.plink:hover i{transform:translateX(4px)}
.plink.is-pending span{color:var(--dimmer)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,3.5vw,48px); align-items:start}
.form{border:1px solid var(--line); background:var(--panel); padding:clamp(22px,3vw,34px)}
.field{margin-bottom:18px}
.field label{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%; background:rgba(2,4,7,.7); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:15px; padding:13px 15px; outline:none; transition:border-color .3s, box-shadow .3s;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acid); box-shadow:0 0 0 3px rgba(0,255,156,.08)}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer)}
.form__note{margin-top:16px; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--dimmer)}
.form__note.is-error{color:var(--red)}
.form__note.is-ok{color:var(--acid)}
.contact__side{display:flex; flex-direction:column; gap:14px}
.bigmail{display:block; font-size:clamp(16px,2vw,20px); color:var(--acid); word-break:break-all; margin-bottom:20px; border-bottom:1px solid rgba(0,255,156,.3); padding-bottom:12px}

/* ============================================================
   COLLAPSIBLE SHELL
   ============================================================ */
.shellbox{max-width:900px; margin:0 auto}
.shellbox__toggle{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer;
  background:rgba(255,255,255,.015); border:1px solid var(--line); padding:16px 20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--dim); transition:.3s;
}
.shellbox__toggle:hover{border-color:var(--line-2); color:var(--ink)}
.shellbox__toggle span:nth-child(2){flex:1; text-align:left}
.shellbox__toggle i{font-style:normal; color:var(--acid); transition:transform .3s}
.shellbox__toggle.on i{transform:rotate(180deg)}
.shellbox__dot{width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 8px var(--acid)}

.term{border:1px solid var(--line-2); border-top:0; background:rgba(2,5,8,.94)}
.term__bar{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:rgba(0,255,156,.03)}
.term__dots{display:flex; gap:7px}
.term__dots i{width:9px; height:9px; border-radius:50%; background:#2a3540}
.term__dots i:nth-child(1){background:var(--red)} .term__dots i:nth-child(2){background:var(--gold)} .term__dots i:nth-child(3){background:var(--acid)}
.term__title{font-family:var(--mono); font-size:11px; color:var(--dim)}
.term__body{padding:18px; height:300px; overflow-y:auto; font-family:var(--mono); font-size:13px; line-height:1.75; outline:none; color:var(--body)}
.term__out div{white-space:pre-wrap; word-break:break-word}
.term__out a{color:var(--cyan); border-bottom:1px dotted var(--cyan)}
.c-acid{color:var(--acid)} .c-gold{color:var(--gold)} .c-dim{color:var(--dimmer)} .c-red{color:var(--red)}
.term__line{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--mono); font-size:13px}
.term__ps{color:var(--acid)}
.term__input{color:var(--ink); word-break:break-all}
.term__caret{width:8px; height:14px; background:var(--acid); display:inline-block; animation:blink .9s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta__box{
  max-width:1000px; margin:0 auto; text-align:center; padding:clamp(40px,6vw,70px) clamp(24px,4vw,50px);
  border:1px solid var(--line-2); background:linear-gradient(160deg, rgba(0,255,156,.05), rgba(4,7,11,.85));
}
.cta__box h2{font-size:clamp(24px,3.6vw,42px); margin-bottom:14px}
.cta__box p{color:var(--dim); max-width:52ch; margin:0 auto 28px}
.cta__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.foot{position:relative; z-index:10; padding:clamp(60px,8vh,100px) var(--pad) 28px; border-top:1px solid var(--line); background:rgba(2,4,7,.6)}
.foot__top{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(30px,5vw,70px)}
.foot__big{font-size:clamp(30px,5vw,54px); color:transparent; -webkit-text-stroke:1px rgba(0,255,156,.4); letter-spacing:-.03em; text-transform:uppercase}
.foot__brand p{margin-top:14px; color:var(--dim); font-size:14.5px; max-width:34ch}
.foot__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px}
.foot__cols>div{display:flex; flex-direction:column; gap:8px}
.foot__cols b{font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; color:var(--acid); font-weight:400; text-transform:uppercase; margin-bottom:4px}
.foot__cols a,.foot__cols span{font-size:15px; color:var(--dim); transition:color .3s}
.foot__cols a:hover{color:var(--acid)}
.foot__cols .ok{color:var(--acid)}
.foot__cols [data-footlinks]{display:flex; flex-direction:column; gap:8px}
.foot__bot{
  max-width:1280px; margin:52px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.05);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--dimmer);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .card--xl{grid-column:span 2; grid-row:auto; min-height:320px}
  .nav__links{display:none}

  .nav__cta{display:none}
  .about__grid{grid-template-columns:1fr}
  .about__side{position:static}
  .contact{grid-template-columns:1fr}
  .detail__grid{grid-template-columns:1fr}
  .detail__side{position:static}
  .steps{position:absolute; left:var(--pad); right:var(--pad); width:auto; top:auto; bottom:5vh; transform:none}
  .step{padding:7px 0 7px 14px}
  .step p{display:none}
  .payload{height:330vh}
  .foot__top{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .card--xl,.card--wide{grid-column:span 1}
  .toolbar{flex-direction:column; align-items:stretch}
  .search input{width:100%}
  .article__nav{grid-template-columns:1fr}
  .article__nav a.r{text-align:left}
  .foot__bot{flex-direction:column; gap:8px}
  .sechead--row{flex-direction:column; align-items:flex-start}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  [data-reveal]{opacity:1; transform:none}
  .layer--scan,.layer--matrix{display:none}
  html{scroll-behavior:auto}
}