body { font-family: 'Noto Nastaliq Urdu', serif; background-color: #020617; overflow-x: hidden; }
h1, h2, h3, h4, p, a, button, div { line-height: 2.2 !important; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

:root{
  --header-h: 190px;
  --header-overlap: 52px;
  --hero-top: calc(var(--header-h) - var(--header-overlap));
}

#home{ padding-top: var(--hero-top); height: calc(100vh + var(--hero-top)); }
#home video, #home .hero-overlay, #home .hero-lite{ top: var(--hero-top); height: calc(100vh - var(--hero-top)); }
.hero-lite{ position:absolute; left:0; right:0; }

/* Header */
#main-header-wrapper {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; pointer-events: none; padding-top: 10px;
}
#main-header-wrapper .header-block, #main-header-wrapper #sticky-navbar { pointer-events: auto; }

.header-block {
  width: 100%; max-width: 80rem;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.95) 0%, rgba(30, 27, 75, 0.9) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-bottom: 2px solid rgba(197, 160, 89, 0.3);
  border-radius: 2.5rem;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
  padding: 0.75rem 2rem 1.75rem 2rem;
  transition: all 0.4s ease;
  position: relative; z-index: 10;
}
@media (min-width: 768px){
  #main-header-wrapper .header-block h1,
  #main-header-wrapper .header-block p{ white-space: nowrap; }
}

#sticky-navbar {
  position: relative; width: 100%; max-width: 76rem; margin-top: -28px; z-index: 20; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
  backdrop-filter: blur(12px);
  border: none; box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
#sticky-navbar::after{ content:""; position:absolute; inset:0; border-radius: 99px; border: 1px solid rgba(255,255,255,0.22); pointer-events:none; }

.nav-link { color: #e2e8f0; font-weight: 700; transition: 0.3s; padding: 8px 16px; border-radius: 20px; position: relative; overflow: hidden; }
.nav-link:hover { color: #C5A059; background: rgba(255,255,255,0.05); }
.nav-link::after{
  content:""; position:absolute; left: 18%; right: 18%; bottom: 6px; height: 2px; background: rgba(212,175,55,.9);
  transform: scaleX(0); transform-origin: center; transition: transform .35s ease; border-radius: 999px;
}
.nav-link:hover::after{ transform: scaleX(1); }

.mobile-pill{ font-weight: 800; font-size: 12px; padding: 8px 12px; border-radius: 999px; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); transition: .25s ease; white-space: nowrap; }
.mobile-pill:hover{ background: rgba(255,255,255,0.10); color: #C5A059; }
.mobile-pill-cta{ border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.16); }
.mobile-pill-cta:hover{ background: rgba(239,68,68,0.25); color: #fff; }

.eng-tagline{
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 500; font-size: 12px; letter-spacing: .08em;
  color: rgba(251,191,36,.85);
  line-height: 1.6 !important;
  margin-top: 4px;
  text-shadow: 0 0 18px rgba(212,175,55,.12);
}
@media (min-width: 768px){ .eng-tagline{ font-size: 13px; } }

/* Countdown (as you had) */
.scoreboard-wrap{ display:flex; align-items:center; justify-content:center; gap: 14px; flex-wrap: wrap; }
.countdown-unit{ display:flex; flex-direction:column; align-items:center; gap: 8px; min-width: 86px; }
.countdown-label{ font-size: 11px; font-weight: 800; letter-spacing: .12em; color: rgba(251,191,36,.9); }
.countdown-box{
  position: relative; width: 86px; height: 92px; border-radius: 16px; border: 1px solid rgba(212,175,55,.38);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.62)), rgba(0,0,0,.62);
  box-shadow: inset 0 2px 10px rgba(255,255,255,.06), inset 0 -14px 22px rgba(0,0,0,.50), 0 20px 55px rgba(0,0,0,.45);
  overflow:hidden;
}
.countdown-number{ height:100%; display:flex; align-items:center; justify-content:center; font-family: "Space Grotesk", sans-serif; font-weight: 800; font-size: 44px; color: #f8fafc; }
.countdown-sep{ font-family: "Space Grotesk", sans-serif; font-weight: 900; font-size: 34px; opacity: .65; transform: translateY(-8px); color: rgba(226,232,240,.85); }


