/* Шрифты со своего домена. Раньше подключались с fonts.googleapis.com
   и блокировали рендер: браузер ждал ответа чужого хоста, прежде чем
   показать текст. Оставлены только latin и cyrillic. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   WEBSITES STUDIO — «СВЕТОВАЯ СТУДИЯ»
   Мир: белая циклорама фотостудии. На подиуме левитирует
   дихроичное стекло. Интерфейс монохромный — весь цвет живёт
   внутри 3D-объекта. Один сигнальный оттенок на всю страницу.
   ============================================================= */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  color-scheme: light;

  --bone:#F2F1ED;
  --bone-2:#E8E6E0;
  --paper:#FFFFFF;
  --ink:#0E1116;
  --ink-2:#2B313A;
  --graphite:#666D77;
  --graphite-2:#8C939C;
  --hair:rgba(14,17,22,.10);
  --hair-soft:rgba(14,17,22,.055);
  --ember:#FF5A2B;
  --ember-ink:#D63B10;
  --ember-wash:rgba(255,90,43,.10);

  --f-dis:"Unbounded","Segoe UI",-apple-system,sans-serif;
  --f-txt:"Onest","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --f-mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;

  /* студийный свет: тени мягкие, многослойные, чуть тёплые */
  --sh-1:0 1px 2px rgba(14,17,22,.04), 0 4px 14px rgba(14,17,22,.045);
  --sh-2:0 2px 5px rgba(14,17,22,.04), 0 14px 38px rgba(14,17,22,.07);
  --sh-3:0 4px 12px rgba(14,17,22,.05), 0 30px 80px rgba(14,17,22,.13);

  --r-s:12px;
  --r-m:20px;
  --r-l:32px;
  --pad:clamp(20px,4.2vw,64px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--f-txt);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* Стиль фокуса не должен менять геометрию элемента: border-radius здесь
   перекраивал форму кнопки, и вокруг бургера рисовался оранжевый квадрат. */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
::selection{background:var(--ink);color:var(--bone)}

.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. ТИПОГРАФИКА ---------- */
/* overflow-wrap срабатывает только когда слово физически не влезает,
   поэтому на десктопе ничего не меняет, а на 320 px спасает от прокрутки
   («конфиденциальности» шире колонки). */
h1,h2,h3,h4{margin:0;font-family:var(--f-dis);font-weight:300;letter-spacing:-.035em;line-height:.98;
  text-wrap:balance;overflow-wrap:break-word}
@media (max-width:480px){h1,h2,h3{hyphens:auto}}
/* Unbounded заметно шире привычных гротесков (~0.67em на знак), а колонка
   упирается в --maxw. Верхняя граница подобрана так, чтобы самая длинная
   строка заголовка помещалась в неё и на 1440, и на 4K. */
h1{font-size:clamp(2rem,4.05vw,3.6rem);letter-spacing:-.045em;line-height:1.02}
h2{font-size:clamp(2rem,4.8vw,4.2rem)}
h3{font-family:var(--f-txt);font-weight:600;font-size:1.22rem;letter-spacing:-.015em;line-height:1.25}
h4{font-family:var(--f-txt);font-weight:600;font-size:1rem;letter-spacing:-.01em}
p{margin:0}
strong{font-weight:600}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
}
.tag--ember{color:var(--ember-ink)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag.tag--bare::before{display:none}

.lede{font-size:clamp(1.02rem,1.28vw,1.2rem);line-height:1.6;color:var(--graphite);max-width:60ch}
.num{font-variant-numeric:tabular-nums}

/* ---------- 4. ДВИЖЕНИЕ ---------- */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-rise].is-in{opacity:1;transform:none}
[data-rise-d="1"]{transition-delay:.08s}
[data-rise-d="2"]{transition-delay:.16s}
[data-rise-d="3"]{transition-delay:.24s}
[data-rise-d="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 5. КНОПКИ ---------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;line-height:1;
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),color .35s var(--ease);
  box-shadow:var(--sh-1);
}
.btn>span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:var(--ember);
  transform:translateY(101%);transition:transform .55s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--hair);box-shadow:none}
.btn--ghost:hover{--btn-fg:var(--paper);box-shadow:var(--sh-1)}
.btn--ghost::before{background:var(--ink)}

.btn--ember{--btn-bg:var(--ember);--btn-fg:#FFF;--btn-bd:var(--ember)}
.btn--ember::before{background:var(--ink)}

.btn--lg{padding:19px 34px;font-size:1rem}
.btn--sm{padding:12px 20px;font-size:.88rem}
.btn--full{width:100%}

.btn .arw{transition:transform .5s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- 6. ШАПКА ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:transform .5s var(--ease-out);
}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr__in{
  max-width:var(--maxw);margin-inline:auto;
  padding:14px var(--pad);
  display:flex;align-items:center;gap:28px;
}
.hdr__bar{
  position:absolute;inset:0;
  background:rgba(242,241,237,0);backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease);
}
.hdr.is-stuck .hdr__bar{
  background:rgba(242,241,237,.78);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hair-soft);
}
.hdr__in>*{position:relative;z-index:1}

.logo{display:inline-flex;align-items:center;gap:11px}
/* Знак — картинка с прозрачным фоном, поэтому ни заливки, ни скругления
   здесь быть не должно: они бы нарисовали плашку вокруг логотипа. */
.logo__glyph{
  width:34px;height:34px;flex:none;display:block;object-fit:contain;
  transition:transform .55s var(--ease-out);
}
.logo:hover .logo__glyph{transform:rotate(-8deg) scale(1.06)}
.logo__txt{display:grid;line-height:1.05}
.logo__txt b{font-family:var(--f-dis);font-weight:400;font-size:.95rem;letter-spacing:-.03em}
.logo__txt i{font-style:normal;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--graphite-2);text-transform:uppercase}

.hdr__nav{display:flex;gap:4px;margin-left:auto}
.hdr__nav a{
  padding:9px 15px;border-radius:999px;font-size:.92rem;color:var(--ink-2);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.hdr__nav a:hover,.hdr__nav a.is-active{background:rgba(14,17,22,.06);color:var(--ink)}
.hdr__cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdr__nav+.hdr__cta{margin-left:0}

/* Без плашки и рамки — только полоски. 46px оставлены как область
   нажатия: сама кнопка прозрачная, но попасть пальцем легко. */
.burger{
  display:none;width:46px;height:46px;flex:none;
  border:0;background:none;box-shadow:none;padding:0;
  align-items:center;justify-content:center;
  transition:transform .3s var(--ease-out);
}
.burger:active{transform:scale(.9)}
.burger span{
  display:block;width:18px;height:1.6px;background:var(--ink);border-radius:2px;position:relative;
  transition:transform .42s var(--ease-out),background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .42s var(--ease-out),opacity .25s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{transform:translateY(6px) rotate(45deg)}
.burger.is-open span::after{transform:translateY(-6px) rotate(-45deg)}

/* 1000px — шапке нужно 862px под логотип, меню и кнопку; на 1024 остаётся
   запас, поэтому ноутбуки получают полную десктопную шапку, а не бургер */
@media (max-width:1000px){
  .hdr__nav{display:none}
  .burger{display:inline-flex}
  /* Вправо всё толкает .hdr__nav своим margin-left:auto, а правило
     .hdr__nav+.hdr__cta{margin-left:0} это компенсирует. Здесь навигация
     скрыта, но селектор соседа продолжает срабатывать — display:none его
     не отменяет — и бургер прилипал к логотипу. Возвращаем auto. */
  .hdr__nav+.hdr__cta{margin-left:auto}
}
@media (max-width:600px){ .hdr__cta .btn{display:none} }

/* мобильное меню */
.sheet{
  position:fixed;inset:0;z-index:190;background:var(--bone);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.sheet.is-open{opacity:1;visibility:visible}
/* min-height:100% + flex — подвал прижат вниз, но на низких экранах
   меню спокойно прокручивается, а не обрезается */
.sheet__in{
  min-height:100%;display:flex;flex-direction:column;
  padding:84px var(--pad) calc(24px + env(safe-area-inset-bottom));
}

.sheet__nav{display:flex;flex-direction:column}
/* без разделителей: ритм задаёт отступ, линии тут только шумят */
.sheet__nav a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
  padding:13px 0;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .3s var(--ease);
}
/* меню открывается программно — рамка фокуса тут выглядит как «выделенный» пункт */
.sheet:focus,.sheet:focus-visible{outline:none}
.sheet__nav a i{
  font-style:normal;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--graphite-2);
}
.sheet__nav a span{
  font-family:var(--f-dis);font-weight:300;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(1.5rem,6.2vw,2.05rem);
}
.sheet__nav a:active{color:var(--ember-ink)}
.sheet.is-open .sheet__nav a{opacity:1;transform:none}
.sheet.is-open .sheet__nav a:nth-child(1){transition-delay:.05s}
.sheet.is-open .sheet__nav a:nth-child(2){transition-delay:.10s}
.sheet.is-open .sheet__nav a:nth-child(3){transition-delay:.15s}
.sheet.is-open .sheet__nav a:nth-child(4){transition-delay:.20s}
.sheet.is-open .sheet__nav a:nth-child(5){transition-delay:.25s}
.sheet.is-open .sheet__nav a:nth-child(6){transition-delay:.30s}
.sheet.is-open .sheet__nav a:nth-child(7){transition-delay:.35s}

.sheet__foot{
  margin-top:auto;padding-top:28px;display:grid;gap:14px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out) .38s,transform .5s var(--ease-out) .38s;
}
.sheet.is-open .sheet__foot{opacity:1;transform:none}
.sheet__links{display:grid;gap:8px}
.sheet__links a{
  display:grid;gap:2px;padding:12px 16px;border-radius:14px;
  background:var(--paper);border:1px solid var(--hair-soft);box-shadow:var(--sh-1);
}
.sheet__links i{
  font-style:normal;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--graphite-2);
}
.sheet__links b{font-weight:500;font-size:.95rem;overflow-wrap:anywhere}
.sheet__geo{font-size:.82rem;color:var(--graphite-2);text-align:center}

@media (prefers-reduced-motion:reduce){
  .sheet__nav a,.sheet__foot{opacity:1;transform:none;transition:none}
}

/* ---------- 7. ГЕРОЙ ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0 48px;overflow:hidden}
/* мягкий световой пол циклорамы */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(232,230,224,0),rgba(232,230,224,.55));
  pointer-events:none;
}
.hero__stage{
  position:absolute;inset:0;z-index:0;
}
.hero__stage canvas{display:block;width:100%;height:100%}
/* постер-заглушка, пока/если 3D недоступен */
.hero__poster{
  position:absolute;inset:0;
  background:
    radial-gradient(46% 40% at 62% 42%,rgba(255,155,210,.55),transparent 62%),
    radial-gradient(40% 44% at 44% 56%,rgba(124,224,255,.55),transparent 64%),
    radial-gradient(30% 30% at 56% 62%,rgba(255,208,138,.6),transparent 60%);
  filter:blur(28px);
  opacity:1;transition:opacity 1.1s var(--ease-out);
}
.hero__stage.is-live .hero__poster{opacity:0}

.hero__in{position:relative;z-index:2;width:100%;padding-top:clamp(56px,7vh,88px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
/* пустая колонка резервирует место под 3D — сцена читает её геометрию */
.hero__void{display:none}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,2.6vw,44px)}
  .hero__void{display:block;aspect-ratio:1/1;max-height:58vh;width:100%}
}
/* на узких экранах объект уходит за текст — подкладываем читаемость */
@media (max-width:1023px){
  .hero__in{padding-top:clamp(104px,17vh,180px)}
  .hero__copy{position:relative}
  .hero__copy::before{
    content:"";position:absolute;inset:-6% -8% -4% -8%;z-index:-1;
    background:radial-gradient(70% 56% at 40% 46%,rgba(242,241,237,.94) 0%,rgba(242,241,237,.72) 52%,rgba(242,241,237,0) 78%);
    pointer-events:none;
  }
}

.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:26px}
.pip{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:none;position:relative}
.pip::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ember);animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3.4);opacity:0}}

/* Строки проявляются со сдвигом, но без маски overflow: длинное слово
   при переносе на узком экране никогда не окажется срезанным. */
h1 .row{display:block}
h1 .row>i{display:block;font-style:normal;opacity:0;transform:translateY(18px);
  animation:swing .85s var(--ease-out) forwards}
h1 .row:nth-child(2)>i{animation-delay:.1s}
h1 .row:nth-child(3)>i{animation-delay:.2s}
@keyframes swing{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){h1 .row>i{opacity:1;transform:none;animation:none}}
h1 .accent{
  font-weight:400;
  background:linear-gradient(96deg,#FF5A2B 0%,#E0429B 42%,#6C63FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero__sub{max-width:52ch;margin-top:28px;font-size:clamp(1.02rem,1.3vw,1.22rem);color:var(--ink-2)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__marks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px}
.hero__marks li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--graphite);list-style:none}
.hero__marks svg{flex:none;color:var(--ember)}
.hero__marks{padding:0;margin-block:28px 0}

/* метрики на «стеклянной полке» */
.hero__meters{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(40px,6vw,72px);
  border-radius:var(--r-l);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.meter{padding:clamp(18px,2.2vw,28px);position:relative}
.meter+.meter::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--hair-soft)}
.meter b{
  display:block;font-family:var(--f-dis);font-weight:300;letter-spacing:-.05em;
  font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1;
}
.meter i{display:block;font-style:normal;margin-top:8px;font-size:.82rem;color:var(--graphite);line-height:1.35}
.meter__star{color:var(--ember);font-size:.56em;margin-left:.14em;vertical-align:.22em;line-height:1}
@media (max-width:760px){
  .hero__meters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meter:nth-child(3)::before,.meter:nth-child(1)::before{display:none}
  .meter:nth-child(n+3){border-top:1px solid var(--hair-soft)}
}

.scrollhint{
  position:absolute;left:var(--pad);bottom:26px;z-index:2;
  display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--graphite-2);
}
.scrollhint span{width:34px;height:1px;background:var(--graphite-2);position:relative;overflow:hidden}
.scrollhint span::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:swipe 2.6s var(--ease) infinite}
@keyframes swipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:900px){.scrollhint{display:none}}

/* ---------- 8. ЛЕНТА ТЕХНОЛОГИЙ ---------- */
.strip{padding:26px 0;border-block:1px solid var(--hair-soft);background:var(--paper);overflow:hidden}
.strip__row{display:flex;width:max-content;gap:0;animation:drift 46s linear infinite}
.strip:hover .strip__row{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.strip__row span{
  display:flex;align-items:center;gap:44px;padding-inline:22px;white-space:nowrap;
  font-family:var(--f-dis);font-weight:300;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:-.03em;color:var(--ink-2);
}
.strip__row span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}

/* ---------- 9. СЕКЦИИ ---------- */
.sec{padding:clamp(72px,9vw,140px) 0;position:relative}
.sec--tight{padding-block:clamp(56px,6vw,90px)}
.sec__head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:var(--maxw)}
.sec__head--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:end}
@media (max-width:900px){.sec__head--split{grid-template-columns:minmax(0,1fr);align-items:start}}
.sec__head h2 .soft{color:var(--graphite-2)}

/* ---------- 10. УСЛУГИ ---------- */
.svc{display:grid;gap:14px}
.svc__item{
  background:var(--paper);border-radius:var(--r-l);border:1px solid var(--hair-soft);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow .55s var(--ease-out),transform .55s var(--ease-out);
}
.svc__item:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.svc__item.is-open{box-shadow:var(--sh-2)}
.svc__btn{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(14px,2.6vw,36px);align-items:center;
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,36px);text-align:left;
}
.svc__no{font-family:var(--f-mono);font-size:.72rem;color:var(--graphite-2);letter-spacing:.1em}
.svc__name{
  font-family:var(--f-dis);font-weight:300;letter-spacing:-.035em;
  font-size:clamp(1.25rem,2.6vw,2.1rem);line-height:1.05;
  transition:transform .5s var(--ease-out);
}
.svc__item:hover .svc__name{transform:translateX(8px)}
.svc__price{font-family:var(--f-mono);font-size:clamp(.78rem,1vw,.92rem);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.svc__price em{font-style:normal;color:var(--graphite-2)}
.svc__plus{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);flex:none;
  position:relative;transition:background .45s var(--ease),border-color .45s var(--ease),transform .5s var(--ease-out);
}
.svc__plus::before,.svc__plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity .35s var(--ease),background .35s var(--ease);
}
.svc__plus::before{width:13px;height:1.5px}
.svc__plus::after{width:1.5px;height:13px}
.svc__item.is-open .svc__plus{background:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.svc__item.is-open .svc__plus::before{background:var(--paper)}
.svc__item.is-open .svc__plus::after{opacity:0}

.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.svc__item.is-open .svc__panel{grid-template-rows:1fr}
.svc__panel>div{overflow:hidden;min-height:0}
.svc__body{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);
  padding:0 clamp(20px,2.8vw,36px) clamp(24px,3vw,34px);
  border-top:1px solid var(--hair-soft);padding-top:clamp(22px,2.6vw,30px);
}
.svc__body p{color:var(--graphite);max-width:46ch}
.svc__feat{display:flex;flex-wrap:wrap;gap:8px;align-content:start;padding:0;margin:0;list-style:none}
.svc__feat li{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);background:var(--bone);border-radius:999px;padding:8px 14px;
}
.svc__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-family:var(--f-mono);font-size:.74rem;color:var(--graphite-2)}
@media (max-width:820px){
  .svc__btn{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px}
  .svc__no{display:none}
  .svc__price{grid-column:1;grid-row:2;justify-self:start}
  .svc__plus{grid-row:1/3}
  .svc__item:hover .svc__name{transform:none}
  .svc__body{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 11. КЕЙСЫ (3D-плиты) ---------- */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);perspective:1600px}
@media (max-width:860px){.cases{grid-template-columns:minmax(0,1fr)}}
.kase{
  position:relative;background:var(--paper);border-radius:var(--r-l);
  border:1px solid var(--hair-soft);box-shadow:var(--sh-1);
  padding:clamp(14px,1.6vw,18px);
  transform-style:preserve-3d;
  transition:box-shadow .6s var(--ease-out),transform .18s linear;
  will-change:transform;
}
.kase:hover{box-shadow:var(--sh-3)}
.kase__shot{
  position:relative;border-radius:22px;overflow:hidden;background:var(--bone-2);
  aspect-ratio:16/9;
}
.kase__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1s var(--ease-out),filter .6s var(--ease);
  transform:scale(1.02);
}
.kase:hover .kase__shot img{transform:scale(1.07)}
.kase__gloss{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.18) 100%);
  opacity:0;transition:opacity .5s var(--ease);
}
.kase:hover .kase__gloss{opacity:1}
.kase__live{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  box-shadow:var(--sh-1);
}
.kase__live b{width:6px;height:6px;border-radius:50%;background:#1FBF6B;animation:ping2 2s var(--ease) infinite}
@keyframes ping2{0%,100%{opacity:1}50%{opacity:.35}}
.kase__body{padding:clamp(18px,2vw,24px) clamp(8px,1vw,12px) clamp(8px,1vw,10px);display:grid;gap:12px}
.kase__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.kase__res{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ember-ink);
  background:var(--ember-wash);padding:6px 11px;border-radius:999px;white-space:nowrap;
}
.kase__body p{color:var(--graphite);font-size:.98rem}
.kase__stack{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:4px 0 0;list-style:none}
.kase__stack li{font-family:var(--f-mono);font-size:.68rem;color:var(--graphite);border:1px solid var(--hair);padding:5px 11px;border-radius:999px}
.kase__go{position:absolute;inset:0;border-radius:var(--r-l);z-index:3}

/* ведущий кейс — во всю ширину, изображение и текст рядом */
.kase--lead{grid-column:1/-1}
.kase__more{color:var(--graphite);font-size:.95rem}
.kase__open{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:.9rem;font-weight:500;color:var(--ember-ink);
}
.kase__open svg{transition:transform .45s var(--ease-out)}
.kase:hover .kase__open svg{transform:translate(3px,-3px)}
@media (min-width:900px){
  .kase--lead{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(16px,2.2vw,30px);align-items:center}
  .kase--lead .kase__body{padding:clamp(10px,1.4vw,20px) clamp(14px,1.8vw,26px)}
}

/* заглушка, пока скриншот кейса не добавлен в assets */
.kase__shot.is-empty{
  background:
    radial-gradient(58% 58% at 28% 30%,rgba(255,90,43,.24),transparent 70%),
    radial-gradient(52% 52% at 72% 72%,rgba(108,99,255,.24),transparent 70%),
    var(--bone-2);
}
.kase__shot.is-empty::after{
  content:"Скриншот скоро появится";
  position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
}

/* карточка-приглашение — тоже во всю ширину */
.kase--invite{
  grid-column:1/-1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px clamp(24px,4vw,48px);
  background:var(--ink);color:var(--bone);border-color:var(--ink);
  padding:clamp(28px,4vw,52px);
}
.kase--invite>div{display:grid;gap:12px}
.kase--invite h3{font-family:var(--f-dis);font-weight:300;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.04em;line-height:1.05}
.kase--invite p{color:rgba(242,241,237,.66);max-width:46ch}
.kase--invite .btn{--btn-bg:var(--bone);--btn-fg:var(--ink);--btn-bd:var(--bone);flex:none}
.kase--invite .btn::before{background:var(--ember)}
.kase--invite .btn:hover{--btn-fg:#FFF}

/* ---------- 12. КОНФИГУРАТОР ---------- */
.cfg{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  background:var(--paper);border-radius:var(--r-l);border:1px solid var(--hair-soft);
  box-shadow:var(--sh-2);overflow:hidden;
}
.cfg__sticky{display:none}

@media (max-width:960px){
  .cfg{grid-template-columns:minmax(0,1fr)}
  /* sticky не работает внутри overflow:hidden — скругление переносим
     на сами панели, а обёртку отпускаем */
  .cfg{overflow:visible}
  .cfg__l{border-radius:var(--r-l) var(--r-l) 0 0}
  .cfg__r{border-radius:0 0 var(--r-l) var(--r-l)}

  .cfg__sticky{
    position:sticky;top:10px;z-index:6;
    margin:12px clamp(12px,3vw,18px) -4px;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:11px 18px;border-radius:999px;
    background:var(--ink);color:var(--bone);box-shadow:var(--sh-2);
  }
  .cfg__sticky b{
    font-family:var(--f-dis);font-weight:300;letter-spacing:-.04em;
    font-size:clamp(1.15rem,4.6vw,1.4rem);line-height:1;
  }
  .cfg__sticky span{
    font-family:var(--f-mono);font-size:.72rem;color:rgba(242,241,237,.7);white-space:nowrap;
  }

  /* компактнее по вертикали: на телефоне блок был длиной в три экрана */
  .cfg__l{padding:clamp(18px,4vw,26px);gap:18px}
  .cfg__r{padding:clamp(18px,4vw,26px)}
  .cfg__stage{height:clamp(140px,30vw,180px)}
  .cfg__sum b{font-size:clamp(1.9rem,8vw,2.4rem)}
  .cfg__bill{margin-top:16px}
  .cfg__bill li{padding:7px 0;font-size:.86rem}
  .cfg__rows{margin-top:16px}
  .cfg__inc li{font-size:.62rem;padding:6px 11px}
}
.cfg__l{padding:clamp(24px,3.2vw,44px);display:grid;gap:clamp(22px,2.6vw,32px);align-content:start}
.cfg__grp{display:grid;gap:14px}
.cfg__grp>.tag{margin-bottom:2px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1px solid var(--hair);border-radius:999px;padding:11px 18px;
  font-size:.92rem;color:var(--ink-2);background:var(--paper);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out);
}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"]:hover{background:var(--ink-2)}

.cfg__r{
  position:relative;padding:clamp(24px,3.2vw,44px);
  background:var(--bone);border-left:1px solid var(--hair-soft);
  display:grid;align-content:space-between;gap:26px;
}
@media (max-width:960px){.cfg__r{border-left:0;border-top:1px solid var(--hair-soft)}}
/* Своя полоса, а не подложка под текстом: модель никогда не пересекается
   с ценой и её углы не режутся краем панели. */
.cfg__stage{position:relative;width:100%;height:clamp(190px,25vh,270px);
  border-radius:18px;overflow:hidden;pointer-events:none}
.cfg__stage canvas{display:block;width:100%;height:100%}
.cfg__sum b{
  display:block;font-family:var(--f-dis);font-weight:300;letter-spacing:-.05em;
  font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;margin-top:10px;
}
/* «уже входит в цену» — снимает вопрос «а за что я плачу сверху» */
.cfg__inc{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.cfg__inc li{
  display:flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--graphite);background:var(--bone);border-radius:999px;padding:7px 13px;
}
.cfg__inc li::before{content:"";width:5px;height:5px;border-radius:50%;background:#1FBF6B;flex:none}

/* построчная смета: сумма должна объясняться, а не появляться из воздуха */
.cfg__bill{list-style:none;margin:20px 0 0;padding:0;display:grid}
.cfg__bill li{
  display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:.9rem;
  border-bottom:1px dashed var(--hair-soft);
}
.cfg__bill li:last-child{border-bottom:0}
.cfg__bill li span:last-child{
  font-family:var(--f-mono);font-size:.83rem;color:var(--graphite);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cfg__bill li:first-child span{font-weight:500;color:var(--ink)}
.cfg__bill li.is-rush span,.cfg__bill li.is-rush span:last-child{color:var(--ember-ink)}

.cfg__rows{margin-top:20px;display:grid;border-top:1px solid var(--hair);padding-top:6px}
.cfg__row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair-soft);font-size:.92rem}
.cfg__row:last-child{border-bottom:0}
.cfg__row span:last-child{font-family:var(--f-mono);font-size:.86rem;color:var(--graphite);font-variant-numeric:tabular-nums;text-align:right}
.cfg__note{font-size:.82rem;color:var(--graphite-2);line-height:1.5}
.cfg__acts{display:grid;gap:14px}

/* ---------- 13. ПРОЦЕСС ---------- */
.flow{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow{grid-template-columns:minmax(0,1fr)}}
.stp{
  background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r-m);
  padding:clamp(20px,2.4vw,28px);display:grid;gap:11px;align-content:start;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.stp:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.stp__no{
  font-family:var(--f-dis);font-weight:300;font-size:2.6rem;letter-spacing:-.06em;line-height:1;
  color:var(--bone-2);position:absolute;top:16px;right:20px;
  transition:color .5s var(--ease);
}
.stp:hover .stp__no{color:var(--ember)}
.stp .tag{margin-bottom:2px}
.stp p{font-size:.94rem;color:var(--graphite)}
.stp__free{
  margin-top:6px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--bone);border-radius:999px;padding:7px 12px;justify-self:start;
}

/* ---------- 14. ДОВЕРИЕ ---------- */
/* Формат как на прежнем сайте: слева команда и диплом за 2 место друг под
   другом, справа вертикальный диплом во всю высоту. Пропорции карточек равны
   пропорциям самих документов — тогда изображение заполняет карточку целиком
   и при этом ничего не срезается. Подписи лежат поверх нижнего края. */
.proof{
  display:grid;gap:clamp(12px,1.3vw,18px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.045fr);
  align-items:stretch;
}
.proof figure{
  position:relative;margin:0;overflow:hidden;background:var(--bone-2);
  border:1px solid var(--hair-soft);border-radius:var(--r-l);box-shadow:var(--sh-1);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.proof figure:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.proof figure:nth-of-type(1){grid-column:1;aspect-ratio:1179/752}   /* фото команды */
.proof figure:nth-of-type(2){grid-column:1;aspect-ratio:1278/933}   /* диплом за 2 место */
.proof figure:nth-of-type(3){grid-column:2;grid-row:1/3}            /* диплом за 3 место */

.proof__img{position:absolute;inset:0}
/* contain гарантирует, что документ не обрежется; при совпадающих
   пропорциях полей практически не остаётся */
.proof__img img{width:100%;height:100%;object-fit:contain;
  transition:transform 1.1s var(--ease-out)}
.proof__img--photo img{object-fit:cover}
.proof figure:hover .proof__img img{transform:scale(1.03)}

.proof figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(15px,1.6vw,22px);display:grid;gap:4px;color:#fff;
  background:linear-gradient(to top,rgba(11,14,19,.92),rgba(11,14,19,.66) 58%,rgba(11,14,19,0));
}
.proof figcaption strong{font-size:clamp(.95rem,1.1vw,1.05rem)}
.proof figcaption span{font-size:clamp(.84rem,.95vw,.92rem);color:rgba(242,241,237,.76);line-height:1.4}

@media (max-width:900px){
  .proof{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .proof figure:nth-of-type(2){grid-column:1}
  .proof figure:nth-of-type(3){grid-column:1;grid-row:auto;aspect-ratio:960/1280}
}

/* Разделители — через gap на фоне контейнера: работают при любом числе
   колонок, в отличие от border + nth-child. */
.pledge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(20px,3vw,34px);
  background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-1)}
@media (min-width:1120px){.pledge{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pledge{grid-template-columns:minmax(0,1fr)}}
.pledge__i{background:var(--paper);padding:clamp(18px,2vw,26px);display:grid;gap:8px;align-content:start}
/* последний пункт добирает остаток строки, чтобы не зияла пустая ячейка */
.pledge__i:last-child{grid-column:1/-1}
.pledge__i p{font-size:.94rem;color:var(--graphite);max-width:46ch}
.pledge__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--ember-ink)}

/* ---------- 15. ОТЗЫВЫ ---------- */
.rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rail__row{display:flex;gap:16px;width:max-content;animation:drift 74s linear infinite}
.rail:hover .rail__row{animation-play-state:paused}
.rail--rev .rail__row{animation-direction:reverse;animation-duration:88s}
.rev{
  width:min(400px,80vw);background:var(--paper);border:1px solid var(--hair-soft);
  border-radius:var(--r-m);padding:26px;display:grid;gap:14px;align-content:start;box-shadow:var(--sh-1);
}
.rev__stars{color:var(--ember);font-size:.82rem;letter-spacing:.16em}
.rev p{font-size:.98rem;color:var(--ink-2);line-height:1.55}
.rev footer{display:flex;align-items:center;gap:12px;margin-top:2px}
.rev__av{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bone);color:var(--ink);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;
  border:1px solid var(--hair-soft);
}
.rev footer b{display:block;font-size:.94rem;font-weight:600}
.rev footer i{display:block;font-style:normal;font-size:.82rem;color:var(--graphite-2)}

/* ---------- 16. FAQ ---------- */
.faq{display:grid;gap:10px;max-width:960px}
.faq details{
  background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .5s var(--ease)
}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px clamp(52px,6vw,64px) 22px clamp(20px,2.4vw,28px);
  position:relative;font-size:clamp(1rem,1.5vw,1.14rem);font-weight:500;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:clamp(20px,2.4vw,28px);top:50%;width:12px;height:12px;
  margin-top:-6px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .45s var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details>p{padding:0 clamp(20px,2.4vw,28px) 24px;color:var(--graphite);max-width:70ch}

/* ---------- 17. КОНТАКТЫ ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px)}
@media (max-width:960px){.contact{grid-template-columns:minmax(0,1fr)}}

.chan{display:grid;gap:10px;margin-top:30px}
.chan a{
  display:flex;align-items:center;gap:16px;padding:18px 22px;
  background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-1);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.chan a:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.chan__ic{width:42px;height:42px;border-radius:13px;background:var(--bone);display:grid;place-items:center;flex:none;color:var(--ink)}
.chan__tx{display:grid;gap:2px;min-width:0}
.chan__tx i{font-style:normal;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-2)}
.chan__tx b{font-weight:500;font-size:1rem;overflow-wrap:anywhere}
.chan__go{margin-left:auto;color:var(--graphite-2);transition:transform .45s var(--ease-out),color .45s var(--ease)}
.chan a:hover .chan__go{transform:translate(3px,-3px);color:var(--ember)}

.card-form{
  background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r-l);
  box-shadow:var(--sh-2);padding:clamp(24px,3.2vw,44px);
}
.frm{display:grid;gap:20px}
.frm__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.frm__grid{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:8px;min-width:0}
.fld--full{grid-column:1/-1}
.fld label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-2)}
.fld__opt{text-transform:none;letter-spacing:0;color:var(--graphite-2);opacity:.75}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--bone);border:1px solid transparent;border-radius:14px;
  padding:14px 16px;font-size:1rem;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.fld textarea{resize:vertical;min-height:104px;line-height:1.55}
.fld select{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--graphite) 50%),linear-gradient(135deg,var(--graphite) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;background:var(--paper);border-color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--graphite-2)}
.fld.is-bad input,.fld.is-bad textarea{border-color:var(--ember)}
.fld__err{font-size:.78rem;color:var(--ember-ink);min-height:0}

.frm__foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.frm__note{font-size:.8rem;color:var(--graphite-2);line-height:1.5;max-width:48ch}
.frm__note a{color:var(--graphite);text-decoration:underline;text-underline-offset:3px}
.frm__status{font-size:.9rem;min-height:1.3em;font-weight:500}
.frm__status.is-ok{color:#0F9A5A}
.frm__status.is-bad{color:var(--ember-ink)}

/* ---------- 18. ФИНАЛ + ПОДВАЛ ---------- */
.closer{
  position:relative;background:var(--ink);color:var(--bone);
  border-radius:clamp(28px,4vw,48px);padding:clamp(44px,7vw,96px) clamp(24px,4vw,64px);
  overflow:hidden;text-align:center;
}
.closer::before{
  content:"";position:absolute;left:50%;top:-40%;width:min(760px,110%);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,43,.34),rgba(108,99,255,.16) 46%,transparent 68%);
  filter:blur(40px);pointer-events:none;
}
.closer>*{position:relative}
.closer h2{color:var(--bone)}
.closer p{color:rgba(242,241,237,.66);margin:20px auto 0;max-width:52ch}
.closer .btn{margin-top:34px;--btn-bg:var(--bone);--btn-fg:var(--ink);--btn-bd:var(--bone)}
.closer .btn::before{background:var(--ember)}
.closer .btn:hover{--btn-fg:#FFF}

.ftr{padding:clamp(48px,6vw,80px) 0 36px}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.9fr));gap:clamp(24px,4vw,48px);
  padding-bottom:36px;border-bottom:1px solid var(--hair)}
@media (max-width:820px){.ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__brand{grid-column:1/-1}}
@media (max-width:520px){.ftr__top{grid-template-columns:minmax(0,1fr)}}
.ftr__brand p{margin-top:16px;color:var(--graphite);max-width:38ch;font-size:.95rem}
.ftr__col{display:grid;gap:11px;align-content:start}
.ftr__col b{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-2);font-weight:500}
/* длинная почта — неразрывный токен: без переноса он распирает колонку
   и вызывает горизонтальную прокрутку на узких экранах */
.ftr__col a{font-size:.95rem;color:var(--ink-2);transition:color .3s var(--ease);overflow-wrap:anywhere}
.ftr__col a:hover{color:var(--ember)}
.ftr__btm{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;padding-top:26px;
  font-size:.84rem;color:var(--graphite-2)}
.ftr__btm nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr__btm a:hover{color:var(--ink)}

/* ---------- 19. ЛИПКАЯ ПАНЕЛЬ (моб.) ---------- */
.dock{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:180;
  display:none;gap:10px;
  transform:translateY(150%);transition:transform .55s var(--ease-out);
}
.dock.is-up{transform:none}
.dock .btn{flex:1;box-shadow:var(--sh-3)}
.dock .btn--ghost{background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}
@media (max-width:760px){
  .dock{display:flex}
  /* липкая панель не должна перекрывать конец подвала */
  .ftr{padding-bottom:96px}
}

/* ---------- 21. ЮРИДИЧЕСКИЕ СТРАНИЦЫ ---------- */
.doc-hero{padding:clamp(112px,15vh,168px) 0 clamp(28px,4vw,48px);position:relative;overflow:hidden}
.doc-hero::before{
  content:"";position:absolute;inset:-40% 0 auto 0;height:70%;pointer-events:none;
  background:radial-gradient(58% 60% at 72% 50%,rgba(255,90,43,.12),transparent 70%),
             radial-gradient(46% 52% at 26% 46%,rgba(108,99,255,.10),transparent 72%);
  filter:blur(10px);
}
.doc-hero>*{position:relative}
.doc-hero h1{font-size:clamp(1.85rem,4.2vw,3.4rem);margin-top:16px}
.doc-meta{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:24px}
.doc-meta span{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);background:var(--paper);border:1px solid var(--hair-soft);
  border-radius:999px;padding:8px 14px;
}

.doc-wrap{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:clamp(24px,4vw,64px);padding-bottom:clamp(56px,8vw,110px);
}
@media (max-width:980px){.doc-wrap{grid-template-columns:minmax(0,1fr)}}

.doc-toc{position:sticky;top:96px;align-self:start;display:grid;gap:2px;max-height:calc(100vh - 130px);overflow-y:auto}
.doc-toc b{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite-2);font-weight:500;padding:0 10px 10px;
}
.doc-toc a{
  font-size:.88rem;line-height:1.35;color:var(--graphite);padding:8px 10px;border-radius:9px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.doc-toc a:hover{background:rgba(14,17,22,.05);color:var(--ink)}
.doc-toc a.is-active{background:var(--ink);color:var(--paper)}
@media (max-width:980px){
  .doc-toc{position:static;max-height:none;overflow:visible;
    background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r-m);
    padding:16px;box-shadow:var(--sh-1)}
  .doc-toc a.is-active{background:rgba(14,17,22,.06);color:var(--ink)}
}

.doc{
  background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--r-l);
  box-shadow:var(--sh-1);padding:clamp(22px,3.4vw,52px);
}
.doc>section+section{
  margin-top:clamp(28px,3.2vw,42px);padding-top:clamp(28px,3.2vw,42px);
  border-top:1px solid var(--hair-soft);
}
.doc h2{
  font-size:clamp(1.18rem,2vw,1.6rem);line-height:1.2;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
}
.doc h2 i{
  font-style:normal;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;
  color:var(--ember-ink);
}
.doc p{margin-top:14px;color:var(--ink-2);max-width:70ch}
.doc p.doc-lead{color:var(--graphite);font-weight:500}
.doc ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.doc li{position:relative;padding-left:26px;color:var(--graphite);max-width:70ch}
.doc li::before{
  content:"";position:absolute;left:7px;top:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--ember);
}
.doc li strong{color:var(--ink-2)}
.doc a{color:var(--ember-ink);text-decoration:underline;text-underline-offset:3px}

.doc-cta{
  margin-top:clamp(28px,3.2vw,42px);padding-top:clamp(28px,3.2vw,42px);
  border-top:1px solid var(--hair-soft);
}
.doc-cta .chan{margin-top:20px}

/* ---------- 22. НОУТБУКИ ----------
   Раскладка та же, что на большом мониторе (колонки, порядок, сетки не
   меняются) — уменьшается только вертикальный масштаб. Иначе на самых
   ходовых 1366×768 и 1536×864 первый экран не помещается: герой занимал
   892 px при высоте окна 768, и метрики уходили под срез. */
@media (min-width:1024px) and (max-height:920px){
  h1{font-size:clamp(1.8rem,3.25vw,2.7rem)}
  .hero{padding-block:96px 36px}
  .hero__in{padding-top:clamp(28px,4vh,48px)}
  .hero__eyebrow{margin-bottom:18px}
  .hero__sub{margin-top:18px;font-size:1rem}
  .hero__acts{margin-top:22px}
  .hero__marks{margin-block:18px 0}
  .hero__void{max-height:46vh}

  .hero__meters{margin-top:clamp(22px,3vh,34px);border-radius:24px}
  .meter{padding:clamp(13px,1.8vh,18px)}
  .meter b{font-size:clamp(1.4rem,2.4vw,2rem)}
  .meter i{margin-top:5px;font-size:.78rem}

  .btn--lg{padding:15px 26px;font-size:.94rem}

  .sec{padding-block:clamp(54px,7.2vh,92px)}
  .sec--tight{padding-block:clamp(42px,5.4vh,68px)}
  .sec__head{margin-bottom:clamp(28px,4vh,48px)}
  h2{font-size:clamp(1.7rem,3.4vw,2.9rem)}

  .cfg__stage{height:clamp(160px,20vh,210px)}
  .scrollhint{display:none}
}

/* ---------- 23. УЗКИЕ ЭКРАНЫ (до 425px) ----------
   Короткие подписи на кнопках и компактные чипы конфигуратора:
   на 320–425px длинные надписи переносятся в две строки и ломают ритм. */
.lbl-narrow{display:none}
@media (max-width:425px){
  .lbl-wide{display:none}
  .lbl-narrow{display:inline}

  .chips{gap:7px}
  .chip{padding:9px 14px;font-size:.84rem;border-radius:12px}
  .cfg__l{gap:20px}
  .cfg__grp{gap:11px}
  .cfg__sum b{font-size:clamp(1.9rem,9vw,2.5rem)}
  .cfg__row{padding:10px 0;font-size:.88rem}
  .cfg__row span:last-child{font-size:.8rem}
}

/* ---------- 20. ПРОГРЕСС ЧТЕНИЯ ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:210;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ember),#E0429B,#6C63FF);pointer-events:none}

/* Обёртка <picture> не должна создавать собственный бокс, иначе
   width/height:100% у вложенного <img> начнут считаться от неё. */
picture{display:contents}