/* Лендинг TalkCut v3. Подача по референсу Aeline (разбор → stil.md), цвет — из каруселей Руслана:
   вместо лайма оранжево-красный градиент --grad для ключевых слов и кнопок, Inter 500 с плотным трекингом,
   подписи JetBrains Mono капсом. Устройства — объёмный телефон и ноутбук, как в каруселях. */
:root {
  --bg: #ffffff;
  --soft: #f5f5f4;
  --soft-2: #ededeb;
  --line: rgba(20, 20, 20, .08);
  --ink: #262626;
  --head: #1f1f1f;
  --gray: #8a8a8a;
  --gray-2: #b4b4b0;
  --accent: #ff6000;
  --grad: linear-gradient(90deg, #ff8a1e 0%, #ff6018 36%, #fc0a00 66%, #ff5a14 86%, #ff8a2a 100%);
  --grad-btn: linear-gradient(100deg, #ff8a1e 0%, #ff5a14 40%, #fc1a00 70%, #ff6018 100%);
  --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --page: 1080px;
  --gut: clamp(16px, 4vw, 32px);
  --r-card: 22px;
  --r-in: 14px;
  --shadow: 0 1px 0 rgba(20, 20, 20, .04), 0 14px 34px -20px rgba(20, 20, 20, .28);
  --ease: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--sans); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
s { color: var(--gray-2); text-decoration-thickness: 1.5px; }
.nowrap { white-space: nowrap; }

/* ── типографика ── */
.label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 11px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); }
.label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
.h1, .h2 { margin: 0; font-weight: 500; letter-spacing: -.048em; line-height: 1.03; color: var(--head); }
.h1 { font-size: clamp(36px, 4.9vw, 60px); }
.h2 { font-size: clamp(28px, 3.5vw, 42px); }
.h1 em, .h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 .05em .08em rgba(0, 0, 0, .08)); padding-right: .02em; }
/* заголовки переносятся ровными строками, без одного слова на последней (Руслан 15.10: «перенос по одному слову… так себе выглядит») */
.h1, .h2, .h3, .buy__title { text-wrap: balance; }
.h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; color: var(--head); }
.text { color: var(--gray); font-size: 15px; }
.note { max-width: 660px; margin: 26px auto 0; text-align: center; font-size: 13px; color: var(--gray); }

/* ── кнопки ── */
.pill { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  overflow: hidden; isolation: isolate; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .6s var(--ease); }
.pill::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .7s var(--ease); }
.pill:hover { transform: translateY(-1px); }
.pill:hover::after { transform: translateX(120%); }
.pill:active { transform: scale(.98); }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pill--grad { color: #fff; background: var(--grad-btn); background-size: 160% 100%; background-position: 0 0;
  box-shadow: 0 8px 22px -10px rgba(252, 40, 0, .7); }
.pill--grad:hover { background-position: 100% 0; box-shadow: 0 12px 28px -10px rgba(252, 40, 0, .8); }
.pill--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 20, .14); }
.pill--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill--sm { height: 38px; padding: 0 16px; font-size: 10.5px; }
.pill--lg { height: 56px; padding: 0 26px; font-size: 12.5px; }
.pill__arrow { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -12px; border-radius: 50%; background: rgba(255, 255, 255, .22);
  transition: transform .3s var(--ease); }
.pill__arrow::before { content: ''; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pill--lg .pill__arrow { width: 36px; height: 36px; margin-right: -14px; }
.pill:hover .pill__arrow { transform: rotate(45deg); }
.pill__arrow--down { transform: rotate(135deg); }
.pill:hover .pill__arrow--down { transform: rotate(135deg) translateX(2px); }

/* ── шапка ── */
.nav { position: sticky; top: 10px; z-index: 40; display: flex; align-items: center; gap: 24px; width: min(1200px, 100%); margin: 0 auto;
  padding: 12px var(--gut); border-radius: 999px; transition: width .45s var(--ease), padding .45s var(--ease), background .3s, box-shadow .3s; }
/* после прокрутки шапка — островок сверху (правка Руслана 14.10), в нём кнопка «наверх» */
.nav.is-stuck { width: min(1060px, calc(100% - 20px)); padding: 8px 8px 8px 18px; background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 14px 34px -18px rgba(20, 20, 20, .4), inset 0 0 0 1px rgba(20, 20, 20, .06); }
.nav__up { flex: none; display: grid; place-items: center; width: 0; height: 36px; margin-left: auto; opacity: 0; overflow: hidden; border-radius: 50%;
  background: #161616; color: #fff; transition: width .35s var(--ease), opacity .3s, transform .25s var(--ease); }
.nav__up svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav.is-stuck .nav__up { width: 36px; opacity: 1; }
.nav__up:hover { transform: translateY(-2px); }
@media (max-width: 899px) { .nav.is-stuck .pill { display: none; } }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -.04em; text-decoration: none; color: var(--head); }
.logo__mark { width: 26px; height: 26px; border-radius: 8px; background: #161616; position: relative; }
.logo__mark::after { content: ''; position: absolute; left: 10px; top: 7.5px; width: 9px; height: 11px; background: var(--grad); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.nav__links { display: none; gap: 26px; margin: 0 auto; }
.nav__links a { position: relative; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: #55554f; transition: color .2s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transition: transform .25s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav .pill { margin-left: 0; }
@media (min-width: 900px) { .nav__links { display: flex; } .nav__up { margin-left: 0; } }

/* ── первый экран: текст и ноутбук с проектом в CapCut ── */
.hero { display: grid; gap: 30px; align-items: center; justify-items: center; max-width: var(--page); margin: 0 auto;
  padding: 18px var(--gut) 40px; min-height: calc(100svh - 74px); }
.hero__text { max-width: 520px; text-align: center; }
.hero__lead { margin: 16px auto 0; max-width: 480px; font-size: clamp(14.5px, 1.25vw, 16px); line-height: 1.55; color: #5b5b57; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.works { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.works__label { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-right: 2px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: #fff;
  box-shadow: 0 6px 16px -10px rgba(20, 20, 20, .35), inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.chip__ico { width: 16px; height: 16px; flex: none; }
.works__sep { font-size: 13px; color: var(--gray-2); }
@media (max-width: 899px) { .works { gap: 6px; } .works__label { width: 100%; text-align: center; margin: 0 0 2px; } }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 450px) minmax(0, 610px); justify-content: center; gap: clamp(28px, 3.6vw, 52px); padding-top: 8px; }
  .hero__text { text-align: left; }
  .hero__lead { margin-left: 0; }
  .hero__cta, .works { justify-content: flex-start; }
}

/* ── объёмный телефон: экран ровно 9:16, толщина собирается слоями (app.js), поворот задаёт --rot ── */
.iphone { --w: 300px; --b: calc(var(--w) * .046); --sw: calc(var(--w) - 2 * var(--b)); --sh: calc(var(--sw) * 16 / 9);
  --r: calc(var(--w) * .155); --rot: rotateY(-24deg) rotateX(8deg) rotateZ(2deg);
  position: relative; width: var(--w); height: calc(var(--sh) + 2 * var(--b)); perspective: 1700px; }
.iphone__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: var(--rot); transition: transform 1s var(--ease); }
.iphone__layer { position: absolute; inset: 0; border-radius: var(--r); transform: translateZ(calc(var(--z) * -2px));
  background: linear-gradient(90deg, #5d5d63, #b9b9bf 30%, #e8e8ec 52%, #9d9da3 75%, #5f5f65); }
.iphone__front { position: absolute; inset: 0; border-radius: var(--r); transform: translateZ(0);
  background: linear-gradient(140deg, #f7f7f9 0%, #bfbfc5 18%, #ededf0 36%, #909096 62%, #dddde1 84%, #a7a7ad 100%); }
.iphone__front::before { content: ''; position: absolute; inset: calc(var(--b) * .3); border-radius: calc(var(--r) - var(--b) * .3); background: #060606; }
.iphone__screen { position: absolute; left: var(--b); top: var(--b); width: var(--sw); height: var(--sh); border-radius: calc(var(--r) - var(--b));
  overflow: hidden; background: #000; isolation: isolate; }
.iphone__screen video, .iphone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iphone__screen::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 44%); }
.iphone__island { position: absolute; z-index: 4; top: calc(var(--b) + var(--sw) * .035); left: 50%; width: calc(var(--sw) * .3); height: calc(var(--sw) * .085);
  margin-left: calc(var(--sw) * -.15); border-radius: 99px; background: #000; }
.iphone__btn { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #8a8a90, #dcdce0, #8a8a90); transform: translateZ(-11px); }
.iphone__btn--l1 { left: -3px; top: 17%; height: 5%; }
.iphone__btn--l2 { left: -3px; top: 26%; height: 9%; }
.iphone__btn--l3 { left: -3px; top: 37%; height: 9%; }
.iphone__btn--r { right: -3px; top: 29%; height: 13%; }
.iphone__shadow { position: absolute; left: 6%; right: -12%; bottom: -6%; height: 8%; border-radius: 50%; filter: blur(6px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%); }
.iphone--cmp { --w: clamp(230px, 22vw, 290px); --rot: rotateY(16deg) rotateX(5deg) rotateZ(-1.5deg); }
.iphone--cmp .iphone__shadow { left: -10%; right: 4%; }
@media (max-width: 899px) {
  .iphone--cmp { --w: 220px; --rot: rotateY(10deg) rotateX(4deg); }
}

/* бегущая строка */
.ticker-wrap { position: relative; z-index: 2; overflow: hidden; padding: 22px 0; }
.ticker { background: var(--grad); color: #fff; transform: rotate(-1.4deg); margin: 0 -3vw; box-shadow: 0 14px 30px -18px rgba(252, 40, 0, .6); }
.ticker__track { display: flex; gap: 26px; width: max-content; padding: 13px 26px 13px 0; animation: marquee 34s linear infinite; }  /* хвост = gap: сдвиг на −50 % ровно на набор, круг без скачка */
.ticker span { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ticker b { font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── разделы ── */
main { position: relative; z-index: 1; }
.section { max-width: var(--page); margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--gut) 0; }
.head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }

/* галочки */
.ticks { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #3b3b38; }
.tick { flex: none; position: relative; width: 22px; height: 22px; border-radius: 7px; background: var(--grad); margin-top: 1px; }
.tick::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }

/* до и после: телефон слева, текст справа */
.duo-col { display: grid; gap: 30px; align-items: center; }
.duo-col__media { display: grid; justify-items: center; gap: 16px; }
.duo-col__text .ticks { margin-bottom: 18px; }
.duo-col__text .text { margin: 0 0 24px; }
.compare__video { opacity: 0; transition: opacity .4s var(--ease); }
.compare__video.is-on { opacity: 1; }
.switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; width: 260px; background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line); }
.switch__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #161616; transition: transform .4s var(--ease), background .4s; }
.switch[data-mode="final"] .switch__pill { transform: translateX(100%); background: var(--grad-btn); }
.switch__btn { position: relative; z-index: 1; height: 36px; border: 0; background: none; border-radius: 999px; cursor: pointer;
  font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: color .3s; }
.switch__btn.is-on { color: #fff; }
.switch__btn.hint:not(.is-on) { animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 50% { color: #ff3d00; } }
.sound { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 12.5px/1 var(--sans); color: var(--ink); background: var(--soft); transition: background .2s; }
.sound:hover { background: var(--soft-2); }
@media (min-width: 900px) {
  .duo-col { grid-template-columns: auto minmax(0, 470px); justify-content: center; gap: clamp(56px, 8vw, 110px); }
}
@media (max-width: 899px) {
  /* телефон (Руслан 14.10, просмотр на телефоне): «Сравни сам» — видео сразу под заголовком, список после него;
     колонка текста раскрывается в сетку блока (display: contents), её части встают каждая в свою строку */
  .duo-col { grid-template-areas: "label" "head" "media" "ticks" "text"; row-gap: 0; }
  .duo-col__text { display: contents; text-align: left; }
  .duo-col__text > .label { grid-area: label; justify-self: start; }
  .duo-col__text > .h2 { grid-area: head; }
  .duo-col__text > .ticks { grid-area: ticks; }
  .duo-col__text > .text { grid-area: text; }
  .duo-col__media { grid-area: media; margin: 24px 0 34px; }
  .sound { height: 40px; padding: 0 16px; }
  .split__media .laptop { width: 84%; margin: 0 0 0 10%; }   /* ближний левый угол в перспективе шире крышки: сдвиг вправо, чтобы угол не резался краем экрана */
}

/* как работает, вариант 1: живые карточки */
.vsteps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vstep { position: relative; display: flex; flex-direction: column; }
.vstep__media { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: #111; box-shadow: var(--shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.vstep__media video { width: 100%; height: 100%; object-fit: cover; }
.vstep:hover .vstep__media { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(20, 20, 20, .45); }
.num { display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 10px 14px; position: relative; z-index: 2; border-radius: 50%;
  background: var(--grad); color: #fff; font: 600 13px/1 var(--mono); box-shadow: 0 6px 14px -6px rgba(252, 40, 0, .7), 0 0 0 4px #fff; }
.vstep .h3, .vstep .text { padding: 0 4px; }
.vstep .text { font-size: 14px; }
@media (max-width: 639px) { .vsteps { grid-template-columns: 1fr 1fr; gap: 18px 12px; } .vstep .text { font-size: 13px; } }
@media (min-width: 640px) and (max-width: 979px) { .vsteps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .vsteps { grid-template-columns: repeat(4, 1fr); } }

/* стили: веер роликов */
.flow { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.4vw, 18px); perspective: 1400px; padding: 10px 0 6px; }
.reel { flex: none; margin: 0; width: clamp(120px, 15vw, 180px); transition: transform .5s var(--ease);
  transform: rotateY(calc(var(--i) * -16deg)) scale(calc(1 - (var(--i) * var(--i)) * .05)); }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: #111; box-shadow: 0 24px 40px -24px rgba(20, 20, 20, .55), inset 0 0 0 1px var(--line); }
.reel figcaption { margin-top: 12px; text-align: center; }
.reel figcaption b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.03em; color: var(--head); }
.reel figcaption em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.reel figcaption span { display: block; margin-top: 3px; font: 500 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
@media (max-width: 899px) { .reel figcaption span { font-size: 10.5px; } }
.reel:hover { transform: translateY(-6px) rotateY(0) scale(1.03); z-index: 2; }
@media (max-width: 759px) {
  .flow { justify-content: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 6px var(--gut) 10px; scrollbar-width: none; }
  .flow::-webkit-scrollbar { display: none; }
  .reel { width: 42vw; transform: none; scroll-snap-align: center; }
  .reel:hover { transform: none; }
}

/* две колонки: текст и устройство */
.split { display: grid; gap: 34px; align-items: center; }
.split__text { position: relative; z-index: 2; max-width: 470px; }
.split__text .h2 { margin-bottom: 14px; }
.split__media { position: relative; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; }
  .split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--rev .split__text { order: 2; }
}

/* ноутбук: объём как у телефона (правка Руслана 14.10: «под наклоном, чтобы чувствовалась глубина»).
   Весь ноутбук смотрит чуть сверху и сбоку; крышка откинута назад, её толщину дают слои за экраном (app.js),
   клавиатура — плоскость от петли к зрителю, спереди торец. */
.laptop { position: relative; width: 100%; max-width: 620px; margin: 0 auto; perspective: 1500px; padding: 10px 6% 15%; }
.laptop__tilt { position: relative; transform-style: preserve-3d; transform: rotateX(-13deg) rotateY(-24deg) rotateZ(1.5deg); transition: transform 1.2s var(--ease); }
.split__media.in .laptop__tilt { transform: rotateX(-12deg) rotateY(-20deg) rotateZ(1deg); }
.laptop__lid { position: relative; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(17deg);
  background: #0c0c0e; border-radius: 22px 22px 6px 6px; padding: 13px 13px 16px; box-shadow: inset 0 0 0 2px #2b2b2e; }
.laptop__layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translateZ(calc(var(--z) * -1.3px));
  background: linear-gradient(100deg, #8d8d92, #d8d8dc 42%, #aeaeb3 76%, #87878c); }
.laptop__cam { position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #26272b; }
.laptop__scr { position: relative; border-radius: 6px; overflow: hidden; background: #141518; aspect-ratio: 1600 / 930; }
.laptop__scr img { width: 100%; height: 100%; object-fit: cover; }
.laptop__scr::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.laptop__deck { position: absolute; left: 0; right: 0; top: 100%; height: 0; padding-bottom: 66%; transform-origin: 50% 0; transform: rotateX(90deg);
  transform-style: preserve-3d; border-radius: 4px 4px 26px 26px; background: linear-gradient(180deg, #c4c4c8, #e6e6e9 34%, #d2d2d6); }
.laptop__keys { position: absolute; left: 7%; right: 7%; top: 6%; height: 50%; border-radius: 10px; background-color: #1d1d20;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 14 - 3px), #3a3a3e calc(100% / 14 - 3px) calc(100% / 14)),
    repeating-linear-gradient(0deg, transparent 0 calc(100% / 6 - 3px), #3a3a3e calc(100% / 6 - 3px) calc(100% / 6)); }
.laptop__pad { position: absolute; left: 31%; right: 31%; top: 62%; height: 31%; border-radius: 14px; background: #cdcdd1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.laptop__edge { position: absolute; left: 0; right: 0; top: 100%; height: 14px; transform-origin: 50% 0; transform: rotateX(-90deg);
  border-radius: 0 0 14px 14px; background: linear-gradient(#cfcfd3, #9b9ba0 70%, #7d7d82); }
.laptop__edge::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #a6a6ab; }
.laptop__shadow { position: absolute; left: 10%; right: 2%; bottom: 3%; height: 46px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); filter: blur(6px); }
.laptop__scr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* первый экран: ноутбук справа смотрит на текст, в экране играет проект CapCut */
.hero__device { width: 100%; max-width: 610px; }
.laptop--hero { max-width: 610px; padding: 6px 3% 15%; }
/* ноутбук первого экрана — фото (Руслан 15.10: CSS-ноутбук «как дешёвая 3D-графика»; выбран графит, экраном к тексту).
   Картинка сгенерирована с зелёным экраном (_генерации/noutbuk), видео ставится в экран проекцией: углы экрана в пикселях
   картинки — data-quad, matrix3d считает app.js. До расчёта экран скрыт, бокс режет всё, что вне картинки. */
.ltv { position: relative; width: 100%; max-width: 610px; margin: 0 auto; }
.ltv::after { content: ''; position: absolute; left: 10%; right: 6%; bottom: 1%; height: 9%; z-index: -1; filter: blur(12px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(40, 22, 8, .3), transparent 72%); }
.ltv__box { position: relative; overflow: hidden; }
.ltv__img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.ltv__scr { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; overflow: hidden; background: #000; visibility: hidden; }
.ltv__scr.is-placed { visibility: visible; }
.ltv__scr video, .ltv__scr img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* лёгкое покачивание, как у фигурок фона (Руслан 15.10): ноутбук плывёт, тень под ним дышит */
.ltv__box { animation: lt-float 7.5s ease-in-out infinite; }
.ltv::after { animation: lt-shadow 7.5s ease-in-out infinite; }
.ltv--side .ltv__box, .ltv--side::after { animation-delay: -3s; }
@keyframes lt-float { 50% { translate: 0 -9px; rotate: -.5deg; } }
@keyframes lt-shadow { 50% { scale: .92 1; opacity: .7; } }
/* первый экран: ноутбук крупнее колонки (Руслан 15.10: «ноутбук сделай побольше»), уходит вправо в поля */
@media (min-width: 900px) { .hero .ltv { width: 124%; max-width: 760px; margin: 0 -14.5% 0 -9.5%; } }   /* центр — в центре круга фона (Руслан 15.10: «чуть левее, в центре круга») */
@media (max-width: 899px) { .hero .ltv { width: 112%; max-width: none; margin: 0 -6%; } }
/* телефон «Сравни сам» тоже плывёт */
.iphone--cmp { animation: ph-float 8s ease-in-out infinite; }
@keyframes ph-float { 50% { translate: 0 -10px; rotate: .7deg; } }
.ltv__glare { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .035) 34%, transparent 35%); }
.laptop--hero .laptop__tilt { transform: rotateX(-12deg) rotateY(-22deg) rotateZ(1.5deg); }
.hero__device.in .laptop--hero .laptop__tilt { transform: rotateX(-11deg) rotateY(-18deg) rotateZ(1deg); }
.laptop--hero .laptop__shadow { left: 10%; right: 2%; }
.bubbles { position: absolute; left: 4%; bottom: 8px; display: grid; gap: 6px; width: min(270px, 70%); }
.bubble { padding: 10px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 16px 30px -18px rgba(20, 20, 20, .55);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bubble--me { justify-self: start; color: #fff; background: var(--grad-btn); border-bottom-left-radius: 4px; }
.bubble--ai { background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 16px 30px -18px rgba(20, 20, 20, .55), inset 0 0 0 1px var(--line); }
.bubble--ai b { display: block; margin-bottom: 2px; font: 600 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #c96442; }
.split__media.in .bubble { opacity: 1; transform: none; }
.split__media.in .bubble--ai { transition-delay: .8s; }
@media (max-width: 899px) { .bubbles { position: relative; left: 0; bottom: 0; margin-top: -6px; width: 100%; } }

/* Telegram-канал: настоящий скриншот канала, с наклоном */
.tgshot { max-width: 340px; margin: 0 auto; perspective: 1600px; }
.tgshot img { width: 100%; border-radius: 22px; transform: rotateY(12deg) rotateX(4deg) rotateZ(-1deg); transition: transform 1s var(--ease);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 70px -30px rgba(10, 14, 20, .65), 0 10px 24px -14px rgba(10, 14, 20, .4); }
.split__media.in .tgshot img { transform: rotateY(8deg) rotateX(3deg) rotateZ(-.5deg); }
.perks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-in); background: var(--soft); transition: background .25s; }
.perks li:hover { background: var(--soft-2); }
.perk__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; font-size: 17px; }
.perks b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.02em; color: var(--head); }
.perks span:not(.perk__ico) { display: block; margin-top: 1px; font-size: 13px; line-height: 1.45; color: var(--gray); }
.need { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-in); font-size: 13px; color: var(--gray); box-shadow: inset 0 0 0 1px var(--line); }
.need__title { margin-bottom: 4px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

/* покупка: светлый зернистый градиент, как на слайдах каруселей */
#kupit { padding-bottom: 0; }
.buy { position: relative; overflow: hidden; border-radius: 28px; isolation: isolate; text-align: center;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0) 38%, rgba(255, 176, 120, .42) 72%, rgba(255, 104, 36, .62) 100%),
    radial-gradient(150% 105% at 50% 26%, #fefefe 0%, #f5f5f5 48%, #e8e8ea 100%); }
.buy::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(media/noise.png?v=bdfd2a37); mix-blend-mode: overlay; pointer-events: none; }
.buy__inner { max-width: 560px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) var(--gut); }
.buy__title { font-size: clamp(28px, 3.4vw, 40px); }
.buy__price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 8px; }
.buy__price span { font-size: clamp(46px, 6vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--head); }
.buy__price s { color: var(--gray); font-size: 18px; }
/* лестница цен из config.js: действующая крупно, следующие мельче, между ними стрелки */
.ladder { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: center; column-gap: 30px; align-items: end; margin: 26px auto 0; padding: 0; list-style: none; }
.ladder__step { position: relative; display: grid; justify-items: center; gap: 7px; padding: 0 6px; }
.ladder__step + .ladder__step::before { content: ''; position: absolute; left: -20px; bottom: 34px; width: 9px; height: 9px;
  border-top: 1.5px solid var(--gray-2); border-right: 1.5px solid var(--gray-2); transform: rotate(45deg); }
.ladder__step b { font-size: 21px; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: #9d9d98; white-space: nowrap; }
.ladder__step span { min-height: 2.6em; font: 500 9.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; text-align: center; color: var(--gray); }
.ladder__step.is-now { grid-column: span 1; }
.ladder__step.is-now b { font-size: clamp(40px, 5.4vw, 58px); letter-spacing: -.05em; color: var(--head); }
.ladder__step.is-now span { color: var(--ink); }
.ladder__step.is-past b { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--gray-2); }
@media (max-width: 420px) { .ladder { column-gap: 20px; } .ladder__step + .ladder__step::before { left: -15px; } .ladder__step b { font-size: 17px; } .ladder__step.is-now b { font-size: 34px; } .ladder__step span { font-size: 10px; } }
.seats { max-width: 300px; margin: 14px auto 0; }
.seats__bar { height: 6px; border-radius: 9px; background: rgba(20, 20, 20, .1); overflow: hidden; }
.seats__fill { display: block; width: 0; height: 100%; border-radius: 9px; background: var(--grad); transition: width 1.2s var(--ease); }
.seats__text { margin-top: 8px; font-size: 13px; color: #5b5b57; }
.buy .pill { margin-top: 24px; }
.buy__note { margin-top: 14px; font-size: 13px; color: #3b3b38; }

/* вопросы — последние */
.faq-wrap { display: grid; gap: 24px; padding-bottom: 20px; }
.faq-wrap__head .text { margin-top: 12px; }
.faq-wrap__head a { color: var(--ink); }
.faq { display: grid; gap: 8px; }
.qa { border-radius: var(--r-in); background: var(--soft); transition: background .25s; }
.qa[open] { background: var(--soft-2); }
.qa summary { position: relative; list-style: none; cursor: pointer; padding: 15px 50px 15px 16px; font-size: 14.5px; font-weight: 500; letter-spacing: -.02em; color: var(--head); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23262626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 16px 16px; font-size: 14px; color: #55554f; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } .faq-wrap__head { position: sticky; top: 24px; } }

/* подвал */
.footer { padding: 30px var(--gut) 100px; text-align: center; font-size: 12.5px; color: var(--gray); }
.footer p { margin: 3px 0; }
.footer__small { font-size: 11.5px; color: var(--gray-2); }
.footer a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }  /* место под палец, строка не растёт */
@media (min-width: 900px) { .footer { padding-bottom: 30px; } }


/* появление при прокрутке */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal { transition-duration: .9s; }
.hero__text .reveal:nth-child(2) { transition-delay: .06s; }
.hero__text .reveal:nth-child(3) { transition-delay: .12s; }
.hero__text .reveal:nth-child(4) { transition-delay: .18s; }
.hero__text .reveal:nth-child(5) { transition-delay: .24s; }
.hero__device.reveal { transition-delay: .15s; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .bubble { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── варианты блока «Как это работает» (varianty.html) ── */
.variant { border-top: 1px dashed rgba(20, 20, 20, .14); margin-top: 70px; }
.variant__tag { display: inline-block; margin-bottom: 18px; padding: 7px 12px; border-radius: 999px; background: #161616; color: #fff;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* вариант 2: лента без картинок */
.tline { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.tline__step { position: relative; }
.tline__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #fff;
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.tline__ico svg { width: 28px; height: 28px; fill: none; stroke: url(#tg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tline__n { display: block; margin: 16px 0 6px; font: 600 11px/1 var(--mono); letter-spacing: .1em; }
.tline__n em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tline .text { font-size: 14px; }
@media (min-width: 900px) {
  .tline { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .tline::before { content: ''; position: absolute; left: 30px; right: 12%; top: 29px; height: 2px; border-radius: 2px; background: var(--grad); opacity: .55; }
}
@media (max-width: 899px) {
  .tline { padding-left: 76px; }
  .tline::before { content: ''; position: absolute; left: 29px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--grad); opacity: .55; }
  .tline__ico { position: absolute; left: -76px; top: 0; }
  .tline__n { margin-top: 4px; }
}

/* вариант 3: телефон и шаги в такт видео */
.sync { display: grid; gap: 32px; align-items: center; }
.sync__phone { display: grid; justify-items: center; }
.sync__phone .iphone { --w: clamp(230px, 22vw, 280px); --rot: rotateY(14deg) rotateX(5deg) rotateZ(-1deg); }
.sync__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sync__list li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), opacity .35s; opacity: .5; }
.sync__list li::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--grad);
  transform: scaleY(0); transition: transform .35s var(--ease); }
.sync__list li.is-on { opacity: 1; background: #fff; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.sync__list li.is-on::before { transform: scaleY(1); }
.sync__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--soft-2); font: 600 12px/1 var(--mono); transition: background .35s, color .35s; }
.sync__list li.is-on .sync__n { background: var(--grad); color: #fff; }
.sync__list b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.025em; color: var(--head); }
.sync__list span:not(.sync__n) { display: block; margin-top: 2px; font-size: 14px; color: var(--gray); }
@media (min-width: 900px) { .sync { grid-template-columns: auto minmax(0, 470px); justify-content: center; gap: 90px; } }

/* ── декор фона (v4): тёплое свечение, орбиты с бегущей точкой, звёздочки, сетка точек, волна, 3D-фигуры.
   Всё в палитре градиента каруселей, медленно двигается; фигуры с data-depth чуть сдвигаются за мышкой и прокруткой (app.js). ── */
.section, .hero, .hero__device, .duo-col__media, .split__media { position: relative; isolation: isolate; }
.decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.decor--bleed { left: 50%; right: auto; width: 100vw; margin-left: -50vw; overflow: hidden; }
.dc { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--s, 100px); height: var(--s, 100px);
  margin: calc(var(--s, 100px) / -2) 0 0 calc(var(--s, 100px) / -2); translate: var(--px, 0) var(--py, 0); }
.glow { border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 70, .4), rgba(255, 96, 24, .14) 55%, rgba(255, 96, 24, 0) 100%);
  filter: blur(14px); animation: breathe 9s ease-in-out infinite; }
.glow--soft { background: radial-gradient(closest-side, rgba(255, 176, 120, .32), rgba(255, 120, 60, .1) 60%, rgba(255, 120, 60, 0) 100%); }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .82; } }
.orbit { border-radius: 50%; border: 1.5px dashed rgba(255, 96, 24, .3); animation: spin 46s linear infinite; }
.orbit::after { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 14px rgba(255, 90, 20, .65); }
.orbit--rev { animation-direction: reverse; animation-duration: 60s; }
.orbit--rev::after { top: auto; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; }
.ring { border-radius: 50%; border: 1px solid rgba(20, 20, 20, .07); }
@keyframes spin { to { transform: rotate(360deg); } }
.spark { animation: twinkle 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.spark svg { width: 100%; height: 100%; display: block; fill: url(#sg); filter: drop-shadow(0 2px 6px rgba(255, 90, 20, .35)); }
@keyframes twinkle { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.dotgrid { background-image: radial-gradient(rgba(20, 20, 20, .16) 1.1px, transparent 1.5px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); }
.wave { position: absolute; left: 0; right: 0; top: 30%; height: 240px; width: 100%; opacity: .55; }
.wave path { fill: none; stroke: url(#sg2); stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; animation: flow 22s linear infinite; }
.wave path + path { stroke-width: 1.2; stroke-dasharray: none; opacity: .5; animation: none; }
@keyframes flow { to { stroke-dashoffset: -480; } }
.obj { width: var(--s); height: auto; margin-top: calc(var(--s) / -2); animation: float var(--dur, 8s) ease-in-out infinite; animation-delay: var(--d, 0s);
  filter: drop-shadow(0 16px 22px rgba(170, 40, 0, .22)); }
@keyframes float { 50% { transform: translateY(-12px) rotate(var(--rot2, 6deg)); } }
.hero__device .decor, .duo-col__media .decor, .split__media .decor { inset: -12%; }
@media (max-width: 899px) {
  .hero, .section { overflow-x: clip; }
  .hide-m { display: none; }
  .obj { --s: calc(var(--sm, 46px)) !important; }
  /* телефон (Руслан 15.10: «3D-штучки как будто не видны»): у каждой фигурки своё место --xm/--ym — у картинок и в полях
     секций, целиком в экране и не поверх текста; раньше 11 из 13 были скрыты, а две на первом экране резались краем */
  .obj { left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
  /* на телефоне фигурки не уезжают при прокрутке (Руслан 15.10, снимки с iPhone: у края блока смещение уводило их за границу,
     и они обрезались) — остаётся только своё покачивание */
  .dc { translate: none; }
  .tgshot { max-width: 240px; }   /* скриншот канала меньше (Руслан 15.10) */
}
@media (prefers-reduced-motion: reduce) { .dc { translate: none; } }