:root{
--bg:#070a12;
--panel:#0d1220;
--panel2:#0b1020;
--text:#e8ecff;
--muted:#a9b2d6;
--line:rgba(255,255,255,.08);
--accent:#6b7cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: radial-gradient(900px 500px at 25% 15%, rgba(107,124,255,.25), transparent 60%),
radial-gradient(900px 500px at 85% 35%, rgba(0,200,255,.18), transparent 60%),
var(--bg);
color:var(--text);
}

a{color:inherit}
.container{max-width:980px; margin:28px auto; padding:0 16px;}

.topbar{
display:flex; gap:16px; align-items:center; justify-content:space-between;
padding:16px 18px;
border-bottom:1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

.brand{display:flex; flex-direction:column; gap:4px}
.logo{font-weight:800; letter-spacing:.6px}
.sub{color:var(--muted); font-size:12px}

.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{
text-decoration:none;
color:var(--muted);
padding:8px 10px;
border-radius:10px;
border:1px solid transparent;
}
.nav a:hover{
color:var(--text);
border-color:var(--line);
background:rgba(255,255,255,.03);
}

.section{margin-top:18px}
.card{
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid var(--line);
border-radius:16px;
padding:18px;
box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.kicker{
display:inline-block;
font-size:12px;
color:var(--muted);
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:10px;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 14px;
border-radius:12px;
border:1px solid var(--line);
text-decoration:none;
cursor:pointer;
transition:.15s ease;
}
.btn.primary{
background: linear-gradient(180deg, rgba(107,124,255,.95), rgba(107,124,255,.65));
border-color: rgba(107,124,255,.35);
color:#071026;
font-weight:700;
}
.btn.primary:hover{transform: translateY(-1px)}
.btn.ghost{
background: rgba(255,255,255,.03);
color:var(--text);
}
.btn.ghost:hover{background: rgba(255,255,255,.06)}

ul{padding-left:18px}
li{margin:10px 0; color:var(--muted)}
li a{color:var(--text); text-decoration:none}
li a:hover{text-decoration:underline}

.footer{
max-width:980px;
margin:30px auto;
padding:18px 16px;
color:var(--muted);
border-top:1px solid var(--line);
}