/* ============================================================
   Leagues — Marketing Site
   Design tokens (light + dark) and base styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --bg:            #f3f1ec;
  --surface:       #ffffff;
  --surface-2:     #f7f5f0;
  --line:          #e7e4dc;
  --line-strong:   #d8d4ca;

  /* Ink */
  --ink:           #0e1013;
  --ink-2:         #30343a;
  --muted:         #7a7b82;

  /* Accents */
  --sun:           #ffd23f;
  --sun-deep:      #f5be00;
  --plum:          #5b3df5;
  --coral:         #ff6b4a;
  --mint:          #5de3a5;
  --sky:           #a6e4ff;

  /* Accent tints (light) */
  --sun-soft:      #fff6d6;
  --plum-soft:     #ece8ff;
  --coral-soft:    #ffe6df;
  --mint-soft:     #ddf8ec;
  --sky-soft:      #e3f5ff;

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(14,16,19,.05), 0 1px 1px rgba(14,16,19,.03);
  --shadow-md:     0 8px 28px -12px rgba(14,16,19,.18), 0 2px 6px rgba(14,16,19,.05);
  --shadow-lg:     0 30px 60px -22px rgba(14,16,19,.30), 0 6px 16px rgba(14,16,19,.06);
  --shadow-sun:    0 14px 34px -10px rgba(245,190,0,.55);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;

  --maxw: 1200px;
  --nav-h: 72px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

.dark {
  --bg:            #0e1013;
  --surface:       #15171c;
  --surface-2:     #191c22;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.14);

  --ink:           #f4f3ef;
  --ink-2:         #c9ccd2;
  --muted:         #8b8d96;

  --sun-soft:      rgba(255,210,63,.12);
  --plum-soft:     rgba(91,61,245,.18);
  --coral-soft:    rgba(255,107,74,.15);
  --mint-soft:     rgba(93,227,165,.14);
  --sky-soft:      rgba(166,228,255,.14);

  --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow-md:     0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:     0 30px 60px -20px rgba(0,0,0,.7);
  --shadow-sun:    0 16px 40px -12px rgba(245,190,0,.30);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--sun); color: #0e1013; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.section { padding-block: 96px; }

.mt-4 { margin-top: 32px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--sun)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--sun);
  color: #0e1013;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sun); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { transform: translateY(-2px); background: var(--surface); border-color: var(--ink); }

.btn-dark {
  background: var(--ink);
  color: var(--bg);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-lg { padding: 17px 28px; font-size: 16px; }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: var(--r-sm); }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.chip .sw { width: 8px; height: 8px; border-radius: 2px; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm);
}

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.input, textarea.input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 13px 15px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
}
.input::placeholder { color: var(--muted); }
.input:focus, textarea.input:focus {
  border-color: var(--sun);
  box-shadow: 0 0 0 4px var(--sun-soft);
}
textarea.input { resize: vertical; min-height: 130px; }

/* ---------- utility ---------- */
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.center { text-align: center; }
.divider { height: 1px; background: var(--line); border: 0; }

/* Reveal is static (always visible). The preview engine freezes CSS
   transitions/animations at their first frame, so entrance animations are
   intentionally omitted to guarantee content always renders. */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- interactions ---------- */
.hover-lift { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .hero-preview { max-width: 520px; }
  .feat-grid { grid-template-columns: repeat(2,1fr) !important; }
  .feat-big { grid-column: span 2 !important; }
}

@media (max-width: 880px) {
  .section { padding-block: 64px; }
  .wrap { padding-inline: 20px; }
  .nav-links { display: none !important; }
  .nav-cta-ghost { display: none !important; }
  .nav-cta-primary { display: none !important; }   /* moved into the burger menu on mobile */
  .nav-burger { display: grid !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-grid > div:nth-child(3) { border-left: none !important; }
  .stats-grid > div { border-top: 1px solid var(--line); }
  .stats-grid > div:margin-child(-n+2) { border-top: none; } /* fixed syntax child selection below */
  .stats-grid > div:nth-child(-n+2) { border-top: none; }
  .how-grid, .feat-grid, .price-grid { grid-template-columns: 1fr !important; }
  .feat-big { grid-column: span 1 !important; }
  .fs-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .fs-grid > div { order: initial !important; min-width: 0; }
  /* On mobile, always stack the text column (the one carrying the <h2>) ABOVE its
     visual, regardless of DOM order or the desktop `order` swap. This is the root
     fix for every feature-showcase section site-wide, not just one. */
  .fs-grid > div:has(h2)        { order: 0 !important; }
  .fs-grid > div:not(:has(h2))  { order: 1 !important; overflow-x: auto; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-grid > div { border-left: none !important; border-top: 1px solid var(--line); }
  .stats-grid > div:first-child { border-top: none; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .hero-float { position: static !important; margin-top: 16px; }
  h1 { font-size: 40px !important; }
}