/* ===========================================================
   GLOBAL VARIABLES — фирменная палитра Coffee-Help
=========================================================== */
:root {
  --coffee: #6A4A3C;      /* коричневый премиум */
  --green: #0A6C58;       /* зеленая кнопка */
  --blue: #00AEEF;        /* голубой акцент */
  --beige: #F4EDE2;       /* бежевый фон */
  --beige-light: #FFF8F1; /* светлый беж */
  --text-dark: #1B1B1B;
  --text-light: #FFFFFF;
  --radius: 16px;
  --shadow: 0 6px 20px rgba(0,0,0,0.08);
  --max: 1200px;
  font-family: -apple-system, Arial, sans-serif;
}

/* ===========================================================
   RESET
=========================================================== */
* { margin:0; padding:0; box-sizing:border-box }
body { background: var(--beige-light); color: var(--text-dark); line-height:1.5; }
img { max-width:100%; display:block }
a { text-decoration:none; color:inherit }

/* ===========================================================
   CONTAINER
=========================================================== */
.container {
  max-width: var(--max);
  margin: auto;
  padding: 0 20px;
}

/* ===========================================================
   HEADER
=========================================================== */
.header {
  background:#fff;
  border-bottom:1px solid #ddd;
  padding:14px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:9999;
}

.header .logo img { height:45px }

.header .phone {
  color:var(--green);
  font-size:20px;
  font-weight:700;
}

/* BURGER */
.burger {
  width:46px;
  height:46px;
  border-radius:var(--radius);
  border:2px solid #ccc;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.burger span {
  display:block;
  width:22px;
  height:3px;
  background:#333;
  border-radius:4px;
}

/* MOBILE MENU */
.mobile-menu {
  position:fixed;
  right:-110%;
  top:0;
  width:80%;
  height:100vh;
  background:#fff;
  padding:40px 20px;
  transition:0.3s ease;
  z-index:99999;
}
body.menu-open .mobile-menu { right:0 }

.mobile-menu a {
  display:block;
  padding:14px 0;
  font-size:20px;
  font-weight:600;
  color:var(--coffee);
}
.close-menu {
  position:absolute;
  top:15px;
  right:15px;
  background:none;
  border:none;
  font-size:40px;
  cursor:pointer;
}

/* ===========================================================
   HERO
=========================================================== */
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:40px 20px;
  max-width:var(--max);
  margin:auto;
  align-items:center;
}
.hero h1 {
  font-size:42px;
  color:var(--coffee);
  margin-bottom:10px;
}
.hero .sub {
  color:#444;
  margin-bottom:16px;
  font-size:18px;
}
.hero-buttons {
  display:flex;
  gap:12px;
  margin-bottom:10px;
}
.btn {
  padding:14px 22px;
  border-radius:var(--radius);
  color:#fff;
  font-weight:700;
  display:inline-block;
}
.btn-call { background:var(--green) }
.btn-wa { background:var(--blue) }

.agree {
  margin-top:10px;
  font-size:13px;
  color:#777;
}

/* ===========================================================
   ADVANTAGES 4 BLOCKS
=========================================================== */
.advantages {
  background:var(--beige);
  padding:30px 20px;
}
.advantages-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  max-width:var(--max);
  margin:auto;
}
.adv-item {
  background:#fff;
  border-radius:var(--radius);
  padding:18px;
  text-align:center;
  box-shadow:var(--shadow);
}
.adv-item img { height:55px; margin:auto; margin-bottom:10px }
.adv-item p { color:var(--coffee); font-weight:600 }

/* ===========================================================
   PROBLEMS
=========================================================== */
.problems { padding:40px 20px }
.problems h2 {
  text-align:center;
  font-size:28px;
  margin-bottom:20px;
  color:var(--coffee);
}
.problems-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.problem {
  background:#fff;
  border-radius:var(--radius);
  padding:16px;
  text-align:center;
  border-left:6px solid var(--blue);
  box-shadow:var(--shadow);
}
.problem img { height:60px; margin:auto; margin-bottom:10px }

/* ===========================================================
   CTA-WIDE
=========================================================== */
.cta-wide {
  background:var(--green);
  text-align:center;
  padding:40px 20px;
  color:#fff;
  margin:40px 0;
}
.cta-wide h2 { font-size:30px; margin-bottom:10px }
.cta-wide p { font-size:18px; margin-bottom:14px }

/* ===========================================================
   WHY US
=========================================================== */
.why-us { padding:40px 20px }
.why-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.why-item {
  background:var(--beige);
  padding:22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.why-item h3 {
  margin-bottom:8px;
  color:var(--coffee);
  font-size:20px;
}

/* ===========================================================
   PRICES
=========================================================== */
.prices {
  padding:50px 20px;
  background:#fff;
}
.prices h2 {
  text-align:center;
  color:var(--coffee);
  font-size:30px;
  margin-bottom:20px;
}
.price-table {
  width:100%;
  max-width:var(--max);
  margin:auto;
  border-collapse:collapse;
}
.price-table tr:nth-child(odd) { background:var(--beige-light) }
.price-table td {
  padding:16px;
  font-size:18px;
}
.price-table td:last-child {
  font-weight:700;
  color:var(--green);
}

/* ===========================================================
   MACHINE TYPES (SLIDER)
=========================================================== */
.machine-types { padding:40px 20px }
.machine-types h2 {
  text-align:center;
  color:var(--coffee);
  margin-bottom:20px;
}

.types-slider {
  display:flex;
  overflow-x:auto;
  gap:16px;
  scroll-behavior:smooth;
  padding-bottom:10px;
}
.type-card {
  background:#fff;
  min-width:230px;
  padding:20px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow);
  font-weight:600;
}

/* ===========================================================
   BRANDS GRID
=========================================================== */
.brands { padding:40px 20px }
.brands-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.brand-card {
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  box-shadow:var(--shadow);
  border:2px solid var(--blue);
  font-weight:600;
  transition:0.2s;
}
.brand-card:hover {
  background:var(--beige);
}

/* ===========================================================
   CASES
=========================================================== */
.cases { padding:40px 20px }
.case-item {
  background:#fff;
  padding:22px;
  border-radius:var(--radius);
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.case-item h3 {
  color:var(--coffee);
  margin-bottom:6px;
}

/* ===========================================================
   REVIEWS
=========================================================== */
.reviews { padding:40px 20px }
.review {
  background:#fff;
  padding:20px;
  border-radius:var(--radius);
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.review .stars {
  color:#FFD700;
  margin-bottom:6px;
  font-size:22px;
}

/* ===========================================================
   SEO TEXT
=========================================================== */
.seo-text {
  padding:40px 20px;
  background:var(--beige);
  border-top:4px solid var(--coffee);
}
.seo-text h2 {
  color:var(--coffee);
  margin-bottom:10px;
  font-size:26px;
}
.seo-text p { margin-bottom:12px }

/* ===========================================================
   FINAL CTA
=========================================================== */
.final-cta {
  background:var(--green);
  text-align:center;
  padding:40px 20px;
  border-radius:var(--radius);
  color:#fff;
  margin:40px 20px;
}
.final-cta h2 {
  font-size:28px;
  margin-bottom:10px;
}

/* ===========================================================
   FOOTER
=========================================================== */
.footer {
  background:var(--coffee);
  color:var(--beige);
  padding:40px 20px;
}
.footer a { color:var(--blue) }

/* ===========================================================
   MOBILE RESPONSIVE
=========================================================== */
@media(max-width:900px) {
  .hero { grid-template-columns:1fr; text-align:center }
  .brands-grid { grid-template-columns:repeat(3,1fr) }
  .why-grid { grid-template-columns:1fr }
  .problems-grid { grid-template-columns:repeat(2,1fr) }
  .advantages-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:600px) {
  .brands-grid { grid-template-columns:repeat(2,1fr) }
  .problems-grid, .advantages-grid { grid-template-columns:1fr }
  .type-card { min-width:180px }
}