/* ============================================================
   SPORTERRA — Brand stylesheet
   Clean & corporate · ONE primary (Play green) + neutrals
   7 vertical colors used only as accents
   ============================================================ */

:root {
  /* Neutrals / ink */
  --ink:        #13211A;
  --ink-2:      #2B3A33;
  --muted:      #586B62;
  --line:       #E7EDEA;
  --line-2:     #D9E2DD;
  --bg:         #FFFFFF;
  --bg-soft:    #F4F8F6;
  --bg-soft-2:  #EEF4F0;

  /* Primary brand (Sporterra electric lime — from the logo) */
  --brand:      #8FD119;
  --brand-700:  #4F7A0E;
  --brand-800:  #3C5E0A;
  --brand-100:  #E8F5CC;
  --brand-50:   #F5FBE6;
  --brand-ink:  #16240A;

  /* The 7 verticals — accents only */
  --c-play:     #1A6B3C;
  --c-events:   #1A5CB5;
  --c-pro:      #6B3CB5;
  --c-market:   #F4A020;
  --c-pass:     #1AB5A0;
  --c-esports:  #7B3CF4;
  --c-tickets:  #B51A1A;

  --radius:     16px;
  --radius-sm:  12px;
  --radius-lg:  26px;
  --shadow:     0 1px 2px rgba(19,33,26,.04), 0 18px 40px -24px rgba(19,33,26,.22);
  --shadow-sm:  0 1px 2px rgba(19,33,26,.05), 0 8px 24px -18px rgba(19,33,26,.25);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--maxw); }

/* ---------- Type ---------- */
h1,h2,h3,h4,h5 { font-weight: 800; letter-spacing: -.022em; color: var(--ink); line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.018em; }
p  { color: var(--ink-2); text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--muted); font-weight: 400; line-height: 1.55; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand-700);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }
.eyebrow.center::before{ display:none; }

.text-muted-2 { color: var(--muted) !important; }

/* ---------- Buttons ---------- */
.btn { font-weight: 700; border-radius: 999px; padding: .8rem 1.5rem; letter-spacing:-.01em;
       transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-brand { background: var(--brand); color:var(--brand-ink); border:1px solid var(--brand); }
.btn-brand:hover { background: #A6E635; color:var(--brand-ink); box-shadow: 0 12px 26px -12px rgba(143,209,25,.6); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color:#fff; border:1px solid var(--ink); }
.btn-ink:hover { background:#000; color:#fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.btn-lg { padding: .95rem 1.8rem; font-size: 1.02rem; }
.btn-sm { padding: .55rem 1.1rem; font-size:.92rem; }

/* ---------- Navbar ---------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-wrap.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 28px -22px rgba(19,33,26,.45); }
.navbar { padding-top:.85rem; padding-bottom:.85rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-mark { width:34px; height:34px; flex:0 0 auto; }
.brand-plate { width:40px; height:40px; flex:0 0 auto; border-radius:11px; background:#0E1410; display:grid; place-items:center; padding:5px; }
.brand-plate-img { width:100%; height:100%; object-fit:contain; display:block; }
.brand-word { font-weight:800; font-size:1.42rem; letter-spacing:-.03em; color:var(--ink); }
.brand-word b { color: var(--brand-700); }
.navbar-nav .nav-link {
  font-weight:600; color:var(--ink-2); padding:.5rem .95rem !important; border-radius:999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color:var(--brand-700); }
.navbar-toggler { border:none; padding:.3rem .5rem; }
.navbar-toggler:focus { box-shadow:none; }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 9vw, 3.5rem) 0; }
.section-sm { padding: clamp(3rem, 6vw, 3.5rem) 0; }
.bg-soft { background: var(--bg-soft); }
.bg-ink { background: var(--ink); color:#fff; }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color:#fff; }
.bg-ink p { color: rgba(255,255,255,.72); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem,6vw,5rem); padding-bottom: clamp(3.5rem,7vw,6rem); }
.hero h1 { letter-spacing:-.035em; }
.hero-img-wrap { position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.hero-img { width:100%; height:100%; object-fit:cover; display:block; }
.img-fallback { background:
   radial-gradient(120% 120% at 80% 0%, var(--brand-100), transparent 55%),
   linear-gradient(135deg, #d7e6dd, #eef4f0); }

.pill-stat {
  position:absolute; backdrop-filter: blur(8px); background: rgba(255,255,255,.9);
  border:1px solid var(--line); border-radius: 14px; padding:.7rem .95rem; box-shadow: var(--shadow-sm);
}

.store-badge {
  display:inline-flex; align-items:center; gap:.6rem; background:var(--ink); color:#fff;
  border-radius:13px; padding:.6rem 1.1rem; text-decoration:none; transition: transform .25s var(--ease), background .25s;
}
.store-badge:hover { transform: translateY(-2px); background:#000; color:#fff; }
.store-badge i { font-size:1.7rem; }
.store-badge small { display:block; font-size:.68rem; line-height:1.2; opacity:.75; letter-spacing:.03em; white-space:nowrap; }
.store-badge b { display:block; font-size:1.02rem; line-height:1.2; letter-spacing:-.01em; white-space:nowrap; }

/* ---------- Stat strip ---------- */
.stat-num { font-size: clamp(2.2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.stat-lbl { color: var(--muted); font-weight:500; margin-top:.4rem; }

/* ---------- Vertical cards ---------- */
.vert-card {
  position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:1.6rem; height:100%; text-decoration:none; color:inherit; display:block; overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.vert-card::after{ content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--vc,var(--brand)); opacity:.0; transition:opacity .3s var(--ease);}
.vert-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.vert-card:hover::after{ opacity:1; }
.vert-ic {
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-size:1.35rem;
  color:var(--vc,var(--brand)); background: color-mix(in srgb, var(--vc,var(--brand)) 12%, #fff);
  margin-bottom:1.1rem;
}
.vert-card h3 { font-size:1.22rem; margin-bottom:.4rem; }
.vert-card .vsub { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--vc,var(--brand)); }
.vert-card p { font-size:.96rem; margin:.35rem 0 0; color:var(--muted); }
.vert-arrow { margin-top:1rem; color:var(--vc,var(--brand)); font-weight:700; font-size:.92rem; display:inline-flex; gap:.4rem; align-items:center; }

/* ---------- Step / how it works ---------- */
.step-num {
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800;
  background:var(--brand-100); color:var(--brand-700); margin-bottom:1rem; font-size:1.1rem;
}

/* ---------- Feature row ---------- */
.feat-img { width:100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit:cover; }
.feat-ic { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--brand-100); color:var(--brand-700); font-size:1.1rem; flex:0 0 auto; }
.check-li { display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.8rem; }
.check-li i { color:var(--brand-700); margin-top:.28rem; }

/* ---------- Vendor band ---------- */
.vendor-band { background:
   radial-gradient(120% 140% at 85% 10%, rgba(26,107,60,.5), transparent 50%),
   linear-gradient(120deg, var(--brand-800), var(--brand-700)); color:#fff; border-radius: var(--radius-lg); overflow:hidden; position:relative; }
.vendor-band h2 { color:#fff; }
.vendor-band p { color: rgba(255,255,255,.8); }

/* ---------- App CTA ---------- */
.phone-shell {
  width: 270px; border-radius: 38px; background:#fff; padding:10px; box-shadow: var(--shadow);
  border:1px solid var(--line); position:relative;
}
.phone-screen { border-radius:30px; overflow:hidden; aspect-ratio: 9/19; background:var(--bg-soft); }
.phone-screen img { width:100%; height:100%; object-fit:cover; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); }
.footer a { color: rgba(255,255,255,.66); text-decoration:none; transition: color .2s var(--ease); }
.footer a:hover { color:#fff; }
.footer h6 { color:#fff; font-weight:700; letter-spacing:.02em; font-size:.82rem; text-transform:uppercase; opacity:.85; }
.footer .brand-word { color:#fff; }
.foot-soc { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; transition: background .25s var(--ease), transform .25s; }
.foot-soc:hover { background:var(--brand); color:#fff; transform: translateY(-2px); }
.foot-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }

/* ---------- Reveal animation ----------
   Content is VISIBLE by default (opacity:1). The entrance is purely
   decorative: a keyframe with no backwards/forwards fill, so if the
   animation never runs the element simply shows its base (visible) state. */
@media (prefers-reduced-motion: no-preference){
  .reveal.in { animation: revealIn .6s var(--ease); }
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Misc ---------- */
.chip { display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45rem .95rem; font-weight:600; font-size:.9rem; color:var(--ink-2); }
.divider-soft { border:0; border-top:1px solid var(--line); }
a.link-brand { color:var(--brand-700); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; }
a.link-brand:hover { color:var(--brand-700); }
::selection { background: var(--brand-100); }

/* ---------- Site-wide cart drawer + badge (shared header) ---------- */
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--c-tickets); color: #fff; font-size: .72rem; font-weight: 800;
  display: grid; place-items: center;
}
.cart-count.hide { display: none; }
.offcanvas { border-left: 1px solid var(--line); }
.cart-line { display: flex; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 64px; height: 64px; border-radius: 11px; overflow: hidden; flex: 0 0 auto; background: var(--bg-soft); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qty-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.qty-ctrl button { border: 0; background: #fff; width: 28px; height: 28px; cursor: pointer; color: var(--ink); font-weight: 700; }
.qty-ctrl button:hover { background: var(--bg-soft); }
.qty-ctrl span { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; }
.vendor-group-lbl { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .2rem; display: flex; align-items: center; gap: .4rem; }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.4rem; color: var(--line-2); margin-bottom: 1rem; }