/* =========================================================
   Bakverpak.nl — landing page styles
   Palette: warm cream, kraft brown, deep cocoa, accent gold
   Typography: Fraunces (display serif) + General Sans (body)
   ========================================================= */

:root{
  --cream:        #f7f1e8;
  --cream-2:      #fbf6ee;
  --paper:        #ffffff;
  --ink:          #2a1f15;
  --ink-soft:     #5a4a3a;
  --ink-mute:     #8a7a68;
  --kraft:        #8a5a2b;
  --kraft-deep:   #6e4621;
  --cocoa:        #2c1d10;
  --gold:         #b8893a;
  --line:         #e7dcc9;
  --shadow-sm:    0 1px 2px rgba(60,40,20,.06);
  --shadow-md:    0 10px 30px -12px rgba(60,40,20,.18);

  --radius:       14px;
  --radius-sm:    8px;

  --text-xs: clamp(.78rem, .76rem + .1vw, .82rem);
  --text-sm: clamp(.88rem, .85rem + .15vw, .95rem);
  --text-base: clamp(1rem, .96rem + .2vw, 1.075rem);
  --text-lg: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --text-xl: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-hero: clamp(2.4rem, 1.8rem + 3.2vw, 4.2rem);

  --container: 1180px;
  --pad: clamp(1.25rem, 2vw, 2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'General Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}

h1,h2,h3{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.1;
  color:var(--cocoa);
  margin:0 0 .6em;
}
h1{font-size:var(--text-hero); line-height:1.05; letter-spacing:-0.02em}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-lg); font-family:'General Sans', sans-serif; font-weight:600; color:var(--ink)}

p{margin:0 0 1em}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px; top:auto;
}
.skip:focus{
  left:1rem; top:1rem; background:var(--ink); color:var(--cream);
  padding:.5rem .75rem; border-radius:6px; z-index:100;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,241,232,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:.9rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--kraft-deep);
  font-family:'Fraunces', serif; font-weight:600;
  font-size:1.25rem; letter-spacing:-0.01em;
}
.brand__mark{ width:36px; height:36px; color:var(--kraft-deep) }
.brand__word{ color:var(--cocoa) }
.brand__word-accent{ color:var(--kraft) }
.brand__tld{ color:var(--ink-mute); font-weight:500 }

.menu{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:center; gap:1.4rem;
  font-size:var(--text-sm);
}
.menu a{
  text-decoration:none; color:var(--ink-soft);
  transition:color .2s ease;
}
.menu a:hover{ color:var(--cocoa) }
.menu__cta{
  background:var(--cocoa); color:var(--cream) !important;
  padding:.55rem .9rem; border-radius:999px;
  font-weight:500;
}
.menu__cta:hover{ background:var(--kraft-deep) }

@media (max-width: 760px){
  .menu li:not(:last-child){ display:none }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.3rem; border-radius:999px;
  font-weight:500; font-size:var(--text-sm);
  text-decoration:none; cursor:pointer;
  border:1px solid transparent; line-height:1;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{
  background:var(--cocoa); color:var(--cream);
}
.btn--primary:hover{ background:var(--kraft-deep); transform:translateY(-1px) }
.btn--ghost{
  background:transparent; color:var(--cocoa); border-color:var(--ink);
}
.btn--ghost:hover{ background:var(--cocoa); color:var(--cream) }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 5rem);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:auto -10% -30% -10%;
  height:60%;
  background:radial-gradient(ellipse at 50% 0%, rgba(184,137,58,.12), transparent 60%);
  pointer-events:none;
}
.hero__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:clamp(2rem, 4vw, 4rem);
  align-items:center;
}
.hero__copy{ max-width:38rem }
.hero h1{ margin-bottom:.5em }
.lede{
  font-size:var(--text-lg);
  color:var(--ink-soft);
  max-width:36rem;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin:1.5rem 0 1.25rem;
}
.hero__points{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:1rem 1.5rem;
  font-size:var(--text-sm); color:var(--ink-soft);
}
.hero__points li{
  position:relative; padding-left:1.2rem;
}
.hero__points li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--gold);
}

.hero__visual{
  position:relative;
  aspect-ratio:1/1;
  max-width:520px;
  width:100%;
  margin-inline:auto;
  filter:drop-shadow(0 30px 40px rgba(110,70,33,.18));
}
.hero__art{ width:100%; height:auto }

@media (max-width: 880px){
  .hero__grid{ grid-template-columns:1fr; gap:2rem }
  .hero__visual{ order:-1; max-width:340px }
}

.eyebrow{
  display:inline-block;
  font-size:var(--text-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kraft);
  font-weight:600;
  margin:0 0 .9em;
}
.eyebrow--light{ color:var(--gold) }

/* ---------- Sections ---------- */
.section{
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.section--alt{
  background:var(--cream-2);
  border-block:1px solid var(--line);
}
.section--dark{
  background:var(--cocoa);
  color:var(--cream);
}
.section--dark h2{ color:var(--cream) }
.section--cta{
  background:linear-gradient(180deg, var(--cream) 0%, #f0e5d2 100%);
}

.section__head{
  max-width:46rem;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.section__intro{
  color:var(--ink-soft);
  font-size:var(--text-lg);
}

/* ---------- Grids & Cards ---------- */
.grid{ display:grid; gap:clamp(1rem, 2vw, 1.5rem) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:980px){ .grid--4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:760px){
  .grid--3{ grid-template-columns:1fr }
  .grid--4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:480px){
  .grid--4{ grid-template-columns:1fr }
}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.4rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#d8c8a8;
}
.card__icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:10px;
  background:var(--cream);
  color:var(--kraft-deep);
  margin-bottom:1rem;
}
.card__icon svg{ width:22px; height:22px }
.card p{ color:var(--ink-soft); margin:0 }

/* ---------- Products ---------- */
.product{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem 1.2rem 1.3rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#d8c8a8 }
.product__art{
  background:var(--cream);
  border-radius:var(--radius-sm);
  padding:.75rem;
  margin-bottom:1rem;
  aspect-ratio:4/3;
  display:grid; place-items:center;
}
.product__art svg{ width:100%; height:100% }
.product h3{ margin-bottom:.3em; font-size:var(--text-base); font-weight:600 }
.product p{ color:var(--ink-soft); font-size:var(--text-sm); margin:0 }
.product--more{
  background:transparent;
  border:1px dashed var(--kraft);
  display:flex; flex-direction:column; justify-content:center;
}
.product--more h3{ color:var(--kraft-deep) }
.link{
  display:inline-block; margin-top:.5rem;
  color:var(--kraft-deep); font-weight:600;
  text-decoration:none; font-size:var(--text-sm);
}
.link:hover{ color:var(--cocoa) }

/* ---------- Steps ---------- */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(3,1fr);
  counter-reset:steps;
}
@media (max-width:880px){ .steps{ grid-template-columns:1fr } }
.step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  position:relative;
}
.step__num{
  display:inline-block;
  font-family:'Fraunces', serif;
  font-size:2rem; color:var(--gold);
  font-weight:500;
  margin-bottom:.4rem;
  letter-spacing:-0.02em;
}
.step h3{ font-size:var(--text-lg); margin-bottom:.4em }
.step p{ color:var(--ink-soft); margin:0 }

/* ---------- Quality (dark) ---------- */
.quality{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 4vw, 4rem);
  align-items:start;
}
@media (max-width:880px){ .quality{ grid-template-columns:1fr } }
.quality__copy .lede--light{ color:#e8dcc6 }
.quality__list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.9rem;
}
.quality__list li{
  position:relative;
  padding-left:1.7rem;
  color:#e8dcc6;
  line-height:1.55;
}
.quality__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.85rem; height:.85rem;
  border:2px solid var(--gold);
  border-radius:50%;
}
.quality__list strong{ color:var(--cream); font-weight:600 }

/* ---------- CTA / Form ---------- */
.cta{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:clamp(2rem, 4vw, 4rem);
  align-items:start;
}
@media (max-width:880px){ .cta{ grid-template-columns:1fr } }
.cta__copy p{ color:var(--ink-soft) }
.cta__direct{ font-size:var(--text-sm) }
.cta__direct a{ color:var(--kraft-deep); font-weight:600 }

.cta__form{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  display:grid; gap:1rem;
  grid-template-columns:1fr 1fr;
  box-shadow:var(--shadow-md);
}
.field{ display:flex; flex-direction:column; gap:.35rem }
.field--wide{ grid-column:1/-1 }
.cta__form label{
  font-size:var(--text-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}
.cta__form input,
.cta__form select,
.cta__form textarea{
  font:inherit; color:var(--ink);
  border:1px solid var(--line);
  background:var(--cream-2);
  border-radius:var(--radius-sm);
  padding:.7rem .85rem;
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.cta__form input:focus,
.cta__form select:focus,
.cta__form textarea:focus{
  border-color:var(--kraft);
  background:#fff;
}
.cta__form textarea{ resize:vertical; min-height:6rem }
.cta__form .btn{ grid-column:1/-1; justify-self:start }
.cta__meta{
  grid-column:1/-1;
  font-size:var(--text-xs);
  color:var(--ink-mute);
  margin:0;
}
@media (max-width:560px){
  .cta__form{ grid-template-columns:1fr; padding:1.25rem }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--cocoa);
  color:#cdbfa6;
  padding-block:2.5rem;
}
.footer{
  display:grid; gap:.75rem;
  text-align:center;
  justify-items:center;
}
.footer__brand{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--cream);
  font-family:'Fraunces', serif; font-weight:600;
  font-size:1.15rem;
}
.footer__brand .brand__mark{ color:var(--gold) }
.footer__brand .brand__tld{ color:#a8997d }
.footer__tag{ color:#cdbfa6; margin:0; max-width:36rem }
.footer__contact a{ color:var(--cream); text-decoration:underline }
.footer__copy{ font-size:var(--text-xs); color:#8a7d65; margin-top:.5rem }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
  html{ scroll-behavior:auto }
}