@font-face{font-family:Archivo;font-weight:400;font-display:swap;src:url(fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:Archivo;font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders";font-weight:900;font-display:swap;src:url(fonts/bsd-900.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-display:swap;src:url(fonts/cp-700.woff2) format("woff2")}
:root{--ink:#0e0d0c;--ink2:#181614;--line:#2c2824;--paper:#e8e0cf;--paper2:#efe7d6;--cream:#efe7d6;--muted:#c4baa8;--muted-d:#6f6656;--red:#e0313c;--red-d:#a51d26;
--display:"Big Shoulders",Impact,"Arial Narrow",sans-serif;--sans:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--type:"Courier Prime",ui-monospace,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font:17px/1.55 var(--sans)}
html[data-l=nl] [lang=en],html[data-l=en] [lang=nl]{display:none!important}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* top */
.top{position:sticky;top:0;z-index:5;background:rgba(14,13,12,.92);backdrop-filter:blur(6px);border-bottom:3px solid var(--red)}
.top .wrap{display:flex;align-items:center;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 28px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.brand img{width:38px;height:38px;border-radius:24%}
.top nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.top nav a{font:700 13px var(--type);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--cream)}
.lang{display:flex;border:2px solid var(--cream)}
.lang button{all:unset;cursor:pointer;font:700 12px var(--type);letter-spacing:.1em;padding:4px 8px;color:var(--cream)}
.lang button.on{background:var(--cream);color:var(--ink)}
@media(max-width:640px){.top nav a{display:none}}
/* hero */
.hero{overflow:hidden;padding:64px 0 40px;background:radial-gradient(ellipse at 80% 20%,#2a1214 0,transparent 55%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.stamp{display:inline-block;font:700 12px var(--type);letter-spacing:.18em;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 10px;transform:rotate(-2deg);margin-bottom:18px}
h1{font:900 clamp(64px,12vw,128px)/.86 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:0}
.herotext{position:relative}
.herotext>*:not(.bigplate){position:relative;z-index:1}
 .bigplate{position:absolute;z-index:0;right:40px;top:-70px;width:170px;height:170px;transform:rotate(-8deg);filter:drop-shadow(0 22px 30px rgba(0,0,0,.85))}
@media(max-width:820px){.bigplate{width:96px;height:96px;right:0;top:-30px}.hero .stamp{font-size:11px;letter-spacing:.1em}}
h1 small{display:block;font-size:.34em;letter-spacing:.06em;color:var(--red);margin-top:10px}
.lead{font-size:20px;color:#d8cfbe;max-width:34ch;margin:22px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font:900 20px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 22px;background:var(--red);color:#fff;border:2px solid var(--red);box-shadow:5px 5px 0 var(--cream)}
.btn:hover{background:var(--red-d)}
.btn.ghost{background:transparent;border-color:var(--cream);box-shadow:none}
.btn svg{width:20px;height:20px}
.note{font:700 14px var(--type);color:#d8cfbe;letter-spacing:.04em}
.devices{position:relative;justify-self:center;width:min(360px,86vw);padding:0 0 0 0}
.devices::before{content:"";position:absolute;inset:8% -10% 0 -10%;background:radial-gradient(circle at 50% 45%,rgba(224,49,60,.45),transparent 62%);filter:blur(10px);z-index:0}
.phone{position:relative;z-index:2;background:#1c1a18;padding:9px;border-radius:44px;border:1px solid #3d3934;box-shadow:inset 0 0 0 2px #0a0908,0 40px 70px -20px rgba(0,0,0,.85),0 0 0 1px #000}
.phone .scr{position:relative;border-radius:35px;overflow:hidden;background:#0e0d0c}
.phone .scr::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #1c1a18;z-index:3}
.phone .scr img{margin-top:18px}
.phone.back{position:absolute;z-index:1;width:78%;top:-26px;right:-34%;opacity:.55;transform:scale(.96);filter:saturate(.8)}
@media(max-width:820px){.phone.back{display:none}}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:40px}.devices{margin-top:10px}}
/* tape */
.tape{height:26px;background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,var(--cream) 12px 24px);border-top:3px solid var(--red);border-bottom:3px solid var(--red)}
/* sections */
section{padding:72px 0}
h2{font:900 clamp(40px,7vw,64px)/.95 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
h2 .r{color:var(--red)}
.sub{color:var(--muted);max-width:60ch;margin:0 0 36px}
.paper{background:var(--paper);color:var(--ink)}
.paper .sub{color:var(--muted-d)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--paper2);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:22px}
.card .no{font:700 13px var(--type);color:var(--red);letter-spacing:.14em}
.card h3{font:900 28px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:6px 0 10px}
.card p{margin:0;font-size:16px;color:#3b362f}
/* screens */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:6px 4px 26px}
.shots figure{margin:0;min-width:0}
@media(max-width:820px){.shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:6px 20px 26px}.shots::-webkit-scrollbar{display:none}.shots figure{flex:0 0 230px;scroll-snap-align:start}}
.shots .phone{padding:7px;border-radius:36px}.shots .phone .scr{border-radius:29px}.shots .phone .scr::before{top:8px;width:10px;height:10px;margin-left:-5px}.shots .phone .scr img{margin-top:14px}
.shots figcaption{font:900 22px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--cream);margin-top:16px}
/* RP */
.rp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.rp{grid-template-columns:1fr}}
.weeks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;height:220px;border-bottom:3px solid var(--cream);padding:0 4px}
.weeks div{background:var(--red);position:relative}
.weeks div.dl{background:#5a524a}
.weeks span{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font:700 13px var(--type);letter-spacing:.1em;color:var(--muted)}
.weeks b{position:absolute;top:-24px;left:0;right:0;text-align:center;font:900 18px var(--display);letter-spacing:.06em}
.rp ul{list-style:none;padding:0;margin:0}
.rp li{padding:12px 0;border-bottom:1px solid var(--line)}
.rp li b{font:900 22px var(--display);letter-spacing:.06em;color:var(--red);display:inline-block;min-width:64px}
/* privacy band */
.priv{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--cream)}
.priv div{padding:22px;border-right:2px solid var(--cream)}
.priv div:last-child{border-right:0}
.priv b{display:block;font:900 30px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.priv p{margin:0;color:var(--muted);font-size:15px}
@media(max-width:820px){.priv{grid-template-columns:1fr 1fr}.priv div:nth-child(2){border-right:0}.priv div:nth-child(-n+2){border-bottom:2px solid var(--cream)}}
@media(max-width:480px){.priv{grid-template-columns:1fr}.priv div{border-right:0;border-bottom:2px solid var(--cream)}.priv div:last-child{border-bottom:0}}
/* faq */
details{border-bottom:2px solid var(--ink);padding:16px 0}
details summary{cursor:pointer;font:900 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::after{content:"+";color:#d42a35}
details[open] summary::after{content:"\2013"}
details p{margin:10px 0 0;color:#3b362f}
/* footer */
footer{padding:40px 0;border-top:3px solid var(--red);color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between}
footer a{color:var(--cream)}
/* doc (privacy) */
.doc{max-width:760px;padding:56px 20px 80px;margin:0 auto}
.doc h1{font-size:clamp(52px,10vw,92px)}
.doc h2{font-size:34px;margin:40px 0 8px}
.doc p,.doc li{color:#d8cfbe}
.doc .meta{font:700 13px var(--type);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:14px}
.doc .box{border:2px solid var(--red);padding:18px 20px;margin:26px 0;background:#1a1112}

/* zo beslist ferro */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:900px){.steps{grid-template-columns:1fr;max-width:380px;margin:0 auto}}
.steps figure{margin:0}
.steps .phone{max-width:340px;margin:0 auto 22px}
.steps figcaption{display:flex;gap:12px;align-items:baseline;font:900 26px/1.05 var(--display);text-transform:uppercase;letter-spacing:.03em}
.steps figcaption b{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;background:var(--red);color:#fff;font-size:22px}
.steps p{color:#cfc6b5;font-size:16px;margin:10px 0 0}
/* volumegrafiek */
.volchart{width:100%;height:auto;display:block;margin-top:6px}
.volchart .vl{font:900 18px var(--display);letter-spacing:.06em}
.volchart .wk{font:700 14px var(--type);fill:#c4baa8;letter-spacing:.08em}
.volchart .nv{font:900 18px var(--display);fill:#efe7d6}
.volchart .nt{font:700 12px var(--type);fill:#fff;letter-spacing:.04em}
.chartcap{color:var(--muted);font-size:14px;margin:10px 0 0;max-width:60ch}