:root{
  --bg:#080B12; --panel:#0E1420; --muted:#98A2B3; --border:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.04); --glow:0 30px 120px rgba(96,165,250,.25);
  --kart:#A3E635; --auto:#60A5FA;
}
html,body{background:var(--bg);color:#E5E7EB}
.container{max-width:1200px}
.nav{backdrop-filter:saturate(140%) blur(12px);background:rgba(0,0,0,.35);border-bottom:1px solid var(--border)}
.logo{font-weight:900;color:#60A5FA}
.hero{min-height:70vh}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-img{width:110%;height:110%;object-fit:cover;filter:grayscale(.1) contrast(1.05) brightness(.8);transform:translateY(-5%) scale(1.05)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(40% 40% at 20% 0%, rgba(96,165,250,.30), transparent 60%), radial-gradient(40% 40% at 80% 0%, rgba(163,230,53,.25), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.5))}
.title{font-size:clamp(2.2rem,3.5vw,4.2rem);font-weight:900;line-height:1.05}
.subtitle{color:var(--muted);max-width:640px;margin-top:.5rem}
.actions{margin-top:1rem;display:flex;gap:.75rem}
.btn{border:1px solid var(--border);padding:.65rem 1rem;border-radius:14px}
.btn-primary{background:var(--auto);color:#0b0f17;font-weight:700}
.btn-outline{background:transparent}
.metrics{display:flex;gap:1.5rem;margin-top:1.5rem}
.metric{display:flex;flex-direction:column;align-items:flex-start}
.metric .num{font-size:2rem;font-weight:900}
.metric .lab{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
.section{padding:3.5rem 0}
.section.slim{padding:1.5rem 0}
.h2{font-size:1.8rem;font-weight:900}
.h3{font-size:1.25rem;font-weight:800}
.lead{color:#D1D5DB;margin-top:.25rem}
.prose p{color:#D1D5DB}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--glow)}
.bordered{border:1px solid var(--border)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.chip{border:1px solid var(--border);border-radius:999px;padding:.3rem .6rem;font-size:.8rem;color:#D1D5DB}
.badge{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--border)}
.badge.kart{background:color-mix(in srgb, var(--kart) 20%, transparent);color:var(--kart)}
.badge.auto{background:color-mix(in srgb, var(--auto) 20%, transparent);color:var(--auto)}
.kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#93C5FD}
.muted{color:var(--muted)}
.pill{border:1px solid var(--border);border-radius:999px;padding:.4rem .8rem}
.pill.active{outline:2px solid var(--auto);outline-offset:2px}
.timegrid{display:grid;gap:1rem}
.step{display:grid;grid-template-columns:1fr;gap:1rem}

.thumb{width:100%;height:10rem;object-fit:cover;border-radius:12px;border:1px solid var(--border);cursor:pointer;transition:transform .35s}
.thumb:hover{transform:scale(1.02)}
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.track{display:flex;gap:3rem;white-space:nowrap;animation:marq 18s linear infinite;color:#9CA3AF;padding:.6rem 0}
@keyframes marq{to{transform:translateX(-50%)}}
.search{background:transparent;border:1px solid var(--border);border-radius:12px;padding:.5rem .75rem;color:#E5E7EB;min-width:260px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.grid img{border-radius:10px;border:1px solid var(--border);height:9rem;object-fit:cover}
.lightbox .scrim{position:fixed;inset:0;background:rgba(0,0,0,.82)}
.lightbox .frame{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}
.lightbox img{max-height:78vh;border-radius:12px;border:1px solid var(--border)}
.lightbox .controls{margin-top:1rem;display:flex;gap:.5rem}
.shadow-glow{box-shadow:var(--glow)}

:root{
  --bg:#080B12; --panel:#0E1420; --muted:#98A2B3; --border:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.04); --auto:#60A5FA; --kart:#A3E635;
}
.nav.shadow{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.reveal{opacity:0; transform: translateY(16px); transition: all .6s cubic-bezier(.2,.65,.3,1)}
.reveal.in{opacity:1; transform: translateY(0)}

.seasons{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}
.season-pill{border:1px solid var(--border);border-radius:999px;padding:.35rem .75rem;font-size:.85rem;color:#D1D5DB}
.season-anchor{height:1px}

/* --- Polishing pass --- */
.title{letter-spacing:-.01em}
.btn{transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(96,165,250,.25)}
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 50px rgba(0,0,0,.35)}
.badge{backdrop-filter:saturate(130%) blur(6px)}
.hero-overlay{background:
  radial-gradient(50% 40% at 20% 0%, rgba(96,165,250,.35), transparent 60%),
  radial-gradient(40% 40% at 85% 0%, rgba(163,230,53,.28), transparent 60%),
  linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.58)) !important;
}
.season-pill:hover{background:rgba(255,255,255,.06)}
.nav a:hover{opacity:.95}
.footer-note{color:var(--muted); font-size:.85rem; text-align:center; padding:1rem 0}

/* Scroll progress */
#scroll-progress{position:sticky;top:0;z-index:60;height:3px;background:transparent}
#scroll-progress .bar{height:100%;width:0;background:linear-gradient(90deg, var(--auto), var(--kart));}

/* Timeline spine */
.timegrid.with-spine{position:relative}
.timegrid.with-spine:before{content:"";position:absolute;left:calc(50% - .5px);top:0;bottom:0;width:1px;background:linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,.1))}
.step{position:relative}
.step .marker{position:absolute;left:calc(50% - 7px);top: 12px;width:14px;height:14px;border-radius:999px;background:var(--auto);box-shadow:0 0 0 4px rgba(96,165,250,.2)}
.step .content{position:relative}

/* Read-more */
.readmore{margin-top:.4rem}
.readmore .rm-toggle{margin-top:.35rem;border:1px solid var(--border);border-radius:10px;padding:.35rem .6rem;font-size:.85rem;color:#D1D5DB}
.readmore .rm-toggle:hover{background:rgba(255,255,255,.06)}

/* Sponsors */
.grid-sponsors{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.grid-sponsors{grid-template-columns:repeat(3,1fr)}}
.s-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;transition:transform .2s ease, box-shadow .2s ease}
.s-card:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(0,0,0,.35)}
.s-card.featured{outline:2px solid var(--auto)}
.s-tier{font-weight:800;margin-bottom:.5rem;color:#60A5FA}
.s-card ul{color:#D1D5DB;list-style:disc;margin-left:1.2rem}
.stats-strip{display:flex;gap:1.5rem;flex-wrap:wrap}
.stats-strip .stat{display:flex;flex-direction:column}
.stats-strip .num{font-size:2rem;font-weight:900}
.stats-strip .lab{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}

/* Navbar shrink */
#nav{transition:all .25s ease}
#nav.shrink{backdrop-filter:saturate(160%) blur(14px); padding-top:.15rem; padding-bottom:.15rem}
#nav.shrink .logo{transform:scale(.94)}

/* Hero blur-in */
.title{filter:blur(6px); opacity:.0; transform:translateY(8px); animation:heroIn .9s cubic-bezier(.2,.65,.3,1) .15s forwards}
@keyframes heroIn{to{filter:blur(0); opacity:1; transform:none}}

/* Video embed */
.video-wrap{border:1px solid var(--border); border-radius:16px; background:var(--card); padding:.75rem; box-shadow:var(--glow)}
.video-embed{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px}
.video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}



/* --- Timeline: robust alternating layout with spine clearance --- */
.timegrid.with-spine{position:relative; --spine-gap:28px; --col-gap:24px}
.timegrid.with-spine:before{content:""; position:absolute; left:50%; transform:translateX(-.5px); top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,.1));}

.step{position:relative; margin-bottom:1rem}
.step .marker{position:absolute; left:50%; top:14px; transform:translateX(-50%); width:14px; height:14px; border-radius:999px;
  background:var(--auto); box-shadow:0 0 0 4px rgba(96,165,250,.2);}
.step .content{position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--col-gap)}

@media(min-width:1024px){
  .step .content{flex-direction:row; justify-content:space-between; align-items:flex-start}
  .step:not(.right) .content{padding-right:calc(var(--spine-gap) + 8px)}
  .step.right .content{padding-left:calc(var(--spine-gap) + 8px)}
  .step .content > .media,
  .step .content > .meta{width:calc(50% - var(--col-gap)/2)}
  .step.right .content{flex-direction:row-reverse}
}

.media{min-width:0}
.meta{min-width:0}
.meta .h3{margin:0}
.meta .muted{word-wrap:break-word; overflow-wrap:anywhere}

.media img{display:block; width:100%; height:10rem; object-fit:cover; border-radius:12px; border:1px solid var(--border)}

/* About full-bleed layout */
.about-bleed .container{max-width:none; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right));}
.about-bleed .h2{margin-bottom:.5rem}
.about-bleed .lead{max-width:1200px}
.about-bleed .prose{max-width:none; font-size:1.05rem; line-height:1.8}
@media(min-width:1024px){ .about-bleed .prose{column-count:2; column-gap:2.25rem} }

/* --- ABOUT: enhanced UI --- */
.about-fx{position:relative; overflow:hidden}
.about-fx::before,
.about-fx::after{
  content:""; position:absolute; width:40vw; height:40vw; border-radius:999px; filter:blur(60px);
  opacity:.18; pointer-events:none;
}
.about-fx::before{background:radial-gradient(closest-side, var(--auto), transparent); top:-10vw; left:-8vw}
.about-fx::after{background:radial-gradient(closest-side, var(--kart), transparent); bottom:-12vw; right:-10vw}

.about-wrap{position:relative; z-index:1; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:18px; padding:1.25rem; box-shadow:var(--glow)}
@media(min-width:1024px){ .about-wrap{padding:1.75rem} }

.about-title span{background:linear-gradient(90deg, #93C5FD, #A3E635); -webkit-background-clip:text; background-clip:text; color:transparent}
.about-stats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem; margin:1rem 0 1.25rem}
@media(min-width:768px){ .about-stats{grid-template-columns:repeat(4, minmax(0,1fr))} }
.astat{display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; border:1px solid var(--border); border-radius:14px; padding:.6rem .75rem; background:rgba(255,255,255,.03)}
.anum{font-weight:900; font-size:1.25rem}
.alab{font-size:.8rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

.about-grid{display:grid; grid-template-columns:1fr; gap:1rem}
@media(min-width:1024px){ .about-grid{grid-template-columns: 2fr 1fr} }
.about-prose{font-size:1.05rem; line-height:1.85}
@media(min-width:1024px){ .about-prose{column-count:2; column-gap:2rem} }
.about-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; display:flex; flex-direction:column; gap:.75rem; align-self:start}
.about-quote{border-left:3px solid var(--auto); padding-left:.75rem; color:#E5E7EB; font-weight:600}
.about-list{display:flex; flex-direction:column; gap:.4rem; color:#D1D5DB}
.about-list li{display:flex; align-items:flex-start; gap:.45rem}
.about-list svg{width:18px; height:18px; fill:var(--auto); flex:0 0 18px; margin-top:.2rem}
.about-cta{align-self:flex-start; margin-top:.35rem}

/* === Timeline mobile layout improvements === */
@media (max-width: 640px){
  #timeline .flex.items-center.justify-between{flex-direction:column; align-items:stretch; gap:.6rem}
  #timeline .filter, #timeline .seasons{display:flex; gap:.5rem; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; margin:0 -1rem; padding-left:1rem; padding-right:1rem}
  #timeline .filter::-webkit-scrollbar, #timeline .seasons::-webkit-scrollbar{display:none}
  #timeline .pill, #timeline .season-pill{flex:0 0 auto; border:1px solid var(--border); background:rgba(255,255,255,.04); padding:.5rem .75rem; border-radius:9999px; font-size:.9rem}
  #timeline .pill.active{background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.5)}
  #timeline .h2{align-self:flex-start; margin-bottom:.25rem}
  #timeline .timegrid.with-spine:before{left:10px}
  #timeline .step .marker{left:3px}
  #timeline .step{grid-template-columns:1fr}
  #timeline .step .content{margin-left:1.5rem}
  #timeline .media.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Contact social buttons */
.socials{display:flex;justify-content:center;gap:1rem;margin-top:.75rem}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);color:#E5E7EB;background:rgba(255,255,255,.04);transition:all .2s ease}
.social-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.social-btn svg{width:22px;height:22px}