.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:135px 0 90px;
  overflow:hidden
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 72% 42%,rgba(91,31,185,.24),transparent 34%),radial-gradient(circle at 45% 0%,rgba(124,58,237,.13),transparent 42%);
  pointer-events:none
}
.hero-grid {
  position:absolute;
  inset:0;
  opacity:.22;
  mask-image:linear-gradient(to bottom,#000 0 68%,transparent 96%);
  background-image:linear-gradient(rgba(178,148,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(178,148,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  transform:perspective(500px) rotateX(58deg) scale(1.7);
  transform-origin:center 70%;
  pointer-events:none
}
.hero-orb {
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.18),rgba(93,38,180,.05) 45%,transparent 70%);
  filter:blur(12px);
  pointer-events:none;
  will-change:transform
}
.hero-layout {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
  align-items:center;
  gap:30px
}
.hero-copy {
  position:relative;
  z-index:3;
  padding:46px 0
}
.hero-copy .eyebrow {
  margin-bottom:22px
}
.hero h1 {
  max-width:680px;
  font-size:clamp(3.4rem,6.7vw,7.4rem);
  line-height:.88;
  letter-spacing:-.065em
}
.hero h1 .line {
  display:block
}
.hero h1 .line:nth-child(2) {
  margin-top:.08em
}
.hero-desc {
  max-width:650px;
  margin-top:28px;
  font-size:clamp(1.02rem,1.45vw,1.2rem);
  line-height:1.75
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px
}
.hero-proof {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:38px;
  padding-top:24px;
  border-top:1px solid var(--hairline)
}
.hero-proof-item {
  display:flex;
  align-items:center;
  gap:9px;
  color:#8e85a6;
  font-size:.74rem;
  font-weight:700
}
.hero-proof-item span:first-child {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--purple-400);
  box-shadow:0 0 14px var(--purple-400)
}
.hero-visual {
  position:relative;
  min-height:680px;
  display:grid;
  place-items:center
}
.map-stage {
  position:relative;
  width:min(100%,660px);
  aspect-ratio:.94;
  border-radius:34px;
  isolation:isolate;
  transform:perspective(1000px) rotateX(3deg) rotateZ(-2.4deg)
}
.map-stage::before {
  content:"";
  position:absolute;
  inset:9% 4% 2%;
  z-index:-2;
  border-radius:50%;
  background:radial-gradient(circle at 57% 43%,rgba(139,92,246,.26),rgba(70,31,135,.10) 44%,transparent 71%);
  filter:blur(20px)
}
.map-stage::after {
  content:"";
  position:absolute;
  left:11%;
  right:4%;
  bottom:8%;
  height:15%;
  z-index:-3;
  border-radius:50%;
  background:rgba(0,0,0,.8);
  filter:blur(38px);
  transform:skewX(-12deg)
}
.map-vector {
  position:absolute;
  inset:3% 0 3% 0;
  width:100%;
  height:94%;
  object-fit:contain;
  filter:drop-shadow(0 34px 28px rgba(0,0,0,.52)) drop-shadow(0 0 30px rgba(112,63,220,.10));
  opacity:.94
}
.map-routes {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none
}
.map-routes path {
  fill:none;
  stroke:url(#routeGradient);
  stroke-width:.34;
  stroke-dasharray:1.5 1.8;
  stroke-linecap:round;
  animation:dash 8s linear infinite;
  filter:drop-shadow(0 0 3px rgba(162,118,255,.8))
}
.map-node {
  position:absolute;
  z-index:8;
  display:flex;
  align-items:center;
  gap:9px;
  transform:translate(-50%,-50%)
}
.map-node-dot {
  position:relative;
  width:13px;
  height:13px;
  border:3px solid #e9dcff;
  border-radius:50%;
  background:var(--purple-500);
  box-shadow:0 0 9px #a96cff,0 0 24px rgba(142,76,255,.85)
}
.map-node-dot::before,.map-node-dot::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  border:1px solid rgba(183,141,255,.45);
  border-radius:50%;
  animation:ripple 2.8s ease-out infinite
}
.map-node-dot::after {
  animation-delay:1.35s
}
.map-node-label {
  padding:6px 10px;
  border:1px solid rgba(185,148,255,.28);
  border-radius:999px;
  background:rgba(8,5,15,.76);
  backdrop-filter:blur(10px);
  color:#f4efff;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.map-node.br {
  left:73%;
  top:36%
}
.map-node.py {
  left:68%;
  top:46%
}
.map-node.cl {
  left:52%;
  top:66%
}
.map-status {
  position:absolute;
  right:3%;
  bottom:9%;
  z-index:7;
  width:208px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(7,5,14,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 55px rgba(0,0,0,.32);
  animation:float 6s ease-in-out infinite
}
.map-status-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px
}
.map-status-title {
  color:#fff;
  font-size:.78rem;
  font-weight:800
}
.live-dot {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--success);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase
}
.live-dot::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 10px var(--success);
  animation:pulse 1.8s ease-in-out infinite
}
.map-status p {
  font-size:.72rem;
  line-height:1.5
}
.map-gridlines {
  position:absolute;
  inset:10% 4% 8% 4%;
  z-index:-1;
  opacity:.14;
  background-image:linear-gradient(rgba(168,133,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(168,133,255,.22) 1px,transparent 1px);
  background-size:38px 38px;
  transform:perspective(400px) rotateX(28deg);
  mask-image:radial-gradient(circle,#000 0 55%,transparent 80%)
}
.hero-scroll {
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  color:#665e7b;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:translateX(-50%)
}
.hero-scroll::before {
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--purple-500))
}
.map-node.is-active .map-node-dot {
  transform:scale(1.28);
  background:var(--accent)
}
.map-node.is-active .map-node-label {
  border-color:rgba(216,92,255,.72);
  background:rgba(50,17,109,.82);
  box-shadow:0 0 28px rgba(162,118,255,.22)
}