:root{
  --bg: oklch(0.16 0.012 240);
  --bg-2: oklch(0.13 0.012 240);
  --panel: oklch(0.20 0.012 240);
  --panel-2: oklch(0.235 0.012 240);
  --line: oklch(0.30 0.012 240);
  --line-2: oklch(0.38 0.012 240);
  --text: oklch(0.96 0.005 240);
  --muted: oklch(0.66 0.012 240);
  --dim: oklch(0.50 0.012 240);
  --lime: oklch(0.86 0.20 130);
  --lime-2: oklch(0.72 0.20 130);
  --amber: oklch(0.80 0.16 75);
  --danger: oklch(0.66 0.22 25);
  --cyan: oklch(0.82 0.13 220);
  --violet: oklch(0.72 0.18 295);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
::selection{background:var(--lime); color:#000}

/* Scrollbar */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--lime)}

/* ============ Layout ============ */
.page{min-height:100vh; max-width:100vw; overflow-x:hidden}
.container{max-width:1280px; margin:0 auto; padding:0 32px}
section{position:relative; border-top:1px solid var(--line)}
.section-pad{padding:96px 0}

/* Background grid */
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, oklch(0.30 0.012 240 / 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.30 0.012 240 / 0.35) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Section meta label */
.sec-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.sec-label::before{content:""; width:24px; height:1px; background:var(--lime)}
.sec-num{color:var(--lime)}

h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-0.02em; text-wrap:balance}
.h1{font-size:clamp(56px, 8vw, 104px); line-height:0.95; letter-spacing:-0.04em; font-weight:600}
.h2{font-size:clamp(40px, 5vw, 64px); line-height:1; letter-spacing:-0.03em}
.h3{font-size:clamp(22px, 2vw, 28px); line-height:1.15}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:var(--mono)}
.lime{color:var(--lime)}
.amber{color:var(--amber)}
.danger{color:var(--danger)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}

/* ============ Nav ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; backdrop-filter: blur(12px);
  background:oklch(0.16 0.012 240 / 0.7);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:-0.01em}
.brand-mark{
  width:28px; height:28px; position:relative;
  background:var(--bg); border:1px solid var(--lime);
  display:grid; place-items:center; overflow:hidden;
}
.brand-mark::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 49%, var(--lime) 50%, transparent 51%);
  animation: scan 2.4s linear infinite;
}
.brand-mark span{
  position:relative; font-size:13px; font-weight:700; color:var(--lime); font-family:var(--mono);
}
@keyframes scan{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}
.brand-name{color:var(--text)}
.brand-tld{color:var(--muted)}

.nav-links{display:flex; gap:28px; font-family:var(--mono); font-size:12px; color:var(--muted)}
.nav-links a:hover{color:var(--lime)}
.nav-cta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px}
.status-dot{width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 var(--lime); animation: pulse 1.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 oklch(0.86 0.20 130 / 0.7)}
  70%{box-shadow:0 0 0 8px oklch(0.86 0.20 130 / 0)}
  100%{box-shadow:0 0 0 0 oklch(0.86 0.20 130 / 0)}
}

@media(max-width:780px){ .nav-links{display:none} }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; font-family:var(--mono); font-size:13px; font-weight:600;
  border:1px solid var(--line-2); transition: all .18s ease;
  letter-spacing:0.02em;
}
.btn-primary{background:var(--lime); color:#0a0d10; border-color:var(--lime)}
.btn-primary:hover{background:transparent; color:var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 32px oklch(0.86 0.20 130 / 0.3)}
.btn-ghost{background:transparent; color:var(--text)}
.btn-ghost:hover{border-color:var(--lime); color:var(--lime)}
.btn-arrow{display:inline-block; transition:transform .18s}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* ============ Hero ============ */
.hero{padding:140px 0 80px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; align-items:center; position:relative; z-index:2}
@media(max-width:1024px){ .hero-grid{grid-template-columns:1fr; gap:48px} }

.hero-tag{
  display:inline-flex; align-items:center; gap:10px; padding:6px 12px;
  border:1px solid var(--line-2); font-family:var(--mono); font-size:11px;
  color:var(--muted); margin-bottom:28px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--panel);
}
.hero-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--lime); animation:pulse 1.6s infinite}

.hero h1 .strike{position:relative; color:var(--muted)}
.hero h1 .strike::after{
  content:""; position:absolute; left:-2%; right:-2%; top:55%; height:6px;
  background:var(--danger); transform:scaleX(0); transform-origin:left;
  animation: strike 1.2s 0.6s ease-out forwards;
}
@keyframes strike{
  0%{transform:scaleX(0)}
  100%{transform:scaleX(1)}
}

.hero p.lede{
  font-size:18px; line-height:1.55; color:var(--muted); margin-top:28px; max-width:520px;
}

.hero-actions{display:flex; gap:12px; margin-top:36px; flex-wrap:wrap}

.hero-stats{display:flex; gap:32px; margin-top:48px; padding-top:32px; border-top:1px solid var(--line); flex-wrap:wrap}
.hero-stat .num{font-family:var(--mono); font-size:24px; font-weight:600; color:var(--lime); display:block}
.hero-stat .lbl{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:4px}

/* Hero scan demo */
.scan-demo{
  background:var(--panel);
  border:1px solid var(--line);
  position:relative;
  font-family:var(--mono);
  overflow:hidden;
}
.scan-demo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent, transparent 50%, oklch(0.86 0.20 130 / 0.03) 50%, oklch(0.86 0.20 130 / 0.03));
  background-size: 100% 4px;
}
.scan-head{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--panel-2);
  font-size:11px; color:var(--muted);
}
.scan-dots{display:flex; gap:6px; margin-right:8px}
.scan-dots i{width:10px; height:10px; border:1px solid var(--line-2); display:block}
.scan-dots i:nth-child(1){border-color:var(--danger)}
.scan-dots i:nth-child(2){border-color:var(--amber)}
.scan-dots i:nth-child(3){border-color:var(--lime)}

.scan-input-row{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.scan-input-row .prompt{color:var(--lime)}
.scan-input-row input{
  flex:1; background:transparent; border:none; color:var(--text);
  font-family:var(--mono); font-size:13px; outline:none;
}
.scan-input-row .run{
  font-size:11px; padding:4px 10px; border:1px solid var(--lime); color:var(--lime);
  letter-spacing:0.08em; text-transform:uppercase;
}
.scan-input-row .run:hover{background:var(--lime); color:#000}

.scan-body{padding:14px; min-height:380px; font-size:12px; line-height:1.7; position:relative}
.scan-line{display:flex; gap:8px; align-items:baseline}
.scan-line .ts{color:var(--dim); width:64px; flex-shrink:0; font-size:10px}
.scan-line .tag{
  font-size:10px; padding:1px 6px; border:1px solid var(--line-2);
  letter-spacing:0.08em; text-transform:uppercase; flex-shrink:0;
}
.scan-line .tag.ok{color:var(--lime); border-color:var(--lime)}
.scan-line .tag.warn{color:var(--amber); border-color:var(--amber)}
.scan-line .tag.err{color:var(--danger); border-color:var(--danger)}
.scan-line .tag.info{color:var(--cyan); border-color:var(--cyan)}
.scan-line .msg{color:var(--text); flex:1}
.scan-line .msg .url{color:var(--muted)}

.scan-progress{
  position:relative; height:4px; background:var(--bg-2); border-top:1px solid var(--line);
  overflow:hidden;
}
.scan-progress-bar{
  position:absolute; left:0; top:0; bottom:0; background:var(--lime);
  transition: width .3s ease;
}
.scan-progress-bar::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:30px;
  background:linear-gradient(90deg, transparent, oklch(0.86 0.20 130 / 0.7));
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{
  0%{transform:translateX(0); opacity:0.4}
  100%{transform:translateX(20px); opacity:1}
}
.scan-foot{
  display:flex; justify-content:space-between; padding:10px 14px;
  border-top:1px solid var(--line); background:var(--panel-2);
  font-size:10px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase;
}
.scan-cursor{display:inline-block; width:7px; height:14px; background:var(--lime); margin-left:4px; vertical-align:middle; animation: blink 1s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1} 50%,100%{opacity:0}}

.hero-side-meta{
  position:absolute; right:32px; top:140px; font-family:var(--mono); font-size:10px;
  color:var(--dim); letter-spacing:0.08em; text-align:right; line-height:1.8;
  display:none;
}
@media(min-width:1280px){ .hero-side-meta{display:block} }

/* ============ Marquee ============ */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); overflow:hidden; padding:18px 0;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted);
}
.marquee-inner{display:flex; gap:48px; animation: marquee 40s linear infinite; white-space:nowrap; width:max-content}
.marquee-inner span{display:flex; align-items:center; gap:12px}
.marquee-inner span::before{content:"◢"; color:var(--lime); font-size:10px}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ============ Why testing matters ============ */
.why{padding:120px 0; position:relative}
.why-head{display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-bottom:64px; align-items:end}
@media(max-width:900px){ .why-head{grid-template-columns:1fr} }
.why-head p{color:var(--muted); font-size:17px; line-height:1.6; max-width:520px}

.threat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:900px){ .threat-grid{grid-template-columns:repeat(2, 1fr)} }
.threat{
  background:var(--panel); padding:28px; min-height:200px; position:relative; overflow:hidden;
  transition: background .25s ease;
}
.threat:hover{background:var(--panel-2)}
.threat-num{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.1em; margin-bottom:18px}
.threat-title{font-family:var(--display); font-size:22px; font-weight:600; line-height:1.1; margin-bottom:10px; letter-spacing:-0.02em}
.threat-desc{font-size:13px; color:var(--muted); line-height:1.5}
.threat-counter{
  position:absolute; bottom:16px; right:16px; font-family:var(--mono);
  font-size:11px; color:var(--lime);
}
.threat-icon{
  position:absolute; top:24px; right:24px; width:18px; height:18px;
  border:1px solid var(--lime); display:grid; place-items:center;
}
.threat-icon::after{content:""; width:6px; height:6px; background:var(--lime); animation: pulse 1.6s infinite}

/* Erosion bar */
.erosion{
  margin-top:80px; padding:40px; background:var(--panel); border:1px solid var(--line);
  display:grid; grid-template-columns: 1fr 2fr; gap:40px; align-items:center;
}
@media(max-width:900px){ .erosion{grid-template-columns:1fr} }
.erosion h3{font-family:var(--display); font-size:28px; line-height:1.1; margin-bottom:8px}
.erosion p{color:var(--muted); font-size:14px; line-height:1.5}
.erosion-track{position:relative; height:120px; font-family:var(--mono); font-size:11px}
.erosion-day{
  position:absolute; top:0; bottom:0; display:flex; flex-direction:column;
  justify-content:space-between; align-items:center; color:var(--muted);
}
.erosion-day .bar{width:14px; background:var(--lime); transition: all 1s ease}
.erosion-day.broken .bar{background:var(--danger)}
.erosion-day.warn .bar{background:var(--amber)}
.erosion-line{position:absolute; left:0; right:0; height:1px; background:var(--line)}

/* ============ Services ============ */
.services{padding:120px 0; background:var(--bg-2)}
.services-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; flex-wrap:wrap; gap:20px}
.services-head h2{max-width:680px}

.svc-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.svc{background:var(--panel); position:relative; overflow:hidden; min-height:420px; display:flex; flex-direction:column}
.svc-1{grid-column:span 3}
.svc-2{grid-column:span 3}
.svc-3{grid-column:span 2}
.svc-4{grid-column:span 2}
.svc-5{grid-column:span 2}
@media(max-width:900px){
  .svc-grid{grid-template-columns:1fr}
  .svc-1,.svc-2,.svc-3,.svc-4,.svc-5{grid-column:span 1}
}
.svc-viz{
  height:200px; border-bottom:1px solid var(--line); background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; padding:16px;
  pointer-events:none; overflow:hidden; flex-shrink:0;
}
.svc-viz > svg{max-height:100%; max-width:100%}
.svc-body{padding:28px; display:flex; flex-direction:column; flex:1}
.svc-num{font-family:var(--mono); font-size:11px; color:var(--lime); letter-spacing:0.1em; margin-bottom:18px}
.svc-title{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-0.02em; margin-bottom:10px; line-height:1.1}
.svc-desc{font-size:13px; color:var(--muted); line-height:1.55; flex:1}
.svc-meta{display:flex; gap:14px; margin-top:20px; font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:0.08em; text-transform:uppercase; flex-wrap:wrap}
.svc-meta span{display:flex; align-items:center; gap:6px}
.svc-meta span::before{content:""; width:5px; height:5px; background:var(--lime)}

/* ============ How it works ============ */
.how{padding:120px 0}
.how-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:48px}
@media(max-width:900px){ .how-grid{grid-template-columns:1fr} }
.step{background:var(--panel); padding:32px; position:relative; min-height:240px}
.step-num{
  font-family:var(--mono); font-size:48px; font-weight:600; color:var(--line-2);
  letter-spacing:-0.04em; line-height:1; margin-bottom:20px;
}
.step-title{font-family:var(--display); font-size:20px; font-weight:600; margin-bottom:8px; letter-spacing:-0.01em}
.step-desc{font-size:13px; color:var(--muted); line-height:1.55}
.step-arrow{
  position:absolute; right:-12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; background:var(--bg); border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--mono); color:var(--lime); z-index:2;
}
@media(max-width:900px){ .step-arrow{display:none} }

/* ============ Report ============ */
.report{padding:120px 0; background:var(--bg-2)}
.report-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start}
@media(max-width:1024px){ .report-grid{grid-template-columns:1fr} }
.report-card{
  background:var(--panel); border:1px solid var(--line); font-family:var(--mono); font-size:12px;
}
.report-head{
  padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between;
  background:var(--panel-2); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted);
}
.report-grade{
  padding:32px; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:auto 1fr; gap:32px; align-items:center;
}
.grade-circle{
  width:120px; height:120px; border:2px solid var(--lime); border-radius:50%;
  display:grid; place-items:center; position:relative;
}
.grade-circle::before{
  content:""; position:absolute; inset:-8px; border:1px dashed var(--lime); border-radius:50%;
  animation: spin 12s linear infinite;
}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.grade-letter{font-family:var(--display); font-size:56px; font-weight:600; color:var(--lime); line-height:1}
.grade-label{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.1em}
.grade-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grade-stat .label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em}
.grade-stat .value{font-size:22px; color:var(--text); margin-top:4px; font-weight:600}
.grade-stat .delta{font-size:10px; color:var(--lime)}
.grade-stat .delta.bad{color:var(--danger)}

.report-rows{padding:8px 0}
.report-row{
  padding:12px 18px; display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center;
  border-bottom:1px solid var(--line); font-size:12px;
}
.report-row:last-child{border-bottom:none}
.report-row .stat{
  width:8px; height:8px;
}
.report-row .stat.ok{background:var(--lime)}
.report-row .stat.warn{background:var(--amber)}
.report-row .stat.err{background:var(--danger)}
.report-row .name{color:var(--text)}
.report-row .meta{color:var(--muted); font-size:10px}
.report-row .score{color:var(--text); font-weight:600}

.report-summary{padding-left:0}
.report-summary h2{margin-bottom:24px}
.report-summary p{color:var(--muted); font-size:16px; line-height:1.6; margin-bottom:24px}
.report-bullets{display:grid; gap:14px; margin-top:24px; font-family:var(--mono); font-size:13px}
.report-bullets li{display:flex; gap:14px; align-items:flex-start; list-style:none; padding:14px; border:1px solid var(--line); background:var(--panel)}
.report-bullets li::before{
  content:"✓"; color:var(--lime); font-weight:700; flex-shrink:0;
}

/* ============ Dark Web ============ */
.darkweb{padding:120px 0; position:relative; overflow:hidden}
.darkweb-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center}
@media(max-width:1024px){ .darkweb-grid{grid-template-columns:1fr} }
.darkweb h2{margin-bottom:24px}
.darkweb p{color:var(--muted); font-size:17px; line-height:1.6; margin-bottom:32px}

.dw-feed{
  background:var(--bg-2); border:1px solid var(--line); font-family:var(--mono);
  font-size:11px; height:480px; overflow:hidden; position:relative;
}
.dw-feed::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, var(--bg-2), transparent 15%, transparent 85%, var(--bg-2));
}
.dw-feed-head{
  padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between;
  font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
}
.dw-feed-list{padding:8px 18px}
.dw-feed-row{
  padding:8px 0; border-bottom:1px dashed var(--line); display:grid;
  grid-template-columns:60px 80px 1fr auto; gap:12px; align-items:baseline; font-size:11px;
}
.dw-feed-row .ts{color:var(--dim)}
.dw-feed-row .src{color:var(--violet); letter-spacing:0.04em}
.dw-feed-row .msg{color:var(--text)}
.dw-feed-row .msg .hl{color:var(--danger)}
.dw-feed-row .sev{font-size:9px; padding:1px 6px; border:1px solid; letter-spacing:0.08em}
.dw-feed-row .sev.h{color:var(--danger); border-color:var(--danger)}
.dw-feed-row .sev.m{color:var(--amber); border-color:var(--amber)}
.dw-feed-row .sev.l{color:var(--cyan); border-color:var(--cyan)}

/* ============ Pricing ============ */
.pricing{padding:120px 0; background:var(--bg-2)}
.pricing-head{text-align:left; margin-bottom:48px; max-width:680px}
.pricing-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:1024px){ .pricing-grid{grid-template-columns:repeat(2, 1fr)} }
@media(max-width:600px){ .pricing-grid{grid-template-columns:1fr} }
.tier{
  background:var(--panel); padding:36px 28px; display:flex; flex-direction:column; gap:18px;
  position:relative;
}
.tier.featured{background:var(--panel-2); border:1px solid var(--lime); margin:-1px}
.tier.featured::before{
  content:"MOST POPULAR"; position:absolute; top:-1px; left:50%; transform:translateX(-50%) translateY(-50%);
  background:var(--lime); color:#000; font-family:var(--mono); font-size:10px;
  padding:4px 10px; letter-spacing:0.1em; font-weight:600;
}
.tier-name{font-family:var(--mono); font-size:11px; color:var(--lime); letter-spacing:0.14em; text-transform:uppercase}
.tier-tag{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:-12px}
.tier-price{font-family:var(--display); font-size:48px; font-weight:600; letter-spacing:-0.03em; line-height:1}
.tier-price .currency{font-size:18px; color:var(--muted); font-family:var(--mono); font-weight:400; vertical-align:top; margin-right:2px}
.tier-price .per{font-size:12px; color:var(--muted); font-family:var(--mono); font-weight:400}
.tier-features{list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--text); flex:1}
.tier-features li{display:flex; gap:10px; align-items:flex-start; line-height:1.4}
.tier-features li::before{content:"+"; color:var(--lime); font-family:var(--mono); flex-shrink:0; font-weight:600}
.tier-features li.disabled{color:var(--dim); text-decoration:line-through}
.tier-features li.disabled::before{content:"−"; color:var(--dim)}
.tier-cta{
  padding:12px 16px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; border:1px solid var(--line-2); text-align:center;
  transition: all .18s ease;
}
.tier-cta:hover{border-color:var(--lime); color:var(--lime)}
.tier.featured .tier-cta{background:var(--lime); color:#000; border-color:var(--lime)}
.tier.featured .tier-cta:hover{background:transparent; color:var(--lime)}

/* ============ FAQ ============ */
.faq{padding:120px 0}
.faq-grid{display:grid; grid-template-columns:1fr 1.5fr; gap:64px}
@media(max-width:900px){ .faq-grid{grid-template-columns:1fr} }
.faq-list{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line); padding:24px 0; cursor:pointer}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq-q h3{font-family:var(--display); font-size:20px; font-weight:500; letter-spacing:-0.01em; flex:1}
.faq-toggle{
  width:24px; height:24px; border:1px solid var(--line-2); display:grid; place-items:center;
  font-family:var(--mono); color:var(--lime); flex-shrink:0; transition: all .2s;
}
.faq-item.open .faq-toggle{background:var(--lime); color:#000}
.faq-a{
  max-height:0; overflow:hidden; transition: max-height .35s ease, margin-top .35s ease;
  color:var(--muted); font-size:15px; line-height:1.6;
}
.faq-item.open .faq-a{max-height:300px; margin-top:14px}

/* ============ CTA ============ */
.cta{padding:120px 0; position:relative; overflow:hidden}
.cta-card{
  background:var(--panel); border:1px solid var(--line); padding:80px;
  position:relative; overflow:hidden;
}
@media(max-width:700px){ .cta-card{padding:48px 32px} }
.cta-card h2{position:relative; max-width:780px; margin-bottom:24px}
.cta-card p{position:relative; color:var(--muted); font-size:17px; max-width:600px; margin-bottom:32px; line-height:1.5}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap; position:relative}
.cta-radar{
  position:absolute; right:-100px; top:50%; transform:translateY(-50%); width:500px; height:500px;
  pointer-events:none; opacity:0.7;
}
@media(max-width:1024px){ .cta-radar{opacity:0.25; right:-200px} }

/* ============ Footer ============ */
.footer{
  padding:64px 0 32px; background:var(--bg-2); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:48px; margin-bottom:48px}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
.footer h4{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; font-weight:500; margin-bottom:18px}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--muted)}
.footer ul a:hover{color:var(--lime)}
.footer-brand p{color:var(--muted); font-size:12px; margin-top:14px; line-height:1.6; max-width:320px}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:24px;
  border-top:1px solid var(--line); color:var(--dim); font-size:11px; flex-wrap:wrap; gap:12px;
}
.footer-status{display:flex; align-items:center; gap:8px}

/* Scanline overlay (subtle) */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image: repeating-linear-gradient(0deg,
    transparent 0,
    transparent 3px,
    oklch(0.86 0.20 130 / 0.02) 3px,
    oklch(0.86 0.20 130 / 0.02) 4px
  );
  mix-blend-mode: overlay;
}

/* SVG anim helpers */
@keyframes dash{ to{ stroke-dashoffset: -200 } }
@keyframes ping-out{
  0%{ r: 4; opacity:0.9 }
  100%{ r: 80; opacity:0 }
}
@keyframes node-pulse{
  0%,100%{ r: 3 }
  50%{ r: 5 }
}
@keyframes count{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}
.fade-up{animation: count .4s ease forwards}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(20px); transition: opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}