/* ─── Переменные ─────────────────────────────────────────────────────────── */
:root {
  --brown:        #5e4939;
  --brown-dark:   #7A4E2C;
  --brown-light:  #F5EDE3;
  --brown-border: #d4b89c;
  --text-main:    #111827;
  --text-mid:     #4b5563;
  --text-muted:   #6b7280;
  --border:       #e5e7eb;
  --bg-light:     #f8fafc;
  --white:        #ffffff;
  --radius:       8px;
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.07);
  --shadow-lg:    0 10px 35px rgba(0,0,0,0.09);
}

/* ─── Сброс (не в критическом CSS) ─────────────────────────────────────── */
/* *, html, a, .container — уже в <style> в HTML, удалены */

body {
  background: var(--white);
  color: var(--text-main);
  line-height: 1.65;
  font-family: 'Golos Text', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img    { max-width:100%; display:block; }
ul     { list-style:none; }
button { font-family:inherit; }

/* ─── Утилиты ───────────────────────────────────────────────────────────── */
.section    { padding:90px 0; }
.bg-light   { background:var(--bg-light); }
.border-top { border-top:1px solid var(--border); }

/* ─── Прогресс-бар (переопределяет цвет через var) ─────────────────────── */
#progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--brown), #C4884E);
  z-index:9999; transition:width .1s linear; border-radius:0 2px 2px 0;
}

/* ─── Top-bar ───────────────────────────────────────────────────────────── */
/* .top-bar-address, svg, hours — одинаковы с критическим, удалены */
.top-bar         { background:var(--brown); color:#fff; padding:8px 0; font-size:.82rem; }
.top-bar-inner   { display:flex; justify-content:space-between; align-items:center; gap:15px; flex-wrap:wrap; }

/* ─── Шапка ─────────────────────────────────────────────────────────────── */
/* .header-logo, .header-logo img, .logo-text, .header-nav, */
/* .header-contacts, .header-phone-wrap, .burger-btn — удалены (идентичны) */
.main-header {
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.header-container { display:flex; justify-content:space-between; align-items:center; gap:15px; }

.logo-text .title    { font-weight:800; font-size:1.1rem; color:var(--text-main); letter-spacing:.5px; }
.logo-text .subtitle { font-size:.75rem; color:var(--text-muted); text-transform:uppercase; }

.header-nav a       { font-size:.95rem; font-weight:500; color:var(--text-mid); transition:color .2s; }
.header-nav a:hover { color:var(--brown); }

.header-phone       { font-weight:700; font-size:1.1rem; color:var(--text-main); transition:color .2s; }
.header-phone:hover { color:var(--brown); }
.header-email       { font-size:.8rem; color:var(--text-muted); }
.header-messengers  { display:flex; gap:8px; border-left:1px solid var(--border); padding-left:14px; }

/* ─── Иконки мессенджеров ───────────────────────────────────────────────── */
.messenger-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  transition:transform .2s, opacity .2s;
  flex-shrink:0;
}
.messenger-icon svg        { width:15px; display:block; }
.messenger-icon svg path   { fill:#fff; }
.messenger-icon:hover      { transform:scale(1.12); opacity:.9; }
.messenger-viber            { background:#7360f2; }
.messenger-whatsapp         { background:#25D366; }
.messenger-telegram         { background:#0088cc; }

/* ─── Бургер (активные состояния) ──────────────────────────────────────── */
/* .burger-btn и .burger-btn span — удалены (идентичны критическому) */
.burger-btn span { display:block; width:100%; height:2.5px; background:var(--text-main); border-radius:2px; transition:all .3s; }
.burger-btn.active span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity:0; }
.burger-btn.active span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ─── Мобильное меню ────────────────────────────────────────────────────── */
.mobile-menu       { display:none; }
.mobile-menu.open  { display:block; }
.mobile-menu-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:1100; backdrop-filter:blur(3px);
}
.mobile-menu-panel {
  position:fixed; top:0; right:0; width:min(300px, 85vw); height:100vh;
  background:var(--white); z-index:1200;
  padding:60px 30px 30px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:-5px 0 30px rgba(0,0,0,.15);
  overflow-y:auto;
}
.mobile-menu-close {
  position:absolute; top:16px; right:16px;
  background:none; border:none; cursor:pointer;
  color:var(--text-main); padding:6px;
  border-radius:6px; transition:background .2s;
}
.mobile-menu-close:hover { background:var(--bg-light); }
.mobile-nav-link {
  display:block; padding:14px 0; font-size:1.15rem; font-weight:600;
  color:var(--text-main); border-bottom:1px solid var(--border);
  transition:color .2s;
}
.mobile-nav-link:hover { color:var(--brown); }
.mobile-menu-contacts  { margin-top:24px; }
.mobile-phone {
  display:block; font-size:1.2rem; font-weight:800;
  color:var(--text-main); margin-bottom:16px;
}
.mobile-messengers { display:flex; gap:10px; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
/* .hero-container и .hero-content — удалены (идентичны критическому) */
.hero {
  padding:80px 0;
  background:url('images/bg-main.webp') no-repeat right center / cover;
  min-height:70vh; display:flex; align-items:center;
}
.hero h1      { font-size:3.5rem; font-weight:800; line-height:1.1; margin-bottom:25px; color:var(--text-main); }
.hero-desc    { font-size:1.15rem; color:var(--text-mid); margin-bottom:20px; line-height:1.7; }
.hero-address {
  display:flex; align-items:center; gap:7px;
  font-size:1rem; color:var(--brown); margin-bottom:40px;
  font-weight:600; letter-spacing:.1px;
}
.hero-address svg  { flex-shrink:0; stroke:var(--brown); }
.hero-buttons      { display:flex; gap:15px; justify-content:flex-start; flex-wrap:wrap; }
.hero-mobile-img   { display:none; }

/* ─── Кнопки (переопределяют var-значения из критического CSS) ──────────── */
.badge {
  display:inline-block; font-size:.9rem; font-weight:600;
  color:var(--brown); margin-bottom:10px; letter-spacing:1px; text-transform:uppercase;
}
.btn-primary {
  background:var(--brown); color:#fff;
  padding:15px 34px; border-radius:var(--radius);
  font-weight:700; display:inline-block; transition:all .25s;
  border:none; cursor:pointer;
  box-shadow:0 4px 15px rgba(139,94,60,.35);
  font-size:1rem; letter-spacing:.3px;
  font-family:'Golos Text', sans-serif;
}
.btn-primary:hover  { background:var(--brown-dark); transform:translateY(-2px); box-shadow:0 7px 22px rgba(139,94,60,.45); }
.btn-primary:active { transform:translateY(0); }

.btn-outline {
  background:transparent; color:var(--text-main);
  padding:15px 34px; border-radius:var(--radius);
  font-weight:700; border:2px solid var(--brown-border);
  display:inline-block; transition:all .25s;
  font-size:1rem; font-family:'Golos Text', sans-serif;
}
.btn-outline:hover { border-color:var(--brown); color:var(--brown); transform:translateY(-2px); }

/* ─── Заголовки секций ──────────────────────────────────────────────────── */
.section-title      { text-align:left; margin-bottom:60px; max-width:700px; }
.section-title h2   { font-size:2.8rem; font-weight:800; color:var(--text-main); margin-bottom:15px; }
.section-title p    { color:var(--text-muted); font-size:1.1rem; }

/* ─── Карточки услуг ────────────────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:30px; }
.service-card {
  background:var(--white); padding:40px; border-radius:16px;
  box-shadow:var(--shadow-md);
  border-top:4px solid var(--brown);
  transition:transform .3s, box-shadow .3s;
}
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.service-card h3    { font-size:1.4rem; font-weight:700; color:var(--text-main); margin-bottom:25px; }
.service-card ul    { list-style:none; }
.service-card li {
  position:relative; padding-left:28px; margin-bottom:16px;
  font-size:1.05rem; color:var(--text-mid); line-height:1.5;
}
.service-card li::before {
  content:"+"; position:absolute; left:0;
  color:var(--brown); font-weight:800; font-size:1.1rem;
}
.full-width      { grid-column:1 / -1; }
.multi-col-list  { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:30px; }

/* ─── Сетка 50/50 ───────────────────────────────────────────────────────── */
.grid-50              { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.info-block h2        { font-size:2.2rem; font-weight:800; margin-bottom:25px; color:var(--text-main); }
.info-block p         { margin-bottom:18px; color:var(--text-mid); font-size:1.05rem; }
.info-block.boxed {
  background:var(--white); padding:50px; border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.03); border:1px solid #f3f4f6;
}
.image-placeholder {
  border-radius:20px; height:100%; min-height:450px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#64748b;
}
.content-img { width:100%; height:100%; object-fit:cover; border-radius:20px; box-shadow:var(--shadow-lg); }

/* ─── Цены ──────────────────────────────────────────────────────────────── */
.requisites {
  background:var(--bg-light); padding:25px; border-radius:12px;
  font-size:.95rem; margin:30px 0;
  border-left:4px solid var(--brown); color:#334155;
}
.small-text { font-size:.85rem; color:#64748b; }

/* ─── Контакты ──────────────────────────────────────────────────────────── */
.contacts-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--white); border-radius:24px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.06); border:1px solid #f3f4f6;
}
.form-wrapper          { padding:50px; }
.form-wrapper h2       { font-size:2.2rem; font-weight:800; margin-bottom:10px; color:var(--text-main); }
.form-wrapper .subtitle { color:var(--text-muted); margin-bottom:40px; font-size:1.05rem; }

.contact-info-list { margin-bottom:40px; }
.contact-item      { display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.contact-item .icon {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--brown-light); display:flex; align-items:center; justify-content:center;
  color:var(--brown);
}
.contact-item span  { display:block; font-size:.85rem; color:var(--text-muted); }
.contact-item a     { font-weight:700; color:var(--text-main); font-size:1.1rem; }
.contact-item a:hover { color:var(--brown); }

.input-group { margin-bottom:15px; }
.input-group input {
  width:100%; padding:16px 20px; border:2px solid var(--border);
  border-radius:10px; font-size:1rem; outline:none;
  transition:.2s; background:#f9fafb;
  font-family:'Golos Text', sans-serif;
}
.input-group input:focus { border-color:var(--brown); background:var(--white); }
.w-full        { width:100%; text-align:center; margin-top:15px; margin-bottom:20px; }
.checkbox-label { display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--text-muted); cursor:pointer; }

.contact-form__message {
  padding:10px 16px; border-radius:8px; margin-bottom:10px;
  font-size:.9rem; font-weight:500; display:none;
}
.contact-form__message.success { display:block; background:#dcfce7; color:#166534; }
.contact-form__message.error   { display:block; background:#fee2e2; color:#991b1b; }

.map-wrapper { min-height:500px; background:#f3f4f6; }

/* ─── Подвал ────────────────────────────────────────────────────────────── */
.footer      { border-top:1px solid var(--border); padding:40px 0; font-size:.95rem; color:var(--text-muted); background:var(--white); }
.footer-flex { display:flex; justify-content:space-between; align-items:center; }
.dev-link    { color:var(--brown); font-weight:500; }
.dev-link:hover { text-decoration:underline; }
.f-phone     { font-weight:800; font-size:1.2rem; color:var(--text-main); display:block; margin-bottom:5px; }
.f-phone:hover { color:var(--brown); }

/* ─── Мобильная нижняя панель ───────────────────────────────────────────── */
.mobile-bottom-bar {
  display:none; position:fixed; bottom:0; left:0;
  width:100%; background:var(--white);
  box-shadow:0 -5px 20px rgba(0,0,0,0.07); z-index:9000;
}
.m-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:12px 5px; font-size:12px; font-weight:600;
  color:#4b5563; border-right:1px solid #f3f4f6; transition:background .2s;
}
.m-btn svg         { width:25px; margin-bottom:4px; }
.m-btn:last-child  { border-right:none; }
.m-btn:hover       { background:var(--bg-light); }
.btn-call          { color:#111827; }
.btn-call svg      { fill:#111827; }
.btn-wa            { color:#7360f2; }
.btn-wa  svg       { fill:#7360f2; }
.btn-tg            { color:#0088cc; }
.btn-tg  svg       { fill:#0088cc; }

/* ─── Кнопка «Наверх» ───────────────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:30px; right:30px;
  width:46px; height:46px; border-radius:50%;
  background:var(--brown); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:8000;
  box-shadow:0 4px 15px rgba(139,94,60,.4);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover   { background:var(--brown-dark); transform:translateY(-3px); }

/* ─── Медиа-запросы ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .header-nav      { display:none; }
  .burger-btn      { display:flex; }
  .hero            { background:none; padding:40px 0; min-height:auto; }
  .hero-content    { padding:0; text-align:left; }
  .hero h1         { font-size:2.8rem; }
  .hero-mobile-img { display:block; width:100%; height:100%; border-radius:16px; margin-top:40px; box-shadow:var(--shadow-lg); }
  .grid-50         { grid-template-columns:1fr; gap:40px; }
  .image-placeholder { min-height:300px; }
  .reverse-mobile  { display:flex; flex-direction:column-reverse; }
  .contacts-grid   { grid-template-columns:1fr; }
  .form-wrapper    { padding:30px 20px; }
  .map-wrapper     { min-height:350px; }
  .back-to-top     { display:none !important; }
}

@media (max-width: 768px) {
  body               { padding-bottom:70px; }
  .mobile-bottom-bar { display:flex; }
  .header-contacts   { display:none; }
  .hero-buttons      { flex-direction:column; }
  .btn-primary, .btn-outline { width:100%; text-align:center; }
  .footer-flex       { flex-direction:column; text-align:center; gap:20px; }
  .top-bar-hours     { display:none; }
  .top-bar-address   { font-size:.82rem; }
  .section-title h2  { font-size:2.1rem; }
  .hero h1           { font-size:2.3rem; }
  .info-block h2     { font-size:1.8rem; }
  .section           { padding:60px 0; }
  .service-card      { padding:28px 22px; }
  .info-block.boxed  { padding:28px 22px; }
}

@media (max-width: 480px) {
  .hero h1          { font-size:2rem; }
  .section-title h2 { font-size:1.8rem; }
  .badge            { font-size:.8rem; }
}
/* ─── Модальное окно формы ──────────────────────────────────────────────── */
.form-modal { display:none; }
.form-modal:not([hidden]) { display:block; }

.form-modal__overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  z-index:10000;
}
.form-modal__box {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%, -50%) scale(.9);
  z-index:10001;
  background:#fff; border-radius:20px;
  padding:50px 40px 40px;
  width:min(480px, 92vw);
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
.form-modal:not([hidden]) .form-modal__box {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.form-modal__close {
  position:absolute; top:16px; right:16px;
  background:none; border:none; cursor:pointer;
  color:#6b7280; padding:6px; border-radius:6px;
  transition:background .2s;
}
.form-modal__close:hover { background:#f3f4f6; }

.form-modal__icon {
  font-size:3.5rem;
  margin-bottom:16px;
  line-height:1;
}
.form-modal__title {
  font-size:1.5rem; font-weight:800;
  color:#111827; margin-bottom:10px;
}
.form-modal__text {
  font-size:1rem; color:#4b5563;
  margin-bottom:30px; line-height:1.6;
}
.form-modal__btn { min-width:160px; }