/* =====================================================================
   ArtSauna Uzbekistan — styles.css
   Визуальный язык оригинала art-sauna.com: тёплый уголь #292725, широкий
   гротеск капсом («жирное + светлое»), фиолетовые кнопки с рамкой-смещением,
   разделители с засечкой, гексагоны с градиентной обводкой, водяной знак.
   Mobile-first: базовые стили = 360px, дальше min-width 600/768/1024/1280.

   1. TOKENS   2. RESET/BASE   3. LAYOUT   4. COMPONENTS
   5. HEADER/NAV   6. SECTIONS   7. MODALS   8. MOBILE BAR
   9. REVEAL / MOTION / PRINT
   ===================================================================== */

/* ============================ 1. TOKENS ============================ */
:root {
  /* фоны */
  --c-bg: #292725;
  --c-bg-alt: #211F1D;
  --c-bg-deep: #151413;
  --c-bg-raised: #33302D;
  --c-surface: #FFFFFF;
  --c-surface-2: #F6F6F6;
  --c-lilac-50: #F1EDFA;
  --c-lilac-200: #D0C2EF;

  /* текст */
  --c-text: #FFFFFF;
  --c-text-2: #BDBDBD;
  --c-text-3: #A9A9A8;
  --c-text-4: #8F8E8D;
  --c-ink: #292725;
  --c-ink-2: #545251;
  --c-ink-3: #767472;

  /* акцент «вода» */
  --c-violet: #8C6BD6;       /* декор, слова в заголовках ≥24px */
  --c-violet-600: #7D56D6;   /* заливка кнопок: белый текст 5.0:1 */
  --c-violet-700: #6A45C4;   /* hover */
  --c-violet-300: #A68BE6;   /* мелкий фиолетовый текст на тёмном */

  /* акцент «огонь» */
  --c-orange: #EC8B29;
  --c-coral: #FF8562;
  --c-orange-logo: #FF8A00;

  --c-error: #FF6B6B;
  --c-error-ink: #D93636;
  --c-success: #43C57A;

  /* линии */
  --c-line: rgba(255, 255, 255, .20);
  --c-line-soft: rgba(255, 255, 255, .08);
  --c-line-strong: rgba(255, 255, 255, .45);
  --c-line-ink: #E8E8E8;

  /* градиенты */
  --g-brand: linear-gradient(90deg, #8C6BD6 0%, #B95BD0 40%, #FF7A3D 78%, #ECB229 100%);
  --g-brand-v: linear-gradient(180deg, #8C6BD6 0%, #B95BD0 45%, #EC8B29 100%);
  --g-fade-bottom: linear-gradient(180deg, rgba(41, 39, 37, 0) 0%, #292725 100%);

  /* типографика */
  --ff-display: 'Unbounded', 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --ff-text: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --h-scale: 1;
  --fs-h1: calc(clamp(1.5rem, .9rem + 3vw, 2.8rem) * var(--h-scale));
  --fs-h2: calc(clamp(1.3rem, .85rem + 2.1vw, 2.5rem) * var(--h-scale));
  --fs-h3: calc(clamp(1.1rem, .9rem + .8vw, 1.6rem) * var(--h-scale));
  --fs-h4: calc(clamp(1rem, .9rem + .45vw, 1.35rem) * var(--h-scale));
  --fs-kicker: clamp(.8rem, .7rem + .5vw, 1.15rem);
  --fs-lead: clamp(1rem, .93rem + .33vw, 1.2rem);
  --fs-btn: clamp(.875rem, .82rem + .2vw, 1rem);

  /* сетка */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 3rem + 5vw, 120px);
  --head-gap: clamp(28px, 4vw, 56px);
  --frame-offset: 6px;

  /* тени/фокус */
  --shadow-header: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-modal: 0 40px 100px rgba(0, 0, 0, .55);
  --glow-violet: 0 12px 32px -10px rgba(125, 86, 214, .65);

  /* движение */
  --t-fast: .2s;
  --t-base: .35s;
  --t-slow: .6s;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --header-h: 72px;
  --mbar-h: 64px;
}
:root:lang(uz) { --h-scale: .9; }

/* ============================ 2. RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-width: 320px;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 1rem/1.55 var(--ff-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, figure, blockquote, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-violet-300); outline-offset: 3px; }
::selection { background: var(--c-violet-600); color: #fff; }

.i18n-pending body { visibility: hidden; }
.is-scroll-locked { overflow: hidden; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 12px 18px; background: var(--c-violet-600); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t-fast);
}
.skip-link:focus { transform: none; }

/* ============================ 3. LAYOUT ============================ */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; position: relative; z-index: 1; }
.section { position: relative; padding-block: 28px var(--section-y); overflow: hidden; isolation: isolate; }
/* Одноколоночные сетки на телефоне: колонка не должна раздуваться от длинных слов (UZ-строки длиннее) */
.about__grid, .design__grid, .details__grid, .steps__grid, .footer__grid, .portfolio__grid,
.adv-grid, .channels-grid, .contacts__box, .reviews__head, .social__head, .hero__inner, .about__body,
.design__form, .steps__side, .lead-form, .lead-form__row, .field { grid-template-columns: minmax(0, 1fr); }

/* разделитель с засечкой — фирменный приём оригинала */
.divider { position: relative; height: 1px; background: var(--c-line); margin-bottom: clamp(36px, 6vw, 88px); }
.divider::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 20px; background: var(--c-line); }

/* водяной знак ART SAUNA */
.watermark {
  position: absolute; z-index: -1; top: 40px; left: -2vw; right: 0;
  display: flex; flex-direction: column; pointer-events: none; user-select: none;
  font: 900 clamp(92px, 22vw, 290px)/.9 var(--ff-display); letter-spacing: .02em; text-transform: uppercase;
  color: rgba(255, 255, 255, .03);
}
.watermark span:first-child { padding-left: 42%; }
.watermark--right { top: auto; bottom: 20px; }

/* ============================ 4. COMPONENTS ============================ */
/* --- заголовки --- */
.h1, .h2 {
  font-family: var(--ff-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; margin: 0;
}
.h1 { font-size: var(--fs-h1); max-width: 22ch; }
.h2 { font-size: var(--fs-h2); max-width: 28ch; }
.h1 strong, .h2 strong { font-weight: 900; }
.h1 .light, .h2 .light { font-weight: 300; }
.h2--quote { font-weight: 300; }
.h2--quote strong { font-weight: 900; }
.h3 { font: 700 var(--fs-h3)/1.3 var(--ff-display); text-transform: uppercase; }
.accent { font-style: normal; color: var(--c-violet); }
.accent-ink { font-style: normal; color: var(--c-violet-600); }
.kicker {
  margin-top: 14px; font: 300 var(--fs-kicker)/1.35 var(--ff-display);
  text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .6); max-width: 60ch;
}
.kicker--top { margin: 0 0 12px; }
.section-head { margin-bottom: var(--head-gap); }
.section-head--center { text-align: center; }
.section-head--center .h2, .section-head--center .kicker { margin-inline: auto; }
.section-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; max-width: 70ch;
  font-size: .9rem; color: var(--c-text-3);
}
.section-note svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--c-violet); }

/* --- ссылки --- */
.link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--c-violet-300);
  font-weight: 600; text-decoration: none; transition: color var(--t-fast);
}
.link svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast); }
.link:hover { color: #fff; }
.link:hover svg { transform: translateX(4px); }
.link--ink { color: var(--c-violet-600); }
.link--ink:hover { color: var(--c-violet-700); }

/* --- кнопки --- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 0;
  background: var(--c-violet-600); color: #fff; text-decoration: none; text-align: center;
  font: 700 var(--fs-btn)/1.2 var(--ff-text); letter-spacing: .06em; text-transform: uppercase;
  transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--c-violet-700); box-shadow: var(--glow-violet); }
.btn:active { transform: translateY(1px); background: #5F3CB5; }
.btn:focus-visible { outline-offset: 4px; }
.btn[disabled] { cursor: progress; opacity: .8; }
.btn__icon { width: 20px; height: 20px; flex: none; }
.btn--frame::before {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--c-line-strong);
  transform: translate(calc(var(--frame-offset) * -1), calc(var(--frame-offset) * -1));
  transition: transform var(--t-base) var(--ease); pointer-events: none;
}
.btn--frame:hover::before { transform: translate(0, 0); }
.btn--lg { min-height: 64px; padding: 0 32px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .8rem; }
.btn--block { width: 100%; }
.btn--secondary { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.btn--secondary:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px #fff; }
.btn--secondary-ink { background: transparent; color: var(--c-violet-600); box-shadow: inset 0 0 0 1px var(--c-violet-600); }
.btn--secondary-ink:hover { background: var(--c-violet-600); color: #fff; }
.btn--nav { min-height: 48px; padding: 0 16px; font-size: .72rem; }
.btn__spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite;
}
[data-state="loading"] .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- иконки-кнопки --- */
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  color: #fff; text-decoration: none; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn--tg:hover { color: #2AABEE; }
.icon-btn--wa:hover { color: #25D366; }
.icon-btn--round { border: 1px solid var(--c-line-soft); border-radius: 50%; }
.icon-btn--round:hover { border-color: var(--c-violet); }
.icon-btn--ink { color: var(--c-ink); border: 1px solid var(--c-line-ink); border-radius: 50%; }

/* --- лок-ап логотипа --- */
.lockup { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.lockup picture { flex: none; }
.lockup__mark { width: var(--logo, 40px); height: auto; }
.lockup__name {
  display: block; font: 500 var(--logo-fs, 14px)/1 var(--ff-display);
  letter-spacing: .14em; text-transform: uppercase;
}
.lockup__sub {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font: 600 var(--logo-sub, 8px)/1 var(--ff-text); letter-spacing: .3em; text-transform: uppercase; color: var(--c-text-3);
}
.lockup__sub::before { content: ""; width: 14px; height: 1px; background: var(--g-brand); }
.lockup--footer { --logo: 64px; --logo-fs: 20px; --logo-sub: 11px; gap: 14px; }

/* --- play с кольцами --- */
.play {
  position: relative; flex: none; display: grid; place-items: center;
  width: clamp(96px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; color: inherit;
}
.play__rings { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--t-slow) var(--ease); }
.play b {
  width: 58%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center;
  transition: transform var(--t-base) var(--ease);
}
.play b::before {
  content: ""; margin-left: 10%; font-size: clamp(13px, 1.4vw, 19px);
  border-left: .9em solid var(--c-bg); border-top: .58em solid transparent; border-bottom: .58em solid transparent;
}
.play:hover .play__rings, .play:focus-visible .play__rings,
a:hover > .play .play__rings { transform: rotate(180deg); }
.play:hover b, a:hover > .play b { transform: scale(1.06); }
.play:focus-visible { outline-offset: 6px; }
.play--sm { width: 60px; }
.play--sm b::before { font-size: 11px; }

/* --- бейдж происхождения фото --- */
.origin-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px;
  background: rgba(21, 20, 19, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; color: #fff;
  font: 600 11px/1 var(--ff-text); letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
.origin-badge svg { width: 12px; height: 12px; flex: none; color: var(--c-violet-300); }
.origin-badge--static { position: static; }
.origin-badge--uz { background: rgba(125, 86, 214, .88); }

/* --- поля формы --- */
.field { display: grid; gap: 8px; }
.field__label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); }
.field__error { min-height: 0; font-size: .82rem; color: var(--c-error); }
.field__error:empty { display: none; }
.phone {
  display: flex; align-items: center; height: 60px; background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-lilac-200); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.phone__cc {
  display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px 0 14px;
  border-right: 1px solid var(--c-line-ink); font-weight: 600; white-space: nowrap;
}
.phone__cc svg { width: 24px; height: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.phone__input {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 14px; border: 0; outline: 0; background: none;
  font-size: 1.05rem; font-weight: 500; letter-spacing: .02em; color: inherit;
}
.phone__input::placeholder, .input::placeholder { color: var(--c-ink-3); }
.phone:focus-within { border-color: var(--c-violet-600); box-shadow: 0 0 0 3px rgba(125, 86, 214, .3); }
.field--invalid .phone, .field--invalid .input { border-color: var(--c-error-ink); }
.input {
  width: 100%; height: 56px; padding: 0 14px; background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-lilac-200); border-radius: 0; font-size: 1rem; outline: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus { border-color: var(--c-violet-600); box-shadow: 0 0 0 3px rgba(125, 86, 214, .3); }

/* чипсы (радио) */
.channels { display: flex; flex-wrap: wrap; gap: 8px; }
.channels .field__label { width: 100%; margin-bottom: 2px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--c-line-strong); font-size: .85rem; font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover span { border-color: #fff; }
.chip input:checked + span { background: var(--c-violet-600); border-color: var(--c-violet-600); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--c-violet-300); outline-offset: 2px; }

.consent { font-size: .78rem; line-height: 1.5; color: var(--c-text-3); }
.consent__link {
  padding: 0; border: 0; background: none; color: var(--c-violet-300);
  text-decoration: underline; text-underline-offset: 3px; font: inherit;
}
.lead-form { display: grid; gap: 18px; }
.lead-form__title { font-size: var(--fs-h4); line-height: 1.35; }
.lead-form__title strong { font-weight: 900; }
.lead-form__text { color: var(--c-text-2); }
.lead-form__status { font-size: .9rem; color: var(--c-text-2); }
.lead-form__status:empty { display: none; }
.lead-form__status.is-error { color: var(--c-error); }
.lead-form__fallback { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-success { padding: 28px; border: 1px solid var(--c-violet); background: rgba(125, 86, 214, .1); display: grid; gap: 10px; }
.lead-success .h3 { font-size: var(--fs-h4); }

.write-us { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .9rem; color: var(--c-text-2); }

/* ============================ 5. HEADER / NAV ============================ */
.header { position: fixed; inset: 0 0 auto; z-index: 50; }
/* Фон — в псевдоэлементе: backdrop-filter на самой шапке сделал бы её «контейнером»
   для position:fixed мобильного меню и обрезал бы его */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: rgba(33, 31, 29, .9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-header); transition: opacity var(--t-base);
}
.header--scrolled::before, .is-menu-open .header::before { opacity: 1; }
.header__inner {
  display: flex; align-items: center; gap: 8px; min-height: 64px;
}
.header__logo { margin-right: auto; }
.header__desc, .header__contact, .header__cta, .header__wa { display: none; }
.header__actions { display: flex; align-items: center; gap: 2px; }
.header__call { display: none; }

/* переключатель языка */
.lang { display: inline-flex; align-items: center; font: 600 12px/1 var(--ff-text); letter-spacing: .08em; }
.lang__btn {
  position: relative; display: grid; place-items: center; min-width: 40px; height: 44px; padding: 0 4px;
  color: var(--c-text-3); text-decoration: none; transition: color var(--t-fast);
}
.lang__btn:hover, .lang__btn[aria-current] { color: #fff; }
.lang__btn[aria-current]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 2px; background: var(--c-violet);
}
.lang i { width: 1px; height: 14px; background: var(--c-line); }
.lang--menu { gap: 8px; font-size: 14px; }
.lang--menu .lang__btn { flex: 1; height: 48px; border: 1px solid var(--c-line-strong); }
.lang--menu .lang__btn[aria-current] { background: var(--c-violet-600); border-color: var(--c-violet-600); }
.lang--menu .lang__btn[aria-current]::after { display: none; }

/* бургер */
.burger { position: relative; width: 44px; height: 44px; border: 0; background: none; padding: 0; }
.burger__line, .burger__line::before, .burger__line::after {
  position: absolute; left: 11px; width: 22px; height: 2px; background: #fff;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
}
.burger__line { top: 21px; }
.burger__line::before, .burger__line::after { content: ""; left: 0; }
.burger__line::before { top: -7px; }
.burger__line::after { top: 7px; }
.burger[aria-expanded="true"] .burger__line { background: transparent; }
.burger[aria-expanded="true"] .burger__line::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line::after { transform: translateY(-7px) rotate(-45deg); }

/* мобильное меню */
.nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49;
  display: flex; flex-direction: column; gap: 28px; padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--c-bg-alt); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s linear var(--t-base);
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__list { display: grid; }
.nav__link {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--c-line-soft);
  font: 400 1.15rem/1.3 var(--ff-display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  transition: color var(--t-fast);
}
.nav__link:hover, .nav__link.is-active { color: var(--c-violet-300); }
.nav__extra { display: grid; gap: 12px; margin-top: auto; }
.nav__phone { font: 800 1.35rem/1 var(--ff-display); text-decoration: none; padding: 8px 0; white-space: nowrap; }

@media (max-width: 379px) {
  /* самые узкие телефоны: Telegram остаётся в нижней панели */
  .header .icon-btn--tg { display: none; }
  .lang__btn { min-width: 34px; }
  .header .lockup__sub { display: none; }
}
@media (min-width: 420px) {
  .header__call { display: inline-grid; }
}
@media (min-width: 768px) {
  .lockup { --logo: 48px; --logo-fs: 16px; --logo-sub: 9px; }
  .header__contact { display: grid; justify-items: end; margin: 0 10px; }
  .header__consult { font-size: 11px; color: var(--c-text-3); }
  .header__phone { font: 800 1rem/1.3 var(--ff-display); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .header__phone:hover { color: var(--c-violet-300); }
  .header__call { display: none; }
  .header__wa { display: inline-grid; }
}
@media (min-width: 1280px) {
  /* двухуровневая шапка над hero: логотип | дескриптор | контакты;  ниже — меню */
  .header__inner {
    display: grid; align-items: center; column-gap: 28px;
    grid-template-columns: auto minmax(0, 320px) 1fr auto;
    grid-template-areas: "logo desc . actions" "nav nav nav nav";
    padding-top: 22px;
  }
  .header__inner::before {
    content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--c-line);
  }
  .header__logo { grid-area: logo; margin: 0; --logo: 56px; --logo-fs: 18px; --logo-sub: 10px; }
  .header__desc {
    grid-area: desc; display: block; position: relative; padding-left: 28px;
    font: 700 10.5px/1.5 var(--ff-text); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2);
  }
  .header__desc::before { content: ""; position: absolute; left: 0; top: -22px; width: 1px; height: 20px; background: var(--c-line); }
  .header__actions { grid-area: actions; }
  .nav {
    grid-area: nav; position: static; visibility: visible; opacity: 1; transform: none; transition: none;
    flex-direction: row; padding: 0; background: none; overflow: visible; margin-top: 14px;
    border-top: 1px solid var(--c-line-soft);
  }
  .nav__list { display: flex; gap: clamp(18px, 2.2vw, 36px); }
  .nav__link {
    padding: 14px 0; border: 0; position: relative; white-space: nowrap;
    font: 600 12.5px/1 var(--ff-text); letter-spacing: .08em;
  }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 1px; background: var(--c-violet);
    transition: right var(--t-base) var(--ease);
  }
  .nav__link:hover::after, .nav__link.is-active::after { right: 0; }
  .nav__extra, .burger { display: none; }

  /* компактная (после скролла): одна строка */
  .header--scrolled .header__inner {
    grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav actions"; padding-top: 0; min-height: 68px;
  }
  .header--scrolled .header__inner::before, .header--scrolled .header__desc, .header--scrolled .header__contact { display: none; }
  .header--scrolled .header__logo { --logo: 40px; --logo-fs: 15px; }
  .header--scrolled .lockup__sub { display: none; }
  .header--scrolled .nav { margin: 0; border: 0; justify-content: center; }
  .header--scrolled .nav__list { gap: clamp(16px, 1.6vw, 28px); }
  .header--scrolled .nav__link { font-size: 12px; }
  .header--scrolled .header__cta { display: inline-flex; }
  .header--scrolled .header__wa { display: none; }
}

/* ============================ 6. SECTIONS ============================ */
/* ---------- HERO ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end; min-height: 100svh; min-height: max(620px, 100svh);
  padding: calc(var(--header-h) + 40px) 0 88px; overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 20, 19, .55) 0%, rgba(21, 20, 19, .35) 30%, rgba(21, 20, 19, .8) 70%, #292725 100%);
}
.hero__inner { display: grid; gap: 18px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 8px 12px; border: 1px solid var(--c-line); background: rgba(21, 20, 19, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 11px/1.3 var(--ff-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2);
}
.hero__badge svg { width: 14px; height: 14px; flex: none; color: var(--c-violet-300); }
.hero__kicker { font: 300 var(--fs-kicker)/1.35 var(--ff-display); text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
.hero__actions { position: relative; display: grid; gap: 14px; margin-top: 14px; }
.hero__arrow { display: none; }
.hero__micro { font-size: .85rem; color: var(--c-text-2); }
.hero__scroll { display: none; }

@media (min-width: 640px) {
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
}
@media (min-width: 1024px) {
  .hero { align-items: center; padding-bottom: 120px; }
  .hero__bg img { object-position: 60% 50%; }
  .hero__bg::after {
    background:
      linear-gradient(90deg, rgba(21, 20, 19, .9) 0%, rgba(21, 20, 19, .7) 42%, rgba(21, 20, 19, .25) 100%),
      linear-gradient(180deg, rgba(41, 39, 37, 0) 70%, #292725 100%);
  }
  .hero__inner { gap: 22px; max-width: 920px; margin-top: 80px; }
  .hero .btn--lg { min-height: 80px; min-width: 320px; padding: 0 40px; }
  .hero .btn--frame { padding-left: 68px; } /* место под декоративную стрелку */
  .hero__arrow {
    display: block; position: absolute; left: -48px; top: 31px; z-index: 2; pointer-events: none; opacity: .85;
    transition: transform var(--t-base) var(--ease);
  }
  .hero__actions:hover .hero__arrow { transform: translateX(6px); }
  .hero__scroll {
    position: absolute; left: 50%; bottom: 28px; display: grid; gap: 0; transform: translateX(-50%); padding: 8px;
  }
  .hero__scroll svg { width: 22px; height: 16px; margin-top: -6px; animation: chev 1.6s infinite; opacity: .15; }
  .hero__scroll svg:nth-child(2) { animation-delay: .15s; }
  .hero__scroll svg:nth-child(3) { animation-delay: .3s; }
}
@keyframes chev { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* ---------- ABOUT ---------- */
.about__grid { display: grid; gap: 40px; }
.about__photo { position: relative; max-width: 420px; margin-inline: auto 9px; width: calc(100% - 9px); }
.about__photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 436 / 560; object-fit: cover; object-position: 50% 20%; }
.about__frame { position: absolute; inset: 0; border: 1px solid var(--c-line); transform: translate(9px, 9px); }
.about__caption { position: relative; z-index: 1; display: grid; gap: 4px; margin-top: 18px; }
.about__caption b { font: 800 1rem/1.2 var(--ff-display); text-transform: uppercase; letter-spacing: .04em; }
.about__caption span { font-size: .85rem; color: var(--c-text-3); }
.about__body { display: grid; gap: 28px; align-content: start; }
.about__text { display: grid; gap: 16px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .82); }
.about__video { display: flex; align-items: center; gap: 22px; }
.about__play-text { font: 900 clamp(.8rem, .7rem + .4vw, 1rem)/1.45 var(--ff-display); text-transform: uppercase; }
.about__play-time { display: block; margin-top: 6px; color: var(--c-violet-300); }

.facts { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--c-line-soft); }
.facts__item { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: baseline; gap: 12px; font-size: .85rem; color: var(--c-text-3); line-height: 1.35; }
.facts__num {
  font: 800 clamp(1.1rem, .8rem + 1.6vw, 2rem)/1.1 var(--ff-display); color: #fff;
  background: var(--g-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (min-width: 520px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .facts__item { grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; font-size: .8rem; }
}
.facts__num span { -webkit-text-fill-color: transparent; }
[data-count-to] { display: inline-block; font-variant-numeric: tabular-nums; }

.head-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--c-line-soft);
  background: rgba(255, 255, 255, .03);
}
.head-card__avatar {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--c-bg-raised); color: var(--c-text-4); box-shadow: 0 0 0 1px var(--c-violet);
}
.head-card__avatar svg { width: 40px; height: 40px; margin-top: 10px; }
.head-card__avatar img, .team__avatar--ph img { width: 100%; height: 100%; object-fit: cover; }
.head-card__body { display: grid; gap: 4px; }
.head-card__name { font: 700 1rem/1.3 var(--ff-display); }
.head-card__role { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-violet-300); }
.head-card__text { margin: 6px 0 8px; font-size: .9rem; color: var(--c-text-2); }

@media (min-width: 1024px) {
  .about__grid { grid-template-columns: 436px 1fr; gap: 80px; align-items: start; }
  .about__photo { margin: 0; width: 100%; }
  .about__caption {
    position: absolute; z-index: 2; left: calc(100% + 26px); top: 0; margin: 0;
    writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; height: 100%; justify-content: end;
    grid-auto-flow: column; gap: 10px; align-content: start;
  }
  .about__caption b { font-size: 1.05rem; }
}

/* ---------- PORTFOLIO ---------- */
.portfolio__grid { display: grid; gap: 32px 24px; }
.portfolio__item { min-width: 0; }
.project-card {
  display: grid; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
.project-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-raised); }
.project-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.project-card__media .project-card__hover { opacity: 0; }
.project-card__view {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -40%); opacity: 0;
  padding: 12px 18px; border: 1px solid var(--c-line-strong); background: rgba(21, 20, 19, .55);
  font: 700 12px/1 var(--ff-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: opacity var(--t-base), transform var(--t-base) var(--ease);
}
.project-card__body { display: grid; gap: 6px; position: relative; padding-bottom: 12px; }
.project-card__body::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--g-brand);
  transition: width var(--t-base) var(--ease);
}
.project-card__title { font: 700 1.05rem/1.3 var(--ff-text); transition: color var(--t-fast); }
.project-card__meta { font-size: .82rem; color: var(--c-text-3); }
.project-card:hover .project-card__media img, .project-card:focus-visible .project-card__media img { transform: scale(1.04); }
.project-card:hover .project-card__hover { opacity: 1; }
.project-card:hover .project-card__view, .project-card:focus-visible .project-card__view { opacity: 1; transform: translate(-50%, -50%); }
.project-card:hover .project-card__title { color: var(--c-violet-300); }
.project-card:hover .project-card__body::after, .project-card:focus-visible .project-card__body::after { width: 100%; }
.project-card:focus-visible { outline-offset: 6px; }

/* спецкарточка «Ваш проект в Ташкенте» */
.special-card {
  position: relative; display: grid; align-content: space-between; gap: 24px; height: 100%; min-height: 280px;
  padding: clamp(24px, 4vw, 40px); overflow: hidden; isolation: isolate;
  background: linear-gradient(var(--c-bg-raised), var(--c-bg-raised)) padding-box, var(--g-brand) border-box;
  border: 1px solid transparent;
}
.special-card__mark { width: 72px; height: 72px; }
.special-card__title { font: 400 var(--fs-h3)/1.25 var(--ff-display); text-transform: uppercase; }
.special-card__title strong { font-weight: 900; }
.special-card__text { color: var(--c-text-2); font-size: .95rem; }
.special-card__body { display: grid; gap: 14px; }

.portfolio__more { display: flex; justify-content: center; margin-top: 44px; }
.portfolio__more .btn { min-width: min(320px, 100%); }

@media (min-width: 600px) {
  .portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .project-card__media { aspect-ratio: 3 / 2; }
}

/* ---------- DESIGN + FORM ---------- */
.design__grid { display: grid; gap: 40px; }
.dcard { background: #fff; color: var(--c-ink); display: grid; align-content: start; }
.dcard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dcard__body { display: grid; gap: 18px; padding: clamp(20px, 3.5vw, 36px); }
.dcard__title { padding-bottom: 14px; border-bottom: 1px solid var(--c-line-ink); font: 700 var(--fs-h4)/1.2 var(--ff-display); text-transform: uppercase; text-align: center; }
.dcard__text { display: grid; gap: 10px; font-size: .92rem; color: var(--c-ink-2); }
.dcard__video {
  display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--c-line-ink);
  color: var(--c-ink); font-weight: 700; font-size: .9rem; text-decoration: none;
}
.dcard__video .play b { background: var(--c-violet-600); }
.dcard__video .play b::before { border-left-color: #fff; }
.dcard__video:hover { color: var(--c-violet-600); }

.design__form { display: grid; gap: 28px; align-content: start; }
.plaque {
  position: relative; padding: 18px 20px 18px 30px; background: rgba(255, 255, 255, .04);
  font-size: .95rem; color: var(--c-text-2);
}
.plaque::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c-violet); }
.plaque strong { color: #fff; }

@media (min-width: 1024px) {
  .design__grid { grid-template-columns: minmax(0, 550px) minmax(0, 1fr); gap: 72px; }
}

/* ---------- DETAILS ---------- */
.details__grid { display: grid; gap: 28px; }
.details__card { background: #fff; color: var(--c-ink); padding: clamp(20px, 3.5vw, 40px); display: grid; gap: 20px; min-width: 0; }
.details__card-title { padding-bottom: 14px; border-bottom: 1px solid var(--c-line-ink); font: 700 var(--fs-h4)/1.2 var(--ff-display); text-transform: uppercase; }
/* мобильный вид: горизонтальная лента карточек с фото */
.details__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px;
  scrollbar-width: thin;
}
.details__item { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.details__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-surface-2); }
.details__btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font: 700 .78rem/1.3 var(--ff-text); letter-spacing: .01em; text-transform: uppercase; color: var(--c-ink);
}
.details__btn::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-violet);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-lilac-200);
  transition: transform var(--t-fast);
}
.details__item--uz .details__btn::after {
  content: "UZ"; margin-left: 4px; padding: 3px 5px; border-radius: 2px; background: var(--c-lilac-50);
  color: var(--c-violet-600); font-size: .62rem; letter-spacing: .08em;
}
.details__more { padding-top: 16px; border-top: 1px solid var(--c-line-ink); font: 700 clamp(.9rem, .8rem + .4vw, 1.05rem)/1.45 var(--ff-display); }
.details__more strong { font-weight: 900; color: var(--c-violet-600); }
.details__stage { display: none; }

@media (min-width: 1024px) {
  .details__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .details__list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); gap: 0 20px; overflow: visible; margin: 0; padding: 0; }
  .details__thumb { display: none; }
  .details__btn { min-height: 52px; padding: 0 10px; transition: background var(--t-fast), color var(--t-fast); }
  .details__btn:hover, .details__btn[aria-pressed="true"] { background: var(--c-lilac-50); color: var(--c-violet-600); }
  .details__btn[aria-pressed="true"]::before { transform: scale(1.3); }
  .details__stage { display: block; position: relative; overflow: hidden; min-height: 460px; background: var(--c-bg-raised); }
  .details__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
  .details__layer.is-active { opacity: 1; }
  .details__caption {
    position: absolute; left: 0; bottom: 0; z-index: 2; padding: 14px 20px; background: rgba(21, 20, 19, .7);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font: 700 .8rem/1 var(--ff-text); letter-spacing: .08em; text-transform: uppercase;
  }
}

/* ---------- ADVANTAGES ---------- */
.advantages { padding-bottom: calc(var(--section-y) + 20px); }
.advantages__bg { position: absolute; inset: 0; z-index: -1; }
.advantages__bg img { width: 100%; height: 100%; object-fit: cover; }
.advantages__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #292725 0%, rgba(41, 39, 37, .88) 16%, rgba(41, 39, 37, .88) 84%, #292725 100%);
}
.adv-grid { display: grid; gap: 22px; }
.adv { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.hex { position: relative; display: grid; place-items: center; width: 88px; aspect-ratio: 179 / 180; }
.hex__frame { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--t-slow) var(--ease); }
.hex__ico { width: 30px; height: 30px; color: #fff; }
.adv:hover .hex__frame { transform: rotate(180deg); }
.adv__title { margin-bottom: 6px; font: 700 var(--fs-h4)/1.3 var(--ff-display); }
.adv p { color: var(--c-text-2); font-size: .92rem; }
@media (min-width: 768px) {
  .adv-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 48px; }
  .hex { width: 112px; }
  .hex__ico { width: 34px; height: 34px; }
}
@media (min-width: 1200px) { .hex { width: 140px; } .hex__ico { width: 38px; height: 38px; } }

/* ---------- STEPS ---------- */
.steps__grid { display: grid; gap: 40px; }
.timeline { position: relative; padding-left: 60px; }
.timeline::before { content: ""; position: absolute; left: 19.5px; top: 36px; bottom: 36px; width: 1px; background: var(--g-brand-v); }
.step {
  position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.step::before {
  content: ""; position: absolute; left: -60px; top: 18px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(140, 107, 214, .45); background: var(--c-bg);
}
.step::after {
  content: ""; position: absolute; left: -47.5px; top: 30.5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-violet); transition: transform var(--t-base) var(--ease);
}
.step.is-visible::after { transform: scale(1.2); }
.step--last::after { background: var(--c-orange-logo); }
.step__num { font: 900 var(--fs-h4)/1.4 var(--ff-display); flex: none; }
.step__tick { flex: none; width: 1px; height: 20px; margin-top: 5px; background: var(--c-line); }
.step__title { font: 700 var(--fs-h4)/1.4 var(--ff-display); }
.step p { margin-top: 4px; font-size: .9rem; color: var(--c-text-3); }

.steps__side { display: grid; gap: 32px; align-content: start; }
.wcard { background: #fff; color: var(--c-ink); padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 16px; }
.wcard__title { padding-bottom: 14px; border-bottom: 1px solid var(--c-line-ink); font: 400 var(--fs-h3)/1.2 var(--ff-display); text-transform: uppercase; }
.wcard__cols { display: grid; gap: 16px; }
.wcard__col { display: grid; gap: 8px; align-content: start; }
.wcard__label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.wcard__phone { font: 800 1.15rem/1.2 var(--ff-display); text-decoration: none; white-space: nowrap; }
.wcard__phone:hover { color: var(--c-violet-600); }
.wcard__icons { display: flex; gap: 8px; }


@media (min-width: 600px) { .wcard__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .steps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; }
}

/* ---------- REVIEWS ---------- */
.reviews__head { display: grid; gap: 24px; margin-bottom: var(--head-gap); }
.reviews__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.reviews__nav .btn { flex: 1 1 150px; }
.reviews__counter { display: flex; align-items: center; gap: 10px; flex-basis: 100%; font: 300 .9rem/1 var(--ff-display); color: var(--c-text-3); }
.reviews__counter b { font-weight: 900; color: #fff; }
.reviews__progress { position: relative; flex: 1; max-width: 160px; height: 2px; background: var(--c-line-soft); }
.reviews__progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 33.3%; background: var(--g-brand); transition: width var(--t-base) var(--ease); }

.reviews__track {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; gap: 24px; background: #fff; color: var(--c-ink); padding: clamp(20px, 4vw, 56px);
}
.review__text { display: grid; gap: 10px; align-content: start; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-ink); margin-bottom: 6px; }
.review__title { font: 700 clamp(1.05rem, .9rem + .7vw, 1.4rem)/1.2 var(--ff-display); text-transform: uppercase; }
.review__badge { position: static; background: var(--c-lilac-50); color: var(--c-violet-600); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.review__badge svg { color: var(--c-violet-600); }
.review__label { margin-top: 8px; font: 700 .95rem/1.3 var(--ff-display); }
.review__text p { font-size: .9rem; line-height: 1.6; color: var(--c-ink-2); }
.review__quote { display: flex; gap: 14px; align-items: center; margin-top: 10px; padding: 14px; background: var(--c-surface-2); }
.review__avatar {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--g-brand); color: #fff; font: 800 1.1rem/1 var(--ff-display);
}
.review__quote blockquote p { font-style: italic; color: var(--c-ink); }
.review__quote figcaption { margin-top: 4px; font-size: .8rem; font-weight: 700; }
.review__video {
  position: relative; display: block; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg);
  color: #fff; text-decoration: none;
}
.review__video img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.review__video::after { content: ""; position: absolute; inset: 0; background: rgba(21, 20, 19, .25); transition: background var(--t-base); }
.review__video .play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; transform: translate(-50%, -50%); }
.review__video-label {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 10px 14px; background: rgba(21, 20, 19, .7);
  font: 700 11px/1 var(--ff-text); letter-spacing: .08em; text-transform: uppercase;
}
.review__video:hover img { transform: scale(1.04); }
.review__video:hover::after { background: rgba(21, 20, 19, .1); }

.dots { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.dots__btn { position: relative; width: 28px; height: 28px; border: 0; background: none; padding: 0; }
.dots__btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-line-strong); transition: background var(--t-fast), transform var(--t-fast); }
.dots__btn[aria-current]::before { background: var(--c-violet); transform: scale(1.2); }
.reviews__more { margin-top: 28px; text-align: center; }

@media (min-width: 1024px) {
  .reviews__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .reviews__nav { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 16px 14px; }
  .reviews__nav .btn { flex: 0 0 auto; }
  .reviews__counter { grid-column: 1 / -1; justify-content: flex-end; }
  .reviews__nav .btn--nav::before {
    content: ""; position: absolute; inset: 0; border: 1px solid var(--c-line); transform: translate(-4px, -4px);
    transition: transform var(--t-base) var(--ease); pointer-events: none;
  }
  .reviews__nav .btn--nav:hover::before { transform: none; }
  .review { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; }
  .dots { display: none; }
}

/* ---------- SOCIAL ---------- */
.social__head { display: grid; gap: 24px; align-items: center; margin-bottom: var(--head-gap); }
.social__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--c-line), 0 0 0 8px var(--c-bg), 0 0 0 9px var(--c-line-soft); }
.social__sub { margin-top: 14px; color: var(--c-text-2); font-size: var(--fs-lead); }
.social__sub strong { color: #fff; }
.channels-grid { display: grid; gap: 14px; }
.channel {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 18px 20px; background: #fff; color: var(--c-ink);
  text-decoration: none; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base);
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); }
.channel > span:last-child { display: grid; gap: 2px; }
.channel b { font: 700 .95rem/1.3 var(--ff-display); }
.channel span span { font-size: .82rem; color: var(--c-ink-2); }
.channel__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: #fff; }
.channel__icon svg { width: 26px; height: 26px; }
.channel__icon--yt { background: #FF0000; }
.channel__icon--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.channel__icon--tg { background: #2AABEE; }
@media (min-width: 600px) { .channels-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .social__head { grid-template-columns: 195px 1fr; gap: 48px; }
  .social__photo { width: 195px; height: 195px; }
  .channels-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .channel { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* ---------- FAQ ---------- */
.faq__list { max-width: 880px; margin-inline: auto; } /* одна колонка по центру под заголовком */
.faq__item { border-bottom: 1px solid var(--c-line-soft); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0;
  list-style: none; cursor: pointer; font: 700 1.02rem/1.4 var(--ff-text); transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-violet-300); }
.faq__icon {
  flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(90deg, #8C6BD6, #7D56D6); transition: transform var(--t-base) var(--ease), background var(--t-fast);
}
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > .faq__q .faq__icon { transform: rotate(45deg); }
.faq__q:hover .faq__icon { background: var(--c-violet-700); }
.faq__a { padding: 0 44px 22px 0; color: var(--c-text-2); max-width: 68ch; }
.faq__a p + p { margin-top: 10px; }
.faq__a b { color: #fff; }


/* ---------- CONTACTS ---------- */
.contacts { padding-bottom: calc(var(--section-y) + 20px); }
.contacts__bg { position: absolute; inset: 0; z-index: -1; }
.contacts__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.contacts__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #292725 0%, rgba(21, 20, 19, .82) 18%, rgba(21, 20, 19, .82) 100%);
}
.contacts__box { display: grid; gap: 20px; max-width: 700px; }
.contacts__phone { font: 800 clamp(1.5rem, 1.1rem + 2vw, 2.4rem)/1.1 var(--ff-display); text-decoration: none; white-space: nowrap; margin-top: 8px; }
.contacts__phone:hover { color: var(--c-violet-300); }
.contacts__actions { display: grid; gap: 14px; margin-top: 6px; }
.contacts__form { margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.lead-form--inline { gap: 12px; }
.lead-form__row { display: grid; gap: 12px; }
.contacts__list { display: grid; gap: 12px; margin-top: 10px; color: var(--c-text-2); font-size: .92rem; }
.contacts__list li { display: flex; align-items: flex-start; gap: 12px; }
.contacts__list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-violet-300); }
.contacts__list a { text-decoration: none; }
.contacts__list a:hover { color: #fff; }
@media (min-width: 600px) {
  .contacts__actions { grid-template-columns: 1fr 1fr; }
  .lead-form__row { grid-template-columns: 1fr auto; align-items: start; }
  .lead-form__row .btn { min-height: 60px; }
}
@media (min-width: 1024px) {
  .contacts__bg::after { background: linear-gradient(90deg, rgba(21, 20, 19, .94) 0%, rgba(21, 20, 19, .8) 52%, rgba(21, 20, 19, .35) 100%), linear-gradient(180deg, #292725 0%, rgba(41, 39, 37, 0) 20%); }
}

/* ---------- FOOTER ---------- */
.footer { position: relative; padding: 28px 0 calc(28px + var(--mbar-h) + env(safe-area-inset-bottom)); background: var(--c-bg-alt); isolation: isolate; overflow: hidden; }
.ornament::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M29.62 29.62h36.76v36.76H29.62z'/%3E%3Cpath d='M48 22l26 26-26 26-26-26z'/%3E%3Cpath d='M48 0v22M48 74v22M0 48h22M74 48h22M5 5l24.62 24.62M91 5L66.38 29.62M91 91L66.38 66.38M5 91l24.62-24.62M10 0L0 10M86 0l10 10M96 86l-10 10M0 86l10 10'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/svg%3E");
  background-size: 96px 96px; opacity: var(--ornament-opacity, .06);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 85% 40%, #000 0%, transparent 70%);
}
.footer.ornament::before {
  --ornament-opacity: .05;
  -webkit-mask-image: linear-gradient(#000, transparent 260px); mask-image: linear-gradient(#000, transparent 260px);
}
.footer__grid { display: grid; gap: 36px; }
.footer__col { display: grid; gap: 14px; align-content: start; }
.footer__desc { font-size: .9rem; color: var(--c-text-3); max-width: 36ch; }
.footer__hq { font-size: .88rem; }
.footer__label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.footer__phone { font: 800 1.25rem/1.2 var(--ff-display); text-decoration: none; white-space: nowrap; }
.footer__phone:hover, .footer__mail:hover { color: var(--c-violet-300); }
.footer__mail { text-decoration: none; color: var(--c-text-2); }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.team { display: grid; }
.team__item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-line-soft); }
.team__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; overflow: hidden; }
.team__avatar--ph { display: grid; place-items: end center; background: var(--c-bg-raised); color: var(--c-text-4); }
.team__avatar--ph svg { width: 70%; height: 70%; }
.team__role { display: block; font-size: .75rem; color: var(--c-text-3); }
.team b { font-size: .95rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-line-soft);
  font-size: .78rem; color: var(--c-text-4);
}
.footer__privacy { padding: 0; border: 0; background: none; color: var(--c-text-3); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.footer__privacy:hover { color: #fff; }
@media (min-width: 768px) {
  .footer { padding-bottom: 32px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__col:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; }
  .footer__col:last-child { grid-column: auto; }
}

/* ============================ 7. MODALS ============================ */
dialog { padding: 0; border: 0; background: none; color: inherit; max-width: none; max-height: none; }
.modal::backdrop, .lightbox::backdrop { background: rgba(12, 11, 10, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { display: grid; place-items: end center; width: 100%; height: 100%; }
.modal__box {
  position: relative; width: 100%; max-height: calc(100svh - 12px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--c-ink); padding: 52px 20px 24px; box-shadow: var(--shadow-modal);
  animation: modal-in var(--t-base) var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal__close {
  position: absolute; right: 8px; top: 8px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: none; color: var(--c-ink); transition: color var(--t-fast);
}
.modal__close svg { width: 22px; height: 22px; }
.modal__close:hover { color: var(--c-violet-600); }
.modal__close--light { color: #fff; right: 0; top: -52px; }
.modal__box--text { max-width: 720px; }
.privacy { display: grid; gap: 12px; margin-top: 18px; font-size: .92rem; color: var(--c-ink-2); }
.privacy b { color: var(--c-ink); }
.privacy__todo { padding: 12px 14px; background: var(--c-lilac-50); color: var(--c-violet-700); font-size: .85rem; }
@media (min-width: 640px) {
  .modal[open] { place-items: center; padding: 24px; }
  .modal__box { width: min(640px, 100%); padding: clamp(40px, 5vw, 56px); }
}

/* --- квиз (внутри белого окна) --- */
.quiz { gap: 22px; }
.quiz__head { display: grid; gap: 10px; }
.quiz__title { font: 700 clamp(1.15rem, 1rem + .9vw, 1.6rem)/1.25 var(--ff-display); text-transform: uppercase; color: var(--c-ink); padding-right: 30px; }
.quiz__sub { font-size: .92rem; color: var(--c-ink-2); }
.quiz__project { font-size: .85rem; padding: 8px 12px; background: var(--c-lilac-50); color: var(--c-violet-700); }
.quiz__progress { display: grid; gap: 8px; margin-top: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.quiz__bar { position: relative; height: 3px; background: var(--c-line-ink); }
.quiz__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--g-brand); transition: width var(--t-base) var(--ease); }
.quiz__step { display: grid; gap: 16px; animation: step-in var(--t-base) var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(12px); } }
.quiz__q { margin-bottom: 4px; font: 700 1.05rem/1.3 var(--ff-display); color: var(--c-ink); }
.quiz__options { display: grid; gap: 10px; }
.quiz__options--grid { grid-template-columns: 1fr 1fr; }
.option--wide { grid-column: 1 / -1; }
.option { position: relative; cursor: pointer; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option span {
  display: flex; align-items: center; min-height: 54px; padding: 12px 16px 12px 46px; position: relative;
  border: 1px solid var(--c-lilac-200); font-weight: 600; font-size: .95rem; color: var(--c-ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.option span::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  border: 1px solid var(--c-lilac-200); background: #fff; transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.option:hover span { border-color: var(--c-violet-600); background: var(--c-lilac-50); }
.option input:checked + span { border-color: var(--c-violet-600); background: var(--c-lilac-50); }
.option input:checked + span::before { border-color: var(--c-violet-600); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px var(--c-violet-600); }
.option input:focus-visible + span { outline: 2px solid var(--c-violet-600); outline-offset: 2px; }
.option--muted span { color: var(--c-ink-2); font-weight: 500; }
.quiz .field__label { color: var(--c-ink-2); }
.quiz .field__error { color: var(--c-error-ink); }
.quiz .chip span { border-color: var(--c-lilac-200); color: var(--c-ink); }
.quiz .chip:hover span { border-color: var(--c-violet-600); }
.quiz .chip input:checked + span { color: #fff; }
.quiz .consent { color: var(--c-ink-2); }
.quiz .consent__link { color: var(--c-violet-600); }
.quiz .lead-form__status { color: var(--c-ink-2); }
.quiz .lead-form__status.is-error { color: var(--c-error-ink); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.quiz__nav:has(> [hidden]:first-child + [hidden]) { display: none; }
.quiz__next { margin-left: auto; }
.quiz__back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--c-ink-2); font-weight: 600; font-size: .9rem;
}
.quiz__back svg { width: 18px; height: 18px; }
.quiz__back:hover { color: var(--c-violet-600); }
.quiz__success { border: 0; background: none; padding: 8px 0 0; gap: 14px; color: var(--c-ink-2); }

/* --- видео --- */
.modal--video[open] { place-items: center; padding: 64px 12px 12px; }
.modal__video { position: relative; width: min(1100px, 100%); animation: modal-in var(--t-base) var(--ease); }
.modal__frame { aspect-ratio: 16 / 9; background: #000; }
.modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- лайтбокс --- */
.lightbox[open] { display: block; width: 100%; height: 100%; }
.lightbox__box {
  display: grid; grid-template-rows: auto 1fr auto; width: 100%; height: 100%; background: var(--c-bg-deep); color: #fff;
  animation: modal-in var(--t-base) var(--ease);
}
.lightbox__top { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 20px; }
.lightbox__counter { font: 300 .95rem/1 var(--ff-display); color: var(--c-text-2); }
.lightbox__close { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: none; color: #fff; }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox__stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 0 12px; touch-action: pan-y pinch-zoom; user-select: none; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity var(--t-base); }
.lightbox__stage.is-loading .lightbox__img { opacity: .35; }
.lightbox__arrow {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px;
  border: 1px solid var(--c-line-strong); border-radius: 50%; background: rgba(21, 20, 19, .55); color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lightbox__arrow svg { width: 22px; height: 22px; }
.lightbox__arrow:hover { background: var(--c-violet-600); border-color: var(--c-violet-600); }
.lightbox__arrow--prev { left: 12px; }
.lightbox__arrow--next { right: 12px; }
.lightbox__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line-soft); }
.lightbox__info { display: grid; gap: 8px; }
.lightbox__caption { font: 700 1rem/1.3 var(--ff-display); }
@media (min-width: 768px) {
  .lightbox__stage { padding: 0 88px; }
  .lightbox__arrow { width: 56px; height: 56px; margin-top: -28px; }
  .lightbox__arrow--prev { left: 20px; }
  .lightbox__arrow--next { right: 20px; }
}

/* ============================ 8. MOBILE BAR ============================ */
.mbar {
  position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 2fr;
  height: calc(var(--mbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(33, 31, 29, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line-soft);
  transform: translateY(110%); transition: transform var(--t-base) var(--ease);
}
.mbar.is-visible { transform: none; }
.mbar__btn {
  display: grid; place-items: center; align-content: center; gap: 4px; padding: 0 6px; border: 0; background: none;
  color: #fff; text-decoration: none; font: 600 10.5px/1.1 var(--ff-text); letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.mbar__btn svg { width: 22px; height: 22px; }
.mbar__btn--main { background: var(--c-violet-600); font-size: 12.5px; font-weight: 700; }
.is-modal-open .mbar, .is-menu-open .mbar { transform: translateY(110%); }
@media (min-width: 768px) { .mbar { display: none; } }

/* ============================ 9. REVEAL / MOTION / PRINT ============================ */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity .7s var(--ease) var(--reveal-delay, 0ms), transform .7s var(--ease) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js:not(.reveal-ready) [data-reveal] { animation: reveal-failsafe 0s linear 2.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__scroll svg { opacity: .6; }
}

@media print {
  .header, .mbar, dialog, .hero__scroll, .watermark { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}