/* Rankkraft — fundament
   ==========================================================================
   Alles wat op elke pagina hetzelfde is: tokens, maatladder, knoppen met hun
   zeven toestanden, kopbalk, voettekst, en de bewegingsprimitieven.

   Uitgangspunt achter het hele ontwerp: dit bureau verkoopt snelheid en SEO.
   Een site die er futuristisch uitziet maar traag laadt verkoopt zijn eigen
   tegendeel. Daarom komt het diepte-effect uit CSS-transforms en niet uit
   WebGL: geen enkel extra bestand, en het staat stil zodra iemand daarom vraagt.
   ========================================================================== */

:root{
  /* Grond en vlakken. Niet zwart maar koel antraciet: puur #000 laat elke
     schaduw verdwijnen en maakt het beeld hard. */
  --grond:#0A0C10;
  --vlak:#11151C;
  --vlak-op:#171C25;
  --lijn:rgba(232,237,242,.12);
  --lijn-op:rgba(232,237,242,.22);

  /* Tekst. #E8EDF2 op --grond haalt 15,1:1, ruim boven de norm. */
  --tekst:#E8EDF2;
  --tekst-zacht:#A8B2BF;      /* 7,9:1 op --grond */

  /* Eén accent, koel en technisch. Een tweede accent maakt een palet rommelig,
     dus warm oranje is er alleen voor wat om actie vraagt. */
  --accent:#5EE6C4;           /* 11,4:1 op --grond */
  --accent-diep:#2BC9A4;
  --accent-waas:rgba(94,230,196,.14);
  --actie:#FF8A4C;            /* 7,6:1 op --grond */
  --actie-diep:#E86F30;

  --fout:#FF9A8B;
  --goed:#7FE0A8;

  --kop:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --tekstfont:"Inter",system-ui,-apple-system,sans-serif;

  --breed:min(1240px, 100% - 3rem);
  --smal:min(760px, 100% - 3rem);
  --rond:14px;
  --rond-klein:10px;

  /* Eén tijdsconstante voor alles wat op aanraking reageert. Verschillende
     duren door elkaar laten een interface slordig voelen. */
  --snel:.18s;
  --traag:.42s;
  --veer:cubic-bezier(.22,.68,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
:target{scroll-margin-top:6rem}

body{
  margin:0;
  background:var(--grond);
  color:var(--tekst);
  font-family:var(--tekstfont);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Korrel over de hele pagina. Eén data-uri van iets meer dan een kilobyte,
   zodat de grote vlakken niet als steriel plastic ogen. Ligt boven alles maar
   vangt geen klikken. */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-underline-offset:.22em}

h1,h2,h3,h4{
  font-family:var(--kop);font-weight:600;
  line-height:1.06;letter-spacing:-.026em;margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,5rem)}
h2{font-size:clamp(1.875rem,1.3rem + 2.4vw,3.125rem)}
h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);letter-spacing:-.018em}
h4{font-size:1.0625rem;letter-spacing:-.01em}
p{margin:0 0 1.125rem;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* Getallen: prijzen en meetwaarden moeten onder elkaar uitlijnen. */
.cijfer,.prijs,table td,table th{font-variant-numeric:tabular-nums}

.omhulsel{width:var(--breed);margin-inline:auto}
.smal{width:var(--smal);margin-inline:auto}
.sectie{padding-block:clamp(4rem,10vh,7.5rem)}
.sectie + .sectie{padding-top:0}

.oog{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--tekstfont);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1rem;
}
.oog::before{content:"";width:1.75rem;height:1px;background:var(--accent);opacity:.7}

.inleiding{color:var(--tekst-zacht);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);max-width:58ch}

/* ── Overslaan-link ───────────────────────────────────────────────────────── */
.overslaan{
  position:absolute;left:1rem;top:-5rem;z-index:200;
  background:var(--accent);color:#06231C;padding:.75rem 1.25rem;
  border-radius:var(--rond-klein);font-weight:600;text-decoration:none;
  transition:top var(--snel) ease;
}
.overslaan:focus{top:1rem}

/* ── Knoppen ──────────────────────────────────────────────────────────────
   Zeven toestanden, allemaal zichtbaar gemaakt en nagemeten. De uitgeschakelde
   toestand krijgt een eigen kleur en geen opacity:.4, want dat drukt elk
   contrast onder de norm. */
.knop{
  --knop-vlak:var(--accent);
  --knop-tekst:#06231C;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:.8125rem 1.5rem;
  font:inherit;font-weight:600;font-size:.9375rem;
  background:var(--knop-vlak);color:var(--knop-tekst);
  border:1px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:background-color var(--snel) ease,border-color var(--snel) ease,
             transform var(--snel) var(--veer),color var(--snel) ease;
}
.knop:hover{--knop-vlak:var(--accent-diep)}
.knop:active{transform:translateY(1px)}
.knop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.knop[disabled],.knop[aria-disabled="true"]{
  --knop-vlak:#2A313C;--knop-tekst:#AEB7C2;   /* 5,1:1, dus leesbaar */
  cursor:not-allowed;transform:none;
}
.knop-actie{--knop-vlak:var(--actie);--knop-tekst:#2A1103}
.knop-actie:hover{--knop-vlak:var(--actie-diep)}
.knop-lijn{
  --knop-vlak:transparent;--knop-tekst:var(--tekst);
  border-color:var(--lijn-op);
}
.knop-lijn:hover{--knop-vlak:rgba(232,237,242,.06);border-color:var(--tekst)}

/* Glansstreep over de knop. Alleen met een echte aanwijzer, want op een
   aanraakscherm blijft :hover na een tik plakken. */
@media (hover:hover) and (pointer:fine){
  .knop::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
    transform:translateX(-120%);
  }
  .knop:hover::after{transition:transform .55s ease;transform:translateX(120%)}
}

/* ── Kopbalk ──────────────────────────────────────────────────────────────── */
.balk{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.875rem clamp(1.25rem,4vw,2.5rem);
  background:rgba(10,12,16,.72);
  border-bottom:1px solid transparent;
  transition:background-color var(--snel) ease,border-color var(--snel) ease;
}
/* backdrop-filter alleen als de browser hem kent. En bewust op een sticky en
   niet op een fixed balk: een fixed voorouder met backdrop-filter wordt het
   bevattende blok voor alles wat position:fixed is, en dat heeft eerder in dit
   project een uitklapmenu tot 65px platgedrukt. */
@supports (backdrop-filter:blur(1px)){
  .balk{backdrop-filter:blur(14px) saturate(1.4)}
}
.balk.vast{background:rgba(10,12,16,.92);border-bottom-color:var(--lijn)}
.merk{display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;color:var(--tekst);
  font-family:var(--kop);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em}
.merk-teken{width:1.75rem;height:1.75rem;flex:none;color:var(--accent)}
.balk-nav{display:none;margin-left:auto;gap:1.75rem;font-size:.9375rem;font-weight:600}
.balk-nav a{color:var(--tekst-zacht);text-decoration:none;position:relative;padding:.25rem 0}
.balk-nav a:hover{color:var(--tekst)}
.balk-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--traag) var(--veer)}
.balk-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.balk-nav a[aria-current="page"]{color:var(--tekst)}
.balk-nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--accent)}
.balk-knop{display:none}
.menuknop{
  margin-left:auto;display:inline-grid;place-items:center;
  width:2.75rem;height:2.75rem;background:none;border:1px solid var(--lijn-op);
  border-radius:var(--rond-klein);color:var(--tekst);cursor:pointer;
}
.menuknop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:920px){
  .balk-nav{display:flex}
  .balk-knop{display:inline-flex}
  .menuknop{display:none}
}
/* Uitklapmenu op smal scherm. position:absolute onder de balk, niet fixed:
   dan hoeft de hoogte niet geraden te worden en kan de lijst zelf scrollen. */
.mobielmenu{
  position:absolute;top:100%;left:0;right:0;display:none;
  flex-direction:column;padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;
  background:#0C1015;border-top:1px solid var(--lijn);
  box-shadow:0 20px 44px rgba(0,0,0,.55);
  max-height:calc(100dvh - 4.5rem);overflow-y:auto;overscroll-behavior:contain;
}
.mobielmenu.open{display:flex}
.mobielmenu a{padding:.9375rem .25rem;color:var(--tekst-zacht);text-decoration:none;
  border-bottom:1px solid rgba(232,237,242,.07);font-size:1.0625rem}
.mobielmenu a:hover{color:var(--tekst)}
.mobielmenu .knop{margin-top:1.125rem;border-bottom:0}

/* ── Voettekst ────────────────────────────────────────────────────────────── */
.voet{border-top:1px solid var(--lijn);padding-block:clamp(3rem,7vh,4.5rem) 2rem;margin-top:clamp(4rem,10vh,7rem)}
.voet-raster{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:760px){.voet-raster{grid-template-columns:1.4fr 1fr 1fr}}
.voet h4{margin-bottom:.875rem;color:var(--tekst)}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.voet a{color:var(--tekst-zacht);text-decoration:none}
.voet a:hover{color:var(--tekst)}
.voet-klein{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--lijn);
  font-size:.8125rem;color:var(--tekst-zacht);display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

/* ── Bewegingsprimitieven ─────────────────────────────────────────────────
   Deze drie worden op elke pagina gebruikt. Ze zetten alleen transform en
   opacity, dus de browser hoeft de opmaak niet opnieuw te berekenen. */

/* opkomen bij binnenkomst */
html.js .rijs{opacity:0;transform:translateY(1.75rem)}
html.js .rijs.aan{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s var(--veer)}
html.js .rijs.aan{transition-delay:calc(var(--i,0) * 90ms)}
/* Staat het al in het eerste scherm, dan geen overgang en geen vertraging:
   het is gewoon zichtbaar vanaf het begin. Zie de uitleg in basis.js. */
html.js .rijs.meteen{transition:none !important;transition-delay:0s !important}

/* kaart die onder de aanwijzer kantelt */
.kantel{transform-style:preserve-3d;will-change:transform}
@media (hover:hover) and (pointer:fine){
  html.js .kantel{transition:transform var(--traag) var(--veer)}
  html.js .kantel::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
               var(--accent-waas),transparent 62%);
    opacity:0;transition:opacity var(--snel) ease;
  }
  html.js .kantel:hover::after{opacity:1}
}

/* rand die oplicht waar de cursor is */
.gloed{position:relative;isolation:isolate}
@media (hover:hover) and (pointer:fine){
  .gloed::before{
    content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
               var(--accent),transparent 60%);
    opacity:0;transition:opacity var(--snel) ease;
  }
  .gloed:hover::before{opacity:.55}
}

/* ── Rustige weergave ─────────────────────────────────────────────────────
   Twee keer opgeschreven en niet samengevoegd tot één selectorlijst: een
   browser die de media-query niet kent zou anders ook de klasse-variant
   weggooien. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html.js .rijs{opacity:1;transform:none}
  .kantel{transform:none !important}
  .knop::after{display:none}
}
html.rustig{scroll-behavior:auto}
html.rustig *,html.rustig *::before,html.rustig *::after{
  animation-duration:.01ms !important;transition-duration:.01ms !important}
html.rustig .rijs{opacity:1 !important;transform:none !important}
html.rustig .kantel{transform:none !important}
html.rustig .knop::after{display:none}