/** Shopify CDN: Minification failed

Line 236:0 Unexpected "}"

**/
/* ============================================================
   CALYN CSS V9.13 — MOBILE FIRST
   Basisstijlen = mobiel. Desktop via min-width media queries.
   ============================================================ */

:root {
  --bg:#07090D; --bg-s:#0C1018; --bg-c:#0F1520; --bg-r:#141C27;
  --tx:#ECF0F5; --tm:#7B8EA0; --td:#3E5060;
  --ac:#2EC4B4; --ad:#1A8880; --ag:rgba(46,196,180,.11); --bo:rgba(255,255,255,.055); --ba:rgba(46,196,180,.28);
  --ac-move:#5a9e22; --ac-move-bg:rgba(59,109,17,.12); --ac-move-border:rgba(59,109,17,.3);
  --ac-discreet:#4a8fd4; --ac-discreet-bg:rgba(24,95,165,.1); --ac-discreet-border:rgba(24,95,165,.3);
  --ac-longevity:#C084FC; --ac-longevity-bg:rgba(192,132,252,.1); --ac-longevity-border:rgba(192,132,252,.3);
  --fd:'Cormorant Garamond',serif; --fb:'DM Sans',sans-serif;
  --r:3px; --rl:7px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--fb); background:var(--bg); color:var(--tx); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ── ANIMATIES ── */
@keyframes fi { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ============================================================
   NAV — MOBILE FIRST
   ============================================================ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(7,9,13,.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bo);
  transition:all .4s ease;
}
nav.sc { background:rgba(7,9,13,.97); }
.nl img { height:32px; }

/* Desktop nav links: verborgen op mobiel */
ul.nv { display:none; list-style:none; gap:20px; }
ul.nv a { color:rgba(236,240,245,.58); text-decoration:none; font-size:12px; letter-spacing:.07em; transition:color .2s; }
ul.nv a:hover { color:var(--tx); }

/* Nav pills kleur */
ul.nv a.nv-pill { border-radius:20px; padding:5px 12px; font-size:11px; font-weight:500; letter-spacing:.05em; border:1px solid transparent; }
ul.nv a.nv-longevity { color:#C084FC; border-color:rgba(192,132,252,.28); background:rgba(192,132,252,.07); }
ul.nv a.nv-sharp  { color:#2EC4B4; border-color:rgba(46,196,180,.28); background:rgba(46,196,180,.07); }
ul.nv a.nv-move   { color:#7BC47F; border-color:rgba(123,196,127,.28); background:rgba(123,196,127,.07); }
ul.nv a.nv-discreet { color:#5B9BD5; border-color:rgba(91,155,213,.28); background:rgba(91,155,213,.07); }
ul.nv a.nv-longevity:hover, ul.nv a.nv-longevity.nv-active { background:rgba(192,132,252,.18); border-color:rgba(192,132,252,.5); }
ul.nv a.nv-sharp:hover, ul.nv a.nv-sharp.nv-active { background:rgba(46,196,180,.18); border-color:rgba(46,196,180,.5); }
ul.nv a.nv-move:hover, ul.nv a.nv-move.nv-active { background:rgba(123,196,127,.18); border-color:rgba(123,196,127,.5); }
ul.nv a.nv-discreet:hover, ul.nv a.nv-discreet.nv-active { background:rgba(91,155,213,.18); border-color:rgba(91,155,213,.5); }
ul.nv a.nv-account { color:rgba(236,240,245,.45); font-size:11px; }
ul.nv a.nv-account:hover { color:var(--tx); }

/* Hamburger */
.nav-mob-btn { display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-mob-btn span { display:block; width:22px; height:1.5px; background:var(--tx); border-radius:2px; transition:all .25s; }

/* Mobiel menu overlay */
.nav-mob-menu {
  display:none; position:fixed; inset:0; background:var(--bg); z-index:300;
  flex-direction:column; padding:80px 28px 40px; gap:4px;
  overflow-y:auto;
}
.nav-mob-menu.open { display:flex; }
.nav-mob-menu a { font-size:1.4rem; font-family:var(--fd); font-weight:300; color:var(--tx); padding:14px 0; border-bottom:1px solid var(--bo); text-decoration:none; }
.nav-mob-menu a:hover { color:var(--ac); }
.mob-pill { display:inline-block; padding:8px 16px; border-radius:20px; font-size:13px; font-weight:500; text-decoration:none; margin-bottom:4px; border:1px solid transparent; }
.mob-longevity { color:#C084FC; border-color:rgba(192,132,252,.35); background:rgba(192,132,252,.08); }
.mob-sharp { color:#2EC4B4; border-color:rgba(46,196,180,.35); background:rgba(46,196,180,.08); }
.mob-move  { color:#7BC47F; border-color:rgba(123,196,127,.35); background:rgba(123,196,127,.08); }
.mob-discreet { color:#5B9BD5; border-color:rgba(91,155,213,.35); background:rgba(91,155,213,.08); }

/* Nav homepage transparant */
.template-index #CNav { background:transparent !important; border-bottom-color:transparent !important; }
.template-index #CNav.sc { background:rgba(7,9,13,.92) !important; border-bottom-color:var(--bo) !important; }
/* Nav salespagina altijd donker */
.template-page #CNav { background:rgba(7,9,13,.96) !important; backdrop-filter:blur(14px); border-bottom:1px solid var(--bo) !important; height:60px; }
/* Longevity pagina — nav extra donker want afbeelding is licht bovenin */
.template-page .sp-html-hero-longevity { margin-top:60px; }
/* Hero op salespagina: zorg dat foto-inhoud onder de nav begint */
.template-page .sp-foto-hero { padding-top:0; }
.template-page .sp-foto-img { object-position:center 35%; }

@media(min-width:768px) {
  nav { padding:20px 48px; background:transparent; border-bottom-color:transparent; }
  nav.sc { background:rgba(7,9,13,.92); border-bottom-color:var(--bo); padding:14px 48px; }
  .nl img { height:36px; }
  ul.nv { display:flex; }
  .nav-mob-btn { display:none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-h { background:var(--ac); color:#07090D; border:none; padding:14px 28px; font-family:var(--fb); font-size:14px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:var(--r); transition:all .25s; display:inline-block; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.btn-h:active { transform:scale(.97); }
@media(min-width:768px) { .btn-h:hover { box-shadow:0 0 40px rgba(46,196,180,.28); transform:translateY(-2px); } }

.btn-h-sharp { background:var(--ac); color:#07090D; }
.btn-h-move { background:var(--ac-move); color:#fff; }
.btn-h-discreet { background:var(--ac-discreet); color:#fff; }
.btn-h-longevity { background:var(--ac-longevity); color:#07090D; }
.btn-h-sharp, .btn-h-move, .btn-h-discreet, .btn-h-longevity { border:none; padding:14px 28px; font-family:var(--fb); font-size:14px; font-weight:500; letter-spacing:.06em; cursor:pointer; border-radius:var(--r); transition:all .25s; display:inline-block; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.btn-ghost { background:transparent; border:1px solid var(--bo); color:var(--tm); padding:13px 22px; font-family:var(--fb); font-size:13px; letter-spacing:.04em; cursor:pointer; border-radius:var(--r); transition:all .2s; display:inline-block; text-decoration:none; }
.btn-ghost:hover { border-color:rgba(255,255,255,.2); color:var(--tx); }

/* ============================================================
   HERO HOMEPAGE — MOBILE FIRST
   ============================================================ */
.hero-v3 {
  position:relative; width:100%;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--bg);
}
.hero-v3-img-wrap { position:absolute; inset:0; z-index:0; }
.hero-v3-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hero-v3-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(7,9,13,.2) 0%, rgba(7,9,13,.55) 45%, rgba(7,9,13,.93) 100%);
}
/* Nieuwe hero v3 — totaalvisual met ingebakken cirkels onderin */
.hero-v3-overlay-new {
  background: linear-gradient(to bottom,
    rgba(7,9,13,.15) 0%,
    rgba(7,9,13,.05) 50%,
    rgba(7,9,13,.45) 85%,
    rgba(7,9,13,.72) 100%
  );
}
/* Hero content onderaan voor nieuwe visual */
.hero-v3 .hero-v3-content { position:relative; z-index:1; width:100%; padding:0 22px 52px; }

/* 4 werelden navigatie in hero */
.hero-worlds-nav { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0 4px; max-width:420px; }
.hwn { display:flex; flex-direction:column; padding:10px 14px; border-radius:var(--r); border:1px solid transparent; text-decoration:none; transition:background .2s, border-color .2s; -webkit-tap-highlight-color:transparent; }
.hwn-label { font-size:13px; font-weight:500; line-height:1.3; }
.hwn-sub { font-size:11px; opacity:.7; margin-top:2px; }
.hwn-longevity { background:rgba(192,132,252,.12); border-color:rgba(192,132,252,.35); color:#C084FC; }
.hwn-longevity:hover { background:rgba(192,132,252,.22); border-color:rgba(192,132,252,.6); }
.hwn-sharp { background:rgba(46,196,180,.1); border-color:rgba(46,196,180,.35); color:#2EC4B4; }
.hwn-sharp:hover { background:rgba(46,196,180,.2); border-color:rgba(46,196,180,.6); }
.hwn-move { background:rgba(90,158,34,.1); border-color:rgba(90,158,34,.35); color:#7BC47F; }
.hwn-move:hover { background:rgba(90,158,34,.2); border-color:rgba(90,158,34,.6); }
.hwn-discreet { background:rgba(74,143,212,.1); border-color:rgba(74,143,212,.35); color:#5B9BD5; }
.hwn-discreet:hover { background:rgba(74,143,212,.2); border-color:rgba(74,143,212,.6); }
@media(min-width:768px) {
  .hero-worlds-nav { grid-template-columns:repeat(4,1fr); max-width:600px; }
}
.hero-v3-kicker { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:500; letter-spacing:.2em; color:var(--ac); text-transform:uppercase; margin-bottom:14px; }
.hero-v3-dot { width:6px; height:6px; border-radius:50%; background:var(--ac); flex-shrink:0; animation:heroPulse 2s ease-in-out infinite; }
.hero-v3-h1 { font-family:var(--fd); font-size:clamp(2.8rem,12vw,5rem); font-weight:300; color:var(--tx); line-height:1.05; margin-bottom:14px; }
.hero-v3-h1 em { font-style:italic; color:var(--ac); }
.hero-v3-sub { font-size:15px; color:rgba(236,240,245,.72); line-height:1.7; margin-bottom:20px; }
.hero-v3-worlds-hint { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.hw-pill { font-size:10px; font-weight:500; letter-spacing:.06em; padding:4px 10px; border-radius:20px; border:1px solid transparent; }
.hw-sharp   { color:#2EC4B4; border-color:rgba(46,196,180,.4); background:rgba(46,196,180,.1); }
.hw-move    { color:#7BC47F; border-color:rgba(123,196,127,.4); background:rgba(123,196,127,.1); }
.hw-discreet { color:#5B9BD5; border-color:rgba(91,155,213,.4); background:rgba(91,155,213,.1); }
.hw-longevity { color:#C084FC; border-color:rgba(192,132,252,.4); background:rgba(192,132,252,.1); }
.hero-v3-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.hero-v3-link { display:flex; align-items:center; gap:6px; font-size:13px; color:rgba(236,240,245,.5); text-decoration:none; letter-spacing:.05em; transition:color .2s; }
.hero-v3-link:hover { color:var(--ac); }

@media(min-width:768px) {
  .hero-v3 { min-height:85vh; align-items:center; }
  .hero-v3-img { object-position:center top; }
  .hero-v3-overlay { background:linear-gradient(100deg, rgba(7,9,13,.05) 0%, rgba(7,9,13,.15) 40%, rgba(7,9,13,.72) 65%, rgba(7,9,13,.88) 100%); }
  .hero-v3-content { display:flex; justify-content:flex-end; padding:0 64px 80px; }
  .hero-v3-inner { max-width:480px; }
  .hero-v3-actions { flex-direction:row; align-items:center; }
}

/* ============================================================
   VIER WERELDEN — MOBILE FIRST
   ============================================================ */
.worlds { background:var(--bg); padding:0 18px 60px; }
.worlds-inner { max-width:1100px; margin:0 auto; }
.worlds-kicker { font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--tm); text-align:center; padding:40px 0 20px; }
/* Tabs — mobiel only */
.worlds-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding:0 18px 20px; }
.wtab { font-size:12px; font-weight:500; padding:6px 14px; border-radius:20px; border:0.5px solid var(--bo); background:transparent; color:var(--tm); cursor:pointer; transition:all .2s; -webkit-tap-highlight-color:transparent; }
.wtab.on { color:var(--color-bg,#07090D); }
.wtab-longevity.on { background:var(--ac-longevity); border-color:var(--ac-longevity); color:#07090D; }
.wtab-sharp.on    { background:var(--ac); border-color:var(--ac); color:#07090D; }
.wtab-move.on     { background:var(--ac-move); border-color:var(--ac-move); color:#fff; }
.wtab-discreet.on { background:var(--ac-discreet); border-color:var(--ac-discreet); color:#fff; }
.worlds-grid { display:flex; flex-direction:column; gap:1px; background:var(--bo); border-radius:var(--rl); overflow:hidden; }
.wb { background:var(--bg-s); padding:28px 22px; display:flex; flex-direction:column; text-decoration:none; border-left:3px solid transparent; transition:background .2s, border-color .2s; }
.wb-sharp:active, .wb-sharp:hover { border-left-color:var(--ac); background:var(--bg-c); }
.wb-move:active, .wb-move:hover { border-left-color:var(--ac-move); background:var(--bg-c); }
.wb-discreet:active, .wb-discreet:hover { border-left-color:var(--ac-discreet); background:var(--bg-c); }
.wb-longevity:active, .wb-longevity:hover { border-left-color:var(--ac-longevity); background:var(--bg-c); }
.wb-label { font-size:9px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; }
.wb-label-sharp { color:var(--ac); }
.wb-label-move  { color:var(--ac-move); }
.wb-label-discreet { color:var(--ac-discreet); }
.wb-label-longevity { color:var(--ac-longevity); }
.wb-name { font-family:var(--fd); font-size:1.5rem; font-weight:300; color:var(--tx); margin-bottom:10px; }
.wb-desc { font-size:13px; color:var(--tm); line-height:1.7; margin-bottom:16px; }
.wb-items { list-style:none; display:flex; flex-direction:column; gap:5px; margin-bottom:20px; }
.wb-items li { font-size:12px; color:var(--td); padding-left:14px; position:relative; }
.wb-items li::before { content:'—'; position:absolute; left:0; font-size:10px; }
.wb-sharp .wb-items li::before { color:var(--ac); }
.wb-move .wb-items li::before { color:var(--ac-move); }
.wb-discreet .wb-items li::before { color:var(--ac-discreet); }
.wb-longevity .wb-items li::before { color:var(--ac-longevity); }
.wb-cta { font-size:13px; font-weight:500; letter-spacing:.06em; margin-top:auto; }
.wb-cta-sharp { color:var(--ac); }
.wb-cta-move  { color:var(--ac-move); }
.wb-cta-discreet { color:var(--ac-discreet); }
.wb-cta-longevity { color:var(--ac-longevity); }

@media(min-width:800px) {
  .worlds { padding:0 24px 80px; }
  .worlds-tabs { display:none; }
  .worlds-grid { flex-direction:row; }
  .worlds-grid .wb { display:flex !important; }
  .wb { border-left:none; border-top:3px solid transparent; padding:40px 32px; }
  .wb-sharp:hover { border-top-color:var(--ac); border-left-color:transparent; }
  .wb-move:hover  { border-top-color:var(--ac-move); border-left-color:transparent; }
  .wb-discreet:hover { border-top-color:var(--ac-discreet); border-left-color:transparent; }
  .wb-longevity:hover { border-top-color:var(--ac-longevity); border-left-color:transparent; }
}
  .wb-longevity:hover { border-top-color:var(--ac-longevity); border-left-color:transparent; }
}

/* ============================================================
   SALESPAGINA FOTO HEROES — MOBILE FIRST
   ============================================================ */
.sp-foto-hero {
  position:relative; width:100%;
  min-height:60vw; max-height:85vh;
  display:flex; align-items:flex-end; overflow:hidden; background:var(--bg);
}
.sp-foto-wrap { position:absolute; inset:0; }
.sp-foto-img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
/* Nav guard: donkere balk over bovenste deel van de hero zodat logo altijd leesbaar is */
.sp-foto-hero::before {
  content:''; position:absolute; top:0; left:0; right:0; height:80px; z-index:1;
  background:linear-gradient(to bottom, rgba(7,9,13,.82) 0%, transparent 100%);
  pointer-events:none;
}
.sp-foto-overlay { position:absolute; inset:0; background: linear-gradient(to right, rgba(7,9,13,.75) 0%, rgba(7,9,13,.5) 20%, transparent 42%), linear-gradient(to bottom, rgba(7,9,13,.68) 0%, rgba(7,9,13,0) 28%, rgba(7,9,13,.78) 100%); }
.sp-foto-cta { position:relative; z-index:1; width:100%; padding:0 22px 32px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.sp-foto-sub { font-size:13px; color:rgba(236,240,245,.65); line-height:1.6; max-width:340px; }

@media(min-width:768px) {
  .sp-foto-hero { min-height:42vw; }
  .sp-foto-img { object-position:center 28%; }
  .sp-foto-cta { padding:0 48px 44px; flex-direction:row; align-items:center; gap:20px; }
  .sp-foto-hero::before { height:100px; }
}

/* ============================================================
   DISCREET GEREGELD HERO — MOBILE FIRST
   ============================================================ */
.dg-hero {
  position:relative; width:100%;
  min-height:70vw; max-height:90vh;
  display:flex; align-items:flex-end; overflow:hidden; background:var(--bg);
}
.dg-hero-img-wrap { position:absolute; inset:0; }
.dg-hero-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.dg-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(7,9,13,0) 40%, rgba(7,9,13,.82) 100%); }
.dg-hero-cta { position:relative; z-index:1; width:100%; padding:0 22px 36px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.dg-hero-sub { font-size:14px; color:rgba(236,240,245,.72); line-height:1.65; max-width:380px; }

@media(min-width:768px) {
  .dg-hero { min-height:45vw; }
  .dg-hero-cta { padding:0 48px 48px; flex-direction:row; align-items:center; gap:24px; }
}

/* ============================================================
   TRUST BAR — MOBILE FIRST
   ============================================================ */
.sp-trust-bar {
  background:var(--bg-c); border-top:1px solid var(--bo); border-bottom:1px solid var(--bo);
  padding:12px 18px; display:flex; flex-direction:column; gap:8px;
}
.sp-trust-bar span { font-size:12px; color:var(--tm); letter-spacing:.03em; display:flex; align-items:center; gap:6px; }
.sp-trust-bar span::before { content:'✓'; color:var(--ac); font-size:10px; flex-shrink:0; }

@media(min-width:640px) {
  .sp-trust-bar { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:20px; padding:14px 24px; }
}

/* ============================================================
   FUNNEL / OPTIES — MOBILE FIRST
   ============================================================ */
.funnel { background:var(--bg-s); padding:48px 18px 60px; border-top:1px solid var(--bo); border-bottom:1px solid var(--bo); }
.fi { max-width:580px; margin:0 auto; }
.fs { display:none; }
.fs.on { display:block; animation:fi .35s ease; }
.dots { display:flex; gap:8px; margin-bottom:36px; }
.dot { width:24px; height:2px; background:var(--bo); border-radius:2px; transition:background .3s; }
.dot.a { background:var(--ac); }
.dot.d { background:var(--ad); }
.ey { font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--ac); margin-bottom:10px; display:block; }
.ey-sharp { color:var(--ac); }
.ey-move { color:var(--ac-move); }
.ey-discreet { color:var(--ac-discreet); }
.ey-longevity { color:var(--ac-longevity); }
.sq { font-family:var(--fd); font-size:clamp(20px,5vw,28px); font-weight:300; color:var(--tx); margin-bottom:20px; line-height:1.2; }

.oc { display:flex; flex-direction:column; gap:9px; }
.op { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:16px 18px; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:12px; user-select:none; -webkit-tap-highlight-color:transparent; min-height:56px; }
.op:active { border-color:var(--ba); background:var(--bg-r); }
.op.s { border-color:var(--ac); background:var(--ag); }
.ol { font-size:15px; font-weight:400; color:var(--tx); display:block; }
.os { font-size:12px; color:var(--tm); display:block; margin-top:2px; }
.op.s .ol { color:#ECF0F5; }
.op.s .os { color:var(--ac); }
.ck { width:20px; height:20px; border:1px solid var(--bo); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:auto; transition:all .2s; }
.op.s .ck { background:var(--ac); border-color:var(--ac); }
.ck svg { display:none; }
.op.s .ck svg { display:block; }
.dr { font-size:12px; letter-spacing:2px; color:var(--ac); min-width:76px; flex-shrink:0; }

/* Gender grid */
.gc { display:flex; flex-direction:column; gap:11px; }
.gop { padding:20px 18px; }
.gender-icon { font-size:28px; min-width:44px; text-align:center; flex-shrink:0; }

@media(min-width:480px) {
  .gc { flex-direction:row; }
  .gc .gop { flex:1; }
}
@media(min-width:768px) {
  .funnel { padding:72px 24px 80px; }
}

/* ── Size grid ── */
.sg { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.sc2 { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:20px 14px; cursor:pointer; transition:all .2s; text-align:center; user-select:none; }
.sc2:active { border-color:var(--ba); }
.sc2.s { border-color:var(--ac); background:var(--ag); }
.sl { font-family:var(--fd); font-size:22px; font-weight:300; color:var(--tx); display:block; margin-bottom:3px; }
.ss { font-size:11px; color:var(--tm); }

/* ── Next btn ── */
.bn { margin-top:24px; background:transparent; border:1px solid var(--ba); color:var(--ac); padding:13px 26px; font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:.1em; cursor:pointer; border-radius:var(--r); transition:all .2s; opacity:.28; pointer-events:none; display:inline-block; }
.bn.on { opacity:1; pointer-events:all; }
.bn.on:active { background:var(--ag); }

/* Back btn */
.back-btn { background:none; border:none; color:var(--tm); font-family:var(--fb); font-size:13px; letter-spacing:.06em; cursor:pointer; padding:0 0 20px; display:flex; align-items:center; gap:6px; transition:color .2s; }
.back-btn:hover { color:var(--tx); }
.back-btn svg { width:13px; height:13px; }

/* ── Druppels ── */
.drops-wrap { display:flex; align-items:center; gap:8px; min-width:100px; flex-shrink:0; }
.drops { font-size:13px; letter-spacing:3px; color:var(--ac); }
.drops-empty { color:var(--bo); letter-spacing:3px; }
.drops-label { font-size:10px; color:var(--tm); letter-spacing:.04em; white-space:nowrap; }

/* ── Stap subtitle ── */
.sq-sub { font-size:13px; color:var(--tm); margin-top:-14px; margin-bottom:18px; line-height:1.6; }

/* ── One size note ── */
.one-size-note { font-size:13px; color:var(--tm); background:var(--bg-r); border:1px solid var(--bo); border-radius:var(--rl); padding:16px 18px; line-height:1.6; }

/* ============================================================
   RESULTAAT + KOOPKEUZE — MOBILE FIRST
   ============================================================ */
.res { display:none; border-top:1px solid var(--bo); }
.res.v { display:block; animation:fi .45s ease; }
.ri { max-width:580px; margin:0 auto; padding:48px 18px 32px; }
.rh { font-family:var(--fd); font-size:clamp(20px,5vw,32px); font-weight:300; color:var(--tx); margin-bottom:6px; line-height:1.15; }
.rm { font-size:12px; color:var(--tm); margin-bottom:24px; }

.pc { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:22px; display:flex; flex-direction:column; gap:14px; }
.pi { flex:1; min-width:0; }
.pb { font-size:9px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ac); border:1px solid var(--ba); padding:3px 8px; border-radius:2px; display:inline-block; margin-bottom:10px; }
.pn { font-family:var(--fd); font-size:20px; font-weight:300; color:var(--tx); margin-bottom:6px; }
.pd { font-size:13px; color:var(--tm); line-height:1.7; }
.ps { display:none; }

@media(min-width:480px) {
  .pc { flex-direction:row; align-items:center; }
  .ps { width:70px; height:90px; flex-shrink:0; background:linear-gradient(150deg,#1C2B3F,#0D1A2B); border-radius:var(--rl); border:1px solid rgba(46,196,180,.14); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .ps span:first-child { font-size:17px; color:var(--ac); }
  .ps span:last-child { font-size:8px; letter-spacing:.12em; color:var(--td); text-transform:uppercase; }
}
@media(min-width:768px) { .ri { padding:64px 24px 36px; } }

/* ── Aankoopopties ── */
.pw { background:var(--bg-s); border-top:1px solid var(--bo); padding:36px 18px 60px; }
.pin { max-width:580px; margin:0 auto; }
.pg { display:flex; flex-direction:column; gap:11px; margin-bottom:24px; }
.pca { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:20px 18px; cursor:pointer; transition:all .2s; position:relative; user-select:none; -webkit-tap-highlight-color:transparent; }
.pca.pr { border-color:var(--ac); background:linear-gradient(160deg,#0D1822,#0A1420); }
.pca:active { border-color:var(--ba); }
.pbg { position:absolute; top:-9px; left:16px; background:var(--ac); color:#07090D; font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.plb { font-size:11px; font-weight:500; letter-spacing:.07em; color:var(--tm); margin-bottom:7px; display:block; }
.pp { font-family:var(--fd); font-size:26px; font-weight:300; color:var(--tx); line-height:1; margin-bottom:2px; }
.pp span { font-family:var(--fb); font-size:11px; color:var(--tm); font-weight:300; }
.pbl { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.pbl li { font-size:12px; color:var(--tm); padding-left:14px; position:relative; line-height:1.5; }
.pbl li::before { content:'✓'; position:absolute; left:0; color:var(--ac); font-size:10px; top:1px; }

@media(min-width:480px) { .pg { display:grid; grid-template-columns:1fr 1fr; } }
@media(min-width:768px) { .pw { padding:40px 24px 72px; } }

.bc { width:100%; background:var(--ac); color:#07090D; border:none; padding:16px 28px; font-family:var(--fb); font-size:14px; font-weight:500; letter-spacing:.07em; cursor:pointer; border-radius:var(--r); transition:all .25s; display:block; margin-bottom:11px; -webkit-tap-highlight-color:transparent; }
.bc:active { transform:scale(.98); }
.cs { text-align:center; font-size:11px; color:var(--td); letter-spacing:.04em; }

/* ============================================================
   UPSELL — MOBILE FIRST
   ============================================================ */
.up { padding:44px 18px; border-top:1px solid var(--bo); display:none; }
.ui { max-width:580px; margin:0 auto; }
.ue { font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--td); margin-bottom:18px; display:block; }
.ug { display:flex; flex-direction:column; gap:9px; }
.uc { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:16px; transition:border-color .2s; display:flex; align-items:flex-start; gap:12px; }
.uc:active { border-color:var(--ba); }
.ui2 { width:36px; height:36px; background:var(--ag); border:1px solid var(--ba); border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.ut { font-size:13px; font-weight:400; color:var(--tx); margin-bottom:3px; line-height:1.4; }
.upr { font-size:12px; color:var(--ac); }
.ua { background:none; border:1px solid var(--bo); color:var(--tm); font-family:var(--fb); font-size:11px; letter-spacing:.1em; padding:5px 10px; border-radius:var(--r); cursor:pointer; margin-top:8px; transition:all .2s; display:block; }
.ua:active { border-color:var(--ba); color:var(--ac); }

@media(min-width:480px) { .ug { display:grid; grid-template-columns:1fr 1fr; } }
@media(min-width:768px) { .up { padding:52px 24px; } }

/* ============================================================
   TRUST SECTIE — MOBILE FIRST
   ============================================================ */
.tr { padding:48px 18px; border-top:1px solid var(--bo); }
.ti { max-width:580px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.tit { display:flex; align-items:center; gap:14px; }
.tic { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.tt { font-size:13px; color:var(--tm); line-height:1.6; font-weight:300; }

@media(min-width:480px) {
  .ti { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .tit { flex-direction:column; align-items:center; text-align:center; }
}
@media(min-width:768px) { .tr { padding:60px 24px; } }

/* ============================================================
   ABONNEMENT INFO — MOBILE FIRST
   ============================================================ */
.sub-info { display:flex; flex-direction:column; gap:12px; background:var(--bg-r); border:1px solid var(--ba); border-radius:var(--rl); padding:18px; margin-bottom:22px; }
.sub-info-icon { font-size:22px; flex-shrink:0; }
.sub-info strong { font-size:13px; font-weight:500; color:var(--tx); display:block; margin-bottom:4px; }
.sub-info p { font-size:12px; color:var(--tm); line-height:1.6; margin:0; }
@media(min-width:480px) { .sub-info { flex-direction:row; align-items:flex-start; } }

.sub-steps { margin-top:28px; display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:1px solid var(--bo); }
.sub-step { display:flex; gap:14px; align-items:flex-start; }
.sub-step-num { width:26px; height:26px; border-radius:50%; background:var(--ag); border:1px solid var(--ba); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--ac); flex-shrink:0; margin-top:2px; }
.sub-step-txt strong { font-size:13px; font-weight:500; color:var(--tx); display:block; margin-bottom:2px; }
.sub-step-txt span { font-size:12px; color:var(--tm); line-height:1.55; }

.sub-tag { margin-top:14px; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ac); opacity:.8; }

/* ============================================================
   GARANTIE + FLEX PROMISE — MOBILE FIRST
   ============================================================ */
.garantie-bar { display:flex; flex-direction:column; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--bo); }
.garantie-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tm); }
.garantie-item svg { color:var(--ac); flex-shrink:0; }
@media(min-width:480px) { .garantie-bar { flex-direction:row; flex-wrap:wrap; gap:16px; } }

.flex-badge { display:inline-flex; align-items:center; gap:6px; background:var(--ag); border:1px solid var(--ba); border-radius:20px; padding:5px 12px; font-size:11px; color:var(--ac); letter-spacing:.04em; margin-bottom:18px; }
.flex-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--ac); animation:pulse 2s infinite; }
.flex-promise { margin-top:28px; padding-top:24px; border-top:1px solid var(--bo); }
.flex-title { font-size:13px; font-weight:500; color:var(--tx); margin-bottom:18px; }
.flex-grid { display:flex; flex-direction:column; gap:14px; }
.flex-item { display:flex; gap:14px; align-items:flex-start; }
.flex-num { width:26px; height:26px; border-radius:50%; background:var(--ag); border:1px solid var(--ba); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:var(--ac); flex-shrink:0; margin-top:1px; }
.flex-txt strong { font-size:13px; font-weight:500; color:var(--tx); display:block; margin-bottom:2px; }
.flex-txt span { font-size:12px; color:var(--tm); line-height:1.55; }

/* ============================================================
   LOYALITEIT / BUNDEL BADGES
   ============================================================ */
.loyaliteit-bar { display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding:14px 16px; background:linear-gradient(135deg,rgba(46,196,180,.08),rgba(46,196,180,.04)); border:1px solid var(--ba); border-radius:var(--rl); font-size:12px; color:var(--ac); line-height:1.6; }
.loyaliteit-bar svg { flex-shrink:0; margin-top:2px; }
.bundel-badge { display:flex; align-items:flex-start; gap:8px; background:var(--ag); border:1px solid var(--ba); border-radius:var(--r); padding:10px 14px; font-size:12px; color:var(--ac); margin:14px 0; }
.bundel-badge.bundle-icon { font-size:16px; min-width:40px; text-align:center; letter-spacing:-1px; }

/* ============================================================
   MAAT SELECTOR — MOBILE FIRST
   ============================================================ */
.maat-wrap { margin:18px 0; }
.maat-label { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--td); margin-bottom:10px; }
.maat-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.maat-opt { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:16px 12px; cursor:pointer; text-align:center; transition:all .2s; -webkit-tap-highlight-color:transparent; }
.maat-opt:active { border-color:var(--ba); }
.maat-opt.s { border-color:var(--ac); background:var(--ag); }
.maat-opt .sl { font-family:var(--fd); font-size:20px; font-weight:300; color:var(--tx); display:block; margin-bottom:3px; }
.maat-opt .ss { font-size:11px; color:var(--tm); }

/* ============================================================
   QUIZ SECTIE SALESPAGINA — MOBILE FIRST
   ============================================================ */
.sp-quiz-section { background:var(--bg-s); padding:28px 18px; border-top:1px solid var(--bo); border-bottom:1px solid var(--bo); }
@media(min-width:768px) { .sp-quiz-section { padding:48px 24px; } }

/* ============================================================
   PRODUCTKAARTEN — MOBILE FIRST
   ============================================================ */
.sp-products-section { background:var(--bg); padding:48px 18px; }
.sp-cards { display:flex; flex-direction:column; gap:12px; }
.sp-card { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:22px; }
.sp-card:active { border-color:rgba(46,196,180,.25); }
.sp-card-name { font-family:var(--fd); font-size:1.2rem; font-weight:300; color:var(--tx); margin-bottom:8px; line-height:1.25; }
.sp-card-desc { font-size:12px; color:var(--tm); line-height:1.65; margin-bottom:14px; }
.sp-card-prices { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.sp-price-main { font-family:var(--fd); font-size:1.3rem; font-weight:300; color:var(--ac); }
.sp-price-main span { font-family:var(--fb); font-size:11px; color:var(--tm); font-weight:300; }
.sp-price-badge { font-size:9px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; background:var(--ag); color:var(--ac); border:1px solid var(--ba); padding:2px 7px; border-radius:2px; }

@media(min-width:600px) { .sp-cards { display:grid; grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px) { .sp-cards { grid-template-columns:repeat(3,1fr); } }
@media(min-width:768px) { .sp-products-section { padding:72px 24px; } }

/* ── Cross-sell upsell ── */
.sp-upsell-move { background:var(--bg-s); border-top:1px solid var(--bo); border-bottom:1px solid var(--bo); padding:22px 18px; }
.sp-upsell-inner { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.sp-upsell-title { font-size:15px; font-weight:500; color:var(--tx); margin-bottom:4px; }
.sp-upsell-desc { font-size:13px; color:var(--tm); line-height:1.6; }
@media(min-width:640px) { .sp-upsell-inner { flex-direction:row; align-items:center; } }

/* ============================================================
   WAAROM SECTIE — MOBILE FIRST
   ============================================================ */
.waarom { background:var(--bg-s); padding:56px 18px; border-top:1px solid var(--bo); border-bottom:1px solid var(--bo); }
.waarom-inner { max-width:960px; margin:0 auto; }
.waarom-header { max-width:600px; margin-bottom:40px; }
.waarom-title { font-family:var(--fd); font-size:clamp(1.5rem,4vw,2.4rem); font-weight:300; color:var(--tx); line-height:1.2; margin:10px 0 14px; }
.waarom-intro { font-size:14px; color:var(--tm); line-height:1.75; }
.waarom-grid { display:flex; flex-direction:column; gap:1px; background:var(--bo); border-radius:var(--rl); overflow:hidden; }
.waarom-item { background:var(--bg-c); padding:24px 20px; display:flex; gap:16px; align-items:flex-start; }
.waarom-item:active { background:var(--bg-r); }
.waarom-num { font-family:var(--fd); font-size:1.8rem; font-weight:300; color:rgba(46,196,180,.25); line-height:1; flex-shrink:0; min-width:40px; }
.waarom-item-title { font-size:14px; font-weight:500; color:var(--tx); margin-bottom:6px; }
.waarom-item-desc { font-size:13px; color:var(--tm); line-height:1.7; margin:0; }

@media(min-width:640px) { .waarom-grid { display:grid; grid-template-columns:1fr 1fr; } }
@media(min-width:768px) { .waarom { padding:80px 24px; } }

/* ============================================================
   UGC — MOBILE FIRST
   ============================================================ */
.ugc { padding:48px 18px 32px; border-top:1px solid var(--bo); }
.ugc-inner { max-width:580px; margin:0 auto; }
.ugc-label { font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--td); margin-bottom:6px; display:block; }
.ugc-sub { font-size:13px; color:var(--tm); margin-bottom:24px; }
.ugc-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.ugc-card { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:16px 18px; }
.ugc-platform { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--td); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.ugc-text { font-size:13px; color:var(--tx); line-height:1.7; font-style:italic; margin-bottom:8px; }
.ugc-author { font-size:11px; color:var(--ac); }
.ugc-cta-box { background:var(--bg-r); border:1px solid var(--bo); border-radius:var(--rl); padding:18px 16px; }
.ugc-code { font-family:var(--fb); font-size:16px; font-weight:500; letter-spacing:.18em; color:var(--ac); text-align:center; background:var(--bg-c); border:1px dashed var(--ba); border-radius:var(--r); padding:12px; margin:10px 0; cursor:pointer; }
.ugc-cta-small { font-size:11px; color:var(--td); text-align:center; margin:0; }
@media(min-width:768px) { .ugc { padding:64px 24px 32px; } }

/* ============================================================
   REVIEWS — MOBILE FIRST
   ============================================================ */
.reviews { padding:40px 18px; border-top:1px solid var(--bo); }
.rev-inner { max-width:580px; margin:0 auto; }
.rev-label { font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--td); margin-bottom:20px; display:block; }
.rev-grid { display:flex; flex-direction:column; gap:12px; }
.rev-card { background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--rl); padding:18px 20px; }
.rev-stars { color:var(--ac); font-size:12px; letter-spacing:2px; margin-bottom:8px; }
.rev-text { font-size:13px; color:var(--tx); line-height:1.7; margin-bottom:10px; font-style:italic; }
.rev-author { font-size:11px; color:var(--td); letter-spacing:.04em; }
.rev-tag { font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:2px 8px; border-radius:2px; display:inline-block; margin-bottom:10px; }
.rev-tag-discreet { background:rgba(24,95,165,.15); color:var(--ac-discreet); border:1px solid rgba(24,95,165,.25); }
.rev-tag-sharp { background:var(--ag); color:var(--ac); border:1px solid var(--ba); }
.rev-tag-move { background:var(--ac-move-bg); color:var(--ac-move); border:1px solid var(--ac-move-border); }
.rev-tag-longevity { background:var(--ac-longevity-bg); color:var(--ac-longevity); border:1px solid var(--ac-longevity-border); }
@media(min-width:768px) { .reviews { padding:64px 24px; } }

/* ============================================================
   DIRECT BESTELLEN BLOK — MOBILE FIRST
   ============================================================ */
.direct-order { border-top:1px solid var(--bo); padding:44px 18px; background:var(--bg); }
.direct-order-inner { max-width:560px; margin:0 auto; text-align:center; }
.direct-order-label { font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--td); margin-bottom:10px; display:block; }
.direct-order-title { font-family:var(--fd); font-size:1.5rem; font-weight:300; color:var(--tx); margin-bottom:8px; }
.direct-order-sub { font-size:13px; color:var(--tm); margin-bottom:18px; line-height:1.6; }
.direct-order-input { display:flex; flex-direction:column; gap:8px; max-width:400px; margin:0 auto; }
.direct-order-input input { width:100%; background:var(--bg-c); border:1px solid var(--bo); border-radius:var(--r); padding:14px 16px; font-family:var(--fb); font-size:15px; color:var(--tx); outline:none; transition:border-color .2s; }
.direct-order-input input:focus { border-color:var(--ba); }
.direct-order-input input::placeholder { color:var(--td); }
.direct-order-input button { width:100%; background:var(--bg-c); border:1px solid var(--ba); color:var(--ac); font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:.07em; padding:13px 18px; border-radius:var(--r); cursor:pointer; transition:all .2s; }
.direct-order-input button:active { background:var(--ag); }
@media(min-width:480px) { .direct-order-input { flex-direction:row; } .direct-order-input button { width:auto; } }
@media(min-width:768px) { .direct-order { padding:48px 24px; } }

/* ============================================================
   STICKY CTA MOBIEL
   ============================================================ */
.sticky-cta { display:none; }
@media(max-width:640px) {
  .sticky-cta { position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(7,9,13,.96); backdrop-filter:blur(12px); border-top:1px solid var(--bo); padding:12px 18px; display:none; }
  .sticky-cta.show { display:block; }
  .sticky-cta .bc { margin:0; padding:14px 24px; font-size:14px; }
}

/* ============================================================
   FOOTER — MOBILE FIRST
   ============================================================ */
footer { border-top:1px solid var(--bo); padding:28px 18px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.fl img { height:28px; opacity:.7; }
ul.fli { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; list-style:none; }
ul.fli a { font-size:11px; color:var(--td); text-decoration:none; letter-spacing:.04em; transition:color .2s; }
ul.fli a:hover { color:var(--tm); }

@media(min-width:768px) {
  footer { flex-direction:row; justify-content:space-between; padding:32px 48px; text-align:left; }
  ul.fli { flex-wrap:nowrap; }
}

/* ============================================================
   COOKIE BANNER — MOBILE FIRST
   ============================================================ */
.cookie-bar { position:fixed; bottom:0; left:0; right:0; z-index:500; background:rgba(12,16,24,.97); backdrop-filter:blur(16px); border-top:1px solid var(--bo); padding:16px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:12px; color:var(--tm); }
.cookie-bar.hidden { display:none; }
.cookie-bar p { margin:0; line-height:1.5; }
.cookie-bar a { color:var(--ac); text-decoration:none; }
.cookie-btn { background:var(--ac); color:#07090D; border:none; padding:10px 22px; border-radius:var(--r); font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:.07em; cursor:pointer; white-space:nowrap; align-self:stretch; text-align:center; }
@media(min-width:640px) { .cookie-bar { flex-direction:row; align-items:center; justify-content:space-between; padding:14px 24px; } .cookie-bar p { max-width:600px; } .cookie-btn { align-self:auto; } }

/* ============================================================
   EXIT INTENT — MOBILE FIRST
   ============================================================ */
.exit-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:999; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; padding:0; }
.exit-overlay.show { opacity:1; pointer-events:all; }
.exit-modal { background:var(--bg-s); border:1px solid var(--bo); border-radius:var(--rl) var(--rl) 0 0; padding:28px 22px 36px; width:100%; position:relative; }
.exit-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--td); font-size:18px; cursor:pointer; line-height:1; padding:4px; }
.exit-ey { font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ac); margin-bottom:10px; display:block; }
.exit-title { font-family:var(--fd); font-size:1.5rem; font-weight:300; color:var(--tx); margin-bottom:10px; }
.exit-txt { font-size:13px; color:var(--tm); line-height:1.7; margin-bottom:22px; }
.exit-btn { width:100%; background:var(--ac); color:#07090D; border:none; padding:15px; font-family:var(--fb); font-size:14px; font-weight:500; letter-spacing:.07em; cursor:pointer; border-radius:var(--r); margin-bottom:12px; display:block; }
.exit-skip { text-align:center; font-size:12px; color:var(--td); cursor:pointer; padding:4px; }

@media(min-width:480px) { .exit-overlay { align-items:center; padding:24px; } .exit-modal { border-radius:var(--rl); max-width:420px; } }


/* ============================================================
   SP-HTML-HERO — tekst in HTML (niet ingebakken in foto)
   Mobile first — logo overlapt NOOIT meer de tekst
   ============================================================ */
.sp-html-hero {
  position:relative;
  width:100%;
  min-height:50svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--bg);
}
/* Desktop: hero iets groter */
@media(min-width:768px) {
  .sp-html-hero { min-height:65vh; }
}
.sp-html-bg {
  position:absolute;
  inset:0;
  z-index:0;
}
.sp-html-img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}
/* Overlay: links donker voor tekst, rechts licht voor foto */
.sp-html-overlay {
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(7,9,13,.88) 0%, rgba(7,9,13,.65) 45%, rgba(7,9,13,.2) 100%),
    linear-gradient(to bottom, rgba(7,9,13,.3) 0%, transparent 30%);
}
.sp-html-overlay-move {
  background:
    linear-gradient(to right, rgba(7,9,13,.88) 0%, rgba(7,9,13,.6) 45%, rgba(7,9,13,.15) 100%),
    linear-gradient(to bottom, rgba(7,9,13,.3) 0%, transparent 30%);
}
/* Longevity: lichte foto — donkere overlay links zodat tekst leesbaar is, net als Sharp/Move */
.sp-html-hero-longevity .sp-html-overlay {
  background:
    linear-gradient(to right, rgba(7,9,13,.92) 0%, rgba(7,9,13,.7) 45%, rgba(7,9,13,.2) 100%),
    linear-gradient(to bottom, rgba(7,9,13,.3) 0%, transparent 30%);
}
.sp-html-hero-longevity .sp-html-img {
  object-position:70% center;
}
/* Discreet: zelfde overlay als Sharp/Move */
.sp-html-hero-discreet .sp-html-overlay {
  background:
    linear-gradient(to right, rgba(7,9,13,.90) 0%, rgba(7,9,13,.65) 45%, rgba(7,9,13,.15) 100%),
    linear-gradient(to bottom, rgba(7,9,13,.3) 0%, transparent 30%);
}
.sp-html-hero-discreet .sp-html-img {
  object-position:right center;
}
.sp-html-content {
  position:relative;
  z-index:1;
  padding:100px 22px 52px;
  max-width:580px;
}
.sp-html-eyebrow {
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  display:block;
  margin-bottom:16px;
}
.sp-html-h1 {
  font-family:var(--fd);
  font-size:clamp(2.4rem, 9vw, 5rem);
  font-weight:300;
  color:var(--tx);
  line-height:1.05;
  margin-bottom:14px;
}
.sp-html-h1 em { font-style:italic; color:var(--ac); }
.em-move { color:var(--ac-move) !important; }
.sp-html-sub {
  font-size:15px;
  color:rgba(236,240,245,.7);
  line-height:1.65;
  margin-bottom:28px;
  font-style:italic;
}
.sp-html-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.sp-html-hint {
  font-size:13px;
  color:rgba(236,240,245,.5);
  line-height:1.5;
}

@media(min-width:768px) {
  .sp-html-content { padding:120px 64px 80px; }
  .sp-html-h1 { font-size:clamp(3rem, 5vw, 5rem); }
  .sp-html-actions { flex-direction:row; align-items:center; }
  .sp-html-img { object-position:60% 20%; }
}