:root {
  --bg-base: #07131f;
  --bg-surface: #0f2236;
  --bg-surface-2: #132b42;
  --bg-surface-3: #183552;
  --bg-soft: rgba(19, 43, 66, 0.55);
  --border: rgba(111, 191, 255, 0.2);
  --border-strong: rgba(111, 191, 255, 0.4);
  --text-main: #e8f4ff;
  --text-muted: #9ab8d2;
  --text-soft: #77a0c2;
  --accent: #2bb6ff;
  --accent-2: #19dd9c;
  --accent-warm: #ff8e53;
  --danger: #ff6f6f;
  --shadow: 0 14px 38px rgba(1, 9, 18, 0.42);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --font-ui: "Space Grotesk", sans-serif;
  --font-code: "IBM Plex Mono", monospace;
}

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

html,
body {
  height: 100%;
}

body {
  background:
    radial-gradient(circle at 10% 10%, rgba(43, 182, 255, 0.18), transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(25, 221, 156, 0.1), transparent 36%),
    var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-ui);
  overflow: hidden;
}

textarea,
input,
select,
button {
  font-family: inherit;
}

button,
input,
textarea,
select {
  color: inherit;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.noise-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
}

.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(76px);
  opacity: 0.2;
  pointer-events: none;
}

.blob-a {
  width: 320px;
  height: 320px;
  background: rgba(43, 182, 255, 0.45);
  top: -80px;
  left: -80px;
  animation: drift-a 14s ease-in-out infinite;
}

.blob-b {
  width: 280px;
  height: 280px;
  background: rgba(25, 221, 156, 0.26);
  right: -90px;
  top: 120px;
  animation: drift-b 16s ease-in-out infinite;
}

.blob-c {
  width: 260px;
  height: 260px;
  background: rgba(255, 142, 83, 0.2);
  right: 20%;
  bottom: -100px;
  animation: drift-c 18s ease-in-out infinite;
}

@keyframes drift-a {
  0%,
  100% { transform: translate(0, 0); }
  50% { transform: translate(50px, 30px); }
}

@keyframes drift-b {
  0%,
  100% { transform: translate(0, 0); }
  50% { transform: translate(-60px, 25px); }
}

@keyframes drift-c {
  0%,
  100% { transform: translate(0, 0); }
  50% { transform: translate(25px, -40px); }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(121, 176, 221, 0.34);
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* === Entrance Animations === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInBottom {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 182, 255, 0); }
  50% { box-shadow: 0 0 20px 4px rgba(43, 182, 255, 0.15); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes borderGlow {
  0%, 100% { border-color: rgba(43, 182, 255, 0.2); }
  50% { border-color: rgba(43, 182, 255, 0.5); }
}

/* Stagger delays for children */
.stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.stagger-in > *:nth-child(2) { animation-delay: 80ms; }
.stagger-in > *:nth-child(3) { animation-delay: 160ms; }
.stagger-in > *:nth-child(4) { animation-delay: 240ms; }
.stagger-in > *:nth-child(5) { animation-delay: 320ms; }
.stagger-in > *:nth-child(6) { animation-delay: 400ms; }
.stagger-in > *:nth-child(7) { animation-delay: 480ms; }
.stagger-in > *:nth-child(8) { animation-delay: 560ms; }
.stagger-in > *:nth-child(9) { animation-delay: 640ms; }
.stagger-in > *:nth-child(10) { animation-delay: 720ms; }

.animate-in {
  animation: fadeInUp 420ms ease-out both;
}

.animate-in-left {
  animation: fadeInLeft 420ms ease-out both;
}

.animate-in-scale {
  animation: fadeInScale 380ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .stagger-in > *,
  .animate-in,
  .animate-in-left,
  .animate-in-scale {
    animation: none !important;
  }
}