/* ==========================================================================
   VitaCoreX — Home Page Width Alignment
   Removes the visual tapering of mid-page sections by aligning every block
   to the hero promo strip's exact pattern: max-width 1640px, 24px inner
   horizontal padding, no extra padding on the parent section. Scoped to
   body[data-vcx-page="home"] so other pages keep their narrower defaults.
   ========================================================================== */

:root {
  --vcx-home-max: 1640px;
  --vcx-home-pad-x: 24px;
}

/* Reset: kill any horizontal padding on home-page sections so they sit
   edge-to-edge — the wrap inside provides the unified inner padding. */
body[data-vcx-page="home"] .section.section-tight,
body[data-vcx-page="home"] .vcx-om-section,
body[data-vcx-page="home"] .vcx-cases-merged,
body[data-vcx-page="home"] .vcx-fit-three-up,
body[data-vcx-page="home"] .vcx-impact-section {
  padding-inline: 0;
}

/* The unified wrap: matches hero promo strip's __wrap exactly. */
body[data-vcx-page="home"] .vcx-promo-strip__wrap,
body[data-vcx-page="home"] .vcx-expand-section__head,
body[data-vcx-page="home"] .vcx-expand-cards,
body[data-vcx-page="home"] .section.section-tight > .wrap,
body[data-vcx-page="home"] .vcx-om-scroll,
body[data-vcx-page="home"] .vcx-cases-merged > .wrap,
body[data-vcx-page="home"] .vcx-fit-three-up > .wrap,
body[data-vcx-page="home"] .vcx-impact-section > .wrap {
  max-width: var(--vcx-home-max);
  margin-inline: auto;
  padding-inline: var(--vcx-home-pad-x);
  box-sizing: border-box;
}

/* The leak grid was constrained to 1500 — let it fill the wrap now */
body[data-vcx-page="home"] .vcx-leak-grid {
  max-width: 100%;
  margin-inline: 0;
}

/* Defeat global h2 max-width !important rules from styles.css/ui-shell.css that
   force section titles down to 14-30ch and break our headlines into too many lines. */
body[data-vcx-page="home"] .vcx-om-section .vcx-om-title,
body[data-vcx-page="home"] .vcx-om-section .vcx-om-lede,
body[data-vcx-page="home"] .vcx-cases-merged .section-head,
body[data-vcx-page="home"] .vcx-cases-merged .section-head h2,
body[data-vcx-page="home"] .vcx-cases-merged .section-head .section-intro,
body[data-vcx-page="home"] .vcx-cases-merged .vcx-cases-sub-head,
body[data-vcx-page="home"] .vcx-cases-merged .vcx-cases-sub-head h3,
body[data-vcx-page="home"] .vcx-cases-merged .vcx-cases-sub-head p,
body[data-vcx-page="home"] .vcx-impact-section h2,
body[data-vcx-page="home"] .vcx-impact-section .vcx-headline-accent {
  max-width: 100% !important;
  width: 100% !important;
}

/* Impact section recolor — match footer dark-teal palette
   (footer gradient: linear-gradient(180deg, #123E4C 0%, #0A2530 100%)) */
body[data-vcx-page="home"] .vcx-impact-section {
  background: linear-gradient(180deg, #123E4C 0%, #0A2530 100%) !important;
  padding-block: clamp(56px, 8vh, 96px) !important;
  position: relative;
  overflow: hidden;
}
body[data-vcx-page="home"] .vcx-impact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 320px at 12% 20%, rgba(124, 210, 222, 0.08), transparent 60%),
    radial-gradient(ellipse 600px 280px at 88% 80%, rgba(124, 210, 222, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body[data-vcx-page="home"] .vcx-impact-section > .wrap {
  position: relative;
  z-index: 1;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-eyebrow-premium {
  color: #7CD2DE !important;
  -webkit-text-fill-color: #7CD2DE !important;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-headline-accent,
body[data-vcx-page="home"] .vcx-impact-section h2 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-impact-number {
  color: #7CD2DE !important;
  -webkit-text-fill-color: #7CD2DE !important;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-impact-number::after {
  background: linear-gradient(90deg, #7CD2DE, transparent) !important;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-impact-label {
  color: rgba(208, 240, 234, 0.72) !important;
  -webkit-text-fill-color: rgba(208, 240, 234, 0.72) !important;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-impact-source,
body[data-vcx-page="home"] .vcx-impact-section .vcx-impact-source * {
  color: rgba(208, 240, 234, 0.55) !important;
  -webkit-text-fill-color: rgba(208, 240, 234, 0.55) !important;
}
body[data-vcx-page="home"] .vcx-impact-section .vcx-impact-item {
  border-color: rgba(124, 210, 222, 0.14) !important;
}

/* The vcx-reveal animation script wraps each word of h2 in
   <span class="vcx-word"> so it can fade-in word-by-word. Those
   spans inherit color from .vcx-impact-section * (which forces #111).
   Override so spans inside the impact title also render white. */
body[data-vcx-page="home"] .vcx-impact-section h2 .vcx-word,
body[data-vcx-page="home"] .vcx-impact-section .vcx-headline-accent .vcx-word,
body[data-vcx-page="home"] .vcx-impact-section h2 *,
body[data-vcx-page="home"] .vcx-impact-section .vcx-headline-accent * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Three-up section (Квалификация / Рекомендация / Линия частной консультации):
   re-pin pill + button + phone callout colors to header/footer palette
   (dark teal #0A2530 / #123E4C, cyan accent #7CD2DE). */
body[data-vcx-page="home"] .vcx-fit-three-up .pill {
  background: rgba(18, 62, 76, 0.08) !important;
  color: #0A2530 !important;
  -webkit-text-fill-color: #0A2530 !important;
  border-color: rgba(18, 62, 76, 0.16) !important;
}

body[data-vcx-page="home"] .vcx-fit-three-up .btn-primary,
body[data-vcx-page="home"] .vcx-fit-three-up-cta .btn-primary {
  background: linear-gradient(180deg, #123E4C 0%, #0A2530 100%) !important;
  background-color: #0A2530 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #0A2530 !important;
  box-shadow: 0 6px 16px -8px rgba(10, 37, 48, 0.4) !important;
}
body[data-vcx-page="home"] .vcx-fit-three-up .btn-primary:hover,
body[data-vcx-page="home"] .vcx-fit-three-up-cta .btn-primary:hover {
  background: linear-gradient(180deg, #1A516A 0%, #123E4C 100%) !important;
  box-shadow: 0 12px 28px -10px rgba(10, 37, 48, 0.55) !important;
  transform: translateY(-1px);
}

body[data-vcx-page="home"] .vcx-fit-three-up .btn-secondary {
  background: transparent !important;
  color: #0A2530 !important;
  -webkit-text-fill-color: #0A2530 !important;
  border-color: rgba(18, 62, 76, 0.30) !important;
}
body[data-vcx-page="home"] .vcx-fit-three-up .btn-secondary:hover {
  background: rgba(124, 210, 222, 0.10) !important;
  border-color: #123E4C !important;
}

/* Phone callout box: subtle cyan tint matching the new accent */
body[data-vcx-page="home"] .vcx-fit-three-up .concierge-phone {
  background: rgba(124, 210, 222, 0.10) !important;
  border-color: rgba(18, 62, 76, 0.16) !important;
}
body[data-vcx-page="home"] .vcx-fit-three-up .concierge-phone span {
  color: #4A6675 !important;
  -webkit-text-fill-color: #4A6675 !important;
}
body[data-vcx-page="home"] .vcx-fit-three-up .concierge-phone strong {
  color: #0A2530 !important;
  -webkit-text-fill-color: #0A2530 !important;
}

/* Mobile: relax */
@media (max-width: 768px) {
  :root {
    --vcx-home-pad-x: 16px;
  }
}