/* OBRA site v2 — витринная ясность + кинематографичные детали.
   Крем на чёрном, зерно, serif-курсив, inset-hero. */

:root {
  --bg: #0b0b0c;
  --bg2: #101012;
  --card: #1b1b1e;
  --card2: #212121;
  --cream: #E1E0CC;
  --cream2: rgba(225, 224, 204, .66);
  --readable-muted: rgba(225, 224, 204, .56);
  --cream3: rgba(225, 224, 204, .42);
  --line: rgba(225, 224, 204, .12);
  --accent: #d97a2e;
  --accent2: #e08b4e;
  --sans: 'Golos Text', -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--cream);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--accent); color: #0b0b0c; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: fixed; z-index: 100; top: 10px; left: 10px;
  transform: translateY(-180%); padding: 9px 12px; border-radius: 6px;
  background: var(--cream); color: #0b0b0c; font-weight: 600;
}
.skip-link:focus-visible { transform: translateY(0); }
#top { scroll-margin-top: 72px; }
#top:target { outline: 2px solid var(--accent); outline-offset: -4px; }
#legal-content { scroll-margin-top: 72px; }
#legal-content:target { outline: 2px solid var(--accent); outline-offset: -4px; }
#whats-new-content { scroll-margin-top: 72px; }
#whats-new-content:target { outline: 2px solid var(--accent); outline-offset: -4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent2);
}
.cap { font-family: var(--mono); font-size: 12px; color: var(--readable-muted); margin-top: 14px; line-height: 1.6; }



/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(11, 11, 12, .8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  height: 58px; display: flex; align-items: center; gap: 30px;
}
.logo { font-weight: 700; font-size: 15px; letter-spacing: .34em; }
.nav__links { display: flex; gap: 24px; }
.nav__links a {
  font-size: 13.5px; font-weight: 500; color: var(--cream2);
  padding: 8px 0; transition: color .15s;
}
.nav__links a:hover { color: var(--cream); }
.nav__links a[aria-current="page"] { color: var(--cream); border-bottom: 1px solid var(--accent); }
@media (max-width: 1100px) { .nav__links { display: none; } }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav [hidden] { display: none !important; }
.nav__account, .nav__buy { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 500; color: var(--cream2); transition: color .15s; white-space: nowrap; }
.nav__account:hover, .nav__buy:hover { color: var(--cream); }
.nav__buy { padding: 0 16px; border: 1px solid rgba(225, 224, 204, .2); border-radius: 999px; }
.btn-nav {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--cream); color: #0b0b0c; font-size: 13.5px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px; transition: transform .15s, background .15s;
}
.btn-nav:hover { background: #fff; }
.btn-nav:active { transform: scale(.96); }

/* ---------- SCRUB (hero / library / board) ---------- */
.scrub { position: relative; }
.scrub-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding: clamp(10px, 1.8vw, 22px);
}
.scrub-frame {
  position: relative; height: 100%; overflow: hidden;
  border-radius: clamp(14px, 2vw, 26px);
  background: #000;
}
.scrub-frame video, .scrub-frame .scrub-canvas, .scrub-final {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.scrub-frame .scrub-canvas { will-change: filter, transform; }
.scrub-final { opacity: 1; will-change: opacity; }
.js .scrub-final { opacity: 0; }

.scrub-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 30%, transparent 62%, rgba(0,0,0,.5));
}

/* hero-копия */
.hero-copy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 clamp(20px, 5vw, 60px);
  text-shadow: 0 2px 34px rgba(0, 0, 0, .8);
}
.hero-copy h1 {
  font-size: clamp(38px, 6.4vw, 96px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.02;
  max-width: 15ch; color: var(--cream);
}
.hero-copy p {
  margin-top: 24px; max-width: 54ch; color: rgba(225, 224, 204, .82);
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5;
}
.hero-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .9);
  animation: hint 2.4s ease-in-out infinite; white-space: nowrap;
}
@keyframes hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* подписи на видео */
.stage-cap {
  position: absolute; z-index: 3; left: clamp(16px, 3vw, 36px); bottom: clamp(20px, 3vw, 36px);
  max-width: 44ch; opacity: 0; transform: translateY(14px);
  transition: opacity .4s, transform .4s;
  font-size: 15px; color: var(--cream);
  background: rgba(8, 8, 9, .62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 6px;
}
.stage-cap b { color: #fff; }
.stage-cap.is-on { opacity: 1; transform: translateY(0); }

/* ---------- полоса фактов ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); }
.strip__in {
  max-width: 1120px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 40px);
  display: flex; gap: 12px 34px; justify-content: center; flex-wrap: wrap;
}
.strip__it { font-family: var(--mono); font-size: 12px; color: var(--readable-muted); letter-spacing: .03em; }
.strip__it b { color: var(--cream); font-weight: 500; }

/* ---------- секции ---------- */
.sec { padding: clamp(28px, 4vh, 52px) 0; }
.sec--alt { background: var(--bg2); }
.sec h2 {
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.1; font-weight: 700;
  letter-spacing: -.025em; margin-top: 16px; max-width: 22ch;
}
.sec .lead {
  margin-top: 20px; color: var(--cream2); max-width: 60ch;
  font-size: clamp(16px, 1.6vw, 19px);
}

/* pull-up слова */
.js h2[data-pullup] .w {
  display: inline-block;
  transform: translateY(12px); opacity: 0;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .45s;
}
.js h2[data-pullup].in .w { transform: translateY(0); opacity: 1; }

/* побуквенное проявление */
.js [data-reveal] .ch { opacity: .16; transition: opacity .25s linear; }

/* ---------- стена плёнок ---------- */
.stage-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 960px) { .stage-grid { grid-template-columns: minmax(0, 7fr) minmax(270px, 3fr); } }
.viewer {
  background: #000; border-radius: 16px; overflow: hidden; position: relative;
  min-height: 56vh; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  border: 1px solid var(--line);
}
.viewer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .45s ease;
}
.viewer img.on { opacity: 1; }
.viewer-tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  background: rgba(8, 8, 9, .78); color: var(--cream2);
  padding: 6px 12px; border-radius: 7px;
  font-family: var(--mono); font-size: 11px;
}
.stockbar { display: flex; flex-direction: column; gap: 8px; }
.stock {
  display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center;
  padding: 9px; border-radius: 13px; background: var(--card);
  border: 1px solid var(--line); text-align: left;
  transition: border-color .15s, transform .15s, background .15s;
}
.stock:hover { border-color: var(--cream3); background: var(--card2); }
.stock:active { transform: scale(.98); }
.stock.on { border-color: var(--cream); }
.stock img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
.stock b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.stock i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--readable-muted); }

/* ---------- стадии проявки ---------- */
.stages { margin-top: 48px; }
.stages-frame {
  position: relative; aspect-ratio: 2 / 3; max-height: 74vh;
  margin: 0 auto; max-width: 500px;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); border: 1px solid var(--line);
}
.stages-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .35s linear;
}
.stages-frame img.is-on { opacity: 1; }
.stages figcaption { max-width: 500px; margin: 22px auto 0; }
.stages-labels {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--readable-muted);
}
.stages-note {
  margin-top: 14px; font-size: 14px; color: var(--cream2);
  border-left: 2px solid var(--line); padding-left: 12px;
}
.procnote { margin-top: 40px; color: var(--cream2); max-width: 72ch; font-size: 15.5px; }
.procnote b { color: var(--cream); font-weight: 600; }

/* ползунки-ranges (общие) */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
  background: transparent; cursor: ew-resize;
}
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(225, 224, 204, .22); border-radius: 1px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); margin-top: -7px; border: none;
  box-shadow: 0 0 0 3px rgba(11, 11, 12, .9);
}
input[type=range]::-moz-range-track { height: 2px; background: rgba(225, 224, 204, .22); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: none; }

/* ---------- проявочная ---------- */
.lab-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 960px) { .lab-grid { grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); } }
.lab-vw {
  background: #000; border-radius: 16px; overflow: hidden; position: relative;
  min-height: 56vh; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.lab-vw img { max-height: 72vh; width: auto; max-width: 100%; }
.lab-tint { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: 0; pointer-events: none; }
.panel {
  background: var(--card); border-radius: 16px; padding: 20px 18px;
  border: 1px solid var(--line); align-self: start;
}
.panel-h {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 11px;
}
.panel-h--mt { margin-top: 16px; }
.panel-h b { font-size: 13.5px; font-weight: 600; }
.panel-h span { font-family: var(--mono); font-size: 10px; color: var(--readable-muted); letter-spacing: .1em; }
.tool { padding: 12px 0; border-bottom: 1px solid var(--line); }
.tool:last-of-type { border-bottom: none; }
.tool .row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.tool .name { font-size: 13px; font-weight: 500; }
.tool .val { font-family: var(--mono); font-size: 11px; color: var(--readable-muted); }
.panel-reset {
  margin-top: 12px; font-family: var(--mono); font-size: 11px;
  color: var(--readable-muted); padding: 6px 0; transition: color .15s;
}
.panel-reset:hover { color: var(--cream); }

/* ---------- шторка ---------- */
.wipebox {
  position: relative; border-radius: 16px; overflow: hidden;
  margin: 44px auto 0; max-width: 560px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); border: 1px solid var(--line);
}
.wipebox > img { width: 100%; }
.wipe-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.wipe-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wipe-bar {
  position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px;
  background: var(--cream); box-shadow: 0 0 16px rgba(0, 0, 0, .6);
}
.wipe-bar::after {
  content: '◂ ▸'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--cream); color: #0b0b0c;
  font-family: var(--mono); font-size: 11px; letter-spacing: -1px;
  padding: 7px 10px; border-radius: 999px; white-space: nowrap;
}
.wipebox input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: col-resize; -webkit-appearance: none;
}
.wipe-lbl {
  position: absolute; bottom: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  background: rgba(8, 8, 9, .8); color: var(--cream);
  padding: 5px 10px; border-radius: 7px;
}
.wipe-lbl.a { left: 12px; }
.wipe-lbl.b { right: 12px; }

/* ---------- каталог ---------- */
.facts { display: grid; gap: 13px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 800px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.fact b { font-size: 18px; font-weight: 600; display: block; margin-bottom: 6px; }
.fact p { color: var(--cream2); font-size: 13.5px; line-height: 1.55; }

/* ---------- rec-плейсхолдер ---------- */
.rec-placeholder {
  margin-top: 44px; display: flex; gap: 16px; align-items: flex-start;
  border: 1px dashed rgba(225, 224, 204, .28); border-radius: 14px;
  padding: 20px 22px; background: rgba(225, 224, 204, .03);
}
.rec-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: #c33b2e; margin-top: 6px;
  animation: rec 1.6s ease-in-out infinite;
}
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rec-placeholder b { font-size: 15px; }
.rec-placeholder p { margin-top: 5px; font-size: 13.5px; color: var(--readable-muted); }

/* ---------- автор ---------- */
.author { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; margin-top: 40px; }
@media (min-width: 820px) { .author { grid-template-columns: 250px 1fr; } }
.author-ph {
  aspect-ratio: 3 / 4; border-radius: 14px; background: var(--card);
  border: 1px dashed rgba(225, 224, 204, .28);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--readable-muted); text-align: center; line-height: 1.6;
}
.author .lead { margin-top: 14px; }

/* ---------- честная таблица ---------- */
.table-scroll { overflow-x: auto; margin-top: 40px; }
.honest table { width: 100%; border-collapse: collapse; min-width: 640px; }
.honest th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--readable-muted); text-align: left;
  padding: 0 16px 12px; font-weight: 500;
}
.honest td {
  padding: 16px; border-top: 1px solid var(--line); vertical-align: top;
  font-size: 14.5px; color: var(--cream2); line-height: 1.55;
}
.honest td:first-child { color: var(--cream); font-weight: 600; font-size: 14px; white-space: nowrap; }
.honest td b { color: var(--cream); font-weight: 600; }
.honest .sig { margin-top: 28px; color: var(--cream2); max-width: 66ch; font-size: 16px; }
.honest .sig b { color: var(--cream); font-weight: 600; }

/* ---------- download ---------- */
.download { text-align: center; }
.download h2, .download .lead { margin-left: auto; margin-right: auto; }
.btn-download { margin-top: 40px; }
.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream); color: #0b0b0c; font-weight: 600; font-size: 16px;
  padding: 8px 8px 8px 24px; border-radius: 999px;
  transition: gap .2s, background .2s;
}
.btn-cta:hover { background: #fff; gap: 14px; }
.btn-cta .circle {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: #0b0b0c; color: var(--cream); border-radius: 50%;
  font-size: 16px; transition: transform .2s;
}
.btn-cta:hover .circle { transform: scale(1.1); }
.beta-note { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--readable-muted); }

/* ---------- гигантский вордмарк ---------- */
.wordmark {
  font-size: clamp(90px, 19vw, 330px); font-weight: 700;
  letter-spacing: -.045em; line-height: .82; text-align: center;
  color: var(--cream); opacity: .96;
  padding: clamp(40px, 8vh, 100px) 0 0;
  user-select: none;
}

/* ---------- hero-live: видео + сменные слова ---------- */
.hero-live {
  /* в потоке: hero прокручивается прочь как обычная секция (НЕ sticky — иначе его
     видео вечно висит и декодится под контентом). .canvas (margin-top:-44px) всё
     ещё наезжает плашкой на нижние 44px — эффект «крышки» сохранён. */
  position: relative; z-index: 1;
  height: calc(100svh - 58px);
  min-height: 520px;
  overflow: hidden; background: #000;
}
.hero-stack { position: absolute; inset: 0; }
.hero-stack .hv {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;   /* кроссфейд между роликами */
}
.hero-stack .hv.on { opacity: 1; }

/* плавная смена подписи под ролик */
.hero-live-copy h1, .hero-live-copy > p {
  transition: opacity .3s ease, transform .3s ease;
}
.hero-live-copy.swapping h1, .hero-live-copy.swapping > p {
  opacity: 0; transform: translateY(8px);
}

/* роут-кнопки внизу hero */
.hero-routes {
  position: absolute; z-index: 4; left: 0; right: 0;
  bottom: clamp(30px, 6vh, 64px);
  display: flex; gap: 9px; justify-content: center;
  padding: 0 16px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.hero-routes::-webkit-scrollbar { display: none; }
.hr {
  position: relative; flex: none; overflow: hidden;
  font-size: 13.5px; font-weight: 600; color: rgba(240, 238, 230, .92);
  background: rgba(8, 8, 10, .72);
  border: 1px solid rgba(225, 224, 204, .22);
  border-radius: 999px; padding: 11px 20px 13px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .25s, color .25s, border-color .25s;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.hr:hover { border-color: rgba(225, 224, 204, .5); color: #fff; }
.hr.on { background: rgba(225, 224, 204, .95); color: #16130d; border-color: transparent; }
.hr i {
  /* отступы держат полосу на прямом участке пилюли: видно и старт, и финиш;
     transition сглаживает редкие timeupdate-тики — ползёт плавно */
  position: absolute; left: 18px; right: 18px; bottom: 4px; height: 3px;
  border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  opacity: 0;
  transition: transform .35s linear;
}
.hr.on i { opacity: 1; }
.hero-live-grad {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(5,5,6,.66) 0%, rgba(5,5,6,.28) 46%, transparent 70%),
    linear-gradient(to top, rgba(5,5,6,.6), transparent 34%);
}
/* холст: ЕДИНСТВЕННЫЙ красильщик фона после hero. Секции прозрачны — швов
   между composited-слоями (sticky/3D в Safari) физически не может быть.
   Фон могут красить только не-composited элементы (.sec--cover). */
.canvas {
  position: relative; z-index: 5;
  margin-top: -44px;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
}
.hero-live-copy {
  /* по-адобовски: левая треть, выше середины */
  position: absolute; z-index: 3; left: 0;
  top: 37%; transform: translateY(-50%);
  padding-left: clamp(32px, 8vw, 150px);
  padding-right: 24px;
}

.hero-live-copy h1 {
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.hero-live-copy > p {
  margin-top: 18px; max-width: 42ch; color: rgba(225, 224, 204, .85);
  font-size: clamp(15px, 1.5vw, 18px);
}
.hero-live-cta {
  margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start;
}
.hero-action-variant { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.hero-action-variant--mobile { display: none; }
.hero-primary { min-height: 44px; }
.hero-primary--mobile { justify-content: center; padding: 13px 22px; }
.hero-caption { margin: 0; color: rgba(225, 224, 204, .72); font-size: 13.5px; line-height: 1.35; }
.hero-buy { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: rgba(225, 224, 204, .72); font-size: 14px; font-weight: 500; padding: 10px 2px 8px; border-bottom: 1px solid rgba(225, 224, 204, .32); }
.hero-buy::after { content: " →"; }
.hero-buy:hover { border-color: var(--accent); }

/* ---------- всё для работы ---------- */
/* плашка наезжает на видео сверху: скругление + объём */
#vsjo { padding-top: clamp(20px, 3vh, 36px); padding-bottom: 0; }
.center-head { text-align: center; }
.center-head h2, .center-head .lead { margin-left: auto; margin-right: auto; }
.wrap--wide { max-width: 1180px; }
h2.manifest {
  font-size: clamp(32px, 4.2vw, 58px);
  letter-spacing: -.03em; max-width: 18ch;
}
.lead--manifest {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  max-width: 52ch !important; margin-top: 16px !important;
  line-height: 1.45;
}
/* каскадное появление блоков */
.js [data-rise] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}
.js [data-rise].in { opacity: 1; transform: translateY(0); }
.apps-row {
  display: grid; gap: 12px; margin-top: 26px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) { .apps-row { grid-template-columns: repeat(2, 1fr); } }
.app-card {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), border-color .35s, box-shadow .35s;
}
.app-card:hover {
  transform: translateY(-6px);
  border-color: var(--cream3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.app-card img {
  width: 100%; height: 100%; object-fit: cover; opacity: .92;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .35s;
}
.app-card:hover img { transform: scale(1.045); opacity: 1; }
.app-card::after {           /* тихий градиент вместо чёрной пилюли — подписи не спорят с текстами */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(5, 5, 6, .78), transparent);
  pointer-events: none;
}
.app-card span {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--cream);
}
.feats { display: grid; gap: 13px; margin-top: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .feats { grid-template-columns: 1fr; } }
.feat { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 20px; }
.feat-media {
  position: relative; border-radius: 9px; overflow: hidden; margin-bottom: 12px;
  aspect-ratio: 2 / 1; background: #000;
}
.feat-media video, .feat-media img { width: 100%; height: 100%; object-fit: cover; }
.feat b { font-size: 17px; font-weight: 700; }
.feat p { margin-top: 6px; color: var(--cream2); font-size: 13.5px; line-height: 1.55; }

/* ---------- 3D-дека стадий проявки: заголовок + сцена в одном экране ---------- */
.deck3d { position: relative; }
.deck3d-stick { display: flex; flex-direction: column; }
.deck-head {
  flex: none; text-align: center;
  padding: 14px 24px 0;   /* пин уже под nav — заголовок выглядывает сразу после предыдущей секции */
}
.deck-head h2 { margin: 0 auto; }
.deck-head .lead {
  margin: 14px auto 0; max-width: 52ch; color: var(--cream2);
  font-size: clamp(15px, 1.5vw, 18px);
}
.deck-sub {
  margin: 14px auto 0; max-width: 56ch; color: var(--cream2);
  font-size: clamp(14px, 1.4vw, 16.5px); line-height: 1.5;
}
.deck3d-space {
  position: relative; height: clamp(400px, 56vh, 600px);
  perspective: 1500px;   /* без preserve-3d: карты — прямые дети, 3D рендерится от perspective,
                            зато зерно (.grain, mix-blend) ложится на фон деки как на все секции */
}
.d3card {
  position: absolute; left: 50%; top: 50%;
  height: min(46vh, 52vw, 460px); aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.d3card img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px;                          /* без 1px-кромки: под 3D-поворотом она светится полосой */
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);   /* тень тугая — без тёмного облака в фоне */
}
.deck-phase {
  flex: none; text-align: center;
  padding: 0 24px clamp(26px, 5vh, 52px);
  font-size: clamp(16px, 1.8vw, 21px); font-weight: 500; color: var(--cream);
  transition: opacity .18s ease;
}
.deck-phase.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .deck3d { height: auto; }
  .deck3d-stick { position: static; height: auto; overflow: visible; }
  .deck3d-space { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 24px; perspective: none; flex: none; }
  .d3card { position: static; transform: none !important; height: auto; }
}
html:not(.js) .deck3d { height: auto; }
html:not(.js) .deck3d-stick { position: static; height: auto; overflow: visible; }
html:not(.js) .deck3d-space { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 24px; perspective: none; flex: none; }
html:not(.js) .d3card { position: static; transform: none !important; height: auto; }

/* подчинённый блок: продолжение высказывания — компактно, влево, по-адобовски */
.sec--sub { padding: clamp(20px, 3vh, 40px) 0 clamp(16px, 2.5vh, 30px); }

.sec--sub .kicker { text-align: left; }
.sec--sub h2 {
  text-align: left; margin-left: 0; margin-right: 0;
  font-size: clamp(21px, 2.3vw, 30px); margin-top: 0; max-width: 22ch;
  letter-spacing: -.015em; line-height: 1.15;
}

/* спеки в две колонки: текст слева, графики+pdf справа — на один экран */
.specs-wrap { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); gap: clamp(24px, 3.5vw, 54px); align-items: start; }
@media (max-width: 940px) { .specs-wrap { grid-template-columns: 1fr; gap: 26px; } }
.specs-text, .specs-visuals { min-width: 0; }
.specs-text { position: sticky; top: 76px; }
@media (max-width: 940px) { .specs-text { position: static; } }
.specs-text .lead {
  text-align: left; margin: 14px 0 0; color: var(--cream2);
  font-size: 14.5px; line-height: 1.55; max-width: 46ch;
}

/* блок-крышка: закруглённый низ + лёгкая тень — из-под него выезжает видео.
   .sec.sec--cover — двойной класс, чтобы перебить z-index из `main > *` */
.sec.sec--cover {
  position: relative; z-index: 6;
  border-radius: 0 0 28px 28px;
  background: var(--bg);
  margin-bottom: -46px;
  padding-bottom: clamp(40px, 6vh, 64px) !important;
  box-shadow: 0 26px 44px -6px rgba(0, 0, 0, .6);   /* тень падает на видео снизу */
}

#compare { padding-top: clamp(14px, 2vh, 26px); }

/* две фотографии рядом — компактно, подпись НАД фото (плёнка / OBRA) */
.duo {
  display: grid; gap: clamp(14px, 2vw, 24px); margin: 22px auto 0;
  grid-template-columns: 1fr 1fr; max-width: 780px;
}
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; max-width: 380px; } }
.duo figure { margin: 0; }
.duo figcaption {
  margin: 0 0 9px; text-align: center;
  font-size: 14.5px; font-weight: 600; color: var(--cream); letter-spacing: -.01em;
}
.duo img { width: 100%; height: auto; border-radius: 12px; display: block; }
.duo-cap { text-align: center; max-width: 56ch; margin: 20px auto 0; }



/* dim-слой видео-эмержа: тёмный, пока «под крышкой», рассеивается по мере появления */
.scrub-dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 4, 5, .95), rgba(4, 4, 5, .55));
  opacity: 0;
}

/* flush-скраб: во всю ширину, без inset-рамки */
.scrub--flush .scrub-stick { padding: 0; }
.scrub--flush .scrub-frame { border-radius: 0; }
.scrub-title {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 24px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .75);
}
.scrub-title h2 {
  font-size: clamp(30px, 4.6vw, 60px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.06; max-width: 20ch;
}
.scrub-title p { margin-top: 14px; color: rgba(225, 224, 204, .8); font-size: 16px; }

/* подпись деки внизу */
.deck-lead {
  flex: none; text-align: center;
  padding: 0 24px clamp(18px, 3.5vh, 36px);
  margin-top: -8px;
  max-width: 62ch; margin-left: auto; margin-right: auto;
  color: var(--readable-muted); font-size: 14px; line-height: 1.5;
}

/* перемешанные фото + карточки инструментов */
.mixgrid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .mixgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mixgrid { grid-template-columns: 1fr; } }
.mg-photo { border-radius: 14px; overflow: hidden; }
.mg-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.mg-tool {
  background: var(--card2); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100%;
}
.mg-tool b, .mg-tool p { transition: opacity .3s ease; }
.mg-tool.swap b, .mg-tool.swap p { opacity: 0; }
.mg-tool b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mg-tool p { margin-top: 7px; color: var(--cream2); font-size: 13.5px; line-height: 1.55; }

/* ---------- галерея с комментами ---------- */
.gal { display: grid; gap: 14px; margin-top: 44px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .gal { grid-template-columns: 1fr; } }
.gal figure { border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.gal img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gal figcaption {
  padding: 12px 15px 14px; font-family: var(--mono); font-size: 12px;
  color: var(--readable-muted); line-height: 1.5;
}

/* ---------- спеки: настоящие даташиты ---------- */
.specs-text .spec-links {
  margin-top: 20px !important; border-top: 1px solid var(--line); padding-top: 14px;
}

/* графики: белые карточки в ряд, подпись под каждой — компактно */
.papers { display: grid; gap: 14px; margin: 0; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .papers { grid-template-columns: 1fr; } }
.paper { background: none; }
.paper img {
  width: 100%; height: auto; display: block; background: #fff;
  border-radius: 10px;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s;
}
.paper:hover img { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
.paper figcaption {
  padding: 11px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--readable-muted);
  text-align: left;
}
.paper figcaption b {
  display: block; color: var(--cream); font-size: 13.5px; font-weight: 700;
  margin-bottom: 3px; letter-spacing: -.01em;
}
.paper figcaption span {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--readable-muted);
}

.docs-note {
  margin-top: 26px; font-size: 13px; color: var(--cream2); text-align: left;
}
.docs-row {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 560px) { .docs-row { grid-template-columns: repeat(3, 1fr); } }
.doc {
  display: block; border-radius: 7px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), border-color .3s;
}
.doc:hover { transform: translateY(-4px); border-color: var(--cream3); }
.doc img { width: 100%; height: auto; display: block; background: #fff; }
.doc span {
  display: block; padding: 7px 8px 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  color: var(--cream2); text-align: center;
}
.spec-links {
  font-family: var(--mono); font-size: 11px !important; letter-spacing: .04em;
  color: var(--readable-muted) !important; margin-top: 14px !important;
  border-top: 1px solid var(--line); padding-top: 12px;
}

/* ---------- мобильная композиция (десктоп не трогаем) ---------- */
@media (max-width: 680px) {
  .stage-cap { left: 14px; right: 14px; bottom: 20px; font-size: 13.5px; }
  .wordmark { letter-spacing: -.03em; }
}



/* шторка-сравнение: живёт только на мобиле (desktop — пара рядом) */
.cmp-m { display: none; position: relative; margin: 22px auto 0; max-width: 460px; }
.cmp-m-box {
  position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 3 / 4; touch-action: pan-y; cursor: ew-resize; user-select: none;
  --x: 50%;
}
.cmp-m-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-m-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
input.cmp-m-range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; border-radius: 14px; cursor: ew-resize;
  /* Указатель обрабатывает .cmp-m-box: тянуть надо за любое место кадра, а
     родной range слушается только бегунка. Полем остаётся клавиатура. */
  pointer-events: none;
}
input.cmp-m-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
/* Бегунок не рисуем вообще: перетаскивание висит на .cmp-m-box, а видимую
   черту с ручкой посередине рисует .cmp-m-bar. Пока у бегунка был размер,
   браузер подставлял ему свой кружок — он висел лишним шариком сверху. */
input.cmp-m-range::-webkit-slider-thumb { width: 0; height: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 0; box-shadow: none; }
input.cmp-m-range::-moz-range-track { height: 100%; background: transparent; border: 0; }
input.cmp-m-range::-moz-range-thumb { width: 0; height: 0; background: transparent; border: 0; box-shadow: none; }
input.cmp-m-range:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.cmp-m-bar {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px;
  background: rgba(225, 224, 204, .95); transform: translateX(-1px);
  box-shadow: 0 0 16px rgba(0, 0, 0, .6);
}
.cmp-m-bar i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream); color: #0b0b0c; font-style: normal;
  display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.cmp-m-tag {
  position: absolute; top: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); background: rgba(8, 8, 9, .65);
  padding: 5px 9px; border-radius: 6px;
}
.cmp-m-tag--l { left: 10px; }
.cmp-m-tag--r { right: 10px; }
.cmp-m-cap { text-align: center; max-width: 46ch; margin: 14px auto 0; }
/* show-правило ПОСЛЕ базового display:none — иначе каскад его съедает */
@media (max-width: 720px) { .cmp-m { display: block; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .hero-hint { animation: none; }
  .hero-stack .hv,
  .hero-live-copy h1,
  .hero-live-copy > p,
  .car-slide { transition: none; }
  .hr i,
  .js [data-rise] { transition: none; }
  .scrub-frame video, .scrub-frame .scrub-canvas { display: none; }
  .scrub { height: auto !important; }
  .scrub-stick { position: static; height: auto; }
  .scrub-frame { height: auto; aspect-ratio: 16 / 10; }
  .scrub-final { opacity: 1 !important; }
  .scrub-dim { opacity: 0 !important; }
  .stage-cap { opacity: 1; transform: none; }
  .js h2[data-pullup] .w { transform: none; opacity: 1; transition: none; }
  .js [data-reveal] .ch { opacity: 1; }
  .js [data-rise] { opacity: 1; transform: none; }
}

/* ================= КАРУСЕЛЬ КАДРОВ ================= */
.carousel {
  position: relative; z-index: 2; background: var(--bg);
  padding: clamp(14px, 2vw, 26px);
}
.car-track {
  position: relative; border-radius: clamp(14px, 2vw, 24px); overflow: hidden;
  height: clamp(420px, 64vh, 660px); background: #000;
}
.car-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.car-slide.is-on { opacity: 1; }
.car-slide img { width: 100%; height: 100%; object-fit: cover; }
.car-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,8,.7), transparent 45%), linear-gradient(to right, rgba(6,6,8,.5), transparent 55%); }
.car-copy {
  position: absolute; z-index: 2; left: clamp(24px, 5vw, 72px);
  top: calc(100% - clamp(200px, 34vh, 252px));
  max-width: 22ch; text-shadow: 0 2px 24px rgba(0,0,0,.7);
}
.car-q { font-size: clamp(26px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: var(--cream); }
.car-sub { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(225,224,204,.8); }
.car-arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(245,244,236,.92); color: #16130d; font-size: 26px; line-height: 1;
  display: grid; place-items: center; transition: transform .2s, background .2s;
}
.car-arw:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.car-prev { left: clamp(20px, 3vw, 40px); }
.car-next { right: clamp(20px, 3vw, 40px); }
.car-dots { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: clamp(22px, 4vh, 40px); display: flex; gap: 0; }
.car-dots button { position: relative; width: 24px; height: 24px; border-radius: 50%; }
.car-dots button::before {
  content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(245,244,236,.45); transition: background .2s, width .2s, left .2s, border-radius .2s;
}
.car-dots button.on::before { left: 1px; width: 22px; border-radius: 5px; background: var(--cream); }
@media (max-width: 640px) { .car-arw { display: none; } }

/* ================= ПОДВАЛ ================= */
.site-foot { border-top: 1px solid var(--line); margin-top: 24px; padding: 46px 0 42px; }
.foot-cols { display: grid; gap: 30px; grid-template-columns: 1.2fr 1fr; }
@media (max-width: 700px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-req p { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--cream2); }
.foot-req b { color: var(--cream); font-weight: 600; }
.foot-req a { color: var(--cream2); }
.foot-legal { display: flex; flex-direction: column; gap: 11px; }
.foot-legal .kicker { margin-bottom: 4px; }
.foot-legal a { font-size: 14px; color: var(--cream2); text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.foot-legal a:hover { color: var(--cream); border-color: var(--line); }
.foot-copy { margin-top: 34px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--readable-muted); }

/* ================= ЧТО ВЫШЛО ЗА ГОД ================= */
.page-whats-new { overflow-wrap: anywhere; }
.whats-new__hero { position: relative; min-height: clamp(360px, 56vw, 650px); overflow: hidden; background: var(--bg2); }
.whats-new__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.whats-new__hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.24), rgba(11,11,12,.12) 36%, rgba(11,11,12,.96)); }
.whats-new__hero-copy { position: absolute; left: max(20px, calc((100vw - 1120px) / 2 + 40px)); right: 20px; bottom: clamp(34px, 6vw, 72px); }
.whats-new__hero-copy h1 { max-width: 11ch; margin-top: 12px; font-size: clamp(52px, 8.5vw, 112px); line-height: .9; letter-spacing: -.055em; }
.whats-new__body { width: min(100% - 40px, 1000px); margin: 0 auto; padding: clamp(50px, 8vw, 92px) 0 clamp(64px, 10vw, 120px); }
.whats-new__intro { max-width: 58ch; color: rgba(225, 224, 204, .74); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.52; }
.whats-new__section { margin-top: clamp(62px, 9vw, 104px); }
.whats-new__section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 13px; border-bottom: 1px solid rgba(225, 224, 204, .28); }
.whats-new__section-head h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; }
.whats-new__section-head span { color: var(--readable-muted); font: 12px/1.4 var(--mono); }
.whats-new__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 24px); margin-top: 24px; }
.whats-new-card { min-width: 0; }
.whats-new-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: var(--card); }
.whats-new-card:nth-child(2) img { object-position: center 32%; }
.whats-new-card h3 { margin-top: 17px; font-size: 20px; line-height: 1.25; }
.whats-new-card p { margin-top: 7px; color: var(--cream2); font-size: 15px; line-height: 1.58; }
.whats-new__list > div { display: grid; grid-template-columns: minmax(110px, .28fr) minmax(0, 1fr); gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.whats-new__list dt { color: var(--readable-muted); font: 13px/1.6 var(--mono); }
.whats-new__list dd { color: var(--cream2); font-size: 16px; line-height: 1.6; }
.whats-new__renew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(32px, 6vw, 70px); align-items: center; margin-top: clamp(72px, 10vw, 120px); padding: clamp(32px, 5vw, 48px) 0; border-top: 1px solid rgba(225, 224, 204, .28); border-bottom: 1px solid var(--line); }
.whats-new__renew h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.whats-new__renew p { max-width: 58ch; margin-top: 12px; color: var(--cream2); font-size: 16px; line-height: 1.62; }
.whats-new__actions { display: flex; flex-direction: column; gap: 10px; }
.whats-new__primary, .whats-new__secondary { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center; }
.whats-new__primary { background: var(--cream); color: #0b0b0c; }
.whats-new__primary:hover { background: #fff; }
.whats-new__secondary { border: 1px solid rgba(225, 224, 204, .24); }
.whats-new__secondary:hover { border-color: var(--cream); }
.whats-new__partner { margin-top: 24px; color: var(--readable-muted); font-size: 14px; }
.whats-new__partner a { color: var(--cream2); border-bottom: 1px solid var(--line); }
.whats-new__partner a:hover { color: var(--cream); border-color: var(--accent); }

@media (max-width: 760px) {
  .whats-new__renew { grid-template-columns: 1fr; }
  .whats-new__actions { width: 100%; }
  .whats-new__cards { grid-template-columns: 1fr; gap: 34px; }
  .whats-new-card img { aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
  .whats-new__body { width: min(100% - 28px, 1000px); }
  .whats-new__hero-copy { left: 14px; right: 14px; }
  .whats-new__section-head { align-items: flex-end; }
  .whats-new__list > div { grid-template-columns: 1fr; gap: 5px; }
}

/* ================= ОПЛАТА ВНУТРИ ТАРИФА ================= */
.payment-note { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.payment-note h3 { font-size: 18px; line-height: 1.3; }
.payment-note p { max-width: 68ch; margin-top: 10px; color: var(--cream2); font-size: 15px; line-height: 1.6; }

/* ================= FAQ ================= */
.faq { max-width: 760px; margin: 34px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 2px; font-size: clamp(16px, 1.8vw, 19px); font-weight: 600; color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 18px; height: 18px; position: relative; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; background: var(--cream3); transition: transform .25s, opacity .25s; }
.faq summary i::before { left: 0; right: 0; top: 8px; height: 2px; }
.faq summary i::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.faq details[open] summary i::after { transform: scaleY(0); }
.faq details[open] summary i::before { background: var(--accent); }
.faq details p { color: var(--cream2); font-size: 15px; line-height: 1.6; padding: 0 2px 22px; max-width: 66ch; }

/* ================= ГЛУБОКАЯ КАСТОМИЗАЦИЯ · тул-карусель ================= */
.rail-slot { margin-top: 40px; }
.rec-wide { min-height: clamp(200px, 34vw, 380px); align-items: center; justify-content: center; text-align: left; }
.rec-wide > div { max-width: 46ch; }

/* текст и главное доказательство делят асимметричную сетку 4/8 */
.tools-intro {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.tools-intro-copy { padding-top: clamp(6px, 2vw, 26px); }
#tools .tools-intro-copy h2 { margin: 0; max-width: 12ch; text-align: left; }
#tools .tools-intro-copy .lead { margin: 18px 0 0; max-width: 34ch; text-align: left; }

/* рейл-видео: демонстрация вызова модулей — главное доказательство */
.rail-vid { margin: 0; max-width: none; }
.rail-vid-media { position: relative; }
.rail-vid video {
  width: 100%; display: block; aspect-ratio: 8 / 5; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line); background: #0d0b09;
}
.rail-vid figcaption {
  margin-top: 12px; text-align: left;
  font-size: 13.5px; line-height: 1.55; color: var(--readable-muted);
}

/* карусель инструментов: без пина — карточки едут, пока секция проезжает экран */
.toolshow { position: relative; padding: 6px 0 4px; }
.tools-stick { display: flex; flex-direction: column; gap: 16px; }
.fcar { overflow: hidden; }
.fcar { display: flex; align-items: center; cursor: grab; }
.fcar:active { cursor: grabbing; }
.fcar-track {
  display: flex; gap: clamp(16px, 2vw, 26px);
  padding: 0 clamp(20px, 6vw, 90px);
  will-change: transform;
}
.fcar-cap { text-align: center; margin-top: 0; }
.fcard {
  flex: 0 0 clamp(260px, 23vw, 312px);
  background: #161618;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px;
  padding: 14px 16px 16px;
}
.fcard h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #e9e7e2; letter-spacing: 0;
}
.fcard h3::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(233, 231, 226, .34); }
.fbadge {
  font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .05em;
  color: rgba(233, 231, 226, .62); border: 1px solid rgba(255, 255, 255, .16);
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.fprev { margin: 12px 0 8px; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; background: #0d0d0f; }
.fprev img, .fprev canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsls { display: flex; flex-direction: column; }
/* строка слайдера — как .slider в tools: label 86px 12px, track 2px, knob 9px, val mono 11px */
.fsl { display: grid; grid-template-columns: 86px 1fr 44px; align-items: center; gap: 10px; height: 30px; }
.fsl i {
  font-style: normal; font-family: var(--sans); font-size: 12px;
  letter-spacing: 0; text-transform: none; color: rgba(233, 231, 226, .62);
  transition: color .12s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsl:hover i { color: #ececec; }
.fsl .fval {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
  color: rgba(233, 231, 226, .5); padding: 2px 5px; border-radius: 4px;
  justify-self: end; transition: background .12s ease, color .12s ease;
}
.fsl:hover .fval { color: #ececec; background: rgba(255, 255, 255, .09); }
/* нативный range, нарисованный как в tools: трек-волосок с заполненной частью, ручка 9px */
.fsl input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px;
  background: transparent; margin: 0; cursor: ew-resize;
}
.fsl input::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, rgba(233, 231, 226, .34) var(--fill, 50%), #252528 var(--fill, 50%));
  transition: background .12s ease;
}
.fsl:hover input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(233, 231, 226, .62) var(--fill, 50%), #252528 var(--fill, 50%));
}
.fsl input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 9px; height: 9px; margin-top: -3.5px;
  border-radius: 50%; background: #b9b7b0; border: none;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.fsl:hover input::-webkit-slider-thumb {
  background: #e9e7e2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 9px rgba(255, 255, 255, .26);
  transform: scale(1.18);
}
.fsl input:active::-webkit-slider-thumb {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 13px rgba(255, 255, 255, .5);
  transform: scale(1.42);
}
.fsl input::-moz-range-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, rgba(233, 231, 226, .34) var(--fill, 50%), #252528 var(--fill, 50%));
}
.fsl input::-moz-range-thumb {
  width: 9px; height: 9px; border-radius: 50%; background: #b9b7b0; border: none;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.fsl:hover input::-moz-range-thumb { background: #e9e7e2; box-shadow: 0 0 9px rgba(255, 255, 255, .26); transform: scale(1.18); }
.fsl input:active::-moz-range-thumb { background: #fff; box-shadow: 0 0 13px rgba(255, 255, 255, .5); transform: scale(1.42); }
/* цветные треки: приглушены, насыщаются при наведении — как .ctrk в tools */
.fsl.k-temp input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #4f8fc0, #d9d5c6, #c99a3c); }
.fsl.k-tint input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #5d9c6f, #d9d5c6, #b06cc0); }
.fsl.k-r    input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6e2f2b, #cf5b54, #eda49e); }
.fsl.k-or   input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6e4c22, #c99a3c, #ecd09a); }
.fsl.k-yel  input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6b6428, #d9c94a, #efe6a8); }
.fsl.k-g    input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #2c5238, #5d9c6f, #a9d6b4); }
.fsl.k-cyan input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #234f63, #4f9fc0, #a2d3e6); }
.fsl.k-mag  input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #5e2a4c, #c05a9c, #e6aad2); }
.fsl.k-blk  input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #0d0d0f, #3f3d38, #7e7b72); }
.fsl.k-temp input::-moz-range-track { background: linear-gradient(90deg, #4f8fc0, #d9d5c6, #c99a3c); }
.fsl.k-tint input::-moz-range-track { background: linear-gradient(90deg, #5d9c6f, #d9d5c6, #b06cc0); }
.fsl[class*="k-"] input { filter: saturate(.5); transition: filter .15s ease; }
.fsl[class*="k-"]:hover input { filter: saturate(1.7) brightness(1.22); }
.fcard p { margin-top: 10px; font-size: 13px; line-height: 1.55; color: rgba(233, 231, 226, .72); }
@media (prefers-reduced-motion: reduce) {
  .fcar { overflow-x: auto; }
  .fcar-track { transform: none !important; }
}
html:not(.js) .fcar { overflow-x: auto; }
html:not(.js) .fcar-track { transform: none !important; }

/* ---------- письмо от автора: чистая колонка, байлайн с аватаром ---------- */
.letter { max-width: 620px; margin: 0 auto; }
#letter h2 { text-align: left; margin: 10px 0 0; font-size: clamp(28px, 3.6vw, 46px); }
.letter p { margin-top: 18px; font-size: 16px; line-height: 1.65; color: var(--cream2); }
.letter .letter-open {
  margin-top: 26px; font-size: clamp(19px, 2.1vw, 24px); font-weight: 600;
  color: var(--cream); line-height: 1.4;
}
.letter-by { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.letter-ava {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  border: 1px dashed rgba(225, 224, 204, .35);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--readable-muted); text-align: center;
  overflow: hidden;
}
.letter-ava img { width: 100%; height: 100%; object-fit: cover; }
.letter-by b { display: block; font-size: 15px; color: var(--cream); }
.letter-by span:last-child { font-size: 13px; color: var(--readable-muted); line-height: 1.35; }
.letter-by a { color: var(--accent2); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.letter-by a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- призыв покрутить ползунки: кикер над лентой, в языке сайта ---------- */
.fcar-hint {
  margin: 0 0 20px; text-align: center;
  font-size: 14px; font-weight: 500; color: var(--cream2);
}
.fcar-hint-i {
  display: inline-block; margin-right: 6px;
  animation: hintSlide 1.7s ease-in-out infinite;
}
@keyframes hintSlide { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }

/* первая ручка каждой карточки мягко «дышит» свечением — affordance «покрути»;
   гаснет после первого драга (.touched), выключена при reduce-motion */
@keyframes fknobHint {
  0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
  50% { box-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 4px rgba(217, 122, 46, .20), 0 0 9px rgba(255, 255, 255, .4); }
}
.fcar-track:not(.touched) .fsl:first-child input::-webkit-slider-thumb { animation: fknobHint 2.6s ease-in-out infinite; }
.fcar-track:not(.touched) .fsl:first-child input::-moz-range-thumb { animation: fknobHint 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fcar-hint-i { animation: none; }
  .fcar-track .fsl input::-webkit-slider-thumb, .fcar-track .fsl input::-moz-range-thumb { animation: none; }
}
@media (max-width: 800px) {
  .tools-intro { grid-template-columns: 1fr; gap: 26px; }
  #tools .tools-intro-copy h2 { max-width: 16ch; }
  #tools .tools-intro-copy .lead { max-width: 52ch; }
}

/* веер: hover-иерархию считает JS (плавный лерп, наведённая — главная) */

/* ===== МОБИЛЬНАЯ КОМПОЗИЦИЯ — в КОНЦЕ файла, чтобы перебивать базовые правила ===== */
@media (max-width: 720px) {
  .hero-action-variant--desktop { display: none; }
  .hero-action-variant--mobile { display: flex; }
	.nav__in { gap: 12px; padding-left: 12px; padding-right: 12px; }
	.nav__right { gap: 9px; }
	.nav__account, .nav__buy { font-size: 11.5px; }
	.btn-nav { display: none; }
  /* ===== HERO: текст и trial-действие сразу под шапкой; видео прижато К НИЗУ. ===== */
  /* секция ровно в первый экран: чипы влезают без скролла (низ чипов = svh − 14px) */
  .hero-live { height: 100svh; min-height: 640px; }
  .hero-live-copy {
    position: absolute; left: 0; right: 0; top: 46px;
    transform: none; padding: 0 20px;
  }
  .hero-live-copy h1 { font-size: clamp(28px, 8vw, 36px); text-shadow: none; }
  .hero-live-copy > p { max-width: none; margin-top: 10px; }
  .hero-live-cta { margin-top: 16px; }
  .hero-primary--mobile { width: min(100%, 320px); }
  .hero-caption { color: rgba(225, 224, 204, .8); text-shadow: none; }
  /* «Месяц, без карты» и «Тарифы и покупка» — одна мысль под кнопкой, а стояли
     на разной высоте и читались как два отдельных блока. Сводим их вместе. */
  .hero-action-variant { gap: 5px; }
  .hero-buy { margin-top: 0; padding: 4px 2px 6px; }
  .hero-live { overflow: hidden; }
  .hero-stack {
    /* кадр КРУПНЫЙ (масштаб полноэкранного) и сдвинут вниз: вьювер в фокусе,
       лента filmstrip уезжает за нижний край экрана */
    position: absolute; inset: auto; left: 0; right: 0;
    top: 15%; bottom: 0;                 /* видео живёт до низа секции — «шуршит» под чипами */
  }
  .hero-stack .hv { object-position: 78% center; }
  .hero-stack::before {                             /* стык фон→видео + диагональ: текст читается, вьювер чист */
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 60%;
    /* Подпись и «Тарифы» лежат ровно на светлом куске кадра и терялись.
       Затемнение доведено до низа группы действий. */
    background:
      linear-gradient(160deg, rgba(5, 5, 6, .88) 0%, rgba(5, 5, 6, .48) 44%, transparent 72%),
      linear-gradient(to bottom, var(--bg) 12%, rgba(5, 5, 6, .45) 38%, transparent 66%);
    z-index: 2; pointer-events: none;
  }
  .hero-live::after {                               /* низ: видео плавно гаснет в фон страницы */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 38%;
    background: linear-gradient(to top, var(--bg) 8%, rgba(5, 5, 6, .8) 34%, transparent 78%);
    z-index: 2; pointer-events: none;
  }
  .hero-live-grad { display: none; }
  .hero-routes {
    bottom: 72px; padding: 0 14px;   /* обе строки чипов — в первом экране, заголовок сразу за ними */
    flex-wrap: wrap; justify-content: center; gap: 8px;
    overflow: visible;
  }
  .hr { padding: 8px 12px 10px; font-size: 12px; }
  .canvas { margin-top: 0; border-radius: 0; }
  #vsjo { padding-top: 10px; }

  /* дорогие blur-слои — прочь с телефона */
  .scrub-vignette { display: none; }
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 11, 12, .94); }
  .hr, .stage-cap, .duo-tag, .cmp-m-tag { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hr { background: rgba(8, 8, 10, .84); }

  /* ===== ВСЁ ДЛЯ РАБОТЫ: пятая карточка — во всю ширину, не сирота ===== */
  .apps-row .app-card:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  /* ===== ДЕКА: карты крупные, веер выходит за края экрана (см. JS deckMobile) ===== */
  .deck3d-space { height: clamp(260px, 66vw, 340px); }
  .d3card { height: min(60vw, 300px); }

  /* ===== СПЕКИ: вспомогательный блок — компактный, не съедает скролл ===== */
  .specs-text h2 { font-size: clamp(22px, 6vw, 28px); }
  #specs .lead { font-size: 14.5px; }
  .papers { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .paper img { border-radius: 8px; }
  .paper figcaption { display: none; }          /* мини-превью, подписи не нужны */
  .docs-row { gap: 8px; }
  .doc span { font-size: 9px; }

  /* ===== СРАВНЕНИЕ: на телефоне пара не влезает — шторка-слайдер ===== */
  .duo, .duo-cap { display: none; }
  .cmp-m { display: block; }

  /* ===== СКРАБ: фокус кропа на фото в приложении + заголовок в кадре ===== */
  .scrub-frame .scrub-canvas, .scrub-final { object-position: 45% center; }
  .scrub-title h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .scrub-title p { font-size: 14px; }

  /* ===== ПОЛОСКА ИНСТРУМЕНТОВ: жирные тач-таргеты ===== */
  .fcar-track { padding-left: 8px; }
  .fcard { flex-basis: min(86vw, 320px); }
  .fsl { height: 40px; grid-template-columns: 78px 1fr 44px; }
  .fsl input { height: 32px; }
  .fsl input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; }
  .fsl input::-moz-range-thumb { width: 18px; height: 18px; }

  /* ===== КАРУСЕЛЬ: фото 16:9, текст под фото ===== */
  .carousel { padding-bottom: 150px; }
  .car-track { height: auto; aspect-ratio: 16 / 9; overflow: visible; }
  .car-slide img, .car-slide::after { border-radius: 14px; }
  .car-copy { left: 8px; right: 8px; top: calc(100% + 12px); max-width: none; text-shadow: none; }
  .car-q { font-size: clamp(20px, 6vw, 26px); }
  .car-sub { margin-top: 8px; }
  .car-dots { bottom: auto; top: calc(14px + (100vw - 28px) * 9 / 16 - 34px); }
  .car-arw { display: none; }

  /* ===== DOWNLOAD ===== */
  .btn-download { margin-top: 30px; }
}

@media (max-width: 449px) {
  .nav__in { height: auto; min-height: 58px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .nav__right { margin-left: 0; flex: 1 0 100%; justify-content: space-between; }
}

@media (max-width: 420px) {
  .nav__in { height: auto; flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }
  .nav__right { flex: 1 0 100%; justify-content: space-between; gap: 7px; }
}

/* ---- покупка: один оффер без сравнительных модулей ---- */
.price-poster {
  max-width: 920px; margin: 0 auto; padding: clamp(44px, 7vw, 82px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.price-summary { max-width: 860px; }
.sec .price-title {
  max-width: none; margin: 0; text-align: left;
  font-size: clamp(34px, 5.4vw, 68px); letter-spacing: -.04em; line-height: .98;
}
.price-current {
  display: block; margin-top: .18em; color: var(--cream); font-size: clamp(72px, 10.5vw, 112px);
  font-weight: 780; letter-spacing: -.04em; line-height: .88; white-space: nowrap;
}
.price-lead { margin-top: 26px; color: var(--cream2); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; }
.price-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin: clamp(34px, 5vw, 54px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.price-facts div { min-width: 0; }
.price-facts dt { color: var(--readable-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.price-facts dd { margin: 9px 0 0; color: var(--cream2); font-size: 15px; line-height: 1.55; }
.price-facts strong { color: var(--cream); font-weight: 650; white-space: nowrap; }
.price-actions {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px; margin-top: clamp(34px, 5vw, 52px);
}
.price-buy {
  display: flex; width: 100%; min-height: 68px; justify-content: center; align-items: center;
  padding: 16px 20px; border-radius: 16px;
  background: var(--cream); color: #0b0b0c; font-weight: 750;
  font-size: clamp(16px, 1.25vw, 19px); white-space: nowrap;
  transition: background .2s, transform .14s cubic-bezier(.23,1,.32,1);
}
.price-buy:hover { background: #fff; }
.price-buy:active { transform: scale(.97); }
.price-trial {
  display: flex; min-height: 68px; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 20px; border: 1px solid rgba(225,224,204,.34); border-radius: 16px;
  color: var(--cream); font-size: 16px; font-weight: 650; text-align: center;
  transition: border-color .2s, background .2s, transform .14s cubic-bezier(.23,1,.32,1);
}
.price-trial small { margin-top: 3px; color: var(--readable-muted); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.price-trial:hover { border-color: var(--cream); background: rgba(225,224,204,.06); }
.price-trial:active { transform: scale(.97); }
.price-terms {
  display: block; width: fit-content; margin-top: 18px;
  color: var(--accent2); font-size: 14px; border-bottom: 1px solid rgba(224,139,78,.45);
}
.price-terms:hover { color: var(--cream); border-color: var(--cream); }

@media (max-width: 900px) {
  .price-facts { grid-template-columns: 1fr; gap: 18px; }
  .price-actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .price-poster { padding: 36px 0 48px; }
  .sec .price-title { font-size: clamp(34px, 9vw, 48px); line-height: 1; }
  .price-current { font-size: clamp(64px, 20vw, 88px); }
  .price-buy, .price-trial { min-height: 64px; }
  .price-buy { font-size: 19px; }
}

/* ---------- responsive width containment ---------- */
.nav__in, .nav__right { min-width: 0; }
.price-summary, .price-actions { min-width: 0; }
.foot-req, .foot-legal { min-width: 0; overflow-wrap: anywhere; }
.hero-live-copy, .price-poster, .site-foot { overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .nav__account, .nav__buy, .price-buy, .price-trial {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .price-current { font-size: clamp(64px, 21vw, 80px); }
}

/* ============================================================
   Меню на телефоне — кнопка вместо спрятанных разделов
   До 1100 пикселей разделы просто скрывались: на телефоне до «Тарифов»,
   «FAQ» и «Что нового» было не добраться вообще. Теперь они под кнопкой.
   Переключатель — чекбокс с подписью: без JavaScript, доступен с клавиатуры.
   ============================================================ */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
.nav-burger-lines,
.nav-burger-lines::before,
.nav-burger-lines::after {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--cream); content: "";
}
.nav-burger-lines::before { transform: translateY(-6px); }
.nav-burger-lines::after { transform: translateY(4px); }

@media (max-width: 1100px) {
  /* В строке — логотип, кто вошёл (или «Войти») и кнопка меню. Разделы,
     «Купить» и «Скачать» живут внутри выпадающего списка: иначе они
     переносились на вторую строку и шапка занимала два этажа ещё до
     открытия меню. */
  .nav__in { flex-wrap: wrap; row-gap: 0; }
  /* Группа справа «раскрывается»: её ссылки становятся элементами самой
     строки, и каждую можно разложить отдельно — вход остаётся наверху,
     покупка и загрузка уезжают в меню. */
  .nav__right { display: contents; }
  .nav__account {
    order: 2; margin-left: auto; max-width: 44vw;
    font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-burger {
    display: flex; align-items: center; justify-content: center; order: 3;
    width: 44px; height: 44px; margin-left: 10px;
    border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Открытое меню — сплошной фон. Полупрозрачная шапка с блюром хороша на
     широком экране, но под раскрытым списком сквозь неё читался текст
     страницы, и меню выглядело наложенным поверх мусора. */
  .nav:has(.nav-toggle:checked) { background: #0b0b0c; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__links {
    order: 4; display: none; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; margin: 6px 0 0; border-top: 1px solid var(--line);
  }
  .nav-toggle:checked ~ .nav__links { display: flex; }
  .nav__links a, .nav__buy {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; min-height: 52px; padding: 0;
    font-size: 16px; font-weight: 500;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav__buy { order: 5; display: none; }
  .btn-nav { order: 6; display: none; }
  .nav-toggle:checked ~ .nav__right .nav__buy { display: flex; }
  .nav-toggle:checked ~ .nav__right .btn-nav {
    display: inline-flex; justify-content: center;
    width: 100%; min-height: 52px; margin: 14px 0; padding: 0 20px;
    font-size: 15px; border-bottom: 0;
  }
}