/* ============================================================
   wes.digital — homepage styles
   ============================================================ */
:root{
  --bg-0:#0B0B0F; --bg-1:#0E1014; --bg-2:#14161B; --bg-3:#1B1E26;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text-0:#F5F4F2; --text-1:#A6A8AE; --text-2:#6B6E77;
  --pink:#E5006D; --orange:#FF6A1A;
  --grad:linear-gradient(100deg,#E5006D 0%,#FF6A1A 100%);
  --display:"Space Grotesk",sans-serif;
  --body:"Manrope",sans-serif;
  --mono:"JetBrains Mono",monospace;
  --maxw:1200px;
  --pad:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg-0); color:var(--text-0); font-family:var(--body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:rgba(229,0,109,.32);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-2);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line-2)}
.eyebrow.center{justify-content:center}

/* faint global grid atmosphere */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 45% at 85% -8%, rgba(229,0,109,.10), transparent 60%),
    radial-gradient(45% 38% at 4% 2%, rgba(255,106,26,.05), transparent 60%);
}

/* ---------- buttons ---------- */
.btn{font-family:var(--body);font-weight:600;font-size:15px;border:none;cursor:pointer;border-radius:11px;
  padding:15px 26px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .2s ease,color .2s ease;white-space:nowrap}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-primary{background:var(--grad);color:#0B0B0F}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px -12px rgba(229,0,109,.6)}
.btn-secondary{background:transparent;color:var(--text-0);border:1px solid var(--line-2)}
.btn-secondary:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04)}
.btn-soft{background:var(--bg-3);color:var(--text-0);border:1px solid var(--line)}
.btn-soft:hover{background:#22262f}
.btn-ghost{background:transparent;color:var(--text-1);padding:14px 4px}
.btn-ghost:hover{color:var(--text-0)}
.btn-ghost .arrow{display:inline-flex;transition:transform .2s ease}
.btn-ghost:hover .arrow{transform:translateX(4px)}
.btn-lg{padding:18px 32px;font-size:16px}

/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:20px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
header.nav.scrolled{background:rgba(11,11,15,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:30px;width:auto}
.brand .wordmark{font-family:var(--body);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--text-0)}
.brand .wordmark .d{color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:14.5px;color:var(--text-1);transition:color .2s ease;position:relative}
.nav-links a:hover{color:var(--text-0)}
.nav-actions{display:flex;align-items:center;gap:18px}
.nav-actions .soft{font-size:14.5px;color:var(--text-1)}
.nav-actions .soft:hover{color:var(--text-0)}
.nav-toggle{display:none}

/* ---------- section frame ---------- */
section{position:relative;z-index:1}
.section{padding:120px 0;border-top:1px solid var(--line)}
.sec-head{margin-bottom:60px;max-width:760px}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,46px);letter-spacing:-.025em;line-height:1.06;margin:20px 0 18px}
.sec-head p{color:var(--text-1);font-size:18px;text-wrap:pretty;max-width:62ch}
.sec-num{font-family:var(--mono);font-size:13px;color:var(--text-2)}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:140px 0 90px;position:relative;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg-0)}
/* verankerd op hoogte + links (zelfde patroon als .about-bg/.cta-bg):
   breder scherm = meer zwart rechts, video schaalt en cropt NIET mee */
.hero-video,.hero-still{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;aspect-ratio:16/9;object-fit:cover;object-position:left 20%}
.hero-still{display:none}
/* soft edge fade so the pure-black video melts seamlessly into the page */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,11,15,0) 40%,rgba(11,11,15,.55) 60%,rgba(11,11,15,.62) 100%),
    linear-gradient(90deg,var(--bg-0) 0,rgba(11,11,15,0) 17%,rgba(11,11,15,0) 66%,var(--bg-0) 100%),
    linear-gradient(180deg,var(--bg-0) 0,rgba(11,11,15,0) 16%,rgba(11,11,15,0) 82%,var(--bg-0) 100%)}
/* sparse blueprint coordinate near the frame edge */
.hero-annot{position:absolute;left:var(--pad);bottom:34px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:10px}
.hero-annot::before{content:"";width:24px;height:1px;background:var(--line-2)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-copy{margin-left:auto;width:48%;max-width:540px}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.4vw,60px);line-height:1.04;letter-spacing:-.03em;margin:24px 0 24px;text-wrap:balance}
.hero h1 .accent{position:relative}
.hero .sub{font-size:19px;color:var(--text-1);max-width:46ch;text-wrap:pretty;line-height:1.55}
.hero .cta-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:34px}
.hero .trust{display:flex;flex-direction:column;gap:14px;margin-top:44px}
.hero .trust .t{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-1)}
.hero .trust .t svg{width:18px;height:18px;color:var(--orange)}

/* hero responsive: stack a full-bleed portrait on top, copy below */
@media(max-width:820px){
  .hero{flex-direction:column;min-height:auto;padding:78px 0 48px;gap:16px}
  /* compacter beeld: gezicht + headline + CTA samen in het eerste scherm */
  .hero-media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;max-height:42vh;border:none;border-radius:0}
  .hero-video,.hero-still{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  /* poster en video delen exact dezelfde vierkante uitsnede + positie — geen sprong bij de fade */
  .hero-video{opacity:0;transition:opacity 1s ease;object-position:center 25%}
  .hero-video.playing{opacity:1}
  .hero-still{display:block;object-position:center 25%}
  /* ook bovenrand laten smelten: foto is puur zwart (#000), pagina is #0B0B0F */
  .hero-media::after{background:linear-gradient(180deg,var(--bg-0) 0,rgba(11,11,15,0) 16%,rgba(11,11,15,0) 56%,var(--bg-0) 100%)}
  .hero-annot{display:none}
  .hero .wrap{order:2}
  .hero-copy{width:100%;max-width:none;margin:0}
  .hero h1{font-size:clamp(26px,7.2vw,34px);margin:12px 0 14px}
  .hero .sub{font-size:16px;max-width:none}
  .hero .cta-col{align-items:stretch;margin-top:20px}
  .hero .cta-col .btn{justify-content:center}
  .hero .cta-col .btn-ghost{padding-left:0;padding-right:0}
  .hero .trust{margin-top:26px}
  /* lange ghost-CTA's mogen wrappen: nowrap duwde de pagina breder dan de viewport */
  .btn-ghost{white-space:normal;text-align:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-still{display:block}
}

/* ---------- offer layers (section 2) ---------- */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.layer-card{border:1px solid var(--line);border-radius:18px;background:var(--bg-2);padding:34px 30px 30px;display:flex;flex-direction:column;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;position:relative;overflow:hidden}
.layer-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.layer-card .lc-num{font-family:var(--mono);font-size:12px;color:var(--text-2);letter-spacing:.16em}
.layer-card h3{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.02em;margin:18px 0 6px}
.layer-card .price{font-family:var(--mono);font-size:14px;color:var(--orange);margin-bottom:18px}
.layer-card .lc-desc{color:var(--text-1);font-size:15.5px;line-height:1.55;margin-bottom:22px;text-wrap:pretty}
.layer-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.layer-card li{display:flex;gap:11px;font-size:14.5px;color:var(--text-1);line-height:1.45}
.layer-card li svg{width:17px;height:17px;color:var(--orange);flex-shrink:0;margin-top:2px}
.layer-card .lc-cta{margin-top:auto}
.layer-card.featured{border-color:transparent;background:
  linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
  var(--grad) border-box;border:1px solid transparent}
.scarce-badge{position:absolute;top:0;right:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#0B0B0F;background:var(--grad);padding:7px 14px;border-bottom-left-radius:12px;font-weight:600}

/* ---------- proof (section 3) ---------- */
.proof-block{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;padding:50px 0;border-top:1px solid var(--line)}
.proof-block:first-of-type{border-top:none}
.proof-block.flip .proof-visual{order:-1}
.proof-tag{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:18px}
.proof-block h3{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;margin-bottom:26px;line-height:1.1}
.proof-steps{display:flex;flex-direction:column;gap:20px}
.proof-step{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start}
.proof-step .ps-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);padding-top:3px}
.proof-step .ps-v{font-size:15.5px;color:var(--text-1);line-height:1.5}
.proof-step .ps-v b{color:var(--text-0);font-weight:600}
.proof-metric{margin-top:30px;display:flex;gap:36px;flex-wrap:wrap}
.proof-metric .m .num{font-family:var(--display);font-weight:600;font-size:38px;letter-spacing:-.02em;line-height:1}
.proof-metric .m .lbl{font-size:13px;color:var(--text-2);margin-top:8px}
.proof-visual{border:1px solid var(--line);border-radius:16px;aspect-ratio:16/11;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 16px,transparent 16px 32px),var(--bg-2);
  display:flex;align-items:center;justify-content:center;position:relative}
.proof-visual .ph{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  border:1px dashed var(--line-2);padding:8px 14px;border-radius:6px}
.proof-visual img{width:100%;height:100%;object-fit:cover}

/* ---------- calculator (section 4) ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg-2)}
.calc-inputs{padding:48px 44px}
.calc-output{padding:48px 44px;background:var(--bg-1);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.field{margin-bottom:36px}
.field:last-child{margin-bottom:0}
.field .f-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.field label{font-size:15px;color:var(--text-0);font-weight:500}
.field .f-val{font-family:var(--mono);font-size:18px;color:var(--text-0)}
.field .f-val .u{color:var(--text-2);font-size:13px;margin-left:3px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--line-2);border-radius:3px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--orange);border:3px solid var(--bg-2);box-shadow:0 0 0 1px var(--line-2),0 0 14px -2px rgba(255,106,26,.6);cursor:pointer;transition:transform .15s ease}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#FF6A1A;border:3px solid var(--bg-2);cursor:pointer}
.calc-output .co-label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px}
.calc-output .co-big{font-family:var(--display);font-weight:600;font-size:clamp(44px,6vw,68px);letter-spacing:-.03em;line-height:1}
.calc-output .co-sub{color:var(--text-1);font-size:15px;margin-top:18px;line-height:1.55;max-width:38ch}
.calc-output .co-divider{height:1px;background:var(--line);margin:32px 0}
.calc-output .co-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;margin-bottom:14px}
.calc-output .co-row span:first-child{color:var(--text-1)}
.calc-output .co-row span:last-child{font-family:var(--mono);color:var(--text-0)}
.calc-foot{font-family:var(--mono);font-size:11px;color:var(--text-2);margin-top:26px;line-height:1.6}

/* ---------- process (section 5) ---------- */
.process-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:20px}
.phase{position:relative;padding:36px 26px 0}
.phase::before{content:"";position:absolute;top:6px;left:0;right:0;height:1px;background:var(--line)}
.phase .node{position:absolute;top:0;left:26px;width:13px;height:13px;border-radius:50%;background:var(--bg-0);border:2px solid var(--line-2)}
.phase.active .node{background:var(--grad);border-color:transparent;box-shadow:0 0 16px 2px rgba(255,106,26,.45)}
.phase .ph-time{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.phase h4{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:10px}
.phase p{font-size:14.5px;color:var(--text-1);line-height:1.5;text-wrap:pretty}
.rail-cta{margin-top:38px}

/* ---------- web track (section 6) ---------- */
.web-band{border:1px solid var(--line);border-radius:20px;background:var(--bg-2);padding:48px 50px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.web-band .eyebrow{margin-bottom:18px}
.web-band h3{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;margin-bottom:16px;line-height:1.1}
.web-band p{color:var(--text-1);font-size:16px;line-height:1.55;text-wrap:pretty}
.web-list{display:flex;flex-direction:column;gap:14px}
.web-list .wl{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.web-list .wl:first-child{border-top:none}
.web-list .wl .name{font-size:16px;color:var(--text-0);font-weight:500}
.web-list .wl .meta{font-family:var(--mono);font-size:12px;color:var(--text-2)}

/* ---------- about (section 7) ---------- */
.about-full{position:relative;overflow:hidden;display:flex;align-items:flex-start;min-height:86vh;padding:0;}
.about-bg{position:absolute;inset:0;z-index:0;background:#000}
/* anchored to band height + left, so widening the screen never zooms the photo */
.about-bg img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;filter:contrast(1.04) saturate(1.03)}
/* same edge-fade as the hero so the black photo melts seamlessly into the page */
.about-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,11,15,0) 36%,rgba(11,11,15,.5) 60%,rgba(11,11,15,.66) 100%),
    linear-gradient(90deg,var(--bg-0) 0,rgba(11,11,15,0) 15%,rgba(11,11,15,0) 70%,var(--bg-0) 100%),
    linear-gradient(180deg,var(--bg-0) 0,rgba(11,11,15,0) 14%,rgba(11,11,15,0) 84%,var(--bg-0) 100%)}
.about{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end;margin-top:clamp(40px,7vh,110px)}
.about-copy{width:48%;max-width:540px;margin-left:auto}
.about h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;line-height:1.08;margin:20px 0 24px}
.about p{color:var(--text-1);font-size:17px;line-height:1.6;margin-bottom:18px;text-wrap:pretty;max-width:54ch}
.about .signoff{display:flex;align-items:center;gap:16px;margin-top:32px}
.about .signoff .nm{font-family:var(--display);font-size:18px;font-weight:600}
.about .signoff .rl{font-family:var(--mono);font-size:12px;color:var(--text-2)}

/* ---------- FAQ (section 8) ---------- */
.faq{max-width:840px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:28px 4px;text-align:left;color:var(--text-0);font-family:var(--body);font-size:19px;font-weight:500;transition:color .2s ease}
.faq-q:hover{color:#fff}
.faq-q .ic{width:22px;height:22px;flex-shrink:0;position:relative;transition:transform .3s ease}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--text-1);border-radius:2px;transition:opacity .3s,background .2s}
.faq-q .ic::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
.faq-q .ic::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.faq-item.open .faq-q .ic::after{opacity:0}
.faq-item.open .faq-q .ic::before{background:var(--orange)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-in{padding:0 4px 28px;color:var(--text-1);font-size:16px;line-height:1.6;max-width:64ch;text-wrap:pretty}

/* ---------- footer CTA (section 9) ---------- */
.foot-cta{padding:130px 0;text-align:center;border-top:1px solid var(--line);position:relative;overflow:hidden}
.foot-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(50% 70% at 50% 120%,rgba(229,0,109,.16),transparent 70%)}
.foot-cta h2{font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,62px);letter-spacing:-.03em;line-height:1.04;max-width:18ch;margin:24px auto 26px;text-wrap:balance}
.foot-cta .sub{color:var(--text-1);font-size:19px;max-width:50ch;margin:0 auto 40px;text-wrap:pretty}
.foot-cta .cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.contact-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:48px}
.contact-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:999px;padding:12px 22px;
  font-size:14.5px;color:var(--text-1);transition:border-color .2s ease,color .2s ease,background .2s}
.contact-pill:hover{border-color:rgba(255,255,255,.4);color:var(--text-0);background:rgba(255,255,255,.03)}
.contact-pill svg{width:17px;height:17px;color:var(--orange)}

footer.site-foot{border-top:1px solid var(--line);padding:50px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.foot-in .brand img{height:26px}
.foot-meta{font-family:var(--mono);font-size:12px;color:var(--text-2);text-align:right;line-height:1.8}
.foot-meta a{color:var(--text-1);transition:color .2s ease}
.foot-meta a:hover{color:var(--text-0)}

/* ---------- cookie banner ---------- */
.cookiebar{position:fixed;left:24px;bottom:24px;z-index:60;max-width:460px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;padding:24px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
  opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
.cookiebar.show{opacity:1;transform:none}
.cookiebar[hidden]{display:none}
.cb-text{font-size:14.5px;color:var(--text-1);line-height:1.55;margin-bottom:18px}
.cb-text b{color:var(--text-0)}
.cb-text a{color:var(--text-0);text-decoration:underline;text-underline-offset:3px}
.cb-actions{display:flex;gap:12px}
.cb-actions .btn{padding:12px 22px;font-size:14.5px}
@media(max-width:560px){
  .cookiebar{left:12px;right:12px;bottom:12px;max-width:none;padding:20px}
  .cb-actions{flex-direction:column}
  .cb-actions .btn{justify-content:center}
}

/* ---------- legal pages (privacy / voorwaarden) ---------- */
.legal{max-width:780px;margin:0 auto;padding:160px var(--pad) 100px}
.legal h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,44px);letter-spacing:-.025em;line-height:1.08;margin:18px 0 14px}
.legal .updated{font-family:var(--mono);font-size:12px;color:var(--text-2);margin-bottom:48px}
.legal h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.015em;margin:44px 0 14px}
.legal p,.legal li{color:var(--text-1);font-size:15.5px;line-height:1.65}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 20px;display:flex;flex-direction:column;gap:8px}
.legal b{color:var(--text-0);font-weight:600}
.legal a{color:var(--text-0);text-decoration:underline;text-underline-offset:3px}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14px}
.legal th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--line-2)}
.legal td{color:var(--text-1);padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}

/* ---------- AI-bewijs intro band + footer CTA visual (conceptual photos) ---------- */
.proof-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;margin-bottom:64px}
.proof-intro .pi-visual{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.proof-intro .pi-visual img{width:100%;height:100%;object-fit:cover;object-position:left center;filter:contrast(1.04) saturate(1.04)}
.proof-intro .pi-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,15,0) 58%,rgba(11,11,15,.5) 100%)}
.proof-intro .pi-copy{margin-bottom:0;max-width:none}

.foot-cta .fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left}
.fc-visual{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.fc-visual img{width:100%;height:100%;object-fit:cover;object-position:left center;filter:contrast(1.04) saturate(1.04)}
.fc-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,15,0) 60%,rgba(11,11,15,.5) 100%)}
.fc-copy{text-align:left}
.fc-copy .eyebrow{justify-content:flex-start}
.fc-copy h2{margin-left:0;margin-right:0;max-width:18ch}
.fc-copy .sub{margin-left:0;margin-right:0}
.fc-copy .cta-row{justify-content:flex-start}
.fc-copy .contact-row{justify-content:flex-start}

/* full-bleed CTA — hand + particle network behind the content */
.foot-cta-full{padding:0 0 clamp(64px,9vh,130px);min-height:88vh;display:flex;align-items:flex-end;text-align:left}
.foot-cta-full::after{content:none}
.cta-bg{position:absolute;inset:0;z-index:0;background:#000}
/* anchored to band height + left, so widening the screen never zooms the photo */
.cta-bg img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;filter:contrast(1.05) saturate(1.06)}
/* soft scrim: tame the particles behind the copy + melt edges into the page */
.cta-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(125% 92% at 80% 52%, rgba(11,11,15,0) 26%, rgba(11,11,15,.5) 66%, rgba(11,11,15,.62) 100%),
    linear-gradient(90deg,var(--bg-0) 0,rgba(11,11,15,0) 15%,rgba(11,11,15,0) 74%,var(--bg-0) 100%),
    linear-gradient(180deg,var(--bg-0) 0,rgba(11,11,15,0) 15%,rgba(11,11,15,0) 83%,var(--bg-0) 100%)}
.cta-full-in{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end}
.foot-cta-full .fc-copy{width:48%;max-width:520px;margin-left:auto}
@media(max-width:860px){
  .proof-intro{grid-template-columns:1fr;gap:26px;margin-bottom:48px}
  .foot-cta .fc-grid{grid-template-columns:1fr;gap:32px}
  .proof-intro .pi-visual,.fc-visual{aspect-ratio:16/10}
  .foot-cta-full{display:block;min-height:auto;padding:0 0 8px}
  .cta-bg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/11;max-height:56vh}
  .cta-bg img{position:static;width:100%;height:100%;object-fit:cover;object-position:center 26%}
  .cta-bg::after{background:linear-gradient(180deg,rgba(11,11,15,0) 54%,var(--bg-0) 100%)}
  .cta-full-in{padding-top:26px}
  .foot-cta-full .fc-copy{width:100%;max-width:none;margin-left:0}
}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);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;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero{min-height:auto;padding:130px 0 80px}
  .portrait{max-width:420px}
  .layers{grid-template-columns:1fr;max-width:520px}
  .proof-block{grid-template-columns:1fr;gap:30px}
  .proof-block.flip .proof-visual{order:0}
  .calc{grid-template-columns:1fr}
  .calc-output{border-left:none;border-top:1px solid var(--line)}
  .process-rail{grid-template-columns:1fr 1fr;gap:30px 0}
  .web-band{grid-template-columns:1fr;gap:30px}
  .nav-links{display:none}
}

@media(max-width:820px){
  .about-full{display:block;min-height:auto;padding:0 0 8px}
  .about-bg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;max-height:58vh}
  .about-bg img{position:static;width:100%;height:100%;object-fit:cover;object-position:32% center}
  .about-bg::after{background:linear-gradient(180deg,rgba(11,11,15,0) 54%,var(--bg-0) 100%)}
  .about{padding-top:26px;margin-top:0}
  .about-copy{width:100%;max-width:none;margin-left:0}
}
@media(max-width:560px){
  :root{--pad:22px}
  .section{padding:80px 0}
  .process-rail{grid-template-columns:1fr}
  .proof-step{grid-template-columns:1fr;gap:4px}
  .nav-actions .soft{display:none}
}