/* VIORA STUDIO · сайт визитка badVIno
   Система: Geist и Geist Mono, шкала размеров Tailwind, отступы 0 2 4 8 12 16 24 32 40 48 64 80 96,
   кривая cubic-bezier(0.22,1,0.36,1), анимируем только transform и opacity. */

@font-face{font-family:"Geist";src:url(../fonts/geist-cyr.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geist";src:url(../fonts/geist-lat.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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:"Geist Mono";src:url(../fonts/geistmono-cyr.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geist Mono";src:url(../fonts/geistmono-lat.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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}

:root{
  --bg:#000000;--s1:#181818;--s2:#1F1F1F;--s3:#272727;--s4:#313131;--warm:#131209;
  --fg:#F5F5F5;--fg2:#B4B4B4;--fg3:#8C8C8C;--paper:#F2F0EB;
  --red:#E5332A;--red-ink:#FF5A4E;--line:rgba(255,255,255,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --sp-1:2px;--sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;
  --r:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;--r-full:9999px;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --scan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='1' fill='%23fff' fill-opacity='.045'/%3E%3C/svg%3E");
}

/* Основа */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--sp-12);background:var(--bg);color-scheme:dark}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:1rem;line-height:1.5rem;font-weight:400;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
em,i,cite,address{font-style:normal}
b,strong{font-weight:600}
h1,h2,h3,h4,.tagline__text{text-wrap:balance}
p,li,dd,summary{text-wrap:pretty}
svg{fill:currentColor}
:focus-visible{outline:2px solid var(--red-ink);outline-offset:2px}
::selection{background:var(--red);color:#FFFFFF}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1264px;margin-inline:auto;padding-inline:var(--sp-5)}
@media (min-width:768px){.wrap{padding-inline:var(--sp-6)}}
@media (min-width:1280px){.wrap{padding-inline:var(--sp-7)}}

.skip{position:fixed;left:var(--sp-5);top:var(--sp-5);z-index:300;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--paper);color:#000000;font-weight:600;transform:translateY(-200%);transition:transform 300ms var(--ease)}
.skip:focus{transform:none}

/* Кнопки */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid transparent;border-radius:var(--r-lg);font-size:1rem;line-height:1.5rem;font-weight:600;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease)}
.btn::after{content:"";position:absolute;inset:calc(-1 * var(--sp-1)) 0}
.btn svg{width:20px;height:20px;flex:none;transition:transform 300ms var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--paper);color:#000000}
.btn--primary:hover{background:#FFFFFF;transform:translateY(-1px)}
.btn--primary:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--s4)}
.btn--ghost:hover{background:var(--s2);border-color:#4A4A4A}
.btn--sm{font-size:.875rem;line-height:1.25rem}
.btn--sm::after{inset:calc(-1 * var(--sp-2)) 0}
.btn--sm svg{width:16px;height:16px}
.btn--lg{padding:var(--sp-4) var(--sp-6)}
.btn--lg::after{inset:0}

/* Плёнка: зерно поверх страницы */
.grain{position:fixed;inset:calc(-1 * var(--sp-9));z-index:150;pointer-events:none;opacity:.07;background-image:var(--noise);background-size:180px 180px;will-change:transform}
.hero-on .grain{animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-24px,16px)}40%{transform:translate(16px,-32px)}60%{transform:translate(-32px,-8px)}80%{transform:translate(24px,32px)}100%{transform:translate(0,0)}}

/* Навигация */
.nav{position:fixed;top:var(--sp-5);left:0;right:0;z-index:100;display:flex;justify-content:center;padding-inline:var(--sp-5);pointer-events:none}
.nav__bar{pointer-events:auto;position:relative;z-index:2;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-full);background:rgba(24,24,24,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.nav__logo{display:flex;align-items:center;height:40px;padding-inline:var(--sp-4);border-radius:var(--r-full);color:var(--paper);transition:background-color 300ms var(--ease)}
.nav__logo:hover{background:rgba(255,255,255,.06)}
.nav__logo svg{width:72px;height:auto}
.nav__links{display:none;align-items:center;gap:var(--sp-1)}
.nav__links a{display:flex;align-items:center;height:40px;padding-inline:var(--sp-4);border-radius:var(--r-full);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg2);transition:color 300ms var(--ease),background-color 300ms var(--ease)}
.nav__links a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.nav__links a[aria-current="true"]{color:var(--fg);background:rgba(255,255,255,.1)}
.nav__cta{border-radius:var(--r-full);padding-inline:var(--sp-5)}
.nav__cta::after{inset:0}
.nav__burger{position:relative;width:44px;height:40px;border-radius:var(--r-full);transition:background-color 300ms var(--ease)}
.nav__burger:hover{background:rgba(255,255,255,.06)}
.nav__burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--fg);transition:transform 500ms var(--ease)}
.nav__burger span:first-child{top:15px}
.nav__burger span:last-child{top:23px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1024px){.nav__links{display:flex}.nav__burger{display:none}}

.menu{pointer-events:auto;position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-9);padding:var(--sp-12) var(--sp-6) var(--sp-9);background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;transition:opacity 300ms var(--ease);overflow-y:auto}
.menu.is-open{opacity:1}
.menu__links{display:flex;flex-direction:column;gap:var(--sp-2)}
.menu__links li,.menu__foot{opacity:0;transform:translateY(var(--sp-6));transition:opacity 500ms var(--ease),transform 500ms var(--ease);transition-delay:calc(var(--i) * 60ms)}
.menu.is-open .menu__links li,.menu.is-open .menu__foot{opacity:1;transform:none}
.menu__links a{display:flex;align-items:center;min-height:56px;font-size:1.875rem;line-height:2.25rem;font-weight:600;color:var(--fg)}
.menu__links a[aria-current="true"]{color:var(--red-ink)}
.menu__foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.menu__note{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
html.menu-open{overflow:hidden}

/* Первый экран */
.hero{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:var(--sp-12) 0 var(--sp-11);overflow:hidden}
.hero__fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__scan{position:absolute;inset:0;background-image:var(--scan)}
.hero__track{position:absolute;left:0;right:0;top:0;height:112px;opacity:0;background-image:var(--noise);background-size:180px 40px;will-change:transform,opacity;animation:track 11s var(--ease) infinite}
.hero__track::before,.hero__track::after{content:"";position:absolute;left:0;right:0;height:1px;background:#FFFFFF;opacity:.35}
.hero__track::before{top:24px}
.hero__track::after{top:80px;opacity:.18}
@keyframes track{0%,70%{transform:translateY(-120%);opacity:0}72%{opacity:.5}86%{transform:translateY(105vh);opacity:.3}87%,100%{transform:translateY(105vh);opacity:0}}
.streak{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:1px;background:#FFFFFF;opacity:.1;animation:drift 16s var(--ease) infinite alternate}
.streak:nth-child(even){animation-duration:21s;opacity:.06}
@keyframes drift{to{transform:translateX(8vw)}}

.osd{position:absolute;inset:0;z-index:1;pointer-events:none;font-size:.875rem;line-height:1.25rem;color:rgba(242,240,235,.72)}
.osd span{position:absolute;display:flex;align-items:center;gap:var(--sp-3);letter-spacing:.08em}
.osd svg{width:12px;height:12px}
.osd__tl svg{animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.osd__tl{left:var(--sp-7);top:var(--sp-12)}
.osd__tr{right:var(--sp-7);top:var(--sp-12)}
.osd__bl{left:var(--sp-7);bottom:var(--sp-7)}
.osd__br{right:var(--sp-7);bottom:var(--sp-7)}
@media (max-width:767px){.osd .osd__tl,.osd .osd__tr{display:none}.osd__bl{left:var(--sp-5);bottom:var(--sp-6)}.osd__br{right:var(--sp-5);bottom:var(--sp-6)}.osd{font-size:.75rem;line-height:1rem}}

.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__kicker{display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border:1px solid var(--s3);border-radius:var(--r-full);background:rgba(0,0,0,.6);font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.live-dot{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:var(--red)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.8);opacity:0}}

.logo{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(640px,100%);margin-top:var(--sp-8);text-align:left}
.logo__mark{position:relative;grid-column:1/-1;aspect-ratio:446/100;color:var(--paper)}
.wm{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wm--a{clip-path:inset(0 0 44% 0)}
.wm--b{clip-path:inset(57.6% 0 29.4% 0);transform:translateX(.7%)}
.wm--c{clip-path:inset(72% 0 0 0);transform:translateX(-.3%)}
.wm--r,.wm--k,.wm--g{opacity:0;will-change:transform,opacity}
.wm--r{color:var(--red)}
.wm--k{color:#7FE7F2}
.wm--g{clip-path:inset(20% 0 62% 0)}
.logo__studio{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:var(--sp-5);padding-inline:var(--sp-1);font-size:1.25rem;line-height:1.75rem;color:#D6D4CF}
.logo__by{grid-column:1;align-self:start;margin-top:var(--sp-3);font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.stamp{color:var(--red);-webkit-mask-image:url(../img/brand/stamp-mask.webp);mask-image:url(../img/brand/stamp-mask.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.logo .stamp{grid-column:2;justify-self:end;width:104%;max-width:none;margin-top:var(--sp-4);transform:rotate(-5deg)}

/* Анимация логотипа: глитч всплесками, удар печати */
.fx-ready:not(.lite) .wm--r{animation:chromaR 9s steps(1) infinite}
.fx-ready:not(.lite) .wm--k{animation:chromaK 9s steps(1) infinite}
.fx-ready:not(.lite) .wm--g{animation:slice 9s steps(1) infinite}
.fx-ready:not(.lite) .wm--b{animation:shiftB 9s steps(1) infinite}
@keyframes chromaR{0%,89%{opacity:0;transform:none}90%{opacity:.85;transform:translate(-.9%,0)}92%{opacity:.6;transform:translate(.6%,-1%)}94%{opacity:.8;transform:translate(-1.4%,1%)}95%,100%{opacity:0;transform:none}}
@keyframes chromaK{0%,89%{opacity:0;transform:none}90%{opacity:.55;transform:translate(.9%,0)}92%{opacity:.35;transform:translate(-.5%,1%)}94%{opacity:.5;transform:translate(1.2%,0)}95%,100%{opacity:0;transform:none}}
@keyframes slice{0%,90%{opacity:0;transform:none}91%{opacity:1;transform:translateX(3%)}93%{opacity:1;transform:translateX(-2%)}94%{opacity:0;transform:none}96%{opacity:1;transform:translateX(1.5%)}97%,100%{opacity:0;transform:none}}
@keyframes shiftB{0%,90%{transform:translateX(.7%)}91%{transform:translateX(2.4%)}93%{transform:translateX(-1.2%)}95%,100%{transform:translateX(.7%)}}
.js .logo .stamp{opacity:0}
.fx-ready .logo .stamp{animation:slam 600ms var(--ease) 700ms both}
@keyframes slam{0%{opacity:0;transform:rotate(-5deg) scale(1.9)}55%{opacity:1;transform:rotate(-5deg) scale(.96)}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
.fx-ready .logo__mark{animation:thud 300ms var(--ease) 1030ms both}
@keyframes thud{0%,100%{transform:none}35%{transform:translate(1px,2px)}70%{transform:translate(-1px,-1px)}}

.hero__title{display:inline-block;max-width:680px;margin-top:var(--sp-9);padding-block:var(--sp-2);font-size:1.875rem;line-height:2.25rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{max-width:680px;margin-top:var(--sp-5);font-size:1rem;line-height:1.5rem;color:var(--fg2)}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);margin-top:var(--sp-7)}
.hero__note{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.proof{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-7);font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.proof b{margin-right:var(--sp-2);font-weight:500;color:var(--fg)}
@media (min-width:640px){.hero__title{font-size:2.25rem;line-height:2.5rem}.hero__sub{font-size:1.125rem;line-height:1.75rem}}
@media (min-width:1024px){.hero__title{font-size:3rem;line-height:1}}
@media (max-width:639px){.logo{margin-top:var(--sp-7)}.logo__studio{margin-top:var(--sp-3);font-size:.875rem;line-height:1.25rem}.logo__by{font-size:.75rem;line-height:1rem}.hero__title{margin-top:var(--sp-8)}.hero__cta{width:100%}.hero__cta .btn{width:100%}}

/* Лента */
.tape{position:relative;z-index:2;overflow:hidden;padding-block:var(--sp-9);margin-block:calc(-1 * var(--sp-10)) calc(-1 * var(--sp-7))}
.tape__row{display:flex;gap:var(--sp-7);width:max-content;margin-left:-10vw;padding:var(--sp-3) var(--sp-7);border:1px solid var(--red);background:var(--warm);font-size:.875rem;line-height:1.25rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);transform:rotate(-2.5deg) translateX(-6%);transition:transform 1200ms var(--ease)}
.tape__row span:nth-child(odd){color:var(--red-ink)}
.tape.is-in .tape__row{transform:rotate(-2.5deg) translateX(0)}

/* Секции */
.section{position:relative;padding-block:var(--sp-10)}
@media (min-width:1024px){.section{padding-block:var(--sp-12)}}
.sec-head{max-width:800px;margin-bottom:var(--sp-8)}
.kicker{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg3)}
.kicker .mono{color:var(--red-ink)}
.h2{font-size:1.875rem;line-height:2.25rem;font-weight:600;letter-spacing:-.02em}
.lead{max-width:680px;margin-top:var(--sp-5);font-size:1rem;line-height:1.5rem;color:var(--fg2)}
@media (min-width:768px){.h2{font-size:2.25rem;line-height:2.5rem}.lead{font-size:1.125rem;line-height:1.75rem}.sec-head{margin-bottom:var(--sp-9)}}
@media (min-width:1280px){.h2{font-size:3rem;line-height:1}}

/* Появление при прокрутке */
:where(.js) [data-reveal]{opacity:0;translate:0 var(--sp-7);transition:opacity 700ms var(--ease),translate 700ms var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
:where(.js) [data-reveal].is-in{opacity:1;translate:none}

/* Работы */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-3) var(--sp-5);border:1px solid var(--s3);border-radius:var(--r-full);background:var(--s1);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg2);transition:transform 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease)}
.chip .mono{font-size:.75rem;line-height:1rem;color:var(--fg3);transition:color 300ms var(--ease)}
.chip:hover{color:var(--fg);border-color:var(--s4);background:var(--s2)}
.chip:active{transform:scale(.98)}
.chip[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:#000000}
.chip[aria-pressed="true"] .mono{color:#4A4A4A}

.works__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:640px){.works__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}}
@media (min-width:1024px){.works__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work{position:relative;display:flex;flex-direction:column;padding:var(--sp-2);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1);transition:transform 500ms var(--ease),border-color 300ms var(--ease),opacity 700ms var(--ease),translate 700ms var(--ease);transition-delay:0ms,0ms,calc(var(--d,0) * 90ms),calc(var(--d,0) * 90ms)}
.work:hover{transform:translateY(-4px);border-color:#3A3A3A}
.work:has(.work__link:active){transform:scale(.99)}
.work:has(.work__link:focus-visible){outline:2px solid var(--red-ink);outline-offset:2px}
.work__link:focus-visible{outline:none}
.work__media{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-lg);background:var(--s2)}
.work__media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 500ms var(--ease)}
.work:hover .work__media img{transform:scale(1.04)}
.work__media::after{content:"";position:absolute;inset:0;background-image:var(--scan);background-size:4px 3px;opacity:0;transition:opacity 300ms var(--ease);pointer-events:none}
.work:hover .work__media::after{opacity:1}
.work__osd,.work__num{position:absolute;top:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--r);background:rgba(0,0,0,.78);font-size:.75rem;line-height:1rem;color:var(--paper);z-index:1}
.work__osd{left:var(--sp-4);opacity:0;transform:translateY(var(--sp-2));transition:opacity 300ms var(--ease),transform 500ms var(--ease)}
.work__osd svg{width:10px;height:10px;color:var(--red-ink)}
.work:hover .work__osd{opacity:1;transform:none}
.work__num{right:var(--sp-4)}
.work__body{display:flex;flex:1;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.work__cat{font-size:.75rem;line-height:1rem;font-weight:500;color:var(--fg3)}
.work__title{font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-.01em}
.work__link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r-xl)}
.work__desc{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tags li{padding:var(--sp-1) var(--sp-3);border:1px solid var(--s3);border-radius:var(--r-full);font-size:.75rem;line-height:1rem;color:var(--fg2)}
.work__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:auto;padding-top:var(--sp-3)}
.work__go{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--fg)}
.work__go svg{width:16px;height:16px;transition:transform 300ms var(--ease)}
.work:hover .work__go svg{transform:translate(2px,-2px)}
.work__code{position:relative;z-index:3;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--s3);border-radius:var(--r-lg);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg2);transition:background-color 300ms var(--ease),color 300ms var(--ease),transform 300ms var(--ease)}
.work__code svg{width:16px;height:16px}
.work__code:hover{background:var(--s2);color:var(--fg)}
.work__code:active{transform:scale(.98)}
.work__wake{display:flex;align-items:center;gap:var(--sp-2);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.work__wake svg{width:14px;height:14px;flex:none}

.work--featured{grid-column:1/-1}
.work__media--term{display:flex;aspect-ratio:auto;min-height:288px;padding:var(--sp-5);background:#000000}
.term{display:flex;flex:1;flex-direction:column;gap:var(--sp-4);font-size:.75rem;line-height:1rem}
.term__bar{display:flex;align-items:center;gap:var(--sp-3);color:var(--fg3)}
.term__dots{display:flex;gap:var(--sp-2)}
.term__dots i,.code__dots i{width:8px;height:8px;border-radius:50%;background:var(--s4)}
.term__dots i:first-child,.code__dots i:first-child{background:var(--red)}
.term__body{display:grid;gap:var(--sp-2);color:var(--fg2)}
.term__body p{display:flex;gap:var(--sp-4);white-space:nowrap;overflow:hidden}
.term__body .c-p{color:var(--red-ink)}
.term__body .c-pkg{min-width:22ch;color:var(--paper)}
.term__body .c-dim{color:var(--fg3)}
.js .term__body p{opacity:0;transition:opacity 500ms var(--ease);transition-delay:calc(var(--i) * 120ms + 200ms)}
.js .work--featured.is-in .term__body p{opacity:1}
@media (max-width:359px){.term__body p{gap:var(--sp-3)}.term__body .c-pkg{min-width:20ch}}@media (min-width:640px){.term{font-size:.875rem;line-height:1.25rem}}
@media (min-width:1024px){.work--featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.work--featured .work__body{padding:var(--sp-7) var(--sp-7) var(--sp-6)}.work--featured .work__title{font-size:1.875rem;line-height:2.25rem}.work--featured .work__desc{font-size:1rem;line-height:1.5rem}}

.works__more{display:flex;justify-content:center;margin-top:var(--sp-8)}
.works__more .mono{color:var(--fg3)}

/* Лаборатория скиллов */
.lab{background:var(--warm)}
.pkgs{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:640px){.pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pkgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}}
.pkg{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border:1px solid rgba(242,240,235,.1);border-radius:var(--r-xl);background:var(--bg);transition:transform 500ms var(--ease),border-color 300ms var(--ease),opacity 700ms var(--ease),translate 700ms var(--ease);transition-delay:0ms,0ms,calc(var(--d,0) * 90ms),calc(var(--d,0) * 90ms)}
.pkg:hover{transform:translateY(-4px);border-color:rgba(242,240,235,.22)}
.pkg__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);font-size:.875rem;line-height:1.25rem}
.pkg__name{color:var(--red-ink)}
.pkg__idx{color:var(--fg3)}
.pkg__role{margin-top:var(--sp-3);font-size:1.25rem;line-height:1.75rem;font-weight:600}
.pkg__q{font-size:1rem;line-height:1.5rem;color:var(--fg2)}
.pkg__meta{margin-top:auto;padding-top:var(--sp-4);font-size:.75rem;line-height:1rem;color:var(--fg3)}

.pipe{margin-top:var(--sp-9);padding:var(--sp-6);border:1px solid rgba(242,240,235,.1);border-radius:var(--r-xl);background:var(--bg)}
.pipe__label{margin-bottom:var(--sp-5);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg3)}
.pipe__list{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.pipe__list li{position:relative;display:flex;flex:none;align-items:center;gap:var(--sp-3)}
@media (min-width:1280px){.pipe__list{flex-wrap:nowrap;gap:var(--sp-2)}.pipe__list li{gap:var(--sp-2)}.pipe__list li+li::before{content:"";width:16px;height:1px;background:var(--s4)}}
.pipe__step{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border:1px solid var(--s3);border-radius:var(--r-lg);background:var(--s1);font-size:.875rem;line-height:1.25rem;white-space:nowrap}
.pipe__step b{color:var(--red-ink);font-weight:500}
.pipe__step::after{content:"";position:absolute;inset:-1px;border:1px solid var(--red-ink);border-radius:var(--r-lg);opacity:0}
.fx-ready:not(.lite) .pipe.is-in .pipe__step::after{animation:pipe 6.3s steps(1) infinite;animation-delay:calc(var(--i) * 700ms)}
@keyframes pipe{0%{opacity:1}11%,100%{opacity:0}}

.install{display:grid;gap:var(--sp-5);margin-top:var(--sp-5)}
@media (min-width:1024px){.install{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.code{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;padding:var(--sp-5);border:1px solid rgba(242,240,235,.1);border-radius:var(--r-xl);background:var(--bg)}
.code__bar{display:flex;align-items:center;gap:var(--sp-3);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.code__dots{display:flex;gap:var(--sp-2)}
.code pre{margin:0;overflow-x:auto;padding-bottom:var(--sp-2);font-size:.875rem;line-height:1.5rem;color:var(--paper);white-space:pre;scrollbar-width:thin;scrollbar-color:var(--s4) transparent}
@media (max-width:639px){.code pre{white-space:pre-wrap;overflow-wrap:anywhere}}
.code__p{color:var(--red-ink);user-select:none;-webkit-user-select:none}
.code__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.code__status{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.code__status.is-error{color:var(--red-ink)}
.agents{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-5);border:1px solid rgba(242,240,235,.1);border-radius:var(--r-xl);background:var(--bg)}
.agents__label{font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg3)}
.agents__list{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.agents__list li{padding:var(--sp-1) var(--sp-3);border:1px solid var(--s3);border-radius:var(--r-full);font-size:.75rem;line-height:1rem;color:var(--fg2)}

/* Главная мысль */
.tagline{padding-block:var(--sp-12)}
.tagline__text{max-width:680px;font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.025em;color:var(--fg)}
.tagline__text em{color:var(--red-ink)}
@media (min-width:768px){.tagline{padding-block:var(--sp-12) calc(var(--sp-12) + var(--sp-7))}.tagline__text{font-size:3rem;line-height:1}}
.js .tagline__text .tw{opacity:.3;transition:opacity 600ms var(--ease)}
.js .tagline__text .tw.is-on{opacity:1}

/* Эфир */
.chan{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-9);padding:var(--sp-5);border:1px solid var(--s3);border-radius:var(--r-2xl);background:var(--s1)}
.chan__ava{width:56px;height:56px;flex:none;border-radius:50%;background:var(--s2)}
.chan__info{display:flex;flex:1 1 240px;flex-direction:column;gap:var(--sp-1);min-width:0}
.chan__name{display:flex;align-items:center;gap:var(--sp-3);font-size:1.125rem;line-height:1.75rem;font-weight:600}
.chan__name svg{width:20px;height:20px;color:var(--fg2)}
.chan__stats{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.chan__stats b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg)}
.chan__live{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.chan__live .live-dot{width:6px;height:6px}
.chan__cta{flex:none}
@media (max-width:639px){.chan__cta{width:100%}}

.efir__block+.efir__block{margin-top:var(--sp-10)}
.efir__bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-6)}
.efir__h{display:flex;align-items:center;gap:var(--sp-3);font-size:1.5rem;line-height:2rem;font-weight:600}
.efir__h svg{width:24px;height:24px;color:var(--red-ink)}
.efir__hint{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.efir__all{display:flex;justify-content:center;margin-top:var(--sp-9)}

.fresh{display:grid;gap:var(--sp-7)}
@media (min-width:1024px){.fresh{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sp-6)}}
.vid{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.vid__title{font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-.01em}
.vid--main .vid__title{font-size:1.5rem;line-height:2rem}
.vid__meta{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.vid__meta span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.vid__meta svg{width:16px;height:16px}
.vid__desc{font-size:.875rem;line-height:1.25rem;color:var(--fg2);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vid--main .vid__desc{font-size:1rem;line-height:1.5rem}

.yt{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s2);isolation:isolate;-webkit-tap-highlight-color:transparent}
.yt--v{aspect-ratio:9/16}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease),opacity 300ms var(--ease)}
.yt:hover img{transform:scale(1.03)}
.yt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s2)}
.yt__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(0,0,0,.66);color:#FFFFFF;transition:transform 500ms var(--ease),background-color 300ms var(--ease),color 300ms var(--ease)}
.yt__play svg{width:24px;height:24px;margin-left:var(--sp-1)}
.yt--v .yt__play{width:56px;height:56px;margin:-28px 0 0 -28px}
.yt:hover .yt__play,.yt:focus-visible .yt__play{transform:scale(1.08);background:var(--paper);color:#000000}
.yt:active .yt__play{transform:scale(.98)}
.yt__badge{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--r);background:rgba(0,0,0,.8);font-size:.75rem;line-height:1rem;color:var(--paper)}
.yt__badge svg{width:12px;height:12px}
.yt__dur{right:var(--sp-3);bottom:var(--sp-3)}
.yt__new{right:var(--sp-3);top:var(--sp-3);font-weight:500;border:1px solid var(--red-ink);color:var(--red-ink);background:#000000}
.yt__rank{left:var(--sp-3);top:var(--sp-3)}
.yt__views{left:var(--sp-3);bottom:var(--sp-3)}
.yt.is-playing{border-color:var(--s4)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000000}
.yt.is-loading::after{content:"";position:absolute;inset:0;background:var(--s2);animation:pulse 1.2s var(--ease) infinite alternate}
@keyframes pulse{from{opacity:.4}to{opacity:.8}}

.chapters{border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1)}
.chapters summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:48px;padding:var(--sp-3) var(--sp-5);cursor:pointer;list-style:none;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg)}
.chapters summary::-webkit-details-marker{display:none}
.chapters summary svg{width:16px;height:16px;color:var(--fg3);transition:transform 500ms var(--ease)}
.chapters[open] summary svg{transform:rotate(180deg)}
.chapters ol{display:grid;padding:0 var(--sp-2) var(--sp-2)}
.chapters[open] ol{animation:fadeUp 500ms var(--ease)}
.chapter{display:flex;align-items:baseline;gap:var(--sp-4);width:100%;min-height:40px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);text-align:left;font-size:.875rem;line-height:1.25rem;color:var(--fg2);transition:background-color 300ms var(--ease),color 300ms var(--ease)}
.chapter:hover{background:var(--s2);color:var(--fg)}
.chapter:active{transform:translateY(1px)}
.chapter time{flex:none;min-width:5ch;font-family:var(--mono);font-size:.75rem;line-height:1rem;color:var(--red-ink)}
@keyframes fadeUp{from{opacity:0;transform:translateY(calc(-1 * var(--sp-3)))}to{opacity:1;transform:none}}

.shorts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(208px,64%);gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--sp-5));padding:0 var(--sp-5) var(--sp-4);scroll-padding-inline:var(--sp-5);scrollbar-width:thin;scrollbar-color:var(--s4) transparent;overscroll-behavior-x:contain}
@media (min-width:640px){.shorts{grid-auto-columns:minmax(208px,38%)}}
@media (min-width:768px){.shorts{margin-inline:calc(-1 * var(--sp-6));padding-inline:var(--sp-6);scroll-padding-inline:var(--sp-6);grid-auto-columns:minmax(208px,30%)}}
@media (min-width:1024px){.shorts{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0}}
.short{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;scroll-snap-align:start}
.short__title{font-size:.875rem;line-height:1.25rem;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.short__meta{font-size:.75rem;line-height:1rem;color:var(--fg3)}

.empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-7);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1)}
.empty__h{font-size:1.125rem;line-height:1.75rem;font-weight:600}
.empty p{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.shorts__empty,.posts__empty{grid-column:1/-1;list-style:none}
.shorts:has(.shorts__empty){grid-auto-flow:row;grid-template-columns:1fr;overflow:visible}

/* Канал */
.chan__ava--tg{border-radius:var(--r-xl)}
.posts{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:768px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}.post--tall{grid-row:span 2}.post--wide{grid-column:span 2}}
.post{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;padding:var(--sp-5);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1);transition:transform 500ms var(--ease),border-color 300ms var(--ease),opacity 700ms var(--ease),translate 700ms var(--ease);transition-delay:0ms,0ms,calc(var(--d,0) * 90ms),calc(var(--d,0) * 90ms)}
.post:hover{transform:translateY(-4px);border-color:#3A3A3A}
.post:has(.post__link:focus-visible){outline:2px solid var(--red-ink);outline-offset:2px}
.post__link:focus-visible{outline:none}
.post__head{display:flex;align-items:center;gap:var(--sp-3)}
.post__ava{width:36px;height:36px;flex:none;border-radius:var(--r-lg);background:var(--s2)}
.post__who{display:flex;flex-direction:column;min-width:0}
.post__name{font-size:.875rem;line-height:1.25rem;font-weight:600}
.post__date{font-size:.75rem;line-height:1rem;color:var(--fg3)}
.post__id{margin-left:auto;padding:var(--sp-1) var(--sp-3);border:1px solid var(--s3);border-radius:var(--r);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.post__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.post__tags li{font-size:.75rem;line-height:1rem;font-weight:500;color:var(--red-ink)}
.post__title{font-size:1.125rem;line-height:1.75rem;font-weight:600;letter-spacing:-.01em}
.post--wide .post__title{font-size:1.25rem;line-height:1.75rem}
.post__text{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.post__text+.post__text{margin-top:calc(-1 * var(--sp-2))}
.post__media{overflow:hidden;border-radius:var(--r-lg);background:var(--s2)}
.post__media img{width:100%;height:auto;transition:transform 500ms var(--ease)}
.post:hover .post__media img{transform:scale(1.02)}
.post__preview{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);border:1px solid var(--s3);border-radius:var(--r-lg);background:var(--s2)}
.post__site{font-size:.75rem;line-height:1rem;font-weight:500;color:var(--red-ink)}
.post__ptitle{font-size:.875rem;line-height:1.25rem;font-weight:600}
.post__pdesc{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.post__list{display:grid;gap:var(--sp-2);font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.post__list li{display:flex;gap:var(--sp-3)}
.post__list li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--red-ink)}
.post__more{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.post__doc{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--s3);border-radius:var(--r-lg);background:var(--s2);font-size:.875rem;line-height:1.25rem}
.post__doc svg{width:20px;height:20px;color:var(--red-ink)}
.post__doc small{margin-left:auto;font-size:.75rem;line-height:1rem;color:var(--fg3)}
.post__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-2)}
.post__stat{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.post__stat svg{width:14px;height:14px}
.react{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);background:var(--s2);font-size:.75rem;line-height:1rem;color:var(--fg2)}
.post__go{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--fg)}
.post__go svg{width:16px;height:16px;transition:transform 300ms var(--ease)}
.post:hover .post__go svg{transform:translate(2px,-2px)}
.post__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-xl)}

/* Услуги */
.svc{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.svc{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}}
.svc__card{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1);transition:transform 500ms var(--ease),border-color 300ms var(--ease),opacity 700ms var(--ease),translate 700ms var(--ease);transition-delay:0ms,0ms,calc(var(--d,0) * 90ms),calc(var(--d,0) * 90ms)}
.svc__card:hover{transform:translateY(-4px);border-color:#3A3A3A}
.svc__top{display:flex;align-items:center;justify-content:space-between}
.svc__icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--s4);border-radius:var(--r-lg);color:var(--paper)}
.svc__icon svg{width:24px;height:24px}
.svc__num{font-size:.75rem;line-height:1rem;color:var(--fg3)}
.svc__title{font-size:1.25rem;line-height:1.75rem;font-weight:600}
.svc__text{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.svc__cta{margin-top:auto;align-self:flex-start}

.included{margin-top:var(--sp-10)}
.included__h,.how__h{margin-bottom:var(--sp-6);font-size:1.5rem;line-height:2rem;font-weight:600}
.benefits{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:768px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}}
@media (min-width:1280px){.benefits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.benefits li{display:flex;gap:var(--sp-4)}
.benefits svg{width:24px;height:24px;flex:none;color:var(--red-ink)}
.benefits p{font-size:1rem;line-height:1.5rem;color:var(--fg2)}
.benefits b{display:block;margin-bottom:var(--sp-1);color:var(--fg)}

.how{margin-top:var(--sp-10)}
.steps{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}}
.steps li{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1)}
.steps__n{font-size:1.875rem;line-height:2.25rem;color:var(--red-ink)}
.steps h4{font-size:1.25rem;line-height:1.75rem;font-weight:600}
.steps p{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}

.about{display:grid;grid-template-columns:1fr;gap:var(--sp-7);margin-top:var(--sp-10);padding:var(--sp-6);border:1px solid var(--s3);border-radius:var(--r-2xl);background:var(--s1)}
@media (min-width:1024px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-9);padding:var(--sp-8)}}
.about .kicker{margin-bottom:var(--sp-4)}
.about__h{font-size:1.5rem;line-height:2rem;font-weight:600}
.about__me>p{margin-top:var(--sp-4);color:var(--fg2)}
.about__nums{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-6)}
.about__nums li{display:flex;flex-direction:column}
.about__nums b{font-size:2.25rem;line-height:2.5rem;font-weight:400;color:var(--fg)}
.about__nums span{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.stack{display:grid;gap:var(--sp-2)}
.stack div{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);border:1px solid var(--s3);border-radius:var(--r-lg);background:var(--bg)}
.stack dt{font-size:1rem;line-height:1.5rem;font-weight:600}
.stack dd{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}

/* Вопросы */
.faq__wrap{display:grid;gap:var(--sp-6)}
@media (min-width:1024px){.faq__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--sp-9)}.faq .sec-head{margin-bottom:0}}
.faq__list{display:grid;gap:var(--sp-3);align-content:start}
.faq__list details{border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1);transition:border-color 300ms var(--ease)}
.faq__list details[open]{border-color:var(--s4)}
.faq__list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:56px;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-xl);cursor:pointer;list-style:none;font-size:1rem;line-height:1.5rem;font-weight:600;transition:background-color 300ms var(--ease)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary:hover{background:var(--s2)}
.faq__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--s4);border-radius:50%;transition:transform 500ms var(--ease)}
.faq__icon svg{width:16px;height:16px}
.faq__list details[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding:0 var(--sp-5) var(--sp-5);font-size:1rem;line-height:1.5rem;color:var(--fg2)}
.faq__list details[open] .faq__a{animation:fadeUp 500ms var(--ease)}
@media (min-width:768px){.faq__list summary{padding:var(--sp-5) var(--sp-6);font-size:1.125rem;line-height:1.75rem}.faq__a{padding:0 var(--sp-6) var(--sp-6)}}

/* Связь */
.contact__grid{display:grid;gap:var(--sp-8)}
@media (min-width:1024px){.contact__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-9);align-items:end}}
.brief{display:grid;gap:var(--sp-6);padding:var(--sp-6);border:1px solid var(--s3);border-radius:var(--r-2xl);background:var(--s1)}
@media (min-width:768px){.brief{padding:var(--sp-7)}}
.label{display:flex;align-items:baseline;gap:var(--sp-3);font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--fg)}
.label__req{font-size:.75rem;line-height:1rem;font-weight:400;color:var(--fg3)}
.brief__types{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.brief__types legend{width:100%;margin-bottom:var(--sp-3)}
.pick{position:relative;display:inline-flex}
.pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-3) var(--sp-5);border:1px solid var(--s4);border-radius:var(--r-full);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg2);transition:background-color 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease),transform 300ms var(--ease)}
.pick:hover span{color:var(--fg);background:var(--s2)}
.pick input:active+span{transform:scale(.98)}
.pick input:checked+span{background:var(--paper);border-color:var(--paper);color:#000000}
.pick input:focus-visible+span{outline:2px solid var(--red-ink);outline-offset:2px}
.field{display:grid;gap:var(--sp-3)}
.input{width:100%;padding:var(--sp-4) var(--sp-5);border:1px solid var(--s4);border-radius:var(--r-lg);background:var(--bg);font:inherit;font-size:1rem;line-height:1.5rem;color:var(--fg);transition:border-color 300ms var(--ease)}
.input::placeholder{color:#7A7A7A}
.input:hover{border-color:#4A4A4A}
.input:focus{border-color:var(--paper);outline:2px solid var(--red-ink);outline-offset:2px}
.input--area{min-height:128px;resize:vertical}
.field.is-invalid .input{border-color:var(--red-ink)}
.field__err{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:.875rem;line-height:1.25rem;color:var(--red-ink)}
.field__err svg{width:16px;height:16px;flex:none;margin-top:var(--sp-1)}
.brief__send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.brief__hint{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.brief__ok{padding:var(--sp-4) var(--sp-5);border:1px solid var(--s4);border-radius:var(--r-lg);background:var(--bg);font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.brief__ok a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media (max-width:639px){.brief__send .btn{width:100%}}

.contact__side{display:flex;flex-direction:column;gap:var(--sp-4)}
.links{display:grid;gap:var(--sp-3)}
.links a{display:flex;align-items:center;gap:var(--sp-4);min-height:64px;padding:var(--sp-4) var(--sp-5);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1);transition:transform 500ms var(--ease),border-color 300ms var(--ease),background-color 300ms var(--ease)}
.links a:hover{transform:translateY(-2px);border-color:#3A3A3A;background:var(--s2)}
.links a:active{transform:scale(.98)}
.links svg{width:24px;height:24px;flex:none;color:var(--paper)}
.links span{display:flex;flex-direction:column;min-width:0}
.links b{font-size:1rem;line-height:1.5rem}
.links small{font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.links .links__go{width:16px;height:16px;margin-left:auto;color:var(--fg3);transition:transform 300ms var(--ease)}
.links a:hover .links__go{transform:translate(2px,-2px)}
.stamp--small{width:200px;margin-top:var(--sp-6);align-self:flex-end;transform:rotate(-6deg);opacity:.9}

/* Подвал */
.footer{padding:0 0 var(--sp-7)}
.rule{height:1px;background:var(--s3)}
.footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7);padding-block:var(--sp-9)}
@media (min-width:1024px){.footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
.footer__brand{grid-column:1/-1}
@media (min-width:1024px){.footer__brand{grid-column:auto}}
.footer__logo{width:160px;color:var(--paper)}
.footer__studio{display:flex;justify-content:space-between;width:160px;margin-top:var(--sp-3);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.footer__copy{margin-top:var(--sp-5);font-size:.875rem;line-height:1.25rem;color:var(--fg3)}
.footer__h{margin-bottom:var(--sp-4);font-size:.875rem;line-height:1.25rem;font-weight:600}
.footer__col ul{display:grid;gap:var(--sp-1)}
.footer__col a{display:inline-flex;align-items:center;min-height:32px;font-size:.875rem;line-height:1.25rem;color:var(--fg2);transition:color 300ms var(--ease)}
.footer__col a:hover{color:var(--fg)}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-6);font-size:.75rem;line-height:1rem;color:var(--fg3)}
.updated{display:inline-flex;align-items:center;gap:var(--sp-3)}
.updated .live-dot{width:6px;height:6px}
.fx-toggle{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--s3);border-radius:var(--r-full);font-size:.75rem;line-height:1rem;color:var(--fg2);transition:background-color 300ms var(--ease),color 300ms var(--ease),transform 300ms var(--ease)}
.fx-toggle:hover{background:var(--s2);color:var(--fg)}
.fx-toggle:active{transform:scale(.98)}
.fx-toggle__dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.fx-toggle[aria-pressed="false"] .fx-toggle__dot{background:var(--s4)}

/* Страница 404 */
.nf{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:var(--sp-11) 0 var(--sp-12);overflow:hidden}
.nf .osd__tl,.nf .osd__tr{top:var(--sp-7)}
.nf__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.nf__logo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-xl);color:var(--paper);transition:opacity 300ms var(--ease)}
.nf__logo:hover{opacity:.72}
.nf__logo svg{width:144px;height:auto}
.nf__logo .footer__studio{width:144px;margin:0}
.nf__code{position:relative;display:grid;place-items:center;margin-top:var(--sp-9);margin-bottom:var(--sp-4)}
.nf__num{position:relative;display:block;padding-inline:var(--sp-5);font-size:6rem;line-height:1;font-weight:200;letter-spacing:-.04em;color:var(--paper)}
.nf__num::before,.nf__num::after{content:attr(data-text);position:absolute;inset:0;padding-inline:inherit;opacity:0;pointer-events:none}
.nf__num::before{color:var(--red)}
.nf__num::after{color:#7FE7F2}
.nf__stamp{position:absolute;left:50%;top:72%;width:min(256px,70vw);margin-left:calc(min(256px,70vw) / -2);transform:rotate(-7deg);animation:nfSlam 600ms var(--ease) 500ms both}
@keyframes nfSlam{0%{opacity:0;transform:rotate(-7deg) scale(1.9)}55%{opacity:1;transform:rotate(-7deg) scale(.96)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
:where(html:not(.lite)) .nf__num::before{animation:nfR 7s steps(1) 1.4s infinite}
:where(html:not(.lite)) .nf__num::after{animation:nfK 7s steps(1) 1.4s infinite}
@keyframes nfR{0%,84%{opacity:0;transform:none}85%{opacity:.85;transform:translate(-4px,0)}87%{opacity:.6;transform:translate(3px,-2px)}89%{opacity:.8;transform:translate(-6px,2px)}90%,100%{opacity:0;transform:none}}
@keyframes nfK{0%,84%{opacity:0;transform:none}85%{opacity:.5;transform:translate(4px,0)}87%{opacity:.35;transform:translate(-3px,2px)}89%{opacity:.5;transform:translate(5px,0)}90%,100%{opacity:0;transform:none}}
.nf__title{display:inline-block;max-width:680px;margin-top:var(--sp-10);padding-block:var(--sp-2);font-size:1.875rem;line-height:2.25rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf__text{max-width:680px;margin-top:var(--sp-4);font-size:1rem;line-height:1.5rem;color:var(--fg2)}
.nf__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-7)}
.btn--back:hover svg{transform:translateX(-2px)}
.nf__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-8)}
.nf__links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--sp-4);border-radius:var(--r-full);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg3);transition:color 300ms var(--ease),background-color 300ms var(--ease)}
.nf__links a:hover{color:var(--fg);background:var(--s2)}
@media (min-width:640px){.nf__num{font-size:8rem}.nf__title{font-size:2.25rem;line-height:2.5rem}.nf__text{font-size:1.125rem;line-height:1.75rem}}
@media (min-width:1024px){.nf__title{font-size:3rem;line-height:1}}
@media (max-width:639px){.nf__cta{flex-direction:column;width:100%}.nf__cta .btn{width:100%}}

/* Документы */
.doc{padding:calc(var(--sp-12) + var(--sp-7)) 0 var(--sp-11)}
.doc__wrap{max-width:880px}
.doc__back{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;margin-bottom:var(--sp-5);font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--fg2);transition:color 300ms var(--ease)}
.doc__back svg{width:16px;height:16px;transition:transform 300ms var(--ease)}
.doc__back:hover{color:var(--fg)}
.doc__back:hover svg{transform:translateX(-2px)}
.doc__title{display:inline-block;max-width:680px;padding-block:var(--sp-2);font-size:1.875rem;line-height:2.25rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}@media (max-width:359px){.doc__title,.doc .h2{font-size:1.5rem;line-height:2rem}}@media (min-width:640px){.doc__title{font-size:2.25rem;line-height:2.5rem}}
.doc__toc{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7)}
.doc__facts{display:grid;gap:var(--sp-4);margin-top:var(--sp-9)}
@media (min-width:640px){.doc__facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.doc__fact{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:1px solid var(--s3);border-radius:var(--r-xl);background:var(--s1)}
.doc__fact svg{width:24px;height:24px;color:var(--red-ink)}
.doc__fact b{font-size:1rem;line-height:1.5rem;font-weight:600}
.doc__fact span{font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.doc__sec{margin-top:var(--sp-11);scroll-margin-top:var(--sp-12)}
.doc__sec .kicker{margin-bottom:var(--sp-4)}
.doc__list{display:grid;gap:var(--sp-7);margin-top:var(--sp-8)}
.doc__item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-2) var(--sp-4)}
.doc__item>:not(.doc__n){grid-column:2}.doc__n{grid-row:1 / span 2;font-family:var(--mono);font-size:.875rem;line-height:1.75rem;color:var(--red-ink)}
.doc__item h3{font-size:1.125rem;line-height:1.75rem;font-weight:600}
.doc__item p{max-width:680px;font-size:1rem;line-height:1.5rem;color:var(--fg2)}
.doc__item p+p{margin-top:var(--sp-3)}
.doc a:not(.btn):not(.doc__back){color:var(--fg);text-decoration:underline;text-decoration-color:var(--s4);text-underline-offset:3px;transition:text-decoration-color 300ms var(--ease)}
.doc a:not(.btn):not(.doc__back):hover{text-decoration-color:var(--fg)}
.doc code{padding:0 var(--sp-2);border-radius:var(--r);background:var(--s2);font-family:var(--mono);font-size:.875em;color:var(--fg)}
.doc__end{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);margin-top:var(--sp-11);padding:var(--sp-7);border:1px solid var(--s3);border-radius:var(--r-2xl);background:var(--s1)}
.doc__end p{max-width:680px;color:var(--fg2)}
.nav__links--doc{display:none}
@media (min-width:640px){.nav__links--doc{display:flex}}
@media (min-width:1024px){.doc__title{font-size:3rem;line-height:1}}
@media (pointer:coarse){.footer__col a{min-height:44px}.footer__col ul{gap:0}}

/* Скелет для картинок, пока грузятся */
.work__media img,.yt img,.post__media img{background:var(--s2)}

/* Плавная перестановка карточек при фильтре */
::view-transition-group(*){animation-duration:500ms;animation-timing-function:var(--ease)}
::view-transition-old(*),::view-transition-new(*){animation-timing-function:var(--ease)}

/* Пауза анимаций вне экрана */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* Лёгкий режим для слабых устройств */
.lite .grain{display:none}
.lite .hero__fx::before{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:180px 180px;opacity:.07}
.lite .hero__fx>*{display:none}
.lite .hero__fx .hero__scan{display:block}
.lite .wm--r,.lite .wm--k,.lite .wm--g{display:none}
.lite .live-dot::after,.lite .osd__tl svg{animation:none}
.lite .nav__bar{background:rgba(24,24,24,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
.lite .menu{background:rgba(0,0,0,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
.lite .tape__row{transition:none;transform:rotate(-2.5deg)}
.lite .nf__stamp{animation:none}

/* Меньше движения: только смена прозрачности */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{translate:none}
  .menu__links li,.menu__foot{transform:none}
  .work:hover,.pkg:hover,.post:hover,.svc__card:hover,.links a:hover,.btn:hover,.btn:hover svg,.work:hover .work__media img,.yt:hover img,.post:hover .post__media img{transform:none}
  .fx-ready .logo .stamp{animation:fadeIn 500ms var(--ease) 300ms both}
  .fx-ready .logo__mark{animation:none}
  .nf__stamp{animation:fadeIn 500ms var(--ease) 300ms both}
  .nf__num::before,.nf__num::after{animation:none!important}
  .chapters[open] ol,.faq__list details[open] .faq__a{animation:fadeIn 300ms var(--ease)}
  .nav__burger span{transition:opacity 300ms var(--ease)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fx-ready .logo .stamp.no-slam{animation:fadeIn 500ms var(--ease) both}
@media print{.grain,.nav,.hero__fx,.osd,.tape{display:none}}