/* Homepage product stage. CSS-compatible SCSS; copy to css/homepage-hero.css. */
.hero-outer { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.hero-outer .hero-split { position: relative; z-index: 1; display: block; max-width: 1280px; min-height: 0; padding-top: 24px; padding-bottom: 24px; }
.hero-outer .hero-top { max-width: none; padding: 0; text-align: center; }
.hero-outer .hero-top .t-hero { margin: 0 auto; max-width: 1040px; font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(2.75rem, 5.3vw, 4.75rem); font-weight: 700; line-height: 1; letter-spacing: -.0525em; }
.hero-outer .hero-top .t-hero em { display: block; color: var(--color-text-brand); font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; font-weight: 400; letter-spacing: -.06em; }
.hero-outer .hero-actions { margin-top: 18px; text-align: center; }
.hero-outer .cta-group { justify-content: center; gap: 14px; }
.hero-outer .cta-group a { min-height: 46px; padding: 11px 27px; border-radius: 5px; font-size: 1rem; }
.hero-outer .cta-group a span { margin-left: 5px; }
.hero-outer .hero-proof { margin: 10px auto 0; font-family: "Segoe UI", Arial, sans-serif; line-height: 1.4; font-size: .875rem; color: var(--color-text-muted); }
.hero-outer .hero-proof strong { margin-right: 3px; font-size: 1.0625rem; color: var(--color-text-primary); }
/* Layered blue wisps and a quiet floor stay still while the campaigns move. */
.hero-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 0% 59%, rgba(182,214,251,.66), transparent 48%), radial-gradient(ellipse at 100% 57%, rgba(180,214,250,.66), transparent 48%), linear-gradient(to bottom, transparent 25%, rgba(224,239,255,.65) 78%, #fff 100%); }
.hero-atmosphere::before { content: ""; position: absolute; left: -10%; top: 24%; width: 120%; height: 70%; background: radial-gradient(ellipse 36% 12% at 17% 18%, rgba(115,174,233,.48) 6%, transparent 74%), radial-gradient(ellipse 34% 13% at 83% 26%, rgba(112,175,236,.46) 4%, transparent 75%), radial-gradient(ellipse 48% 17% at 4% 61%, rgba(124,185,241,.55) 8%, transparent 72%), radial-gradient(ellipse 49% 17% at 97% 71%, rgba(120,181,238,.48) 6%, transparent 73%), radial-gradient(ellipse 44% 12% at 24% 91%, rgba(125,184,239,.4), transparent 72%); transform: rotate(-6deg); filter: blur(9px); }
.hero-atmosphere::after { content: ""; position: absolute; left: -15%; top: 58%; width: 130%; height: 37%; border-radius: 50%; transform: rotate(-6deg); background: linear-gradient(180deg, transparent 12%, rgba(255,255,255,.8) 33%, rgba(255,255,255,.18) 40%, rgba(127,185,240,.32) 48%, transparent 62%, rgba(255,255,255,.85) 72%, transparent 84%); filter: blur(8px); }
.hero-outer [data-hero-gallery] { position: relative; display: flex; flex-direction: column; width: 100%; margin: 18px auto 0; padding-bottom: 104px; }
.hero-outer [data-campaign-stage] {
  --card-width: 440px;
  --offset: 430px;
  --side-scale: .92;
  --yaw: 12deg;
  --tilt: -3.5deg;
  --perspective: calc(var(--card-width) * 3);
  --side-depth: -80px;
  --side-lift: -22px;
  --center-lean: 9.3deg;
  /* Side projection fitted to the original's exposed left corners and edge lines.
     Opposing Z shears keep the matrix invertible for smooth carousel interpolation.
     See new-design/examples/homepage/verify-left-reference.cjs for measured targets. */
  --left-projection: translateZ(calc(var(--card-width) * -.4)) translate(-141.247793%, -1.311433%) matrix(.886512449, -.013071254, -.051730601, 1.086696796, 0, 0) matrix3d(1,0,.097153629,0, 0,1,-.099818664,0, 0,0,1,0, 0,0,0,1) perspective(var(--card-width)) matrix3d(1,0,-.097153629,0, 0,1,.099818664,0, 0,0,1,0, 0,0,0,1);
  --pose-center: translateX(-50%) translateY(0) translateZ(12px) rotateX(calc(-1 * var(--tilt) + var(--center-lean))) rotateY(0deg) scale(1);
  --pose-left: var(--left-projection);
  /* Reflect the pose about the stage center; the second flip keeps the artwork readable. */
  --right-projection: translateX(-100%) scaleX(-1) var(--left-projection) scaleX(-1);
  --pose-right: var(--right-projection);
  --pose-enter: translateX(-90px) var(--left-projection) scale(.935);
  --pose-exit: translateX(90px) var(--right-projection) scale(.935);
  position: relative; width: 100%; height: calc(var(--card-width) * 1.2); max-width: 1280px; margin: 0 auto; isolation: isolate; perspective: var(--perspective); perspective-origin: 50% 90%; transform-style: preserve-3d;
}
.hero-outer [data-campaign-stage]::before { content: ""; position: absolute; z-index: -1; left: -15%; right: -15%; bottom: -40px; height: 80px; background: radial-gradient(ellipse at center, rgba(119,167,212,.4), rgba(190,219,247,.48) 38%, transparent 72%); pointer-events: none; }
/* Soft table plane: sides sit farther back (higher bases), with a mild yaw. No skew. */
.hero-outer [data-campaign-rig] { position: absolute; inset: 0; transform: rotateX(var(--tilt)); transform-origin: 50% 78%; transform-style: preserve-3d; }
.campaign-card { position: absolute; left: 50%; bottom: 0; width: var(--card-width); aspect-ratio: 5 / 6; transform-origin: bottom center; }
.campaign-card[data-slot="left"] { transform: var(--pose-left); z-index: 2; }
.campaign-card[data-slot="center"] { transform: var(--pose-center); z-index: 3; }
.campaign-card[data-slot="right"] { transform: var(--pose-right); z-index: 1; }
.campaign-card[data-slot="enter"] { transform: var(--pose-enter); opacity: 0; }
.campaign-card[data-slot="exit"] { transform: var(--pose-exit); opacity: 0; }
/* Contact stays at the feet and rides the card transform. Do not key this off data-slot. */
.campaign-card::after { content: ""; position: absolute; left: 5%; width: 90%; height: 8px; bottom: -1px; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, rgba(20,57,93,.3), transparent 70%); filter: blur(3px); pointer-events: none; z-index: 0; }
.campaign-face { height: 100%; position: relative; z-index: 2; padding: 9px; border: 1px solid rgba(158,185,213,.4); border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(20,57,93,.12), 0 6px 8px -6px rgba(20,57,93,.28); }
.campaign-card img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: contain; }
.campaign-face img { height: 100%; border-radius: 3px; }
.campaign-reflection { position: absolute; z-index: 1; top: calc(100% + 2px); left: 0; width: 100%; height: 100%; padding: 9px; border: 1px solid rgba(158,185,213,.22); border-radius: 9px; background: #fff; opacity: .3; transform: scaleY(-1); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.42) 5%, transparent 14%); -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.42) 5%, transparent 14%); pointer-events: none; }
.hero-outer [data-hero-gallery] figcaption { position: relative; order: -1; z-index: 4; width: 100%; margin: 0 auto 16px; min-height: 44px; text-align: center; color: var(--color-text-muted); font-size: .8125rem; }
.hero-outer [data-campaign-controls] { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 5; }
.hero-outer [data-campaign-controls][hidden], .hero-outer [data-campaign-controls] [hidden] { display: none; }
.hero-outer [data-campaign-controls] button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; padding: 0; border-radius: 3px; background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.hero-outer [data-campaign-controls] button:hover { color: var(--color-text-brand); }
.hero-outer [data-campaign-controls] button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.hero-outer [data-campaign-controls] svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Pause comes first in keyboard order; visually the controls read previous, pause, next. */
.hero-outer [data-campaign-previous] { order: -1; }
html.dark .hero-outer { background: var(--color-bg); }
html.dark .hero-atmosphere { opacity: .3; background: radial-gradient(ellipse at 4% 60%, #1b548b, transparent 42%), radial-gradient(ellipse at 96% 52%, #205c99, transparent 42%); }
html.dark .hero-atmosphere::after { opacity: .2; }
html.dark .hero-outer [data-campaign-stage]::before { background: radial-gradient(ellipse at center, rgba(61,116,168,.35), transparent 72%); }
html.dark .campaign-face { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 8px -6px rgba(0,0,0,.5); }
html.dark .campaign-card::after { background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.45), transparent 70%); }
html.dark .campaign-reflection { opacity: .1; }
@media (min-width: 1320px) { .hero-outer [data-campaign-stage] { --offset: 440px; } }
@media (max-width: 1199px) {
  .hero-outer [data-campaign-stage] { --card-width: 340px; --offset: 330px; --side-lift: -18px; }
}
@media (max-width: 999px) {
  .hero-outer [data-campaign-stage] { --card-width: 300px; --offset: 284px; --tilt: -2.5deg; --side-depth: -48px; --side-lift: -14px; }
  .hero-outer .hero-split { padding-top: 30px; }
}
@media (max-width: 699px) {
  .hero-outer .hero-split { padding-top: 28px; padding-bottom: 14px; }
  .hero-outer .hero-top .t-hero { font-size: clamp(2.4rem, 8.4vw, 3.25rem); max-width: 480px; line-height: 1.06; }
  .hero-outer .hero-top .t-hero em { margin-top: 4px; }
  .hero-outer .cta-group { gap: 10px; }
  .hero-outer .cta-group a { padding: 11px 18px; font-size: .9375rem; }
  .hero-outer .hero-proof { font-size: .75rem; margin-top: 15px; }
  .hero-outer .hero-proof strong { font-size: .9375rem; }
  .hero-outer [data-hero-gallery] { margin-top: 18px; padding-bottom: 84px; }
  .hero-outer [data-campaign-stage] { --card-width: min(78vw, 320px); --offset: calc(var(--card-width) * .82); --side-scale: .84; --tilt: -1.5deg; --yaw: 8deg; --side-depth: -36px; --side-lift: -10px; }
  .campaign-face, .campaign-reflection { padding: 6px; border-radius: 7px; }
  .hero-outer [data-hero-gallery] figcaption { margin: 0 auto 14px; }
  .hero-atmosphere::before { top: 40%; }
  .campaign-reflection { opacity: .18; mask-image: linear-gradient(to top, #000, transparent 10%); -webkit-mask-image: linear-gradient(to top, #000, transparent 10%); }
}
@media (pointer: coarse) { .hero-outer [data-campaign-controls] button { width: 44px; height: 44px; } }

/* Fixed text slots keep different sentence lengths from moving the stage. */
.hero-outer .campaign-feature { position: relative; width: 620px; max-width: 100%; height: 80px; margin: 0 auto; }
.hero-outer .campaign-feature-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 260px; max-width: 100%; margin: 0 auto; min-height: 44px; color: var(--color-text-brand); font-family: "Segoe UI", Arial, sans-serif; font-size: .9375rem; font-weight: 500; text-decoration: none; border-radius: 4px; }
.hero-outer .campaign-feature-arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-surface); transition: background-color 180ms, border-color 180ms; }
.hero-outer .campaign-feature-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-outer a.campaign-feature-link:hover .campaign-feature-arrow { border-color: var(--color-text-brand); background: var(--color-bg-tinted); }
.hero-outer .campaign-feature-link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.hero-outer .campaign-feature-outgoing { position: absolute; inset: 0; pointer-events: none; }
.hero-outer .campaign-status { display: block; font-size: .8125rem; color: var(--color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .hero-outer .campaign-feature-arrow, .hero-outer .campaign-feature-arrow svg { transition: none; } }

.hero-outer .campaign-feature-content { display: grid; grid-template-rows: 30px 44px; row-gap: 6px; width: 100%; height: 100%; }
.hero-outer .campaign-outcome { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: none; margin: 0; font-family: "Segoe UI", Arial, sans-serif; font-size: 1.375rem; font-weight: 500; line-height: 30px; color: var(--color-text-primary); text-wrap: balance; }
@media (max-width: 699px) {
  .hero-outer .campaign-feature { height: 102px; }
  .hero-outer .campaign-feature-content { grid-template-rows: 52px 44px; }
  .hero-outer .campaign-outcome { font-size: 1.25rem; line-height: 26px; }
}