/* APIQ — base system (home page) */
:root{--paper:#F5F3EE;--ink:#111118;--brand:#FBBF01;--live:#BB0FD8;--proof:#FC2A13;--muted:#6E6E78;--soft:#4A4A55;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;--gut:clamp(20px,4.4vw,64px);--nav:60px;color-scheme:light}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
b{font-weight:800}

/* ---------- type ---------- */
.h1,.h2,.h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.h1{font-size:clamp(31px,8.6vw,104px)}
.h2{font-size:clamp(30px,6vw,92px);line-height:1.08}
.h3{font-size:clamp(20px,2vw,28px);line-height:1.2;letter-spacing:-.02em}
.lead{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--soft);max-width:34em}
.kick{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.kick i{width:12px;height:12px;background:var(--brand);display:block;flex:none}
.kick.r i{background:var(--proof)} .kick.m i{background:var(--live)}
.ink{background:var(--ink);color:var(--paper)} .ink .lead{color:#B9B7C4}
.yel{background:var(--brand);color:var(--ink)} .yel .lead{color:#2E2E38}
.btn{display:inline-block;padding:18px 30px;background:var(--brand);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-weight:700;font-size:16px;text-decoration:none;color:var(--ink);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)} .btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.ink .btn{border-color:var(--paper);box-shadow:5px 5px 0 var(--paper)} .ink .btn:hover{box-shadow:3px 3px 0 var(--paper)}
.ul{font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px;white-space:nowrap}
.ul:hover{border-bottom-color:var(--proof)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--live);outline-offset:3px}
.btns{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:36px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- nav (no divider line) ---------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--nav);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut)}
.nav .logo img{height:16px;width:auto}
.nav nav{display:flex;gap:clamp(16px,2.2vw,32px);font-size:14px;font-weight:600;white-space:nowrap}
.nav nav a,.nav .side a{text-decoration:none}
.nav .side{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:600;white-space:nowrap}
.lang{display:flex;gap:2px;letter-spacing:.06em}
.lang button{font:inherit;font-size:13px;font-weight:700;background:none;border:0;border-bottom:2px solid transparent;padding:2px 4px;cursor:pointer;color:var(--muted)}
.lang button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.lang span{color:var(--muted);font-size:12px;padding:2px 4px;opacity:.6}
.nav .cta{padding:10px 18px;background:var(--brand);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:700}
.burger{display:none;width:40px;height:40px;border:2px solid var(--ink);background:var(--paper);padding:0;cursor:pointer}
.burger i{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto}
.loc{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);display:flex;align-items:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.loc b{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;min-width:11em;text-align:right}
.loc .tk{display:flex;gap:5px}.loc .tk i{width:8px;height:8px;background:rgba(17,17,24,.18);transition:background .25s,transform .25s}
.loc .tk i.on{background:var(--ink);transform:scale(1.35)}.loc .tk i.done{background:var(--ink)}
.nav nav{transition:opacity .3s}
.past .loc{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.past .nav nav{opacity:0;pointer-events:none}
@media(max-width:899px){.loc{display:none}}
@media(max-width:1100px){.nav nav,.nav .side .login,.nav .side .lang span{display:none}}
@media(max-width:1099px){.burger{display:block}.nav .side .cta{display:none}
  .nav.open{height:auto;align-items:flex-start;flex-wrap:wrap;padding-top:10px;padding-bottom:22px}
  .nav.open .logo{height:40px;display:flex;align-items:center}
  .nav.open nav{display:flex;order:5;flex-basis:100%;flex-direction:column;gap:16px;font-size:20px;font-weight:800;padding-top:10px}
  .nav.open .side .cta{display:inline-block}}

/* ---------- scrub engine ---------- */
.pin{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.k{--k:clamp(0,calc((var(--p,0) - var(--a,0)) / (var(--b,1) - var(--a,0))),1)}
/* masked line reveal: text rises out of its own baseline, never faded */
.ln{display:block;overflow:hidden;padding:.06em 0 .16em;margin:-.06em 0 -.16em}
.ln>span{display:block;transform:translateY(calc((1 - var(--t,1)) * 112%))}
.ln.k>span{transform:translateY(calc((1 - var(--k)) * 112%))}
.anim .rv:not(.ln){opacity:clamp(0,calc(var(--t,1) * 4),1);transform:translateY(calc((1 - var(--t,1)) * 36px))}
.anim .rv:not(.ln):not([style*="--t"]){opacity:0}
.anim .ln:not([style*="--t"])>span{transform:translateY(112%)}

/* ---------- hero ---------- */
.hero{height:240vh}
.hero .stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:2vw;padding:calc(var(--nav) + 2vh) var(--gut) 3vh}
.hero .h1{font-size:min(5.8vw,10vh)}
:lang(ru) .hero .h1{font-size:min(4.7vw,8.6vh)}
.hero .head{transform:translateY(calc(var(--p) * -9vh - clamp(0, (var(--p) - .66) / .3, 1) * 32vh));opacity:calc(1 - clamp(0, (var(--p) - .68) / .14, 1))}
.hero .art{opacity:calc(1 - clamp(0, (var(--p) - .76) / .12, 1))}
.hero .ln>span{white-space:nowrap}
.hero .h1 .ln:nth-child(2){padding-left:.6em}
.hero .h1 .ln:nth-child(3){padding-left:1.2em}
.hero .h1 .ln:nth-child(4){padding-left:1.8em;color:var(--proof)}
.hero .lead{margin-top:min(3.4vh,28px)}
.hero .btns{margin-top:min(4vh,36px)}
.proof{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:min(4vh,40px);font-size:13px;font-weight:600;color:var(--soft)}
.proof b{color:var(--ink)}
.art{position:relative;height:100%;max-height:72vh;align-self:center}
.art svg{position:absolute;right:0;top:0;width:min(40%,240px);overflow:visible}
.plates{position:absolute;left:4%;right:0;top:24%;transform:rotate(-14deg);transform-origin:left center;display:flex;flex-direction:column;gap:14px}
.plate{height:clamp(40px,6.4vh,64px);display:flex;align-items:center;padding:0 clamp(12px,1.4vw,20px);font-size:clamp(11px,1.4vw,20px);font-weight:800;letter-spacing:.06em;background:var(--ink);color:var(--paper);white-space:nowrap;width:max-content;
  animation:plateIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--i) * .12s);translate:calc(var(--p) * var(--sh) * -1) 0}
.plate:nth-child(1){--sh:2vw;margin-left:0} .plate:nth-child(2){--sh:4vw;margin-left:3vw} .plate:nth-child(3){--sh:6vw;margin-left:6vw}
.plate:nth-child(4){--sh:8vw;margin-left:9vw;background:var(--brand);color:var(--ink);border:2px solid var(--ink)}
@keyframes plateIn{from{opacity:0;transform:translateX(120px)}to{opacity:1;transform:none}}
.intro .ln>span{animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.1s + var(--i) * .09s)}
@keyframes rise{from{transform:translateY(112%)}to{transform:none}}
.wipe{position:absolute;inset:0;z-index:4;background:var(--ink);pointer-events:none;--a:.78;--b:1;
  clip-path:polygon(0 calc((1 - var(--k)) * (100% + 25vw)),100% calc((1 - var(--k)) * (100% + 25vw) - 25vw),100% 100%,0 100%)}
.cue{position:absolute;left:50%;bottom:2.4vh;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--p) * 6);transform:translateX(-50%)}
@media(max-width:899px){
  .hero{height:auto}.hero .stage{position:relative;height:auto;grid-template-columns:1fr;padding-top:calc(var(--nav) + 28px);padding-bottom:56px;gap:36px}
  .hero .h1,:lang(ru) .hero .h1{font-size:8.6vw}:lang(ru) .hero .h1{font-size:7.3vw}.hero .head{transform:none}.art{height:300px;max-height:none}.wipe,.cue{display:none}
  .plate{font-size:11px;height:38px}.plate:nth-child(n){--sh:0px;margin-left:0}.plate:nth-child(2){margin-left:6vw}.plate:nth-child(3){margin-left:12vw}.plate:nth-child(4){margin-left:18vw}
  .art svg{width:110px}}

/* ---------- frame-roll (the one strong moment) ---------- */
.roll{height:280vh}
.roll .stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4vw;align-items:center;padding:calc(var(--nav) + 2vh) var(--gut) 4vh}
.roll .h2{font-size:min(4.4vw,8vh)}
.roll .lead{margin-top:min(3vh,26px);--a:.62;--b:.8;opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 28px))}
.roll .ul{display:inline-block;margin-top:min(3.4vh,30px);--a:.7;--b:.88;opacity:var(--k)}
.screen{position:relative;width:100%}
.screen::before{content:'';position:absolute;inset:0;background:var(--brand);transform:translate(clamp(8px,1.2vw,18px),clamp(8px,1.2vw,18px))}
.frbox{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:2px solid var(--paper)}
.frbox img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0;transform:scale(calc(1.282 - .282 * var(--k)));--a:.12;--b:.58}
.frtag{position:absolute;left:12px;bottom:12px;padding:6px 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);--a:.5;--b:.6;background:color-mix(in srgb,var(--proof) calc(var(--k) * 100%),var(--ink))}
.cap{margin-top:clamp(20px,3vw,34px);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8D8B99}
@media(max-width:899px){.roll{height:300vh}.roll .stage{grid-template-columns:1fr;align-content:center;gap:22px;padding-top:calc(var(--nav) + 12px)}
  .roll .h2{font-size:8vw}.roll .lead{font-size:15px}.roll .stage>div:first-child{order:2}.roll .stage>div:last-child{order:1}.roll .kick{margin-bottom:12px}}

/* ---------- how we count ---------- */
.count{height:300vh}
.count .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center;padding:calc(var(--nav) + 2vh) var(--gut) 4vh}
.count .h2{font-size:min(4.6vw,8.4vh)}
.mark{display:inline-block;background:var(--proof);color:var(--paper);padding:0 .22em .06em;transform:rotate(-3deg);margin-left:.08em}
.checks{list-style:none;margin:min(4vh,34px) 0 0;padding:0;display:flex;flex-direction:column;gap:min(2.2vh,16px);max-width:34em}
.checks li{display:flex;gap:16px;align-items:baseline;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:var(--soft);opacity:calc(.62 + .38 * var(--k))}
.checks li::before{content:'';flex:none;width:12px;height:12px;background:color-mix(in srgb,var(--proof) calc(var(--k) * 100%),#CFCABB);transform:scale(calc(.7 + .3 * var(--k)))}
.checks li:nth-child(2)::before{background:color-mix(in srgb,var(--live) calc(var(--k) * 100%),#CFCABB)}
.checks li:nth-child(3)::before{background:color-mix(in srgb,var(--brand) calc(var(--k) * 100%),#CFCABB)}
.checks li:nth-child(4)::before{background:color-mix(in srgb,var(--ink) calc(var(--k) * 100%),#CFCABB)}
.mock{position:relative;aspect-ratio:16/10;background:#1D1D26;box-shadow:10px 10px 0 var(--ink);transform:rotate(calc(-5deg + var(--p) * 5deg));overflow:visible}
.mock .scene{position:absolute;inset:0;overflow:hidden}
.mock .panel{position:absolute;right:0;top:0;bottom:0;width:26%;background:#12121A;padding:5% 4%;display:flex;flex-direction:column;gap:7px}
.mock .panel s{display:block;height:5px;background:#3A3A48;text-decoration:none}
.mock .panel s:nth-child(3){width:60%}.mock .panel s:nth-child(5){background:var(--brand);height:10px;margin:6px 0}
.mock .moon{position:absolute;left:18%;top:20%;width:30%;aspect-ratio:1;border-radius:50%;background:#3B3B4B}
.mock .sqr{position:absolute;left:38%;top:34%;width:20%;aspect-ratio:1;background:#fff;transform:rotate(18deg)}
.mock .bar{position:absolute;left:0;bottom:0;width:74%;height:13%;background:var(--brand);color:var(--ink);font-size:clamp(9px,1.1vw,15px);font-weight:800;letter-spacing:.08em;display:flex;align-items:center;padding-left:5%;white-space:nowrap}
.mock .live{position:absolute;left:4%;top:5%;background:var(--proof);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;padding:4px 8px;transform:rotate(-4deg)}
.mock .br{position:absolute;width:11%;aspect-ratio:1;border:solid var(--proof);border-width:0;--a:.62;--b:.82;opacity:var(--k);transform:scale(calc(1.5 - .5 * var(--k)))}
.mock .br.a{left:-4%;top:-6%;border-width:6px 0 0 6px}.mock .br.b{right:-4%;top:-6%;border-width:6px 6px 0 0}
.mock .br.c{left:-4%;bottom:-6%;border-width:0 0 6px 6px}.mock .br.d{right:-4%;bottom:-6%;border-width:0 6px 6px 0}
.stamp{position:absolute;left:6%;bottom:-6%;background:var(--ink);color:var(--paper);padding:10px 14px;font-size:clamp(10px,1vw,13px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;--a:.84;--b:.96;opacity:var(--k);transform:rotate(-4deg) scale(calc(1.4 - .4 * var(--k)))}
@media(max-width:899px){.count{height:auto}.count .stage{position:relative;height:auto;grid-template-columns:1fr;padding:72px var(--gut) 88px;gap:48px}
  .count .h2{font-size:9vw}.mock{transform:none;box-shadow:7px 7px 0 var(--ink)}}

/* ---------- how a campaign runs ---------- */
.flow{height:420vh}
.flow .stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5vw;align-items:center;padding:calc(var(--nav) + 2vh) var(--gut) 4vh}
.flow .h2{font-size:min(4.2vw,7.6vh)}
.rail{position:relative;margin-top:min(5vh,44px);padding-left:34px;display:flex;flex-direction:column;gap:min(2.4vh,18px)}
.rail::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:4px;background:rgba(17,17,24,.18)}
.rail::after{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:4px;background:var(--ink);transform-origin:top;transform:scaleY(var(--p))}
.rail div{--on:0;position:relative;font-size:clamp(15px,1.5vw,22px);font-weight:800;letter-spacing:-.01em;opacity:clamp(.3,calc(.3 + var(--on) * .7),1)}
.rail div::before{content:'';position:absolute;left:-34px;top:.28em;width:14px;height:14px;background:var(--ink);transform:scale(calc(.6 + var(--on) * .4))}
.deck{position:relative;height:min(62vh,520px)}
.step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  --in:clamp(0,calc((var(--p) - (var(--s) / 4 - .05)) / .06),1);--out:clamp(0,calc(((var(--s) + 1) / 4 - var(--p)) / .06),1);--v:min(var(--in),var(--out));
  opacity:var(--v);transform:translateY(calc((1 - var(--in)) * 60px - (1 - var(--out)) * 60px))}
.step:last-child{--out:1}.step:first-child{--in:1}
.step .no{font-size:min(30vw,38vh);line-height:.85;font-weight:900;letter-spacing:-.06em;margin-left:-.04em}
.step .h3{margin-top:2vh;font-size:clamp(22px,2.6vw,38px)}
.step p{margin:12px 0 0;font-size:clamp(15px,1.3vw,19px);line-height:1.5;max-width:26em;color:#2E2E38}
.livechip{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 12px;background:var(--proof);color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;width:max-content}
.livechip::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.25}}
@media(max-width:899px){.flow{height:380vh}.flow .stage{grid-template-columns:1fr;align-content:center;gap:0;padding-top:calc(var(--nav) + 14px)}
  .flow .h2{font-size:8vw}.rail{display:none}.deck{height:46vh;margin-top:18px}.step .no{font-size:36vw}}

/* ---------- formats: horizontal gallery ---------- */
.fmt{height:480vh}
.fmt .stage{display:flex;flex-direction:column;justify-content:center;gap:min(4vh,36px);padding-top:calc(var(--nav) + 2vh)}
.fmt .top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:4vw;align-items:end;padding:0 var(--gut)}
.fmt .h2{font-size:min(4.8vw,8vh)}
.track{display:flex;gap:clamp(18px,2vw,32px);padding:0 var(--gut);width:max-content;transform:translateX(calc(var(--p) * var(--dx,0px)));will-change:transform}
.card{flex:none;width:clamp(270px,34vw,520px)}
.card .shot{position:relative}
.card .shot::before{content:'';position:absolute;inset:0;background:var(--c,var(--brand));transform:translate(12px,12px)}
.card .shot .fm{position:relative;overflow:hidden;border:2px solid var(--ink);aspect-ratio:16/9}
.card .shot img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.16) translateX(calc(var(--p,0) * var(--dx,0px) * -.03))}
.card:nth-child(2){--c:var(--live)}.card:nth-child(3){--c:var(--proof)}.card:nth-child(4){--c:var(--ink)}.card:nth-child(5){--c:var(--brand)}
.card .h3{margin-top:26px}
.card p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--soft)}
.card .cp{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prog{margin:0 var(--gut);height:4px;background:rgba(17,17,24,.15)}
.prog i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p))}
@media(max-width:899px){.fmt{height:420vh}.fmt .top{grid-template-columns:1fr;gap:12px}.fmt .h2{font-size:8vw}.fmt .lead{font-size:15px}.card{width:76vw}.card .h3{margin-top:20px}}

/* ---------- compare ---------- */
.why{padding:clamp(80px,12vw,160px) var(--gut)}
.why .h2{max-width:14em}
.tbl{margin-top:clamp(36px,5vw,72px);display:grid;grid-template-columns:1.1fr 1.2fr 1fr 1fr;border:2px solid var(--ink);background:var(--paper)}
.tbl .row>div{padding:18px 20px;font-size:15px;line-height:1.4;color:var(--soft)}
.tbl .row{display:contents}
.tbl .row:not(.hd)>div:not(.c1){opacity:calc(.45 + .55 * var(--t,1))}
.tbl .row:not(.hd)>.c1 .tx{opacity:calc(.45 + .55 * var(--t,1))}
.tbl .row>.c1{position:relative;padding-right:64px}
.ck{position:absolute;right:18px;top:50%;width:38px;height:38px;margin-top:-19px;display:block;transform:rotate(-4deg)}
.ck svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--brand);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:calc(30 - 30 * clamp(0, (var(--t,1) - .15) / .85, 1))}
.tally{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--ink)}.tally b{display:inline-block;min-width:1.2em;font-size:20px;letter-spacing:0}
.tbl .row>.c0{font-weight:700;color:var(--ink)}
.tbl .row>.c1{background:var(--ink);color:var(--paper);font-weight:700}
.tbl .row:nth-child(even)>.c1{background:#1C1C26}
.tbl .row>div{border-top:2px solid #D9D4C7}
.tbl .hd>div{border-top:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-top:22px;padding-bottom:22px}
.tbl .hd>.c1{background:var(--brand);color:var(--ink);font-size:14px}
@media(max-width:899px){.tbl{grid-template-columns:1fr 1fr}.tbl .hd{display:none}
  .tbl .c0{grid-column:1/-1;background:#E9E5D9;padding-bottom:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
  .tbl .c1{grid-column:1/-1}.tbl .row>div::before{content:attr(data-l);display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:4px}
  .tbl .c0::before{display:none}.tbl .row>div{border-top:0}.tbl .c2,.tbl .c3{grid-column:auto;border-bottom:2px solid #D9D4C7}}

/* ---------- cases ---------- */
.cases{padding:clamp(80px,12vw,170px) var(--gut)}
.cases .h2{max-width:12em}
.cgrid{margin-top:clamp(48px,7vw,100px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,96px)}
.cmeta{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cmeta i{width:40px;height:5px;background:var(--brand);display:block}.cgrid>div:nth-child(2) .cmeta i{background:var(--live)}
.fig small{font-size:.42em;letter-spacing:-.02em;font-weight:800;margin-left:.1em}
.fig{margin:18px 0 0;font-size:clamp(64px,11.5vw,190px);line-height:1.02;font-weight:900;letter-spacing:-.06em;color:var(--brand);font-variant-numeric:tabular-nums}
.cgrid>div:nth-child(2) .fig{color:#fff}
.cgrid .h3{margin-top:6px}
.cstats{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;font-size:14px;font-weight:600;color:#B9B7C4}.cstats b{color:var(--paper)}
.cgrid p{margin:14px 0 0;max-width:30em;font-size:16px;line-height:1.55;color:#B9B7C4}
.cases .ul{display:inline-block;margin-top:clamp(40px,5vw,64px);color:var(--paper)}
@media(max-width:899px){.cgrid{grid-template-columns:1fr}.fig{font-size:20vw}}

/* ---------- streamers / agencies ---------- */
.who{padding:clamp(80px,12vw,170px) var(--gut)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(36px,5vw,64px)}
.chips span{background:var(--ink);color:var(--paper);padding:10px 16px;font-size:13px;font-weight:800;letter-spacing:.14em}
.chips span:nth-child(2){background:var(--live)}.chips span:nth-child(3){background:var(--proof)}.chips span:nth-child(4){background:var(--brand);color:var(--ink)}
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,48px)}
.panel2{padding:clamp(28px,4vw,56px);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);display:flex;flex-direction:column;align-items:flex-start}
.panel2.a{background:var(--brand)}.panel2.b{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:10px 10px 0 var(--live)}
.panel2 .h2{font-size:clamp(28px,3.6vw,56px)}
.panel2 p{margin:18px 0 0;font-size:clamp(15px,1.3vw,18px);line-height:1.55;max-width:26em}
.panel2.b p{color:#B9B7C4}
.panel2 .btns{margin-top:auto;padding-top:34px}
.panel2.b .ul{color:var(--paper)}
@media(max-width:899px){.duo{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{padding:clamp(80px,12vw,160px) var(--gut)}
.cgr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact .h2{font-size:clamp(30px,4.2vw,64px)}
.contact .lead{margin-top:24px}
.mail{display:inline-block;margin-top:28px;font-weight:700}
form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.f{display:flex;flex-direction:column;gap:6px}.f.w{grid-column:1/-1}
.f label,.grp>span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3A3A44}
.f input,.f textarea{font:inherit;font-weight:600;font-size:17px;background:transparent;border:0;border-bottom:2px solid var(--ink);padding:8px 0 10px;color:var(--ink);border-radius:0;width:100%}
.f textarea{resize:vertical;min-height:84px}
.grp{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags label{cursor:pointer}.tags input{position:absolute;opacity:0;pointer-events:none}
.tags span{display:inline-block;padding:8px 14px;border:2px solid var(--ink);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.tags input:checked+span{background:var(--ink);color:var(--paper)}.tags input:focus-visible+span{outline:3px solid var(--live);outline-offset:3px}
.sub{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sub button{font:inherit;font-weight:700;font-size:16px;cursor:pointer}.note{font-size:13px;color:#3A3A44}
.sent{grid-column:1/-1;font-weight:700;color:var(--proof);display:none}.sent.on{display:block}
@media(max-width:899px){.cgr{grid-template-columns:1fr}form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding:clamp(56px,7vw,96px) var(--gut) 40px;background:var(--paper)}
.fg{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.fg img{height:18px;width:auto}.fg p{margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--soft);max-width:24em}
.fg h4{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fg a{display:block;text-decoration:none;font-size:14px;font-weight:600;margin-bottom:9px}
.fb{margin-top:56px;font-size:13px;color:var(--muted)}
@media(max-width:899px){.fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:1/-1}}


/* ---------- v7 merge ---------- */
/* compositions assemble plane by plane when they enter the screen */
.asm>*{transition:opacity .5s ease,translate .9s cubic-bezier(.2,.9,.25,1.15);transition-delay:calc(var(--j,0) * .11s)}
.anim .asm:not(.in)>*{opacity:0;translate:-26px 22px}
.fart{flex:none;align-self:flex-end}
.fart svg{display:block}
/* flow */
.flow2{padding:clamp(88px,12vw,170px) var(--gut) clamp(96px,12vw,170px)}
.fhead,.whead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.steps{margin-top:clamp(56px,7vw,110px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}
.st{border-top:2px solid var(--ink);padding-top:22px;margin-top:calc((3 - var(--s)) * clamp(18px,2.4vw,40px))}
.st .no{font-size:clamp(76px,8vw,128px);line-height:.82;font-weight:900;letter-spacing:-.06em;color:var(--live);margin-left:-.04em}
.st .h3{margin-top:18px}
.st p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--soft)}
/* formats */
.fmt2{padding:clamp(88px,12vw,170px) 0}
.fmt2 .stage{position:relative;height:auto;overflow:visible;padding-top:0;display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.fmt2 .top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:4vw;align-items:end;padding:0 var(--gut)}
.fmt2 .h2{font-size:min(4.8vw,8vh)}
.fmt2 .track{transform:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none;padding-bottom:18px}
.fmt2 .track::-webkit-scrollbar{display:none}
.fmt2 .track::after{content:'';flex:0 0 1px}
.fmt2 .card{scroll-snap-align:start}
.fmt2 .card .shot img{transform:scale(1.04)}
.gal-ctl{display:flex;align-items:center;gap:10px;padding:0 var(--gut)}
.gal-ctl .prog{flex:1;margin:0 14px 0 0}
.arr{width:46px;height:46px;border:2px solid var(--ink);background:var(--paper);font:800 18px var(--font);cursor:pointer;transition:background .2s,color .2s}
.arr:hover{background:var(--ink);color:var(--paper)}
/* why */
.whead .fart{margin-bottom:6px}
/* streamers megaphone */
.horn{max-width:760px;margin:0 0 clamp(40px,5vw,72px)}
.horn svg{display:block;width:100%;height:auto}
.horn svg>path:first-of-type{transform-box:view-box;transform-origin:150px 300px;transition:scale 1.1s cubic-bezier(.2,.8,.2,1)}
.horn svg>g{transition:opacity .6s ease .5s}
.horn text{transition:opacity .45s ease}
.anim .horn:not(.in) svg>path:first-of-type{scale:0 1}
.anim .horn:not(.in) svg>g,.anim .horn:not(.in) text{opacity:0}
/* contact */
.contact form{border:2px solid var(--ink);padding:clamp(22px,3vw,40px);box-shadow:10px 10px 0 var(--brand);background:var(--paper)}
.cart{margin-top:clamp(36px,5vw,64px)}
.cart svg{display:block}
@media(max-width:899px){
  .hero .head,.hero .art{opacity:1!important}
  .steps{grid-template-columns:1fr;gap:28px}.st{margin-top:0}.st .no{font-size:72px}
  .fhead,.whead{flex-direction:column;align-items:flex-start}
  .fart svg{width:170px}
  .fmt2 .card{width:80vw}
  .fmt2 .top{grid-template-columns:1fr;gap:12px}.fmt2 .h2{font-size:8vw}.fmt2 .lead{font-size:15px}
  .cart svg{width:170px}
}
.rm .asm>*,.rm .horn *{opacity:1!important;translate:none!important;scale:none!important}


/* ---------- v8: a book, not slides ---------- */
/* content is on the page from the start: no per-section reveals (the hero opening stays) */
.v8 main section:not(.hero) .ln>span{transform:none!important}
.v8 main section:not(.hero) .rv{opacity:1!important;transform:none!important}
.v8 main section:not(.hero) .asm>*{opacity:1!important;translate:none!important;transition:none}
.v8 .tbl .row:not(.hd)>div:not(.c1),.v8 .tbl .row:not(.hd)>.c1 .tx{opacity:1}
/* megaphone opens with the scroll, not on a trigger */
.v8 .horn svg>path:first-of-type{scale:max(.001,var(--h,1)) 1;transition:none}
.v8 .horn svg>g{opacity:clamp(0,calc(var(--h,1) * 3 - 1.4),1);transition:none}
.v8 .horn text{transition:none}
.v8 .horn text:nth-of-type(1){opacity:clamp(0,calc((var(--h,1) - .55) * 8),1)}
.v8 .horn text:nth-of-type(2){opacity:clamp(0,calc((var(--h,1) - .67) * 8),1)}
.v8 .horn text:nth-of-type(3){opacity:clamp(0,calc((var(--h,1) - .79) * 8),1)}
.v8 .horn text:nth-of-type(4){opacity:clamp(0,calc((var(--h,1) - .9) * 9),1)}
/* chapters and page numbers */
/* APIQ column marker: a flat yellow square on the -14deg diagonal instead of a handwritten tick */
.v8 .ck{width:14px;height:14px;right:24px;margin-top:-7px;background:var(--brand);transform:rotate(-14deg)}
.v8 .ck svg{display:none}
.v8 .tally{display:none}
.v8 .tbl .row>.c1{padding-right:56px}
/* gallery controls: Lissitzky wedges instead of arrow glyphs, a yellow plane riding a line instead of a progress bar */
.v8 .arr{width:64px;height:52px;border:0;background:none;padding:0;position:relative;cursor:pointer;transition:translate .2s ease,opacity .2s}
.v8 .arr svg{display:block;width:64px;height:52px;overflow:visible}
.v8 .arr:hover{background:none}
.v8 .arr[data-dir="-1"]:hover{translate:-4px 0}.v8 .arr[data-dir="1"]:hover{translate:4px 0}
.v8 .arr[disabled]{opacity:.25;cursor:default;translate:none}
.v8 .gal-ctl{gap:6px}
.v8 .gnum{font:800 13px var(--font);letter-spacing:.14em;color:var(--ink);margin-right:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.v8 .gnum b{font-size:28px;letter-spacing:0;margin-right:6px;color:var(--ink)}
.v8 .arr:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(max-width:760px){.v8 .gal-ctl{padding-right:calc(var(--gut) + 22px)}.v8 .arr,.v8 .arr svg{width:50px;height:41px}.v8 .gnum{margin-right:12px}.v8 .gnum b{font-size:22px}.v8 .gal-ctl .prog{margin-right:12px}}
.v8 .gal-ctl .prog{height:2px;background:var(--ink);position:relative;margin-right:24px;overflow:visible}
.v8 .gal-ctl .prog i{position:absolute;left:0;top:-6px;width:20%;height:14px;background:var(--brand);transform:translateX(calc(var(--p,0) * 400%)) rotate(-4deg);transform-origin:center}
.v8 .gal-ctl .prog i::after{content:'';position:absolute;right:-14px;top:-8px;width:9px;height:9px;background:var(--proof);transform:rotate(-14deg)}
/* page scrollbar in the same language: a flat ink plane on paper, square ends */
html{scrollbar-color:var(--ink) var(--paper);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper);border-left:2px solid var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper);border-left-width:5px}
::-webkit-scrollbar-thumb:hover{background:var(--proof)}
main>section{position:relative}
.chn{font-weight:900;letter-spacing:.04em;margin-right:2px}
.folio{position:absolute;right:var(--gut);bottom:22px;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--muted);z-index:2}
.ink .folio{color:#8D8B99}
/* the thread and the square */
#story,#story2{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;overflow:visible}
#story{contain:strict}
#story .done{fill:none;stroke:#FC2A13;stroke-width:2}
#story .todo{fill:none;stroke:#8C8C8C;stroke-width:1;stroke-dasharray:3 7;opacity:.7}
#sq{fill:var(--proof)}
.rm #story,.rm #story2{display:none}

/* ---------- reduced motion: everything visible and static ---------- */
.rm .pin{height:auto!important}.rm .stage{position:relative!important;height:auto!important}
.rm .step{position:relative;inset:auto;opacity:1;transform:none;margin-bottom:40px}.rm .deck{height:auto}
.rm .wipe,.rm .cue{display:none}.rm .track{transform:none;flex-wrap:wrap;width:auto}
.rm .plate,.rm .intro .ln>span{animation:none}

/* ================= v9: a landing, not slides — no chapter numbers, no page numbers ================= */
.chn,.folio,.gnum{display:none!important}
.loc{display:none!important}
.past .nav nav{opacity:1!important;pointer-events:auto!important}

/* ================= v9: controls answer every touch ================= */
*{-webkit-tap-highlight-color:transparent}
/* main button: lifts off the page with a red shadow, presses flat into it */
.btn{cursor:pointer;transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1),background-color .15s,color .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--proof)}
.ink .btn:hover{box-shadow:7px 7px 0 var(--proof)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--proof);transition-duration:.05s}
.btn:focus-visible{outline:3px solid var(--live);outline-offset:4px}
.btn.busy,.btn:disabled{background:var(--ink);color:var(--paper);box-shadow:0 0 0 var(--ink);transform:translate(5px,5px);cursor:progress}
.btn.busy::after{content:'';display:inline-block;width:10px;height:10px;margin-left:12px;background:var(--brand);vertical-align:1px;animation:sq-spin .7s linear infinite}
@keyframes sq-spin{to{transform:rotate(360deg)}}
.nav .cta{transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1)}
.nav .cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--proof)}
.nav .cta:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);transition-duration:.05s}
/* text links: a red rule runs in from the left over the black one */
.ul{border-bottom:0;padding-bottom:5px;cursor:pointer;
  background:linear-gradient(var(--proof),var(--proof)) left bottom/0% 3px no-repeat,linear-gradient(currentColor,currentColor) left bottom/100% 2px no-repeat;
  transition:background-size .28s cubic-bezier(.2,.8,.2,1),letter-spacing .2s}
.ul:hover,.ul:focus-visible{background-size:100% 3px,100% 2px}
.ul:active{background-size:100% 4px,100% 2px;opacity:.8}
/* top menu: a red bar under the item; the current page keeps an ink bar */
.nav nav a{position:relative;padding:6px 0;transition:color .15s}
.nav nav a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--proof);transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.nav nav a:hover::after,.nav nav a:focus-visible::after{transform:scaleX(1)}
.nav nav a[aria-current=page]{box-shadow:none}
.nav nav a[aria-current=page]::after{transform:scaleX(1);background:var(--ink)}
.nav nav a[aria-current=page]:hover::after{background:var(--proof)}
.nav .login{transition:color .15s}.nav .login:hover{color:var(--proof)}
.burger{transition:background .15s}.burger:hover{background:var(--brand)}.burger:active{transform:translate(2px,2px)}
.nav.open .burger{background:var(--ink)}.nav.open .burger i{background:var(--paper)}
.nav.open nav a{padding:4px 0}
/* footer links */
.fg a{transition:color .15s,transform .2s cubic-bezier(.2,.8,.2,1)}
.fg a:hover{color:var(--proof);transform:translateX(4px)}
/* form fields: the line turns purple, a yellow square marks the active and filled field, red when something is missing */
.f{position:relative}
.f label{transition:color .15s}
.f label::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--brand);vertical-align:1px;transform:rotate(-14deg) scale(0);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.f:focus-within label::before,.f.filled label::before{transform:rotate(-14deg) scale(1)}
.f:focus-within label{color:var(--live)}
.f input,.f textarea{transition:border-color .15s,box-shadow .15s,background-color .2s;caret-color:var(--proof)}
.f input::placeholder,.f textarea::placeholder{color:#A6A3B0;font-weight:500}
.f input:hover,.f textarea:hover{border-bottom-color:var(--live)}
.f input:focus,.f textarea:focus,.f input:focus-visible,.f textarea:focus-visible{outline:none;border-bottom-color:var(--live);box-shadow:0 2px 0 var(--live);background:rgba(187,15,216,.05)}
.tried .f:has(:invalid) input,.tried .f:has(:invalid) textarea{border-bottom-color:var(--proof);box-shadow:0 2px 0 var(--proof)}
.tried .f:has(:invalid) label{color:var(--proof)}
.tried .f:has(:invalid) label::before{background:var(--proof);transform:rotate(-14deg) scale(1)}
.tried .f:has(:invalid)::after{content:'Заполните поле';margin-top:6px;font-size:12px;font-weight:700;color:var(--proof)}
.tried .f:has(input[type=email]:invalid)::after{content:'Проверьте адрес почты'}
form.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* choice chips */
.tags span{cursor:pointer;user-select:none;transition:background .15s,color .15s,transform .1s,box-shadow .15s}
.tags label:hover input:not(:checked)+span{background:var(--brand)}
.tags input:checked+span{box-shadow:3px 3px 0 var(--proof)}
.tags label:active span{transform:translate(2px,2px);box-shadow:0 0 0 var(--proof)}
/* gallery wedges */
.v8 .arr:active:not([disabled]){scale:.92}
/* clickable cards: the frame lifts off its colour plate */
.card .shot .fm,.cover,.shot2 .fm{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.card a:hover .shot .fm,.fgrid .cl:hover .shot .fm{transform:translate(-6px,-6px)}
.card a:active .shot .fm,.fgrid .cl:active .shot .fm{transform:translate(2px,2px)}
.card a:hover .h3{color:var(--proof)}
.post a:hover .cover{transform:translate(-5px,-5px);box-shadow:8px 8px 0 var(--ink)}
.feat a:hover .cover{transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--ink)}
.cover{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1)}
/* FAQ */
.faq summary{transition:color .15s}
.faq summary:hover{color:var(--live)}
.faq summary:active .pm{transform:rotate(-14deg) scale(.85)}
/* doors and panels */
.door,.panel2{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1)}
.door:hover{transform:translate(-3px,-3px)}
.door:nth-child(1):hover{box-shadow:13px 13px 0 var(--brand)}.door:nth-child(2):hover{box-shadow:13px 13px 0 var(--live)}.door:nth-child(3):hover{box-shadow:13px 13px 0 var(--ink)}
.toc a{transition:color .15s,transform .2s}.toc a:hover{color:var(--proof);transform:translateX(3px)}
.faq-nav a{transition:background .15s,color .15s,transform .1s}.faq-nav a:active{transform:translate(2px,2px)}
.crumb a{transition:color .15s}
@media(prefers-reduced-motion:reduce){form.shake{animation:none}.btn.busy::after{animation:none}}

/* ================= language switcher ================= */
.langs{display:flex;gap:2px;letter-spacing:.06em}
.langs a{font-size:12px;font-weight:700;padding:3px 5px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.langs a:hover{color:var(--ink);border-bottom-color:var(--proof)}
.langs a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:1100px){.nav .side .langs{display:none}.nav.open .side .langs{display:flex;order:6}}
@media(max-width:1099px){.nav.open .side{flex-wrap:wrap}}

/* header fit: the logo never shrinks; tighter menu on mid-size screens */
.nav .logo{flex:none}
@media(max-width:1360px){.nav nav{gap:18px;font-size:13px}.nav .side{gap:14px}}
@media(max-width:1240px){.nav .side .login{display:none}}
/* home hero: languages with longer lines get the same measure as Russian */
:lang(es) .hero .h1,:lang(tr) .hero .h1,:lang(de) .hero .h1{font-size:min(4.7vw,8.6vh)}
@media(max-width:899px){:lang(es) .hero .h1,:lang(tr) .hero .h1,:lang(de) .hero .h1{font-size:7.3vw}}
/* long words (German, Turkish): break inside table cells and small text instead of widening the page */
.tbl .row>div{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:899px){.tbl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
:lang(de) p,:lang(de) li,:lang(de) .h3,:lang(tr) p,:lang(tr) li{hyphens:auto}
.panel2{min-width:0}.panel2 .h2,.sec .h2,.h3{overflow-wrap:break-word;hyphens:auto}
@media(max-width:899px){.duo{grid-template-columns:minmax(0,1fr)}}