html { scroll-behavior: smooth; }
body { font-family: 'Source Sans 3', sans-serif; }
h1, h2, h3, h4, h5 { font-family: 'Lexend', sans-serif; }

.lang-btn.active {
  background-color: #CC0000;
  color: #fff;
}

/* Animate on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-counter {
  transition: all 0.3s ease;
}

/* Underline accent */
.accent-underline {
  position: relative;
  display: inline-block;
}
.accent-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background-color: #CC0000;
  border-radius: 2px;
}

/* ─── Typewriter cursor ──────────────────────────────────────────────────── */
.tw-cursor {
  color: #CC0000;
  font-weight: 700;
  animation: tw-blink 0.75s step-end infinite;
  margin-left: 1px;
}

@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Magnetic button ────────────────────────────────────────────────────── */
.btn-magnetic {
  transition: transform 0.6s cubic-bezier(0.1, 0.56, 0.24, 0.5);
}

/* ─── Navbar scroll effect ───────────────────────────────────────────────── */
#navbar {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
#navbar.scrolled {
  box-shadow: 0 2px 20px rgba(15, 23, 42, 0.08);
  background-color: rgba(248, 250, 252, 0.97);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}