:root {
  --bg: #f7f1e7;
  --surface: #fffaf2;
  --surface-raised: #f3ece1;
  --surface-hover: #ede2d3;
  --border: rgba(32, 26, 23, 0.09);
  --border-light: rgba(32, 26, 23, 0.16);
  --white: #201a17;
  --gray-100: #f3ece1;
  --gray-200: #eadfce;
  --gray-300: #cfc0ae;
  --gray-400: #87796d;
  --gray-500: #61574f;
  --blue: #7b8fc7;
  --blue-hover: #8ea1d3;
  --blue-glow: rgba(123, 143, 199, 0.14);
  --green: #2c8f69;
  --green-glow: rgba(44, 143, 105, 0.16);
  --orange: #c4513a;
  --black: #1a1a1f;
  --black-pure: #151519;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(196, 81, 58, 0.08), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(123, 143, 199, 0.14), transparent 25%),
    linear-gradient(180deg, #fbf6ef 0%, #f7f1e7 100%) !important;
  color: var(--white) !important;
  font-family: "Inter", sans-serif !important;
}

nav {
  background: rgba(251, 246, 239, 0.84) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
}

.nav-inner {
  max-width: 1240px !important;
  height: 72px !important;
  gap: 24px;
}

.nav-links a,
.nav-back,
.mobile-menu a,
footer p,
footer a,
.hero-sub,
.section-sub,
.section-body,
.tool-desc,
.value-desc,
.problem-text,
.included-text,
.step-text,
.who-item,
.doc-content .intro,
.doc-section p,
.doc-section li {
  color: var(--gray-500) !important;
}

.nav-links a:hover,
.nav-links a.active,
.nav-back:hover,
footer a:hover {
  color: var(--white) !important;
}

.nav-back {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
}

.mobile-menu {
  background: rgba(247, 241, 231, 0.97) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
}

.mobile-toggle span {
  background: var(--white) !important;
}

.hero,
.section-pad,
.cta-section,
.form-section,
.intro-section,
.why-section,
.tools-section,
.pricing-section,
.consulting-section,
.stats-strip,
.marquee,
.band,
.doc-layout,
.doc-content,
.doc-sidebar,
.page-wrap {
  position: relative;
}

.hero {
  min-height: auto !important;
  padding-top: 146px !important;
  padding-bottom: 82px !important;
}

.hero::before,
.hero::after,
.cta-section::before {
  opacity: 1;
}

.hero h1,
.hero-headline,
.section-headline,
.cta-h2,
.doc-content h1,
.doc-section h2,
.tool-name,
.value-title,
.problem-title,
.included-title,
.step-title,
.who-card-title,
.scarcity-title,
.contact-left h2,
.form-success h3,
.hero-kpi strong,
.stat-number {
  color: var(--white) !important;
  letter-spacing: -0.05em !important;
}

.hero-label,
.section-label,
.hero-tag,
.tool-number,
.hero-card-label,
.tier-name,
.doc-sidebar-title,
.doc-sidebar-updated,
.doc-section h3,
.mockup-title,
.mockup-mini-label,
.mockup-copy-label {
  color: var(--orange) !important;
}

.hero h1 em,
.hero-headline em,
.section-headline em,
.cta-h2 em,
.tool-name em {
  color: var(--orange) !important;
  font-style: normal;
}

.hero-sub,
.section-sub,
.section-body,
.hero-note {
  max-width: 760px !important;
}

.hero-eyebrow,
.pill,
.hero-points span,
.brand-tag,
.pricing-note,
.sp-badge {
  background: rgba(196, 81, 58, 0.09) !important;
  border: 1px solid rgba(196, 81, 58, 0.16) !important;
  color: var(--orange) !important;
  box-shadow: none !important;
}

.hero-divider,
.pill-dot,
.sp-badge .dot {
  background: var(--orange) !important;
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.nav-cta,
.mobile-menu .mob-cta,
.form-submit {
  border-radius: 999px !important;
}

.btn-secondary,
.btn-ghost {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: #fff !important;
}

.value-card,
.stat-card,
.problem-cell,
.included-card,
.who-card,
.tier-card,
.consult-card,
.tool-card,
.solution-card,
.hero-card,
.contact-form,
.form-box,
.intro-visual,
.mockup-card,
.math-wrap,
.scarcity-bar,
.faq-item,
.doc-sidebar,
.right-card,
.legal-box {
  background: rgba(255, 250, 242, 0.78) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 50px -30px rgba(32, 26, 23, 0.16) !important;
}

.quote-block,
.hero-card-footer,
.math-note,
.form-testimonial,
.contact-guarantee,
.mockup-mini-card,
.mockup-copy-block {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--border) !important;
}

.tool-row,
.problem-grid,
.stat-row,
.pricing-tiers,
.included-grid,
.who-grid,
.doc-layout,
.cookie-table th,
.cookie-table td {
  border-color: var(--border) !important;
}

.tool-visual,
.problem-cell,
.stats-strip,
.why-section,
.pricing-section,
.section-pad[style*="background"],
.cta-section,
.doc-layout {
  background: transparent !important;
}

.tool-row {
  border-top: 1px solid var(--border) !important;
}

.tool-text,
.tool-row.reverse .tool-text {
  border-color: var(--border) !important;
}

.mockup-card,
.mockup-mini-card,
.mockup-copy-block {
  color: var(--white) !important;
}

.mockup-row,
.mockup-status-row,
.mockup-upload-row,
.compare-row,
.math-row,
.step-row,
.solution-stat {
  border-color: var(--border) !important;
}

.mockup-label,
.compare-label,
.stat-label,
.problem-cost span,
.solution-card-sub,
.solution-stat-text,
.tier-spend,
.tier-example,
.consult-desc,
.trust-item,
.math-col-label,
.math-row-label,
.math-note,
.scarcity-text,
.form-note,
.doc-sidebar-links a,
.doc-section li,
.cookie-table td {
  color: var(--gray-500) !important;
}

.mockup-val,
.compare-new,
.compare-old,
.problem-cost,
.solution-card-amount,
.solution-card-title,
.solution-stat-num,
.math-row-val,
.math-total-val,
.tier-percent,
.tier-name,
.trust-item strong,
.doc-section strong,
.right-card-title {
  color: var(--white) !important;
}

.compare-old,
.solution-card-item.crossed {
  color: var(--gray-400) !important;
}

.mockup-accent,
.trust-check::after,
.included-tag,
.guarantee-icon,
.status-dot.green,
.solution-card-item::before {
  color: var(--green) !important;
}

.trust-check,
.included-tag,
.meeting-pill input:checked + span,
.meeting-pill span:hover {
  border-color: rgba(44, 143, 105, 0.22) !important;
  background: rgba(44, 143, 105, 0.08) !important;
}

.hero-card::before,
.math-wrap::before {
  background: linear-gradient(90deg, var(--orange), var(--blue)) !important;
}

.problem-grid,
.stats-strip,
.band {
  background: var(--black) !important;
}

.band-item,
.marquee-item {
  color: #faf8f4 !important;
}

.marquee-item.sp,
.section-headline .sp,
.stat-number.sp {
  color: var(--orange) !important;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.form-box input,
.form-box select,
.form-box textarea {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.form-box input::placeholder,
.form-box textarea::placeholder {
  color: var(--gray-400) !important;
}

.faq-q,
.faq-question {
  color: var(--white) !important;
}

.faq-a,
.faq-a-inner {
  color: var(--gray-500) !important;
}

.doc-layout {
  max-width: 1240px !important;
  gap: 42px !important;
  padding-top: 132px !important;
}

.doc-sidebar {
  top: 108px !important;
}

.doc-sidebar-links a:hover {
  background: rgba(196, 81, 58, 0.08) !important;
}

.cookie-table th {
  color: var(--gray-400) !important;
}

.cookie-table tr:hover td {
  background: rgba(255, 255, 255, 0.45) !important;
}

footer {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

@media (max-width: 1024px) {
  .nav-links {
    display: none !important;
  }

  .mobile-toggle {
    display: block !important;
  }

  .hero,
  .doc-layout {
    padding-top: 118px !important;
  }

  .hero-inner,
  .solution-wrap,
  .contact-wrap,
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 104px !important;
    padding-bottom: 64px !important;
  }

  .hero h1,
  .hero-headline,
  .section-headline,
  .doc-content h1 {
    font-size: clamp(34px, 10vw, 52px) !important;
  }

  .doc-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .doc-sidebar {
    position: static !important;
  }
}