/* ============================================================
   CREATIVUS.NL — "Nachtglas"
   ------------------------------------------------------------
   Een premium app, geen landingspagina. Diepe nachtgrond, glazen
   panelen met echte randlichtjes, grote radii, veerkrachtige
   beweging. Het werk levert de kleur; de schil blijft neutraal.

   Eén letterfamilie, zoals een besturingssysteem dat doet.
   Eén accent. Beweging is materiaal: de pagina komt binnen,
   beelden lossen op uit hun skelet, cijfers rollen.
   ============================================================ */

:root{
  /* ---- grond ---- */
  --bg:#0B0907;
  --bg-2:#100E0B;
  --bg-3:#191613;

  /* ---- glas ---- */
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.055);
  --glass-line:rgba(255,255,255,.09);
  --glass-line-2:rgba(255,255,255,.16);
  --glass-top:rgba(255,255,255,.07);   /* randlicht bovenaan een paneel */

  /* ---- tekst ---- */
  --ink:#F5F5F5;
  --ink-2:#D2D2D2;
  /* lopende tekst: een eigen trede, want body stond op ink-2 en
     dat is te fel voor alinea's van vier regels */
  --body:#A5A5A5;
  --muted:#828282;

  /* ---- accent ---- */
  --accent:#FF6A4D;
  --accent-2:#FF8C73;
  --on-accent:#1A0D08;
  /* Geen tweede kleur meer. Dit is de gloed rond het accent, in
     dezelfde tint — warmte die bij het accent hoort in plaats van
     een kleur die ertegenin gaat. */
  --ember:#8A3A22;

  --wa:#25D366;
  --wa-ink:#06301C;

  /* ---- radii: ruim, zoals een app ---- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* ---- beweging ----
     één veer voor alles wat van staat verandert, één zachte
     uitloop voor alles wat binnenkomt */
  /* kleinste aanraakdoel; PRODUCT.md zet die ondergrens op 44px */
  --tap-min:44px;
  --spring:cubic-bezier(.2,.9,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.32s;

  --shadow-lift:0 1px 0 var(--glass-top) inset,
                0 8px 24px rgba(0,0,0,.4),
                0 2px 6px rgba(0,0,0,.3);
  --shadow-float:0 1px 0 var(--glass-top) inset,
                 0 24px 60px rgba(0,0,0,.55),
                 0 6px 16px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Een zwak gekleurd licht ver boven de pagina: geeft de nachtgrond
   diepte zonder dat er een verloop over de inhoud ligt. */
/* Twee lichten die de muis volgen. De waarden komen uit script.js als
   percentages; zonder JavaScript blijven de startwaarden staan en is het
   precies de rustige achtergrond van hiervoor. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46vw 40vw at var(--mx,76%) var(--my,6%), rgba(255,106,77,.20), transparent 68%),
    radial-gradient(40vw 34vw at var(--mx2,16%) var(--my2,88%), rgba(255,106,77,.15), transparent 66%);
}
/* Een derde, zeer breed licht laag achter de pagina. Het beweegt met de
   muis mee maar veel trager dan de andere twee, zodat de onderkant van
   de pagina niet als dood vlak leest. Hier stond eerst een fijn raster;
   dat is de handtekening van gegenereerde UI en hoort op een canvas of
   een kaart, niet achter een verkooppagina. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70vw 60vh at var(--mx2,16%) 112%, rgba(255,106,77,.10), transparent 70%);
}
body > *{position:relative;z-index:1}

/* ---------- browseroppervlakken ---------- */

::selection{background:var(--accent);color:var(--on-accent)}
:root{
  scrollbar-color:rgba(255,255,255,.18) transparent;
  scrollbar-width:thin;
  caret-color:var(--accent);
  accent-color:var(--accent);
  color-scheme:dark;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ============================================================
   typografie — één familie, net als een besturingssysteem
   ============================================================ */

h1,h2,h3,h4{
  /* Sectiekoppen staan een trede lager dan de hoofdkop. Op 2 tot 3,4rem
     domineren ze nog ruim; het is de maat die ze dominant maakt, niet de
     helderheid. Vol wit is er voor de hoofdkop en de bedragen. */
  margin:0;color:var(--ink-2);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,7.4vw,5.6rem);letter-spacing:-.04em;color:var(--ink)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.45rem);letter-spacing:-.02em;line-height:1.2}
h4{font-size:1.04rem;letter-spacing:-.015em;line-height:1.3}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
a{color:inherit}

.lead{font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.55;max-width:60ch;color:var(--muted)}
/* Hier kleurde .accent één woord in elke kop koraal. Dat is een
   herkenbaar maniertje én het botst met de regel dat de accentkleur
   alleen de actie aanwijst. De koppen staan nu gewoon in inkt; de klasse
   blijft bestaan zodat build.js niet herschreven hoeft te worden. */
.accent{color:inherit}

/* ============================================================
   opmaak
   ============================================================ */

.wrap{width:min(1200px,92%);margin-inline:auto}
.section{padding-block:clamp(76px,9vw,140px);position:relative}
/* Om en om een lichtere band. Twaalfduizend pixels onafgebroken zwart
   leest als één lange scroll; met een ritme weet je waar je bent. */
.section.band{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012) 46%,transparent);
  border-block:1px solid rgba(255,255,255,.07);
}
.section.band::before{
  content:"";position:absolute;inset-inline:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,106,77,.5),rgba(255,106,77,.4),transparent);
}
.section-head{max-width:64ch;margin-bottom:clamp(34px,4.6vw,60px)}
.section-head .lead{margin-top:18px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ---------- glazen paneel: de basisvorm van deze wereld ---------- */

.panel{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
  backdrop-filter:blur(18px) saturate(130%);
}

/* ============================================================
   knoppen
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:14px 26px;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:transform var(--t) var(--spring),background-color var(--t-fast),
             border-color var(--t-fast),color var(--t-fast),box-shadow var(--t) var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn svg{width:19px;height:19px;flex:none}

.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-2);box-shadow:0 10px 30px rgba(255,106,77,.32)}



.btn-glass{
  background:var(--glass-2);color:var(--ink);border-color:var(--glass-line);
  backdrop-filter:blur(12px);
}
.btn-glass:hover{background:rgba(255,255,255,.1);border-color:var(--glass-line-2)}

/* ============================================================
   zwevende kop — een appbalk, geen websitekop
   ============================================================ */

.site-header{position:fixed;top:14px;left:0;right:0;z-index:100;pointer-events:none}
.header-inner{
  width:min(1200px,calc(100% - 28px));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);
  padding:9px 9px 9px 20px;
  background:rgba(14,14,20,.72);
  border:1px solid var(--glass-line);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-lift);
  backdrop-filter:blur(22px) saturate(160%);
  pointer-events:auto;
  transition:background-color var(--t),border-color var(--t);
}
html.scrolled .header-inner{background:rgba(10,10,15,.9)}

.brand{
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:1.06rem;letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;white-space:nowrap;flex:none;
}
/* Het merkteken is een open kader: een C die tegelijk een scherm is dat
   niet dichtzit. Eén lijn in de accentkleur — de enige plek buiten de
   knoppen waar die kleur vol gebruikt wordt, omdat het hier het merk
   zelf is. */
.brand-mark{
  width:25px;height:25px;flex:none;color:var(--accent);
  transition:color var(--t-fast);
}
.brand:hover .brand-mark{color:var(--ink)}
.brand i{font-style:normal;color:var(--muted);font-weight:500}

.nav{display:flex;align-items:center;gap:4px;margin-right:auto}
.nav a{
  padding:9px 14px;border-radius:var(--r-pill);
  font-size:.93rem;font-weight:500;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color var(--t-fast),background-color var(--t-fast);
}
.nav a:hover{color:var(--ink);background:var(--glass-2)}

.lang{display:flex;gap:2px;flex:none;background:var(--glass);border-radius:var(--r-pill);padding:3px}
.lang a{
  padding:6px 11px;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:700;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;
  transition:background-color var(--t-fast),color var(--t-fast);
}
.lang a[aria-current="true"]{background:var(--ink);color:var(--bg)}

.burger{
  display:none;width:44px;height:44px;flex:none;
  background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--r-pill);
  cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform var(--t) var(--spring),top var(--t) var(--spring);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;top:78px;left:14px;right:14px;z-index:99;
  padding:10px;border-radius:var(--r-lg);
  background:rgba(14,14,20,.95);border:1px solid var(--glass-line);
  backdrop-filter:blur(22px);
  opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;
  transition:opacity var(--t),transform var(--t) var(--spring);
}
.mobile-nav.open{opacity:1;transform:none;pointer-events:auto}
.mobile-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mobile-nav a{display:block;padding:13px 16px;border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-weight:500}
.mobile-nav a:hover{background:var(--glass-2)}

.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:150;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .1s linear;
}

/* ============================================================
   hero
   ============================================================ */

.hero{padding:clamp(130px,16vw,190px) 0 clamp(60px,8vw,96px);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:center}
.hero h1{max-width:13ch}
.hero .lead{margin-top:26px;font-size:clamp(1.1rem,1.6vw,1.34rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 12px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);
  font-size:.9rem;color:var(--ink-2);
}
.chip svg{width:15px;height:15px;color:var(--muted);flex:none}


/* ---------- het scherm in de hero ----------
   Eén werk tegelijk, op ware grootte leesbaar, dat om de paar seconden
   wisselt. Daarvoor stonden hier vier afdrukken over elkaar heen: elke
   kaart sneed de volgende aan, en geen enkele was groot genoeg om iets
   van te kunnen zien. */

.showcase{position:relative;display:grid;justify-items:center;align-content:center;gap:14px}
.showcase-glow{
  position:absolute;pointer-events:none;
  /* Het licht steekt bewust buiten zijn kolom; de hero knipt het aan de
     schermrand af. Zonder die knip werd de pagina op een telefoon 49px
     breder dan het scherm en stond de burgerknop buiten beeld. */
  inset:4% -16% 8%;border-radius:50%;
  background:radial-gradient(54% 48% at 50% 44%, rgba(255,106,77,.36), transparent 72%);
  filter:blur(28px);
}

/* Het toestel. De verhouding binnenin is 390:844 — een echte telefoon —
   en de schermafdrukken worden op precies die maat gemaakt, zodat er
   geen mobiele site in een te breed kader wordt uitgerekt. */
/* De twee toestellen staan op één vlak: de laptop draagt het beeld, de
   telefoon staat ervoor in de hoek. */
.showcase-stage{
  position:relative;z-index:1;
  width:min(100%,520px);
  padding-bottom:18px;      /* ruimte voor de telefoon die eronder uitsteekt */
}

.laptop{
  position:relative;
  transition:transform .5s var(--ease-out);
  will-change:transform;
}
.laptop-screen{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
  padding:9px 9px 0;
  border-radius:12px 12px 2px 2px;
  background:linear-gradient(162deg,#32323d 0%,#16161c 46%,#0C0C11 100%);
  box-shadow:
    var(--shadow-float),
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.laptop-screen img{
  position:absolute;inset:9px 9px auto;
  /* Zonder height:auto neemt het beeld de 900 uit het height-attribuut
     en wordt het verticaal uitgerekt tot een donkere veeg. */
  width:calc(100% - 18px);height:auto;
  border-radius:6px 6px 0 0;
  opacity:0;transition:opacity .8s var(--ease-out);
}
.laptop-screen img.is-on{opacity:1}

/* Het onderstel: een smalle balk die iets breder is dan het scherm, met
   een inkeping in het midden. Geen tekening van een scharnier -- dat
   leest op dit formaat toch als vuil. */
.laptop-foot{
  position:relative;height:11px;
  margin-inline:-16px;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#26262F,#101014);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
.laptop-foot::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:84px;height:4px;border-radius:0 0 6px 6px;
  background:rgba(0,0,0,.45);
}

/* Verhouding naar het echte formaat: een telefoon is ongeveer een
   kwart van de breedte van een laptop, en korter dan het scherm. Op 33%
   stak hij er bovenuit en dekte hij het halve beeld af. */
.showcase-frame{
  position:absolute;z-index:2;
  left:-3%;bottom:-6px;
  width:24%;max-width:132px;
  padding:5px;border-radius:20px;
  background:linear-gradient(158deg,#32323d 0%,#16161c 42%,#0C0C11 100%);
  box-shadow:
    var(--shadow-float),
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .5s var(--ease-out);
  will-change:transform;
}
/* Hier zat een "eilandje" bovenin het scherm. Op 132px breed werd dat
   een zwarte balk over de site heen in plaats van een detail van het
   toestel. Het frame zelf maakt al duidelijk genoeg dat het een telefoon
   is; zo'n uitsparing is alleen geloofwaardig op ware grootte. */

.showcase-screen{
  position:relative;overflow:hidden;
  aspect-ratio:390/844;border-radius:15px;
  background:var(--bg-3);
}
/* Het werkraster had al een glanzend skelet, het eerste scherm niet —
   terwijl juist dat op een trage verbinding in een zaak wordt getest. */
.showcase-screen::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--bg-3) 20%,rgba(255,255,255,.055) 38%,var(--bg-3) 56%);
  background-size:260% 100%;
  animation:shimmer 1.5s linear infinite;
  transition:opacity .4s var(--ease-out);
}
.showcase-screen.is-ready::before{opacity:0;animation:none}
.laptop-screen::before{
  content:"";position:absolute;inset:9px 9px 0;z-index:0;border-radius:6px 6px 0 0;
  background:linear-gradient(100deg,var(--bg-3) 20%,rgba(255,255,255,.055) 38%,var(--bg-3) 56%);
  background-size:260% 100%;animation:shimmer 1.5s linear infinite;
  transition:opacity .4s var(--ease-out);
}
.laptop-screen.is-ready::before{opacity:0;animation:none}
.showcase-screen img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .8s var(--ease-out);
}
.showcase-screen img.is-on{opacity:1}

/* de domeinnaam staat onder het toestel, niet erin: in een telefoon
   hoort geen adresbalk van een browser */
.showcase-host{
  position:relative;z-index:1;margin:4px 0 0;
  font-size:.78rem;color:var(--muted);
  font-variant-numeric:lining-nums;
  transition:opacity .24s var(--ease-out);
}
.showcase-dots{position:relative;z-index:1;display:flex;gap:7px}
.showcase-dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);
  transition:background-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.showcase-dots i.is-on{background:var(--accent);transform:scale(1.35)}

/* ---------- cijferband ---------- */

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px);margin-top:clamp(44px,6vw,76px)}
.fact{padding:22px 24px;border-radius:var(--r-lg);text-align:left}
.fact b{
  display:block;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:800;
  color:var(--ink);letter-spacing:-.04em;line-height:1;
}
.fact span{display:block;margin-top:8px;font-size:.88rem;color:var(--muted)}

/* ============================================================
   het prijsoverzicht — het signatuurelement
   ============================================================ */

.config{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.config-controls{display:grid;gap:26px;align-content:start}
.config-field > span{display:block;font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:10px}

/* Segmentschakelaar met een indicator die eronder doorschuift. */
.seg{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  padding:4px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);
}
.seg-ind{
  position:absolute;top:4px;bottom:4px;left:4px;
  border-radius:var(--r-pill);background:var(--ink);
  transition:transform var(--t) var(--ease-out);
  pointer-events:none;
}
.seg button{
  position:relative;z-index:1;
  min-height:44px;padding:11px 16px;
  background:transparent;border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:inherit;font-size:.96rem;font-weight:600;color:var(--muted);
  transition:color var(--t-fast);
}
.seg button[aria-pressed="true"]{color:var(--bg)}
.seg button:not([aria-pressed="true"]):hover{color:var(--ink)}

.config-note{font-size:.92rem;color:var(--muted)}

.bill{padding:8px;overflow:hidden}
.bill-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px 14px}
.bill-head span{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.bill-row{
  display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:center;
  padding:16px 20px;border-radius:var(--r-md);
  transition:background-color var(--t-fast);
}
.bill-row:hover{background:var(--glass)}
.bill-row b{display:block;color:var(--ink);font-weight:600;font-size:1rem}
.bill-row small{font-size:.86rem;color:var(--muted)}
.bill-row .val{
  font-size:1.6rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:lining-nums;white-space:nowrap;
}
.bill-sep{height:1px;background:var(--glass-line);margin:6px 20px}

.bill-total{
  display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:center;
  margin-top:8px;padding:22px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(255,106,77,.16),rgba(255,106,77,.12));
  border:1px solid rgba(255,106,77,.26);
}
.bill-total b{display:block;color:var(--ink);font-size:1.04rem;font-weight:600}
.bill-total small{color:var(--muted);font-size:.88rem}
.bill-total .val{
  font-size:clamp(2.2rem,3.6vw,2.9rem);font-weight:800;color:var(--ink);
  letter-spacing:-.04em;font-variant-numeric:lining-nums;
}

/* cijfers die rollen bij een waardewissel */
.roll{display:inline-block}
.roll.is-rolling{animation:roll .42s var(--ease-out)}
@keyframes roll{
  0%{transform:translateY(-38%);opacity:0;filter:blur(4px)}
  100%{transform:translateY(0);opacity:1;filter:blur(0)}
}

/* ============================================================
   wat je krijgt — rijen, geen kaartjesraster
   ============================================================ */

.rows{display:grid;gap:2px}
.row-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:4px clamp(16px,2.4vw,32px);align-items:center;
  padding:22px clamp(16px,2vw,24px);border-radius:var(--r-md);
  transition:background-color var(--t-fast),transform var(--t) var(--ease-out);
}
.row-item:hover{background:var(--glass);transform:translateX(4px)}
.row-ico{
  width:42px;height:42px;border-radius:var(--r-md);flex:none;
  background:var(--glass-2);border:1px solid var(--glass-line);
  display:grid;place-items:center;color:var(--ink-2);
}
.row-ico svg{width:20px;height:20px}
.row-item h4{margin-bottom:3px}
.row-item p{font-size:.95rem;color:var(--muted);margin:0}
.row-tag{
  font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);
}

/* ============================================================
   pakketten
   ============================================================ */

.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)}
.plan{padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;position:relative;min-width:0}
.plan--hi{
  border-color:rgba(255,106,77,.34);
  box-shadow:0 1px 0 var(--glass-top) inset,0 28px 70px rgba(255,106,77,.1),0 8px 20px rgba(0,0,0,.4);
}
.plan-tag{
  position:absolute;top:18px;right:18px;
  padding:6px 13px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  font-size:.72rem;font-weight:700;
}
.plan h3{font-size:1.5rem;margin-bottom:8px}
.plan-for{font-size:.95rem;color:var(--muted);margin:0 0 26px}
.plan-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.plan-price .val{font-size:clamp(2.6rem,4.4vw,3.4rem);font-weight:800;color:var(--ink);
  letter-spacing:-.04em;font-variant-numeric:lining-nums}
.plan-price .per{font-size:.98rem;color:var(--muted)}
.plan-start{margin:14px 0 0;padding-top:16px;border-top:1px solid var(--glass-line);font-size:.93rem;color:var(--muted)}
.plan-list{list-style:none;margin:22px 0 0;padding:0;flex:1;display:grid;gap:11px}
.plan-list li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:.95rem;align-items:start}
.plan-list svg{width:17px;height:17px;margin-top:4px;color:var(--muted);flex:none}
.plan-list .key{color:var(--ink)}
.plan-foot{margin-top:28px}
.plan-foot .btn{width:100%}

.price-notes{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 34px}
.price-notes li{display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--glass-line);font-size:.94rem;color:var(--muted);min-width:0}
.price-notes b{color:var(--ink);font-weight:600;white-space:nowrap}

/* ============================================================
   eigendom
   ============================================================ */

/* De tijdbalk. --door is de voortgang 0..1 die script.js zet terwijl de
   sectie door beeld gaat; scrollen is hier de looptijd. */
.track{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,22px);
  padding-top:34px;
}
.track-rail{
  position:absolute;top:10px;left:0;right:0;height:2px;
  background:var(--glass-line);border-radius:2px;overflow:hidden;
}
.track-rail i{
  display:block;height:100%;width:100%;
  background:var(--accent);
  transform:scaleX(var(--door,0));transform-origin:left;
  transition:transform .45s linear;
}
/* Een fase die de lijn nog niet bereikt heeft staat terug; zodra hij
   erlangs komt licht hij op. Geen beweging, alleen helderheid — dat
   leest als tijd die verstrijkt in plaats van als iets dat binnenvliegt. */
.track-step{
  opacity:.42;
  transition:opacity .5s var(--ease-out),border-color .5s var(--ease-out);
}
.track-step.is-passed{opacity:1;border-color:var(--glass-line-2)}
.track-step::before{
  content:"";position:absolute;top:-26px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-3);border:2px solid var(--glass-line);
  transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.track-step.is-passed::before{background:var(--accent);border-color:var(--accent)}
.track-step{position:relative}
.track-step{padding:26px 24px;min-width:0}
.track-when{
  display:inline-block;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--glass-2);border:1px solid var(--glass-line);
  font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:16px;
}
.track-step h4{margin-bottom:8px}
.track-step p{font-size:.93rem;color:var(--muted);margin:0}

/* ============================================================
   werk — toestelframes met laadskelet
   ============================================================ */

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)}
.filters button{
  padding:9px 17px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);
  font-family:inherit;font-size:.9rem;font-weight:500;color:var(--muted);
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             transform var(--t) var(--spring);
}
.filters button:hover{color:var(--ink);transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:transparent}

.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.work{
  display:block;text-decoration:none;min-width:0;overflow:hidden;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),border-color var(--t-fast);
}
.work:hover{transform:translateY(-6px);background:var(--bg-3);border-color:var(--glass-line-2)}
.work[hidden]{display:none}

/* het toestelframe */
.work-screen{
  position:relative;margin:8px 8px 0;border-radius:var(--r-md);overflow:hidden;
  /* Vierkant in plaats van liggend. De afdrukken zijn telefoonschermen
     van 390:844; in een 4:3-kader zag je daar nog geen helft van. Het
     werk is op deze pagina het enige gekleurde en het enige bewijs, dus
     het hoort de kaart te dragen in plaats van er een strook in te zijn. */
  aspect-ratio:1;background:var(--bg-3);
}
.work-bar{
  position:absolute;top:0;left:0;right:0;height:26px;z-index:3;
  background:rgba(10,10,15,.65);backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:5px;padding:0 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.work-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.work-bar span{margin-left:6px;font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Het beeld is altijd zichtbaar en ligt vóór het skelet. Het hing
   eerder op een klasse die JavaScript bij het load-event zette; werd dat
   event gemist, dan bleef de kaart voorgoed leeg. Nu dekt het beeld het
   skelet af zodra het binnen is, zonder dat er iets geregeld hoeft te
   worden — en gaat het mis, dan zie je het skelet, niet een gat. */
.work-screen img{
  position:absolute;top:26px;left:0;width:100%;height:auto;display:block;z-index:2;
  transition:transform 3s var(--ease-out);
}
.work:hover .work-screen img{transform:translateY(-24%)}

/* skelet dat glanst tot het beeld er is */
.work-skel{
  position:absolute;inset:26px 0 0;z-index:1;
  background:linear-gradient(100deg,var(--bg-3) 20%,rgba(255,255,255,.055) 38%,var(--bg-3) 56%);
  background-size:260% 100%;
  animation:shimmer 1.5s linear infinite;
  transition:opacity .4s var(--ease-out);
}
.work-screen.is-loaded .work-skel{opacity:0;animation:none}
@keyframes shimmer{to{background-position:-260% 0}}

.work-body{padding:18px 20px 22px}
.work-body h3{font-size:1.18rem;margin-bottom:5px}
.work-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.work-kind{
  font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--glass-2);border:1px solid var(--glass-line);color:var(--muted);
}
.work-kind[data-live="true"]{color:var(--ink);border-color:var(--glass-line-2)}

/* Een kaart zonder adres is geen link. Dat moet je kunnen zien voordat
   je erop tikt, niet erna. */
.work-soon{
  font-size:.7rem;letter-spacing:.02em;color:var(--muted);
  padding:4px 10px;border-radius:var(--r-pill);
  border:1px dashed var(--glass-line-2);
}
article.work{cursor:default}
article.work:hover{transform:none}
.work-body p{font-size:.92rem;color:var(--muted);margin:0}
.work-note{margin-top:clamp(22px,3vw,32px);font-size:.93rem;color:var(--muted);max-width:76ch}

/* ============================================================
   huisstijlen — levende typografie, elk in zijn eigen letter
   ============================================================ */

/* Elke huisstijl krijgt zijn eigen tegel in zijn eigen kleur. Die
   kleuren zijn niet verzonnen: ze komen uit de bestaande merken zelf. */
/* Dertien huisstijlen in een raster van vier laat er altijd één alleen
   achter op de laatste regel. Twee banden die tegen elkaar in drijven
   hebben geen laatste regel, en bewegen bovendien uit zichzelf. */
.marquee{display:grid;gap:12px;--fade:clamp(40px,7vw,120px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
}
.mq-row{overflow:hidden}
/* De marge zit op de tegel, niet als gap op de rij: alleen dan is de
   helft precies de helft en loopt de lus zonder sprong rond. */
.mq-track{display:flex;width:max-content;animation:mq 54s linear infinite}
.mq-row.rev .mq-track{animation-duration:68s;animation-direction:reverse}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mark{
  flex:0 0 238px;margin-right:12px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:188px;padding:28px 20px;border-radius:var(--r-lg);text-align:center;
  background:var(--tile);color:var(--tile-ink);
  border:1px solid rgba(255,255,255,.08);
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out);
}
.mark:hover{transform:translateY(-6px)}
/* een zachte glans over de tegel, zodat hij als materiaal leest */
.mark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.1),transparent 46%);
}
.mark-name{font-size:1.65rem;line-height:1.05;color:inherit;position:relative}
/* De dekking staat niet meer vast op .62: build.js rekent per tegel uit
   hoeveel er nodig is voor 4,5:1. Met één vaste waarde zakten vijf van
   de dertien tegels onder de norm, Van Dijk tot 3,15:1. En .64rem is
   10px in kapitalen — te klein voor wat er staat. */
.mark-sub{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:inherit;opacity:var(--sub-a,.75);position:relative;
  font-family:"Schibsted Grotesk",sans-serif;
}
.mark-face{
  font-size:.7rem;color:inherit;opacity:0;position:relative;
  font-family:"Schibsted Grotesk",sans-serif;letter-spacing:0;
  transition:opacity var(--t);
}
.mark:hover .mark-face{opacity:var(--face-a,.75)}

/* ============================================================
   werkwijze
   ============================================================ */

/* Drie regels onder elkaar lieten de halve breedte leeg staan. Als
   drie panelen naast elkaar is het een tijdlijn in plaats van een lijst. */
.steps{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:s}
.step{
  counter-increment:s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(26px,2.6vw,36px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--shadow-lift);
  transition:transform var(--t) var(--ease-out),background-color var(--t-fast),border-color var(--t-fast);
}
.step:hover{transform:translateY(-4px);background:var(--glass-2);border-color:var(--glass-line-2)}
/* het nummer als watermerk; het telt mee als sfeer, niet als tekst */
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;right:14px;top:2px;pointer-events:none;
  font-size:5.6rem;font-weight:700;letter-spacing:-.05em;line-height:1;
  color:rgba(255,255,255,.05);
}
.step-when{
  font-size:.74rem;font-weight:700;color:var(--ink);
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,106,77,.1);border:1px solid rgba(255,106,77,.22);
  white-space:nowrap;position:relative;
}
.step h3{font-size:1.32rem;margin-bottom:9px}
.step p{font-size:.95rem;color:var(--muted);margin:0}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:10px}
  .step::before{font-size:4.2rem}
}

/* ============================================================
   vragen
   ============================================================ */

.faq{display:grid;gap:10px;max-width:920px}
.faq-item{
  border-radius:var(--r-md);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);
  transition:background-color var(--t-fast),border-color var(--t-fast);
}
.faq-item[open]{background:var(--glass-2);border-color:var(--glass-line-2)}
.faq-item summary{
  display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;
  padding:20px 22px;font-size:1.06rem;font-weight:600;color:var(--ink);letter-spacing:-.015em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t) var(--spring);
}
.faq-item[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-answer{padding:0 22px 22px;font-size:.98rem;color:var(--muted)}
.faq-answer p{margin-bottom:.8em}

/* ============================================================
   contact
   ============================================================ */

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:start}
.contact-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px}
.contact-list li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:14px 16px;border-radius:var(--r-md);min-width:0;
  transition:background-color var(--t-fast);
}
.contact-list li:hover{background:var(--glass)}
.contact-list svg{width:19px;height:19px;color:var(--muted);flex:none}
.contact-list b{display:block;color:var(--ink);font-size:.94rem;font-weight:600}
.contact-list a,.contact-list span{font-size:.94rem;color:var(--muted);text-decoration:none;overflow-wrap:break-word}
.contact-list a:hover{color:var(--ink)}

.form{padding:clamp(24px,3vw,34px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px;min-width:0}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-line);
  border-radius:var(--r-sm);padding:13px 15px;
  transition:border-color var(--t-fast),background-color var(--t-fast);
}
.field textarea{min-height:116px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6E6E7A}

/* Het uitklapmenu van een select wordt niet door de pagina getekend maar
   door het besturingssysteem, en dat doet het op een witte achtergrond.
   De opties erfden color:var(--ink) - bijna wit - en waren daardoor
   onleesbaar zodra je het menu opende.

   Donkere tekst dus, en wit eronder. Niet omdat dat mooier is dan een
   donker menu, maar omdat het overal werkt: zet een browser de
   achtergrond niet, dan is het nog steeds donker op wit. Andersom
   gokken levert precies het probleem op dat we hier oplossen. */
.field select option,
.field select optgroup{
  color:#17140F;
  background:#FFFFFF;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(255,255,255,.06);outline-offset:1px;
}
.form .btn{width:100%;margin-top:6px}
.form-note{font-size:.86rem;color:var(--muted);margin:14px 0 0}

/* ============================================================
   voet
   ============================================================ */

.site-footer{border-top:1px solid var(--glass-line);padding:clamp(48px,6vw,72px) 0 34px;font-size:.93rem;color:var(--muted)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,4vw,56px);
  padding-bottom:34px;border-bottom:1px solid var(--glass-line)}
.footer-top p{margin:16px 0 0;max-width:40ch}
.footer-col h4{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col a{color:var(--muted);text-decoration:none}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;padding-top:24px;font-size:.86rem}

/* ============================================================
   mobiele actiebalk
   ============================================================ */

.mobile-cta{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:118;
  gap:8px;padding:8px;border-radius:var(--r-pill);
  background:rgba(14,14,20,.9);border:1px solid var(--glass-line);
  backdrop-filter:blur(20px);
}
.mobile-cta .btn{flex:1;min-height:46px;padding:12px 14px;font-size:.95rem}

/* ============================================================
   beweging
   ------------------------------------------------------------
   Eén grammatica: alles komt met dezelfde veer binnen, in de
   volgorde waarin je het leest. Niets beweegt zomaar.
   ============================================================ */

@keyframes enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.enter{animation:enter .75s var(--ease-out) both}
.enter-1{animation-delay:.07s}
.enter-2{animation-delay:.14s}
.enter-3{animation-delay:.21s}
.enter-4{animation-delay:.28s}

html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
/* Alleen het werkraster verschijnt nog als lijst; de vertraging loopt
   per rij van drie en is daarmee begrensd op .14s. */
html.js .reveal-1.in{transition-delay:.07s}
html.js .reveal-2.in{transition-delay:.14s}

/* ============================================================
   responsief
   ============================================================ */

@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .lang{margin-left:auto}
  .config{grid-template-columns:1fr;gap:30px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .facts{grid-template-columns:repeat(2,1fr)}
  /* Twee kolommen: de horizontale balk zou dan maar de helft van de
     fasen aanwijzen. Hij gaat rechtop langs de linkerkant staan. */
  .track{grid-template-columns:repeat(2,1fr);padding-top:0;padding-left:26px}
  .track-rail{top:6px;bottom:6px;left:5px;right:auto;width:2px;height:auto}
  .track-rail i{width:100%;height:100%;transform:scaleY(var(--door,0));transform-origin:top}
  .track-step::before{top:22px;left:-26px}
  .works{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top > div:first-child{grid-column:1/-1}
}

@media (max-width:760px){
  html{scroll-padding-top:90px}
  .plans{grid-template-columns:1fr}
  .track{grid-template-columns:1fr}
  .works{grid-template-columns:1fr}
  .row-item{grid-template-columns:auto minmax(0,1fr)}
  /* Een laptop van een paar centimeter bewijst niets; op dit scherm
     telt alleen de telefoon. */
  .laptop{display:none}
  .showcase-stage{padding-bottom:0;width:min(100%,230px);margin-inline:auto}
  .showcase-frame{position:relative;left:auto;bottom:auto;width:100%;max-width:230px}
  .showcase-frame{padding:9px;border-radius:34px}
  .showcase-screen{border-radius:26px}
  .row-tag{grid-column:2;justify-self:start;margin-top:8px}
  .step{grid-template-columns:1fr;gap:10px}
  .step-when{justify-self:start}
  .mobile-cta{display:flex}
  body{padding-bottom:84px}
}

@media (max-width:620px){
  body{font-size:16px}
  .header-inner .btn-vraag{display:none}
  .wrap{width:calc(100% - 28px)}
  .header-inner{padding-left:16px}
  .brand i{display:none}
  .form-row{grid-template-columns:1fr;gap:0}
  .price-notes{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js .reveal{opacity:1;transform:none}
  /* Minder beweging, niet minder betekenis: de lijn springt zonder
     overgang naar zijn stand en de fasen blijven oplichten. */
  .track-rail i{transition:none}
  .track-step{opacity:1}
  .enter{animation:none}
  .work-skel{animation:none;opacity:0}
  .showcase-frame{transform:none !important}
  /* de band mag niet naar zijn eindpunt springen; dan staat de rij half leeg */
  .mq-track{animation:none !important}
  .mq-row{overflow-x:auto;scrollbar-width:thin}
  .work:hover .work-screen img{transform:none}
}

/* De terugkoppeling na het versturen.

   Dit groeit met grid-template-rows van 0fr naar 1fr in plaats van met
   max-height. Dat scheelt twee dingen. Een: er hoeft geen hoogte geraden
   te worden, en de foutmelding is lang genoeg om op een telefoon vier
   regels te worden - een gegokte max-height knipt die af. Twee: de
   browser hoeft er geen layout voor te herberekenen op elk beeldje.

   De tekst zit in een span omdat het buitenste element het raster is;
   die binnenste moet kunnen worden afgeknepen tot niets. */
.form-status{
  display:grid;grid-template-rows:0fr;
  margin:0;opacity:0;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1),opacity .24s ease;
}
.form-status > span{
  overflow:hidden;
  font-size:.92rem;line-height:1.5;
}
.form-status.is-ok,
.form-status.is-fout{grid-template-rows:1fr;opacity:1;margin:12px 0 0}
.form-status.is-ok > span,
.form-status.is-fout > span{
  padding:12px 14px;border-radius:var(--r-md);border:1px solid;
}
.form-status.is-ok > span{
  color:#BFE8CE;background:rgba(74,160,104,.1);border-color:rgba(74,160,104,.34);
}
.form-status.is-fout > span{
  color:#F3C8BC;background:rgba(255,106,77,.09);border-color:rgba(255,106,77,.34);
}

/* Tijdens het versturen: de knop blijft op zijn plek en op zijn maat, hij
   doet alleen even niets. Een knop die van tekst verandert en daardoor
   smaller wordt, voelt alsof er iets stuk is. */
.form .btn.form-send{min-height:var(--tap-min);transition:opacity .2s ease}
.form .btn.form-send[disabled]{opacity:.55;cursor:default}
.form .btn.form-send[disabled] svg{opacity:.4}

@media (prefers-reduced-motion:reduce){
  .form-status{transition:opacity .01s}
}

/* Twee groepen in het overzicht: wat de site kost, en wat onderhoud
   daarna kost. Zonder die kop las het maandbedrag als huur die eeuwig
   doorloopt, terwijl het de bouw afbetaalt. */
.bill-group{
  margin:26px 0 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.bill-group:first-of-type{margin-top:4px}
.bill-foot{
  margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--glass-line);
  font-size:.85rem;color:var(--muted);
}

/* ---------- webshop: apart, en dat moet je zien ----------
   Niet de derde kolom naast Basis en Plus, want er gelden andere
   voorwaarden. Een eigen vlak op de volle breedte, met de voorwaarden
   ernaast in plaats van eronder: wie dit overweegt moet ze lezen. */
.shop{
  margin-top:clamp(16px,2vw,22px);
  padding:clamp(26px,3.4vw,38px);
  display:grid;gap:clamp(24px,3vw,44px);
  border-color:var(--glass-line-2);
}
.shop-kicker{
  display:inline-block;margin-bottom:14px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.shop h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.shop .plan-list{margin-top:20px}

.shop-terms{
  align-self:start;
  padding:clamp(20px,2.2vw,26px);
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--glass-line);
}
.shop-why{margin:0 0 20px;font-size:.95rem;color:var(--muted)}
.shop-terms dl{margin:0;display:grid;gap:14px}
.shop-terms dt{font-weight:600;color:var(--ink);font-size:.95rem}
.shop-terms dd{margin:2px 0 0;font-size:.9rem;color:var(--muted)}

@media (min-width:861px){
  .shop{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
}

/* ---------- aanraakdoelen ----------
   PRODUCT.md zet de ondergrens op 44px, en deze pagina wordt staand op
   een telefoon bekeken, in een zaak. Een meting op een echte 375px-
   viewport vond het merk in de kop (27px hoog), de twee taalknoppen
   (31px) en de acht branchefilters (38px). Op een schermafdruk is dat
   niet te zien, want headless Chrome klemt op Windows rond 500px. */
.brand{min-height:var(--tap-min)}
.lang a{min-height:var(--tap-min);min-width:var(--tap-min);display:inline-flex;align-items:center;justify-content:center}
.filters button{min-height:var(--tap-min)}