/* FILE: assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

/* TOKENS */
:root {
 /* MoFutbol brand palette (from logo) */
 --brand-red: #E8302A; /* M left leg Senegal red */
 --brand-yellow: #F5C842; /* M center Senegal yellow */
 --brand-green: #2DB84B; /* M right leg Senegal/Africa green */
 --brand-black: #0A0A0A; /* Shield black */
 --brand-circuit:#1E9448; /* Tech circuit green */

 /* Base surfaces pitch-dark green-blacks */
 --bg: #080c08;
 --surface: #0f1510;
 --surface-2: #16201a;
 --surface-3: #1c2b20;

 /* Accent: logo yellow-green as main CTA */
 --accent: #F5C842;
 --accent-h: #ffd84f;
 --accent-dim:#c9a030;
 --accent-bg: rgba(245,200,66,.1);

 /* Secondary accents */
 --red: #E8302A;
 --red-dim: rgba(232,48,42,.15);
 --green-b: #2DB84B;
 --green-dim: rgba(45,184,75,.15);

 --text: #f0f4f0;
 --muted: #7a907a;
 --danger: #ff4d4d;
 --border: rgba(245,200,66,.14);
 --border-s: rgba(245,200,66,.3);

 --r-sm: 6px;
 --r-md: 12px;
 --r-lg: 20px;
 --r-full: 999px;

 --f-display: 'Archivo Black', sans-serif;
 --f-heading: 'Archivo', sans-serif;
 --f-body: 'Inter', sans-serif;
 --f-mono: 'JetBrains Mono', monospace;

 --nav-h: 72px;
 --max-w: 1280px;

 --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
 --shadow-md: 0 4px 24px rgba(0,0,0,.5);
 --shadow-lg: 0 8px 48px rgba(0,0,0,.6);
 --glow: 0 0 32px rgba(245,200,66,.25);
}

[data-theme="light"] {
 --bg: #f8f5ef;
 --surface: #ffffff;
 --surface-2: #f2ede4;
 --surface-3: #e8e0d0;
 --text: #0a0c0a;
 --muted: #5a6a5a;
 --border: rgba(0,0,0,.1);
 --border-s: rgba(0,0,0,.2);
 --accent: #c8a020;
 --accent-h: #d4ac28;
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);line-height:1.6;min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:var(--r-full)}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5{font-family:var(--f-heading);line-height:1.15;font-weight:700}
h1{font-family:var(--f-display);font-size:clamp(2rem,3.8vw,3.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3vw,2.8rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
h4{font-size:1.1rem}
p{font-size:1rem;line-height:1.75;color:var(--muted)}.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.section-label{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.5rem}

/* LAYOUT */.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}.section{padding:2.5rem 0}.section--sm{padding:3rem 0}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}

/* NAV */
#site-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(9,13,9,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center}.nav-inner{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.nav-logo{display:flex;align-items:center;gap:.65rem;line-height:1.1;text-decoration:none;transition:opacity.2s}.nav-logo.logo-main{font-family:var(--f-display);font-size:1.35rem;color:var(--text);letter-spacing:-.01em}.nav-logo.logo-sub{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.nav-links{display:flex;align-items:center;gap:.25rem}.nav-links a{font-family:var(--f-heading);font-size:.9rem;font-weight:600;padding:.5rem 1rem;border-radius:var(--r-sm);color:var(--muted);transition:color.22s,background.22s,transform.22s;white-space:nowrap;position:relative}.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--surface-2)}.nav-links.nav-stl{color:var(--accent)!important}.nav-links.nav-stl:hover{background:rgba(245,200,66,.1)!important}.nav-dropdown{position:relative}.nav-dropdown>a::after{content:' ';font-size:.6rem}.nav-dropdown-menu{position:absolute;top:calc(100% +.5rem);left:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.5rem;min-width:180px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity.2s,transform.2s;box-shadow:var(--shadow-md)}.nav-dropdown.open.nav-dropdown-menu{opacity:1;pointer-events:all;transform:translateY(0)}.nav-dropdown-menu a{display:block;padding:.55rem.95rem;border-radius:var(--r-sm);font-size:.86rem;font-weight:500;color:var(--muted);transition:all.18s}.nav-dropdown-menu a:hover{background:var(--surface-2);color:var(--text)}.nav-actions{display:flex;align-items:center;gap:.5rem}.btn-theme{width:36px;height:36px;border-radius:var(--r-full);background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background.2s,color.2s;font-size:.9rem}.btn-theme:hover{background:var(--surface-3);color:var(--text)}.hamburger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;justify-content:center;align-items:center;background:var(--surface-2);border-radius:var(--r-sm)}.hamburger span{width:18px;height:2px;background:var(--text);transition:transform.3s,opacity.3s;display:block}.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobile-nav{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:99;background:var(--bg);padding:1.5rem;overflow-y:auto;transform:translateX(100%);transition:transform.3s}
#mobile-nav.open{transform:translateX(0)}
#mobile-nav a{display:block;padding:.9rem 1rem;border-radius:var(--r-md);font-family:var(--f-heading);font-size:1rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border)}
#mobile-nav a:hover,#mobile-nav a.active{color:var(--text);background:var(--surface-2)}
#mobile-nav.stl-link{color:var(--accent)}.nav-spacer{height:var(--nav-h)}

/* BUTTONS */.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-heading);font-size:.9rem;font-weight:600;padding:.7rem 1.4rem;border-radius:var(--r-md);transition:all.2s;cursor:pointer;border:none}.btn-primary{background:var(--accent);color:#090d09}.btn-primary:hover{background:var(--accent-h);box-shadow:var(--glow);transform:translateY(-1px)}.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-3);border-color:var(--border-s)}.btn-ghost{color:var(--accent);border:1px solid var(--border-s)}.btn-ghost:hover{background:rgba(245,200,66,.08);border-color:var(--accent)}.btn-sm{font-size:.8rem;padding:.5rem 1rem;border-radius:var(--r-sm)}.btn-lg{font-size:1rem;padding:.9rem 2rem;border-radius:var(--r-lg)}

/* HERO */.hero{position:relative;min-height:26vh;display:flex;align-items:center;overflow:hidden}.hero-content{position:relative;z-index:2;padding:1.75rem 0 1.25rem}.hero-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.pill{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.35rem.85rem;border-radius:var(--r-full);border:1px solid var(--border-s);color:var(--accent);background:rgba(245,200,66,.06)}.hero h1{margin-bottom:1.25rem;max-width:800px}.hero h1.accent{color:var(--accent)}.hero-desc{font-size:1.05rem;max-width:560px;margin-bottom:2rem;color:var(--muted)}.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:3rem}.watchalong-strip{display:inline-flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:.6rem 1.2rem;font-size:.85rem}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.watchalong-strip strong{color:var(--text);font-family:var(--f-heading);font-weight:600}

/* SECTION HEADERS */.section-header{margin-bottom:2.5rem}.section-header h2{margin-bottom:.5rem}.section-header p{max-width:560px}.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}

/* CARDS */.story-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform.25s,border-color.25s,box-shadow.25s}.story-card:hover{transform:translateY(-4px);border-color:var(--border-s);box-shadow:var(--shadow-md)}.story-card-thumb{width:100%;aspect-ratio:16/9;background:var(--surface-2);position:relative;overflow:hidden}.story-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform.4s}.story-card:hover.story-card-thumb img{transform:scale(1.05)}.story-card-thumb-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;font-size:3rem}.play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,13,9,.4);opacity:0;transition:opacity.2s}.story-card:hover.play-btn{opacity:1}.play-icon{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#090d09;font-size:1.2rem}.story-card-body{padding:1.25rem}.story-card-tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}.story-card-title{font-size:1rem;font-weight:700;font-family:var(--f-heading);color:var(--text);margin-bottom:.4rem;line-height:1.3}.story-card-desc{font-size:.85rem;color:var(--muted);line-height:1.5}.story-card-meta{display:flex;align-items:center;gap:.75rem;margin-top:.85rem;font-size:.78rem;color:var(--muted);font-family:var(--f-mono)}.club-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem;transition:transform.2s,border-color.2s}.club-card:hover{transform:translateY(-2px);border-color:var(--border-s)}.club-card-header{display:flex;align-items:center;gap:.85rem;margin-bottom:.85rem}.club-badge{width:48px;height:48px;border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}.club-card-name{font-family:var(--f-heading);font-weight:700;font-size:.95rem;color:var(--text)}.club-card-level{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.club-card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}.tag{font-size:.7rem;font-family:var(--f-mono);padding:.25rem.6rem;border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}.fixture-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;transition:border-color.2s}.fixture-card:hover{border-color:var(--border-s)}.fixture-date{text-align:center;flex-shrink:0;background:var(--surface-2);border-radius:var(--r-sm);padding:.5rem.75rem;min-width:56px}.fixture-date.day{font-family:var(--f-display);font-size:1.4rem;color:var(--accent);line-height:1}.fixture-date.month{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.fixture-info{flex:1}.fixture-matchup{font-family:var(--f-heading);font-weight:700;font-size:.9rem;color:var(--text);margin-bottom:.2rem}.fixture-meta{font-size:.78rem;color:var(--muted);font-family:var(--f-mono)}.fixture-badge{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem.7rem;border-radius:var(--r-full);background:rgba(245,200,66,.1);color:var(--accent);border:1px solid var(--border-s);flex-shrink:0}.spotlight-card{background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;position:relative;overflow:hidden}.spotlight-card::before{content:'';position:absolute;top:-40%;right:-20%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(245,200,66,.12),transparent 70%);pointer-events:none}.spotlight-card-icon{font-size:2.5rem;margin-bottom:1rem}.spotlight-card-title{font-family:var(--f-heading);font-weight:700;font-size:1.1rem;color:var(--text);margin-bottom:.5rem}.spotlight-card p{font-size:.88rem}.community-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem;display:flex;gap:1rem}.community-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent-dim),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:1rem;color:#090d09}.community-card-text{flex:1}.community-card-name{font-family:var(--f-heading);font-weight:600;font-size:.9rem;color:var(--text)}.community-card-msg{font-size:.83rem;color:var(--muted);margin-top:.25rem;line-height:1.5}.community-card-time{font-family:var(--f-mono);font-size:.65rem;color:var(--muted);margin-top:.5rem}.pathway-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;border-left:3px solid var(--accent)}.pathway-card-step{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}.pathway-card-title{font-family:var(--f-heading);font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:.5rem}.pathway-card p{font-size:.85rem}

/* CAROUSEL */.carousel-wrap{position:relative}.carousel{display:flex;gap:1.25rem;overflow-x:auto;padding:.5rem 0 1.5rem;scroll-snap-type:x mandatory;scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.carousel>*{scroll-snap-align:start;flex-shrink:0;width:300px}.carousel-btns{display:flex;gap:.5rem}.carousel-btn{width:36px;height:36px;border-radius:50%;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:all.2s;font-size:.9rem}.carousel-btn:hover{background:var(--accent);color:#090d09;border-color:var(--accent)}

/* FILTERS */.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.filter-chip{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem 1rem;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:all.2s;cursor:pointer}.filter-chip:hover{border-color:var(--border-s);color:var(--text)}.filter-chip.active{background:var(--accent);color:#090d09;border-color:var(--accent)}

/* SUBNAV */.sub-nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:var(--nav-h);z-index:90}.sub-nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}.sub-nav-inner::-webkit-scrollbar{display:none}.sub-nav a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:1rem.9rem;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color.2s,border-color.2s;display:block}.sub-nav a:hover{color:var(--text)}.sub-nav a.active{color:var(--accent);border-color:var(--accent)}

/* EMBEDS */.embed-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}.embed-wrap iframe{display:block;width:100%}

/* PLATFORM LINKS */.platform-links{display:flex;flex-wrap:wrap;gap:.75rem}.platform-link{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.25rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);font-family:var(--f-heading);font-size:.88rem;font-weight:600;transition:all.2s;color:var(--text)}.platform-link:hover{border-color:var(--border-s);background:var(--surface-2);transform:translateY(-1px)}

/* FOOTER */
#site-footer{background:var(--surface);border-top:1px solid var(--border);padding:3.5rem 0 1.5rem;margin-top:4rem}.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}.footer-brand.logo-main{font-family:var(--f-display);font-size:1.3rem;color:var(--text);display:block;margin-bottom:.25rem}.footer-brand.logo-sub{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.footer-brand p{font-size:.85rem;color:var(--muted);margin-top:.85rem;max-width:280px}.footer-social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}.social-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all.2s;font-size:.9rem}.social-icon:hover{background:var(--accent);color:#090d09;border-color:var(--accent)}.footer-col h5{font-family:var(--f-heading);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:1rem}.footer-col ul li{margin-bottom:.6rem}.footer-col ul li a{font-size:.88rem;color:var(--muted);transition:color.2s}.footer-col ul li a:hover{color:var(--text)}.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}

/* CTA STRIP */.cta-strip{background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-3) 100%);border:1px solid var(--border);border-radius:var(--r-lg);padding:3rem 2.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2rem;position:relative;overflow:hidden}.cta-strip::before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(245,200,66,.15),transparent 70%);pointer-events:none}.cta-strip h3{font-size:1.5rem;color:var(--text)}.cta-strip p{color:var(--muted);margin-top:.35rem}.cta-strip-btns{display:flex;gap:.75rem;flex-wrap:wrap}

/* TABLE */.data-table{width:100%;border-collapse:collapse;font-size:.88rem}.data-table th{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}.data-table td{padding:.85rem 1rem;border-bottom:1px solid var(--border);color:var(--text)}.data-table tr:hover td{background:var(--surface-2)}.data-table.rank{font-family:var(--f-mono);color:var(--muted)}.data-table.team-name{font-weight:600;font-family:var(--f-heading)}

/* PATHWAY LADDER */.pathway-ladder{display:flex;flex-direction:column;gap:0;max-width:600px;margin:0 auto}.ladder-step{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:0;position:relative}.ladder-step:first-child{border-radius:var(--r-md) var(--r-md) 0 0}.ladder-step:last-child{border-radius:0 0 var(--r-md) var(--r-md)}.ladder-step:not(:last-child){border-bottom:none}.ladder-step.highlight{background:rgba(245,200,66,.06);border-color:var(--border-s)}.ladder-num{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--surface-2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:.9rem;color:var(--accent)}.ladder-step.highlight.ladder-num{background:var(--accent);color:#090d09;border-color:var(--accent)}.ladder-step-title{font-family:var(--f-heading);font-weight:700;font-size:.95rem;color:var(--text)}.ladder-step-desc{font-size:.8rem;color:var(--muted);margin-top:.15rem}

/* FORM */.form-group{margin-bottom:1.25rem}.form-label{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}.form-control{width:100%;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-family:var(--f-body);font-size:.9rem;transition:border-color.2s,box-shadow.2s;outline:none}.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,200,66,.12)}
textarea.form-control{resize:vertical;min-height:140px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

/* SEARCH BAR */.search-bar{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:.6rem 1.25rem;max-width:500px}.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--f-body);font-size:.9rem}.search-bar input::placeholder{color:var(--muted)}

/* BIO */.bio-section{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:center}.bio-photo{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;font-size:6rem;border:1px solid var(--border)}.bio-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.bio-stat{text-align:center;padding:1rem;background:var(--surface);border-radius:var(--r-md);border:1px solid var(--border)}.bio-stat-val{font-family:var(--f-display);font-size:1.8rem;color:var(--accent)}.bio-stat-label{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}

/* PILLARS */.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.pillar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem 1.5rem;text-align:center;transition:transform.2s,border-color.2s}.pillar-card:hover{transform:translateY(-4px);border-color:var(--border-s)}.pillar-icon{font-size:2.5rem;margin-bottom:1rem}.pillar-card h4{font-family:var(--f-heading);font-weight:700;color:var(--text);margin-bottom:.5rem}

/* MISSION */.mission-block{background:linear-gradient(135deg,rgba(245,200,66,.06),transparent);border:1px solid var(--border-s);border-radius:var(--r-lg);padding:3rem;text-align:center}.mission-block blockquote{font-family:var(--f-display);font-size:clamp(1.4rem,2.5vw,2rem);color:var(--text);line-height:1.3;margin-bottom:1rem}.mission-block blockquote.accent{color:var(--accent)}

/* ARTICLE CARD */.article-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;transition:transform.2s,border-color.2s}.article-card:hover{transform:translateY(-3px);border-color:var(--border-s)}.article-card-tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}.article-card-title{font-family:var(--f-heading);font-weight:700;font-size:1rem;color:var(--text);line-height:1.35;margin-bottom:.5rem}.article-card-excerpt{font-size:.84rem;color:var(--muted);line-height:1.6}.article-card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}.article-card-date{font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}.read-more{font-family:var(--f-mono);font-size:.7rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:.3rem}

/* SKELETON */.skeleton{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-3) 50%,var(--surface) 100%);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}}

/* EMPTY STATE */.empty-state{text-align:center;padding:4rem 2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}.empty-state-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.empty-state h4{color:var(--text);margin-bottom:.5rem}

/* MEDIA QUERIES */
@media(max-width:1024px){.footer-inner{grid-template-columns:1fr 1fr}.pillar-grid{grid-template-columns:repeat(2,1fr)}.bio-section{grid-template-columns:1fr;gap:2rem}.bio-photo{max-width:280px;margin:0 auto}
}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.nav-links,.nav-actions.btn-theme{display:none}.hamburger{display:flex}.hero{position:relative;min-height:26vh;display:flex;align-items:center;overflow:hidden}.hero-ctas{flex-direction:column;align-items:flex-start}.pillar-grid{grid-template-columns:repeat(2,1fr)}.cta-strip{text-align:center;flex-direction:column}.cta-strip-btns{justify-content:center}.footer-inner{grid-template-columns:1fr;gap:2rem}.form-grid{grid-template-columns:1fr}
}
@media(max-width:480px){.pillar-grid{grid-template-columns:1fr}
 h1{font-size:2rem}
}


/* 
 HOMEPAGE Hero split, stat band, video wall, magazine
 STL Soccer embedded section
 */
/* HERO SPLIT */.hero-split {
 min-height: 26vh;
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: center;
 overflow: hidden;
 position: relative;
}.hero-split::after {
 content: '';
 position: absolute;
 inset: 0;
 background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8f230' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
 pointer-events: none;
}.hero-left {
 padding: 5rem 3rem 4rem 0;
 position: relative;
 z-index: 1;
}.hero-left.hero-pills { margin-bottom: 1.1rem; }.hero-left h1 {
 font-size: clamp(2.2rem, 3.5vw, 3.6rem);
 margin-bottom:.85rem;
 line-height: 1.1;
 max-width: 560px;
}.hero-left.hero-desc {
 font-size:.95rem;
 max-width: 440px;
 margin-bottom: 1.75rem;
 line-height: 1.7;
}.hero-ctas { display: flex; flex-wrap: wrap; gap:.6rem; margin-bottom: 2rem; }

/* Stats bar */.hero-stats {
 display: flex; gap: 2rem; margin-bottom: 1.75rem;
 padding: 1rem 1.25rem;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 width: fit-content;
}.hero-stat-val {
 font-family: var(--f-display);
 font-size: 1.6rem;
 color: var(--accent);
 line-height: 1;
}.hero-stat-label {
 font-family: var(--f-mono);
 font-size:.58rem;
 letter-spacing:.14em;
 text-transform: uppercase;
 color: var(--muted);
 margin-top:.2rem;
}

/* Hero right video + thumbnail carousel */.hero-right {
 position: relative;
 height: 100%;
 min-height: 88vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 1rem;
 padding: 2rem 0 2rem 1.5rem;
 z-index: 1;
}

/* Latest YouTube embed */.hero-yt-embed {
 border-radius: var(--r-lg);
 overflow: hidden;
 border: 1px solid var(--border-s);
 box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(245,200,66,.08);
 position: relative;
 cursor: pointer;
 flex-shrink: 0;
}.hero-yt-embed img {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
 display: block;
 transition: transform.4s ease;
}.hero-yt-embed:hover img { transform: scale(1.03); }.hero-yt-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(9,13,9,.85) 0%, rgba(9,13,9,.1) 50%, transparent 100%);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 1rem;
}.hero-yt-badge {
 align-self: flex-start;
 font-family: var(--f-mono);
 font-size:.6rem;
 letter-spacing:.15em;
 text-transform: uppercase;
 background: var(--accent);
 color: #090d09;
 padding:.3rem.7rem;
 border-radius: var(--r-full);
 font-weight: 700;
}.hero-yt-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap:.75rem; }.hero-yt-title {
 font-family: var(--f-heading);
 font-weight: 700;
 font-size:.9rem;
 color: #fff;
 line-height: 1.3;
 flex: 1;
}.hero-yt-play {
 width: 48px; height: 48px; border-radius: 50%;
 background: var(--accent);
 display: flex; align-items: center; justify-content: center;
 color: #090d09; font-size: 1.1rem;
 flex-shrink: 0;
 transition: transform.2s, box-shadow.2s;
}.hero-yt-embed:hover.hero-yt-play {
 transform: scale(1.1);
 box-shadow: 0 0 24px rgba(245,200,66,.4);
}

/* Thumbnail row carousel */.hero-thumb-row {
 display: flex;
 gap:.65rem;
 overflow-x: auto;
 scrollbar-width: none;
 padding-bottom:.25rem;
}.hero-thumb-row::-webkit-scrollbar { display: none; }.hero-thumb {
 flex-shrink: 0;
 width: 120px;
 border-radius: var(--r-md);
 overflow: hidden;
 border: 2px solid transparent;
 cursor: pointer;
 transition: border-color.2s, transform.2s;
 position: relative;
}.hero-thumb:hover,.hero-thumb.active {
 border-color: var(--accent);
 transform: translateY(-2px);
}.hero-thumb img {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
 display: block;
}.hero-thumb-label {
 position: absolute;
 inset: 0;
 background: rgba(9,13,9,.5);
 display: flex;
 align-items: flex-end;
 padding:.4rem.5rem;
 font-family: var(--f-mono);
 font-size:.56rem;
 color: rgba(255,255,255,.8);
 letter-spacing:.06em;
 text-transform: uppercase;
 line-height: 1.2;
 opacity: 0;
 transition: opacity.2s;
}.hero-thumb:hover.hero-thumb-label { opacity: 1; }

/* Watchalong pill */.watchalong-strip {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 padding:.55rem 1.1rem;
 display: inline-flex;
 align-items: center;
 gap:.75rem;
 font-size:.82rem;
 flex-wrap: wrap;
 width: fit-content;
}

/* VISUAL STAT BAND */.stat-band {
 background: var(--surface);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 padding: 1.25rem 0;
}.stat-band-inner {
 max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
 display: flex; align-items: center; justify-content: space-between;
 gap: 1rem; flex-wrap: wrap;
}.stat-band-item {
 display: flex; align-items: center; gap:.75rem;
 padding: 0 1.5rem;
 border-right: 1px solid var(--border);
 flex: 1; min-width: 140px;
}.stat-band-item:last-child { border-right: none; }.stat-band-num {
 font-family: var(--f-display);
 font-size: 1.8rem;
 color: var(--accent);
 line-height: 1;
 white-space: nowrap;
}.stat-band-text {
 font-family: var(--f-mono);
 font-size:.62rem;
 letter-spacing:.12em;
 text-transform: uppercase;
 color: var(--muted);
 line-height: 1.4;
}

/* FEATURED EPISODE (split) */.featured-ep {
 display: grid;
 grid-template-columns: 1.1fr 1fr;
 gap: 2.5rem;
 align-items: center;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 overflow: hidden;
}.featured-ep-thumb {
 aspect-ratio: 16/9;
 position: relative;
 overflow: hidden;
 cursor: pointer;
}.featured-ep-thumb img {
 width: 100%; height: 100%; object-fit: cover;
 transition: transform.4s;
 display: block;
}.featured-ep-thumb:hover img { transform: scale(1.04); }.featured-ep-play {
 position: absolute; inset: 0;
 background: rgba(9,13,9,.35);
 display: flex; align-items: center; justify-content: center;
}.featured-ep-play-btn {
 width: 72px; height: 72px; border-radius: 50%;
 background: var(--accent); color: #090d09;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.6rem;
 box-shadow: 0 0 40px rgba(245,200,66,.35);
 transition: transform.2s;
}.featured-ep-thumb:hover.featured-ep-play-btn { transform: scale(1.1); }.featured-ep-body { padding: 2rem 2rem 2rem 0; }.featured-ep-body.section-label { margin-bottom:.6rem; }.featured-ep-body h3 {
 font-family: var(--f-display);
 font-size: clamp(1.2rem, 2vw, 1.7rem);
 color: var(--text);
 margin-bottom:.75rem;
 line-height: 1.2;
}.featured-ep-body p { font-size:.9rem; margin-bottom: 1.5rem; }.ep-meta-row {
 display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}.ep-meta-chip {
 font-family: var(--f-mono); font-size:.65rem;
 letter-spacing:.1em; text-transform: uppercase;
 padding:.3rem.75rem; border-radius: var(--r-full);
 background: var(--surface-2); border: 1px solid var(--border);
 color: var(--muted);
}

/* VIDEO WALL GRID */.video-wall {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1rem;
}.video-wall-card {
 border-radius: var(--r-md);
 overflow: hidden;
 position: relative;
 cursor: pointer;
 border: 1px solid var(--border);
 transition: border-color.2s, transform.2s, box-shadow.2s;
}.video-wall-card:hover {
 border-color: var(--border-s);
 transform: translateY(-3px);
 box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(245,200,66,.1);
}.video-wall-card img {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
 display: block;
 transition: transform.4s;
}.video-wall-card:hover img { transform: scale(1.05); }.video-wall-overlay {
 position: absolute; inset: 0;
 background: linear-gradient(to top, rgba(9,13,9,.9) 0%, rgba(9,13,9,.1) 55%, transparent 100%);
 padding:.85rem;
 display: flex; flex-direction: column; justify-content: flex-end;
}.video-wall-tag {
 font-family: var(--f-mono); font-size:.58rem;
 letter-spacing:.14em; text-transform: uppercase;
 color: var(--accent); margin-bottom:.3rem;
}.video-wall-title {
 font-family: var(--f-heading); font-weight: 700;
 font-size:.82rem; color: #fff; line-height: 1.3;
}.video-wall-duration {
 font-family: var(--f-mono); font-size:.62rem;
 color: rgba(255,255,255,.55); margin-top:.25rem;
}

/* PLATFORM ROW */.platform-row {
 display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}.platform-badge {
 display: flex; align-items: center; gap:.5rem;
 padding:.6rem 1.1rem;
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-full);
 font-family: var(--f-heading); font-size:.82rem; font-weight: 600;
 color: var(--text); transition: all.2s; white-space: nowrap;
}.platform-badge:hover {
 border-color: var(--border-s);
 background: var(--surface-2);
 transform: translateY(-1px);
}.platform-badge.dot {
 width: 7px; height: 7px; border-radius: 50%;
 background: var(--accent);
}

/* CONTENT MAGAZINE ROW */.mag-row {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr;
 gap: 1.25rem;
}.mag-card-featured {
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-lg); overflow: hidden;
 transition: border-color.2s, transform.2s;
}.mag-card-featured:hover { border-color: var(--border-s); transform: translateY(-3px); }.mag-card-featured-img {
 width: 100%; aspect-ratio: 16/9;
 background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
 position: relative; overflow: hidden;
}.mag-card-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }.mag-card-featured-body { padding: 1.25rem; }.mag-card-sm {
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-lg); padding: 1.25rem;
 transition: border-color.2s, transform.2s;
 display: flex; flex-direction: column; justify-content: space-between;
}.mag-card-sm:hover { border-color: var(--border-s); transform: translateY(-3px); }.mag-card-sm-thumb {
 width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm);
 overflow: hidden; margin-bottom:.85rem; background: var(--surface-2);
}.mag-card-sm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RESPONSIVE */
@media (max-width: 1024px) {.hero-split { grid-template-columns: 1fr; min-height: auto; }.hero-left { padding: 4rem 0 1.5rem; }.hero-right { min-height: auto; padding: 0 0 3rem; }.featured-ep { grid-template-columns: 1fr; }.featured-ep-body { padding: 0 1.5rem 1.5rem; }.video-wall { grid-template-columns: repeat(2,1fr); }.mag-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {.hero-split { padding: 0 1.5rem; }.hero-stats { gap: 1rem; }.stat-band-item { padding: 0.75rem; min-width: 100px; }.stat-band-num { font-size: 1.4rem; }.video-wall { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {.hero-left h1 { font-size: 2rem; }.stat-band-inner { justify-content: center; }.stat-band-item { border-right: none; border-bottom: 1px solid var(--border); padding:.5rem 1rem; }
}
/* 
 STL SOCCER SECTION All component styles
 */

/* Section scaffold */
#stl-soccer { background:var(--bg); }.stl-container { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; }.stl-section { padding:2rem 0; }.stl-section--alt { padding:2rem 0; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }.stl-section-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }

/* Typography */.stl-heading { font-family:var(--f-display); font-size:clamp(1.6rem,2.5vw,2.4rem); letter-spacing:-.02em; color:var(--text); line-height:1.1; }.stl-subheading { font-family:var(--f-heading); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.4rem); color:var(--text); line-height:1.2; }.stl-eyebrow { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }.stl-muted { color:var(--muted); font-size:.9rem; line-height:1.65; }

/* Buttons */.stl-btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-heading); font-size:.88rem; font-weight:700; padding:.65rem 1.35rem; border-radius:var(--r-md); transition:all.2s; cursor:pointer; border:1px solid transparent; text-decoration:none; }.stl-btn--primary { background:var(--accent); color:#090d09; border-color:var(--accent); }.stl-btn--primary:hover { background:var(--accent-h); }.stl-btn--ghost { background:transparent; color:var(--text); border-color:var(--border-s); }.stl-btn--ghost:hover { background:var(--surface-2); border-color:var(--accent); color:var(--accent); }.stl-btn--sm { padding:.45rem.9rem; font-size:.78rem; }

/* Pills / badges */.stl-pill { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.28rem.8rem; border-radius:var(--r-full); border:1px solid var(--border-s); color:var(--accent); background:var(--accent-bg); display:inline-flex; align-items:center; gap:.35rem; }.stl-pill--win { background:rgba(40,200,80,.12); color:#4ddb80; border-color:rgba(40,200,80,.28); }.stl-pill--draw { background:rgba(200,180,40,.1); color:#f0d040; border-color:rgba(200,180,40,.28); }.stl-pill--loss { background:rgba(220,60,60,.1); color:#f07070; border-color:rgba(220,60,60,.25); }.stl-pill--solid { background:var(--accent); color:#090d09; border-color:var(--accent); font-weight:700; }

/* TICKER */.stl-match-ticker { display:flex; align-items:center; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--border); height:40px; white-space:nowrap; }.stl-ticker-label { flex-shrink:0; padding:0 1rem; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); background:var(--surface-2); border-right:1px solid var(--border); height:100%; display:flex; align-items:center; }.stl-ticker-track { display:flex; align-items:center; gap:2rem; animation:ticker-scroll 40s linear infinite; will-change:transform; }.stl-ticker-track:hover { animation-play-state:paused; }.stl-ticker-item { display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }.stl-ticker-team { font-family:var(--f-heading); font-weight:700; font-size:.78rem; color:var(--text); }.stl-ticker-score { font-family:var(--f-display); font-size:.85rem; color:var(--accent); padding:0.25rem; }.stl-ticker-meta { font-family:var(--f-mono); font-size:.68rem; color:var(--muted); }.stl-ticker-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:blink 1.4s ease-in-out infinite; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* CITY SC HERO BLOCK */.stl-city-hero { background:radial-gradient(ellipse 80% 70% at 80% 40%,rgba(245,200,66,.07) 0%,transparent 60%),var(--bg); padding:2rem 0; border-bottom:1px solid var(--border); }.stl-city-layout { display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:start; }.stl-city-badge { display:flex; flex-direction:column; align-items:center; gap:1.25rem; min-width:180px; }.stl-city-crest { width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,var(--surface-2),var(--surface-3)); border:2px solid rgba(245,200,66,.3); display:flex; align-items:center; justify-content:center; font-size:4rem; box-shadow:0 0 28px rgba(245,200,66,.15); }

/* Season record */.stl-season-record { display:flex; gap:1rem; }.stl-record-item { text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:.6rem.9rem; min-width:52px; }.stl-record-val { font-family:var(--f-display); font-size:1.9rem; color:var(--accent); line-height:1; }.stl-record-label { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }

/* Match cards */.stl-matches-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.25rem; }.stl-match-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:.9rem 1rem; }.stl-match-card-label { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; }.stl-match-teams { font-family:var(--f-heading); font-weight:700; font-size:.92rem; color:var(--text); margin-bottom:.25rem; }.stl-match-teams.vs { color:var(--muted); font-weight:400; margin:0.3rem; }.stl-match-result-score { font-family:var(--f-display); font-size:1.4rem; color:var(--accent); line-height:1; margin:.2rem 0; }.stl-match-detail { font-size:.78rem; color:var(--muted); }

/* Squad chips */.stl-squad-row { display:flex; flex-wrap:wrap; gap:.5rem; }.stl-player-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full); font-size:.78rem; color:var(--text); }.stl-player-chip.num { font-family:var(--f-mono); font-size:.62rem; color:var(--accent); }

/* CITY2 STATS GRID */.stl-city2-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem; }.stl-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:1rem; text-align:center; transition:border-color.2s; }.stl-stat-card:hover { border-color:var(--border-s); }.stl-stat-card.stat-val { font-family:var(--f-display); font-size:1.6rem; color:var(--accent); line-height:1; margin-bottom:.3rem; }.stl-stat-card.stat-label { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* Signing card */.stl-signing-card { display:flex; align-items:flex-start; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:1rem; }.stl-signing-avatar { width:44px; height:44px; border-radius:50%; background:var(--accent-bg); border:1px solid rgba(245,200,66,.2); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }.stl-signing-name { font-weight:700; color:var(--text); margin-bottom:.2rem; }.stl-signing-meta { font-family:var(--f-mono); font-size:.68rem; color:var(--muted); }

/* GRASSROOTS GRID */.stl-grassroots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.stl-community-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; transition:border-color.2s, transform.2s; }.stl-community-card:hover { border-color:var(--border-s); transform:translateY(-2px); }.stl-community-card-top { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.75rem; }.stl-community-icon { font-size:1.6rem; flex-shrink:0; }.stl-community-card-title { font-weight:700; font-size:.9rem; color:var(--text); line-height:1.2; }.stl-community-card-sub { font-family:var(--f-mono); font-size:.62rem; color:var(--muted); margin-top:.15rem; }.stl-growth-pill { display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; padding:.3rem.7rem; background:rgba(245,200,66,.08); border:1px solid rgba(245,200,66,.18); border-radius:var(--r-full); font-family:var(--f-mono); font-size:.62rem; color:var(--accent); }

/* RESPONSIVE */
@media(max-width:1024px){.stl-city-layout { grid-template-columns:1fr; gap:2rem; }.stl-city-badge { flex-direction:row; align-items:flex-start; min-width:unset; }.stl-grassroots-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){.stl-city2-grid { grid-template-columns:repeat(2,1fr); }.stl-matches-row { grid-template-columns:1fr; }.stl-season-record { gap:.6rem; }.stl-record-val { font-size:1.5rem; }.stl-grassroots-grid { grid-template-columns:1fr 1fr; }.stl-city-badge { flex-direction:column; align-items:center; }
}
@media(max-width:400px){.stl-grassroots-grid { grid-template-columns:1fr; }
}

/* stl-city-info flex column for the City SC info side */.stl-city-info { flex:1; min-width:0; }



/* 
 PROFESSIONAL POLISH spacing, typography, card depth
 */

/* Restore readable section padding for non-hero content */.section { padding:3rem 0 !important; }.section--sm { padding:1.75rem 0 !important; }

/* Consistent card depth */.spotlight-card,.stl-community-card,.team-focus,.league-card,.hub-card,.pool-card {
 box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Better blockquote style */
blockquote p { margin:0; }

/* Tighter section header */.section-header { margin-bottom:1.75rem; }.section-header-row { margin-bottom:1.5rem; }

/* Pro nav style better weight distribution */.nav-links a {
 font-size:.82rem !important;
 letter-spacing:.01em;
}

/* CTA strip more compact */.cta-strip {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:1.5rem;
 flex-wrap:wrap;
 background:linear-gradient(135deg, var(--surface-2), var(--surface-3));
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:1.5rem 2rem;
}.cta-strip h3 { font-size:1.1rem; margin-bottom:.25rem; color:var(--text); }.cta-strip p { font-size:.85rem; color:var(--muted); margin:0; }.cta-strip-btns { display:flex; gap:.65rem; flex-wrap:wrap; flex-shrink:0; }

/* About page profile sticky positioning */
@media(max-width:768px) {.grid-2 > div:first-child { position:static !important; }
}

/* embed-wrap for Spotify */.embed-wrap { border-radius:var(--r-md); overflow:hidden; }.embed-wrap iframe { display:block; }

/* platform badge */.platform-badge {
 display:flex;
 align-items:center;
 gap:.75rem;
 padding:.75rem 1rem;
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:var(--r-md);
 font-size:.9rem;
 font-weight:600;
 color:var(--text);
 transition:border-color.2s, transform.2s;
}.platform-badge:hover { border-color:var(--brand-yellow); transform:translateX(3px); }.platform-badge.dot {
 width:8px; height:8px; border-radius:50%;
 background:var(--brand-yellow);
 flex-shrink:0;
 animation:blink 2s infinite;
}

/* Refined table style */
table { border-collapse:collapse; width:100%; }

/* Grid helpers */.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }

/* Footer improvement */
#site-footer { border-top:1px solid var(--border); margin-top:0; }.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; padding:3rem 0 2rem; }.footer-bottom { padding:1.25rem 0; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-family:var(--f-mono); font-size:.62rem; color:var(--muted); gap:1rem; flex-wrap:wrap; }.footer-brand p { font-size:.82rem; color:var(--muted); margin:.5rem 0 1rem; max-width:280px; line-height:1.7; }.footer-col h5 { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text); margin-bottom:.85rem; }.footer-col ul li { margin-bottom:.4rem; }.footer-col ul a { font-size:.85rem; color:var(--muted); transition:color.2s; }.footer-col ul a:hover { color:var(--brand-yellow); }.footer-social { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }.social-icon { width:32px; height:32px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all.2s; }.social-icon:hover { background:var(--brand-yellow); color:#0A0A0A; border-color:var(--brand-yellow); }

/* Section label with accent bar */.section-label::before {
 content:'';
 display:inline-block;
 width:12px;
 height:2px;
 background:var(--brand-yellow);
 vertical-align:middle;
 margin-right:.5rem;
 border-radius:1px;
}

/* Watchalong strip */.watchalong-strip {
 display:inline-flex;
 align-items:center;
 gap:.65rem;
 padding:.5rem.85rem;
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:var(--r-full);
 font-size:.78rem;
 flex-wrap:wrap;
}

@media(max-width:900px) {.footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px) {.footer-inner { grid-template-columns:1fr; }.cta-strip { padding:1.25rem 1rem; }
}


/* 
 UX OVERHAUL v3 Media brand design system
 Magazine cards Live score widgets Retention UI
 Mobile-first Smooth reveals Brand consistency
 */

/* GLOBAL BODY PADDING FOR MOBILE BOTTOM NAV */
@media(max-width:768px){
 body { padding-bottom: 62px !important; }
}

/* NAV tighter, cleaner */
#site-nav {
 height: 60px;
 --nav-h: 60px;
}.nav-inner { padding: 0 1.25rem; }.nav-logo-img{width:42px;height:42px;border-radius:var(--r-sm);border:2px solid rgba(245,200,66,.3);transition:border-color.25s,transform.25s}.nav-logo.logo-main { font-size: 1rem; }.nav-links a { font-size:.8rem; padding:.4rem.7rem; }

/* HERO magazine split layout */.hero-split {
 min-height: auto !important;
 background:
 radial-gradient(ellipse 60% 80% at 100% 0%, rgba(232,48,42,.12) 0%, transparent 55%),
 radial-gradient(ellipse 50% 60% at 0% 100%, rgba(45,184,75,.1) 0%, transparent 55%),
 var(--bg);
 padding: 0;
}.hero-split.container {
 padding-top: calc(60px + 1.75rem) !important;
 padding-bottom: 2rem !important;
}

/* SOCIAL PROOF BAR */.social-proof-bar {
 background: var(--surface);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 height: 34px;
 overflow: hidden;
 display: flex;
 align-items: center;
}.social-proof-track {
 display: flex;
 gap: 2.5rem;
 white-space: nowrap;
 animation: ticker-scroll 40s linear infinite;
 will-change: transform;
}
@keyframes ticker-scroll {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}.social-proof-track:hover { animation-play-state: paused; }.sp-item {
 display: inline-flex;
 align-items: center;
 gap:.5rem;
 font-family: 'JetBrains Mono', monospace;
 font-size:.62rem;
 letter-spacing:.05em;
 color: var(--muted);
}.sp-item strong { color: var(--brand-yellow); }.sp-dot {
 width: 4px; height: 4px;
 border-radius: 50%;
 background: var(--brand-green);
 flex-shrink: 0;
}

/* STAT BAND */.stat-band {
 background: var(--surface-2);
 border-bottom: 1px solid var(--border);
}.stat-band-inner {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 max-width: var(--max-w);
 margin: 0 auto;
 padding: 0 1.5rem;
 divide-x: 1px solid var(--border);
}.stat-band-item {
 display: flex;
 align-items: center;
 gap:.75rem;
 padding:.85rem 2rem;
 border-right: 1px solid var(--border);
 flex-shrink: 0;
}.stat-band-item:last-child { border-right: none; }.stat-band-num {
 font-family: 'Archivo Black', sans-serif;
 font-size: 1.5rem;
 color: var(--brand-yellow);
 line-height: 1;
}.stat-band-text {
 font-family: 'JetBrains Mono', monospace;
 font-size:.6rem;
 letter-spacing:.1em;
 text-transform: uppercase;
 color: var(--muted);
 line-height: 1.4;
}
@media(max-width:640px){.stat-band-item { padding:.7rem 1.25rem; }.stat-band-num { font-size: 1.2rem; }
}

/* EPISODE CARDS magazine style */.ep-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 text-decoration: none;
 position: relative;
 transition: transform.24s cubic-bezier(.34,1.4,.64,1), border-color.2s, box-shadow.2s;
}.ep-card:hover {
 transform: translateY(-6px);
 border-color: var(--border-s);
 box-shadow: 0 20px 48px rgba(0,0,0,.5);
}.ep-card-thumb {
 width: 100%;
 aspect-ratio: 16/9;
 overflow: hidden;
 position: relative;
 background: var(--surface-2);
}.ep-card-thumb img {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 transition: transform.4s ease;
}.ep-card:hover.ep-card-thumb img { transform: scale(1.06); }.ep-card-play {
 position: absolute; inset: 0;
 display: flex; align-items: center; justify-content: center;
 background: rgba(0,0,0,.28);
 opacity: 0; transition: opacity.2s;
}.ep-card:hover.ep-card-play { opacity: 1; }.ep-card-play-btn {
 width: 52px; height: 52px;
 background: var(--brand-yellow);
 color: #0A0A0A;
 border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.2rem;
 box-shadow: 0 4px 24px rgba(245,200,66,.5);
 transform: scale(.9);
 transition: transform.2s;
}.ep-card:hover.ep-card-play-btn { transform: scale(1); }.ep-card-duration {
 position: absolute; bottom:.55rem; right:.55rem;
 background: rgba(0,0,0,.78);
 color: #fff;
 font-family: 'JetBrains Mono', monospace;
 font-size:.58rem; padding:.18rem.55rem;
 border-radius: 999px;
 backdrop-filter: blur(4px);
}.ep-card-new {
 position: absolute; top:.55rem; left:.55rem;
 background: var(--brand-red); color: #fff;
 font-family: 'JetBrains Mono', monospace;
 font-size:.55rem; letter-spacing:.14em;
 text-transform: uppercase;
 padding:.2rem.6rem; border-radius: 999px;
}.ep-card-body {
 padding: 1rem 1.1rem 1.1rem;
 flex: 1; display: flex; flex-direction: column;
}.ep-card-tag {
 font-family: 'JetBrains Mono', monospace;
 font-size:.58rem; letter-spacing:.14em;
 text-transform: uppercase; color: var(--brand-yellow);
 margin-bottom:.4rem;
}.ep-card-title {
 font-family: 'Archivo', sans-serif;
 font-weight: 700; font-size:.92rem;
 color: var(--text); line-height: 1.35;
 flex: 1; margin-bottom:.65rem;
}.ep-card-meta {
 display: flex; align-items: center;
 justify-content: space-between;
 font-family: 'JetBrains Mono', monospace;
 font-size:.6rem; color: var(--muted);
 padding-top:.65rem;
 border-top: 1px solid var(--border);
 margin-top: auto;
}

/* PLATFORM PILLS */.platform-pill {
 display: flex; align-items: center; gap:.9rem;
 padding:.9rem 1.1rem;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 12px;
 text-decoration: none;
 color: var(--text);
 transition: all.2s;
}.platform-pill:hover {
 background: var(--surface-2);
 border-color: var(--border-s);
 transform: translateX(5px);
}.platform-pill-icon { font-size: 1.35rem; flex-shrink: 0; }.platform-pill-name { font-weight: 700; font-size:.88rem; }.platform-pill-sub { font-family: 'JetBrains Mono', monospace; font-size:.6rem; color: var(--muted); }.platform-pill-arrow { margin-left: auto; color: var(--muted); transition: transform.2s, color.2s; }.platform-pill:hover.platform-pill-arrow { transform: translateX(4px); color: var(--brand-yellow); }

/* INTRO / EXPLORE CARDS */.intro-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 1.6rem;
 display: flex; flex-direction: column; gap:.6rem;
 text-decoration: none;
 position: relative; overflow: hidden;
 transition: transform.24s cubic-bezier(.34,1.4,.64,1), border-color.2s, box-shadow.2s;
}.intro-card::before {
 content: '';
 position: absolute; top: 0; left: 0; right: 0; height: 3px;
 background: var(--card-accent, var(--brand-yellow));
}.intro-card::after {
 content: '';
 position: absolute; bottom: 0; right: 0;
 width: 80px; height: 80px;
 background: radial-gradient(circle at 100% 100%, rgba(245,200,66,.06), transparent 70%);
 pointer-events: none;
}.intro-card:hover {
 transform: translateY(-5px);
 border-color: var(--border-s);
 box-shadow: 0 16px 40px rgba(0,0,0,.4);
}.intro-card-icon { font-size: 1.8rem; }.intro-card-title { font-family:'Archivo',sans-serif; font-weight:700; font-size:.95rem; color:var(--text); }.intro-card-desc { font-size:.82rem; color:var(--muted); line-height:1.55; flex:1; }.intro-card-cta { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-yellow); margin-top:.35rem; }

/* QUICK STRIP */.quick-strip {
 display: flex; gap:.45rem;
 overflow-x: auto; scrollbar-width: none;
 padding:.2rem 0;
 -webkit-overflow-scrolling: touch;
}.quick-strip::-webkit-scrollbar { display: none; }.quick-chip {
 display: inline-flex; align-items: center; gap:.35rem;
 padding:.42rem.9rem;
 border-radius: 999px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 color: var(--muted);
 font-family: 'JetBrains Mono', monospace;
 font-size:.62rem; letter-spacing:.07em;
 text-transform: uppercase; white-space: nowrap;
 text-decoration: none;
 transition: all.18s;
 flex-shrink: 0;
}.quick-chip:hover {
 background: var(--brand-yellow);
 color: #0A0A0A;
 border-color: var(--brand-yellow);
 font-weight: 700;
 transform: translateY(-1px);
}

/* WATCHALONG STRIP */.watchalong-strip {
 display: inline-flex; align-items: center; gap:.75rem;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding:.5rem 1rem;
 font-size:.8rem;
 flex-wrap: wrap;
}.watchalong-strip strong { color: var(--text); }

/* NEWSLETTER STRIP */.newsletter-strip {
 background: linear-gradient(135deg, rgba(232,48,42,.12) 0%, rgba(245,200,66,.1) 50%, rgba(45,184,75,.1) 100%);
 border: 1px solid rgba(245,200,66,.22);
 border-radius: 20px;
 padding: 2rem 2.5rem;
 display: flex; align-items: center;
 justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}.newsletter-strip h3 { font-family:'Archivo Black',sans-serif; font-size:1.15rem; color:var(--text); margin-bottom:.25rem; }.newsletter-strip p { font-size:.84rem; color:var(--muted); max-width:340px; }.subscribe-form { display:flex; gap:.5rem; flex-wrap:wrap; min-width:260px; }.subscribe-input {
 flex:1; min-width:170px;
 padding:.62rem 1rem;
 background: rgba(0,0,0,.35);
 border: 1px solid rgba(245,200,66,.28);
 border-radius: 999px;
 color: var(--text);
 font-size:.85rem;
 outline: none;
 transition: border-color.2s;
}.subscribe-input:focus { border-color: var(--brand-yellow); }.subscribe-input::placeholder { color: var(--muted); }

/* CTA STRIP */.cta-strip {
 background: linear-gradient(135deg, rgba(232,48,42,.1), rgba(245,200,66,.08), rgba(45,184,75,.08));
 border: 1px solid rgba(245,200,66,.18);
 border-radius: 16px;
 padding: 1.75rem 2.25rem;
 display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between;
}.cta-strip h3 { font-family:'Archivo Black',sans-serif; font-size:1rem; color:var(--text); margin-bottom:.2rem; }.cta-strip p { font-size:.82rem; color:var(--muted); }.cta-strip-btns { display:flex; gap:.6rem; flex-wrap:wrap; }

/* LATEST BADGE */.latest-badge {
 display: inline-flex; align-items: center; gap:.35rem;
 font-family: 'JetBrains Mono', monospace;
 font-size:.58rem; letter-spacing:.14em; text-transform: uppercase;
 padding:.25rem.7rem; border-radius: 999px;
 background: var(--brand-red); color: #fff;
 animation: latestPulse 2s ease-in-out infinite;
}
@keyframes latestPulse {
 0%,100% { box-shadow: 0 0 0 0 rgba(232,48,42,.4); }
 50% { box-shadow: 0 0 0 6px rgba(232,48,42,0); }
}

/* FLAG CHIPS */.flag-chip {
 display: inline-flex; align-items: center; gap:.35rem;
 font-size:.72rem; padding:.2rem.65rem;
 border-radius: 999px;
 background: var(--surface-2); border: 1px solid var(--border);
 color: var(--muted);
}

/* SECTION HEADER ROW */.section-header-row {
 display: flex; align-items: flex-end; justify-content: space-between;
 flex-wrap: wrap; gap:.75rem; margin-bottom: 1.25rem;
}.section-label {
 font-family: 'JetBrains Mono', monospace;
 font-size:.62rem; letter-spacing:.2em;
 text-transform: uppercase; color: var(--brand-yellow);
 display: block; margin-bottom:.35rem;
}

/* EMBED WRAP */.embed-wrap {
 border-radius: 12px; overflow: hidden;
 border: 1px solid var(--border);
}.embed-wrap iframe { display: block; }

/* SECTION SPACING */.section{padding:2.5rem 0}.section--sm{ padding: 1.75rem 0; }

/* RESPONSIVE GRID FIXES */
@media(max-width:768px){.newsletter-strip { padding:1.5rem; flex-direction:column; text-align:center; }.newsletter-strip p { max-width:100%; }.cta-strip { padding:1.25rem; flex-direction:column; text-align:center; }.cta-strip-btns { justify-content:center; }.hero-split.container { grid-template-columns:1fr !important; }.stat-band-item { padding:.6rem 1rem; }
}
@media(max-width:480px){.stat-band-inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }.stat-band-inner::-webkit-scrollbar { display: none; }
}

/* 
 BRAND SYSTEM MoFutbol logo colors applied site-wide
 */

/* Tri-color stripe under nav */
#site-nav::after {
 content:''; display:block; height:3px;
 background:linear-gradient(90deg,
 var(--brand-red) 0%,var(--brand-red) 33.3%,
 var(--brand-yellow) 33.3%,var(--brand-yellow) 66.6%,
 var(--brand-green) 66.6%,var(--brand-green) 100%
 );
 position:absolute; bottom:-3px; left:0; right:0;
}

/* Button brand */.btn-primary { background:linear-gradient(135deg,var(--brand-yellow),#ffd84f) !important; color:#0A0A0A !important; border:none !important; font-weight:700 !important; }.btn-primary:hover { background:linear-gradient(135deg,#ffd84f,var(--brand-yellow)) !important; box-shadow:0 0 28px rgba(245,200,66,.35) !important; }.btn-ghost { color:var(--brand-yellow) !important; border-color:rgba(245,200,66,.3) !important; }.btn-ghost:hover { background:rgba(245,200,66,.1) !important; border-color:var(--brand-yellow) !important; }

/* Accent text */.accent { color:var(--brand-yellow) !important; }.section-label,.eyebrow,.stl-eyebrow { color:var(--brand-yellow) !important; }

/* Hero brand corners */
/* hero::before handled below */

/* Sub-nav active */.sub-nav a.active,.sub-nav a[aria-current="page"] { border-bottom-color:var(--brand-yellow) !important; color:var(--brand-yellow) !important; }

/* Scrollbar brand */
::-webkit-scrollbar-thumb { background:linear-gradient(var(--brand-red),var(--brand-yellow),var(--brand-green)) !important; }

/* Body pitch texture */
body {
 background-image:
 radial-gradient(circle, rgba(45,184,75,.05) 1px, transparent 1px),
 repeating-linear-gradient(-45deg,transparent,transparent 80px,rgba(45,184,75,.02) 80px,rgba(45,184,75,.02) 81px);
 background-size: 28px 28px, auto;
}

/* Spotlight card brand borders */.spotlight-card:nth-child(3n+1) { border-left:3px solid var(--brand-yellow) !important; }.spotlight-card:nth-child(3n+2) { border-left:3px solid var(--brand-green) !important; }.spotlight-card:nth-child(3n+3) { border-left:3px solid var(--brand-red) !important; }

/* STL ticker brand */.stl-ticker-label { background:linear-gradient(135deg,var(--brand-red),var(--brand-yellow)) !important; color:#0A0A0A !important; font-weight:700 !important; }

/* Footer brand stripe */
#site-footer::before { content:''; display:block; height:4px; background:linear-gradient(90deg,var(--brand-red),var(--brand-yellow),var(--brand-green)); }
#site-footer { background:var(--brand-black); border-top:none; }

/* Dropdown hover fallback with delay */.nav-dropdown:focus-within.nav-dropdown-menu {
 opacity: 1;
 pointer-events: all;
 transform: translateY(0);
}
/* 
 MOFUTBOL DESIGN OVERHAUL
 Hero 50% smaller + topic background images
 Typography scaled down 50%
 Tighter professional spacing
 Soccer pitch backgrounds with brand gradients
 "Studio" removed from display text
 */

/* TYPOGRAPHY halved from original */


/* HERO compact sizing */.hero {
 min-height: 13vh !important;
 padding: 0 !important;
}.hero-content {
 padding:.75rem 0.65rem !important;
 position: relative; z-index: 2;
}.hero-split {
 min-height: auto !important;
}.hero-split.container {
 padding-top: calc(60px +.85rem) !important;
 padding-bottom: 1rem !important;
}.hero.hero-pills { margin-bottom:.35rem !important; }.hero.hero-ctas { gap:.4rem !important; margin-bottom:.4rem !important; }.hero h1 { margin-bottom:.3rem !important; }.hero-desc {
 font-size:.78rem !important;
 margin-bottom:.6rem !important;
 max-width: 440px;
}.watchalong-strip { padding:.3rem.7rem !important; font-size:.68rem !important; }

/* Hero background overlay for image pages */.hero::before {
 content: '';
 position: absolute; inset: 0; z-index: 1;
 background: linear-gradient(
 135deg,
 rgba(8,12,8,.88) 0%,
 rgba(8,12,8,.72) 45%,
 rgba(8,12,8,.45) 75%,
 rgba(8,12,8,.18) 100%
 );
 pointer-events: none;
}
/* For pages without images, use a solid dark overlay */.hero-no-img::before {
 background: rgba(8,12,8,.7);
}

/* GLOBAL SOCCER BACKGROUND SYSTEM */

/* Base body pitch hex pattern */
body {
 background-color: var(--bg) !important;
 background-image:
 /* Pitch center circle ghost */
 radial-gradient(ellipse 60% 40% at 50% 100%, rgba(45,184,75,.04) 0%, transparent 55%),
 /* Diagonal grass stripe */
 repeating-linear-gradient(
 -60deg,
 transparent 0px, transparent 38px,
 rgba(45,184,75,.025) 38px, rgba(45,184,75,.025) 39px
 ),
 /* Subtle dot grid */
 radial-gradient(circle, rgba(245,200,66,.05) 1px, transparent 1px) !important;
 background-size: auto, auto, 24px 24px !important;
}

/* Nav background darker + cleaner */
#site-nav {
 background: rgba(5,8,5,.97) !important;
 backdrop-filter: blur(20px);
 height: 54px !important;
 --nav-h: 54px !important;
 border-bottom: 1px solid rgba(45,184,75,.12) !important;
}

/* HERO BACKGROUNDS BY PAGE TYPE */

/* STL City / MLS hero stadium atmosphere */.hero-stl,.hero-mls {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.38) 100%),
 url('https://images.unsplash.com/photo-1459865264687-595d652de67e?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* STL City SC page hero */.stl-city-hero {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.88) 0%, rgba(6,10,6,.55) 55%, rgba(6,10,6,.25) 100%),
 url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
 padding: 1rem 0 !important;
 border-bottom: 1px solid var(--border);
}
/* Compact stl-city-hero internals */.stl-city-layout { gap: 1.5rem !important; }.stl-city-badge { gap:.6rem !important; min-width: 130px !important; }.stl-city-crest { width: 80px !important; height: 80px !important; font-size: 2.4rem !important; }.stl-season-record { gap:.35rem !important; }.stl-record-val { font-size: 1.3rem !important; }.stl-record-label{ font-size:.55rem !important; }.stl-heading { font-size: clamp(1.1rem, 2.2vw, 1.9rem) !important; margin-bottom:.35rem !important; }.stl-muted { font-size:.8rem !important; margin-bottom:.5rem !important; }.stl-eyebrow { font-size:.58rem !important; margin-bottom:.3rem !important; }

/* WPSL / Women's Premier League */.hero-wpsl,.hero-women {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
}

/* Soccer hub hero global soccer, world cup scale, packed crowd */.hero-soccer {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.88) 0%, rgba(6,10,6,.60) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1560272564-c83b66b1ad12?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
}

/* World Cup hero stadium bowl packed crowd */.hero-wc {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.38) 100%),
 url('https://images.unsplash.com/photo-1508098682722-e99c43a406b2?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* Africa hero grassroots/street soccer with warm overlay */.hero-africa {
 background-image:
 linear-gradient(135deg, rgba(8,12,8,.85) 0%, rgba(40,20,5,.65) 40%, rgba(8,12,8,.45) 100%),
 url('https://images.unsplash.com/photo-1489944440615-453fc2b6a9a9?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 50% !important;
}

/* Europe hero Champions League */.hero-europe {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1553778263-73a83bab9b0c?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
}

/* STL Soccer hub players in match */.hero-stl-soccer {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.88) 0%, rgba(6,10,6,.60) 50%, rgba(6,10,6,.32) 100%),
 url('https://images.unsplash.com/photo-1551958219-acbc595d9571?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 25% !important;
}

/* Midwest PL / outdoor grass pitch */.hero-mwpl {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.88) 0%, rgba(6,10,6,.60) 50%, rgba(6,10,6,.32) 100%),
 url('https://images.unsplash.com/photo-1431324155629-1a6deb1dec8d?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* High school hero */.hero-hs {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1580168586882-0e73e7ac04f6?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* Youth soccer young players, grassroots training */.hero-youth {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.88) 0%, rgba(6,10,6,.60) 50%, rgba(6,10,6,.32) 100%),
 url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
}

/* Podcast / Media soccer matchday atmosphere */.hero-podcast,.hero-media {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.65) 50%, rgba(6,10,6,.40) 100%),
 url('https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* About grassroots soccer / community pitch */.hero-about {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.65) 50%, rgba(6,10,6,.38) 100%),
 url('https://images.unsplash.com/photo-1551958219-acbc595d9571?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* Events stadium crowd / matchday */.hero-events {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.65) 50%, rgba(6,10,6,.38) 100%),
 url('https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
}

/* NWSL women's professional soccer action */.hero-nwsl {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1602572059510-9ec7de136f90?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* Ambush / Indoor soccer arena */.hero-ambush {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.92) 0%, rgba(6,10,6,.65) 55%, rgba(6,10,6,.38) 100%),
 url('https://images.unsplash.com/photo-1577223625816-7546f13df25d?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* Clubs / Pathways */.hero-clubs,.hero-pathways {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.88) 0%, rgba(6,10,6,.60) 50%, rgba(6,10,6,.32) 100%),
 url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* Champions League / HS Champs */.hero-cl {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1546608235-3310a2494cdf?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* USL Championship */.hero-usl {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.62) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 35% !important;
}

/* STL Champions League high school soccer / prep stadium */.hero-champions-league {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.90) 0%, rgba(6,10,6,.65) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1526234805723-5a7c89f6b3b3?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* STL City 2 MLS Next Pro development */.hero-city2 {
 background-image:
 linear-gradient(135deg, rgba(6,10,6,.92) 0%, rgba(6,10,6,.65) 50%, rgba(6,10,6,.35) 100%),
 url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* SECTION SPACING tighter professional */.section { padding: 1.75rem 0 !important; }.section--sm { padding: 1.1rem 0 !important; }.section-header { margin-bottom: 1rem !important; }.section-header-row { margin-bottom: 1rem !important; }.container { padding: 0 1.25rem !important; }

/* CARD SYSTEM tighter */.spotlight-card,.ep-card-body,.intro-card,.platform-pill,.article-card,.story-card-body {
 padding:.85rem !important;
}.ep-card-title { font-size:.82rem !important; }.ep-card-tag { font-size:.52rem !important; }.ep-card-meta { font-size:.55rem !important; }

/* STAT BAND compact */.stat-band-item { padding:.55rem 1.25rem !important; }.stat-band-num { font-size: 1.2rem !important; }.stat-band-text { font-size:.52rem !important; }

/* NAV compact */.nav-inner { padding: 0 1.25rem !important; }





/* CTA STRIP compact */.cta-strip { padding: 1.1rem 1.5rem !important; }.cta-strip h3 { font-size:.92rem !important; }.cta-strip p { font-size:.75rem !important; }

/* NEWSLETTER STRIP */.newsletter-strip { padding: 1.25rem 1.75rem !important; }.newsletter-strip h3 { font-size:.95rem !important; }

/* FOOTER */.footer-col h5 { font-size:.72rem !important; }.footer-col ul li a { font-size:.72rem !important; }.footer-brand p { font-size:.72rem !important; }.footer-bottom { font-size:.58rem !important; }

/* TABLE COMPACT */.data-table th,.data-table td,.fx-table th,.fx-table td,.pool-table th,.pool-table td,.standings-tbl th,.standings-tbl td {
 padding:.4rem.65rem !important;
 font-size:.75rem !important;
}

/* SOCIAL PROOF BAR */.social-proof-bar { height: 28px !important; }.sp-item { font-size:.55rem !important; }

/* BOTTOM NAV */.bb-item { font-size:.48rem !important; }.bb-icon { font-size: 1rem !important; }

/* BRAND GRADIENT DIVIDER */
section + section::before {
 content: '';
 display: block;
 height: 1px;
 background: linear-gradient(90deg,
 transparent 0%,
 rgba(232,48,42,.2) 20%,
 rgba(245,200,66,.3) 50%,
 rgba(45,184,75,.2) 80%,
 transparent 100%
 ) !important;
 opacity: 1 !important;
}

/* MATCH TICKER tighter */.stl-match-ticker { height: 32px !important; }.stl-ticker-item { font-size:.62rem !important; }.stl-ticker-label { font-size:.55rem !important; padding:.2rem.65rem !important; }

/* WATCHALONG STRIP */.watchalong-strip { 
 gap:.5rem !important;
 padding:.38rem.85rem !important; 
 font-size:.7rem !important; 
}

/* Responsive adjustments */
@media(max-width:768px){.hero { min-height: 22vh !important; }
}

/* ENSURE ALL INNER HEROES HAVE BACKGROUND 
 Any.hero inside Soccer/STL/MLS sub-pages that still has no
 explicit image gets a subtle pitch-pattern fallback gradient
 */.hero:not([class*="hero-stl"]):not([class*="hero-mls"]):not([class*="hero-soccer"])
 :not([class*="hero-wc"]):not([class*="hero-africa"]):not([class*="hero-europe"])
 :not([class*="hero-hs"]):not([class*="hero-youth"]):not([class*="hero-podcast"])
 :not([class*="hero-media"]):not([class*="hero-about"]):not([class*="hero-events"])
 :not([class*="hero-ambush"]):not([class*="hero-clubs"]):not([class*="hero-pathways"])
 :not([class*="hero-cl"]):not([class*="hero-nwsl"]):not([class*="hero-women"]) {
 background-image:
 url('https://images.unsplash.com/photo-1551958219-acbc595d9571?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 25% !important;
}

/* Hero-split (index page) background */.hero-split.hero-stl {
 background-image:
 url('https://images.unsplash.com/photo-1459865264687-595d652de67e?w=1400&q=60&auto=format') !important;
 background-size: cover !important;
 background-position: center 30% !important;
}

/* NAV HOVER ANIMATIONS */.nav-logo:hover { opacity:.88; }.nav-logo:hover.nav-logo-img {
 border-color: var(--brand-yellow);
 transform: scale(1.07) rotate(-2deg);
}.nav-logo:hover.logo-main { color: var(--brand-yellow); }

/* Nav link hover lift + underline reveal */.nav-links a::after {
 content: '';
 position: absolute;
 bottom: 4px; left: 50%; right: 50%;
 height: 2px;
 background: var(--brand-yellow);
 transition: left.22s ease, right.22s ease;
 border-radius: 2px;
}.nav-links a:hover::after,.nav-links a.active::after { left: 8px; right: 8px; }.nav-links a:hover { color: var(--text) !important; transform: translateY(-1px); }.nav-links a.active { color: var(--text) !important; }

/* STL Soccer link golden */.nav-links.nav-stl::after { background: var(--brand-yellow); }.nav-links.nav-stl:hover { color: var(--brand-yellow) !important; }

/* Dropdown arrow animated */.nav-dropdown > a::after { content: ' '; font-size:.6rem; transition: transform.2s; display: inline-block; }.nav-dropdown.open > a::after,.nav-dropdown:focus-within > a::after { transform: rotate(180deg); }

/* Dropdown menu hover */.nav-dropdown-menu a:hover {
 background: var(--surface-2);
 color: var(--brand-yellow) !important;
 padding-left: 1.2rem;
}

/* Logo image pulse animation on page load */
@keyframes logoPulse {
 0% { box-shadow: 0 0 0 0 rgba(245,200,66,.5); }
 70% { box-shadow: 0 0 0 8px rgba(245,200,66,0); }
 100% { box-shadow: 0 0 0 0 rgba(245,200,66,0); }
}.nav-logo-img { animation: logoPulse 2.5s ease 0.8s 1; }

/* Hamburger hover */.hamburger:hover { background: var(--surface-3); }.hamburger span { transition: transform.3s, opacity.3s, background.2s; }.hamburger:hover span { background: var(--brand-yellow); }

/* USL United Soccer League, club soccer atmosphere */.hero-usl {
 background-image:
 url('https://images.unsplash.com/photo-1569974507005-6dc61f97fb9c?w=1400&q=80&auto=format') !important;
 background-size: cover !important;
 background-position: center 40% !important;
}

/* HERO SIZE CLAMP overrides any inline min-height */
/* Catches pages with inline style="min-height:42vh" etc. */
section[class*="hero"],.stl-city-hero {
 min-height: 0 !important;
 max-height: none !important;
}
/* Hero content inner padding override inline padding too */.stl-city-hero.stl-container,.stl-city-hero >.stl-container {
 padding-top:.85rem !important;
 padding-bottom:.85rem !important;
}