/* SECTION */
.split-section {
  display: flex;
  min-height: 70vh;
  background: #000;
  color: #f5efe6;
  /* padding-top: 30px; */
}

/* LEFT TEXT */
.split-text {
  width: 50%;
  padding: 120px 80px;
}

.split-text h2 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 42px;
  margin-bottom: 20px;
}

.split-text p {
   font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 28px;
  line-height: 1.6;
  opacity: 0.9;
}

/* RIGHT ANIMATION */
.split-animation {
  width: 50%;
  position: relative;
  overflow: hidden;
}

/* =========================
   ANIMALS (PRECISE ALIGN)
   ========================= */

.industry-layer {
  position: absolute;
  top: 70px;
  width: 100%;
}

.industry-layer i {
  position: absolute;
  font-size: 30px;
  color: #f4eadf;
}

.i1 { left: 7%; }
.i2 { left: 26%; }
.i3 { left: 50%; transform: translateX(-50%); }
.i4 { left: 74%; }
.i5 { left: 87%; }

/* =========================
   SVG
   ========================= */

.signal-svg {
  position: absolute;
  top: 70px;
  width: 100%;
  aspect-ratio: 2 / 1;
}

/* =========================
   SIGNAL FLOW (SINGLE SOURCE)
   ========================= */

.signal-flow {
  fill: none;
  stroke: #6adf7c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: converge 3s ease-in-out infinite;
}

@keyframes converge {
  0% { stroke-dashoffset: 500; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* =========================
   HUB (ALIGNED TO SVG END)
   ========================= */

.hub {
  position: absolute;
  top: calc(70px + 450px);
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: #3fa34d;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  animation: hubPulse 2.4s infinite;
}

@keyframes hubPulse {
  0% { box-shadow: 0 0 0 0 rgba(63,163,77,0.6); }
  70% { box-shadow: 0 0 0 28px rgba(63,163,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,163,77,0); }
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 1024px) {
  .split-text {
    padding: 80px 50px;
  }
}

/* =========================
   MOBILE FIX — REQUIRED
   ========================= */

/* =========================
   MOBILE STACK LAYOUT
   ========================= */

@media (max-width: 768px) {

  /* Stack text + animation */
  .split-section {
    flex-direction: column;
    min-height: auto;
  }

  /* TEXT — FULL WIDTH */
  .split-text {
    width: 100%;
    padding: 48px 24px 32px;
  }

  .split-text h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .split-text p {
    font-size: 16px;
  }

  /* ANIMATION — FULL WIDTH */
  .split-animation {
    width: 100%;
    min-height: 420px;        /* 🔥 REQUIRED */
    position: relative;
  }

  /* SVG must have height */
  .signal-svg {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 260px;            /* 🔥 REQUIRED */
  }

  /* Animals aligned */
  .animal-layer {
    top: 80px;
  }

  .animal-layer i {
    font-size: 18px;
  }

  /* Hub at bottom */
  .hub {
    top: auto;
    bottom: 24px;
    transform: translateX(-50%) scale(0.85);
  }
}