/* ============================================================
   CYBER//ZERO TOOLVAULT + NEWS — shared design system
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#02040a; --bg1:#050b18;
  --ink:#e8f2ff; --mut:#8ba3c7; --dim:#54688a;
  --cy:#22d3ee; --gn:#4ade80; --pk:#f472b6; --pu:#a78bfa; --yl:#facc15; --rd:#fb7185; --bl:#60a5fa;
  --acc:var(--cy, #22d3ee);
  --glass:rgba(10,18,35,.55); --glass2:rgba(14,24,45,.42);
  --line:rgba(120,180,255,.12); --line2:rgba(120,180,255,.22);
  --mono:ui-monospace,'Cascadia Code','SF Mono','JetBrains Mono',Consolas,Menlo,monospace;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --disp:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial Black,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
html,body{background:var(--bg0)}
body{font-family:var(--sans);color:var(--ink);line-height:1.6;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:#02121a}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cy),var(--gn));border-radius:8px}
a{color:var(--cy);text-decoration:none}
a:hover{text-decoration:none}
b{color:var(--ink)}
code,.mono{font-family:var(--mono)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.06;letter-spacing:-.02em}
[hidden]{display:none!important}
.noise2{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.05;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.aur2{position:fixed;inset:0;z-index:-2;pointer-events:none}
.aur2 i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.3}
.aur2 .x1{width:50vw;height:50vw;background:radial-gradient(circle,var(--au1,#0e7490),transparent 65%);top:-20%;left:-12%}
.aur2 .x2{width:42vw;height:42vw;background:radial-gradient(circle,#164e63,transparent 65%);bottom:-28%;right:-8%;opacity:.24}

/* ---------- nav ---------- */
.tnav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:14px;
  padding:12px clamp(16px,4vw,40px);background:rgba(3,6,12,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand2{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.brand2 b{color:var(--cy)}
.brand2 i{color:var(--gn);font-style:normal;animation:blink2 1.3s steps(1) infinite}
@keyframes blink2{50%{opacity:0}}
.tnav .links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.tnav .links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
  padding:8px 12px;border-radius:8px;transition:.2s}
.tnav .links a:hover{color:var(--ink);background:rgba(120,180,255,.07)}
.tnav .links a.on{color:var(--cy)}
@media (max-width:760px){.tnav .links .hide-m{display:none}}

/* ---------- hero ---------- */
.thero{position:relative;min-height:64vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:120px 0 60px}
#scene2{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.thero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 110%, rgba(2,4,10,.94), transparent 60%),linear-gradient(rgba(2,4,10,.3),transparent 45%,transparent 75%,rgba(2,4,10,.9))}
.thero .wrap{position:relative;z-index:2;width:100%}
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--cy)}
.crumbs .sep{color:var(--dim)}
.tname{font-size:clamp(2.4rem,7.4vw,6rem);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--ink) 30%,var(--acc,#22d3ee) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tname b{-webkit-text-stroke:1.5px rgba(140,200,255,.5);color:transparent}
.kick2{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc,#22d3ee);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.kick2::before{content:'';width:40px;height:1px;background:var(--acc,#22d3ee);box-shadow:0 0 8px var(--acc,#22d3ee)}
.ttag{max-width:64ch;color:var(--mut);margin-top:18px;font-size:clamp(.92rem,1.5vw,1.08rem)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line2);color:var(--mut);background:rgba(8,14,28,.6)}
.chip.hot{border-color:var(--acc,#22d3ee);color:var(--acc,#22d3ee);background:rgba(34,211,238,.06)}
.chip.gn{border-color:rgba(74,222,128,.4);color:var(--gn)}
.chip.rd{border-color:rgba(251,113,133,.4);color:var(--rd)}
.diff{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.diff i{width:8px;height:8px;border-radius:2px;background:rgba(120,180,255,.16);transform:rotate(45deg)}
.diff i.f{background:var(--acc,#22d3ee);box-shadow:0 0 8px var(--acc,#22d3ee)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn2{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:13px 22px;border-radius:12px;border:1px solid var(--line2);color:var(--ink);
  background:rgba(10,18,35,.6);cursor:pointer;transition:.25s;backdrop-filter:blur(8px)}
.btn2:hover{transform:translateY(-2px);border-color:var(--acc,#22d3ee);box-shadow:0 10px 30px rgba(34,211,238,.18)}
.btn2.solid{background:linear-gradient(120deg,var(--acc,#22d3ee),#67e8f9);color:#02121a;border:0}
.herostats{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}
.hstat2 .n{font-family:var(--mono);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--ink);line-height:1}
.hstat2 .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:5px}

/* ---------- sections ---------- */
.tsec{position:relative;padding:clamp(54px,7vw,90px) 0 10px}
.tsec .h2{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:10px}
.tsec .h2 em{font-style:normal;color:var(--acc,#22d3ee)}
.tsec .lede{color:var(--mut);max-width:74ch;font-size:.94rem;margin-bottom:28px}
.divline{width:64px;height:2px;background:linear-gradient(90deg,var(--acc,#22d3ee),transparent);margin:14px 0 18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.card2{position:relative;border-radius:16px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);padding:22px;overflow:hidden;transition:.3s var(--ease)}
.card2:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.card2 h3{font-size:1.02rem;margin-bottom:8px}
.card2 p{font-size:.87rem;color:var(--mut)}
.card2 .idx{position:absolute;top:10px;right:16px;font-family:var(--mono);font-weight:800;font-size:2.6rem;color:rgba(255,255,255,.05)}

/* ---------- terminal demo ---------- */
.term2{background:rgba(6,10,20,.9);border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.term2 .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#0b1322;border-bottom:1px solid var(--line)}
.term2 .bar i{width:10px;height:10px;border-radius:50%}
.term2 .bar i:nth-child(1){background:var(--rd)}.term2 .bar i:nth-child(2){background:var(--yl)}.term2 .bar i:nth-child(3){background:var(--gn)}
.term2 .bar span{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.term2 .screen{padding:18px;font-family:var(--mono);font-size:clamp(.72rem,1.6vw,.84rem);min-height:220px;line-height:1.75;overflow-x:auto}
.term2 .tl{white-space:pre-wrap;word-break:break-word}
.term2 .p{color:var(--gn)} .term2 .d{color:var(--pk)} .term2 .c{color:#eaf3ff} .term2 .o{color:var(--mut)} .term2 .ok{color:var(--gn)} .term2 .warn{color:var(--yl)} .term2 .hi{color:var(--acc,#22d3ee)}
.term2 .ft{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:rgba(8,14,28,.6)}
.replay{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:8px;
  border:1px solid var(--line2);background:transparent;color:var(--cy);cursor:pointer;transition:.2s}
.replay:hover{border-color:var(--cy);background:rgba(34,211,238,.08)}
.term2 .ft .stt{font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-left:auto}

/* ---------- how-to steps ---------- */
.howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.tstep{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--glass2);position:relative;transition:.3s var(--ease);cursor:pointer}
.tstep:hover{border-color:var(--acc,#22d3ee);transform:translateY(-2px)}
.tstep.playing{border-color:var(--acc,#22d3ee);background:rgba(34,211,238,.06);box-shadow:0 0 30px rgba(34,211,238,.12)}
.tstep .sn{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--acc,#22d3ee)}
.tstep h4{font-size:.94rem;margin:6px 0 6px}
.tstep .cm{font-family:var(--mono);font-size:.7rem;color:var(--yl);background:rgba(0,0,0,.4);border:1px solid rgba(120,180,255,.1);
  border-radius:7px;padding:5px 9px;display:block;overflow-x:auto;white-space:nowrap;margin-bottom:7px}
.tstep p{font-size:.8rem;color:var(--mut)}

/* ---------- animated flow infographic ---------- */
.flow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;justify-content:center;padding:14px 0}
.fnode{position:relative;flex:1 1 150px;max-width:220px;border:1px solid var(--line2);border-radius:14px;padding:16px 12px;text-align:center;
  background:rgba(6,10,20,.7)}
.fnode .fi{font-size:24px;margin-bottom:8px;display:block}
.fnode .ft2{font-weight:700;font-size:.82rem}
.fnode .fd{font-size:.68rem;color:var(--mut);margin-top:4px}
.fnode::after{content:'';position:absolute;top:50%;right:-11px;width:11px;height:2px;background-image:linear-gradient(90deg,var(--acc,#22d3ee) 55%,transparent 45%);
  background-size:8px 2px;animation:flowdash 1s linear infinite}
.fnode:last-child::after{display:none}
@keyframes flowdash{to{background-position:8px 0}}
@media (max-width:640px){.fnode::after{display:none}}

/* ---------- flags / tables ---------- */
.flags{width:100%;border-collapse:collapse;font-size:.86rem;min-width:480px}
.flags td{padding:10px 14px;border-bottom:1px solid rgba(120,180,255,.08);color:var(--mut);vertical-align:top}
.flags tr:hover td{background:rgba(34,211,238,.04)}
.flags td:first-child{font-family:var(--mono);color:var(--acc,#22d3ee);white-space:nowrap;font-weight:700;font-size:.8rem}
.tblw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--glass)}

/* ---------- stat bar / alert ---------- */
.meterr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0}
.meter{flex:1;min-width:200px;height:8px;border-radius:99px;background:rgba(120,180,255,.12);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc,#22d3ee),var(--gn));box-shadow:0 0 12px var(--acc,#22d3ee)}
.alert{display:flex;gap:14px;border-radius:14px;padding:18px 20px;border:1px solid rgba(251,113,133,.3);background:rgba(251,113,133,.05);margin-top:26px}
.alert .ai{font-size:20px}
.alert h4{color:var(--rd);font-size:.92rem;margin-bottom:4px}
.alert p{font-size:.84rem;color:var(--mut)}
.alert.ok{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.05)}
.alert.ok h4{color:var(--gn)}

/* ---------- related chips ---------- */
.rel{display:flex;gap:8px;flex-wrap:wrap}
.rel a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:9px 14px;border-radius:10px;border:1px solid var(--line2);
  color:var(--mut);background:rgba(8,14,28,.6);transition:.2s;text-transform:uppercase}
.rel a:hover{color:var(--ink);border-color:var(--acc,#22d3ee);transform:translateY(-2px)}

/* ---------- hub ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:24px;position:sticky;top:58px;z-index:40;
  background:rgba(3,6,12,.78);backdrop-filter:blur(14px);padding:12px;border:1px solid var(--line);border-radius:14px}
.pill2{font-family:var(--mono);font-size:.66rem;padding:8px 13px;border-radius:999px;border:1px solid var(--line2);background:transparent;
  color:var(--mut);cursor:pointer;transition:.2s;text-transform:uppercase;letter-spacing:.06em}
.pill2:hover{color:var(--ink);border-color:var(--cy)}
.pill2.active{background:var(--cy);border-color:var(--cy);color:#02121a;font-weight:700}
.search2{margin-left:auto;position:relative}
.search2 input{font-family:var(--mono);font-size:.8rem;padding:10px 14px 10px 38px;width:min(280px,70vw);background:rgba(8,14,28,.8);
  border:1px solid var(--line2);border-radius:11px;color:var(--ink);outline:none;transition:.2s}
.search2 input:focus{border-color:var(--cy);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.search2::before{content:'⌕';position:absolute;left:13px;top:8px;font-size:17px;color:var(--dim)}
@media (max-width:700px){.search2{margin-left:0;width:100%}.search2 input{width:100%}}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.hubcard{display:block;border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--glass);backdrop-filter:blur(10px);
  transition:.3s var(--ease);position:relative;overflow:hidden}
.hubcard:hover{transform:translateY(-4px);border-color:var(--acc,#22d3ee);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.hubcard .hc-name{font-family:var(--mono);font-weight:700;font-size:.98rem;color:var(--ink)}
.hubcard .hc-cat{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line2);padding:2px 8px;border-radius:6px;margin-bottom:10px}
.hubcard p{font-size:.78rem;color:var(--mut);margin-top:8px;line-height:1.5}
.hubcard .hc-ft{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--mono);font-size:.62rem;color:var(--dim)}
.hubcard .hc-go{color:var(--acc,#22d3ee)}
.cath{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--acc,#22d3ee);margin:36px 0 14px;display:flex;align-items:center;gap:12px}
.cath::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}

/* ---------- news ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(3,6,12,.6);backdrop-filter:blur(8px);overflow:hidden;padding:12px 0}
.ticker .track{display:flex;width:max-content;gap:34px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--mut);white-space:nowrap}
.ticker .track b{color:var(--acc,#22d3ee)} .ticker .track .lv{color:var(--gn)}
.updated{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px dashed var(--line2);border-radius:10px;padding:8px 14px;display:inline-flex;gap:8px;align-items:center}
.updated i{width:7px;height:7px;border-radius:50%;background:var(--gn);box-shadow:0 0 10px var(--gn);animation:pulse2 2s infinite}
@keyframes pulse2{50%{opacity:.3}}
.newstabs{display:flex;gap:7px;flex-wrap:wrap}
.ncard{display:block;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--glass);backdrop-filter:blur(10px);
  transition:.3s var(--ease);position:relative;overflow:hidden}
.ncard:hover{transform:translateY(-4px);border-color:var(--acc,#22d3ee);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ncard .nt{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;border-radius:6px;border:1px solid;margin-bottom:11px}
.nt-news{color:var(--cy);border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.07)}
.nt-tool{color:var(--gn);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.07)}
.nt-cve{color:var(--rd);border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.07)}
.nt-learn{color:var(--pu);border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.07)}
.nt-live{color:#02121a;background:var(--gn);border-color:var(--gn);font-weight:700}
.ncard h4{font-size:.98rem;line-height:1.35;margin-bottom:8px;font-family:var(--sans);font-weight:700;letter-spacing:0}
.ncard p{font-size:.79rem;color:var(--mut);line-height:1.55}
.ncard .nm2{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--mono);font-size:.6rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.ncard .nm2 b{color:var(--acc,#22d3ee)}

/* ---------- footer ---------- */
footer2{display:block;border-top:1px solid var(--line);margin-top:80px;padding:40px 0 56px;color:var(--dim);font-size:.8rem}
footer2 .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer2 a{color:var(--mut)} footer2 a:hover{color:var(--cy)}
.prevnext{display:flex;gap:12px;flex-wrap:wrap;margin:40px 0 10px}
.prevnext a{flex:1;min-width:200px;border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:var(--glass2);color:var(--mut);
  font-family:var(--mono);font-size:.72rem;transition:.2s;display:block}
.prevnext a:hover{border-color:var(--acc,#22d3ee);color:var(--ink);transform:translateY(-2px)}
.prevnext a b{display:block;color:var(--acc,#22d3ee);font-size:.9rem;margin-top:5px}
.prevnext a.r{text-align:right}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}