/* ============================================================
   Hoe-werkt-het — eigen layout, bewust afwijkend van de homepage.
   Mobile-first; desktop-regels onderaan in de media query.
   Geen iconen: typografie, ruimte, kaarten en beweging.
   ============================================================ */

/* ---------- Hero: split (copy + transformatie-visual) ---------- */
.hw-hero { padding-top: var(--space-6); }
.hw-hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hw-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 8vw, 3.4rem);
    line-height: var(--leading-tight);
    margin: var(--space-2) 0 var(--space-4);
    color: var(--color-text);
}
.hw-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Stevige bold op de display-koppen en cijfers. Space Grotesk gaat maar tot
   700 en dat oogt licht; een fijne text-stroke in dezelfde kleur verdikt de
   letters zodat de koppen écht bold ogen — zonder van font te wisselen. */
.hw-hero-title,
.hw-feature-title,
.hw-cta-band h2,
.hw .section-title,
.hw-step-num,
.hw-calc-figure,
.hw-calc-net,
.hw-roi-punch {
    font-weight: 700;
    -webkit-text-stroke: 0.9px currentColor;
    text-stroke: 0.9px currentColor;
}
.hw-step-copy h3,
.hw-card-label,
.hw .tile-title,
.hw .faq-item summary { font-weight: 700; }

/* ---------- Kaart-basis voor de visuals ---------- */
.hw-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}
.hw-card-label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--color-text-muted);
}
.hw-said-quote {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    margin: 0;
    color: var(--color-text);
}
.hw-said-sm { font-size: var(--text-lg); }

/* Spraakgolf (puur CSS, geen icoon) */
.hw-wave { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-top: var(--space-4); }
.hw-wave-lg { height: 36px; }
.hw-wave span {
    flex: 1;
    min-width: 2px;
    height: 25%;
    background: var(--color-orange);
    border-radius: 2px;
    animation: hw-wave 1.1s var(--easing-in-out) infinite;
}
.hw-wave span:nth-child(2)  { animation-delay: .08s; }
.hw-wave span:nth-child(3)  { animation-delay: .16s; }
.hw-wave span:nth-child(4)  { animation-delay: .24s; }
.hw-wave span:nth-child(5)  { animation-delay: .32s; }
.hw-wave span:nth-child(6)  { animation-delay: .40s; }
.hw-wave span:nth-child(7)  { animation-delay: .48s; }
.hw-wave span:nth-child(8)  { animation-delay: .40s; }
.hw-wave span:nth-child(9)  { animation-delay: .32s; }
.hw-wave span:nth-child(10) { animation-delay: .24s; }
.hw-wave span:nth-child(11) { animation-delay: .16s; }
.hw-wave span:nth-child(12) { animation-delay: .08s; }
@keyframes hw-wave { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* Verbinding tussen "jij zegt" en "Daphne maakt" */
.hw-connector {
    justify-self: center;
    width: 2px;
    height: var(--space-6);
    background: linear-gradient(var(--color-orange), rgba(255, 118, 54, 0));
}

/* Mini-factuur */
.hw-invoice-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.hw-invoice-total {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-text);
}
.hw-pill {
    display: inline-block;
    margin: var(--space-4) 0 0;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-orange-soft);
    color: var(--color-orange);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ---------- Drie stappen als alternerende rijen ---------- */
.hw-steps { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.hw-step-row { display: grid; gap: var(--space-5); padding: var(--space-6) 0; }
.hw-step-row + .hw-step-row { border-top: 1px solid var(--color-border); }
.hw-step-num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1;
    color: var(--color-orange);
}
.hw-step-copy h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    margin: var(--space-3) 0 var(--space-3);
    color: var(--color-text);
}
.hw-step-copy p { margin: 0; color: var(--color-text-secondary); line-height: var(--leading-relaxed); }

/* ---------- Feature-rijen (zig-zag) ---------- */
.hw-feature { display: grid; gap: var(--space-5); padding: var(--space-7) 0; }
.hw-feature + .hw-feature { border-top: 1px solid var(--color-border); }
.hw-feature-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-text);
}
.hw-feature-copy p { margin: 0; color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.hw-feature-copy p + p { margin-top: var(--space-3); }

.hw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hw-chips span {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-orange-soft);
    color: var(--color-orange);
    font-size: var(--text-sm);
    font-weight: 600;
}
.hw-branch { display: grid; gap: var(--space-3); }
.hw-branch-card p:last-child { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---------- Integratie-strip ---------- */
.hw-center { text-align: center; }
.hw-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5) var(--space-7);
    margin: var(--space-6) 0 var(--space-4);
}
.hw-logos img {
    height: 28px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--motion-base) var(--easing-out);
}
.hw-logos img:hover { opacity: 1; }

/* ---------- Oranje CTA-band ---------- */
.hw-cta-band {
    background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-hover) 100%);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-glow-orange);
}
.hw-cta-band h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: 0 0 var(--space-3);
}
.hw-cta-band p { color: rgba(255, 255, 255, 0.88); margin: 0 0 var(--space-5); }
.hw-cta-band .btn { background: var(--color-white); color: var(--color-orange); box-shadow: none; }
.hw-cta-band .btn:hover { background: var(--color-orange-soft); color: var(--color-orange-hover); }

/* ---------- Desktop ---------- */
@media (min-width: 880px) {
    .hw-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-9); }

    .hw-step-row { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--space-8); padding: var(--space-7) 0; }
    /* Alternerend: bij --flip staat de visual links, de tekst rechts */
    .hw-step-row--flip .hw-step-copy { order: 2; }
    .hw-step-row--flip .hw-visual { order: 1; }

    .hw-feature { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--space-8); }
    .hw-feature--flip .hw-feature-copy { order: 2; }
    .hw-feature--flip .hw-feature-visual { order: 1; }

    .hw-branch { grid-template-columns: 1fr 1fr; }
    .hw-cta-band { padding: var(--space-9) var(--space-8); }
}

/* ---------- Gecentreerde hero + prijzen-blokken ---------- */
.hw-breadcrumbs-center { display: flex; justify-content: center; }
.hw-lead-center { max-width: var(--content-medium); margin-left: auto; margin-right: auto; }

.hw-roi { max-width: var(--content-medium); margin: 0 auto; text-align: center; }
.hw-roi-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.hw-roi-punch { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--color-orange); margin: 0 0 var(--space-3); }
.hw-card-foot { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.hw-allin { max-width: var(--content-medium); margin: var(--space-5) auto 0; }
.hw-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hw-check li { position: relative; padding-left: var(--space-6); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.hw-check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-orange);
}
@media (min-width: 880px) {
    .hw-check { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
}

/* ---------- Interactieve terugverdien-calculator (prijzen) ---------- */
.hw-calc { max-width: var(--content-medium); margin: 0 auto; }
.hw-calc-controls { display: grid; gap: var(--space-5); margin: var(--space-2) 0 var(--space-5); }
.hw-calc-label { display: block; margin-bottom: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); }
.hw-calc-label strong { color: var(--color-orange); font-family: var(--font-display); font-size: var(--text-lg); }
.hw-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-orange-soft);
    outline: none;
}
.hw-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-orange);
    cursor: pointer;
    box-shadow: 0 2px 8px var(--color-orange-shadow);
    transition: transform var(--motion-fast) var(--easing-out);
}
.hw-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.hw-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--color-orange);
    cursor: pointer;
}
.hw-calc-bar {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-orange-soft);
    overflow: hidden;
    margin: var(--space-5) 0;
}
.hw-calc-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-orange), var(--color-orange-hover));
    transition: width var(--motion-slow) var(--easing-out);
}
.hw-calc .hw-card-foot { text-align: center; margin-top: var(--space-5); }

/* Prominente netto-besparing (de hoofdboodschap) */
.hw-calc-hero { text-align: center; margin: var(--space-6) 0 var(--space-5); }
.hw-calc-net {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 11vw, 4rem);
    line-height: 1;
    color: var(--color-orange);
}
.hw-calc-net-cap {
    display: block;
    max-width: 28ch;
    margin: var(--space-3) auto 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.hw-calc-action { text-align: center; margin-top: var(--space-6); }
.hw-calc-action .btn { min-width: 220px; }
.hw-calc-action-note { display: block; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.hw-calc-stats { display: grid; gap: var(--space-4); text-align: center; }
.hw-calc-figure { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-text); }
.hw-calc-cap { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 640px) {
    .hw-calc-controls { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
    .hw-calc-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tussentijdse CTA-strip (conversie midden in de pagina) ---------- */
.hw-cta-strip {
    display: grid;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-orange-soft);
    border: 1px solid var(--color-orange-glow);
}
.hw-cta-strip-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}
.hw-cta-strip-sub { margin: 0; color: var(--color-text-secondary); }
.hw-cta-strip .btn { justify-self: start; }
@media (min-width: 720px) {
    .hw-cta-strip { grid-template-columns: 1fr auto; column-gap: var(--space-7); }
    .hw-cta-strip .btn { justify-self: end; white-space: nowrap; }
}

/* ---------- Prose-secties (sectorpagina's: situatie / waarom / voorbeeld) ---------- */
.hw-prose { max-width: var(--content-medium); }
/* Artikel-leeskolom: gecentreerd in de wide-band voor comfortabel lezen. */
.hw-article { margin-left: auto; margin-right: auto; }
.hw-article .hub-grid { margin-top: var(--space-5); }
.hw-prose p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.hw-prose p:last-child { margin-bottom: 0; }
.hw-prose strong { color: var(--color-text); }
.hw-prose ul { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.hw-prose li { position: relative; padding-left: var(--space-6); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.hw-prose li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-orange);
}
.hw-prose h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    margin: var(--space-5) 0 var(--space-4);
    color: var(--color-text);
}
.hw-prose h2:first-child { margin-top: 0; }
/* Gesproken zinnen in het voorbeeld als oranje-geaccentueerde quote-kaarten */
.hw-prose blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-orange);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--leading-snug);
}

/* ---------- Geanimeerde stukjes — bewust verschillend van vorm én plek ---------- */

/* Roterend sectorwoord, IN de titel — sector-hub */
.hw-rotate { display: inline-block; color: var(--color-orange); min-width: 1ch; }

/* Hero met achtergrond-laag (voor de spraakgolf-lijn) */
.hw-hero-bg { position: relative; overflow: hidden; }
.hw-hero-bg > .container { position: relative; z-index: 1; }

/* Spraakgolf-lijn ONDERAAN de hero, full-width — roadmap-sectoren */
.hw-waveline { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; display: flex; align-items: flex-end; gap: 3px; padding: 0 var(--space-4); opacity: .45; z-index: 0; }
.hw-waveline span { flex: 1; min-width: 2px; height: 18%; border-radius: 2px 2px 0 0; background: var(--color-orange); animation: hw-wave 1.3s var(--easing-in-out) infinite; }
.hw-waveline span:nth-child(odd) { animation-delay: .15s; }
.hw-waveline span:nth-child(3n) { animation-delay: .35s; }
.hw-waveline span:nth-child(5n) { animation-delay: .55s; }
.hw-waveline span:nth-child(7n) { animation-delay: .75s; }

/* Onderlijn die zichzelf tekent ONDER de titel — kennisartikels */
.hw-underline { display: inline; background-image: linear-gradient(var(--color-orange), var(--color-orange)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 5px; padding-bottom: 8px; animation: hw-draw 1s ease forwards .35s; }
@keyframes hw-draw { to { background-size: 100% 5px; } }

/* Meetellende cijfers (scroll-trigger) — boekhoudsoftware-hub, integraties, peppol */
.hw-count { display: flex; gap: var(--space-7); justify-content: center; flex-wrap: wrap; text-align: center; }
.hw-count-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; color: var(--color-orange); -webkit-text-stroke: .5px var(--color-orange); }
.hw-count-label { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---------- Respecteer reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hw-wave span,
    .hw-waveline span { animation: none; }
    .hw-underline { animation: none; background-size: 100% 5px; }
}