/* ============================================================
   1. DESIGN TOKENS  (change brand values in one place)
   ============================================================ */
:root{
  /* Brand */
  --gold:        #FFCB05;
  --gold-deep:   #F5B800;
  --ink:         #0B0B0B;   /* header / footer / logo "we" */
  --ink-soft:    #1A1A1A;   /* card titles */
  --canvas:      #EFEFF1;   /* page background */
  --card:        #FFFFFF;
  --line:        #E2E2E5;
  --muted:       #8A8A90;   /* years / captions */
  --muted-2:     #B9B9BF;

  /* Drawer glass — raise the alpha values to make the menu more solid,
     lower them to let more of the page show through. --drawer-blur controls
     the frost strength. */
  --drawer-bg:   rgba(18,18,20,.72);
  --drawer-head: rgba(10,10,10,.68);
  --tile-bg:     rgba(255,255,255,.07);
  --tile-bg-h:   rgba(255,255,255,.14);
  --drawer-blur: 18px;

  /* Type — system stack = instant render, no download */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";

  /* Rhythm */
  --shell:  1180px;   /* max content width */
  --radius: 8px;
  --gap:    18px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink-soft);
  background:var(--canvas);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}

/* Accessibility: visible focus + reduced motion */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
html{scroll-behavior:smooth;}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:16px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ============================================================
   3. TOP NAV (black bar)
   ============================================================ */
.topbar{
  background:var(--ink);
  color:#fff;
  position:sticky;top:0;z-index:50;
}
.topbar__inner{
  display:flex;align-items:center;gap:14px;
  height:80px;
}
.burger{
  background:none;border:0;color:var(--gold);
  font-size:22px;line-height:1;padding:6px;
}
.logo{display:flex;flex-direction:column;line-height:1;}
.logo b{font-size:22px;font-weight:800;letter-spacing:.5px;}
.logo b span{color:var(--gold);}
.logo small{font-size:8px;letter-spacing:1.5px;color:var(--muted-2);text-transform:uppercase;margin-top:2px;}

.mainnav{display:none;}                 /* hidden on mobile, lives in burger */
.mainnav ul{display:flex;gap:22px;}
.mainnav a{font-size:14px;font-weight:600;color:#EDEDED;padding:6px 0;white-space:nowrap;}
.mainnav a:hover{color:var(--gold);}

.lang{margin-left:auto;position:relative;}
.lang__btn{
  display:flex;align-items:center;gap:6px;
  background:#fff;color:var(--ink);border:0;
  border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600;
}
.lang .dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(#d33,#fff,#d33);}
.lang__menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:150px;
  background:#fff;color:var(--ink);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);padding:6px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:70;
}
.lang__menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.lang__menu button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;padding:9px 10px;border-radius:6px;
  font-size:13px;font-weight:600;color:var(--ink);
}
.lang__menu button:hover{background:#F2F2F4;}
.lang__menu button[aria-current="true"]{color:#A87E00;background:#FFF7D6;}

/* ============================================================
   4. FLOATING SOCIAL RAIL (desktop only)
   ============================================================ */
.rail{display:none;}
@media(min-width:1280px){
  .rail{
    display:flex;flex-direction:column;gap:12px;align-items:center;
    position:fixed;left:14px;top:120px;z-index:40;
  }
  .rail a{
    width:60px;height:60px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--canvas);color:var(--gold);
    font-size:13px;font-weight:700;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:transform .15s ease;
  }
  .rail a:hover{transform:scale(1.12);}
  .rail a.yt{background:#FF0000;color:#fff;}
  .rail a img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
}

/* ============================================================
   5. TAB BAR (scroll-spy)
   ============================================================ */
.tabs{
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky;top:56px;z-index:30;
}
.tabs__inner{display:flex;gap:26px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
.tabs__inner::-webkit-scrollbar{display:none;}
.tab{
  background:none;border:0;
  padding:16px 2px;font-size:15px;font-weight:600;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tab[aria-current="true"]{color:var(--ink);border-bottom-color:var(--gold);}

/* ============================================================
   6. SECTIONS + HEADINGS
   ============================================================ */
main{padding-block:34px 20px;}
.section{content-visibility:auto;contain-intrinsic-size:1px 900px;margin-bottom:44px;}
.section__head{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:18px;}
.section__head--split{display:flex;align-items:center;gap:12px;font-weight:800;}
.section__head--split span{position:relative;padding-right:12px;}
.section__head--split span:not(:last-child)::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:18px;background:var(--muted-2);
}

/* ============================================================
   7. CARDS
   ============================================================ */
.grid{display:grid;gap:var(--gap);}
.grid--feature{grid-template-columns:1fr;}       /* sponsorships */
.grid--tri{grid-template-columns:1fr;}           /* collaboration */

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-3px);}

/* Media placeholder — reserves space, no layout shift.
   ---- PRODUCTION SWAP -------------------------------------------------
   Replace the <div class="media …"> with:
     <img class="media" src="card.webp" alt="…"
          width="640" height="360" loading="lazy" decoding="async"
          srcset="card-480.webp 480w, card-640.webp 640w, card-960.webp 960w"
          sizes="(min-width:1100px) 360px, (min-width:640px) 50vw, 100vw">
   --------------------------------------------------------------------- */
.media{
  aspect-ratio:16/9;
  display:grid;place-items:center;
  color:rgba(0,0,0,.35);font-weight:800;font-size:13px;letter-spacing:1px;
  position:relative;overflow:hidden;
}
.media::before{                       /* faint "W" brand motif */
  content:"W";
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:120px;font-weight:900;color:rgba(255,255,255,.18);
  transform:skewX(-8deg);
}
.media span{position:relative;z-index:2;background:rgba(0,0,0,.28);color:#fff;
  padding:4px 10px;border-radius:20px;font-size:11px;}
.media--gold {background:linear-gradient(135deg,#FFD84D,#F5B800 60%,#E09E00);}
.media--sport{background:linear-gradient(135deg,#1e2a5e,#3a4d9e);}
.media--dark {background:linear-gradient(135deg,#1a1a1a,#3a3a3a);}
.media--pink {background:linear-gradient(135deg,#e56aa0,#7b2d5e);}
.media--green{background:linear-gradient(135deg,#38c172,#0e7a4a);}
.media--blue {background:linear-gradient(135deg,#2b6cb0,#153e73);}

.media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0;display:block;}
.card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card__year{font-size:12px;color:var(--muted);font-weight:600;}
.card__title{font-size:15px;font-weight:700;color:var(--ink-soft);line-height:1.35;}
.card__foot{margin-top:auto;padding-top:12px;}

.btn-read{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-size:13px;font-weight:700;
  padding:9px 20px;border-radius:22px;border:0;
  transition:background .15s ease;
}
.btn-read:hover{background:var(--gold-deep);}

/* Feature cards (sponsorships) put title + button on a row under the image */
.grid--feature .card__body{gap:4px;}
.grid--feature .card__foot{display:flex;justify-content:flex-end;}

/* ============================================================
   8. RESPONSIVE GRID BREAKPOINTS  (mobile-first)
   ============================================================ */
@media(min-width:640px){
  .grid--feature{grid-template-columns:1fr 1fr;}
  .grid--tri{grid-template-columns:1fr 1fr;}
}
@media(min-width:960px){
  .grid--tri{grid-template-columns:1fr 1fr 1fr;}
  .mainnav{display:block;}
  /* burger stays visible — it opens the full menu drawer, which holds the
     welcome promo, game tiles and secondary links the top nav doesn't show */
}
@media(min-width:1280px){
  .shell{padding-inline:16px;}
  main .shell{padding-left:64px;}   /* clear the floating rail */
}

/* ============================================================
   9. FOOTER
   ============================================================ */
.footer{background:var(--ink);color:#C9C9CF;padding-block:36px 24px;font-size:13px;}
.footer a:hover{color:var(--gold);}

.footer__top{display:grid;gap:26px;grid-template-columns:1fr;}
.license__badge{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;margin-bottom:12px;}
.license__badge .chk{width:16px;height:16px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;font-size:10px;font-weight:900;}
.license__mark{width:100px;height:auto;display:block;object-fit:contain;margin-bottom:12px;}
  display:grid;place-items:center;color:var(--gold);font-weight:900;margin-bottom:12px;}
.license p{color:var(--muted-2);line-height:1.6;max-width:34ch;}
.license strong{color:#E4E4E8;}

/* link columns — native <details> = mobile accordion, no JS */
.fcol{border-top:1px solid #222;}
.fcol summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;color:#fff;font-weight:700;font-size:14px;
}
.fcol summary::-webkit-details-marker{display:none;}
.fcol summary::after{content:"+";color:var(--gold);font-size:18px;}
.fcol[open] summary::after{content:"–";}
.fcol ul{padding:0 0 14px;display:grid;gap:10px;}
.fcol li{color:#B9B9BF;}

.footer__mid{
  border-top:1px solid #222;margin-top:26px;padding-top:22px;
  display:grid;gap:22px;grid-template-columns:1fr;
}
.chipset h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.chip{
  height:26px;min-width:26px;padding:0 8px;border-radius:6px;
  background:#F4F4F6;color:#111;font-size:10px;font-weight:800;
  display:grid;place-items:center;
}
.chip--round{border-radius:50%;width:30px;height:30px;padding:0;}
.chip--social{background:#222;color:#fff;}
.chip--yt{background:#FF0000;color:#fff;}
.chip--fb{background:#1877F2;color:#fff;}

.copyright{border-top:1px solid #222;margin-top:26px;padding-top:18px;color:var(--muted);font-size:12px;}

/* ============================================================
   10. OFF-CANVAS DRAWER  (the burger menu)
   ============================================================ */
/* One shared icon style — all menu icons are stroke-based line icons
   drawn from the <symbol> sprite at the top of <body> (defined once). */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;
     stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.scrim{
  position:fixed;inset:0;z-index:55;
  background:rgba(0,0,0,.42);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.scrim.open{opacity:1;visibility:visible;}

.drawer{
  position:fixed;top:0;left:0;z-index:60;
  width:min(92vw,340px);
  height:100vh;height:100dvh;
  background:var(--drawer-bg);color:#fff;
  -webkit-backdrop-filter:blur(var(--drawer-blur)) saturate(130%);
  backdrop-filter:blur(var(--drawer-blur)) saturate(130%);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;                               /* Firefox: slim bar   */
  scrollbar-color:rgba(255,255,255,.22) transparent;  /* Firefox: thumb/track */
  box-shadow:2px 0 26px rgba(0,0,0,.45);
}
.drawer.open{transform:translateX(0);}

/* WebKit / Chromium: slim translucent thumb, invisible track */
.drawer::-webkit-scrollbar{width:5px;}
.drawer::-webkit-scrollbar-track{background:transparent;}
.drawer::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.20);border-radius:5px;
}
.drawer::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32);}
body.no-scroll{overflow:hidden;}

/* Fallback for browsers without backdrop-filter → keep it readable, solid-ish */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{--drawer-bg:rgba(24,24,26,.97);--drawer-head:rgba(12,12,12,.98);}
}

.drawer__head{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--drawer-head);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer__head .logo b{font-size:20px;}
.iconbtn{
  width:34px;height:34px;border-radius:50%;border:0;
  display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;
}
.iconbtn .ico{width:18px;height:18px;}
.iconbtn.spacer{margin-left:auto;}

.drawer__promo{padding:18px 16px 8px;text-align:center;}
.drawer__promo h3{color:var(--gold);font-size:18px;font-weight:800;letter-spacing:.3px;}
.drawer__promo p{color:#cfcfd4;font-size:12px;margin-top:2px;}
.btn-join{
  display:block;width:100%;margin:14px 0 10px;border:0;
  background:var(--gold);color:var(--ink);
  font-size:16px;font-weight:800;padding:12px;border-radius:6px;
}
.btn-join:hover{background:var(--gold-deep);}
.login-line{font-size:12px;color:#cfcfd4;}
.login-line a{color:#fff;font-weight:700;text-decoration:underline;}

.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px;}
.tile{
  position:relative;background:var(--tile-bg);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:15px 6px;color:#e6e6e9;font-size:11px;font-weight:600;text-align:center;
  transition:background .15s ease;
}
.tile:hover{background:var(--tile-bg-h);}
.tile .ico{width:22px;height:22px;color:#cfcfd4;}
.tile .we{color:var(--gold);}
.tile__new{
  position:absolute;top:0;right:0;
  background:#e11d2a;color:#fff;font-size:8px;font-weight:800;letter-spacing:.5px;
  padding:2px 6px;border-radius:0 8px 0 8px;
}

.drawer__list{padding:4px 0 26px;}
.drawer__list a{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;color:#fff;font-size:15px;font-weight:600;
  border-top:1px solid rgba(255,255,255,.08);transition:background .15s ease;
}
.drawer__list a:hover{background:rgba(255,255,255,.06);}
.drawer__list .ico{width:20px;height:20px;color:var(--gold);}
.drawer__list .we{color:var(--gold);}

/* footer becomes flat multi-column on wider screens */
@media(min-width:768px){
  .footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
  .fcol{border-top:0;}
  .fcol summary{cursor:default;padding:0 0 12px;pointer-events:none;}
  .fcol summary::after{content:"";}
  .fcol[open]>ul,.fcol>ul{display:grid!important;}      /* always open on desktop */
  .footer__mid{grid-template-columns:repeat(4,1fr);align-items:start;}
}


/* ============================================================
   11. DETAIL PAGES (shared)
   ============================================================ */
.detail{padding-block:30px 12px;}
.page-title{font-size:clamp(22px,4vw,26px);font-weight:800;color:var(--ink);margin:0 0 18px;}
.ph{position:relative;display:grid;place-items:center;color:rgba(255,255,255,.9);
    font-weight:700;font-size:12px;letter-spacing:.5px;border-radius:12px;overflow:hidden;}
.ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;}
.ph>span{position:relative;z-index:1;background:rgba(0,0,0,.30);padding:4px 12px;border-radius:20px;}
.ph::before{content:"W";position:absolute;inset:0;display:grid;place-items:center;
  font-size:160px;font-weight:900;color:rgba(255,255,255,.12);transform:skewX(-8deg);}
.center{text-align:center;} .mt{margin-top:22px;}
.btn-cta{display:inline-block;background:var(--gold);color:var(--ink);font-weight:800;
  padding:13px 26px;border-radius:26px;border:0;font-size:14px;line-height:1.3;}
.btn-cta:hover{background:var(--gold-deep);}

/* ---- Collaboration detail ---- */
.subtabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:22px;scrollbar-width:none;}
.subtabs::-webkit-scrollbar{display:none;}
.subtab{flex:0 0 auto;background:#EAEAEC;color:#666;border:0;border-radius:22px;
  padding:9px 20px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;}
.subtab.active{background:var(--gold);color:var(--ink);}
.collab-hero{aspect-ratio:16/7;background:linear-gradient(120deg,#3a0d6e,#7d1fa0 45%,#e0245e);margin-bottom:26px;}
.partner-lockup{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0 24px;}
.partner-lockup .x{color:var(--muted-2);font-size:20px;}
.lockup-badge{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:.5px;}
.copy{max-width:70ch;margin:0 auto 15px;text-align:center;color:#444;line-height:1.7;font-size:15px;}
.dl-prompt{text-align:center;color:var(--muted);font-size:13px;margin:26px 0 12px;}
.dl-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.btn-store{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:26px;padding:12px 26px;font-size:14px;font-weight:600;color:#555;}
.features-wrap{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;margin-bottom:24px;}
.features{display:grid;gap:22px 26px;grid-template-columns:1fr;}
.feature{display:grid;grid-template-columns:24px 1fr;gap:12px;}
.feature__ico{width:22px;height:22px;color:#1e88e5;margin-top:2px;}
.feature h4{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 4px;}
.feature p{font-size:13px;color:#666;line-height:1.6;margin:0;}
.phone-shot{aspect-ratio:4/3;background:linear-gradient(135deg,#2f7bd6,#6aa8f0);}
@media(min-width:760px){
  .features-wrap{grid-template-columns:1.05fr .95fr;gap:44px;}
  .features{grid-template-columns:1fr 1fr;}
}

/* ---- Article (sponsorship) ---- */
.art-hero{background:#0b0b0b;color:#fff;text-align:center;padding:46px 16px 34px;}
.laliga-lockup{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;}
.laliga-lockup b{font-size:26px;font-weight:800;}
.laliga-lockup b span{color:var(--gold);}
.laliga-lockup .bar{width:1px;height:26px;background:#555;}
.laliga-lockup .ll{color:#e2483d;font-weight:800;font-size:22px;letter-spacing:1px;}
.art-hero h1{font-size:clamp(20px,4vw,30px);font-weight:800;max-width:24ch;margin:0 auto 20px;line-height:1.25;}
.scroll-dot{width:36px;height:36px;border-radius:50%;background:#1e88e5;color:#fff;display:grid;place-items:center;margin:0 auto;}
.promo-banner{max-width:760px;margin:26px auto;border-radius:14px;overflow:hidden;
  background:linear-gradient(100deg,#111 0 44%,#e63b30 44%);color:#fff;padding:26px 22px;text-align:center;}
.promo-banner .lock{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;font-weight:800;}
.promo-banner h3{font-size:19px;margin:6px 0;} .promo-banner h3 span{color:var(--gold);}
.promo-banner small{opacity:.85;display:block;margin-bottom:14px;}
.art-sec{padding:34px 16px;}
.art-sec h2{font-size:clamp(19px,3.4vw,26px);font-weight:800;text-align:center;margin:0 auto 16px;max-width:28ch;color:var(--ink);}
.split-red{background:#f4463b;color:#fff;}
.split-red .inner{max-width:var(--shell);margin:auto;display:grid;grid-template-columns:1fr;}
.split-red .pane-img{aspect-ratio:16/9;background:linear-gradient(135deg,#e8b400,#f5c518);border-radius:0;}
.split-red .pane-txt{padding:30px 22px;}
.split-red h2{color:#fff;text-align:left;margin:0 0 16px;max-width:none;}
.bullets{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.bullets li{font-size:14px;line-height:1.6;} .bullets b{display:block;}
.trust-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:26px;box-shadow:0 12px 30px rgba(0,0,0,.06);}
.trust-card h2{margin-top:0;}
.dots{display:flex;gap:8px;justify-content:center;margin-top:20px;}
.dot2{width:8px;height:8px;border-radius:50%;background:#c9c9cf;border:0;padding:0;cursor:pointer;}
.dot2.on{background:#555;}
.video-strip{background:#e63b30;color:#fff;padding:34px 16px;}
.video-strip h2{color:#fff;}
.video-thumb{max-width:680px;margin:16px auto;aspect-ratio:16/9;
  background:linear-gradient(135deg,#1f6e2e,#3fa34d);border-radius:10px;position:relative;}
.play{position:absolute;inset:0;margin:auto;z-index:2;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;}
.play .ico{width:26px;height:26px;}
.video-cap{font-size:12px;opacity:.85;max-width:680px;margin:0 auto;}
.advantages{background:#e63b30;color:#fff;padding:36px 16px;}
.advantages h2{color:#fff;}
.adv-top{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;margin-top:22px;}
.adv-grid{display:grid;gap:20px;grid-template-columns:1fr;}
.adv h4{font-size:15px;font-weight:800;margin:0 0 4px;}
.adv p{font-size:12px;opacity:.92;line-height:1.5;margin:0;}
.dl-app{display:flex;flex-direction:column;align-items:center;gap:12px;}
.qr{width:110px;height:110px;background:#fff;border-radius:10px;display:grid;place-items:center;color:#111;font-size:11px;font-weight:800;}
blockquote{margin:0;font-style:italic;}
@media(min-width:820px){
  .split-red .inner{grid-template-columns:1fr 1fr;align-items:center;}
  .adv-top{grid-template-columns:0.8fr 2fr;}
  .adv-grid{grid-template-columns:1fr 1fr 1fr;}
}


/* ============================================================
   12. ENH SPONSOR (Valencia/Gresini-style detail page)
   ============================================================ */
.ph--dark{background:linear-gradient(135deg,#1a1a1a,#3a3a3a);}
.ph--gold{background:linear-gradient(135deg,#FFD84D,#E09E00);}
.ph--red{background:linear-gradient(135deg,#c0202e,#7a1420);}
.ph--navy{background:linear-gradient(135deg,#182238,#2a3d66);}

/* hero — swap the second gradient for a real photo:
   background:linear-gradient(180deg,rgba(8,8,12,.72),rgba(8,8,12,.86)), url('hero.jpg') center/cover; */
.sp-hero{position:relative;overflow:hidden;min-height:52vh;display:grid;place-items:center;text-align:center;color:#fff;
  padding:70px 16px;background:linear-gradient(180deg,rgba(8,8,12,.72),rgba(8,8,12,.88)),linear-gradient(135deg,#161d33,#0b0b0b);}
.sp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,12,.55),rgba(8,8,12,.84));}
.sp-hero>div{position:relative;z-index:2;}
.sp-hero .lockup{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:18px;}
.sp-hero .lockup b{font-size:30px;font-weight:800;} .sp-hero .lockup b span{color:var(--gold);}
.sp-hero .lockup .bar{width:1px;height:30px;background:#666;}
.sp-hero .lockup .club{font-weight:800;font-size:18px;letter-spacing:1px;color:#eee;}
.sp-hero h1{font-size:clamp(17px,3.2vw,25px);font-weight:800;letter-spacing:.5px;max-width:26ch;margin:0 auto 22px;text-transform:uppercase;line-height:1.35;}
.sp-chev{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;margin:0 auto;}

.sp-intro{padding:44px 16px;background:#fff;}
.sp-card{max-width:560px;margin:0 auto 26px;aspect-ratio:16/8;border-radius:14px;overflow:hidden;
  background:linear-gradient(100deg,#111 0 45%,#e63b30 45%);color:#fff;display:grid;place-items:center;text-align:center;padding:20px;}
.sp-card b{font-size:26px;font-weight:800;} .sp-card b span{color:var(--gold);}
.sp-intro h2{text-align:center;font-size:24px;font-weight:800;color:var(--ink);margin:0 0 14px;}

.sp-dark{background:#0b0b0b;color:#d7d7db;padding:42px 16px;}
.sp-dark .inner{max-width:var(--shell);margin:auto;display:grid;gap:26px;grid-template-columns:1fr;align-items:center;}
.sp-dark .ph{aspect-ratio:4/3;}
.sp-dark p{font-size:14px;line-height:1.7;margin:0 0 12px;}
.sp-dark .quote{border-left:3px solid var(--gold);padding-left:14px;color:#efefef;font-style:italic;}

.sp-moment{padding:44px 16px;background:var(--canvas);}
.sp-moment .inner{max-width:var(--shell);margin:auto;display:grid;gap:26px;grid-template-columns:1fr;align-items:center;}
.sp-moment .ph{aspect-ratio:1/1;max-width:360px;margin:0 auto;}
.sp-moment h2{font-size:26px;font-weight:800;color:var(--ink);margin:0 0 12px;}
.sp-moment p{color:#555;line-height:1.7;font-size:14px;margin:0 0 16px;}

.sp-highlight{background:#101828;color:#fff;padding:42px 16px;}
.sp-highlight h2{text-align:center;font-size:24px;font-weight:800;margin:0 0 22px;}
.sp-feature-video{max-width:760px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;position:relative;}
.thumb-row{display:flex;gap:12px;overflow-x:auto;padding:16px 0 4px;max-width:760px;margin:0 auto;scrollbar-width:none;}
.thumb-row::-webkit-scrollbar{display:none;}
.thumb{flex:0 0 46%;max-width:200px;aspect-ratio:16/10;border-radius:8px;}

.sp-download{background:#0b0b0b;color:#cfcfd4;padding:42px 16px;}
.sp-download h2{text-align:center;font-size:20px;font-weight:800;color:#fff;margin:0 0 24px;}
.sp-dl-grid{display:grid;gap:24px;grid-template-columns:1fr;align-items:start;}
.sp-tiles{display:grid;gap:2px;grid-template-columns:1fr 1fr;background:#222;border-radius:10px;overflow:hidden;}
.sp-tile{background:#141414;padding:20px 14px;text-align:center;}
.sp-tile .ico{width:26px;height:26px;color:var(--gold);margin:0 auto 8px;}
.sp-tile h4{font-size:12px;font-weight:800;color:#fff;margin:0 0 4px;text-transform:uppercase;letter-spacing:.3px;}
.sp-tile p{font-size:11px;color:#9a9aa0;line-height:1.4;margin:0;}
.sp-phone{width:150px;aspect-ratio:9/16;margin:0 auto;}
@media(min-width:820px){
  .sp-dark .inner{grid-template-columns:1fr 1fr;}
  .sp-moment .inner{grid-template-columns:0.9fr 1.1fr;}
  .thumb{flex:0 0 auto;}
  .sp-dl-grid{grid-template-columns:0.7fr 2.3fr;}
  .sp-tiles{grid-template-columns:repeat(3,1fr);}
}


/* ============================================================
   13. PARTNER STRIP (mobile) + PARTNER DIRECTORY
   ============================================================ */
/* Mobile-only horizontal strip — replaces the desktop left rail below 1280px */
.partner-strip{display:flex;gap:10px;align-items:center;overflow-x:auto;
  padding:11px 16px;background:var(--card);border-bottom:1px solid var(--line);scrollbar-width:none;}
.partner-strip::-webkit-scrollbar{display:none;}
.pstrip-item{flex:0 0 auto;}
.pav{width:38px;height:38px;border-radius:50%;background:var(--canvas);color:var(--gold);
  display:grid;place-items:center;font-size:12px;font-weight:800;}
img.pav{ object-fit:cover; display:block; padding:0; }
.pstrip-more{flex:0 0 auto;margin-left:auto;position:sticky;right:0;
  width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;box-shadow:-14px 0 12px var(--card);}
.pstrip-more .ico{width:18px;height:18px;}
@media(min-width:1280px){.partner-strip{display:none;}}

/* Directory page (Sponsorships / Collaboration Partners) */
.back-cta{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;padding:6px 10px 6px 0;margin-bottom:8px;}
.back-cta .ico{width:18px;height:18px;}
.back-cta:hover{color:var(--gold-deep);}
.dir{padding:20px 16px 44px;}
.dir-tabs{display:flex;gap:10px;margin-bottom:20px;max-width:520px;}
.dir-tab{flex:1;background:#EAEAEC;color:#666;border:0;border-radius:22px;
  padding:11px 12px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;}
.dir-tab[aria-selected="true"]{background:var(--gold);color:var(--ink);}
.dir-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr;}
.pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 14px;display:flex;flex-direction:column;gap:12px;min-height:118px;
  transition:box-shadow .15s ease,transform .15s ease;}
.pcard:hover{box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-2px);}
.pcard .pav{width:40px;height:40px;}
.pcard h3{font-size:13px;font-weight:700;color:#3a3a3a;line-height:1.4;margin:0;}
.pcard .new{position:absolute;top:10px;right:10px;background:#e11d2a;color:#fff;
  font-size:9px;font-weight:800;padding:3px 8px;border-radius:12px;letter-spacing:.5px;}
.dir-hide{display:none;}
@media(min-width:720px){.dir{max-width:840px;margin-inline:auto;}.dir-grid{grid-template-columns:repeat(3,1fr);}}


/* ============================================================
   14. DESKTOP MEGA-MENU (top-nav provider dropdowns)
   ============================================================ */
.mainnav ul{align-items:center;gap:24px;}
.mainnav li{position:relative;display:flex;align-items:center;}
.mainnav a{display:inline-flex;align-items:center;gap:6px;padding:21px 0;line-height:1;}
.mainnav .has-menu>a::after{content:"";display:inline-block;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;opacity:.75;}
.megamenu{
  position:fixed;left:0;right:0;top:56px;z-index:60;
  display:grid;grid-template-columns:repeat(var(--mmc,3),116px);gap:20px 16px;
  justify-content:start;align-content:start;
  padding:26px 16px 28px max(16px, calc((100% - var(--shell)) / 2 + 16px));
  background:rgba(17,17,19,.98);border-top:1px solid #2a2a2c;
  box-shadow:0 20px 30px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.megamenu::before{content:"";position:fixed;left:0;right:0;top:56px;bottom:0;
  background:rgba(0,0,0,.42);z-index:-1;pointer-events:none;}
.has-menu:hover>.megamenu,.has-menu:focus-within>.megamenu{opacity:1;visibility:visible;transform:translateY(0);}
.mm-item{width:116px;text-decoration:none;position:relative;display:block;}
.mm-badge{width:116px;height:100px;display:grid;place-items:center;}
.mm-badge img{max-width:100%;max-height:100%;object-fit:contain;display:block;transition:transform .15s ease;}
.mm-item:hover img{transform:scale(1.06);}
.mm-item .new{position:absolute;top:2px;right:8px;background:#e11d2a;color:#fff;
  font-size:8px;font-weight:800;padding:2px 6px;border-radius:10px;letter-spacing:.5px;}
/* dropdowns are a desktop affordance; mobile uses the burger drawer */
@media(max-width:959px){.megamenu{display:none;} .mainnav li.has-menu>a::after{display:none;}}

/* ============================================================
   Desktop typography uplift — comfortable, standard sizing
   Applies only >=1024px, so mobile is untouched.
   ============================================================ */
@media (min-width: 1024px){
  :root{ --gap: 24px; }                 /* roomier card grids */

  /* section headings, tabs, page rhythm */
  main{ padding-block: 44px 26px; }
  .section{ margin-bottom: 54px; }
  .section__head{ font-size: 28px; margin-bottom: 22px; }
  .tab{ font-size: 16px; }

  /* home cards */
  .card__year{ font-size: 13px; }
  .card__title{ font-size: 17px; line-height: 1.4; }
  .card__body{ padding: 18px 20px 20px; }
  .btn-read{ font-size: 14px; padding: 11px 24px; }

  /* detail pages */
  .page-title{ font-size: 30px; }
  .copy{ font-size: 16px; line-height: 1.75; }
  .art-sec h2, .sp-intro h2, .sp-moment h2, .split-red h2,
  .video-strip h2, .advantages h2, .sp-highlight h2, .sp-download h2{ font-size: 28px; }
  .subtab{ font-size: 15px; padding: 11px 24px; }
  .btn-cta{ font-size: 15px; padding: 14px 30px; }
  .feature h4{ font-size: 17px; }
  .feature p{ font-size: 14px; }

  /* partner directory */
  .dir-tab{ font-size: 15px; }
  .pcard h3{ font-size: 14px; }
}