/* ===================================================
   Verdiax - Main Stylesheet
   ================================================== */

:root{
  --deep:#2f5b3e;      /* donker bosgroen */
  --ink:#263a2c;       /* koptekstkleur */
  --sage:#e5efe6;      /* zachte salie */
  --leaf:#bcd0bf;      /* lichtgroen */
  --bg:#fbfcfa;        /* off-white */
  --muted:#5a6b5f;     /* secundaire tekst */
  --line:#e7efe6;      /* subtiele lijn */
  --card:#ffffff;      /* kaart-achtergrond */
  --sand:#eef3ee;
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
}

/* basis */
*{box-sizing:border-box}
html{scroll-behavior:smooth; font-size:clamp(15px, 0.8vw + 12px, 18px)}
html,body{margin:0}
body{
  font-family: 'Montserrat', sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
h1, h2, h3, h4, h5, h6{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
.container{max-width:1020px; width:clamp(280px,90%,1020px); margin:0 auto; padding:0 20px}

/* utility for responsive media that should fill a card or hero area */
.media-fit{width:100%; height:100%; object-fit:cover; display:block}

/* secties algemeen */
section{padding:60px 0}
h2{
  font-size:clamp(26px, 3vw, 38px);
  margin:0 0 24px; 
  letter-spacing:.3px;
  font-weight:800;
}
h3{
  font-size:clamp(20px, 2.2vw, 26px);
  margin:0 0 16px;
  font-weight:700;
}
p{
  margin:0 0 16px;
  line-height:1.7;
}

/* responsive */
@media (max-width: 860px){
  section{padding:40px 0}
  .container{padding:0 16px}
  .hero{padding:40px 0}
  .hero-grid{padding:24px; gap:24px; grid-template-columns:1fr}
  .about, .product-grid, .offer{grid-template-columns:1fr}
  .cards .card{grid-column:1 / -1}
  .mock{height:200px}
  header{position:relative}
  .nav{flex-direction:column; height:auto; padding:10px 0; gap:10px}
  .brand{font-size:14px}
  .brand span{display:none}
  nav ul{gap:8px; flex-wrap:wrap; justify-content:center}
  nav a{padding:6px 8px; font-size:13px}
  #missie .container, #product .container{padding:24px 16px}
  
  /* Better typography for mobile */
  h2{font-size:clamp(24px, 6vw, 32px)}
  h3{font-size:clamp(18px, 4vw, 22px)}
  p{font-size:15px; line-height:1.65}
  
  /* Better button sizing on mobile */
  .btn{padding:12px 20px; font-size:16px}
  .btns{gap:10px; justify-content:center}
}

@media (max-width: 480px){
  .container{padding:0 12px; width:100%}
  section{padding:32px 0}
  .hero-grid{padding:20px; gap:20px}
  h2{font-size:24px}
  h3{font-size:18px}
  .btn{width:100%; text-align:center; padding:14px 16px}
  .btns{flex-direction:column; width:100%}
}