/* ==========================================================================
   INFORMACALCIO.IT — Design System 2026
   "Anni 2000 nel 2026" — Heritage Reborn
   Stack: Vanilla CSS Custom Properties, Mobile-First, Zero Dependencies
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* — Dark palette (default) — */
  --bg:          #0b1a12;
  --bg2:         #0f221a;
  --surface:     #132018;
  --surface2:    #1b2e22;
  --border:      rgba(34,197,94,.13);
  --border-h:    rgba(34,197,94,.35);

  --primary:     #22c55e;
  --primary-d:   #16a34a;
  --primary-xd:  #14532d;
  --gold:        #f59e0b;
  --gold-d:      #d97706;
  --danger:      #ef4444;
  --blue:        #3b82f6;
  --purple:      #a855f7;
  --cyan:        #06b6d4;

  --text:        #e2f5ea;
  --text2:       #a3c9b0;
  --muted:       #5c7a68;
  --white:       #f0fdf4;

  /* — Gradients — */
  --g-hero:   linear-gradient(160deg, #071510 0%, #0f2d1a 55%, #071510 100%);
  --g-card:   linear-gradient(145deg, rgba(27,46,34,.95), rgba(19,32,24,.98));
  --g-green:  linear-gradient(135deg, #22c55e, #16a34a);
  --g-gold:   linear-gradient(135deg, #f59e0b, #fbbf24);
  --g-header: rgba(11,26,18,.88);

  /* — Shadows — */
  --sh-card:  0 4px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(34,197,94,.07);
  --sh-glow:  0 0 50px rgba(34,197,94,.18);
  --sh-btn:   0 4px 18px rgba(34,197,94,.35);
  --sh-gold:  0 4px 18px rgba(245,158,11,.32);

  /* — Typography — */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* — Spacing scale — */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
  --s4: 1rem;    --s5: 1.25rem; --s6: 1.5rem;
  --s8: 2rem;    --s10: 2.5rem; --s12: 3rem;
  --s16: 4rem;   --s20: 5rem;

  /* — Radius — */
  --r-sm: .375rem; --r-md: .75rem;
  --r-lg: 1.25rem; --r-xl: 2rem;
  --r-full: 9999px;

  /* — Layout — */
  --max-w: 1240px;
  --header-h: 68px;

  /* — Transitions — */
  --t-fast: 140ms ease;
  --t-base: 240ms ease;
  --t-slow: 420ms ease;
}

/* Light Theme Override */
[data-theme="light"] {
  --bg:        #f3f8f5;
  --bg2:       #e8f3ec;
  --surface:   #ffffff;
  --surface2:  #e1ede5;
  --border:    rgba(21,128,61,.18);
  --border-h:  rgba(21,128,61,.45);

  --primary:   #15803d;
  --primary-d: #166534;
  --primary-xd:#dcfce7;

  --text:    #0f291c;
  --text2:   #1e4732;
  --muted:   #496e57;
  --white:   #091c13;

  --g-hero:  radial-gradient(ellipse at 85% 20%, rgba(21,128,61,.08) 0%, transparent 60%), radial-gradient(ellipse at 15% 85%, rgba(245,158,11,.05) 0%, transparent 50%), #f3f8f5;
  --g-card:  linear-gradient(145deg, #ffffff, #f2f8f4);
  --g-header:rgba(243,248,245,.95);

  --sh-card: 0 4px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(21,128,61,.12);
  --sh-glow: 0 0 40px rgba(21,128,61,.10);
  --sh-btn:  0 4px 15px rgba(21,128,61,.24);
}

[data-theme="light"] #site-footer {
  background: #e4efe7;
  border-top-color: rgba(21,128,61,.18);
}
[data-theme="light"] .footer-corp {
  background: #ffffff;
  border-color: rgba(21,128,61,.15);
}
[data-theme="light"] .footer-tagline,
[data-theme="light"] .footer-link,
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-btm-link {
  color: #335c43;
}
[data-theme="light"] .footer-col-title {
  color: #0f291c;
}
[data-theme="light"] .footer-soc {
  background: #ffffff;
  border-color: rgba(21,128,61,.2);
}
[data-theme="light"] .hero-showcase-box {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(21,128,61,.22) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.06), 0 0 20px rgba(21,128,61,.05) !important;
}
[data-theme="light"] .hero-proof-banner {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(21,128,61,.2) !important;
}
[data-theme="light"] .hero-quick-btn {
  background: #ffffff !important;
  border-color: rgba(21,128,61,.18) !important;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-base), color var(--t-base);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s4);
}
@media (min-width: 640px)  { .wrap { padding-inline: var(--s6); } }
@media (min-width: 1024px) { .wrap { padding-inline: var(--s8); } }

.section         { padding-block: var(--s16); }
.section--alt    { background: var(--bg2); }
.section--tight  { padding-block: var(--s12); }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  background: var(--g-header);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base), box-shadow var(--t-base);
}
#site-header.scrolled {
  box-shadow: 0 2px 32px rgba(0,0,0,.5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--s4);
}

/* Logo */
.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.site-logo img {
  height: 48px;
  width: auto;
  transition: opacity var(--t-fast);
}
.site-logo:hover img { opacity: .9; }
.logo-svg-light { display: none; }
[data-theme="light"] .logo-svg-dark  { display: none; }
[data-theme="light"] .logo-svg-light { display: block; }

/* Desktop Nav */
.main-nav {
  display: none;
  align-items: center;
  gap: .35rem;
}
@media (min-width: 960px) { .main-nav { display: flex; } }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text2);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.nav-link:hover { color: var(--white); background: rgba(34,197,94,.08); }
.nav-link.active { color: var(--primary); font-weight: 700; background: rgba(34,197,94,.06); }

/* Header Right Controls */
.header-controls {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}

/* Theme Toggle */
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  font-size: 1.05rem;
  transition: all var(--t-fast);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(34,197,94,.12);
  transform: scale(1.06);
}

/* Hamburger */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  color: var(--text);
  transition: background var(--t-fast);
}
.hamburger:hover { background: var(--surface2); }
@media (min-width: 960px) { .hamburger { display: none; } }

.hamburger-bars {
  display: flex; flex-direction: column; gap: 5px;
}
.hamburger-bars span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.hamburger.is-open .hamburger-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger-bars span:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
#mobile-menu {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(11,26,18,.98);
  backdrop-filter: blur(20px);
  z-index: 190;
  flex-direction: column;
  padding: var(--s4);
  gap: var(--s1);
  overflow-y: auto;
}
[data-theme="light"] #mobile-menu { background: rgba(243,248,245,.98); }
#mobile-menu.is-open { display: flex; animation: drawerIn .22s ease; }
@keyframes drawerIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--r-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.mobile-nav-link:hover { background: var(--surface2); color: var(--primary); }
.mobile-nav-link .icon { font-size: 1.25rem; width: 28px; text-align: center; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: .7rem var(--s6);
  font-size: .9rem;
  font-weight: 700;
  border-radius: var(--r-full);
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
  letter-spacing: .01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--g-green);
  color: #fff;
  box-shadow: var(--sh-btn);
}
.btn--primary:hover { box-shadow: 0 8px 30px rgba(34,197,94,.45); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid rgba(34,197,94,.35);
}
.btn--ghost:hover {
  background: rgba(34,197,94,.08);
  border-color: var(--primary);
}

.btn--gold {
  background: var(--g-gold);
  color: #0b1a12;
  font-weight: 800;
  box-shadow: var(--sh-gold);
}
.btn--gold:hover { box-shadow: 0 8px 28px rgba(245,158,11,.5); }

.btn--sm  { padding: .45rem var(--s4); font-size: .82rem; }
.btn--lg  { padding: .9rem var(--s8);  font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
#hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  background: var(--g-hero);
  overflow: hidden;
  padding-block: var(--s16);
}

/* Pitch lines background */
.hero-pitch {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-pitch::before {   /* center circle */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 95vw);
  height: min(700px, 95vw);
  border: 1px solid rgba(34,197,94,.05);
  border-radius: 50%;
}
.hero-pitch::after {    /* center line */
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 100%;
  background: rgba(34,197,94,.04);
}
.pitch-h-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(34,197,94,.04);
}

/* Glowing orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: orb-float 12s ease-in-out infinite;
}
.hero-orb--1 {
  width: 500px; height: 500px;
  background: rgba(34,197,94,.07);
  top: -15%; right: -10%;
}
.hero-orb--2 {
  width: 350px; height: 350px;
  background: rgba(245,158,11,.05);
  bottom: -10%; left: -8%;
  animation-delay: -6s;
}
@keyframes orb-float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(20px,-30px) scale(1.05); }
}

.hero-content { position: relative; z-index: 1; max-width: 760px; }

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s4);
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.28);
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s8);
}
.badge-dot {
  width: 7px; height: 7px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.3; transform:scale(.7); }
}

/* Hero Title */
.hero-title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--white);
  margin-bottom: var(--s6);
}
.hero-title__accent {
  display: block;
  background: var(--g-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title__year {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--s8);
}
.hero-sub strong { color: var(--text2); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s12);
}

/* Stats strip */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
}
.hero-stat__val {
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.04em;
}
.hero-stat__val em { color: var(--primary); font-style: normal; }
.hero-stat__label {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: var(--s1);
}

/* --------------------------------------------------------------------------
   7. SECTION HEADERS
   -------------------------------------------------------------------------- */
.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s8);
}
.sec-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: var(--s2);
}
.sec-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.025em;
  line-height: 1.2;
}
.sec-more {
  font-size: .875rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  flex-shrink: 0;
  transition: gap var(--t-fast);
}
.sec-more:hover { gap: var(--s2); }

/* --------------------------------------------------------------------------
   8. CARD GRIDS
   -------------------------------------------------------------------------- */
.grid          { display: grid; gap: var(--s4); }
.grid--2  { grid-template-columns: repeat(2, 1fr); }
.grid--3  { grid-template-columns: repeat(3, 1fr); }
.grid--4  { grid-template-columns: repeat(4, 1fr); }

/* Auto-responsive grids */
.grid--auto-sm  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--auto-md  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* Force single column on mobile */
@media (max-width: 639px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Base Card */
.card {
  background: var(--g-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  will-change: transform;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-card);
  border-color: var(--border-h);
}

/* Quick Access Cards */
.qcard {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s8);
  text-decoration: none;
}
.qcard__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  transition: transform var(--t-base);
}
.qcard:hover .qcard__icon { transform: scale(1.12) rotate(4deg); }
.qcard__title { font-size: 1.1rem; font-weight: 700; color: var(--white); line-height: 1.3; }
.qcard__desc  { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.qcard__arrow { margin-top: auto; font-size: 1.3rem; color: var(--primary); transition: transform var(--t-fast); }
.qcard:hover .qcard__arrow { transform: translateX(5px); }

/* Icon bg colours */
.ibg--green  { background: rgba(34,197,94,.13); }
.ibg--blue   { background: rgba(59,130,246,.13); }
.ibg--purple { background: rgba(168,85,247,.13); }
.ibg--gold   { background: rgba(245,158,11,.13); }
.ibg--red    { background: rgba(239,68,68,.13); }
.ibg--cyan   { background: rgba(6,182,212,.13); }

/* --------------------------------------------------------------------------
   9. CHAMPIONSHIP NAVIGATOR
   -------------------------------------------------------------------------- */
.champ-box {
  background: var(--g-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.champ-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--border);
}
.champ-box__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  display: flex; align-items: center; gap: var(--s2);
}
.season-select {
  padding: var(--s2) var(--s4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  padding-right: var(--s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2322c55e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: .85em;
}
.season-select:focus { border-color: var(--primary); outline: none; }

.champ-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.champ-tabs::-webkit-scrollbar { display: none; }
.champ-tab {
  padding: var(--s3) var(--s5);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.champ-tab:hover { color: var(--text); }
.champ-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.champ-body { padding: var(--s5) var(--s6); }

.pill-grid { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--s2) var(--s4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text2);
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.pill:hover {
  background: rgba(34,197,94,.1);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
.pill--accent {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   10. NEWS CARDS
   -------------------------------------------------------------------------- */
.news-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.news-tag--green  { background: rgba(34,197,94,.12); color: var(--primary); }
.news-tag--gold   { background: rgba(245,158,11,.12); color: var(--gold); }
.news-tag--blue   { background: rgba(59,130,246,.12); color: var(--blue); }

.news-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.news-dot  { width: 3px; height: 3px; background: var(--muted); border-radius: 50%; }
.news-date { font-size: .75rem; color: var(--muted); }

.news-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
  transition: color var(--t-fast);
}
.card:hover .news-title { color: var(--primary); }

.news-excerpt {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-author { font-size: .75rem; color: var(--muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   11. STORE BANNER
   -------------------------------------------------------------------------- */
.store-banner {
  background: linear-gradient(135deg, #1a1200, #2d2000);
  border: 1px solid rgba(245,158,11,.22);
  border-radius: var(--r-lg);
  padding: var(--s10) var(--s8);
  position: relative;
  overflow: hidden;
}
.store-banner::before {
  content: '🛒';
  position: absolute;
  right: -2rem; top: 50%;
  transform: translateY(-50%);
  font-size: 10rem;
  opacity: .04;
  pointer-events: none;
}
.store-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
@media (min-width: 768px) {
  .store-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.store-banner__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: var(--s2);
}
.store-banner__title {
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: var(--s2);
}
.store-banner__desc {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  max-width: 420px;
  line-height: 1.6;
}
.store-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex-shrink: 0;
}
@media (min-width: 480px) { .store-banner__actions { flex-direction: row; } }

/* --------------------------------------------------------------------------
   12. CALCIOMERCATO PREVIEW
   -------------------------------------------------------------------------- */
.mercato-card { display: flex; flex-direction: column; gap: var(--s4); }
.mercato-hd   { display: flex; align-items: center; gap: var(--s4); }
.mercato-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.mercato-name  { font-size: 1rem; font-weight: 700; color: var(--white); }
.mercato-role  { font-size: .82rem; color: var(--primary); font-weight: 600; }
.mercato-pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mercato-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: .75rem; color: var(--text2); font-weight: 500;
}

/* --------------------------------------------------------------------------
   13. COMMUNITY / PROMO CARDS
   -------------------------------------------------------------------------- */
.promo-card {
  padding: var(--s10);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s4);
}
.promo-icon {
  font-size: 3.5rem;
  animation: bounce-icon 2.5s ease-in-out infinite;
}
@keyframes bounce-icon {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.promo-title { font-size: 1.2rem; font-weight: 800; color: var(--white); }
.promo-desc  { font-size: .875rem; color: var(--muted); line-height: 1.6; max-width: 260px; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
#site-footer {
  background: #060f0a;
  border-top: 1px solid var(--border);
  padding-block: var(--s16) var(--s8);
}

.footer-grid {
  display: grid;
  gap: var(--s12);
  grid-template-columns: 1fr;
  margin-bottom: var(--s10);
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1.2fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 2fr; } }

.footer-logo img { height: 42px; width: auto; margin-bottom: var(--s4); }
.footer-tagline {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: var(--s4);
}
.footer-corp {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.footer-corp strong { color: var(--text2); }

.footer-socials { display: flex; gap: var(--s2); flex-wrap: wrap; }
.footer-soc {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: all var(--t-fast);
}
.footer-soc:hover {
  background: rgba(34,197,94,.1);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s8);
}
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }

.footer-col-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text2);
  margin-bottom: var(--s4);
}
.footer-link {
  display: block;
  font-size: .875rem;
  color: var(--muted);
  padding-block: 4px;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-link:hover { color: var(--primary); padding-left: 4px; }

.footer-btm {
  border-top: 1px solid var(--border);
  padding-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
}
.footer-copy { font-size: .8rem; color: var(--muted); }
.footer-copy strong { color: var(--text2); }
.footer-btm-links { display: flex; gap: var(--s5); }
.footer-btm-link {
  font-size: .8rem;
  color: var(--muted);
  transition: color var(--t-fast);
}
.footer-btm-link:hover { color: var(--primary); }

/* --------------------------------------------------------------------------
   15. SCROLL-TO-TOP
   -------------------------------------------------------------------------- */
#scroll-top {
  position: fixed;
  bottom: var(--s8);
  right: var(--s8);
  width: 46px; height: 46px;
  background: var(--g-green);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--sh-btn);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 100;
}
#scroll-top.visible { opacity: 1; pointer-events: auto; }
#scroll-top:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   16. SKELETON / LOADING
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* --------------------------------------------------------------------------
   17. ENTRANCE ANIMATIONS (driven by JS IntersectionObserver)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. SECTION-LEVEL PAGE STYLES
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding-block: var(--s12) var(--s8);
}
.page-hero .sec-eyebrow { margin-bottom: var(--s2); }
.page-hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   19. ACCESSIBILITY / REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   20. PRINT
   -------------------------------------------------------------------------- */
@media print {
  #site-header, #site-footer, #scroll-top { display: none !important; }
  body { background: #fff; color: #000; }
}

/* 21. NAV DROPDOWN */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;height:100%;}
.nav-link--has-drop{display:flex;align-items:center;gap:4px;}
.nav-arrow{font-size:.65em;transition:transform 140ms ease;}
.nav-link--has-drop[aria-expanded="true"] .nav-arrow,
.nav-dropdown:hover .nav-arrow{transform:rotate(180deg);}
.nav-drop-panel{display:none;position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);min-width:250px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 16px 48px rgba(0,0,0,.6);padding:var(--s2);z-index:300;}
/* Invisible Bridge to prevent mouse hover glitch when moving cursor down slowly */
.nav-drop-panel::before{content:'';position:absolute;top:-20px;left:0;right:0;height:20px;background:transparent;}
.nav-drop-panel.open{display:block;animation:dropIn .18s ease;}
@media (min-width: 900px){
  .nav-dropdown:hover .nav-drop-panel{display:block;animation:dropIn .18s ease;}
}
.nav-drop-link{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);font-size:.875rem;font-weight:600;color:var(--text2);border-radius:var(--r-sm);transition:background 140ms ease,color 140ms ease;text-decoration:none;}
.nav-drop-link:hover{background:rgba(34,197,94,.08);color:var(--primary);}
.mobile-nav-section{padding:var(--s2) 0;border-top:1px solid var(--border);margin-top:var(--s2);}
.mobile-nav-section-title{padding:var(--s2) var(--s4);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
.mobile-nav-link--sub{padding-left:var(--s8);font-size:.9rem;}

/* 22. PAGE BANNER */
.page-banner{background:var(--bg2);border-bottom:1px solid var(--border);padding-block:var(--s8) var(--s6);}
.page-h1{font-size:clamp(1.6rem,4.5vw,2.5rem);font-weight:900;color:var(--white);letter-spacing:-.03em;line-height:1.15;margin-top:var(--s2);}

/* 23. AD SLOTS */
.ad-slot{margin-block:var(--s4);}
.ad-slot__label{font-size:.65rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s1);}
.ad-slot--leaderboard{margin-block:0;}
.ad-leader-inner{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);text-decoration:none;transition:border-color 140ms ease,box-shadow 140ms ease;min-height:72px;}
.ad-leader-inner:hover{border-color:var(--border-h);box-shadow:var(--sh-glow);}
.ad-leader-icon{width:48px;height:48px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;}
.ad-leader-body{flex:1;min-width:0;}.ad-leader-name{font-size:.9rem;font-weight:800;line-height:1.2;}.ad-leader-desc{font-size:.8rem;color:var(--muted);margin-top:2px;}
.ad-leader-cta{flex-shrink:0;padding:var(--s2) var(--s4);border-radius:var(--r-full);color:#fff;font-size:.8rem;font-weight:700;transition:opacity 140ms ease;}
.ad-leader-cta:hover{opacity:.85;}
@media(max-width:480px){.ad-leader-cta{display:none;}}
.ad-rect-inner{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);text-decoration:none;transition:border-color 140ms ease,box-shadow 140ms ease;}
.ad-rect-inner:hover{border-color:var(--border-h);box-shadow:var(--sh-glow);}
.ad-rect-icon{font-size:2rem;}.ad-rect-name{font-size:1rem;font-weight:800;}.ad-rect-desc{font-size:.82rem;color:var(--muted);line-height:1.5;}
.ad-rect-cta{display:block;text-align:center;padding:var(--s2) var(--s4);border-radius:var(--r-full);color:#fff;font-size:.82rem;font-weight:700;text-decoration:none;transition:opacity 140ms ease;margin-top:var(--s2);}
.ad-rect-cta:hover{opacity:.85;}
.crypto-widget{background:linear-gradient(135deg,#1a0b2e,#0f0620);border:1px solid rgba(168,85,247,.2);border-radius:var(--r-md);padding:var(--s5);}
.crypto-header{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);}
.crypto-icon{font-size:1.8rem;}.crypto-name{font-size:1rem;font-weight:800;color:#c4b5fd;}.crypto-sub{font-size:.75rem;color:rgba(196,181,253,.5);}
.crypto-price{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2);}
.crypto-val{font-size:1.4rem;font-weight:900;color:#c4b5fd;}.crypto-change{font-size:.8rem;color:var(--primary);}
.ad-inline-row td{padding:0 !important;}
.ad-inline-link{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);background:rgba(34,197,94,.04);border-top:1px dashed rgba(34,197,94,.15);border-bottom:1px dashed rgba(34,197,94,.15);text-decoration:none;font-size:.82rem;color:var(--text2);flex-wrap:wrap;transition:background 140ms ease;}
.ad-inline-link:hover{background:rgba(34,197,94,.08);}
.ad-inline-label{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;}
.ad-inline-icon{font-size:1.1rem;flex-shrink:0;}.ad-inline-sep{color:var(--muted);}
.ad-inline-cta{margin-left:auto;color:var(--primary);font-weight:700;font-size:.82rem;flex-shrink:0;}
@media(max-width:600px){.ad-inline-cta{display:none;}}

/* 24. ARCHIVE 3-COL LAYOUT */
.archive-wrap{padding-block:var(--s6) var(--s16);}
.archive-layout{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media(min-width:768px){.archive-layout{grid-template-columns:1fr 260px;grid-template-areas:"main ads" "main ads";}.archive-nav{display:none;}.archive-main{grid-area:main;}.archive-ads{grid-area:ads;}}
@media(min-width:1080px){.archive-layout{grid-template-columns:200px 1fr 260px;grid-template-areas:"nav main ads";}.archive-nav{grid-area:nav;display:block;}.archive-main{grid-area:main;}.archive-ads{grid-area:ads;}}
.archive-nav{display:flex;flex-direction:column;gap:var(--s3);}
.anav-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.anav-title{padding:var(--s3) var(--s4);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);border-bottom:1px solid var(--border);}
.anav-link{display:block;padding:var(--s2) var(--s4);font-size:.85rem;font-weight:600;color:var(--text2);text-decoration:none;transition:background 140ms ease,color 140ms ease;border-left:3px solid transparent;}
.anav-link:hover{background:rgba(34,197,94,.06);color:var(--white);}.anav-link.active{color:var(--primary);border-left-color:var(--primary);background:rgba(34,197,94,.07);}
.anav-season{display:block;padding:var(--s2) var(--s4);font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;transition:all 140ms ease;border-left:3px solid transparent;}
.anav-season:hover{color:var(--white);background:rgba(34,197,94,.05);}.anav-season.active{color:var(--primary);border-left-color:var(--primary);font-weight:700;}
.archive-main{min-width:0;display:flex;flex-direction:column;gap:var(--s4);}
.archive-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.archive-section-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s5);background:var(--surface2);border-bottom:1px solid var(--border);}
.archive-section-title{font-size:.9rem;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.archive-badge{flex-shrink:0;padding:2px 10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:var(--r-full);font-size:.7rem;font-weight:700;color:var(--primary);}
.archive-ads{display:flex;flex-direction:column;gap:var(--s4);}
@media(max-width:767px){.archive-ads{flex-direction:row;flex-wrap:wrap;}.archive-ads .ad-slot{flex:1 1 250px;}}

/* 25. STANDINGS TABLE */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.standings-table{width:100%;border-collapse:collapse;font-size:.875rem;}
.standings-table th{padding:var(--s2) var(--s3);text-align:center;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap;}
.standings-th-team{text-align:left !important;padding-left:var(--s4) !important;}.standings-th-pts{color:var(--primary) !important;}
.standings-row td{padding:var(--s2) var(--s3);text-align:center;color:var(--text);border-bottom:1px solid rgba(34,197,94,.05);transition:background 140ms ease;}
.standings-row:hover td{background:rgba(34,197,94,.04);}.standings-row--leader td{background:rgba(34,197,94,.06);}.standings-row--leader:hover td{background:rgba(34,197,94,.10);}
.standings-pos{font-weight:700;color:var(--muted);width:36px;}.standings-row--leader .standings-pos{color:var(--primary);}
.standings-team{text-align:left !important;padding-left:var(--s4) !important;font-weight:600;color:var(--white);min-width:140px;}
.standings-pts{font-weight:800;color:var(--white);}.standings-row--leader .standings-pts{color:var(--primary);}
.standings-diff--pos{color:var(--primary);}.standings-diff--neg{color:#ef4444;}

/* 26. MATCH CARDS */
.match-card{padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);transition:background 140ms ease;}
.match-card:last-child{border-bottom:none;}.match-card:hover{background:rgba(34,197,94,.03);}
.match-card__meta{font-size:.72rem;color:var(--muted);font-weight:500;margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.05em;}
.match-card__row{display:flex;align-items:center;gap:var(--s3);}
.match-team{flex:1;font-size:.95rem;font-weight:700;color:var(--white);line-height:1.3;}
.match-team--home{text-align:right;}.match-team--away{text-align:left;}
.match-score{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--s2) var(--s4);}
.match-score__val{font-size:1.2rem;font-weight:900;color:var(--text2);min-width:20px;text-align:center;line-height:1;}
.match-score__val--win{color:var(--primary);}.match-score__sep{color:var(--muted);font-weight:400;font-size:1rem;}
.match-card__footer{margin-top:var(--s3);text-align:right;}
.match-card__link{font-size:.8rem;font-weight:600;color:var(--primary);transition:opacity 140ms ease;text-decoration:none;}
.match-card__link:hover{opacity:.7;}

/* 27. NEWS LIST */
.news-list{display:flex;flex-direction:column;}
.news-list-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);text-decoration:none;transition:background 140ms ease;flex-wrap:wrap;}
.news-list-item:last-child{border-bottom:none;}.news-list-item:hover{background:rgba(34,197,94,.04);}
.news-list-title{flex:1;font-size:.9rem;font-weight:600;color:var(--white);line-height:1.4;min-width:200px;}
.news-list-item:hover .news-list-title{color:var(--primary);}

/* 28. SHOP CARDS */
.shop-card{display:flex;flex-direction:column;gap:var(--s4);text-decoration:none;padding:var(--s8);transition:transform 240ms ease,box-shadow 240ms ease,border-color 240ms ease;}
.shop-card:hover{transform:translateY(-6px);}
.shop-card__icon{width:64px;height:64px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:2rem;}
.shop-card__name{font-size:1.2rem;font-weight:800;line-height:1.2;}.shop-card__tag{font-size:.8rem;font-weight:600;margin-top:var(--s1);}
.shop-card__desc{font-size:.875rem;color:var(--muted);line-height:1.6;flex:1;}
.shop-card__cta{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s5);border-radius:var(--r-full);font-size:.85rem;font-weight:700;color:#fff;width:fit-content;transition:opacity 140ms ease,transform 140ms ease;}
.shop-card:hover .shop-card__cta{transform:translateX(4px);}

/* Desktop CTA */
#btn-hd-store{display:none;}
@media(min-width:960px){#btn-hd-store{display:inline-flex;}}

/* PILL GRID */
.pill-grid{display:flex;flex-wrap:wrap;gap:.5rem;}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:9999px;font-size:.82rem;font-weight:600;color:var(--text2);text-decoration:none;transition:all 140ms ease;}
.pill:hover{background:rgba(34,197,94,.08);border-color:var(--border-h);color:var(--white);}
.pill--accent{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:var(--primary);}
.pill--accent:hover{background:rgba(34,197,94,.18);}

/* SEASON SELECT */
.season-select{width:100%;padding:.6rem .9rem;background:var(--bg2);border:1px solid var(--border);border-radius:.6rem;color:var(--white);font-size:.9rem;font-weight:600;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem;transition:border-color 140ms ease;}
.season-select:focus{border-color:var(--primary);}
[data-theme=light] .season-select{background-color:var(--surface);color:var(--white);}

/* PLACEHOLDER AD BANNER */
.ad-placeholder{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.5rem;background:repeating-linear-gradient(45deg,rgba(34,197,94,.03) 0px,rgba(34,197,94,.03) 1px,transparent 1px,transparent 12px);border:2px dashed rgba(34,197,94,.2);border-radius:.75rem;text-align:center;}
.ad-placeholder--leader{min-height:72px;}
.ad-placeholder--rect{min-height:160px;flex-direction:column;}
.ad-placeholder__icon{font-size:1.6rem;flex-shrink:0;}
.ad-placeholder__body{flex:1;min-width:0;}
.ad-placeholder__label{font-size:.65rem;font-weight:700;color:rgba(34,197,94,.5);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.2rem;}
.ad-placeholder__name{font-size:.9rem;font-weight:800;color:rgba(34,197,94,.7);}
.ad-placeholder__detail{font-size:.75rem;color:var(--muted);margin-top:.15rem;}
.ad-placeholder__cta{flex-shrink:0;padding:.35rem 1rem;border:1px solid rgba(34,197,94,.25);border-radius:9999px;font-size:.75rem;font-weight:700;color:rgba(34,197,94,.5);white-space:nowrap;}

/* AD SLOT COMPONENTS */
.ad-slot{margin-bottom:1rem}
.ad-slot__label{font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.35rem}
.ad-slot--leaderboard{margin-block:.5rem}
.ad-leader-inner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;text-decoration:none;transition:all 140ms ease;width:100%}
.ad-leader-inner:hover{border-color:var(--border-h);background:var(--surface2)}
.ad-leader-icon{width:40px;height:40px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.ad-leader-body{flex:1;min-width:0}
.ad-leader-name{font-size:.9rem;font-weight:800;line-height:1.2}
.ad-leader-desc{font-size:.75rem;color:var(--muted);margin-top:.1rem}
.ad-leader-cta{flex-shrink:0;padding:.4rem 1rem;border-radius:9999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.ad-rect-inner{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;text-decoration:none;transition:all 140ms ease;width:100%}
.ad-rect-inner:hover{border-color:var(--border-h)}
.ad-rect-icon{font-size:1.75rem}
.ad-rect-name{font-size:.95rem;font-weight:800}
.ad-rect-desc{font-size:.8rem;color:var(--muted);line-height:1.4}
.ad-rect-cta{margin-top:.25rem;padding:.45rem 1rem;border-radius:9999px;font-size:.8rem;font-weight:700;text-align:center;display:block}
.crypto-widget{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;background:linear-gradient(135deg,#0d0720,#1a0b2e);border:1px solid rgba(168,85,247,.2);border-radius:.75rem}
.crypto-header{display:flex;align-items:center;gap:.75rem}
.crypto-icon{font-size:1.75rem}
.crypto-name{font-size:.95rem;font-weight:800;color:#c4b5fd}
.crypto-sub{font-size:.72rem;color:rgba(196,181,253,.5)}
.crypto-val{font-size:1.25rem;font-weight:900;color:#c4b5fd}
.crypto-change{font-size:.72rem;color:rgba(196,181,253,.5);margin-top:.1rem}
.ad-inline-row td{padding:0!important;background:transparent!important}
.ad-inline-link{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.4rem 1rem;background:rgba(34,197,94,.03);border-block:1px dashed rgba(34,197,94,.1);font-size:.78rem;text-decoration:none;color:var(--text2);transition:background 120ms}
.ad-inline-link:hover{background:rgba(34,197,94,.06)}
.ad-inline-label{font-size:.6rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ad-inline-icon{font-size:1rem}
.ad-inline-sep{color:var(--muted)}
.ad-inline-cta{margin-left:auto;font-weight:700;color:var(--primary);font-size:.78rem}

/* ARCHIVE LAYOUT */
.archive-wrap{padding-block:var(--s6,1.5rem)}
.archive-layout{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.archive-layout{grid-template-columns:220px 1fr}}
@media(min-width:1100px){.archive-layout{grid-template-columns:200px 1fr 260px}}
.archive-nav,.archive-ads{display:flex;flex-direction:column;gap:.75rem}
@media(max-width:1099px){.archive-ads{display:none}}
.anav-box{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;overflow:hidden}
.anav-title{padding:.6rem .9rem;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--border)}
.anav-link{display:block;padding:.5rem .9rem;font-size:.82rem;font-weight:600;color:var(--text2);text-decoration:none;border-bottom:1px solid var(--border);transition:all 120ms}
.anav-link:last-child{border-bottom:0}
.anav-link:hover,.anav-link.active{color:var(--white);background:rgba(34,197,94,.07)}
.anav-link.active{color:var(--primary);border-left:2px solid var(--primary)}
.anav-season{display:block;padding:.4rem .9rem;font-size:.8rem;font-weight:700;color:var(--text2);text-decoration:none;border-bottom:1px solid var(--border);transition:all 120ms}
.anav-season:last-child{border-bottom:0}
.anav-season:hover,.anav-season.active{background:rgba(34,197,94,.07);color:var(--primary)}
.archive-main{display:flex;flex-direction:column;gap:1rem;min-width:0}
.archive-section{background:var(--surface);border:1px solid var(--border);border-radius:.9rem;overflow:hidden}
.archive-section-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem 1.25rem;background:var(--surface2);border-bottom:1px solid var(--border)}
.archive-section-title{font-size:.88rem;font-weight:700;color:var(--white)}
.archive-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .6rem;background:rgba(34,197,94,.1);color:var(--primary);border:1px solid rgba(34,197,94,.2);border-radius:9999px;flex-shrink:0}

/* STANDINGS TABLE */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.standings-table{width:100%;border-collapse:collapse;font-size:.82rem}
.standings-table th{padding:.5rem .6rem;background:var(--bg2);color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:center;border-bottom:1px solid var(--border);cursor:default;white-space:nowrap}
.standings-th-team{text-align:left!important}
.standings-th-pts{min-width:36px}
.standings-table td{padding:.5rem .6rem;border-bottom:1px solid rgba(34,197,94,.06);text-align:center;vertical-align:middle;white-space:nowrap}
.standings-row:last-child td{border-bottom:0}
.standings-row:hover td{background:rgba(34,197,94,.04)}
.standings-row--leader td{background:rgba(34,197,94,.04)}
.standings-row--leader .standings-pos::before{content:"🥇";font-size:.75rem}
.standings-pos{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center!important;width:30px}
.standings-team{text-align:left!important;font-weight:700;color:var(--white);max-width:200px;overflow:hidden;text-overflow:ellipsis}
.standings-pts{font-weight:900;color:var(--white);font-size:.9rem}
.standings-diff--pos{color:#22c55e;font-weight:700}
.standings-diff--neg{color:#ef4444;font-weight:700}

/* NEWS LIST */
.news-list{display:flex;flex-direction:column}
.news-list-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);text-decoration:none;transition:background 120ms;color:var(--text)}
.news-list-item:last-child{border-bottom:0}
.news-list-item:hover{background:rgba(34,197,94,.04)}
.news-list-title{font-size:.88rem;font-weight:700;color:var(--white);line-height:1.3}

/* PAGE BANNER */
.page-banner{background:linear-gradient(135deg,var(--bg2),var(--surface));border-bottom:1px solid var(--border);padding:1.5rem 0}
.page-h1{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:900;color:var(--white);line-height:1.1;letter-spacing:-.03em;margin-top:.25rem}

/* QUICK CARDS (archivio hub) */
.qcard{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;text-decoration:none;color:var(--text)}
.qcard__icon{width:44px;height:44px;border-radius:.65rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.qcard__title{font-weight:800;color:var(--white);font-size:.95rem}
.qcard__desc{font-size:.78rem;color:var(--muted);margin-top:.15rem;line-height:1.4}
.qcard__arrow{margin-left:auto;color:var(--primary);font-weight:700;font-size:.9rem;flex-shrink:0;opacity:0;transition:opacity 140ms}
.qcard:hover .qcard__arrow{opacity:1}
.ibg--green{background:rgba(34,197,94,.12)}
.ibg--blue{background:rgba(59,130,246,.12)}
.ibg--cyan{background:rgba(6,182,212,.12)}