/* ============================================================
   CERBERUS·GUARD — Anti-DDoS landing
   Dark neon "coding" aesthetic. Green accent. RU.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* surfaces */
  --bg:        #05080d;
  --bg-2:      #070b12;
  --panel:     #0a111a;
  --panel-2:   #0d1825;
  --panel-3:   #102233;
  --border:    #16222e;
  --border-br: #1e3442;

  /* ink */
  --text:      #e9f4f0;
  --text-dim:  #8aa39b;
  --text-mut:  #56716a;
  --mono-dim:  #43615a;

  /* accent — neon green */
  --acc:       #00e5a0;
  --acc-2:     #00b88a;
  --acc-deep:  #07664f;
  --acc-glow:  rgba(0,229,160,.45);
  --acc-soft:  rgba(0,229,160,.10);

  /* signal */
  --danger:    #ff3d52;
  --danger-gl: rgba(255,61,82,.45);
  --warn:      #ffc24b;

  --font-d: 'Space Grotesk', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --r:  14px;
  --r-lg: 20px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-d);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--acc); color:#02110c; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
canvas{ display:block; }
img{ max-width:100%; display:block; }

/* ---- ambient page background grid + glow ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(0,229,160,.10), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(0,229,160,.05), transparent 70%);
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:2; }
section{ position:relative; z-index:2; }

/* ============================= TYPOGRAPHY ===================== */
.eyebrow{
  font-family:var(--font-m); font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acc);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--acc); opacity:.7;
}
.eyebrow.center::after{
  content:""; width:22px; height:1px; background:var(--acc); opacity:.7;
}

h1,h2,h3{ font-weight:600; line-height:1.06; letter-spacing:-.02em; }
h1{ font-size:clamp(38px,5.6vw,72px); }
h2{ font-size:clamp(30px,3.6vw,48px); }
.lead{ font-size:clamp(16px,1.5vw,19px); color:var(--text-dim); max-width:60ch; }
.mono{ font-family:var(--font-m); }
.acc{ color:var(--acc); }
.danger{ color:var(--danger); }

.section-head{ max-width:760px; margin-bottom:54px; }
.section-head h2{ margin:18px 0 16px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-m); font-size:11.5px; letter-spacing:.04em;
  color:var(--text-dim); padding:5px 11px; border:1px solid var(--border-br);
  border-radius:999px; background:rgba(255,255,255,.015);
}
.tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc); }

/* ============================= BUTTONS ======================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-m); font-size:14px; font-weight:600; letter-spacing:.01em;
  padding:14px 24px; border-radius:11px; transition:.18s ease; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-primary{
  background:var(--acc); color:#02130d;
  box-shadow:0 0 0 1px var(--acc), 0 8px 30px -8px var(--acc-glow);
}
.btn-primary:hover{ box-shadow:0 0 0 1px var(--acc), 0 8px 38px -6px var(--acc-glow); transform:translateY(-2px); }
.btn-ghost{
  color:var(--text); border:1px solid var(--border-br);
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover{ border-color:var(--acc); color:var(--acc); background:var(--acc-soft); }
.btn-sm{ padding:10px 16px; font-size:12.5px; }
.btn-block{ width:100%; }

/* ============================= NAV ========================== */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:.25s ease;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; max-width:var(--maxw); margin:0 auto; padding:0 28px;
}
header.nav.scrolled{ background:rgba(5,8,13,.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-m); font-weight:700; letter-spacing:.02em; font-size:15px; }
.brand .mark{ width:26px; height:26px; }
.brand b{ color:var(--text); }
.brand span{ color:var(--text-mut); }
.nav-links{ display:flex; gap:30px; font-family:var(--font-m); font-size:13px; color:var(--text-dim); }
.nav-links a{ position:relative; transition:.16s; }
.nav-links a:hover{ color:var(--acc); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-status{ display:flex; align-items:center; gap:8px; font-family:var(--font-m); font-size:12px; color:var(--text-dim); }
.nav-status .pulse{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 var(--acc-glow); animation:pulse 2.2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 var(--acc-glow); }
  70%{ box-shadow:0 0 0 9px rgba(0,229,160,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,229,160,0); }
}
@media(max-width:980px){ .nav-links,.nav-status{ display:none; } }

/* ============================= HERO ========================= */
.hero{ padding:140px 0 70px; min-height:96vh; display:flex; align-items:center; }
.hero .wrap{ width:100%; }

/* variant switcher */
.variant-bar{
  position:fixed; z-index:55; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; padding:6px;
  background:rgba(8,13,20,.86); backdrop-filter:blur(12px);
  border:1px solid var(--border-br); border-radius:14px;
  box-shadow:0 14px 50px -20px #000;
}
.variant-bar .vb-label{ font-family:var(--font-m); font-size:11px; color:var(--text-mut); padding:0 10px 0 6px; letter-spacing:.06em; text-transform:uppercase; }
.variant-bar button{
  font-family:var(--font-m); font-size:12.5px; font-weight:600; color:var(--text-dim);
  padding:8px 15px; border-radius:9px; transition:.16s; display:flex; flex-direction:column; align-items:center; line-height:1.1;
}
.variant-bar button small{ font-size:9.5px; color:var(--text-mut); font-weight:400; letter-spacing:.03em; margin-top:2px; }
.variant-bar button.on{ background:var(--acc); color:#02130d; }
.variant-bar button.on small{ color:#02130d; opacity:.7; }
.variant-bar button:not(.on):hover{ color:var(--acc); }

.hero-variant{ display:none; }
.hero-variant.active{ display:block; animation:fadeUp .5s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{opacity:1;transform:none;} }

.h-headline{ font-weight:600; }
.h-sub{ margin:24px 0 30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-meta{ display:flex; gap:26px; margin-top:38px; flex-wrap:wrap; }
.hero-meta .m{ display:flex; flex-direction:column; gap:3px; }
.hero-meta .m b{ font-family:var(--font-m); font-size:21px; color:var(--text); font-weight:600; }
.hero-meta .m span{ font-family:var(--font-m); font-size:11.5px; color:var(--text-mut); letter-spacing:.04em; }
.hero-meta .m .acc{ color:var(--acc); }

/* variant A: split — text + terminal */
.heroA{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
/* variant B: centered with canvas behind */
.heroB{ text-align:center; position:relative; }
.heroB .canvas-bg{ position:absolute; inset:-120px -10% -80px; z-index:0; }
.heroB .inner{ position:relative; z-index:2; max-width:880px; margin:0 auto; }
.heroB .hero-cta,.heroB .hero-meta{ justify-content:center; }
/* variant C: text + live defense dashboard */
.heroC{ display:grid; grid-template-columns:1fr 1.02fr; gap:50px; align-items:center; }

@media(max-width:980px){
  .heroA,.heroC{ grid-template-columns:1fr; gap:40px; }
  .hero{ padding:120px 0 60px; min-height:auto; }
}

/* ---- canvas core frame (cerberus) ---- */
.core-frame{
  position:relative; aspect-ratio:1/1; border-radius:var(--r-lg);
  border:1px solid var(--border); background:
    radial-gradient(60% 60% at 50% 45%, rgba(0,229,160,.06), transparent 70%),
    var(--panel);
  overflow:hidden;
}
.core-frame canvas{ width:100%; height:100%; }
.core-frame .corner{ position:absolute; width:14px; height:14px; border:1px solid var(--acc); opacity:.5; }
.core-frame .corner.tl{ top:12px; left:12px; border-right:none; border-bottom:none; }
.core-frame .corner.tr{ top:12px; right:12px; border-left:none; border-bottom:none; }
.core-frame .corner.bl{ bottom:12px; left:12px; border-right:none; border-top:none; }
.core-frame .corner.br{ bottom:12px; right:12px; border-left:none; border-top:none; }
.core-frame .ovl{ position:absolute; font-family:var(--font-m); font-size:11px; color:var(--text-dim); }
.core-frame .ovl.t{ top:16px; left:18px; color:var(--acc); letter-spacing:.1em; }
.core-frame .ovl.b{ bottom:16px; left:18px; right:18px; display:flex; justify-content:space-between; }
.core-frame .ovl .blink{ animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================= TERMINAL ===================== */
.terminal{
  border:1px solid var(--border-br); border-radius:var(--r);
  background:linear-gradient(180deg,#0a121b,#070d14);
  box-shadow:0 30px 80px -40px #000, inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
.term-bar{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--border); background:rgba(255,255,255,.015);
}
.term-bar .dots{ display:flex; gap:6px; }
.term-bar .dots i{ width:11px; height:11px; border-radius:50%; background:#22323e; }
.term-bar .dots i:nth-child(1){ background:#2a3b46; }
.term-bar .title{ font-family:var(--font-m); font-size:11.5px; color:var(--text-mut); margin-left:6px; }
.term-bar .right{ margin-left:auto; font-family:var(--font-m); font-size:11px; color:var(--acc); display:flex; align-items:center; gap:7px; }
.term-bar .right .dot{ width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 7px var(--acc); }
.term-body{
  font-family:var(--font-m); font-size:12.5px; line-height:1.75;
  padding:16px 18px; height:340px; overflow:hidden; position:relative;
}
.term-body .ln{ white-space:pre-wrap; word-break:break-word; }
.term-body .t-mut{ color:var(--text-mut); }
.term-body .t-dim{ color:var(--text-dim); }
.term-body .t-acc{ color:var(--acc); }
.term-body .t-dgr{ color:var(--danger); }
.term-body .t-warn{ color:var(--warn); }
.term-body .prompt::before{ content:"cerberus@scrub:~$ "; color:var(--acc-2); }
.cursor{ display:inline-block; width:8px; height:15px; background:var(--acc); vertical-align:-2px; animation:blink 1s steps(1) infinite; }

/* ============================= METRICS BAND ================= */
.metrics{ padding:30px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.012); }
.metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.metric{ padding:26px 24px; text-align:left; position:relative; }
.metric:not(:last-child)::after{ content:""; position:absolute; right:0; top:18%; height:64%; width:1px; background:var(--border); }
.metric .num{ font-family:var(--font-m); font-size:clamp(30px,3.4vw,42px); font-weight:600; color:var(--text); letter-spacing:-.02em; }
.metric .num .u{ color:var(--acc); font-size:.6em; }
.metric .lbl{ font-family:var(--font-m); font-size:12px; color:var(--text-mut); margin-top:6px; letter-spacing:.03em; }
@media(max-width:760px){ .metrics-grid{ grid-template-columns:repeat(2,1fr); } .metric:nth-child(2)::after{ display:none; } }

/* ============================= GENERIC SECTION ============== */
.s-pad{ padding:110px 0; }

/* how it works — flow */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:10px; }
.flow .step{
  border:1px solid var(--border); border-radius:var(--r); padding:24px 22px;
  background:var(--panel); position:relative; transition:.2s; overflow:hidden;
}
.flow .step:hover{ border-color:var(--border-br); transform:translateY(-3px); }
.flow .step .idx{ font-family:var(--font-m); font-size:12px; color:var(--acc); letter-spacing:.1em; }
.flow .step h3{ font-size:18px; margin:16px 0 9px; }
.flow .step p{ font-size:14px; color:var(--text-dim); line-height:1.55; }
.flow .step .glyph{ position:absolute; right:14px; top:18px; font-family:var(--font-m); font-size:11px; color:var(--mono-dim); }
.flow .conn{ position:absolute; right:-12px; top:50%; color:var(--acc); font-family:var(--font-m); z-index:3; }
@media(max-width:980px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .flow{ grid-template-columns:1fr; } }

/* flow diagram strip */
.pipe{
  margin-top:48px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--panel); padding:30px; display:grid;
  grid-template-columns:1fr auto 1.3fr auto 1fr; align-items:center; gap:20px;
}
.pipe .node{ text-align:center; }
.pipe .node .ico{
  width:64px; height:64px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--border-br); font-family:var(--font-m); font-size:11px; color:var(--text-dim);
  background:var(--panel-2);
}
.pipe .node.scrub .ico{ border-color:var(--acc); color:var(--acc); box-shadow:0 0 30px -8px var(--acc-glow); background:radial-gradient(circle,rgba(0,229,160,.12),transparent 70%); }
.pipe .node .nm{ font-size:13px; color:var(--text); font-weight:500; }
.pipe .node .ds{ font-family:var(--font-m); font-size:11px; color:var(--text-mut); margin-top:3px; }
.pipe .arrow{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:90px; }
.pipe .arrow .line{ height:2px; width:100%; border-radius:2px; position:relative; overflow:hidden; }
.pipe .arrow.dirty .line{ background:linear-gradient(90deg,var(--border),var(--danger)); }
.pipe .arrow.clean .line{ background:linear-gradient(90deg,var(--acc),var(--acc-2)); }
.pipe .arrow .line .pk{ position:absolute; top:0; bottom:0; width:30%; background:rgba(255,255,255,.4); animation:slide 1.6s linear infinite; }
@keyframes slide{ from{ left:-30%;} to{ left:100%; } }
.pipe .arrow .cap{ font-family:var(--font-m); font-size:10.5px; color:var(--text-mut); }
.pipe .arrow.dirty .cap{ color:var(--danger); }
.pipe .arrow.clean .cap{ color:var(--acc); }
@media(max-width:980px){ .pipe{ grid-template-columns:1fr; gap:10px; } .pipe .arrow{ flex-direction:row; min-width:0; transform:rotate(90deg); margin:6px 0; } }

/* ============================= FEATURES ==================== */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat{
  border:1px solid var(--border); border-radius:var(--r); padding:28px 24px;
  background:var(--panel); transition:.2s; position:relative; overflow:hidden;
}
.feat::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--acc); transition:.35s;
}
.feat:hover{ border-color:var(--border-br); transform:translateY(-3px); }
.feat:hover::before{ width:100%; }
.feat .ico{
  width:42px; height:42px; border-radius:10px; display:grid; place-items:center; margin-bottom:18px;
  border:1px solid var(--border-br); background:var(--panel-2); color:var(--acc); font-family:var(--font-m); font-size:16px;
}
.feat h3{ font-size:18px; margin-bottom:9px; }
.feat p{ font-size:14px; color:var(--text-dim); line-height:1.55; }
.feat .meta{ font-family:var(--font-m); font-size:11px; color:var(--mono-dim); margin-top:14px; letter-spacing:.04em; }
@media(max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .feat-grid{ grid-template-columns:1fr; } }

/* ============================= LIVE DEFENSE ================ */
.live{ background:linear-gradient(180deg,transparent,rgba(255,61,82,.018),transparent); }
.live-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:stretch; }
@media(max-width:980px){ .live-grid{ grid-template-columns:1fr; } }

.panel{
  border:1px solid var(--border-br); border-radius:var(--r);
  background:var(--panel); overflow:hidden; display:flex; flex-direction:column;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.panel-head .ttl{ font-family:var(--font-m); font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; gap:9px; }
.panel-head .ttl .dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc); }
.panel-head .st{ font-family:var(--font-m); font-size:11px; padding:4px 10px; border-radius:999px; border:1px solid var(--border-br); color:var(--acc); }
.panel-head .st.alert{ color:var(--danger); border-color:var(--danger); animation:blink 1s steps(1) infinite; }

/* traffic chart */
.chart-wrap{ padding:18px; flex:1; display:flex; flex-direction:column; }
.chart-legend{ display:flex; gap:20px; margin-bottom:14px; font-family:var(--font-m); font-size:11px; color:var(--text-mut); }
.chart-legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:0; }
.chart-canvas{ flex:1; min-height:230px; position:relative; }
.chart-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.chart-stats .cs{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.chart-stats .cs .v{ font-family:var(--font-m); font-size:19px; font-weight:600; color:var(--text); }
.chart-stats .cs .v.dgr{ color:var(--danger); }
.chart-stats .cs .v.acc{ color:var(--acc); }
.chart-stats .cs .l{ font-family:var(--font-m); font-size:10.5px; color:var(--text-mut); margin-top:3px; }

.live-controls{ display:flex; gap:12px; align-items:center; margin-top:30px; flex-wrap:wrap; }
.live-controls .hint{ font-family:var(--font-m); font-size:12px; color:var(--text-mut); }

/* ============================= PRICING ===================== */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan{
  border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 26px;
  background:var(--panel); display:flex; flex-direction:column; position:relative; transition:.2s;
}
.plan:hover{ border-color:var(--border-br); }
.plan.feature{ border-color:var(--acc); background:linear-gradient(180deg,rgba(0,229,160,.06),var(--panel)); box-shadow:0 30px 80px -50px var(--acc-glow); }
.plan .pop{ position:absolute; top:-11px; left:26px; font-family:var(--font-m); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--acc); color:#02130d; padding:4px 11px; border-radius:999px; font-weight:600; }
.plan .pname{ font-family:var(--font-m); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.plan .pprice{ font-family:var(--font-m); font-size:34px; font-weight:600; margin:16px 0 4px; letter-spacing:-.02em; }
.plan .pprice small{ font-size:14px; color:var(--text-mut); font-weight:400; }
.plan .pdesc{ font-size:13.5px; color:var(--text-dim); min-height:40px; margin-bottom:20px; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1; }
.plan ul li{ font-size:13.5px; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start; }
.plan ul li::before{ content:"›"; color:var(--acc); font-family:var(--font-m); font-weight:700; }
.plan ul li.off{ color:var(--text-mut); opacity:.55; }
.plan ul li.off::before{ content:"×"; color:var(--text-mut); }
@media(max-width:900px){ .price-grid{ grid-template-columns:1fr; } }

.partner{
  margin-top:22px; border:1px dashed var(--border-br); border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(0,229,160,.05),transparent 60%);
  padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.partner .pl{ max-width:640px; }
.partner .pl .eyebrow{ margin-bottom:12px; }
.partner .pl h3{ font-size:24px; margin-bottom:10px; }
.partner .pl p{ font-size:14.5px; color:var(--text-dim); }

/* ============================= CASES ====================== */
.cases-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.case{
  border:1px solid var(--border); border-radius:var(--r); padding:28px 24px; background:var(--panel);
  display:flex; flex-direction:column; gap:14px;
}
.case .big{ font-family:var(--font-m); font-size:34px; font-weight:600; color:var(--acc); letter-spacing:-.02em; }
.case p{ font-size:14px; color:var(--text-dim); line-height:1.55; }
.case .who{ font-family:var(--font-m); font-size:11.5px; color:var(--text-mut); margin-top:auto; padding-top:8px; border-top:1px solid var(--border); }
@media(max-width:900px){ .cases-grid{ grid-template-columns:1fr; } }

.logos{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.logos .lg{
  height:46px; min-width:130px; border:1px solid var(--border); border-radius:10px;
  display:grid; place-items:center; font-family:var(--font-m); font-size:12px; color:var(--text-mut);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.012),rgba(255,255,255,.012) 6px,transparent 6px,transparent 12px);
  letter-spacing:.06em; flex:1;
}

/* ============================= FAQ ======================== */
.faq{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); max-width:900px; }
.qa{ border-bottom:1px solid var(--border); }
.qa button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; text-align:left; font-size:18px; font-weight:500; color:var(--text); transition:.16s;
}
.qa button:hover{ color:var(--acc); }
.qa .ic{ font-family:var(--font-m); color:var(--acc); font-size:20px; transition:.25s; flex-shrink:0; }
.qa.open .ic{ transform:rotate(45deg); }
.qa .ans{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.qa .ans p{ padding:0 4px 24px; font-size:14.5px; color:var(--text-dim); line-height:1.6; max-width:75ch; }

/* ============================= CONTACT ==================== */
.contact{ position:relative; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:50px; align-items:center; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
.cform{
  border:1px solid var(--border-br); border-radius:var(--r-lg); padding:30px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:0 40px 100px -50px #000;
}
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-m); font-size:11.5px; color:var(--text-mut); letter-spacing:.05em; margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-d); font-size:14px; color:var(--text);
  background:var(--bg-2); border:1px solid var(--border); border-radius:10px; padding:13px 14px; transition:.16s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-mut); }
.field.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cform .ok{ display:none; text-align:center; padding:18px; font-family:var(--font-m); font-size:13px; color:var(--acc); border:1px solid var(--acc); border-radius:10px; background:var(--acc-soft); margin-top:6px; }
.cform.sent .ok{ display:block; animation:fadeUp .4s; }
.contact-left .tlist{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:30px; }
.contact-left .tlist li{ display:flex; gap:14px; align-items:flex-start; }
.contact-left .tlist .k{ font-family:var(--font-m); font-size:11px; color:var(--text-mut); letter-spacing:.05em; width:90px; flex-shrink:0; padding-top:2px; }
.contact-left .tlist .v{ font-size:15px; color:var(--text); }
.contact-left .tlist .v small{ display:block; color:var(--text-dim); font-size:13px; }

/* ============================= FOOTER ===================== */
footer{ border-top:1px solid var(--border); padding:46px 0 38px; margin-top:40px; }
.foot{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.foot .brand{ margin-bottom:14px; }
.foot p{ font-family:var(--font-m); font-size:12px; color:var(--text-mut); max-width:300px; line-height:1.7; }
.foot-links{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h4{ font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; }
.foot-col a{ display:block; font-size:13.5px; color:var(--text-mut); margin-bottom:9px; transition:.14s; }
.foot-col a:hover{ color:var(--acc); }
.foot-bottom{ margin-top:40px; padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-m); font-size:11.5px; color:var(--text-mut); }

/* ============================= REVEAL ===================== */
.reveal{ opacity:0; transform:translateY(22px); transition:.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* attack flash */
body.under-attack{ animation:attackFlash .6s ease; }
@keyframes attackFlash{ 0%,100%{ box-shadow:none; } 30%{ box-shadow:inset 0 0 200px -40px var(--danger-gl); } }

/* ===== mobile polish (demo-ready) ===== */
@media(max-width:768px){
  .term-body{ height:220px; }
  .chart-stats{ grid-template-columns:repeat(2,1fr); }
  .field.row{ grid-template-columns:1fr; }
  .s-pad{ padding:72px 0; }
  .hero-meta{ gap:18px; }
}
@media(max-width:560px){
  .term-body{ height:180px; }
  .chart-stats{ grid-template-columns:1fr; }
  .wrap{ padding:0 18px; }
  .logos .lg{ flex:0 0 calc(50% - 7px); min-width:0; }
  h1{ font-size:clamp(32px,9vw,44px); }
}