/* ResponsNed stylesheet - versie 4 (2026-08-02) */
/* ============================================================
   ResponsNed — ontwerpsysteem "Console"
   Platformlook: donkere werkbalken en panelen als hoofdmotief,
   lichte secties als rust. Engineered in plaats van marketing:
   kleine radius, hairlines, tabellaire cijfers, micro-labels.
   ============================================================ */

:root{
  --paper:#f4f6f8;
  --white:#fff;
  --mist:#e9eef3;
  --line:#dbe3ea;
  --line-2:#c2cedb;

  --ink:#001830;
  --deep:#00203f;
  --deep-2:#003060;
  --steel:#004890;
  --steel-l:#0078c0;
  --steel-soft:#e3eefa;

  --accent:#e8a33d;
  --accent-d:#c9862a;
  --alarm:#c8433c;
  --green:#1e9e6a;
  --info:#0090f0;

  --text:#0d1b2a;
  --body:#3d4c5c;
  --dim:#4f6070;
  --faint:#68788a;
  --on-dark:#e6eef7;
  --on-dark-dim:#93aec8;

  --display:"Inter","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --r:8px;
  --r-lg:12px;
  --maxw:1220px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--display);
  background:var(--paper);color:var(--body);
  font-size:15.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--steel);text-decoration:none}
a:hover{color:var(--steel-l)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
@media(max-width:620px){.wrap{padding:0 18px}}

/* ---------- typografie ---------- */
h1,h2,h3,h4{color:var(--text);font-weight:650;letter-spacing:-.022em;line-height:1.12}
h1{font-size:clamp(34px,4.6vw,56px)}
h2{font-size:clamp(25px,2.9vw,36px)}
h3{font-size:18px;letter-spacing:-.012em;line-height:1.3}
p{max-width:70ch}
.lead{font-size:17.5px;color:var(--body);line-height:1.62}
strong,b{font-weight:650;color:var(--text)}

/* micro-label: streep + kapitalen */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.center .eyebrow,.sec-head.center .eyebrow{justify-content:center}

.sec-head{max-width:62ch;margin-bottom:30px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:13px;color:var(--dim);font-size:16.5px}
.sec-head.center p{margin-left:auto;margin-right:auto}

section{padding:64px 0;position:relative}
section.mist{background:var(--mist)}
section.white{background:var(--white)}
@media(max-width:760px){section{padding:46px 0}}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--steel);color:#fff;border:1px solid var(--steel);
  padding:12px 20px;border-radius:var(--r);
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  transition:background .16s,border-color .16s,transform .16s;
}
.btn:hover{background:var(--steel-l);border-color:var(--steel-l);color:#fff;transform:translateY(-1px)}
.btn.big{padding:15px 26px;font-size:15.5px}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--white);border-color:var(--steel);color:var(--steel)}
/* Op donkere vlakken: blauw-op-blauw leest niet. De hoofdknop wordt amber
   (hoog contrast tegen marineblauw), de tweede knop wit omlijnd. */
.hero .btn,.band .btn{background:var(--accent);border-color:var(--accent);color:#12201d;font-weight:700}
.hero .btn:hover,.band .btn:hover{background:#f2b862;border-color:#f2b862;color:#12201d}
.hero .btn.ghost,.band .btn.ghost,.statband .btn.ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.55);font-weight:600}
.hero .btn.ghost:hover,.band .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
/* Eigen klassen voor knoppen op een donkere achtergrond. Hiermee staat de
   kleur vast, ongeacht welke andere regel er nog van toepassing is. */
.btn.op-donker{background:var(--accent);border-color:var(--accent);color:#12201d;font-weight:700}
.btn.op-donker:hover{background:#f2b862;border-color:#f2b862;color:#12201d}
.btn.op-donker-rand{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;font-weight:600}
.btn.op-donker-rand:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn.onblue{background:var(--accent);border-color:var(--accent);color:#12201d}
.btn.onblue:hover{background:#f0b459;border-color:#f0b459;color:#12201d}
.more{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;color:var(--steel);transition:gap .16s}
.more:hover{gap:11px}

/* ============================================================
   KOP: utility-strip + sticky navigatiebalk
   ============================================================ */
.utility{background:var(--ink);color:var(--on-dark-dim);font-size:12px}
.utility .wrap{display:flex;align-items:center;gap:20px;height:34px}
.utility .u-item{display:flex;align-items:center;gap:7px;white-space:nowrap}
.utility .u-item b{color:var(--on-dark);font-weight:600}
.utility .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.utility .rechts{margin-left:auto;display:flex;gap:20px}
.utility a{color:var(--on-dark-dim)}
.utility a:hover{color:#fff}
@media(max-width:820px){.utility .u-verberg{display:none}}

.topnav{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topnav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;color:var(--text);letter-spacing:-.02em}
.brand:hover{color:var(--text)}
.brand .mark{
  width:26px;height:26px;border-radius:6px;flex:none;
  background:
    radial-gradient(circle at 50% 50%,var(--accent) 0 2px,transparent 2px),
    radial-gradient(circle at 50% 50%,transparent 0 5px,rgba(232,163,61,.6) 5px 6px,transparent 6px),
    radial-gradient(circle at 50% 50%,transparent 0 9px,rgba(232,163,61,.32) 9px 10px,transparent 10px),
    linear-gradient(135deg,var(--steel),var(--deep));
}
.nav{display:flex;gap:2px;margin-left:6px}
.nav a{padding:8px 13px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--body)}
.nav a:hover{background:var(--mist);color:var(--text)}
.nav a.aan{color:var(--steel);font-weight:600}
.nav-acties{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-acties .tel{font-size:14px;font-weight:600;color:var(--text)}
@media(max-width:1040px){.nav{display:none}.nav-acties .tel{display:none}}

/* ============================================================
   HERO: donker consolepaneel, asymmetrisch
   ============================================================ */
.hero{
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(0,144,240,.18),transparent 58%),
    linear-gradient(160deg,var(--ink) 0%,var(--deep) 55%,var(--deep-2) 100%);
  color:var(--on-dark);position:relative;overflow:hidden;
  border-bottom:1px solid var(--deep-2);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 20% 0%,#000,transparent 72%);
  mask-image:radial-gradient(120% 100% at 20% 0%,#000,transparent 72%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:52px;align-items:center;padding:78px 0 84px}
@media(max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:38px;padding:56px 0 60px}}
.hero h1{color:#fff;max-width:19ch}
/* Alleen kleur als markering. Een achtergrondvlak achter tekst wordt op een
   donkere hero een grijze balk en dat oogt slordig. */
.hero h1 .mark2{color:var(--accent)}
.hero .eyebrow{color:var(--accent)}
.hero .eyebrow::before{background:var(--accent)}
.hero .lead{color:var(--on-dark-dim);font-size:18px;margin-top:20px;max-width:52ch}
.hero-acties{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--on-dark-dim)}
.hero-note b{color:var(--on-dark)}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.hero-badges span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-dark-dim)}
.hero-badges b{color:var(--on-dark);font-weight:600}
.hero-badges .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* consolevenster om de productweergave */
.venster{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0d1418;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03);
}
.venster-bar{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 13px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);
}
.venster-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.venster-bar .titel{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--on-dark-dim);letter-spacing:.02em}
.venster-bar .live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#6fcf97}
.venster-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#6fcf97;box-shadow:0 0 0 3px rgba(111,207,151,.18)}
.venster-body>*{border-radius:0!important}

/* ---------- cijferstrip ---------- */
.statband{background:var(--deep);border-bottom:1px solid rgba(255,255,255,.07)}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:800px){.statband .wrap{grid-template-columns:1fr 1fr}}
.statband>.wrap>div{padding:22px 26px;border-left:1px solid rgba(255,255,255,.07)}
.statband>.wrap>div:first-child{border-left:0;padding-left:0}
.statband .n{font-size:29px;font-weight:700;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.statband .l{font-size:12.5px;color:var(--on-dark-dim);margin-top:5px}

/* ============================================================
   BENTO: functieblokken in ongelijke cellen
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bento{grid-template-columns:1fr}}
.bento .cel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;grid-column:span 2;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.bento .cel:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 34px -22px rgba(0,24,48,.28)}
.bento .cel.breed{grid-column:span 3}
.bento .cel.donker{
  background:linear-gradient(150deg,var(--deep),var(--steel));
  border-color:var(--deep-2);color:var(--on-dark);grid-column:span 3;
}
.bento .cel.donker h3{color:#fff}
.bento .cel.donker p{color:rgba(255,255,255,.74)}
@media(max-width:980px){.bento .cel,.bento .cel.breed,.bento .cel.donker{grid-column:span 2}}
@media(max-width:620px){.bento .cel,.bento .cel.breed,.bento .cel.donker{grid-column:span 1}}
.bento .ic{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--steel-soft);color:var(--steel);font-size:17px;margin-bottom:15px;
}
.bento .cel.donker .ic{background:rgba(255,255,255,.1);color:var(--accent)}
.bento h3{margin-bottom:8px}
.bento p{font-size:14.5px;color:var(--dim);line-height:1.6;max-width:46ch}

/* ---------- stappen ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:20px}}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line-2)}
@media(max-width:820px){.steps::before{display:none}}
.step{padding:0 26px 0 0;position:relative}
.step span{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--white);
  border:1px solid var(--line-2);color:var(--steel);
  font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;margin-bottom:16px;
}
.step h3{margin-bottom:7px;font-size:17px}
.step p{font-size:14.5px;color:var(--dim)}

/* ---------- kaarten ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:920px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 34px -22px rgba(0,24,48,.26)}
.card h3{margin-bottom:9px}
.card p{font-size:14.5px;color:var(--dim);line-height:1.6;margin-bottom:14px}
.card .meta{font-size:12.5px;color:var(--dim)}

.usp{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:.16s}
.usp:hover{border-color:var(--line-2);transform:translateY(-2px)}
.usp .ic{width:38px;height:38px;border-radius:9px;background:var(--steel-soft);color:var(--steel);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:14px}
.usp h3{margin-bottom:8px}
.usp p{font-size:14.5px;color:var(--dim);line-height:1.6}
.usp3{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:800px){.usp3{grid-template-columns:1fr}}

/* ---------- belofte-strip ---------- */
.promise{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
@media(max-width:760px){.promise{grid-template-columns:1fr 1fr}}
.promise>div{padding:20px 22px;border-left:1px solid var(--line)}
.promise>div:first-child{border-left:0}
.promise .pk{display:flex;align-items:center;gap:8px;font-weight:650;color:var(--text);font-size:14.5px;line-height:1.3}
.promise .pv{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.5}
.promise .tick{color:var(--green);font-weight:700;flex:none}

/* ---------- functierijen ---------- */
/* Functierij: volgnummer, tekst, afbeelding. Drie onderdelen, dus drie
   kolommen; anders schuift alles door elkaar heen. */
.frow{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.25fr);
  gap:0 36px;align-items:center;padding:40px 0;border-top:1px solid var(--line)}
.frow:first-of-type{border-top:0;padding-top:8px}
.frow>.idx{align-self:start;padding-top:4px;font-family:var(--mono);font-size:13px;
  font-weight:600;color:var(--dim);letter-spacing:.06em}
.frow>div:not(.idx):not(.fmedia){min-width:0}
.frow h3{font-size:21px;margin-bottom:11px}
.frow p{font-size:15px;line-height:1.65;color:var(--dim);margin-bottom:15px;max-width:44ch}
/* omgekeerde rij: afbeelding links, tekst rechts */
.frow.flip{grid-template-columns:minmax(0,1.25fr) 56px minmax(0,1fr)}
.frow.flip>.idx{order:2}
.frow.flip>div:not(.idx):not(.fmedia){order:3}
.frow.flip>.fmedia{order:1}
@media(max-width:940px){
  .frow,.frow.flip{grid-template-columns:44px minmax(0,1fr);gap:0 20px;padding:30px 0}
  .frow>.fmedia,.frow.flip>.fmedia{grid-column:1/-1;order:3;margin-top:18px}
  .frow.flip>.idx{order:1}
  .frow.flip>div:not(.idx):not(.fmedia){order:2}
  .frow p{max-width:none}
}
.fmedia{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);box-shadow:0 18px 40px -28px rgba(0,24,48,.35)}
.feat-visual{display:block;width:100%}
.shot{border:0;border-radius:0;overflow:hidden;background:var(--white)}
.mock{display:block;width:100%}
.features{display:block;margin-top:6px}

/* ---------- prijskaarten ---------- */
.pteaser,.prijsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media(max-width:900px){.pteaser,.prijsgrid{grid-template-columns:1fr}}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:relative;display:flex;flex-direction:column}
.pcard.uit{border-color:var(--steel);box-shadow:0 0 0 1px var(--steel)}
.ptag{
  position:absolute;top:-1px;right:18px;background:var(--steel);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:0 0 6px 6px;
}
.pn{font-weight:700;font-size:15px;margin-bottom:8px;color:var(--text)}
.pp{font-size:15px;color:var(--steel);font-weight:650;margin-bottom:12px}
.pp span{font-size:13px;color:var(--faint);font-weight:500;margin-left:4px}
.pcard p{font-size:14px;color:var(--dim);line-height:1.6}
.pcard ul{list-style:none;margin:14px 0 18px;display:flex;flex-direction:column;gap:9px}
.pcard li{font-size:14px;color:var(--body);display:flex;gap:9px;align-items:flex-start}
.pcard li::before{content:"\2713";color:var(--green);font-weight:700;flex:none}
.pcard li.no{color:var(--dim);opacity:.85}
.pcard li.no::before{content:"\2013";color:var(--line-2)}
.pcard .btn{margin-top:auto}

/* ---------- artikel / kruimels / pillen ---------- */
.crumbs{font-size:13px;color:var(--dim);padding:20px 0 0}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--steel)}
.article{max-width:74ch}
.article h2{font-size:26px;margin:34px 0 12px}
.article h3{font-size:18.5px;margin:24px 0 9px}
.article p{margin-bottom:15px}
.article ul,.article ol{margin:0 0 17px 20px}
.article li{margin-bottom:8px}
.article .meta{font-size:13px;color:var(--dim);margin-bottom:22px}
.tagpill{
  display:inline-block;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:5px 13px;font-size:12.5px;color:var(--body);margin:0 5px 6px 0;
}
.tagpill:hover{border-color:var(--steel);color:var(--steel)}
.idx:not(.frow>.idx){display:flex;flex-wrap:wrap;gap:0;margin:0 0 8px}

/* ---------- afsluitende band ---------- */
.band{
  background:
    radial-gradient(90% 130% at 85% 0%,rgba(0,144,240,.16),transparent 55%),
    linear-gradient(150deg,var(--ink),var(--steel));
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 90% at 12% 100%,#000,transparent 70%);
  mask-image:radial-gradient(70% 90% at 12% 100%,#000,transparent 70%);
}
.band .wrap{position:relative;z-index:1}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.8);font-size:17.5px;max-width:56ch;margin:14px auto 28px}
.band .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.band .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- voet ---------- */
footer{background:var(--ink);color:var(--on-dark-dim);padding:52px 0 26px;font-size:14px}
footer h4{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
footer a{color:var(--on-dark-dim);display:block;padding:4px 0}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fbrand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:17px;margin-bottom:13px}
.fbrand .mark{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--steel),var(--deep-2));flex:none}
.fonder{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-dim);
}
.fonder .rechts{margin-left:auto}

/* ---------- schermen-switcher ---------- */
.schermen{max-width:1000px;margin:0 auto}
.sch-tabs{
  display:flex;gap:2px;flex-wrap:wrap;margin:0 auto 22px;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:4px;width:fit-content;
}
.sch-tabs button{border:0;background:transparent;color:var(--body);border-radius:7px;
  padding:9px 17px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.sch-tabs button:hover{color:var(--text);background:var(--mist)}
.sch-tabs button.aan{background:var(--steel);color:#fff}
.sch-view{display:none;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.sch-view.aan{display:block}
.sch-view svg{display:block;width:100%;height:auto}

/* ---------- diversen ---------- */
.center{text-align:center}
.sub{color:var(--dim);font-size:14.5px}
.a{color:var(--steel)}
.tick{color:var(--green)}
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- mobiel menu ---------- */
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:7px;
  color:var(--text);font-size:17px;padding:6px 11px;cursor:pointer;line-height:1}
.mobielnav{display:none;background:var(--white);border-bottom:1px solid var(--line)}
.mobielnav.open{display:block}
.mobielnav a{display:block;padding:13px 26px;border-top:1px solid var(--line);font-size:15px;color:var(--body);font-weight:500}
.mobielnav a:hover{background:var(--mist);color:var(--text)}
@media(max-width:1040px){.menu-btn{display:block}}

/* ============================================================
   Pagina-eigen onderdelen (prijzen, faq, functies, contact)
   ============================================================ */

/* --- hero-kolommen --- */
.hero-copy{min-width:0}
.hero-visual{min-width:0}

/* --- prijzen: drie pakketten --- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media(max-width:900px){.prices{grid-template-columns:1fr}}
.price{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;display:flex;flex-direction:column;position:relative;
}
.price.feat{border-color:var(--steel);box-shadow:0 0 0 1px var(--steel),0 24px 50px -30px rgba(0,72,144,.4)}
.price h3{font-size:19px;margin-bottom:6px}
.price .tag{
  position:absolute;top:-1px;right:20px;background:var(--steel);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:0 0 6px 6px;
}
.price .pw{font-size:14.5px;color:var(--steel);font-weight:650;margin:2px 0 16px}
.price .pw span{color:var(--faint);font-weight:500;font-size:13px}
.price p{font-size:14.5px;color:var(--dim);line-height:1.6}
.price ul{list-style:none;margin:16px 0 22px;display:flex;flex-direction:column;gap:10px}
.price li{font-size:14px;color:var(--body);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.price li::before{content:"\2713";color:var(--green);font-weight:700;flex:none}
.price li.no{color:var(--dim);opacity:.85}
.price li.no::before{content:"\2013";color:var(--line-2)}
.price .btn{margin-top:auto}

/* --- functie-overzicht ---
   LET OP: .features bevat rijen (.frow), geen kaarten. Als deze container
   zelf een raster is, worden de rijen over kolommen verdeeld en valt de
   hele sectie uit elkaar. Daarom bewust een gewone blokweergave. */
.features{display:block}

/* --- veelgestelde vragen --- */
.faq{max-width:82ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{
  cursor:pointer;padding:17px 40px 17px 0;font-weight:600;color:var(--text);
  font-size:16px;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:15px;
  font-size:20px;font-weight:400;color:var(--steel);line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--steel)}
.faq .a{padding:0 40px 20px 0;color:var(--body);font-size:15px;line-height:1.65}
.faq p{max-width:none}

/* --- tweekolommen (contact, uitleg) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.split ul{list-style:none;margin:18px 0 0;display:flex;flex-direction:column;gap:11px}
.split li{font-size:15px;color:var(--body);display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.split li::before{content:"\2192";color:var(--accent);font-weight:700;flex:none}

/* --- formulier (contact) --- */
form label{display:block;font-size:13px;font-weight:600;color:var(--text);margin:16px 0 6px}
form input,form textarea,form select{
  width:100%;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 14px;font:inherit;font-size:15px;color:var(--text);
}
form input:focus,form textarea:focus,form select:focus{outline:2px solid rgba(0,120,192,.25);border-color:var(--steel)}
form textarea{min-height:130px;resize:vertical}
form .melding{border-radius:var(--r);padding:13px 16px;font-size:14.5px;margin-bottom:18px}
form .melding.ok{background:#e8f3ec;border:1px solid #bcdcc8;color:#1f6b42}
form .melding.fout{background:#fbeceb;border:1px solid #f0c9c6;color:#8b2019}

/* consoletabs in de vensterbalk */
.venster-bar .vtabs{display:flex;gap:3px;margin-left:16px}
.venster-bar .vtabs b,.venster-bar .vtabs i{
  font-style:normal;font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;letter-spacing:.02em;
}
.venster-bar .vtabs b{background:rgba(0,144,240,.22);color:#7fc6ff}
.venster-bar .vtabs i{color:rgba(255,255,255,.34)}
@media(max-width:620px){.venster-bar .vtabs{display:none}}