:root {
  --color-navy: #0B132B;
  --color-navy-dark: #070B19;
  --bg-main: #F8FAFC;
  --text-primary: #0F172A;
}

.dark {
  --bg-main: #070B19;
  --text-primary: #F8FAFC;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, .font-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn { animation: fadeIn 0.35s ease-out; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hidden-js { display: none !important; }

#mobile-menu.open { display: block; }

.modal-overlay { display: none; }
.modal-overlay.open {
  display: flex;
}

.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.dark .is-scrolled {
  background: rgba(7, 11, 25, 0.9);
  border-bottom-color: rgba(30, 41, 59, 0.8);
}

.nav-link.active {
  color: #2563eb;
  font-weight: 600;
}

.dark .nav-link.active {
  color: #60a5fa;
}

.nav-link.active .nav-underline {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee, .animate-fadeIn { animation: none; }
}
