:root{
  --green:#1FA36A;
  --green-600:#148354;
  --ink:#0f172a;
  --muted:#667085;
  --bg:#ffffff;
  --bg-alt:#f6f8f7;
  --card:#ffffff;
  --border:#e6ece9;
  --shadow:0 10px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}

.container{width:min(1100px,92%); margin:0 auto}

.site-header{
  position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); z-index:10
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800}
.logo{height:40px; width:auto}
.nav a{margin-left:18px; color:var(--ink); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--green)}

.hero{padding:56px 0}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center}
.hero h1{font-size:clamp(28px,4.5vw,44px); line-height:1.1; margin:0 0 8px}
.hero p{margin:0 0 16px; color:var(--muted)}
.badges{list-style:none; padding:0; margin:0 0 24px}
.badges li{margin:6px 0}
.btn{
  display:inline-block; background:var(--green); color:#fff; text-decoration:none;
  padding:12px 18px; border-radius:12px; font-weight:700; box-shadow:var(--shadow);
  border:2px solid var(--green)
}
.btn:hover{background:var(--green-600); border-color:var(--green-600)}
.btn-outline{background:#fff; color:var(--green)}
.btn-outline:hover{background:#f3faf6}

.hero-art .art-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px
}
.art-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; text-align:center; box-shadow:var(--shadow)
}
.art-card svg{width:64px; height:64px}
.art-card span{display:block; margin-top:8px; font-weight:600}
.svg-bg{fill:#e8f6ef}
.svg-stroke{fill:none; stroke:var(--green); stroke-width:2.5}
.svg-fill{fill:var(--green)}

.section{padding:56px 0}
.section.alt{background:var(--bg-alt)}
.section h2{margin-top:0; font-size:clamp(22px,3.5vw,32px)}

.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow)
}
.card h3{margin-top:0}

.tarifs-head{display:flex; align-items:center; justify-content:space-between; gap:16px}
.price-grid{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px
}
.price-item{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)
}
.price-item h3{margin:0 0 10px}
.price{font-size:20px; font-weight:800; color:var(--green)}

.packs{margin-top:20px}
.packs ul{margin:8px 0 0 20px}

.currency-switch{display:flex; align-items:center; gap:10px}
.switch{position:relative; display:inline-block; width:46px; height:26px}
.switch input{display:none}
.slider{
  position:absolute; cursor:pointer; inset:0; background:#d1e8dc; border-radius:99px; transition:.25s
}
.slider:before{
  content:""; position:absolute; height:18px; width:18px; left:4px; top:4px; background:#fff; border-radius:50%; transition:.25s; box-shadow:var(--shadow)
}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider:before{transform:translateX(20px)}

.quote fieldset{
  border:1px solid var(--border); border-radius:14px; padding:12px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px
}
.quote-summary{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap
}
.quote-total{font-size:22px}

.review-form, .order-form{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)
}
.review-form label, .order-form label{display:block; margin:10px 0}
.review-form input, .review-form textarea,
.order-form input, .order-form textarea, .order-form select{
  width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff
}
.order-form .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.order-form fieldset{border:1px dashed var(--border); border-radius:12px; padding:12px; margin:12px 0}
.order-form fieldset label{display:block; margin:8px 0}
.rule{background:#f1faf6; border-left:4px solid var(--green); padding:10px 12px; border-radius:8px}

.reviews{list-style:none; padding:0; margin:16px 0 0}
.reviews li{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; margin:10px 0}
.muted{color:var(--muted); font-size:14px}

.site-footer{border-top:1px solid var(--border); background:#fff}
.footer-inner{padding:18px 0; display:flex; align-items:center; justify-content:space-between}
.to-top{text-decoration:none; color:var(--green); font-weight:700}

@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .order-form .grid{grid-template-columns:1fr}
  .quote fieldset{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .price-grid{grid-template-columns:1fr}
}