/*
 * Olivion immersive homepage hero.
 * Scroll choreography lives in immersive-hero.js; this file owns presentation only.
 */

.immersive-hero {
  --hero-progress: 0;
  --hero-scene-progress: 0;
  --hero-scene-0: 1;
  --hero-scene-1: 0;
  --hero-scene-2: 0;
  --hero-scene-3: 0;
  --hero-scene-4: 0;
  --hero-scroll-vh: 520;
  position: relative;
  height: calc(var(--hero-scroll-vh) * 1vh);
  color: #fff;
  background: #020610;
  isolation: isolate;
}

.immersive-hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 78% 42%, rgba(50, 91, 170, .2), transparent 72%),
    linear-gradient(135deg, #020610 0%, #070a18 52%, #02050d 100%);
}

.immersive-hero__visual,
.immersive-hero__backdrop,
.immersive-hero__sequence,
.immersive-hero__fx,
.immersive-hero__grid,
.immersive-hero__vignette {
  position: absolute;
  inset: 0;
}

.immersive-hero__visual {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.immersive-hero__backdrop {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .52;
  filter: saturate(.82) contrast(1.06) brightness(.68);
  transform: translate3d(calc(var(--hero-progress) * -1.5%), 0, 0)
    scale(calc(1.08 + var(--hero-progress) * .06));
  transform-origin: 67% 49%;
  will-change: transform;
}

.immersive-hero__sequence,
.immersive-hero__fx {
  width: 100%;
  height: 100%;
}

.immersive-hero__sequence {
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
}

.immersive-hero.has-sequence .immersive-hero__sequence { opacity: .72; }
.immersive-hero.has-sequence .immersive-hero__backdrop { opacity: .2; }

.immersive-hero__fx { z-index: 4; opacity: .8; }

.immersive-hero__grid {
  z-index: 2;
  opacity: .2;
  background-image:
    linear-gradient(rgba(118, 174, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 174, 255, .14) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(66deg) scale(1.5) translateY(18%);
  transform-origin: center 78%;
  mask-image: linear-gradient(to bottom, transparent 4%, #000 47%, transparent 94%);
}

.immersive-hero__vignette {
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(2, 6, 16, .97) 0%, rgba(2, 6, 16, .84) 29%, rgba(2, 6, 16, .16) 61%, rgba(2, 6, 16, .4) 100%),
    linear-gradient(180deg, rgba(2, 6, 16, .8) 0%, transparent 24%, transparent 72%, rgba(2, 6, 16, .82) 100%);
}

.immersive-hero__route {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-route__base,
.hero-route__signal,
.hero-route__threat,
.hero-route__resolved {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-route__base { stroke: rgba(126, 178, 255, .13); stroke-width: 1; }
.hero-route__signal {
  stroke: url(#heroRouteEnergy);
  stroke-width: 1.6;
  stroke-dasharray: 4 18;
  opacity: calc(.22 + var(--hero-scene-0) * .78);
  animation: heroSignalFlow 3.6s linear infinite;
}
.hero-route__signal.slow { animation-duration: 5.6s; animation-direction: reverse; }
.hero-route__threat {
  stroke: #ff6a62;
  stroke-width: 2.4;
  stroke-dasharray: 7 9;
  opacity: var(--hero-scene-1);
  filter: drop-shadow(0 0 7px rgba(255, 79, 69, .9));
  animation: heroThreatFlow 1.4s linear infinite;
}
.hero-route__resolved {
  stroke: #68d9ff;
  stroke-width: 2.2;
  stroke-dasharray: 3 13;
  opacity: calc(var(--hero-scene-2) + var(--hero-scene-3) + var(--hero-scene-4));
  filter: drop-shadow(0 0 7px rgba(104, 217, 255, .65));
  animation: heroSignalFlow 2.4s linear infinite;
}

@keyframes heroSignalFlow { to { stroke-dashoffset: -88; } }
@keyframes heroThreatFlow { to { stroke-dashoffset: -48; } }

.immersive-hero__topology {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: translate3d(calc(var(--hero-progress) * -2.6%), calc(var(--hero-progress) * -1.2%), 0)
    scale(calc(1 + var(--hero-progress) * .08));
  transform-origin: 72% 50%;
  will-change: transform;
}

.hero-service {
  position: absolute;
  min-width: 112px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 199, 255, .25);
  border-radius: 9px;
  color: rgba(224, 241, 255, .82);
  background: rgba(6, 18, 40, .5);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 14px 40px rgba(0, 0, 0, .22);
  backdrop-filter: blur(9px);
  font: 720 10px/1.2 var(--font-mono);
  letter-spacing: .04em;
  transition: opacity .45s ease, border-color .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

.hero-service::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #66dcff;
  box-shadow: 0 0 10px rgba(102, 220, 255, .95);
}

.hero-service small {
  display: block;
  margin: 6px 0 0 14px;
  color: rgba(179, 209, 239, .4);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-service--api { top: 19%; right: 26%; }
.hero-service--auth { top: 33%; right: 10%; }
.hero-service--container { top: 56%; right: 29%; }
.hero-service--cloud { top: 69%; right: 11%; }
.hero-service--source { top: 76%; right: 45%; }

.hero-scanner-field {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: var(--hero-scene-0);
  transform: translate3d(calc(var(--hero-scene-progress) * 2%), 0, 0);
  transition: opacity .25s linear;
}

.hero-scanner {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(174, 154, 255, .24);
  border-radius: 999px;
  color: rgba(235, 231, 255, .74);
  background: rgba(15, 11, 32, .48);
  backdrop-filter: blur(8px);
  font: 750 8.5px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: heroScannerFloat 5.2s ease-in-out infinite;
}

.hero-scanner::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--scanner-color, #9a7df0);
  box-shadow: 0 0 9px var(--scanner-color, #9a7df0);
}

.hero-scanner:nth-child(2n) { animation-delay: -1.7s; }
.hero-scanner:nth-child(3n) { animation-delay: -3.2s; }
.hero-scanner--semgrep { top: 17%; right: 43%; --scanner-color:#b29aff; }
.hero-scanner--trivy { top: 27%; right: 16%; --scanner-color:#64c8ff; }
.hero-scanner--checkov { top: 45%; right: 40%; --scanner-color:#7fe4ff; }
.hero-scanner--gitleaks { top: 61%; right: 8%; --scanner-color:#ff786d; }
.hero-scanner--zap { top: 72%; right: 35%; --scanner-color:#f5a45d; }
.hero-scanner--prowler { top: 84%; right: 17%; --scanner-color:#af91ff; }

@keyframes heroScannerFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

.hero-finding-cloud {
  position: absolute;
  top: 30%;
  right: 21%;
  z-index: 6;
  width: 300px;
  height: 270px;
  opacity: calc(.18 + var(--hero-scene-0) * .82);
  transform: scale(calc(.92 + var(--hero-scene-0) * .08));
  transform-origin: center;
}

.hero-finding {
  position: absolute;
  width: var(--finding-size, 8px);
  height: var(--finding-size, 8px);
  border: 1px solid rgba(159, 213, 255, .7);
  border-radius: 2px;
  background: rgba(73, 156, 235, .24);
  box-shadow: 0 0 11px rgba(58, 170, 255, .32);
  transform: rotate(45deg);
  animation: heroFindingNoise var(--finding-speed, 4s) ease-in-out infinite;
}

.hero-finding.is-threat {
  border-color: #ff7068;
  background: rgba(255, 65, 57, .3);
  box-shadow: 0 0 14px rgba(255, 73, 64, .72);
}

@keyframes heroFindingNoise {
  0%, 100% { opacity: .32; translate: 0 0; }
  50% { opacity: .94; translate: var(--finding-drift, 4px) -7px; }
}

.hero-scene-layer {
  position: absolute;
  z-index: 7;
  transition: opacity .2s linear, transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.hero-threat-focus {
  top: 27%;
  right: 11%;
  width: min(39vw, 510px);
  min-width: 390px;
  opacity: var(--hero-scene-1);
  transform: translate3d(calc((1 - var(--hero-scene-1)) * 30px), 0, 0)
    scale(calc(.94 + var(--hero-scene-1) * .06));
}

.hero-threat-focus__fracture {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto 18px;
  border: 1px solid rgba(255, 93, 83, .42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 70, 58, .3), transparent 38%),
    repeating-conic-gradient(from 18deg, transparent 0 16deg, rgba(255, 98, 74, .18) 17deg 18deg);
  box-shadow: 0 0 72px rgba(255, 58, 48, .2), inset 0 0 30px rgba(255, 69, 58, .14);
}

.hero-threat-focus__fracture::before,
.hero-threat-focus__fracture::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 15%;
  width: 2px;
  height: 72%;
  background: linear-gradient(#ff9c70, #ff473f 58%, transparent);
  box-shadow: 0 0 12px #ff554c;
  transform: rotate(23deg) skewX(-18deg);
}

.hero-threat-focus__fracture::after { transform: rotate(-38deg) scaleY(.7); }

.hero-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hero-context-chip {
  min-height: 38px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 118, 104, .24);
  border-radius: 7px;
  color: rgba(255, 226, 220, .78);
  background: rgba(46, 11, 16, .48);
  font: 720 9px/1.2 var(--font-mono);
}

.hero-context-chip::before { content:"+"; margin-right:7px; color:#ff766c; }
.hero-context-chip:first-child { grid-column: 1 / -1; color:#fff; border-color:rgba(255, 91, 80, .48); }

.hero-record {
  top: 21%;
  right: 8%;
  width: min(42vw, 540px);
  min-width: 440px;
  opacity: var(--hero-scene-2);
  transform: translate3d(calc((1 - var(--hero-scene-2)) * 34px), 0, 0)
    rotateY(calc((1 - var(--hero-scene-2)) * -7deg));
  perspective: 900px;
}

.hero-record__shell,
.hero-evidence__shell {
  overflow: hidden;
  border: 1px solid rgba(137, 187, 255, .25);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 25, 51, .86), rgba(7, 11, 27, .78));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(130%);
}

.hero-record__head,
.hero-evidence__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: rgba(216, 232, 255, .58);
  font: 760 9px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-record__head i,
.hero-evidence__head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ddcff;
  box-shadow: 0 0 11px #6ddcff;
}

.hero-record__body { padding: 18px; }
.hero-record__title { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.hero-record__title strong { max-width:28ch; font:850 16px/1.25 var(--font-display); }
.hero-record__severity {
  padding:6px 8px; border:1px solid rgba(255,100,88,.45); border-radius:999px;
  color:#ff9a8f; background:rgba(255,64,55,.1); font:800 8px/1 var(--font-display); text-transform:uppercase;
}
.hero-record__meta { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:17px 0; }
.hero-record__meta span,
.hero-record__artifact {
  padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:7px;
  color:rgba(226,237,255,.72); background:rgba(255,255,255,.035); font:650 9px/1.35 var(--font-mono);
}
.hero-record__meta small,
.hero-record__artifact small { display:block; margin-bottom:5px; color:rgba(199,215,239,.38); text-transform:uppercase; }
.hero-record__artifacts { display:grid; gap:7px; }
.hero-record__artifact { position:relative; padding-left:34px; }
.hero-record__artifact::before {
  content:""; position:absolute; left:13px; top:50%; width:8px; height:8px; margin-top:-4px;
  border:1px solid #8c78ff; border-radius:2px; box-shadow:0 0 8px rgba(140,120,255,.58);
}

.hero-evidence {
  top: 20%;
  right: 8%;
  width: min(42vw, 540px);
  min-width: 440px;
  opacity: var(--hero-scene-3);
  transform: translate3d(calc((1 - var(--hero-scene-3)) * 34px), 0, 0)
    scale(calc(.95 + var(--hero-scene-3) * .05));
}

.hero-evidence__body { padding:18px; }
.hero-evidence__status {
  display:flex; align-items:center; gap:13px; padding:14px;
  border:1px solid rgba(89,222,183,.3); border-radius:9px;
  color:#c9ffec; background:rgba(21,101,81,.14);
}
.hero-evidence__check {
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px;
  border-radius:50%; color:#051a16; background:#65e2b6; box-shadow:0 0 22px rgba(101,226,182,.4);
  font:900 17px/1 var(--font-display);
}
.hero-evidence__status strong { display:block; font:850 15px/1.2 var(--font-display); }
.hero-evidence__status small { display:block; margin-top:4px; color:rgba(208,255,238,.58); font:650 9px/1.2 var(--font-mono); }
.hero-evidence__timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.hero-evidence__event {
  min-height:72px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:8px;
  color:rgba(225,236,255,.75); background:rgba(255,255,255,.035); font:700 9px/1.35 var(--font-mono);
}
.hero-evidence__event i { display:block; width:6px; height:6px; margin-bottom:10px; border-radius:50%; background:#6fd8ff; box-shadow:0 0 8px #6fd8ff; }
.hero-evidence__audit { margin-top:10px; padding:11px 13px; border-left:2px solid #8d72ef; color:rgba(222,213,255,.64); background:rgba(104,70,194,.08); font:650 9px/1.45 var(--font-mono); }

.hero-activation {
  top: 50%;
  right: 15%;
  width: min(34vw, 450px);
  aspect-ratio: 1;
  opacity: var(--hero-scene-4);
  transform: translate3d(0, -50%, 0) scale(calc(.76 + var(--hero-scene-4) * .24));
}

.hero-activation__orbit,
.hero-activation__orbit::before,
.hero-activation__orbit::after {
  position:absolute; inset:0; border:1px solid rgba(105,216,255,.25); border-radius:50%;
  animation: heroActivationOrbit 20s linear infinite;
}
.hero-activation__orbit::before,
.hero-activation__orbit::after { content:""; inset:11%; border-color:rgba(155,117,255,.28); animation-duration:14s; animation-direction:reverse; }
.hero-activation__orbit::after { inset:23%; border-style:dashed; border-color:rgba(105,216,255,.38); animation-duration:9s; animation-direction:normal; }

@keyframes heroActivationOrbit { to { transform:rotate(360deg); } }

.hero-activation__core {
  position:absolute; inset:25%; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle, rgba(86,198,255,.3), rgba(83,50,185,.22) 42%, rgba(4,8,19,.76) 72%);
  box-shadow:0 0 55px rgba(71,192,255,.36), 0 0 120px rgba(98,65,218,.22);
}
.hero-activation__core::before {
  content:""; position:absolute; inset:-18%; border-radius:50%;
  background:conic-gradient(from 30deg, transparent, rgba(105,219,255,.38), transparent 35%, rgba(155,117,255,.42), transparent 70%);
  filter:blur(12px); animation:heroActivationOrbit 10s linear infinite;
}
.hero-activation__core img {
  position:relative; z-index:1; width:68%; height:68%; object-fit:contain;
  filter:drop-shadow(0 0 20px rgba(179,143,255,.7)) brightness(1.18) saturate(1.1);
}
.hero-activation__label {
  position:absolute; left:50%; bottom:7%; translate:-50% 0;
  color:rgba(219,235,255,.62); font:780 8.5px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}

.immersive-hero__content {
  position: relative;
  z-index: 20;
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  height: 100%;
  margin-inline: auto;
}

.immersive-hero__copy {
  position: absolute;
  top: calc(var(--nav-h) + clamp(48px, 9vh, 96px));
  left: 0;
  width: min(570px, 48vw);
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  pointer-events: none;
  will-change: opacity, transform;
}

.immersive-hero__copy[aria-hidden="false"] { pointer-events: auto; }
.immersive-hero__copy[data-hero-copy="0"] { opacity: 1; transform: none; }

.immersive-hero__eyebrow,
.immersive-hero__scene-index {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: #bba8ff;
  font: 820 10px/1 var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.immersive-hero__eyebrow::before,
.immersive-hero__scene-index::before {
  content: "";
  width: 21px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.immersive-hero h1,
.immersive-hero__copy h2 {
  max-width: 12ch;
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 6vw, 78px);
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.immersive-hero__copy h2 { font-size: clamp(42px, 5.2vw, 68px); }
.immersive-hero__copy--final h2 { max-width: 13ch; font-size: clamp(38px, 4.8vw, 62px); }

.immersive-hero__lede {
  max-width: 51ch;
  margin: 21px 0 0;
  color: rgba(224, 235, 250, .72);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.62;
}

.immersive-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.immersive-hero .site-button.primary {
  color:#07101b;
  background:linear-gradient(135deg, #cbbcff, #6cdcff);
  border-color:rgba(211,232,255,.72);
  box-shadow:0 16px 45px rgba(82,113,255,.26), inset 0 1px rgba(255,255,255,.72);
}
.immersive-hero .site-button.primary:hover { color:#030812; background:linear-gradient(135deg,#dfd5ff,#8de7ff); border-color:#fff; }

.immersive-hero__phase-note {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 13px;
  max-width:460px;
  margin-top:27px;
  padding-top:16px;
  border-top:1px solid rgba(173,146,240,.22);
}
.immersive-hero__phase-note b { color:#d4c7ff; font:850 12px/1.3 var(--font-display); }
.immersive-hero__phase-note span { color:rgba(211,225,244,.54); font-size:12.5px; line-height:1.5; }
.immersive-hero__phase-note i {
  grid-row:1 / span 2; width:9px; height:9px; margin-top:2px; border-radius:50%;
  background:#8d72ef; box-shadow:0 0 13px #8d72ef;
}

.immersive-hero__indicators { display:flex; flex-wrap:wrap; gap:7px; margin-top:21px; }
.immersive-hero__indicator {
  padding:7px 9px; border:1px solid rgba(255,112,99,.25); border-radius:999px;
  color:rgba(255,215,208,.76); background:rgba(74,17,23,.34);
  font:730 8.5px/1 var(--font-mono); text-transform:uppercase;
}

.immersive-hero__progress {
  position:absolute; right:clamp(18px,3vw,42px); top:50%; z-index:25;
  translate:0 -50%; margin:0; padding:0; list-style:none;
}
.immersive-hero__progress::before {
  content:""; position:absolute; left:8px; top:10px; bottom:10px; width:1px;
  background:rgba(255,255,255,.14);
}
.immersive-hero__progress-item {
  position:relative; display:flex; align-items:center; gap:10px; min-height:43px;
  color:rgba(220,232,248,.28); transition:color .3s ease;
}
.immersive-hero__progress-item::before {
  content:""; position:relative; z-index:1; width:17px; height:17px; border:1px solid rgba(255,255,255,.2);
  border-radius:50%; background:#050914; transition:background .3s,border-color .3s,box-shadow .3s,transform .3s;
}
.immersive-hero__progress-item span {
  opacity:0; translate:8px 0; font:760 9px/1 var(--font-display); letter-spacing:.11em; text-transform:uppercase;
  transition:opacity .3s,translate .3s;
}
.immersive-hero__progress-item[aria-current="step"] { color:#fff; }
.immersive-hero__progress-item[aria-current="step"]::before {
  border-color:#89e0ff; background:#6b56db; box-shadow:0 0 14px rgba(105,224,255,.65); transform:scale(.82);
}
.immersive-hero__progress-item[aria-current="step"] span { opacity:1; translate:0 0; }

.immersive-hero__scroll-hint {
  position:absolute; left:50%; bottom:22px; z-index:25; translate:-50% 0;
  display:flex; align-items:center; gap:9px; color:rgba(220,232,248,.42);
  font:720 8.5px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  opacity:calc(1 - min(1, var(--hero-progress) * 12));
}
.immersive-hero__scroll-hint::before {
  content:""; width:1px; height:26px; background:linear-gradient(transparent,#8ddfff);
  animation:heroScrollHint 1.8s ease-in-out infinite;
}
@keyframes heroScrollHint { 0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.4} 50%{transform:scaleY(1);opacity:1} }

.hero-handoff {
  position:relative;
  overflow:hidden;
  padding:clamp(62px,8vw,104px) 0 clamp(72px,9vw,116px);
  color:#fff;
  background:linear-gradient(180deg,#020610,#0f0b18 78%);
  isolation:isolate;
}
.hero-handoff::before {
  content:""; position:absolute; inset:-30% 12% auto; height:82%; z-index:-1;
  background:radial-gradient(circle,rgba(92,65,210,.34),transparent 66%); filter:blur(24px);
}
.hero-handoff__heading {
  display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:clamp(26px,4vw,42px);
}
.hero-handoff__heading h2 { max-width:12ch; margin:0; font-size:clamp(30px,4vw,50px); line-height:1; }
.hero-handoff__heading p { max-width:48ch; margin:0; color:rgba(223,232,247,.58); font-size:14px; line-height:1.65; }
.hero-handoff__frame {
  position:relative; overflow:hidden; border:1px solid rgba(192,177,255,.24); border-radius:16px;
  background:#0b0713; box-shadow:0 40px 110px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.03) inset;
  transform:perspective(1200px) rotateX(2deg); transform-origin:center top;
}
.hero-handoff__bar {
  display:flex; align-items:center; gap:7px; height:39px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.4); font:700 8.5px/1 var(--font-mono);
}
.hero-handoff__bar i { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18); }
.hero-handoff__bar span { margin-left:7px; }
.hero-handoff__frame img { display:block; width:100%; height:auto; }
.hero-handoff__frame::after {
  content:""; position:absolute; inset:39px 0 0; pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 25%,transparent 75%,rgba(97,74,211,.12));
}

@media (max-width: 1080px) {
  .immersive-hero { --hero-scroll-vh: 450; }
  .immersive-hero__copy { width:min(540px,54vw); }
  .hero-service--auth,.hero-service--cloud { right:5%; }
  .hero-threat-focus,.hero-record,.hero-evidence { right:5%; }
  .hero-activation { right:8%; }
  .immersive-hero__vignette {
    background:
      linear-gradient(90deg,rgba(2,6,16,.97),rgba(2,6,16,.78) 37%,rgba(2,6,16,.18) 70%,rgba(2,6,16,.44)),
      linear-gradient(180deg,rgba(2,6,16,.82),transparent 26%,transparent 70%,rgba(2,6,16,.86));
  }
}

@media (max-width: 760px) {
  .immersive-hero { --hero-scroll-vh: 340; }
  .immersive-hero__sticky { min-height:600px; }
  .immersive-hero__backdrop {
    opacity:.42; object-position:66% center; filter:saturate(.72) contrast(1.04) brightness(.58);
    transform:translate3d(calc(var(--hero-progress) * -2%),0,0) scale(1.18);
  }
  .immersive-hero__grid { background-size:42px 42px; opacity:.15; }
  .immersive-hero__vignette {
    background:
      linear-gradient(180deg,rgba(2,6,16,.98) 0%,rgba(2,6,16,.88) 48%,rgba(2,6,16,.23) 70%,rgba(2,6,16,.88) 100%),
      linear-gradient(90deg,rgba(2,6,16,.7),transparent 80%);
  }
  .immersive-hero__content { width:calc(100% - 32px); }
  .immersive-hero__copy {
    top:calc(var(--nav-h) + 24px); width:100%; max-width:none;
  }
  .immersive-hero h1,.immersive-hero__copy h2 { max-width:11ch; font-size:clamp(38px,11vw,50px); line-height:.98; }
  .immersive-hero__copy--final h2 { max-width:13ch; font-size:clamp(33px,9vw,44px); }
  .immersive-hero__eyebrow,.immersive-hero__scene-index { margin-bottom:12px; font-size:8.5px; }
  .immersive-hero__lede { max-width:38ch; margin-top:15px; font-size:14px; line-height:1.5; }
  .immersive-hero__actions { margin-top:17px; gap:8px; }
  .immersive-hero__actions .site-button { min-height:40px; padding-inline:13px; font-size:11px; }
  .immersive-hero__phase-note { max-width:360px; margin-top:17px; padding-top:12px; }
  .immersive-hero__phase-note span { font-size:11px; }
  .immersive-hero__indicators { max-width:350px; margin-top:14px; gap:5px; }
  .immersive-hero__indicator { padding:6px 7px; font-size:7.5px; }
  .immersive-hero__progress {
    top:auto; right:auto; bottom:13px; left:50%; display:flex; gap:18px; translate:-50% 0;
  }
  .immersive-hero__progress::before { left:9px; right:9px; top:50%; bottom:auto; width:auto; height:1px; }
  .immersive-hero__progress-item { min-height:20px; }
  .immersive-hero__progress-item span { display:none; }
  .immersive-hero__progress-item::before { width:19px;height:19px; }
  .immersive-hero__scroll-hint { display:none; }
  .hero-service { min-width:88px; padding:7px 8px; font-size:8px; opacity:.62; }
  .hero-service small { display:none; }
  .hero-service--api { top:59%; right:47%; }
  .hero-service--auth { top:69%; right:8%; }
  .hero-service--container { top:79%; right:38%; }
  .hero-service--cloud,.hero-service--source { display:none; }
  .hero-scanner-field { top:48%; }
  .hero-scanner { padding:5px 7px; font-size:7px; }
  .hero-scanner--semgrep { top:8%; right:55%; }
  .hero-scanner--trivy { top:14%; right:14%; }
  .hero-scanner--checkov { top:26%; right:44%; }
  .hero-scanner--gitleaks { top:38%; right:9%; }
  .hero-scanner--zap,.hero-scanner--prowler { display:none; }
  .hero-finding-cloud { top:60%; right:15%; width:230px;height:190px; transform:scale(.75); }
  .hero-threat-focus,.hero-record,.hero-evidence {
    top:auto; right:16px; bottom:56px; width:calc(100% - 32px); min-width:0;
  }
  .hero-threat-focus__fracture { width:108px;height:108px;margin-bottom:8px; }
  .hero-context-grid { grid-template-columns:1fr 1fr; gap:5px; }
  .hero-context-chip { min-height:31px;padding:7px;font-size:7.5px; }
  .hero-record__shell,.hero-evidence__shell { border-radius:10px; }
  .hero-record__head,.hero-evidence__head { padding:9px 11px;font-size:7.5px; }
  .hero-record__body,.hero-evidence__body { padding:11px; }
  .hero-record__title strong { font-size:12px; }
  .hero-record__meta { margin:10px 0;gap:5px; }
  .hero-record__meta span,.hero-record__artifact { padding:7px;font-size:7.5px; }
  .hero-record__artifact { padding-left:28px; }
  .hero-evidence__status { padding:9px; }
  .hero-evidence__timeline { gap:5px;margin-top:7px; }
  .hero-evidence__event { min-height:52px;padding:7px;font-size:7px; }
  .hero-evidence__audit { margin-top:7px;padding:8px 9px;font-size:7.5px; }
  .hero-activation { top:auto; right:50%; bottom:35px; width:72vw; translate:50% 0; transform:scale(calc(.76 + var(--hero-scene-4) * .24)); }
  .hero-activation__label { font-size:7px; }
  .hero-handoff { padding:54px 0 64px; }
  .hero-handoff__heading { display:block; }
  .hero-handoff__heading p { margin-top:14px; }
  .hero-handoff__frame { border-radius:10px; transform:none; }
}

@media (max-width: 430px) {
  .immersive-hero__actions { display:grid; grid-template-columns:1fr 1fr; }
  .immersive-hero__actions .site-button { white-space:normal; text-align:center; }
  .immersive-hero__copy--opening .immersive-hero__lede { max-width:32ch; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-hero {
    height:auto;
    min-height:760px;
  }
  .immersive-hero__sticky {
    position:relative;
    height:auto;
    min-height:760px;
  }
  .immersive-hero__backdrop { transform:scale(1.08); }
  .immersive-hero__copy { display:none; position:relative; top:auto; width:min(570px,100%); padding-top:calc(var(--nav-h) + 58px); }
  .immersive-hero__copy[data-hero-copy="0"] { display:block; opacity:1 !important; transform:none !important; pointer-events:auto; }
  .immersive-hero__content { min-height:760px; }
  .hero-scanner-field,.hero-finding-cloud,.hero-threat-focus,.hero-record,.hero-evidence { display:none; }
  .hero-activation { opacity:.76; transform:translate3d(0,-50%,0) scale(.86); }
  .immersive-hero__progress,.immersive-hero__scroll-hint,.immersive-hero__fx,.immersive-hero__sequence { display:none; }
  .hero-route__signal,.hero-route__threat,.hero-route__resolved,.hero-activation__orbit,.hero-activation__orbit::before,.hero-activation__orbit::after,.hero-activation__core::before { animation:none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width:760px) {
  .immersive-hero,.immersive-hero__sticky,.immersive-hero__content { min-height:760px; }
  .hero-activation { display:block; right:-4%; bottom:12px; width:68vw; translate:0 0; transform:scale(.86); opacity:.55; }
}