/*
Theme Name: BlueBaboons Theme
Theme URI: https://bluebaboons.nl
Author: BlueBaboons
Author URI: https://bluebaboons.nl
Description: WordPress theme for BlueBaboons.nl - Google Ads, Meta Ads & Websites
Version: 5.0.0
License: GPL v2 or later
Text Domain: bluebaboons
*/

:root {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 18px);
  --radius: 0.875rem;
  --background: #f8fbfe;
  --foreground: #1a2b3d;
  --card: #ffffff;
  --card-foreground: #1e2f42;
  --popover: #ffffff;
  --popover-foreground: #1e2f42;
  --primary: #2b9bf5;
  --primary-foreground: #ffffff;
  --secondary: #eef5fc;
  --secondary-foreground: #3b4f66;
  --muted: #f2f7fb;
  --muted-foreground: #5f6f85;
  --accent: #e6f2fc;
  --accent-foreground: #1a2b3d;
  --destructive: #d94e4e;
  --destructive-foreground: #ffffff;
  --border: #dde7f2;
  --input: #e3ecf5;
  --ring: #2b9bf5;
  --sky-soft: #e8f4fe;
  --sky-deep: #0b3a60;
  --banana: #f7d56a;
  --navy: #0f2440;
  --navy-foreground: #f6faff;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-brand: "Baloo 2", "Plus Jakarta Sans", sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --shadow-soft: 0 1px 2px rgba(15, 36, 64, 0.05), 0 10px 24px -16px rgba(15, 36, 64, 0.22);
  --shadow-lift: 0 1px 3px rgba(15, 36, 64, 0.06), 0 20px 44px -26px rgba(15, 36, 64, 0.3);
  --gradient-sky: linear-gradient(165deg, #f3f9ff, #e1effd);
  --gradient-primary: linear-gradient(135deg, #3aa8ff, #1a7fd9);
  --gradient-navy: linear-gradient(150deg, #16345a, #0a1d33);
  --gradient-glow: radial-gradient(closest-side, rgba(59, 168, 255, 0.55), transparent 72%);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  font-weight: 700;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; padding: 1rem 1rem 0; }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,0.5);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  transition: all 0.5s ease-out;
}
.site-header.scrolled .site-nav { background: rgba(255,255,255,0.88); box-shadow: var(--shadow-lift); backdrop-filter: blur(24px); }
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand img { height: 2.25rem; width: 2.25rem; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand-name { font-family: var(--font-brand); font-size: 1.25rem; font-weight: 800; color: var(--sky-deep); }
.brand-name span { color: var(--primary); }
.brand-tagline { margin-top: 0.25rem; width: 100%; padding-left: 0.18em; text-align: center; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }

.nav-links { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: 0.2s;
}
.nav-links a:hover, .nav-links a.current { background: var(--secondary); color: var(--sky-deep); }
.nav-cta {
  margin-left: 0.5rem;
  border-radius: 9999px;
  background: var(--gradient-primary);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-foreground);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s;
}
.nav-cta:hover { transform: translateY(-2px); }

.menu-toggle {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.mobile-menu {
  display: none;
  max-width: 72rem;
  margin: 0.5rem auto 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  border-radius: var(--radius-2xl);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.mobile-menu a:hover { background: var(--secondary); }
.mobile-menu .mobile-cta {
  margin-top: 0.25rem;
  text-align: center;
  border-radius: var(--radius-2xl);
  background: var(--gradient-primary);
  color: var(--primary-foreground);
}

/* Footer */
.site-footer { padding: 0 1rem 2rem; }
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-4xl);
  background: var(--card);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 640px) { .footer-inner { padding: 2.5rem 2.5rem; } }
.footer-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand img { height: 3rem; width: 3rem; object-fit: contain; }
.footer-brand span { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: var(--sky-deep); }
.footer-brand span span { color: var(--primary); }
.footer-col-title { font-weight: 700; color: var(--sky-deep); }
.footer-links { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.footer-links li + li { margin-top: 0.5rem; }
.footer-links a, .footer-links li { font-size: 0.875rem; color: var(--muted-foreground); }
.footer-links a:hover { color: var(--primary); }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-legal { display: flex; gap: 1rem; }
.footer-legal a:hover { color: var(--primary); }

/* Utilities */
.surface-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-soft);
}
.bg-gradient-sky { background-image: var(--gradient-sky); }
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-navy { background: var(--gradient-navy); }
.bg-gradient-glow {
  position: absolute;
  top: 50%; left: 50%;
  height: 18rem; width: 18rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: var(--gradient-glow);
  pointer-events: none;
}
@media (min-width: 640px) { .bg-gradient-glow { height: 20rem; width: 20rem; } }
.shadow-lift { box-shadow: var(--shadow-lift); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gradient-primary); color: var(--primary-foreground); box-shadow: var(--shadow-soft); }
.btn-ghost { border: 1px solid var(--border); background: var(--card); color: var(--sky-deep); }

.section { padding: 5rem 1rem; }
@media (min-width: 640px) { .section { padding: 6rem 1rem; } }
.section-title { text-align: center; }
.section-title .eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); }
.section-title h2 { margin-top: 0.5rem; font-size: 1.5rem; color: var(--sky-deep); }
@media (min-width: 640px) { .section-title h2 { font-size: 1.875rem; } }
.section-title p { margin-top: 0.75rem; color: var(--muted-foreground); max-width: 36rem; margin-left: auto; margin-right: auto; }

/* Hero */
.hero-wrap { padding: 2.5rem 1rem 4rem; }
@media (min-width: 640px) { .hero-wrap { padding: 4rem 1rem; } }
.hero-card {
  max-width: 72rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-4xl);
  background: var(--gradient-sky);
  padding: 3rem 1.5rem;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 640px) { .hero-card { padding: 4rem 3rem; } }
.hero-grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-eyebrow {
  display: inline-block;
  border-radius: 9999px;
  background: rgba(255,255,255,0.8);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sky-deep);
}
.hero-title { margin-top: 1.25rem; font-size: 2.25rem; line-height: 1.05; font-weight: 800; color: var(--sky-deep); }
@media (min-width: 640px) { .hero-title { font-size: 3.4rem; } }
.hero-text { margin-top: 1.25rem; max-width: 36rem; font-size: 1rem; color: var(--secondary-foreground); }
@media (min-width: 640px) { .hero-text { font-size: 1.125rem; } }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-image { position: relative; display: flex; justify-content: center; }
.hero-image img { position: relative; width: 100%; max-width: 18rem; object-fit: contain; animation: float 6s ease-in-out infinite; }
@media (min-width: 640px) { .hero-image img { max-width: 24rem; } }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

.hero-stats {
  position: relative;
  margin-top: 5rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .hero-stats { margin-top: 6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero-stat {
  position: relative;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.hero-stat.rating { margin-top: 1.5rem; padding-top: 3.5rem; }
@media (min-width: 640px) { .hero-stat.rating { margin-top: 0; padding-top: 1.25rem; } }
.hero-stat img.rating-baboon {
  position: absolute;
  top: -0.75rem;
  right: 0.5rem;
  width: 4rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transform: rotate(-2deg);
  animation: float 6s ease-in-out infinite;
}
@media (min-width: 640px) {
  .hero-stat img.rating-baboon {
    top: auto; bottom: 100%; left: 50%; right: auto;
    width: 6rem;
    transform: translate(-50%, 45%);
  }
}
.hero-stat-value { font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; color: var(--sky-deep); }
.hero-stat-label { margin-top: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); }

/* Clients */
.clients-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--card); padding: 4rem 0; }
.clients-header { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; padding: 0 1rem; }
.clients-header img { width: 4rem; object-fit: contain; }
.clients-header h2 { font-size: 1.5rem; color: var(--sky-deep); }
@media (min-width: 640px) { .clients-header h2 { font-size: 1.875rem; } }
.clients-header p { max-width: 36rem; font-size: 0.875rem; color: var(--muted-foreground); }

.marquee-viewport { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 45s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.logo-card { margin: 0 1.25rem; flex-shrink: 0; width: 10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
@media (min-width: 640px) { .logo-card { margin: 0 1.75rem; width: 14rem; } }
.logo-card .logo-wrap { display: flex; align-items: center; justify-content: center; height: 6rem; width: 100%; }
.logo-card img { width: auto; max-width: 100%; object-fit: contain; opacity: 0.9; transition: opacity 0.3s; }
.logo-card img:hover { opacity: 1; }
.logo-card img.huge { max-height: 6rem; transform: scale(1.25); }
.logo-card img.big { max-height: 5rem; }
.logo-card img.normal { max-height: 3.5rem; }
.logo-card span { width: 100%; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Steps */
.steps-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem; transition: transform 0.3s, box-shadow 0.3s; }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.step-card img { height: 5rem; width: 5rem; object-fit: contain; }
.step-number { margin-top: 1rem; border-radius: 9999px; background: var(--secondary); padding: 0.25rem 0.75rem; font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; color: var(--primary); }
.step-card h3 { margin-top: 0.75rem; font-size: 1.25rem; color: var(--sky-deep); }
.step-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

/* Services */
.services-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-card { display: flex; flex-direction: column; padding: 1.75rem; transition: transform 0.3s, box-shadow 0.3s; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.service-icon { display: flex; align-items: center; justify-content: center; height: 4rem; width: 4rem; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--sky-soft); }
.service-icon img { height: 3rem; width: 3rem; object-fit: contain; }
.service-card h3 { margin-top: 1.25rem; font-size: 1.25rem; color: var(--sky-deep); }
.service-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.service-card ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.service-card li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--secondary-foreground); }
.service-card li + li { margin-top: 0.5rem; }
.service-card li::before { content: ""; margin-top: 0.4rem; height: 0.5rem; width: 0.5rem; flex-shrink: 0; border-radius: 9999px; background: var(--primary); }
.service-card .more { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 700; color: var(--primary); }
.service-card .more:hover { text-decoration: underline; }

/* About */
.about-section { background: var(--gradient-navy); color: var(--navy-foreground); padding: 5rem 1rem; }
@media (min-width: 640px) { .about-section { padding: 6rem 1rem; } }
.about-grid { display: grid; align-items: center; gap: 2.5rem; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-image { position: relative; display: flex; justify-content: center; }
.about-image img { position: relative; width: 100%; max-width: 18rem; object-fit: contain; animation: float 6s ease-in-out infinite; }
.about-content .eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sky-soft); }
.about-content h2 { margin-top: 0.5rem; font-size: 1.5rem; color: var(--navy-foreground); }
@media (min-width: 640px) { .about-content h2 { font-size: 1.875rem; } }
.about-content p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.625; color: rgba(246,250,255,0.8); }
@media (min-width: 640px) { .about-content p { font-size: 1rem; } }
.about-facts { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .about-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.about-fact { border-radius: var(--radius-3xl); border: 1px solid rgba(246,250,255,0.15); background: rgba(246,250,255,0.05); padding: 1.25rem 1.5rem; backdrop-filter: blur(4px); }
.about-fact-value { font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; color: var(--sky-soft); }
.about-fact-title { margin-top: 0.25rem; font-weight: 700; color: var(--navy-foreground); }
.about-fact-sub { font-size: 0.875rem; color: rgba(246,250,255,0.6); }

/* Reviews */
.reviews-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; }
.review-card blockquote { font-size: 0.875rem; line-height: 1.625; color: var(--secondary-foreground); margin: 0; }
.review-card figcaption { margin-top: 1.5rem; border-radius: var(--radius-2xl); background: var(--secondary); padding: 0.75rem 1rem; }
.review-card .name { font-weight: 700; color: var(--sky-deep); }
.review-card .company { font-size: 0.875rem; color: var(--muted-foreground); }

/* Contact */
.contact-card {
  max-width: 72rem;
  margin: 0 auto;
  border-radius: var(--radius-4xl);
  background: var(--gradient-sky);
  padding: 1.5rem;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 640px) { .contact-card { padding: 3rem; } }
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-form { border-radius: var(--radius-3xl); border: 1px solid var(--border); background: var(--card); padding: 1.5rem; box-shadow: var(--shadow-soft); }
@media (min-width: 640px) { .contact-form { padding: 2rem; } }
.contact-form h3 { font-size: 1.25rem; color: var(--sky-deep); }
.form-group { margin-top: 1.25rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--secondary-foreground); }
.form-group input, .form-group textarea {
  margin-top: 0.375rem;
  width: 100%;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--input);
  background: var(--background);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { resize: vertical; }
.form-submit { margin-top: 1.25rem; width: 100%; }
.form-note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.contact-baboon { margin-top: 2rem; width: 11rem; object-fit: contain; animation: float 6s ease-in-out infinite; }

/* Page Hero */
.page-hero { padding: 2.5rem 1rem 2rem; }
.page-hero-card {
  max-width: 72rem;
  margin: 0 auto;
  border-radius: var(--radius-4xl);
  background: var(--gradient-sky);
  padding: 3rem 1.5rem;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 640px) { .page-hero-card { padding: 4rem 3rem; } }
.page-hero-grid { display: grid; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .page-hero-grid { grid-template-columns: 1.2fr 0.8fr; } }
.page-hero-title { margin-top: 1.25rem; font-size: 2.25rem; line-height: 1.08; font-weight: 800; color: var(--sky-deep); }
@media (min-width: 640px) { .page-hero-title { font-size: 3rem; } }
.page-hero-text { margin-top: 1rem; max-width: 36rem; font-size: 1rem; color: var(--secondary-foreground); }
@media (min-width: 640px) { .page-hero-text { font-size: 1.125rem; } }
.page-hero-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.page-hero-image { display: flex; justify-content: center; }
.page-hero-image img { width: 100%; max-width: 20rem; object-fit: contain; animation: float 6s ease-in-out infinite; }

/* Feature grid */
.feature-grid { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-card { padding: 1.75rem; transition: transform 0.3s, box-shadow 0.3s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature-card h3 { font-size: 1.25rem; color: var(--sky-deep); }
.feature-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

/* CTA Block */
.cta-block { padding: 3.5rem 1rem; }
.cta-card {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  border-radius: var(--radius-4xl);
  background: var(--gradient-sky);
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 640px) { .cta-card { padding: 3rem 3rem; } }
.cta-card img { width: 8rem; object-fit: contain; animation: float 6s ease-in-out infinite; }
.cta-card h2 { font-size: 1.875rem; font-weight: 800; color: var(--sky-deep); }
@media (min-width: 640px) { .cta-card h2 { font-size: 2.25rem; } }
.cta-card p { max-width: 36rem; color: var(--secondary-foreground); }

/* Service detail page */
.service-detail-grid { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .service-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service-detail-card { display: flex; flex-direction: column; padding: 1.75rem; transition: transform 0.3s; }
.service-detail-card:hover { transform: translateY(-4px); }
.service-detail-card img { height: 7rem; width: 7rem; object-fit: contain; }
.service-detail-card h2 { margin-top: 1rem; font-size: 1.25rem; color: var(--sky-deep); }
.service-detail-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--secondary-foreground); }
.service-detail-card ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.service-detail-card li { display: flex; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.service-detail-card li + li { margin-top: 0.375rem; }
.service-detail-card li::before { content: "✓"; color: var(--primary); font-weight: 700; }
.service-detail-card .detail { margin-top: 1rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.service-detail-card .more { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 700; color: var(--primary); }

/* FAQ */
.faq-section { padding: 2.5rem 1rem; }
.faq-wrap { max-width: 48rem; margin: 0 auto; }
.faq-list { margin-top: 2rem; border-radius: var(--radius-3xl); border: 1px solid var(--border); background: var(--card); padding: 0.5rem; box-shadow: var(--shadow-soft); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--sky-deep);
  cursor: pointer;
}
.faq-question::after { content: "+"; font-size: 1.25rem; color: var(--primary); }
.faq-item.open .faq-question::after { content: "−"; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer-inner { padding: 0 1rem 1rem; font-size: 1rem; line-height: 1.625; color: var(--muted-foreground); }

/* Cases */
.cases-grid { margin-top: 1.75rem; display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-card { display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s; }
.case-card:hover { transform: translateY(-4px); }
.case-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.case-card:hover .case-image img { transform: scale(1.05); }
.case-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.9);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  backdrop-filter: blur(4px);
}
.case-body { flex: 1; display: flex; flex-direction: column; padding: 1.75rem; }
.case-body h2 { font-size: 1.5rem; color: var(--sky-deep); }
.case-body .site { font-size: 0.875rem; color: var(--muted-foreground); }
.case-body p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--secondary-foreground); }
.case-metrics { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-metric { border-radius: var(--radius-2xl); background: var(--secondary); padding: 1rem; }
.case-metric-label { font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.case-metric-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.case-metric-sub { font-size: 0.75rem; color: var(--muted-foreground); }
.case-btn { margin-top: 1.5rem; width: fit-content; display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; background: var(--secondary); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700; color: var(--primary); transition: 0.2s; }
.case-btn:hover { background: var(--primary); color: var(--primary-foreground); }

/* Website cases */
.website-cases-grid { margin-top: 2rem; display: grid; gap: 2rem; }
.website-case { overflow: hidden; padding: 0; }
.website-case-grid { display: grid; }
@media (min-width: 1024px) { .website-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.website-case-figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--secondary); }
@media (min-width: 1024px) { .website-case-figure { aspect-ratio: auto; min-height: 100%; } }
.website-case-figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.website-case-figure .tag {
  position: absolute;
  top: 1rem; left: 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.9);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}
.website-case-body { padding: 1.75rem; }
@media (min-width: 1024px) { .website-case-body { padding: 2.25rem; } }
.website-case-body h2 { font-size: 1.5rem; color: var(--sky-deep); }
.website-case-body a { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 4px; }
.website-case-body a:hover { color: var(--primary); }
.website-case-body h3 { margin-top: 1.25rem; font-size: 1rem; color: var(--sky-deep); }
.website-case-body p { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.625; color: var(--secondary-foreground); }
.website-case-body ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.375rem; }
@media (min-width: 640px) { .website-case-body ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.website-case-body li { display: flex; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.website-case-body li::before { content: "✓"; color: var(--primary); font-weight: 700; }
.website-case-body .case-btn { margin-top: 1.5rem; }

/* Case detail */
.case-detail-back { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700; color: var(--sky-deep); transition: transform 0.2s; }
.case-detail-back:hover { transform: translateY(-2px); }
.case-detail-hero { margin-top: 1.25rem; border-radius: var(--radius-4xl); background: var(--gradient-sky); padding: 3rem 1.5rem; box-shadow: var(--shadow-lift); }
@media (min-width: 640px) { .case-detail-hero { padding: 4rem 3rem; } }
.case-detail-grid { display: grid; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .case-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-detail-hero h1 { font-size: 2.25rem; line-height: 1.08; font-weight: 800; color: var(--sky-deep); }
@media (min-width: 640px) { .case-detail-hero h1 { font-size: 3rem; } }
.case-detail-hero p { margin-top: 1rem; font-size: 1rem; line-height: 1.625; color: var(--secondary-foreground); }
@media (min-width: 640px) { .case-detail-hero p { font-size: 1.125rem; } }
.case-detail-hero img { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-3xl); object-fit: cover; box-shadow: var(--shadow-soft); }
.case-detail-content { max-width: 48rem; margin: 1.5rem auto; font-size: 1rem; line-height: 1.625; color: var(--secondary-foreground); }
.case-detail-content p + p { margin-top: 1rem; }

/* Privacy / Voorwaarden */
.legal-page { padding: 2.5rem 1rem; }
.legal-card { max-width: 56rem; margin: 0 auto; border-radius: var(--radius-4xl); background: var(--card); padding: 1.75rem; box-shadow: var(--shadow-soft); }
@media (min-width: 640px) { .legal-card { padding: 3rem; } }
.legal-card h1 { font-size: 2.25rem; font-weight: 800; color: var(--sky-deep); }
.legal-card h2 { margin-top: 2rem; font-size: 1.5rem; color: var(--sky-deep); }
.legal-card p { margin-top: 0.5rem; color: var(--secondary-foreground); }
.legal-card ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.legal-card li { display: flex; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.legal-card li::before { content: "✓"; color: var(--primary); font-weight: 700; }
.legal-card .contact-box { margin-top: 1.5rem; border-radius: var(--radius-3xl); background: var(--secondary); padding: 1.25rem 1.5rem; font-size: 0.875rem; color: var(--secondary-foreground); }
.legal-card .contact-box p { margin: 0; }
.pdf-download { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-2xl); background: var(--primary); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 700; color: var(--primary-foreground); box-shadow: var(--shadow-soft); transition: opacity 0.2s; }
.pdf-download:hover { opacity: 0.9; }

/* Over ons */
.about-blocks { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .about-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-block { padding: 1.75rem; }
.about-block h2 { font-size: 1.25rem; color: var(--sky-deep); }
.about-block p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

/* Contact page */
.contact-info-grid { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .contact-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-info-card { border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--card); padding: 1rem 1.25rem; }
.contact-info-card .label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }
.contact-info-card a, .contact-info-card p { font-weight: 700; color: var(--sky-deep); }
.contact-info-card a:hover { color: var(--primary); }
.contact-highlight { margin-top: 1rem; border-radius: var(--radius-3xl); border: 1px solid var(--border); background: var(--card); padding: 1.25rem 1.5rem; }

/* Pricing bubble */
.pricing-bubble { max-width: 48rem; margin: 2.5rem auto 0; border-radius: var(--radius-4xl); border: 1px solid var(--border); background: var(--card); padding: 2rem; text-align: center; box-shadow: var(--shadow-soft); }
.pricing-bubble .price { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--primary); }
.pricing-bubble p { margin-top: 0.75rem; color: var(--secondary-foreground); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-image img, .about-image img, .cta-card img, .contact-baboon, .page-hero-image img { animation: none; }
  .marquee-track { animation: none; }
}

/* Animated background: slowly drifting light-blue waves */
.animated-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #f2f8fe;
  background-image:
    radial-gradient(ellipse 60% 45% at 18% 8%, rgba(0, 171, 245, 0.20), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 26%, rgba(74, 144, 226, 0.16), transparent 70%),
    radial-gradient(ellipse 55% 45% at 52% 92%, rgba(0, 171, 245, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 35% at 8% 70%, rgba(120, 190, 245, 0.14), transparent 70%);
  background-size: 200% 200%;
  animation: bg-wave 40s ease-in-out infinite;
}
@keyframes bg-wave {
  0%, 100% { background-position: 0% 0%; }
  25% { background-position: 100% 40%; }
  50% { background-position: 60% 100%; }
  75% { background-position: 30% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-bg { animation: none; }
}
.clients-section { background: rgba(255,255,255,0.72); }
html { scroll-padding-top: 6rem; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

/* Contactformulier meldingen */
.form-alert {
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.form-alert-ok {
  background: rgba(16, 160, 105, 0.10);
  border: 1px solid rgba(16, 160, 105, 0.3);
  color: #0b6b47;
}
.form-alert-error {
  background: rgba(220, 60, 60, 0.08);
  border: 1px solid rgba(220, 60, 60, 0.28);
  color: #9b2222;
}