
:root{
  --bg:#0b1220; --ink:#e7e9ee; --muted:#a8b3c7;
  --brand:#7c3aed; --brand2:#2563eb;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family: "Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1000px 700px at 0% 0%, rgba(124,58,237,.25), rgba(124,58,237,0) 60%),
    radial-gradient(1100px 800px at 100% 100%, rgba(37,99,235,.22), rgba(37,99,235,0) 60%),
    linear-gradient(165deg, #0b1220 0%, #0d1530 50%, #0b173f 100%);
  min-height:100%;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 22px}
.nav{position:sticky;top:0;z-index:40;background:rgba(13,21,48,.5);backdrop-filter: blur(10px);border-bottom:1px solid rgba(168,179,199,.15)}
.nav-inner{display:flex;align-items:center;justify-content:flex-end;height:60px}
.menu{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.menu a{font-weight:600;color:var(--muted);padding:10px 6px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a.current{color:var(--ink);border-color:rgba(124,58,237,.65)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(13,21,48,.9);backdrop-filter:blur(10px);border-top:1px solid rgba(168,179,199,.2);display:none;gap:8px;justify-content:space-between;align-items:center;padding:12px 16px}
.bottom-nav a, .bottom-nav button{appearance:none;border:none;background:rgba(168,179,199,.1);color:var(--ink);padding:12px 16px;border-radius:14px;font-weight:700;font-size:16px}
.bottom-nav button{cursor:pointer}
.overlay{position:fixed;inset:0;background:rgba(2,6,23,.92);backdrop-filter:blur(8px);display:none;z-index:60}
.overlay .sheet{max-width:560px;margin:12vh auto;background:rgba(13,21,48,.85);border:1px solid rgba(168,179,199,.25);border-radius:22px;padding:22px}
.overlay h3{margin:0 0 12px;font-size:clamp(20px,4vw,26px)}
.overlay a{display:block;padding:14px 12px;border-radius:12px;color:var(--ink);font-size:clamp(18px,3.2vw,20px)}
.overlay a:hover{background:rgba(168,179,199,.12)}
.overlay .close{float:right;background:rgba(168,179,199,.15);padding:8px 12px;border-radius:10px}
.section{padding:64px 0 88px}
h1{font-size:clamp(44px,9vw,84px);line-height:.95;margin:0 0 12px;letter-spacing:.2px}
h2{font-size:clamp(30px,5vw,44px);margin:0 0 16px}
h3{font-size:clamp(20px,3.6vw,24px);margin:0 0 8px}
p, li{font-size:clamp(18px,2.6vw,20px)}
.lead{font-size:clamp(20px,3vw,24px);color:#cbd5ff;opacity:.9;margin:0 0 12px}
.card{background:rgba(7,12,30,.55);border:1px solid rgba(168,179,199,.16);border-radius:18px;box-shadow:0 24px 48px rgba(0,0,0,.28);padding:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.center{display:grid;place-items:center;text-align:center}
.vh-center{min-height:calc(100vh - 220px);display:grid;place-items:center;padding-bottom:100px}
.footer{padding:40px 0 100px;border-top:1px solid rgba(168,179,199,.15);color:var(--muted);margin-top:40px}
.footer a{color:var(--muted)}
@media (max-width: 980px){
  .nav{display:none}
  .bottom-nav{display:flex}
  .grid3{grid-template-columns:1fr}
  .vh-center{min-height:calc(100vh - 160px)}
}
