/* ═══════════════════════════════════════════════════════════════════════════
   GKC FUTURISTIC THEME  •  2026 UIX Design System
   Palette: Void Black · Electric Blue · Plasma Violet · Cyan
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --void:        #000000;
  --abyss:       #04040f;
  --deep:        #07071a;
  --surface:     #0c0c24;
  --surface-2:   #10102e;

  /* Electric blue spectrum */
  --electric:    #0055ff;
  --azure:       #0088ff;
  --cyan:        #00ccff;
  --cyan-lt:     #66e8ff;

  /* Plasma violet spectrum */
  --violet:      #6600cc;
  --plasma:      #9900ff;
  --aurora:      #cc00ff;
  --magenta:     #ff00cc;

  /* Glow layers */
  --glow-blue:   0 0 20px rgba(0,136,255,0.55), 0 0 60px rgba(0,136,255,0.25);
  --glow-violet: 0 0 20px rgba(153,0,255,0.55), 0 0 60px rgba(153,0,255,0.22);
  --glow-cyan:   0 0 14px rgba(0,204,255,0.6),  0 0 40px rgba(0,204,255,0.2);
  --glow-btn:    0 0 24px rgba(0,136,255,0.5),  0 0 60px rgba(102,0,204,0.3);

  /* Glass system */
  --glass:       rgba(255,255,255,0.04);
  --glass-2:     rgba(255,255,255,0.07);
  --glass-3:     rgba(255,255,255,0.11);
  --glass-bd:    rgba(255,255,255,0.10);
  --glass-bd-2:  rgba(0,204,255,0.18);
  --glass-bd-3:  rgba(153,0,255,0.22);

  /* Text */
  --txt:         rgba(255,255,255,0.92);
  --txt-2:       rgba(255,255,255,0.65);
  --txt-3:       rgba(255,255,255,0.38);

  /* Remap gold → electric blue (for existing components) */
  --gold:        var(--azure);
  --gold-lt:     var(--cyan);
  --gold-pale:   rgba(0,204,255,0.12);
  --navy:        var(--deep);
  --navy-mid:    var(--surface);
  --navy-lt:     var(--surface-2);

  /* Remap glass tokens */
  --glass-dark:  rgba(4,4,15,0.82);
  --glass-mid:   rgba(7,7,26,0.72);
  --glass-light: rgba(12,12,36,0.5);
  --glass-card:  var(--glass);
  --glass-card-h: var(--glass-2);
  --glass-white: rgba(255,255,255,0.06);
  --glass-border: var(--glass-bd-2);
  --glass-border-w: var(--glass-bd);
  --text-on-dark: var(--txt);
  --text-on-dark-mute: var(--txt-2);
  --border-gold: rgba(0,204,255,0.18);

  /* Radius */
  --r:   10px;
  --rl:  16px;
  --rxl: 24px;

  /* Transitions */
  --ease: cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--void) !important;
  color: var(--txt) !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Animated plasma mesh background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(0,85,255,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(102,0,204,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,204,255,0.07) 0%, transparent 70%),
    var(--abyss);
  animation: plasma-drift 18s ease-in-out infinite alternate;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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");
  background-size: 200px 200px;
  opacity: 0.4;
}

@keyframes plasma-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  100% { background-position: 30% 20%, 70% 80%, 60% 40%; }
}

/* Ensure page content sits above bg layers — sections only, not modals.
   Nav and memberBar are already position:sticky with high z-index — don't override them. */
body > section,
body > header,
body > footer,
body > .social-bar,
body > main,
body > div,
body > .page-wrap,
body > .dash-wrap { position: relative; z-index: 1; }

/* Modals always on top */
.leader-modal-overlay { z-index: 9000 !important; }
.leader-modal-overlay.open { display: flex !important; }

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--txt) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.section-eyebrow {
  color: var(--cyan) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

.section-title {
  color: var(--txt) !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan-lt) 60%, var(--azure) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-lead { color: var(--txt-2) !important; }

.hero-h1-accent {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 40%, var(--plasma) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0,204,255,0.4));
}

/* ── Navigation ────────────────────────────────────────────────────────── */
.site-nav, nav, header nav,
[class*="nav-wrap"], .nav-wrap {
  background: rgba(4,4,15,0.80) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
  box-shadow: 0 1px 0 rgba(0,204,255,0.08), 0 4px 30px rgba(0,0,0,0.5) !important;
}

.nav-links a {
  color: var(--txt-2) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  transition: color 0.2s var(--ease), text-shadow 0.2s var(--ease) !important;
  text-decoration: none !important;
}

.nav-links a:hover {
  color: var(--cyan) !important;
  text-shadow: 0 0 12px rgba(0,204,255,0.5) !important;
}

.nav-cta, .nav-links .nav-cta {
  background: linear-gradient(135deg, var(--electric) 0%, var(--plasma) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 7px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: var(--glow-btn) !important;
  transition: all 0.25s var(--ease) !important;
}

.nav-cta:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 0 32px rgba(0,136,255,0.65), 0 0 80px rgba(102,0,204,0.35) !important;
}

/* ── Mobile Nav ─────────────────────────────────────────────────────────── */
.mobile-nav {
  background: rgba(4,4,15,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-right: 1px solid var(--glass-bd) !important;
}

.mobile-nav a {
  color: var(--txt-2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: all 0.2s var(--ease) !important;
}

.mobile-nav a:hover, .mobile-nav a:focus {
  background: rgba(0,136,255,0.08) !important;
  color: var(--cyan) !important;
  border-left: 3px solid var(--cyan) !important;
  padding-left: calc(1.2rem - 3px) !important;
}

.mobile-nav .mob-cta {
  background: linear-gradient(135deg, var(--electric), var(--plasma)) !important;
  color: #fff !important;
  border-radius: var(--r) !important;
  margin: 12px 16px !important;
  text-align: center !important;
  border: none !important;
  box-shadow: var(--glow-btn) !important;
}

.hamburger span {
  background: var(--cyan) !important;
  box-shadow: 0 0 8px rgba(0,204,255,0.5) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn, button.btn, a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--r) !important;
  padding: 10px 22px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer on hover for all btns */
.btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.4s var(--ease) !important;
}
.btn:hover::after { transform: translateX(100%) !important; }

/* Primary gold → electric blue */
.btn-gold {
  background: linear-gradient(135deg, var(--electric) 0%, var(--plasma) 100%) !important;
  color: #fff !important;
  box-shadow: var(--glow-btn) !important;
}
.btn-gold:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 32px rgba(0,136,255,0.65), 0 0 80px rgba(153,0,255,0.4) !important;
}

/* Outline variants */
.btn-outline-gold {
  background: var(--glass) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--glass-bd-2) !important;
  backdrop-filter: blur(8px) !important;
}
.btn-outline-gold:hover {
  background: rgba(0,204,255,0.10) !important;
  border-color: var(--cyan) !important;
  box-shadow: var(--glow-cyan) !important;
  transform: translateY(-2px) !important;
}

/* Leader buttons */
.btn-leader {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--txt-2) !important;
  font-size: 12px !important;
  padding: 10px 18px !important;
  border-radius: var(--r) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.25s var(--ease) !important;
}
.btn-leader-prayer {
  border-color: rgba(0,204,255,0.25) !important;
  color: var(--cyan-lt) !important;
}
.btn-leader-prayer:hover {
  background: rgba(0,204,255,0.10) !important;
  border-color: var(--cyan) !important;
  box-shadow: var(--glow-cyan) !important;
  transform: translateY(-2px) !important;
}
.btn-leader-evang {
  border-color: rgba(0,136,255,0.25) !important;
  color: var(--azure) !important;
}
.btn-leader-evang:hover {
  background: rgba(0,136,255,0.10) !important;
  border-color: var(--azure) !important;
  box-shadow: var(--glow-blue) !important;
  transform: translateY(-2px) !important;
}
.btn-leader-kg {
  border-color: rgba(153,0,255,0.28) !important;
  color: rgba(204,128,255,0.9) !important;
}
.btn-leader-kg:hover {
  background: rgba(153,0,255,0.10) !important;
  border-color: var(--plasma) !important;
  box-shadow: var(--glow-violet) !important;
  transform: translateY(-2px) !important;
}
.btn-leader-kc {
  border-color: rgba(0,204,255,0.22) !important;
  color: var(--cyan-lt) !important;
}
.btn-leader-kc:hover {
  background: rgba(0,204,255,0.10) !important;
  border-color: var(--cyan) !important;
  box-shadow: var(--glow-cyan) !important;
  transform: translateY(-2px) !important;
}

/* Social buttons */
.btn-fb    { background: rgba(24,119,242,0.15) !important; border: 1px solid rgba(24,119,242,0.3) !important; color: #6ab0ff !important; }
.btn-wa    { background: rgba(37,211,102,0.12) !important; border: 1px solid rgba(37,211,102,0.28) !important; color: #5dda8a !important; }
.btn-visit { background: rgba(0,204,255,0.10) !important; border: 1px solid rgba(0,204,255,0.25) !important; color: var(--cyan-lt) !important; }

.btn-fb:hover    { background: rgba(24,119,242,0.28) !important; box-shadow: 0 0 20px rgba(24,119,242,0.4) !important; }
.btn-wa:hover    { background: rgba(37,211,102,0.22) !important; box-shadow: 0 0 20px rgba(37,211,102,0.4) !important; }
.btn-visit:hover { background: rgba(0,204,255,0.18) !important; box-shadow: var(--glow-cyan) !important; }

.btn-prayer, .btn-prayer-nations, .btn-marriage-life, .btn-kingdom-worship,
.btn-global-kc, .btn-kgg, .btn-time2rise, .btn-evang, .btn-outline-evang, .btn-outline-prayer {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--txt-2) !important;
  font-size: 12px !important;
}
.btn-prayer:hover, .btn-prayer-nations:hover, .btn-marriage-life:hover,
.btn-kingdom-worship:hover, .btn-global-kc:hover, .btn-kgg:hover,
.btn-time2rise:hover, .btn-evang:hover, .btn-outline-evang:hover, .btn-outline-prayer:hover {
  background: var(--glass-2) !important;
  border-color: var(--glass-bd-2) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-blue) !important;
}

/* Submit / CTA buttons in forms */
.lm-submit, .form-submit, button[type="submit"], .kc-action-btn {
  background: linear-gradient(135deg, var(--electric) 0%, var(--plasma) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all 0.25s var(--ease) !important;
  box-shadow: var(--glow-btn) !important;
  position: relative !important;
  overflow: hidden !important;
}
.lm-submit:hover, .form-submit:hover, button[type="submit"]:hover, .kc-action-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 0 40px rgba(0,136,255,0.65), 0 0 100px rgba(153,0,255,0.35) !important;
}
.lm-submit:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; }

/* ── Social Bar ─────────────────────────────────────────────────────────── */
.social-bar {
  background: rgba(4,4,15,0.90) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0,204,255,0.10) !important;
}
/* Let each sb-* class keep its own brand gradient — no overrides here */

/* ── Hero Section ───────────────────────────────────────────────────────── */
.hero {
  background: transparent !important;
  border-bottom: 1px solid var(--glass-bd) !important;
  position: relative !important;
}

.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0,85,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 80% 100%, rgba(102,0,204,0.12) 0%, transparent 65%) !important;
  pointer-events: none !important;
}

/* Lift hero content above all absolute-positioned overlays (::before, .hero-ground) */
.hero-inner {
  position: relative !important;
  z-index: 2 !important;
}

.hero-eyebrow {
  color: var(--cyan) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.hero-kgg-logo img { filter: drop-shadow(0 0 16px rgba(0,136,255,0.5)) !important; }

/* ── Search ─────────────────────────────────────────────────────────────── */
.hero-search-wrap {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.4) !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
}
.hero-search-wrap:focus-within {
  border-color: var(--cyan) !important;
  box-shadow: var(--glow-cyan), 0 8px 32px rgba(0,0,0,0.5) !important;
}

.hero-search {
  background: transparent !important;
  color: var(--txt) !important;
  border: none !important;
  outline: none !important;
}
.hero-search::placeholder { color: var(--txt-3) !important; }

/* Autocomplete dropdown */
.hero-autocomplete {
  background: rgba(7,7,26,0.97) !important;
  border: 1px solid var(--glass-bd-2) !important;
  border-radius: var(--r) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,204,255,0.05) !important;
}

.hero-ac-item {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s var(--ease) !important;
}
.hero-ac-item:hover { background: rgba(0,204,255,0.08) !important; }
.hero-ac-name { color: var(--txt) !important; }
.hero-ac-type { color: var(--cyan) !important; }

/* ── Stats Strip ────────────────────────────────────────────────────────── */
.stats-bar, [class*="stat-strip"], [class*="stats-section"] {
  background: rgba(4,4,15,0.75) !important;
  border-top: 1px solid var(--glass-bd) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
  backdrop-filter: blur(12px) !important;
}

.stat-num {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 50%, var(--plasma) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 12px rgba(0,204,255,0.4)) !important;
  font-weight: 800 !important;
}
.stat-label { color: var(--txt-3) !important; font-size: 11px !important; letter-spacing: 0.08em !important; }

/* ── Cards (Glass Bento) ────────────────────────────────────────────────── */
.kc-card, .kc-faith-card, .kc-dir-card, .kc-contact-card,
.step-card, .pp-card, .hlr-card, .yt-ch-card, .muni-card,
.vision-pillar, .leader-card, .download-item {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 0.3s var(--ease) !important;
  position: relative !important;
  overflow: hidden !important;
}

.kc-card::before, .step-card::before, .pp-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,204,255,0.4), transparent) !important;
}

.kc-card:hover, .kc-faith-card:hover, .step-card:hover,
.pp-card:hover, .hlr-card:hover, .yt-ch-card:hover,
.muni-card:hover, .leader-card:hover {
  background: var(--glass-2) !important;
  border-color: var(--glass-bd-2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), var(--glow-blue) !important;
}

.kc-card-icon, .kc-vi-icon, .vision-pillar-icon,
.evang-feature-icon, .pp-card-icon { color: var(--cyan) !important; }
.kc-card-title { color: var(--txt) !important; font-weight: 600 !important; }
.kc-vi-desc, .kc-vi-title { color: var(--txt-2) !important; }

/* KC Detail Card */
.kc-header {
  background: linear-gradient(135deg, rgba(0,85,255,0.15) 0%, rgba(102,0,204,0.15) 100%) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
  backdrop-filter: blur(12px) !important;
}
.kc-header-eyebrow { color: var(--cyan) !important; }

/* KC Section */
.kc-section {
  background: rgba(4,4,15,0.85) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rxl) !important;
  backdrop-filter: blur(20px) !important;
}

/* ── Layer Cards ────────────────────────────────────────────────────────── */
.layer-badge {
  background: linear-gradient(135deg, var(--electric), var(--plasma)) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 4px 12px !important;
  display: inline-block !important;
  box-shadow: var(--glow-btn) !important;
}

.layer-tier {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rxl) !important;
  backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
}
.layer-tier:hover {
  border-color: var(--glass-bd-2) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,204,255,0.08) !important;
}

.layer-prayer   { border-top: 2px solid var(--cyan) !important; }
.layer-evangelism { border-top: 2px solid var(--azure) !important; }
.layer-discipleship { border-top: 2px solid var(--plasma) !important; }

.layer-cta-band {
  background: linear-gradient(135deg, rgba(0,85,255,0.12) 0%, rgba(102,0,204,0.15) 100%) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rxl) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Forms & Inputs ─────────────────────────────────────────────────────── */
.lm-input, .lm-select, .lm-textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="time"], input[type="password"],
select, textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  width: 100% !important;
  transition: all 0.2s var(--ease) !important;
  outline: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.lm-input:focus, .lm-select:focus, .lm-textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan) !important;
  background: rgba(0,204,255,0.05) !important;
  box-shadow: 0 0 0 3px rgba(0,204,255,0.12), var(--glow-cyan) !important;
}

.lm-input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--txt-3) !important;
}

select option {
  background: var(--surface) !important;
  color: var(--txt) !important;
}

.lm-label, label {
  color: var(--txt-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.lm-msg { border-radius: var(--r) !important; padding: 10px 14px !important; font-size: 13px !important; }
.lm-msg.success {
  background: rgba(0,204,102,0.12) !important;
  border: 1px solid rgba(0,204,102,0.28) !important;
  color: #66ffaa !important;
}
.lm-msg.error {
  background: rgba(255,50,80,0.10) !important;
  border: 1px solid rgba(255,50,80,0.28) !important;
  color: #ff8888 !important;
}

/* Password toggle */
.pw-wrap { position: relative !important; }
.pw-toggle {
  position: absolute !important;
  right: 12px; top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: var(--txt-3) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 0 !important;
  transition: color 0.2s !important;
}
.pw-toggle:hover { color: var(--cyan) !important; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.leader-modal-overlay {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.leader-modal {
  background: rgba(7,7,26,0.95) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rxl) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,204,255,0.06), var(--glow-blue) !important;
  position: relative !important;
  overflow: hidden !important;
}

.leader-modal::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--plasma), transparent) !important;
  opacity: 0.6 !important;
}

.lm-title {
  color: var(--txt) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff 0%, var(--cyan-lt) 70%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.lm-sub { color: var(--txt-2) !important; line-height: 1.6 !important; }

.lm-close {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--txt-2) !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
  font-size: 14px !important;
  padding: 0 !important;
}
.lm-close:hover {
  background: rgba(255,50,80,0.15) !important;
  border-color: rgba(255,50,80,0.35) !important;
  color: #ff8888 !important;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
section, .section {
  background: transparent !important;
}

.scale-section, .register-section, .three-layers,
.prayer-foundation, [class*="-section"] {
  background: transparent !important;
}

/* Alternating section tints */
.three-layers { background: rgba(0,85,255,0.03) !important; }
.prayer-foundation { background: rgba(102,0,204,0.04) !important; }

/* Vision pillars */
.vision-pillar-icon { filter: drop-shadow(0 0 10px rgba(0,204,255,0.4)) !important; }

/* ── Prayer Builder Cards ────────────────────────────────────────────────── */
.pb-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r) !important;
  transition: all 0.25s var(--ease) !important;
}
.pb-card:hover {
  background: var(--glass-2) !important;
  border-color: var(--glass-bd-2) !important;
  box-shadow: var(--glow-blue) !important;
  transform: translateY(-2px) !important;
}
.pb-num { color: var(--cyan) !important; font-weight: 700 !important; }
.pb-builder { color: var(--txt) !important; }
.pb-suburb { color: var(--txt-3) !important; }

/* ── Township / Muni Cards ──────────────────────────────────────────────── */
.township-item, .muni-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r) !important;
}
.township-name { color: var(--txt) !important; }
.township-pop, .township-info { color: var(--txt-2) !important; }
.township-icon, .muni-card-icon { color: var(--cyan) !important; }

/* ── Leader Cards ───────────────────────────────────────────────────────── */
.leader-card { padding: 12px 16px !important; }
.leader-card-name { color: var(--txt) !important; font-weight: 600 !important; }
.leader-card-area { color: var(--cyan) !important; font-size: 12px !important; }
.leader-card-detail { color: var(--txt-3) !important; font-size: 11px !important; }

.prayer-card { border-left: 2px solid var(--cyan) !important; }
.evang-card  { border-left: 2px solid var(--azure) !important; }
.kg-card     { border-left: 2px solid var(--plasma) !important; }

.leader-list-title { color: var(--cyan) !important; font-weight: 700 !important; }
.leader-list-empty { color: var(--txt-3) !important; font-style: italic !important; }
.leader-list-wrap {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
  padding: 20px !important;
}

/* ── Success Join / KC Finder ───────────────────────────────────────────── */
.success-join-btn {
  background: rgba(0,204,255,0.10) !important;
  border: 1px solid rgba(0,204,255,0.25) !important;
  color: var(--cyan-lt) !important;
  border-radius: var(--r) !important;
  transition: all 0.2s var(--ease) !important;
}
.success-join-btn:hover {
  background: rgba(0,204,255,0.18) !important;
  box-shadow: var(--glow-cyan) !important;
}

/* ── Checklist / Form checkboxes ────────────────────────────────────────── */
.fcheck {
  accent-color: var(--cyan) !important;
}
input[type="checkbox"] { accent-color: var(--cyan) !important; }

/* ── Download Items ─────────────────────────────────────────────────────── */
.downloads-section {
  background: rgba(4,4,15,0.5) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rxl) !important;
}
.download-item {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
}
.download-title { color: var(--txt) !important; }
.download-desc { color: var(--txt-2) !important; }
.download-icon { color: var(--cyan) !important; }
.download-badge {
  background: rgba(0,204,255,0.12) !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(0,204,255,0.22) !important;
  border-radius: 4px !important;
}

/* ── YouTube / Media Cards ──────────────────────────────────────────────── */
.yt-ch-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
}

/* ── Prayer Declaration ─────────────────────────────────────────────────── */
.prayer-declaration, .member-declaration {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--azure) 40%, var(--plasma) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: italic !important;
  filter: drop-shadow(0 0 8px rgba(0,204,255,0.25)) !important;
}

/* ── Member Bar ─────────────────────────────────────────────────────────── */
#memberBar {
  background: rgba(0,85,255,0.10) !important;
  border-bottom: 1px solid rgba(0,204,255,0.15) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Team Space ─────────────────────────────────────────────────────────── */
.login-overlay, #loginOverlay {
  background: rgba(0,0,0,0.92) !important;
  backdrop-filter: blur(20px) !important;
}

.login-box, [class*="login-card"] {
  background: rgba(7,7,26,0.97) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rxl) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), var(--glow-violet) !important;
  position: relative !important;
  overflow: hidden !important;
}
.login-box::before {
  content: '' !important;
  position: absolute; top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--plasma), transparent) !important;
}

/* Team tabs */
.tab-btn {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--txt-2) !important;
  border-radius: var(--r) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
  letter-spacing: 0.04em !important;
}
.tab-btn:hover {
  background: rgba(0,204,255,0.08) !important;
  border-color: rgba(0,204,255,0.25) !important;
  color: var(--cyan) !important;
}
.tab-btn.active {
  background: linear-gradient(135deg, var(--electric), var(--plasma)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--glow-btn) !important;
}

/* Team panels */
.tab-panel {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
  padding: 24px !important;
}

/* Team post cards */
[class*="announce-card"], [class*="post-card"], [class*="team-card"] {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* Team table */
table {
  width: 100% !important;
  border-collapse: collapse !important;
}
th {
  background: rgba(0,85,255,0.15) !important;
  color: var(--cyan) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--glass-bd-2) !important;
}
td {
  color: var(--txt-2) !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
tr:hover td { background: rgba(0,204,255,0.04) !important; }

/* Team search */
[id*="search"], input[placeholder*="Search"], input[placeholder*="search"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--txt) !important;
  border-radius: var(--r) !important;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */
[class*="dash"], .dashboard {
  background: transparent !important;
}
[class*="stat-card"], .stat-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s var(--ease) !important;
}
[class*="stat-card"]:hover {
  border-color: var(--glass-bd-2) !important;
  box-shadow: var(--glow-blue) !important;
}
[class*="stat-card"]::before {
  content: '' !important;
  position: absolute; top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--electric), var(--plasma)) !important;
}

/* ── Map page ───────────────────────────────────────────────────────────── */
.leaflet-container {
  background: var(--abyss) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
}
.leaflet-popup-content-wrapper {
  background: rgba(7,7,26,0.97) !important;
  border: 1px solid var(--glass-bd-2) !important;
  border-radius: var(--r) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
.leaflet-popup-content { color: var(--txt) !important; }
.leaflet-popup-tip { background: rgba(7,7,26,0.97) !important; }
.leaflet-control-zoom a {
  background: rgba(7,7,26,0.9) !important;
  border: 1px solid var(--glass-bd) !important;
  color: var(--txt) !important;
}
.leaflet-control-zoom a:hover { background: var(--glass-2) !important; color: var(--cyan) !important; }
[data-theme="light"] .leaflet-control-zoom a {
  background: #fff !important;
  border: 1px solid rgba(12,18,48,0.18) !important;
  color: #0c1230 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .leaflet-control-zoom a:hover {
  background: #f5f5f5 !important;
  color: #fc4c02 !important;
}

/* ── Prayer Walk ────────────────────────────────────────────────────────── */
.gpx-section, [class*="gpx"], [class*="strava"] {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
}

/* ── Admin page ─────────────────────────────────────────────────────────── */
[class*="admin-card"], .admin-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--rl) !important;
}

/* ── Cookie Banner ──────────────────────────────────────────────────────── */
#gkc-cookie-banner {
  background: rgba(7,7,26,0.98) !important;
  border-top: 1px solid var(--glass-bd-2) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
}
#gkc-cookie-banner h3 { color: var(--cyan) !important; }
#gkc-cookie-banner p, #gkc-cookie-banner label { color: var(--txt-2) !important; }

/* Toggle switches in cookie banner */
.gkc-toggle { accent-color: var(--cyan) !important; }
.gkc-toggle-track {
  background: var(--glass-2) !important;
  border: 1px solid var(--glass-bd) !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--electric), var(--plasma));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
  background: rgba(0,204,255,0.25);
  color: #fff;
}

/* ── Horizontal rules / dividers ────────────────────────────────────────── */
hr, .hero-rule, [class*="-rule"] {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--glass-bd-2), var(--glass-bd-3), transparent) !important;
  margin: 24px 0 !important;
}

/* ── Register section ───────────────────────────────────────────────────── */
.register-section {
  background: linear-gradient(135deg, rgba(0,85,255,0.06) 0%, rgba(102,0,204,0.08) 100%) !important;
  border-top: 1px solid var(--glass-bd) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
}

/* Form rows */
.form-row { gap: 16px !important; }

/* ── Footer / bottom bar ────────────────────────────────────────────────── */
footer, [class*="footer"] {
  background: rgba(4,4,15,0.95) !important;
  border-top: 1px solid var(--glass-bd) !important;
  color: var(--txt-3) !important;
}
footer a { color: var(--txt-2) !important; }
footer a:hover { color: var(--cyan) !important; }

/* ── Utility glow classes ───────────────────────────────────────────────── */
.glow-blue   { box-shadow: var(--glow-blue) !important; }
.glow-violet { box-shadow: var(--glow-violet) !important; }
.glow-cyan   { box-shadow: var(--glow-cyan) !important; }
.text-cyan   { color: var(--cyan) !important; }
.text-plasma { color: var(--plasma) !important; }

/* ── Micro animation on load ────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kc-card, .step-card, .pp-card, .stat-item,
.leader-card, .pb-card, .vision-pillar {
  animation: fade-up 0.5s var(--ease) both;
}

/* Stagger children */
.kc-card-grid > *:nth-child(1)  { animation-delay: 0.05s; }
.kc-card-grid > *:nth-child(2)  { animation-delay: 0.10s; }
.kc-card-grid > *:nth-child(3)  { animation-delay: 0.15s; }
.kc-card-grid > *:nth-child(4)  { animation-delay: 0.20s; }
.kc-card-grid > *:nth-child(5)  { animation-delay: 0.25s; }
.kc-card-grid > *:nth-child(6)  { animation-delay: 0.30s; }

/* ── Fix: ensure white text on dark backgrounds ─────────────────────────── */
p, span, li, div, label, td, th { color: inherit; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-lt); }

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM DESIGN LAYER  •  Refined refinements — Inter, balanced sizing
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Typography — Inter at restrained weights ────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* These apply to unclassed h2s (layer section headings) and h1s outside .hero.
   Higher-specificity inline rules (.hero h1, h2.section-title) still win. */
h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
}
h3 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  line-height: 1.3;
}

/* ── 2. Scroll-reveal animations via CSS View Timeline ─────────────────── */
@keyframes fueled-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .section-eyebrow,
  .section-title,
  .section-lead,
  .kc-card,
  .step-card,
  .pp-card,
  .hlr-card,
  .vision-pillar,
  .layer-tier,
  .stat-item,
  .leader-card,
  .pb-card,
  .muni-card,
  .download-item {
    animation: fueled-reveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* ── 3. Premium card surfaces ───────────────────────────────────────────── */
.kc-card,
.step-card,
.pp-card,
.hlr-card,
.muni-card,
.leader-card,
.download-item,
.vision-pillar,
.pb-card {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.025) 55%,
    rgba(0,204,255,0.025) 100%
  );
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 8px 32px rgba(0,0,0,0.38),
    0 2px 8px rgba(0,0,0,0.22);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.kc-card:hover,
.step-card:hover,
.pp-card:hover,
.muni-card:hover,
.leader-card:hover,
.download-item:hover {
  transform: translateY(-5px);
  border-color: rgba(0,204,255,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 24px 64px rgba(0,0,0,0.48),
    0 0 0 1px rgba(0,204,255,0.06),
    0 0 48px rgba(0,136,255,0.13);
}

/* ── 4. Layer tier cards — colored top accent (Fueled-style stripe) ─────── */
.layer-tier {
  border-top: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(var(--abyss), var(--abyss)) padding-box,
    linear-gradient(90deg, var(--cyan), var(--plasma)) border-box;
}
.layer-tier.layer-prayer     { border-top-color: var(--cyan); }
.layer-tier.layer-evangelism { border-top-color: var(--azure); }
.layer-tier.layer-discipleship { border-top-color: var(--plasma); }

/* ── 5. Premium section eyebrow — flanked by hairlines ─────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}

/* ── 6. Stat numbers — restrained, Inter 700, original gold color ───────── */
.stat-num,
.dash-stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold-lt);
}

/* ── 7. Step numbers — vivid gradient, locked position ──────────────────── */
.step-num {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--plasma) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 0.55 !important;
}

/* ── 8. Atmospheric body background — deeper, more cinematic ────────────── */
body::before {
  background:
    radial-gradient(ellipse 75% 55% at 8% 12%, rgba(0,68,255,0.16) 0%, transparent 58%),
    radial-gradient(ellipse 65% 50% at 92% 82%, rgba(102,0,204,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 58% 30%, rgba(0,180,255,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 85% 35% at 50% 100%, rgba(0,0,0,0.35) 0%, transparent 60%),
    var(--abyss);
}

/* ── 9. Subtle page entrance ────────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: page-enter 0.45s ease both;
}

/* ── 10. Premium button micro-interactions ──────────────────────────────── */
.btn-gold,
.lm-submit,
.form-submit,
button[type="submit"],
.kc-action-btn,
.btn-primary {
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.015em;
  padding: 13px 28px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease;
}
.btn-gold::after,
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 55%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold:hover::after,
.btn-primary:hover::after {
  transform: translateX(160%);
}
.btn-gold:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.btn-gold:active,
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* ── 11. Gradient section dividers ─────────────────────────────────────── */
.hero-rule,
.section-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,204,255,0.35) 30%,
    rgba(153,0,255,0.35) 70%,
    transparent 100%
  );
  margin: 0;
}

/* ── 12. Accessible focus rings ─────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 13. Navigation polish ──────────────────────────────────────────────── */
.nav-link,
.site-nav a {
  letter-spacing: 0.01em;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.nav-link:hover,
.site-nav a:hover {
  color: var(--cyan-lt);
  opacity: 1;
}

/* ── 14. Hero gradient text — more contrast depth ───────────────────────── */
.hero-h1 .gradient-text,
.gradient-text {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--cyan-lt) 40%,
    var(--cyan) 70%,
    var(--azure) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 15. Glass section containers — subtle depth rim ───────────────────── */
.kc-section,
.register-section,
.lm-section {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 24px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ── 16. Mobile refinements ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  h2 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .section-eyebrow::before,
  .section-eyebrow::after { width: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WHITE MODE  —  [data-theme="light"] overrides
   Scope: set data-theme="light" on <html> to activate.
   All tokens below shadow the :root values for the light context.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 17a. Token overrides ───────────────────────────────────────────────── */
[data-theme="light"] {
  --void:          #ffffff;
  --abyss:         #f4f6ff;
  --deep:          #eaedfc;
  --surface:       #dfe4f8;
  --surface-2:     #d5dbf4;

  --glass:         rgba(255,255,255,0.72);
  --glass-2:       rgba(255,255,255,0.90);
  --glass-3:       rgba(255,255,255,1);
  --glass-bd:      rgba(0,68,180,0.14);
  --glass-bd-2:    rgba(0,136,255,0.22);
  --glass-bd-3:    rgba(102,0,204,0.16);

  --txt:           #0c1230;
  --txt-2:         rgba(12,18,48,0.58);
  --txt-3:         rgba(12,18,48,0.36);

  /* Remap dark-glass tokens to light equivalents */
  --glass-dark:    rgba(255,255,255,0.88);
  --glass-mid:     rgba(248,250,255,0.94);
  --glass-light:   rgba(240,244,255,0.78);
  --glass-card:    #ffffff;
  --glass-card-h:  #eef1ff;
  --glass-white:   rgba(0,0,0,0.03);
  --glass-border:  rgba(0,100,220,0.14);
  --glass-border-w: rgba(0,68,180,0.12);
  --text-on-dark:  #0c1230;
  --text-on-dark-mute: rgba(12,18,48,0.58);
  --border-gold:   rgba(0,136,255,0.20);

  /* Soften glows to subtle shadows */
  --glow-blue:     0 2px 10px rgba(0,136,255,0.14), 0 4px 24px rgba(0,136,255,0.07);
  --glow-violet:   0 2px 10px rgba(153,0,255,0.12), 0 4px 24px rgba(153,0,255,0.06);
  --glow-cyan:     0 2px 8px  rgba(0,204,255,0.14), 0 4px 18px rgba(0,204,255,0.07);
  --glow-btn:      0 2px 14px rgba(0,136,255,0.22), 0 4px 36px rgba(102,0,204,0.12);
}

/* ── 17b. Body & background ─────────────────────────────────────────────── */
[data-theme="light"] body {
  background: #f4f6ff !important;
  color: #0c1230 !important;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(0,136,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(102,0,204,0.04) 0%, transparent 55%),
    #f4f6ff !important;
  animation: none !important;
}

[data-theme="light"] body::after { display: none !important; }

/* ── 17c. Navigation ─────────────────────────────────────────────────────── */
[data-theme="light"] .site-nav,
[data-theme="light"] nav,
[data-theme="light"] header nav,
[data-theme="light"] [class*="nav-wrap"],
[data-theme="light"] .nav-wrap {
  background: rgba(255,255,255,0.96) !important;
  border-bottom-color: rgba(0,100,220,0.12) !important;
  box-shadow: 0 1px 0 rgba(0,100,220,0.08), 0 4px 24px rgba(0,30,120,0.08) !important;
}

/* Logo swap — gold SVG in dark mode, official image in white mode */
.nav-logo-light { display: none; }
.nav-logo-dark  { display: block; }
[data-theme="light"] .nav-logo-light { display: block; }
[data-theme="light"] .nav-logo-dark  { display: none; }

/* Register Now — gold button, navy text, visible on white */
[data-theme="light"] .nav-cta,
[data-theme="light"] .nav-links .nav-cta {
  background: #e8b840 !important;
  color: #0c1230 !important;
  box-shadow: 0 2px 12px rgba(232,184,64,0.40) !important;
  border: none !important;
}
[data-theme="light"] .nav-cta:hover,
[data-theme="light"] .nav-links .nav-cta:hover {
  background: #f5c840 !important;
  box-shadow: 0 4px 20px rgba(232,184,64,0.55) !important;
}

[data-theme="light"] .nav-links a {
  color: rgba(12,18,48,0.70) !important;
}
[data-theme="light"] .nav-links a:hover {
  color: var(--azure) !important;
  text-shadow: none !important;
}

[data-theme="light"] .hamburger span { background: #0c1230 !important; }

[data-theme="light"] .mobile-nav {
  background: rgba(255,255,255,0.98) !important;
  border-bottom-color: rgba(0,100,220,0.10) !important;
}
[data-theme="light"] .mobile-nav a { color: rgba(12,18,48,0.75) !important; }
[data-theme="light"] .mobile-nav a:hover {
  background: rgba(0,100,220,0.06) !important;
  color: var(--azure) !important;
  border-left-color: var(--azure) !important;
}

/* ── 17d. Social bar ────────────────────────────────────────────────────── */
[data-theme="light"] .social-bar,
[data-theme="light"] body > .social-bar {
  background: rgba(255,255,255,0.94) !important;
  border-bottom-color: rgba(0,100,220,0.10) !important;
}

/* ── 17e. Section titles & text ─────────────────────────────────────────── */
[data-theme="light"] .section-title {
  background: linear-gradient(135deg, #0c1230 0%, var(--azure) 50%, var(--plasma) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 { color: #0c1230 !important; }

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] span:not(.theme-icon):not(.theme-label):not([class*="sb-"]) {
  color: inherit;
}

[data-theme="light"] .section-lead { color: rgba(12,18,48,0.62) !important; }

/* ── 17f. Cards ─────────────────────────────────────────────────────────── */
/* Note: .yt-ch-card intentionally excluded — YouTube cards keep dark bg in both modes */
[data-theme="light"] .kc-card,
[data-theme="light"] .step-card,
[data-theme="light"] .pp-card,
[data-theme="light"] .hlr-card,
[data-theme="light"] .muni-card,
[data-theme="light"] .leader-card,
[data-theme="light"] .kc-faith-card,
[data-theme="light"] [class*="stat-card"],
[data-theme="light"] .layer-tier,
[data-theme="light"] .faq-item,
[data-theme="light"] .team-card,
[data-theme="light"] .prayer-card,
[data-theme="light"] .evang-card,
[data-theme="light"] .kg-card {
  background: #ffffff !important;
  border-color: rgba(0,100,220,0.12) !important;
  box-shadow: 0 2px 12px rgba(0,30,100,0.07) !important;
  color: #0c1230 !important;
}

[data-theme="light"] .kc-card:hover,
[data-theme="light"] .step-card:hover,
[data-theme="light"] .pp-card:hover,
[data-theme="light"] .hlr-card:hover,
[data-theme="light"] .muni-card:hover,
[data-theme="light"] .leader-card:hover,
[data-theme="light"] .kc-faith-card:hover {
  background: #eef1ff !important;
  box-shadow: 0 6px 28px rgba(0,80,200,0.12) !important;
  border-color: rgba(0,136,255,0.25) !important;
}

[data-theme="light"] .kc-card-title,
[data-theme="light"] .kc-vi-title,
[data-theme="light"] .stat-label,
[data-theme="light"] .dash-stat-label { color: #0c1230 !important; }

[data-theme="light"] .kc-vi-desc,
[data-theme="light"] .kc-card-meta { color: rgba(12,18,48,0.60) !important; }

/* ── 17g. Stats bar ──────────────────────────────────────────────────────── */
[data-theme="light"] .stats-bar,
[data-theme="light"] [class*="stat-strip"],
[data-theme="light"] [class*="stats-section"] {
  background: #ffffff !important;
  border-color: rgba(0,100,220,0.12) !important;
}

[data-theme="light"] .stat-num,
[data-theme="light"] .dash-stat-value { color: var(--azure) !important; }

/* ── 17h. Buttons ────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-gold,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn,
[data-theme="light"] [class*="btn-"] {
  box-shadow: 0 2px 14px rgba(0,136,255,0.20) !important;
}

/* ── 17i. Sections & panels ─────────────────────────────────────────────── */
[data-theme="light"] section,
[data-theme="light"] .section,
[data-theme="light"] .page-wrap,
[data-theme="light"] main {
  background: transparent !important;
}

[data-theme="light"] .glass-panel,
[data-theme="light"] [class*="glass-"] {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(0,100,220,0.14) !important;
}

[data-theme="light"] .dash-wrap,
[data-theme="light"] .dash-sidebar,
[data-theme="light"] .dash-main,
[data-theme="light"] .dash-card {
  background: #f4f6ff !important;
  border-color: rgba(0,100,220,0.12) !important;
  color: #0c1230 !important;
}

/* ── 17j. Modals & overlays ─────────────────────────────────────────────── */
[data-theme="light"] .leader-modal,
[data-theme="light"] .modal,
[data-theme="light"] .login-box,
[data-theme="light"] [class*="modal-content"] {
  background: #ffffff !important;
  border-color: rgba(0,100,220,0.16) !important;
  color: #0c1230 !important;
}

[data-theme="light"] .leader-modal-overlay,
[data-theme="light"] .modal-overlay {
  background: rgba(200,210,240,0.55) !important;
  backdrop-filter: blur(6px) !important;
}

/* ── 17k. Forms & inputs ─────────────────────────────────────────────────── */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff !important;
  border-color: rgba(0,100,220,0.18) !important;
  color: #0c1230 !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: rgba(12,18,48,0.40) !important; }

/* ── 17l. Scripture / quote cards ───────────────────────────────────────── */
[data-theme="light"] .scripture-card,
[data-theme="light"] [class*="scripture"],
[data-theme="light"] [class*="quote-card"] {
  background: #ffffff !important;
  border-color: rgba(0,136,255,0.18) !important;
  color: #0c1230 !important;
}

/* ── 17m. Map containers (Leaflet styling stays as-is) ───────────────────── */
[data-theme="light"] #miniMap,
[data-theme="light"] #mapContainer,
[data-theme="light"] .leaflet-container {
  border-color: rgba(0,100,220,0.18) !important;
}

/* ── 17n. Footer ────────────────────────────────────────────────────────── */
[data-theme="light"] footer,
[data-theme="light"] .footer,
[data-theme="light"] .site-footer {
  background: #eaedfc !important;
  border-top-color: rgba(0,100,220,0.12) !important;
  color: #0c1230 !important;
}
[data-theme="light"] footer a,
[data-theme="light"] .footer a { color: var(--azure) !important; }

/* ── 17o. Scroll-reveal animation (light version) ───────────────────────── */
@supports (animation-timeline: view()) {
  [data-theme="light"] .section-eyebrow,
  [data-theme="light"] .section-title,
  [data-theme="light"] .section-lead,
  [data-theme="light"] .kc-card,
  [data-theme="light"] .step-card {
    animation-name: fueled-reveal;
  }
}

/* ── 17p. Theme toggle button ───────────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--glass-bd);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--txt-2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
}
.theme-toggle-btn:hover {
  background: var(--glass-2);
  color: var(--txt);
  border-color: var(--glass-bd-2);
  box-shadow: 0 2px 12px rgba(0,136,255,0.15);
}

/* Mobile: hide label, show icon only */
@media (max-width: 900px) {
  .theme-toggle-btn .theme-label { display: none; }
  .theme-toggle-btn { padding: 7px 10px; }
}

/* Mobile nav mode toggle link */
.mob-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-2) !important;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--glass-bd);
  margin-top: 8px;
  text-decoration: none;
}
.mob-theme-toggle:hover {
  background: rgba(0,136,255,0.06) !important;
  color: var(--azure) !important;
}

/* ── 17q. Hero text & township finder ───────────────────────────────────── */
[data-theme="light"] .hero-desc {
  color: rgba(12,18,48,0.72) !important;
  text-shadow: none !important;
}

[data-theme="light"] .township-finder {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(0,136,255,0.20) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .tf-btn {
  color: rgba(12,18,48,0.80) !important;
}
[data-theme="light"] .tf-btn:hover,
[data-theme="light"] .tf-btn.tf-active { color: #0c1230 !important; }

[data-theme="light"] .tf-kc-inner {
  background: rgba(0,100,220,0.04) !important;
  border-color: rgba(0,100,220,0.10) !important;
}
[data-theme="light"] .tf-sub,
[data-theme="light"] .tf-result-sub { color: rgba(12,18,48,0.55) !important; }

[data-theme="light"] .hero-rule {
  background: linear-gradient(90deg, transparent, var(--azure), transparent) !important;
}

/* ── 17r. Stats bar (class: .stats) ─────────────────────────────────────── */
[data-theme="light"] .stats {
  background: #ffffff !important;
  border-top-color: rgba(0,100,220,0.12) !important;
  border-bottom-color: rgba(0,100,220,0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .stat-label {
  color: rgba(12,18,48,0.52) !important;
}
[data-theme="light"] .stat-item + .stat-item::before {
  background: rgba(0,100,220,0.12) !important;
}

/* ── 17s. YouTube channels section ──────────────────────────────────────── */
[data-theme="light"] .yt-channels-title { color: #0c1230 !important; }
[data-theme="light"] .yt-channels-header {
  border-bottom-color: rgba(0,136,255,0.22) !important;
}
[data-theme="light"] .yt-watch-link { color: var(--azure) !important; }

/* YouTube channel cards keep their dark thumbnail look in both modes.
   Override the span colour-inherit rule so names stay visible on dark cards. */
[data-theme="light"] .yt-ch-name { color: #ffffff !important; }
[data-theme="light"] .yt-ch-tag  { color: rgba(255,255,255,0.55) !important; }
[data-theme="light"] .yt-ch-coming { color: rgba(255,255,255,0.40) !important; }

/* ── 17t. Scripture cards ────────────────────────────────────────────────── */
[data-theme="light"] .scripture-ref { color: var(--azure) !important; }
[data-theme="light"] .scripture-text { color: rgba(12,18,48,0.78) !important; }
[data-theme="light"] .scripture-card::before { color: rgba(0,136,255,0.10) !important; }

/* ── 17u. How-it-works panel ────────────────────────────────────────────── */
[data-theme="light"] .how-it-works {
  background: rgba(0,68,180,0.04) !important;
  border-top-color: rgba(0,100,220,0.10) !important;
  border-bottom-color: rgba(0,100,220,0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .how-it-works .section-lead {
  color: rgba(12,18,48,0.65) !important;
}

/* ── 17v. Green / KGS / out-there sections ───────────────────────────────── */
[data-theme="light"] .out-there-banner {
  background: rgba(0,100,220,0.05) !important;
  border-color: rgba(0,136,255,0.18) !important;
}
[data-theme="light"] .out-there-banner p {
  color: rgba(12,18,48,0.65) !important;
}
[data-theme="light"] .otp {
  background: rgba(0,100,220,0.04) !important;
  border-color: rgba(0,136,255,0.16) !important;
}
[data-theme="light"] .otp-name { color: var(--azure) !important; }
[data-theme="light"] .otp-desc { color: rgba(12,18,48,0.55) !important; }

[data-theme="light"] .evang-feature {
  background: rgba(0,100,220,0.04) !important;
  border-color: rgba(0,136,255,0.14) !important;
}

[data-theme="light"] .reg-success {
  background: rgba(0,100,220,0.05) !important;
  border-color: rgba(0,136,255,0.20) !important;
}
[data-theme="light"] .reg-success p { color: rgba(12,18,48,0.65) !important; }

/* ── 17w. Misc dark-hardcoded elements ───────────────────────────────────── */
[data-theme="light"] .btn-outline-gold {
  background: rgba(0,136,255,0.06) !important;
  border-color: rgba(0,136,255,0.35) !important;
  color: var(--azure) !important;
}
[data-theme="light"] .btn-outline-gold:hover {
  background: rgba(0,136,255,0.13) !important;
  border-color: var(--azure) !important;
}

/* Modals opened in White Mode */
[data-theme="light"] .leader-modal,
[data-theme="light"] .prayer-modal,
[data-theme="light"] .evang-modal,
[data-theme="light"] [class*="-modal"] {
  background: #ffffff !important;
  color: #0c1230 !important;
}
[data-theme="light"] .lm-title { color: #0c1230 !important; }
[data-theme="light"] .lm-sub { color: rgba(12,18,48,0.62) !important; }
[data-theme="light"] .lm-badge {
  background: rgba(0,136,255,0.10) !important;
  color: var(--azure) !important;
  border-color: rgba(0,136,255,0.22) !important;
}
[data-theme="light"] .evang-modal .lm-badge {
  background: rgba(0,136,255,0.10) !important;
  color: var(--azure) !important;
  border-color: rgba(0,136,255,0.22) !important;
}

/* Leader action buttons in modals */
[data-theme="light"] .btn-leader-evang {
  background: rgba(0,136,255,0.10) !important;
  color: var(--azure) !important;
  border-color: rgba(0,136,255,0.35) !important;
}

/* Signin divider */
[data-theme="light"] .signin-divider { color: rgba(12,18,48,0.40) !important; }

/* ── 17x. Daily scripture widget ─────────────────────────────────────────── */
[data-theme="light"] .daily-scripture {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(0,136,255,0.18) !important;
  box-shadow: 0 4px 24px rgba(0,30,100,0.10), inset 0 1px 0 rgba(0,136,255,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .ds-label { color: rgba(12,18,48,0.45) !important; }
[data-theme="light"] .ds-label::before { background: rgba(0,100,220,0.25) !important; }
[data-theme="light"] .ds-text { color: rgba(12,18,48,0.82) !important; }
[data-theme="light"] .ds-ref { color: var(--azure) !important; }
[data-theme="light"] .ds-divider {
  background: linear-gradient(90deg, transparent, rgba(0,136,255,0.30), transparent) !important;
}

/* Scroll-reveal animation colours carry over safely */

/* ── 17. Leaflet map — prevent theme styles bleeding in ─────────────────── */
.leaflet-container,
.leaflet-container * {
  animation: none !important;
  animation-timeline: unset !important;
  letter-spacing: normal;
  max-width: none !important;
}
.leaflet-marker-shadow { display: none !important; }
/* Hide any ::before/::after pseudo content inside map tiles/markers */
.leaflet-pane *::before,
.leaflet-pane *::after {
  content: none !important;
  display: none !important;
}