/* ═══════════════════════════════════════════════════════════
   BALLZY — Golf App Landing Page
   Dark emerald & gold editorial design
   Fonts: Playfair Display (headings) + Inter (body)
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Design Tokens ─── */
:root {
  --ink:           #080f08;
  --forest:        #0f3d0f;
  --forest-mid:    #143a14;
  --forest-card:   #1b4d1b;
  --green:         #2a8c2a;
  --green-bright:  #36b336;
  --green-glow:    rgba(42, 140, 42, 0.22);
  --gold:          #DAA520;
  --gold-light:    #f0d060;
  --gold-dim:      #8a6910;
  --gold-glow:     rgba(218, 165, 32, 0.2);

  --text-white:    #ffffff;
  --text-ivory:    #f5f0e8;
  --text-mist:     #b8ceb8;
  --text-moss:     #6b9a6b;
  --text-gold:     var(--gold);

  --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --section-pad:   clamp(80px, 10vw, 140px);

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   40px;
  --r-full: 9999px;

  --shadow-sm:   0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:    0.3s;
}

/* ─── Reset ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* `overflow-x: clip` is stronger than `hidden` and is what iOS
     Safari actually respects to prevent off-screen pan. `hidden`
     creates a hidden scroll container that iOS will still let you
     drag horizontally; `clip` truly stops layout from spilling. */
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-sans);
  background-color: var(--ink);
  color: var(--text-ivory);
  line-height: 1.6;
  /* Pin the body absolutely to the visible viewport. This is the
     ONLY thing iOS Safari fully respects to stop horizontal pan —
     overflow-x: clip / hidden on the document is ignored when the
     viewport itself is what's panning. By making body a positioned
     scroll container, the page scrolls vertically inside body and
     the document above body has nothing to drag.  */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Dynamic viewport so address-bar show/hide doesn't shift things. */
  height: 100svh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Belt-and-suspenders: every direct child of body inherits the same
   horizontal clip so a stray width: 1200px section can't push the
   layout outside the viewport. */
body > * {
  max-width: 100vw;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--forest-card); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ─── Selection ─── */
::selection { background: rgba(218, 165, 32, 0.25); color: var(--text-white); }

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ─── Grain Overlay ─── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ─── Scroll Animations ─── */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-in { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.fade-in.visible { opacity: 1; }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ─── Section Typography ─── */
.section-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 18px;
}
.section-eyebrow-gold { color: var(--gold); }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-white);
  margin-bottom: 24px;
}
.section-title em { font-style: italic; font-weight: 400; color: var(--gold); }

.section-sub {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  color: var(--text-mist);
  line-height: 1.75;
  max-width: 560px;
}

.section-header { margin-bottom: clamp(48px, 7vw, 80px); }
.section-header-center { text-align: center; }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════ */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 6px 0;
  overflow: visible;
  transition: background var(--duration) var(--ease), padding var(--duration) var(--ease), border-color var(--duration) var(--ease);
  border-bottom: 1px solid transparent;
}

#main-nav.scrolled {
  background: rgba(8, 15, 8, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 4px 0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-mascot-wrap { display: flex; align-items: center; }

.nav-logo-img {
  width: auto;
  height: 88px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 20px rgba(218,165,32,0.5)) drop-shadow(0 0 8px rgba(42,140,42,0.4));
  transition: transform 0.3s ease;
}

.nav-logo:hover .nav-logo-img { transform: scale(1.08) rotate(-3deg); }

.nav-logo-text {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--text-white);
  text-transform: uppercase;
}

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

.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-mist);
  transition: color var(--duration) var(--ease);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav-links a:hover { color: var(--text-white); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  background: var(--gold) !important;
  color: var(--ink) !important;
  padding: 9px 22px !important;
  border-radius: var(--r-full) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.8px !important;
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease-spring) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--gold-light) !important;
  box-shadow: 0 4px 20px rgba(218, 165, 32, 0.45) !important;
  transform: translateY(-1px) !important;
}

.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; z-index: 1010; }
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text-white); border-radius: 2px;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 0 80px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink) 0%, var(--forest) 60%, #0b2a0b 100%);
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-texture { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 28px;
}

.eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 10px var(--green-bright);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--text-white);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.hero-headline em { font-style: italic; font-weight: 700; color: var(--gold); }

.hero-subhead {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 400;
  font-style: italic;
  color: var(--text-mist);
  margin-bottom: 44px;
  line-height: 1.55;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.cta-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.25s var(--ease-spring), box-shadow var(--duration) var(--ease);
  flex-shrink: 0;
}

.cta-apple {
  background: #050505;
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-sm);
}
.cta-apple:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.55); }

.cta-google {
  background: #050505;
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-sm);
}
.cta-google:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.55); }

.store-icon { width: 22px; height: 22px; flex-shrink: 0; }
.store-text { display: flex; flex-direction: column; text-align: left; }
.store-text small { font-size: 0.65rem; font-weight: 400; opacity: 0.65; letter-spacing: 0.3px; }

/* Hero Mascot — 3-column grid: [badges] [mascot] [badges]
   No absolute positioning — badges are in their own columns so they
   can never overlap the mascot regardless of viewport or browser. */
.hero-mascot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-mascot-scene {
  display: grid;
  /* Tighter gutters bring the badges closer to the mascot so the
     hero reads as one cluster of activity around the squirrel,
     not three disconnected blocks. Still has enough room that no
     badge actually overlaps the mascot itself. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  width: 100%;
  max-width: 1100px;
}

/* Badge columns — vertical spacing between stacked badges. Right-
   aligned on the left side, left-aligned on the right side, so each
   badge stack hugs its outer edge instead of leaning in toward the
   mascot. */
.mascot-col {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.5vw, 38px);
  align-items: flex-end;
  /* Cap badge width so a long label can never bleed sideways into
     the mascot's column. */
  max-width: 280px;
}

/* Right column — badges left-aligned */
.mascot-col-right {
  align-items: flex-start;
}

/* Subtle inward stagger so the cloud reads as an arc that hugs
   the mascot rather than fans away from it. Middle badges sit
   closest to the squirrel; top + bottom badges nudge slightly out
   for visual variation but never enough to look detached. */
.mascot-col-left .mascot-badge-3  { transform: translateX(12px); }
.mascot-col-left .mascot-badge-5  { transform: translateX(20px); }
.mascot-col-left .mascot-badge-2  { transform: translateX(8px); }
.mascot-col-right .mascot-badge-1 { transform: translateX(-12px); }
.mascot-col-right .mascot-badge-6 { transform: translateX(-20px); }
.mascot-col-right .mascot-badge-4 { transform: translateX(-8px); }

/* Center column — mascot image with glow */
.mascot-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-mascot-glow {
  position: absolute;
  /* Bigger glow follows the bigger mascot below — keeps the soft
     green halo proportional. */
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(42, 140, 42, 0.28) 0%, transparent 70%);
  animation: mascotGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mascotGlow {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.12); opacity: 1; }
}

.hero-mascot-img {
  position: relative; z-index: 5;
  /* Bumped from 18vw → 26vw so the mascot is unmistakable as the
     hero focal point rather than getting lost between the badges.
     Floor + ceiling raised in lockstep for narrow + wide viewports.
     Explicit display:block prevents inline-baseline gaps; min-width
     ensures the grid's `auto` column never collapses to 0 when
     the image is mid-load. */
  display: block;
  width: clamp(220px, 28vw, 360px);
  min-width: 220px;
  height: auto; object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(42,140,42,0.45))
          drop-shadow(0 0 80px rgba(42,140,42,0.20));
  animation: mascotFloat 5s ease-in-out infinite;
}

/* Guarantee the center grid column reserves space for the mascot
   even before the image has loaded. Without this, `1fr auto 1fr`
   measures the auto track as 0 until the PNG decodes, which makes
   the badges race inward and looks like the mascot vanished. */
.mascot-center {
  min-width: 220px;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}

/* Badges — in normal flow, styled as floating cards */
.mascot-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 25, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(218, 165, 32, 0.25);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  box-shadow: var(--shadow-md), 0 0 30px rgba(218,165,32,0.08);
  white-space: nowrap;
  /* Float animation via transform — safe on in-flow elements */
}

.mascot-badge-1 { animation: floatA 4s   ease-in-out infinite; }
.mascot-badge-2 { animation: floatB 4.5s ease-in-out infinite; animation-delay: -2s; }
.mascot-badge-3 { animation: floatA 5s   ease-in-out infinite; animation-delay: -1s; }
.mascot-badge-4 { animation: floatB 4.2s ease-in-out infinite; animation-delay: -3s; }
.mascot-badge-5 { animation: floatA 4.8s ease-in-out infinite; animation-delay: -0.5s; }
.mascot-badge-6 { animation: floatB 5.2s ease-in-out infinite; animation-delay: -2.5s; }

@keyframes floatA {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.mb-icon { font-size: 1.5rem; line-height: 1; }
.mb-label { font-weight: 700; font-size: 0.8rem; color: var(--gold); line-height: 1.2; }
.mb-sub { font-size: 0.65rem; color: var(--text-moss); margin-top: 2px; }

.mb-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 6px #2ecc71;
  animation: livePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }

.hero-scroll-indicator {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}

.scroll-line {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(218,165,32,0.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   SCORE TICKER
═══════════════════════════════════════════════════════════ */
.score-ticker {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 10px 0;
  user-select: none;
}

.ticker-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tickerScroll 42s linear infinite;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  align-items: center;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-dot { color: rgba(255,255,255,0.2); font-size: 0.9rem; }
.ticker-eagle  { color: var(--gold); }
.ticker-birdie { color: var(--green-bright); }
.ticker-par    { color: var(--text-mist); }
.ticker-ace    { color: #ff9f40; text-shadow: 0 0 12px rgba(255,159,64,0.5); }
.ticker-bogey  { color: #ff7070; }

/* ═══════════════════════════════════════════════════════════
   COMMUNITY — Social Golf
═══════════════════════════════════════════════════════════ */
#community {
  padding: var(--section-pad) 0;
  background: linear-gradient(180deg, var(--ink) 0%, var(--forest) 50%, var(--ink) 100%);
}

.community-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.social-bullets {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.92rem;
  color: var(--text-mist);
  line-height: 1.55;
}

.sb-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

.feed-mockup { display: flex; flex-direction: column; gap: 12px; }

.feed-post {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease-spring);
}

.feed-post:hover { border-color: rgba(42,140,42,0.25); transform: translateX(4px); }
.feed-post-2 { opacity: 0.75; transform: translateX(20px); }

.fp-header { display: flex; align-items: center; gap: 12px; }

.fp-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
  color: var(--ink); flex-shrink: 0;
}

.fp-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fp-name { font-size: 0.85rem; font-weight: 700; color: var(--text-white); }
.fp-course { font-size: 0.72rem; color: var(--text-moss); font-weight: 500; }

.fp-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 8px var(--green-bright);
  animation: dotPulse 2s ease-in-out infinite;
}

.fp-score-row { display: flex; align-items: center; gap: 16px; }
.fp-score-main { font-family: var(--font-serif); font-size: 3rem; font-weight: 900; color: var(--text-white); line-height: 1; }
.fp-score-detail { display: flex; flex-direction: column; gap: 4px; }
.fp-differential { font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; color: var(--green-bright); }
.fp-acorns {
  font-size: 0.7rem; font-weight: 600; color: var(--gold);
  background: rgba(218,165,32,0.1); border-radius: var(--r-sm);
  padding: 2px 8px; display: inline-block;
}

.fp-card-mini { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }

.fp-hole {
  height: 28px; background: rgba(42,140,42,0.12); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: var(--text-white);
}
.fp-hole.birdie { background: rgba(68,208,68,0.2); color: var(--green-bright); }
.fp-hole.eagle  { background: rgba(218,165,32,0.25); color: var(--gold-light); }
.fp-hole.bogey  { background: rgba(200,80,80,0.2); color: #ff9999; }

.fp-reactions { display: flex; gap: 14px; align-items: center; }
.fp-reactions span { font-size: 0.78rem; color: var(--text-mist); font-weight: 500; }
.fp-tag {
  background: rgba(42,140,42,0.12);
  border: 1px solid rgba(42,140,42,0.2);
  color: var(--green-bright) !important;
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-size: 0.72rem !important;
}

/* ═══════════════════════════════════════════════════════════
   PULL QUOTE
═══════════════════════════════════════════════════════════ */
.pull-quote-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--forest);
  border-top: 1px solid rgba(218,165,32,0.1);
  border-bottom: 1px solid rgba(218,165,32,0.1);
  overflow: hidden;
  position: relative;
}

.pull-quote-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(218,165,32,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.pull-quote-inner {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.pq-mark {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  color: var(--gold);
  opacity: 0.15;
  line-height: 0.6;
  margin-bottom: -20px;
  user-select: none;
}

.pull-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--text-ivory);
  line-height: 1.25;
  letter-spacing: -0.3px;
}

/* ═══════════════════════════════════════════════════════════
   CADDIE TOOLS
═══════════════════════════════════════════════════════════ */
#caddie {
  padding: var(--section-pad) 0;
  background: linear-gradient(180deg, var(--ink) 0%, #0c1f0c 60%, var(--ink) 100%);
  position: relative;
}

#caddie::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(218,165,32,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.caddie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.caddie-card {
  position: relative;
  background: linear-gradient(145deg, rgba(27,77,27,0.45) 0%, rgba(15,40,15,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 36px);
  overflow: hidden;
  transition: transform 0.35s var(--ease-spring), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.caddie-card:hover {
  transform: translateY(-6px);
  border-color: rgba(218,165,32,0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(218,165,32,0.06);
}

.caddie-card-beer {
  border-color: rgba(218,165,32,0.15);
  background: linear-gradient(145deg, rgba(40,30,5,0.5) 0%, rgba(15,40,15,0.7) 100%);
}

.caddie-card-beer:hover {
  border-color: rgba(218,165,32,0.4);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 50px rgba(218,165,32,0.1);
}

.caddie-icon { font-size: 2.2rem; margin-bottom: 20px; display: block; line-height: 1; }
.caddie-name { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 800; color: var(--text-white); margin-bottom: 12px; line-height: 1.2; }
.caddie-desc { font-size: 0.9rem; color: var(--text-mist); line-height: 1.72; }

.caddie-badge {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  background: rgba(218,165,32,0.1);
  border: 1px solid rgba(218,165,32,0.25);
  border-radius: var(--r-full);
  padding: 4px 12px;
}

/* ═══════════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════════ */
#features {
  padding: var(--section-pad) 0;
  position: relative;
}

#features::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(42,140,42,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature-card {
  position: relative;
  background: linear-gradient(145deg, rgba(27,77,27,0.5) 0%, rgba(15,40,15,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px);
  overflow: hidden;
  transition: transform 0.35s var(--ease-spring), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  cursor: default;
}

.feature-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-bright), transparent);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.feature-accent-gold { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(42,140,42,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(42,140,42,0.08);
}
.feature-card:hover .feature-accent { opacity: 1; }

.feature-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(42,140,42,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.feature-icon { font-size: 2rem; margin-bottom: 20px; display: block; line-height: 1; }
.feature-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 800; color: var(--text-white); margin-bottom: 12px; line-height: 1.25; }
.feature-desc { font-size: 0.9rem; color: var(--text-mist); line-height: 1.72; }

/* ═══════════════════════════════════════════════════════════
   REWARDS
═══════════════════════════════════════════════════════════ */
#rewards {
  padding: var(--section-pad) 0;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--ink) 0%, #100a00 60%, var(--ink) 100%);
}

.rewards-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#rewards .container { position: relative; z-index: 1; }

.rewards-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

.rewards-desc {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: var(--text-mist);
  line-height: 1.8;
  max-width: 480px;
  margin-top: 16px;
}

.rewards-tagline {
  margin-top: 16px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--gold); opacity: 0.8;
  letter-spacing: 0.3px;
}

.rewards-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.reward-stat {
  background: rgba(218,165,32,0.06);
  border: 1px solid rgba(218,165,32,0.18);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease-spring);
}

.reward-stat:hover {
  background: rgba(218,165,32,0.1);
  border-color: rgba(218,165,32,0.3);
  transform: translateY(-4px);
}

.rs-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.rs-num { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 900; color: var(--gold); line-height: 1; }
.rs-label { font-size: 0.78rem; font-weight: 500; color: var(--text-mist); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════
   ACADEMY
═══════════════════════════════════════════════════════════ */
#academy {
  padding: var(--section-pad) 0;
  position: relative; overflow: hidden;
}

#academy::before {
  content: '';
  position: absolute; right: -150px; top: 50%; transform: translateY(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(218,165,32,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.academy-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px); align-items: center;
}

.academy-desc {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: var(--text-mist); line-height: 1.8;
  margin-top: 16px; margin-bottom: 32px; max-width: 460px;
}

.academy-pillars { display: flex; flex-direction: column; gap: 16px; }

.pillar {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.pillar:hover { border-color: rgba(218,165,32,0.2); background: rgba(218,165,32,0.04); }

.pillar-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.pillar-title { font-weight: 700; font-size: 0.9rem; color: var(--text-white); margin-bottom: 3px; }
.pillar-sub { font-size: 0.82rem; color: var(--text-moss); line-height: 1.4; }

.academy-visual { position: relative; }

.academy-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-xl); padding: 28px;
  backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease-spring), border-color 0.35s var(--ease);
}

.academy-card:hover { transform: translateY(-4px); border-color: rgba(42,140,42,0.25); }
.academy-card-2 { margin-top: 14px; margin-left: 24px; opacity: 0.8; }

.ac-lesson-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.ac-badge {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--green-bright);
  background: rgba(42,140,42,0.12);
  border-radius: var(--r-full); padding: 4px 10px;
  border: 1px solid rgba(42,140,42,0.2);
}
.ac-badge-gold { color: var(--gold); background: rgba(218,165,32,0.1); border-color: rgba(218,165,32,0.2); }
.ac-level { font-size: 0.7rem; font-weight: 600; color: var(--text-moss); letter-spacing: 0.5px; }
.ac-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 800; color: var(--text-white); margin-bottom: 8px; line-height: 1.3; }
.ac-desc { font-size: 0.85rem; color: var(--text-mist); line-height: 1.6; margin-bottom: 14px; }

.ac-progress-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.ac-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bright)); border-radius: 2px; }
.ac-meta { display: flex; gap: 16px; font-size: 0.72rem; color: var(--text-moss); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   DOWNLOAD
═══════════════════════════════════════════════════════════ */
#download {
  padding: var(--section-pad) 0;
  position: relative; overflow: hidden;
  text-align: center;
  background: linear-gradient(160deg, var(--ink) 0%, var(--forest) 50%, var(--ink) 100%);
}

.download-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#download .container { position: relative; z-index: 1; }

.download-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

.download-mascot {
  width: clamp(100px, 16vw, 160px); height: auto; object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(42,140,42,0.5)) drop-shadow(0 0 80px rgba(42,140,42,0.15));
  animation: mascotFloat 5s ease-in-out infinite;
}

.download-headline {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900; color: var(--text-white);
  line-height: 1.05; letter-spacing: -0.5px;
}

.download-headline em { font-style: italic; font-weight: 700; color: var(--gold); }
.download-sub { font-size: 1rem; color: var(--text-mist); line-height: 1.6; margin-top: -8px; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer {
  background: #050a05;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 52px 0 32px;
}

.footer-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 28px; flex-wrap: wrap;
}

.footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.footer-squirrel {
  width: 30px; height: 30px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(42,140,42,0.4));
}

.footer-logo span { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 800; letter-spacing: 4px; color: var(--text-white); }
.footer-brand-desc { font-size: 0.85rem; color: var(--text-moss); line-height: 1.65; max-width: 280px; }

.footer-nav ul { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.footer-nav a { font-size: 0.82rem; font-weight: 500; color: var(--text-moss); transition: color var(--duration) var(--ease); letter-spacing: 0.3px; }
.footer-nav a:hover { color: var(--text-white); }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 0.75rem; color: var(--text-moss); }
.footer-made { font-family: var(--font-serif); font-style: italic; font-size: 0.78rem; color: rgba(218,165,32,0.5); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet <= 1024px
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-eyebrow { justify-content: center; }
  .hero-ctas { justify-content: center; }
  .hero-mascot-wrap { order: -1; }
  .hero-mascot-scene { width: clamp(440px, 84vw, 620px); }
  .hero-mascot-img { width: clamp(220px, 36vw, 320px); }

  .community-layout { grid-template-columns: 1fr; gap: 48px; }
  .caddie-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .rewards-inner { grid-template-columns: 1fr; gap: 48px; }
  .rewards-desc { max-width: 100%; }

  .academy-inner { grid-template-columns: 1fr; gap: 48px; }
  .academy-desc { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile <= 640px
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nav-links {
    display: none;
    position: fixed; inset: 0;
    background: rgba(5,10,5,0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 36px; z-index: 1005;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 1.25rem; letter-spacing: 1px; color: var(--text-ivory); }
  .nav-links a::after { display: none; }
  .nav-cta { font-size: 1.1rem !important; padding: 13px 32px !important; }
  .nav-hamburger { display: flex; position: relative; z-index: 1010; }

  .hero-headline { font-size: clamp(2.6rem, 13vw, 3.8rem); }
  .hero-mascot-scene { width: min(360px, 94vw); }
  .hero-mascot-img { width: clamp(160px, 44vw, 240px); }
  .mascot-badge { padding: 7px 10px; gap: 7px; }
  .mascot-badge-1 { top: 4px;    right: 4px; }
  .mascot-badge-2 { bottom: 4px; left: 4px; }
  .mascot-badge-3 { top: 4px;    left: 4px; }
  .mascot-badge-4 { bottom: 4px; right: 4px; }
  .mascot-badge-5 { display: none; }
  .mascot-badge-6 { display: none; }
  .mb-icon { font-size: 1.1rem; }
  .mb-label { font-size: 0.7rem; }
  .mb-sub { font-size: 0.58rem; }

  .caddie-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .rewards-stats { grid-template-columns: 1fr; }
  .feed-post-2 { display: none; }

  .footer-top { flex-direction: column; gap: 24px; }
  .footer-nav ul { gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up, .fade-in { opacity: 1; transform: none; transition: none; }
}