/* Kaelo portfolio & case-pagina's — gedeelde laag (warm papier-canvas, SPROUT-taal) */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --pink:#FF2EB2;
  --pink-hot:#F618A6;
  --ink:#0B0B0D;
  --paper:#FFF4FA;
  --blue:#2E4EFF;
  --mint:#8FF5C6;
  --yellow:#F2FF3D;
  --lilac:#E4C6FF;
  --max-w:1360px;
  --case:var(--pink);      /* vulkleur van de case (schaduwen, vlakken) */
  --case-ink:var(--pink);  /* tekst-accent van de case (leesbaar op licht) */
  --hero:var(--paper);     /* achtergrond van de case-hero */
}
html{scroll-behavior:smooth;}
html.has-lenis{scroll-behavior:auto;}
::selection{background:var(--yellow);color:var(--ink);}
body{font-family:'Archivo',sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ==== PRELOADER / FALLBACK ==== */
.preloader{position:fixed;inset:0;z-index:1000;background:var(--pink);display:flex;align-items:center;justify-content:center;}
.pre-logo{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(36px,6vw,72px);color:var(--ink);letter-spacing:-.02em;}
.no-motion .preloader,.no-motion .cursor-dot,.no-motion .cursor-ring{display:none!important;}

/* ==== CURSOR ==== */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:3000;border-radius:50%;transform:translate(-100px,-100px);}
.cursor-dot{width:8px;height:8px;background:var(--pink);}
.cursor-ring{width:38px;height:38px;border:2px solid var(--pink);display:flex;align-items:center;justify-content:center;transition:width .3s,height .3s,background .3s;}
.cursor-ring .cur-label{font-family:'Unbounded',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s;white-space:nowrap;}
.cursor-ring.is-view{width:90px;height:90px;background:var(--yellow);border-color:var(--ink);}
.cursor-ring.is-view .cur-label{opacity:1;}
.cursor-ring.is-link{width:54px;height:54px;background:rgba(255,46,178,.2);}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}

/* ==== NAV ==== */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:transform .5s cubic-bezier(.2,.7,.2,1);padding:16px 0;}
.nav.hide{transform:translateY(-120%);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 clamp(20px,3vw,40px);max-width:var(--max-w);margin:0 auto;}
.logo{font-family:'Unbounded',sans-serif;font-weight:900;font-size:22px;letter-spacing:-.02em;color:#fff;background:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:10px 22px;display:inline-flex;align-items:baseline;gap:2px;box-shadow:4px 4px 0 rgba(11,11,13,.3);}
.logo sup{font-size:9px;transform:translateY(-6px);}
.nlinks{display:flex;gap:6px;align-items:center;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:6px;box-shadow:4px 4px 0 rgba(11,11,13,.3);}
.nlink{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);padding:9px 16px;border-radius:999px;transition:background .2s,color .2s;}
.nlink:hover{background:var(--ink);color:var(--pink);}
.nlink.actief{background:var(--ink);color:var(--pink);}
.ncta{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--pink);color:#fff;border:2.5px solid var(--ink);padding:9px 18px;border-radius:999px;transition:background .2s,color .2s;}
.ncta:hover{background:var(--yellow);color:var(--ink);}
.menu-toggle{display:none;background:#fff;border:2.5px solid var(--ink);cursor:pointer;padding:11px 13px;border-radius:999px;box-shadow:4px 4px 0 rgba(11,11,13,.3);}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:4px 0;}

/* ==== GENERIEK ==== */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:9px 20px;border-radius:999px;background:var(--mint);color:var(--ink);border:2px solid var(--ink);}
.pill.pink{background:var(--pink);color:#fff;}
.pill.yellow{background:var(--yellow);}
.pill.white{background:#fff;}
.btn-big{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;background:var(--ink);color:#fff;padding:19px 32px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;border:3px solid var(--ink);cursor:pointer;transition:background .25s,color .25s;}
.btn-big:hover{background:var(--pink);color:#fff;}
.btn-ghost{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;background:transparent;color:var(--ink);padding:19px 32px;border-radius:999px;border:3px solid var(--ink);display:inline-flex;align-items:center;gap:10px;transition:background .25s,color .25s;}
.btn-ghost:hover{background:var(--ink);color:#fff;}
.sec{position:relative;padding:clamp(80px,12vh,140px) clamp(20px,3vw,40px);}
.sec-inner{max-width:var(--max-w);margin:0 auto;}
.sec-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(11,11,13,.45);display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,4vh,44px);}
.sec-label::after{content:"";height:1px;flex:1;background:rgba(11,11,13,.15);}
.sec-label b{color:var(--case-ink);font-weight:400;}
.sec-title{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(28px,4.6vw,64px);letter-spacing:-.02em;text-transform:uppercase;line-height:1.02;margin-bottom:clamp(28px,4vh,44px);}
.sec-title em{font-style:normal;color:var(--case-ink);}

/* ==== CASE-HERO ==== */
.chero{padding:clamp(140px,18vh,190px) clamp(20px,3vw,40px) clamp(40px,6vh,60px);background:var(--hero);}
.chero-inner{max-width:var(--max-w);margin:0 auto;}
.chero-logo{width:clamp(64px,7vw,92px);height:auto;border-radius:22px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin-bottom:22px;}
.chero-title{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(48px,10vw,148px);letter-spacing:-.03em;text-transform:uppercase;line-height:.95;margin:20px 0 20px;}
.chero-title em{font-style:normal;color:var(--case-ink);}
.chero-sub{font-size:clamp(15px,1.7vw,19px);font-weight:600;line-height:1.6;max-width:60ch;color:rgba(11,11,13,.75);}
.chero-meta{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px;}
.meta-chip{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:2px solid rgba(11,11,13,.3);border-radius:999px;padding:8px 16px;color:rgba(11,11,13,.8);background:#fff;}
.meta-chip.live{background:var(--mint);border-color:var(--ink);color:var(--ink);}
.chero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(44px,7vh,64px);}

/* ==== MOCKUPS ==== */
.mock-wrap{position:relative;padding:6px 0 34px;}
.mock-browser{background:#fff;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:12px 12px 0 var(--case);transform:rotate(-1deg);}
.mock-wrap.flip .mock-browser{transform:rotate(1deg);}
.mock-bar{display:flex;align-items:center;gap:6px;padding:11px 15px;border-bottom:3px solid var(--ink);background:#fff;}
.mock-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink);}
.mock-url{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:3px 14px;margin-left:8px;}
.mock-view{height:clamp(280px,42vw,620px);overflow:hidden;background:#fff;}
.mock-view.kort{height:clamp(240px,30vw,440px);}
.mock-view img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:object-position 6s cubic-bezier(.3,.4,.2,1);}
.mock-wrap:hover .mock-view img,.mock-hover:hover .mock-view img{object-position:center bottom;}
.mock-phone{position:absolute;right:clamp(-8px,1vw,30px);bottom:-10px;width:clamp(130px,13vw,200px);background:#fff;border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);transform:rotate(5deg);z-index:3;will-change:transform;}
.mock-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34px;height:5px;background:var(--ink);border-radius:99px;z-index:2;opacity:.85;}
.mock-phone img{width:100%;height:clamp(250px,26vw,400px);object-fit:cover;object-position:center top;transition:object-position 6s cubic-bezier(.3,.4,.2,1);}
.mock-wrap:hover .mock-phone img{object-position:center bottom;}
.mock-cap{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,11,13,.5);margin-top:18px;}

/* ==== OPDRACHT ==== */
.opdracht-h{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(24px,3.4vw,48px);line-height:1.15;letter-spacing:-.015em;text-transform:uppercase;max-width:26ch;}
.opdracht-h em{font-style:normal;color:var(--case-ink);}
.opdracht-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,5vw,80px);margin-top:clamp(30px,5vh,50px);align-items:start;}
.opdracht-p{font-size:15.5px;font-weight:500;line-height:1.75;color:rgba(11,11,13,.75);max-width:60ch;}
.vraag-list{display:flex;flex-direction:column;}
.vraag-item{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:2px solid rgba(11,11,13,.15);font-size:15px;font-weight:700;}
.vraag-item:first-child{border-top:2px solid rgba(11,11,13,.15);}
.vraag-item i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--case-ink);}

/* ==== FEATURES ==== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);}
.feat{background:#fff;border:2.5px solid var(--ink);border-radius:24px;padding:26px 24px;box-shadow:5px 5px 0 rgba(11,11,13,.18);transition:box-shadow .3s,transform .3s;will-change:transform;}
.feat:hover{transform:translateY(-6px);box-shadow:7px 7px 0 var(--case);}
.feat .idx{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--case-ink);display:block;margin-bottom:14px;}
.feat-t{font-family:'Unbounded',sans-serif;font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.25;margin-bottom:10px;}
.feat-d{font-size:13.5px;font-weight:500;line-height:1.65;color:rgba(11,11,13,.65);}

/* ==== BRANDING ==== */
.brand-panel{border:3px solid var(--ink);border-radius:34px;background:#fff;color:var(--ink);padding:clamp(28px,3.4vw,50px);box-shadow:10px 10px 0 var(--case);}
.brand-head{display:flex;align-items:center;gap:20px;margin-bottom:clamp(24px,3.4vh,36px);}
.brand-logo{width:clamp(58px,6vw,84px);height:auto;border-radius:20px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);flex:none;}
.brand-head b{font-family:'Unbounded',sans-serif;font-size:clamp(15px,1.6vw,20px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;}
.brand-head span{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,11,13,.5);margin-top:6px;}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:clamp(26px,4vh,40px);}
.swatch{border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:5px 5px 0 var(--ink);}
.swatch .kleur{height:86px;}
.swatch .naam{background:#fff;padding:10px 14px;border-top:3px solid var(--ink);}
.swatch .naam b{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.swatch .naam span{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(11,11,13,.55);}
.type-spec{border-top:3px solid var(--ink);padding-top:clamp(22px,3vh,34px);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;}
.type-line{font-size:clamp(28px,4.6vw,64px);line-height:1.05;letter-spacing:-.02em;}
.type-meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,11,13,.55);text-align:right;white-space:nowrap;}
.brand-note{margin-top:clamp(22px,3vh,34px);border-top:3px solid var(--ink);padding-top:22px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;font-size:14px;font-weight:600;color:rgba(11,11,13,.75);}
.brand-note b{font-family:'Unbounded',sans-serif;font-size:12px;text-transform:uppercase;color:var(--ink);}

/* ==== SCREENS ==== */
.screens{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);align-items:start;}
.screen .mock-browser{transform:rotate(-.8deg);}
.screen:nth-child(2) .mock-browser{transform:rotate(.8deg);}

/* ==== STACK ==== */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);}
.tool{display:flex;gap:8px 16px;align-items:baseline;flex-wrap:wrap;min-width:0;background:#fff;border:2.5px solid var(--ink);border-radius:26px;padding:16px 24px;box-shadow:4px 4px 0 rgba(11,11,13,.18);transition:box-shadow .3s;}
.tool:hover{box-shadow:6px 6px 0 var(--case);}
.tool b{font-family:'Unbounded',sans-serif;font-size:13.5px;font-weight:700;text-transform:uppercase;white-space:nowrap;}
.tool span{font-size:12.5px;font-weight:500;color:rgba(11,11,13,.6);line-height:1.4;min-width:0;}

/* ==== CIJFERS ==== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);}
.stat{border-radius:26px;border:3px solid var(--ink);padding:26px 24px;box-shadow:7px 7px 0 var(--ink);will-change:transform;}
.stat:nth-child(1){background:var(--case);transform:rotate(-1.5deg);}
.stat:nth-child(2){background:#fff;color:var(--ink);transform:rotate(1deg);}
.stat:nth-child(3){background:var(--case);transform:rotate(1.5deg);}
.stat:nth-child(4){background:#fff;color:var(--ink);transform:rotate(-1deg);}
.stat-n{font-family:'Unbounded',sans-serif;font-size:clamp(22px,2.6vw,36px);font-weight:900;letter-spacing:-.02em;line-height:1.05;}
.stat-l{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-top:10px;opacity:.75;}

/* ==== VOLGENDE CASE / CTA ==== */
.next-case{display:block;border:3px solid var(--ink);border-radius:34px;padding:clamp(30px,4vw,54px);background:var(--pink);color:#fff;box-shadow:10px 10px 0 var(--ink);transition:transform .3s;text-align:left;}
.next-case:hover{transform:translateY(-8px);}
.next-case .nk{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;}
.next-case .nt{font-family:'Unbounded',sans-serif;font-size:clamp(28px,4.6vw,64px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin-top:12px;display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:clamp(30px,5vh,46px);}

/* ==== FOOTER ==== */
footer{border-top:2.5px solid var(--ink);padding:50px clamp(20px,3vw,40px) 36px;background:var(--pink);}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.flinks{display:flex;gap:22px;flex-wrap:wrap;}
.flink{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);transition:color .2s;}
.flink:hover{color:#fff;}
.fcopy{font-size:11.5px;color:rgba(11,11,13,.65);font-weight:700;}

/* ==== RESPONSIVE ==== */
@media(max-width:1024px){
  .feat-grid{grid-template-columns:1fr 1fr;}
  .stack-grid{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .opdracht-cols{grid-template-columns:1fr;}
  .screens{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .nlinks{display:none;position:absolute;top:calc(100% + 8px);left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);background:#fff;flex-direction:column;align-items:stretch;border-radius:24px;padding:14px;border:2.5px solid var(--ink);}
  .nlinks.open{display:flex;}
  .menu-toggle{display:block;}
  .feat-grid{grid-template-columns:1fr;}
  .stack-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .type-spec{grid-template-columns:1fr;}
  .type-meta{text-align:left;}
  .mock-phone{right:4px;}
}