/* ═══════════════════════════════════════
   BASE — Reset, CSS Variables, Body
═══════════════════════════════════════ */

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

:root {
  --teal:   #00d4e0;
  --black:  #0a0a0a;
  --black2: #111111;
  --white:  #ffffff;
  --grey:   #888888;
  --light:  #cccccc;
}

html, body {
  font-family: 'Inter', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */

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

/* ═══════════════════════════════════════
   RESPONSIVE UTILITIES
═══════════════════════════════════════ */

@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; }
}