/* ============================================================
   ROOTED — Shared Stylesheet
   Glassmorphic Dark · Gen Z Organic
   ============================================================ */

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

:root {
  /* ── Glassmorphic Vibrant Light ── */
  --bg:           #e8f5e2;
  --bg2:          #dff0d6;
  --glass:        rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.75);
  --glass-hover:  rgba(255,255,255,0.78);
  --lime:         #2d7a00;
  --lime-bright:  #4aaa00;
  --lime-dim:     rgba(45,122,0,0.12);
  --accent-teal:  #00897b;
  --accent-gold:  #e6a817;
  --cream:        #1a2e12;
  --muted:        rgba(26,46,18,0.58);
  --shadow-sm:    0 4px 16px rgba(45,122,0,.12);
  --shadow-md:    0 12px 40px rgba(45,122,0,.16);
  --shadow-lg:    0 24px 72px rgba(45,122,0,.22);
  --font-display: 'Fraunces', serif;
  --font-body:    'Figtree', sans-serif;
  --radius-card:  22px;
  --transition:   .35s cubic-bezier(.25,.46,.45,.94);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
}

/* ── Touch devices: kill ALL custom cursors, hide dot/ring ── */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after { cursor: auto !important; }
  a, button, input, textarea, select, label,
  [role="button"], summary { cursor: pointer !important; }
  #cursor-dot, #cursor-ring { display: none !important; }
}

/* ── Dynamic gradient mesh background ── */
body {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(134,239,172,.55) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 10%,  rgba(187,247,208,.50) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 0%  60%,  rgba(167,243,208,.40) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 80%, rgba(134,239,172,.35) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(220,252,231,.60) 0%, transparent 70%),
    linear-gradient(160deg, #d1fae5 0%, #ecfdf5 35%, #f0fdf4 60%, #dcfce7 100%);
}
/* ── Noise grain overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .18;
}

/* ── Ambient glows ── */
.glow { position: fixed; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; }
.glow-a { width:800px; height:800px; background:radial-gradient(circle,rgba(74,170,0,.28),transparent 65%); top:-200px; right:-200px; filter:blur(100px); }
.glow-b { width:600px; height:600px; background:radial-gradient(circle,rgba(0,137,123,.20),transparent 65%); bottom:5%; left:-120px; filter:blur(110px); }
.glow-c { width:500px; height:500px; background:radial-gradient(circle,rgba(230,168,23,.18),transparent 65%); top:45%; right:0%; filter:blur(120px); }

/* ── Custom cursor ── */
#cursor-dot, #cursor-ring {
  position: fixed; top:0; left:0;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%,-50%);
}
#cursor-dot {
  width:8px; height:8px;
  background: var(--lime-bright); border-radius: 50%;
  transition: transform .08s;
}
#cursor-ring {
  width:36px; height:36px;
  border: 1.5px solid var(--lime-bright); border-radius: 50%;
  transition: width .28s var(--transition), height .28s var(--transition),
              top .22s ease, left .22s ease;
}
body.cursor-hover #cursor-ring { width:54px; height:54px; }

/* ── Navigation ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 52px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,0.80);
  box-shadow: 0 4px 24px rgba(45,122,0,.08);
  transition: padding .4s ease;
}
nav.scrolled { padding: 13px 52px; }

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--cream); text-decoration: none;
}
.nav-logo span { color: var(--lime); }

.nav-links {
  display:flex; gap:34px; list-style:none; align-items:center;
}
.nav-links a {
  color: var(--muted); text-decoration:none;
  font-size:.875rem; letter-spacing:.02em;
  transition: color .25s;
  position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none; padding:6px;
}
.nav-hamburger span {
  display:block; width:24px; height:1.5px;
  background: var(--cream);
  transition: transform .3s, opacity .3s;
}

.nav-cta {
  background: var(--lime); color: #ffffff;
  border:none; padding:10px 22px; border-radius:100px;
  font-family: var(--font-body); font-weight:600; font-size:.875rem;
  cursor:none; text-decoration:none; display:inline-block;
  transition: transform .2s, box-shadow .25s;
}
.nav-cta:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(45,122,0,.35); }

/* Mobile menu */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:190;
  background: rgba(236,253,245,.97);
  backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:36px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-family:var(--font-display); font-size:2.4rem;
  font-weight:200; color:#1d1d1f; text-decoration:none;
  transition:color .25s;
}
.mobile-menu a:hover { color:var(--lime); }
.mobile-close {
  position:absolute; top:24px; right:28px;
  background:none; border:none; color:rgba(29,29,31,.5);
  font-size:2rem; cursor:none;
}

/* ── Page hero (inner pages) ── */
.page-hero {
  padding: 160px 52px 80px;
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
}
.page-label {
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lime-bright); font-weight:600; margin-bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
}
.page-h1 {
  font-family:var(--font-display);
  font-size: clamp(2.8rem,7vw,6rem);
  font-weight:200; line-height:.95; letter-spacing:-.03em;
}
.page-h1 em { font-style:italic; color:var(--lime-bright); }
.page-sub {
  color:var(--muted); font-size:1.05rem; line-height:1.7;
  max-width:520px; margin-top:22px;
}

/* ── Utility ── */
.container { max-width:1200px; margin:0 auto; padding:0 52px; }
.section { padding:80px 0; position:relative; z-index:1; }

.glass-card {
  border: 1px solid rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px rgba(45,122,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.glass-card:hover {
  background: rgba(255,255,255,0.78);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(45,122,0,.18), inset 0 1px 0 rgba(255,255,255,.95);
}

.tag {
  display:inline-block;
  background:rgba(255,255,255,.65); color:var(--lime);
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 14px; border-radius:100px;
}

.btn-primary {
  background: var(--lime); color:#ffffff;
  padding:14px 32px; border-radius:100px;
  font-weight:600; font-size:.95rem; text-decoration:none;
  transition:transform .2s, box-shadow .3s, background .2s; display:inline-block;
  border:none; cursor:none; font-family:var(--font-body);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(45,122,0,.35); background:var(--lime-bright); }

.btn-ghost {
  border:1px solid rgba(255,255,255,0.75); color:var(--cream);
  padding:14px 32px; border-radius:100px;
  background: rgba(255,255,255,0.45);
  backdrop-filter:blur(12px);
  font-size:.95rem; text-decoration:none;
  transition:background .25s, transform .2s, box-shadow .2s; display:inline-block;
}
.btn-ghost:hover { background:rgba(255,255,255,.78); transform:translateY(-2px); box-shadow:0 8px 32px rgba(45,122,0,.14); }

/* ── Section headers ── */
.section-header { margin-bottom:56px; }
.section-header.centered { text-align:center; }
.section-h2 {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:200; letter-spacing:-.02em; line-height:1.1;
}
.section-h2 em { font-style:italic; color:var(--lime-bright); }
.section-desc { color:var(--muted); margin-top:14px; font-size:.95rem; max-width:480px; line-height:1.65; }
.section-header.centered .section-desc { margin-left:auto; margin-right:auto; }

/* ── Divider ── */
.divider {
  height:1px; background:rgba(255,255,255,0.65);
  margin:0 52px; position:relative; z-index:1;
  box-shadow: 0 1px 0 rgba(45,122,0,.06);
}

/* ── Reveal animations ── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--transition), transform .7s var(--transition);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Footer ── */
footer {
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.50);
  backdrop-filter: blur(20px);
  padding:52px;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:start; gap:40px;
}
.footer-brand .nav-logo { display:inline-block; margin-bottom:12px; }
.footer-tagline { color:var(--muted); font-size:.82rem; max-width:220px; line-height:1.6; }
.footer-links-col h4 {
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime); font-weight:600; margin-bottom:16px;
}
.footer-links-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links-col a { color:var(--muted); text-decoration:none; font-size:.85rem; transition:color .25s; }
.footer-links-col a:hover { color:var(--cream); }
.footer-bottom {
  max-width:1200px; margin:36px auto 0;
  padding-top:24px; border-top:1px solid var(--glass-border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem; color:var(--muted);
}

/* ── WLM Credit Strip ── */
.wlm-credit {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(20px);
  padding: 18px 52px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.wlm-credit-inner {
  display: flex; align-items: center; gap: 12px;
}
.wlm-heart {
  display: inline-flex; align-items: center;
  font-size: .8rem; color: rgba(242,237,223,.45);
  letter-spacing: .04em; gap: 6px;
  font-family: var(--font-body); font-weight: 300;
}
.wlm-heart .heart-icon {
  color: #e03a3a;
  animation: heartbeat 1.4s ease-in-out infinite;
  font-size: 1rem; display: inline-block;
}
@keyframes heartbeat {
  0%,100%{ transform: scale(1); }
  14%    { transform: scale(1.25); }
  28%    { transform: scale(1); }
  42%    { transform: scale(1.18); }
  56%    { transform: scale(1); }
}
.wlm-logo-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 4px 14px 4px 4px;
  border-radius: 100px;
  border: 1px solid rgba(212,172,80,.18);
  background: rgba(212,172,80,.06);
  transition: background .3s, border-color .3s, transform .25s;
}
.wlm-logo-wrap:hover {
  background: rgba(212,172,80,.13);
  border-color: rgba(212,172,80,.35);
  transform: translateY(-1px);
}
.wlm-logo-img {
  width: 34px; height: 34px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(212,172,80,.3);
}
.wlm-name {
  font-family: var(--font-body); font-weight: 600;
  font-size: .78rem; letter-spacing: .05em;
  background: linear-gradient(135deg, #f0c040, #d4ac50, #f0c040);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}
.wlm-city {
  font-size: .68rem; color: rgba(212,172,80,.55);
  letter-spacing: .06em; text-transform: uppercase;
  font-weight: 400;
}
@keyframes goldShimmer {
  0%  { background-position: 0% center; }
  100%{ background-position: 200% center; }
}
@media (max-width: 600px) {
  .wlm-credit { padding: 16px 20px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   1200px  Large desktop
    900px  Tablet landscape / small desktop
    768px  Tablet portrait (iPad Mini, etc.)
    600px  Large phone (Pixel, Galaxy)
    400px  Small phone (iPhone SE, 360px)
   ══════════════════════════════════════════ */

/* ── 1200px: constrain glows on wide screens ── */
@media (max-width:1200px) {
  .glow-a { width:420px; height:420px; }
  .glow-b { width:340px; height:340px; }
}

/* ── 900px: tablet landscape & below ── */
@media (max-width:900px) {
  nav { padding:16px 24px; }
  nav.scrolled { padding:12px 24px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-cta { padding:8px 16px; font-size:.8rem; }

  .page-hero { padding:120px 24px 60px; }
  .container { padding:0 24px; }
  .divider { margin:0 24px; }
  .section { padding:60px 0; }

  /* Footer */
  footer { padding:40px 24px; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }

  /* Glass cards hover — disable transform on touch */
  .glass-card:hover { transform:none; }
  .btn-primary:hover, .btn-ghost:hover { transform:none; }
  .nav-cta:hover { transform:none; box-shadow:none; }
}

/* ── 768px: tablet portrait ── */
@media (max-width:768px) {
  .page-hero { padding:110px 20px 50px; }
  .container { padding:0 20px; }
  .divider { margin:0 20px; }

  /* Section headings */
  .section-h2 { font-size:clamp(1.6rem,5vw,2.4rem); }
  .page-h1    { font-size:clamp(2.4rem,8vw,4rem); }

  /* Stats — force 2×2 grid */
  .stats-strip { flex-wrap:wrap; padding:0 20px; gap:8px; }
  .stat-item {
    border-radius:14px !important;
    flex: 0 1 calc(50% - 4px);
    border:1px solid var(--glass-border) !important;
  }

  /* Footer links side by side */
  .footer-links-col ul { flex-direction:row; flex-wrap:wrap; gap:12px 20px; }

  /* WLM strip */
  .wlm-credit { padding:14px 20px; flex-wrap:wrap; gap:8px; }
  .wlm-credit-inner { flex-wrap:wrap; justify-content:center; gap:10px; }
  .wlm-heart { font-size:.75rem; }
}

/* ── 600px: large phones ── */
@media (max-width:600px) {
  nav { padding:14px 16px; }
  nav.scrolled { padding:10px 16px; }
  .nav-logo { font-size:1.2rem; }
  .nav-cta { padding:7px 14px; font-size:.78rem; }

  .page-hero { padding:100px 16px 44px; }
  .container { padding:0 16px; }
  .divider { margin:0 16px; }
  .section { padding:48px 0; }

  /* Typography */
  .page-h1    { font-size:clamp(2rem,10vw,3rem); line-height:1; }
  .section-h2 { font-size:clamp(1.5rem,6vw,2rem); }
  .page-sub   { font-size:.95rem; }

  /* Stats — full width each */
  .stat-item { flex:1 1 100%; border-radius:14px !important; }

  /* Buttons row */
  .hero-actions { flex-direction:column; align-items:center; gap:10px; width:100%; }
  .btn-primary, .btn-ghost { width:100%; text-align:center; padding:14px 20px; }

  /* Footer */
  footer { padding:32px 16px; }
  .footer-inner { grid-template-columns:1fr; gap:28px; }
  .footer-links-col ul { flex-direction:column; gap:10px; }

  /* WLM */
  .wlm-credit { padding:14px 16px; }
  .wlm-logo-img { width:28px; height:28px; }
  .wlm-name { font-size:.72rem; }
  .wlm-city { font-size:.62rem; }

  /* Glass cards — reduce padding on small screens */
  .glass-card { border-radius:18px; }

  /* Scroll hint — hide on small screens (space is precious) */
  .scroll-hint { display:none; }
}

/* ── 400px: small phones (iPhone SE, 360–375px) ── */
@media (max-width:400px) {
  nav { padding:12px 14px; }
  .nav-logo { font-size:1.1rem; }
  .nav-cta { display:none; }        /* show hamburger only */

  .page-hero { padding:90px 14px 40px; }
  .container { padding:0 14px; }
  .divider   { margin:0 14px; }

  .page-h1    { font-size:clamp(1.8rem,11vw,2.6rem); }
  .section-h2 { font-size:clamp(1.35rem,7vw,1.7rem); }

  /* Ensure nothing overflows */
  img, video, iframe { max-width:100%; }

  /* Tags */
  .tag { font-size:.62rem; padding:3px 10px; }
  .page-label { font-size:.65rem; }

  /* CTA form — stack */
  .cta-form { flex-direction:column; gap:10px; }
  .cta-input, .cta-btn { width:100%; border-radius:12px; }

  /* Footer */
  footer { padding:28px 14px; }
}

/* ══════════════════════════════════════════════════════
   DARK MODE (toggled with 🌙 button)
   ══════════════════════════════════════════════════════ */
html.dark {
  --bg:           #0a0a0a;
  --bg2:          #141414;
  --glass:        rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.10);
  --glass-hover:  rgba(255,255,255,0.11);
  --lime:         #b8f000;
  --lime-bright:  #c4f135;
  --lime-dim:     rgba(196,241,53,0.12);
  --cream:        #f5f5f7;
  --muted:        rgba(245,245,247,0.52);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.4);
  --shadow-md:    0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.6);
}
html.dark body { background: var(--bg); color: var(--cream); }
html.dark body::after { opacity: .35; }
html.dark .glow-a { background: radial-gradient(circle,rgba(40,100,28,.28),transparent 70%); }
html.dark .glow-b { background: radial-gradient(circle,rgba(100,160,28,.12),transparent 70%); }
html.dark .glow-c { background: radial-gradient(circle,rgba(196,241,53,.06),transparent 70%); }
html.dark nav { background: rgba(10,10,10,.82); border-bottom-color: rgba(255,255,255,.08); box-shadow:none; }
html.dark .nav-logo { color: #f5f5f7; }
html.dark .nav-links a { color: rgba(245,245,247,.55); }
html.dark .nav-links a:hover, html.dark .nav-links a.active { color: #f5f5f7; }
html.dark .nav-hamburger span { background: #f5f5f7; }
html.dark .nav-cta { background: var(--lime-bright); color: #050d05; }
html.dark .mobile-menu { background: rgba(10,10,10,.98); }
html.dark .mobile-menu a { color: #f5f5f7; }
html.dark .mobile-close { color: rgba(245,245,247,.5); }
html.dark .glass-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: none; backdrop-filter:blur(20px); }
html.dark .glass-card:hover { background: rgba(255,255,255,.10); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
html.dark .btn-primary { background: var(--lime-bright); color: #050d05; }
html.dark .btn-primary:hover { box-shadow: 0 8px 28px rgba(196,241,53,.3); background: var(--lime-bright); }
html.dark .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #f5f5f7; }
html.dark .btn-ghost:hover { background: rgba(255,255,255,.12); box-shadow: none; }
html.dark .tag { background: rgba(196,241,53,.12); color: var(--lime-bright); border-color: rgba(196,241,53,.25); }
html.dark .page-label { color: var(--lime-bright); }
html.dark .section-h2 em { color: var(--lime-bright); }
html.dark .page-h1 em { color: var(--lime-bright); }
html.dark footer { background: #0a0a0a; border-top-color: rgba(255,255,255,.08); }
html.dark .wlm-credit { background: #0a0a0a; border-top-color: rgba(255,255,255,.08); }
html.dark .divider { background: rgba(255,255,255,.07); }
html.dark #cookie-banner { background: rgba(20,20,20,.97); }
html.dark .cookie-accept { background: var(--lime-bright); color: #050d05; }
html.dark #splash { background: #0a0a0a; }
html.dark .splash-logo { color: #f5f5f7; }
html.dark .splash-logo span { color: var(--lime-bright); }
html.dark #back-to-top { background: var(--lime-bright); color: #050d05; }
html.dark #theme-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

/* ── Theme toggle button ── */
#theme-toggle {
  position: fixed; bottom: 160px; right: 22px; z-index: 300;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  cursor: none; font-size: 1.15rem;
  box-shadow: 0 4px 16px rgba(45,122,0,.15);
  transition: transform .3s, background .3s, box-shadow .3s;
}
#theme-toggle:hover { transform: scale(1.1) rotate(20deg); box-shadow: 0 6px 24px rgba(45,122,0,.25); }
@media (hover:none) and (pointer:coarse) { #theme-toggle { cursor: pointer; } }

/* ══════════════════════════════════════════════════════
   SPLASH SCREEN
   ══════════════════════════════════════════════════════ */
#splash {
  position: fixed; inset: 0; z-index: 9000;
  background: linear-gradient(135deg,#d1fae5,#ecfdf5,#f0fdf4);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  transition: opacity .6s ease, visibility .6s ease;
}
#splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
html.light #splash { background: #f0ede4; }

.splash-logo {
  font-family: 'Fraunces', serif;
  font-size: 3.2rem; font-weight: 600; letter-spacing: -.03em;
  color: var(--cream);
  animation: splashPop .7s cubic-bezier(.34,1.56,.64,1) forwards;
  opacity: 0;
}
html.light .splash-logo { color: #1a2e1a; }
.splash-logo span { color: var(--lime-bright); }
.splash-tagline {
  font-family: 'Figtree', sans-serif;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(29,29,31,.45);
  animation: splashFade .6s .4s forwards; opacity: 0;
}
html.light .splash-tagline { color: rgba(26,46,26,.45); }
.splash-bar {
  width: 120px; height: 2px; border-radius: 2px;
  background: rgba(58,140,0,.15); overflow: hidden;
  animation: splashFade .6s .5s forwards; opacity: 0;
}
.splash-bar-fill {
  height: 100%; background: #3a8c00; border-radius: 2px;
  animation: splashLoad 1.1s .5s ease forwards;
  width: 0;
}
@keyframes splashPop  { from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)} }
@keyframes splashFade { from{opacity:0}to{opacity:1} }
@keyframes splashLoad { from{width:0}to{width:100%} }

/* ══════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ══════════════════════════════════════════════════════ */
#back-to-top {
  position: fixed; bottom: 100px; right: 22px; z-index: 300;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lime); color: #ffffff;
  border: none; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  box-shadow: 0 4px 20px rgba(45,122,0,.28);
  transform: translateY(80px); opacity: 0;
  transition: transform .4s var(--transition), opacity .4s var(--transition), box-shadow .3s;
  pointer-events: none;
}
#back-to-top.visible { transform: translateY(0); opacity: 1; pointer-events: all; }
#back-to-top:hover { box-shadow: 0 8px 28px rgba(45,122,0,.40); transform: translateY(-3px); }
@media (hover:none) and (pointer:coarse) { #back-to-top { cursor: pointer; bottom: 80px; right: 16px; } }

/* ══════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ══════════════════════════════════════════════════════ */
#whatsapp-btn {
  position: fixed; bottom: 30px; right: 22px; z-index: 300;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  animation: waAppear .6s 2s both;
  transition: transform .3s, box-shadow .3s;
}
#whatsapp-btn:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,.6); }
#whatsapp-btn .wa-tooltip {
  position: absolute; right: 66px; top: 50%; transform: translateY(-50%);
  background: #25d366; color: #fff;
  font-family: 'Figtree', sans-serif; font-size: .78rem; font-weight: 600;
  padding: 6px 14px; border-radius: 100px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
#whatsapp-btn .wa-tooltip::after {
  content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: #25d366; border-right: none;
}
#whatsapp-btn:hover .wa-tooltip { opacity: 1; }
@keyframes waAppear { from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)} }
@media (max-width:600px) { #whatsapp-btn { bottom: 20px; right: 16px; width:50px; height:50px; font-size:1.45rem; } }
@media (hover:none) and (pointer:coarse) { #whatsapp-btn .wa-tooltip { display: none; } }

/* ══════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ══════════════════════════════════════════════════════ */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: rgba(236,253,245,.92);
  backdrop-filter: blur(24px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  padding: 18px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform .5s var(--transition);
}
html.light #cookie-banner { background: rgba(240,237,228,.97); }
#cookie-banner.visible { transform: translateY(0); }
#cookie-banner.hidden  { display: none; }
.cookie-text { font-size: .83rem; color: var(--muted); max-width: 600px; line-height: 1.55; }
.cookie-text a { color: var(--lime); text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-accept {
  background: var(--lime); color: #ffffff;
  border: none; padding: 9px 22px; border-radius: 100px;
  font-family: 'Figtree', sans-serif; font-weight: 600; font-size: .82rem;
  cursor: none; transition: transform .2s, box-shadow .2s;
}
.cookie-accept:hover { transform: scale(1.04); box-shadow: 0 4px 16px rgba(45,122,0,.3); }
.cookie-decline {
  background: transparent; color: var(--muted);
  border: 1px solid var(--glass-border); padding: 9px 18px; border-radius: 100px;
  font-family: 'Figtree', sans-serif; font-size: .82rem;
  cursor: none; transition: color .2s, border-color .2s;
}
.cookie-decline:hover { color: var(--cream); border-color: var(--cream); }
@media (hover:none) and (pointer:coarse) { .cookie-accept,.cookie-decline { cursor:pointer; } }
@media (max-width:600px) {
  #cookie-banner { padding: 16px 16px 80px; }
  .cookie-text { font-size: .78rem; }
}

/* ══════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════════════════════ */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: #ecfdf5; pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.page-transition-overlay.out { opacity: 1; }

/* ══════════════════════════════════════════════════════
   MOBILE FIXES — Comprehensive patch
   ══════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on ALL devices */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Nav: hide links earlier (6 links overflow at ~1050px) ── */
@media (max-width:1100px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Inline grid helpers — responsive classes ── */
.grid-4-auto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.grid-3-auto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .grid-4-auto { grid-template-columns: repeat(2, 1fr); }
  .grid-3-auto { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-4-auto { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-3-auto { grid-template-columns: 1fr; }
}

/* ── CTA card inline padding fix ── */
.cta-card-pad {
  padding: 60px 48px;
}
@media (max-width: 768px) { .cta-card-pad { padding: 40px 28px; } }
@media (max-width: 480px) { .cta-card-pad { padding: 28px 18px; } }

/* ── Floating buttons: reposition on mobile to avoid overlap ── */
@media (max-width: 600px) {
  #theme-toggle  { bottom: 148px; right: 14px; width: 42px; height: 42px; font-size: 1rem; }
  #back-to-top   { bottom: 96px;  right: 14px; width: 42px; height: 42px; font-size: 1rem; }
  #whatsapp-btn  { bottom: 20px;  right: 14px; width: 48px; height: 48px; font-size: 1.4rem; }
}
@media (max-width: 400px) {
  #theme-toggle  { bottom: 140px; right: 10px; width: 38px; height: 38px; font-size: .9rem; }
  #back-to-top   { bottom: 92px;  right: 10px; width: 38px; height: 38px; font-size: .9rem; }
  #whatsapp-btn  { bottom: 16px;  right: 10px; width: 44px; height: 44px; font-size: 1.3rem; }
}

/* ── Cookie banner: raise content above WhatsApp button ── */
@media (max-width: 600px) {
  #cookie-banner { padding: 16px 16px 18px; }
  .cookie-btns { width: 100%; justify-content: flex-end; }
}

/* ── Promise section buttons stack on mobile ── */
@media (max-width: 480px) {
  .promise-btns { flex-direction: column !important; }
  .promise-btns a { width: 100%; text-align: center; }
}

/* ── Section header flex: stack on small screens ── */
@media (max-width: 600px) {
  .section-header[style*="display:flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── About / Classes stats row (inline repeat(4,1fr)) ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ── Classes teaser grid (inline repeat(3,1fr)) ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 600px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Inline padding:60px 48px fix ── */
@media (max-width: 768px) {
  [style*="padding:60px 48px"] {
    padding: 36px 24px !important;
  }
}
@media (max-width: 480px) {
  [style*="padding:60px 48px"] {
    padding: 28px 16px !important;
  }
}

/* ── Glass card touch: remove hover transform entirely ── */
@media (hover: none) {
  .glass-card:hover,
  .product-card:hover,
  .blog-card:hover,
  .team-card:hover,
  .testi-card:hover,
  .result-card:hover,
  .enrolled-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── Ensure images never overflow ── */
img { max-width: 100%; height: auto; }

/* ── Tables: horizontal scroll on small screens ── */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  table { min-width: 500px; }
}

/* ── Mobile menu: ensure it doesn't clip on short screens ── */
.mobile-menu { overflow-y: auto; }

/* ── Dashboard sidebar fix on mobile ── */
@media (max-width: 600px) {
  .sidebar-nav li a { padding: 10px 12px; font-size: .82rem; }
  .profile-card { padding: 20px 16px; }
  .dash-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ds-num { font-size: 1.4rem; }
  .ds-label { font-size: .65rem; }
  .enrolled-card { flex-wrap: wrap; }
  .ec-action { margin-left: auto; }
}

/* ── Search input: prevent iOS zoom on focus (font-size < 16px triggers zoom) ── */
.search-input,
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-size: 16px !important;
}
@media (min-width: 600px) {
  .search-input { font-size: 1.05rem !important; }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea { font-size: .95rem !important; }
  select { font-size: .95rem !important; }
}

/* ── Gallery masonry: single column on very small phones ── */
@media (max-width: 400px) {
  .gallery-grid { columns: 1 !important; }
}

/* ── Blog featured card: proper stack ── */
@media (max-width: 600px) {
  .blog-featured { border-radius: 18px; }
  .bf-visual { min-height: 160px; }
  .bf-content { padding: 20px 16px; }
  .bf-title { font-size: 1.2rem; }
}

/* ── Legal pages: data table horizontal scroll ── */
@media (max-width: 700px) {
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  .data-table thead, .data-table tbody, .data-table tr,
  .data-table td, .data-table th { display: revert; }
}

/* ── Lightbox: full screen on mobile ── */
@media (max-width: 600px) {
  #lightbox { padding: 0; }
  .lb-inner { border-radius: 0; max-height: 100vh; overflow-y: auto; }
  .lb-visual { aspect-ratio: 4/3; }
  .lb-info { padding: 16px; }
  .lb-meta { gap: 10px; }
  .lb-meta-item { font-size: .72rem; }
}

/* ── Modal (booking): full screen on mobile ── */
@media (max-width: 480px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px 16px 32px;
  }
}

/* ── Classes page schedule strip on mobile ── */
@media (max-width: 480px) {
  .sched-row { grid-template-columns: 42px 1fr; gap: 10px; padding: 12px; }
  .sched-action { display: none; }
  .sched-name { font-size: .82rem; }
}

/* ── Fix nav-cta overlap with hamburger on 400-600px ── */
@media (max-width: 600px) and (min-width: 401px) {
  .nav-cta { font-size: .75rem; padding: 7px 12px; }
}

/* ── Belt-and-suspenders: force correct cursors on all interactive elements ── */
@media (hover: none) and (pointer: coarse) {
  nav button, .nav-hamburger, .mobile-close,
  .filter-btn, .type-tab, .suggestion-pill,
  .submit-btn, .modal-submit, .cookie-accept, .cookie-decline,
  .cta-btn, .nav-cta, .lb-close, .lb-prev, .lb-next,
  .faq-q, .gallery-item, .social-btn, .back-to-top,
  #theme-toggle, #back-to-top, #whatsapp-btn,
  .booking-form button, .book-trigger,
  .sched-action button { cursor: pointer !important; }

  input, textarea, select, .search-input,
  .cta-input, .nl-input { cursor: text !important; }
}