/* Dark Terminal - public site. Near-black, phosphor green + warning red, CRT texture. No external assets. */
:root{
  --bg:#020302; --bg2:#060807; --panel:#080b09; --panel2:#0c100d; --line:#16201a; --line2:#223026;
  --ink:#d8e2da; --ink2:#9aa79d; --dim:#56635a; --acid:#39ff6a; --acid2:#1fbf4a; --red:#ff2a3d; --amber:#ffb02e;
  --cyan:var(--acid); --violet:var(--red); --green:var(--acid); --pink:var(--red);
  --glow:0 0 22px #39ff6a33; --mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --sans:"Inter","Segoe UI",Roboto,sans-serif; --w:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acid);color:#000}
a{color:var(--acid);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px;position:relative}
.mono{font-family:var(--mono)}

/* atmosphere: glyph rain canvas, scanlines, grain, vignette */
#rain{position:fixed;inset:0;z-index:-2;width:100%;height:100%;opacity:.5}
body:before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(180deg,#0000 0 2px,#00000059 2px 3px);mix-blend-mode:multiply}
body:after{content:"";position:fixed;inset:-50%;z-index:51;pointer-events:none;opacity:.07;
  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");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-8%,4%)}40%{transform:translate(6%,-6%)}60%{transform:translate(-4%,8%)}80%{transform:translate(8%,2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,#0000 40%,#000d 100%)}
.scanbar{position:fixed;left:0;right:0;height:120px;z-index:49;pointer-events:none;top:-120px;
  background:linear-gradient(180deg,#0000,#39ff6a0a 60%,#39ff6a14 92%,#0000);animation:scan 7s linear infinite}
@keyframes scan{to{top:100%}}

/* top bar */
.nav{position:sticky;top:0;z-index:40;background:#020302d9;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:58px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font:700 15px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.logo:hover{text-decoration:none}
.logo i{font-style:normal;color:var(--acid);text-shadow:0 0 10px var(--acid);animation:flick 4s infinite}
@keyframes flick{0%,91%,95%,100%{opacity:1}92%,94%{opacity:.2}}
.nav .links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav .links a{color:var(--ink2);font:13px var(--mono);text-transform:lowercase}
.nav .links a:hover{color:var(--acid);text-decoration:none}
.nav .links a.btn.primary{color:#000;padding:8px 14px}
.status{font:11px var(--mono);color:var(--dim);display:flex;gap:7px;align-items:center}
.status b{width:6px;height:6px;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
@media(max-width:760px){.nav .links a.hide-m,.status{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:0;font:600 13.5px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--line2);color:var(--ink);background:#000a;position:relative;overflow:hidden;transition:color .2s,border-color .2s}
.btn:hover{text-decoration:none;border-color:var(--acid);color:var(--acid)}
.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0000,#39ff6a33,#0000);transform:translateX(-100%);transition:transform .5s}
.btn:hover:before{transform:translateX(100%)}
.btn.primary{background:var(--acid);color:#000;border-color:var(--acid);box-shadow:0 0 0 1px #000,var(--glow)}
.btn.primary:hover{color:#000;background:#5dff86}

/* hero */
.hero{padding:96px 0 70px;position:relative;min-height:calc(100vh - 58px);display:flex;align-items:center}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;width:100%}
@media(max-width:900px){.hero{min-height:0;padding-top:46px}.hero .wrap{grid-template-columns:1fr}}
.tag{display:inline-flex;gap:9px;align-items:center;font:600 11.5px var(--mono);color:var(--red);border:1px solid #ff2a3d55;
  background:#ff2a3d0d;padding:5px 10px;letter-spacing:.16em;text-transform:uppercase}
.tag b{width:7px;height:7px;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1s infinite}
h1{font:800 clamp(38px,6vw,76px)/1 var(--sans);margin:22px 0 22px;letter-spacing:-.04em;text-transform:uppercase}
h1 .grad{color:var(--acid);text-shadow:0 0 28px #39ff6a55}
.glitch{position:relative;display:inline-block}
.glitch:before,.glitch:after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.glitch:before{color:var(--red);transform:translate(-2px,0);clip-path:inset(0 0 100% 0);animation:gl1 3.2s infinite steps(1)}
.glitch:after{color:#00e5ff;transform:translate(2px,0);clip-path:inset(100% 0 0 0);animation:gl2 3.2s infinite steps(1)}
@keyframes gl1{0%,86%,100%{clip-path:inset(0 0 100% 0)}87%{clip-path:inset(10% 0 60% 0)}89%{clip-path:inset(55% 0 20% 0)}91%{clip-path:inset(30% 0 45% 0)}93%{clip-path:inset(80% 0 2% 0)}}
@keyframes gl2{0%,86%,100%{clip-path:inset(100% 0 0 0)}88%{clip-path:inset(62% 0 12% 0)}90%{clip-path:inset(5% 0 75% 0)}92%{clip-path:inset(40% 0 35% 0)}}
.lead{font-size:18px;color:var(--ink2);max-width:36rem}
.redact{background:var(--ink);color:transparent;padding:0 3px;cursor:help;transition:background .35s,color .35s;user-select:none}
.redact:hover,.redact.open{background:#39ff6a1f;color:var(--acid)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.chips{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:var(--dim);font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.chips span:before{content:"// ";color:var(--acid2)}

/* terminal */
.term{background:#000c;border:1px solid var(--line2);box-shadow:0 30px 90px #000,0 0 0 1px #000,inset 0 0 60px #39ff6a08;position:relative}
.term:before,.term:after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--acid)}
.term:before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.term:after{bottom:-5px;right:-5px;border-left:0;border-top:0}
.term .bar{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.12em}
.term .bar i{display:none}
.term .bar span{margin:0}
.term .bar em{margin-left:auto;font-style:normal;color:var(--red)}
.term pre{margin:0;padding:18px 18px 22px;font:13.5px/1.8 var(--mono);color:var(--ink2);min-height:310px;white-space:pre-wrap;text-shadow:0 0 6px #39ff6a22}
.term .p{color:var(--acid)}.term .ok{color:var(--acid)}.term .warn{color:var(--amber)}.term .c{color:var(--red)}
.caret{display:inline-block;width:9px;height:17px;background:var(--acid);vertical-align:-3px;animation:blink 1s steps(1) infinite;box-shadow:0 0 8px var(--acid)}
@keyframes blink{50%{opacity:0}}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;background:#000b;font:12px var(--mono);color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.ticker div{display:inline-block;padding:11px 0;animation:tick 40s linear infinite}
.ticker span{margin:0 26px}.ticker span b{color:var(--acid);font-weight:400}.ticker span i{color:var(--red);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
section{padding:90px 0;position:relative}
.kicker{font:600 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
h2{font:800 clamp(28px,3.8vw,46px)/1.08 var(--sans);letter-spacing:-.03em;margin:12px 0 16px;text-transform:uppercase}
.sub{color:var(--ink2);max-width:42rem;font-size:17px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--bg);padding:26px 24px 24px;position:relative;overflow:hidden;transition:background .3s}
.card:before{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,#0000,#39ff6a12);opacity:0;transition:none}
.card:hover{background:#050906}
.card:hover:before{opacity:1;animation:cardscan 1.1s linear}
@keyframes cardscan{to{top:100%}}
.card .ic{font:600 11px var(--mono);color:var(--acid);margin-bottom:16px;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between}
.card .ic span{color:var(--dim)}
.card h3{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.card p{margin:0 0 14px;color:var(--ink2);font-size:15px}
.card a.more{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.steps div{border-top:1px solid var(--line2);padding:18px 0 0;position:relative}
.steps div:after{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--acid);box-shadow:0 0 8px var(--acid);transition:width 1.4s ease}
.steps div.in:after{width:100%}
.steps div:before{counter-increment:s;content:"STEP_0" counter(s);font:600 12px var(--mono);color:var(--acid);letter-spacing:.14em}
.steps h3{margin:8px 0;font-size:19px}.steps p{margin:0;color:var(--ink2);font-size:15px}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000a}
.final{text-align:center}
.final .cta{justify-content:center}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--dim);font:12px var(--mono);text-transform:uppercase;letter-spacing:.1em;background:#000c}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer .wrap a{color:var(--ink2)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* blog */
.post{max-width:760px;margin:0 auto;padding:60px 20px 30px;position:relative}
.post h1{font-size:clamp(30px,4.4vw,48px);text-transform:none;letter-spacing:-.03em}
.post .meta{font:12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.12em}
.post h2{font-size:24px;margin:42px 0 10px;text-transform:none;letter-spacing:-.01em}
.post h2:before{content:"# ";color:var(--acid);font-family:var(--mono)}
.post p,.post li{color:var(--ink2);font-size:17px}
.post li{margin:6px 0}
.post li::marker{color:var(--acid)}
.post strong{color:var(--ink)}
.post .callout{border:1px solid #39ff6a33;border-left:3px solid var(--acid);background:#39ff6a08;padding:16px 18px;margin:26px 0}
.post .callout p{margin:0}
.post .next{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}
.crumb{font:12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.crumb a{color:var(--dim)}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}#rain{display:none}.scanbar{display:none}
}