:root {
    color-scheme: dark;
    --page: #0e151c;
    --surface: #19232d;
    --surface-strong: #23303b;
    --text: #f2f5f7;
    --muted: #aab5be;
    --line: #34434f;
    --accent: #e9704e;
    --accent-soft: #4a2c27;
    --focus: #74b7f6;
    --shadow: 0 1.2rem 3rem rgb(0 0 0 / 30%);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at 12% 8%, rgb(233 112 78 / 9%), transparent 30rem),
        radial-gradient(circle at 90% 30%, rgb(96 140 168 / 8%), transparent 28rem),
        var(--page);
    color: var(--text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--accent); }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.page {
    width: min(100% - 2rem, 74rem);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 7rem) 0;
}

.eyebrow {
    display: block;
    margin-bottom: .9rem;
    color: var(--accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1, h2, h3 { margin-top: 0; }
h1, h2 {
    font-family: Georgia, "Times New Roman", serif;
    hyphens: none;
    overflow-wrap: anywhere;
}
h1 {
    max-width: 16ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.8rem, 8vw, 6.2rem);
    line-height: .98;
    letter-spacing: -.045em;
}
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
p { color: var(--muted); line-height: 1.75; }
.lead { max-width: 43rem; font-size: clamp(1.05rem, 2.2vw, 1.35rem); }

.button-link {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    margin-top: 1rem;
    padding: .7rem 1rem;
    border-radius: .7rem;
    background: var(--accent);
    color: white;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 .6rem 1.8rem rgb(233 112 78 / 20%);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.card {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.card h3 { margin-bottom: .5rem; font-size: 1rem; }
.card p { margin: 0; font-size: .9rem; }

@media (max-width: 720px) {
    .page { padding-block: 3.5rem; }
    .card-grid { grid-template-columns: 1fr; }
}