/* Telefoonaanname.nl — aanvullingen op de .ai-basisstijl */

/* Brand */
.brand-logo{height:34px;width:auto}
.only-dark{display:none}
[data-theme="dark"] .only-dark{display:block}
[data-theme="dark"] .only-light{display:none}
.main-nav{gap:1.5rem}
.login-link{font-size:var(--text-sm);color:var(--muted);text-decoration:none;padding:0 .4rem}
.login-link:hover{color:var(--ink)}
.menu-toggle{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;place-items:center}
@media (max-width:1080px){.main-nav{gap:1.1rem}.login-link{display:none}}
@media (max-width:960px){
  .menu-toggle{display:grid}
  .main-nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem clamp(1.25rem,4vw,3rem) 1rem}
  .main-nav.open{display:flex}
  .main-nav a{padding:.8rem 0;border-bottom:1px solid var(--line);font-size:var(--text-base);color:var(--ink)}
  .main-nav a:last-child{border-bottom:0}
}
@media (max-width:440px){.brand-logo{height:28px}.header-actions{gap:.4rem}}

.hero-title em{color:var(--human)}

/* Spectrum */
.spectrum{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-bottom:1.25rem}
.spectrum-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.spectrum-bar{height:6px;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--human),var(--faint) 45%,var(--ai));display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.spectrum-bar i{position:relative}
.spectrum-bar i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);transform:translate(-50%,-50%)}
@media (max-width:900px){.spectrum{display:none}}

/* Options */
.options{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:stretch}
.option{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;transition:border-color .2s}
.option:hover{border-color:var(--muted)}
.option-num{font-size:var(--text-xs);color:var(--faint)}
.option h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);line-height:1.1;letter-spacing:-.015em}
.option-lead{font-size:var(--text-sm);color:var(--muted)}
.option-facts{margin:.25rem 0 0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.option-facts div{padding:.6rem 0;border-bottom:1px solid var(--line)}
.option-facts dt{font-family:var(--font-mono);font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.option-facts dd{margin:.15rem 0 0;font-size:var(--text-sm);font-weight:500}
.option-times{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.option-times li{font-size:.75rem;padding:.25rem .6rem;border:1px solid var(--line);border-radius:var(--radius-full);color:var(--muted);background:var(--bg)}
.option-extra,.option-note{margin-top:auto;font-size:var(--text-sm);color:var(--muted);padding-top:.5rem}
.option-extra .mono{font-size:.7rem;color:var(--ai);text-transform:uppercase;letter-spacing:.05em;margin-right:.4rem;border:1px solid color-mix(in srgb,var(--ai) 40%,transparent);padding:.15rem .45rem;border-radius:var(--radius-full)}
@media (max-width:1100px){.options{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.options{grid-template-columns:1fr}}

.addons{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.addon-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
.addon-list li{border-top:1px solid var(--ink);padding-top:1rem;display:grid;gap:.35rem}
.addon-list strong{font-weight:600}
.addon-list span{font-size:var(--text-sm);color:var(--muted)}
@media (max-width:900px){.addons{grid-template-columns:1fr}.addon-list{grid-template-columns:1fr}}

/* Neutral compare */
.compare-neutral{min-width:880px}
.compare-neutral td::before{display:none}
.compare-neutral thead th{color:var(--ink);font-family:var(--font-display);font-size:var(--text-lg);font-weight:500}
.compare-neutral tbody th{width:22%}
.compare-neutral td{width:19.5%}
.compare-neutral .tag-human,.compare-neutral .tag-ai,.compare-neutral .tag-mix{color:var(--ink);font-weight:500}
.compare-neutral .tag-human::before,.compare-neutral .tag-ai::before,.compare-neutral .tag-mix::before{display:inline-block!important;content:"";width:8px;height:8px;border-radius:50%;margin-right:.5rem;vertical-align:middle}
.compare-neutral .tag-human::before{background:var(--human)}
.compare-neutral .tag-ai::before{background:var(--ai)}
.compare-neutral .tag-mix::before{background:linear-gradient(90deg,var(--ai) 50%,var(--human) 50%)}
@media (max-width:760px){
  .compare-neutral{min-width:0}
  .compare-neutral tbody th{width:auto}
  .compare-neutral td{width:auto;display:block}
  .compare-neutral td::after{display:block;margin-bottom:.15rem}
  .compare-neutral td{display:flex;flex-direction:column-reverse}
  .compare-neutral td.tag-human,.compare-neutral td.tag-ai,.compare-neutral td.tag-mix{display:flex}
  .compare-neutral .tag-human::before,.compare-neutral .tag-ai::before,.compare-neutral .tag-mix::before{display:none!important}
}

/* Quiz */
.quiz-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.quiz{margin-top:var(--space-8);display:flex;flex-direction:column;gap:1.5rem}
.quiz fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.quiz legend{font-weight:600;margin-bottom:.7rem;padding:0;width:100%}
.quiz label{position:relative;cursor:pointer;font-size:var(--text-sm);padding:.6rem 1rem;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);transition:border-color .2s,background .2s,color .2s}
.quiz label:hover{border-color:var(--muted)}
.quiz input{position:absolute;opacity:0;pointer-events:none}
.quiz label:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.quiz label:has(input:focus-visible){outline:2px solid var(--human);outline-offset:3px}
.quiz-result{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.quiz-state{font-size:var(--text-xs);color:var(--faint)}
.fit-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.fit-list li{padding:.9rem 0;border-top:1px solid var(--line)}
.fit-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.fit-head b{font-weight:600}
.fit-label{font-family:var(--font-mono);font-size:.72rem;color:var(--faint);white-space:nowrap}
.fit-bar{margin-top:.55rem;height:6px;border-radius:var(--radius-full);background:var(--surface-2);overflow:hidden}
.fit-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:inherit;transition:width .6s var(--ease)}
.fit-why{margin-top:.5rem;font-size:var(--text-sm);color:var(--muted);min-height:0}
.fit-why:empty{display:none}
.fit-list li[data-level="3"] .fit-label{color:var(--ai)}
.fit-list li[data-level="3"] .fit-bar i{background:var(--ai)}
.fit-list li[data-level="2"] .fit-bar i{background:var(--muted)}
.fit-list li[data-level="1"] .fit-bar i{background:var(--faint)}
.quiz-foot{font-size:var(--text-xs);color:var(--faint)}
.quiz-result .btn{align-self:flex-start}
@media (max-width:900px){.quiz-grid{grid-template-columns:1fr}.quiz-result{position:static}}

/* Werkwijze */
.werkwijze-section{border-top:1px solid var(--line)}
.steps-5{grid-template-columns:repeat(5,1fr)}
.step-human{background:var(--card-dark)!important;color:var(--card-dark-text)}
.step-human p{color:var(--card-dark-muted)!important}
.step-human .step-num{color:#FF8A70}
@media (max-width:1100px){.steps-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.steps-5{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps-5{grid-template-columns:1fr}}

/* Diensten */
.feature-by{margin-top:.8rem;font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.other-services{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,4vw,4rem)}
.other-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.other-grid article{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.25rem}
.other-grid h3{font-size:var(--text-base);font-weight:600}
.other-grid p{margin-top:.4rem;font-size:var(--text-sm);color:var(--muted)}
@media (max-width:900px){.other-services{grid-template-columns:1fr}}
@media (max-width:560px){.other-grid{grid-template-columns:1fr}}

.app-note a{color:var(--ink)}

/* Tarieven */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch}
.rate-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem;display:flex;flex-direction:column;gap:.5rem}
.rate-card h3{font-size:var(--text-lg);font-weight:600}
.rate-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin-top:.5rem}
.rate-table th{text-align:left;font-family:var(--font-mono);font-size:.7rem;font-weight:400;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;padding:.5rem 0;border-bottom:1px solid var(--line)}
.rate-table td{padding:.6rem 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rate-table th:last-child,.rate-table td:last-child{text-align:right}
.rate-note{margin-top:.75rem;font-size:var(--text-sm);color:var(--muted)}
.rate-list{list-style:none;padding:0;margin:.5rem 0 1.5rem;display:flex;flex-direction:column;gap:.55rem;font-size:var(--text-sm);flex:1}
.rate-list li{padding-left:1.3rem;position:relative}
.rate-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ai)}
@media (max-width:860px){.rates{grid-template-columns:1fr}}

/* Contact */
.offices{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;font-size:var(--text-xs);color:var(--muted)}
.offices li{display:flex;justify-content:space-between;gap:1rem}
.offices a{text-decoration:none;color:var(--ink)}
.offices a:hover{color:var(--human)}
@media (max-width:440px){.offices{grid-template-columns:1fr}}

/* Footer */
.footer-logo{height:52px;width:auto}
.footer-base{margin-top:var(--space-8);font-size:var(--text-xs);color:var(--faint)}
.footer-numbers a{text-decoration:none}
.footer-numbers a:hover{color:var(--ink)}

/* Tarieven per pakket */
.rates-4{grid-template-columns:repeat(4,1fr);gap:1rem}
.rates-4 .rate-card{padding:1.5rem}
.rates-4 .price .amount{font-size:var(--text-xl)}
.rate-extra{margin-top:1.25rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.75rem;display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.rate-extra h3{font-size:var(--text-lg);font-weight:600}
.rate-extra .rate-table{margin-top:0}
@media (max-width:1100px){.rates-4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rates-4{grid-template-columns:1fr}.rate-extra{grid-template-columns:1fr}}
@media (min-width:621px){.rates-4 .plan-for{min-height:3em}}
.rates-4 .btn{white-space:nowrap}

/* Logo 150% met pay-off, boven en onder */
.header-inner{height:118px;padding-top:12px;padding-bottom:28px;box-sizing:border-box}
.brand-logo{height:78px}
html{scroll-padding-top:130px}
@media (max-width:960px){.main-nav{top:118px}}
@media (max-width:440px){.header-inner{height:114px;padding-top:10px;padding-bottom:26px}.brand-logo{height:78px}.main-nav{top:114px}}
.footer-logo{height:78px}
.footer-logo{margin-bottom:.75rem}
.stats dd{white-space:nowrap}

/* Prijzen in pakketkaarten */
.option-price{padding:.85rem 0 .15rem;border-top:1px solid var(--line)}
.option-price .amount{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.option-price .per{margin-top:.3rem;font-size:var(--text-xs);color:var(--muted);line-height:1.45}
.option-tagged{position:relative;border-color:var(--human)}
.option-tag{position:absolute;top:-.7rem;left:1.25rem;font-size:.68rem;color:#fff;background:var(--human);padding:.2rem .6rem;border-radius:var(--radius-full);white-space:nowrap}
.rate-card.option-tagged{border-color:var(--human)}
@media (min-width:1101px){.option-lead{min-height:8em}.option-price{min-height:7.4rem}}

/* Diensten: 8 kaarten in 4 kolommen */
@media (min-width:1101px){.features{grid-template-columns:repeat(4,1fr)}}

/* Voor wie: lopende tekst i.p.v. kaders */
.sectors-text{max-width:62ch;font-size:var(--text-base)}

/* Opdrachtgevers-logo's */
.logo-marquee{margin-top:clamp(2.5rem,5vw,4rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.client-logos{list-style:none;padding:0;margin:0;display:flex;width:max-content;animation:logo-float var(--marquee-dur,120s) linear infinite}
.logo-marquee:hover .client-logos{animation-play-state:paused}
.client-logos li{flex:0 0 auto;width:clamp(170px,30vw,380px);height:120px;display:flex;align-items:center;justify-content:center;padding:0 1.5rem}
.client-logos img{max-height:82px;max-width:230px;width:auto;height:auto;opacity:.7;transition:opacity .2s}
.client-logos li:hover img{opacity:1}
[data-theme="dark"] .client-logos img{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .client-logos img{filter:invert(1)}}
@keyframes logo-float{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){.client-logos li{width:46vw;height:90px;padding:0 .75rem}.client-logos img{max-height:58px;max-width:150px}}
@media (prefers-reduced-motion:reduce){.logo-marquee{-webkit-mask-image:none;mask-image:none}.client-logos{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.client-logos li[aria-hidden]{display:none}}

/* Tarieven samengevoegd met pakketten */
.option-btn{margin-top:.5rem}
#pakketten .rate-extra{margin-top:clamp(2.5rem,5vw,4rem);scroll-margin-top:110px}
#pakketten .fineprint{margin-top:2rem}

/* Over ons */
.about-section{border-top:1px solid var(--line)}
.about-text{max-width:72ch}
.about-sign{margin-top:1.5rem;font-weight:600;color:var(--ink)}

/* Diensten: rode accenten */
.features .feature{border-top:2px solid var(--human)}
.features .feature-by{color:var(--human);font-weight:500}

/* Contact: labels in rood */
a.contact-line > span.mono{color:var(--human)}
.footer-numbers{align-content:start}
.about-text+.about-text{margin-top:1rem}
.bleed img[src*="team.webp"]{object-position:50% 8%}

/* Vergelijking: op mobiel inklapbaar per kenmerk */
@media (max-width:760px){
  .compare-neutral tbody{gap:.5rem}
  .compare-neutral tbody th{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:0;user-select:none}
  .compare-neutral tbody th::after{content:"";flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--human);border-bottom:2px solid var(--human);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
  .compare-neutral tr.open th{border-bottom:1px solid var(--line)}
  .compare-neutral tr.open th::after{transform:rotate(-135deg);margin-top:4px}
  .compare-neutral tr:not(.open) td{display:none}
  .compare-neutral tbody th:focus-visible{outline:2px solid var(--human);outline-offset:-2px}
  .compare-section .compare-toggle-all{display:inline-flex}
}
.compare-toggle-all{display:none;margin:0 0 1rem;background:none;border:0;padding:0;font:inherit;font-size:var(--text-sm);color:var(--human);text-decoration:underline;text-underline-offset:3px;cursor:pointer}


/* Klantlogo's: een voor een in het midden */
.logo-marquee.is-carousel{position:relative;height:150px}
.logo-marquee.is-carousel .client-logos{animation:none;width:100%;height:100%;position:relative;display:block}
.logo-marquee.is-carousel .client-logos li{position:absolute;inset:0;width:auto;height:auto;padding:0;opacity:0;transform:translateX(min(48vw,560px));transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease-out;pointer-events:none}
.logo-marquee.is-carousel .client-logos li.is-in{opacity:1;transform:translateX(0);pointer-events:auto}
.logo-marquee.is-carousel .client-logos li.is-out{opacity:0;transform:translateX(calc(-1 * min(48vw,560px)))}
.logo-marquee.is-carousel .client-logos li:not(.is-in):not(.is-out){transition:none}
.logo-marquee.is-carousel .client-logos img{max-height:96px;max-width:260px;opacity:.8}
@media (max-width:560px){.logo-marquee.is-carousel{height:110px}.logo-marquee.is-carousel .client-logos img{max-height:66px;max-width:180px}}

/* Pakket Mens: tijdvakken met toeslag */
.option-times-title{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.option-times--priced{display:block;border-top:1px solid var(--line)}
.option-times--priced li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:.45rem 0;font-size:.82rem;color:var(--ink)}
.option-times--priced .surcharge{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:400;color:var(--ink)}
.option-times--priced .surcharge.is-included{font-weight:600}

/* Geen strepen tussen secties; gelijke afstanden */
.statement,.werkwijze-section,.about-section{border-top:0}
.compare-section,.features-section{border-block:0}
.hero{padding-bottom:clamp(var(--space-16), 9vw, 8.5rem)}
.hero + .section,
.section:not(.compare-section):not(.features-section) + .section:not(.compare-section):not(.features-section){padding-top:0}
.option-extra--priced{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.option-extra--priced .surcharge{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-size:.82rem}
.option-extra--priced{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.option-extra--priced .mono{margin-right:0}
.option-extra-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;width:100%}
.nowrap{white-space:nowrap}

/* Klantlogo's: visueel even groot (gelijk oppervlak als RAI) */
.logo-marquee.is-carousel .client-logos img{width:var(--w,160px);height:auto;max-width:90%;max-height:none}
@media (max-width:560px){.logo-marquee.is-carousel .client-logos img{width:calc(var(--w,160px) * .7)}}
.logo-marquee.is-carousel{height:170px}
@media (max-width:560px){.logo-marquee.is-carousel{height:120px}}

/* Mobiele header: logo proportioneel schalen, knoppen compacter */
@media (max-width:560px){
  .header-inner{gap:.75rem}
  .brand{flex:1 1 auto;min-width:0}
  .brand-logo{width:100%;max-width:268px;height:auto;aspect-ratio:777/226;object-fit:contain}
  .header-actions{flex-shrink:0;gap:.35rem}
  .header-actions .lang-switch{height:34px;min-width:34px;padding:0 .55rem}
  .header-actions .theme-toggle,.header-actions .menu-toggle{width:34px;height:34px}
}
@media (max-width:360px){.footer-numbers{grid-template-columns:1fr}}