:root{
  --navy:#0F172A; --blue:#1D9BF0; --white:#FFFFFF;
  --lightblue:#60A5FA; --steel:#64748B; --lightgrey:#E5E7EB;
  --card:#18233C; --border:#283654;
  --compliant:#22C55E; --due:#F59E0B; --critical:#DC2626; --overdue:#64748B;
  --font-head:'Poppins',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--lightgrey); background:var(--navy);
  background-image:radial-gradient(var(--border) 1px, transparent 1px);
  background-size:24px 24px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--white); line-height:1.15; font-weight:600}
a{color:var(--blue); text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; color:var(--blue); text-transform:uppercase; margin-bottom:18px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:15px; padding:13px 24px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:.2s; white-space:nowrap}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--lightblue)}
.btn-ghost{background:transparent; color:var(--white); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}

/* nav */
header{position:sticky; top:0; z-index:50; background:rgba(15,23,42,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
nav{display:flex; align-items:center; justify-content:space-between; height:74px}
nav .logo img{height:38px; display:block}
nav ul{display:flex; gap:30px; list-style:none}
nav ul a{font-family:var(--font-head); font-weight:500; font-size:15px; color:var(--lightgrey)}
nav ul a:hover{color:var(--white)}
nav .actions{display:flex; gap:12px; align-items:center}
.nav-links,.nav-login{}
@media(max-width:900px){.nav-links{display:none} .nav-login{display:none}}

/* hero */
.hero{padding:80px 0 70px}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.hero h1{font-size:52px; font-weight:700; letter-spacing:-.02em}
.hero p.lead{font-size:19px; color:var(--lightgrey); margin:22px 0 30px; max-width:520px}
.hero .cta-row{display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap}
.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lightblue); border:1px solid var(--border); border-radius:999px; padding:7px 16px}
.hero-visual{border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); background:var(--card)}
.hero-visual .bar{display:flex; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border)}
.hero-visual .bar span{width:11px; height:11px; border-radius:50%; background:var(--border)}
.hero-visual img{width:100%; display:block}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr; gap:40px} .hero h1{font-size:38px}}

/* trust strip */
.trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(24,35,60,.4)}
.trust .wrap{display:flex; align-items:center; justify-content:center; gap:40px; padding:20px 24px; flex-wrap:wrap}
.trust span{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--steel)}
.trust b{color:var(--lightgrey)}

/* section */
section.block{padding:84px 0}
.section-head{text-align:center; max-width:680px; margin:0 auto 52px}
.section-head h2{font-size:36px; font-weight:700; letter-spacing:-.01em}
.section-head p{color:var(--steel); font-size:17px; margin-top:14px}

/* features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:880px){.features{grid-template-columns:1fr}}
.feature{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:30px}
.feature .ico{width:46px; height:46px; border-radius:11px; background:rgba(29,155,240,.12); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.feature .ico svg{width:24px; height:24px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.feature .ico i{font-size:24px; color:var(--blue); line-height:1}
.feature h3{font-size:18px; margin-bottom:9px}
.feature p{color:var(--steel); font-size:15px}

/* status cards */
.status-wrap{background:rgba(24,35,60,.35); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.status-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:880px){.status-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.status-grid{grid-template-columns:1fr}}
.scard{position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 22px 22px 26px; overflow:hidden}
.scard .accent{position:absolute; left:0; top:0; bottom:0; width:5px}
.scard .dot{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.scard .dot svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.scard .word{font-family:var(--font-head); font-weight:700; font-size:19px; letter-spacing:.02em; margin-bottom:14px}
.scard .row{margin-bottom:9px}
.scard .lbl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); display:block}
.scard .val{font-family:var(--font-mono); font-size:15px; color:var(--white)}
.scard .msg{font-size:13.5px; color:var(--steel); margin-top:12px; padding-top:12px; border-top:1px solid var(--border)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--font-mono); font-weight:600; font-size:42px; color:var(--white)}
.stat .n b{color:var(--blue); font-weight:600}
.stat .t{color:var(--steel); font-size:14px; margin-top:6px}

/* quote */
.quote{max-width:820px; margin:0 auto; text-align:center}
.quote p{font-family:var(--font-head); font-weight:500; font-size:27px; color:var(--white); line-height:1.4}
.quote .who{font-family:var(--font-mono); color:var(--blue); font-size:14px; margin-top:22px; letter-spacing:.04em}
.quote .stars{margin-top:16px; font-size:18px; color:var(--due)}

/* faq */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.faq-item .accordion-button{background:transparent; color:var(--white); font-family:var(--font-head); font-weight:500; font-size:16px; box-shadow:none}
.faq-item .accordion-button:not(.collapsed){background:transparent; color:var(--blue)}
.faq-item .accordion-button:focus{box-shadow:none; border-color:var(--border)}
.faq-item .accordion-button::after{filter:invert(60%) sepia(60%) saturate(2000%) hue-rotate(180deg)}
.faq-item .accordion-body{color:var(--steel); font-size:15px}

/* demo cta */
.demo{background:var(--card); border:1px solid var(--border); border-radius:20px; padding:52px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
@media(max-width:820px){.demo{grid-template-columns:1fr; padding:34px}}
.demo h2{font-size:32px; font-weight:700}
.demo p{color:var(--steel); margin-top:14px; font-size:16px}
.demo form{display:flex; flex-direction:column; gap:14px}
.demo input{background:var(--navy); border:1px solid var(--border); border-radius:10px; padding:14px 16px; color:#fff; font-family:var(--font-body); font-size:15px; width:100%}
.demo input::placeholder{color:var(--steel)}
.demo input:focus{outline:none; border-color:var(--blue); box-shadow:none}
.demo .btn-primary{justify-content:center; padding:15px; width:100%; border:none}
.demo label.error{color:#f87171; font-size:13px; font-family:var(--font-body)}

/* footer */
footer{border-top:1px solid var(--border); padding:56px 0 34px; margin-top:20px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand img{height:36px; margin-bottom:16px}
.foot-brand p{color:var(--steel); font-size:14px; max-width:260px}
footer h4{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-bottom:16px; font-family:var(--font-mono); font-weight:500}
footer ul{list-style:none; display:flex; flex-direction:column; gap:11px}
footer ul a{color:var(--lightgrey); font-size:14.5px}
footer ul a:hover{color:var(--blue)}
.foot-bottom{border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--steel); font-size:13.5px; font-family:var(--font-mono)}