:root{
  --bg:#0b0f17;
  --fg:#e6f1ff;
  --muted:#9bb3c7;
  --accent:#7cc0ff;
  --accent2:#b6a8ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background: radial-gradient(1200px 800px at 70% -20%, #153055 0%, transparent 60%) , var(--bg);
  overflow:hidden;
}

/* Stage layers */
.stage{
  position:fixed;
  inset:0;
  z-index:0;
}

#bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Subtle tech grid overlay */
.grid-overlay{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(120,160,200,.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(120,160,200,.06) 0 1px, transparent 1px 48px);
  mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
  pointer-events:none;
  animation: gridFade 10s ease-in-out infinite alternate;
}
@keyframes gridFade{
  from{ opacity:.35 }
  to{ opacity:.15 }
}

/* Moving glow overlay */
.glow-overlay{
  position:absolute;
  inset:-20% -10%;
  background:
    radial-gradient(600px 400px at 20% 80%, rgba(124,192,255,.15), transparent 60%),
    radial-gradient(500px 350px at 80% 20%, rgba(182,168,255,.12), transparent 60%);
  filter: blur(10px) saturate(120%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  0%{ transform: translate3d(-2%,1%,0) }
  100%{ transform: translate3d(2%,-1%,0) }
}

/* Floating SVG “images” */
.svg-icon{
  position:absolute;
  width:min(18vmin,140px);
  height:auto;
  opacity:.75;
  filter: drop-shadow(0 0 8px rgba(120,200,255,.25));
  will-change: transform;
}
.drone{
  top:12%;
  left:12%;
  animation: float1 9s ease-in-out infinite;
}
.robot{
  right:10%;
  bottom:12%;
  animation: float2 11s ease-in-out infinite;
}
@keyframes float1{
  0%{ transform: translate3d(0,0,0) rotate(-3deg) }
  50%{ transform: translate3d(6px,-8px,0) rotate(2deg) }
  100%{ transform: translate3d(0,0,0) rotate(-3deg) }
}
@keyframes float2{
  0%{ transform: translate3d(0,0,0) rotate(2deg) }
  50%{ transform: translate3d(-6px,6px,0) rotate(-2deg) }
  100%{ transform: translate3d(0,0,0) rotate(2deg) }
}

/* Hero content */
.hero{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  place-content:center;
  text-align:center;
  padding:6rem 1.25rem 4rem;
}
h1{
  margin:0 0 .5rem;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#eaf4ff;
  text-shadow: 0 0 20px rgba(124,192,255,.25);
}
.tagline{
  margin:.25rem 0 0;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  color:var(--muted);
}
.sub{
  margin:.75rem 0 0;
  color:#cfdceb;
  opacity:.9;
}

/* Footer */
.site-footer{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:.75rem 1rem;
  text-align:center;
  background: linear-gradient(to top, rgba(11,15,23,.75), rgba(11,15,23,0));
  font-size:.95rem;
}
.site-footer a{ color:var(--accent); text-underline-offset: 3px; }

/* Accessibility contrast for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .glow-overlay, .grid-overlay, .svg-icon { animation: none !important }
}