:root {
      --bg: #ffffff;
      --text-main: #111827;
      --text-sub: #4b5563;
      --primary: #00d4ff;        
      --primary-hover: #00b4dd;
      --outline: #00d4ff;        
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
      background: var(--bg);
      color: var(--text-main);
      overflow-x: hidden; /* avoid stray horizontal whitespace/scroll */
    }


  html {
  scroll-behavior: smooth;
  max-width: 100vw;
  overflow-x: hidden;
}

.section-arrow {
  position: absolute;
  bottom: 140px; /* lift arrow much higher */
  right: 250px; /* nudge slightly right from previous position */
  left: auto;
  transform: translateX(0);
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color:#ff2bd6;
  z-index: 9999;

  filter:
    drop-shadow(0 0 10px #ff61f6)
    drop-shadow(0 0 18px #ff2bd6)
    drop-shadow(0 0 26px #ff61f6);

  animation: arrowPulse 1.8s infinite ease-in-out;
}

.section-arrow:hover {
  filter:
    drop-shadow(0 0 16px #6EE7FF)
    drop-shadow(0 0 26px #6EE7FF)
    drop-shadow(0 0 38px #6EE7FF);
}

@keyframes arrowPulse {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(12px); }
  100% { transform: translateY(0); }
}

/* Lower the arrow specifically in the third section (target) */
#target-container .section-arrow {
  bottom: -60px; /* drop it further below the content */
}

/* Lower the arrow slightly in the second section (modular) */
#modular-container .section-arrow {
  bottom: 70px;
}

/* Lower the arrow in the fourth section (impact) */
#impact-container .section-arrow {
  bottom: 80px;
}

/* First section arrow slightly lower */
#hero-container .section-arrow {
  bottom: 70px;
}

/* Hide arrow on the last/contact section */
#contact-section .section-arrow {
  display: none;
}

/* Mobile tweaks to reduce overflow and tighten nav */
@media (max-width: 1024px) {
  .section-arrow {
    right: 20px;
    bottom: 40px;
  }
  #hero-container .section-arrow {
    bottom: 40px;
  }
  #target-container .section-arrow,
  #modular-container .section-arrow,
  #impact-container .section-arrow {
    bottom: 20px;
  }
}

@media (max-width: 600px) {
  .section-arrow {
    display: none;
  }
  .top-nav {
    padding: 10px 14px;
  }
  .nav-content {
    gap: 8px;
    flex-wrap: wrap;
  }
  .logo {
    height: 34px;
  }
  .brand-text {
    font-size: 16px;
  }
  .nav-right {
    gap: 14px;
    flex-wrap: wrap;
  }
  .nav-right a {
    font-size: 14px;
  }
  .search-icon {
    width: 18px;
    height: 18px;
  }
}