/* ============== TOKENS ============== */
:root {
  --bg: #1c233d;          /* deep navy — section A (first) */
  --bg-elev: #212841;     /* lighter navy — section B */
  --card: #2a334d;        /* card surface */
  --card-elev: #303a55;   /* card surface on top */
  --border: rgba(197, 233, 0, 0.16);
  --border-strong: rgba(197, 233, 0, 0.32);
  --border-blue: rgba(255, 255, 255, 0.06);
  --text: #ffffff;
  --text-dim: #a8b0c4;
  --text-faint: #7d8398;
  --lime: #b6ea00;
  --lime-dark: #9cbb00;
  --lime-glow: rgba(182, 234, 0, 0.45);

  --font-display: 'magistral', 'Impact', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  /* room for sticky cta on mobile */
  padding-bottom: 88px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============== NAV ============== */
.nav {
  position: absolute; /* float over hero on mobile */
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(22,29,51,0.55) 0%, rgba(22,29,51,0) 100%);
  border: 0;
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Mobile: logo centered, hamburger right */
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* On mobile, push to center using auto margins */
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
}
.logo img {
  height: 22px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(197,233,0,0.35));
}

.nav__links {
  display: none;
  gap: 28px;
}
.nav__links a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  opacity: 0.85;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.nav__links a:hover { opacity: 1; color: var(--lime); }

.nav__actions {
  display: none;
  align-items: center;
  gap: 22px;
}

.btn-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  white-space: nowrap;
}
.btn-text:hover { color: var(--lime); }

.hamburger {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
  will-change: transform;
}
.btn--lime {
  background: var(--lime);
  color: #0d1224;
  box-shadow: 0 8px 26px -10px var(--lime-glow);
}
.btn--lime:hover {
  background: #9cbb00;
  box-shadow: 0 10px 30px -8px var(--lime-glow);
  transform: translateY(-1px);
}
.btn--lime:active { transform: translateY(0); }

.btn--cta {
  width: 100%;
  max-width: 480px;
  padding: 20px 24px;
  font-size: 18px;
  letter-spacing: 1.5px;
}
.btn--sm {
  padding: 9px 18px;
  font-size: 12px;
  letter-spacing: 1.5px;
  border-radius: 8px;
}
.btn--sticky {
  padding: 13px 18px;
  font-size: 13px;
  letter-spacing: 1.2px;
  border-radius: 9px;
  white-space: nowrap;
}

/* ============== HERO ============== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Real stadium photo — mobile version (player centered) */
.hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-mobile.jpg');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

/* Dark fade overlay so headline & CTA area read as flat dark */
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(22,29,51,0.0) 0%,
      rgba(22,29,51,0.0) 38%,
      rgba(22,29,51,0.6) 62%,
      rgba(22,29,51,0.92) 82%,
      var(--bg) 100%);
  pointer-events: none;
}

/* Hero copy */
.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 280px 22px 28px;   /* tall top padding so the photo dominates upper half */
  min-height: 540px;
  display: flex;
  align-items: flex-end;
}
.hero__copy {
  width: 100%;
  text-align: center;
}

/* Display headlines */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 11vw, 64px);
  line-height: 1.0;
  margin: 0 0 22px;
  letter-spacing: 0.5px;
  text-wrap: balance;
}
.display__line {
  display: block;
  white-space: nowrap;
}
.display__line--outline {
  color: #ffffff;
  text-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 1px rgba(255,255,255,0.4);
}
.display__line--lime {
  color: var(--lime);
  text-shadow: 0 0 22px rgba(197,233,0,0.5), 0 4px 18px rgba(0,0,0,0.55);
  margin-top: 4px;
}

.hero__sub {
  font-size: clamp(15px, 4vw, 18px);
  color: #d8dcde;
  margin: 0 auto 26px;
  max-width: 380px;
  line-height: 1.45;
  font-weight: 500;
}

.hero__cta-wrap {
  display: flex;
  justify-content: center;
}

.hero__meta {
  margin-top: 18px;
}
.meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #e5e7e8;
}
.meta-bolt { flex-shrink: 0; }
.meta-fine {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  margin: 0;
}

/* ============== RIBBON TICKER ============== */
.ribbon {
  background: var(--bg-elev);
  border-top: 1px solid var(--border-blue);
  border-bottom: 1px solid var(--border-blue);
  overflow: hidden;
  padding: 10px 0;
}
.ribbon__track {
  display: flex;
  animation: ribbon-scroll 18s linear infinite;
}
.ribbon__content {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ribbon__logo {
  height: 10px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.ribbon__logo--white {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.ribbon__logo--green {
  filter: none;
}
.ribbon__text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lime);
}
@keyframes ribbon-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* ============== FEATURE PILLS ============== */
.pills {
  background: var(--bg);
  padding: 28px 16px 30px;
}
.pills__inner {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pill {
  background-color: var(--card);
  background-image: url('assets/chevron-pattern.svg');
  background-size: 255px 707px;
  background-position: center;
  background-repeat: repeat;
  border: 1px solid var(--border-blue);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
}
.pill__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pill__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

/* ============== SECTIONS ============== */
.section-title {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 4px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  margin: 0 0 26px;
  text-transform: uppercase;
}

/* HOW IT WORKS */
.how {
  background: var(--bg-elev);
  padding: 44px 22px 28px;
}
.how__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
}
.step {
  text-align: center;
  flex: 0 0 auto;
  width: 110px;
}
.step__circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  background: rgba(197,233,0,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 22px -6px var(--lime-glow);
}
.step__num {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 2px;
}
.step__label {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}
.step__connector {
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 0 -4px;
  margin-top: -42px;
  min-width: 20px;
}

/* WHY EPICBET */
.why {
  background: var(--bg);
  padding: 50px 16px 50px;
}
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
.why-card {
  position: relative;
  background-color: var(--card);
  background-image: url('assets/chevron-pattern.svg');
  background-size: 255px 707px;
  background-position: center;
  background-repeat: repeat;
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  overflow: hidden;
}
.why-card__icon {
  margin-bottom: 8px;
  display: inline-flex;
}
.why-card__title {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #fff;
}
.why-card__body {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.45;
  font-weight: 500;
}

/* BE EPIC PANEL */
.be-epic {
  background: var(--bg-elev);
  padding: 32px 16px 40px;
}
.be-epic__panel {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--maxw) - 72px); /* aligns with hero text content (1240 - 2×36 padding) */
  background-color: var(--card);
  background-image: url('assets/chevron-pattern.svg');
  background-size: 255px 707px;
  background-position: center;
  background-repeat: repeat;
  border: 1px solid var(--border-blue);
  border-radius: 14px;
  padding: 36px 22px 28px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 12px 40px -20px rgba(197,233,0,0.18);
}
.be-epic__stripes {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,29,51,0.55) 0%, rgba(22,29,51,0.25) 60%, rgba(22,29,51,0.55) 100%);
  pointer-events: none;
}
.be-epic__panel::after {
  content: '';
  position: absolute;
  inset: auto 0 -12px 0;
  height: 70px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(197,233,0,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.be-epic__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1;
}
.be-epic__line1 {
  display: block;
  color: var(--lime);
  font-size: clamp(34px, 9vw, 54px);
  text-shadow: 0 0 18px rgba(197,233,0,0.4);
}
.be-epic__line2 {
  display: block;
  color: #ffffff;
  font-size: clamp(20px, 5vw, 30px);
  margin-top: 4px;
}
.be-epic__chevrons {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 6px 0 22px;
}

/* FOOTER */
.footer {
  background: var(--bg);
  text-align: center;
  padding: 24px 16px 40px;
  color: var(--text-faint);
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.footer__row { margin: 0; }

/* STICKY BOTTOM CTA */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(22,29,51, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -12px 30px -16px rgba(0,0,0,0.7);
}
.sticky-cta__gift {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(197,233,0,0.06);
}
.sticky-cta__text {
  flex: 1 1 auto;
  min-width: 0;
}
.sticky-cta__line1 {
  margin: 0;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
}
.sticky-cta__line1 .arrow {
  color: var(--lime);
  margin: 0 4px;
}
.sticky-cta__line2 {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============== RESPONSIVE — DESKTOP ============== */
@media (min-width: 900px) {
  body { padding-bottom: 0; }

  .nav {
    position: sticky;
    top: 0;
    background: rgba(6, 10, 11, 0.78);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .hamburger { display: none; }
  .nav__links { display: flex; margin-left: 24px; }
  .nav__actions { display: flex; margin-left: auto; }
  .nav__inner { padding: 22px 36px; }
  .logo { margin: 0; }
  .logo img { height: 22px; }

  /* Hero becomes split */
  .hero__inner {
    padding: 70px 36px 70px;
    min-height: 520px;
    align-items: center;
  }
  .hero__copy {
    width: 50%;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    max-width: 560px;
  }
  .display { font-size: clamp(50px, 5.5vw, 72px); margin-bottom: 24px; }
  .hero__sub { margin: 0 0 28px; max-width: 420px; font-size: 18px; }
  .btn--cta { width: auto; max-width: none; padding: 18px 40px; font-size: 16px; }
  .hero__cta-wrap { justify-content: flex-start; }
  .hero__meta { text-align: left; }
  .meta-fine { text-align: left; }

  /* Photo: desktop version with player on right.
     Cap the photo width so it doesn't stretch on ultrawide screens —
     bg color fills the sides and a mask fades the photo's left/right edges
     smoothly into the bg. */
  .hero__photo {
    background-image: url('assets/hero-desktop.jpg');
    background-size: cover;
    background-position: center right;
    background-color: var(--bg);
    max-width: 1800px;
    margin: 0 auto;
    left: 0;
    right: 0;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 6%,
      #000 88%,
      transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 6%,
      #000 88%,
      transparent 100%);
  }
  .hero__vignette {
    background:
      linear-gradient(90deg,
        var(--bg) 0%,
        rgba(22,29,51,0.92) 16%,
        rgba(22,29,51,0.55) 34%,
        rgba(22,29,51,0.0) 58%,
        rgba(22,29,51,0.0) 72%,
        rgba(22,29,51,0.55) 88%,
        rgba(22,29,51,0.92) 96%,
        var(--bg) 100%),
      linear-gradient(180deg, transparent 65%, rgba(22,29,51,0.7) 92%, var(--bg) 100%);
  }
  /* Pills */
  .pills { padding: 32px 36px; }
  .pills__inner {
    max-width: calc(var(--maxw) - 72px); /* aligns with hero text content */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .pill {
    padding: 18px 22px;
    min-height: 70px;
    border-radius: 12px;
  }
  .pill__label {
    font-size: 15px;
    white-space: normal;
  }
  .pill__label br { display: none; }

  /* Sections wider */
  .how { padding: 80px 36px 40px; }
  .why { padding: 50px 36px 60px; }
  .be-epic { padding: 20px 36px 80px; }

  .section-title { font-size: 14px; letter-spacing: 5px; margin-bottom: 40px; }

  .how__steps {
    max-width: 760px;
    gap: 0;
  }
  .step { width: 160px; }
  .step__circle {
    width: 96px;
    height: 96px;
  }
  .step__num { font-size: 22px; }
  .step__label { font-size: 15px; }

  .why__grid {
    max-width: calc(var(--maxw) - 72px);
    gap: 18px;
  }
  .why-card { padding: 28px 22px; }
  .why-card__title { font-size: 18px; }
  .why-card__body { font-size: 14px; }

  .be-epic__panel {
    padding: 60px 40px 50px;
  }
  .be-epic__line1 { font-size: 64px; }
  .be-epic__line2 { font-size: 36px; }

  /* No sticky on desktop */
  .sticky-cta { display: none; }
}

@media (min-width: 1200px) {
  .display { font-size: 80px; }
  .hero__inner { min-height: 560px; }
}

/* small mobile */
@media (max-width: 360px) {
  .nav__inner { padding: 14px 16px; }
  .logo img { height: 20px; }
  .display { font-size: 38px; }
}