/* ============================== HERO CINEMATIC: MAP -> TOPOLOGY ============================== */

/* Hero split: map is the scene, topology is the foreground object */
.hero {
  min-height: 100vh;
  margin-top: -54px;
  padding: 82px 0 48px;
  isolation: isolate;
  background: #05070a;
}
html, body {
  overscroll-behavior-y: none;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 48%, rgba(92,184,255,.18), transparent 25%),
    linear-gradient(90deg, rgba(5,7,10,.97) 0%, rgba(5,7,10,.86) 36%, rgba(5,7,10,.34) 64%, rgba(5,7,10,.58) 100%),
    linear-gradient(180deg, rgba(5,7,10,.68) 0%, rgba(5,7,10,.14) 46%, rgba(5,7,10,.84) 100%);
}
@keyframes heroOverlaySettle {
  0% {
    background:
      radial-gradient(circle at 68% 48%, rgba(92,184,255,.11), transparent 34%),
      linear-gradient(90deg, rgba(5,7,10,.95) 0%, rgba(5,7,10,.70) 34%, rgba(5,7,10,.04) 64%, rgba(5,7,10,.18) 100%),
      linear-gradient(180deg, rgba(5,7,10,.42) 0%, rgba(5,7,10,0) 48%, rgba(5,7,10,.54) 100%);
  }
  44% {
    background:
      radial-gradient(circle at 72% 48%, rgba(92,184,255,.15), transparent 29%),
      linear-gradient(90deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.78) 35%, rgba(5,7,10,.10) 64%, rgba(5,7,10,.28) 100%),
      linear-gradient(180deg, rgba(5,7,10,.50) 0%, rgba(5,7,10,.04) 48%, rgba(5,7,10,.62) 100%);
  }
  100% {
    background:
      radial-gradient(circle at 76% 48%, rgba(92,184,255,.16), transparent 26%),
      linear-gradient(90deg, rgba(5,7,10,.97) 0%, rgba(5,7,10,.84) 36%, rgba(5,7,10,.20) 64%, rgba(5,7,10,.40) 100%),
      linear-gradient(180deg, rgba(5,7,10,.58) 0%, rgba(5,7,10,.08) 46%, rgba(5,7,10,.76) 100%);
  }
}
.hero-grid {
  z-index: 2;
  opacity: .32;
  mix-blend-mode: screen;
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(420px, 0.82fr) minmax(620px, 1.18fr);
  gap: clamp(40px, 5vw, 86px);
  align-items: center;
  text-align: left;
  max-width: 1480px;
  z-index: 3;
}

@media (min-width: 1161px) {
  /* Desktop: hero is ALWAYS full viewport, dynamic for any screen
     (laptop, 1440p, 4K, ultrawide). Content scales fluidly via clamps,
     vertical centering keeps it balanced regardless of viewport height. */
  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 640px;
    max-height: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .hero-inner {
    width: 100%;
    max-width: min(1480px, calc(100vw - 64px));
    padding: clamp(70px, 8vh, 110px) 32px clamp(40px, 5vh, 70px);
    box-sizing: border-box;
  }
  /* Stage scales with viewport height — fits any screen including ultrawide */
  .hero-stage {
    max-width: min(860px, 52vw);
    aspect-ratio: 820 / 520;
    max-height: 70dvh;
  }
  .hero-copy h1 {
    font-size: clamp(34px, min(4.4vw, 6vh), 60px);
  }
  .hero-copy .lead {
    font-size: clamp(14px, 1.05vw, 17px);
  }
}
/* Ultrawide: cap content width but let backdrop fill */
@media (min-width: 1900px) {
  .hero-inner {
    max-width: 1640px;
  }
  .hero-stage {
    max-width: min(940px, 48vw);
  }
}
.hero-copy {
  width: 100%;
  max-width: 560px;
  justify-self: start;
}
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 18px; }
.hero-copy .lead {
  margin: 0 0 24px;
  max-width: 560px;
  width: 100%;
}
.hero-copy .hero-cta {
  margin-bottom: 28px;
  justify-content: flex-start;
  width: 100%;
  max-width: 560px;
}
.hero-copy .hero-stats {
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 560px;
  margin-left: 0;
  margin-right: 0;
}
.hero-copy .stat { padding: 14px 6px; }
.hero-copy .stat-num { font-size: 22px; }
.hero-copy .stat-label { font-size: 10px; }

@media (max-width: 1160px) {
  .hero { padding-top: 20px; }
  .hero-split { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-copy { justify-self: center; }
  .hero-copy .hero-cta { justify-content: center; }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-copy .hero-stats { margin-left: auto; margin-right: auto; }
}

/* Stage holds two stacked layers */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 820 / 520;
  max-width: 860px;
  margin-left: auto;
  contain: layout style;
}
.stage-layer {
  position: absolute;
  inset: 0;
  transform-origin: 58% 53%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* === Frame chrome (used for both layers + topology section card) === */
.frame {
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  background: #0d1219;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
}
.frame-bar .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.frame-bar .dr { background: #ff5f57; }
.frame-bar .dy { background: #febc2e; }
.frame-bar .dg { background: #28c840; }
.frame-title { margin-left: 8px; color: var(--text-dim); font-size: 10.5px; letter-spacing: .3px; }
.frame-meta {
  margin-left: auto; font-size: 9px;
  color: var(--accent);
  background: rgba(92,184,255,.08); border: 1px solid rgba(92,184,255,.25);
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 1px;
}
.stage-svg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 370; background: #06101e; }
.frame-foot {
  display: flex; gap: 12px; align-items: center;
  padding: 7px 12px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-off); background: #0a0e14;
  flex-wrap: wrap;
}
.sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.sw-r { background: #ef4444; }
.sw-c { background: #ff6b35; }
.sw-d { background: #ffd60a; }
.sw-a { background: #5cb8ff; }
.sw-e { background: #64748b; }
.ff-r { margin-left: auto; opacity: .65; }

/* === Real Leaflet map background === */
.hero-map-backdrop {
  --hero-origin-x: 64%;
  --hero-origin-y: 70%;
  --hero-final-x: 8%;
  --hero-final-y: -15%;
  --hero-final-scale: 4.85;
  --hero-marker-final-scale: .22;
  --hero-tooltip-final-scale: .23;
  --hero-tooltip-final-x: -14px;
  position: absolute;
  inset: -9% -4% -8% -4%;
  z-index: 0;
  opacity: .96;
  filter: saturate(1.12) brightness(1.04) contrast(1.06);
  transform: translate3d(0,0,0) scale(1);
  transform-origin: var(--hero-origin-x) var(--hero-origin-y);
  will-change: transform, opacity;
  backface-visibility: hidden;
  pointer-events: none;
}
.hero-map-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 402;
  background:
    radial-gradient(circle at 72% 48%, rgba(3,9,18,0), rgba(3,9,18,.08) 48%, rgba(3,6,10,.42) 86%),
    linear-gradient(90deg, rgba(3,5,8,.68), rgba(3,5,8,.02) 48%, rgba(3,5,8,.18));
  opacity: .12;
  will-change: opacity;
}
.hero-map-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 403;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 72% 60%, rgba(125,211,252,.82) 0%, rgba(92,184,255,.34) 11%, rgba(92,184,255,.10) 23%, transparent 43%),
    radial-gradient(circle at 72% 60%, rgba(255,255,255,.34), transparent 18%);
  mix-blend-mode: screen;
  transform: scale(.72);
  will-change: opacity, transform;
}
.hero.hero-zooming .hero-map-backdrop {
  animation: heroMapZoom var(--hero-zoom-duration, 4.2s) cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero.hero-zooming .hero-map-backdrop::after {
  animation: heroMapShadeOpacity var(--hero-zoom-duration, 3.9s) linear forwards;
}
.hero.hero-zooming .hero-map-backdrop::before {
  animation: heroMapBurst var(--hero-zoom-duration, 3.9s) linear forwards;
}
@keyframes heroMapZoom {
  0% {
    opacity: .98;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  100% {
    opacity: .92;
    transform: translate3d(var(--hero-final-x), var(--hero-final-y), 0) scale3d(var(--hero-final-scale), var(--hero-final-scale), 1);
  }
}
@keyframes heroMapShadeOpacity {
  0% { opacity: .12; }
  72% { opacity: .42; animation-timing-function: cubic-bezier(.8,0,1,.12); }
  100% { opacity: .80; }
}
@keyframes heroMapBurst {
  0%, 84% {
    opacity: 0;
    transform: scale(.72);
  }
  97% {
    opacity: .78;
    transform: scale(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(1.62);
  }
}
.hero-leaflet-map,
.topology-leaflet-map,
.topology-section-leaflet-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 48%, rgba(59,130,246,.20), transparent 34%),
    linear-gradient(135deg, #06101e, #081522 58%, #050b13);
}
.hero-leaflet-map .leaflet-pane,
.hero-leaflet-map .leaflet-tile,
.hero-leaflet-map .leaflet-marker-icon,
.hero-leaflet-map .leaflet-marker-shadow,
.hero-leaflet-map .leaflet-tile-container,
.topology-leaflet-map .leaflet-pane,
.topology-leaflet-map .leaflet-tile,
.topology-leaflet-map .leaflet-marker-icon,
.topology-leaflet-map .leaflet-marker-shadow,
.topology-leaflet-map .leaflet-tile-container,
.topology-section-leaflet-map .leaflet-pane,
.topology-section-leaflet-map .leaflet-tile,
.topology-section-leaflet-map .leaflet-marker-icon,
.topology-section-leaflet-map .leaflet-marker-shadow,
.topology-section-leaflet-map .leaflet-tile-container {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.hero-leaflet-map.leaflet-container,
.topology-leaflet-map.leaflet-container,
.topology-section-leaflet-map.leaflet-container {
  background: #06101e;
  font-family: 'JetBrains Mono', monospace;
}
.hero-leaflet-map .leaflet-control-attribution,
.topology-leaflet-map .leaflet-control-attribution,
.topology-section-leaflet-map .leaflet-control-attribution {
  display: none !important;
  background: rgba(6,16,30,.72) !important;
  color: #3a5570 !important;
  font-size: 7px !important;
}
.hero-leaflet-map .leaflet-control-attribution a { color: #5cb8ff !important; }
.topology-leaflet-map .leaflet-control-attribution a { color: #5cb8ff !important; }
.topology-section-leaflet-map .leaflet-control-attribution a { color: #5cb8ff !important; }
.hero-leaflet-map.leaflet-container .map-fallback,
.topology-leaflet-map.leaflet-container .map-fallback,
.topology-section-leaflet-map.leaflet-container .map-fallback { display: none; }
.map-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(92,184,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,184,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.map-fallback::before {
  content: "";
  position: absolute;
  inset: 14% 10% 12% 8%;
  background: rgba(12,29,48,.75);
  border: 1px solid rgba(92,184,255,.14);
  border-radius: 48% 42% 38% 45%;
}
.fallback-pin {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #93c5fd;
  background: rgba(13,32,68,.95);
  border: 2px solid rgba(59,130,246,.65);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(59,130,246,.28);
}
.fp-a { left: 54%; top: 47%; }
.fp-b { left: 44%; top: 35%; }
.fp-c { left: 63%; top: 57%; }
.fp-d { left: 34%; top: 60%; }
.hero-map-status {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 410;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(26,48,80,.86);
  border-radius: 6px;
  background: rgba(6,16,30,.82);
  color: #7090a0;
  font-size: 9.5px;
  backdrop-filter: blur(6px);
}
.hero-site-icon {
  background: transparent;
  border: 0;
}
.hero-site-marker {
  position: relative;
  width: var(--marker-size);
  height: var(--marker-size);
  display: grid;
  place-items: center;
}
.hero-site-marker::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.26), transparent 70%);
  animation: sitePulse 1.8s ease-in-out 2;
}
.hero-site-marker::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  border: 2px solid rgba(59,130,246,.7);
  background: rgba(13,32,68,.92);
  box-shadow: 0 0 14px rgba(59,130,246,.42);
}
.hero-site-marker.is-target::after {
  border-color: #5cb8ff;
  box-shadow: 0 0 20px rgba(92,184,255,.7);
}
.is-target-icon { cursor: pointer !important; pointer-events: auto !important; }
.marker-tapped .hero-site-marker,
.marker-demo-click .hero-site-marker {
  animation: markerTapPulse .35s ease-out !important;
}
.marker-demo-click .hero-site-marker::before {
  animation: markerWave1 .7s ease-out forwards !important;
}
/* Second ripple ring via box-shadow on ::after */
.marker-demo-click .hero-site-marker::after {
  animation: markerWave2 .7s .12s ease-out forwards !important;
}
@keyframes markerWave1 {
  0%   { box-shadow: 0 0 0 0 rgba(92,184,255,.6); opacity: 1; }
  100% { box-shadow: 0 0 0 22px rgba(92,184,255,0); opacity: .3; }
}
@keyframes markerWave2 {
  0%   { box-shadow: 0 0 0 0 rgba(92,184,255,.45); }
  100% { box-shadow: 0 0 0 16px rgba(92,184,255,0); }
}
@keyframes markerTapPulse {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(1.1); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}
.hero-site-marker span {
  position: relative;
  z-index: 1;
  color: #bfdbfe;
  font-size: var(--marker-font);
  font-weight: 700;
}
.hero.hero-zooming .hero-site-marker {
  animation: heroMarkerContain var(--hero-zoom-duration, 3.9s) linear forwards;
}
@keyframes heroMarkerContain {
  0% { transform: scale(1); }
  100% { transform: scale(var(--hero-marker-final-scale)); }
}
.hero-site-tooltip {
  background: transparent !important;
  color: #e6f0fb !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  padding: 0 !important;
  opacity: 1 !important;
  z-index: 720 !important;
}
.hero-tooltip-card {
  display: block;
  min-width: 142px;
  padding: 8px 10px;
  border: 1px solid rgba(92,184,255,.32);
  border-radius: 6px;
  background: rgba(7,18,32,.98);
  box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 18px rgba(92,184,255,.18);
  line-height: 1.35;
  opacity: 0;
  transform: translateX(18px) scale(.96);
  transform-origin: left center;
  transition:
    opacity .16s ease-out,
    transform .22s cubic-bezier(.12,.78,.18,1);
}
.hero.hero-topology-revealed .hero-tooltip-card {
  opacity: 1;
  transform: translateX(var(--hero-tooltip-final-x)) scale(var(--hero-tooltip-final-scale));
}
.hero-tooltip-card span {
  color: #8aa7c4;
}
.hero-site-tooltip::before { display: none !important; }
.hero-leaflet-map .leaflet-marker-pane { z-index: 690 !important; }
.hero-leaflet-map .leaflet-tooltip-pane { z-index: 720 !important; }

/* === Map intro === */
.stage-map {
  opacity: 1;
  transform: scale(1);
  animation: mapZoom 4.6s cubic-bezier(.6, .05, .25, 1) 0.6s forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@keyframes mapZoom {
  0%   { opacity: 1;   transform: scale3d(1,1,1)    translate3d(0, 0, 0); }
  60%  { opacity: 1;   transform: scale3d(1.7,1.7,1) translate3d(-9%, -4%, 0); }
  90%  { opacity: 0;   transform: scale3d(3.2,3.2,1) translate3d(-15%, -5%, 0); }
  100% { opacity: 0;   transform: scale3d(4.2,4.2,1) translate3d(-17%, -5%, 0); pointer-events: none; }
}

/* === Topology emerge === */
.stage-topo {
  opacity: 0;
  transform: scale3d(.92,.92,1) translate3d(0, 12px, 0);
  animation: topoEmerge .7s cubic-bezier(.16, 1, .3, 1) 0s forwards;
  animation-play-state: paused;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.hero-stage.topology-in-view .stage-topo { animation-play-state: running; }
@keyframes topoEmerge {
  0%   { opacity: 0;   transform: scale3d(.92,.92,1) translate3d(0, 12px, 0); }
  50%  { opacity: .85; transform: scale3d(1.005,1.005,1) translate3d(0, 2px, 0); }
  100% { opacity: 1;   transform: scale3d(1,1,1) translate3d(0, 0, 0); }
}

.hero-topology-surface {
  position: absolute;
  inset: -4% -4% -4% -4%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-topology-surface::before {
  content: "";
  position: absolute;
  inset: 8% 2% 4% 2%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(8,18,32,.58), rgba(8,18,32,.28) 44%, rgba(8,18,32,0) 74%);
  will-change: auto;
}
.hero-stage .graph-svg {
  position: relative;
  width: 102%;
  max-width: none;
  overflow: visible;
  background: transparent;
  contain: layout style;
}
.topology-legend {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 15px;
  color: rgba(203,213,225,.62);
  font-size: 10px;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
.topology-legend > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.hero-topology-legend {
  left: 0;
  right: 0;
  bottom: -1%;
  justify-content: center;
}
.legend-line {
  width: 24px;
  height: 2px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(92,184,255,0), rgba(92,184,255,.78), rgba(92,184,255,0));
  box-shadow: 0 0 8px rgba(92,184,255,.35);
}
.legend-note { color: rgba(148,163,184,.62); }

/* === Map: site pins (matches platform style) === */
.sites .site .ring {
  fill: rgba(13, 32, 68, 0.92);
  stroke: rgba(59, 130, 246, 0.6);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.32));
}
.sites .site .halo {
  fill: rgba(59, 130, 246, 0.22);
  transform-origin: center;
  transform-box: fill-box;
  animation: sitePulse 1.8s ease-in-out 2;
}
.sites .site.target .ring { stroke: #5cb8ff; stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(92,184,255,.7)); }
.sites .site .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; font-weight: 700;
  fill: #93c5fd; text-anchor: middle;
}
.sites .site .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px; font-weight: 600;
  fill: #5b7a99; text-anchor: middle; letter-spacing: 0.3px;
}
@keyframes sitePulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.35; }
}

/* Reticle */
.reticle .rx, .reticle .ry {
  fill: none; stroke: #5cb8ff; stroke-width: 1.1;
  stroke-dasharray: 3 4; opacity: 0;
  transform-origin: center; transform-box: fill-box;
  animation: reticleFire 1.6s ease-out 1.8s forwards;
}
.reticle .ry { animation-delay: 2.0s; stroke: #93c5fd; }
@keyframes reticleFire {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7) rotate(120deg); }
}

.continents { filter: drop-shadow(0 0 12px rgba(92, 184, 255, 0.05)); }

/* === App-like topology graph === */
.graph-svg {
  background:
    linear-gradient(rgba(92,184,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,184,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 34%, rgba(92,184,255,.10), transparent 42%),
    #06101e;
  background-size: 28px 28px, 28px 28px, auto, auto;
}
.graph-links path {
  fill: none;
  stroke: rgba(92,184,255,.42);
  stroke-width: 1.55;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(92,184,255,.20));
}
.graph-links .po-member {
  stroke-width: 1.85;
  stroke: rgba(92,184,255,.56);
}
.graph-links-anim path {
  stroke-width: 2.2;
  stroke-dasharray: 18 230;
  opacity: 0;
  animation: graphPulse 2.9s linear infinite;
  animation-play-state: paused;
}
.graph-pulse.gp-a { animation-delay: 0s; }
.graph-pulse.gp-b { animation-delay: .55s; }
.graph-pulse.gp-c { animation-delay: 1.1s; }
.graph-pulse.gp-d { animation-delay: 1.55s; }
.stage-topo .graph-pulse.gp-a { animation-delay: .28s; }
.stage-topo .graph-pulse.gp-b { animation-delay: .58s; }
.stage-topo .graph-pulse.gp-c { animation-delay: .88s; }
.stage-topo .graph-pulse.gp-d { animation-delay: 1.18s; }
.hero-stage.topology-in-view .stage-topo .graph-links-anim path {
  animation-play-state: running;
}
.section-topology-surface .graph-links-anim path {
  animation: graphPulse 3.05s linear infinite;
  animation-play-state: paused;
  opacity: 0;
}
.topology-section.topology-in-view .section-topology-surface .graph-links-anim path {
  animation-play-state: running;
}
@keyframes graphPulse {
  0% { stroke-dashoffset: 0; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { stroke-dashoffset: -260; opacity: 0; }
}
.graph-badge rect {
  fill: rgba(92,184,255,.12);
  stroke: rgba(92,184,255,.62);
  stroke-width: .8;
}
.graph-badge text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  fill: #a5d4ff;
  text-anchor: middle;
}
.graph-badge.muted-badge rect {
  fill: rgba(148,163,184,.10);
  stroke: rgba(148,163,184,.35);
}
.graph-badge.muted-badge text { fill: #94a3b8; }
.topo-lanes line {
  stroke: rgba(92,184,255,.075);
  stroke-width: .7;
  stroke-dasharray: 5 12;
}
.topo-lanes text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.4px;
  fill: rgba(176,190,207,.48);
  letter-spacing: 1px;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(2,6,12,.58);
  stroke-width: 1.2px;
}
.core-orbit ellipse {
  fill: none;
  stroke: rgba(92,184,255,.075);
  stroke-width: .75;
  stroke-dasharray: 5 10;
  transform-origin: center;
}
.core-orbit ellipse + ellipse {
  stroke-opacity: .58;
}
@keyframes orbitDrift {
  to { transform: rotate(360deg); }
}
.nd-node .node-box {
  fill: rgba(13,26,46,.92);
  stroke-width: 1.45;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.32));
}
.nd-router .node-box { stroke: #f59e0b; fill: rgba(245,158,11,.12); }
.nd-firewall .node-box { stroke: #ef4444; fill: rgba(239,68,68,.13); }
.nd-core .node-box { stroke: #3b82f6; fill: rgba(59,130,246,.18); }
.nd-access .node-box { stroke: #10b981; fill: rgba(16,185,129,.12); }
.nd-ap .node-box { stroke: #06b6d4; fill: rgba(6,182,212,.13); }
.nd-server .node-box { stroke: #f97316; fill: rgba(249,115,22,.14); }
.nd-cluster .node-box { stroke: #64748b; fill: rgba(15,23,42,.94); }
.selected-node .node-box {
  filter: drop-shadow(0 0 18px rgba(92,184,255,.42)) drop-shadow(0 14px 22px rgba(0,0,0,.34));
}
.node-led {
  fill: #30d158;
  filter: drop-shadow(0 0 5px rgba(48,209,88,.75));
}
.warn-led {
  fill: #ff453a;
  filter: drop-shadow(0 0 5px rgba(255,69,58,.75));
}
.role-pill {
  fill: rgba(2,8,17,.78);
  stroke: rgba(255,255,255,.08);
  stroke-width: .6;
}
.role-text,
.node-title,
.node-sub,
.if-text,
.cluster-title {
  font-family: 'JetBrains Mono', monospace;
}
.role-text {
  fill: #dbeafe;
  font-size: 7.5px;
  font-weight: 700;
  text-anchor: middle;
}
.node-title {
  fill: #dde6f0;
  font-size: 11px;
  font-weight: 700;
  text-anchor: start;
}
.node-title.small-title { font-size: 10px; }
.node-sub {
  fill: #7090a0;
  font-size: 9px;
  text-anchor: start;
}
.if-pill {
  fill: #020811;
  stroke: rgba(92,184,255,.18);
  stroke-width: .7;
}
.if-text {
  fill: #38bdf8;
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
}
.cluster-title {
  fill: #cbd5e1;
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
}

/* === Topology nodes (clean labels, white text on coloured fill) === */
.t-nodes .r {
  stroke-width: 1.2;
  fill: #0d1a2e;
}
.t-fw  .r { stroke: #ff6b35; fill: rgba(255,107,53,.10); }
.t-cor .r { stroke: #ff6b35; fill: rgba(255,107,53,.14); }
.t-dst .r { stroke: #ffd60a; fill: rgba(255,214,10,.08); }
.t-acc .r { stroke: #5cb8ff; fill: rgba(92,184,255,.09); }
.t-nodes .t1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700;
  fill: #f3f6fa; text-anchor: middle;
  /* center inside the 90x30 rect: x=45 */
}
.t-nodes .t2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px; font-weight: 500;
  fill: #8a9fb3; text-anchor: middle;
}
/* set x=45 via attribute fallback (text-anchor middle uses x position) */
.t-nodes text { x: 45; }

/* Animated link pulses */
.pulse {
  stroke-dasharray: 14 200;
  animation: linkPulse 2.4s linear infinite;
}
.pulse.pa { animation-delay: 0s; }
.pulse.pb { animation-delay: .55s; }
.pulse.pc { animation-delay: 1.1s; }
@keyframes linkPulse {
  0%   { stroke-dashoffset: 0;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: -240; opacity: 0; }
}

/* Finding badge */
.badge .b { fill: rgba(255,69,58,.12); stroke: #ff453a; stroke-width: 1; }
.badge .bt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; font-weight: 700;
  fill: #ff7a70; text-anchor: middle;
}
.badge text { x: 46; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .stage-map  { animation: none; opacity: 0; pointer-events: none; }
  .stage-topo { animation: none; opacity: 1; transform: none; filter: none; }
  .hero::before,
  .hero-map-backdrop,
  .hero-map-backdrop::after,
  .sites .site .halo,
  .reticle *,
  .pulse,
  .graph-pulse,
  .core-orbit ellipse,
  .hero-site-marker::before { animation: none; }
  .hero-map-backdrop {
    transform: translate3d(var(--hero-final-x), var(--hero-final-y), 0) scale3d(var(--hero-final-scale), var(--hero-final-scale), 1);
  }
  .hero-map-backdrop::after { opacity: .80; }
}

/* ============================== TOPOLOGY SECTION ============================== */
.topology-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #05070a;
}
.topology-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,10,.84) 0%, rgba(5,7,10,.62) 34%, rgba(5,7,10,.24) 68%, rgba(5,7,10,.40) 100%),
    linear-gradient(180deg, rgba(5,7,10,.76) 0%, rgba(5,7,10,.34) 30%, rgba(5,7,10,.54) 100%);
}
.topology-section .container {
  position: relative;
  z-index: 2;
}
.topology-section-map-backdrop {
  position: absolute;
  inset: -4% -3%;
  z-index: 0;
  opacity: 1;
  filter: saturate(1.22) brightness(1.08) contrast(1.06);
  pointer-events: none;
}
.topology-section-map-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 402;
  pointer-events: none;
  background:
    radial-gradient(circle at 64% 52%, rgba(3,9,18,0), rgba(3,9,18,.02) 48%, rgba(3,6,10,.22) 88%),
    linear-gradient(180deg, rgba(3,5,8,.18), rgba(3,5,8,.03) 44%, rgba(3,5,8,.22));
}
.topo-feature {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
}
.topo-feature-card { width: 100%; }
.topo-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; max-width: 820px; margin: 0 auto; }
.tp-item { display: flex; gap: 10px; align-items: flex-start; }
.tp-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: rgba(92,184,255,.08);
  border: 1px solid rgba(92,184,255,.28);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700;
}
.tp-item h4 { font-size: 11.5px; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.tp-item p  { font-size: 10.5px; color: var(--text-dim); line-height: 1.4; margin: 0; }

.topo-feature-card {
  min-width: 0;
}
.topology-map-panel {
  position: relative;
  min-height: 540px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.topology-map-panel::after {
  display: none;
}
.topology-leaflet-map {
  opacity: .86;
  filter: saturate(1.04) brightness(.80) contrast(1.12);
}
.section-topology-surface {
  position: absolute;
  inset: 6% 3% 6%;
  z-index: 403;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-topology-surface::before {
  content: "";
  position: absolute;
  inset: 9% 3% 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 48%, rgba(8,18,32,.62), rgba(8,18,32,.32) 46%, rgba(8,18,32,0) 76%);
  filter: blur(6px);
}
.section-topology-surface .graph-svg {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  overflow: visible;
  background: transparent;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,.55));
}
.section-topology-legend {
  z-index: 2;
  left: 4%;
  right: 4%;
  bottom: 0;
  justify-content: center;
  padding-top: 8px;
}
.section-sub { color: var(--text-dim); font-size: 14px; max-width: 700px; margin: 14px auto 0; }

@media (max-width: 980px) {
  .topo-feature { gap: 24px; }
  .topology-map-panel { min-height: 460px; }
  .section-topology-surface { inset: 8% 0 8%; }
  .tp-icon { width: 24px; height: 24px; font-size: 9px; }
  .tp-item h4 { font-size: 11px; }
  .tp-item p { font-size: 10px; }
}

@media (max-width: 640px) {
  .topo-points { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .tp-icon { width: 22px; height: 22px; font-size: 8.5px; border-radius: 4px; }
  .tp-item { gap: 8px; }
  .tp-item h4 { font-size: 10px; }
  .tp-item p { font-size: 9.5px; line-height: 1.35; }
  .hero {
    min-height: auto;
    padding-bottom: 26px;
  }
  .hero-inner {
    margin-bottom: -54px;
  }
  .hero-split {
    gap: 30px;
  }
  .hero-map-backdrop {
    --hero-origin-x: 50%;
    --hero-origin-y: 72%;
    --hero-final-x: 0%;
    --hero-final-y: -17%;
    --hero-final-scale: 3.35;
    --hero-marker-final-scale: .34;
    --hero-tooltip-final-scale: .34;
    --hero-tooltip-final-x: -10px;
  }
  .hero-stage {
    aspect-ratio: 390 / 380;
  }
  .hero-topology-surface {
    inset: -6% -12% -8%;
    box-sizing: border-box;
    padding-bottom: 14px;
  }
  .hero-stage .graph-svg {
    width: 128%;
    transform: translate(-32px, -6px);
  }
  .stage-topo {
    animation-delay: 0s;
  }
  .stage-topo .graph-pulse.gp-a { animation-delay: .28s; }
  .stage-topo .graph-pulse.gp-b { animation-delay: .58s; }
  .stage-topo .graph-pulse.gp-c { animation-delay: .88s; }
  .stage-topo .graph-pulse.gp-d { animation-delay: 1.18s; }
  .topology-map-panel { min-height: 360px; }
  .section-topology-surface {
    inset: 0% -6% 0;
    box-sizing: border-box;
    padding-bottom: 2px;
  }
  .section-topology-surface .graph-svg {
    width: 126%;
    transform: translate(-30px, -4px);
  }
  .topology-legend {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 12px);
    padding: 6px 8px;
    border: 1px solid rgba(92,184,255,.14);
    border-radius: 8px;
    background: rgba(3,7,12,.72);
    box-shadow: 0 8px 22px rgba(0,0,0,.32);
    font-size: 8px;
    line-height: 1;
  }
  .hero-topology-legend,
  .section-topology-legend {
    left: 50%;
    right: auto;
    bottom: -2px;
    transform: translateX(-50%);
    justify-content: center;
    padding-top: 0;
  }
  .legend-line {
    width: 16px;
    margin-right: 3px;
  }
  .sw {
    width: 7px;
    height: 7px;
    margin-right: 3px;
  }
}

@media (min-width: 641px) and (max-width: 1160px) {
  .stage-topo {
    animation-delay: 0s;
  }
  .stage-topo .graph-pulse.gp-a { animation-delay: .28s; }
  .stage-topo .graph-pulse.gp-b { animation-delay: .58s; }
  .stage-topo .graph-pulse.gp-c { animation-delay: .88s; }
  .stage-topo .graph-pulse.gp-d { animation-delay: 1.18s; }
}

/* ============================== SCROLL-DRIVEN HERO (Mobile / Tablet ≤ 1160px) ============================== */
.hero-scroll-scene {
  position: relative;
}
@media (max-width: 1160px) {
  /* CRITICAL: scene total length uses svh (locked, never changes mid-scroll).
     This makes scrollScene.offsetHeight constant during URL-bar collapse,
     keeping scroll math (and animation-range) perfectly stable.

     The sticky .hero uses dvh so it visually fills the viewport at all
     times — its size grows smoothly as the URL bar hides, but because
     the scene length is fixed, the scroll position never jumps. */
  .hero-scroll-scene {
    height: 320vh;
    height: 320svh;
  }
  .hero-scroll-scene .hero {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    max-height: none;
    overflow: hidden;
  }
  /* These rules apply from first CSS paint — no JS class dependency.
     Eliminates the layout jump that occurred while waiting for
     hero-scroll-driven to be added by JS. */
  .hero-scroll-scene .hero-inner {
    height: 100%;
  }
  .hero-scroll-scene .hero-copy {
    position: relative;
    z-index: 5;
  }
  .hero-scroll-scene .hero-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-width: none;
    z-index: 4;
    pointer-events: none;
  }
  .hero-scroll-scene .hero-stage.topology-in-view {
    pointer-events: auto;
  }
  .hero-scroll-scene .hero-topology-surface {
    inset: 4% -2% 4%;
  }
  .hero-scroll-scene .hero-topology-legend {
    bottom: 4%;
  }
}
@media (max-width: 640px) {
  /* Center the topology surface vertically on mobile */
  .hero.hero-scroll-driven .hero-topology-surface {
    inset: 6% 0 6%;
    align-items: center;
    justify-content: center;
  }
  .hero.hero-scroll-driven .hero-stage .graph-svg {
    /* No negative translate — keeps left lane labels (WAN/CORE/ACCESS) on screen */
    width: 100%;
    transform: none;
  }
  .hero.hero-scroll-driven .hero-topology-legend {
    bottom: 2%;
    font-size: 9px;
    gap: 6px 10px;
  }
  /* Make lane labels readable on mobile */
  .topo-lanes text {
    font-size: 8.4px;
    fill: rgba(176,190,207,.78);
  }
  .topo-lanes line {
    stroke: rgba(92,184,255,.10);
  }
}

/* === Scroll-driven: disable CSS animations === */

/* filter:none prevents expensive software rendering on scaled tile map */
.hero.hero-scroll-driven .hero-map-backdrop {
  animation: none !important;
  filter: none !important;
  will-change: transform;
}
.hero.hero-scroll-driven .hero-map-backdrop::after {
  animation: none !important;
  opacity: .52;
}
.hero.hero-scroll-driven .hero-map-backdrop::before {
  animation: none !important;
  opacity: 0;
}
.hero.hero-scroll-driven .hero-site-marker     { animation: none !important; }
.hero.hero-scroll-driven .hero-site-marker::before { animation: none !important; }

/* Copy fade: CSS transition triggered by .hero-copy-faded */
.hero.hero-scroll-driven .hero-copy {
  transition: opacity 0.28s ease;
}
.hero.hero-copy-faded .hero-copy {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
/* Mobile: instant toggle, no transition — eliminates reverse-scroll flicker */
@media (max-width: 720px) {
  .hero.hero-scroll-driven .hero-copy {
    transition: none;
  }
  .hero.hero-scroll-driven .stage-topo {
    transition: none !important;
  }
}

/* Topo layer: short transition for reveal (JS fallback / tablets) */
.hero.hero-scroll-driven .stage-topo {
  animation: none !important;
  opacity: 0;
  transform: scale3d(.92,.92,1) translate3d(0, 12px, 0);
  filter: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.hero.hero-scroll-driven .hero-stage.topology-in-view .stage-topo {
  opacity: 1;
  transform: none;
}
.hero.hero-scroll-driven .stage-topo.topo-sharp {
  will-change: auto;
}
.hero.hero-scroll-driven .hero-tooltip-card {
  /* default .hero-topology-revealed handles tooltip visibility */
}

/* =============================================================================
   MOBILE (≤720px): Static backdrop — ZERO per-frame transforms.
   Map sits at a fixed mid-zoom position. JS does only class toggles.
   This eliminates all sources of scroll jitter on mobile.
============================================================================= */
@media (max-width: 720px) {
  .hero.hero-scroll-static .hero-map-backdrop {
    /* Pre-zoomed position — no JS animation, pure CSS */
    transform:
      translate3d(var(--hero-final-x, 0%), var(--hero-final-y, 0%), 0)
      scale3d(
        calc(var(--hero-final-scale, 4.85) * 0.55),
        calc(var(--hero-final-scale, 4.85) * 0.55),
        1
      );
    will-change: auto; /* no animation = no will-change */
    opacity: .7;
  }
  .hero.hero-scroll-static .hero-map-backdrop::after {
    opacity: .68;
  }
  .hero.hero-scroll-static .hero-site-marker {
    transform: scale(0.38);
  }
}

/* =============================================================================
   CSS NATIVE SCROLL-DRIVEN ANIMATION — compositor, zero jitter.
   Tablets/desktop only (mobile uses static backdrop above).
============================================================================= */
@supports (animation-timeline: scroll()) {
  @keyframes heroBackdropNativeScroll {
    from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
    to   {
      transform:
        translate3d(var(--hero-final-x, 0%), var(--hero-final-y, 0%), 0)
        scale3d(var(--hero-final-scale, 4.85), var(--hero-final-scale, 4.85), 1);
    }
  }
  @keyframes heroMarkerNativeScroll {
    from { transform: scale(1); }
    to   { transform: scale(var(--hero-marker-final-scale, 0.22)); }
  }
  /* Stage-topo: compositor-driven 1:1 reveal — eliminates the oscillation
     caused by the CSS transition being triggered by a class-toggle near the
     reveal threshold. Default range (99999px) hides topo before JS sets it. */
  @keyframes heroTopoReveal {
    from { opacity: 0; transform: scale3d(.92,.92,1) translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: scale3d(1,1,1) translate3d(0,0,0); }
  }
  /* Copy fade and tooltip reveal are ALSO scroll-driven (compositor only)
     so reverse-scroll and stop near threshold cannot flicker — there is
     no class toggle, no JS hysteresis, just a smooth scroll-bound animation. */
  @keyframes heroCopyScrollFade {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
  }
  @keyframes heroTooltipScrollReveal {
    from {
      opacity: 0;
      transform: translateX(18px) scale(.96);
    }
    to {
      opacity: 1;
      transform: translateX(var(--hero-tooltip-final-x, -14px)) scale(var(--hero-tooltip-final-scale, .23));
    }
  }
  .hero.hero-scroll-driven .hero-map-backdrop {
    animation: heroBackdropNativeScroll cubic-bezier(.4, 0, .6, 1) both !important;
    animation-timeline: scroll(root) !important;
    animation-range:
      var(--scene-start, 54px)
      calc(var(--scene-start, 54px) + var(--scroll-range, 158svh)) !important;
  }
  .hero.hero-scroll-driven .hero-site-marker {
    animation: heroMarkerNativeScroll cubic-bezier(.4, 0, .6, 1) both !important;
    animation-timeline: scroll(root) !important;
    animation-range:
      var(--scene-start, 54px)
      calc(var(--scene-start, 54px) + var(--scroll-range, 158svh)) !important;
  }
  .hero.hero-scroll-driven:not(.hero-scroll-static) .stage-topo {
    animation: heroTopoReveal cubic-bezier(.16, 1, .3, 1) both !important;
    animation-timeline: scroll(root) !important;
    animation-range:
      var(--topo-reveal-start, 99999px)
      var(--topo-reveal-end, 999999px) !important;
    transition: none !important;
  }
  /* Copy + tooltip fully driven by scroll — kills all flicker on reverse scroll */
  .hero.hero-scroll-driven.hero-scroll-css .hero-copy {
    animation: heroCopyScrollFade linear both !important;
    animation-timeline: scroll(root) !important;
    animation-range:
      calc(var(--scene-start, 54px) + var(--copy-fade-start, 8svh))
      calc(var(--scene-start, 54px) + var(--copy-fade-end, 22svh)) !important;
    transition: none !important;
  }
  .hero.hero-scroll-driven.hero-scroll-css .hero-tooltip-card {
    animation: heroTooltipScrollReveal cubic-bezier(.16, 1, .3, 1) both !important;
    animation-timeline: scroll(root) !important;
    animation-range:
      var(--topo-reveal-start, 99999px)
      var(--topo-reveal-end, 999999px) !important;
    transition: none !important;
  }
}

/* ============================== GLOBAL POLISH OVERRIDES ============================== */
.hero {
  border-bottom: 0;
}
.section {
  padding: 78px 0;
  border-bottom: 0;
}
.section-tight {
  padding: 42px 0 34px;
}
#what.section {
  padding-top: 66px;
}
.section-head {
  margin-bottom: 42px;
}
.section-head h2 {
  margin-top: 14px;
  margin-bottom: 10px;
}
.section-alt {
  background: #101010;
}
.topology-section {
  background: #05070a;
}

.principles {
  gap: 12px;
  background: transparent;
  border: 0;
  overflow: visible;
}
.principle {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(18,18,18,.82);
  padding: 20px;
}
.principle:hover {
  background: rgba(25,25,25,.92);
}

.features-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: minmax(132px, auto);
  gap: 8px;
}
.feature {
  padding: 12px 10px;
  border-radius: 6px;
  background: rgba(24,24,24,.86);
  border-color: rgba(255,255,255,.08);
  min-height: 132px;
  height: 100%;
}
.feature:hover {
  transform: translateY(-2px) scale(1.006);
  border-color: rgba(92,184,255,.30);
  background: rgba(27,30,33,.92);
}
.feature-tag {
  padding: 2px 7px;
  margin-bottom: 8px;
  font-size: 8px;
  letter-spacing: 1px;
}
.feature h3 {
  font-size: 12.5px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.feature p {
  font-size: 10.5px;
  line-height: 1.35;
  margin-bottom: 0;
  display: block;
  overflow: visible;
}
.feature li {
  font-size: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.feature ul {
  display: none;
}
.feature-more {
  display: none;
  margin: 14px auto 0;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(92,184,255,.35);
  border-radius: 6px;
  background: rgba(92,184,255,.10);
  color: #5cb8ff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1280px) {
  .features-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(108px, auto);
  }
  .feature {
    min-height: 108px;
    padding: 10px;
  }
  .feature h3 {
    font-size: 12px;
  }
  .feature p {
    font-size: 10px;
  }
  .features-grid:not(.is-expanded) .feature:nth-child(n+7) {
    display: none;
  }
  .feature-more {
    display: flex;
  }
}

#what .container {
  max-width: 1520px;
}
.features-grid {
  --feature-gap: 12px;
  align-items: stretch;
  counter-reset: feature;
  display: flex;
  flex-wrap: wrap;
  gap: var(--feature-gap);
  justify-content: center;
}
.feature {
  --feature-accent: #5cb8ff;
  --feature-soft: rgba(92, 184, 255, .10);
  --feature-border: rgba(92, 184, 255, .34);
  --feature-glow: rgba(92, 184, 255, .12);
  background:
    radial-gradient(circle at 12% 0%, var(--feature-glow), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(20, 21, 22, .94);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 34px rgba(0,0,0,.16);
  display: flex;
  flex: 0 1 calc((100% - (5 * var(--feature-gap))) / 6);
  flex-direction: column;
  height: auto;
  min-height: 148px;
  min-width: 0;
  overflow: hidden;
  padding: 16px 15px 14px;
  position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.feature::before {
  background: linear-gradient(90deg, var(--feature-accent), transparent 68%);
  content: '';
  height: 2px;
  inset: 0 auto auto 0;
  opacity: .88;
  position: absolute;
  width: 100%;
}
.feature::after {
  color: rgba(255,255,255,.13);
  content: counter(feature, decimal-leading-zero);
  counter-increment: feature;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  position: absolute;
  right: 14px;
  top: 13px;
}
.feature:hover {
  background:
    radial-gradient(circle at 12% 0%, var(--feature-glow), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    rgba(24, 26, 28, .96);
  border-color: var(--feature-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 38px rgba(0,0,0,.22);
  transform: translateY(-3px);
}
.feature-tag {
  background: var(--feature-soft);
  border: 1px solid var(--feature-border);
  border-radius: 5px;
  color: var(--feature-accent);
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 14px;
  padding: 3px 8px;
  text-transform: uppercase;
  width: fit-content;
}
.feature h3 {
  color: #f4f4f4;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 10px;
  padding-right: 34px;
}
.feature p {
  color: rgba(226,226,226,.72);
  display: block;
  font-size: 12px;
  line-height: 1.38;
  margin-bottom: 0;
  max-width: 94%;
  overflow: visible;
}
.feature ul {
  display: none;
}
.feature-ingest { --feature-accent: #5cb8ff; --feature-soft: rgba(92,184,255,.10); --feature-border: rgba(92,184,255,.34); --feature-glow: rgba(92,184,255,.12); }
.feature-engine { --feature-accent: #33d6c2; --feature-soft: rgba(51,214,194,.10); --feature-border: rgba(51,214,194,.32); --feature-glow: rgba(51,214,194,.11); }
.feature-rules { --feature-accent: #ffbf5a; --feature-soft: rgba(255,191,90,.11); --feature-border: rgba(255,191,90,.34); --feature-glow: rgba(255,191,90,.12); }
.feature-evidence { --feature-accent: #a893ff; --feature-soft: rgba(168,147,255,.11); --feature-border: rgba(168,147,255,.34); --feature-glow: rgba(168,147,255,.12); }
.feature-ui { --feature-accent: #7ee071; --feature-soft: rgba(126,224,113,.10); --feature-border: rgba(126,224,113,.30); --feature-glow: rgba(126,224,113,.10); }
.feature-ai { --feature-accent: #de7fff; --feature-soft: rgba(222,127,255,.10); --feature-border: rgba(222,127,255,.32); --feature-glow: rgba(222,127,255,.11); }
.feature-ops { --feature-accent: #ff875f; --feature-soft: rgba(255,135,95,.10); --feature-border: rgba(255,135,95,.34); --feature-glow: rgba(255,135,95,.11); }
.feature-quality { --feature-accent: #a9c7ff; --feature-soft: rgba(169,199,255,.10); --feature-border: rgba(169,199,255,.32); --feature-glow: rgba(169,199,255,.11); }
@media (max-width: 1380px) {
  .feature {
    flex-basis: calc((100% - (4 * var(--feature-gap))) / 5);
  }
}
@media (max-width: 1180px) {
  .feature {
    flex-basis: calc((100% - (3 * var(--feature-gap))) / 4);
  }
}
@media (max-width: 920px) {
  .feature {
    flex-basis: calc((100% - (2 * var(--feature-gap))) / 3);
  }
}
@media (max-width: 680px) {
  .features-grid {
    --feature-gap: 10px;
  }
  .feature {
    flex-basis: calc((100% - var(--feature-gap)) / 2);
    min-height: 136px;
    padding: 13px 12px 12px;
  }
  .feature::after {
    font-size: 18px;
    right: 12px;
    top: 12px;
  }
  .feature-tag {
    font-size: 8px;
    margin-bottom: 11px;
    padding: 2px 7px;
  }
  .feature h3 {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .feature p {
    font-size: 11px;
    line-height: 1.34;
  }
  .features-grid:not(.is-expanded) .feature:nth-child(n+7) {
    display: none;
  }
  .feature-more {
    display: flex;
  }
}
@media (min-width: 681px) {
  .features-grid:not(.is-expanded) .feature:nth-child(n+7) {
    display: flex;
  }
}

/* Four-column feature grid keeps the 16 diagnostics symmetric. */
#what .container {
  max-width: 1520px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(218px, auto);
  gap: 12px;
  justify-content: initial;
}
.feature {
  min-height: 218px;
  height: 218px;
}
.feature h3,
.feature p {
  overflow-wrap: break-word;
}
.feature p {
  font-size: 12.5px;
  line-height: 1.42;
  max-width: 98%;
}
@media (max-width: 1180px) {
  .features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .features-grid {
    grid-auto-rows: minmax(190px, auto);
    gap: 10px;
  }
  .feature {
    min-height: 190px;
    height: auto;
  }
  .feature p {
    font-size: 10.6px;
    line-height: 1.34;
  }
}

.pipe-step,
.sec-card,
.tech-card,
.faq details {
  border-radius: 6px;
  background: rgba(24,24,24,.86);
  border-color: rgba(255,255,255,.08);
}
.pipe-step,
.tech-card {
  padding: 18px;
}
.sec-card {
  padding: 22px;
}
.faq details {
  padding: 15px 18px;
}

#roadmap .section-head {
  margin-bottom: 30px;
}
.roadmap-scroll {
  width: 100%;
  margin: 0;
  padding: 10px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.roadmap-scroll:focus-visible {
  outline: 1px solid rgba(92,184,255,.62);
  outline-offset: 8px;
}
.roadmap-scroll::-webkit-scrollbar {
  height: 0;
}
.roadmap-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.roadmap-scroll::-webkit-scrollbar-thumb {
  background:
    linear-gradient(90deg, rgba(16,185,129,.72), rgba(92,184,255,.88), rgba(245,158,11,.72));
  border: 2px solid #101010;
  border-radius: 999px;
}
.roadmap-scroll.is-drag-ready .roadmap {
  user-select: none;
}
.roadmap-scroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.roadmap {
  position: relative;
  gap: 14px;
  padding: 16px 0 4px;
  align-items: stretch;
}
.roadmap::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 30px;
  height: 1px;
  background:
    linear-gradient(90deg,
      rgba(16,185,129,.58),
      rgba(92,184,255,.44) 48%,
      rgba(148,163,184,.20));
  box-shadow: 0 0 14px rgba(92,184,255,.12);
  pointer-events: none;
}
.rm-hint {
  margin-top: 8px;
  color: rgba(148,163,184,.72);
}

.reveal-card {
  opacity: .22;
  transform: translateY(14px) scale(.985);
  transition:
    opacity .46s ease,
    transform .46s cubic-bezier(.18,.72,.22,1),
    border-color .18s ease,
    background .18s ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
  will-change: opacity, transform;
}
.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 720px) {
  .hero {
    padding-top: 34px;
    padding-bottom: 18px;
  }
  .section {
    padding: 64px 0;
  }
  .section-tight {
    padding: 34px 0 26px;
  }
  #what.section {
    padding-top: 54px;
  }
  .section-head {
    margin-bottom: 32px;
  }
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .graph-links-anim path {
    animation: none !important;
  }
}

/* ============================== TOPOLOGY DEMO INTERACTIONS ============================== */

/* Interactive node hover/active */
.nd-node[data-node] { cursor: pointer; }
.nd-node[data-node]:hover .node-box,
.nd-node[data-node]:hover .cluster-node {
  filter: drop-shadow(0 0 14px rgba(92,184,255,.48));
  transition: filter .15s;
}
.nd-node.demo-active .node-box,
.nd-node.demo-active .cluster-node {
  stroke: #5cb8ff !important;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 22px rgba(92,184,255,.65));
}
.graph-links path[data-link] { cursor: pointer; }
.graph-links path[data-link]:hover {
  stroke: rgba(92,184,255,.82);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(92,184,255,.4));
}

/* Hint text */
.topo-hint {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(148,163,184,.55);
  font-size: 10px;
  letter-spacing: .5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s .8s;
  z-index: 5;
}
.hero-stage.topology-in-view .topo-hint,
.section-topology-surface .topo-hint {
  opacity: 1;
}
@media (max-width: 640px) {
  .topo-hint { font-size: 9px; top: -14px; }
}

/* ============================== DEVICE DETAIL PANEL ============================== */
/* Panel uses position:fixed + the inert top-layer (popover) when supported,
   guaranteeing it is anchored to the viewport regardless of any ancestor's
   transform/filter/contain. NO transform/will-change/contain on the panel
   itself — those have caused subtle "drift on scroll" bugs in the past
   because of cascade interactions. The panel is appended to <body>, the
   simplest possible containing-block setup. */
.topo-panel {
  position: fixed;
  top: 0;
  left: 0;
  /* Reset popover defaults (UA gives it inset:0; margin:auto) so JS pixel
     coords work the same in popover and non-popover paths. */
  right: auto;
  bottom: auto;
  margin: 0;
  inset: auto;
  border: 1px solid rgba(92,184,255,.28);
  padding: 0;
  z-index: 9000;
  display: none;
  max-width: 340px;
  width: calc(100vw - 32px);
  font-family: 'JetBrains Mono', monospace;
  background: #0d1320;
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.62), 0 0 0 1px rgba(92,184,255,.08) inset;
  overflow: hidden;
}
/* When the native popover is open, browser sets :popover-open which forces
   display:block. Re-apply our inline px positioning by overriding inset. */
.topo-panel:popover-open {
  inset: auto;
  margin: 0;
}
/* Animation only on open — prevents replay on style recompute */
.topo-panel.is-open {
  display: block;
  animation: panelIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes panelIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile bottom sheet */
.topo-panel.is-mobile {
  max-width: none;
  width: 100%;
  left: 0 !important;
  right: 0;
  bottom: 0 !important;
  top: auto !important;
  border-radius: 14px 14px 0 0;
  max-height: 68vh;
  max-height: 68svh;
  overflow-y: auto;
  animation: panelSlideUp .32s cubic-bezier(.16,1,.3,1);
}
@keyframes panelSlideUp {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
.topo-panel.is-mobile::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 10px auto 6px;
  border-radius: 2px;
  background: rgba(148,163,184,.32);
}

.topo-panel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: rgba(203,213,225,.72);
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  z-index: 2;
}
.topo-panel-close:hover { background: rgba(255,255,255,.10); color: #f5f5f5; }

.topo-panel-body { padding: 16px 18px 18px; }
.topo-panel.is-mobile .topo-panel-body { padding: 8px 20px 24px; }

.tp-header { margin-bottom: 14px; }
.tp-role {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5cb8ff;
  background: rgba(92,184,255,.10);
  border: 1px solid rgba(92,184,255,.26);
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 8px;
}
.tp-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
}

.tp-rows { display: flex; flex-direction: column; gap: 0; }
.tp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font-size: 11.5px;
  color: #c0c0c0;
}
.tp-row:last-child { border-bottom: 0; }
.tp-lbl {
  color: rgba(148,163,184,.72);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tp-mono { font-family: 'JetBrains Mono', monospace; color: #5cb8ff; }

.tp-findings { margin-top: 12px; }
.tp-findings-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(148,163,184,.58);
  margin-bottom: 8px;
}
.tp-finding {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 11px;
  color: #c0c0c0;
  line-height: 1.35;
}
.sev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.sev-crit { background: rgba(248,113,113,.14); color: #f87171; border: 1px solid rgba(248,113,113,.32); }
.sev-warn { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.28); }
.sev-ok   { background: rgba(110,231,183,.10); color: #6ee7b7; border: 1px solid rgba(110,231,183,.24); }

/* Cluster expand grid */
.tp-cluster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tp-endpoint {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
}
.tp-ep-name {
  font-size: 12px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 4px;
}
.tp-ep-detail {
  font-size: 10px;
  color: #a0a0a0;
  margin-top: 2px;
}
.tp-ep-detail .tp-lbl {
  font-size: 9px;
  margin-right: 4px;
}
.tp-ep-detail .tp-mono {
  font-size: 10px;
}

/* ============================== SVG CLUSTER EXPAND ============================== */
.cluster-node.cluster-expanded {
  stroke: #5cb8ff !important;
  stroke-width: 2;
  filter: drop-shadow(0 0 16px rgba(92,184,255,.5));
}
.cluster-expand-item {
  transition: opacity .2s ease;
}
.cluster-expand-group {
  /* no filter here — it causes flicker on child hover */
}
.expand-item-bg {
  fill: rgba(8,12,18,.95);
  stroke: rgba(92,184,255,.18);
  stroke-width: .7;
  rx: 5;
}
.cluster-expand-item:hover .expand-item-bg {
  fill: rgba(16,22,32,.98);
  stroke: rgba(92,184,255,.44);
}
.expand-item-name {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  fill: #e2e8f0;
}
.expand-item-detail {
  font-size: 7.5px;
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(148,163,184,.65);
}
.expand-item-mac {
  font-size: 7.5px;
  font-family: 'JetBrains Mono', monospace;
  fill: rgba(92,184,255,.8);
}

/* ============================== DEMO CURSOR ============================== */
.demo-cursor {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.7));
  will-change: left, top, opacity;
}
.demo-cursor svg {
  width: 22px; height: 22px;
}
.demo-cursor.cursor-active {
  opacity: 1;
}
.demo-cursor.cursor-click svg {
  animation: cursorPress .28s ease-out forwards;
}
@keyframes cursorPress {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(.72) rotate(-4deg); }
  100% { transform: scale(.85) rotate(-2deg); }
}