/* =========================================================
   HERO — AI / ROBOTICS
   ========================================================= */
.hero{
  position: relative;
  padding: 180px 0 120px;
  overflow: hidden;
  background: var(--c-bg);
}
.hero::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-radial-glow);
  pointer-events: none;
}
.hero-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,122,41,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,41,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 40%, transparent 85%);
  pointer-events: none;
}

#hero-network{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .85;
}

.hero .container{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  text-align: center;
  justify-items: center;
}

.hero h1{ max-width: 900px; }
.hero h1 .line{ display: inline; }

.hero-lede{
  max-width: 620px;
  font-size: 1.12rem;
}

.hero-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-stats{
  margin-top: 24px;
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 34px;
  border-top: 1px solid var(--c-border-soft);
  width: 100%;
  max-width: 760px;
}
.hero-stat{ text-align: center; }
.hero-stat .num{
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 600;
  background: var(--grad-signal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block;
}
.hero-stat .label{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-text-mute);
  font-family: var(--font-mono);
}

@media (max-width: 640px){
  .hero{ padding: 140px 0 80px; }
  .hero-stats{ gap: 22px 34px; }
}

/* =========================================================
   FLOATING ROBOTS / AI BACKGROUND ELEMENTS
   Ambient, low-opacity icons drifting behind hero content —
   reused on the homepage hero and every inner page header.
   ========================================================= */
.floating-tech-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ft-icon{
  position: absolute;
  display: block;
  opacity: .16;
  filter: drop-shadow(0 0 20px currentColor);
  animation: mj-float 10s ease-in-out infinite;
  will-change: transform;
}
.ft-icon svg{ width: 100%; height: 100%; display: block; }

.ft-1{ top: 16%;  left: 7%;   width: 68px; color: var(--c-blue);   animation-duration: 11s; }
.ft-2{ top: 66%;  left: 12%;  width: 46px; color: var(--c-cyan);   animation-duration: 9s;  animation-delay: 1.1s; }
.ft-3{ top: 20%;  left: 84%;  width: 42px; color: var(--c-violet); animation-duration: 8s;  animation-delay: .6s;  }
.ft-4{ top: 72%;  left: 80%;  width: 58px; color: var(--c-blue);   animation-duration: 12s; animation-delay: 2s;   }
.ft-5{ top: 8%;   left: 47%;  width: 38px; color: var(--c-cyan);   animation-duration: 10s; animation-delay: 1.6s; }
.ft-6{ top: 82%;  left: 45%;  width: 50px; color: var(--c-violet); animation-duration: 9.5s;animation-delay: .3s;  }
.ft-7{ top: 40%;  left: 4%;   width: 44px; color: var(--c-violet); animation-duration: 10.5s; animation-delay: .9s; }
.ft-8{ top: 46%;  left: 90%;  width: 40px; color: var(--c-blue);   animation-duration: 9.2s;  animation-delay: 1.8s; }

@keyframes mj-float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(6deg); }
}

@media (max-width: 900px){
  .ft-3, .ft-4, .ft-7, .ft-8{ display: none; }
}
@media (max-width: 640px){
  .ft-icon{ opacity: .12; }
  .ft-2, .ft-5, .ft-6{ display: none; }
}

/* ---------------- Flying drones ---------------- */
.ft-drone{
  position: absolute;
  top: 30%;
  left: -8%;
  width: 52px;
  opacity: 0;
  filter: drop-shadow(0 0 14px currentColor);
  animation: mj-fly 17s linear infinite;
  will-change: transform, opacity;
}
.ft-drone svg{ width: 100%; height: 100%; display: block; }
.ft-drone-1{ top: 24%; color: var(--c-cyan);   animation-duration: 17s; }
.ft-drone-2{ top: 64%; width: 40px; color: var(--c-violet); animation-duration: 22s; animation-delay: 6s; }

@keyframes mj-fly{
  0%{   transform: translate(0, 0) rotate(-4deg);        opacity: 0; }
  8%{   opacity: .28; }
  50%{  transform: translate(60vw, -46px) rotate(3deg);  opacity: .28; }
  92%{  opacity: .28; }
  100%{ transform: translate(120vw, 12px) rotate(-4deg); opacity: 0; }
}

@media (max-width: 900px){
  .ft-drone-2{ display: none; }
}
@media (max-width: 640px){
  .ft-drone{ display: none; }
}

/* ---------------- Drifting binary digits ---------------- */
.ft-binary{
  position: absolute;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  opacity: .16;
  white-space: nowrap;
  animation: mj-drift 13s ease-in-out infinite;
  will-change: transform, opacity;
}
.ft-bin-1{ top: 12%; left: 24%; color: var(--c-cyan);   animation-duration: 12s; }
.ft-bin-2{ top: 40%; left: 6%;  color: var(--c-violet); animation-duration: 15s; animation-delay: 1s;   }
.ft-bin-3{ top: 60%; left: 30%; color: var(--c-blue);   animation-duration: 11s; animation-delay: 2.4s; }
.ft-bin-4{ top: 18%; left: 70%; color: var(--c-cyan);   animation-duration: 14s; animation-delay: .8s;  }
.ft-bin-5{ top: 74%; left: 66%; color: var(--c-violet); animation-duration: 10s; animation-delay: 1.6s; }
.ft-bin-6{ top: 50%; left: 88%; color: var(--c-blue);   animation-duration: 13s; animation-delay: 2s;   }

@keyframes mj-drift{
  0%, 100%{ transform: translateY(0);    opacity: .14; }
  50%{      transform: translateY(-18px); opacity: .28; }
}

@media (max-width: 900px){
  .ft-bin-3, .ft-bin-6{ display: none; }
}
@media (max-width: 640px){
  .ft-binary{ display: none; }
}

/* ---------------- Page hero (About / Services / Get In Touch, etc.) ---------------- */
.page-hero{
  padding: 88px 0 54px;
  text-align: center;
}
.page-hero .container{ text-align: center; gap: 18px; }
.page-hero .eyebrow{ justify-content: center; }
.page-hero h1{ max-width: 760px; margin-inline: auto; }

@media (max-width: 640px){
  .page-hero{ padding: 76px 0 40px; }
}

/* The inner-page sections (About gallery / Services grid / Contact) sit as
   the very first thing inside <main id="content"> right after .page-hero.
   .section-pad's normal top padding (up to 128px) stacked on top of the
   hero's own bottom padding left a large empty gap between the nav and the
   page content, so we collapse it here. */
.page-hero + #content > .section-pad:first-child{
  padding-top: clamp(16px, 3vw, 40px);
}
@media (max-width: 640px){
  .page-hero + #content > .section-pad:first-child{
    padding-top: 12px;
  }
}