:root {
  --nacht: #0b1f3a;
  --nacht-2: #122b4f;
  --koning: #27558e;
  --koning-licht: #3d74ba;
  --wit: #ffffff;
  --staal: #c9d1db;
  --staal-licht: #eef1f5;
  --tekst: #16233a;
  --tekst-zacht: #52607a;
  --fout: #b3261e;
  --radius: 14px;
  --schaduw: 0 18px 50px rgba(11, 31, 58, .18), 0 2px 6px rgba(11, 31, 58, .08);
  --kop: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--staal-licht); color: var(--tekst); font: 16px/1.6 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--koning); }
h1, h2, h3 { font-family: var(--kop); text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; margin: 0 0 .5em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--nacht); }
h3 { font-size: 1.4rem; color: var(--nacht); }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.klein { font-size: .85rem; color: var(--tekst-zacht); }

/* Balk */
.balk { background: var(--wit); border-bottom: 1px solid var(--staal); position: sticky; top: 0; z-index: 20; }
.balk-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.logo { width: 84px; height: auto; padding: 4px 0; }
.taalknop { background: none; border: 1px solid var(--staal); border-radius: 999px; padding: 8px 16px; font: 600 .9rem var(--body); color: var(--koning); cursor: pointer; min-height: 40px; }
.taalknop:hover { border-color: var(--koning); }

/* Hero */
.hero {
  position: relative; color: var(--wit); padding: 64px 0 150px;
  background:
    linear-gradient(100deg, rgba(11,31,58,.97) 0%, rgba(11,31,58,.9) 38%, rgba(18,43,79,.55) 70%, rgba(39,85,142,.2) 100%),
    url('/img/medewerker-schuimen.webp') center 30% / cover no-repeat;
}
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(180deg, transparent, var(--staal-licht)); }
.hero-in { position: relative; z-index: 1; max-width: 1120px; }
.kicker { font: 700 .85rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--staal); margin: 0 0 12px; }
.hero h1 { font-size: clamp(2.3rem, 6.4vw, 4.4rem); max-width: 19ch; color: var(--wit); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.intro { max-width: 52ch; font-size: 1.08rem; color: #dbe3ee; }
.hero-punten { list-style: none; padding: 0; margin: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-punten li { font: 700 1rem var(--kop); text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 1.05rem var(--kop); text-transform: uppercase; letter-spacing: .06em; color: var(--wit); text-decoration: none;
  background: linear-gradient(180deg, var(--koning-licht), var(--koning)); box-shadow: 0 8px 22px rgba(39,85,142,.35), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, box-shadow .15s; }
.knop:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(39,85,142,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.knop:focus-visible, .keuze input:focus-visible + span, input:focus-visible, summary:focus-visible, .taalknop:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.knop-groot { min-height: 56px; font-size: 1.2rem; padding: 14px 30px; }
.knop-licht { background: var(--wit); color: var(--koning); border: 1px solid var(--staal); box-shadow: none; }
.knop[disabled] { opacity: .6; cursor: wait; }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 8px; }
.linkknop { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Kaarten */
.kaart { background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 24px; }
.calc, .formulier { position: relative; z-index: 2; max-width: 760px; margin: -110px auto 40px; width: calc(100% - 32px); padding: 28px; border-top: 5px solid var(--koning); }
.formulier { margin-top: 32px; }
.stappen { display: flex; gap: 8px; margin-bottom: 8px; }
.stip { width: 36px; height: 5px; border-radius: 3px; background: var(--staal); }
.stip.actief { background: var(--koning); }
.stap { border: 0; padding: 0; margin: 0; min-width: 0; }
.stap legend { font: 800 1.7rem var(--kop); text-transform: uppercase; color: var(--nacht); margin-bottom: 12px; padding: 0; }
.veld { margin-bottom: 20px; }
.veld > label, .label { display: block; font-weight: 600; margin-bottom: 8px; }
input[type=number], input:not([type]), input[type=email], input[type=tel] {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--staal); border-radius: 10px; font: 1rem var(--body); color: var(--tekst); background: var(--wit); }
input[aria-invalid=true] { border-color: var(--fout); }
.schuif { display: flex; align-items: center; gap: 16px; }
.schuif input { flex: 1; accent-color: var(--koning); height: 32px; }
.schuif output { min-width: 64px; text-align: center; font: 800 1.6rem var(--kop); color: var(--koning); background: var(--staal-licht); border-radius: 8px; padding: 2px 8px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; flex: 1 1 150px; }
.keuze input { position: absolute; opacity: 0; inset: 0; }
.keuze span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--staal); border-radius: 10px; cursor: pointer; font-weight: 500; transition: all .15s; height: 100%; }
.keuze input:checked + span { border-color: var(--koning); background: linear-gradient(180deg, #edf3fb, #dfe9f6); color: var(--nacht); font-weight: 700; box-shadow: inset 0 0 0 1px var(--koning); }
.meer { margin: 4px 0 20px; }
.meer summary { cursor: pointer; color: var(--koning); font-weight: 600; padding: 6px 0; }
.twee { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .twee { grid-template-columns: 1fr 1fr; } }

/* Resultaat */
.resultaat { padding: 16px 0 8px; }
.tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
@media (min-width: 860px) { .tegels { grid-template-columns: repeat(4, 1fr); } }
.tegel { border-radius: var(--radius); padding: 20px 16px; color: var(--wit); min-width: 0;
  background: radial-gradient(120% 140% at 0% 0%, var(--nacht-2), var(--nacht)); box-shadow: var(--schaduw); position: relative; overflow: hidden; }
.tegel::before { content: ''; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent); pointer-events: none; }
.tegel strong { display: block; font: 800 clamp(1.9rem, 5vw, 2.8rem) var(--kop); line-height: 1; overflow-wrap: anywhere; }
.tegel span { display: block; margin-top: 6px; color: var(--staal); font-size: .92rem; }
.tegel-accent { background: radial-gradient(120% 140% at 0% 0%, var(--koning-licht), var(--koning)); }
.tegel-accent span { color: #e3ecf8; }
.twee-kol { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
@media (min-width: 860px) { .twee-kol { grid-template-columns: 3fr 2fr; } }
.vinkjes { list-style: none; padding: 0; margin: 0; }
.vinkjes li { position: relative; padding: 10px 0 10px 36px; border-bottom: 1px solid var(--staal-licht); }
.vinkjes li::before { content: ''; position: absolute; left: 0; top: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--koning) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.fotos figure { margin: 0; text-align: center; }
.fotos img { max-height: 170px; width: auto; margin: 0 auto 4px; }
.fotos.een { grid-template-columns: 1fr; }
.fotos.een img { max-height: 240px; }
.foto-link { display: block; text-decoration: none; border-radius: 12px; padding: 8px; transition: background .15s, transform .15s; }
.foto-link:hover { background: var(--staal-licht); transform: translateY(-2px); }
.foto-link:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.foto-cta { display: block; margin-top: 4px; font-size: .85rem; font-weight: 600; color: var(--koning); text-decoration: underline; }
.fotos figcaption { font: 700 .95rem var(--kop); text-transform: uppercase; color: var(--koning); letter-spacing: .04em; }

/* Formulier */
.fout { display: block; color: var(--fout); min-height: 1.2em; font-size: .85rem; margin-top: 4px; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vink { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; font-size: .92rem; }
.vink input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--koning); flex: none; }
.status { margin: 12px 0 0; font-weight: 600; }
.status.ok { color: #1c6b3a; }
.status.nok { color: var(--fout); }

/* Uitleg, vergelijking, faq */
main > section.wrap { padding-top: 40px; padding-bottom: 20px; }
.uitleg { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 860px) { .uitleg { grid-template-columns: 1fr 1fr; } }
.uitleg img { border-radius: var(--radius); box-shadow: var(--schaduw); }
.som { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.som div { background: var(--wit); border: 1px solid var(--staal); border-radius: 10px; padding: 12px; }
.som b { display: block; font-family: var(--kop); font-size: 1.1rem; }
.som span { font: 800 1.8rem var(--kop); color: var(--tekst-zacht); }
.som-accent { border-color: var(--koning) !important; }
.som-accent span { color: var(--koning); }
.tabelwrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--schaduw); }
table { width: 100%; border-collapse: collapse; background: var(--wit); min-width: 560px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--staal-licht); vertical-align: top; }
thead th { background: var(--nacht); color: var(--wit); font: 700 1.1rem var(--kop); text-transform: uppercase; letter-spacing: .03em; }
thead th:last-child { background: var(--koning); }
tbody th { font-weight: 600; color: var(--nacht); width: 24%; }
tbody td:last-child { font-weight: 600; color: var(--koning); }
#faqlijst details { background: var(--wit); border-radius: 10px; margin-bottom: 10px; padding: 4px 18px; box-shadow: 0 2px 8px rgba(11,31,58,.06); }
#faqlijst summary { cursor: pointer; font-weight: 600; padding: 12px 0; }

/* Voet + cookie */
.voet { background: var(--nacht); color: var(--staal); margin-top: 48px; padding: 24px 0; font-size: .9rem; }
.voet a { color: var(--wit); }
.voet-in { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.cookie { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: var(--wit); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 18px 20px; }
.cookie p { margin: 0 0 12px; font-size: .92rem; }
.cookie .knop { flex: 1; }

@media (max-width: 480px) {
  .hero { padding: 40px 0 130px; }
  .calc, .formulier { padding: 20px; }
  .keuze { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .knop { transition: none; } }