/*
 * SOMA public-site layout coherence layer
 *
 * Keeps full-bleed sections, media and atmospheric layers untouched while
 * giving functional content a shared horizontal grid and responsive rhythm.
 */

:where(.mvp-campaign, .pricing-page, .sales-page) {
  --soma-page-gutter: clamp(20px, 5vw, 64px);
  --soma-container-main: 1240px;
  --soma-container-wide: 1320px;
  --soma-container-reading: 760px;
  --soma-section-space: clamp(72px, 9vw, 120px);
  --soma-section-space-compact: clamp(56px, 6vw, 88px);
  --soma-type-section: clamp(1.9rem, 3.8vw, 3.2rem);
}

/* Shared standard container. The home hero grid is an intentional cinematic
   exception: its copy/visual relationship keeps the approved art direction. */
.mvp-campaign .wrap:not(.mvp-hero-grid),
.pricing-page .wrap,
.sales-page .foot .wrap {
  width: 100%;
  max-width: calc(var(--soma-container-main) + (2 * var(--soma-page-gutter)));
  margin-inline: auto;
  padding-inline: var(--soma-page-gutter);
}

/* Header remains full-bleed; only its functional content follows the grid. */
@media (min-width: 981px) {
  :where(.mvp-campaign, .pricing-page, .sales-page) > .nav {
    padding-inline: max(
      var(--soma-page-gutter),
      calc((100vw - var(--soma-container-main)) / 2)
    );
  }
}

/* Commercial solution pages: one predictable outer grid. Reading-width and
   centered editorial blocks retain their intentional narrower measures. */
.mvp-solution-page .sol-section,
.mvp-solution-page .sol-faq {
  padding-inline: var(--soma-page-gutter);
  padding-block: var(--soma-section-space);
}

.mvp-solution-page .sol-section > div:not([class]),
.mvp-solution-page .sol-faq > div:not([class]),
.mvp-solution-page .sol-section > .sol-grid-3,
.mvp-solution-page .sol-section > .sol-two-col {
  width: 100%;
  max-width: var(--soma-container-main);
  margin-inline: auto;
}

/* This section already lives inside the shared section gutter. Reset the
   legacy .wrap padding so its copy, media and three supporting cards land on
   the same axis as the other solution-page sections. */
.mvp-solution-page .mvp-notebook-section > .mvp-notebook-grid {
  width: 100%;
  max-width: var(--soma-container-main);
  margin-inline: auto;
  padding-inline: 0;
}

.mvp-solution-page .sol-title {
  font-size: var(--soma-type-section);
}

.mvp-solution-page .solution-price-bridge {
  padding-inline: var(--soma-page-gutter);
}

.mvp-solution-page .solution-price-bridge-inner {
  width: 100%;
  max-width: var(--soma-container-main);
}

/* Full-width image banner stays full-bleed; its copy aligns with the same grid. */
.mvp-solution-page .combo-banner-section .combo-power {
  padding-left: max(
    var(--soma-page-gutter),
    calc((100vw - var(--soma-container-main)) / 2)
  );
  padding-right: max(
    var(--soma-page-gutter),
    calc((100vw - var(--soma-container-main)) / 2)
  );
}

/* Video media and overlays remain edge-to-edge. Intro/end content use the grid. */
.mvp-solution-page .care-film-intro,
.mvp-solution-page .care-film-end {
  width: min(
    calc(100% - (2 * var(--soma-page-gutter))),
    var(--soma-container-main)
  );
}

/* Contact hero remains immersive; copy and carousel controls share the global
   alignment instead of a page-specific 8vw offset. */
.sales-page:not(.mvp-campaign) .solucao-hero {
  padding-inline: 0;
}

.sales-page:not(.mvp-campaign) .solucao-hero-content {
  width: min(var(--soma-container-reading), calc(100% - (2 * var(--soma-page-gutter))));
  margin-left: max(
    var(--soma-page-gutter),
    calc((100vw - var(--soma-container-main)) / 2)
  );
}

.sales-page:not(.mvp-campaign) .hero-dots {
  left: max(
    var(--soma-page-gutter),
    calc((100vw - var(--soma-container-main)) / 2)
  );
}

.sales-page:not(.mvp-campaign) .contato-layout {
  width: 100%;
  max-width: calc(var(--soma-container-main) + (2 * var(--soma-page-gutter)));
  margin-inline: auto;
  padding-inline: var(--soma-page-gutter);
  padding-block: var(--soma-section-space-compact);
}

.sales-page:not(.mvp-campaign) .sol-team {
  padding-inline: var(--soma-page-gutter);
}

.sales-page:not(.mvp-campaign) .sol-team > div {
  width: 100%;
  max-width: var(--soma-container-main);
  margin-inline: auto;
}

/* Pricing already uses 1240px internal components. This rule makes the outer
   wrapper use the same true content width instead of a second width system. */
.pricing-page .pricing-intro,
.pricing-page .pricing-starting,
.pricing-page .pricing-config-shell {
  width: 100%;
  max-width: var(--soma-container-main);
}

/* Evidence keeps its full-bleed cinematic background, but its functional
   content now lands on the same 1240px axis as the remaining home sections.
   The slightly smaller stage preserves the clock-to-data narrative while
   restoring the visual hierarchy between copy and evidence. */
@media (min-width: 981px) {
  .mvp-campaign .mvp-evidence-shell {
    width: 100%;
    max-width: calc(var(--soma-container-main) + (2 * var(--soma-page-gutter)));
    margin-inline: auto;
    padding-inline: var(--soma-page-gutter);
    box-sizing: border-box;
    grid-template-columns: minmax(430px, 0.92fr) minmax(0, 1.38fr);
    gap: clamp(28px, 3vw, 52px);
  }

  .mvp-campaign .mvp-evidence-cinematic .mvp-evidence-intro {
    width: 100%;
    max-width: 500px;
  }

  .mvp-campaign .mvp-evidence-cinematic .mvp-evidence-intro h2 {
    font-size: clamp(48px, 3.8vw, 64px);
  }

  .mvp-campaign .mvp-evidence-stage {
    width: calc(100% + 28px);
    margin-right: -28px;
  }

  .mvp-campaign .mvp-evidence-canvas {
    transform: scale(0.86);
    transform-origin: 50% 50%;
  }

  .mvp-campaign .mvp-evidence-datum--primary strong {
    font-size: clamp(112px, 9.4vw, 158px);
  }

  .mvp-campaign .mvp-evidence-datum--primary > span {
    margin-top: 20px;
    font-size: clamp(19px, 1.55vw, 27px);
  }

  .mvp-campaign .mvp-evidence-datum--clinical strong {
    font-size: clamp(68px, 5.5vw, 94px);
  }

  .mvp-campaign .mvp-evidence-datum--clinical > span {
    font-size: clamp(14px, 1.08vw, 19px);
  }

  .mvp-campaign .mvp-evidence-datum--other strong {
    font-size: clamp(48px, 3.8vw, 66px);
  }

  .mvp-campaign .mvp-evidence-datum--other > span {
    font-size: clamp(13px, 0.96vw, 16px);
  }

  .mvp-campaign .mvp-evidence-ratio-copy {
    gap: clamp(20px, 2vw, 32px);
  }

  .mvp-campaign .mvp-evidence-ratio-copy strong {
    font-size: clamp(62px, 5.1vw, 86px);
  }

  .mvp-campaign .mvp-evidence-ratio-copy span {
    font-size: clamp(14px, 1vw, 17px);
  }

  .mvp-campaign .mvp-evidence-datum--ratio small {
    font-size: clamp(9px, 0.7vw, 12px);
  }
}

@media (max-width: 920px) {
  .mvp-solution-page .solution-price-bridge-inner {
    gap: 28px;
  }

  .sales-page:not(.mvp-campaign) .contato-layout {
    gap: 28px;
  }
}

/* The module rail makes the 3D showcase optically left-heavy even when its
   geometric center is correct. On wide screens, reserve a slightly narrower
   stage and move the entire connected system to the visual center. */
@media (min-width: 1181px) {
  .mvp-home-v5 .mvp-showcase .mvp-product-stage {
    width: min(1040px, calc(100% - 120px));
    transform: translateX(clamp(40px, 3.6vw, 60px));
  }
}

/* The legacy commercial header carries more destinations than the current MVP
   header. Collapse it slightly earlier so the brand never gets compressed at
   the 1024px validation width. */
@media (max-width: 1100px) {
  .sales-page:not(.mvp-campaign) .nav-links {
    display: none;
  }

  .sales-page:not(.mvp-campaign) .nav-toggle {
    display: inline-flex;
  }

  .sales-page:not(.mvp-campaign) .nav.is-open .nav-links {
    position: absolute;
    top: calc(var(--topbar-h) + 6px);
    right: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(5, 11, 23, 0.96);
    backdrop-filter: blur(28px);
  }
}

@media (max-width: 620px) {
  :where(.mvp-campaign, .pricing-page, .sales-page) {
    --soma-section-space: 72px;
    --soma-section-space-compact: 56px;
  }

  .mvp-solution-page .solution-price-bridge-inner {
    padding-inline: 24px;
  }

  .sales-page:not(.mvp-campaign) .contato-layout {
    gap: 24px;
  }
}

/* Home atmosphere coherence -------------------------------------------------
   The homepage uses one continuous magnetic navy field. Individual sections
   remain transparent so their local light, particles and WebGL effects blend
   into the same atmosphere instead of creating alternating navy bands. */
.mvp-home-v5 {
  background-color: #050b17;
  background-image:
    radial-gradient(ellipse 76% 54% at 18% 28%, rgba(2, 184, 191, 0.09), transparent 68%),
    radial-gradient(ellipse 66% 52% at 84% 38%, rgba(123, 97, 255, 0.1), transparent 70%),
    radial-gradient(ellipse 72% 48% at 58% 82%, rgba(20, 91, 154, 0.08), transparent 72%),
    linear-gradient(180deg, #050b17 0%, #06101e 48%, #050b17 100%);
  background-attachment: fixed;
}

.mvp-home-v5 main,
.mvp-home-v5 .mvp-hero,
.mvp-home-v5 .mvp-showcase,
.mvp-home-v5 .mvp-evidence,
.mvp-home-v5 .mvp-solutions,
.mvp-home-v5 .mvp-calculator,
.mvp-home-v5 .mvp-record,
.mvp-home-v5 .mvp-paths {
  background-color: transparent;
  background-image: none;
}

/* Keep a restrained component-driven glow in every section. This gives each
   structure its own projected light without changing the shared navy field. */
.mvp-home-v5 :is(
  .mvp-showcase,
  .mvp-solutions,
  .mvp-calculator,
  .mvp-record,
  .mvp-paths
) {
  position: relative;
  isolation: isolate;
}

.mvp-home-v5 :is(
  .mvp-showcase,
  .mvp-solutions,
  .mvp-calculator,
  .mvp-record,
  .mvp-paths
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(ellipse 46% 34% at 34% 52%, rgba(2, 184, 191, 0.075), transparent 72%),
    radial-gradient(ellipse 42% 36% at 74% 58%, rgba(123, 97, 255, 0.075), transparent 74%);
}

/* The visual remains part of the grid, while the photographic layer itself
   reaches the viewport edge. Its left fade keeps the copy fully legible. */
@media (min-width: 1021px) {
  .mvp-home-v5 .mvp-hero-portrait {
    right: calc((100vw - min(calc(100vw - 28px), 1400px)) / -2 - 34px);
    border-right: 0;
    border-radius: 34px 0 0 34px;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 7%, #000 20%, #000 100%),
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 5%, #000 14%, #000 84%, rgba(0, 0, 0, 0.74) 94%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 7%, #000 20%, #000 100%),
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 5%, #000 14%, #000 84%, rgba(0, 0, 0, 0.74) 94%, transparent 100%);
  }

  .mvp-home-v5 .mvp-hero-portrait::after {
    background:
      radial-gradient(ellipse at 63% 45%, transparent 0 42%, rgba(5, 11, 23, 0.07) 68%, rgba(5, 11, 23, 0.28) 100%),
      linear-gradient(90deg, rgba(5, 11, 23, 0.96) 0%, rgba(5, 11, 23, 0.5) 17%, rgba(5, 11, 23, 0.08) 43%, rgba(5, 11, 23, 0.02) 82%, rgba(5, 11, 23, 0.16) 100%),
      linear-gradient(180deg, rgba(5, 11, 23, 0.28) 0%, rgba(5, 11, 23, 0.03) 22%, rgba(5, 11, 23, 0.08) 66%, rgba(5, 11, 23, 0.78) 100%);
  }
}

/* Social marks are links, not tertiary buttons. Match the solution pages by
   keeping only the brand icons and a small motion/focus affordance. */
.mvp-home-v5 .mvp-footer .foot-social a {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mvp-home-v5 .mvp-footer .foot-social a:hover,
.mvp-home-v5 .mvp-footer .foot-social a:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 9px rgba(127, 231, 235, 0.28));
}

.mvp-home-v5 .mvp-footer .foot-social img {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}

@media (max-width: 1020px) {
  .mvp-home-v5 {
    background-attachment: scroll;
  }
}