:root{
  --npl-bg: #0b1020;
  --npl-surface: rgba(255,255,255,0.06);
  --npl-border: rgba(255,255,255,0.12);

  --npl-primary: #1f4fff;
  --npl-accent:  #ffc107;

  --npl-text: rgba(255,255,255,0.92);
  --npl-muted: rgba(255,255,255,0.72);

  /* typography */
  --npl-h1: clamp(1.7rem, 2.6vw, 2.2rem);
  --npl-h2: clamp(1.35rem, 2.0vw, 1.75rem);
  --npl-body: 1.02rem;
  --npl-small: .93rem;
  --npl-xs: .82rem;

  --npl-lh: 1.75;
  --npl-lh-tight: 1.25;
}

/* base */
html, body{
  font-family: "Inter","Hind",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(31,79,255,0.25), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,193,7,0.15), transparent 55%),
    var(--npl-bg);
  color: var(--npl-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
a{ text-decoration: none; }

p{ font-size: var(--npl-body); line-height: var(--npl-lh); }
.small{ font-size: var(--npl-small) !important; }

/* sections */
.sec{ padding: 70px 0; }
.sec-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sec-head .sec-title{
  font-weight: 950;
  letter-spacing: 0.2px;
  font-size: var(--npl-h1);
  margin-bottom: .35rem;
}
.sec-head .sec-sub{
  color: var(--npl-muted);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 920px;
  margin: 0 auto;
}

/* NAVBAR */
.npl-nav{
  background: rgba(8, 12, 24, 0.70);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 9999;
}
.brand-logo{ width: 36px; height: 36px; object-fit: contain; }
.brand-text{ font-weight: 950; letter-spacing: 0.6px; }
.navbar-dark .navbar-nav .nav-link{
  color: rgba(255,255,255,0.86);
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: .1px;
}
.navbar-dark .navbar-nav .nav-link:hover{ color: #fff; }

/* =========================================================
   HERO BANNER (Desktop + Mobile Swap) + OFFICIALS FIX
   ========================================================= */
.hero-banner{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0b1020;
}

/* Hero images */
.hero-img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* Default desktop show */
.hero-desktop{ display: block; }
.hero-mobile{ display: none; }

/* ✅ Overlay full cover so officials never disappear */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;

  display: flex;
  align-items: flex-end;
  padding-bottom: 14px;
}
.officials-bar{ pointer-events: auto; }

/* ===========================
   ✅ OFFICIALS OVERLAY (SLIM)
   =========================== */
.officials-bar{
  background: rgba(8, 12, 24, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.38);
}

.ob-title{
  font-weight: 950;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  opacity: .95;
}

.ob-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ob-item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  min-width: 0;
}

.ob-item img{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.12);
  flex: 0 0 auto;
}

.ob-name{
  font-weight: 950;
  font-size: .95rem;
  line-height: 1.05;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-desig{
  font-size: .80rem;
  color: rgba(255,255,255,0.74);
  line-height: 1.2;
  margin-top: 2px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ob-desig b{ font-weight: 950; color: rgba(255,255,255,0.92); }

/* ===========================
   HERO INFO
   =========================== */
.sec-heroinfo{ padding-top: 40px; }

.ticker{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}
.ticker-badge{
  flex: 0 0 auto;
  background: rgba(255, 0, 68, 0.18);
  border: 1px solid rgba(255, 0, 68, 0.28);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 0.88rem;
}
.ticker-text{ width: 100%; overflow: hidden; }
.ticker-move{
  display: flex;
  gap: 24px;
  white-space: nowrap;
  animation: nplTicker 16s linear infinite;
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  font-size: .98rem;
}
@keyframes nplTicker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* countdown */
.countdown-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.countdown-card .fw-bold{ font-weight: 950 !important; font-size: 1.05rem; }
.mini-tag{
  background: rgba(31,79,255,0.20);
  border: 1px solid rgba(31,79,255,0.35);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 850;
  color: rgba(255,255,255,0.92);
}
.countdown-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.cd-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
}
.cd-num{ font-weight: 950; font-size: 1.55rem; color: #fff; }
.cd-lbl{ font-size: 0.85rem; font-weight: 750; color: rgba(255,255,255,0.74); }

/* Announcement */
.announcement{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.ann-left{ min-width: 55%; }
.ann-badge{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,193,7,0.18);
  border: 1px solid rgba(255,193,7,0.28);
  font-weight: 950;
  font-size: 0.9rem;
}
.ann-title{
  margin-top: 10px;
  font-weight: 950;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.15;
}
.ann-vs{ color: var(--npl-accent); margin: 0 8px; }
.ann-sub{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.ann-chip{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
  color: rgba(255,255,255,0.88);
}

/* =========================================================
   ABOUT / CARDS
   ========================================================= */
.about-wide{ width:100%; max-width:none; }

/* ✅ duplicate about-grid issue fixed */
.about-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.about-card, .feature-card, .sport-tile, .match-card, .glass-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.about-card p{ color: rgba(255,255,255,0.84); }

/* Fixtures cards */
.match-card{
  padding: 16px;
  color: rgba(255,255,255,0.92);
  overflow: hidden;
}
.match-featured{
  border-color: rgba(255,193,7,0.28);
  background: linear-gradient(180deg, rgba(255,193,7,0.10), rgba(255,255,255,0.04));
}
.match-top{ display: flex; justify-content: space-between; align-items: center; gap:10px; }
.pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 0.86rem;
  font-weight: 900;
}
.match-mid{ text-align: center; padding: 16px 0 10px; }
.match-mid .team{ font-weight: 950; font-size: 1.22rem; line-height: 1.15; }
.match-mid .vs{ color: var(--npl-accent); font-weight: 950; margin: 6px 0; letter-spacing: .7px; }
.match-bot{ display: flex; justify-content: space-between; align-items: center; gap: 10px; color: rgba(255,255,255,0.82); font-size: .95rem; }

/* Highlights */
.glass-card .gc-title{ font-weight: 950; font-size: 1.05rem; }
.glass-card .gc-sub{ color: rgba(255,255,255,0.72); margin-top: 6px; line-height: 1.45; }

/* CTA */
.cta{
  padding: 72px 0;
  background:
    radial-gradient(900px 450px at 20% 10%, rgba(31,79,255,0.35), transparent 55%),
    radial-gradient(900px 450px at 80% 20%, rgba(255,193,7,0.22), transparent 55%),
    rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Footer */
.footer{
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
  .ob-grid{ grid-template-columns: 1fr; }

  .announcement{ flex-direction: column; }
  .ann-left{ min-width: 100%; }

  .about-grid{ grid-template-columns: 1fr; }
}

/* ✅ Mobile banner swap + safe overlay spacing */
@media (max-width: 767px){
  .hero-banner{ height: 100svh; }

  .hero-desktop{ display: none; }
  .hero-mobile{ display: block; }

  /* navbar space + bottom safe (officials always visible) */
  .hero-overlay{
    padding: 70px 10px 12px;
    align-items: flex-end;
  }

  .officials-bar{
    padding: 10px 10px;
    border-radius: 14px;
  }
}

@media (max-width: 480px){
  .countdown-grid{ grid-template-columns: repeat(2, 1fr); }

  .ob-item{ padding: 8px 10px; }
  .ob-item img{ width: 38px; height: 38px; }
  .ob-name{ font-size: .94rem; }
  .ob-desig{ font-size: .80rem; }
}