/* ============================================================
   GRND KOFFIE — gedeeld design system (brandbook)
   ============================================================ */
:root{
  --creme:        #F5F0E8;
  --creme-2:      #EDE6DA;
  --creme-3:      #FBF8F2;
  --aurora:       #205050;   /* primaire merkkleur — anker */
  --aurora-diep:  #163B3B;
  --aurora-licht: #2E6B6B;
  --inkt:         #2C3A38;
  --inkt-zacht:   #5E6E6B;
  --mist:         #B9CCC9;
  --lijn-l:       rgba(32,80,80,.16);
  --lijn-d:       rgba(245,240,232,.18);

  --sku-twilight: #A997D2;
  --sku-jungle:   #3F7241;
  --sku-desert:   #D2691E;
  --sku-coast:    #367588;

  --f-display: "Barlow Condensed", sans-serif;
  --f-body:    "Barlow", sans-serif;
  --f-mono:    "IBM Plex Mono", monospace;

  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1280px;
  --r: 16px;
  --r-groot: 26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);background:var(--creme);color:var(--inkt);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
::selection{background:var(--aurora);color:var(--creme)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.display{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;color:var(--aurora)}
.eyebrow{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--aurora-licht)}
section .eyebrow{display:block;margin-bottom:18px}
.mono{font-family:var(--f-mono)}

/* ---------- aurora streep-paneel (signature) ---------- */
.aurora-paneel{position:relative;border-radius:var(--r-groot);overflow:hidden;background:var(--creme-2);isolation:isolate}
.aurora-paneel .blobs{position:absolute;inset:-22%;filter:blur(34px) saturate(1.05);will-change:transform}
.aurora-paneel .stripes{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,
    rgba(245,240,232,.85) 0 10px, rgba(245,240,232,0) 10px 24px,
    rgba(245,240,232,.55) 24px 30px, rgba(245,240,232,0) 30px 52px,
    rgba(245,240,232,.78) 52px 58px, rgba(245,240,232,0) 58px 86px),
  repeating-linear-gradient(90deg, rgba(245,240,232,.35) 0 4px, rgba(245,240,232,0) 4px 38px);}
.aurora-paneel .schijn{position:absolute;inset:0;background:linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,0) 45%)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);transition:background .35s ease, box-shadow .35s ease}
.nav.is-scrolled,.nav.solid{background:rgba(245,240,232,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--lijn-l)}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo img{height:38px;width:auto}
.nav-logo .woord{font-family:var(--f-display);font-weight:700;font-size:25px;letter-spacing:.04em;text-transform:uppercase;color:var(--aurora);line-height:1}
.nav-logo .woord small{display:block;font-size:11px;letter-spacing:.36em;color:var(--inkt-zacht);font-weight:600;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zacht);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.actief{color:var(--aurora)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:17px;
  letter-spacing:.08em;text-transform:uppercase;padding:13px 28px;border-radius:999px;background:var(--aurora);color:var(--creme);
  transition:transform .2s ease, background .2s ease, filter .2s ease}
.btn:hover{background:var(--aurora-diep);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--aurora);outline-offset:3px}
.btn--licht{background:transparent;border:1.5px solid var(--lijn-l);color:var(--aurora)}
.btn--licht:hover{background:rgba(32,80,80,.07);transform:translateY(-2px)}
.nav .btn{padding:10px 22px;font-size:15px}
.nav-toggle{display:none}

/* ---------- footer ---------- */
.footer{background:var(--aurora);color:var(--creme);padding:64px 0 36px}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;align-items:flex-start}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo img{height:46px;width:auto}
.footer-logo .woord{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:.04em;text-transform:uppercase;color:var(--creme);line-height:1}
.footer-logo .woord small{display:block;font-size:11px;letter-spacing:.36em;color:var(--mist);font-weight:600;margin-top:2px}
.footer-meta{font-size:15px;color:var(--mist);margin-top:16px;display:flex;flex-direction:column;gap:6px}
.footer-links{display:flex;gap:26px;flex-wrap:wrap}
.footer-links a{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);transition:color .2s}
.footer-links a:hover{color:var(--creme)}
.footer-onder{margin-top:50px;padding-top:22px;border-top:1px solid var(--lijn-d);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:var(--mist)}

/* ---------- generieke section ---------- */
.section{padding:clamp(84px,10vw,140px) 0;position:relative}
.section h2{font-size:clamp(42px,5.6vw,84px);max-width:16ch}
.section--blauw{background:var(--aurora);color:var(--creme)}
.section--blauw .display,.section--blauw h2{color:var(--creme)}
.section--blauw .eyebrow{color:var(--mist)}
.section--blauw ::selection{background:var(--creme);color:var(--aurora)}

/* pagina-kop voor subpaginas */
.paginakop{padding:140px 0 0}
.paginakop .terug{font-family:var(--f-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:var(--inkt-zacht);display:inline-flex;gap:8px;align-items:center;transition:color .2s}
.paginakop .terug:hover{color:var(--aurora)}
.paginakop .terug::before{content:"←"}
.paginakop h1{font-size:clamp(48px,6.6vw,104px);margin-top:22px}
.paginakop .intro{font-size:19px;max-width:58ch;color:var(--inkt);margin-top:22px}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(30px)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important}
  *{animation:none !important;transition:none !important}
}

@media (max-width:760px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav .btn{display:none}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:5px;padding:10px;border-radius:10px}
  .nav-toggle i{display:block;width:22px;height:2px;background:var(--aurora);border-radius:2px}
  .nav.menu-open{background:var(--creme)}
  .nav.menu-open .nav-links{display:flex;position:fixed;inset:0;background:var(--creme);flex-direction:column;justify-content:center;align-items:center;gap:28px}
  .nav.menu-open .nav-links a{font-size:24px;color:var(--aurora)}
  .nav.menu-open .nav-toggle{position:relative;z-index:60}
}

/* signup/wachtlijst bevestiging (gedeeld) */
.signup-bedankt{font-family:var(--f-body);font-size:17px;color:inherit;margin:0}