/* Gully Cricket Scorer — marketing/legal site
   Palette ported from the app's "Sunfire" theme preset (lib/shared/theme/app_theme.dart) */

:root {
  --primary: #B84800;
  --primary-gradient-end: #E8A020;
  --accent: #8B2500;
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --surface-alt: #FFF4DC;
  --ink: #1A0800;
  --ink2: #4A2C18;
  --ink3: #7F5030;
  --btn-gradient-end: #6B1A00;
  --card-border: #FFDFA0;
  --accent-on-dark: #FFD585;
  --win-result: #1A6020;
  --max-width: 1080px;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: var(--ink);
}

a { color: var(--accent); }
a:hover { color: var(--primary); }

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

/* Header */
header.site-header {
  background: linear-gradient(120deg, var(--primary), var(--primary-gradient-end));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(26, 8, 0, 0.15);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* The actual ball from the app icon, rather than a gradient approximation of
   one. The source image is square with dark corners instead of a transparent
   PNG: border-radius clips the corners away, and a JPEG of a photograph is a
   fraction of the weight the same artwork costs as an alpha PNG. The white
   ring that used to separate the gradient circle from the dark header is gone
   — the artwork already reads as a distinct object against it. */
.brand .ball {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: url('../icons/ball.jpg') center / cover no-repeat;
  flex-shrink: 0;
}

nav.primary-nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
nav.primary-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  opacity: 0.92;
}
nav.primary-nav a:hover { opacity: 1; text-decoration: underline; }

/* Hero */
.hero {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  background-size: 160% 160%;
  animation: heroDrift 14s ease-in-out infinite alternate;
  color: #fff;
  padding: 72px 0 96px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  right: -10%;
  top: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), rgba(255,107,0,0.15) 55%, transparent 70%);
  animation: glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #fff;
  margin: 0 0 18px;
}

.hero p.lead {
  font-size: 1.15rem;
  max-width: 46ch;
  color: #FFF0D0;
  margin: 0 0 32px;
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.12); }

.badge-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #FFE3B0;
}

/* Phone mockup */
.phone-mock {
  background: var(--ink);
  border-radius: 34px;
  padding: 14px;
  box-shadow: 0 30px 60px rgba(26,8,0,0.35);
  max-width: 280px;
  margin: 0 auto;
  animation: phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}
.phone-screen {
  background: var(--bg);
  border-radius: 22px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.phone-screen .app-bar {
  background: linear-gradient(120deg, var(--primary), var(--primary-gradient-end));
  color: #fff;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
}
.phone-screen .score-block {
  padding: 22px 16px;
  text-align: center;
}
.phone-screen .score-block .score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  color: var(--primary);
}
.phone-screen .score-block .overs {
  color: var(--ink3);
  font-size: 0.85rem;
  margin-top: 4px;
}
.phone-screen .chip-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
  flex-wrap: wrap;
}
.phone-screen .chip {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: var(--ink3);
}
.phone-screen .chip.four { background: var(--win-result); }
.phone-screen .chip.six { background: var(--accent); }
.phone-screen .chip.wicket { background: #8B0000; }
.in .phone-screen .chip {
  opacity: 0;
  transform: scale(0.3);
  animation: chipPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.in .phone-screen .chip:nth-child(1) { animation-delay: 0.4s; }
.in .phone-screen .chip:nth-child(2) { animation-delay: 0.9s; }
.in .phone-screen .chip:nth-child(3) { animation-delay: 1.4s; }
.in .phone-screen .chip:nth-child(4) { animation-delay: 1.9s; }
.in .phone-screen .chip:nth-child(5) { animation-delay: 2.4s; }
.in .phone-screen .chip:nth-child(6) { animation-delay: 2.9s; }
.phone-screen .app-bar .live-tag { display: inline-flex; align-items: center; }
.phone-screen .list-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--card-border);
  font-size: 0.85rem;
  color: var(--ink2);
}

/* Sections */
section { padding: 72px 0; }
section.alt { background: var(--surface-alt); }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 12px; }
.section-head p { color: var(--ink2); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(26, 8, 0, 0.14);
  border-color: var(--primary-gradient-end);
}
.feature-card .icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-gradient-end));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-card:hover .icon { transform: scale(1.12) rotate(-6deg); }
.feature-card h3 { font-size: 1.15rem; margin: 0 0 8px; font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: normal; }
.feature-card p { color: var(--ink2); font-size: 0.95rem; margin: 0; }

/* Forte spotlight — the zero-setup pitch */
.spotlight {
  background: linear-gradient(150deg, var(--ink) 0%, #3A1500 70%, #6B2400 100%);
  background-size: 180% 180%;
  animation: heroDrift 14s ease-in-out infinite alternate;
  border-radius: 26px;
  padding: 60px 48px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.spotlight::after {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(232,160,32,0.4), transparent 65%);
  animation: glowBreathe 7s ease-in-out infinite;
}
.spotlight > * { position: relative; }
.spotlight .eyebrow { color: var(--accent-on-dark); }
.spotlight h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 10px 0 14px;
  max-width: 22ch;
}
.spotlight p.blurb {
  color: #E8C9A0;
  max-width: 58ch;
  margin: 0 0 40px;
  font-size: 1.05rem;
}

/* Animated 3-step flow */
.step-flow {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.step-card {
  flex: 1 1 200px;
  background: rgba(255, 248, 236, 0.07);
  border: 1px solid rgba(255, 213, 133, 0.28);
  border-radius: 16px;
  padding: 22px 20px;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.step-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-on-dark);
  background: rgba(255, 248, 236, 0.12);
}
.in .step-card { opacity: 0; transform: translateY(24px); animation: stepIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.in .step-card:nth-child(1) { animation-delay: 0.15s; }
.in .step-card:nth-child(3) { animation-delay: 0.55s; }
.in .step-card:nth-child(5) { animation-delay: 0.95s; }
@keyframes stepIn { to { opacity: 1; transform: none; } }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-gradient-end), var(--primary));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.step-card h3 {
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: 1.02rem;
  margin: 0 0 6px;
}
.step-card p { color: #D9B58C; font-size: 0.88rem; margin: 0; }
.step-card .demo-line {
  margin-top: 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--accent-on-dark);
  font-weight: 600;
}
.step-arrow {
  align-self: center;
  color: var(--accent-on-dark);
  font-size: 1.4rem;
  flex: 0 0 auto;
  animation: nudge 1.4s ease-in-out infinite;
}
.spotlight .later-note {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(26, 96, 32, 0.25);
  border: 1px solid rgba(160, 255, 170, 0.35);
  border-radius: 999px;
  padding: 10px 20px;
  color: #C9F0CC;
  font-size: 0.9rem;
  opacity: 0;
}
.in .later-note { animation: fadeUp 0.5s ease 1.5s forwards; }

/* Upcoming-feature badge */
.soon-badge {
  display: inline-block;
  background: linear-gradient(120deg, var(--primary), var(--primary-gradient-end));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 860px) {
  .spotlight { padding: 40px 24px; }
  .step-flow { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 24px; }
}

/* Strip / stats */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  text-align: center;
}
.strip .stat .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  color: var(--primary);
}
.strip .stat .label { color: var(--ink2); font-size: 0.88rem; }

/* Download CTA */
.download-cta {
  background: linear-gradient(160deg, var(--ink) 0%, #3A1500 60%, #6B2400 100%);
  background-size: 180% 180%;
  animation: heroDrift 12s ease-in-out infinite alternate;
  color: #fff;
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.download-cta::before {
  content: '';
  position: absolute;
  left: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(232,160,32,0.35), transparent 65%);
  animation: ballFloat 8s ease-in-out infinite;
}
.download-cta > * { position: relative; }
.download-cta h2 { color: #fff; }
.download-cta p { color: #E8C9A0; max-width: 52ch; margin: 0 auto 28px; }

.store-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px 18px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.store-badge:hover {
  transform: translateY(-3px);
  border-color: var(--accent-on-dark);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  color: #fff;
}
.store-badge.disabled { opacity: 0.55; pointer-events: none; }
.store-badge strong { display: block; font-size: 1rem; }

/* Footer */
footer.site-footer {
  background: var(--ink);
  color: #E8C9A0;
  padding: 48px 0 28px;
  font-size: 0.9rem;
}
footer.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
footer.site-footer h4 {
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: 0.95rem;
  margin: 0 0 14px;
}
footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
footer.site-footer li { margin-bottom: 8px; }
footer.site-footer a { color: #E8C9A0; text-decoration: none; }
footer.site-footer a:hover { color: var(--accent-on-dark); text-decoration: underline; }
footer.site-footer .fine-print {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  color: #B08560;
  font-size: 0.82rem;
}

/* Legal pages */
main.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
main.legal h1 { font-size: 2.2rem; margin-bottom: 4px; }
main.legal .updated { color: var(--ink3); font-size: 0.9rem; margin-bottom: 40px; }
main.legal h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: 1.3rem;
  margin-top: 40px;
  color: var(--accent);
}
main.legal h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: 1.05rem;
  margin-top: 24px;
}
main.legal p, main.legal li { color: var(--ink2); }
main.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.9rem; }
main.legal th, main.legal td { text-align: left; padding: 10px; border: 1px solid var(--card-border); vertical-align: top; }
main.legal th { background: var(--surface-alt); }
.legal-callout {
  background: var(--surface-alt);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0;
}
.legal-callout p { margin: 0; color: var(--ink2); font-size: 0.92rem; }

/* ══════════════════════════════════════════════════════════════
   FEATURES PAGE — animation system + section layouts
   ══════════════════════════════════════════════════════════════ */

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* Features hero */
.features-hero {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  background-size: 160% 160%;
  animation: heroDrift 14s ease-in-out infinite alternate;
  color: #fff;
  padding: 84px 0 110px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@keyframes heroDrift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
.features-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  margin: 0 0 16px;
}
.features-hero p.lead {
  color: #FFF0D0;
  font-size: 1.15rem;
  max-width: 54ch;
  margin: 0 auto;
}
/* Same ball as the app icon, the favicon and the brand mark in the header, so
   the one object appears everywhere rather than three different drawings of a
   cricket ball.
   The inset shadow and the dashed ::before seam are both gone: they existed to
   give a flat gradient circle the appearance of a lit, stitched ball, and the
   photograph already has its own shading and its own seam. Only the drop
   shadow is kept, because that describes the ball's relationship to the page
   rather than its own surface. */
.hero-ball {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: url('../icons/ball.jpg') center / cover no-repeat;
  box-shadow: 0 24px 48px rgba(26,8,0,0.35);
  animation: ballFloat 7s ease-in-out infinite;
}
.hero-ball.b1 { top: 12%; left: 6%; animation-delay: 0s; }
.hero-ball.b2 { bottom: -30px; right: 8%; width: 180px; height: 180px; opacity: 0.85; animation-delay: -3s; }
@keyframes ballFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-26px) rotate(14deg); }
}

/* Sticky pill nav */
.section-pills {
  position: sticky;
  top: 64px;
  z-index: 9;
  background: rgba(255, 248, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
  padding: 12px 0;
}
.section-pills .container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-pills .container::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--card-border);
  background: var(--surface);
  color: var(--ink2);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.pill:hover {
  border-color: var(--primary);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Alternating feature blocks */
.feat-block { padding: 88px 0; }
.feat-block.alt { background: var(--surface-alt); }
.feat-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feat-grid-2.flip .feat-copy { order: 2; }
.feat-grid-2.flip .feat-visual { order: 1; }
.feat-copy h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin: 10px 0 14px; }
.feat-copy p.blurb { color: var(--ink2); font-size: 1.02rem; }

.chip-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.chip-tag {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}
.feat-block.alt .chip-tag { background: var(--bg); }

/* How-to steps */
.howto {
  margin-top: 8px;
  border-left: 3px solid var(--primary-gradient-end);
  padding-left: 0;
}
.howto-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 14px 22px;
}
.howto ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.howto li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 22px;
  color: var(--ink2);
  font-size: 0.95rem;
}
.howto li::before {
  content: counter(step);
  position: absolute;
  left: -16px;
  top: -1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-gradient-end));
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(184, 72, 0, 0.35);
}
.howto li strong { color: var(--ink); }

/* Visual panels */
.feat-visual { display: flex; justify-content: center; }
.demo-card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(26, 8, 0, 0.12);
  padding: 24px;
  width: 100%;
  max-width: 380px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.demo-card:hover { transform: translateY(-6px); box-shadow: 0 32px 68px rgba(26,8,0,0.18); }
.demo-card .demo-head {
  background: linear-gradient(120deg, var(--primary), var(--primary-gradient-end));
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 0.92rem;
}
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #FFD585;
  display: inline-block;
  margin-right: 6px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 133, 0.6); }
  55%      { box-shadow: 0 0 0 8px rgba(255, 213, 133, 0); }
}

/* Live scoring demo — self-playing over */
.big-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.4rem;
  color: var(--primary);
  text-align: center;
  line-height: 1;
}
.big-score .overs-sub { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--ink3); margin-top: 6px; letter-spacing: normal; }
.over-row { display: flex; gap: 8px; justify-content: center; margin: 20px 0 8px; }
.ball-chip {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--ink3);
  opacity: 0;
  transform: scale(0.3);
}
.in .ball-chip { animation: chipPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.in .ball-chip:nth-child(1) { animation-delay: 0.3s; }
.in .ball-chip:nth-child(2) { animation-delay: 0.9s; }
.in .ball-chip:nth-child(3) { animation-delay: 1.5s; }
.in .ball-chip:nth-child(4) { animation-delay: 2.1s; }
.in .ball-chip:nth-child(5) { animation-delay: 2.7s; }
.in .ball-chip:nth-child(6) { animation-delay: 3.3s; }
@keyframes chipPop {
  to { opacity: 1; transform: scale(1); }
}
.ball-chip.four { background: var(--win-result); }
.ball-chip.six { background: var(--accent); }
.ball-chip.wicket { background: #8B0000; }
.ball-chip.wide { background: #AA3E00; font-size: 0.75rem; }
.demo-batters { border-top: 1px solid var(--card-border); margin-top: 16px; padding-top: 4px; }
.demo-batters .list-row { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 0.88rem; color: var(--ink2); }

/* Coin flip demo */
.coin-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 12px 0; }
.coin {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9B8, #E8A020 55%, #8B5A00 100%);
  border: 4px solid #B8791A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: #6B4400;
  box-shadow: 0 12px 28px rgba(139, 90, 0, 0.35);
}
.in .coin { animation: coinFlip 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) 0.4s; }
@keyframes coinFlip {
  0%   { transform: rotateX(0) translateY(0); }
  30%  { transform: rotateX(720deg) translateY(-70px); }
  60%  { transform: rotateX(1440deg) translateY(0); }
  75%  { transform: rotateX(1620deg) translateY(-16px); }
  100% { transform: rotateX(1800deg) translateY(0); }
}
.toss-result {
  background: var(--surface-alt);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.9rem;
  color: var(--ink2);
  opacity: 0;
}
.in .toss-result { animation: fadeUp 0.5s ease 2.9s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Handoff demo */
.handoff-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 0;
}
.mini-phone {
  width: 84px; height: 150px;
  border-radius: 14px;
  background: var(--ink);
  padding: 7px;
  flex-shrink: 0;
}
.mini-phone .mini-screen {
  background: var(--bg);
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mini-qr {
  width: 44px; height: 44px;
  background:
    repeating-linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--ink) 0 4px, var(--bg) 4px 8px);
  border: 3px solid var(--ink);
  border-radius: 4px;
}
.mini-score { font-family: 'Bebas Neue', sans-serif; color: var(--primary); font-size: 1.2rem; }
.handoff-arrow {
  font-size: 1.6rem;
  color: var(--accent);
  animation: nudge 1.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(8px); opacity: 1; }
}
.no-signal-badge {
  text-align: center;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #8B0000;
  letter-spacing: 0.06em;
}

/* Theme swatch strip */
.theme-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.theme-swatch {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--surface);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.theme-swatch:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 32px rgba(26,8,0,0.18); }
.theme-swatch .sw-top { height: 72px; }
.theme-swatch .sw-label {
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink2);
  text-align: center;
}

/* Stat counters */
.counter-strip { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; text-align: center; }
.counter-strip .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  color: var(--primary);
}
.counter-strip .label { color: var(--ink2); font-size: 0.88rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--primary), var(--primary-gradient-end));
  background-size: 160% 160%;
  animation: heroDrift 12s ease-in-out infinite alternate;
  border-radius: 24px;
  color: #fff;
  text-align: center;
  padding: 56px 32px;
}
.cta-band h2 { color: #fff; margin: 0 0 10px; }
.cta-band p { color: #FFF0D0; margin: 0 0 26px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ball-chip { opacity: 1; transform: none; }
  .toss-result { opacity: 1; }
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .phone-mock { margin-top: 24px; }
  footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  nav.primary-nav { display: none; }
  .feat-grid-2 { grid-template-columns: 1fr; gap: 36px; }
  .feat-grid-2.flip .feat-copy { order: 1; }
  .feat-grid-2.flip .feat-visual { order: 2; }
  .section-pills { top: 0; }
  .feat-block { padding: 60px 0; }
}