.home-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  overflow-x: clip;
  border-bottom: 1px solid var(--color-hairline);
}

.home-hero::before {
  position: absolute;
  top: 50%;
  left: -230px;
  width: 860px;
  height: 860px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--color-green-glow), transparent 66%);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.home-hero::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-noise) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-noise) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  opacity: .16;
  pointer-events: none;
}

.home-hero .hero-preview-grid {
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  padding-top: 32px;
  padding-bottom: 32px;
}

.home-hero .hero-copy {
  position: relative;
  z-index: 3;
}

.home-hero .hero-copy h1 {
  max-width: 640px;
  font-size: clamp(52px, 5vw, 72px);
}

.hero-actions {
  margin-bottom: 24px;
}

.hero-lede strong {
  color: var(--color-text);
}

.orbit-shell {
  position: relative;
  width: min(590px, 62svh);
  max-width: 100%;
  aspect-ratio: 1;
}

.orbit-shell::before,
.orbit-shell::after {
  position: absolute;
  border-radius: var(--radius-pill);
  content: "";
  pointer-events: none;
}

.orbit-shell::before {
  inset: 12%;
  background: radial-gradient(circle, var(--color-accent-glow-strong), transparent 68%);
  filter: blur(20px);
}

.orbit-shell::after {
  inset: 4%;
  border: 1px solid var(--color-hairline);
}

.orbit-compass {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit-wash {
  fill: var(--color-panel);
  opacity: .44;
}

.orbit-grid-ring,
.orbit-core-line {
  fill: none;
  stroke: var(--color-ring);
  stroke-width: 1;
}

.orbit-grid-ring--outer {
  opacity: .92;
}

.orbit-grid-ring--middle {
  stroke-dasharray: 4 9;
  opacity: .72;
}

.orbit-grid-ring--inner {
  opacity: .5;
}

.orbit-ticks {
  fill: none;
  stroke: var(--color-ring);
  stroke-width: 11;
  stroke-dasharray: 1.4 14.4;
  opacity: .78;
}

.orbit-route {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-width: 2;
  opacity: .56;
  transform-origin: center;
  animation: orbit-breathe 7s ease-in-out infinite;
}

.orbit-route--two {
  animation-delay: -2s;
}

.orbit-route--three {
  animation-delay: -4s;
}

.orbit-halo {
  fill: var(--color-accent);
  opacity: .2;
  animation: halo-breathe 6s ease-in-out infinite;
}

.orbit-core-plate {
  fill: var(--color-panel-raised);
  stroke: var(--color-accent-dark);
  stroke-width: 1.5;
}

.orbit-core-line {
  stroke: var(--color-accent);
  opacity: .5;
}

.orbit-shield,
.orbit-check {
  fill: none;
  stroke: var(--color-text);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orbit-shield {
  stroke-width: 2;
}

.orbit-check {
  stroke-width: 4;
}

.orbit-brand-number {
  fill: var(--color-accent);
  font-family: var(--font-display);
  font-size: 22px;
}

.orbit-city rect {
  fill: var(--color-panel-raised);
  stroke: var(--color-border);
}

.orbit-city circle,
.orbit-point {
  fill: var(--color-accent);
}

.orbit-city text {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
}

.orbit-point {
  filter: drop-shadow(0 0 8px var(--color-accent));
  animation: point-pulse 6s ease-in-out infinite;
}

.orbit-point--two {
  animation-delay: -2s;
}

.orbit-point--three {
  animation-delay: -4s;
}

.flag-white {
  fill: var(--flag-white);
}

.flag-red {
  fill: var(--flag-red);
}

.flag-blue {
  fill: var(--flag-blue);
}

.flag-gold {
  fill: var(--flag-gold);
}

.flag-black {
  fill: var(--flag-black);
}

.fact-ribbon {
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-panel);
}

.fact-ribbon__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fact-ribbon__inner > span {
  display: flex;
  min-width: 0;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 22px;
  color: var(--color-muted);
  text-align: center;
}

.fact-ribbon__inner > span + span {
  border-left: 1px solid var(--color-hairline);
}

.fact-ribbon strong {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.route-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 24px;
  align-items: stretch;
}

.route-guidance {
  min-width: 0;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-panel-raised);
  box-shadow: var(--shadow-panel);
}

.route-guidance h3 {
  color: var(--color-accent);
}

.route-guidance p {
  color: var(--color-muted);
}

.text-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--color-accent);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dark);
  text-underline-offset: 4px;
}

.feature-section {
  position: relative;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-panel);
}

.feature-stage {
  min-width: 0;
}

.feature-detail {
  position: relative;
  overflow: clip;
}

.feature-detail::after {
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 250px;
  height: 250px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  content: "";
  opacity: .14;
  pointer-events: none;
}

.feature-detail[hidden] {
  display: none;
}

.feature-detail__icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin-bottom: 30px;
  border: 1px solid var(--color-accent-dark);
  border-radius: var(--radius-md);
  background: var(--color-panel-raised);
  color: var(--color-accent);
  box-shadow: 0 12px 32px var(--color-accent-glow);
}

.feature-detail__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.feature-detail p:not(.feature-fact) {
  max-width: 780px;
  color: var(--color-muted);
}

.feature-note {
  margin-top: 40px;
  margin-bottom: 0;
}

.platform-card p {
  color: var(--color-muted);
  font-size: 14px;
}

.pricing-preview {
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-panel);
}

.traffic-pack-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-panel-raised);
}

.traffic-pack-panel .badge {
  margin-bottom: 18px;
}

.traffic-pack-panel h3 {
  margin-bottom: 12px;
}

.traffic-pack-panel p {
  max-width: 850px;
  margin-bottom: 0;
  color: var(--color-muted);
}

.faq-preview-layout {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: start;
}

.faq-preview-layout .section-head {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  margin-bottom: 0;
}

.article-section-head {
  display: flex;
  max-width: none;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.article-section-head > div {
  max-width: 760px;
}

.article-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.article-card h3 {
  font-size: 23px;
}

@keyframes orbit-breathe {
  0%,
  100% {
    opacity: .42;
    transform: scale(.995);
  }

  50% {
    opacity: .72;
    transform: scale(1.005);
  }
}

@keyframes halo-breathe {
  0%,
  100% {
    opacity: .13;
    transform: scale(.94);
    transform-origin: center;
  }

  50% {
    opacity: .24;
    transform: scale(1.04);
    transform-origin: center;
  }
}

@keyframes point-pulse {
  0%,
  100% {
    opacity: .5;
    transform: scale(.85);
    transform-origin: center;
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
    transform-origin: center;
  }
}

@media (max-width: 1180px) {
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero .hero-preview-grid {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  }

  .orbit-shell {
    width: min(500px, 52svh);
  }
}

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

  .home-hero .hero-preview-grid {
    grid-template-columns: 1fr;
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .home-hero .hero-copy {
    order: 1;
    max-width: 790px;
  }

  .home-hero .hero-visual {
    order: 2;
  }

  .orbit-shell {
    width: min(540px, 88vw);
  }

  .route-layout {
    grid-template-columns: 1fr;
  }

  .fact-ribbon__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-ribbon__inner > span:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--color-hairline);
  }

  .fact-ribbon__inner > span:nth-child(4) {
    border-top: 1px solid var(--color-hairline);
  }
}

@media (max-width: 768px) {
  .home-hero .hero-copy h1 {
    font-size: clamp(32px, 9.5vw, 40px);
  }

  .orbit-shell {
    margin-top: 34px;
  }

  .feature-index {
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 78vw);
    padding-bottom: 10px;
    scrollbar-width: thin;
  }

  .feature-index button {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-panel-raised);
  }

  .feature-index button::before {
    top: auto;
    right: 18px;
    bottom: 8px;
    left: 18px;
    width: auto;
    height: 2px;
  }

  .feature-index button.is-active {
    transform: none;
  }

  .feature-stage {
    margin-top: 4px;
  }

  .traffic-pack-panel,
  .faq-preview-layout {
    grid-template-columns: 1fr;
  }

  .faq-preview-layout .section-head {
    position: static;
  }

  .article-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .home-hero .hero-copy h1 .no-break {
    white-space: normal;
  }

  .home-hero .hero-preview-grid {
    padding-top: 42px;
    padding-bottom: 50px;
  }

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

  .hero-actions {
    margin-bottom: 20px;
  }

  .orbit-shell {
    width: 100%;
  }

  .orbit-city--frankfurt,
  .orbit-city--singapore {
    display: none;
  }

  .fact-ribbon__inner {
    grid-template-columns: 1fr;
  }

  .fact-ribbon__inner > span {
    min-height: 58px;
  }

  .fact-ribbon__inner > span + span,
  .fact-ribbon__inner > span:nth-child(3) {
    border-top: 1px solid var(--color-hairline);
    border-left: 0;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .traffic-pack-panel .text-link {
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-route,
  .orbit-halo,
  .orbit-point {
    animation: none;
  }
}