/**
 * Homepage v2 — shared foundation for every hp section.
 * Colours, type and common pieces live here once; section files only add
 * what is specific to them. Breakpoints: 1100px (tablet), 720px (phone).
 */

:root {
    /* Navy scale */
    --hp-navy-950: #010513;
    --hp-navy-900: #030925;
    --hp-navy-850: #050a22;
    --hp-navy-800: #060c28;
    --hp-navy-750: #071033;
    --hp-navy-700: #0b1339;
    --hp-navy-600: #131c4a;
    --hp-navy-500: #1e2a5e;

    /* Accent + status */
    --hp-coral: #ff5247;
    --hp-green: #7ee2a8;
    --hp-green-600: #22c55e;
    --hp-green-800: #16a34a;
    --hp-amber: #fbbf24;
    --hp-blue: #4f7bff;

    /* Light surfaces */
    --hp-paper: #f6f8f9;
    --hp-white: #ffffff;
    --hp-line: #dfe4ea;
    --hp-line-strong: #c6cdd7;

    /* Text */
    --hp-ink: #11193f;
    --hp-ink-muted: #4b5563;
    --hp-ink-soft: #7a8299;
    --hp-on-dark: #ffffff;
    --hp-on-dark-muted: #c3cae3;
    --hp-on-dark-soft: #a6b0d2;
    --hp-on-dark-faint: #8b97c4;
    --hp-on-dark-bright: #e3e8f8;

    /* New homepage palette (sketch04): glow blues, silver glass, status */
    --hp-surface-dark: #000313;
    --hp-blue-muted: #5c74b2;
    --hp-blue-deep: #3b4f96;
    --hp-blue-bright: #5b8cff;
    --hp-steel-400: #96a5cd;
    --hp-steel-300: #aab9dc;
    --hp-silver-100: #d7e0f5;
    --hp-silver-200: #c8d2eb;
    --hp-silver-300: #b9c1d6;
    --hp-red: #ef4444;
    --hp-red-soft: #f87171;

    /* Type */
    --hp-font-display: var(--bd-font-display);
    --hp-font-body: var(--bd-font-body);
    --hp-font-mono: var(--bd-font-mono);

    /* Layout */
    /* Content is 1280px wide; containers add the gutter on each side. */
    --hp-max: 1280px;
    --hp-max-outer: calc(var(--hp-max) + 2 * var(--hp-gutter));
    --hp-gutter: 32px;
    --hp-section-y: 128px;
    --hp-radius-card: 14px;
    --hp-radius-md: 8px;
    --hp-radius-btn: 6px;
}

@media (max-width: 1100px) {
    :root {
        --hp-gutter: 24px;
        --hp-section-y: 96px;
    }
}

@media (max-width: 720px) {
    :root {
        --hp-gutter: 20px;
        --hp-section-y: 72px;
        --hp-radius-card: 10px;
    }
}

body.hp-page {
    margin: 0;
    background: var(--hp-paper);
}

.hp-main {
    display: flex;
    flex-direction: column;
}

/* Every hp section root carries .hp plus a theme modifier. */
.hp,
.hp *,
.hp *::before,
.hp *::after {
    box-sizing: border-box;
}

.hp {
    font-family: var(--hp-font-body);
    font-size: var(--bd-body-size);
    line-height: var(--bd-body-lh);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

.hp--dark {
    background: var(--hp-navy-900);
    color: var(--hp-on-dark);
}

.hp--light {
    background: var(--hp-paper);
    color: var(--hp-ink);
}

.hp :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
    margin: 0;
}

.hp :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.hp :where(a) {
    color: inherit;
    text-decoration: none;
}

.hp :where(button) {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.hp :where(img, svg, canvas) {
    max-width: 100%;
}

.hp :where(a, button, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--hp-coral);
    outline-offset: 2px;
}

/* Layout */
.hp-container {
    width: 100%;
    max-width: var(--hp-max-outer);
    margin-inline: auto;
    padding-inline: var(--hp-gutter);
}

.hp-section {
    padding-block: var(--hp-section-y);
}

/* Type: sizes, weights and tracking come from the role variables in bd-type.css */
.hp-h1,
.hp-h2,
.hp-h3 {
    font-family: var(--hp-font-display);
    font-weight: var(--bd-heading-weight);
    text-wrap: balance;
}

/* Hero headline */
.hp-h1 {
    font-size: var(--bd-h1-size);
    line-height: var(--bd-h1-lh);
    letter-spacing: var(--bd-h1-track);
}

/* Section headline */
.hp-h2 {
    font-size: var(--bd-h2-size);
    line-height: var(--bd-h2-lh);
    letter-spacing: var(--bd-h2-track);
}

/* Card title (no template uses .hp-h3 today; it is the card title role if one does) */
.hp-h3 {
    font-size: var(--bd-card-size);
    line-height: var(--bd-card-lh);
    letter-spacing: var(--bd-card-track);
}

.hp-lead {
    font-size: var(--bd-lead-size);
    font-weight: var(--bd-text-weight);
    line-height: var(--bd-lead-lh);
    letter-spacing: var(--bd-lead-track);
    max-width: var(--bd-lead-measure);
    text-wrap: pretty;
}

.hp--dark .hp-lead {
    color: var(--bd-muted-on-dark);
}

.hp--light .hp-lead {
    color: var(--bd-muted-on-light);
}

/* Small uppercase label above headings: the one eyebrow style */
.hp-eyebrow {
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    font-weight: var(--bd-eyebrow-weight);
    line-height: var(--bd-eyebrow-lh);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-coral);
}

.hp-mono {
    font-family: var(--hp-font-mono);
}

/* Stat number */
.hp-num {
    font-family: var(--bd-font-mono);
    font-weight: var(--bd-stat-weight);
    letter-spacing: var(--bd-stat-track);
    font-variant-numeric: tabular-nums;
}

/* Buttons */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--bd-btn-h);
    padding: 0 var(--bd-btn-pad);
    border: 1px solid transparent;
    border-radius: var(--hp-radius-btn);
    font-family: var(--hp-font-body);
    font-size: var(--bd-btn-size);
    font-weight: var(--bd-btn-weight);
    line-height: var(--bd-btn-lh);
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.hp-btn--sm {
    min-height: var(--bd-btn-h-sm);
    padding: 0 var(--bd-btn-pad-sm);
    font-size: var(--bd-btn-size-sm);
}

.hp-btn--primary {
    background: var(--hp-coral);
    color: var(--hp-white);
    box-shadow: 0 8px 24px rgb(255 82 71 / .32);
}

.hp-btn--primary:hover {
    background: #ff6a60;
    color: var(--hp-white);
}

.hp-btn--ghost {
    color: var(--hp-white);
    border-color: rgb(255 255 255 / .2);
    background: rgb(255 255 255 / .03);
}

.hp-btn--ghost:hover {
    border-color: rgb(255 255 255 / .45);
    color: var(--hp-white);
}

.hp-btn--outline {
    color: var(--hp-ink);
    border-color: var(--hp-line-strong);
    background: var(--hp-white);
}

.hp-btn--outline:hover {
    border-color: var(--hp-ink);
}

/* Cards */
.hp-card {
    border-radius: var(--hp-radius-card);
}

.hp--light .hp-card {
    background: var(--hp-white);
    border: 1px solid var(--hp-line);
}

.hp--dark .hp-card {
    background: var(--hp-navy-800);
    border: 1px solid rgb(255 255 255 / .08);
}

.hp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .hp *,
    .hp *::before,
    .hp *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}