/* CO Koffie — Hero (gecentreerd). Namespace .cohe. */
.cohe{
  --page:#FDFAF4; --espresso:#693F19; --espresso-dark:#4B2D15; --espresso-darker:#321d0f;
  --cream:#D6C6BF; --cream-light:#F4ECE2; --gold:#C79B4E; --gold-deep:#A9772F;
  --display:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  --body:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  width:100%; padding:0; background:var(--page); font-family:var(--body);
}
.cohe *{box-sizing:border-box;}
.cohe__section{position:relative; width:100%; max-width:none; min-height:100vh; margin:0 auto;
  border-radius:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; background:var(--espresso-dark);}
.cohe__bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:62% center; overflow:hidden;}
.cohe__bg::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(40,24,13,.66) 0%, rgba(45,27,15,.42) 36%, rgba(45,27,15,.52) 64%, rgba(30,17,8,.82) 100%);}
.cohe__bg::after{content:""; position:absolute; inset:0; z-index:1; background:rgba(50,29,15,.30); mix-blend-mode:multiply;}

/* Video-achtergrond (MP4) */
.cohe__video{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
/* YouTube-achtergrond: iframe altijd cover (CSS-only, geen API) */
.cohe__yt{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.cohe__yt iframe{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-width:177.78vh; min-height:100%; border:0;}

.cohe__content{position:relative; z-index:10; width:100%; flex:1; display:flex; flex-direction:column; align-items:center;}

/* Navbar */
.cohe__navbar{display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; width:100%; position:relative; z-index:10;}
.cohe__navlogo{flex:1; display:flex; align-items:center;}
.cohe__navlogo img{height:34px; width:auto; display:block;}
.cohe__navmenu{display:none; align-items:center; gap:1.6rem; list-style:none; margin:0; padding:0;
  color:rgba(244,236,226,.88); font-size:.875rem; font-weight:500; white-space:nowrap;}
.cohe__navmenu li{cursor:pointer; transition:opacity .2s, color .2s;}
.cohe__navmenu li:hover{opacity:.65;}
.cohe__navmenu li.is-active{color:var(--gold);}
.cohe__navmenu a{color:inherit; text-decoration:none;}
.cohe__navright{flex:1; display:flex; justify-content:flex-end;}
.cohe__demo{display:flex; align-items:center; background:var(--gold); color:var(--espresso-darker);
  border:none; border-radius:9999px; padding:.375rem 1rem .375rem .5rem; gap:.5rem; cursor:pointer;
  font-family:var(--body); font-weight:600; text-decoration:none; transition:background .2s, transform .15s;}
.cohe__demo:hover{background:var(--gold-deep); transform:scale(1.02);}
.cohe__demo .ic{background:rgba(50,29,15,.18); padding:.25rem; border-radius:9999px; display:flex; align-items:center; justify-content:center;}
.cohe__demo .label{font-size:.75rem;}

/* Tekstblok */
.cohe__body{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 0;}
.cohe__text{width:100%; display:flex; flex-direction:column; align-items:center; padding:0 1.25rem; text-align:center; max-width:56rem;}
.cohe__badge{display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:9999px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22); margin:0 auto .75rem; width:fit-content; animation:cohe-fadeUp .6s ease-out both;}
.cohe__badge span{font-size:14px; font-weight:500; color:var(--cream-light);}
.cohe__h1{font-family:var(--display); font-size:2.25rem; font-weight:700; color:var(--cream-light); margin:0 0 .5rem;
  letter-spacing:-.025em; line-height:1.05; text-shadow:0 2px 24px rgba(30,16,8,.35);
  animation:cohe-scaleIn .8s ease both; animation-delay:.2s;}
.cohe__p{font-size:.875rem; color:var(--cream-light); opacity:.9; line-height:1.625; max-width:38rem; margin:0; font-weight:400;
  text-shadow:0 1px 16px rgba(30,16,8,.35); animation:cohe-fadeIn .8s ease both; animation-delay:.4s;}
.cohe__cta{display:flex; gap:.75rem; margin-top:1.6rem; flex-wrap:wrap; justify-content:center;
  animation:cohe-fadeUp .8s ease both; animation-delay:.55s;}
.cohe__btn-primary{display:flex; align-items:center; gap:.55rem; background:var(--gold); color:var(--espresso-darker);
  border:none; border-radius:9999px; padding:.7rem 1.35rem; font-family:var(--body); font-weight:600; font-size:.9rem;
  cursor:pointer; text-decoration:none; transition:background .2s, transform .15s;}
.cohe__btn-primary:hover{background:var(--gold-deep); transform:translateY(-1px);}
.cohe__btn-primary:active{transform:translateY(0) scale(.98);}
.cohe__btn-ghost{display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.10); color:var(--cream-light);
  border:1px solid rgba(244,236,226,.38); border-radius:9999px; padding:.7rem 1.25rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:var(--body); font-weight:600; font-size:.9rem;
  cursor:pointer; text-decoration:none; transition:background .2s, border-color .2s, transform .15s;}
.cohe__btn-ghost:hover{background:rgba(255,255,255,.18); border-color:rgba(244,236,226,.6); transform:translateY(-1px);}
.cohe__btn-ghost:active{transform:translateY(0) scale(.98);}

/* Logobalk onderaan de hero */
.cohe__logos{position:relative; z-index:10; width:100%; padding:1.1rem 0 1.6rem;
  background:linear-gradient(to top, rgba(28,16,8,.55), rgba(28,16,8,0)); animation:cohe-fadeIn 1s ease both; animation-delay:.7s;}
.cohe__logos::before{content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,236,226,.24), transparent);}
.cohe__logos-label{text-align:center; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,236,226,.62); margin:0 0 1rem; font-weight:600;}
.cohe__logos-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}
.cohe__logos-track{display:flex; align-items:center; gap:2.8rem; width:max-content; animation:cohe-logoscroll 50s linear infinite;}
.cohe__logos-viewport:hover .cohe__logos-track{animation-play-state:paused;}
.cohe__logos-track img{height:27px; width:auto; max-width:140px; object-fit:contain; opacity:.55;
  transition:opacity .3s; display:block; flex:none; -webkit-user-drag:none; user-select:none;}
.cohe__logos-track img:hover{opacity:.95;}
@keyframes cohe-logoscroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Hoek rechtsonder */
.cohe__corner{position:absolute; z-index:11; bottom:0; right:0; padding:1.25rem .75rem .75rem 2rem; background:var(--page);
  border-top-left-radius:1.5rem; display:flex; align-items:center; gap:.75rem; text-decoration:none;
  animation:cohe-slideUp .8s ease both; animation-delay:.4s;}
.cohe__mask{position:absolute; width:1.5rem; height:1.5rem; pointer-events:none; color:var(--page);}
.cohe__mask svg{display:block;}
.cohe__mask--top{top:-1.5rem; right:0;}
.cohe__mask--left{bottom:0; left:-1.5rem;}
.cohe__circle{background:rgba(105,63,25,.06); width:2.5rem; height:2.5rem; border-radius:9999px; display:flex;
  align-items:center; justify-content:center; border:1px solid rgba(105,63,25,.14); flex-shrink:0;}
.cohe__info{display:flex; flex-direction:column;}
.cohe__info .title{font-family:var(--display); font-size:16px; font-weight:700; color:rgba(75,45,21,.95);}
.cohe__info .sub{display:flex; align-items:center; gap:.25rem; color:rgba(105,63,25,.6); transition:color .2s;}
.cohe__corner:hover .cohe__info .sub{color:rgba(105,63,25,.85);}
.cohe__info .sub span{font-size:12px; font-weight:500;}
.cohe__circle .arrow-down{animation:cohe-bob 1.8s ease-in-out infinite;}

@keyframes cohe-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);}}
@keyframes cohe-fadeUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
@keyframes cohe-scaleIn{from{opacity:0; transform:scale(.98);} to{opacity:1; transform:scale(1);}}
@keyframes cohe-fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes cohe-slideUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .cohe__badge,.cohe__h1,.cohe__p,.cohe__cta,.cohe__corner,.cohe__circle .arrow-down,.cohe__logos{animation:none;}
  .cohe__logos-track{animation:none; flex-wrap:wrap; justify-content:center; gap:1.6rem 2.4rem;}
}

/* Hoek: alleen de uitgesneden vorm (geen tekst/knop) — alle schermen.
   Breedte/hoogte zijn instelbaar per apparaat; dit zijn de fallbacks.
   Kleinere afronding + maskers, zodat een brede/lage vorm links niet knikt. */
.cohe--corner-shape .cohe__corner{padding:0; gap:0; width:250px; height:92px; border-top-left-radius:2rem;}
.cohe--corner-shape .cohe__circle,
.cohe--corner-shape .cohe__info{display:none;}
.cohe--corner-shape .cohe__mask{width:2rem; height:2rem;}
.cohe--corner-shape .cohe__mask--top{top:-2rem;}
.cohe--corner-shape .cohe__mask--left{left:-2rem;}

/* Kleiner hoekje op mobiel */
@media(max-width:767px){
  .cohe--corner-shape .cohe__corner{width:2.5rem; height:2.5rem; border-top-left-radius:1.25rem;}
  .cohe--corner-shape .cohe__mask{width:1.25rem; height:1.25rem;}
  .cohe--corner-shape .cohe__mask--top{top:-1.25rem;}
  .cohe--corner-shape .cohe__mask--left{left:-1.25rem;}
}

@media(min-width:640px){
  .cohe__h1{font-size:3rem;}
  .cohe__p{font-size:1rem;}
  .cohe__logos-track{gap:3.4rem;}
  .cohe__logos-track img{height:30px; max-width:150px;}
  .cohe__corner{padding:1.5rem 1rem 1rem 2.5rem; border-top-left-radius:2rem; gap:1rem;}
  .cohe__mask{width:2rem; height:2rem;}
  .cohe__mask--top{top:-2rem;} .cohe__mask--left{left:-2rem;}
}
@media(min-width:768px){
  .cohe__logos{padding:1.4rem 0 2rem;}
  .cohe__logos-label{font-size:.72rem; margin-bottom:1.3rem;}
  .cohe__logos-track{gap:4rem;}
  .cohe__logos-track img{height:32px; max-width:160px;}
  .cohe__navbar{padding:1.5rem 2.5rem;}
  .cohe__navlogo img{height:42px;}
  .cohe__navmenu{display:flex;}
  .cohe__demo{padding:.5rem 1.5rem .5rem .5rem; gap:.75rem;}
  .cohe__demo .ic{padding:.375rem;}
  .cohe__demo .label{font-size:.875rem;}
  .cohe__h1{font-size:3.75rem;}
  .cohe__p{font-size:1.125rem;}
  .cohe__corner{padding:2rem 1.5rem 1.5rem 3.5rem; border-top-left-radius:3.5rem; gap:1.5rem;}
  .cohe__mask{width:3.5rem; height:3.5rem;}
  .cohe__mask--top{top:-3.5rem;} .cohe__mask--left{left:-3.5rem;}
  .cohe__circle{width:3.5rem; height:3.5rem;}
  .cohe__info .title{font-size:20px;}
  .cohe__info .sub span{font-size:15px;}
}
@media(min-width:1024px){
  .cohe__h1{font-size:80px;}
}