/* =========================================================
   Moonlight — сайт студии. Палитра взята из приложения,
   чтобы сайт и приложение выглядели одним брендом.
   ========================================================= */
:root{
  --bg:#0F0E0C; --bg2:#14130F; --card:#1A1814; --card2:#221F19;
  --border:#2C2A24; --olive:#A38A5E; --olive2:#8A7248;
  --olive-glow:rgba(163,138,94,0.13); --wine:#6B3A3A;
  --text:#F2EDE4; --muted:#9E9A8C; --dim:#6E6A5F;
  /* === NEW: розовый акцент для "фонарика" за курсором и дымного морфинга —
     курсор/эффекты теперь в тон неоново-розовым референсам, а не в золото
     (золото остаётся у кнопок/иконок — фирменный акцент бренда не трогаем) */
  --pink:#E85CB8; --pink-soft:rgba(232,92,184,0.35);

  /* === NEW: сменили дисплейный шрифт на Vollkorn (по референсу) — старый
     тёплый книжный serif с засечками, ближе к стилю референс-сайта. === */
  --f-display:'Vollkorn', serif;
  --f-label:'Space Grotesk', sans-serif;
  --f-body:'Manrope', sans-serif;

  --header-h:76px;
  --morph:0;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  overflow-x:hidden;
  /* === NEW: адаптация под телефоны (iOS/Android) === */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* === NEW: убираем стандартную серо-синюю вспышку при тапе на телефоне —
   у нас везде свои hover/active-эффекты (ripple, scale и т.д.), системная
   подсветка тут только мешает и выглядит "не докрученным" на Android. === */
a, button, input, textarea{ -webkit-tap-highlight-color:transparent; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* === FIX: якоря меню (#services, #reviews и т.д.) утыкались ровно под
   фиксированную шапку — верх секции обрезался. scroll-margin-top сдвигает
   точку "докуда доскроллит" ниже шапки, при клике на пункт меню теперь
   видно заголовок секции целиком. === */
main section, #app{ scroll-margin-top:calc(var(--header-h) + 14px); }

/* === NEW: уважаем "уменьшить анимацию" в настройках ОС — отключаем плавный
   скролл и декоративные бесконечные анимации (дым, зерно, бегущая строка),
   оставляя только смысловые переходы. Хорошая практика, а не просто фича. === */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ===== Курсор-прожектор =====
   Полупрозрачный круг розового свечения, следует за мышью по
   всей странице через CSS-переменные --cx/--cy (двигает JS). На
   телефоне/планшете (нет мыши) просто не появляется. */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; border-radius:50%;
  pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(232,92,184,0.22) 0%, rgba(232,92,184,0.07) 45%, transparent 70%);
  transform:translate(calc(var(--cx,50vw) - 50%), calc(var(--cy,50vh) - 50%));
  opacity:0; transition:opacity 0.4s ease;
  mix-blend-mode:screen;
}
.has-cursor .cursor-glow{ opacity:1; }
@media (hover:none){ .cursor-glow{ display:none; } }

/* ===== Кастомный курсор: точка + кольцо =====
   === NEW: на десктопе прячем системный курсор и рисуем свой — маленькая
   розовая точка (мгновенно следует за мышью) и кольцо побольше (со сглаженным
   отставанием через CSS-transition на left/top — даёт лёгкий "трейл").
   Над интерактивными элементами кольцо раздувается — понятно, что кликабельно. */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%; pointer-events:none;
  z-index:9998; opacity:0; transition:opacity 0.25s ease;
}
.cursor-dot{ width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--pink); }
.cursor-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px; border:1.5px solid var(--pink-soft);
  transition:opacity 0.25s ease, left 0.12s ease-out, top 0.12s ease-out,
    width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.has-cursor .cursor-dot, .has-cursor .cursor-ring{ opacity:1; }
.cursor-ring.is-hover{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(232,92,184,0.14); border-color:var(--pink); }
@media (hover:hover) and (pointer:fine){
  .has-cursor, .has-cursor a, .has-cursor button{ cursor:none; }
}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ===== Плёночное зерно поверх всего сайта =====
   === NEW: едва заметный шум (SVG-турбулентность), чуть "дрожит" покадрово —
   классический кинематографичный приём, добавляет глубину тёмной теме. */
.grain{
  position:fixed; inset:-100px; z-index:5; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainShift 1s steps(6) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-2%,2%); } 40%{ transform:translate(2%,-2%); }
  60%{ transform:translate(-2%,-2%); } 80%{ transform:translate(2%,2%); } 100%{ transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

/* ===== Полоска прогресса скролла ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:9999;
  background:linear-gradient(90deg, var(--pink), var(--olive));
  transition:width 0.1s linear;
}

/* ===== Кнопка "наверх" ===== */
.to-top{
  position:fixed; right:24px; z-index:900; width:48px; height:48px; border-radius:50%;
  /* === NEW: env(safe-area-inset-bottom) — отступ от "чёлки снизу"/полоски
     жестов на iPhone (safe-area работает благодаря viewport-fit=cover в head). === */
  bottom:calc(24px + env(safe-area-inset-bottom));
  background:var(--card); border:1px solid var(--border); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ border-color:var(--pink); color:var(--pink); }
.to-top:active{ transform:translateY(0) scale(0.9); }
@media (max-width:600px){ .to-top{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:42px; height:42px; } }

/* ===== NEW: плавающая кнопка ВК — слева, чтобы не спорить местом с "наверх"
   справа. Пульсирующее кольцо ненавязчиво привлекает внимание к основному
   каналу связи, не мигает и не раздражает (2.4s, мягкий easing). ===== */
.vk-float{
  position:fixed; left:24px; z-index:899; width:52px; height:52px; border-radius:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center;
  background:var(--pink); color:#fff;
  box-shadow:0 8px 24px rgba(232,92,184,0.4);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.vk-float:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 12px 28px rgba(232,92,184,0.5); }
.vk-float:active{ transform:translateY(0) scale(0.94); }
.vk-float-pulse{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--pink);
  animation:vkPulse 2.4s ease-out infinite; pointer-events:none;
}
@keyframes vkPulse{
  0%{ transform:scale(1); opacity:0.7; }
  100%{ transform:scale(1.55); opacity:0; }
}
@media (max-width:600px){ .vk-float{ left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:46px; height:46px; } }
@media (prefers-reduced-motion:reduce){ .vk-float-pulse{ animation:none; display:none; } }

/* ===== NEW: баннер про приложение — выезжает снизу через несколько секунд
   после захода (см. main.js), закрывается крестиком или кнопкой, дальше
   помнит выбор через localStorage и не показывается заново. ===== */
.install-banner{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translate(-50%, 140%);
  z-index:950; display:flex; align-items:center; gap:14px;
  max-width:520px; width:calc(100% - 32px);
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:14px 16px; box-shadow:0 16px 40px rgba(0,0,0,0.35);
  transition:transform 0.5s cubic-bezier(.2,.9,.3,1.25);
}
.install-banner.is-visible{ transform:translate(-50%, 0); }
.install-banner-icon{ width:42px; height:42px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.install-banner-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.install-banner-text b{ font-family:var(--f-label); font-size:14px; font-weight:600; }
.install-banner-text span{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.install-banner-btn{ padding:9px 16px; font-size:13px; flex-shrink:0; white-space:nowrap; }
.install-banner-close{
  position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%;
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.install-banner-close:hover{ border-color:var(--pink); color:var(--pink); }
@media (max-width:600px){
  .install-banner{ flex-wrap:wrap; }
  .install-banner-text{ order:1; width:100%; }
  .install-banner-btn{ order:2; }
}

/* ===== Бегущая строка-тикер ===== */
.marquee{
  overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg2); padding:16px 0; position:relative; z-index:1;
}
.marquee-track{ display:flex; width:max-content; gap:52px; animation:marqueeScroll 34s linear infinite; will-change:transform; }
.marquee-track span{
  font-family:var(--f-label); font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--olive); white-space:nowrap; display:flex; align-items:center; gap:14px;
}
.marquee-track span::after{ content:"✦"; color:var(--pink); font-size:11px; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ===== Лайтбокс портфолио =====
   === NEW: клик по работе в галерее открывает полноэкранный просмотр —
   с навигацией ‹ › по ВСЕМ 289 фото (не только по текущей странице мозаики)
   и закрытием по кресту / Esc / клику по фону. */
.lightbox{
  position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center;
  background:rgba(10,9,7,0.92); backdrop-filter:blur(6px); opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-stage{
  max-width:min(88vw,900px); max-height:82vh; position:relative;
  transform:scale(0.94); transition:transform 0.3s ease; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.lightbox.is-open .lightbox-stage{ transform:scale(1); }
.lightbox-stage img{ max-width:88vw; max-height:82vh; width:auto; height:auto; display:block; }
.lightbox-close, .lightbox-nav{
  position:fixed; z-index:9991; width:48px; height:48px; border-radius:50%;
  background:rgba(26,24,20,0.8); border:1px solid var(--border); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ border-color:var(--pink); color:var(--pink); }
.lightbox-close{ top:calc(24px + env(safe-area-inset-top)); right:calc(24px + env(safe-area-inset-right)); }
.lightbox-nav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:24px; top:50%; transform:translateY(-50%); }
@media (max-width:700px){
  .lightbox-close{ top:14px; right:14px; width:42px; height:42px; }
  .lightbox-nav{ width:42px; height:42px; }
  .lightbox-nav.prev{ left:10px; } .lightbox-nav.next{ right:10px; }
}

/* ===== Конфетти (пасхалка) ===== */
.confetti-bit{
  position:fixed; top:-20px; width:8px; height:8px; border-radius:2px; z-index:9997; pointer-events:none;
  animation-name:confettiFall; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes confettiFall{ to{ transform:translateY(105vh) rotate(540deg); opacity:0.2; } }

/* ===== Заголовки/лейблы в общем стиле ===== */
.section-eyebrow{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:0.22em;
  font-size:12.5px; color:var(--olive); margin-bottom:10px; font-weight:500;
}
.section-title{
  font-family:var(--f-display); font-weight:500; font-size:clamp(28px,4vw,44px);
  line-height:1.15; margin:0 0 18px; letter-spacing:-0.01em;
}
.section-lead{ color:var(--muted); max-width:560px; font-size:16px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ===== Кнопки: заметный отклик на клик/тап ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-label); font-weight:500; font-size:14.5px; letter-spacing:0.02em;
  padding:13px 26px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  user-select:none;
}
.btn:active{ transform:scale(0.95); }
.btn-solid{ background:var(--olive); color:#15130E; }
.btn-solid:hover{ box-shadow:0 8px 24px rgba(163,138,94,0.35); }
.btn-ghost{ background:rgba(255,255,255,0.03); border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--olive); color:var(--olive); }
.btn-lg{ padding:16px 32px; font-size:15.5px; }
/* Рябь при клике/тапе — добавляется JS-ом (span.ripple) */
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.35);
  transform:scale(0); animation:rippleAnim 0.6s ease-out forwards; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ===== Плавное появление при скролле ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal[data-delay="1"]{ transition-delay:0.08s; }
.reveal[data-delay="2"]{ transition-delay:0.16s; }
.reveal[data-delay="3"]{ transition-delay:0.24s; }
.reveal[data-delay="4"]{ transition-delay:0.32s; }
.reveal[data-delay="5"]{ transition-delay:0.4s; }

/* ================= ШАПКА ================= */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  /* === NEW: max(32px, safe-area) — на iPhone в landscape вырез/скругление
     экрана сбоку не перекрывает лого/бургер. === */
  padding:0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left));
  transition:background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(15,14,12,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color:var(--olive); display:flex; }
.brand-word{ font-family:var(--f-display); font-size:21px; font-weight:600; letter-spacing:0.01em; }
.nav{ display:flex; gap:34px; }
.nav-link{
  font-family:var(--f-label); font-size:14px; letter-spacing:0.03em; color:var(--muted);
  position:relative; padding:4px 0; transition:color 0.2s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--olive);
  transition:width 0.25s ease;
}
.nav-link:hover{ color:var(--text); }
.nav-link:hover::after{ width:100%; }
.nav-cta{ padding:10px 22px; font-size:13.5px; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform 0.25s ease, opacity 0.25s ease; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:45;
  background:rgba(15,14,12,0.98); backdrop-filter:blur(14px);
  display:flex; flex-direction:column; padding:14px 32px 28px; gap:4px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease; border-bottom:1px solid var(--border);
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mm-link{ padding:13px 0; border-bottom:1px solid var(--border); font-family:var(--f-label); font-size:15px; }
.mm-cta{ margin-top:16px; align-self:flex-start; }

/* ================= ХИРО (со скролл-морфингом) ================= */
/* .hero — высокая "дорожка" для скролла (задаёт длительность эффекта);
   .hero-sticky — то, что реально видно, прилипает к верху экрана, пока
   идёт прокрутка внутри .hero. */
.hero{ position:relative; height:220vh; }
.hero-sticky{
  position:sticky; top:0;
  /* === NEW: 100vh — запасной вариант для старых Android WebView без
     поддержки svh (иначе высота вообще не задастся и хиро "схлопнется").
     100svh ниже переопределяет его там, где поддерживается — не прыгает
     при появлении/скрытии адресной строки Safari на iPhone. === */
  height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:calc(var(--header-h) + 20px) 24px 60px;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-fallback-bg{
  position:absolute; inset:-10% -10% -10% -10%; z-index:-2;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(163,138,94,0.22), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(107,58,58,0.18), transparent 50%),
    var(--bg);
}
/* Портрет-морфинг "дымный взрыв": ч/б версия лежит снизу на всю секцию,
   цветная — поверх, но проступает не ровным кругом, а через мягкую,
   неровную маску (radial-gradient с растянутым краем) — получается эффект
   размытой дымной границы вместо чёткой линии. Плюс поверх — несколько
   розово-белых размытых "клубов дыма" (.hero-smoke-blob), которые набухают
   и лопаются по параболе (--morph * (1---morph)) — растут в начале скролла,
   пик в середине, растворяются к концу, ровно когда цвет уже полностью
   раскрылся. Итог — не "лампочка загорелась", а настоящий дымный взрыв. */
.hero-portrait-frame{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-portrait, .hero-portrait-color-wrap{ position:absolute; inset:0; width:100%; height:100%; }
.hero-portrait{ object-fit:cover; object-position:center 30%; }
/* === NEW: "дыхание" главного плана — медленный зум/сдвиг по кругу (Ken Burns),
   без резких скачков. Один общий keyframes для ч/б, цвета и видео — они все
   получают ЭТУ ЖЕ анимацию с одинаковым таймингом, значит зум/сдвиг идёт
   синхронно на всех слоях и дымная маска между ними не "рассинхронится". === */
.hero-portrait, .hero-portrait-color-wrap .hero-portrait{
  animation:heroKenBurns 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKenBurns{
  from{ transform:scale(1) translate3d(0,0,0); }
  to{ transform:scale(1.1) translate3d(-1.6%,-1.2%,0); }
}
.hero-portrait.mono{ filter:grayscale(1) contrast(1.08) brightness(0.95); }
/* === NEW: маска дымного круга теперь на обёртке цвета — под ней и фото,
   и видео проступают вместе, одним и тем же вырезом. === */
.hero-portrait-color-wrap{
  -webkit-mask-image:radial-gradient(circle calc(var(--morph,0) * 125vmax) at 50% 46%, #000 42%, transparent 72%);
  mask-image:radial-gradient(circle calc(var(--morph,0) * 125vmax) at 50% 46%, #000 42%, transparent 72%);
}
/* === NEW: видео лежит поверх цветного фото и по умолчанию прозрачное —
   как только файл portrait-color.mp4 реально загрузится и начнёт играть,
   плавно проявляется поверх фото (см. main.js). Нет файла — просто остаётся
   фото, ничего не ломается. === */
/* === НАСТОЯЩАЯ ПРИЧИНА, почему сдвиг "вообще не двигался": .hero-portrait-frame
   по пропорциям почти совпадает с фото/видео (оба широкоформатные) — при
   object-fit:cover браузер подгоняет картинку ПО ШИРИНЕ, и по горизонтали
   просто не остаётся места для панорамирования (весь запас — только по
   высоте, поэтому Y=29% и сработал, а X — никогда). Дальше сдвигаю через
   transform на обёртке .hero-color-shift (см. ниже) — там места для сдвига
   вправо создаю искусственно зумом, это работает всегда, а не только когда
   есть запас по пропорциям. Y-выравнивание оставляю здесь как было. === */
.hero-portrait-color-wrap .hero-portrait{
  object-position:50% 29%;
}
/* === Обёртка вокруг цветного фото+видео: лёгкий zoom создаёт запас, чтобы
   translateX реально сдвигал контент вправо/влево, а не упирался в край. === */
.hero-color-shift{
  position:absolute; inset:0; width:100%; height:100%; overflow:hidden;
  /* scaleX вместо scale — тянем запас только по горизонтали, чтобы
     вертикаль (уже настроенная по Y) не плыла заодно с ней. */
  transform:scaleX(1.02) translateX(0.4%);
  transform-origin:center center;
}
.hero-portrait.color-video{
  opacity:0;
  transition:opacity 0.9s ease;
}
.hero-portrait.color-video.is-playing{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-portrait, .hero-portrait-color-wrap .hero-portrait{ animation:none; }
}
.hero-smoke{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-smoke-blob{
  position:absolute; border-radius:50%; filter:blur(46px); mix-blend-mode:screen;
  transform:translate(-50%,-50%);
}
.hero-smoke-blob.b1{
  left:44%; top:42%;
  width:calc(var(--morph,0) * 62vmax); height:calc(var(--morph,0) * 62vmax);
  opacity:calc(var(--morph,0) * (1 - var(--morph,0)) * 4.4);
  background:radial-gradient(circle, rgba(232,92,184,0.6), rgba(232,92,184,0.18) 55%, transparent 75%);
}
.hero-smoke-blob.b2{
  left:58%; top:52%;
  width:calc(var(--morph,0) * 50vmax); height:calc(var(--morph,0) * 50vmax);
  opacity:calc(var(--morph,0) * (1 - var(--morph,0)) * 3.8);
  background:radial-gradient(circle, rgba(200,120,190,0.55), rgba(200,120,190,0.14) 55%, transparent 75%);
}
.hero-smoke-blob.b3{
  left:47%; top:58%;
  width:calc(var(--morph,0) * 74vmax); height:calc(var(--morph,0) * 74vmax);
  opacity:calc(var(--morph,0) * (1 - var(--morph,0)) * 3.2);
  background:radial-gradient(circle, rgba(255,255,255,0.4), rgba(255,255,255,0.1) 55%, transparent 75%);
}
.hero-smoke-blob.b4{
  left:50%; top:46%;
  width:calc(var(--morph,0) * 30vmax); height:calc(var(--morph,0) * 30vmax);
  opacity:calc(var(--morph,0) * (1 - var(--morph,0)) * 5);
  background:radial-gradient(circle, rgba(255,220,245,0.75), rgba(232,92,184,0.2) 50%, transparent 72%);
}
.hero-texture{
  position:absolute; inset:-15%; z-index:0; opacity:0.5;
  background-image:url('../visual/images/textures/texture-smoke.png');
  background-size:cover; background-position:center;
}
.hero-vignette{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,14,12,0.55) 0%, rgba(15,14,12,0.35) 40%, rgba(15,14,12,0.85) 100%);
}
.hero-content{ position:relative; z-index:2; max-width:760px; }
.eyebrow{
  font-family:var(--f-label); letter-spacing:0.32em; font-size:12.5px; color:var(--olive);
  margin-bottom:18px;
}
.hero-title{
  font-family:var(--f-display); font-weight:700; font-size:clamp(56px,11vw,132px);
  line-height:0.95; margin:0 0 22px; letter-spacing:-0.01em;
  transition:letter-spacing 0.6s ease, font-style 0.6s ease;
}
/* === NEW: у Vollkorn нет осей SOFT/WONK (это были фишки Fraunces) — вместо
   этого лёгкий "живой" отклик на ховер через курсив + разрядку букв. === */
.hero-title:hover{ font-style:italic; letter-spacing:0.005em; }
.hero-sub{
  font-size:17.5px; color:var(--muted); max-width:560px; margin:0 auto 34px; line-height:1.7;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.scroll-hint{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--olive); animation:bounceHint 2.2s ease-in-out infinite;
}
@keyframes bounceHint{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ================= О МАСТЕРЕ ================= */
/* Мягкое розовое свечение в углу — чтобы после яркого хиро секции ниже
   не выглядели резким провалом в плоскую темноту, атмосфера продолжается. */
.about{ padding:120px 0; position:relative; overflow:hidden; }
.about::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 10% 0%, rgba(232,92,184,0.09), transparent 62%);
}
.about .wrap{ position:relative; z-index:1; }
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
.about-photo-frame{
  aspect-ratio:4/5; border-radius:22px; overflow:hidden; background:var(--card);
  border:1px solid var(--border); position:relative;
  transition:transform 0.15s ease; will-change:transform; /* === NEW: под JS-тилт (main.js) === */
}
.about-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.about-photo-frame.img-missing{
  display:flex; align-items:center; justify-content:center;
}
.about-photo-frame.img-missing::before{
  content:"Фото мастера"; font-family:var(--f-label); color:var(--dim); font-size:13px; letter-spacing:0.05em;
}
.about-photo-frame.img-missing img{ display:none; }
.about-text p{ color:var(--muted); font-size:16px; margin:0 0 16px; max-width:520px; }
.feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:28px; max-width:540px; }
.feat{ display:flex; align-items:flex-start; gap:10px; }
.feat-ico{ font-size:19px; line-height:1; flex-shrink:0; margin-top:1px; }
.feat b{ display:block; font-size:14px; font-weight:600; margin-bottom:2px; }
.feat span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.4; }

/* ================= ПОРТФОЛИО ================= */
.portfolio{ padding:100px 0 120px; background:var(--bg2); }
/* === FIX: фикс-сетка с grid-row:span давала пустые ячейки на стыках (жаловался
   на "пустые места") — CSS Grid с разноразмерными плитками не гарантирует
   идеальное заполнение. Вернул "каменную кладку" на CSS columns — там физически
   не может быть дыр (каждая карточка просто встаёт следующей в самую короткую
   колонку), а асимметрия — за счёт разных aspect-ratio по кругу. === */
.work-grid{
  column-count:5; column-gap:14px; margin-top:48px;
}
.work-card{
  position:relative; border-radius:16px; overflow:hidden; background:var(--card);
  border:1px solid var(--border); cursor:pointer;
  display:inline-block; width:100%; margin:0 0 14px; break-inside:avoid;
}
.work-card:nth-child(5n+1){ aspect-ratio:3/4; }
.work-card:nth-child(5n+2){ aspect-ratio:1/1; }
.work-card:nth-child(5n+3){ aspect-ratio:4/5; }
.work-card:nth-child(5n+4){ aspect-ratio:3/4.6; }
.work-card:nth-child(5n){ aspect-ratio:1/1.2; }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;
  /* лёгкая компенсация мягкости у сжатых фото — не чудо, но немного четче */
  filter:contrast(1.06) saturate(1.08); }
.work-card:hover img{ transform:scale(1.08); }
/* Видео-круг за курсором: проигрывается только внутри круга радиусом ~110px
   вокруг курсора (--mx/--my ставит JS), снаружи круга виден статичный кадр. */
.work-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
  clip-path:circle(110px at var(--mx,50%) var(--my,50%));
}
.work-card:hover .work-video{ opacity:1; }
/* Круг-подсветка на конкретной карточке, следует за курсором внутри неё —
   работает и без видео (розовое свечение вместо ролика, в тон "фонарику") */
.work-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.3s ease;
  background:radial-gradient(circle 140px at var(--mx,50%) var(--my,50%), rgba(232,92,184,0.4), transparent 70%);
  mix-blend-mode:overlay;
}
.work-card:hover::after{ opacity:1; }
.work-card.img-missing{ display:flex; align-items:center; justify-content:center; }
.work-card.img-missing::before{ content:"Фото работы"; font-family:var(--f-label); color:var(--dim); font-size:12.5px; letter-spacing:0.04em; z-index:1; }
.work-card.img-missing img{ display:none; }

/* Листалка страниц портфолио */
.work-pager{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.work-pager-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--card);
  color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.work-pager-btn:hover:not(:disabled){ border-color:var(--pink); color:var(--pink); }
.work-pager-btn:active:not(:disabled){ transform:scale(0.9); }
.work-pager-btn:disabled{ opacity:0.3; cursor:default; }
.work-pager-count{ font-family:var(--f-label); font-size:13px; letter-spacing:0.05em; color:var(--muted); min-width:56px; text-align:center; }

/* ================= ДЫМ-ДИВАЙДЕР МЕЖДУ СЕКЦИЯМИ =================
   === NEW: атмосферная "прослойка" в середине сайта — реальная дымовая
   текстура (smoke-bg-2.jpg), приглушённая (низкая непрозрачность + тёмный
   градиент поверх), чтобы не спорила с текстом сверху/снизу, просто добавляет
   глубины между блоками, как просили. === */
.smoke-divider{
  position:relative; height:220px; overflow:hidden;
}
.smoke-divider::before{
  content:""; position:absolute; inset:-20% 0; z-index:0;
  background-image:url('../visual/images/hero/smoke-bg-2.jpg');
  background-size:cover; background-position:center;
  opacity:0.16; filter:grayscale(0.3);
}
.smoke-divider::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--bg2) 0%, transparent 30%, transparent 70%, var(--bg) 100%);
}
@media (max-width:600px){ .smoke-divider{ height:120px; } }

/* ================= ПРИЛОЖЕНИЕ ================= */
/* === NEW: секция-мостик к PWA-приложению студии — карточка с иконкой,
   короткими фичами и кнопкой. Ссылка на приложение (#appLink) — плейсхолдер,
   замени href на реальный путь/домен, где будет лежать index.html приложения. */
.app-promo{ padding:110px 0; position:relative; overflow:hidden; background:var(--bg2); }
.app-promo::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 15% 20%, rgba(232,92,184,0.1), transparent 60%);
}
.app-promo .wrap{ position:relative; z-index:1; }
.app-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;
  background:var(--card); border:1px solid var(--border); border-radius:24px; padding:40px 44px;
}
.app-card-icon{
  width:76px; height:76px; border-radius:20px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--pink);
  border:1px solid var(--border); flex-shrink:0;
}
.app-card-icon img{ width:100%; height:100%; object-fit:cover; border-radius:20px; }
.app-card-text h3{ font-family:var(--f-display); font-size:24px; font-weight:700; margin:0 0 8px; }
.app-card-text p{ color:var(--muted); font-size:14.5px; margin:0 0 14px; max-width:440px; line-height:1.6; }
.app-feat-row{ display:flex; gap:18px; flex-wrap:wrap; }
.app-feat-row span{
  font-family:var(--f-label); font-size:12px; letter-spacing:0.02em; color:var(--olive);
  display:inline-flex; align-items:center; gap:6px;
}
.app-card-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.app-install-note{ font-size:12px; color:var(--dim); max-width:200px; line-height:1.5; }
@media (max-width:840px){
  .app-card{ grid-template-columns:1fr; text-align:center; padding:36px 26px; }
  .app-card-icon{ margin:0 auto; }
  .app-feat-row{ justify-content:center; }
  .app-card-cta{ align-items:center; }
}

/* ================= УСЛУГИ ================= */
.services{ padding:120px 0; position:relative; overflow:hidden; }
.services::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 90% 100%, rgba(163,138,94,0.1), transparent 60%);
}
.services .wrap{ position:relative; z-index:1; }
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px; }
.service-card{
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px 26px;
  transition:transform 0.15s ease, border-color 0.25s ease, background 0.25s ease;
  will-change:transform;
}
/* === NEW: наклон (тилт) теперь считает JS покадрово под курсором (main.js,
   addTilt) — CSS оставляет только смену цвета/фона, transform не трогаем
   тут, иначе конфликтуют инлайн-стиль из JS и это правило. === */
.service-card:hover{ border-color:var(--olive); background:var(--card2); }
.service-ico{ color:var(--olive); display:inline-flex; margin-bottom:16px; }
.service-card h3{ font-family:var(--f-display); font-size:19px; font-weight:600; margin:0 0 8px; }
.service-card p{ color:var(--muted); font-size:14.5px; margin:0 0 16px; line-height:1.55; }
.service-price{ font-family:var(--f-label); color:var(--olive); font-size:13.5px; letter-spacing:0.03em; }

/* ================= ОТЗЫВЫ ================= */
.reviews{ padding:100px 0 120px; background:var(--bg2); position:relative; overflow:hidden; }
.reviews::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 12% 100%, rgba(232,92,184,0.08), transparent 60%);
}
.reviews .wrap{ position:relative; z-index:1; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px; }
.review-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:28px; }
.review-stars{ color:var(--olive); letter-spacing:3px; font-size:14px; margin-bottom:14px; }
.review-text{ font-size:15px; color:var(--text); line-height:1.65; margin:0 0 16px; font-style:italic; }
.review-name{ font-family:var(--f-label); color:var(--muted); font-size:13px; }

/* ================= CTA ================= */
.cta{ position:relative; padding:130px 0; overflow:hidden; text-align:center; }
/* Фоновая картинка "низа сайта" — тёмный градиент поверх, чтобы текст читался */
.cta-bg{
  position:absolute; inset:0; z-index:-2;
  /* === FIX: реальное имя файла — hero-bottom.jpg (было "Внизу сайта.jpg"),
     старый путь site-bottom.jpg не существовал, поэтому фон не показывался === */
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(15,14,12,0.55) 22%, rgba(15,14,12,0.88) 100%),
    url('../visual/images/hero/hero-bottom.jpg') center/cover no-repeat;
}
.cta-glow{
  position:absolute; inset:-30%; z-index:-1;
  background:radial-gradient(circle at 50% 50%, rgba(163,138,94,0.18), transparent 60%);
}
.cta-inner{ position:relative; z-index:1; max-width:640px; }
.cta-title{ font-family:var(--f-display); font-size:clamp(30px,5vw,48px); font-weight:600; margin:0 0 16px; }
.cta p{ color:var(--muted); font-size:16px; margin:0 0 32px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ================= КОНТАКТЫ ================= */
.contacts{ padding:100px 0 120px; position:relative; overflow:hidden; }
.contacts::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 40% at 85% 0%, rgba(163,138,94,0.08), transparent 60%);
}
.contacts .wrap{ position:relative; z-index:1; }
.contacts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact-list{ list-style:none; padding:0; margin:24px 0; display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:15px; }
.contact-list svg{ color:var(--olive); flex-shrink:0; }
.contact-list li.contact-note{ font-size:12.5px; color:var(--dim); padding-left:30px; margin-top:-8px; }
.social-row{ display:flex; gap:12px; }
.social-ico{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.social-ico:hover{ border-color:var(--olive); color:var(--olive); }
.social-ico:active{ transform:scale(0.9); }
.map-frame{ aspect-ratio:4/3; border-radius:22px; overflow:hidden; border:1px solid var(--border); background:var(--card); position:relative; }
/* === NEW: реальная Яндекс.Карта вместо заглушки — приглушаем фирменную
   яркую разметку Яндекса тёмным фильтром, чтобы не выбивалась из тёмной темы. */
.map-frame iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(0.35) invert(0.92) contrast(0.9) brightness(0.95);
}
.map-placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--dim); font-family:var(--f-label); font-size:13px; letter-spacing:0.03em;
  background:
    radial-gradient(circle at 30% 30%, rgba(163,138,94,0.08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px);
}

/* ================= NEW: ФОРМА СООБЩЕНИЯ ================= */
.lead-form-wrap{ max-width:560px; margin:64px auto 0; text-align:center; }
.lead-form-title{ font-family:var(--f-display); font-size:26px; font-weight:600; margin:0 0 10px; }
.lead-form-wrap .section-lead{ margin:0 auto 24px; }
.lead-form{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.lead-form input, .lead-form textarea{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:13px 16px; color:var(--text); font-family:var(--f-body);
  /* === NEW: 16px — минимум, чтобы iOS Safari не зумил страницу при фокусе на поле === */
  font-size:16px; resize:vertical; transition:border-color 0.2s ease;
}
.lead-form input::placeholder, .lead-form textarea::placeholder{ color:var(--dim); }
.lead-form input:focus, .lead-form textarea:focus{ outline:none; border-color:var(--pink); }
.lead-form .btn{ align-self:flex-start; }
.lead-form-status{ font-size:13.5px; min-height:18px; }
.lead-form-status.ok{ color:#8FCB8A; }
.lead-form-status.err{ color:#E8785C; }
@media (max-width:600px){
  .lead-form .btn{ align-self:stretch; }
}

/* ================= ФУТЕР ================= */
.site-foot{ border-top:1px solid var(--border); padding:40px 0; }
.foot-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.foot-brand{ opacity:0.9; }
.foot-links{ display:flex; gap:24px; font-family:var(--f-label); font-size:13.5px; color:var(--muted); flex-wrap:wrap; }
.foot-links a:hover{ color:var(--olive); }
.foot-social{ display:flex; gap:14px; color:var(--muted); }
.foot-social a{ transition:color 0.2s ease; }
.foot-social a:hover{ color:var(--olive); }
.foot-copy{ font-size:12.5px; color:var(--dim); }

/* ================= ПЛАНШЕТ ≤1024px ================= */
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-photo-frame{ max-width:420px; margin:0 auto; }
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
  .reviews-grid{ grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }
  .contacts-grid{ grid-template-columns:1fr; }
  .map-frame{ max-width:520px; margin:0 auto; }
  .work-grid{ column-count:3; }
}

/* ================= ПЛАНШЕТ/МОБИЛЬНЫЙ ≤840px — переключаем меню на бургер ================= */
@media (max-width:840px){
  .nav, .nav-cta{ display:none; }
  .burger{ display:flex; }
  .site-head{ padding:0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .work-grid{ column-count:2; }
}

/* ================= ТЕЛЕФОН ≤600px ================= */
@media (max-width:600px){
  .wrap{ padding:0 18px; }
  .hero{ height:180vh; }
  .hero-sticky{ padding-top:calc(var(--header-h) + 10px); }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .about, .services, .reviews, .contacts, .portfolio{ padding-top:72px; padding-bottom:72px; }
  .services-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; gap:14px; }
  .cta-actions{ flex-direction:column; width:100%; }
  .cta-actions .btn{ width:100%; }
  .foot-grid{ flex-direction:column; text-align:center; }
}