.h1{font-size:34px;letter-spacing:-.7px;margin:10px 0 8px}
.h2{font-size:18px;letter-spacing:-.2px;margin:0 0 10px;opacity:.9}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width:900px){.col-6{grid-column:span 12}}

.container{max-width:1100px;margin:0 auto;padding:26px 18px}

.small{font-size:12px;opacity:.82}
.muted{opacity:.75}

/* ✅ GLASS MODULES */
.card,
.panel,
.section,
.module{
background:color-mix(in oklab,var(--bg),transparent 45%);
backdrop-filter:blur(12px);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:var(--pad);
}

/* Pills */
.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 12px;
border-radius:999px;
border:1px solid var(--border);
background:color-mix(in oklab,var(--bg),transparent 50%);
font-weight:800;
}

/* Buttons */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
border-radius:14px;
padding:10px 14px;
border:1px solid var(--border);
background:color-mix(in oklab,var(--bg),transparent 45%);
cursor:pointer;
font-weight:800;
}

.btn.primary{
background:linear-gradient(135deg,var(--primary),var(--accent));
color:#08101a;
border:0;
}