/* ============================================================
   IGNITE WAF — MARKETING SITE
   "The mechanism, live" — request-evaluation hero, navy-slate ground
   ============================================================ */

:root{
	--bg:#0d1524; --bg-2:#101a2c; --panel:#121d31; --line:#202c42; --line-soft:#182238;
	--ink:#e2e7f0; --dim:#8a96b0; --dimmer:#5c6884;
	--allow:#39d97a; --deny:#ff6357; --amber:#e2a33d;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:'IBM Plex Sans',-apple-system,sans-serif;
	line-height:1.5;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

@media (max-width:640px){
	.wrap{padding:0 18px;}
}

/* ── NAV ─────────────────────────────────────────────────────── */
nav{
	position:sticky; top:0; z-index:40;
	background:rgba(13,21,36,.88);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--line-soft);
}

.nav-inner{
	max-width:1120px; margin:0 auto; padding:0 24px; height:60px;
	display:flex; align-items:center; justify-content:space-between;
}

.brand{display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:15px; letter-spacing:-.01em; text-decoration:none; color:var(--ink);}
.brand .dot{color:var(--allow);}

.navlinks{display:flex; gap:26px; font-size:13.5px; color:var(--dim);}
.navlinks a{text-decoration:none; transition:color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}

.nav-auth{display:flex; align-items:center; gap:16px;}

.nav-login{
	font-size:12.5px; color:var(--dim); text-decoration:none; transition:color .15s;
}
.nav-login:hover, .nav-login.active{color:var(--ink);}

.nav-cta{
	display:inline-block;
	font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.02em;
	padding:8px 16px; border:1px solid var(--allow); background:var(--allow);
	color:#03150a; text-transform:uppercase; cursor:pointer; text-decoration:none;
}

@media (max-width:760px){
	.navlinks{display:none;}
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero-section{padding:4.2rem 0 3rem; border-bottom:1px solid var(--line-soft);}

.top-strip{
	display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap;
	gap:4px 16px; margin-bottom:2.6rem; font-size:10.5px; letter-spacing:.08em;
	color:var(--dimmer); text-transform:uppercase; font-family:'IBM Plex Mono',monospace;
}
.top-strip b{color:var(--dim); font-weight:600;}

@media (max-width:480px){
	.top-strip{flex-direction:column; gap:4px;}
}

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:2.6rem; align-items:start;}

@media (max-width:840px){
	.hero{grid-template-columns:1fr;}
}

h1{
	font-size:clamp(30px,4.6vw,46px); font-weight:700; line-height:1.08;
	letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--allow);}

.dek{font-size:16px; line-height:1.6; color:#aeb8cc; max-width:48ch; margin:0 0 24px;}

.facts{display:flex; flex-wrap:wrap; gap:8px 10px; margin-bottom:28px;}
.fact{
	border:1px solid var(--line); padding:5px 10px; font-size:10.5px;
	letter-spacing:.03em; color:var(--dim); font-family:'IBM Plex Mono',monospace;
}

.cta-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}

.btn{
	display:inline-block; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.02em;
	padding:12px 20px; border:1px solid var(--allow); color:#03150a;
	background:var(--allow); text-transform:uppercase; cursor:pointer;
	text-decoration:none; transition:background .15s;
}
.btn:hover{background:#4fe88c;}

.btn2{
	display:inline-block; font-family:inherit; font-size:13px; font-weight:500; padding:12px 20px;
	border:1px solid var(--line); color:var(--ink); background:transparent;
	cursor:pointer; text-decoration:none; transition:border-color .15s,background .15s;
}
.btn2:hover{border-color:#3a4a6c; background:var(--panel);}

/* ── LIVE REQUEST PANEL ─────────────────────────────────────── */
.panel{background:var(--panel); border:1px solid var(--line);}

.panel-head{
	display:flex; justify-content:space-between; padding:10px 14px;
	border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.06em;
	color:var(--dim); text-transform:uppercase; font-family:'IBM Plex Mono',monospace;
}
.panel-head .live{color:var(--allow);}
.panel-head .live::before{content:'\25CF'; margin-right:5px; animation:pulse 1.6s infinite;}

@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

.stream{padding:6px 0; height:242px; overflow:hidden;}

.row{
	display:grid; grid-template-columns:80px 1fr 60px 62px; gap:8px; align-items:center;
	padding:5.5px 14px; font-size:10.5px; font-family:'IBM Plex Mono',monospace;
	border-bottom:1px solid rgba(255,255,255,.03);
	opacity:0; animation:enter .35s ease forwards;
}

@keyframes enter{from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:translateY(0);}}

.row .ip{color:var(--dimmer);}
.row .path{color:#c6cee0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.row .rule{color:var(--dimmer); font-size:9.5px;}

.tag{font-size:9px; font-weight:700; letter-spacing:.05em; padding:2px 6px; text-align:center;}
.tag.allow{color:var(--allow); border:1px solid var(--allow);}
.tag.deny{color:var(--deny); border:1px solid var(--deny); background:rgba(255,99,87,.08);}

.panel-foot{
	display:flex; justify-content:space-between; padding:10px 14px;
	border-top:1px solid var(--line); font-size:10.5px; color:var(--dim);
	font-family:'IBM Plex Mono',monospace;
}
.panel-foot b{color:var(--ink); font-variant-numeric:tabular-nums;}

/* ── RULE PIPELINE STRIP ────────────────────────────────────── */
.stack{
	display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
	background:var(--line); margin-top:2.6rem; border:1px solid var(--line);
}

@media (max-width:640px){
	.stack{grid-template-columns:repeat(2,1fr);}
}

.stage-box{background:var(--bg); padding:16px 14px;}
.stage-box .n{font-size:9px; color:var(--dimmer); letter-spacing:.05em; margin-bottom:6px; font-family:'IBM Plex Mono',monospace;}
.stage-box .t{font-size:13px; font-weight:600; margin-bottom:3px;}
.stage-box .d{font-size:11px; color:var(--dim); line-height:1.4;}
.stage-box.hit .t{color:var(--deny);}

/* ── SECTION HEADERS ─────────────────────────────────────────── */
.section{padding:4.4rem 0; border-bottom:1px solid var(--line-soft);}

.section-tag{
	font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
	text-transform:uppercase; color:var(--amber); margin-bottom:10px;
}

.section h2{
	font-size:clamp(22px,2.8vw,30px); font-weight:700; letter-spacing:-.015em;
	margin:0 0 14px; max-width:34ch; text-wrap:balance;
}

.section-lede{font-size:15px; color:var(--dim); max-width:56ch; line-height:1.6; margin:0 0 2.6rem;}

/* ── POSITIONING PILLARS ────────────────────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}

@media (max-width:760px){
	.pillars{grid-template-columns:1fr;}
}

.pillar{background:var(--bg); padding:26px 24px;}
.pillar .k{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--dimmer); letter-spacing:.06em; margin-bottom:12px;}
.pillar h3{font-size:16px; font-weight:600; margin:0 0 10px;}
.pillar p{font-size:13.5px; color:var(--dim); line-height:1.6; margin:0;}

/* ── PROOF: real backstage recreation ───────────────────────── */
.proof-shell{background:#f0f2f7; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.35);}

.proof-topbar{
	background:#ffffff; border-bottom:1px solid #e4e2db; padding:12px 18px;
	display:flex; justify-content:space-between; align-items:center;
}
.proof-topbar .t{font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:600; color:#1a2744;}
.proof-topbar .chip{
	font-family:'IBM Plex Mono',monospace; font-size:10px; color:#7a7669;
	background:#f1f0ec; border:1px solid #e4e2db; border-radius:99px; padding:2px 9px;
}

.proof-body{padding:18px;}

.proof-kpis{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.proof-kpi{border:1px solid #e4e2db; border-radius:6px; padding:6px 10px; background:#f1f0ec; text-align:right; min-width:96px;}
.proof-kpi .l{display:block; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:#7a7669; font-family:'IBM Plex Sans',sans-serif;}
.proof-kpi .v{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:700; color:#3d3b35;}

.proof-table-scroll{overflow-x:auto; border-radius:6px;}

.proof-table{width:100%; min-width:520px; border-collapse:collapse; font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; background:#fff; border:1px solid #e4e2db; border-radius:6px;}
.proof-table th{background:#f1f0ec; color:#7a7669; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; text-align:left; padding:8px 12px; border-bottom:1px solid #e4e2db; font-weight:600;}
.proof-table td{padding:8px 12px; color:#3d3b35; border-bottom:1px solid #f1f0ec; font-family:'IBM Plex Mono',monospace; font-size:11.5px;}

.pill{display:inline-flex; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-family:'IBM Plex Sans',sans-serif;}
.pill.allow{background:#d1fae5; color:#065f46;}
.pill.deny{background:#fee2e2; color:#991b1b;}

.proof-caption{margin-top:14px; font-size:12px; color:var(--dimmer); font-family:'IBM Plex Mono',monospace;}
.proof-caption b{color:var(--dim);}

/* ── FEATURE GRID ────────────────────────────────────────────── */
.fgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}

@media (max-width:760px){
	.fgrid{grid-template-columns:1fr;}
}

.fcard{background:var(--bg); padding:24px;}
.fcard .n{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--dimmer); margin-bottom:8px;}
.fcard h3{font-size:15.5px; font-weight:600; margin:0 0 8px;}
.fcard p{font-size:13px; color:var(--dim); line-height:1.6; margin:0;}

/* ── CLOSING CTA ─────────────────────────────────────────────── */
.close{padding:4.6rem 0 5rem; text-align:center;}
.close h2{font-size:clamp(24px,3.4vw,34px); font-weight:700; letter-spacing:-.015em; margin:0 0 14px; text-wrap:balance;}
.close p{font-size:15px; color:var(--dim); max-width:48ch; margin:0 auto 28px;}
.close .cta-row{justify-content:center;}

footer{
	padding:24px 0 40px; font-size:11.5px; color:var(--dimmer);
	font-family:'IBM Plex Mono',monospace; display:flex; justify-content:space-between;
	flex-wrap:wrap; gap:10px;
}

.footer-links{display:flex; gap:18px;}
.footer-links a{color:var(--dimmer); text-decoration:none; transition:color .15s;}
.footer-links a:hover{color:var(--dim);}

/* ============================================================
   INTERIOR PAGES — pricing, auth, support
   ============================================================ */

.page-hero{padding:3.6rem 0 2.2rem; text-align:center; border-bottom:1px solid var(--line-soft);}
.page-hero .section-tag{display:flex; justify-content:center;}
.page-hero h1{font-size:clamp(28px,4vw,38px);}
.page-hero .dek{margin-left:auto; margin-right:auto; text-align:center;}

/* ── PRICING ─────────────────────────────────────────────────── */
.billing-toggle{
	display:inline-flex; align-items:center; gap:2px; padding:3px;
	border:1px solid var(--line); background:var(--panel); margin:0 auto 2.6rem;
}
.billing-toggle button{
	font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.03em;
	padding:8px 18px; border:none; background:transparent; color:var(--dim); cursor:pointer;
	transition:background .15s,color .15s;
}
.billing-toggle button.active{background:var(--allow); color:#03150a;}
.billing-toggle .save{
	font-size:10px; color:var(--allow); font-family:'IBM Plex Mono',monospace;
	margin-left:10px; letter-spacing:.02em;
}

.plan-card{
	max-width:420px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
	padding:32px 30px;
}
.plan-name{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:10px;}
.plan-price{display:flex; align-items:baseline; gap:6px; margin-bottom:4px;}
.plan-price .amount{font-size:44px; font-weight:700; letter-spacing:-.02em; font-family:'IBM Plex Mono',monospace;}
.plan-price .period{font-size:14px; color:var(--dim);}
.plan-note{font-size:12.5px; color:var(--dimmer); margin-bottom:24px;}
.plan-note.placeholder{color:var(--amber);}

.plan-cta{display:block; width:100%; text-align:center; margin-bottom:26px;}

.plan-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.plan-features li{
	display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#c9d0e0; line-height:1.5;
}
.plan-features li::before{
	content:'\2713'; color:var(--allow); font-weight:700; font-size:12px;
	width:16px; flex-shrink:0; margin-top:1px;
}

.plan-footnote{max-width:420px; margin:22px auto 0; text-align:center; font-size:12px; color:var(--dimmer); line-height:1.6;}

/* ── AUTH FORMS (register / login) ──────────────────────────── */
.auth-shell{padding:3.6rem 0 5rem; display:flex; justify-content:center;}
.auth-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); padding:32px 30px;}
.auth-card h1{font-size:22px; margin:0 0 8px;}
.auth-card .dek{font-size:13.5px; margin:0 0 26px; max-width:none;}

.field{margin-bottom:18px;}
.field label{
	display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.05em;
	text-transform:uppercase; color:var(--dim); margin-bottom:7px;
}
.field input{
	width:100%; font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--ink);
	background:var(--bg); border:1px solid var(--line); padding:10px 12px;
}
.field input:focus{outline:none; border-color:var(--allow); box-shadow:0 0 0 3px rgba(57,217,122,.12);}
.field input::placeholder{color:var(--dimmer);}

.field-row{display:flex; gap:12px;}
.field-row .field{flex:1; min-width:0;}

@media (max-width:480px){
	.field-row{flex-direction:column; gap:0;}
}

.form-submit{width:100%; margin-top:6px;}

.auth-alt{margin-top:22px; text-align:center; font-size:13px; color:var(--dim);}
.auth-alt a{color:var(--allow); text-decoration:none;}
.auth-alt a:hover{text-decoration:underline;}

.form-message{margin:0 0 1rem; padding:.8rem 1rem; border:1px solid var(--line); font-size:.9rem;}
.form-message.error{border-color:var(--deny); color:var(--deny);}
.form-message.success{border-color:var(--allow); color:var(--allow);}
.trial-code{margin:1.5rem 0; padding:1rem; border:1px solid var(--allow); background:rgba(57,217,122,.06); text-align:center;}
.trial-code span,.trial-code small{display:block; color:var(--dim); font-size:.78rem;}
.trial-code strong{display:block; margin:.35rem 0; font-family:'IBM Plex Mono',monospace; letter-spacing:.08em;}
.trial-steps{margin:1.5rem 0 0; padding-left:1.25rem; color:var(--dim);}
.trial-steps li{margin:.55rem 0;}

.auth-meta-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; margin-bottom:20px;}
.auth-meta-row a{color:var(--dim); text-decoration:none;}
.auth-meta-row a:hover{color:var(--ink);}
.checkbox-row{display:flex; align-items:center; gap:8px; color:var(--dim);}
.checkbox-row input{width:14px; height:14px;}

/* ── SUPPORT / TICKET FORM ──────────────────────────────────── */
.support-shell{padding:3.6rem 0 5rem;}
.support-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:start;}
@media (max-width:840px){.support-grid{grid-template-columns:1fr;}}

.support-side h2{font-size:18px; margin:0 0 10px;}
.support-side p{font-size:13.5px; color:var(--dim); line-height:1.6; margin:0 0 22px;}
.support-facts{display:flex; flex-direction:column; gap:14px;}
.support-fact{border-left:2px solid var(--line); padding-left:14px;}
.support-fact b{display:block; font-size:12.5px; color:var(--ink); margin-bottom:2px;}
.support-fact span{font-size:12px; color:var(--dimmer);}

.ticket-card{background:var(--panel); border:1px solid var(--line); padding:28px 26px;}

.field textarea{
	width:100%; font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--ink);
	background:var(--bg); border:1px solid var(--line); padding:10px 12px; resize:vertical; min-height:120px;
}
.field textarea:focus{outline:none; border-color:var(--allow); box-shadow:0 0 0 3px rgba(57,217,122,.12);}

.field select{
	width:100%; font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--ink);
	background:var(--bg); border:1px solid var(--line); padding:10px 12px; cursor:pointer;
}
.field select:focus{outline:none; border-color:var(--allow);}

/* ── DOCS ────────────────────────────────────────────────────── */
.docs-shell{padding:3.6rem 0 5rem;}
.docs-grid{display:grid; grid-template-columns:220px 1fr; gap:3rem; align-items:start;}
@media (max-width:840px){.docs-grid{grid-template-columns:1fr;}}

.docs-toc{position:sticky; top:80px; display:flex; flex-direction:column; gap:2px;}
@media (max-width:840px){.docs-toc{position:static; flex-direction:row; flex-wrap:wrap; gap:8px; margin-bottom:1rem;}}

.docs-toc a{
	font-size:12.5px; color:var(--dim); text-decoration:none; padding:6px 10px;
	border-left:2px solid transparent; transition:color .15s,border-color .15s;
}
.docs-toc a:hover{color:var(--ink);}
.docs-toc a.active{color:var(--allow); border-left-color:var(--allow);}
@media (max-width:840px){
	.docs-toc a{border-left:none; border:1px solid var(--line); padding:5px 10px;}
	.docs-toc a.active{border-color:var(--allow);}
}

.docs-content h2{
	font-size:20px; font-weight:700; margin:0 0 6px; padding-top:2.4rem;
	scroll-margin-top:76px;
}
.docs-content > section:first-child h2{padding-top:0;}
.docs-content .doc-kicker{
	font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em;
	text-transform:uppercase; color:var(--dimmer); margin-bottom:8px;
}
.docs-content p{font-size:14px; color:#c2c9db; line-height:1.7; margin:0 0 14px; max-width:66ch;}
.docs-content ul{margin:0 0 16px; padding-left:20px;}
.docs-content li{font-size:13.5px; color:#c2c9db; line-height:1.7; margin-bottom:4px;}
.docs-content code{
	font-family:'IBM Plex Mono',monospace; font-size:.92em; color:var(--amber);
	background:var(--panel); border:1px solid var(--line); padding:1px 6px;
}
.docs-content section{border-bottom:1px solid var(--line-soft); padding-bottom:2rem;}
.docs-content section:last-child{border-bottom:none;}

.doc-callout{
	border:1px solid var(--line); border-left:2px solid var(--amber); background:var(--panel);
	padding:12px 16px; font-size:13px; color:var(--dim); line-height:1.6; margin:0 0 16px;
}
.doc-callout b{color:var(--ink);}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}

.faq-item{background:var(--bg);}
.faq-item summary{
	list-style:none; cursor:pointer; padding:18px 20px; font-size:14.5px; font-weight:600;
	display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
	content:'+'; font-family:'IBM Plex Mono',monospace; font-size:18px; color:var(--dim);
	flex-shrink:0; transition:transform .15s;
}
.faq-item[open] summary::after{transform:rotate(45deg); color:var(--allow);}
.faq-item p{margin:0; padding:0 20px 20px; font-size:13.5px; color:var(--dim); line-height:1.7; max-width:62ch;}