.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(100svh, 54rem);
    padding-top: var(--header-h);
    padding-bottom: clamp(var(--sp-10), 13vh, var(--sp-16));
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) contrast(1.05) brightness(0.62);
    animation: drift 30s var(--ease) infinite alternate;
}

@keyframes drift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 70% at 50% 34%, transparent 0%, rgba(var(--rgb-frame-deep), 0.72) 62%, var(--c-void) 100%),
        linear-gradient(180deg, rgba(var(--rgb-frame-deep), 0.86) 0%, rgba(var(--rgb-black), 0.34) 38%, var(--c-void) 100%);
}

.hero-inner {
    position: relative;
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
}

.hero-inner::before,
.hero-inner::after {
    content: '';
    position: absolute;
    top: -22vh;
    bottom: -22vh;
    width: var(--hairline);
    background: linear-gradient(180deg, transparent, rgba(var(--rgb-gold), 0.42) 30%, rgba(var(--rgb-gold), 0.42) 70%, transparent);
}

.hero-inner::before {
    left: calc(var(--gutter) * -1.6);
}

.hero-inner::after {
    right: calc(var(--gutter) * -1.6);
}

.hero-chapter {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-mega);
    color: var(--c-gold);
}

.hero-chapter::before,
.hero-chapter::after {
    content: '';
    width: clamp(1.5rem, 5vw, 3.5rem);
    height: var(--hairline);
    background: rgba(var(--rgb-gold), 0.5);
}

.hero-logo {
    width: clamp(11rem, 26vw, 25rem);
    margin: 0 auto var(--sp-5);
    filter: var(--brand-tint);
}

.hero-claim {
    font-family: var(--font-display);
    font-size: var(--fs-700);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: var(--ls-tight);
    color: var(--c-bone);
}

.hero-lead {
    max-width: 38rem;
    margin: var(--sp-5) auto 0;
    color: var(--c-text-dim);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
}

.hero-connect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

.hero-connect .label {
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-text-faint);
}

.scroll-hint {
    position: absolute;
    bottom: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-text-faint);
}

.scroll-hint i {
    display: block;
    width: var(--hairline);
    height: 2.2rem;
    background: linear-gradient(180deg, rgba(var(--rgb-gold), 0.6), transparent);
    animation: sink 2.8s var(--ease) infinite;
    transform-origin: top;
}

@keyframes sink {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

.status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    border: var(--hairline) solid var(--c-border);
    border-radius: var(--radius-lg);
    background: rgba(var(--rgb-texture), 0.6);
    overflow: hidden;
}

.status-cell {
    padding: var(--sp-5);
    border-right: var(--hairline) solid var(--c-border);
}

.status-cell:last-child {
    border-right: 0;
}

.status-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-text-faint);
}

.status-value {
    margin-top: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-600);
    font-weight: 600;
    color: var(--c-bone);
    line-height: 1;
}

.status-value.is-pending {
    color: var(--c-text-faint);
}

.split {
    display: grid;
    gap: clamp(var(--sp-6), 5vw, var(--sp-10));
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    align-items: center;
}

.split-top {
    align-items: start;
}

.split-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border: var(--hairline) solid var(--c-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.6) brightness(0.7);
    transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.split-media:hover img {
    filter: grayscale(0.3) brightness(0.82);
    transform: scale(1.03);
}

.split-media figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--sp-5);
    background: linear-gradient(180deg, transparent, rgba(var(--rgb-frame-deep), 0.9));
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-text-dim);
}

.split-body p + p {
    margin-top: var(--sp-4);
}

.split-body .btn {
    margin-top: var(--sp-6);
}

.pull {
    margin-block: var(--sp-6);
    padding-left: var(--sp-5);
    border-left: 2px solid rgba(var(--rgb-gold), 0.45);
    font-family: var(--font-display);
    font-size: var(--fs-500);
    font-style: italic;
    line-height: var(--lh-snug);
    color: var(--c-bone);
}

.closing {
    text-align: center;
}

.closing h2 {
    max-width: 34rem;
    margin-inline: auto;
    font-size: var(--fs-600);
}

.closing p {
    max-width: 34rem;
    margin: var(--sp-3) auto 0;
    color: var(--c-text-dim);
}

.closing .hero-actions {
    margin-top: var(--sp-5);
}

.closing .callout {
    margin-inline: auto;
}

@media (min-width: 130rem) {
    .hero-logo {
        width: 29rem;
    }
}

@media (max-width: 48rem) {
    .scroll-hint {
        display: none;
    }

    .hero {
        padding-bottom: var(--sp-8);
    }

    .hero-logo {
        width: clamp(9.5rem, 48vw, 14rem);
    }

    .hero-claim {
        font-size: var(--fs-600);
    }

    .hero-chapter {
        margin-bottom: var(--sp-4);
    }
}

@media (max-width: 62rem) {
    .hero-inner::before,
    .hero-inner::after {
        display: none;
    }

    .status-cell {
        border-right: 0;
        border-bottom: var(--hairline) solid var(--c-border);
    }

    .status-cell:last-child {
        border-bottom: 0;
    }
}

.launch {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    width: fit-content;
    max-width: 100%;
    margin: var(--sp-7) auto 0;
    padding: var(--sp-4) clamp(var(--sp-5), 6vw, var(--sp-8));
    border-block: var(--hairline) solid rgba(var(--rgb-gold), 0.3);
}

.launch-label {
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-gold);
}

.launch-label:empty {
    display: none;
}

.launch-value {
    font-family: var(--font-display);
    font-size: var(--fs-600);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--ls-tight);
    color: var(--c-bone);
    text-align: center;
}

.launch-count {
    display: flex;
    gap: clamp(var(--sp-4), 4vw, var(--sp-6));
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
}

.launch-count li {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
}

.launch-count b {
    font-family: var(--font-display);
    font-size: var(--fs-500);
    font-weight: 600;
    line-height: 1;
    color: var(--c-gold-glow);
    font-variant-numeric: tabular-nums;
}

.launch-count span {
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-text-faint);
}

.launch.is-open .launch-value {
    color: var(--c-gold-glow);
}

@media (max-width: 48rem) {
    .launch {
        margin-top: var(--sp-5);
        padding-block: var(--sp-3);
    }

    .launch-value {
        font-size: var(--fs-500);
    }
}