/* ───────────────────────────────────────────────
   zookode — light premium design system
   ─────────────────────────────────────────────── */

:root {
  /* Ink scale */
  --ink: #0B0F1F;
  --ink-2: #14182B;
  --ink-3: #1F2438;
  --text: #1A1F35;
  --text-mute: #5A6480;
  --text-light: #8A93AE;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-soft: #F7F9FC;
  --bg-cool: #EEF2F8;
  --bg-frost: #F1F4FA;
  --border: #E5E9F2;
  --border-strong: #D6DCEA;

  /* Brand mint */
  --mint: #00D68F;
  --mint-dark: #00B377;
  --mint-deep: #009063;
  --mint-pale: #E0FBF1;
  --mint-glow: rgba(0,214,143,0.18);

  /* Cool accents */
  --indigo: #5B5BFE;
  --indigo-pale: #EEF0FF;
  --violet: #8B5CF6;
  --cyan: #22D3EE;
  --cyan-pale: #ECFEFF;

  /* Gradients */
  --grad-hero: radial-gradient(1100px 600px at 80% -10%, rgba(0,214,143,0.18), transparent 60%),
               radial-gradient(900px 500px at -10% 30%, rgba(91,91,254,0.13), transparent 65%),
               radial-gradient(700px 400px at 50% 100%, rgba(34,211,238,0.10), transparent 60%),
               linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
  --grad-accent: linear-gradient(135deg, #00D68F 0%, #22D3EE 55%, #5B5BFE 100%);
  --grad-ink: linear-gradient(160deg, #0B0F1F 0%, #1F2438 100%);
  --grad-mint: linear-gradient(135deg, #00D68F 0%, #00B377 100%);

  /* Geometry */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-xs: 0 1px 2px rgba(11,15,31,0.04);
  --shadow-sm: 0 2px 8px rgba(11,15,31,0.05);
  --shadow: 0 8px 28px rgba(11,15,31,0.07);
  --shadow-lg: 0 24px 72px -12px rgba(11,15,31,0.14);
  --shadow-mint: 0 12px 40px -8px rgba(0,179,119,0.35);

  --font-head: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.35s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

::selection { background: var(--mint); color: var(--ink); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

@keyframes fadeUp { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(0,214,143,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(0,214,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,214,143,0); }
}
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes blobMove {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.05); }
  66% { transform: translate(-20px,15px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }