.explore-page main {
    gap: 18px;
}

body.explore-page {
    overflow-x: clip;
}

body[data-neon-theme].explore-page {
    --explore-neon-edge: rgb(var(--neon-primary-rgb) / 0.22);
    --explore-neon-wash: linear-gradient(135deg, var(--neon-soft), transparent 42%, var(--neon-secondary-soft));
    --explore-neon-glow: 0 0 28px rgb(var(--neon-primary-rgb) / 0.12);
    --explore-neon-glow-strong: 0 0 44px rgb(var(--neon-primary-rgb) / 0.18), 0 0 58px rgb(var(--neon-secondary-rgb) / 0.12);
    --explore-glass: rgba(5, 9, 21, 0.78);
    --explore-glass-strong: rgba(4, 7, 18, 0.88);
}

.explore-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 22px;
    min-height: 420px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgb(var(--neon-primary-rgb) / 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 20%, rgb(var(--neon-primary-rgb) / 0.2), transparent 36%),
        radial-gradient(circle at 88% 10%, rgb(var(--neon-secondary-rgb) / 0.18), transparent 38%),
        linear-gradient(90deg, rgba(4, 8, 18, 0.97), rgba(4, 8, 18, 0.82), rgba(4, 8, 18, 0.5)),
        url("../../images/scenes/nightflat-window-city-default.webp") center / cover no-repeat,
        rgba(7, 11, 24, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgb(var(--neon-secondary-rgb) / 0.08),
        0 0 36px rgb(var(--neon-primary-rgb) / var(--time-hero-neon-opacity)),
        0 24px 72px rgba(0, 0, 0, 0.34);
}

.explore-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(3, 6, 17, 0.38), transparent 32%, rgba(3, 6, 17, 0.24)),
        linear-gradient(90deg, rgb(var(--neon-primary-rgb) / 0.1), transparent 28%, rgb(var(--neon-secondary-rgb) / 0.1)),
        linear-gradient(180deg, rgba(3, 6, 17, 0.16), transparent 48%, rgba(3, 6, 17, 0.68));
    opacity: calc(0.62 + var(--audio-reactive-level) * 0.24);
    pointer-events: none;
}

.explore-hero::after {
    content: "";
    position: absolute;
    inset: auto 28px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-primary), var(--neon-secondary), transparent);
    box-shadow: 0 0 22px var(--neon-glow);
    pointer-events: none;
}

.explore-hero-copy,
.explore-feature-track {
    position: relative;
    z-index: 1;
}

.explore-hero-copy {
    display: grid;
    align-content: center;
    gap: 18px;
    max-width: 790px;
}

.explore-hero-copy .eyebrow,
.explore-hero-copy h1,
.explore-hero-copy p {
    margin: 0;
}

.explore-hero-copy h1 {
    max-width: 690px;
    font-size: 4.8rem;
    line-height: 0.98;
    letter-spacing: 0;
    text-wrap: balance;
}

.explore-hero-copy p:not(.eyebrow) {
    max-width: 620px;
    color: rgba(224, 232, 247, 0.78);
    font-size: 1.08rem;
    line-height: 1.72;
}

.explore-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.explore-hero-stats span {
    display: grid;
    min-width: 112px;
    padding: 12px 14px;
    border: 1px solid rgb(var(--neon-primary-rgb) / 0.16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgb(var(--neon-primary-rgb) / 0.08), rgb(var(--neon-secondary-rgb) / 0.045)),
        rgba(4, 8, 18, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.explore-hero-stats strong {
    font-size: 1.34rem;
    text-shadow: 0 0 16px rgb(var(--neon-primary-rgb) / 0.22);
}

.explore-hero-stats small {
    color: rgba(224, 232, 247, 0.66);
}

.explore-feature-track {
    align-self: end;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgb(var(--neon-primary-rgb) / 0.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 12%, rgb(var(--neon-primary-rgb) / 0.12), transparent 38%),
        radial-gradient(circle at 92% 84%, rgb(var(--neon-secondary-rgb) / 0.1), transparent 34%),
        var(--explore-glass);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 24px rgb(var(--neon-primary-rgb) / 0.08),
        0 18px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px) saturate(1.08);
}

.explore-feature-track:hover,
.explore-feature-track:focus-visible {
    border-color: rgb(var(--neon-primary-rgb) / 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 32px rgb(var(--neon-primary-rgb) / 0.16),
        0 20px 58px rgba(0, 0, 0, 0.32);
}

.explore-feature-art {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border: 1px solid rgb(var(--neon-primary-rgb) / 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.explore-feature-art::after,
.explore-release-play::after,
.explore-track-art-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 45%, rgb(var(--neon-primary-rgb) / 0.18)),
        linear-gradient(0deg, rgba(3, 6, 17, 0.12), transparent 45%);
    opacity: 0.7;
    pointer-events: none;
}

.explore-release-play > span[aria-hidden="true"],
.explore-track-art-button > span[aria-hidden="true"],
.explore-feature-art .premium-track-lock,
.explore-release-play .premium-track-lock {
    z-index: 1;
}

.explore-feature-art img,
.explore-release-play img,
.explore-artist-card img,
.explore-track-art-button img,
.artist-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-feature-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.explore-feature-copy strong {
    font-size: 1.65rem;
    line-height: 1.08;
    text-shadow: 0 0 18px rgba(3, 6, 17, 0.88);
    overflow-wrap: anywhere;
}

.explore-feature-copy small,
.explore-feature-copy span:not(.eyebrow) {
    color: rgba(224, 232, 247, 0.7);
}