:root { color-scheme: dark; }

html { scroll-behavior: smooth; }

body {
  background-color: #0A0B08;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(149,191,71,0.08), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(124,92,252,0.07), transparent 40%);
}

::selection { background: #95bf47; color: #0a0b08; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

a:focus-visible, button:focus-visible {
  outline: 2px solid #95bf47;
  outline-offset: 3px;
  border-radius: 4px;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* floating background keyframes */
@keyframes floaty {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(4deg); }
}
@keyframes floatySlow {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(18px) translateX(-14px); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; filter: blur(28px); }
  50% { opacity: 0.9; filter: blur(38px); }
}
@keyframes drift {
  0% { transform: translate(0,0); }
  100% { transform: translate(-40px,-30px); }
}
.animate-floaty { animation: floaty 7s ease-in-out infinite; }
.animate-floaty-slow { animation: floatySlow 11s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 4.5s ease-in-out infinite; }
.animate-drift { animation: drift 30s linear infinite alternate; }

/* flip-card mechanics (hover on desktop, .flipped class toggled by JS on tap for touch) */
.flip-card { perspective: 1400px; }
.flip-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-face { backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); }

/* grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* slider dot */
.dot { height: 6px; width: 6px; border-radius: 999px; background: #242813; transition: all .2s; }
.dot.active { width: 24px; background: #95BF47; }