:root{
  --ink:#0f172a;
  --ink-muted:#475569;
  --bg-start:#f8fbff;
  --bg-end:#ffffff;
  --surface:rgba(255,255,255,0.85);
  --card:#ffffff;
  --card-border:rgba(148,163,184,0.25);
  --border-strong:rgba(15,23,42,0.12);
  --brand:#6366f1;
  --link:#1d4ed8;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg-start),#f1f4ff 55%,var(--bg-end));
  color:var(--ink);
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;backdrop-filter:blur(12px);background:var(--surface);border-bottom:1px solid var(--card-border);z-index:50}
.nav{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}
.brand img{width:28px;height:28px}
.navlinks{margin-left:auto;display:flex;gap:16px;align-items:center}
.navlinks a{color:var(--ink-muted);text-decoration:none;opacity:.85;font-weight:500;transition:color .2s ease,opacity .2s ease}
.navlinks a:hover{color:var(--link);opacity:1}
.dropdown{position:relative}
.dropdown-menu{position:absolute;left:0;margin-top:8px;background:rgba(255,255,255,.98);border:1px solid var(--card-border);border-radius:12px;padding:8px;min-width:260px;display:none;box-shadow:0 12px 24px rgba(15,23,42,.12)}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:8px 10px;border-radius:10px;color:var(--ink-muted);opacity:.9;transition:background .2s ease,color .2s ease}
.dropdown-menu a:hover{background:rgba(59,130,246,.08);color:var(--link);opacity:1}
.hero{padding:48px 0 20px}
.hero h1{margin:0 0 8px;font-size:36px;color:var(--ink)}
.lead{color:var(--ink-muted);max-width:720px}
.cta{display:flex;gap:12px;margin-top:16px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;transition:transform .2s ease,opacity .2s ease}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 25px rgba(99,102,241,.25)}
.btn-primary:hover{opacity:.92;transform:translateY(-1px)}
.btn-secondary{background:#e2e8f0;color:var(--ink);border:1px solid var(--card-border)}
.btn-secondary:hover{background:#dbe4f4;transform:translateY(-1px)}
.grid{display:grid;gap:14px;margin:28px 0;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:16px;box-shadow:0 18px 40px rgba(15,23,42,.08)}
footer{padding:20px 24px;color:var(--ink-muted);border-top:1px solid var(--card-border);margin-top:40px;background:rgba(255,255,255,.9)}
footer a{color:var(--link);text-decoration:none}
footer a:hover{text-decoration:underline}

.dark{
  --ink:#e5e7eb;
  --ink-muted:#cbd5f5;
  --bg-start:#0b1020;
  --bg-end:#0d1226;
  --surface:rgba(10,14,30,.6);
  --card:#111827;
  --card-border:rgba(255,255,255,.08);
  --border-strong:rgba(15,23,42,.5);
  --link:#60a5fa;
}
.dark body{background:linear-gradient(180deg,#0b1020,#0d1226);color:var(--ink)}
.dark .header{background:var(--surface);border-bottom:1px solid rgba(255,255,255,.08)}
.dark .brand{color:#fff}
.dark .navlinks a{color:#fff;opacity:.75}
.dark .navlinks a:hover{opacity:1;color:var(--link)}
.dark .dropdown-menu{background:rgba(10,14,30,.95);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.dark .dropdown-menu a{color:#fff;opacity:.85}
.dark .dropdown-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.dark .hero h1{color:#fff}
.dark .lead{color:#cbd5e1}
.dark .btn-secondary{background:#1f2937;color:#fff;border:1px solid #374151}
.dark .card{background:#0f172a;border:1px solid rgba(255,255,255,.08);box-shadow:none}
.dark footer{background:linear-gradient(180deg,rgba(15,23,42,.8),rgba(15,23,42,.95));color:#94a3b8;border-top:1px solid rgba(255,255,255,.08)}
.dark footer a{color:var(--link)}