:root{
  --bg:#ffffff; --surface:#f5f7fb; --text:#0b1220; --muted:#5b6b83;
  --brand:#2a6cff; --brand-ink:#0b3dcc; --ok:#12805c;
  --radius:14px; --shadow:0 6px 24px rgba(2,15,46,.08);
  --shadow-strong:0 14px 42px rgba(2,15,46,.12); --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c111b; --surface:#121a27; --text:#e8eefc; --muted:#9bb0cf; --brand:#5b8cff; --brand-ink:#2a6cff;
    --shadow:0 6px 24px rgba(0,0,0,.5); --shadow-strong:0 14px 42px rgba(0,0,0,.65); }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}
header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid #dbe5ff22}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800}
.logo img{height:40px; width:auto}
nav ul{display:flex; gap:1.2rem; list-style:none; margin:0;padding:0}
nav a{color:var(--muted); font-weight:600}
.btn{display:inline-flex; gap:.5rem; align-items:center; justify-content:center; padding:.85rem 1.1rem;
  border-radius:12px; font-weight:700; background:var(--brand); color:#fff; border:1px solid transparent; box-shadow:var(--shadow)}
.btn:hover{background:var(--brand-ink); text-decoration:none; box-shadow:var(--shadow-strong); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid #dbe5ff55}

/* Main content */
main{padding:64px 0}
.content{text-align:center; max-width:600px; margin:0 auto}
.icon{font-size:4rem; margin-bottom:2rem; color:var(--muted)}
h1{font-size:clamp(2rem,3.8vw,3rem); line-height:1.15; margin:.3rem 0 1rem}
.lead{font-size:1.125rem; color:var(--muted); margin:0 0 2rem}
.card{background:var(--surface); border:1px solid #dbe5ff33; border-radius:16px; padding:32px; box-shadow:var(--shadow); margin:2rem 0}
.badge{display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:800; background:#eaf1ff; color:#1b4fe0; margin-bottom:1rem}
@media (prefers-color-scheme:dark){ .badge{background:#1b2a49; color:#cfe0ff} }

/* Footer */
footer{margin-top:32px; padding:28px 0 44px; background:var(--surface); border-top:1px solid #dbe5ff33}
.foot{display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr; gap:18px}
.legal{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted)}

/* Responsive */
@media (max-width:980px){
  .foot{grid-template-columns:1fr}
}
