/* ===== Animated integration map hero ===== */

.hero-map{
  padding: 110px 0 90px;
  text-align: left;
  overflow: hidden;
}
.hero-map-inner{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.hero-copy h1{
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  max-width: none;
  margin: 0 0 .5em;
}
.hero-copy .hero-sub{
  margin: 0 0 2em;
  max-width: 520px;
}
.hero-copy .hero-actions{
  justify-content: flex-start;
  margin-bottom: 0;
}
.hero-map .hero-stats{
  margin-top: 76px;
  justify-content: space-between;
  max-width: none;
}

/* --- canvas --- */
.hero-canvas{ position: relative; }
.hero-canvas svg{ width: 100%; height: auto; overflow: visible; }
.map-mobile{ display: none; }

/* nodes */
.node-box{
  fill: rgba(255,255,255,0.035);
  stroke: rgba(255,255,255,0.11);
  stroke-width: 1;
}
.node-label{
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  fill: #c3bfb7;
  dominant-baseline: middle;
  text-anchor: start;
}
.node-label-c{ text-anchor: middle; }
.node-label-sm{ font-size: 12px; }
.hub-title-sm{ font-size: 17px; }
.hub-sub-sm{ font-size: 9.5px; }
.node-dot{ fill: var(--accent, #c8893e); opacity: .85; }

/* connectors */
.link{
  fill: none;
  stroke: rgba(200,137,62,0.3);
  stroke-width: 1.4;
  stroke-dasharray: 4 8;
  animation: linkFlow 1.4s linear infinite;
}
@keyframes linkFlow{ to{ stroke-dashoffset: -12; } }

/* travelling data packets */
.pkt{
  fill: #e8b673;
  animation: pktFlow 3s linear infinite;
}
@keyframes pktFlow{
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.pkt1{ offset-path: path("M196,90 C300,90 350,160 437,213");  animation-delay: 0s; }
.pkt2{ offset-path: path("M196,260 L414,260");                animation-delay: .55s; }
.pkt3{ offset-path: path("M196,430 C300,430 350,360 437,307"); animation-delay: 1.1s; }
.pkt4{ offset-path: path("M784,90 C680,90 630,160 543,213");   animation-delay: 1.6s; }
.pkt5{ offset-path: path("M784,260 L566,260");                 animation-delay: 2.1s; }
.pkt6{ offset-path: path("M784,430 C680,430 630,360 543,307"); animation-delay: 2.6s; }

/* hub */
.hub-ring{
  fill: none;
  stroke: rgba(200,137,62,0.55);
  stroke-width: 1.4;
}
.hub-pulse{
  fill: none;
  stroke: rgba(200,137,62,0.5);
  stroke-width: 1.2;
  transform-origin: 490px 260px;
  animation: hubPulse 3.4s ease-out infinite;
}
@keyframes hubPulse{
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.hub-core{ fill: rgba(200,137,62,0.09); }
.hub-title{
  font-family: 'Literata', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  fill: #ecebe8;
  text-anchor: middle;
}
.hub-sub{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #9b9891;
  text-anchor: middle;
  letter-spacing: .5px;
}

/* --- responsive --- */
@media (max-width: 1000px){
  .hero-map-inner{ grid-template-columns: 1fr; gap: 44px; }
  .hero-copy{ text-align: center; }
  .hero-copy .hero-sub{ margin-left: auto; margin-right: auto; }
  .hero-copy .hero-actions{ justify-content: center; }
  .hero-map .hero-stats{ justify-content: center; gap: 46px; }
}

@media (max-width: 620px){
  .map-desktop{ display: none; }
  .map-mobile{ display: block; }
  .hub-pulse{ transform-origin: 170px 230px; }
  .hero-map{ padding: 90px 0 70px; }
}

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .link, .pkt, .hub-pulse{ animation: none; }
  .pkt{ opacity: .9; offset-distance: 55%; }
  .link{ stroke-dasharray: none; stroke: rgba(200,137,62,0.28); }
}