:root {
  font-family: Inter, system-ui, sans-serif;
  color: #171918;
  background: #fff;
  --green: #d5f55c;
  --muted: #505851;
  --line: #dde2dc;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
section[id] { scroll-margin-top: 20px; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.top { background: #171918; color: #fff; }
.top-inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: .93rem; font-weight: 850; letter-spacing: .06em; text-decoration: none; }
.brand span { display: block; color: var(--green); }
.top nav { display: flex; gap: 28px; }
.top nav a, .top-link { text-decoration: none; font-weight: 650; }
.top nav a:hover { text-decoration: underline; }
.top-link { border: 1px solid #828a7b; border-radius: 8px; padding: 10px 14px; }
.hero { background: #f3f5f0; }
.hero-inner { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 40px; padding-block: 66px; }
h1 { font-size: clamp(2.7rem, 5.9vw, 5.1rem); line-height: .99; letter-spacing: -.065em; }
h1 span { display: block; }
.intro > p { color: var(--muted); margin-block: 22px; max-width: 46ch; font-size: 1.12rem; line-height: 1.55; }
.button { display: inline-block; border-radius: 9px; background: var(--green); color: #171918; padding: 15px 23px; font-weight: 800; text-decoration: none; }
.button:hover { background: #c2e34a; }
.hero-phone { display: inline-block; margin-left: 14px; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.benefits { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 24px 0 0; list-style: none; font-size: .9rem; font-weight: 650; }
.benefits li::before { content: "✓"; margin-right: 6px; color: #3c6817; }
.fleet { width: 100%; border-radius: 18px; mix-blend-mode: multiply; }
.section { padding-block: 62px; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.04em; margin-bottom: 22px; }
h3 { font-size: 1.25rem; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; }
.grid > * { border: 1px solid var(--line); border-radius: 13px; padding: 22px; }
.grid p, details p { color: var(--muted); line-height: 1.55; }
.service-grid article { border-top: 3px solid #a4c638; }
.examples { background: #171918; color: #fff; }
.section-note { max-width: 66ch; margin: -8px 0 24px; line-height: 1.55; color: #d6dbd3; }
.examples-grid article { padding: 0; overflow: hidden; border-color: #424943; background: #222623; }
.examples-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.examples-grid article div { padding: 18px 20px; }
.examples-grid p { color: #d6dbd3; }
.examples-grid strong { display: block; margin-top: 7px; color: var(--green); font-size: 1.4rem; }
.steps { background: #f3f5f0; }
.steps ol { list-style: none; counter-reset: step; }
.steps li { background: #fff; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; background: var(--green); border-radius: 50%; font-weight: 800; margin-bottom: 14px; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; padding-block: 15px; }
details p { padding-bottom: 16px; }
.estimate { background: #171918; color: #fff; }
.estimate p { line-height: 1.5; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 20px; }
.messenger { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #828a7b; border-radius: 9px; padding: 12px 16px; font-weight: 700; text-decoration: none; }
.messenger:hover { background: #2e342d; }
.footer { padding-block: 24px; font-weight: 750; }
:focus-visible { outline: 3px solid #5791e6; outline-offset: 4px; }

@media (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  .top-inner { min-height: 60px; }
  .top nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 22px; padding-block: 36px 28px; }
  .intro > p { margin-block: 16px; font-size: 1rem; }
  .button { width: 100%; text-align: center; }
  .hero-phone { margin: 13px 0 0; }
  .messenger { flex: 1; padding-inline: 10px; }
  .grid { grid-template-columns: 1fr; }
  .section { padding-block: 38px; }
}