:root {
    --bg: radial-gradient(circle at top, #0f1b2d, #05080f);
    --text: #ffffff;
    --muted: rgba(255,255,255,0.7);
    --surface: rgba(255,255,255,0.04);
    --border: rgba(255,255,255,0.08);
    --accent: #22d3ee;
    --nav-grad: linear-gradient(90deg, rgba(10,18,32,0.95), rgba(10,19,36,0.8), rgba(8,16,32,0.95));
}
body {
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s ease, color 0.3s ease;
    scroll-behavior: smooth;
}
.nav-link {
    color: var(--text);
    opacity: 0.82;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.nav-link:hover { color: var(--accent); opacity: 1; }
.cta-primary {
    background: var(--accent);
    color: #0b1224;
}
.cta-primary:hover { filter: brightness(1.05); }
.cta-ghost {
    border-color: var(--border);
    color: var(--text);
}
.cta-ghost:hover { border-color: var(--accent); color: var(--accent); }
.surface {
    background: var(--surface);
    border-color: var(--border);
}
.nav-surface {
    background: var(--nav-grad);
    border-color: var(--border);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
