@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --background: 210 20% 98%;
  --foreground: 215 25% 15%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 15%;
  --primary: 215 80% 22%;
  --primary-foreground: 0 0% 100%;
  --secondary: 175 65% 40%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 20% 95%;
  --muted-foreground: 215 15% 50%;
  --accent: 175 65% 40%;
  --accent-foreground: 0 0% 100%;
  --border: 214 20% 90%;
  --input: 214 20% 90%;
  --ring: 215 80% 22%;
  --radius: 0.75rem;
  --hero-gradient: linear-gradient(135deg, hsl(215 80% 18%) 0%, hsl(215 60% 28%) 50%, hsl(175 50% 30%) 100%);
  --section-gradient: linear-gradient(180deg, hsl(210 20% 98%) 0%, hsl(210 25% 95%) 100%);
  --accent-gradient: linear-gradient(135deg, hsl(175 65% 40%) 0%, hsl(175 55% 50%) 100%);
  --shadow-card: 0 4px 24px -4px hsl(215 80% 22% / 0.08);
  --shadow-card-hover: 0 12px 40px -8px hsl(215 80% 22% / 0.15);
  --shadow-hero: 0 20px 60px -15px hsl(215 80% 22% / 0.3);
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* {
  border-color: hsl(var(--border));
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.section-padding {
  padding: 5rem 1rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding: 7rem 1rem;
  }
}

.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Nav scrolled state (toggled by theme.js) */
nav#veylen-site-nav.veylen-nav-scrolled {
  background-color: hsl(215 80% 22% / 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}