/* OogstWeek, oogstweekapp.nl. Huisstijl van Van Eigen Erf (zie design/tokens.css in de app). */
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --olijf: #45502B;
  --bos: #38401B;
  --blad: #84A400;
  --zon: #FF9500;
  --zon-licht: #E6A85C;
  --zand: #C8BF90;
  --inkt: #15250D;
  --wit: #FFFFFF;
  --achtergrond: #F8F6F2;
  --chip: #EFEBDD;
  --groen-vlak: #EAF0D6;
  --oranje-vlak: #FCEFDD;
  --oranje-tekst: #A65A14;
  --bijtekst: #5E6450;
  --schaduw: 0 1px 2px rgba(30, 40, 22, .06), 0 10px 28px rgba(30, 40, 22, .08);
  --kop: "Poppins", system-ui, sans-serif;
  --tekst: "Roboto", system-ui, sans-serif;
  --breed: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--achtergrond); color: var(--inkt); font: 400 17px/1.6 var(--tekst); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--olijf); }
h1, h2, h3 { font-family: var(--kop); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.binnen { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.eyebrow { font: 700 13px/1 var(--kop); letter-spacing: .12em; text-transform: uppercase; color: var(--oranje-tekst); margin-bottom: 14px; display: block; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Knoppen: pill, zonne-oranje met donkere tekst (wit op oranje haalt geen contrast) */
.knop { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 16px/1 var(--kop); text-decoration: none; border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.knop:hover { transform: translateY(-1px); }
.knop-zon { background: var(--zon); color: var(--inkt); box-shadow: 0 6px 18px rgba(255, 149, 0, .3); }
.knop-olijf { background: var(--olijf); color: var(--wit); }
.knop-rand { border-color: rgba(255, 255, 255, .8); color: var(--wit); }
.knop-rand-donker { border-color: var(--olijf); color: var(--olijf); }

/* Kopbalk */
.kopbalk { position: sticky; top: 0; z-index: 10; background: rgba(248, 246, 242, .94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(69, 80, 43, .08); }
.kopbalk .binnen { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.kopbalk img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { font: 600 15px/1 var(--kop); color: var(--inkt); text-decoration: none; }
.menu a:hover { color: var(--olijf); }
.menu .knop { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* Hero: grote foto over de volle breedte, zoals op vaneigenerf.nl */
.hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: center; color: var(--wit); overflow: hidden; background: var(--bos) url("/img/hero.jpg") center right / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56, 64, 27, .92) 0%, rgba(56, 64, 27, .78) 34%, rgba(56, 64, 27, .25) 62%, rgba(56, 64, 27, 0) 80%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg, rgba(56, 64, 27, .35), transparent); }
.hero .binnen { position: relative; z-index: 1; width: 100%; padding-top: 80px; padding-bottom: 96px; }
.hero-tekst { max-width: 600px; }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--zon-licht); }
.hero p { font-size: clamp(18px, 1.7vw, 21px); color: #EAF0D6; max-width: 540px; margin-bottom: 34px; }
.hero .knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-pil { display: inline-flex; align-items: center; gap: 8px; background: rgba(132, 164, 0, .28); color: #DDE8B4; border-radius: 999px; padding: 8px 16px; font: 600 14px/1.35 var(--kop); margin-bottom: 24px; }

/* Herken je dit */
.herkenning { padding: 96px 0 40px; }
.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.kaart { background: var(--wit); border-radius: 24px; padding: 28px; box-shadow: var(--schaduw); }
.kaart p { color: var(--bijtekst); margin: 0; }
.kaart .icoon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--oranje-vlak); color: var(--oranje-tekst); }
.kaart .icoon svg { width: 26px; height: 26px; }
.kaart.groen .icoon { background: var(--groen-vlak); color: var(--olijf); }

/* App in beeld */
.app { padding: 72px 0 96px; }
.app-blok { background: var(--bos); color: var(--wit); border-radius: 32px; padding: 64px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.app-blok::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 149, 0, .35), rgba(255, 149, 0, 0) 65%); }
.app-blok h2 { color: var(--wit); }
.app-blok p { color: #D7DEC2; }
.app-blok .eyebrow { color: var(--zon-licht); }
.lijst { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.lijst li { display: flex; gap: 12px; align-items: flex-start; }
.lijst li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--blad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315250D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.telefoons { position: relative; display: flex; justify-content: center; gap: 20px; z-index: 1; }
.telefoon { width: 250px; border-radius: 40px; padding: 10px; background: #0E120A; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); flex: none; }
.telefoon img { border-radius: 31px; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.telefoons .telefoon:nth-child(2) { margin-top: 56px; }

/* Zo werkt het */
.stappen-sectie { padding: 24px 0 96px; }
.stappen-sectie .binnen { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.stappen { list-style: none; counter-reset: stap; padding: 0; margin: 28px 0 0; display: grid; gap: 22px; }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 52px 1fr; gap: 18px; }
.stappen li::before { content: counter(stap); width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--zon); color: var(--inkt); font: 700 20px/1 var(--kop); }
.stappen h3 { margin: 4px 0 4px; }
.stappen p { color: var(--bijtekst); margin: 0; }
.stappen-sectie .telefoon { margin: 0 auto; width: 290px; }

/* Alles wat erin zit */
.functies { padding: 0 0 96px; }
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.functie { background: var(--wit); border-radius: 20px; padding: 22px; box-shadow: var(--schaduw); }
.functie .icoon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--groen-vlak); color: var(--olijf); margin-bottom: 14px; }
.functie .icoon svg { width: 22px; height: 22px; }
.functie h3 { font-size: 17px; margin-bottom: 6px; }
.functie p { color: var(--bijtekst); font-size: 15px; margin: 0; }

/* Voor tuinders */
.tuinders { padding: 0 0 96px; }
.tuinders .binnen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.foto-stapel { position: relative; }
.foto-stapel > img { border-radius: 28px; box-shadow: var(--schaduw); aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% center; width: 100%; height: auto; }
.foto-stapel .telefoon { position: absolute; left: -18px; bottom: -40px; width: 190px; padding: 8px; border-radius: 32px; }
.foto-stapel .telefoon img { border-radius: 25px; }

/* Voor oogsters */
.oogsters { background: var(--groen-vlak); padding: 80px 0; }
.oogsters .binnen { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
.oogsters img.pin { width: 120px; height: auto; }
.oogsters h2 { color: var(--bos); margin-bottom: 10px; }
.oogsters p { color: var(--bos); margin: 0; max-width: 560px; }
.winkels { display: grid; gap: 12px; }
.winkel { display: flex; align-items: center; gap: 12px; background: var(--inkt); color: var(--wit); border-radius: 14px; padding: 12px 20px; min-width: 230px; text-decoration: none; }
.winkel svg { width: 26px; height: 26px; flex: none; }
.winkel small { display: block; font: 500 12px/1.2 var(--tekst); color: #BFC6AC; }
.winkel strong { font: 600 17px/1.2 var(--kop); }

/* Aanmelden */
.aanmelden { padding: 96px 0; text-align: center; }
.aanmelden .kaart { max-width: 820px; margin: 0 auto; padding: 56px 40px; }
.aanmelden p { color: var(--bijtekst); max-width: 600px; margin: 0 auto 28px; }

/* Voet */
.voet { background: var(--bos); color: #BFC6AC; padding: 48px 0; font-size: 15px; }
.voet .binnen { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.voet img { height: 36px; width: auto; }
.voet a { color: #EAF0D6; }
.voet nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* Telefoon en tablet */
@media (max-width: 980px) {
  .menu a:not(.knop) { display: none; }
  .drie, .vier { grid-template-columns: 1fr 1fr; }
  .app-blok, .stappen-sectie .binnen, .tuinders .binnen { grid-template-columns: 1fr; }
  .app-blok { padding: 40px 28px; }
  .oogsters .binnen { grid-template-columns: 1fr; text-align: left; }
  .foto-stapel .telefoon { left: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .binnen { padding: 0 16px; }
  .kopbalk .binnen { height: 64px; }
  .kopbalk img { height: 32px; }
  .hero { background-image: url("/img/hero-klein.jpg"); background-position: 72% center; min-height: auto; }
  .hero::before { background: linear-gradient(180deg, rgba(56, 64, 27, .55) 0%, rgba(56, 64, 27, .85) 55%, rgba(56, 64, 27, .95) 100%); }
  .hero .binnen { padding-top: 200px; padding-bottom: 56px; }
  .drie, .vier { grid-template-columns: 1fr; }
  .telefoon { width: 46%; min-width: 0; border-radius: 26px; padding: 6px; }
  .telefoon img { border-radius: 21px; }
  .telefoons { gap: 12px; }
  .telefoons .telefoon:nth-child(2) { margin-top: 36px; }
  .stappen-sectie .telefoon { width: 70%; }
  .foto-stapel .telefoon { width: 38%; bottom: -28px; }
  .tuinders { padding-top: 24px; }
  .winkel { min-width: 0; }
  .aanmelden .kaart { padding: 40px 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .knop { transition: none; } }