:root{
  --bg:#050609; --bg-2:#080A11; --panel:#0C0F17; --panel-2:#11151F;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11);
  --text:#F2F4FA; --muted:#8B93A7; --dim:#565E73;
  --blue:#0052FF; --blue-2:#4D7CFF; --blue-pale:#8FB0FF; --glow:rgba(0,82,255,.30);
  --green:#3DE08C;
  --display:'Archivo',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1180px; --measure:58ch;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(0,82,255,.35)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,44px)}

/* ── ademende secties ── */
section{padding:clamp(80px,14vw,168px) 0;position:relative}
.band{background:var(--bg-2)}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;text-wrap:balance;font-weight:800;line-height:1.04}
h1{font-size:clamp(40px,7vw,84px)}
h2{font-size:clamp(30px,5vw,56px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ac{color:var(--blue-2)}
.lead{color:var(--muted);font-size:clamp(17px,1.9vw,21px);max-width:var(--measure);line-height:1.6}
.body{color:var(--muted);max-width:var(--measure)}

/* ── header ── */
header{position:sticky;top:0;z-index:20;background:rgba(5,6,9,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:24px;padding:16px clamp(22px,5vw,44px)}
.brand{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.03em}
.brand .dot{color:var(--blue)}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{font-size:14.5px;color:var(--muted);transition:color .15s}
.nav a:hover{color:var(--text)}
.btn{font-family:var(--body);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:12px;cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,background .2s;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 26px -6px var(--glow)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--blue-2);transform:translateY(-1px);box-shadow:0 12px 36px -6px var(--glow)}
}
.btn-ghost{color:var(--muted);border:1px solid var(--line-2)}
.btn-ghost:hover{color:var(--text);border-color:rgba(0,82,255,.5)}
.nav .btn-primary{color:#fff}
@media(max-width:720px){.nav a:not(.btn){display:none}}

/* ── hero ── */
.hero{padding-top:clamp(56px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,80px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{margin-top:22px}
.hero .lead{margin-top:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:36px}
.cta-note{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;inset:-12% -8% -8% -8%;background:radial-gradient(60% 60% at 60% 40%,var(--glow),transparent 70%);filter:blur(30px);z-index:0;pointer-events:none}
.shot{position:relative;z-index:1;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#05060c;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02)}
.shot .chrome{display:flex;align-items:center;gap:6px;padding:11px 14px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
.shot .chrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.shot .url{margin-left:10px;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.shot img{width:100%;height:auto;display:block}

/* ── probleem ── */
.split{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,4vw,56px)}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:18px}}
.split .eyebrow{padding-top:14px}
.split h2{margin-bottom:26px}
.prose p{color:var(--muted);max-width:var(--measure)}
.prose p + p{margin-top:20px}

/* ── sub-features (tekstkaarten) ── */
.feat-head{max-width:var(--measure);margin-bottom:clamp(40px,6vw,64px)}
.feat-head h2{margin-top:14px}
.feat-head p{margin-top:18px}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media(max-width:680px){.feats{grid-template-columns:1fr}}
.feat{background:var(--bg-2);padding:clamp(26px,3.5vw,40px)}
.band .feat{background:var(--bg)}
.feat .n{font-family:var(--mono);font-size:12px;color:var(--blue-2);letter-spacing:.06em}
.feat h3{margin:14px 0 10px}
.feat p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ── praktijk / uitkomst ── */
.outcome{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,56px)}
@media(max-width:760px){.outcome{grid-template-columns:1fr;gap:26px}}
.oc .big{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,56px);letter-spacing:-.03em;color:var(--text);line-height:1}
.oc .big.g{color:var(--green)}
.oc .lbl{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:12px;max-width:24ch}

/* ── bewijs ── */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote .mark{font-family:var(--display);font-size:56px;color:var(--blue-2);line-height:.5;opacity:.6}
.quote blockquote{font-family:var(--display);font-weight:800;font-size:clamp(23px,3.4vw,38px);letter-spacing:-.02em;line-height:1.25;margin:22px 0 30px;text-wrap:balance}
.quote .who{display:inline-flex;align-items:center;gap:14px}
.quote .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#1B2236,#0E1119);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;color:var(--blue-2)}
.quote .who b{font-weight:600}.quote .who span{color:var(--dim);font-size:14px}

/* ── finale ── */
.finale{text-align:center}
.finale h2{max-width:16ch;margin:0 auto}
.finale .lead{margin:20px auto 34px}
.finale .cta-row{justify-content:center}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--dim);font-family:var(--mono);font-size:12.5px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer .sp{margin-left:auto}
footer a{color:var(--muted)}

/* ── showcase (echte tool-structuur, groot) ── */
.sc-head{max-width:var(--measure);margin:0 auto clamp(34px,5vw,52px);text-align:center}
.sc-head h2{margin-top:14px}.sc-head p{margin-top:16px;margin-left:auto;margin-right:auto}
.showcase{margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#080B12;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.showcase::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 72% -10%,var(--glow),transparent 68%);opacity:.5;pointer-events:none;z-index:1}
.showcase img{width:100%;height:auto;display:block;position:relative;z-index:0}
.showcase figcaption{position:relative;z-index:2;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);padding:16px 22px;border-top:1px solid var(--line);background:rgba(255,255,255,.015);display:flex;gap:8px 20px;flex-wrap:wrap}
.showcase figcaption b{color:var(--text);font-weight:600}
.showcase.tall{background:#05060c}

/* ── motion ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{animation:none!important;transition:none!important}}

/* ── Platform-dropdown in de header ── */
.dd{position:relative;display:inline-flex}
.dd-toggle{font-family:var(--body);font-size:14.5px;color:var(--muted);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 0}
.dd-toggle .car{font-size:10px;transition:transform .22s ease;color:var(--blue-2)}
.dd:hover .dd-toggle,.dd:focus-within .dd-toggle{color:var(--text)}
.dd:hover .car,.dd:focus-within .car{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 14px);left:0;transform:translateY(-8px);width:min(360px,86vw);background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 44px var(--glow);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:60}
.dd-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-menu a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:11px;transition:background .15s ease}
.dd-menu a:hover{background:var(--panel-2)}
.dd-menu .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.dd-menu .t{font-size:14.5px;color:var(--text);font-weight:500}
@media(prefers-reduced-motion:reduce){.dd-menu,.dd .car{transition:none}}
/* Op smalle schermen stak dit paneel 64px buiten het scherm: het is 335px breed
   en hing op left:0 van een .dd die rechts in de nav staat. Omdat een absoluut
   gepositioneerd element óók meetelt voor scrollWidth als het verborgen is,
   kreeg elke mobiele bezoeker een horizontaal scrollende pagina voor een menu
   dat hij niet eens zag. Rechts uitlijnen houdt het binnen beeld.
   Het omslagpunt is 720px en niet 620: het paneel is 360px breed en begint rond
   x=318, dus het past pas vanaf ongeveer 680px viewport. Op 620 gemeten leek het
   opgelost, maar op 621 stak het er weer 57px uit. */
@media(max-width:720px){
  .dd-menu{left:auto;right:0;width:min(360px,calc(100vw - 28px))}
}