/* ════════════════════════════════════════
   LIGHT MODE OVERRIDES
   body.light-mode activates all rules below
════════════════════════════════════════ */

/* ── Variables ──────────────────────────── */
body.light-mode {
  --dark:        #F4F6FB;
  --darkerbg:    #E8EBF2;
  --light:       #212121;
  --white:       #212121;
  --black:       #E8EBF2;
  --shadow-lift: 0 24px 64px rgba(0,0,0,0.08);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.07), 0 1px 0 rgba(0,0,0,0.04) inset;
}

/* ── Global shadow overrides ─────────────── */
body.light-mode #site-header { box-shadow: 0 8px 40px rgba(0,0,0,0.07); }
body.light-mode .safety-app-card { box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important; }
body.light-mode .safety-app-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.1) !important; }
body.light-mode .perk-card { box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important; }
body.light-mode .perk-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.1) !important; }
body.light-mode .venue-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.1); }
body.light-mode .connect-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important; }
body.light-mode .value-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important; }
body.light-mode .before-card:hover,
body.light-mode .after-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
body.light-mode .identity-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
body.light-mode .tip-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
body.light-mode .ea-card { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
body.light-mode .process-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important; }

/* CTA gradient shadows — keep purple tint but lighter */
body.light-mode .cta-gradient { box-shadow: 0 8px 28px rgba(123,46,253,0.2); }
body.light-mode .cta-gradient:hover { box-shadow: 0 14px 40px rgba(123,46,253,0.3); }
body.light-mode .nav-overlay-cta { box-shadow: 0 8px 28px rgba(123,46,253,0.2); }
body.light-mode .mission-cta { box-shadow: 0 8px 32px rgba(123,46,253,0.2); }
body.light-mode .mission-cta:hover { box-shadow: 0 14px 40px rgba(123,46,253,0.28); }

/* ── Base ───────────────────────────────── */
body.light-mode,
html body.light-mode { background: #F4F6FB; color: #212121; }

body.light-mode p { color: #212121; }
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 { color: #212121; }
body.light-mode li { color: #212121; }

/* ── Identity card ───────────────────────── */
body.light-mode .identity-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .identity-card:hover { border-color: rgba(123,46,253,0.15); }
body.light-mode .identity-card ul li {
  color: rgba(0,0,0,0.8);
  border-color: rgba(0,0,0,0.06);
}

/* ── Connect card ────────────────────────── */
body.light-mode .connect-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .connect-card:hover {
  border-color: rgba(2,160,174,0.25);
  box-shadow: 0 24px 56px rgba(0,0,0,0.08);
}
body.light-mode .connect-card ul li {
  color: rgba(0,0,0,0.8);
  border-color: rgba(0,0,0,0.06);
}

/* ── Before/after cards ──────────────────── */
body.light-mode .before-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .before-card:hover { border-color: rgba(123,46,253,0.2); }
body.light-mode .before-card-num { color: rgba(0,0,0,0.06); }
body.light-mode .after-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .after-card:hover { border-color: rgba(123,46,253,0.2); }

/* ── Split copy list ─────────────────────── */
body.light-mode .split-copy ul li {
  color: rgba(0,0,0,0.8);
  border-color: rgba(0,0,0,0.05);
}

/* ── Broad catch — any card-like element with white transparent bg ── */
body.light-mode [class*="-card"] {
  border-color: rgba(0,0,0,0.08);
}

/* Grain overlay — stay subtle */
body.light-mode::before { opacity: 0.018; }

/* ── Loader ──────────────────────────────── */
body.light-mode #loader { background: #F4F6FB; }
body.light-mode .loader-wordmark { color: #212121; }
body.light-mode .loader-bar-wrap { background: rgba(0,0,0,0.08); }
body.light-mode .loader-bar { background: linear-gradient(90deg, #7B2EFD, #02A0AE); }

/* ── Squiggle SVGs ───────────────────────── */
body.light-mode svg.squiggle { filter: brightness(0); opacity: 0.15; }

/* ── Icon SVGs — darken for light bg ── */
body.light-mode .perk-icon svg,
body.light-mode .process-icon svg,
body.light-mode .app-card-icon svg {
  filter: brightness(0);
  opacity: 0.75;
}

/* ── Definition terms (privacy/terms pages) ── */
body.light-mode .def-term { color: rgba(0,0,0,0.8) !important; }
body.light-mode .def-desc { color: rgba(0,0,0,0.75) !important; }

/* ── Custom cursor ─────────────────────── */
body.light-mode #cursor-ring {
  border-color: rgba(123,46,253,0.3);
}
body.light-mode.cursor-hover #cursor-dot { background: #212121; }

/* ── Header ─────────────────────────────── */
body.light-mode #site-header {
  background: rgba(244,246,251,0.88);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode #site-header.scrolled {
  background: rgba(244,246,251,0.96) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.08) !important;
}
body.light-mode .nav-logo img {
  filter: brightness(0);
}
body.light-mode .nav-links a {
  color: rgba(0,0,0,0.8);
}
body.light-mode .nav-links a:hover { color: #212121; }
body.light-mode .nav-links a::after { background: #7B2EFD; }
body.light-mode .nav-dropdown-trigger {
  color: rgba(0,0,0,0.8);
}
body.light-mode .nav-dropdown-trigger:hover { color: #212121; }
body.light-mode .nav-dropdown {
  background: rgba(244,246,251,0.98);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.1);
}
body.light-mode .nav-dropdown a:hover { background: rgba(0,0,0,0.04); }
body.light-mode .nav-dropdown-title { color: #212121; }
body.light-mode .nav-dropdown-sub { color: rgba(0,0,0,0.75); }
body.light-mode .nav-cta {
  /* gradient CTA stays as-is — it works on light too */
}

/* ── Mobile nav overlay ──────────────────── */
body.light-mode .nav-overlay-bg {
  background: rgba(244,246,251,0.98);
}
body.light-mode .nav-overlay-bg::after {
  background: radial-gradient(circle, rgba(123,46,253,0.06) 0%, transparent 70%);
}
body.light-mode .nav-overlay-links a {
  color: rgba(0,0,0,0.8);
}
body.light-mode .nav-overlay-links a:hover { color: #212121; }
body.light-mode .nav-overlay-links a:hover span:first-child {
  background: linear-gradient(135deg, #212121 30%, rgba(123,46,253,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light-mode .outcome-card {    background: rgba(0, 0, 0, 0.025);}

body.light-mode .nav-overlay.open .nav-overlay-links a { color: #212121; }
body.light-mode .nav-overlay-links li { border-color: rgba(0,0,0,0.07); }
body.light-mode .nav-overlay-links li:first-child { border-color: rgba(0,0,0,0.07); }
body.light-mode .nav-overlay-tagline { color: rgba(0,0,0,0.22); }
body.light-mode .nav-hamburger span { background: rgba(0,0,0,0.75); }
body.light-mode button.nav-overlay-dropdown-trigger{color: #212121;}

/* ── Eyebrow pill ────────────────────────── */
body.light-mode .section-eyebrow-pill {
  color: rgba(0,0,0,0.8);
  border-color: rgba(0,0,0,0.18);
}

/* ── CTAs — keep text white, they sit on gradient/dark backgrounds ── */
body.light-mode .cta,
body.light-mode .cta-gradient,
body.light-mode .cta-dark,
body.light-mode .nav-cta,
body.light-mode .nav-overlay-cta { color: #F4F6FB !important; }

body.light-mode .nav-cta::after {background: rgba(244, 246, 251, 0.96) !important;}
body.light-mode .nav-cta {color: rgba(0, 0, 0, 0.8) !important;}


/* ── Hero icon (FateDate mark) — flip to dark on light bg ── */
body.light-mode .hero-icon img { filter: brightness(0); opacity: 1; }

/* ── Hero eyebrow accent text ── */
body.light-mode .hero-eyebrow span { color: #7B2EFD; }

/* ── Hero heading & body text ── */
body.light-mode .hero-content h1 { color: #212121; }
body.light-mode .hero-content > p { color: rgba(0,0,0,0.8); }

/* ── Hero ────────────────────────────────── */
body.light-mode #hero { background: #F4F6FB; }
body.light-mode .hero-video-container::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(244,246,251,0.7) 45%, #F4F6FB 100%);
}
body.light-mode .hero-scroll-hint span { color: rgba(0,0,0,0.28); }
body.light-mode .hero-scroll-line { background: rgba(0,0,0,0.1); }
body.light-mode .hero-chip {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.85);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.light-mode .hero-orb { opacity: 0.15; }
body.light-mode .hero-draw-line {
  background: linear-gradient(90deg, transparent 0%, rgba(123,46,253,0.35) 40%, rgba(2,160,174,0.25) 70%, transparent 100%);
}

/* ── Scroll section ──────────────────────── */
body.light-mode #scroll-section {
  background: linear-gradient(180deg, #F4F6FB 0%, #EEF0F8 50%, #E8EBF2 100%);
}
body.light-mode #scroll-section::before {
  background: linear-gradient(to bottom, #F4F6FB 0%, transparent 100%);
}
body.light-mode #scroll-section::after {
  background: linear-gradient(to top, #E8EBF2 0%, transparent 100%);
}

/* ── Glow blobs — reduce to near invisible ── */
body.light-mode .glow { opacity: 0.07; }
body.light-mode .phone-ambient { opacity: 0.12; }

/* ── Step panels ─────────────────────────── */
body.light-mode .step-eyebrow { color: rgba(0,0,0,0.85); }
body.light-mode .step-eyebrow strong { color: #212121; }
body.light-mode .step-title {
  background: linear-gradient(150deg, #212121 40%, rgba(123,46,253,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light-mode .step-body { color: rgba(0,0,0,0.8); }
body.light-mode .step-ghost { -webkit-text-stroke-color: rgba(0,0,0,0.05); }
body.light-mode .dot { background: rgba(0,0,0,0.12); }
body.light-mode .dot.active { background: var(--accent); box-shadow: 0 0 10px rgba(123,46,253,0.3); }
body.light-mode .step.active::before {
  background: rgba(244,246,251,0.88);
  border-color: rgba(0,0,0,0.06);
}

/* ── Safety / Perks sections ─────────────── */
body.light-mode #safety-section,
body.light-mode #perks-section {
  background: linear-gradient(180deg, #E8EBF2 0%, #E4E7F0 100%);
}
body.light-mode #perks-section::before {
  background: linear-gradient(90deg, transparent, rgba(123,46,253,0.08), transparent);
}

/* ── Safety cards ────────────────────────── */
body.light-mode .safety-app-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.07);
}
body.light-mode .app-card-icon::after { background: #EEF0F8; }
body.light-mode .app-card-label { color: #212121; }
body.light-mode .app-card-sub { color: rgba(0,0,0,0.4); }
body.light-mode .photo-slot { background: #CDD0DC; }
body.light-mode .safety-heading { color: #212121; }
body.light-mode .safety-body { color: rgba(0,0,0,0.8); }
body.light-mode .safety-video-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .safety-video-card:hover {
  border-color: rgba(123,46,253,0.18);
  background: rgba(123,46,253,0.03);
}
body.light-mode .safety-video-title { color: #212121; }
body.light-mode .safety-video-body { color: rgba(0,0,0,0.75); }

/* ── Perk cards ──────────────────────────── */
body.light-mode .perk-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .perk-card:hover {
  border-color: rgba(123,46,253,0.2) !important;
  background: rgba(123,46,253,0.03);
}
body.light-mode .perk-icon::after { background: #EEF0F8; }
body.light-mode .perk-title { color: #212121; }
body.light-mode .perk-body { color: rgba(0,0,0,0.75); }

/* ── Process cards ───────────────────────── */
body.light-mode .process-card:hover {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .process-icon::after { background: #EEF0F8; }
body.light-mode .process-title { color: #212121; }
body.light-mode .process-body { color: rgba(0,0,0,0.75); }

/* ── Section header text ─────────────────── */
body.light-mode .section-title {
  background: linear-gradient(160deg, #212121 30%, rgba(123,46,253,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light-mode .section-header p { color: rgba(0,0,0,0.8); }

/* ── Image carousels ─────────────────────── */
body.light-mode .img-carousel-wrap::before {
  background: linear-gradient(to right, #F4F6FB, transparent);
}
body.light-mode .img-carousel-wrap::after {
  background: linear-gradient(to left, #F4F6FB, transparent);
}
body.light-mode .img-carousel-wrap2::before {
  background: linear-gradient(to right, #F4F6FB, transparent);
}
body.light-mode .img-carousel-wrap2::after {
  background: linear-gradient(to left, #F4F6FB, transparent);
}
body.light-mode .img-carousel-item {
  border-color: rgba(0,0,0,0.06);
  overflow: visible;
}
body.light-mode .img-carousel-item img {
  border-radius: 20px;
}
body.light-mode .img-carousel-item:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ── Lower third ─────────────────────────── */
body.light-mode #lower-third {
  background: linear-gradient(180deg, #E8EBF2 0%, #F4F6FB 100%);
}

/* ── Venues section ──────────────────────── */
body.light-mode #venues-section .venues-container,
body.light-mode #coming-section .venues-container {
  background: #E8EBF2 !important;
}

body.light-mode .venue-card {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(123,46,253,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(2,160,174,0.06) 0%, transparent 55%),
    #F4F6FB;
  border-color: rgba(0,0,0,0.1);
}
body.light-mode .venue-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
body.light-mode .venue-eyebrow { color: rgba(0,0,0,0.8); }
body.light-mode .venue-eyebrow strong { color: #212121; }
body.light-mode .venue-title { color: #212121; }
body.light-mode .venue-body { color: rgba(0,0,0,0.8); }
body.light-mode .venue-btn {
  border-color: rgba(0,0,0,0.2);
  color: #212121;
}
body.light-mode .venue-btn:hover {
  border-color: rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.04);
}

/* ── Ribbon SVGs (white stroke → dark) ──── */
body.light-mode #fate-ribbon-full svg path { stroke: #212121; }
body.light-mode .footer-ribbon svg path { stroke: #212121; }
body.light-mode #fate-ribbon-relative svg path { stroke: rgba(33,33,33,0.3); }

/* ── Download badge SVGs ─────────────────── */
body.light-mode .download-icons img { filter: brightness(0); opacity: 0.75; }

/* ── Footer ──────────────────────────────── */
body.light-mode #site-footer { background: transparent; }
body.light-mode .footer-top {
  border-color: rgba(0,0,0,0.07);
}
body.light-mode .footer-logo img {
  filter: brightness(0);
  opacity: 0.85;
}
body.light-mode .footer-col a { color: rgba(0,0,0,0.8); }
body.light-mode .footer-col a:hover { color: rgba(0,0,0,0.85); }
body.light-mode .footer-email { color: rgba(0,0,0,0.8) !important; text-decoration-color: rgba(0,0,0,0.2) !important; }
body.light-mode .footer-email:hover { text-decoration-color: rgba(0,0,0,0.8) !important; }
body.light-mode .footer-copy { color: rgba(0,0,0,0.28); }

/* ── About page ──────────────────────────── */
body.light-mode .about-hero { background: #F4F6FB; }
body.light-mode .about-hero::before {
  background: radial-gradient(ellipse at 60% 0%, rgba(123,46,253,0.05) 0%, transparent 55%);
}
body.light-mode .about-hero::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05) 50%, transparent); }
body.light-mode .about-hero h1 { color: #212121; }
body.light-mode .about-hero-sub { color: rgba(0,0,0,0.8); }
body.light-mode .about-hero-eyebrow span { color: #7B2EFD; }
body.light-mode .about-hero-eyebrow::before { background: #7B2EFD; }

body.light-mode .stat-strip { background: #F4F6FB; border-color: rgba(0,0,0,0.06); }
body.light-mode .stat-item { border-color: rgba(0,0,0,0.06); }
body.light-mode .stat-num { color: #212121; }
body.light-mode .stat-label { color: rgba(0,0,0,0.8); }

body.light-mode .about-section { background: #F4F6FB; }
body.light-mode .about-section::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05) 50%, transparent); }
body.light-mode .about-section-dark { background: #E8EBF2; }

body.light-mode .story-body p { color: rgba(0,0,0,0.8); }
body.light-mode .story-card { border-color: rgba(0,0,0,0.07); }
body.light-mode .story-card-main { background: linear-gradient(145deg, #D8DCEC, #C8CCDE); }
body.light-mode .story-card-accent { background: linear-gradient(145deg, #C8CCDE, #BCC0D4); }
body.light-mode .story-quote-chip {
  background: rgba(244,246,251,0.95);
  border-color: rgba(0,0,0,0.1);
}
body.light-mode .story-quote-chip p { color: rgba(0,0,0,0.8); }
body.light-mode .story-quote-chip span { color: rgba(0,0,0,0.3); }


body.light-mode svg.squiggle {
    filter: brightness(0);
    opacity: 0.15;
}


body.light-mode .hero-chip svg {filter: brightness(0); opacity: 1;}
body.light-mode .value-card:hover { border-color: rgba(123,46,253,0.1); box-shadow: 0 24px 56px rgba(0,0,0,0.07); }
body.light-mode .value-card::before { background: linear-gradient(90deg, transparent, rgba(123,46,253,0.15), transparent); }
body.light-mode .value-icon { background: rgba(123,46,253,0.06); border-color: rgba(123,46,253,0.1); }
body.light-mode .value-card h3 { color: #212121; }
body.light-mode .value-card p { color: rgba(0,0,0,0.75); }

body.light-mode .team-card { border-color: rgba(0,0,0,0.07); }
body.light-mode .team-card:hover { border-color: rgba(123,46,253,0.1); }
body.light-mode .team-card-photo { background: linear-gradient(145deg, #C8CCDE, #BCC0D4, #B8BECE); }
body.light-mode .team-card-photo::after { background: linear-gradient(to top, rgba(244,246,251,0.9), transparent); }
body.light-mode .team-initials { color: rgba(0,0,0,0.08); }
body.light-mode .team-card-body { background: rgba(0,0,0,0.02); }
body.light-mode .team-card-name { color: #212121; }
body.light-mode .team-card-role { color: rgba(0,0,0,0.3); }

/* ── How / Minimise pages ────────────────── */
body.light-mode .hero-about-wrap,
body.light-mode .hiw-hero-wrap,
body.light-mode .safety-hero-wrap,
body.light-mode .venues-hero-wrap { background: #F4F6FB; }

/* ── Legal pages ─────────────────────────── */
body.light-mode .legal-hero,
body.light-mode .legal-layout { background: #F4F6FB; }
body.light-mode .legal-hero-meta { color: rgba(0,0,0,0.25); }
body.light-mode .legal-section h2 { color: #212121; }
body.light-mode .legal-section p,
body.light-mode .legal-section ul li { color: rgba(0,0,0,0.8); }
body.light-mode .legal-section { border-color: rgba(0,0,0,0.05); }
body.light-mode .legal-section ul li { border-color: rgba(0,0,0,0.04); }
body.light-mode .legal-section ul li::before { background: rgba(123,46,253,0.4); }
body.light-mode .legal-nav-label { color: rgba(0,0,0,0.2); }
body.light-mode .legal-nav-list a { color: rgba(0,0,0,0.3); border-left-color: transparent; }
body.light-mode .legal-nav-list a:hover { color: rgba(0,0,0,0.85); border-left-color: rgba(123,46,253,0.3); }
body.light-mode .legal-nav-list a.active { color: #7B2EFD; border-left-color: #7B2EFD; }
body.light-mode .safety-alert {
  background: rgba(123,46,253,0.05);
  border-color: rgba(123,46,253,0.18);
}


body.light-mode .process-card.fd-reveal.fd-scale-up.fd-delay-1.fd-visible {
    background: rgba(244, 246, 251, 0.96) !important;
}

body.light-mode .home.light-mode .perk-card {
    background: rgba(244, 246, 251, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .app-card-header {
    background: rgba(244, 246, 251, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .safety-alert p { color: rgba(0,0,0,0.7) !important; }
body.light-mode .safety-alert strong { color: #7B2EFD; }
body.light-mode .legal-contact {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.07);
}
body.light-mode .legal-contact::before { background: linear-gradient(90deg, transparent, rgba(123,46,253,0.15) 40%, transparent); }
body.light-mode .legal-contact p { color: rgba(0,0,0,0.4); }
body.light-mode .legal-contact a { color: #212121; }
body.light-mode .legal-contact a:hover { color: #7B2EFD; }

/* ── 404 page ─────────────────────────────── */
body.light-mode .error-404-section { background: #F4F6FB; }
body.light-mode .error-404-heading { color: #212121; }
body.light-mode .error-404-body { color: rgba(0,0,0,0.8); }

/* ── Sign up / contact pages ─────────────── */
body.light-mode .signup-section,
body.light-mode .contact-section { background: #F4F6FB; }

/* ════════════════════════════════════════
   THEME TOGGLE BUTTON
════════════════════════════════════════ */
#theme-toggle {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(13,13,18,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  transition: border-color 0.3s ease, background 0.3s ease,
              transform 0.25s cubic-bezier(.22,1,.36,1),
              box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
#theme-toggle:hover {
  transform: scale(1.1);
  border-color: rgba(201,184,255,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#theme-toggle .toggle-icon { pointer-events: none; display: flex; }

/* Light mode state of the button itself */
body.light-mode #theme-toggle {
  background: rgba(244,246,251,0.88);
  border-color: rgba(0,0,0,0.13);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
body.light-mode #theme-toggle:hover {
  border-color: rgba(123,46,253,0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}

@media (max-width: 480px) {
  #theme-toggle { bottom: 20px; right: 20px; width: 44px; height: 44px; }
}

/* ════════════════════════════════════════
   PAGE-BY-PAGE OVERRIDES
════════════════════════════════════════ */

/* ── Shared: dark alternate sections (about / how / minimise / venues) ── */
body.light-mode .about-section-dark { background: #E4E7F0; }

/* ════════════
   HOW.PHP
════════════ */
body.light-mode .hiw-hero { background: #F4F6FB; }
body.light-mode .hiw-hero h1 { color: #212121; }
body.light-mode .hiw-hero-sub { color: rgba(0,0,0,0.8); }
body.light-mode .hiw-hero-eyebrow span { color: #7B2EFD; }

/* Flow steps */
body.light-mode .flow-step-num { color: #212121; border-color: rgba(0,0,0,0.12); background: #F4F6FB; }
body.light-mode .flow-step-title { color: #212121; }
body.light-mode .flow-step-body { color: rgba(0,0,0,0.8); }
body.light-mode .flow-step-body strong { color: #212121; }

/* Unlock cards */
body.light-mode .unlock-card {
  background: none;
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .container.venues-container {
    border-color: rgba(0, 0, 0, 0.08);}


body.light-mode  .venues-hero-cta .cta-ghost {    color: rgb(33, 33, 33);}

body.light-mode .unlock-card:hover { border-color: rgba(123,46,253,0.2); }
body.light-mode .unlock-card-body {
  background: none !important;
}

body.light-mode  .unlock-card-img {opacity: 0.25;}

body.light-mode .unlock-card-title { color: #212121; }

/* CTA banner */
body.light-mode .hiw-cta-banner { background: #E4E7F0; }
body.light-mode .hiw-cta-banner h2 { color: #212121; }
body.light-mode .hiw-cta-banner p { color: rgba(0,0,0,0.8); }
body.light-mode .hiw-cta-banner ul li { color: rgba(0,0,0,0.8); border-color: rgba(0,0,0,0.06); }

/* Connect card text */
body.light-mode .connect-card-eyebrow { color: rgba(0,0,0,0.4); }
body.light-mode .connect-card h3 { color: #212121; }
body.light-mode .connect-card-sub { color: rgba(0,0,0,0.8); }
body.light-mode .connect-card p { color: rgba(0,0,0,0.8); }
body.light-mode .connect-card-label { color: rgba(0,0,0,0.35); }

/* Before card text */
body.light-mode .before-card h3 { color: #212121; }
body.light-mode .before-card p { color: rgba(0,0,0,0.8); }

/* ════════════════
   MINIMISE.PHP
════════════════ */
body.light-mode .safety-hero { background: #F4F6FB; }
body.light-mode .safety-hero h1 { color: #212121; }

/* Identity cards */
body.light-mode .identity-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .identity-card h3 { color: #212121; }
body.light-mode .identity-card p { color: rgba(0,0,0,0.8); }
body.light-mode .identity-card-icon { background: rgba(123,46,253,0.06); border-color: rgba(123,46,253,0.1); }

/* Split copy */
body.light-mode .split-copy h3 { color: #212121; }
body.light-mode .split-copy h4 { color: #212121; }
body.light-mode .split-copy p { color: rgba(0,0,0,0.8); }
body.light-mode .split-copy { border-color: rgba(0,0,0,0.08); }

/* ═══════════════
   VENUES.PHP
═══════════════ */
body.light-mode .venues-hero { background: #F4F6FB; }
body.light-mode .venues-hero h1 { color: #212121; }
body.light-mode .venues-hero-sub { color: rgba(0,0,0,0.8); }

/* Venue stat cards */
body.light-mode .hero-stat-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .hero-stat-num { color: #212121; }
body.light-mode .hero-stat-label { color: rgba(0,0,0,0.8); }

/* FAQ */
body.light-mode .faq-item { border-color: rgba(0,0,0,0.06); }
body.light-mode .faq-item:first-child { border-color: rgba(0,0,0,0.06); }
body.light-mode .faq-question { color: #212121; }
body.light-mode .faq-answer { color: rgba(0,0,0,0.8); }
body.light-mode .faq-toggle { color: rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.12); }

/* Venue list/filter */
body.light-mode .venue-filter-btn {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.8);
}
body.light-mode .venue-filter-btn.active { color: #F4F6FB; }
body.light-mode .venue-list-item { border-color: rgba(0,0,0,0.06); }
body.light-mode .venue-list-name { color: #212121; }
body.light-mode .venue-list-sub { color: rgba(0,0,0,0.75); }

/* ════════════════
   CONTACT.PHP
════════════════ */
body.light-mode .contact-hero { background: #F4F6FB; }
body.light-mode .contact-hero h1 { color: #212121; }
body.light-mode .contact-hero-sub { color: rgba(0,0,0,0.8); }

body.light-mode .contact-channel { border-color: rgba(0,0,0,0.06); }
body.light-mode .contact-channel:first-of-type { border-color: rgba(0,0,0,0.06); }
body.light-mode .contact-channel-label { color: rgba(0,0,0,0.35); }
body.light-mode .contact-channel-value { color: #212121; }

body.light-mode .contact-quick-link { border-color: rgba(0,0,0,0.05); color: rgba(0,0,0,0.8); }
body.light-mode .contact-quick-link:first-child { border-color: rgba(0,0,0,0.05); }
body.light-mode .contact-quick-link:hover { color: #212121; }

/* Contact form card */
body.light-mode .contact-form-wrap {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.07);
}

/* Form elements */
body.light-mode .form-label { color: rgba(0,0,0,0.8); }
body.light-mode .form-input,
body.light-mode .form-select,
body.light-mode .form-textarea {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: #212121;
}
body.light-mode .form-input::placeholder,
body.light-mode .form-textarea::placeholder { color: rgba(0,0,0,0.25); }
body.light-mode .form-input:focus,
body.light-mode .form-select:focus,
body.light-mode .form-textarea:focus { border-color: rgba(123,46,253,0.4); }
body.light-mode .form-select option { background: #F4F6FB; color: #212121; }

/* ════════════════
   SIGN-UP.PHP
════════════════ */
body.light-mode .ea-page { background: #F4F6FB; }
body.light-mode .ea-page::before { opacity: 0.08; }

body.light-mode .ea-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.08);
}
body.light-mode .ea-step-label { color: rgba(0,0,0,0.35); }
body.light-mode .ea-step-title { color: #212121; }
body.light-mode .ea-step-sub { color: rgba(0,0,0,0.8); }

body.light-mode .ea-label { color: rgba(0,0,0,0.8); }
body.light-mode .ea-input,
body.light-mode .ea-select {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: #212121;
}
body.light-mode .ea-input::placeholder { color: rgba(0,0,0,0.25); }
body.light-mode .ea-input:focus,
body.light-mode .ea-select:focus { border-color: rgba(123,46,253,0.4); }
body.light-mode .ea-select option { background: #F4F6FB; color: #212121; }

body.light-mode .ea-pill {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.8);
}
body.light-mode .ea-pill:hover { border-color: rgba(123,46,253,0.25); color: rgba(0,0,0,0.8); }
body.light-mode .ea-pill.selected { background: rgba(123,46,253,0.08); border-color: rgba(123,46,253,0.35); color: #7B2EFD; }

body.light-mode .ea-back { color: rgba(0,0,0,0.4); }
body.light-mode .ea-back:hover { color: rgba(0,0,0,0.7); }

body.light-mode .ea-success h2 { color: #212121; }
body.light-mode .ea-success p { color: rgba(0,0,0,0.8); }
body.light-mode .ea-success-link { color: rgba(0,0,0,0.8); }
body.light-mode .ea-success-link:hover { color: rgba(0,0,0,0.8); }
body.light-mode .ea-progress { background: rgba(0,0,0,0.08); }

/* ═══════════════════════════
   CTA BANNERS (how / minimise)
═══════════════════════════ */
body.light-mode .hiw-cta-banner,
body.light-mode .safety-cta-banner,
body.light-mode .cta-banner { background: #E4E7F0 !important; }

body.light-mode .safety-cta-banner h2,
body.light-mode .cta-banner h2 { color: #212121; }
body.light-mode .safety-cta-banner p,
body.light-mode .cta-banner p { color: rgba(0,0,0,0.8); }
body.light-mode .safety-cta-banner ul li,
body.light-mode .cta-banner ul li { color: rgba(0,0,0,0.8); border-color: rgba(0,0,0,0.06); }

/* ═══════════════════════════
   DATING SAFETY PAGE
═══════════════════════════ */
body.light-mode .tips-hero { background: #F4F6FB !important; }
body.light-mode .tips-hero h1 { color: #212121; }
body.light-mode .tips-hero-sub { color: rgba(0,0,0,0.8); }
body.light-mode .tips-hero-eyebrow span { color: #7B2EFD; }

body.light-mode .tab-nav { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.light-mode .tab-btn {
  color: rgba(0,0,0,0.75);
  border-color: rgba(0,0,0,0.1);
  background: transparent;
}
body.light-mode .tab-btn:hover { color: rgba(0,0,0,0.75); border-color: rgba(0,0,0,0.2); }
body.light-mode .tab-btn.active { background: #F4F6FB; color: #212121; border-color: rgba(0,0,0,0.15); }

body.light-mode .tabsection { background: transparent; }

body.light-mode .tip-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .tip-card:hover { border-color: rgba(123,46,253,0.2); }
body.light-mode .tip-card-num { color: rgba(0,0,0,0.06); }
body.light-mode .tip-card h3 { color: #212121; }
body.light-mode .tip-card p { color: rgba(0,0,0,0.8); }
body.light-mode .tip-card ul li { color: rgba(0,0,0,0.8); border-color: rgba(0,0,0,0.06); }

/* ═══════════════════════════
   CONTACT PAGE (full pass)
═══════════════════════════ */
body.light-mode .contact-hero { background: #F4F6FB !important; }
body.light-mode .contact-layout { background: #F4F6FB; }

body.light-mode .contact-sidebar-label { color: rgba(0,0,0,0.35); }
body.light-mode .contact-channel-note { color: rgba(0,0,0,0.4); }
body.light-mode .contact-channel-value { color: #212121; }

body.light-mode .form-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.07);
}

/* ═══════════════════════════
   PRIVACY / TERMS (full pass)
═══════════════════════════ */
body.light-mode .legal-hero { background: #F4F6FB !important; }
body.light-mode .legal-layout { background: #F4F6FB !important; }

/* Catch all white-coloured text inside legal templates */
body.light-mode .legal-hero-meta { color: rgba(0,0,0,0.3) !important; }
body.light-mode .legal-nav-label { color: rgba(0,0,0,0.25) !important; }
body.light-mode .legal-nav-list a { color: rgba(0,0,0,0.35) !important; }
body.light-mode .legal-nav-list a:hover { color: rgba(0,0,0,0.7) !important; border-left-color: rgba(123,46,253,0.3) !important; }
body.light-mode .legal-nav-list a.active { color: #7B2EFD !important; border-left-color: #7B2EFD !important; }
body.light-mode .legal-section h2 { color: #212121 !important; }
body.light-mode .legal-section p { color: #212121 !important; }
body.light-mode .legal-section ul li { color: rgba(0,0,0,0.85) !important; border-color: rgba(0,0,0,0.05) !important; }
body.light-mode .legal-section { border-color: rgba(0,0,0,0.06) !important; }
body.light-mode .legal-contact { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.07) !important; }
body.light-mode .legal-contact p { color: rgba(0,0,0,0.4) !important; }
body.light-mode .legal-contact a { color: #212121 !important; }

/* ═══════════════════════════
   HOW.PHP — flow step ribbon, cta-principles, unlock-card
═══════════════════════════ */
/* Ribbon SVG is white — invert to make it dark */
body.light-mode .flow-step:not(:last-child)::after {
  filter: invert(1);
  opacity: 0.15;
}

/* cta-principle cards */
body.light-mode .cta-principle {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .cta-principle span {
  color: rgba(0,0,0,0.8) !important;
}

/* unlock-card label */
body.light-mode .unlock-card-label {
  color: #7B2EFD !important;
}

/* ═══════════════════════════
   MINIMISE.PHP — venue-fact, safety-feature-card, summary-item, resource-card
═══════════════════════════ */
/* venue-fact */
body.light-mode .venue-fact {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
body.light-mode .venue-fact h3 { color: #212121 !important; }
body.light-mode .venue-fact p  { color: rgba(0,0,0,0.6) !important; }

/* safety-feature-card */
body.light-mode .safety-feature-card {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
body.light-mode .safety-feature-card h3 { color: #212121 !important; }
body.light-mode .safety-feature-card p  { color: rgba(0,0,0,0.6) !important; }
body.light-mode .safety-feature-card ul li {
  color: rgba(0,0,0,0.6) !important;
  border-bottom-color: rgba(0,0,0,0.05) !important;
}

/* summary-item */
body.light-mode .summary-item {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.07) !important;
  border-left-color: rgba(123,46,253,0.4) !important;
}
body.light-mode .summary-item span { color: rgba(0,0,0,0.65) !important; }

/* resource-card */
body.light-mode .resource-card {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
body.light-mode .resource-card-title { color: #212121 !important; }
body.light-mode .resource-card-desc  { color: rgba(0,0,0,0.55) !important; }
body.light-mode .resource-card-arrow { color: rgba(0,0,0,0.3) !important; }
body.light-mode .resource-card:hover .resource-card-arrow { color: #02A0AE !important; }
body.light-mode .safety-alert p { color: rgba(0,0,0,0.7) !important; }