*{box-sizing:border-box}html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --bg:#f6f5f4;--bg2:#eceae7;--bg3:#e2dfdc;--white:#fff;
  --ink:#1e1c1b;--ink60:rgba(30,28,27,.6);--ink40:rgba(30,28,27,.4);--ink25:rgba(30,28,27,.22);
  --line:rgba(30,28,27,.08);--line2:rgba(30,28,27,.16);
  --flare:#cb4b09;--flare2:#b04008;--flare-soft:#f7e2d6;
  --r:30px;--r2:24px;--r3:12px;--gut:30px;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.72,.18,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.3 var(--sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* type */
.h1{font-size:90px;line-height:.9;letter-spacing:-.04em;font-weight:400;text-wrap:balance}
.h2{font-size:80px;line-height:1;letter-spacing:-.04em;font-weight:400;text-wrap:balance}
.h3{font-size:34px;line-height:1.2;letter-spacing:-.02em;font-weight:400}
.lead{font-size:28px;line-height:1.2;letter-spacing:-.02em}
.p{font-size:16px;line-height:1.3;letter-spacing:-.01em;color:var(--ink60)}
.s{font-size:13px;line-height:1.3;letter-spacing:-.01em;font-weight:500;color:var(--ink60)}
.mono{font:500 10px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink60)}
.mono-l{font-size:11px;letter-spacing:.06em}
.num{font-size:80px;line-height:1;letter-spacing:-.04em;font-weight:400;font-variant-numeric:tabular-nums}
/* Highlight band. A plain background paints the font's whole content box (ascent+descent),
   which on tight display leading spills onto the neighbouring lines. This band is sized in em
   from cap height to below the deepest Cyrillic descender, and headings that carry a mark get
   the leading to fit it. */
mark{color:#fff;background-color:transparent;background-image:linear-gradient(var(--flare),var(--flare));background-repeat:no-repeat;background-size:100% 1.024em;background-position:0 .2em;padding:0 .1em;margin:0 -.07em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.h1:has(mark),.h2:has(mark){line-height:1.09}
.dim{color:var(--ink60)}
.br{color:var(--flare)}

/* word reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .03em .16em 0;margin:-.12em 0 -.16em 0}
.wi{display:inline-block}
.anim .wi{transform:translateY(112%);transition:transform 1.05s var(--ease)}
.anim .in .wi{transform:none}

/* block reveal */
.anim .rv{opacity:0;transform:translateY(24px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0ms)}
.anim .rv.in{opacity:1;transform:none}
/* Кадр въезжал рывком: пластина уже видна, а снимок за полторы секунды съезжает
   с заметного зума. Теперь плита сама мягко проявляется, зум меньше и вдвое дольше,
   поэтому движение читается как наплыв, а не как рывок. */
.anim .irv{opacity:0;transition:opacity 1.15s var(--ease);transition-delay:var(--d,0ms)}
.anim .irv.in{opacity:1}
.anim .irv img{transform:scale(1.05);transition:transform 2.4s var(--ease);transition-delay:var(--d,0ms)}
.anim .irv.in img{transform:none}
.anim .tp{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease);transition-delay:var(--d,0ms)}
.anim .tp.in{clip-path:inset(0 0 0 0)}
.anim .cv{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--ease);transition-delay:var(--d,0ms)}
.anim .cv.in{clip-path:inset(0 0 0 0)}

/* layout */
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-top:150px}
.two{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.right{grid-column:2}
.flex{display:flex;align-items:center;gap:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:#000}
.btn--w{background:#fff;color:var(--ink)}
.btn--w:hover{background:var(--bg2)}
.sq{width:40px;height:40px;border-radius:8px;background:var(--flare);display:grid;place-items:center;flex:0 0 auto;transition:background .3s var(--ease)}
.sq svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.cta:hover .sq,.btnrow:hover .sq{background:var(--ink)}
.btnrow:hover .sq svg{transform:translateX(3px)}
.btnrow{display:inline-flex;gap:4px;align-items:center}
.mlink{display:inline-flex;align-items:center;gap:10px;font:500 10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink60)}
.mlink b{color:var(--ink);font-weight:500}
.mlink i{width:22px;height:22px;border-radius:50%;background:var(--flare-soft);color:var(--flare);display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.mlink i svg{width:10px;height:10px;transition:transform .35s var(--ease)}
.mlink:hover i{background:var(--flare);color:#fff}
.mlink:hover i svg{transform:translateX(2px)}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 10px;border:1px solid var(--ink);border-radius:50px;font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease)}
.pill:hover{background:var(--ink);color:#fff}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:50px;background:var(--bg3);color:var(--ink);font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag--f{background:var(--flare);color:#fff}
.tag--o{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ornaments */
.dots{width:140px;height:110px;background:radial-gradient(var(--ink25) 1.2px,transparent 1.7px) 0 0/12px 12px}
.dots--w{background-image:radial-gradient(rgba(255,255,255,.55) 1.2px,transparent 1.7px)}
.bc{width:120px;height:14px;opacity:.55;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px,currentColor 6px 7px,transparent 7px 10px,currentColor 10px 12px,transparent 12px 15px)}
.vline{width:1px;height:60px;background:var(--line2);margin:0 auto}
.mark{display:inline-flex;align-items:center;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.mark svg{height:1em;width:auto;display:block}

/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:transform .9s var(--ease);will-change:transform}
.pre.done{transform:translateY(-101%)}
.pre.gone{display:none}
.pre__in{width:420px;max-width:80vw;position:relative}
.pre__row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.pre__mark{font-size:19px}
.pre__bar{display:block;height:1px;background:var(--line2);position:relative}
.pre__bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--flare)}
.pre__bar em{position:absolute;top:-40px;width:80px;height:80px;margin-left:-40px;left:0;border-radius:50%;background:radial-gradient(circle,rgba(203,75,9,.35),rgba(203,75,9,0) 70%);pointer-events:none}

/* header */
.hd{position:fixed;top:0;left:0;right:0;height:52px;z-index:50;background:var(--bg);display:flex;align-items:center;gap:22px;padding:0 var(--gut);transition:box-shadow .3s}
.hd.sc{box-shadow:0 1px 0 var(--line)}
.hd__mark{font-size:19px}
.hd__sep{width:1px;height:18px;background:var(--line2)}
.hd__tag{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink60)}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.hd__nav a{position:relative;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.75;transition:opacity .3s}
.hd__nav a:hover{opacity:1}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--flare);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.hd__nav a:hover::after{transform:scaleX(1)}
.hd__menu{display:none;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.hd__menu i{width:12px;height:12px;background:radial-gradient(var(--flare) 2px,transparent 2.5px) 0 0/6px 6px}
/* Переключатель языка. Набран тем же кеглем, что и пункты меню, поэтому не спорит
   с ними за внимание; разделитель нарисован в середине штатного зазора шапки,
   чтобы добавление контрола не растянуло всю строку. */
/* Селектор языка. Раскрывающийся, а не два инлайновых переключателя: список
   растёт до десяти строк, дальше панель скроллится, а шапка не разъезжается. */
.lng{position:relative;display:flex;align-items:center}
.lng__t{display:flex;align-items:center;gap:7px;padding:5px 7px;margin:-5px -7px;border-radius:7px;color:var(--ink);opacity:.62;transition:opacity .3s,background .3s}
.lng__t b{font:500 11px/1 var(--mono);letter-spacing:.06em}
.lng__t i{width:6px;height:6px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .34s var(--ease)}
.lng__t:hover{opacity:1}
.lng.open .lng__t{opacity:1;background:var(--line)}
.lng.open .lng__t i{transform:translateY(1px) rotate(-135deg)}
.hd__nav .lng::before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:13px;margin-top:-6.5px;background:var(--line2)}
.lng__m{position:absolute;top:calc(100% + 13px);right:0;z-index:60;min-width:186px;max-height:352px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:var(--r3);background:var(--white);border:1px solid var(--line2);box-shadow:0 18px 46px rgba(12,11,10,.14);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.lng.open .lng__m{opacity:1;visibility:visible;transform:none}
.lng__o{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;transition:background .22s}
.lng__o:hover{background:var(--line)}
.lng__o b{min-width:21px;font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--ink40)}
.lng__o span{font-size:13px;line-height:1;color:var(--ink)}
.lng__o.on b{color:var(--flare)}
.lng__o.on span{font-weight:500}
/* В мобильном меню всплывающая панель поверх другой панели читается плохо:
   там тот же список раскладывается плитками прямо в подвале меню. */
.lng--m .lng__t{display:none}
.lng--m .lng__m{position:static;min-width:0;max-height:none;overflow:visible;padding:0;border:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;display:flex;flex-wrap:wrap;gap:4px}
.lng--m{flex:1 1 100%}
.lng--m .lng__o{width:auto;padding:6px 9px;gap:8px}
.lng--m .lng__o span{font-size:12px}
.menu{position:fixed;inset:52px 0 0 0;background:var(--bg);z-index:49;padding:40px var(--gut);display:none;flex-direction:column;gap:22px}
.menu.open{display:flex}
/* Direct children only. A descendant selector here also caught the button label inside
   .btnrow, which pushed the arrow square off the right edge of a 375px screen. */
.menu>a{font-size:34px;letter-spacing:-.02em}
.menu .btnrow{margin-top:20px}
/* Two tiers: the three destinations stay display-size, the in-page and legal links drop back.
   The legal title is 339px at 34px and would not fit 335px of gutter-to-gutter width. */
.menu__sep{height:1px;background:var(--line)}
.menu__sub{display:flex;flex-direction:column;gap:15px}
.menu__sub a{font-size:17px;letter-spacing:0;color:var(--ink60)}
.menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.menu__foot a,.menu__foot span{font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink60)}

/* hero */
.hero{padding:80px var(--gut) 30px;min-height:100vh}
.hero__frame{position:relative;border-radius:var(--r);overflow:hidden;min-height:calc(100vh - 110px);height:790px;padding:50px 50px 40px 120px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(30,28,27,.14);isolation:isolate}
.hero__media{position:absolute;inset:-6% 0;z-index:-1;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,245,244,.96) 0%,rgba(246,245,244,.9) 38%,rgba(246,245,244,.55) 62%,rgba(246,245,244,.12) 100%)}
.hero__wash::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,245,244,0) 55%,rgba(246,245,244,.75) 100%)}
.hero__rail{position:absolute;left:22px;top:60px;bottom:60px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:20px}
.hero__rail span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink60);white-space:nowrap}
.hero__rail .bc{transform:rotate(90deg);width:80px;height:12px}
.hero__badge{position:absolute;right:30px;top:26px;display:flex;align-items:center;gap:8px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink60)}
.hero__badge i{width:6px;height:6px;border-radius:50%;background:var(--flare);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.hero__eyebrow{margin-bottom:24px}
.hero .h1{max-width:1020px;margin-bottom:34px}
.hero__p{max-width:540px;margin-bottom:40px}
.hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-top:40px}
/* Карточка видеорассказа в углу hero. Живёт только на тёмной фото-пластине, поэтому
   цвета заданы здесь сразу тёмными, а не переопределяются потом в style-photo.css.
   Кадр не уходит в ЧБ: это человек, который говорит со зрителем, а не фактура. */
/* Карточка видеорассказа в углу hero. Кнопки плей нет: кадр идёт петлёй без звука,
   как гифка, а звук и полный ролик открываются в модалке по клику по карточке.
   Пока нет файла, петлю играет медленный наплыв по самому снимку. Когда файл будет,
   img меняется на <video autoplay muted loop playsinline> с тем же классом. */
.vcard{margin:0;width:480px;max-width:100%;display:grid;grid-template-columns:288px 1fr;text-align:left;border-radius:16px;overflow:hidden;background:rgba(16,15,14,.52);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(243,241,239,.16);transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
/* .anim .rv.in перебивает простой .vcard:hover, поэтому вес поднят до .in:hover */
.vcard:hover,.anim .vcard.in:hover,.anim .vcard.in:focus-visible{transform:translateY(-2px);background:rgba(16,15,14,.64);box-shadow:inset 0 0 0 1px rgba(243,241,239,.3)}
.vcard__f{position:relative;overflow:hidden}
.vcard__f img,.vcard__f video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.anim .vcard__f img{animation:vloop 16s ease-in-out infinite}
@keyframes vloop{0%,100%{transform:scale(1.02)}50%{transform:scale(1.1) translate3d(-1.6%,-1.4%,0)}}
.vcard__f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,0) 46%,rgba(12,11,10,.55) 100%);pointer-events:none;transition:opacity .5s var(--ease)}
.vcard:hover .vcard__f::after{opacity:.6}
.vcard__loop{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:rgba(12,11,10,.6);color:#fff}
.vcard__loop i{width:5px;height:5px;border-radius:50%;background:var(--flare)}
.anim .vcard__loop i{animation:blink 1.9s ease-in-out infinite}
.vcard__len{position:absolute;right:10px;bottom:10px;z-index:2;padding:3px 7px;border-radius:6px;background:rgba(12,11,10,.6);color:#fff;font-variant-numeric:tabular-nums}
.vcard__c{padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:12px;color:#fff}
.vcard__c .mark{font-size:15px}
.vcard__hr{height:1px;background:rgba(243,241,239,.16)}
.vcard__c .mono{display:block;color:#fff;line-height:1.5}
.vcard__go{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.62);transition:color .4s var(--ease)}
.vcard__go i{width:20px;height:20px;border-radius:50%;background:var(--flare);color:#fff;display:grid;place-items:center;flex:0 0 auto;transition:transform .4s var(--ease)}
.vcard__go i svg{width:10px;height:10px}
.vcard:hover .vcard__go{color:#fff}
.vcard:hover .vcard__go i{transform:translateX(3px)}

/* numbers band */
.nums{padding:40px var(--gut) 60px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
.nums__l{display:flex;flex-direction:column;gap:12px}
.nums__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.nums__i{border-left:1px solid var(--line2);padding-left:18px;display:flex;flex-direction:column;gap:12px}
.nums__i b{font-weight:400;font-size:34px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* statement */
.state{text-align:center}
.state .h2{max-width:1100px;margin:0 auto 40px}
.state .vline{margin-bottom:34px}
.state .p{max-width:540px;margin:0 auto 60px}
.big{position:relative;border-radius:var(--r);overflow:hidden;height:749px;background:var(--bg2)}
.big img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.big__strip{position:absolute;left:0;right:0;bottom:0;height:34px;background:var(--flare);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.big__strip span,.big__strip b{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.big__strip b{color:rgba(255,255,255,.6)}
/* Плита демо. Снимок это постер, поверх кнопка и подпись о том, что в ролике.
   Кольцо вокруг кнопки расходится само, чтобы плита не читалась статичной картинкой. */
.big--v{cursor:pointer}
/* Круг центрируется по кадру сам по себе: подпись вынесена из потока,
   иначе она тянет колонку вверх и круг встаёт выше центра. */
.big__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center}
.big__play b{position:relative;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .5s var(--ease),background .5s var(--ease)}
.big__play b::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.anim .big__play b::before{animation:ring 3.6s var(--ease) infinite}
.big__play svg{width:36px;height:36px;fill:var(--flare)}
.big__play span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:18px;white-space:nowrap;padding-left:.14em;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.8;transition:opacity .4s var(--ease)}
.big--v:hover .big__play b{transform:scale(1.07);background:#fff}
.big--v:hover .big__play span{opacity:1}
.big__play:focus-visible{outline:2px solid #fff;outline-offset:10px;border-radius:16px}
@keyframes ring{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.34);opacity:0}}
.big__meta{position:absolute;left:30px;right:30px;bottom:66px;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:#fff}
.big__meta .lead{max-width:520px}
.big2{margin-top:20px;border-radius:var(--r);background:var(--bg2);padding:50px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:end;min-height:260px}
.big2__l{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:40px}
.big2 .mono{color:var(--ink);line-height:1.6;max-width:420px}
.big2 .mark{font-size:15px;margin-top:20px}

/* about */
.about .h2{max-width:560px}
.about__r{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:56px}
.stat{border-left:1px solid var(--line2);padding-left:22px;display:flex;flex-direction:column;gap:14px}
.stat b{font-weight:400;font-size:64px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.about .lead{max-width:520px;margin-bottom:28px}

/* who */
.who__head{margin-bottom:60px}
.who__head .p{max-width:380px;margin-top:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* Кейс это ссылка на разбор. Под курсором снимок выходит из ЧБ (правило цвета лежит
   в style-photo.css, там же вся обработка), из-под заголовка выезжает описание и
   строка перехода. Ховера на тач-экране нет, поэтому там описание видно сразу. */
.tile{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--bg2)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* .anim .irv.in img перебивает простой .tile:hover img, поэтому вес поднят до .in:hover */
.tile:hover img,.anim .tile.in:hover img,.anim .tile.in:focus-visible img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,17,0) 40%,rgba(20,18,17,.82) 100%)}
.tile__c{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.tile__c .h3{color:#fff}
.tile__row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.tile__row .mono{color:rgba(255,255,255,.7)}
.tile__n{position:absolute;top:26px;left:30px;z-index:1;font:500 10px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.75)}
.tile__glyph{position:absolute;top:26px;right:30px;z-index:1;color:#fff;font-size:22px;letter-spacing:-.06em}
.tile__glyph b{color:var(--flare);font-weight:500}
.tile__c .h3{font-size:34px;line-height:1.2;letter-spacing:-.02em;font-weight:400;display:block}
.tile__x{font-size:15px;line-height:1.4;letter-spacing:-.01em;color:rgba(255,255,255,.8);max-width:38ch}
.tile__go{display:flex;align-items:center;gap:10px;color:#fff}
.tile__go i{width:22px;height:22px;border-radius:50%;background:var(--flare);color:#fff;display:grid;place-items:center;flex:0 0 auto;transition:transform .4s var(--ease)}
.tile__go i svg{width:11px;height:11px}
.tile:hover .tile__go i{transform:translateX(3px)}
@media (hover:hover){
  /* отрицательный margin гасит gap колонки, пока блок свёрнут: иначе под заголовком
     остаётся дыра в две пустые строки */
  .tile__x,.tile__go{max-height:0;margin-top:-14px;opacity:0;overflow:hidden;transform:translateY(10px);transition:max-height .6s var(--ease),margin-top .6s var(--ease),opacity .45s var(--ease),transform .5s var(--ease)}
  .tile__go{transition-delay:.05s}
  .tile:hover .tile__x,.tile:hover .tile__go,
  .tile:focus-visible .tile__x,.tile:focus-visible .tile__go{max-height:130px;margin-top:0;opacity:1;transform:none}
}

/* capabilities */
.caps__head{padding-bottom:70px}
.caps__head .p{max-width:380px;margin:22px 0 34px}
.row{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;padding:60px 0 70px;border-top:1px solid var(--line)}
.row__l{display:flex;gap:28px;align-items:flex-start}
.row__r{display:flex;flex-direction:column;gap:14px}
.row__r .h3{margin-bottom:4px}
.row__r .s{max-width:380px}
.row__img{margin:18px 0 12px;width:420px;max-width:100%;height:287px;border-radius:var(--r2);overflow:hidden;background:var(--bg2);position:relative}
.row__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.row:hover .row__img img{transform:scale(1.03)}
.pat{width:100%;height:100%;display:grid;place-items:center;position:relative}
.pat--rings{background:repeating-radial-gradient(circle at 50% 50%,var(--ink25) 0 1px,transparent 1px 10px)}
.pat--lines{background:repeating-linear-gradient(-45deg,var(--ink25) 0 1px,transparent 1px 9px)}
.pat--dots{background:radial-gradient(var(--ink25) 1.2px,transparent 1.7px) 0 0/10px 10px}
.pat__g{width:auto;padding:0 22px;height:72px;border-radius:14px;background:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 1px var(--line2)}
.pat__g span{font:500 22px/1 var(--sans);letter-spacing:-.04em}
.pat__g b{color:var(--flare);font-weight:500}

/* how */
.how__head{margin-bottom:70px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{display:flex;flex-direction:column;gap:18px}
.step .mono{color:var(--ink)}
.step .h3{font-size:30px}
.step .s{font-weight:400;font-size:14px;color:var(--ink);opacity:.8;max-width:250px}
.stile{border-radius:20px;height:110px;background:var(--bg2);display:grid;place-items:center;position:relative;overflow:hidden;align-self:stretch}
.stile>i{position:absolute;inset:0}
.stile svg{width:34px;height:34px;position:relative}
.step--cta{justify-content:flex-end;gap:16px}

/* modes bento */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.bphoto{position:relative;border-radius:var(--r);overflow:hidden;min-height:780px;background:var(--bg2);color:#fff}
.bphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,17,.35),rgba(20,18,17,0) 35%,rgba(20,18,17,0) 60%,rgba(20,18,17,.7))}
.bphoto__t{position:absolute;top:26px;left:30px;right:30px;z-index:1;display:flex;justify-content:space-between;align-items:center}
.bphoto__t .mono{color:rgba(255,255,255,.8)}
.bphoto__b{position:absolute;left:30px;right:30px;bottom:30px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end}
.bphoto__b .bc{color:#fff}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bcard{background:var(--bg2);border-radius:var(--r2);padding:30px;min-height:382px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.bcard--w{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bcard .lead{font-size:26px}
.bars{display:flex;gap:4px;height:44px;align-items:flex-end}
.bars i{width:4px;background:var(--flare);height:100%;transform-origin:bottom;animation:bar 2.4s var(--ease) infinite alternate}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}.bars i:nth-child(4){animation-delay:.6s}.bars i:nth-child(5){animation-delay:.8s}.bars i:nth-child(6){animation-delay:1s}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.bcard .num{font-size:72px}
.bcard .tags{margin-top:10px}

/* pricing */
.price__head{text-align:center;margin-bottom:60px}
.price__head .p{max-width:520px;margin:22px auto 0}
.plan{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;background:var(--bg2);border-radius:var(--r);padding:16px}
.plan__main{background:#fff;border-radius:22px;padding:44px;display:flex;flex-direction:column;gap:34px;box-shadow:inset 0 0 0 1px var(--line)}
.plan__title{display:flex;flex-direction:column;gap:8px}
.plan__title .h3{font-size:34px}
.plan__title .h3 span{color:var(--ink60)}
.plan__price{display:flex;align-items:baseline;gap:12px}
.plan__price b{font-weight:400;font-size:80px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan__feat{display:flex;flex-direction:column;gap:12px}
.plan__feat li{display:flex;gap:12px;align-items:center;font-size:14px}
.plan__feat li i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;flex:0 0 auto}
.plan__feat li i svg{width:8px;height:8px}
.plan__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:auto}
.plan__inc{padding:44px 28px;display:flex;flex-direction:column;gap:30px}
.inc{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.inc div{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line2)}
.inc b{font-weight:500;font-size:15px}
.price__note{margin-top:60px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.price__note .mono{max-width:520px;line-height:1.7}

/* faq */
.faq__head{text-align:center;margin-bottom:60px}
.faqs{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.qa{background:#fff;border-radius:var(--r3);box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden;transition:background .3s}
.qa__q{width:100%;display:grid;grid-template-columns:1fr 60px;align-items:stretch;text-align:left}
.qa__q span{padding:24px 25px;font-size:16px;line-height:1.2}
.qa__q i{border-left:1px solid var(--line2);display:grid;place-items:center}
.qa__q i svg{width:12px;height:12px;transition:transform .5s var(--ease)}
.qa.open .qa__q i svg{transform:rotate(180deg)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.qa.open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{padding:0 25px 25px;font-size:14px;line-height:1.45;color:var(--ink60);max-width:560px}
.faq__more{margin-top:100px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}

/* closing */
.close{padding-top:150px}
.cta{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;padding:110px 50px 90px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;isolation:isolate}
.cta__bg{position:absolute;inset:0;z-index:-1;opacity:.16;filter:grayscale(1) contrast(1.15)}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 100%,rgba(203,75,9,.28),transparent 70%)}
.cta .mark{font-size:19px}
.cta .h2{max-width:900px;color:#fff}
.cta .p{color:rgba(255,255,255,.62);max-width:520px}
.cta .mono{color:rgba(255,255,255,.62)}
.cta .btnrow .btn{background:#fff;color:var(--ink)}
.cta .btnrow .btn:hover{background:var(--bg2)}

/* footer */
.ft{padding:90px var(--gut) 30px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr 1fr;gap:36px;align-items:start}
.ft__brand{display:flex;flex-direction:column;gap:18px}
.ft__brand .mark{font-size:19px}
.ft__brand .s{max-width:260px}
.ft__col{display:flex;flex-direction:column;gap:12px}
.ft__col .mono{margin-bottom:6px}
.ft__col a{font-size:14px;transition:color .3s}
.ft__col a:hover{color:var(--flare)}
.ft__bot{grid-column:1/-1;margin-top:60px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* mobile */
@media (max-width:1100px){
  .h1{font-size:64px}.h2{font-size:56px}.hero__frame{padding-left:90px}
  .steps{grid-template-columns:1fr 1fr}
  .nums__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--gut:20px;--r:22px;--r2:18px}
  .h1{font-size:48px;line-height:.95;letter-spacing:-.03em}
  .h2{font-size:44px;line-height:1;letter-spacing:-.03em}
  .h3{font-size:26px}
  .lead{font-size:22px}
  .num{font-size:56px}
  .sec{padding-top:60px}
  .two{grid-template-columns:1fr}.right{grid-column:1}
  .hd{gap:14px}.hd__sep,.hd__tag,.hd__nav{display:none}.hd__menu{display:flex;margin-left:auto}
  .hero{padding-top:70px;min-height:0}
  .hero__frame{height:auto;min-height:calc(100vh - 90px);padding:60px 20px 20px 20px}
  .hero__rail{display:none}
  .hero__wash{background:linear-gradient(180deg,rgba(246,245,244,.94) 0%,rgba(246,245,244,.86) 55%,rgba(246,245,244,.55) 100%)}
  .hero__badge{right:20px;top:20px}
  .hero .h1{margin-bottom:24px}
  .hero__p{margin-bottom:28px}
  .hero__cta{gap:18px}
  .hero__foot{flex-direction:column;align-items:stretch;padding-top:40px}
  .hero__foot .dots{display:none}
  .vcard{width:100%;grid-template-columns:1fr}
  .nums{grid-template-columns:1fr;gap:26px;padding:26px var(--gut) 40px}
  .nums__grid{grid-template-columns:1fr 1fr}
  .state .h2{margin-bottom:26px}
  .big{height:480px}
  .big__strip{height:auto;padding:12px 16px;flex-wrap:wrap;gap:8px 16px}
  .big__play b{width:76px;height:76px}
  .big__play span{margin-top:14px}
  .big__play svg{width:26px;height:26px}
  .big__meta{left:20px;right:20px;bottom:78px;gap:8px}
  .big__meta .lead{font-size:18px}
  .big2{grid-template-columns:1fr;padding:28px;gap:26px}
  .about__r{grid-template-columns:1fr 1fr;gap:20px;margin:34px 0 30px}
  .stat b{font-size:44px}
  .grid2{grid-template-columns:1fr;gap:14px}
  .tile{padding:20px;aspect-ratio:auto;min-height:440px}
  .tile__c .h3{font-size:26px}
  .tile__x{font-size:14px}
  .caps__head{padding-bottom:30px}
  .row{grid-template-columns:1fr;padding:34px 0 40px;gap:20px}
  .row__l .dots{width:90px;height:60px}
  .row__img{height:220px;width:100%}
  .steps{grid-template-columns:1fr;gap:20px}
  .stile{height:90px}
  .bento{grid-template-columns:1fr}
  .bphoto{min-height:420px}
  .bgrid{grid-template-columns:1fr}
  .bcard{min-height:0;padding:24px;gap:26px}
  .plan{grid-template-columns:1fr;padding:10px;gap:10px}
  .plan__main{padding:28px;border-radius:16px}
  .plan__price b{font-size:56px}
  .plan__inc{padding:20px 18px 26px}
  .inc{grid-template-columns:1fr}
  .cta{padding:70px 20px 56px}
  .ft{grid-template-columns:1fr 1fr;gap:34px;padding-top:60px}
  .ft__brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  /* движение сокращаем, а не выключаем: на многих машинах Windows этот запрос включён
     по умолчанию, и transition:none оставлял кейсы вообще без ховера */
  .tile img,.row__img img{transition-duration:.22s!important}
  /* петля основателя тут не гасится: это контент, а не украшение. На её месте встанет
     <video loop>, который системная настройка всё равно не останавливает. */
  .bars i,.hero__badge i,.big__play b::before{animation:none}
  html{scroll-behavior:auto}
}
/* ================= ВИДЕО-МОДАЛКА ================= */
.mv{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px}
.mv[hidden]{display:none}
.mv__sc{position:absolute;inset:0;background:rgba(10,9,8,.86);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s var(--ease)}
.mv.on .mv__sc{opacity:1}
.mv__box{position:relative;width:min(1080px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:var(--r2);background:#141211;box-shadow:0 44px 100px -46px rgba(0,0,0,.9);opacity:0;transform:translateY(18px) scale(.986);transition:opacity .4s var(--ease),transform .55s var(--ease)}
.mv.on .mv__box{opacity:1;transform:none}
.mv__f{position:relative;aspect-ratio:16/9;background:#0c0b0a}
.mv__v{width:100%;height:100%;display:block;background:#0c0b0a}
.mv__ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:28px 30px;color:#fff}
.mv__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.15) 40%,rgba(12,11,10,.88) 100%)}
.mv__ph>*{position:relative;z-index:1}
.mv__ph .mono{color:rgba(255,255,255,.55)}
.mv__ph-t{font-size:22px;line-height:1.2;letter-spacing:-.02em}
.mv__c{display:flex;flex-direction:column;gap:10px;padding:22px 30px 26px;color:#fff}
.mv__c .mono{color:rgba(255,255,255,.5)}
.mv__t{font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:400}
.mv__x{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(12,11,10,.62);backdrop-filter:blur(6px);display:grid;place-items:center;transition:background .3s var(--ease)}
.mv__x:hover{background:rgba(12,11,10,.92)}
.mv__x svg{width:14px;height:14px;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
@media (max-width:820px){
  .mv{padding:14px}
  .mv__c{padding:18px 20px 22px}
  .mv__t{font-size:20px}
  .mv__ph{padding:20px}
  .mv__ph-t{font-size:17px}
}

/* ================= ROUTER + PAGE TRANSITION ================= */
.pg[hidden]{display:none}
.cur{position:fixed;inset:0;z-index:120;background:var(--ink);display:grid;place-items:center;transform:translateY(101%);pointer-events:none;visibility:hidden}
.cur.on{visibility:visible}
.cur.a{transform:translateY(0);transition:transform .46s cubic-bezier(.7,0,.3,1)}
.cur.b{transform:translateY(-101%);transition:transform .58s cubic-bezier(.5,0,.15,1)}
.cur .mark{color:#fff;font-size:30px;opacity:0;transform:translateY(8px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.cur.a .mark{opacity:1;transform:none}
.hd__nav a.on{opacity:1}
.hd__nav a.on::after{transform:scaleX(1)}
.menu a.on{color:var(--flare)}

/* ================= SHARED NEW PRIMITIVES ================= */
.eyerow{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.eyerow .bc{flex:0 0 auto}

/* ================= LIFE ================= */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fcard{position:relative;background:#fff;border-radius:var(--r2);padding:30px;min-height:264px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fcard::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--flare);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fcard:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--line2),0 24px 46px -28px rgba(30,28,27,.45)}
.fcard:hover::before{transform:scaleX(1)}
.fcard__n{font:500 10px/1 var(--mono);letter-spacing:.06em;color:var(--flare)}
.fcard h3{font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:400;margin-bottom:12px}
.fcard p{font-size:14px;line-height:1.4;color:var(--ink60)}

.band{position:relative;border-radius:var(--r);overflow:hidden;height:560px;background:var(--bg2);display:flex;align-items:flex-end;padding:50px}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__w{position:absolute;inset:0;background:linear-gradient(92deg,rgba(246,245,244,.96) 0%,rgba(246,245,244,.82) 34%,rgba(246,245,244,.1) 72%,rgba(246,245,244,0) 100%)}
.band__c{position:relative;max-width:540px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.band__s{position:absolute;right:0;top:0;bottom:0;width:8px;background:var(--flare)}

.dk{position:relative;background:#1b1917;color:#fff;border-radius:var(--r);overflow:hidden;padding:66px 50px 56px;display:grid;grid-template-columns:1.15fr 1fr;column-gap:60px;row-gap:44px;align-items:start}
.dk .mono{color:rgba(255,255,255,.55)}
.dk .h2{margin:22px 0 32px}
.dk__cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.dk__c{border-top:1px solid rgba(255,255,255,.18);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.dk__c b{font-weight:400;font-size:19px;letter-spacing:-.02em}
.dk__c p{font-size:14px;line-height:1.45;color:rgba(255,255,255,.6)}
.dk__ph{border-radius:var(--r2);overflow:hidden;aspect-ratio:640/437;background:#111}
.dk__ph img{width:100%;height:100%;object-fit:cover}
.dk__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.dk .mlink{color:rgba(255,255,255,.6)}
.dk .mlink b{color:#fff}
.dk .mlink i{background:rgba(255,255,255,.12)}

.pstrip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:44px;row-gap:24px;background:#fff;border-radius:var(--r);padding:36px 44px;box-shadow:inset 0 0 0 1px var(--line2)}
.pstrip__p{display:flex;align-items:baseline;gap:8px}
.pstrip__p b{font-weight:400;font-size:64px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pstrip__t{display:flex;flex-direction:column;gap:8px;max-width:420px}
.pstrip__a{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* ================= CATALOG ================= */
.chero{position:relative;padding:118px var(--gut) 0;display:grid;grid-template-columns:minmax(0,1fr) 352px;column-gap:60px;align-items:start}
.chero__in{position:relative;max-width:940px;grid-column:1;grid-row:1}
.chero .h1{margin-bottom:26px}
.chero__meta{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.cobj{grid-column:2;grid-row:1;margin-top:22px;display:grid;grid-template-columns:repeat(13,1fr);gap:7px;pointer-events:none;user-select:none}
.cobj i{aspect-ratio:1;display:block;color:var(--ink25)}
.cobj i svg{display:block;width:100%;height:100%;fill:currentColor}
.cobj i.k{color:var(--flare)}
.anim .cobj i{transform:scale(.25);opacity:0;transition:transform .55s var(--ease),opacity .5s var(--ease);transition-delay:var(--d,0ms)}
.anim .cobj.in i{transform:none;opacity:1}
.filters{position:sticky;top:52px;z-index:20;background:var(--bg);padding:20px 0 16px;margin-top:56px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:50px;box-shadow:inset 0 0 0 1px var(--line2);font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink60);background:transparent;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.chip em{font-style:normal;opacity:.5;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink25)}
.chip.on{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.chip.on em{opacity:.6}
.cgroup{padding-top:56px}
.cgroup[hidden]{display:none}
.cgroup__h{display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--line2);padding-top:16px;margin-bottom:20px}
.cgroup__h h3{font-size:26px;line-height:1.1;letter-spacing:-.02em;font-weight:400}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scard{position:relative;background:#fff;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line2);display:flex;flex-direction:column;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.scard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line2),0 26px 48px -28px rgba(30,28,27,.45)}
.scard__c{padding:20px 22px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.scard b{font-weight:400;font-size:17px;line-height:1.22;letter-spacing:-.02em}
.scard p{font-size:13px;line-height:1.45;color:var(--ink60)}
.scard .mono{color:var(--ink40)}

/* Самодостройка. Середина белой карточки бенто пустовала, а сказать там надо главное:
   новый шаг процесса собирается словами, а не заказом интеграции. Бегущая точка идёт
   по рельсе сверху вниз, чтобы три строки читались как последовательность. */
.selfx{position:relative;display:flex;flex-direction:column;gap:15px;padding-left:26px}
.selfx__r{position:relative;display:flex;align-items:baseline;gap:9px;font:500 13px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink60)}
.selfx__r::before{content:"";position:absolute;left:-21px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--bg3);box-shadow:0 0 0 3px #fff}
.selfx__r--f{color:var(--ink)}
.selfx__r--f::before{background:var(--flare)}
.selfx__r:not(:last-child)::after{content:"";position:absolute;left:-17px;top:7.5px;width:1px;height:calc(100% + 15px);background:var(--line2)}
.selfx__r>u{position:absolute;left:-19px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--flare);opacity:0}
.anim .selfx__r>u{animation:selfxRun 4.2s var(--ease) infinite}
.anim .selfx__r:nth-child(2)>u{animation-delay:2.1s}
.selfx i{flex:0 0 auto;font:500 10px/1.3 var(--mono);letter-spacing:.05em;color:var(--ink40);font-style:normal}
@keyframes selfxRun{0%{top:5px;opacity:0}5%{opacity:1}44%{opacity:1}50%,100%{top:calc(100% + 20px);opacity:0}}

/* Карточка «своего сценария» стоит после всех групп, а не внутри одной: фильтр прячет
   группы по data-cat, и внутри группы карточка исчезала бы на девяти категориях из десяти. */
.cask{padding-top:56px}
.cask .cgrid{grid-template-columns:repeat(3,1fr)}
.scard__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;color:var(--flare)}
.scard__go i{display:inline-flex;width:12px;height:12px}
.scard__go svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.scard--ask:hover .scard__go svg{transform:translateX(4px)}

/* ---------- макет телефона в карточке сценария ----------
   Экран рисуется прямо в SVG, поэтому цвета живут переменными на .ph: одна правка
   меняет все 52 макета. Корпус обрезается нижним краем сцены, как на предметной съёмке. */
.ph{--s0:#0d0c0b;--s1:#191715;--w1:rgba(255,255,255,.9);--w2:rgba(255,255,255,.52);--w3:rgba(255,255,255,.26);--w4:rgba(255,255,255,.11);--sb:rgba(255,255,255,.085);--fl:var(--flare);
  position:relative;height:338px;background:var(--bg3);display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 88% at 50% -10%,rgba(30,28,27,0) 42%,rgba(30,28,27,.08) 100%);pointer-events:none}
.ph__d{width:232px;height:369px;margin-top:16px;flex:0 0 auto;filter:drop-shadow(0 20px 34px rgba(30,28,27,.3));transition:transform .55s var(--ease)}
.scard:hover .ph__d{transform:translateY(-9px)}
.ph__k{font:600 5.2px/1 var(--mono);letter-spacing:.14em;fill:var(--w2)}
.ph__n{font:500 5px/1 var(--mono);letter-spacing:.06em;fill:var(--fl)}
.ph text{font-family:var(--sans);letter-spacing:-.01em}
.ph__q{font-size:6px;fill:#fff}
.ph__a{font-size:6px;fill:var(--w1)}
.ph__q2{font-size:5.2px;fill:#fff}
.ph__l{font-size:5.2px;fill:var(--w1)}
.ph__s{font-size:4.8px;fill:var(--w2)}
.ph__s2{font-size:4.8px;fill:var(--w1)}
.ph__m{font:500 4.4px/1 var(--mono);letter-spacing:.08em;fill:var(--w3)}
.ph__v{font:500 5.2px/1 var(--mono);fill:var(--fl)}
.ph__big{font-size:15px;letter-spacing:-.03em;fill:#fff}

/* Один цикл на все макеты: 5.6s, шаг между элементами задаёт --sp у svg, номер в
   очереди - --i у элемента. Пауза по умолчанию, потому что видимых карточек на экране
   единицы, а всего их 52. Класс .off ставит наблюдатель в app.js; если наблюдатель не
   сработал, макет остаётся живым, а не замирает. */
.ph .fx{transform-box:fill-box;animation-duration:5.6s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-delay:calc(var(--i,0) * var(--sp,.34s));animation-fill-mode:both;animation-play-state:paused}
.anim .ph .fx{animation-play-state:running}
.anim .ph.off .fx{animation-play-state:paused}
.ph .fx-in{animation-name:fxIn}
.ph .fx-grow{animation-name:fxGrow;transform-origin:left center}
.ph .fx-bar{animation-name:fxBar;transform-origin:center bottom}
.ph .fx-draw{animation-name:fxDraw}
.ph .fx-sweep{animation-name:fxSweep}
.ph .fx-tick{animation-name:fxTick}
.ph .fx-ring{animation-name:fxRing}
.ph .fx-cell{animation-name:fxCell}
.ph .fx-glow{animation-name:fxGlow}
.ph .fx-trav{animation-name:fxTrav;animation-duration:2.8s}
.ph .fx-wave{animation-name:fxWave;animation-duration:1.5s;animation-timing-function:ease-in-out;transform-origin:center}
.ph .fx-typ{animation-name:fxTyp;animation-duration:1.15s;animation-timing-function:ease-in-out}
/* Собранное состояние держится до 92% цикла. Раньше выход начинался на 84%, и при
   52 карточках в разных фазах часть экранов в любой момент выглядела пустой. */
@keyframes fxIn{0%,3%{opacity:0;transform:translateY(5px)}13%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}
@keyframes fxGrow{0%,3%{opacity:0;transform:scaleX(.02)}15%,92%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes fxBar{0%,4%{transform:scaleY(.05)}20%,92%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
@keyframes fxDraw{0%,4%{stroke-dashoffset:var(--len,260)}28%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--len,260)}}
@keyframes fxSweep{0%,5%{opacity:0;transform:translateY(0)}12%{opacity:1}62%{opacity:1;transform:translateY(var(--ty,74px))}72%,100%{opacity:0;transform:translateY(var(--ty,74px))}}
@keyframes fxTick{0%,6%{opacity:.3;stroke-dashoffset:14}19%,92%{opacity:1;stroke-dashoffset:0}100%{opacity:.3;stroke-dashoffset:14}}
@keyframes fxRing{0%,5%{stroke-dashoffset:var(--len,100)}30%,92%{stroke-dashoffset:var(--off,0)}100%{stroke-dashoffset:var(--len,100)}}
@keyframes fxCell{0%,6%{opacity:.1}22%,92%{opacity:1}100%{opacity:.1}}
@keyframes fxGlow{0%,15%{opacity:.25}30%,88%{opacity:1}100%{opacity:.25}}
@keyframes fxTrav{0%{opacity:0;transform:translateY(0)}12%{opacity:1}52%{opacity:1;transform:translateY(var(--ty,44px))}62%,100%{opacity:0;transform:translateY(var(--ty,44px))}}
@keyframes fxWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes fxTyp{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.6px)}}
.cempty{padding:70px 0;text-align:center}

/* ================= PRIVACY ================= */
.dhero{padding:118px var(--gut) 0}
.dhero__meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px}
.doc{display:grid;grid-template-columns:240px minmax(0,720px);gap:64px;padding:60px var(--gut) 0}
.toc{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column}
.toc a{font:500 11px/1.35 var(--mono);letter-spacing:.04em;color:var(--ink40);padding:8px 0 8px 14px;border-left:1px solid var(--line2);transition:color .3s,border-color .3s}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--flare)}
.doc__b{display:flex;flex-direction:column;gap:52px}
.ds{scroll-margin-top:80px;display:flex;flex-direction:column;gap:16px}
.ds h2{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:400}
.ds p{font-size:16px;line-height:1.55;color:var(--ink60)}
.ds ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ds li{position:relative;padding-left:20px;font-size:16px;line-height:1.5;color:var(--ink60)}
.ds li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--flare)}
.ds strong{color:var(--ink);font-weight:500}
.ds a{border-bottom:1px solid var(--ink25);transition:border-color .3s,color .3s}
.ds a:hover{color:var(--flare);border-bottom-color:var(--flare)}
.hl{background:var(--flare-soft);border-radius:var(--r3);padding:22px 24px;font-size:15px;line-height:1.5;color:var(--ink)}

/* ================= 404 ================= */
.nf{position:relative;min-height:calc(100vh - 52px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px var(--gut) 90px;overflow:hidden}
.nf__big{font-size:clamp(110px,21vw,290px);line-height:.82;letter-spacing:-.05em;font-weight:400;margin-bottom:30px}
.nf__big .br{letter-spacing:-.02em}
.nf p{max-width:460px;margin:0 auto}
.nf__ghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(84vw,780px);aspect-ratio:1.3;pointer-events:none;z-index:-1;background-image:radial-gradient(circle at center,var(--ink25) 1.4px,transparent 1.6px);background-size:23px 23px;-webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 66%);mask-image:radial-gradient(ellipse at center,#000 10%,transparent 66%)}
.nf__links{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:36px}

/* ================= MOBILE REFINEMENT ================= */
@media (max-width:1100px){
  .flow{grid-template-columns:1fr 1fr}
  .cgrid{grid-template-columns:1fr 1fr}
  .ph{height:314px}
  .ph__d{width:216px;height:344px;margin-top:15px}
  .doc{grid-template-columns:200px minmax(0,1fr);gap:40px}
  .chero{grid-template-columns:minmax(0,1fr) 262px;column-gap:40px}
}
@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:10px}
  .fcard{min-height:0;padding:24px;gap:26px;border-radius:16px}
  .band{height:auto;min-height:420px;padding:26px 20px 30px}
  .band__w{background:linear-gradient(180deg,rgba(246,245,244,.2) 0%,rgba(246,245,244,.86) 46%,rgba(246,245,244,.97) 100%)}
  .band__s{left:0;right:auto;top:auto;bottom:0;width:100%;height:6px}
  .dk{grid-template-columns:1fr;padding:34px 24px 30px;row-gap:30px;border-radius:22px}
  .dk .h2{margin:16px 0 24px}
  .dk__cols{grid-template-columns:1fr;gap:22px}
  .pstrip{grid-template-columns:1fr;padding:26px 24px;row-gap:20px}
  .pstrip__p b{font-size:52px}
  .chero,.dhero{padding-top:92px}
  .chero{grid-template-columns:minmax(0,1fr)}
  .cobj{display:none}
  .filters{margin-top:34px;padding:14px 0 12px}
  .chips{margin:0 calc(var(--gut)*-1);padding:0 var(--gut)}
  .cgroup{padding-top:38px}
  .cgrid{grid-template-columns:1fr;gap:12px}
  .ph{height:342px}
  .ph__d{width:236px;height:375px;margin-top:16px}
  .scard__c{padding:18px 18px 24px}
  .cgroup__h h3{font-size:22px}
  .doc{grid-template-columns:1fr;gap:0;padding-top:34px}
  .toc{position:static;flex-direction:row;overflow-x:auto;margin:0 calc(var(--gut)*-1) 34px;padding:0 var(--gut);scrollbar-width:none}
  .toc::-webkit-scrollbar{display:none}
  .toc a{flex:0 0 auto;border-left:0;border-bottom:1px solid var(--line2);padding:10px 14px 10px 0;margin-right:14px;white-space:nowrap}
  .toc a:hover,.toc a.on{border-left-color:var(--line2);border-bottom-color:var(--flare)}
  .doc__b{gap:38px}
  .ds h2{font-size:22px}
  .ds p,.ds li{font-size:15px}
  .nf{min-height:calc(100svh - 52px);padding:110px var(--gut) 70px}
  .nf__links{gap:18px;flex-direction:column;align-items:center}
}
@media (max-width:560px){
  .h1{font-size:40px}
  /* The legal page's single longest word overruns 335px of gutter-to-gutter width at 40px,
     and the reveal mask clips it. Size this heading to the word, not to the scale. */
  .dhero .h1{font-size:32px;line-height:1.02}
  .h2{font-size:34px;line-height:1.06}
  .h3{font-size:22px}
  .lead{font-size:19px}
  .num,.stat b{font-size:44px}
  .plan__price b{font-size:48px}
  .nums__grid{grid-template-columns:1fr}
  .nums__i b{font-size:28px}
  .about__r{grid-template-columns:1fr}
  .btn{height:44px;padding:0 20px}
  .sq{width:44px;height:44px}
  .qa__q span{padding:18px;font-size:15px}
  .qa__q{grid-template-columns:1fr 48px}
  .qa__a p{padding:0 18px 20px}
  .hero__frame{padding:52px 16px 16px}
  .tile{padding:16px;aspect-ratio:auto;min-height:380px}
  .big{height:450px}
  .big__meta{bottom:82px}
  .big__meta .lead{font-size:16px}
  .cta{padding:56px 18px 46px}
  .ft{grid-template-columns:1fr;gap:28px}
  .ft__bot{margin-top:34px;flex-direction:column;gap:8px}
  .chip{height:34px}
  .toc a{font-size:10px}
}

/* cookies ------------------------------------------------------------------
   Ниже шторки перехода (120) и прелоадера (100), выше шапки (50): карточка не
   должна перекрывать переход между страницами, но обязана лежать над контентом. */
.ck{position:fixed;left:var(--gut);bottom:var(--gut);z-index:90;width:360px;max-width:calc(100vw - var(--gut)*2);padding:20px;border-radius:var(--r2);background:var(--white);border:1px solid var(--line2);box-shadow:0 18px 46px rgba(12,11,10,.14);display:flex;flex-direction:column;gap:10px}
.ck__t{font-size:13px;line-height:1.35;letter-spacing:-.01em;color:var(--ink60)}
.ck__l{font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink25);transition:color .3s var(--ease)}
.ck__l:hover{color:var(--flare)}
.ck__a{display:flex;gap:8px;margin-top:4px}
.ck__b{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.ck__b:hover{background:var(--bg2)}
.ck__b--p{background:var(--ink);border-color:var(--ink);color:#fff}
.ck__b--p:hover{background:#000;color:#fff}
@media (max-width:640px){
  .ck{left:12px;right:12px;bottom:12px;width:auto;padding:16px}
  .ck__a{flex-direction:column-reverse}
  .ck__b{width:100%}
}

/* ============================================================================
   ФОТО-ПЛАСТИНЫ
   Одна обработка на все снимки сайта. Картинка это фактура под текстом, а не
   сюжет: почти чёрная подложка, снимок поверх приглушён и обесцвечен, снизу
   тёплый отсвет, чтобы пластина оставалась в бренде, а не читалась серой.
   Вся тональность сайта крутится тремя числами ниже.
   ========================================================================= */
:root{
  --deep:#141211;
  --ph-o:.34;
  --ph-f:grayscale(1) contrast(1.16) brightness(.86);
  --ph-glow:radial-gradient(78% 62% at 50% 100%,rgba(203,75,9,.30),transparent 72%);
  --on-deep:rgba(255,255,255,.66);
  --on-deep-dim:rgba(255,255,255,.44);
  --line-w:rgba(243,241,239,.16);
}

/* the plate and the picture on it */
.hero__frame,.big,.tile,.row__img,.bphoto,.band,.dk__ph,.cta{
  background:var(--deep)
}
.hero__media img,.big>img,.tile img,.row__img img,.bphoto img,.band>img,
.dk__ph img,.cta__bg img{
  opacity:var(--ph-o);filter:var(--ph-f)
}
/* the CTA is the one plate with body text sitting straight on the photo,
   so it gets its own knock-back: the shared .34 leaves a bright doorway
   right under the headline */
.cta__bg{opacity:1;filter:none}
.cta__bg img{opacity:.16;filter:grayscale(1) contrast(1.16) brightness(.55)}

/* ---------- hero ---------- */
.hero__frame{color:#fff;box-shadow:inset 0 0 0 1px var(--line-w)}
/* The wash used to be a light veil so dark type could read on a bright photo. The plate is
   dark now, so it deepens the left edge instead, exactly where the headline sits. */
.hero__wash{background:linear-gradient(90deg,rgba(12,11,10,.86) 0%,rgba(12,11,10,.66) 38%,rgba(12,11,10,.3) 70%,rgba(12,11,10,.12) 100%)}
.hero__wash::after{background:var(--ph-glow)}
.hero .h1{color:#fff}
.hero__eyebrow,.hero__rail span,.hero__badge{color:var(--on-deep)}
.hero__p{color:var(--on-deep)}
.hero .dots{background-image:radial-gradient(rgba(255,255,255,.4) 1.2px,transparent 1.7px)}
/* .vcard несёт собственную тёмную поверхность и цветной кадр, здесь его не трогаем */

/* controls sitting on a plate: the dark pill would vanish, so it flips */
.hero__cta .btn,.band__c .btn{background:#fff;color:var(--ink)}
.hero__cta .btn:hover,.band__c .btn:hover{background:var(--bg2)}
.hero__cta .mlink,.band__c .mlink{color:var(--on-deep)}
.hero__cta .mlink b,.band__c .mlink b{color:#fff}
.hero__cta .mlink i,.band__c .mlink i{background:rgba(255,255,255,.16)}
.hero__cta .mlink i svg path,.band__c .mlink i svg path{stroke:#fff}

/* ---------- wide band (life) ---------- */
.band__w{background:linear-gradient(92deg,rgba(12,11,10,.9) 0%,rgba(12,11,10,.72) 34%,rgba(12,11,10,.26) 72%,rgba(12,11,10,.08) 100%)}
.band__c{color:#fff}
.band__c .mono{color:var(--on-deep)}
.band__c .lead{color:#fff}
.band__c .lead .dim,.band__c .dim{color:var(--on-deep-dim)}
.band__c .tag{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}

/* ---------- узор на тёмной плите ---------- */
/* Узор рисовался тёмной краской по светлой плите. Плита стала почти чёрной, и линии
   пропали совсем. Тот же узор, но краска светлая. Только внутри .row__img: те же
   классы стоят на светлых плитках шагов, там менять нечего. */
.row__img{--pat:rgba(255,255,255,.22)}
.row__img .pat--rings{background:repeating-radial-gradient(circle at 50% 50%,var(--pat) 0 1px,transparent 1px 10px)}
.row__img .pat--lines{background:repeating-linear-gradient(-45deg,var(--pat) 0 1px,transparent 1px 9px)}
.row__img .pat--dots{background:radial-gradient(var(--pat) 1.2px,transparent 1.7px) 0 0/10px 10px}

/* ---------- square tiles ---------- */
/* The photo is knocked back, so the old bottom gradient no longer has to do the darkening.
   It starts higher and lands softer, which keeps the caption on solid ground. */
.tile::after{background:linear-gradient(180deg,rgba(12,11,10,0) 16%,rgba(12,11,10,.55) 68%,rgba(12,11,10,.86) 100%)}
.tile__n,.tile__row .mono{color:var(--on-deep)}
/* Кейс оживает под курсором: снимок выходит из ЧБ и становится ярче. Только у кейсов,
   остальные пластины остаются фактурой под текстом.
   Вес .anim .tile img нужен, иначе transition отсюда перебивается правилом наплыва. */
.anim .tile img{transition:transform 2.4s var(--ease),opacity .65s var(--ease),filter .65s var(--ease)}
.tile:hover img,.tile:focus-visible img{opacity:.74;filter:grayscale(.1) contrast(1.04) brightness(.97)}

/* ---------- демо-плита ---------- */
.big__meta .mono{color:var(--on-deep)}
.big__meta .lead{color:#fff}

/* ---------- service rows, bento photo, dual-mode photo ---------- */
.row__img{box-shadow:inset 0 0 0 1px var(--line-w)}
.bphoto::after{background:linear-gradient(180deg,rgba(12,11,10,.45),rgba(12,11,10,.12) 38%,rgba(12,11,10,.18) 62%,rgba(12,11,10,.72))}
.bphoto__t .mono{color:var(--on-deep)}
.dk__ph{box-shadow:inset 0 0 0 1px var(--line-w)}

/* ---------- mobile ---------- */
@media (max-width:820px){
  /* the band stacks: the wash has to run top-to-bottom or the type lands on bare photo */
  .band__w{background:linear-gradient(180deg,rgba(12,11,10,.4) 0%,rgba(12,11,10,.82) 44%,rgba(12,11,10,.94) 100%)}
}


/* slot imagery: background-image, not <img src>, so the artifact viewer renders it */
.im{background-repeat:no-repeat;background-size:cover;background-position:50% 50%}
.im1{background-image:url(/img/im1.jpg)}
.im3{background-image:url(/img/im3.jpg)}
.im4{background-image:url(/img/im4.jpg)}
.im5{background-image:url(/img/im5.jpg)}
.im6{background-image:url(/img/im6.jpg)}
.im7{background-image:url(/img/im7.jpg)}
.im8{background-image:url(/img/im8.jpg)}
.im9{background-image:url(/img/im9.jpg)}
.im10{background-image:url(/img/im10.jpg)}
.im11{background-image:url(/img/im11.jpg)}
.im12{background-image:url(/img/im12.jpg)}
.im13{background-image:url(/img/im13.jpg)}
.im15{background-image:url(/img/im15.jpg)}
.im17{background-image:url(/img/im17.jpg)}
.im18{background-image:url(/img/im18.jpg)}

.im19{background-image:url(/img/im19.jpg)}