@import url('/css/firewall.css');
:root{--primary:#c00000;--primary-hover:#db1a1a;--accent:#ff7a7a}
.hero-logo{width:300px}
.grid-five{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.grid-five .card{padding:22px}
.check-grid.four{grid-template-columns:repeat(4,1fr);gap:28px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .lead{max-width:none}
.split-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.split-list li{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:6px;padding:16px 18px;color:var(--muted);font-size:15px}
.split-list strong{color:var(--foreground);display:block;font-family:'Space Grotesk',Arial,sans-serif;margin-bottom:4px}
.benefits{list-style:none;padding:0;margin:0 auto;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.benefits li{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px 22px 20px 52px;position:relative;font-weight:500}
.benefits li:before{content:'✓';position:absolute;left:20px;top:19px;color:var(--accent);font-weight:700}
.faq{max-width:820px;margin:auto;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary:after{content:'+';color:var(--accent);font-size:22px;line-height:1}
.faq details[open] summary:after{content:'−'}
.faq details p,.faq details li{color:var(--muted);font-size:15px}
.faq details ul{padding-left:20px;margin:0 0 14px}
.faq details>div{padding-bottom:18px}
.field textarea{width:100%;min-height:110px;border:1px solid var(--input-line);border-radius:6px;padding:10px 13px;background:var(--background);color:var(--foreground);font:inherit;font-size:15px;resize:vertical}
.field textarea::placeholder{color:var(--muted)}
.field textarea[aria-invalid=true]{border-color:var(--danger)}
@media(max-width:1099px){.grid-five{grid-template-columns:repeat(3,1fr)}.check-grid.four{grid-template-columns:1fr 1fr}.hero-logo{width:240px}}
@media(max-width:767px){.grid-five,.check-grid.four,.split,.benefits{grid-template-columns:1fr}.split{gap:28px}.hero-logo{width:150px}}

.attack-stat{flex:0 0 340px;margin:0;padding:28px;background:rgba(15,19,26,.78);border:1px solid rgba(192,0,0,.4);border-radius:12px;text-align:center;backdrop-filter:blur(6px)}
.radar{position:relative;width:180px;height:180px;margin:0 auto 18px;border-radius:50%;overflow:hidden;background:radial-gradient(circle,rgba(192,0,0,.18),transparent 70%)}
.radar .ring{position:absolute;inset:0;border:2px solid var(--primary);border-radius:50%;opacity:0;animation:ping 1s ease-out infinite}
.radar .r2{animation-delay:.25s}.radar .r3{animation-delay:.5s}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,122,122,.45),transparent 25%);animation:spin 1s linear infinite}
.radar .core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font:700 64px/1 "Space Grotesk",sans-serif;color:#fff}
.radar .core small{font-size:15px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.pulses{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.pulses i{width:34px;height:6px;border-radius:3px;background:var(--primary);opacity:.2;animation:blink 1s infinite}
.pulses i:nth-child(2){animation-delay:.25s}.pulses i:nth-child(3){animation-delay:.5s}.pulses i:nth-child(4){animation-delay:.75s}
.attack-count{margin:0 0 14px;font:700 34px/1.1 "Space Grotesk",sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.attack-count small{display:block;font:400 13px/1.4 Inter,sans-serif;color:var(--muted);margin-top:4px}
.attack-stat figcaption{font-size:15px;color:var(--muted);line-height:1.5}.attack-stat strong{color:#fff}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:.2}20%{opacity:1}}
@media(prefers-reduced-motion:reduce){.attack-stat *{animation:none!important}}
@media(max-width:1099px){.attack-stat{flex-basis:280px}}
@media(max-width:767px){.attack-stat{flex-basis:auto;width:100%;max-width:340px;order:-1;margin:0 auto}.radar{width:140px;height:140px}.radar .core{font-size:48px}}

.vector-panel{flex:0 0 360px;margin:0;padding:26px;background:rgba(15,19,26,.8);border:1px solid rgba(192,0,0,.4);border-radius:12px;backdrop-filter:blur(6px)}
.vector-panel .vp-head{display:flex;align-items:center;gap:10px;font:700 14px "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:18px}
.vector-panel .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);animation:blink 1.2s infinite}
.vrow{margin-bottom:16px}.vrow span{display:flex;justify-content:space-between;font:600 15px "Space Grotesk",sans-serif;color:#fff;margin-bottom:7px}.vrow em{font:400 12px Inter,sans-serif;color:var(--muted);font-style:normal}
.vbar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}.vbar i{display:block;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,transparent,var(--primary),var(--accent));animation:scan 2.4s ease-in-out infinite}
.vrow:nth-child(3) .vbar i{animation-delay:.6s}.vrow:nth-child(4) .vbar i{animation-delay:1.2s}
.vector-panel figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.5}.vector-panel strong{color:#fff}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}.compare .card{border-top:3px solid var(--line)}.compare .card.hl{border-top-color:var(--primary)}
.compare-note{text-align:center;color:var(--muted);margin-top:24px}
@media(prefers-reduced-motion:reduce){.vector-panel *{animation:none!important}}
@media(max-width:1099px){.vector-panel{flex-basis:300px}}
@media(max-width:767px){.vector-panel{flex-basis:auto;width:100%;max-width:360px;order:-1;margin:0 auto}.compare{grid-template-columns:1fr}}
.grid-four.three{grid-template-columns:repeat(3,1fr)}@media(max-width:767px){.grid-four.three{grid-template-columns:1fr}}