:root {
    --bg-0: #0a0f1e;
    --bg-1: #0f172a;
    --bg-2: #142036;
    --bg-3: #1c2b48;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text: #eef2f7;
    --text-soft: #b7c1d1;
    --text-dim: #7f8ba3;

    --brand-1: #22d3ee;
    --brand-2: #a78bfa;
    --brand-3: #fbbf24;
    --brand-grad: linear-gradient(135deg, #22d3ee 0%, #a78bfa 55%, #fbbf24 100%);

    --success: #34d399;
    --danger: #f87171;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.18);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 0 1px rgba(34, 211, 238, 0.15), 0 12px 40px rgba(167, 139, 250, 0.15);

    --step-1: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    --step-2: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
    --step-3: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem);
    --step-4: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
    --step-5: clamp(2rem, 1.6rem + 2vw, 2.8rem);
    --step-6: clamp(2.6rem, 2rem + 3vw, 3.8rem);

    --container: 1200px;
    --gap: 1.25rem;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: radial-gradient(1200px 800px at 10% -10%, rgba(34, 211, 238, 0.12), transparent 60%),
                radial-gradient(900px 700px at 100% 0%, rgba(167, 139, 250, 0.12), transparent 55%),
                linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0) 100%);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
    font-size: var(--step-2);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { border-radius: var(--radius-sm); }

a { color: var(--brand-1); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #67e8f9; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.6rem; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-4); }

p { margin: 0 0 1rem; color: var(--text-soft); }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--brand-1); color: #04202a; padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { left: 1rem; z-index: 100; }

.eyebrow {
    display: inline-block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brand-1); font-weight: 600; margin-bottom: 0.6rem;
}
.eyebrow--light { color: #fef3c7; }

.grad {
    background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.disclaimer { color: var(--text-dim); font-size: 0.95rem; text-align: center; padding-top: 1rem; border-top: 1px solid var(--border); }

.empty { padding: 3rem 1rem; text-align: center; color: var(--text-dim); }