/*
 * Base — body, typography, headings, links, utilities, container override.
 */

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    background: radial-gradient(circle at 70% 0, rgba(79, 0, 65, 0.15), transparent 28%),
                linear-gradient(180deg, #020713 0, #030813 50%, #020611 100%);
    color: var(--text);
    font-family: var(--font-family);
    font-size: var(--fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ── Container override (Bootstrap uses .container-xl) ────── */
.container-xl {
    width: 100%;
    max-width: var(--container) !important;
    margin-inline: auto;
    padding-inline: 24px;
}

/* Wide container for card-heavy / visual sections */
.container-wide {
    width: 100%;
    max-width: var(--container-wide) !important;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.7px;
    margin: 0;
}

h1 { font-size: var(--fs-h1); letter-spacing: -2.2px; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }

@media (max-width: 767.98px) {
    h1 { font-size: 42px; }
    h2 { font-size: 28px; }
}

@media (max-width: 575.98px) {
    h1 { font-size: 38px; letter-spacing: -1.4px; }
}

/* ── Body text ────────────────────────────────────────────── */
p {
    margin-top: 0;
    margin-bottom: 16px;
}

strong, b {
    font-weight: 700;
}

/* ── Text utilities ───────────────────────────────────────── */
.text-muted { color: var(--muted); }
.text-subtle { color: var(--subtle); }
.text-pink { color: var(--pink-2); }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ── Spacing utilities ────────────────────────────────────── */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 24px; }

/* ── Section pattern ──────────────────────────────────────── */
.section-block {
    padding: var(--section-y) 0;
}

.section-kicker {
    margin: 0 0 8px;
    color: var(--pink-2);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.section-intro {
    max-width: 690px;
    margin: 0 0 24px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 20px;
}

.section-head > a,
.inline-link {
    color: #ff4b88;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.section-head > a:hover,
.inline-link:hover {
    color: #ff7aa8;
}

@media (max-width: 575.98px) {
    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ── Accessibility ────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Responsive container padding ─────────────────────────── */
@media (max-width: 1399.98px) {
    :root { --container: 1140px; --container-wide: 1200px; }
}
@media (max-width: 1199.98px) {
    :root { --container: 960px; --container-wide: 1000px; }
}

@media (max-width: 991.98px) {
    :root { --container: 720px; --container-wide: 720px; --section-y: 34px; }
}

@media (max-width: 767.98px) {
    :root { --container: 540px; --container-wide: 540px; }
    .container-xl, .container-wide { padding-inline: 16px; }
}