/* ==========================================================================
   Hero 3D node-network animation  (scoped under .hero-net to avoid collisions)
   Adapted from user-provided design; colors mapped to Al-Ezdehar brand vars.
   ========================================================================== */
.hero-net {
  --hn-orange:        var(--brand);
  --hn-orange-light:  #ffb43a;
  --hn-orange-dark:   #c85e00;
  --hn-gray:          #4a4d52;
  --hn-gray-light:    #8b8e93;
  --hn-gray-pale:     #c8c9cc;

  position: relative; z-index: 1;
  width: 100%; min-height: 460px;
  perspective: 1200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Rajdhani", var(--font);
}

/* network + preserve-3d */
.hero-net .hn-net {
  position: relative; width: 320px; height: 280px;
  transform-style: preserve-3d; will-change: transform;
}

/* connection lines */
.hero-net .hn-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.hero-net .hn-edge { fill: none; stroke-linecap: round; opacity: 0; transition: opacity .6s ease; }
.hero-net .hn-edge.hn-hot  { stroke: var(--hn-orange); stroke-width: 2.5; }
.hero-net .hn-edge.hn-cool { stroke: var(--hn-gray-pale); stroke-width: 1.8; }
.hero-net .hn-edge.show { opacity: 1; }
.hero-net .hn-flow { fill: var(--hn-orange); opacity: 0; }

/* nodes */
.hero-net .hn-node {
  position: absolute; border-radius: 50%; z-index: 3;
  transform-style: preserve-3d; opacity: 0; transform: scale(0) translateZ(0);
  cursor: pointer; will-change: transform, opacity;
}
.hero-net .hn-node.pop { opacity: 1; transform: scale(1) translateZ(var(--dz)); }

.hero-net .hn-node.hot {
  background: radial-gradient(circle at 35% 30%, var(--hn-orange-light), var(--hn-orange) 60%, var(--hn-orange-dark));
  box-shadow: 0 4px 15px rgba(255,122,0,.4), 0 1px 3px rgba(0,0,0,.12);
  transition: all .6s cubic-bezier(.34,1.56,.64,1);
}
.hero-net .hn-node.hot::after {
  content: ""; position: absolute; top: 14%; left: 20%; width: 32%; height: 24%;
  border-radius: 50%; background: rgba(255,255,255,.42); filter: blur(1.5px);
}
.hero-net .hn-node.hot:hover {
  box-shadow: 0 6px 30px rgba(255,122,0,.55), 0 2px 8px rgba(0,0,0,.16);
  transform: scale(1.15) translateZ(calc(var(--dz) + 10px));
}

.hero-net .hn-node.cool {
  background: radial-gradient(circle at 35% 30%, #b0b2b6, var(--hn-gray) 60%, #3a3d42);
  box-shadow: 0 3px 10px rgba(74,77,82,.28), 0 1px 2px rgba(0,0,0,.1);
  transition: all .6s cubic-bezier(.34,1.56,.64,1);
}
.hero-net .hn-node.cool::after {
  content: ""; position: absolute; top: 14%; left: 20%; width: 28%; height: 20%;
  border-radius: 50%; background: rgba(255,255,255,.25); filter: blur(1px);
}
.hero-net .hn-node.cool:hover {
  box-shadow: 0 5px 20px rgba(74,77,82,.38), 0 2px 6px rgba(0,0,0,.14);
  transform: scale(1.15) translateZ(calc(var(--dz) + 10px));
}

/* shockwave */
.hero-net .hn-wave {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%;
  border: 2px solid var(--hn-orange); transform: translate(-50%,-50%); opacity: 0;
  pointer-events: none; z-index: 5;
}
.hero-net .hn-wave.go { animation: hnWaveOut 1s cubic-bezier(.1,.8,.2,1) forwards; }
@keyframes hnWaveOut {
  0%   { width: 0; height: 0; opacity: .6; border-width: 3px; }
  100% { width: 400px; height: 400px; opacity: 0; border-width: .5px; }
}

/* sparks */
.hero-net .hn-sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; }
.hero-net .hn-dot { position: absolute; border-radius: 50%; pointer-events: none; }

/* brand lockup */
.hero-net .hn-brand { margin-top: 40px; text-align: center; opacity: 0; transform: translateY(25px); }
.hero-net .hn-brand.up { opacity: 1; transform: translateY(0); transition: all .9s cubic-bezier(.16,1,.3,1); }
.hero-net .hn-name {
  font-family: "Orbitron", var(--font); font-size: 27px; font-weight: 900;
  color: var(--ink); letter-spacing: 3px; position: relative; display: inline-block;
}
.hero-net .hn-name .dash { color: var(--hn-orange); margin: 0 6px; }
.hero-net .hn-name::after {
  content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 2.5px; background: var(--hn-orange); border-radius: 2px;
}
.hero-net .hn-brand.up .hn-name::after { animation: hnLineGrow .8s cubic-bezier(.16,1,.3,1) .3s forwards; }
@keyframes hnLineGrow { to { width: 70%; } }
.hero-net .hn-sub {
  font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 5px;
  text-transform: uppercase; margin-top: 16px; opacity: 0;
}
.hero-net .hn-brand.up .hn-sub { animation: hnFadeUp .6s ease-out .7s forwards; }
@keyframes hnFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* smaller screens */
@media (max-width: 991.98px) { .hero-net { min-height: 400px; } }
@media (max-width: 575.98px) { .hero-net { transform: scale(.82); min-height: 360px; } }