:root {
  --primary: #15803d;
  --primary-dark: #166534;
  --secondary: #f97316;
  --light: #f9fafb;
  --dark: #333333;
  --gray: #666666;
  --border-color: #e5e7eb;
  --shadow: 0 2px 4px rgba(0,0,0,.1);
  --border-radius: 8px;
  --transition: all .3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.6;
  color: var(--dark);
  background: #fff;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* -------- HEADER -------- */
header { position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--primary);}
.header-background { box-shadow: var(--shadow); height: 104px; transition: height var(--transition);}
header.compact .header-background { height:48px; }
.header-content { height: 100%; display:flex; flex-direction:column; justify-content:center; transition:padding var(--transition);}
header.compact .header-content { padding:4px 0; }
.header-top {display:flex; align-items:center; justify-content:space-between; padding:8px 0; transition:padding var(--transition);}
.logo {display:flex; align-items:center; text-decoration:none; color:#fff; font-weight:700; font-size:24px; transition: font-size var(--transition); animation:logoAppear 1s ease-out forwards;}
header.compact .logo {display:flex;font-size:22px; margin:0; padding:0;align-items: center;height:48px;}
header.compact .logo span {margin-top: 15px !important;height: auto !important;line-height: 48px;display: inline-block;}
.logo-img {height:50px; margin-right:12px; transition:height var(--transition); animation:logoScale 1s ease-out forwards;}
header.compact .logo-img {margin-top:15px; margin-left:5px; height:40px;}
.header-contacts { display:flex; gap:24px; transition:transform var(--transition),opacity var(--transition);}
header.compact .header-contacts {transform:translateY(-100%); opacity:0; height:0; overflow:hidden;}
.contact-item { display: flex; align-items: center;}
.contact-icon {width:24px; height:24px; margin-right:12px; fill:#fff;}
.contact-text {display:flex; flex-direction:column;}
.contact-label { font-size:14px;color:#fff;transition:font-size var(--transition);}
header.compact .contact-label {font-size:12px;}
.contact-value {font-size:16px;font-weight:600;color:#fff;transition:font-size var(--transition);}
header.compact .contact-value {font-size:14px;}
.header-actions {display:flex; align-items:center; gap:12px;}
.phone-link {font-size:20px; font-weight:700; color:#fff; text-decoration:none; display:flex; align-items:center; transition: font-size var(--transition), opacity var(--transition);}
header.compact .phone-link { font-size:18px; margin-top:15px;margin-right:15px;}
.phone-link .phone-number {display:block;}
.phone-icon {width:24px;height:24px;fill:#fff;display:none;}
.phone-link:hover {color:var(--secondary);}
.hamburger {font-size:28px; background:none; border:none; color:#fff; cursor:pointer; display:none; transition:color var(--transition);}
.hamburger:hover {color:var(--secondary);}
.desktop-menu {display:flex;gap:20px;padding:8px 0;transition:transform var(--transition), opacity var(--transition);}
header.compact .desktop-menu {transform:translateY(-100%); opacity:0; height:0; overflow:hidden;}
.desktop-menu a {font-size:16px; color:#fff; text-decoration:none; font-weight:500; transition:font-size var(--transition);}
header.compact .desktop-menu a {font-size:14px;}
.desktop-menu a:hover { color:var(--secondary);}
.mobile-menu {
  position:fixed; top:0; left:0; height:100%; width:250px; background:var(--primary);
  padding:16px; transform:translateX(-100%); transition:transform var(--transition); z-index:1000;
}
.mobile-menu.active {transform:translateX(0);}
.mobile-menu a {font-size:18px; color:#fff; text-decoration:none; padding:12px 0; display:block; font-weight:500; transition:font-size var(--transition);}
header.compact .mobile-menu a {font-size:16px;}
.mobile-menu a:hover {color:var(--secondary);}

/* Стили для кнопки */
.dropbtn {
    background-color: #15803d;
    color: white;
    padding: 0px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Контейнер для выпадающего списка */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Скрытый контент выпадающего списка */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Стили для ссылок внутри выпадающего списка */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Стили для ссылок при наведении */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}


/* -------- HERO -------- */
.hero {
  background:var(--primary); color:#fff; padding:120px 0 120px;
  position:relative; margin-top:0; background-size:cover; background-position:center; min-height:60vh;
  display:flex; align-items:center; justify-content:center; transition:padding var(--transition);
}
.hero-content {text-align:center; z-index:2; margin-bottom:120px;}
.hero-text h1 {font-size:46px; font-weight:700; margin-bottom:16px;}
.hero-text p {font-size:18px; margin-bottom:24px;}
.btn {padding:12px 24px; font-weight:600; border-radius:var(--border-radius); text-decoration:none; transition: background-color var(--transition);}
.btn-primary {background:var(--secondary); color:#fff;}
.btn-primary:hover {background:#ea580c;}

/* -------- SECTIONS -------- */
.section {padding:64px 0;}
.section-title {font-size:36px; font-weight:700; text-align:center; margin-bottom:16px;}
.section-subtitle {font-size:18px; text-align:center; margin-bottom:32px; color:var(--gray);}
.advantages-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px;}
.advantage-card {background:#fff;padding:24px;border-radius:var(--border-radius);box-shadow:var(--shadow);text-align:center;}
.advantage-icon {font-size:32px;color:var(--secondary);margin-bottom:8px;}
.advantage-card h3 {font-size:20px;font-weight:600;margin-bottom:8px;}
.advantage-card p {font-size:16px;color:var(--gray);}
.services {background:var(--light);}
.cards-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px;}
.card {background:#fff;border-radius:var(--border-radius); box-shadow:var(--shadow); overflow:hidden;}
.card-header {background:var(--primary);color:#fff;padding:16px;text-align:center;}
.card-header h2 {font-size:24px;font-weight:600;}
.card-body {padding:24px;}
.features { list-style: none;}
.features li {font-size:16px; color:var(--dark); margin-bottom:8px; padding-left:24px; position:relative;}
.features li::before {content:'✓';position:absolute;left:0;color:var(--secondary);}
.table-responsive {overflow-x:auto;}
.price-table {width:100%; border-collapse:collapse; margin-bottom:16px;}
.price-table th, .price-table td {padding:12px;text-align:center;border:1px solid var(--border-color);}
.price-table th {background:var(--primary); color:#fff; font-weight:600;}
.price-table td {background:#fff;}
.price-note {font-size:14px;color:var(--gray);text-align:center;}

/* ------------- CALCULATOR -------------- */
.calculator-section {padding:64px 0;}
.calculator-form {max-width:512px; margin:0 auto; background:#fff; padding:24px; border-radius:var(--border-radius); box-shadow:var(--shadow);}
.form-group {margin-bottom:16px;}
.form-group label {display:block; font-size:14px; font-weight:500; margin-bottom:4px;}
.form-input {width:100%; padding:8px; border:1px solid var(--border-color); border-radius:var(--border-radius); font-size:16px;}
.form-input:focus {outline:none; border-color:var(--primary);}
.calc-btn {background:var(--secondary); color:#fff; padding:8px 16px; border:none; border-radius:var(--border-radius); cursor:pointer; display:block; margin:0 auto;}
.calc-btn:hover {background:#ea580c;}
.calculator-result {margin-top:16px;font-size:18px;font-weight:600;color:var(--primary);}
.saved-results {margin-top:24px;}
.saved-results h3 {font-size:20px;margin-bottom:8px;}
.saved-results ul {list-style:none;}
.saved-results li {padding:8px; background:var(--light); border-radius:var(--border-radius);margin-bottom:8px;}
.saved-results button {background:#ef4444; color:#fff; border:none; padding:4px 8px; border-radius:var(--border-radius); cursor:pointer;}
.saved-results button:hover {background:#dc2626;}
.form-group input[type="checkbox"] {margin-right:8px;}

/* ----------- ПОРТФОЛИО ----------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap; /* если много кнопок — они не выходят за рамки */
}
.filter-btn {
  background-color: var(--light);
  color: var(--primary);
  border: none;
  border-radius: var(--border-radius);
  padding: 10px 22px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.23s;
  box-shadow: 0 1px 4px rgba(21,128,61,0.07);
  letter-spacing: 0.5px;
}

.filter-btn.active,
.filter-btn:hover,
.filter-btn:focus {
  background-color: var(--primary);
  color: #fff;
  outline: none;
  box-shadow: 0 2px 8px rgba(21,128,61,0.15);
}
.portfolio-item-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s, transform .45s;
}
.portfolio-item-wrap.visible { opacity: 1; transform: none; }
.portfolio-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: transform .35s, filter .35s;
}
.portfolio-img.lazy { filter: blur(10px);}
.portfolio-item-wrap:hover .portfolio-img {
  transform: scale(1.05);
  filter: brightness(0.85);
}
.portfolio-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 12px 18px;
  font-size: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  width: 100%;
}
.portfolio-item-wrap:hover .portfolio-overlay { opacity: 1; }

@media (max-width: 1199px) {
  .portfolio-grid { grid-template-columns: repeat(2,1fr) !important; }
  .portfolio-img { height: 180px; }
}
@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .portfolio-img { height: 180px; }
}
.more-btn-container {text-align: center;margin-top: 32px;}
.more-btn { margin-top: 32px; background:var(--secondary); color:#fff; padding:12px 24px; border:none; border-radius:var(--border-radius); cursor:pointer; transition:background .3s, transform .3s;}
.more-btn:hover { background:#ea580c; transform:translateY(-2px); }

/* ---- Модалка ---- */
.modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:10000;overflow:auto;}
.modal-content {position:relative;top:50%;left:50%;transform:translate(-50%,-50%);background:transparent;padding:20px;max-width:90%;max-height:90vh;display:flex;align-items:center;justify-content:center;}
.close {position:absolute;top:10px;right:20px;font-size:30px;cursor:pointer;color:#fff;z-index:10001;}
.close:hover {color:var(--secondary);}
.carousel-btn {position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.2);color:#fff;width:50px;height:50px;border:none; border-radius:50%; cursor:pointer; transition:background var(--transition),opacity var(--transition);font-size:20px;}
.carousel-btn:hover {background:rgba(255,255,255,0.4);}
.carousel-btn.prev {left:20px;}
.carousel-btn.next {right:20px;}
.carousel-btn:disabled {opacity:0.5;cursor:not-allowed;}
.modal-img-box {display:flex;flex-direction:column;align-items:center;}
.portfolio-modal-caption {
  text-align: center; color: #fff; background: rgba(0,0,0,0.55); padding: 11px 16px;
  border-radius: var(--border-radius); margin-top: 10px; font-size: 17px;
  min-width: 250px; max-width: 500px; margin-left: auto; margin-right: auto;
}
@media (max-width: 480px) {
  .portfolio-modal-caption { font-size:15px; padding:6px 6px; }
}

/* --------- REVIEWS -------- */
.reviews-section {background:var(--light);}
.reviews-carousel {position:relative;overflow:hidden;padding:0 40px;}
.reviews-track {display:flex;transition:transform 0.5s ease;}
.review-card {min-width:100%;background:#fff;padding:24px;border-radius:var(--border-radius);box-shadow:var(--shadow);margin:0 8px;}
.review-header {display:flex;align-items:center;margin-bottom:16px;}
.review-avatar {width:40px;height:40px;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-right:16px;}
.review-author-info {display:flex;flex-direction:column;}
.review-author {font-weight:600;}
.review-date {font-size:14px;color:var(--gray);}
.review-rating {color:var(--secondary);margin-bottom:8px;}
.review-text {font-size:16px;}
.carousel-btn.reviews {position:absolute;top:50%;transform:translateY(-50%);background:var(--secondary);color:#fff;width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;transition:background var(--transition);}
.carousel-btn.reviews:hover {background:#ea580c;}
.carousel-btn.reviews:disabled {background:#d1d5db;cursor:not-allowed;}
.carousel-btn.reviews.prev {left:0;}
.carousel-btn.reviews.next {right:0;}
.all-reviews-btn {display:block;margin:24px auto 0;color:var(--secondary);font-weight:600;text-decoration:none;text-align:center;position:relative;}
.all-reviews-btn::after {content:"\f0ca";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:8px;transition:transform .3s;}
.all-reviews-btn:hover::after {transform:translateX(4px);}

/* --------- FAQ --------- */
.faq-section {background:var(--light);}
.faq-container {max-width:800px; margin:0 auto;}
.faq-item {margin-bottom:16px;}
.faq-question {display:flex; justify-content:space-between; align-items:center; background:#fff; padding:16px; border-radius:var(--border-radius); cursor:pointer; box-shadow:var(--shadow);}
.faq-question h3 {font-size:18px;font-weight:600;}
.faq-icon {width:24px;height:24px;transition:transform var(--transition);}
.faq-item.active .faq-icon {transform:rotate(180deg);}
.faq-answer {max-height:0;overflow:hidden;padding:0 16px;transition:max-height var(--transition),padding var(--transition);}
.faq-item.active .faq-answer {max-height:500px; padding:16px;}
.faq-answer p { font-size:16px; }

/* --------- CONTACTS --------- */
.contacts-section {background:#f3f4f6;}
.contacts-grid {display:grid;grid-template-columns:1fr;gap:32px;}
.contacts-info p {margin-bottom:8px;}
.contacts-info a {color:var(--secondary);}
.contacts-map {height:256px;background:#d1d5db;border-radius:var(--border-radius);}
.contacts-form h3 {font-size:20px;font-weight:600;margin-bottom:16px;}
.form {max-width:512px;margin:0 auto;}
.form-group {margin-bottom:20px;}
.form-group label {display:block;margin-bottom:8px;font-weight:500;}
.form-control {width:100%;padding:8px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:16px;}
.form-control:focus {outline:none;border-color:var(--primary);}
textarea.form-control {min-height:120px;}

/* --------- FOOTER --------- */
.footer {background:var(--primary);color:#fff;padding:32px 0;text-align:center;}
.footer p {margin-bottom:8px;}

/* --------- SCROLL TO TOP --------- */
.scroll-to-top {
  position:fixed;right:30px;bottom:30px;width:50px;height:50px;background:var(--secondary);color:#fff;border:none;border-radius:50%;cursor:pointer;opacity:0;visibility:hidden;transition:var(--transition);
}
.scroll-to-top.visible {opacity:1;visibility:visible;}
.scroll-to-top:hover {background:#ea580c;}

/* --------- АНИМАЦИЯ СЕКЦИЙ --------- */
.fade-in, .section, .services, .reviews-section, .faq-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible, .section.visible, .services.visible, .reviews-section.visible, .faq-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------- SOCIAL ICONS --------- */
.social-icons {display:flex; gap:16px; justify-content:left; margin-top:16px;}
.social-icons a {color:var(--secondary); font-size:24px; transition:color var(--transition); text-decoration:none;}
.social-icons a:hover {color:#ea580c;}

/* --------- Media Queries --------- */
@media (max-width: 992px) {
  .header-contacts, .desktop-menu {display:none;}
  .hamburger {display:block;}
  .header-background { height: 64px; }
  header.compact .header-background {height:48px;}
  .hero {padding-top:48px;}
  .advantages-grid, .cards-container, .contacts-grid, .portfolio-grid {grid-template-columns:1fr;}
  .phone-link .phone-number {display:none;}
  .phone-icon {display:block;}
  .phone-link {padding:0; width:24px; height:24px; overflow:hidden;}
  .carousel-btn {width:40px; height:40px;font-size:16px;}
  /* Отключение compact-режима на мобильных */
  header.compact {
    height:auto !important; background:var(--primary) !important;
  }
  header.compact .header-background {
    height:auto !important; box-shadow:none !important;
  }
  header.compact .header-content {padding:0 !important;}
  header.compact .logo {font-size:24px !important;}
  header.compact .logo-img {height:50px !important;margin-top:0 !important;margin-left:0 !important;}
  header.compact .header-contacts,
  header.compact .desktop-menu {
    transform:none !important; opacity:1 !important;height:auto !important;overflow:visible !important;
  }
  header.compact .phone-link {
    font-size:20px !important; margin-top:0 !important;margin-right:0 !important;
  }
}
@media (min-width:992px) {
  .hamburger {display:none;}
  .header-background {height:104px;}
  header.compact .header-background {height:48px;}
  .header-top {flex-wrap:nowrap;}
  .desktop-menu {display:flex;}
  .mobile-menu {display:none;}
  .contacts-grid {grid-template-columns:1fr 1fr;}
  .phone-icon {display:none;}
}
@media (max-width: 1199px) {
  .portfolio-grid { grid-template-columns: repeat(2,1fr) !important; }
  .portfolio-img { height: 180px; }
}
@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .portfolio-img { height: 180px; }
}
@media (max-width: 480px) {
  .portfolio-modal-caption { font-size:15px; padding:6px 6px; }
}

/* --- Анимация логотипа --- */
@keyframes logoAppear {
  from {opacity:0;transform:translateY(-10px);}
  to {opacity:1;transform:translateY(0);}
}
@keyframes logoScale {
  from {transform:scale(0.9);}
  to {transform:scale(1);}
}