/* ═══════════════════════════════════════════════════
   TaxzPro Product Website — Blue Hero + Light Body
   Dark blue gradient hero, white/light content sections
   Best of both: premium feel + maximum readability
   ═══════════════════════════════════════════════════ */

/* NOTE: No @import — light CSS loaded separately in HTML.
   This file contains only dark-hero overrides.
   Toggle via stylesheet.disabled in JS. */

/* ─── Keep light theme variables for body content ─── */
:root {
  /* Body content stays light-themed (inherited from import) */
  /* Only hero + CTA + footer go dark */
}

/* ─── Body: white base ─── */
body {
  background: #fff;
}

/* ─── Navigation: transparent on hero, glass on scroll ─── */
.nav {
  color: #fff;
}

.nav:not(.scrolled) .nav-logo { color: #fff; }
.nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.7); }
.nav:not(.scrolled) .nav-links a:hover { color: #fff; }
.nav:not(.scrolled) .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.nav:not(.scrolled) .btn-ghost:hover { background: rgba(255,255,255,0.1); }
.nav:not(.scrolled) .nav-mobile-toggle span { background: #fff; }

.nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav.scrolled .nav-logo { color: var(--text-primary); }
.nav.scrolled .nav-logo-icon svg text { fill: #1e3a8a; }
.nav.scrolled .nav-logo-icon svg path { fill: rgba(37,99,235,0.15); stroke: #3b82f6; }
.nav.scrolled .nav-links a { color: var(--text-secondary); }
.nav.scrolled .btn-ghost { color: var(--text-primary); border-color: rgba(0,0,0,0.12); }

/* ═════════════════════════════════════════════════
   HERO — Dark blue gradient (same as get-started)
   ═════════════════════════════════════════════════ */
.hero {
  background: linear-gradient(160deg, #0c1a3a 0%, #1e3a8a 50%, #2563eb 100%);
  color: #fff;
}

.hero-bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-glow-1 { background: rgba(96,165,250,0.15); }
.hero-glow-2 { background: rgba(124,58,237,0.1); }

.hero-badge {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}

.hero-title { color: #fff; }

.hero .gradient-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle { color: rgba(255,255,255,0.55); }

.hero-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.hero-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
}

.hero-stats {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}
.hero-stat-number { color: #60a5fa; }
.hero-stat-suffix { color: #60a5fa; }
.hero-stat-label { color: rgba(255,255,255,0.5); }
.hero-stat-divider { background: rgba(255,255,255,0.1); }

/* Hero mockup — dark glass */
.mockup-browser {
  background: rgba(15,23,42,0.8);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 25px 80px rgba(0,0,0,0.4), 0 0 120px rgba(96,165,250,0.08);
}

.mockup-dots { background: rgba(15,23,42,0.95); border-bottom-color: rgba(255,255,255,0.08); }
.mockup-dots span:nth-child(1) { background: #f87171; }
.mockup-dots span:nth-child(2) { background: #fbbf24; }
.mockup-dots span:nth-child(3) { background: #34d399; }

.mockup-url { background: rgba(15,23,42,0.9); border-bottom-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); }

.mock-sidebar { background: rgba(255,255,255,0.04); border-right-color: rgba(255,255,255,0.06); }
.mock-sidebar-item { background: rgba(255,255,255,0.06); }
.mock-main { background: rgba(0,0,0,0.2); }
.mock-header { background: rgba(255,255,255,0.08); }

.mock-card.green { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.2); }
.mock-card.amber { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.2); }
.mock-card.red { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.2); }
.mock-card.blue { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.2); }
.mock-card-num { color: #fff; }
.mock-card-label { color: rgba(255,255,255,0.4); }

.mock-table { border-color: rgba(255,255,255,0.06); }
.mock-table-row { border-bottom-color: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); }
.mock-table-row.header { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.3); }

/* Hero carousel — dark glass overrides */
.mockup-slide .app-hdr { border-bottom-color: rgba(255,255,255,0.06); }
.mockup-slide .app-hdr .app-title { color: rgba(255,255,255,0.6); }
.mockup-slide .app-hdr .app-links span { color: rgba(255,255,255,0.3); }

.hero-dash-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.06); }
.hero-dash-card .num { color: #60a5fa; }
.hero-dash-card .lbl { color: rgba(255,255,255,0.3); }
.hero-dash-card.green .num { color: #34d399; }
.hero-dash-card.amber .num { color: #fbbf24; }
.hero-dash-card.red .num { color: #f87171; }

.hero-dash-table { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.hero-dash-row { color: rgba(255,255,255,0.4); border-bottom-color: rgba(255,255,255,0.04); }
.hero-dash-row.hdr { color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); }
.hero-status.filed { background: rgba(52,211,153,0.15); color: #34d399; }
.hero-status.pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
.hero-status.overdue { background: rgba(248,113,113,0.15); color: #f87171; }

.hero-upload-zone { border-color: rgba(255,255,255,0.1); }
.hero-upload-zone .txt { color: rgba(255,255,255,0.4); }
.hero-upload-zone .sub { color: rgba(255,255,255,0.2); }
.hero-upload-fmts span { background: rgba(37,99,235,0.15); color: #60a5fa; }

.hero-parsed-tab { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); }
.hero-parsed-tab.on { background: #2563eb; color: #fff; }
.hero-parsed-stat { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.hero-parsed-stat .val { color: #60a5fa; }
.hero-parsed-stat .lbl { color: rgba(255,255,255,0.3); }
.hero-parsed-stat.ok .val { color: #34d399; }
.hero-parsed-stat.warn .val { color: #fbbf24; }

.hero-recon-panel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.hero-recon-panel .ttl { color: rgba(255,255,255,0.35); }
.hero-recon-row { color: rgba(255,255,255,0.4); border-bottom-color: rgba(255,255,255,0.04); }
.hero-recon-badge { background: rgba(52,211,153,0.12); color: #34d399; }

.hero-json-step { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); }
.hero-json-step.done { background: rgba(52,211,153,0.1); color: #34d399; }
.hero-json-arrow { color: rgba(255,255,255,0.15); }
.hero-json-panel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.hero-json-panel .ttl { color: rgba(255,255,255,0.35); }
.hero-json-panel .ttl .bdg { background: rgba(96,165,250,0.15); color: #60a5fa; }
.hero-json-code { color: rgba(255,255,255,0.35); }
.hero-json-code .k { color: #60a5fa; }
.hero-json-code .s { color: #34d399; }
.hero-json-code .n { color: #fbbf24; }
.hero-json-dl-btn { background: rgba(37,99,235,0.15); color: #60a5fa; }

.mockup-slide-dot { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.1); }
.mockup-slide-dot:hover { background: rgba(255,255,255,0.4); }
.mockup-slide-dot.active { background: #60a5fa; border-color: #60a5fa; }
.mockup-slide-caption { color: rgba(255,255,255,0.5); }
.mockup-slide-caption strong { color: rgba(255,255,255,0.8); }

.hero .tag.green { background: rgba(52,211,153,0.15); color: #34d399; }
.hero .tag.amber { background: rgba(251,191,36,0.15); color: #fbbf24; }
.hero .tag.red { background: rgba(248,113,113,0.15); color: #f87171; }
.hero .tag.gray { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); }

.scroll-indicator span { color: rgba(255,255,255,0.4); }
.scroll-mouse { border-color: rgba(255,255,255,0.2); }

/* ═════════════════════════════════════════════════
   CONTENT SECTIONS — Light theme (readable)
   Alternating white / soft blue-gray
   ═════════════════════════════════════════════════ */

/* Gradient text in light sections → solid blue */
.gradient-text {
  color: #2563eb;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

/* Problem */
.problem-section { background: #f0f4ff; }
.chaos-step { background: #fff; }

/* Features */
.features-section { background: #fff; }

/* Comparison */
.comparison-section { background: #f8fafc; }

/* Stats */
.stats-section { background: #fff; }
.savings-calc { background: #fff; }

/* Parser */
.parser-section { background: #f0f4ff; }
.parser-file-drop { background: #fff; }

/* Personas */
.personas-section { background: #fff; }

/* FAQ */
.objections-section { background: #f8fafc; }

/* Pricing */
.pricing-section { background: #fff; }

/* ═════════════════════════════════════════════════
   CTA — Dark blue gradient (bookend, matches hero)
   ═════════════════════════════════════════════════ */
.cta-section {
  background: linear-gradient(160deg, #0c1a3a 0%, #1e3a8a 50%, #2563eb 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Grid lines overlay on CTA */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.cta-glow { background: radial-gradient(circle, rgba(96,165,250,0.12) 0%, transparent 60%); }

.cta-content h2 { color: #fff; }
.cta-content .gradient-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.cta-content > p { color: rgba(255,255,255,0.55); }

.cta-form input,
.cta-form select {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
.cta-form input::placeholder { color: rgba(255,255,255,0.3); }
.cta-form select { color: rgba(255,255,255,0.4); }
.cta-form select option { background: #1e3a8a; color: #fff; }
.cta-form input:focus,
.cta-form select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}

.cta-trust { color: rgba(255,255,255,0.4); }

/* ═════════════════════════════════════════════════
   FOOTER — Dark navy
   ═════════════════════════════════════════════════ */
.footer {
  background: #0c1a3a;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ═══ Theme Toggle — blue-light state ═══ */
/* Blue-light mode: show sun (click to switch to light) */
.theme-toggle .toggle-sun { display: block; }
.theme-toggle .toggle-moon { display: none; }
.theme-toggle { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.theme-toggle:hover { background: rgba(255,255,255,0.18); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

/* ─── Mobile nav ─── */
@media (max-width: 768px) {
  .nav-links.open {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
  }
  .nav-links.open a { color: var(--text-secondary); }
}