@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap');

:root {
  --font: 'Geist', system-ui, sans-serif;
  --bg: #ffffff;
  --surface: #f4f4f5;
  --border: #e4e4e7;
  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
  --spotlight: rgba(24,24,27,0.055);
  --spotlight-border: rgba(161,161,170,0.55);
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;
    --surface: #18181b;
    --border: #27272a;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #52525b;
    --spotlight: rgba(250,250,250,0.045);
    --spotlight-border: rgba(161,161,170,0.45);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scrollbar-gutter: stable;   
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 16px 80px;
}

.section { margin-bottom: 80px; }

.section-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 20px;
}

/* ── ANIMATIONS ── */
/* ── ANIMATIONS ── */
@keyframes fadeBlurIn {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.fade-up   { animation: fadeBlurIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-up-2 { animation: fadeBlurIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.fade-up-3 { animation: fadeBlurIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.fade-up-4 { animation: fadeBlurIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }