@font-face{
    font-family:'Inter';
    src:url('Inter-Variable.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Inter';
    src:url('Inter-Variable-latin-ext.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face{
    font-family:'Kameron';
    src:url('Kameron-Variable.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Kameron';
    src:url('Kameron-Variable-latin-ext.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  :root{
    --ink:#14101F;
    --ink-soft:#4B4560;
    --muted:#7C7690;
    --bg:#FBFAFD;
    --bg-alt:#F2EEFA;
    --white:#FFFFFF;
    --line:#E7E1F5;
    --violet-deep:#3A2170;
    --violet:#6C4FE0;
    --violet-light:#A48CF0;
    --blue:#3E7BFA;
    --plum:#C4739E;
    --portal-bg-1:#08060F;
    --portal-bg-2:#1B1240;
    --portal-glow:#6C4FE0;
    --grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(108,79,224,0.10), rgba(62,123,250,0.06));
    --grad-cta: linear-gradient(120deg, var(--violet-light), var(--blue));
    --serif: "Kameron", "Iowan Old Style", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --container: 1240px;
    --radius: 18px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{overflow-x:hidden;}
  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 48px;}
  h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-0.01em;line-height:1.08;color:var(--ink);}
  .eyebrow{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);}
  .eyebrow.on-dark{color:var(--violet-light);text-shadow:0 1px 3px rgba(0,0,0,0.5);}
  ::selection{background:var(--violet-light);color:#fff;}

  /* ================= NAV ================= */
  header{position:fixed;top:0;left:0;right:0;z-index:500;padding:22px 0;transition:all .35s ease;}
  header.solid{background:rgba(251,250,253,0.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:14px 0;}
  nav{display:flex;align-items:center;justify-content:space-between;}
  .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink);transition:color .3s ease;white-space:nowrap;}
  header:not(.solid) .logo{color:#fff;}
  .logo-mark{position:relative;width:28px;height:28px;flex:none;border-radius:6px;overflow:hidden;background:#fff;}
  .logo-mark img{width:100%;height:100%;object-fit:contain;}
  .logo em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
  header:not(.solid) .logo em{background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;}
  .nav-links{display:flex;align-items:center;gap:36px;}
  .nav-links a:not(.btn){font-size:14.5px;font-weight:500;color:rgba(255,255,255,0.88);transition:color .2s ease;}
  .nav-links a:not(.btn):hover{color:#fff;}
  header.solid .nav-links a:not(.btn){color:var(--ink-soft);}
  header.solid .nav-links a:not(.btn):hover{color:var(--violet);}
  .btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;padding:13px 24px;border-radius:100px;transition:all .25s ease;}
  .btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 8px 22px -8px rgba(108,79,224,0.55);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(108,79,224,0.65);}
  .btn-ghost{border:1.5px solid var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--violet);color:var(--violet);}
  .mobile-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid rgba(255,255,255,0.4);flex-direction:column;gap:4px;transition:border-color .3s ease;}
  header.solid .mobile-toggle{border-color:var(--line);}
  .mobile-toggle span{width:16px;height:1.5px;background:#fff;display:block;transition:all .25s ease;}
  header.solid .mobile-toggle span{background:var(--ink);}
  .mobile-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
  .mobile-toggle.open span:nth-child(2){opacity:0;}
  .mobile-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

  /* ================= HERO ================= */
  .hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:160px 0 110px;overflow:hidden;isolation:isolate;}
  .hero-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(90% 120% at 50% 0%,var(--violet-deep) 0%,var(--portal-bg-1) 65%);}
  .hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 6%,rgba(108,79,224,0.30) 0%,rgba(108,79,224,0) 60%);}
  /* De orbs zweven op een eigen compositielaag. Belangrijk: de animatie
     verschuift ze alleen (geen scale). Een blur van 80px samen met scale
     dwingt de browser de blur elk frame opnieuw te renderen, wat op
     telefoons de hele pagina traag maakt. */
  .hero-orb{position:absolute;border-radius:50%;filter:blur(80px);z-index:-1;pointer-events:none;will-change:transform;}
  .hero-orb-1{width:500px;height:500px;background:rgba(108,79,224,0.25);top:-10%;right:10%;animation:orbFloat 8s ease-in-out infinite;}
  .hero-orb-2{width:350px;height:350px;background:rgba(62,123,250,0.18);bottom:5%;left:-5%;animation:orbFloat 10s ease-in-out infinite reverse;}
  .hero-orb-3{width:250px;height:250px;background:rgba(196,115,158,0.15);top:40%;right:30%;animation:orbFloat 12s ease-in-out infinite 2s;}
  @keyframes orbFloat{0%,100%{transform:translate(0,0);}33%{transform:translate(30px,-20px);}66%{transform:translate(-20px,15px);}}
  /* Op telefoons staan de orbs stil: de zweving is achter de content nauwelijks
     zichtbaar, maar kost wel doorlopend accu en rekenkracht. */
  @media(max-width:900px){
    .hero-orb{animation:none!important;will-change:auto;}
  }
  @media(prefers-reduced-motion:reduce){
    .hero-orb{animation:none!important;will-change:auto;}
  }
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:var(--container);}
  .hero-content{text-align:left;}
  .hero h1{font-size:clamp(38px,4.8vw,66px);margin:20px 0 26px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.55),0 6px 30px rgba(0,0,0,0.4);}
  .hero h1 em{font-style:italic;background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;}
  .hero p.lead{font-size:17.5px;color:rgba(255,255,255,0.92);max-width:480px;margin-bottom:32px;text-shadow:0 1px 2px rgba(0,0,0,0.5);}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
  .hero .btn-ghost{border-color:rgba(255,255,255,0.35);color:#fff;}
  .hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,0.08);}
  .hero-proof{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(255,255,255,0.85);text-shadow:0 1px 10px rgba(0,0,0,0.35);}
  .stars{color:#F0B429;letter-spacing:2px;font-size:15px;}

  /* Hero visual / video reel card */
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;}
  .hero-video{position:relative;width:100%;max-width:320px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;cursor:pointer;background:#0d0a18;border:1px solid rgba(255,255,255,0.14);box-shadow:0 40px 80px -24px rgba(0,0,0,0.6),0 0 60px -12px rgba(108,79,224,0.35);transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);transition:transform .45s ease;}
  .hero-video:hover{transform:perspective(1200px) rotateY(0) rotateX(0);}
  .hero-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
  .hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,15,0.15) 0%,rgba(8,6,15,0) 30%,rgba(8,6,15,0.05) 60%,rgba(8,6,15,0.55) 100%);transition:opacity .3s ease;}
  .hero-video-badge{position:absolute;left:14px;bottom:14px;z-index:2;font-size:12px;font-weight:600;color:#fff;letter-spacing:0.01em;text-shadow:0 1px 6px rgba(0,0,0,0.6);}
  .hero-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,0.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;box-shadow:0 8px 30px -6px rgba(0,0,0,0.5);}
  .hero-video-play svg{width:30px;height:30px;color:#fff;margin-left:4px;}
  .hero-video-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);animation:videoPulse 2.4s ease-out infinite;}
  .hero-video:hover .hero-video-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(108,79,224,0.55);}
  @keyframes videoPulse{0%{transform:scale(1);opacity:0.7;}100%{transform:scale(1.35);opacity:0;}}
  .hero-video.playing{cursor:default;transform:none;}
  /* Tussen de tik en het moment dat de speler geladen is zit op mobiel zomaar een
     paar seconden. Zolang blijft de poster staan en draait er een spinner, in
     plaats van een zwart vlak waarvan je denkt dat de video het niet doet. */
  .hero-video.loading{cursor:progress;}
  .hero-video.loading .hero-video-play{background:rgba(108,79,224,0.55);}
  .hero-video.loading .hero-video-play svg,
  .hero-video.loading .hero-video-play::before{display:none;}
  .hero-video.loading .hero-video-play::after{
    content:"";width:30px;height:30px;border-radius:50%;
    border:2.5px solid rgba(255,255,255,0.35);border-top-color:#fff;
    animation:videoSpin .7s linear infinite;
  }
  @keyframes videoSpin{to{transform:rotate(360deg);}}
  @media(prefers-reduced-motion:reduce){
    .hero-video-play::before{animation:none;}
    .hero-video.loading .hero-video-play::after{animation-duration:1.6s;}
  }
  .hero-video.playing::after,.hero-video.playing .hero-video-badge,.hero-video.playing .hero-video-play,.hero-video.playing .hero-video-poster{display:none;}
  /* De speler ligt onderop; de poster ligt eroverheen en verdwijnt pas als de
     video echt beeld geeft. Bewust geen fade of opacity op de speler zelf:
     als zo'n overgang blijft hangen, kijkt de bezoeker naar een leeg vlak.
     Een poster die in een keer weggaat kan niet halverwege stranden.
     Wistia's eigen snippet zet hier nog een padding-top van 177% en een
     blur-swatch neer; dat hebben we niet nodig, onze poster vult de kaart al. */
  .hero-video wistia-player{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;padding-top:0;z-index:0;}

  .hero-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(108,79,224,0.3),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;filter:blur(40px);}

  /* ================= STATS STRIP ================= */
  .stats-strip{background:var(--white);border-bottom:1px solid var(--line);padding:0;}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
  .stat-item{padding:36px 28px;text-align:center;border-right:1px solid var(--line);}
  .stat-item:last-child{border-right:none;}
  .stat-num{font-family:var(--serif);font-size:36px;font-weight:600;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:6px;}
  .stat-label{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
  .stat-desc{font-size:13px;color:var(--muted);line-height:1.4;}

  /* ================= SECTION SHARED ================= */
  section{position:relative;padding:110px 0;}
  .section-head{max-width:640px;margin:0 0 60px;}
  .section-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:14px;}
  .section-head h2 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .section-head p{color:var(--ink-soft);font-size:17px;margin-top:18px;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}

  /* ================= PAIN POINTS ================= */
  .pain{background:var(--bg);}
  .pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .pain-list{display:flex;flex-direction:column;gap:20px;}
  .pain-item{display:flex;gap:16px;align-items:flex-start;}
  .pain-icon{width:40px;height:40px;border-radius:12px;background:rgba(108,79,224,0.08);display:flex;align-items:center;justify-content:center;flex:none;font-size:20px;}
  .pain-item h3{font-family:var(--sans);font-size:16px;font-weight:700;margin-bottom:4px;color:var(--ink);}
  .pain-item p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
  .pain-solution{background:linear-gradient(135deg,rgba(108,79,224,0.06),rgba(62,123,250,0.04));border:1px solid var(--line);border-radius:24px;padding:48px 40px;text-align:center;}
  .pain-solution h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:16px;}
  .pain-solution h3 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .pain-solution p{color:var(--ink-soft);font-size:16px;max-width:400px;margin:0 auto 24px;}

  /* ================= SERVICES ================= */
  .services{background:var(--bg-alt);padding-bottom:80px;}
  .service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  /* De hele kaart is een link, niet alleen het regeltje onderaan. Flex met
     margin-top:auto op de link houdt die pijl netjes onderin uitgelijnd, ook
     als de ene kaart meer tekst heeft dan de andere. */
  .service-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 26px;transition:all .3s ease;
    display:flex;flex-direction:column;color:inherit;text-decoration:none;}
  .service-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(58,33,112,0.22);border-color:transparent;}
  .service-card:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}
  .service-icon{width:46px;height:46px;border-radius:13px;background:var(--grad-brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
  .service-icon svg{width:22px;height:22px;stroke:var(--violet);}
  .service-card h3{font-size:19px;margin-bottom:10px;font-weight:600;}
  .service-card p{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px;}
  /* Zichtbare knop onderaan de kaart. De hele kaart is klikbaar, dus dit is
     een span en geen link: anders krijg je een link in een link. */
  .service-link{font-size:13.5px;font-weight:700;color:#fff;background:var(--grad-brand);
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:12px 18px;border-radius:100px;margin-top:auto;
    transition:gap .2s ease,box-shadow .3s ease;}
  .service-card:hover .service-link{gap:10px;box-shadow:0 12px 26px -10px rgba(108,79,224,0.6);}

  /* ================= DIFFERENTIATOR ================= */
  .differ{background:var(--bg);}
  .differ-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
  .differ-text h2{font-size:clamp(28px,3.2vw,40px);margin:14px 0 20px;}
  .differ-text h2 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .differ-text p{color:var(--ink-soft);font-size:16.5px;margin-bottom:16px;max-width:480px;}
  .usp-list{display:flex;flex-direction:column;gap:24px;padding-top:8px;}
  .usp-item{display:flex;gap:16px;align-items:flex-start;}
  .usp-bullet{width:36px;height:36px;border-radius:10px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;flex:none;}
  .usp-bullet svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .usp-item h4{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;}
  .usp-item p{font-size:14px;color:var(--ink-soft);line-height:1.45;}

  /* ================= QUOTE BREAK ================= */
  .quote-break{padding:60px 0;background:var(--bg-alt);}
  .quote-break blockquote{font-family:var(--serif);font-size:clamp(22px,2.8vw,34px);text-align:center;max-width:720px;margin:0 auto;color:var(--ink);line-height:1.35;}
  .quote-break blockquote em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}

  /* ================= FOUNDER ================= */
  .founder-grid{display:grid;grid-template-columns:0.55fr 1fr;gap:64px;align-items:center;}
  .founder-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px -30px rgba(58,33,112,0.35);}
  .founder-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(58,33,112,0.18),transparent 55%);}
  .founder-photo img{width:100%;height:100%;object-fit:cover;}
  .founder-text h2{font-size:clamp(28px,3.2vw,42px);margin:14px 0 20px;}
  .founder-text h2 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .founder-text p{color:var(--ink-soft);font-size:16.5px;margin-bottom:16px;max-width:520px;}
  .founder-sign{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--violet);margin-top:18px;}
  .founder-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;}
  .founder-stat{background:var(--bg-alt);border-radius:14px;padding:18px 16px;text-align:center;}
  .founder-stat .num{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--violet);display:block;}
  .founder-stat .lbl{font-size:12px;color:var(--muted);margin-top:2px;}

  /* ================= PROCESS ================= */
  .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:step;}
  .step{position:relative;padding-top:8px;}
  .step .num{font-family:var(--serif);font-style:normal;font-size:52px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px;}
  .step h3{font-size:20px;margin-bottom:10px;font-weight:600;}
  .step p{color:var(--ink-soft);font-size:15px;}
  .step:not(:last-child)::after{content:"";position:absolute;top:34px;right:-20px;width:40px;height:1px;background:var(--line);display:none;}
  @media(min-width:900px){.step:not(:last-child)::after{display:block;}}

  /* ================= PROOF / REVIEW ================= */
  .proof{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);}
  .review-card{max-width:760px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:26px;padding:56px;text-align:left;box-shadow:0 30px 60px -32px rgba(58,33,112,0.18);}
  .review-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
  .review-avatar{width:52px;height:52px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:22px;font-weight:600;flex:none;}
  .review-meta{flex:1;}
  .review-meta .name{font-weight:700;font-size:16px;color:var(--ink);}
  .review-meta .role{font-size:13.5px;color:var(--muted);margin-top:2px;}
  .review-card .stars{display:block;margin-bottom:20px;}
  .review-card blockquote{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink);margin-bottom:20px;}
  .review-source{font-size:12.5px;color:var(--muted);}

  /* ================= FAQ ================= */
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
  .faq-item{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:6px 24px;}
  .faq-item summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:600;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-icon{position:relative;width:20px;height:20px;flex:none;}
  .faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--violet);border-radius:2px;transition:transform .25s ease,opacity .25s ease;}
  .faq-icon::before{top:9px;left:2px;width:16px;height:2px;}
  .faq-icon::after{top:2px;left:9px;width:2px;height:16px;}
  .faq-item[open] .faq-icon::after{transform:rotate(90deg);opacity:0;}
  .faq-item p{color:var(--ink-soft);font-size:15px;line-height:1.6;padding-bottom:22px;margin:0;}

  /* ================= CTA DARK ================= */
  .cta-dark{background:radial-gradient(90% 120% at 50% 0%,var(--violet-deep) 0%,var(--portal-bg-1) 65%);color:#fff;padding:120px 0;}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
  .cta-intro{padding-top:8px;}
  .cta-intro .eyebrow{color:var(--violet-light);}
  .cta-intro h2{color:#fff;font-size:clamp(30px,3.8vw,48px);margin:16px 0 18px;}
  .cta-intro h2 em{font-style:normal;background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .cta-intro p{color:#B8B2D8;font-size:17px;max-width:420px;}
  .cta-form{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:15px;}
  .form-row{display:flex;flex-direction:column;gap:6px;}
  .form-row label{font-size:12.5px;color:rgba(255,255,255,0.75);font-weight:600;}
  .form-row input,.form-row textarea{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:10px;padding:12px 14px;color:#fff;font-family:var(--sans);font-size:14.5px;resize:vertical;transition:border-color .2s ease,background .2s ease;}
  .form-row input::placeholder,.form-row textarea::placeholder{color:rgba(255,255,255,0.38);}
  .form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--violet-light);background:rgba(255,255,255,0.12);}
  .btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#07130C;font-weight:700;font-size:14.5px;padding:15px 22px;border-radius:100px;transition:all .25s ease;}
  .btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(37,211,102,0.5);}
  .form-note{font-size:11.5px;color:rgba(255,255,255,0.5);text-align:center;margin:2px 0 0;line-height:1.5;}
  /* Keuze tussen WhatsApp en e-mail, bovenaan het formulier */
  .form-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:4px;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:100px;}
  .form-switch-btn{font-family:var(--sans);font-size:13.5px;font-weight:600;color:rgba(255,255,255,0.7);
    background:none;border:0;border-radius:100px;padding:10px 12px;cursor:pointer;
    transition:background .2s ease,color .2s ease;}
  .form-switch-btn:hover{color:#fff;}
  .form-switch-btn.is-active{background:var(--grad-brand);color:#fff;}
  .form-switch-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

  /* ================= FOOTER ================= */
  footer{padding:64px 0 36px;}
  .footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line);}
  .footer-top p{color:var(--muted);font-size:14px;max-width:280px;margin-top:12px;}
  .footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
  .footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:14px;}
  .footer-col a{display:block;font-size:14.5px;color:var(--ink-soft);margin-bottom:10px;transition:color .2s ease;}
  .footer-col a:hover{color:var(--violet);}
  .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13px;color:var(--muted);}

  /* ================= STICKY BOTTOM CTA ================= */
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:400;background:rgba(8,6,15,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.1);padding:14px 0;display:none;}
  .sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .sticky-cta-text{color:#fff;font-size:14.5px;font-weight:600;}

  /* ================= REVEAL ================= */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ================= RESPONSIVE ================= */
  @media(max-width:980px){
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .founder-grid{grid-template-columns:1fr;gap:36px;}
    .founder-photo{max-width:340px;margin:0 auto;}
    .process-grid{grid-template-columns:1fr;gap:44px;}
    .cta-grid{grid-template-columns:1fr;gap:40px;}
    .cta-intro p{max-width:none;}
    .footer-top{flex-direction:column;}
    .hero .wrap{grid-template-columns:1fr 0.9fr;gap:32px;}
    .hero h1{font-size:clamp(34px,4.2vw,52px);}
    .pain-grid{grid-template-columns:1fr;gap:40px;}
    .differ-grid{grid-template-columns:1fr;gap:40px;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .stat-item:nth-child(2){border-right:none;}
    .stat-item:nth-child(3),.stat-item:nth-child(4){border-top:1px solid var(--line);}
  }
  @media(max-width:900px){
    .logo-suffix{display:none;}
    .hero-bg{background-position:center 30%,center;}
    .hero-bg::after{background:radial-gradient(90% 55% at 50% 0%,rgba(58,33,112,0.55) 0%,rgba(58,33,112,0) 60%),linear-gradient(180deg,rgba(8,6,15,0.75) 0%,rgba(58,33,112,0.38) 30%,rgba(58,33,112,0.42) 65%,rgba(8,6,15,0.85) 100%);}
  }
  @media(max-width:767px){
    .mobile-toggle{display:flex;}
    .nav-links{position:fixed;top:64px;left:16px;right:16px;background:var(--white);border:1px solid var(--line);border-radius:18px;flex-direction:column;align-items:stretch;gap:2px;padding:10px;box-shadow:0 20px 44px -18px rgba(58,33,112,0.25);transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .25s ease;}
    .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
    .nav-links a:not(.btn){padding:12px 10px;border-radius:10px;color:var(--ink-soft) !important;}
    .nav-links a:not(.btn):hover{background:var(--bg-alt);color:var(--violet) !important;}
    .nav-links .btn-primary{justify-content:center;margin-top:6px;}
  }
  @media(max-width:680px){
    .wrap{padding:0 20px;}
    .logo{font-size:18px;gap:8px;}
    .logo-mark{width:22px;height:22px;border-radius:5px;}
    .hero{padding:140px 0 80px;min-height:auto;}
    .hero .wrap{grid-template-columns:1fr;gap:32px;}
    .hero-visual{order:1;}
    .hero-video{transform:none;max-width:280px;}
    .hero-video:hover{transform:none;}
    .service-grid{grid-template-columns:1fr;}
    section{padding:80px 0;}
    .review-card{padding:34px 24px;}
    .review-card blockquote{font-size:17px;}
    .cta-dark{padding:90px 0;}
    .cta-form{padding:22px;}
    .sticky-cta{display:block;}
    .sticky-cta-text{display:none;}
    .sticky-cta-inner{justify-content:center;}
    .sticky-cta .btn{width:100%;justify-content:center;}
    body{padding-bottom:64px;}
    .stats-grid{grid-template-columns:1fr 1fr;}
    .stat-item{padding:24px 16px;}
    .stat-num{font-size:28px;}
    .quote-break{padding:60px 0;}
    .founder-stats{grid-template-columns:1fr;gap:10px;}
  }
  @media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none;}}

/* ================= SUBPAGE SHARED ================= */
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{color:var(--muted);transition:color .2s ease;}
.footer-legal a:hover{color:var(--violet);}

/* Page hero (subpages) */
.page-hero{position:relative;padding:170px 0 90px;background:radial-gradient(90% 120% at 50% 0%,var(--violet-deep) 0%,var(--portal-bg-1) 65%);color:#fff;overflow:hidden;isolation:isolate;}
.page-hero .eyebrow{color:var(--violet-light);}
.page-hero h1{font-size:clamp(36px,4.6vw,60px);color:#fff;margin:16px 0 20px;max-width:760px;}
.page-hero h1 em{font-style:italic;background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero p{font-size:17.5px;color:rgba(255,255,255,0.88);max-width:580px;}
.page-hero .hero-ctas{margin-top:32px;margin-bottom:0;}
.page-hero .btn-ghost{border-color:rgba(255,255,255,0.35);color:#fff;}
.page-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.08);}

/* Check list (service pages) */
.check-list{margin:22px 0 0;}
.check-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:15.5px;margin-bottom:12px;line-height:1.5;}
.check-list li::before{content:"\2713";color:var(--violet);font-weight:800;flex:none;margin-top:1px;}

/* Feature grid (service pages) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;}
.feature-card h3{font-family:var(--sans);font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:0.02em;}
.feature-card p{font-size:14px;color:var(--ink-soft);line-height:1.5;}
.feature-card .feature-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);margin-bottom:10px;}

/* Simple centered CTA */
/* ================= 404 EN BEDANKT ================= */
.status-hero{text-align:center;}
.status-hero .wrap{display:flex;flex-direction:column;align-items:center;}
.status-hero h1,.status-hero p{margin-left:auto;margin-right:auto;}
.status-hero p{max-width:600px;}
.status-hero .hero-ctas{justify-content:center;}
/* Het vinkje op de bedankt-pagina */
.status-mark{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:26px;color:#fff;background:var(--grad-brand);
  box-shadow:0 18px 40px -12px rgba(108,79,224,0.7);}
.status-mark svg{width:34px;height:34px;}
/* Het grote 404-cijfer */
.status-code{font-family:var(--serif);font-size:clamp(76px,13vw,150px);line-height:1;font-weight:600;
  background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:10px;}

.cta-simple{text-align:center;}
.cta-simple h2{color:#fff;font-size:clamp(30px,3.8vw,48px);margin:16px 0 18px;}
.cta-simple h2 em{font-style:normal;background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta-simple p{color:#B8B2D8;font-size:17px;max-width:480px;margin:0 auto 30px;}

/* Legal pages */
.legal-body{padding:70px 0 100px;}
.legal-body .wrap{max-width:820px;}
.legal-meta{font-size:13.5px;color:var(--muted);margin-bottom:34px;}
.legal-body h2{font-size:23px;margin:42px 0 14px;}
.legal-body h3{font-family:var(--sans);font-size:16px;font-weight:700;margin:26px 0 10px;color:var(--ink);}
.legal-body p{color:var(--ink-soft);font-size:15.5px;margin-bottom:13px;line-height:1.7;}
.legal-body ul,.legal-body ol{padding-left:22px;margin-bottom:16px;}
.legal-body ul{list-style:disc;}
.legal-body ol{list-style:decimal;}
.legal-body li{color:var(--ink-soft);font-size:15.5px;margin-bottom:8px;line-height:1.65;}
.legal-body a{color:var(--violet);text-decoration:underline;}
.legal-body table{width:100%;border-collapse:collapse;font-size:14px;margin:20px 0;}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:11px 13px;text-align:left;color:var(--ink-soft);vertical-align:top;}
.legal-body th{background:var(--bg-alt);color:var(--ink);font-weight:700;}

/* Contact page */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
/* Twee kaarten in een grid van drie laat een gat vallen alsof er eentje mist.
   Deze variant maakt er twee gelijke kolommen van, gecentreerd onder de tekst. */
.contact-cards.cards-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;margin-left:auto;margin-right:auto;}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;}
.contact-card .ic{width:46px;height:46px;border-radius:13px;background:var(--grad-brand-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:20px;}
.contact-card h3{font-family:var(--sans);font-size:15px;font-weight:700;margin-bottom:6px;}
.contact-card p,.contact-card a{font-size:14.5px;color:var(--ink-soft);}
.contact-card a:hover{color:var(--violet);}

/* Call steps (book-a-call page) */
.call-steps{display:flex;flex-direction:column;gap:26px;max-width:640px;}
.call-step{display:flex;gap:18px;align-items:flex-start;}
.call-step .n{font-family:var(--serif);font-size:26px;font-weight:700;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none;width:44px;}
.call-step h3{font-family:var(--sans);font-size:16.5px;font-weight:700;margin-bottom:5px;}
.call-step p{font-size:15px;color:var(--ink-soft);line-height:1.55;}
.call-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.call-fact{background:var(--bg-alt);border-radius:100px;padding:10px 20px;font-size:13.5px;font-weight:600;color:var(--ink);}

/* Coming soon (werk) */
.coming{min-height:40vh;display:flex;align-items:center;}

@media(max-width:980px){
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .contact-cards{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .page-hero{padding:130px 0 64px;}
  .feature-grid{grid-template-columns:1fr;}
  /* Met flex en een gat van 64px kwamen Diensten en Bedrijf naast elkaar en
     viel Contact er los onder: ongelijke kolommen, rommelige aanblik.
     minmax(0,1fr) houdt de kolommen echt even breed; zonder die 0 duwt het
     lange e-mailadres, dat niet kan afbreken, de eerste kolom op ruim 200px.
     Contact krijgt de volle breedte, want dat adres past niet in een halve. */
  .footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
  .footer-col:last-child{grid-column:1 / -1;}
  .footer-col a{overflow-wrap:anywhere;}
  .footer-legal{gap:12px;}
  .legal-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .legal-body th,.legal-body td{min-width:110px;}
}

/* Diensten overview rows */
.service-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line);}
.service-row:last-of-type{border-bottom:none;}
.service-row .num{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--violet);letter-spacing:0.08em;display:block;margin-bottom:10px;}
.service-row h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px;}
.service-row p{color:var(--ink-soft);font-size:16px;max-width:480px;}
.service-row .btn{margin-top:22px;}
@media(max-width:900px){.service-row{grid-template-columns:1fr;gap:24px;padding:44px 0;}}

/* Grid utility classes (replace inline styles so media queries work) */
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.process-grid.steps-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){
  .feature-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .process-grid.steps-4{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .feature-grid.cols-2,.feature-grid.cols-4{grid-template-columns:1fr;}
}

/* Booking pages: light form section directly under hero */
.form-light{padding:80px 0;background:var(--bg-alt);}
.form-light .cta-intro h2{color:var(--ink);}
.form-light .cta-intro h2 em{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.form-light .cta-intro p{color:var(--ink-soft);}
.form-light .cta-intro a{color:var(--violet) !important;}
.form-light .cta-form{background:var(--white);border:1px solid var(--line);box-shadow:0 28px 56px -28px rgba(58,33,112,0.22);}
.form-light .form-row label{color:var(--ink-soft);}
.form-light .form-row input,.form-light .form-row textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink);}
.form-light .form-row input::placeholder,.form-light .form-row textarea::placeholder{color:var(--muted);}
.form-light .form-row input:focus,.form-light .form-row textarea:focus{outline:none;border-color:var(--violet);background:#fff;}
.form-light .form-note{color:var(--muted);}
.form-light .form-switch{background:var(--bg);border:1px solid var(--line);}
.form-light .form-switch-btn{color:var(--ink-soft);}
.form-light .form-switch-btn:hover{color:var(--ink);}
.form-light .form-switch-btn.is-active{background:var(--grad-brand);color:#fff;}
.form-light .form-switch-btn:focus-visible{outline:2px solid var(--violet);}

/* Dark closing section (sits just above the light footer on booking/contact pages) */
.section-dark{background:radial-gradient(90% 120% at 50% 0%,var(--violet-deep) 0%,var(--portal-bg-1) 65%);color:#fff;}
.section-dark .eyebrow{color:var(--violet-light);}
.section-dark h2,.section-dark h3,.section-dark .differ-text h2{color:#fff;}
.section-dark h2 em,.section-dark .differ-text h2 em{background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;}
.section-dark .section-head p,.section-dark .differ-text p{color:rgba(255,255,255,0.75);}
.section-dark .step .num,.section-dark .call-step .n{background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;}
.section-dark .step p,.section-dark .call-step p{color:rgba(255,255,255,0.7);}
.section-dark .step:not(:last-child)::after{background:rgba(255,255,255,0.15);}
.section-dark .check-list li{color:rgba(255,255,255,0.82);}
.section-dark .check-list li::before{color:var(--violet-light);}
.section-dark .call-fact{background:rgba(255,255,255,0.1);color:#fff;}
.section-dark .feature-card,.section-dark .contact-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);}
.section-dark .feature-card h3,.section-dark .contact-card h3{color:#fff;}
.section-dark .feature-card p,.section-dark .contact-card p,.section-dark .contact-card a{color:rgba(255,255,255,0.7);}
.section-dark .feature-card .feature-tag{color:var(--violet-light);}
.section-dark .contact-card .ic{background:rgba(255,255,255,0.08);}
.section-dark .contact-card a:hover{color:var(--violet-light);}

/* ================= COOKIEBANNER ================= */
.cc-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:880px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px 28px;box-shadow:0 30px 70px -20px rgba(20,16,31,0.35);display:none;}
.cc-banner.open{display:block;animation:ccIn .35s ease;}
@keyframes ccIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.cc-banner h2{font-size:20px;margin-bottom:8px;}
.cc-banner p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:18px;max-width:640px;}
.cc-banner a{color:var(--violet);text-decoration:underline;}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cc-actions .btn{font-size:14px;padding:12px 22px;}
.btn-outline{border:1.5px solid var(--line);color:var(--ink);background:var(--white);}
/* Weigeren moet net zo makkelijk zijn als accepteren. Daarom is dit een even
   grote, even opvallende, gevulde knop en geen dun lijntje ernaast: een
   zwakkere weigerknop geldt als sturend en dat mag niet van de AP. */
.btn-neutral{background:var(--ink);color:#fff;border:1.5px solid var(--ink);
  box-shadow:0 8px 22px -8px rgba(20,16,31,0.45);}
.btn-neutral:hover{background:#000;border-color:#000;}
.btn-outline:hover{border-color:var(--violet);color:var(--violet);}
.cc-link{background:none;border:none;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:underline;padding:12px 6px;cursor:pointer;font-family:var(--sans);}
.cc-link:hover{color:var(--violet);}

/* Voorkeuren-paneel */
.cc-prefs{display:none;margin:20px 0 22px;border-top:1px solid var(--line);padding-top:18px;}
.cc-banner.prefs-open .cc-prefs{display:block;}
.cc-row{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
.cc-row:last-child{border-bottom:none;}
.cc-row-text{flex:1;}
.cc-row h3{font-family:var(--sans);font-size:14.5px;font-weight:700;margin-bottom:3px;color:var(--ink);}
.cc-row p{font-size:13.5px;margin:0;color:var(--ink-soft);}
.cc-toggle{position:relative;width:46px;height:26px;flex:none;margin-top:2px;}
.cc-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.cc-track{position:absolute;inset:0;background:var(--line);border-radius:100px;transition:background .25s ease;}
.cc-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.25);transition:transform .25s ease;}
.cc-toggle input:checked + .cc-track{background:var(--violet);}
.cc-toggle input:checked + .cc-track::after{transform:translateX(20px);}
.cc-toggle input:disabled{cursor:not-allowed;}
.cc-toggle input:disabled + .cc-track{background:var(--violet-light);opacity:0.6;}
.cc-toggle input:focus-visible + .cc-track{outline:2px solid var(--violet);outline-offset:2px;}

/* Sticky mobiele CTA verbergen zolang de banner open staat */
body.cc-open .sticky-cta{display:none !important;}

@media(max-width:680px){
  .cc-banner{left:10px;right:10px;bottom:10px;padding:20px 18px;max-height:85vh;overflow-y:auto;}
  .cc-banner h2{font-size:18px;}
  .cc-actions .btn{width:100%;justify-content:center;}
  /* Alleen binnen de banner over de volle breedte. De knop "Cookie-instellingen"
     in de footer heeft dezelfde class en werd hierdoor 350px breed met
     gecentreerde tekst, waardoor hij los onder de andere links kwam te hangen. */
  .cc-banner .cc-link{width:100%;text-align:center;}
}

/* ================= CASE / WERK ================= */
.case-grid{display:grid;grid-template-columns:1fr;gap:30px;max-width:940px;margin:0 auto;}
.case-card{background:var(--white);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(58,33,112,0.18);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;}
.case-card:hover{transform:translateY(-8px);box-shadow:0 40px 70px -28px rgba(58,33,112,0.4);border-color:transparent;}
.case-media{position:relative;overflow:hidden;background:var(--bg-alt);aspect-ratio:1200/550;}
.case-media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s ease;}
.case-card:hover .case-media img{transform:scale(1.045);}
.case-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,15,0) 60%,rgba(8,6,15,0.16) 100%);opacity:0;transition:opacity .4s ease;}
.case-card:hover .case-media::after{opacity:1;}
.case-body{padding:34px 36px 38px;}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.case-tag{font-size:11.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--violet);background:var(--grad-brand-soft);border:1px solid var(--line);border-radius:100px;padding:6px 14px;}
.case-body h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:6px;}
.case-meta{font-size:14px;color:var(--muted);margin-bottom:20px;}
.case-quote{border-left:3px solid var(--violet);padding:2px 0 2px 20px;margin:0 0 22px;}
.case-quote p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink);margin-bottom:12px;}
.case-quote footer{display:flex;align-items:center;gap:12px;padding:0;background:none;border:none;}
.case-avatar{width:40px;height:40px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:17px;font-weight:600;flex:none;}
.case-quote .name{font-size:14px;font-weight:700;color:var(--ink);}
.case-quote .role{font-size:12.5px;color:var(--muted);}
.case-results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid var(--line);padding-top:24px;}
.case-result .val{font-family:var(--serif);font-size:20px;font-weight:600;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:2px;}
.case-result .lbl{font-size:12.5px;color:var(--muted);line-height:1.4;}
.case-soon{text-align:center;max-width:520px;margin:44px auto 0;padding:30px;border:1px dashed var(--line);border-radius:20px;}
.case-soon p{color:var(--muted);font-size:14.5px;}

@media(max-width:680px){
  .case-body{padding:26px 22px 30px;}
  .case-results{grid-template-columns:1fr;gap:16px;}
  .case-card:hover{transform:none;}
  .case-card:hover .case-media img{transform:none;}
}

/* ================= INTRO-OVERLAY (1e bezoek, landingspagina) ================= */
.intro{display:none;}
html.intro-on,html.intro-on body{overflow:hidden;}
html.intro-on .intro{
  display:block;position:fixed;inset:0;z-index:9999;
  /* Zelfde achtergrond als de hero, zodat de randen op staande schermen
     als huisstijl voelen en niet als een videospeler */
  background:radial-gradient(90% 120% at 50% 0%,var(--violet-deep) 0%,var(--portal-bg-1) 65%);
  opacity:1;transition:opacity .55s ease;
}
/* De video zelf: altijd volledig in beeld, nooit bijgesneden of ingezoomd */
.intro-main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1;
  transform:scale(1);transition:transform .6s cubic-bezier(.4,0,.2,1);}
/* Aan het eind zoomt de warp door tot schermvullend. Dat valt niet op omdat het
   beeld dan abstract is, en zo blijven er geen randen zichtbaar bij de overgang. */
html.intro-on .intro.intro-out .intro-main{transform:scale(var(--cover-scale,1.4));}
/* Onscherpe kopie eronder die het scherm vult, zodat er geen balken ontstaan */
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;
  filter:blur(46px) brightness(.5) saturate(1.25);transform:scale(1.18);}
/* Op telefoons vervalt deze tweede video. Twee video's tegelijk decoderen met
   een schermvullende blur erover is te zwaar; de gradient van de overlay vult
   de zijkanten daar net zo goed. De JS laadt hem dan ook niet (0 bytes extra). */
@media(max-width:900px){
  .intro-bg{display:none;}
}
html.intro-on .intro.intro-out{opacity:0;pointer-events:none;}
.intro-skip{
  position:absolute;bottom:24px;right:24px;z-index:2;
  font-family:var(--sans);font-size:13px;font-weight:600;color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:100px;padding:10px 20px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.intro-skip:hover{background:rgba(255,255,255,0.2);color:#fff;border-color:rgba(255,255,255,0.5);}
.intro-skip:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:680px){
  .intro-skip{bottom:18px;right:18px;padding:9px 18px;font-size:12.5px;}
}