:root{
    --ink:#080713;
    --panel:#100d20;
    --purple:#7445ff;
    --violet:#a383ff;
    --pink:#ef5aff;
    --cream:#f4f0ff;
    --muted:#aca5c2;
    --line:rgba(255,255,255,.12);
    --max:1240px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--ink);
    color:var(--cream);
    font-family:"DM Sans",sans-serif;
    overflow-x:hidden
}

.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:20;
    opacity:.055;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.site-header{
    height:82px;
    padding:0 max(28px,calc((100vw - var(--max))/2));
    display:flex;
    align-items:center;
    gap:42px;
    position:absolute;
    z-index:10;
    width:100%;
    border-bottom:1px solid var(--line)
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    font-family:"Archivo Black";
    font-size:16px;
    line-height:.85;
    letter-spacing:-.5px;
    white-space:nowrap
}

.brand small{
    display:block;
    font:700 8px "DM Sans";
    letter-spacing:4px;
    margin-bottom:4px
}

.brand-mark{
    width:35px;
    height:35px;
    display:flex;
    gap:3px;
    align-items:flex-end;
    transform:skew(-9deg)
}

.brand-mark i{
    display:block;
    width:9px;
    background:linear-gradient(var(--pink),var(--purple));
    border-radius:2px
}

.brand-mark i:nth-child(1){
    height:20px
}

.brand-mark i:nth-child(2){
    height:32px
}

.brand-mark i:nth-child(3){
    height:25px
}

.site-header nav{
    display:flex;
    gap:28px;
    margin-left:auto
}

.site-header nav a{
    color:#d7d1e6;
    text-decoration:none;
    font-size:13px;
    font-weight:600
}

.site-header nav a:hover{
    color:#fff
}

.live-button{
    background:#fff;
    color:#171020;
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
    padding:13px 17px;
    border-radius:4px
}

.live-button span,.status i,.standings-state i{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ff4161;
    margin-right:7px;
    box-shadow:0 0 12px #ff4161
}

.menu-toggle{
    display:none
}

.hero{
    min-height:820px;
    height:100vh;
    position:relative;
    overflow:hidden;
    padding:150px max(28px,calc((100vw - var(--max))/2)) 80px;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    align-items:center;
    gap:80px;
    background:radial-gradient(circle at 75% 40%,rgba(116,69,255,.42),transparent 28%),radial-gradient(circle at 7% 75%,rgba(239,90,255,.16),transparent 30%),linear-gradient(125deg,#090714 25%,#15102a 70%,#0b0816)
}

.hero:after{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    right:-150px;
    bottom:-370px;
    border:120px solid rgba(151,112,255,.09);
    transform:rotate(18deg)
}

.hero-orbit{
    position:absolute;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    right:-80px;
    top:120px
}

.orbit-one{
    width:570px;
    height:570px
}

.orbit-two{
    width:420px;
    height:420px;
    right:-5px;
    top:195px
}

.eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:2.3px;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px
}

.eyebrow span{
    height:7px;
    width:7px;
    background:var(--pink);
    transform:rotate(45deg)
}

h1,h2{
    font-family:"Archivo Black";
    margin:0;
    letter-spacing:-4px;
    line-height:.87
}

h1{
    font-size:clamp(68px,8.6vw,132px);
    text-shadow:0 10px 50px rgba(0,0,0,.3)
}

h1 span{
    display:block;
    font:700 13px "DM Sans";
    letter-spacing:12px;
    margin:0 0 12px 8px;
    color:var(--violet)
}

.hero-copy{
    color:#c7c0d8;
    max-width:590px;
    font-size:17px;
    line-height:1.7;
    margin:30px 0
}

.hero-actions{
    display:flex;
    gap:12px
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    padding:16px 22px;
    border-radius:4px;
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:1px;
    font-weight:800
}

.button.primary{
    background:linear-gradient(105deg,var(--purple),#9b58ff);
    color:#fff;
    box-shadow:0 12px 35px rgba(116,69,255,.35)
}

.button.ghost{
    border:1px solid rgba(255,255,255,.25);
    color:#fff
}

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

.event-card{
    position:relative;
    z-index:2;
    background:rgba(16,13,32,.75);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(18px);
    padding:28px;
    box-shadow:0 30px 80px rgba(0,0,0,.28)
}

.event-card-top{
    display:flex;
    justify-content:space-between;
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted)
}

.date-lockup{
    padding:35px 0 28px;
    display:grid;
    grid-template-columns:70px 1fr;
    align-items:end
}

.date-lockup strong{
    font-family:"Archivo Black";
    font-size:22px;
    color:var(--violet)
}

.date-lockup b{
    font-family:"Archivo Black";
    font-size:52px;
    letter-spacing:-3px
}

.date-lockup span{
    grid-column:2;
    font-size:12px;
    letter-spacing:8px;
    color:var(--muted)
}

.time-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:18px 0
}

.time-row span{
    font-size:18px;
    font-weight:700
}

.time-row span+span{
    border-left:1px solid var(--line);
    padding-left:20px
}

.time-row small{
    display:block;
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--muted);
    margin-bottom:4px
}

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

.countdown div{
    background:rgba(255,255,255,.05);
    padding:12px 5px;
    text-align:center
}

.countdown b{
    display:block;
    font-family:"Archivo Black";
    font-size:22px
}

.countdown small{
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
    color:var(--muted)
}

.scroll-cue{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:2px;
    color:var(--muted)
}

.scroll-cue span{
    color:#fff;
    margin-left:10px
}

.ticker{
    background:var(--purple);
    overflow:hidden;
    transform:rotate(-1deg) scale(1.02);
    position:relative;
    z-index:3
}

.ticker div{
    width:max-content;
    display:flex;
    gap:45px;
    padding:18px 0;
    align-items:center;
    font-family:"Archivo Black";
    font-size:16px;
    animation:marquee 24s linear infinite
}

.ticker i{
    font-style:normal;
    color:#d7c8ff
}

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

}

.section{
    max-width:var(--max);
    margin:auto;
    padding:130px 28px
}

.section-label{
    text-transform:uppercase;
    color:var(--violet);
    font-size:10px;
    font-weight:800;
    letter-spacing:2.5px;
    margin-bottom:28px
}

.intro-grid{
    display:grid;
    grid-template-columns:1fr .7fr;
    gap:100px
}

.section h2{
    font-size:clamp(47px,6vw,86px)
}

h2 em{
    font-style:normal;
    color:var(--purple)
}

.intro-copy{
    color:#bbb4ca;
    line-height:1.75;
    font-size:16px
}

.intro-copy p:first-child{
    color:#eeeaf6;
    font-size:20px;
    margin-top:0
}

.format-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:85px;
    border:1px solid var(--line)
}

.format-card{
    min-height:270px;
    padding:30px;
    border-right:1px solid var(--line)
}

.format-card:last-child{
    border:0
}

.format-card>span{
    font-size:10px;
    color:var(--violet)
}

.format-card h3{
    text-transform:uppercase;
    font-family:"Archivo Black";
    font-size:24px;
    margin:95px 0 10px
}

.format-card p{
    font-size:13px;
    line-height:1.6;
    color:var(--muted)
}

.accent-card{
    background:var(--purple)
}

.accent-card>span,.accent-card p{
    color:#e9e0ff
}

.teams-section,.standings-section{
    max-width:none;
    padding-left:max(28px,calc((100vw - var(--max))/2));
    padding-right:max(28px,calc((100vw - var(--max))/2));
    background:#0d0a1b
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:55px
}

.section-heading p{
    color:var(--muted);
    line-height:1.7
}

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

.team-card{
    height:305px;
    position:relative;
    overflow:hidden;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:
        radial-gradient(circle at var(--card-x) var(--card-y),color-mix(in srgb,var(--team) 45%,transparent),transparent 38%),
        linear-gradient(var(--card-angle),color-mix(in srgb,var(--team) 28%,#202126),#0b0c0f 72%);
    border:1px solid rgba(255,255,255,.1);
    transition:.25s
}

.team-card:hover{
    transform:translateY(-7px);
    border-color:var(--team)
}

.team-card:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.38;
    pointer-events:none
}

.team-card[data-pattern="0"]:before{background:radial-gradient(circle,color-mix(in srgb,var(--team) 65%,transparent) 1.5px,transparent 2px);background-size:18px 18px}
.team-card[data-pattern="1"]:before{background:repeating-linear-gradient(125deg,transparent 0 18px,color-mix(in srgb,var(--team) 45%,transparent) 19px 22px)}
.team-card[data-pattern="2"]:before{background:conic-gradient(from 35deg at 90% 10%,color-mix(in srgb,var(--team) 60%,transparent),transparent 18% 35%,color-mix(in srgb,var(--team) 35%,transparent) 36% 48%,transparent 49%)}
.team-card[data-pattern="3"]:before{background:linear-gradient(color-mix(in srgb,var(--team) 35%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--team) 35%,transparent) 1px,transparent 1px);background-size:24px 24px}
.team-card[data-pattern="4"]:before{background:linear-gradient(145deg,transparent 40%,color-mix(in srgb,var(--team) 55%,transparent) 41% 57%,transparent 58%),linear-gradient(35deg,transparent 65%,color-mix(in srgb,var(--team) 32%,transparent) 66%)}
.team-card[data-pattern="5"]:before{background:repeating-radial-gradient(circle at 15% 15%,transparent 0 24px,color-mix(in srgb,var(--team) 50%,transparent) 25px 28px)}
.team-card[data-pattern="6"]:before{background:conic-gradient(from 90deg,color-mix(in srgb,var(--team) 32%,transparent) 25%,transparent 0 50%,color-mix(in srgb,var(--team) 32%,transparent) 0 75%,transparent 0);background-size:34px 34px}
.team-card[data-pattern="7"]:before{background:repeating-linear-gradient(72deg,transparent 0 28px,color-mix(in srgb,var(--team) 55%,transparent) 29px 31px),radial-gradient(circle at 80% 18%,var(--team),transparent 24%)}

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

.team-card .team-number{
    position:absolute;
    top:17px;
    left:18px;
    font-size:9px;
    letter-spacing:1px;
    color:var(--muted)
}

.team-card .team-icon{
    font-family:"Archivo Black";
    font-size:68px;
    line-height:1;
    color:var(--team);
    opacity:.8
}

.team-card .team-icon img{
    display:block;
    width:92px;
    height:92px;
    object-fit:contain;
    object-position:center;
    image-rendering:pixelated
}

.team-card h3{
    font-family:"Archivo Black";
    font-size:19px;
    text-transform:uppercase;
    margin:14px 0 10px
}

.team-card p{
    font-size:11px;
    color:var(--muted);
    margin:0;
    letter-spacing:.4px
}

.games-list{
    border-top:1px solid var(--line)
}

.game-row{
    display:grid;
    grid-template-columns:70px 1fr 1fr 40px;
    gap:30px;
    align-items:center;
    padding:26px 5px;
    border-bottom:1px solid var(--line);
    transition:.2s
}

.game-row:hover{
    padding-left:16px;
    background:rgba(116,69,255,.08)
}

.game-row>span{
    font-size:10px;
    color:var(--violet)
}

.game-row h3{
    font-family:"Archivo Black";
    font-size:26px;
    text-transform:uppercase;
    margin:0
}

.game-row p{
    color:var(--muted);
    font-size:13px
}

.game-row b{
    color:var(--violet);
    font-size:22px
}

.schedule-section{
    padding-top:60px
}

.schedule-tabs{
    display:flex;
    border-bottom:1px solid var(--line)
}

.schedule-tabs button{
    background:none;
    border:0;
    border-bottom:3px solid transparent;
    color:var(--muted);
    padding:18px 34px;
    cursor:pointer;
    font:700 13px "DM Sans";
    text-transform:uppercase
}

.schedule-tabs button span{
    display:block;
    font-size:9px;
    margin-top:5px
}

.schedule-tabs button.active{
    color:#fff;
    border-color:var(--purple)
}

.schedule-item{
    display:grid;
    grid-template-columns:160px 1fr auto;
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:25px 10px
}

.schedule-item time{
    font-family:"Archivo Black";
    color:var(--violet);
    font-size:18px
}

.schedule-item h3{
    margin:0;
    text-transform:uppercase;
    font-size:17px
}

.schedule-item span{
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px
}

.schedule-note{
    color:var(--muted);
    font-size:11px;
    margin-top:18px
}

.standings-state{
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted)
}

.standings-state i{
    background:#f0a240;
    box-shadow:0 0 12px #f0a240
}

.standings-table{
    border-top:1px solid var(--line)
}

.table-head,.standing-row{
    display:grid;
    grid-template-columns:100px 1fr 120px 130px;
    align-items:center
}

.table-head{
    padding:15px 20px;
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--muted)
}

.standing-row{
    padding:17px 20px;
    border-top:1px solid rgba(255,255,255,.07);
    font-size:13px
}

.standing-row strong{
    display:flex;
    align-items:center;
    gap:13px;
    text-transform:uppercase
}

.standing-team-icon{
    width:34px;
    height:38px;
    object-fit:contain;
    image-rendering:pixelated
}

.team-dot{
    width:9px;
    height:9px;
    background:var(--team);
    border-radius:2px
}

.standing-row b{
    font-family:"Archivo Black";
    font-size:17px
}

.watch-section{
    min-height:600px;
    padding:max(80px,8vw) max(28px,calc((100vw - var(--max))/2));
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    background:linear-gradient(115deg,#6432e9,#9c4ff2);
    position:relative;
    overflow:hidden
}

.watch-section:after{
    content:"COMPLEX";
    position:absolute;
    font-family:"Archivo Black";
    font-size:18vw;
    color:rgba(255,255,255,.045);
    bottom:-5vw;
    left:-2vw
}

.watch-content{
    z-index:2
}

.watch-content h2{
    font-size:clamp(60px,7vw,105px)
}

.watch-content>p:not(.eyebrow){
    max-width:480px;
    line-height:1.7;
    color:#e5dafa;
    margin:25px 0
}

.button.light{
    background:#fff;
    color:#21122c
}

.watch-art{
    display:grid;
    place-items:center;
    z-index:2
}

.play-ring{
    width:300px;
    height:300px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 0 0 65px rgba(255,255,255,.05),0 0 0 130px rgba(255,255,255,.035)
}

.play-ring span{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#fff;
    color:var(--purple);
    display:grid;
    place-items:center;
    padding-left:5px
}

footer{
    max-width:var(--max);
    margin:auto;
    padding:55px 28px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    color:var(--muted);
    font-size:12px
}

footer p{
    text-align:center
}

footer>div{
    text-align:right
}

footer>div a{
    color:#ddd5ec;
    text-decoration:none;
    margin-left:20px
}

footer>small{
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:25px;
    margin-top:35px;
    text-align:center
}

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s,transform .7s
}

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

@media(max-width:950px){
    .site-header nav{
        display:none;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:#0c0918;
        padding:25px;
        flex-direction:column
    }

    .site-header nav.open{
        display:flex
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
        background:none;
        border:1px solid var(--line);
        color:#fff;
        padding:9px
    }

    .live-button{
        display:none
    }

    .hero{
        grid-template-columns:1fr;
        padding-top:130px;
        height:auto;
        min-height:100vh;
        gap:50px
    }

    .event-card{
        max-width:520px
    }

    .intro-grid{
        grid-template-columns:1fr;
        gap:40px
    }

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

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

    .format-card{
        border-bottom:1px solid var(--line)
    }

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

    .watch-section{
        grid-template-columns:1fr
    }

    .watch-art{
        display:none
    }

}

@media(max-width:600px){
    .site-header{
        padding:0 18px
    }

    .hero{
        padding-left:20px;
        padding-right:20px
    }

    h1{
        font-size:59px;
        letter-spacing:-3px
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch
    }

    .event-card{
        padding:20px
    }

    .date-lockup b{
        font-size:40px
    }

    .section{
        padding:90px 20px
    }

    .section h2{
        letter-spacing:-3px
    }

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

    .format-card{
        border-right:0;
        min-height:220px
    }

    .format-card h3{
        margin-top:60px
    }

    .section-heading{
        display:block
    }

    .team-grid{
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .team-card{
        height:245px;
        padding:14px
    }

    .team-card .team-icon{
        font-size:48px
    }

    .game-row{
        grid-template-columns:40px 1fr 25px;
        gap:10px
    }

    .game-row p{
        display:none
    }

    .schedule-item{
        grid-template-columns:100px 1fr
    }

    .schedule-item>span{
        display:none
    }

    .table-head,.standing-row{
        grid-template-columns:55px 1fr 70px
    }

    .table-head span:nth-child(3),.standing-row>span:nth-child(3){
        display:none
    }

    .play-ring{
        width:200px;
        height:200px
    }

    footer{
        grid-template-columns:1fr;
        gap:20px;
        text-align:center
    }

    footer p,footer>div{
        text-align:center
    }

    footer>div a{
        margin:0 10px
    }

}