/* Ovastack page — full screenshot-driven DOM/CSS rematch, 2026-07-08. */
.ovastack-page {
  --ova-shell: min(calc(100% - 8px), 1536px);
  --ova-hero-container: min(calc(100% - 232px), 1304px);
  --ova-section-container: min(calc(100% - 420px), 1116px);
  --ova-dark: #030615;
  --ova-dark-2: #070d25;
  --ova-ink: #07083f;
  --ova-muted: #1b276b;
  --ova-accent: #4a20ff;
  --ova-accent-2: #8b29ff;
  --ova-card-border: rgba(214, 219, 246, .76);
  color: var(--ova-ink);
  background: #f5f6ff;
  font-family: var(--font-family, 'Cerebri Sans'), Inter, system-ui, sans-serif;
}

.ovastack-main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 360px at 50% 54%, rgba(238, 236, 255, .56), transparent 72%),
    linear-gradient(180deg, #f7f8ff 0%, #fbfbff 58%, #f6f7ff 100%);
}

.ova-dark-fold {
  position: relative;
  width: var(--ova-shell);
  margin: 0 auto;
  color: #fff;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 620px 330px at 79% 35%, rgba(27, 56, 169, .42), transparent 68%),
    radial-gradient(circle at 95% 40%, rgba(72, 25, 255, .32), transparent 26%),
    linear-gradient(180deg, #030616 0%, #020512 100%);
}

.ova-dark-fold::before,
.ova-dark-fold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ova-dark-fold::before {
  background:
    radial-gradient(circle at 83% 43%, rgba(67, 46, 255, .72) 0 1px, transparent 2px) 0 0 / 17px 17px,
    linear-gradient(90deg, rgba(58, 42, 255, .22), transparent 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 58%, #000 100%);
  opacity: .75;
}

.ova-dark-fold::after {
  inset: auto 0 0;
  height: 110px;
  background: linear-gradient(0deg, rgba(11, 13, 36, .98), transparent);
}

.ova-dark-fold__inner {
  width: var(--ova-hero-container);
  margin: 0 auto;
  padding: 0 0 8px;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  margin: 0 0 4px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 750;
}

.page-breadcrumb a,
.page-breadcrumb b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}

.page-breadcrumb b { color: #fff; }
.page-breadcrumb svg { width: 13px; height: 13px; }
.page-breadcrumb svg * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ovastack-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(520px, .86fr) minmax(560px, 1.14fr);
  gap: 18px;
  min-height: 178px;
  align-items: start;
}

.ovastack-hero__copy {
  position: relative;
  z-index: 4;
  padding-top: 2px;
  max-width: 620px;
}

.ova-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  margin: 0 0 8px;
  padding: 0 13px 0 10px;
  border: 1px solid rgba(91, 79, 255, .42);
  border-radius: 999px;
  color: #fff;
  background: rgba(54, 49, 155, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  font-weight: 900;
}

.hero-kicker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7a58ff;
  box-shadow: 0 0 0 4px rgba(122,88,255,.18);
}

.ovastack-hero h1 {
  font-family: var(--cb-display-font);
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 2.65vw, 44px);
  line-height: .95;
  letter-spacing: var(--cb-display-tracking);
  font-weight: var(--cb-display-weight);
}

.ovastack-hero h1 > span { display: block; }
.ovastack-hero h1 > span:last-child {
  font-size: .84em;
  line-height: 1;
  white-space: nowrap;
}
.ovastack-hero h1 .accent {
  color: #5c2cff;
  font-size: 1.12em;
  text-shadow: 0 0 20px rgba(98, 44, 255, .28);
}

.ova-lead {
  max-width: 540px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(13.5px, .96vw, 15.5px);
  line-height: 1.48;
  letter-spacing: -.012em;
  font-weight: 500;
}

.ova-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.ova-actions .btn {
  min-height: 38px;
  border-radius: 7px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 900;
}

.ova-actions .btn--large { min-width: 170px; }
.ova-actions .btn--outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(6, 9, 25, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.ova-actions svg { width: 16px; height: 16px; }
.ova-actions svg * { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.ovastack-hero__visual {
  position: relative;
  height: 178px;
  min-width: 0;
}

.ova-server-scene {
  position: absolute;
  z-index: 1;
  right: -22px;
  top: -82px;
  width: 400px;
  height: 301px;
  object-fit: contain;
  opacity: .98;
  filter: drop-shadow(0 30px 52px rgba(12, 43, 169, .36));
}

.ova-dashboard {
  position: absolute;
  z-index: 3;
  left: 0;
  top: -22px;
  width: min(452px, 68%);
  height: 270px;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(83, 105, 170, .52);
  border-radius: 12px;
  background: rgba(8, 15, 39, .76);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
}

.ova-dashboard__rail {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px 11px;
  border-right: 1px solid rgba(89, 112, 190, .3);
  background: linear-gradient(180deg, rgba(12, 24, 61, .78), rgba(5, 11, 31, .72));
  color: rgba(255, 255, 255, .7);
  font-size: 8.8px;
  line-height: 1;
  font-weight: 800;
}

.ova-dashboard__rail strong {
  margin-bottom: 3px;
  color: #fff;
  font-size: 20px;
  letter-spacing: -.058em;
}

.ova-dashboard__rail span {
  min-height: 23px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 6px;
}

.ova-dashboard__rail .is-active {
  color: #fff;
  background: linear-gradient(135deg, #283fdb, #422aff);
}

.ova-dashboard__body {
  display: grid;
  grid-template-columns: 1.15fr repeat(2, .9fr);
  grid-template-rows: 34px 71px 58px 1fr;
  gap: 9px;
  padding: 14px;
}

.ova-dashboard__body header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.ova-dashboard__body header b { margin-right: auto; }
.ova-dashboard__body header i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(205, 215, 255, .62);
}

.ova-health-card,
.ova-metric,
.ova-resources,
.ova-chart {
  border: 1px solid rgba(96, 117, 186, .31);
  border-radius: 8px;
  background: rgba(12, 22, 55, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.ova-health-card,
.ova-metric { padding: 10px; }
.ova-health-card small,
.ova-metric small,
.ova-chart small,
.ova-resources small {
  display: block;
  color: rgba(225, 231, 255, .7);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
}

.ova-health-card strong,
.ova-metric strong,
.ova-resources b {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
}

.ova-health-card em,
.ova-metric em {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.63);
  font-size: 7.4px;
  font-style: normal;
  line-height: 1.15;
  font-weight: 700;
}

.ova-health-card strong::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  border-radius: 50%;
  color: #fff;
  background: #16c560;
  font-size: 10px;
}

.ova-resources {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  padding: 9px 12px;
}

.ova-resources b { margin-top: 6px; font-size: 13px; }
.ova-resources i {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9a47ff var(--w), rgba(75, 95, 171, .5) 0);
}

.ova-chart {
  grid-column: 1 / -1;
  position: relative;
  padding: 10px 12px 7px;
}

.ova-chart > span {
  position: absolute;
  right: 12px;
  top: 11px;
  color: rgba(255,255,255,.58);
  font-size: 7.5px;
  font-weight: 800;
}

.ova-chart svg {
  width: 100%;
  height: 70px;
  margin-top: 5px;
}
.ova-chart path:first-child { fill: none; stroke: #8b3eff; stroke-width: 4; stroke-linecap: round; }
.ova-chart path:last-child { fill: rgba(101, 54, 255, .22); stroke: none; }

.ova-feature-strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 66px;
  margin: 8px 0 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(4, 9, 26, .66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.ova-feature-strip article {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 24px;
}

.ova-feature-strip article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 0;
  bottom: 17px;
  width: 1px;
  background: rgba(255, 255, 255, .17);
}

.ova-feature-strip svg { width: 36px; height: 36px; color: #fff; }
.ova-feature-strip svg *,
.ova-callout svg *,
.ova-why svg *,
.ova-workload-card svg *,
.ova-final-cta svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 761px) {
  .ova-why__title p,
  .ova-workloads__title p {
    display: none;
  }
}

.ova-feature-strip h2 {
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 900;
}

.ova-feature-strip p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 600;
}

.ova-section-container {
  width: var(--ova-section-container);
  margin: 0 auto;
}

.ova-why,
.ova-workloads {
  width: var(--ova-shell);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.78);
  border-radius: 6px;
}

.ova-freedom {
  --ova-freedom-height: clamp(820px, 56.34vw, 1040px);
  --ova-freedom-cyan: #56cfff;
  --ova-freedom-teal: #19e2c7;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 132px;
  width: 100%;
  min-height: var(--ova-freedom-height);
  margin: 0;
  overflow: hidden;
  color: #f4f7ff;
  background:
    radial-gradient(ellipse 44% 34% at 68% 72%, rgba(0, 197, 235, .13), transparent 72%),
    radial-gradient(ellipse 34% 44% at 96% 50%, rgba(12, 86, 141, .12), transparent 74%),
    linear-gradient(180deg, #020613 0%, #030817 60%, #020611 100%);
}

.ova-freedom::before,
.ova-freedom::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ova-freedom::before {
  z-index: -2;
  opacity: .25;
  background:
    linear-gradient(30deg, transparent 48.8%, rgba(47, 138, 196, .18) 49%, transparent 49.35%) 0 0 / 300px 172px,
    linear-gradient(150deg, transparent 48.8%, rgba(47, 138, 196, .12) 49%, transparent 49.35%) 0 0 / 300px 172px,
    radial-gradient(circle, rgba(61, 171, 222, .34) 0 1.2px, transparent 1.8px) 12% 17% / 118px 104px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 56%, transparent 86%);
}

.ova-freedom::after {
  z-index: -1;
  inset: auto 16% 88px 38%;
  height: 180px;
  opacity: .6;
  background: radial-gradient(ellipse, rgba(23, 211, 232, .28), transparent 70%);
  filter: blur(26px);
}

.ova-freedom__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  width: var(--cb-shell, min(calc(100% - 120px), 1520px));
  min-height: calc(var(--ova-freedom-height) - 132px);
  margin: 0 auto;
}

.ova-freedom__copy { translate: 0 40px; }

.ova-freedom__copy .ova-freedom__logo,
.ovastack-page .ova-why__title .ova-why__logo {
  position: static;
  margin: 0 0 18px;
}

.ova-section-eyebrow {
  margin: 0 0 36px;
  color: rgba(213, 218, 232, .75);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .3em;
  font-weight: 500;
  text-transform: uppercase;
}

.ova-freedom h2,
.ova-why h2,
.ova-workloads h2,
.ova-final-cta h2 {
  margin: 0;
  color: #07083f;
  letter-spacing: var(--cb-display-tracking);
  font-weight: var(--cb-display-weight);
}

.ova-freedom h2 {
  max-width: 540px;
  color: #f7f9ff;
  font-size: max(var(--cb-title-section-side, clamp(38px, 3.35vw, 56px)), min(4.1vw, 68px));
  line-height: 1.22;
  letter-spacing: -.055em;
  font-weight: 300;
}

.ova-freedom h2 span { display: block; }
.ova-freedom h2 span:last-child {
  width: fit-content;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ova-freedom__copy > p:last-of-type {
  max-width: 430px;
  margin: 36px 0 0;
  color: rgba(205, 208, 222, .72);
  font-size: clamp(19px, 1.3vw, 22px);
  line-height: 1.55;
  letter-spacing: -.02em;
  font-weight: 300;
}

.ova-freedom__link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 46px;
  margin-top: 36px;
  color: #8bd9ff;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  transition: color .25s ease, translate .25s ease;
}

.ova-freedom__link:hover {
  color: #c3edff;
  translate: 4px 0;
}

.ova-freedom__link svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ova-platform-scene {
  position: relative;
  min-width: 0;
  min-height: calc(var(--ova-freedom-height) - 132px);
  align-self: stretch;
}

.ova-control-plane {
  position: absolute;
  z-index: 1;
  left: 53%;
  top: 110px;
  width: min(100%, 880px);
  aspect-ratio: 1100 / 860;
  container-type: inline-size;
  transform: translateX(-50%);
}

.ova-control-plane__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 48%, #000 61%, rgba(0,0,0,.88) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 76% at 50% 48%, #000 61%, rgba(0,0,0,.88) 78%, transparent 100%);
}

.ova-plane-label,
.ova-plane-node,
.ova-plane-status {
  position: absolute;
  z-index: 2;
  color: rgba(207, 218, 232, .82);
  font-family: var(--font-family, 'Cerebri Sans'), Inter, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 3, 9, .96);
}

.ova-plane-label {
  translate: -50% -50%;
  font-size: clamp(7px, 1.05cqw, 10px);
  letter-spacing: .22em;
  font-weight: 400;
}

.ova-plane-label--top { left: 50%; top: 5.8%; }
.ova-plane-label--compute { left: 49.5%; top: 23.1%; }
.ova-plane-label--storage { left: 49.5%; top: 36.3%; }
.ova-plane-label--network { left: 49.5%; top: 50.8%; }
.ova-plane-label--workloads { left: 49.5%; top: 66.4%; color: rgba(143, 158, 180, .7); }

.ova-plane-node {
  top: 74.4%;
  translate: -50% -50%;
  color: rgba(172, 188, 208, .82);
  font-size: clamp(6px, .86cqw, 8px);
  letter-spacing: .08em;
}
.ova-plane-node--1 { left: 28.2%; }
.ova-plane-node--2 { left: 38.8%; }
.ova-plane-node--3 { left: 49.5%; }
.ova-plane-node--4 { left: 60.3%; }
.ova-plane-node--5 { left: 70.8%; }

.ova-plane-status {
  left: 25.4%;
  top: 85.2%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(6px, .86cqw, 8px);
  letter-spacing: .12em;
}

.ova-plane-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #13e3ad;
  box-shadow: 0 0 10px rgba(19, 227, 173, .72);
}

.ova-plane-status b {
  color: #13e3ad;
  font-weight: 600;
}

.ova-callout {
  position: absolute;
  z-index: 4;
  width: 196px;
  color: #dce6f5;
}

.ova-callout::before {
  content: "";
  position: absolute;
  top: 24px;
  width: clamp(110px, 12vw, 165px);
  height: 1px;
  opacity: .86;
  background: linear-gradient(90deg, #78bde8, #16d9dc);
}

.ova-callout::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fd6ff;
  box-shadow: 0 0 12px rgba(75, 202, 255, .5);
}

.ova-callout--evolve,
.ova-callout--simple { left: 32px; }
.ova-callout--auto,
.ova-callout--sovereign {
  right: -68px;
  width: 174px;
}
.ova-callout--evolve,
.ova-callout--auto { top: 245px; }
.ova-callout--simple,
.ova-callout--sovereign { bottom: 218px; }

.ova-callout--evolve::before,
.ova-callout--simple::before { left: 68px; }
.ova-callout--evolve::after,
.ova-callout--simple::after { left: 64px; }
.ova-callout--auto::before,
.ova-callout--sovereign::before { right: 68px; transform: scaleX(-1); }
.ova-callout--auto::after,
.ova-callout--sovereign::after { right: 64px; }

.ova-callout > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: rgba(190, 215, 239, .86);
}

.ova-callout svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ova-callout h3 {
  margin: 14px 0 0;
  color: #e8edf6;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
}

.ova-callout p {
  max-width: 188px;
  margin: 10px 0 0;
  color: rgba(198, 205, 219, .78);
  font-size: 17px;
  line-height: 1.42;
  letter-spacing: -.01em;
  font-weight: 300;
}

.ova-freedom__proofs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: var(--cb-shell, min(calc(100% - 120px), 1520px));
  min-height: 132px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid rgba(126, 159, 191, .14);
  list-style: none;
}

.ova-freedom__proofs li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  padding: 0 30px;
  border-right: 1px solid rgba(126, 159, 191, .13);
  color: rgba(203, 207, 220, .72);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.ova-freedom__proofs li:last-child { border-right: 0; }

.ova-freedom__proofs svg {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  fill: none;
  stroke: rgba(194, 214, 235, .78);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ova-freedom__proofs i {
  position: absolute;
  left: 72px;
  top: calc(50% + 13px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16e3aa;
  box-shadow: 0 0 10px rgba(22, 227, 170, .52);
}

.ova-why {
  min-height: 141px;
  padding: 15px 0 10px;
  background: linear-gradient(90deg, #fbfbff 0%, #fff 48%, #f5f4ff 100%);
}

.ova-why__grid {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
}

.ova-why h2 {
  font-size: clamp(22px, 1.95vw, 30px);
  line-height: 1.05;
}
.ova-why h2 span { display: block; }
.ova-why h2 span:last-child { color: var(--ova-accent); }

.ova-why__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.ova-why__cards article {
  position: relative;
  min-height: 104px;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 14px 13px 12px;
  border: 1px solid var(--ova-card-border);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 26px rgba(19, 20, 94, .06);
  text-align: center;
}

.ova-why__cards article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #2d20ff, #7f35ff);
}

.ova-why__cards span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ova-accent);
}
.ova-why__cards svg { width: 31px; height: 31px; }
.ova-why__cards h3 { margin: 7px 0 0; color: #07083f; font-size: 12px; line-height: 1.08; letter-spacing: -.022em; font-weight: 900; }
.ova-why__cards p { margin: 6px 0 0; color: #172060; font-size: 10.3px; line-height: 1.32; font-weight: 600; }

.ova-workloads {
  padding: 15px 0 24px;
  background:
    radial-gradient(ellipse 340px 170px at 93% 89%, rgba(224, 221, 255, .95), transparent 70%),
    linear-gradient(90deg, #fbfbff 0%, #fff 48%, #f4f3ff 100%);
}

.ova-workloads__grid {
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 10px;
  align-items: start;
}

.ova-workloads__title h2 {
  max-width: 220px;
  padding-top: 22px;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.08;
}

.ova-workload-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ova-workload-card {
  position: relative;
  height: 124px;
  min-height: 124px;
  display: grid;
  align-content: start;
  overflow: hidden;
  border-radius: 7px;
  padding: 14px 15px 11px;
  color: #fff;
  isolation: isolate;
  background: linear-gradient(135deg, #143bd9 0%, #171099 100%);
  box-shadow: 0 15px 32px rgba(18, 18, 100, .13);
}

.ova-workload-card::before,
.ova-workload-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ova-workload-card::before { background: radial-gradient(circle at 94% 6%, rgba(255,255,255,.34), transparent 30%); opacity: .7; }
.ova-workload-card--security { background: linear-gradient(135deg, #4a1fff 0%, #a612d7 100%); }
.ova-workload-card--control,
.ova-workload-card--trust { background: #071124; }
.ova-workload-card--control::after {
  background: linear-gradient(90deg, rgba(5, 9, 25, .78), rgba(5, 9, 25, .18)), url('/assets/ovastack/ovastack-card-pilotage-20260708.png') right center / auto 100% no-repeat;
  opacity: .98;
}
.ova-workload-card--trust::after {
  background: linear-gradient(90deg, rgba(5, 9, 25, .86), rgba(5, 9, 25, .14)), url('/assets/ovastack/ovastack-card-trust-20260708.png') right center / auto 100% no-repeat;
  opacity: .98;
}

.ova-workload-card > span { width: 31px; height: 31px; color: #fff; }
.ova-workload-card svg { width: 31px; height: 31px; }
.ova-workload-card h3 { margin: 7px 0 0; color: #fff; font-size: 16px; line-height: 1; letter-spacing: -.04em; font-weight: 900; }
.ova-workload-card p { max-width: 178px; margin: 6px 0 0; color: rgba(255,255,255,.92); font-size: 9.8px; line-height: 1.22; font-weight: 650; }
.ova-workload-card a { margin-top: 9px; color: #fff; text-decoration: none; font-size: 9.8px; font-weight: 900; }

.ova-final-cta {
  position: relative;
  grid-column: 2;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 96px;
  align-items: center;
  gap: 14px;
  margin-top: -8px;
  padding: 7px 18px 7px 14px;
  border: 1px solid rgba(214, 218, 245, .82);
  border-radius: 9px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 32px rgba(21, 19, 99, .06);
}

.ova-final-cta__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ova-accent);
  border-radius: 50%;
  background: #eeeaff;
}
.ova-final-cta__icon svg { width: 21px; height: 21px; }
.ova-final-cta h2 { max-width: none; padding-top: 0; font-size: 15.5px; line-height: 1.05; letter-spacing: -.03em; }
.ova-final-cta p { margin: 3px 0 0; color: #172060; font-size: 10.3px; line-height: 1.2; font-weight: 600; }
.ova-final-cta .btn { min-height: 34px; border-radius: 6px; padding: 0 18px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.ova-final-cta .btn svg { width: 16px; height: 16px; }
.ova-dot-grid {
  width: 96px;
  height: 42px;
  opacity: .46;
  background: radial-gradient(circle, #6c5bff 0 1.3px, transparent 1.6px) 0 0 / 14px 14px;
}

.ovastack-page .site-footer {
  margin-top: 56px;
}

@media (min-width: 1600px) {
  .ovastack-page {
    --ova-shell: min(calc(100% - 8px), 1536px);
  }
}

@media (max-width: 1320px) and (min-width: 1121px) {
  .ovastack-page {
    --ova-hero-container: min(calc(100% - 80px), 1200px);
    --ova-section-container: min(calc(100% - 86px), 1116px);
  }
  .ovastack-page .site-nav { gap: 26px; }
  .ovastack-page .header-actions { gap: 16px; }
  .ovastack-hero { grid-template-columns: 440px minmax(0,1fr); }
  .ova-dashboard { width: 470px; }
  .ova-server-scene { width: 390px; right: -44px; }
  .ova-feature-strip article { padding-inline: 16px; gap: 10px; }
}

@media (max-width: 1120px) {
  .ovastack-page {
    --ova-shell: min(calc(100% - 8px), 100%);
    --ova-hero-container: min(calc(100% - 40px), 980px);
    --ova-section-container: min(calc(100% - 40px), 980px);
  }
  .ovastack-page .site-header { height: auto; min-height: 72px; }
  .ovastack-page .site-header__inner { width: var(--ova-hero-container); height: auto; min-height: 72px; grid-template-columns: 1fr auto; }
  .ovastack-page .menu-toggle { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
  .ovastack-page .site-nav,
  .ovastack-page .header-actions { grid-column: 1 / -1; }
  .ovastack-page .site-nav { justify-content: stretch; gap: 8px; }
  .ovastack-page .site-nav a,
  .ovastack-page .nav-trigger { background: rgba(255,255,255,.08); color: #fff; }
  .ovastack-page .header-actions { justify-content: space-between; }
  .ova-dark-fold__inner { width: var(--ova-hero-container); }
  .ovastack-hero { grid-template-columns: 1fr; min-height: 0; gap: 26px; }
  .ovastack-hero__copy { max-width: 720px; }
  .ova-lead { max-width: 680px; }
  .ovastack-hero__visual { height: 340px; }
  .ova-dashboard { left: 0; width: min(620px, 72vw); height: 300px; }
  .ova-server-scene { right: 0; top: -20px; width: min(430px, 46vw); }
  .ova-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
  .ova-feature-strip article:nth-child(2n)::after,
  .ova-feature-strip article:last-child::after { display: none; }
  .ova-feature-strip article:last-child { grid-column: 1 / -1; }
  .ova-why__grid,
  .ova-workloads__grid { grid-template-columns: 1fr; gap: 24px; }
  .ova-workloads__title h2 { max-width: 720px; }
  .ova-freedom {
    display: block;
    min-height: 0;
  }
  .ova-freedom__layout {
    grid-template-columns: 1fr;
    gap: 44px;
    width: min(calc(100% - 48px), 920px);
    min-height: 0;
    padding: 96px 0 54px;
  }
  .ova-freedom__copy {
    max-width: 720px;
    translate: none;
  }
  .ova-freedom__copy > p:last-of-type { max-width: 680px; }
  .ova-platform-scene {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    min-height: 0;
  }
  .ova-control-plane {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: min(100%, 780px);
    margin: 0 auto 16px;
    transform: none;
  }
  .ova-callout {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    min-height: 154px;
    padding: 22px;
    border: 1px solid rgba(118, 160, 197, .14);
    border-radius: 18px;
    background: rgba(6, 16, 31, .58);
  }
  .ova-callout::before,
  .ova-callout::after { display: none; }
  .ova-callout p { max-width: 300px; }
  .ova-freedom__proofs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(calc(100% - 48px), 920px);
    min-height: 0;
    padding: 0 0 42px;
  }
  .ova-freedom__proofs li {
    min-height: 104px;
    border-bottom: 1px solid rgba(126, 159, 191, .13);
  }
  .ova-freedom__proofs li:nth-child(2n) { border-right: 0; }
  .ova-why__cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ova-why__cards article:last-child { grid-column: 1 / -1; }
  .ova-workloads__title h2 { padding-top: 0; }
  .ova-workload-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ova-final-cta { grid-column: 1; grid-template-columns: 46px minmax(0,1fr) auto; }
  .ova-dot-grid { display: none; }
}

@media (max-width: 760px) {
  .ovastack-page {
    --ova-hero-container: min(calc(100% - 28px), 560px);
    --ova-section-container: min(calc(100% - 28px), 560px);
  }
  .ovastack-page .language-select select { width: 70px; }
  .ovastack-page .site-header { margin-top: 0; width: 100%; border-radius: 0; }
  .ovastack-page .brand.ova-logo { font-size: 26px; }
  .ova-dark-fold { width: 100%; border-radius: 0 0 16px 16px; }
  .ova-dark-fold__inner { padding-top: 14px; padding-bottom: 18px; }
  .page-breadcrumb { flex-wrap: wrap; font-size: 11px; }
  .ova-kicker { max-width: 100%; white-space: normal; line-height: 1.3; padding-block: 6px; }
  .ovastack-hero h1 {
    max-width: 100%;
    font-size: clamp(29px, 9.1vw, 38px);
    line-height: var(--cb-display-leading);
    letter-spacing: var(--cb-display-tracking);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .ovastack-hero h1 > span:last-child { white-space: normal; }
  .ovastack-hero h1 .accent { font-size: 1em; }
  .ova-lead { font-size: 15.5px; }
  .ova-actions { flex-direction: column; align-items: stretch; }
  .ova-actions .btn { width: 100%; }
  .ovastack-hero__visual { height: auto; min-height: 505px; overflow: hidden; }
  .ova-dashboard { position: relative; width: 100%; height: auto; min-height: 330px; grid-template-columns: 78px minmax(0,1fr); }
  .ova-dashboard__rail { padding-inline: 8px; font-size: 7px; }
  .ova-dashboard__rail strong { font-size: 14px; }
  .ova-dashboard__body { grid-template-columns: 1fr 1fr; grid-template-rows: 34px repeat(4, auto); padding: 10px; }
  .ova-health-card { grid-column: span 2; }
  .ova-resources { grid-template-columns: 1fr 1fr; }
  .ova-chart { grid-column: span 2; }
  .ova-server-scene { right: -96px; top: 285px; width: 430px; opacity: .74; }
  .ova-feature-strip { grid-template-columns: 1fr; border-radius: 16px; }
  .ova-feature-strip article { padding: 15px 18px; }
  .ova-feature-strip article::after { display: none; }
  .ova-feature-strip article:last-child { grid-column: auto; }
  .ova-why,
  .ova-workloads { width: 100%; border-radius: 0; }
  .ova-freedom__layout {
    gap: 34px;
    width: min(calc(100% - 36px), 560px);
    padding: 76px 0 34px;
  }
  .ova-section-eyebrow {
    margin-bottom: 24px;
    font-size: 12px;
    line-height: 1.45;
  }
  .ova-freedom h2 {
    max-width: 100%;
    font-size: var(--cb-title-section-side, clamp(38px, 9vw, 44px));
    line-height: 1.08;
  }
  .ova-freedom__copy > p:last-of-type {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.55;
  }
  .ova-freedom__link {
    margin-top: 26px;
    font-size: 18px;
  }
  .ova-platform-scene {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ova-control-plane {
    grid-column: auto;
    width: 100%;
    margin-bottom: 8px;
  }
  .ova-plane-label--top,
  .ova-plane-label--workloads,
  .ova-plane-node,
  .ova-plane-status { display: none; }
  .ova-plane-label {
    font-size: clamp(6px, 1.8cqw, 8px);
    letter-spacing: .14em;
  }
  .ova-callout {
    min-height: 0;
    padding: 20px;
  }
  .ova-callout > span { width: 44px; height: 44px; }
  .ova-callout svg { width: 40px; height: 40px; }
  .ova-callout h3 { margin-top: 12px; font-size: 13px; }
  .ova-callout p { font-size: 16px; }
  .ova-freedom__proofs {
    grid-template-columns: 1fr;
    width: min(calc(100% - 36px), 560px);
    padding-bottom: 32px;
  }
  .ova-freedom__proofs li {
    min-height: 88px;
    padding: 0 14px;
    border-right: 0;
  }
  .ova-freedom__proofs svg {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .ova-freedom__proofs i {
    left: 46px;
    top: calc(50% + 12px);
  }
  .ova-why { padding: 30px 0 22px; }
  .ova-why__cards { grid-template-columns: 1fr; }
  .ova-why__cards article:last-child { grid-column: auto; }
  .ova-workloads { padding: 30px 0 34px; }
  .ova-workload-cards { grid-template-columns: 1fr; }
  .ova-workload-card { min-height: 150px; border-radius: 16px; padding: 22px; }
  .ova-workload-card p { max-width: 260px; font-size: 12.5px; }
  .ova-final-cta { grid-template-columns: 44px minmax(0,1fr); gap: 14px; padding: 16px; border-radius: 16px; }
  .ova-final-cta .btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 420px) {
  .ova-dashboard { grid-template-columns: 1fr; }
  .ova-dashboard__rail { display: none; }
  .ovastack-hero__visual { min-height: 480px; }
  .ova-server-scene { top: 300px; width: 380px; }
}

/* Desktop long-form reset: the supplied screenshot defines the visual language,
   while each narrative block remains a full, breathable page section. */
@media (min-width: 1121px) {
  .ovastack-page {
    --ova-shell: min(calc(100% - 188px), 1720px);
    --ova-hero-container: min(calc(100% - 240px), 1480px);
    --ova-section-container: min(calc(100% - 400px), 1320px);
  }

  .ovastack-page .site-header {
    height: 78px;
    margin-top: 0;
    border-radius: 0;
  }

  .ovastack-page .site-header__inner {
    width: var(--ova-hero-container);
    height: 78px;
    grid-template-columns: 250px minmax(0, 1fr) auto;
    gap: 28px;
  }

  .ovastack-page .site-header .brand__logo-img.cb-logo-2026 {
    width: 204px !important;
    min-width: 204px !important;
    height: 32px !important;
  }

  .ovastack-page .site-nav {
    gap: clamp(32px, 3vw, 54px);
    font-size: 14px;
  }

  .ovastack-page .language-select select {
    width: 58px;
    height: 42px;
    border-radius: 12px;
    font-size: 14px;
  }

  .ovastack-page .login-link { font-size: 14px; }

  .ovastack-page .header-cta {
    min-width: 210px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
  }

  .ova-dark-fold {
    min-height: 785px;
    margin: 0 auto;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 28px 72px rgba(3, 6, 22, .18);
  }

  .ova-dark-fold__inner {
    width: var(--ova-hero-container);
    min-height: 785px;
    display: flex;
    flex-direction: column;
    padding: 26px 0 36px;
  }

  .page-breadcrumb {
    min-height: 24px;
    margin-bottom: 26px;
    font-size: 14px;
  }

  .ovastack-hero {
    flex: 1;
    grid-template-columns: minmax(520px, .86fr) minmax(640px, 1.14fr);
    gap: clamp(36px, 4vw, 70px);
    min-height: 490px;
    align-items: center;
  }

  .ovastack-hero__copy {
    max-width: 700px;
    padding-top: 0;
  }

  .ova-kicker {
    min-height: 30px;
    margin-bottom: 26px;
    padding: 0 17px 0 13px;
    font-size: 12px;
  }

  .ovastack-hero h1 {
    max-width: 760px;
    font-size: clamp(60px, 3.9vw, 76px);
    line-height: .91;
    letter-spacing: var(--cb-display-tracking);
  }

  .ovastack-hero h1 > span:last-child {
    font-size: .72em;
    line-height: 1.02;
  }

  .ova-lead {
    max-width: 650px;
    margin-top: 28px;
    font-size: clamp(18px, 1vw, 20px);
    line-height: 1.55;
  }

  .ova-actions {
    gap: 18px;
    margin-top: 32px;
  }

  .ova-actions .btn {
    min-height: 50px;
    border-radius: 12px;
    padding: 0 26px;
    font-size: 14px;
  }

  .ova-actions .btn--large { min-width: 212px; }

  .ovastack-hero__visual {
    height: 500px;
    overflow: visible;
  }

  .ova-server-scene {
    right: -34px;
    top: -18px;
    width: min(620px, 50vw);
    height: auto;
    opacity: .98;
  }

  .ova-dashboard {
    left: 74px;
    top: 38px;
    width: 510px;
    height: 300px;
    transform: scale(1.35);
    transform-origin: left top;
  }

  .ova-feature-strip {
    min-height: 98px;
    margin-top: 26px;
    border-radius: 18px;
  }

  .ova-feature-strip article {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 28px;
  }

  .ova-feature-strip svg { width: 44px; height: 44px; }
  .ova-feature-strip h2 { font-size: 16px; }
  .ova-feature-strip p { font-size: 13.5px; line-height: 1.3; }

  .ova-why,
  .ova-workloads {
    margin: 28px auto 0;
    border: 0;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 58px rgba(21, 19, 99, .065);
  }

  .ova-why {
    min-height: 470px;
    padding: 82px 0;
  }

  .ova-why__grid {
    grid-template-columns: minmax(290px, .52fr) minmax(860px, 1.48fr);
    gap: 54px;
  }

  .ova-why h2 {
    font-size: var(--cb-title-section-side, clamp(38px, 3.35vw, 56px));
    line-height: 1;
  }

  .ova-why__title p,
  .ova-workloads__title p {
    display: block;
    max-width: 760px;
    margin: 22px 0 0;
    color: #172060;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 600;
  }

  .ova-why__cards { gap: 20px; }

  .ova-why__cards article {
    min-height: 205px;
    padding: 30px 22px 26px;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(19, 20, 94, .08);
  }

  .ova-why__cards span { width: 58px; height: 58px; }
  .ova-why__cards svg { width: 48px; height: 48px; }
  .ova-why__cards h3 { margin-top: 18px; font-size: 17px; }
  .ova-why__cards p { margin-top: 12px; font-size: 13.5px; line-height: 1.45; }

  .ova-workloads {
    min-height: 760px;
    padding: 86px 0 92px;
  }

  .ova-workloads__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .ova-workloads__title h2 {
    max-width: 900px;
    padding-top: 0;
    font-size: var(--cb-title-section, clamp(42px, 5.7vw, 76px));
    line-height: .98;
  }

  .ova-workloads__title p {
    max-width: 780px;
    margin-top: 26px;
  }

  .ova-workload-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .ova-workload-card {
    height: 261px;
    min-height: 261px;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    padding: 30px 28px 30px;
    box-shadow: 0 24px 56px rgba(18, 18, 100, .16);
  }

  .ova-workload-card--control::after,
  .ova-workload-card--trust::after {
    background-size: cover;
    background-position: center;
  }

  .ova-workload-card--trust::after {
    background-position: left center;
    background-size: 132% auto;
  }

  .ova-workload-card > span,
  .ova-workload-card svg { width: 48px; height: 48px; }
  .ova-workload-card h3 { margin-top: 22px; font-size: 27px; }
  .ova-workload-card p { max-width: 260px; margin-top: 14px; font-size: 14px; line-height: 1.42; }
  .ova-workload-card a { margin-top: auto; padding-top: 18px; font-size: 13px; }

  .ova-final-cta {
    width: min(100%, 1120px);
    min-height: 116px;
    grid-column: auto;
    grid-template-columns: 66px minmax(0, 1fr) auto 140px;
    gap: 24px;
    margin: 7px auto 0;
    padding: 24px 34px 24px 26px;
    border-radius: 26px;
    box-shadow: 0 24px 58px rgba(21, 19, 99, .10);
  }

  .ova-final-cta__icon { width: 58px; height: 58px; }
  .ova-final-cta__icon svg { width: 30px; height: 30px; }
  .ova-final-cta h2 { max-width: none; padding-top: 0; font-size: var(--cb-title-cta, 30px); }
  .ova-final-cta p { margin-top: 8px; font-size: 15px; }
  .ova-final-cta .btn { min-height: 48px; padding: 0 26px; font-size: 14px; }
  .ova-dot-grid { width: 140px; height: 62px; }

  .ovastack-page .site-footer { margin-top: 96px; }
}

@media (min-width: 1121px) and (max-width: 1450px) {
  .ovastack-page {
    --ova-shell: min(calc(100% - 32px), 1380px);
    --ova-hero-container: min(calc(100% - 80px), 1240px);
    --ova-section-container: min(calc(100% - 80px), 1200px);
  }

  .ovastack-page .site-header__inner { grid-template-columns: 220px minmax(0, 1fr) auto; gap: 18px; }
  .ovastack-page .site-nav { gap: 22px; font-size: 13px; }
  .ovastack-hero { grid-template-columns: minmax(450px, .9fr) minmax(560px, 1.1fr); gap: 26px; }
  .ovastack-hero h1 { font-size: clamp(50px, 4vw, 60px); }
  .ova-lead { font-size: 16px; }
  .ova-dashboard { left: 30px; transform: scale(1.16); }
  .ova-server-scene { width: 480px; right: -46px; }
  .ova-freedom__layout {
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 32px;
  }
  .ova-freedom__copy > p:last-of-type { font-size: 18px; }
  .ova-control-plane {
    top: 124px;
    width: min(100%, 760px);
  }
  .ova-callout { width: 166px; }
  .ova-callout p { font-size: 15px; }
  .ova-callout--evolve,
  .ova-callout--simple { left: 0; }
  .ova-callout--auto,
  .ova-callout--sovereign { right: 0; }
  .ova-callout--evolve,
  .ova-callout--auto { top: 224px; }
  .ova-callout--simple,
  .ova-callout--sovereign { bottom: 164px; }
  .ova-freedom__proofs li {
    gap: 18px;
    padding-inline: 18px;
    font-size: 13px;
  }
  .ova-freedom__proofs i { left: 60px; }
  .ova-why__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 34px; }
  .ova-why__cards { gap: 14px; }
  .ova-why__cards article { padding-inline: 15px; }
  .ova-workload-card { padding: 24px; }
  .ova-workload-card h3 { font-size: 23px; }
}

/* ===== Ovastack · Le contrôle du privé (référence 1672 × 941) ===== */
.ovastack-page .ova-why {
  --ova-why-stage-w: min(60.53vw, 1012px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 129px;
  width: 100%;
  min-height: 941px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #f2f5fa;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 42% 38% at 75% 52%, rgba(7, 72, 104, .22), transparent 70%),
    radial-gradient(ellipse 30% 42% at 3% 56%, rgba(3, 29, 57, .24), transparent 70%),
    linear-gradient(135deg, #020611 0%, #030914 50%, #01050e 100%);
  box-shadow: none;
}

.ovastack-page .ova-why::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background:
    linear-gradient(30deg, transparent 49.6%, rgba(38, 104, 142, .18) 49.9%, transparent 50.2%) 0 0 / 360px 208px,
    linear-gradient(150deg, transparent 49.6%, rgba(38, 104, 142, .13) 49.9%, transparent 50.2%) 0 0 / 360px 208px,
    radial-gradient(circle, rgba(53, 131, 170, .3) 0 1px, transparent 1.5px) 6% 13% / 116px 102px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .64) 61%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .64) 61%, transparent 92%);
}

.ovastack-page .ova-why__grid {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 812px;
  margin: 0;
}

.ovastack-page .ova-why__title {
  position: absolute;
  z-index: 3;
  top: 194px;
  left: clamp(36px, 4.07vw, 68px);
  width: min(32vw, 540px);
  translate: 0 0;
}

.ovastack-page .ova-why__title .ova-section-eyebrow {
  margin: 0 0 39px;
  color: rgba(224, 219, 214, .86);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: .34em;
  font-weight: 500;
  text-transform: uppercase;
}

.ovastack-page .ova-why h2 {
  margin: 0;
  color: #f6f3ee;
  font-size: clamp(46px, 4.16vw, 70px);
  line-height: 1.16;
  letter-spacing: var(--cb-display-tracking);
  font-weight: var(--cb-display-weight);
}

.ovastack-page .ova-why h2 span { display: block; }
.ovastack-page .ova-why h2 span:last-child {
  width: fit-content;
  color: #38d3f2;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ovastack-page .ova-why__lead {
  max-width: 535px;
  margin: 37px 0 0;
  color: rgba(211, 208, 208, .78);
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.62;
  letter-spacing: -.018em;
  font-weight: 300;
}

.ovastack-page .ova-why__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  margin-top: 35px;
  color: #7fdbff;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  transition: color .25s ease, translate .25s ease;
}

.ovastack-page .ova-why__link:hover { color: #d1f4ff; translate: 4px 0; }
.ovastack-page .ova-why__link svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovastack-page .ova-why__visual {
  --ova-why-par-x: 0px;
  --ova-why-par-y: 0px;
  position: absolute;
  z-index: 2;
  top: 90px;
  left: 37.08vw;
  width: var(--ova-why-stage-w);
  aspect-ratio: 1012 / 716;
  container-type: inline-size;
  translate: var(--ova-why-par-x) var(--ova-why-par-y);
  transition: translate .6s cubic-bezier(.16, 1, .3, 1);
}

.ovastack-page .ova-why__stage {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  pointer-events: none;
  animation: ova-why-stage-breathe 9s ease-in-out infinite;
}

.ovastack-page .ova-why__stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .98;
}

.ovastack-page .ova-why__cards {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.ovastack-page .ova-why__card,
.ovastack-page .ova-why__core {
  position: absolute;
  display: grid;
  justify-items: center;
  align-content: start;
  overflow: hidden;
  box-sizing: border-box;
  color: #f0f2f6;
  border: 1px solid rgba(161, 181, 196, .6);
  border-radius: clamp(9px, 1.33cqw, 14px);
  background: linear-gradient(135deg, #1b2a38 0%, #0d1621 57%, #060c14 100%);
  box-shadow:
    0 6px 0 rgba(8, 18, 28, .96),
    0 11px 0 rgba(5, 13, 21, .92),
    0 15px 20px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(238, 247, 255, .12);
  text-align: center;
  pointer-events: auto;
}

.ovastack-page .ova-why__card::before,
.ovastack-page .ova-why__core::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, .1), transparent 37%),
    linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 27%);
}

.ovastack-page .ova-why__card::after,
.ovastack-page .ova-why__core::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 0;
  left: 7%;
  height: clamp(1px, .18cqw, 2px);
  background: #21e7ee;
  box-shadow: 0 0 12px rgba(27, 230, 245, .9), 0 0 26px rgba(15, 173, 255, .42);
}

.ovastack-page .ova-why__card--modular { top: 10.5%; left: 11.75%; width: 19.8%; height: 29.5%; }
.ovastack-page .ova-why__card--billing { top: 3.05%; left: 40.5%; width: 19.9%; height: 25.15%; }
.ovastack-page .ova-why__card--sovereign { top: 10.5%; left: 69.2%; width: 19.8%; height: 29.5%; }
.ovastack-page .ova-why__card--performance { top: 53.65%; left: 11.75%; width: 19.8%; height: 29.5%; }
.ovastack-page .ova-why__card--managed { top: 53.65%; left: 69.2%; width: 19.8%; height: 29.5%; }

.ovastack-page .ova-why__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(27px, 4.3cqw, 44px);
  height: clamp(27px, 4.3cqw, 44px);
  margin-top: clamp(14px, 2.35cqw, 24px);
  color: rgba(249, 249, 247, .96);
}

.ovastack-page .ova-why__icon::after {
  content: "";
  position: absolute;
  bottom: clamp(-10px, -1.3cqw, -5px);
  left: 50%;
  width: clamp(5px, .74cqw, 8px);
  height: clamp(5px, .74cqw, 8px);
  border-radius: 50%;
  background: #18e6b0;
  box-shadow: 0 0 10px rgba(22, 230, 174, .86);
  translate: -50% 0;
}

.ovastack-page .ova-why__card svg,
.ovastack-page .ova-why__proofs svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovastack-page .ova-why__card h3 {
  position: relative;
  z-index: 1;
  margin: clamp(10px, 1.7cqw, 17px) 7px 0;
  color: #f2f1ed;
  font-size: clamp(9px, 1.2cqw, 12px);
  line-height: 1.16;
  letter-spacing: .075em;
  font-weight: 700;
  text-transform: uppercase;
}

.ovastack-page .ova-why__card p {
  position: relative;
  z-index: 1;
  max-width: 86%;
  margin: clamp(8px, 1.35cqw, 13px) 0 0;
  color: rgba(221, 221, 218, .8);
  font-size: clamp(8px, 1.12cqw, 11.4px);
  line-height: 1.52;
  letter-spacing: -.016em;
  font-weight: 300;
}

.ovastack-page .ova-why__card--performance h3 {
  font-size: clamp(8.5px, 1.05cqw, 10.8px);
  letter-spacing: .055em;
  white-space: nowrap;
}

.ovastack-page .ova-why__core {
  top: 39%;
  left: 39.15%;
  width: 22.55%;
  height: 22.55%;
  align-content: center;
  padding-bottom: clamp(10px, 1.45cqw, 15px);
}

.ovastack-page .ova-why__core h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #f0efec;
  font-size: clamp(12px, 1.85cqw, 19px);
  line-height: 1;
  letter-spacing: .18em;
  font-weight: 400;
  text-transform: uppercase;
}

.ovastack-page .ova-why__core p {
  position: relative;
  z-index: 1;
  max-width: 80%;
  margin: clamp(9px, 1.35cqw, 14px) 0 0;
  color: rgba(234, 235, 231, .82);
  font-size: clamp(7px, .92cqw, 9px);
  line-height: 1.45;
  letter-spacing: .14em;
  font-weight: 400;
  text-transform: uppercase;
}

.ovastack-page .ova-why__core i {
  position: relative;
  z-index: 1;
  width: clamp(5px, .8cqw, 8px);
  height: clamp(5px, .8cqw, 8px);
  margin-top: clamp(9px, 1.35cqw, 14px);
  border-radius: 50%;
  background: #18e6b0;
  box-shadow: 0 0 11px rgba(22, 230, 174, .92);
  animation: ova-why-status-pulse 2.4s ease-in-out infinite;
}

.ovastack-page .ova-why__proofs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: calc(100% - 72px);
  min-height: 129px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid rgba(128, 151, 169, .18);
  list-style: none;
}

.ovastack-page .ova-why__proofs li {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.7vw, 27px);
  min-width: 0;
  padding: 0 clamp(16px, 4.05vw, 68px);
  border-right: 1px solid rgba(128, 151, 169, .19);
  color: rgba(221, 217, 213, .77);
  font-size: clamp(11px, .93vw, 15px);
  line-height: 1.2;
  letter-spacing: .105em;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.ovastack-page .ova-why__proofs li:last-child { border-right: 0; }
.ovastack-page .ova-why__proofs svg {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  color: rgba(235, 234, 230, .8);
}
.ovastack-page .ova-why__proofs li > i {
  position: absolute;
  top: calc(50% + 14px);
  left: clamp(46px, 6.13vw, 102px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18e6b0;
  box-shadow: 0 0 10px rgba(22, 230, 174, .82);
}

@keyframes ova-why-stage-breathe {
  0%, 100% { opacity: .98; scale: 1; }
  50% { opacity: 1; scale: 1.008; }
}
@keyframes ova-why-status-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(22, 230, 174, .58); }
  50% { box-shadow: 0 0 16px rgba(22, 230, 174, .98); }
}

@media (max-width: 1120px) {
  .ovastack-page .ova-why {
    display: block;
    min-height: 0;
    padding: 86px 0 0;
  }
  .ovastack-page .ova-why__grid {
    width: min(calc(100% - 64px), 780px);
    min-height: 0;
    margin: 0 auto;
  }
  .ovastack-page .ova-why__title {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 620px);
  }
  .ovastack-page .ova-why__title .ova-section-eyebrow { margin-bottom: 25px; }
  .ovastack-page .ova-why h2 { font-size: var(--cb-title-section-side, clamp(42px, 7.2vw, 62px)); }
  .ovastack-page .ova-why__lead { max-width: 620px; margin-top: 26px; }
  .ovastack-page .ova-why__link { margin-top: 25px; }
  .ovastack-page .ova-why__visual {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 760px);
    min-height: 470px;
    margin: 54px auto 0;
    aspect-ratio: auto;
    translate: 0 0;
  }
  .ovastack-page .ova-why__visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12% 5% 8%;
    border: 1px solid rgba(76, 164, 197, .3);
    border-radius: 50%;
    background:
      repeating-radial-gradient(ellipse at center, transparent 0 44px, rgba(48, 161, 193, .14) 45px 46px, transparent 47px 92px),
      radial-gradient(circle at center, rgba(15, 152, 199, .17), transparent 50%);
    box-shadow: 0 0 56px rgba(11, 181, 224, .16);
  }
  .ovastack-page .ova-why__stage { display: none; }
  .ovastack-page .ova-why__cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    inset: auto;
    padding: 56px 0 28px;
  }
  .ovastack-page .ova-why__card,
  .ovastack-page .ova-why__core {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 212px;
    padding: 26px 16px 20px;
    border-radius: 14px;
  }
  .ovastack-page .ova-why__card { grid-column: span 2; }
  .ovastack-page .ova-why__core {
    grid-column: 3 / span 2;
    grid-row: 1;
    min-height: 212px;
    padding: 22px 16px;
  }
  .ovastack-page .ova-why__card--performance { grid-column: 2 / span 2; }
  .ovastack-page .ova-why__card--managed { grid-column: 4 / span 2; }
  .ovastack-page .ova-why__icon { width: 42px; height: 42px; margin-top: 0; }
  .ovastack-page .ova-why__icon::after { bottom: -9px; width: 7px; height: 7px; }
  .ovastack-page .ova-why__card h3 { margin-top: 16px; font-size: 12px; }
  .ovastack-page .ova-why__card p { max-width: 94%; margin-top: 11px; font-size: 12px; }
  .ovastack-page .ova-why__core h3 { font-size: 18px; }
  .ovastack-page .ova-why__core p { font-size: 9px; }
  .ovastack-page .ova-why__proofs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(calc(100% - 64px), 780px);
    min-height: 108px;
    margin-top: 18px;
  }
  .ovastack-page .ova-why__proofs li { padding-inline: 10px; gap: 10px; font-size: 10px; }
  .ovastack-page .ova-why__proofs svg { width: 32px; height: 32px; flex-basis: 32px; }
  .ovastack-page .ova-why__proofs li > i { top: calc(50% + 11px); left: 40px; width: 6px; height: 6px; }
}

@media (max-width: 640px) {
  .ovastack-page .ova-why { padding-top: 68px; }
  .ovastack-page .ova-why__grid { width: min(calc(100% - 36px), 560px); }
  .ovastack-page .ova-why__title .ova-section-eyebrow { margin-bottom: 20px; font-size: 11px; letter-spacing: .27em; }
  .ovastack-page .ova-why h2 { font-size: var(--cb-title-section-side, clamp(40px, 11vw, 50px)); line-height: 1.08; }
  .ovastack-page .ova-why__lead { margin-top: 24px; font-size: 17px; line-height: 1.55; }
  .ovastack-page .ova-why__link { margin-top: 22px; font-size: 17px; }
  .ovastack-page .ova-why__visual { min-height: 0; margin-top: 38px; }
  .ovastack-page .ova-why__visual::before { inset: 7% -8% 3%; }
  .ovastack-page .ova-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 42px 0 16px; }
  .ovastack-page .ova-why__card { grid-column: auto !important; min-height: 214px; padding: 22px 10px 16px; }
  .ovastack-page .ova-why__core { grid-column: 1 / -1; grid-row: auto; min-height: 154px; padding: 20px; }
  .ovastack-page .ova-why__card h3 { margin-top: 14px; font-size: 10px; letter-spacing: .075em; }
  .ovastack-page .ova-why__card--performance h3 { font-size: 9px; }
  .ovastack-page .ova-why__card p { max-width: 100%; margin-top: 10px; font-size: 10px; line-height: 1.45; }
  .ovastack-page .ova-why__core h3 { font-size: 16px; }
  .ovastack-page .ova-why__core p { font-size: 8px; }
  .ovastack-page .ova-why__proofs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(calc(100% - 36px), 560px);
    min-height: 0;
    margin-top: 22px;
    padding-bottom: 20px;
  }
  .ovastack-page .ova-why__proofs li { min-height: 70px; padding: 0 4px; gap: 9px; border-bottom: 1px solid rgba(128, 151, 169, .19); font-size: 9px; letter-spacing: .06em; white-space: normal; }
  .ovastack-page .ova-why__proofs li:nth-child(2n) { border-right: 0; }
  .ovastack-page .ova-why__proofs li:last-child { grid-column: 1 / -1; }
  .ovastack-page .ova-why__proofs svg { width: 28px; height: 28px; flex-basis: 28px; }
  .ovastack-page .ova-why__proofs li > i { top: calc(50% + 9px); left: 31px; width: 5px; height: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ovastack-page .ova-why__stage,
  .ovastack-page .ova-why__core i { animation: none; }
  .ovastack-page .ova-why__visual { transition: none; }
}
