:root{
  --green:#0d3928;
  --gold:#d4af37;
  --light:#ffffff;
  --dark:#0a241a;
  --muted:#f5f7f7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#1a1a1a;
  background:var(--muted);
}

.header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(0deg, var(--green), var(--dark));
  border-bottom:2px solid var(--gold);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.container{
  width:min(1100px, 92%);
  margin:0 auto;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px; color:var(--light); text-decoration:none;}
.brand img{height:42px; width:auto}
.brand span{font-weight:700; letter-spacing:.5px}

.menu{
  display:flex; gap:22px; align-items:center;
}
.menu a{
  color:var(--light);
  text-decoration:none;
  font-weight:600;
  padding:10px 12px;
  border-radius:8px;
}
.menu a:hover{background:rgba(255,255,255,.08)}

.btn{
  display:inline-block; border:2px solid var(--gold);
  color:var(--dark); background:var(--gold);
  padding:12px 18px; border-radius:10px; font-weight:800;
  text-decoration:none; letter-spacing:.3px;
  box-shadow:0 6px 18px rgba(212,175,55,.35);
}
.btn.outline{background:transparent; color:var(--gold)}
.btn:hover{filter:brightness(1.05)}

.hero{
  background:
    radial-gradient(1200px 400px at 50% -20%, rgba(212,175,55,.18), transparent 60%),
    linear-gradient(180deg, var(--dark), var(--green));
  color:var(--light);
  padding:86px 0 74px;
  text-align:center;
}
.hero h1{
  font-family:"Montserrat", Arial, sans-serif;
  font-size:clamp(28px, 4.2vw, 54px);
  margin:0 0 12px;
  letter-spacing:.5px
}
.hero p.lead{
  margin:0 auto 22px; opacity:.95;
  font-size:clamp(16px, 2.1vw, 20px);
  max-width:800px;
}
.pills{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0 28px}
.pills span{border:1.5px solid rgba(255,255,255,.45); padding:8px 12px; border-radius:999px; font-weight:600;}

.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(12,1fr);
}
.card{
  background:#fff; border:1px solid #e8ecec;
  border-radius:16px; padding:22px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.section{padding:56px 0}
.section h2{
  font-family:"Montserrat", Arial, sans-serif;
  font-size:clamp(22px, 2.6vw, 34px);
  color:var(--dark);
  margin:0 0 18px
}
.section p{margin:0 0 10px}

.kacheln .card{transition:transform .15s ease, box-shadow .15s ease}
.kacheln .card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10)}

.kachel{grid-column:span 3}
.kachel h3{margin:8px 0 8px; font-size:20px}
.kachel p{color:#313a36}

@media (max-width:1024px){ .kachel{grid-column:span 6} }
@media (max-width:640px){
  .menu{display:none}
  .kachel{grid-column:span 12}
}

.about .card{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap}
.about .card img{height:64px}

.contact .grid > *{grid-column:span 6}
@media (max-width:860px){ .contact .grid > *{grid-column:span 12} }
.form{
  display:grid; gap:12px;
}
input, textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1.5px solid #dfe7e5; font-size:16px; background:#fff;
}
textarea{min-height:140px; resize:vertical}
.small{font-size:14px; color:#4b5a54}

.footer{
  background:linear-gradient(180deg, var(--green), var(--dark));
  color:#dfe7e5; padding:28px 0; border-top:2px solid var(--gold);
}
.footer a{color:#f6e7aa; text-decoration:none}
.footer a:hover{text-decoration:underline}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#0f4631; color:#dfe7e5; border:1.5px solid var(--gold);
  border-radius:999px; padding:8px 12px; font-weight:700;
}