/* ===================== GullySport — "Gully Shield" =====================
   Retheme 30 Sep 2026 to the official logo (shield, runner, stumps and ball;
   bold italic "GULLY" in navy, "SPORT" in orange). Every colour below was
   sampled from the logo artwork, then darkened only where text needs it.
   Supersedes "First Light" (25 Aug 2026), which had the same idea (indigo ink,
   saffron, marigold) before the logo existed.

   WHY LIGHT, WHEN GULLYREELS IS DARK
   1. Sibling identity. GullyReels is a lean-back watching product; GullySport
      is a lean-forward doing product. Opposite energy, no confusing the two.
   2. Sunlight. This gets used standing at a boundary at 10am on a cheap
      Android. Dark UIs become mirrors in direct sun, and brackets and
      scorecards are dense data, which reads better dark on light. The logo's
      own light lockup sits on a cool mist white, so the page does too.

   LOGO COLOURS (sampled)
     navy    #063163  "GULLY", shield border, app icon ground
     orange  #ED601B  "SPORT", runner
     amber   #F6B21E  shield fill, ball trail
     midnight #081422 dark lockup ground (footer, dark panels)

   Contrast was measured on all four light surfaces (page, alt band, white,
   surface-2). Numbers are the worst of the four unless noted.
   ====================================================================== */

:root {
  /* Surfaces — cool mist, from the light logo lockup */
  --bg-page:   #F4F7FA;
  --bg-alt:    #EDF3F8;   /* alt band. #E6EEF5 looked nicer but pushed green and
                             blue ink under 4.5, so this is as deep as it goes. */
  --surface:   #FFFFFF;
  --surface-2: #F9FBFC;

  /* Ink — logo navy and navy-tinted greys */
  --ink:       #063163;   /* 11.01 */
  --ink-soft:  #2A4468;   /*  8.43 */
  --ink-muted: #44597A;   /*  6.06 */
  --ink-dim:   #566A88;   /*  4.70 */

  --border:        rgba(6, 49, 99, 0.12);
  --border-strong: rgba(237, 96, 27, 0.38);

  /* ACCENTS — split into "ink" and "fill" versions.
     The logo orange scores 3.34 with white and 3.87 with navy, so it can't
     carry normal-size text either way. Fills use the true logo colours; text
     uses the darkened inks. The old names stay because ~20 call sites use
     var(--violet) / var(--pink) for TEXT.
     Rule of thumb: --violet/--pink = color: , --saffron/--sindoor = background: . */
  --violet: #B8460E;   /* orange INK. Links, active states. 4.79 */
  --pink:   #C22B22;   /* red INK. 5.13 */
  --orange: #F6B21E;   /* amber — decoration only, never carries text */
  --blue:   #2563EB;   /* information. 4.62 */
  --cyan:   #0A7C56;   /* kept name; green INK. 4.66 */

  --saffron:  #ED601B;  /* logo orange. Fills and decoration only. */
  --saffron-deep: #C74C10; /* orange that carries WHITE text (4.72) */
  --sindoor:  #E0362C;
  --marigold: #F6B21E;  /* logo amber. Carries NAVY text (6.95). */
  --live:     #B32B22;  /* white on this = 6.39 */
  --win:      #0B875D;  /* white on this = 4.82 */

  --navy:     #063163;
  --midnight: #081422;  /* white 18.5, amber 9.97, logo orange 5.55 */

  /* GRADIENTS — these carry WHITE text (eyebrow, nav active, badges, avatars).
     Navy to burnt orange is the wordmark read left to right. Swept at 5%
     steps; the worst point is noted. */
  --grad-primary: linear-gradient(135deg, #063163 0%, #B8460E 100%);          /* worst 5.36 */
  --grad-cool:    linear-gradient(135deg, #063163 0%, #0B4A8F 100%);          /* worst 8.79 */
  --grad-alt:     linear-gradient(135deg, #B8460E 0%, #B32B22 100%);          /* worst 5.36 */
  --grad-dark:    linear-gradient(160deg, #081422 0%, #063163 60%, #0B4A8F 100%);

  /* The ball trail. DECORATION ONLY — if it must carry a label, the label is
     navy, never white. */
  --grad-sun:     linear-gradient(135deg, #F6B21E 0%, #ED601B 100%);
  --grad-dawn:    radial-gradient(760px 240px at 72% -80px, rgba(246, 178, 30, 0.55), transparent 70%);

  --shadow-soft: 0 14px 34px rgba(6, 49, 99, 0.10);
  --shadow-lg:   0 28px 64px rgba(6, 49, 99, 0.18);
  --glow-violet: 0 0 0 rgba(237, 96, 27, 0);

  --max-width: 1180px;
  --radius: 18px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Display face for the wordmark and big headings: heavy italic, like the logo. */
  --font-display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink-muted);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(42% 38% at 10% 6%, rgba(237, 96, 27, 0.12), transparent 60%),
    radial-gradient(38% 38% at 92% 4%, rgba(6, 49, 99, 0.10), transparent 60%),
    radial-gradient(46% 46% at 50% 105%, rgba(246, 178, 30, 0.12), transparent 60%),
    radial-gradient(30% 30% at 80% 60%, rgba(11, 74, 143, 0.06), transparent 60%),
    var(--bg-page);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.section { padding: 100px 0; }
.section--tight { padding: 64px 0; }

.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(237, 96, 27, 0.25);
}

h1, h2, h3, h4 { font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
/* The two biggest heading levels speak in the logo's voice: heavy italic. */
h1, h2 { font-family: var(--font-display); font-style: italic; font-weight: 900; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); margin-bottom: 18px; }
h3 { font-size: 1.25rem; margin-bottom: 10px; }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

p { color: var(--ink-muted); }
p + p { margin-top: 14px; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

/* Primary is solid logo navy (paper text 12.0). The orange/amber gradient
   can't carry white text, so it stays decorative. */
.btn-primary {
  background: var(--ink);
  color: var(--bg-page);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(6, 49, 99, 0.30); }
.btn-primary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* The high-energy CTA — "Register your team", "Join this tournament".
   The logo orange fails with both white (3.34) and navy (3.87), so the button
   uses the deepened orange with WHITE text (4.72). Hover goes darker, not
   lighter, so the label never drops below AA. */
.btn-accent {
  background: var(--saffron-deep);
  color: #fff;
  box-shadow: 0 12px 28px rgba(237, 96, 27, 0.32);
}
.btn-accent:hover {
  transform: translateY(-3px);
  background: var(--violet);
  box-shadow: 0 18px 40px rgba(237, 96, 27, 0.42);
}
.btn-accent:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); background: #fff; box-shadow: 0 10px 24px rgba(237, 96, 27, 0.15); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 247, 250, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

.brand { display: flex; flex: none; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }

/* The logo shield, cut from the brand artwork. */
.brand-mark {
  width: auto;
  height: 40px;
  flex: none;
  filter: drop-shadow(0 4px 8px rgba(6, 49, 99, 0.18));
}

/* The wordmark, set live so it stays sharp: heavy italic caps, "GULLY" in navy,
   "SPORT" in logo orange with its underline swoosh. The orange passes as large
   bold text (3.11 on paper, needs 3.0). */
.brand-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 0.12em;   /* italic overhang */
}
.bw-gully { color: var(--navy); }
.bw-sport {
  color: var(--saffron);
  margin-left: 0.22em;
  padding-bottom: 1px;
  background: linear-gradient(var(--saffron), var(--saffron)) left bottom / 100% 2px no-repeat;
}

.brand-sub {
  display: block;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-transform: none;
}

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-links a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover { color: var(--violet); background: rgba(237, 96, 27, 0.08); }
.nav-links a.active { color: #fff; background: var(--grad-primary); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 110px 0 100px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { max-width: 560px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--grad-cool);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 24px;
  box-shadow: 0 10px 24px rgba(14, 159, 110, 0.3);
}

.hero-panel {
  position: relative;
  background: var(--grad-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-lg);
  color: #fff;
  overflow: hidden;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(224, 54, 44, 0.35), transparent 60%);
  pointer-events: none;
}

.hero-panel h4 {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}

.stat-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }

.hero-vertical-list { position: relative; display: flex; flex-direction: column; gap: 10px; }

.hero-vertical-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-cool); flex-shrink: 0; box-shadow: 0 0 10px rgba(14, 159, 110, 0.8); }

/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 30px 30px;
  box-shadow: 0 10px 28px rgba(6, 49, 99, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-primary);
}

.card:nth-of-type(3n+2)::before { background: var(--grad-cool); }
.card:nth-of-type(3n)::before { background: var(--grad-alt); }

.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--border-strong); }

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--grad-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px rgba(237, 96, 27, 0.3);
}

.card:nth-of-type(3n+2) .card-icon { background: var(--grad-cool); box-shadow: 0 10px 22px rgba(14, 159, 110, 0.3); }
.card:nth-of-type(3n) .card-icon { background: var(--grad-alt); box-shadow: 0 10px 22px rgba(224, 54, 44, 0.3); }

.card p { font-size: 0.94rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.tag {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--violet);
  border: 1px solid var(--border-strong);
}

/* ---------- Values list ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.value-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  background: var(--surface);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(6, 49, 99, 0.05);
}

.value-item .num {
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 8px;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Leadership ---------- */
.leader-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

.leader-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 16px 34px rgba(237, 96, 27, 0.35);
}

.leader-role { color: var(--violet); font-weight: 700; font-size: 0.92rem; margin-bottom: 16px; }

.quote-block {
  border-left: 4px solid transparent;
  border-image: var(--grad-primary) 1;
  padding: 6px 0 6px 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--ink);
  font-size: 1.08rem;
}

.resp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }

.resp-item {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--grad-primary);
  border-radius: 24px;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}

.cta-banner h2 { margin-bottom: 6px; color: #fff; }
.cta-banner p { margin: 0; color: rgba(255, 255, 255, 0.85); }
.cta-banner .btn-primary { background: #fff; color: var(--violet); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }
.cta-banner .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.25); }
.cta-banner .btn-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.cta-banner .btn-ghost:hover { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: #fff; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-soft); }
.form-row { margin-bottom: 18px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }

input, textarea, select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.94rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(237, 96, 27, 0.15);
  background: #fff;
}

textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.8rem; color: var(--ink-dim); margin-top: 14px; }

/* ---------- Contact info list ---------- */
.info-list { display: flex; flex-direction: column; gap: 22px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }

.info-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--grad-cool);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  box-shadow: 0 10px 22px rgba(14, 159, 110, 0.3);
}

.info-item h4 { font-size: 0.95rem; margin-bottom: 4px; }
.info-item p { font-size: 0.9rem; margin: 0; }

/* ---------- Notice / callout ---------- */
.callout {
  border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, rgba(237, 96, 27, 0.08), rgba(224, 54, 44, 0.08));
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 0.92rem;
  color: var(--ink);
}

.callout strong { color: var(--violet); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--grad-dark);
  padding: 60px 0 28px;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-sun);
}

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }

.footer-col h4 { font-size: 0.85rem; color: #fff; margin-bottom: 16px; }
/* Dark lockup: shield with its white keyline, "GULLY" in white. */
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 48px; width: auto; }
.footer-brand .bw-gully { color: #fff; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }
.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: 72px 0 56px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 90% 0%, rgba(237, 96, 27, 0.14), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(224, 54, 44, 0.12), transparent 60%);
  pointer-events: none;
}

.page-hero .container { position: relative; }
.page-hero p { max-width: 620px; }

/* ---------- Responsive ---------- */
/* Nine links, two buttons and the wordmark need about 1140px. Between 1181
   and 1320 the links tighten up; below that the menu collapses to the toggle
   (it used to wait until 720px, and the header ran off the side of tablets). */
@media (max-width: 1320px) {
  .nav-links a { padding: 9px 10px; font-size: 0.9rem; }
  .nav-cta .btn { padding: 10px 18px; }
}
@media (max-width: 1180px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(244, 247, 250, 0.98);
    backdrop-filter: blur(14px);
    padding: 12px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(6, 49, 99, 0.1);
  }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .site-header.open .nav-links { display: flex; }

  .nav-links a { padding: 11px 15px; font-size: 0.95rem; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > .footer-col:first-child { grid-column: 1 / -1; }
  .leader-card { grid-template-columns: 1fr; }
  .leader-avatar { max-width: 160px; }
}

@media (max-width: 720px) {
  .nav-cta .btn-ghost { display: none; }
  .grid-3, .grid-2, .grid-5 { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .resp-grid { grid-template-columns: 1fr; }
  .form-row.two { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; padding: 40px 28px; }
  .section { padding: 64px 0; }
}

/* =====================================================================
   FIRST LIGHT — engagement layer
   Components for the four mechanics: identity (player card), urgency
   (countdown), local pride (leaderboard), distribution (share).
   Everything here is additive; no existing selector is touched.
   ===================================================================== */

/* ---------- The horizon ----------
   GullyReels has a Warli figure band. GullySport's motif is a horizon line with
   the sun just breaking it — the same "made in India, made by hand" family, but
   the opposite gesture: theirs looks back at a tradition, this one looks forward
   at a morning. One decorative element, used sparingly, never behind text. */
.section--dawn { position: relative; background: var(--bg-alt); }
.section--dawn::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 200px;
  background: var(--grad-dawn);
  pointer-events: none;
}
.section--dawn > * { position: relative; }

.horizon {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--marigold) 18%, var(--saffron) 50%, var(--marigold) 82%, transparent);
  opacity: 0.75;
}

/* ---------- Scores ----------
   Scores are the hero content of this product, so they get display treatment:
   tabular figures so digits never jitter as a live score ticks over, and tight
   tracking so "142/6" reads as one object rather than five characters. */
.score {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.score--xl { font-size: clamp(2.4rem, 8vw, 3.6rem); }
.score--lg { font-size: clamp(1.7rem, 5vw, 2.2rem); }
.score--sm { font-size: 1.15rem; }
.score-sub { font-size: 0.8rem; font-weight: 700; color: var(--ink-dim); letter-spacing: 0.02em; }

/* ---------- Live ----------
   Exactly one animated element on any screen. A second competing pulse turns
   urgency into noise. */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--live); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px 5px 10px; border-radius: 999px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* ---------- Streak / stat pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
  background: rgba(237, 96, 27, 0.12); color: var(--violet);
  border: 1px solid rgba(237, 96, 27, 0.24);
}
.pill--win  { background: rgba(11, 135, 93, 0.12); color: var(--cyan); border-color: rgba(11, 135, 93, 0.26); }
.pill--dark { background: rgba(255, 255, 255, 0.14); color: var(--marigold); border-color: rgba(246, 178, 30, 0.3); }

/* ---------- Player card ----------
   The identity object. Deep indigo so it reads as "a thing you own" against the
   paper UI around it, and so it looks right when screenshotted into WhatsApp. */
.player-card {
  position: relative; overflow: hidden;
  background: var(--grad-dark); color: var(--bg-page);
  border-radius: 20px; padding: 24px;
  box-shadow: var(--shadow-lg);
}
.player-card::after {           /* the sun, breaking the corner */
  content: ""; position: absolute; top: -70px; right: -50px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 178, 30,0.55), transparent 68%);
  pointer-events: none;
}
.player-card > * { position: relative; }
.player-card .pc-name { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.player-card .pc-meta { font-size: 0.85rem; color: #C9D3E8; }   /* 9.58 on indigo */
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.pc-stat { text-align: center; }
.pc-stat .n {
  font-variant-numeric: tabular-nums; font-weight: 900;
  font-size: 1.7rem; line-height: 1; color: var(--marigold);
}
.pc-stat .l {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #C9D3E8; margin-top: 5px;
}

/* ---------- Countdown ---------- */
.countdown { display: flex; gap: 10px; }
.cd-unit {
  flex: 1; text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 6px;
}
.cd-unit .n {
  font-variant-numeric: tabular-nums; font-weight: 900;
  font-size: 1.9rem; line-height: 1; color: var(--ink);
}
.cd-unit .l {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 6px;
}
/* Under 48 hours the whole block warms up. Colour change, not a faster blink —
   scarcity should feel like heat, not like a fire alarm. */
.countdown--urgent .cd-unit { border-color: rgba(237, 96, 27, 0.45); background: rgba(246, 178, 30, 0.13); }
.countdown--urgent .cd-unit .n { color: var(--violet); }

.slots-left { font-size: 0.85rem; font-weight: 700; color: var(--pink); }

/* ---------- Leaderboard ---------- */
.lb { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.lb-row {
  display: grid; grid-template-columns: 34px 1fr auto;
  align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.lb-row:last-child { border-bottom: 0; }
.lb-rank { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--ink-dim); }
.lb-team { font-weight: 700; color: var(--ink); }
.lb-pts  { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--ink); }
/* "You" gets marigold, which carries indigo text at 8.86. Seeing your own row
   lit up is the entire point of a local table. */
.lb-row--me { background: rgba(246, 178, 30, 0.22); box-shadow: inset 3px 0 0 var(--saffron); }
.lb-row--me .lb-rank, .lb-row--me .lb-team, .lb-row--me .lb-pts { color: var(--ink); }

/* ---------- Share ---------- */
.btn-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px 20px; border: 0; border-radius: 999px;
  background: #188844; color: #fff;      /* computed: white = 4.52. The
     brighter #25D366 brand green scores 1.98 and is unusable behind a label. */
  font-weight: 800; font-size: 0.95rem; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-share:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(24, 136, 68, 0.35); }

/* ---------- Depth ----------
   Cards lift toward the light source in the top-right, matching the sun. */
.lift { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Anyone who has asked their OS to calm down gets a calm interface. The live dot
   stops moving but stays visible, so the information survives the accommodation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .live-dot { opacity: 1; }
}

/* Read by screen readers, not shown (page headings the design doesn't draw). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }