/*
  У НАС ЕСТЬ — ДИЗАЙН И АДАПТИВНОСТЬ
  Вдохновение: макеты Figma / Workspace / Page 2.
  Шрифт в Figma: Hero Light/Regular. Если у вас есть лицензионные
  файлы Hero, подключите их через @font-face в этом файле;
  по умолчанию применяются доступные системные аналоги.
  Внешние CSS, библиотеки, логины и шрифтовые CDN НЕ требуются.
*/
/* Локальные установленные версии Hero: подключение без CDN и без раздачи шрифтов. */
@font-face { font-family: 'Hero'; src: local('Hero Light'), local('Hero-Light'); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: 'Hero'; src: local('Hero Regular'), local('Hero-Regular'); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  color-scheme: light;
  --bg: #fff;
  --surface: #fff;
  --surface-soft: #f4f4f4;
  --text: #121212;
  --muted: #656565;
  --subtle: #929292;
  --line: rgba(0,0,0,.14);
  --accent: #101010;
  --accent-text: #fff;
  --header-bg: rgba(255,255,255,.82);
  --header-solid: #fff;
  --halo: rgba(191,65,64,.15);
  --menu-dim: rgba(22,22,22,.35);
  --shadow: 0 22px 80px rgba(0,0,0,.13);
  --font: 'Hero', 'Avenir Next', 'Century Gothic', 'Inter', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.18,.72,.2,1);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000;
    --surface: #101010;
    --surface-soft: #1a1a1a;
    --text: #fafafa;
    --muted: #aeaeae;
    --subtle: #656565;
    --line: rgba(255,255,255,.14);
    --accent: #fff;
    --accent-text: #101010;
    --header-bg: rgba(0,0,0,.85);
    --header-solid: #000;
    --halo: rgba(211,73,68,.30);
    --menu-dim: rgba(0,0,0,.58);
    --shadow: 0 24px 80px rgba(0,0,0,.55);
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 300px;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  overscroll-behavior-y: none;
}
html.menu-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Заставка: фиксированная геометрия слов и анимация по запросу. */
.intro-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  transition: opacity .65s var(--ease), visibility .65s;
}
.intro-screen.is-leaving { opacity: 0; visibility: hidden; }
.intro-copy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .22em;
  padding: 18px;
  font-size: clamp(25px,7vw,110px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -.045em;
  white-space: nowrap;
  will-change: transform, opacity;
}
.intro-prefix { flex: 0 0 auto; }
.intro-word-window {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 4.4em;
  height: 1.16em;
  flex: 0 0 auto;
}
.intro-word { position: absolute; top: 0; left: 0; white-space: nowrap; }
.intro-word.entering { animation: wordRollIn .43s var(--ease) both; }
.intro-copy.special {
  display: block;
  max-width: min(90vw, 960px);
  text-align: center;
  white-space: normal;
  font-size: clamp(29px, 6.5vw, 98px);
}
.intro-copy.special .intro-word-window { display: none; }
.special-reveal { display: block; animation: specialReveal .52s var(--ease) both; }
@keyframes wordRollIn {
  from { opacity:0; filter: blur(12px); transform:translateY(68%); }
  to { opacity:1; filter:blur(0); transform:translateY(0); }
}
@keyframes specialReveal {
  from { opacity:0; filter:blur(13px); transform:translateY(14px); }
  to { opacity:1; filter:blur(0); transform:translateY(0); }
}

/* ВАЖНО: никакого filter/transform у обёртки после появления.
   Они создают собственные контексты и вызывают рывки sticky при скролле Safari. */
.site-shell { opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.site-shell.is-ready { opacity: 1; pointer-events: auto; }
.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 74px;
  background: transparent;
  border-bottom: 1px solid transparent;
  isolation: isolate;
  overflow: clip;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -18px;
  height: 22px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0));
  opacity: .28;
}
.nav-inner {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 1480px;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 38px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4.2vw, 64px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: .24em;
  font-size: clamp(19px,1.9vw,25px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -.035em;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.brand:hover { opacity: .67; }
.brand-prefix { display: inline-block; flex: 0 0 auto; }
.brand-word-window {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: 1.2em;
  flex: 0 0 auto;
  overflow: hidden;
  vertical-align: bottom;
}
.brand-word { position: absolute; top: 0; left: 0; line-height: 1.2; white-space: nowrap; }
.brand-word.fade-in { animation: brandFade .65s ease both; }
@keyframes brandFade { from { opacity:0; filter: blur(5px); } to { opacity:1; filter: blur(0); } }

.desktop-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.nav-items { display:flex; justify-content: flex-end; align-items:center; gap: 5px; flex: 0 1 auto; min-width: 0; }
.nav-link {
  display: inline-flex;
  min-height: 40px;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px clamp(9px,.8vw,13px);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-link:hover { color: var(--text); background: var(--surface-soft); }
.nav-link.active { color: var(--accent-text); background: var(--accent); }
.more-wrap { position: relative; flex: 0 0 auto; }
.chevron { font-size: 16px; margin-left: 4px; }
.more-menu {
  position: absolute;
  display: none;
  z-index: 50;
  top: calc(100% + 12px);
  right: 0;
  min-width: 186px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.more-menu.is-open { display:block; }
.more-menu .nav-link { width: 100%; justify-content: flex-start; }
.mobile-menu-toggle { display: none; }
@media (min-width:761px) {
  .brand-prefix::after { content: "…"; }
  .brand-word-window { display:none; }
}

/* Страницы и типографика из Figma: Hero Light, серый текст, воздух. */
.main-content { min-height: calc(100svh - 135px); padding-bottom: 30px; outline: none; }
.home-page, .direction-page {
  width: 100%;
  padding: clamp(56px, 9vh, 110px) 22px 36px;
  animation: pageAppear .64s var(--ease) backwards;
}
@keyframes pageAppear {
  from { opacity:0; filter:blur(12px); transform:translateY(12px); }
  to { opacity:1; filter:blur(0); transform:translateY(0); }
}
.home-intro, .direction-intro { position: relative; max-width: 1040px; margin:0 auto; text-align:center; }
.eyebrow { margin:0 0 24px; color: var(--subtle); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; }
.hero-halo {
  position: absolute;
  top: -64px;
  left: 50%;
  width: min(520px, 96vw);
  height: min(400px, 90vw);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--halo) 0%, transparent 68%);
  filter:blur(29px);
  pointer-events: none;
  z-index: 0;
}
.section-heading {
  position: relative;
  max-width: 100%;
  max-height: 25svh;
  overflow: hidden;
  margin: 0 auto 29px;
  font-size: clamp(39px,6vw,82px);
  line-height:1.07;
  font-weight:300;
  letter-spacing:-.042em;
  overflow-wrap: anywhere;
  text-wrap:balance;
}
.body-copy {
  max-width: 780px;
  margin:0 auto;
  color: var(--muted);
  font-size: clamp(16px,1.5vw,18px);
  line-height: 1.6;
  font-weight:300;
  text-wrap:pretty;
}
.body-copy p { margin: 0 0 17px; }
.body-copy p:last-child { margin-bottom:0; }
.home-cta-row { display:flex; justify-content:center; margin:42px auto 0; }
.pill-button, .direction-action {
  display:inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content:center;
  gap:10px;
  padding: 13px 26px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-text);
  font-size:15px;
  font-weight:400;
  text-align:center;
  cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease, border .2s ease;
}
.pill-button:hover, .direction-action:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(120,120,120,.16); }
.pill-button:active, .direction-action:active { transform:scale(.98); }
.mobile-choose-row { display:none; }

/* Галерея: три вертикальных кадра с мягким боковым размытием.
   На десктопе — широкий чёрный блок от края до края.
   На мобильном — только на страницах направлений. */
.gallery-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin: clamp(54px,8vh,94px) calc(50% - 50vw) 0;
  padding: 24px 0 20px;
  background: #000;
  color: #fff;
}
.gallery-viewport { position:relative; height:clamp(430px,47vw,760px); width:100%; margin:0 auto; touch-action:pan-y; }
.gallery-slide {
  position:absolute;
  z-index:0;
  top:50%; left:50%;
  width: min(31vw, 520px);
  aspect-ratio:3/4;
  margin:0;
  overflow:hidden;
  border-radius:10px;
  background: #121212;
  opacity:0;
  filter:blur(10px);
  transform:translate(-50%,-50%) scale(.88);
  transition:transform .86s var(--ease),opacity .86s ease,filter .86s ease;
  box-shadow:0 15px 46px rgba(0,0,0,.4);
}
.gallery-slide[data-position="0"] { z-index:4; opacity:1; filter:none; transform:translate(-50%,-50%) scale(1); }
.gallery-slide[data-position="-1"] { z-index:3; opacity:.57; filter:blur(6px); transform:translate(calc(-50% - 95%), -50%) scale(.88); }
.gallery-slide[data-position="1"] { z-index:3; opacity:.57; filter:blur(6px); transform:translate(calc(-50% + 95%), -50%) scale(.88); }
.gallery-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-placeholder {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 47% 29%, rgba(75,75,75,.21), transparent 52%),
    linear-gradient(155deg,#171717,#0c0c0c 68%,#242424);
}
.gallery-controls { display:flex; min-height:34px; justify-content:center; align-items:center; gap:15px; margin-top:16px; }
.gallery-dots { display:flex; align-items:center; justify-content:center; gap:8px; }
.gallery-dot {
  width:7px; height:7px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.gallery-dot.active { background:#fff; transform:scale(1.28); }
.gallery-arrow {
  display:grid; place-items:center;
  width:30px; height:30px; padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(255,255,255,.035);
  color:white;
  font:300 25px/1 var(--font);
  cursor:pointer;
  transition:background .2s;
}
.gallery-arrow:hover { background:rgba(255,255,255,.15); }
.direction-page { padding-top: clamp(52px,8vh,88px); }
.direction-page .section-heading { font-size:clamp(43px,6.5vw,88px); }
.direction-page .gallery-shell { margin-top:clamp(45px,7vh,78px); }
.embed-list { width:min(760px,88vw); margin:46px auto 0; display:grid; gap:22px; }
.embed-frame { width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-soft); }
.embed-frame iframe { display:block; width:100%; height:100%; border:0; }
.direction-actions { display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:14px; width:min(760px,90vw); margin:46px auto 0; }
.direction-action {
  flex:0 1 auto;
  max-width:min(100%,370px);
  overflow-wrap:anywhere;
  border-color:var(--line);
  background:var(--surface);
  color:var(--text);
  min-width:190px;
}
.direction-action:hover { background:var(--surface-soft); }
.direction-action.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.direction-action.primary:hover { background:var(--accent); }
.site-footer {
  display:flex; justify-content:space-between; gap:14px;
  max-width:1480px;
  margin:52px auto 0;
  padding:22px clamp(20px,4.2vw,64px) 24px;
  border-top:1px solid var(--line);
  color:var(--subtle);
  font-size:10px;
  letter-spacing:.025em;
}

/* Центральное окно выбора направлений (намеренно НЕ скопировано из Figma). */
.mobile-menu-backdrop {
  position:fixed;
  z-index:120;
  inset:0;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.46);
  background:color-mix(in srgb, var(--menu-dim) 82%, rgba(0,0,0,.14));
  -webkit-backdrop-filter:blur(18px) saturate(118%);
  backdrop-filter:blur(18px) saturate(118%);
  animation:backdropIn .24s ease backwards;
  overscroll-behavior:contain;
}
@keyframes backdropIn { from{opacity:0}to{opacity:1} }
.mobile-menu-panel {
  width:min(100%,420px);
  max-height:min(82svh,720px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px;
  border:1px solid var(--line);
  border:1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius:29px;
  background:rgba(255,255,255,.88);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  animation:panelIn .33s var(--ease) backwards;
}
@keyframes panelIn { from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
.mobile-menu-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; color:var(--subtle); font-size:11px; font-weight:400; letter-spacing:.13em; text-transform:uppercase; }
.icon-close { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.05); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:25px; font-weight:300; cursor:pointer; }
.mobile-menu-list { display:grid; grid-template-columns:1fr; gap:8px; text-align:center; }
.mobile-menu-item { display:grid; min-height:55px; place-items:center; padding:11px 16px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.03); color:var(--text); font-size:18px; font-weight:300; letter-spacing:-.018em; cursor:pointer; transition:background .2s, color .2s, border .2s, transform .2s; }
.mobile-menu-item:hover, .mobile-menu-item.active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); transform:translateY(-1px); }


@media (prefers-color-scheme: dark) {
  .mobile-menu-panel { background:rgba(16,16,16,.84); }
  .mobile-menu-item { background:rgba(255,255,255,.04); }
  .icon-close { background:rgba(255,255,255,.06); }
}

@media (max-width:760px) {
  .site-header {
    min-height: 68px;
    border-bottom:0;
  }
  .site-header::before {
    background: var(--header-bg);
    background: color-mix(in srgb, var(--header-solid) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .site-header::after {
    bottom: -26px;
    height: 32px;
    opacity: .58;
    background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0));
  }
  @media (prefers-color-scheme: light) {
    .site-header:not(.is-about-dark)::after { opacity: 0; }
  }
  .nav-inner { position:relative; min-height:68px; padding:0 18px; justify-content:center; }
  .brand {
    position:absolute;
    left:50%; transform:translateX(-50%);
    justify-content:center;
    font-size:clamp(17px,5vw,21px);
    max-width:calc(100% - 100px);
    letter-spacing:-.025em;
  }
  .brand-word-window { width:86px; }
  .mobile-menu-toggle {
    position:absolute;
    right:17px; left:auto;
    top:50%; transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    width:39px; height:39px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:50%;
    background:rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    cursor:pointer;
    box-shadow:0 8px 26px rgba(0,0,0,.14);
  }
  .mobile-menu-toggle span { display:block; width:16px; height:1px; background:var(--text); transition:transform .18s ease,opacity .18s ease; }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(5px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-5px) rotate(-45deg); }
  .desktop-nav { display:none; }
  .main-content { min-height:calc(100svh - 130px); padding-bottom:15px; }
  .home-page, .direction-page { padding:42px 27px 32px; }
  .home-intro, .direction-intro { width:100%; }
  .eyebrow { margin-bottom:22px; font-size:10px; }
  .home-intro .hero-halo { top:-50px; width:300px; height:320px; filter:blur(21px); }
  .section-heading { max-height:33svh; margin-bottom:30px; font-size:clamp(34px,10.5vw,56px); line-height:1.07; letter-spacing:-.032em; }
  .home-page .section-heading { max-width:340px; margin-top:20px; margin-bottom:55px; }
  .body-copy { width:100%; font-size:16px; line-height:1.42; }
  .home-page .body-copy { text-align:left; }
  .home-page .body-copy p + p { margin-top:35px; }
  .home-cta-row { display:none; }
  .mobile-choose-row { display:flex; justify-content:center; margin:43px 0 15px; }
  .mobile-choose-row .pill-button { min-width:188px; }
  .home-gallery { display:none; }
  .direction-page { padding-top:42px; }
  .direction-page .section-heading { font-size:clamp(39px,11vw,57px); max-height:33svh; margin-bottom:26px; }
  .direction-page .body-copy { max-width:340px; text-align:center; }
  .direction-page .gallery-shell { display:block; width:100vw; margin:46px calc(50% - 50vw) 0; padding:16px 0 16px; }
  .direction-page .gallery-viewport { height:clamp(310px,91vw,520px); }
  .direction-page .gallery-slide { width:min(64.5vw,340px); }
  .direction-page .gallery-slide[data-position="-1"] { transform:translate(calc(-50% - 94%),-50%) scale(.88); }
  .direction-page .gallery-slide[data-position="1"] { transform:translate(calc(-50% + 94%),-50%) scale(.88); }
  .gallery-controls { margin-top:4px; }
  .embed-list { width:100%; margin-top:38px; }
  .direction-actions { flex-direction:column; align-items:stretch; width:min(100%,330px); margin:40px auto 0; gap:14px; }
  .direction-action { width:100%; max-width:none; min-width:0; min-height:50px; }
  .site-footer { margin-top:35px; padding:16px 27px 18px; font-size:10px; }
}
@media (max-width:350px) {
  .brand { font-size:16px; }
  .home-page, .direction-page { padding-left:22px; padding-right:22px; }
  .body-copy { font-size:15px; }
  .intro-copy { font-size:24px; }
  .direction-page .section-heading { font-size:36px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ===============================================================
   2026-11 REFINEMENT: Figma «home 0.2» → «about»; iOS wheel motion
   No network fonts, libraries or proprietary plugins required.
   =============================================================== */

/* Small, exactly centered, Figma-like loading typography. */
.intro-copy:not(.special) {
  width:max-content; max-width:calc(100vw - 24px);
  padding:0 12px; gap:.27em;
  font-size:clamp(20px, 4vw, 52px);
  font-weight:300; line-height:1.2; letter-spacing:-.035em;
  align-items:center; justify-content:center;
}
.intro-word-window {
  width:4.35em; height:1.65em; margin-block:-.22em;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 2%, #000 23%, #000 77%, transparent 98%);
  mask-image:linear-gradient(to bottom, transparent 2%, #000 23%, #000 77%, transparent 98%);
}
.intro-word { top:.25em; left:0; line-height:1.12; transform-origin:50% 50%; }
.intro-word.entering { animation:wheelArrive .43s cubic-bezier(.17,.76,.23,1) both; }
.intro-word.exiting { animation:wheelLeave .39s cubic-bezier(.17,.76,.23,1) both; }
@keyframes wheelArrive {
 from { opacity:0; filter:blur(9px); transform:perspective(130px) rotateX(-22deg) translateY(67%); }
 to { opacity:1; filter:blur(0); transform:perspective(130px) rotateX(0deg) translateY(0); }
}
@keyframes wheelLeave {
 from { opacity:1; filter:blur(0); transform:perspective(130px) rotateX(0deg) translateY(0); }
 to { opacity:0; filter:blur(9px); transform:perspective(130px) rotateX(18deg) translateY(-68%); }
}
.intro-copy.special { max-width:calc(100vw - 32px); font-size:clamp(19px, 4vw, 52px); }
.intro-copy.special .intro-prefix { white-space:normal; text-align:center; max-width:90vw; }

/* The page itself never receives blur/transform: avoids Safari sticky shifts
   and avoids sharp rectangular blur boundaries. */
.home-page { width:100%; padding:0; animation:none; }
.home-splash {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; justify-content:center; align-items:flex-start;
  min-height:max(480px,calc(100svh - 74px));
  padding:clamp(68px,13svh,162px) 24px 125px;
  background:var(--bg);
}
.hero-message { position:relative; z-index:2; width:min(100%, 700px); }
.home-splash .section-heading {
  position:relative; z-index:3;
  width:min(100%, 760px);
  max-height:34svh;
  margin:0 auto;
  font-size:clamp(36px,5.4vw,72px);
  line-height:1.13;
  letter-spacing:-.045em;
  font-weight:300;
  overflow:visible;
  overflow-wrap:normal;
  text-wrap:balance;
  text-align:center;
}
.hero-atmosphere {
  position:absolute; inset:-20% -25%; z-index:-1;
  overflow:visible; pointer-events:none;
  filter:none;
  -webkit-mask-image:radial-gradient(ellipse 59% 60% at 50% 48%, #000 30%, transparent 95%);
  mask-image:radial-gradient(ellipse 59% 60% at 50% 48%, #000 30%, transparent 95%);
}
.glow-cloud {
  position:absolute; left:50%; top:41%;
  width:min(92vw,720px); height:min(99vw,680px);
  border-radius:50%;
  background:radial-gradient(ellipse at 45% 48%,rgba(219,85,67,.43) 0%,rgba(148,30,62,.21) 28%,rgba(45,0,23,.055) 56%, transparent 73%);
  filter:blur(58px);
  will-change:transform;
  animation:glowFloatOne 12s ease-in-out infinite alternate;
}
.glow-two {
  top:48%; width:min(70vw,510px); height:min(82vw,560px);
  background:radial-gradient(ellipse at center,rgba(252,157,113,.24),rgba(163,33,69,.15) 30%,transparent 73%);
  filter:blur(74px); animation:glowFloatTwo 15s ease-in-out infinite alternate;
}
@keyframes glowFloatOne {
 from{transform:translate(-51%,-51%) rotate(-14deg) scale(.90)}
 to{transform:translate(-45%,-42%) rotate(24deg) scale(1.14)}
}
@keyframes glowFloatTwo {
 from{transform:translate(-57%,-48%) rotate(10deg) scale(.98)}
 to{transform:translate(-41%,-56%) rotate(-21deg) scale(1.07)}
}
@media (prefers-color-scheme:light) {
 .glow-cloud {opacity:.34;}
 .glow-two {opacity:.36;}
}
.hero-discover {
  position:absolute; z-index:3; bottom:clamp(40px,8svh,100px);
  left:50%; transform:translateX(-50%);
  white-space:nowrap;
}
.hero-discover:hover {transform:translateX(-50%) translateY(-2px);}
.hero-discover:active {transform:translateX(-50%) scale(.98);}

/* Screen 2 / 'Хватит одной идеи' from Figma. */
.home-about {
  position:relative; isolation:isolate;
  width:100%; max-width:100%;
  padding:clamp(75px,11svh,135px) 24px clamp(75px,11svh,130px);
  overflow:hidden; scroll-margin-top:74px;
}
.about-atmosphere {
  position:absolute; z-index:-1; left:54%; top:-175px;
  width:min(95vw,800px); height:520px; transform:translateX(-50%);
  background:radial-gradient(ellipse at 65% 50%,rgba(137,142,156,.12),transparent 66%);
  filter:blur(60px); pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 36%,transparent 90%);
  mask-image:radial-gradient(ellipse at center,#000 36%,transparent 90%);
}
.about-copy {max-width:860px;margin:auto;text-align:center;}
.about-heading {font-size:clamp(36px,5vw,66px);font-weight:300;letter-spacing:-.047em;line-height:1.16;margin:0 auto clamp(29px,5svh,58px);max-width:670px;}
.home-about .body-copy {max-width:700px;font-size:clamp(16px,1.45vw,18px);line-height:1.49;text-align:center;letter-spacing:-.007em;}
.about-scroll-cue { display:flex; width:42px; height:25px; margin:clamp(44px,8svh,90px) auto clamp(34px,5svh,68px); align-items:center; justify-content:center; color:var(--muted);opacity:.7; }
.home-desktop-gallery { margin:0 auto; }
.home-desktop-gallery .gallery-shell { margin-top:0; }
.home-about .about-secondary { margin-top:clamp(49px,7svh,90px); }
.home-about .home-cta-row { margin-top:clamp(48px,7svh,70px); }

/* Универсальные кнопки. Только «Узнать больше» — стекло.
   В темной теме — мягкая матовая подложка с blur, в светлой — контраст. */
.pill-button:not(.hero-discover), .direction-action {
  background:rgba(255,255,255,.09);
  color:#f7f7f7;
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:none;
  overflow:hidden;
}
.pill-button:not(.hero-discover):hover, .direction-action:hover {
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.44);
}
.pill-button:not(.hero-discover).home-contact-button, .direction-action.primary {
  background:#f5f5f5; color:#101010; border-color:#f5f5f5;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.pill-button:not(.hero-discover).home-contact-button:hover, .direction-action.primary:hover {background:#dedede;border-color:#dedede;}
@media (prefers-color-scheme: light) {
  .pill-button:not(.hero-discover), .direction-action {
    color:#171717; background:#fff; border-color:rgba(0,0,0,.34);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .pill-button:not(.hero-discover):hover, .direction-action:hover {background:#ebebeb;border-color:#171717;}
  .pill-button:not(.hero-discover).home-contact-button, .direction-action.primary {background:#111;color:#fff;border-color:#111;}
  .pill-button:not(.hero-discover).home-contact-button:hover, .direction-action.primary:hover {background:#303030;border-color:#303030;}
}
/* Единственная Liquid Glass-кнопка — запуск второго экрана. */
.hero-discover.glass-button {
  isolation:isolate; overflow:hidden;
  border:1px solid rgba(255,255,255,.29);
  color:var(--text);
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 60%,rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 9px 26px rgba(0,0,0,.12);
}
.hero-discover.glass-button::before {
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(154deg,rgba(255,255,255,.11),transparent 44%);
}
@media (prefers-color-scheme:light) {
  .hero-discover.glass-button {
    background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.22);color:#151515;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 9px 28px rgba(0,0,0,.1);
  }
}
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))) {
  .hero-discover.glass-button {background:var(--surface-soft);}
}
@media (hover:none) {
  .pill-button:hover, .direction-action:hover {transform:none;box-shadow:none;}
  .home-splash .hero-discover.glass-button:hover {transform:translateX(-50%);}
}
/* Picker-style reveal only on individual content items. No rectangular clipping. */
.reveal { opacity:0; filter:blur(8px); transform:translate3d(0,24px,0) perspective(360px) rotateX(-9deg); transform-origin:center top; transition:opacity .8s ease, filter .95s var(--ease),transform .95s var(--ease); }
.reveal.is-visible { opacity:1;filter:blur(0);transform:translate3d(0,0,0) perspective(360px) rotateX(0); }

/* Header always stays still while mobile words crossfade. */
@media(max-width:760px) {
  .intro-copy:not(.special) {font-size:clamp(19px,5.65vw,24px);}
  .intro-copy.special {font-size:clamp(19px,5.6vw,26px);}
  .brand { width:max-content; max-width:calc(100% - 99px); font-size:clamp(17px,5vw,20px);}
  .brand-word-window { flex:none; }
  .site-header { background:linear-gradient(to bottom,var(--header-solid) 0%,var(--header-bg) 34%,transparent 100%);-webkit-backdrop-filter:none;backdrop-filter:none; }
  .mobile-menu-toggle { right:max(16px,env(safe-area-inset-right)); width:38px;height:38px;border-color:var(--line); background:rgba(128,128,128,.065); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); }
  .home-page {padding:0;}
  .home-splash {
    min-height:max(500px,calc(100svh - 68px));
    padding:clamp(82px,15svh,155px) 28px 118px;
  }
  .home-splash .section-heading {
    font-size:clamp(32px,10vw,39px);
    max-width:325px;max-height:34svh;
    line-height:1.14;letter-spacing:-.039em;
    overflow:visible;
  }
  .hero-message { max-width:325px; }
  .glow-cloud {width:380px;height:440px;filter:blur(43px);top:43%;}
  .glow-two {width:320px;height:370px;filter:blur(57px);}
  .hero-discover {bottom:clamp(38px,8svh,74px); min-width:187px;min-height:50px;font-size:15px;}
  .home-about {padding:clamp(69px,12svh,104px) 28px 68px;scroll-margin-top:68px;}
  .about-copy {text-align:left;}
  .about-heading {font-size:clamp(34px,10vw,40px);max-width:265px;line-height:1.13;margin:0 0 34px;letter-spacing:-.045em;}
  .home-about .body-copy {text-align:left;font-size:16px;line-height:1.39;letter-spacing:-.008em;}
  .home-about .about-primary {max-width:340px;}
  .about-scroll-cue {margin:58px auto 72px;color:var(--subtle);}
  .home-desktop-gallery {display:none;}
  .home-about .about-secondary {margin:0 auto;max-width:340px;text-align: center;}
  .home-about .home-cta-row {display:none;}
  .home-about .mobile-choose-row {display:flex;justify-content:center;margin:72px auto 0;}
  .home-about .mobile-choose-row .pill-button {min-width:205px;}
  .direction-page {padding-top:42px;}
  .direction-page .gallery-shell {margin-top:46px;}
}
@media (max-width:350px) {
  .home-splash .section-heading {font-size:32px;}
  .intro-copy:not(.special) {font-size:19px;}
  .home-about {padding-left:25px;padding-right:25px;}
}
@media (prefers-reduced-motion:reduce) {
  .glow-cloud, .glow-two {animation:none !important;transform:translate(-50%,-50%);will-change:auto;}
  .reveal {opacity:1!important;filter:none!important;transform:none!important;}
}
/* Keep the hero CTA absolutely positioned despite its shared glass styling. */
.home-splash .hero-discover.glass-button {
  position:absolute;
  left:50%;
  bottom:clamp(40px,8svh,100px);
  transform:translateX(-50%);
}
.home-splash .hero-discover.glass-button:hover {transform:translateX(-50%) translateY(-2px);}
.home-splash .hero-discover.glass-button:active {transform:translateX(-50%) scale(.98);}

/* Direction pages: reveal individual texts, never blur an entire full-width page. */
.direction-page {animation:none;}
/* Feather the outer edges of the Figma-style overlapping gallery cards. */
.gallery-viewport {
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

/* ===============================================================
   ШАПКА: один базовый шрифт и одна линия для логотипа и слова.
   Одинаковая высота строк исключает смещение абсолютного span.
   Настройка для ПК и телефонов, без зависимости от анимации/скролла.
   =============================================================== */
.brand {
  align-items: center;
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.2;
}
.brand-prefix {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.brand-word-window {
  display: block;
  align-self: center;
  height: 1.2em;
  line-height: 1.2;
  overflow: visible; /* плавный fade без прямоугольного обрезания */
}
.brand-word {
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}
/* Состояние hidden устанавливает JavaScript при переходе между страницами. */
.mobile-menu-toggle[hidden] { display: none !important; }

/* ================================================================
   VERSION 4 — тёмный контентный экран, GIF-подложка, мобильная галерея
   ================================================================ */

/* У двух частей мобильного логотипа — общая центральная ось:
   без absolute у слова, одинаковое семейство, размер и line-height. */
.brand {align-items:center;}
.brand-word-window {
  display:inline-flex;align-items:center;justify-content:flex-start;
  position:relative; height:1.2em; flex:0 0 auto; overflow:visible;
}
.brand-word {
  position:relative;inset:auto; top:auto;left:auto;
  display:inline-block; height:auto;line-height:1.2;
  vertical-align:middle;
}

/* Второй экран — намеренно чёрный независимо от настроек устройства. */
.home-about {
  background:#000;color:#fafafa;
  --text:#fafafa;--muted:#aeaeae;--subtle:#717171;
  --line:rgba(255,255,255,.16);--accent:#f5f5f5;--accent-text:#111;
}
.home-about .body-copy { color:#aeaeae; }
.home-about .about-scroll-cue {color:#8a8a8a;}
/* Гифка на весь экран с cover — без чёрных полос и зависимости от пропорций.
   Изображение сильно приглушено и размыто, маскируется до начала карусели. */
.about-media-layer {
  position:absolute;inset:0 0 auto; height:min(77svh,770px);
  z-index:0;overflow:hidden;pointer-events:none;background:#000;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,#000 15%,#000 37%,rgba(0,0,0,.35) 66%,transparent 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,#000 15%,#000 37%,rgba(0,0,0,.35) 66%,transparent 100%);
}
.about-media-layer::after {content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.62) 52%,#000 100%);}
.about-media-layer img {
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:blur(15px) brightness(.75) saturate(.62);
  opacity:.60;transform:scale(1.09);
  animation:aboutGifBreath 22s ease-in-out infinite alternate;
}
@keyframes aboutGifBreath {from{transform:scale(1.09)}to{transform:scale(1.28)}}
.home-about > :not(.about-media-layer) {position:relative;z-index:1;}
.home-about .about-copy {isolation:isolate;}

/* Карусель главной снова доступна и на мобильной версии. */
.home-about .home-gallery-section {display:block;position:relative;width:100%;margin:0 auto;}
.home-about .home-gallery {display:block; margin-top:0;}
@media(max-width:760px) {
  .home-about .home-gallery-section {display:block;}
  .home-about .home-gallery {display:block; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:16px 0 18px;}
  .home-about .home-gallery .gallery-viewport {height:clamp(310px,92vw,520px);}
  .home-about .home-gallery .gallery-slide {width:min(64vw,338px);}
  .home-about .home-gallery .gallery-slide[data-position="-1"] {transform:translate(calc(-50% - 94%),-50%) scale(.88);}
  .home-about .home-gallery .gallery-slide[data-position="1"] {transform:translate(calc(-50% + 94%),-50%) scale(.88);}
  .home-about .home-gallery .gallery-controls {margin-top:4px;}
  .home-about .about-secondary {margin-top:50px;}
  .home-about .about-media-layer {height:min(84svh,760px);}
}

/* Тёмные матовые кнопки для неизменно тёмного второго экрана. */
.home-about .pill-button:not(.hero-discover) {
  background:rgba(255,255,255,.075);color:#f5f5f5;border-color:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.home-about .pill-button:not(.hero-discover):hover {background:rgba(255,255,255,.15);}
.home-about .home-contact-button {background:#fafafa!important;color:#161616!important;border-color:#fafafa!important;}

/* Шапка входит в тёмную зону, не меняя тему первого экрана. */
.site-header {transition:color .34s ease,border-color .34s ease;}
.site-header.is-about-dark {
  --text:#fafafa;--muted:#aeaeae;--line:rgba(255,255,255,.13);
  --accent:#fafafa;--accent-text:#101010;
  color:#fafafa;border-color:rgba(255,255,255,.12);
}
.site-header.is-about-dark::before {
  background: rgba(0,0,0,.94);
  border-bottom-color: rgba(255,255,255,.11);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.site-header.is-about-dark::after {
  opacity:.72;
  background: linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,0));
}
@media(max-width:760px) {
  .site-header.is-about-dark::before {
    background: rgba(0,0,0,.965);
    border-bottom-color: rgba(255,255,255,.10);
  }
}
.site-shell.is-home-route .site-footer {
  background:#000;color:#777;border-top-color:rgba(255,255,255,.14);
  max-width:none;margin-top:0;
}

.site-shell.is-home-route .main-content {
  padding-bottom: 0;
  background: #000;
}
.site-shell.is-home-route .home-splash {
  background: var(--bg);
}

.site-footer {align-items:center;flex-wrap:wrap;}
.site-footer .footer-price-link {color:var(--text);font-size:11px;letter-spacing:.02em;text-decoration:underline;text-decoration-color:var(--subtle);text-underline-offset:4px;transition:opacity .2s;}
.site-footer .footer-price-link:hover {opacity:.63;}
@media (max-width:420px) {
  .site-footer {column-gap:9px;row-gap:13px;justify-content:space-between;}
  .footer-price-link {order:3;width:100%;text-align:center;}
}
@media (prefers-reduced-motion:reduce) {
  .about-media-layer img {animation:none!important;transform:scale(1.13);}
}
/* Плотная тёмная поверхность при прокрутке второго блока:
   буквы основного контента не просвечивают через шапку на светлой теме. */

/* V5.2 — mobile light header: no grey strip, line, shadow or blur spill.
   Use an opaque white header so iOS / Telegram WebView cannot expose
   compositing seams along its lower edge. Dark about-header is unchanged. */
@media (max-width: 760px) and (prefers-color-scheme: light) {
  .site-header:not(.is-about-dark) {
    background: #fff;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header:not(.is-about-dark)::before,
  .site-header:not(.is-about-dark)::after {
    content: none;
    display: none;
  }
}

/* Текст перед заголовком настраивается отдельно для каждого направления. */
.direction-intro .eyebrow:empty { display: none; }

/* ====================================================================
   VERSION 7 — точечные изменения интерфейса
   ==================================================================== */
/* Фраза целиком занимает ровно свою реальную ширину и центрируется,
   а мягкий переход применяется к «У нас есть» вместе со словом. */
@media (max-width:760px) {
  .site-header .brand {
    width:max-content;
    max-width:calc(100% - 98px);
    left:50%;transform:translateX(-50%);
    justify-content:center;
    white-space:nowrap;
  }
  .site-header .brand-word-window {
    width:auto;
    height:auto;
    min-width:0;
    flex:0 0 auto;
    overflow:visible;
  }
  .site-header .brand-word {
    position:static;
    display:inline-block;
    height:auto;
    white-space:nowrap;
  }
  .site-header .brand.brand-changing {
    animation:brandWholeFade .68s ease both;
  }
  .home-about .about-copy {
    width:100%;
    max-width:340px;
    margin-inline:auto;
    text-align:left;
  }
  .home-about .about-heading {
    text-align:left;
    margin-left:0;
    margin-right:0;
  }
}
@keyframes brandWholeFade {
  from {opacity:0;filter:blur(5px)}
  to {opacity:1;filter:blur(0)}
}
/* Симметричная SVG-стрелка точно по геометрическому центру. */
.gallery-arrow {line-height:0;}
.gallery-arrow svg {display:block;flex:none;pointer-events:none;}
/* Заголовок меню сверху по центру, крестик отдельно внизу. */
.mobile-menu-head {justify-content:center;text-align:center;}
.mobile-menu-head #mobileMenuTitle {display:block;width:100%;text-align:center;}
.mobile-menu-panel > .icon-close {
  display:grid;
  margin:19px auto 0;
  width:42px;height:42px;
  font-size:27px;
  line-height:1;
}