:root{
  --bg:#0a1633; --card:#0e2452; --txt:#ffffff; --muted:#d2e0ff;
  --line:rgba(255,255,255,.18); --chip:#0e2a5c;
  --acc:#1f6aff; --acc2:#49a5ff; --accentText:#ffffff;
  --radius:18px; --shadow:0 10px 30px rgba(5,20,60,.35); --soft:0 6px 24px rgba(5,20,60,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif; background:var(--bg); color:var(--txt)}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
.container{width:min(1180px,100% - 32px); margin-inline:auto}
.sub{color:var(--muted)}
.prose{line-height:1.8; color:#e9f1ff}
.prose h2,.prose h3{color:#ffffff; margin:18px 0 8px}
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.1) blur(10px);
  background:linear-gradient(180deg, rgba(10,22,51,.96), rgba(10,22,51,.86)); border-bottom:1px solid var(--line); color:#fff}
.header-bar{display:flex; align-items:center; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo{width:auto; height:30px; border-radius:8px; background:linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow:var(--soft); position:relative}
.brand .logo::after{content:""; position:absolute; right:-6px; top:-6px; width:10px; height:10px; border-radius:50%; background:#ff7a00; box-shadow:0 0 0 3px rgba(255,122,0,.25)}
nav#nav{margin-left:auto; display:flex; gap:18px}
nav#nav a{position:relative; font-weight:800; opacity:1; padding:10px 12px; border-radius:10px; color:#ffffff}
nav#nav a:hover{background:rgba(255,255,255,.14)}
nav#nav a:after{content:""; position:absolute; left:10px; right:10px; bottom:6px; height:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc2)); transform:scaleX(0); transform-origin:left; transition:transform .25s}
nav#nav a.active:after, nav#nav a:hover:after{transform:scaleX(1)}
.menu-btn{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:var(--accentText); border:none; box-shadow:0 8px 24px rgba(31,106,255,.35)}
.menu-btn .burger{position:relative; width:22px; height:14px}
.menu-btn .burger span{position:absolute; left:0; right:0; height:2px; background:var(--accentText); border-radius:2px; transition:transform .2s, opacity .2s, top .2s}
.menu-btn .burger span:nth-child(1){top:0}
.menu-btn .burger span:nth-child(2){top:6px}
.menu-btn .burger span:nth-child(3){top:12px}
.menu-btn[aria-expanded="true"] .burger span:nth-child(1){top:6px; transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .burger span:nth-child(3){top:6px; transform:rotate(-45deg)}
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40}
.backdrop.show{opacity:1; pointer-events:auto}
.menu-close{display:none; position:absolute; top:16px; right:16px; height:44px; padding:0 14px;
  border:none; border-radius:12px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#ffffff;
  box-shadow:0 8px 24px rgba(31,106,255,.35)}
.menu-close .x{font-size:20px; line-height:1; margin-right:6px}
.menu-close:focus-visible{outline:3px solid rgba(73,165,255,.9); outline-offset:2px}
@media (max-width: 820px){
  .menu-btn{display:inline-flex}
  nav#nav{position:fixed; inset:0; padding:calc(16px + env(safe-area-inset-top,0px)) 18px 24px;
    display:block; background:radial-gradient(80% 60% at 10% 0%, rgba(31,106,255,.20), transparent 55%),
    linear-gradient(180deg,#0a1633 0%, #07122b 100%);
    border:none; border-radius:0; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .25s, opacity .25s; z-index:45}
  nav#nav.show{transform:translateY(0); opacity:1; pointer-events:auto}
  nav#nav a{display:block; font-size:18px; padding:16px 14px; border-radius:12px; color:#ffffff}
  nav#nav a:hover{background:rgba(255,255,255,.18)}
  .menu-close{display:inline-flex; align-items:center; justify-content:center}
  .header-bar .cta{display:none}
}
@media (max-width:475px) {
    nav#nav a {color:#fff!important}
    .logo {height:10px;}
}

.btn{padding:12px 16px; border-radius:12px; background:#153060; border:1px solid rgba(255,255,255,.22); font-weight:800; color:#ffffff}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#ffffff; border:none}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(73,165,255,.9); outline-offset:2px}
main{padding:26px 0}
section{padding:28px 0}
.section-title{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.hero{padding:10px 0 2px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px}
.hero h1{font-size:clamp(28px,4vw,44px); line-height:1.06; margin:0 0 12px}
.hero p{color:#0a1b34; margin:0 0 18px}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0}
.chip{border:1px solid var(--line); background:var(--chip); padding:8px 12px; border-radius:999px; font-size:14px; color:#d8e5ff}
.hero-card{background:linear-gradient(180deg,#0e1d45,#0a1432); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.hero-card h3{ color:#ffffff; text-shadow:0 1px 0 rgba(0,0,0,.22) }
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.card{grid-column:span 4; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--soft)}
.card h3{margin:0 0 8px; font-size:18px; color:#ffffff; text-shadow:0 1px 0 rgba(0,0,0,.22)}
.card p{margin:0; color:#f7fbff}
.svg{width:48px; height:48px; border-radius:12px; background:rgba(31,106,255,.15); display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px}
.svg>svg{width:28px; height:28px; color:#cfe3ff}
.grid{display:grid} .grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
.gap{gap:10px} .mt{margin-top:12px}
input,select,textarea{width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:#eaf2ff; color:#000}
label{display:block; color:#0a1b34; font-size:14px; margin:6px 0}
.stat{display:flex; align-items:center; flex-wrap: wrap; gap:10px; padding:10px 12px; background:#0f1830; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; color:#ffffff}
.faq{display:grid; grid-template-columns:repeat(12,1fr); gap:10px}
.faq .q{grid-column:span 12; background:#0f1f3f; border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:12px; cursor:pointer}
.faq .q h4{margin:0; color:#ffffff}
.faq .a{display:none; color:#1c1c1c; margin-top:8px}
.faq .q.open .a{display:block}
footer{margin-top:30px; padding:24px 0; color:#c7d7ff; border-top:1px solid var(--line); background:#0a1224}
.legal{font-size:13px; opacity:.9}
@media (max-width: 1024px){ .hero-grid{grid-template-columns:1fr} .card{grid-column:span 6} }
@media (max-width: 640px){
  nav#nav a{font-size:18px}
  .card{grid-column:span 12}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .cta .btn{width:100%}
  .stat{flex-direction:column; align-items:flex-start}
}
@media (prefers-color-scheme: light){
  body{background:#f6f8fc; color:#0a1b34}
  header{background:linear-gradient(180deg,#ffffff 0%, #f6f8fc 100%) !important; border-bottom:1px solid #dbe5ff !important; color:#0a1b34}
  nav#nav a{ color:#0a1b34; }
  .prose{ color:#0a1b34 !important; }
  .hero-card{ border-color:#dbe5ff }
  .hero-card h3{ color:#fefefe; text-shadow:none }
  .card{ background:#ffffff !important; color:#0a1b34 !important; border-color:#dbe5ff !important; }
  .card h3{ color:#0a1b34 !important; text-shadow:none }
  .card p{ color:#16315e !important; }
  .svg{ background:#eaf2ff !important; }
  .svg>svg{ color:#1f6aff !important; }
  .btn{ background:#0f1f3a !important; color:#ffffff !important; border-color:#c7d7ff !important; }
  .menu-close{ color:#ffffff !important; }
  .faq .q{ background:#eaf2ff !important; border-color:#d0dcff !important }
  .faq .q h4{ color:#0a1b34 !important }
  .section-title h2, .prose h2, .prose h3{ color:#0a1b34 !important }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid rgba(73,165,255,.9); outline-offset:2px}