:root{
  --purple:#704791;
  --yellow:#E7CD34;
  --lightyellow:#FFFADA;
  --lightpurple:#E9DFF1;
  --green:#2F686A;
  --accent:#3F8E93;
  --max:1200px;
  --radius:40px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Montserrat", sans-serif;
  background:var(--lightyellow);
  color:var(--green);
  line-height:1.45;
}

img{ max-width:100%; height:auto; display:block; }

.container{
  width:min(92%, var(--max));
  margin-inline:auto;
}

.center{ text-align:center; }

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  white-space:nowrap;
}

.site-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:20;
  padding:26px 0;
}

.header-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.logo img{ width:150px; }

.main-nav ul{
  margin:0;
  padding:18px 30px;
  display:flex;
  gap:34px;
  align-items:center;
  background:var(--lightyellow);
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,0.10);
}

.nav-item{
  text-decoration:none;
  color:var(--green);
  font-weight:600;
  font-size:16px;
  padding:10px 12px;
  border-radius:14px;
  transition: transform .18s ease, background .18s ease;
}

.nav-item:hover,
.nav-item:focus{
  background: rgba(47,104,106,0.10);
  transform: translateY(-2px);
}

.burger{
  display:none;
  border:none;
  background:transparent;
  font-size:30px;
  color:#fff;
  cursor:pointer;
}

.button-yellow{
  display:inline-block;
  background:var(--yellow);
  color:var(--green);
  text-decoration:none;
  font-weight:700;
  margin-left:80px;
  margin-top:20px;
  padding:12px 30px;
  border-radius:10px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.button-yellow:hover{
  transform: translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

.button-dark{
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:6px 30px;
  font-size:40px;
  cursor:pointer;
}

.kicker{
  font-family:"Playpen Sans", cursive;
  font-weight:400;
  font-size:44px;
  margin:0 0 6px;
}

.section-title{
  margin:0 0 20px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:46px;
}

.p-large{
  margin:0 auto 24px;
  max-width:70ch;
  font-size:18px;
}

.p-label{
  margin:12px 0 0;
  font-size:18px;
  font-weight:600;
  color:var(--green);
}

.bg-purple{ background:var(--purple); color:#fff; }
.bg-lightyellow{ background:var(--lightyellow); }

.hero{
  position:relative;
  overflow:hidden;
  padding:130px 0 130px;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:40px;
  align-items:center;
}

.hero-title{
  padding-top:5px;
  margin-left:80px;
  font-size:38px;
  font-weight:900;
  letter-spacing:.03em;
  color:#fff;
}

.hero-text{
  margin-left:80px;
  font-size:18px;
  color:#fff;
  opacity:.95;
  max-width:52ch;
}

.hero-art img{
  width:100%;
  max-width:520px;
  margin-top:-149px;
  margin-bottom:210px;
  margin-left:auto;
  transform: translateY(18px);
}

.hero-line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:800px;
  background: url("../images/Lijn.png") repeat-x bottom;
  background-size:auto 510px;
  pointer-events:none;
  z-index:1;
}

.hero-monkey{
  position:absolute;
  bottom:105px;
  left:46%;
  width:140px;
  height:auto;
  pointer-events:none;
  z-index:2;
}

.section{
  padding:84px 0;
}

.wat-curve{
  position:relative;
  padding-top:180px;
}

.wat-curve::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:270px;
  background: url("../images/gebogen_vlak_paars.png") no-repeat top center;
  background-size:100% auto;
  pointer-events:none;
}

.panel{
  background:var(--lightpurple);
  border-radius:var(--radius);
  padding:44px 32px;
  margin-top:28px;
}

.features{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
  text-align:center;
  align-items:end;
}

.feature-icon{
  width:92px;
  margin:0 auto;
}

.products{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:26px;
  text-align:center;
  align-items:start;
}

.product a{
  display:block;
  text-decoration:none;
  color:inherit;
}

.product img{
  width:100%;
  max-width:320px;
  margin:0 auto;
  border-radius:25px;
  aspect-ratio:16/9;
  object-fit:cover;
}

.cookie-figure{
  max-width:900px;
  margin:-350px auto -100px;
  text-align:center;
}

.cookie-figure img{
  width:100%;
  max-width:900px;
  height:auto;
}

.maze-figure img{
  width:min(300px, 92%);
  margin:26px auto 0;
}

.photo-figure img{
  width:min(660px, 92%);
  margin:28px auto 0;
  border-radius:30px;
}

.contact-card{
  background:var(--lightpurple);
  border-radius:var(--radius);
  padding:34px 28px;
  max-width:440px;
  margin:30px auto 0;
  text-align:left;
}

.contact-title{
  margin:0 0 18px;
  font-size:20px;
  font-weight:700;
}

.form{
  display:grid;
  gap:12px;
}

.label{ font-weight:600; }

.form input[type="text"],
.form input[type="email"]{
  padding:10px 12px;
  border-radius:10px;
  border:2px solid rgba(47,104,106,0.16);
  background:#fff;
}

.consent{
  border:0;
  padding:0;
  margin:10px 0 6px;
}

.radio{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-right:18px;
}

.site-footer{
  background: url("../images/Footer_achtergrond.png") no-repeat center top;
  background-size:cover;
  color:#fff;
  padding:340px 0 10px;
  position:relative;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:24px;
  align-items:start;
}

.footer-logos{
  display:grid;
  gap:36px;
  align-content:start;
}

.footer-logos img{ width:120px; }

.footer-text{
  margin:0 0 10px;
  font-size:18px;
  color:#fff;
}

.footer-small{
  margin:28px 0 0;
  text-align:center;
  font-size:12px;
  color:#fff;
  opacity:.9;
}

.underline{ text-decoration: underline; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.section, .panel, .contact-card{
  animation: fadeUp .7s ease both;
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-title{ font-size:46px; }
  .section-title{ font-size:38px; }
  .kicker{ font-size:38px; }
  .hero-art img{ margin:14px auto 0; transform:none; }
  .features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-logos{ justify-items:center; }
}

@media (max-width: 768px){
  .cookie-figure img{ max-width:320px; }
}

@media (max-width: 720px){
  .burger{ display:block; }

  .main-nav ul{
    display:none;
    position:absolute;
    top:90px;
    right:4%;
    flex-direction:column;
    gap:12px;
    padding:16px;
  }

  .main-nav ul.is-open{ display:flex; }

  .hero{ padding-top:150px; }
  .hero-title{ font-size:38px; }

  .features{ grid-template-columns:1fr; }
  .products{ grid-template-columns:1fr; }

  .hero-monkey{
    left:52%;
    width:150px;
    bottom:90px;
  }

  .hero-line{
    height:240px;
    background-size:auto 240px;
  }

  .button-yellow{ margin-left:0; }
  .hero-title, .hero-text{ margin-left:0; }
}

a:focus, button:focus, input:focus{
  outline:3px solid rgba(63,142,147,0.28);
  outline-offset:2px;
}