/*  ============================================================
    taGGleAuto - REDESIGN (licht)
    ------------------------------------------------------------
    Witte, rustige indeling: een gesplitste hero met de tekst links
    en een beeldpaneel rechts waarop kaartjes zweven, daaronder de
    vijf producten als kaarten en een strook met vier pluspunten.

    Een schrift (montserrat), donkerblauwe tekst, de merkkleur rood
    als accent op een woord per kop en op de knoppen.

    Laadt na style.css en overschrijft de homepage, de header, het
    introductieblok en de footer. De vorige donkere versie staat als
    redesign-dark-backup.css in deze map en wordt niet geladen.
    ============================================================ */

/*  TOKENS
    --------------------------------------------- */
:root {
    --paper:      #FFFFFF;
    --paper-2:    #F6F7F9;
    --paper-3:    #FAF6F6;
    --ink:        #16202E;
    --ink-2:      #22303F;
    --muted:      #5B6675;
    --muted-2:    #8A939F;

    --brand:      #DF2227;
    --brand-dark: #C0161B;
    --brand-tint: #FDEDEE;

    --line:       #E8EBEF;
    --line-2:     #DDE2E8;

    --r-sm: 10px;
    --r:    16px;
    --r-lg: 22px;
    --r-xl: 30px;

    --wrap: 1180px;
    --gut:  clamp(20px, 4vw, 40px);

    --f-body: 'montserrat', 'redhat', system-ui, -apple-system, sans-serif;

    --ease: cubic-bezier(.22,.61,.36,1);

    --shadow-sm: 0 2px 8px rgba(22,32,46,.06);
    --shadow:    0 8px 24px rgba(22,32,46,.08);
    --shadow-lg: 0 18px 44px rgba(22,32,46,.12);
}

/*  CANVAS
    --------------------------------------------- */
body.frontpage {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    overflow-x: hidden;
}

body.frontpage ::selection {
    background: var(--brand);
    color: #fff;
    text-shadow: none;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    position: relative;
}

/*  KOPPEN
    ---------------------------------------------
    Een schrift, geen serif meer. Het accent zit in <strong>: dat
    woord wordt rood.                                             */
.dsp {
    font-family: var(--f-body);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
    color: var(--ink);
    margin: 0;
    border: 0;
    padding: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.dsp strong {
    font-weight: 800;
    color: var(--brand);
}

.dsp--xl { font-size: clamp(27px, 3.6vw, 42px); }
.dsp--lg { font-size: clamp(24px, 2.8vw, 34px); }
.dsp--md { font-size: clamp(20px, 1.9vw, 25px); }

/*  rode streep onder een woord in de kop  */
.underline {
    position: relative;
    display: inline-block;
    color: var(--brand);
}

.underline::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -.16em;
    height: 3px;
    border-radius: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease) .2s;
}

.is-in .underline::after { transform: scaleX(1); }

/*  EYEBROW - rood bolletje met kapitalen
    --------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

/*  LOOPTEKST
    --------------------------------------------- */
.lead {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.72;
    font-weight: 400;
    color: var(--muted);
    max-width: min(56ch, 100%);
    margin: 22px 0 0;
}

.lead strong { color: var(--ink); font-weight: 700; }

/*  KNOPPEN
    --------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 17px 30px;
    border-radius: 100px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

.pill--fill {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
}

.pill--fill:hover,
.pill--fill:focus-visible {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(223,34,39,.32);
}

.pill--line {
    background: #fff;
    border-color: var(--line-2);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.pill--line:hover,
.pill--line:focus-visible {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.pill__arrow {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    flex: none;
    transition: transform .35s var(--ease);
}

.pill:hover .pill__arrow { transform: rotate(45deg) translate(2px, -2px); }

/*  tekstlink
    --------------------------------------------- */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    transition: gap .35s var(--ease), color .35s var(--ease);
}

.tlink:hover { gap: 14px; color: var(--brand-dark); }

/*  SCROLL-REVEAL
    --------------------------------------------- */
.rise {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.rise.is-in { opacity: 1; transform: none; }

.rise-2 { transition-delay: .08s; }
.rise-3 { transition-delay: .16s; }
.rise-4 { transition-delay: .24s; }
.rise-5 { transition-delay: .32s; }
.rise-6 { transition-delay: .40s; }

/*  ============================================================
    HEADER - wit, met kleine pictogrammen in het menu
    ============================================================ */
body.frontpage header.top {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

body.frontpage.is-scrolled header.top {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

body.frontpage header.top > article:first-of-type {
    max-width: var(--wrap);
    padding: 18px var(--gut);
}

/*  het donkere logo, want de header is nu wit  */
body.frontpage .logo_taggleauto {
    background-image: url('../img/logo-taggleauto.svg') !important;
}

body.frontpage nav.menufixed ul > li.btn > a {
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 600;
    position: relative;
}

body.frontpage nav.menufixed ul > li.btn > a:hover { color: var(--brand); }

/*  actief item: rood met een streepje eronder  */
body.frontpage nav.menufixed ul > li.btn.active > a { color: var(--brand); }

body.frontpage nav.menufixed ul > li.btn.active > a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -9px;
    width: 62%;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

body.frontpage nav.menufixed .nav-icon { background-color: currentColor; }

body.frontpage nav.menufixed ul > li.btn.secondary > a {
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

body.frontpage nav.menufixed ul > li.btn.secondary > a:hover {
    border-color: var(--ink);
    background: #fff;
    color: var(--ink);
}

/*  style.css zet hier al een rode achtergrond met het hamburgericoon erin.
    Een eigen background-regel zou die afbeelding overschrijven, dus alleen
    de plaatsing wordt hier bijgesteld op de nieuwe headerhoogte.        */
body.frontpage .smallMenu {
    top: 17px;
}

/*  ============================================================
    HERO - tekst links, beeldpaneel rechts
    ============================================================ */
.hero {
    position: relative;
    background: var(--paper);
    padding: clamp(26px, 3vw, 40px) 0 0;
    overflow: hidden;
}

/*  de logo-plaatjes en de bewijsregel staan gecentreerd bovenaan  */
.hero__trust {
    position: relative;
    z-index: 3;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.hero__stack {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero__stack li {
    margin: 0;
    padding: 0 22px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    flex: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.hero__stack li:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.hero__stack li::after { display: none; }

.hero__stack img {
    width: auto;
    height: 26px;
    object-fit: contain;
    display: block;
}

/*  de twee kolommen  */
.hero__center {
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(30px, 3.4vw, 46px) var(--gut) clamp(20px, 2.4vw, 34px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
    z-index: 2;
}

.hero__copy .eyebrow { margin-bottom: 24px; }

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: clamp(28px, 3vw, 38px);
}

/*  drie kleine pluspunten onder de knoppen  */
.hero__usps {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: clamp(26px, 3vw, 36px) 0 0;
    padding: 0;
    list-style: none;
}

.hero__usps li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-2);
    flex: 1 1 0;
    min-width: 0;
    max-width: 17ch;
}

.hero__usps li::after { display: none; }

.hero__usps .ico {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--brand);
}

.hero__usps .ico svg { width: 100%; height: 100%; display: block; }

/*  BEELDPANEEL
    ---------------------------------------------
    Het paneel loopt aan de rechterkant door tot buiten de wrap en
    heeft links een schuine rand, zoals in het ontwerp.            */
/*  Het paneel loopt iets boven de tekstkolom uit en is wat hoger dan de
    tekst, zoals in het voorbeeld. De negatieve bovenmarge trekt het omhoog
    richting de logobalk; align-self: stretch maakt het paneel daardoor
    hoger in plaats van dat het opschuift.                              */
.hero__panel {
    position: relative;
    align-self: stretch;
    margin-top: -44px;
    margin-bottom: -12px;
    min-height: clamp(340px, 41vw, 520px);
}

.hero__shot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /*  Doorlopen tot precies de rechterrand van het scherm: de afstand van de
        rechterkant van de wrap tot de schermrand is (100vw - wrap)/2 plus de
        binnenmarge. Er zat 40px extra bij, en daardoor viel de achterkant van
        de auto buiten beeld.                                              */
    width: calc(100% + (100vw - var(--wrap)) / 2 + var(--gut));
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    overflow: hidden;
    background: var(--paper-2);
}

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

/*  DE SCHUINE RAND
    ---------------------------------------------
    Een witte vorm die over de linkerkant van het beeld ligt. Eerder deed
    clip-path dit, daarna een masker, maar Chrome tekent die beide zonder
    antialiasing: de schuine rand en de twee bochten werden een trapje. Een
    gewone svg-vorm wordt wel uitgevloeid getekend.

    De vulling volgt de achtergrond van de hero via currentColor, dus als
    --paper verandert, verandert de rand mee.

    preserveAspectRatio="none" met een viewBox van 100x100 maakt de
    coordinaten in het pad gelijk aan procenten van het paneel.          */
.hero__wedge {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    color: var(--paper);
    pointer-events: none;
}

.hero__wedge path { fill: currentColor; }

/*  ronde speelknop midden op het beeld  */
.hero__play {
    position: absolute;
    left: 46%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: clamp(58px, 6vw, 76px);
    height: clamp(58px, 6vw, 76px);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 12px 30px rgba(223,34,39,.38);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: transform .4s var(--ease), background .4s var(--ease);
}

.hero__play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--brand-dark); }

.hero__play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 17px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

/*  de zwevende kaartjes  */
.hcard {
    position: absolute;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    transition: transform .5s var(--ease);
}

.hcard:hover { transform: translateY(-4px); }

.hcard__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    white-space: nowrap;
}

.hcard__note {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-2);
    margin: 8px 0 0;
    white-space: nowrap;
}

.hcard__logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}

.hcard__logos img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: block;
    object-fit: contain;
}

/*  kaartje 1: Meta Ads, rechtsboven  */
.hcard--meta { top: 4%; right: 2%; }

/*  kaartje 2: Google Vehicle Ads, linksonder  */
.hcard--google {
    bottom: 8%;
    left: -6%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hcard--google img {
    width: 34px;
    height: 34px;
    flex: none;
    display: block;
}

.hcard--google .hcard__note { margin-top: 3px; }

/*  kaartje 3: Tekst-generator, rechtsonder, met grijze regels  */
.hcard--tekst { bottom: 2%; right: 6%; width: 190px; }

.hcard--tekst .hcard__head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hcard--tekst .hcard__head img {
    width: 22px;
    height: 22px;
    flex: none;
    display: block;
}

.hcard__lines {
    display: grid;
    gap: 7px;
    margin-top: 13px;
}

.hcard__lines span {
    height: 7px;
    border-radius: 4px;
    background: var(--line);
    display: block;
}

.hcard__lines span:nth-child(1) { width: 100%; }
.hcard__lines span:nth-child(2) { width: 86%; }
.hcard__lines span:nth-child(3) { width: 94%; }
.hcard__lines span:nth-child(4) { width: 62%; }

/*  ============================================================
    PRODUCTEN - vijf kaarten
    ============================================================ */
.prods {
    position: relative;
    background: var(--paper);
    padding: clamp(28px, 3.2vw, 44px) 0 clamp(30px, 4vw, 48px);
}

/*  Breed genoeg om 'Onze producten die jouw voorraad laten verkopen' op een
    regel te houden; op 760px viel 'laten verkopen' naar de tweede regel.  */
.prods__head {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto clamp(30px, 3.4vw, 44px);
}

.prods__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.prod {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 14px 20px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.prod:hover,
.prod:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-2);
}

.prod__shot {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-2);
}

.prod__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--ease);
}

.prod:hover .prod__shot img { transform: scale(1.05); }

/*  het ronde logo hangt over de bovenrand van het beeld  */
.prod__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(22,32,46,.20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod__badge img {
    width: 23px;
    height: 23px;
    display: block;
    object-fit: contain;
}

/*  Video en Tekst hebben een compleet app-icoon met eigen achtergrond;
    die mag het rondje bijna vullen. De platformlogo's zijn transparant
    en houden hun witte marge.                                        */
.prod__badge--fill img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.prod__body {
    padding: 20px 8px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.prod h3 {
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.prod p {
    font-family: var(--f-body);
    font-size: 13.5px;
    line-height: 1.62;
    font-weight: 400;
    color: var(--muted);
    margin: 0;
}

/*  de rode pijl onderaan  */
.prod__go {
    margin-top: 22px;
    width: 26px;
    height: 12px;
    position: relative;
    color: var(--brand);
    flex: none;
}

.prod__go::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width .4s var(--ease);
}

.prod__go::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .4s var(--ease);
}

.prod:hover .prod__go::before { width: 26px; }
.prod:hover .prod__go::after { transform: rotate(45deg) translate(3px, -3px); }

/*  ============================================================
    PLUSPUNTEN - vier vakken in een lichte strook
    ============================================================ */
.usps {
    background: var(--paper);
    padding: clamp(30px, 4vw, 48px) 0 clamp(58px, 7vw, 92px);
}

.usps__panel {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(30px, 4vw, 52px) clamp(14px, 2vw, 26px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.usp {
    text-align: center;
    padding: 0 clamp(14px, 2vw, 26px);
    border-right: 1px solid var(--line-2);
}

.usp:last-child { border-right: 0; }

.usp__ico {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--brand-tint);
    box-shadow: 0 4px 14px rgba(223,34,39,.10);
    color: var(--brand);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usp__ico svg { width: 32px; height: 32px; display: block; }

.usp h3 {
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.usp p {
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/*  ============================================================
    VMS-BAND - de voorraadsystemen waar wij op aansluiten
    ============================================================ */
.vms {
    background: var(--paper-2);
    padding: clamp(58px, 7vw, 92px) 0 clamp(48px, 6vw, 76px);
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.vms__head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto clamp(34px, 4vw, 50px);
    padding: 0 var(--gut);
}

.vms__title {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
}

.vms__title strong { color: var(--brand); font-weight: 800; }

.vms__intro {
    font-size: 15px;
    line-height: 1.68;
    color: var(--muted);
    margin: 14px 0 0;
}

/*  de band staat twee keer in de html, dat maakt de lus naadloos  */
.vms__belt {
    display: flex;
    width: max-content;
    gap: 64px;
    animation: belt 46s linear infinite;
    will-change: transform;
}

.vms__belt:hover { animation-play-state: paused; }

@keyframes belt {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.vms__belt ul {
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.vms__belt li { padding: 0; margin: 0; flex: none; }
.vms__belt li::after { display: none; }

.vms__belt img {
    height: 34px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .5;
    transition: opacity .4s var(--ease), filter .4s var(--ease);
}

.vms__belt li:hover img { filter: none; opacity: 1; }

.vms__foot {
    text-align: center;
    margin-top: clamp(34px, 4vw, 50px);
    padding: 0 var(--gut);
}

/*  ============================================================
    CIJFERS
    ============================================================ */
.fig {
    background: var(--paper);
    padding: clamp(58px, 7vw, 96px) 0;
}

.fig__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(38px, 4.5vw, 58px);
}

.fig__head .lead { margin-left: auto; margin-right: auto; }

.fig__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.fig__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 34px 24px;
    text-align: center;
}

.fig__n {
    display: block;
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(30px, 3.2vw, 42px);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--brand);
}

.fig__l {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 13px;
}

.fig__src {
    text-align: center;
    font-size: 12px;
    color: var(--muted-2);
    margin: 26px 0 0;
}

/*  ============================================================
    WAAROM - vier genummerde kaarten
    ============================================================ */
.edge {
    background: var(--paper-2);
    padding: clamp(58px, 7vw, 96px) 0;
    border-top: 1px solid var(--line);
}

.edge__top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    margin-bottom: clamp(34px, 4vw, 50px);
}

.edge__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.edge__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 26px;
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.edge__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/*  In het donkere ontwerp stond hier een foto als achtergrond. Op wit
    werkt dat niet, dus de kaart is nu tekst met een rood nummer.     */
.edge__card img { display: none; }

.edge__n {
    display: block;
    font-family: var(--f-body);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--brand);
    margin-bottom: 16px;
}

.edge__card h3 {
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.28;
    color: var(--ink);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.edge__card p {
    font-family: var(--f-body);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

/*  ============================================================
    BEREIK
    ============================================================ */
.rch {
    background: var(--paper);
    padding: clamp(58px, 7vw, 96px) 0;
}

.rch__center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 4.5vw, 70px);
    align-items: start;
}

.rch__panel {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(26px, 3vw, 38px);
}

.rch__panel_title {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 0 0 20px;
}

.rch__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
}

.rch__list li {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    color: var(--ink);
}

.rch__list li:last-child { border-bottom: 0; }
.rch__list li::after { display: none; }

.rch__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-tint);
    position: relative;
    flex: none;
}

.rch__check::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 5px;
    height: 8px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
}

.rch__list strong { font-weight: 600; color: var(--ink); }

.rch__list em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.rch__panel_note {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/*  ============================================================
    APPS
    ============================================================ */
.app2 {
    background: var(--paper-2);
    padding: clamp(58px, 7vw, 96px) 0;
    border-top: 1px solid var(--line);
}

.app2__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(34px, 4vw, 52px);
}

.app2__head .lead { margin-left: auto; margin-right: auto; }

.app2__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.app2__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: clamp(26px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.app2__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.app2__icon {
    width: 54px;
    height: 54px;
    border-radius: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}

.app2__card h3 {
    font-family: var(--f-body);
    font-size: clamp(19px, 1.7vw, 23px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.app2__card p {
    font-family: var(--f-body);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}

.app2__card .tlink { margin-top: 20px; align-self: flex-start; }

.app2__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 26px;
}

.app2__stores img {
    height: 42px;
    width: auto;
    display: block;
    border-radius: 6px;
}

/*  ============================================================
    START-BLOK - staat op elke pagina boven de footer
    ============================================================ */
.start {
    font-family: var(--f-body);
    background: var(--paper);
    padding: clamp(58px, 7vw, 96px) 0;
    border-top: 1px solid var(--line);
}

.start__center {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(36px, 4.5vw, 70px);
    align-items: start;
}

.start__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 12px;
}

.start__list li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.start__list li::after { display: none; }

.start__list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
}

.start__scope {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--muted-2);
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    max-width: min(56ch, 100%);
}

.start__form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: clamp(24px, 3vw, 36px);
}

.start__form_title {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 6px;
}

.start__form_sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 24px;
}

.start__field { margin-bottom: 15px; }

.start__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}

.start__form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.start__form input[type="text"]:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.start__form input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 17px 30px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
    transition: background .35s var(--ease), transform .35s var(--ease);
}

.start__form input[type="submit"]:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px);
}

.start__form label.error {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 6px;
}

.start__note {
    font-size: 12px;
    color: var(--muted-2);
    margin: 15px 0 0;
    text-align: center;
}

/*  ============================================================
    FOOTER
    ============================================================ */
footer {
    font-family: var(--f-body);
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding: clamp(52px, 6vw, 84px) 0 30px;
}

footer .footer__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
}

footer .footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
    gap: clamp(34px, 5vw, 70px);
    padding-bottom: clamp(34px, 4.5vw, 52px);
    border-bottom: 1px solid var(--line-2);
}

footer .footer__logo {
    display: block;
    width: 162px;
    height: 38px;
    background: url('../img/logo-taggleauto.svg') no-repeat left center;
    background-size: contain;
    margin-bottom: 20px;
}

footer .footer__pitch {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 24px;
    max-width: min(42ch, 100%);
}

footer .footer__stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    display: inline-block;
}

footer .footer__stat strong {
    display: block;
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(24px, 2.4vw, 31px);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--brand);
}

footer .footer__stat span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 7px;
}

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

footer .footer__col_title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 16px;
}

footer .footer__col ul { list-style: none; padding: 0; margin: 0; }

footer .footer__col li {
    padding: 0;
    margin: 0 0 10px;
    font-size: 14px;
}

footer .footer__col li::after { display: none; }

footer .footer__col a {
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color .3s var(--ease);
}

footer .footer__col a:hover { color: var(--brand); }

footer .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
}

footer .footer__bottom p {
    font-size: 12.5px;
    color: var(--muted-2);
    margin: 0;
}

footer .footer__legal { display: flex; gap: 22px; }

footer .footer__legal a {
    font-size: 12.5px;
    color: var(--muted-2);
    text-decoration: none;
    transition: color .3s var(--ease);
}

footer .footer__legal a:hover { color: var(--brand); }

/*  ============================================================
    RESPONSIVE
    ============================================================ */
@media screen and (max-width: 1100px) {

    .hero__center {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /*  Het paneel liep met een schuine rand door tot buiten het scherm.
        In een kolom is dat een gewoon beeld over de volle breedte. De
        negatieve marges die het paneel op breed beeld omhoog trekken moeten
        hier weg, anders schuift het beeld over de regels erboven.       */
    .hero__panel {
        min-height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .hero__shot {
        position: relative;
        width: 100%;
        height: clamp(260px, 44vw, 400px);
        border-radius: var(--r-lg);
    }

    /* de schuine rand hoort bij de tweekolomsindeling */
    .hero__wedge { display: none; }

    .hcard--google { left: 2%; }
    .hcard--tekst { right: 3%; }

    .prods__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .usps__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usp:nth-child(2) { border-right: 0; }
    .usp:nth-child(1),
    .usp:nth-child(2) { padding-bottom: 34px; border-bottom: 1px solid var(--line-2); }
    .usp:nth-child(3),
    .usp:nth-child(4) { padding-top: 34px; }

    .fig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rch__center,
    .start__center { grid-template-columns: 1fr; }

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

}

@media screen and (max-width: 860px) {

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

    .edge__top { display: block; }
    .edge__top .pill { margin-top: 24px; }

    .app2__grid { grid-template-columns: 1fr; }

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

}

@media screen and (max-width: 640px) {

    :root { --r-xl: 22px; }

    .hero__stack { gap: 9px; }
    .hero__stack li { height: 44px; padding: 0 14px; }
    .hero__stack img { height: 19px; }

    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .pill { width: 100%; }

    .hero__usps { gap: 16px; }
    .hero__usps li { max-width: none; width: 100%; font-size: 13px; }

    /*  De kaartjes zouden op een klein scherm over de auto heen vallen
        en elkaar overlappen; daar zijn ze beter weg.                  */
    .hero__shot { height: clamp(210px, 52vw, 280px); }

    .hcard--meta,
    .hcard--google,
    .hcard--tekst { display: none; }

    .prods__grid { grid-template-columns: 1fr; }
    .fig__grid { grid-template-columns: 1fr; }
    .edge__grid { grid-template-columns: 1fr; }

    .usps__panel { grid-template-columns: 1fr; }
    .usp { border-right: 0; padding: 0 10px; }
    .usp:nth-child(1),
    .usp:nth-child(2),
    .usp:nth-child(3) { padding-bottom: 28px; border-bottom: 1px solid var(--line-2); }
    .usp:nth-child(2),
    .usp:nth-child(3),
    .usp:nth-child(4) { padding-top: 28px; }

    .vms__belt,
    .vms__belt ul { gap: 40px; }

    .vms__belt img { height: 26px; }

    footer .footer__links { grid-template-columns: 1fr; }
    footer .footer__bottom { flex-direction: column; align-items: flex-start; }

}

/*  ============================================================
    BEWEGING UIT
    ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .vms__belt { animation: none; }

    .rise {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .underline::after { transform: scaleX(1); transition: none; }

    .prod:hover,
    .edge__card:hover,
    .app2__card:hover,
    .hcard:hover,
    .pill:hover,
    .hero__stack li:hover {
        transform: none;
    }

}