:root{
  --green:#1B5E20;
  --green-2:#E8F5E9;
  --yellow:#FFC107;
  --white:#FFFFFF;
  --text:#0F172A;
  --muted:#475569;
  --border:rgba(15, 23, 42, 0.10);
  --shadow: 0 20px 45px rgba(2, 6, 23, .12);
  --radius: 18px;
  --max: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.55;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }
button, input, select, textarea{ font:inherit; }

.container{ width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-999px; top:10px;
  padding:.75rem 1rem;
  background:var(--yellow);
  border-radius:999px;
  z-index:1000;
}
.skip-link:focus{ left:10px; }

.header{
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  font-weight:800;
  letter-spacing:.2px;
}
.brand-badge{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, var(--green), #0a3010);
  display:grid; place-items:center;
  box-shadow: 0 12px 24px rgba(27,94,32,.25);
}
.brand-badge svg{ width:22px; height:22px; fill:var(--yellow); }
.nav-links{
  display:flex; gap:1rem; align-items:center;
}
.nav-links a{
  padding:.45rem .6rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
}
.nav-links a:hover{ background:var(--green-2); text-decoration:none; color:var(--green); }
.nav-cta{
  display:flex; align-items:center; gap:.75rem;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.75rem 1.05rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border .2s ease;
  text-decoration:none !important;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background:var(--yellow);
  color:#1b1b1b;
  box-shadow: 0 14px 30px rgba(255,193,7,.28);
}
.btn-primary:hover{ box-shadow: 0 18px 36px rgba(255,193,7,.35); }
.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--green);
}
.btn-ghost:hover{ background:var(--green-2); border-color:transparent; }

.mobile-toggle{
  display:none;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--white);
  padding:.55rem .65rem;
}
.mobile-toggle svg{ width:22px; height:22px; }

.hero{
  padding:3.2rem 0 2.2rem;
  background:
    radial-gradient(900px 400px at 15% 15%, rgba(255,193,7,.18), transparent 60%),
    radial-gradient(900px 450px at 85% 0%, rgba(27,94,32,.14), transparent 55%),
    linear-gradient(180deg, var(--green-2), rgba(255,255,255,1) 55%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:2rem;
  align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem;
  border-radius:999px;
  background: rgba(27,94,32,.08);
  border: 1px solid rgba(27,94,32,.12);
  color:var(--green);
  font-weight:700;
}
.kicker .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--yellow);
  box-shadow: 0 0 0 6px rgba(255,193,7,.18);
}
.hero h1{
  margin:.9rem 0 .75rem;
  font-size: clamp(2.05rem, 3.6vw, 3.15rem);
  line-height:1.12;
}
.hero p{
  margin:0 0 1.2rem;
  color:var(--muted);
  font-size:1.05rem;
  max-width:54ch;
}
.hero-actions{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.hero-note{
  margin-top:1.1rem;
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
  color:var(--muted);
  font-weight:600;
}
.hero-note span{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem;
  border: 1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,.75);
}
.hero-card{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.65);
}
.hero-card .img{
  aspect-ratio: 16/10;
  background: #fff;
}
.hero-card .img img{ width:100%; height:100%; object-fit:cover; }
.hero-card .meta{
  padding:1rem 1rem 1.1rem;
  display:grid;
  gap:.6rem;
}
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .55rem;
  border-radius:999px;
  background: var(--green-2);
  color: var(--green);
  font-weight:800;
  border: 1px solid rgba(27,94,32,.14);
}
.badge svg{ width:16px; height:16px; fill: var(--green); }
.mini{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:.7rem;
}
.mini .stat{
  padding:.8rem .85rem;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
}
.stat .label{ color:var(--muted); font-weight:700; font-size:.85rem; }
.stat .value{ font-weight:900; font-size:1.05rem; margin-top:.15rem; }

.section{
  padding:3.4rem 0;
}
.section.alt{ background: var(--green-2); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  margin-bottom:1.6rem;
}
.section-head h2{
  margin:0;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height:1.15;
}
.section-head p{ margin:0; color:var(--muted); max-width:68ch; }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.card{
  background: rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1.2rem 1.15rem;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.card h3{ margin:.2rem 0 .4rem; font-size:1.1rem; }
.card p{ margin:0; color:var(--muted); }
.icon{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: rgba(27,94,32,.10);
  border:1px solid rgba(27,94,32,.16);
}
.icon svg{ width:22px; height:22px; fill: var(--green); }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.2rem;
  align-items:stretch;
}
.steps{
  display:grid; gap:.75rem;
}
.step{
  display:grid; grid-template-columns: 44px 1fr;
  gap:.9rem;
  padding:1rem;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
}
.step .num{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: var(--yellow);
  font-weight:900;
}
.step h4{ margin:.1rem 0 .15rem; }
.step p{ margin:0; color:var(--muted); }

.calc{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}
.calc form{
  display:grid; gap:.75rem;
}
.field{
  display:grid; gap:.35rem;
}
.field label{
  font-weight:800;
  color: var(--green);
}
.field input, .field select, .field textarea{
  padding:.75rem .85rem;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(27,94,32,.35);
  box-shadow: 0 0 0 5px rgba(27,94,32,.10);
}
.help{
  color:var(--muted);
  font-size:.9rem;
}
.result{
  padding:1.2rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.9);
  border:1px solid var(--border);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  display:grid; gap:.65rem;
}
.result .big{
  font-size:2rem;
  font-weight:950;
  letter-spacing:-.6px;
}
.pills{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.pill{
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.8);
  font-weight:700;
  color:var(--muted);
}

.testimonials{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem;
}
.quote{
  position:relative;
}
.quote .stars{ letter-spacing:2px; color: var(--yellow); font-weight:900; }
.quote .who{ margin-top:.65rem; font-weight:900; }
.quote .where{ color:var(--muted); font-weight:700; font-size:.95rem; }

.cert{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem;
}
.cert ul{ margin:.2rem 0 0; padding-left:1.05rem; color:var(--muted); }
.logo-wall{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.75rem;
}
.logo{
  padding:1rem;
  border-radius: var(--radius);
  border:1px dashed rgba(27,94,32,.35);
  background: rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.logo span{ font-weight:900; color:var(--green); }
.logo small{ color:var(--muted); font-weight:700; }

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}

.form textarea{ min-height:110px; resize:vertical; }
.form .fineprint{
  color:var(--muted);
  font-size:.9rem;
}
.checkbox{
  display:flex; gap:.6rem; align-items:flex-start;
}
.checkbox input{ margin-top:.25rem; width:18px; height:18px; accent-color: var(--green); }

.footer{
  padding:2.2rem 0;
  border-top:1px solid var(--border);
  background: #fff;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:1rem;
  align-items:flex-start;
}
.footer p{ margin:.2rem 0; color:var(--muted); }
.footer a{ color:var(--green); font-weight:800; }
.footer .links{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:flex-end; }
.small{ font-size:.92rem; }

.cookie-banner{
  position:fixed;
  left:1rem; right:1rem; bottom:1rem;
  max-width: var(--max);
  margin-inline:auto;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 1rem;
  display:none;
  z-index:2000;
}
.cookie-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: .9rem 1rem;
  align-items:center;
}
.cookie-banner h3{ margin:.1rem 0 .35rem; }
.cookie-banner p{ margin:0; color:var(--muted); }
.cookie-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.cookie-banner .tiny{ font-size:.9rem; color:var(--muted); }
.cookie-banner .tiny a{ color:var(--green); font-weight:800; }

.page{
  padding:2.6rem 0 3.6rem;
}
.prose{
  max-width: 78ch;
}
.prose h1{ margin:0 0 .6rem; font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.prose h2{ margin:1.6rem 0 .5rem; }
.prose p, .prose li{ color:var(--muted); }
.prose code{ background: var(--green-2); padding:.1rem .35rem; border-radius:8px; }
.prose .note{
  background: var(--green-2);
  border:1px solid rgba(27,94,32,.18);
  padding:.9rem 1rem;
  border-radius: var(--radius);
  color: var(--muted);
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .calc{ grid-template-columns: 1fr; }
  .testimonials{ grid-template-columns: 1fr; }
  .cert{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer .links{ justify-content:flex-start; }
  .nav-links{ display:none; }
  .mobile-toggle{ display:inline-flex; }
  .nav.open .nav-links{
    display:flex;
    position:absolute;
    top:64px; left:1rem; right:1rem;
    padding:.8rem;
    background: rgba(255,255,255,.95);
    border:1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    flex-direction:column;
    align-items:stretch;
  }
  .btn-primary {
    display: none;
  }
  .nav.open .nav-links a{ padding:.75rem .8rem; }
}