/*  ============================================================
    taGGleAuto - REDESIGN
    ------------------------------------------------------------
    Donker canvas, zwaar display-schrift met een serif-woord als
    accent, getekende cirkels en strepen, en zachte lichtvlekken
    in de merkkleur achter elk blok.

    Laadt na style.css en overschrijft de blokken op de homepage,
    de header, het CTA-blok en de footer. Losse subpaginas
    houden hun eigen (lichte) content.
    ============================================================ */

/*  FONTS
    --------------------------------------------- */
@font-face {
    font-family: 'epilogue';
    src: url('../fonts/Epilogue-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lora';
    src: url('../fonts/Lora-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'lora';
    src: url('../fonts/Lora-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/*  TOKENS
    --------------------------------------------- */
:root {
    --ink:        #08090C;
    --ink-2:      #0B0D11;
    --card:       #111318;
    --card-2:     #0C0E13;
    --paper:      #F4F4F5;
    --paper-2:    #E7E7EA;

    --brand:      #DF2227;
    --brand-lift: #FF3F44;
    --brand-dim:  #7E1215;
    --ember:      #8A3F27;

    --text:       #FFFFFF;
    --muted:      #9BA0A9;
    --muted-2:    #6C727B;
    --ink-text:   #14171C;
    --ink-muted:  #5A616B;

    --line:       rgba(255,255,255,.10);
    --line-2:     rgba(255,255,255,.18);

    --r-xs: 8px;
    --r-sm: 12px;
    --r:    20px;
    --r-lg: 28px;
    --r-xl: 40px;

    --wrap: 1280px;
    --gut:  clamp(20px, 4vw, 40px);
    --beat: clamp(72px, 9vw, 150px);

    --f-dsp:   'epilogue', 'montserrat', 'redhat', system-ui, sans-serif;
    --f-body:  'montserrat', 'redhat', system-ui, sans-serif;
    --f-serif: 'lora', Georgia, 'Times New Roman', serif;

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

/*  CANVAS
    --------------------------------------------- */
body.frontpage {
    background: var(--ink);
    color: var(--text);
    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;
    z-index: 2;
}

/*  DISPLAY-KOPPEN
    ---------------------------------------------
    .dsp is de basis. <strong> wisselt naar de serif, <em class="mark">
    krijgt de getekende cirkel. Zie inc_marks.php.                     */
.dsp {
    font-family: var(--f-dsp);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: .97;
    color: var(--text);
    margin: 0;
    border: 0;
    padding: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.dsp strong {
    font-family: var(--f-serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -.005em;
    color: inherit;
    transition: none;
}

.dsp--xl { font-size: clamp(27px, 6.4vw, 76px); }
.dsp--lg { font-size: clamp(24px, 4.4vw, 52px); }
.dsp--md { font-size: clamp(21px, 2.4vw, 33px); }
.dsp--sm { font-size: clamp(19px, 1.6vw, 24px); }

.dsp--ink { color: var(--ink-text); }

/*  getekende cirkel om een woord  */
/*  De cirkel is breder dan het woord, dus het woord krijgt links en rechts
    ruimte mee. Zonder die ruimte raakt de lijn het volgende woord.       */
.mark {
    position: relative;
    z-index: 1;
    font-style: normal;
    display: inline-block;
    padding: 0 .20em;
    margin: 0 .02em;
}

.mark__svg {
    position: absolute;
    top: -.14em;
    left: 0;
    width: 100%;
    height: 132%;
    z-index: -1;
    overflow: visible;
    pointer-events: none;
}

.mark__svg path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.is-drawn .mark__svg path {
    animation: mark-draw 1.4s var(--ease) .35s forwards;
}

@keyframes mark-draw {
    to { stroke-dashoffset: 0; }
}

/*  dubbele streep onder een kop  */
.has-ul {
    position: relative;
    display: inline-block;
}

.ul__svg {
    position: absolute;
    left: 0;
    bottom: -.40em;
    width: 100%;
    height: .32em;
    overflow: visible;
    pointer-events: none;
}

.ul__svg path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2.2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.is-drawn .ul__l1 { animation: mark-draw .9s var(--ease) .25s forwards; }
.is-drawn .ul__l2 { animation: mark-draw .9s var(--ease) .55s forwards; }

/*  EYEBROW
    --------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 20px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--brand);
    flex: none;
}

.eyebrow--ink { color: var(--ink-muted); }

/*  LOOPTEKST
    --------------------------------------------- */
.lead {
    font-family: var(--f-body);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.66;
    font-weight: 400;
    color: var(--muted);
    max-width: min(62ch, 100%);
    margin: 22px 0 0;
}

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

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

.pill:hover,
.pill:focus-visible {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

.pill--fill {
    background: var(--brand);
    color: #fff;
}

.pill--fill:hover,
.pill--fill:focus-visible {
    background: var(--brand-lift);
    border-color: var(--brand-lift);
}

.pill--ghost {
    border-color: var(--line-2);
}

.pill--ghost:hover {
    border-color: var(--text);
    background: var(--text);
    color: var(--ink);
}

.pill--ink {
    color: var(--ink-text);
    border-color: rgba(20,23,28,.22);
}

.pill--ink:hover {
    background: var(--ink-text);
    border-color: var(--ink-text);
    color: #fff;
}

.pill__arrow {
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
    flex: none;
    margin-left: 2px;
}

/*  tekstlink met streep die uitschuift  */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand);
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: color .35s var(--ease);
}

.tlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.tlink:hover { color: var(--brand-lift); }
.tlink:hover::after { transform: scaleX(1); }

/*  LICHTVLEK
    ---------------------------------------------
    Grote, sterk uitgelopen cirkel in de merkkleur. Vervangt de
    zware SVG-blurs van het origineel; kost niets aan performance. */
.glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.glow--brand { background: radial-gradient(circle closest-side, rgba(223,34,39,.34) 0%, rgba(223,34,39,.11) 45%, transparent 72%); }
.glow--ember { background: radial-gradient(circle closest-side, rgba(138,63,39,.30) 0%, rgba(138,63,39,.09) 48%, transparent 74%); }
.glow--cool  { background: radial-gradient(circle closest-side, rgba(58,74,112,.28) 0%, rgba(58,74,112,.08) 48%, transparent 74%); }

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

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

.rise-2 { transition-delay: .10s; }
.rise-3 { transition-delay: .20s; }
.rise-4 { transition-delay: .30s; }
.rise-5 { transition-delay: .40s; }
.rise-6 { transition-delay: .50s; }

/*  ============================================================
    HEADER - transparant over de hero, vast na het scrollen
    ============================================================ */
body.frontpage header.top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
}

body.frontpage.is-scrolled header.top {
    background: rgba(8,9,12,.86);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom-color: var(--line);
}

body.frontpage header.top > article:first-of-type {
    padding-top: 22px;
    padding-bottom: 22px;
    transition: padding .45s var(--ease);
}

body.frontpage.is-scrolled header.top > article:first-of-type {
    padding-top: 14px;
    padding-bottom: 14px;
}

/*  Het witte logo wordt al door style.css op .frontpage gezet, dus daar
    hoeft hier niets meer te gebeuren.                                  */

/*  menu-items in het licht  */
body.frontpage nav.menufixed ul > li.btn > a {
    color: rgba(255,255,255,.82);
    font-family: var(--f-body);
    font-weight: 600;
}

body.frontpage nav.menufixed ul > li.btn > a:hover,
body.frontpage nav.menufixed ul > li.btn.active > a {
    color: #fff;
}

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

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

body.frontpage .smallMenu {
    color: #fff;
    border-color: var(--line-2);
}

/*  ============================================================
    HERO - videowand van eigen productiewerk
    ============================================================ */
.hero {
    position: relative;
    min-height: min(100svh, 980px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ink);
    padding: 128px 0 clamp(70px, 8vw, 110px);
    isolation: isolate;
}

/*  de wand zelf: twee rijen tegels die tegen elkaar in schuiven  */
.hero__wall {
    position: absolute;
    inset: -6% -4%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    /* iets omhoog geschoven zodat de naad tussen de twee rijen niet precies
       achter de kop uitkomt */
    transform: scale(1.08) translateY(-5%);
    filter: grayscale(.4) blur(1.5px);
}

.wall__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    flex: none;
    will-change: transform;
}

.wall__row--a { animation: wall-a 78s linear infinite; }
.wall__row--b { animation: wall-b 92s linear infinite; }

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

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

/*  De tegels schalen mee met de hoogte van het scherm, zodat twee rijen de
    hero altijd vullen en er geen kale randen boven of onder overblijven.  */
.wall__t {
    height: clamp(300px, 43vh, 460px);
    border-radius: var(--r);
    overflow: hidden;
    flex: none;
    background: var(--card);
}

.wall__t--w { width: calc(clamp(300px, 43vh, 460px) * 1.7); }
.wall__t--t { width: calc(clamp(300px, 43vh, 460px) * 0.84); }

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

/*  sluier: houdt de kop leesbaar en duwt de wand naar de achtergrond  */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 62% at 50% 46%, rgba(8,9,12,.96) 0%, rgba(8,9,12,.88) 42%, rgba(8,9,12,.72) 100%),
        linear-gradient(to bottom, var(--ink) 0%, rgba(8,9,12,.62) 18%, rgba(8,9,12,.60) 74%, var(--ink) 100%);
}

.hero__glow-1 {
    width: 62vw;
    height: 62vw;
    left: -22vw;
    top: -20vw;
    z-index: 1;
    opacity: .7;
}

.hero__glow-2 {
    width: 48vw;
    height: 48vw;
    right: -18vw;
    bottom: -22vw;
    z-index: 1;
    opacity: .7;
}

.hero__inner {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gut);
}

/*  bewijsregel met de logo-stapel  */
.hero__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(26px, 3.4vw, 44px);
}

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

/*  De logo's van de voorraadsystemen zijn liggende woordmerken. In een rondje
    geperst wordt daar niets van leesbaar, dus ze staan in een liggend plaatje
    op maat van het logo zelf.                                              */
.hero__stack {
    flex-wrap: wrap;
    gap: 8px;
}

.hero__stack li {
    margin: 0;
    padding: 0 12px;
    height: 34px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.94);
    flex: none;
    transition: transform .4s var(--ease);
}

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

.hero__stack img {
    width: auto;
    height: 18px;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}

.hero__trust_text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    margin: 0;
}

.hero__sub {
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.62;
    color: rgba(255,255,255,.74);
    max-width: min(60ch, 100%);
    margin: clamp(24px, 2.6vw, 34px) auto 0;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(30px, 3.2vw, 42px);
}

.hero__note {
    font-size: 13px;
    color: var(--muted-2);
    margin: 20px 0 0;
}

/*  ============================================================
    LICHTE PLAAT - koppelingen + wat wij doen
    ============================================================ */
.slab {
    position: relative;
    z-index: 3;
    background: var(--paper);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin-top: calc(var(--r-xl) * -1);
    color: var(--ink-text);
}

.slab__end {
    height: var(--r-xl);
    background: var(--ink);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin-top: calc(var(--r-xl) * -1);
    position: relative;
    z-index: 4;
}

/*  VMS-LOGOWAND
    --------------------------------------------- */
.vms {
    padding: clamp(58px, 7vw, 92px) 0 clamp(34px, 4vw, 52px);
    overflow: hidden;
}

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

.vms__title {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(19px, 1.9vw, 26px);
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink-text);
    margin: 0;
}

.vms__title strong {
    font-family: var(--f-serif);
    font-weight: 400;
    font-style: italic;
    color: inherit;
}

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

/*  de band loopt door, dus de rij staat twee keer in de html  */
.vms__belt {
    display: flex;
    width: max-content;
    gap: 78px;
    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: 78px;
    padding: 0;
    margin: 0;
    list-style: none;
}

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

.vms__belt img {
    height: 40px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.06);
    opacity: .55;
    transition: opacity .45s var(--ease), filter .45s 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);
}

/*  ============================================================
    WAT WIJ DOEN - zes kaarten, inhoud onderaan uitgelijnd
    ============================================================ */
.exp {
    padding: clamp(34px, 4vw, 52px) 0 clamp(78px, 9vw, 128px);
}

.exp__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: clamp(38px, 4.4vw, 60px);
}

.exp__head_text { max-width: min(46ch, 100%); }

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

.exp__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 430px;
    padding: 34px 30px;
    border-radius: var(--r);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: background .5s var(--ease), transform .5s var(--ease);
}

.exp__card:hover {
    background: var(--ink);
    transform: translateY(-4px);
}

/*  lichtvlek die bij hover opkomt  */
.exp__card_glow {
    position: absolute;
    width: 130%;
    height: 130%;
    left: -34%;
    top: -46%;
    opacity: 0;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(223,34,39,.50) 0%, rgba(223,34,39,.16) 45%, transparent 72%);
    transition: opacity .55s var(--ease);
}

.exp__card:hover .exp__card_glow { opacity: 1; }

.exp__num {
    position: absolute;
    top: 26px;
    right: 30px;
    z-index: 2;
    font-family: var(--f-serif);
    font-size: 17px;
    color: rgba(20,23,28,.28);
    transition: color .5s var(--ease);
}

.exp__card:hover .exp__num { color: rgba(255,255,255,.5); }

/*  Het pictogram staat in een vlakje, zodat de bovenkant van de kaart niet
    leeg blijft. De lijntekeningen zijn dun; op 34px met een getint vlakje
    eromheen houden ze genoeg gewicht om gezien te worden.

    Het masker zit op ::before en wordt als één shorthand geschreven. Losse
    mask-longhands over meerdere regels verdeeld pakken in Chrome niet
    betrouwbaar op wanneer mask-image in een andere regel staat.          */
.exp__icon {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: rgba(223,34,39,.09);
    border: 1px solid rgba(223,34,39,.20);
    transition: background .5s var(--ease), border-color .5s var(--ease);
}

/*  De pictogrammen zijn zwarte lijntekeningen. Op het witte vlak blijven ze
    zwart staan; zodra de kaart omkleurt naar donker draait invert(1) ze naar
    wit. Dat is minder eigenwijs dan een mask-truc en werkt overal.        */
.exp__icon img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    display: block;
    transition: filter .5s var(--ease);
}

.exp__card:hover .exp__icon {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.20);
}

.exp__card:hover .exp__icon img { filter: invert(1); }

.exp__body {
    position: relative;
    z-index: 2;
}

.exp__card h3 {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(21px, 1.7vw, 25px);
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--ink-text);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    transition: color .5s var(--ease);
}

/*  De teksten zijn niet even lang. Omdat de inhoud onderaan uitgelijnd staat,
    zou de kaart met de kortste tekst zijn kop hoger zetten dan zijn buren en
    staat de rij scheef. Een vaste hoogte van vijf regels houdt alle koppen op
    één lijn; de clamp is er alleen als vangnet voor langere teksten later.  */
.exp__card p {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--ink-muted);
    margin: 0;
    height: 8em;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .5s var(--ease);
}

/*  De chipsregel is ook een <p> en moet dus zwaarder wegen dan de regel
    hierboven, anders krijgt hij de clamp en de hoogte van de lopende tekst.
    Hij wikkelt op de ene kaart wel en op de andere niet, dus twee regels
    liggen hier vast - anders schuiven de koppen alsnog uit elkaar.        */
.exp__card .exp__chips {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.5;
    color: rgba(20,23,28,.45);
    margin: 18px 0 0;
    height: 3em;
    display: block;
    overflow: hidden;
    transition: color .5s var(--ease);
}

.exp__card:hover h3 { color: #fff; }
.exp__card:hover p { color: rgba(255,255,255,.76); }
.exp__card:hover .exp__body .exp__chips { color: rgba(255,255,255,.5); }

.exp__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    margin-top: 22px;
}

.exp__card:hover .exp__more { color: #fff; }

.exp__more_arrow {
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform .4s var(--ease);
}

.exp__card:hover .exp__more_arrow { transform: rotate(45deg) translate(3px, -3px); }

/*  ============================================================
    CIJFERS - kaarten met een verlopende rand
    ============================================================ */
.fig {
    position: relative;
    padding: clamp(78px, 9vw, 130px) 0 clamp(56px, 6vw, 86px);
    background: var(--ink);
    overflow: hidden;
}

.fig__glow {
    width: 70vw;
    height: 70vw;
    right: -26vw;
    top: -24vw;
}

.fig__head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(44px, 5vw, 68px);
}

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

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

/*  Rand van 1px die van de merkkleur naar het canvas verloopt.
    Twee achtergronden op hetzelfde element: de bovenste vult het vlak
    binnen de rand, de onderste de rand zelf. Dat gaat via background-clip,
    zonder extra element en zonder z-index-gedoe.                        */
.fig__card {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 40px 26px;
    text-align: center;
    background-image:
        linear-gradient(var(--card-2), var(--card-2)),
        linear-gradient(to bottom, var(--brand) 0%, var(--ember) 48%, var(--card-2) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.fig__card:nth-child(even) {
    background-image:
        linear-gradient(var(--card-2), var(--card-2)),
        linear-gradient(to top, var(--brand) 0%, var(--ember) 48%, var(--card-2) 100%);
}

.fig__n {
    display: block;
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(34px, 3.6vw, 50px);
    letter-spacing: -.035em;
    line-height: 1;
    color: #fff;
}

.fig__l {
    display: block;
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    margin-top: 14px;
}

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

/*  ============================================================
    WAAROM - vier genummerde kaarten
    ============================================================ */
.edge {
    position: relative;
    padding: clamp(60px, 7vw, 100px) 0 clamp(78px, 9vw, 130px);
    background: var(--ink);
    overflow: hidden;
}

.edge__glow {
    width: 56vw;
    height: 56vw;
    left: -22vw;
    bottom: -22vw;
}

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

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

/*  Het beeld is hier achtergrond, geen inhoud.
    De stills komen uit gegenereerde advertenties en hebben hun eigen tekst
    en prijzen al in beeld. Vol uitgelicht vecht dat met de kop van de kaart,
    dus het beeld staat sterk gedempt en ontkleurd achter een donkere plaat:
    je ziet dat er een auto staat, je leest het niet mee.                  */
.edge__card {
    position: relative;
    min-height: 470px;
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 28px;
    isolation: isolate;
    background: var(--card);
}

.edge__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    opacity: .20;
    filter: grayscale(1) contrast(1.05) blur(1.5px);
    transition: transform 1.1s var(--ease), opacity .55s var(--ease);
}

.edge__card:hover img { transform: scale(1.06); opacity: .3; }

/*  donkere sluier, verdwijnt bij hover  */
.edge__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(to top, rgba(8,9,12,.96) 0%, rgba(8,9,12,.74) 46%, rgba(8,9,12,.50) 100%);
    transition: opacity .55s var(--ease);
}

/*  wit dat vanaf de onderkant vol loopt  */
.edge__card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    background: #fff;
    transition: height .8s var(--ease);
}

.edge__card:hover::after { opacity: 0; }
.edge__card:hover::before { height: 100%; }

.edge__card h3 {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(19px, 1.55vw, 23px);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    transition: color .55s var(--ease);
}

/*  De teksten zijn niet even lang en de inhoud staat onderaan uitgelijnd,
    dus een vaste hoogte van zes regels houdt de vier koppen op één lijn. */
.edge__card p {
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,.78);
    margin: 0;
    height: 9.6em;
    transition: color .55s var(--ease);
}

.edge__card:hover h3 { color: var(--ink-text); }
.edge__card:hover p { color: var(--ink-muted); }

.edge__n {
    position: absolute;
    top: 26px;
    left: 28px;
    font-family: var(--f-serif);
    font-size: 26px;
    color: rgba(255,255,255,.7);
    transition: color .55s var(--ease);
}

.edge__card:hover .edge__n { color: var(--brand); }

/*  ============================================================
    OUTPUT - dit maken wij van jouw voorraad
    ============================================================ */
.out {
    position: relative;
    padding: clamp(78px, 9vw, 130px) 0;
    background: var(--ink-2);
    overflow: hidden;
}

.out__glow {
    width: 60vw;
    height: 60vw;
    right: -24vw;
    top: 10%;
}

.out__head {
    max-width: 820px;
    margin: 0 0 clamp(44px, 5vw, 66px);
}

.out__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 22px;
}

.out__item {
    display: flex;
    flex-direction: column;
}

.out__shot {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
    aspect-ratio: 16 / 10;
    margin-bottom: 22px;
}

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

.out__item:hover .out__shot img { transform: scale(1.05); }

.out__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,9,12,.72) 0%, transparent 52%);
    pointer-events: none;
}

/*  Tweede variant: een schermafbeelding of een verticale advertentie hoort
    niet volgekaderd te worden. Die staat ingelijst op een donkere plaat,
    met zijn eigen verhouding intact.                                      */
.out__shot--pad {
    padding: 20px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(223,34,39,.16) 0%, transparent 70%),
        linear-gradient(160deg, #171A20 0%, #0C0E13 100%);
    border: 1px solid var(--line);
    box-sizing: border-box;
}

/*  object-fit: contain schaalt de afbeelding tot hij helemaal in het vak past.
    Dat is hier het punt: een staande advertentie of een telefoonschermpje mag
    niet doormidden gesneden worden, ook al blijft er links en rechts ruimte
    over. Die ruimte is de donkere plaat, en die hoort erbij.               */
.out__shot--pad img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.out__shot--pad::after {
    background: linear-gradient(to top, rgba(8,9,12,.55) 0%, transparent 42%);
}

.out__tag {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(8,9,12,.62);
    border: 1px solid var(--line-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    padding: 8px 15px;
}

.out__tag b {
    color: var(--brand-lift);
    font-weight: 700;
}

.out__item h3 {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(19px, 1.6vw, 23px);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.out__item p {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.62;
    color: var(--muted);
    margin: 0 0 12px;
}

.out__item .tlink { margin-top: 6px; }

/*  ============================================================
    BEREIK - waar de auto's terechtkomen
    ============================================================ */
.rch {
    position: relative;
    padding: clamp(78px, 9vw, 130px) 0;
    background: var(--ink);
    overflow: hidden;
}

.rch__glow {
    width: 54vw;
    height: 54vw;
    left: -22vw;
    top: 6%;
}

.rch__center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.rch__panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3vw, 40px);
}

.rch__panel_title {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 22px;
}

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

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

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

.rch__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(223,34,39,.16);
    border: 1px solid rgba(223,34,39,.5);
    position: relative;
    flex: none;
}

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

.rch__list strong {
    font-family: var(--f-body);
    font-weight: 600;
    color: #fff;
}

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

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

/*  ============================================================
    APPS - twee kaarten
    ============================================================ */
.app2 {
    position: relative;
    padding: clamp(78px, 9vw, 130px) 0;
    background: var(--ink-2);
    overflow: hidden;
}

.app2__glow {
    width: 50vw;
    height: 50vw;
    right: -20vw;
    bottom: -20vw;
}

.app2__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 62px);
}

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

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

.app2__card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3vw, 42px);
    display: flex;
    flex-direction: column;
    transition: border-color .5s var(--ease), transform .5s var(--ease);
}

.app2__card:hover {
    border-color: rgba(223,34,39,.45);
    transform: translateY(-4px);
}

.app2__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-xs);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 24px;
}

.app2__card h3 {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(21px, 1.8vw, 26px);
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

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

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

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

.app2__stores img {
    height: 44px;
    width: auto;
    display: block;
    border-radius: 6px;
    opacity: .85;
    transition: opacity .4s var(--ease);
}

.app2__stores a:hover img { opacity: 1; }

/*  ============================================================
    START-BLOK - staat op elke pagina boven de footer
    ============================================================ */
/*  Dit blok en de footer staan op elke pagina, dus ook op pagina's die hun
    eigen basisschrift meebrengen. Het schrift wordt hier daarom expliciet
    gezet; .dsp zet daarbinnen zelf het displayschrift weer terug.        */
.start,
footer {
    font-family: var(--f-body);
}

.start {
    position: relative;
    padding: clamp(78px, 9vw, 130px) 0;
    background: var(--ink);
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.start__glow-1 {
    width: 60vw;
    height: 60vw;
    left: -22vw;
    top: -24vw;
}

.start__glow-2 {
    width: 44vw;
    height: 44vw;
    right: -18vw;
    bottom: -20vw;
}

.start__center {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(40px, 5vw, 76px);
    align-items: start;
}

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

.start__list li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0;
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,.82);
}

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

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

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

/*  formulier  */
.start__form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(26px, 3vw, 38px);
    position: relative;
}

.start__form_title {
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: 19px;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 6px;
}

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

.start__field { margin-bottom: 16px; }

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

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

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

.start__form input[type="text"]::placeholder { color: var(--muted-2); }

.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;
    transition: background .4s var(--ease), transform .4s var(--ease);
}

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

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

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

/*  ============================================================
    FOOTER
    ============================================================ */
footer {
    background: var(--ink);
    border-top: 1px solid var(--line);
    padding: clamp(58px, 7vw, 92px) 0 34px;
}

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(36px, 5vw, 76px);
    padding-bottom: clamp(38px, 4.5vw, 58px);
    border-bottom: 1px solid var(--line);
}

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

footer .footer__pitch {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 26px;
    max-width: min(42ch, 100%);
}

footer .footer__stat {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 20px 22px;
    display: inline-block;
}

footer .footer__stat strong {
    display: block;
    font-family: var(--f-dsp);
    font-weight: 900;
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -.035em;
    line-height: 1;
    color: #fff;
}

footer .footer__stat span {
    display: block;
    font-family: var(--f-body);
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
}

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

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

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

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

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

footer .footer__col a {
    font-family: var(--f-body);
    font-size: 14px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: color .35s var(--ease);
}

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

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

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

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

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

footer .footer__legal a:hover { color: #fff; }

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

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

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

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

}

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

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

    .wall__t { height: 240px; }
    .wall__t--w { width: 400px; }
    .wall__t--t { width: 200px; }

    .exp__head,
    .edge__top {
        display: block;
    }

    .exp__head_text { max-width: none; }
    .exp__head .pill,
    .edge__top .pill { margin-top: 26px; }

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

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

}

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

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

    /*  HERO OP EEN TELEFOON
        De twee knoppen passen niet naast elkaar, de bewijsregel moet kunnen
        afbreken en de logo-plaatjes worden kleiner. Zonder dit loopt de hero
        aan beide kanten uit het beeld.                                     */
    .hero { padding: 104px 0 66px; }

    .hero__cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero__cta .pill { width: 100%; }

    .hero__trust { gap: 12px; }

    .hero__stack { gap: 6px; }

    .hero__stack li { height: 28px; padding: 0 9px; }

    .hero__stack img { height: 14px; }

    .hero__trust_text {
        font-size: 10px;
        letter-spacing: .12em;
        line-height: 1.5;
    }

    .hero__sub { font-size: 15px; }

    .vms__title { font-size: 18px; }

    .exp__card { padding: 26px 22px; }

    .exp__icon { width: 48px; height: 48px; top: 22px; left: 22px; }

    .exp__icon img { width: 28px; height: 28px; margin: -14px 0 0 -14px; }

    .rch__list li { grid-template-columns: 20px 1fr; row-gap: 2px; }

    .rch__list em { grid-column: 2; }

    .start__form { padding: 22px 18px; }

    .exp__grid,
    .out__grid,
    .edge__grid { grid-template-columns: 1fr; }

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

    .exp__card { min-height: 0; }
    .edge__card { min-height: 300px; }

    /*  De vaste teksthoogtes zijn er alleen om kaarten binnen een rij op één
        lijn te houden. In één kolom is er geen rij meer en leveren ze alleen
        een gat onder de tekst op, dus daar gaan ze eruit.                  */
    .exp__card p,
    .exp__card .exp__chips,
    .edge__card p {
        height: auto;
        display: block;
        -webkit-line-clamp: none;
    }

    .wall__t { height: 190px; }
    .wall__t--w { width: 300px; }
    .wall__t--t { width: 150px; }

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

    .vms__belt img { height: 32px; }

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

}

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

    .wall__row--a,
    .wall__row--b,
    .vms__belt {
        animation: none;
    }

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

    .mark__svg path,
    .ul__svg path {
        stroke-dashoffset: 0;
        animation: none;
    }

    .exp__card:hover,
    .app2__card:hover,
    .pill:hover {
        transform: none;
    }

}