:root{
  --bg:#07090d;--panel:#111722;--panel2:#161d29;--line:#2a3444;--text:#f4f6fb;--muted:#aeb8c8;--gold:#ffdf57;--red:#e9463b;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 20% 0%,#18202d 0,#07090d 42%,#050608 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-header{position:sticky;top:0;z-index:30;background:rgba(5,6,8,.94);border-bottom:1px solid #202733;backdrop-filter:blur(12px)}
.header-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:24px}
.brand{display:flex;align-items:center;gap:14px;font-weight:900;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.brand img{height:42px;width:auto;object-fit:contain}
.nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:#d5d9e2}
.nav a.active,.nav a:hover{color:var(--gold)}
.wrap{max-width:var(--max);margin:auto;padding:0 18px}
.hero{padding:70px 0 64px;border-bottom:1px solid #202733}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.eyebrow,.section-kicker{display:inline-block;color:#0b0e13;background:var(--gold);font-weight:950;text-transform:uppercase;letter-spacing:.14em;border-radius:8px;padding:8px 12px;font-size:12px}
.section-kicker{background:transparent;color:var(--gold);padding:0}
.h1,h1{font-size:clamp(46px,8vw,86px);line-height:.96;margin:22px 0 20px;font-weight:950;letter-spacing:-.045em;text-transform:uppercase}
h2{font-size:clamp(32px,5vw,58px);line-height:1.02;margin:8px 0 20px;font-weight:900;letter-spacing:-.035em;text-transform:uppercase}
h3{font-size:24px;line-height:1.18;margin:0 0 10px}
.lead{font-size:20px;color:#d4d9e4;max-width:740px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #334054;background:#151c28;border-radius:9px;padding:12px 18px;font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.btn.primary{background:var(--gold);color:#050608;border-color:var(--gold)}
.visual-card{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid #313a49;border-radius:24px;padding:30px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.visual-card img{margin:auto;max-height:210px;object-fit:contain}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.stat{background:#090d15;border:1px solid #273142;border-radius:12px;padding:14px}
.stat strong{display:block;color:var(--gold);font-size:28px;line-height:1}
.stat span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#cfd6e3}
.section{padding:56px 0;border-bottom:1px solid #1d2531}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;background:linear-gradient(145deg,#151c28,#0d121b);border:1px solid #2b3546;border-radius:18px;padding:24px;min-height:150px;overflow:hidden}
.card:hover{border-color:#536176;transform:translateY(-2px);transition:.18s ease}
.card small{display:block;color:var(--gold);font-weight:950;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.card p{color:#c4ccd8;margin:0}
.team-card .team-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.flag{width:42px;height:28px;border-radius:4px;border:1px solid rgba(255,255,255,.28);object-fit:cover;flex:0 0 auto}
.flag.big{width:68px;height:45px}
.pill{display:inline-flex;margin-top:14px;border:1px solid #3b465a;border-radius:999px;padding:5px 12px;color:#d6dcea;font-size:12px;font-weight:900;text-transform:uppercase}
.group-title{margin-top:42px;margin-bottom:14px;color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:18px}
.group-card{min-height:220px}
.group-list{display:grid;gap:10px;margin-top:18px}
.country-link{display:flex;align-items:center;gap:10px;color:#f4f6fb;font-weight:850}
.country-link:hover span{text-decoration:underline}
.match-list{display:grid;gap:12px}
.match-card{display:grid;grid-template-columns:135px 1fr 170px 220px;gap:16px;align-items:center;background:#111822;border:1px solid #2a3444;border-radius:14px;padding:16px}
.match-teams{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:900}
.vs{color:var(--gold);font-weight:950}
.match-date strong{display:block;color:var(--gold)}
.match-date span,.match-meta{color:#aeb8c8}
.team-hero-img{border-radius:24px;border:1px solid #303a49;background:#101723;padding:10px}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.fact{background:#111822;border:1px solid #2b3546;border-radius:14px;padding:16px}
.fact span{display:block;color:#aeb8c8;font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:900}
.fact strong{font-size:22px}
.timeline{position:relative;margin-top:36px;padding-left:48px}
.timeline:before{content:"";position:absolute;left:16px;top:4px;bottom:8px;width:3px;background:linear-gradient(var(--gold),rgba(255,223,87,.1))}
.timeline-item{position:relative;margin:0 0 28px}
.timeline-item:before{content:"";position:absolute;left:-41px;top:8px;width:22px;height:22px;border-radius:50%;background:#0b0e13;border:4px solid var(--gold);box-shadow:0 0 0 3px rgba(255,223,87,.18)}
.timeline-item .year{color:var(--gold);font-size:30px;font-weight:950;line-height:1}
.timeline-item strong{display:block;font-size:18px;margin:4px 0;color:#fff}
.timeline-item p{color:#aeb8c8;margin:0}
.faq details{border-top:1px solid #293343;padding:18px 0}
.faq details:last-child{border-bottom:1px solid #293343}
.faq summary{cursor:pointer;font-weight:900;font-size:17px}
.faq p{color:#c5cedb;margin:12px 0 0}
.table-wrap{overflow:auto;border:1px solid #2a3444;border-radius:16px}
table{width:100%;border-collapse:collapse;background:#101721}
th,td{text-align:left;padding:14px;border-bottom:1px solid #253043;vertical-align:top}
th{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
td{color:#dbe2ed}
.team-inline{display:flex;align-items:center;gap:8px;white-space:nowrap}
.site-footer{padding:36px 0;color:#9ea9bb}
.site-footer a{color:var(--gold)}
.qa-box{background:#111822;border:1px solid #2a3444;border-radius:16px;padding:20px;color:#c7d0dc}
@media (max-width:900px){
 .hero-grid,.grid,.grid.three{grid-template-columns:1fr}
 .nav{gap:12px}.nav a{font-size:12px}
 .match-card{grid-template-columns:1fr}
 .stats,.fact-grid{grid-template-columns:repeat(2,1fr)}
 .h1,h1{font-size:44px}
}

/* v11 fix: group cards cannot be anchors because they contain country links */
.group-card{display:flex;flex-direction:column;gap:8px;min-height:260px}
.group-card .group-list{margin-top:8px;display:grid;gap:10px}
.group-card .group-btn{margin-top:auto;align-self:flex-start}
.grid.three .group-card{min-height:260px}


/* v12 final link cleanup */
.group-card h3 a,.team-card h3 a{color:inherit;text-decoration:none}
.group-card h3 a:hover,.team-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.match-teams .team-inline{font-weight:900}
.table-wrap .team-inline{font-weight:850;color:#f4f6fb}
