.home-page {
  background: #f7f9fc;
}

.home-page .site-header {
  isolation: isolate;
  color: #eef5ff;
}

.home-page .site-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #071226;
  box-shadow: 0 0 0 100vmax #071226;
  content: "";
  clip-path: inset(0 -100vmax);
}

.home-page .site-header .brand span {
  color: #39dff2;
}

.home-page .site-header nav > a:not(.nav-cta):hover,
.home-page .site-header nav .active {
  color: #53e6ee;
}

.home-page .menu-toggle {
  color: #f5f8ff;
}

.home-page .nav-cta {
  background: #ffffff10;
  border: 1px solid #ffffff35;
}

.home-page .nav-cta:hover {
  background: #ffffff20;
}

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f5f8ff;
  background:
    radial-gradient(ellipse at 73% 48%, #073b65 0, #08244a 27%, transparent 58%),
    radial-gradient(ellipse at 3% 95%, #102960 0, transparent 47%),
    linear-gradient(118deg, #050d20 0%, #07172f 52%, #061126 100%);
}

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

.home-hero::before {
  opacity: .48;
  background-image:
    radial-gradient(circle, #86dcff 1px, transparent 1.7px),
    radial-gradient(circle, #48e5d6 1px, transparent 1.8px),
    radial-gradient(circle, #95a9ff 1px, transparent 1.8px);
  background-position: 8% 23%, 87% 14%, 72% 78%;
  background-size: 173px 157px, 239px 211px, 307px 281px;
  animation: particle-drift 32s linear infinite alternate;
}

.home-hero::after {
  opacity: .24;
  background: linear-gradient(112deg, transparent 35%, #72dbff0c 46%, #72dbff2b 49%, transparent 54%);
  transform: translateX(-45%);
  animation: light-sweep 14s ease-in-out infinite alternate;
}

.home-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1380px;
  min-height: min(760px, calc(100svh - 80px));
  padding-top: 48px;
  padding-bottom: 48px;
}

.home-hero__copy {
  position: relative;
  z-index: 2;
}

.home-page .home-hero__copy .eyebrow {
  color: #50e2e8 !important;
}

.home-hero h1 {
  max-width: 660px;
  margin-bottom: 22px;
  color: #f7faff;
  font-size: clamp(3.1rem, 5.2vw, 5.2rem);
  letter-spacing: -.065em;
}

.home-hero h1 span {
  background: linear-gradient(100deg, #8cb8ff 0%, #46d9ef 54%, #8df0d2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.home-hero__lead {
  max-width: 535px;
  margin: 0;
  color: #b6c8dd;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.home-page .home-hero__actions .button {
  background: linear-gradient(105deg, #287fff, #17c5d5);
  box-shadow: 0 8px 26px #1598ce38;
}

.home-page .home-hero__actions .button:hover {
  background: linear-gradient(105deg, #4792ff, #26d5dc);
}

.home-page .home-hero__actions .button-ghost {
  border-color: #ffffff38;
  background: #ffffff08;
  color: #eef5ff;
  box-shadow: none;
}

.home-page .home-hero__actions .button-ghost:hover {
  background: #ffffff16;
}

.home-hero__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  color: #91a7bf;
  font-size: .79rem;
  letter-spacing: .025em;
}

.home-hero__status > span,
.core-orb__status > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #70edb0;
  box-shadow: 0 0 12px #70edb0a8;
}

.ecosystem {
  position: relative;
  width: min(100%, 680px);
  margin-inline: auto;
  aspect-ratio: 640 / 560;
  isolation: isolate;
}

.ecosystem__ambient {
  position: absolute;
  inset: 15%;
  z-index: -1;
  border-radius: 50%;
  background: #0c8fd535;
  filter: blur(60px);
  animation: ambient-pulse 7s ease-in-out infinite;
}

.ecosystem__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #4b9ef22b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ecosystem__ring--outer {
  width: 94%;
  height: 90%;
  border-style: dashed;
  animation: ring-spin 70s linear infinite;
}

.ecosystem__ring--middle {
  width: 77%;
  height: 76%;
  border-color: #43d5e52c;
  animation: ring-spin-reverse 48s linear infinite;
}

.ecosystem__ring--inner {
  width: 58%;
  height: 59%;
  border-color: #83b9ff32;
  box-shadow: 0 0 45px #067ac51c, inset 0 0 45px #087ec21a;
  animation: ring-breathe 6s ease-in-out infinite;
}

.service-orbit {
  position: absolute;
  inset: 5%;
  animation: service-orbit-spin 54s linear infinite;
}

.ecosystem__connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ecosystem__connections path {
  fill: none;
  stroke: #29c7f5;
  stroke-dasharray: 4 9;
  stroke-linecap: round;
  stroke-opacity: .42;
  stroke-width: 1.2;
  animation: energy-flow 2.8s linear infinite;
}

.ecosystem__connections path:nth-child(even) {
  animation-delay: -1.4s;
}

.service-node {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border-radius: 50%;
  color: #eaf8ff;
  text-align: center;
  text-decoration: none;
  transform: translate(-50%, -50%);
}

.service-node:nth-child(2) {
  top: 17.86%;
  left: 27.34%;
}

.service-node:nth-child(3) {
  top: 17.86%;
  left: 72.66%;
}

.service-node:nth-child(4) {
  top: 50%;
  left: 85.94%;
}

.service-node:nth-child(5) {
  top: 82.14%;
  left: 72.66%;
}

.service-node:nth-child(6) {
  top: 82.14%;
  left: 27.34%;
}

.service-node:nth-child(7) {
  top: 50%;
  left: 14.06%;
}

.service-node__inner {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 10px 6px;
  overflow: hidden;
  border: 1px solid #8ccaff52;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 22%, #87e9ff35, transparent 45%),
    linear-gradient(145deg, #102d54e8, #071b39ed 65%, #0c3050e8);
  box-shadow: 0 0 0 5px #3fa6ff0b, 0 0 26px #00aaff32, inset 0 0 22px #57d8ff1b;
  backdrop-filter: blur(10px);
  animation: service-node-counter-spin 54s linear infinite, service-node-pulse 5.6s ease-in-out infinite;
  transition: border-color .25s, box-shadow .25s, background .25s;
}

.service-node:nth-of-type(2n) .service-node__inner {
  border-color: #58e8d550;
  box-shadow: 0 0 0 5px #43f0d20a, 0 0 28px #16cbb938, inset 0 0 23px #4deac61c;
}

.service-node__inner::after {
  position: absolute;
  inset: 7px;
  border: 1px solid #c0e8ff16;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.service-node__icon {
  color: #8cecff;
  font-size: 1.13rem;
  line-height: 1;
  text-shadow: 0 0 13px #51dbff;
  animation: service-icon-float 4.2s ease-in-out infinite;
}

.service-node:nth-of-type(2n) .service-node__icon {
  color: #8ef3d4;
  text-shadow: 0 0 13px #59eac7;
  animation-delay: -2.1s;
}

.service-node__label {
  max-width: 88px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 8px #081529;
}

.service-node:hover .service-node__inner,
.service-node:focus-visible .service-node__inner {
  border-color: #a7f5ff;
  background-color: #12466b;
  box-shadow: 0 0 0 7px #36cff322, 0 0 38px #23caff80, inset 0 0 24px #57d8ff39;
}

.service-node:focus-visible {
  outline: 2px solid #9af4ff;
  outline-offset: 5px;
}

.ecosystem__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 192px;
  height: 192px;
  place-items: center;
  transform: translate(-50%, -50%);
}

.core-orb {
  position: relative;
  display: grid;
  width: 158px;
  height: 158px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid #57dcffb8;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 20%, #8ceeff59, transparent 32%),
    radial-gradient(ellipse at 50% 80%, #1283d85e, transparent 45%),
    linear-gradient(145deg, #123f70 0%, #0b2954 44%, #071b3a 100%);
  box-shadow: 0 0 0 8px #21bbff12, 0 0 28px #0aaefb74, 0 0 85px #0077df48, inset 0 0 34px #5feaff20;
  animation: core-pulse 4.6s ease-in-out infinite;
}

.core-orb::before,
.core-orb::after {
  position: absolute;
  inset: 10px;
  border: 1px solid #9be9ff30;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.core-orb::after {
  inset: 24px;
  border-color: #8ee8ff20;
}

.core-orb__shine {
  position: absolute;
  top: -45%;
  left: -32%;
  width: 140%;
  height: 68%;
  border-radius: 50%;
  background: linear-gradient(180deg, #b8f5ff35, transparent);
  transform: rotate(-24deg);
}

.core-orb__label {
  position: relative;
  color: #f7fcff;
  font: 800 2.35rem/.95 var(--display);
  letter-spacing: -.09em;
  text-shadow: 0 0 24px #72ddff8c;
}

.core-orb__label i {
  color: #56e7e4;
  font-style: normal;
}

.core-orb__status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a7cbe3;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .17em;
}

.core-orb__status > span {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
}

.core-wave {
  position: absolute;
  inset: 11px;
  border: 1px solid #31d9ff69;
  border-radius: 50%;
  animation: core-wave 4.2s ease-out infinite;
}

.core-wave--two {
  animation-delay: 2.1s;
}

.home-page .capability-strip,
.home-page .section {
  background: #f7f9fc;
  color: var(--ink);
}

.home-page .capability-strip {
  border-color: #e5eaf1;
}

.home-page .section {
  background: #fff;
}

@keyframes service-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes service-node-counter-spin {
  to { transform: rotate(-360deg); }
}

@keyframes service-node-pulse {
  50% { filter: brightness(1.12) drop-shadow(0 0 8px #42d9ff4d); }
}

@keyframes service-icon-float {
  50% { transform: translateY(-2px); }
}

@keyframes ring-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ring-spin-reverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes ring-breathe {
  50% { opacity: .55; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes energy-flow {
  to { stroke-dashoffset: -26; }
}

@keyframes core-pulse {
  50% { box-shadow: 0 0 0 12px #21bbff16, 0 0 42px #0aaefb9c, 0 0 100px #0077df60, inset 0 0 42px #5feaff2e; }
}

@keyframes core-wave {
  0% { opacity: .65; transform: scale(.78); }
  100% { opacity: 0; transform: scale(1.48); }
}

@keyframes ambient-pulse {
  50% { opacity: .62; transform: scale(1.08); }
}

@keyframes particle-drift {
  to { background-position: 12% 18%, 83% 18%, 68% 72%; }
}

@keyframes light-sweep {
  to { transform: translateX(45%); }
}

@media (max-width: 1000px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
  }

  .service-node {
    width: 88px;
    height: 88px;
  }

  .service-node__label {
    font-size: .62rem;
  }

  .core-orb {
    width: 140px;
    height: 140px;
  }

  .ecosystem__core {
    width: 170px;
    height: 170px;
  }
}

@media (max-width: 800px) {
  .home-page .site-header nav.open {
    border: 1px solid #ffffff1f;
    background: #09172beb;
    color: #f5f8ff;
    box-shadow: 0 20px 50px #00000052;
  }

  .home-hero__inner {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 60px;
  }

  .home-hero__copy {
    max-width: 680px;
  }

  .home-hero h1 {
    max-width: 620px;
    font-size: clamp(3rem, 8vw, 4.7rem);
  }

  .ecosystem {
    width: min(100%, 600px);
  }
}

@media (max-width: 520px) {
  .home-hero__inner {
    padding-top: 48px;
    padding-bottom: 42px;
  }

  .home-hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.5rem);
  }

  .home-hero__lead {
    font-size: 1rem;
  }

  .home-hero__actions {
    gap: 9px;
  }

  .home-page .home-hero__actions .button {
    padding: 13px 15px;
    font-size: .86rem;
  }

  .service-node {
    width: clamp(64px, 20vw, 82px);
    height: clamp(64px, 20vw, 82px);
  }

  .service-node__inner {
    gap: 2px;
    padding: 7px 4px;
  }

  .service-node__icon {
    font-size: .95rem;
  }

  .service-node__label {
    max-width: 70px;
    font-size: clamp(.49rem, 2.3vw, .62rem);
  }

  .ecosystem__core {
    width: 134px;
    height: 134px;
  }

  .core-orb {
    width: 116px;
    height: 116px;
    gap: 7px;
  }

  .core-orb__label {
    font-size: 1.8rem;
  }

  .core-orb__status {
    font-size: .39rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero::before,
  .home-hero::after,
  .ecosystem__ambient,
  .ecosystem__ring,
  .ecosystem__connections path,
  .service-orbit,
  .service-node__inner,
  .service-node__icon,
  .core-orb,
  .core-wave {
    animation: none;
  }
}