@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Space+Grotesk:wght@400;600;700;800&display=swap");

:root {
  --bg: #0b1c25;
  --bg2: #02392d;
  --surface: #1019a25e;
  --card: #8d0a0a;
  --border: rgba(230, 230, 239, 0.12);
  --accent: #6366f1;
  --accent2: #818cf8;
  --cyan: #06b6d4;
  --green: #10b981;
  --pink: #ec4899;
  --orange: #f97316;
  --text: #d6dae2;
  --muted: #f1f1f5;
  --grad: linear-gradient(135deg, #6366f1, #06b6d4);
  --grad2: linear-gradient(135deg, #ec4899, #f97316);
  --grad3: linear-gradient(135deg, #6366f1, #ec4899);
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
a {
  text-decoration-line: none;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}
@keyframes gradShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes scrollDot {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@keyframes floatShape {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}
@keyframes wordCycle {
  0%,
  28% {
    transform: translateY(0);
  }
  33%,
  61% {
    transform: translateY(-100%);
  }
  66%,
  94% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-200%);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes tilt {
  0%,
  100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}
@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(-5deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}