/* Variant: speels — zwart-groen basis, iets speelser en moderner
   Basis    zwart-groen #171C1A · diep #0F1311 · kaart #1F2623 · crème #ECE7D1
   Hoofdkleur groen #7CB932 (hover #8FCB45)
   Accenten (spaarzaam) oker #E9B949 · lila #B8A6E8
   Geen rood: Klantlogin, vinkjes, 'naar de klantlogin' en Finance Checked blijven groen.
   Fonts: Outfit (koppen) + DM Sans (tekst) lokaal gehost in /fonts. */

/* —— Basis uit de zwart-groen variant —— */
:root {
  --navy: #ECE7D1;
  --navy-deep: #0F1311;
  --teal: #7CB932;
  --teal-hover: #8FCB45;
  --teal-soft: rgba(124, 185, 50, 0.14);
  --off-white: #171C1A;
  --surface: #1F2623;
  --ink: #ECE7D1;
  --muted: #B3B4A6;
  --border: rgba(236, 231, 209, 0.12);
  --cherry: #7CB932;            /* rood vervangen door groen */
  --ochre: #E9B949;
  --ochre-soft: rgba(233, 185, 73, 0.14);
  --lilac: #B8A6E8;
  --lilac-soft: rgba(184, 166, 232, 0.14);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px rgba(0,0,0,0.25);
  --shadow-hover: 0 4px 8px rgba(0,0,0,0.35), 0 22px 44px rgba(0,0,0,0.38);
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Outfit", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.site-header { background: rgba(23, 28, 26, 0.86); }
.skip-link { background: #7CB932; color: #171C1A; border-radius: 999px; }
.btn-primary, .btn-primary:hover, .step-num { color: #171C1A; }
.aanpak { background: #0F1311; }
.btn-login { color: #ECE7D1; }
.form-row textarea::placeholder, .form-row input::placeholder { color: #7d8077; }
.form-row input:hover, .form-row textarea:hover { border-color: rgba(236,231,209,0.25); }
.form-row input:focus, .form-row textarea:focus { box-shadow: 0 0 0 4px rgba(124,185,50,0.22); }
.site-footer { background: #0F1311; }
.legal-notice { background: rgba(233,185,73,0.12); color: #F3D488; border-color: rgba(233,185,73,0.5); }

/* —— Typografie —— */
h1, h2, h3, .logo-text, .footer-brand strong, .step-num {
  font-family: var(--font-head);
}
.hero h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; font-size: clamp(2.3rem, 5vw, 3.4rem); }
.section-header h2 { font-weight: 700; letter-spacing: -0.03em; }
.card h3, .step h3 { font-weight: 600; letter-spacing: -0.01em; }

/* —— Logo: penseel-cirkel rond FD —— */
.logo { gap: 0.55rem; }
.brand-mark {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.brand-mark-sm { width: 2.35rem; height: 2.35rem; }
.logo:hover .brand-mark { transform: rotate(-12deg) scale(1.04); }
.logo-text { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; color: #ECE7D1; }
.footer-brand strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: #ECE7D1; }

/* —— Navigatie —— */
.nav-list a { position: relative; transition: color 0.2s; }
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: #7CB932; border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-list a:hover::after { transform: scaleX(1); }
.nav-toggle { border-radius: 999px; }

/* —— Knoppen: pills —— */
.btn {
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(124, 185, 50, 0.28); }
.btn-login-lg { padding: 0.85rem 1.55rem; }
.btn-login:hover { background: rgba(124, 185, 50, 0.10); color: #7CB932; border-color: #7CB932; }
.btn-login .icon-check { color: #7CB932; }

/* —— Hero: organische vormen + jonge boom —— */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6.5rem 0 6rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23E9B949' fill-opacity='0.22' d='M361.1 200.0 C360.9 249.4 328.5 318.3 285.0 347.2 C241.5 376.0 141.2 397.7 100.0 373.2 C58.8 348.7 35.0 252.8 37.8 200.0 C40.7 147.2 75.8 81.4 117.2 56.5 C158.6 31.7 245.5 27.0 286.1 50.9 C326.8 74.8 361.3 150.6 361.1 200.0Z'/%3E%3C/svg%3E") no-repeat right -40px bottom -150px / 300px 300px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23B8A6E8' fill-opacity='0.22' d='M330.0 200.0 C329.2 252.4 324.5 328.4 288.5 353.3 C252.5 378.1 155.1 374.6 114.0 349.0 C72.8 323.5 38.7 244.3 41.9 200.0 C45.0 155.7 90.8 110.4 132.7 83.5 C174.6 56.6 260.2 19.3 293.1 38.7 C326.0 58.2 330.7 147.6 330.0 200.0Z'/%3E%3C/svg%3E") no-repeat left -120px bottom -170px / 320px 320px,
    radial-gradient(ellipse at 75% 0%, rgba(124,185,50,0.16) 0%, transparent 55%),
    #171C1A;
}
.hero::before {
  /* Jonge boom in penseelstijl (vervangt de draaiende penseelcirkel): groeit uit de okerheuvel */
  content: "";
  position: absolute;
  z-index: 0;
  height: 92%;
  aspect-ratio: 2 / 3;
  right: -60px;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cdefs%3E%3Cpath id='l' d='M0 0 C7 -7 19 -8 28 0 C19 7 7 7 0 0Z'/%3E%3C/defs%3E%3Cpath fill='%237CB932' d='M105.5 299.6 L105.0 291.1 L104.0 282.7 L103.4 274.2 L103.6 265.6 L103.6 256.9 L103.3 248.1 L103.6 239.1 L104.2 230.1 L104.5 220.9 L104.6 211.5 L105.2 202.1 L105.8 192.5 L106.0 182.7 L106.3 172.7 L106.8 162.6 L107.1 152.2 L107.0 141.7 L107.0 131.0 L106.9 120.1 L106.5 108.9 L105.8 97.5 L105.1 85.9 L104.2 74.0 L102.8 61.9 L101.2 62.1 L102.1 74.2 L102.8 86.0 L103.2 97.6 L103.3 109.0 L103.2 120.1 L103.2 131.0 L102.8 141.6 L102.1 152.1 L101.6 162.3 L101.1 172.4 L100.2 182.3 L99.2 192.0 L98.6 201.6 L97.9 211.1 L96.8 220.4 L95.9 229.6 L95.6 238.7 L95.0 247.7 L94.2 256.7 L93.9 265.5 L94.1 274.3 L93.9 283.1 L93.8 291.8 L94.5 300.4Z'/%3E%3Cpath fill='none' stroke='%237CB932' stroke-width='0.9' stroke-linecap='round' d='M110.0 292.0 L109.3 283.0 L109.0 273.9 L108.9 264.7 L109.1 255.6 L109.5 246.4 L110.1 237.4 L110.8 228.4 L111.5 219.5 L112.4 210.7 L113.2 202.1 L114.1 193.7 L114.8 185.6 L115.5 177.6 L116.0 170.0'/%3E%3Cpath fill='%237CB932' d='M101.4 210.4 L98.3 207.8 L95.0 205.3 L91.6 202.7 L88.2 199.8 L84.7 197.0 L81.0 194.1 L77.3 191.1 L73.7 187.8 L69.8 184.5 L66.0 181.1 L62.1 177.5 L58.3 173.7 L54.3 169.8 L50.3 165.7 L49.7 166.3 L53.4 170.6 L57.1 174.8 L60.9 178.7 L64.7 182.4 L68.4 186.1 L72.0 189.6 L75.7 192.9 L79.2 196.2 L82.6 199.4 L86.0 202.4 L89.4 205.2 L92.6 208.1 L95.6 211.0 L98.6 213.6Z'/%3E%3Cpath fill='%237CB932' d='M107.0 161.5 L110.4 159.3 L113.7 156.8 L116.9 154.2 L120.2 151.6 L123.4 148.8 L126.4 145.8 L129.5 142.8 L132.6 139.7 L135.6 136.4 L138.5 133.0 L141.5 129.5 L144.5 125.9 L147.4 122.1 L150.3 118.3 L149.7 117.7 L146.6 121.5 L143.5 125.0 L140.4 128.5 L137.4 131.9 L134.2 135.1 L131.1 138.2 L128.0 141.2 L124.8 144.1 L121.6 146.7 L118.3 149.3 L115.2 151.9 L111.8 154.2 L108.4 156.3 L105.0 158.5Z'/%3E%3Cpath fill='%237CB932' d='M105.9 117.0 L103.2 114.5 L100.2 112.1 L97.3 109.7 L94.5 107.1 L91.6 104.6 L88.7 102.1 L85.9 99.5 L83.1 96.9 L80.3 94.2 L77.5 91.5 L74.9 88.6 L72.3 85.7 L71.7 86.3 L74.2 89.3 L76.8 92.2 L79.4 95.1 L82.0 98.0 L84.8 100.7 L87.5 103.4 L90.3 106.1 L93.0 108.7 L95.9 111.3 L98.6 113.9 L101.3 116.5 L104.1 119.0Z'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(50 166) rotate(-140) scale(1.0)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(58 171) rotate(-200) scale(0.8)'/%3E%3Cuse href='%23l' fill='%23E9B949' transform='translate(64 176) rotate(-110) scale(0.7)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(150 118) rotate(-40) scale(1.0)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(142 124) rotate(20) scale(0.8)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(136 131) rotate(-80) scale(0.75)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(72 86) rotate(-120) scale(0.9)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(78 95) rotate(-175) scale(0.7)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(102 62) rotate(-95) scale(1.0)'/%3E%3Cuse href='%23l' fill='%23E9B949' transform='translate(103 70) rotate(-35) scale(0.8)'/%3E%3Cuse href='%23l' fill='%237CB932' transform='translate(102 72) rotate(-145) scale(0.75)'/%3E%3Cuse href='%23l' fill='%23E9B949' transform='translate(98 246) rotate(-25) scale(0.6)'/%3E%3C/svg%3E") no-repeat center bottom / contain;
  opacity: 0.22;
  transform-origin: 50% 100%;
  animation: speels-wuif 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 44rem; }
.hero-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px; height: 220px;
  left: -140px; top: -120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%237CB932' fill-opacity='1' d='M350.4 200.0 C354.5 240.0 339.1 309.5 308.1 335.5 C277.0 361.5 209.0 366.0 164.3 356.3 C119.6 346.5 60.8 316.1 39.8 277.1 C18.8 238.1 16.8 157.4 38.4 122.2 C60.0 87.0 128.6 70.4 169.4 65.9 C210.2 61.5 253.1 73.2 283.3 95.6 C313.5 117.9 346.3 160.0 350.4 200.0Z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
}
@keyframes speels-wuif { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(124, 185, 50, 0.12);
  border: 1px solid rgba(124, 185, 50, 0.3);
  font-size: 0.75rem;
}
.eyebrow::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--ochre);
}

/* Penseelstreep onder het laatste woord van de H1 ('ambities'), puur via CSS */
.hero h1::after {
  content: "";
  display: inline-block;
  width: 3.95em;
  height: 0.3em;
  margin-left: -3.95em;
  vertical-align: -0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23E9B949' d='M6.0 13.0 L9.8 12.1 L13.6 11.3 L17.4 10.3 L21.2 9.4 L25.0 8.6 L28.8 8.4 L32.6 8.3 L36.4 8.2 L40.2 8.0 L44.0 7.9 L47.8 7.7 L51.6 7.5 L55.4 7.4 L59.2 7.2 L63.0 7.0 L66.8 6.8 L70.6 6.5 L74.4 6.3 L78.2 6.0 L82.0 5.7 L85.8 5.4 L89.6 5.1 L93.4 4.8 L97.2 4.5 L101.0 4.2 L104.8 3.9 L108.6 3.7 L112.4 3.4 L116.2 3.2 L120.0 3.1 L123.8 2.9 L127.6 2.8 L131.4 2.8 L135.2 2.9 L139.0 3.1 L142.8 3.3 L146.6 3.6 L150.4 3.9 L154.2 4.3 L158.0 4.7 L161.8 5.1 L165.6 5.5 L169.4 6.0 L173.2 6.4 L177.0 6.9 L180.8 7.3 L184.6 7.7 L188.4 8.1 L192.2 8.5 L196.0 8.8 L199.8 9.1 L203.6 9.4 L207.4 9.7 L211.2 9.9 L215.0 10.1 L218.8 10.3 L222.6 10.5 L226.4 10.7 L230.2 10.8 L234.0 11.0 L234.0 12.9 L230.2 12.9 L226.4 13.0 L222.6 12.9 L218.8 12.9 L215.0 12.9 L211.2 12.8 L207.4 12.7 L203.6 12.6 L199.8 12.5 L196.0 12.4 L192.2 12.2 L188.4 12.1 L184.6 12.0 L180.8 11.8 L177.0 11.7 L173.2 11.6 L169.4 11.4 L165.6 11.3 L161.8 11.2 L158.0 11.1 L154.2 11.1 L150.4 11.0 L146.6 10.9 L142.8 10.9 L139.0 10.9 L135.2 10.9 L131.4 10.9 L127.6 10.8 L123.8 10.7 L120.0 10.7 L116.2 10.7 L112.4 10.8 L108.6 10.9 L104.8 11.0 L101.0 11.2 L97.2 11.4 L93.4 11.6 L89.6 11.9 L85.8 12.2 L82.0 12.5 L78.2 12.9 L74.4 13.3 L70.6 13.6 L66.8 14.0 L63.0 14.4 L59.2 14.8 L55.4 15.1 L51.6 15.4 L47.8 15.7 L44.0 16.0 L40.2 16.2 L36.4 16.4 L32.6 16.5 L28.8 16.7 L25.0 16.7 L21.2 16.1 L17.4 15.3 L13.6 14.5 L9.8 13.7 L6.0 13.0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.95;
  pointer-events: none;
}

/* —— Kaarten: ronder, hover-lift met lichte tilt —— */
.card {
  border-radius: var(--radius);
  padding: 2rem 1.85rem;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.card:hover { transform: translateY(-6px) rotate(-0.6deg); border-color: rgba(124, 185, 50, 0.45); }
.card:nth-child(even):hover { transform: translateY(-6px) rotate(0.6deg); }
.card-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%;
  transition: border-radius 0.5s ease, transform 0.35s ease;
}
.card:hover .card-icon { border-radius: 55% 45% 42% 58% / 45% 56% 44% 55%; transform: rotate(-6deg); }
.card:nth-child(2) .card-icon { background: var(--ochre-soft); color: var(--ochre); }
.card:nth-child(2):hover { border-color: rgba(233, 185, 73, 0.45); }
.card:nth-child(3) .card-icon { background: var(--lilac-soft); color: var(--lilac); }
.card:nth-child(3):hover { border-color: rgba(184, 166, 232, 0.45); }

/* —— Aanpak —— */
.step {
  border-radius: var(--radius);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), border-color 0.3s, background 0.3s;
}
.step:hover { transform: translateY(-4px); background: rgba(255,255,255,0.06); border-color: rgba(124,185,50,0.35); }
.step-num {
  width: 2.75rem; height: 2.75rem;
  font-size: 1.1rem; font-weight: 800;
  border-radius: 8% 72% 8% 72%;   /* blad in plaats van rond blobje */
}
.step:nth-child(2) .step-num { background: var(--ochre); }
.step:nth-child(2):hover { border-color: rgba(233,185,73,0.4); }
.step:nth-child(3) .step-num { background: var(--lilac); }
.step:nth-child(3):hover { border-color: rgba(184,166,232,0.4); }

/* —— Software-strip (blijft groen) —— */
.strip-check { background: rgba(124, 185, 50, 0.14); color: #7CB932; }
.strip-inner a { color: #7CB932; }
.strip-inner a:hover { color: #8FCB45; }
.software-strip { background: #1F2623; }

/* —— Over —— */
.over { position: relative; overflow: hidden; }

/* —— Contact —— */
.contact-form { border-radius: var(--radius); padding: 2.1rem; }
.form-row input, .form-row textarea { border-radius: var(--radius-sm); padding: 0.8rem 1rem; }

/* —— Footer —— */
.footer-checked .icon-check { color: #7CB932; }
.footer-nav a:hover { color: #ECE7D1; }

@media (max-width: 720px) {
  .hero { padding: 4rem 0 3.75rem; }
  .hero::before { height: 48%; right: 4px; opacity: 0.15; }
  .site-nav .btn-login { border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .card, .step, .btn, .brand-mark, .card-icon { transition: none; }
  .card:hover, .card:nth-child(even):hover, .step:hover, .btn:hover { transform: none; }
}

/* QR-code met contactgegevens (visitekaartje) */
.contact-qr {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0 0;
}
.contact-qr img {
  width: 148px;
  height: 148px;
  flex: none;
  padding: 8px;
  background: #ECE7D1;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(124, 185, 50, 0.55);
}
.contact-qr figcaption {
  max-width: 22ch;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.85;
}

/* Slogan bij BTW & aangiften */
.card .card-slogan {
  margin-top: 14px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: #7CB932;
}

/* Aanpak: 4 stappen, stap 4 uitgelicht */
.steps { grid-template-columns: repeat(4, 1fr); }
.step.step-focus { background: rgba(124,185,50,0.10); border-color: rgba(124,185,50,0.55); }
.step.step-focus:hover { border-color: #7CB932; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Diensten: vijfde kaart over volle breedte */
.card-grid .card-wide { grid-column: 1 / -1; }
.card:nth-child(5) .card-icon { background: var(--teal-soft); color: var(--teal); }

/* Privacyverwijzing bij contactformulier */
.form-note { margin: 0 0 14px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.form-note a { color: #7CB932; text-decoration: underline; }