:root {
  --color-primary:       #04d9ff;
  --color-primary-90:    #1cdeff;
  --color-primary-80:    #36e3ff;
  --color-neutral:       #09090B;
  --color-surface:       #111114;
  --color-surface-2:     #1A1A1F;
  --color-on-surface:    #F5F5F5;
  --color-border:        #27272A;
  --color-border-strong: #374151;
  --color-secondary:     #A1A1AA;
  --color-muted:         #808088;
  --color-error:         #EF4444;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', 'JetBrains Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-neutral);
  color: var(--color-on-surface);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-primary);
  color: var(--color-neutral);
}

a { color: inherit; text-decoration: none; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cursor::after {
  content: '_';
  color: var(--color-primary);
  animation: blink 1s step-end infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
}
.fade-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.fade-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.fade-up-delay-3 { animation-delay: 0.3s; opacity: 0; }

/* Responsive grid utilities */
.rg-1-md-2 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) { .rg-1-md-2 { grid-template-columns: repeat(2, 1fr); } }

.rg-1-sm-2 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .rg-1-sm-2 { grid-template-columns: repeat(2, 1fr); } }

.rg-1-md-3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) { .rg-1-md-3 { grid-template-columns: repeat(3, 1fr); } }

.rg-1-sm-2-lg-3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .rg-1-sm-2-lg-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rg-1-sm-2-lg-3 { grid-template-columns: repeat(3, 1fr); } }

/* Nav links — hidden mobile, flex desktop */
.nav-links { display: none; }
@media (min-width: 768px) { .nav-links { display: flex; } }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-neutral); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }