/*
 * WEBGROEIERS — Moneybird-richting
 * De bestaande homepage-inhoud en interacties blijven intact. Dit bestand
 * legt er één rustig, merk-eigen visueel systeem overheen: Moneybird-ritme,
 * Webgroeiers-groen.
 */

:root {
  --green: #059669;
  --green-dark: #047857;
  --green-bright: #34d399;
  --green-soft: #dff6ea;
  --amber: var(--green);
  --amber-dark: var(--green-dark);
  --amber-light: var(--green-soft);
  --white: #fff;
  --off-white: #f5f5f4;
  --surface: #eeeeec;
  --text: #0c0a09;
  --text-soft: #44403c;
  --text-muted: #6b6762;
  --border: #e7e5e4;
  --navy: #06281d;
  --navy-mid: #0b3b2b;
  --container: 1280px;
  --section-y: clamp(5rem, 8vw, 7.5rem);
  --radius: 10px;
  --radius-lg: 20px;
  --radius-xl: 32px;
}

body {
  color: var(--text);
  background: var(--white);
}

/* De bovenbalk verdwijnt; net als bij de referenties begint het verhaal
   meteen in de fotohero. Contact blijft in de hoofdnavigatie beschikbaar. */
.topbalk { display: none !important; }

.site-header {
  top: 0;
  height: 78px;
  background: transparent;
  border: 0;
}

body:has(.hero--video) .site-header:not(.scrolled) {
  top: 0;
}

.nav-inner {
  height: 78px;
  max-width: 1280px;
  padding-inline: 24px;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav-links { gap: clamp(1.15rem, 2vw, 2rem); }

body:has(.hero--video) .site-header:not(.scrolled) .nav-logo,
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-trigger,
body:has(.hero--video) .site-header:not(.scrolled) .lang-btn {
  color: #fff !important;
}

body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-trigger:hover,
body:has(.hero--video) .site-header:not(.scrolled) .lang-btn:hover {
  color: var(--green-bright) !important;
}

body:has(.hero--video) .site-header:not(.scrolled) .logo-wm-w {
  color: var(--green-bright);
}

.nav-cta,
.site-header.scrolled .nav-cta {
  min-height: 44px;
  padding: .7rem 1.35rem;
  border: 0 !important;
  border-radius: 10px;
  background: var(--green-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nav-cta:hover,
.site-header.scrolled .nav-cta:hover {
  background: #065f46 !important;
  color: #fff !important;
}

.site-header.scrolled {
  height: 70px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(12, 10, 9, .08);
  box-shadow: 0 10px 35px -28px rgba(12, 10, 9, .55);
}

.site-header.scrolled .nav-inner { height: 70px; }

/* Hero: volle breedte, tekst links en beeld rechts. De afgeronde onderrand
   en overlappende witte tray zijn de belangrijkste Moneybird-signalen. */
.hero--video {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--white);
}

.hero-video-inner {
  height: min(84vh, 680px);
  min-height: 620px;
  max-height: 760px;
  border-radius: 0 0 34px 34px;
  align-items: stretch;
  background: #061c16;
}

.hero-bg-video,
.hero-poster-img {
  object-position: center 46%;
}

.hero-scrim {
  background:
    linear-gradient(90deg, rgba(3, 20, 16, .93) 0%, rgba(3, 20, 16, .76) 35%, rgba(3, 20, 16, .26) 66%, rgba(3, 20, 16, .16) 100%),
    linear-gradient(180deg, rgba(3, 20, 16, .35) 0%, rgba(3, 20, 16, .02) 45%, rgba(3, 20, 16, .48) 100%) !important;
}

.hero-video-content {
  max-width: 1280px;
  height: 100%;
  padding: 150px 24px 76px;
}

.hero-video-text {
  max-width: 720px;
  gap: 1.35rem;
}

.hero-headline--light {
  max-width: 720px;
  margin: 0;
  font-size: clamp(3.25rem, 5.15vw, 4.45rem);
  font-weight: 700;
  line-height: .99;
  letter-spacing: -.048em;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .24) !important;
}

.hero-headline .hw--accent { color: var(--green-bright); }

.hero-sub--light {
  max-width: 610px;
  font-size: clamp(1.05rem, 1.5vw, 1.23rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero .h-pil,
.hero .btn-ghost--white {
  min-height: 48px;
  padding: .78rem 1.35rem;
  border-radius: 10px;
  font-size: .96rem;
  font-weight: 650;
  line-height: 1;
}

.hero .h-pil {
  gap: .6rem;
  background: var(--green-dark);
  color: #fff;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .7);
}

.hero .h-pil:hover { background: #065f46; }

.hero .h-pil > span {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
}

.hero .btn-ghost--white {
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .04);
}

.hero .btn-ghost--white:hover {
  background: rgba(255, 255, 255, .13);
}

.hero-trust--light {
  margin-top: .35rem;
  gap: .9rem;
}

.hero-trust--light .stars {
  color: #ffd058;
  letter-spacing: 1px;
}

.trust-strip {
  position: relative;
  z-index: 4;
  margin-top: -32px;
  padding-block: 28px 24px;
  border: 0;
  border-radius: 32px 32px 0 0;
  background: #fff;
  box-shadow: 0 -16px 40px -36px rgba(12, 10, 9, .6);
}

.trust-strip .container {
  max-width: 1280px;
  padding-inline: 24px;
}

.trust-label {
  color: var(--text);
  font-size: .94rem;
  line-height: 1.25;
}

/* Sectieritme en typografie. */
.storytelling,
.demo-sectie,
.work-section,
.reviews-section,
.pricing-section,
.kb-section,
.contact-section {
  padding-block: var(--section-y);
}

.section-header { margin-bottom: clamp(2.5rem, 4vw, 4rem); }

.section-heading,
.h-kop {
  max-width: 860px;
  font-size: clamp(2.35rem, 4.1vw, 3.6rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.section-sub,
.h-sub {
  max-width: 690px;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  color: var(--text-muted);
}

em.amber,
.amber { color: var(--green-dark); }

.storytelling,
.demo-sectie,
.reviews-section,
.kb-section { background: #fff !important; }

.work-section,
.pricing-section,
.contact-section { background: var(--off-white) !important; }

.storytelling::before,
.contact-section::before { display: none; }

/* Rustige, ruime SaaS-kaarten zonder decoratieve ruis. */
.services-grid { gap: 1rem; }

.storytelling .service-card,
.reviews-grid .review-card,
.price-card,
.kb-card {
  border: 1px solid rgba(12, 10, 9, .07) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(12, 10, 9, .03) !important;
}

.storytelling .service-card {
  min-height: 300px;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--off-white) !important;
}

.storytelling .service-card.service-card--featured {
  border-color: rgba(5, 150, 105, .35) !important;
  background: var(--green-soft) !important;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  color: var(--green-dark);
}

.service-badge {
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
}

.work-track { gap: 1rem; }

.work-track .case-card {
  border-radius: 20px !important;
  background: #fff;
  box-shadow: 0 10px 34px -28px rgba(12, 10, 9, .55) !important;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px -28px rgba(12, 10, 9, .48) !important;
}

.reviews-grid { gap: 1rem; }

.reviews-grid .review-card {
  padding: clamp(1.45rem, 2.4vw, 2rem);
  background: var(--off-white) !important;
}

.demo-sectie .demo-vlak {
  border-radius: 24px;
  background: var(--navy);
  box-shadow: 0 28px 70px -42px rgba(6, 40, 29, .65);
}

.demo-sectie .demo-tab[aria-selected="true"],
.demo-sectie .demo-tab.aan {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}

.pricing-section .price-card {
  border-radius: 20px !important;
  background: #fff !important;
}

.pricing-section .price-card--featured {
  border-color: var(--navy) !important;
  background: var(--navy) !important;
}

.pricing-section .price-card--featured .price-btn {
  background: var(--green-dark) !important;
  color: #fff !important;
}

.kb-card { overflow: hidden; }

.contact-inner {
  border-radius: 28px;
}

.contact-form-wrap,
.contact-method {
  border-color: rgba(12, 10, 9, .08);
  border-radius: 16px;
  background: #fff;
}

.btn-primary,
.btn-amber,
.h-pil {
  background: var(--green-dark);
  color: #fff;
}

.btn-primary:hover,
.btn-amber:hover,
.h-pil:hover { background: #065f46; }

.site-footer {
  background: var(--navy);
}

@media (max-width: 980px) {
  .hero-video-inner { height: 720px; }
  .hero-video-content { padding-inline: 24px; }
  .hero-headline--light { max-width: 680px; }
}

@media (max-width: 768px) {
  .site-header,
  .nav-inner { height: 68px; }

  body:has(.hero--video) .site-header:not(.scrolled) .mobile-menu__trigger {
    color: #fff;
  }

  body:has(.hero--video) .site-header:not(.scrolled) .hamburger span {
    background: #fff;
  }

  .hero-video-inner {
    height: min(86svh, 740px);
    min-height: 650px;
    border-radius: 0 0 24px 24px;
  }

  .hero-bg-video,
  .hero-poster-img { object-position: 58% center; }

  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(3, 20, 16, .5) 0%, rgba(3, 20, 16, .25) 30%, rgba(3, 20, 16, .83) 72%, rgba(3, 20, 16, .94) 100%) !important;
  }

  .hero-video-content {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 100px 20px 62px;
  }

  .hero-video-text { gap: 1rem; }

  .hero-headline--light {
    font-size: clamp(2.55rem, 11.4vw, 3.4rem);
    line-height: 1;
  }

  .hero-sub--light {
    max-width: 34ch;
    font-size: 1rem;
  }

  .hero-actions {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
  }

  .hero-actions .h-pil,
  .hero-actions .btn-ghost--white {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    padding-inline: .85rem;
    white-space: nowrap;
  }

  .hero-trust--light { font-size: .83rem; }

  .trust-strip {
    margin-top: -24px;
    padding-block: 24px 20px;
    border-radius: 24px 24px 0 0;
  }

  .trust-label { display: none; }

  .section-heading,
  .h-kop {
    font-size: clamp(2.1rem, 10vw, 2.85rem);
  }
}

@media (max-width: 480px) {
  .nav-inner { padding-inline: 18px; }

  .hero-video-content { padding-inline: 18px; }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .h-pil,
  .hero-actions .btn-ghost--white {
    width: 100%;
  }
}