/* ===== Базові змінні ===== */
:root{
  --green:#0f5132; --green-600:#157347; --green-50:#e8f3ec;
  --ink:#1c1f1d; --muted:#5f6661; --line:#e4e7e4; --bg:#ffffff; --bg-soft:#f6f8f6;
  --amber:#9a6b00; --amber-bg:#fdf3e2; --red:#a32d2d; --red-bg:#fbecec;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
  --maxw:1120px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
h1,h2,h3{line-height:1.2; margin:0 0 .4em; font-weight:600}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(22px,3.5vw,30px)}
a{color:var(--green-600); text-decoration:none}
a:hover{text-decoration:underline}
img{display:block; max-width:100%}

/* ===== Кнопки ===== */
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); padding:11px 18px; border-radius:10px;
  font-size:15px; font-weight:500; cursor:pointer; transition:.15s; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--green); border-color:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-600)}
.btn-ghost{background:transparent}
.btn-call{background:var(--green-50); border-color:transparent; color:var(--green)}
.btn-pay{width:100%; justify-content:center; margin-top:6px; background:#eef0ee; color:var(--muted); cursor:not-allowed}
.btn-pay.enabled{background:var(--green); color:#fff; border-color:var(--green); cursor:pointer}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:34px; height:34px; border-radius:9px; background:var(--green); color:#fff;
  display:grid; place-items:center; font-size:18px}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-weight:600; font-size:16px}
.brand-sub{font-size:12px; color:var(--muted)}
.header-nav{display:flex; align-items:center; gap:22px; font-size:15px}
.header-nav a{color:var(--ink)}
.header-nav a:hover{color:var(--green)}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg,var(--green-50),#fff); padding:56px 0 44px}
.hero-inner{max-width:720px}
.pill{display:inline-block; background:var(--green); color:#fff; font-size:13px; font-weight:600;
  padding:5px 14px; border-radius:999px; margin-bottom:16px}
.lead{font-size:18px; color:var(--muted); margin:.4em 0 0}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

/* ===== Trust strip ===== */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.trust-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:18px 20px}
.trust-item{display:flex; align-items:center; gap:12px}
.trust-item .ti{width:38px; height:38px; flex:0 0 38px; border-radius:9px; background:var(--green-50);
  color:var(--green); display:grid; place-items:center; font-size:18px}
.trust-item strong{display:block; font-size:14px}
.trust-item small{color:var(--muted); font-size:12.5px}

/* ===== Sections ===== */
.section{padding:52px 0}
.section-alt{background:var(--bg-soft)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px}
.count{color:var(--muted); font-size:14px}

/* ===== Grid + cards ===== */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:.18s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d2d8d3}
.card-img{position:relative; aspect-ratio:4/3; background:var(--bg-soft); overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover}
.badge{position:absolute; top:10px; left:10px; font-size:11.5px; font-weight:600; padding:4px 10px;
  border-radius:7px; background:var(--green-50); color:var(--green)}
.badge.used{background:#eef2f6; color:#345}
.badge.parts{background:var(--amber-bg); color:var(--amber)}
.card-body{padding:14px 15px 16px; display:flex; flex-direction:column; flex:1}
.card-cat{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.card-name{font-size:16px; font-weight:600; margin:3px 0 2px; line-height:1.3}
.card-model{font-size:12px; color:var(--muted)}
.card-price{margin-top:auto; padding-top:12px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.price-now{font-size:21px; font-weight:700}
.price-was{font-size:14px; color:var(--muted); text-decoration:line-through}
.price-save{font-size:12px; font-weight:600; color:var(--green); background:var(--green-50);
  padding:2px 8px; border-radius:6px}
.price-offer{font-size:17px; font-weight:600; color:var(--amber)}

/* ===== Why ===== */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px}
.why-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.why-card h3{font-size:16px; margin-bottom:.3em}
.why-card p{font-size:14px; color:var(--muted); margin:0}

/* ===== Recently sold ===== */
.sold-block{margin-top:34px}
.sold-block h3{font-size:15px; color:var(--muted); font-weight:600; margin-bottom:12px}
.sold-row{display:flex; gap:14px; flex-wrap:wrap}
.sold-item{display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:8px 14px 8px 8px}
.sold-item img{width:46px; height:46px; border-radius:8px; object-fit:cover; opacity:.9}
.sold-item .sold-tag{font-size:11px; font-weight:600; color:var(--red); background:var(--red-bg);
  padding:1px 7px; border-radius:5px; margin-left:4px}
.sold-item b{font-size:13.5px; font-weight:600}
.sold-item small{display:block; font-size:11.5px; color:var(--muted)}

/* ===== Contact ===== */
.contact-inner{display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start}
.contact-list{list-style:none; padding:0; margin:18px 0 0; font-size:16px}
.contact-list li{display:flex; align-items:center; gap:10px; padding:6px 0}
.contact-list span[aria-hidden]{color:var(--green); width:20px; text-align:center}
.contact-card{background:var(--green-50); border-radius:var(--radius); padding:22px}
.contact-card h3{margin-bottom:.5em}
.pay-primary{margin:0 0 8px}
.pay-second{font-size:14px; color:var(--muted); margin:0 0 14px}
.pay-note{font-size:12px; color:var(--muted); margin:10px 0 0; text-align:center}

/* ===== Lead / message form ===== */
.lead-form{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.lead-form label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted); font-weight:500}
.lead-form .req{color:var(--red)}
.lead-form input, .lead-form textarea{font:inherit; font-size:15px; color:var(--ink); padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff; width:100%; transition:.15s}
.lead-form input:focus, .lead-form textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-50)}
.lead-form textarea{resize:vertical; min-height:92px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lead-form .hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.lead-form #form-submit{align-self:flex-start; margin-top:2px}
.form-status{font-size:14px; margin:2px 0 0; min-height:1px}
.form-status.ok{color:var(--green)}
.form-status.err{color:var(--red)}
.info-list{list-style:none; padding:0; margin:0 0 14px; font-size:14px}
.info-list li{display:flex; gap:9px; padding:6px 0; align-items:flex-start; line-height:1.5}
.info-list .ic{color:var(--green); flex:0 0 18px; text-align:center}
.info-list .tx{flex:1 1 auto; min-width:0}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); padding:24px 0; color:var(--muted); font-size:14px}
.footer-inner{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.footer-legal{max-width:var(--maxw); margin:10px auto 0; padding:0 20px; font-size:12px; color:var(--muted); line-height:1.6}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; z-index:100; display:none}
.modal.open{display:block}
.modal-overlay{position:absolute; inset:0; background:rgba(20,25,22,.55)}
.modal-box{position:relative; max-width:980px; margin:4vh auto; background:#fff; border-radius:16px;
  max-height:92vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-close{position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(255,255,255,.9); font-size:16px; cursor:pointer; box-shadow:var(--shadow)}
.modal-content{display:grid; grid-template-columns:1.15fr 1fr; gap:0}
.m-gallery{background:var(--bg-soft); padding:16px}
.m-main{aspect-ratio:4/3; border-radius:11px; overflow:hidden; background:#fff; border:1px solid var(--line)}
.m-main img{width:100%; height:100%; object-fit:contain; background:#fff}
.m-thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.m-thumbs img{width:60px; height:60px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:.7}
.m-thumbs img.active{border-color:var(--green); opacity:1}
.m-info{padding:26px 26px 30px}
.m-info .card-cat{font-size:12px}
.m-info h2{font-size:23px; margin:4px 0 2px}
.m-model{color:var(--muted); font-size:13px; margin-bottom:14px}
.m-price{display:flex; align-items:baseline; gap:10px; margin-bottom:16px}
.m-price .price-now{font-size:27px}
.m-hl{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.m-hl span{font-size:12.5px; background:var(--green-50); color:var(--green); padding:4px 11px; border-radius:999px}
.m-cond{background:var(--bg-soft); border-left:3px solid var(--green); padding:12px 14px; border-radius:0 8px 8px 0;
  font-size:14px; margin-bottom:18px}
.m-cond.parts{border-left-color:var(--amber); background:var(--amber-bg)}
.m-specs{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:20px}
.m-specs td{padding:7px 0; border-bottom:1px solid var(--line)}
.m-specs td:first-child{color:var(--muted); width:42%}
.m-cta{display:flex; flex-direction:column; gap:9px}
.m-cta .btn{justify-content:center}
.m-cta small{color:var(--muted); font-size:12.5px; text-align:center}

/* ===== Адаптив ===== */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .trust-inner{grid-template-columns:repeat(2,1fr); gap:16px}
  .contact-inner{grid-template-columns:1fr}
  .modal-content{grid-template-columns:1fr}
  .header-nav a:not(.btn){display:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr; gap:13px}
  .card-name{font-size:14.5px}
  .card-price{gap:5px 7px}
  .price-now{font-size:18px}
  .price-was{font-size:13px}
  .brand-sub{display:none}
  .form-row{grid-template-columns:1fr}
  .hero{padding:40px 0 32px}
  .section{padding:40px 0}
}