@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --ai-primary: #6c63ff;
  --ai-secondary: #4facfe;
  --ai-accent: #a78bfa;
  --ai-glow: #818cf8;
  --ai-dark: #0a0a1a;
  --ai-surface: rgba(99, 102, 241, 0.08);
}

body {
  background: linear-gradient(135deg, #0a0a1a 0%, #0d0d2b 25%, #0a1628 50%, #0d0a2e 75%, #0a0a1a 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  color: #e2e8f0;
  margin: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  animation: bgPulse 8s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% { background: linear-gradient(135deg, #0a0a1a 0%, #0d0d2b 25%, #0a1628 50%, #0d0a2e 75%, #0a0a1a 100%); }
  50% { background: linear-gradient(135deg, #0a0a2e 0%, #0d1540 25%, #0a1a3a 50%, #130a3a 75%, #0a0a2e 100%); }
  100% { background: linear-gradient(135deg, #0a0a1a 0%, #0d0d2b 25%, #0a1628 50%, #0d0a2e 75%, #0a0a1a 100%); }
}

/* AI Neural Network Particle Canvas */
#ai-particles-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

a,
a:active {
  color: var(--ai-secondary);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
  color: var(--ai-accent);
  text-shadow: 0 0 12px var(--ai-glow);
  text-decoration: none;
}

.topbanner {
  z-index: 67;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 2rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(99,102,241,0.12) 0%, transparent 100%);
  background-size: cover;
  background-position: center center;
  position: relative;
}

.topbanner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.topbanner-logo {
  width: 100%;
  filter: drop-shadow(0 0 24px rgba(139,92,246,0.5)) drop-shadow(0 0 48px rgba(79,172,254,0.3));
  animation: logoPulse 3s ease-in-out infinite alternate;
}

@keyframes logoPulse {
  0% { filter: drop-shadow(0 0 24px rgba(139,92,246,0.5)) drop-shadow(0 0 48px rgba(79,172,254,0.3)); }
  100% { filter: drop-shadow(0 0 40px rgba(139,92,246,0.8)) drop-shadow(0 0 80px rgba(79,172,254,0.5)); }
}

.topbanner-logo-a {
  width: 40%;
  margin-top: 3rem;
}

.topbanner-text {
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  text-shadow: 0px 0px 50px rgba(129,140,248,0.8);
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.topbanner-text_highlight {
  background: linear-gradient(90deg, #4facfe 0%, #a78bfa 50%, #6c63ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes topbanner-blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.topbanner-text_cursor {
  animation: topbanner-blink .5s infinite;
  color: var(--ai-accent);
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url(static/fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf);
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url(static/fonts/Karla/Karla-VariableFont_wght.ttf);
}

h1, h2, h3, h4, h5 {
  color: var(--ai-accent);
  background: linear-gradient(90deg, #818cf8, #a78bfa, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: headingShimmer 4s ease infinite;
  background-size: 200% 100%;
}

@keyframes headingShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.topbanner {
  z-index: 67;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 2rem;
  box-sizing: border-box;
  background-size: cover;
  background-position: center center;
}

.topbanner-logo {
  width: 100%;
}

.topbanner-logo-a {
  width: 40%;
  margin-top: 3rem;
}

.topbanner-text {
  color: white;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  font-size: 2rem;
  font-weight: 200;
  text-shadow: 0px 0px 50px #be89ff;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.topbanner-text_highlight {
  background: linear-gradient(to right, rgb(145, 202, 255), rgb(232, 114, 255));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

@keyframes topbanner-blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

.topbanner-text_cursor {
  animation: topbanner-blink .5s infinite;
}


@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url(static/fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf);
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url(static/fonts/Karla/Karla-VariableFont_wght.ttf);
}

h1, h2, h3, h4, h5 {
  color: #e87524;
}