.home-hero {
  --home-hero-surface: #ffffff;
  --home-hero-line: rgb(148 163 184 / 0.28);
  --home-hero-heading: #0f172a;
  --home-hero-body: #475569;
  --home-hero-muted: #64748b;
  --home-hero-button: #172033;
  --home-hero-button-hover: #0f172a;
  --home-hero-glow: rgb(56 189 248 / 0.23);
  --home-hero-shadow: rgb(15 23 42 / 0.24);
  --home-map-card: rgb(255 255 255 / 0.86);
  --home-map-card-strong: rgb(255 255 255 / 0.96);
  --home-map-border: rgb(100 116 139 / 0.34);
  --home-map-border-soft: rgb(148 163 184 / 0.2);
  --home-map-line: rgb(71 85 105 / 0.42);
  --home-map-label: #334155;
  --home-map-muted: #64748b;
  --home-map-chip: rgb(226 232 240 / 0.72);
  --home-matrix-rail: #0f172a;
  --home-matrix-rule: rgb(100 116 139 / 0.22);
  position: relative;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--home-hero-line);
  background: var(--home-hero-surface);
  color: var(--home-hero-body);
}

.dark .home-hero {
  --home-hero-surface: #020617;
  --home-hero-line: rgb(148 163 184 / 0.2);
  --home-hero-heading: #f8fafc;
  --home-hero-body: #cbd5e1;
  --home-hero-muted: #94a3b8;
  --home-hero-button: #0ea5e9;
  --home-hero-button-hover: #38bdf8;
  --home-hero-glow: rgb(56 189 248 / 0.28);
  --home-hero-shadow: rgb(0 0 0 / 0.42);
  --home-map-card: rgb(15 23 42 / 0.84);
  --home-map-card-strong: rgb(15 23 42 / 0.96);
  --home-map-border: rgb(148 163 184 / 0.32);
  --home-map-border-soft: rgb(148 163 184 / 0.15);
  --home-map-line: rgb(148 163 184 / 0.38);
  --home-map-label: #e2e8f0;
  --home-map-muted: #94a3b8;
  --home-map-chip: rgb(51 65 85 / 0.78);
  --home-matrix-rail: #020617;
  --home-matrix-rule: rgb(148 163 184 / 0.18);
}

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

.home-hero::before {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.68) 0%, rgb(255 255 255 / 0.29) 48%, transparent 74%),
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(226 232 240 / 0.08));
}

.dark .home-hero::before {
  background: linear-gradient(90deg, rgb(2 6 23 / 0.54) 0%, rgb(2 6 23 / 0.2) 50%, transparent 74%);
}

.home-hero::after {
  background:
    radial-gradient(circle at 76% 48%, var(--home-hero-glow), transparent 26%),
    linear-gradient(180deg, transparent 80%, rgb(15 23 42 / 0.03));
}

.home-hero-background-picture,
.home-hero-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero-background {
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 320ms ease;
}

.home-hero-background.is-loaded {
  opacity: 1;
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1184px);
  min-height: 650px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.home-hero-copy {
  position: relative;
  z-index: 8;
  width: 61%;
  max-width: 710px;
  padding: 58px 0 64px;
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 11px;
  border: 1px solid rgb(56 189 248 / 0.3);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  color: #0369a1;
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.01em;
}

.dark .home-hero-eyebrow {
  background: rgb(2 6 23 / 0.34);
  color: #7dd3fc;
}

.home-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 4px rgb(56 189 248 / 0.14);
}

.home-hero h1 {
  max-width: 700px;
  margin: 0;
  color: var(--home-hero-heading);
  font-size: clamp(36px, 3vw, 48px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.home-hero-lead {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--home-hero-body);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.015em;
}

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

.home-hero-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.home-hero-button:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.home-hero-button-primary {
  background: var(--home-hero-button);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.14);
  color: #ffffff;
}

.home-hero-button-primary:hover {
  background: var(--home-hero-button-hover);
  color: #ffffff;
}

.home-hero-button-secondary {
  border-color: rgb(148 163 184 / 0.4);
  background: rgb(255 255 255 / 0.45);
  color: var(--home-hero-heading);
  backdrop-filter: blur(10px);
}

.home-hero-button-secondary:hover {
  border-color: rgb(100 116 139 / 0.52);
  background: rgb(255 255 255 / 0.68);
  color: var(--home-hero-heading);
}

.dark .home-hero-button-secondary {
  background: rgb(15 23 42 / 0.34);
}

.dark .home-hero-button-secondary:hover {
  background: rgb(30 41 59 / 0.58);
}

.home-hero-picker {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border: 1px solid rgb(148 163 184 / 0.3);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.5);
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease;
}

.dark .home-hero-picker {
  background: rgb(15 23 42 / 0.42);
}

.home-hero[data-hero-ready="false"] .home-hero-picker {
  pointer-events: none;
  opacity: 0.45;
}

.home-hero-picker-label {
  padding: 0 8px 0 7px;
  color: var(--home-hero-muted);
  font: 650 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

.home-hero-picker-button {
  width: 28px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--home-hero-muted);
  cursor: pointer;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.home-hero-picker-button:hover {
  background: rgb(148 163 184 / 0.13);
  color: var(--home-hero-heading);
}

.home-hero-picker-button[aria-pressed="true"] {
  background: #0ea5e9;
  box-shadow: 0 4px 12px rgb(14 165 233 / 0.3);
  color: #ffffff;
}

.home-hero-picker-button:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.home-hero-panel[hidden] {
  display: none;
}

.home-hero-panel:not([hidden]) {
  animation: home-hero-panel-enter 360ms ease both;
}

.home-hero-visual {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: -86px;
  width: 585px;
  height: 550px;
  transform: translateY(-50%);
  pointer-events: none;
  perspective: 1000px;
}

.home-hero-visual-aura {
  position: absolute;
  inset: 14% 9%;
  border-radius: 50%;
  opacity: 0.9;
  background: radial-gradient(circle, rgb(125 211 252 / 0.28), rgb(56 189 248 / 0.08) 42%, transparent 70%);
  filter: blur(20px);
}

.home-hero-lazy-image {
  opacity: 0;
  transition: opacity 260ms ease;
}

.home-hero-lazy-image.is-loaded {
  opacity: var(--home-asset-opacity, 1);
}

.home-hero-orbit {
  --home-asset-opacity: 0.72;
  position: absolute;
  z-index: 1;
  width: 520px;
  height: 520px;
  top: 14px;
  left: 4px;
  filter: drop-shadow(0 24px 34px var(--home-hero-shadow));
  animation: home-orbit-spin 36s linear infinite;
}

.home-hero-engine {
  position: absolute;
  z-index: 3;
  width: 500px;
  height: auto;
  top: 72px;
  left: 34px;
  filter: drop-shadow(0 34px 34px var(--home-hero-shadow));
  transform-origin: 50% 58%;
  animation: home-engine-float 8s ease-in-out infinite;
}

.home-hero-packets {
  position: absolute;
  z-index: 5;
  width: 210px;
  height: auto;
  right: 1px;
  bottom: 23px;
  filter: drop-shadow(0 20px 24px var(--home-hero-shadow));
  animation: home-packets-drift 7s ease-in-out infinite;
}

.home-flow-map,
.home-matrix-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-flow-map {
  filter: drop-shadow(0 28px 36px var(--home-hero-shadow));
}

.home-flow-map .map-ring {
  fill: none;
  stroke: var(--home-map-border-soft);
  stroke-width: 1;
  stroke-dasharray: 3 12;
}

.home-flow-map .map-card {
  fill: var(--home-map-card);
  stroke: var(--home-map-border);
  stroke-width: 1.2;
}

.home-flow-map .map-card-strong {
  fill: var(--home-map-card-strong);
  stroke: var(--home-map-border);
  stroke-width: 1.3;
}

.home-flow-map .map-card-layer {
  fill: var(--home-map-card);
  stroke: var(--home-map-border-soft);
  stroke-width: 1;
}

.home-flow-map .map-base-line {
  fill: none;
  stroke: var(--home-map-line);
  stroke-width: 1.6;
}

.home-flow-map .map-flow-line {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  animation: home-map-flow 6s linear infinite;
}

.home-flow-map .map-label {
  fill: var(--home-map-label);
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

.home-flow-map .map-caption {
  fill: var(--home-map-muted);
  font: 600 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}

.home-flow-map .map-row {
  fill: var(--home-map-chip);
}

.home-flow-map .map-row-strong {
  fill: #38bdf8;
}

.home-flow-map .map-node-ring {
  fill: var(--home-map-card-strong);
  stroke: rgb(56 189 248 / 0.56);
  stroke-width: 1.4;
}

.home-flow-map .map-node {
  fill: #38bdf8;
  transform-box: fill-box;
  transform-origin: center;
  animation: home-map-node-pulse 3.4s ease-in-out infinite;
}

.home-flow-map .map-format-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: home-map-card-float 7s ease-in-out infinite;
}

.home-flow-map .map-format-card:nth-of-type(2) {
  animation-delay: -1.8s;
}

.home-flow-map .map-format-card:nth-of-type(3) {
  animation-delay: -3.7s;
}

.home-flow-map .map-format-card:nth-of-type(4) {
  animation-delay: -5.2s;
}

.home-flow-map .map-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: home-map-core-breathe 5.8s ease-in-out infinite;
}

.home-matrix-map {
  filter: drop-shadow(0 26px 34px var(--home-hero-shadow));
}

.home-matrix-map .matrix-panel {
  fill: var(--home-map-card-strong);
  stroke: var(--home-map-border);
  stroke-width: 1.25;
}

.home-matrix-map .matrix-rail {
  fill: var(--home-matrix-rail);
}

.home-matrix-map .matrix-rule {
  stroke: var(--home-matrix-rule);
  stroke-width: 1;
}

.home-matrix-map .matrix-grid {
  stroke: var(--home-matrix-rule);
  stroke-width: 0.8;
  stroke-dasharray: 2 7;
}

.home-matrix-map .matrix-heading {
  fill: var(--home-map-label);
  font: 760 15px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.11em;
}

.home-matrix-map .matrix-kicker {
  fill: var(--home-map-muted);
  font: 650 8px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.09em;
}

.home-matrix-map .matrix-index {
  fill: #38bdf8;
  font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.home-matrix-map .matrix-label {
  fill: var(--home-map-label);
  font: 720 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.075em;
}

.home-matrix-map .matrix-caption {
  fill: var(--home-map-muted);
  font: 630 7.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.055em;
}

.home-matrix-map .matrix-chip {
  fill: var(--home-map-chip);
  stroke: var(--home-map-border-soft);
  stroke-width: 0.8;
}

.home-matrix-map .matrix-chip-text {
  fill: var(--home-map-label);
  font: 680 7.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.045em;
}

.home-matrix-map .matrix-rail-meter {
  transform-box: fill-box;
  transform-origin: left center;
  animation: home-matrix-rail-meter 5.8s ease-in-out infinite;
}

.home-matrix-map .matrix-rail-meter-two {
  animation-delay: -1.8s;
}

.home-matrix-map .matrix-rail-meter-three {
  animation-delay: -3.6s;
}

.home-matrix-map .matrix-status-path {
  fill: none;
  stroke: var(--home-matrix-rule);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
}

.home-matrix-map .matrix-status-ring,
.home-matrix-map .matrix-status-core {
  transform-box: fill-box;
  transform-origin: center;
}

.home-matrix-map .matrix-status-ring {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 1.3;
  animation: home-matrix-status-ring 5.6s ease-out infinite;
}

.home-matrix-map .matrix-status-core {
  fill: #38bdf8;
  animation: home-matrix-status-core 5.6s ease-in-out infinite;
}

.home-matrix-map .matrix-status-two .matrix-status-ring,
.home-matrix-map .matrix-status-two .matrix-status-core {
  animation-delay: -4.2s;
}

.home-matrix-map .matrix-status-three .matrix-status-ring,
.home-matrix-map .matrix-status-three .matrix-status-core {
  animation-delay: -2.8s;
}

.home-matrix-map .matrix-status-four .matrix-status-ring,
.home-matrix-map .matrix-status-four .matrix-status-core {
  animation-delay: -1.4s;
}

.home-matrix-map .matrix-format-live {
  transform-box: fill-box;
  transform-origin: center;
  animation: home-matrix-format-live 7.5s ease-in-out infinite;
}

.home-matrix-map .matrix-format-two {
  animation-delay: -1.5s;
}

.home-matrix-map .matrix-format-three {
  animation-delay: -3s;
}

.home-matrix-map .matrix-format-four {
  animation-delay: -4.5s;
}

.home-matrix-map .matrix-format-five {
  animation-delay: -6s;
}

.home-matrix-map .matrix-progress {
  transform-box: fill-box;
  transform-origin: left center;
  animation: home-matrix-progress 4.6s ease-in-out infinite;
}

.home-matrix-map .matrix-wave {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16 7;
  animation: home-matrix-wave 4s linear infinite;
}

.home-matrix-map .matrix-dot {
  fill: #38bdf8;
  transform-box: fill-box;
  transform-origin: center;
  animation: home-matrix-dot-pulse 3s ease-in-out infinite;
}

.home-matrix-map .matrix-dot:nth-child(3n + 1) {
  animation-delay: -1s;
}

.home-matrix-map .matrix-dot:nth-child(3n + 2) {
  animation-delay: -2s;
}

.home-matrix-map .matrix-locale-chip {
  transform-box: fill-box;
  transform-origin: center;
  animation: home-matrix-locale-chip 6s ease-in-out infinite;
}

.home-matrix-map .matrix-locale-light {
  fill: #38bdf8;
  opacity: 0.72;
}

.home-matrix-map .matrix-locale-two {
  animation-delay: -4.5s;
}

.home-matrix-map .matrix-locale-three {
  animation-delay: -3s;
}

.home-matrix-map .matrix-locale-four {
  animation-delay: -1.5s;
}

@keyframes home-hero-panel-enter {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

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

@keyframes home-engine-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateX(1deg) rotateY(-2deg) rotateZ(-1deg);
  }
  50% {
    transform: translate3d(0, -13px, 0) rotateX(-1deg) rotateY(3deg) rotateZ(1deg);
  }
}

@keyframes home-packets-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(-7px, -15px, 0) rotate(3deg);
  }
}

@keyframes home-map-flow {
  to {
    stroke-dashoffset: -64;
  }
}

@keyframes home-map-node-pulse {
  0%,
  100% {
    transform: scale(0.78);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes home-map-card-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes home-map-core-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes home-matrix-rail-meter {
  0%,
  100% {
    transform: scaleX(0.58);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes home-matrix-status-ring {
  0%,
  18% {
    transform: scale(0.45);
    opacity: 0;
  }
  25% {
    opacity: 0.9;
  }
  48%,
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

@keyframes home-matrix-status-core {
  0%,
  18%,
  48%,
  100% {
    transform: scale(0.72);
    opacity: 0.45;
  }
  25%,
  34% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes home-matrix-format-live {
  0%,
  10%,
  30%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  16%,
  24% {
    transform: scale(1.06);
    opacity: 1;
    filter: drop-shadow(0 3px 6px rgb(56 189 248 / 0.34));
  }
}

@keyframes home-matrix-progress {
  0%,
  100% {
    transform: scaleX(0.7);
  }
  50% {
    transform: scaleX(1);
  }
}

@keyframes home-matrix-wave {
  to {
    stroke-dashoffset: -46;
  }
}

@keyframes home-matrix-dot-pulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.42;
  }
  50% {
    transform: scale(1.22);
    opacity: 1;
  }
}

@keyframes home-matrix-locale-chip {
  0%,
  15%,
  34%,
  100% {
    transform: scale(1);
    opacity: 0.68;
    filter: none;
  }
  20%,
  29% {
    transform: scale(1.05);
    opacity: 1;
    filter: drop-shadow(0 2px 5px rgb(56 189 248 / 0.32));
  }
}

@media (max-width: 1050px) {
  .home-hero-copy {
    width: 65%;
  }

  .home-hero-visual {
    right: -180px;
    opacity: 0.9;
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 980px;
  }

  .home-hero::before {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.58) 52%, transparent 79%);
  }

  .dark .home-hero::before {
    background: linear-gradient(180deg, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.58) 52%, transparent 79%);
  }

  .home-hero-background {
    object-position: center;
  }

  .home-hero-inner {
    width: min(calc(100% - 32px), 1184px);
    min-height: 980px;
    display: block;
  }

  .home-hero-copy {
    width: 100%;
    max-width: none;
    padding: 44px 0 405px;
  }

  .home-hero-eyebrow {
    margin-bottom: 15px;
  }

  .home-hero h1 {
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.24;
  }

  .home-hero-lead {
    width: 100%;
    max-width: none;
    margin-top: 17px;
    font-size: 15px;
    line-height: 1.66;
    overflow-wrap: anywhere;
  }

  .home-hero-actions {
    margin-top: 24px;
  }

  .home-hero-button {
    min-height: 43px;
  }

  .home-hero-picker {
    margin-top: 18px;
  }

  .home-hero-visual {
    top: auto;
    right: auto;
    bottom: 28px;
    left: 50%;
    width: 370px;
    height: 360px;
    transform: translateX(-50%);
  }

  .home-hero-panel:not([hidden]) {
    animation-name: home-hero-panel-enter-mobile;
  }

  .home-hero-orbit {
    width: 330px;
    height: 330px;
    top: 14px;
    left: 14px;
  }

  .home-hero-engine {
    width: 312px;
    top: 59px;
    left: 25px;
  }

  .home-hero-packets {
    display: none;
  }
}

@keyframes home-hero-panel-enter-mobile {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@media (max-width: 380px) {
  .home-hero-copy {
    padding-bottom: 382px;
  }

  .home-hero-lead {
    font-size: 14px;
  }

  .home-hero-visual {
    width: 350px;
    height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-background,
  .home-hero-panel:not([hidden]),
  .home-hero-orbit,
  .home-hero-engine,
  .home-hero-packets,
  .home-flow-map .map-flow-line,
  .home-flow-map .map-node,
  .home-flow-map .map-format-card,
  .home-flow-map .map-core,
  .home-matrix-map .matrix-rail-meter,
  .home-matrix-map .matrix-status-ring,
  .home-matrix-map .matrix-status-core,
  .home-matrix-map .matrix-format-live,
  .home-matrix-map .matrix-progress,
  .home-matrix-map .matrix-wave,
  .home-matrix-map .matrix-dot,
  .home-matrix-map .matrix-locale-chip {
    animation: none;
    transition: none;
  }
}