:root {
    --dark-navy: #033348;
    --deep-blue: #0d557c;
    --teal: #0e8199;
    --ice-blue: #55abc0;
    --pale-blue: #bfd1da;

    --background: #05090d;
    --white: #ffffff;
}
* {
    box-sizing: border-box;
}
body {
     margin: 0;

    background-color: var(--background);
    color: var(--white);
    font-family: "Inter", sans-serif;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 60px;

    border-bottom: 1px solid var(--dark-navy);
}
nav {
    display: flex;
    gap: 30px;
}
nav a {
    color: white;
    text-decoration: none;
}
#home {
    min-height: 80vh;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px;
    width: 100%;

    background:
        radial-gradient(circle at 75% 40%, rgba(85, 171, 192, 0.20), transparent 28%),
        radial-gradient(circle at 90% 70%, rgba(14, 129, 153, 0.18), transparent 32%);
}
    .hero-content {
    max-width: 900px;

    position: relative;
    z-index: 5;
}    
.hero-graphic {
    position: absolute;
    right: 0;
    top: 0;

    width: 64%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    z-index: 1;
}

.crx-art {
    width: 100%;
    height: 100%;
    overflow: visible;

    filter:
        drop-shadow(0 0 18px rgba(85, 171, 192, 0.12));
}

.crystal-burst {
    filter:
        drop-shadow(0 0 4px rgba(65, 221, 255, 0.35))
        drop-shadow(0 0 12px rgba(14, 129, 153, 0.18));
}


/* MAIN CRYSTAL PIECES */

.crystal-burst polygon {
    fill: url(#neonShard);

    stroke: #63e6ff;
    stroke-width: 1;
    stroke-opacity: 0.68;

    opacity: 0.72 !important;

    filter:
    url(#innerShardGlow)
    drop-shadow(0 0 3px rgba(85, 220, 255, 0.40))
    drop-shadow(0 0 8px rgba(14, 160, 200, 0.18));
}


/* ALTERNATE LIGHT DIRECTION */


/* FACET LINES INSIDE THE CRYSTALS */

.crystal-burst line,
.crystal-burst polyline {
    stroke: #b7f7ff;
    stroke-width: 0.75;
    stroke-opacity: 0.48;

    filter:
        drop-shadow(0 0 2px rgba(125, 238, 255, 0.38));
}


/* LONG THIN SPLINTERS */

.crystal-burst .thin-splinters polygon {
    fill: url(#neonShardReverse);

    stroke: #42dfff;
    stroke-width: 0.8;
    stroke-opacity: 0.65;

    opacity: 0.38 !important;

    filter:
        drop-shadow(0 0 3px rgba(66, 223, 255, 0.35));
}


/* FLOATING DIAMOND DEBRIS */

.crystal-burst .diamond-debris polygon {
    fill: url(#neonShard);

    stroke: #8cefff;
    stroke-width: 0.8;
    stroke-opacity: 0.72;

    opacity: 0.68 !important;

    filter:
        drop-shadow(0 0 4px rgba(85, 220, 255, 0.32));
}


/* FRACTURE */

.crystal-burst .core-fracture {
    filter:
        drop-shadow(0 0 3px rgba(190, 248, 255, 0.75))
        drop-shadow(0 0 8px rgba(64, 220, 255, 0.38));
}

.crystal-burst .core-fracture path {
    stroke: #c9faff;
    stroke-opacity: 0.75;

    filter:
        drop-shadow(0 0 2px rgba(180, 248, 255, 0.65));
}


/* BRIGHTEST AREA DIRECTLY AROUND IMPACT */

.crystal-burst .neon-core-shards polygon {
    fill: url(#fractureShard);

    stroke: #d6fbff;
    stroke-width: 1.1;
    stroke-opacity: 0.85;

    opacity: 0.72 !important;

    filter:
        drop-shadow(0 0 4px rgba(170, 246, 255, 0.70))
        drop-shadow(0 0 10px rgba(34, 217, 255, 0.35));
}
.crystal-3d-dark {
    mix-blend-mode: multiply;
    opacity: 0.95;
}

.crystal-3d-dark polygon {
    filter: none !important;
}


.crystal-3d-light {
    mix-blend-mode: screen;
    opacity: 0.82;
}

.crystal-3d-light polygon {
    filter: none !important;
}

.crystal-3d-light path {
    filter:
        drop-shadow(0 0 2px rgba(191, 247, 255, 0.30));
}
.crystal-3d-mid {
    mix-blend-mode: normal;
    opacity: 0.9;
}

.crystal-3d-mid polygon {
    filter: none !important;
}
.crystal-3d-ridges {
    opacity: 1;
}

/* illuminated edge where two crystal faces meet */
.crystal-3d-ridges path:not(.ridge-shadow) {
    stroke: rgba(176, 245, 255, 0.72);
    stroke-width: 1.15;

    filter:
        drop-shadow(0 0 2px rgba(85, 220, 255, 0.65))
        drop-shadow(0 0 5px rgba(14, 129, 153, 0.28));
}

/* opposite side of the ridge — recessed/shadowed */
.crystal-3d-ridges .ridge-shadow {
    stroke: rgba(2, 25, 35, 0.88);
    stroke-width: 2.1;

    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}
.crystal-specular-reflections {
    mix-blend-mode: screen;
    opacity: 0.9;
}

.crystal-specular-reflections polygon {
    filter:
        drop-shadow(0 0 2px rgba(180, 248, 255, 0.20));
}

.crystal-specular-reflections path {
    filter:
        drop-shadow(0 0 2px rgba(220, 252, 255, 0.30));
}
.crystal-specular-reflections polygon:nth-of-type(2n) {
    opacity: 0.75;
}

.crystal-specular-reflections polygon:nth-of-type(3n) {
    opacity: 0.62;
}
#home h2 {
    font-size: 64px;
    line-height: 1.1;

    margin: 20px 0;
}
#home p {
    color: #a7b0ba;
    font-size: 18px;
    line-height: 1.6;
}

#home a {
    width: fit-content;

    margin-top: 25px;
    padding: 14px 22px;

    background-color: #56d7ff;
    color: #05070a;

    text-decoration: none;
    font-weight: bold;
}
.hero-label {
    color: #56d7ff !important;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
}
#teams {
    padding: 80px 60px;
    background-color: var(--dark-navy);
}
#teams h2 {
    font-size: 40px;
    margin-bottom: 40px;
}
.team-container {
    display: flex;
    gap: 30px;
}
.team-card {
    width: 50%;
    padding: 35px;

    background-color: var(--background);
    border: 1px solid var(--deep-blue);
}
.team-card h3 {
    font-size: 32px;
    margin: 15px 0;
}
.team-card p {
    color: var(--pale-blue);
    line-height: 1.6;
}
.team-card a {
    display: inline-block;
    margin-top: 20px;

    color: var(--ice-blue);
    text-decoration: none;
    font-weight: bold;
}
h1,
h2,
h3 {
    font-family: "Orbitron", sans-serif;
}
/* =========================================
   TEAMS SECTION
========================================= */

#teams {
    position: relative;
    padding: 110px 60px 130px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 40%,
            rgba(14, 129, 153, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(13, 85, 124, 0.10),
            transparent 32%
        ),
        #05090d;

    border-top: 1px solid rgba(85, 171, 192, 0.14);
}


/* -----------------------------------------
   SECTION HEADING
----------------------------------------- */

.teams-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.section-label {
    margin: 0 0 14px;

    color: #56d7ff;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.teams-heading h2 {
    margin: 0 0 20px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;

    color: #ffffff;
}

.teams-intro {
    max-width: 680px;
    margin: 0;

    color: #8fa0aa;

    font-size: 17px;
    line-height: 1.7;
}


/* -----------------------------------------
   TEAM GRID
----------------------------------------- */

.team-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;

    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}


/* -----------------------------------------
   TEAM CARD
----------------------------------------- */

.team-card {
    position: relative;

    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 470px;
    padding: 32px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(8, 25, 34, 0.96),
            rgba(4, 11, 16, 0.98)
        );

    border: 1px solid rgba(85, 171, 192, 0.24);

    clip-path: polygon(
        0 0,
        calc(100% - 28px) 0,
        100% 28px,
        100% 100%,
        28px 100%,
        0 calc(100% - 28px)
    );

    overflow: hidden;

    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        background 0.30s ease;
}


/* -----------------------------------------
   TEAM CARD BACKGROUND LOGOS
----------------------------------------- */

.team-card-logo {
    position: absolute;

    top: 50%;
    right: -80px;

    width: 520px;
    height: auto;

    transform:
        translateY(-50%)
        scale(1);

    opacity: 0.10;

    object-fit: contain;

    pointer-events: none;

    z-index: 0;

    filter:
        brightness(0.60)
        saturate(0.80);

    transition:
        opacity 0.35s ease,
        transform 0.45s ease,
        filter 0.35s ease;
}


/* ZENITH LOGO POSITION */

.team-zenith .team-card-logo {
    width: 540px;
    right: -95px;
}


/* NOVA LOGO POSITION */

.team-nova .team-card-logo {
    width: 500px;
    right: -70px;
}


/* -----------------------------------------
   TEAM CARD TOP ACCENT
----------------------------------------- */

.team-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 120px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #56d7ff,
            rgba(86, 215, 255, 0)
        );

    z-index: 1;

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* -----------------------------------------
   TEAM CARD DIAGONAL DETAIL
----------------------------------------- */

.team-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 65%,
            rgba(85, 171, 192, 0.035) 65%,
            rgba(85, 171, 192, 0.035) 66%,
            transparent 66%
        );

    z-index: 1;
}


/* -----------------------------------------
   KEEP CONTENT ABOVE LOGO
----------------------------------------- */

.team-card-top,
.team-card-content,
.team-tags,
.team-link {
    position: relative;
    z-index: 2;
}


/* -----------------------------------------
   GENERAL CARD HOVER
----------------------------------------- */

.team-card:hover {
    transform: translateY(-6px);
}

.team-card:hover::before {
    width: 210px;

    filter:
        drop-shadow(0 0 7px rgba(86, 215, 255, 0.55));
}


/* =========================================
   ZENITH HOVER
   COLDER / ICY WHITE
========================================= */

.team-zenith:hover {
    border-color: rgba(190, 247, 255, 0.72);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(191, 247, 255, 0.12),
        0 0 38px rgba(86, 215, 255, 0.08),
        inset 0 0 40px rgba(191, 247, 255, 0.025);
}

.team-zenith:hover .team-card-logo {
    opacity: 0.34;

    transform:
        translateY(-50%)
        scale(1.055);

    filter:
        brightness(1.28)
        saturate(1.10)
        drop-shadow(0 0 7px rgba(220, 252, 255, 0.40))
        drop-shadow(0 0 20px rgba(126, 234, 255, 0.24))
        drop-shadow(0 0 38px rgba(86, 215, 255, 0.12));
}


/* =========================================
   NOVA HOVER
   STELLAR BLUE / VIOLET / ICE
========================================= */

.team-nova:hover {
    border-color: rgba(142, 132, 255, 0.78);

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(116, 91, 255, 0.10),
            transparent 38%
        ),
        radial-gradient(
            circle at 88% 35%,
            rgba(86, 215, 255, 0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(8, 25, 38, 0.98),
            rgba(4, 10, 18, 0.99)
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.42),

        0 0 12px rgba(164, 145, 255, 0.18),
        0 0 28px rgba(116, 91, 255, 0.14),
        0 0 42px rgba(86, 215, 255, 0.08),

        inset 0 0 42px rgba(111, 87, 255, 0.045);
}


.team-nova:hover .team-card-logo {
    opacity: 0.40;

    transform:
        translateY(-50%)
        scale(1.06);

    filter:
        brightness(1.32)
        contrast(1.06)
        saturate(1.35)

        drop-shadow(0 0 6px rgba(235, 242, 255, 0.46))
        drop-shadow(0 0 15px rgba(156, 137, 255, 0.38))
        drop-shadow(0 0 30px rgba(103, 84, 255, 0.24))
        drop-shadow(0 0 46px rgba(86, 215, 255, 0.14));
}
.team-nova:hover::before {
    background:
        linear-gradient(
            90deg,
            #f0f6ff 0%,
            #9f91ff 35%,
            #6f57ff 65%,
            rgba(86, 215, 255, 0) 100%
        );

    filter:
        drop-shadow(0 0 6px rgba(169, 150, 255, 0.60))
        drop-shadow(0 0 12px rgba(86, 215, 255, 0.28));
}
/* -----------------------------------------
   TEAM CARD TOP ACCENT
----------------------------------------- */

.team-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 120px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #56d7ff,
        rgba(86, 215, 255, 0)
    );

    z-index: 1;
}


/* -----------------------------------------
   TEAM CARD DIAGONAL DETAIL
----------------------------------------- */

.team-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 65%,
            rgba(85, 171, 192, 0.035) 65%,
            rgba(85, 171, 192, 0.035) 66%,
            transparent 66%
        );

    z-index: 1;
}


/* -----------------------------------------
   KEEP CARD CONTENT ABOVE LOGO
----------------------------------------- */

.team-card-top,
.team-card-content,
.team-tags,
.team-link {
    position: relative;
    z-index: 2;
}


.team-card:hover {
    transform: translateY(-6px);

    border-color: rgba(126, 234, 255, 0.65);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(86, 215, 255, 0.10),
        inset 0 0 35px rgba(14, 129, 153, 0.035);
}


/* -----------------------------------------
   TOP AREA
----------------------------------------- */

.team-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 48px;
}

.team-number {
    margin: 0 0 8px;

    font-family: "Orbitron", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #56d7ff;
}

.team-type {
    margin: 0;

    color: #788993;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.team-status {
    padding: 7px 11px;

    color: #8eeaff;
    background: rgba(14, 129, 153, 0.09);

    border: 1px solid rgba(85, 171, 192, 0.25);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}


/* -----------------------------------------
   TEAM CONTENT
----------------------------------------- */

.team-card-content {
    position: relative;
    z-index: 2;
}

.team-card-content h3 {
    margin: 0 0 24px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1;

    color: #ffffff;
}

.team-card-content p {
    margin: 0 0 15px;

    color: #91a0aa;

    font-size: 15px;
    line-height: 1.7;
}


/* -----------------------------------------
   TEAM TAGS
----------------------------------------- */

.team-tags {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 24px;
}

.team-tags span {
    padding: 6px 10px;

    color: #8fbac6;
    background: rgba(3, 51, 72, 0.28);

    border: 1px solid rgba(85, 171, 192, 0.15);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* -----------------------------------------
   TEAM LINK
----------------------------------------- */

.team-link {
    position: relative;
    z-index: 2;

    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: auto;
    padding-top: 30px;

    color: #56d7ff;

    font-family: "Orbitron", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}

.team-link span {
    font-family: "Inter", sans-serif;
    font-size: 20px;

    transition: transform 0.2s ease;
}

.team-link:hover {
    color: #bff7ff;
    gap: 17px;
}

.team-link:hover span {
    transform: translateX(3px);
}


/* -----------------------------------------
   ZENITH
----------------------------------------- */

.team-zenith {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(86, 215, 255, 0.09),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(8, 27, 37, 0.97),
            rgba(4, 11, 16, 0.99)
        );
}


/* -----------------------------------------
   NOVA
----------------------------------------- */

.team-nova {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(13, 85, 124, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(6, 22, 31, 0.97),
            rgba(4, 10, 15, 0.99)
        );
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 900px) {

    #teams {
        padding: 90px 30px 110px;
    }

    .team-container {
        grid-template-columns: 1fr;
    }

    .team-card {
        min-height: 460px;
    }
}


@media (max-width: 600px) {

    #teams {
        padding: 75px 20px 90px;
    }

    .teams-heading {
        margin-bottom: 40px;
    }

    .team-card {
        min-height: auto;
        padding: 25px;
    }

    .team-card-top {
        margin-bottom: 38px;
    }

    .team-card-content h3 {
        font-size: 34px;
    }

}
/* =========================================
   MATCHES SECTION
========================================= */

#matches {
    position: relative;
    padding: 110px 60px 130px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(14, 129, 153, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(13, 85, 124, 0.08),
            transparent 32%
        ),
        #04080c;

    border-top: 1px solid rgba(85, 171, 192, 0.12);
}


/* -----------------------------------------
   HEADING
----------------------------------------- */

.matches-heading {
    width: 100%;
    max-width: 760px;

    margin: 0 0 55px;
}

.matches-heading h2 {
    margin: 0 0 20px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;

    color: #ffffff;
}

.matches-intro {
    max-width: 680px;
    margin: 0;

    color: #8fa0aa;

    font-size: 17px;
    line-height: 1.7;
}


/* -----------------------------------------
   MATCHES LAYOUT
----------------------------------------- */

.matches-layout {
    width: 100%;
    max-width: 1300px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

.matches-column {
    min-width: 0;
}
.recent-results-column {
    grid-row: 1;
    width: 100%;
}

.upcoming-matches-column {
    grid-row: 2;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.upcoming-matches-column .matches-column-heading {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}


/* -----------------------------------------
   COLUMN HEADING
----------------------------------------- */

.matches-column-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.matches-column-heading h3 {
    margin: 0;

    font-family: "Orbitron", sans-serif;
    font-size: 18px;
    font-weight: 600;

    color: #ffffff;
}

.matches-count {
    color: #5f7782;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* -----------------------------------------
   MATCH CARD
----------------------------------------- */

.match-card {
    position: relative;

    min-height: 360px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            rgba(7, 25, 34, 0.97),
            rgba(3, 10, 15, 0.99)
        );

    border: 1px solid rgba(85, 171, 192, 0.22);

    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.match-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 130px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #56d7ff,
        transparent
    );
}

.match-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 72%,
            rgba(85, 171, 192, 0.035) 72%,
            rgba(85, 171, 192, 0.035) 73%,
            transparent 73%
        );
}

.match-card:hover {
    transform: translateY(-5px);

    border-color: rgba(86, 215, 255, 0.48);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(14, 129, 153, 0.07);
}


/* -----------------------------------------
   MATCH TOP
----------------------------------------- */

.match-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.match-event {
    margin: 0 0 7px;

    color: #d5e2e7;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.match-date {
    margin: 0;

    color: #657a85;

    font-size: 12px;
}

.match-status {
    padding: 7px 11px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    border: 1px solid rgba(85, 171, 192, 0.25);
}

.match-status.upcoming {
    color: #8cefff;
    background: rgba(14, 129, 153, 0.10);
}

.match-status.final {
    color: #9aabb3;
    background: rgba(95, 119, 130, 0.08);
}


/* -----------------------------------------
   VERSUS AREA
----------------------------------------- */

.match-versus {
    position: relative;
    z-index: 2;

    flex: 1;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;

    padding: 50px 0 45px;
}

.match-team {
    min-width: 0;
}

.match-team:last-child {
    text-align: right;
}

.team-short {
    display: block;

    margin-bottom: 7px;

    color: #56d7ff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.match-team h4 {
    margin: 0;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.1;

    color: #ffffff;
}


/* -----------------------------------------
   VS
----------------------------------------- */

.versus-center {
    min-width: 85px;

    text-align: center;
}

.versus-center > span {
    display: block;

    font-family: "Orbitron", sans-serif;
    font-size: 22px;
    font-weight: 700;

    color: #56d7ff;
}

.versus-center p {
    margin: 7px 0 0;

    color: #60747e;

    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* -----------------------------------------
   SCORE
----------------------------------------- */

.match-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 100px;

    font-family: "Orbitron", sans-serif;
}

.score-number {
    font-size: 30px;
    font-weight: 700;

    color: #ffffff;
}

.score-divider {
    color: #56d7ff;
    font-size: 18px;
}


/* -----------------------------------------
   FOOTER
----------------------------------------- */

.match-footer {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding-top: 18px;

    border-top: 1px solid rgba(85, 171, 192, 0.12);
}

.match-footer span {
    padding: 6px 9px;

    color: #7da4af;
    background: rgba(3, 51, 72, 0.22);

    border: 1px solid rgba(85, 171, 192, 0.13);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* -----------------------------------------
   UPCOMING CARD
----------------------------------------- */

.upcoming-match {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(86, 215, 255, 0.07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(7, 27, 37, 0.98),
            rgba(3, 10, 15, 0.99)
        );
}


/* -----------------------------------------
   RESULT CARD
----------------------------------------- */

.result-match {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(13, 85, 124, 0.10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(6, 22, 31, 0.98),
            rgba(3, 9, 14, 0.99)
        );
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 900px) {

    #matches {
        padding: 90px 30px 110px;
    }

    .matches-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


@media (max-width: 600px) {

    #matches {
        padding: 75px 20px 90px;
    }

    .matches-heading {
        margin-bottom: 42px;
    }

    .match-card {
        min-height: 330px;
        padding: 24px;
    }

    .match-versus {
        gap: 15px;
        padding: 42px 0 38px;
    }

    .versus-center {
        min-width: 55px;
    }

    .match-team h4 {
        font-size: 20px;
    }

    .score-number {
        font-size: 24px;
    }

}
/* =========================================
   ABOUT SECTION
========================================= */

#about {
    position: relative;
    padding: 110px 60px 130px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(14, 129, 153, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 80%,
            rgba(13, 85, 124, 0.08),
            transparent 32%
        ),
        #05090d;

    border-top: 1px solid rgba(85, 171, 192, 0.12);
}


/* -----------------------------------------
   HEADING
----------------------------------------- */

.about-heading {
    width: 100%;
    max-width: 760px;

    margin: 0 0 55px;
}

.about-heading h2 {
    margin: 0 0 20px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;

    color: #ffffff;
}

.about-intro {
    margin: 0;

    color: #8fa0aa;

    font-size: 17px;
    line-height: 1.7;
}


/* -----------------------------------------
   ABOUT LAYOUT
----------------------------------------- */

.about-layout {
    width: 100%;
    max-width: 1300px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 34px;
}


/* -----------------------------------------
   MAIN STORY PANEL
----------------------------------------- */

.about-story {
    position: relative;

    padding: 36px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 27, 37, 0.97),
            rgba(3, 10, 15, 0.99)
        );

    border: 1px solid rgba(85, 171, 192, 0.22);

    clip-path: polygon(
        0 0,
        calc(100% - 28px) 0,
        100% 28px,
        100% 100%,
        28px 100%,
        0 calc(100% - 28px)
    );
}

.about-story::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 150px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #56d7ff,
        transparent
    );
}

.about-number {
    margin: 0 0 34px;

    color: #56d7ff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-story h3 {
    margin: 0 0 25px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(30px, 3vw, 42px);

    color: #ffffff;
}

.about-story p:not(.about-number) {
    margin: 0 0 18px;

    color: #91a0aa;

    font-size: 15px;
    line-height: 1.75;
}


/* -----------------------------------------
   VALUES
----------------------------------------- */

.about-values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.about-value {
    position: relative;

    padding: 24px 26px;

    background:
        linear-gradient(
            145deg,
            rgba(6, 22, 31, 0.96),
            rgba(3, 9, 14, 0.99)
        );

    border: 1px solid rgba(85, 171, 192, 0.18);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.about-value:hover {
    transform: translateX(5px);
    border-color: rgba(86, 215, 255, 0.42);
}

.value-top {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 14px;
}

.value-top > span:first-child {
    color: #56d7ff;

    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.value-line {
    flex: 1;
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(86, 215, 255, 0.45),
        transparent
    );
}

.about-value h3 {
    margin: 0 0 10px;

    font-family: "Orbitron", sans-serif;
    font-size: 22px;

    color: #ffffff;
}

.about-value p {
    margin: 0;

    color: #84949e;

    font-size: 14px;
    line-height: 1.65;
}


/* -----------------------------------------
   IDENTITY STRIP
----------------------------------------- */

.about-identity {
    width: 100%;
    max-width: 1300px;

    margin: 34px auto 0;

    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    padding: 24px 28px;

    background:
        rgba(4, 17, 24, 0.86);

    border-top: 1px solid rgba(85, 171, 192, 0.20);
    border-bottom: 1px solid rgba(85, 171, 192, 0.20);
}

.identity-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.identity-item span {
    color: #59727e;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.identity-item strong {
    color: #d9edf3;

    font-family: "Orbitron", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.identity-divider {
    width: 1px;
    height: 32px;

    margin: 0 24px;

    background: rgba(85, 171, 192, 0.18);
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 900px) {

    #about {
        padding: 90px 30px 110px;
    }

    .about-layout {
        grid-template-columns: 1fr;
    }

    .about-identity {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .identity-divider {
        display: none;
    }

}


@media (max-width: 600px) {

    #about {
        padding: 75px 20px 90px;
    }

    .about-heading {
        margin-bottom: 42px;
    }

    .about-story {
        padding: 28px 24px;
    }

    .about-identity {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   HISTORY SECTION
========================================= */

#history {
    position: relative;
    padding: 110px 60px 140px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(14, 129, 153, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(13, 85, 124, 0.08),
            transparent 34%
        ),
        #04080c;

    border-top: 1px solid rgba(85, 171, 192, 0.12);
}


/* -----------------------------------------
   HEADING
----------------------------------------- */

.history-heading {
    width: 100%;
    max-width: 760px;

    margin: 0 0 70px;
}

.history-heading h2 {
    margin: 0 0 20px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;

    color: #ffffff;
}

.history-intro {
    margin: 0;

    color: #8fa0aa;

    font-size: 17px;
    line-height: 1.7;
}


/* -----------------------------------------
   TIMELINE
----------------------------------------- */

.history-timeline {
    position: relative;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


/* vertical timeline line */

.history-timeline::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 34px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(86, 215, 255, 0.65),
            rgba(14, 129, 153, 0.28),
            rgba(85, 171, 192, 0.10)
        );
}


/* -----------------------------------------
   TIMELINE ENTRY
----------------------------------------- */

.history-entry {
    position: relative;

    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 30px;

    margin-bottom: 42px;
}


/* -----------------------------------------
   MARKER
----------------------------------------- */

.history-marker {
    position: relative;
    z-index: 2;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(6, 35, 48, 0.98),
            rgba(3, 12, 18, 0.99)
        );

    border: 1px solid rgba(86, 215, 255, 0.38);

    clip-path: polygon(
        50% 0,
        100% 50%,
        50% 100%,
        0 50%
    );

    box-shadow:
        0 0 18px rgba(14, 129, 153, 0.10);
}

.history-marker span {
    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: #8cefff;
}


/* -----------------------------------------
   CONTENT PANEL
----------------------------------------- */

.history-content {
    position: relative;

    padding: 32px 36px 34px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 25, 34, 0.95),
            rgba(3, 10, 15, 0.99)
        );

    border: 1px solid rgba(85, 171, 192, 0.18);

    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.history-content::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 130px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #56d7ff,
            transparent
        );
}

.history-entry:hover .history-content {
    transform: translateX(5px);

    border-color: rgba(86, 215, 255, 0.38);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22),
        0 0 20px rgba(14, 129, 153, 0.05);
}


/* -----------------------------------------
   ENTRY TEXT
----------------------------------------- */

.history-label {
    margin: 0 0 12px;

    color: #56d7ff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.history-content h3 {
    margin: 0 0 20px;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(24px, 3vw, 34px);

    color: #ffffff;
}

.history-content p:not(.history-label) {
    margin: 0 0 16px;

    max-width: 930px;

    color: #8fa0aa;

    font-size: 15px;
    line-height: 1.75;
}

.history-content p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------
   FEATURED CRYONIX ENTRY
----------------------------------------- */

.history-entry-featured .history-marker {
    border-color: rgba(126, 234, 255, 0.72);

    background:
        radial-gradient(
            circle,
            rgba(14, 129, 153, 0.28),
            rgba(3, 12, 18, 0.98) 70%
        );

    box-shadow:
        0 0 26px rgba(86, 215, 255, 0.18);
}

.history-entry-featured .history-content {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(86, 215, 255, 0.07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(7, 29, 39, 0.98),
            rgba(3, 10, 15, 0.99)
        );

    border-color: rgba(86, 215, 255, 0.30);
}

.history-entry-featured .history-content::before {
    width: 190px;
}

.history-entry-featured .history-label {
    color: #9af1ff;
}


/* -----------------------------------------
   LAST ENTRY
----------------------------------------- */

.history-entry:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 900px) {

    #history {
        padding: 90px 30px 120px;
    }

    .history-heading {
        margin-bottom: 55px;
    }

    .history-timeline::before {
        left: 28px;
    }

    .history-entry {
        grid-template-columns: 58px 1fr;
        gap: 20px;
    }

    .history-marker {
        width: 56px;
        height: 56px;
    }

    .history-content {
        padding: 28px 30px;
    }

}


@media (max-width: 600px) {

    #history {
        padding: 75px 20px 95px;
    }

    .history-heading {
        margin-bottom: 45px;
    }

    .history-timeline::before {
        left: 21px;
    }

    .history-entry {
        grid-template-columns: 44px 1fr;
        gap: 14px;

        margin-bottom: 30px;
    }

    .history-marker {
        width: 42px;
        height: 42px;
    }

    .history-marker span {
        font-size: 9px;
    }

    .history-content {
        padding: 24px 22px;
    }

    .history-content h3 {
        font-size: 22px;
    }

    .history-content p:not(.history-label) {
        font-size: 14px;
    }

}
/* =========================================
   FOOTER
========================================= */

.site-footer {
    position: relative;

    padding: 70px 60px 26px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(14, 129, 153, 0.07),
            transparent 28%
        ),
        #03070a;

    border-top: 1px solid rgba(85, 171, 192, 0.14);
}


/* -----------------------------------------
   MAIN FOOTER GRID
----------------------------------------- */

.footer-inner {
    width: 100%;
    max-width: 1300px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.7fr 1fr;
    gap: 50px;
}


/* -----------------------------------------
   BRAND
----------------------------------------- */

.footer-logo {
    margin: 0 0 12px;

    font-family: "Orbitron", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #ffffff;
}

.footer-tagline {
    margin: 0 0 16px;

    color: #56d7ff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.footer-description {
    max-width: 430px;
    margin: 0;

    color: #71848e;

    font-size: 14px;
    line-height: 1.7;
}


/* -----------------------------------------
   COLUMNS
----------------------------------------- */

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-heading {
    margin: 0 0 8px;

    color: #56d7ff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-column a,
.footer-column span {
    color: #83949d;

    font-size: 13px;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:hover {
    color: #d9fbff;
    transform: translateX(3px);
}


/* -----------------------------------------
   BOTTOM
----------------------------------------- */

.footer-bottom {
    width: 100%;
    max-width: 1300px;

    margin: 48px auto 0;
    padding-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(85, 171, 192, 0.12);
}

.footer-bottom p {
    margin: 0;

    color: #4f626c;

    font-size: 11px;
}

.footer-code {
    font-family: "Orbitron", sans-serif;
    letter-spacing: 2px;

    color: #66818c !important;
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 900px) {

    .site-footer {
        padding: 60px 30px 24px;
    }

    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }

}


@media (max-width: 600px) {

    .site-footer {
        padding: 50px 20px 22px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        margin-top: 36px;
    }

}
/* =========================================
   HEADER LOGO + NAME
========================================= */

.header-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 12px;

    height: 82px;

    flex-shrink: 0;
}


/* EMBLEM */

.header-logo {
    width: 140px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.header-emblem {
    display: block;

    width: 140px;
    height: auto;

    object-fit: contain;
}

/* CRYONIX ESPORTS */

.header-brand-name {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Orbitron", sans-serif;

    font-size: 28px !important;
    font-weight: 600;

    line-height: 1 !important;

    letter-spacing: 0.5px;

    white-space: nowrap;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* HOVER */

.header-brand-name:hover {
    color: #bff7ff !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .header-brand {
        gap: 10px;

        height: 65px;
    }

.header-logo {
    width: 90px;
    height: 62px;
}

.header-emblem {
    width: 90px;
    height: auto;
}

    .header-brand-name {
        font-size: 18px !important;
    }

}
/* =========================================
   INDIVIDUAL TEAM PAGES
========================================= */

.team-page {
    min-height: 100vh;

    background: #05090d;
    color: #ffffff;
}


/* =========================================
   TEAM PAGE HERO
========================================= */

.team-page-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 90px 60px 100px;

    overflow: hidden;

    border-bottom: 1px solid rgba(85, 171, 192, 0.14);
}


/* =========================================
   ZENITH HERO BACKGROUND
========================================= */

.zenith-hero {
    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(126, 234, 255, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 35%,
            rgba(13, 85, 124, 0.14),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #05090d 0%,
            #06131b 52%,
            #031017 100%
        );
}


/* =========================================
   HUGE BACKGROUND EMBLEM
========================================= */

.team-page-background-logo {
    position: absolute;

    width: 760px;
    height: auto;

    top: 50%;
    right: -100px;

    transform:
        translateY(-50%)
        rotate(2deg);

    opacity: 0.13;

    pointer-events: none;

    z-index: 0;

    filter:
        brightness(0.85)
        saturate(0.95)
        drop-shadow(0 0 20px rgba(126, 234, 255, 0.14))
        drop-shadow(0 0 55px rgba(86, 215, 255, 0.08));
}


/* =========================================
   HERO CONTENT
========================================= */

.team-page-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================
   NUMBER + STATUS
========================================= */

.team-page-meta {
    width: min(720px, 100%);

    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 45px;
}

.team-page-number {
    color: #8cefff;

    font-family: "Orbitron", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.team-page-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(126, 234, 255, 0.55),
            rgba(126, 234, 255, 0.05)
        );
}

.team-page-status {
    padding: 7px 12px;

    color: #bff7ff;
    background: rgba(86, 215, 255, 0.07);

    border: 1px solid rgba(126, 234, 255, 0.28);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}


/* =========================================
   MAIN TEAM IDENTITY
========================================= */

.team-page-title-area {
    display: flex;
    align-items: center;
    gap: 38px;

    margin-bottom: 42px;
}


/* FOREGROUND EMBLEM */

.team-page-main-logo {
    width: 230px;
    height: 230px;

    object-fit: contain;

    flex-shrink: 0;

    filter:
        brightness(1.13)
        saturate(1.05)
        drop-shadow(0 0 10px rgba(220, 252, 255, 0.22))
        drop-shadow(0 0 28px rgba(126, 234, 255, 0.14));
}


/* TEAM TITLE */

.team-page-title {
    position: relative;
}

.team-page-type {
    margin: 0 0 12px;

    color: #8cefff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;

    text-transform: uppercase;
}

.team-page-title h1 {
    margin: 0 0 15px;

    font-family: "Orbitron", sans-serif;

    font-size: clamp(60px, 8vw, 105px);
    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -2px;

    color: #ffffff;

    text-shadow:
        0 0 24px rgba(191, 247, 255, 0.08);
}

.team-page-region {
    margin: 0;

    color: #718791;

    font-size: 14px;
    letter-spacing: 0.5px;
}


/* =========================================
   DESCRIPTION
========================================= */

.team-page-description {
    width: min(690px, 100%);

    margin-bottom: 42px;
}

.team-page-description p {
    margin: 0 0 16px;

    color: #91a4ae;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   QUICK INFORMATION
========================================= */

.team-page-info {
    width: min(760px, 100%);

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-bottom: 42px;

    border-top: 1px solid rgba(126, 234, 255, 0.15);
    border-bottom: 1px solid rgba(126, 234, 255, 0.15);
}

.team-page-info-item {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 20px 22px;
}

.team-page-info-item:not(:last-child) {
    border-right: 1px solid rgba(126, 234, 255, 0.12);
}

.team-page-info-item span {
    color: #58717d;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.team-page-info-item strong {
    color: #d9edf3;

    font-family: "Orbitron", sans-serif;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   BACK TO TEAMS
========================================= */

.team-page-back {
    display: inline-flex;
    align-items: center;

    color: #56d7ff;

    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.3px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.team-page-back:hover {
    color: #bff7ff;

    transform: translateX(-4px);
}


/* =========================================
   TEAM PAGE SECTIONS
========================================= */

.team-roster-section,
.team-results-section {
    position: relative;

    padding: 110px 60px 125px;

    overflow: hidden;
}

.team-roster-section {
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(86, 215, 255, 0.06),
            transparent 32%
        ),
        #05090d;
}

.team-results-section {
    background:
        radial-gradient(
            circle at 15% 40%,
            rgba(13, 85, 124, 0.09),
            transparent 32%
        ),
        #04080c;

    border-top: 1px solid rgba(85, 171, 192, 0.12);
}


/* =========================================
   SECTION HEADINGS
========================================= */

.team-section-heading {
    width: 100%;
    max-width: 760px;

    margin: 0 auto 55px;
}

.team-section-heading h2 {
    margin: 0 0 20px;

    font-family: "Orbitron", sans-serif;

    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;

    color: #ffffff;
}

.team-section-heading > p:last-child {
    margin: 0;

    max-width: 680px;

    color: #899ba5;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================
   EMPTY ROSTER AREA FOR NOW
========================================= */

.roster-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 18px;
}


/* =========================================
   ZENITH SPECIAL LIGHT DETAILS
========================================= */

.zenith-page .team-page-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 60px;

    width: 260px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #dffcff,
            #56d7ff,
            transparent
        );

    filter:
        drop-shadow(0 0 7px rgba(126, 234, 255, 0.42));
}


/* =========================================
   RESPONSIVE TEAM PAGE
========================================= */

@media (max-width: 1000px) {

    .team-page-background-logo {
        width: 620px;

        right: -220px;

        opacity: 0.09;
    }

    .team-page-title-area {
        gap: 28px;
    }

    .team-page-main-logo {
        width: 190px;
        height: 190px;
    }

    .team-page-info {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-page-info-item:nth-child(2) {
        border-right: none;
    }

    .team-page-info-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(126, 234, 255, 0.12);
    }

    .roster-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .team-page-hero {
        min-height: auto;

        padding:
            75px
            25px
            80px;
    }

    .team-page-background-logo {
        width: 500px;

        top: 35%;
        right: -280px;

        opacity: 0.065;
    }

    .team-page-meta {
        margin-bottom: 38px;
    }

    .team-page-title-area {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }

    .team-page-main-logo {
        width: 150px;
        height: 150px;
    }

    .team-page-title h1 {
        font-size: 56px;
    }

    .team-page-info {
        grid-template-columns: 1fr 1fr;
    }

    .team-roster-section,
    .team-results-section {
        padding:
            80px
            25px
            95px;
    }

    .roster-grid {
        grid-template-columns: 1fr;
    }

}
/* -----------------------------------------
   TEAM IDENTITY STATEMENT
----------------------------------------- */

.team-page-statement {
    position: relative;

    margin-top: 30px;
    padding: 22px 26px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    background:
        linear-gradient(
            90deg,
            rgba(126, 234, 255, 0.055),
            rgba(126, 234, 255, 0.01)
        );

    border-left: 2px solid #8cefff;
    border-top: 1px solid rgba(126, 234, 255, 0.12);
    border-bottom: 1px solid rgba(126, 234, 255, 0.12);
}

.team-page-statement span {
    color: #56d7ff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.team-page-statement strong {
    color: #d9edf3;

    font-family: "Orbitron", sans-serif;
    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;
}
/* =========================================
   ZENITH ROSTER CARDS
========================================= */

.zenith-page .roster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}


/* -----------------------------------------
   PLAYER CARD
----------------------------------------- */

.zenith-page .roster-card {
    position: relative;

    min-height: 260px;
    padding: 24px 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(126, 234, 255, 0.045),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(7, 25, 34, 0.98),
            rgba(3, 10, 15, 0.99)
        );

    border: 1px solid rgba(126, 234, 255, 0.16);

    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* -----------------------------------------
   TOP LIGHT
----------------------------------------- */

.zenith-page .roster-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 85px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #dffcff,
            #56d7ff,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* -----------------------------------------
   FAINT CRYSTAL DETAIL
----------------------------------------- */

.zenith-page .roster-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -80px;

    transform: rotate(45deg);

    border: 1px solid rgba(126, 234, 255, 0.055);

    pointer-events: none;
}


/* -----------------------------------------
   PLAYER NUMBER
----------------------------------------- */

.zenith-page .roster-card-number {
    position: relative;
    z-index: 2;

    color: #718e99;

    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: color 0.25s ease;
}


/* -----------------------------------------
   PLAYER CONTENT
----------------------------------------- */

.zenith-page .roster-card-content {
    position: relative;
    z-index: 2;
}

.zenith-page .roster-card-team {
    margin: 0 0 10px;

    color: #56d7ff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.zenith-page .roster-card h3 {
    margin: 0 0 10px;

    font-family: "Orbitron", sans-serif;

    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;

    line-height: 1.1;

    color: #ffffff;
}

.zenith-page .roster-card-tag {
    margin: 0;

    color: #687e88;

    font-size: 12px;
}


/* =========================================
   ZENITH PLAYER CARD HOVER
========================================= */

.zenith-page .roster-card:hover {
    transform: translateY(-6px);

    border-color: rgba(191, 247, 255, 0.62);

    background:
        radial-gradient(
            circle at 76% 25%,
            rgba(126, 234, 255, 0.11),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(8, 30, 40, 0.98),
            rgba(3, 11, 16, 0.99)
        );

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 14px rgba(191, 247, 255, 0.09),
        0 0 28px rgba(86, 215, 255, 0.07);
}

.zenith-page .roster-card:hover::before {
    width: 150px;

    filter:
        drop-shadow(0 0 5px rgba(220, 252, 255, 0.50))
        drop-shadow(0 0 11px rgba(86, 215, 255, 0.28));
}

.zenith-page .roster-card:hover .roster-card-number {
    color: #bff7ff;
}


/* =========================================
   ROSTER RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .zenith-page .roster-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .zenith-page .roster-grid {
        grid-template-columns: 1fr;
    }

    .zenith-page .roster-card {
        min-height: 210px;
    }

}
/* =========================================
   NOVA TEAM PAGE
   STELLAR BLUE / VIOLET / ICE
========================================= */


/* -----------------------------------------
   NOVA HERO
----------------------------------------- */

.nova-hero {
    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(121, 92, 255, 0.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 87% 35%,
            rgba(86, 215, 255, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 52% 75%,
            rgba(51, 80, 180, 0.07),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #05090d 0%,
            #070d1c 52%,
            #050714 100%
        );
}


/* -----------------------------------------
   LARGE BACKGROUND NOVA EMBLEM
----------------------------------------- */

.nova-page .team-page-background-logo {
    width: 750px;

    right: -105px;

    opacity: 0.15;

    filter:
        brightness(0.90)
        saturate(1.20)
        drop-shadow(0 0 18px rgba(180, 165, 255, 0.14))
        drop-shadow(0 0 42px rgba(121, 92, 255, 0.10))
        drop-shadow(0 0 62px rgba(86, 215, 255, 0.06));
}


/* -----------------------------------------
   FOREGROUND NOVA EMBLEM
----------------------------------------- */

.nova-page .team-page-main-logo {
    filter:
        brightness(1.18)
        contrast(1.05)
        saturate(1.25)
        drop-shadow(0 0 8px rgba(245, 248, 255, 0.20))
        drop-shadow(0 0 20px rgba(178, 158, 255, 0.18))
        drop-shadow(0 0 34px rgba(102, 86, 255, 0.12));
}


/* -----------------------------------------
   NOVA META COLOURS
----------------------------------------- */

.nova-page .team-page-number,
.nova-page .team-page-type {
    color: #a99cff;
}

.nova-page .team-page-line {
    background:
        linear-gradient(
            90deg,
            rgba(169, 156, 255, 0.65),
            rgba(86, 215, 255, 0.15),
            transparent
        );
}

.nova-page .team-page-status {
    color: #d9d3ff;

    background:
        rgba(121, 92, 255, 0.08);

    border-color:
        rgba(169, 156, 255, 0.30);
}


/* -----------------------------------------
   NOVA IDENTITY STATEMENT
----------------------------------------- */

.nova-page .nova-statement {
    background:
        linear-gradient(
            90deg,
            rgba(121, 92, 255, 0.075),
            rgba(86, 215, 255, 0.018)
        );

    border-left-color: #a99cff;

    border-top-color:
        rgba(169, 156, 255, 0.16);

    border-bottom-color:
        rgba(169, 156, 255, 0.16);
}

.nova-page .nova-statement span {
    color: #a99cff;
}


/* -----------------------------------------
   NOVA INFORMATION STRIP
----------------------------------------- */

.nova-page .team-page-info {
    border-top-color:
        rgba(169, 156, 255, 0.15);

    border-bottom-color:
        rgba(169, 156, 255, 0.15);
}

.nova-page .team-page-info-item:not(:last-child) {
    border-right-color:
        rgba(169, 156, 255, 0.12);
}


/* -----------------------------------------
   BACK LINK
----------------------------------------- */

.nova-page .team-page-back {
    color: #a99cff;
}

.nova-page .team-page-back:hover {
    color: #e2ddff;
}


/* =========================================
   NOVA HERO LIGHT DETAILS
========================================= */

.nova-page .team-page-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 60px;

    width: 270px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #f4f6ff,
            #a99cff,
            #56d7ff,
            transparent
        );

    filter:
        drop-shadow(0 0 6px rgba(169, 156, 255, 0.48))
        drop-shadow(0 0 13px rgba(86, 215, 255, 0.18));
}


.nova-page .team-page-hero::after {
    content: "";

    position: absolute;

    right: 7%;
    bottom: -220px;

    width: 520px;
    height: 520px;

    border:
        1px solid rgba(169, 156, 255, 0.045);

    transform: rotate(45deg);

    pointer-events: none;
}



/* =========================================
   NOVA RESULTS SECTION
========================================= */

.nova-page .team-results-section {
    background:
        radial-gradient(
            circle at 18% 40%,
            rgba(121, 92, 255, 0.065),
            transparent 34%
        ),
        #04080c;

    border-top:
        1px solid rgba(169, 156, 255, 0.11);
}


/* =========================================
   NOVA SECTION LABELS
========================================= */

.nova-page .section-label {
    color: #a99cff;
}
/* =========================================
   NOVA ROSTER CARDS
========================================= */

.nova-page .roster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}


/* -----------------------------------------
   PLAYER CARD
----------------------------------------- */

.nova-page .roster-card {
    position: relative;

    min-height: 260px;
    padding: 24px 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(121, 92, 255, 0.055),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 28%,
            rgba(86, 215, 255, 0.025),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(7, 20, 36, 0.98),
            rgba(5, 8, 19, 0.99)
        );

    border: 1px solid rgba(169, 156, 255, 0.17);

    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* -----------------------------------------
   TOP STELLAR LIGHT
----------------------------------------- */

.nova-page .roster-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 85px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #f4f6ff,
            #a99cff,
            #56d7ff,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* -----------------------------------------
   FAINT STAR / CRYSTAL DETAIL
----------------------------------------- */

.nova-page .roster-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -80px;

    transform: rotate(45deg);

    border: 1px solid rgba(169, 156, 255, 0.06);

    box-shadow:
        0 0 24px rgba(121, 92, 255, 0.025);

    pointer-events: none;
}


/* -----------------------------------------
   PLAYER NUMBER
----------------------------------------- */

.nova-page .roster-card-number {
    position: relative;
    z-index: 2;

    color: #77739b;

    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}


/* -----------------------------------------
   PLAYER CONTENT
----------------------------------------- */

.nova-page .roster-card-content {
    position: relative;
    z-index: 2;
}


.nova-page .roster-card-team {
    margin: 0 0 10px;

    color: #a99cff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


.nova-page .roster-card h3 {
    margin: 0 0 10px;

    font-family: "Orbitron", sans-serif;

    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;

    line-height: 1.1;

    color: #ffffff;
}


.nova-page .roster-card-tag {
    margin: 0;

    color: #6e748e;

    font-size: 12px;
}


/* =========================================
   NOVA PLAYER CARD HOVER
========================================= */

.nova-page .roster-card:hover {
    transform: translateY(-6px);

    border-color: rgba(169, 156, 255, 0.68);

    background:
        radial-gradient(
            circle at 76% 25%,
            rgba(121, 92, 255, 0.14),
            transparent 40%
        ),
        radial-gradient(
            circle at 90% 18%,
            rgba(86, 215, 255, 0.065),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(8, 22, 40, 0.98),
            rgba(7, 8, 23, 0.99)
        );

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.36),
        0 0 12px rgba(235, 240, 255, 0.06),
        0 0 24px rgba(169, 156, 255, 0.12),
        0 0 38px rgba(121, 92, 255, 0.08);
}


/* TOP LINE LIGHTS UP */

.nova-page .roster-card:hover::before {
    width: 150px;

    filter:
        drop-shadow(0 0 5px rgba(245, 248, 255, 0.48))
        drop-shadow(0 0 10px rgba(169, 156, 255, 0.48))
        drop-shadow(0 0 16px rgba(86, 215, 255, 0.18));
}


/* PLAYER NUMBER LIGHTS UP */

.nova-page .roster-card:hover .roster-card-number {
    color: #c9c0ff;

    text-shadow:
        0 0 10px rgba(169, 156, 255, 0.30);
}


/* TEAM LABEL LIGHTS UP SLIGHTLY */

.nova-page .roster-card:hover .roster-card-team {
    color: #c1b6ff;
}


/* =========================================
   NOVA ROSTER RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .nova-page .roster-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .nova-page .roster-grid {
        grid-template-columns: 1fr;
    }

    .nova-page .roster-card {
        min-height: 210px;
    }

}
/* =========================================
   PLAYER PERSONAL EMBLEM CARDS
========================================= */

.zenith-page .roster-card-player {
    min-height: 320px;
}


/* -----------------------------------------
   PERSONAL EMBLEM
----------------------------------------- */

.zenith-page .player-card-emblem {
    position: absolute;

    top: 20px;
    right: 18px;

    width: 105px;
    height: 105px;

    object-fit: contain;

    opacity: 0.24;

    pointer-events: none;

    z-index: 1;

    filter:
        brightness(0.85)
        saturate(0.95)
        drop-shadow(0 0 0 rgba(126, 234, 255, 0));

    transition:
        opacity 0.35s ease,
        transform 0.40s ease,
        filter 0.35s ease;
}


/* -----------------------------------------
   PLAYER DETAILS
----------------------------------------- */

.zenith-page .player-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 18px;
}

.zenith-page .player-card-details span {
    padding: 6px 9px;

    color: #8fbac6;

    background:
        rgba(3, 51, 72, 0.28);

    border:
        1px solid rgba(85, 171, 192, 0.16);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


/* -----------------------------------------
   PLAYER QUOTE
----------------------------------------- */

.zenith-page .player-card-quote {
    position: relative;

    margin: 18px 0 0;
    padding-top: 15px;

    color: #738992;

    font-size: 11px;
    line-height: 1.55;

    border-top:
        1px solid rgba(126, 234, 255, 0.10);

    transition:
        color 0.30s ease,
        border-color 0.30s ease;
}


/* =========================================
   PERSONAL EMBLEM HOVER
========================================= */

.zenith-page .roster-card-player:hover .player-card-emblem {
    opacity: 0.68;

    transform:
        scale(1.08)
        rotate(2deg);

    filter:
        brightness(1.20)
        saturate(1.18)

        drop-shadow(0 0 6px rgba(235, 210, 255, 0.38))
        drop-shadow(0 0 15px rgba(202, 93, 255, 0.28))
        drop-shadow(0 0 25px rgba(126, 234, 255, 0.14));
}


/* PLAYER DETAILS LIGHT UP */

.zenith-page .roster-card-player:hover .player-card-details span {
    color: #c9f7ff;

    border-color:
        rgba(126, 234, 255, 0.34);

    background:
        rgba(14, 129, 153, 0.10);
}


/* QUOTE LIGHTS UP */

.zenith-page .roster-card-player:hover .player-card-quote {
    color: #a8bac2;

    border-color:
        rgba(126, 234, 255, 0.22);
}
/* =========================================
   CLICKABLE PLAYER CARDS
========================================= */

.roster-card-link {
    color: inherit;
    text-decoration: none;

    cursor: pointer;
}

.roster-card-link:focus-visible {
    outline: 2px solid #8cefff;
    outline-offset: 5px;
}

/* =========================================
   PLAYER AGENT / ROLE POOL
========================================= */

.zenith-page .player-card-agent-pool {
    margin: 12px 0 0;

    color: #6f8791;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================
   QUOTE CREDIT
========================================= */

.zenith-page .quote-credit {
    display: block;

    margin-top: 5px;

    color: #59717c;

    font-size: 9px;
}

/* =========================================
   ALIGN DETAILED PLAYER CARD CONTENT
========================================= */

.zenith-page .roster-card-player {
    justify-content: flex-start;
}

.zenith-page .roster-card-player .roster-card-content {
    margin-top: 82px;
}
/* =========================================
   VLOOI PERSONAL EMBLEM
========================================= */

.zenith-page .player-card-emblem-vlooi {
    width: 90px;
    height: 90px;

    top: 20px;
    right: 18px;
}

/* =========================================
   NOVA DETAILED PLAYER CARDS
========================================= */

/* KEEP ALL NOVA CARDS THE SAME HEIGHT */

.nova-page .roster-card {
    min-height: 320px;
}


/* -----------------------------------------
   DETAILED PLAYER CARD ALIGNMENT
----------------------------------------- */

.nova-page .roster-card-player {
    justify-content: flex-start;
}

.nova-page .roster-card-player .roster-card-content {
    margin-top: 82px;
}


/* -----------------------------------------
   PERSONAL PLAYER EMBLEM
----------------------------------------- */

.nova-page .player-card-emblem {
    position: absolute;

    top: 20px;
    right: 18px;

    width: 105px;
    height: 105px;

    object-fit: cover;

    border-radius: 50%;

    opacity: 0.28;

    pointer-events: none;

    z-index: 1;

    filter:
        brightness(0.88)
        saturate(1.05);

    transition:
        opacity 0.35s ease,
        transform 0.40s ease,
        filter 0.35s ease;
}


/* -----------------------------------------
   ROLE BADGES
----------------------------------------- */

.nova-page .player-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 18px;
}

.nova-page .player-card-details span {
    padding: 6px 9px;

    color: #aaa0d8;

    background:
        rgba(121, 92, 255, 0.08);

    border:
        1px solid rgba(169, 156, 255, 0.20);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;

    transition:
        color 0.30s ease,
        background 0.30s ease,
        border-color 0.30s ease;
}


/* -----------------------------------------
   AGENT / ROLE POOL
----------------------------------------- */

.nova-page .player-card-agent-pool {
    margin: 12px 0 0;

    color: #737b9b;

    font-size: 10px;
    line-height: 1.5;
}


/* -----------------------------------------
   PLAYER QUOTE
----------------------------------------- */

.nova-page .player-card-quote {
    position: relative;

    margin: 18px 0 0;
    padding-top: 15px;

    color: #777d99;

    font-size: 11px;
    line-height: 1.55;

    border-top:
        1px solid rgba(169, 156, 255, 0.12);

    transition:
        color 0.30s ease,
        border-color 0.30s ease;
}


/* -----------------------------------------
   QUOTE CREDIT
----------------------------------------- */

.nova-page .quote-credit {
    display: block;

    margin-top: 5px;

    color: #5f6380;

    font-size: 9px;
}


/* =========================================
   NOVA PERSONAL EMBLEM HOVER
========================================= */

.nova-page .roster-card-player:hover .player-card-emblem {
    opacity: 0.72;

    transform:
        scale(1.08)
        rotate(2deg);

    filter:
        brightness(1.22)
        saturate(1.24)

        drop-shadow(0 0 6px rgba(245, 248, 255, 0.30))
        drop-shadow(0 0 14px rgba(169, 156, 255, 0.38))
        drop-shadow(0 0 26px rgba(121, 92, 255, 0.25))
        drop-shadow(0 0 35px rgba(86, 215, 255, 0.10));
}


/* ROLE BADGES LIGHT UP */

.nova-page .roster-card-player:hover .player-card-details span {
    color: #e0dbff;

    background:
        rgba(121, 92, 255, 0.14);

    border-color:
        rgba(169, 156, 255, 0.45);
}


/* AGENT TEXT LIGHTS UP */

.nova-page .roster-card-player:hover .player-card-agent-pool {
    color: #9d9fbd;
}


/* QUOTE LIGHTS UP */

.nova-page .roster-card-player:hover .player-card-quote {
    color: #aaaac1;

    border-color:
        rgba(169, 156, 255, 0.28);
}
.nova-page .fox-player-name {
    font-size: 18px !important;
    letter-spacing: -1px;
    white-space: nowrap;
    max-width: 100%;
}
/* =========================================
   ZENITH COMPETITIVE CARDS
========================================= */

.zenith-page .team-competition-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* -----------------------------------------
   COMPETITION CARD
----------------------------------------- */

.zenith-page .competition-card {
    position: relative;

    min-height: 300px;
    padding: 28px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(86, 215, 255, 0.045),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(7, 25, 34, 0.98),
            rgba(3, 10, 15, 0.99)
        );

    border: 1px solid rgba(126, 234, 255, 0.17);

    clip-path: polygon(
        0 0,
        calc(100% - 22px) 0,
        100% 22px,
        100% 100%,
        22px 100%,
        0 calc(100% - 22px)
    );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* TOP LIGHT */

.zenith-page .competition-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 110px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #dffcff,
            #56d7ff,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* FAINT DIAGONAL DETAIL */

.zenith-page .competition-card::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -110px;
    bottom: -120px;

    transform: rotate(45deg);

    border: 1px solid rgba(126, 234, 255, 0.045);

    pointer-events: none;
}


/* -----------------------------------------
   TOP ROW
----------------------------------------- */

.zenith-page .competition-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 34px;
}


.zenith-page .competition-label {
    margin: 0 0 8px;

    color: #56d7ff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}


.zenith-page .competition-card h3 {
    margin: 0;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;

    color: #ffffff;
}


/* -----------------------------------------
   STATUS
----------------------------------------- */

.zenith-page .competition-status {
    padding: 7px 10px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    border: 1px solid rgba(126, 234, 255, 0.20);
}


.zenith-page .competition-status.active {
    color: #bff7ff;

    background:
        rgba(86, 215, 255, 0.08);

    border-color:
        rgba(126, 234, 255, 0.32);
}


.zenith-page .competition-status.completed {
    color: #748b95;

    background:
        rgba(85, 171, 192, 0.04);
}


/* -----------------------------------------
   DESCRIPTION
----------------------------------------- */

.zenith-page .competition-description {
    position: relative;
    z-index: 2;

    margin: 0 0 30px;

    max-width: 560px;

    color: #8498a2;

    font-size: 14px;
    line-height: 1.75;
}


/* -----------------------------------------
   META TAGS
----------------------------------------- */

.zenith-page .competition-meta {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: auto;
}


.zenith-page .competition-meta span {
    padding: 6px 9px;

    color: #7697a1;

    background:
        rgba(3, 51, 72, 0.22);

    border:
        1px solid rgba(85, 171, 192, 0.13);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;
}


/* =========================================
   CURRENT COMPETITION / EVL
========================================= */

.zenith-page .competition-current {
    border-color:
        rgba(126, 234, 255, 0.30);

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(126, 234, 255, 0.09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(8, 29, 39, 0.99),
            rgba(3, 10, 15, 0.99)
        );
}


/* =========================================
   HOVER
========================================= */

.zenith-page .competition-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(191, 247, 255, 0.58);

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(126, 234, 255, 0.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(8, 30, 40, 0.99),
            rgba(3, 11, 16, 0.99)
        );

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        0 0 14px rgba(191, 247, 255, 0.08),
        0 0 30px rgba(86, 215, 255, 0.07);
}


.zenith-page .competition-card:hover::before {
    width: 190px;

    filter:
        drop-shadow(0 0 5px rgba(220, 252, 255, 0.50))
        drop-shadow(0 0 12px rgba(86, 215, 255, 0.26));
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .zenith-page .team-competition-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .zenith-page .competition-card {
        min-height: 270px;
        padding: 24px;
    }

}

/* =========================================
   NOVA COMPETITIVE CARDS
========================================= */

.nova-page .team-competition-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* -----------------------------------------
   COMPETITION CARD
----------------------------------------- */

.nova-page .competition-card {
    position: relative;

    min-height: 300px;
    padding: 28px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(121, 92, 255, 0.055),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(7, 20, 36, 0.98),
            rgba(5, 8, 19, 0.99)
        );

    border:
        1px solid rgba(169, 156, 255, 0.18);

    clip-path: polygon(
        0 0,
        calc(100% - 22px) 0,
        100% 22px,
        100% 100%,
        22px 100%,
        0 calc(100% - 22px)
    );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* -----------------------------------------
   TOP STELLAR LIGHT
----------------------------------------- */

.nova-page .competition-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 110px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #f4f6ff,
            #a99cff,
            #56d7ff,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* -----------------------------------------
   FAINT GEOMETRIC DETAIL
----------------------------------------- */

.nova-page .competition-card::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -110px;
    bottom: -120px;

    transform: rotate(45deg);

    border:
        1px solid rgba(169, 156, 255, 0.05);

    pointer-events: none;
}


/* -----------------------------------------
   TOP ROW
----------------------------------------- */

.nova-page .competition-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 34px;
}


.nova-page .competition-label {
    margin: 0 0 8px;

    color: #a99cff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}


.nova-page .competition-card h3 {
    margin: 0;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;

    color: #ffffff;
}


/* -----------------------------------------
   STATUS
----------------------------------------- */

.nova-page .competition-status {
    padding: 7px 10px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    border:
        1px solid rgba(169, 156, 255, 0.22);
}


.nova-page .competition-status.active {
    color: #ddd7ff;

    background:
        rgba(121, 92, 255, 0.09);

    border-color:
        rgba(169, 156, 255, 0.38);
}


/* -----------------------------------------
   DESCRIPTION
----------------------------------------- */

.nova-page .competition-description {
    position: relative;
    z-index: 2;

    margin: 0 0 30px;

    max-width: 560px;

    color: #858aa4;

    font-size: 14px;
    line-height: 1.75;
}


/* -----------------------------------------
   META TAGS
----------------------------------------- */

.nova-page .competition-meta {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: auto;
}


.nova-page .competition-meta span {
    padding: 6px 9px;

    color: #8882ad;

    background:
        rgba(121, 92, 255, 0.07);

    border:
        1px solid rgba(169, 156, 255, 0.14);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;
}


/* =========================================
   CURRENT NOVA ACTIVITY
========================================= */

.nova-page .competition-current {
    border-color:
        rgba(169, 156, 255, 0.34);

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(121, 92, 255, 0.13),
            transparent 36%
        ),
        radial-gradient(
            circle at 92% 25%,
            rgba(86, 215, 255, 0.055),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            rgba(8, 21, 39, 0.99),
            rgba(7, 8, 22, 0.99)
        );
}


/* =========================================
   NOVA COMPETITION HOVER
========================================= */

.nova-page .competition-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(184, 170, 255, 0.65);

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(121, 92, 255, 0.15),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 24%,
            rgba(86, 215, 255, 0.06),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(8, 22, 40, 0.99),
            rgba(7, 8, 23, 0.99)
        );

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.36),
        0 0 12px rgba(235, 240, 255, 0.05),
        0 0 24px rgba(169, 156, 255, 0.12),
        0 0 38px rgba(121, 92, 255, 0.08);
}


.nova-page .competition-card:hover::before {
    width: 190px;

    filter:
        drop-shadow(0 0 5px rgba(245, 248, 255, 0.42))
        drop-shadow(0 0 11px rgba(169, 156, 255, 0.48))
        drop-shadow(0 0 18px rgba(86, 215, 255, 0.15));
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .nova-page .team-competition-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .nova-page .competition-card {
        min-height: 270px;
        padding: 24px;
    }

}
/* =========================================
   CRYONIX HOMEPAGE COSMIC BACKGROUND
========================================= */

.home-page {
    background-color: #05090d;

    background-image:
        linear-gradient(
            rgba(3, 7, 12, 0.20),
            rgba(3, 7, 12, 0.28)
        ),
        url("cryonix-cosmic-background.webp");

    background-size: cover;

    background-position: center var(--cosmic-y, 22%);

    background-repeat: no-repeat;

    background-attachment: fixed;
}


/* =========================================
   TEMPORARILY HIDE OLD HERO CRX ART
========================================= */

.home-page .hero-graphic {
    display: none;
}


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

.home-page #home {
    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 13, 0.97) 0%,
            rgba(5, 9, 13, 0.91) 28%,
            rgba(5, 9, 13, 0.72) 48%,
            rgba(5, 9, 13, 0.34) 70%,
            rgba(5, 9, 13, 0.12) 100%
        );
}


/* =========================================
   TEAMS
========================================= */

.home-page #teams {
    background:
        rgba(5, 9, 13, 0.82);
}


/* =========================================
   MATCHES
========================================= */

.home-page #matches {
    background:
        rgba(4, 8, 12, 0.86);
}


/* =========================================
   ABOUT
========================================= */

.home-page #about {
    background:
        rgba(5, 9, 13, 0.84);
}


/* =========================================
   HISTORY
========================================= */

.home-page #history {
    background:
        rgba(4, 8, 12, 0.88);
}


/* =========================================
   FOOTER
========================================= */

.home-page .site-footer {
    background:
        rgba(3, 7, 10, 0.95);
}
/* =========================================
   SMOOTH CONTINUOUS COSMIC HOMEPAGE
========================================= */

.home-page {
    background-color: #05090d;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 7, 12, 0.48) 0%,
            rgba(3, 7, 12, 0.24) 45%,
            rgba(3, 7, 12, 0.12) 100%
        ),
        url("cryonix-cosmic-background.webp");

    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    background-position:
        center var(--cosmic-y, 22%);
}


/* =========================================
   REMOVE SECTION COLOUR BLOCKS
========================================= */

.home-page #home,
.home-page #teams,
.home-page #matches,
.home-page #about,
.home-page #history {
    background: transparent !important;
}


/* =========================================
   HERO TEXT READABILITY
========================================= */

.home-page #home {
    position: relative;
    isolation: isolate;
}

.home-page #home::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 12, 0.90) 0%,
            rgba(4, 8, 12, 0.78) 24%,
            rgba(4, 8, 12, 0.42) 45%,
            rgba(4, 8, 12, 0.12) 68%,
            transparent 84%
        );

    pointer-events: none;

    z-index: 0;
}

.home-page #home > * {
    position: relative;
    z-index: 1;
}


/* =========================================
   SUBTLE SECTION SEPARATORS
========================================= */

.home-page #teams,
.home-page #matches,
.home-page #about,
.home-page #history {
    border-top:
        1px solid rgba(126, 234, 255, 0.08);
}


/* =========================================
   FOOTER
========================================= */

.home-page .site-footer {
    background:
        rgba(3, 7, 10, 0.86);
}
/* =========================================================
   CRYONIX HOMEPAGE
   BRIGHT CONTINUOUS COSMIC BACKGROUND
========================================================= */

.home-page {
    --cosmic-y: 22%;

    background-color: #05090d;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 7, 12, 0.18) 0%,
            rgba(3, 7, 12, 0.08) 45%,
            rgba(3, 7, 12, 0.02) 100%
        ),
        url("cryonix-cosmic-background.webp");

    background-size: cover;
    background-repeat: no-repeat;

    background-position:
        center var(--cosmic-y);

    background-attachment: fixed;
}


/* =========================================================
   OLD HERO ART
========================================================= */

.home-page .hero-graphic {
    display: none;
}


/* =========================================================
   REMOVE DARK SECTION BLOCKS
========================================================= */

.home-page #home,
.home-page #teams,
.home-page #matches,
.home-page #about,
.home-page #history {
    background: transparent !important;
}


/* =========================================================
   HERO
   DARKER ONLY BEHIND THE TEXT
========================================================= */

.home-page #home {
    position: relative;
    isolation: isolate;
}


.home-page #home::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 12, 0.76) 0%,
            rgba(4, 8, 12, 0.58) 24%,
            rgba(4, 8, 12, 0.25) 45%,
            rgba(4, 8, 12, 0.06) 67%,
            transparent 84%
        );

    pointer-events: none;

    z-index: 0;
}


.home-page #home > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   SECTION SEPARATION
   NO SOLID COLOUR BANDS
========================================================= */

.home-page #teams,
.home-page #matches,
.home-page #about,
.home-page #history {
    position: relative;

    border-top:
        1px solid rgba(126, 234, 255, 0.08);
}


/* =========================================================
   VERY LIGHT READABILITY VEIL
   KEEPS TEXT LEGIBLE WITHOUT HIDING BACKGROUND
========================================================= */

.home-page #teams::before,
.home-page #matches::before,
.home-page #about::before,
.home-page #history::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        rgba(3, 7, 11, 0.10);

    pointer-events: none;

    z-index: 0;
}


.home-page #teams > *,
.home-page #matches > *,
.home-page #about > *,
.home-page #history > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   TEAM CARDS / MATCH CARDS ETC.
   KEEP THEIR OWN DARK SURFACES
========================================================= */

.home-page .team-card,
.home-page .match-card,
.home-page .about-story,
.home-page .about-value,
.home-page .history-content {
    backdrop-filter: blur(1px);
}


/* =========================================================
   FOOTER
========================================================= */

.home-page .site-footer {
    background:
        rgba(3, 7, 10, 0.82);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .home-page {
        background-color: #05090d;

        background-image:
            linear-gradient(
                rgba(3, 7, 12, 0.18),
                rgba(3, 7, 12, 0.18)
            ),
            url("cryonix-cosmic-background.webp");

        background-size: cover !important;

        background-repeat: no-repeat !important;

        background-position:
            center var(--cosmic-y) !important;

        background-attachment: fixed !important;
    }

}
/* =========================================================
   CRYONIX HOMEPAGE
   BALANCED COSMIC BACKGROUND
========================================================= */

.home-page {
    --cosmic-y: 22%;

    background-color: #05090d;

    background-image:
        linear-gradient(
            rgba(3, 7, 12, 0.18),
            rgba(3, 7, 12, 0.18)
        ),
        url("cryonix-cosmic-background.webp");

    background-size: cover;
    background-repeat: no-repeat;

    background-position:
        center var(--cosmic-y);

    background-attachment: fixed;
}


/* =========================================================
   OLD HERO ART
========================================================= */

.home-page .hero-graphic {
    display: none;
}


/* =========================================================
   KEEP THE BACKGROUND CONTINUOUS
========================================================= */

.home-page #home,
.home-page #teams,
.home-page #matches,
.home-page #about,
.home-page #history {
    position: relative;

    background: transparent !important;
}


/* =========================================================
   HERO
   VERY SOFT READABILITY SHADOW
========================================================= */

.home-page #home::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 7, 12, 0.30) 0%,
            rgba(3, 7, 12, 0.20) 27%,
            rgba(3, 7, 12, 0.08) 48%,
            rgba(3, 7, 12, 0.02) 68%,
            transparent 82%
        );

    pointer-events: none;

    z-index: 0;
}


.home-page #home > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   HERO TEXT
========================================================= */

.home-page .hero-content {
    position: relative;
    z-index: 2;
}


.home-page .hero-content h2 {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.72),
        0 0 16px rgba(0, 0, 0, 0.28);
}


.home-page .hero-content > p:not(.hero-label) {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.72);
}


.home-page .hero-label {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.70);
}


/* =========================================================
   SUBTLE SECTION VEIL
   SAME STRENGTH EVERYWHERE = NO DARK BANDS
========================================================= */

.home-page #teams::before,
.home-page #matches::before,
.home-page #about::before,
.home-page #history::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        rgba(3, 7, 11, 0.12);

    pointer-events: none;

    z-index: 0;
}


.home-page #teams > *,
.home-page #matches > *,
.home-page #about > *,
.home-page #history > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   SECTION DIVIDERS
========================================================= */

.home-page #teams,
.home-page #matches,
.home-page #about,
.home-page #history {
    border-top:
        1px solid rgba(126, 234, 255, 0.09);
}


/* =========================================================
   KEEP CONTENT CARDS READABLE
========================================================= */

.home-page .team-card,
.home-page .match-card,
.home-page .about-story,
.home-page .about-value,
.home-page .history-content {
    backdrop-filter: blur(1px);
}


/* =========================================================
   FOOTER
========================================================= */

.home-page .site-footer {
    background:
        rgba(3, 7, 10, 0.88);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .home-page {
       background-attachment: scroll;
        background-size: cover;

    }


    .home-page #home::before {
        background:
            linear-gradient(
                90deg,
                rgba(3, 7, 12, 0.36) 0%,
                rgba(3, 7, 12, 0.24) 55%,
                rgba(3, 7, 12, 0.08) 100%
            );
    }

}
/* =========================================================
   HOMEPAGE TEAM CARDS
   COSMIC GLASS GRADIENTS
========================================================= */

.home-page .team-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26);

    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        background 0.30s ease;
}


/* =========================================================
   ZENITH
   ICY BLUE / CYAN GLASS
========================================================= */

.home-page .team-zenith {
    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(126, 234, 255, 0.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(7, 31, 45, 0.86) 0%,
            rgba(5, 21, 32, 0.88) 48%,
            rgba(3, 12, 19, 0.92) 100%
        );

    border-color:
        rgba(126, 234, 255, 0.24);
}


.home-page .team-zenith:hover {
    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(191, 247, 255, 0.20),
            transparent 40%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(86, 215, 255, 0.08),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(8, 40, 54, 0.90) 0%,
            rgba(5, 25, 37, 0.92) 50%,
            rgba(3, 13, 20, 0.95) 100%
        );

    border-color:
        rgba(191, 247, 255, 0.62);

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(126, 234, 255, 0.10),
        0 0 42px rgba(86, 215, 255, 0.07);
}


/* =========================================================
   NOVA
   INDIGO / VIOLET / BLUE GLASS
========================================================= */

.home-page .team-nova {
    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(150, 116, 255, 0.16),
            transparent 39%
        ),
        radial-gradient(
            circle at 92% 62%,
            rgba(67, 143, 255, 0.06),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(19, 20, 48, 0.86) 0%,
            rgba(11, 18, 39, 0.89) 50%,
            rgba(5, 10, 21, 0.93) 100%
        );

    border-color:
        rgba(169, 156, 255, 0.25);
}


.home-page .team-nova:hover {
    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(173, 145, 255, 0.22),
            transparent 40%
        ),
        radial-gradient(
            circle at 90% 68%,
            rgba(86, 215, 255, 0.08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(28, 25, 65, 0.91) 0%,
            rgba(14, 21, 48, 0.93) 50%,
            rgba(6, 10, 23, 0.96) 100%
        );

    border-color:
        rgba(184, 170, 255, 0.65);

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(169, 156, 255, 0.12),
        0 0 42px rgba(121, 92, 255, 0.08);
}
/* =========================================================
   HOMEPAGE TEAM CARDS
   STRONGER DISTINCT COSMIC GLASS GRADIENTS
========================================================= */


/* ---------------------------------------------------------
   SHARED GLASS CARD
--------------------------------------------------------- */

.home-page #teams .team-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        background 0.30s ease;
}


/* =========================================================
   ZENITH
   ICE / CYAN / DEEP BLUE
========================================================= */

.home-page #teams .team-card.team-zenith {
    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(120, 225, 255, 0.24) 0%,
            rgba(43, 145, 190, 0.12) 28%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            rgba(7, 37, 52, 0.94) 0%,
            rgba(7, 26, 42, 0.92) 45%,
            rgba(3, 13, 23, 0.96) 100%
        ) !important;

    border-color:
        rgba(116, 221, 255, 0.34) !important;
}


/* ZENITH HOVER */

.home-page #teams .team-card.team-zenith:hover {
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(193, 247, 255, 0.32) 0%,
            rgba(75, 190, 225, 0.18) 32%,
            transparent 55%
        ),
        linear-gradient(
            135deg,
            rgba(9, 48, 66, 0.96) 0%,
            rgba(7, 31, 48, 0.95) 48%,
            rgba(3, 14, 23, 0.98) 100%
        ) !important;

    border-color:
        rgba(191, 247, 255, 0.72) !important;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(126, 234, 255, 0.14),
        0 0 45px rgba(65, 180, 220, 0.10);
}


/* =========================================================
   NOVA
   VIOLET / INDIGO / STELLAR BLUE
========================================================= */

.home-page #teams .team-card.team-nova {
    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(151, 104, 255, 0.28) 0%,
            rgba(91, 67, 190, 0.15) 30%,
            transparent 54%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(58, 123, 230, 0.09),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(28, 22, 62, 0.94) 0%,
            rgba(17, 20, 48, 0.93) 48%,
            rgba(6, 10, 25, 0.97) 100%
        ) !important;

    border-color:
        rgba(174, 145, 255, 0.36) !important;
}


/* NOVA HOVER */

.home-page #teams .team-card.team-nova:hover {
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(186, 151, 255, 0.36) 0%,
            rgba(119, 86, 230, 0.20) 32%,
            transparent 56%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(78, 151, 255, 0.12),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(39, 29, 82, 0.96) 0%,
            rgba(20, 23, 55, 0.95) 48%,
            rgba(7, 10, 27, 0.98) 100%
        ) !important;

    border-color:
        rgba(194, 174, 255, 0.72) !important;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(175, 148, 255, 0.16),
        0 0 48px rgba(115, 82, 235, 0.12);
}
/* =========================================================
   HOMEPAGE CARDS
   COSMIC GLASS SYSTEM
========================================================= */


/* ---------------------------------------------------------
   SHARED CARD SURFACE
--------------------------------------------------------- */

.home-page .team-card,
.home-page .match-card,
.home-page .about-story,
.home-page .about-value,
.home-page .history-content {
    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(95, 125, 180, 0.09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(15, 24, 39, 0.88) 0%,
            rgba(8, 16, 29, 0.91) 48%,
            rgba(4, 10, 18, 0.95) 100%
        ) !important;

    border-color:
        rgba(145, 190, 215, 0.18) !important;

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        background 0.30s ease;
}


/* =========================================================
   GENERAL CARD HOVER
========================================================= */

.home-page .match-card:hover,
.home-page .about-story:hover,
.home-page .about-value:hover,
.home-page .history-content:hover {
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(97, 184, 215, 0.13),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(18, 32, 48, 0.92) 0%,
            rgba(9, 20, 34, 0.94) 48%,
            rgba(4, 11, 19, 0.97) 100%
        ) !important;

    border-color:
        rgba(126, 214, 235, 0.34) !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(86, 215, 255, 0.06);
}


/* =========================================================
   ZENITH CARD
   ICE / CYAN
========================================================= */

.home-page #teams .team-card.team-zenith {
    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(126, 234, 255, 0.17),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(10, 35, 49, 0.90) 0%,
            rgba(7, 23, 36, 0.92) 50%,
            rgba(4, 11, 19, 0.96) 100%
        ) !important;

    border-color:
        rgba(126, 234, 255, 0.28) !important;
}


.home-page #teams .team-card.team-zenith:hover {
    background:
        radial-gradient(
            circle at 80% 22%,
            rgba(191, 247, 255, 0.24),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(11, 45, 61, 0.94) 0%,
            rgba(7, 29, 43, 0.95) 50%,
            rgba(4, 12, 20, 0.98) 100%
        ) !important;

    border-color:
        rgba(191, 247, 255, 0.62) !important;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(126, 234, 255, 0.11),
        0 0 42px rgba(86, 215, 255, 0.07);
}


/* =========================================================
   NOVA CARD
   VIOLET / INDIGO / BLUE
========================================================= */

.home-page #teams .team-card.team-nova {
    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(155, 116, 255, 0.19),
            transparent 43%
        ),
        radial-gradient(
            circle at 92% 72%,
            rgba(70, 140, 225, 0.06),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(28, 25, 59, 0.90) 0%,
            rgba(17, 20, 43, 0.93) 50%,
            rgba(6, 11, 23, 0.97) 100%
        ) !important;

    border-color:
        rgba(177, 154, 255, 0.29) !important;
}


.home-page #teams .team-card.team-nova:hover {
    background:
        radial-gradient(
            circle at 80% 22%,
            rgba(185, 153, 255, 0.27),
            transparent 44%
        ),
        radial-gradient(
            circle at 92% 72%,
            rgba(86, 175, 255, 0.09),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(38, 30, 76, 0.94) 0%,
            rgba(21, 23, 51, 0.95) 50%,
            rgba(7, 11, 26, 0.98) 100%
        ) !important;

    border-color:
        rgba(194, 174, 255, 0.65) !important;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(169, 156, 255, 0.13),
        0 0 42px rgba(121, 92, 255, 0.09);
}


/* =========================================================
   ABOUT IDENTITY STRIP
========================================================= */

.home-page .about-identity {
    background:
        linear-gradient(
            135deg,
            rgba(14, 25, 40, 0.86),
            rgba(6, 13, 23, 0.92)
        ) !important;

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    border-color:
        rgba(145, 190, 215, 0.16) !important;
}
/* =========================================================
   CRYONIX HOMEPAGE
   CRYSTALLINE CARD SYSTEM
========================================================= */


/* =========================================================
   SHARED CRYSTAL SURFACE
========================================================= */

.home-page .team-card,
.home-page .match-card,
.home-page .about-story,
.home-page .about-value,
.home-page .history-content,
.home-page .about-identity {

    /*
       Multiple HARD-EDGED gradients create the
       appearance of crystal facets instead of soft glass.
    */

    background:

        /* upper-right crystal face */
        linear-gradient(
            132deg,
            transparent 0%,
            transparent 57%,
            rgba(176, 235, 255, 0.055) 57.2%,
            rgba(176, 235, 255, 0.055) 69%,
            transparent 69.2%,
            transparent 100%
        ),

        /* large lower crystal plane */
        linear-gradient(
            38deg,
            transparent 0%,
            transparent 23%,
            rgba(70, 138, 185, 0.055) 23.2%,
            rgba(70, 138, 185, 0.055) 43%,
            transparent 43.2%,
            transparent 100%
        ),

        /* thin reflective shard */
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 71%,
            rgba(220, 250, 255, 0.075) 71.2%,
            rgba(220, 250, 255, 0.075) 71.8%,
            transparent 72%,
            transparent 100%
        ),

        /* darker facet */
        linear-gradient(
            158deg,
            rgba(13, 34, 50, 0.24) 0%,
            rgba(13, 34, 50, 0.24) 22%,
            transparent 22.2%,
            transparent 62%,
            rgba(2, 9, 17, 0.30) 62.2%,
            rgba(2, 9, 17, 0.30) 100%
        ),

        /* crystalline base */
        linear-gradient(
            145deg,
            rgba(12, 29, 43, 0.91) 0%,
            rgba(8, 20, 33, 0.93) 42%,
            rgba(4, 12, 22, 0.96) 72%,
            rgba(3, 8, 16, 0.98) 100%
        ) !important;


    border-color:
        rgba(150, 220, 240, 0.25) !important;


    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),

        inset 0 1px 0
        rgba(225, 250, 255, 0.09),

        inset 1px 0 0
        rgba(130, 210, 240, 0.035),

        inset -1px -1px 0
        rgba(0, 0, 0, 0.38);


    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);


    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        background 0.35s ease;
}


/* =========================================================
   GENERAL CRYSTAL HOVER
========================================================= */

.home-page .match-card:hover,
.home-page .about-story:hover,
.home-page .about-value:hover,
.home-page .history-entry:hover .history-content {

    background:

        linear-gradient(
            132deg,
            transparent 0%,
            transparent 56%,
            rgba(190, 242, 255, 0.095) 56.2%,
            rgba(190, 242, 255, 0.095) 69%,
            transparent 69.2%,
            transparent 100%
        ),

        linear-gradient(
            38deg,
            transparent 0%,
            transparent 22%,
            rgba(84, 171, 213, 0.085) 22.2%,
            rgba(84, 171, 213, 0.085) 43%,
            transparent 43.2%,
            transparent 100%
        ),

        linear-gradient(
            112deg,
            transparent 0%,
            transparent 70%,
            rgba(235, 253, 255, 0.12) 70.2%,
            rgba(235, 253, 255, 0.12) 71%,
            transparent 71.2%,
            transparent 100%
        ),

        linear-gradient(
            158deg,
            rgba(15, 43, 61, 0.28) 0%,
            rgba(15, 43, 61, 0.28) 22%,
            transparent 22.2%,
            transparent 62%,
            rgba(2, 10, 18, 0.34) 62.2%,
            rgba(2, 10, 18, 0.34) 100%
        ),

        linear-gradient(
            145deg,
            rgba(14, 37, 53, 0.94) 0%,
            rgba(8, 25, 39, 0.95) 43%,
            rgba(4, 14, 25, 0.97) 72%,
            rgba(3, 9, 17, 0.99) 100%
        ) !important;


    border-color:
        rgba(167, 232, 250, 0.48) !important;


    box-shadow:
        0 21px 50px rgba(0, 0, 0, 0.34),

        inset 0 1px 0
        rgba(235, 253, 255, 0.13),

        0 0 18px
        rgba(110, 218, 245, 0.08);
}


/* =========================================================
   ZENITH
   CLEAR / ICE CRYSTAL
========================================================= */

.home-page #teams .team-card.team-zenith {

    background:

        /* bright upper shard */
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 55%,
            rgba(203, 249, 255, 0.12) 55.2%,
            rgba(203, 249, 255, 0.12) 68%,
            transparent 68.2%
        ),

        /* cyan crystal face */
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(77, 201, 232, 0.11) 25.2%,
            rgba(77, 201, 232, 0.11) 47%,
            transparent 47.2%
        ),

        /* thin light fracture */
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 73%,
            rgba(233, 253, 255, 0.16) 73.2%,
            rgba(233, 253, 255, 0.16) 73.8%,
            transparent 74%
        ),

        /* dark face */
        linear-gradient(
            160deg,
            rgba(22, 65, 78, 0.26) 0%,
            rgba(22, 65, 78, 0.26) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(3, 12, 20, 0.34) 63.2%
        ),

        /* base */
        linear-gradient(
            145deg,
            rgba(11, 43, 57, 0.93) 0%,
            rgba(6, 29, 43, 0.95) 43%,
            rgba(4, 17, 29, 0.97) 72%,
            rgba(2, 10, 18, 0.99) 100%
        ) !important;


    border-color:
        rgba(164, 238, 255, 0.40) !important;


    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.31),

        inset 0 1px 0
        rgba(227, 253, 255, 0.15),

        0 0 22px
        rgba(86, 215, 255, 0.055);
}


/* =========================================================
   ZENITH HOVER
========================================================= */

.home-page #teams .team-card.team-zenith:hover {

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 54%,
            rgba(219, 251, 255, 0.18) 54.2%,
            rgba(219, 251, 255, 0.18) 68%,
            transparent 68.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(90, 217, 245, 0.16) 24.2%,
            rgba(90, 217, 245, 0.16) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            108deg,
            transparent 0%,
            transparent 72%,
            rgba(239, 254, 255, 0.23) 72.2%,
            rgba(239, 254, 255, 0.23) 73%,
            transparent 73.2%
        ),

        linear-gradient(
            160deg,
            rgba(28, 78, 92, 0.30) 0%,
            rgba(28, 78, 92, 0.30) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(3, 13, 22, 0.38) 63.2%
        ),

        linear-gradient(
            145deg,
            rgba(12, 51, 67, 0.95) 0%,
            rgba(7, 34, 49, 0.96) 43%,
            rgba(4, 19, 31, 0.98) 72%,
            rgba(2, 10, 18, 1) 100%
        ) !important;


    border-color:
        rgba(203, 249, 255, 0.72) !important;


    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),

        inset 0 1px 0
        rgba(245, 255, 255, 0.20),

        0 0 20px
        rgba(126, 234, 255, 0.12),

        0 0 42px
        rgba(86, 215, 255, 0.07);
}


/* =========================================================
   NOVA
   VIOLET / AMETHYST CRYSTAL
========================================================= */

.home-page #teams .team-card.team-nova {

    background:

        /* violet upper shard */
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 55%,
            rgba(212, 192, 255, 0.13) 55.2%,
            rgba(212, 192, 255, 0.13) 68%,
            transparent 68.2%
        ),

        /* purple crystal face */
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(139, 96, 235, 0.13) 25.2%,
            rgba(139, 96, 235, 0.13) 47%,
            transparent 47.2%
        ),

        /* blue-violet fracture */
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 73%,
            rgba(180, 194, 255, 0.16) 73.2%,
            rgba(180, 194, 255, 0.16) 73.8%,
            transparent 74%
        ),

        /* shadow face */
        linear-gradient(
            160deg,
            rgba(67, 48, 119, 0.30) 0%,
            rgba(67, 48, 119, 0.30) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(6, 8, 24, 0.36) 63.2%
        ),

        /* base */
        linear-gradient(
            145deg,
            rgba(39, 31, 74, 0.93) 0%,
            rgba(24, 24, 58, 0.95) 43%,
            rgba(12, 15, 38, 0.97) 72%,
            rgba(6, 9, 22, 0.99) 100%
        ) !important;


    border-color:
        rgba(190, 166, 255, 0.42) !important;


    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.31),

        inset 0 1px 0
        rgba(231, 220, 255, 0.14),

        0 0 22px
        rgba(146, 105, 255, 0.06);
}


/* =========================================================
   NOVA HOVER
========================================================= */

.home-page #teams .team-card.team-nova:hover {

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 54%,
            rgba(224, 207, 255, 0.20) 54.2%,
            rgba(224, 207, 255, 0.20) 68%,
            transparent 68.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(158, 113, 247, 0.18) 24.2%,
            rgba(158, 113, 247, 0.18) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            108deg,
            transparent 0%,
            transparent 72%,
            rgba(198, 208, 255, 0.22) 72.2%,
            rgba(198, 208, 255, 0.22) 73%,
            transparent 73.2%
        ),

        linear-gradient(
            160deg,
            rgba(78, 55, 142, 0.34) 0%,
            rgba(78, 55, 142, 0.34) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(7, 9, 26, 0.39) 63.2%
        ),

        linear-gradient(
            145deg,
            rgba(48, 36, 91, 0.95) 0%,
            rgba(29, 27, 67, 0.96) 43%,
            rgba(14, 17, 42, 0.98) 72%,
            rgba(6, 9, 23, 1) 100%
        ) !important;


    border-color:
        rgba(211, 190, 255, 0.72) !important;


    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),

        inset 0 1px 0
        rgba(241, 232, 255, 0.19),

        0 0 20px
        rgba(177, 145, 255, 0.13),

        0 0 44px
        rgba(121, 92, 255, 0.08);
}


/* =========================================================
   HISTORY NUMBER CRYSTALS
========================================================= */

.home-page .history-marker {

    background:

        linear-gradient(
            135deg,
            rgba(185, 244, 255, 0.12) 0%,
            transparent 34%
        ),

        linear-gradient(
            45deg,
            transparent 0%,
            transparent 48%,
            rgba(93, 194, 225, 0.11) 48.2%,
            rgba(93, 194, 225, 0.11) 67%,
            transparent 67.2%
        ),

        linear-gradient(
            145deg,
            rgba(9, 39, 53, 0.96),
            rgba(3, 13, 21, 0.99)
        ) !important;


    border-color:
        rgba(150, 228, 247, 0.36) !important;


    box-shadow:
        inset 0 1px 0
        rgba(228, 252, 255, 0.12),

        0 0 18px
        rgba(86, 215, 255, 0.08);
}
/* =========================================================
   CRYONIX HOMEPAGE
   TRANSLUCENT CRYSTALLINE CARDS
========================================================= */


/* =========================================================
   ALL STANDARD CARDS
========================================================= */

.home-page .team-card,
.home-page .match-card,
.home-page .about-story,
.home-page .about-value,
.home-page .history-content,
.home-page .about-identity {

    background:

        /* upper crystal facet */
        linear-gradient(
            132deg,
            transparent 0%,
            transparent 57%,
            rgba(196, 240, 255, 0.075) 57.2%,
            rgba(196, 240, 255, 0.075) 69%,
            transparent 69.2%,
            transparent 100%
        ),

        /* lower facet */
        linear-gradient(
            38deg,
            transparent 0%,
            transparent 23%,
            rgba(82, 154, 198, 0.07) 23.2%,
            rgba(82, 154, 198, 0.07) 43%,
            transparent 43.2%,
            transparent 100%
        ),

        /* thin reflective edge */
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 71%,
            rgba(230, 252, 255, 0.10) 71.2%,
            rgba(230, 252, 255, 0.10) 71.8%,
            transparent 72%,
            transparent 100%
        ),

        /* dark angular facet */
        linear-gradient(
            158deg,
            rgba(9, 31, 47, 0.16) 0%,
            rgba(9, 31, 47, 0.16) 22%,
            transparent 22.2%,
            transparent 62%,
            rgba(2, 8, 15, 0.20) 62.2%,
            rgba(2, 8, 15, 0.20) 100%
        ),

        /* TRANSLUCENT BASE */
        linear-gradient(
            145deg,
            rgba(10, 28, 42, 0.74) 0%,
            rgba(6, 19, 31, 0.76) 45%,
            rgba(3, 11, 21, 0.80) 75%,
            rgba(2, 7, 14, 0.82) 100%
        ) !important;


    border-color:
        rgba(160, 226, 245, 0.28) !important;


    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);


    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.25),

        inset 0 1px 0
        rgba(235, 253, 255, 0.10),

        inset -1px -1px 0
        rgba(0, 0, 0, 0.22);
}


/* =========================================================
   GENERAL HOVER
========================================================= */

.home-page .match-card:hover,
.home-page .about-story:hover,
.home-page .about-value:hover,
.home-page .history-entry:hover .history-content {

    background:

        linear-gradient(
            132deg,
            transparent 0%,
            transparent 56%,
            rgba(205, 246, 255, 0.11) 56.2%,
            rgba(205, 246, 255, 0.11) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            38deg,
            transparent 0%,
            transparent 22%,
            rgba(92, 182, 221, 0.09) 22.2%,
            rgba(92, 182, 221, 0.09) 43%,
            transparent 43.2%
        ),

        linear-gradient(
            112deg,
            transparent 0%,
            transparent 70%,
            rgba(240, 254, 255, 0.14) 70.2%,
            rgba(240, 254, 255, 0.14) 71%,
            transparent 71.2%
        ),

        linear-gradient(
            158deg,
            rgba(13, 39, 56, 0.18) 0%,
            rgba(13, 39, 56, 0.18) 22%,
            transparent 22.2%,
            transparent 62%,
            rgba(2, 9, 16, 0.22) 62.2%
        ),

        linear-gradient(
            145deg,
            rgba(12, 34, 49, 0.78) 0%,
            rgba(7, 23, 36, 0.80) 45%,
            rgba(4, 13, 23, 0.83) 75%,
            rgba(2, 8, 15, 0.86) 100%
        ) !important;


    border-color:
        rgba(176, 235, 250, 0.48) !important;
}


/* =========================================================
   ZENITH
   TRANSLUCENT ICE CRYSTAL
========================================================= */

.home-page #teams .team-card.team-zenith {

    background:

        /* bright ice facet */
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 55%,
            rgba(218, 251, 255, 0.12) 55.2%,
            rgba(218, 251, 255, 0.12) 68%,
            transparent 68.2%
        ),

        /* cyan facet */
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(89, 211, 239, 0.10) 25.2%,
            rgba(89, 211, 239, 0.10) 47%,
            transparent 47.2%
        ),

        /* reflective fracture */
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 73%,
            rgba(235, 254, 255, 0.15) 73.2%,
            rgba(235, 254, 255, 0.15) 73.8%,
            transparent 74%
        ),

        /* darker facet */
        linear-gradient(
            160deg,
            rgba(19, 65, 79, 0.18) 0%,
            rgba(19, 65, 79, 0.18) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(2, 11, 19, 0.22) 63.2%
        ),

        /* TRANSLUCENT ICE BASE */
        linear-gradient(
            145deg,
            rgba(8, 43, 57, 0.70) 0%,
            rgba(5, 29, 43, 0.73) 43%,
            rgba(3, 16, 28, 0.77) 72%,
            rgba(2, 9, 17, 0.80) 100%
        ) !important;


    border-color:
        rgba(177, 241, 255, 0.40) !important;
}


/* ZENITH HOVER */

.home-page #teams .team-card.team-zenith:hover {

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 54%,
            rgba(225, 253, 255, 0.17) 54.2%,
            rgba(225, 253, 255, 0.17) 68%,
            transparent 68.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(99, 220, 245, 0.14) 24.2%,
            rgba(99, 220, 245, 0.14) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            108deg,
            transparent 0%,
            transparent 72%,
            rgba(242, 255, 255, 0.20) 72.2%,
            rgba(242, 255, 255, 0.20) 73%,
            transparent 73.2%
        ),

        linear-gradient(
            160deg,
            rgba(22, 74, 90, 0.21) 0%,
            rgba(22, 74, 90, 0.21) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(2, 11, 20, 0.25) 63.2%
        ),

        linear-gradient(
            145deg,
            rgba(9, 49, 64, 0.75) 0%,
            rgba(5, 32, 46, 0.77) 43%,
            rgba(3, 18, 30, 0.81) 72%,
            rgba(2, 10, 18, 0.84) 100%
        ) !important;


    border-color:
        rgba(211, 250, 255, 0.70) !important;
}


/* =========================================================
   NOVA
   TRANSLUCENT AMETHYST CRYSTAL
========================================================= */

.home-page #teams .team-card.team-nova {

    background:

        /* pale violet facet */
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 55%,
            rgba(221, 204, 255, 0.13) 55.2%,
            rgba(221, 204, 255, 0.13) 68%,
            transparent 68.2%
        ),

        /* amethyst face */
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(151, 108, 242, 0.11) 25.2%,
            rgba(151, 108, 242, 0.11) 47%,
            transparent 47.2%
        ),

        /* blue-violet reflection */
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 73%,
            rgba(194, 201, 255, 0.15) 73.2%,
            rgba(194, 201, 255, 0.15) 73.8%,
            transparent 74%
        ),

        /* shadow facet */
        linear-gradient(
            160deg,
            rgba(72, 52, 127, 0.20) 0%,
            rgba(72, 52, 127, 0.20) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(5, 7, 22, 0.23) 63.2%
        ),

        /* TRANSLUCENT AMETHYST BASE */
        linear-gradient(
            145deg,
            rgba(39, 29, 78, 0.69) 0%,
            rgba(24, 22, 59, 0.72) 43%,
            rgba(12, 14, 38, 0.77) 72%,
            rgba(5, 8, 22, 0.81) 100%
        ) !important;


    border-color:
        rgba(199, 178, 255, 0.42) !important;
}


/* NOVA HOVER */

.home-page #teams .team-card.team-nova:hover {

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 54%,
            rgba(230, 217, 255, 0.18) 54.2%,
            rgba(230, 217, 255, 0.18) 68%,
            transparent 68.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(164, 122, 250, 0.15) 24.2%,
            rgba(164, 122, 250, 0.15) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            108deg,
            transparent 0%,
            transparent 72%,
            rgba(208, 214, 255, 0.20) 72.2%,
            rgba(208, 214, 255, 0.20) 73%,
            transparent 73.2%
        ),

        linear-gradient(
            160deg,
            rgba(82, 59, 147, 0.23) 0%,
            rgba(82, 59, 147, 0.23) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(6, 8, 24, 0.25) 63.2%
        ),

        linear-gradient(
            145deg,
            rgba(45, 33, 89, 0.74) 0%,
            rgba(28, 25, 66, 0.76) 43%,
            rgba(14, 16, 42, 0.80) 72%,
            rgba(6, 8, 23, 0.84) 100%
        ) !important;


    border-color:
        rgba(218, 200, 255, 0.70) !important;
}
/* =========================================================
   CRYONIX HOMEPAGE
   REFINED CRYSTALLINE TEAM CARDS
========================================================= */


/* =========================================================
   BASE CARD
========================================================= */

.home-page #teams .team-card {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(240, 253, 255, 0.10);

    border-width: 1px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.35s ease;
}


/* =========================================================
   ZENITH
   MORE TRANSLUCENT ICE CRYSTAL
========================================================= */

.home-page #teams .team-card.team-zenith {

    background:

        /* pale upper crystal face */
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 55%,
            rgba(214, 250, 255, 0.11) 55.2%,
            rgba(214, 250, 255, 0.11) 68%,
            transparent 68.2%
        ),

        /* cyan facet */
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(86, 207, 235, 0.09) 25.2%,
            rgba(86, 207, 235, 0.09) 47%,
            transparent 47.2%
        ),

        /* thin reflective cut */
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 73%,
            rgba(236, 254, 255, 0.14) 73.2%,
            rgba(236, 254, 255, 0.14) 73.8%,
            transparent 74%
        ),

        /* shadow plane */
        linear-gradient(
            160deg,
            rgba(18, 67, 82, 0.14) 0%,
            rgba(18, 67, 82, 0.14) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(2, 11, 20, 0.17) 63.2%
        ),

        /* translucent base */
        linear-gradient(
            145deg,
            rgba(7, 41, 55, 0.56) 0%,
            rgba(4, 27, 41, 0.59) 43%,
            rgba(3, 15, 27, 0.63) 72%,
            rgba(2, 8, 17, 0.68) 100%
        ) !important;

    border-color:
        rgba(177, 241, 255, 0.39) !important;
}


/* ZENITH HOVER */

.home-page #teams .team-card.team-zenith:hover {

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 54%,
            rgba(225, 253, 255, 0.16) 54.2%,
            rgba(225, 253, 255, 0.16) 68%,
            transparent 68.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(100, 221, 245, 0.13) 24.2%,
            rgba(100, 221, 245, 0.13) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            108deg,
            transparent 0%,
            transparent 72%,
            rgba(244, 255, 255, 0.18) 72.2%,
            rgba(244, 255, 255, 0.18) 73%,
            transparent 73.2%
        ),

        linear-gradient(
            160deg,
            rgba(22, 75, 91, 0.17) 0%,
            rgba(22, 75, 91, 0.17) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(2, 11, 20, 0.20) 63.2%
        ),

        linear-gradient(
            145deg,
            rgba(8, 47, 61, 0.61) 0%,
            rgba(5, 31, 45, 0.63) 43%,
            rgba(3, 17, 29, 0.67) 72%,
            rgba(2, 9, 18, 0.71) 100%
        ) !important;

    border-color:
        rgba(216, 251, 255, 0.68) !important;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(126, 234, 255, 0.11);
}


/* =========================================================
   NOVA
   MORE TRANSLUCENT AMETHYST CRYSTAL
========================================================= */

.home-page #teams .team-card.team-nova {

    background:

        /* pale violet crystal face */
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 55%,
            rgba(222, 204, 255, 0.12) 55.2%,
            rgba(222, 204, 255, 0.12) 68%,
            transparent 68.2%
        ),

        /* amethyst facet */
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(151, 108, 242, 0.10) 25.2%,
            rgba(151, 108, 242, 0.10) 47%,
            transparent 47.2%
        ),

        /* light cut */
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 73%,
            rgba(200, 207, 255, 0.14) 73.2%,
            rgba(200, 207, 255, 0.14) 73.8%,
            transparent 74%
        ),

        /* dark violet face */
        linear-gradient(
            160deg,
            rgba(76, 53, 133, 0.16) 0%,
            rgba(76, 53, 133, 0.16) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(5, 7, 23, 0.18) 63.2%
        ),

        /* translucent amethyst base */
        linear-gradient(
            145deg,
            rgba(42, 29, 82, 0.55) 0%,
            rgba(25, 22, 61, 0.58) 43%,
            rgba(12, 14, 39, 0.63) 72%,
            rgba(5, 8, 23, 0.68) 100%
        ) !important;

    border-color:
        rgba(202, 181, 255, 0.40) !important;
}


/* NOVA HOVER */

.home-page #teams .team-card.team-nova:hover {

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 54%,
            rgba(232, 216, 255, 0.17) 54.2%,
            rgba(232, 216, 255, 0.17) 68%,
            transparent 68.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(166, 123, 250, 0.14) 24.2%,
            rgba(166, 123, 250, 0.14) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            108deg,
            transparent 0%,
            transparent 72%,
            rgba(210, 216, 255, 0.18) 72.2%,
            rgba(210, 216, 255, 0.18) 73%,
            transparent 73.2%
        ),

        linear-gradient(
            160deg,
            rgba(83, 59, 148, 0.19) 0%,
            rgba(83, 59, 148, 0.19) 20%,
            transparent 20.2%,
            transparent 63%,
            rgba(6, 8, 24, 0.21) 63.2%
        ),

        linear-gradient(
            145deg,
            rgba(47, 33, 91, 0.60) 0%,
            rgba(28, 25, 67, 0.62) 43%,
            rgba(14, 16, 43, 0.67) 72%,
            rgba(6, 8, 23, 0.71) 100%
        ) !important;

    border-color:
        rgba(220, 201, 255, 0.68) !important;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(177, 145, 255, 0.12);
}


/* =========================================================
   TEAM CARD TYPOGRAPHY
========================================================= */

.home-page #teams .team-number {
    font-size: 14px;
    letter-spacing: 2px;
}


.home-page #teams .team-type {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 1.4px;

    color: #b2c2cb;
}


.home-page #teams .team-status {
    font-size: 11px;
    padding: 8px 12px;
}


.home-page #teams .team-card-content h3 {
    font-size: clamp(42px, 4vw, 54px);

    margin-bottom: 26px;
}


.home-page #teams .team-card-content p {
    font-size: 16px;
    line-height: 1.7;

    color: #a8b6bf;
}


.home-page #teams .team-tags span {
    font-size: 10.5px;

    padding: 7px 11px;
}


.home-page #teams .team-link {
    font-size: 13px;
    letter-spacing: 1.4px;
}
/* =========================================================
   HOMEPAGE CRYONIX GATEWAY
========================================================= */

.home-page #home {
    min-height: calc(100vh - 100px);

    padding-bottom: 175px;
}


/* ---------------------------------------------------------
   GATEWAY LAYOUT
--------------------------------------------------------- */

.home-gateway {
    position: absolute;

    left: 60px;
    right: 60px;
    bottom: 34px;

    z-index: 6;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


/* ---------------------------------------------------------
   GATEWAY CARD
--------------------------------------------------------- */

.gateway-card {
    position: relative;

    min-height: 92px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 16px;

    padding: 18px 20px;


    color: #ffffff;

    text-decoration: none;


    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 61%,
            rgba(215, 247, 255, 0.08) 61.2%,
            rgba(215, 247, 255, 0.08) 74%,
            transparent 74.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 25%,
            rgba(104, 177, 220, 0.07) 25.2%,
            rgba(104, 177, 220, 0.07) 46%,
            transparent 46.2%
        ),

        linear-gradient(
            145deg,
            rgba(9, 31, 47, 0.62) 0%,
            rgba(5, 18, 31, 0.67) 55%,
            rgba(2, 8, 17, 0.72) 100%
        );


    border:
        1px solid rgba(143, 220, 241, 0.23);


    clip-path: polygon(
        0 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% 100%,
        15px 100%,
        0 calc(100% - 15px)
    );


    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);


    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0
        rgba(235, 253, 255, 0.08);


    transition:
        transform 0.25s ease,
        background 0.30s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ---------------------------------------------------------
   TOP REFLECTIVE EDGE
--------------------------------------------------------- */

.gateway-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(137, 231, 255, 0.90),
            transparent
        );
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.gateway-number {
    color: #63dcff;

    font-family: "Orbitron", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* ---------------------------------------------------------
   TEXT
--------------------------------------------------------- */

.gateway-card h3 {
    margin: 0 0 5px;

    font-family: "Orbitron", sans-serif;

    font-size: 17px;
    font-weight: 600;

    color: #ffffff;
}


.gateway-card p {
    margin: 0;

    color: #8fa7b4;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.gateway-arrow {
    color: #56d7ff;

    font-size: 20px;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.gateway-card:hover {
    transform:
        translateY(-5px);

    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 60%,
            rgba(221, 250, 255, 0.13) 60.2%,
            rgba(221, 250, 255, 0.13) 74%,
            transparent 74.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(109, 195, 230, 0.10) 24.2%,
            rgba(109, 195, 230, 0.10) 46%,
            transparent 46.2%
        ),

        linear-gradient(
            145deg,
            rgba(11, 40, 56, 0.70) 0%,
            rgba(6, 22, 35, 0.73) 55%,
            rgba(2, 9, 18, 0.77) 100%
        );


    border-color:
        rgba(160, 234, 252, 0.48);


    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.26),
        0 0 20px rgba(86, 215, 255, 0.08);
}


.gateway-card:hover .gateway-arrow {
    transform:
        translateX(4px);

    color: #c7f8ff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .home-page #home {
        padding-bottom: 280px;
    }


    .home-gateway {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .home-page #home {
        padding-bottom: 470px;
    }


    .home-gateway {
        left: 20px;
        right: 20px;

        grid-template-columns: 1fr;
    }

}
/* =========================================================
   HOMEPAGE GATEWAY — REFINED CRYSTAL NAV RAIL
========================================================= */

.home-page #home {
    min-height: 100vh;
    padding-bottom: 150px;
}


/* ---------------------------------------------------------
   GATEWAY RAIL
--------------------------------------------------------- */

.home-gateway {
    position: absolute;

    left: 50%;
    bottom: 28px;

    width: calc(100% - 90px);
    max-width: 1450px;

    transform: translateX(-50%);

    z-index: 6;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 10px;
}


/* ---------------------------------------------------------
   INDIVIDUAL CRYSTAL NAV CARDS
--------------------------------------------------------- */

.gateway-card {
    position: relative;

    min-height: 76px;

    display: grid;

    grid-template-columns:
        34px
        1fr
        auto;

    align-items: center;

    gap: 12px;

    padding: 14px 18px;

    color: #ffffff;
    text-decoration: none;


    background:

        /* upper crystal facet */
        linear-gradient(
            132deg,
            transparent 0%,
            transparent 56%,
            rgba(215, 248, 255, 0.10) 56.2%,
            rgba(215, 248, 255, 0.10) 70%,
            transparent 70.2%
        ),

        /* lower facet */
        linear-gradient(
            38deg,
            transparent 0%,
            transparent 26%,
            rgba(94, 178, 215, 0.08) 26.2%,
            rgba(94, 178, 215, 0.08) 48%,
            transparent 48.2%
        ),

        /* translucent base */
        linear-gradient(
            145deg,
            rgba(8, 34, 49, 0.62) 0%,
            rgba(5, 21, 34, 0.66) 50%,
            rgba(2, 10, 19, 0.72) 100%
        );


    border:
        1px solid rgba(146, 224, 244, 0.30);


    clip-path: polygon(
        0 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% 100%,
        14px 100%,
        0 calc(100% - 14px)
    );


    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);


    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0
        rgba(235, 253, 255, 0.10);


    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.3s ease,
        box-shadow 0.25s ease;
}


/* ---------------------------------------------------------
   LIGHT EDGE
--------------------------------------------------------- */

.gateway-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 45%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(119, 226, 255, 0.95),
            transparent
        );
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.gateway-number {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #65dcff;

    font-family: "Orbitron", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   TEXT
--------------------------------------------------------- */

.gateway-card h3 {
    margin: 0 0 4px;

    font-family: "Orbitron", sans-serif;

    font-size: 16px;
    font-weight: 600;

    color: #ffffff;
}


.gateway-card p {
    margin: 0;

    color: #9aadb8;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.gateway-arrow {
    color: #61dcff;

    font-size: 18px;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.gateway-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(190, 243, 255, 0.58);


    background:

        linear-gradient(
            132deg,
            transparent 0%,
            transparent 55%,
            rgba(225, 251, 255, 0.15) 55.2%,
            rgba(225, 251, 255, 0.15) 70%,
            transparent 70.2%
        ),

        linear-gradient(
            38deg,
            transparent 0%,
            transparent 25%,
            rgba(105, 199, 232, 0.12) 25.2%,
            rgba(105, 199, 232, 0.12) 48%,
            transparent 48.2%
        ),

        linear-gradient(
            145deg,
            rgba(10, 43, 58, 0.69) 0%,
            rgba(6, 25, 39, 0.72) 50%,
            rgba(2, 11, 20, 0.77) 100%
        );


    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.27),
        0 0 18px rgba(86, 215, 255, 0.09);
}


.gateway-card:hover .gateway-arrow {
    transform: translateX(4px);

    color: #d2faff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .home-page #home {
        min-height: auto;
        padding-bottom: 250px;
    }

    .home-gateway {
        width: calc(100% - 60px);

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .home-page #home {
        padding-bottom: 430px;
    }

    .home-gateway {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;
    }

}
/* =========================================================
   HOMEPAGE
   CONNECTED CRYSTAL NAVIGATION PANEL
========================================================= */

.home-page #home {
    min-height: 100vh;

    padding-bottom: 150px;
}


/* =========================================================
   ONE CONNECTED CRYSTAL PANEL
========================================================= */

.home-gateway {
    position: absolute;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    width: calc(100% - 100px);
    max-width: 1380px;

    z-index: 6;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 0;


    background:

        /* large crystalline planes */

        linear-gradient(
            132deg,
            transparent 0%,
            transparent 54%,
            rgba(218, 249, 255, 0.07) 54.2%,
            rgba(218, 249, 255, 0.07) 65%,
            transparent 65.2%
        ),

        linear-gradient(
            38deg,
            transparent 0%,
            transparent 27%,
            rgba(100, 180, 220, 0.06) 27.2%,
            rgba(100, 180, 220, 0.06) 44%,
            transparent 44.2%
        ),

        linear-gradient(
            145deg,
            rgba(7, 30, 45, 0.57) 0%,
            rgba(5, 20, 33, 0.61) 50%,
            rgba(2, 9, 18, 0.67) 100%
        );


    border:
        1px solid rgba(147, 226, 247, 0.30);


    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );


    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);


    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(235, 253, 255, 0.10);
}


/* TOP CRYSTAL LIGHT */

.home-gateway::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(113, 228, 255, 0.95),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   INDIVIDUAL NAV AREAS
========================================================= */

.gateway-card {
    position: relative;

    min-height: 98px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 15px;

    padding: 20px 24px;


    color: #ffffff;

    text-decoration: none;


    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    clip-path: none !important;

    backdrop-filter: none !important;


    transition:
        background 0.25s ease;
}


/* REMOVE OLD CARD DECORATION */

.gateway-card::before {
    display: none !important;
}


/* INTERNAL DIVIDERS */

.gateway-card:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20%;
    right: 0;

    width: 1px;
    height: 60%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(139, 220, 242, 0.28),
            transparent
        );
}


/* =========================================================
   NUMBER
========================================================= */

.gateway-number {
    color: #64dcff;

    font-family: "Orbitron", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   TEXT
========================================================= */

.gateway-card h3 {
    margin: 0 0 5px;

    font-family: "Orbitron", sans-serif;

    font-size: 17px;
    font-weight: 600;

    color: #ffffff;
}


.gateway-card p {
    margin: 0;

    color: #91a6b2;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* =========================================================
   ARROW
========================================================= */

.gateway-arrow {
    color: #5fdcff;

    font-size: 19px;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   HOVER
========================================================= */

.gateway-card:hover {
    transform: none;

    background:

        linear-gradient(
            135deg,
            rgba(116, 222, 247, 0.08),
            rgba(97, 129, 209, 0.04)
        ) !important;
}


.gateway-card:hover .gateway-arrow {
    transform: translateX(5px);

    color: #d3faff;
}


.gateway-card:hover h3 {
    color: #c9f8ff;
}


/* =========================================================
   SLIGHT TEAM COLOUR BIAS
========================================================= */

.gateway-card:first-child:hover {
    background:
        linear-gradient(
            135deg,
            rgba(104, 221, 245, 0.11),
            rgba(47, 120, 164, 0.05)
        ) !important;
}


.gateway-card:nth-child(2):hover {
    background:
        linear-gradient(
            135deg,
            rgba(104, 174, 245, 0.09),
            rgba(86, 101, 190, 0.05)
        ) !important;
}


.gateway-card:nth-child(3):hover {
    background:
        linear-gradient(
            135deg,
            rgba(138, 142, 240, 0.08),
            rgba(92, 117, 190, 0.04)
        ) !important;
}


.gateway-card:nth-child(4):hover {
    background:
        linear-gradient(
            135deg,
            rgba(160, 119, 240, 0.08),
            rgba(100, 88, 178, 0.04)
        ) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .home-page #home {
        padding-bottom: 280px;
    }

    .home-gateway {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gateway-card:nth-child(2)::after {
        display: none;
    }

}


@media (max-width: 600px) {

    .home-page #home {
        padding-bottom: 470px;
    }

    .home-gateway {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;
    }

    .gateway-card::after {
        display: none !important;
    }

    .gateway-card {
        border-bottom:
            1px solid rgba(139, 220, 242, 0.12) !important;
    }

}
/* REMOVE HOMEPAGE GATEWAY ARROWS */

.gateway-arrow {
    display: none !important;
}

.gateway-card {
    grid-template-columns: 34px 1fr !important;
}
/* =========================================================
   HOMEPAGE GATEWAY TEXT SIZING
========================================================= */

.gateway-number {
    font-size: 11px !important;
    min-width: 28px;
}


.gateway-card h3 {
    font-size: 18px !important;
    font-weight: 600;
}


.gateway-card p {
    font-size: 12px !important;
    letter-spacing: 1.1px;
    line-height: 1.3;
}


/* slightly more breathing room */

.gateway-card {
    min-height: 105px !important;

    padding:
        20px 26px !important;

    grid-template-columns:
        32px 1fr !important;

    gap: 14px !important;
}
/* =========================================================
   HOMEPAGE GATEWAY — FINAL TEXT SIZING
========================================================= */

.gateway-number {
    font-size: 12px !important;
    min-width: 30px;
}


.gateway-card h3 {
    font-size: 21px !important;
    font-weight: 600;
    line-height: 1.1;
}


.gateway-card p {
    font-size: 14px !important;
    font-weight: 700;

    letter-spacing: 1px;
    line-height: 1.25;

    color: #a9b8c2;
}


.gateway-card {
    min-height: 112px !important;

    padding:
        22px 28px !important;

    grid-template-columns:
        34px 1fr !important;

    gap: 14px !important;
}
/* =========================================================
   HOMEPAGE GATEWAY — PROPORTION FIX
========================================================= */

.home-page .home-gateway {
    min-height: 0 !important;
}


/* EACH NAV SECTION */

.home-page .home-gateway .gateway-card {
    min-height: 88px !important;

    padding: 16px 26px !important;

    grid-template-columns: 28px 1fr !important;

    gap: 12px !important;

    align-items: center !important;
}


/* NUMBER */

.home-page .home-gateway .gateway-number {
    font-size: 11px !important;

    min-width: 24px !important;

    align-self: center;
}


/* TEXT AREA */

.home-page .home-gateway .gateway-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 6px;
}


/* MAIN LABEL */

.home-page .home-gateway .gateway-card h3 {
    margin: 0 !important;

    font-size: 23px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: 0 !important;
}


/* SECONDARY LABEL */

.home-page .home-gateway .gateway-card p {
    margin: 0 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 1px !important;

    color: #aebcc5 !important;
}
/* =========================================================
   HOMEPAGE GATEWAY — HORIZONTAL TEXT FIX
========================================================= */

.home-page .home-gateway .gateway-card {
    min-height: 88px !important;

    padding: 18px 24px !important;

    grid-template-columns:
        auto 1fr !important;

    gap: 14px !important;

    align-items: center !important;
}


/* NUMBER */

.home-page .home-gateway .gateway-number {
    font-size: 11px !important;
    min-width: 24px !important;
}


/* TITLE + SUBTITLE ON ONE LINE */

.home-page .home-gateway .gateway-card > div {
    display: flex !important;

    flex-direction: row !important;

    align-items: baseline !important;

    gap: 14px !important;

    min-width: 0;
}


/* MAIN TITLE */

.home-page .home-gateway .gateway-card h3 {
    margin: 0 !important;

    font-size: 20px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


/* SECONDARY TEXT */

.home-page .home-gateway .gateway-card p {
    margin: 0 !important;

    font-size: 11px !important;

    line-height: 1 !important;

    letter-spacing: 1px !important;

    white-space: nowrap !important;

    color: #aebcc5 !important;
}
/* =========================================================
   HOMEPAGE GATEWAY — TIGHTER TEXT SPACING
========================================================= */

.home-page .home-gateway .gateway-card {
    grid-template-columns: auto auto !important;

    justify-content: start !important;
    align-items: center !important;

    column-gap: 10px !important;

    padding: 18px 26px !important;
}


/* NUMBER */

.home-page .home-gateway .gateway-number {
    min-width: 0 !important;

    margin: 0 !important;

    font-size: 11px !important;
}


/* TITLE + DESCRIPTION */

.home-page .home-gateway .gateway-card > div {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 10px !important;

    width: auto !important;
}


/* TITLE */

.home-page .home-gateway .gateway-card h3 {
    margin: 0 !important;

    font-size: 21px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


/* DESCRIPTION */

.home-page .home-gateway .gateway-card p {
    margin: 0 !important;

    font-size: 11px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    letter-spacing: 0.8px !important;
}
/* =========================================================
   HOMEPAGE GATEWAY — DIVIDER SPACING FIX
========================================================= */

/* Center each navigation group inside its quarter */
.home-page .home-gateway .gateway-card {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    padding: 18px 24px !important;
}


/* Keep title + subtitle together */
.home-page .home-gateway .gateway-card > div {
    display: flex !important;

    flex-direction: row !important;
    align-items: center !important;

    gap: 10px !important;

    width: auto !important;
}


/* Number stays directly beside the text */
.home-page .home-gateway .gateway-number {
    margin: 0 !important;
    min-width: 0 !important;
}


/* FIX THE VERTICAL DIVIDERS */
.home-page .home-gateway .gateway-card:not(:last-child)::after {
    content: "";

    position: absolute !important;

    top: 25% !important;
    right: 0 !important;

    width: 1px !important;
    height: 50% !important;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(139, 220, 242, 0.24),
            transparent
        ) !important;
}
/* =========================================================
   HOMEPAGE GATEWAY — DIVIDER POSITION FIX
========================================================= */

/* Give each section equal breathing room */
.home-page .home-gateway .gateway-card {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    padding-left: 34px !important;
    padding-right: 34px !important;
}


/* Keep the text group tight */
.home-page .home-gateway .gateway-card > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 10px !important;

    width: auto !important;
}


/* REMOVE THE OLD DIVIDERS COMPLETELY */
.home-page .home-gateway .gateway-card:not(:last-child)::after {
    display: none !important;
}


/* ADD NEW DIVIDERS AT THE ACTUAL COLUMN BOUNDARIES */
.home-page .home-gateway::after {
    content: "";

    position: absolute;

    inset: 18px 0;

    pointer-events: none;

    background:
        linear-gradient(
            to right,

            transparent 0%,
            transparent calc(25% - 0.5px),
            rgba(139, 220, 242, 0.24) calc(25% - 0.5px),
            rgba(139, 220, 242, 0.24) calc(25% + 0.5px),
            transparent calc(25% + 0.5px),

            transparent calc(50% - 0.5px),
            rgba(139, 220, 242, 0.24) calc(50% - 0.5px),
            rgba(139, 220, 242, 0.24) calc(50% + 0.5px),
            transparent calc(50% + 0.5px),

            transparent calc(75% - 0.5px),
            rgba(139, 220, 242, 0.24) calc(75% - 0.5px),
            rgba(139, 220, 242, 0.24) calc(75% + 0.5px),
            transparent calc(75% + 0.5px),

            transparent 100%
        );
}
/* =========================================================
   HOMEPAGE — NEW CONTENT SECTIONS
   CRYONIX CRYSTALLINE SYSTEM
========================================================= */

.home-page #competitive-pulse,
.home-page #crx-glance,
.home-page #roster-spotlight,
.home-page #build-with-crx {
    position: relative;

    width: 100%;

    background: transparent !important;

    border-top:
        1px solid rgba(126, 234, 255, 0.08);
}



/* =========================================================
   COMPETITIVE PULSE
========================================================= */

#competitive-pulse {
    padding:
        100px 60px
        120px;
}


/* HEADING */

.pulse-heading {
    width: 100%;
    max-width: 1380px;

    margin:
        0 auto
        45px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


.pulse-heading > div {
    max-width: 760px;
}


.pulse-heading h2 {
    margin:
        0 0 16px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 54px);

    line-height: 1;

    color: #ffffff;
}


.pulse-intro {
    margin: 0;

    color: #a5b4bd;

    font-size: 16px;

    line-height: 1.65;
}


/* VIEW MATCHES */

.pulse-view {
    flex-shrink: 0;

    color: #66ddff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    text-decoration: none;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(102, 221, 255, 0.28);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.pulse-view:hover {
    color: #d6faff;

    border-color:
        rgba(214, 250, 255, 0.80);
}


/* ---------------------------------------------------------
   PULSE CRYSTAL PANEL
--------------------------------------------------------- */

.pulse-panel {
    position: relative;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));


    background:

        /* bright crystal plane */
        linear-gradient(
            132deg,
            transparent 0%,
            transparent 56%,
            rgba(214, 249, 255, 0.08) 56.2%,
            rgba(214, 249, 255, 0.08) 67%,
            transparent 67.2%
        ),

        /* lower blue face */
        linear-gradient(
            38deg,
            transparent 0%,
            transparent 26%,
            rgba(83, 170, 212, 0.065) 26.2%,
            rgba(83, 170, 212, 0.065) 46%,
            transparent 46.2%
        ),

        /* translucent base */
        linear-gradient(
            145deg,
            rgba(7, 30, 45, 0.58) 0%,
            rgba(4, 19, 32, 0.63) 52%,
            rgba(2, 9, 18, 0.69) 100%
        );


    border:
        1px solid rgba(149, 226, 246, 0.28);


    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );


    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);


    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, 0.24),

        inset 0 1px 0
        rgba(235, 253, 255, 0.10);
}


/* TOP REFLECTION */

.pulse-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 40%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(107, 227, 255, 0.95),
            transparent
        );

    pointer-events: none;
}


/* ITEMS */

.pulse-item {
    position: relative;

    min-height: 175px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        30px
        32px;

    transition:
        background 0.25s ease;
}


.pulse-item:hover {
    background:
        linear-gradient(
            135deg,
            rgba(104, 218, 243, 0.06),
            rgba(88, 108, 188, 0.025)
        );
}


/* VERTICAL DIVIDERS */

.pulse-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 22%;
    right: 0;

    width: 1px;
    height: 56%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(139, 220, 242, 0.25),
            transparent
        );
}


/* NUMBER */

.pulse-number {
    align-self: flex-start;

    margin-top: 5px;

    color: #64ddff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* CONTENT */

.pulse-item-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.pulse-label {
    margin-bottom: 13px;

    color: #8fa5b1;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.pulse-item strong {
    font-family:
        "Orbitron",
        sans-serif;

    font-size: 29px;

    font-weight: 600;

    line-height: 1;

    color: #ffffff;
}


.pulse-meta {
    margin-top: 12px;

    color: #889ba6;

    font-size: 11px;

    font-weight: 600;
}


/* ACTIVE BADGE */

.pulse-status {
    margin-top: 12px;

    padding:
        6px 9px;

    color: #9aefff;

    background:
        rgba(50, 180, 213, 0.10);

    border:
        1px solid
        rgba(100, 220, 250, 0.29);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    box-shadow:
        0 0 14px
        rgba(86, 215, 255, 0.05);
}



/* =========================================================
   CRYONIX AT A GLANCE
========================================================= */

#crx-glance {
    padding:
        105px 60px
        125px;
}


/* HEADING */

.glance-heading {
    width: 100%;
    max-width: 1380px;

    margin:
        0 auto
        55px;

    text-align: center;
}


.glance-heading h2 {
    margin:
        0 0 18px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 54px);

    color: #ffffff;
}


.glance-intro {
    max-width: 700px;

    margin:
        0 auto;

    color: #a0b0ba;

    font-size: 16px;

    line-height: 1.65;
}


/* ---------------------------------------------------------
   STATS GRID
--------------------------------------------------------- */

.glance-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0;
}


/* STAT */

.glance-item {
    position: relative;

    min-height: 200px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        30px
        24px;
}


/* DIVIDERS */

.glance-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 18%;
    right: 0;

    width: 1px;
    height: 64%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(142, 221, 242, 0.25),
            transparent
        );
}


/* SMALL NUMBER */

.glance-number {
    margin-bottom: 20px;

    color: #62ddff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* BIG VALUE */

.glance-item strong {
    margin-bottom: 14px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 54px);

    font-weight: 600;

    line-height: 1;

    color: #ffffff;

    text-shadow:
        0 0 22px
        rgba(101, 218, 255, 0.08);
}


/* LABEL */

.glance-label {
    color: #78def9;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* DETAIL */

.glance-item p {
    margin:
        10px 0 0;

    color: #8499a4;

    font-size: 12px;

    font-weight: 600;
}



/* =========================================================
   ROSTER SPOTLIGHT
========================================================= */

#roster-spotlight {
    padding:
        105px 60px
        130px;
}


/* HEADING */

.spotlight-heading {
    width: 100%;
    max-width: 1380px;

    margin:
        0 auto
        50px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


.spotlight-heading > div {
    max-width: 800px;
}


.spotlight-heading h2 {
    margin:
        0 0 18px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 54px);

    line-height: 1.1;

    color: #ffffff;
}


.spotlight-intro {
    margin: 0;

    color: #a0b0ba;

    font-size: 16px;

    line-height: 1.65;
}


/* VIEW ALL TEAMS */

.spotlight-view {
    flex-shrink: 0;

    color: #67ddff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-decoration: none;

    text-transform: uppercase;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(103, 221, 255, 0.28);

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.spotlight-view:hover {
    color: #d4faff;

    border-color:
        rgba(212, 250, 255, 0.75);
}


/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.spotlight-grid {
    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px;
}


/* ---------------------------------------------------------
   CARD BASE
--------------------------------------------------------- */

.spotlight-card {
    position: relative;

    min-height: 390px;

    padding:
        34px
        36px;

    overflow: hidden;

    display: flex;

    flex-direction: column;


    border:
        1px solid
        rgba(147, 226, 247, 0.25);


    clip-path: polygon(
        0 0,
        calc(100% - 26px) 0,
        100% 26px,
        100% 100%,
        26px 100%,
        0 calc(100% - 26px)
    );


    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);


    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease;
}


.spotlight-card:hover {
    transform:
        translateY(-6px);
}


/* ---------------------------------------------------------
   ZENITH SPOTLIGHT
--------------------------------------------------------- */

.spotlight-zenith {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(217, 251, 255, 0.11) 56.2%,
            rgba(217, 251, 255, 0.11) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(87, 207, 236, 0.08) 24.2%,
            rgba(87, 207, 236, 0.08) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(7, 43, 57, 0.56),
            rgba(4, 25, 39, 0.61) 52%,
            rgba(2, 9, 18, 0.69)
        );


    border-color:
        rgba(178, 240, 255, 0.34);
}


.spotlight-zenith:hover {
    border-color:
        rgba(209, 249, 255, 0.66);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 24px
        rgba(103, 222, 248, 0.09);
}


/* ---------------------------------------------------------
   NOVA SPOTLIGHT
--------------------------------------------------------- */

.spotlight-nova {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(224, 208, 255, 0.12) 56.2%,
            rgba(224, 208, 255, 0.12) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(151, 108, 241, 0.09) 24.2%,
            rgba(151, 108, 241, 0.09) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(41, 29, 81, 0.55),
            rgba(23, 21, 58, 0.60) 52%,
            rgba(5, 8, 22, 0.69)
        );


    border-color:
        rgba(200, 178, 255, 0.35);
}


.spotlight-nova:hover {
    border-color:
        rgba(219, 200, 255, 0.66);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 24px
        rgba(167, 135, 255, 0.10);
}


/* TEAM EMBLEM */

.spotlight-logo {
    position: absolute;

    top: 50%;
    right: -55px;

    width: 390px;

    height: auto;

    transform:
        translateY(-50%);

    opacity: 0.09;

    pointer-events: none;

    object-fit: contain;

    z-index: 0;

    transition:
        opacity 0.35s ease,
        transform 0.40s ease;
}


.spotlight-card:hover .spotlight-logo {
    opacity: 0.17;

    transform:
        translateY(-50%)
        scale(1.05);
}


/* TOP */

.spotlight-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;

    color: #8da4b0;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.spotlight-top span:first-child {
    color: #64dcff;

    font-family:
        "Orbitron",
        sans-serif;
}


/* CONTENT */

.spotlight-content {
    position: relative;

    z-index: 2;

    max-width: 70%;

    margin-top: auto;
}


.spotlight-code {
    margin:
        0 0 12px;

    color: #65ddff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.spotlight-nova .spotlight-code {
    color: #b9a8ff;
}


.spotlight-content h3 {
    margin:
        0 0 22px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 52px);

    color: #ffffff;
}


.spotlight-content > p:not(.spotlight-code) {
    margin:
        0 0 26px;

    color: #a0afb8;

    font-size: 15px;

    line-height: 1.7;
}


/* ROSTER LINK */

.spotlight-content a {
    display: inline-block;

    color: #63dcff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.spotlight-nova .spotlight-content a {
    color: #b9a8ff;
}


.spotlight-content a:hover {
    color: #ffffff;
}



/* =========================================================
   BUILD WITH CRYONIX
========================================================= */

#build-with-crx {
    padding:
        110px 60px
        130px;
}


/* PANEL */

.build-panel {
    position: relative;

    width: 100%;
    max-width: 1380px;

    min-height: 280px;

    margin: 0 auto;

    padding:
        45px
        48px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 45px;


    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 58%,
            rgba(216, 249, 255, 0.08) 58.2%,
            rgba(216, 249, 255, 0.08) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            38deg,
            transparent 0%,
            transparent 25%,
            rgba(112, 177, 220, 0.06) 25.2%,
            rgba(112, 177, 220, 0.06) 44%,
            transparent 44.2%
        ),

        linear-gradient(
            145deg,
            rgba(8, 32, 47, 0.59),
            rgba(4, 18, 31, 0.64) 52%,
            rgba(2, 9, 18, 0.70)
        );


    border:
        1px solid
        rgba(148, 226, 246, 0.28);


    clip-path: polygon(
        0 0,
        calc(100% - 28px) 0,
        100% 28px,
        100% 100%,
        28px 100%,
        0 calc(100% - 28px)
    );


    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);


    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.27),

        inset 0 1px 0
        rgba(235, 253, 255, 0.10);
}


/* TOP LIGHT */

.build-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(106, 227, 255, 0.95),
            transparent
        );
}


/* CRX CODE */

.build-code {
    color:
        rgba(104, 222, 249, 0.30);

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(30px, 4vw, 56px);

    font-weight: 700;

    letter-spacing: 4px;

    white-space: nowrap;
}


/* CONTENT */

.build-content {
    max-width: 670px;
}


.build-content h2 {
    margin:
        0 0 17px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(34px, 4vw, 50px);

    color: #ffffff;
}


.build-content > p:not(.section-label) {
    margin: 0;

    color: #a1b0b9;

    font-size: 15px;

    line-height: 1.7;
}


/* CONTACT */

.build-contact {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.build-contact > span {
    color: #6c8490;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.build-contact a {
    color: #67ddff;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(103, 221, 255, 0.25);

    padding-bottom: 5px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.build-contact a:hover {
    color: #dcfbff;

    border-color:
        rgba(220, 251, 255, 0.70);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    #competitive-pulse,
    #crx-glance,
    #roster-spotlight,
    #build-with-crx {
        padding-left: 30px;
        padding-right: 30px;
    }


    .pulse-panel,
    .glance-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .pulse-item:nth-child(2)::after,
    .glance-item:nth-child(2)::after {
        display: none;
    }


    .pulse-item:nth-child(-n + 2),
    .glance-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(139, 220, 242, 0.10);
    }


    .spotlight-grid {
        grid-template-columns:
            1fr;
    }


    .build-panel {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .build-code {
        font-size: 34px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #competitive-pulse,
    #crx-glance,
    #roster-spotlight,
    #build-with-crx {
        padding:
            75px 20px
            90px;
    }


    .pulse-heading,
    .spotlight-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    .pulse-panel,
    .glance-grid {
        grid-template-columns:
            1fr;
    }


    .pulse-item,
    .glance-item {
        min-height: 145px;
    }


    .pulse-item::after,
    .glance-item::after {
        display: none !important;
    }


    .pulse-item:not(:last-child),
    .glance-item:not(:last-child) {
        border-bottom:
            1px solid
            rgba(139, 220, 242, 0.10);
    }


    .spotlight-card {
        min-height: 420px;

        padding:
            28px
            24px;
    }


    .spotlight-content {
        max-width: 100%;
    }


    .spotlight-logo {
        width: 300px;

        right: -90px;
    }


    .build-panel {
        padding:
            34px
            28px;
    }


    .build-contact a {
        font-size: 11px;

        word-break: break-word;
    }

}
/* =========================================================
   CRYONIX — GLOBAL TYPOGRAPHY / READABILITY PASS
========================================================= */


/* =========================================================
   BASE TEXT
========================================================= */

body {
    font-size: 17px;
}


/* Main paragraph colour across the site */

p {
    color: #b8c5cd;
}


/* =========================================================
   MAIN HEADINGS
========================================================= */

h1,
h2,
h3,
h4 {
    color: #ffffff;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.40);
}


/* =========================================================
   SECTION LABELS
========================================================= */

.section-label,
.hero-label,
.pulse-label,
.glance-label,
.spotlight-code,
.history-label,
.roster-card-team {
    color: #72e2ff !important;

    font-size: 11px !important;

    letter-spacing: 2px;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.65);
}


/* =========================================================
   HEADER
========================================================= */

header nav a {
    font-size: 16px !important;

    font-weight: 500;

    color: #ffffff !important;
}


.header-brand-name {
    font-size: 30px !important;
}


/* =========================================================
   HERO
========================================================= */

.hero-content h2 {
    font-size:
        clamp(54px, 5vw, 72px) !important;
}


.hero-content > p:not(.hero-label) {
    font-size: 18px !important;

    line-height: 1.65 !important;

    color: #c2ccd2 !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.68);
}


.hero-label {
    font-size: 12px !important;
}


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

.home-gateway .gateway-number {
    font-size: 11px !important;

    color: #75e6ff !important;
}


.home-gateway .gateway-card h3 {
    font-size: 22px !important;

    color: #ffffff !important;
}


.home-gateway .gateway-card p {
    font-size: 11px !important;

    color: #bdc8cf !important;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.pulse-heading h2,
.glance-heading h2,
.spotlight-heading h2,
.build-content h2,
.teams-heading h2,
.matches-heading h2,
.about-heading h2,
.history-heading h2 {
    color: #ffffff !important;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.58),
        0 0 18px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   SECTION INTRO TEXT
========================================================= */

.pulse-intro,
.glance-intro,
.spotlight-intro,
.teams-intro,
.matches-intro,
.about-intro,
.history-intro {
    font-size: 17px !important;

    line-height: 1.7 !important;

    color: #bdc9d0 !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.72);
}


/* =========================================================
   COMPETITIVE PULSE
========================================================= */

.pulse-label {
    font-size: 10px !important;

    color: #a7bbc6 !important;
}


.pulse-item strong {
    font-size: 32px !important;

    color: #ffffff !important;
}


.pulse-meta {
    font-size: 12px !important;

    color: #a9bac3 !important;
}


.pulse-status {
    font-size: 10px !important;
}


.pulse-number {
    font-size: 11px !important;

    color: #71e3ff !important;
}


.pulse-view {
    font-size: 12px !important;

    color: #78e5ff !important;
}


/* =========================================================
   AT A GLANCE
========================================================= */

.glance-number {
    font-size: 10px !important;

    color: #77e5ff !important;
}


.glance-item strong {
    font-size:
        clamp(44px, 4vw, 60px) !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.65);
}


.glance-label {
    font-size: 10px !important;

    color: #7ce6ff !important;
}


.glance-item p {
    font-size: 13px !important;

    color: #bbc7ce !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.65);
}


/* =========================================================
   ROSTER SPOTLIGHT
========================================================= */

.spotlight-top {
    font-size: 11px !important;

    color: #b3c2ca !important;
}


.spotlight-content h3 {
    font-size:
        clamp(42px, 4vw, 56px) !important;
}


.spotlight-content > p:not(.spotlight-code) {
    font-size: 16px !important;

    line-height: 1.75 !important;

    color: #bbc7ce !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.55);
}


.spotlight-content a,
.spotlight-view {
    font-size: 12px !important;
}


/* =========================================================
   BUILD WITH CRYONIX
========================================================= */

.build-content > p:not(.section-label) {
    font-size: 16px !important;

    line-height: 1.75 !important;

    color: #bec9d0 !important;
}


.build-contact > span {
    font-size: 10px !important;

    color: #9caeb8 !important;
}


.build-contact a {
    font-size: 14px !important;

    color: #72e3ff !important;
}


/* =========================================================
   TEAM / MATCH / ABOUT / HISTORY CARDS
========================================================= */

.team-card-content p,
.match-card p,
.about-story p:not(.about-number),
.about-value p,
.history-content p:not(.history-label),
.roster-card p {
    color: #b5c2ca !important;
}


.team-card-content p,
.about-story p:not(.about-number),
.history-content p:not(.history-label) {
    font-size: 16px !important;

    line-height: 1.75 !important;
}


.about-value p {
    font-size: 15px !important;
}


.team-type,
.team-tags span,
.match-event,
.match-date,
.match-footer span,
.player-card-agent-pool,
.player-card-quote {
    color: #a8bac4 !important;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    font-size: 15px;
}


.footer-description {
    font-size: 15px !important;

    line-height: 1.7 !important;

    color: #aebec7 !important;
}


.footer-column a,
.footer-column span {
    font-size: 14px !important;

    color: #aebec7 !important;
}


.footer-heading {
    font-size: 11px !important;

    color: #72e2ff !important;
}


.footer-tagline {
    color: #72e2ff !important;

    font-size: 13px !important;
}


/* =========================================================
   EXTRA READABILITY OVER BRIGHT BACKGROUND AREAS
========================================================= */

.glance-heading,
.spotlight-heading,
.pulse-heading {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.62);
}
/* =========================================================
   CRYONIX — FINAL TEXT READABILITY BOOST
========================================================= */


/* ---------------------------------------------------------
   GENERAL BODY COPY
--------------------------------------------------------- */

.home-page main p {
    color: #c6d1d7;
}


/* ---------------------------------------------------------
   SECTION INTRO TEXT
--------------------------------------------------------- */

.pulse-intro,
.glance-intro,
.spotlight-intro,
.build-content > p:not(.section-label) {
    font-size: 18px !important;
    line-height: 1.7 !important;

    color: #d0d8dd !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(0, 0, 0, 0.35);
}


/* ---------------------------------------------------------
   SECTION LABELS
--------------------------------------------------------- */

.section-label {
    font-size: 12px !important;

    font-weight: 700 !important;

    color: #79e7ff !important;

    letter-spacing: 2.3px !important;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.85);
}


/* ---------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------- */

.pulse-heading h2,
.glance-heading h2,
.spotlight-heading h2,
.build-content h2 {
    font-size:
        clamp(46px, 4.5vw, 62px) !important;

    color: #ffffff !important;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.65),
        0 0 18px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   COMPETITIVE PULSE
========================================================= */

.pulse-number {
    font-size: 12px !important;
}


.pulse-label {
    font-size: 11px !important;

    color: #b7c7cf !important;
}


.pulse-item strong {
    font-size: 35px !important;
}


.pulse-meta {
    font-size: 13px !important;

    color: #bac7ce !important;
}


.pulse-status {
    font-size: 11px !important;

    padding: 7px 10px !important;
}


.pulse-view {
    font-size: 13px !important;
}


/* =========================================================
   AT A GLANCE
========================================================= */

.glance-number {
    font-size: 11px !important;
}


.glance-item strong {
    font-size:
        clamp(48px, 4.5vw, 64px) !important;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.72);
}


.glance-label {
    font-size: 11px !important;

    color: #80e8ff !important;
}


.glance-item p {
    font-size: 14px !important;

    color: #d0d8dd !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.78);
}


/* Give the centre heading extra protection
   against the bright crystal explosion */

.glance-heading {
    position: relative;
    z-index: 2;
}


.glance-heading h2,
.glance-heading .glance-intro,
.glance-heading .section-label {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ROSTER SPOTLIGHT
========================================================= */

.spotlight-top {
    font-size: 12px !important;

    color: #c2cdd3 !important;
}


.spotlight-code {
    font-size: 11px !important;
}


.spotlight-content h3 {
    font-size:
        clamp(46px, 4.5vw, 60px) !important;
}


.spotlight-content > p:not(.spotlight-code) {
    font-size: 17px !important;

    color: #cad4da !important;

    line-height: 1.75 !important;
}


.spotlight-content a,
.spotlight-view {
    font-size: 13px !important;
}


/* =========================================================
   BUILD WITH CRYONIX
========================================================= */

.build-content h2 {
    font-size:
        clamp(44px, 4.5vw, 60px) !important;
}


.build-contact > span {
    font-size: 11px !important;
}


.build-contact a {
    font-size: 15px !important;
}


/* =========================================================
   HOMEPAGE NAVIGATION RAIL
========================================================= */

.home-gateway .gateway-number {
    font-size: 12px !important;
}


.home-gateway .gateway-card h3 {
    font-size: 23px !important;
}


.home-gateway .gateway-card p {
    font-size: 12px !important;

    color: #c5d0d6 !important;
}


/* =========================================================
   HEADER
========================================================= */

header nav a {
    font-size: 17px !important;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-logo {
    font-size: 27px !important;
}


.footer-tagline {
    font-size: 14px !important;
}


.footer-description {
    font-size: 16px !important;
}


.footer-column a,
.footer-column span {
    font-size: 15px !important;
}
/* AT A GLANCE — TEXT READABILITY ONLY */

.glance-intro {
    position: relative;
    z-index: 2;

    padding: 8px 18px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(3, 9, 18, 0.42) 0%,
            rgba(3, 9, 18, 0.20) 55%,
            transparent 78%
        );

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.50);
}
/* =========================================================
   HOMEPAGE HERO → COMPETITIVE PULSE GAP FIX
========================================================= */

.home-page #home {
    min-height: calc(100vh - 95px) !important;

    padding-bottom: 40px !important;

    box-sizing: border-box;
}


/* Keep the navigation rail near the bottom of the hero */

.home-page .home-gateway {
    bottom: 28px !important;
}


/* Bring Competitive Pulse closer to the hero */

.home-page #competitive-pulse {
    padding-top: 70px !important;
}
/* =========================================================
   HOMEPAGE — MAKE SCROLLING FEEL INTENTIONAL
========================================================= */

/* Hero no longer consumes the entire screen */

.home-page #home {
    min-height: 88vh !important;

    padding-bottom: 105px !important;
}


/* Move navigation slightly upward */

.home-page .home-gateway {
    bottom: 62px !important;
}


/* =========================================================
   EXPLORE CRX SCROLL CUE
========================================================= */

.home-scroll-cue {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    z-index: 7;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #83e8ff;

    font-family: "Orbitron", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0.82;
}


.scroll-cue-arrow {
    font-size: 16px;

    animation:
        crxScrollCue 1.8s ease-in-out infinite;
}


@keyframes crxScrollCue {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.55;
    }

    50% {
        transform: translateY(5px);
        opacity: 1;
    }

}


/* Competitive Pulse begins closer to the hero */

.home-page #competitive-pulse {
    padding-top: 65px !important;
}
/* =========================================================
   HOMEPAGE HERO — AFTER REMOVING DIRECTORY RAIL
========================================================= */

.home-page #home {
    min-height: 82vh !important;
    padding-bottom: 80px !important;
}


/* CENTRE THE EXPLORE CUE */

.home-page .home-scroll-cue {
    left: 50% !important;
    right: auto !important;
    bottom: 26px !important;

    transform: translateX(-50%) !important;
}


/* BRING THE NEXT SECTION CLOSER */

.home-page #competitive-pulse {
    padding-top: 65px !important;
}
/* =========================================================
   EXPLORE CRX — LARGER + LOWER
========================================================= */

.home-page #home .home-scroll-cue {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    bottom: 18px !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    padding: 10px 16px;

    color: #82e9ff !important;

    font-family: "Orbitron", sans-serif;

    font-size: 14px !important;
    font-weight: 700 !important;

    letter-spacing: 2.5px !important;

    text-transform: uppercase;

    white-space: nowrap;

    z-index: 10;

    text-shadow:
        0 0 8px rgba(99, 220, 255, 0.40),
        0 2px 5px rgba(0, 0, 0, 0.85);
}


/* ARROW */

.home-page #home .scroll-cue-arrow {
    font-size: 23px !important;

    color: #a7f1ff !important;

    line-height: 1;

    animation:
        crxScrollCue 1.6s ease-in-out infinite;
}


@keyframes crxScrollCue {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.65;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }

}


/* GIVE THE HERO ENOUGH ROOM FOR IT */

.home-page #home {
    min-height: 88vh !important;
    padding-bottom: 95px !important;
}


/* DON'T RECREATE THE HUGE GAP BELOW */

.home-page #competitive-pulse {
    padding-top: 50px !important;
}
/* =========================================================
   EXPLORE CRX — HIGH VISIBILITY SCROLL CUE
========================================================= */

.home-page #home .home-scroll-cue {
    position: absolute !important;

    left: 50% !important;
    bottom: 28px !important;

    transform: translateX(-50%) !important;

    z-index: 20 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    min-width: 190px;

    padding: 12px 22px 10px !important;

    color: #c9f8ff !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 36, 52, 0.78),
            rgba(3, 14, 25, 0.84)
        ) !important;

    border:
        1px solid rgba(126, 234, 255, 0.55) !important;

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    box-shadow:
        0 0 18px rgba(86, 215, 255, 0.14),
        0 8px 28px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(220, 250, 255, 0.12);

    font-family: "Orbitron", sans-serif;

    font-size: 16px !important;
    font-weight: 700 !important;

    letter-spacing: 2.7px !important;

    white-space: nowrap;

    text-shadow:
        0 0 10px rgba(105, 228, 255, 0.45);
}


/* TOP LIGHT CATCH */

.home-page #home .home-scroll-cue::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18%;

    width: 64%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(196, 248, 255, 0.95),
            transparent
        );
}


/* ARROW */

.home-page #home .scroll-cue-arrow {
    display: block !important;

    color: #72e6ff !important;

    font-size: 25px !important;
    line-height: 0.8 !important;

    text-shadow:
        0 0 10px rgba(86, 215, 255, 0.60);

    animation:
        crxExploreArrow 1.5s ease-in-out infinite !important;
}


@keyframes crxExploreArrow {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.65;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }

}
/* =========================================================
   CRYONIX ESPORTS
   FOUNDER PAGE — AZURACRPTX
========================================================= */


/* =========================================================
   GENERAL
========================================================= */

.founder-page main {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.founder-page main > section {
    position: relative;
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;

    background: transparent !important;

    border-top:
        1px solid rgba(126, 234, 255, 0.08);
}

.founder-page .section-label {
    margin: 0 0 12px;

    color: #79e7ff !important;

    font-family: "Orbitron", sans-serif;

    font-size: 12px !important;
    font-weight: 700;

    letter-spacing: 2.4px;
    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(76, 220, 255, 0.35);
}


/* =========================================================
   HERO
========================================================= */

.founder-page #founder-hero {
    min-height: 800px;

    display: flex;
    align-items: center;

    padding-top: 100px;
    padding-bottom: 100px;

    border-top: none;
}

.founder-page #founder-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: -180px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(61, 193, 255, 0.15) 0%,
            rgba(46, 93, 196, 0.07) 42%,
            transparent 72%
        );

    filter: blur(12px);

    pointer-events: none;
}


.founder-page .founder-hero-layout {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(360px, 520px)
        minmax(0, 1fr);

    align-items: center;

    gap: 90px;
}


/* =========================================================
   FOUNDER PROFILE IMAGE
========================================================= */

.founder-page .founder-profile-visual {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.founder-page .founder-profile-image {
    position: relative;

    width: min(100%, 500px);
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(135, 239, 255, 0.20),
            rgba(15, 55, 91, 0.38),
            rgba(74, 91, 202, 0.14)
        );

    border:
        1px solid rgba(132, 232, 255, 0.55);

    box-shadow:
        0 0 30px rgba(70, 202, 255, 0.16),
        0 0 80px rgba(33, 121, 255, 0.08),
        0 25px 70px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.founder-page .founder-profile-image::before {
    content: "";

    position: absolute;

    inset: -18px;

    border-radius: 50%;

    border:
        1px solid rgba(111, 223, 255, 0.13);

    pointer-events: none;
}

.founder-page .founder-profile-image::after {
    content: "";

    position: absolute;

    inset: 6%;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    pointer-events: none;
}

.founder-page .founder-profile-emblem {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    filter:
        saturate(1.05)
        contrast(1.03);

    box-shadow:
        0 0 28px rgba(71, 203, 255, 0.14);
}


/* =========================================================
   PROFILE ID STRIP
========================================================= */

.founder-page .founder-profile-id {
    position: relative;

    width: 78%;

    margin-top: -18px;

    padding: 13px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background:
        linear-gradient(
            110deg,
            rgba(6, 26, 42, 0.94),
            rgba(14, 48, 72, 0.88),
            rgba(8, 26, 44, 0.94)
        );

    border:
        1px solid rgba(112, 228, 255, 0.38);

    clip-path:
        polygon(
            12px 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            12px 100%,
            0 calc(100% - 12px),
            0 12px
        );

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.38);

    z-index: 4;
}

.founder-page .founder-profile-id span {
    color: #caeff7;

    font-family: "Orbitron", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.founder-page .founder-profile-id span:last-child {
    color: #71e7ff;
}


/* =========================================================
   HERO TEXT
========================================================= */

.founder-page .founder-hero-content {
    position: relative;

    max-width: 760px;
}

.founder-page .founder-hero-content h1 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family: "Orbitron", sans-serif;

    font-size:
        clamp(58px, 6vw, 92px);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -3px;

    text-shadow:
        0 4px 12px rgba(0, 0, 0, 0.65),
        0 0 30px rgba(73, 206, 255, 0.08);
}

.founder-page .founder-title {
    margin: 0 0 24px;

    color: #8be9ff !important;

    font-family: "Orbitron", sans-serif;

    font-size: 17px !important;
    font-weight: 600;

    letter-spacing: 1.2px;
}

.founder-page .founder-hero-intro {
    max-width: 680px;

    margin: 0;

    color: #d4dee3 !important;

    font-size: 19px !important;
    line-height: 1.75 !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.9);
}


/* =========================================================
   HERO TAGS
========================================================= */

.founder-page .founder-hero-tags {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.founder-page .founder-hero-tags span {
    padding: 9px 14px;

    background:
        linear-gradient(
            130deg,
            rgba(41, 137, 181, 0.17),
            rgba(5, 23, 37, 0.60)
        );

    border:
        1px solid rgba(117, 224, 255, 0.24);

    color: #bceff9;

    font-family: "Orbitron", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.6px;

    clip-path:
        polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.founder-page .founder-section-label {
    width: 100%;
    max-width: 1450px;

    margin:
        0
        auto
        50px;

    display: flex;
    align-items: center;

    gap: 15px;
}

.founder-page .founder-section-label span {
    color: #73e6ff;

    font-family: "Orbitron", sans-serif;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;
}

.founder-page .founder-section-label p {
    margin: 0;

    color: #91a9b4 !important;

    font-family: "Orbitron", sans-serif;

    font-size: 11px !important;
    font-weight: 700;

    letter-spacing: 2.4px;
}

.founder-page .founder-section-label::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(108, 225, 255, 0.23),
            transparent
        );
}


/* =========================================================
   SHARED SECTION HEADINGS
========================================================= */

.founder-page .founder-about-heading h2,
.founder-page .founder-competitive-heading h2,
.founder-page .founder-responsibility-heading h2,
.founder-page .founder-culture-heading h2,
.founder-page .founder-vision-heading h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Orbitron", sans-serif;

    font-size:
        clamp(42px, 4vw, 62px);

    font-weight: 650;

    line-height: 1.08;

    letter-spacing: -2px;
}


/* =========================================================
   ABOUT
========================================================= */

.founder-page #founder-about {
    padding-top: 110px;
    padding-bottom: 120px;
}

.founder-page .founder-about-layout {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.35fr);

    gap: 100px;
}


/* =========================================================
   COMPETITIVE
========================================================= */

.founder-page #founder-competitive {
    padding-top: 110px;
    padding-bottom: 120px;
}

.founder-page .founder-competitive-layout {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;
}

.founder-page .founder-competitive-heading {
    max-width: 850px;

    margin-bottom: 55px;
}

.founder-page .founder-competitive-heading > p:last-child {
    max-width: 700px;

    margin-top: 20px;

    color: #d0dade !important;

    font-size: 18px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   PLAYER PROFILE STRIP
========================================================= */

.founder-page .founder-player-profile {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.15fr;

    margin-bottom: 55px;

    background:
        linear-gradient(
            125deg,
            rgba(8, 34, 54, 0.78),
            rgba(5, 18, 31, 0.70),
            rgba(29, 40, 94, 0.38)
        );

    border:
        1px solid rgba(113, 227, 255, 0.24);

    clip-path:
        polygon(
            18px 0,
            100% 0,
            100% calc(100% - 18px),
            calc(100% - 18px) 100%,
            0 100%,
            0 18px
        );

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    overflow: hidden;
}

.founder-page .founder-player-profile::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 40%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            rgba(112, 226, 255, 0.07),
            transparent 65%
        );

    pointer-events: none;
}

.founder-page .founder-player-profile > div {
    position: relative;

    min-height: 170px;

    padding: 35px 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.founder-page .founder-player-profile > div:not(:last-child) {
    border-right:
        1px solid rgba(111, 220, 248, 0.12);
}

.founder-page .founder-player-profile span {
    margin-bottom: 10px;

    color: #77e5ff;

    font-family: "Orbitron", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.founder-page .founder-player-profile strong {
    color: #ffffff;

    font-family: "Orbitron", sans-serif;

    font-size: 21px;
    font-weight: 600;

    line-height: 1.35;
}

.founder-page .founder-player-profile p {
    margin: 9px 0 0;

    color: #bdccd3 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   ROLE
========================================================= */

.founder-page #founder-responsibilities {
    padding-top: 110px;
    padding-bottom: 120px;
}

.founder-page .founder-responsibility-heading {
    width: 100%;
    max-width: 1450px;

    margin:
        0
        auto
        55px;
}

.founder-page .founder-responsibility-heading > p:last-child {
    max-width: 760px;

    margin-top: 18px;

    color: #d0dade !important;

    font-size: 18px !important;
    line-height: 1.7 !important;
}

.founder-page .founder-responsibility-grid {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}

.founder-page .founder-responsibility-grid article {
    position: relative;

    min-height: 260px;

    padding: 34px 32px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(10, 42, 64, 0.62),
            rgba(5, 19, 31, 0.66),
            rgba(9, 30, 49, 0.55)
        );

    border:
        1px solid rgba(120, 225, 252, 0.14);

    clip-path:
        polygon(
            13px 0,
            100% 0,
            100% calc(100% - 13px),
            calc(100% - 13px) 100%,
            0 100%,
            0 13px
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.founder-page .founder-responsibility-grid article::after {
    content: "";

    position: absolute;

    right: -30px;
    bottom: -50px;

    width: 180px;
    height: 180px;

    transform: rotate(35deg);

    background:
        linear-gradient(
            135deg,
            rgba(93, 220, 255, 0.07),
            transparent 65%
        );

    pointer-events: none;
}

.founder-page .founder-responsibility-grid article:hover {
    transform: translateY(-4px);

    border-color:
        rgba(118, 229, 255, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(12, 51, 78, 0.68),
            rgba(6, 22, 36, 0.72),
            rgba(12, 37, 59, 0.60)
        );
}

.founder-page .founder-responsibility-grid article > span {
    display: block;

    margin-bottom: 38px;

    color: #70e2fb;

    font-family: "Orbitron", sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.6px;
}

.founder-page .founder-responsibility-grid h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family: "Orbitron", sans-serif;

    font-size: 21px;
    font-weight: 600;

    line-height: 1.25;
}

.founder-page .founder-responsibility-grid p {
    margin: 0;

    color: #bdcbd2 !important;

    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   CULTURE
========================================================= */

.founder-page #founder-culture {
    padding-top: 110px;
    padding-bottom: 120px;
}

.founder-page .founder-culture-layout {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(0, 1.35fr);

    gap: 100px;
}


/* =========================================================
   VISION
========================================================= */

.founder-page #founder-vision {
    padding-top: 110px;
    padding-bottom: 120px;
}

.founder-page .founder-vision-layout {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.35fr);

    gap: 100px;
}


/* =========================================================
   ALL LONG TEXT CARDS
========================================================= */

.founder-page .founder-about-copy,
.founder-page .founder-competitive-copy,
.founder-page .founder-culture-copy,
.founder-page .founder-vision-copy {
    position: relative;

    width: 100%;

    padding:
        40px
        45px !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 31, 50, 0.72),
            rgba(4, 16, 29, 0.68),
            rgba(11, 38, 60, 0.55)
        ) !important;

    border:
        1px solid rgba(118, 222, 250, 0.18) !important;

    clip-path:
        polygon(
            20px 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%,
            0 20px
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(220, 250, 255, 0.05);
}

.founder-page .founder-about-copy::before,
.founder-page .founder-competitive-copy::before,
.founder-page .founder-culture-copy::before,
.founder-page .founder-vision-copy::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 190px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(151, 242, 255, 0.9),
            rgba(86, 209, 255, 0.30),
            transparent
        );

    pointer-events: none;
}

.founder-page .founder-about-copy p,
.founder-page .founder-competitive-copy p,
.founder-page .founder-culture-copy p,
.founder-page .founder-vision-copy p {
    margin:
        0
        0
        22px;

    color: #d2dce1 !important;

    font-size: 17px !important;
    line-height: 1.82 !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.72);
}

.founder-page .founder-about-copy p:last-child,
.founder-page .founder-competitive-copy p:last-child,
.founder-page .founder-culture-copy p:last-child,
.founder-page .founder-vision-copy p:last-child {
    margin-bottom: 0;
}


/* COMPETITIVE CARD SITS TO THE RIGHT */

.founder-page .founder-competitive-copy {
    max-width: 970px;

    margin:
        55px
        0
        0
        auto;
}


/* =========================================================
   FOUNDER STATEMENT
========================================================= */

.founder-page #founder-statement {
    padding-top: 110px;
    padding-bottom: 110px;
}

.founder-page .founder-statement-panel {
    position: relative;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    padding:
        70px
        80px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(10, 40, 61, 0.82),
            rgba(4, 17, 29, 0.82),
            rgba(17, 37, 72, 0.58)
        );

    border:
        1px solid rgba(115, 229, 255, 0.27);

    clip-path:
        polygon(
            28px 0,
            100% 0,
            100% calc(100% - 28px),
            calc(100% - 28px) 100%,
            0 100%,
            0 28px
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.33);
}

.founder-page .founder-statement-panel::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(79, 213, 255, 0.11),
            transparent 68%
        );

    pointer-events: none;
}

.founder-page .founder-statement-code {
    position: relative;
    z-index: 2;

    color: #74e5ff;

    font-family: "Orbitron", sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.2px;
}

.founder-page .founder-statement-panel blockquote {
    position: relative;
    z-index: 2;

    max-width: 950px;

    margin:
        25px
        0
        45px;

    color: #ffffff;

    font-family: "Orbitron", sans-serif;

    font-size:
        clamp(42px, 5vw, 68px);

    font-weight: 650;

    line-height: 1.1;

    letter-spacing: -2px;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.65);
}

.founder-page .founder-statement-copy {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.founder-page .founder-statement-copy p {
    margin:
        0
        0
        20px;

    color: #d2dce1 !important;

    font-size: 17px !important;
    line-height: 1.8 !important;
}

.founder-page .founder-statement-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SIGNATURE
========================================================= */

.founder-page .founder-statement-signature {
    position: relative;
    z-index: 2;

    margin-top: 45px;

    padding-top: 25px;

    border-top:
        1px solid rgba(119, 227, 255, 0.15);

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.founder-page .founder-statement-signature strong {
    color: #ffffff;

    font-family: "Orbitron", sans-serif;

    font-size: 22px;
    font-weight: 600;
}

.founder-page .founder-statement-signature span {
    color: #7de5fa;

    font-size: 13px;

    letter-spacing: 0.7px;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.founder-page #founder-navigation {
    width: calc(100% - 120px);
    max-width: 1450px;

    margin: 0 auto;

    padding:
        45px
        0
        90px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-top:
        1px solid rgba(117, 225, 255, 0.12);
}

.founder-page #founder-navigation a {
    color: #9cecff;

    font-family: "Orbitron", sans-serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.founder-page #founder-navigation a:hover {
    color: #ffffff;
}

.founder-page #founder-navigation a:first-child:hover {
    transform: translateX(-4px);
}

.founder-page #founder-navigation a:last-child:hover {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .founder-page main > section {
        padding-left: 35px;
        padding-right: 35px;
    }

    .founder-page .founder-hero-layout {
        grid-template-columns:
            minmax(300px, 420px)
            minmax(0, 1fr);

        gap: 50px;
    }

    .founder-page .founder-about-layout,
    .founder-page .founder-culture-layout,
    .founder-page .founder-vision-layout {
        gap: 55px;
    }

    .founder-page .founder-responsibility-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .founder-page .founder-player-profile {
        grid-template-columns: 1fr;
    }

    .founder-page .founder-player-profile > div {
        min-height: 0;
    }

    .founder-page .founder-player-profile > div:not(:last-child) {
        border-right: none;

        border-bottom:
            1px solid rgba(111, 220, 248, 0.12);
    }

    .founder-page #founder-navigation {
        width: calc(100% - 70px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .founder-page main > section {
        padding-left: 22px;
        padding-right: 22px;
    }

    .founder-page #founder-hero {
        min-height: auto;

        padding-top: 65px;
        padding-bottom: 80px;
    }

    .founder-page .founder-hero-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .founder-page .founder-profile-visual {
        max-width: 390px;

        margin: 0 auto;

        width: 100%;
    }

    .founder-page .founder-profile-id {
        width: 88%;

        padding:
            11px
            16px;
    }

    .founder-page .founder-profile-id span {
        font-size: 9px;
    }

    .founder-page .founder-hero-content h1 {
        font-size:
            clamp(46px, 14vw, 66px);

        letter-spacing: -2px;
    }

    .founder-page .founder-title {
        font-size: 14px !important;
    }

    .founder-page .founder-hero-intro {
        font-size: 17px !important;
    }

    .founder-page #founder-about,
    .founder-page #founder-competitive,
    .founder-page #founder-responsibilities,
    .founder-page #founder-culture,
    .founder-page #founder-vision,
    .founder-page #founder-statement {
        padding-top: 80px;
        padding-bottom: 85px;
    }

    .founder-page .founder-section-label {
        margin-bottom: 35px;
    }

    .founder-page .founder-about-layout,
    .founder-page .founder-culture-layout,
    .founder-page .founder-vision-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .founder-page .founder-about-copy,
    .founder-page .founder-competitive-copy,
    .founder-page .founder-culture-copy,
    .founder-page .founder-vision-copy {
        padding:
            30px
            26px !important;
    }

    .founder-page .founder-competitive-copy {
        margin-top:
            35px;
    }

    .founder-page .founder-player-profile {
        margin-bottom: 40px;
    }

    .founder-page .founder-player-profile > div {
        padding:
            28px
            25px;
    }

    .founder-page .founder-responsibility-grid {
        grid-template-columns: 1fr;
    }

    .founder-page .founder-responsibility-grid article {
        min-height: 230px;
    }

    .founder-page .founder-statement-panel {
        padding:
            45px
            28px;
    }

    .founder-page .founder-statement-panel blockquote {
        font-size:
            clamp(34px, 10vw, 48px);

        margin-bottom: 35px;
    }

    .founder-page #founder-navigation {
        width: calc(100% - 44px);

        padding:
            35px
            0
            65px;

        gap: 25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .founder-page .founder-hero-tags {
        gap: 7px;
    }

    .founder-page .founder-hero-tags span {
        padding:
            8px
            10px;

        font-size: 9px;
    }

    .founder-page .founder-profile-id {
        width: 92%;
    }

    .founder-page .founder-profile-id span {
        letter-spacing: 1px;
    }

    .founder-page .founder-about-heading h2,
    .founder-page .founder-competitive-heading h2,
    .founder-page .founder-responsibility-heading h2,
    .founder-page .founder-culture-heading h2,
    .founder-page .founder-vision-heading h2 {
        font-size: 38px;
    }

    .founder-page #founder-navigation {
        flex-direction: column;

        align-items: flex-start;
    }

}
/* =========================================================
   TWITCH PLAYER CARDS
========================================================= */

.twitch-player-card {
    cursor: pointer;
}


/* ---------------------------------------------------------
   LIVE / OFFLINE STATUS
--------------------------------------------------------- */

.twitch-card-status {
    position: absolute;

    top: 22px;
    right: 22px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        7px
        11px;

    background:
        rgba(4, 13, 23, 0.78);

    border:
        1px solid rgba(164, 187, 199, 0.22);

    clip-path:
        polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.twitch-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(183, 198, 205, 0.58);

    box-shadow:
        0 0 5px rgba(183, 198, 205, 0.22);
}


.twitch-status-text {
    color:
        #9fadb4;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


/* ---------------------------------------------------------
   LIVE STATE
--------------------------------------------------------- */

.twitch-player-card.is-live .twitch-card-status {
    background:
        rgba(53, 9, 70, 0.82);

    border-color:
        rgba(196, 110, 255, 0.55);

    box-shadow:
        0 0 18px rgba(172, 83, 255, 0.20);
}


.twitch-player-card.is-live .twitch-status-dot {
    background:
        #be6cff;

    box-shadow:
        0 0 5px #be6cff,
        0 0 12px rgba(190, 108, 255, 0.90);
}


.twitch-player-card.is-live .twitch-status-text {
    color:
        #e4baff;
}


/* ---------------------------------------------------------
   WATCH ON TWITCH
--------------------------------------------------------- */

.twitch-card-link {
    margin-top: 18px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    color:
        #b8c8cf;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.twitch-icon {
    color:
        #a970ff;

    font-size: 11px;

    text-shadow:
        0 0 8px rgba(169, 112, 255, 0.55);
}


.twitch-arrow {
    font-size: 13px;

    transition:
        transform 0.25s ease;
}


/* ---------------------------------------------------------
   MAKE CLICKABILITY OBVIOUS
--------------------------------------------------------- */

.twitch-player-card:hover .twitch-card-link {
    color:
        #ffffff;

    transform:
        translateX(3px);
}


.twitch-player-card:hover .twitch-arrow {
    transform:
        translate(3px, -3px);
}


.twitch-player-card:hover {
    border-color:
        rgba(169, 112, 255, 0.40) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(169, 112, 255, 0.08);
}


/* LIVE CARD GETS MORE ENERGY */

.twitch-player-card.is-live {
    border-color:
        rgba(183, 100, 255, 0.50) !important;

    box-shadow:
        0 0 26px rgba(169, 112, 255, 0.12),
        0 18px 45px rgba(0, 0, 0, 0.30);
}


.twitch-player-card.is-live .twitch-card-link {
    color:
        #d9b6ff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .twitch-card-status {
        top: 17px;
        right: 17px;
    }

}
/* =========================================================
   TWITCH STATUS — KEEP CLEAR OF PLAYER EMBLEM
========================================================= */

.twitch-player-card .twitch-card-status {
    top: 12px !important;
    right: 14px !important;

    padding: 6px 10px !important;

    z-index: 20 !important;
}


/* MAKE THE BADGE SLIGHTLY MORE COMPACT */

.twitch-player-card .twitch-status-text {
    font-size: 8px !important;
    letter-spacing: 1.2px !important;
}

.twitch-player-card .twitch-status-dot {
    width: 6px !important;
    height: 6px !important;
}
/* =========================================================
   ROSTER CARD BOTTOM ALIGNMENT
   KEEP QUOTES / DIVIDERS LEVEL
========================================================= */

/* Make every player card use the full card height */

.roster-card-player .roster-card-content {
    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;

    padding-bottom: 58px !important;
}


/* Push the quote section to the same bottom position */

.roster-card-player .player-card-quote {
    margin-top: auto !important;

    padding-top: 18px !important;

    border-top:
        1px solid rgba(126, 234, 255, 0.14) !important;
}


/* Twitch link no longer affects the quote position */

.twitch-player-card .twitch-card-link {
    position: absolute !important;

    left: 22px !important;
    bottom: 20px !important;

    margin-top: 0 !important;

    z-index: 8;
}


/* Make sure Twitch cards can position the link correctly */

.twitch-player-card {
    position: relative !important;
}
/* =========================================================
   CRYONIX — TWITCH PLAYER CARDS
   LIVE / OFFLINE + ROSTER ALIGNMENT
========================================================= */


/* =========================================================
   TWITCH CARD
========================================================= */

.twitch-player-card {
    position: relative !important;
    cursor: pointer;
}


/* =========================================================
   LIVE / OFFLINE BADGE
========================================================= */

.twitch-player-card .twitch-card-status {
    position: absolute !important;

    top: 12px !important;
    right: 14px !important;

    z-index: 20 !important;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        6px
        10px !important;

    background:
        rgba(4, 13, 23, 0.82);

    border:
        1px solid rgba(164, 187, 199, 0.22);

    clip-path:
        polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* OFFLINE DOT */

.twitch-player-card .twitch-status-dot {
    width: 6px !important;
    height: 6px !important;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(183, 198, 205, 0.58);

    box-shadow:
        0 0 5px rgba(183, 198, 205, 0.22);
}


/* OFFLINE TEXT */

.twitch-player-card .twitch-status-text {
    color:
        #9fadb4;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 8px !important;

    font-weight: 700;

    letter-spacing: 1.2px !important;

    white-space: nowrap;
}


/* =========================================================
   LIVE STATE
========================================================= */

.twitch-player-card.is-live .twitch-card-status {
    background:
        rgba(53, 9, 70, 0.86);

    border-color:
        rgba(196, 110, 255, 0.58);

    box-shadow:
        0 0 18px rgba(172, 83, 255, 0.20);
}


.twitch-player-card.is-live .twitch-status-dot {
    background:
        #be6cff;

    box-shadow:
        0 0 5px #be6cff,
        0 0 12px rgba(190, 108, 255, 0.90);
}


.twitch-player-card.is-live .twitch-status-text {
    color:
        #e4baff;
}


/* =========================================================
   ROSTER CARD CONTENT
========================================================= */

.roster-card-player .roster-card-content {
    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;

    box-sizing: border-box;

    /*
       Enough room for the Twitch link,
       but without creating the huge empty area.
    */
    padding-bottom: 34px !important;
}


/* =========================================================
   QUOTES / DIVIDERS
========================================================= */

.roster-card-player .player-card-quote {
    margin-top: auto !important;

    width: 100% !important;

    /*
       Same area on every card keeps
       all divider lines level.
    */
    min-height: 88px !important;
    height: 88px !important;

    box-sizing: border-box !important;

    padding-top: 14px !important;

    border-top:
        1px solid rgba(126, 234, 255, 0.16) !important;
}


/* QUOTE CREDIT */

.roster-card-player .player-card-quote .quote-credit {
    display: block;

    margin-top: 5px;
}


/* =========================================================
   WATCH ON TWITCH
========================================================= */

.twitch-player-card .twitch-card-link {
    position: absolute !important;

    left: 22px !important;
    bottom: 12px !important;

    z-index: 8;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin: 0 !important;

    color:
        #b8c8cf;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: 1.4px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* TWITCH ICON */

.twitch-player-card .twitch-icon {
    color:
        #a970ff;

    font-size: 11px;

    flex-shrink: 0;

    text-shadow:
        0 0 8px rgba(169, 112, 255, 0.55);
}


/* EXTERNAL LINK ARROW */

.twitch-player-card .twitch-arrow {
    position: absolute;

    right: -55px;

    font-size: 13px;

    transition:
        transform 0.25s ease;
}


/* =========================================================
   TWITCH HOVER
========================================================= */

.twitch-player-card:hover .twitch-card-link {
    color:
        #ffffff;

    transform:
        translateX(3px);
}


.twitch-player-card:hover .twitch-arrow {
    transform:
        translate(3px, -3px);
}


.twitch-player-card:hover {
    border-color:
        rgba(169, 112, 255, 0.40) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(169, 112, 255, 0.08);
}


/* =========================================================
   LIVE CARD
========================================================= */

.twitch-player-card.is-live {
    border-color:
        rgba(183, 100, 255, 0.50) !important;

    box-shadow:
        0 0 26px rgba(169, 112, 255, 0.12),
        0 18px 45px rgba(0, 0, 0, 0.30);
}


.twitch-player-card.is-live .twitch-card-link {
    color:
        #d9b6ff;
}


/* =========================================================
   NOVA — LONG PLAYER NAME
========================================================= */

.nova-page .fox-player-name {
    font-size: 18px !important;

    letter-spacing: -1px;

    white-space: nowrap;

    max-width: 100%;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .twitch-player-card .twitch-card-status {
        top: 10px !important;
        right: 10px !important;
    }


    .roster-card-player .player-card-quote {
        min-height: 82px !important;
        height: 82px !important;
    }


    .roster-card-player .roster-card-content {
        padding-bottom: 32px !important;
    }


    .twitch-player-card .twitch-card-link {
        left: 18px !important;
        bottom: 10px !important;
    }

}
/* =========================================================
   HEADER — KEEP ALL NAV LINKS VISIBLE
========================================================= */

@media (max-width: 950px) {

    header {
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 20px !important;
    }

    header nav {
        display: flex !important;
        align-items: center !important;

        gap: 18px !important;

        flex-shrink: 1 !important;

        white-space: nowrap !important;
    }

    header nav a {
        font-size: 14px !important;
    }

    .header-brand-name {
        font-size: 22px !important;
    }

    .header-logo {
        width: 90px !important;
    }

    .header-emblem {
        width: 90px !important;
    }

}
/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

/* Give nav links space for the active underline */

header nav a {
    position: relative;
}


/* ---------------------------------------------------------
   ACTIVE LINK
--------------------------------------------------------- */

body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.zenith-page):not(.nova-page)
header nav a[href="index.html"],

body.teams-page
header nav a[href="teams.html"],

body.zenith-page
header nav a[href="teams.html"],

body.nova-page
header nav a[href="teams.html"],

body.matches-page
header nav a[href="matches.html"],

body.about-page
header nav a[href="about.html"],

body.history-page
header nav a[href="history.html"],

body.founder-page
header nav a[href="founder.html"] {

    color: #7ce8ff !important;

    text-shadow:
        0 0 8px rgba(90, 222, 255, 0.45);
}


/* ---------------------------------------------------------
   ACTIVE UNDERLINE
--------------------------------------------------------- */

body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.zenith-page):not(.nova-page)
header nav a[href="index.html"]::after,

body.teams-page
header nav a[href="teams.html"]::after,

body.zenith-page
header nav a[href="teams.html"]::after,

body.nova-page
header nav a[href="teams.html"]::after,

body.matches-page
header nav a[href="matches.html"]::after,

body.about-page
header nav a[href="about.html"]::after,

body.history-page
header nav a[href="history.html"]::after,

body.founder-page
header nav a[href="founder.html"]::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -10px;

    width: 70%;
    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #78e7ff,
            transparent
        );

    box-shadow:
        0 0 8px rgba(86, 220, 255, 0.55);
}


/* ---------------------------------------------------------
   HOVER — NON-ACTIVE LINKS
--------------------------------------------------------- */

header nav a:hover {
    color: #9cefff !important;

    text-shadow:
        0 0 7px rgba(90, 222, 255, 0.30);
}
/* =========================================================
   NAV COSMIC HOVER / CLICK GLOW
========================================================= */

header nav a {
    position: relative;
    isolation: isolate;
}

/* Soft cosmic mist behind each link */
header nav a::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 115%;
    height: 42px;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    background:
        radial-gradient(
            ellipse at center,
            rgba(105, 225, 255, 0.22) 0%,
            rgba(71, 188, 255, 0.13) 32%,
            rgba(104, 103, 255, 0.07) 55%,
            transparent 76%
        );

    filter: blur(9px);

    opacity: 0;

    pointer-events: none;

    z-index: -1;

    transition:
        opacity 0.28s ease,
        transform 0.32s ease,
        filter 0.28s ease;
}


/* Hover / keyboard focus */
header nav a:hover::before,
header nav a:focus-visible::before {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1.08);

    filter: blur(11px);
}


header nav a:hover,
header nav a:focus-visible {
    color: #b9f5ff !important;

    text-shadow:
        0 0 5px rgba(215, 250, 255, 0.75),
        0 0 12px rgba(91, 225, 255, 0.58),
        0 0 24px rgba(77, 174, 255, 0.28);
}


/* Click */
header nav a:active::before {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(0.88);

    filter: blur(6px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(220, 252, 255, 0.40) 0%,
            rgba(91, 225, 255, 0.24) 30%,
            rgba(121, 102, 255, 0.12) 55%,
            transparent 78%
        );
}


header nav a:active {
    text-shadow:
        0 0 7px rgba(235, 253, 255, 0.95),
        0 0 16px rgba(91, 225, 255, 0.72),
        0 0 30px rgba(84, 151, 255, 0.38);
}
/* =========================================================
   MOBILE HEADER / HAMBURGER MENU
========================================================= */


/* DESKTOP — HIDE HAMBURGER */

.mobile-menu-toggle {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1050px) {

    header {
        position: relative !important;

        min-height: 70px !important;

        padding:
            8px
            18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        overflow: visible !important;
    }


    /* BRAND */

    header .header-brand {
        height: 60px !important;

        gap: 8px !important;

        flex-shrink: 1 !important;
    }


    header .header-logo {
        width: 70px !important;
        height: 55px !important;
    }


    header .header-emblem {
        width: 70px !important;
    }


    header .header-brand-name {
        font-size: 17px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       HAMBURGER BUTTON
    ===================================================== */

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;

        display: flex;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        flex-shrink: 0;

        padding: 0;

        background:
            linear-gradient(
                135deg,
                rgba(7, 32, 49, 0.88),
                rgba(4, 16, 28, 0.92)
            );

        border:
            1px solid rgba(118, 226, 255, 0.30);

        cursor: pointer;

        clip-path:
            polygon(
                7px 0,
                100% 0,
                100% calc(100% - 7px),
                calc(100% - 7px) 100%,
                0 100%,
                0 7px
            );

        z-index: 101;
    }


    .mobile-menu-toggle span {
        display: block;

        width: 20px;
        height: 2px;

        background: #8cecff;

        box-shadow:
            0 0 7px rgba(95, 225, 255, 0.40);

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }


    /* X WHEN OPEN */

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }


    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* =====================================================
       MOBILE NAV PANEL
    ===================================================== */

    header .main-nav {
        position: absolute !important;

        top: 70px !important;

        left: 0 !important;
        right: 0 !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        padding:
            12px
            18px
            18px !important;

        background:
            linear-gradient(
                180deg,
                rgba(3, 14, 25, 0.97),
                rgba(4, 18, 31, 0.95)
            );

        border-top:
            1px solid rgba(117, 226, 255, 0.13);

        border-bottom:
            1px solid rgba(117, 226, 255, 0.20);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        box-shadow:
            0 18px 35px rgba(0, 0, 0, 0.38);

        z-index: 100;
    }


    header .main-nav.is-open {
        display: flex !important;
    }


    /* NAV LINKS */

    header .main-nav a {
        width: 100%;

        padding:
            15px
            10px !important;

        color: #d8e4e9 !important;

        font-size: 14px !important;

        text-align: left;

        border-bottom:
            1px solid rgba(113, 220, 248, 0.08);
    }


    header .main-nav a:last-child {
        border-bottom: none;
    }


    header .main-nav a:hover {
        padding-left:
            16px !important;

        color:
            #83eaff !important;
    }


    /* ACTIVE NAV LINE ON MOBILE */

    header .main-nav a::after {
        bottom: 6px !important;
    }

}
/* =========================================================
   FOUNDER PAGE — TABLET FIX
   STACK LAYOUT BEFORE IT GETS CRAMPED
========================================================= */

@media (max-width: 900px) {

    /* HERO */

    .founder-page #founder-hero {
        min-height: auto !important;

        padding-top: 75px !important;
        padding-bottom: 90px !important;
    }


    .founder-page .founder-hero-layout {
        grid-template-columns: 1fr !important;

        gap: 55px !important;
    }


    .founder-page .founder-profile-visual {
        width: 100%;
        max-width: 440px;

        margin: 0 auto;
    }


    .founder-page .founder-hero-content {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;
    }


    .founder-page .founder-hero-content h1 {
        font-size:
            clamp(54px, 10vw, 76px) !important;

        letter-spacing: -2px !important;

        overflow-wrap: normal;
        word-break: normal;
    }


    /* ABOUT */

    .founder-page .founder-about-layout {
        grid-template-columns: 1fr !important;

        gap: 40px !important;
    }


    /* CULTURE */

    .founder-page .founder-culture-layout {
        grid-template-columns: 1fr !important;

        gap: 40px !important;
    }


    /* VISION */

    .founder-page .founder-vision-layout {
        grid-template-columns: 1fr !important;

        gap: 40px !important;
    }


    /* LONG TEXT CARDS */

    .founder-page .founder-about-copy,
    .founder-page .founder-competitive-copy,
    .founder-page .founder-culture-copy,
    .founder-page .founder-vision-copy {
        max-width: 100% !important;

        margin-left: 0 !important;
    }

}
/* =========================================================
   KEYBOARD ACCESSIBILITY
   FOCUS INDICATORS
========================================================= */


/* GENERAL LINKS + BUTTONS */

a:focus-visible,
button:focus-visible {
    outline:
        2px solid #7ce8ff !important;

    outline-offset:
        4px !important;

    box-shadow:
        0 0 0 2px rgba(5, 15, 25, 0.85),
        0 0 14px rgba(90, 225, 255, 0.45) !important;
}


/* HEADER NAV */

header nav a:focus-visible {
    color:
        #8cecff !important;

    text-shadow:
        0 0 8px rgba(90, 222, 255, 0.50);
}


/* TEAM / PLAYER CARDS */

.team-card:focus-visible,
.roster-card-link:focus-visible,
.twitch-player-card:focus-visible {
    outline:
        2px solid #85eaff !important;

    outline-offset:
        5px !important;

    border-color:
        rgba(126, 234, 255, 0.55) !important;

    box-shadow:
        0 0 0 2px rgba(4, 13, 23, 0.90),
        0 0 24px rgba(90, 224, 255, 0.25),
        0 18px 45px rgba(0, 0, 0, 0.30) !important;
}


/* TWITCH CARDS */

.twitch-player-card:focus-visible .twitch-card-link {
    color:
        #ffffff !important;

    transform:
        translateX(3px);
}


/* MOBILE MENU BUTTON */

.mobile-menu-toggle:focus-visible {
    outline:
        2px solid #88ebff !important;

    outline-offset:
        4px !important;

    box-shadow:
        0 0 16px rgba(90, 225, 255, 0.40) !important;
}
/* =========================================================
   HOVER / INTERACTION CONSISTENCY
========================================================= */

.main-nav a,
.header-brand-name,
.team-link,
.pulse-view,
.team-page-back,
.site-footer a,
.roster-card-link,
.twitch-player-card,
.mobile-menu-toggle {
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.22s ease,
        transform 0.22s ease;
}
/* =========================================================
   CRYONIX 404 PAGE
========================================================= */

.error-page {
    min-height: 100vh;
}


/* MAIN 404 AREA */

.error-section {
    min-height: calc(100vh - 90px);

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding:
        120px 24px 80px;

    overflow: hidden;

    text-align: center;
}


/* DARK COSMIC OVERLAY */

.error-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(82, 213, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 42% 48%,
            rgba(139, 88, 255, 0.10),
            transparent 36%
        ),
        linear-gradient(
            to bottom,
            rgba(3, 8, 14, 0.20),
            rgba(3, 8, 14, 0.74)
        );

    pointer-events: none;
}


/* CONTENT */

.error-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 850px;

    margin: 0 auto;
}


/* HUGE 404 */

.error-code {
    margin: 0;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(120px, 22vw, 260px);

    font-weight: 800;

    line-height: 0.85;

    letter-spacing: -10px;

    color:
        rgba(211, 248, 255, 0.10);

    -webkit-text-stroke:
        1px rgba(125, 230, 255, 0.42);

    text-shadow:
        0 0 30px rgba(72, 211, 255, 0.18),
        0 0 70px rgba(130, 79, 255, 0.12);

    user-select: none;
}


/* TITLE */

.error-content h1 {
    margin:
        -6px 0 20px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(38px, 6vw, 68px);

    font-weight: 700;

    letter-spacing: -1px;

    color:
        #f3fbff;

    text-shadow:
        0 0 20px rgba(101, 224, 255, 0.18);
}


/* MESSAGE */

.error-message {
    width: 100%;
    max-width: 620px;

    margin:
        0 auto 38px;

    color:
        rgba(220, 233, 242, 0.76);

    font-size:
        17px;

    line-height:
        1.8;
}


/* BUTTON AREA */

.error-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 14px;
}


/* PRIMARY BUTTON */

.error-primary-link,
.error-secondary-link {
    min-width: 180px;

    padding:
        14px 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        1.4px;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
}


/* RETURN HOME */

.error-primary-link {
    color:
        #071018;

    background:
        linear-gradient(
            135deg,
            #baf5ff,
            #66dcff
        );

    border:
        1px solid #9ceeff;

    clip-path:
        polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );
}


.error-primary-link:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px rgba(89, 220, 255, 0.24);
}


/* VIEW TEAMS */

.error-secondary-link {
    color:
        #d9f8ff;

    background:
        rgba(9, 24, 36, 0.58);

    border:
        1px solid rgba(126, 234, 255, 0.38);

    clip-path:
        polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );
}


.error-secondary-link:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(143, 235, 255, 0.72);

    background:
        rgba(14, 42, 60, 0.70);

    box-shadow:
        0 10px 30px rgba(72, 206, 255, 0.12);
}


/* =========================================================
   404 MOBILE
========================================================= */

@media (max-width: 600px) {

    .error-section {
        min-height:
            calc(100vh - 70px);

        padding:
            110px 20px 70px;
    }


    .error-code {
        font-size:
            clamp(105px, 36vw, 160px);

        letter-spacing:
            -6px;
    }


    .error-content h1 {
        margin-top:
            2px;
    }


    .error-message {
        font-size:
            15px;

        line-height:
            1.7;
    }


    .error-actions {
        flex-direction:
            column;

        width:
            100%;
    }


    .error-primary-link,
    .error-secondary-link {
        width:
            min(100%, 280px);
    }

}
/* 404 PAGE - NO ACTIVE NAV ITEM */

.error-page .main-nav a[href="index.html"] {
    color: inherit !important;
    text-shadow: none !important;
}

.error-page .main-nav a[href="index.html"]::after {
    opacity: 0 !important;
    width: 0 !important;
}
/* =========================================================
   CRYONIX COMMUNITY / DISCORD
========================================================= */

#crx-community {
    position: relative;
    padding: 95px 6vw;
}


/* MAIN PANEL */

.community-panel {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.35fr 0.65fr;

    gap: 55px;

    padding: 55px;

    background:
        linear-gradient(
            135deg,
            rgba(7, 25, 39, 0.82),
            rgba(17, 10, 38, 0.76)
        );

    border:
        1px solid rgba(126, 234, 255, 0.24);

    clip-path:
        polygon(
            18px 0,
            100% 0,
            100% calc(100% - 18px),
            calc(100% - 18px) 100%,
            0 100%,
            0 18px
        );

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.28),
        inset 0 0 45px rgba(95, 213, 255, 0.025);
}


/* SUBTLE CRYSTAL / COSMIC GLOW */

.community-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(87, 218, 255, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(153, 91, 255, 0.12),
            transparent 34%
        );
}


/* LEFT CONTENT */

.community-content {
    position: relative;
    z-index: 2;
}


.community-content h2 {
    margin:
        10px 0 18px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(34px, 4.5vw, 54px);

    line-height:
        1.08;

    color:
        #f4fbff;
}


.community-intro {
    max-width:
        680px;

    margin:
        0 0 38px;

    font-size:
        16px;

    line-height:
        1.8;

    color:
        rgba(221, 235, 244, 0.76);
}


/* COMMUNITY POINTS */

.community-points {
    display:
        grid;

    gap:
        14px;
}


.community-point {
    display:
        grid;

    grid-template-columns:
        46px 1fr;

    gap:
        16px;

    align-items:
        start;

    padding:
        17px 18px;

    background:
        rgba(5, 17, 28, 0.40);

    border:
        1px solid rgba(123, 226, 255, 0.11);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease;
}


.community-point:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(124, 231, 255, 0.30);

    background:
        rgba(9, 28, 43, 0.52);
}


.community-point-number {
    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1px;

    color:
        #79e5ff;
}


.community-point strong {
    display:
        block;

    margin-bottom:
        5px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        13px;

    letter-spacing:
        0.7px;

    color:
        #eafaff;
}


.community-point p {
    margin:
        0;

    font-size:
        14px;

    line-height:
        1.6;

    color:
        rgba(211, 225, 235, 0.65);
}


/* =========================================================
   DISCORD CARD
========================================================= */

.community-discord-card {
    position:
        relative;

    z-index:
        2;

    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        42px 30px;

    overflow:
        hidden;

    background:
        linear-gradient(
            155deg,
            rgba(10, 39, 56, 0.82),
            rgba(38, 18, 68, 0.76)
        );

    border:
        1px solid rgba(137, 228, 255, 0.35);

    clip-path:
        polygon(
            16px 0,
            100% 0,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            0 100%,
            0 16px
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.25),
        inset 0 0 40px rgba(133, 86, 255, 0.06);
}


.community-discord-card::before {
    content: "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    top:
        -120px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        rgba(133, 90, 255, 0.13);

    filter:
        blur(18px);

    pointer-events:
        none;
}


/* SMALL TOP CODE */

.community-discord-code {
    position:
        absolute;

    top:
        17px;

    left:
        19px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    color:
        rgba(142, 232, 255, 0.65);
}


/* CRX SYMBOL */

.community-discord-symbol {
    width:
        105px;

    height:
        105px;

    margin-bottom:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        27px;

    font-weight:
        800;

    letter-spacing:
        -1px;

    color:
        #dcf9ff;

    background:
        linear-gradient(
            145deg,
            rgba(70, 211, 255, 0.16),
            rgba(139, 82, 255, 0.20)
        );

    border:
    1px solid rgba(140, 232, 255, 0.42);

    clip-path:
        polygon(
            50% 0,
            100% 50%,
            50% 100%,
            0 50%
        );

    box-shadow:
        0 0 30px rgba(85, 214, 255, 0.14),
        0 0 45px rgba(136, 82, 255, 0.10);
}


/* CARD TEXT */

.community-discord-label {
    margin:
        0 0 8px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

    color:
        #79e6ff;
}


.community-discord-card h3 {
    margin:
        0 0 7px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        31px;

    color:
        #ffffff;
}


.community-discord-card > p:last-of-type {
    margin:
        0 0 28px;

    color:
        rgba(221, 231, 241, 0.68);

    font-size:
        14px;

    letter-spacing:
        0.5px;
}


/* JOIN DISCORD BUTTON */

.community-discord-link {
    min-width:
        210px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        14px 24px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    text-decoration:
        none;

    color:
        #071018;

    background:
        linear-gradient(
            135deg,
            #b8f5ff,
            #69ddff
        );

    border:
        1px solid #a3efff;

    clip-path:
        polygon(
            10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px
        );

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}


.community-discord-link:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 32px rgba(88, 221, 255, 0.25);
}


.community-discord-link span {
    font-size:
        16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #crx-community {
        padding:
            80px 5vw;
    }


    .community-panel {
        grid-template-columns:
            1fr;

        gap:
            40px;

        padding:
            42px;
    }


    .community-discord-card {
        min-height:
            390px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #crx-community {
        padding:
            65px 18px;
    }


    .community-panel {
        padding:
            30px 20px;

        gap:
            32px;
    }


    .community-content h2 {
        font-size:
            clamp(30px, 9vw, 40px);
    }


    .community-intro {
        font-size:
            15px;

        line-height:
            1.7;
    }


    .community-point {
        grid-template-columns:
            38px 1fr;

        padding:
            15px;
    }


    .community-discord-card {
        min-height:
            360px;

        padding:
            55px 22px 34px;
    }


    .community-discord-symbol {
        width:
            90px;

        height:
            90px;

        font-size:
            23px;
    }


    .community-discord-link {
        width:
            min(100%, 250px);
    }

}
/* =========================================================
   MATCH MAP BREAKDOWN
========================================================= */

.match-map-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 22px;
    margin-bottom: 20px;
}


.match-map-result {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 14px 12px;

    background:
        rgba(6, 18, 28, 0.48);

    border:
        1px solid rgba(126, 234, 255, 0.12);
}


.match-map-name {
    font-family:
        "Orbitron",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color:
        rgba(219, 240, 248, 0.68);
}


.match-map-result strong {
    font-family:
        "Orbitron",
        sans-serif;

    font-size: 18px;

    color:
        #f4fbff;
}


.match-map-result > span:last-child {
    font-family:
        "Orbitron",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


/* WIN */

.match-map-result.map-win {
    border-color:
        rgba(102, 230, 255, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(7, 34, 48, 0.64),
            rgba(5, 20, 30, 0.46)
        );
}


.match-map-result.map-win > span:last-child {
    color:
        #71e9ff;
}


/* LOSS */

.match-map-result.map-loss {
    border-color:
        rgba(164, 113, 255, 0.24);

    background:
        linear-gradient(
            145deg,
            rgba(36, 19, 55, 0.58),
            rgba(12, 17, 30, 0.46)
        );
}


.match-map-result.map-loss > span:last-child {
    color:
        #b99aff;
}


/* MOBILE */

@media (max-width: 600px) {

    .match-map-results {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .match-map-result {
        flex-direction: row;

        justify-content: space-between;

        padding: 12px 14px;
    }


    .match-map-name {
        min-width: 70px;
    }

}
/* =========================================================
   SPLIT SCREEN / SMALL DESKTOP RESPONSIVENESS
========================================================= */

@media (max-width: 1100px) {

    /* COMPETITIVE PULSE */

    .pulse-panel {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .pulse-item {
        min-width:
            0 !important;

        padding:
            28px 24px !important;
    }


    /* MATCHES */

    .matches-layout {
        grid-template-columns:
            1fr !important;

        gap:
            45px !important;
    }

    .match-card {
    width:
        100%;

    min-height:
        auto;
}

.upcoming-matches-column {
    grid-template-columns:
        1fr !important;
}

}
/* =========================================================
   SPLIT SCREEN - BUILD WITH CRYONIX
========================================================= */

@media (max-width: 1100px) {

    #build-with-crx {
        padding-left: 6vw !important;
        padding-right: 6vw !important;
    }

    .build-panel {
        grid-template-columns: 1fr !important;

        gap: 28px !important;

        padding: 40px !important;
    }

    .build-content {
        width: 100% !important;
        max-width: 680px !important;
    }

    .build-contact {
        width: 100% !important;
        min-width: 0 !important;
    }

    .build-contact a {
        display: block;

        max-width: 100%;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

}
/* =========================================================
   COMPACT RESPONSIVE NAV MENU
========================================================= */

@media (max-width: 1050px) {

    .main-nav {
        position: absolute !important;

        top: calc(100% + 10px) !important;
        right: 18px !important;
        left: auto !important;

        width: min(340px, calc(100vw - 36px)) !important;

        padding: 12px !important;

        display: none !important;
        flex-direction: column !important;

        gap: 4px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 23, 35, 0.97),
                rgba(13, 13, 35, 0.97)
            ) !important;

        border:
            1px solid rgba(102, 225, 255, 0.32) !important;

        clip-path:
            polygon(
                12px 0,
                100% 0,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                0 100%,
                0 12px
            );

        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.42);

        backdrop-filter:
            blur(12px);

        z-index: 9999 !important;
    }


    .main-nav.is-open {
        display: flex !important;
    }


    .main-nav a {
        width: 100% !important;

        padding: 15px 18px !important;

        text-align: center !important;

        font-family:
            "Orbitron",
            sans-serif;

        font-size: 13px !important;

        font-weight: 600;

        letter-spacing: 0.8px;

        border-bottom:
            1px solid rgba(104, 217, 242, 0.10);
    }


    .main-nav a:last-child {
        border-bottom:
            none;
    }


    .main-nav a:hover {
        background:
            rgba(85, 215, 255, 0.07);
    }

}
/* =========================================================
   SPLIT SCREEN - COMMUNITY / DISCORD
========================================================= */

@media (max-width: 1100px) and (min-width: 601px) {

    .community-panel {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }


    .community-discord-card {
        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 55px 32px 32px !important;

        display: grid !important;

        grid-template-columns:
            85px minmax(0, 1fr) 190px !important;

        grid-template-rows:
            auto auto auto !important;

        grid-template-areas:
            "symbol label button"
            "symbol title button"
            "symbol tagline button" !important;

        align-items: center !important;

        column-gap: 28px !important;
        row-gap: 5px !important;

        text-align: left !important;
    }


    .community-discord-code {
        top: 14px !important;
        left: 20px !important;
    }


    .community-discord-symbol {
        grid-area: symbol !important;

        width: 85px !important;
        height: 85px !important;

        margin: 0 !important;

        justify-self: center !important;
    }


    .community-discord-label {
        grid-area: label !important;

        margin: 0 !important;

        align-self: end !important;
    }


    .community-discord-card h3 {
        grid-area: title !important;

        margin: 0 !important;

        align-self: center !important;
    }


    .community-discord-card > p:last-of-type {
        grid-area: tagline !important;

        margin: 0 !important;

        transform: none !important;

        align-self: start !important;
    }


    .community-discord-link {
        grid-area: button !important;

        width: 190px !important;
        min-width: 190px !important;

        margin: 0 !important;

        justify-self: end !important;
        align-self: center !important;
    }

}
/* =========================================================
   FORCE RESPONSIVE NAV TO RIGHT SIDE
========================================================= */

@media (max-width: 1050px) {

    header {
        position: relative !important;
    }

    .main-nav {
        left: auto !important;
        right: 18px !important;

        margin-left: auto !important;
        margin-right: 0 !important;

        transform: none !important;
    }

}
/* =========================================================
   SPLIT SCREEN - COMPACT UPCOMING MATCHES
========================================================= */

@media (max-width: 1100px) and (min-width: 601px) {

    .upcoming-match {
        min-height: 0 !important;
        padding: 20px 24px !important;
    }

    .upcoming-match + .upcoming-match {
        margin-top: 14px;
    }

    .upcoming-match .match-versus {
        flex: 0 0 auto;

        gap: 20px !important;
        padding: 22px 0 18px !important;
    }

    .upcoming-match .match-team h4 {
        font-size: clamp(21px, 3vw, 28px);
    }

    .upcoming-match .versus-center {
        min-width: 70px;
    }

    .upcoming-match .versus-center > span {
        font-size: 19px;
    }

    .upcoming-match .versus-center p {
        margin-top: 4px;
    }

    .upcoming-match .match-footer {
        padding-top: 13px;
    }

    .upcoming-match .match-footer span {
        padding: 5px 8px;
    }

}
/* =========================================================
   MOBILE - COMPETITIVE PULSE FIX
========================================================= */

@media (max-width: 600px) {

    .pulse-panel {
        grid-template-columns: 1fr !important;
    }

    .pulse-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 140px !important;

        padding:
            24px 22px !important;
    }

    .pulse-item strong {
        font-size: 30px !important;
        line-height: 1.1;
    }

    .pulse-item-content {
        min-width: 0;
        width: 100%;
    }

    .pulse-meta {
        max-width: 100%;
    }

}
/* =========================================================
   FOUNDER TWITCH
========================================================= */

.founder-page .founder-twitch-link {
    position: relative;

    width: min(100%, 430px);
    min-height: 92px;

    margin-top: 28px;
    padding: 20px 120px 20px 22px;

    display: flex;
    align-items: center;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            rgba(12, 25, 39, 0.88),
            rgba(21, 15, 42, 0.82)
        );

    border:
        1px solid rgba(155, 118, 255, 0.25);

    clip-path:
        polygon(
            12px 0,
            100% 0,
            100% calc(100% - 12px),
            calc(100% - 12px) 100%,
            0 100%,
            0 12px
        );

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.25);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* TEXT */

.founder-page .founder-twitch-text {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
    width: 100%;
}


.founder-page .founder-twitch-label {
    color: #a970ff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.founder-page .founder-twitch-text strong {
    color: #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 1px;

    overflow-wrap: anywhere;
}


.founder-page .founder-twitch-text > span:last-child {
    color: #aebcc5;

    font-size: 12px;
}


/* STATUS BADGE */

.founder-page .founder-twitch-status {
    top: 16px !important;
    right: 16px !important;
}


/* HOVER */

.founder-page .founder-twitch-link:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(169, 112, 255, 0.55);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(169, 112, 255, 0.12);
}


/* LIVE */

.founder-page .founder-twitch-link.is-live {
    border-color:
        rgba(190, 108, 255, 0.65) !important;

    box-shadow:
        0 0 28px rgba(169, 112, 255, 0.18),
        0 18px 40px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   TABLET / SPLIT SCREEN
========================================================= */

@media (max-width: 1100px) and (min-width: 601px) {

    .founder-page .founder-twitch-link {
        width: 100%;
        max-width: 430px;

        min-height: 92px;

        padding:
            20px
            115px
            20px
            20px;
    }

    .founder-page .founder-twitch-text {
        min-width: 0;
        max-width: 100%;
    }

    .founder-page .founder-twitch-text strong {
        overflow-wrap: anywhere;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .founder-page .founder-twitch-link {
        width: 100%;
        max-width: 100%;

        min-height: 120px;

        padding:
            58px
            20px
            20px;
    }

    .founder-page .founder-twitch-status {
        top: 15px !important;
        right: 15px !important;
    }

    .founder-page .founder-twitch-text strong {
        font-size: 14px;
    }

}
.match-map-results:has(.match-map-result:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
.match-map-results:has(.match-map-result:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
/* =========================================================
   MATCH CARD TEAM / VS SPACING FIX
========================================================= */

.upcoming-match .match-versus {
    grid-template-columns:
        minmax(0, 1fr)
        110px
        minmax(0, 1fr);

    gap: 38px;
}


.upcoming-match .cryonix-team {
    padding-right: 12px;
}


.upcoming-match .opponent-team {
    padding-left: 12px;
}


.upcoming-match .versus-center {
    min-width: 110px;
}


.upcoming-match .match-team h4 {
    font-size:
        clamp(20px, 2.1vw, 30px);
}


/* SPLIT SCREEN / TABLET */

@media (max-width: 1100px) and (min-width: 601px) {

    .upcoming-match .match-versus {
        grid-template-columns:
            minmax(0, 1fr)
            90px
            minmax(0, 1fr);

        gap: 24px;
    }

    .upcoming-match .versus-center {
        min-width: 90px;
    }

    .upcoming-match .match-team h4 {
        font-size:
            clamp(19px, 3vw, 27px);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .upcoming-match .match-versus {
        grid-template-columns:
            minmax(0, 1fr)
            60px
            minmax(0, 1fr);

        gap: 12px;
    }

    .upcoming-match .versus-center {
        min-width: 60px;
    }

    .upcoming-match .cryonix-team {
        padding-right: 4px;
    }

    .upcoming-match .opponent-team {
        padding-left: 4px;
    }

    .upcoming-match .match-team h4 {
        font-size:
            clamp(17px, 5vw, 23px);
    }

}
/* =========================================================
   RECENT RESULTS - COMPACT CARDS
========================================================= */

.recent-results-column .result-match {
    min-height: auto !important;
    padding: 26px 30px !important;
}


.recent-results-column .result-match .match-versus {
    padding:
        28px
        0
        24px !important;
}


.recent-results-column .result-match .match-team h4 {
    font-size:
        clamp(22px, 2vw, 30px) !important;
}


.recent-results-column .result-match .match-score {
    min-width: 85px !important;
}


.recent-results-column .result-match .score-number {
    font-size: 26px !important;
}


.recent-results-column .result-match .match-map-results {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}


.recent-results-column .result-match .match-map-result {
    padding:
        10px
        12px !important;

    gap: 4px !important;
}


.recent-results-column .result-match .match-map-result strong {
    font-size: 16px !important;
}


.recent-results-column .result-match .match-footer {
    padding-top: 12px !important;
}


/* TABLET / SPLIT SCREEN */

@media (max-width: 1100px) {

    .recent-results-column .result-match {
        padding:
            24px
            24px !important;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .recent-results-column .result-match {
        padding:
            20px
            18px !important;
    }

    .recent-results-column .result-match .match-versus {
        padding:
            22px
            0
            18px !important;
    }

}
/* =========================================================
   RECENT RESULTS - TWO COLUMN LAYOUT
========================================================= */

.recent-results-column {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}


.recent-results-column .matches-column-heading {
    grid-column:
        1 / -1 !important;
}


.recent-results-column .result-match {
    width: 100% !important;
    min-width: 0 !important;

    padding:
        22px
        24px !important;
}


/* TEAM / SCORE AREA */

.recent-results-column .result-match .match-versus {
    grid-template-columns:
        minmax(0, 1fr)
        75px
        minmax(0, 1fr) !important;

    gap: 16px !important;

    padding:
        22px
        0
        18px !important;
}


.recent-results-column .result-match .match-team h4 {
    font-size:
        clamp(19px, 1.7vw, 25px) !important;
}


.recent-results-column .result-match .score-number {
    font-size:
        23px !important;
}


/* MAP BLOCKS */

.recent-results-column .result-match .match-map-results {
    gap: 8px !important;

    margin-top:
        10px !important;

    margin-bottom:
        12px !important;
}


.recent-results-column .result-match .match-map-result {
    padding:
        9px
        8px !important;
}


.recent-results-column .result-match .match-map-result strong {
    font-size:
        14px !important;
}


/* FOOTER */

.recent-results-column .result-match .match-footer {
    padding-top:
        10px !important;
}


/* =========================================================
   TABLET / SPLIT SCREEN
========================================================= */

@media (max-width: 1100px) {

    .recent-results-column {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .recent-results-column .result-match {
        padding:
            18px
            16px !important;
    }

}
/* =========================================================
   GALAXY STAR BACKGROUND
========================================================= */

.moving-stars,
.moving-stars-2 {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}


/* FAINT DISTANT STAR DUST */

.moving-stars {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.28) 0.7px, transparent 1.2px),
        radial-gradient(circle, rgba(140,190,255,0.22) 0.8px, transparent 1.3px);

    background-size:
        83px 117px,
        137px 191px;

    background-position:
        11px 37px,
        73px 121px;

    animation:
        galaxyDrift 120s linear infinite;
}


/* RANDOM BRIGHTER STARS */

.moving-stars::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 4% 13%, rgba(255,255,255,0.95) 0 1.6px, transparent 3px),
        radial-gradient(circle at 9% 47%, rgba(190,220,255,0.65) 0 1px, transparent 2.4px),
        radial-gradient(circle at 14% 76%, rgba(255,255,255,0.8) 0 1.3px, transparent 2.8px),
        radial-gradient(circle at 18% 24%, rgba(205,180,255,0.9) 0 2px, transparent 4px),
        radial-gradient(circle at 23% 61%, rgba(255,255,255,0.55) 0 0.8px, transparent 2px),
        radial-gradient(circle at 29% 16%, rgba(180,220,255,0.9) 0 1.7px, transparent 3px),
        radial-gradient(circle at 33% 88%, rgba(255,255,255,0.75) 0 1.2px, transparent 2.6px),
        radial-gradient(circle at 39% 43%, rgba(220,200,255,0.85) 0 1.8px, transparent 3.5px),
        radial-gradient(circle at 44% 72%, rgba(255,255,255,0.5) 0 0.9px, transparent 2px),
        radial-gradient(circle at 49% 12%, rgba(175,215,255,0.95) 0 2.2px, transparent 4px),
        radial-gradient(circle at 53% 55%, rgba(255,255,255,0.65) 0 1.1px, transparent 2.4px),
        radial-gradient(circle at 58% 84%, rgba(205,180,255,0.8) 0 1.6px, transparent 3px),
        radial-gradient(circle at 63% 29%, rgba(255,255,255,0.9) 0 1.9px, transparent 3.5px),
        radial-gradient(circle at 67% 66%, rgba(180,225,255,0.65) 0 1px, transparent 2.2px),
        radial-gradient(circle at 72% 18%, rgba(255,255,255,0.6) 0 1px, transparent 2.5px),
        radial-gradient(circle at 78% 49%, rgba(210,185,255,0.95) 0 2.1px, transparent 4px),
        radial-gradient(circle at 82% 79%, rgba(255,255,255,0.7) 0 1.2px, transparent 2.7px),
        radial-gradient(circle at 87% 33%, rgba(170,215,255,0.8) 0 1.5px, transparent 3px),
        radial-gradient(circle at 91% 68%, rgba(255,255,255,0.95) 0 2px, transparent 4px),
        radial-gradient(circle at 96% 21%, rgba(210,190,255,0.7) 0 1.1px, transparent 2.5px);

    animation:
        starTwinkle 6s ease-in-out infinite alternate;
}


/* EXTRA RANDOM DEPTH */

.moving-stars-2 {
    opacity: 0.45;

    background:
        radial-gradient(circle at 7% 82%, white 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 16% 35%, #bcdcff 0 1px, transparent 2px),
        radial-gradient(circle at 26% 92%, white 0 0.7px, transparent 1.7px),
        radial-gradient(circle at 36% 20%, #d6c5ff 0 1.1px, transparent 2.2px),
        radial-gradient(circle at 47% 64%, white 0 0.9px, transparent 2px),
        radial-gradient(circle at 57% 8%, #c3e2ff 0 1px, transparent 2px),
        radial-gradient(circle at 69% 91%, white 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 74% 41%, #d9c7ff 0 1.2px, transparent 2.5px),
        radial-gradient(circle at 86% 12%, white 0 0.7px, transparent 1.6px),
        radial-gradient(circle at 94% 55%, #bfe0ff 0 1px, transparent 2px);
}


/* SLOW DIAGONAL DRIFT */

@keyframes galaxyDrift {
    from {
        background-position:
            11px 37px,
            73px 121px;
    }

    to {
        background-position:
            95px -41px,
            -52px 204px;
    }
}


/* TWINKLE */

@keyframes starTwinkle {
    0% {
        opacity: 0.35;
        filter: brightness(0.9);
    }

    45% {
        opacity: 0.75;
        filter: brightness(1.25);
    }

    100% {
        opacity: 1;
        filter: brightness(1.5);
    }
}


/* =========================================================
   SHOOTING STARS
========================================================= */

.moving-stars-2::before,
.moving-stars-2::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(180,220,255,0.65),
            white
        );

    border-radius: 999px;

    opacity: 0;

    filter:
        drop-shadow(0 0 6px rgba(170,215,255,0.8));

    animation:
        shootingStar 11s ease-in-out infinite;
}


.moving-stars-2::before {
    top: 14%;
    left: 82%;

    animation-delay: 2s;
}


.moving-stars-2::after {
    top: 62%;
    left: 24%;

    animation-delay: 7s;
}


@keyframes shootingStar {
    0% {
        opacity: 0;

        transform:
            translate(0, 0)
            rotate(-24deg);
    }

    3% {
        opacity: 1;
    }

    10% {
        opacity: 0;

        transform:
            translate(-520px, 280px)
            rotate(-24deg);
    }

    100% {
        opacity: 0;
    }
}


/* KEEP CONTENT ABOVE STARS */

header,
main,
section,
footer {
    position: relative;
    z-index: 1;
}
/* =========================================================
   CRX GALAXY - REAL SPARKLE STARS
========================================================= */

.galaxy-stars {
    position: fixed;
    inset: 0;

    pointer-events: none;
    overflow: hidden;

    z-index: 0;
}


/* =========================================================
   ACTUAL STAR SHAPES
========================================================= */

.galaxy-star {
    position: absolute;

    width: 4px;
    height: 4px;

    background: white;

    border-radius: 50%;

    box-shadow:
        0 0 5px rgba(255,255,255,0.9),
        0 0 12px rgba(150,210,255,0.7);

    animation:
        galaxyStarTwinkle 4s ease-in-out infinite;
}


/* VERTICAL LIGHT RAY */

.galaxy-star::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 1px;
    height: 22px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.15),
            white,
            rgba(255,255,255,0.15),
            transparent
        );
}


/* HORIZONTAL LIGHT RAY */

.galaxy-star::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 22px;
    height: 1px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.15),
            white,
            rgba(255,255,255,0.15),
            transparent
        );
}


/* =========================================================
   RANDOM POSITIONS / SIZES
========================================================= */

.star-1 {
    top: 14%;
    left: 18%;
    transform: scale(1.2);
    animation-delay: 0s;
}

.star-2 {
    top: 32%;
    left: 41%;
    transform: scale(0.65);
    animation-delay: 1.7s;
}

.star-3 {
    top: 19%;
    left: 63%;
    transform: scale(1.6);
    animation-delay: 0.8s;
}

.star-4 {
    top: 69%;
    left: 72%;
    transform: scale(0.8);
    animation-delay: 2.6s;
}

.star-5 {
    top: 46%;
    left: 88%;
    transform: scale(1.1);
    animation-delay: 1.2s;
}

.star-6 {
    top: 79%;
    left: 29%;
    transform: scale(0.55);
    animation-delay: 3s;
}

.star-7 {
    top: 56%;
    left: 53%;
    transform: scale(1.35);
    animation-delay: 2.1s;
}

.star-8 {
    top: 11%;
    left: 81%;
    transform: scale(0.7);
    animation-delay: 0.4s;
}

.star-9 {
    top: 84%;
    left: 91%;
    transform: scale(1);
    animation-delay: 3.4s;
}

.star-10 {
    top: 39%;
    left: 9%;
    transform: scale(0.6);
    animation-delay: 1.5s;
}


/* DIFFERENT COLOUR GLOWS */

.star-3,
.star-7 {
    box-shadow:
        0 0 6px rgba(210,190,255,1),
        0 0 18px rgba(150,100,255,0.8);
}

.star-5,
.star-8 {
    box-shadow:
        0 0 6px rgba(190,230,255,1),
        0 0 18px rgba(80,180,255,0.8);
}


/* =========================================================
   TWINKLING
========================================================= */

@keyframes galaxyStarTwinkle {

    0% {
        opacity: 0.25;
        filter: brightness(0.7);
    }

    35% {
        opacity: 1;
        filter: brightness(1.8);
    }

    60% {
        opacity: 0.5;
        filter: brightness(1);
    }

    100% {
        opacity: 0.8;
        filter: brightness(1.4);
    }
}


/* =========================================================
   SHOOTING STARS
========================================================= */

.shooting-star {
    position: absolute;

    width: 160px;
    height: 2px;

    opacity: 0;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(160,215,255,0.4),
            rgba(220,240,255,0.9),
            white
        );

    border-radius: 999px;

    filter:
        drop-shadow(0 0 4px rgba(150,210,255,0.9));

    transform:
        rotate(-28deg);
}


.shooting-star-1 {
    top: 12%;
    left: 88%;

    animation:
        shootingStarOne 13s linear infinite;
}


.shooting-star-2 {
    top: 27%;
    left: 68%;

    animation:
        shootingStarTwo 18s linear infinite;

    animation-delay: 7s;
}


@keyframes shootingStarOne {

    0%,
    72% {
        opacity: 0;

        transform:
            translate(0, 0)
            rotate(-18deg);
    }

    74% {
        opacity: 1;
    }

    80% {
        opacity: 0;

        transform:
            translate(-520px, 140px)
            rotate(-18deg);
    }

    100% {
        opacity: 0;
    }
}


@keyframes shootingStarTwo {

    0%,
    80% {
        opacity: 0;

        transform:
            translate(0, 0)
            rotate(-15deg);
    }

    82% {
        opacity: 0.9;
    }

    88% {
        opacity: 0;

        transform:
            translate(-430px, 100px)
            rotate(-15deg);
    }

    100% {
        opacity: 0;
    }
}
/* =========================================================
   SLOW ROTATING CONSTELLATIONS
========================================================= */

.constellation {
    position: fixed;

    width: 280px;
    height: 280px;

    pointer-events: none;

    z-index: 0;

    opacity: 0.22;

    border-radius: 50%;

    background:
        radial-gradient(circle at 50% 10%, white 0 2px, transparent 3px),
        radial-gradient(circle at 80% 38%, white 0 1.5px, transparent 3px),
        radial-gradient(circle at 70% 76%, white 0 2px, transparent 3px),
        radial-gradient(circle at 28% 72%, white 0 1.5px, transparent 3px),
        radial-gradient(circle at 15% 35%, white 0 2px, transparent 3px);

    border:
        1px solid rgba(150, 210, 255, 0.08);

    animation:
        constellationRotate 90s linear infinite;
}


/* POSITIONS */

.constellation-one {
    top: 10%;
    left: 8%;
}


.constellation-two {
    top: 20%;
    right: 12%;

    width: 330px;
    height: 330px;

    animation-duration: 120s;
    animation-direction: reverse;
}


.constellation-three {
    bottom: 8%;
    left: 42%;

    width: 230px;
    height: 230px;

    animation-duration: 105s;
}


/* ROTATION */

@keyframes constellationRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}
/* =========================================================
   FINAL MOBILE NAV FIX
========================================================= */

@media (max-width: 1050px) {

    header .main-nav {
        position: absolute !important;

        top: calc(100% + 10px) !important;

        left: auto !important;
        right: 18px !important;

        width: min(340px, calc(100vw - 36px)) !important;
        max-width: 340px !important;

        padding: 12px !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 4px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 23, 35, 0.97),
                rgba(13, 13, 35, 0.97)
            ) !important;

        border:
            1px solid rgba(102, 225, 255, 0.32) !important;

        clip-path:
            polygon(
                12px 0,
                100% 0,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                0 100%,
                0 12px
            );

        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.42);

        backdrop-filter:
            blur(12px);

        z-index: 9999 !important;
    }


    header .main-nav.is-open {
        display: flex !important;
    }


    header .main-nav a {
        width: 100% !important;

        padding:
            15px
            18px !important;

        text-align: center !important;

        font-size: 13px !important;
    }

}
/* =========================================================
   FINAL MOBILE NAV FIX
========================================================= */

@media (max-width: 1050px) {

    header .main-nav {
        position: absolute !important;

        top: calc(100% + 10px) !important;

        left: auto !important;
        right: 18px !important;

        width: min(340px, calc(100vw - 36px)) !important;
        max-width: 340px !important;

        padding: 12px !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 4px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 23, 35, 0.97),
                rgba(13, 13, 35, 0.97)
            ) !important;

        border:
            1px solid rgba(102, 225, 255, 0.32) !important;

        clip-path:
            polygon(
                12px 0,
                100% 0,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                0 100%,
                0 12px
            );

        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.42);

        backdrop-filter:
            blur(12px);

        z-index: 9999 !important;
    }


    header .main-nav.is-open {
        display: flex !important;
    }


    header .main-nav a {
        width: 100% !important;

        padding:
            15px
            18px !important;

        text-align: center !important;

        font-size: 13px !important;
    }

}
/* =========================================================
   MOBILE NAV HEIGHT FIX
========================================================= */

@media (max-width: 600px) {

    header .main-nav {
        max-height: calc(100vh - 95px) !important;

        overflow-y: auto !important;

        padding:
            8px !important;

        gap:
            2px !important;
    }


    header .main-nav a {
        padding:
            11px
            14px !important;

        font-size:
            12px !important;

        line-height:
            1.2 !important;
    }

}
/* =========================================================
   FINAL HEADER STACKING FIX
========================================================= */

header {
    position: relative !important;
    z-index: 10000 !important;
}


@media (max-width: 1050px) {

    header {
        position: relative !important;
        z-index: 10000 !important;
        isolation: isolate;
    }


    header .main-nav {
        z-index: 10001 !important;
        pointer-events: auto !important;
    }


    header .main-nav a {
        position: relative;
        z-index: 10002 !important;
        pointer-events: auto !important;
    }


    .mobile-menu-toggle {
        position: relative;
        z-index: 10003 !important;
    }

}
/* =========================================================
   CRX LIVE COSMIC BACKGROUND
   Keeps the existing homepage composition, then layers
   mouse parallax + aligned constellation twinkles + FX.
========================================================= */

.home-page {
    --cosmic-mouse-x: 0px;
    --cosmic-mouse-y: 0px;

    position: relative;
    isolation: isolate;

    /* The same artwork is now rendered by the fixed live layer below. */
    background-image: none !important;
    background-color: #05090d;
}

.crx-cosmic-live-bg {
    position: fixed;
    inset: -10px;

    z-index: 0;
    pointer-events: none;

    background-color: #05090d;
    background-image:
        linear-gradient(
            rgba(3, 7, 12, 0.18),
            rgba(3, 7, 12, 0.18)
        ),
        url("cryonix-cosmic-background.webp");

    background-size: cover;
    background-repeat: no-repeat;
    background-position:
        calc(50% + var(--cosmic-mouse-x))
        calc(var(--cosmic-y, 22%) + var(--cosmic-mouse-y));

    will-change: background-position, filter;

    animation:
        crxCosmicLiveBreath 14s ease-in-out infinite alternate;
}

#crx-cosmic-fx {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
    pointer-events: none;
}

/* Disable the older randomly positioned star layer so stars never
   appear to twinkle on top of the crystal formations. */
.home-page .galaxy-stars {
    display: none !important;
}

@keyframes crxCosmicLiveBreath {
    from {
        filter: brightness(1) saturate(1);
    }

    to {
        filter: brightness(1.018) saturate(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crx-cosmic-live-bg {
        animation: none;
        background-position:
            center
            var(--cosmic-y, 22%);
    }
}

/* =========================================================
   CRYONIX SITE POLISH PASS
   Frosted header, active nav mist, section haze,
   cursor-reactive cards, scroll reveals, footer fade,
   and emblem wake-up glow.
========================================================= */

/* ---------------------------------------------------------
   FROSTED / GLASS HEADER
--------------------------------------------------------- */

header {
    position: sticky !important;
    top: 0;
    z-index: 10000 !important;

    background:
        linear-gradient(
            180deg,
            rgba(4, 13, 24, 0.78) 0%,
            rgba(4, 13, 24, 0.58) 58%,
            rgba(4, 13, 24, 0.46) 100%
        ) !important;

    border-bottom:
        1px solid rgba(111, 225, 255, 0.16) !important;

    backdrop-filter:
        blur(13px)
        saturate(1.18);

    -webkit-backdrop-filter:
        blur(13px)
        saturate(1.18);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.14),
        inset 0 -1px 0 rgba(129, 233, 255, 0.025);

    transition:
        background 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        backdrop-filter 0.30s ease;
}

header.is-scrolled {
    background:
        linear-gradient(
            180deg,
            rgba(3, 11, 20, 0.94) 0%,
            rgba(4, 15, 26, 0.88) 100%
        ) !important;

    border-bottom-color:
        rgba(116, 229, 255, 0.28) !important;

    backdrop-filter:
        blur(18px)
        saturate(1.25);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(1.25);

    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(84, 203, 255, 0.035),
        inset 0 -1px 0 rgba(145, 237, 255, 0.05);
}


/* ---------------------------------------------------------
   HEADER EMBLEM — QUIET WAKE-UP GLOW
--------------------------------------------------------- */

.header-logo {
    position: relative;
    isolation: isolate;
}

.header-logo::before {
    content: "";

    position: absolute;
    inset: 14% 5%;

    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(180, 247, 255, 0.30) 0%,
            rgba(83, 215, 255, 0.18) 32%,
            rgba(105, 103, 255, 0.08) 58%,
            transparent 78%
        );

    filter: blur(13px);

    opacity: 0;

    transform: scale(0.72);

    transition:
        opacity 0.30s ease,
        transform 0.36s ease,
        filter 0.30s ease;
}

.header-emblem {
    transition:
        transform 0.34s ease,
        filter 0.34s ease !important;
}

.header-brand:hover .header-logo::before,
.header-brand:focus-within .header-logo::before {
    opacity: 0.78;

    transform: scale(1.10);

    filter: blur(16px);
}

.header-brand:hover .header-emblem,
.header-brand:focus-within .header-emblem {
    transform: scale(1.025);

    filter:
        brightness(1.08)
        drop-shadow(0 0 5px rgba(222, 252, 255, 0.52))
        drop-shadow(0 0 14px rgba(83, 220, 255, 0.28))
        drop-shadow(0 0 28px rgba(106, 116, 255, 0.12)) !important;
}


/* ---------------------------------------------------------
   ACTIVE NAV — KEEP A LOW COSMIC MIST PRESENT
--------------------------------------------------------- */

body.home-page:not(.error-page):not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.zenith-page):not(.nova-page)
header nav a[href="index.html"]::before,

body.teams-page
header nav a[href="teams.html"]::before,

body.zenith-page
header nav a[href="teams.html"]::before,

body.nova-page
header nav a[href="teams.html"]::before,

body.matches-page
header nav a[href="matches.html"]::before,

body.about-page
header nav a[href="about.html"]::before,

body.history-page
header nav a[href="history.html"]::before,

body.founder-page
header nav a[href="founder.html"]::before {
    opacity: 0.34;

    transform:
        translate(-50%, -50%)
        scale(0.96);

    filter: blur(12px);
}


/* Hover remains the brighter activation state. */

header nav a:hover::before,
header nav a:focus-visible::before {
    opacity: 1;

    animation:
        crxNavMistDrift 2.8s ease-in-out infinite alternate;
}

@keyframes crxNavMistDrift {
    from {
        background-position: 42% 50%;
    }

    to {
        background-position: 58% 50%;
    }
}


/* ---------------------------------------------------------
   SECTION TRANSITION HAZE
   Only the pages using the main CRX cosmic environment.
--------------------------------------------------------- */

body.home-page > section,
body.home-page main > section:not(#home):not(.error-section) {
    box-shadow:
        inset 0 1px 0 rgba(130, 231, 255, 0.07),
        inset 0 36px 52px -52px rgba(92, 214, 255, 0.34),
        inset 0 -28px 45px -50px rgba(114, 85, 255, 0.13);
}


/* ---------------------------------------------------------
   CURSOR-REACTIVE CARD LIGHTING
   site-polish.js injects .crx-pointer-glow.
--------------------------------------------------------- */

.crx-interactive-surface {
    position: relative;
    isolation: isolate;
}

.crx-pointer-glow {
    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(
            230px circle at var(--crx-pointer-x, 50%) var(--crx-pointer-y, 50%),
            rgba(206, 249, 255, 0.13) 0%,
            rgba(87, 221, 255, 0.075) 28%,
            rgba(102, 95, 255, 0.035) 48%,
            transparent 72%
        );

    opacity: 0;

    transition:
        opacity 0.24s ease;
}

.crx-interactive-surface.is-pointer-lit .crx-pointer-glow {
    opacity: 1;
}


/* ---------------------------------------------------------
   SCROLL-IN REVEALS
--------------------------------------------------------- */

.crx-reveal {
    opacity: 0;

    transform:
        translate3d(0, 22px, 0);

    filter: blur(1.5px);

    transition:
        opacity 0.62s ease var(--crx-reveal-delay, 0ms),
        transform 0.72s cubic-bezier(0.2, 0.72, 0.2, 1) var(--crx-reveal-delay, 0ms),
        filter 0.62s ease var(--crx-reveal-delay, 0ms);

    will-change:
        opacity,
        transform,
        filter;
}

.crx-reveal.is-visible {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    filter: blur(0);
}


/* Slightly calmer reveal for large hero areas. */

.hero-content.crx-reveal,
.team-page-hero-content.crx-reveal,
.founder-hero-layout.crx-reveal,
.error-content.crx-reveal {
    transform:
        translate3d(0, 14px, 0);
}

.hero-content.crx-reveal.is-visible,
.team-page-hero-content.crx-reveal.is-visible,
.founder-hero-layout.crx-reveal.is-visible,
.error-content.crx-reveal.is-visible {
    transform:
        translate3d(0, 0, 0);
}


/* ---------------------------------------------------------
   FOOTER — FADE THE PAGE INTO DARKNESS
--------------------------------------------------------- */

.site-footer {
    isolation: isolate;
}

.site-footer::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: -72px;

    height: 72px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(3, 8, 13, 0.16) 30%,
            rgba(3, 8, 13, 0.58) 72%,
            rgba(3, 7, 10, 0.96) 100%
        );

    z-index: -1;
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .crx-reveal,
    .crx-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    header nav a:hover::before,
    header nav a:focus-visible::before {
        animation: none !important;
    }

    .header-emblem,
    .header-logo::before,
    .crx-pointer-glow {
        transition: none !important;
    }

}


/* ---------------------------------------------------------
   MOBILE POLISH
--------------------------------------------------------- */

@media (max-width: 1050px) {

    header {
        position: sticky !important;
        top: 0 !important;
    }

    header .main-nav {
        backdrop-filter:
            blur(18px)
            saturate(1.18) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(1.18) !important;
    }

    header nav a::before {
        width: 78% !important;
        height: 38px !important;
    }

}
/* =====================================================
   CRX CROSS-PAGE TRANSITION
   Smooth same-origin navigation without a loading screen.
===================================================== */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
    animation-name: crx-page-exit;
}

::view-transition-new(root) {
    animation-name: crx-page-enter;
}

@keyframes crx-page-exit {
    from {
        opacity: 1;
        filter: blur(0);
    }

    to {
        opacity: 0.72;
        filter: blur(1.5px);
    }
}

@keyframes crx-page-enter {
    from {
        opacity: 0.72;
        filter: blur(1.5px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 1ms;
    }
}
/* =========================================================
   CRYONIX — SMALL / MINIMISED WINDOW BACKGROUNDS

   HOME:
   Uses the image directly on #home.

   OTHER NAV PAGES:
   Keep the fixed cosmic background and force it to COVER
   the entire viewport so there are NEVER black side bars.
========================================================= */

@media (max-width: 1100px) {

    /* =====================================================
       ACTUAL HOME PAGE ONLY
    ===================================================== */

    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    .crx-cosmic-live-bg {
        display: none !important;
    }


    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    #home {
        width: 100% !important;
        max-width: none !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(3, 7, 12, 0.22) 0%,
                rgba(3, 7, 12, 0.08) 48%,
                rgba(3, 7, 12, 0.02) 100%
            ),
            url("cryonix-cosmic-background.webp") !important;

        background-size:
            cover !important;

        background-position:
            center center !important;

        background-repeat:
            no-repeat !important;
    }



    /* =====================================================
       TEAMS / MATCHES / ABOUT / HISTORY / FOUNDER / 404

       KEEP THE LIVE BACKGROUND.
    ===================================================== */

    body.teams-page .crx-cosmic-live-bg,
    body.matches-page .crx-cosmic-live-bg,
    body.about-page .crx-cosmic-live-bg,
    body.history-page .crx-cosmic-live-bg,
    body.founder-page .crx-cosmic-live-bg,
    body.error-page .crx-cosmic-live-bg {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background-color:
            #05090d !important;

        background-image:
            linear-gradient(
                rgba(3, 7, 12, 0.18),
                rgba(3, 7, 12, 0.18)
            ),
            url("cryonix-cosmic-background.webp") !important;

        /*
            THIS IS THE IMPORTANT FIX.

            Never use:
            auto calc(100vh + 20px)

            because that preserves the artwork ratio from HEIGHT
            and leaves black bars on the left/right.
        */

        background-size:
            cover !important;

        background-position:
            center center !important;

        background-repeat:
            no-repeat !important;

        z-index:
            0 !important;

        pointer-events:
            none !important;
    }



    /* =====================================================
       COSMIC FX CANVAS
    ===================================================== */

    body.teams-page #crx-cosmic-fx,
    body.matches-page #crx-cosmic-fx,
    body.about-page #crx-cosmic-fx,
    body.history-page #crx-cosmic-fx,
    body.founder-page #crx-cosmic-fx,
    body.error-page #crx-cosmic-fx {
        display: block !important;

        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        z-index: 0 !important;

        pointer-events:
            none !important;
    }

}



/* =========================================================
   EXTRA SMALL WINDOWS
   FORCE COVER — DO NOT SCALE FROM HEIGHT
========================================================= */

@media (max-width: 800px) {

    body.teams-page .crx-cosmic-live-bg,
    body.matches-page .crx-cosmic-live-bg,
    body.about-page .crx-cosmic-live-bg,
    body.history-page .crx-cosmic-live-bg,
    body.founder-page .crx-cosmic-live-bg,
    body.error-page .crx-cosmic-live-bg {
        background-size:
            cover !important;

        background-position:
            center center !important;

        width:
            100vw !important;

        height:
            100vh !important;
    }

}
/* =========================================================
   NEXUS — TEAM CARD
   ELECTRIC TEAL / AQUA / DEEP NAVY
========================================================= */

.team-nexus {
    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(69, 240, 208, 0.16),
            transparent 34%
        ),

        radial-gradient(
            circle at 72% 78%,
            rgba(59, 167, 255, 0.10),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(6, 28, 34, 0.98),
            rgba(4, 16, 24, 0.99)
        );

    border-color:
        rgba(69, 240, 208, 0.28);
}


/* EMBLEM */

.team-nexus .team-card-logo {
    width:
        520px;

    right:
        -95px;

    opacity:
        0.11;

    filter:
        brightness(0.90)
        contrast(1.06)
        saturate(1.18)
        hue-rotate(-18deg)
        drop-shadow(
            0 0 18px
            rgba(69, 240, 208, 0.15)
        )
        drop-shadow(
            0 0 38px
            rgba(59, 167, 255, 0.12)
        );
}


/* TOP ACCENT */

.team-nexus::before {
    background:
        linear-gradient(
            90deg,
            #45f0d0,
            #3ba7ff,
            transparent
        );
}


/* NUMBER + TYPE */

.team-nexus .team-number {
    color:
        #73f4dd;
}


.team-nexus .team-type {
    color:
        #b7d9d4;
}


/* STATUS */

.team-nexus .team-status {
    color:
        #8ffff0;

    background:
        rgba(69, 240, 208, 0.06);

    border-color:
        rgba(69, 240, 208, 0.25);
}


/* TAGS */

.team-nexus .team-tags span {
    border-color:
        rgba(69, 240, 208, 0.18);

    background:
        rgba(15, 62, 66, 0.22);
}


/* LINK */

.team-nexus .team-link {
    color:
        #5cebd3;
}


/* HOVER */

.team-nexus:hover {
    border-color:
        rgba(107, 255, 229, 0.50);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.30),

        0 0 28px
        rgba(69, 240, 208, 0.10),

        0 0 38px
        rgba(59, 167, 255, 0.06);
}


.team-nexus:hover .team-card-logo {
    opacity:
        0.17;

    filter:
        brightness(1.04)
        contrast(1.08)
        saturate(1.22)
        hue-rotate(-18deg)
        drop-shadow(
            0 0 22px
            rgba(69, 240, 208, 0.22)
        )
        drop-shadow(
            0 0 46px
            rgba(59, 167, 255, 0.16)
        );
}


/* =========================================================
   NEXUS — HOME SPOTLIGHT
========================================================= */

.spotlight-nexus {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(69, 240, 208, 0.10) 56.2%,
            rgba(69, 240, 208, 0.10) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(59, 167, 255, 0.08) 24.2%,
            rgba(59, 167, 255, 0.08) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(8, 42, 48, 0.62),
            rgba(7, 26, 34, 0.66) 52%,
            rgba(4, 11, 20, 0.72)
        );

    border-color:
        rgba(69, 240, 208, 0.32);
}


.spotlight-nexus:hover {
    border-color:
        rgba(116, 255, 232, 0.62);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 26px
        rgba(69, 240, 208, 0.10),

        0 0 34px
        rgba(59, 167, 255, 0.06);
}


/* SPOTLIGHT EMBLEM */

.spotlight-nexus .spotlight-logo {
    width:
        390px;

    right:
        -65px;

    opacity:
        0.10;

    filter:
        brightness(0.92)
        contrast(1.05)
        saturate(1.18)
        hue-rotate(-18deg)
        drop-shadow(
            0 0 18px
            rgba(69, 240, 208, 0.14)
        )
        drop-shadow(
            0 0 38px
            rgba(59, 167, 255, 0.10)
        );
}


.spotlight-nexus:hover .spotlight-logo {
    opacity:
        0.16;
}


/* SPOTLIGHT TEXT */

.spotlight-nexus .spotlight-code,
.spotlight-nexus .spotlight-content a {
    color:
        #65ecd6;
}


/* MOBILE */

@media (max-width: 600px) {

    .team-nexus .team-card-logo {
        width:
            390px;

        right:
            -125px;
    }


    .spotlight-nexus .spotlight-logo {
        width:
            300px;

        right:
            -95px;
    }

}
/* =========================================================
   CRYONIX TEAM COLOUR IDENTITIES

   ZENITH = ICE / FROST
   NOVA   = VIOLET / COSMIC
   NEXUS  = ELECTRIC TEAL / NETWORK
========================================================= */


/* =========================================================
   ZENITH — TEAMS PAGE
========================================================= */

.team-zenith {
    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(151, 239, 255, 0.16),
            transparent 34%
        ),

        radial-gradient(
            circle at 70% 80%,
            rgba(77, 171, 225, 0.09),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(6, 29, 39, 0.98),
            rgba(3, 14, 21, 0.99)
        );

    border-color:
        rgba(140, 239, 255, 0.30);
}


.team-zenith .team-card-logo {
    opacity:
        0.11;

    filter:
        brightness(1.02)
        contrast(1.05)
        saturate(0.92)
        drop-shadow(
            0 0 18px
            rgba(190, 248, 255, 0.16)
        )
        drop-shadow(
            0 0 40px
            rgba(80, 198, 255, 0.12)
        );
}


.team-zenith::before {
    background:
        linear-gradient(
            90deg,
            #d9fbff,
            #72ddff,
            transparent
        );
}


.team-zenith .team-number {
    color:
        #c6f8ff;
}


.team-zenith .team-type {
    color:
        #b6d5dc;
}


.team-zenith .team-status {
    color:
        #c9f8ff;

    background:
        rgba(115, 222, 255, 0.06);

    border-color:
        rgba(151, 239, 255, 0.26);
}


.team-zenith .team-tags span {
    background:
        rgba(44, 108, 128, 0.18);

    border-color:
        rgba(140, 239, 255, 0.17);
}


.team-zenith .team-link {
    color:
        #8cefff;
}


.team-zenith:hover {
    border-color:
        rgba(190, 248, 255, 0.55);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.30),

        0 0 28px
        rgba(126, 234, 255, 0.11);
}


.team-zenith:hover .team-card-logo {
    opacity:
        0.18;

    filter:
        brightness(1.16)
        contrast(1.06)
        saturate(0.98)
        drop-shadow(
            0 0 22px
            rgba(215, 251, 255, 0.24)
        )
        drop-shadow(
            0 0 46px
            rgba(86, 215, 255, 0.17)
        );
}


/* =========================================================
   NOVA — TEAMS PAGE
========================================================= */

.team-nova {
    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(165, 114, 255, 0.22),
            transparent 35%
        ),

        radial-gradient(
            circle at 68% 82%,
            rgba(79, 91, 255, 0.11),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(31, 20, 68, 0.98),
            rgba(11, 10, 34, 0.99)
        );

    border-color:
        rgba(183, 157, 255, 0.32);
}


.team-nova .team-card-logo {
    opacity:
        0.12;

    filter:
        brightness(0.96)
        contrast(1.07)
        saturate(1.32)
        drop-shadow(
            0 0 18px
            rgba(191, 155, 255, 0.18)
        )
        drop-shadow(
            0 0 42px
            rgba(103, 78, 255, 0.14)
        );
}


.team-nova::before {
    background:
        linear-gradient(
            90deg,
            #c5a8ff,
            #785cff,
            transparent
        );
}


.team-nova .team-number {
    color:
        #c8afff;
}


.team-nova .team-type {
    color:
        #c7bddc;
}


.team-nova .team-status {
    color:
        #ded1ff;

    background:
        rgba(139, 97, 255, 0.07);

    border-color:
        rgba(183, 157, 255, 0.28);
}


.team-nova .team-tags span {
    background:
        rgba(76, 48, 133, 0.22);

    border-color:
        rgba(181, 151, 255, 0.18);
}


.team-nova .team-link {
    color:
        #bca3ff;
}


.team-nova:hover {
    border-color:
        rgba(211, 190, 255, 0.58);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.30),

        0 0 28px
        rgba(153, 111, 255, 0.12),

        0 0 40px
        rgba(90, 72, 255, 0.07);
}


.team-nova:hover .team-card-logo {
    opacity:
        0.19;

    filter:
        brightness(1.08)
        contrast(1.08)
        saturate(1.38)
        drop-shadow(
            0 0 22px
            rgba(205, 178, 255, 0.24)
        )
        drop-shadow(
            0 0 48px
            rgba(128, 91, 255, 0.18)
        );
}


/* =========================================================
   NEXUS — TEAMS PAGE
========================================================= */

.team-nexus {
    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(69, 240, 208, 0.17),
            transparent 34%
        ),

        radial-gradient(
            circle at 72% 78%,
            rgba(59, 167, 255, 0.09),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(5, 31, 34, 0.98),
            rgba(3, 16, 23, 0.99)
        );

    border-color:
        rgba(69, 240, 208, 0.30);
}


.team-nexus .team-card-logo {
    opacity:
        0.11;

    filter:
        brightness(0.92)
        contrast(1.06)
        saturate(1.18)
        hue-rotate(-18deg)
        drop-shadow(
            0 0 18px
            rgba(69, 240, 208, 0.16)
        )
        drop-shadow(
            0 0 40px
            rgba(59, 167, 255, 0.12)
        );
}


.team-nexus::before {
    background:
        linear-gradient(
            90deg,
            #45f0d0,
            #3ba7ff,
            transparent
        );
}


.team-nexus .team-number {
    color:
        #73f4dd;
}


.team-nexus .team-type {
    color:
        #b7d9d4;
}


.team-nexus .team-status {
    color:
        #8ffff0;

    background:
        rgba(69, 240, 208, 0.06);

    border-color:
        rgba(69, 240, 208, 0.26);
}


.team-nexus .team-tags span {
    background:
        rgba(15, 62, 66, 0.22);

    border-color:
        rgba(69, 240, 208, 0.18);
}


.team-nexus .team-link {
    color:
        #5cebd3;
}


.team-nexus:hover {
    border-color:
        rgba(107, 255, 229, 0.52);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.30),

        0 0 28px
        rgba(69, 240, 208, 0.10),

        0 0 38px
        rgba(59, 167, 255, 0.06);
}


.team-nexus:hover .team-card-logo {
    opacity:
        0.18;

    filter:
        brightness(1.05)
        contrast(1.08)
        saturate(1.22)
        hue-rotate(-18deg)
        drop-shadow(
            0 0 22px
            rgba(69, 240, 208, 0.22)
        )
        drop-shadow(
            0 0 46px
            rgba(59, 167, 255, 0.16)
        );
}


/* =========================================================
   HOME SPOTLIGHT — ZENITH
========================================================= */

.spotlight-zenith {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(199, 248, 255, 0.11) 56.2%,
            rgba(199, 248, 255, 0.11) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(92, 211, 240, 0.08) 24.2%,
            rgba(92, 211, 240, 0.08) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(9, 45, 57, 0.60),
            rgba(5, 28, 40, 0.64) 52%,
            rgba(2, 10, 18, 0.72)
        );

    border-color:
        rgba(177, 241, 255, 0.36);
}


.spotlight-zenith:hover {
    border-color:
        rgba(213, 250, 255, 0.68);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 26px
        rgba(126, 234, 255, 0.10);
}


.spotlight-zenith .spotlight-code,
.spotlight-zenith .spotlight-content a {
    color:
        #8cefff;
}


/* =========================================================
   HOME SPOTLIGHT — NOVA
========================================================= */

.spotlight-nova {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(224, 208, 255, 0.13) 56.2%,
            rgba(224, 208, 255, 0.13) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(151, 108, 241, 0.10) 24.2%,
            rgba(151, 108, 241, 0.10) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(47, 31, 91, 0.61),
            rgba(26, 22, 65, 0.64) 52%,
            rgba(7, 8, 25, 0.72)
        );

    border-color:
        rgba(200, 178, 255, 0.38);
}


.spotlight-nova:hover {
    border-color:
        rgba(225, 205, 255, 0.69);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 26px
        rgba(169, 132, 255, 0.11);
}


.spotlight-nova .spotlight-code,
.spotlight-nova .spotlight-content a {
    color:
        #bca3ff;
}


/* =========================================================
   HOME SPOTLIGHT — NEXUS
========================================================= */

.spotlight-nexus {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(69, 240, 208, 0.10) 56.2%,
            rgba(69, 240, 208, 0.10) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(59, 167, 255, 0.08) 24.2%,
            rgba(59, 167, 255, 0.08) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(8, 42, 48, 0.62),
            rgba(7, 26, 34, 0.66) 52%,
            rgba(4, 11, 20, 0.72)
        );

    border-color:
        rgba(69, 240, 208, 0.34);
}


.spotlight-nexus:hover {
    border-color:
        rgba(116, 255, 232, 0.64);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 26px
        rgba(69, 240, 208, 0.10),

        0 0 34px
        rgba(59, 167, 255, 0.06);
}


.spotlight-nexus .spotlight-code,
.spotlight-nexus .spotlight-content a {
    color:
        #65ecd6;
}


/* =========================================================
   SPOTLIGHT EMBLEM TINTS
========================================================= */

.spotlight-zenith .spotlight-logo {
    filter:
        brightness(1.05)
        saturate(0.92)
        drop-shadow(
            0 0 20px
            rgba(183, 245, 255, 0.14)
        );
}


.spotlight-nova .spotlight-logo {
    filter:
        brightness(0.98)
        saturate(1.30)
        drop-shadow(
            0 0 20px
            rgba(184, 151, 255, 0.16)
        );
}


.spotlight-nexus .spotlight-logo {
    filter:
        brightness(0.94)
        saturate(1.18)
        hue-rotate(-18deg)
        drop-shadow(
            0 0 20px
            rgba(69, 240, 208, 0.14)
        );
}
/* =========================================================
   NEXUS — ROSTER + COMPETITION CARDS
   ELECTRIC TEAL / AQUA / DEEP NAVY
========================================================= */


/* =========================================================
   NEXUS ROSTER GRID
========================================================= */

.nexus-page .roster-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   NEXUS ROSTER CARD
========================================================= */

.nexus-page .roster-card {
    position: relative;

    min-height: 260px;

    padding:
        24px
        22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 82% 18%,
            rgba(69, 240, 208, 0.07),
            transparent 35%
        ),

        radial-gradient(
            circle at 20% 88%,
            rgba(59, 167, 255, 0.035),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(5, 30, 34, 0.96),
            rgba(3, 14, 22, 0.98)
        );

    border:
        1px solid
        rgba(69, 240, 208, 0.20);

    clip-path:
        polygon(
            0 0,
            calc(100% - 20px) 0,
            100% 20px,
            100% 100%,
            20px 100%,
            0 calc(100% - 20px)
        );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* =========================================================
   ROSTER TOP LIGHT
========================================================= */

.nexus-page .roster-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 90px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #a8fff0,
            #45f0d0,
            #3ba7ff,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* =========================================================
   ROSTER NETWORK DETAIL
========================================================= */

.nexus-page .roster-card::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -78px;
    bottom: -88px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(69, 240, 208, 0.06);

    box-shadow:
        inset 0 0 24px
        rgba(59, 167, 255, 0.025);

    pointer-events: none;
}


/* =========================================================
   ROSTER NUMBER
========================================================= */

.nexus-page .roster-card-number {
    position: relative;
    z-index: 2;

    color:
        #6eaaa1;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}


/* =========================================================
   ROSTER CONTENT
========================================================= */

.nexus-page .roster-card-content {
    position: relative;
    z-index: 2;
}


.nexus-page .roster-card-team {
    margin:
        0 0 10px;

    color:
        #45f0d0;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.nexus-page .roster-card h3 {
    margin:
        0 0 10px;

    color:
        #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    font-weight:
        600;

    line-height:
        1.1;
}


.nexus-page .roster-card-tag {
    margin:
        0;

    color:
        #78918f;

    font-size:
        12px;
}


/* =========================================================
   PLAYER ROLE
========================================================= */

.nexus-page .player-card-details {
    margin-top:
        28px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.nexus-page .player-card-details span {
    padding:
        6px
        9px;

    color:
        #87d8cb;

    background:
        rgba(21, 78, 76, 0.25);

    border:
        1px solid
        rgba(69, 240, 208, 0.18);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


/* =========================================================
   AGENT POOL
========================================================= */

.nexus-page .player-card-agent-pool {
    margin:
        12px 0 0;

    color:
        #718784;

    font-size:
        10px;

    line-height:
        1.5;
}


/* =========================================================
   ROSTER HOVER
========================================================= */

.nexus-page .roster-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(113, 255, 231, 0.62);

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(69, 240, 208, 0.13),
            transparent 38%
        ),

        radial-gradient(
            circle at 20% 88%,
            rgba(59, 167, 255, 0.055),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(7, 38, 41, 0.98),
            rgba(3, 16, 24, 0.99)
        );

    box-shadow:

        0 18px 38px
        rgba(0, 0, 0, 0.34),

        0 0 16px
        rgba(69, 240, 208, 0.10),

        0 0 32px
        rgba(59, 167, 255, 0.06);
}


.nexus-page .roster-card:hover::before {
    width:
        165px;

    filter:

        drop-shadow(
            0 0 5px
            rgba(176, 255, 242, 0.55)
        )

        drop-shadow(
            0 0 12px
            rgba(69, 240, 208, 0.34)
        );
}


.nexus-page .roster-card:hover .roster-card-number {
    color:
        #a5fff0;

    text-shadow:
        0 0 10px
        rgba(69, 240, 208, 0.28);
}


.nexus-page .roster-card:hover .player-card-details span {
    color:
        #cafff6;

    background:
        rgba(69, 240, 208, 0.10);

    border-color:
        rgba(69, 240, 208, 0.38);
}


/* =========================================================
   NEXUS COMPETITION GRID
========================================================= */

.nexus-page .team-competition-grid {
    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        22px;
}


/* =========================================================
   COMPETITION CARD
========================================================= */

.nexus-page .competition-card {
    position:
        relative;

    min-height:
        300px;

    padding:
        28px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    background:

        radial-gradient(
            circle at 88% 15%,
            rgba(69, 240, 208, 0.06),
            transparent 31%
        ),

        radial-gradient(
            circle at 14% 88%,
            rgba(59, 167, 255, 0.035),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(5, 29, 34, 0.97),
            rgba(3, 13, 22, 0.99)
        );

    border:
        1px solid
        rgba(69, 240, 208, 0.19);

    clip-path:
        polygon(
            0 0,
            calc(100% - 22px) 0,
            100% 22px,
            100% 100%,
            22px 100%,
            0 calc(100% - 22px)
        );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* =========================================================
   COMPETITION TOP LIGHT
========================================================= */

.nexus-page .competition-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        110px;

    height:
        2px;

    background:

        linear-gradient(
            90deg,
            #a8fff0,
            #45f0d0,
            #3ba7ff,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


/* =========================================================
   COMPETITION NETWORK DETAIL
========================================================= */

.nexus-page .competition-card::after {
    content:
        "";

    position:
        absolute;

    width:
        210px;

    height:
        210px;

    right:
        -110px;

    bottom:
        -120px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(69, 240, 208, 0.055);

    box-shadow:
        inset 0 0 30px
        rgba(59, 167, 255, 0.02);

    pointer-events:
        none;
}


/* =========================================================
   COMPETITION TOP ROW
========================================================= */

.nexus-page .competition-card-top {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        34px;
}


/* =========================================================
   COMPETITION LABEL
========================================================= */

.nexus-page .competition-label {
    margin:
        0 0 8px;

    color:
        #45f0d0;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


/* =========================================================
   COMPETITION TITLE
========================================================= */

.nexus-page .competition-card h3 {
    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    font-weight:
        600;
}


/* =========================================================
   STATUS
========================================================= */

.nexus-page .competition-status {
    padding:
        7px
        10px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    border:
        1px solid
        rgba(69, 240, 208, 0.20);
}


.nexus-page .competition-status.active {
    color:
        #a7fff1;

    background:
        rgba(69, 240, 208, 0.08);

    border-color:
        rgba(69, 240, 208, 0.34);
}


.nexus-page .competition-status.completed {
    color:
        #718b87;

    background:
        rgba(35, 87, 86, 0.08);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.nexus-page .competition-description {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 30px;

    max-width:
        560px;

    color:
        #8da3a0;

    font-size:
        14px;

    line-height:
        1.75;
}


/* =========================================================
   META TAGS
========================================================= */

.nexus-page .competition-meta {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        auto;
}


.nexus-page .competition-meta span {
    padding:
        6px
        9px;

    color:
        #83a7a2;

    background:
        rgba(18, 69, 69, 0.24);

    border:
        1px solid
        rgba(69, 240, 208, 0.14);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.1px;
}


/* =========================================================
   FEATURED / CURRENT CARD
========================================================= */

.nexus-page .competition-current {
    border-color:
        rgba(69, 240, 208, 0.34);

    background:

        radial-gradient(
            circle at 88% 15%,
            rgba(69, 240, 208, 0.12),
            transparent 34%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(59, 167, 255, 0.045),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(6, 36, 39, 0.99),
            rgba(3, 14, 22, 0.99)
        );
}


/* =========================================================
   COMPETITION HOVER
========================================================= */

.nexus-page .competition-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(112, 255, 231, 0.60);

    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(69, 240, 208, 0.13),
            transparent 36%
        ),

        radial-gradient(
            circle at 14% 90%,
            rgba(59, 167, 255, 0.05),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(7, 39, 42, 0.99),
            rgba(3, 15, 23, 0.99)
        );

    box-shadow:

        0 18px 40px
        rgba(0, 0, 0, 0.34),

        0 0 16px
        rgba(69, 240, 208, 0.09),

        0 0 32px
        rgba(59, 167, 255, 0.06);
}


.nexus-page .competition-card:hover::before {
    width:
        190px;

    filter:

        drop-shadow(
            0 0 5px
            rgba(177, 255, 242, 0.52)
        )

        drop-shadow(
            0 0 12px
            rgba(69, 240, 208, 0.30)
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .nexus-page .roster-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .nexus-page .team-competition-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .nexus-page .roster-grid {
        grid-template-columns:
            1fr;
    }


    .nexus-page .roster-card {
        min-height:
            220px;
    }

}


@media (max-width: 600px) {

    .nexus-page .competition-card {
        min-height:
            270px;

        padding:
            24px;
    }

}

/* =========================================================
   NEXUS — FINAL CRYONIX COLOUR IDENTITY

   DEEP NAVY
   ELECTRIC CRX BLUE
   VIOLET / PURPLE SECONDARY

   This overrides the previous teal Nexus styling.
========================================================= */


/* =========================================================
   NEXUS — TEAMS PAGE CARD
========================================================= */

.team-nexus {
    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(63, 140, 255, 0.18),
            transparent 34%
        ),

        radial-gradient(
            circle at 72% 80%,
            rgba(117, 92, 255, 0.12),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(7, 19, 43, 0.98),
            rgba(4, 8, 23, 0.99)
        );

    border-color:
        rgba(86, 163, 255, 0.30);
}


/* TEAM PAGE LOGO */

.team-nexus .team-card-logo {
    opacity:
        0.12;

    filter:
        brightness(1.02)
        contrast(1.06)
        saturate(1.25)

        drop-shadow(
            0 0 18px
            rgba(83, 167, 255, 0.18)
        )

        drop-shadow(
            0 0 40px
            rgba(117, 92, 255, 0.14)
        );
}


/* TOP ACCENT */

.team-nexus::before {
    background:
        linear-gradient(
            90deg,
            #66cfff,
            #3f8cff 48%,
            #755cff 82%,
            transparent
        );
}


/* NUMBER */

.team-nexus .team-number {
    color:
        #75cfff;
}


/* ROSTER TYPE */

.team-nexus .team-type {
    color:
        #b8c5df;
}


/* ACTIVE STATUS */

.team-nexus .team-status {
    color:
        #9edcff;

    background:
        rgba(63, 140, 255, 0.07);

    border-color:
        rgba(82, 169, 255, 0.28);
}


/* TAGS */

.team-nexus .team-tags span {
    color:
        #aabbd5;

    background:
        rgba(29, 52, 101, 0.24);

    border-color:
        rgba(80, 156, 255, 0.18);
}


/* VIEW NEXUS */

.team-nexus .team-link {
    color:
        #67c7ff;
}


/* TEAM CARD HOVER */

.team-nexus:hover {
    border-color:
        rgba(116, 199, 255, 0.56);

    box-shadow:

        0 18px 48px
        rgba(0, 0, 0, 0.30),

        0 0 28px
        rgba(63, 140, 255, 0.11),

        0 0 42px
        rgba(117, 92, 255, 0.08);
}


.team-nexus:hover .team-card-logo {
    opacity:
        0.19;

    filter:
        brightness(1.12)
        contrast(1.08)
        saturate(1.32)

        drop-shadow(
            0 0 22px
            rgba(102, 207, 255, 0.24)
        )

        drop-shadow(
            0 0 46px
            rgba(117, 92, 255, 0.19)
        );
}



/* =========================================================
   NEXUS — HOME SPOTLIGHT
========================================================= */

.spotlight-nexus {
    background:

        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(102, 207, 255, 0.10) 56.2%,
            rgba(102, 207, 255, 0.10) 69%,
            transparent 69.2%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(117, 92, 255, 0.10) 24.2%,
            rgba(117, 92, 255, 0.10) 47%,
            transparent 47.2%
        ),

        linear-gradient(
            145deg,
            rgba(13, 31, 68, 0.63),
            rgba(11, 19, 52, 0.66) 52%,
            rgba(4, 8, 23, 0.74)
        );

    border-color:
        rgba(92, 167, 255, 0.36);
}


.spotlight-nexus:hover {
    border-color:
        rgba(130, 205, 255, 0.68);

    box-shadow:

        0 22px 52px
        rgba(0, 0, 0, 0.28),

        0 0 26px
        rgba(63, 140, 255, 0.11),

        0 0 36px
        rgba(117, 92, 255, 0.08);
}


.spotlight-nexus .spotlight-logo {
    opacity:
        0.11;

    filter:
        brightness(1.02)
        contrast(1.06)
        saturate(1.28)

        drop-shadow(
            0 0 18px
            rgba(93, 181, 255, 0.17)
        )

        drop-shadow(
            0 0 38px
            rgba(117, 92, 255, 0.14)
        );
}


.spotlight-nexus:hover .spotlight-logo {
    opacity:
        0.17;
}


.spotlight-nexus .spotlight-code,
.spotlight-nexus .spotlight-content a {
    color:
        #69c8ff;
}



/* =========================================================
   NEXUS PAGE — PLAYER ROSTER GRID
========================================================= */

.nexus-page .roster-grid {
    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        20px;
}



/* =========================================================
   NEXUS PAGE — PLAYER CARD
========================================================= */

.nexus-page .roster-card {
    position:
        relative;

    min-height:
        260px;

    padding:
        24px 22px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 82% 18%,
            rgba(63, 140, 255, 0.10),
            transparent 36%
        ),

        radial-gradient(
            circle at 18% 88%,
            rgba(117, 92, 255, 0.07),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(7, 19, 43, 0.97),
            rgba(4, 8, 23, 0.99)
        );

    border:
        1px solid
        rgba(76, 153, 255, 0.22);

    clip-path:
        polygon(
            0 0,
            calc(100% - 20px) 0,
            100% 20px,
            100% 100%,
            20px 100%,
            0 calc(100% - 20px)
        );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}



/* =========================================================
   PLAYER CARD TOP LINE
========================================================= */

.nexus-page .roster-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #66cfff,
            #3f8cff 48%,
            #755cff 82%,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}



/* =========================================================
   PLAYER CARD CORNER DETAIL
========================================================= */

.nexus-page .roster-card::after {
    content:
        "";

    position:
        absolute;

    width:
        160px;

    height:
        160px;

    right:
        -78px;

    bottom:
        -88px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(92, 163, 255, 0.07);

    box-shadow:
        inset 0 0 24px
        rgba(117, 92, 255, 0.025);

    pointer-events:
        none;
}



/* =========================================================
   PLAYER NUMBER
========================================================= */

.nexus-page .roster-card-number {
    position:
        relative;

    z-index:
        2;

    color:
        #6093bc;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}



/* =========================================================
   PLAYER CONTENT
========================================================= */

.nexus-page .roster-card-content {
    position:
        relative;

    z-index:
        2;
}


.nexus-page .roster-card-team {
    margin:
        0 0 10px;

    color:
        #67c7ff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.nexus-page .roster-card h3 {
    margin:
        0 0 10px;

    color:
        #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    font-weight:
        600;

    line-height:
        1.1;
}


.nexus-page .roster-card-tag {
    margin:
        0;

    color:
        #7f8fa9;

    font-size:
        12px;
}



/* =========================================================
   PLAYER ROLE BADGE
========================================================= */

.nexus-page .player-card-details {
    margin-top:
        28px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.nexus-page .player-card-details span {
    padding:
        6px 9px;

    color:
        #84cfff;

    background:
        rgba(35, 70, 135, 0.24);

    border:
        1px solid
        rgba(76, 153, 255, 0.20);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}



/* =========================================================
   PLAYER AGENT POOL
========================================================= */

.nexus-page .player-card-agent-pool {
    margin:
        12px 0 0;

    color:
        #74839d;

    font-size:
        10px;

    line-height:
        1.5;
}



/* =========================================================
   PLAYER CARD HOVER
========================================================= */

.nexus-page .roster-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(114, 194, 255, 0.62);

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(63, 140, 255, 0.16),
            transparent 38%
        ),

        radial-gradient(
            circle at 18% 88%,
            rgba(117, 92, 255, 0.10),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            rgba(9, 27, 58, 0.99),
            rgba(5, 10, 27, 0.99)
        );

    box-shadow:

        0 18px 38px
        rgba(0, 0, 0, 0.34),

        0 0 16px
        rgba(63, 140, 255, 0.11),

        0 0 34px
        rgba(117, 92, 255, 0.08);
}


.nexus-page .roster-card:hover::before {
    width:
        170px;

    filter:

        drop-shadow(
            0 0 5px
            rgba(151, 222, 255, 0.55)
        )

        drop-shadow(
            0 0 12px
            rgba(63, 140, 255, 0.34)
        )

        drop-shadow(
            0 0 18px
            rgba(117, 92, 255, 0.18)
        );
}


.nexus-page .roster-card:hover .roster-card-number {
    color:
        #9cdcff;

    text-shadow:
        0 0 10px
        rgba(63, 140, 255, 0.30);
}


.nexus-page .roster-card:hover .player-card-details span {
    color:
        #c7eaff;

    background:
        rgba(63, 140, 255, 0.12);

    border-color:
        rgba(89, 170, 255, 0.42);
}



/* =========================================================
   NEXUS — COMPETITION GRID
========================================================= */

.nexus-page .team-competition-grid {
    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        22px;
}



/* =========================================================
   NEXUS — COMPETITION CARD
========================================================= */

.nexus-page .competition-card {
    position:
        relative;

    min-height:
        300px;

    padding:
        28px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    background:

        radial-gradient(
            circle at 88% 15%,
            rgba(63, 140, 255, 0.10),
            transparent 34%
        ),

        radial-gradient(
            circle at 14% 88%,
            rgba(117, 92, 255, 0.06),
            transparent 31%
        ),

        linear-gradient(
            145deg,
            rgba(7, 19, 43, 0.98),
            rgba(4, 8, 23, 0.99)
        );

    border:
        1px solid
        rgba(76, 153, 255, 0.21);

    clip-path:
        polygon(
            0 0,
            calc(100% - 22px) 0,
            100% 22px,
            100% 100%,
            22px 100%,
            0 calc(100% - 22px)
        );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}



/* =========================================================
   COMPETITION TOP LINE
========================================================= */

.nexus-page .competition-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        115px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #66cfff,
            #3f8cff 48%,
            #755cff 82%,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}



/* =========================================================
   COMPETITION CORNER DETAIL
========================================================= */

.nexus-page .competition-card::after {
    content:
        "";

    position:
        absolute;

    width:
        210px;

    height:
        210px;

    right:
        -110px;

    bottom:
        -120px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(79, 156, 255, 0.06);

    box-shadow:
        inset 0 0 30px
        rgba(117, 92, 255, 0.025);

    pointer-events:
        none;
}



/* =========================================================
   COMPETITION TOP ROW
========================================================= */

.nexus-page .competition-card-top {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        34px;
}



/* =========================================================
   COMPETITION LABEL
========================================================= */

.nexus-page .competition-label {
    margin:
        0 0 8px;

    color:
        #67c7ff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}



/* =========================================================
   COMPETITION TITLE
========================================================= */

.nexus-page .competition-card h3 {
    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    font-weight:
        600;
}



/* =========================================================
   COMPETITION STATUS
========================================================= */

.nexus-page .competition-status {
    padding:
        7px 10px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    border:
        1px solid
        rgba(79, 158, 255, 0.22);
}


.nexus-page .competition-status.active {
    color:
        #a2dcff;

    background:
        rgba(63, 140, 255, 0.09);

    border-color:
        rgba(89, 174, 255, 0.35);
}


.nexus-page .competition-status.completed {
    color:
        #77869f;

    background:
        rgba(34, 54, 95, 0.12);
}



/* =========================================================
   COMPETITION DESCRIPTION
========================================================= */

.nexus-page .competition-description {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 30px;

    max-width:
        560px;

    color:
        #8c99af;

    font-size:
        14px;

    line-height:
        1.75;
}



/* =========================================================
   COMPETITION META TAGS
========================================================= */

.nexus-page .competition-meta {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        auto;
}


.nexus-page .competition-meta span {
    padding:
        6px 9px;

    color:
        #8598b7;

    background:
        rgba(30, 55, 107, 0.26);

    border:
        1px solid
        rgba(76, 153, 255, 0.16);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.1px;
}



/* =========================================================
   CURRENT / FEATURED COMPETITION
========================================================= */

.nexus-page .competition-current {
    border-color:
        rgba(84, 165, 255, 0.35);

    background:

        radial-gradient(
            circle at 88% 15%,
            rgba(63, 140, 255, 0.15),
            transparent 35%
        ),

        radial-gradient(
            circle at 16% 90%,
            rgba(117, 92, 255, 0.08),
            transparent 31%
        ),

        linear-gradient(
            145deg,
            rgba(9, 27, 58, 0.99),
            rgba(4, 9, 25, 0.99)
        );
}



/* =========================================================
   COMPETITION HOVER
========================================================= */

.nexus-page .competition-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(116, 196, 255, 0.60);

    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(63, 140, 255, 0.16),
            transparent 36%
        ),

        radial-gradient(
            circle at 14% 90%,
            rgba(117, 92, 255, 0.09),
            transparent 31%
        ),

        linear-gradient(
            145deg,
            rgba(9, 28, 60, 0.99),
            rgba(5, 10, 27, 0.99)
        );

    box-shadow:

        0 18px 40px
        rgba(0, 0, 0, 0.34),

        0 0 16px
        rgba(63, 140, 255, 0.10),

        0 0 34px
        rgba(117, 92, 255, 0.08);
}


.nexus-page .competition-card:hover::before {
    width:
        195px;

    filter:

        drop-shadow(
            0 0 5px
            rgba(162, 225, 255, 0.52)
        )

        drop-shadow(
            0 0 12px
            rgba(63, 140, 255, 0.31)
        )

        drop-shadow(
            0 0 18px
            rgba(117, 92, 255, 0.16)
        );
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .nexus-page .roster-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .nexus-page .team-competition-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .nexus-page .roster-grid {
        grid-template-columns:
            1fr;
    }


    .nexus-page .roster-card {
        min-height:
            220px;
    }

}


@media (max-width: 600px) {

    .nexus-page .competition-card {
        min-height:
            270px;

        padding:
            24px;
    }

}

/* =========================================================
   CRYONIX TEAM IDENTITIES — FINAL

   ZENITH = FROST / ICE / PALE CYAN
   NOVA   = COSMIC VIOLET / PURPLE
   NEXUS  = GRAPHITE / SILVER / CRX ENERGY

   Paste this entire block at the VERY BOTTOM of styles.css.
========================================================= */


/* =========================================================
   TEAMS PAGE — ZENITH
========================================================= */

.team-zenith {
    background:
        radial-gradient(
            circle at 84% 14%,
            rgba(224, 252, 255, 0.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 22% 86%,
            rgba(117, 222, 240, 0.07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(8, 28, 35, 0.98),
            rgba(3, 13, 18, 0.99)
        );

    border-color:
        rgba(184, 245, 255, 0.28);
}


.team-zenith::before {
    background:
        linear-gradient(
            90deg,
            #f1feff,
            #9aeeff 55%,
            #63c9e8 80%,
            transparent
        );
}


.team-zenith .team-card-logo {
    opacity: 0.11;

    filter:
        brightness(1.10)
        contrast(1.05)
        saturate(0.85)
        drop-shadow(
            0 0 18px
            rgba(220, 252, 255, 0.18)
        )
        drop-shadow(
            0 0 38px
            rgba(112, 221, 245, 0.11)
        );
}


.team-zenith .team-number {
    color: #d7fbff;
}


.team-zenith .team-type {
    color: #b7d0d5;
}


.team-zenith .team-status {
    color: #d7fbff;

    background:
        rgba(177, 242, 255, 0.055);

    border-color:
        rgba(186, 245, 255, 0.25);
}


.team-zenith .team-tags span {
    color: #b8d3d8;

    background:
        rgba(72, 130, 142, 0.14);

    border-color:
        rgba(183, 245, 255, 0.16);
}


.team-zenith .team-link {
    color: #9aeeff;
}


.team-zenith:hover {
    border-color:
        rgba(221, 252, 255, 0.56);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.30),
        0 0 28px
        rgba(176, 244, 255, 0.10);
}


.team-zenith:hover .team-card-logo {
    opacity: 0.18;

    filter:
        brightness(1.20)
        contrast(1.05)
        saturate(0.92)
        drop-shadow(
            0 0 22px
            rgba(235, 254, 255, 0.25)
        )
        drop-shadow(
            0 0 46px
            rgba(121, 229, 250, 0.16)
        );
}


/* =========================================================
   TEAMS PAGE — NOVA
========================================================= */

.team-nova {
    background:
        radial-gradient(
            circle at 86% 14%,
            rgba(197, 124, 255, 0.22),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 86%,
            rgba(126, 72, 255, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(34, 14, 60, 0.98),
            rgba(13, 7, 29, 0.99)
        );

    border-color:
        rgba(196, 145, 255, 0.31);
}


.team-nova::before {
    background:
        linear-gradient(
            90deg,
            #e4c2ff,
            #bc7cff 52%,
            #8254ff 82%,
            transparent
        );
}


.team-nova .team-card-logo {
    opacity: 0.13;

    filter:
        brightness(1.05)
        contrast(1.07)
        saturate(1.38)
        drop-shadow(
            0 0 18px
            rgba(211, 165, 255, 0.20)
        )
        drop-shadow(
            0 0 40px
            rgba(129, 74, 255, 0.15)
        );
}


.team-nova .team-number {
    color: #d4afff;
}


.team-nova .team-type {
    color: #c7b8d8;
}


.team-nova .team-status {
    color: #e1c9ff;

    background:
        rgba(168, 93, 255, 0.07);

    border-color:
        rgba(201, 148, 255, 0.27);
}


.team-nova .team-tags span {
    color: #cbb7df;

    background:
        rgba(92, 46, 137, 0.20);

    border-color:
        rgba(198, 145, 255, 0.18);
}


.team-nova .team-link {
    color: #c995ff;
}


.team-nova:hover {
    border-color:
        rgba(225, 190, 255, 0.60);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.30),
        0 0 30px
        rgba(188, 118, 255, 0.13),
        0 0 44px
        rgba(111, 68, 255, 0.08);
}


.team-nova:hover .team-card-logo {
    opacity: 0.20;

    filter:
        brightness(1.15)
        contrast(1.08)
        saturate(1.46)
        drop-shadow(
            0 0 22px
            rgba(224, 187, 255, 0.27)
        )
        drop-shadow(
            0 0 48px
            rgba(143, 85, 255, 0.20)
        );
}


/* =========================================================
   TEAMS PAGE — NEXUS
========================================================= */

.team-nexus {
    background:
        radial-gradient(
            circle at 84% 15%,
            rgba(213, 222, 235, 0.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 22% 88%,
            rgba(117, 92, 255, 0.055),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(13, 18, 29, 0.98),
            rgba(5, 8, 17, 0.99)
        );

    border-color:
        rgba(184, 199, 220, 0.24);
}


.team-nexus::before {
    background:
        linear-gradient(
            90deg,
            #e4eaf2,
            #a9bad1 38%,
            #4da8ff 65%,
            #765dff 84%,
            transparent
        );
}


.team-nexus .team-card-logo {
    opacity: 0.11;

    filter:
        brightness(1.02)
        contrast(1.06)
        saturate(0.92)
        drop-shadow(
            0 0 18px
            rgba(190, 205, 225, 0.14)
        )
        drop-shadow(
            0 0 38px
            rgba(77, 168, 255, 0.09)
        )
        drop-shadow(
            0 0 44px
            rgba(118, 93, 255, 0.07)
        );
}


.team-nexus .team-number {
    color: #d1dae8;
}


.team-nexus .team-type {
    color: #aeb8c8;
}


.team-nexus .team-status {
    color: #d7e0ec;

    background:
        rgba(179, 194, 216, 0.055);

    border-color:
        rgba(184, 199, 220, 0.22);
}


.team-nexus .team-tags span {
    color: #abb6c6;

    background:
        rgba(43, 54, 73, 0.24);

    border-color:
        rgba(180, 196, 218, 0.15);
}


.team-nexus .team-link {
    color: #c7d3e3;
}


.team-nexus:hover {
    border-color:
        rgba(215, 225, 239, 0.52);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.34),
        0 0 24px
        rgba(180, 198, 224, 0.08),
        0 0 34px
        rgba(77, 168, 255, 0.06),
        0 0 42px
        rgba(118, 93, 255, 0.05);
}


.team-nexus:hover .team-card-logo {
    opacity: 0.18;

    filter:
        brightness(1.12)
        contrast(1.07)
        saturate(1.02)
        drop-shadow(
            0 0 22px
            rgba(218, 228, 242, 0.21)
        )
        drop-shadow(
            0 0 42px
            rgba(77, 168, 255, 0.13)
        )
        drop-shadow(
            0 0 50px
            rgba(118, 93, 255, 0.10)
        );
}


/* =========================================================
   HOME SPOTLIGHT — ZENITH
========================================================= */

.spotlight-zenith {
    background:
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(220, 252, 255, 0.11) 56.2%,
            rgba(220, 252, 255, 0.11) 69%,
            transparent 69.2%
        ),
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(119, 222, 242, 0.08) 24.2%,
            rgba(119, 222, 242, 0.08) 47%,
            transparent 47.2%
        ),
        linear-gradient(
            145deg,
            rgba(10, 39, 48, 0.62),
            rgba(5, 24, 31, 0.67) 52%,
            rgba(2, 10, 15, 0.74)
        );

    border-color:
        rgba(189, 246, 255, 0.34);
}


.spotlight-zenith:hover {
    border-color:
        rgba(227, 253, 255, 0.67);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),
        0 0 26px
        rgba(178, 244, 255, 0.10);
}


.spotlight-zenith .spotlight-logo {
    filter:
        brightness(1.12)
        saturate(0.88)
        drop-shadow(
            0 0 20px
            rgba(205, 250, 255, 0.16)
        );
}


.spotlight-zenith .spotlight-code,
.spotlight-zenith .spotlight-content a {
    color: #9cefff;
}


/* =========================================================
   HOME SPOTLIGHT — NOVA
========================================================= */

.spotlight-nova {
    background:
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(219, 177, 255, 0.14) 56.2%,
            rgba(219, 177, 255, 0.14) 69%,
            transparent 69.2%
        ),
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(156, 93, 255, 0.12) 24.2%,
            rgba(156, 93, 255, 0.12) 47%,
            transparent 47.2%
        ),
        linear-gradient(
            145deg,
            rgba(52, 25, 86, 0.66),
            rgba(31, 16, 62, 0.69) 52%,
            rgba(10, 6, 24, 0.76)
        );

    border-color:
        rgba(203, 159, 255, 0.39);
}


.spotlight-nova:hover {
    border-color:
        rgba(230, 198, 255, 0.70);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.28),
        0 0 28px
        rgba(192, 124, 255, 0.12),
        0 0 38px
        rgba(122, 74, 255, 0.07);
}


.spotlight-nova .spotlight-logo {
    filter:
        brightness(1.06)
        saturate(1.42)
        drop-shadow(
            0 0 20px
            rgba(211, 163, 255, 0.18)
        );
}


.spotlight-nova .spotlight-code,
.spotlight-nova .spotlight-content a {
    color: #ca9cff;
}


/* =========================================================
   HOME SPOTLIGHT — NEXUS
========================================================= */

.spotlight-nexus {
    background:
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 56%,
            rgba(213, 222, 235, 0.08) 56.2%,
            rgba(213, 222, 235, 0.08) 69%,
            transparent 69.2%
        ),
        linear-gradient(
            42deg,
            transparent 0%,
            transparent 24%,
            rgba(118, 93, 255, 0.055) 24.2%,
            rgba(118, 93, 255, 0.055) 47%,
            transparent 47.2%
        ),
        linear-gradient(
            145deg,
            rgba(20, 27, 41, 0.68),
            rgba(11, 16, 28, 0.72) 52%,
            rgba(4, 7, 15, 0.78)
        );

    border-color:
        rgba(189, 202, 222, 0.29);
}


.spotlight-nexus:hover {
    border-color:
        rgba(219, 228, 241, 0.58);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.30),
        0 0 26px
        rgba(188, 201, 220, 0.08),
        0 0 34px
        rgba(77, 168, 255, 0.05),
        0 0 40px
        rgba(118, 93, 255, 0.05);
}


.spotlight-nexus .spotlight-logo {
    filter:
        brightness(1.04)
        saturate(0.96)
        drop-shadow(
            0 0 20px
            rgba(199, 212, 231, 0.14)
        )
        drop-shadow(
            0 0 36px
            rgba(77, 168, 255, 0.08)
        );
}


.spotlight-nexus .spotlight-code,
.spotlight-nexus .spotlight-content a {
    color: #cad4e2;
}


/* =========================================================
   INDIVIDUAL TEAM PAGE — MAIN ACCENTS
========================================================= */


/* ZENITH */

.zenith-page .team-page-number,
.zenith-page .team-page-type,
.zenith-page .section-label {
    color: #a9efff;
}


.zenith-page .team-page-status {
    color: #d9fbff;

    border-color:
        rgba(191, 247, 255, 0.26);

    background:
        rgba(177, 242, 255, 0.055);
}


.zenith-page .team-page-statement {
    border-left-color: #d9fbff;

    background:
        linear-gradient(
            90deg,
            rgba(205, 250, 255, 0.07),
            rgba(82, 197, 222, 0.025),
            transparent
        );
}


.zenith-page .team-page-statement span {
    color: #a9efff;
}


/* NOVA */

.nova-page .team-page-number,
.nova-page .team-page-type,
.nova-page .section-label {
    color: #c79aff;
}


.nova-page .team-page-status {
    color: #e2c8ff;

    border-color:
        rgba(201, 148, 255, 0.28);

    background:
        rgba(168, 93, 255, 0.07);
}


.nova-page .team-page-statement {
    border-left-color: #c395ff;

    background:
        linear-gradient(
            90deg,
            rgba(180, 111, 255, 0.10),
            rgba(101, 56, 181, 0.035),
            transparent
        );
}


.nova-page .team-page-statement span {
    color: #ca9cff;
}


/* NEXUS */

.nexus-page .team-page-number,
.nexus-page .team-page-type,
.nexus-page .section-label {
    color: #cbd5e3;
}


.nexus-page .team-page-status {
    color: #dde5ef;

    border-color:
        rgba(189, 202, 221, 0.24);

    background:
        rgba(181, 195, 215, 0.055);
}


.nexus-page .team-page-statement {
    border-left-color: #d3dce9;

    background:
        linear-gradient(
            90deg,
            rgba(203, 213, 229, 0.075),
            rgba(77, 168, 255, 0.025),
            rgba(118, 93, 255, 0.018),
            transparent
        );
}


.nexus-page .team-page-statement span {
    color: #cbd5e3;
}


/* =========================================================
   PLAYER CARDS — SHARED CRX SHAPE
========================================================= */

.zenith-page .roster-card,
.nova-page .roster-card,
.nexus-page .roster-card {
    position: relative;

    min-height: 260px;

    padding:
        24px 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    clip-path:
        polygon(
            0 0,
            calc(100% - 20px) 0,
            100% 20px,
            100% 100%,
            20px 100%,
            0 calc(100% - 20px)
        );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* =========================================================
   ZENITH PLAYER CARDS
========================================================= */

.zenith-page .roster-card {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(220, 252, 255, 0.075),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(7, 27, 34, 0.97),
            rgba(3, 12, 16, 0.99)
        );

    border:
        1px solid
        rgba(183, 245, 255, 0.20);
}


.zenith-page .roster-card::before {
    background:
        linear-gradient(
            90deg,
            #effeff,
            #9cefff,
            transparent
        );
}


.zenith-page .roster-card-number {
    color: #8db5be;
}


.zenith-page .roster-card-team {
    color: #9cefff;
}


.zenith-page .player-card-details span {
    color: #baeef8;

    background:
        rgba(64, 127, 141, 0.18);

    border-color:
        rgba(182, 244, 255, 0.18);
}


.zenith-page .roster-card:hover {
    border-color:
        rgba(221, 252, 255, 0.61);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(221, 252, 255, 0.13),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(9, 35, 42, 0.99),
            rgba(3, 13, 17, 0.99)
        );

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.34),
        0 0 16px
        rgba(188, 247, 255, 0.10);
}


/* =========================================================
   NOVA PLAYER CARDS
========================================================= */

.nova-page .roster-card {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(194, 124, 255, 0.12),
            transparent 36%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(125, 70, 255, 0.065),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(31, 14, 55, 0.97),
            rgba(11, 7, 26, 0.99)
        );

    border:
        1px solid
        rgba(198, 146, 255, 0.24);
}


.nova-page .roster-card::before {
    background:
        linear-gradient(
            90deg,
            #e2c0ff,
            #bd7cff,
            #8056ff,
            transparent
        );
}


.nova-page .roster-card-number {
    color: #a889c9;
}


.nova-page .roster-card-team {
    color: #c995ff;
}


.nova-page .player-card-details span {
    color: #d8bcf3;

    background:
        rgba(101, 55, 151, 0.22);

    border-color:
        rgba(200, 147, 255, 0.23);
}


.nova-page .roster-card:hover {
    border-color:
        rgba(226, 190, 255, 0.66);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(205, 139, 255, 0.18),
            transparent 38%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(126, 74, 255, 0.09),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(40, 18, 68, 0.99),
            rgba(13, 8, 29, 0.99)
        );

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.34),
        0 0 18px
        rgba(192, 122, 255, 0.12),
        0 0 32px
        rgba(118, 72, 255, 0.08);
}


/* =========================================================
   NEXUS PLAYER GRID
========================================================= */

.nexus-page .roster-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 20px;
}


/* =========================================================
   NEXUS PLAYER CARDS
========================================================= */

.nexus-page .roster-card {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(211, 221, 235, 0.075),
            transparent 35%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(118, 93, 255, 0.045),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(14, 20, 31, 0.98),
            rgba(5, 8, 17, 0.99)
        );

    border:
        1px solid
        rgba(184, 199, 220, 0.22);
}


.nexus-page .roster-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 105px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #e3e9f2,
            #aebed2 35%,
            #4da8ff 64%,
            #765dff 84%,
            transparent
        );

    transition:
        width 0.35s ease,
        filter 0.35s ease;
}


.nexus-page .roster-card::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -78px;
    bottom: -88px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(185, 199, 220, 0.055);

    pointer-events: none;
}


.nexus-page .roster-card-number {
    position: relative;

    z-index: 2;

    color: #9caabd;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.nexus-page .roster-card-content {
    position: relative;
    z-index: 2;
}


.nexus-page .roster-card-team {
    margin:
        0 0 10px;

    color: #cbd5e3;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.nexus-page .roster-card h3 {
    margin:
        0 0 10px;

    color: #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    font-weight: 600;
}


.nexus-page .roster-card-tag {
    margin: 0;

    color: #8995a7;

    font-size: 12px;
}


.nexus-page .player-card-details {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.nexus-page .player-card-details span {
    padding:
        6px 9px;

    color: #c2ccda;

    background:
        rgba(57, 68, 86, 0.24);

    border:
        1px solid
        rgba(186, 199, 218, 0.18);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.nexus-page .player-card-agent-pool {
    margin:
        12px 0 0;

    color: #7f8b9d;

    font-size: 10px;

    line-height: 1.5;
}


.nexus-page .roster-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(221, 229, 241, 0.58);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(217, 226, 239, 0.11),
            transparent 38%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(118, 93, 255, 0.06),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(20, 27, 41, 0.99),
            rgba(6, 9, 19, 0.99)
        );

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.36),
        0 0 15px
        rgba(194, 207, 225, 0.08),
        0 0 26px
        rgba(77, 168, 255, 0.05),
        0 0 34px
        rgba(118, 93, 255, 0.04);
}


.nexus-page .roster-card:hover::before {
    width: 175px;

    filter:
        drop-shadow(
            0 0 5px
            rgba(222, 232, 245, 0.45)
        )
        drop-shadow(
            0 0 10px
            rgba(77, 168, 255, 0.18)
        )
        drop-shadow(
            0 0 14px
            rgba(118, 93, 255, 0.12)
        );
}


/* =========================================================
   COMPETITION CARDS — SHARED SHAPE
========================================================= */

.zenith-page .competition-card,
.nova-page .competition-card,
.nexus-page .competition-card {
    position: relative;

    min-height: 300px;

    padding: 28px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    clip-path:
        polygon(
            0 0,
            calc(100% - 22px) 0,
            100% 22px,
            100% 100%,
            22px 100%,
            0 calc(100% - 22px)
        );

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


/* =========================================================
   ZENITH COMPETITION CARDS
========================================================= */

.zenith-page .competition-card {
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(219, 252, 255, 0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(7, 27, 34, 0.98),
            rgba(3, 11, 15, 0.99)
        );

    border:
        1px solid
        rgba(184, 245, 255, 0.19);
}


.zenith-page .competition-card::before {
    background:
        linear-gradient(
            90deg,
            #f1feff,
            #9cefff,
            transparent
        );
}


.zenith-page .competition-label {
    color: #9cefff;
}


.zenith-page .competition-status.active {
    color: #d9fbff;

    background:
        rgba(177, 242, 255, 0.06);

    border-color:
        rgba(187, 245, 255, 0.28);
}


.zenith-page .competition-meta span {
    color: #9bbbc3;

    background:
        rgba(60, 119, 131, 0.16);

    border-color:
        rgba(184, 245, 255, 0.13);
}


/* =========================================================
   NOVA COMPETITION CARDS
========================================================= */

.nova-page .competition-card {
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(197, 124, 255, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(124, 73, 255, 0.06),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(32, 14, 56, 0.98),
            rgba(11, 7, 26, 0.99)
        );

    border:
        1px solid
        rgba(198, 146, 255, 0.23);
}


.nova-page .competition-card::before {
    background:
        linear-gradient(
            90deg,
            #e1bfff,
            #bd7cff,
            #8055ff,
            transparent
        );
}


.nova-page .competition-label {
    color: #c995ff;
}


.nova-page .competition-status.active {
    color: #e3c9ff;

    background:
        rgba(171, 96, 255, 0.08);

    border-color:
        rgba(201, 148, 255, 0.31);
}


.nova-page .competition-meta span {
    color: #b9a3ce;

    background:
        rgba(94, 47, 136, 0.20);

    border-color:
        rgba(198, 145, 255, 0.16);
}


/* =========================================================
   NEXUS COMPETITION GRID
========================================================= */

.nexus-page .team-competition-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/* =========================================================
   NEXUS COMPETITION CARDS
========================================================= */

.nexus-page .competition-card {
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(211, 220, 233, 0.075),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(118, 93, 255, 0.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(14, 20, 31, 0.98),
            rgba(5, 8, 17, 0.99)
        );

    border:
        1px solid
        rgba(184, 199, 220, 0.21);
}


.nexus-page .competition-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 115px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #e4eaf2,
            #aebed2 35%,
            #4da8ff 64%,
            #765dff 84%,
            transparent
        );
}


.nexus-page .competition-card::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -110px;
    bottom: -120px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(184, 198, 218, 0.05);

    pointer-events: none;
}


.nexus-page .competition-card-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 34px;
}


.nexus-page .competition-label {
    margin:
        0 0 8px;

    color: #cbd5e3;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.nexus-page .competition-card h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    font-weight: 600;
}


.nexus-page .competition-status {
    padding:
        7px 10px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    border:
        1px solid
        rgba(185, 199, 218, 0.20);
}


.nexus-page .competition-status.active {
    color: #dbe3ee;

    background:
        rgba(180, 193, 212, 0.06);

    border-color:
        rgba(192, 205, 223, 0.28);
}


.nexus-page .competition-description {
    position: relative;
    z-index: 2;

    margin:
        0 0 30px;

    max-width: 560px;

    color: #929cab;

    font-size: 14px;

    line-height: 1.75;
}


.nexus-page .competition-meta {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;
}


.nexus-page .competition-meta span {
    padding:
        6px 9px;

    color: #a7b2c2;

    background:
        rgba(51, 61, 78, 0.22);

    border:
        1px solid
        rgba(184, 198, 217, 0.14);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.1px;
}


.nexus-page .competition-current {
    border-color:
        rgba(199, 211, 228, 0.30);

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(219, 227, 240, 0.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(77, 168, 255, 0.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18, 25, 38, 0.99),
            rgba(6, 9, 18, 0.99)
        );
}


.nexus-page .competition-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(221, 229, 241, 0.56);

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(218, 227, 239, 0.11),
            transparent 36%
        ),
        radial-gradient(
            circle at 14% 90%,
            rgba(118, 93, 255, 0.05),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(20, 28, 42, 0.99),
            rgba(6, 9, 19, 0.99)
        );

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.36),
        0 0 16px
        rgba(194, 207, 225, 0.07),
        0 0 27px
        rgba(77, 168, 255, 0.045),
        0 0 34px
        rgba(118, 93, 255, 0.04);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .nexus-page .roster-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .nexus-page .team-competition-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .nexus-page .roster-grid {
        grid-template-columns:
            1fr;
    }


    .nexus-page .roster-card {
        min-height: 220px;
    }

}


@media (max-width: 600px) {

    .zenith-page .competition-card,
    .nova-page .competition-card,
    .nexus-page .competition-card {
        min-height: 270px;

        padding: 24px;
    }

}

/* =========================================================
   CRYONIX MOBILE PERFORMANCE PASS
   Keeps the desktop visual effects intact while removing the
   expensive full-screen blur/canvas work on touch devices.
========================================================= */

@media (max-width: 800px), (pointer: coarse) {

    /* Static artwork is much smoother than continuously repainting
       a full-screen canvas while the browser is also scrolling. */
    #crx-cosmic-fx,
    .team-page #team-identity-fx {
        display: none !important;
    }

    .crx-cosmic-live-bg {
        animation: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    /* Fixed glass blur is one of the most expensive effects during
       mobile scrolling. Keep the same dark-glass look without blur. */
    header,
    header.is-scrolled {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(4, 12, 22, 0.96) !important;
    }

    header .main-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Mobile reveals are made immediate by site-polish.js. Remove
       blur/will-change layers so they do not stay GPU-promoted. */
    .crx-reveal,
    .crx-reveal.is-visible {
        filter: none !important;
        will-change: auto !important;
    }

    /* Keep cross-page navigation polished, but use a tiny opacity fade
       instead of blurring two full page snapshots at the same time. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 120ms !important;
        animation-timing-function: ease-out !important;
        filter: none !important;
    }

    ::view-transition-old(root) {
        animation-name: crx-mobile-page-out !important;
    }

    ::view-transition-new(root) {
        animation-name: crx-mobile-page-in !important;
    }
}

@keyframes crx-mobile-page-out {
    from { opacity: 1; }
    to { opacity: 0.90; }
}

@keyframes crx-mobile-page-in {
    from { opacity: 0.90; }
    to { opacity: 1; }
}
/* =========================================================
   CRYONIX MOBILE BACKGROUND FIX
   Keep mobile smooth, but restore the cosmic artwork
   and scroll-based background movement.
========================================================= */

@media (max-width: 800px), (pointer: coarse) {

    /* Keep the heavy canvas disabled */
    #crx-cosmic-fx {
        display: none !important;
    }

    /* Restore the cosmic image itself */
    .crx-cosmic-live-bg {
        display: block !important;

        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background-color: #05090d !important;

        background-image:
            linear-gradient(
                rgba(3, 7, 12, 0.18),
                rgba(3, 7, 12, 0.18)
            ),
            url("cryonix-cosmic-background.webp") !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;

        background-position:
            center
            var(--cosmic-y, 22%) !important;

        z-index: 0 !important;
        pointer-events: none !important;

        animation: none !important;
        filter: none !important;
        will-change: background-position !important;
    }

    /* HOME PAGE also keeps the moving cosmic background */
    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    .crx-cosmic-live-bg {
        display: block !important;
    }

    /* Remove the separate static home hero image so it doesn't
       fight with the moving fixed background */
    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    #home {
        background-image: none !important;
        background-color: transparent !important;
    }
}
/* =========================================================
   CRYONIX MOBILE COSMIC FIX
   - keeps mobile smooth
   - restores visible cosmic artwork
   - restores scroll movement
   - removes black section blocking
   - fixes Nova watermark position
========================================================= */

@media (max-width: 800px), (pointer: coarse) {

    /* -----------------------------------------------------
       COSMIC NAV PAGES
    ----------------------------------------------------- */

    body.teams-page .crx-cosmic-live-bg,
    body.matches-page .crx-cosmic-live-bg,
    body.about-page .crx-cosmic-live-bg,
    body.history-page .crx-cosmic-live-bg,
    body.founder-page .crx-cosmic-live-bg,
    body.error-page .crx-cosmic-live-bg {

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: fixed !important;

        inset: -20vh -20vw !important;

        width: auto !important;
        height: auto !important;

        background-color: #05090d !important;

        background-image:
            linear-gradient(
                rgba(3, 7, 12, 0.18),
                rgba(3, 7, 12, 0.18)
            ),
            url("cryonix-cosmic-background.webp") !important;

        /*
            Deliberately taller than the viewport.
            This gives the artwork room to move vertically
            when --cosmic-y changes during scrolling.
        */
        background-size:
            auto 145vh !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center
            var(--cosmic-y, 18%) !important;

        pointer-events: none !important;

        z-index: 0 !important;

        animation: none !important;
        filter: none !important;
    }


    /* Heavy canvas stays OFF on mobile */
    body.teams-page #crx-cosmic-fx,
    body.matches-page #crx-cosmic-fx,
    body.about-page #crx-cosmic-fx,
    body.history-page #crx-cosmic-fx,
    body.founder-page #crx-cosmic-fx,
    body.error-page #crx-cosmic-fx {

        display: none !important;
    }


    /* -----------------------------------------------------
       LET THE COSMIC ART SHOW THROUGH THE PAGE
    ----------------------------------------------------- */

    body.teams-page main,
    body.matches-page main,
    body.about-page main,
    body.history-page main,
    body.founder-page main {

        position: relative !important;
        z-index: 1 !important;

        background: transparent !important;
    }


    body.teams-page #teams,
    body.matches-page #matches,
    body.about-page #about,
    body.history-page #history {

        background:
            linear-gradient(
                180deg,
                rgba(5, 9, 13, 0.72) 0%,
                rgba(5, 9, 13, 0.54) 42%,
                rgba(5, 9, 13, 0.66) 72%,
                rgba(5, 9, 13, 0.82) 100%
            ) !important;
    }


    /* Founder already has multiple sections instead of one #section */
    body.founder-page main > section {

        background:
            linear-gradient(
                180deg,
                rgba(5, 9, 13, 0.62),
                rgba(5, 9, 13, 0.76)
            ) !important;
    }


    /* -----------------------------------------------------
       NOVA MOBILE WATERMARK
       Push it further toward the right edge.
    ----------------------------------------------------- */

    body.nova-page .team-page-background-logo {

        width: 500px !important;

        right: -350px !important;
        left: auto !important;

        top: 35% !important;

        opacity: 0.065 !important;
    }

}
/* =========================================================
   MOBILE COSMIC — FINAL SCALE + SCROLL FIX
========================================================= */

@media (max-width: 800px), (pointer: coarse) {

    body.teams-page .crx-cosmic-live-bg,
    body.matches-page .crx-cosmic-live-bg,
    body.about-page .crx-cosmic-live-bg,
    body.history-page .crx-cosmic-live-bg,
    body.founder-page .crx-cosmic-live-bg,
    body.error-page .crx-cosmic-live-bg {

        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;

        transform:
            translate3d(
                0,
                var(--crx-mobile-bg-shift, 0px),
                0
            )
            scale(1.035) !important;

        transform-origin: center center !important;

        will-change: transform !important;

        animation: none !important;
        filter: none !important;
    }

}
/* =========================================================
   MOBILE COSMIC FX — RE-ENABLE LIGHTWEIGHT ANIMATION
========================================================= */

@media (max-width: 800px), (pointer: coarse) {

    body.home-page #crx-cosmic-fx {
        display: block !important;

        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        z-index: 0 !important;

        pointer-events: none !important;
    }

    /* Keep the heavier individual team canvases disabled */
    body.team-page #team-identity-fx {
        display: none !important;
    }

}
/* =========================================================
   NEXUS TEAM CARD — MOBILE WATERMARK CENTRING

   Matches the centred visual placement of
   Zenith and Nova on mobile.
========================================================= */

@media (max-width: 600px) {

    .teams-page .team-nexus .team-card-logo {
        position: absolute !important;

        width: 430px !important;
        height: auto !important;

        /* TRUE CENTRE */
        top: 50% !important;
        left: 50% !important;

        right: auto !important;
        bottom: auto !important;

        transform:
            translate(-50%, -50%)
            scale(1) !important;

        transform-origin:
            center center !important;

        opacity: 0.11 !important;

        object-fit: contain !important;

        pointer-events: none !important;

        z-index: 0 !important;

        filter:
            brightness(1.02)
            contrast(1.06)
            saturate(0.92)

            drop-shadow(
                0 0 18px
                rgba(190, 205, 225, 0.14)
            )

            drop-shadow(
                0 0 38px
                rgba(77, 168, 255, 0.09)
            )

            drop-shadow(
                0 0 44px
                rgba(118, 93, 255, 0.07)
            ) !important;
    }


    /* Keep it centred if mobile registers hover/touch */

    .teams-page .team-nexus:hover .team-card-logo {
        transform:
            translate(-50%, -50%)
            scale(1.04) !important;

        opacity: 0.17 !important;
    }

}
/* =========================================================
   MEMBER PORTAL NAV
========================================================= */

.main-nav .portal-nav-link {
    margin-left: 0;

    padding-left: 18px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.35);

    color: #ffffff;

    font-size: inherit;
    font-weight: inherit;

    background: transparent;

    transition:
        color 0.2s ease;
}


.main-nav .portal-nav-link:hover {
    color: #8fddff;

    background: transparent;
}
/* =========================================================
   PUBLIC SCRIM REQUEST PAGE
========================================================= */

.scrim-request-page {
    min-height: 100vh;

    background:
        #05090d
        url("cryonix-cosmic-background.webp")
        center center / cover
        fixed;

    color: #ffffff;
}


.public-scrim-main {
    width:
        min(
            1400px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        150px 0
        90px;
}


/* =========================================================
   HERO
========================================================= */

.public-scrim-hero {
    max-width:
        760px;

    margin-bottom:
        50px;
}


.public-scrim-hero h1 {
    margin:
        8px 0
        16px;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.5rem
        );

    line-height:
        1.05;
}


.public-scrim-hero > p:last-child {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    line-height:
        1.75;

    font-size:
        1.05rem;
}


/* =========================================================
   PAGE LAYOUT
========================================================= */

.public-scrim-layout {
    display: grid;

    grid-template-columns:
        minmax(
            260px,
            0.55fr
        )
        minmax(
            0,
            1.45fr
        );

    gap:
        28px;

    align-items:
        start;
}


/* =========================================================
   INFO PANEL
========================================================= */

.public-scrim-info,
.public-scrim-form-card {
    border:
        1px solid
        rgba(
            120,
            150,
            255,
            0.16
        );

    border-radius:
        18px;

    background:
        rgba(
            5,
            12,
            25,
            0.88
        );

    box-shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


.public-scrim-info {
    position:
        sticky;

    top:
        125px;

    padding:
        28px;
}


.public-scrim-info h2 {
    margin:
        7px 0
        26px;

    font-size:
        1.5rem;
}


.public-scrim-info-list {
    display:
        grid;

    gap:
        22px;
}


.public-scrim-info-list > div {
    display:
        grid;

    grid-template-columns:
        36px 1fr;

    gap:
        12px;

    align-items:
        start;
}


.public-scrim-info-list span {
    color:
        #80dfff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.public-scrim-info-list p {
    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    line-height:
        1.6;

    font-size:
        0.9rem;
}


/* =========================================================
   FORM CARD
========================================================= */

.public-scrim-form-card {
    padding:
        32px;
}


.public-form-section {
    padding:
        0 0
        34px;

    margin-bottom:
        34px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );
}


.public-form-section:last-of-type {
    margin-bottom:
        0;
}


.public-form-section-heading {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        22px;
}


.public-form-section-heading > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            rgba(
                70,
                125,
                255,
                0.25
            ),
            rgba(
                125,
                80,
                255,
                0.25
            )
        );

    color:
        #96e5ff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        700;
}


.public-form-section-heading h2 {
    margin:
        3px 0
        0;

    font-size:
        1.35rem;
}


/* =========================================================
   FORM GRID
========================================================= */

.public-form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;
}


.public-scrim-form-card label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size:
        0.86rem;

    font-weight:
        700;
}


.public-scrim-form-card input,
.public-scrim-form-card select,
.public-scrim-form-card textarea {
    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        9px;

    padding:
        12px 14px;

    background:
        rgba(
            0,
            7,
            16,
            0.7
        );

    color:
        #ffffff;

    font:
        inherit;

    outline:
        none;

    transition:
        border-color
        0.2s ease,
        box-shadow
        0.2s ease;
}


.public-scrim-form-card input:focus,
.public-scrim-form-card select:focus,
.public-scrim-form-card textarea:focus {
    border-color:
        rgba(
            100,
            170,
            255,
            0.7
        );

    box-shadow:
        0 0 0
        3px
        rgba(
            90,
            120,
            255,
            0.08
        );
}


.public-scrim-form-card textarea {
    resize:
        vertical;

    min-height:
        120px;
}


/* =========================================================
   SUBMIT
========================================================= */

.public-scrim-submit {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}


#submit-scrim-request {
    border:
        none;

    border-radius:
        9px;

    padding:
        13px 22px;

    background:
        linear-gradient(
            135deg,
            #4d7cff,
            #7757ff
        );

    color:
        #ffffff;

    font:
        inherit;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform
        0.2s ease,
        opacity
        0.2s ease;
}


#submit-scrim-request:hover {
    transform:
        translateY(
            -1px
        );
}


#submit-scrim-request:disabled {
    opacity:
        0.5;

    cursor:
        not-allowed;

    transform:
        none;
}


.public-scrim-message {
    margin:
        0;

    font-size:
        0.88rem;
}


.public-scrim-message.success {
    color:
        #7fe2ad;
}


.public-scrim-message.error {
    color:
        #ff8798;
}


/* =========================================================
   HONEYPOT
========================================================= */

.scrim-honeypot {
    position:
        absolute;

    left:
        -10000px;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
    max-width:
    900px
) {

    .public-scrim-layout {
        grid-template-columns:
            1fr;
    }


    .public-scrim-info {
        position:
            static;
    }

}


@media (
    max-width:
    650px
) {

    .public-scrim-main {
        width:
            min(
                100% - 28px,
                1400px
            );

        padding-top:
            125px;
    }


    .public-form-grid {
        grid-template-columns:
            1fr;
    }


    .public-scrim-form-card,
    .public-scrim-info {
        padding:
            22px;
    }

}
/* =========================================================
   CHROME AUTOFILL - KEEP CRYONIX DARK THEME
========================================================= */

.public-scrim-form-card input:-webkit-autofill,
.public-scrim-form-card input:-webkit-autofill:hover,
.public-scrim-form-card input:-webkit-autofill:focus,
.public-scrim-form-card input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px
        rgba(0, 7, 16, 0.96)
        inset !important;

    box-shadow:
        0 0 0 1000px
        rgba(0, 7, 16, 0.96)
        inset !important;

    caret-color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.12) !important;

    transition:
        background-color
        9999s ease-out;
}
/* =========================================================
   CHROME AUTOFILL - CRYONIX DARK THEME
========================================================= */

.public-scrim-form-card input:-webkit-autofill,
.public-scrim-form-card input:-webkit-autofill:hover,
.public-scrim-form-card input:-webkit-autofill:focus,
.public-scrim-form-card input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #050d18
        inset !important;

    box-shadow:
        0 0 0 1000px
        #050d18
        inset !important;

    caret-color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.12)
        !important;

    transition:
        background-color
        9999s ease-out;
}
/* =========================================================
   CRYONIX DROPDOWNS / DATE / TIME
========================================================= */

/* Normal select field */
.public-scrim-form-card select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 46px;

    background-color: rgba(0, 7, 16, 0.92);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fddff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
        right 16px center;

    background-size:
        14px;

    color: #ffffff;

    cursor: pointer;
}


/* Dropdown list options */
.public-scrim-form-card select option {
    background:
        #07101d;

    color:
        #ffffff;
}


/* Hover / focus */
.public-scrim-form-card select:hover {
    border-color:
        rgba(143, 221, 255, 0.4);
}


.public-scrim-form-card select:focus {
    border-color:
        #70cfff;

    box-shadow:
        0 0 0 3px
        rgba(80, 170, 255, 0.12);
}


/* =========================================================
   DATE / TIME INPUTS
========================================================= */

.public-scrim-form-card input[type="date"],
.public-scrim-form-card input[type="time"] {
    color-scheme:
        dark;

    background-color:
        rgba(0, 7, 16, 0.92);

    color:
        #ffffff;

    cursor:
        pointer;
}


/* Calendar / clock icons */
.public-scrim-form-card input[type="date"]::-webkit-calendar-picker-indicator,
.public-scrim-form-card input[type="time"]::-webkit-calendar-picker-indicator {
    cursor:
        pointer;

    opacity:
        0.8;

    filter:
        invert(84%)
        sepia(24%)
        saturate(1170%)
        hue-rotate(165deg)
        brightness(105%);
}


.public-scrim-form-card input[type="date"]::-webkit-calendar-picker-indicator:hover,
.public-scrim-form-card input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity:
        1;
}
/* =========================================================
   ZENITH ROSTER REWORK
========================================================= */

.roster-rework {
    position: relative;
    overflow: hidden;

    width: 100%;
    max-width: 1100px;
    min-height: 330px;

    margin: 0 auto;

    padding: 55px 60px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 88% 45%,
            rgba(86, 215, 255, 0.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(8, 26, 37, 0.96),
            rgba(4, 10, 15, 0.98)
        );

    border: 1px solid rgba(126, 234, 255, 0.28);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.34),
        0 0 30px rgba(86, 215, 255, 0.05);
}


/* TOP ACCENT */

.roster-rework::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 180px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #56d7ff,
            rgba(86, 215, 255, 0)
        );
}


/* LARGE BACKGROUND EMBLEM */

.roster-rework-logo {
    position: absolute;

    right: -50px;
    top: 50%;

    width: 390px;
    max-width: 45%;

    transform:
        translateY(-50%);

    opacity: 0.10;

    pointer-events: none;

    filter:
        brightness(1.15)
        drop-shadow(
            0 0 25px
            rgba(86, 215, 255, 0.20)
        );
}


/* CRX LABEL */

.roster-rework-accent {
    position: absolute;
    top: 22px;
    right: 28px;

    color: rgba(191, 247, 255, 0.45);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* CONTENT */

.roster-rework-content {
    position: relative;
    z-index: 2;

    max-width: 690px;
}


.roster-rework-label {
    margin: 0 0 14px;

    color: #56d7ff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.roster-rework h3 {
    margin: 0 0 24px;

    color: #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    line-height: 1.12;
}


.roster-rework-content > p:not(.roster-rework-label) {
    max-width: 650px;

    margin: 0 0 14px;

    color: #92a3ad;

    font-size: 15px;
    line-height: 1.75;
}


/* STATUS */

.roster-rework-status {
    width: fit-content;

    margin-top: 28px;

    padding: 9px 13px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: #a9efff;

    background:
        rgba(14, 129, 153, 0.09);

    border:
        1px solid
        rgba(85, 171, 192, 0.24);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.roster-rework-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #56d7ff;

    box-shadow:
        0 0 9px
        rgba(86, 215, 255, 0.75);
}


/* MOBILE */

@media (max-width: 700px) {

    .roster-rework {
        min-height: 360px;

        padding:
            45px
            28px;
    }


    .roster-rework-logo {
        width: 280px;

        right: -75px;

        opacity: 0.07;
    }


    .roster-rework-accent {
        display: none;
    }
}
/* =========================================================
   HIDE STORED ROSTER WHILE ZENITH IS BEING REWORKED
========================================================= */

.roster-grid[hidden] {
    display: none !important;
}
/* =========================================================
   HOMEPAGE — KEEP LIVE BACKGROUND IN NARROW DESKTOP WINDOWS
========================================================= */

@media (min-width: 801px) and (max-width: 1100px) {

    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    .crx-cosmic-live-bg {
        display: block !important;
    }


    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    #home {
        background-image: none !important;
        background-color: transparent !important;
    }


    body.home-page:not(.teams-page):not(.matches-page):not(.about-page):not(.history-page):not(.founder-page):not(.error-page)
    #crx-cosmic-fx {
        display: block !important;
    }

}