/* ============================================================
   REIA ENTERPRISE THEME — additive stylesheet (loads AFTER style.css)
   Design language inspired by michaelben.xyz:
   - design tokens via CSS custom properties
   - light theme default + dark mode via html.dark (toggle in nav)
   - Sora display type + JetBrains Mono labels
   - glow / micro-interaction system, branded scrollbar, selection
   - live status pulse, badge-enhanced pills, numbered step cards
   - smooth scroll + scroll-padding, back-to-top
   REIA brand identity preserved (sky-blue accent family).
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --accent: #0ea5e9;
  --accent-strong: #0284c7;
  --accent-glow: rgba(14, 165, 233, 0.35);
  --accent-glow-lg: rgba(14, 165, 233, 0.2);
  --accent-soft: rgba(14, 165, 233, 0.08);
  --accent-border: rgba(14, 165, 233, 0.3);
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: #d97706;
  --warning-soft: rgba(245, 158, 11, 0.14);

  --font-display: 'Sora', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --surface-0: #ffffff;
  --surface-1: #f8fafc;
  --surface-2: #f1f5f9;
  --border-1: #e2e8f0;
  --text-1: #0c1e3f;
  --text-2: #475569;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --nav-blur: rgba(255, 255, 255, 0.85);
  --scrollbar-track: #f1f5f9;
}

html.dark {
  --accent: #38bdf8;
  --accent-strong: #22d3ee;
  --accent-glow: rgba(56, 189, 248, 0.4);
  --accent-glow-lg: rgba(56, 189, 248, 0.2);
  --accent-soft: rgba(56, 189, 248, 0.12);
  --accent-border: rgba(56, 189, 248, 0.35);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);

  --surface-0: #0b0f1a;
  --surface-1: #101626;
  --surface-2: #1c243b;
  --border-1: #1c243b;
  --text-1: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #64748b;
  --nav-blur: rgba(11, 15, 26, 0.85);
  --scrollbar-track: #0b0f1a;
}

/* ---------- 2. GLOBAL / BASE ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 96px; }
}

html.dark body {
  background: var(--surface-0);
  color: var(--text-2);
}

/* theme transition — applied only while toggling (added by JS) */
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease,
              box-shadow 0.25s ease !important;
}

/* branded scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.6); }

::selection { background: rgba(14, 165, 233, 0.25); color: inherit; }

/* ---------- 3. TYPOGRAPHY UPGRADE ---------- */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

h1, h2, h3, h4, h5, h6,
.section-title, .hero h1, .stat-number, .calc-result-number, .calc-sub-result,
.manifesto-box h2, .pricing-card .price, .voice-card h4, .step-card h3 {
  font-family: var(--font-display);
}

.section-label,
.hero-badge,
.status-badge,
.stat-label,
.calc-value-display,
.integ-card .integ-icon,
.voice-card-role,
.plan-name,
.step-number {
  font-family: var(--font-mono);
}

/* section labels — mono, letter-spaced (michaelben eyebrow style) */
.section-label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* ---------- 4. NAV ---------- */
nav#nav.scrolled {
  background: var(--nav-blur);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--border-1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
html.dark nav#nav { color: var(--text-2); }
html.dark .nav-logo { color: var(--text-1); }
html.dark .nav-links a { color: var(--text-3); }
html.dark .nav-links a:hover { color: var(--accent); }
html.dark .nav-toggle span { background: var(--text-1); }

/* theme toggle button (sun/moon) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-1);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ---------- 5. BUTTONS — glow upgrade (keep pill shape + brand gradient) ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow-lg);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
html.dark .btn-primary {
  background: linear-gradient(160deg, #0369a1, #0ea5e9);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.35);
}
html.dark .btn-outline {
  color: var(--accent);
  border-color: var(--accent-border);
}
html.dark .btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* click ripple (michaelben style) */
.btn-primary::after, .btn-outline::after {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.btn-primary.ripple-active::after, .btn-outline.ripple-active::after {
  animation: click-ripple 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes click-ripple {
  0% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.5); opacity: 0.85; }
  100% { box-shadow: inset 0 0 0 18px rgba(255, 255, 255, 0); opacity: 0; }
}

/* ---------- 6. HERO ---------- */
html.dark .hero {
  background: linear-gradient(180deg, #0b0f1a 0%, #101626 55%, #0b0f1a 100%);
}
html.dark .hero-bg-decor-1 {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
}
html.dark .hero-bg-decor-2 {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
}
html.dark .hero h1 { color: var(--text-1); }
html.dark .hero h1 .highlight {
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.dark .hero p { color: var(--text-3); }
html.dark .hero-stat p { color: var(--text-4); }
html.dark .hero-stat strong { color: var(--accent); }

/* hero badge → live status with pulsing dot */
.hero-badge {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}
html.dark .hero-badge { color: var(--accent); }
.hero-badge .live-pulse-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--success);
  animation: dotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 2px var(--success);
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 2px var(--success); }
  50% { opacity: 0.55; transform: scale(1.35); box-shadow: 0 0 7px var(--success); }
}

/* voice panel status badge → glow pulse */
html.dark .voice-demo-panel {
  background: var(--surface-1);
  border-color: var(--border-1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
html.dark .voice-demo-header h3 { color: var(--text-1); }
.status-badge { color: var(--success); }
.status-badge::before {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
html.dark .voice-avatar-option {
  background: var(--surface-2);
  border-color: var(--border-1);
}
html.dark .voice-avatar-option:hover {
  border-color: var(--accent-border);
  background: var(--surface-1);
}
html.dark .voice-avatar-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-glow-lg);
}
html.dark .voice-avatar-option .avatar-name { color: var(--text-1); }
html.dark .voice-avatar-option .avatar-role { color: var(--text-4); }
html.dark .voice-customise-link { color: var(--text-4); }
html.dark .voice-customise-link:hover { color: var(--accent); background: var(--accent-soft); }
html.dark .customise-field select,
html.dark .customise-field input {
  background: var(--surface-2);
  border-color: var(--border-1);
  color: var(--text-1);
}
html.dark .customise-field select:focus,
html.dark .customise-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow-lg);
}

/* workflow demo chips */
html.dark .workflow-demo {
  background: var(--surface-1) !important;
  border-color: var(--border-1) !important;
}
html.dark .workflow-demo [style*="background:#fff"] {
  background: var(--surface-2) !important;
  border-color: var(--border-1) !important;
  color: var(--text-2) !important;
}
html.dark .workflow-demo [style*="background:#f0f9ff"] {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
html.dark .workflow-demo [style*="background:#ecfdf5"] {
  background: var(--success-soft) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  color: var(--success) !important;
}
html.dark .workflow-demo [style*="color:#94a3b8"] { color: var(--text-4) !important; }

/* integrations chips under hero */
html.dark .hero-bottom .hero-integrations .integ-logos div {
  background: var(--surface-1);
  border-color: var(--border-1);
  color: var(--text-3);
}
html.dark .hero-bottom .hero-integrations .integ-logos div:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
html.dark .hero-bottom .hero-integrations span { color: var(--text-4); }

/* ---------- 6b. MICRO-INTERACTIONS (michaelben signature) ---------- */
/* iconBeat — pulse the mic / voice avatar icon with a glow on hover */
@keyframes iconBeat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 8px var(--accent-glow)); }
}
.voice-mic-btn:hover svg {
  animation: iconBeat 2s ease-in-out infinite;
}
.voice-avatar-option:hover .avatar-flag {
  animation: iconBeat 2s ease-in-out infinite;
}
html.dark .voice-mic-btn:hover svg {
  animation-name: iconBeatDark;
}
@keyframes iconBeatDark {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.55)); }
}

/* glowPulse — subtle text-shadow glow on the REIA highlight (dark only) */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 18px rgba(56, 189, 248, 0.35), 0 0 42px rgba(14, 165, 233, 0.18); }
}
html.dark .hero h1 .highlight {
  animation: glowPulse 2.8s ease-in-out infinite;
}
html.dark .manifesto-box [style*="font-size:3rem"] {
  animation: glowPulse 2.8s ease-in-out infinite;
}

/* ---------- 7. SECTIONS — dark surfaces ---------- */
html.dark section[style*="background:#fff"] {
  background: var(--surface-0) !important;
}
html.dark section[style*="background:#f8fafc"] {
  background: var(--surface-1) !important;
}
/* class-based section backgrounds (style.css hardcodes light bg) */
html.dark .voice-section { background: var(--surface-1) !important; }
html.dark .how-section { background: var(--surface-1) !important; }
html.dark .trusted-section { background: var(--surface-1) !important; }
html.dark .section-title { color: var(--text-1); }
html.dark .section-sub { color: var(--text-3); }
html.dark .text-gradient {
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* problem cards (inline-styled) */
html.dark section#problem [style*="background:#f8fafc"] {
  background: var(--surface-1) !important;
  border-color: var(--border-1) !important;
}
html.dark section#problem h3 { color: var(--text-1) !important; }
html.dark section#problem p { color: var(--text-3) !important; }

/* step cards (outcome cards) */
.step-card {
  position: relative;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 32px 24px;
  background: var(--surface-0);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
html.dark .step-card { background: var(--surface-1); }
.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 30px var(--accent-glow-lg);
}
.step-card h3 { color: var(--text-1) !important; }
.step-card p { color: var(--text-3) !important; }

/* numbered step marker (michaelben "STEP 01" treatment) */
.step-card::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
  opacity: 0.7;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 3px 10px;
  border-radius: 9999px;
}
.resp-grid-3 { counter-reset: step-counter; }

/* ---------- 8. STAT CARDS ---------- */
html.dark .stat-card {
  background: var(--surface-1);
  border-color: var(--border-1);
}
.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--accent-glow-lg);
}
.stat-number {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
html.dark .stat-number {
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.dark .stat-label { color: var(--text-4); }

/* why-items */
html.dark .why-item {
  background: var(--surface-1);
  border-color: var(--border-1);
}
html.dark .why-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
html.dark .why-item span:last-child { color: var(--text-1); }

/* ---------- 9. CALCULATOR ---------- */
html.dark .calc-container {
  background: var(--surface-1);
  border-color: var(--border-1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
html.dark .calc-container h3 { color: var(--text-1) !important; }
html.dark .calc-range-group label { color: var(--text-3); }
html.dark .calc-range-group input[type="range"] { background: var(--surface-2); }
html.dark .calc-range-group input[type="range"]::-webkit-slider-thumb {
  background: var(--accent);
  border-color: var(--surface-1);
  box-shadow: 0 2px 8px var(--accent-glow);
}
html.dark .calc-range-group input[type="number"],
html.dark .calc-range-group select {
  background: var(--surface-2);
  border-color: var(--border-1);
  color: var(--text-1);
}
html.dark .calc-range-group input[type="number"]:focus,
html.dark .calc-range-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow-lg);
}
html.dark .calc-value-display { color: var(--text-4); }
html.dark .calc-value-display span:last-child { color: var(--accent); }
html.dark .calc-container [style*="background:#f0f9ff"] {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
}
html.dark .calc-container [style*="color:#0284c7"] { color: var(--accent) !important; }
html.dark .calc-result-card {
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface-1) 100%) !important;
  border-color: var(--accent-border) !important;
}
html.dark .calc-result-card [style*="color:#64748b"] { color: var(--text-3) !important; }
html.dark .calc-container [style*="background:#f8fafc"] {
  background: var(--surface-2) !important;
}
html.dark .calc-sub-result { color: var(--accent) !important; }
html.dark .calc-container [style*="color:#0c1e3f"] { color: var(--text-1) !important; }
html.dark .calc-container [style*="color:#64748b"] { color: var(--text-3) !important; }

/* ---------- 10. MANIFESTO / AI EXPLAINED ---------- */
html.dark .manifesto-box {
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface-0) 100%) !important;
  border-color: var(--accent-border) !important;
}
html.dark .manifesto-box [style*="color:#0ea5e9"] { color: var(--accent) !important; }
html.dark .manifesto-box h2 { color: var(--text-1) !important; }
html.dark .manifesto-box [style*="color:#475569"] { color: var(--text-2) !important; }

/* ---------- 11. INTEGRATIONS (Works With Your Stack) ---------- */
html.dark .integ-card {
  background: var(--surface-1);
  border-color: var(--border-1);
}
.integ-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow-lg);
}
html.dark .integ-card h4 { color: var(--text-1); }
html.dark .integ-card p { color: var(--text-3); }

/* badge-enhanced pills (Live / Building tags) */
.badge-enhanced {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 2px solid;
}
.badge-enhanced.live {
  color: #059669;
  background: #d1fae5;
  border-color: rgba(16, 185, 129, 0.45);
}
.badge-enhanced.building {
  color: #d97706;
  background: #fef3c7;
  border-color: rgba(245, 158, 11, 0.45);
}
html.dark .badge-enhanced.live {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(52, 211, 153, 0.5);
}
html.dark .badge-enhanced.building {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(251, 191, 36, 0.45);
}

/* inline-styled Live/Building pills (integrations cards) — dark overrides */
html.dark [style*="background:#d1fae5"] {
  background: var(--success-soft) !important;
  color: var(--success) !important;
}
html.dark [style*="background:#fef3c7"] {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
}

/* ---------- 11b. BROAD INLINE-STYLE CATCH-ALLS (dark) ----------
   The EJS templates use many inline color styles. These broad rules
   dark-adapt any remaining inline-styled surfaces/text; the specific
   rules above/below win where they need a different treatment. */
html.dark [style*="background:#fff;"] {
  background: var(--surface-1) !important;
  border-color: var(--border-1) !important;
}
html.dark [style*="background:#f8fafc;"] {
  background: var(--surface-2) !important;
  border-color: var(--border-1) !important;
}
html.dark [style*="background:#f0f9ff"] {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
}
html.dark [style*="background:#ecfdf5"] {
  background: var(--success-soft) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}
html.dark [style*="color:#0c1e3f"] { color: var(--text-1) !important; }
html.dark [style*="color:#1e293b"] { color: var(--text-1) !important; }
html.dark [style*="color:#475569"] { color: var(--text-2) !important; }
html.dark [style*="color:#64748b"] { color: var(--text-3) !important; }
html.dark [style*="color:#94a3b8"] { color: var(--text-4) !important; }
html.dark [style*="color:#0284c7"] { color: var(--accent) !important; }
html.dark [style*="color:#059669"] { color: var(--success) !important; }
html.dark [style*="color:#d97706"] { color: var(--warning) !important; }
html.dark [style*="color:#0ea5e9"] { color: var(--accent) !important; }

/* ---------- 12. VOICE CARDS (AI Voice section) ---------- */
html.dark .voice-card {
  background: var(--surface-1);
  border-color: var(--border-1);
}
.voice-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px var(--accent-glow-lg);
}
html.dark .voice-card h4 { color: var(--text-1); }
html.dark .voice-card .voice-card-role { color: var(--accent); }
html.dark .voice-card .voice-card-desc { color: var(--text-3); }

/* ---------- 13. TESTIMONIALS ---------- */
html.dark .testimonials-section { background: var(--surface-1); }
html.dark .testimonial-card {
  background: var(--surface-1);
  border-color: var(--border-1);
}
.testimonial-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-glow-lg);
}
html.dark .testimonial-card blockquote { color: var(--text-2); }
html.dark .testimonial-card .quote { color: var(--accent); }
html.dark .testimonial-author .info .name { color: var(--text-1); }
html.dark .testimonial-author .info .role { color: var(--text-4); }
html.dark .carousel-arrow {
  background: var(--surface-1);
  border-color: var(--border-1);
  color: var(--text-3);
}
html.dark .carousel-arrow:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
html.dark .carousel-dot { background: var(--surface-2); }
html.dark .carousel-dot.active { background: var(--accent); }

/* ---------- 14. PRICING ---------- */
html.dark .pricing-section { background: var(--surface-0); }
html.dark .pricing-card {
  background: var(--surface-1);
  border-color: var(--border-1);
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px var(--accent-glow-lg);
}
html.dark .pricing-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface-1) 100%);
  box-shadow: 0 8px 32px var(--accent-glow-lg);
}
html.dark .pricing-card .price { color: var(--text-1); }
html.dark .pricing-card .plan-desc { color: var(--text-3); }
html.dark .pricing-card .plan-features li { color: var(--text-2); border-color: var(--border-1); }
html.dark .pricing-card .plan-features li::before { color: var(--accent); }

/* ---------- 15. FAQ ---------- */
html.dark .faq-section { background: var(--surface-1); }
html.dark .faq-item { border-color: var(--border-1); }
html.dark .faq-question { color: var(--text-1); }
html.dark .faq-question:hover { color: var(--accent); }
html.dark .faq-answer { color: var(--text-3); }
html.dark .faq-question .icon { color: var(--text-4); }
html.dark .faq-item.open .faq-question .icon { color: var(--accent); }

/* ---------- 16. CTA + FOOTER ---------- */
html.dark .cta-banner {
  background: linear-gradient(160deg, #082f49 0%, #0c4a6e 45%, #075985 100%);
}
html.dark footer {
  background: var(--surface-1);
  border-top-color: var(--border-1);
}
html.dark .footer-brand p { color: var(--text-4); }
html.dark .footer-brand [style*="color:#64748b"] { color: var(--text-4) !important; }
html.dark .footer-col h4 { color: var(--text-1); }
html.dark .footer-col ul a { color: var(--text-3); }
html.dark .footer-col ul a:hover { color: var(--accent); }
html.dark .footer-bottom { color: var(--text-4); border-top-color: var(--border-1); }
html.dark .footer-bottom a { color: var(--text-3); }
html.dark .footer-bottom a:hover { color: var(--accent); }

/* ---------- 17. MOBILE NAV ---------- */
html.dark .mobile-nav { background: rgba(11, 15, 26, 0.98); }
html.dark .mobile-nav a { color: var(--text-1); }
html.dark .mobile-nav .close-btn { color: var(--text-1); }

/* ---------- 18. BACK TO TOP ---------- */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-border);
  background: var(--surface-0);
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--accent-glow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s ease;
  z-index: 900;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 24px var(--accent-glow);
}
html.dark .back-to-top { background: var(--surface-2); }

/* ---------- 19. TRUSTED LOGOS / INDUSTRIES ---------- */
html.dark .trusted-section p { color: var(--text-4); }
html.dark .trusted-logos div {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  color: var(--text-3);
  transition: all 0.25s ease;
}
html.dark .trusted-logos div:hover,
html.dark #industries .trusted-logos div:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-1);
  box-shadow: 0 6px 20px var(--accent-glow-lg);
}

/* ---------- 20. AI VOICE SECTION header text ---------- */
html.dark .voice-section .section-sub { color: var(--text-3); }

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-badge .live-pulse-dot,
  .status-badge::before,
  .btn-primary::after, .btn-outline::after,
  .voice-mic-btn:hover svg,
  .voice-avatar-option:hover .avatar-flag,
  html.dark .hero h1 .highlight,
  html.dark .manifesto-box [style*="font-size:3rem"] {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 22. REIA BRAND LOGO MARKS ---------- */
.logo-icon-img, .nav-logo-img, .footer-brand .nav-logo-img {
  border-radius: 10px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.nav-logo .logo-icon-img { border-radius: 10px; }
html.dark .logo-icon-img { filter: none; }

/* ---------- 23. NAV LOGO (wordmark, theme-aware) ---------- */
.nav-logo-mark {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.nav-logo-light { display: block; }
.nav-logo-dark  { display: none; }
html.dark .nav-logo-light { display: none; }
html.dark .nav-logo-dark  { display: block; }
@media (max-width: 768px) {
  .nav-logo-mark { height: 28px; }
}

/* ===== DARK MODE FIX (2026-08-03) — FAQ cards + deployment strips ===== */
html.dark .faq-item { background: var(--surface-1); border-color: var(--border-1); box-shadow: none; }
html.dark .faq-item:hover { border-color: var(--accent); }
html.dark .faq-item.open { border-color: var(--accent); box-shadow: 0 4px 18px rgba(14,165,233,0.15); }
html.dark .faq-question .icon { color: var(--text-3); }
html.dark .faq-answer ul li::before { color: var(--accent); }
html.dark .deploy-strip { background: linear-gradient(180deg, rgba(14,165,233,0.12) 0%, var(--surface-1) 100%); border-color: rgba(14,165,233,0.25); color: var(--text-2); }
html.dark .biz-strip { background: linear-gradient(180deg, rgba(139,92,246,0.12) 0%, var(--surface-1) 100%); border-color: rgba(139,92,246,0.25); color: var(--text-2); }

/* ===== MANIFESTO LOGO THEME SWAP (2026-08-03) ===== */
html.dark .manifesto-logo.logo-light { display: none !important; }
html.dark .manifesto-logo.logo-dark { display: block !important; }

/* ===== CHAT WIDGET THEME-AWARE (2026-08-18) ===== */
/* Base surfaces use tokens so the widget follows light/dark automatically */
.chat-widget {
  background: var(--surface-0);
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
}
.chat-widget-messages {
  background: var(--surface-1);
}
.chat-widget-input {
  background: var(--surface-0);
  border-top: 1px solid var(--border-1);
}
.chat-widget-input input {
  border-color: var(--border-1);
  background: var(--surface-1);
  color: var(--text-1);
}
.chat-widget-input input::placeholder {
  color: var(--text-3);
}
.msg-bot {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  color: var(--text-1);
}
/* Consent gate */
.chat-widget-consent {
  background: var(--surface-1);
  border-top: 1px solid var(--border-1);
}
.chat-consent-card {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.chat-consent-title {
  color: var(--text-1);
}
.chat-consent-text {
  color: var(--text-2);
}
.chat-consent-text a {
  color: var(--accent);
}
.chat-consent-agree {
  background: linear-gradient(160deg, var(--accent), #38bdf8);
  color: #fff;
}
.chat-consent-decline {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border-1);
}
html.dark .chat-widget {
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
html.dark .chat-consent-card {
  background: var(--surface-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}