/* =========================================
   Base (global)
   - reset, body, typography, utilities
   ========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    color: var(--text);
    line-height: 1.55;

    /* Blue / Dark (not black) */
    background:
        radial-gradient(1100px 650px at 18% 8%, rgba(0, 120, 212, 0.32), transparent 62%),
        radial-gradient(950px 650px at 85% 0%, rgba(0, 183, 195, 0.22), transparent 62%),
        radial-gradient(900px 700px at 70% 92%, rgba(37, 99, 235, 0.18), transparent 70%),
        linear-gradient(180deg, #0e2144 0%, #12305c 45%, #163a6f 100%);
}

main {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Layout helper */
.container {
    width: min(var(--container), 100% - 2*var(--pad));
    margin-inline: auto;
}

/* Typography */
h1,
h2,
h3 {
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--h1);
    line-height: 1.06;
}

h2 {
    font-size: var(--h2);
    line-height: 1.18;
}

p {
    margin: 0 0 12px 0;
    font-size: var(--p);
    color: var(--muted);
}

.lead {
    font-size: clamp(16px, 1.6vw, 20px);
    max-width: 70ch;
}

/* Utilities */
.muted {
    color: var(--muted);
}

.strong {
    font-weight: 800;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}