/* ================================
   VARIABLES & RESET
   ================================ */
:root {
    --color-navy: #1B1540;
    --color-red: #E6373E;
    --color-cyan: #1EB1E1;
    --color-white: #FFFFFF;
    --color-light-gray: #F9FAFB;
    --color-border-gray: #E5E7EB;
    --color-dark-gray: #333333;
    --color-medium-gray: #666666;
    --color-text-gray: #4B5563;

    /* Kleurrollen. De tinten zijn de huisstijl en veranderen niet; wat wel
       verandert is waarvoor ze staan. Rood was hero-badge, contactband,
       knoppen, iconen en prijs tegelijk, en daarmee zei het niets meer.
       Rood is nu voorbehouden aan de prijs en aan de ene hoofdhandeling per
       scherm. Cyaan is label op navy en markering voor een feit, nooit een
       vlak. Navy is de grond onder alles wat data of identiteit draagt. */
    --color-plaat: #241D52;
    /* Cyaan op wit haalt maar 2,49 staat tot 1 en is dus onleesbaar als tekst.
       Deze donkere variant haalt 4,5 en is voor labels op een lichte grond;
       --color-cyan blijft voor labels op navy, waar hij 6,1 haalt. */
    --color-cyan-tekst: #0A6E92;
    /* Rood op wit haalt maar 4,22 staat tot 1 en zakt dus als tekst en als
       knopvlak. Deze donkere stap zat al in het palet als hoverkleur en haalt
       5,03. --color-red blijft voor accenten en randen, waar 3,0 volstaat. */
    --color-red-tekst: #D42A32;

    /* Letters. Condensed voor koppen, machinenamen, prijzen en knoppen. Mono
       voor labels, cijfers en specs, want die heeft cijfers van gelijke
       breedte en dan lijnen bouwjaren en urenstanden onder elkaar uit. De
       lopende tekst blijft de systeemletter: die twee dragen de persoonlijkheid,
       een alinea hoeft daar geen webfont voor te laden. */
    --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --cond: 'IBM Plex Sans Condensed', 'Segoe UI', sans-serif;
    --mono-data: 'IBM Plex Mono', 'SF Mono', Monaco, Consolas, monospace;
    --font-mono: var(--mono-data);

    /* Typetrap, zes stappen. Stond eerder verspreid als losse clamp-waarden. */
    --tt-xs: 11px;
    --tt-s: 13px;
    --tt-m: 16px;
    --tt-l: clamp(22px, 2.4vw, 28px);
    --tt-xl: clamp(30px, 4vw, 44px);
    --tt-2xl: clamp(38px, 6vw, 68px);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--color-text-gray);
    line-height: 1.6;
    background: var(--color-white);
    overflow-x: hidden;
}

/* ================================
   CONTAINER
   ================================ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ================================
   NAVBAR
   ================================ */
.navbar {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    animation: slideDown 0.6s ease-out;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-gray);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.logo-container {
    display: flex;
    align-items: center;
    height: 60px;
    animation: fadeInLeft 0.6s ease-out;
}

.logo-svg {
    height: 50px;
    width: auto;
}

/* Logo altijd op ware verhouding, krimpt mee bij scrollen */
.logo-img {
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar.scrolled .logo-img {
    height: 36px;
}

.navbar.scrolled .navbar-content {
    padding: 8px 0;
}

.navbar.scrolled .logo-container {
    height: 44px;
}

.navbar-content,
.logo-container {
    transition: padding 0.3s ease, height 0.3s ease;
}

.nav-menu {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-link {
    color: var(--color-text-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition);
    position: relative;
    /* WCAG 2.2 vraagt een tapdoel van minstens 24 bij 24 pixels. Deze links
       waren 22 hoog, dus twee te weinig. De opvulling doet dat zonder de
       navigatie zichtbaar te veranderen. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 2px;
    letter-spacing: 0.3px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-red);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--color-navy);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-cta {
    background: linear-gradient(135deg, var(--color-red), #d42a32);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(230, 55, 62, 0.2);
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 55, 62, 0.3);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-navy);
    cursor: pointer;
    padding: 8px;
    line-height: 1;
}

.nav-cta-mobile {
    display: none;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ================================
   ICONEN
   ================================
   Inline svg in plaats van een icoonlettertype. Ze erven de tekstkleur en
   schalen mee met de lettergrootte, dus ze staan altijd goed uitgelijnd naast
   het woord ernaast. */
.ico {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Een merkteken bestaat uit een vlak en niet uit lijnen. Zonder deze regel
   wordt de contour van het WhatsApp-teken als lijn getrokken en dan is het
   een willekeurig praatwolkje. */
.ico-vlak {
    fill: currentColor;
    stroke: none;
}

.ico-groot {
    width: 2.5em;
    height: 2.5em;
    stroke-width: 1.25;
}

/* ================================
   KNOPPEN
   ================================
   Eén stelsel voor de hele site. .knop hoort bij de machinepagina en .btn bij
   de rest; ze delen dezelfde grond, zodat er nooit twee soorten knoppen naast
   elkaar staan. Rood is voorbehouden aan de hoofdhandeling van een scherm.
   Staan er twee knoppen naast elkaar, dan is er hooguit één rood. */
.btn,
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 26px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-family: var(--cond);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary,
.knop-hoofd {
    background: var(--color-red-tekst);
    color: var(--color-white);
}

.btn-primary:hover,
.knop-hoofd:hover {
    background: #B81C24;
}

/* Op een donkere grond, zoals de hero */
.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
}

/* Op een lichte grond */
.btn-contact,
.knop-tel {
    background: var(--color-white);
    border-color: var(--color-navy);
    color: var(--color-navy);
    font-variant-numeric: tabular-nums;
}

.btn-contact:hover,
.knop-tel:hover {
    background: var(--color-navy);
    color: var(--color-white);
}

.btn:focus-visible,
.knop:focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 2px;
}

/* ================================
   HERO
   ================================
   De hero opende met een belofte ("Uw partner in...") en de regel dat het
   aanbod live gekoppeld is. Nu opent hij met wat er staat: het aantal
   machines en de merken, uit Powerall. Voor een handelaar is voorraad het
   sterkste openingsargument dat er is, en het bewijst meteen dat de koppeling
   werkt in plaats van dat te beweren. */
.hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 96px 32px 72px;
    background:
        linear-gradient(180deg, rgba(27, 21, 64, 0.88) 0%, rgba(27, 21, 64, 0.78) 100%),
        url('./afbeeldingen/heftrucks-bedrijf.jpg') center / cover no-repeat;
    color: var(--color-white);
}

.hero-content {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.hero-plaats {
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin: 0 0 18px;
}

.hero-title {
    font-family: var(--cond);
    font-size: var(--tt-2xl);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 36px;
    max-width: 16ch;
}

.hero-sinds {
    display: block;
    color: var(--color-cyan);
}

/* ---- Voorraadplaat ---- */
.voorraadplaat {
    display: inline-block;
    min-width: min(100%, 460px);
    position: relative;
    padding: 22px 26px 24px;
    background: var(--color-plaat);
    border-radius: 0;
    margin-bottom: 32px;
    animation: plaat-neer 0.22s ease-out both;
}

.voorraadplaat::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

@keyframes plaat-neer {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.voorraadplaat-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.voorraadplaat-label {
    font-family: var(--mono-data);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan);
}

.voorraadplaat-getal {
    font-family: var(--cond);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.voorraadplaat-merken {
    font-family: var(--mono-data);
    font-size: var(--tt-s);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 18px;
}

.voorraadplaat-link {
    display: inline-block;
    font-family: var(--cond);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    border-bottom: 2px solid var(--color-red);
    padding-bottom: 2px;
}

.voorraadplaat-link:hover {
    color: var(--color-cyan);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

/* De merken waar S&S zich in specialiseert. Iets anders dan de merkenbalk
   verderop, die uit de voorraad komt en dus toont wat er nu toevallig staat.
   Daarom apart, en rustig. */
.hero-dealer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    margin: 0;
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.hero-dealer strong {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* ================================
   FEITEN
   ================================ */
.feiten {
    background: var(--color-navy);
    padding: 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.feiten-regel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 34px;
    margin: 0;
    font-family: var(--mono-data);
    font-size: var(--tt-s);
    color: rgba(255, 255, 255, 0.85);
}

.feiten-regel span {
    position: relative;
}

.feiten-regel span + span::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 0.55em;
    width: 5px;
    height: 5px;
    background: var(--color-cyan);
}

/* ================================
   DIENSTEN
   ================================ */
.kop,
.section-title {
    font-family: var(--cond);
    font-size: var(--tt-xl);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 44px;
}

.section-subtitle {
    font-size: var(--tt-m);
    line-height: 1.7;
    color: var(--color-text-gray);
    margin: -32px 0 40px;
    max-width: 60ch;
}

.diensten {
    padding: 88px 32px;
}

.diensten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 56px;
}

.diensten-kop {
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan-tekst);
    padding-bottom: 14px;
    margin: 0 0 4px;
    border-bottom: 2px solid var(--color-navy);
}

.diensten-lijst {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.diensten-lijst li {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border-gray);
}

.diensten-lijst strong {
    display: block;
    font-family: var(--cond);
    font-size: 21px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 4px;
}

.diensten-lijst span {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-gray);
}

.diensten-actie {
    display: inline-block;
    font-family: var(--cond);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-navy);
    text-decoration: none;
    border-bottom: 2px solid var(--color-red);
    padding-bottom: 2px;
}

.diensten-actie:hover {
    color: var(--color-red);
}

/* ================================
   ZEGEL
   ================================
   Ouderwets garantiezegel in de lege ruimte onder de linkerkolom: ronde sticker
   met stralenkrans, dubbele ring en scheef opgeplakt. Alles in css getekend, dus
   geen afbeelding die scherp moet blijven en geen font met een symbool erin.

   De kleur is --color-red-tekst en niet --color-red. Dat scheelt weinig in het
   oog maar alles in de meting: wit op --color-red haalt 4,2 op 1 en dat is te
   weinig voor tekst van deze grootte. Op de donkere variant is het 5,0 en dan
   is ook de kleinste regel leesbaar. */
/* De kopregel: titel links, zegel rechts, boven uitgelijnd. Het zegel is met
   186 pixels een stuk hoger dan de kop, dus deze regel is zo hoog als het
   zegel. Dat is bewust een band en geen strak lijntje; de witruimte die
   eronder valt scheidt de kop van de twee kolommen. */
.diensten-hoofd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin: 0 0 44px;
}

/* De onderrand van .kop zit al in de marge van de regel hierboven. */
.diensten-hoofd .kop {
    margin-bottom: 0;
}

.zegel {
    position: relative;
    width: 186px;
    height: 186px;
    /* Krimpt niet mee als de kop lang is; een ovaal zegel bestaat niet. */
    flex-shrink: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: var(--color-red-tekst);
    color: var(--color-white);
    /* Scheef, want een sticker wordt met de hand opgeplakt en niet gezet.
       Rechtsom: de tekst loopt van linksboven naar rechtsonder. Met een
       negatieve waarde kantelt hij de andere kant op en loopt de tekst
       omhoog. De stralenkrans merkt er niets van, want dertig stralen om de
       twaalf graden zien er na elke draaiing hetzelfde uit. */
    transform: rotate(7deg);
    box-shadow: 0 10px 26px rgba(212, 42, 50, 0.3);
}

/* De stralenkrans. Een conische herhaling van 12 graden geeft precies 30
   stralen; een deler die niet in 360 past laat een naad zien op het punt waar
   de eerste en de laatste straal elkaar raken.

   z-index: -1 is hier nodig en geen slordigheid. Het element is absoluut
   geplaatst en zou dus over de tekst heen vallen. Met een negatieve waarde
   tekent de browser het na de achtergrond van het zegel maar voor de tekst,
   precies waar het hoort. */
.zegel::before {
    content: '';
    position: absolute;
    inset: -13px;
    z-index: -1;
    border-radius: 50%;
    background: var(--color-red-tekst);
    -webkit-mask: repeating-conic-gradient(#000 0deg 6deg, transparent 6deg 12deg);
    mask: repeating-conic-gradient(#000 0deg 6deg, transparent 6deg 12deg);
}

/* De dubbele ring binnenin, het detail dat een cirkel tot zegel maakt. */
.zegel::after {
    content: '';
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px var(--color-red-tekst),
                0 0 0 4px rgba(255, 255, 255, 0.28);
}

.zegel-boven,
.zegel-onder {
    display: block;
    font-family: var(--cond);
    font-size: var(--tt-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    /* De letterspacing zet ruimte achter de laatste letter ook; die halen we
       er weer af, anders staat de regel een haar links van het midden. */
    text-indent: 0.16em;
}

.zegel-groot {
    display: block;
    font-family: var(--cond);
    /* Niet groter: het woord staat schuin, dus de hoeken van de L en de K komen
       dichter bij de binnenring dan de hoogte doet vermoeden. Bij 31px raakten
       ze hem, bij 27px bleef er links maar een haar over. */
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 8px 0 9px;
}

.zegel-onder {
    font-size: var(--tt-xs);
    opacity: 0.92;
}

/* Op een smal scherm past een zegel van 186 pixels niet naast de kop. Dan gaat
   het eronder en in het midden: links uitgelijnd leest het daar als een
   vergissing, want er staat niets naast om tegen uit te lijnen. */
@media (max-width: 767px) {
    .diensten-hoofd {
        display: block;
    }

    .diensten-hoofd .kop {
        margin-bottom: 32px;
    }

    .zegel {
        margin: 0 auto;
    }
}

/* ================================
   PRODUCTS SECTION
   ================================ */
.products {
    background: var(--color-light-gray);
    padding: 100px 32px;
}

.hexon-wrapper {
    margin-top: 56px;
}

.hexon-container {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

/* Reserveert ruimte terwijl de widget laadt, zodat de pagina niet verspringt.
   Stond op 450px en liet daardoor een gat van bijna 200 pixels onder de
   carrousel staan. */
#svm-canvas {
    min-height: 340px;
    /* Hexon zet hier overflow: hidden op. De pijlen staan op left: 0 en right: 0
       en vallen dus zelf net binnen de rand, maar hun schaduw steekt er twintig
       pixels overheen en werd afgesneden; hetzelfde gold voor de kaart die bij
       hover omhoog komt.

       Dit openzetten laat geen slides ontsnappen: het knippen van wat nog niet
       aan de beurt is gebeurt een niveau dieper, op .slick-list. Buiten deze
       doos is er ruimte zat, want de slider is 1216 breed binnen een container
       van 1280. */
    overflow: visible !important;
}
/* ================================
   CONTACT
   ================================
   Twee blokken langs de enige scheidslijn die er voor dit bedrijf toe doet:
   een machine die stilstaat is een telefoontje, een machine die iemand
   overweegt is een bericht dat mag wachten. Alleen het eerste blok krijgt
   rood, want dat is de handeling die telt. */
.contact {
    padding: 88px 32px;
    background: var(--color-light-gray);
    border-top: 1px solid var(--color-border-gray);
}

/* De teamfoto boven de contactblokken. Breder uitgesneden dan de andere banden
   (2,37 staat tot 1 in plaats van 2 staat tot 1), want het onderwerp is een
   gevel met machines ervoor en dat is een liggend gegeven. */
.teamfoto {
    margin: 0 0 48px;
}

.teamfoto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.teamfoto figcaption {
    margin-top: 16px;
    font-family: var(--mono-data);
    font-size: var(--tt-s);
    color: var(--color-text-gray);
}

@media (max-width: 767px) {
    .teamfoto {
        margin-bottom: 32px;
    }
}

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

.contact-blok {
    background: var(--color-white);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--border-radius);
    padding: 36px 34px 34px;
}

.contact-blok-nu {
    border-color: var(--color-navy);
}

.contact-label {
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan-tekst);
    margin: 0 0 10px;
}

.contact-kop {
    font-family: var(--cond);
    font-size: var(--tt-l);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 12px;
}

.contact-tekst {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-gray);
    margin: 0 0 24px;
    max-width: 46ch;
}

.contact-actie {
    display: inline-block;
    font-family: var(--cond);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-navy);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    border-bottom: 2px solid var(--color-border-gray);
    padding-bottom: 3px;
    overflow-wrap: anywhere;
}

.contact-actie-hoofd {
    color: var(--color-red);
    border-bottom-color: var(--color-red);
}

.contact-actie:hover {
    border-bottom-color: var(--color-navy);
}

.contact-bij {
    margin: 18px 0 0;
    font-family: var(--mono-data);
    font-size: var(--tt-s);
    color: var(--color-text-gray);
}

.contact-bij a {
    color: var(--color-navy);
}

/* ================================
   TRANSPORTBAND
   ================================
   Een foto tussen "Wat wij doen" en het aanbod. De diensten staan op wit en het
   aanbod op lichtgrijs; deze band sluit het witte deel af. */
/* Twee fotobanden vlak na elkaar: eerst de werkplaats, dan de dieplader. Ze
   horen bij elkaar, want ze bewijzen allebei iets wat de dienstenlijst erboven
   belooft. De bovenste krijgt daarom minder ruimte eronder dan de onderste:
   dichter op elkaar leest als een paar, ver uit elkaar als twee losse dingen. */
.werkplaatsband {
    padding: 0 32px 40px;
}

.transportband {
    padding: 0 32px 96px;
}

/* Drie beelden onder de brede werkplaatsfoto. Kleiner dan de band erboven, want
   dat is de hoofdfoto en dit is de onderbouwing; even groot zou de hierarchie
   platslaan. */
.bewijsstrook {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.bewijs-item {
    margin: 0;
}

.bewijs-item img {
    display: block;
    width: 100%;
    height: auto;
    /* Vierkant, want twee van de drie foto's zijn staand en de derde liggend.
       Een liggende uitsnede van vier op drie sneed een horizontale strook dwars
       door de staande foto's: de heftruck leek op zijn kant te liggen. Vierkant
       neemt van allebei een beetje weg in plaats van van een soort alles. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.bewijs-item figcaption {
    margin-top: 10px;
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-gray);
}

@media (max-width: 767px) {
    /* Drie naast elkaar wordt op een telefoon drie postzegels. Twee kolommen,
       en de derde loopt over de volle breedte eronder. */
    .bewijsstrook {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .bewijs-item:last-child {
        grid-column: 1 / -1;
    }

    /* De laatste is de enige liggende foto van de drie, dus die mag over de
       volle breedte ook liggend blijven. */
    .bewijs-item:last-child img {
        aspect-ratio: 16 / 9;
    }
}

.transportfoto {
    margin: 0;
}

.transportfoto img {
    display: block;
    width: 100%;
    height: auto;
    /* De wagen is lang en laag. Een vierkantere uitsnede laat vooral lucht en
       asfalt zien; twee staat tot een houdt de wagen groot in beeld. */
    aspect-ratio: 2 / 1;
    object-fit: cover;
    /* Niet op het midden: de wagen staat in de onderste helft van de foto en
       bij een gecentreerde uitsnede vielen de wielen eraf. */
    object-position: center 58%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.transportfoto figcaption {
    margin-top: 16px;
    font-family: var(--mono-data);
    font-size: var(--tt-s);
    color: var(--color-text-gray);
}

@media (max-width: 767px) {
    .werkplaatsband {
        padding: 0 20px 28px;
    }

    .transportband {
        padding: 0 20px 64px;
    }

    /* Op een smal scherm wordt een band van twee staat tot een een streepje.
       Drie staat tot twee houdt de wagen herkenbaar. */
    .transportfoto img {
        aspect-ratio: 3 / 2;
    }
}

/* ================================
   LIJSTWEERGAVE
   ================================
   Het knopje rechtsboven zet de tegels om in rijen. Zo'n rij krijgt van
   aanbod.php dezelfde .sns-card mee als een tegel, en daardoor gold ook onze
   tegelregel voor de foto: breedte honderd procent, hoogte 260. In een tegel
   klopt dat, in een rij werd het een banner over de volle breedte met de
   machine halverwege afgesneden.

   Alleen de foto terugbrengen tot een kolom links. De rest van de rij legt
   Hexon zelf neer met floats, en dat werkt; ik heb geprobeerd daar een
   flexdoos van te maken en toen schoven de knoppen over elkaar en viel de rij
   uit zijn eigen hoogte. Een vreemde indeling naprogrammeren levert alleen
   maar nieuwe gaten op. */
/* De hoogte van de foto staat in aanbod.php, want die wordt inline gezet en
   wint hoe dan ook. De breedte van de kolom staat hier, zodat de telefoonmaat
   met een media query kan meebewegen. */
/* De titel en de prijs begonnen op dezelfde regel als de bovenkant van de foto,
   strak tegen de rand. Onder de tekst staat wel ruimte, dus het oog leest dat
   als scheef. Lucht erboven. */
.sns-card.sns-rij .columnMain,
.sns-card.sns-rij .columnPrice {
    padding-top: 24px !important;
}

.sns-card.sns-rij .columnPhoto {
    float: left !important;
    width: clamp(200px, 32%, 340px) !important;
    margin-right: 24px !important;
}

@media (max-width: 767px) {
    /* Op een telefoon is een derde te smal voor een herkenbare machine. Dan
       gewoon boven elkaar, zoals de tegels. */
    .sns-card.sns-rij .columnPhoto {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* ================================
   SLOTBAND
   ================================
   Afsluiter op de aanbod- en machinepagina. Daar staat de hoofdhandeling al
   bovenaan, dus deze band herinnert alleen en schreeuwt niet: geen rood vlak,
   geen icoon, alleen de tekst en het nummer. */
.slotband {
    padding: 44px 32px;
    background: var(--color-navy);
    color: var(--color-white);
}

.slotband-inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.slotband-label {
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin: 0 0 8px;
}

.slotband-tekst {
    font-family: var(--cond);
    font-size: var(--tt-l);
    font-weight: 600;
    margin: 0;
    max-width: 34ch;
    line-height: 1.2;
}

/* Op donkere grond staat de witte knop het rustigst */
.slotband .btn-contact {
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .slotband-inhoud {
        align-items: flex-start;
    }

    .slotband .btn-contact {
        width: 100%;
    }
}

/* ================================
   FOOTER
   ================================ */
.footer {
    background: var(--color-navy);
    color: var(--color-white);
    padding: 80px 32px 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    /* Er stonden twee lijnen boven de onderste balk: een onder dit raster en
       een boven .footer-bottom, met 56 pixels niets ertussen. Die van het
       raster is weg; de overgebleven lijn hoort bij de balk eronder. */
    margin-bottom: 0;
    padding-bottom: 56px;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-col {
    animation: fadeInUp 0.6s ease-out both;
}

.footer-col:nth-child(1) { animation-delay: 0.1s; }
.footer-col:nth-child(2) { animation-delay: 0.2s; }

/* Het logo is donkerblauw met een cyaan slagschaduw en rode letters. Op de
   navy footer valt dat donkerblauw weg tegen de achtergrond, en daarom stond
   hier eerder een uitgeknipte versie met witte letters. Die leest als een
   spook: de vorm klopt niet meer en de kleur van het merk is verdwenen.

   Een lichte plaat eronder is de eerlijke oplossing. Het merk staat er in zijn
   eigen kleuren, het bestand is hetzelfde als in de header, en er is niets
   nagetekend. */
.footer-logo-img {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 24px;
    background: var(--color-white);
    padding: 14px 18px;
    border-radius: var(--border-radius);
    box-sizing: content-box;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    line-height: 1;
}

.footer-logo-ss {
    font-size: 52px;
    font-weight: 900;
    font-style: italic;
    color: var(--color-white);
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 var(--color-cyan);
}

.footer-logo-sub {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-red);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 10px;
}
.footer-col:nth-child(3) { animation-delay: 0.3s; }
.footer-col:nth-child(4) { animation-delay: 0.4s; }

.footer-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-white);
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.footer-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-white);
    margin-bottom: 14px;
    font-weight: 400;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: var(--color-cyan);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--color-white);
}

/* Contacticonen in de footer: vaste breedte zodat de regels uitlijnen */
.footer-col p > i.fas {
    width: 18px;
    margin-right: 4px;
    text-align: center;
    color: var(--color-cyan);
}

.footer a[href^="tel:"],
.footer a[href^="mailto:"] {
    color: var(--color-cyan);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 600;
}

.footer a[href^="tel:"]:hover,
.footer a[href^="mailto:"]:hover {
    color: var(--color-white);
}

.footer-badges {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.badge {
    background: rgba(30, 177, 225, 0.15);
    color: var(--color-cyan);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ================================
   FAQ SECTIE
   ================================ */
.faq-section {
    background: var(--color-white);
    padding: 100px 32px;
}

/* De vragenlijst staat op 820 pixels gecentreerd, want een antwoord van vijf
   regels over de volle 1280 leest niet. De kop stond daar links naast, op de
   kantlijn van de pagina, en dan hangt hij los boven een blok dat ergens anders
   begint. Kop, ondertitel en lijst delen nu dezelfde breedte en hetzelfde
   midden, zodat het een blok is.

   Dit is de enige sectie op de pagina die niet links uitlijnt, en dat is met
   opzet: het is de enige sectie die je leest in plaats van scant. */
.faq-section .section-title,
.faq-section .section-subtitle,
.faq-list {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.faq-section .section-title,
.faq-section .section-subtitle {
    text-align: center;
}

.faq-item {
    background: var(--color-light-gray);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--border-radius);
    margin-bottom: 14px;
    transition: var(--transition);
    overflow: hidden;
}

.faq-item[open] {
    background: var(--color-white);
    border-color: var(--color-cyan);
    box-shadow: var(--shadow-md);
}

.faq-item summary {
    cursor: pointer;
    padding: 22px 56px 22px 24px;
    font-weight: 700;
    font-size: 17px;
    color: var(--color-navy);
    list-style: none;
    position: relative;
    transition: var(--transition);
}

.faq-item summary::-webkit-details-marker { display: none; }

/* Het chevronnetje was een teken uit Font Awesome (\f078). Toen dat
   lettertype eruit ging bleef die regel staan, en een ontbrekend teken toont
   de browser als een vakje met de code erin. Nu met twee randen getekend:
   geen lettertype nodig, hij erft de tekstkleur en schaalt mee. */
.faq-item summary::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-red-tekst);
    border-bottom: 2px solid var(--color-red-tekst);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.faq-item summary:hover {
    color: var(--color-red-tekst);
}

.faq-answer {
    padding: 0 24px 24px;
}

.faq-answer p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--color-text-gray);
}

.faq-answer a {
    color: var(--color-red-tekst);
    font-weight: 600;
    text-decoration: none;
}

.faq-answer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .faq-section { padding: 60px 20px; }
    .faq-item summary { font-size: 15.5px; padding: 18px 48px 18px 18px; }
    .faq-answer { padding: 0 18px 18px; }
}

/* Toegankelijkheid: skip-link naar de hoofdinhoud */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--color-navy);
    color: var(--color-white);
    padding: 14px 24px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
}

/* Toegankelijkheid: duidelijke focus-indicator voor toetsenbordgebruikers */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ================================
   JURIDISCHE PAGINA'S
   ================================ */
.legal-page {
    padding: 72px 32px 96px;
    background: var(--color-white);
}

.legal-content {
    max-width: 860px;
}

.legal-content h1 {
    font-size: 42px;
    font-weight: 900;
    color: var(--color-navy);
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.legal-updated {
    color: var(--color-medium-gray);
    font-size: 14px;
    margin-bottom: 40px;
}

.legal-content h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-navy);
    margin: 44px 0 16px;
    letter-spacing: -0.5px;
}

.legal-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 32px 0 12px;
}

.legal-content p,
.legal-content li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-gray);
}

.legal-content p {
    margin-bottom: 16px;
}

.legal-content ul {
    margin: 0 0 20px 22px;
}

.legal-content li {
    margin-bottom: 10px;
}

.legal-content a {
    color: var(--color-red-tekst);
    font-weight: 600;
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-content .btn {
    color: var(--color-white);
    text-decoration: none;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 28px;
    font-size: 14.5px;
    border: 1px solid var(--color-border-gray);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.legal-table th {
    background: var(--color-navy);
    color: var(--color-white);
    text-align: left;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.legal-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--color-border-gray);
    color: var(--color-text-gray);
    vertical-align: top;
}

.legal-table tbody tr:nth-child(even) {
    background: var(--color-light-gray);
}

.legal-todo {
    background: #FFF3CD;
    color: #7A5800;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
}

.legal-back {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border-gray);
}

@media (max-width: 768px) {
    .legal-page { padding: 48px 20px 64px; }
    .legal-content h1 { font-size: 30px; }
    .legal-content h2 { font-size: 20px; }
    .legal-table { font-size: 13px; display: block; overflow-x: auto; }
}

/* Merken-marquee tussen de footer-lijnen */
/* ================================
   MERKEN
   ================================
   De namen komen uit Powerall, dus dit is wat er nu op voorraad staat. Op een
   lichte grond in plaats van weggemoffeld in de footer, en met een label
   erboven, want zonder label is een rij merknamen behang. */
.merken {
    padding: 56px 0 64px;
    background: var(--color-light-gray);
    border-top: 1px solid var(--color-border-gray);
}

.merken-label {
    font-family: var(--mono-data);
    font-size: var(--tt-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-medium-gray);
    margin: 0 0 26px;
}

.brand-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.brand-track {
    display: inline-flex;
    gap: 56px;
    white-space: nowrap;
    animation: marqueeScroll 42s linear infinite;
    will-change: transform;
}

.brand-marquee:hover .brand-track {
    animation-play-state: paused;
}

.brand-item {
    font-family: var(--cond);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* Stond op 0,28 dekking, wat neerkomt op ongeveer 1,9 staat tot 1 en in de
       praktijk onleesbaar is. Dit zijn merknamen en dus informatie, geen
       behang. */
    color: var(--color-navy);
    opacity: 0.62;
    transition: opacity 0.3s ease;
}

.brand-item:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .brand-track {
        animation: none;
    }

    .brand-marquee {
        overflow-x: auto;
    }
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.footer-legal-links {
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.footer-legal-links a {
    color: var(--color-cyan);
    text-decoration: none;
    transition: var(--transition);
}

.footer-legal-links a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-legal-links span {
    color: rgba(255, 255, 255, 0.3);
}

.footer-credits {
    margin-top: 10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-credits a {
    color: var(--color-cyan);
    text-decoration: none;
    font-weight: 700;
    transition: var(--transition);
}

.footer-credits a:hover {
    color: var(--color-white);
}

/* ================================
   AANBOD PAGINA
   ================================ */
.aanbod-page {
    padding-top: 64px;
}

.breadcrumb {
    background: var(--color-light-gray);
    padding: 20px 32px;
    border-bottom: 1px solid var(--color-border-gray);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb a {
    color: var(--color-navy);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--color-red);
}

.breadcrumb i {
    color: var(--color-text-gray);
    font-size: 10px;
}

.breadcrumb span {
    color: var(--color-text-gray);
    font-weight: 600;
}

.category-pills {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.category-pill {
    padding: 12px 28px;
    border-radius: 50px;
    background: var(--color-white);
    border: 2px solid var(--color-border-gray);
    color: var(--color-navy);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition);
}

.category-pill:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan-tekst);
    transform: translateY(-2px);
}

.category-pill.active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

/* ================================
   CATEGORY CARDS (AANBOD)
   ================================ */
/* Vijf kaarten in plaats van drie. Als raster geeft dat een rij van drie en
   daaronder twee met een gat rechts, en dat leest als een fout. Met flex vallen
   de laatste twee gecentreerd onder de eerste drie, en dan is de tweede rij een
   keuze in plaats van een restje. */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin-bottom: 64px;
}

.category-card {
    flex: 1 1 300px;
    max-width: 400px;
}

.category-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.category-card {
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cyan);
}

.category-image {
    height: 220px;
    background: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}

.category-fallback-icon {
    display: none;
    font-size: 64px;
    color: var(--color-navy);
    opacity: 0.25;
}

.category-image.no-image {
    background: linear-gradient(135deg, var(--color-navy) 0%, #2a3870 100%);
}

.category-image.no-image .category-fallback-icon {
    display: block;
    color: var(--color-white);
    opacity: 0.5;
}

/* Zodra er een foto is, is het icoon een terugval die niet meer nodig is. Het
   bleef ernaast staan omdat de markup de klasse category-fallback-icon nooit
   meekreeg; alleen javascript verbergen is bovendien te mager, want dan hangt
   het aan een geslaagde fetch. */
.category-image:not(.no-image) .category-fallback-icon {
    display: none !important;
}

.category-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.category-content h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: 14px;
}

.category-price {
    display: inline-block;
    align-self: flex-start;
    background: rgba(30, 177, 225, 0.12);
    color: var(--color-navy);
    font-weight: 800;
    font-size: 15px;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.category-content p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-gray);
    margin-bottom: 24px;
    flex: 1;
}

.btn-category {
    background: var(--color-navy);
    color: var(--color-white);
    width: 100%;
    justify-content: center;
    border-radius: 50px;
    font-weight: 700;
    padding: 14px 24px;
}

.btn-category:hover {
    background: var(--color-red);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(230, 55, 62, 0.3);
}

/* ================================
   SERVICES CTA & PRODUCTS NOTE
   ================================ */
.services-cta {
    text-align: center;
    margin-top: 56px;
    padding: 40px;
    background: var(--color-light-gray);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-gray);
}

.services-cta p {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-dark-gray);
    margin-bottom: 24px;
}

.services-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-whatsapp {
    background: #25D366;
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    background: #1fb857;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4);
}

.products-note {
    text-align: center;
    margin-top: 32px;
    font-size: 15px;
    color: var(--color-medium-gray);
}

.products-note a {
    color: var(--color-red-tekst);
    font-weight: 700;
    text-decoration: none;
}

.products-note a:hover {
    text-decoration: underline;
}

/* ================================
   HIGH-END LOOK HEXON KAARTEN
   (carousel op productpagina + lijst op aanbod-pagina)
   ================================ */
/* Hexon legt de kaarten met floats neer (svm-clearfix). Eén kaart die hoger
   uitvalt laat de volgende kaart een kolom opschuiven, met een gat als gevolg.
   Als grid bepalen wij de kolommen en zijn alle kaarten even hoog, ongeacht
   wat erin staat. De float op de tegels doet in een grid niets meer. */
/* Alleen in de tegelweergave. Hexon heeft ook een lijstweergave, bereikbaar via
   het knopje rechtsboven, en daar zijn de kinderen geen tegels maar brede rijen.
   Zonder deze voorwaarde werden die rijen in kolommen van 300 pixels geperst en
   viel de prijs er rechts af en de knoppenrij eronder. Het raster hoort bij de
   tegels, dus vraagt de regel nu of die er zijn. */
#resultsTable:has(> .vehicleTile) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
    align-items: stretch;
}

#resultsTable > .vehicleTile {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    /* Wat extra bodemruimte, zodat een kaart met een aflopende specs-regel niet
       op de laatste pixel uitkomt. */
    padding-bottom: 28px !important;
}

/* De prijs pinnen aan de onderkant van de kaart leek netter, maar daarvoor
   moet je Hexons eigen flow ombouwen tot flex, en dan gaan zijn blokken
   krimpen: opmeten liet zien dat het prijsblok van 77 naar 62 pixels ging en
   de knoppenrij van 58 naar 36. De prijs loopt nu gewoon mee onder de specs.
   Hij staat dan niet bij elke kaart op dezelfde hoogte, en dat is de goedkope
   prijs voor een kaart waar niets meer van afvalt. */
/* Hexon zet een vaste hoogte op dit blok. Zolang de specs op een regel passen
   valt dat niet op, maar breekt de regel af, dan past de prijs er niet meer in
   en snijdt de overflow van de kaart hem af. Laten meegroeien met de inhoud. */
#resultsTable > .vehicleTile .vehicleInformation {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 10px;
}

/* Hexon laat de knoppen zweven en klaart ze met een clearfix die hier niet
   aanslaat, waardoor de rij te laag meet. */
#resultsTable > .vehicleTile .actionButtons {
    overflow: hidden;
}

/* Het dubbele prijslabel weg, de prijs zelf blijft. Met !important, want de
   oude tekstzoeker kon hier een inline display:none hebben achtergelaten. */
.sns-card .priceSecond {
    display: none !important;
}

/* Hexon zet ook op dit blok een hoogte, en die is net te krap voor de regel:
   de onderkant van de cijfers werd eraf geschaafd, waardoor 6.350,- als
   6.350.- las. Niet afknippen en laten meegroeien. Klaren hoeft niet meer,
   want .svm-price zweeft hieronder niet langer. */
.sns-card .svm-prices {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Hexon laat .svm-price zweven en klaarde dat met .priceSecond. Nu wij dat
   tweede blok verbergen, klapt de container dicht en valt de prijs buiten de
   kaart, waar overflow hem afsnijdt. Niet meer laten zweven is de fix. */
.sns-card .svm-price {
    float: none !important;
    width: auto !important;
}

.sns-card .svm-price {
    font-family: var(--mono-data);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-navy);
    text-align: center !important;   /* Hexon lijnt rechts uit, de kaart is gecentreerd */
    padding: 14px 20px 0;
}

/* "Excl. BTW" naast het bedrag in plaats van eronder. Op een eigen regel
   werd het prijsblok 77 pixels hoog en dat paste niet in de ruimte die Hexon
   voor de kaart rekent, waardoor de regel werd afgesneden. Naast het bedrag
   is het bovendien hoe de carrousel het al toont. */
.sns-card .price_btw {
    display: inline !important;   /* Hexon verbergt hem in deze weergave */
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-gray);
}

.sns-card .price_on_request {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-gray);
}

.sns-card {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border-gray) !important;
    border-radius: var(--border-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition) !important;
    padding: 0 0 22px !important;
    /* Hexon zet een vaste hoogte van 320 pixels op de kaart. Op een telefoon
       paste de modelnaam daar net niet meer in en werd hij door de overflow
       doormidden geknipt. De inhoud bepaalt de hoogte; slick trekt de slides
       daarna zelf gelijk. */
    height: auto !important;
    min-height: 0 !important;
}

/* De kaart lichtte bij hover 6 pixels op en kleurde zijn rand cyaan. Die
   randkleur is dezelfde als de focusring, dus hover las als geselecteerd. Nu
   alleen hoogte: een kleinere sprong en een zwaardere schaduw, wat leest als
   dichterbij komen in plaats van als een andere toestand. */
.sns-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(27, 21, 64, 0.14) !important;
}

/* Ook hier antwoord op het indrukken, niet pas op het loslaten. */
.sns-card:active {
    transform: translateY(-1px) scale(0.995);
    transition-duration: 0.1s !important;
}

.sns-card,
.sns-card * {
    font-family: var(--font-family) !important;
}

/* Uitzondering op de regel hierboven. Hexon zet zijn eigen iconen neer als
   <i class="fa fa-heart-o">, en zo'n icoon is een letter uit een symboolfont.
   Onze regel drukte daar de sitefont overheen, en dan valt het teken buiten de
   letters die dat font kent: de browser toont een leeg blokje. Dat was het
   vierkantje op de kaarten.

   Het font zelf laadt gewoon, want Hexon brengt het mee voor zijn eigen
   knoppen. Alleen de overschrijving moest weg. */
.sns-card .fa,
.sns-card [class*="fa-"] {
    font-family: FontAwesome, 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
}

.sns-card img {
    /* Geen kale ease: die versnelt en vertraagt even hard en voelt mechanisch.
       Deze curve remt af, zoals iets dat tot stilstand komt. */
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.sns-card:hover img {
    transform: scale(1.03);
}

/* Productfoto beeldvullend: bijsnijden in plaats van witruimte, dus geen
   kwaliteitsverlies. Op een breed scherm een vaste hoogte, want de kaarten
   staan naast elkaar en moeten een rij vormen. */
.sns-card img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Containers om de foto heen op volle breedte */
.sns-card a:not(.sns-btn),
.sns-card table,
.sns-card td {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    /* Op een telefoon is de kaart smal, en een vaste hoogte van 220 of 240
       pixels laat dan bijna geen ruimte over voor merk en model: die werden
       afgeknipt. Een beeldverhouding schaalt mee met de breedte van de kaart,
       dus wat eronder moet passen, past. */
    .sns-card img {
        height: auto !important;
        aspect-ratio: 3 / 2 !important;
    }

    /* Een kaart per keer, met een smalle strook van de volgende ernaast zodat
       zichtbaar is dat er meer staat. Stond op 44 pixels aan weerszijden, en
       dat werd een brede plak halve foto met een pijl eroverheen. */
    #svm-canvas .slick-list {
        padding: 0 26px !important;
    }

    /* Hexon zet 28 pixels marge rondom elke slide. Van de 234 pixels die er op
       een telefoon te verdelen zijn ging daar 56 aan op, dus de kaart hield er
       174 over en de rest was lucht. Zes pixels aan weerszijden is genoeg voor
       een goot tussen twee kaarten. */
    #svm-canvas .slick-slide {
        margin: 0 6px !important;
    }

    #svm-canvas .slick-slide > div {
        padding: 0;
    }

    /* Pijltjes iets kleiner en binnen beeld houden */
    .sns-nav {
        width: 40px !important;
        height: 40px !important;
        z-index: 5 !important;
    }
}

.sns-card a {
    text-decoration: none !important;
}

/* Titel (aanbod-lijst) */
.sns-card b:not(.sns-brand),
.sns-card strong:not(.sns-brand) {
    color: var(--color-navy) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}

/* Merk boven het model, als label. Niet rood: die kleur is van de prijs en
   van de hoofdhandeling, en als alles rood is zegt rood niets meer. */
.sns-card .sns-brand {
    display: block !important;
    font-family: var(--mono-data) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--color-medium-gray) !important;
    margin: 16px 0 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Hexon geeft deze paragrafen een vaste hoogte van 16 pixels. Onze modelnaam
   staat op 22 pixels met regelafstand 1,3 en heeft dus bijna 29 nodig; de
   onderste helft van de letters werd daardoor weggeknipt. De inhoud bepaalt de
   hoogte, en er wordt hier niets meer afgesneden. */
.sns-card .sns-brand,
.sns-card .sns-model {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Model: groot en prominent in navy (carousel) */
.sns-card .sns-model {
    display: block !important;
    font-family: var(--cond) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--color-navy) !important;
    margin: 3px 0 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
}

/* Het fotoblok van Hexon houdt zijn hoogte met een padding-bottom van ruim 161
   pixels, de oude truc voor een vaste beeldverhouding. Wij zetten de hoogte van
   de foto zelf, dus die padding reserveert nu ruimte die niemand gebruikt en de
   foto stak er onderuit. De foto bepaalt de hoogte, verder niets. */
.sns-card .vehicle-tile-img {
    padding-bottom: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

/* Het prijsvaantje hangt met een negatieve marge tien pixels buiten de kaart en
   werd daar afgeknipt. Tegen de rand aan is genoeg. */
.sns-card .priceTagSmall {
    margin-left: 0 !important;
}

/* Grijze binnenranden weg (Hexon zet borders op inner-elementen) */
.sns-card div,
.sns-card table,
.sns-card td,
.sns-card a,
.sns-card img {
    border: none !important;
    outline: none !important;
}

/* Contact/Details knoppen (aanbod-lijst): gevulde pill-knoppen */
.sns-card .sns-btn,
.sns-card a.sns-btn,
.sns-btn {
    display: inline-block !important;
    border-radius: 50px !important;
    padding: 10px 26px !important;
    color: var(--color-white) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: var(--color-navy) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: 0 4px 12px rgba(27, 21, 64, 0.2) !important;
}

.sns-card .sns-btn:hover,
.sns-card a.sns-btn:hover,
.sns-btn:hover {
    background: var(--color-red) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 55, 62, 0.35) !important;
}

/* Pijltjes vorige/volgende: ronde navy knoppen */
/* ---- Het schuiven zelf ----
   Slick schuift met zijn eigen timing. Wij kunnen de curve overschrijven, en
   dat is het verschil tussen "het beweegt" en "het komt tot stilstand". Deze
   curve start snel en remt lang af; hetzelfde profiel dat Apple gebruikt voor
   panelen en bladen. Geen doorschot: de kaarten dragen geen momentum van een
   veeg, dus overschieten zou verzonnen zijn. */
#svm-canvas .slick-track {
    /* De curve en de duur staan in script.js, want slick schrijft zijn eigen
       transition inline op dit element en herschrijft die bij elke slag. Hier
       alleen de hint dat dit blok gaat bewegen, zodat de browser hem op een
       eigen laag zet. */
    will-change: transform;
}

/* Slick knipt de kaart af zodra die bij hover uit zijn vak komt. De overflow
   moet dus open, maar alleen naar boven en onder: horizontaal blijft het
   knippen, anders lopen de slides die nog niet aan de beurt zijn het beeld in. */
#svm-canvas .slick-list {
    overflow: visible !important;
    clip-path: inset(-40px 0);
}

/* De prijsbalk onderaan de kaart in de lijstweergave. Dicht navy en geen glas.
   Hier stond doorschijnend navy met een blur, uit de ronde waarin de carrousel
   naar Apple-principes ging. Dat was op twee manieren mis. Het vlak zit hier
   over wit en niet over een foto, dus er valt niets doorheen te zien en de blur
   was versiering. En de doorschijnendheid maakte er #5B5776 van, waarop de
   prijs van Hexon in #181146 nog maar 2,5 op 1 haalde.

   De carrousel gebruikt dit blok trouwens niet; die heeft zijn eigen
   .priceTagSmall. Ik ging er destijds van uit dat het hetzelfde element was.
   Gemeten: het staat alleen in de lijst. */
.sns-card .svm-prices {
    background: var(--color-navy) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: none !important;
}

/* Dit was de eigenlijke fout. Het vlak werd donker gemaakt, maar Hexon zet de
   prijs in #181146 en dat is bijna zwart. Zwart op #5B5776, want daar komt die
   72 procent dekking op wit op neer, is 2,5 op 1. De regel "Excl. BTW" stond in
   grijs en haalde 1,5. Wit op datzelfde vlak is 6,8 en op het dichte navy 13,6. */
.sns-card .svm-prices,
.sns-card .svm-prices * {
    color: var(--color-white) !important;
}

/* "Op aanvraag" staat op de plek van de prijs en hoort er dus uit te zien als
   een prijs. Hij kreeg onze grijze tekstkleur mee en werd daarmee bijna
   onleesbaar op het donkere vlak: grijs op navy haalt 2,2 op 1. */
.sns-card .price_on_request,
.priceTagSmall .price_on_request {
    color: var(--color-white) !important;
    font-weight: 700 !important;
}

/* De bijregels zijn ondergeschikt aan het bedrag, maar mogen niet wegvallen:
   getint uit het wit en niet uit grijs, zodat ze bij de balk horen. */
.sns-card .svm-prices .price_btw,
.sns-card .svm-prices .svm-label {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Wie minder beweging wil, krijgt geen schuif en geen zoom; de carrousel
   verspringt dan gewoon. De algemene reset dekt de duur al, dit haalt ook de
   verplaatsing bij hover weg. */
@media (prefers-reduced-motion: reduce) {
    .sns-card:hover,
    .sns-card:active {
        transform: none;
    }

    .sns-card:hover img {
        transform: none;
    }

    .sns-nav:hover,
    .sns-nav:active {
        transform: none;
    }
}

/* ---- Carrouselpijlen ----
   Zwevende bediening boven de foto's, dus behandeld als materiaal en niet als
   een dichte knop: doorschijnend met een blur erachter, een lichte bovenrand
   alsof het licht op glas valt, en een schaduw die zwaarder is omdat hij boven
   drukke beeldinhoud hangt.

   De belangrijkste wijziging zit in de reactie. Hiervoor gebeurde er pas iets
   bij hover, en dan over 0,3 seconde. Nu is er terugkoppeling op het moment van
   indrukken, in 100 ms: dat is wat een knop direct laat aanvoelen. */
.sns-nav {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    /* Een haarlijn rondom en niet alleen op de bovenrand. Over een foto tekent
       de schaduw de knop af, maar hij steekt half uit boven de lichte
       paginakleur en daar viel hij zonder rand weg tegen het wit. */
    border: 1px solid rgba(27, 21, 64, 0.1) !important;
    border-radius: 50% !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(27, 21, 64, 0.22) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    /* Alleen transform en opacity: die lopen op de compositor en haperen niet. */
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease !important;
}

.sns-nav:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(27, 21, 64, 0.28) !important;
}

/* Indrukken geeft meteen antwoord, en sneller dan het loslaten. */
.sns-nav:active {
    transform: scale(0.94);
    transition-duration: 0.1s !important;
}

.sns-nav:focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 3px;
}

/* Aan het einde van de rij: wel zichtbaar, niet meer bedienbaar. Zonder dit
   ziet de bezoeker niet dat hij aan het eind is en blijft hij klikken. */
.sns-nav.slick-disabled {
    opacity: 0.35 !important;
    pointer-events: none;
    box-shadow: none !important;
}

/* Slick maakt zijn pijlen als <button class="slick-prev">Previous</button> en
   tekent het pijltje met een ::before in het wit, bedoeld voor een donkere
   knop. Op glas is wit op wit dus onzichtbaar. We tekenen hem daarom zelf, met
   twee randen van een leeg pseudo-element: geen font, geen plaatje, geen
   aanname over wat Hexon meelevert. */
.sns-nav {
    /* De knoptekst zelf ("Previous") mag niet in beeld komen. */
    font-size: 0 !important;
    color: transparent !important;
}

.sns-nav::before {
    content: '' !important;
    display: block;
    /* Slick zet zijn eigen ::before absoluut neer; terug naar de flow, anders
       gaat het centreren van de knop er niet over. */
    position: static !important;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-navy) !important;
    border-bottom: 2px solid var(--color-navy) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    background: none !important;
    opacity: 0.75;
    transition: opacity 0.22s ease;
}

/* Op de klassenaam en niet op de volgorde, want slick hangt prev en next niet
   altijd in dezelfde ouder. De 2 pixels verschuiving zijn nodig omdat een
   chevron van twee randen zwaarder is aan de punt dan aan de opening. */
.sns-nav[class*="prev"]::before {
    transform: rotate(135deg) translate(-1px, -1px);
}

.sns-nav[class*="next"]::before {
    transform: rotate(-45deg) translate(-1px, -1px);
}

.sns-nav:hover::before {
    opacity: 1;
}

/* Wie doorschijnendheid heeft uitgezet krijgt een dichte knop terug. */
@media (prefers-reduced-transparency: reduce) {
    .sns-nav {
        background: var(--color-white) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid var(--color-border-gray) !important;
    }
}

img.sns-nav {
    padding: 14px !important;
    background: var(--color-navy) !important;
    box-sizing: border-box !important;
}

/* ================================
   WHATSAPP FLOATING BUTTON
   ================================ */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: var(--transition);
    animation: whatsappPulse 2.5s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
    animation: none;
}

@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.12); }
}

/* ================================
   MICRO-INTERACTIONS
   ================================ */
.btn:active {
    transform: translateY(-1px) scale(0.98);
}

.service-card:hover .service-icon {
    transform: scale(1.15) rotate(-4deg);
    color: var(--color-red-tekst);
}

.service-icon {
    transition: var(--transition);
}

.stat-box:hover .stat-icon {
    transform: scale(1.15);
}

.stat-icon {
    transition: var(--transition);
}

.footer-links a {
    transition: var(--transition);
}

.footer-links a:hover {
    transform: translateX(6px);
}

.nav-cta i {
    transition: transform 0.3s ease;
}

.nav-cta:hover i {
    transform: rotate(-12deg) scale(1.15);
}

.badge {
    transition: var(--transition);
}

.badge:hover {
    background: rgba(30, 177, 225, 0.3);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    /* Mobiele navbar: hamburger links, logo midden, belknop rechts */
    .navbar-content {
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .nav-toggle {
        display: block;
    }

    .logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-cta-mobile {
        display: flex;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: calc(100% + 16px);
        left: -20px;
        right: -20px;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        box-shadow: var(--shadow-md);
        border-top: 1px solid var(--color-border-gray);
        z-index: 1001;
    }

    .nav-menu.open {
        display: flex;
    }

    .nav-menu .nav-link {
        padding: 16px 24px;
        font-size: 16px;
        border-bottom: 1px solid var(--color-border-gray);
    }

    .nav-menu .nav-link::after {
        display: none;
    }

    .nav-menu .nav-cta {
        margin: 16px 24px;
        justify-content: center;
    }

    .hero {
        padding: 80px 20px;
        min-height: auto;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .section-title {
        font-size: 36px;
    }

    .services-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }

    .contact-content h2 {
        font-size: 26px;
        gap: 10px;
        flex-direction: column;
    }

    .contact-content p {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .btn-contact {
        font-size: 14px;
        padding: 14px 24px;
    }

    .stats {
        margin-top: 0;
        padding: 60px 20px;
    }

    /* Merken op mobiel: label op regel 1, merknamen op regel 2 */
    .brands {
        gap: 10px;
        font-size: 12px;
        row-gap: 12px;
    }

    .brands span {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: 2px;
    }
}

@media (max-width: 480px) {
    .logo-svg,
    .logo-container img {
        height: 40px !important;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .section-title {
        font-size: 32px;
    }

    .stats {
        padding: 60px 20px;
    }

    .services {
        padding: 60px 20px;
    }

    .products {
        padding: 60px 20px;
    }

    .contact-cta {
        padding: 60px 20px;
    }

    .hexon-container {
        padding: 0;
    }
}