<!DOCTYPE html>
<!-- generated by 237-i18n-build I18N-ENGINE-V3 -->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="237 Sports — The fan is the hero, not the game. A personal Fan Story for every match you live. Beta launching at the 2026 FIFA World Cup." name="description"/>
<title>237 Sports — The fan is the hero, not the game</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&amp;family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&amp;display=swap" rel="stylesheet"/>
<style>
/* ─────────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────────── */
:root {
  --bg:           #000814;
  --bg-section:   #001528;
  --bg-elevated:  #00263F;
  --gold:         #FDB515;
  --gold-deep:    #C68B0F;
  --blue:         #003262;
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.18);
  --text:         #FFFFFF;
  --text-sec:     #C9D4E0;
  --text-mut:     #7A8B9E;
  --font-ui:      "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--border);
  background: rgba(0,8,20,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hdr-left { display: flex; align-items: center; gap: 14px; }
.hdr-logo { display: flex; align-items: center; gap: 10px; }
.hdr-logo .shield { width: 40px; height: auto; display: block; }
.hdr-wm { font-size: 14px; font-weight: 600; line-height: 1.1; letter-spacing: -0.2px; }
.hdr-wm small { display: block; font-size: 9.5px; color: var(--gold); font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
.beta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(253,181,21,0.3);
  background: rgba(253,181,21,0.07);
  font-size: 10.5px; font-weight: 600;
  color: var(--gold);
  letter-spacing: 1px; text-transform: uppercase;
}
.beta-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.hdr-nav { display: flex; align-items: center; gap: 32px; }
.hdr-nav a { color: var(--text-sec); font-size: 14px; font-weight: 500; transition: color 0.15s; }
.hdr-nav a:hover { color: var(--text); }
.hdr-cta {
  background: var(--gold); color: #000814;
  font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.15s, background 0.15s;
}
.hdr-cta:hover { transform: translateY(-1px); background: #ffc83d; }
@media (max-width: 880px) { .hdr-nav { display: none; } }

/* ─────────────────────────────────────────────────
   SHARED ELEMENTS
   ───────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 500;
  color: var(--gold);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 28px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.h1 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 700; line-height: 1.0; letter-spacing: -2.5px;
  color: var(--text);
  margin: 0 0 24px;
  text-wrap: balance;
}
.sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--text-sec);
  margin: 0 0 36px;
  max-width: 540px;
  text-wrap: pretty;
}
.ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-primary {
  background: var(--gold); color: #000814;
  font-size: 15px; font-weight: 600;
  padding: 14px 26px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.15s, background 0.15s;
}
.cta-primary:hover { transform: translateY(-1px); background: #ffc83d; }
.cta-secondary {
  color: var(--text); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.15s;
}
.cta-secondary:hover { color: var(--gold); }
.cta-note { color: var(--text-mut); font-size: 13px; font-weight: 500; margin-top: 18px; }

.section-label {
  display: inline-block;
  font-size: 11.5px; font-weight: 500;
  color: var(--gold);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 18px;
}

/* ─────────────────────────────────────────────────
   HERO (Direction A — classic split)
   ───────────────────────────────────────────────── */
.hero-a {
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 80px) clamp(72px, 8vw, 112px);
  position: relative;
  overflow: hidden;
}
.hero-a::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 88% 90%, rgba(0,50,98,0.40) 0%, transparent 60%),
    radial-gradient(40% 50% at 10% 10%, rgba(253,181,21,0.03) 0%, transparent 60%);
}
.hero-a-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1280px; margin: 0 auto;
}
.hero-a-card-wrap {
  width: 100%;
  max-width: 380px;
  justify-self: end;
  display: flex; flex-direction: column;
  gap: 20px;
}
@media (max-width: 920px) {
  .hero-a-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-a-card-wrap { max-width: 360px; justify-self: center; }
}

/* ─────────────────────────────────────────────────
   COUNTDOWN WIDGET
   ───────────────────────────────────────────────── */
.countdown {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}
.countdown-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.countdown-eye {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  color: var(--gold);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.countdown-eye .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.countdown-match {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-mut);
  letter-spacing: 0.4px;
}
.countdown-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.countdown-cell {
  text-align: center;
  padding: 12px 4px 10px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--border);
  border-radius: 10px;
}
.countdown-cell .n {
  font-size: 28px; font-weight: 700;
  line-height: 1; letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.countdown-cell .l {
  font-size: 9.5px; font-weight: 600;
  color: var(--text-mut);
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-top: 7px;
}

/* ─────────────────────────────────────────────────
   FAN STORY CARD (.fscard)
   ───────────────────────────────────────────────── */
.fscard {
  --bg-1: #1B3A6B;
  --bg-2: #0A1E40;
  --accent: #FDB515;
  --story-color: #FFFFFF;
  --story-dim: rgba(255,255,255,0.72);
  --watermark-color: #FFFFFF;
  --sent-1: #E8ECF5;
  --sent-2: #9FB4D8;
  --sent-glow: rgba(159,180,216,0.45);
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.4;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(130% 90% at 20% 10%, var(--bg-1) 0%, var(--bg-2) 65%, color-mix(in srgb, var(--bg-2) 80%, #000) 100%);
  color: var(--story-color);
  font-family: var(--font-ui);
  container-type: inline-size;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 22px 48px -18px rgba(0,0,0,0.55),
    0 6px 14px -4px rgba(0,0,0,0.4);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.fscard__rays {
  position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(118deg, transparent 0 44px, rgba(255,255,255,0.045) 44px 46px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.fscard__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}
.fscard__crest {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 70%; height: auto;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
.fscard__body {
  position: relative; z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 6.5% 7% 6%;
  gap: 2.6cqi;
}
.fscard__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.fscard__sentiment {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1.6cqi;
  flex-shrink: 0;
}
.fscard__ring {
  position: relative;
  width: 12cqi; height: 12cqi;
  min-width: 42px; min-height: 42px;
  max-width: 60px; max-height: 60px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from 140deg, var(--sent-1), var(--sent-2), var(--sent-1));
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.3), 0 0 18px 1px var(--sent-glow);
  flex-shrink: 0;
}
.fscard__ring-inner {
  position: absolute; inset: 2.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-2) 88%, #000);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 800;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.06em;
  font-size: 4.4cqi;
}
.fscard__ring-label {
  font-family: var(--font-ui);
  font-size: 2.4cqi;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sent-1);
  white-space: nowrap;
  line-height: 1;
}
.sent-glory      { --sent-1: #FDB515; --sent-2: #FFE58A; --sent-glow: rgba(253,181,21,0.55); }
.sent-joy        { --sent-1: #2EE67E; --sent-2: #A6F5CC; --sent-glow: rgba(46,230,126,0.55); }
.sent-pride      { --sent-1: #E8ECF5; --sent-2: #9FB4D8; --sent-glow: rgba(159,180,216,0.55); }
.sent-heartbreak { --sent-1: #FF6B83; --sent-2: #FFAEBE; --sent-glow: rgba(255,107,131,0.55); }
.sent-tension    { --sent-1: #F59E0B; --sent-2: #FCD34D; --sent-glow: rgba(245,158,11,0.50); }
.fscard--argentina .fscard__ring-inner,
.fscard--brazil94 .fscard__ring-inner {
  background: rgba(0,0,0,0.78);
  color: #FFFFFF;
}
.fscard--argentina .fscard__ring-label,
.fscard--brazil94 .fscard__ring-label { text-shadow: 0 1px 0 rgba(255,255,255,0.4); }

.fscard__stage {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-ui);
  font-size: 2.5cqi; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--story-color);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fscard--argentina .fscard__stage,
.fscard--brazil94 .fscard__stage {
  background: rgba(255,255,255,0.18);
  border-color: rgba(0,0,0,0.18);
}

.fscard__match {
  display: flex; flex-direction: column;
  gap: 1.2cqi;
  padding-bottom: 2.4cqi;
  border-bottom: 1px solid color-mix(in srgb, var(--story-color) 18%, transparent);
}
.fscard__teams { display: flex; align-items: center; justify-content: center; gap: 3cqi; line-height: 1; flex-wrap: wrap; }
.fscard__country {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 3.4cqi; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--story-color);
  display: inline-flex; align-items: center; gap: 1.8cqi;
}
.fscard__country-name { white-space: nowrap; }
.fscard__score {
  font-family: var(--font-ui); font-weight: 800;
  font-size: 6.2cqi; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--story-color);
  white-space: nowrap;
  padding: 0 1.4cqi;
}
.fscard__score-sep { opacity: 0.4; font-weight: 500; margin: 0 0.15em; }
.fscard__match-meta {
  text-align: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: 2.85cqi;
  color: var(--story-dim);
  line-height: 1.4;
  margin: 0;
}

.fscard__story-wrap { align-self: center; width: 100%; margin: 0; }
.fscard__story {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 4.4cqi;
  line-height: 1.45;
  color: var(--story-color);
  text-wrap: pretty;
  margin: 0;
  letter-spacing: 0.005em;
}

.fscard__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2cqi;
  padding-top: 1.4cqi;
  flex-wrap: nowrap;
}
.fscard__archetype {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 2.65cqi;
  color: var(--gold);
  letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
  flex: 0 1 auto;
  min-width: 0; max-width: 52%;
}
.fscard__brand {
  display: inline-flex; align-items: center; gap: 1.4cqi;
  color: var(--watermark-color);
  opacity: 0.62; flex: 0 0 auto;
}
.fscard--argentina .fscard__brand,
.fscard--brazil94 .fscard__brand { opacity: 0.72; }
.fscard__wordmark {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.95cqi; line-height: 1.1;
  color: inherit; white-space: nowrap; letter-spacing: 0.005em;
}
.fscard__wordmark b {
  font-style: normal; font-family: var(--font-ui);
  font-weight: 700; letter-spacing: 0.04em;
}
.fscard__shield {
  width: 5.6cqi; height: auto;
  min-width: 22px; max-width: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

/* Hero card override — slightly taller, more breathing room */
.fscard--hero { aspect-ratio: 9 / 13; border-radius: 26px; }

/* Per-team palettes */
.fscard--france      { --bg-1: #1656A9; --bg-2: #002654; --accent: #EF4135; }
.fscard--brazil94    {
  --bg-1: #FFE847; --bg-2: #D4AE00; --accent: #002776;
  --story-color: #0A5A24; --story-dim: rgba(10,90,36,0.82); --watermark-color: #002776;
}
.fscard--morocco     { --bg-1: #D43840; --bg-2: #6D0F14; --accent: #006233; }
.fscard--argentina   {
  --bg-1: #8FBFE6; --bg-2: #4D89C2; --accent: #F6B40E;
  --story-color: #0B2A4A; --story-dim: rgba(11,42,74,0.78); --watermark-color: #0B2A4A;
}
.fscard--argentina::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 45% at 50% 58%, rgba(255,255,255,0.32), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.fscard--argentina .fscard__rays { background: repeating-linear-gradient(118deg, transparent 0 44px, rgba(11,42,74,0.05) 44px 46px); mix-blend-mode: normal; }
.fscard--brazil94 .fscard__rays  { background: repeating-linear-gradient(118deg, transparent 0 44px, rgba(10,90,36,0.06) 44px 46px); mix-blend-mode: normal; }

.fscard--hero .fscard__story { font-size: 4.0cqi; line-height: 1.5; }
.fscard--hero .fscard__archetype { font-size: 2.5cqi; }

/* Grid card hover */
.historic__grid .fscard:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 32px 60px -20px rgba(0,0,0,0.65), 0 8px 18px -4px rgba(0,0,0,0.5);
}

/* ─────────────────────────────────────────────────
   BRIDGE
   ───────────────────────────────────────────────── */
.bridge {
  padding: clamp(72px, 8vw, 112px) clamp(20px, 5vw, 80px);
  border-top: 1px solid var(--border);
  background: var(--bg-section);
  position: relative;
}
.bridge-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.bridge .section-label { padding-top: 12px; margin-bottom: 0; }
.bridge h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -1px;
  margin: 0;
  text-wrap: balance;
}
.bridge h2 .accent { color: var(--text-mut); }
@media (max-width: 720px) {
  .bridge-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ─────────────────────────────────────────────────
   HISTORIC GALLERY
   ───────────────────────────────────────────────── */
.historic {
  padding: clamp(80px, 8vw, 120px) clamp(20px, 5vw, 80px);
  border-top: 1px solid var(--border);
}
.historic__inner { max-width: 1280px; margin: 0 auto; }
.historic__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.08;
  letter-spacing: -1.5px;
  max-width: 760px;
  text-wrap: balance;
}
.historic__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--text-sec);
  margin: 0 0 56px;
  max-width: 580px;
}
.historic__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .historic__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 640px) { .historic__grid { grid-template-columns: 1fr; gap: 22px; } }

/* ─────────────────────────────────────────────────
   FEATURES (V2 — 3 columns with screenshot thumbs)
   ───────────────────────────────────────────────── */
.feat-section {
  padding: clamp(80px, 8vw, 120px) clamp(20px, 5vw, 80px);
  border-top: 1px solid var(--border);
  background: var(--bg-section);
}
.feat-head {
  max-width: 1280px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}
.feat-head h3 {
  color: var(--text);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -1.5px;
  margin: 0;
  line-height: 1.05;
  text-wrap: balance;
}
.feat-head .lede {
  color: var(--text-sec);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  margin: 0;
  max-width: 380px;
}
@media (max-width: 820px) {
  .feat-head { grid-template-columns: 1fr; gap: 18px; }
  .feat-head .lede { max-width: 100%; }
}

.feat-wrap { max-width: 1280px; margin: 0 auto; }
.feat-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .feat-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feat-v2 { grid-template-columns: 1fr; } }
.feat-v2 .card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 460px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.feat-v2 .card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.feat-v2 .ic-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.feat-v2 .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(253,181,21,0.10);
  border: 1px solid rgba(253,181,21,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.feat-v2 .ic svg { width: 18px; height: 18px; }
.feat-v2 h4 {
  font-size: 19px; font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.feat-v2 p {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 32ch;
}
.feat-v2 .thumb {
  margin-top: auto;
  margin-left: -28px;
  margin-right: -28px;
  height: 220px;
  background: linear-gradient(180deg, #000814 0%, #001428 100%);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 20px;
}
.feat-v2 .thumb img {
  width: 140px; height: auto;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 18px 36px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.feat-v2 .caption {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 10.5px; font-weight: 500;
  color: var(--text-mut);
  letter-spacing: 1px; text-transform: uppercase;
}

/* ─────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────── */
.final-cta {
  padding: clamp(96px, 10vw, 144px) clamp(20px, 5vw, 80px) clamp(80px, 8vw, 112px);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 50% 100%, rgba(0,50,98,0.55) 0%, transparent 70%);
}
.final-cta-inner { position: relative; max-width: 760px; margin: 0 auto; }
.final-cta h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700; color: var(--text);
  letter-spacing: -2px; line-height: 1.0;
  margin: 0 0 22px;
  text-wrap: balance;
}
.final-cta p {
  color: var(--text-sec);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  margin: 0 auto 40px;
  max-width: 480px;
}
.final-cta .ctas { justify-content: center; }

/* ─────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────── */
.footer {
  padding: 48px clamp(20px, 5vw, 80px) 40px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.footer-tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px;
  color: var(--text-mut);
}
.footer-right { display: flex; align-items: center; gap: 28px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--text-mut); font-size: 13px; font-weight: 500; transition: color 0.15s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { color: var(--text-mut); font-size: 11.5px; letter-spacing: 0.5px; }
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .footer-right { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ─────────────────────────────────────────────────
   ANIMATION: gentle reveal on scroll
   ───────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }


/* I18N-ENGINE language switcher (dropdown) */
.i18n-switcher { position: relative; display: inline-block; }
.i18n-switcher summary { list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-sec, #C9D4E0); font-size: 13px; font-weight: 500;
  padding: 7px 12px; border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: 999px; white-space: nowrap; transition: color .15s, border-color .15s; }
.i18n-switcher summary::-webkit-details-marker { display: none; }
.i18n-switcher summary:hover { color: var(--gold, #FDB515);
  border-color: var(--border-strong, rgba(255,255,255,0.28)); }
.i18n-switcher .i18n-globe { font-size: 13px; }
.i18n-switcher .i18n-caret { font-size: 10px; opacity: .7; }
.i18n-switcher[open] summary { color: var(--gold, #FDB515); }
.i18n-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  display: flex; flex-direction: column; gap: 1px; min-width: 150px;
  padding: 8px; border-radius: 12px;
  background: var(--bg-elevated, #00263F);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.18));
  box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.i18n-menu a { padding: 8px 12px; border-radius: 8px;
  color: var(--text-sec, #C9D4E0); font-size: 13.5px; text-decoration: none;
  white-space: nowrap; transition: background .12s, color .12s; }
.i18n-menu a:hover { background: rgba(255,255,255,0.06); color: var(--text, #fff); }
.i18n-menu a[aria-current="true"] { color: var(--gold, #FDB515); font-weight: 600; }
</style>
<!-- Google Analytics (GA4) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-71P36QKP6X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-71P36QKP6X');
</script>
<link href="https://237sports.com/" hreflang="en" rel="alternate"/><link href="https://237sports.com/es/" hreflang="es" rel="alternate"/><link href="https://237sports.com/pt/" hreflang="pt" rel="alternate"/><link href="https://237sports.com/fr/" hreflang="fr" rel="alternate"/><link href="https://237sports.com/de/" hreflang="de" rel="alternate"/><link href="https://237sports.com/it/" hreflang="it" rel="alternate"/><link href="https://237sports.com/nl/" hreflang="nl" rel="alternate"/><link href="https://237sports.com/ar/" hreflang="ar" rel="alternate"/><link href="https://237sports.com/zh/" hreflang="zh" rel="alternate"/><link href="https://237sports.com/ja/" hreflang="ja" rel="alternate"/><link href="https://237sports.com/ko/" hreflang="ko" rel="alternate"/><link href="https://237sports.com/fa/" hreflang="fa" rel="alternate"/><link href="https://237sports.com/" hreflang="x-default" rel="alternate"/></head>
<body>
<!-- ═══════════════════════════════════════════════════
     HEADER
     ═══════════════════════════════════════════════════ -->
<header class="hdr">
<div class="hdr-left">
<a aria-label="237 Sports home" class="hdr-logo" href="/">
<svg aria-hidden="true" class="shield" viewbox="0 0 56 70">
<path d="M8 4 L48 4 Q52 4 52 8 L52 38 Q52 56 28 66 Q4 56 4 38 L4 8 Q4 4 8 4 Z" fill="#003262"></path>
<path d="M8 4 L48 4 Q52 4 52 8 L52 15 L4 15 L4 8 Q4 4 8 4 Z" fill="#FDB515"></path>
<text fill="#FFFFFF" font-family="Geist, -apple-system, sans-serif" font-size="16" font-weight="900" letter-spacing="-0.5" text-anchor="middle" x="28" y="38">237</text>
<text fill="#FDB515" font-family="Geist, -apple-system, sans-serif" font-size="5.5" font-weight="700" letter-spacing="1.4" text-anchor="middle" x="28" y="50">SPORTS</text>
</svg>
<div class="hdr-wm">237 Sports<small>The fan is the hero</small></div>
</a>
<span class="beta-pill"><span class="dot"></span>Beta · WC 2026</span>
</div>
<nav aria-label="Primary" class="hdr-nav">
<a href="/how-it-works.html">How it works</a>
<a href="#features">Features</a>
<a href="/schedule.html">Schedule</a>
<a href="/about.html">About</a>
</nav><details class="i18n-switcher" translate="no"><summary aria-label="Language"><span class="i18n-globe">🌐</span><span class="i18n-current">English</span><span class="i18n-caret">▾</span></summary><div class="i18n-menu"><a aria-current="true" href="/" hreflang="en" lang="en">English</a><a href="/es/" hreflang="es" lang="es">Español</a><a href="/pt/" hreflang="pt" lang="pt">Português</a><a href="/fr/" hreflang="fr" lang="fr">Français</a><a href="/de/" hreflang="de" lang="de">Deutsch</a><a href="/it/" hreflang="it" lang="it">Italiano</a><a href="/nl/" hreflang="nl" lang="nl">Nederlands</a><a href="/ar/" hreflang="ar" lang="ar">العربية</a><a href="/zh/" hreflang="zh" lang="zh">中文</a><a href="/ja/" hreflang="ja" lang="ja">日本語</a><a href="/ko/" hreflang="ko" lang="ko">한국어</a><a href="/fa/" hreflang="fa" lang="fa">فارسی</a></div></details>
  <a href="/app.html" class="hdr-cta">Log In</a>
</header>
<!-- ═══════════════════════════════════════════════════
     HERO — Direction A (classic split)
     ═══════════════════════════════════════════════════ -->
<section aria-label="Introduction" class="hero-a">
<div class="hero-a-grid">
<div class="hero-a-left">
<p class="eyebrow"><span>Beta · World Cup 2026 · More sports coming</span></p>
<h1 class="h1">The fan is the hero, not the game.</h1>
<p class="sub">After every match you watch, 237 Sports composes a personal Fan Story — a few sentences that capture how it actually felt. Save it. Share it. Print it. Live the World Cup, keep the moments that mattered.</p>
<div class="ctas">
<a href="/app.html" class="cta-primary">Open the app &rarr;</a>
<a class="cta-secondary" href="/how-it-works.html">See how it works →</a>
</div>
</div>
<div class="hero-a-card-wrap">
<!-- Hero Fan Story card: Argentina-France 2022 · The Most Obvious -->
<article aria-labelledby="hero-card-story" class="fscard fscard--hero fscard--argentina">
<div aria-hidden="true" class="fscard__rays"></div>
<svg aria-hidden="true" class="fscard__crest" viewbox="0 0 100 120">
<path d="M50 2 L96 18 L96 60 C96 92 76 110 50 118 C24 110 4 92 4 60 L4 18 Z" fill="#FFFFFF" stroke="#0B2A4A" stroke-width="1.5"></path>
<circle cx="50" cy="58" fill="#F6B40E" r="14"></circle>
<g stroke="#F6B40E" stroke-linecap="round" stroke-width="2.2">
<line x1="50" x2="50" y1="34" y2="42"></line>
<line x1="50" x2="50" y1="74" y2="82"></line>
<line x1="26" x2="34" y1="58" y2="58"></line>
<line x1="66" x2="74" y1="58" y2="58"></line>
<line x1="33" x2="39" y1="41" y2="47"></line>
<line x1="61" x2="67" y1="69" y2="75"></line>
<line x1="33" x2="39" y1="75" y2="69"></line>
<line x1="61" x2="67" y1="47" y2="41"></line>
</g>
</svg>
<div aria-hidden="true" class="fscard__scrim"></div>
<div class="fscard__body">
<header class="fscard__top">
<div class="fscard__sentiment">
<div aria-label="Sentiment: Glory" class="fscard__ring sent-glory">
<div class="fscard__ring-inner">ES</div>
</div>
<span class="fscard__ring-label">Glory</span>
</div>
<span class="fscard__stage">World Cup Final</span>
</header>
<div class="fscard__match">
<div class="fscard__teams">
<div class="fscard__country"><span class="fscard__country-name">Argentina</span></div>
<div class="fscard__score">3<span class="fscard__score-sep">–</span>3</div>
<div class="fscard__country"><span class="fscard__country-name">France</span></div>
</div>
<p class="fscard__match-meta">Argentina won 4–2 on penalties · Lusail · 18 Dec 2022</p>
</div>
<figure class="fscard__story-wrap">
<p class="fscard__story" id="hero-card-story">The ultimate Hollywood script. Messi finally getting his moment, and then the ultimate villain doing the impossible and scoring twice in a minute to drag the drama out. When Montiel's final kick hit the net you felt the deafening roar of every apartment and bar and street in the country going up at the same fraction of a second. This is what football is all about.</p>
</figure>
<footer class="fscard__foot">
<div class="fscard__archetype">The Most Obvious</div>
<div aria-label="Composed by 237 Sports" class="fscard__brand">
<span class="fscard__wordmark" dir="ltr">Intuitively composed by<b>237 Sports</b></span>
<svg aria-hidden="true" class="fscard__shield" viewbox="0 0 56 70">
<path d="M8 4 L48 4 Q52 4 52 8 L52 38 Q52 56 28 66 Q4 56 4 38 L4 8 Q4 4 8 4 Z" fill="#003262"></path>
<path d="M8 4 L48 4 Q52 4 52 8 L52 15 L4 15 L4 8 Q4 4 8 4 Z" fill="#FDB515"></path>
<text fill="#FFFFFF" font-family="Geist, -apple-system, sans-serif" font-size="16" font-weight="900" letter-spacing="-0.5" text-anchor="middle" x="28" y="38">237</text>
<text fill="#FDB515" font-family="Geist, -apple-system, sans-serif" font-size="5.5" font-weight="700" letter-spacing="1.4" text-anchor="middle" x="28" y="50">SPORTS</text>
</svg>
</div>
</footer>
</div>
</article>
<!-- Live countdown widget -->
<div aria-live="polite" class="countdown">
<div class="countdown-head">
<span class="countdown-eye"><span class="pulse"></span>Kickoff in</span>
<span class="countdown-match">Mexico × South Africa</span>
</div>
<div class="countdown-grid">
<div class="countdown-cell"><div class="n" id="cd-days">00</div><div class="l">Days</div></div>
<div class="countdown-cell"><div class="n" id="cd-hours">00</div><div class="l">Hours</div></div>
<div class="countdown-cell"><div class="n" id="cd-mins">00</div><div class="l">Minutes</div></div>
<div class="countdown-cell"><div class="n" id="cd-secs">00</div><div class="l">Seconds</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
     BRIDGE — positioning
     ═══════════════════════════════════════════════════ -->
<section aria-label="Why we built this" class="bridge">
<div class="bridge-inner">
<span class="section-label">Why 237 Sports</span>
<h2>Most sports apps make the game the hero. We make the fan the hero.<span class="accent">The game is just the stage — the fan's emotional journey is the story.</span></h2>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
     HISTORIC GALLERY — 3 cards
     ═══════════════════════════════════════════════════ -->
<section aria-label="Fan stories across history" class="historic">
<div class="historic__inner">
<p class="eyebrow"><span>52 years of moments</span></p>
<h2 class="historic__title">Fan stories, across history.</h2>
<p class="historic__sub">What 237 Sports would have written for the fans who lived these matches. Three eras, three fan types, three emotional registers.</p>
<div class="historic__grid">
<!-- Brazil 1994 -->
<article aria-labelledby="card-brazil94" class="fscard fscard--brazil94">
<div aria-hidden="true" class="fscard__rays"></div>
<svg aria-hidden="true" class="fscard__crest" viewbox="0 0 100 120">
<path d="M50 2 L96 18 L96 60 C96 92 76 110 50 118 C24 110 4 92 4 60 L4 18 Z" fill="#FEDF00" stroke="#FFFFFF" stroke-width="1.5"></path>
<circle cx="50" cy="58" fill="#002776" r="22"></circle>
<text fill="#FEDF00" font-family="Geist, sans-serif" font-size="18" font-weight="900" text-anchor="middle" x="50" y="66">BRA</text>
</svg>
<div aria-hidden="true" class="fscard__scrim"></div>
<div class="fscard__body">
<header class="fscard__top">
<div class="fscard__sentiment">
<div aria-label="Sentiment: Redemption" class="fscard__ring sent-glory">
<div class="fscard__ring-inner">RG</div>
</div>
<span class="fscard__ring-label">Redemption</span>
</div>
<span class="fscard__stage">World Cup Final</span>
</header>
<div class="fscard__match">
<div class="fscard__teams">
<div class="fscard__country"><span class="fscard__country-name">Brazil</span></div>
<div class="fscard__score">0<span class="fscard__score-sep">–</span>0</div>
<div class="fscard__country"><span class="fscard__country-name">Italy</span></div>
</div>
<p class="fscard__match-meta">Brazil won 3–2 on penalties · Rose Bowl, Pasadena · 17 July 1994</p>
</div>
<figure class="fscard__story-wrap">
<p class="fscard__story" id="card-brazil94">Twenty-four years. The ghosts of '82. The heartbreak of '86. The agonising wait in the shadow of the 1970 legends. Baresi over the bar on the first kick. Then Branco. Then Dunga. Then Baggio walking up and putting it into the Pasadena sky, and Taffarel falling backwards with his arms stretched out to the heavens. The fourth star — finally. The kids born after Pelé have their own.</p>
</figure>
<footer class="fscard__foot">
<div class="fscard__archetype">The Die Hard</div>
<div aria-label="Composed by 237 Sports" class="fscard__brand">
<span class="fscard__wordmark" dir="ltr">Intuitively composed by<b>237 Sports</b></span>
<svg aria-hidden="true" class="fscard__shield" viewbox="0 0 56 70">
<path d="M8 4 L48 4 Q52 4 52 8 L52 38 Q52 56 28 66 Q4 56 4 38 L4 8 Q4 4 8 4 Z" fill="#003262"></path>
<path d="M8 4 L48 4 Q52 4 52 8 L52 15 L4 15 L4 8 Q4 4 8 4 Z" fill="#FDB515"></path>
<text fill="#FFFFFF" font-family="Geist, -apple-system, sans-serif" font-size="16" font-weight="900" letter-spacing="-0.5" text-anchor="middle" x="28" y="38">237</text>
<text fill="#FDB515" font-family="Geist, -apple-system, sans-serif" font-size="5.5" font-weight="700" letter-spacing="1.4" text-anchor="middle" x="28" y="50">SPORTS</text>
</svg>
</div>
</footer>
</div>
</article>
<!-- Morocco 2022 -->
<article aria-labelledby="card-morocco" class="fscard fscard--morocco">
<div aria-hidden="true" class="fscard__rays"></div>
<svg aria-hidden="true" class="fscard__crest" viewbox="0 0 100 120">
<path d="M50 2 L96 18 L96 60 C96 92 76 110 50 118 C24 110 4 92 4 60 L4 18 Z" fill="#C1272D" stroke="#006233" stroke-width="1.5"></path>
<path d="M50 36 L56.4 55.6 L77 55.6 L60.3 67.8 L66.7 87.4 L50 75.2 L33.3 87.4 L39.7 67.8 L23 55.6 L43.6 55.6 Z" fill="none" stroke="#006233" stroke-linejoin="miter" stroke-width="2.4"></path>
</svg>
<div aria-hidden="true" class="fscard__scrim"></div>
<div class="fscard__body">
<header class="fscard__top">
<div class="fscard__sentiment">
<div aria-label="Sentiment: Joy" class="fscard__ring sent-joy">
<div class="fscard__ring-inner">NB</div>
</div>
<span class="fscard__ring-label">Joy</span>
</div>
<span class="fscard__stage">Quarter-final</span>
</header>
<div class="fscard__match">
<div class="fscard__teams">
<div class="fscard__country"><span class="fscard__country-name">Morocco</span></div>
<div class="fscard__score">1<span class="fscard__score-sep">–</span>0</div>
<div class="fscard__country"><span class="fscard__country-name">Portugal</span></div>
</div>
<p class="fscard__match-meta">Al Thumama Stadium, Doha · 10 December 2022</p>
</div>
<figure class="fscard__story-wrap">
<p class="fscard__story" id="card-morocco">You only started watching because your mother would not stop sending you clips. Then En-Nesyri jumps to an impossibly terrifying height just before halftime, and somewhere over the Portuguese keeper the ball finds the net. When the whistle blows and the players bring their mothers onto the grass to dance, a sudden heat swells in your chest before your brain can even process the victory. You finally get it. You understand your mother's pride in a way you never did before.</p>
</figure>
<footer class="fscard__foot">
<div class="fscard__archetype">The Newbie</div>
<div aria-label="Composed by 237 Sports" class="fscard__brand">
<span class="fscard__wordmark" dir="ltr">Intuitively composed by<b>237 Sports</b></span>
<svg aria-hidden="true" class="fscard__shield" viewbox="0 0 56 70">
<path d="M8 4 L48 4 Q52 4 52 8 L52 38 Q52 56 28 66 Q4 56 4 38 L4 8 Q4 4 8 4 Z" fill="#003262"></path>
<path d="M8 4 L48 4 Q52 4 52 8 L52 15 L4 15 L4 8 Q4 4 8 4 Z" fill="#FDB515"></path>
<text fill="#FFFFFF" font-family="Geist, -apple-system, sans-serif" font-size="16" font-weight="900" letter-spacing="-0.5" text-anchor="middle" x="28" y="38">237</text>
<text fill="#FDB515" font-family="Geist, -apple-system, sans-serif" font-size="5.5" font-weight="700" letter-spacing="1.4" text-anchor="middle" x="28" y="50">SPORTS</text>
</svg>
</div>
</footer>
</div>
</article>
<!-- Zidane 2006 -->
<article aria-labelledby="card-zidane" class="fscard fscard--france">
<div aria-hidden="true" class="fscard__rays"></div>
<svg aria-hidden="true" class="fscard__crest" viewbox="0 0 100 120">
<path d="M50 2 L96 18 L96 60 C96 92 76 110 50 118 C24 110 4 92 4 60 L4 18 Z" fill="none" stroke="#FFFFFF" stroke-width="1.5"></path>
<rect fill="#0055A4" height="64" width="24" x="14" y="28"></rect>
<rect fill="#FFFFFF" height="64" width="24" x="38" y="28"></rect>
<rect fill="#EF4135" height="64" width="24" x="62" y="28"></rect>
</svg>
<div aria-hidden="true" class="fscard__scrim"></div>
<div class="fscard__body">
<header class="fscard__top">
<div class="fscard__sentiment">
<div aria-label="Sentiment: Heartbreak" class="fscard__ring sent-heartbreak">
<div class="fscard__ring-inner">JM</div>
</div>
<span class="fscard__ring-label">Heartbreak</span>
</div>
<span class="fscard__stage">World Cup Final</span>
</header>
<div class="fscard__match">
<div class="fscard__teams">
<div class="fscard__country"><span class="fscard__country-name">Italy</span></div>
<div class="fscard__score">1<span class="fscard__score-sep">–</span>1</div>
<div class="fscard__country"><span class="fscard__country-name">France</span></div>
</div>
<p class="fscard__match-meta">Italy won 5–3 on penalties · Olympiastadion, Berlin · 9 July 2006</p>
</div>
<figure class="fscard__story-wrap">
<p class="fscard__story" id="card-zidane">Zidane's panenka in the 7th. Materazzi's header in the 19th. For one hundred and ten minutes you watched a match that fit perfectly inside the analytical frame you have trusted for twenty years. And then Zidane's head went into Materazzi's chest. When the broadcaster queued up the replay, you physically forced your eyes away from the screen. The midfield three is still the midfield three for the next cycle. The headbutt is being held somewhere the system never reaches.</p>
</figure>
<footer class="fscard__foot">
<div class="fscard__archetype">The Professional</div>
<div aria-label="Composed by 237 Sports" class="fscard__brand">
<span class="fscard__wordmark" dir="ltr">Intuitively composed by<b>237 Sports</b></span>
<svg aria-hidden="true" class="fscard__shield" viewbox="0 0 56 70">
<path d="M8 4 L48 4 Q52 4 52 8 L52 38 Q52 56 28 66 Q4 56 4 38 L4 8 Q4 4 8 4 Z" fill="#003262"></path>
<path d="M8 4 L48 4 Q52 4 52 8 L52 15 L4 15 L4 8 Q4 4 8 4 Z" fill="#FDB515"></path>
<text fill="#FFFFFF" font-family="Geist, -apple-system, sans-serif" font-size="16" font-weight="900" letter-spacing="-0.5" text-anchor="middle" x="28" y="38">237</text>
<text fill="#FDB515" font-family="Geist, -apple-system, sans-serif" font-size="5.5" font-weight="700" letter-spacing="1.4" text-anchor="middle" x="28" y="50">SPORTS</text>
</svg>
</div>
</footer>
</div>
</article>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
     FEATURES (V2 — all 6 features)
     ═══════════════════════════════════════════════════ -->
<section aria-label="Features" class="feat-section" id="features">
<div class="feat-head">
<div>
<span class="section-label">What's inside</span>
<h3>Six things the app does for you on matchday.</h3>
</div>
<p class="lede">Built around the Fan Story Arc, supported by everything you need to live a tournament: fan intelligence, your tournament calendar, news that knows your teams, and a little daily trivia between matches.</p>
</div>
<div class="feat-wrap">
<div class="feat-v2">
<!-- 1. Fan Story Arc -->
<div class="card">
<div class="ic-row">
<span aria-hidden="true" class="ic">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M12 3l1.9 5.8L20 11l-5.8 1.9L12 19l-1.9-6.1L4 11l6.1-2.2z"></path></svg>
</span>
<h4>Personal Fan Story</h4>
</div>
<p>After every match, a few sentences just for you. Reflecting how the game actually felt. Save it, share it, print it.</p>
<div class="thumb">
<img alt="Personal Fan Story screen showing a Mexican fan's account of Mexico 2–1 South Africa" src="./screenshots/fan-story-card.png"/>
<span class="caption">Live preview · matches generate yours</span>
</div>
</div>
<!-- 2. Fan Battle -->
<div class="card">
<div class="ic-row">
<span aria-hidden="true" class="ic">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M3 21h6l11-11-6-6L3 15v6z"></path><path d="M14 4l6 6"></path></svg>
</span>
<h4>Fan Battle</h4>
</div>
<p>What both fan bases are feeling before kick-off, in their own words. Researched across public fan communities. Never invented.</p>
<div class="thumb">
<img alt="Fan Battle screen showing Paraguay vs United States fan confidence and editorial pulse" src="./screenshots/fan-battle.png"/>
<span class="caption">Live preview · USA vs Paraguay, June 13</span>
</div>
</div>
<!-- 3. Fan Verdict -->
<div class="card">
<div class="ic-row">
<span aria-hidden="true" class="ic">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><circle cx="12" cy="9" r="6"></circle><path d="M9 14l-2 7 5-3 5 3-2-7"></path></svg>
</span>
<h4>Fan Verdict</h4>
</div>
<p>After the whistle, vote on what decided the match. See what fans around the world said about the same game you just watched.</p>
<div class="thumb">
<img alt="Fan Verdict screen asking 'Was this the game you expected?' with three feeling options" src="./screenshots/fan-verdict.png"/>
<span class="caption">Live preview · Mexico vs South Africa</span>
</div>
</div>
<!-- 4. Schedule + Sync + Print -->
<div class="card">
<div class="ic-row">
<span aria-hidden="true" class="ic">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><rect height="16" rx="2" width="18" x="3" y="5"></rect><line x1="3" x2="21" y1="10" y2="10"></line><line x1="8" x2="8" y1="3" y2="7"></line><line x1="16" x2="16" y1="3" y2="7"></line></svg>
</span>
<h4>Your tournament, your way</h4>
</div>
<p>Sync to Apple or Google Calendar. Print a wall poster, a full calendar, or the group standings. Only the matches you actually care about.</p>
<div class="thumb">
<img alt="Schedule screen with Sync to Apple and Sync to Google buttons plus printable tournament options" src="./screenshots/schedule.png"/>
<span class="caption">Live preview · all 104 matches</span>
</div>
</div>
<!-- 5. Personalized News -->
<div class="card">
<div class="ic-row">
<span aria-hidden="true" class="ic">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M4 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4z"></path><line x1="8" x2="16" y1="8" y2="8"></line><line x1="8" x2="16" y1="12" y2="12"></line><line x1="8" x2="13" y1="16" y2="16"></line></svg>
</span>
<h4>News, tuned to you</h4>
</div>
<p>World Cup stories curated to the teams you follow, summarised so you can scan in seconds. AI-shortened, human-flavoured.</p>
<div class="thumb">
<img alt="News screen with World Cup stories about De Ligt, Mbappé, and Varane" src="./screenshots/news.png"/>
<span class="caption">Live preview · personalised to your teams</span>
</div>
</div>
<!-- 6. Daily Trivia -->
<div class="card">
<div class="ic-row">
<span aria-hidden="true" class="ic">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M9 18h6m-3 3v-3"></path><path d="M12 3a6 6 0 0 0-4 10.5c.8 1 1.3 2 1.5 3.5h5c.2-1.5.7-2.5 1.5-3.5A6 6 0 0 0 12 3z"></path></svg>
</span>
<h4>Daily World Cup trivia</h4>
</div>
<p>One brain-teaser a day to see how deep your fandom runs. Multiple choice, four languages, instant feedback.</p>
<div class="thumb">
<img alt="World Cup Trivia screen with a question about Goal-Line Technology" src="./screenshots/trivia.png"/>
<span class="caption">Live preview · new question daily</span>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
     FINAL CTA
     ═══════════════════════════════════════════════════ -->
<section aria-label="Get the app" class="final-cta" id="get-the-app">
<div class="final-cta-inner">
<span class="section-label">Join the beta</span>
<h2>Live the World Cup. Keep the stories.</h2>
<p>Free during beta. NFL launches in September. More sports to follow.</p>
<div class="ctas">
<a href="/app.html" class="cta-primary">Open the app &rarr;</a>
<a class="cta-secondary" href="/how-it-works.html">Or read how it works →</a>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════ -->
<footer class="footer">
<div class="footer-inner">
<a aria-label="237 Sports" class="hdr-logo" href="/">
<svg aria-hidden="true" class="shield" viewbox="0 0 56 70">
<path d="M8 4 L48 4 Q52 4 52 8 L52 38 Q52 56 28 66 Q4 56 4 38 L4 8 Q4 4 8 4 Z" fill="#003262"></path>
<path d="M8 4 L48 4 Q52 4 52 8 L52 15 L4 15 L4 8 Q4 4 8 4 Z" fill="#FDB515"></path>
<text fill="#FFFFFF" font-family="Geist, -apple-system, sans-serif" font-size="16" font-weight="900" letter-spacing="-0.5" text-anchor="middle" x="28" y="38">237</text>
<text fill="#FDB515" font-family="Geist, -apple-system, sans-serif" font-size="5.5" font-weight="700" letter-spacing="1.4" text-anchor="middle" x="28" y="50">SPORTS</text>
</svg>
<span class="footer-tag">Built by fans, for fans.</span>
</a>
<nav aria-label="Footer" class="footer-links">
<a href="/how-it-works.html">How it works</a>
<a href="#features">Features</a>
<a href="/schedule.html">Schedule</a>
<a href="/about.html">About</a>
<a href="/privacy.html">Privacy</a>
<a href="/support.html">Support</a>
</nav>
<div class="footer-right">
<span class="footer-copy">v1.0 BETA · WORLD CUP 2026 · © 237 SPORTS</span>
</div>
</div>
</footer>
<!-- ═══════════════════════════════════════════════════
     SCRIPTS
     ═══════════════════════════════════════════════════ -->
<script>
// Live countdown to Mexico vs South Africa, June 11 2026 7:00 PM PT (= June 12 02:00 UTC)
(function() {
  const target = new Date('2026-06-11T19:00:00Z').getTime();
  const dEl = document.getElementById('cd-days');
  const hEl = document.getElementById('cd-hours');
  const mEl = document.getElementById('cd-mins');
  const sEl = document.getElementById('cd-secs');
  const pad = n => String(Math.max(0, n)).padStart(2, '0');

  function tick() {
    const now = Date.now();
    const diff = Math.max(0, target - now);
    const days  = Math.floor(diff / 86400000);
    const hours = Math.floor((diff % 86400000) / 3600000);
    const mins  = Math.floor((diff % 3600000) / 60000);
    const secs  = Math.floor((diff % 60000) / 1000);
    dEl.textContent = pad(days);
    hEl.textContent = pad(hours);
    mEl.textContent = pad(mins);
    sEl.textContent = pad(secs);
  }
  tick();
  setInterval(tick, 1000);
})();

// Gentle scroll-reveal on sections
(function() {
  const reveal = document.querySelectorAll('.bridge, .historic, .feat-section, .final-cta');
  reveal.forEach(el => el.classList.add('reveal'));
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('is-visible');
        io.unobserve(e.target);
      }
    });
  }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });
  reveal.forEach(el => io.observe(el));
})();
</script>
<script>
/* FSCARD-AUTOFIT-V1 — scale each card's story text to fill without overflowing.
   Grows short cards, shrinks long ones, so the foot/logo never clips. */
(function(){
  function fitCard(card){
    var story = card.querySelector('.fscard__story');
    if(!story) return;
    var w = card.clientWidth;
    if(!w) return;
    var min = w*0.030, max = w*0.060, best = min;
    var lo = min, hi = max;
    for(var i=0;i<14;i++){
      var mid = (lo+hi)/2;
      story.style.fontSize = mid.toFixed(2)+'px';
      if(card.scrollHeight <= card.clientHeight){ best = mid; lo = mid; }
      else { hi = mid; }
    }
    story.style.fontSize = best.toFixed(2)+'px';
  }
  function fitAll(){ document.querySelectorAll('.fscard').forEach(fitCard); }
  function run(){
    fitAll();
    if(document.fonts && document.fonts.ready){ document.fonts.ready.then(fitAll); }
  }
  var t;
  window.addEventListener('resize', function(){ clearTimeout(t); t=setTimeout(fitAll,150); });
  if(document.readyState!=='loading'){ run(); }
  else { document.addEventListener('DOMContentLoaded', run); }
})();
</script>
<script>
/* I18N-ENGINE-V1 — remember language choice for the /app/* tier */
(function(){
  try {
    var m = location.pathname.match(/^\/([a-z]{2})(\/|$)/);
    var lang = (m && m[1]) || 'en';
    document.cookie = 'site_lang=' + lang + ';path=/;max-age=31536000;samesite=lax';
  } catch(e){}
})();
</script></body>
</html>
