/* =========================================================
   HOMEPAGE
   ========================================================= */

.homepage-hero {
    max-width: 48rem;
    margin: var(--space-8) auto var(--space-0);
    text-align: center;
}

.homepage-banner {
    height: clamp(15rem, 25vw, 30rem);
    margin: calc(var(--space-12) * -1) calc(var(--space-8) * -1) var(--space-0);
    overflow: hidden;
    background: var(--color-brand-rose);
    border-bottom: 1px solid var(--color-border);
}

.homepage-banner img {
    width: 122%;
    max-width: none;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 57%;
    transform: translateX(-17.6%);
}

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

.homepage-hero .page-layout__intro {
    max-width: 39rem;
    margin-top: var(--space-0);
    margin-inline: auto;
}

.homepage-hero__actions,
.homepage-section__actions {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.homepage-hero__actions {
    justify-content: center;
}

.homepage-section {
    min-width: 0;
}

.homepage-section__header {
    max-width: var(--width-content-sm);
}

.homepage-section__header h2,
.homepage-section--cta h2 {
    margin: var(--space-0);
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    line-height: var(--line-height-tight);
}

.homepage-section__header > p:last-child,
.homepage-section--cta > div > p:last-child {
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.homepage-section__content {
    max-width: var(--width-content-sm);
    margin-top: var(--space-5);
}

.homepage-section__content p {
    line-height: var(--line-height-relaxed);
}

.homepage-universes {
    margin-top: var(--space-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.homepage-universe {
    position: relative;
    padding: var(--space-6);
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-surface), var(--color-surface-muted));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-brand-card);
}

.homepage-universe::after {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    right: -3rem;
    bottom: -4rem;
    border-radius: 50%;
    background: rgb(var(--color-brand-rose-rgb) / 55%);
}

.homepage-universe > * {
    position: relative;
    z-index: 1;
}

.homepage-universe__eyebrow {
    margin: var(--space-0) var(--space-0) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.homepage-universe h3 {
    margin: var(--space-0) var(--space-0) var(--space-3);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.homepage-universe p {
    line-height: var(--line-height-relaxed);
}

.homepage-universe__status {
    margin-bottom: var(--space-0);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.homepage-section--promise,
.homepage-section--philosophy,
.homepage-section--cta {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-surface), var(--color-surface-accent));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.homepage-section--cta {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .homepage-universes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homepage-section--promise,
    .homepage-section--philosophy,
    .homepage-section--cta {
        padding: var(--space-8);
    }
}

@media (max-width: 47.99rem) {
    .homepage-banner {
        height: clamp(10.5rem, 52vw, 13rem);
        margin: calc(var(--space-8) * -1) calc(var(--space-4) * -1) var(--space-0);
    }

    .homepage-banner img {
        width: 135%;
        transform: translateX(-21.6%);
    }

    .homepage-hero {
        margin-top: var(--space-8);
    }
}

@media (min-width: 64rem) {
    .homepage-universes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .homepage-section--cta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .homepage-section__actions {
        margin-top: var(--space-0);
        justify-content: flex-end;
    }
}