/* 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)}
@media(max-width:920px){.menu a:not(.go):not(.lng){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 .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%)}