/* ------------------- */
/*   БАЗОВЫЕ СТИЛИ     */
/* ------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('responsive.css');

:root {
  --accent-color: #F7DDE0;         /* Blush Rose */
  --accent-color-dark: #E6D3B3;    /* Champagne Gold */
  --text-color: #3A3A3A;           /* Charcoal */
  --bg-color: #FAF7F5;             /* Warm White */
  --bg-section: #fff;              /* Белый для секций */
  --green-accent: #B7C6B4;         /* Sage Green */
  --font-main: 'Montserrat', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --border-color: #E6D3B3;         /* Champagne Gold */
  --card-shadow: 0 2px 16px rgba(183, 198, 180, 0.07);
}

/* --- Базовые стили --- */
body {
  font-family: var(--font-main);
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.02em;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------- */
/*   HEADER            */
/* ------------------- */

header {
  background: var(--bg-section);
  padding: 0;
}

.header-two-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 15px 24px 15px;
  border-bottom: 1px solid #bbb;
  background: #fff;
  gap: 20px;
}

.header-col {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-col-left {
  flex: 1 1 0;
  justify-content: space-between;
  color: #444;
  font-size: 1.08rem;
  gap: 32px;
}

.header-address {
  color: #444;
  font-size: 1.08rem;
}

.header-mail {
  color: #222;
  text-decoration: none;
  font-size: 1.08rem;
  transition: color 0.2s;
}

.header-mail:hover {
  color: #976f6fff;
}

.header-col-center {
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 48px;
}

.header-logo {
  height: 50px;
  max-width: 140px;
  display: block;
  margin: 0 auto;
  filter: none;
}
.header-logo img{
  width: 100%;
  height: 100%;
}

.header-col-right {
  flex: 1 1 0;
  justify-content: space-between;
  gap: 18px;
  color: #222;
  font-size: 1.08rem;
  align-items: center;
}

.header-phone {
  color: #222;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.08rem;
  transition: color 0.2s;
}

.header-phone:hover {
  color: #976f6fff;
}

.header-time {
  color: #888;
  font-size: 1.02rem;
}

/* Social Icons */
.header-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f7dde0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: #b85c7c;
  position: relative;
}

.social-icon svg,
.social-icon img {
  width: 20px;
  height: 20px;
}

.social-icon:hover {
  background: #b85c7c;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(184, 92, 124, 0.3);
}

.social-icon:hover img {
  filter: brightness(0) invert(1);
}

/* Phone Tooltip */
.phone-icon {
  position: relative;
}

.phone-tooltip {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
}

.phone-icon:hover .phone-tooltip {
  opacity: 1;
  visibility: visible;
  bottom: -55px;
  pointer-events: auto;
}

.phone-number {
  user-select: all;
  cursor: text;
}

.copy-phone-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-phone-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.copy-phone-btn:active {
  transform: scale(0.95);
}

.copy-phone-btn svg {
  pointer-events: none;
}

.call-btn {
  background: #fff;
  color: var(--accent-color-dark);
  transition: color 0.2s, color 0.2s, border 0.2s;
  margin-right: 10px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.call-btn:hover {
  color: var(--text-color);
}

.header-bottom {
  padding: 0;
  background: #fff;
  border-bottom: 1px solid #bbb;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
  padding: 22px 0 18px 0;
  margin: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  
  text-transform: uppercase;
}

nav ul li:not(:last-child)::after {
  content: "";
  display: inline-block;
  background-color: var(--green-accent);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: 32px;
  margin-right: 0;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

nav a {
  color: var(--text-color);
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 18px;
}

nav a:hover {
  background: var(--accent-color);
  color: var(--text-color);
  
}

/* Бургер меню */
.burger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}

.burger-menu span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 3px;
  background: var(--text-color);
  border-radius: 2px;
  transform-origin: center center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  display: block;
}

/* Позиции для трёх линий в обычном состоянии */
.burger-menu span:nth-child(1) {
  top: 12px;
  transform: translateX(-50%);
}

.burger-menu span:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.burger-menu span:nth-child(3) {
  bottom: 12px;
  transform: translateX(-50%);
}

/* Активное состояние: идеальный крестик */
.burger-menu.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.burger-menu.active span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.burger-menu.active span:nth-child(3) {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Мобильное меню */
.header-nav {
  position: static;
}

.header-nav ul {
  flex-wrap: wrap;
}

/* Адаптив - таблетки и мобилка */
/* Media queries moved to responsive.css */

/* ------------------- */
/*   ГЛАВНАЯ СТРАНИЦА  */
/* ------------------- */

.hero {
  height: 100vh;
  min-height: 600px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url("/assets/img/hero-bg.jpg"); /* поместите здесь ваше фото */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  max-width: 1200px;
  margin: 15px auto;
  padding: 0 20px;
}

/* лёгкая затемняющая подложка для контраста */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 0;
}

/* центральная карточка поверх фона */
.hero-inner {
  position: relative;
  z-index: 2;
  background: rgba(247, 221, 224, 0.5); /* более прозрачный полупрозрачный розовый блок */
  padding: 36px 56px;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  text-align: center;
  max-width: 840px;
  width: calc(100% - 40px);
}

/* заголовок внутри карточки */
.hero-inner h1 {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  line-height: 1.05;
  color: #6d3f3f;
  margin: 0 0 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* небольшой подзаголовок под заголовком */
.hero-sub {
  font-family: var(--font-heading);
  color: #8b6161;
  font-size: 1.55rem;
  margin-bottom: 18px;
  font-weight: 400;
}

/* кнопка в карточке */
.hero-inner .btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 28px;
  background: #e6d3b3;
  color: #3a2c35;
  text-decoration: none;
  font-weight: 600;
  border: none;
}

/* ------------------- */
/*   HOW WE WORK       */
/* ------------------- */

.how-we-work {
  background: #fff;
  border-radius: 18px;
  container-type: inline-size;
  box-shadow: var(--card-shadow);
  padding: 44px 18px 38px 18px;
  max-width: 1100px;
  margin: 0 auto 40px auto;                                                                             
}

.how-we-work h2 {
  font-family: var(--font-heading);
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  color: #b85c7c;
  margin-bottom: 36px;
  letter-spacing: 0.03em;
}

.how-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px 32px; /* row-gap column-gap */
  
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: linear-gradient(180deg, #fff7fa 0%, #fff 100%);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(224,122,155,0.06);
  padding: 22px 18px;
  min-height: 180px;
  transition: box-shadow 0.2s;
  flex: 0 0 calc((100% - 32px) / 2); /* two columns: (100% - column-gap)/2 */
  box-sizing: border-box;
  max-width: calc((100% - 32px) / 2);
}
.how-step:hover {
  box-shadow: 0 8px 32px rgba(224,122,155,0.12);
}

.step-image {
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  width: 90px;
  background: #f7dde0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(224,122,155,0.08);
}

.step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.step-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step-content h3 {
  font-size: 1.18rem;
  color: #b85c7c;
  font-weight: 600;
  margin: 0 0 8px 0;
  letter-spacing: 0.01em;
}

.step-content p {
  color: #3a2c35;
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.6;
}

/* Адаптив для блока "Крок за кроком" */


.btn {
  background: var(--accent-color-dark);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
  border: none;
}

.btn:hover {
  background: var(--green-accent);
  color: var(--text-color);
}

section {
  background: var(--bg-section);
  border-radius: 18px;
  margin-bottom: 40px;
  box-shadow: var(--card-shadow);
}

section h2 {
  color: var(--green-accent);
}

.steps, .why-us, .numbers, .tour, .portfolio-preview {
  text-align: center;
}

.numbers div {
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.why-us ul {
  list-style: none;
  padding: 0;
}

.why-us li {
  margin: 10px 0;
  font-size: 1.1rem;
}

/* ------------------- */
/*   ФОРМЫ             */
/* ------------------- */

form {
  max-width: 500px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Улучшенные стили для callback-form (читаемость, округлые поля, тени на фокус) */
.callback-form {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 1rem;
}

/* Каждый label — блочный, чтобы текст и поле располагались вертикально и читабельно */
.callback-form label {
  display: block;
  font-size: 0.98rem;
  color: #6b4a5a;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Группировка полей в ряд (двухколоночная) оставляем, но увеличиваем gap */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-row.form-row-2col {
  flex-direction: row;
  gap: 18px;
}
.form-row.form-row-2col label {
  flex: 1 1 0;
  margin-bottom: 0;
  min-width: 0;       /* added: allows inputs to shrink and prevents overlap */
}

/* Поля ввода и textarea — округлые, с внутренними отступами */
.callback-form input,
.callback-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(230, 211, 179, 0.9);
  background: #fff;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.4;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

/* Текстовое поле чуть выше по высоте */
.callback-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Тень и акцентная рамка при фокусе */
.callback-form input:focus,
.callback-form textarea:focus {
  border-color: var(--green-accent);
  box-shadow: 0 10px 30px rgba(183, 198, 180, 0.12);
  transform: translateY(-1px);
}

/* Сбрасываем красную подсветку валидации (если оставлена в JS) */
.callback-form input.invalid,
.callback-form textarea.invalid {
  border-color: #e06f75;
  box-shadow: 0 6px 18px rgba(224, 122, 155, 0.12);
}

/* Кнопка отправки — крупнее, округлая и с эффектом */
.callback-form button[type="submit"] {
  align-self: flex-start;
  padding: 12px 72px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--accent-color-dark), #d7c3a0);
  color: var(--text-color);
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(183, 198, 180, 0.12);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Hover/active для кнопки */
.callback-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(183, 198, 180, 0.16);
}
.callback-form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(183, 198, 180, 0.08);
}

/* ------------------- */
/*   ПОРТФОЛИО         */
/* ------------------- */

.portfolio-page {
  background: transparent;
}

.portfolio-hero {
  text-align: center;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
}

.portfolio-hero h1 {
  font-family: var(--font-heading);
  color: var(--green-accent);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}

.portfolio-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  border: 1.5px solid var(--border-color);
}

.portfolio-meta {
  color: #8fa18e;
}

.portfolio-link {
  color: var(--green-accent);
  border: 1.5px solid var(--accent-color-dark);
  background: #fff;
}

.portfolio-link:hover {
  background: var(--accent-color-dark);
  color: var(--text-color);
  border-color: var(--green-accent);
}

/* portfolio preview на главной */
.portfolio-preview {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 44px 18px;
  text-align: center;
}

.portfolio-preview h2 {
  font-family: var(--font-heading);
  color: #b85c7c;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: 0.03em;
}

.portfolio-preview #portfolio-cards {
  margin-bottom: 32px;
}

/* ------------------- */
/*   О НАС             */
/* ------------------- */

.about-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 16px 64px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(224, 122, 155, 0.04);
}
.creator-grid {
  display: grid;
  /* allow the photo column to adapt but not grow beyond 420px so
     the image keeps natural proportions while the text column fills remaining space */
  grid-template-columns: minmax(180px, 420px) 1fr;
  gap: 32px;
  align-items: start;
  grid-auto-rows: auto;
  max-width: 1100px;
  margin: 0 auto 8px auto;
  padding: 12px;
}
.creator-photo {
  width: 100%;
  max-width: 420px;                 /* don't exceed this width */
  height: auto;                     /* preserve original aspect ratio */
  object-fit: contain;              /* show whole image without cropping */
  border-radius: 14px;
  box-shadow: 0 6px 30px rgba(120, 90, 110, 0.08);
  display: block;
  margin: 0 auto;                   /* center image in its grid cell */
}
.creator-info {
  display: flex;               /* now a flex container */
  flex-direction: column;
  background: linear-gradient(180deg,#ffffff 0%, #fffafc 100%);
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 2px 16px rgba(224,122,155,0.03);
}
.creator-badge {
  display: inline-block;
  background: #e8f5ff;
  color: #30092eff;
  font-weight: 700;
  
  border-radius: 8px;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.creator-name {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: #b85c7c;
  font-weight: 500;
  margin-bottom: 6px;
}
.creator-role {
  color: #7a5d2d;
  font-size: 1rem;
  margin-bottom: 12px;
}
.creator-desc {
  color: #3a2c35;
  line-height: 1.7;
  font-size: 1.03rem;
  flex: 1 1 auto;             /* fills available height */
  overflow: auto;             /* adds scrolling if content overflows */
  padding-right: 6px;
}

/* Адаптивные стили для экранов с шириной до 900px */
/* Media queries moved to responsive.css */

/* ------------------- */
/*   FAQ / Q&A         */
/* ------------------- */

.faq-block {
  margin: 48px 0 32px 0;
}
.faq-title {
  font-family: var(--font-heading);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  color: #b85c7c;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.faq-desc {
  text-align: center;
  color: #7a5d2d;
  font-size: 1.02rem;
  margin-bottom: 24px;
}
.faq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

/* Карточка FAQ — "лежит на столе" */
.faq-item {
  background: linear-gradient(180deg, #fff 0%, #fff7fa 100%);
  border-radius: 12px;
  padding: 20px 22px;
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 380px;
  font-size: 1.02rem;
  color: #3a2c35;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: perspective(1000px) rotateX(2.2deg);
  transition: transform 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
  box-shadow:
    0 2px 8px rgba(224,122,155,0.04),
    0 8px 18px rgba(0,0,0,0.06);
}
.faq-item:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 4px 12px rgba(224,122,155,0.06),
    0 18px 36px rgba(0,0,0,0.12);
}
.faq-q {
  font-weight: 700;
  color: #b85c7c;
  margin-bottom: 4px;
  font-size: 1.03rem;
}
.faq-a {
  color: #6b4a5a;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ------------------- */
/*   TEAM / Команда    */
/* ------------------- */

.team-block {
  margin-top: 56px;
  text-align: center;
}
.team-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #bfa57a;
  font-weight: 500;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.team-grid {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Увеличенные карточки участников (примерно 1.5-2x шире) */
.team-member {
  background: #fff7fa;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(224, 122, 155, 0.04);
  padding: 22px 20px;
  max-width: 380px;       /* увеличено (ранее было ~220px) */
  flex: 1 1 320px;        /* базовая ширина при флекс-росте */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-photo {
  width: 160px;           /* увеличено — более заметные фото членов команды */
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(224,122,155,0.08);
}
.team-name {
  font-weight: 700;
  color: #b85c7c;
  margin-bottom: 6px;
  font-size: 1.12rem;
}
.team-role {
  color: #7a5d2d;
  font-size: 1rem;
  margin-bottom: 10px;
}
.team-desc {
  color: #6b4a5a;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
  max-width: 320px;
}

/* Адаптив для FAQ и Team */
/* Media queries moved to responsive.css */

/* ------------------- */
/*   КОНТАКТЫ          */
/* ------------------- */

.contacts-page {
  position: relative;
  min-height: 80vh;
  background: #fff;
  padding: 60px 0 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.contacts-content {
  display: flex;
  max-width: 1100px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(80,60,40,0.08);
  position: relative;
  z-index: 2;

  gap: 32px;          /* added: spacing between form and image */
  flex-wrap: wrap;    /* added: allow wrapping on narrow screens to avoid overlap */
  align-items: flex-start;
}

.contacts-form-block {
  flex: 1 1 560px;    /* changed: give form a reliable base width and allow shrink/grow */
  min-width: 320px;   /* added: prevent form from getting too narrow */
  padding: 36px;      /* slightly reduced padding to fit better */
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacts-image-block {
  flex: 0 0 440px;    /* changed: image block keeps fixed visual width */
  max-width: 440px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  min-width: 200px;
  padding: 0;
}

/* ------------------- */
/*   WHY-US SLIDER     */
/* ------------------- */

.why-us-slider {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  padding: 44px 18px 38px 18px;
  max-width: 1200px;
  margin: 0 auto 40px auto;
  text-align: center;
}
.why-us-slider h2 {
  font-family: var(--font-heading);
  color: #b85c7c;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: 0.03em;
}
.why-slider {
  /* Use a three-column grid: left arrow / slides / right arrow.
     This makes the arrows vertically align to the center of the slides
     because the grid rows size to the slides' content. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;       /* vertical centering of grid items */
  justify-items: center;
  gap: 0;
  position: relative;
  width: 100%;
}
.why-arrow {
  background: #f7dde0;
  border: none;
  color: #b85c7c;
  font-size: 1.15rem; /* slightly smaller for better fit */
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
  margin: 0 12px;
  box-shadow: 0 2px 8px rgba(224,122,155,0.08);
  display: flex;
  padding: 0; /* remove bottom padding that misaligns glyph */
  align-items: center;
  justify-content: center;
  line-height: 1; /* ensure no extra line-height shifts */
  overflow: hidden;
}
.why-arrow:hover {
  background: #e6d3b3;
  color: #6d3f3f;
}

/* SVG arrow icon inside the circular button */
.why-arrow .why-arrow-icon {
  margin-right: -1.5px; /* slight left adjustment for visual centering */
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor; /* inherit button color */
}

/* flip the same SVG for the left arrow */
.why-arrow.why-arrow-left .why-arrow-icon {
  transform: rotate(180deg);
  margin-right: 0px;
  margin-left: -1.5px;
}
.why-slides {
  /* Let the slides container size itself to the slides' content (image).
     Use grid so child slides can overlap while the container still
     participates in normal flow (so arrows align to its center). */
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: visible;
  display: grid;
  align-items: center;
  justify-items: center;
}
.why-slide {
  /* Stack slides on top of each other in the grid cell while keeping
     the container height determined by slide content (the image). */
  position: relative;
  grid-area: 1 / 1 / 2 / 2; /* overlap all slides in the same grid cell */
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.why-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.why-slide.fade-in {
  animation: whyFadeIn 0.4s;
}
.why-slide.fade-out {
  animation: whyFadeOut 0.4s;
}

@keyframes whyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes whyFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.why-slide img {
  width: 100%;
  max-width: 700px;   /* base image size */
  aspect-ratio: 1 / 1; /* keep consistent square size across slides */
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(224,122,155,0.08);
  margin-bottom: 18px;
}
.why-caption {
  color: #7a5d2d;
  font-size: 1.13rem;
  font-weight: 600;
  background: #fff7fa;
  border-radius: 8px;
  padding: 10px 18px;
  box-shadow: 0 2px 8px rgba(224,122,155,0.04);
  display: inline-block;
}

.why-pagination {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.why-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e6d3b3;
  cursor: pointer;
  transition: background 0.2s;
  vertical-align: middle;
}
.why-dot.active {
  background: #b85c7c;
}

/* Адаптив */
/* Media queries moved to responsive.css */

/* ------------------- */
/*   FOOTER (fixed)    */
/* ------------------- */

/* ------------------- */
/*   FOOTER            */
/* ------------------- */

.site-footer {
  background: linear-gradient(180deg, #FAF7F5 0%, #F5F0EB 100%);
  color: #4A4544;
  padding: 80px 0 0 0;
  font-size: 1rem;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #E6D3B3 20%, #E6D3B3 80%, transparent 100%);
  opacity: 0.6;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 50px 40px;
}

/* About Column */
.footer-col-about {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
  flex: 1 1 300px;
}

.footer-logo-wrap {
  margin-bottom: 4px;
}

.footer-logo {
  width: 110px;
  height: auto;
  border-radius: 8px;
  opacity: 0.95;
}

.footer-desc {
  color: #7A7370;
  font-size: 0.93rem;
  line-height: 1.75;
  margin-bottom: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E6D3B3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-icon img {
  width: 17px;
  height: 17px;
  filter: brightness(0) saturate(100%) invert(50%) sepia(8%) saturate(500%) hue-rotate(70deg);
  transition: all 0.35s;
}

.footer-social-icon:hover {
  background: #F7DDE0;
  border-color: #F7DDE0;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(183, 198, 180, 0.25);
}

.footer-social-icon:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(20%) saturate(600%) hue-rotate(320deg);
}

/* Navigation Column */
.footer-col-nav,
.footer-col-services {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 200px;
}

.footer-title {
  font-size: 1rem;
  font-weight: 600;
  color: #3A3A3A;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.footer-nav-list,
.footer-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-nav-list li a,
.footer-services-list li {
  color: #6A6562;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  display: inline-block;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.footer-nav-list li a:hover {
  color: #B7C6B4;
  transform: translateX(4px);
}

.footer-services-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.footer-services-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #E6D3B3;
  font-size: 0.9rem;
  top: 0;
  font-weight: 300;
}

/* Contacts Section - Below Main Columns */
.footer-col-contacts {
  flex: 1 1 100%;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 40px;
  border-top: 1px solid rgba(230, 211, 179, 0.4);
  margin-top: 20px;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: flex-start;
  text-align: left;
}

.footer-contact-item {
  display: flex !important;
  gap: 12px;
  color: #4A4544;
  font-size: 0.93rem;
  line-height: 1.5;
  visibility: visible !important;
  opacity: 1 !important;
}

.footer-icon {
  width: 20px;
  height: 20px;
  margin-right: 40px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(67%) sepia(12%) saturate(800%) hue-rotate(70deg) opacity(100%);
}

.footer-contact-item a {
  color: #4A4544;
  text-decoration: none;
  transition: color 0.25s ease;
  font-weight: 400;
}

.footer-contact-item a:hover {
  color: #B7C6B4;
}

/* Footer Separator */
.footer-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #E6D3B3 50%, transparent 100%);
  margin: 0;
  opacity: 0.5;
  width: 100%;
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;
}

.footer-copy {
  color: #9A8F8A;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.footer-legal-link {
  color: #9A8F8A;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.25s ease;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.footer-legal-link:hover {
  color: #B7C6B4;
}

/* Old styles - to be removed or migrated */
.footer-col {
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Responsive tweaks: media queries moved to responsive.css */

/* ------------------- */
/*   BLOG -- PAGES */
/* ------------------- */
.post {
  max-width: 1100px;
  margin: 48px auto;
  padding: 36px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.post h1 {
  font-size: 2.2rem;
  color: #3a2c35;
  margin-bottom: 8px;
}
.post .lead {
  color: #6b4a5a;
  margin-bottom: 20px;
  line-height: 1.6;
}
.post h2 {
  color: #b85c7c;
  margin-top: 24px;
  margin-bottom: 10px;
}
.post p {
  color: #3a2c35;
  line-height: 1.7;
  margin-bottom: 14px;
}
.post ul {
  margin: 12px 0 20px 24px;
  color: #3a2c35;
  line-height: 1.7;
}
.post li { margin-bottom: 6px; }
.post-gallery {
  position: relative;
  max-width: 1100px;
  margin: 32px 0;
  padding: 0 40px;
}
.gallery-container { overflow: hidden; margin: 0 -12px; }
.gallery-track { display: flex; transition: transform 0.4s ease; }
.gallery-slide { min-width: calc(33.333% - 24px); margin: 0 12px; }
.gallery-slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b85c7c;
  font-size: 1.5rem;
  transition: transform 0.2s;
}
.gallery-arrow:hover { transform: translateY(-50%) scale(1.1); }
.gallery-prev { left: -4px; }
.gallery-next { right: -4px; }
.gallery-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s;
}
.btn {
      display: inline-block;
      margin: 8px 0;
      padding: 10px 16px;
      background-color: #b85c7c;
      color: #fff;
      text-decoration: none;
      border-radius: 8px;
      transition: background 0.3s;
}
.btn:hover { background-color: #a04e69; }
.gallery-dot.active { background: #b85c7c; }

/* Why-us slider responsive styles */
@media (max-width: 768px) {
  .why-arrow {
    display: none; /* Скрываем стрелки на мобильных */
  }
  .why-slider {
    grid-template-columns: 1fr; /* Убираем колонки для стрелок */
    padding: 0;
  }
  .why-us-slider {
    padding: 32px 16px 28px 16px; /* Уменьшаем padding секции */
  }
  .why-slides {
    max-width: 100%;
    padding: 0; /* Убираем дополнительный padding */
  }
  .why-slide img {
    max-width: 100%;
    height: auto;
  }
  .why-caption {
    font-size: 0.95rem;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .why-us-slider {
    padding: 24px 12px 20px 12px; /* Еще меньше padding для маленьких экранов */
  }
  .why-slides {
    padding: 0;
  }
  .why-caption {
    font-size: 0.9rem;
    padding: 10px 12px;
  }
}

/* Blog gallery responsive styles */
@media (max-width: 1100px) {
  .gallery-slide { min-width: calc(50% - 24px); }
}
@media (max-width: 768px) {
  .gallery-slide { min-width: calc(50% - 24px); }
  .gallery-slide img { height: 240px; }
  .post-gallery { padding: 0 32px; }
  .gallery-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
}
@media (max-width: 600px) {
  .gallery-slide { min-width: calc(100% - 24px); }
  .gallery-slide img { height: 280px; }
}
@media (max-width: 480px) {
  .gallery-slide { min-width: calc(100% - 16px); }
  .gallery-slide img { height: 280px; }
  .post-gallery { 
    padding: 0 12px;
    margin: 24px 0;
  }
  .gallery-container { margin: 0 -8px; }
  .gallery-slide { 
    min-width: calc(100% - 16px); 
    margin: 0 8px;
  }
  .gallery-arrow {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.95);
  }
  .gallery-prev { left: 8px; }
  .gallery-next { right: 8px; }
  .gallery-pagination {
    margin-top: 16px;
    gap: 6px;
  }
  .gallery-dot {
    width: 10px;
    height: 10px;
  }
}

/* ------------------- */
/*   FOOTER — REDESIGN */
/* ------------------- */

/* Цветовая палитра по ТЗ */
:root {
  --footer-bg: #E6EFE7;
  --panel-bg: #C9D8C9;
  --accent: #C9A76A;
  --footer-dark: #2F2C2B;
  --text-main: #222426;
  --text-secondary: #59615E;
  --serif: 'Playfair Display', serif;
  --sans: 'Montserrat', sans-serif;
}

.site-footer {
  background: var(--footer-bg);
  color: var(--text-main);
  font-family: var(--sans);
  padding: 32px 0 0 0;
}

/* Main container: flexbox layout */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 20px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}

/* Left column: logo + desc */
.footer-col-logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  flex: 1 1 320px;
  min-width: 280px;
}
.footer-logo-wrap {
  background: #fff;
  padding: 6px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.footer-logo {
  width: 120px;
  height: auto;
  display: block;
}
.footer-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 380px;
}
.footer-plan {
  width: 140px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  opacity: 0.9;
}

/* Center: navigation columns (2x2 grid) */
.footer-col-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  align-items: start;
  flex: 2 1 400px;
  min-width: 320px;
}
.footer-links-group {
  min-width: auto;
}
.footer-links-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 6px;
  font-weight: 600;
}
.footer-links-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}
.footer-links-group li {
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.footer-links-group li:hover {
  background: rgba(201,167,106,0.08);
  color: var(--footer-dark);
  cursor: pointer;
}

/* Right: contacts */
.footer-col-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  flex: 0 1 280px;
  min-width: 240px;
}
.footer-contact { 
  color: var(--text-main); 
  font-size: 0.95rem; 
  line-height: 1.35;
}
.footer-contact-address { 
  color: var(--text-secondary);
  font-size: 0.91rem;
  line-height: 1.4;
}
.footer-contact-phone, .footer-contact-mail { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  color: var(--text-main); 
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.footer-contact-phone-text, .footer-contact-mail-text {
  display: inline-block;
}
.footer-contact-phone svg, .footer-contact-mail svg { 
  display: inline-block; 
  vertical-align: middle; 
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.footer-contact-time {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 2px;
}

/* CTA button: white with thin gold border and shadow */
.footer-call-btn {
  display: block;
  width: 100%;
  background: #fff;
  color: var(--text-main);
  border: 1.5px solid var(--accent);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 4px;
}

/* Separator between main and bottom */
.footer-separator {
  height: 1px;
  background: rgba(47,44,43,0.08);
  margin: 0;
}

/* Bottom dark bar */
.footer-bottom {
  background: var(--footer-dark);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  margin-top: 0;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.02);
}
.footer-copy { 
  font-size: 0.86rem; 
  color: #e6dfcf; 
}
.footer-legal-link { 
  color: #e6dfcf; 
  text-decoration: none;
  font-size: 0.86rem;
}
.footer-legal-link:hover { 
  text-decoration: underline; 
  color: #fff; 
}

/* Accessibility: ensure contrast - headings use serif */
.footer-links-title, .footer-copy { 
  font-family: var(--serif); 
}

/* Responsive tweaks: media queries moved to responsive.css */

/* ------------------- */
/*   АЛЬБОМЫ           */
/* ------------------- */

.portfolio-albums {
  padding: 60px 20px;
  background: transparent;
}

.albums-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center; /* центрирование ряда, если он не заполнен */
}

.album-wrapper {
  display: flex;
  justify-content: center;
  flex: 0 1 320px; /* фиксируем минимальную ширину карточки при флекс-расположении */
}

.album-card {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;
}

.album-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.album-cover {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: #f0f0f0;
}

.album-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.album-card:hover .album-cover img {
  transform: scale(1.05);
}

.album-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-card:hover .album-overlay {
  opacity: 1;
}

.album-link {
  display: inline-block;
  padding: 10px 24px;
  background: #fff;
  color: var(--green-accent);
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.album-link:hover {
  background: var(--accent-color-dark);
  color: #fff;
}

.album-info {
  padding: 20px;
  text-align: center;
}

.album-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-accent);
  letter-spacing: 0.3px;
}

.album-count {
  margin: 0;
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

/* Responsive для альбомов */
/* Media queries moved to responsive.css */

/* ------------------- */
/*   МОДАЛЬНЫЙ СЛАЙДЕР */
/* ------------------- */

.album-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.album-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.album-modal.active .modal-overlay {
  opacity: 1;
}

.modal-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 0;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}

.album-modal.active .modal-content {
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  z-index: 3;
  transition: color 0.2s ease;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #E6D3B3;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.slider-image {
  max-width: 90%;
  max-height: 80vh;
  object-fit: contain;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.slider-counter {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

.slider-controls {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
}

.slider-btn {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
  pointer-events: all;
  user-select: none;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.slider-btn:active {
  transform: scale(0.95);
}

.slider-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  max-width: 400px;
}

.slider-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

/* ============================= */
/*   МОДАЛЬНЫЙ СЛАЙДЕР — МОБИЛА  */
/* ============================= */
@media (max-width: 768px) {
  .album-modal.active {
    align-items: stretch;
    justify-content: stretch;
  }

  .modal-content {
    width: 100vw;
    height: 100dvh;
    padding: 0;
  }

  .modal-close {
    top: env(safe-area-inset-top, 16px);
    right: env(safe-area-inset-right, 16px);
    font-size: 34px;
    width: 44px;
    height: 44px;
  }

  .slider-container {
    padding: 0 12px;
  }

  .slider-image {
    max-width: calc(100% - 20px);
    max-height: calc(100dvh - 140px);
  }

  .slider-controls {
    bottom: 50%;
    transform: translateY(50%);
    padding: 0 12px;
  }

  .slider-btn {
    font-size: 28px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
  }

  .slider-counter {
    bottom: env(safe-area-inset-bottom, 16px);
    right: calc(env(safe-area-inset-right, 16px) + 8px);
    font-size: 13px;
    padding: 8px 12px;
    margin-right: 8px;
    border-radius: 6px;
  }

  .slider-info {
    bottom: env(safe-area-inset-bottom, 16px);
    left: calc(env(safe-area-inset-left, 16px) + 8px);
    max-width: min(80vw, 420px);
    padding: 10px 12px;
  }

  .slider-info h3 {
    font-size: 16px;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .modal-close {
    font-size: 30px;
    width: 40px;
    height: 40px;
    top: env(safe-area-inset-top, 12px);
    right: calc(env(safe-area-inset-right, 12px) + 6px);
  }

  .slider-btn {
    font-size: 24px;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .slider-controls {
    padding: 0 10px;
  }

  .slider-counter {
    font-size: 12px;
    padding: 6px 10px;
    right: calc(env(safe-area-inset-right, 16px) + 10px);
  }

  .slider-info {
    max-width: 75vw;
    padding: 8px 10px;
    left: calc(env(safe-area-inset-left, 16px) + 10px);
  }

  .slider-image {
    max-width: calc(100% - 20px);
    max-height: calc(100dvh - 160px);
  }
}

/* ------------------- */
/*   SERVICES PAGE     */
/* ------------------- */

/* Hero Section */
.services-hero {
  background: linear-gradient(135deg, #f7dde0 0%, #e6d3b3 100%);
  padding: 80px 20px;
  text-align: center;
  margin-bottom: 60px;
}

.services-hero-inner h1 {
  font-size: 2.5rem;
  color: #b85c7c;
  margin-bottom: 16px;
  font-weight: 700;
}

.services-subtitle {
  font-size: 1.2rem;
  color: #6d3f3f;
  font-weight: 400;
}

/* Services Content */
.services-content {
  padding-bottom: 60px;
}

.services-content .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Service Item */
.service-item {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
}

.service-item-reverse {
  flex-direction: row-reverse;
}

.service-text {
  flex: 1;
  position: relative;
}

.service-number {
  font-size: 5rem;
  font-weight: 700;
  color: #f7dde0;
  line-height: 1;
  margin-bottom: 12px;
  user-select: none;
}

.service-text h2 {
  font-size: 2rem;
  color: #b85c7c;
  margin-bottom: 20px;
  font-weight: 700;
}

.service-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 16px;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.service-list li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.service-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #b85c7c;
  font-size: 0.9rem;
}

.service-highlight {
  background: #f7dde0;
  padding: 16px 20px;
  border-radius: 12px;
  margin-top: 20px;
  font-style: italic;
  color: #6d3f3f;
}

.service-image {
  flex: 0 0 480px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(184, 92, 124, 0.15);
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA Section */
.service-cta {
  background: linear-gradient(135deg, #b85c7c 0%, #e07a9b 100%);
  border-radius: 18px;
  padding: 60px 40px;
  display: flex;
  gap: 40px;
  align-items: center;
  color: #fff;
  margin-top: 40px;
}

.service-cta-content {
  flex: 1;
}

.service-cta .service-number {
  color: rgba(255, 255, 255, 0.2);
}

.service-cta h2 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 16px;
  font-weight: 700;
}

.service-cta p {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.service-cta-contact {
  margin-top: 24px;
}

.service-cta-contact p strong {
  font-weight: 700;
}

.service-cta-contact a[href^="mailto"] {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

.service-cta .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 32px;
  background: #fff;
  color: #b85c7c;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-cta .btn:hover {
  background: #f7dde0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.service-cta-image {
  flex: 0 0 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.service-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------- */
/*   PRICING PAGE      */
/* ------------------- */

/* Hero Section */
.pricing-hero {
  background: linear-gradient(135deg, #f7dde0 0%, #e6d3b3 100%);
  padding: 80px 20px;
  text-align: center;
  margin-bottom: 60px;
}

.pricing-hero-inner h1 {
  font-size: 2.5rem;
  color: #b85c7c;
  margin-bottom: 16px;
  font-weight: 700;
}

.pricing-subtitle {
  font-size: 1.3rem;
  color: #6d3f3f;
  font-weight: 400;
  font-style: italic;
}

/* Intro Section */
.pricing-intro {
  padding: 0 20px 60px 20px;
}

.pricing-intro .container {
  max-width: 900px;
  margin: 0 auto;
}

.intro-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

/* Packages Section */
.pricing-packages {
  padding: 60px 20px;
  background: #faf8f6;
}

.pricing-packages .container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 2.2rem;
  color: #b85c7c;
  text-align: center;
  margin-bottom: 50px;
  font-weight: 700;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Slider controls - hidden by default, shown on mobile via media query */
.packages-slider-controls {
  display: none;
}

.package-card {
  background: #fff;
  border-radius: 18px;
  padding: 40px 30px;
  box-shadow: 0 4px 16px rgba(184, 92, 124, 0.1);
  transition: all 0.3s;
  position: relative;
}

.package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(184, 92, 124, 0.2);
}

.package-featured {
  border: 2px solid #b85c7c;
  transform: scale(1.05);
}

.package-featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.package-badge {
  position: absolute;
  top: -12px;
  right: 30px;
  background: #b85c7c;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.package-icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 20px;
}

.package-title {
  font-size: 1.8rem;
  color: #b85c7c;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 700;
}

.package-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  text-align: center;
  margin-bottom: 24px;
}

.package-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.package-features li {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
}

.package-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #b85c7c;
  font-weight: 700;
  font-size: 1.2rem;
}

/* Pricing Table Section */
.pricing-table-section {
  padding: 60px 20px;
}

.pricing-table-section .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Accordion Styles */
.price-accordion {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(184, 92, 124, 0.08);
  overflow: hidden;
  transition: all 0.3s;
}

.price-accordion:hover {
  box-shadow: 0 4px 16px rgba(184, 92, 124, 0.15);
}

.accordion-header {
  width: 100%;
  background: linear-gradient(135deg, #f7dde0 0%, #fceef1 100%);
  border: none;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}

.accordion-header:hover {
  background: linear-gradient(135deg, #f0d0d6 0%, #f7dde0 100%);
}

.accordion-header.active {
  background: linear-gradient(135deg, #b85c7c 0%, #e07a9b 100%);
}

.accordion-header.active .accordion-title {
  color: #fff;
}

.accordion-header.active .accordion-icon {
  color: #fff;
  transform: rotate(45deg);
}

.accordion-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #b85c7c;
  text-align: left;
  transition: color 0.3s;
}

.accordion-icon {
  font-size: 1.8rem;
  font-weight: 300;
  color: #b85c7c;
  transition: all 0.3s;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.accordion-content.active {
  max-height: 3000px;
  transition: max-height 0.5s ease-in;
}

.price-accordion .pricing-table-wrapper {
  padding: 20px;
}

.pricing-table-wrapper {
  overflow-x: auto;
  margin-bottom: 0;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.pricing-table thead {
  background: linear-gradient(135deg, #b85c7c 0%, #e07a9b 100%);
  color: #fff;
}

.pricing-table th {
  padding: 16px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
}

.pricing-table th:first-child {
  width: 45%;
}

.pricing-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.95rem;
  color: #333;
}

.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-table tbody tr:hover {
  background: #faf8f6;
}

.pricing-table tbody tr:nth-child(even) {
  background: #fcfcfc;
}

.pricing-table tbody tr:nth-child(even):hover {
  background: #faf8f6;
}

.price-range-row {
  background: #f7dde0 !important;
}

.price-range-row:hover {
  background: #f0d0d6 !important;
}

.price-range-row td {
  color: #6d3f3f;
  font-weight: 600;
}

.pricing-note {
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  max-width: 900px;
  margin: 30px auto 0 auto;
}

/* Pricing Footer */
.pricing-footer {
  background: linear-gradient(135deg, #b85c7c 0%, #e07a9b 100%);
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}

.pricing-footer-content {
  max-width: 700px;
  margin: 0 auto;
}

.footer-header {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-icon {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}

.pricing-footer h2 {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.2;
}

.pricing-footer p {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 30px;
  color: #fff;
}

.pricing-footer .btn {
  display: inline-block;
  padding: 14px 36px;
  background: #fff;
  color: #b85c7c;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 1.05rem;
}

.pricing-footer .btn:hover {
  background: #f7dde0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* ------------------- */
/*   PRICING RESPONSIVE */
/* ------------------- */

/* Slider для пакетов - скрыт на больших экранах (>1000px) */
@media (min-width: 1001px) {
  .packages-slider-controls {
    display: none;
  }
  
  .packages-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .package-card {
    display: block !important;
    opacity: 1 !important;
  }
}

/* Слайдер для пакетов активен на экранах ≤1000px */
@media (max-width: 1000px) {
  .packages-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative;
    width: 100%;
    min-height: 520px;
    gap: 0;
  }
  
  .package-card {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    transition: opacity 0.4s ease;
    display: none;
    opacity: 0;
    padding: 36px 30px;
  }
  
  /* Первый слайд показан по умолчанию до инициализации JS */
  .package-card:first-child {
    display: block;
    opacity: 1;
  }
  
  /* Убираем transform: scale для featured карточки в слайдере */
  .package-featured {
    transform: scale(1) !important;
    border: 2px solid #b85c7c;
  }
  
  .package-card:hover {
    transform: translateY(-8px);
  }
  
  /* Бейдж в слайдере */
  .package-badge {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 10;
  }
  
  /* Slider controls */
  .packages-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
    flex-wrap: wrap;
  }
  
  /* Pagination counter */
  .slider-pagination {
    display: none; /* Скрыта числовая пагинация */
  }
  
  .slider-pagination .current {
    color: var(--accent-rose);
    font-weight: 700;
    font-size: 1.1rem;
  }
  
  .slider-pagination .separator {
    margin: 0 8px;
    color: #D4C2A0;
  }
  
  .slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-rose);
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .slider-btn:hover {
    background: var(--accent-champagne);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .slider-btn:active {
    transform: scale(0.95);
  }
  
  .slider-dots {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D4C2A0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .slider-dot.active {
    background: #b85c7c;
    transform: scale(1.3);
  }
  
  .slider-dot:hover {
    background: var(--accent-champagne);
  }
}

/* 768px и меньше */
@media (max-width: 768px) {
  .pricing-hero {
    padding: 60px 20px;
  }
  
  .pricing-hero-inner h1 {
    font-size: 2rem;
  }
  
  .pricing-subtitle {
    font-size: 1.1rem;
  }
  
  .intro-content p {
    font-size: 1rem;
    text-align: left;
  }
  
  .section-title {
    font-size: 1.8rem;
    margin-bottom: 36px;
  }
  
  .package-card {
    padding: 32px 24px;
  }
  
  .pricing-table th,
  .pricing-table td {
    padding: 16px 12px;
    font-size: 0.95rem;
  }
  
  .accordion-header {
    padding: 16px 20px;
  }
  
  .accordion-title {
    font-size: 1.05rem;
  }
  
  .accordion-icon {
    font-size: 1.5rem;
  }
  
  .price-accordion .pricing-table-wrapper {
    padding: 16px;
  }
  
  .pricing-table {
    font-size: 0.9rem;
  }
  
  .pricing-table th {
    padding: 14px 10px;
    font-size: 0.9rem;
  }
  
  .pricing-table td {
    padding: 12px 10px;
    font-size: 0.88rem;
  }
  
  .pricing-footer {
    padding: 60px 20px;
  }
  
  .footer-icon {
    font-size: 3rem;
  }
  
  .pricing-footer h2 {
    font-size: 1.6rem;
  }
  
  .pricing-footer p {
    font-size: 1.05rem;
  }
}

/* 600px и меньше */
@media (max-width: 600px) {
  .pricing-hero {
    padding: 40px 16px;
  }
  
  .pricing-hero-inner h1 {
    font-size: 1.6rem;
  }
  
  .pricing-subtitle {
    font-size: 1rem;
  }
  
  .pricing-intro {
    padding: 0 16px 40px 16px;
  }
  
  .intro-content p {
    font-size: 0.95rem;
    margin-bottom: 16px;
  }
  
  .pricing-packages {
    padding: 40px 16px;
  }
  
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 28px;
  }
  
  .packages-grid {
    min-height: 480px;
  }
  
  .package-card {
    padding: 28px 20px;
    max-width: 100%;
  }
  
  .package-icon {
    font-size: 2.5rem;
  }
  
  .package-title {
    font-size: 1.5rem;
  }
  
  .package-description {
    font-size: 0.95rem;
  }
  
  .package-features li {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  
  /* Slider controls */
  .packages-slider-controls {
    margin-top: 24px;
    gap: 16px;
  }
  
  .slider-pagination {
    margin-bottom: 12px;
    font-size: 0.9rem;
  }
  
  .slider-pagination .current {
    font-size: 1rem;
  }
  
  .slider-btn {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
  }
  
  .slider-dots {
    gap: 8px;
  }
  
  .slider-dot {
    width: 8px;
    height: 8px;
  }
  
  .pricing-table-section {
    padding: 40px 16px;
  }
  
  .accordion-header {
    padding: 14px 16px;
  }
  
  .accordion-title {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  
  .accordion-icon {
    font-size: 1.3rem;
    width: 26px;
    height: 26px;
  }
  
  .price-accordion .pricing-table-wrapper {
    padding: 12px;
  }
  
  .pricing-table {
    font-size: 0.85rem;
  }
  
  .pricing-table th,
  .pricing-table td {
    padding: 10px 8px;
  }
  
  .pricing-table th {
    font-size: 0.82rem;
  }
  
  .pricing-table td {
    font-size: 0.8rem;
  }
  
  .pricing-note {
    font-size: 0.88rem;
    padding: 0 10px;
  }
  
  .pricing-footer {
    padding: 50px 16px;
  }
  
  .footer-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
  }
  
  .pricing-footer h2 {
    font-size: 1.4rem;
  }
  
  .pricing-footer p {
    font-size: 1rem;
  }
  
  .pricing-footer .btn {
    padding: 12px 28px;
    font-size: 1rem;
  }
}

/* 480px и меньше */
@media (max-width: 480px) {
  .pricing-hero-inner h1 {
    font-size: 1.4rem;
  }
  
  .pricing-subtitle {
    font-size: 0.95rem;
  }
  
  .intro-content p {
    font-size: 0.92rem;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .packages-grid {
    min-height: 450px;
  }
  
  .package-title {
    font-size: 1.35rem;
  }
  
  .package-description {
    font-size: 0.92rem;
  }
  
  /* Slider controls */
  .packages-slider-controls {
    margin-top: 20px;
    gap: 12px;
  }
  
  .slider-pagination {
    margin-bottom: 10px;
    font-size: 0.85rem;
  }
  
  .slider-pagination .current {
    font-size: 0.95rem;
  }
  
  .slider-btn {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
  
  .slider-dots {
    gap: 6px;
  }
  
  .slider-dot {
    width: 7px;
    height: 7px;
  }
  
  /* Переключаем таблицу в вертикальный режим */
  .pricing-table thead {
    display: none;
  }
  
  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table td {
    display: block;
  }
  
  .pricing-table tr {
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .pricing-table td {
    padding: 12px 16px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
  }
  
  .pricing-table td:last-child {
    border-bottom: none;
  }
  
  .pricing-table td:before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: #b85c7c;
    font-size: 0.85rem;
  }
  
  .pricing-table td:first-child {
    background: #fef9f7;
    font-weight: 600;
    color: #333;
  }
  
  .pricing-table td:first-child:before {
    content: '';
    display: none;
  }
}

/* ------------------- */
/*   COPY NOTIFICATION */
/* ------------------- */

.copy-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #4caf50;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 10000;
}

.copy-notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------- */
/*   FOOTER RESPONSIVE */
/* ------------------- */

/* 1100px - промежуточный брейкпоинт для уменьшения gap */
@media (max-width: 1100px) {
  .footer-container {
    gap: 20px;
    padding: 18px 30px 20px 30px;
  }
}

/* 1024px - компактные отступы */
@media (max-width: 1024px) {
  .site-footer {
    padding: 60px 0 0 0;
  }

  .footer-container {
    flex-direction: row;
    gap: 40px;
    padding: 0 30px 40px 30px;
  }
  
  .footer-logo {
    width: 100px;
  }
  
  .footer-desc {
    font-size: 0.91rem;
  }
}

/* 768px - вертикальная раскладка */
@media (max-width: 768px) {
  .site-footer {
    padding: 50px 0 0 0;
  }

  .footer-container {
    flex-direction: column !important;
    gap: 40px !important;
    padding: 0 24px 35px 24px !important;
    align-items: center !important;
  }
  
  .footer-col-about {
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .footer-desc {
    text-align: center !important;
  }

  .footer-social {
    justify-content: center !important;
  }
  
  .footer-col-nav,
  .footer-col-services {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .footer-col-contacts {
    justify-content: flex-start !important;
    padding-top: 30px !important;
    width: 100% !important;
    align-self: flex-start !important;
  }
  
  .footer-social-icon {
    width: 36px;
    height: 36px;
  }
  
  .footer-social-icon img {
    width: 16px;
    height: 16px;
  }
  
  .footer-bottom {
    padding: 24px 20px;
    gap: 16px;
  }

  .footer-separator {
    margin: 0;
  }
}

/* 600px - одна колонка */
@media (max-width: 600px) {
  .site-footer {
    padding: 40px 0 0 0;
  }
  
  .footer-container {
    flex-direction: column;
    gap: 36px;
    padding: 0 20px 30px 20px;
    align-items: center;
  }
  
  .footer-col-about,
  .footer-col-nav,
  .footer-col-services {
    max-width: 100%;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .footer-nav-list,
  .footer-services-list {
    align-items: center;
  }
  
  .footer-title {
    font-size: 0.88rem;
  }
  
  .footer-nav-list,
  .footer-services-list {
    gap: 12px;
  }

  .footer-nav-list li a,
  .footer-services-list li {
    font-size: 0.92rem;
  }

  .footer-col-contacts {
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: 18px;
    padding-top: 24px;
    width: 100%;
  }
  
  .footer-contact-item {
    font-size: 0.91rem;
  }
  
  .footer-bottom {
    padding: 20px 16px;
    gap: 12px;
  }

  .footer-separator {
    margin: 0;
  }
}

/* 480px - минимальные отступы */
@media (max-width: 480px) {
  .site-footer {
    padding: 32px 0 0 0;
  }
  
  .footer-container {
    flex-direction: column;
    gap: 30px;
    padding: 0 16px 24px 16px;
    align-items: center;
  }
  
  .footer-logo {
    width: 90px;
  }
  
  .footer-desc {
    font-size: 0.89rem;
    line-height: 1.65;
  }
  
  .footer-social {
    gap: 10px;
  }

  .footer-social-icon {
    width: 34px;
    height: 34px;
  }
  
  .footer-social-icon img {
    width: 15px;
    height: 15px;
  }
  
  .footer-title {
    font-size: 0.83rem;
    margin-bottom: 18px;
  }

  .footer-nav-list li a,
  .footer-services-list li {
    font-size: 0.89rem;
  }

  .footer-services-list li {
    padding-left: 18px;
  }

  .footer-col-contacts {
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
    align-items: flex-start;
    align-self: flex-start;
    width: 100%;
  }
  
  .footer-contact-item {
    font-size: 0.88rem;
    gap: 10px;
  }
  
  .footer-icon {
    width: 18px;
    height: 18px;
  }
  
  .footer-bottom {
    padding: 18px 12px;
    gap: 10px;
  }
  
  .footer-copy,
  .footer-legal-link {
    font-size: 0.84rem;
  }

  .footer-separator {
    margin: 0;
  }
}

.copy-notification.error {
  background: #f44336;
}