:root {
  --main-blue: #132a4b;
  --neon-green: #cbf731;
  --text-light: #f4f6fa;
}
html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  color: var(--text-light);
  font-family: 'Inter', Arial, sans-serif;
  /* Add this complex blue glow gradient: */

}
body { overflow-x: hidden; }

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px; /*width: 100vw;*/
  background: rgba(19,42,75,0.95);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 100;
  box-shadow: 0 2px 13px rgba(19,42,75,0.17);
  padding: 0 1.2em;
}
.navbar-left { display: flex; align-items: center; gap: 14px;}
.navbar-logo1 { height: 50px; margin-right: 2px; filter: drop-shadow(0 0 8px rgba(30, 136, 255, 0.6));}
.navbar-logo2 { height: 30px; margin-right: 2px; filter: drop-shadow(0 0 8px rgba(30, 136, 255, 0.6));}
.navbar-title {
  font-size: 1.6em; font-weight: 800; color: var(--text-light);
  letter-spacing: 0.07em;
  text-shadow: 0 2px 8px var(--main-blue), 0 1px 0 var(--neon-green);
}
.navbar-right { display: flex; align-items: center; gap: 1.9em;}
.navbar-link {
  font-weight: 600; font-size: 1.08em; color: var(--text-light);
  text-decoration: none; padding: 0.3em 0.85em;
  border-radius: 18px; transition: background .17s, color .17s;
}
.navbar-link:hover { background: var(--neon-green); color: var(--main-blue);}
.burger-menu {
  display: none; background: none; border: none; margin-left: 1em;
  width: 32px; height: 32px; align-items: center; justify-content: center;
  cursor: pointer; z-index: 101;
}
.burger-menu span {
  display: block; width: 28px; height: 4px;
  background: var(--neon-green);
  margin: 5px 0; border-radius: 2px; transition: 0.25s;
}
.mobile-nav {
  display: none; position: fixed; top: 60px; left: 0; right: 0;
  background: rgba(19,42,75,0.98);
  width: 100vw; z-index: 99;
  flex-direction: column; align-items: start;
  padding: 1em 2em 2em 2em;
}
.mobile-nav .navbar-link {
  display: block; margin: 1em 0 1em 0; font-size: 1.2em; color: var(--neon-green);
  background: none; font-weight: 700; border-radius: 0; text-shadow: 0 1px 7px var(--main-blue);
}
@media (max-width: 700px) {
  .navbar-right { display: none; }
  .burger-menu { display: flex; }
  .mobile-nav { display: flex; }
}

.video-hero-wrapper {
  width: 100vw; height: 100vh; position: relative;
}
.video-bg {
  position: absolute; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1; overflow: hidden; pointer-events: none;
}
.video-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 25, 50, 0.5) 0%,
    rgba(10, 25, 50, 0.75) 100%
  );
}
.video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;        /* ensure coverage */
  height: 120vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  border: none;
  background: #000;

  /* Tweak these to match your exact hue */
  filter: hue-rotate(-12deg) saturate(0.85) brightness(0.95);
  /* try -8..-18deg, saturate 0.7..1.0, brightness 0.9..1.05 */
}
.video-fade,
.video-fade-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50vh;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(19,42,75,0) 0%,
    rgba(19,42,75,0.15) 60%,
    rgba(20,43,78,1) 100%  /* prevents a hard line */
  );
}
.video-bg::after {
  content: "";
  position: absolute;
  bottom: -2vh;    /* slight overlap so the blend touches the below content */
  left: 0;
  width: 100%;
  height: 36vh;    /* controls how far the blend extends */
  pointer-events: none;
  z-index: 2;

  /* Match stops to the radial/linear colors in .neural-background */
  background: linear-gradient(
    180deg,
    rgba(30, 144, 255, 0.06) 0%,
    rgba(65, 105, 225, 0.08) 25%,
    rgba(0, 119, 206, 0.20) 55%,
    rgba(7, 42, 74, 0.9) 100%
  );

  mix-blend-mode: multiply;  /* or try 'overlay' / 'screen' to see which blends best */
  opacity: 0.9;
  filter: blur(6px); /* softens the color spill */
}

.scanlines {
  pointer-events: none; position: absolute; left: 0; top: 0;
  width: 100vw; height: 100vh; z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.06) 1px,
    rgba(19,42,75,0) 1px, rgba(19,42,75,0) 4px
  );
  mix-blend-mode: lighten;
}
.scanlines::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35vh; /* how tall the fade is */
  background: linear-gradient(
    to bottom,
    rgba(19,42,75,0) 0%,   /* no darkening at top */
    rgba(19,42,75,0.5) 60%,
    rgba(19,42,75,1) 100%  /* full fade-out */
  );
  pointer-events: none;
}
.video-blend-fade {
  width: 100%;
  height: 18vh;
  background: linear-gradient(
    to bottom,
    #132a4b 0%,          /* bottom tone of the video fade */
    rgba(19,42,75,0.8) 40%,
    rgba(19,42,75,0.4) 70%,
    rgba(19,42,75,0) 100% /* fades out so underlying bg shows */
  );
  position: relative;
  z-index: 1;
}
.scroll-indicator {
  position: relative;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  z-index: 5;
  pointer-events: none;
}

.scroll-indicator .arrow {
  position: relative;
  width: 18px;
  height: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  transform: rotate(-45deg);
  animation: arrowBounce 2s infinite ease-in-out, arrowPulse 4s infinite ease-in-out;
  filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.5));
  opacity: 0.9;
}

/* Animation: smooth float & glow */
@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0) rotate(-45deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(10px) rotate(-45deg);
    opacity: 0.5;
  }
}
  @keyframes arrowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(56,134,255,0.4));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(56,134,255,0.8));
  }
}
.neural-background {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 85%, rgba(30, 144, 255, 0.7) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(65, 105, 225, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 45% 60%, rgba(0, 191, 255, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 70% 40%, rgba(70, 130, 180, 0.4) 0%, transparent 50%),
    linear-gradient(135deg, #071a2a 0%, #0f2a4a 50%, #000814 100%);
  animation: backgroundPulse 14s ease-in-out infinite;
}
 @keyframes backgroundPulse {
     0%, 100% {
         filter: brightness(0.9) saturate(1.4) hue-rotate(0deg);
    }
     33% {
         filter: brightness(1.1) saturate(1.7) hue-rotate(15deg);
    }
     66% {
         filter: brightness(1.0) saturate(1.5) hue-rotate(-10deg);
    }
}


.hero {
  position: absolute;
  top: 70%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 20; text-align: center; width: 100vw;
  pointer-events: none;
}
.hero-card {
  display: inline-block;
  margin: 0 auto;
  padding: 2em 2.5em 1.7em 2.5em;
  border-radius: 28px;
  backdrop-filter: blur(10px) brightness(1.3) saturate(1.3);
  background: linear-gradient(
    180deg,
    rgba(111, 164, 240, 0.55) 0%,     /* slightly transparent top */
    rgba(101, 131, 174, 0.7) 45%,     /* mid fade */
    rgba(14, 39, 74, 0.95) 100%    /* solid base tone */
  );
  box-shadow:
    0 0 45px 15px rgba(56, 134, 255, 0.25), /* soft outer glow */
    0 0 25px 5px rgba(203, 247, 49, 0.15),  /* neon green hint */
    0 0 80px 10px rgba(30, 144, 255, 0.25);
  text-align: center;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    rgba(0, 191, 255, 0.4) 0%,
    rgba(19, 42, 75, 0) 70%
  );
  mix-blend-mode: screen;
  opacity: 0.6;
  z-index: -1;
}
.hero-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  opacity: 0.5;
  transform: translateX(-100%);
  animation: heroShine 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroShine {
  0%, 90%, 100% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(100%);
  }
}
.logo-img { width: 120px; display: block; margin: 0 auto 1.1em auto;
filter: drop-shadow(0 0 8px rgba(30, 136, 255, 0.6));
}
.company-title {
  font-size: 2.4em; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-light); margin-bottom: 0.1em;
  text-shadow: 0 2px 12px var(--main-blue), 0 2px 0 var(--neon-green);
}
.subtitle {
  font-size: 0.7em; color: var(--neon-green); font-weight: 400;
  margin-bottom: 0; letter-spacing: 0.08em; text-shadow: 0 0 10px #000;
}
/*--- Main content sections (under hero) ---*/
main {
  position: relative;
  z-index: 2;
  padding-top: 2.5vw;
}

.section-block {
  position: relative;
  z-index: 20;
  width: 98vw; max-width: 520px;
  margin: 0 auto 2.5em auto;
  padding: 3em 2vw;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,42,75,0.94) 80%, rgba(19,42,75,0.99) 100%);
  box-shadow: 0 2px 38px 0 var(--main-blue);
}
.section-block h2 {
  color: var(--neon-green);
  font-weight: 700; letter-spacing: 0.06em; margin-top: 0;
}
.section-block p {
  color: var(--text-light);
  font-size: 1.15em; text-align: center; margin-bottom: 0.8em;
}
.contact-btn {
  display: inline-block; margin-top: 1.5em; padding: 0.9em 2.2em;
  font-weight: 700; color: var(--main-blue);
  background: var(--neon-green);
  border-radius: 30px; text-decoration: none; letter-spacing: 0.03em;
  box-shadow: 0 0 12px var(--neon-green);
  transition: background 0.22s, color 0.22s;
}
.contact-btn:hover {
  background: var(--main-blue); color: var(--neon-green);
  box-shadow: 0 0 26px var(--neon-green);
}
footer {
  text-align: center; color: var(--neon-green);
  font-size: 0.97em; margin: 3em 0 1em 0; z-index: 50; position: relative;
  opacity: 0.7; letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .company-title { font-size: 2em; }
  .logo-img { width: 88px; }
  .section-block { padding: 1.5em 1vw; }
  .hero-card { padding: 1.6em 0.7em 1.2em 0.7em;}
}
@media (max-width: 500px) {
  .company-title { font-size: 1.1em; }
  .logo-img { width: 56px; }
  .section-block { padding: 1em 0.5vw;}
  .hero-card { padding: 1em 0.1em 0.8em 0.1em;}
}