:root{
      --dark:#0b1220;
      --darker:#020617;
      --blue:#2563eb;
      --blue-soft:#eaf1ff;
      --text:#0f172a;
      --muted:#64748b;
      --border:#e5e7eb;
      --card:#ffffff;
      --radius:18px;
      --shadow:0 12px 30px rgba(0,0,0,.08);
      --shadow-strong:0 20px 45px rgba(0,0,0,.18);
      --max:1120px;
      --glass:rgba(255,255,255,0.55);
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:#f8fafc;
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    .container{width:min(var(--max),calc(100% - 32px));margin:0 auto}

    /* ================= NAV (Sticky) ================= */
    /* nav.php uses these classes */
    .nav{
      position:sticky; top:0; z-index:999;
      background:linear-gradient(135deg,#081a3a,#0b3a6f,#020617);
      box-shadow:0 10px 30px rgba(0,0,0,.45);
    }
    .nav-inner{
      height:72px;
      display:flex; align-items:center; justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900; letter-spacing:.4px;
      white-space:nowrap;
    }
    .brand-badge{
      width:34px;height:34px;border-radius:10px;
      background:linear-gradient(135deg,#60a5fa,#2563eb);
      box-shadow:0 10px 25px rgba(37,99,235,.35);
    }
    .brand span{color:#93c5fd}
    .links{
      display:flex; align-items:center; gap:24px;
      font-size:14px; font-weight:600;
    }
    .links a{
      color:#fff; opacity:.95; position:relative; padding:10px 2px;
    }
    .links a::after{
      content:""; position:absolute; left:0; bottom:2px;
      width:0; height:2px; background:#3b82f6; transition:.25s;
    }
    .links a:hover::after{width:100%}

    .hamburger{display:none; width:44px; height:44px; border-radius:14px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      align-items:center; justify-content:center; cursor:pointer;
    }
    .hamburger div{display:flex; flex-direction:column; gap:5px}
    .hamburger span{width:18px; height:2px; background:#fff; display:block}

    .offcanvas{
      position:fixed; inset:0; z-index:2000;
      pointer-events:none;
    }
    .offcanvas-backdrop{
      position:absolute; inset:0;
      background:rgba(0,0,0,.55);
      opacity:0; transition:.25s;
    }
    .offcanvas-panel{
      position:absolute; top:0; right:-320px;
      width:300px; height:100vh;
      background:linear-gradient(160deg,#081a3a,#020617);
      padding:22px;
      transition:.35s;
      box-shadow:0 30px 80px rgba(0,0,0,.35);
    }
    .offcanvas.active{pointer-events:auto}
    .offcanvas.active .offcanvas-backdrop{opacity:1}
    .offcanvas.active .offcanvas-panel{right:0}
    .offcanvas-close{
      display:flex; align-items:center; justify-content:space-between;
      color:#fff; font-weight:800; margin-bottom:14px;
    }
    .offcanvas-close button{
      border:0; background:rgba(255,255,255,.12); color:#fff;
      border-radius:12px; padding:10px 12px; cursor:pointer;
    }
    .offcanvas a{
      display:block; color:#fff;
      padding:12px 10px; border-radius:12px;
      margin:8px 0; background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      font-weight:600; font-size:14px;
    }

    /* ================= HERO ================= */
    .hero{
      color:#fff;
      background:
        radial-gradient(800px 400px at 20% -10%, rgba(37,99,235,.35), transparent 60%),
        radial-gradient(600px 300px at 85% 10%, rgba(0,212,255,.25), transparent 60%),
        linear-gradient(180deg,#0b1220,#050812);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .hero-inner{padding:62px 0 54px; text-align:center}
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:9px 16px; border-radius:999px;
      background:rgba(37,99,235,.18);
      border:1px solid rgba(37,99,235,.35);
      font-size:12px; font-weight:800;
    }
    .hero h1{
      margin:18px 0 10px;
      font-size:clamp(34px,5vw,62px);
      line-height:1.03;
      text-transform:uppercase;
      font-weight:900;
    }
    .hero p{
      max-width:920px; margin:0 auto;
      color:#dbeafe;
      font-size:clamp(14px,1.6vw,18px);
    }
    .hero-meta{
      margin-top:26px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      max-width:980px;
      margin-inline:auto;
    }
    .hero-meta .meta{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      padding:14px 12px;
      border-radius:16px;
      font-size:14px;
    }
    .meta b{display:block; margin-bottom:3px}

    /* ================= SECTIONS ================= */
    section{padding:52px 0}
    .section-title{margin-bottom:16px}
    .section-title h2{margin:0 0 6px; font-size:clamp(20px,2.6vw,30px)}
    .section-title p{margin:0; color:var(--muted)}

    .card{
      background:var(--card);
      border-radius:var(--radius);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
    }
    .card-pad{padding:20px}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}

    .note{
      margin-top:10px;
      font-size:13px;
      color:var(--muted);
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px; border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      font-size:12px; font-weight:700; color:#0f172a;
    }
    .badge i{
      width:8px;height:8px;border-radius:99px;
      background:var(--blue);
      display:inline-block;
      box-shadow:0 0 0 6px rgba(37,99,235,.15);
    }

    /* ================= COUNTDOWN ================= */
    .countdown-section{padding:70px 0}
    .countdown-wrapper{text-align:center; max-width:980px; margin:0 auto}
    .countdown-wrapper h2{margin:0 0 10px}
    .countdown-wrapper p{margin:0 0 34px; color:var(--muted); font-size:15px}
    .countdown-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .time-box{
      border-radius:22px;
      padding:26px 16px;
      position:relative;
      overflow:hidden;
      transform:translateZ(0);
      transition:transform .2s ease;
      box-shadow:var(--shadow-strong);
      border:1px solid rgba(255,255,255,.35);
    }
    .time-box:hover{transform:translateY(-4px)}
    .time-days{background:linear-gradient(135deg,#2563eb,#1e3a8a)}
    .time-hours{background:linear-gradient(135deg,#0f172a,#020617)}
    .time-minutes{background:linear-gradient(135deg,#38bdf8,#0284c7)}
    .time-seconds{background:linear-gradient(135deg,#22c55e,#15803d)}
    .time-value{font-size:42px; font-weight:900; color:#fff; line-height:1}
    .time-label{margin-top:10px; font-size:12px; letter-spacing:1px; color:#e5e7eb; text-transform:uppercase}
    .time-box::after{
      content:""; position:absolute; inset:0;
      background:radial-gradient(circle at top,rgba(255,255,255,.25),transparent 60%);
      pointer-events:none;
    }
    .countdown-sub{
      margin-top:14px;
      font-size:13px;
      color:var(--muted);
    }

    /* ================= TABLES ================= */
    .table-wrap{overflow:auto; border-radius:18px; border:1px solid var(--border)}
    table{width:100%; border-collapse:collapse; min-width:760px; background:#fff}
    th,td{padding:12px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
    th{background:#f1f5f9; font-size:13px; letter-spacing:.2px}
    td{font-size:14px}
    tr:hover td{background:#fbfdff}
    .pill-small{
      display:inline-block;
      font-size:12px;
      padding:4px 10px;
      border-radius:999px;
      background:var(--blue-soft);
      color:var(--blue);
      font-weight:800;
    }

    /* ================= TIMELINE ================= */
    .timeline{display:grid; gap:14px}
    .timeline-item{
      display:flex; gap:14px;
      padding:16px;
      border-radius:18px;
      background:#f8fafc;
      border:1px solid var(--border);
    }
    .dot{
      width:12px;height:12px;border-radius:50%;
      background:var(--blue);
      margin-top:6px;
      box-shadow:0 0 0 6px rgba(37,99,235,.18);
      flex-shrink:0;
    }
    .timeline-item b{display:block; margin-bottom:4px}
    .timeline-item p{margin:0; color:#475569; font-size:14px}

    /* ================= BROADCASTERS ================= */
    .searchbar{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      margin-bottom:12px;
    }
    .input{
      flex:1;
      min-width:240px;
      display:flex; gap:10px; align-items:center;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid var(--border);
      background:#fff;
      box-shadow:0 10px 25px rgba(0,0,0,.04);
    }
    .input input{
      width:100%;
      border:0;
      outline:none;
      font-size:14px;
      font-family:inherit;
    }
    .btn{
      border:0;
      background:linear-gradient(135deg,#2563eb,#1e3a8a);
      color:#fff;
      font-weight:800;
      padding:12px 14px;
      border-radius:16px;
      cursor:pointer;
      box-shadow:0 18px 38px rgba(37,99,235,.25);
    }
    .btn:active{transform:translateY(1px)}
    .chips{display:flex; gap:8px; flex-wrap:wrap}
    .chip{
      border:1px solid var(--border);
      background:#fff;
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }
    .chip.active{background:var(--blue-soft); color:var(--blue); border-color:#cfe0ff}
    .broadcaster-list{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .broadcaster-card{
      padding:14px;
      border-radius:18px;
      border:1px solid var(--border);
      background:#fff;
      box-shadow:0 10px 25px rgba(0,0,0,.05);
    }
    .broadcaster-card .country{font-weight:900; margin-bottom:6px}
    .broadcaster-card .channels{color:#334155; font-size:14px}
    .broadcaster-card .region{margin-top:10px; font-size:12px; color:var(--muted)}

    /* ================= FAQ ================= */
    .accordion-block{
      max-width: 980px;
      margin: 0 auto;
      padding: 22px;
      border-radius: 22px;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 25px 60px rgba(0,0,0,0.08);
      border: 1px solid rgba(255,255,255,0.45);
    }
    .accordion-items{display:flex;flex-direction:column;gap:14px}
    .accordion-item{
      background: rgba(255,255,255,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.6);
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      overflow: hidden;
      transition: 0.35s ease;
    }
    .accordion-item.active{
      background: rgba(255,255,255,0.85);
      box-shadow: 0 20px 45px rgba(0,0,0,0.08);
    }
    .accordion-header{
      padding: 18px 20px;
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      cursor: pointer;
      position: relative;
    }
    .accordion-header::after{
      content:"+";
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      font-size:20px;
      color:#334155;
      transition:.25s;
    }
    .accordion-item.active .accordion-header::after{content:"–";}
    .accordion-content{
      padding: 0 20px;
      font-size: 14px;
      color: #334155;
      line-height: 1.75;
      max-height: 0;
      overflow: hidden;
      transition: max-height .45s ease, padding .35s ease;
    }
    .accordion-item.active .accordion-content{padding: 14px 20px 20px;}

    /* ================= RESPONSIVE ================= */
    @media(max-width:980px){
      .hero-meta{grid-template-columns:repeat(2,1fr)}
      .grid-3{grid-template-columns:1fr}
      .broadcaster-list{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .links{display:none}
      .hamburger{display:flex}
      .hero-inner{padding:54px 0 44px}
    }
    @media(max-width:560px){
      .hero-meta{grid-template-columns:1fr}
      .countdown-grid{grid-template-columns:1fr 1fr}
      .broadcaster-list{grid-template-columns:1fr}
    }
    @media(max-width:420px){
      .countdown-grid{grid-template-columns:1fr}
    }