:root {
    --bg:#060610;
    --bg2:#0c0c1b;
    --surface:#111126;
    --surface2:#181838;
    --pink:#ff1688;
    --pink2:#d70e73;
    --purple:#7628a5;
    --gold:#d9b154;
    --gold2:#f0cd79;
    --cream:#f3e8d6;
    --sand:#e6d6bf;
    --ink:#171329;
    --muted:#9e9aaa;
    --display:"Barlow Condensed",sans-serif;
    --body:"Manrope",sans-serif;
    --serif:"Playfair Display",serif;
}

* {
    box-sizing:border-box;
    margin:0;
    padding:0
}

html {
    scroll-behavior:smooth
}

body {
    background:var(--bg);
    color:#fff;
    font-family:var(--body);
    overflow-x:hidden
}

body:not(.loaded) {
    overflow:hidden
}

img {
    display:block;
    width:100%;
    object-fit:cover
}

#brandLogo {
    width: 110px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    #brandLogo {
        width: 65px;
        height: auto;
    }
}

a {
    text-decoration:none;
    color:inherit
}

button,input,select,textarea {
    font:inherit
}

.container {
    width:min(1240px,calc(100% - 56px));
    margin:auto
}

.section-dark {
    background:var(--bg);
    color:#fff
}

.section-cream {
    background:var(--cream);
    color:var(--ink)
}

.section-sand {
    background:var(--sand);
    color:var(--ink)
}

.kicker {
    font-size:.68rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--pink)
}

.section-cream .kicker,.section-sand .kicker {
    color:var(--purple)
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-size:.67rem;
    border:1px solid transparent;
    transition:.25s
}

.btn:hover {
    transform:translateY(-2px)
}

.btn-fill {
    background:var(--pink);
    color:#fff;
    box-shadow:0 15px 35px rgba(255,22,136,.22)
}

.btn-dark {
    background:var(--ink);
    color:#fff
}

.btn-ghost {
    border-color:rgba(255,255,255,.55);
    color:#fff;
    background:rgba(255,255,255,.02)
}

.line-link {
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-top:20px;
    color:var(--purple);
    font-size:.67rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-weight:900
}

.line-link.light {
    color:#fff
}

.line-link b {
    color:var(--pink)
}

.page-loader {
    position:fixed;
    inset:0;
    z-index:999;
    display:grid;
    place-items:center;
    background:var(--bg);
    transition:opacity .8s,visibility .8s
}

.loaded .page-loader {
    opacity:0;
    visibility:hidden
}

.loader-logo {
    width:56px;
    height:56px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:2px solid var(--gold);
    font:900 2rem var(--display);
    color:var(--gold2)
}

.page-loader span {
    position:absolute;
    margin-top:95px;
    font-size:.64rem;
    letter-spacing:.22em;
    font-weight:900;
    color:#aaa
}

.nav-shell {
    position:fixed;
    z-index:80;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    gap:24px;
    padding:12px 30px;
    background:linear-gradient(180deg,rgba(4,4,12,.95),rgba(4,4,12,.48),transparent);
    transition:.3s
}

.nav-shell.scrolled {
    background:rgba(5,5,14,.94);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08)
}

.brand {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:max-content
}

.brand img {
    width:122px;
    height:50px;
    object-fit:contain
}

.brand-wordmark {
    display:flex;
    flex-direction:column;
    font:800 1rem/0.85 var(--display)
}

.brand-wordmark b {
    letter-spacing:.03em
}

.brand-wordmark i {
    font-style:normal;
    color:var(--pink);
    letter-spacing:.08em;
    font-size:.84rem
}

.main-nav {
    display:flex;
    justify-content:center;
    gap:20px;
    flex:1
}

.main-nav a {
    font-size:.61rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-weight:900;
    opacity:.84;
    position:relative;
    padding:9px 0
}

.main-nav a:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--pink);
    transform:scaleX(0);
    transform-origin:left;
    transition:.2s
}

.main-nav a:hover,.main-nav a.active {
    opacity:1
}

.main-nav a:hover:after,.main-nav a.active:after {
    transform:scaleX(1)
}

.nav-join {
    background:var(--pink);
    padding:11px 15px;
    border-radius:999px;
    font-size:.61rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:900;
    white-space:nowrap
}

.menu-btn {
    display:none;
    border:0;
    background:none
}

.menu-btn span {
    width:22px;
    height:2px;
    background:#fff;
    display:block;
    margin:4px
}

.hero {
    min-height:100svh;
    position:relative;
    overflow:hidden;
    background:var(--bg);
    display:flex;
    align-items:flex-end
}

.hero-image {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(3,3,12,.98) 0%,rgba(4,4,13,.72) 38%,rgba(5,5,13,.16) 77%,rgba(5,5,15,.52) 100%),url("assets/rangers-banner.svg") center/cover no-repeat;
    transform:scale(1.03)
}

.hero-glow {
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,22,136,.28),transparent 63%);
    right:10%;
    top:-12%
}

.hero-gradient {
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,var(--bg) 0,transparent 31%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 30%)
}

.hero-inner {
    position:relative;
    z-index:2;
    padding-top:170px;
    padding-bottom:160px
}

.hero-left {
    max-width:800px
}

.eyebrow {
    font-size:.76rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:900;
    margin-bottom:22px
}

.hero h1 {
    font:900 clamp(5.2rem,11vw,11rem)/.76 var(--display);
    letter-spacing:-.03em;
    text-transform:uppercase
}

.hero h1 span {
    color:#fff
}

.hero h1 em {
    font-style:normal;
    background:linear-gradient(180deg,#d3a637 0%,#ffe18c 54%,#a46d17 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent
}

.hero-subline {
    margin-top:30px;
    max-width:650px;
    font-size:clamp(1rem,1.5vw,1.3rem);
    font-weight:700;
    color:#f2eef4
}

.hero-buttons {
    display:flex;
    gap:11px;
    flex-wrap:wrap;
    margin-top:28px
}

.hero-stamp {
    position:absolute;
    right:2%;
    bottom:18%;
    width:130px;
    height:130px;
    border:1px solid rgba(217,177,84,.55);
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--gold2);
    transform:rotate(12deg)
}

.hero-stamp span {
    font:900 2.1rem var(--display)
}

.hero-stamp small {
    font-size:.48rem;
    letter-spacing:.18em
}

.hero-stamp strong {
    font:900 1rem var(--display);
    letter-spacing:.12em
}

.hero-corner {
    position:absolute;
    z-index:1;
    width:220px;
    height:520px;
    top:14%;
    opacity:.28;
    border:1px solid rgba(235,204,135,.35)
}

.hero-corner:before,.hero-corner:after {
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.1) 29px 31px,transparent 32px 58px);
    mask-image:linear-gradient(180deg,transparent,#000 20%,#000 75%,transparent)
}

.hero-corner-left {
    left:-130px;
    transform:skewX(-9deg)
}

.hero-corner-right {
    right:-130px;
    transform:skewX(9deg)
}

.hero-dock {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    background:rgba(7,7,18,.84);
    backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.12)
}

.dock-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}

.dock-cell {
    min-height:80px;
    padding:0 20px;
    display:flex;
    justify-content:center;
    flex-direction:column;
    border-right:1px solid rgba(255,255,255,.12)
}

.dock-cell small {
    font-size:.56rem;
    letter-spacing:.17em;
    color:#aaa7b6;
    text-transform:uppercase
}

.dock-cell strong {
    font:800 1.35rem var(--display);
    color:var(--gold2);
    margin-top:3px
}

.dock-cell strong.pink {
    color:var(--pink)
}

.manifesto {
    padding:120px 0
}

.manifesto-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}

.manifesto-copy h2 {
    font:600 clamp(2.8rem,5vw,5rem)/1 var(--serif);
    margin-top:13px
}

.manifesto-copy h2 span {
    color:var(--pink);
    font-style:italic
}

.manifesto-copy p {
    color:var(--muted);
    max-width:590px;
    margin-top:25px;
    font-size:.92rem
}

.manifesto-art {
    position:relative;
    border-radius:20px;
    overflow:hidden;
    min-height:500px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 35px 100px rgba(0,0,0,.35)
}

.manifesto-art img {
    height:500px;
    filter:brightness(.65) saturate(.7)
}

.art-overlay {
    position:absolute;
    left:25px;
    bottom:24px;
    z-index:2;
    display:flex;
    flex-direction:column
}

.art-overlay span {
    color:var(--gold2);
    font-size:.58rem;
    letter-spacing:.2em
}

.art-overlay strong {
    font:800 4.5rem var(--display);
    line-height:.8
}

.jaali {
    position:absolute;
    right:-15px;
    top:20px;
    width:170px;
    height:300px;
    opacity:.28;
    background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(255,255,255,.3) 21px 22px),repeating-linear-gradient(0deg,transparent 0 20px,rgba(255,255,255,.3) 21px 22px);
    transform:skewX(-8deg);
    mask-image:linear-gradient(90deg,transparent,#000)
}

.marquee {
    overflow:hidden;
    background:linear-gradient(90deg,var(--pink),#9d1a8c);
    border-block:1px solid rgba(255,255,255,.15)
}

.marquee-track {
    display:flex;
    gap:35px;
    width:max-content;
    animation:marquee 25s linear infinite;
    padding:14px 0
}

.marquee-track span {
    font:700 1.1rem var(--display);
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap
}

.marquee-track b {
    color:var(--gold2);
    margin-left:25px
}

@keyframes marquee {
    to {
        transform:translateX(-50%)
    }

}

.team,.players,.season,.news,.fans,.partners,.media,.contact {
    padding:110px 0
}

.section-top {
    display:flex;
    justify-content:space-between;
    gap:35px;
    align-items:end;
    margin-bottom:45px
}

.section-top h2 {
    font:900 clamp(3.6rem,6vw,6.3rem)/.82 var(--display);
    margin-top:10px;
    letter-spacing:-.03em
}

.section-top h2 span {
    color:var(--pink)
}

.section-top>p {
    max-width:500px;
    color:#77717f;
    font-size:.9rem
}

.team-feature {
    display:grid;
    grid-template-columns:.82fr 1.35fr .88fr;
    min-height:470px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 26px 75px rgba(24,17,35,.16)
}

.feature-copy {
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.feature-copy small {
    font-weight:900;
    font-size:.61rem;
    letter-spacing:.15em;
    color:var(--gold)
}

.feature-copy h3 {
    font:800 2.75rem/.92 var(--display)
}

.feature-copy p {
    max-width:250px;
    font-size:.8rem
}

.dark-panel {
    background:var(--bg);
    color:#fff
}

.dark-panel p {
    color:#aaa7b6
}

.light-panel {
    background:#eadac0;
    color:var(--ink)
}

.light-panel p {
    color:#77717b
}

.feature-photo img {
    height:100%;
    filter:brightness(.68) saturate(.7)
}

.people-block {
    margin-top:90px
}

.block-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:22px
}

.block-head h3 {
    font:800 3.3rem/.9 var(--display);
    margin-top:6px
}

.block-head>span {
    font-size:.67rem;
    color:#7d7782
}

.leadership {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.leader {
    background:#fff;
    border:1px solid rgba(23,19,41,.1);
    border-radius:16px;
    overflow:hidden
}

.leader img {
    aspect-ratio:1;
    filter:grayscale(.15) saturate(.7);
    background:var(--bg)
}

.leader div {
    padding:15px
}

.leader small {
    text-transform:uppercase;
    letter-spacing:.15em;
    color:#7c7581;
    font-size:.57rem
}

.leader h4 {
    font:800 1.65rem var(--display);
    margin-top:4px
}

.leader p {
    font-size:.72rem;
    color:#7a7480;
    margin-top:6px
}



/* =====================================
   RAJASTHAN RANGERS — LEADERSHIP
===================================== */

.leadership-section {
    width: 100%;
    padding: 80px 4%;
    box-sizing: border-box;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 10% 0%,
            rgba(116, 25, 116, 0.22),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(255, 0, 128, 0.12),
            transparent 40%
        ),
        #07091b;

    color: #ffffff;
}

/* SECTION HEADING */

.leadership-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 35px;
}

.section-eyebrow {
    display: block;
    color: #ff1689;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.leadership-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.edit-note {
    color: #9296b2;
    font-size: 12px;
    letter-spacing: 1px;
}

/* LEADERSHIP GRID */

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

/* PLAYER CARDS */

.leader-card {
    position: relative;
    min-width: 0;
    overflow: hidden;

    background: #10132b;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);

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

/* PINK TOP ACCENT */

.leader-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #ff1689,
        #7a36ff,
        #f5d16a
    );

    z-index: 2;
}

/* HOVER */

.leader-card:hover {
    transform: translateY(-7px);

    border-color: rgba(255, 22, 137, 0.65);

    box-shadow:
        0 15px 40px rgba(255, 0, 128, 0.12),
        0 0 20px rgba(91, 50, 255, 0.10);
}

/* IMAGE */

.leader-image {
    position: relative;
    width: 100%;
    height: 370px;
    overflow: hidden;

    background: #171a36;
}

.leader-image img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition: transform 0.5s ease;
}

.leader-card:hover .leader-image img {
    transform: scale(1.04);
}

/* IMAGE BOTTOM BLEND */

.leader-image::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;

    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(16, 19, 43, 0.25) 55%,
        #10132b 100%
    );

    pointer-events: none;
}

/* CARD CONTENT */

.leader-info {
    position: relative;
    padding: 22px 20px 25px;

    background: linear-gradient(
        145deg,
        #10132b,
        #0b0d20
    );
}

.leader-role {
    display: inline-block;

    color: #ff1689;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;

    margin-bottom: 12px;
}

.leader-info h3 {
    margin: 0 0 12px;

    color: #f5d16a;
    font-size: clamp(18px, 1.5vw, 25px);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;

    overflow-wrap: anywhere;
}

.leader-info p {
    margin: 0;

    color: #b7bad0;
    font-size: 14px;
    line-height: 1.6;
}

/* =====================================
   TABLET
===================================== */

@media (max-width: 1024px) {

    .leadership-section {
        padding: 65px 4%;
    }

    .leadership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .leader-image {
        height: 340px;
    }

    .leader-info h3 {
        font-size: 23px;
    }
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 600px) {

    .leadership-section {
        padding: 45px 16px;
    }

    .leadership-heading {
        align-items: flex-start;
        margin-bottom: 25px;
    }

    .section-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }

    .leadership-heading h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .edit-note {
        display: none;
    }

    .leadership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .leader-card {
        border-radius: 12px;
    }

    .leader-image {
        height: clamp(160px, 48vw, 250px);
    }

    .leader-info {
        padding: 14px 11px 17px;
    }

    .leader-role {
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .leader-info h3 {
        font-size: clamp(14px, 3.5vw, 19px);
        margin-bottom: 8px;
    }

    .leader-info p {
        font-size: 11px;
        line-height: 1.5;
    }
}

/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width: 360px) {

    .leadership-section {
        padding: 35px 12px;
    }

    .leadership-grid {
        gap: 9px;
    }

    .leader-image {
        height: 145px;
    }

    .leader-info {
        padding: 11px 9px 14px;
    }

    .leader-info h3 {
        font-size: 13px;
    }

    .leader-info p {
        font-size: 10px;
    }
}

/* REDUCE MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .leader-card,
    .leader-image img {
        transition: none;
    }

    .leader-card:hover {
        transform: none;
    }
}

.filter-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:28px
}

.filter {
    border:1px solid rgba(255,255,255,.13);
    background:transparent;
    color:#c8c4d2;
    border-radius:999px;
    padding:9px 13px;
    font-size:.59rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:900
}

.filter:hover,.filter.active {
    background:var(--pink);
    border-color:var(--pink);
    color:#fff
}

.dark-filters .filter {
    border-color:rgba(23,19,41,.15);
    color:#5f5966
}

.dark-filters .filter.active,.dark-filters .filter:hover {
    color:#fff
}

.players-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.player {
    height:430px;
    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:#111126;
    border:1px solid rgba(255,255,255,.1)
}

.player img {
    height:100%;
    position:absolute;
    inset:0;
    filter:saturate(.75) contrast(1.05)
}

.player:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 34%,rgba(5,5,16,.97) 92%)
}

.num {
    position:absolute;
    right:14px;
    top:8px;
    z-index:2;
    font:800 2.7rem var(--display);
    color:rgba(255,255,255,.55)
}

.player-copy {
    position:absolute;
    z-index:2;
    left:18px;
    right:18px;
    bottom:17px
}

.player-copy h3 {
    font:800 2.05rem/.9 var(--display)
}

.player-copy>div {
    font-size:.61rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#d3d0d9;
    margin-top:9px
}

.player-copy i {
    display:inline-block;
    width:4px;
    height:4px;
    background:var(--gold);
    border-radius:50%;
    margin:0 7px;
    vertical-align:middle
}

.player-copy p {
    font-size:.71rem;
    color:#aaa7b6;
    max-width:230px;
    margin-top:9px
}

.player-copy small {
    display:block;
    color:var(--gold2);
    font-size:.58rem;
    letter-spacing:.11em;
    font-weight:900;
    margin-top:13px
}

.season-hero {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:16px
}

.season-panel {
    background:var(--bg);
    color:#fff;
    border-radius:20px;
    padding:40px;
    min-height:490px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.mini-label {
    font-size:.59rem;
    letter-spacing:.16em;
    font-weight:900;
    color:var(--gold2)
}

.season-panel>p {
    max-width:550px;
    color:#aaa7b6;
    font-size:.84rem
}

.format-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:22px
}

.format-stats strong {
    font:800 2.8rem/.9 var(--display);
    color:var(--pink);
    display:block
}

.format-stats span {
    font-size:.54rem;
    line-height:1.2;
    letter-spacing:.12em;
    color:#aaa7b6
}

.format-total {
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:20px;
    display:flex;
    align-items:end;
    gap:12px
}

.format-total small {
    font-size:.55rem;
    letter-spacing:.15em;
    color:#aaa7b6
}

.format-total strong {
    font:900 5rem/.7 var(--display);
    color:var(--gold2)
}

.format-total span {
    font-size:.55rem;
    letter-spacing:.14em;
    margin-bottom:3px
}

.season-visual {
    position:relative;
    border-radius:20px;
    overflow:hidden;
    min-height:490px
}

.season-visual img {
    height:100%;
    filter:brightness(.58) saturate(.75)
}

.season-visual:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(5,5,14,.96),transparent 55%)
}

.visual-copy {
    position:absolute;
    z-index:2;
    left:30px;
    bottom:26px;
    display:flex;
    flex-direction:column
}

.visual-copy span {
    color:var(--gold2);
    font-size:.6rem;
    letter-spacing:.18em;
    font-weight:900
}

.visual-copy strong {
    font:900 5rem/.76 var(--display)
}

.visual-copy small {
    font-size:.62rem;
    letter-spacing:.13em;
    margin-top:8px
}

.schedule-strip {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid rgba(23,19,41,.1);
    border-radius:16px;
    overflow:hidden;
    margin-top:16px
}

.schedule {
    padding:19px;
    border-right:1px solid rgba(23,19,41,.09)
}

.schedule:last-child {
    border:0
}

.schedule small {
    display:block;
    font-size:.55rem;
    color:#817986;
    letter-spacing:.15em
}

.schedule strong {
    display:block;
    font:800 1.45rem var(--display);
    margin-top:5px
}

.schedule span {
    font-size:.61rem;
    color:#817986
}

.roadmap {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:26px
}

.roadmap article {
    background:#fff;
    border-radius:13px;
    padding:21px;
    border-top:3px solid var(--pink)
}

.roadmap span {
    font:800 1.8rem var(--display);
    color:var(--purple)
}

.roadmap strong {
    display:block;
    font:800 1.18rem var(--display);
    margin-top:6px
}

.roadmap small {
    display:block;
    color:#817985;
    font-size:.59rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-top:5px
}

.content-wall {
    columns:4 220px;
    column-gap:14px
}

.news-card,.quick-content {
    break-inside:avoid;
    display:inline-block;
    width:100%;
    margin-bottom:14px;
    border-radius:15px;
    overflow:hidden
}

.news-card {
    background:#fff;
    border:1px solid rgba(23,19,41,.08)
}

.news-card img {
    aspect-ratio:1/.98
}

.news-card>div {
    padding:15px
}

.news-card span,.quick-content>span {
    display:inline-flex;
    border-radius:999px;
    padding:5px 8px;
    background:#f4dfea;
    color:var(--purple);
    font-size:.53rem;
    letter-spacing:.12em;
    font-weight:900;
    text-transform:uppercase
}

.news-card h3 {
    font:800 1.4rem/.93 var(--display);
    margin-top:8px
}

.news-card p {
    font-size:.72rem;
    color:#77717d;
    margin-top:7px
}

.quick-content {
    min-height:180px;
    background:var(--bg);
    color:#fff;
    padding:20px
}

.quick-content strong {
    display:block;
    color:var(--gold2);
    font:800 2.15rem/.9 var(--display);
    margin-top:20px
}

.quick-content p {
    font-size:.72rem;
    color:#aaa7b6;
    margin-top:17px
}

.fans-top {
    display:grid;
    grid-template-columns:1fr .9fr;
    align-items:end;
    gap:40px;
    padding-bottom:55px;
    border-bottom:1px solid rgba(255,255,255,.1)
}

.fans-top h2 {
    font:900 clamp(3.8rem,6vw,6.5rem)/.8 var(--display);
    margin-top:8px
}

.fans-top h2 span {
    color:var(--pink)
}

.fans-top p {
    max-width:620px;
    color:#aaa7b6;
    font-size:.86rem;
    margin-top:18px
}

.newsletter {
    display:flex;
    flex-direction:column;
    gap:8px
}

.newsletter input {
    height:52px;
    border-radius:999px;
    border:0;
    padding:0 17px;
    outline:0
}

.newsletter small {
    font-size:.64rem;
    min-height:16px;
    color:#aaa7b6
}

.fan-cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:24px
}

.fan-cards article {
    padding:24px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    background:#101022
}

.fan-cards article>span {
    font:800 1.8rem var(--display);
    color:var(--gold2)
}

.fan-cards h3 {
    font:800 1.55rem var(--display);
    margin-top:19px
}

.fan-cards p {
    font-size:.7rem;
    color:#a6a2b0;
    margin-top:6px
}

.fan-cards button {
    border:0;
    background:none;
    color:var(--pink);
    font-size:.59rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:900;
    margin-top:19px
}

.fan-wall-wrap {
    margin-top:70px
}

.wall-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:21px
}

.wall-head h3 {
    font:800 2.8rem/.9 var(--display);
    margin-top:8px
}

.wall-head strong {
    font:italic 1rem var(--serif);
    color:var(--gold2)
}

.fan-wall {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:9px
}

.fan-wall img {
    aspect-ratio:1;
    border-radius:12px;
    filter:saturate(.65) contrast(1.06)
}

.fan-wall img:nth-child(2n) {
    transform:translateY(14px)
}

.partner-group {
    background:#fff;
    border-radius:15px;
    border:1px solid rgba(23,19,41,.09);
    padding:20px;
    margin-bottom:13px
}

.partner-title {
    display:flex;
    justify-content:space-between;
    margin-bottom:14px
}

.partner-title span {
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:900
}

.partner-title small {
    font-size:.6rem;
    color:#8a8490
}

.partner-logos {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px
}

.partner-logos>div {
    min-height:78px;
    display:grid;
    place-items:center;
    border:1px solid rgba(23,19,41,.08);
    background:#fbf7ee;
    border-radius:11px;
    color:#49444f;
    font:800 1.35rem var(--display);
    filter:grayscale(1);
    transition:.2s
}

.partner-logos>div:hover {
    filter:none;
    color:var(--pink)
}

.partner-banner {
    margin-top:20px;
    padding:28px;
    border-radius:16px;
    background:linear-gradient(120deg,var(--pink),#63218d);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.partner-banner span {
    font-size:.57rem;
    letter-spacing:.16em;
    font-weight:900
}

.partner-banner h3 {
    font:800 2.5rem/.92 var(--display);
    margin-top:5px
}

.partner-banner .btn {
    background:#fff;
    color:var(--ink)
}

.media-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:start
}

.media-grid h2,.contact h2 {
    font:900 clamp(4rem,6vw,6.5rem)/.8 var(--display);
    margin-top:10px
}

.media-grid h2 span,.contact h2 span {
    color:var(--pink)
}

.media-grid>div>p,.contact>div>p {
    color:#aaa7b6;
    max-width:470px;
    font-size:.84rem;
    margin-top:20px
}

.media-links {
    border-top:1px solid rgba(255,255,255,.1)
}

.media-links a {
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:12px;
    align-items:center;
    padding:21px 0;
    border-bottom:1px solid rgba(255,255,255,.1)
}

.media-links small {
    font:800 1.4rem var(--display);
    color:var(--gold)
}

.media-links strong {
    font:800 1.8rem var(--display)
}

.media-links span {
    font-size:.58rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#928d9d
}

.contact-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:70px
}

.contact>div>p {
    color:#77717d
}

.socials {
    display:flex;
    gap:8px;
    margin-top:25px
}

.socials a {
    width:38px;
    height:38px;
    border:1px solid rgba(23,19,41,.15);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:.59rem;
    font-weight:900
}

.socials a:hover {
    background:var(--pink);
    border-color:var(--pink);
    color:#fff
}

.contact-form {
    background:#fff;
    color:var(--ink);
    padding:28px;
    border-radius:17px;
    box-shadow:0 30px 80px rgba(25,15,35,.14)
}

.contact-form label {
    display:block;
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:900;
    color:#625d67;
    margin-bottom:12px
}

.two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px
}

.contact-form input,.contact-form select,.contact-form textarea {
    width:100%;
    margin-top:7px;
    border:1px solid rgba(23,19,41,.1);
    background:#fbf7ef;
    border-radius:9px;
    padding:12px 13px;
    outline:0;
    color:var(--ink);
    font-size:.84rem
}

.contact-form textarea {
    resize:vertical
}

.contact-form #contactMsg {
    display:block;
    color:#77717d;
    font-size:.64rem;
    min-height:16px;
    margin-top:7px
}

.footer {
    background:#05050d;
    padding:40px 0 18px;
    border-top:1px solid rgba(255,255,255,.08)
}

.footer-top {
    display:grid;
    grid-template-columns:1fr 1.4fr auto;
    gap:30px;
    align-items:start
}

.footer-brand .brand-wordmark {
    color:#fff
}

.footer-top nav {
    display:flex;
    flex-wrap:wrap;
    gap:11px 18px
}

.footer-top nav a {
    font-size:.59rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:#96939f
}

.footer-top nav a:hover {
    color:#fff
}

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

.footer-socials a {
    width:35px;
    height:35px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:.56rem
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:32px;
    padding-top:16px;
    color:#777481;
    font-size:.57rem;
    text-transform:uppercase;
    letter-spacing:.08em
}

.modal {
    position:fixed;
    inset:0;
    z-index:140;
    display:none;
    place-items:center
}

.modal.open {
    display:grid
}

.modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(3,3,9,.84);
    backdrop-filter:blur(10px)
}

.modal-card {
    position:relative;
    z-index:2;
    width:min(520px,calc(100% - 30px));
    background:#fff;
    color:var(--ink);
    border-radius:17px;
    padding:28px
}

.modal-close {
    position:absolute;
    right:12px;
    top:7px;
    border:0;
    background:none;
    font-size:2rem;
    color:#777
}

.modal-card h3 {
    font:800 3rem/.9 var(--display);
    margin:8px 0
}

.modal-card>p {
    font-size:.76rem;
    color:#777
}

.modal-card #modalOptions {
    display:grid;
    gap:8px;
    margin-top:18px
}

.modal-card #modalOptions button {
    border:1px solid rgba(23,19,41,.1);
    background:#fbf7ee;
    border-radius:9px;
    padding:12px;
    text-align:left;
    font-weight:800
}

.modal-card #modalResult {
    display:block;
    font-size:.64rem;
    color:#777;
    margin-top:9px;
    min-height:16px
}

.cursor-dot,.cursor-ring {
    position:fixed;
    z-index:300;
    pointer-events:none;
    border-radius:50%;
    transform:translate(-50%,-50%)
}

.cursor-dot {
    width:5px;
    height:5px;
    background:var(--pink)
}

.cursor-ring {
    width:31px;
    height:31px;
    border:1px solid rgba(255,22,136,.7);
    transition:.12s ease
}

.cursor-hover .cursor-ring {
    width:48px;
    height:48px;
    background:rgba(255,22,136,.06);
    border-color:var(--gold2)
}

.reveal {
    opacity:0;
    transform:translateY(30px);
    transition:opacity .8s ease,transform .8s ease
}

.reveal.visible {
    opacity:1;
    transform:none
}

.delay-1 {
    transition-delay:.12s
}

.delay-2 {
    transition-delay:.22s
}

@media(max-width:1120px) {
    .nav-shell {
        gap:15px;
        padding-inline:18px
    }

    .main-nav {
        gap:12px
    }

    .main-nav a {
        font-size:.55rem
    }

    .nav-join {
        display:none
    }

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

    .leadership {
        grid-template-columns:repeat(2,1fr)
    }

    .fan-cards {
        grid-template-columns:repeat(2,1fr)
    }

}

@media(max-width:860px) {
    .container {
        width:min(100% - 34px,720px)
    }

    .menu-btn {
        display:block;
        margin-left:auto
    }

    .main-nav {
        position:absolute;
        left:16px;
        right:16px;
        top:68px;
        display:grid;
        gap:3px;
        padding:10px;
        background:rgba(6,6,16,.97);
        border:1px solid rgba(255,255,255,.1);
        border-radius:15px;
        opacity:0;
        pointer-events:none;
        transform:translateY(-10px);
        transition:.2s
    }

    .main-nav.open {
        opacity:1;
        pointer-events:auto;
        transform:none
    }

    .main-nav a {
        padding:12px;
        border-radius:7px
    }

    .main-nav a:hover,.main-nav a.active {
        background:rgba(255,22,136,.11)
    }

    .main-nav a:after {
        display:none
    }

    .hero-inner {
        padding-top:150px;
        padding-bottom:145px
    }

    .hero h1 {
        font-size:clamp(4.8rem,17vw,8rem)
    }

    .hero-stamp {
        right:5%;
        bottom:25%;
        transform:scale(.85) rotate(12deg)
    }

    .dock-cell {
        min-height:68px;
        padding-inline:13px
    }

    .manifesto-grid,.season-hero,.fans-top,.media-grid,.contact-grid {
        grid-template-columns:1fr
    }

    .manifesto-art {
        min-height:400px
    }

    .manifesto-art img {
        height:400px
    }

    .team-feature {
        grid-template-columns:1fr
    }

    .feature-photo {
        height:340px
    }

    .feature-copy {
        min-height:230px
    }

    .players-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .format-stats {
        grid-template-columns:repeat(2,1fr)
    }

    .season-panel,.season-visual {
        min-height:400px
    }

    .season-visual img {
        height:400px
    }

    .schedule-strip {
        grid-template-columns:repeat(2,1fr)
    }

    .schedule:nth-child(2) {
        border-right:0
    }

    .schedule:nth-child(-n+2) {
        border-bottom:1px solid rgba(23,19,41,.09)
    }

    .roadmap {
        grid-template-columns:repeat(2,1fr)
    }

    .partner-logos {
        grid-template-columns:repeat(3,1fr)
    }

    .footer-top {
        grid-template-columns:1fr
    }

}

@media(max-width:620px) {
    body {
        cursor:auto
    }

    .cursor-dot,.cursor-ring {
        display:none
    }

    .container {
        width:calc(100% - 28px)
    }

    .nav-shell {
        padding:9px 12px
    }

    .brand img {
        width:104px;
        height:45px
    }

    .brand-wordmark {
        font-size:.83rem
    }

    .brand-wordmark i {
        font-size:.7rem
    }

    .hero {
        min-height:91svh
    }

    .hero-image {
        background-position:67% center
    }

    .hero-inner {
        padding-top:130px;
        padding-bottom:25px
    }

    .hero h1 {
        font-size:clamp(4.2rem,22vw,6.6rem);
        line-height:.78
    }

    .hero-subline {
        font-size:.93rem;
        margin-top:23px
    }

    .hero-buttons {
        display:grid;
        grid-template-columns:1fr;
        max-width:310px
    }

    .hero-buttons .btn {
        width:100%
    }

    .hero-stamp {
        display:none
    }

    .hero-corner {
        display:none
    }

    .dock-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .dock-cell {
        min-height:57px
    }

    .dock-cell:nth-child(2) {
        border-right:0
    }

    .dock-cell:nth-child(-n+2) {
        border-bottom:1px solid rgba(255,255,255,.12)
    }

    .dock-cell strong {
        font-size:1.04rem
    }

    .dock-cell small {
        font-size:.49rem
    }

    .manifesto,.team,.players,.season,.news,.fans,.partners,.media,.contact {
        padding:78px 0
    }

    .manifesto-copy h2 {
        font-size:2.9rem
    }

    .manifesto-art {
        min-height:330px
    }

    .manifesto-art img {
        height:330px
    }

    .art-overlay strong {
        font-size:3.5rem
    }

    .section-top {
        display:block;
        margin-bottom:30px
    }

    .section-top h2 {
        font-size:4rem
    }

    .section-top>p {
        margin-top:18px
    }

    .line-link {
        margin-top:17px
    }

    .team-feature {
        min-height:auto
    }

    .feature-photo {
        height:280px
    }

    .feature-copy {
        padding:30px;
        min-height:225px
    }

    .feature-copy h3 {
        font-size:2.35rem
    }

    .leadership {
        grid-template-columns:1fr
    }

    .block-head {
        display:block
    }

    .block-head>span {
        display:block;
        margin-top:9px
    }

    .players-grid {
        grid-template-columns:1fr
    }

    .player {
        height:420px
    }

    .format-stats {
        grid-template-columns:repeat(2,1fr)
    }

    .format-total strong {
        font-size:4.2rem
    }

    .visual-copy strong {
        font-size:3.9rem
    }

    .schedule-strip,.roadmap {
        grid-template-columns:1fr
    }

    .schedule {
        border-right:0;
        border-bottom:1px solid rgba(23,19,41,.09)
    }

    .schedule:last-child {
        border-bottom:0
    }

    .roadmap {
        gap:9px
    }

    .content-wall {
        columns:1
    }

    .fan-cards {
        grid-template-columns:1fr
    }

    .fan-wall {
        grid-template-columns:repeat(2,1fr)
    }

    .wall-head {
        display:block
    }

    .wall-head strong {
        display:block;
        margin-top:9px
    }

    .partner-logos {
        grid-template-columns:repeat(2,1fr)
    }

    .partner-banner {
        display:block
    }

    .partner-banner h3 {
        font-size:2.2rem
    }

    .partner-banner .btn {
        margin-top:18px
    }

    .two {
        grid-template-columns:1fr
    }

    .footer-bottom {
        display:block
    }

    .footer-bottom span+span {
        display:block;
        margin-top:8px
    }

}

@media(max-width:390px) {
    .hero h1 {
        font-size:3.9rem
    }

    .hero-inner {
        padding-top:118px
    }

    .hero-subline {
        font-size:.86rem
    }

    .btn {
        font-size:.62rem;
        min-height:46px
    }

    .dock-cell strong {
        font-size:.95rem
    }

    .section-top h2 {
        font-size:3.55rem
    }

    .team,.players,.season,.news,.fans,.partners,.media,.contact,.manifesto {
        padding:68px 0
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    .marquee-track {
        animation:none
    }

    .reveal {
        opacity:1;
        transform:none;
        transition:none
    }

}





/* =========================
   PLAYERS - COMING SOON
========================= */

.players-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.player-card {
  position: relative;
  height: 390px;
  overflow: hidden;
  border: 1px solid var(--border, #242436);
  border-radius: 15px;
  background: var(--surface, #111126);
}

.player-card .player-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(40%);
}

.player-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 6, 16, 0.1) 0%,
    rgba(6, 6, 16, 0.3) 40%,
    rgba(6, 6, 16, 0.98) 100%
  );
  pointer-events: none;
}

.player-number {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--display, sans-serif);
  font-size: 32px;
  font-weight: 900;
}

.player-info {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
}

.player-name {
  font-family: var(--display, sans-serif);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}

.player-meta {
  margin-top: 10px;
  color: #bdbbc8;
  font-size: 10px;
  letter-spacing: 1px;
}

.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 13px;
  border: 1px solid var(--pink, #ff1688);
  border-radius: 30px;
  color: #fff;
  background: rgba(255, 22, 136, 0.12);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.coming-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink, #ff1688);
  box-shadow: 0 0 10px var(--pink, #ff1688);
}

/* Tablet */

@media (max-width: 900px) {
  .players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-card {
    height: 350px;
  }
}

/* Mobile */

@media (max-width: 520px) {
  .players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .player-card {
    height: 280px;
    border-radius: 12px;
  }

  .player-info {
    padding: 12px;
  }

  .player-name {
    font-size: 23px;
  }

  .player-number {
    font-size: 25px;
    top: 10px;
    right: 10px;
  }

  .coming-soon {
    font-size: 8px;
    padding: 8px 10px;
  }
}

@media (max-width: 350px) {
  .players-grid {
    grid-template-columns: 1fr;
  }

  .player-card {
    height: 350px;
  }
}















/* FINAL PACKAGE PATCH: 3-player Coming Soon roster + resilient image sizing */
#players .players-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#players .player { min-width: 0; }
#players .player img { width: 100%; object-fit: cover; object-position: center; }
#players .player-coming-soon .coming-soon-label { color: var(--gold2); font-weight: 800; letter-spacing: .12em; }
@media (max-width: 900px) { #players .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #players .players-grid { grid-template-columns: 1fr; } #players .player { height: 390px; } }