
:root{
  --brand:#0078D7; /* Electric Blue */
  --accent:#F45D22; /* Neural Orange */
  --ink:#1B1F23;   /* Midnight Slate */
  --muted:#6B7280; /* slate-500 */
  --bg:#0b1119;    /* dark backdrop for hero */
  --card:#0f172a;  /* slate-900 */
  --surface:#ffffff;
  --ring: rgba(0,120,215,.25);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#f8fafc;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.85rem 1.25rem;font-weight:600;text-decoration:none;box-shadow:0 10px 20px -10px rgba(0,120,215,.6);transition:transform .08s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(0,120,215,.65);}
.btn.secondary{background:transparent;color:var(--brand);border:2px solid var(--brand);box-shadow:none}
header{position:sticky;top:0;backdrop-filter:saturate(150%) blur(8px);background:rgba(255,255,255,.7);border-bottom:1px solid #e5e7eb;z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:36px;height:36px}
.brand span{font-weight:700;letter-spacing:.2px}
.tag{color:var(--muted);font-weight:500;margin-left:.25rem}
.hero{background:radial-gradient(1200px 600px at 60% -20%, rgba(0,120,215,.25), transparent 60%),linear-gradient(180deg,#0b1119 0%, #0e1726 100%);color:#e6eef6;padding:90px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:#fff;padding:.4rem .7rem;border-radius:999px;font-size:.9rem;font-weight:600;}
h1{font-size:clamp(2rem,3.2vw,3.2rem);line-height:1.05;margin:.6rem 0 1rem}
.lead{font-size:1.1rem;color:#cbd5e1;max-width:52ch}
.neural{position:relative;isolation:isolate}
.neural::after{content:"";position:absolute;inset:0;background:
  radial-gradient(12px 12px at 18% 30%, var(--accent), transparent 70%),
  radial-gradient(10px 10px at 60% 15%, #48b0ff, transparent 70%),
  radial-gradient(8px 8px at 80% 60%, #7dd3fc, transparent 70%),
  radial-gradient(7px 7px at 30% 70%, #60a5fa, transparent 70%),
  radial-gradient(6px 6px at 70% 80%, #a78bfa, transparent 70%);
  opacity:.12;filter:blur(12px);z-index:-1}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:0 10px 30px -20px rgba(2,6,23,.35)}
section{padding:64px 0}
h2{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 16px}
.grid{display:grid;gap:18px}
.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.kpi .card{padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid #e5e7eb}
.card h3{margin:6px 0 8px;font-size:1.05rem}
ul{margin:0;padding:0 0 0 18px}
.muted{color:var(--muted)}
footer{padding:36px 0;color:#64748b}
.footer-grid{display:grid;grid-template-columns:1fr;gap:10px}
.pill{border:1px solid #e5e7eb;border-radius:999px;padding:.35rem .7rem;display:inline-flex;gap:.4rem;align-items:center}
/* Mission readability tweaks */ 
#mission-panel p, #mission-panel strong, #mission-panel ul{color:var(--ink);font-weight:600;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;}
