/* ==========================================================================
   Flip Fusion — DARK MODE overrides
   Loaded AFTER styles.css on the dark landing page (body.theme-dark).
   The HERO section is intentionally left untouched (keeps its light pastel
   stage). Everything else flips to a dark surface palette.
   ========================================================================== */

body.theme-dark {
  /* Semantic tokens */
  --bg:            #0b0c11;
  --bg-alt:        #14151d;
  --fg-1:          #F5F5F3;
  --fg-2:          rgba(245,245,243,0.72);
  --fg-3:          rgba(245,245,243,0.50);
  --border:        rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);
  --divider:       rgba(255,255,255,0.10);

  /* Grayscale remap — light-on-dark */
  --gray-50:  #14151d;
  --gray-100: rgba(255,255,255,0.06);
  --gray-200: rgba(255,255,255,0.12);
  --gray-300: rgba(255,255,255,0.18);
  --gray-400: rgba(245,245,243,0.42);
  --gray-500: rgba(245,245,243,0.56);
  --gray-700: rgba(245,245,243,0.72);
  --gray-800: rgba(245,245,243,0.84);
  --gray-900: #F5F5F3;

  background: #0b0c11;
  color: var(--fg-1);
}

/* ---- Section backgrounds (everything except the hero) ------------------- */
.theme-dark .appcarousel,
.theme-dark .features-lean,
.theme-dark .faq {
  background: #0b0c11;
}
.theme-dark .signup,
.theme-dark .wol {
  background: #101119;
}

/* ---- Sticky top bar ----------------------------------------------------- */
.theme-dark .sticky-cta {
  background: rgba(11,12,17,0.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.theme-dark .sticky-cta.is-scrolled {
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ---- Section headings / copy ------------------------------------------- */
.theme-dark .section-head h2,
.theme-dark .faq .section-head h2,
.theme-dark .features-lean .section-head h2,
.theme-dark .feat-text h3,
.theme-dark .signup-pitch h2,
.theme-dark .signup-success h3,
.theme-dark .faq-q {
  color: #F5F5F3;
}
.theme-dark .section-head p,
.theme-dark .feat-text p,
.theme-dark .signup-pitch .lede,
.theme-dark .signup-perks li,
.theme-dark .signup-success p,
.theme-dark .faq-a-inner,
.theme-dark .ac-marquee-note {
  color: rgba(245,245,243,0.70);
}
.theme-dark .signup-perks strong,
.theme-dark .signup-success p em {
  color: #F5F5F3;
}

/* ---- Showcase marquee --------------------------------------------------- */
.theme-dark .mq-name { color: #F5F5F3; }
.theme-dark .mq-tag {
  background: rgba(255,255,255,0.10);
  color: rgba(245,245,243,0.80);
}

/* ---- Feature rows ------------------------------------------------------- */
.theme-dark .feat-item { border-color: rgba(255,255,255,0.12); }
.theme-dark .feat-item:last-child { border-bottom-color: rgba(255,255,255,0.12); }
.theme-dark .feat-ico {
  background: rgba(33,81,245,0.18);
  color: var(--sky);
}

/* ---- Wall of Love cards ------------------------------------------------- */
.theme-dark .wol-card {
  background: #181a22;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 4px rgba(0,0,0,0.30), 0 16px 36px rgba(0,0,0,0.40);
}
.theme-dark .wol-card blockquote { color: #F5F5F3; }
.theme-dark .wol-card blockquote::before { color: rgba(33,81,245,0.55); }
.theme-dark .wol-feature {
  background: linear-gradient(160deg, #1a2540 0%, #15161d 72%);
  border-color: rgba(33,81,245,0.45);
}
.theme-dark .wol-name { color: #F5F5F3; }
.theme-dark .wol-role,
.theme-dark .wol-co { color: rgba(245,245,243,0.56); }

/* ---- FAQ ---------------------------------------------------------------- */
.theme-dark .faq-item,
.theme-dark .faq-item:first-child { border-color: rgba(255,255,255,0.12); }
.theme-dark .faq-icon {
  background: rgba(255,255,255,0.07);
  color: rgba(245,245,243,0.80);
}

/* ---- Sign-up form card -------------------------------------------------- */
.theme-dark .signup-form-wrap {
  background: #181a22;
  border: 1px solid rgba(255,255,255,0.08);
}
.theme-dark .signup-trust {
  background: rgba(255,255,255,0.05);
  color: rgba(245,245,243,0.72);
}

/* HubSpot embedded form fields */
.theme-dark .hs-form-frame .hs-form-field > label,
.theme-dark .hs-form-frame .hs-form-field > label .hs-form-required {
  color: rgba(245,245,243,0.82);
}
.theme-dark .hs-form-frame input[type="text"],
.theme-dark .hs-form-frame input[type="email"],
.theme-dark .hs-form-frame input[type="tel"],
.theme-dark .hs-form-frame input[type="number"],
.theme-dark .hs-form-frame select,
.theme-dark .hs-form-frame textarea {
  background: #0f1017;
  color: #F5F5F3;
  border-color: rgba(255,255,255,0.16);
}
.theme-dark .hs-form-frame input::placeholder,
.theme-dark .hs-form-frame textarea::placeholder { color: rgba(245,245,243,0.4); }
.theme-dark .hs-form-frame .legal-consent-container,
.theme-dark .hs-form-frame .hs-richtext,
.theme-dark .hs-form-frame .hs-field-desc { color: rgba(245,245,243,0.6); }

/* ==========================================================================
   HERO — dark stage: black canvas with a blue→green gradient bloom rising
   from the bottom edge (replaces the light pastel stage).
   ========================================================================== */
.theme-dark .hero {
  background:
    radial-gradient(ellipse 50% 42% at 14% 102%, rgba(33,81,245,0.80) 0%, rgba(33,81,245,0) 60%),
    radial-gradient(ellipse 48% 40% at 58% 112%, rgba(101,219,145,0.82) 0%, rgba(101,219,145,0) 58%),
    radial-gradient(ellipse 38% 46% at 100% 90%, rgba(40,120,250,0.62) 0%, rgba(40,120,250,0) 56%),
    radial-gradient(ellipse 68% 38% at 48% 118%, rgba(95,205,253,0.34) 0%, rgba(95,205,253,0) 62%),
    radial-gradient(ellipse 95% 75% at 50% 6%, #0a0c18 0%, #05060e 72%) !important;
}

/* Tagline copy flips to light */
.theme-dark .hero .hero-tag-module { color: #F5F5F3; }
.theme-dark .hero .hero-tag-module .tag-row2 { color: rgba(245,245,243,0.66); }

/* Eyebrow pill brightens for contrast on black */
.theme-dark .hero .hero-eyebrow {
  color: #8fd3ff;
  background: rgba(95,205,253,0.10);
  border-color: rgba(95,205,253,0.45);
}

/* Prompt bar matches the signup form fields: dark grey + white type */
.theme-dark .hero .prompt-bar {
  background: #14151d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.30);
}
.theme-dark .hero .prompt-bar:focus-within {
  background: #181a22;
  border-color: var(--flip-swirl);
  box-shadow: 0 0 0 4px rgba(33,81,245,0.22), 0 24px 60px rgba(0,0,0,0.45);
}
.theme-dark .hero .prompt-input { color: #F5F5F3; }
.theme-dark .hero .prompt-input::placeholder { color: rgba(245,245,243,0.45); }
.theme-dark .hero .prompt-tool { color: rgba(245,245,243,0.62); }
.theme-dark .hero .prompt-tool:hover { background: rgba(255,255,255,0.08); color: #F5F5F3; }