:root {
  --brand-blue: #438fc5;
  --brand-blue-hover: #347db1;
  --brand-navy: #111329;
  --brand-light-bg: #f4f7fb;
  --brand-dark-bg: #080b19;
  --brand-dark-surface: #11162a;
  --brand-dark-elevated: #18213a;
}

body.page-landing-modern {
  color: var(--brand-navy);
  background:
    radial-gradient(circle at 10% 0%, rgb(17 19 41 / 0.1), transparent 24rem),
    radial-gradient(circle at 86% 8%, rgb(67 143 197 / 0.2), transparent 22rem),
    linear-gradient(180deg, #f4f7fb 0%, #e8eef7 52%, #f4f7fb 100%);
}

html[data-theme="dark"] body.page-landing-modern {
  color: #f8fafc;
  background:
    radial-gradient(circle at 10% 0%, rgb(67 143 197 / 0.24), transparent 24rem),
    radial-gradient(circle at 86% 10%, rgb(120 179 220 / 0.12), transparent 20rem),
    linear-gradient(180deg, var(--brand-dark-bg) 0%, var(--brand-navy) 52%, var(--brand-dark-bg) 100%);
}

.landing-topbar {
  background: rgb(244 247 251 / 0.9) !important;
  border-bottom: 1px solid rgb(17 19 41 / 0.1);
  box-shadow: 0 12px 30px rgb(17 19 41 / 0.08) !important;
}

html[data-theme="dark"] .landing-topbar {
  background: rgb(8 11 25 / 0.9) !important;
  border-bottom-color: rgb(67 143 197 / 0.2);
}

.landing-brand img {
  width: clamp(10rem, 30vw, 15rem) !important;
  height: auto;
  object-fit: contain;
}

.landing-nav-panel a,
.landing-theme-switch-text {
  color: #5d6b82 !important;
}

html[data-theme="dark"] .landing-nav-panel a,
html[data-theme="dark"] .landing-theme-switch-text {
  color: #cbd5e1 !important;
}

.landing-button,
.landing-button-enter {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgb(67 143 197 / 0.24) !important;
}

.landing-button:hover,
.landing-button-enter:hover {
  background: var(--brand-blue-hover) !important;
  border-color: var(--brand-blue-hover) !important;
}

.landing-button-ghost {
  background: transparent !important;
  border-color: rgb(67 143 197 / 0.5) !important;
  color: var(--brand-navy) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .landing-button-ghost {
  color: #f8fafc !important;
}

.landing-button-whatsapp {
  gap: 0.55rem;
  background: var(--brand-navy) !important;
  border-color: rgb(67 143 197 / 0.32) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgb(17 19 41 / 0.18) !important;
}

.landing-button-whatsapp::before {
  width: 1.1rem;
  height: 1.1rem;
  background: url("/assets/brand-icon-whatsapp.svg") center / contain no-repeat;
  content: "";
  filter: none;
}

.landing-button-whatsapp:hover {
  background: var(--brand-dark-elevated) !important;
  border-color: var(--brand-blue) !important;
}

.landing-title,
.landing-section-heading h2,
.landing-module-card h3,
.landing-flow-card h3,
.landing-cta-card h2 {
  color: var(--brand-navy) !important;
}

html[data-theme="dark"] :is(.landing-title, .landing-section-heading h2, .landing-module-card h3, .landing-flow-card h3, .landing-cta-card h2) {
  color: #f8fafc !important;
}

.landing-title-highlight,
.landing-badge,
.landing-badge-soft,
.landing-section-heading .landing-badge {
  color: var(--brand-blue-hover) !important;
}

.landing-copy,
.landing-copy-subhero,
.landing-module-card p,
.landing-flow-card p,
.landing-cta-card p {
  color: #5d6b82 !important;
}

html[data-theme="dark"] :is(.landing-copy, .landing-copy-subhero, .landing-module-card p, .landing-flow-card p, .landing-cta-card p) {
  color: #cbd5e1 !important;
}

.landing-module-card,
.landing-flow-card,
.landing-cta-card,
.landing-section-heading,
.landing-pricing-card,
.landing-compare-card {
  border-color: rgb(17 19 41 / 0.1) !important;
  background: rgb(255 255 255 / 0.78) !important;
  box-shadow: 0 18px 44px rgb(17 19 41 / 0.08) !important;
}

html[data-theme="dark"] :is(.landing-module-card, .landing-flow-card, .landing-cta-card, .landing-section-heading, .landing-pricing-card, .landing-compare-card) {
  border-color: rgb(67 143 197 / 0.2) !important;
  background: var(--brand-dark-surface) !important;
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.24) !important;
}

/* Final static-site overrides: these run after the legacy stylesheet. */
.landing-title-highlight {
  background: linear-gradient(90deg, var(--brand-blue) 0%, #78b3dc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.landing-section-heading,
.landing-pricing-card,
.landing-module-card,
.landing-flow-card,
.landing-compare-card,
.landing-cta-card,
.landing-split-card,
.landing-mini-card {
  border-radius: 24px !important;
  padding: 1.35rem !important;
}

.landing-section-heading {
  margin-inline: auto !important;
}

.landing-badge,
.landing-badge-soft {
  border-radius: 999px !important;
  border: 1px solid rgb(67 143 197 / 0.2) !important;
  background: rgb(67 143 197 / 0.08) !important;
  color: var(--brand-blue-hover) !important;
}

.landing-social-proof,
.landing-footer-socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.landing-social-proof a,
.landing-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(67 143 197 / 0.22);
  border-radius: 999px;
  background: rgb(67 143 197 / 0.08);
  color: var(--brand-blue-hover);
  font-size: 0;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.landing-social-proof a::before,
.landing-footer-socials a::before {
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  content: "";
}

.landing-social-proof a:nth-of-type(1)::before { -webkit-mask-image: url("/assets/brand-icon-instagram.svg"); mask-image: url("/assets/brand-icon-instagram.svg"); }
.landing-social-proof a:nth-of-type(2)::before,
.landing-social-proof a:nth-of-type(2)::before { -webkit-mask-image: url("/assets/brand-icon-facebook.svg"); mask-image: url("/assets/brand-icon-facebook.svg"); }
.landing-social-proof a:nth-of-type(3)::before,
.landing-social-proof a:nth-of-type(3)::before { -webkit-mask-image: url("/assets/brand-icon-x.svg"); mask-image: url("/assets/brand-icon-x.svg"); }

.landing-footer-socials a:nth-of-type(1)::before { background: url("/assets/brand-icon-whatsapp.svg") center / contain no-repeat; }
.landing-footer-socials a:nth-of-type(2)::before { -webkit-mask-image: url("/assets/brand-icon-instagram.svg"); mask-image: url("/assets/brand-icon-instagram.svg"); }
.landing-footer-socials a:nth-of-type(3)::before { -webkit-mask-image: url("/assets/brand-icon-facebook.svg"); mask-image: url("/assets/brand-icon-facebook.svg"); }
.landing-footer-socials a:nth-of-type(4)::before { -webkit-mask-image: url("/assets/brand-icon-x.svg"); mask-image: url("/assets/brand-icon-x.svg"); }

.landing-social-proof a:hover,
.landing-footer-socials a:hover {
  transform: translateY(-1px);
  border-color: var(--brand-blue);
  background: rgb(67 143 197 / 0.16);
  color: var(--brand-blue);
}

html[data-theme="dark"] .landing-social-proof a,
html[data-theme="dark"] .landing-footer-socials a {
  background: rgb(67 143 197 / 0.12);
  color: #9bc9e6;
}

.landing-brand {
  border-radius: 14px;
  padding: 0.2rem;
}

html[data-theme="dark"] .landing-brand {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .landing-brand img {
  border-radius: 0;
}

html[data-theme="dark"] .landing-title-highlight {
  background: linear-gradient(90deg, #438fc5 0%, #9bc9e6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Replace the legacy mobile haze with the current navy and TAPPA blue system. */
.landing-hero::before,
.landing-section::before {
  background:
    radial-gradient(circle at top left, rgb(17 19 41 / 0.1), transparent 42%),
    radial-gradient(circle at bottom right, rgb(67 143 197 / 0.12), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / 0.48), rgb(255 255 255 / 0.12)) !important;
  filter: none !important;
}

html[data-theme="dark"] .landing-hero::before,
html[data-theme="dark"] .landing-section::before {
  background:
    radial-gradient(circle at top left, rgb(67 143 197 / 0.18), transparent 42%),
    radial-gradient(circle at bottom right, rgb(120 179 220 / 0.08), transparent 34%),
    linear-gradient(180deg, rgb(8 11 25 / 0.72), rgb(17 19 41 / 0.34)) !important;
}