/* Homepage look: cinematic hero, alternating dark / light bands, big art panels */
:root{--paper:#F2F0E8;--ink:#14111c}
.home .nav{background:linear-gradient(rgba(13,11,20,.85),transparent);padding:12px 4vw}
.home .nav.solid{background:#0b0912}
.brand img{height:30px}

.hero.center{justify-content:center;text-align:center}
.hero.center::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(13,11,20,.85) 100%);z-index:1}
.hero.center .hero-inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.hero-logo{width:min(760px,86vw);filter:drop-shadow(0 0 40px rgba(228,255,58,.35))}
.hero-line{font-family:var(--body);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.85rem,1.5vw,1.1rem);color:var(--text)}
.hero.center .btn{font-size:1.2rem;padding:16px 44px}

/* bands */
.band{padding:90px 0}
.band.dark{background:var(--void)}
.band.light{background:var(--paper);color:var(--ink)}
.wrap{max-width:1300px;margin:0 auto;padding:0 5vw}
.wrap.narrow{max-width:820px;text-align:center}
.band-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.band-head h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.aura{font-family:var(--display);color:var(--ink);letter-spacing:.08em}
.kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);font-weight:700;text-align:center}
.kicker.dark-k{color:#c4136b}
.serif-title{font-family:var(--body);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,6vw,4.6rem);text-align:center;margin:10px 0 14px;letter-spacing:-.01em}
.serif-title.ink{color:var(--ink)}
.ink-em{color:#c4136b}
.band-sub{text-align:center;color:var(--muted);margin-bottom:46px}
.wrap.narrow .serif-title{margin-bottom:24px}
.wrap.narrow .about-text{margin:0 auto}
.wrap.narrow .socials{justify-content:center}

/* news rail (scroll sideways) */
.rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px}
.news{flex:0 0 min(380px,82vw);scroll-snap-align:start}
.news .thumb{aspect-ratio:16/9;border-radius:4px;margin-bottom:14px;display:flex;align-items:flex-start;padding:12px;transition:.3s}
.news:hover .thumb{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.t1{background:linear-gradient(135deg,#ff2e88,#6a1bff)}
.t2{background:linear-gradient(135deg,#ff8a00,#ff2e88)}
.t3{background:linear-gradient(135deg,#6a1bff,#00a2ff)}
.t4{background:linear-gradient(135deg,#0D0B14,#2a3a00)}
.news small{font-family:var(--mono);font-size:.7rem;font-weight:700;color:#c4136b;letter-spacing:.1em}
.news h3{font-family:var(--body);text-transform:none;font-weight:700;font-size:1.15rem;line-height:1.25;margin:6px 0}
.news p{font-size:.9rem;opacity:.75}

/* champion-select style picks */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pick{position:relative;aspect-ratio:3/4.4;overflow:hidden;border:1px solid var(--line);border-radius:4px;display:flex;align-items:flex-end;transition:.4s}
.pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s}
.pick::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(13,11,20,.92))}
.pick:hover{border-color:var(--lime);transform:translateY(-8px);box-shadow:0 20px 50px rgba(228,255,58,.15)}
.pick:hover img{transform:scale(1.08)}
.pick-info{position:relative;z-index:2;padding:22px}
.pick-info h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:12px 0 8px;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.pick-info small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--lime)}
.pick.p1{background:linear-gradient(160deg,#ff2e88,#6a1bff)}
.pick.p2{background:linear-gradient(160deg,#ff8a00,#ff2e88)}
.pick.p3{background:linear-gradient(160deg,#00d4ff,#6a1bff)}
.pick.p4{background:linear-gradient(160deg,#2a2640,#16131f)}
.pick.off{opacity:.7}
.pick.off:hover{transform:none;border-color:var(--line);box-shadow:none}

/* platforms full-width */
.split-full{display:grid;grid-template-columns:1fr 1fr}
.split-full .half{padding:90px 6vw;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.split-full small{font-family:var(--mono);letter-spacing:.2em;opacity:.7}
.split-full .half h3{margin-top:8px}

.band.light .vid{background:#fff;border-color:rgba(0,0,0,.1);color:var(--ink)}
.band.light .videos{margin-top:40px}
.band.light .hint{color:#555}
.band.light .hint code{color:#c4136b}

.code-band{background:var(--lime);color:var(--void);text-align:center;padding:80px 5vw}
.code-band h2{font-size:clamp(2.2rem,6vw,4.4rem);margin:10px 0 16px}
.code-band p:last-child{max-width:560px;margin:0 auto;font-weight:500}
.code-band .code.big{background:var(--void);color:var(--lime);border:0;transform:skewX(-8deg)}

@media(max-width:1000px){.picks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.split-full{grid-template-columns:1fr}.picks{gap:10px}.band{padding:60px 0}}