html { scroll-behavior: smooth; }

:root {
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: #ffffff;
  --border: rgba(148, 163, 184, 0.24);
  --text: #0f172a;
  --muted: #64748b;
  --emerald: #059669;
  --emerald-dark: #047857;
  --navy: #0f172a;
}

body.app-shell {
  background:
    radial-gradient(circle at 8% 4%, rgba(16, 185, 129, 0.14), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(59, 130, 246, 0.11), transparent 30rem),
    linear-gradient(180deg, #f8fafc 0%, #f5f7fb 45%, #eef2f7 100%);
  overflow-x: hidden;
}

.dark body.app-shell {
  background:
    radial-gradient(circle at 8% 4%, rgba(16, 185, 129, 0.12), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(59, 130, 246, 0.09), transparent 30rem),
    #07111f;
}

.page-glow {
  position: fixed;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: .32;
  z-index: 0;
}
.page-glow-one { width: 22rem; height: 22rem; background: #34d399; top: 7rem; left: -9rem; }
.page-glow-two { width: 26rem; height: 26rem; background: #60a5fa; top: 20rem; right: -12rem; opacity: .2; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-lockup { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand-lockup > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand-lockup strong { font-size: .94rem; letter-spacing: -.02em; color: #0f172a; }
.brand-lockup small { margin-top: .3rem; font-size: .66rem; color: #94a3b8; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.dark .brand-lockup strong { color: #f8fafc; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.55rem; height: 2.55rem; border-radius: .9rem;
  background: linear-gradient(135deg, #10b981, #047857);
  color: white; font-weight: 900; font-size: .75rem; letter-spacing: -.02em;
  box-shadow: 0 8px 22px rgba(5, 150, 105, .28);
}

.nav-link { color: #64748b; font-size: .82rem; font-weight: 750; text-decoration: none; }
.nav-link:hover { color: #047857; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border);
  background: rgba(255,255,255,.74); color: #334155; border-radius: 999px; padding: .52rem .8rem;
  font-size: .75rem; font-weight: 800; box-shadow: 0 6px 20px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
}
.dark .theme-toggle { background: rgba(15,23,42,.78); color: #cbd5e1; border-color: rgba(148,163,184,.2); }

.preview-banner {
  display: flex; align-items: flex-start; gap: .7rem; border: 1px solid rgba(245,158,11,.3);
  border-radius: 1rem; padding: .8rem 1rem; background: rgba(255,251,235,.86);
  color: #92400e; font-size: .76rem; line-height: 1.55; box-shadow: 0 8px 28px rgba(146,64,14,.05);
  backdrop-filter: blur(16px);
}
.dark .preview-banner { background: rgba(120,53,15,.15); color: #fcd34d; border-color: rgba(245,158,11,.22); }
.preview-dot { width: .55rem; height: .55rem; margin-top: .28rem; border-radius: 999px; background: #f59e0b; box-shadow: 0 0 0 .25rem rgba(245,158,11,.13); flex: none; }

.hero-surface {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr);
  align-items: center; gap: 2rem; min-height: 31rem; padding: clamp(2rem, 4vw, 4rem);
  border-radius: 2rem; color: white;
  background:
    radial-gradient(circle at 78% 20%, rgba(52,211,153,.25), transparent 19rem),
    radial-gradient(circle at 30% 120%, rgba(14,165,233,.16), transparent 30rem),
    linear-gradient(135deg, #071827 0%, #0f2c36 56%, #0f513d 100%);
  box-shadow: 0 30px 80px rgba(15,23,42,.18);
}
.hero-surface::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(to right, black, transparent 85%);
}
.hero-copy { position: relative; z-index: 2; max-width: 46rem; }
.eyebrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.eyebrow span { border: 1px solid rgba(167,243,208,.18); background: rgba(16,185,129,.10); color: #a7f3d0; border-radius: 999px; padding: .38rem .7rem; font-size: .69rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hero-surface h1 { max-width: 42rem; font-size: clamp(2.55rem, 6vw, 5rem); line-height: .96; letter-spacing: -.055em; font-weight: 900; text-wrap: balance; }
.hero-surface p { max-width: 40rem; margin-top: 1.25rem; color: #cbd5e1; font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.primary-cta, .secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border-radius: .9rem; padding: 0 1rem; font-size: .83rem; font-weight: 850; transition: all .2s ease; }
.primary-cta { background: #10b981; color: #042f2e; box-shadow: 0 12px 32px rgba(16,185,129,.26); }
.primary-cta:hover { transform: translateY(-1px); background: #34d399; }
.secondary-cta { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #e2e8f0; }
.secondary-cta:hover { background: rgba(255,255,255,.11); }
.trust-row { display: flex; flex-wrap: wrap; gap: .75rem 1.15rem; margin-top: 1.6rem; color: #94a3b8; font-size: .72rem; font-weight: 700; }

.hero-visual { position: relative; z-index: 2; min-height: 23rem; }
.decision-card { position: absolute; border-radius: 1.45rem; padding: 1.35rem; backdrop-filter: blur(18px); }
.decision-card span { display: block; color: #cbd5e1; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.decision-card strong { display: block; margin-top: .35rem; font-size: 2.15rem; letter-spacing: -.05em; }
.decision-card small { color: #94a3b8; font-size: .72rem; font-weight: 700; }
.decision-card-back { top: 1rem; right: 2.2rem; width: 75%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); transform: rotate(5deg); }
.decision-card-front { left: 0; bottom: 2rem; width: 90%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 25px 50px rgba(0,0,0,.2); }
.decision-chip { display: inline-flex; width: auto; margin-bottom: 2rem; border-radius: 999px; padding: .38rem .65rem; background: rgba(52,211,153,.16); color: #a7f3d0; font-size: .65rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mini-meter { height: .45rem; margin: 1rem 0 .65rem; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.mini-meter span { width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#34d399,#22c55e); }

.glass-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 1.45rem;
  box-shadow: 0 18px 55px rgba(15,23,42,.07); backdrop-filter: blur(18px);
}
.dark .glass-panel { background: rgba(15,23,42,.78); border-color: rgba(148,163,184,.16); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.input-panel { padding: 1.3rem; position: sticky; top: 1rem; }
.section-heading { display: flex; gap: .8rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.section-heading.compact { margin-bottom: .85rem; padding-bottom: .85rem; }
.section-heading.no-border { border-bottom: 0; padding-bottom: .2rem; }
.section-heading p { margin: 0 0 .22rem; color: #94a3b8; font-size: .62rem; font-weight: 900; letter-spacing: .13em; }
.section-heading h2 { margin: 0; color: #0f172a; font-size: 1.12rem; font-weight: 850; letter-spacing: -.02em; }
.dark .section-heading h2 { color: #f8fafc; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: #ecfdf5; color: #047857; font-size: .72rem; font-weight: 900; border: 1px solid #d1fae5; }
.dark .step-badge { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.22); color: #6ee7b7; }

.field-block, .field-label { display: block; margin-bottom: .9rem; }
.field-label { color: #475569; font-size: .69rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.dark .field-label { color: #cbd5e1; }
.input-field { width: 100%; margin-top: .38rem; border: 1px solid #dbe3ee; border-radius: .85rem; background: rgba(248,250,252,.9); color: #0f172a; padding: .76rem .85rem; font-size: .92rem; font-weight: 750; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.input-field:focus { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.11); background: #fff; }
.dark .input-field { background: rgba(2,6,23,.48); color: #f8fafc; border-color: rgba(148,163,184,.2); }
.money-input { position: relative; }
.money-input > span { position: absolute; z-index: 2; left: .85rem; top: 50%; transform: translateY(-37%); color: #94a3b8; font-weight: 850; }
.money-input .input-field { padding-left: 1.7rem; }
.field-help { margin-top: .35rem; color: #94a3b8; font-size: .67rem; line-height: 1.4; }
.featured-input { padding: .9rem; margin: -.05rem -.9rem .95rem; border-radius: 1rem; background: rgba(16,185,129,.055); border: 1px solid rgba(16,185,129,.11); }
.hours-card { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: end; margin-top: .2rem; padding: .85rem; border-radius: 1rem; background: rgba(241,245,249,.8); border: 1px solid var(--border); }
.dark .hours-card { background: rgba(2,6,23,.34); }
.hour-presets { display: flex; gap: .3rem; margin-bottom: .88rem; }
.hour-presets button { padding: .5rem .55rem; border-radius: .65rem; background: white; color: #64748b; font-size: .65rem; font-weight: 850; border: 1px solid #e2e8f0; }
.hour-presets button:hover { border-color: #10b981; color: #047857; }
.dark .hour-presets button { background: #0f172a; border-color: #334155; color: #cbd5e1; }
.tax-model-row { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .8rem .9rem; border-radius: .9rem; background: #ecfdf5; border: 1px solid #d1fae5; }
.dark .tax-model-row { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.18); }
.tax-model-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: .55rem; background: #059669; color: white; font-size: .72rem; font-weight: 900; }
.tax-model-row div { display: flex; flex-direction: column; }
.tax-model-row strong { color: #065f46; font-size: .76rem; }
.tax-model-row small { margin-top: .12rem; color: #10b981; font-size: .64rem; font-weight: 750; }
.dark .tax-model-row strong { color: #a7f3d0; }
.scope-note { margin-top: .8rem; color: #94a3b8; font-size: .65rem; line-height: 1.55; }

#heroCard { border-radius: 1.45rem !important; padding: 1.5rem !important; box-shadow: 0 22px 52px rgba(15,23,42,.16) !important; min-height: 12.3rem; }
.result-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.result-status-orb { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.78); font-size: .62rem; font-weight: 950; letter-spacing: .13em; }
.result-divider { height: 1px; margin: 1.25rem 0 .9rem; background: rgba(255,255,255,.18); }
.result-hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .79rem; color: rgba(255,255,255,.78); }

.metric-card { display: flex; align-items: center; gap: .7rem; min-height: 5.8rem; padding: .9rem; border-radius: 1.1rem; background: var(--surface-strong); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(15,23,42,.05); }
.dark .metric-card { background: rgba(15,23,42,.78); border-color: rgba(148,163,184,.16); }
.metric-card div { min-width: 0; }
.metric-card small { display: block; color: #94a3b8; font-size: .62rem; font-weight: 750; line-height: 1.2; }
.metric-card strong { display: block; margin-top: .28rem; color: #0f172a; font-size: clamp(.92rem,1.6vw,1.15rem); letter-spacing: -.035em; white-space: nowrap; }
.dark .metric-card strong { color: #f8fafc; }
.metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: .62rem; font-weight: 950; flex: none; }
.metric-blue { background: #eff6ff; color: #2563eb; }
.metric-green { background: #ecfdf5; color: #059669; }
.metric-dark { background: #0f172a; color: white; }
.dark .metric-blue { background: rgba(59,130,246,.12); color: #93c5fd; }
.dark .metric-green { background: rgba(16,185,129,.12); color: #6ee7b7; }
.metric-card-accent { border-color: rgba(15,23,42,.12); }
.strategy-panel, .chart-panel { padding: 1.25rem; }
#strategyBox { font-size: .83rem; line-height: 1.55; }
#strategyBox b { color: #0f172a; }
.dark #strategyBox b { color: #f8fafc; }
.action-bar { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .9rem; margin-top: .95rem; border-top: 1px solid var(--border); }
.action-bar button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: 0 .72rem; border-radius: .72rem; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: .68rem; font-weight: 850; }
.action-bar button:hover { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.dark .action-bar button { background: rgba(2,6,23,.45); border-color: #334155; color: #cbd5e1; }

.editorial-intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 3rem; align-items: start; padding: 2.3rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-kicker { display: inline-block; margin-bottom: .65rem; color: #059669; font-size: .66rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.editorial-intro h2, .section-title-row h2, .faq-section h2 { color: #0f172a; font-size: clamp(1.65rem,3vw,2.35rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 900; }
.dark .editorial-intro h2, .dark .section-title-row h2, .dark .faq-section h2 { color: #f8fafc; }
.editorial-intro > p { color: #64748b; line-height: 1.85; font-size: .92rem; }
.dark .editorial-intro > p { color: #94a3b8; }

.feature-card, .benefits-section, .explore-section, .faq-section { border: 1px solid var(--border); background: var(--surface); border-radius: 1.4rem; box-shadow: 0 14px 42px rgba(15,23,42,.05); backdrop-filter: blur(15px); }
.dark .feature-card, .dark .benefits-section, .dark .explore-section, .dark .faq-section { background: rgba(15,23,42,.72); border-color: rgba(148,163,184,.15); }
.feature-card { position: relative; overflow: hidden; padding: 1.55rem; }
.feature-card::after { content: ""; position: absolute; width: 8rem; height: 8rem; border-radius: 999px; right: -4rem; bottom: -4rem; background: rgba(16,185,129,.07); }
.feature-number { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: #0f172a; color: white; font-size: .7rem; font-weight: 900; }
.dark .feature-number { background: #10b981; color: #022c22; }
.feature-card h2 { margin-top: 1.1rem; color: #0f172a; font-size: 1.1rem; font-weight: 850; letter-spacing: -.025em; }
.dark .feature-card h2 { color: #f8fafc; }
.feature-card p { margin-top: .7rem; color: #64748b; font-size: .82rem; line-height: 1.7; }
.dark .feature-card p { color: #94a3b8; }
.benefits-section, .explore-section, .faq-section { padding: 1.55rem; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.35rem; }
.section-title-row > p { max-width: 26rem; color: #64748b; font-size: .78rem; line-height: 1.6; }
.dark .section-title-row > p { color: #94a3b8; }
.benefit-card { padding: 1rem; border-radius: 1rem; background: rgba(248,250,252,.72); border: 1px solid rgba(226,232,240,.8); }
.dark .benefit-card { background: rgba(2,6,23,.28); border-color: rgba(148,163,184,.12); }
.benefit-card > span { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: .55rem; align-items: center; justify-content: center; margin-bottom: .7rem; background: #ecfdf5; color: #059669; font-weight: 950; }
.benefit-card strong { display: block; color: #0f172a; font-size: .82rem; }
.dark .benefit-card strong { color: #f8fafc; }
.benefit-card p { margin-top: .35rem; color: #64748b; font-size: .74rem; line-height: 1.55; }
.dark .benefit-card p { color: #94a3b8; }
.text-link { color: #047857; font-size: .75rem; font-weight: 850; }
.dark .text-link { color: #6ee7b7; }
.explore-card { padding: 1rem; border-radius: 1rem; background: rgba(248,250,252,.72); border: 1px solid rgba(226,232,240,.8); }
.dark .explore-card { background: rgba(2,6,23,.28); border-color: rgba(148,163,184,.12); }
.explore-label { color: #94a3b8; font-size: .59rem; font-weight: 950; letter-spacing: .13em; }
.explore-card h3 { margin: .45rem 0 .8rem; color: #0f172a; font-size: .9rem; font-weight: 850; }
.dark .explore-card h3 { color: #f8fafc; }
.explore-card a { display: flex; justify-content: space-between; gap: .5rem; padding: .62rem 0; border-top: 1px solid rgba(226,232,240,.8); color: #475569; font-size: .74rem; font-weight: 750; }
.explore-card a:hover { color: #047857; }
.dark .explore-card a { border-color: rgba(148,163,184,.12); color: #cbd5e1; }
.faq-section h2 { margin-bottom: 1.2rem; }
.faq-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.faq-grid > div { padding: 1rem; border-left: 2px solid #10b981; background: rgba(248,250,252,.55); border-radius: 0 .85rem .85rem 0; }
.dark .faq-grid > div { background: rgba(2,6,23,.22); }
.faq-grid h3 { color: #0f172a; font-size: .8rem; font-weight: 850; }
.dark .faq-grid h3 { color: #f8fafc; }
.faq-grid p { margin-top: .4rem; color: #64748b; font-size: .73rem; line-height: 1.55; }
.dark .faq-grid p { color: #94a3b8; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding: 1.2rem 0 .5rem; border-top: 1px solid var(--border); }
.site-footer p { color: #94a3b8; font-size: .67rem; }

@media (max-width: 1023px) {
  .hero-surface { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { min-height: 16rem; max-width: 30rem; width: 100%; margin: 0 auto; }
  .input-panel { position: static; }
}

@media (max-width: 767px) {
  .hero-surface { padding: 1.4rem; border-radius: 1.4rem; }
  .hero-surface h1 { font-size: 2.65rem; }
  .hero-visual { display: none; }
  .trust-row { gap: .55rem .8rem; }
  .editorial-intro { grid-template-columns: 1fr; gap: 1rem; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .faq-grid { grid-template-columns: 1fr; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .brand-lockup small { display: none; }
  .preview-banner { font-size: .7rem; }
  .hero-actions > * { width: 100%; }
  .metric-card { min-height: 4.9rem; }
  .hours-card { grid-template-columns: 1fr; }
  .hour-presets { margin-bottom: 0; }
  .result-hero-bottom { align-items: flex-start; flex-direction: column; }
}