.page-home {
    background:
        radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 32rem),
        radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.08), transparent 26rem),
        var(--theme-bg);
}

.page-home .site-header {
    background: linear-gradient(180deg, rgba(5, 7, 10, 0.78), rgba(5, 7, 10, 0.18)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
    position: absolute;
    width: 100%;
}

.site-header {
    background: rgba(5, 7, 10, 0.72) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background 220ms ease, border-color 220ms ease, min-height 220ms ease;
}

.site-header.is-scrolled {
    background: rgba(5, 7, 10, 0.88) !important;
    backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.site-nav {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    gap: 4px !important;
    padding: 5px;
}

.site-nav a {
    border: 0 !important;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.76);
    padding: 9px 13px !important;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.site-nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.archive-hero {
    background-blend-mode: normal;
    min-height: min(920px, 100vh) !important;
    padding-top: clamp(140px, 14vw, 190px) !important;
}

.page-heading {
    background:
        linear-gradient(135deg, rgba(5, 7, 10, 0.96), rgba(13, 19, 25, 0.88)),
        radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 24rem) !important;
    border-top: 0 !important;
    min-height: 390px;
    overflow: hidden;
    padding-top: clamp(120px, 13vw, 170px) !important;
    position: relative;
}

.page-heading::after {
    background: linear-gradient(115deg, transparent 0 62%, color-mix(in srgb, var(--theme-accent) 58%, transparent) 62% 64%, transparent 64% 100%);
    content: "";
    inset: 0;
    opacity: 0.66;
    pointer-events: none;
    position: absolute;
}

.page-heading > * {
    max-width: 760px;
    position: relative;
    z-index: 1;
}

.page-heading h1 {
    font-size: clamp(58px, 8vw, 116px);
    line-height: 0.86;
}

.page-heading p:not(.eyebrow) {
    color: rgba(246, 248, 243, 0.78) !important;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.45;
}

.archive-section {
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.98), rgba(11, 17, 23, 0.96)),
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent 24rem);
}

.archive-hero::before {
    background:
        linear-gradient(90deg, rgba(5, 7, 10, 0.94) 0%, rgba(5, 7, 10, 0.62) 44%, rgba(5, 7, 10, 0.2) 100%),
        linear-gradient(180deg, rgba(5, 7, 10, 0.08) 0%, rgba(5, 7, 10, 0.92) 92%),
        radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--theme-accent) 28%, transparent), transparent 30rem) !important;
}

.archive-hero::after {
    background:
        linear-gradient(115deg, transparent 0 56%, color-mix(in srgb, var(--theme-accent) 58%, transparent) 56% 58%, transparent 58% 100%),
        linear-gradient(180deg, transparent 0 74%, var(--theme-bg) 100%) !important;
}

.archive-hero__media {
    filter: saturate(1.1) contrast(1.05);
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.archive-hero__content {
    max-width: 920px !important;
}

.archive-hero h1 {
    font-size: clamp(58px, 9.5vw, 132px);
    letter-spacing: 0;
    line-height: 0.86;
    max-width: 900px;
}

.hero-kicker {
    color: rgba(246, 248, 243, 0.82) !important;
    font-size: clamp(18px, 2vw, 26px) !important;
    max-width: 680px;
    text-transform: none !important;
}

.hero-meta-row span {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px;
}

.button {
    border-radius: var(--button-radius, 8px) !important;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button.primary {
    background: linear-gradient(135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 68%, #ffffff)) !important;
    border-color: color-mix(in srgb, var(--theme-accent) 72%, #ffffff) !important;
}

.button.secondary {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.home-page .section,
.home-page .newsletter-band {
    border-top: 0 !important;
    padding-top: clamp(70px, 8vw, 118px);
    padding-bottom: clamp(70px, 8vw, 118px);
    position: relative;
    overflow: hidden;
}

.image-backed-section::before {
    background:
        linear-gradient(90deg, var(--theme-bg) 0%, rgba(5, 7, 10, 0.9) 42%, rgba(5, 7, 10, 0.58) 100%),
        var(--section-image);
    background-position: center;
    background-size: cover;
    content: "";
    inset: 0;
    opacity: 0.36;
    position: absolute;
}

.home-page .section > *,
.newsletter-modern > * {
    position: relative;
    z-index: 1;
}

.split-heading {
    margin-bottom: 28px;
}

.split-heading h2 {
    max-width: 780px;
}

.match-grid {
    gap: clamp(16px, 2vw, 26px) !important;
}

.page-inner .match-card,
.page-inner .fighter-card {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.pagination-wrap nav {
    color: rgba(246, 248, 243, 0.82) !important;
}

.pagination-wrap nav a,
.pagination-wrap nav span {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
    color: var(--theme-text) !important;
}

.match-card {
    background: rgba(13, 19, 25, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.match-card:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 54%, rgba(255, 255, 255, 0.2)) !important;
    transform: translateY(-6px);
}

.match-thumb {
    background:
        linear-gradient(135deg, rgba(129, 0, 0, 0.88), rgba(7, 13, 19, 0.88)),
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.18), transparent 13rem) !important;
    min-height: 205px;
}

.match-thumb span {
    color: rgba(255, 255, 255, 0.72);
}

.match-body {
    min-height: 150px !important;
    padding: 20px !important;
}

.fighter-section {
    background:
        linear-gradient(135deg, rgba(13, 19, 25, 0.92), rgba(5, 7, 10, 0.98)),
        radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent 22rem);
}

.fighter-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    min-height: 190px !important;
    padding: 24px !important;
}

.fighter-card:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    transform: translateY(-5px);
}

.about-band {
    background:
        linear-gradient(135deg, rgba(5, 7, 10, 0.86), rgba(13, 19, 25, 0.96)),
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 26rem) !important;
}

.about-band__intro {
    align-items: center;
}

.about-band__intro > div:first-child {
    max-width: 760px;
}

.about-media img {
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.feature-list {
    display: grid;
    gap: 0;
    margin-top: 36px !important;
}

.feature-list li {
    border-color: rgba(255, 255, 255, 0.12) !important;
    padding: 18px 0 !important;
}

.newsletter-modern {
    align-items: center !important;
    background:
        linear-gradient(135deg, rgba(5, 7, 10, 0.84), rgba(13, 19, 25, 0.9)),
        var(--newsletter-image),
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--theme-accent) 25%, transparent), transparent 24rem);
    background-position: center;
    background-size: cover;
    display: grid;
    gap: clamp(24px, 4vw, 64px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px) !important;
}

.newsletter-modern::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 38%, transparent), transparent 38%);
    content: "";
    inset: 0;
    opacity: 0.2;
    position: absolute;
}

.newsletter-form {
    backdrop-filter: blur(22px);
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.newsletter-form input {
    background: rgba(5, 7, 10, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.site-footer {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.96), #020304),
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 20rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: grid !important;
    gap: 28px;
    grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 0.7fr) minmax(320px, 1fr);
}

.watch-page,
.fighter-profile {
    background:
        linear-gradient(135deg, rgba(5, 7, 10, 0.94), rgba(13, 19, 25, 0.88)),
        var(--detail-image),
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent 28rem);
    background-position: center;
    background-size: cover;
    min-height: 720px;
    padding-top: clamp(116px, 11vw, 158px) !important;
}

.player-shell,
.match-panel,
.match-detail-section .panel,
.fighter-portrait {
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.player-shell iframe,
.player-placeholder {
    border-radius: 18px;
}

.match-panel {
    backdrop-filter: blur(18px);
    padding: 26px;
}

.match-panel h1,
.fighter-profile h1 {
    font-size: clamp(44px, 5.5vw, 78px);
    line-height: 0.9;
}

.match-panel dl,
.fighter-profile dl {
    display: grid;
    gap: 10px;
}

.match-panel dl div,
.fighter-profile dl div {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 12px;
}

.match-detail-section {
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.98), rgba(12, 17, 23, 0.98)),
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 24rem);
}

.match-detail-grid {
    gap: clamp(18px, 3vw, 28px) !important;
}

.match-fighter-profile {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 16px;
}

.fighter-profile {
    align-items: center;
}

.fighter-portrait {
    aspect-ratio: 4 / 5;
}

.fighter-portrait img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.maintenance-body {
    background:
        linear-gradient(135deg, rgba(5, 7, 10, 0.72), rgba(5, 7, 10, 0.95)),
        radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--theme-accent) 28%, transparent), transparent 28rem),
        var(--theme-bg) !important;
}

.maintenance-content {
    backdrop-filter: blur(12px);
}

.maintenance-content h1 {
    font-size: clamp(52px, 9vw, 118px) !important;
    line-height: 0.86 !important;
}

.maintenance-content .newsletter-form {
    max-width: 520px;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-socials a {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.76);
    padding: 8px 11px;
}

.footer-stats {
    justify-content: end;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 650ms ease, transform 650ms ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    .button,
    .match-card,
    .fighter-card,
    .site-nav a {
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 900px) {
    .site-header {
        align-items: flex-start;
        display: grid !important;
        gap: 12px;
    }

    .site-nav {
        justify-content: space-between;
        overflow-x: auto;
        width: 100%;
    }

    .archive-hero {
        min-height: 760px !important;
        padding-top: 150px !important;
    }

    .archive-hero h1 {
        font-size: clamp(48px, 16vw, 78px);
    }

    .newsletter-modern,
    .site-footer {
        grid-template-columns: 1fr !important;
    }

    .footer-stats {
        justify-content: start;
    }
}