/* ===== Core tokens ===== */
:root{
  --green:#2fa84f;
  --green-700:#176a34;
  --green-soft:#eaf6ef;
  --ink:#0b0f0d;
  --muted:#6b7d74;
  --bg:#f7faf8;
  --border:#e6efe9;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); background:#fff; line-height:1.65}
img{display:block; max-width:100%; height:auto}
.container{max-width:1160px; margin:0 auto; padding:0 16px}

/* ===== Header + Drawer ===== */
.site-header{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #eef2ee}
.header-flex{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand-logo{width:min(220px,40vw); height:auto}
.hamburger{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:1px solid #dfe8e2;border-radius:12px;cursor:pointer}
.hamburger span{display:block;width:18px;height:2px;background:#1a3e2b;margin:3px 0;border-radius:2px}

.drawer{position:fixed; inset:0 auto 0 0; width:min(84vw,420px); background:#121a16; color:#e8f3ec; transform:translateX(-100%);
  transition:transform .35s ease; z-index:110}
.drawer.open{transform:translateX(0)}
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:105}
.backdrop.show{opacity:1; pointer-events:auto}
.drawer-head{padding:16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between}
.brand-mini{display:flex; align-items:center; gap:10px}
.brand-icon{width:28px;height:28px;object-fit:contain}
.close{background:none;border:none;color:#fff;font-size:28px;cursor:pointer}
.drawer-nav{display:flex; flex-direction:column; gap:6px; padding:12px 12px}
.nav-item{display:block; padding:14px 12px; border-radius:12px; color:#dfe8e2; text-decoration:none; background:rgba(255,255,255,.04)}
.nav-item:hover{background:rgba(255,255,255,.08)}
.drawer-info{padding:14px 14px; margin:10px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; font-size:14px}
.drawer-info .row{display:flex; gap:10px; align-items:flex-start; margin:6px 0}
.pin{width:18px;height:18px;border-radius:50%;background:radial-gradient(#2fa84f 30%, #0f3 0 40%, transparent 41%); box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.pin.alt{background:#2fa84f}
.drawer-footer{padding:12px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:12px}
.social{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);color:#cfead7;text-decoration:none}

/* ===== Hero with candles and slider ===== */
.hero{position:relative; background:linear-gradient(180deg,#174d30,#103b25); color:#fff; overflow:hidden; z-index:1}
.hero .hero-wrap{min-height:56vh; display:grid; place-items:center; padding:56px 0}
.candles{position:absolute; inset:0; opacity:.12;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 60px);
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent); animation:crawl 18s linear infinite}
@keyframes crawl{to{transform:translateX(-200px)}}
.slider{position:relative; width:100%}
.slide{max-width:920px; margin:0 auto; text-align:center; opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s}
.slide.active{opacity:1; transform:translateY(0)}
.slide h1{font-family:Merriweather,serif; font-weight:800; font-size:clamp(28px,6vw,48px); margin:0 0 10px; letter-spacing:-.02em}
.slide h2{font-weight:500; font-size:clamp(16px,3.5vw,22px); opacity:.92; margin:0}
.dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.dots button{width:8px;height:8px;border-radius:50%;border:none;background:#a6d7b7;cursor:pointer;opacity:.6}
.dots button.active{background:#fff; opacity:1}

/* ===== Sections ===== */
.section{padding:56px 0}
.section.muted{background:var(--bg)}
.section.highlight{background:#f4fbf7}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:12px; margin:0 0 10px}
.grid-3{display:grid; gap:14px}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:0 1px 0 rgba(0,0,0,.03)}
.card-icon{font-size:32px; opacity:.9; margin-bottom:8px}
.lemma{margin-top:12px; padding-top:8px; border-top:1px solid var(--border); color:#1c3f2b; font-weight:600}

/* Services advantages */
.advantages{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.adv{display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0}
.step{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed #b7d9c4; border-radius:12px}
.step span{width:28px;height:28px;border-radius:999px;background:var(--green-soft);display:grid;place-items:center;font-weight:800;color:#1f4f35}

/* Chart container */
.chart h4{margin:0 0 8px}

/* KPIs */
.kpis{display:grid; gap:10px; grid-template-columns:repeat(3,1fr); margin:14px 0}
.kpi{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; text-align:center}
.counter{font-size:28px; font-weight:800; color:#135b38}

/* Table */
.table-wrap{overflow-x:auto}
.table{width:100%; border-collapse:collapse; min-width:680px}
.table th,.table td{border:1px solid var(--border); padding:12px 10px; text-align:left}
.table thead th{background:#f4fbf7}

/* Contact */
.contact-grid{display:grid; gap:16px}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr .9fr}}
.form{display:grid; gap:12px}
@media(min-width:768px){.form textarea{grid-column:1/3}}
input, select, textarea{border:1.5px solid #e6e6d6; border-radius:14px; padding:12px 14px; outline:none}
input:focus, textarea:focus, select:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(47,168,79,.12)}
.consent{font-size:14px; color:#34453f}
.btn{border:1px solid var(--green); color:#fff; background:var(--green); border-radius:12px; padding:12px 18px; cursor:pointer; font-weight:700}
.btn:hover{background:var(--green-700); border-color:var(--green-700)}
.form-msg{font-size:14px; color:#176a34; margin:6px 0 0}

/* Footer */
.site-footer{background:#0f1412; color:#e8f3ec}
.footer-flex{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.footer-logo{width:200px; height:auto}
.f-left{display:flex; align-items:center; gap:12px}
.f-right a{color:#a3e0b6; text-decoration:none}

/* Modal */
.modal{border:none; padding:0; max-width:min(720px,94vw)}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-card{border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#fff}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#f7fbf9; border-bottom:1px solid var(--border)}
.modal-body{padding:16px; display:grid; gap:12px}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer}
.chk{display:flex; align-items:center; gap:8px}
.result{background:#f7fbf9; border:1px solid var(--border); border-radius:12px; padding:10px}
.note{color:var(--muted); font-size:14px}

/* Utilities */
.hoverable{transition:transform .2s, box-shadow .2s}
.hoverable:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.06)}
.hidden{display:none !important}