html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: #03070d;
      color: #fff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .hero {
      min-height: 850px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(2,7,13,.98) 0%, rgba(2,7,13,.88) 30%, rgba(2,7,13,.42) 67%, rgba(2,7,13,.72) 100%),
        linear-gradient(180deg, rgba(0,0,0,.15) 50%, #03070d 100%),
        url("https://d3o11ng5fxq40s.cloudfront.net/v2/football_300x150.jpg") center/cover no-repeat;
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 170px;
      background: linear-gradient(transparent, #03070d);
      pointer-events: none;
    }

    .glass {
      background: rgba(7, 13, 22, .68);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 20px 60px rgba(0,0,0,.38);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .red-btn {
      background: linear-gradient(180deg, #ff313d 0%, #d9091d 100%);
      box-shadow: 0 10px 30px rgba(235, 20, 40, .32);
      transition: .25s ease;
    }

    .red-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
      box-shadow: 0 14px 38px rgba(235, 20, 40, .42);
    }

    .hero-title {
      font-size: clamp(4.5rem, 7vw, 6.4rem);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      letter-spacing: .02em;
      line-height: .84;
      text-shadow: 0 8px 30px rgba(0,0,0,.65);
    }

    .wide-label {
      letter-spacing: .35em;
    }

    .live-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff1e32;
      box-shadow: 0 0 0 5px rgba(255,30,50,.13), 0 0 18px #ff1e32;
      animation: pulse 1.6s infinite;
    }

    @keyframes pulse {
      50% { transform: scale(.72); opacity: .6; }
    }

    .live-card {
      min-height: 250px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.64) 42%, rgba(0,0,0,.2) 100%),
        url("https://d3o11ng5fxq40s.cloudfront.net/v2/football_300x150.jpg") center/cover no-repeat;
    }

    .sponsor-strip {
      border-top: 1px solid rgba(255,255,255,.09);
      border-bottom: 1px solid rgba(255,255,255,.09);
      background: #07101b;
    }

    .sponsors {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 38px;
    }

    .sponsors img {
      max-width: 155px;
      max-height: 48px;
      object-fit: contain;
      filter: grayscale(1) brightness(1.7);
      opacity: .78;
    }

    .about {
      background:
        linear-gradient(rgba(2,7,13,.82), rgba(2,7,13,.96)),
        url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5TH0Whh_PHsHN8fTa9emvcbOUjo4oZzkPT9gglp1Gaw&s=10") center/cover no-repeat;
    }

    .fade-up {
      animation: fadeUp .8s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (min-width: 1024px) {
      .hero > div {
        padding-top: 8rem;
        padding-bottom: 6rem;
      }

      .hero .grid {
        gap: 5rem;
      }

      .hero-title {
        margin-top: 1.5rem;
      }

      #live {
        margin-top: -2rem;
      }

      #live .live-card {
        min-height: 330px;
      }
    }

    @media (max-width: 768px) {
      .hero { min-height: 700px; }
      .hero-title { font-size: clamp(3.8rem, 18vw, 5.5rem); }
      .sponsors { justify-content: center; flex-wrap: wrap; }
      .sponsors img { max-width: 120px; max-height: 36px; }
    }

/* Mobile hero refinement */
@media (max-width: 768px) {
  .hero {
    min-height: 680px;
    padding-bottom: 20px;
    background-position: center center;
  }

  .hero > div {
    padding-top: 6.5rem;
    padding-bottom: 2.5rem;
  }

  .hero .grid {
    gap: 1rem;
  }

  .hero-title {
    font-size: clamp(3.45rem, 16.5vw, 4.8rem);
    line-height: .86;
    letter-spacing: 0;
    margin: .75rem auto 0;
  }

  /* LIVE • ON DEMAND • ANYWHERE */
  .hero .text-sm.sm\:text-base.font-bold.tracking-\[\.35em\] {
    display: block;
    width: 100%;
    max-width: none;
    margin: 1.8rem auto 0;
    padding: 0;
    font-size: .68rem;
    line-height: 1.2;
    letter-spacing: .20em;
    white-space: nowrap;
    text-align: center;
  }

  .hero p.mt-4 {
    max-width: 315px;
    margin: 1.15rem auto 0;
    font-size: .84rem;
    line-height: 1.55;
    text-align: center;
  }

  .hero .red-btn {
    margin-top: 1.35rem;
    padding: .85rem 1.35rem;
    font-size: .85rem;
  }
}


/* Streamline tagline */
.hero-streamline {
  letter-spacing: .08em;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 768px) {
  .hero-streamline {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: .82rem;
    line-height: 1.45;
    letter-spacing: .035em;
  }
}