/* AZMARI — сайт студии. Чёрный, тёплый белый, красный только акцентом (точка из логотипа). */
:root{
  --ink:#0a0a0a; --ink2:#111111; --ink3:#1a1a1a; --line:rgba(255,255,255,.12);
  --paper:#f2f0eb; --paper2:#e7e4dd; --mute:#8b8b8b; --mute2:#5c5c5c;
  --red:#ff2d2d; --red-d:#d91f1f;
  --gut:clamp(16px,4.4vw,64px);
  --max:1360px;
  --f-d:"Inter Tight",system-ui,sans-serif;
  --f-b:Manrope,system-ui,sans-serif;
  --f-s:"Cormorant Garamond",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--f-b);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-family:var(--f-s);font-style:italic;font-weight:500;letter-spacing:0}
::selection{background:var(--red);color:#fff}

/* Заставка */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.loader-dot{width:14px;height:14px;border-radius:50%;background:var(--red);animation:pulse 1s ease-in-out infinite;transition:transform 1s var(--ease-io)}
.loader-tc{position:absolute;bottom:clamp(20px,5vh,48px);left:50%;transform:translateX(-50%);font:500 12px/1 var(--f-d);letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.loader-tc .rec{color:var(--red)}
body.is-out .loader-dot{transform:scale(4);opacity:0;transition:transform .7s var(--ease),opacity .7s}
body.is-done .loader{opacity:0;visibility:hidden}
@keyframes pulse{50%{opacity:.35}}

/* Зерно плёнки */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Курсор-точка (только мышь) */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
.cursor span{display:block;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cursor.big span{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,45,45,.18);backdrop-filter:blur(2px)}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* Шапка */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gut);transition:background .4s,backdrop-filter .4s,padding .4s}
.top.solid{background:rgba(10,10,10,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);padding-top:12px;padding-bottom:12px}
.logo img{height:26px;width:auto}
.nav{display:flex;gap:30px;font:500 14px/1 var(--f-d);letter-spacing:.02em}
.nav a{position:relative;color:#cfcfcf;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:3px}
.lang button{font:600 12px/1 var(--f-d);letter-spacing:.08em;padding:7px 10px;border-radius:99px;color:var(--mute);transition:background .3s,color .3s}
.lang button.on{background:var(--paper);color:var(--ink)}

/* Кнопки */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font:600 16px/1 var(--f-d);letter-spacing:.01em;padding:19px 28px;border-radius:99px;background:var(--paper);color:var(--ink);overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover{color:#fff}.btn:hover::before{transform:translateY(0)}
.btn .arr{font-style:normal;display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-ghost::before{background:var(--paper)}
.btn-ghost:hover{color:var(--ink)}
.btn-red{background:var(--red);color:#fff}
.btn-red::before{background:var(--paper)}
.btn-red:hover{color:var(--ink)}
.btn-sm{padding:12px 18px;font-size:14px}
.magnet{will-change:transform}

/* Общие */
section{position:relative}
.tag{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.h2{font:500 clamp(40px,6.4vw,104px)/.98 var(--f-d);letter-spacing:var(--ls,-.035em);margin-top:22px}
.h2 em{font-size:1.08em;line-height:.9}
.sec-head{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec-sub{color:var(--mute);font-size:clamp(17px,1.4vw,20px);max-width:34em;margin-top:22px}

/* Появление строк: каждое слово выезжает из-под маски */
.reveal .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.reveal .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.reveal.in .w>span{transform:none}

/* 1. Первый экран */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut) 96px;overflow:hidden}
.hero-orb{position:fixed;top:calc(50vh - min(27vw,380px));right:-2vw;width:min(54vw,760px);aspect-ratio:1;pointer-events:none;z-index:0;transform-origin:50% 50%;will-change:transform}
.hero-orb canvas{width:100%;height:100%}
.hero-orb::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(255,45,45,.42),rgba(255,45,45,0) 68%);filter:blur(40px);z-index:-1}
.orb-fallback{display:none;position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#ff2d2d 38%,#8a0b0b 80%)}
.no-webgl .orb-fallback{display:block}
.hero-in{position:relative;z-index:2;max-width:var(--max);width:100%;margin:0 auto}
.eyebrow{font:500 13px/1 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:28px;opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease) .2s,transform 1s var(--ease) .2s}
.hero-title{font:500 clamp(54px,min(9vw,15vh),150px)/.92 var(--f-d);letter-spacing:var(--ls,-.05em)}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.hero-title .line:nth-child(2)>span{transition-delay:.12s}
.hero-title .line:nth-child(3)>span{transition-delay:.24s}
.hero-title em{font-size:1.1em;letter-spacing:-.01em;color:#fff}
.hero-sub{max-width:31em;font-size:clamp(17px,1.5vw,21px);color:#bdbdbd;margin-top:34px;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .55s,transform 1s var(--ease) .55s}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .7s,transform 1s var(--ease) .7s}
body.is-done .eyebrow,body.is-done .hero-sub,body.is-done .hero-cta{opacity:1;transform:none}
body.is-done .hero-title .line>span{transform:none}
.hero-meta{position:absolute;left:var(--gut);right:var(--gut);bottom:28px;z-index:2;display:flex;justify-content:space-between;gap:20px;font:500 11px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.rec-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px;animation:pulse 1.4s ease-in-out infinite}
.meta-scroll{display:flex;align-items:center;gap:10px}
.meta-scroll::after{content:"";width:1px;height:28px;background:linear-gradient(var(--paper),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 2. Бегущая строка */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:clamp(18px,2.6vw,34px) 0}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);font:500 clamp(42px,6.6vw,108px)/1 var(--f-d);letter-spacing:-.04em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(242,240,235,.55)}
.marquee-track span:nth-child(odd){color:var(--paper);-webkit-text-stroke:0}
.marquee-track span::after{content:"";width:.16em;height:.16em;border-radius:50%;background:var(--red)}

/* 3. Манифест */
.manifesto{max-width:var(--max);margin:0 auto;padding:clamp(100px,16vw,220px) var(--gut)}
.manifesto-text{font:500 clamp(30px,4.6vw,72px)/1.12 var(--f-d);letter-spacing:-.03em;margin-top:34px;max-width:17em}
.manifesto-text .mw{opacity:.14;transition:opacity .5s}
.manifesto-text .mw.lit{opacity:1}
.manifesto-text em .mw,.manifesto-text .mw em{color:var(--red)}

/* 4. Видео-окно */
.window{height:220vh}
.window-sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.window-frame{position:relative;width:100%;height:100%;overflow:hidden;clip-path:inset(var(--wy,30%) var(--wx,30%) round var(--wr,28px));will-change:clip-path}
.window-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--ws,1.25));will-change:transform}
.window-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.15) 40%,rgba(10,10,10,.75))}
.window-text{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(40px,9vh,110px);max-width:var(--max);margin:0 auto;font:500 clamp(30px,4.8vw,80px)/1.02 var(--f-d);letter-spacing:-.035em;opacity:var(--wt,0);transform:translateY(calc((1 - var(--wt,0)) * 40px));max-width:15em}
.window-hud{position:absolute;top:96px;left:var(--gut);right:var(--gut);display:flex;gap:26px;justify-content:flex-end;font:500 11px/1 var(--f-d);letter-spacing:.2em;color:rgba(255,255,255,.7);opacity:var(--wt,0)}

/* 5. Работы */
.work{padding-top:clamp(100px,14vw,180px)}
.work-head{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.work-track{height:340vh}
.work-sticky{position:sticky;top:0;height:100vh;max-width:var(--max);margin:0 auto;padding:90px var(--gut) 40px;display:grid;grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:clamp(30px,5vw,80px);align-items:center}
.work-list{position:relative;height:340px}
.work-item{position:absolute;inset:0;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.work-item.on{opacity:1;transform:none;pointer-events:auto}
.work-num{font:500 13px/1 var(--f-d);letter-spacing:.2em;color:var(--red)}
.work-kind{font:500 13px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:22px}
.work-item h3{font:500 clamp(36px,4.2vw,64px)/1 var(--f-d);letter-spacing:-.035em;margin-top:16px}
.work-desc{color:#bdbdbd;margin-top:20px;max-width:24em}
.link{display:inline-flex;gap:8px;margin-top:26px;font:600 15px/1 var(--f-d);border-bottom:1px solid var(--red);padding-bottom:6px}
.work-stage{position:relative;height:min(64vh,620px)}
.laptop{position:absolute;left:0;right:10%;top:50%;transform:translateY(-50%) perspective(1600px) rotateY(calc(var(--wp,0) * -6deg + 3deg)) rotateX(4deg)}
.laptop-screen{background:#050505;border-radius:14px 14px 0 0;padding:10px 10px 0;box-shadow:0 0 0 1px #2a2a2a,0 40px 90px -20px rgba(0,0,0,.9),0 0 120px -40px rgba(255,45,45,.35)}
.laptop-bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;background:#161616;border-radius:7px 7px 0 0}
.laptop-bar i{width:8px;height:8px;border-radius:50%;background:#333}
.laptop-url{margin:0 auto;font:500 11px/1 var(--f-d);color:#8a8a8a;letter-spacing:.06em;transform:translateX(-14px)}
.laptop-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.shot{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .8s var(--ease);transform:translateY(var(--sy,0%));will-change:transform}
.shot.on{opacity:1}
.laptop-base{height:16px;margin:0 -6%;background:linear-gradient(#2b2b2b,#141414);border-radius:0 0 18px 18px;box-shadow:0 20px 40px -10px #000}
.phone{position:absolute;right:0;bottom:0;width:min(25%,210px);aspect-ratio:9/19.5;border-radius:34px;background:#050505;padding:8px;box-shadow:0 0 0 1px #2d2d2d,0 30px 70px -10px rgba(0,0,0,.95);transform:translateY(calc(var(--wp,0) * -30px)) rotate(-3deg)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#000}
.pshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .8s var(--ease)}
.pshot.on{opacity:1}
.phone-notch{position:absolute;top:14px;left:50%;width:30%;height:16px;border-radius:12px;background:#050505;transform:translateX(-50%)}
.laptop,.phone{transition:opacity .8s var(--ease),right .9s var(--ease),width .9s var(--ease),filter .8s}
.work-stage.reel .laptop{opacity:.35;filter:blur(3px)}
.work-stage.reel .phone{right:38%;width:min(30%,250px)}
.work-progress{position:absolute;left:var(--gut);right:var(--gut);bottom:30px;height:1px;background:var(--line)}
.work-progress i{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(var(--wb,0));transform-origin:left}

/* 6. Услуги */
.services{padding:clamp(100px,14vw,180px) 0}
.srv-list{list-style:none;max-width:var(--max);margin:60px auto 0;padding:0 var(--gut)}
.srv{border-top:1px solid var(--line);cursor:pointer}
.srv:last-child{border-bottom:1px solid var(--line)}
.srv-row{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:20px;padding:clamp(22px,3vw,40px) 0;transition:padding .6s var(--ease)}
.srv-n{font:500 13px/1 var(--f-d);letter-spacing:.2em;color:var(--mute)}
.srv-name{font:500 clamp(34px,5.4vw,88px)/1 var(--f-d);letter-spacing:var(--ls,-.04em);transition:transform .6s var(--ease),color .4s}
.srv-plus{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:300 22px/1 var(--f-d);transition:transform .5s var(--ease),background .4s,border-color .4s}
.srv:hover .srv-name{transform:translateX(18px)}
.srv.open .srv-plus{transform:rotate(45deg);background:var(--red);border-color:var(--red)}
.srv-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.srv.open .srv-body{grid-template-rows:1fr}
.srv-body>div{overflow:hidden}
.srv-inner{display:grid;grid-template-columns:70px 1.2fr 1fr;gap:20px;padding-bottom:40px}
.srv-inner p{font-size:clamp(17px,1.4vw,20px);color:#cfcfcf;max-width:28em}
.srv-inner ul{list-style:none;display:grid;gap:10px}
.srv-inner li{display:flex;gap:12px;align-items:center;color:var(--mute)}
.srv-inner li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.srv-thumb{display:none}
.srv-preview{position:fixed;left:0;top:0;z-index:40;width:min(26vw,360px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(40px,-50%) scale(.6) rotate(-6deg);transition:opacity .4s var(--ease),transform .6s var(--ease);box-shadow:0 30px 80px -20px #000}
.srv-preview.on{opacity:1;transform:translate(40px,-50%) scale(1) rotate(-3deg)}
.srv-preview>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.srv-preview>.on{opacity:1}

/* 7. Было / стало */
.ba{padding:clamp(80px,10vw,140px) 0;background:var(--paper);color:var(--ink)}
.ba .tag{color:var(--mute2)}
.ba .sec-sub{color:var(--mute2)}
.ba-tabs{max-width:var(--max);margin:40px auto 0;padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:8px}
.ba-tabs button{font:600 14px/1 var(--f-d);padding:12px 18px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:background .3s,color .3s,box-shadow .3s}
.ba-tabs button.on{background:var(--ink);color:var(--paper);box-shadow:none}
.ba-stage{position:relative;max-width:var(--max);margin:28px auto 0;padding:0 var(--gut);height:clamp(380px,46vw,580px);user-select:none;touch-action:pan-y}
.ba-card{position:absolute;inset:0 var(--gut);border-radius:24px;overflow:hidden}
.ba-before{background:#fff;color:#222;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,90px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ba-before small,.ba-after small{font:700 12px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase}
.ba-before small{color:#9a9a9a}
.ba-before{padding-right:54%!important}
.ba-before p{font:400 clamp(20px,2.2vw,32px)/1.28 Arial,Helvetica,sans-serif;margin-top:18px;color:#333}
.ba-before .fake-btn{margin-top:26px;align-self:flex-start;background:#3b82f6;color:#fff;font:700 15px/1 Arial,sans-serif;padding:14px 20px;border-radius:4px}
.ba-after{clip-path:inset(0 0 0 var(--bx,50%));color:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,90px)}
.ba-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.04)}
.ba-after::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.82),rgba(10,10,10,.35) 70%,rgba(10,10,10,.2));z-index:0}
.ba-after>*:not(img){position:relative;z-index:1}
.ba-after small{color:rgba(255,255,255,.7);display:flex;align-items:center;gap:10px}
.ba-after small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.ba-after{padding-left:54%!important}
.ba-after h3{font:500 clamp(30px,3.6vw,60px)/1.02 var(--f-d);letter-spacing:-.04em;margin-top:16px}
.ba-after p{margin-top:16px;color:rgba(255,255,255,.75);font-size:clamp(15px,1.3vw,18px)}
.ba-handle{position:absolute;top:0;bottom:0;left:calc(var(--gut) + (100% - var(--gut) * 2) * var(--bxn,.5));width:2px;margin-left:-1px;background:#fff;z-index:3;cursor:ew-resize}
.ba-handle span{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.ba-handle:hover span,.ba-handle.drag span{transform:scale(1.12)}
.ba-handle:focus-visible{outline:none}.ba-handle:focus-visible span{box-shadow:0 0 0 4px rgba(255,45,45,.35)}

/* 8. Как работаем */
.process{padding:clamp(100px,14vw,180px) 0}
.steps{position:relative;max-width:var(--max);margin:70px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.steps-line{position:absolute;left:var(--gut);right:var(--gut);top:9px;height:1px;background:var(--line)}
.steps-line i{display:block;height:100%;background:var(--red);transform:scaleX(var(--sp,0));transform-origin:left}
.step{position:relative;padding-top:48px}
.step::before{content:"";position:absolute;top:3px;left:0;width:13px;height:13px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:background .5s,box-shadow .5s}
.step.lit::before{background:var(--red);box-shadow:0 0 0 6px rgba(255,45,45,.16)}
.step b{font:500 13px/1 var(--f-d);letter-spacing:.2em;color:var(--mute)}
.step h3{font:500 clamp(30px,3vw,46px)/1 var(--f-d);letter-spacing:-.03em;margin-top:16px}
.step p{color:var(--mute);margin-top:14px;max-width:20em}

/* 9. Цены */
.prices{padding:clamp(60px,8vw,120px) 0 clamp(100px,14vw,180px)}
.plans{max-width:var(--max);margin:60px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.plan{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:30px 26px 26px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .6s var(--ease),box-shadow .4s;transform-style:preserve-3d}
.plan:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.plan.best{background:var(--paper);color:var(--ink)}
.plan-badge{position:absolute;top:-11px;right:22px;font:600 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red);padding:7px 10px;border-radius:99px}
.plan-name{font:500 15px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.plan.best .plan-name{color:var(--mute2)}
.plan-lead{font:600 13px/1 var(--f-d);color:var(--red);margin-top:26px;min-height:13px}
.plan-price{font:500 clamp(44px,4.4vw,66px)/1 var(--f-d);letter-spacing:-.045em;margin-top:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan-price small{font:500 15px/1 var(--f-d);letter-spacing:0;margin-left:6px;color:var(--mute)}
.plan-price .from{font-size:.36em;letter-spacing:0;margin-right:6px;color:var(--mute);vertical-align:.9em}
.plan-days{font:500 13px/1 var(--f-d);color:var(--mute);margin-top:12px}
.plan ul{list-style:none;margin:26px 0 30px;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:22px}
.plan.best ul{border-color:rgba(0,0,0,.12)}
.plan li{display:flex;gap:10px;font-size:15px}
.plan li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--red)}
.plan .btn{margin-top:auto;justify-content:center;padding:16px 20px;font-size:15px}
.plan:not(.best) .btn{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.plan:not(.best) .btn::before{background:var(--paper)}
.plan:not(.best) .btn:hover{color:var(--ink)}
.plan.best .btn{background:var(--ink);color:var(--paper)}
.plan.best .btn::before{background:var(--red)}
.plans-note{max-width:var(--max);margin:30px auto 0;padding:0 var(--gut);color:var(--mute)}

/* 10. Бриф-хлопушка */
.brief{padding:clamp(100px,14vw,180px) 0;background:var(--ink2);border-top:1px solid var(--line)}
.brief-grid{max-width:var(--max);margin:60px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.brief-form{display:grid;gap:34px}
fieldset{border:0}
legend{font:500 13px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 15px/1 var(--f-d);padding:14px 18px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.chip.on{background:var(--paper);color:var(--ink);box-shadow:none}
.chip:active{transform:scale(.96)}
.brief-form input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);padding:12px 0;font:500 clamp(22px,2.2vw,30px)/1.2 var(--f-d);color:var(--paper);outline:none;border-radius:0;transition:border-color .3s}
.brief-form input:focus{border-color:var(--red)}
.brief-form input::placeholder{color:#555}
.slate-wrap{position:sticky;top:110px}
.slate{position:relative;border-radius:16px;background:#0d0d0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px #000;padding-top:58px;perspective:900px}
.slate-top{position:absolute;left:0;right:0;top:0;height:50px;transform-origin:10px 50px;transform:rotate(-14deg);transition:transform .25s cubic-bezier(.6,0,.9,.4)}
.slate.clap .slate-top{transform:rotate(0deg)}
.slate.reopen .slate-top{transition:transform .8s var(--ease)}
.slate-stripes{height:100%;border-radius:12px 12px 4px 4px;background:repeating-linear-gradient(-55deg,#f2f0eb 0 26px,#0d0d0d 26px 52px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.slate-body{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #f2f0eb}
.slate-row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.14)}
.slate-row img{height:20px;width:auto}
.slate-no{font:600 13px/1 var(--f-d);letter-spacing:.14em;color:var(--red);font-variant-numeric:tabular-nums}
.slate-cell{padding:14px 20px 16px;border-bottom:1px solid rgba(255,255,255,.14);min-width:0}
.slate-cell:nth-child(odd):not(.wide){border-left:1px solid rgba(255,255,255,.14)}
.slate-cell.wide{grid-column:1/-1}
.slate-cell small{display:block;font:600 10px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.slate-cell b{display:block;font:500 clamp(18px,1.7vw,24px)/1.2 var(--f-d);letter-spacing:-.01em;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slate-cell b.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.slate-price{border-bottom:0}
.slate-price b{font-size:clamp(28px,2.6vw,38px);font-variant-numeric:tabular-nums}
#slateSend{width:100%;justify-content:center;margin-top:16px}
.slate-hint{font-size:13px;color:var(--mute);margin-top:12px;text-align:center}

/* 11. Вопросы */
.faq{padding:clamp(100px,14vw,180px) 0}
.faq-list{max-width:var(--max);margin:50px auto 0;padding:0 var(--gut)}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:28px 0;font:500 clamp(20px,2vw,30px)/1.2 var(--f-d);letter-spacing:-.02em}
.q button i{flex:none;font-style:normal;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:300;transition:transform .5s var(--ease),background .4s,border-color .4s}
.q.open button i{transform:rotate(45deg);background:var(--red);border-color:var(--red)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{color:#bdbdbd;padding-bottom:28px;max-width:40em;font-size:clamp(16px,1.3vw,19px)}

/* 12. Финал */
.final{min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:120px var(--gut)}
.final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.final-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,10,10,.55),rgba(10,10,10,.92) 75%)}
.final-in{position:relative;z-index:1;text-align:center;max-width:1100px}
.final-title{font:500 clamp(72px,17vw,280px)/.86 var(--f-d);letter-spacing:var(--ls,-.06em);display:inline-flex;align-items:baseline}
.final-dot{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:var(--red);margin-left:.12em;box-shadow:0 0 60px 10px rgba(255,45,45,.4);animation:pulse 2s ease-in-out infinite}
.final-sub{font-size:clamp(17px,1.6vw,22px);color:#cfcfcf;max-width:30em;margin:30px auto 0}
.final-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* Подвал */
.foot{border-top:1px solid var(--line);padding:30px var(--gut) 34px;color:var(--mute);font-size:14px}
.foot-row{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.foot-row img{height:20px;width:auto;margin-right:auto}
.foot-credits{max-width:var(--max);margin:18px auto 0;font-size:12px;color:var(--mute2)}

/* Планшет */
@media (max-width:1100px){
  .nav{display:none}
  .plans{grid-template-columns:1fr 1fr}
  .work-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding-top:80px;gap:20px;align-content:center}
  .work-list{height:230px}
  .work-stage{height:min(48vh,460px)}
  .brief-grid{grid-template-columns:1fr}
  .slate-wrap{position:relative;top:0;margin-top:50px}
}

/* Телефон */
@media (max-width:700px){
  body{font-size:16px}
  .top{padding-top:14px;padding-bottom:14px}
  .logo img{height:21px}
  .top .btn-sm{display:none}
  .hero{justify-content:flex-end;padding-top:100px;padding-bottom:110px}
  .hero-orb{top:9svh;right:-28vw;width:112vw}
  .hero-title{font-size:clamp(46px,14vw,68px)}
  .hero-sub{margin-top:22px}
  .hero-cta{margin-top:28px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero-meta{bottom:22px}
  .meta-geo,.meta-scroll{display:none}
  .window{height:180vh}
  .window-hud{top:84px;gap:16px;font-size:10px}
  .work-track{height:300vh}
  .work-list{height:270px}
  .work-item h3{font-size:34px}
  .work-desc{font-size:15px;margin-top:12px}
  .work-kind{margin-top:14px}
  .link{margin-top:16px}
  .work-stage{height:44vh}
  .laptop{right:16%}
  .phone{width:34%;border-radius:24px;padding:5px}
  .phone-screen{border-radius:20px}
  .phone-notch{top:9px;height:11px}
  .srv-row{grid-template-columns:34px 1fr auto;gap:12px}
  .srv:hover .srv-name{transform:none}
  .srv-plus{width:36px;height:36px}
  .srv-inner{grid-template-columns:1fr;gap:18px;padding-left:46px}
  .srv-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
  .srv-preview{display:none}
  .ba-stage{height:560px}
  .ba-handle{touch-action:none}
  .ba-handle span{width:64px;height:64px;margin:-32px 0 0 -32px}
  .ba-before{justify-content:flex-start;padding:26px!important}
  .ba-after{padding:26px!important;justify-content:flex-end;clip-path:inset(var(--bx,50%) 0 0 0)}
  .ba-after::after{background:linear-gradient(180deg,rgba(10,10,10,.2),rgba(10,10,10,.85))}
  .ba-handle{left:var(--gut);right:var(--gut);width:auto;height:2px;margin:-1px 0 0;top:calc(var(--bxn,.5) * 100%);bottom:auto;cursor:ns-resize}
  .ba-handle span{left:50%;transform:rotate(90deg)}
  .ba-handle:hover span,.ba-handle.drag span{transform:rotate(90deg) scale(1.12)}
  .ba-before .fake-btn{font-size:13px}
  .steps{grid-template-columns:1fr;gap:0}
  .steps-line{left:calc(var(--gut) + 6px);right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps-line i{width:100%;height:100%;transform:scaleY(var(--sp,0));transform-origin:top}
  .step{padding:0 0 44px 40px}
  .step::before{top:2px}
  .step h3{margin-top:10px}
  .plans{grid-template-columns:1fr}
  .slate-cell{padding:12px 14px 14px}
  .slate-row{padding:14px}
  .final-cta .btn{flex:1 1 100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .grain{display:none}
}

/* Варианты шрифта (сравнение: ?fonts, выбор: ?font=2) */
.fontbar{position:fixed;left:16px;bottom:16px;z-index:99;display:flex;gap:6px;align-items:center;background:rgba(20,20,20,.9);backdrop-filter:blur(10px);padding:8px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);font:600 12px/1 Manrope,sans-serif}
.fontbar span{color:var(--mute);padding:0 6px}
.fontbar button{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.fontbar button.on{background:var(--red);box-shadow:none}
[data-font="2"]{--f-d:"Playfair Display",Georgia,serif;--f-s:"Playfair Display",Georgia,serif;--ls:-.025em}
[data-font="2"] em{font-weight:400}
[data-font="3"]{--f-d:Unbounded,system-ui,sans-serif;--f-s:Unbounded,system-ui,sans-serif;--ls:-.035em}
[data-font="3"] em{font-style:normal;font-weight:300}
[data-font="3"] .hero-title{font-size:clamp(38px,min(6.4vw,11vh),108px)}
[data-font="3"] .h2{font-size:clamp(30px,4.6vw,76px)}
[data-font="4"]{--f-d:Montserrat,system-ui,sans-serif;--f-s:"Playfair Display",Georgia,serif;--ls:-.045em}
[data-font="4"] .hero-title,[data-font="4"] .h2,[data-font="4"] .final-title{font-weight:700}
[data-font="4"] .hero-title{font-size:clamp(44px,min(7.6vw,13vh),128px)}
[data-font="4"] em{font-weight:500}
[data-font="3"] .final-title{font-size:clamp(46px,11vw,180px);white-space:nowrap}
[data-font="3"] .plan-price{font-size:clamp(34px,3.2vw,50px)}
[data-font="3"] .work-item h3{font-size:clamp(28px,3.2vw,48px)}


/* ===== Мелкий текст — Manrope, Unbounded только в заголовках ===== */
.loader-tc,.nav,.lang button,.btn,.tag,.eyebrow,.hero-meta,.laptop-url,.work-num,.work-kind,.link,.srv-n,.srv-plus,
.ba-tabs button,.ba-before small,.ba-after small,.plan-badge,.plan-name,.plan-lead,.plan-price small,.plan-days,
legend,.chip,.slate-no,.slate-cell small,.q button,.step b,.foot,.reel-pill{font-family:var(--f-b)!important}
.btn{font-weight:700;letter-spacing:0}
.nav{font-weight:600}
.q button{font-weight:600;letter-spacing:-.01em}
.eyebrow,.tag,.hero-meta,.work-kind,.plan-name,legend,.slate-cell small{font-weight:700}

/* ===== Кнопка «Шоурил» ===== */
.reel-pill{display:inline-flex;align-items:center;gap:14px;padding:6px 22px 6px 6px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);text-align:left;transition:box-shadow .4s,background .4s}
.reel-pill:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.reel-thumb{position:relative;width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:#111}
.reel-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.85);transform:scale(1.1);transition:transform .6s var(--ease)}
.reel-pill:hover .reel-thumb video{transform:scale(1.35)}
.reel-play{position:absolute;inset:0;display:grid;place-items:center}
.reel-play::before{content:"";width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.reel-thumb::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--red);opacity:0;transition:opacity .4s}
.reel-pill:hover .reel-thumb::after{opacity:1}
.reel-txt b{display:block;font-size:16px;font-weight:700;line-height:1.1}
.reel-txt small{display:block;font-size:12px;color:var(--mute);margin-top:3px;letter-spacing:.04em}
button.link{background:none;cursor:pointer;color:inherit;margin-left:0}
.work-item .link+.link{margin-left:22px}

/* ===== Окно шоурила ===== */
.reel-modal{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:auto minmax(0,340px);align-items:center;justify-content:center;gap:clamp(30px,5vw,80px);padding:clamp(16px,4vh,48px) var(--gut);visibility:hidden;pointer-events:none}
.reel-modal.on{visibility:visible;pointer-events:auto}
.reel-modal-bg{position:absolute;inset:0;background:rgba(6,6,6,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transition:opacity .5s var(--ease)}
.reel-modal.on .reel-modal-bg{opacity:1}
.reel-modal-in{position:relative;height:min(86vh,860px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #2a2a2a,0 40px 120px -20px #000,0 0 160px -40px rgba(255,45,45,.45);transform:translateY(40px) scale(.94);opacity:0;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.reel-modal.on .reel-modal-in{transform:none;opacity:1}
.reel-modal-in video{width:100%;height:100%;object-fit:cover;display:block}
.reel-modal-side{position:relative;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
.reel-modal.on .reel-modal-side{opacity:1;transform:none}
.reel-modal-title{font:500 clamp(24px,2.2vw,34px)/1.15 var(--f-d);letter-spacing:-.03em;margin:18px 0 28px}
.reel-close{position:absolute;top:18px;right:18px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.08);font:300 30px/1 var(--f-b);color:#fff;transition:background .3s,transform .4s var(--ease)}
.reel-close:hover{background:var(--red);transform:rotate(90deg)}
body.modal-open{overflow:hidden}

/* ===== Три телефона в витрине рилсов ===== */
.phone-side{opacity:0;pointer-events:none;width:min(21%,180px)!important;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.phone-side.l{right:63%!important;bottom:6%;transform:translateX(60px) rotate(-9deg)}
.phone-side.r{right:13%!important;bottom:6%;transform:translateX(-60px) rotate(9deg)}
.work-stage.reel .phone-side{opacity:1}
.work-stage.reel .phone-side.l{transform:translateX(0) rotate(-9deg)}
.work-stage.reel .phone-side.r{transform:translateX(0) rotate(9deg)}
.work-stage.reel .phone:not(.phone-side){z-index:2;right:37%;width:min(27%,230px);transform:rotate(0)}
.work-stage.reel .laptop{opacity:.18!important;filter:blur(8px)}

/* ===== Подвал ===== */
.foot{padding:clamp(70px,9vw,120px) var(--gut) 28px;color:var(--mute);font-size:15px;overflow:hidden}
.foot-top{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-col small{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2);margin-bottom:8px}
.foot-col a{color:#cfcfcf;transition:color .3s}
.foot-col a:hover{color:#fff}
.foot-big{font:500 clamp(30px,3.4vw,52px)/1.05 var(--f-d)!important;letter-spacing:-.03em;color:var(--paper)!important;border-bottom:2px solid var(--red);padding-bottom:6px}
.foot-mark{position:relative;max-width:var(--max);margin:clamp(60px,8vw,110px) auto 0;aspect-ratio:2040/520;clip-path:inset(-60% -12% 0 -12%)}
.foot-mark img{width:100%;height:auto;transform:translateY(calc((1 - var(--fk,0)) * 60%));opacity:calc(.25 + var(--fk,0) * .75);will-change:transform}
.foot-dot{position:absolute;left:93.26%;top:1.97%;width:5.88%;aspect-ratio:1;border-radius:50%;background:var(--red);transform:translateY(calc((1 - var(--fk,0)) * 240%));box-shadow:0 0 calc(var(--fk,0) * 80px) calc(var(--fk,0) * 14px) rgba(255,45,45,.5);animation:pulse 2.4s ease-in-out infinite}
.foot-row{max-width:var(--max);margin:28px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;border-top:1px solid var(--line);padding-top:22px;font-size:13px}
.foot-up{color:var(--mute);transition:color .3s}.foot-up:hover{color:#fff}
.foot-credits{max-width:var(--max);margin:14px auto 0;font-size:11px;color:#4a4a4a}

@media (max-width:1100px){
  .reel-modal{grid-template-columns:1fr;justify-items:center;align-content:center;gap:20px}
  .reel-modal-side{text-align:center;max-width:420px}
  .reel-modal-side .tag,.reel-modal-side .btn{display:none}
  .reel-modal-title{margin:0;font-size:18px}
  .reel-modal-in{height:min(74vh,720px)}
}
@media (max-width:700px){
  .hero-cta .reel-pill{flex:1 1 100%;justify-content:flex-start}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-col:first-child{grid-column:1/-1;margin-bottom:10px}
  .phone-side{width:26%!important;border-radius:20px!important;padding:4px!important}
  .phone-side.l{right:66%!important}
  .phone-side.r{right:4%!important}
  .work-stage.reel .phone:not(.phone-side){right:33%;width:34%}
  .reel-modal-in{border-radius:18px}
}
.srv-preview>img.on{animation:kb 7s cubic-bezier(.22,1,.36,1) forwards}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}


/* ===== Было / стало: два настоящих сайта в окне браузера ===== */
.ba-browser{max-width:calc(var(--max) - var(--gut) * 2);margin:28px auto 0;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 40px 90px -30px rgba(0,0,0,.45);width:calc(100% - var(--gut) * 2)}
.ba-bar{position:relative;display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:#1b1b1b}
.ba-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3a}
.ba-bar i:nth-child(1){background:#ff5f57}.ba-bar i:nth-child(2){background:#febc2e}.ba-bar i:nth-child(3){background:#28c840}
.ba-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;min-width:min(46%,360px);justify-content:center;height:26px;padding:0 14px;border-radius:8px;background:#262626;color:#a8a8a8;font:500 12px/1 var(--f-b)}
.ba-lock{width:8px;height:9px;border-radius:2px;background:#7a7a7a;position:relative}
.ba-lock::before{content:"";position:absolute;left:1px;top:-4px;width:6px;height:6px;border:1.5px solid #7a7a7a;border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.ba-stage.ba2{margin:0;padding:0;height:auto;aspect-ratio:16/9;max-width:none}
.ba2 .ba-card{inset:0;border-radius:0;padding:0!important;box-shadow:none;background:#000}
.ba2 .ba-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transform:none}
.ba2 .ba-after::after{display:none}
.ba2 .ba-handle{left:calc(var(--bxn,.5) * 100%)}
.ba-chip{position:absolute;top:16px;left:16px;z-index:2;font:700 12px/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:99px;background:rgba(20,20,20,.78);color:#fff;backdrop-filter:blur(8px)}
.ba-chip-a{left:auto;right:16px;background:var(--red)}
.ba-note{max-width:var(--max);margin:14px auto 0;padding:0 var(--gut);font-size:12px;color:var(--mute2)}
@media (max-width:700px){
  .ba-browser{border-radius:14px}
  .ba-bar{height:32px}.ba-bar i{width:9px;height:9px}
  .ba-url{font-size:11px;height:22px;min-width:56%}
  .ba-stage.ba2{aspect-ratio:16/9;height:auto}
  .ba2 .ba-handle span{width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important;font-size:16px}
  .ba2 .ba-after{clip-path:inset(0 0 0 var(--bx,50%));padding:0!important}
  .ba2 .ba-handle{top:0;bottom:0;left:calc(var(--bxn,.5) * 100%);right:auto;width:2px;height:auto;margin:0 0 0 -1px;cursor:ew-resize}
  .ba2 .ba-handle span{transform:none}
  .ba2 .ba-handle:hover span,.ba2 .ba-handle.drag span{transform:scale(1.12)}
  .ba-chip{top:10px;left:10px;font-size:10px;padding:7px 9px}.ba-chip-a{left:auto;right:10px}
}
.ba2 .ba-chip{position:absolute;top:16px;left:16px;right:auto}
.ba2 .ba-chip.ba-chip-a{left:auto;right:16px}
@media (max-width:700px){.ba2 .ba-chip{top:10px;left:10px}.ba2 .ba-chip.ba-chip-a{left:auto;right:10px}}


/* ===== Для кого ===== */
.niches{padding:0 0 clamp(100px,12vw,160px)}
.niche-grid{max-width:var(--max);margin:56px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.niche{border-radius:22px;overflow:hidden;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .6s var(--ease),box-shadow .4s;display:flex;flex-direction:column}
.niche:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.niche-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.niche-img img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform 1.2s var(--ease)}
.niche:hover .niche-img img{transform:scale(1.06)}
.niche-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(17,17,17,.9))}
.niche-n{position:absolute;left:18px;top:16px;z-index:1;font:700 12px/1 var(--f-b);letter-spacing:.18em;color:#fff;background:rgba(10,10,10,.6);padding:8px 10px;border-radius:99px;backdrop-filter:blur(6px)}
.niche-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.niche-body h3{font:500 clamp(24px,2.2vw,32px)/1.05 var(--f-d);letter-spacing:-.03em}
.niche-body p{color:#bdbdbd;margin-top:12px;font-size:16px}
.niche-body ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.niche-body li{font:600 12px/1 var(--f-b);padding:8px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:#cfcfcf}
.niche-body .link{margin-top:auto;padding-top:18px;align-self:flex-start;border-bottom:0;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}

/* ===== Бесплатное демо ===== */
.demo-offer{padding:clamp(80px,10vw,140px) var(--gut) 0}
.demo-card{position:relative;max-width:var(--max);margin:0 auto;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(34px,5vw,70px);background:radial-gradient(120% 90% at 100% 0%,rgba(255,45,45,.22),transparent 55%),linear-gradient(160deg,#151515,#0c0c0c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.demo-title{margin-top:18px;font-size:clamp(34px,4.4vw,70px)!important}
.demo-sub{color:#c4c4c4;font-size:clamp(16px,1.3vw,19px);margin-top:20px;max-width:30em}
.demo-form{display:flex;gap:10px;margin-top:30px;max-width:560px}
.demo-form input{flex:1;min-width:0;height:60px;border-radius:99px;border:0;padding:0 24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font:500 16px/1 var(--f-b);outline:none;transition:box-shadow .3s}
.demo-form input:focus{box-shadow:inset 0 0 0 1px var(--red)}
.demo-form input.err{box-shadow:inset 0 0 0 2px var(--red);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.demo-form input::placeholder{color:#6d6d6d}
.demo-form .btn{height:60px;padding:0 26px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.demo-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;font:600 14px/1.3 var(--f-b);color:#bdbdbd}
.demo-steps li{display:flex;gap:10px;align-items:center}
.demo-steps b{color:var(--red);font-size:12px;letter-spacing:.14em}
.demo-stack{position:relative;aspect-ratio:4/3.3;perspective:1400px;transform-style:preserve-3d}
.ds{position:absolute;width:86%;border-radius:12px;overflow:hidden;background:#161616;box-shadow:0 0 0 1px #2c2c2c,0 30px 70px -20px #000;transition:transform .9s var(--ease)}
.ds i{display:block;height:20px;background:#1e1e1e;position:relative}
.ds i::before{content:"";position:absolute;left:10px;top:7px;width:6px;height:6px;border-radius:50%;background:#ff5f57;box-shadow:10px 0 #febc2e,20px 0 #28c840}
.ds img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:left top}
.ds1{left:0;bottom:0;z-index:3;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(40px)}
.ds2{left:7%;bottom:16%;z-index:2;opacity:.85;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0) rotate(-3deg)}
.ds3{left:14%;bottom:32%;z-index:1;opacity:.6;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(-40px) rotate(-6deg)}
.demo-card:hover .ds2{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(-10px,-8px) rotate(-5deg)}
.demo-card:hover .ds3{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(-20px,-16px) rotate(-9deg)}
.ds-badge{position:absolute;right:14px;bottom:14px;font:700 12px/1 var(--f-b);letter-spacing:.06em;color:#fff;background:var(--red);padding:9px 12px;border-radius:99px;box-shadow:0 8px 24px rgba(255,45,45,.4);display:flex;gap:7px;align-items:center}
.ds-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}

@media (max-width:1100px){
  .niche-grid{grid-template-columns:1fr 1fr}
  .demo-card{grid-template-columns:1fr}
  .demo-stack{max-width:560px;width:100%;margin:10px auto 0}
}
@media (max-width:700px){
  .niche-grid{grid-template-columns:1fr}
  .demo-offer{padding-left:12px;padding-right:12px}
  .demo-card{padding:30px 20px;border-radius:24px}
  .demo-form{flex-direction:column}
  .demo-form .btn{justify-content:center}
  .demo-steps{flex-direction:column;gap:10px}
}

/* Режим снимка обложки для превью ссылки (?og) */
.og .hero-sub,.og .hero-cta,.og .hero-meta,.og .nav,.og .top-right,.og .grain,.og .cursor,.og .loader{display:none!important}
.og .hero{padding-top:70px;padding-bottom:40px}
.og .hero-title{font-size:92px}
.og .top{padding-top:34px}
.og .logo img{height:30px}
.niche:nth-child(3) .niche-img img{object-position:center 40%}

/* Бегущая строка без контурных букв (решение Азата 05.11.2026) */
.marquee{padding:clamp(16px,2vw,26px) 0}
.marquee-track span{font-size:clamp(28px,4vw,64px);color:#6a6a6a!important;-webkit-text-stroke:0!important;letter-spacing:-.03em}
.marquee-track span:nth-child(odd){color:var(--paper)!important}


/* ===== Кнопка шоурила: круг с вращающимся текстом ===== */
.hero-cta{align-items:center}
.reel-badge{position:relative;width:144px;height:144px;border-radius:50%;flex:none;margin-left:6px;cursor:pointer;transition:transform .6s var(--ease)}
.reel-ring{position:absolute;inset:0;width:100%;height:100%;animation:ringSpin 16s linear infinite;overflow:visible}
.reel-ring text{font:700 13.5px/1 var(--f-b);letter-spacing:.22em;text-transform:uppercase;fill:#cfcfcf;transition:fill .4s}
.reel-core{position:absolute;inset:27%;border-radius:50%;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 12px 30px -8px rgba(0,0,0,.8);transition:transform .6s var(--ease),box-shadow .4s}
.reel-core video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);filter:brightness(.7) saturate(.9);transition:filter .5s,transform .8s var(--ease)}
.reel-core .reel-play{position:absolute;inset:0;display:grid;place-items:center}
.reel-core .reel-play::before{content:"";width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.reel-badge::after{content:"";position:absolute;inset:27%;border-radius:50%;box-shadow:0 0 0 0 rgba(255,45,45,.45);animation:reelPing 2.6s ease-out infinite;pointer-events:none}
.reel-badge:hover .reel-ring{animation-duration:6s}
.reel-badge:hover .reel-ring text{fill:var(--red)}
.reel-badge:hover .reel-core{transform:scale(1.1);box-shadow:0 0 0 2px var(--red),0 18px 40px -10px rgba(255,45,45,.5)}
.reel-badge:hover .reel-core video{filter:brightness(.95) saturate(1);transform:scale(1.4)}
.reel-badge:hover .reel-play::before{transform:scale(1.15)}
.reel-badge:active .reel-core{transform:scale(.96)}
.reel-badge:focus-visible{outline:none}.reel-badge:focus-visible .reel-core{box-shadow:0 0 0 3px var(--red)}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes reelPing{0%{box-shadow:0 0 0 0 rgba(255,45,45,.45)}70%,100%{box-shadow:0 0 0 22px rgba(255,45,45,0)}}
@media (max-width:700px){
  .hero-cta{flex-wrap:nowrap;gap:14px}
  .hero-cta .btn{flex:1 1 auto}
  .reel-badge{width:104px;height:104px;margin-left:0}
  .reel-ring text{font-size:14.5px}
}