/* Synero Homepage Styles */

/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --primary-light: #818CF8;
    --secondary: #A855F7;
    --text-dark: #1F2937;
    --text-gray: #6B7280;
    --text-light: #9CA3AF;
    --bg-white: #FFFFFF;
    --bg-gray: #F9FAFB;
    --bg-dark: #111827;
    --border: #E5E7EB;
    --success: #10B981;

    /* ÉÉN PAGINABREEDTE, ÉÉN PLEK.
       De navigatie stond op 1200px terwijl de hero na de kopfix op 1400px kwam. Gevolg: het logo
       begon 100px verder naar rechts dan de titel eronder, en dat is precies zichtbaar omdat ze
       recht boven elkaar staan. Nu leest alles dezelfde variabele, zodat nav, hero en de secties
       eronder per definitie dezelfde linkerrand hebben en die niet opnieuw uit elkaar kunnen lopen.
       De prijspagina en de demopagina lezen hem ook (die stonden op 1160 en 1100). */
    --page-max: 1400px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background: var(--bg-white);

    /* GEEN ZIJWAARTS SCHUIVEN. Eén element dat een paar pixels te breed is maakt de HELE pagina
       schuifbaar, en op een telefoon voelt dat als een kapotte site. `clip` en niet `hidden`:
       hidden maakt van het element een scroll-container, waardoor `position: sticky` erbinnen
       niet meer plakt — en de balk op /prijs is sticky. */
    overflow-x: clip;
}

/* Een afbeelding zonder breedtebeperking is de meest voorkomende oorzaak van die paar pixels. */
img {
    max-width: 100%;
}

.container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==================== NAVIGATION ==================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

.nav-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Het echte logo (client/public/synero-logos.webp, 640x128 met alfakanaal). De hoogte stuurt,
   de breedte volgt de verhouding — het bestand is veel groter dan het hier getoond wordt, dus
   width/height in de HTML staan er alleen om layout shift te voorkomen. */
.nav-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo-img {
    /* 22px, niet 30px: dezelfde maat als het woordmerk in de kop van de app (nav.js:
       max-height 22px, op een telefoon 20px), zodat het logo op de homepage niet groter is dan
       op de demopagina's ernaast. */
    height: 22px;
    width: auto;
    display: block;
}

/* .logo-text bestaat niet meer op deze pagina: het logo DRAAGT het woordmerk al, dus de tekst
   ernaast was het merk twee keer. */

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-gray);
    font-weight: 500;
    transition: color 0.2s;

}

.nav-links a:hover {
    color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: white !important;
    /* 8px 20px in plaats van 10px 24px: de knop was 48px hoog naast een logo van 22px en
       tekstlinks van 16px, en drukte daarmee de hele balk hoger. Nu 44px. */
    padding: 8px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background: white !important;
    color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* ==================== HERO SECTION ==================== */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #F9FAFB 0%, #EEF2FF 100%);
}



/* Breder dan de andere secties (1200px), en dat is opzet. De kop moet op TWEE regels passen —
   "Bestellen zonder wachten." en "Werken zonder chaos." elk op één regel — en in een kolom van
   544px brak elke zin doormidden, dus stonden er vier. Meer breedte lost dat op zonder de
   letters kleiner te maken dan ze verdienen, en de afbeelding wordt er meteen groter van. */
.hero-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* De tekstkolom van de hero. Een leesregel van ~52 tekens leest prettiger dan de volle
   kolombreedte; zonder deze regel liep de beschrijving tot aan de rand. */
/* De BESCHRIJVING krijgt de leesbreedte, niet de hele kolom — anders knijpt hij ook de kop af,
   en dat was de tweede helft van de reden dat die in vier regels brak. */
.hero-content {
    max-width: none;
}

.hero-description {
    max-width: 34rem;
}

/* clamp() in plaats van één vaste maat: hij schaalt mee met het scherm en kan dus niet net te
   groot worden voor de kolom, wat precies is wat de kop in vier regels brak. De bovengrens van
   46px past met ruimte over in de kolom van ~652px die de grid hierboven geeft. */
.hero-title {
    /* Ondergrens 18px, niet 21px. Op een scherm van 320px (iPhone SE) bond die 21px, terwijl 6vw
       daar 19,2px geeft — en 21px maakte de langste zin 289px breed in 272px beschikbaar, dus brak
       de kop daar alsnog in vieren. Nu regeert de vw-waarde tot ver onder wat mensen gebruiken.

       6.5vw met letter-spacing -0.02em (was 6vw zonder): een maat groter op een telefoon, en nog
       steeds twee regels. Gemeten: 360px 23px/2 regels, 390px 25px/2, 414px 27px/2. Op 320px
       breekt 6.5vw in drie; daar geldt de 6.2vw-regel onderaan dit bestand. Zonder de lettering
       gaf 6.5vw al op 390px drie regels — die 2% is precies het verschil. */
    font-size: clamp(18px, 6.5vw, 46px);
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 24px;
    color: var(--text-dark);
    text-wrap: balance;   /* genegeerd door oudere browsers; daar verandert er niets */
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-gray);
    margin-bottom: 32px;
    line-height: 1.7;
}

/* `flex-wrap` stond er niet, en zonder dat wringen twee knoppen zich op een smal scherm samen in
   plaats van onder elkaar te gaan — de tekst wordt dan geknepen in plaats van netjes af te breken. */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 48px;
}

.btn-hero-primary, .btn-hero-secondary {
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(15px, 1.3vw, 17px);
    transition: all 0.2s;
    display: inline-block;
}

.btn-hero-primary {
    background: var(--primary);
    color: white;
}

.btn-hero-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-hero-secondary {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-hero-secondary:hover {
    background: var(--primary);
    color: white;
}

/* De drie cijfers staan naast elkaar op hun EIGEN breedte, niet elk in een derde van de kolom.
   Met `repeat(3, 1fr)` kreeg elk blokje ~200px terwijl de inhoud er de helft van is, dus stonden
   ze onnodig ver uit elkaar. `max-content` laat elke kolom precies zo breed zijn als zijn tekst en
   `justify-content: start` schuift het geheel tegen de linkerrand — dezelfde rand als de kop.
   Op een telefoon wint de regel in het 768px-blok, die ze wél over de volle breedte verdeelt. */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 36px;
}

.stat {
    text-align: center;
}

/* `white-space: nowrap` is hier geen sier: "30 dagen" brak op de spatie en stond onder elkaar.
   Het telt bovendien op bij het scrollen ("0 dagen" -> "30 dagen"), dus de tekst wordt tijdens de
   animatie breder — een maat die net past, past halverwege dus niet meer.
   clamp() houdt hem binnen zijn kolom op elke schermbreedte. */
.stat-number {
    font-size: clamp(15px, 4.6vw, 30px);
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 2px;   /* stond op 8px; cijfer en bijschrift horen bij elkaar */
    white-space: nowrap;
    line-height: 1.15;    /* de standaard 1.6 van body zette er nog eens ruimte onder */

    /* Cijfers even breed. Zonder dit heeft elk cijfer zijn eigen breedte en wiebelt de tekst bij
       ELKE stap van de telling, ook als de lengte gelijk blijft: "76%" en "91%" zijn evenveel
       tekens maar niet even breed. */
    font-variant-numeric: tabular-nums;
}

/* HET BIJSCHRIFT MAG NIET MEEBEWEGEN MET DE TELLING.
   De kolommen zijn `max-content`, dus de kolombreedte volgt de tekst. De teller in main.js
   herschrijft die tekst 2000 ms lang ("0 dagen" -> "30 dagen"), de kolom groeit mee, en het
   bijschrift eronder schuift die twee seconden mee naar zijn plaats.

   Dit is een schaduwkopie van de EINDtekst met hoogte nul: hij telt wel mee voor de breedte van
   de kolom, maar neemt geen verticale ruimte in en is onzichtbaar. Daardoor staat de kolom vanaf
   het eerste beeld al op zijn eindmaat en staat het bijschrift meteen gecentreerd onder waar het
   cijfer zal eindigen.

   `data-eind` wordt door main.js gezet uit de tekst die er al stond, vlak voordat de animatie hem
   overschrijft — de eindwaarde staat dus op één plek in de HTML en niet twee keer. Ontbreekt het
   attribuut (geen JS), dan geeft attr() een lege tekst en doet deze regel niets; de tekst staat
   dan toch al op zijn eindwaarde. */
.stat-number::before {
    content: attr(data-eind);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.stat-label {
    font-size: clamp(11px, 1vw, 13px);
    color: var(--text-gray);
}

/* HET HERO-BEELD.
   Hier stond .hero-card: een in CSS nagemaakte "interface" van drie pulserende grijze balkjes.
   Die suggereerde een product zonder er iets van te tonen. Nu een echte afbeelding van het
   bestelscherm in drie toestellen (client/public/hero-devices.webp).

   De figuur wordt `hidden` als dat bestand ontbreekt (zie de onerror in de HTML); de hero valt
   dan terug op één kolom in plaats van een gebroken-afbeeldingsicoon te tonen. */
.hero-visual {
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* HOGER EN GROTER OP EEN BREED SCHERM.
   De hero staat op `align-items: center`, dus het beeld hing op halve hoogte naast de tekst. Met
   `align-self: start` plus een negatieve bovenmarge komt het omhoog, tot boven de bovenkant van de
   tekstkolom uit. Alleen vanaf 1025px: daaronder staat het beeld ONDER de tekst en zou omhoog
   schuiven het over de knoppen heen trekken. */
/* ÉÉN desktopblok voor de hele hero. Eerst stonden hier twee losse
   `@media (min-width: 1025px)`-blokken; dat werkt wel, maar het verdeelt bij elkaar horende regels
   over het bestand en elke lezer (en elke controle) die "het desktopblok" zoekt vindt er dan maar
   één van de twee. */
@media (min-width: 1025px) {
    /* DE GEKLEURDE BAND HOUDT ZIJN HOOGTE.
       Door de kleinere typografie werd de hero-inhoud zo'n 200px korter — de kop ging van vier naar
       twee regels — en daarmee kromp de band mee. Op een breed scherm zag dat er geknepen uit.
       `min(...)` zorgt dat hij op een lage laptopresolutie niet het hele beeld vult. */
    .hero {
        /* 100vh, niet min(76vh, 720px): die 720px-bovengrens bond op een gewoon pc-scherm, dus
           daar hield de gekleurde band op ruim voor de onderkant. Nu vult hij het beeld precies.
           `box-sizing: border-box` staat in de reset, dus de padding hierboven zit IN deze hoogte
           en telt er niet bovenop. */
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    .hero > .hero-container {
        flex: 1;
    }

    /* Bovenaan uitgelijnd met de tekstkolom, niet verticaal gecentreerd.
       De -56px die hier eerst stond tilde het beeld véél te ver op: de tekstkolom en het beeld zijn
       ongeveer even hoog, dus `align-self: start` alleen zit al bijna op dezelfde hoogte als
       centreren — die negatieve marge kwam er dus volledig bovenop.
       Nu een positieve marge in plaats van een grote negatieve. Twee redenen om hem niet op 0 te
       zetten: de h1 heeft `line-height: 1.12`, dus er zit loze ruimte boven de hoofdletters, en
       met de kaders exact gelijk hangt het beeld optisch nog steeds te hoog. 32px zet de toestellen
       ongeveer op ooghoogte met de eerste alinea in plaats van met de kop. */
    .hero-visual {
        align-self: start;
        margin-top: 32px;
    }

    /* Iets breder dan de kolom — dat maakt het beeld groter zonder de tekst te verdringen.
       De overloop wordt NIET gelijk verdeeld: 8% links tegen 4% rechts schuift het geheel naar
       links. Eerst stond hier alleen `margin-right: -12%`, waardoor alle overloop rechts zat en het
       beeld juist naar rechts opschoof.
       `overflow-x: clip` op body vangt af dat dit ooit zijwaarts schuiven veroorzaakt. */
    .hero-devices {
        width: 112%;
        margin-left: -8%;
        margin-right: -4%;
    }
}

.hero-visual[hidden] {
    display: none;
}

/* Zachte gloed achter de toestellen, in de merkkleuren. Puur decoratief, dus zonder eigen
   ruimte in de layout en zonder muisdoel. */
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 8% 4%;
    background: radial-gradient(60% 60% at 50% 50%,
                rgba(99, 102, 241, 0.22) 0%,
                rgba(168, 85, 247, 0.16) 45%,
                transparent 72%);
    filter: blur(46px);
    z-index: 0;
    pointer-events: none;
}

.hero-devices {
    position: relative;
    z-index: 1;
    /* Vult zijn kolom, die door de bredere hero-container (1400px) nu ~650px is in plaats van
       ~570px. De bovengrens staat hoog genoeg om die kolom nooit te knijpen. */
    width: 100%;
    height: auto;
    max-width: 820px;
    display: block;
    /* Een slagschaduw die de VORM van de PNG volgt, niet zijn kader. Bij een transparante
       achtergrond tekent box-shadow een zichtbare rechthoek om het niets heen. */
    filter: drop-shadow(0 24px 45px rgba(17, 24, 39, 0.18));
    animation: float 7s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Wie "verminderde beweging" heeft ingesteld krijgt geen zwevend beeld. Dat stond nergens op
   deze pagina, terwijl er wel animaties op draaien. */
@media (prefers-reduced-motion: reduce) {
    .hero-devices {
        animation: none;
    }
}

/* ==================== SECTIONS ==================== */
.features, .industries, .how-it-works, .demo-section, .contact {
    padding: 80px 0;
}

.section-title {
    /* Ondergrens 22px, niet 26px: op een telefoon is de paginakop (.hero-title) 25px, en een
       sectiekop hoort daar onder te blijven, niet erboven. Op een breed scherm verandert er niets. */
    font-size: clamp(22px, 3.4vw, 40px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--text-gray);
    text-align: center;
    margin-bottom: 64px;
}

/* ==================== FEATURES ==================== */
.features {
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.feature-card {
    padding: 32px;
    border-radius: 16px;
    background: var(--bg-gray);
    transition: all 0.3s;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    background: white;
}

/* ICONEN.
   Deze drie regels stuurden emoji aan met `font-size`. Emoji renderen per besturingssysteem
   anders, zijn niet in de merkkleur te zetten, en een pagina die er vol mee staat leest als
   automatisch gegenereerd. Nu lijniconen in een vierkant vlakje met een zachte merkachtergrond.

   De SVG's erven `currentColor` van .feature-icon, dus de kleur staat op één plek. */
.feature-icon,
.industry-icon,
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 14px;
    color: var(--primary);
    background: linear-gradient(135deg,
                rgba(99, 102, 241, 0.12) 0%,
                rgba(168, 85, 247, 0.12) 100%);
}

.feature-icon svg,
.industry-icon svg,
.contact-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-card h3 {
    font-size: clamp(18px, 1.6vw, 21px);
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* ==================== INDUSTRIES ==================== */
.industries {
    background: var(--bg-gray);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* FOTOBANNER MET HET ICOON EROP.
   De kaart was een grid dat icoon en kop naast elkaar zette. Nu draagt elke sector een echte foto
   en zit het icoon als wit plaatje linksboven OP dat beeld, op de plek waar het eerst stond.

   De padding is van de kaart naar .industry-body verhuisd: anders kan het beeld niet tot de rand
   doorlopen. overflow:hidden knipt de hoeken van de foto mee met de border-radius van de kaart. */
.industry-card {
    background: white;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

/* 2:1 terwijl de bronbeelden 3:2 zijn (1536x1024). object-fit:cover snijdt dus 128px van boven en
   van onder weg; bij deze vier is dat nagerekend op de originelen en blijft elk onderwerp heel.
   Het kleurverloop eronder is geen versiering maar de terugval: faalt het beeld bij een deploy,
   dan zet de onerror in de HTML de <img> op hidden en blijft er een merkvlak met het icoon staan
   in plaats van een gebroken kaart. */
.industry-media {
    position: relative;
    aspect-ratio: 2 / 1;
    background: linear-gradient(135deg,
                rgba(99, 102, 241, 0.14) 0%,
                rgba(168, 85, 247, 0.14) 100%);
}

.industry-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Het icoon erft van de gedeelde .industry-icon-regel een doorzichtig kleurverloop. Dat verdwijnt
   op een foto, dus hier wordt het een dekwit plaatje met een schaduw. Linksboven is bij alle vier
   de beelden mild van toon, maar niet gelijk: bij landbouw is het witte baksteen en bij resto een
   donkere plafondrand. Vandaar dekkend wit en niet doorzichtig. */
.industry-card .industry-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    margin-bottom: 0;
    background: white;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
}

.industry-body {
    padding: 26px 32px 32px;
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}



.industry-card h3 {
    font-size: clamp(19px, 1.8vw, 23px);
    margin-bottom: 12px;
}

.industry-card p {
    color: var(--text-gray);
    margin-bottom: 16px;
    line-height: 1.6;
}

.industry-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.industry-link:hover {
    color: var(--primary-dark);
}

/* ==================== HOW IT WORKS ==================== */
.how-it-works {
    background: white;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 64px;
}

.step {
    text-align: center;
}

.step-number {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 2vw, 26px);
    font-weight: 800;
    margin: 0 auto 24px;
}

.step h3 {
    font-size: clamp(18px, 1.6vw, 21px);
    margin-bottom: 12px;
}

.step p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* ==================== DEMO SECTION ==================== */
/* DE BAND MET DE DRIE SCHERMKNOPPEN DRAAGT DE STANDAARD SYNERO-ACHTERGROND.
   Hier stond een vlak kleurverloop. Nu de illustratie die ook op het inlogscherm van elke tenant
   staat (client/template/images/background.png, hier als WebP: 1,8 MB -> 64 KB, en de homepage
   draagt al een hero van 1,3 MB).

   Het kleurverloop is NIET weg, het ligt er nu overheen. Dat moet: de illustratie is licht
   (lavendel, met plekken van zuiver wit in het plafond en de toonbank) en de kop, de tekst en de
   drie knoppen zijn wit. Zonder tint valt wit op wit weg.

   De twee kleuren en hun dekking zijn UITGEREKEND, niet gekozen op het oog. Op de lichtste pixel
   van de illustratie (255,255,255 — het plafondlicht) geeft rgba(67,56,202,0.78) een contrast van
   4,5:1 met wit en rgba(91,33,182,0.74) 4,6:1; over het gemiddelde van de illustratie loopt dat op
   naar 6-7:1. Daarmee haalt zelfs het ongunstigste punt de 4,5:1 die gewone tekst nodig heeft.
   Ter vergelijking: de vlakke band die hier stond haalde 4,47:1 aan de --primary-kant en 3,96:1 aan
   de --secondary-kant. Deze band is dus beter leesbaar dan wat er stond, met het beeld erin.

   Een dieper paars aan het einde (#5B21B6 in plaats van #A855F7) is bewust: die brandkleur is te
   licht om wit te dragen, bij welke dekking dan ook. Met een diepere tint kan de DEKKING juist
   omlaag, en zie je meer van de illustratie.

   LICHTER GEMAAKT op 2026-09-13, op verzoek — en precies via die weg: de tint iets dieper, de
   dekking van 0,78/0,74 naar 0,66/0,62. Opnieuw uitgerekend: wit op het GEMIDDELDE van de
   illustratie haalt 4,82:1 (was 5,28), op de allerlichtste pixel 4,07:1 (was 4,74). Die laatste
   zit onder de 4,5 voor gewone tekst maar boven de 3:1 voor grote tekst, en de kop IS groot
   (26-40px). Het is een bewuste concessie voor de alinea van 15-18px op het ene lichtste punt;
   gewoon de dekking verlagen zonder de tint te verdiepen had 3,57:1 gegeven.

   Het OPPERVLAK verandert niet: de sectie houdt de 80px boven- en onderpadding uit de gedeelde
   sectieregel, dus de band is even hoog als hij was.

   `background-attachment` blijft standaard (scroll). `fixed` geeft op iOS Safari een bekend
   probleem waarbij de achtergrond springt of wordt uitgerekt. */
.demo-section {
    background:
        linear-gradient(135deg, rgba(55, 44, 170, 0.66) 0%, rgba(75, 25, 150, 0.62) 100%),
        url('/images/background.webp') center / cover no-repeat;
    color: white;
    text-align: center;
}

.demo-content h2 {
    font-size: clamp(26px, 3.4vw, 40px);
    margin-bottom: 16px;
}

.demo-content p {
    font-size: clamp(15px, 1.5vw, 18px);
    margin-bottom: 32px;
    /* Stond op 0.9. Sinds de tint over de foto lichter is (8a19563) las die 10% doorzichtigheid als
       grijzig in plaats van als "iets rustiger dan de kop". Vol wit: dat helpt ook het contrast op
       de lichtste pixel, waar die alinea het krapst zat. */
    opacity: 1;
}

.btn-demo {
    background: white;
    /* --primary-dark en niet --primary: #6366F1 op wit haalt 4,47:1 en dat is net onder de 4,5:1
       die deze tekstgrootte nodig heeft (18px op gewicht 600 telt niet als "grote tekst"; daarvoor
       moet het 18,66px vet of 24px zijn). #4F46E5 haalt 6,29:1 en staat al in de variabelen. */
    color: var(--primary-dark);
    padding: 16px 48px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    display: inline-block;
    transition: all 0.2s;
}

.btn-demo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* `btn-secondary` stond al op twee van de drie demoknoppen, maar er was NERGENS een regel voor —
   ook niet vóór deze herziening. Alle drie zagen er dus identiek uit, terwijl de bedoeling
   duidelijk was dat de klantweergave voorop staat en de andere twee ondergeschikt zijn.
   Gevonden doordat de controle elke class in de HTML tegen de stylesheet legt.

   DICHT, NIET DOORZICHTIG. Ze stonden op `background: transparent` met een witte rand. Op een vlak
   kleurverloop las dat nog als een knop; op de illustratie eronder ziet het eruit als een omlijnd
   stuk foto. Nu een vol vlak.

   PAARS OP 85%, WITTE TEKST — op verzoek van 2026-09-13; het lavendel (#EDE9FE) las als "wit met
   een paarse schijn". Nagerekend, want de vorige versie zette die lat: witte tekst op de knop haalt
   4,88:1 (donkere kant van de band) en 4,62:1 (lichte kant), allebei boven de 4,5:1 voor deze
   tekstgrootte. De KNOP tegen de band haalt maar 1,68:1 en 1,23:1 — de vulling verdwijnt bijna in
   de achtergrond, precies waar de vorige versie voor waarschuwde. Daarom blijft de witte rand van
   2px: die geeft de omtrek die de vulling niet geeft. Bij hover wordt de vulling dekkend. */
.btn-demo.btn-secondary {
    background: rgba(99, 102, 241, 0.85);   /* --primary op 85% */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}

.btn-demo.btn-secondary:hover {
    background: rgba(99, 102, 241, 1);
    border-color: white;
}

/* De drie demoknoppen stonden los naast elkaar en liepen op een smal scherm door elkaar.
   Nu een flex-rij die netjes afbreekt. */
.demo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.demo-note {
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.8;
}

.demo-more {
    margin-top: 14px;
}

.demo-more a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Het e-mailadres was platte tekst; op een telefoon wil je erop kunnen tikken. */
.contact-card a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.contact-card a:hover {
    text-decoration: underline;
}

/* ==================== CONTACT ==================== */
.contact {
    background: var(--bg-gray);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.contact-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s;
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}



.contact-card h3 {
    font-size: clamp(18px, 1.6vw, 21px);
    margin-bottom: 12px;
}

.contact-card p {
    color: var(--text-gray);
}

/* ==================== FOOTER ==================== */
.footer {
    background: var(--bg-dark);
    color: white;
    padding: 60px 0 24px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    text-decoration: none;
}

/* Hetzelfde bestand als in de nav. Het heeft een alfakanaal en het merkverloop is licht genoeg,
   dus het staat leesbaar op de donkere voet — geen aparte "witte" variant nodig. */
.footer-logo-img {
    height: 28px;
    width: auto;
    display: block;
}

.footer-brand p {
    color: var(--text-light);
    line-height: 1.6;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-column h4 {
    margin-bottom: 16px;
    font-size: 16px;
}

.footer-column a {
    display: block;
    color: var(--text-light);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: var(--text-light);
}


/* ==================== UITKLAPMENU (smalle schermen) ====================
   De knop zit ALTIJD in de HTML en wordt hier verborgen op breed. Andersom — hem met JS
   toevoegen — betekent dat iemand met JS uit helemaal geen menu heeft, en dat was precies de
   toestand die dit oplost. Aangestuurd door js/nav-menu.js. */

.nav-toggle {
    display: none;                 /* op breed: onzichtbaar, zie de media query onderaan */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;                   /* 44px is de kleinste maat die op een telefoon prettig raakt */
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--text-dark);
    transition: transform .25s ease, opacity .2s ease;
}

/* De drie streepjes worden een kruis. transform-origin op het midden, zodat ze om hetzelfde punt
   draaien en er geen sprongetje in zit. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bar { transition: none; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    /* DE GEKLEURDE BAND VULT OOK HIER HET SCHERM.
       Op een breed scherm stond dat al (`min-height: 100vh` in het 1025px-blok), op een telefoon
       niet — en juist daar kwam de band net tekort. Nagerekend op een toestel van 390x844: de
       hero komt uit op ongeveer 740px (120 padding + kop 80 + tekst 78 + knoppen 46 + cijfers 60 +
       tussenruimte 48 + het beeld 228 op 342px breed + 80 padding) tegen ~780px zichtbaar onder de
       navigatiebalk. Hij eindigde dus enkele tientallen pixels boven de vouw, met wit eronder.

       `dvh` en niet alleen `vh`: op een telefoon telt `vh` de adresbalk mee die er niet altijd is,
       dus 100vh is daar hoger dan het zichtbare scherm en zou de band juist te lang maken. De
       `vh`-regel blijft eronder staan als terugval voor oudere browsers, want CSS negeert een
       eigenschap die het niet kent en houdt dan de vorige. */
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
    }

    .hero > .hero-container {
        flex: 1;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* CENTREER DE LEESBREEDTE, NIET DE KOLOM.
       Hier stond `margin-inline: auto` op `.hero-content`, maar die heeft `max-width: none` en vult
       de kolom dus al — de regel deed niets. De 34rem-leesbreedte is later naar
       `.hero-description` verhuisd en de auto-marges zijn niet meegegaan: de tekst stond wel
       gecentreerd BINNEN dat blok, maar het blok zelf plakte tegen de linkerrand.
       Zichtbaar vanaf ~592px viewport (544px leesbreedte + 48px padding). Op een iPad mini van
       768px lag de 176px lucht volledig rechts; onder 592px vult het blok de kolom en lijkt het
       weer gecentreerd — vandaar dat het terugsprong bij kleiner maken. */
    .hero-description {
        margin-inline: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* Zelfde symptoom, ander mechanisme. De basisregel is `repeat(3, max-content)` met
       `justify-content: start`: op een breed scherm horen de cijfers tegen dezelfde linkerrand als
       de kop. Zodra de hero één kolom wordt hoort dat gecentreerd te zijn.
       Dit viel alleen in de band 769-1024px op, omdat het 768px-blok de kolommen vervangt door
       `minmax(0, 1fr)` en ze daaronder dus de volle breedte verdelen. Op een iPad Air van 820px
       lag ~370px lucht rechts van de drie cijfers. */
    .hero-stats {
        justify-content: center;
    }

    /* Het beeld komt onder de tekst en mag daar wat kleiner. */
    .hero-devices {
        max-width: 520px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* HIER STOND `.nav-links { display: none }` MET "Add mobile menu later" ERNAAST.
       Nu een echt uitklappaneel: de links schuiven onder de balk uit in plaats van te verdwijnen. */
    .nav-toggle {
        display: flex;
    }

    .nav-container {
        position: relative;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 16px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);

        /* Dicht by default. `visibility` staat erbij omdat een paneel met alleen opacity:0 nog
           steeds focus vangt — dan tabt iemand door een menu dat hij niet ziet. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

    .nav-links[data-open="true"] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--border);
        font-size: 17px;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* De knop houdt zijn vorm, maar vult de breedte van het paneel. */
    .nav-links .btn-primary {
        margin-top: 12px;
        padding: 13px 20px;
        text-align: center;
        border-bottom: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .nav-links { transition: none; }
    }

    /* De knoppen houden hun vorm maar worden minder log; met 32px zijpadding namen "Live demo" en
       "Prijzen" samen bijna de volle 312px van een 360px-scherm in. */
    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 13px 22px;
    }

    .features-grid,
    .industries-grid,
    .steps,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* HET ICOON NAAST DE TITEL, NIET ERBOVEN.
       Op één kolom werd elke kaart drie verdiepingen hoog — icoon, titel, tekst — en dan staan er
       nog geen twee kaarten op een scherm. De kop van de kaart wordt hier één regel: een kleiner
       icoon (52 -> 40px) met de titel ernaast, en de tekst eronder over de volle breedte.
       Ruimterekening op de smalste telefoon (320px): 320 - 48 (paginapadding) - 40 (kaartpadding)
       - 40 (icoon) - 14 (tussenruimte) = 178px voor de titel. De langste is "Werkt op elk scherm",
       op 17px ongeveer 162px. Past, met marge. */
    .feature-card {
        padding: 20px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
    }

    .feature-card .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        border-radius: 11px;
    }

    .feature-card .feature-icon svg {
        width: 21px;
        height: 21px;
    }

    .feature-card h3 {
        margin-bottom: 0;
        font-size: 17px;
    }

    /* De tekst begint weer links, onder het icoon door. */
    .feature-card p {
        grid-column: 1 / -1;
        margin-top: 10px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }


    /* Deze twee stonden op drie vaste kolommen ZONDER terugval. Op een telefoon van 360px werd
       "per maand, excl. btw" daardoor in een kolom van ~100px geperst, en de drie voetkolommen
       ook. Gevonden door elke grid met vaste kolommen te toetsen op een terugval. */
    /* auto-fit in plaats van drie vaste kolommen: past "30 dagen" niet meer naast de andere twee,
       dan springt hij netjes naar een tweede rij in plaats van te overlopen. Met nowrap erbij is
       dat het verschil tussen "herschikt" en "loopt buiten beeld". */
    /* De `minmax(0, 1fr)`-terugval voor smalle schermen staat NIET meer hier maar in een eigen
       600px-blok hieronder. Hier gold hij tot 768px, en dat was precies te ver: zie daar. */

    .hero-stats .stat-label {
        line-height: 1.35;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

/* DE CIJFERS MOGEN ALLEEN OP EEN TELEFOON DE VOLLE BREEDTE VERDELEN.
   HARD DRIE KOLOMMEN. auto-fit met minmax(104px) liet ze op een scherm van 360px naar een tweede
   rij springen: 3 x 104 = 312px en dan is er geen ruimte meer voor de tussenruimte.
   minmax(0, 1fr) laat elke kolom krimpen tot wat er is (~96px), en de clamp op .stat-number zorgt
   dat "30 dagen" daar met nowrap in past.

   Die regel stond tot 768px, en daar zat de fout. `1fr` rekt elke cel op tot een derde van de
   VOLLE breedte, en `.stat { text-align: center }` zet het cijfer dan midden in die cel. Op een
   telefoon klopt dat — de cel is ~107px en de tekst ~84px, dus die vult hem bijna. Op een iPad
   mini van 744px is diezelfde cel 225px voor ~90px tekst, en dan staan de drie cijfers over de
   hele breedte uitgesmeerd. Gemeten gat tussen de cijfers: 50px op 390px, oplopend tot 130px op
   768px, en dan in één sprong terug naar 36px op 820px zodra `max-content` het overneemt.

   600px als grens en niet 768px: op 600px is `max-content` samen 350px plus 2 x 36px tussenruimte
   = 422px, tegen 552px beschikbaar. Ruim. Onder de 600px loopt die marge terug en neemt de
   1fr-terugval het weer over, ruim voor de 414px van de breedste telefoon. */
@media (max-width: 600px) {
    /* `auto` en niet `minmax(0, 1fr)`: 1fr verdeelde de drie cijfers over de volle breedte, met
       ~50px lucht ertussen op 390px. Met `auto` is elke kolom zo breed als haar tekst en staan de
       drie dicht bij elkaar, links uitgelijnd onder de knoppen. Ze kunnen nog steeds krimpen. */
    /* Gecentreerd, zoals de kop en de knoppen erboven op een telefoon; `start` liet ze links
       hangen onder een gecentreerde tekst. */
    .hero-stats {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 18px;
    }

    .nav-logo-img { height: 20px; }
}

/* Zie .hero-title: op 320px geeft 6.5vw drie regels, 6.2vw twee. */
@media (max-width: 340px) {
    .hero-title { font-size: clamp(18px, 6.2vw, 46px); }
}