.sn-main--home {
  padding-bottom: 64px;
}

.sn-homeHero {
  padding: 12px 0 30px;
}

.sn-homeHero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: clamp(38px, 5vw, 72px);
  align-items: start;
}

.sn-homeHero__copy {
  padding: 12px 0;
  max-width: 760px;
}

.sn-homeHero h2 {
  margin-top: 18px;
  max-width: 10ch;
  font-size: clamp(3.2rem, 6vw, 6rem);
  line-height: 0.9;
}

.sn-lead {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: 1.06rem;
}

.sn-scrollCue {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sn-soft);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sn-scrollCue__mouse {
  width: 20px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(117, 232, 255, 0.22);
  position: relative;
}

.sn-scrollCue__mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sn-accent), var(--sn-accent-2));
  transform: translateX(-50%);
  animation: sn-scrollNudge 1.5s ease-in-out infinite;
}

.sn-statStrip--hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 34px;
  max-width: min(100%, 840px);
}

.sn-card--metric {
  min-height: 176px;
  padding: 22px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%),
    rgba(8, 10, 16, 0.68);
  backdrop-filter: blur(18px);
}

.sn-card--metric .sn-card__header {
  margin-bottom: 14px;
}

.sn-card--metric strong {
  display: block;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1;
  margin-bottom: 8px;
}

.sn-card--metric span {
  color: var(--sn-soft);
  font-size: 0.9rem;
}

.sn-homeHero__visual {
  position: relative;
  min-height: 560px;
}

.sn-spaceScene {
  position: relative;
  min-height: 560px;
  perspective: 1400px;
  transform-style: preserve-3d;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(117, 232, 255, 0.12);
  background:
    radial-gradient(circle at 30% 24%, rgba(117, 232, 255, 0.1), transparent 22%),
    radial-gradient(circle at 72% 30%, rgba(92, 124, 255, 0.22), transparent 28%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 46%, rgba(9, 12, 20, 0.92));
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
  isolation: isolate;
  transform: translate3d(0, calc(var(--sn-home-progress) * -20px), 0);
}

.sn-spaceScene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 26%),
    linear-gradient(140deg, rgba(92, 124, 255, 0.06), transparent 45%);
  pointer-events: none;
}

.sn-spaceScene__stars,
.sn-spaceScene__aurora,
.sn-spaceScene__grid,
.sn-spaceHalo,
.sn-spaceSpline,
.sn-cometTrail,
.sn-spaceSatellite,
.sn-spaceBeam,
.sn-spaceGlow,
.sn-orbitRing,
.sn-orbitCore,
.sn-floatingCard,
.sn-spaceStatus {
  position: absolute;
}

.sn-spaceScene__stars {
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 22%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 48%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.4px),
    radial-gradient(circle at 56% 64%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.3px),
    radial-gradient(circle at 76% 80%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.4px);
  opacity: 0.65;
}

.sn-spaceScene__aurora {
  inset: -6% -10% 18%;
  background:
    radial-gradient(circle at 18% 30%, rgba(117, 232, 255, 0.18), transparent 24%),
    radial-gradient(circle at 76% 22%, rgba(92, 124, 255, 0.18), transparent 28%),
    linear-gradient(120deg, rgba(117, 232, 255, 0.08), rgba(92, 124, 255, 0.04) 44%, transparent 68%);
  filter: blur(42px);
  opacity: 0.8;
  animation: sn-auroraShift 16s ease-in-out infinite alternate;
}

.sn-spaceScene__grid {
  inset: auto -10% -6% -10%;
  height: 46%;
  background:
    linear-gradient(rgba(117, 232, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 232, 255, 0.12) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(720px) rotateX(76deg);
  transform-origin: bottom center;
  opacity: 0.26;
}

.sn-spaceHalo {
  width: 420px;
  height: 420px;
  top: 72px;
  left: 78px;
  border-radius: 999px;
  border: 1px solid rgba(117, 232, 255, 0.08);
  box-shadow: inset 0 0 42px rgba(117, 232, 255, 0.03);
  transform: translateZ(10px);
}

.sn-spaceSpline {
  border-radius: 999px;
  filter: blur(10px);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.sn-spaceSpline--one {
  width: 340px;
  height: 118px;
  top: 110px;
  right: -18px;
  background:
    linear-gradient(90deg, rgba(117, 232, 255, 0), rgba(117, 232, 255, 0.85), rgba(92, 124, 255, 0));
  transform: rotate(-28deg) translateZ(30px);
  animation: sn-splineWaveOne 12s ease-in-out infinite;
}

.sn-spaceSpline--two {
  width: 310px;
  height: 108px;
  bottom: 120px;
  left: -20px;
  background:
    linear-gradient(90deg, rgba(92, 124, 255, 0), rgba(92, 124, 255, 0.8), rgba(117, 232, 255, 0));
  transform: rotate(22deg) translateZ(24px);
  animation: sn-splineWaveTwo 14s ease-in-out infinite;
}

.sn-spaceSpline--three {
  width: 190px;
  height: 190px;
  top: 42px;
  left: 142px;
  background:
    conic-gradient(from 40deg, rgba(117, 232, 255, 0), rgba(117, 232, 255, 0.8), rgba(92, 124, 255, 0.4), rgba(117, 232, 255, 0));
  filter: blur(18px);
  transform: translateZ(18px);
  animation: sn-orbPulse 10s ease-in-out infinite;
}

.sn-cometTrail {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(117, 232, 255, 0.95), rgba(255, 255, 255, 0));
  box-shadow: 0 0 24px rgba(117, 232, 255, 0.45);
  opacity: 0.8;
}

.sn-cometTrail--one {
  width: 160px;
  top: 104px;
  left: 54%;
  transform: rotate(-18deg);
  animation: sn-cometMoveOne 8s ease-in-out infinite;
}

.sn-cometTrail--two {
  width: 120px;
  top: 62%;
  left: 10%;
  transform: rotate(24deg);
  animation: sn-cometMoveTwo 10s ease-in-out infinite;
}

.sn-spaceSatellite {
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(117, 232, 255, 0.42) 48%, transparent 72%);
  box-shadow: 0 0 26px rgba(117, 232, 255, 0.28);
}

.sn-spaceSatellite--one {
  width: 20px;
  height: 20px;
  top: 78px;
  right: 124px;
  animation: sn-satelliteDrift 11s ease-in-out infinite;
}

.sn-spaceSatellite--two {
  width: 14px;
  height: 14px;
  bottom: 96px;
  left: 112px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(92, 124, 255, 0.44) 52%, transparent 74%);
  animation: sn-satelliteDrift 13s ease-in-out infinite reverse;
}

.sn-spaceBeam {
  inset: auto 12% 84px 12%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(117, 232, 255, 0), rgba(117, 232, 255, 0.82), rgba(92, 124, 255, 0.12), rgba(117, 232, 255, 0));
  filter: blur(1px);
  opacity: 0.72;
  animation: sn-beamSweep 12s ease-in-out infinite;
}

.sn-spaceGlow {
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.82;
}

.sn-spaceGlow--one {
  width: 220px;
  height: 220px;
  top: 72px;
  right: 72px;
  background: radial-gradient(circle, rgba(117, 232, 255, 0.85) 0%, rgba(117, 232, 255, 0.1) 58%, transparent 72%);
  animation: sn-glowPulse 10s ease-in-out infinite;
}

.sn-spaceGlow--two {
  width: 260px;
  height: 260px;
  bottom: 82px;
  left: 46px;
  background: radial-gradient(circle, rgba(92, 124, 255, 0.6) 0%, rgba(92, 124, 255, 0.08) 58%, transparent 74%);
  animation: sn-glowPulse 12s ease-in-out infinite reverse;
}

.sn-orbitRing {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.02);
}

.sn-orbitRing--one {
  width: 320px;
  height: 320px;
  top: 110px;
  left: 118px;
  animation: sn-spin 22s linear infinite;
}

.sn-orbitRing--two {
  width: 420px;
  height: 420px;
  top: 66px;
  left: 64px;
  border-color: rgba(117, 232, 255, 0.16);
  animation: sn-spinReverse 28s linear infinite;
}

.sn-orbitRing--three {
  width: 500px;
  height: 500px;
  top: 26px;
  left: 24px;
  border-color: rgba(92, 124, 255, 0.12);
  animation: sn-spin 36s linear infinite;
}

.sn-orbitCore {
  inset: 50% auto auto 50%;
  width: 230px;
  padding: 30px 28px;
  border-radius: 28px;
  transform: translate3d(-50%, -50%, 80px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 36%),
    rgba(5, 8, 14, 0.72);
  border: 1px solid rgba(117, 232, 255, 0.16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(22px);
  z-index: 3;
  animation: sn-corePulse 11s ease-in-out infinite;
}

.sn-orbitCore__eyebrow {
  display: inline-flex;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  align-items: center;
  background: rgba(117, 232, 255, 0.09);
  border: 1px solid rgba(117, 232, 255, 0.12);
  color: var(--sn-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sn-orbitCore strong {
  display: block;
  margin-top: 18px;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: 2rem;
  letter-spacing: -0.05em;
}

.sn-orbitCore p {
  margin: 10px 0 0;
  color: var(--sn-muted);
}

.sn-floatingCard {
  min-width: 170px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(6, 8, 13, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  z-index: 4;
  pointer-events: none;
}

.sn-spaceStatus {
  left: 22px;
  bottom: 20px;
  min-width: 184px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(6, 8, 13, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  z-index: 4;
}

.sn-spaceStatus span {
  display: block;
  color: var(--sn-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sn-spaceStatus strong {
  display: block;
  margin-top: 8px;
  font-size: 0.98rem;
}

.sn-floatingCard span {
  display: block;
  margin-bottom: 6px;
  color: var(--sn-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sn-floatingCard strong {
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.sn-floatingCard--ai {
  top: 72px;
  left: 34px;
  transform: translate3d(0, 0, 78px) rotateY(-12deg) rotateZ(-4deg);
  animation: sn-cardDriftLeft 9s ease-in-out infinite;
}

.sn-floatingCard--audio {
  top: 88px;
  right: 28px;
  transform: translate3d(0, 0, 72px) rotateY(12deg) rotateZ(4deg);
  animation: sn-cardDriftRight 8s ease-in-out infinite;
}

.sn-floatingCard--mock {
  right: 44px;
  bottom: 42px;
  transform: translate3d(0, 0, 68px) rotateX(4deg) rotateY(-8deg);
  animation: sn-cardDriftLow 10s ease-in-out infinite;
}

.sn-homeOverview,
.sn-homeSupport,
.sn-homeStrategy {
  display: grid;
  gap: 34px;
}

.sn-homeOverview__intro,
.sn-homeSupport__intro {
  max-width: 760px;
}

.sn-homeOverview__intro h2,
.sn-homeSupport__intro h2 {
  margin: 14px 0 0;
}

.sn-homeOverview__intro p,
.sn-homeSupport__intro p {
  margin: 14px 0 0;
  color: var(--sn-muted);
  max-width: 60ch;
}

.sn-card--pillar,
.sn-card--support,
.sn-card--exam,
.sn-card--statement,
.sn-card--lane {
  min-height: 100%;
}

.sn-card--pillar {
  background:
    linear-gradient(180deg, rgba(117, 232, 255, 0.07), transparent 42%),
    rgba(8, 11, 18, 0.74);
}

.sn-card--support {
  background:
    linear-gradient(180deg, rgba(92, 124, 255, 0.1), transparent 44%),
    rgba(7, 10, 17, 0.74);
}

.sn-card--exam {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.sn-card--exam .sn-card__metaStack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sn-card--statement {
  padding: 28px;
}

.sn-divider {
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(90deg, rgba(117, 232, 255, 0.28), rgba(255, 255, 255, 0.04));
}

.sn-homeStrategy {
  grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.86fr);
  align-items: start;
}

.sn-homeStrategy__aside {
  display: grid;
  gap: 18px;
}

.sn-sectionHeader--compact {
  margin-bottom: 0;
}

.sn-laneList {
  display: grid;
  gap: 18px;
}

.sn-card--lane {
  padding: 20px 22px;
  background:
    linear-gradient(90deg, rgba(117, 232, 255, 0.08), transparent 38%),
    rgba(7, 10, 16, 0.76);
}

.sn-card--lane h3 {
  margin-top: 0;
}

.sn-ctaPanel {
  align-items: center;
  gap: 28px;
  padding: 30px;
}

@keyframes sn-cardDriftLeft {
  0%,
  100% {
    transform: translate3d(0, 0, 78px) rotateY(-12deg) rotateZ(-4deg);
  }

  50% {
    transform: translate3d(10px, -12px, 96px) rotateY(-6deg) rotateZ(-1deg);
  }
}

@keyframes sn-cardDriftRight {
  0%,
  100% {
    transform: translate3d(0, 0, 72px) rotateY(12deg) rotateZ(4deg);
  }

  50% {
    transform: translate3d(-10px, -10px, 92px) rotateY(8deg) rotateZ(1deg);
  }
}

@keyframes sn-cardDriftLow {
  0%,
  100% {
    transform: translate3d(0, 0, 68px) rotateX(4deg) rotateY(-8deg);
  }

  50% {
    transform: translate3d(-8px, -14px, 84px) rotateX(2deg) rotateY(-4deg);
  }
}

@keyframes sn-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes sn-spinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes sn-auroraShift {
  0% {
    transform: translate3d(-2%, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(3%, 2%, 0) scale(1.08);
  }
}

@keyframes sn-splineWaveOne {
  0%,
  100% {
    transform: rotate(-28deg) translate3d(0, 0, 30px) scaleX(1);
  }

  50% {
    transform: rotate(-22deg) translate3d(-12px, 12px, 48px) scaleX(1.08);
  }
}

@keyframes sn-splineWaveTwo {
  0%,
  100% {
    transform: rotate(22deg) translate3d(0, 0, 24px) scaleX(1);
  }

  50% {
    transform: rotate(28deg) translate3d(14px, -10px, 42px) scaleX(1.1);
  }
}

@keyframes sn-orbPulse {
  0%,
  100% {
    transform: translate3d(0, 0, 18px) scale(1);
    opacity: 0.68;
  }

  50% {
    transform: translate3d(0, 0, 34px) scale(1.08);
    opacity: 0.9;
  }
}

@keyframes sn-cometMoveOne {
  0% {
    opacity: 0;
    transform: translate3d(-16px, -8px, 0) rotate(-18deg) scaleX(0.86);
  }

  25%,
  75% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate3d(90px, 38px, 0) rotate(-18deg) scaleX(1.08);
  }
}

@keyframes sn-cometMoveTwo {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(24deg) scaleX(0.84);
  }

  30%,
  70% {
    opacity: 0.74;
  }

  100% {
    opacity: 0;
    transform: translate3d(78px, -26px, 0) rotate(24deg) scaleX(1.06);
  }
}

@keyframes sn-glowPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.76;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.92;
  }
}

@keyframes sn-corePulse {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 80px) scale(1);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  }

  50% {
    transform: translate3d(-50%, -50%, 104px) scale(1.03);
    box-shadow: 0 34px 82px rgba(0, 0, 0, 0.56);
  }
}

@keyframes sn-scrollNudge {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.8;
  }

  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}

@keyframes sn-satelliteDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 14px);
  }

  50% {
    transform: translate3d(0, -16px, 30px);
  }
}

@media screen and (max-width: 1120px) {
  .sn-homeHero__layout,
  .sn-homeStrategy {
    grid-template-columns: 1fr;
  }

  .sn-homeHero__visual {
    min-height: 500px;
  }

  .sn-spaceScene {
    min-height: 500px;
  }

  .sn-floatingCard--audio {
    right: 20px;
  }

  .sn-spaceStatus {
    bottom: 18px;
  }
}

@media screen and (max-width: 820px) {
  .sn-statStrip--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .sn-homeHero__visual,
  .sn-spaceScene {
    min-height: 460px;
  }

  .sn-orbitRing--one {
    width: 220px;
    height: 220px;
    top: 122px;
    left: 70px;
  }

  .sn-orbitRing--two {
    width: 300px;
    height: 300px;
    top: 88px;
    left: 34px;
  }

  .sn-orbitRing--three {
    width: 360px;
    height: 360px;
    top: 54px;
    left: 2px;
  }

  .sn-orbitCore {
    width: 200px;
    padding: 24px 22px;
  }

  .sn-floatingCard {
    min-width: 148px;
    padding: 14px 16px;
  }

  .sn-floatingCard--ai {
    top: 36px;
    left: 16px;
  }

  .sn-floatingCard--audio {
    top: 46px;
    right: 14px;
  }

  .sn-floatingCard--mock {
    right: 20px;
    bottom: 24px;
  }

  .sn-spaceStatus {
    left: 16px;
    bottom: 16px;
  }

  .sn-spaceSpline--one {
    width: 260px;
    top: 126px;
    right: -32px;
  }

  .sn-spaceSpline--two {
    width: 250px;
    bottom: 126px;
    left: -24px;
  }

  .sn-cometTrail--one,
  .sn-cometTrail--two {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .sn-homeHero {
    padding-top: 4px;
  }

  .sn-statStrip--hero {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }

  .sn-homeHero h2 {
    max-width: 100%;
    font-size: clamp(2.6rem, 13vw, 4.1rem);
  }

  .sn-homeHero__visual,
  .sn-spaceScene {
    min-height: 360px;
  }

  .sn-spaceScene {
    border-radius: 26px;
  }

  .sn-orbitRing--one {
    width: 180px;
    height: 180px;
    top: 104px;
    left: 86px;
  }

  .sn-orbitRing--two {
    width: 240px;
    height: 240px;
    top: 76px;
    left: 52px;
  }

  .sn-orbitRing--three {
    width: 300px;
    height: 300px;
    top: 34px;
    left: 18px;
  }

  .sn-orbitCore {
    width: 170px;
    padding: 18px;
  }

  .sn-orbitCore strong {
    font-size: 1.55rem;
  }

  .sn-floatingCard {
    min-width: auto;
    width: 140px;
    padding: 12px 14px;
  }

  .sn-floatingCard strong {
    font-size: 0.92rem;
  }

  .sn-floatingCard--audio {
    display: none;
  }

  .sn-floatingCard--mock {
    left: auto;
    right: 12px;
    bottom: 18px;
  }

  .sn-spaceStatus {
    right: 12px;
    left: auto;
    bottom: 14px;
    min-width: auto;
    max-width: 180px;
    padding: 12px 14px;
  }

  .sn-spaceSpline--one,
  .sn-spaceSpline--two,
  .sn-spaceSpline--three {
    opacity: 0.48;
  }

  .sn-scrollCue {
    margin-top: 16px;
  }

}

.sn-homeHero__layout {
  align-items: start;
}

.sn-homeHero__visual {
  min-height: auto;
  display: grid;
  gap: 18px;
  align-content: start;
}

.sn-storyHero {
  position: relative;
  min-height: 420px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(117, 232, 255, 0.14);
  background: rgba(8, 11, 18, 0.84);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.46);
  transform: translate3d(0, calc(var(--sn-home-progress) * -12px), 0);
}

.sn-storyHero::before,
.sn-storyHero::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
}

.sn-storyHero::before {
  width: 280px;
  height: 96px;
  top: 36px;
  right: -44px;
  background: linear-gradient(90deg, rgba(117, 232, 255, 0), rgba(117, 232, 255, 0.58), rgba(92, 124, 255, 0));
  filter: blur(12px);
  transform: rotate(-18deg);
  animation: sn-ribbonSweepReverse 14s ease-in-out infinite;
}

.sn-storyHero::after {
  width: 260px;
  height: 94px;
  left: -34px;
  bottom: 46px;
  background: linear-gradient(90deg, rgba(92, 124, 255, 0), rgba(92, 124, 255, 0.48), rgba(117, 232, 255, 0));
  filter: blur(13px);
  transform: rotate(18deg);
  animation: sn-ribbonSweep 12s ease-in-out infinite;
}

.sn-storyHero__frame,
.sn-storyHero__gradient,
.sn-storyHero__stat,
.sn-storyHero__note {
  position: absolute;
}

.sn-storyHero__frame {
  inset: 0;
}

.sn-storyHero__frame img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.sn-storyHero__gradient {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 14, 0.12), rgba(4, 8, 14, 0.34) 42%, rgba(4, 8, 14, 0.92) 100%),
    linear-gradient(120deg, rgba(4, 8, 14, 0.42), transparent 34%, rgba(92, 124, 255, 0.18) 100%);
}

.sn-storyHero__stat,
.sn-storyHero__note,
.sn-storyCard__copy {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(5, 8, 13, 0.74);
  backdrop-filter: blur(18px);
}

.sn-storyHero__stat {
  top: 18px;
  left: 18px;
  z-index: 2;
  max-width: min(58%, 260px);
  padding: 14px 16px;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.sn-storyHero__stat span,
.sn-storyHero__note span,
.sn-storyCard__copy span {
  display: block;
  color: var(--sn-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sn-storyHero__stat strong,
.sn-storyHero__note strong,
.sn-storyCard__copy strong {
  display: block;
  margin-top: 8px;
  font-family: "Sora", "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.38rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.sn-storyHero__note {
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: min(68%, 320px);
  padding: 18px;
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}

.sn-storyHero__note p,
.sn-storyCard__copy p {
  margin: 10px 0 0;
  color: var(--sn-muted);
  line-height: 1.62;
}

.sn-storyStack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}

.sn-storyCard {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(117, 232, 255, 0.12);
  background: rgba(8, 11, 18, 0.78);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
}

.sn-storyCard__image {
  position: relative;
  min-height: 180px;
}

.sn-storyCard__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 14, 0.05), rgba(4, 8, 14, 0.18) 42%, rgba(4, 8, 14, 0.64) 100%);
}

.sn-storyCard__image img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: block;
  object-fit: cover;
}

.sn-storyCard__copy {
  position: relative;
  margin: -26px 14px 14px;
  padding: 16px;
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.sn-storyCard__copy strong {
  font-size: 1.05rem;
}

.sn-storyCard__copy p {
  font-size: 0.92rem;
}

@media screen and (max-width: 1120px) {
  .sn-storyHero {
    min-height: 390px;
  }

  .sn-storyHero__frame img {
    min-height: 390px;
  }
}

@media screen and (max-width: 820px) {
  .sn-storyStack {
    grid-template-columns: 1fr;
  }

  .sn-storyCard__image,
  .sn-storyCard__image img {
    min-height: 200px;
  }
}

@media screen and (max-width: 640px) {
  .sn-storyHero {
    min-height: 340px;
    border-radius: 26px;
  }

  .sn-storyHero__frame img {
    min-height: 340px;
  }

  .sn-storyHero__stat,
  .sn-storyHero__note {
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
  }

  .sn-storyHero__stat {
    top: 14px;
    padding: 12px 14px;
  }

  .sn-storyHero__note {
    right: 14px;
    bottom: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .sn-storyCard {
    border-radius: 22px;
  }

  .sn-storyCard__image,
  .sn-storyCard__image img {
    min-height: 170px;
  }

  .sn-storyCard__copy {
    margin: -20px 12px 12px;
    padding: 14px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-orbitRing,
  .sn-floatingCard,
  .sn-spaceScene__aurora,
  .sn-spaceSpline,
  .sn-cometTrail,
  .sn-spaceSatellite,
  .sn-spaceBeam,
  .sn-spaceGlow,
  .sn-orbitCore {
    animation: none !important;
  }
}