/* Brosure Group — сайт студии.
 * Раскладка: тёмная сцена, много воздуха (Rejouice); hero — сеть точек (Octavius); 3D-кольцо работ; список с плавающим превью (Dennis Snellenberg);
 * появление и плавная прокрутка — GSAP + Lenis (Cosmos). Шрифты: Michroma — заголовки (RU/UK — Exo 2), Onest — текст, JetBrains Mono — подписи и цифры. */
:root {
  --bg: #0a0b0d;
  --bg-2: #101216;
  --surface: #14171c;
  --line: #24282f;
  --fg: #ecebe6;
  --muted: #8e9198;
  --amber: #ff812a; /* оранжевый логотипа (было #f2b84b) */
  --peri: #7c8cff;
  --display: "Michroma", "Exo 2", "Onest", system-ui, sans-serif; /* кириллицу (RU, UK) добирает Exo 2 */
  --body: "Onest", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--amber); color: #111; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }

/* ——— Прелоадер «Привет» ——— */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: #050607; color: var(--fg);
}
.loader-word { font: 500 clamp(28px, 5vw, 56px) var(--display); display: flex; align-items: center; gap: 14px; }
.loader-word::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
html:not(.js) .loader, .loader.gone { display: none; }
/* страховка: не загрузился gsap или упал main.js — лоадер не закрывает страницу навсегда */
.loader { animation: loader-failsafe 0s 4s forwards; }
@keyframes loader-failsafe { to { visibility: hidden; pointer-events: none; } }

/* ——— Курсор ——— */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--fg); mix-blend-mode: difference;
  display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, opacity .2s;
  opacity: 0; /* до первого движения мыши — иначе белая точка висит в левом верхнем углу */
}
.cursor.on { opacity: 1; }
/* якорь не прячет заголовок раздела под липкой шапкой */
section[id] { scroll-margin-top: 84px; }
.cursor span { font: 500 12px var(--body); color: #111; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--amber); mix-blend-mode: normal; }
.cursor.big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ——— Навигация ——— */
.nav {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px; padding: 18px var(--gutter);
  transition: background .4s, transform .5s var(--ease);
}
.nav.solid { background: rgb(10 11 13 / 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.hide { transform: translateY(-110%); }
.logo { font: 500 17px var(--display); text-decoration: none; display: flex; align-items: baseline; gap: 6px; }
.logo-mark { color: var(--amber); }
.logo-g { color: var(--muted); margin-left: 4px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: 15px; transition: color .2s; }
.nav-links a:hover { color: var(--fg); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang { font: 500 13px var(--mono); color: var(--fg); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.lang:hover { border-color: var(--muted); }
/* Переключатель RU / EN / UK */
.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.langs button { font: 500 12px var(--mono); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 6px 9px; cursor: pointer; }
.langs button:hover { color: var(--fg); }
.langs button[aria-pressed="true"] { color: var(--bg); background: var(--fg); }
@media (max-width: 860px) { .nav-links { display: none; } .nav-right { margin-left: auto; } }
/* на телефоне меню разделов нет — главную кнопку оставляем, только компактнее */
@media (max-width: 420px) { .nav .btn-small { padding: 8px 12px; font-size: 13px; } .nav .logo-g { display: none; } }

/* ——— Кнопки ——— */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 500 16px var(--body); color: #111; background: var(--amber); border: 0; border-radius: 999px;
  padding: 16px 26px; transition: background .3s, color .3s;
}
.btn:hover { background: #ffd27a; }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface); }
.btn-small { padding: 10px 18px; font-size: 14px; }
.arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translate(3px, -3px); }
.round { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 18px; cursor: pointer; }
.round:hover { border-color: var(--muted); }

/* ——— Hero ——— */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.net { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 30% 55%, rgb(10 11 13 / 0.78), transparent 70%), linear-gradient(to bottom, transparent 70%, var(--bg)); }
.hero-inner { position: relative; z-index: 2; padding: 140px var(--gutter) 200px; max-width: 1320px; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; color: var(--muted); font: 400 14px var(--mono); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd35a; box-shadow: 0 0 12px #5fd35a; }
.hero-title { font-size: clamp(44px, 8.4vw, 132px); line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch; }
.hero-sub { max-width: 52ch; color: #c4c5c9; font-size: clamp(17px, 1.5vw, 20px); margin: 32px 0 40px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-hint { margin: 44px 0 0; font: 400 12px var(--mono); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.marquee { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; overflow: hidden; pointer-events: none; }
.marquee-track { display: flex; width: max-content; }
.marquee-track span { font: 500 clamp(64px, 11vw, 176px)/1 var(--display); letter-spacing: -0.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgb(236 235 230 / 0.16); padding-right: 0.3em; }

/* ——— Секции ——— */
section { padding-inline: var(--gutter); }
.section-head { max-width: 1320px; margin: 0 auto 56px; display: grid; gap: 14px; }
.section-head.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.section-head h2 { font-size: clamp(34px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.04em; }
.label { margin: 0; font: 400 13px var(--mono); color: var(--amber); letter-spacing: 0.08em; text-transform: uppercase; }

.statement { padding-block: clamp(120px, 18vw, 260px); }
.statement-text { max-width: 1180px; margin: 0 auto; font: 400 clamp(26px, 3.6vw, 52px)/1.22 var(--display); letter-spacing: -0.03em; }
.statement-text .w { opacity: 0.18; transition: opacity .2s; }
html:not(.js) .statement-text .w { opacity: 1; }

/* ——— 3D-кольцо ——— */
.showcase { padding-block: 40px 120px; }
.ring-stage { position: relative; height: clamp(500px, 56vw, 640px); perspective: 1800px; perspective-origin: 50% 40%; cursor: grab; touch-action: pan-y; user-select: none; overflow: hidden; }
.ring-stage:active { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.card3d {
  position: absolute; width: var(--cw, 360px); height: calc(var(--cw, 360px) * var(--ch, 1.18)); left: calc(var(--cw, 360px) / -2); top: calc(var(--cw, 360px) * var(--ch, 1.18) / -2);
  border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  backface-visibility: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; color: var(--fg); font: inherit; cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.card3d:hover, .card3d:focus-visible { border-color: var(--accent, var(--amber)); box-shadow: 0 0 0 1px var(--accent, var(--amber)), 0 30px 80px -30px var(--accent, var(--amber)); }
.card3d .cover { flex: 1; min-height: 0; position: relative; }
.card3d .meta { padding: 18px 20px 20px; display: grid; gap: 4px; border-top: 1px solid var(--line); background: var(--bg-2); }
.card3d .meta b { font: 500 19px var(--display); letter-spacing: -0.02em; }
.card3d .meta span { color: var(--muted); font-size: 14px; }
.ring-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.ring-count { color: var(--muted); min-width: 64px; text-align: center; }

/* ——— Обложки кейсов ——— */
.cover { background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent, #f2b84b) 22%, transparent), transparent 60%), var(--bg-2); overflow: hidden; }
.cover img, .cover video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.art { position: absolute; inset: 0; padding: 22px; display: flex; }
.art-dash { flex-direction: column; gap: 12px; }
.art-dash .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.art-dash .kpi { background: rgb(255 255 255 / 0.05); border-radius: 8px; padding: 8px; font: 500 15px var(--mono); }
.art-dash .kpi small { display: block; font: 400 9px var(--mono); color: var(--muted); }
.art-dash .bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.art-dash .bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); }
.art-dash .alert { font: 400 11px var(--mono); color: #ff8a70; background: rgb(255 90 67 / 0.1); border-radius: 6px; padding: 6px 8px; }
.art-phone { justify-content: center; align-items: center; }
.art-phone .ph { height: 86%; aspect-ratio: 9/19; border-radius: 22px; border: 2px solid rgb(255 255 255 / 0.18); background: #0d0f12; padding: 14px 10px; display: flex; flex-direction: column; gap: 7px; }
.art-phone .ph i { display: block; height: 10px; border-radius: 5px; background: rgb(255 255 255 / 0.1); }
.art-phone .ph i.hero { height: 56px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 20%, #0d0f12)); }
.art-phone .ph i.s { width: 60%; }
.art-phone .ph .tabs { display: flex; gap: 4px; margin-top: auto; }
.art-phone .ph .tabs i { flex: 1; height: 16px; }
.art-phone .ph .tabs i:first-child { background: var(--accent); }
.art-map { background-image: radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1.4px); background-size: 14px 14px; }
.art-map .pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
.art-map .zone { position: absolute; border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 40% 60% 55% 45%; }
.art-map .tag { position: absolute; font: 400 10px var(--mono); background: rgb(10 11 13 / 0.8); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.art-listing { flex-direction: column; gap: 8px; }
.art-listing .post { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: rgb(255 255 255 / 0.04); border-radius: 10px; padding: 8px; }
.art-listing .post i { height: 44px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 35%, #1a1d22); }
.art-listing .post b { font: 500 12px var(--body); display: block; }
.art-listing .post small { font: 400 10px var(--mono); color: var(--muted); }
.art-listing .post em { font: 500 10px var(--mono); font-style: normal; color: #111; background: var(--accent); border-radius: 999px; padding: 3px 7px; }

/* ——— Список работ ——— */
.worklist { padding-block: 60px 140px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 14px var(--body); color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all .2s; }
.chip:hover { color: var(--fg); }
.chip.on { color: #111; background: var(--fg); border-color: var(--fg); }
.list-head, .row-item { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 80px; gap: 24px; align-items: center; }
.list-head { color: var(--muted); padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.list-head span:last-child, .row-item .yr { text-align: right; }
.rows { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; }
.row-item { padding: 34px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: opacity .3s, padding .4s var(--ease); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; color: inherit; font: inherit; text-align: left; }
.row-item .t { font: 500 clamp(24px, 3.4vw, 52px)/1.05 var(--display); letter-spacing: -0.035em; transition: transform .4s var(--ease); }
.row-item .d { color: var(--muted); font-size: 15px; }
.row-item .yr { font: 400 14px var(--mono); color: var(--muted); }
.rows:hover .row-item { opacity: 0.35; }
.rows .row-item:hover, .rows .row-item:focus-visible { opacity: 1; }
.row-item:hover .t { transform: translateX(14px); }
.rows li[hidden] { display: none; }
@media (max-width: 720px) { .list-head { display: none; } .row-item { grid-template-columns: 1fr auto; gap: 8px; } .row-item .d { grid-column: 1 / -1; grid-row: 2; } }

.preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: min(340px, 26vw); aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
  pointer-events: none; transform: translate(-50%, -50%) scale(0); background: var(--surface);
}
.preview-strip { position: absolute; inset: 0; transition: transform .55s var(--ease); }
.preview-strip .pv { position: absolute; left: 0; right: 0; height: 100%; }
@media (hover: none), (pointer: coarse) { .preview { display: none; } }
/* Миниатюра в строке списка — только на телефоне и планшете: наведения там нет, плавающего превью тоже. */
.row-item .th { display: none; }
@media (hover: none), (pointer: coarse) {
  .row-item { grid-template-columns: 88px 1fr auto; }
  .row-item .th { display: block; grid-row: span 2; width: 88px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
  .row-item .th .cover { width: 100%; height: 100%; }
  .row-item .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* нарисованная обложка в 88 px не читается — вместо неё плитка в цвете кейса */
  .row-item .th .art { display: none; }
  .row-item .th .cover { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 35%, #000)); }
  .row-item .th { grid-column: 1; grid-row: 1 / span 2; }
  .row-item .d { grid-column: 2 / -1; grid-row: 2; }
}

/* ——— Цифры ——— */
.numbers { max-width: 1320px; margin: 40px auto 160px; padding-block: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); padding-inline: 0; }
.num { background: var(--bg); padding: 36px 28px 40px; display: grid; gap: 10px; align-content: start; }
.num b { font: 500 clamp(54px, 6vw, 88px)/0.95 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.num-unit { font: 400 15px var(--mono); color: var(--amber); }
.num p { margin: 0; color: var(--muted); font-size: 15px; max-width: 30ch; }

/* ——— Услуги ——— */
.services { padding-block: 60px 140px; }
.svc-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.svc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: border-color .3s, transform .4s var(--ease); }
.svc:hover { border-color: #3a3f48; transform: translateY(-4px); }
.svc h3 { font-size: 22px; letter-spacing: -0.02em; }
.svc p { margin: 0; color: #b9bbc0; font-size: 15.5px; }
.svc-main { grid-row: span 2; background: linear-gradient(160deg, rgb(242 184 75 / 0.14), transparent 55%), var(--surface); border-color: rgb(242 184 75 / 0.35); }
.svc-main .btn { align-self: flex-start; margin-top: auto; }
.svc-tag { color: var(--amber); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.price { font-size: 18px; color: var(--fg) !important; margin-top: 8px !important; }
.price b { font: 500 44px var(--display); letter-spacing: -0.04em; white-space: nowrap; }
.svc-note { max-width: 1320px; margin: 20px auto 0; }

/* ——— Процесс ——— */
.process { padding-block: 60px 140px; }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.steps li { padding: 28px 28px 32px 0; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--line); padding-left: 24px; }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { border-right: 0; }
.step-n { color: var(--amber); }
.steps h3 { font-size: 21px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 720px) { .steps li { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; } }

/* ——— Команда ——— */
.team { padding-block: 60px 140px; }
.people { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.person p { margin: 8px 0 0; color: #b9bbc0; font-size: 15.5px; }
.person .role { color: var(--amber); margin-top: 6px; }
.person .clock { color: var(--muted); margin-top: 16px; }
.avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font: 500 34px var(--display); letter-spacing: -0.04em; color: #111; background: radial-gradient(circle at 30% 30%, #ffe2a8, var(--amber)); }
.avatar.alt { background: radial-gradient(circle at 30% 30%, #c8d0ff, var(--peri)); }
@media (max-width: 480px) { .person { grid-template-columns: 1fr; } .avatar { width: 72px; height: 72px; font-size: 30px; } }

/* ——— Контакт ——— */
.contact { padding-block: 100px 140px; max-width: 1320px; margin: 0 auto; box-sizing: content-box; }
.contact-title { font-size: clamp(44px, 9vw, 150px); line-height: 0.95; letter-spacing: -0.05em; max-width: 12ch; margin-bottom: 72px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 10px; }
.form label { font: 400 13px var(--mono); color: var(--muted); margin-top: 10px; }
.form input, .form textarea { font: 400 18px var(--body); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; border-radius: 0; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--amber); }
.form .btn { justify-self: start; margin-top: 24px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-note { min-height: 1.5em; margin: 6px 0 0; color: var(--muted); }
.form-note.ok { color: #8fd18b; }
.form-note.err { color: #ff8a70; }
.contact-side { display: grid; gap: 12px; align-content: start; }
.mail { font: 500 clamp(20px, 2.4vw, 32px) var(--display); letter-spacing: -0.03em; color: var(--fg); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; text-align: left; cursor: pointer; justify-self: start; overflow-wrap: anywhere; }
.mail:hover { border-color: var(--amber); }

/* ——— Подвал ——— */
.footer { padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.footer-big { margin: 0; font: 500 clamp(56px, 15vw, 260px)/0.9 var(--display); letter-spacing: -0.06em; color: var(--surface); white-space: nowrap; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; }
.footer-row a { text-decoration: none; }
.footer-row a:hover { color: var(--fg); }

/* ——— Карточка кейса ——— */
.case { width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); color: var(--fg); overflow: auto; }
.case::backdrop { background: rgb(5 6 7 / 0.78); backdrop-filter: blur(6px); }
.case[open] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); animation: case-in .45s var(--ease); }
@media (max-width: 820px) { .case[open] { grid-template-columns: 1fr; } }
@keyframes case-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.case-media { position: relative; min-height: 320px; }
.case-media .cover { position: absolute; inset: 0; }
.case-body { padding: 40px 36px; display: grid; gap: 14px; align-content: start; }
.case-body h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; }
.case-sub { margin: 0; color: var(--amber); }
.case-body p { margin: 0; color: #c4c5c9; }
.case-meta { color: var(--muted); margin: 0; }
.case-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0; }
.case-metrics div { background: var(--bg-2); padding: 14px 16px; display: grid; gap: 2px; }
.case-metrics b { font: 500 24px var(--display); letter-spacing: -0.03em; }
.case-metrics span { color: var(--muted); font-size: 13.5px; }
.case-body .btn { justify-self: start; }
.case-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgb(10 11 13 / 0.8); color: var(--fg); font-size: 22px; cursor: pointer; }

/* ——— Появление ——— */
.split .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.split .line > span { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .statement-text .w { opacity: 1; }
}
.preview-strip .pv > .cover { position: absolute; inset: 0; }

/* Карточка кейса: задача → цифры → как сделали */
.case-pain { margin: 4px 0 0 !important; padding: 14px 16px; border-left: 3px solid var(--accent, var(--amber)); background: var(--bg-2); border-radius: 0 10px 10px 0; color: var(--fg) !important; display: grid; gap: 4px; }
.case-pain b { font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.case-how { margin-top: 6px !important; }

/* Вопросы */
.faq { padding-block: 60px 120px; }
.qa-list { max-width: 1320px; margin: 0 auto; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 500 clamp(18px, 2vw, 26px)/1.2 var(--display); letter-spacing: -0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 400 20px var(--body); color: var(--amber); transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover::after, .qa summary:focus-visible::after { border-color: var(--amber); }
.qa p { margin: 0 0 26px; max-width: 70ch; color: #c4c5c9; line-height: 1.6; }

/* [hidden] сильнее display у .btn и .case-pain — иначе у кейса без ссылки висела пустая жёлтая кнопка */
[hidden] { display: none !important; }

.case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0 !important; }

/* Michroma (заголовки, решение 26-10-2026): очень широкий и один вес, поэтому без «отрицательной» разрядки и без поддельного жирного.
   Кириллицы в нём нет — RU/UK заголовки набраны Exo 2 (правило html:lang ниже). */
h1, h2, h3, .row-item .t, .num b, .price b, .card3d .meta b, .case-metrics b, .qa summary, .mail, .footer-big, .marquee-track span, .loader-word, .statement-text, .avatar { font-weight: 400; letter-spacing: -0.01em; font-synthesis: none; }
.logo img { height: 46px; width: auto; display: block; }
@media (max-width: 600px) { .logo img { height: 36px; } }
.hero-title { font-size: clamp(36px, 7vw, 116px); line-height: 1.02; letter-spacing: -0.02em; max-width: 15ch; }
/* Карточка кейса на ноутбуке: окно не выше экрана, текст справа прокручивается сам (колёсико не перехватывает Lenis — data-lenis-prevent), картинка слева стоит. */
.case[open] { height: min(780px, calc(100dvh - 48px)); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.case[open] .case-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
@media (max-width: 820px) {
  .case[open] { height: auto; grid-template-rows: auto; overflow-y: auto; overscroll-behavior: contain; }
  .case[open] .case-body { overflow: visible; }
}

/* Вопросы: плавный аккордеон (faq.js). Без JS — обычный <details>. */
.qa-js .qa-a { overflow: hidden; }
.qa-js .qa { position: relative; transition: background .5s var(--ease); }
.qa-js .qa::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--amber); transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.qa-js .qa.is-open::before { transform: scaleY(1); }
.qa-js .qa.is-open { background: linear-gradient(90deg, rgb(255 129 42 / .06), transparent 60%); }
.qa-js .qa summary { transition: padding-left .45s cubic-bezier(.22,1,.36,1), color .3s ease; }
.qa-js .qa.is-open summary { padding-left: 18px; color: #fff; }
.qa-js .qa .qa-a > p { padding-left: 18px; }
.qa-js .qa summary::after { transition: transform .5s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, color .3s ease; }
.qa-js .qa[open] summary::after { transform: none; }
.qa-js .qa.is-open summary::after { transform: rotate(135deg); background: var(--amber); border-color: var(--amber); color: #111; }
@media (hover: hover) and (pointer: fine) {
  .qa-js .qa:not(.is-open) summary:hover { padding-left: 6px; }
}
.qa-js .qa.qa-wait { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .qa-js .qa, .qa-js .qa summary, .qa-js .qa summary::after, .qa-js .qa::before { transition: none; } }

/* RU и UK: заголовки целиком набраны Exo 2 (кириллицы в Michroma нет), вес 600 — чтобы держали рядом с широким Michroma. */
html:lang(ru), html:lang(uk) { --display: "Exo 2", "Onest", system-ui, sans-serif; }
html:lang(ru) :is(h1, h2, h3, .row-item .t, .num b, .price b, .card3d .meta b, .case-metrics b, .qa summary, .mail, .loader-word, .statement-text),
html:lang(uk) :is(h1, h2, h3, .row-item .t, .num b, .price b, .card3d .meta b, .case-metrics b, .qa summary, .mail, .loader-word, .statement-text) { font-weight: 600; letter-spacing: -0.015em; }
/* Галерея кейса (cases.js → gallery): экраны и ролики в карточке */
.case-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-top: 6px; align-items: start; }
.case-gallery a, .case-gallery video { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.case-gallery video { width: 100%; height: auto; grid-column: 1 / -1; max-height: 60vh; }
.case-gallery img { display: block; width: 100%; height: auto; transition: transform .3s var(--ease); }
.case-gallery a:hover img { transform: scale(1.04); }
/* В окне кейса обложку показываем целиком: скриншоты не режем (28-10-2026) */
.case-media .cover img, .case-media .cover video { object-fit: contain; object-position: 50% 50%; }
/* Просмотр картинки поверх страницы — вместо открытия в новой вкладке */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgb(5 6 7 / 0.92); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lightbox[hidden] { display: none !important; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 96px); object-fit: contain; border-radius: 12px; }
.lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgb(10 11 13 / 0.8); color: var(--fg); font-size: 22px; cursor: pointer; }
.lightbox .lb-close { top: 16px; right: 16px; } .lightbox .lb-prev { left: 16px; top: 50%; } .lightbox .lb-next { right: 16px; top: 50%; }
.lightbox .lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 400 13px var(--mono); color: var(--muted); }