:root {
  --color-ink: #0a0e1a;
  --color-ink-soft: #11192c;
  --color-paper: #faf9f6;
  --color-paper-dim: #f1efe9;
  --color-line: #e7e4dc;
  --color-line-dark: #243049;

  --color-cyan: #18c8e0;
  --color-cyan-soft: #e3fbff;
  --color-amber: #ffb340;
  --color-amber-soft: #fff3df;
  --color-emerald: #1fae6d;
  --color-rose: #ff5c72;
}

* {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: "Inter", sans-serif;
}

.font-display {
  font-family: "Space Grotesk", sans-serif;
}

.text-balance {
  text-wrap: balance;
}

::selection {
  background: var(--color-cyan);
  color: #fff;
}

/* ---------- Scroll reveal (replaces framer-motion whileInView) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero entrance animation (replaces framer-motion animate) ---------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-fade {
  opacity: 0;
  animation: fade-in-up 0.7s ease-out forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-fade-simple {
  opacity: 0;
  animation: fade-in 0.7s ease-out forwards;
}

/* ---------- Floating cards ---------- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* ---------- Animated bar chart (HeroVisual) ---------- */
@keyframes grow-bar {
  from {
    height: 0;
  }
  to {
    height: var(--bar-height);
  }
}

.bar-grow {
  height: 0;
  align-self: flex-end;
  animation: grow-bar 0.8s ease-out forwards;
}

/* ---------- Hero image slider ---------- */
.hero-slider {
  background: var(--color-ink);
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease-in-out, transform 6s ease-out;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Marquee (kept for parity, available if needed) ---------- */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 36s linear infinite;
}