/* Eagle Eye DFR — site styles. Tactical public-safety identity: deep navy + amber. */
:root{
  --bg:#080d18; --bg2:#0d1626; --panel:#111d33; --line:#22314f; --line2:#2c3f63;
  --fg:#eaf1fc; --mut:#93a4c3; --mut2:#6f83a6;
  --accent:#ffb020; --accent-ink:#1a1200; --accent2:#3b82f6;
  --ok:#22c55e; --crit:#ef4444;
  --radius:12px; --maxw:1140px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.mono{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }

/* under-development banner */
.devbanner{ background:repeating-linear-gradient(45deg,#3a2a05,#3a2a05 12px,#2f2205 12px,#2f2205 24px); color:#ffd88a; text-align:center; font-size:13px; font-weight:700; padding:8px 14px; letter-spacing:.03em; border-bottom:1px solid var(--accent); position:relative; z-index:60; }

/* nav */
header.nav{ position:sticky; top:0; z-index:50; background:rgba(8,13,24,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; color:var(--fg); }
.brand .logo{ width:30px; height:30px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); border-radius:8px; font-size:17px; }
.brand small{ display:block; font-weight:600; font-size:10px; letter-spacing:.14em; color:var(--mut); text-transform:uppercase; }
nav.links{ display:flex; gap:22px; align-items:center; }
nav.links a{ color:var(--mut); font-size:14px; font-weight:600; }
nav.links a:hover{ color:var(--fg); text-decoration:none; }
.btn{ display:inline-block; border:1px solid var(--line2); background:#16233d; color:var(--fg); padding:10px 16px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; }
.btn:hover{ text-decoration:none; border-color:var(--accent); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:transparent; }
.btn.lg{ padding:14px 22px; font-size:16px; }

/* hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 500px at 70% -10%, rgba(255,176,32,.14), transparent 60%), linear-gradient(180deg,#0a1120,#080d18); }
.hero .wrap{ padding:80px 24px 90px; }
.eyebrow{ color:var(--accent); font-weight:800; letter-spacing:.16em; font-size:12px; text-transform:uppercase; }
.hero h1{ font-size:clamp(34px,5vw,58px); line-height:1.05; margin:14px 0 16px; letter-spacing:-.02em; text-wrap:balance; max-width:16ch; }
.hero p.lead{ font-size:19px; color:var(--mut); max-width:60ch; margin:0 0 28px; }
.cta{ display:flex; gap:14px; flex-wrap:wrap; }
.stats{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; }
.stats .s b{ display:block; font-size:26px; font-weight:800; }
.stats .s span{ color:var(--mut); font-size:13px; }

/* sections */
section{ padding:72px 0; border-bottom:1px solid var(--line); }
section h2{ font-size:clamp(26px,3.4vw,38px); margin:0 0 10px; letter-spacing:-.01em; }
section .sub{ color:var(--mut); font-size:17px; max-width:62ch; margin:0 0 34px; }
.tag{ color:var(--accent); font-weight:800; letter-spacing:.14em; font-size:12px; text-transform:uppercase; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid.two{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.card h3{ margin:6px 0 8px; font-size:18px; }
.card p{ color:var(--mut); margin:0; font-size:15px; }
.card .ic{ width:40px; height:40px; border-radius:10px; background:#1a2843; display:grid; place-items:center; font-size:20px; }
.steps{ counter-reset:s; display:grid; gap:16px; }
.step{ display:flex; gap:16px; align-items:flex-start; }
.step .n{ counter-increment:s; flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:800; display:grid; place-items:center; }
.step .n::before{ content:counter(s); }
.step h3{ margin:2px 0 3px; font-size:17px; }
.step p{ color:var(--mut); margin:0; font-size:15px; }

/* pricing */
.price{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.plan{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.plan.hl{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(255,176,32,.3), 0 20px 60px -30px rgba(255,176,32,.5); }
.plan .amt{ font-size:40px; font-weight:800; }
.plan .amt small{ font-size:15px; color:var(--mut); font-weight:600; }
.plan ul{ list-style:none; padding:0; margin:16px 0 22px; }
.plan li{ padding:6px 0 6px 26px; position:relative; color:var(--mut); }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }

/* forms */
.formcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
label{ display:block; font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin:12px 0 5px; }
input,textarea,select{ width:100%; padding:11px 13px; background:#0a1424; border:1px solid var(--line2); border-radius:9px; color:var(--fg); font:15px inherit; }
input:focus,textarea:focus{ outline:2px solid rgba(255,176,32,.5); border-color:var(--accent); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.result{ margin-top:14px; padding:14px; border-radius:9px; font-size:14px; white-space:pre-wrap; word-break:break-word; display:none; }
.result.ok{ display:block; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); }
.result.err{ display:block; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#fecaca; }
.result code{ background:#0a1424; padding:2px 6px; border-radius:5px; }
.note{ color:var(--mut2); font-size:12.5px; margin-top:8px; }

/* footer */
footer.site{ background:#060a13; padding:44px 0; }
footer.site .wrap{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
footer.site .velocity{ color:var(--mut); font-size:14px; }
footer.site .velocity a{ font-weight:700; }
footer.site .fnav{ display:flex; gap:20px; flex-wrap:wrap; }
footer.site .fnav a{ color:var(--mut); font-size:14px; }
.disc{ color:var(--mut2); font-size:12px; margin-top:14px; max-width:70ch; }

@media (max-width:820px){
  .grid,.grid.two,.price,.row2{ grid-template-columns:1fr; }
  nav.links a:not(.btn){ display:none; }
  .stats{ gap:24px; }
}