/* ============================================================================
   Diaglows — ontwerplaag
   Verfijning bovenop de basisstijl. Alleen presentatie: geen wijzigingen in de
   markup of in de meertalige logica, zodat NL/EN/DE blijft werken zoals het was.
   Deze laag staat na de basisstijl en wint daarom bij gelijke specificiteit.

   Wat er verandert en waarom:
   1. Typografie   echte tekstfamilie in plaats van Segoe UI, en een vloeiende
                   schaal die meeschaalt met het scherm
   2. Kleur        rustiger, dieper navy; het geel van de kentekenplaat wordt de
                   enige accentkleur en krijgt daardoor meer gewicht
   3. Diepte       neutrale, gelaagde schaduwen in plaats van gekleurde gloed
   4. Ritme        ruimere en consistentere witruimte tussen secties
   5. Detail       zichtbare focusrand, rustiger hover, respect voor de
                   systeeminstelling "minder beweging"
   ========================================================================= */

:root{
  /* ---- kleur ---------------------------------------------------------- */
  --navy:#0a1630;
  --navy2:#0f2244;
  --navy3:#17325f;
  --blue:#2563eb;
  --blue2:#1d4ed8;
  --yellow:#ffd23f;
  --yellow2:#e9bb22;
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#586a8c;
  --line:#e5eaf3;
  --line2:#eef2f8;
  --ok:#15884b;

  /* ---- diepte: neutraal en gelaagd ------------------------------------ */
  --sh-1:0 1px 2px rgba(10,22,48,.05), 0 1px 3px rgba(10,22,48,.08);
  --sh-2:0 2px 6px -1px rgba(10,22,48,.06), 0 12px 24px -8px rgba(10,22,48,.13);
  --sh-3:0 8px 20px -6px rgba(10,22,48,.10), 0 32px 60px -20px rgba(10,22,48,.26);

  /* ---- vorm ------------------------------------------------------------ */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* ---- ruimte ---------------------------------------------------------- */
  --gap:clamp(18px, 2vw, 26px);
}

/* ---------------------------------------------------------------- typografie */
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-feature-settings:'cv05' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
h1,h2,h3,h4,.plan .price,.logo{
  font-family:'Inter Tight','Inter','Segoe UI',system-ui,sans-serif;
}

/* Vloeiende koppen: geen sprong meer tussen telefoon en breedbeeld. */
.hero h1{
  font-size:clamp(2.1rem, 1.35rem + 2.1vw, 3.05rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
}
.hero p.sub{
  font-size:clamp(1.03rem, .97rem + .3vw, 1.19rem);
  line-height:1.62;
  color:#c2cfe8;
  max-width:33em;
}
h2.sec{
  font-size:clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem);
  line-height:1.14;
  letter-spacing:-.028em;
  font-weight:800;
  text-wrap:balance;
}
p.secsub{
  font-size:clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height:1.62;
  max-width:38em;
  margin-block:14px 0;
  text-wrap:pretty;
}

/* ------------------------------------------------------------------- ritme */
section{padding:clamp(60px, 5.2vw, 104px) 0}
.wrap{max-width:1140px;padding-inline:clamp(20px, 4vw, 28px)}
h2.sec + p.secsub{margin-bottom:clamp(34px, 4vw, 54px)}

/* ----------------------------------------------------------------- knoppen */
/* De gekleurde gloed eronder is vervangen door een nette, neutrale schaduw:
   rustiger, en de knop blijft leesbaar op elke ondergrond. */
.btn{
  font-family:inherit;
  font-weight:650;
  font-size:.98rem;
  letter-spacing:-.01em;
  padding:13px 26px;
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  will-change:transform;
}
.btn:hover{
  background:var(--blue2);
  transform:translateY(-1px);
  box-shadow:var(--sh-2);
}
.btn:active{transform:translateY(0);box-shadow:var(--sh-1)}
.btn.ghost{
  border:1.5px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.04);
  box-shadow:none;
  backdrop-filter:blur(2px);
}
.btn.ghost:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.7);
  box-shadow:none;
}
.btn.light:hover{background:#f2f5fb;color:var(--navy)}

/* Zichtbare focusrand voor toetsenbord- en schermlezergebruik. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
  border-radius:6px;
}
nav a:focus-visible,
nav button:focus-visible{outline-color:var(--yellow);outline-offset:3px}

/* -------------------------------------------------------------- navigatie */
nav{
  background:rgba(10,22,48,.86);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
nav .wrap{height:68px;gap:22px}
nav .links a{
  font-weight:550;
  font-size:.92rem;
  color:#c6d2ea;
  transition:color .15s ease;
}
nav .links a.cta{
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(10,22,48,.3);
}
nav .cta:hover,nav .links a.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(255,210,63,.3);
  filter:none;
  background:#ffdb63;
}
.langs{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.langs button{font-weight:650;font-size:.76rem;transition:background-color .15s,color .15s}
.langs button:not(.on):hover{background:rgba(255,255,255,.1);color:#fff}

/* ------------------------------------------------------------------- hero */
/* Achtergrond in drie lagen: verloop, een fijn technisch raster en een zachte
   lichtplek achter de schermafbeelding. Dat geeft diepte zonder drukte. */
.hero{
  position:relative;
  padding:clamp(64px, 6vw, 108px) 0 clamp(76px, 7vw, 120px);
  background:
    radial-gradient(1100px 520px at 78% 18%, rgba(47,111,237,.28), transparent 62%),
    radial-gradient(760px 420px at 8% 96%, rgba(255,210,63,.09), transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy2) 52%, var(--navy3) 100%);
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 560px at 30% 22%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(900px 560px at 30% 22%, #000 25%, transparent 78%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;gap:clamp(36px, 4.5vw, 64px)}
.hero h1 em{
  color:var(--yellow);
  /* dunne streep in het accent onder de kernwoorden, geen markeervlak */
  background:linear-gradient(transparent calc(100% - 5px), rgba(255,210,63,.5) calc(100% - 5px));
  padding-bottom:2px;
}
.hero .btns{gap:12px;margin-top:4px}
.hero .usps{gap:14px 26px;margin-top:clamp(26px, 3vw, 38px)}
.hero .usp{font-size:.88rem;color:#b9c7e2}
.check{background:rgba(21,136,75,.95);box-shadow:0 0 0 3px rgba(21,136,75,.16)}

/* --------------------------------------------------------- schermmockups */
.frame{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.12);
}
.frame .bar{background:#eef1f7;border-bottom:1px solid #e3e8f2}
.phone{
  border-radius:34px;
  box-shadow:0 30px 64px -18px rgba(0,0,0,.62);
  border:3px solid #263662;
}

/* ------------------------------------------------------------ trust-balk */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .wrap{gap:clamp(22px,4vw,48px);padding:20px clamp(20px,4vw,28px);font-size:.9rem}
.trust b{font-weight:700}

/* --------------------------------------------------------------- functies */
.grid{gap:var(--gap)}
.fcard{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  padding:26px 22px;
  box-shadow:var(--sh-1);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.fcard:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
  border-color:#d7e0ef;
}
.fcard .ic{
  width:44px;height:44px;
  border-radius:var(--r-sm);
  background:linear-gradient(145deg, var(--blue), #5b8cff);
  box-shadow:0 4px 12px -3px rgba(37,99,235,.45);
  margin-bottom:16px;
}
.fcard h3{font-size:1.03rem;letter-spacing:-.015em;margin-bottom:7px}
.fcard p{font-size:.875rem;line-height:1.6}

/* ---------------------------------------------------------------- schermen */
#schermen{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.shot .frame{box-shadow:var(--sh-2);border:1px solid var(--line)}
.shot:hover .frame{transform:scale(1.04);box-shadow:var(--sh-3)}
.shot h4{font-size:1rem;letter-spacing:-.015em;margin-top:18px}
.shot p{font-size:.85rem}
.snav{
  width:46px;height:46px;
  background:rgba(10,22,48,.9);
  backdrop-filter:blur(6px);
  box-shadow:var(--sh-2);
  transition:opacity .2s ease, background-color .2s ease;
}
.snav:hover{background:var(--navy)}

/* ---------------------------------------------------------------- prijzen */
#prijzen{
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(47,111,237,.22), transparent 62%),
    var(--navy);
}
.plans{gap:var(--gap)}
.plan{
  border-radius:var(--r-xl);
  padding:32px 28px;
  box-shadow:var(--sh-2);
}
/* Het middelste pakket viel op met een harde rand en een schaalsprong.
   Nu met hoogte en een fijne ring: het valt nog steeds op, maar rustiger. */
.plan.mid{
  transform:none;
  border:none;
  box-shadow:0 0 0 2px var(--yellow), 0 20px 44px -14px rgba(0,0,0,.5);
}
@media(min-width:961px){
  .plan.mid{transform:translateY(-14px) scale(1.025)}
}
.plan .badge{
  font-size:.74rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:6px 15px;
  box-shadow:0 3px 10px -2px rgba(0,0,0,.35);
}
.plan h3{font-size:1.16rem;letter-spacing:-.02em}
.plan .price,.plan .price span:first-child{
  font-size:clamp(2.3rem, 1.8rem + 1.4vw, 2.85rem);
  letter-spacing:-.04em;
}
.plan .price span:not(:first-child){
  font-size:.9rem;
  font-weight:550;
  margin-left:3px;
  letter-spacing:0;
}
.plan li{font-size:.9rem;border-bottom-color:var(--line2)}
/* rustiger vinkjes: nog steeds groen, maar minder schreeuwerig */
.plan li .check,.plan li>span:first-child{filter:saturate(.85)}
.plan .btn{margin-top:2px;border-radius:var(--r-sm)}
.pnote{font-size:.86rem;margin-top:30px;color:#adbdde}

/* -------------------------------------------------------------------- Q&A */
.qawrap{
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  border:1px solid var(--line);
}
.qatop{padding:17px 24px}
.qmsg{
  border-radius:var(--r-md);
  border-bottom-left-radius:5px;
  font-size:.93rem;
  line-height:1.6;
  box-shadow:var(--sh-1);
}
.qmsg.user{border-bottom-left-radius:var(--r-md);border-bottom-right-radius:5px}
.qsug button{
  font-weight:600;
  font-size:.79rem;
  border-width:1.5px;
  transition:background-color .15s ease, color .15s ease;
}
.qin input{border-width:1.5px;font-size:.93rem;padding:12px 19px}
.qin input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.qin button{transition:background-color .15s ease}
.qin button:hover{background:var(--blue2)}

/* --------------------------------------------------------------- contact */
#contact{background:#fff}

/* ----------------------------------------------------- kleinere schermen */
@media(max-width:960px){
  .hero{padding-top:52px}
  .hero .usps{gap:12px 20px}
  .plan.mid{transform:none}
}
@media(max-width:700px){
  section{padding:52px 0}
  .btn{width:auto;padding:13px 22px}
  .hero .btns .btn{flex:1 1 auto;text-align:center}
}

/* ------------------------------------------- respect voor minder beweging */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.fcard:hover,.shot:hover .frame,.plan.mid{transform:none !important}
}

/* -------------------------------------------------------------- afdrukken */
@media print{
  nav,#toTop,.snav,.qin,.qsug{display:none !important}
  .hero{background:#fff;color:#000}
  .hero h1,.hero p.sub{color:#000}
}

/* ---- correcties na testen op de live site ---------------------------------
   De fotostrook is bewust breder dan de pagina (100vw) zodat hij van rand tot rand
   loopt. 100vw telt de verticale schuifbalk mee, waardoor de pagina een paar pixels
   te breed werd en er onderaan een horizontale schuifbalk verscheen. overflow-x:clip
   snijdt dat weg zonder de plakkende navigatiebalk te breken; hidden zou dat wel doen.

   Twee kolommen functiekaarten is op een telefoon te smal: "Foutcode-diagnose" brak
   dan midden in het woord.
   -------------------------------------------------------------------------- */
html,body{overflow-x:clip}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .shot{flex:0 0 88vw}
  .snav{width:40px;height:40px;font-size:20px}
  .snav.prev{left:8px}
  .snav.next{right:8px}
}