/* ======================================================================
   FITZPOT WEBSITE v2.0 — Production CSS
   (Compiled from website.src.css via Tailwind CLI)
   For development: use CDN tailwind.config.js inline.
   For production: npm run build:website
   ====================================================================== */

/* ── FONTS ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ── BASE ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1,h2,h3,h4,h5,h6 { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }
::selection { background: rgba(232,23,122,.18); color: #7b0042; }
:focus-visible { outline: 2px solid rgba(232,23,122,.8); outline-offset: 2px; border-radius: 4px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* ── HEADER ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: border-color .25s, box-shadow .25s;
}
.site-header.scrolled { border-bottom-color: rgba(0,0,0,.1); box-shadow: 0 4px 24px -8px rgba(0,0,0,.08); }
.dark .site-header { background: rgba(3,7,18,.88); border-bottom-color: rgba(255,255,255,.06); }

/* ── MEGA MENU ───────────────────────────────────────────────────────── */
.mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.07); border-radius: 1.25rem;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
  padding: 1.25rem; backdrop-filter: blur(16px); margin-top: 4px;
}
.mega-menu-item { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem; border-radius: .75rem; transition: background .15s; cursor: pointer; }
.mega-menu-item:hover { background: rgba(232,23,122,.06); }
.mega-menu-item:hover .mega-menu-title { color: #e8177a; }
.mega-menu-icon { flex-shrink:0; width:2.25rem; height:2.25rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center; font-size:1.125rem; background:#f9fafb; transition: background .15s; }
.mega-menu-item:hover .mega-menu-icon { background: #fce7f3; }
.mega-menu-title { font-size:.875rem; font-weight:600; color:#111827; transition: color .15s; display:block; }
.mega-menu-desc { font-size:.75rem; color:#9ca3af; margin-top:1px; line-height:1.4; display:block; }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:.75rem; font-size:.9375rem; font-weight:600; color:#fff;
  background:#e8177a; border:none;
  box-shadow:0 1px 2px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .2s, box-shadow .2s, transform .15s; cursor:pointer; text-decoration:none;
}
.btn-primary:hover { background:#c70d63; box-shadow:0 8px 20px -4px rgba(232,23,122,.4); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.1); }

.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6875rem 1.5rem; border-radius:.75rem; font-size:.9375rem; font-weight:600; color:#374151;
  background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 1px 2px rgba(0,0,0,.04); transition: all .2s; text-decoration:none;
}
.btn-secondary:hover { border-color:#fda4d4; color:#e8177a; box-shadow:0 4px 12px -2px rgba(232,23,122,.15); transform:translateY(-1px); }

.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:.625rem; font-size:.9375rem; font-weight:500; color:#6b7280; transition:all .15s; text-decoration:none; }
.btn-ghost:hover { color:#e8177a; background:rgba(232,23,122,.06); }

/* ── INPUTS ──────────────────────────────────────────────────────────── */
.input-base { width:100%; padding:.6875rem 1rem; border-radius:.75rem; border:1px solid #e5e7eb; font-size:.9375rem; color:#111827; background:#fff; outline:none; transition:all .2s; }
.input-base::placeholder { color:#9ca3af; }
.input-base:focus { border-color:#e8177a; box-shadow:0 0 0 3px rgba(232,23,122,.12); }

/* ── NAV LINK ────────────────────────────────────────────────────────── */
.nav-link { display:flex; align-items:center; gap:.375rem; padding:.5rem .75rem; border-radius:.5rem; font-size:.875rem; font-weight:500; color:#6b7280; text-decoration:none; transition:all .15s; }
.nav-link:hover { color:#e8177a; background:rgba(232,23,122,.06); }
.nav-link.active { color:#e8177a; background:rgba(232,23,122,.08); }

/* ── SECTION UTILITIES ───────────────────────────────────────────────── */
.section { padding-top:5rem; padding-bottom:5rem; }
@media (min-width:640px) { .section { padding-top:6rem; padding-bottom:6rem; } }
@media (min-width:1024px) { .section { padding-top:7rem; padding-bottom:7rem; } }
.container-site { max-width:80rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
@media (min-width:640px) { .container-site { padding-left:2rem; padding-right:2rem; } }
@media (min-width:1024px) { .container-site { padding-left:4rem; padding-right:4rem; } }
.section-label { display:inline-flex; align-items:center; gap:.375rem; padding:.3125rem .75rem; border-radius:9999px; font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(232,23,122,.08); color:#e8177a; border:1px solid rgba(232,23,122,.2); margin-bottom:1.25rem; }
.section-heading { font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif; font-size:clamp(1.875rem,4vw,3rem); font-weight:800; letter-spacing:-0.025em; line-height:1.1; color:#111827; }
.section-subheading { font-size:1.125rem; line-height:1.75; color:#6b7280; max-width:38rem; }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero-headline { font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif; font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; letter-spacing:-0.03em; line-height:1.02; color:#111827; }
.hero-subheadline { font-size:clamp(1.0625rem,2vw,1.25rem); line-height:1.65; color:#6b7280; max-width:38rem; }
.hero-section { position:relative; overflow:hidden; padding-top:5rem; padding-bottom:6rem; }
@media (min-width:640px) { .hero-section { padding-top:5rem; padding-bottom:6rem; } }
@media (min-width:1024px) { .hero-section { padding-top:7rem; padding-bottom:8rem; } }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.375rem 1rem; border-radius:9999px; font-size:.75rem; font-weight:600; margin-bottom:2rem; background:rgba(232,23,122,.08); border:1px solid rgba(232,23,122,.2); color:#e8177a; }

/* ── CARDS ───────────────────────────────────────────────────────────── */
.card-base { border-radius:1rem; border:1px solid #e5e7eb; background:#fff; transition:all .25s; }
.card-base:hover { border-color:#fda4d4; box-shadow:0 20px 40px -8px rgba(232,23,122,.12); transform:translateY(-2px); }
.feature-card { border-radius:1rem; border:1px solid #e5e7eb; background:#fff; padding:1.5rem; cursor:default; transition:all .3s; }
.feature-card:hover { border-color:#fda4d4; box-shadow:0 16px 32px -8px rgba(232,23,122,.12); transform:translateY(-2px); }
.testimonial-card { background:#fff; border-radius:1.25rem; padding:1.5rem; border:1px solid #f3f4f6; box-shadow:0 4px 24px -8px rgba(0,0,0,.06); transition:all .3s; }
.testimonial-card:hover { box-shadow:0 16px 48px -12px rgba(232,23,122,.12); border-color:#fda4d4; transform:translateY(-4px); }
.pricing-card { border-radius:1.25rem; padding:2rem; transition:all .3s; border:2px solid #e5e7eb; }
.pricing-card.featured { border-color:#e8177a; background:linear-gradient(to bottom,rgba(232,23,122,.03),#fff); box-shadow:0 0 0 4px rgba(232,23,122,.08),0 24px 48px -12px rgba(232,23,122,.15); }
.pricing-card:hover:not(.featured) { border-color:#fda4d4; box-shadow:0 16px 32px -8px rgba(0,0,0,.08); transform:translateY(-2px); }

/* ── SCROLL REVEAL ───────────────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1); }
[data-reveal="left"] { transform:translateX(-32px); }
[data-reveal="right"] { transform:translateX(32px); }
[data-reveal="scale"] { transform:scale(.92); }
[data-reveal].revealed { opacity:1; transform:none; }
[data-reveal-delay="100"] { transition-delay:.1s; }
[data-reveal-delay="200"] { transition-delay:.2s; }
[data-reveal-delay="300"] { transition-delay:.3s; }
[data-reveal-delay="400"] { transition-delay:.4s; }
[data-reveal-delay="500"] { transition-delay:.5s; }

/* ── FLOATING CARDS ──────────────────────────────────────────────────── */
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
.floating-card { animation:float 6s ease-in-out infinite; }
.float-card-slow { animation:float 9s ease-in-out infinite 2s; }

/* ── LOGO MARQUEE ────────────────────────────────────────────────────── */
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.logo-cloud-track { display:flex; align-items:center; gap:3rem; animation:marquee 30s linear infinite; width:max-content; }
.logo-cloud-track:hover { animation-play-state:paused; }

/* ── READING PROGRESS ────────────────────────────────────────────────── */
#reading-progress { position:fixed; top:0; left:0; width:0%; height:3px; background:linear-gradient(to right,#e8177a,#8b31cf,#f5178a); z-index:9999; transition:width 80ms linear; }

/* ── BLOG PROSE ──────────────────────────────────────────────────────── */
.prose { max-width:none; color:#374151; }
.prose h2 { font-size:1.625rem; font-weight:800; color:#111827; margin-top:2.25rem; margin-bottom:1rem; letter-spacing:-0.02em; scroll-margin-top:5rem; }
.prose h3 { font-size:1.25rem; font-weight:700; color:#111827; margin-top:1.75rem; margin-bottom:.75rem; scroll-margin-top:5rem; }
.prose p { margin-bottom:1.25rem; line-height:1.75; }
.prose ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }
.prose ul li::marker { color:#e8177a; }
.prose ol { list-style:decimal; padding-left:1.25rem; margin-bottom:1rem; }
.prose ol li::marker { color:#e8177a; font-weight:600; }
.prose li { margin-bottom:.25rem; }
.prose a { color:#e8177a; text-decoration-thickness:1px; text-underline-offset:2px; }
.prose a:hover { text-decoration:underline; }
.prose strong { font-weight:700; color:#111827; }
.prose blockquote { border-left:3px solid #e8177a; padding:.875rem 1.25rem; background:rgba(232,23,122,.04); border-radius:0 .5rem .5rem 0; margin:1.5rem 0; }
.prose code { background:#fdf2f8; padding:.15em .4em; border-radius:.3rem; font-size:.875em; color:#e8177a; font-family:"JetBrains Mono","Fira Code",monospace; }
.prose pre { background:#111827; border-radius:.875rem; padding:1.5rem; overflow-x:auto; margin:1.75rem 0; box-shadow:0 8px 24px -4px rgba(0,0,0,.2); }
.prose pre code { background:none; color:#e5e7eb; padding:0; font-size:.875em; }
.prose img { border-radius:.75rem; box-shadow:0 8px 24px -4px rgba(0,0,0,.1); }
.prose hr { border-color:#e5e7eb; margin:2rem 0; }
.prose table { width:100%; border-collapse:collapse; }
.prose th { background:#f9fafb; padding:.625rem 1rem; font-weight:600; text-align:left; border-bottom:2px solid #e5e7eb; font-size:.875rem; }
.prose td { padding:.625rem 1rem; border-bottom:1px solid #f3f4f6; font-size:.875rem; }

/* ── TABLE OF CONTENTS ───────────────────────────────────────────────── */
.toc { background:#f9fafb; border-radius:1.25rem; border:1px solid #e5e7eb; padding:1.25rem; font-size:.875rem; }
.toc .toc-title { font-weight:700; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.toc a { display:block; padding:.3125rem 0; color:#6b7280; transition:color .15s; text-decoration:none; }
.toc a:hover,.toc a.active { color:#e8177a; }
.toc a.active { font-weight:600; }
.toc .toc-h3 { padding-left:1rem; font-size:.8125rem; }

/* ── COMPARISON TABLE ────────────────────────────────────────────────── */
.comparison-row td { padding:.875rem 1.25rem; border-bottom:1px solid #f3f4f6; font-size:.875rem; transition:background .15s; }
.comparison-row:hover td { background:rgba(232,23,122,.03); }
.comparison-row td:first-child { font-weight:500; color:#374151; }

/* ── GLASS EFFECT ────────────────────────────────────────────────────── */
.glass { background:rgba(255,255,255,.08); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); }
.glass-dark { background:rgba(0,0,0,.4); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.08); }

/* ── GRADIENT TEXT ───────────────────────────────────────────────────── */
.text-gradient { background:linear-gradient(135deg,#e8177a 0%,#8b31cf 50%,#f5178a 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.text-gradient-r { background:linear-gradient(to right,#e8177a,#8b31cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── ANNOUNCEMENTS ───────────────────────────────────────────────────── */
@keyframes gradientX { 0%,100% { background-position:0 50%; } 50% { background-position:100% 50%; } }
.announcement-bar { background:linear-gradient(90deg,#e8177a,#8b31cf,#e8177a); background-size:200% 100%; animation:gradientX 5s ease infinite; }

/* ── UTILITIES ───────────────────────────────────────────────────────── */
.scrollbar-hide::-webkit-scrollbar { display:none; }
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.text-balance { text-wrap:balance; }
.text-pretty { text-wrap:pretty; }
.text-2xs { font-size:.625rem; line-height:.875rem; }
.text-4-5 { width:1.125rem; height:1.125rem; }
.w-4\.5 { width:1.125rem; }
.h-4\.5 { height:1.125rem; }

/* ── SHADOWS ─────────────────────────────────────────────────────────── */
.shadow-xs { box-shadow:0 1px 2px rgba(0,0,0,.05); }
.shadow-3xl { box-shadow:0 35px 60px -15px rgba(0,0,0,.25); }
.shadow-brand-sm { box-shadow:0 2px 8px -1px rgba(232,23,122,.25); }
.shadow-brand-md { box-shadow:0 6px 16px -3px rgba(232,23,122,.28); }
.shadow-brand-lg { box-shadow:0 12px 28px -4px rgba(232,23,122,.38); }
.shadow-brand-xl { box-shadow:0 20px 40px -8px rgba(232,23,122,.45); }

/* ── HERO BACKGROUNDS ────────────────────────────────────────────────── */
.bg-hero-light { background:radial-gradient(ellipse 80% 70% at 50% -10%, rgba(232,23,122,.09) 0%, transparent 75%); }
.bg-dots { background-image:radial-gradient(circle, #e9d5ff 1px, transparent 1px); background-size:24px 24px; }
.bg-mesh-dark { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,23,122,.15) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(99,102,241,.1) 0%, transparent 60%); }

/* ── TOAST ───────────────────────────────────────────────────────────── */
.fitz-toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem; border-radius:1rem; border-left-width:4px; box-shadow:0 16px 32px rgba(0,0,0,.15); font-size:.875rem; font-weight:500; color:#fff; max-width:22rem; transition:all .3s; }

/* ── ANIMATIONS ──────────────────────────────────────────────────────── */
@keyframes ping { 75%,100% { transform:scale(2); opacity:0; } }
.animate-ping { animation:ping 1s cubic-bezier(0,0,.2,1) infinite; }
@keyframes pulseSoft { 0%,100% { opacity:1; } 50% { opacity:.7; } }
.animate-pulse-soft { animation:pulseSoft 3s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.animate-spin { animation:spin 1s linear infinite; }

/* ── DARK MODE ───────────────────────────────────────────────────────── */

/* — Base component classes (unchanged from v1) — */
.dark .section-heading { color:#f3f4f6; }
.dark .section-subheading { color:#9ca3af; }
.dark .hero-headline { color:#f9fafb; }
.dark .card-base { background:#131c2e !important; border-color:rgba(255,255,255,.08) !important; }
.dark .feature-card { background:#131c2e; border-color:rgba(255,255,255,.08); }
.dark .testimonial-card { background:#131c2e; border-color:rgba(255,255,255,.08); }
.dark .pricing-card { background:#131c2e; border-color:rgba(255,255,255,.08); }
.dark .pricing-card.featured { background:linear-gradient(to bottom,rgba(232,23,122,.15),rgba(232,23,122,.05)); }
.dark .mega-menu { background:rgba(11,15,25,.98) !important; border-color:rgba(255,255,255,.08) !important; }
.dark .mega-menu-title { color:#e2e8f0 !important; }
.dark .mega-menu-desc { color:#4b5563 !important; }
.dark .mega-menu-item:hover { background:rgba(255,255,255,.05) !important; }
.dark .mega-menu .border-t { border-color:rgba(255,255,255,.07) !important; }
/* Solutions icon bg — replace light bg-*-50 classes with dark semi-transparent tints */
.dark .mega-menu-icon.bg-brand-50  { background:rgba(232,23,122,.18) !important; }
.dark .mega-menu-icon.bg-teal-50   { background:rgba(20,184,166,.18) !important; }
.dark .mega-menu-icon.bg-orange-50 { background:rgba(249,115,22,.18) !important; }
.dark .mega-menu-icon.bg-green-50  { background:rgba(34,197,94,.18) !important; }
.dark .mega-menu-icon.bg-pink-50   { background:rgba(236,72,153,.18) !important; }
.dark .mega-menu-icon.bg-indigo-50 { background:rgba(99,102,241,.18) !important; }
/* Newsletter subscribe button — brand-700 looks near-black on dark footer; use vivid brand primary */
.dark #footer-newsletter-form button[type="submit"] { background:#e8177a !important; box-shadow:0 4px 14px rgba(232,23,122,.35) !important; }
.dark #footer-newsletter-form button[type="submit"]:hover { background:#c90d6a !important; }

/* Icon text (svg currentColor) — use lighter tints for legibility on dark bg */
.dark .mega-menu-icon.bg-brand-50  { color:#fda4d4 !important; }
.dark .mega-menu-icon.bg-teal-50   { color:#5eead4 !important; }
.dark .mega-menu-icon.bg-orange-50 { color:#fdba74 !important; }
.dark .mega-menu-icon.bg-green-50  { color:#86efac !important; }
.dark .mega-menu-icon.bg-pink-50   { color:#f9a8d4 !important; }
.dark .mega-menu-icon.bg-indigo-50 { color:#a5b4fc !important; }
.dark .input-base { background:#1e293b !important; border-color:rgba(255,255,255,.12) !important; color:#e2e8f0 !important; }
.dark select.input-base option { background:#1e293b; color:#e2e8f0; }
.dark .btn-secondary { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#e2e8f0; }
.dark .btn-ghost { color:#64748b; }
.dark .btn-ghost:hover { color:#fda4d4; background:rgba(232,23,122,.08); }
.dark .toc { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.dark .prose { color:#d1d5db; }
.dark .prose h2,.dark .prose h3 { color:#f9fafb; }
.dark .prose strong { color:#f9fafb; }

/* — Body & scrollbar — */
.dark body { background-color:#0b0f19; color:#e2e8f0; }
.dark ::-webkit-scrollbar-thumb { background:#334155; }
.dark ::-webkit-scrollbar-thumb:hover { background:#475569; }

/* — Site header — */
.dark .site-header { background:rgba(11,15,25,.92) !important; border-color:rgba(255,255,255,.06) !important; }
.dark .nav-link { color:#94a3b8; }
.dark .nav-link:hover { color:#fda4d4; background:rgba(232,23,122,.06); }
.dark .nav-link.active { color:#fda4d4; background:rgba(232,23,122,.08); }

/* — Typography globals — */
.dark .text-gray-900 { color:#f1f5f9 !important; }
.dark .text-gray-800 { color:#e2e8f0 !important; }
.dark .text-gray-700 { color:#cbd5e1 !important; }
.dark .text-gray-600 { color:#94a3b8 !important; }
.dark .text-gray-500 { color:#64748b !important; }

/* — Borders — */
.dark .border-gray-100 { border-color:rgba(255,255,255,.07) !important; }
.dark .border-gray-200 { border-color:rgba(255,255,255,.10) !important; }
.dark .border-y.border-gray-100 { border-color:rgba(255,255,255,.07) !important; }

/* — Section backgrounds — */
.dark section.bg-white { background-color:#0f172a !important; }
.dark section[class*="bg-gray-50"] { background-color:#111827 !important; }

/* — Blog article & non-section white containers — */
.dark article { background-color:#0b0f19; }
.dark article header.bg-white,
.dark article div.bg-white { background-color:#0b0f19 !important; }
.dark article .bg-gray-50 { background-color:#111827 !important; }
.dark article .bg-gray-100 { background-color:#1e293b !important; }

/* — Blog sidebar panels — */
.dark aside .bg-white { background-color:#131c2e !important; }
.dark aside .bg-gray-50 { background-color:#111827 !important; }
.dark aside .bg-gray-100 { background-color:#1e293b !important; }

/* — Blog post cards (a elements) — */
.dark a.bg-white { background-color:#131c2e !important; }
.dark a.bg-white h3 { color:#f1f5f9 !important; }
.dark a.bg-white p { color:#64748b !important; }
.dark a.bg-white .text-gray-400 { color:#475569 !important; }
.dark a.bg-white .border-gray-100 { border-color:rgba(255,255,255,.06) !important; }

/* — Gradient fades (from-white / to-white overlays in white sections) — */
.dark [class*="from-white"] { --tw-gradient-from:rgba(15,23,42,0.7) !important; }
.dark .from-white { --tw-gradient-from:#0f172a !important; }
.dark [class*="to-white"] { --tw-gradient-to:#0f172a !important; }

/* — §2 Social proof bar — */
.dark .border-y { border-color:rgba(255,255,255,.07) !important; }
.dark #customer-showcase { background-color:#0f172a !important; }
.dark #customer-showcase [class*="from-white"] { --tw-gradient-from:#0f172a !important; }
.dark #customer-showcase [class*="to-white"] { --tw-gradient-to:#0f172a !important; }
.dark #customer-showcase .text-gray-500 { color:#4b5563 !important; }

/* — §4 Feature cards — */
.dark #features a[class*="rounded-2xl"] { background:#131c2e !important; }
.dark #features a[class*="rounded-2xl"] h3 { color:#f1f5f9 !important; }
.dark #features a[class*="rounded-2xl"] p { color:#64748b !important; }

/* — §5 Industry solutions — */
/* Inactive tab pills: Alpine sets background:#f3f4f6 via inline style */
.dark #solutions button[style*="#f3f4f6"] { background:#1e293b !important; color:#94a3b8 !important; }
.dark #solutions h3.font-bold { color:#f1f5f9 !important; }
.dark #solutions li.text-sm { color:#cbd5e1 !important; }
.dark #solutions .bg-gray-50 { background:#1e293b !important; border-color:rgba(255,255,255,.08) !important; }
/* "Why switch" tag pills */
.dark #solutions span.bg-white { background:#0f172a !important; border-color:rgba(255,255,255,.1) !important; color:#cbd5e1 !important; }

/* — §8 Integrations — integration cards have inline style background:#f8fafc — */
.dark [style*="background:#f8fafc"] { background:#131c2e !important; }
.dark [style*="border:2.5px solid #e3e4e5"] { border-color:rgba(255,255,255,.1) !important; }

/* — §9 Testimonials — */
.dark blockquote { color:#e2e8f0 !important; }
.dark #testimonials .text-gray-700 { color:#cbd5e1 !important; }

/* — §10 Pricing — */
.dark #pricing .bg-white.border { background:#1e293b !important; border-color:rgba(255,255,255,.1) !important; }
.dark #pricing button.bg-white { background:#1e293b !important; border-color:rgba(255,255,255,.1) !important; color:#94a3b8 !important; }
.dark #pricing .rounded-2xl.bg-white { background:#131c2e !important; }
.dark #pricing a[style*="border:2px solid #e5e7eb"] { border-color:rgba(255,255,255,.15) !important; color:#cbd5e1 !important; }
.dark #pricing .border-t.border-gray-100 { border-color:rgba(255,255,255,.07) !important; }

/* — §11 FAQ — */
.dark #faq .border.border-gray-100 { background:#131c2e !important; border-color:rgba(255,255,255,.07) !important; }
.dark #faq .border.border-gray-100:hover { border-color:rgba(232,23,122,.3) !important; }
.dark #faq .bg-gray-100 { background:#1e293b !important; }

/* — §12 Blog — */
.dark #blog-section .bg-white { background:#131c2e !important; }
.dark #blog-section h3 { color:#f1f5f9 !important; }
.dark #blog-section p.text-gray-500 { color:#64748b !important; }
.dark #blog-section .text-gray-400 { color:#475569 !important; }

/* — Sticky mobile CTA bar — */
.dark .fixed.bottom-0.bg-white { background:#0f172a !important; border-color:rgba(255,255,255,.07) !important; }
.dark .fixed.bottom-0.bg-white a[class*="border"] { border-color:rgba(255,255,255,.1) !important; color:#cbd5e1 !important; }

/* — Mobile nav menu (dark-mode-aware panel items) — */
.dark header .border-t.border-gray-100 { border-color:rgba(255,255,255,.07) !important; }
.dark header button[class*="text-gray-900"] { color:#f1f5f9 !important; }
.dark header a[class*="text-gray-900"] { color:#f1f5f9 !important; }
.dark header a[class*="text-gray-600"] { color:#94a3b8 !important; }
.dark header .hover\:bg-gray-50:hover { background:rgba(255,255,255,.05) !important; }
.dark header .hover\:bg-gray-100:hover { background:rgba(255,255,255,.08) !important; }

/* — Solutions pages: "With Fitzpot" panel + "How it works" step cards —
   These use inline style= gradient backgrounds that CSS must override with !important.
   #fff0f7 = "With Fitzpot" panel & step 2 card start color
   #fef0f3 = step 1 card (pink tint)
   #f8f0fe = step 3 card (purple tint)                                   */
.dark [style*="#fff0f7"],
.dark [style*="#fef0f3"],
.dark [style*="#f8f0fe"] {
  background: #131c2e !important;
}
/* Separator border-bottom / border-left inside those light panels */
.dark [style*="#fff0f7"] [style*="border-bottom"],
.dark [style*="#fef0f3"] [style*="border-bottom"],
.dark [style*="#f8f0fe"] [style*="border-bottom"] { border-color:rgba(255,255,255,.1) !important; }
/* "With Fitzpot" panel outer border-left */
.dark [style*="border-left:1px solid rgba(241,41,98,.12)"] { border-left-color:rgba(241,41,98,.3) !important; }
/* Pain-point row dividers inside the "With Fitzpot" panel */
.dark [style*="border-bottom:1px solid rgba(241,41,98,.1)"] { border-bottom-color:rgba(255,255,255,.07) !important; }

/* — Generic card rule: rounded-2xl bg-white (feature cards, FAQ items on solutions pages) — */
.dark .rounded-2xl.bg-white { background:#131c2e !important; }

/* ── Pricing page (/pricing) ─────────────────────────────────────────── */
/* Hero gradient section (from-brand-50 via-white to-accent-50) */
.dark section[class*="from-brand-50"] { background:#0b0f19 !important; }

/* Billing toggle pill */
.dark .rounded-full.bg-white { background:#1e293b !important; }

/* Plan card outer wrapper — border varies by featured/non-featured */
.dark .border-gray-100.rounded-2xl { border-color:rgba(255,255,255,.08) !important; }

/* Non-featured CTA button (global — applies to both home carousel and /pricing page) */
.dark a[style*="border:2px solid #e5e7eb"] { border-color:rgba(255,255,255,.15) !important; color:#cbd5e1 !important; }

/* Limit badges */
.dark .bg-brand-50   { background:rgba(232,23,122,.12) !important; }
.dark .border-brand-200 { border-color:rgba(232,23,122,.22) !important; }
.dark .text-brand-700 { color:#fda4d4 !important; }
.dark .bg-purple-50  { background:rgba(133,32,158,.12) !important; }
.dark .border-purple-200 { border-color:rgba(133,32,158,.22) !important; }
.dark .text-purple-700 { color:#c084fc !important; }
.dark .bg-gray-100   { background:#1e293b !important; }
.dark .text-gray-600.bg-gray-100 { color:#94a3b8 !important; }

/* "Save 20%" green badge */
.dark .bg-green-100  { background:rgba(34,197,94,.12) !important; }
.dark .text-green-700 { color:#4ade80 !important; }

/* FAQ expand icon — inactive state uses inline background:#f3f4f6 */
.dark [style*="background:#f3f4f6"] { background:#1e293b !important; color:#94a3b8 !important; }

/* Divider inside plan cards */
.dark .border-t.border-gray-100 { border-color:rgba(255,255,255,.07) !important; }

/* ── Features pages (/features/*) ─────────────────────────────────────── */
/* FAQ item collapsed-state inline border */
.dark [style*="border:1.5px solid #e5e7eb"] { border-color:rgba(255,255,255,.08) !important; }
/* FAQ question button: bg-white without rounded-2xl (wrapper has overflow-hidden) */
.dark .rounded-2xl.overflow-hidden button.bg-white { background:#131c2e !important; }
/* Alpine :style heading – non-hovered state sets color:#111827 inline */
.dark [style*="color:#111827"] { color:#f1f5f9 !important; }

/* ── Light-pink gradient backgrounds (contact hero, FAQ hero, about stats, FAQ bottom box) */
.dark [style*="#fff0f6"] { background:#131c2e !important; }

/* ── Form cards (book-demo, free-trial, contact) use rounded-3xl bg-white ── */
.dark .rounded-3xl.bg-white { background:#131c2e !important; }

/* ── bg-gray-50 info cards (e.g. contact "Response Time" box) ─────────── */
.dark .rounded-2xl.bg-gray-50 { background:#131c2e !important; border-color:rgba(255,255,255,.08) !important; }

/* ── Solutions pages dark mode readability ────────────────────────────── */
/* CTA "Start Free Trial" white button on already-dark hero sections must stay white */
/* Identified by shadow-2xl which is unique to CTA buttons, not feature/FAQ cards */
.dark a.bg-white.rounded-2xl.shadow-2xl { background:#fff !important; }
/* FAQ active toggle icon & mobile sticky CTA bar — bg-brand-700 is near-black in dark */
.dark .bg-brand-700 { background:#e8177a !important; }
.dark .hover\:bg-brand-800:hover { background:#c70d63 !important; }

/* — Dark mode toggle pill — */
.dark-toggle { position:relative; display:inline-flex; flex-shrink:0; width:3.25rem; height:1.75rem; border-radius:9999px; transition:all .3s; cursor:pointer; border:none; }
.dark-toggle-knob { position:absolute; top:3px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s cubic-bezier(.34,1.56,.64,1); }