/* ESTATELUMA — ядро сайта.

   Reference lock (Refero): primary — **xAI / x.ai** («Midnight Command Center»):
   чёрный канвас, hairline-кромки вместо теней, белая типографика с трекингом
   -0.025em, моноширинные метки с трекингом +0.1em, кнопки-пилюли 9999px,
   карточки без скруглений, только line-art и свечение — фотографий в интерфейсе
   нет. Borrow: **Index** (index.app) — метки в квадратных скобках, line-art
   иконка в круге 48px, hairline-сетка секций.

   Что мы меняем под себя: у xAI единственный цветной акцент — электрический
   синий на фокусе. У нас его роль занимает латунь бренда #BFA982, и она
   остаётся такой же редкой: метки, тонкая кромка активного элемента, свечение.
   Заливать латунью плоскости нельзя — правило сохраняется с прошлой системы.

   Фотографии объектов живут ТОЛЬКО в кейсах и карточках работ. Секции сайта
   держатся на чёрном, тексте и line-art графике. */

:root{
  /* поверхности: чистый чёрный канвас, панели отличаются на проценты */
  --void:#050403; --panel:#0C0A08; --panel-2:#121010; --raised:#171412;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --line-3:rgba(255,255,255,.04);

  /* текст: белый, дальше две ступени серого — как у xAI */
  --fg:#F5EFE6; --fg-2:#8E8880; --fg-3:#615C55;

  /* акцент бренда — редкий */
  --brass:#BFA982; --brass-hi:#E7DAC1; --brass-dim:#6E6047;
  --brass-soft:rgba(191,169,130,.14);

  --sans:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --content:1180px;
  --pill:9999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sec:clamp(64px,8vw,116px);     /* вертикальный шаг между секциями */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{margin:0;background:var(--void);color:var(--fg);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.5;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
::selection{background:rgba(191,169,130,.3)}
:focus-visible{outline:1px solid var(--brass);outline-offset:3px}

.wrap{max-width:var(--content);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* ── типографика ────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(38px,6.4vw,80px);line-height:1.02}
h2{font-size:clamp(28px,3.6vw,48px);line-height:1.08;margin:0 0 18px}
h3{font-size:19px;line-height:1.3;margin:0 0 10px}
p{margin:0 0 14px}
.lede{color:var(--fg-2);font-size:17px;line-height:1.55;max-width:64ch;margin:0}
.dim{color:var(--fg-2)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* метка секции: [ РАБОТЫ ] — моно, разряженная, в скобках (Index) */
.lab{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);margin:0 0 22px;display:inline-flex;gap:8px;
  /* baseline: внутри метки бывает <span> со счётчиком — при stretch цифра съезжала вниз */
  align-items:baseline}
.lab::before{content:"["}
.lab::after{content:"]"}
.lab.brass{color:var(--brass)}

section{padding:var(--sec) 0;position:relative}
section::before{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
section:first-of-type::before{display:none}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ── кнопки: пилюли, ghost по умолчанию ─────────────────────────────── */
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:-.01em;
  padding:11px 20px;border-radius:var(--pill);border:1px solid var(--line-2);
  color:var(--fg);background:transparent;transition:all .25s var(--ease);white-space:nowrap}
.btn:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.btn.solid{background:var(--fg);color:#000;border-color:var(--fg)}
.btn.solid:hover{background:#E8E8E8;border-color:#E8E8E8}
.btn.brass{border-color:rgba(191,169,130,.55);color:var(--brass-hi)}
.btn.brass:hover{background:var(--brass-soft);border-color:var(--brass)}
.btn.sm{font-size:12px;padding:8px 16px}
.btn .arw{font-size:11px;opacity:.7;transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translate(2px,-2px)}

/* ── шапка ──────────────────────────────────────────────────────────── */
header.el{position:fixed;inset:0 0 auto;z-index:90;transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent}
header.el.solid{background:linear-gradient(180deg,rgba(6,5,4,.86),rgba(6,5,4,.6) 68%,rgba(6,5,4,.32));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:transparent}
/* нижний край шапки уводим в ничто — иначе поперёк свечения идёт ребро */
header.el.solid::after{content:"";position:absolute;left:0;right:0;top:100%;height:52px;
  pointer-events:none;background:linear-gradient(180deg,rgba(6,5,4,.42),rgba(6,5,4,.16) 46%,transparent)}
.hbar{max-width:var(--content);margin:0 auto;padding:0 28px;height:64px;display:flex;
  align-items:center;justify-content:space-between;gap:20px}
.hlogo{display:flex;align-items:center;gap:10px}
.hlogo svg{width:26px;flex:0 0 26px}
.hlogo span{font-size:12px;letter-spacing:.22em;color:var(--fg)}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:12px;letter-spacing:.02em;color:var(--fg-2);transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--fg)}
.menu a.go{color:var(--fg);border:1px solid var(--line-2);border-radius:var(--pill);
  padding:8px 16px}
.menu a.go:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
/* переключатель языка: моно-метка рядом с «Войти», виден и на телефоне */
.menu a.lng{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg-2);
  padding:6px 2px;border-bottom:1px solid transparent}
.menu a.lng:hover{color:var(--brass-hi);border-bottom-color:var(--brass-dim)}
/* 27.10 поддержка в Telegram — круглая иконка рядом с «Войти», видна и на телефоне */
.menu a.tg{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line-2);color:var(--fg-2);transition:color .2s,border-color .2s}
.menu a.tg:hover{color:var(--brass-hi);border-color:var(--brass-dim)}
.menu a.tg svg{width:15px;height:15px;fill:currentColor}
@media(max-width:520px){.mjs .menu a.tg{display:none}}
@media(max-width:920px){.menu a:not(.go):not(.lng):not(.tg){display:none}.hbar{padding:0 18px}.menu{gap:16px}}

/* ── герой: гигантский знак и свечение из-за него ───────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;padding:120px 0 64px}
.hero .beam{position:absolute;inset:0;z-index:0;pointer-events:none}
/* тёплый свет из-за правого края — у xAI это ядро композиции */
/* источник света справа: у референса это единственный «фон» героя */
.hero .beam::before{content:"";position:absolute;right:-24%;top:-16%;width:92%;height:132%;
  background:
    radial-gradient(closest-side,rgba(232,196,128,.58),rgba(186,146,86,.24) 44%,transparent 72%),
    radial-gradient(closest-side at 78% 46%,rgba(255,238,198,.62),transparent 62%),
    radial-gradient(closest-side at 96% 30%,rgba(255,246,222,.4),transparent 58%);
  filter:blur(64px)}
.hero .beam::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.44),rgba(0,0,0,.22) 14%,rgba(0,0,0,.07) 28%,
    rgba(0,0,0,.04) 40%,rgba(0,0,0,.16) 56%,rgba(0,0,0,.4) 72%,rgba(0,0,0,.74) 88%,#000 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
/* тонкое зерно: единственный способ убрать банды на больших мягких заливках */
.hero::after,.glowfield::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
.glowfield::before{z-index:2;opacity:.045}
.wordmark{font-size:clamp(58px,15vw,205px);line-height:.9;letter-spacing:-.03em;font-weight:200;
  color:transparent;background:linear-gradient(180deg,#fff,rgba(255,255,255,.42));
  -webkit-background-clip:text;background-clip:text;margin:0 0 26px;user-select:none}
.hero .sub{color:var(--fg-2);font-size:clamp(15px,1.5vw,18px);max-width:56ch;margin:0 0 26px}

/* строка запроса — как поле «Ask Grok anything» */
.ask{display:flex;align-items:center;gap:12px;max-width:520px;
  border:1px solid var(--line-2);border-radius:var(--pill);padding:14px 14px 14px 22px;
  background:rgba(10,10,10,.7);backdrop-filter:blur(12px);transition:border-color .25s}
.ask:hover{border-color:rgba(255,255,255,.42)}
.ask span{color:var(--fg-2);font-size:14px;flex:1}
.ask i{width:30px;height:30px;border-radius:50%;background:var(--fg);color:#000;
  display:grid;place-items:center;font-style:normal;font-size:13px;flex:0 0 30px}

/* ── трёхколонная сетка карточек с вертикальными швами (xAI · PRODUCTS) */
.cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  margin-top:40px}
.cols>*{border-left:1px solid var(--line);padding:30px 26px 28px;display:flex;
  flex-direction:column;gap:12px;min-height:300px;transition:background .3s}
.cols>*:first-child{border-left:0}
.cols>*:hover{background:rgba(255,255,255,.02)}
.cols .art{margin-top:auto;padding-top:22px}
.cols .art svg{width:100%;height:auto;overflow:visible}
.cols p{color:var(--fg-2);font-size:14px;line-height:1.55;margin:0}
@media(max-width:900px){.cols{grid-template-columns:1fr}
  .cols>*{border-left:0;border-top:1px solid var(--line)}
  .cols>*:first-child{border-top:0}}

/* line-art: единственный вид графики в интерфейсе */
.art .ln{fill:none;stroke:var(--fg-2);stroke-width:1;vector-effect:non-scaling-stroke}
.art .ln.hi{stroke:var(--brass)}
.art .dot{fill:var(--brass)}
.cols>*:hover .art .ln{stroke:var(--fg)}

/* ── карточка со списком (материалы, тарифы) ────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:40px}
.cards>*{background:var(--void);padding:26px 24px 30px;display:flex;flex-direction:column;
  gap:10px;transition:background .3s}
.cards>*:hover{background:var(--panel)}
.cards .ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--panel);margin-bottom:6px}
.cards .ic svg{width:18px;height:18px;fill:var(--fg-2)}
.cards>*:hover .ic svg{fill:var(--brass)}
.cards p{color:var(--fg-2);font-size:14px;line-height:1.55;margin:0}
.cards .meta{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;color:var(--fg-3);display:flex;justify-content:space-between;gap:10px}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* ── таблица ────────────────────────────────────────────────────────── */
table.spec{width:100%;border-collapse:collapse;font-size:14px}
table.spec th,table.spec td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);
  vertical-align:baseline}
table.spec th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);font-weight:400}
table.spec td:last-child,table.spec th:last-child{text-align:right;white-space:nowrap}
table.spec td b{font-weight:400;color:var(--fg);font-family:var(--mono);
  font-variant-numeric:tabular-nums}
table.spec td span{display:block;color:var(--fg-3);font-size:12.5px;margin-top:3px}

/* ── две колонки ────────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;
  margin-top:34px}
@media(max-width:860px){.two{grid-template-columns:1fr}}

/* ── лента фактов ───────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  margin-top:38px}
.facts div{padding:20px 20px 0 0;border-left:1px solid var(--line);padding-left:20px}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--fg);
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);display:block;margin-top:6px}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}
  .facts div:nth-child(3){border-left:0;padding-left:0}}

/* ── подвал: колонки ссылок и тёплое свечение снизу (xAI) ───────────── */
footer.el{position:relative;border-top:1px solid var(--line);padding:62px 0 0;overflow:hidden}
footer.el .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  position:relative;z-index:2}
footer.el .cols4 h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;font-weight:400}
footer.el .cols4 a{display:block;font-size:13px;color:var(--fg-2);padding:5px 0;transition:color .2s}
footer.el .cols4 a:hover{color:var(--fg)}
footer.el .base{position:relative;z-index:2;margin-top:44px;padding:20px 0 30px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--fg-3)}
footer.el .owner{position:relative;z-index:2;margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);
  gap:28px;padding:26px 28px;border:1px solid rgba(191,169,130,.28);border-radius:16px;
  background:linear-gradient(180deg,rgba(191,169,130,.07),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
footer.el .owner>div{min-width:0}
footer.el .owner h5{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
footer.el .owner b{display:block;font-size:16px;font-weight:600;color:var(--fg);line-height:1.35;
  overflow-wrap:anywhere}
footer.el .owner b a{color:inherit;text-decoration:none;transition:color .2s}
footer.el .owner b a:hover{color:var(--brass-hi)}
footer.el .owner span{display:block;margin-top:4px;font-size:12.5px;color:var(--fg-2)}
@media(max-width:820px){footer.el .owner{grid-template-columns:repeat(2,1fr);padding:22px}}
@media(max-width:480px){footer.el .owner{grid-template-columns:1fr;gap:18px}}
footer.el .glow{position:absolute;left:50%;bottom:-160px;transform:translateX(-50%);
  width:min(1100px,120%);height:300px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,232,196,.34),rgba(191,169,130,.1) 46%,transparent 74%);
  filter:blur(30px)}
@media(max-width:820px){footer.el .cols4{grid-template-columns:repeat(2,1fr)}}

/* ── появление ──────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn,.cols>*,.cards>*{transition:none}
}

/* ── граф: один источник → шесть выходов (приём xAI «Understand The Universe») */
.graph{border-top:1px solid var(--line);padding:clamp(70px,9vw,130px) 0}
.gwrap{position:relative;display:grid;place-items:center}
.gsvg{width:100%;max-width:900px;height:auto;display:block}
.gsvg .ray{stroke:rgba(255,255,255,.22);stroke-width:.75;opacity:0;
  transition:opacity .8s var(--ease)}
.gsvg .ray.on{opacity:1}
.gsvg .node{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
.gsvg .node.hi{fill:var(--brass);stroke:none}
.gsvg .core{fill:#fff}
.gleft,.gright{position:absolute;top:50%;transform:translateY(-50%);margin:0;
  font-size:clamp(22px,3.4vw,44px);letter-spacing:-.03em;color:var(--fg);pointer-events:none}
.gleft{left:0}
.gright{right:0;color:var(--fg-2)}
.gnote{margin:34px auto 0;text-align:center;max-width:62ch}
@media(max-width:760px){.gleft,.gright{position:static;transform:none;text-align:center;
  display:block;margin:0 auto 10px}.gright{margin-top:10px}}

/* ── шаги: номер, заголовок, текст, hairline-разделители ────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  margin-top:36px}
.steps>div{border-left:1px solid var(--line);padding:26px 22px 8px;display:flex;
  flex-direction:column;gap:8px}
.steps>div:first-child{border-left:0;padding-left:0}
.steps .sn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--brass)}
.steps p{color:var(--fg-2);font-size:13.5px;line-height:1.55;margin:0}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}
  .steps>div:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:560px){.steps{grid-template-columns:1fr}
  .steps>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .steps>div:first-child{border-top:0}}

/* ── сцена: сгенерированный кадр по смыслу раздела ──────────────────── */
.scene{margin:44px 0 0;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.scene img{width:100%;height:auto;display:block}
.scene figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);padding:12px 16px;border-top:1px solid var(--line)}

/* ── список работ (приём xAI «Latest news») ─────────────────────────── */
.rowhead{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:130px 1fr 300px;gap:28px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);transition:background .3s}
.row:hover{background:rgba(255,255,255,.02)}
.row .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3)}
.row h3{margin:0 0 8px;font-size:20px}
.row p{color:var(--fg-2);font-size:14px;line-height:1.55;margin:0 0 14px;max-width:58ch}
.row .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel);
  border:1px solid var(--line)}
.row .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.row:hover .shot img{transform:scale(1.04)}
@media(max-width:900px){.row{grid-template-columns:1fr;gap:16px}
  .row .shot{order:-1;aspect-ratio:16/10}}

/* ── финальная секция ───────────────────────────────────────────────── */
.final{text-align:center;position:relative;overflow:hidden}
.final h2{max-width:20ch;margin:0 auto 16px}
.final .lede{margin:0 auto;text-align:center}
.final .btns{justify-content:center}
.final::after{content:"";position:absolute;left:50%;bottom:-220px;transform:translateX(-50%);
  width:min(900px,110%);height:340px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,232,196,.22),transparent 72%);filter:blur(26px)}

/* шапка страницы раздела: заголовок ниже фиксированной панели */
.pagetop{padding-top:calc(64px + var(--sec))}
.pagetop h1{max-width:20ch}

/* ── герой: за словом идёт живой пролёт камеры вокруг объекта ────────── */
.hero .seq{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .seq::after{content:"";position:absolute;inset:0;background:rgba(5,4,3,.5)}
.hero .seq img,.hero .seq canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 54%;opacity:.3;filter:saturate(.75)}
.hero .seq img{z-index:1;transition:opacity .8s var(--ease)}
.hero .beam{z-index:2}
.hero .beam::after{background:
  linear-gradient(180deg,rgba(5,4,3,.5),transparent 26%,rgba(5,4,3,.5) 82%,var(--void) 100%),
  linear-gradient(90deg,var(--void),rgba(5,4,3,.5) 34%,transparent 62%)}
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.hero .kicker::before{content:"";width:26px;height:1px;background:var(--brass-dim)}


/* ── бегущая лента кадров объектов ──────────────────────────────────── */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:0;background:var(--void)}
.marquee .track{display:flex;gap:1px;width:max-content;animation:mrun 64s linear infinite}
.marquee figure{margin:0;flex:0 0 260px;height:150px;overflow:hidden;position:relative;
  background:var(--panel)}
.marquee img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .5s}
.marquee figure:hover img{opacity:1}
.marquee:hover .track{animation-play-state:paused}
@keyframes mrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){.marquee figure{flex-basis:190px;height:112px}}

/* ── дом по часам: один ракурс, четыре состояния света ──────────────── */
.hours{margin-top:38px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.hours .stage{position:relative;aspect-ratio:16/9;background:#000}
.hours .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease)}
.hours .stage img.on{opacity:1}
.hours .bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hours .bar button{padding:16px 12px;border-left:1px solid var(--line);color:var(--fg-3);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:color .25s,background .25s;position:relative}
.hours .bar button:first-child{border-left:0}
.hours .bar button.on{color:var(--fg);background:rgba(255,255,255,.03)}
.hours .bar button.on::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:var(--brass)}
.hours .bar button:hover{color:var(--fg-2)}

/* ── до / после добора: шторка сравнения ────────────────────────────── */
.compare{position:relative;margin-top:38px;border:1px solid var(--line);overflow:hidden;
  aspect-ratio:16/9;background:#000;cursor:col-resize;touch-action:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--x,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;
  background:var(--brass);z-index:3}
.compare .handle::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border:1px solid var(--brass);border-radius:50%;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.compare .tag{position:absolute;bottom:14px;z-index:4;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:rgba(0,0,0,.55);
  padding:6px 12px;border:1px solid var(--line)}
.compare .tag.l{left:14px}
.compare .tag.r{right:14px}

/* ── карточка возможности: чертёж, а по наведению — реальная выдача ─── */
.cols .art{position:relative}
.cols .art .real{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  opacity:0;transition:opacity .5s var(--ease)}
.cols>*:hover .art .real{opacity:1}
.cols>*:hover .art svg{opacity:.12}
.cols .art svg{transition:opacity .5s var(--ease)}

/* ── кому подходит ──────────────────────────────────────────────────── */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:38px}
.who>div{background:var(--void);padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px}
.who .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass)}
.who p{color:var(--fg-2);font-size:14px;line-height:1.55;margin:0}
.who .n{font-family:var(--mono);font-size:12px;color:var(--fg-3);margin-top:auto;padding-top:14px}
@media(max-width:860px){.who{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .marquee .track{animation:none}
  .hours .stage img,.cols .art .real{transition:none}
}

/* ══ компоненты продуктового прототипа ═══════════════════════════════
   Danny показал сборку на Lovable как эталон наполнения: бейдж-пилюля,
   центрированный герой с золотой строкой, окно приложения под ним,
   карточки материалов с предметными кадрами, «папка → кампания» и холст
   рабочего пространства. Ниже — эти блоки на нашей палитре. */

/* бейдж с точкой */
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(191,169,130,.42);
  border-radius:var(--pill);padding:8px 18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-hi);
  background:rgba(191,169,130,.06)}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 10px rgba(191,169,130,.9)}

/* золотая кнопка — главное действие, как в прототипе */
/* золото переливается: широкий градиент едет под курсором, а не меняет цвет */
.btn.gold{color:#17130C;border-color:transparent;font-weight:500;
  background:linear-gradient(100deg,#D9B87C,#EBCF9A 22%,#FBF0D6 46%,#EBCF9A 68%,#D3AC6B);
  background-size:260% 100%;background-position:12% 50%;
  transition:background-position 1.1s var(--ease),box-shadow .4s,transform .3s var(--ease)}
.btn.gold:hover{background-position:92% 50%;box-shadow:0 12px 40px -14px rgba(226,186,116,.6)}
/* вторая кнопка героя — та же латунь, но контуром */
.hero .btns .btn:not(.gold){color:#EBCF9A;border-color:rgba(226,186,116,.5);
  background:linear-gradient(100deg,rgba(226,186,116,.14),rgba(226,186,116,.03) 46%,rgba(226,186,116,.14));
  background-size:260% 100%;background-position:12% 50%;
  transition:background-position 1.1s var(--ease),border-color .4s,color .3s}
.hero .btns .btn:not(.gold):hover{background-position:92% 50%;border-color:rgba(240,220,176,.85);
  color:#FBF0D6}
.btn.amber{background:linear-gradient(180deg,#E8C88A,#D3AC6B);color:#17140F;border-color:transparent;
  font-weight:500}

/* герой по центру */
.hero.center .wrap{text-align:center;max-width:1140px}
.hero.center .badge{margin:0 auto 30px}
.hero.center h1{font-size:clamp(32px,4.9vw,68px);line-height:1.14;margin:0 auto 26px;
  max-width:27ch;font-weight:400;letter-spacing:-.03em}
.hero.center h1 .gold{font-weight:500}
.hero.center h1 .gold{color:transparent;
  background:linear-gradient(96deg,#EBCF9A,#D9B87C 42%,#C79E5E);
  -webkit-background-clip:text;background-clip:text}
.hero.center .sub{margin:0 auto 36px;max-width:52ch;text-align:center;font-size:16.5px;
  line-height:1.6}
.hero.center .btns{justify-content:center}

/* ── окно приложения ────────────────────────────────────────────────── */
.mock{border:1px solid var(--line);background:linear-gradient(180deg,#0B0B0C,#070707);
  border-radius:14px;overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
.mock .bar{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.mock .dots{display:flex;gap:6px}
.mock .dots i{width:9px;height:9px;border-radius:50%;background:#26262A;display:block}
.mock .dots i:last-child{background:rgba(191,169,130,.55)}
.mock .ttl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3)}
.mock .stat{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(191,169,130,.4);border-radius:var(--pill);padding:5px 12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-hi)}
.mock .stat::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.mock .body{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr);gap:1px;
  background:var(--line)}
.mock .body>*{background:#070707;padding:20px}
.mock .cap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 14px;display:flex;justify-content:space-between;gap:10px}
.mock .cap b{color:var(--brass);font-weight:400}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumbs img{aspect-ratio:1/1;object-fit:cover;width:100%;border:1px solid var(--line)}
.thumbs .drop{aspect-ratio:1/1;border:1px dashed rgba(191,169,130,.4);display:grid;
  place-items:center;color:var(--brass);font-size:17px}
.mock .prop{margin-top:12px;border:1px solid var(--line);padding:14px;text-align:center}
.mock .prop b{display:block;font-weight:400;font-size:15px}
.mock .prop span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--fg-3)}
.mock .out{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line)}
.mock .out img{width:100%;height:100%;object-fit:cover}
.mock .out .lbl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  gap:10px;padding:12px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg);background:linear-gradient(transparent,rgba(0,0,0,.85))}
.mock .out .lbl .ok{color:var(--brass-hi)}
.mock .checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mock .checks span{border:1px solid var(--line);padding:10px 12px;font-size:12px;color:var(--fg-2);
  display:flex;align-items:center;gap:8px}
.mock .checks span::before{content:"✓";color:var(--brass);font-size:11px}
@media(max-width:860px){.mock .body{grid-template-columns:1fr}}

/* ── карточки материалов с предметным кадром ────────────────────────── */
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:1000px){.prod{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.prod{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;transition:border-color .35s,transform .5s var(--ease)}
.pcard:hover{border-color:rgba(191,169,130,.4);transform:translateY(-3px)}
.pcard .shot{aspect-ratio:4/3;overflow:hidden;background:#080808}
.pcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .shot img{transform:scale(1.04)}
.pcard .body{padding:20px 22px 24px;display:flex;gap:14px;align-items:flex-start}
.pcard .ic{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(191,169,130,.3);background:rgba(191,169,130,.07)}
.pcard .ic svg{width:16px;height:16px;fill:var(--brass)}
.pcard h3{margin:0 0 6px;font-size:17px}
.pcard p{margin:0;color:var(--fg-2);font-size:13.5px;line-height:1.5}

/* ── папка снимков → готовая кампания ───────────────────────────────── */
.tform{display:grid;grid-template-columns:1fr 132px 1fr;gap:20px;align-items:center;margin-top:44px}
.tform .raw{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tform .raw img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);
  filter:saturate(.7) brightness(.82)}
.tform .raw img:first-child{grid-column:1/-1;aspect-ratio:16/10}
.tform .mid{display:flex;flex-direction:column;align-items:center;gap:12px}
.tform .orb{width:66px;height:66px;border-radius:50%;border:1px solid rgba(191,169,130,.45);
  display:grid;place-items:center;background:rgba(191,169,130,.07);
  box-shadow:0 0 50px rgba(191,169,130,.22)}
.tform .orb svg{width:24px;height:24px;fill:var(--brass-hi)}
.tform .mid span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);text-align:center}
.tform .mid .arrow{color:var(--brass);font-size:15px}
.tform .done{position:relative;border:1px solid rgba(191,169,130,.28);overflow:hidden}
.tform .done img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tform .done .meta{position:absolute;left:0;right:0;bottom:0;padding:18px;
  background:linear-gradient(transparent,rgba(0,0,0,.9))}
.tform .done b{display:block;font-weight:400;font-size:19px}
.tform .done span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-hi)}
@media(max-width:900px){.tform{grid-template-columns:1fr}
  .tform .mid{flex-direction:row;justify-content:center}}

/* ── холст рабочего пространства ────────────────────────────────────── */
.canvas .body{display:grid;grid-template-columns:210px 1fr;gap:1px;background:var(--line)}
.canvas .side{background:#070707;padding:18px}
.canvas .side .cap{margin-bottom:12px}
.canvas .side button{display:block;width:100%;text-align:left;border:1px solid var(--line);
  padding:12px 14px;margin-bottom:8px;transition:all .25s}
.canvas .side button.on{border-color:rgba(191,169,130,.45);background:rgba(191,169,130,.06)}
.canvas .side b{display:block;font-weight:400;font-size:14px}
.canvas .side span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--fg-3)}
.canvas .grid6{background:#070707;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px}
.canvas .item{border:1px solid var(--line);overflow:hidden;background:#0A0A0A}
.canvas .item .im{aspect-ratio:16/10;overflow:hidden;position:relative}
.canvas .item img{width:100%;height:100%;object-fit:cover}
.canvas .item .row{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 12px;font-size:12.5px;color:var(--fg-2)}
.canvas .item .ok{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--brass-hi);
  display:flex;align-items:center;gap:6px}
.canvas .item .ok::before{content:"✓"}
.canvas .item .run{position:absolute;left:10px;top:10px;z-index:2;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-hi);
  background:rgba(0,0,0,.7);border:1px solid rgba(191,169,130,.4);padding:4px 9px;
  display:flex;align-items:center;gap:6px}
.canvas .item .run::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass);
  animation:pulse 1.6s ease-in-out infinite}
@media(max-width:900px){.canvas .body{grid-template-columns:1fr}
  .canvas .grid6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.canvas .grid6{grid-template-columns:1fr}}

/* ── герой по эталону: знак крупно, фраза под ним ────────────────────── */
.hero .plate{position:absolute;inset:0;z-index:0;overflow:hidden}
/* кадр света расфокусируем: в самом снимке есть кромки софтбокса, и на весь
   экран они читались как прямые стыки фона */
.hero .plate img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  transform:scale(1.16);filter:blur(22px) contrast(1.3) saturate(1.14) brightness(.98);
  mix-blend-mode:screen}
.hero .plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--void) 2%,rgba(5,4,3,.82) 16%,rgba(5,4,3,.56) 32%,
    rgba(5,4,3,.28) 48%,rgba(5,4,3,.1) 62%,transparent 76%)}
/* нижний край кадра растворяем маской — иначе на стыке секций видна линия */
.hero .plate{--pmask:radial-gradient(128% 116% at 70% 24%,#000 6%,rgba(0,0,0,.94) 22%,
    rgba(0,0,0,.78) 38%,rgba(0,0,0,.54) 54%,rgba(0,0,0,.3) 68%,rgba(0,0,0,.12) 80%,transparent 94%);
  -webkit-mask-image:var(--pmask);mask-image:var(--pmask)}
.hero.center h1.markname,.markname{font-size:clamp(42px,9.2vw,128px);line-height:.98;letter-spacing:-.055em;
  font-weight:600;margin:0 0 20px;color:#F7F1E6;white-space:nowrap}
@media(max-width:520px){.markname{white-space:normal;letter-spacing:-.04em}}
.hero.center .claim{font-size:clamp(20px,2.7vw,36px);line-height:1.24;letter-spacing:-.025em;
  font-weight:400;margin:0 auto 26px;max-width:26ch;color:#EDE6DA}
.hero.center .claim .gold{color:transparent;font-weight:500;
  background:linear-gradient(96deg,#EBCF9A,#D9B87C 42%,#C79E5E);
  -webkit-background-clip:text;background-clip:text}

/* ── перелив двух кадров объекта ─────────────────────────────────────── */
.blend{position:relative;margin-top:38px;border:1px solid var(--line);overflow:hidden;
  aspect-ratio:16/9;background:#000}
.blend img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 2.2s var(--ease),transform 9s linear}
.blend img.on{opacity:1;transform:scale(1.05)}
.blend .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 24px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  background:linear-gradient(transparent,rgba(0,0,0,.86))}
.blend .cap b{display:block;font-weight:500;font-size:19px}
.blend .cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3)}
.blend .dots{display:flex;gap:6px}
.blend .dots i{width:22px;height:2px;background:rgba(255,255,255,.24);display:block;
  transition:background .5s}
.blend .dots i.on{background:var(--brass)}
@media(prefers-reduced-motion:reduce){.blend img{transition:none}}


/* тёплый переход от героя к окну сервиса — свет героя не обрывается */
.afterhero{position:relative}
/* подложка живёт внутри ширины блока: раньше она уходила на -50vw и обрезалась
   по overflow-x:clip — по краям контента шли прямые швы поперёк свечения */
/* тёплая подложка отсюда убрана (08.09): пятно жило в прямоугольнике шириной
   колонки и читалось как жёлтый полупрозрачный квадрат поверх кадра, а переход
   к следующей секции уходил в светло-коричневое. Здесь должно быть чёрное. */
.afterhero::before{content:none}
.afterhero>*{position:relative;z-index:1}

/* ══ доводка под эталон: наезд окна, прайс-плашки, крупные карточки ══ */

/* герой ниже ростом — окно сервиса должно попадать в первый экран */
.hero.center{min-height:84svh;padding:104px 0 236px}
.hero.center .sub{font-weight:500;color:#C9C2B8;font-size:clamp(15.5px,1.55vw,18px);
  max-width:60ch}
.afterhero{margin-top:-150px!important}

/* карточки материалов: крупнее кадр, мягкая тень, подпись поверх снимка */
.pcard{border-radius:16px;background:linear-gradient(180deg,#0E0C0A,#080706);
  box-shadow:0 30px 90px -50px rgba(0,0,0,.95)}
.pcard .shot{aspect-ratio:5/4;position:relative}
.pcard .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(6,5,4,.9))}
.pcard .body{padding:22px 24px 26px;margin-top:-58px;position:relative;z-index:2}
.pcard:hover{border-color:rgba(214,178,112,.45);
  box-shadow:0 40px 110px -50px rgba(0,0,0,1),0 0 0 1px rgba(214,178,112,.12)}
.pcard .ic{background:rgba(12,10,8,.82);backdrop-filter:blur(8px)}

/* ── прайс: три плашки с оживающей кромкой ──────────────────────────── */
.plans3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:900px){.plans3{grid-template-columns:1fr}}
.plan{position:relative;border:1px solid var(--line);border-radius:16px;padding:30px 28px 32px;
  background:linear-gradient(180deg,#0D0B09,#070605);display:flex;flex-direction:column;gap:16px;
  overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.plan::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,178,112,.6),transparent);
  opacity:0;transition:opacity .45s}
.plan::after{content:"";position:absolute;inset:-40% -10% auto;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(214,178,112,.16),transparent 70%);
  opacity:0;transition:opacity .5s}
.plan:hover{transform:translateY(-6px);border-color:rgba(214,178,112,.36);
  box-shadow:0 40px 100px -50px rgba(0,0,0,1)}
.plan:hover::before,.plan:hover::after{opacity:1}
.plan.best{border-color:rgba(214,178,112,.32);background:linear-gradient(180deg,#141009,#090807)}
.plan.best::before{opacity:1}
.plan .tag{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi);
  border:1px solid rgba(214,178,112,.4);border-radius:var(--pill);padding:5px 11px}
.plan .nm{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass)}
.plan .price{display:flex;align-items:baseline;gap:8px}
.plan .price b{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1}
.plan .price span{font-size:13px;color:var(--fg-3)}
.plan .inc{font-family:var(--mono);font-size:12px;color:var(--fg-2);padding:12px 0;
  border-block:1px solid var(--line)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{color:var(--fg-2);font-size:14px;line-height:1.5;padding-left:20px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--brass);font-size:11px}
.plan .btn{margin-top:auto;justify-content:center}

/* холст рабочего пространства: крупнее и с подсветкой активного объекта */
.canvas{border-radius:16px}
.canvas .side button{border-radius:10px}
.canvas .side button.on{box-shadow:inset 0 0 0 1px rgba(214,178,112,.25)}
.canvas .item{border-radius:10px}
.canvas .grid6{gap:14px;padding:20px}

/* финал: без пустоты, со светом снизу */
.final{padding:clamp(80px,10vw,140px) 0}
.final .badge{margin-bottom:22px}
.final h2{font-size:clamp(30px,4.4vw,58px);max-width:18ch}

/* ══════════════════════════════════════════════════════════════════════
   Правка 04.09: полоса-фильм перед продуктами, спецификации площадок,
   световой движок как инструмент, холст с логом, работы карточками.
   Свечение героя (img/mock/glow.jpg) переиспользуется как фон секций —
   оно и есть общий свет страницы, а не отдельный приём. */

/* ── свечение секции: тот же кадр, что за героем, но глубоко в фоне ── */
/* секция со свечением обязана его подрезать: пятно шире колонки, и без
   clip оно растягивает документ по горизонтали — на телефоне это заметно сразу */
section:has(>.glowfield),#story,#light,#canvas,#pricing{overflow:hidden}
.glowfield{position:absolute;inset:0 -20% auto;height:min(760px,120%);z-index:0;
  pointer-events:none;overflow:hidden;opacity:.3}
.glowfield img{width:100%;height:100%;object-fit:cover;object-position:78% 46%;
  transform:scale(1.18);filter:blur(24px) contrast(1.26) saturate(1.06) brightness(.96);
  mix-blend-mode:screen}
/* верх и низ пятна гасим отдельной вуалью: блок подрезан границей секции,
   и без неё свечение обрывалось прямой линией — тот самый стык между секциями */
.glowfield::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--void) 0%,rgba(5,4,3,.86) 8%,rgba(5,4,3,.5) 18%,
      rgba(5,4,3,.18) 30%,transparent 44%,transparent 66%,rgba(5,4,3,.42) 84%,
      rgba(5,4,3,.84) 94%,var(--void) 100%),
    radial-gradient(62% 66% at 76% 42%,transparent 6%,rgba(5,4,3,.24) 38%,
      rgba(5,4,3,.56) 58%,rgba(5,4,3,.84) 76%,var(--void) 94%)}
.glowfield{--gmask:radial-gradient(78% 74% at 74% 42%,#000 4%,rgba(0,0,0,.86) 24%,
    rgba(0,0,0,.6) 42%,rgba(0,0,0,.34) 58%,rgba(0,0,0,.14) 74%,transparent 92%);
  -webkit-mask-image:var(--gmask);mask-image:var(--gmask)}
.glowfield.left img{object-position:22% 46%;transform:scaleX(-1)}
.glowfield.left{--gmask:radial-gradient(78% 74% at 24% 44%,#000 4%,rgba(0,0,0,.86) 24%,
    rgba(0,0,0,.6) 42%,rgba(0,0,0,.34) 58%,rgba(0,0,0,.14) 74%,transparent 92%)}
section>.wrap,section>.film{position:relative;z-index:1}

/* ── полоса-фильм: два сегмента, склеенных переливом ────────────────── */
/* Во всю ширину и без рамки: кадр должен вытекать за пределы сетки,
   иначе это ещё одна карточка, а не кино. */
.story{overflow:hidden}
.film{position:relative;margin:44px 0 0;height:clamp(360px,58vw,720px);background:#000;
  overflow:hidden;isolation:isolate}
.film video{width:100%;height:100%;object-fit:cover;background:#000}
.film .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,var(--void),rgba(5,4,3,.58) 7%,rgba(5,4,3,.22) 18%,rgba(5,4,3,0) 40%,rgba(5,4,3,.42) 64%,rgba(5,4,3,.8) 84%,rgba(5,4,3,.97)),
    radial-gradient(112% 78% at 50% 46%,transparent 56%,rgba(5,4,3,.5))}
.film figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  max-width:var(--content);margin:0 auto;padding:0 28px 34px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.film .fcap .lab{margin:0 0 10px;color:var(--brass)}
.film .fcap b{display:block;font-weight:500;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.03em}
.film .fcap span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.film .btn{background:rgba(8,7,6,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:rgba(226,186,116,.45);color:#F0DFBB;flex:0 0 auto}
.film .btn:hover{border-color:rgba(240,220,176,.9);background:rgba(226,186,116,.14)}
@media(max-width:700px){.film figcaption{flex-direction:column;align-items:flex-start;
  padding:0 18px 26px}}

/* ── площадки: где эти материалы живут ──────────────────────────────── */
.channels{margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--line);padding-top:34px;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.channels{grid-template-columns:1fr;gap:26px}
}
.channels .chead h3{font-size:clamp(20px,2.2vw,26px);margin:0 0 12px;max-width:20ch}
.channels .chead p{color:var(--fg-2);font-size:14px;line-height:1.6;margin:0;max-width:52ch}
.channels .chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:var(--pill);padding:9px 16px 9px 13px;font-size:13px;color:var(--fg-2);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  transition:border-color .3s,color .3s,background .3s}
.chip svg{width:17px;height:17px;flex:0 0 17px;color:var(--brass);opacity:.85}
.chip:hover{border-color:rgba(214,178,112,.45);color:var(--fg);
  background:rgba(214,178,112,.07)}
.channels .cnote{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--fg-3);line-height:1.7;max-width:78ch}

/* ── световой движок: то же окно сервиса, но с рабочей панелью ──────── */
.mock.tool{margin-top:40px}
.tool .tbody{display:grid;grid-template-columns:296px minmax(0,1fr);gap:1px;background:var(--line)}
.tool .rail,.tool .stagewrap{background:#070707;padding:20px}
.tool .rail{display:flex;flex-direction:column;gap:14px}
.tool .rail .cap{margin:0}
.tool .src{position:relative;border:1px solid var(--line);overflow:hidden}
.tool .src img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.75) brightness(.8)}
.tool .src .tagv{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;color:var(--fg-2);background:rgba(0,0,0,.66);padding:4px 8px;
  border:1px solid var(--line)}
.tool .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool .opts button{border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  text-align:left;transition:all .25s}
.tool .opts button b{display:block;font-weight:400;font-size:13.5px;color:var(--fg-2)}
.tool .opts button span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--fg-3)}
.tool .opts button.on{border-color:rgba(214,178,112,.5);background:rgba(214,178,112,.08)}
.tool .opts button.on b{color:var(--fg)}
.tool .opts button:hover b{color:var(--fg)}
.meterset{display:flex;flex-direction:column;gap:9px;padding:14px 0;
  border-block:1px solid var(--line)}
.meter{display:grid;grid-template-columns:1fr 66px auto;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg-3)}
.meter i{height:2px;background:var(--line-2);display:block;position:relative}
.meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v,50%);
  background:linear-gradient(90deg,var(--brass-dim),var(--brass))}
.meter b{font-weight:400;color:var(--brass-hi)}
.meter.sm{grid-template-columns:1fr 54px;font-size:9.5px}
.tool .cost{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3)}
.tool .cost b{font-size:15px;color:var(--brass-hi);letter-spacing:0}
.tool .rail .btn{justify-content:center}
.tool .tlog{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  color:var(--fg-3);line-height:1.9}
.tool .tlog i{color:var(--brass);font-style:normal;margin-right:5px}
.tool .stagewrap{display:flex;flex-direction:column;gap:12px}
.tool .stage{position:relative;flex:1;min-height:320px;background:#000;overflow:hidden;
  border:1px solid var(--line)}
.tool .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease)}
.tool .stage img.on{opacity:1}
.tool .srow{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(214,178,112,.4);
  border-radius:var(--pill);padding:6px 13px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass-hi)}
.pill.ghost{border-color:var(--line);color:var(--fg-3)}
@media(max-width:900px){.tool .tbody{grid-template-columns:1fr}
  .tool .stage{min-height:260px;aspect-ratio:16/10}}

/* ── холст: вкладки, аудит слева, живой лог справа ──────────────────── */
.mock .tabs{display:flex;gap:16px;margin-left:22px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mock .tabs b{font-weight:400;color:var(--fg);position:relative}
.mock .tabs b::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:1px;
  background:var(--brass)}
@media(max-width:760px){.mock .tabs{display:none}}
.canvas .main{background:#070707;display:flex;flex-direction:column}
.canvas .side .add{display:block;text-align:center;border:1px dashed var(--line-2);
  border-radius:10px;padding:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);transition:all .25s}
.canvas .side .add:hover{border-color:rgba(214,178,112,.5);color:var(--brass-hi)}
.canvas .side .audit{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.canvas .log{border-top:1px solid var(--line);padding:16px 20px 18px}
.canvas .log .cap{margin:0 0 10px}
.canvas .log .cap b{color:var(--brass)}
.canvas .log ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 24px}
.canvas .log li{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--fg-3);
  display:flex;gap:10px;line-height:1.7}
.canvas .log li i{font-style:normal;color:var(--fg-2);flex:0 0 auto}
.canvas .log li.now{color:var(--brass-hi)}
.canvas .log li.now i{color:var(--brass)}

/* ── работы: крупная карточка сверху, три следом ────────────────────── */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.wgrid{grid-template-columns:1fr}}
.wcard{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#0E0C0A,#080706);display:flex;flex-direction:column;
  box-shadow:0 30px 90px -50px rgba(0,0,0,.95);
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s}
.wcard:hover{transform:translateY(-4px);border-color:rgba(214,178,112,.42);
  box-shadow:0 44px 110px -50px rgba(0,0,0,1)}
.wcard .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#080808}
.wcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wcard:hover .shot img{transform:scale(1.045)}
.wcard .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(6,5,4,.92))}
.wcard .body{padding:20px 22px 24px;margin-top:-46px;position:relative;z-index:2;
  display:flex;flex-direction:column;gap:12px;flex:1}
.wcard .lab{margin:0;color:var(--fg-2)}
.wcard h3{margin:0;font-size:22px;letter-spacing:-.03em}
.wcard .txt{margin:0;color:var(--fg-2);font-size:13.5px;line-height:1.6}
.wcard .nums{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 0;
  border-top:1px solid var(--line);margin-top:auto;padding-top:14px}
.wcard .nums span{border-left:1px solid var(--line);padding-left:14px}
.wcard .nums span:nth-child(2n+1){border-left:0;padding-left:0}
.wcard .nums b{display:block;font-family:var(--mono);font-weight:400;font-size:17px;
  letter-spacing:-.02em;color:var(--fg)}
.wcard .nums i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:4px}
.wcard .open{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-hi);display:inline-flex;gap:7px;align-items:center;
  transition:gap .3s var(--ease)}
.wcard:hover .open{gap:12px}
@media(prefers-reduced-motion:reduce){
  .film video,.tool .stage img,.wcard,.chip{transition:none}
}

/* четвёртая ячейка сетки работ — приглашение, а не пустота */
.wcard.next{background:linear-gradient(150deg,#141009,#090807 62%);
  border-color:rgba(214,178,112,.28);justify-content:flex-end}
.wcard.next .body{margin-top:0;padding:30px 26px 28px;gap:14px}
.wcard.next .lab{color:var(--brass)}
.wcard.next h3{font-size:26px}
.wcard.next::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;
  pointer-events:none;background:radial-gradient(closest-side,rgba(214,178,112,.22),transparent 72%)}
.wcard.next:hover{border-color:rgba(214,178,112,.55)}
.wcard.next .body{justify-content:center;flex:1}
/* Рядом с двумя плотными кейсами приглашение стояло полупустым: под кнопкой
   теперь площадка загрузки и шесть материалов, которые из неё выйдут. */
.wcard.next .drops{margin-top:4px}
.wcard.next .dz{display:block;border:1px dashed rgba(214,178,112,.34);border-radius:12px;
  padding:20px 14px;text-align:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
  background:rgba(214,178,112,.04);transition:border-color .3s,color .3s}
.wcard.next:hover .dz{border-color:rgba(214,178,112,.6);color:var(--fg-2)}
.wcard.next .ghosts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wcard.next .ghosts span{border:1px solid var(--line);border-radius:var(--pill);
  padding:5px 10px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3)}

/* Тёплая подложка под окном сервиса уходит на -50vw в обе стороны и до сих пор
   растягивала документ по горизонтали — на телефоне страница ездила вбок. */
.afterhero{overflow-x:clip}

/* На узком экране двухчастная шапка секции ужимала заголовок в столбик
   по одному слову — ставим их друг под другом. */
@media(max-width:760px){
  .rowhead{flex-direction:column;align-items:flex-start;gap:14px}
  .rowhead .lede{max-width:none!important}
  .film{height:clamp(320px,86vw,520px)}
  .film .fcap span{font-size:9.5px;max-width:36ch;line-height:1.7}
  .film .scrim{background:linear-gradient(180deg,var(--void),rgba(5,4,3,.1) 14%,
    rgba(5,4,3,.18) 32%,rgba(5,4,3,.7) 56%,rgba(5,4,3,.96))}
  .film figcaption{gap:16px}
}

.canvas .side .ledger{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px}
.canvas .side .ledger .cap b{color:var(--brass-hi)}
.canvas .side .ledger>span{display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg-3)}
.canvas .side .ledger>span i{font-style:normal;color:var(--fg-2)}
.canvas .side{display:flex;flex-direction:column}

/* ══ наложения: карточка показывает не фотографию объекта, а сам материал ══
   Плеер, пост, рекламный юнит и слайд рисуются поверх кадра — так по карточке
   видно, что именно выходит из сервиса, а не просто «красивый дом». */
.ov{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--mono)}
.pcard .shot,.canvas .item .im{position:relative}

/* — плеер — */
.ov-play .pbtn{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);background:rgba(10,9,8,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ov-play .pbtn svg{width:15px;height:17px;fill:#fff;margin-left:3px}
.ov-play .q{position:absolute;right:16px;top:16px;font-size:8.5px;letter-spacing:.14em;
  color:#fff;background:rgba(8,7,6,.5);border:1px solid rgba(255,255,255,.28);padding:4px 8px}
.ov-play .prow{position:absolute;left:18px;right:18px;bottom:86px;display:flex;
  align-items:center;gap:10px}
.ov-play .pbar{flex:1;height:2px;background:rgba(255,255,255,.3);position:relative}
.ov-play .pbar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,38%);
  background:var(--brass-hi)}
.ov-play .pbar::before{content:"";position:absolute;top:50%;left:var(--p,38%);width:8px;height:8px;
  border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.ov-play .t{font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.82)}

/* — пост: аватар, подпись, карусель и субтитр ролика — */
.ov-social .head{position:absolute;left:16px;right:16px;top:16px;display:flex;align-items:center;gap:9px}
.ov-social .ava{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:linear-gradient(140deg,#EBCF9A,#8A7654)}
.ov-social .who{font-size:10px;letter-spacing:.06em;color:#fff}
.ov-social .who i{display:block;font-style:normal;font-size:8.5px;margin-top:3px;
  color:rgba(255,255,255,.62)}
.ov-social .dots{margin-left:auto;display:flex;gap:5px}
.ov-social .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4);display:block}
.ov-social .dots i.on{background:#fff}
.ov-social .sub{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);
  background:rgba(8,7,6,.74);padding:6px 12px;font-size:10px;color:#fff;white-space:nowrap;
  letter-spacing:.01em}
.ov-social .cap{position:absolute;left:16px;right:16px;bottom:82px;margin:0;
  font-family:var(--sans);font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.94)}
.ov-social .cap i{font-style:normal;color:#8FAFD6}

/* — рекламный юнит: рамка формата, цена, кнопка — */
.ov-ad .frame{position:absolute;inset:16px 16px 74px;border:1px solid rgba(255,255,255,.3)}
.ov-ad .fmt{position:absolute;left:26px;top:26px;font-size:8.5px;letter-spacing:.13em;color:#fff;
  background:rgba(8,7,6,.55);border:1px solid rgba(255,255,255,.24);padding:4px 8px}
.ov-ad .box{position:absolute;left:26px;right:26px;bottom:84px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:12px}
.ov-ad .box b{display:block;font-family:var(--sans);font-size:20px;font-weight:600;
  letter-spacing:-.02em;color:#fff}
.ov-ad .box>span>span{display:block;margin-top:5px;font-size:8.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.72)}
.ov-ad .cta{flex:0 0 auto;border-radius:var(--pill);padding:8px 14px;font-family:var(--sans);
  font-size:11px;font-weight:500;color:#17140F;
  background:linear-gradient(180deg,#EBCF9A,#D3AC6B)}

/* — слайд презентации: рамка, счётчик, лента миниатюр — */
.ov-deck .plate{position:absolute;inset:14px 14px 70px;border:1px solid rgba(255,255,255,.26)}
.ov-deck .num{position:absolute;right:24px;top:24px;font-size:9px;letter-spacing:.14em;color:#fff}
.ov-deck .ttl{position:absolute;left:26px;bottom:116px;font-family:var(--sans);color:#fff}
.ov-deck .ttl b{display:block;font-size:21px;font-weight:600;letter-spacing:-.025em}
.ov-deck .ttl span{display:block;margin-top:6px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.14em;color:rgba(255,255,255,.66)}
.ov-deck .rail{position:absolute;left:26px;bottom:84px;display:flex;gap:6px}
.ov-deck .rail i{width:26px;height:16px;display:block;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08)}
.ov-deck .rail i.on{border-color:var(--brass);background:rgba(214,178,112,.3)}

/* — миниатюры в холсте: тот же приём, но без текста — */
.ov.mini .cap,.ov.mini .ttl,.ov.mini .fmt,.ov.mini .q,.ov.mini .who i{display:none}
.ov.mini .pbtn{width:34px;height:34px;top:46%}
.ov.mini .pbtn svg{width:9px;height:10px;margin-left:2px}
.ov.mini .prow{left:10px;right:10px;bottom:10px;gap:7px}
.ov.mini .t{font-size:7.5px}
.ov.mini .head{left:10px;right:10px;top:10px;gap:6px}
.ov.mini .ava{width:18px;height:18px;flex:0 0 18px}
.ov.mini .who{font-size:8.5px}
.ov.mini .dots i{width:4px;height:4px}
.ov.mini .sub{bottom:12px;font-size:8px;padding:4px 9px;max-width:88%;overflow:hidden;
  text-overflow:ellipsis}
.ov.mini .frame,.ov.mini .plate{inset:10px}
.ov.mini .box{left:16px;right:16px;bottom:16px;align-items:center}
.ov.mini .box b{font-size:14px}
.ov.mini .cta{font-size:9px;padding:5px 10px}
.ov.mini .num{right:16px;top:16px;font-size:7.5px}
.ov.mini .rail{left:16px;bottom:16px;gap:4px}
.ov.mini .rail i{width:16px;height:10px}
@media(max-width:640px){
  .ov-social .sub{bottom:120px;font-size:9px}
  .ov-deck .ttl{bottom:108px}
}

/* Наложение живёт поверх фотографии, а она бывает светлой — без собственной
   вуали подпись поста и заголовок слайда просто пропадают в небе. */
.ov::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,5,4,.55),rgba(6,5,4,.05) 26%,rgba(6,5,4,0) 44%,
    rgba(6,5,4,.42) 72%,rgba(6,5,4,.86))}
.ov-play::before{background:linear-gradient(180deg,rgba(6,5,4,.38),rgba(6,5,4,0) 30%,
  rgba(6,5,4,0) 58%,rgba(6,5,4,.55) 84%,rgba(6,5,4,.8))}
.ov>*{position:absolute;z-index:2}
.ov .frame,.ov .plate{z-index:1}

/* Кадр под наложением приглушаем: иначе белый текст поста и заголовок слайда
   тонут в закатном небе. Фотография остаётся читаемой, интерфейс — главным. */
.pcard .shot:has(.ov) img,.canvas .item .im:has(.ov) img{filter:brightness(.74) saturate(.94)}
.ov::before{background:linear-gradient(180deg,rgba(6,5,4,.62),rgba(6,5,4,.24) 28%,
  rgba(6,5,4,.3) 52%,rgba(6,5,4,.6) 74%,rgba(6,5,4,.9))}
.ov-play::before{background:linear-gradient(180deg,rgba(6,5,4,.42),rgba(6,5,4,.06) 30%,
  rgba(6,5,4,.12) 56%,rgba(6,5,4,.58) 82%,rgba(6,5,4,.86))}
.ov-social .who i{color:rgba(255,255,255,.78)}
.ov-deck .plate{border-color:rgba(255,255,255,.42)}
.ov-deck .ttl b{font-size:19px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.ov-social .cap{text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* подпись карточки заезжает на кадр — она должна быть выше наложения */
.pcard .body{z-index:5}


/* ── запись экрана рабочего пространства в разделе работ ────────────────
   Ролик собран из настоящего интерфейса (storyboard/film/build.py), поэтому
   играет молча и без подписей: он объясняет продукт движением, а не текстом. */
.buildfilm{position:relative;margin:44px 0 0;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#000}
.buildfilm video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.buildfilm::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px 10px rgba(5,4,3,.55)}
.buildfilm figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(18px,2.4vw,28px);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  background:linear-gradient(transparent,rgba(5,4,3,.86))}
.buildfilm figcaption .lab{margin:0;color:var(--brass)}
.buildfilm figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2)}
@media(max-width:700px){.buildfilm figcaption{padding-bottom:14px}}


/* ── первый экран: свет, переливы и полоса вертикальных роликов ─────────
   Подложка героя раньше обрывалась вертикальным краем — теперь свет собран
   одним мягким пятном, а поверх идёт общий градиент, который тянется до
   окна сервиса и не даёт стыка. */
.hero .plate img{opacity:.92;filter:saturate(.96)}
.hero .beam::before{opacity:.85}

/* знак ведёт серебристым бликом, обещание — золотым: оба перелива идут по
   тексту, а не по плашке, поэтому фон остаётся чистым */
.hero.center h1.markname{color:transparent;
  background:linear-gradient(100deg,#F7F1E6 0%,#F7F1E6 32%,#FFFFFF 44%,#CFCAC2 52%,#F7F1E6 64%,#F7F1E6 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  animation:sheen 7.5s ease-in-out infinite}
.hero.center .claim .gold{color:transparent;
  background:linear-gradient(100deg,#C79E5E 0%,#EBCF9A 26%,#FFF0CE 42%,#D9B87C 58%,#C79E5E 82%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  animation:sheen 6s ease-in-out infinite .8s}
@keyframes sheen{0%,8%{background-position:110% 50%}58%,100%{background-position:-10% 50%}}
@media(prefers-reduced-motion:reduce){
  .hero.center h1.markname,.hero.center .claim .gold{animation:none}
}

/* три вертикальных ролика из соцпакета — блок в секции Products */
.reelband{margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--line);padding-top:34px;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.reelband{grid-template-columns:1fr;gap:26px}}
.reelband .rhead h3{font-size:clamp(20px,2.2vw,26px);margin:0 0 12px;max-width:20ch}
.reelband .rhead p{color:var(--fg-2);font-size:14px;line-height:1.6;margin:0;max-width:52ch}
.reelband .rhead .rnote{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.reelrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  max-width:560px;margin:0}
.reelrow figure{margin:0;position:relative;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:#0A0A0A;box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),border-color .35s}
.reelrow figure:hover{transform:translateY(-4px);border-color:rgba(214,178,112,.42)}
.reelrow video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#000}
.reelrow figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;
  background:linear-gradient(transparent,rgba(5,4,3,.88));text-align:left}
.reelrow figcaption b{display:block;font-weight:400;font-size:13px;letter-spacing:-.01em;color:#F4EFE6}
.reelrow figcaption span{display:block;margin-top:3px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
@media(max-width:560px){.reelrow{max-width:420px;gap:10px}}


/* ── строка ассистента в окне воркспейса ────────────────────────────────
   Раньше секция была просто витриной файлов; ассистент показывает, что с
   этими файлами можно разговаривать, а не только скачивать их. */
.canvas .assistant{display:flex;align-items:center;gap:18px;padding:18px 20px;
  border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(214,178,112,.06),transparent 60%)}
.canvas .assistant .mic{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;
  place-items:center;border:1px solid rgba(214,178,112,.45);background:rgba(214,178,112,.08)}
.canvas .assistant .mic svg{width:17px;height:17px;fill:var(--brass-hi)}
.canvas .assistant .talk{min-width:0;flex:1}
.canvas .assistant .ask{margin:0;font-size:15px;letter-spacing:-.01em;color:var(--fg)}
.canvas .assistant .ans{margin:5px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--fg-3)}
.canvas .assistant .wave{display:flex;align-items:center;gap:3px;height:26px}
.canvas .assistant .wave i{width:2px;background:var(--brass);opacity:.55;display:block;
  animation:wv 1.4s ease-in-out infinite}
.canvas .assistant .wave i:nth-child(2n){animation-duration:1.1s}
.canvas .assistant .wave i:nth-child(3n){animation-duration:1.7s;opacity:.4}
.canvas .assistant .wave i:nth-child(1){height:8px}   .canvas .assistant .wave i:nth-child(2){height:16px}
.canvas .assistant .wave i:nth-child(3){height:22px}  .canvas .assistant .wave i:nth-child(4){height:12px}
.canvas .assistant .wave i:nth-child(5){height:26px}  .canvas .assistant .wave i:nth-child(6){height:9px}
.canvas .assistant .wave i:nth-child(7){height:18px}  .canvas .assistant .wave i:nth-child(8){height:24px}
.canvas .assistant .wave i:nth-child(9){height:11px}  .canvas .assistant .wave i:nth-child(10){height:20px}
.canvas .assistant .wave i:nth-child(11){height:14px} .canvas .assistant .wave i:nth-child(12){height:7px}
@keyframes wv{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.canvas .assistant .state{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-hi);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.canvas .assistant .wave i{animation:none}}
@media(max-width:760px){
  .canvas .assistant{flex-wrap:wrap;gap:12px}
  .canvas .assistant .wave,.canvas .assistant .state{display:none}
}

/* ── чем платят: карты и PayPal через Stripe ────────────────────────── */
/* Блок платежей встал по центру полосы (просьба Danny 08.09): прижатый
   влево он читался как служебная сноска под тарифами. */
.pays{margin-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--line);padding-top:26px;
  text-align:center}
.pays .lab{margin:0 0 16px}
.paylogos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pay{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;
  border:1px solid var(--line);border-radius:10px;color:var(--fg-2);font-size:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .3s,color .3s,background .3s}
.pay:hover{border-color:rgba(214,178,112,.42);color:var(--fg);background:rgba(214,178,112,.06)}
.pay.visa{font-weight:600;font-style:italic;letter-spacing:.06em;font-size:15px}
.pay.mc{gap:0;padding-left:13px;letter-spacing:-.01em}
.pay.mc i{width:15px;height:15px;border-radius:50%;display:block;mix-blend-mode:screen}
.pay.mc .d1{background:rgba(226,142,110,.78)}
.pay.mc .d2{background:rgba(232,186,116,.78);margin-left:-7px;margin-right:9px}
.pay.pp{gap:0;letter-spacing:-.005em}
.pay.pp b{font-weight:600;color:var(--fg)}
.pay.st{font-weight:600;letter-spacing:-.015em}
.pnote{margin:18px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--fg-3);line-height:1.7;max-width:72ch}
@media(max-width:520px){.pay{height:34px;padding:0 13px;font-size:13px}}

/* ── слой 09.07: плотность вместо пустот ─────────────────────────────── */

/* витрина: герой в две колонки, справа контактный лист объектов */
.ptop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,5vw,66px);align-items:center}
.ptop h1{max-width:16ch}
.ptop .lede{max-width:52ch}
.sheet{border:1px solid var(--line);background:var(--panel)}
.sheet .shead{display:flex;justify-content:space-between;gap:12px;margin:0;
  padding:11px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-3)}
.stiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.stiles a{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;
  background:var(--panel)}
/* объектов всего два — плитки вытягиваются, иначе лист висит узкой полоской
   рядом с высоким заголовком */
.stiles.duo a{aspect-ratio:3/4}
.stiles img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),opacity .5s var(--ease);opacity:.9}
.stiles a:hover img{transform:scale(1.05);opacity:1}
.stiles .cap{position:absolute;inset:auto 0 0 0;padding:22px 11px 9px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);background:linear-gradient(transparent,rgba(5,4,3,.86))}
.stiles .cap b{font-weight:400;color:#F5EFE6;letter-spacing:.06em}
.stiles .cap i{font-style:normal;color:var(--brass)}
@media(max-width:960px){.ptop{grid-template-columns:1fr}
  .sheet{margin-top:30px}}

/* На узком экране правый столбец характеристик уезжал за край карточки:
   nowrap держал длинные значения в одну строку. Даём им переноситься. */
@media(max-width:560px){
  table.spec{font-size:13px}
  table.spec td:last-child,table.spec th:last-child{white-space:normal;
    word-break:break-word;padding-left:12px}
}
/* подпись плитки: длинное имя не должно выдавливать счётчик материалов */
.stiles .cap{align-items:center}
.stiles .cap b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stiles .cap i{flex:none}

/* Кадр раздела, поднятый в правую колонку героя: он и закрывает пустоту,
   и держит ту же пропорцию, что фото ниже по странице. */
.ptop .scene.side{margin:0;border-radius:14px;align-self:stretch;display:flex;
  flex-direction:column}
.ptop .scene.side img{flex:1;min-height:0;object-fit:cover}
@media(max-width:960px){.ptop .scene.side{margin-top:30px}}

/* ══ кадры интерфейса вместо самодельных окон (правка 08.09) ══════════ */

/* герой ведёт фотографией объекта: плита остаётся, но кадр в ней резкий,
   а не расфокусированное световое пятно — свет даёт сам закат в снимке. */
.hero .plate.photo{-webkit-mask-image:none;mask-image:none}
.hero .plate.photo img{transform:scale(1.04);filter:saturate(1.04) contrast(1.03);
  mix-blend-mode:normal;object-position:50% 44%}
.hero .plate.photo::after{background:
  radial-gradient(72% 50% at 50% 42%,rgba(5,4,3,.46),rgba(5,4,3,.2) 62%,transparent 88%),
  linear-gradient(180deg,rgba(5,4,3,.74) 0%,rgba(5,4,3,.26) 15%,rgba(5,4,3,.2) 38%,
    rgba(5,4,3,.46) 58%,rgba(5,4,3,.8) 72%,rgba(5,4,3,.97) 84%,var(--void) 92%)}
/* лучевое пятно приглушаем: в кадре уже есть своё солнце */
.hero.shot .beam::before{opacity:.34}
.hero.shot .beam::after{background:
  linear-gradient(180deg,rgba(0,0,0,.3),transparent 20%,transparent 58%,rgba(0,0,0,.55) 80%,#000 94%)}
.hero.shot .badge{text-shadow:none}

/* панель интерфейса картинкой: у кадра свой прозрачный фон и своё свечение,
   поэтому ни рамки, ни подложки под него не нужно. */
.panel{margin:0;position:relative}
.panel img{display:block;width:100%;height:auto}
@media(min-width:1100px){.panel img{transform:scale(1.015)}}

/* раздел на снимке: панель лежит на затемнённом кадре объекта */
.shotsec{position:relative;overflow:hidden}
.shotsec .shotbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.shotsec .shotbg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:blur(2px) saturate(.86) brightness(.4)}
.shotsec .shotbg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(116% 88% at 50% 46%,rgba(5,4,3,.68),rgba(5,4,3,.9) 58%,rgba(5,4,3,.98) 84%),
  linear-gradient(180deg,var(--void),transparent 16%,transparent 82%,var(--void))}
.shotsec>.wrap{position:relative;z-index:1}
/* вертикальные пометки по краям — как в студийном рендере раздела */
.shotsec .mark{position:absolute;z-index:1;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;line-height:2;color:var(--fg-3)}
.shotsec .mark.tr{right:26px;top:clamp(64px,7vw,104px)}
.shotsec .mark.bl{left:26px;bottom:clamp(64px,7vw,104px);padding-top:14px;
  border-top:1px solid var(--brass-dim)}
@media(max-width:1440px){.shotsec .mark{display:none}}

/* у фильма бренда есть собственные титры — подпись раздела уходит под кадр,
   иначе две надписи стоят друг на друге в нижней трети */
.buildfilm:has(figcaption.under)::after{background:none}
.buildfilm figcaption.under{position:static;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 16px;padding:14px 18px;border-top:1px solid var(--line);background:rgba(6,5,4,.72)}

/* золотой акцент в заголовках разделов — как в студийных рендерах */
h2 .gold{color:transparent;font-weight:500;
  background:linear-gradient(96deg,#F0DCB4,#D6B270 46%,#EFE0BE);
  -webkit-background-clip:text;background-clip:text}

/* на телефоне кадр интерфейса не сжимаем до нечитаемого — даём его пролистать
   вбок в натуральном масштабе, как в галерее */
@media(max-width:760px){
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .panel::-webkit-scrollbar{display:none}
  .panel img{width:760px;max-width:none}
}
/* на узком экране кадр обрезается по вертикали и текст ложится на самый
   светлый кусок заката — добавляем плотности под подзаголовок */
@media(max-width:760px){
  .hero .plate.photo::after{background:
    radial-gradient(96% 46% at 50% 46%,rgba(5,4,3,.6),rgba(5,4,3,.34) 66%,rgba(5,4,3,.2) 88%),
    linear-gradient(180deg,rgba(5,4,3,.8) 0%,rgba(5,4,3,.4) 14%,rgba(5,4,3,.36) 40%,
      rgba(5,4,3,.6) 62%,rgba(5,4,3,.88) 80%,var(--void) 92%)}
}

/* ══ герой по студийному кадру: свет ярче, знак — тёплый блик (08.09) ══ */
.hero.shot .plate.photo img{opacity:1;filter:contrast(1.04) brightness(1.06)}
/* затемнение только там, где лежит текст и где кадр уходит в окно сервиса */
.hero.shot .plate.photo::after{background:
  radial-gradient(70% 46% at 50% 40%,rgba(4,6,10,.5),rgba(4,6,10,.24) 58%,transparent 88%),
  linear-gradient(180deg,rgba(4,6,10,.44) 0%,rgba(4,6,10,.16) 14%,rgba(5,4,3,.1) 34%,
    rgba(5,4,3,.32) 54%,rgba(5,4,3,.72) 66%,rgba(5,4,3,.94) 76%,var(--void) 84%)}
.hero.shot .beam::before{opacity:.08}

/* знак: белый верх, латунный низ и косой блик, идущий по буквам.
   Свечение вынесено в drop-shadow — тень от текста, а не от плашки. */
.hero.center.shot h1.markname{
  font-size:clamp(36px,6.8vw,94px);letter-spacing:-.045em;
  background:
    linear-gradient(101deg,transparent 20%,rgba(255,255,255,.95) 31%,transparent 43%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 52%,#FFFAF0 68%,#F7E7C6 88%,#E8CFA0 100%);
  background-size:280% 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(10,6,2,.55)) drop-shadow(0 0 22px rgba(255,206,140,.22));
  animation:sheen 7.5s ease-in-out infinite}
.hero.center.shot .claim{color:#F2ECE3;text-shadow:0 1px 2px rgba(6,4,2,.45)}
.hero.center.shot .sub{color:#B9B2A8;font-weight:400;text-shadow:0 1px 2px rgba(6,4,2,.5)}
.hero.shot .badge{background:rgba(8,6,4,.42);backdrop-filter:blur(8px)}

/* кадр показываем целиком до линии бассейна — как в студийном макете */
.hero.shot .plate.photo img{object-position:50% 44%}

/* ── форматы и площадки отдельной секцией перед тарифами (08.09) ────── */
/* блоки переехали из Products вместе со своими верхними линиями — в начале
   секции такая линия дублирует границу самой секции и оставляет провал */
#formats{padding-top:clamp(26px,3.4vw,48px)}
#formats>.wrap>.reelband:first-child{margin-top:0;border-top:0;padding-top:0}

/* герой снова во весь экран: студийный макет строит кадр на пропорции 3:2,
   а на 84svh от снимка оставалась только полоса моря — бассейн уходил под срез */
.hero.center.shot{min-height:100svh;padding:112px 0 196px}
.hero.center.shot .claim .gold{text-shadow:none}
@media(max-width:760px){.hero.center.shot{min-height:96svh;padding:100px 0 190px}}
/* зерно героя лежало поверх текста (z-index 3) и через overlay сажало белизну
   знака до 231 — уводим его под колонку с текстом */
.hero.shot::after{z-index:1}
/* «Powered by AI.» на закатном небе: латунь берём глубже, иначе строка
   растворяется в оранжевом */
.hero.center.shot .claim .gold{
  background:linear-gradient(100deg,#C08F45 0%,#E9C589 26%,#FFF1D2 42%,#D8AC63 58%,#BE8C42 82%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(10,6,2,.5))}

/* ── доводка первого экрана по замечаниям Danny (08.09, ночь) ───────── */
/* знак крупнее, обещание — одной строкой */
.hero.center.shot h1.markname{font-size:clamp(38px,7.8vw,108px)}
.hero.center.shot .claim{max-width:none}
@media(max-width:900px){.hero.center.shot .claim{max-width:26ch}}
/* окно сервиса выглядывает выше: кадр героя и так уходит в чёрное */
.afterhero{margin-top:-232px!important}
@media(max-width:760px){.afterhero{margin-top:-120px!important}}

/* низ героя обязан прийти в тот же чёрный, что и следующая секция: кадр
   обрезается кромкой .hero, и любая недотяжка читается как шов по всей ширине */
.hero.shot .beam::before{opacity:0}
.hero.shot .beam::after{background:
  linear-gradient(180deg,rgba(0,0,0,.3),transparent 20%,transparent 52%,
    rgba(0,0,0,.5) 70%,var(--void) 84%)}

/* ══════════════════════════════════════════════════════════════════════
   Правка 25.09: финал на фото. Прежний финал — текст и две кнопки на
   чёрном — читался пустым. Референсы cta.gallery: кадр объекта во весь
   блок, слева призыв, справа стеклянная карточка, которая показывает сам
   аудит (шесть материалов, пробелы, цена добора). */
.final2{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(620px,78vh,800px);display:flex;align-items:center;
  padding:clamp(72px,9vw,120px) 0}
.final2>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 50%;z-index:-2}
.final2>.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,4,3,.94) 0%,rgba(5,4,3,.78) 34%,rgba(5,4,3,.22) 64%,rgba(5,4,3,.38) 100%),
  linear-gradient(180deg,var(--void) 0%,transparent 16%,transparent 78%,var(--void) 100%)}
.final2>.wrap{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(32px,6vw,96px);align-items:center}
.final2 .copy .badge{margin-bottom:22px}
.final2 h2{font-size:clamp(32px,4vw,54px);line-height:1.04;margin:0 0 18px}
.final2 .lede{max-width:44ch}
.final2 .btns{margin-top:30px}
.final2 .ticks{display:flex;gap:22px;margin:22px 0 0;font:11px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.final2 .ticks span::before{content:"✓";color:var(--brass);margin-right:8px}

.final2 .audit{border-radius:18px;padding:22px 22px 18px;
  background:rgba(12,10,8,.46);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.final2 .audit header{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.final2 .audit header .lab{margin:0}
.final2 .audit header b{font-weight:500;font-size:14px}
.final2 .audit ul{list-style:none;margin:0;padding:0}
.final2 .audit li{display:grid;grid-template-columns:112px 1fr 38px;gap:12px;align-items:center;
  padding:9px 0;font-size:13px;color:var(--fg-2)}
.final2 .audit li i{height:3px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.final2 .audit li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);
  border-radius:inherit;background:linear-gradient(90deg,var(--brass-dim),var(--brass-hi))}
.final2 .audit li b{font:11px/1 var(--mono);text-align:right;color:var(--fg)}
.final2 .audit footer{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:10px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.final2 .audit footer small{display:block;margin-top:4px;font-size:12px;color:var(--fg-3)}
.final2 .audit footer b{font:500 13px/1 var(--mono);color:var(--brass-hi);white-space:nowrap}
/* полосы дорастают, когда карточка въезжает в кадр */
.final2 .audit.rv li i::after{transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease)}
.final2 .audit.rv.in li i::after{transform:none}
.final2 .audit li:nth-child(2) i::after{transition-delay:.08s}
.final2 .audit li:nth-child(3) i::after{transition-delay:.16s}
.final2 .audit li:nth-child(4) i::after{transition-delay:.24s}
.final2 .audit li:nth-child(5) i::after{transition-delay:.32s}
.final2 .audit li:nth-child(6) i::after{transition-delay:.4s}

@media(max-width:900px){
  .final2{min-height:0}
  .final2>.wrap{grid-template-columns:1fr}
  .final2>.bg{object-position:62% 30%}
  .final2>.veil{background:linear-gradient(180deg,var(--void) 0%,rgba(5,4,3,.86) 18%,
    rgba(5,4,3,.72) 50%,rgba(5,4,3,.5) 72%,var(--void) 100%)}
  .final2 .audit{max-width:440px}
}
@media(max-width:480px){
  .final2 .audit li{grid-template-columns:96px 1fr 34px}
  .final2 .ticks{gap:14px}
}

/* ══════════════════════════════════════════════════════════════════════
   Правка 26.09: тарифы на фото, тем же приёмом, что финал. Референсы
   unsection (pricing): карточки на цветном поле, условия плитками вместо
   моно-сноски, заголовок слева / пояснение справа. Вилла в синий час
   просвечивает сквозь стекло карточек; списания и оплата — одна панель. */
#pricing.price2{position:relative;isolation:isolate}
.price2>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:30% 40%;z-index:-2}
.price2>.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,var(--void) 0%,rgba(5,4,3,.55) 12%,rgba(5,4,3,.42) 34%,
    rgba(5,4,3,.78) 62%,rgba(5,4,3,.92) 82%,var(--void) 100%),
  linear-gradient(90deg,rgba(5,4,3,.35),transparent 40%,rgba(5,4,3,.35))}
.price2 .glass,.price2 .plan,.price2 .xt,.price2 .ops{
  background:rgba(12,10,8,.5);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07)}
.price2 .plan{border-radius:18px}
.price2 .plan.best{background:linear-gradient(180deg,rgba(40,30,16,.62),rgba(14,11,8,.6));
  border-color:rgba(214,178,112,.5);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(214,178,112,.12),
    inset 0 1px 0 rgba(255,235,200,.16)}
.price2 .plan .inc{border-color:rgba(255,255,255,.12)}
.price2 .plan li{color:#B9B2A8}

/* условия: три плитки в ряд */
.price2 .extras{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.price2 .xt{border-radius:16px;padding:20px 22px 22px;display:grid;
  grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:16px;row-gap:10px}
.price2 .xt .lab{margin:0;color:var(--brass)}
.price2 .xt b{grid-row:1/3;grid-column:2;align-self:start;font-weight:600;
  font-size:26px;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.price2 .xt span{font-size:13px;line-height:1.5;color:var(--fg-2)}

/* списания + оплата */
.price2 .ops{margin-top:16px;border-radius:18px;padding:22px 26px 24px;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:40px;align-items:start}
.price2 .ops header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.price2 .ops header .lab{margin:0}
.price2 .ops header span{font:12px/1 var(--mono);color:var(--brass-hi)}
.price2 .ops table.spec tr:last-child td{border-bottom:0}
.price2 .ops table.spec td{border-color:rgba(255,255,255,.1)}
.price2 .ops .pays{margin:0;padding:18px 0 0 32px;border-top:0;
  border-left:1px solid rgba(255,255,255,.1);text-align:left;align-self:stretch}
.price2 .ops .paylogos{justify-content:flex-start}
.price2 .ops .pays .pnote{margin:16px 0 0}

@media(max-width:900px){
  .price2 .extras{grid-template-columns:1fr}
  .price2 .ops{grid-template-columns:1fr}
  .price2 .ops .pays{padding:20px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .price2>.veil{background:linear-gradient(180deg,var(--void) 0%,rgba(5,4,3,.6) 10%,
    rgba(5,4,3,.72) 40%,rgba(5,4,3,.9) 75%,var(--void) 100%)}
}
.price2 .ops .pay{height:34px;padding:0 12px;font-size:13px}
.price2 .ops .paylogos{gap:8px}
.price2 .xt .packs{display:grid;grid-template-columns:1fr auto;gap:5px 16px;
  font:12px/1.35 var(--mono);color:var(--fg-2)}
.price2 .xt .packs i{font-style:normal;color:var(--fg);text-align:right}
.price2 .xt .packs em{font-style:normal}
.price2 .xt .packs small{grid-column:1/-1;margin-top:6px;font:12px/1.45 var(--sans);color:var(--fg-3)}
.price2 .ops header{flex-wrap:wrap;gap:6px 16px}
.price2 .xt:has(.packs) b{grid-row:1}
.price2 .xt .packs{grid-column:1/-1}
.price2 .xt .packs em,.price2 .xt .packs i{white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════
   Правка 27.09: первый экран — фильм Casa Pacifica. Кадр сменил статичный
   снимок: 42 с петлёй (конец растворяется в начало, ночь → день), по низу
   лента глав объекта. При прокрутке кадр медленно наезжает и гаснет в чёрный,
   текст уходит вверх, а окно сервиса всплывает из темноты. --fp = 0…1 ставит
   скрипт по прокрутке героя. */
.filmhero{--fp:0;background:var(--void)}
.hero.center.shot.filmhero{min-height:100svh;padding:112px 0 250px}
.filmhero .fh-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0b0907}
.filmhero .fh-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.03 + var(--fp)*.09));transform-origin:50% 60%;will-change:transform;
  opacity:0;transition:opacity 1.4s var(--ease)}
.filmhero .fh-media video.on{opacity:1}
.filmhero .fh-media .fh-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03)}
/* гасим кадр прокруткой отдельным слоем: фильтр на видео дороже */
.filmhero .fh-media::after{content:"";position:absolute;inset:0;background:var(--void);
  opacity:calc(var(--fp)*.78)}
/* тень только под текстом и по краям — середина кадра остаётся живой */
.filmhero .fh-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(58% 40% at 50% 42%,rgba(5,4,3,.5),rgba(5,4,3,.22) 62%,transparent 100%),
  linear-gradient(180deg,rgba(5,4,3,.62) 0%,rgba(5,4,3,.14) 16%,rgba(5,4,3,.06) 42%,
    rgba(5,4,3,.2) 60%,rgba(5,4,3,.66) 78%,rgba(5,4,3,.94) 92%,var(--void) 100%)}
.filmhero>.wrap{opacity:calc(1 - var(--fp)*1.5);transform:translateY(calc(var(--fp)*-70px))}

/* лента глав: подпись объекта слева, семь сцен с полосой хода справа */
.fh-rail{position:absolute;left:0;right:0;bottom:118px;z-index:4;
  opacity:calc(1 - var(--fp)*2.2)}
.fh-rail .wrap{display:flex;align-items:flex-end;gap:clamp(20px,3vw,44px);max-width:var(--content)}
.fh-case{flex:0 0 auto;display:flex;text-align:left;align-items:center;gap:14px;text-decoration:none;color:#F2ECE3;
  padding:10px 18px 10px 10px;border-radius:var(--pill);border:1px solid rgba(231,218,193,.22);
  background:rgba(12,10,8,.38);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);transition:border-color .4s,background .4s}
.fh-case:hover{border-color:rgba(231,218,193,.5);background:rgba(12,10,8,.55)}
.fh-case .pl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#EBCF9A,#C79E5E);color:#1a1208}
.fh-case .pl svg{width:12px;height:12px;margin-left:2px}
.fh-case b{display:block;font-weight:500;font-size:14.5px;letter-spacing:-.01em;line-height:1.2}
.fh-case small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(231,218,193,.7);margin-top:3px}
.fh-ch{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.fh-ch button{all:unset;cursor:pointer;display:block;width:100%;padding-top:12px;position:relative}
.fh-ch .tr{display:block;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.fh-ch .tr i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C79E5E,#F3DDB0)}
.fh-ch .nm{display:flex;gap:8px;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(242,236,227,.5);transition:color .5s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-ch .nm em{font-style:normal;color:rgba(191,169,130,.7)}
.fh-ch li.on .nm,.fh-ch button:hover .nm{color:#F2ECE3}
.fh-ch button:focus-visible .tr{outline:1px solid var(--brass);outline-offset:4px}

/* окно сервиса наезжает меньше: первый экран отдаём фильму */
.filmhero+.afterhero{margin-top:-96px!important}

@media(max-width:980px){.fh-ch .nm span{display:none}.fh-ch{gap:6px}}
@media(max-width:760px){
  .hero.center.shot.filmhero{min-height:100svh;padding:96px 0 220px}
  .fh-rail{bottom:92px}
  .fh-rail .wrap{flex-direction:column;align-items:stretch;gap:16px}
  .fh-case{align-self:center}
  .fh-ch .nm{display:none}
  .filmhero+.afterhero{margin-top:-64px!important}}
@media(prefers-reduced-motion:reduce){
  .filmhero .fh-media video{transition:none;transform:none}
  .filmhero>.wrap,.fh-rail{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════════════
   Правка 28.09: «одна загрузка — весь запуск» вместо окна дашборда.
   Окно стояло на своей коричневой плашке, и после фильма шёл шов по цвету.
   Теперь сразу за героем — та же вилла в сумерках (кадр растворён по краям
   в чёрный), вокруг семь стеклянных панелей материалов с латунными нитями к
   дому. Координаты панелей — в % сцены 2:1, размеры — в cqw сцены. */
.launch{position:relative;margin-top:-110px;padding:0 0 clamp(56px,7vw,110px);z-index:3}
.lhead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(8px,1.4vw,22px)}
.lhead h2{margin:0;font-size:clamp(32px,4.4vw,60px);line-height:1.04;letter-spacing:-.035em}
.lhead .lede{max-width:44ch;font-size:15px;margin:0}
.lstage{position:relative;max-width:1680px;margin:0 auto;aspect-ratio:2/1;container-type:inline-size}
.lstage .bg img{position:absolute;left:8%;width:84%;top:3.1%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 76%,transparent 99%),
    linear-gradient(180deg,transparent 0,#000 16%,#000 70%,transparent 97%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 76%,transparent 99%),
    linear-gradient(180deg,transparent 0,#000 16%,#000 70%,transparent 97%);
  mask-composite:intersect}
.lstage .links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lstage .links path{fill:none;stroke:rgba(231,206,154,.75);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1 0;filter:drop-shadow(0 0 3px rgba(240,200,130,.8));
  opacity:0;transition:opacity 1s var(--ease) var(--d)}
.lstage .links circle{fill:#FFE7B8;filter:drop-shadow(0 0 4px rgba(255,210,140,1));opacity:0;
  transition:opacity .8s var(--ease) var(--d)}
.lstage.in .links path{opacity:.85}.lstage.in .links circle{opacity:1;animation:lpulse 2.8s ease-in-out infinite var(--d)}
@keyframes lpulse{50%{opacity:.35}}

.lc{position:absolute;left:var(--x);top:var(--y);width:var(--w);display:flex;gap:1cqw;align-items:flex-start;
  padding:.75cqw;border-radius:1.1cqw;color:#F2ECE3;
  background:linear-gradient(160deg,rgba(40,33,26,.52),rgba(14,11,9,.62));
  border:1px solid rgba(231,206,154,.26);box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,210,.12);
  backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) var(--d),transform .9s var(--ease) var(--d),border-color .4s}
.lstage.in .lc{opacity:1;transform:none}
.lc:hover{border-color:rgba(231,206,154,.6)}
.lc .th{position:relative;flex:0 0 42%;aspect-ratio:16/10;border-radius:.6cqw;overflow:hidden;background:#0b0907}
.lc .th img{width:100%;height:100%;object-fit:cover;display:block}
.lc .th.tall{flex-basis:40%;aspect-ratio:9/16}
.lc-social{flex-direction:column}.lc-social .th.tall{flex:none;width:100%;aspect-ratio:4/5}
.lc .tx{display:flex;flex-direction:column;gap:.3cqw;min-width:0}
.lc .tg{font-family:var(--mono);font-size:max(9px,.62cqw);letter-spacing:.14em;text-transform:uppercase;color:rgba(231,206,154,.8)}
.lc .tx b{font-weight:500;font-size:max(12.5px,1cqw);letter-spacing:-.01em;line-height:1.2}
.lc .tx>span:last-child{font-size:max(11px,.78cqw);line-height:1.4;color:rgba(242,236,227,.66)}
.lc .play{position:absolute;left:50%;top:50%;width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;border-radius:50%;
  background:rgba(12,10,8,.45);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.lc .play::after{content:"";position:absolute;left:40%;top:30%;border-left:.7cqw solid #fff;
  border-top:.42cqw solid transparent;border-bottom:.42cqw solid transparent}
.lc .bar{position:absolute;left:8%;right:8%;bottom:6%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#F3DDB0 38%,rgba(255,255,255,.3) 38%)}
.lc .cta{position:absolute;right:6%;bottom:9%;white-space:nowrap;font-size:max(8.5px,.6cqw);font-weight:600;color:#1a1208;
  padding:.28cqw .6cqw;border-radius:99px;background:linear-gradient(135deg,#EBCF9A,#C79E5E)}
/* анализ рынка: коридор цены, аналоги точками, объект — латунная черта */
.lc .chart{position:relative;flex:0 0 46%;aspect-ratio:16/10;border-radius:.6cqw;background:rgba(5,4,3,.55);
  border:1px solid rgba(231,206,154,.14);padding:.4cqw;display:flex;flex-direction:column;justify-content:space-between}
.lc .chart svg{width:100%;height:auto}
.lc .chart .band{fill:rgba(231,206,154,.12);stroke:rgba(231,206,154,.35);stroke-width:.5}
.lc .chart .pts circle{fill:rgba(242,236,227,.7)}
.lc .chart .you{stroke:#F3DDB0;stroke-width:1.4}
.lc .chart em{font-style:normal;font-family:var(--mono);font-size:max(7.5px,.5cqw);letter-spacing:.06em;color:rgba(242,236,227,.55)}
.lc .chart .yl{position:absolute;left:58%;top:.2cqw;white-space:nowrap;font-size:max(8px,.55cqw);font-weight:500;color:#F3DDB0}
/* SEO: сниппет выдачи */
.lc .serp{flex:0 0 46%;aspect-ratio:16/10;border-radius:.6cqw;background:rgba(242,236,227,.94);color:#1b1a18;
  padding:.55cqw .6cqw;display:flex;flex-direction:column;gap:.25cqw;overflow:hidden}
.lc .serp .q{display:block;height:.9cqw;border-radius:99px;border:1px solid #d9d2c6;margin-bottom:.2cqw}
.lc .serp small{font-size:max(7px,.46cqw);color:#4d6b3a}
.lc .serp b{font-size:max(8.5px,.6cqw);font-weight:500;line-height:1.2;color:#2b3b8c}
.lc .serp .ln{display:block;height:.28cqw;border-radius:2px;background:#cfc8bc}.lc .serp .ln.s{width:70%}

.lfacts{list-style:none;margin:clamp(10px,1.6vw,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lfacts li{padding:20px 22px;border-left:1px solid var(--line);display:flex;align-items:baseline;gap:12px}
.lfacts li:first-child{border-left:0;padding-left:0}
.lfacts b{font-family:var(--mono);font-weight:400;font-size:clamp(24px,2.4vw,34px);color:var(--brass-hi);letter-spacing:-.02em}
.lfacts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* узкие экраны: кадр сверху, панели сеткой под ним, нити не рисуем */
@media(max-width:900px){
  .launch{margin-top:-70px}
  .lhead{flex-direction:column;align-items:flex-start;gap:14px}
  .lstage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;container-type:normal}
  .lstage .bg{grid-column:1/-1;margin:0 -16px 6px}
  .lstage .bg img{position:static;width:100%}
  .lstage .links{display:none}
  .lc{position:static;width:auto;padding:10px;gap:10px;border-radius:14px;flex-direction:column}
  .lc .th,.lc .chart,.lc .serp,.lc-social .th.tall{flex:none;width:100%;aspect-ratio:16/10;border-radius:9px}
  .lc .tx{gap:4px}.lc .tg{font-size:9px}.lc .tx b{font-size:14px}.lc .tx>span:last-child{font-size:12px}
  .lc .play{width:30px;height:30px;margin:-15px 0 0 -15px}.lc .play::after{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
  .lc .cta{font-size:9px;padding:3px 8px}.lc .chart{padding:6px}.lc .chart em,.lc .chart .yl{font-size:9px}
  .lc .serp{padding:8px;gap:4px}.lc .serp .q{height:12px}.lc .serp small{font-size:8px}.lc .serp b{font-size:10px}.lc .serp .ln{height:4px}
  .lfacts{grid-template-columns:repeat(2,1fr)}
  .lfacts li{padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .lfacts li:nth-child(-n+2){border-top:0}}
@media(prefers-reduced-motion:reduce){.lc,.lstage .links path,.lstage .links circle{transition:none;animation:none}}

/* ── Products 28.09: под шестью материалами — восемь инструментов кабинета.
   У каждого маленький живой виджет вместо иконки: цифры и состояния, как
   в самом кабинете. ─────────────────────────────────────────────────── */
#products .pcard .shot img{filter:none}
.toolhead{margin:clamp(56px,6vw,88px) 0 22px;display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.toolhead .lab{margin:0}
.toolhead h3{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.025em}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tool{border:1px solid var(--line);border-radius:16px;padding:16px 18px 20px;
  background:linear-gradient(180deg,#100D0A,#080706);display:flex;flex-direction:column;
  transition:border-color .4s,transform .5s var(--ease)}
.tool:hover{border-color:rgba(231,206,154,.35);transform:translateY(-2px)}
.tool h4{margin:16px 0 6px;font-size:16px;font-weight:500;letter-spacing:-.01em;color:#F2ECE3}
.tool p{margin:0;font-size:13.5px;line-height:1.5;color:var(--fg-3)}
.wg{height:96px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(231,206,154,.12);
  padding:10px 12px;display:flex;overflow:hidden;position:relative}
.wg em{font-style:normal}
.wg-mkt{flex-direction:column;justify-content:space-between}
.wg-mkt svg{width:100%;height:52px}
.wg-mkt .band{fill:rgba(231,206,154,.12);stroke:rgba(231,206,154,.4);stroke-width:.6}
.wg-mkt circle{fill:rgba(242,236,227,.72)}
.wg-mkt .you{stroke:#F3DDB0;stroke-width:1.6}
.wg-mkt>span{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.wg-mkt>span b{font-weight:400;color:#F3DDB0}
.wg-seo{flex-direction:column;gap:5px;background:rgba(242,236,227,.94);border-color:transparent;color:#1b1a18}
.wg-seo .q{display:block;height:13px;border-radius:99px;border:1px solid #d6cec1;margin-bottom:3px}
.wg-seo small{font-size:10px;color:#4d6b3a}
.wg-seo b{font-size:12.5px;font-weight:500;color:#2b3b8c;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-seo .ln{display:block;height:5px;border-radius:3px;background:#d3ccc0}.wg-seo .ln.s{width:66%}
.wg-audit{gap:6px;padding:8px}
.wg-audit span{position:relative;flex:1;border-radius:6px;overflow:hidden}
.wg-audit img{width:100%;height:100%;object-fit:cover;display:block}
.wg-audit i{position:absolute;right:5px;top:5px;width:14px;height:14px;border-radius:50%;background:#7fbf8a;
  box-shadow:0 0 0 2px rgba(8,6,4,.6)}
.wg-audit .warn i{background:#E6B35C}
.wg-audit span.warn::after{content:"";position:absolute;inset:0;border:1.5px solid #E6B35C;border-radius:6px}
.wg-kv{flex-direction:column;justify-content:center;gap:7px}
.wg-kv span{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(231,206,154,.14);padding-bottom:5px}
.wg-kv span:last-child{border:0;padding:0}
.wg-kv em{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.wg-kv b{font-family:var(--mono);font-weight:400;font-size:12.5px;color:var(--brass-hi)}
.wg-chk{flex-direction:column;justify-content:center;gap:8px;font-size:12.5px;color:#E8E1D6}
.wg-chk span{display:flex;align-items:center;gap:9px}
.wg-chk i{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#EBCF9A,#C79E5E);position:relative;flex:none}
.wg-chk i::after{content:"";position:absolute;left:4.5px;top:2px;width:3px;height:6px;border:solid #1a1208;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.wg-deal{gap:8px;align-items:stretch}
.wg-deal span{flex:1;border-radius:8px;background:rgba(231,206,154,.06);border:1px solid rgba(231,206,154,.14);
  display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px}
.wg-deal span:last-child{background:linear-gradient(160deg,rgba(235,207,154,.22),rgba(199,158,94,.08));border-color:rgba(231,206,154,.4)}
.wg-deal b{font-family:var(--mono);font-weight:400;font-size:24px;color:#F2ECE3}
.wg-deal em{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.wg-chat{flex-direction:column;justify-content:center;gap:6px;font-size:11px;line-height:1.3;padding:8px 10px}
.wg-chat span{padding:5px 9px!important}
.wg-chat span{max-width:88%;padding:6px 10px;border-radius:12px}
.wg-chat .me{align-self:flex-end;background:rgba(242,236,227,.1);color:#EDE6DA;border-bottom-right-radius:3px}
.wg-chat .ai{align-self:flex-start;background:linear-gradient(135deg,rgba(235,207,154,.24),rgba(199,158,94,.12));
  color:#F3DDB0;border-bottom-left-radius:3px}
.wg-lang{flex-wrap:wrap;align-content:center;gap:6px}
.wg-lang i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:5px 9px;border-radius:99px;
  border:1px solid rgba(231,206,154,.2);color:var(--fg-3)}
.wg-lang i.on{color:#1a1208;border-color:transparent;background:linear-gradient(135deg,#EBCF9A,#C79E5E)}
@media(max-width:1100px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tools{grid-template-columns:1fr}}

/* ── 28.09, правка 2: панели сцены — у каждой свой носитель ──────────── */
.launch{margin-top:0;padding-top:clamp(56px,6vw,96px)}
/* сайт — в рамке браузера с адресом */
.lc .th.br{display:flex;flex-direction:column;aspect-ratio:auto;background:#0d0b09;border:1px solid rgba(231,206,154,.2)}
.lc .th.br .chrome{display:flex;align-items:center;gap:.28cqw;padding:.32cqw .4cqw;background:rgba(242,236,227,.07);
  border-bottom:1px solid rgba(231,206,154,.14)}
.lc .th.br .chrome>i{width:.34cqw;height:.34cqw;border-radius:50%;background:rgba(242,236,227,.35)}
.lc .th.br .chrome em{flex:1;margin-left:.3cqw;font-style:normal;font-family:var(--mono);font-size:max(7px,.42cqw);
  color:rgba(242,236,227,.62);background:rgba(5,4,3,.55);border-radius:99px;padding:.1cqw .45cqw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc .th.br img{aspect-ratio:16/10;height:auto}
/* соцсети — телефон с рилсом */
.lc-social{align-items:stretch}
.lc .phone{position:relative;display:block;width:100%;aspect-ratio:9/17;border-radius:1.1cqw;overflow:hidden;
  border:.28cqw solid #1a1612;box-shadow:0 0 0 1px rgba(231,206,154,.25);background:#000}
.lc .phone img{width:100%;height:100%;object-fit:cover;display:block}
.lc .phone .ui{position:absolute;left:7%;top:5%;display:flex;align-items:center;gap:.35cqw}
.lc .phone .av{width:1.1cqw;height:1.1cqw;border-radius:50%;background:linear-gradient(135deg,#EBCF9A,#C79E5E)}
.lc .phone .hd{width:3.4cqw;height:.32cqw;border-radius:2px;background:rgba(255,255,255,.7)}
.lc .phone .prog{position:absolute;left:6%;right:6%;top:2.4%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#fff 46%,rgba(255,255,255,.3) 46%)}
/* презентация — слайд 16:9 */
.lc .slide{position:relative;flex:0 0 50%;aspect-ratio:16/9;border-radius:.5cqw;overflow:hidden;display:grid;
  grid-template-columns:46% 54%;background:#F2ECE3;border:1px solid rgba(231,206,154,.3)}
.lc .slide img{grid-column:2;grid-row:1;width:100%;height:100%;object-fit:cover}
.lc .slide .sc{grid-column:1;grid-row:1;padding:.55cqw .6cqw;display:flex;flex-direction:column;justify-content:center;gap:.2cqw;color:#1b1814}
.lc .slide em{font-style:normal;font-family:var(--mono);font-size:max(6.5px,.4cqw);letter-spacing:.1em;color:#9a7f55}
.lc .slide b{font-family:Georgia,serif;font-weight:400;font-size:max(8.5px,.68cqw);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc .slide small{font-size:max(6.5px,.42cqw);color:#6d6559}
.lc .slide .sc>i{display:block;width:40%;height:1.5px;background:#C79E5E;margin-top:.2cqw}
/* реклама — веер из трёх форматов */
.lc .fan{position:relative;flex:0 0 46%;aspect-ratio:16/11}
.lc .fan>span{position:absolute;border-radius:.4cqw;overflow:hidden;border:1px solid rgba(231,206,154,.35);
  box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.5);background:#000}
.lc .fan img{width:100%;height:100%;object-fit:cover;display:block}
.lc .fan em{position:absolute;left:.25cqw;bottom:.2cqw;font-style:normal;font-family:var(--mono);font-size:max(6.5px,.38cqw);
  color:#fff;background:rgba(5,4,3,.6);padding:.05cqw .25cqw;border-radius:3px}
.lc .fan .f1{left:0;top:0;width:52%;aspect-ratio:1}
.lc .fan .f2{left:56%;top:0;width:30%;aspect-ratio:9/16;transform:rotate(4deg)}
.lc .fan .f3{left:0;bottom:0;width:100%;height:22%}
.lc .fan .f3 img{object-position:50% 40%}
.lc .fan .f3 .cta{right:3%;bottom:18%;font-size:max(6.5px,.4cqw);padding:.08cqw .4cqw}
.lc .fan .f3 em{left:auto;right:28%;bottom:18%}
/* анализ рынка — график цены за м² с аналогами */
.lc .chart{flex:0 0 50%;aspect-ratio:16/10;padding:.5cqw .55cqw .45cqw;justify-content:flex-end;gap:.25cqw;overflow:hidden}
.lc .chart svg{position:absolute;left:0;right:0;top:12%;width:100%;height:62%}
.lc .chart .grid line{stroke:rgba(242,236,227,.08);stroke-width:.4;vector-effect:non-scaling-stroke}
.lc .chart .area{fill:url(#mkg)}
.lc .chart .ln{fill:none;stroke:#E9C589;stroke-width:1.4;vector-effect:non-scaling-stroke}
.lc .chart .cmp circle{fill:rgba(242,236,227,.55)}
.lc .chart .you{position:absolute;width:.7cqw;height:.7cqw;margin:-.35cqw 0 0 -.35cqw;border-radius:50%;
  background:#FFF1D2;box-shadow:0 0 0 .25cqw rgba(233,197,137,.3),0 0 .8cqw rgba(255,220,160,.9)}
.lc .chart .yl{position:absolute;left:auto;right:.5cqw;top:.4cqw;font-size:max(7.5px,.5cqw);font-weight:500;color:#F3DDB0;white-space:nowrap}
.lc .chart em{position:relative;font-size:max(6.5px,.42cqw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
  .lc .phone{aspect-ratio:16/10;border-width:3px;border-radius:9px}
  .lc .phone .av,.lc .phone .hd{display:none}
  .lc .slide,.lc .fan{flex:none;width:100%;border-radius:9px}
  .lc .slide b{font-size:15px}.lc .slide em,.lc .slide small{font-size:9px}.lc .slide .sc{padding:8px;gap:3px}
  .lc .fan .f3 .cta{font-size:8px;padding:2px 6px}.lc .fan em{font-size:8px;padding:1px 4px}
  .lc .chart svg{top:18%;height:56%}.lc .chart .you{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
  .lc .chart .yl{font-size:9px;right:6px;top:5px}.lc .chart em{font-size:8.5px}
  .lc .th.br .chrome{padding:4px 6px;gap:3px}.lc .th.br .chrome>i{width:5px;height:5px}.lc .th.br .chrome em{font-size:8px;padding:1px 6px}}

/* ── 28.09, правка 2: «Внутри кабинета» — бенто из трёх карточек ────────
   По Raycast (refero): тёмные карточки, внутри живые куски интерфейса,
   которые уходят за край; латунный свет из угла. Остальное — строкой. */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bc{position:relative;overflow:hidden;border-radius:22px;padding:26px 26px 0;isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%,rgba(199,158,94,.16),transparent 55%),
    linear-gradient(180deg,#110E0B,#070605);
  border:1px solid rgba(231,206,154,.14);box-shadow:inset 0 1px 0 rgba(255,240,210,.06)}
.bc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(5,4,3,.85));z-index:2}
.bc .bt{position:relative;z-index:3;max-width:44ch}
.bc h4{margin:0 0 8px;font-size:21px;font-weight:500;letter-spacing:-.02em;color:#F4EEE4}
.bc .bt p{margin:0;font-size:14px;line-height:1.55;color:var(--fg-3)}
.bc-mkt{grid-column:span 7;min-height:470px}
.bc-seo{grid-column:span 5;min-height:470px}
.bc-ai{grid-column:span 12;min-height:360px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:30px;padding-bottom:0}

/* график рынка: плотное окно с легендой, коридором, медианой и аналогами */
.bchart{position:relative;margin:26px -2px 0;border-radius:16px 16px 0 0;border:1px solid rgba(231,206,154,.16);border-bottom:0;
  background:linear-gradient(180deg,rgba(24,20,16,.9),rgba(10,8,6,.9));padding:16px 18px 18px;box-shadow:0 -20px 60px rgba(199,158,94,.08)}
.bch-h{display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}
.bch-h .lg{display:flex;align-items:center;gap:8px;white-space:nowrap}
.bch-h .lg i{display:inline-block;width:14px;height:2px;background:#E9C589;margin-left:8px}
.bch-h .lg i.l2{height:8px;background:rgba(233,197,137,.18);border:1px solid rgba(233,197,137,.35)}
.bch-plot{position:relative;height:190px}
.bch-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bchart .grid line{stroke:rgba(242,236,227,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.bchart .band{fill:rgba(233,197,137,.09);stroke:rgba(233,197,137,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.bchart .area{fill:url(#bmg)}
.bchart .med{fill:none;stroke:#E9C589;stroke-width:2;vector-effect:non-scaling-stroke}
.bchart .cmp circle{fill:rgba(242,236,227,.62)}
.bchart .vx{stroke:rgba(255,241,210,.35);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.bchart .pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px}
.bchart .pin i{width:13px;height:13px;border-radius:50%;background:#FFF1D2;box-shadow:0 0 0 5px rgba(233,197,137,.22),0 0 22px rgba(255,214,150,.9)}
.bchart .pin b{position:absolute;left:18px;top:-30px;white-space:nowrap;font-size:12px;font-weight:500;color:#1a1208;
  background:linear-gradient(135deg,#F3DDB0,#D2A868);padding:4px 10px;border-radius:99px}
.bch-x{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:10px;color:rgba(242,236,227,.35)}
.bstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border-top:1px solid rgba(231,206,154,.12)}
.bstats span{padding:14px 0 0;display:flex;align-items:baseline;gap:9px}
.bstats span+span{padding-left:16px;border-left:1px solid rgba(231,206,154,.12)}
.bstats b{font-family:var(--mono);font-weight:400;font-size:26px;color:var(--brass-hi);letter-spacing:-.02em}
.bstats em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* SEO: две выдачи внахлёст с наклоном, ключи — пилюлями */
.serps{position:relative;height:230px;margin-top:30px;perspective:900px}
.sr{position:absolute;width:112%;padding:16px 18px;border-radius:14px;background:#F4EFE7;color:#1b1a18;
  box-shadow:0 30px 60px rgba(0,0,0,.55);transform-origin:0 0}
.sr small{display:block;font-size:11.5px;color:#4d6b3a;margin-bottom:4px}
.sr b{display:block;font-size:16px;font-weight:500;color:#2b3b8c;line-height:1.25;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr p{margin:0;font-size:12.5px;line-height:1.45;color:#57524a}
.sr0{left:0;top:0;transform:rotateY(-10deg) rotateX(6deg);z-index:2}
.sr1{left:12%;top:108px;transform:rotateY(-10deg) rotateX(6deg);opacity:.72;filter:saturate(.8)}
.kw{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.kw i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 11px;border-radius:99px;
  color:var(--brass-hi);border:1px solid rgba(231,206,154,.28);background:rgba(231,206,154,.06)}

/* помощник: окно чата + материалы, которые он прямо сейчас правит */
.bc-ai .bt{align-self:start;padding-bottom:26px}
.aiwin{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;
  margin-right:-26px;padding:18px;border-radius:16px 0 0 0;border:1px solid rgba(231,206,154,.16);border-right:0;border-bottom:0;
  background:linear-gradient(180deg,rgba(24,20,16,.92),rgba(10,8,6,.92))}
.chat{display:flex;flex-direction:column;gap:12px}
.chat .me{align-self:flex-end;margin:0;max-width:86%;padding:10px 14px;border-radius:16px 16px 4px 16px;
  background:rgba(242,236,227,.09);font-size:13.5px;line-height:1.45;color:#EDE6DA}
.chat .ai{display:flex;gap:12px;align-items:flex-start}
.chat .orb{flex:none;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF1D2,#D9AE68 45%,#6E5230 100%);box-shadow:0 0 18px rgba(233,197,137,.6)}
.chat ul{list-style:none;margin:0;padding:12px 14px;border-radius:4px 16px 16px 16px;flex:1;
  background:linear-gradient(135deg,rgba(235,207,154,.16),rgba(199,158,94,.06));border:1px solid rgba(231,206,154,.18);
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.chat li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#F3DDB0}
.chat li i{flex:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#EBCF9A,#C79E5E);position:relative}
.chat li i::after{content:"";position:absolute;left:4.6px;top:2.4px;width:3px;height:6px;border:solid #1a1208;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.chat .ask{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:11px 14px;border-radius:12px;
  border:1px solid rgba(231,206,154,.2);font-size:13px;color:rgba(242,236,227,.4)}
.chat .mic{width:26px;height:26px;border-radius:50%;border:1px solid rgba(231,206,154,.4);position:relative}
.chat .mic::after{content:"";position:absolute;left:10px;top:6px;width:5px;height:10px;border-radius:3px;background:var(--brass-hi)}
.aupd{display:grid;grid-template-rows:repeat(3,1fr);gap:10px}
.au{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;border:1px solid rgba(231,206,154,.12);background:rgba(255,255,255,.02)}
.au img{width:92px;height:58px;object-fit:cover;border-radius:8px;flex:none}
.au b{display:block;font-size:13.5px;font-weight:500;color:#F2ECE3}
.au em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9ED3A5}
.au em.q{color:var(--brass)}

/* второстепенное — одной строкой */
.also{display:flex;align-items:center;gap:22px;margin-top:18px;padding:16px 22px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.015)}
.also .lab{margin:0;white-space:nowrap}
.also ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.also li{display:flex;flex-direction:column;gap:2px}
.also li b{font-size:13.5px;font-weight:500;color:#EDE6DA}
.also li span{font-size:12px;color:var(--fg-3)}
@media(max-width:1000px){
  .bc-mkt,.bc-seo{grid-column:span 12;min-height:0}
  .bc-ai{grid-template-columns:1fr;gap:0}
  .aiwin{grid-template-columns:1fr;margin-left:0}
  .serps{height:220px}
  .also{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.bc{padding:20px 18px 0}.chat ul{grid-template-columns:1fr}.aupd{grid-template-rows:none}
  .bch-h{flex-direction:column;align-items:flex-start}.bstats b{font-size:20px}.sr b{font-size:14px}}
.bstats b{white-space:nowrap;font-size:24px}
.bstats span{flex-wrap:wrap;row-gap:2px}
.chat .mic{background:transparent}
.chat .mic::after{left:10px;top:6px;width:4px;height:10px;background:rgba(231,206,154,.8)}
.asks{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
.asks i{font-style:normal;font-size:13px;color:#EDE6DA;padding:8px 13px;border-radius:12px;
  background:rgba(242,236,227,.05);border:1px solid rgba(231,206,154,.14)}
.asks i:nth-child(2){margin-left:18px}.asks i:nth-child(3){margin-left:6px}.asks i:nth-child(4){margin-left:24px}

/* ── 28.09: форматы и площадки на фото — приём тарифов и финала ──────── */
#formats.fmt2{position:relative;overflow:hidden;isolation:isolate;padding:clamp(80px,9vw,130px) 0 clamp(64px,7vw,100px)}
.fmt2>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;z-index:-2}
.fmt2>.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,4,3,.9) 0%,rgba(5,4,3,.62) 38%,rgba(5,4,3,.18) 70%,rgba(5,4,3,.3) 100%),
  linear-gradient(180deg,var(--void) 0%,transparent 18%,transparent 55%,rgba(5,4,3,.82) 80%,var(--void) 100%)}
.fmt2 .ftop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.fmt2 h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;margin:10px 0 18px;letter-spacing:-.035em}
.fmt2 .lede{max-width:44ch;font-size:16px}
.fmt2 .phones{display:flex;justify-content:center;gap:18px;align-items:flex-end}
.fmt2 .ph{margin:0;width:31%;max-width:210px;position:relative;border-radius:26px;padding:7px;
  background:rgba(12,10,8,.5);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.fmt2 .ph1{transform:translateY(-34px)}
.fmt2 .ph video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:20px;background:#000}
.fmt2 .ph figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 8px 4px}
.fmt2 .ph b{font-size:13.5px;font-weight:500;color:#F2ECE3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmt2 .ph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.fmt2 .fglass{margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:1fr 1fr 1.3fr;border-radius:20px;overflow:hidden;
  background:rgba(12,10,8,.5);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.fmt2 .fg{padding:22px 24px 22px;display:flex;flex-direction:column;gap:14px}
.fmt2 .fg+.fg{border-left:1px solid rgba(255,255,255,.1)}
.fmt2 .fg:nth-child(2){background:linear-gradient(160deg,rgba(235,207,154,.1),transparent 60%)}
.fmt2 .fg header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fmt2 .fg header .lab{margin:0;flex-basis:100%}
.fmt2 .fg header b{font-family:var(--mono);font-weight:400;font-size:40px;line-height:1;color:var(--brass-hi);letter-spacing:-.03em}
.fmt2 .fg header em{font-style:normal;font-size:14px;color:#EDE6DA}
.fmt2 .fchips{display:flex;flex-wrap:wrap;gap:7px}
.fmt2 .fchips span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:99px;font-size:12.5px;
  color:#EDE6DA;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.fmt2 .fchips svg{width:14px;height:14px;opacity:.85}
.fmt2 .fg small{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.fmt2 .fnote{margin:14px 0 0;font-size:11.5px;color:rgba(242,236,227,.36)}
@media(max-width:980px){.fmt2 .ftop{grid-template-columns:1fr}.fmt2 .fglass{grid-template-columns:1fr}
  .fmt2 .fg+.fg{border-left:0;border-top:1px solid rgba(255,255,255,.1)}}
@media(max-width:560px){.fmt2 .phones{gap:8px}.fmt2 .ph{border-radius:16px;padding:4px}.fmt2 .ph video{border-radius:12px}
  .fmt2 .ph figcaption{flex-direction:column;gap:2px;padding:6px 4px 2px}.fmt2 .ph b{font-size:11.5px}.fmt2 .ph1{transform:translateY(-18px)}}
.fmt2 .ph figcaption{flex-direction:column;align-items:flex-start;gap:3px}

/* ── 28.09: «как это работает» — конвейер на фото (вилла на Комо) ───── */
#how.how2{position:relative;overflow:hidden;isolation:isolate;padding:clamp(90px,10vw,140px) 0 clamp(64px,7vw,100px)}
.how2>.bg{position:absolute;left:0;right:0;top:0;width:100%;height:78%;object-fit:cover;object-position:50% 55%;z-index:-2}
.how2>.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,4,3,.86) 0%,rgba(5,4,3,.5) 45%,rgba(5,4,3,.2) 100%),
  linear-gradient(180deg,var(--void) 0%,transparent 16%,transparent 40%,rgba(5,4,3,.85) 66%,var(--void) 78%)}
.how2 .rowhead h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.035em}
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,90px)}
.pipe .rail{position:absolute;left:3%;right:3%;top:0;height:1px;background:rgba(231,206,154,.22)}
.pipe .rail i{position:absolute;left:0;top:-1px;height:3px;width:0;border-radius:2px;
  background:linear-gradient(90deg,#C79E5E,#FFF1D2);box-shadow:0 0 14px rgba(255,214,150,.9);transition:width 2.4s var(--ease) .3s}
.pipe:has(.hs.in) .rail i{width:100%}
.hs{position:relative;margin-top:26px;padding:20px 20px 24px;border-radius:20px;
  background:rgba(12,10,8,.5);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);transition-delay:var(--d)}
.hs .node{position:absolute;left:24px;top:-33px;width:13px;height:13px;border-radius:50%;background:#0b0907;
  border:1.5px solid #E9C589;box-shadow:0 0 12px rgba(233,197,137,.7)}
.hs .node::after{content:"";position:absolute;left:5px;top:13px;width:1px;height:19px;background:linear-gradient(#E9C589,transparent)}
.hs .sn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--brass)}
.hs h3{margin:18px 0 8px;font-size:20px;font-weight:500;letter-spacing:-.02em;color:#F4EEE4}
.hs p{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-3)}
.hv{margin-top:14px;height:132px;border-radius:14px;background:rgba(5,4,3,.45);border:1px solid rgba(231,206,154,.12);
  position:relative;overflow:hidden;padding:12px}
/* 01 — стопка снимков и счётчик */
.hv-up{display:flex;align-items:center;gap:14px}
.hv-up .stack{position:relative;width:96px;height:100%;flex:none}
.hv-up .stack img{position:absolute;width:78px;height:58px;object-fit:cover;border-radius:7px;border:2px solid #F2ECE3;box-shadow:0 8px 16px rgba(0,0,0,.5)}
.hv-up .stack img:nth-child(1){left:0;top:4px;transform:rotate(-8deg)}
.hv-up .stack img:nth-child(2){left:12px;top:26px;transform:rotate(4deg)}
.hv-up .stack img:nth-child(3){left:20px;top:48px;transform:rotate(-2deg)}
.hv-up .cnt b{display:block;font-family:var(--mono);font-weight:400;font-size:24px;color:var(--brass-hi);letter-spacing:-.02em}
.hv-up .cnt em{font-style:normal;font-size:12px;color:var(--fg-3)}
/* 02 — кольцо готовности и пробелы */
.hv-audit{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;column-gap:14px;align-items:center}
.hv-audit .ring{width:74px;height:74px;transform:rotate(-90deg)}
.hv-audit .ring circle{fill:none;stroke:rgba(242,236,227,.1);stroke-width:4}
.hv-audit .ring .v{stroke:#E9C589;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(233,197,137,.7))}
.hv-audit .rv2 b{display:block;font-family:var(--mono);font-weight:400;font-size:26px;color:var(--brass-hi)}
.hv-audit .rv2 em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.hv-audit .gaps{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.hv-audit .gaps i{font-style:normal;font-size:11px;padding:3px 8px;border-radius:99px;color:#E6B35C;border:1px solid rgba(230,179,92,.4);background:rgba(230,179,92,.08)}
/* 03 — до/после света */
.hv-fill{padding:0}
.hv-fill .ba{position:absolute;inset:0}
.hv-fill .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv-fill .ba .af{clip-path:inset(0 0 0 52%)}
.hv-fill .hd{position:absolute;left:52%;top:0;bottom:0;width:2px;background:#FFF1D2;box-shadow:0 0 10px rgba(255,220,160,.9)}
.hv-fill .hd::after{content:"";position:absolute;left:-7px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#FFF1D2}
.hv-fill .cap{position:absolute;left:10px;right:10px;bottom:8px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.hv-fill .cap em{font-style:normal;color:#fff;background:rgba(5,4,3,.55);padding:2px 7px;border-radius:4px}
.hv-fill .cap b{font-weight:400;color:#1a1208;background:linear-gradient(135deg,#F3DDB0,#D2A868);padding:2px 7px;border-radius:4px}
/* 04 — сборка шести материалов */
.hv-build ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.hv-build li{display:grid;grid-template-columns:78px 1fr 30px;align-items:center;gap:8px;font-size:11px;color:#E8E1D6}
.hv-build li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-build li i{height:3px;border-radius:2px;background:rgba(242,236,227,.1);position:relative;overflow:hidden}
.hv-build li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);background:linear-gradient(90deg,#C79E5E,#F3DDB0)}
.hv-build li b{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--brass-hi);text-align:right}
.hv-build .live{position:absolute;right:10px;top:9px;display:none}
@media(max-width:1000px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.pipe .rail{display:none}.hs .node{display:none}.hs{margin-top:0}}
@media(max-width:560px){.pipe{grid-template-columns:1fr}.how2>.bg{height:50%}}
.hv{height:142px}
/* 28.10: «28 photos» в одну строку не влезало в карточку — число отдельно, подпись под ним */
.hv-up .cnt{min-width:0}
.hv-up .cnt b{font-size:30px;line-height:1;white-space:nowrap}
.hv-up .cnt i{display:block;margin:4px 0 6px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.hv-up .cnt em{display:block;line-height:1.35}
.hv-audit .ring{width:60px;height:60px}
.hv-audit .gaps{flex-wrap:nowrap;overflow:hidden}
.hv-audit .gaps i{font-size:10.5px;padding:3px 7px;white-space:nowrap}
.hv-build{padding:10px 12px}
.hv-build ul{gap:3px}
.hv-build li{font-size:10.5px;line-height:1.5}

/* ── 28.09, правка 3: бейдж героя «Estate Design System» — без пилюли:
   моно-строка между двумя латунными нитями и ромб-метка ───────────── */
.filmhero .badge{background:none!important;border:0;border-radius:0;padding:0;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;gap:16px;font-size:11px;letter-spacing:.34em;color:#F3E6CC;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.filmhero .badge::before,.filmhero .badge::after{content:"";width:clamp(36px,5vw,72px);height:1px;border-radius:0;
  box-shadow:none;background:linear-gradient(90deg,transparent,#E9C589)}
.filmhero .badge::after{background:linear-gradient(90deg,#E9C589,transparent)}
.filmhero .badge{position:relative}
.filmhero .badge{--dm:linear-gradient(#E9C589,#E9C589)}

/* форматы: ровнее нижняя панель и темнее кадр */
.fmt2>.veil{background:
  linear-gradient(90deg,rgba(5,4,3,.94) 0%,rgba(5,4,3,.74) 38%,rgba(5,4,3,.42) 70%,rgba(5,4,3,.5) 100%),
  linear-gradient(180deg,var(--void) 0%,transparent 18%,transparent 50%,rgba(5,4,3,.9) 76%,var(--void) 100%)}
.fmt2 .fglass{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.fmt2 .fg{display:grid;grid-template-rows:auto 1fr auto;gap:16px}
.fmt2 .fg header{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:12px}
.fmt2 .fg header .lab{grid-column:1/-1}
.fmt2 .fchips{align-content:flex-start}
.fmt2 .fg:nth-child(2){background:none}
.fmt2 .fg small{padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
/* Landing Pro: живая запись прокрутки сайта-фильма в окне браузера */
.pcard .shot.lpro{background:radial-gradient(90% 80% at 50% 30%,rgba(199,158,94,.22),transparent 70%),#0a0806;
  display:flex;align-items:center;justify-content:center;padding:7% 7% 12%}
.pcard .shot.lpro::after{display:none}
.lpro .bwin{width:100%;border-radius:10px;overflow:hidden;border:1px solid rgba(231,206,154,.28);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);background:#000}
.lpro .bbar{display:flex;align-items:center;gap:5px;padding:7px 9px;background:#16120e;border-bottom:1px solid rgba(231,206,154,.14)}
.lpro .bbar>i{width:7px;height:7px;border-radius:50%;background:rgba(242,236,227,.28)}
.lpro .bbar em{flex:1;margin-left:8px;font-style:normal;font-family:var(--mono);font-size:10px;color:rgba(242,236,227,.6);
  background:rgba(0,0,0,.4);border-radius:99px;padding:2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpro video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.lpro .scrollhint{position:absolute;right:9%;bottom:4%;display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.2em;color:var(--brass)}
.lpro .scrollhint i{width:12px;height:18px;border:1px solid var(--brass);border-radius:7px;position:relative}
.lpro .scrollhint i::after{content:"";position:absolute;left:4.5px;top:3px;width:1.5px;height:4px;background:var(--brass);animation:sh 1.6s ease-in-out infinite}
@keyframes sh{50%{transform:translateY(5px);opacity:.3}}
.pcard .shot.lpro{align-items:flex-start;padding:5% 9% 0}
.lpro .bwin{width:92%}
.lpro .scrollhint{right:5%;top:6%;bottom:auto;writing-mode:vertical-rl;gap:8px}

/* ── кейсы 28.09: «Beyond the assets» — рынок, SEO, сделка ───────────── */
.intel{padding:clamp(64px,7vw,110px) 0}
.ibento{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px;margin-top:38px}
/* только карточки блока (article): класс .ic носит и круг с иконкой в рейке материалов —
   общий .ic давал ему padding 22px, и значок съезжал в угол (21.10) */
article.ic{position:relative;border-radius:20px;padding:22px 24px;overflow:hidden;
  background:radial-gradient(110% 80% at 0% 0%,rgba(199,158,94,.14),transparent 55%),linear-gradient(180deg,#110E0B,#070605);
  border:1px solid rgba(231,206,154,.14)}
article.ic header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
article.ic header .lab{margin:0}
article.ic header em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fg-3);text-align:right}
.ic-mkt{grid-row:span 2}
.scale{position:relative;height:74px;margin:30px 6px 10px;border-bottom:1px solid rgba(242,236,227,.14)}
.scale .band{position:absolute;bottom:0;height:34px;border-radius:6px 6px 0 0;background:rgba(233,197,137,.1);border:1px solid rgba(233,197,137,.3);border-bottom:0}
.scale .c{position:absolute;bottom:14px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:rgba(242,236,227,.7)}
.scale .c em{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:9px;color:var(--fg-3);white-space:nowrap}
.scale .c:nth-child(odd) em{top:auto;bottom:14px}
.scale .you{position:absolute;bottom:0;width:2px;height:74px;background:linear-gradient(#FFF1D2,#C79E5E);box-shadow:0 0 12px rgba(255,214,150,.8)}
.scale .you b{position:absolute;top:-28px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:500;color:#1a1208;
  background:linear-gradient(135deg,#F3DDB0,#D2A868);padding:4px 10px;border-radius:99px}
.mrow{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 16px;border-top:1px solid rgba(231,206,154,.12)}
.mrow span{padding:12px 0 0}.mrow span+span{padding-left:16px;border-left:1px solid rgba(231,206,154,.12)}
.mrow em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.mrow b{font-family:var(--mono);font-weight:400;font-size:17px;color:var(--brass-hi)}
.comps{width:100%;border-collapse:collapse;font-size:13px}
.comps th{text-align:left;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);padding:0 8px 8px 0}
.comps td{padding:9px 8px 9px 0;border-top:1px solid rgba(242,236,227,.07);color:#D9D2C6}
.comps td:nth-child(3),.comps td:nth-child(4){font-family:var(--mono);font-size:12.5px;color:var(--brass-hi);white-space:nowrap}
.comps td b{font-weight:500;color:#F2ECE3}
.verdict{display:flex;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;color:#F3DDB0;
  background:linear-gradient(135deg,rgba(235,207,154,.14),rgba(199,158,94,.04));border:1px solid rgba(231,206,154,.22)}
.verdict i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#E9C589;box-shadow:0 0 10px rgba(233,197,137,.9)}
.serp1{padding:14px 16px;border-radius:12px;background:#F4EFE7;color:#1b1a18;margin-bottom:16px}
.serp1 small{font-size:11px;color:#4d6b3a}.serp1 b{display:block;font-size:15px;font-weight:500;color:#2b3b8c;margin:3px 0}
.serp1 p{margin:0;font-size:12.5px;line-height:1.45;color:#57524a}
.kws{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.kws li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 52px 40px;align-items:center;gap:10px;font-size:12.5px;color:#E3DCD0}
.kws li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kws li i{height:4px;border-radius:2px;background:rgba(242,236,227,.08);position:relative;overflow:hidden}
.kws li i::after{content:"";position:absolute;inset:0;width:var(--v);background:linear-gradient(90deg,#C79E5E,#F3DDB0)}
.kws li b{font-family:var(--mono);font-weight:400;font-size:11.5px;text-align:right;color:var(--brass-hi)}
.kws li em{font-style:normal;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;text-align:right;color:#9ED3A5}
.kws li em.med{color:#E6C07A}.kws li em.high{color:#E69A7A}
.kn{margin:10px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:16px}
.stages span{text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 0;border-radius:6px;
  color:var(--fg-3);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.stages .done{color:#E3DCD0;background:rgba(231,206,154,.08);border-color:rgba(231,206,154,.18)}
.stages .on{color:#1a1208;background:linear-gradient(135deg,#F3DDB0,#D2A868);border-color:transparent}
.dlog{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid rgba(231,206,154,.2);display:grid;gap:10px}
.dlog li{position:relative;display:grid;grid-template-columns:52px 1fr;column-gap:10px;font-size:12.5px}
.dlog li::before{content:"";position:absolute;left:-18px;top:5px;width:7px;height:7px;border-radius:50%;background:#C79E5E}
.dlog time{font-family:var(--mono);font-size:10.5px;color:var(--fg-3);grid-row:span 2}
.dlog b{font-weight:500;color:#F2ECE3}.dlog span{color:var(--fg-3)}
.dnext{margin-top:16px;padding:14px;border-radius:12px;border:1px dashed rgba(231,206,154,.4);background:rgba(231,206,154,.05)}
.dnext .lab{margin:0 0 6px}.dnext b{display:block;font-weight:500;font-size:14px;color:#F3DDB0}.dnext p{margin:4px 0 0;font-size:12.5px;color:var(--fg-3)}
.inote{margin:14px 0 0;font-size:11.5px;color:rgba(242,236,227,.36)}
.nextbar{padding:clamp(40px,5vw,70px) 0}
@media(max-width:980px){.ibento{grid-template-columns:1fr}.ic-mkt{grid-row:auto}.comps th:nth-child(2),.comps td:nth-child(2){display:none}}
.scale .c em{display:none}
.mrow b{font-size:18px;white-space:nowrap}
.ibento{grid-template-rows:auto}
.ic-mkt{grid-row:auto}
.ic-deal{grid-column:1/-1}
.ic-deal .dgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}
.ic-deal .dnext{margin-top:0}
.serp1.ru{opacity:.78;transform:scale(.97);transform-origin:left top;margin-top:-6px}
@media(max-width:980px){.ic-deal .dgrid{grid-template-columns:1fr}}

/* 05.10 ссылки на оферту и возвраты в подписи об оплате */
.pnote a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(191,169,130,.35)}
.pnote a:hover{border-color:var(--brass)}

/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ СЛОЙ (17.10.2026) — разметку даёт /_a/m.js, здесь только вид.
   Телефон ≤760: бургер и шторка, ленты со свайпом вместо столбиков карточек,
   нижняя панель с главным действием, подвал аккордеоном.
   Планшет 761–1100: сетки по две, тарифы в три узкие колонки.
   Референсы: нижняя панель с ценой и кнопкой — Airbnb (карточка жилья);
   ленты с пейджером — Sana (карусель возможностей); шторка — Meta AI / Dropset.
   ══════════════════════════════════════════════════════════════════════ */
.mburger,.msheet,.mdock,.mpager{display:none}
.lrail{display:contents}
.serps{overflow:hidden}

/* шапка с бургером — везде, где ссылки разделов уже спрятаны (≤920) */
@media(max-width:920px){
  /* шапка: знак, «Войти» и бургер; разделы — в шторке */
  .mjs .menu a.lng{display:none}
  .mjs .menu{gap:10px}
  .menu a.go{padding:8px 14px;font-size:12.5px}
  .mburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
    border-radius:50%;border:1px solid var(--line-2);background:rgba(10,9,8,.42);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);align-items:center;cursor:pointer;padding:0}
  .mburger i{display:block;width:16px;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .35s var(--ease)}
  .m-open .mburger i:first-child{transform:translateY(3.25px) rotate(45deg)}
  .m-open .mburger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .m-open header.el{background:transparent}
  .m-open header.el::after{display:none}
  .msheet{display:flex;flex-direction:column;position:fixed;inset:0;z-index:89;padding:92px 22px calc(26px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(8,7,6,.9),rgba(8,7,6,.97)),url(/motion/how/bg.jpg) center/cover;
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .4s}
  .m-open .msheet{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
  html.m-open,html.m-open body{overflow:hidden}
  .ms-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .ms-list a{display:flex;align-items:baseline;gap:16px;padding:17px 2px;border-bottom:1px solid var(--line);
    font-size:27px;letter-spacing:-.025em;color:var(--fg)}
  .ms-list em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--brass)}
  .ms-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
  .ms-foot .btn{justify-content:center;padding:15px 18px;font-size:15px}
  .ms-foot .ms-tg{gap:10px}
  .ms-foot .ms-tg svg{width:17px;height:17px;fill:currentColor}
  .ms-lng{align-self:center;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fg-2);padding:8px}

}
@media(max-width:760px){
  html.mjs{scroll-padding-top:72px}
  body{-webkit-tap-highlight-color:transparent}
  /* герой: заголовок и кнопки, без длинного абзаца — его рассказывает следующий экран */
  .filmhero .sub{display:none}
  .filmhero .claim{font-size:21px;line-height:1.3}
  .filmhero .btns{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
  .filmhero .btns .btn{justify-content:center;padding:14px 18px;font-size:14.5px}

  /* читаемость: основной текст не мельче 15 px */
  .lede,.lhead .lede,.rowhead .lede{font-size:15.5px!important;line-height:1.6}
  h2{text-wrap:balance}

  /* ленты со свайпом */
  .mjs .mrail{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:12px;margin-left:-18px;margin-right:-18px;padding:4px 18px 8px;
    scroll-padding:0 18px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .mjs .mrail::-webkit-scrollbar{display:none}
  .mjs .mrail>*{flex:0 0 84%;min-width:0;scroll-snap-align:start;margin-top:0}
  .mjs .mrail>.rail,.mjs .mrail>.node{display:none}
  .mjs .mrail.rv,.mjs .mrail .rv{opacity:1;transform:none}
  .mpager{display:flex;align-items:center;gap:14px;margin-top:14px}
  .mpager .mc{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fg-3)}
  .mpager .mc b{font-weight:400;color:var(--brass-hi)}
  .mpager .md{display:flex;gap:6px;margin-left:auto}
  .mpager:not(.tabs) .md button{width:6px;height:6px;padding:0;border:0;border-radius:6px;background:var(--line-2);
    transition:width .3s var(--ease),background .3s}
  .mpager:not(.tabs) .md button.on{width:22px;background:var(--brass)}
  /* тарифы: вкладки с именами планов вместо точек */
  .mpager.tabs{margin:26px 0 14px}
  .mpager.tabs .md{margin:0;width:100%;padding:4px;border:1px solid var(--line);border-radius:var(--pill);
    background:rgba(10,9,8,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .mpager.tabs .md button{flex:1;padding:10px 6px;border:0;border-radius:var(--pill);background:none;color:var(--fg-2);
    font-size:13.5px;font-weight:500;transition:background .3s,color .3s}
  .mpager.tabs .md button.on{background:linear-gradient(135deg,#E7DAC1,#BFA982);color:#17130C}

  /* «весь запуск»: кадр сверху, материалы лентой под ним */
  .lstage{display:block!important;padding:0!important}
  .lstage .bg{margin:0 0 14px!important}
  .lstage .mrail{margin:0;padding:4px 18px 8px}
  .lstage .mrail>.lc{flex-basis:62%;padding:12px;gap:12px}
  .lstage .mpager{padding:0 18px}
  .lc .th,.lc .chart,.lc .serp,.lc-social .th.tall,.lc .phone,.lc .slide,.lc .fan{aspect-ratio:4/3}
  .lc .tx b{font-size:15.5px}.lc .tx>span:last-child{font-size:13px;line-height:1.5}
  .lfacts{display:flex!important;overflow-x:auto;scrollbar-width:none;gap:0;margin-left:-18px;margin-right:-18px;padding:0 18px}
  .lfacts::-webkit-scrollbar{display:none}
  .lfacts li{flex:none;padding:16px 22px 16px 0!important;border:0!important;margin-right:22px;border-right:1px solid var(--line)!important}
  .lfacts li:last-child{border-right:0!important}

  /* материалы и мозг кабинета */
  .prod.mrail>.pcard{flex-basis:86%}
  .bento.mrail>.bc{flex-basis:88%;min-height:0}
  .bento.mrail{align-items:flex-start}
  .also ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  /* работы и шаги */
  .wgrid.mrail>.wcard{flex-basis:86%}
  .pipe.mrail>.hs{flex-basis:80%}
  .pipe.mrail{margin-top:34px}
  /* тарифы: одна карточка в кадре, соседняя выглядывает */
  .plans3.mrail{margin-top:8px}
  .plans3.mrail>.plan{flex-basis:86%;padding:26px 22px 26px}
  .extras.mrail>.xt{flex-basis:74%}
  .ops .spec td{font-size:14px}
  .plan .price{flex-wrap:wrap;row-gap:4px}
  .plan .price b{font-size:46px;white-space:nowrap}
  .fmt2 .fglass{grid-template-columns:1fr!important;gap:0}
  .fmt2 .fglass .fg{padding:20px;border-left:0!important;border-top:1px solid var(--line)}
  .fmt2 .fglass .fg:first-child{border-top:0}

  /* нижняя панель с главным действием */
  .mdock{display:flex;align-items:center;gap:12px;position:fixed;left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;padding:9px 9px 9px 18px;border-radius:20px;
    border:1px solid rgba(255,255,255,.12);background:rgba(14,12,10,.72);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:0 18px 50px -12px rgba(0,0,0,.7);
    transform:translateY(140%);opacity:0;transition:transform .5s var(--ease),opacity .35s}
  .mdock.on{transform:none;opacity:1}
  .m-open .mdock{opacity:0;pointer-events:none}
  .mdock .mt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mdock .mt b{font-size:13.5px;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mdock .mt em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg-2);white-space:nowrap}
  .mdock .btn{margin-left:auto;flex:none;padding:12px 16px;font-size:13.5px}

  /* подвал: колонки — аккордеон */
  footer.el .cols4.macc{display:block}
  .macc>div{border-bottom:1px solid var(--line)}
  .macc>div>h4{display:flex;align-items:center;justify-content:space-between;margin:0;padding:18px 0;cursor:pointer}
  .macc>div>h4::after{content:"";width:8px;height:8px;border-right:1px solid var(--fg-2);border-bottom:1px solid var(--fg-2);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
  .macc>div.open>h4::after{transform:rotate(-135deg)}
  footer.el .macc>div>a{display:none}
  footer.el .macc>div.open>a{display:block;padding:9px 0;font-size:15px}
  .macc>div.open>a:last-child{padding-bottom:18px}
}

/* планшет: сетки по две, тарифы в три узкие колонки, «весь запуск» лентой по две с половиной */
@media(min-width:761px) and (max-width:1100px){
  .mjs .lstage{display:block!important;padding:0!important}
  .mjs .lstage .bg{margin:0 0 16px!important}
  .mjs .lstage .mrail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 28px 8px;
    scroll-padding:0 28px;scrollbar-width:none}
  .mjs .lstage .mrail::-webkit-scrollbar{display:none}
  .mjs .lstage .mrail>.lc{flex:0 0 38%;scroll-snap-align:start}
  .mjs .lstage .mpager{display:flex;align-items:center;gap:14px;margin-top:14px;padding:0 28px}
  .mjs .lstage .mpager .mc{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fg-3)}
  .mjs .lstage .mpager .mc b{font-weight:400;color:var(--brass-hi)}
  .mjs .lstage .mpager .md{display:flex;gap:6px;margin-left:auto}
  .mjs .lstage .mpager .md button{width:6px;height:6px;padding:0;border:0;border-radius:6px;background:var(--line-2)}
  .mjs .lstage .mpager .md button.on{width:22px;background:var(--brass)}
  .plans3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}
  .plan{padding:24px 18px 26px}
  .plan .price b{font-size:40px}
  .lede{font-size:15.5px}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wgrid .wcard.next{grid-column:1/-1}
}

/* ══════════════════════════════════════════════════════════════════════
   21.10: тарифы Start / Pro / Agency / Custom. Карточка отвечает «на что хватит»:
   три крупные строки (объекты, фильм, кадры), лимиты ниже мелко. Custom —
   калькулятор: сумма → кредиты → сколько это объектов, фильмов, кадров. */
.price2 .pinc{margin-top:44px;border-radius:16px;padding:16px 22px;display:flex;align-items:center;
  gap:10px 22px;flex-wrap:wrap;background:rgba(12,10,8,.5);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
.price2 .pinc .lab{margin:0;color:var(--brass);white-space:nowrap}
.price2 .pinc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.price2 .pinc li{font-size:13px;color:var(--fg);padding:6px 12px;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);white-space:nowrap}
.plans4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.plans4 .plan{padding:26px 22px 24px;gap:14px}
.plans4 .plan .price{flex-wrap:wrap;row-gap:2px}
.plans4 .plan .price b{font-size:clamp(34px,3.1vw,44px)}
.plans4 .plan .pfor{margin:-6px 0 0;font-size:13.5px;line-height:1.45;color:var(--fg-2)}
.plans4 .plan .inc{font-size:11.5px;line-height:1.5;color:var(--brass-hi)}
.plans4 .fit{border-radius:12px;padding:12px 14px 6px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08)}
.plans4 .fit .lab{margin:0 0 4px;color:var(--brass);font-size:10px}
.plans4 .fit .ctl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:2px 0 2px;
  font:10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.plans4 .fit .big{margin:0;padding:9px 0;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:10px;align-items:baseline;font-size:14px;line-height:1.3;color:var(--fg)}
.plans4 .fit .big+.big{border-top:1px solid rgba(255,255,255,.07)}
.plans4 .fit .big b{grid-row:1/3;min-width:56px;font-size:26px;font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.plans4 .fit .big em{font-style:normal}
.plans4 .fit .big span{grid-column:2;font-size:12px;color:var(--fg-3);margin-top:2px}
.plans4 .plan.best .fit{background:rgba(214,178,112,.07);border-color:rgba(214,178,112,.2)}
.plans4 .plan.best .fit .big b{color:var(--brass-hi)}
.plans4 .plan li{font-size:13px}
.plans4 .fit output{font:600 13px/1 var(--mono);color:var(--fg);letter-spacing:0}
.plans4 .calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  margin:4px 0 2px;background:transparent;cursor:pointer;--v:8%}
.plans4 .calc input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;
  background:linear-gradient(90deg,#C79E5E,#F3DDB0) 0/var(--v) 100% no-repeat,rgba(255,255,255,.16)}
.plans4 .calc input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.16)}
.plans4 .calc input[type=range]::-moz-range-progress{height:3px;border-radius:3px;background:linear-gradient(90deg,#C79E5E,#F3DDB0)}
.plans4 .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;
  border-radius:50%;background:#F3DDB0;border:3px solid #1a140c;box-shadow:0 0 0 1px rgba(214,178,112,.6)}
.plans4 .calc input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#F3DDB0;
  border:3px solid #1a140c;box-shadow:0 0 0 1px rgba(214,178,112,.6)}
.plans4 .calc input[type=range]:focus-visible{outline:1px solid var(--brass);outline-offset:4px;border-radius:6px}
.plans4 .calc .cr{margin:0 0 2px;font:12px/1.4 var(--mono);color:var(--brass-hi)}
.plans4 .calc .cr em{font-style:normal}
.plans4 .fit .or{margin:0;padding:8px 0 10px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;line-height:1.45;color:var(--fg-3)}
/* 28.10: шапка «типичный месяц · $60» вместо «[ ENOUGH FOR ]» — одна форма у всех четырёх карточек */
.plans4 .fit .ctl{margin:2px 0 4px}
.plans4 .plan.best .fit output{color:var(--brass-hi)}
.plans4 .fit .big b span{grid-column:auto;margin:0;font-size:inherit;color:inherit}
.plans4 .fit .big b small{margin-left:1px;font-size:.6em;font-weight:500;letter-spacing:0}
@media(max-width:1180px){.plans4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.plans4{grid-template-columns:1fr}.price2 .pinc{padding:14px 16px}
  .price2 .pinc li{font-size:12px;padding:5px 10px}}

/* ══════════════════════════════════════════════════════════════════════
   21.10: экран загрузки главной. Пока первый фильм героя не набрал запас,
   поверх — бегущая строка материалов и латунная полоса прогресса. Включает его
   класс .pl на <html> (ставит скрипт в шапке), без JS экрана нет вовсе. */
#pl{display:none}
html.pl{overflow:hidden}
html.pl #pl{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;justify-content:center;
  background:var(--void);transition:opacity .8s var(--ease),visibility 0s linear .8s}
html.pl #pl.out{opacity:0;visibility:hidden}
#pl .pl-mark{position:absolute;top:clamp(22px,4vh,40px);left:0;right:0;display:flex;justify-content:center;
  align-items:center;gap:12px;font:11px/1 var(--mono);letter-spacing:.32em;color:var(--brass-hi)}
#pl .pl-mark svg{width:26px;height:26px}
#pl .pl-run{overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#pl .pl-run div{display:inline-flex;animation:mrun 16s linear infinite}
#pl .pl-run span{flex:none;padding-right:.6em;font-size:clamp(44px,9vw,132px);font-weight:600;
  letter-spacing:-.05em;line-height:1.05;color:transparent;
  background:linear-gradient(180deg,#FBF6EE 20%,#CDB894 100%);-webkit-background-clip:text;background-clip:text}
#pl .pl-run span i{font-style:normal;color:var(--brass);-webkit-text-fill-color:var(--brass);
  font-size:.38em;vertical-align:.55em;padding-left:.6em}
#pl .pl-run.r2 div{animation-direction:reverse;animation-duration:22s}
#pl .pl-run.r2 span{color:transparent;background:none;-webkit-text-stroke:1px rgba(231,218,193,.28)}
#pl .pl-run.r2 span i{-webkit-text-stroke:0;color:rgba(191,169,130,.4);-webkit-text-fill-color:rgba(191,169,130,.4)}
#pl .pl-bar{position:absolute;left:50%;bottom:clamp(30px,7vh,64px);width:min(420px,calc(100% - 32px));
  transform:translateX(-50%);display:grid;gap:12px}
#pl .pl-bar p{margin:0;display:flex;justify-content:space-between;font:10.5px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
#pl .pl-bar p b{font-weight:400;color:var(--brass-hi);font-variant-numeric:tabular-nums}
#pl .pl-bar i{display:block;height:1px;background:rgba(255,255,255,.12);overflow:hidden}
#pl .pl-bar i::after{content:"";display:block;height:100%;width:calc(var(--p,0)*100%);
  background:linear-gradient(90deg,#C79E5E,#F3DDB0);transition:width .35s var(--ease)}

/* 22.10: продуктов пять (Listing Launch Kit снят) — сетка 3 + 2, нижние две шире */
.prod{grid-template-columns:repeat(6,1fr)}
.prod>.pcard{grid-column:span 2}
.prod>.pcard:nth-child(4):nth-last-child(2),.prod>.pcard:nth-child(5):last-child{grid-column:span 3}
@media(max-width:1000px){.prod{grid-template-columns:repeat(2,1fr)}.prod>.pcard,.prod>.pcard:nth-child(n){grid-column:auto}
  .prod>.pcard:last-child:nth-child(odd){grid-column:1 / -1}}
@media(max-width:640px){.prod{grid-template-columns:1fr}.prod>.pcard:last-child:nth-child(odd){grid-column:auto}}

/* ---- 01.11: карточка Social Media Pack — видео вместо фото ---- */
.pcard .shot video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .shot video{transform:scale(1.04)}
#how .buildfilm video{object-fit:contain}

/* ---- 01.11: раздел Reels 9:16 (трюки камеры) — зеркально к #formats ---- */
#reels.rls{position:relative;overflow:hidden;isolation:isolate;padding:clamp(80px,9vw,130px) 0 clamp(70px,8vw,110px)}
.rls>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-2}
.rls>.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(270deg,rgba(5,4,3,.94) 0%,rgba(5,4,3,.78) 40%,rgba(5,4,3,.45) 72%,rgba(5,4,3,.55) 100%),
  linear-gradient(180deg,var(--void) 0%,transparent 18%,transparent 55%,rgba(5,4,3,.9) 80%,var(--void) 100%)}
.rls .rtop{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.rls h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;margin:10px 0 18px;letter-spacing:-.035em}
.rls .lede{max-width:46ch;font-size:16px}
.rls .phones{display:flex;justify-content:center;gap:18px;align-items:flex-end}
.rls .ph{margin:0;width:32%;max-width:260px;position:relative;border-radius:26px;padding:7px;
  background:rgba(12,10,8,.5);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.rls .ph1{transform:translateY(-34px);border-color:rgba(235,207,154,.38)}
.rls .ph video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:20px;background:#000}
.rls .ph figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 8px 4px}
.rls .ph b{font-size:13.5px;font-weight:500;color:#F2ECE3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rls .ph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.rls .rsteps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;
  background:rgba(12,10,8,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.rls .rsteps li{padding:16px 16px 15px;display:flex;flex-direction:column;gap:8px}
.rls .rsteps li+li{border-left:1px solid rgba(255,255,255,.1)}
.rls .rsteps b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--brass-hi);letter-spacing:.08em}
.rls .rsteps span{font-size:14px;color:#EDE6DA;line-height:1.3}
.rls .rsteps em{display:block;font-style:normal;font-size:12px;color:var(--fg-3);margin-top:4px}
.rls .fxchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.rls .fxchips span{padding:6px 12px;border-radius:99px;font-size:12.5px;color:#EDE6DA;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.rls .fxchips span:nth-child(-n+3){border-color:rgba(235,207,154,.4);color:var(--brass-hi)}
.rls .rprice{margin:20px 0 0;font-size:13.5px;color:var(--fg-2)}
.rls .rprice b{font-family:var(--mono);font-weight:400;color:var(--brass-hi);font-size:15px;margin-right:4px}
@media(max-width:980px){.rls .rtop{grid-template-columns:1fr}.rls .copy{order:-1}}
@media(max-width:560px){.rls .phones{gap:8px}.rls .ph{border-radius:16px;padding:4px}.rls .ph video{border-radius:12px}
  .rls .ph b{font-size:11.5px}.rls .ph1{transform:translateY(-18px)}
  .rls .rsteps{grid-template-columns:1fr}.rls .rsteps li+li{border-left:0;border-top:1px solid rgba(255,255,255,.1)}}

/* ---- 01.11 (вторая волна): Reels сразу после продуктов, «Inside» отдельной секцией,
        анализ рынка — своим блоком перед тарифами ---- */
/* 01.11c: «Внутри кабинета» и анализ рынка — один блок перед тарифами */
#inside .toolhead{margin-top:0}
#inside .bc-seo{grid-column:span 12;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  column-gap:30px;align-items:start}
#inside .bc-seo .bt{grid-column:1;grid-row:1}
#inside .bc-seo .kw{grid-column:1;grid-row:2;margin-top:6px}
#inside .bc-seo .serps{grid-column:2;grid-row:1/span 2;margin:4px 0 26px}
#inside .bc-mkt{grid-column:span 12;min-height:0;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);
  column-gap:34px;align-items:end;padding-bottom:0;scroll-margin-top:96px}
#inside .bc-mkt .bt{align-self:start;padding-bottom:26px}
#inside .bc-mkt .bchart{margin-top:0;z-index:3}
/* затемнение низа карточки съедало подписи показателей */
#inside .bc-mkt::after{display:none}
@media(max-width:980px){#inside .bc-mkt{grid-template-columns:1fr}
  #inside .bc-seo{grid-template-columns:1fr}
  #inside .bc-seo .bt,#inside .bc-seo .kw,#inside .bc-seo .serps{grid-column:1;grid-row:auto}}
#inside .mpts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column}
#inside .mpts li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
#inside .mpts b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-hi)}
#inside .mpts span{font-size:13.5px;color:#EDE6DA;line-height:1.45}
/* текст карточек был на грани различимого */
#inside .bc .bt p{color:rgba(242,236,227,.62)}
/* аналоги: точка остаётся круглой при любом растяжении графика */
.bchart .cmp path{fill:none;stroke:rgba(242,236,227,.72);stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bch-h .lg i.l3{width:8px;height:8px;border-radius:50%;background:rgba(242,236,227,.72)}
.bstats em{color:var(--fg-2)}
.bch-x{color:rgba(242,236,227,.5)}

/* ══════════════════════════════════════════════════════════════════════
   01.11c: цифры объекта на странице кейса — плитки-счётчики.
   Картинка в плитке сама считает: 30 кадров — мозаика из 30 настоящих кадров,
   13 слайдов — 13 слайдов презентации, 5 материалов — 5 полос. Каждая плитка
   ведёт к своему месту на странице. Референсы: крупные цифры в приглушённом
   золоте и кадр в рамке — 601 Inc. (refero); сетка плиток-кадров — Julia Krantz. */
.statband{padding:0 0 clamp(6px,1.2vw,14px)!important}
.statband::before{display:none}
.stat4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.st{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(250px,22vw,310px);padding:18px 20px 18px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(231,206,154,.16);background:#0B0908;color:inherit;text-decoration:none;
  transition:border-color .35s var(--ease)}
.st .art{position:absolute;inset:0;z-index:-2;display:block}
.st .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),opacity .5s;opacity:.88}
.st::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(5,4,3,.04) 0%,rgba(5,4,3,.14) 36%,rgba(5,4,3,.72) 66%,rgba(5,4,3,.94) 100%)}
.st:hover{border-color:rgba(231,206,154,.5)}
.st:hover .art img{transform:scale(1.04);opacity:1}
.st b{display:flex;align-items:baseline;gap:.12em;font-size:clamp(46px,5vw,72px);font-weight:500;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:transparent;
  background:linear-gradient(180deg,#FBF3E2 12%,#D9BC86 100%);-webkit-background-clip:text;background-clip:text}
.st b small{font-size:.42em;font-weight:500;letter-spacing:-.01em}
/* линейка фильма: одна риска — одна секунда */
.st .tk{display:block;height:7px;margin-bottom:12px;background:repeating-linear-gradient(90deg,rgba(231,218,193,.6) 0 1px,transparent 1px calc(100%/var(--n)))}
.st .k{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi)}
.st .n{margin-top:5px;font-size:13px;line-height:1.4;color:rgba(242,236,227,.66)}
.st .go{position:absolute;right:14px;top:14px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font-style:normal;font-size:12px;color:#F2E7D2;border:1px solid rgba(255,255,255,.2);background:rgba(10,9,8,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,border-color .3s,color .3s}
.st:hover .go{background:linear-gradient(135deg,#EBCF9A,#C79E5E);color:#1a1208;border-color:transparent}
@media(max-width:1000px){.stat4{grid-template-columns:repeat(2,minmax(0,1fr))}.st{min-height:230px}}
@media(max-width:760px){
  .st{min-height:0;aspect-ratio:1/1.02;padding:12px 13px 13px;border-radius:14px}
  .st b{font-size:clamp(38px,11vw,48px)}
  .st .k{margin-top:7px;font-size:9.5px;letter-spacing:.1em}
  .st .n{display:none}
  .st .go{right:9px;top:9px;width:26px;height:26px;font-size:11px}}

/* 01.11c: рилсы объекта на странице кейса */
#reels.crls{padding:clamp(70px,8vw,110px) 0}
.crls h2{font-size:clamp(30px,3vw,42px);line-height:1.06;letter-spacing:-.03em}
.crls.n2 h2{font-size:clamp(28px,2.7vw,38px)}
.crls .lede{color:#CFC8BC;max-width:50ch}
.crls>.veil{background:
  linear-gradient(90deg,rgba(5,4,3,.86) 0%,rgba(5,4,3,.66) 46%,rgba(5,4,3,.74) 100%),
  linear-gradient(180deg,var(--void) 0%,transparent 16%,transparent 60%,rgba(5,4,3,.9) 84%,var(--void) 100%)}
.crls .crhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:end}
.crls .rprice{margin:14px 0 0}
.crls .fxchips{margin-top:16px}
.crls .crow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(34px,4vw,52px);align-items:start}
.crls .crow .ph{width:auto;max-width:none}
.crls .crow .ph:nth-child(even){transform:translateY(26px);border-color:rgba(235,207,154,.32)}
.crls .crow{padding-bottom:26px}
/* два ролика: текст слева, телефоны справа, чтобы блок не оставался полупустым */
.crls.n2 .ctwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.crls.n2 .crhead{display:block}
.crls.n2 .crhead .cr-n{margin-top:18px}
.crls.n2 .crow{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
@media(max-width:980px){.crls .crhead,.crls.n2 .ctwo{grid-template-columns:1fr}.crls.n2 .crow{margin-top:8px}}

@media(max-width:1000px){
  #inside .bc::after{display:none}
  #inside .bc .bt{max-width:none}
  #inside .asks{flex-direction:row;flex-wrap:wrap;margin-top:14px}
  #inside .asks i{margin-left:0;transform:none}
  #inside .chat .ask{width:100%;box-sizing:border-box}
  #inside .aupd{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  #inside .au{flex-direction:column;align-items:stretch;gap:8px}
  #inside .au img{width:100%;height:auto;aspect-ratio:16/10}
}

/* 01.11d: оплата криптой — фирменный цвет только в самом значке */
.pay.btc svg{width:18px;height:18px;flex:none;display:block}

/* ══════════════════════════════════════════════════════════════════════
   01.11c: ревизия телефона (скриншоты Danny 13:26). Первый экран: фильм свободен
   сверху, всё держится у нижнего края, две компактные кнопки в ряд (как у Revolut).
   «One upload» на телефоне нет. Reels: ролики сразу после заголовка, шаги — строками
   без стекла. Карточки кабинета столбиком: лента давала чёрную дыру под короткой. */
@media(max-width:760px){
  :root{--sec:60px}
  .launch{display:none}
  #products::before{display:none}
  .btn{padding:11px 16px}

  /* герой */
  .hero.center.shot.filmhero{min-height:100svh;padding:84px 0 118px;display:flex;flex-direction:column;justify-content:center}
  .filmhero>.wrap{width:100%}
  .filmhero .fh-shade{background:
    radial-gradient(90% 26% at 50% 50%,rgba(5,4,3,.5),rgba(5,4,3,0) 100%),
    linear-gradient(180deg,rgba(5,4,3,.58) 0%,rgba(5,4,3,.08) 14%,rgba(5,4,3,.1) 62%,rgba(5,4,3,.82) 84%,var(--void) 100%)}
  .hero.center.shot.filmhero .badge{margin:0 auto 12px}
  .hero.center.shot.filmhero h1.markname{font-size:clamp(34px,10.4vw,44px);margin:0 auto 8px}
  .hero.center.shot.filmhero .claim{font-size:clamp(14px,3.8vw,16px);line-height:1.36;margin:0 auto 16px;max-width:none}
  .filmhero .btns{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:8px;width:auto;max-width:none;margin:0}
  .filmhero .btns .btn{flex:0 1 auto;justify-content:center;min-height:44px;padding:10px 16px;font-size:13.5px;white-space:nowrap}
  .filmhero .btns .btn:not(.gold) .arw{display:none}
  .fh-rail{bottom:20px}
  .fh-rail .wrap{gap:12px}
  .fh-case{align-self:center;max-width:100%;padding:0;gap:10px;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .fh-case:hover{background:none}
  .fh-case .pl{width:30px;height:30px}
  .fh-case .pl svg{width:10px;height:10px}
  .fh-case>span:last-child{min-width:0}
  .fh-case b{font-size:13px}
  .fh-case small{font-size:9px;letter-spacing:.07em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fh-ch button{padding-top:0}

  /* текст поверх фото не должен тонуть */
  .rls .lede,.how2 .lede{color:#CFC8BC}

  /* Reels */
  .rls .rtop{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .rls .rtop .copy{display:contents}
  .rls .rtop .copy .lab{order:1;margin-bottom:0}
  .rls .rtop .copy h2{order:2;margin:8px 0 12px}
  .rls .rtop .copy .lede{order:3}
  .rls .rtop .phones{order:4;margin:34px 0 0}
  .rls .rtop .rsteps{order:5}
  .rls .rtop .fxchips{order:6}
  .rls .rtop .rprice{order:7}
  .rls .rsteps{display:block;margin:18px 0 0;border:0;border-radius:0;background:none;overflow:visible;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .rls .rsteps li,.rls .rsteps li+li{display:flex;flex-direction:row;align-items:baseline;gap:10px;padding:9px 0;
    border:0;border-top:1px solid rgba(255,255,255,.1)}
  .rls .rsteps li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
  .rls .rsteps span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:13.5px}
  .rls .rsteps em{display:inline;margin:0;font-size:12px;color:rgba(242,236,227,.55)}
  .rls .fxchips{gap:5px;margin-top:14px}
  .rls .fxchips span{padding:4px 10px;font-size:11.5px}
  .rls .rprice{margin-top:14px;font-size:12.5px}

  .rls .rprice b{display:block;margin:0 0 2px}

  /* Reels на странице объекта */
  #reels.crls{padding:54px 0 44px}
  .crls h2,.crls.n2 h2{font-size:clamp(25px,6.9vw,30px)}
  .crls .crow.mrail{margin-top:24px;padding-bottom:8px}
  .crls .crow.mrail>.ph{flex-basis:60%;transform:none}
  .crls.n2 .crow{gap:10px;padding-bottom:0}
  .crls.n2 .crow .ph:nth-child(even){transform:none}
  .crls .crow .ph figcaption b{font-size:13px}

  /* внутри кабинета: столбик плотных карточек, без обрезанных выдач */
  #inside .bento{display:flex;flex-direction:column;gap:12px}
  #inside .bc{padding:18px 16px 0;border-radius:18px}
  #inside .bc::after{display:none}
  #inside .toolhead{gap:10px;margin-bottom:16px}
  #inside .toolhead h3{font-size:23px}
  .serps{height:auto;perspective:none;overflow:visible;display:grid;gap:8px}
  #inside .bc-seo .serps{margin:14px 0 0}
  .sr,.sr0,.sr1{position:relative;left:auto;top:auto;width:100%;transform:none;padding:11px 13px;border-radius:12px;box-shadow:none}
  .sr1{opacity:.82}
  .sr b{white-space:normal;font-size:14px;margin-bottom:3px}
  .sr p{font-size:12px;line-height:1.4}
  #inside .bc-seo .kw{margin:12px 0 16px;gap:6px}
  .kw i{font-size:10.5px;padding:4px 9px}
  .bc-ai .bt{padding-bottom:14px}
  .asks{display:none}
  .aiwin{margin:0 -16px;padding:14px 16px 16px;border-radius:0;border-left:0;border-right:0}
  .chat{gap:10px}
  .chat .ask{margin-top:0}
  .chat ul{grid-template-columns:1fr 1fr;padding:10px 12px;gap:7px 10px}
  .chat li{font-size:12px;gap:6px}
  .aupd{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .au{flex-direction:column;align-items:stretch;gap:6px;padding:6px}
  .au img{width:100%;height:auto;aspect-ratio:4/3}
  .au b{font-size:12.5px}
  .au em{font-size:9px;letter-spacing:.08em}
  #inside .bc-mkt .bt{padding-bottom:14px}
  #inside .mpts{margin-top:12px}
  #inside .mpts li{padding:9px 0;gap:2px}
  #inside .mpts b{font-size:10px}
  #inside .mpts span{font-size:13px;line-height:1.4}
  #inside .bc-mkt .bchart{margin:0 -16px;border-radius:0;border-left:0;border-right:0;padding:14px 16px 16px}
  .bch-h{gap:8px;margin-bottom:8px;font-size:9.5px}
  .bch-h .lg{gap:5px;flex-wrap:wrap}
  .bch-h .lg i:first-child{margin-left:0}
  .bch-plot{height:150px}
  /* подпись точки — влево от неё, справа ей не хватает места */
  .bchart .pin b{left:auto;right:16px;top:-28px;font-size:11px;padding:3px 9px}
  .bstats b{font-size:18px}
  .bstats em{font-size:9px;letter-spacing:.08em}
  .bstats span{padding-top:10px;flex-direction:column;align-items:flex-start;gap:2px}
  .bstats span+span{padding-left:10px}
  .also{margin-top:12px;padding:14px 16px}
  .also ul{gap:12px 14px}

  /* работы: кнопка вела на соседний экран */
  #work .wrap>.btns{display:none}

  /* тарифы: одна карточка в кадре, вкладки сверху */
  .plans4.mrail{margin-top:0}
  .plans4.mrail>.plan{flex-basis:88%;padding:22px 18px 20px}

  /* нижняя панель: ниже и тише */
  .mdock{padding:6px 6px 6px 15px;border-radius:17px}
  .mdock .mt b{font-size:13px}
  .mdock .mt em{font-size:9.5px}
  .mdock .btn{padding:0;width:40px;height:40px;justify-content:center;font-size:15px}
  .mdock{color:inherit;text-decoration:none}
  .mdock .btn .arw{margin:0}
}

/* 01.11h: тарифы кейса — на компьютере как раньше, на телефоне кнопка */
.casepr{display:contents}
.mprice{display:none}
@media(max-width:760px){
  .casepr{display:none}
  .mprice{display:block;padding:40px 0}
  .mprice .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  .mprice .lab{margin:0 0 8px}
  .mprice .mp-t{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#F2ECE3}
}

/* 01.11h (Danny): кейс на телефоне без исходных фото и анализа рынка — занимают много места */
@media(max-width:760px){
  .srcphotos,.intel .ic-mkt{display:none}
  .st[href="#gal"]{pointer-events:none}
  .st[href="#gal"] .go{display:none}
}