/* MEX PRO · homepage. Bovenop licht.css (de Porselein-stijl): een levende studio-achtergrond, een zwevende
   glazen navigatie, een grafiet privacyband, rustigere typografie en het aanmeldblok. */
:root{
  --body:'Manrope',ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif; --disp:var(--body);
  --bg:#F8F8FA; --bg2:#EFEFF3; --fg:#141416; --mute:#6B6B70; --acc:#30D158; --acc2:#1E8E3E;
  --line:rgba(17,17,19,.08); --surf:rgba(255,255,255,.68); --grain:.035; --r:30px;
  --wall:linear-gradient(180deg,#FDFDFE 0%,#F6F6F9 38%,#EEEEF2 100%);
}
html{scroll-padding-top:96px}
body{letter-spacing:-.006em}
::selection{background:rgba(48,209,88,.24)}
h1{font-weight:250;letter-spacing:-.05em;font-size:clamp(44px,6.2vw,92px)}
h2{font-weight:280;letter-spacing:-.042em}
h3{font-weight:500;letter-spacing:-.028em}
h1 em,h2 em,h3 em{background:linear-gradient(100deg,#1E8E3E 0%,#2DBF55 45%,#6FDC8C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.lead{color:var(--mute);font-weight:400}
.eyebrow{font-size:11.5px;letter-spacing:.2em;color:#6B6B70}

/* ---- achtergrond: studiolicht, een groene gloed die met je meescrollt, fijne korrel ---- */
.wall{background:var(--wall)}
.wall::before{content:"";position:absolute;left:-20vw;top:-30vh;width:90vw;height:90vh;background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,0));filter:blur(10px)}
.wall::after{content:"";position:absolute;inset:auto 0 0 0;height:45vh;background:radial-gradient(60% 100% at 50% 100%,rgba(20,20,22,.06),transparent 70%)}
.mx-aura{position:fixed;z-index:-2;width:80vmax;height:80vmax;left:50%;top:0;margin-left:-40vmax;margin-top:-40vmax;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(48,209,88,.13),rgba(48,209,88,.05) 45%,transparent 70%);transform:translate3d(var(--ax2,0),var(--ay2,30vh),0);will-change:transform;transition:opacity 1s}
.mx-aura.twee{width:60vmax;height:60vmax;margin-left:-30vmax;margin-top:-30vmax;background:radial-gradient(closest-side,rgba(120,170,255,.08),transparent 70%);transform:translate3d(var(--bx2,0),var(--by2,70vh),0)}
.grain{mix-blend-mode:soft-light;opacity:.5}
.mx-voortgang{position:fixed;left:0;right:0;top:0;height:2px;z-index:40;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#1E8E3E,#30D158 60%,#9BEBB0);pointer-events:none}

/* ---- zwevende navigatie ---- */
.nav{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(1140px,calc(100% - 24px));padding:7px 7px 7px 18px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(17,17,19,.07),0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -22px rgba(0,0,0,.28);backdrop-filter:blur(26px) saturate(1.9);-webkit-backdrop-filter:blur(26px) saturate(1.9);transition:background .4s,box-shadow .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.nav.verstopt{transform:translate(-50%,calc(-100% - 60px));box-shadow:none}
.nav .brand{font-weight:800;letter-spacing:.04em;font-size:15px;gap:9px}
.nav .brand .logo{width:28px;height:23px}
.nav .brand .pro{font:700 9.5px/1 var(--body);letter-spacing:.18em;padding:4px 6px 4px 7px;border-radius:99px;background:#141416;color:#fff;margin-left:-2px}
.nav-links{display:flex;gap:2px;margin-left:auto;margin-right:6px}
.nav-links a{font-size:14px;font-weight:500;color:#57575C;padding:9px 13px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--fg);background:rgba(17,17,19,.05)}
.nav-acties{display:flex;gap:6px;align-items:center}
.nav .in{font-size:14px;font-weight:600;padding:10px 15px;border-radius:999px;color:var(--fg)}
.nav .in:hover{background:rgba(17,17,19,.05)}
.nav .cta{padding:11px 18px;font-size:14px;font-weight:650;background:linear-gradient(180deg,#2B2B2F,#111113);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -8px rgba(0,0,0,.55)}
@media (max-width:900px){.nav-links{display:none}.nav-acties{margin-left:auto}}
@media (max-width:420px){.nav .in{display:none}.nav{padding-left:14px}}

/* ---- knoppen en vlakken ---- */
.btn{padding:15px 24px;font-weight:650;letter-spacing:-.01em;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(17,17,19,.09),0 1px 0 #fff inset,0 10px 26px -14px rgba(0,0,0,.3)}
.btn.vol{background:linear-gradient(180deg,#2B2B2F,#111113);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 30px -12px rgba(0,0,0,.55)}
.step,.pcard,.pack,blockquote{box-shadow:0 0 0 1px var(--line),0 1px 0 rgba(255,255,255,.85) inset,0 24px 60px -30px rgba(0,0,0,.22);background:rgba(255,255,255,.62)}
.step,.pcard,.pack{isolation:isolate;overflow:hidden}
.step::after,.pcard::after,.pack::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(48,209,88,.12),transparent 45%);opacity:0;transition:opacity .4s}
.step:hover::after,.pcard:hover::after,.pack:hover::after{opacity:1}
.step{position:relative}
.pack.best{background:linear-gradient(180deg,#1C1C1F,#0E0E10);color:#F5F5F7;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.tip{box-shadow:0 6px 16px -6px rgba(48,209,88,.8)}
.film-frame,.pf{box-shadow:0 0 0 1px rgba(17,17,19,.06),0 40px 80px -40px rgba(0,0,0,.45)}
.kcard{box-shadow:0 0 0 1px var(--line),0 24px 50px -28px rgba(0,0,0,.35)}
.hero-art .turn{filter:drop-shadow(0 50px 60px rgba(0,0,0,.16))}
.halo{background:radial-gradient(circle,rgba(48,209,88,.20),transparent 60%)}
details{border-top-color:rgba(17,17,19,.08)}
summary{font-weight:550;letter-spacing:-.015em}

/* ---- grafiet band: privacy ---- */
#prive{--bg:#0C0D0D;--bg2:#161718;--fg:#F4F4F6;--mute:#9C9CA2;--line:rgba(255,255,255,.09);--surf:rgba(255,255,255,.04);--acc2:#30D158;
  position:relative;margin:8vh max(10px,1.4vw);padding:16vh 0;border-radius:44px;color:var(--fg);overflow:hidden;
  background:radial-gradient(60% 55% at 50% -5%,rgba(48,209,88,.20),transparent 70%),radial-gradient(40% 40% at 90% 110%,rgba(48,209,88,.08),transparent 70%),linear-gradient(180deg,#121314,#0A0B0B)}
#prive::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);pointer-events:none}
#prive .eyebrow{color:#9C9CA2}
#prive .pcard{background:rgba(255,255,255,.035);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.06) inset}
#prive .pcard p{color:#A1A1A6}

/* ---- MEX PRO aanmelden ---- */
.mx-start{padding:14vh 0 16vh;position:relative}
.mx-start-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px);align-items:start}
.mx-start-grid>*{min-width:0}
.mx-voordelen{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:4px}
.mx-voordelen li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.mx-voordelen li i{grid-row:span 2;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(48,209,88,.12);color:#1E8E3E;font:700 13px/1 'JetBrains Mono',monospace;font-style:normal}
.mx-voordelen b{font-size:16.5px;font-weight:650;letter-spacing:-.015em}
.mx-voordelen span{color:var(--mute);font-size:15px}
.mx-auth{position:relative;padding:clamp(22px,3vw,34px);border-radius:34px;background:rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(17,17,19,.07),0 1px 0 #fff inset,0 50px 100px -40px rgba(0,0,0,.35);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}
.mx-auth::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(48,209,88,.55),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 70%,rgba(17,17,19,.12));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.mx-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;background:rgba(17,17,19,.05);margin-bottom:24px;position:relative}
.mx-tabs button{position:relative;z-index:1;border:0;background:none;font:650 14px/1 var(--body);padding:12px;border-radius:99px;color:#6B6B70;cursor:pointer;transition:color .3s}
.mx-tabs button[aria-selected="true"]{color:#141416}
.mx-tabs .glij{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:#fff;box-shadow:0 2px 10px -2px rgba(0,0,0,.15);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mx-tabs[data-tab="in"] .glij{transform:translateX(100%)}
.mx-voorbeeld{display:flex;align-items:center;gap:10px;margin:-4px 0 22px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,#F4F4F7,#ECECF0);font:500 14px/1.2 'JetBrains Mono',monospace;color:#141416;overflow:hidden}
.mx-voorbeeld .slot{color:#9C9CA2}
.mx-voorbeeld b{font-weight:600;color:#1E8E3E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-sterkte{height:4px;border-radius:4px;background:rgba(17,17,19,.07);overflow:hidden}
.mx-sterkte i{display:block;height:100%;width:var(--w,0%);background:var(--k,#FF453A);border-radius:4px;transition:width .4s cubic-bezier(.2,.8,.2,1),background .4s}
.mx-oog{border:0;background:none;color:#6B6B70;font:600 12.5px/1 var(--body);padding:0 14px;cursor:pointer}
.mx-klein{font-size:12.5px;color:#8A8A90;line-height:1.5;margin-top:4px}
@media (max-width:980px){.mx-start-grid{grid-template-columns:1fr}}

/* ---- voet ---- */
.mx-voet{position:relative;margin:0 max(10px,1.4vw) max(10px,1.4vw);border-radius:44px;padding:clamp(48px,9vh,96px) 0 calc(36px + env(safe-area-inset-bottom,0px));background:radial-gradient(50% 60% at 15% 0%,rgba(48,209,88,.16),transparent 70%),linear-gradient(180deg,#121314,#0A0B0B);color:#F4F4F6;overflow:hidden}
.mx-voet .wrap{display:grid;gap:42px}
.mx-voet-woord{display:flex;align-items:center;gap:clamp(12px,2vw,26px);font:800 clamp(56px,13vw,190px)/.85 var(--body);letter-spacing:-.05em}
.mx-voet-woord svg{width:clamp(56px,11vw,160px);height:auto;color:#F4F4F6;flex:none}
.mx-voet-woord i{font-style:normal;font-size:.26em;font-weight:700;letter-spacing:.24em;padding:.5em .7em .5em .9em;border-radius:99px;background:#30D158;color:#04210E;align-self:center}
.mx-voet-rij{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.09);padding-top:28px}
.mx-voet nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:#A1A1A6}
.mx-voet nav a:hover{color:#fff}
.mx-voet small{color:#77777D;font-size:12.5px}
.mx-voet .mx-adres{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F4F4F6}
.foot{display:none}

@media (max-width:620px){#prive{border-radius:30px;margin-inline:8px}.mx-voet{border-radius:30px;margin-inline:8px}.mx-auth{border-radius:28px}}
@media (prefers-reduced-motion:reduce){.mx-aura{transform:none!important}.nav{transition:none}}

/* hero: het product begint rechts van de kop en schuift pas bij de tweede tekst naar het midden */
@media (min-width:901px){.hero .hero-art{translate:calc(var(--mx-hx,1) * 17vw) 0}}

/* details */
.pack.best{padding-top:58px}
.pack.best .tip{left:22px;right:auto;top:20px}
.faq h2{margin-bottom:32px}
@media (max-width:900px){
  .hero .hero-art{translate:0 20vh}
  .hero .beat[data-beat="0"]{top:36%}
  .mx-start{padding:8vh 0 12vh}
  .faq{padding-bottom:4vh}
}

/* apparaten: binnenkort leverbaar */
.mx-binnenkort{display:inline-flex;align-items:center;gap:7px;margin:-6px 0 10px;padding:5px 11px;border-radius:99px;background:rgba(255,159,10,.14);color:#A35400;font:700 11.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.mx-binnenkort::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF9F0A;animation:mx-puls 1.8s ease infinite}
.prod-txt .mx-wl{margin-top:18px;cursor:pointer;border:0;font:650 14.5px/1 var(--body)}
.mx-pk-lead{margin-bottom:6px}
.mx-pk-lead a{color:var(--acc2);font-weight:650;text-decoration:underline;text-underline-offset:3px}