/* ===== 1. COLOURS (change here only) ===== */
:root{
  --bg:#040807;          /* terminal black */
  --panel:#0A1311;
  --panel2:#0F1C18;
  --ink:#E6F5EE;
  --muted:#8FB3A4;
  --line:#17332B;
  --green:#22E58B;       /* main accent: secure green */
  --cyan:#3DD6F5;
  --amber:#FFC857;
  --red:#FF4D5E;         /* threats and warnings */
  --glow:0 0 26px rgba(34,229,139,.25);
}
/* ===== 2. BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.75 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Chakra Petch","Inter",sans-serif;line-height:1.2;margin:0 0 .5em;color:#fff}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.65rem,3.3vw,2.3rem);font-weight:700}
h2::after{content:"";display:block;width:76px;height:4px;margin-top:12px;background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 16px)}
h3{font-size:1.14rem;font-weight:700}
.sub{margin-top:50px;color:var(--green);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1rem}
.sub::before{content:"$ ";color:var(--cyan)}
p{margin:0 0 1em;max-width:72ch}
a{color:var(--cyan)}
mark{background:rgba(255,200,87,.16);color:#FFDD95;padding:1px 7px;border-radius:4px;font-weight:600}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.hl{color:var(--green);text-shadow:0 0 22px rgba(34,229,139,.55)}
.code-tag{display:inline-block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.78rem;font-weight:700;color:var(--green);background:rgba(34,229,139,.08);border:1px solid rgba(34,229,139,.4);padding:3px 12px;border-radius:4px;margin-bottom:14px}
/* ===== 3. NAV ===== */
nav.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;background:#020403;padding:14px max(24px,calc((100% - 1060px)/2))}
.brand{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:1.1rem;display:flex;align-items:center;letter-spacing:.04em}
.brand b{color:var(--green)}
.lock{position:relative;width:16px;height:12px;margin:6px 12px 0 0;background:var(--green);border-radius:3px;box-shadow:0 0 10px var(--green)}
.lock::before{content:"";position:absolute;left:3px;top:-9px;width:10px;height:10px;border:3px solid var(--green);border-bottom:0;border-radius:8px 8px 0 0}
nav.top ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
nav.top a{display:block;color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:500;padding:7px 11px;border-radius:4px}
nav.top a:hover{color:var(--green);background:rgba(34,229,139,.1)}
/* ===== 4. HERO (centered) + RADAR, SHIELD, TERMINAL ===== */
.hero{position:relative;overflow:hidden;padding:56px max(24px,calc((100% - 1060px)/2)) 84px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(34,229,139,.16),transparent 62%),
    linear-gradient(rgba(34,229,139,.05) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(34,229,139,.05) 1px,transparent 1px) 0 0/40px 40px,var(--bg)}
.hero::after{content:"";position:absolute;left:0;right:0;top:-140px;height:140px;background:linear-gradient(transparent,rgba(34,229,139,.09),transparent);animation:scan 8s linear infinite;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero>p{margin-left:auto;margin-right:auto}
.lead{font-size:1.18rem;color:var(--muted)}
.btn{display:inline-block;background:var(--green);color:#03150C;font-weight:700;padding:13px 28px;border-radius:6px;text-decoration:none;box-shadow:var(--glow)}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--cyan);margin-left:12px;box-shadow:none}
.btn.ghost:hover{background:rgba(61,214,245,.15)}

.radar{position:relative;width:min(440px,94%);margin:0 auto 20px}
.rsvg{display:block;width:100%;overflow:visible}
.rsvg .ring{fill:none;stroke:rgba(34,229,139,.32);stroke-width:1.5;stroke-dasharray:4 7;transform-box:fill-box;transform-origin:center}
.rsvg .r1{animation:spin 24s linear infinite}
.rsvg .r2{animation:spin 34s linear infinite reverse}
.rsvg .r3{animation:spin 46s linear infinite}
.rsvg .s0{stop-color:#22E58B;stop-opacity:.04}
.rsvg .s1{stop-color:#22E58B;stop-opacity:.5}
.rsvg .sweep{transform-origin:180px 130px;animation:spin 4s linear infinite}
.rsvg .sweep path{fill:url(#sweepfill)}
.rsvg .sh{fill:rgba(34,229,139,.14);stroke:var(--green);stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(34,229,139,.6));animation:flash 1s ease-out infinite;animation-delay:3.04s}
.rsvg .ck{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 5s ease-in-out infinite}
.rsvg .threat{fill:var(--red);filter:drop-shadow(0 0 6px var(--red));transform-box:fill-box;transform-origin:center;opacity:0}
.rsvg .t1{animation:hit1 4s ease-in infinite}
.rsvg .t2{animation:hit2 4s ease-in infinite 1s}
.rsvg .t3{animation:hit3 4s ease-in infinite 2s}
.rsvg .t4{animation:hit4 4s ease-in infinite 3s}
.chip{position:absolute;font:700 .74rem "JetBrains Mono",ui-monospace,monospace;color:var(--green);background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:3px 12px;white-space:nowrap;animation:floaty 4s ease-in-out infinite}
.chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px;box-shadow:0 0 8px currentColor}
.c1{top:64px;left:-30px}
.c2{top:176px;right:-34px;color:var(--amber);animation-delay:-1.3s}
.c3{bottom:12px;left:-4px;color:var(--cyan);animation-delay:-2.6s}

.term{width:min(580px,100%);margin:34px auto 0;text-align:left;background:#020504;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 0 34px rgba(34,229,139,.12)}
.term-bar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:#0A1311;border-bottom:1px solid var(--line)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:var(--red)}
.term-bar i:nth-child(2){background:var(--amber)}
.term-bar i:nth-child(3){background:var(--green)}
.term-bar span{margin-left:8px;font:700 .75rem "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.term-body{padding:16px 18px;font:500 .92rem/1.8 "JetBrains Mono",ui-monospace,monospace}
.term-body::after{content:"";display:block;width:9px;height:17px;margin-top:2px;background:var(--green);animation:blink 1s steps(2) infinite}
.ln{overflow:hidden;white-space:nowrap;width:0;color:#9EF7C8}
.ln.warn{color:var(--amber)}
.ln.ok{color:var(--green)}
.l1{animation:ty1 12s steps(18) infinite}
.l2{animation:ty2 12s steps(29) infinite}
.l3{animation:ty3 12s steps(25) infinite}
.l4{animation:ty4 12s steps(31) infinite}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:44px auto 0;max-width:940px;text-align:left}
.stat{background:rgba(10,19,17,.9);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:8px;padding:16px 20px;color:var(--muted);font-size:.93rem}
.stat:nth-child(2){border-left-color:var(--amber)}
.stat:nth-child(3){border-left-color:var(--red)}
.stat:nth-child(4){border-left-color:var(--cyan)}
.stat b{display:block;font-family:"Chakra Petch",sans-serif;font-size:1.15rem;color:#fff}
/* ===== 5. SECTIONS ===== */
section{padding:80px max(24px,calc((100% - 1060px)/2));border-top:1px solid var(--line)}
section:nth-of-type(even){background:#060D0B}
/* ===== 6. CARDS AND BOXES ===== */
.grid,.two{display:grid;gap:18px;margin-top:24px}
.grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.two{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;transition:transform .25s,border-color .25s,box-shadow .25s}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:24px;height:24px;border-top:3px solid var(--green);border-left:3px solid var(--green);border-radius:10px 0 0 0}
.card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:var(--glow)}
.card p{margin:0;font-size:.96rem;color:var(--muted)}
.card ul{margin:0;padding-left:20px;color:var(--muted)}
.card li{margin-bottom:.5em}
.card li::marker{color:var(--green)}
.tag{display:inline-block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;font-weight:700;color:var(--cyan);background:rgba(61,214,245,.1);padding:2px 10px;border-radius:4px;margin-bottom:12px;letter-spacing:.05em}
.key{background:linear-gradient(90deg,rgba(34,229,139,.14),rgba(34,229,139,.03));border:1px solid rgba(34,229,139,.45);border-left:8px solid var(--green);border-radius:8px;padding:18px 24px;margin:28px 0}
.key b{display:inline-block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.74rem;letter-spacing:.1em;color:#03150C;background:var(--green);padding:2px 10px;border-radius:3px;margin-bottom:8px}
.key p{margin:0;color:var(--ink);max-width:none}
.key.warn{background:linear-gradient(90deg,rgba(255,77,94,.16),rgba(255,77,94,.04));border-color:rgba(255,77,94,.55);border-left-color:var(--red)}
.key.warn b{background:var(--red);color:#fff}
.essay{background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--green);border-radius:10px;padding:30px 34px;margin-top:20px}
.essay p{max-width:none;color:var(--muted);text-align:justify}
.essay p:last-child{margin-bottom:0}
/* ===== 7. TIMELINE AND PIPELINE ===== */
ol.tl{list-style:none;margin:30px 0 0;padding:0 0 0 38px;position:relative}
ol.tl::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;background:repeating-linear-gradient(180deg,var(--green) 0 14px,transparent 14px 22px)}
ol.tl li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin-bottom:14px}
ol.tl li::before{content:"";position:absolute;left:-37px;top:22px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:4px solid var(--green);box-shadow:0 0 12px var(--green)}
ol.tl li:nth-child(3n+2)::before{border-color:var(--cyan);box-shadow:0 0 12px var(--cyan)}
ol.tl li:nth-child(3n+3)::before{border-color:var(--amber);box-shadow:0 0 12px var(--amber)}
ol.tl b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.92rem;color:var(--amber)}
ol.tl h3{margin:2px 0 6px}
ol.tl p{margin:0;font-size:.96rem;color:var(--muted)}
ol.pipe{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;padding:0;margin:26px 0}
ol.pipe li{counter-increment:p;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:8px;padding:18px}
ol.pipe li:nth-child(even){border-top-color:var(--cyan)}
ol.pipe li::before{content:"0" counter(p);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;color:var(--amber)}
ol.pipe b{display:block;font-family:"Chakra Petch",sans-serif;font-size:1.02rem;color:#fff}
ol.pipe span{font-size:.93rem;color:var(--muted)}
/* ===== 8. TABLE, CODE, FAQ ===== */
.scroll{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#020504;color:var(--green);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
td:first-child{color:#fff;font-weight:700}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--panel2)}
pre.code{background:#020504;border:1px solid var(--line);border-left:6px solid var(--green);border-radius:8px;padding:22px;overflow-x:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.86rem;color:#9EF7C8;margin:22px 0}
details{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--cyan);border-radius:8px;padding:15px 22px;margin-bottom:12px}
details[open]{border-left-color:var(--green)}
summary{cursor:pointer;font-weight:700;color:#fff}
details p{margin:12px 0 0;color:var(--muted)}
/* ===== 9. FOOTER ===== */
footer{background:#020403;color:var(--muted);text-align:center;padding:34px 20px 46px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;border-top:3px solid var(--green)}
/* ===== 10. ANIMATION + RESPONSIVE ===== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scan{to{transform:translateY(1400px)}}
@keyframes floaty{50%{transform:translateY(-8px)}}
@keyframes blink{to{visibility:hidden}}
@keyframes draw{0%,8%{stroke-dashoffset:1}30%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes flash{0%{stroke:#fff;filter:drop-shadow(0 0 16px #22E58B)}40%,100%{stroke:#22E58B;filter:drop-shadow(0 0 7px rgba(34,229,139,.6))}}
@keyframes hit1{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}70%{transform:translate(108px,62px) scale(1);opacity:1}76%{transform:translate(108px,62px) scale(2.8);opacity:0}100%{opacity:0}}
@keyframes hit2{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}70%{transform:translate(-108px,62px) scale(1);opacity:1}76%{transform:translate(-108px,62px) scale(2.8);opacity:0}100%{opacity:0}}
@keyframes hit3{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}70%{transform:translate(108px,-62px) scale(1);opacity:1}76%{transform:translate(108px,-62px) scale(2.8);opacity:0}100%{opacity:0}}
@keyframes hit4{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}70%{transform:translate(-108px,-62px) scale(1);opacity:1}76%{transform:translate(-108px,-62px) scale(2.8);opacity:0}100%{opacity:0}}
@keyframes ty1{0%,2%{width:0}12%,96%{width:18ch}100%{width:0}}
@keyframes ty2{0%,16%{width:0}30%,96%{width:29ch}100%{width:0}}
@keyframes ty3{0%,34%{width:0}46%,96%{width:25ch}100%{width:0}}
@keyframes ty4{0%,50%{width:0}64%,96%{width:31ch}100%{width:0}}
@media(max-width:600px){
  .btn.ghost{margin:12px 0 0}
  .essay{padding:22px}.essay p{text-align:left}
  ol.tl{padding-left:32px}ol.tl li::before{left:-31px}
  .c1{left:-6px}.c2{right:-6px}.c3{left:0}
  .term-body{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ln{width:auto}
  .rsvg .ck{stroke-dashoffset:0}
}