@import url("https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Rubik+Wet+Paint&display=swap");

@font-face {
  font-family: "Rubik Glitch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Using direct Google Fonts URL to fix decode error */
  src: url("https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap");
}


:root {
  --accent-green: #39ff8a;
  --dark-bg: #050505;
  --soft-white: #f5f5f5;
  --soft-gray: #cccccc;
  --border-soft: rgba(255, 255, 255, 0.08);
}

body {
  font-family: "Rubik Wet Paint", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--dark-bg);
  color: var(--soft-white);
  line-height: 1.7;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Rubik Glitch", cursive;
  letter-spacing: 2px;
  font-weight: 400;
  color: var(--soft-white);
  text-transform: uppercase;
}

button,
.cta,
strong,
.button-text,
p,
span,
a,
li {
  font-family: "Rubik Wet Paint", sans-serif;
  letter-spacing: 0.5px;
}

@keyframes pageEntry {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroGlow {
  0%,
  100% {
    text-shadow: 0 0 40px rgba(57, 255, 138, 0.4), 0 0 80px rgba(57, 255, 138, 0.2), 0 0 120px rgba(57, 255, 138, 0.1);
  }
  50% {
    text-shadow: 0 0 60px rgba(57, 255, 138, 0.6), 0 0 120px rgba(57, 255, 138, 0.3), 0 0 180px rgba(57, 255, 138, 0.15);
  }
}

@keyframes glitchEntry {
  0% {
    opacity: 0;
    transform: translateX(-100px) skewX(-10deg);
    filter: blur(10px);
  }
  20% {
    transform: translateX(20px) skewX(5deg);
  }
  40% {
    transform: translateX(-10px) skewX(-3deg);
  }
  60% {
    transform: translateX(5px) skewX(2deg);
  }
  80% {
    transform: translateX(-2px) skewX(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
    filter: blur(0);
  }
}

@keyframes glitchFade {
  0% {
    opacity: 0;
    transform: scale(0.9) rotateX(20deg);
    filter: blur(15px) brightness(0.5);
  }
  50% {
    filter: blur(8px) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0);
    filter: blur(0) brightness(1);
  }
}

@keyframes glitchSlide {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.95);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.intro-animate {
  animation: pageEntry 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.intro-fade {
  animation: pageEntry 1.5s ease-out forwards;
  animation-delay: 0.3s;
  /* Removed opacity: 0 to ensure hero title is immediately visible */
}

.glitch-entry {
  animation: glitchEntry 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.glitch-fade {
  animation: glitchFade 1.5s ease-out forwards;
  opacity: 0;
}

.glitch-slide {
  animation: glitchSlide 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.pattern-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridDrift 80s linear infinite;
}

.pattern-dots {
  background-image: radial-gradient(circle at 25% 25%, rgba(57, 255, 138, 0.03) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: dotsShift 70s ease-in-out infinite;
}

.pattern-diagonal {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(57, 255, 138, 0.012) 40px,
    rgba(57, 255, 138, 0.012) 80px
  );
  animation: diagonalFlow 90s linear infinite;
}

.pattern-radial {
  background: radial-gradient(ellipse at 20% 30%, rgba(57, 255, 138, 0.02) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.015) 0%, transparent 50%);
  animation: radialShift 60s ease-in-out infinite;
}

.pattern-hexagon {
  background-image: linear-gradient(
      30deg,
      rgba(255, 255, 255, 0.01) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.01) 87.5%,
      rgba(255, 255, 255, 0.01)
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.01) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.01) 87.5%,
      rgba(255, 255, 255, 0.01)
    ),
    linear-gradient(
      30deg,
      rgba(255, 255, 255, 0.01) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.01) 87.5%,
      rgba(255, 255, 255, 0.01)
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.01) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.01) 87.5%,
      rgba(255, 255, 255, 0.01)
    );
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
}

.pattern-waves {
  background-image: radial-gradient(ellipse at center top, transparent 60%, rgba(57, 255, 138, 0.015) 60%),
    radial-gradient(ellipse at center bottom, transparent 60%, rgba(255, 255, 255, 0.01) 60%);
  background-size: 100% 40px;
  animation: wavesFloat 50s ease-in-out infinite;
}

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

@keyframes dotsShift {
  0%,
  100% {
    background-position: 0 0;
  }
  50% {
    background-position: 20px 20px;
  }
}

@keyframes diagonalFlow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 80px 80px;
  }
}

@keyframes radialShift {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes wavesFloat {
  0%,
  100% {
    background-position: 0 0, 0 20px;
  }
  50% {
    background-position: 0 10px, 0 30px;
  }
}

.section-separator {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(57, 255, 138, 0.15) 25%,
    rgba(57, 255, 138, 0.35) 50%,
    rgba(57, 255, 138, 0.15) 75%,
    transparent 100%
  );
  margin: 3rem 0;
  position: relative;
  overflow: hidden;
}

.section-separator::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  animation: shimmerFlow 4s ease-in-out infinite;
}

@keyframes shimmerFlow {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 15% 20%, rgba(57, 255, 138, 0.018) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(57, 255, 138, 0.012) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.008) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  animation: ambientShift 40s ease-in-out infinite;
}

@keyframes ambientShift {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08) rotate(1deg);
  }
}

  .section-separator {
    margin: 2rem 0;
  }