/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--surface-low);
  border-top: 1px solid var(--border);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-24);
  color: var(--text-muted);
  font-size: 13px;
}
.site-footer a {
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.site-footer a:hover { color: var(--brand-primary); }
.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (max-width: 768px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
.site-footer-col-title {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.site-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--space-8) 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME SWITCHER TOGGLE & COMPONENT LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand-primary);
  border-color: rgba(34, 197, 94, 0.3);
  transform: translateY(-1px);
}
.theme-icon-light { display: none; font-size: 19px; line-height: 1; }
.theme-icon-dark { display: inline-flex; font-size: 19px; line-height: 1; }

/* ── Dual-Theme Brand Logos ───────────────────────────────────────────── */
.logo-light { display: none !important; }
.logo-dark { display: inline-block !important; }

[data-theme="light"] .theme-toggle-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: #e2e8f0;
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.3);
}
[data-theme="light"] .theme-icon-light { display: inline-flex; }
[data-theme="light"] .theme-icon-dark { display: none; }

[data-theme="light"] .logo-light { display: inline-block !important; }
[data-theme="light"] .logo-dark { display: none !important; }
[data-theme="light"] .brand-logo.logo-light,
[data-theme="light"] .footer-logo.logo-light {
  border: none !important;
}

/* ── Rollback: Permanently Hide Theme Toggle & Force Circular Emblem ─── */
.theme-toggle-btn {
  display: none !important;
}

.brand-logo,
.footer-logo {
  border-radius: 0 !important;
  border: none !important;
  object-fit: contain !important;
}

/* ── Light Mode Base Elements ─────────────────────────────────────────── */
[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* ── Light Mode Header & Navbar ───────────────────────────────────────── */
[data-theme="light"] .site-header,
[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .brand-title,
[data-theme="light"] .nav-brand {
  color: #111827;
}
[data-theme="light"] .brand-logo {
  border: none !important;
}
[data-theme="light"] .nav-item,
[data-theme="light"] .nav-links a {
  color: #4b5563;
}
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: #16a34a;
}
[data-theme="light"] .lang-switcher {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #4b5563;
}
[data-theme="light"] .lang-btn {
  color: #64748b;
}
[data-theme="light"] .lang-btn.on,
[data-theme="light"] .lang-btn:hover {
  color: #16a34a;
}
[data-theme="light"] .lang-divider {
  color: #cbd5e1;
}
[data-theme="light"] .btn-portal {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}
[data-theme="light"] .btn-portal:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}
[data-theme="light"] .mobile-toggle,
[data-theme="light"] .nav-burger {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .mobile-drawer,
[data-theme="light"] .nav.nav-open .nav-links {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mobile-nav-item {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .mobile-nav-item:hover {
  background: #ecfdf5;
  color: #16a34a;
  border-color: #a7f3d0;
}
[data-theme="light"] .mobile-drawer-footer {
  border-top-color: #e5e7eb;
}
[data-theme="light"] .mobile-contact-item {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}
[data-theme="light"] .mobile-contact-item:hover {
  background: #ecfdf5;
  color: #16a34a;
}

/* ── Light Mode Top Announcement Bar ──────────────────────────────────── */
[data-theme="light"] .announcement-bar {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .announcement-text {
  color: #0f172a;
}
[data-theme="light"] .announcement-badge {
  color: #64748b;
}
[data-theme="light"] .announcement-badge-divider {
  color: #cbd5e1;
}

/* ── Light Mode Modern Footer ─────────────────────────────────────────── */
[data-theme="light"] .site-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
  color: #64748b;
}
[data-theme="light"] .footer-top-strip {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
[data-theme="light"] .strip-trust-item strong {
  color: #0f172a;
}
[data-theme="light"] .strip-trust-item p {
  color: #64748b;
}
[data-theme="light"] .footer-brand-name,
[data-theme="light"] .site-footer-col-title,
[data-theme="light"] .footer-title {
  color: #0f172a;
}
[data-theme="light"] .footer-desc {
  color: #475569;
}
[data-theme="light"] .footer-links a,
[data-theme="light"] .site-footer a {
  color: #64748b;
}
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .site-footer a:hover {
  color: #16a34a;
}
[data-theme="light"] .footer-hub-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .hub-name {
  color: #0f172a;
}
[data-theme="light"] .hub-address {
  color: #64748b;
}
[data-theme="light"] .hub-hours {
  color: #64748b;
}
[data-theme="light"] .hub-cta {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .hub-cta:hover {
  background: #ecfdf5;
  border-color: #16a34a;
  color: #16a34a;
}
[data-theme="light"] .footer-payment-strip {
  border-top-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
}
[data-theme="light"] .payment-badge {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .footer-bottom-bar,
[data-theme="light"] .site-footer-bottom {
  border-top-color: #e2e8f0;
  color: #64748b;
}
[data-theme="light"] .footer-legal-links a {
  color: #64748b;
}
[data-theme="light"] .dot-sep {
  color: #cbd5e1;
}

/* ── Light Mode WhatsApp Hotline Modal ────────────────────────────────── */
[data-theme="light"] .wa-float-btn {
  background: #ffffff;
  border-color: #16a34a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 20px rgba(22, 163, 74, 0.2);
}
[data-theme="light"] .wa-btn-label {
  color: #0f172a;
}
[data-theme="light"] .wa-modal-window {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15), 0 0 30px rgba(22, 163, 74, 0.1);
}
[data-theme="light"] .wa-modal-head {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}
[data-theme="light"] .wa-modal-head h3 {
  color: #0f172a;
}
[data-theme="light"] .wa-modal-head p {
  color: #64748b;
}
[data-theme="light"] .wa-modal-close {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}
[data-theme="light"] .wa-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}
[data-theme="light"] .wa-hub-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .wa-hub-card:hover {
  background: #f8fafc;
  border-color: #16a34a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .wa-hub-name {
  color: #0f172a;
}
[data-theme="light"] .wa-hub-tag {
  background: #f1f5f9;
  color: #475569;
}
[data-theme="light"] .wa-hub-loc {
  color: #64748b;
}
[data-theme="light"] .wa-modal-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}
[data-theme="light"] .wa-call-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .wa-call-btn:hover {
  background: #ecfdf5;
  border-color: #16a34a;
  color: #16a34a;
}

/* ── Light Mode Shared Cards, Grids & Forms ──────────────────────────── */
[data-theme="light"] .hero-section {
  background: #ffffff;
}
[data-theme="light"] .hero-status-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1e293b;
}
[data-theme="light"] .hero-title {
  color: #0f172a;
}
[data-theme="light"] .hero-subline {
  color: #475569;
}
[data-theme="light"] .hero-lead {
  color: #475569;
}
[data-theme="light"] .spec-pill {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .spec-pill-lbl {
  color: #64748b;
}
[data-theme="light"] .btn-hero-ghost {
  background: #ffffff;
  border-color: #d1d5db;
  color: #0f172a;
}
[data-theme="light"] .btn-hero-ghost:hover {
  background: #f8fafc;
  border-color: #16a34a;
  color: #16a34a;
}
[data-theme="light"] .trust-check {
  color: #475569;
}
[data-theme="light"] .floating-badge {
  background: rgba(255, 255, 255, 0.95);
  border-color: #e5e7eb;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .floating-badge strong {
  color: #0f172a;
}
[data-theme="light"] .floating-badge span {
  color: #64748b;
}
[data-theme="light"] .partner-ticker-section {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}
[data-theme="light"] .ticker-heading {
  color: #64748b;
}
[data-theme="light"] .ticker-logo {
  color: #64748b;
}
[data-theme="light"] .section-title {
  color: #0f172a;
}
[data-theme="light"] .section-subtitle {
  color: #475569;
}
[data-theme="light"] .journey-section {
  background: #f8fafc;
}
[data-theme="light"] .journey-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .journey-card:hover {
  border-color: #16a34a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .journey-title,
[data-theme="light"] .journey-card h3 {
  color: #0f172a;
}
[data-theme="light"] .journey-desc,
[data-theme="light"] .journey-card p {
  color: #475569;
}
[data-theme="light"] .compliance-section {
  background: #ffffff;
}
[data-theme="light"] .compliance-card {
  background: #f8fafc;
  border-color: #e5e7eb;
}
[data-theme="light"] .compliance-card h3 {
  color: #0f172a;
}
[data-theme="light"] .compliance-card p {
  color: #475569;
}
[data-theme="light"] .hub-showcase-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .hub-showcase-card h3 {
  color: #0f172a;
}
[data-theme="light"] .hub-showcase-card p {
  color: #475569;
}
[data-theme="light"] .parts-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
[data-theme="light"] .parts-card h3 {
  color: #0f172a;
}
[data-theme="light"] .conversion-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
  box-shadow: 0 16px 36px rgba(22, 163, 74, 0.08);
}
[data-theme="light"] .conversion-card h2 {
  color: #0f172a;
}
[data-theme="light"] .conversion-card p {
  color: #475569;
}
[data-theme="light"] .card,
[data-theme="light"] .step-card,
[data-theme="light"] .why-card,
[data-theme="light"] .pricing-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  color: #111827;
}
[data-theme="light"] .input,
[data-theme="light"] .select,
[data-theme="light"] .textarea {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
[data-theme="light"] .input:focus,
[data-theme="light"] .select:focus,
[data-theme="light"] .textarea:focus {
  background: #ffffff;
  border-color: #16a34a;
}



/* ══════════════════════════════════════════════════════════════════════════
   KINETIC STAGE SYSTEM — shared tokens & motion primitives
   Introduced with the landing-page overhaul; every customer page rolls onto
   these in Phase 2 (see docs/landing-phase2-rollout.md).

   DESIGN.md contrast rule: crisp white "paper" sections anchored by obsidian
   "stage" showcases. Stages re-declare their own custom properties on the
   section element (NOT via [data-theme]), so a global theme rule can never
   flatten them again.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Spring easings — CSS-side companions of BRMotion.Spring */
  --ease-out-spring:      cubic-bezier(0.22, 1, 0.36, 1);   /* settle   */
  --ease-pop-spring:      cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */

  /* Obsidian stage palette (DESIGN.md §2) */
  --stage-bg:             #0a0b0d;
  --stage-surface:        #121418;
  --stage-card:           #181b20;
  --stage-line:           rgba(255, 255, 255, 0.10);
  --stage-line-strong:    rgba(255, 255, 255, 0.20);
  --stage-text:           #ffffff;
  --stage-muted:          #cbd5e1;
  --stage-dim:            #94a3b8;
  --stage-accent:         #22c55e;

  /* Hairline grid + telemetry type */
  --hairline:             1px solid var(--border);
  --mono-tracking:        0.06em;
}

/* Stage: dark showcase surface with its own token scope */
.on-obsidian {
  --bg:               var(--stage-bg);
  --surface:          var(--stage-surface);
  --surface-low:      var(--stage-bg);
  --surface-high:     var(--stage-card);
  --text:             var(--stage-text);
  --text-muted:       var(--stage-muted);
  --text-dim:         var(--stage-dim);
  --border:           var(--stage-line);
  --border-strong:    var(--stage-line-strong);
  --brand-primary:    var(--stage-accent);
  --accent-ink:       #22c55e;   /* green for TEXT on obsidian (9:1) */
  background: var(--stage-bg);
  color: var(--stage-text);
}

/* Paper: crisp white content surface (explicit, theme-independent) */
.on-paper {
  --bg:               #ffffff;
  --surface:          #ffffff;
  --surface-low:      #f8f9fa;
  --surface-high:     #f1f5f9;
  --text:             #111827;
  --text-muted:       #4b5563;
  --text-dim:         #6b7280;
  --border:           #e5e7eb;
  --border-strong:    #d1d5db;
  --brand-primary:    #16a34a;
  --accent-ink:       #15803d;   /* green for TEXT on white (5:1) — #16a34a is only 3.3:1 */
  background: #ffffff;
  color: #111827;
}

/* Telemetry typography: monospace + tabular numerals */
.br-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
}

/* Scroll reveal — gated by html.br-js so no-JS visitors always see content.
   The 3.5s animation is a pure-CSS failsafe: if br-motion.js never loads the
   element still appears. Stagger with style="--d:2" (60ms steps). */
html.br-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s var(--ease-out-spring),
    transform 0.9s var(--ease-out-spring);
  transition-delay: calc(var(--d, 0) * 60ms);
  animation: br-reveal-failsafe 0s linear 3.5s forwards;
}
html.br-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@keyframes br-reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* Spring-tilt target (transform is written by BRMotion.tilt) */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.br-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  [data-tilt] { will-change: auto; }
}