/* ============================================================
   Beauty Dome — общий style.css сайта
   Основание: концепт v3 «Гибрид» (тёмный премиальный hero → светлые
   тёплые секции; чёрный/золото + тёплый светлый фон), утверждён клиентом 16.07.2026.
   Все токены и компоненты обобщены из concepts/v3/index.html.
   Mobile-first. Внешние ресурсы — только Google Fonts (подключаются в HTML).
   Разработчик использует эти токены и классы, свои не заводит.
   ============================================================ */

/* ==========================================================
   1. ТОКЕНЫ (палитра v3 60/30/10, типографика, геометрия)
   ========================================================== */
:root{
  /* — Палитра. Крем — фон 60%, серо-розовый — подложки 30%, золото — действия 10% — */
  --c-ink:       #191419;  /* антрацит бренда (hero, финальный CTA) */
  --c-ink-2:     #241D24;  /* тёмная подложка/карточка формы */
  --c-ink-3:     #121014;  /* футер */
  --c-cream:     #FAF6F1;  /* светлый фон 60% */
  --c-blush:     #F2E9E8;  /* серо-розовая подложка 30% */
  --c-card:      #FFFFFF;  /* белые карточки */
  --c-mauve:     #8C737A;  /* пыльная роза — цвет перехода тёмное↔светлое */
  --c-rose-mid:  #D9C7C6;

  --c-gold:      #C9A45C;  /* акцент-действие на тёмном */
  --c-champ:     #DCC08F;  /* шампань — заголовки/акценты на тёмном */
  --c-gold-deep: #85622A;  /* золото для текста на светлом (контраст 5.1:1 к крему) */
  --c-gold-line: #8A6A33;  /* граница золотых кнопок (3:1+ на светлом) */
  --c-focus:     #A87E3B;  /* видимый фокус на обоих фонах (3:1+) */

  --c-text:      #2B2430;  /* текст на светлом, 13.9:1 */
  --c-text-soft: #6E6168;  /* вторичный текст на светлом, 5.4:1 */
  --c-text-inv:  #EDE5DE;  /* текст на тёмном */
  --c-text-inv-soft: #B7AAAE; /* вторичный на тёмном, 6.7:1 */

  --c-line:      rgba(140,115,122,.18); /* тонкие границы на светлом */
  --c-line-gold: rgba(220,192,143,.28); /* тонкие границы на тёмном */

  /* — Типографика (те же Google Fonts, что в v3: Playfair Display + Manrope) — */
  --ff-display: "Playfair Display", "PT Serif", Georgia, serif;
  --ff-text: "Manrope", "Segoe UI", Arial, sans-serif;
  --fs-display: clamp(2.35rem, 5.2vw + 1.15rem, 4.4rem);  /* hero H1/display */
  --fs-h2: clamp(1.7rem, 2.4vw + 1rem, 2.65rem);
  --fs-h3: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* — Геометрия и отступы (шкала 8px) — */
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-pill: 999px;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --shadow-card: 0 18px 44px -22px rgba(43, 36, 48, .28);
  --shadow-gold: 0 12px 26px -14px rgba(201, 164, 92, .55);

  --container: 1160px;
}

/* ==========================================================
   2. БАЗА
   ========================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-text);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-cream);
  padding-bottom:88px; /* место под мобильную панель действий */
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; border-radius:4px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.section{ padding-block:var(--s-6); }
.section-blush{ background:var(--c-blush); }
.section-dark{ background:var(--c-ink); color:var(--c-text-inv); }

/* Инверсия текста для тёмных секций */
.on-dark{ color:var(--c-text-inv); }

/* ==========================================================
   3. ТИПОГРАФИКА-УТИЛИТЫ
   ========================================================== */
.overline{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--c-gold-deep);
}
.on-dark .overline{ color:var(--c-gold); }

.h1, .hero-display{
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-display);
  line-height:1.08; letter-spacing:.005em; text-wrap:balance;
}
.h2{
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-h2);
  line-height:1.15; color:var(--c-text); text-wrap:balance;
}
.on-dark .h2{ color:var(--c-champ); }
.h3{
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-h3);
  line-height:1.25; color:var(--c-text);
}

.sec-head{ max-width:720px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-intro{ margin-top:var(--s-2); color:var(--c-text-soft); max-width:62ch; }
.on-dark .sec-intro{ color:var(--c-text-inv-soft); }
.center .sec-intro{ margin-inline:auto; }
.lead{ max-width:65ch; }

/* Орнамент-разделитель под заголовками секций */
.orn{ width:72px; height:2px; border:0; margin:var(--s-2) 0 0;
  background:linear-gradient(90deg, var(--c-gold), rgba(201,164,92,0)); position:relative; }
.orn::after{ content:""; position:absolute; left:-2px; top:-3px; width:8px; height:8px;
  transform:rotate(45deg); background:var(--c-gold); }
.center .orn{ margin-inline:auto; background:linear-gradient(90deg, rgba(201,164,92,0), var(--c-gold), rgba(201,164,92,0)); }
.center .orn::after{ left:calc(50% - 4px); }

/* ==========================================================
   4. КНОПКИ (primary / secondary / ghost) — консистентны на обоих фонах
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px; border-radius:var(--r-pill);
  font-family:var(--ff-text); font-weight:700; font-size:1rem; line-height:1.2;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; filter:none; }

/* primary — золото + тёмный текст (7.2:1); тёмная золотая граница даёт 3:1+ на креме */
.btn-primary, .btn-gold{
  background:#C9A45C; /* fallback */
  background:linear-gradient(165deg, #E4CA96, #C9A45C 55%, #B58B45);
  color:#241F27; border-color:var(--c-gold-line);
  box-shadow:var(--shadow-gold);
}
.btn-primary:hover, .btn-gold:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-primary:active, .btn-gold:active{ transform:translateY(0); filter:brightness(.97); }

/* secondary — заливка серо-розовым на светлом (тихое второе действие) */
.btn-secondary{
  background:var(--c-blush); color:var(--c-text); border-color:var(--c-line);
}
.btn-secondary:hover{ transform:translateY(-1px); background:var(--c-rose-mid); }
.on-dark .btn-secondary{ background:rgba(220,192,143,.12); color:var(--c-champ); border-color:var(--c-line-gold); }

/* ghost — форма и типографика те же, цвет обводки берёт из контекста секции */
.btn-ghost{
  background:transparent; border:1.5px solid currentColor; color:var(--c-text);
}
.on-dark .btn-ghost{ color:var(--c-champ); }
.btn-ghost:hover{ transform:translateY(-1px); background:rgba(201,164,92,.10); }

.btn-block{ width:100%; }
@media (max-width:479px){ .btn-fluid{ width:100%; } }

/* Текстовая ссылка-акцент */
.textlink{
  color:var(--c-gold-deep); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(133,98,42,.35); padding-bottom:1px;
  transition:border-color .18s ease;
}
.textlink:hover{ border-color:var(--c-gold-deep); }
.on-dark .textlink{ color:var(--c-champ); border-bottom-color:rgba(220,192,143,.4); }
.on-dark .textlink:hover{ border-color:var(--c-champ); }

/* Микроподпись-триггер под кнопкой («это ни к чему не обязывает») */
.click-trigger{ font-size:var(--fs-small); color:var(--c-text-soft); }
.on-dark .click-trigger{ color:var(--c-text-inv-soft); }

/* Столбец «кнопка + подпись» */
.cta-col{ display:grid; gap:6px; justify-items:center; }
.cta-col .btn{ width:100%; }
@media (min-width:640px){
  .cta-col{ justify-items:start; }
  .cta-col .btn{ width:auto; }
}

/* ==========================================================
   5. ШАПКА («стеклянная» фиксация + бургер-меню)
   ========================================================== */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(25,20,25,.72);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(220,192,143,.14);
  color:var(--c-text-inv);
}
.site-head .container{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding-block:12px; max-width:1320px;
}
/* Когда шапка лежит поверх тёмного hero, фон можно сделать прозрачнее — модификатор */
.site-head.is-transparent{ background:rgba(25,20,25,.42); border-bottom-color:transparent; }

.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--c-text-inv); flex:none; }
.brand-mark{
  width:46px; height:46px; display:grid; place-items:center; flex:none;
  border:1px solid rgba(220,192,143,.75); border-radius:6px;
  font-family:var(--ff-display); font-weight:700; font-size:1.05rem; color:var(--c-champ);
  letter-spacing:.04em; background:linear-gradient(160deg, rgba(220,192,143,.14), rgba(220,192,143,0));
}
.brand-name{ font-family:var(--ff-display); font-size:1.15rem; font-weight:600; letter-spacing:.06em; white-space:nowrap; }
.brand-sub{ display:block; font-family:var(--ff-text); font-size:.68rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c-text-inv-soft); margin-top:2px; }

/* Правая группа шапки */
.head-actions{ display:flex; align-items:center; gap:var(--s-2); flex:none; }
.head-phone{ display:none; white-space:nowrap; color:var(--c-text-inv); text-decoration:none; font-weight:600; }
.head-phone:hover{ color:var(--c-champ); }
.site-head .btn{ min-height:44px; padding:10px 22px; font-size:.95rem; }
/* На мобиле кнопка «Записаться» в шапке избыточна — есть нижняя панель; прячем, чтобы лого не переносилось */
.head-actions .btn-primary{ display:none; }

/* Десктоп-навигация */
.nav-desktop{ display:none; }
.nav-desktop ul{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:2px 14px; }
.nav-desktop a{
  display:inline-block; padding:6px 2px; font-size:.85rem; font-weight:500; white-space:nowrap;
  color:var(--c-text-inv); text-decoration:none; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav-desktop a:hover{ color:var(--c-champ); }
.nav-desktop a[aria-current="page"]{ color:var(--c-champ); border-bottom-color:var(--c-gold); }

/* Кнопка-бургер (видна только на мобиле) */
.nav-toggle{
  display:inline-grid; place-items:center; width:48px; height:48px; flex:none;
  background:transparent; border:1px solid rgba(220,192,143,.3); border-radius:10px;
  color:var(--c-champ); cursor:pointer;
}
.nav-toggle:hover{ background:rgba(220,192,143,.1); }
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* Мобильное выезжающее меню */
.nav-mobile{
  position:fixed; inset:0 0 0 auto; z-index:70;
  width:min(86vw, 360px);
  background:var(--c-ink-2); color:var(--c-text-inv);
  border-left:1px solid rgba(220,192,143,.2);
  box-shadow:-24px 0 60px -24px rgba(0,0,0,.6);
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; padding:var(--s-3);
  overflow-y:auto;
}
.nav-mobile.is-open{ transform:translateX(0); }
.nav-mobile-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-2); }
.nav-mobile-close{
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(220,192,143,.3); border-radius:10px;
  color:var(--c-champ); cursor:pointer;
}
.nav-mobile ul{ display:flex; flex-direction:column; gap:2px; }
.nav-mobile a{
  display:block; padding:13px 10px; min-height:44px;
  font-size:1.02rem; color:var(--c-text-inv); text-decoration:none;
  border-bottom:1px solid rgba(220,192,143,.1);
}
.nav-mobile a:hover{ color:var(--c-champ); }
.nav-mobile a[aria-current="page"]{ color:var(--c-champ); }
.nav-mobile .btn{ margin-top:var(--s-3); width:100%; }
/* Затемнение под меню */
.nav-backdrop{
  position:fixed; inset:0; z-index:65; background:rgba(18,16,20,.55);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; }

@media (min-width:1000px){
  .nav-desktop{ display:block; }
  .nav-toggle{ display:none; }
  .head-phone{ display:inline; }
  .head-actions .btn-primary{ display:inline-flex; }
}

/* ==========================================================
   6. ХЛЕБНЫЕ КРОШКИ
   ========================================================== */
.breadcrumbs{ padding-block:var(--s-3) 0; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  list-style:none; padding:0; margin:0; font-size:var(--fs-small); color:var(--c-text-soft); }
.breadcrumbs li{ display:inline-flex; align-items:center; gap:6px; }
.breadcrumbs li + li::before{ content:"→"; color:var(--c-rose-mid); }
.breadcrumbs a{ color:var(--c-text-soft); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--c-gold-deep); }
.breadcrumbs [aria-current="page"]{ color:var(--c-text); }

/* ==========================================================
   7. HERO (тёмный вариант)
   ========================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(201,164,92,.20), transparent 62%),
    radial-gradient(700px 460px at -12% 108%, rgba(140,115,122,.30), transparent 60%),
    var(--c-ink);
  color:var(--c-text-inv);
  padding-block:var(--s-6) calc(var(--s-7) + var(--s-5)); /* нижний запас под карточку-мост */
}
/* Водяной знак BD — фирстиль визиток */
.hero::after{
  content:"BD"; position:absolute; right:-4%; top:2%; z-index:0;
  font-family:var(--ff-display); font-weight:700; font-size:clamp(14rem, 34vw, 30rem);
  line-height:1; color:rgba(220,192,143,.05); pointer-events:none; user-select:none;
}
/* Двойное кольцо-орнамент (десктоп) */
.hero-orn{ display:none; position:absolute; right:-140px; top:120px; width:460px; height:460px;
  border:1px solid rgba(220,192,143,.22); border-radius:50%; pointer-events:none; }
.hero-orn::before{ content:""; position:absolute; inset:56px; border:1px solid rgba(220,192,143,.14); border-radius:50%; }
@media (min-width:1000px){ .hero-orn{ display:block; } }

.hero-inner{ position:relative; z-index:1; max-width:720px; }
.hero-display{ color:var(--c-champ); margin-top:var(--s-2); }
.hero-sub{ margin-top:var(--s-3); max-width:60ch;
  font-size:clamp(1.02rem, .4vw + .95rem, 1.15rem); line-height:1.55;
  font-weight:400; color:var(--c-text-inv); }
.hero-sub-2{ margin-top:var(--s-1); font-weight:600; color:var(--c-champ);
  font-size:clamp(1.02rem, .4vw + .95rem, 1.15rem); }

.hero-cta{ margin-top:var(--s-4); display:grid; gap:var(--s-3); }
@media (min-width:640px){
  .hero-cta{ grid-auto-flow:column; justify-content:start; align-items:start; }
  .cta-col .click-trigger{ padding-left:var(--s-2); }
}

/* Пилюли-буллиты первого экрана */
.hero-bullets{ margin-top:var(--s-4); display:flex; flex-wrap:wrap; gap:10px; }
.hero-bullets li{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(220,192,143,.30); border-radius:var(--r-pill);
  padding:9px 16px; font-size:.9rem; color:var(--c-text-inv);
  background:rgba(220,192,143,.06);
}
.hero-bullets li::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--c-gold); flex:none; }

/* Бейдж рейтинга 2ГИС */
.hero-badge{
  margin-top:var(--s-4); display:inline-flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--c-text-inv);
  border:1px solid rgba(220,192,143,.28); border-radius:var(--r-m);
  padding:12px 18px; background:rgba(36,29,36,.55);
  transition:border-color .18s ease, background-color .18s ease;
}
.hero-badge:hover{ border-color:rgba(220,192,143,.6); background:rgba(36,29,36,.85); }
.badge-medal{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(220,192,143,.6); color:var(--c-champ); font-size:1.05rem;
  background:radial-gradient(circle at 32% 28%, rgba(220,192,143,.30), rgba(220,192,143,.04));
}
.badge-title{ font-family:var(--ff-display); font-weight:600; font-size:1.12rem; color:var(--c-champ); }
.badge-stars{ color:var(--c-gold); letter-spacing:.12em; font-size:.8rem; margin-left:8px; }
.badge-cap{ display:block; font-size:var(--fs-small); color:var(--c-text-inv-soft); margin-top:2px; }

/* Компактный hero для внутренних страниц (без бейджа/буллитов) */
.hero-page{ padding-block:var(--s-5) var(--s-6); }
.hero-page .hero-display{ font-size:clamp(2rem, 3.6vw + 1.1rem, 3.2rem); }

/* ==========================================================
   8. ПЕРЕХОДЫ тёмное ↔ светлое + КАРТОЧКА-МОСТ ДОВЕРИЯ
   ========================================================== */
.bridge{
  background:linear-gradient(180deg,
    var(--c-ink) 0%, #3B2E35 30%, var(--c-mauve) 55%, var(--c-rose-mid) 78%, var(--c-cream) 100%);
  padding-bottom:var(--s-5);
}
.bridge-down{
  height:130px;
  background:linear-gradient(0deg,
    var(--c-ink) 0%, #3B2E35 30%, var(--c-mauve) 55%, var(--c-rose-mid) 78%, var(--c-cream) 100%);
}
.trust-card{
  position:relative; margin-top:calc(-1 * var(--s-7));
  background:var(--c-card); border-radius:var(--r-m); box-shadow:var(--shadow-card);
  padding:var(--s-4) var(--s-3); overflow:hidden;
}
.trust-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--c-gold), transparent); }
.trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-2); }
@media (min-width:900px){
  .trust-grid{ grid-template-columns:repeat(4,1fr); }
  .trust-card{ padding:var(--s-4) var(--s-5); }
}
.trust-item{ text-align:center; padding-inline:4px; }
.trust-num{ font-family:var(--ff-display); font-weight:600; font-size:clamp(1.2rem, 1vw + 1rem, 1.55rem);
  color:var(--c-gold-deep); line-height:1.2; text-wrap:balance; }
.trust-cap{ margin-top:6px; font-size:var(--fs-small); color:var(--c-text-soft); }

/* ==========================================================
   9. КАРТОЧКИ УСЛУГ + ПРАЙС-СТРОКИ
   ========================================================== */
.services-grid{ margin-top:var(--s-5); display:grid; gap:var(--s-3); }
@media (min-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; gap:var(--s-4); } }
/* Универсальная сетка карточек (3 и более): адаптив без media queries */
.card-grid{ margin-top:var(--s-5); display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.svc-card{
  background:var(--c-card); border:1px solid var(--c-line);
  border-radius:var(--r-l); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; overflow:hidden;
}
.svc-band{
  padding:var(--s-3) var(--s-3) var(--s-2);
  background:linear-gradient(150deg, var(--c-blush), #FBF3F0 70%);
  border-bottom:1px solid rgba(140,115,122,.14);
  display:flex; align-items:center; gap:var(--s-2);
}
.svc-num{
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-size:1.9rem; color:var(--c-gold-deep); line-height:1; flex:none;
}
.svc-title{ font-family:var(--ff-display); font-weight:600; font-size:var(--fs-h3);
  line-height:1.25; color:var(--c-text); }
.svc-body{ padding:var(--s-3); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.svc-text{ color:var(--c-text); max-width:58ch; }
.svc-actions{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); }
@media (max-width:479px){ .svc-actions .btn{ width:100%; } }

/* Прайс-строки */
.price-list{ display:grid; gap:10px; }
.price-row{ display:flex; align-items:baseline; gap:10px; font-size:.95rem; }
.price-name{ color:var(--c-text); }
.price-dots{ flex:1; border-bottom:1px dotted rgba(110,97,104,.5); transform:translateY(-4px); }
.price-val{ font-weight:700; color:var(--c-text); white-space:nowrap; }
/* Выделенная строка (акция «ПМ среда» и т.п. — подавать мягко, не «распродажа») */
.price-row.hot{ background:linear-gradient(90deg, rgba(201,164,92,.14), rgba(201,164,92,.03));
  border-radius:10px; padding:8px 12px; margin-inline:-12px; }
.price-row.hot .price-val{ color:var(--c-gold-deep); }
.price-note{ display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--c-text); }
.price-note::before{ content:"✓"; color:var(--c-gold-deep); font-weight:700; }

/* ==========================================================
   10. БЛОК ФИЛОСОФИИ / О ТАТЬЯНЕ (серо-розовая секция)
   ========================================================== */
.philosophy{ background:var(--c-blush); position:relative; overflow:hidden; }
.philosophy::before{ /* гигантская кавычка-орнамент */
  content:"«"; position:absolute; left:-2%; top:-6%; font-family:var(--ff-display);
  font-size:clamp(16rem, 30vw, 26rem); line-height:1; color:rgba(140,115,122,.10);
  pointer-events:none; user-select:none;
}
.phi-grid{ position:relative; display:grid; gap:var(--s-4); }
@media (min-width:900px){ .phi-grid{ grid-template-columns:360px 1fr; gap:var(--s-6); align-items:start; } }
.phi-portrait{
  border-radius:var(--r-l); padding:var(--s-4) var(--s-3); text-align:center;
  background:linear-gradient(168deg, var(--c-ink-2) 0%, #4A3A40 62%, var(--c-mauve) 100%);
  color:var(--c-text-inv); box-shadow:var(--shadow-card);
}
.phi-sign{ margin-top:var(--s-3); font-size:.95rem; line-height:1.55; color:var(--c-text-inv); }
.phi-sign strong{ display:block; font-family:var(--ff-display); font-weight:600;
  font-size:1.2rem; color:var(--c-champ); margin-bottom:6px; }
.phi-caveat{ margin-top:var(--s-3); padding-top:var(--s-3);
  border-top:1px solid rgba(220,192,143,.25);
  font-size:var(--fs-small); font-style:italic; color:var(--c-text-inv-soft); }
.phi-quote{ font-family:var(--ff-display); font-weight:600; font-size:var(--fs-h2);
  line-height:1.18; color:var(--c-text); text-wrap:balance; }
.phi-text{ margin-top:var(--s-3); display:grid; gap:var(--s-2); max-width:62ch; }
.phi-text p{ color:var(--c-text); }
.phi-text p:last-child{ font-weight:600; }

/* ==========================================================
   11. БЛОК КОМАНДЫ (аватары-инициалы)
   ========================================================== */
.team-grid{ margin-top:var(--s-5); display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.team-card{
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-l);
  box-shadow:var(--shadow-card); padding:var(--s-4) var(--s-3); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
}
/* Аватар-инициалы (до фирменной фотосессии; чужих фото нет) */
.avatar{
  width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:1.85rem;
  color:#241F27; background:linear-gradient(160deg, #E4CA96, #C9A45C);
  border:3px solid var(--c-card); box-shadow:0 8px 20px -10px rgba(0,0,0,.35);
}
.avatar-dark{ color:var(--c-champ);
  background:linear-gradient(168deg, var(--c-ink-2), var(--c-mauve));
  border-color:rgba(250,246,241,.85); }
.team-name{ font-family:var(--ff-display); font-weight:600; font-size:1.2rem; color:var(--c-text); margin-top:6px; }
.team-role{ font-size:var(--fs-small); color:var(--c-gold-deep); font-weight:600; }
.team-bio{ font-size:.95rem; color:var(--c-text-soft); max-width:34ch; }

/* ==========================================================
   12. ОТЗЫВЫ (мобайл — лента со свайпом, десктоп — сетка)
   ========================================================== */
.reviews-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-2); }
.reviews-row{
  margin-top:var(--s-4);
  display:grid; grid-auto-flow:column; grid-auto-columns:min(300px, 82%);
  gap:var(--s-2); overflow-x:auto; scroll-snap-type:x mandatory;
  margin-inline:-20px; padding-inline:20px; padding-bottom:var(--s-2);
  scrollbar-width:thin; scrollbar-color:var(--c-rose-mid) transparent;
}
@media (min-width:900px){
  .reviews-row{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3,1fr);
    overflow:visible; margin-inline:0; padding-inline:0; }
}
.rev-card{
  scroll-snap-align:start;
  background:var(--c-card); border:1px solid rgba(140,115,122,.16); border-radius:var(--r-m);
  padding:var(--s-3); display:flex; flex-direction:column; gap:var(--s-2);
  box-shadow:0 10px 26px -18px rgba(43,36,48,.25);
}
.rev-mark{ font-family:var(--ff-display); font-size:2rem; line-height:.6; color:var(--c-gold); }
.rev-quote{ font-family:var(--ff-display); font-size:1.08rem; line-height:1.45; color:var(--c-text); flex:1; }
.rev-src{ font-size:var(--fs-small); color:var(--c-text-soft); }
.reviews-cta{ margin-top:var(--s-4); display:grid; gap:8px; justify-items:center; text-align:center; }

/* ==========================================================
   13. FAQ (аккордеон на <details>, работает без JS)
   ========================================================== */
.faq-list{ margin-top:var(--s-5); display:grid; gap:var(--s-2); max-width:820px; }
.faq-item{
  background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-m);
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2); padding:var(--s-3); min-height:56px;
  font-family:var(--ff-display); font-weight:600; font-size:1.08rem; color:var(--c-text);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--c-gold-line); border-radius:50%; color:var(--c-gold-deep);
  font-size:1.2rem; line-height:1; transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-body{ padding:0 var(--s-3) var(--s-3); color:var(--c-text-soft); max-width:70ch; }
.faq-item .faq-body p + p{ margin-top:var(--s-2); }
.on-dark .faq-item{ background:var(--c-ink-2); border-color:var(--c-line-gold); }
.on-dark .faq-item summary{ color:var(--c-text-inv); }
.on-dark .faq-item .faq-body{ color:var(--c-text-inv-soft); }

/* ==========================================================
   14. ФОРМА ЗАЯВКИ (в тёмной карточке; submit → wa.me deep-link)
   ========================================================== */
.finale{ background:var(--c-ink); color:var(--c-text-inv); position:relative; overflow:hidden; }
.finale::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 12% 0%, rgba(201,164,92,.14), transparent 60%);
  pointer-events:none; }
.finale .container{ position:relative; }
.finale-grid{ margin-top:var(--s-5); display:grid; gap:var(--s-4); }
@media (min-width:960px){ .finale-grid{ grid-template-columns:1.05fr .95fr; gap:var(--s-5); align-items:start; } }

.form-card{
  background:var(--c-ink-2); border:1px solid rgba(220,192,143,.20); border-radius:var(--r-l);
  padding:var(--s-4) var(--s-3); display:grid; gap:var(--s-3);
}
@media (min-width:600px){ .form-card{ padding:var(--s-4); } }
.field{ display:grid; gap:8px; }
.field label{ font-size:.92rem; font-weight:600; color:var(--c-text-inv); }
.field label .opt{ font-weight:500; color:var(--c-text-inv-soft); }
.field input, .field select, .field textarea{
  width:100%; min-height:52px; padding:12px 16px; font:inherit; font-size:1rem; /* ≥16px — нет автозума iOS */
  color:var(--c-text-inv); background:#2B252D;
  border:1px solid #4A414A; border-radius:var(--r-s);
  transition:border-color .18s ease;
}
.field textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:#9A8D93; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--c-champ); outline:none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--c-focus); outline-offset:2px; }
.field-hint{ font-size:var(--fs-small); color:var(--c-text-inv-soft); }
/* Состояние ошибки */
.field.is-error input, .field.is-error select, .field.is-error textarea{ border-color:#D98A8A; }
.field-error{ display:none; font-size:var(--fs-small); color:#E7A6A6; }
.field.is-error .field-error{ display:block; }
.form-card .btn{ width:100%; }
.consent{ font-size:.8rem; color:var(--c-text-inv-soft); }
.consent a{ color:var(--c-champ); }
/* Honeypot — скрыт доступно (не display:none, не type=hidden) */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Карточка «или» — DIKIDI рядом с формой */
.alt-card{
  border:1px solid rgba(220,192,143,.28); border-radius:var(--r-l);
  padding:var(--s-4) var(--s-3); text-align:center; display:grid; gap:10px; justify-items:center;
  background:rgba(36,29,36,.5);
}
.alt-or{ font-family:var(--ff-display); font-style:italic; font-size:1.1rem; color:var(--c-champ); }
.alt-card .btn{ width:100%; max-width:320px; }

/* Контакты в тёмной секции */
.contacts{ margin-top:var(--s-4); display:grid; gap:var(--s-2); }
.contact-row{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; }
.contact-row svg{ flex:none; margin-top:3px; color:var(--c-gold); }
.contact-row a{ color:var(--c-text-inv); text-decoration:none; border-bottom:1px solid rgba(220,192,143,.35); }
.contact-row a:hover{ color:var(--c-champ); }
.contact-soft{ color:var(--c-text-inv-soft); }

/* CSS-«карта»-заглушка (без внешних сервисов) */
.map-tile{
  margin-top:var(--s-3); position:relative; height:190px; border-radius:var(--r-m); overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(220,192,143,.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(220,192,143,.07) 0 1px, transparent 1px 34px),
    linear-gradient(140deg, #2B252D, #241D24);
  border:1px solid rgba(220,192,143,.18);
}
.map-tile::before{ content:""; position:absolute; left:50%; top:42%; width:14px; height:14px;
  transform:translate(-50%,-50%); border-radius:50% 50% 50% 0; rotate:-45deg;
  background:var(--c-gold); box-shadow:0 0 0 8px rgba(201,164,92,.18), 0 0 0 20px rgba(201,164,92,.07); }
.map-tile::after{ content:attr(data-label); position:absolute; left:50%; top:62%;
  transform:translateX(-50%); font-size:.85rem; color:var(--c-champ); white-space:nowrap; }
.map-cap{ margin-top:10px; font-size:var(--fs-small); color:var(--c-text-inv-soft); }

/* Реальная интерактивная карта (Яндекс-виджет) + действия маршрута 2ГИС */
.map-embed{ margin-top:var(--s-3); position:relative; aspect-ratio:16 / 10; border-radius:var(--r-m);
  overflow:hidden; border:1px solid var(--c-line); background:var(--c-blush); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.map-actions .btn{ flex:1 1 auto; }
@media (min-width:520px){ .map-actions .btn{ flex:0 0 auto; } }

/* ==========================================================
   15. ПОДВАЛ
   ========================================================== */
.footer{ background:var(--c-ink-3); color:var(--c-text-inv-soft); padding-block:var(--s-5) var(--s-4); }
.footer-top{ display:grid; gap:var(--s-4); align-items:flex-start; }
@media (min-width:760px){ .footer-top{ grid-template-columns:minmax(220px, 1fr) 2fr; gap:var(--s-5); } }
.footer .brand-mark{ width:40px; height:40px; font-size:.95rem; }
.footer-tagline{ margin-top:var(--s-3); font-size:.9rem; color:#8F8288; max-width:34ch; }

/* Колонки-меню подвала */
.footer-cols{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.footer-col h3{ font-family:var(--ff-text); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-champ); font-weight:600; margin-bottom:10px; }
.footer-col ul{ display:grid; gap:2px; }
.footer-col a{ color:var(--c-text-inv-soft); text-decoration:none; font-size:.92rem; padding-block:6px; display:inline-block; }
.footer-col a:hover{ color:var(--c-champ); }

/* Блок контактов подвала */
.footer-contacts{ display:grid; gap:8px; font-size:.92rem; }
.footer-contacts a{ color:var(--c-text-inv-soft); text-decoration:none; }
.footer-contacts a:hover{ color:var(--c-champ); }
.footer-msgr{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.footer-msgr a{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; min-height:40px;
  border:1px solid rgba(220,192,143,.28); border-radius:var(--r-pill);
  color:var(--c-champ); text-decoration:none; font-size:.88rem;
}
.footer-msgr a:hover{ background:rgba(220,192,143,.1); }

.footer-div{ border:0; height:1px; margin-block:var(--s-3);
  background:linear-gradient(90deg, transparent, rgba(220,192,143,.25), transparent); }
.footer-legal{ display:grid; gap:8px; font-size:.82rem; }
.footer-legal a{ color:var(--c-text-inv-soft); }
.footer-legal a:hover{ color:var(--c-champ); }
.footer-note{ font-size:.75rem; color:#8F8288; }

/* ==========================================================
   16. МОБИЛЬНАЯ ПАНЕЛЬ ДЕЙСТВИЙ (thumb zone, ≤3 элементов)
   ========================================================== */
.mobilebar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  display:flex; gap:8px; padding:8px; border-radius:var(--r-pill);
  background:rgba(25,20,25,.96); border:1px solid rgba(220,192,143,.25);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
}
.mb-btn{
  flex:1; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--r-pill); text-decoration:none; font-size:.86rem; font-weight:600;
  color:var(--c-champ);
}
.mb-btn svg{ flex:none; }
.mb-primary{ flex:1.35; background:linear-gradient(165deg, #E4CA96, #C9A45C 55%, #B58B45);
  color:#241F27; border:1px solid var(--c-gold-line); }
@media (min-width:768px){ .mobilebar{ display:none; } body{ padding-bottom:0; } }

/* ==========================================================
   17. УТИЛИТЫ
   ========================================================== */
.mt-1{ margin-top:var(--s-1); } .mt-2{ margin-top:var(--s-2); } .mt-3{ margin-top:var(--s-3); }
.mt-4{ margin-top:var(--s-4); } .mt-5{ margin-top:var(--s-5); }
.text-center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.stack > * + *{ margin-top:var(--s-3); }
.hidden{ display:none !important; }

/* ==========================================================
   18. ДЕСКТОП-УТОЧНЕНИЯ И ДВИЖЕНИЕ
   ========================================================== */
@media (min-width:768px){
  .container{ padding-inline:28px; }
  .section{ padding-block:var(--s-7); }
  .reviews-row{ margin-top:var(--s-5); }
}
@media (min-width:1200px){
  body{ font-size:17px; }
  .container{ padding-inline:32px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}