/* Premium tech theme */
:root{
  --bg-body: #05070f;
  --bg-surface: rgba(10,14,24,.72);
  --bg-surface-2: rgba(10,14,24,.58);
  --border: rgba(148,163,184,.18);
  --max-w: 1120px;
}

/* Background: futuristic tech (glows + hologrid + subtle prism) */
body{
  background-color: var(--bg-body) !important;
  background-image:
    radial-gradient(1100px circle at 18% -10%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px circle at 84% 6%, rgba(124,58,237,.20), transparent 58%),
    radial-gradient(900px circle at 38% 92%, rgba(16,185,129,.14), transparent 62%),
    conic-gradient(from 210deg at 52% 36%, rgba(34,211,238,.06), rgba(124,58,237,.05), rgba(16,185,129,.04), rgba(34,211,238,.06)),
    url("../img/bg-future-grid.svg") !important;
  background-size: auto, auto, auto, 1200px 1200px, 900px 900px !important;
  background-position: 0 0, 0 0, 0 0, 50% 0%, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-attachment: scroll, scroll, scroll, fixed, fixed !important;
  color: #e5e7eb;
}

/* subtle vignette */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px circle at 50% 12%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(1500px circle at 50% 100%, rgba(0,0,0,.50), rgba(0,0,0,.88));
  mix-blend-mode: normal;
  opacity:.9;
  z-index:0;
}

main, header, footer{ position: relative; z-index: 1; }

/* unify container padding */
.ui-section, .container, main{
  width: 100%;
}

/* keep sections centered */
.ui-section{
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

/* Responsive helpers */
@media (max-width: 900px){
  :root{ --max-w: 980px; }
}

@media (max-width: 640px){
  .ui-section{ padding-left: .95rem; padding-right: .95rem; }
}


/* Extra depth: subtle animated glow + grid (site-wide) */
body:after{
  content:"";
  position: fixed;
  inset: -120px;
  pointer-events: none;
  z-index: 0;
  opacity: .58;
  background:
    radial-gradient(700px circle at 20% 35%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(650px circle at 82% 28%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px circle at 55% 92%, rgba(16,185,129,.08), transparent 60%),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.030) 0px,
      rgba(255,255,255,.030) 1px,
      transparent 1px,
      transparent 7px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(34,211,238,.028) 0px,
      rgba(34,211,238,.028) 1px,
      transparent 1px,
      transparent 210px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,.05) 0px,
      rgba(148,163,184,.05) 1px,
      transparent 1px,
      transparent 140px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(148,163,184,.04) 0px,
      rgba(148,163,184,.04) 1px,
      transparent 1px,
      transparent 140px
    );
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: bgFloat 14s ease-in-out infinite alternate;
}

@keyframes bgFloat{
  0%   { transform: translate3d(-10px,-8px,0) scale(1);   filter: blur(0px); }
  100% { transform: translate3d(10px,10px,0)  scale(1.02); filter: blur(.2px); }
}

@media (prefers-reduced-motion: reduce){
  body:after{ animation: none; }
}

/* Mobile perf: disable fixed attachments + reduce animation */
@media (max-width: 900px){
  body{
    background-attachment: scroll, scroll, scroll, scroll, scroll !important;
  }
  body:after{
    animation: none;
    opacity: .45;
  }
}