.sky-hero {
  position: relative;
  isolation: isolate;
  min-height: min(920px, 94svh);
  overflow: hidden;
  color: #f7f9ff;
  background:
    radial-gradient(circle at 72% 35%, rgba(72, 115, 255, .22), transparent 30%),
    linear-gradient(135deg, #030612 0%, #071128 54%, #030712 100%);
}

.sky-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 30%;
  background: linear-gradient(transparent, rgba(3, 6, 18, .84));
  pointer-events: none;
}

.sky-hero .container {
  position: relative;
  z-index: 2;
}

.sky-hero .hero-grid { min-height: min(870px, 90svh); }
.sky-hero h1 { color: #fff; max-width: 760px; }
.sky-hero .lead { color: #c8d2e8; max-width: 720px; }
.sky-hero .eyebrow { color: #92b9ff; }
.sky-hero .btn-secondary { color: #f3f7ff; border-color: rgba(210, 225, 255, .3); background: rgba(255, 255, 255, .07); backdrop-filter: blur(16px); }
.sky-hero .btn-secondary:hover { background: rgba(255, 255, 255, .13); }
.sky-hero .proof { border-color: rgba(194, 215, 255, .16); background: rgba(10, 22, 48, .46); box-shadow: 0 18px 55px rgba(0, 0, 0, .2); backdrop-filter: blur(14px); }
.sky-hero .proof b { color: #fff; }
.sky-hero .proof span { color: #aebbd3; }

.sky-canvas-wrap,
.sky-canvas,
.sky-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sky-canvas-wrap { z-index: 0; pointer-events: none; }
.sky-canvas { display: block; opacity: .98; }
.sky-fallback { object-fit: cover; opacity: .32; filter: saturate(.8) contrast(1.08); }
.webgl-ready .sky-fallback { opacity: 0; }

.sky-stage {
  position: relative;
  min-height: 580px;
  perspective: 1100px;
}

.sky-console {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(94%, 510px);
  aspect-ratio: 1 / .78;
  transform: translate(-48%, -49%) rotateX(7deg) rotateY(-8deg);
  border: 1px solid rgba(161, 194, 255, .2);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(16, 29, 58, .52), rgba(4, 10, 25, .24));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .11);
  backdrop-filter: blur(12px);
  transition: transform .2s ease-out;
}

.sky-console::before,
.sky-console::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(99, 151, 255, .22);
  inset: 14%;
  animation: sky-spin 18s linear infinite;
}
.sky-console::after { inset: 27%; border-style: dashed; animation-duration: 12s; animation-direction: reverse; }

.sky-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(181, 210, 255, .38);
  border-radius: 32px;
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  background: radial-gradient(circle at 35% 28%, #60a5fa, #2450d7 46%, #081736 76%);
  box-shadow: 0 0 60px rgba(55, 118, 255, .55), inset 0 1px rgba(255, 255, 255, .44);
}

.sky-node {
  position: absolute;
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 12px 14px;
  border: 1px solid rgba(177, 207, 255, .22);
  border-radius: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .03em;
  background: rgba(6, 15, 36, .72);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}
.sky-node small { color: #8fa7c9; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.sky-node::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #68f2c4; box-shadow: 0 0 13px #68f2c4; position: absolute; top: 14px; right: 13px; }
.sky-node-main { top: 9%; left: -4%; }
.sky-node-health { top: 15%; right: -5%; }
.sky-node-knowledge { bottom: 12%; left: 0; }
.sky-node-data { bottom: 7%; right: -2%; }

.sky-status {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 5%;
  display: flex;
  justify-content: space-between;
  color: rgba(196, 216, 250, .68);
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sky-status span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #65e6bb; box-shadow: 0 0 10px #65e6bb; }

.sky-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); color: rgba(215, 227, 250, .55); font: 600 9px/1 ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.sky-scroll-cue::after { content: ""; display: block; width: 1px; height: 28px; margin: 9px auto 0; background: linear-gradient(#8fb9ff, transparent); animation: sky-pulse 1.8s ease-in-out infinite; }

@keyframes sky-spin { to { transform: rotate(360deg); } }
@keyframes sky-pulse { 0%, 100% { opacity: .25; transform: scaleY(.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 900px) {
  .sky-hero { min-height: auto; }
  .sky-hero .hero-grid { min-height: auto; padding-top: 70px; padding-bottom: 80px; }
  .sky-stage { min-height: 430px; }
  .sky-console { width: min(88vw, 460px); }
}

@media (max-width: 620px) {
  .sky-hero .hero-grid { padding-top: 46px; }
  .sky-stage { min-height: 360px; margin-top: 12px; }
  .sky-console { transform: translate(-50%, -50%); border-radius: 24px; }
  .sky-core { width: 88px; height: 88px; border-radius: 24px; font-size: 34px; }
  .sky-node { min-width: 104px; padding: 9px 10px; font-size: 10px; }
  .sky-node small { font-size: 8px; }
  .sky-node-main { left: -2%; }
  .sky-node-health { right: -2%; }
  .sky-node-knowledge { left: 1%; }
  .sky-node-data { right: 1%; }
  .sky-scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sky-canvas { display: none; }
  .sky-fallback { opacity: .28; }
  .sky-console::before,
  .sky-console::after,
  .sky-scroll-cue::after { animation: none; }
  .sky-console { transition: none; }
}

/* Scroll-led homepage story */
.home-3d {
  background: #030712;
}

.sky-scroll-story {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #f7f9ff;
  background:
    radial-gradient(circle at 72% 18%, rgba(72, 115, 255, .18), transparent 29%),
    radial-gradient(circle at 16% 62%, rgba(77, 226, 205, .08), transparent 24%),
    #030712;
}

.sky-scroll-story > .sky-canvas-wrap {
  position: sticky;
  z-index: 0;
  top: 72px;
  width: 100%;
  height: calc(100svh - 72px);
  margin-bottom: calc(-100svh + 72px);
  overflow: hidden;
  opacity: var(--sky-scene-opacity, 1);
  transition: opacity .35s ease;
}

.sky-scroll-story > section {
  position: relative;
  z-index: 1;
}

.sky-scroll-story > section:not(.sky-hero) {
  min-height: min(980px, 100svh);
  display: flex;
  align-items: center;
  background: transparent;
}

.sky-scroll-story > section:not(.sky-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% 2.5%;
  border: 1px solid rgba(162, 194, 255, .09);
  border-radius: 42px;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, .94), rgba(6, 15, 35, .77) 53%, rgba(5, 13, 31, .18)),
    radial-gradient(circle at 80% 32%, rgba(74, 126, 255, .12), transparent 30%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 40px 100px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}

.sky-scroll-story .sky-hero {
  background: linear-gradient(90deg, rgba(3, 6, 18, .96) 0%, rgba(7, 17, 40, .82) 48%, rgba(3, 7, 18, .22) 69%, rgba(3, 7, 18, .08) 100%);
}

.sky-scroll-story #products,
.sky-scroll-story #technology,
.sky-scroll-story [aria-labelledby="proof-heading"] {
  color: #f7f9ff;
}

.sky-scroll-story .section-head h2,
.sky-scroll-story .split-copy h2,
.sky-scroll-story .card h3 {
  color: #f7f9ff;
}

.sky-scroll-story .section-head > p,
.sky-scroll-story .split-copy > p,
.sky-scroll-story .card p,
.sky-scroll-story .check,
.sky-scroll-story .check span {
  color: #aebbd3;
}

.sky-scroll-story [aria-labelledby="proof-heading"] .card {
  border-color: rgba(174, 204, 255, .13);
  background: rgba(8, 18, 40, .72);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
}

.sky-scroll-story [aria-labelledby="proof-heading"] .card-icon {
  background: rgba(93, 164, 255, .14);
  color: #8ec5ff;
}

.sky-scroll-story #technology .split-copy {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(174, 204, 255, .12);
  border-radius: 30px;
  background: rgba(5, 13, 31, .72);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .25);
  backdrop-filter: blur(18px);
}

.sky-scroll-story #technology .image-frame {
  border: 1px solid rgba(174, 204, 255, .14);
  background: rgba(8, 18, 40, .66);
  box-shadow: 0 40px 95px rgba(0, 0, 0, .36);
}

.sky-scroll-story .check-mark {
  background: rgba(84, 211, 223, .14);
  color: #7aebef;
}

.sky-story-rail {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: max(20px, calc((100% - 1460px) / 2));
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}

.sky-story-rail span {
  display: grid;
  grid-template-columns: 20px auto;
  gap: 8px;
  align-items: center;
  color: rgba(190, 208, 238, .34);
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: color .35s ease, transform .35s ease;
}

.sky-story-rail span::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: width .35s ease, box-shadow .35s ease;
}

.sky-story-rail span.is-active {
  color: #8fc8ff;
  transform: translateX(-10px);
}

.sky-story-rail span.is-active::before {
  width: 30px;
  box-shadow: 0 0 12px #70b5ff;
}

@media (max-width: 900px) {
  .sky-scroll-story > .sky-canvas-wrap { top: 66px; height: calc(100svh - 66px); margin-bottom: calc(-100svh + 66px); }
  .sky-scroll-story > section:not(.sky-hero) { min-height: auto; }
  .sky-scroll-story > section:not(.sky-hero)::before { inset: 2% 12px; border-radius: 28px; }
  .sky-story-rail { display: none; }
}

@media (max-width: 620px) {
  .sky-scroll-story > .sky-canvas-wrap { opacity: .52; }
  .sky-scroll-story > section:not(.sky-hero)::before { background: rgba(3, 8, 21, .68); }
}


/* Persistent universal animation layer */
.sky-persistent-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.sky-persistent-stage .sky-console {
  --sky-shift-x: 0px;
  --sky-shift-y: 0px;
  --sky-rotate-x: 7deg;
  --sky-rotate-y: -8deg;
  --sky-scale: 1;
  --sky-console-opacity: .96;
  top: 50%;
  left: 76%;
  width: min(38vw, 510px);
  opacity: var(--sky-console-opacity);
  transform: translate(-50%, -50%) translate3d(var(--sky-shift-x), var(--sky-shift-y), 0) rotateX(var(--sky-rotate-x)) rotateY(var(--sky-rotate-y)) scale(var(--sky-scale));
  transform-style: preserve-3d;
  will-change: transform, opacity;
  animation: sky-console-drift 5.6s ease-in-out infinite;
}

.sky-persistent-stage .sky-console::before {
  border-top-color: rgba(104, 242, 196, .75);
  border-right-color: transparent;
  box-shadow: 0 0 34px rgba(71, 136, 255, .13);
}

.sky-persistent-stage .sky-console::after {
  border-color: rgba(131, 174, 255, .42);
  border-left-color: rgba(104, 242, 196, .8);
}

.sky-persistent-stage .sky-core {
  animation: sky-core-breathe 3.4s ease-in-out infinite;
}

.sky-persistent-stage .sky-node {
  animation: sky-node-float 4.8s ease-in-out infinite;
}

.sky-persistent-stage .sky-node-health { animation-delay: -.9s; }
.sky-persistent-stage .sky-node-knowledge { animation-delay: -1.8s; }
.sky-persistent-stage .sky-node-data { animation-delay: -2.7s; }

.sky-fallback {
  transform: scale(1.04);
  animation: sky-fallback-drift 10s ease-in-out infinite alternate;
}

.webgl-ready .sky-fallback { opacity: .07; }

@keyframes sky-console-drift {
  0%, 100% {
    transform: translate(-50%, -50%) translate3d(var(--sky-shift-x), calc(var(--sky-shift-y) - 9px), 0) rotateX(var(--sky-rotate-x)) rotateY(var(--sky-rotate-y)) scale(var(--sky-scale));
  }
  50% {
    transform: translate(-50%, -50%) translate3d(var(--sky-shift-x), calc(var(--sky-shift-y) + 9px), 0) rotateX(calc(var(--sky-rotate-x) - 1.5deg)) rotateY(calc(var(--sky-rotate-y) + 1.5deg)) scale(var(--sky-scale));
  }
}

@keyframes sky-core-breathe {
  0%, 100% { box-shadow: 0 0 52px rgba(55, 118, 255, .48), inset 0 1px rgba(255, 255, 255, .44); }
  50% { box-shadow: 0 0 88px rgba(55, 118, 255, .78), 0 0 28px rgba(104, 242, 196, .24), inset 0 1px rgba(255, 255, 255, .5); }
}

@keyframes sky-node-float {
  0%, 100% { translate: 0 -4px; }
  50% { translate: 0 7px; }
}

@keyframes sky-fallback-drift {
  0% { transform: scale(1.04) translate3d(-1.5%, -1%, 0); filter: saturate(.8) contrast(1.08) hue-rotate(0deg); }
  100% { transform: scale(1.1) translate3d(1.5%, 1%, 0); filter: saturate(1) contrast(1.12) hue-rotate(10deg); }
}

@media (max-width: 900px) {
  .sky-persistent-stage .sky-console {
    top: 70%;
    left: 50%;
    width: min(88vw, 460px);
    --sky-scale: .94;
  }
}

@media (max-width: 620px) {
  .sky-scroll-story > .sky-canvas-wrap { opacity: 1; }
  .sky-canvas { opacity: .5; }
  .sky-fallback { opacity: .2; }
  .webgl-ready .sky-fallback { opacity: .06; }
  .sky-persistent-stage .sky-console {
    top: 71%;
    width: min(92vw, 430px);
    --sky-console-opacity: .92;
    --sky-scale: .86;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-persistent-stage .sky-console,
  .sky-persistent-stage .sky-core,
  .sky-persistent-stage .sky-node,
  .sky-fallback {
    animation: none !important;
  }
}


/* Sticky foreground scene */
.sky-scroll-story > .sky-persistent-stage {
  position: sticky;
  z-index: 2;
  top: 72px;
  width: 100%;
  height: calc(100svh - 72px);
  margin-bottom: calc(-100svh + 72px);
  overflow: hidden;
}

.sky-scroll-story > section {
  z-index: auto;
}

.sky-scroll-story .sky-hero {
  isolation: auto;
}

.sky-scroll-story > section > .container {
  position: relative;
  z-index: 3;
}

.sky-scroll-story > section:not(.sky-hero)::before {
  z-index: 0;
}

@media (max-width: 900px) {
  .sky-scroll-story > .sky-persistent-stage {
    top: 66px;
    height: calc(100svh - 66px);
    margin-bottom: calc(-100svh + 66px);
  }
}