.hero {
  position: relative;
  padding-block: var(--s-12) var(--s-10);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 720px) {
  .hero { padding-block: var(--s-6) var(--s-5); }
  .hero__eyebrow { margin-bottom: var(--s-3); }
  .hero__sub { margin-top: var(--s-3); }
  .hero__cta { margin-top: var(--s-4); }
  .hero__feature { padding: var(--s-4); }
  .hero__feature__teams { padding: var(--s-3) 0; }
  .hero__feature__team-crest { width: 40px; height: 40px; font-size: var(--t-sm); }
}

@media (max-width: 480px) {
  .hero__metrics { gap: var(--s-2); margin-top: var(--s-4); }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(215, 255, 58, 0.12), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(52, 226, 155, 0.06), transparent 60%);
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='none' stroke='%23ffffff' stroke-opacity='0.025' d='M0 20h40M20 0v40'/></svg>");
  z-index: -1;
  opacity: 0.6;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-10);
  align-items: center;
}

.hero__grid > * { min-width: 0; }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: var(--s-5);
}

.hero__eyebrow .chip { font-size: 9px; padding: 2px 6px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink-1);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.hero__title b { color: var(--accent); display: inline-block; position: relative; max-width: 100%; }
.hero__title b::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.18em;
  background: var(--accent-soft);
  z-index: -1;
}

@media (max-width: 720px) {
  .hero__title b {
    display: inline;
    background: linear-gradient(transparent 72%, var(--accent-soft) 72%);
  }
  .hero__title b::after { display: none; }
}

.hero__sub {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  max-width: 480px;
}

.hero__cta {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

.hero__metrics {
  margin-top: var(--s-8);
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-6);
  }
}

.hero__metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

@media (max-width: 480px) {
  .hero__metric__num { font-size: var(--t-2xl); }
}
.hero__metric__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: 1;
  color: var(--ink-1);
  letter-spacing: -0.02em;
}
.hero__metric__num b { color: var(--accent); }
.hero__metric__label {
  font-size: var(--t-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}

.hero__feature {
  position: relative;
  padding: var(--s-6);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-raised);
}

.hero__feature__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}

.hero__feature__league {
  font-size: var(--t-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  font-weight: 600;
}

.hero__feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.hero__feature__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--s-4);
}

.hero__feature__teams > * { min-width: 0; }

.hero__feature__team { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; min-width: 0; }
.hero__feature__team-name { word-break: break-word; }
.hero__feature__team-crest {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--ink-1);
  border: 1px solid var(--line-strong);
}
.hero__feature__team-name { font-weight: 600; font-size: var(--t-sm); color: var(--ink-1); }

.hero__feature__vs {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  font-weight: 700;
}

.hero__feature__odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.hero__feature__meta {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.hero__feature__meta__live { color: var(--live); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-wide); }