/* autoradar.nu: de website van AutoRadar (een product van Snijders Commerce).
   In de stijl van de app: AutoSnijders-blauw (#299CD7), indigo (#312867) en zwart (#18171A), lettertype Saira. */

@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-vf.woff") format("woff");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-italic-vf.woff") format("woff");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --blauw: #299CD7;
  --blauw-licht: #7fd0f7;
  --indigo: #312867;
  --zwart: #18171A;
  --diep: #111016;
  --wit: #ffffff;
  --tekst: #eef0f6;
  --zacht: rgba(238, 240, 246, .74);
  --stil: rgba(238, 240, 246, .56);
  --lijn: rgba(255, 255, 255, .09);
  --vlak: rgba(255, 255, 255, .035);
  --groen: #38D486;
  --oranje: #FFB01F;
  --rood: #FF5B4D;
  --font: "Saira", "Bahnschrift", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --knop: linear-gradient(180deg, #3aaee6, #2390c8);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--diep); color: var(--tekst);
  font: 400 17px/1.6 var(--font); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
svg { flex: none; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--wit); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--blauw-licht); outline-offset: 3px; }

.binnen { width: min(1180px, 100% - 40px); margin-inline: auto; }
.binnen--smal { width: min(860px, 100% - 40px); }

.naarinhoud {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px;
  background: var(--blauw); color: #fff; text-decoration: none; font-weight: 600;
}
.naarinhoud:focus { top: 12px; }

/* ------------------------------------------------------------------ knoppen en labels */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 0; border-radius: 12px; background: var(--knop); color: #fff;
  font: 600 16px/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(41, 156, 215, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.knop:hover { transform: translateY(-1px); filter: brightness(1.07); }
.knop svg { width: 18px; height: 18px; }
.knop--klein { padding: 9px 16px; font-size: 15px; border-radius: 10px; }
.knop--rand { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.knop--rand:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); filter: none; }
.knop--uit { background: rgba(255, 255, 255, .07); color: var(--stil); box-shadow: inset 0 0 0 1px var(--lijn); cursor: default; }
.knop--uit:hover { transform: none; filter: none; }

.label {
  display: inline-block; padding: 2px 8px; border-radius: 6px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; line-height: 1.6;
}
.label--top, .label--verlaagd { background: rgba(56, 212, 134, .16); color: #63e5a4; }
.label--deal { background: rgba(41, 156, 215, .2); color: var(--blauw-licht); }
.label--bijna, .label--binnenkort { background: rgba(255, 176, 31, .16); color: #ffc75a; }
.label--veiling { background: rgba(160, 140, 255, .18); color: #bcaeff; }

/* ------------------------------------------------------------------ kop */

.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(17, 16, 22, .7); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: background-color .2s ease, border-color .2s ease;
}
.kop.is-gescrold { background: rgba(17, 16, 22, .88); border-bottom-color: var(--lijn); }
.kop__binnen { display: flex; align-items: center; gap: 24px; height: 68px; width: min(1180px, 100% - 40px); margin-inline: auto; }
.merk { display: inline-flex; align-items: center; gap: 10px; color: var(--wit); text-decoration: none; }
.merk__radar { display: inline-flex; width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(41, 156, 215, .35)); }
.merk__radar img { width: 100%; height: 100%; }
.woordmerk { font-weight: 600; font-stretch: 112%; font-size: 20px; letter-spacing: .1px; line-height: 1; white-space: nowrap; }
.woordmerk b { font-weight: 800; color: var(--blauw); }
.kop__menu { display: flex; gap: 2px; margin-left: auto; }
.kop__menu a { padding: 8px 12px; border-radius: 10px; color: var(--zacht); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s, background-color .15s; }
.kop__menu a:hover { color: var(--wit); background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; overflow: hidden; padding: 72px 0 64px; }
.hero__gloed {
  position: absolute; inset: -30% -20% -10% -10%; pointer-events: none;
  background:
    radial-gradient(45% 45% at 74% 42%, rgba(41, 156, 215, .16), transparent 70%),
    radial-gradient(55% 55% at 72% 38%, rgba(49, 40, 103, .8), transparent 72%),
    radial-gradient(35% 40% at 8% 10%, rgba(49, 40, 103, .45), transparent 70%);
}
.hero__binnen { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 13px; border-radius: 999px;
  background: rgba(41, 156, 215, .12); border: 1px solid rgba(41, 156, 215, .28); color: #a6dcf6; font-size: 14px; font-weight: 500;
}
.chip__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--blauw); animation: puls 2.4s ease-out infinite; }
.hero__titel {
  margin: 0 0 22px; font-style: italic; font-weight: 800; font-stretch: 108%;
  font-size: clamp(42px, 6.2vw, 78px); line-height: 1; letter-spacing: -.5px;
}
.hero__titel em {
  font-style: italic; padding-right: .06em;
  background: linear-gradient(95deg, #8fdcff, var(--blauw) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { margin: 0 0 30px; max-width: 570px; color: var(--zacht); font-size: clamp(17px, 1.55vw, 20px); }
.keuzes { display: grid; gap: 12px; max-width: 570px; }
.keuze {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .045); border: 1px solid var(--lijn); color: var(--wit); text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.keuze:hover { transform: translateY(-1px); border-color: rgba(41, 156, 215, .6); background: rgba(41, 156, 215, .1); }
.keuze__icoon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(41, 156, 215, .16); color: var(--blauw-licht); }
.keuze__icoon svg { width: 22px; height: 22px; }
.keuze__tekst { display: grid; gap: 1px; }
.keuze__tekst strong { font-size: 17px; font-weight: 600; }
.keuze__tekst span { color: var(--stil); font-size: 14.5px; }
.keuze__pijl { margin-left: auto; padding-left: 8px; color: var(--blauw); font-size: 22px; transition: transform .2s ease; }
.keuze:hover .keuze__pijl { transform: translateX(3px); }
.hero__noot { margin: 18px 0 0; color: var(--stil); font-size: 14px; }

/* het beeld: een radar die rondgaat, een melding en een deal */
.hero__beeld { position: relative; display: grid; place-items: center; min-height: 540px; }
.radar {
  position: relative; width: min(470px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(41, 156, 215, .1), rgba(49, 40, 103, .38) 58%, rgba(17, 16, 22, .3) 74%);
  box-shadow: inset 0 0 0 1px rgba(41, 156, 215, .38), 0 0 90px -12px rgba(41, 156, 215, .3);
}
.radar__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(41, 156, 215, .22); }
.radar__ring--1 { inset: 12.5%; }
.radar__ring--2 { inset: 25%; }
.radar__ring--3 { inset: 37.5%; }
.radar__kruis {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(41, 156, 215, .16), rgba(41, 156, 215, .16)) center / 1px 100% no-repeat,
    linear-gradient(rgba(41, 156, 215, .16), rgba(41, 156, 215, .16)) center / 100% 1px no-repeat;
}
.radar__straal {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(41, 156, 215, 0) 0deg 285deg, rgba(41, 156, 215, .4) 357deg, rgba(150, 220, 255, .95) 360deg);
  animation: draai 4s linear infinite;
}
.radar__kern { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--blauw); box-shadow: 0 0 18px rgba(41, 156, 215, .9); }
/* een stip licht op als de straal erlangs komt (--d: de hoek van de stip, als tijd van een rondje van 4 s) */
.blip { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: #6fcaf5; opacity: 0; animation: blip 4s var(--d) linear infinite; }
.blip--deal { width: 14px; height: 14px; margin: -7px; background: #fff; opacity: 1; box-shadow: 0 0 22px rgba(255, 255, 255, .85); animation-name: deal; }
.blip--deal::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); opacity: 0; animation: ping 4s var(--d) ease-out infinite; }

.melding {
  position: absolute; top: 5%; left: -3%; z-index: 2; width: min(340px, 80%); padding: 12px 14px 14px; border-radius: 18px;
  background: rgba(32, 31, 41, .84); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .85);
  transition: opacity .35s ease, transform .35s ease;
}
.melding.is-weg { opacity: 0; transform: translateY(-10px) scale(.98); }
.melding__app { display: flex; align-items: center; gap: 7px; color: var(--stil); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.melding__icoon { display: inline-flex; width: 18px; height: 18px; }
.melding__icoon img { width: 100%; height: 100%; }
.melding__tijd { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.melding__kop { margin: 8px 0 3px; color: var(--wit); font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.melding__tekst { margin: 0; color: var(--zacht); font-size: 14px; line-height: 1.45; }

.dealkaart {
  position: absolute; right: -3%; bottom: 3%; z-index: 2; width: min(390px, 88%);
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px;
  background: rgba(24, 23, 30, .9); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(56, 212, 134, .45);
}
.dealkaart__foto { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(135deg, #2f4472, #1a2033); color: rgba(255, 255, 255, .78); }
.dealkaart__foto svg { width: 30px; height: 30px; }
.dealkaart__titel { margin: 0; overflow: hidden; color: var(--wit); font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dealkaart__feiten { margin: 1px 0 7px; color: var(--stil); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dealkaart__prijs { display: grid; gap: 1px; text-align: right; }
.dealkaart__prijs strong { color: var(--wit); font-size: 19px; font-weight: 700; line-height: 1.2; }
.dealkaart__marge { color: var(--blauw-licht); font-size: 12.5px; font-weight: 500; }
.groen { color: #63e5a4; font-size: 12.5px; font-weight: 600; }

/* de lampjes, net als in de app */
.lampjes { display: flex; gap: 4px; }
.lamp { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .26); }
.lamp svg { width: 16px; height: 16px; }
.lamp--groen { background: rgba(56, 212, 134, .13); color: var(--groen); box-shadow: 0 0 14px -3px rgba(56, 212, 134, .6); }
.lamp--oranje { background: rgba(255, 176, 31, .13); color: var(--oranje); box-shadow: 0 0 14px -3px rgba(255, 176, 31, .6); }
.lamp--rood { background: rgba(255, 91, 77, .14); color: var(--rood); box-shadow: 0 0 14px -3px rgba(255, 91, 77, .65); }
.lamp--groot { width: 56px; height: 56px; border-radius: 15px; }
.lamp--groot svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ feiten */

.feiten { border-block: 1px solid var(--lijn); background: rgba(255, 255, 255, .02); }
.feiten__rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feit { display: grid; gap: 2px; padding: 22px 22px; border-left: 1px solid var(--lijn); }
.feit:first-child { border-left: 0; padding-left: 0; }
.feit strong { color: var(--wit); font-size: 22px; font-weight: 800; font-style: italic; font-stretch: 108%; line-height: 1.3; }
.feit span { color: var(--stil); font-size: 14.5px; line-height: 1.45; }

/* ------------------------------------------------------------------ secties */

.sectie { position: relative; padding: 100px 0; }
.sectie--vlak { background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .012)); border-block: 1px solid var(--lijn); }
.anker { position: absolute; top: 0; left: 0; }
.sectie__kop { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.sectie__boven { margin: 0 0 10px; color: var(--blauw); font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
h2 { margin: 0 0 14px; font-style: italic; font-weight: 800; font-stretch: 106%; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.3px; }
.sectie__intro { margin: 0; color: var(--zacht); font-size: 18px; }

/* de twee kanten */
.tabs { display: flex; width: fit-content; max-width: 100%; gap: 6px; margin: 0 auto 38px; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--lijn); }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border: 0; border-radius: 11px;
  background: transparent; color: var(--zacht); font: 600 16px/1.25 var(--font); cursor: pointer; transition: color .15s, background-color .15s;
}
.tab svg { width: 20px; height: 20px; }
.tab:hover { color: var(--wit); }
.tab[aria-selected="true"] { background: var(--knop); color: #fff; box-shadow: 0 8px 22px -10px rgba(41, 156, 215, .85); }
.paneel { animation: verschijn .35s ease; }
.paneel__kop { max-width: 780px; margin: 0 auto 36px; text-align: center; }
.paneel__kop h3 { margin: 0 0 10px; font-style: italic; font-weight: 700; font-stretch: 104%; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.paneel__kop p { margin: 0; color: var(--zacht); font-size: 17px; }
.paneel__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.kenmerken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kenmerk, .reden, .stap, .lampjeslijst li, .plan, .vraag {
  background: var(--vlak); border: 1px solid var(--lijn);
}
.kenmerk { padding: 22px; border-radius: 18px; transition: border-color .2s ease, background-color .2s ease; }
.kenmerk:hover { border-color: rgba(41, 156, 215, .35); background: rgba(41, 156, 215, .05); }
.kenmerk__icoon, .reden__icoon, .stap__icoon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(41, 156, 215, .15); color: var(--blauw-licht);
}
.kenmerk__icoon svg, .reden__icoon svg, .stap__icoon svg { width: 22px; height: 22px; }
.kenmerk h4 { margin: 14px 0 6px; font-size: 17.5px; font-weight: 600; line-height: 1.3; }
.kenmerk p { margin: 0; color: var(--zacht); font-size: 15.5px; line-height: 1.55; }

.voorbeeld {
  position: sticky; top: 96px; padding: 22px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(49, 40, 103, .6), rgba(24, 23, 30, .92) 70%);
  border: 1px solid rgba(41, 156, 215, .28); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
}
.voorbeeld__label { margin: 0 0 6px; color: var(--stil); font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.voorbeeld__titel { margin: 0 0 12px; color: var(--wit); font-size: 17px; font-weight: 600; }
.voorbeeld__noot { margin: 12px 0 0; color: var(--stil); font-size: 13.5px; line-height: 1.5; }
.rekensom__lijst { display: grid; margin: 0; }
.rekensom__lijst div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .11); font-size: 15px; }
.rekensom__lijst dt { color: var(--zacht); }
.rekensom__lijst dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rekensom__lijst .rekensom__totaal { align-items: baseline; padding-top: 14px; border-bottom: 0; }
.rekensom__totaal dt { color: var(--wit); font-weight: 600; }
.rekensom__totaal dd { color: #63e5a4; font-size: 24px; font-weight: 800; font-style: italic; }

.minikaart { width: 100%; height: auto; margin: 4px 0 16px; border-radius: 14px; border: 1px solid var(--lijn); }
.minikaart .mk-ping { transform-box: fill-box; transform-origin: center; animation: mkping 2.4s ease-out infinite; }
.omdehoek__feiten { margin: -6px 0 10px; color: var(--zacht); font-size: 15px; }
.omdehoek__voordeel { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-radius: 10px; background: rgba(56, 212, 134, .13); color: #63e5a4; font-weight: 600; font-size: 15px; }
.omdehoek__voordeel svg { width: 18px; height: 18px; }

/* hoe het werkt */
.stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.stap { position: relative; overflow: hidden; padding: 28px 24px 26px; border-radius: 20px; }
.stap__nr { position: absolute; top: -18px; right: 12px; color: rgba(41, 156, 215, .1); font-size: 120px; font-weight: 900; font-style: italic; font-stretch: 110%; line-height: 1; pointer-events: none; }
.stap h3 { margin: 16px 0 6px; font-size: 20px; font-weight: 600; }
.stap p { margin: 0; color: var(--zacht); font-size: 16px; }

/* de lampjes */
.lampjes-sectie { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.lampjes-sectie__tekst > p:not(.sectie__boven) { margin: 0; color: var(--zacht); font-size: 17.5px; }
.paneelbord {
  display: flex; flex-wrap: wrap; gap: 12px; width: fit-content; max-width: 100%; margin-top: 28px; padding: 18px; border-radius: 22px;
  background: radial-gradient(120% 140% at 50% 0%, #27253b, #121118); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.lampjeslijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lampjeslijst li { display: flex; gap: 14px; padding: 18px; border-radius: 16px; }
.lampjeslijst .lamp { width: 38px; height: 38px; border-radius: 11px; }
.lampjeslijst .lamp svg { width: 22px; height: 22px; }
.lampjeslijst h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 600; }
.lampjeslijst p { margin: 0; color: var(--zacht); font-size: 14.5px; line-height: 1.5; }

/* waarom */
.redenen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.reden { padding: 24px; border-radius: 18px; }
.reden h3 { margin: 14px 0 6px; font-size: 18px; font-weight: 600; }
.reden p { margin: 0; color: var(--zacht); font-size: 15px; line-height: 1.55; }

/* prijzen */
.plannen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 920px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 22px; }
.plan--uitgelicht {
  background: linear-gradient(168deg, rgba(41, 156, 215, .17), rgba(49, 40, 103, .48) 45%, rgba(24, 23, 30, .95));
  border-color: rgba(41, 156, 215, .5); box-shadow: 0 30px 70px -30px rgba(41, 156, 215, .5);
}
.plan__badge {
  position: absolute; top: -14px; left: 28px; margin: 0; padding: 5px 13px; border-radius: 999px;
  background: var(--knop); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(41, 156, 215, .85);
}
.plan__naam { margin: 0 0 4px; font-style: italic; font-weight: 700; font-stretch: 104%; font-size: 23px; }
.plan__voor { margin: 0 0 18px; color: var(--zacht); font-size: 15.5px; }
.plan__prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.plan__prijs strong { color: var(--wit); font-size: 46px; font-weight: 800; font-style: italic; font-stretch: 106%; line-height: 1; }
.plan__prijs span { color: var(--zacht); font-size: 15px; }
.plan__jaar { margin: 8px 0 0; color: var(--blauw-licht); font-size: 15px; font-weight: 500; }
.plan__intro { align-self: flex-start; margin: 0 0 10px; }
.plan__vast { margin: 6px 0 0; color: var(--zacht); font-size: 14px; }
.plan__plus { margin: 22px 0 0; color: var(--wit); font-size: 15px; font-weight: 600; }
.plan__lijst { display: grid; gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.plan__plus + .plan__lijst { margin-top: 12px; }
.plan__lijst li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.plan__lijst svg { width: 18px; height: 18px; margin-top: 3px; color: #63e5a4; }
.plan__knop { width: 100%; margin-top: auto; }

/* download */
.download {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(49, 40, 103, .62), rgba(24, 23, 30, .94)); border: 1px solid rgba(41, 156, 215, .32);
}
.download__icoon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 20px; background: rgba(41, 156, 215, .16); color: var(--blauw-licht); }
.download__icoon svg { width: 40px; height: 40px; }
.download .label { margin: 0 0 10px; }
.download h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); }
.download__tekst > p:not(.label) { margin: 0; color: var(--zacht); }
.download__eisen { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.download__eisen li { display: inline-flex; align-items: center; gap: 7px; color: var(--zacht); font-size: 14.5px; }
.download__eisen svg { width: 17px; height: 17px; color: var(--blauw); }

/* vragen */
.vragen { display: grid; gap: 10px; }
.vraag { border-radius: 14px; transition: border-color .2s ease; }
.vraag[open] { border-color: rgba(41, 156, 215, .35); }
.vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; color: var(--wit); font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; border-radius: 14px; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary svg { width: 20px; height: 20px; color: var(--stil); transition: transform .2s ease; }
.vraag[open] summary svg { transform: rotate(180deg); }
.vraag p { margin: 0; padding: 0 20px 18px; color: var(--zacht); }

/* slot */
.slot {
  position: relative; overflow: hidden; padding: 96px 0; text-align: center; border-top: 1px solid var(--lijn);
  background: radial-gradient(60% 120% at 50% 100%, rgba(41, 156, 215, .26), transparent 70%), linear-gradient(180deg, transparent, rgba(49, 40, 103, .38));
}
.slot h2 { margin-bottom: 10px; }
.slot p { margin: 0 0 26px; color: var(--zacht); font-size: 18px; }
.slot__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* voet */
.voet { padding: 56px 0 28px; background: #0c0b10; border-top: 1px solid var(--lijn); }
.voet__binnen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.voet__merk p { max-width: 300px; margin: 12px 0 0; color: var(--stil); font-size: 15px; }
.voet__links { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 32px; }
.voet__links a { color: var(--zacht); font-size: 15px; text-decoration: none; }
.voet__links a:hover { color: var(--wit); }
.voet__bedrijf p { margin: 0 0 10px; color: var(--stil); font-size: 12.5px; letter-spacing: 1.3px; text-transform: uppercase; }
.voet__bedrijf img { width: 180px; height: auto; opacity: .92; }
.voet__onder { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--lijn); color: var(--stil); font-size: 14px; }
.voet__onder p { margin: 0; }

/* ------------------------------------------------------------------ beweging */

@keyframes draai { to { transform: rotate(360deg); } }
@keyframes blip {
  0% { opacity: 1; transform: scale(1.35); }
  12% { opacity: .9; transform: scale(1); }
  70% { opacity: .15; }
  100% { opacity: 0; transform: scale(.85); }
}
@keyframes deal {
  0% { transform: scale(1.3); }
  20%, 100% { transform: scale(1); }
}
@keyframes ping {
  0% { opacity: .9; transform: scale(.7); }
  40% { opacity: 0; transform: scale(3.4); }
  100% { opacity: 0; transform: scale(3.4); }
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(41, 156, 215, .6); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(41, 156, 215, 0); }
}
@keyframes mkping {
  0% { opacity: .7; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes verschijn { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .blip { opacity: .7; }
}

/* ------------------------------------------------------------------ kleinere schermen */

@media (max-width: 1080px) {
  .hero__binnen { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__beeld { min-height: 0; padding: 36px 0 70px; }
  .paneel__grid { grid-template-columns: minmax(0, 1fr); }
  .voorbeeld { position: static; width: 100%; max-width: 520px; margin: 0 auto; }
  .lampjes-sectie { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .redenen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kop__menu { display: none; }
  .kop .knop { margin-left: auto; }
}
@media (max-width: 780px) {
  .sectie { padding: 72px 0; }
  .feiten__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feit { padding: 18px 0 18px 18px; }
  .feit:nth-child(odd) { border-left: 0; padding-left: 0; }
  .feit:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .stappen, .plannen { grid-template-columns: minmax(0, 1fr); }
  .plannen { gap: 34px; }
  .download { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px; }
  .download .knop { justify-self: start; }
  .voet__binnen { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 44px 0 40px; }
  .kenmerken, .lampjeslijst, .redenen { grid-template-columns: minmax(0, 1fr); }
  .tabs { width: 100%; }
  .tab { flex: 1 1 0; padding: 11px 10px; font-size: 15px; }
  .melding { top: 0; left: 0; }
  .dealkaart { right: 0; bottom: 0; }
  .voet__onder { flex-direction: column; }
  .paneelbord { gap: 8px; padding: 12px; }
  .lamp--groot { width: 44px; height: 44px; border-radius: 12px; }
  .lamp--groot svg { width: 24px; height: 24px; }
}
@media (max-width: 420px) {
  .dealkaart { grid-template-columns: 52px minmax(0, 1fr); }
  .dealkaart__foto { width: 52px; height: 52px; }
  .dealkaart__prijs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-align: left; }
}