:root {
    --fi-red: #ff1616;
    --fi-blue: #3852f5;
    --fi-green: #2ef068;
    --fi-burgundy: #c51e4b;
    --fi-ink: #101116;
    --fi-ink-2: #242733;
    --fi-muted: #687083;
    --fi-line: #dfe4ee;
    --fi-surface: #ffffff;
    --fi-wash: #f2f5fa;
    --fi-dark: #090b10;
    --fi-radius: 8px;
    --fi-shadow: 0 24px 70px rgba(16, 17, 22, .12);
    --fi-max: 1240px;
}

body {
    color: var(--fi-ink);
    background: var(--fi-surface);
    font-family: Urbanist, system-ui, sans-serif;
    letter-spacing: 0;
}

.wrap { width: min(var(--fi-max), calc(100% - 40px)); }
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--fi-line); }
.header-inner { min-height: 88px; }
.primary-nav a { font-size: 15px; color: var(--fi-ink-2); padding: 12px 14px; }
.primary-nav a:hover { background: #eef2ff; color: var(--fi-blue); }

.home-stage {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 132px) 0;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(9,11,16,.96), rgba(9,11,16,.74)),
        radial-gradient(circle at 70% 20%, rgba(46,240,104,.35), transparent 32%),
        linear-gradient(135deg, #101116, #20305f 55%, #111217);
}
.home-stage:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 54px 54px;
}
.home-stage-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 56px; align-items: center; }
.home-copy h1 { color: #fff; font-size: clamp(52px, 7vw, 94px); max-width: 880px; letter-spacing: 0; }
.home-copy p:not(.eyebrow) { color: #dce2ee; font-size: 21px; max-width: 700px; }
.home-stage .button-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }

.live-board {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--fi-radius);
    background: rgba(255,255,255,.08);
    box-shadow: var(--fi-shadow);
    backdrop-filter: blur(18px);
}
.live-board header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: #cfd7e8; font-weight: 900; }
.live-board header strong { color: var(--fi-green); }
.board-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.board-stats a { min-height: 126px; padding: 18px; border-radius: var(--fi-radius); background: #fff; color: var(--fi-ink); display: flex; flex-direction: column; justify-content: end; }
.board-stats strong { font-size: 48px; line-height: .9; }
.board-stats span { color: var(--fi-muted); font-weight: 900; }
.board-match { margin-top: 12px; padding: 18px; border-radius: var(--fi-radius); background: #0b0d12; }
.board-match strong, .board-match span { display: block; }
.board-match strong { font-size: 24px; }
.board-match span { color: #cbd3df; margin-top: 4px; }

.section { padding: clamp(64px, 8vw, 108px) 0; }
.section.muted, .data-page { background: var(--fi-wash); }
.section-head { margin-bottom: 30px; }
.section-head h2 { max-width: 780px; }
.eyebrow { color: var(--fi-red); font-weight: 950; }
.button { border-radius: var(--fi-radius); min-height: 48px; padding: 13px 18px; }
.button-primary { background: var(--fi-red); color: #fff; }
.button-secondary { background: #fff; border: 1px solid var(--fi-line); color: var(--fi-ink); }

.command-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.command-grid a {
    min-height: 260px;
    padding: 24px;
    border-radius: var(--fi-radius);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--fi-dark);
    box-shadow: 0 18px 38px rgba(16,17,22,.13);
}
.command-grid a:nth-child(2) { background: var(--fi-blue); }
.command-grid a:nth-child(3) { background: var(--fi-burgundy); }
.command-grid a:nth-child(4) { background: #0e9342; }
.command-grid span { color: rgba(255,255,255,.7); font-weight: 900; text-transform: uppercase; font-size: 12px; }
.command-grid strong { font-size: 34px; line-height: 1; }
.command-grid em { color: rgba(255,255,255,.82); font-style: normal; font-weight: 750; }

.data-hero {
    color: #fff;
    padding: clamp(62px, 8vw, 104px) 0;
    background:
        radial-gradient(circle at 78% 24%, rgba(56,82,245,.42), transparent 30%),
        linear-gradient(135deg, #090b10, #18213e 70%, #090b10);
}
.data-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 46px; align-items: end; }
.data-hero h1 { color: #fff; font-size: clamp(48px, 6.8vw, 86px); max-width: 850px; }
.data-hero p:not(.eyebrow) { color: #d8e0ed; font-size: 20px; max-width: 760px; }
.hero-stat-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-stat-wall div { min-height: 110px; padding: 18px; border-radius: var(--fi-radius); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.hero-stat-wall strong, .hero-stat-wall span { display: block; }
.hero-stat-wall strong { color: var(--fi-green); font-size: 42px; line-height: 1; }
.hero-stat-wall span { color: #d6dfed; font-weight: 850; }

.data-command.elevated, .data-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius);
    box-shadow: 0 14px 36px rgba(16,17,22,.06);
}
.data-search { max-width: 440px; min-height: 50px; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); font-weight: 850; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-filters button {
    min-width: 42px;
    min-height: 40px;
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius);
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}
.quick-filters button:hover { border-color: var(--fi-blue); color: var(--fi-blue); }

.data-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.data-sidebar { position: sticky; top: 112px; padding: 20px; background: #fff; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); box-shadow: 0 14px 36px rgba(16,17,22,.06); }
.data-sidebar h2 { font-size: 24px; }
.data-sidebar .data-search { max-width: none; margin-bottom: 14px; }
.data-sidebar p { color: var(--fi-muted); font-weight: 700; }

.team-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.team-tile {
    background: #fff;
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius);
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(16,17,22,.06);
}
.team-tile-main { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; align-items: center; }
.team-tile h2 { font-size: 28px; margin-bottom: 6px; }
.team-tile p { color: var(--fi-muted); margin: 0; font-weight: 750; }
.tile-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--fi-line); border-bottom: 1px solid var(--fi-line); }
.tile-metrics span { padding: 12px 18px; color: var(--fi-muted); font-weight: 850; }
.tile-metrics span + span { border-left: 1px solid var(--fi-line); }
.tile-metrics strong { color: var(--fi-ink); font-size: 20px; }
.tile-actions { display: grid; grid-template-columns: 1fr 1fr; }
.tile-actions a { padding: 14px 18px; font-weight: 950; color: var(--fi-red); }
.tile-actions a + a { border-left: 1px solid var(--fi-line); color: var(--fi-blue); }

.flag-frame { width: 74px; height: 54px; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); overflow: hidden; background: #fff; }
.flag-frame.small { width: 48px; height: 34px; }
.flag-frame.large { width: 180px; height: 124px; }
.flag-frame img { width: 100%; height: 100%; object-fit: cover; }

.group-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.group-panel { background: #fff; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); overflow: hidden; box-shadow: 0 14px 36px rgba(16,17,22,.06); }
.group-panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: var(--fi-dark); color: #fff; }
.group-panel header span { font-size: 22px; font-weight: 950; }
.group-panel header a { color: var(--fi-green); font-weight: 950; }
.group-team-list { display: grid; }
.group-team-list a { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--fi-line); align-items: center; }
.group-team-list strong, .group-team-list em { display: block; }
.group-team-list em { grid-column: 2; color: var(--fi-muted); font-style: normal; }

.fixtures-timeline { display: grid; gap: 12px; }
.fixture-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); box-shadow: 0 10px 24px rgba(16,17,22,.045); }
.fixture-date { width: 68px; min-height: 76px; display: grid; place-items: center; align-content: center; border-radius: var(--fi-radius); color: #fff; background: var(--fi-dark); }
.fixture-date span { color: var(--fi-green); font-size: 13px; font-weight: 950; text-transform: uppercase; }
.fixture-date strong { font-size: 30px; line-height: 1; }
.fixture-main h2 { font-size: 25px; margin-bottom: 6px; }
.fixture-main h2 span { color: var(--fi-red); font-size: 13px; text-transform: uppercase; }
.fixture-main p { color: var(--fi-muted); margin: 0; font-weight: 750; }

.player-board { background: #fff; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); overflow: hidden; box-shadow: 0 14px 36px rgba(16,17,22,.06); }
.player-row { display: grid; grid-template-columns: 1.35fr 1fr 64px 64px 1.1fr 1fr; gap: 12px; padding: 13px 16px; align-items: center; border-top: 1px solid var(--fi-line); color: var(--fi-ink); }
.player-row:first-child { border-top: 0; }
.player-row:hover:not(.player-head) { background: #f8faff; }
.player-head { position: sticky; top: 88px; z-index: 2; background: var(--fi-dark); color: #fff; font-weight: 950; text-transform: uppercase; font-size: 12px; }
.player-row b { display: inline-flex; width: 44px; height: 34px; align-items: center; justify-content: center; border-radius: 99px; background: #ecfff2; color: #137a39; }
.player-row em { color: var(--fi-burgundy); font-style: normal; font-weight: 850; }
.team-hero-pro { background: radial-gradient(circle at 80% 18%, rgba(46,240,104,.2), transparent 30%), linear-gradient(135deg, #090b10, #1c2b52 65%, #090b10); }
.team-layout { align-items: start; }
.identity-panel { box-shadow: var(--fi-shadow); }
.player-table-wrap { background: #fff; box-shadow: 0 14px 36px rgba(16,17,22,.06); }
.player-table a { color: var(--fi-blue); text-decoration: none; }
.player-table a:hover { color: var(--fi-red); }
.side-fixture { border-radius: var(--fi-radius); padding: 14px; margin-bottom: 10px; background: var(--fi-wash); border: 1px solid transparent; }
.side-fixture:hover { border-color: var(--fi-blue); background: #fff; }

.mini-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-group { padding: 16px; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); background: #fff; }
.mini-group strong, .mini-group span { display: block; }
.mini-group strong { color: var(--fi-blue); margin-bottom: 6px; }
.mini-group span { color: var(--fi-muted); font-weight: 750; }
.venue-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.venue-strip a { min-height: 160px; padding: 20px; background: #fff; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); display: flex; flex-direction: column; justify-content: space-between; }
.venue-strip span { color: var(--fi-red); font-weight: 950; text-transform: uppercase; font-size: 12px; }
.venue-strip strong { font-size: 24px; line-height: 1.05; }
.venue-strip em { color: var(--fi-muted); font-style: normal; font-weight: 750; }

@media (max-width: 1040px) {
    .home-stage-grid, .data-hero-grid, .data-shell { grid-template-columns: 1fr; }
    .data-sidebar { position: static; }
    .command-grid, .team-mosaic, .group-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .wrap { width: min(100% - 24px, var(--fi-max)); }
    .home-stage { padding: 52px 0; }
    .home-copy h1, .data-hero h1 { font-size: 44px; }
    .board-stats, .hero-stat-wall, .command-grid, .team-mosaic, .group-matrix, .mini-group-grid, .venue-strip { grid-template-columns: 1fr; }
    .data-command.elevated, .data-command { align-items: stretch; flex-direction: column; }
    .fixture-row { grid-template-columns: 1fr; }
    .fixture-date { width: 100%; min-height: 64px; display: flex; gap: 8px; }
    .player-board { overflow-x: auto; }
    .player-row { min-width: 860px; }
    .site-header { position: sticky; }
}