/* ═══════════════════════════════════════════════════
   TaxzPro Product Website — Blue Gradient Theme
   Overrides light theme with dark blue gradient
   matching the Get Started page (Variation H/G)
   ═══════════════════════════════════════════════════ */

/* Import the base light theme — then override */
@import url('style-index-light.css');

/* ─── Variable Overrides ─── */
:root {
  --bg-dark: #0c1a3a;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.15);

  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.6);
  --text-muted: rgba(255,255,255,0.35);

  --accent-solid: #3b82f6;
}

/* ─── Body ─── */
body {
  background: linear-gradient(160deg, #0c1a3a 0%, #1e3a8a 50%, #2563eb 100%);
  background-attachment: fixed;
  color: #fff;
}

/* ─── Navigation ─── */
.nav.scrolled {
  background: rgba(12,26,58,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-mobile-toggle span { background: #fff; }

.nav-links a { color: rgba(255,255,255,0.6); }
.nav-links a:hover { color: #fff; }

.btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

/* ─── Hero ─── */
.hero {
  background: transparent;
}

.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.12); }
.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.8);
}

.hero-title { color: #fff; }

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

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

.hero-stats {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.hero-stat-divider { background: rgba(255,255,255,0.1); }

/* ─── Mockup ─── */
.mockup-browser {
  background: rgba(15,23,42,0.8);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 100px 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-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.1); border-color: rgba(52,211,153,0.2); }
.mock-card.amber { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.2); }
.mock-card.red { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.2); }
.mock-card.blue { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.2); }

.mock-card-num { color: #fff; }

.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); }

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

/* ─── Scroll Indicator ─── */
.scroll-mouse { border-color: rgba(255,255,255,0.2); }

/* ─── Problem Section ─── */
.problem-section { background: rgba(0,0,0,0.15); }

.chaos-step {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  box-shadow: none;
}
.chaos-step:hover {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.2);
}

.chaos-result {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.15);
}
.chaos-result-text { color: #f87171; }

/* ─── Features ─── */
.features-section { background: transparent; }

.feature-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.feature-card:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.feature-icon {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.feature-tags span {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* ─── Comparison ─── */
.comparison-section { background: rgba(0,0,0,0.15); }

.comparison-panel { border-color: rgba(255,255,255,0.08); }
.chaos-panel { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.12); }
.calm-panel { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.12); }

.comparison-vs {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  box-shadow: none;
}

/* ─── Stats ─── */
.stats-section { background: transparent; }
.stats-bg-glow { background: radial-gradient(circle, rgba(96,165,250,0.08) 0%, transparent 60%); }

.stat-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.stat-card:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.ring-bg { stroke: rgba(255,255,255,0.08); }

/* ─── Savings Calculator ─── */
.savings-calc {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.calc-slider { background: rgba(255,255,255,0.1); }

.calc-result {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.calc-result.highlight {
  background: rgba(96,165,250,0.1);
  border-color: rgba(96,165,250,0.2);
}

/* ─── Parser ─── */
.parser-section { background: rgba(0,0,0,0.15); }

.parser-file-drop {
  background: rgba(255,255,255,0.04);
  border-color: rgba(96,165,250,0.2);
  box-shadow: none;
}

.drop-result-row {
  color: rgba(255,255,255,0.6);
  border-bottom-color: rgba(255,255,255,0.06);
}

/* ─── Personas ─── */
.personas-section { background: transparent; }

.persona-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.persona-card:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.persona-card.featured {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.2);
}

.persona-pain {
  background: rgba(248,113,113,0.08);
  color: #f87171;
  border-left-color: #f87171;
}
.persona-solution strong { color: #34d399; }

/* ─── FAQ ─── */
.objections-section { background: rgba(0,0,0,0.15); }

.faq-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.faq-item:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ─── Pricing ─── */
.pricing-section { background: transparent; }

.pricing-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.pricing-card:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.pricing-card.featured {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.25);
  box-shadow: 0 4px 24px rgba(96,165,250,0.12);
}

/* ─── CTA ─── */
.cta-section {
  background: rgba(0,0,0,0.2);
}
.cta-glow { background: radial-gradient(circle, rgba(96,165,250,0.1) 0%, transparent 60%); }

.cta-form input,
.cta-form select {
  background: rgba(255,255,255,0.06);
  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);
}

/* ─── Footer ─── */
.footer {
  background: rgba(0,0,0,0.3);
  border-top-color: rgba(255,255,255,0.06);
}

/* ─── Mobile Nav Override ─── */
@media (max-width: 768px) {
  .nav-links.open {
    background: rgba(12,26,58,0.97);
    backdrop-filter: blur(20px);
    border-bottom-color: rgba(255,255,255,0.08);
  }
}