:root {
  --bg:#f1f0eb;
  --paper:#faf9f5;
  --ink:#171a1b;
  --muted:#676d6f;
  --line:#d9d6ce;
  --olive:#68705e;
  --olive2:#52594b;
  --dark:#171a1b;
  --shadow:0 18px 54px rgba(22,26,27,.09);
  --container:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
button { font:inherit; }
.container { width:min(calc(100% - 40px), var(--container)); margin:auto; }

.topbar {
  position:sticky; top:0; z-index:100;
  background:rgba(241,240,235,.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(23,26,27,.08);
}
.nav {
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand {
  display:flex; align-items:center; gap:11px; font-weight:850; letter-spacing:.035em;
}
.brand-mark {
  width:38px; height:38px; border-radius:12px;
  background:var(--dark); color:white; display:grid; place-items:center;
}
.brand small {
  display:block; font-size:9px; color:#777; font-weight:600; letter-spacing:.11em; margin-top:1px;
}
.navlinks {
  display:flex; gap:25px; font-size:14px; color:#4e5557;
}
.navlinks a:hover { color:#111; }
.navright {
  display:flex; align-items:center; gap:13px;
}
.navphone {
  font-weight:800; white-space:nowrap;
}

.btn {
  min-height:50px; padding:0 20px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent; font-weight:800;
  transition:.2s ease; cursor:pointer;
}
.btn:hover { transform:translateY(-2px); }
.btn-dark { background:var(--dark); color:white; }
.btn-dark:hover { background:#292d2f; }
.btn-light { background:rgba(255,255,255,.78); border-color:#d5d1c7; }
.btn-light:hover { background:#fff; }
.btn-olive { background:var(--olive); color:#fff; }
.btn-olive:hover { background:var(--olive2); }

.hero { padding:28px 0 22px; }
.hero-grid {
  display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; align-items:stretch;
}
.hero-copy {
  background:var(--paper); border:1px solid rgba(23,26,27,.08);
  border-radius:30px; padding:50px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:var(--shadow); min-height:620px;
}
.kicker {
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:850; color:var(--olive2);
  display:flex; align-items:center; gap:9px; margin-bottom:18px;
}
.kicker:before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--olive);
}
h1 {
  font-size:clamp(42px,5vw,72px); line-height:.98; letter-spacing:-.05em;
  margin:0 0 24px;
}
.hero-copy > p {
  font-size:18px; color:#5d6365; margin:0 0 28px; max-width:620px;
}
.hero-actions {
  display:flex; gap:10px; flex-wrap:wrap;
}
.hero-mini {
  display:flex; gap:22px; flex-wrap:wrap;
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
}
.hero-mini div {
  font-size:13px; color:#676d6f;
}
.hero-mini b {
  font-size:15px; color:var(--ink);
}

.hero-photo {
  min-height:620px; border-radius:30px; overflow:hidden;
  position:relative; box-shadow:var(--shadow); background:#222;
}
.hero-photo img {
  height:100%; object-fit:cover; object-position:center;
}
.hero-photo:after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.08) 50%, transparent 70%);
}
.photo-overlay {
  position:absolute; left:28px; right:28px; bottom:26px;
  z-index:2; color:#fff;
  display:flex; align-items:end; justify-content:space-between; gap:20px;
}
.photo-overlay h3 {
  font-size:29px; line-height:1.08; margin:0 0 6px;
}
.photo-overlay p {
  margin:0; color:rgba(255,255,255,.72); font-size:14px;
}
.photo-badge {
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.22); backdrop-filter:blur(9px);
  font-size:13px; white-space:nowrap;
}

.statbar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--dark); color:#fff;
  border-radius:22px; padding:22px 28px; margin-top:20px;
}
.stat {
  padding:0 18px; border-right:1px solid rgba(255,255,255,.14);
}
.stat:first-child { padding-left:0; }
.stat:last-child { border:0; }
.stat b {
  display:block; font-size:26px; line-height:1.1; margin-bottom:4px;
}
.stat span {
  font-size:12px; color:rgba(255,255,255,.65);
}

section {
  padding:78px 0;
}
.section-head {
  display:flex; justify-content:space-between; gap:30px;
  align-items:end; margin-bottom:30px;
}
.section-kicker {
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:850; color:var(--olive2); margin-bottom:9px;
}
h2 {
  font-size:clamp(34px,4vw,53px);
  line-height:1.02; letter-spacing:-.04em; margin:0;
}
.section-head p {
  max-width:470px; color:var(--muted); margin:0;
}

.fleet-grid {
  display:grid; grid-template-columns:repeat(12,1fr); gap:18px;
}
.fleet-card {
  grid-column:span 6;
  background:var(--paper);
  border:1px solid rgba(23,26,27,.08);
  border-radius:26px; overflow:hidden;
  box-shadow:0 12px 38px rgba(22,26,27,.055);
}
.gallery-card {
  grid-column:span 12;
}
.gallery-layout {
  display:grid; grid-template-columns:1.08fr .92fr;
}
.gallery-main {
  height:545px; position:relative; overflow:hidden; background:#222;
}
.gallery-main img {
  height:100%; object-fit:cover; object-position:center;
  transition:opacity .18s ease;
}
.gallery-side {
  padding:28px; display:flex; flex-direction:column; justify-content:center;
}
.gallery-thumbs {
  display:grid; grid-template-columns:repeat(5,1fr); gap:7px;
  margin:17px 0 20px;
}
.gallery-thumb {
  border:2px solid transparent; padding:0;
  border-radius:10px; overflow:hidden; height:70px;
  background:#ddd; cursor:pointer; opacity:.72;
}
.gallery-thumb.active {
  border-color:var(--olive); opacity:1;
}
.gallery-thumb img {
  height:100%; object-fit:cover;
}
.gallery-hint {
  font-size:11px; color:#858a8b; margin-top:7px;
}

.fleet-image {
  height:330px; overflow:hidden; background:#ddd; position:relative;
}
.fleet-image img {
  height:100%; object-fit:cover;
}
.fleet-image.platform img { object-position:center center; }
.fleet-image.tent img { object-position:center 56%; }
.fleet-image.dump img { object-position:center 58%; }
.fleet-image.grain img { object-position:center 58%; }

.img-tag {
  position:absolute; top:16px; left:16px;
  background:rgba(18,20,21,.72); color:#fff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  padding:8px 11px; border-radius:999px;
  font-size:11px; font-weight:700;
}
.fleet-body {
  padding:25px;
}
.fleet-title {
  display:flex; justify-content:space-between; align-items:start;
  gap:16px; margin-bottom:18px;
}
.fleet-title h3 {
  font-size:27px; line-height:1.1; margin:0;
}
.tag {
  background:#eae7df; color:#50574b;
  border-radius:999px; padding:8px 10px;
  font-size:11px; font-weight:850; white-space:nowrap;
}
.specs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:18px 0;
}
.spec {
  padding:13px; border-radius:13px;
  background:#efede7; border:1px solid #e2ded5;
}
.spec b {
  display:block; font-size:18px; line-height:1.2;
}
.spec span {
  font-size:10px; color:#6b7173;
}
.fleet-body p {
  color:#606669; margin:14px 0 0;
}
.fleet-foot {
  display:flex; justify-content:space-between; gap:16px;
  align-items:center; margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line); font-size:14px;
}
.fleet-foot strong { font-size:14px; }
.price {
  font-weight:850;
}
.price small {
  display:block; color:#707678; font-weight:500; font-size:11px;
}

.benefit-box {
  background:#e6e3da; border:1px solid #d7d2c8;
  border-radius:30px; padding:34px;
}
.benefits {
  display:grid; grid-template-columns:repeat(3,1fr); gap:13px;
}
.benefit {
  background:rgba(255,255,255,.62);
  border:1px solid rgba(23,26,27,.06);
  border-radius:17px; padding:23px; min-height:154px;
}
.benefit small {
  font-size:11px; font-weight:850; color:var(--olive2);
}
.benefit h3 {
  font-size:19px; margin:23px 0 7px;
}
.benefit p {
  margin:0; color:#686e70; font-size:13px;
}

.process {
  display:grid; grid-template-columns:repeat(3,1fr); gap:15px;
}
.step {
  background:var(--paper); border:1px solid rgba(23,26,27,.08);
  border-radius:21px; padding:27px; min-height:215px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.step small {
  font-size:11px; font-weight:850; color:var(--olive2);
}
.step h3 {
  font-size:22px; margin:0 0 8px;
}
.step p {
  margin:0; color:var(--muted);
}
.partner {
  margin-top:17px;
  background:var(--dark); color:#fff;
  border-radius:25px; padding:33px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.partner h3 {
  font-size:29px; line-height:1.1; margin:0 0 9px;
}
.partner p {
  color:rgba(255,255,255,.67); margin:0; max-width:670px;
}

.contacts {
  padding-top:40px; padding-bottom:115px;
}
.contact-box {
  background:var(--paper); border:1px solid rgba(23,26,27,.08);
  border-radius:30px; padding:47px;
  display:grid; grid-template-columns:1.08fr .92fr; gap:32px;
  box-shadow:var(--shadow);
}
.contact-box p {
  font-size:17px; color:var(--muted); max-width:620px;
}
.big-phone {
  display:inline-block; font-size:clamp(28px,3.4vw,44px);
  line-height:1.1; letter-spacing:-.03em; font-weight:900;
  margin-top:14px;
}
.contact-actions {
  display:grid; grid-template-columns:1fr; gap:10px; align-content:center;
}
.contact-actions .btn {
  min-height:59px; font-size:15px;
}
.contact-actions small {
  color:#777; text-align:center; margin-top:3px;
}
.meta {
  grid-column:1/-1; border-top:1px solid var(--line);
  padding-top:20px; margin-top:6px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color:#676d70; font-size:13px;
}
footer {
  padding:22px 0 36px; color:#777d7f; font-size:12px;
}

.mobile-bar {
  display:none; position:fixed; left:9px; right:9px; bottom:9px;
  z-index:150; background:rgba(22,25,26,.96);
  border-radius:17px; padding:7px;
  box-shadow:0 15px 46px rgba(0,0,0,.32);
}
.mobile-bar a {
  flex:1; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:850; min-height:50px; border-radius:11px;
}
.mobile-bar a.viber {
  background:var(--olive);
}

.js .reveal {
  opacity:0; transform:translateY(14px); transition:.5s ease;
}
.js .reveal.show {
  opacity:1; transform:none;
}

@media (max-width: 980px) {
  .navlinks { display:none; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { min-height:auto; }
  .hero-photo { min-height:520px; }
  .gallery-layout { grid-template-columns:1fr; }
  .gallery-main { height:480px; }
  .fleet-card { grid-column:span 12; }
  .benefits { grid-template-columns:repeat(2,1fr); }
  .process { grid-template-columns:1fr; }
  .contact-box { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .container { width:min(calc(100% - 22px), var(--container)); }
  .nav { height:65px; }
  .brand small { display:none; }
  .navright .btn { display:none; }
  .navphone { font-size:12px; }
  .hero { padding-top:14px; }
  .hero-copy { padding:27px 21px; border-radius:23px; }
  h1 { font-size:43px; }
  .hero-copy > p { font-size:16px; }
  .hero-actions .btn { width:100%; }
  .hero-photo { min-height:410px; border-radius:23px; }
  .photo-overlay { left:20px; right:20px; bottom:20px; }
  .photo-overlay h3 { font-size:23px; }
  .photo-badge { display:none; }
  .statbar { grid-template-columns:repeat(2,1fr); padding:20px; border-radius:19px; }
  .stat { padding:10px 13px; }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.14); }
  .stat:nth-child(3) { padding-left:0; }
  section { padding:55px 0; }
  .section-head { display:block; }
  .section-head p { margin-top:13px; }
  .gallery-main { height:340px; }
  .gallery-side { padding:22px; }
  .gallery-thumbs { grid-template-columns:repeat(5,1fr); gap:5px; }
  .gallery-thumb { height:54px; }
  .specs { grid-template-columns:repeat(2,1fr); }
  .fleet-image { height:275px; }
  .benefit-box { padding:17px; border-radius:23px; }
  .benefits { grid-template-columns:1fr; }
  .partner { display:block; padding:25px; }
  .partner .btn { width:100%; margin-top:20px; }
  .contact-box { padding:28px 21px; border-radius:23px; }
  .meta { display:grid; grid-template-columns:1fr; }
  .contacts { padding-bottom:95px; }
  .mobile-bar { display:flex; }
}