/* core.css страницы /style — из site/v8/core.css (tools/prod.mjs). */
/* UpSound · /style · круг 3 (v5) — общие токены и части. Разделы — в s-*.css.
   Цвет: чёрный, белый, серые; красный #FF0000 — только логотип и главная кнопка (акцентные слова — не красным).
   Свет и свечение — белые/нейтральные, мягкие. Свечения у кнопок нет. */
:root {
  --red: #FF0000;
  --bg: #000;
  --fg: #fff;
  --ink2: #c4c4c4;
  --mute: #8e8e8e;
  --dim: #5a5a5a;
  --line: rgba(255, 255, 255, .1);
  --pad: clamp(16px, 5.56vw, 80px);
  --maxw: 1440px;
  --ft: 'Wix Madefor Text', 'Helvetica Neue', Arial, sans-serif;
  --h2: clamp(30px, 3.75vw, 54px);
  --sec: clamp(112px, 11.5vw, 176px);
  --ease: cubic-bezier(.22, .7, .12, 1);
  --glow: rgba(255, 255, 255, .07);
}
@media (max-width: 759px) { :root { --pad: 16px; } } /* = V4.G.pad на телефоне */

/* ───────── типографика «Коллаж» (круг 4): Inter Tight 500, строчные, плотная разрядка ─────────
   --fd шрифт заголовков, --fd-w вес, --fd-ls разрядка, --fd-k множитель кегля, --fd-lh интерлиньяж дисплея,
   --h2-lh интерлиньяж .h2, --hc цвет заголовка (светло-серый), акцентные слова (em.r) — белые,
   --gap-title заголовок → абзац, --gap-btn абзац → кнопка. Работы в строке — капсулы (ставит s-hero.js). */
:root {
  --fd: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --fd-w: 500; --fd-ls: -.055em; --fd-k: 1.3; --fd-lh: .96; --h2-lh: 1;
  --gap-title: clamp(28px, 2.8vw, 40px); --gap-btn: 32px; --hc: #a2a2a2;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.rm { scroll-behavior: auto; }
html.lb-on { overflow: hidden; }
body { margin: 0; background: #000; color: var(--fg); font: 400 17px/1.55 var(--ft); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: var(--sec) 0 0; }

/* ───────── типографика ───────── */
.r { color: #fff; font-style: normal; }
.d { font-family: var(--fd); font-weight: var(--fd-w); letter-spacing: var(--fd-ls); line-height: var(--fd-lh); text-transform: lowercase; font-kerning: normal; color: var(--hc); }
.h2 { font-family: var(--fd); font-weight: var(--fd-w); font-size: calc(var(--h2) * var(--fd-k)); line-height: var(--h2-lh); letter-spacing: var(--fd-ls); text-transform: lowercase; text-wrap: balance; font-kerning: normal; color: var(--hc); }
.d .r, .h2 .r { color: #fff; }
.lead { color: var(--mute); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; max-width: 32em; text-wrap: pretty; }
.lead .r { color: #fff; font-weight: 500; }

/* работа в строке заголовка раздела — капсула (картинка или играющий ролик), щелчок — работа крупно */
.h2-cap { position: relative; top: -.04em; display: inline-block; vertical-align: middle; height: .7em; width: 1.34em; margin: 0 .06em 0 .1em; border-radius: 999px; overflow: hidden; background: #111; cursor: zoom-in; transition: transform .6s var(--ease); }
.h2-cap img, .h2-cap video { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.h2-cap:hover { transform: scale(1.06) rotate(-2deg); }
.h2-w { white-space: nowrap; }
/* соцсети: на широких экранах заголовок стоит в узкой колонке (ширина колонки − 920 px) — кегль от неё, чтобы «стиль + работа + для» шли одной строкой */
@media (min-width: 1240px) { #social .h2 { font-size: min(calc(var(--h2) * var(--fd-k)), calc((min(100vw, 1440px) - 2 * var(--pad) - 920px) / 5.6)); } }

.cap { font-size: 13px; line-height: 1.4; color: var(--mute); letter-spacing: .01em; }

/* ───────── кнопки: заливка, перекат текста на наведении; без свечения ───────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 32px; border-radius: 999px; font: 500 15.5px/1 var(--ft); letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: transform .5s var(--ease), background-color .4s, color .4s; isolation: isolate; }
.btn-t { position: relative; display: block; overflow: hidden; line-height: 1.25; }
.btn-t > span { display: block; transition: transform .62s var(--ease); }
.btn-t > span + span { position: absolute; left: 0; right: 0; top: 0; transform: translateY(110%); }
.btn:hover .btn-t > span:first-child, .btn:focus-visible .btn-t > span:first-child { transform: translateY(-110%); }
.btn:hover .btn-t > span + span, .btn:focus-visible .btn-t > span + span { transform: translateY(0); }
.btn:active { transform: scale(.975); }
.btn-red { background: var(--red); color: #fff; }
.btn-white { background: #fff; color: #000; }
.btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: box-shadow .4s, transform .5s var(--ease); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.btn-sm { height: 42px; padding: 0 20px; font-size: 14px; }
.btn-wide { width: 100%; height: 62px; font-size: 16px; }
.btn.wait { opacity: .7; pointer-events: none; }

/* ───────── шапка ───────── */
.hd { position: fixed; z-index: 60; top: 0; left: 0; right: 0; transition: background-color .5s, border-color .5s, backdrop-filter .5s; border-bottom: 1px solid transparent; }
.hd.on { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: rgba(255, 255, 255, .06); }
.hd-in { height: 72px; display: flex; align-items: center; gap: 32px; }
.hd-logo { display: block; flex: none; }
.hd-logo img { height: 27px; width: auto; }
.hd-nav { display: flex; gap: clamp(16px, 1.9vw, 30px); margin-left: auto; }
.hd-nav a { position: relative; font-size: 14px; color: #bdbdbd; text-decoration: none; padding: 6px 0; transition: color .3s; }
.hd-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.hd-nav a:hover { color: #fff; }
.hd-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 1100px) { .hd-nav { display: none; } .hd .btn { margin-left: auto; } }
@media (max-width: 759px) { .hd-in { height: 60px; } .hd-logo img { height: 23px; } .hd .btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; } }

/* ───────── появления: проявление из темноты, без вылетов ───────── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
html.rm .rv { opacity: 1; transform: none; transition: none; }

/* ───────── поля заявки (разметку даёт V4.formFields) ───────── */
.fm { display: flex; flex-direction: column; gap: 20px; transition: opacity .45s, filter .45s; }
.fm.gone { opacity: 0; filter: blur(6px); }
.fld { display: block; }
.fld-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; color: #d0d0d0; }
.fld-opt { font-size: 12px; color: #4a4a4a; }
.fld input { width: 100%; height: 60px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); padding: 0 22px; color: #fff; font: 400 17px/1 var(--ft); transition: box-shadow .35s, background-color .35s; -webkit-appearance: none; appearance: none; }
.fld input::placeholder { color: #7a7a7a; }
.fld input:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.fld input:focus { outline: none; background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62); }
.fld.err input { box-shadow: inset 0 0 0 1px var(--red); }
.fld-err { display: block; font-size: 13px; color: var(--red); }
.fld.err .fld-err { margin-top: 8px; }
.fm .btn-wide { margin-top: 10px; }
.consent { font-size: 12.5px; line-height: 1.55; color: #6a6a6a; }
.consent a { color: #9b9b9b; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; transition: color .3s; }
.consent a:hover { color: #fff; }
.fm-ok { min-height: 320px; display: grid; place-items: center; text-align: center; opacity: 0; transition: opacity .9s; outline: none; }
.fm-ok.in { opacity: 1; }

/* ───────── подвал (круг 5): крупно и ярко — телефон и почта шрифтом заголовков, огромный логотип-слово внизу ───────── */
.ft { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: var(--sec); overflow: hidden; }
.ft-in { padding-top: clamp(64px, 7vw, 112px); }
.ft-l { font-size: 13.5px; line-height: 1.4; color: #7d7d7d; margin-bottom: 14px; }
.ft-big { display: inline-block; font-family: var(--fd); font-weight: var(--fd-w); font-size: min(9.4vw, 136px); line-height: 1.02; letter-spacing: -.055em; color: #fff; text-decoration: none; white-space: nowrap; transition: color .4s; }
.ft-tel { display: block; width: max-content; }
.ft-mail { color: var(--hc); }
.ft-big:hover { color: #fff; }
.ft-tel:hover { color: var(--hc); }
.ft-row { display: flex; align-items: center; gap: .18em; font-size: min(9.4vw, 136px); }
.ft-cap { position: relative; top: .04em; flex: none; width: 1.46em; height: .74em; border-radius: 999px; overflow: hidden; background: #111; cursor: zoom-in; transition: transform .6s var(--ease); }
.ft-cap video { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.ft-cap:hover { transform: scale(1.06) rotate(-2deg); }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 40px; margin-top: clamp(56px, 6vw, 88px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ft-t { font-size: 17px; line-height: 1.5; color: #dcdcdc; max-width: 17em; }
.ft-soc li + li { margin-top: 4px; }
.ft-soc a { font-family: var(--fd); font-weight: var(--fd-w); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.035em; color: #fff; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.ft-soc a:hover { background-size: 100% 1px; }
.ft-docs li + li { margin-top: 8px; }
.ft-docs a { color: #9a9a9a; font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color .3s; }
.ft-docs a:hover { color: #fff; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: clamp(44px, 4.4vw, 64px); font-size: 13.5px; color: #7d7d7d; }
.ft-word { display: block; overflow: hidden; margin-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(18px, 2.2vw, 32px); }
.ft-word img { width: 100%; height: auto; transform: translateY(70%); transition: transform 1.5s var(--ease); }
.ft.in .ft-word img { transform: none; }
html.rm .ft-word img { transform: none; transition: none; }
@media (max-width: 1199px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .ft-big, .ft-row { font-size: min(9.6vw, 52px); }
  .ft-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft-t { font-size: 16px; }
}

/* ───────── просмотр крупно: картинка или ролик ───────── */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; opacity: 0; transition: opacity .42s ease; }
.lb.open { opacity: 1; }
.lb[hidden] { display: none; }
.lb-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lb-fig { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; padding: 84px 112px 56px; }
.lb-img, .lb-vid { grid-area: 1 / 1; max-width: calc(100vw - 224px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 6px; opacity: 0; transform: scale(.975); transition: opacity .42s ease, transform .6s var(--ease); box-shadow: 0 40px 120px rgba(0, 0, 0, .8); background: #000; }
.lb-vid { width: min(calc(100vw - 224px), 1280px); aspect-ratio: 16 / 9; height: auto; }
.lb-fig.tall .lb-vid { width: auto; height: calc(100vh - 140px); height: calc(100dvh - 140px); aspect-ratio: 9 / 16; border-radius: 18px; cursor: pointer; }
.lb-fig.in .lb-img, .lb-fig.in .lb-vid { opacity: 1; transform: none; }
.lb-bar { grid-area: 1 / 1; align-self: end; justify-self: center; width: 120px; height: 2px; margin-bottom: -22px; background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .4s; }
.lb-bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.lb-fig.in .lb-vid:not([hidden]) ~ .lb-bar { opacity: 1; }
.lb-x, .lb-snd { position: absolute; z-index: 2; top: 20px; right: 24px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: box-shadow .3s; }
.lb-snd { right: auto; left: 24px; }
.lb-x:hover, .lb-snd:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
.lb-nav { position: absolute; z-index: 2; top: 50%; margin-top: -30px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: box-shadow .3s; }
.lb-nav svg, .rbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-nav:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
.lb-prev { left: 28px; }
.lb-next { right: 28px; }
.lb-nav[hidden] { display: none; }
@media (max-width: 759px) {
  .lb-fig { padding: 72px 12px 96px; }
  .lb-img, .lb-vid { max-width: calc(100vw - 24px); max-height: calc(100vh - 168px); max-height: calc(100dvh - 168px); }
  .lb-vid { width: calc(100vw - 24px); }
  .lb-fig.tall .lb-vid { height: auto; width: min(calc(100vw - 24px), calc((100dvh - 168px) * 9 / 16)); }
  .lb-nav { top: auto; bottom: 24px; margin: 0; width: 52px; height: 52px; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
  .lb-x { top: 12px; right: 12px; }
  .lb-snd { top: 12px; left: 12px; }
}

/* ───────── курсор-подсказка: белый круг со словом ───────── */
.cur { position: fixed; z-index: 80; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: #000; font: 500 13.5px/1 var(--ft); letter-spacing: .01em; transition: transform .45s var(--ease); }
.cur.on { opacity: 1; }
.cur.on span { transform: translate(-50%, -50%) scale(1); }
.cur.down span { transform: translate(-50%, -50%) scale(.82); }
@media (hover: hover) and (pointer: fine) { [data-cur] { cursor: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-t > span, .lb, .lb-img, .lb-vid, .rv { transition: none !important; }
}