/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --ink:          #0f0f0e;
  --ink2:         #3d3d3a;
  --ink3:         #8a8a85;
  --bg:           #fafaf8;
  --bg2:          #f2f2ee;
  --bg3:          #e4e4de;
  --accent:       #3d4ef5;
  --accent-light: #eceffe;
  --pro:          #7c3aed;
  --pro-light:    #f3effe;
  --radius:       10px;
  --max:          1080px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a    { color: inherit; text-decoration: none; }
img  { max-width: 100%; display: block; }

code {
  font-family: 'DM Mono', monospace;
  font-size: .875em;
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink2);
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.fi  { opacity: 0; animation: fadein .5s ease forwards; }
.fi1 { animation-delay: .08s; }
.fi2 { animation-delay: .18s; }
.fi3 { animation-delay: .28s; }

/* ─── Float animation (browser mock) ────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ─── Scroll hint bounce ─────────────────────────────────────────────────── */
@keyframes scrollbounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ─── Scroll reveal ──────────────────────────────────────────────────────── */
[data-reveal-children] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal-children].in-view > * { opacity: 1; transform: none; }
[data-reveal-children].in-view > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-children].in-view > *:nth-child(2) { transition-delay: .09s; }
[data-reveal-children].in-view > *:nth-child(3) { transition-delay: .18s; }
[data-reveal-children].in-view > *:nth-child(4) { transition-delay: .27s; }
[data-reveal-children].in-view > *:nth-child(5) { transition-delay: .36s; }
[data-reveal-children].in-view > *:nth-child(6) { transition-delay: .45s; }

/* Responsive rules are in responsive.css (loaded last) */