/* Sitevlot landingspagina — losse stylesheet, laadt alleen op "/" bovenop app.css.
   Opzet geleend van de grote bouwers (Squarespace/Wix/Durable/Hostinger):
   korte kop, product in de hero, echte sites als bewijs, één herhaalde actie. */

/* Donker palet, afgeleid van de hero. Alles staat onder .lp / .lp-pagina, dus de
   wizard en de klantsites blijven ongemoeid. */
.lp{--ink:#fff;--muted:#9ba6b8;--lijn:rgba(255,255,255,.13);--zacht:#101319;
    --vlak:#151920;--bg:#0b0d11;--accent:#8ba9ff;
    --radius:16px;--maxw:1180px;background:var(--bg);color:#e8ecf3}
/* ---------- bewegingstaal ----------
   Uit de draaiende squarespace.com gelezen met animatie_inventaris.py, niet geschat.
   Zij hebben 707 bewegende elementen tegen onze 74, en dat verschil zit niet in één
   grote animatie maar in één kromme die overal terugkomt:
     213x  color .3s ease          — élke link reageert
     120x  background .3s ease     — élke knop reageert
     175x  cubic-bezier(.645,.045,.355,1) op .25-.5s voor transform/opacity/schaduw
   Daarom hier drie tokens in plaats van vijf losse krommen door de pagina heen. */
.lp-pagina{background:#0b0d11;
  --soepel:cubic-bezier(.645,.045,.355,1);  /* hun standaard: zacht aan, zacht uit */
  --glij:cubic-bezier(.3,.09,.25,1);        /* de waaier: lange uitloop (gemeten) */
  --vlot:.3s}
.lp section{position:relative}
.lp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lp .wrap.smal{max-width:820px}
.lp h1,.lp h2,.lp h3{font-family:'Sora',sans-serif;letter-spacing:-.02em}
.lp .eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lp .sec{padding:96px 0}
.lp .sec.tint{background:var(--zacht)}
.lp .sec{background:var(--bg)}
.lp .sec.dark{background:#0b1220;color:#eef2f9}
.lp .sec.dark h2,.lp .sec.dark h3{color:#fff}
.lp .sec.dark .lead{color:#9fb0c9}
.lp .kop{max-width:720px}
.lp .kop.midden{margin:0 auto;text-align:center}
.lp h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;margin-bottom:14px;
  text-wrap:balance}
.lp .lead{color:var(--muted);font-size:1.06rem;max-width:62ch}
.lp .kop.midden .lead{margin-inline:auto}

/* ---------- hero ---------- */
/* Opzet gemeten op squarespace.com: schermvullend beeld, transparante nav eroverheen,
   gecentreerde kop met één actie, en onderaan een waaier van échte klantsites — geen
   browservenster eromheen, alleen de pagina zelf met een zachte hoek. De achtergrond
   hoort bij de site die vooraan staat en wisselt met de waaier mee. */
/* kaartmaat staat op de hero zelf: de ruimte onder de tekst wordt eruit berekend,
   zodat kop en waaier elkaar nooit raken. De kaart staat hier hélemaal in beeld
   (squarespace snijdt hem af, maar dan zie je de site niet compleet), dus de
   maat is begrensd op de schermhoogte: tekst en kaart moeten er samen op. */
.lp-hero{--kw:min(660px,46vw,58svh);--kh:calc(var(--kw) / 1.6);--onder:52px;
  --kaarth:calc(var(--kh) + var(--onder));
  position:relative;height:100svh;min-height:600px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;color:#fff;padding:92px 24px calc(var(--kaarth) + 30px);
  text-align:center;background:#0d0f13}

/* achtergronden gestapeld; alleen de actieve is zichtbaar. De poster is de foto
   van dezelfde site, dus zonder video (mobiel, save-data, trage lijn) klopt het
   beeld nog steeds — er valt nooit een zwart gat. */
.hero-sfeer{position:absolute;inset:0}
.hero-sfeer .hero-study{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);transition:opacity .95s ease-in-out,transform 9s ease-out}
.hero-sfeer .hero-study.aan{opacity:1;transform:scale(1)}
/* zwaarder dan bij een foto: de clips lopen van bijna zwart (cameralens) tot licht
   (bloesem, croissants), en de kop moet op alle acht even goed leesbaar blijven */
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,10,14,.82) 0%,rgba(8,10,14,.58) 30%,rgba(8,10,14,.66) 60%,rgba(8,10,14,.94) 100%),
  radial-gradient(72% 48% at 50% 36%,rgba(8,10,14,.5) 0%,rgba(8,10,14,.78) 100%)}

.hero-inhoud{position:relative;z-index:3;max-width:940px;width:100%}
.lp-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.06;letter-spacing:-.025em;
  margin-bottom:28px;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.startform{display:flex;gap:8px;max-width:520px;margin:0 auto;
  background:#fff;border-radius:12px;padding:6px 6px 6px 8px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8)}
.startform input{flex:1;padding:13px 14px;border:none;font:inherit;background:none;color:#0b1220}
.startform input:focus{outline:none}
.startform button{padding:14px 26px;border:none;border-radius:8px;background:#0b1220;color:#fff;
  font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s ease}
.startform button:hover{background:var(--accent)}
.micro{margin-top:16px;font-size:.9rem;color:rgba(255,255,255,.82)}
/* tweede ingang: de setup-wizard voor wie nog niet weet wat hij wil */
.micro-link{display:block;margin-top:10px;color:#fff;opacity:.85;
  text-decoration:underline;text-underline-offset:3px}
.micro-link:hover{opacity:1}

/* ---------- waaier: de sites zelf, licht gekanteld ---------- */
/* Maatvoering 1:1 van squarespace.com: kaart 660x412, buurkaart een kaartbreedte
   opzij, 2° gedraaid, 12% kleiner en 5% lager — alsof ze op een boog liggen. */
.waaier{position:absolute;z-index:2;left:0;right:0;height:var(--kh);
  bottom:var(--onder)}
/* Beweging 1:1 van squarespace.com, per animatieframe bemonsterd (meet_carrousel.py):
   ~800ms per stap met een kromme die zacht aanzet, doorglijdt en lang uitremt —
   op 0,8s heeft hij 79% afgelegd, wij hadden op dat punt 92%. De oude kromme
   (.165,.84,.44,1) was op 15% van de tijd al over de helft: schieten, dan zweven. */
.waaier-kaart{position:absolute;left:50%;top:0;width:var(--kw);height:var(--kh);
  margin-left:calc(var(--kw) / -2);border-radius:10px;overflow:hidden;display:block;
  opacity:0;pointer-events:none;box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
  transition:transform .8s var(--glij),opacity .8s var(--glij)}
.waaier-kaart img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  pointer-events:none}
.waaier{cursor:grab;touch-action:pan-y}
.waaier:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
.waaier.sleept{cursor:grabbing}
.waaier.sleept .waaier-kaart{transition:transform .35s var(--soepel),opacity .35s ease}

/* zelf bladeren: knoppen op de schermranden — midden op een buurkaart dekken ze
   net het stuk site af dat je wilt zien */
/* verticaal in het midden van de kaart */
.waaier-knop{position:absolute;z-index:12;bottom:calc(var(--onder) + var(--kh) * .5 - 23px);
  width:46px;height:46px;opacity:.55;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(12,14,18,.42);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:background .25s ease,border-color .25s ease,opacity .25s ease,transform .25s var(--soepel)}
.waaier-knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lp-hero:hover .waaier-knop{opacity:1}
.waaier-knop:hover{background:rgba(12,14,18,.78);border-color:rgba(255,255,255,.55)}
.waaier-knop.vorige{left:22px}
.waaier-knop.volgende{right:22px}
.waaier-knop.vorige:hover{transform:translateX(-3px)}
.waaier-knop.volgende:hover{transform:translateX(3px)}
.waaier-knop:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:900px){
  .lp-hero{--kw:min(560px,76vw,54svh)}

}
@media(max-width:560px){
  .startform{flex-direction:column;border-radius:14px;padding:8px}
  .startform button{width:100%}
  /* de kaart staat hier compleet in beeld, dus de tekst mag weer centreren:
     flexbox verdeelt de overgebleven ruimte dan gelijk boven en onder */
  .lp-hero{--kw:min(94vw,46svh);padding-top:88px}
  .waaier-knop{display:none}          /* op een telefoon is swipen de bediening */
}
/* laptophoogtes (768-860px): kop iets kleiner, de waaier juist groter zodat de
   compositie strak blijft in plaats van een dode band boven de kaarten.
   Alleen op brede schermen: een telefoon is óók korter dan 860px en moet zijn
   eigen maten houden. */
@media(min-width:900px) and (max-height:860px){
  .lp-hero{--kw:min(600px,42vw,54svh);padding-top:76px}
  .lp-hero h1{font-size:clamp(2.4rem,4.8vw,4rem);margin-bottom:22px}
  .startform{max-width:490px}

}
@media(min-width:900px) and (max-height:700px){
  .lp-hero{--kaarth:0px;min-height:520px;padding-bottom:40px}
  .waaier{display:none}
  .lp-hero h1{font-size:clamp(2rem,4vw,3rem)}
}
@media(prefers-reduced-motion:reduce){
  .hero-sfeer .hero-study{transition:opacity .01ms}
  .waaier-kaart{transition:none}
}

/* De nav zweeft over de hero en krijgt bij het scrollen alleen een donkere
   ondergrond - tekst en logo blijven wit. Wit met blauw/grijs erin brak met de
   rest van de pagina. */
.lp-pagina .topnav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease}
.lp-pagina .topnav .logo,.lp-pagina .topnav .logo b,.lp-pagina .topnav .navr a{color:#fff}
.lp-pagina .topnav .navr a.btn{background:#fff;color:#0b1220}
.lp-pagina .topnav .navr a.btn:hover{background:#e8edf7}
.lp-pagina .topnav.vast{background:rgba(9,11,15,.82);backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.1)}
.lp-pagina .topnav .navr a:hover{color:#fff;opacity:.75}
.lp-pagina .topnav .navr a.btn:hover{background:#e8edf7;opacity:1}

/* de hero loopt nu gewoon door in de sectie eronder: zelfde donkere basis */
#examples{padding-top:120px}

/* ---------- galerij met echte sites ---------- */
/* Kaartpatroon van squarespace.com: het beeld ís de kaart. Geen browservenster
   eromheen, geen omlijning, en de pijl rechtsonder verschijnt bij hover. Onder
   het beeld alleen naam en soort — concept en layout zeiden de bezoeker niets. */
/* tabs zoals squarespace.com onder "Grow your business": geen omlijning, geen vet,
   16px, en alleen de actieve krijgt een zachte grijze pil (radius 100px, pad 12/16) */
.filters{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin:30px 0 44px}
.filters button{border:none;background:none;color:#dfe5ef;
  padding:12px 18px;border-radius:100px;font:inherit;font-size:1rem;font-weight:400;cursor:pointer;
  transition:background .25s var(--soepel),color .25s ease}
.filters button:hover{background:rgba(255,255,255,.08)}
.filters button.aan{background:#fff;color:#0b0d11}
.galerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:52px 40px}
.site-kaart{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.site-kaart .beeld{position:relative;aspect-ratio:1.6;overflow:hidden;border-radius:10px;
  background:var(--vlak);
  transition:transform .45s var(--soepel),box-shadow .45s var(--soepel)}
.site-kaart .beeld img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.studies-all-link{margin-top:44px}
.site-kaart:hover .beeld{transform:translateY(-6px);box-shadow:0 34px 64px -34px rgba(0,0,0,.95)}
.site-kaart .pijl{position:absolute;right:18px;bottom:18px;width:46px;height:46px;
  border-radius:50%;background:rgba(255,255,255,.92);color:#0b0d11;
  display:grid;place-items:center;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s var(--soepel)}
.site-kaart .pijl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.site-kaart:hover .pijl,.site-kaart:focus-visible .pijl{opacity:1;transform:none}
.site-kaart .voet{padding:20px 2px 0}
.studies-grid .site-kaart .voet{display:flex;align-items:flex-start;flex-direction:column;gap:10px}
.site-kaart .naam{font-family:'Sora',sans-serif;font-weight:600;font-size:1.18rem}
.site-kaart .soort{font-size:.98rem;color:var(--muted);margin-top:4px}
.study-action{flex:none;color:var(--accent);font-size:.9rem;font-weight:600}
@media(max-width:960px){.galerij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.galerij{grid-template-columns:minmax(0,1fr)}}
/* geen beeldverhouding: deze kaart vult de rest van de laatste rij (zie ctaVullen
   in de template) en werd zo een lege vlakte van 700px hoog */
.kaart-cta{border-radius:10px;background:var(--vlak);align-self:start;
  display:grid;place-items:center;text-align:center;padding:56px 26px;min-height:260px;
  transition:background .25s ease}
.kaart-cta:hover{background:#1c212a}
.kaart-cta b{font-family:'Sora',sans-serif;font-size:1.5rem;display:block;margin-bottom:10px}
.kaart-cta span{color:var(--muted);font-size:1rem;display:block;margin-bottom:20px;max-width:30ch}
.kaart-cta em{font-style:normal;font-weight:600;color:var(--accent)}

/* ---------- scroll-onthulling + filterwissel ---------- */
/* De klasse .onthullen wordt door JS gezet; zonder JS blijft alles zichtbaar. */
/* maatvoering van hun `riseandfadein`: 22px omhoog, samen met de fade */
.onthullen .onthul{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--soepel),transform .7s var(--soepel)}
.onthullen .onthul.zie{opacity:1;transform:none}
.galerij{transition:opacity .2s ease}
.galerij.wisselt{opacity:0}
@media(prefers-reduced-motion:reduce){
  .onthullen .onthul{opacity:1;transform:none;transition:none}
  .galerij{transition:none}
}

/* ---------- stappen: elk vak speelt zijn eigen stukje van de opname ---------- */
.stappen-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px;margin-top:44px}
.stapkaart{display:flex;flex-direction:column}
.stapkaart .beeld{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:10px;
  background:#0b0d11;box-shadow:0 24px 60px -40px rgba(0,0,0,.9);cursor:pointer}
.stapkaart .beeld video{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.stapkaart .tekst{padding:22px 2px 0}
.stapkaart h3{font-size:1.4rem;margin:6px 0 8px}
.stapkaart p{color:var(--muted)}
.stap-nr{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
/* even breed als de doelen-sectie erboven: de clips mogen meer ruimte pakken */
.lp #how .wrap{max-width:1480px;padding:0 48px}
@media(max-width:1200px){.lp #how .wrap{padding:0 32px}}
@media(max-width:860px){.stappen-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){.lp #how .wrap{padding:0 16px}}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:stretch}
.bento .cel{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);padding:26px;
  grid-column:span 2;display:flex;flex-direction:column;gap:8px}
.bento .cel.breed{grid-column:span 3}
.bento .cel h3{font-size:1.12rem}
.bento .cel p{color:var(--muted);font-size:.95rem}
/* lijn-iconen i.p.v. emoji: zelfde set als bij de prijzen */
.bento .ico{color:var(--accent);margin-bottom:4px}
.bento .staaltje{margin-top:14px;border:1px solid var(--lijn);border-radius:10px;overflow:hidden}
.bento .staaltje img{display:block;width:100%;max-height:210px;object-fit:cover;object-position:top center}
.palet-rij{display:flex;gap:6px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.palet-rij i{width:22px;height:22px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.06)}
/* in de bento vullen de 24 staaltjes de kaartbreedte: twee volle rijen van 12,
   los liepen ze als 18 + 6 met een gat rechtsonder */
.bento .palet-rij{display:grid;grid-template-columns:repeat(12,1fr)}
.bento .palet-rij i{width:100%;height:auto;aspect-ratio:1}
@media(max-width:900px){.bento{grid-template-columns:1fr}.bento .cel,.bento .cel.breed{grid-column:span 1}}

/* ---------- concepten ---------- */
.concepten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.concepten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.concepten{grid-template-columns:1fr}}
.concept-kaart{border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;background:var(--vlak)}
.concept-kaart .voorbeeld{padding:22px;min-height:132px;display:flex;flex-direction:column;
  justify-content:space-between;gap:14px}
.concept-kaart .voorbeeld .titel{font-family:'Sora',sans-serif;font-weight:700;font-size:1.35rem}
.concept-kaart .voorbeeld .knop{align-self:flex-start;padding:7px 15px;border-radius:8px;
  font-size:.8rem;font-weight:700}
.concept-kaart .onder{padding:16px 18px;border-top:1px solid var(--lijn)}
.concept-kaart .onder b{font-family:'Sora',sans-serif}
.concept-kaart .onder p{font-size:.87rem;color:var(--muted);margin-top:4px}

/* templates op de landingspagina: dezelfde kaartvorm als de galerij op
   /templates, drie op een rij. De miniatuur is hoger dan zijn kader, dus bij
   hover schuift hij door naar de secties onder de hero. */
.tmpl-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.tmpl-kaart{display:block;text-decoration:none;color:inherit}
.tmpl-beeld{display:block;overflow:hidden;border:1px solid var(--lijn);border-radius:var(--radius);
  background:var(--vlak);aspect-ratio:660/410}
.tmpl-beeld img{display:block;width:100%;height:auto;transition:transform .5s ease}
.tmpl-kaart:hover .tmpl-beeld img,.tmpl-kaart:focus-visible .tmpl-beeld img{transform:translateY(-14%)}
.tmpl-kaart:focus-visible .tmpl-beeld{outline:2px solid var(--accent);outline-offset:3px}
.tmpl-naam{display:block;font-family:'Sora',sans-serif;font-weight:700;margin-top:11px}
.tmpl-tag{display:block;font-size:.87rem;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.tmpl-beeld img{transition:none}
  .tmpl-kaart:hover .tmpl-beeld img{transform:none}}
@media(max-width:900px){.tmpl-rij{grid-template-columns:repeat(2,1fr);gap:20px 16px}}
@media(max-width:600px){.tmpl-rij{grid-template-columns:1fr}}

/* ---------- vergelijking ---------- */
.verg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.verg-kolom{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);padding:28px}
.verg-kolom.uit{border:1px solid rgba(255,255,255,.4);box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  position:relative}
.verg-kolom .badge{position:absolute;top:-13px;left:28px;background:#fff;color:#0b0d11;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px}
.verg-kolom h3{font-size:1.15rem;margin-bottom:6px}
.verg-prijs{font-family:'Sora',sans-serif;font-size:1.7rem;margin:10px 0 16px}
.verg-prijs span{font-size:.9rem;color:var(--muted);font-family:'Inter',sans-serif}
.verg-kolom ul{list-style:none;display:grid;gap:10px;font-size:.94rem}
.verg-kolom li{padding-left:26px;position:relative;color:var(--muted)}
.verg-kolom li::before{content:"–";position:absolute;left:6px;color:#5a6478}
.verg-kolom li.ja{color:var(--ink)}
.verg-kolom li.ja::before{content:"✓";color:#fff;font-weight:600;left:4px}
@media(max-width:900px){.verg-grid{grid-template-columns:1fr}}

/* ---------- prijs ---------- */
/* Drie kolommen met dezelfde opbouw (naam, bedrag, één regel wie het is, knop,
   verschillenlijst), het middelste plan opgetild. Dunne lijn-iconen in plaats
   van vinkjes, net als elders op de pagina. De hele tabel eronder is het
   naadje; de kaarten tonen alleen het verschil. */
/* stretch, niet start: de drie kaarten hebben ongelijke lijsten (Pro is de
   langste), en met "start" werd elke kaart precies zo hoog als zijn eigen
   inhoud — Starter klein, Business groter, Pro het grootst. Nu zijn ze even
   hoog en zakt het verschil naar witruimte onderin. */
/* Vier plannen sinds 24-08 (Basis erbij): vier kolommen boven 980px, twee
   daaronder en één op een telefoon. */
.prijs-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.prijs-rij .prijskaart{padding:28px 22px}
/* het bedrag mag nooit afbreken: "€32.99 / month" op twee regels leest als een
   fout in plaats van als een prijs */
.prijs-rij .prijskaart .bedrag{font-size:2.2rem;white-space:nowrap}
@media(max-width:1150px){.prijs-rij .prijskaart .bedrag{font-size:1.75rem}}
/* onder ~980px worden vier kolommen te smal om een regel als "Address, opening
   hours and route on the page" leesbaar te houden: dan twee bij twee */
@media(max-width:980px){.prijs-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .prijs-rij .prijskaart .prijs-klein{min-height:0}}
.prijs-rij .prijskaart .prijs-klein{font-size:.88rem;min-height:5.4em}
.prijs-rij .prijs-punten{font-size:.88rem;gap:9px}
.prijs-rij .prijskaart .btn.groot{padding:12px 16px;font-size:.92rem}
.prijskaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;
  padding:34px 30px;display:flex;flex-direction:column;position:relative}
/* het gekozen plan staat hoger en heeft een lichtere rand; op smal scherm valt
   het optillen weg (dan staan ze onder elkaar en botst de badge met de buur) */
.prijskaart.uit{border-color:rgba(255,255,255,.42);background:#1a1f28;
  box-shadow:0 34px 80px -46px rgba(0,0,0,.95);transform:translateY(-14px)}
.prijskaart .badge{position:absolute;top:-13px;left:30px;background:#fff;color:#0b0d11;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px}
.prijskaart .eyebrow{margin-bottom:6px}
.prijskaart .bedrag{font-family:'Sora',sans-serif;font-size:2.6rem;line-height:1;margin:0 0 10px}
.prijskaart .bedrag span{font-size:.95rem;color:var(--muted);font-family:'Inter',sans-serif}
.prijs-klein{color:var(--muted);font-size:.94rem;max-width:34ch}
.prijskaart .prijs-klein{min-height:3.1em}
.prijskaart .btn.groot{margin:20px 0 4px;text-align:center;padding:13px 20px;font-size:.98rem}
/* .btn.stil uit app.css wordt hier overschreven door ".lp .btn" (zelfde gewicht,
   later in het bestand), dus de rustige variant staat apart */
.lp .prijskaart .btn.stil{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.lp .prijskaart .btn.stil:hover{background:rgba(255,255,255,.08)}
.prijs-punten-kop{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 12px}
.prijs-punten{list-style:none;display:grid;gap:11px;font-size:.95rem;margin-top:18px}
.prijs-punten-kop + .prijs-punten{margin-top:0}
.prijs-punten li{display:flex;align-items:flex-start;gap:11px;line-height:1.45}
.prijs-punten .ico{flex:none;margin-top:1px;color:var(--accent)}
.binnenkort{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#0b0d11;background:#c8d4ef;border-radius:999px;
  padding:2px 7px;margin-left:6px;vertical-align:1px}

/* ---------- vergelijkingstabel ---------- */
.verg-tabel-blok{margin-top:56px;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:14px;padding:34px 30px}
.verg-tabel-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 26px;margin-bottom:22px}
.verg-tabel-kop h3{font-size:1.3rem}
.verg-tabel-kop p{color:var(--muted);font-size:.9rem;max-width:52ch}
/* de swipe-hint hoort alleen op schermen waar de tabel ook echt schuift */
.verg-tabel-kop .swipe{display:none;margin-top:6px}
/* Geen overflow op breed scherm: de tabel past, én "position:sticky" van de
   kolomkoppen werkt alleen als er géén scrollcontainer omheen staat (die wordt
   anders het referentiekader, en die scrollt verticaal niet mee). Onder 900px
   gaat overflow-x wél aan — daar plakt in plaats daarvan de functiekolom. */
.tabel-scroll{overflow:visible}
/* separate i.p.v. collapse: met een samengevouwen rand negeert Chromium
   position:sticky op cellen, en dan blijft de functiekolom op mobiel niet staan.
   Er staan alleen onderranden, dus verdubbelen kan niet. */
.verg-tabel{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:.95rem}
.verg-tabel th,.verg-tabel td{text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--lijn);vertical-align:middle}
/* de kolomkoppen blijven staan terwijl je de rijen langsloopt; 63px = de vaste
   bovenbalk, anders schuiven de plannamen daar precies achter */
.verg-tabel thead th{position:sticky;top:63px;background:var(--vlak);z-index:2;
  padding-top:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.28)}
.verg-tabel thead .vgl-hoofd{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.verg-tabel .vgl-naam{display:block;font-family:'Sora',sans-serif;font-size:1.02rem;color:#fff}
.verg-tabel .vgl-prijs{display:block;color:var(--muted);font-size:.85rem;font-weight:500;
  margin-top:2px;white-space:nowrap}
.verg-tabel td,.verg-tabel thead th:not(:first-child){text-align:center;width:13%}
.verg-tabel tbody th{font-weight:500;color:#dce3ef;width:48%}
.verg-tabel tr.groep th{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:800;padding-top:26px;border-bottom:none;text-align:left}
.verg-tabel tbody:first-of-type tr.groep th{padding-top:16px}
.verg-tabel tr:last-child th,.verg-tabel tr:last-child td{border-bottom:none}
.verg-tabel .uit{background:rgba(255,255,255,.045)}
.verg-tabel .vink{font-style:normal;color:#fff;font-size:1.05rem}
.verg-tabel .streep{font-style:normal;color:#5a6478}
.verg-tabel td{color:var(--muted)}

@media(max-width:900px){
  .prijs-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .prijs-rij .prijskaart .prijs-klein{min-height:0}
  .prijskaart.uit{transform:none}
  .prijskaart .prijs-klein{min-height:0}
  .verg-tabel-blok{padding:26px 20px}
  /* smal scherm: de tabel past niet, dus hij schuift opzij binnen zijn kader —
     met de functiekolom vastgezet, anders lees je losse vinkjes zonder te weten
     waar ze bij horen. Vandaar ook een leesbare achtergrond op die kolom. */
  .tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* vaste pixelmaten: in procenten schaalt de functiekolom mee met de tabel en
     houdt hij op een telefoon bijna het hele kader bezet */
  .verg-tabel{min-width:540px;font-size:.86rem}
  .verg-tabel thead th{position:static}
  .verg-tabel th,.verg-tabel td{padding:10px 8px}
  .verg-tabel tbody tr:not(.groep) th,.verg-tabel thead th:first-child{position:sticky;left:0;
    background:var(--vlak);z-index:1;width:160px;min-width:160px;
    box-shadow:1px 0 0 var(--lijn)}
  .verg-tabel td,.verg-tabel thead th:not(:first-child){width:95px;min-width:95px}
  .verg-tabel tbody tr:not(.groep) th,.verg-tabel thead th:first-child{width:150px;min-width:150px}
  .verg-tabel thead th:first-child{z-index:3}
  .verg-tabel .vgl-naam{font-size:.95rem}
  .verg-tabel .vgl-prijs{font-size:.8rem}
  .verg-tabel-kop .swipe{display:block}
}

/* ---------- faq ---------- */
/* Opzet van de accordeon op squarespace.com: vraag links en groot, antwoord in
   de rechterhelft, een haarlijn ertussen en een dun plus-teken op de rechterrand.
   Veel lucht: hun rijen zijn 123px hoog met 40px padding. */
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-of-type{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:24px;
  padding:30px 0;transition:opacity .25s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{opacity:.62}
.faq .vraag{flex:1;font-family:'Sora',sans-serif;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.25;letter-spacing:-.02em}
/* plus dat een min wordt: twee haarlijnen, de verticale draait weg */
.faq .teken{position:relative;flex:none;width:17px;height:17px;margin-left:auto}
.faq .teken::before,.faq .teken::after{content:"";position:absolute;background:#fff;
  transition:transform .35s var(--soepel),opacity .35s ease}
.faq .teken::before{left:0;top:8px;width:17px;height:1px}
.faq .teken::after{left:8px;top:0;width:1px;height:17px}
.faq details[open] .teken::after{transform:rotate(90deg);opacity:0}
.faq .antwoord{padding:0 0 30px}
.faq .antwoord p{color:var(--muted);max-width:62ch;margin-left:auto;width:56%}
.faq details[open] .antwoord{animation:faqIn .5s var(--soepel)}
@keyframes faqIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  /* vier plannen naast elkaar wordt op een telefoon één kolom */
  .prijs-rij{grid-template-columns:1fr}
  .faq summary{padding:22px 0;gap:16px}
  .faq .antwoord{padding-bottom:22px}
  .faq .antwoord p{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .faq details[open] .antwoord{animation:none}
  .faq .teken::before,.faq .teken::after{transition:none}
}

/* ---------- laptopmaat: strakker verticaal ritme ----------
   Op een scherm van ~768-900px hoog vraten 96px sectiepadding + grote koppen een kwart
   van het beeld op. Alleen de maten schuiven, niets aan de opbouw. */
@media(min-width:900px) and (max-height:900px){
  .lp .sec{padding:66px 0}
  .lp h2{font-size:clamp(1.7rem,2.9vw,2.4rem)}
  .lp .lead{font-size:1rem}
  .lp .eyebrow{margin-bottom:10px}
  .stapkaart h3{font-size:1.25rem}
  .stappen-grid{gap:40px 32px;margin-top:34px}
  .galerij{gap:20px}
  .site-kaart .voet{padding:13px 16px 15px}
  .bento{gap:14px}
  .bento .cel{padding:22px}
  .concepten{gap:14px}
  .concept-kaart .voorbeeld{min-height:104px;padding:18px}
  .verg-kolom{padding:22px}
  .verg-prijs{font-size:1.5rem;margin:8px 0 12px}
  .prijskaart{padding:26px}
  .prijskaart .bedrag{font-size:2.2rem}
  .verg-tabel-kop h3{font-size:1.15rem}
  .faq details{padding:16px 0}
  .faq summary{font-size:1rem}
  .slot{padding:48px 32px}
}

/* footer meekleuren: staat in base.html, buiten .lp, dus hier apart gescoped */
.lp-pagina footer.voet{background:#0b0d11;border-top-color:rgba(255,255,255,.12);margin-top:0}
.lp-pagina footer.voet a{color:#dfe5ef}
.lp-pagina footer.voet a:hover{color:#fff}
.lp-pagina footer.voet .logo{color:#fff}
.lp-pagina footer.voet .logo b{color:#fff}
.lp-pagina .voet h4,.lp-pagina .voet-merk p,.lp-pagina .voet-onder{color:#8f9aad}
.lp-pagina .voet-onder{border-top-color:rgba(255,255,255,.12)}

/* knoppen op de landingspagina: wit blok met donkere tekst (app.css maakt ze
   blauw, maar dat vloekt op de donkere basis) */
.lp .btn{background:#fff;color:#0b0d11}
.lp .btn:hover{background:#e6ebf5}

/* ============================================================================
   BEWEGINGSLAAG — de elementen die bij ons stilstonden en bij hen niet
   ----------------------------------------------------------------------------
   Gemeten met animatie_inventaris.py: squarespace heeft 707 bewegende elementen,
   wij hadden er 74. Het gat zat niet in de hero maar in de kleine dingen: geen
   enkele link, geen kaart buiten de galerij en geen pijl deed iets.
   Alles hieronder gebruikt --soepel/--vlot, dus de hele pagina beweegt gelijk.
   ========================================================================== */

/* ---- 1. links: onderstreping schuift in van links, uit naar rechts ----
   Hun handtekening (@keyframes ctaUnderlineSlideIn/Out): een streepje als
   background-image waarvan alleen de background-size/-position beweegt, dus op
   de compositor en zonder layout-werk. text-decoration kan dit niet. */
.lp a.stil,.lp-pagina .topnav .navr a:not(.btn),.lp-pagina footer.voet a:not(.logo),
.lp .micro-link,.lp .kaart-cta em{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;
  text-decoration:none;
  transition:color var(--vlot) ease,opacity var(--vlot) ease,
             background-size .34s var(--soepel),background-position .34s var(--soepel)}
.lp a.stil:hover,.lp-pagina .topnav .navr a:not(.btn):hover,
.lp-pagina footer.voet a:not(.logo):hover,.lp .micro-link:hover,
.lp .site-kaart:hover .kaart-cta em{background-size:100% 1px}
.lp .micro-link{text-decoration:none}   /* had al een vaste streep: zou dubbel lopen */

/* ---- 2. knoppen: kleur én een lichte indruk bij het klikken ---- */
.lp .btn,.lp .slot .btn-wit,.lp-pagina .topnav .navr a.btn,
.lp .startform button,.lp .plakbalk button{
  transition:background var(--vlot) ease,color var(--vlot) ease,
             border-color var(--vlot) ease,
             transform .18s var(--soepel),box-shadow .35s var(--soepel)}
.lp .btn:hover,.lp .slot .btn-wit:hover,.lp .startform button:hover,.lp .plakbalk button:hover{
  transform:translateY(-2px);box-shadow:0 18px 34px -20px rgba(0,0,0,.9)}
.lp .btn:active,.lp .slot .btn-wit:active,.lp .startform button:active,
.lp .plakbalk button:active{transform:translateY(0);box-shadow:none}
.lp .slot .btn-wit:hover{background:#e6ebf5}

/* ---- 3. kaarten die tot nu toe niets deden ----
   Bij hen liften álle kaarten (19x box-shadow .3s); bij ons alleen de galerij.
   ⚠️ De prijskaart die vooraan staat heeft al een eigen translateY(-14px), dus
   die krijgt een diepere waarde in plaats van dezelfde. */
.lp .bento .cel,.lp .concept-kaart,.lp .prijskaart,.lp .verg-tabel-blok{
  transition:transform var(--vlot) var(--soepel),border-color var(--vlot) ease,
             background var(--vlot) ease,box-shadow var(--vlot) var(--soepel)}
.lp .bento .cel:hover,.lp .concept-kaart:hover,.lp .prijskaart:not(.uit):hover{
  transform:translateY(-4px);border-color:rgba(255,255,255,.28);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95)}
.lp .prijskaart.uit:hover{transform:translateY(-18px);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.98)}
.lp .verg-tabel-blok:hover{border-color:rgba(255,255,255,.22)}
/* het staaltje in de bento zoomt zachtjes mee, zoals hun kaartbeelden */
.lp .bento .staaltje img{transition:transform .6s var(--soepel)}
.lp .bento .cel:hover .staaltje img{transform:scale(1.03)}
/* de kleurstalen komen los van het vlak omhoog */
.lp .palet-rij i{transition:transform .25s var(--soepel)}
.lp .palet-rij i:hover{transform:translateY(-3px) scale(1.12)}
/* Arian (30-09): de vijf bento-kaarten ("Everything an expensive website has")
   blijven bij hover op hun maat: geen optillen, geen zoom, geen groeiende stalen. */
.lp .bento .cel:hover,.lp .bento .cel:hover .staaltje img,.lp .bento .palet-rij i:hover{transform:none}

/* ---- 4. pijlen: het duwtje van hun supportHoverArrow ---- */
.lp .pijl-in{display:inline-block;transition:transform var(--vlot) var(--soepel)}
.lp a:hover .pijl-in{transform:translateX(4px)}
.lp .site-kaart .naam{transition:color var(--vlot) ease}
.lp .site-kaart:hover .naam{color:#fff}

/* ---- 5. de regels in de prijskaart en de tabelrijen lichten op ---- */
.lp .prijs-punten li{transition:color var(--vlot) ease}
.lp .prijs-punten li:hover{color:#fff}
.lp .prijs-punten li .ico{transition:transform var(--vlot) var(--soepel)}
.lp .prijs-punten li:hover .ico{transform:scale(1.15)}
.lp .verg-tabel tbody tr:not(.groep){transition:background var(--vlot) ease}
.lp .verg-tabel tbody tr:not(.groep):hover{background:rgba(255,255,255,.045)}

/* ---- 6. filters: indrukken bij de klik ---- */
.lp .filters button{transition:background var(--vlot) var(--soepel),
  color var(--vlot) ease,transform .2s var(--soepel)}
.lp .filters button:active{transform:scale(.96)}

@media(prefers-reduced-motion:reduce){
  .lp a.stil,.lp-pagina .topnav .navr a:not(.btn),.lp-pagina footer.voet a:not(.logo),
  .lp .micro-link,.lp .kaart-cta em{background-image:none;text-decoration:underline}
  .lp .bento .cel,.lp .concept-kaart,.lp .prijskaart,.lp .verg-tabel-blok,
  .lp .btn,.lp .slot .btn-wit,.lp .startform button,.lp .plakbalk button,
  .lp .palet-rij i,.lp .pijl-in,.lp .bento .staaltje img,.lp .prijs-punten li .ico,
  .lp .filters button,.lp .verg-tabel tbody tr:not(.groep){transition:none}
  .lp .bento .cel:hover,.lp .concept-kaart:hover,.lp .prijskaart:not(.uit):hover,
  .lp .btn:hover,.lp .slot .btn-wit:hover,.lp .startform button:hover,
  .lp .plakbalk button:hover,.lp .palet-rij i:hover,.lp a:hover .pijl-in,
  .lp .bento .cel:hover .staaltje img{transform:none;box-shadow:none}
  /* de vooropgetilde prijskaart moet zijn eigen stand houden */
  .lp .prijskaart.uit:hover{transform:translateY(-14px)}
}

/* ============================================================================
   BEWEGINGSLAAG 2 — wat er ná de eerste ronde nog stilstond
   ----------------------------------------------------------------------------
   Gevonden met stilstaand.py (de omgekeerde vraag: welke elementen hebben
   helemaal géén transition of animation?). Het waren er 36: de eyebrows, de
   kaartbeelden, de FAQ-rijen, de logo's en de invoervelden.
   ========================================================================== */

/* ---- 7. de hero komt binnen in plaats van er te staan ----
   Hun `homepageHeroReveal`: de achtergrond staat op opacity 0 en fadet in
   (.4s ease-in-out). Wij doen hetzelfde, maar laten kop, formulier en waaier
   er ná elkaar op volgen — anders valt de hele hero als één blok in.
   ⚠️ `forwards` is verplicht: zonder dat springt alles terug naar opacity 0
   zodra de animatie klaar is. */
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroBeeld{from{opacity:0}to{opacity:1}}
/* ⚠️ alleen het beeld fadet in, NIET het scrim. Toen die meedeed was de kop de
   eerste ~300ms onleesbaar: de foto kwam onverzacht door terwijl de tekst al
   zichtbaar werd. Nu ligt het donkere scrim er vanaf frame 1 overheen en
   verschijnt de foto eronder. */
.lp-hero .hero-sfeer{animation:heroBeeld .5s ease-in-out both}
.lp-hero h1{animation:heroIn .7s var(--soepel) .1s both}
.lp-hero .startform{animation:heroIn .7s var(--soepel) .22s both}
.lp-hero .micro{animation:heroIn .7s var(--soepel) .32s both}
/* de waaier komt als laatste, en iets verder van beneden: hij ligt onderaan */
@keyframes waaierIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.lp-hero .waaier{animation:waaierIn .9s var(--glij) .42s both}
.lp-hero .waaier-knop{animation:heroBeeld .6s ease .9s both}

/* ---- 8. de gradient-sweep over de kleine labels ----
   Hun handtekening (@keyframes gradient-animation, 1.8s cubic-bezier(.23,1,.32,1)):
   een lichtstreep die één keer over de eyebrow trekt zodra die in beeld komt.
   Bij hen loopt background-position van 0% naar -165% over een verloop dat op de
   tekst is uitgeknipt. Alleen bij binnenkomst, niet herhalend — anders is het een
   knipperlicht in plaats van een accent. */
@keyframes labelVeeg{from{background-position:0%}to{background-position:-165%}}
.lp .eyebrow{
  background-image:linear-gradient(100deg,
    var(--accent) 0%,var(--accent) 32%,#fff 46%,var(--accent) 60%,var(--accent) 100%);
  background-size:265% 100%;background-position:0%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.onthullen .onthul.zie .eyebrow{animation:labelVeeg 1.8s cubic-bezier(.23,1,.32,1) forwards}

/* ---- 9. kaartbeelden zoomen mee ----
   Bij hen schaalt het beeld ín de kaart; de kaart zelf blijft even groot. Dat
   kan alleen als de omhullende `overflow:hidden` heeft, wat .beeld al doet. */
.lp .site-kaart .beeld img{transition:transform .7s var(--soepel)}
.lp .site-kaart:hover .beeld img{transform:scale(1.045)}

/* ---- 10. de waaierkaart is een échte link en mag dat laten merken ----
   ⚠️ transform en opacity worden hier door JS gezet (plaats() in landing.html);
   daar mag CSS niet overheen. Vandaar filter en schaduw, die blijven van ons. */
.lp .waaier-kaart{transition:transform .8s var(--glij),opacity .8s var(--glij),
  filter .35s var(--soepel),box-shadow .35s var(--soepel)}
.lp .waaier-kaart.voor:hover{filter:brightness(1.06);
  box-shadow:0 40px 90px -38px rgba(0,0,0,.95)}

/* ---- 11. het invoerveld reageert op focus ----
   focus-within, niet :focus: de rand hoort om het hele blok te staan, niet om
   het input-element dat er onzichtbaar in zit. */
.lp .startform{transition:box-shadow .35s var(--soepel),transform .35s var(--soepel)}
.lp .startform:focus-within{transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(255,255,255,.22),0 30px 70px -30px rgba(0,0,0,.9)}

/* ---- 12. FAQ-rij en logo's ---- */
.lp .faq details{transition:background var(--vlot) ease}
.lp .faq details:hover{background:rgba(255,255,255,.028)}
.lp-pagina .topnav .logo,.lp-pagina footer.voet .logo{
  transition:opacity var(--vlot) ease}
.lp-pagina .topnav .logo:hover,.lp-pagina footer.voet .logo:hover{opacity:.72}

@media(prefers-reduced-motion:reduce){
  .lp-hero .hero-sfeer,.lp-hero h1,.lp-hero .startform,
  .lp-hero .micro,.lp-hero .waaier,.lp-hero .waaier-knop{animation:none}
  /* zonder beweging geen uitgeknipte tekst: dan moet de eyebrow gewoon leesbaar zijn */
  .lp .eyebrow{background-image:none;-webkit-text-fill-color:currentColor;color:var(--accent)}
  .onthullen .onthul.zie .eyebrow{animation:none}
  .lp .site-kaart .beeld img,.lp .startform,.lp .faq details,
  .lp-pagina .topnav .logo,.lp-pagina footer.voet .logo{transition:none}
  .lp .site-kaart:hover .beeld img,.lp .startform:focus-within{transform:none}
}

/* ---------- slot + plakbalk ---------- */
.slot{background:var(--zacht);border:1px solid var(--lijn);color:#fff;border-radius:22px;
  padding:72px 40px;text-align:center}
.slot h2{color:#fff;margin-bottom:12px}
.slot p{color:var(--muted);max-width:56ch;margin:0 auto 26px}
.slot .btn-wit{display:inline-block;background:#fff;color:#0b0d11;font-weight:700;
  padding:15px 32px;border-radius:12px;text-decoration:none}
.plakbalk{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(9,11,15,.9);
  backdrop-filter:blur(14px);border-top:1px solid var(--lijn);padding:12px 0;
  transform:translateY(110%);transition:transform .25s ease}
.plakbalk.zie{transform:none}
.plakbalk .wrap{display:flex;align-items:center;gap:16px;justify-content:space-between}
.plakbalk b{font-family:'Sora',sans-serif}
.plakbalk form{display:flex;gap:8px;flex:1;max-width:560px}
.plakbalk input{flex:1;padding:11px 14px;border:1px solid var(--lijn);border-radius:10px;font:inherit;
  background:#fff;color:#0b0d11}
.plakbalk button{padding:11px 20px;border:none;border-radius:10px;background:#fff;
  color:#0b0d11;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
@media(max-width:760px){.plakbalk .tekst{display:none}}

/* ---------- builder demonstration ---------- */
.lp #builder-demo .wrap{max-width:1408px}
.builder-demo-film{max-width:1360px;margin:36px auto 0}
.builder-demo-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;pointer-events:none;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9)}
.builder-demo-film video:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.builder-demo-film figcaption{margin-top:16px;color:var(--muted);font-size:.9rem;text-align:center}

.builder-demo-toggle{display:block;margin:18px auto 0;padding:9px 18px;border:1px solid var(--lijn);border-radius:999px;background:var(--vlak);color:var(--ink);font:600 .9rem/1.4 'Inter',sans-serif;cursor:pointer}
.builder-demo-toggle[hidden]{display:none}
.builder-demo-toggle:hover{border-color:var(--accent)}
.builder-demo-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* ---------- domeinchecker ---------- */
.domein-melding{margin-top:14px;text-align:center;color:var(--muted);min-height:1.4em}
.domein-lijst{list-style:none;margin:8px auto 0;padding:0;max-width:520px;display:grid;gap:8px}
.domein-rij{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--lijn);
  border-radius:12px;background:var(--vlak);color:var(--ink)}
.domein-rij strong{flex:1;min-width:0;overflow-wrap:anywhere}
.domein-rij span{font-size:.9rem;color:var(--muted)}
.domein-rij .domein-tip{font-style:normal;font-size:.72rem;font-weight:700;margin-left:8px;padding:2px 8px;
  border-radius:99px;background:var(--accent);color:var(--bg);white-space:nowrap;vertical-align:middle}
.domein-rij.available span,.domein-rij.likely span{color:#2f9e5b;font-weight:700}
.domein-rij button{padding:8px 18px;border:none;border-radius:8px;background:var(--accent);color:var(--bg);
  font:inherit;font-weight:700;cursor:pointer}
.domein-koop{max-width:520px;margin:18px auto 0;text-align:center;color:var(--ink)}
.domein-koop p{margin-bottom:12px}
/* Pricing: yearly or monthly. Without JavaScript the yearly prices stay visible. */
.betaal-keuze{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 30px;padding:4px;border:1px solid var(--line,#d6dbe4);border-radius:999px;background:var(--card,#fff)}
.betaal-keuze button{font:inherit;font-size:.92rem;font-weight:600;padding:10px 18px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
.betaal-keuze button b{font-weight:600;font-size:.8rem;margin-left:6px;padding:2px 8px;border-radius:999px;background:#e3f3e8;color:#1f6b3c}
.betaal-keuze button[aria-pressed="true"]{background:var(--accent,#2456cf);color:#fff}
.betaal-keuze button[aria-pressed="true"] b{background:#ffffff33;color:#fff}
#pricing .p-maand{display:none}
#pricing[data-billing="monthly"] .p-maand{display:inline}
#pricing[data-billing="monthly"] .p-jaar{display:none}
.prijs-rij .prijskaart .prijs-periode{font-size:.82rem;opacity:.75;margin:2px 0 12px}
@media(max-width:520px){.betaal-keuze button{padding:9px 12px;font-size:.86rem}.betaal-keuze button b{display:block;margin:2px 0 0}}
.prijskaart .bedrag :is(.p-jaar,.p-maand){font-size:inherit;color:inherit;font-family:inherit}