:root{
  --black:#000;--panel:#131315;--panel2:#1c1c1e;--hero-bg:#1b1b1d;
  --text:#f5f5f7;--muted:#8a8a8f;--hair:rgba(255,255,255,.14);
  --ink:#1d1d1f;--ink-muted:#6e6e73;--paper:#fff;--paper2:#f2f2f4;
  --acc:#fe4a23;--gut:clamp(20px,5vw,110px);--nav:46px;
  --ease:cubic-bezier(.28,.11,.32,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,sans-serif;
  font-size:17px;line-height:1.45;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--gut)}
.shots>*,.tiles>*,.tar>*,.split>*,.nums>*,.sh-grid>*,.lwall>*{min-width:0}
.narrow{max-width:820px;margin:0 auto;padding:0 max(20px,var(--gut))}
.center{text-align:center}

/* reveal */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rv.in,.js.no-io .rv{opacity:1;transform:none}
.js .hero-pin{}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}

/* ---------- global nav (не прилипает: остаётся на месте при скролле) ---------- */
.gnav{position:relative;top:auto;z-index:400;height:var(--nav);
  background:rgba(0,0,0,.7);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.07)}
.gnav-in{max-width:1024px;margin:0 auto;padding:0 20px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.gnav-logo img{height:16px;width:auto}
.gnav ul{list-style:none;display:flex;gap:28px;font-size:12px;overflow-x:auto;scrollbar-width:none}
.gnav ul::-webkit-scrollbar{display:none}
.gnav a{color:rgba(245,245,247,.8);white-space:nowrap;transition:color .25s}
.gnav a:hover{color:#fff}
.gnav-burger{display:none;width:26px;height:26px;position:relative;flex:0 0 auto}
.gnav-burger span{position:absolute;left:4px;right:4px;height:1.4px;background:#f5f5f7;border-radius:2px}
.gnav-burger span:first-child{top:10px}.gnav-burger span:last-child{top:16px}

/* ---------- floating dock ---------- */
.dock{position:fixed;left:50%;top:8px;transform:translate(-50%,-14px);
  z-index:380;width:min(960px,calc(100vw - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 9px 9px 20px;border-radius:20px;
  background:rgba(28,28,30,.72);backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);border:1px solid rgba(255,255,255,.1);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.dock.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dock-t{font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.dock-r{display:flex;gap:8px;align-items:center}
.dock-btn{border:1px solid rgba(255,255,255,.28);border-radius:980px;padding:7px 16px;font-size:14px;
  display:inline-flex;align-items:center;gap:6px;transition:background .25s}
.dock-btn:hover{background:rgba(255,255,255,.1)}
.dock-btn .chev{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease)}
.dock-btn[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-1px,-1px)}
.dock-buy{background:var(--acc);border-radius:980px;padding:8px 18px;font-size:14px;color:#fff}
.dock-buy:hover{opacity:.88}

/* ---------- sheet ---------- */
.sheet-bd{position:fixed;inset:0;z-index:390;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;
  visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;backdrop-filter:blur(3px)}
.sheet-bd.open{opacity:1;pointer-events:auto;visibility:visible}
.sheet{position:fixed;z-index:395;left:50%;top:calc(8px + 62px);transform:translate(-50%,-10px) scale(.98);
  width:min(960px,calc(100vw - 32px));max-height:calc(100svh - var(--nav) - 34px);overflow:auto;
  background:rgba(24,24,26,.96);backdrop-filter:saturate(180%) blur(30px);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:22px 26px 30px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  overscroll-behavior:contain}
.sheet.open{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto;visibility:visible}
.sheet-x{position:absolute;right:18px;top:18px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:15px;line-height:1}
.sheet-x:hover{background:rgba(255,255,255,.22)}
.sh-rail{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;padding:6px 0 18px;
  border-bottom:1px solid var(--hair);margin-right:44px}
.sh-rail::-webkit-scrollbar{display:none}
.sh-item{flex:0 0 auto;width:112px;text-align:center;font-size:12px;color:var(--muted);line-height:1.3}
.sh-item .ic{height:56px;display:grid;place-items:center;margin-bottom:8px}
.sh-item .ic svg{height:44px;width:auto}
.sh-item b{display:block;color:var(--text);font-weight:400;font-size:13px;margin-bottom:2px}
.sh-item.now b{color:var(--text)}
.sh-item.now span{color:var(--acc)}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0 20px;flex-wrap:wrap}
.sh-head h3{font-size:26px;font-weight:600;letter-spacing:-.022em;margin-bottom:4px}
.sh-head p{font-size:13px;color:var(--muted);line-height:1.45}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;padding-top:6px}
.sh-col h4{font-size:12px;color:var(--muted);margin-bottom:12px;font-weight:400}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border-radius:980px;padding:7px 15px;font-size:14px;background:rgba(255,255,255,.08);transition:.25s}
.chip:hover{background:rgba(255,255,255,.08)}
.chip.on{background:#fff;color:#000}
.sh-links{display:flex;flex-direction:column;gap:11px;font-size:14px}
.sh-links a{color:var(--acc)}
.sh-links a:hover{text-decoration:underline}
.sh-svc{display:flex;flex-direction:column;gap:9px;font-size:14px}
.sh-svc a{color:rgba(245,245,247,.85);display:flex;justify-content:space-between;gap:12px}
.sh-svc a:hover{color:#fff}
.sh-svc span{color:var(--muted);font-size:12px;white-space:nowrap}

/* ---------- ribbon ---------- */
.ribbon{background:var(--panel);text-align:center;padding:13px 20px;font-size:12px;color:var(--muted)}
.ribbon a{color:var(--acc)}

/* ---------- hero ---------- */
.hero-scroll{height:780vh;position:relative}
.hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;
  --hgut:var(--gut);                 /* сетка знака совпадает с полями страницы */
  --hw:min(860px,92vw,calc(100vw - 2*var(--hgut)));   /* ширина артборда 900×470 */
  --hd:min(190px,46vh);              /* диаметр окружностей d = 130/900 артборда */
  --hgy:calc(var(--hd)*235/260);     /* ордината центров окружностей */
  --hsign:calc(var(--hd)*522/260);   /* полный габарит знака по X */}
.hero-stage{display:grid;place-items:center;position:relative;padding:36px 20px 0}
.hero-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(54% 44% at 50% 46%,rgba(254,74,35,.16),transparent 70%)}
#heroArt{width:var(--hw);height:auto;position:relative;z-index:1;will-change:transform;backface-visibility:hidden}
/* hero + ribbon: стык в тон фону видео, без шва и без резкой границы */
.hero-scroll,.hero-pin,.hero-stage,.hero-foot,.ribbon{background:var(--hero-bg)}
.ribbon{border-bottom:0}

/* --- финал скраба: знак собирается прямо в SVG и остаётся собранным --- */
.hfb{opacity:0}                              /* строительный каркас: уходит первым */
/* кадр не перерисовывается на каждый кадр сборки: слой отдаётся композитору,
   и сборка идёт ровно, без дрожания */
#heroArt,#heroArt *{backface-visibility:hidden}
.hero-foot{padding:0 var(--gut) 52px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;position:relative;z-index:2}
.hero-eye{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:2px;color:var(--muted)}
.hero-h1{font-size:clamp(44px,6.4vw,88px);line-height:1.02;font-weight:600;letter-spacing:-.03em}
.buybar{display:flex;align-items:center;gap:16px;background:rgba(40,40,42,.68);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:12px 12px 12px 18px}
.buybar p{font-size:12px;line-height:1.4}
.buybar p span{color:var(--muted)}
.pill{background:var(--acc);color:#fff;border-radius:980px;padding:8px 18px;font-size:14px;
  white-space:nowrap;transition:opacity .25s,transform .25s;display:inline-block}
.pill:hover{opacity:.88;transform:translateY(-1px)}
.pill.ghost{background:transparent;border:1px solid rgba(255,255,255,.3)}
.pill.ink{background:var(--ink);color:#fff}
.pill.ink-ghost{background:transparent;border:1px solid rgba(0,0,0,.2);color:var(--ink)}
.pill.tg{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;font-size:15px;font-weight:600;
  background:#229ED9;color:#fff;box-shadow:0 10px 30px rgba(34,158,217,.35)}
.pill.tg svg{width:19px;height:19px;fill:#fff;flex:0 0 19px}
.pill.tg:hover{opacity:1;transform:translateY(-2px);background:#1E8CC0;
  box-shadow:0 14px 38px rgba(34,158,217,.45)}

/* ---------- sections ---------- */
.sec{padding:clamp(112px,13vw,196px) 0}
.sec.tight{padding:clamp(92px,10.5vw,156px) 0}
.sec + .sec,.arch + .sec,.sec + .arch{border-top:0}
/* каждый смысловой блок занимает примерно один экран */
.sec[id]{min-height:min(100svh,1100px);display:flex;flex-direction:column;justify-content:center}
.sec[id] > .narrow,.sec[id] > .wrap{width:100%}
/* блок процесса: без лишнего «воздуха» сверху, таймлайн прижат к заголовку */
#process{padding-top:clamp(76px,8vw,124px);justify-content:flex-start}
.panel-bg{background:var(--panel)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eye{color:var(--ink-muted)}
.paper .lead{color:var(--ink-muted)}
.paper .lead b{color:var(--ink)}
.eye{font-size:16px;font-weight:600;color:var(--muted);margin-bottom:8px}
.h2{font-size:clamp(30px,4.6vw,66px);line-height:1.05;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
.h3{font-size:clamp(24px,3.1vw,42px);line-height:1.08;font-weight:600;letter-spacing:-.024em;text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.42;color:var(--muted);margin-top:20px}
.lead b{color:var(--text);font-weight:600}
.more{color:var(--acc);font-size:16px;display:inline-flex;align-items:center;gap:5px}
.more:hover{text-decoration:underline}
.more::after{content:"›";font-size:18px;line-height:1}

/* ---------- galleries ---------- */
.ghead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.gal{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--gut) 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.gal::-webkit-scrollbar{display:none}
.gcard{flex:0 0 min(560px,82vw);min-height:520px;border-radius:26px;scroll-snap-align:center;
  background:var(--panel2);overflow:hidden;padding:36px 34px;display:flex;flex-direction:column;
  transition:transform .5s var(--ease)}
.gcard:hover{transform:translateY(-4px)}
.gcard p{font-size:clamp(22px,1.8vw,27px);line-height:1.24;font-weight:600;letter-spacing:-.02em}
.gcard p em{font-style:normal;color:var(--muted)}
.gcard .big{font-size:clamp(64px,5vw,84px);line-height:1;font-weight:600;letter-spacing:-.03em;margin:auto 0 0}
.gcard .big span{display:block;font-size:15px;font-weight:400;color:var(--muted);margin-top:10px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;opacity:.95}
.gcard .gcover{margin:auto 0 0;perspective:none;cursor:default}
.gcard .gcover .cover-in{position:relative;inset:auto;transform:none;aspect-ratio:1.42/1;min-height:300px}
.gcard .gcover:hover .cover-in{transform:none;box-shadow:0 30px 70px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.07)}
.gcard .gcover .cover-open{display:none}
.gcard .gcover .cover-body{position:absolute;inset:0;padding:0 9% 22px 14%;gap:10px;justify-content:center}
.gcard .gcover .cover-mark{width:150px}
.gcard .gcover .cover-body b{font-size:clamp(20px,2vw,26px)}
.gcard .gcover .cover-body span{font-size:11.5px;max-width:220px;line-height:1.35}
.gcard .gcover .cover-pdf{padding:4px 9px;font-size:10.5px;position:absolute;top:14px;right:14px;margin:0;align-self:auto;z-index:3}
/* Мини-арт про логобук в карточке галереи: синяя папка (та же геометрия,
   что в блоке «Что вы получаете») и ряд файлов форматов над ней.
   Файлы подписываем реальными форматами — теми же, что в блоке «21 файл». */
.gcard .gcase{display:block;margin:auto 0 0;width:100%;height:auto;max-height:360px;overflow:visible}
.gcard .gcase .gc-ar{font-size:13.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  fill:rgba(255,255,255,.42)}
.gcard .gcase .gc-b{font-size:9px;font-weight:700;font-family:-apple-system,Inter,sans-serif;fill:#fff}
.gcard svg{margin:auto 0 0;width:100%;height:auto}
.gcard svg.gcase{margin:auto 0 0;width:100%;height:auto}
/* Карточка «16 px»: иллюстрация по центру, с воздухом от заголовка
   и от нижнего края. Знак и виджет держим вместе, чтобы композиция
   не расползалась на узком экране. */
.gcard .g16wrap{display:grid;place-items:center;margin:0 0 0;
  padding:clamp(18px,3vw,34px) 0 clamp(10px,2vw,20px);flex:1 1 auto;min-height:0}
.gcard svg.g16{margin:0;width:100%;max-width:min(100%,420px);height:auto;
  overflow:visible}
.gctrl{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:18px}
/* на широком экране карточки помещаются целиком — стрелки и точки прячем:
   пагинация под нелистающейся лентой выглядит как сломанный элемент */
.gctrl.is-static{display:none}
.dots{display:flex;gap:6px;margin-right:auto}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:.3s}
.dot.on{background:#fff;width:20px;border-radius:4px}
.pad{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;
  color:rgba(255,255,255,.85);font-size:15px;transition:.25s}
.pad:hover{background:rgba(255,255,255,.22)}
.pad[disabled]{opacity:.3;cursor:default}

/* ---------- viewer ---------- */
.viewer{margin-top:40px;background:var(--panel2);border-radius:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06)}
.vstage{aspect-ratio:16/9;display:grid;place-items:center;padding:30px}
.vstage svg{width:min(500px,84%);height:auto}
.vtabs{display:flex;justify-content:center;gap:8px;padding:0 18px 20px;flex-wrap:wrap}
.tab{padding:7px 17px;border-radius:980px;font-size:14px;color:var(--muted);background:rgba(255,255,255,.07);transition:.25s}
.tab:hover{background:rgba(255,255,255,.14)}
.tab[aria-selected="true"]{background:#fff;color:#000}
.vcap{text-align:center;padding:0 24px 28px;font-size:13px;color:var(--muted);max-width:600px;
  margin:0 auto;line-height:1.5;min-height:40px}
.vcap b{color:var(--acc);font-weight:600}
.sw{display:flex;gap:11px;justify-content:center;padding:0 18px 22px}
.swb{width:30px;height:30px;border-radius:50%;border:0;outline:1px solid rgba(255,255,255,.22);
  outline-offset:2px;transition:.25s}
.swb[aria-pressed="true"]{outline-color:#fff;outline-width:2px}

/* ---------- shots (white placeholders) ---------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.shot{background:var(--paper2);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.shot .ph{aspect-ratio:4/3;display:grid;place-items:center;background:#fff;position:relative}
.shot .ph svg{width:82%;height:auto}
.shot .meta{padding:18px 20px 22px}
.shot .meta b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.shot .meta span{font-size:13px;color:var(--ink-muted);line-height:1.45}
.ph-tag{position:absolute;left:12px;top:12px;font-size:10px;letter-spacing:.09em;color:#a1a1a6;
  border:1px solid #e3e3e6;border-radius:980px;padding:3px 9px;background:#fff}

/* ---------- logo wall ---------- */
.lwall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:36px}
.lcard{background:var(--paper);border-radius:16px;aspect-ratio:4/3;position:relative;overflow:hidden;
  min-width:0;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.lcard:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.lcard img{position:absolute;left:12%;top:14%;width:76%;height:72%;object-fit:contain}
.lmore{display:flex;justify-content:center;margin-top:30px}
.lbtn{border:1px solid rgba(255,255,255,.28);border-radius:980px;padding:10px 24px;font-size:14px;transition:.25s}
.lbtn:hover{background:rgba(255,255,255,.1)}
.mq{overflow:hidden;margin-top:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:slide 60s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{flex:0 0 172px;height:118px;background:var(--paper);border-radius:14px;display:grid;
  place-items:center;padding:20px}
.mq-item img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.sblock{border-radius:24px;padding:34px 30px;min-height:230px;display:flex;flex-direction:column}
.sblock.bad{background:var(--panel2)}
.sblock.good{background:var(--paper);color:var(--ink)}
.sblock h4{font-size:19px;font-weight:600;margin-bottom:10px}
.sblock p{font-size:15px;line-height:1.5;color:var(--muted)}
.sblock.good p{color:var(--ink-muted)}
.sblock .tagline{font-size:11px;letter-spacing:.1em;margin-bottom:16px;color:var(--muted)}
.sb-art{width:100%;height:auto;margin-top:auto;padding-top:20px;display:block}
.sblock.good .tagline{color:var(--acc)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:var(--panel2);border-radius:22px;padding:28px 26px;min-height:200px;
  display:flex;flex-direction:column;transition:transform .45s var(--ease),background .3s}
a.tile:hover{transform:translateY(-4px);background:#262629}
.tile h4{font-size:16px;font-weight:600;margin-bottom:8px}
.tile p{font-size:14px;color:var(--muted);line-height:1.5}
.tile .num{font-size:15px;font-weight:600;color:var(--acc);margin-bottom:14px;letter-spacing:.04em}
.tile .dur{margin-top:auto;padding-top:14px;font-size:12px;color:rgba(255,255,255,.28)}

/* ---------- stats ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.nums div{border-top:1px solid var(--hair);padding-top:18px}
.nums b{display:block;font-size:clamp(34px,4vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1}
.nums span{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}

/* ---------- tariffs ---------- */
.tar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.tcol{display:flex;flex-direction:column;gap:12px;padding:32px 26px;border-radius:24px;
  background:var(--panel2);text-align:center}
.tcol.now{background:var(--paper);color:var(--ink)}
.tflag{font-size:12px;font-weight:600;color:var(--acc);min-height:16px}
.tcol h4{font-size:22px;font-weight:600;letter-spacing:-.02em}
.tsub{font-size:14px;color:var(--muted);line-height:1.45;min-height:60px}
.tcol.now .tsub,.tcol.now .tspec{color:var(--ink-muted)}
.tprice b{font-size:26px;font-weight:600;display:block;letter-spacing:-.02em;color:var(--text);margin-bottom:2px}
.tprice{font-size:12px;color:var(--muted)}
.tcol.now .tprice{color:var(--ink-muted)}
.tcol.now .tprice b{color:var(--ink)}
.tspec{border-top:1px solid var(--hair);padding-top:14px;margin-top:4px;display:flex;flex-direction:column;
  gap:10px;font-size:13px;color:var(--muted);line-height:1.45;text-align:left}
.tcol.now .tspec{border-color:rgba(0,0,0,.12)}
.tspec strong{display:block;font-weight:600;font-size:14px;color:var(--text)}
.tcol.now .tspec strong{color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--panel);padding:44px 0 36px;font-size:12px;color:var(--muted)}
.fn{max-width:980px;margin:0 auto 32px;padding:0 20px;display:flex;flex-direction:column;gap:8px;line-height:1.42}
.fn li{list-style:none;display:flex;gap:6px}
.fn sup{font-size:10px;line-height:1.7}
.fcols{max-width:980px;margin:0 auto;padding:30px 20px 0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:26px;border-top:1px solid rgba(255,255,255,.12)}
.fcols h5{color:var(--text);font-size:12px;font-weight:600;margin-bottom:11px}
.fcols ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.fcols a:hover{text-decoration:underline;color:var(--text)}
.fbar{max-width:980px;margin:28px auto 0;padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.fbar nav{display:flex;gap:13px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lwall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .gnav ul{display:none}
  .gnav-burger{display:block}
  .shots,.tar,.split,.sh-grid{grid-template-columns:1fr}
  .hero-scroll{height:580vh}
  .hero-foot{flex-direction:column;align-items:stretch;padding-bottom:36px}
  .buybar{justify-content:space-between}
  .fcols{grid-template-columns:1fr 1fr}
  .lwall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet{width:calc(100vw - 20px);max-height:calc(100svh - var(--nav) - 26px);
    border-radius:20px;padding:18px 18px 26px}
  .dock{width:calc(100vw - 20px);padding:8px 8px 8px 16px;top:6px}
  .dock-t{font-size:16px}
}
@media (max-width:560px){
  .tiles,.lwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcard{min-height:380px;padding:26px 22px}
  .gcard p{font-size:19px}.gcard .big{font-size:46px}
  .mq-item{flex:0 0 136px;height:96px;padding:16px}
}

/* ---------- global icons ---------- */
.gnav-ic{display:flex;align-items:center;gap:6px}
.icbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:background .25s}
.icbtn:hover{background:rgba(255,255,255,.12)}
.icbtn svg{width:17px;height:17px;stroke:#f5f5f7;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.burg{width:34px;height:34px;border-radius:50%;position:relative;display:grid;place-items:center}
.burg:hover{background:rgba(255,255,255,.12)}
.burg i{position:absolute;left:10px;width:14px;height:1.5px;background:#f5f5f7;border-radius:2px;
  transition:transform .4s var(--ease),opacity .25s}
.burg i:first-child{transform:translateY(-3.5px)}
.burg i:last-child{transform:translateY(3.5px)}
.burg[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
.burg[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}

/* ---------- mega menu (main) ---------- */
.mega{position:fixed;inset:var(--nav) 0 0 0;z-index:370;background:rgba(10,10,11,.97);
  backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px);
  overflow-y:auto;overscroll-behavior:contain;opacity:0;pointer-events:none;visibility:hidden;
  transform:translateY(-10px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.mega.open{opacity:1;pointer-events:auto;visibility:visible;transform:none}
.mega-in{max-width:1180px;margin:0 auto;padding:36px 24px 80px}
.mega-sec{margin-bottom:44px}
.mega-lab{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-bottom:16px}
.mega-top{display:flex;flex-wrap:wrap;gap:10px 30px;margin-bottom:38px}
.mega-top a{font-size:clamp(26px,3.6vw,44px);font-weight:600;letter-spacing:-.028em;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s}
.mega.open .mega-top a{opacity:1;transform:none}
.mega-top a:hover{color:var(--acc)}
.niches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.niche{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/10;display:flex;
  align-items:flex-end;padding:14px;background:var(--panel2);transition:transform .4s var(--ease)}
.niche:hover{transform:translateY(-4px)}
.niche .im{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;
  transition:opacity .4s,transform .6s var(--ease)}
.niche:hover .im{opacity:.6;transform:scale(1.05)}
.niche .tx{position:relative;z-index:1}
.niche b{display:block;font-size:15px;font-weight:600}
.niche span{font-size:11px;color:rgba(255,255,255,.65)}
.niche .n{position:absolute;right:12px;top:10px;z-index:1;font-size:11px;color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.45);border-radius:980px;padding:2px 8px}
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px}
.mod b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-bottom:10px}
.mod b i{font-style:normal;font-size:11px;color:var(--acc);letter-spacing:.06em}
.mod ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.mod a{font-size:14px;color:rgba(245,245,247,.72)}
.mod a:hover{color:#fff}
.mega-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mcard{background:var(--panel2);border-radius:16px;padding:20px 22px;transition:background .3s,transform .4s var(--ease)}
.mcard:hover{background:#26262a;transform:translateY(-3px)}
.mcard b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.mcard span{font-size:13px;color:var(--muted);line-height:1.45}
.mega-foot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;padding-top:26px;
  border-top:1px solid var(--hair);font-size:14px}
.mega-foot a{color:rgba(245,245,247,.8)}
.mega-foot a:hover{color:#fff}

/* ---------- site footer component ---------- */
.footer-services{background:var(--panel);padding:60px 0 44px}
.fs-inner{max-width:1180px;margin:0 auto;padding:0 24px}
.fs-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.fs-title{font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.024em;color:var(--text)}
.fs-all{color:var(--acc);font-size:14px}
.fs-all:hover{text-decoration:underline}
.fs-feat{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.fs-feat__label{font-size:12px;color:var(--muted);align-self:center;margin-right:6px}
.fs-feat__link{font-size:13px;border:1px solid rgba(255,255,255,.18);border-radius:980px;
  padding:6px 14px;color:rgba(245,245,247,.85);transition:.25s}
.fs-feat__link:hover{background:rgba(255,255,255,.1);color:#fff}
.fs-feat__link.is-artos{border-color:rgba(254,74,35,.5);color:#fff}
.fs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px;
  padding-bottom:34px;border-bottom:1px solid var(--hair)}
.fs-block__h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.fs-block__ic{width:26px;height:26px;flex:0 0 26px}
.fs-block__ic svg{width:100%;height:100%}
.fs-block__n{font-size:11px;color:var(--acc);letter-spacing:.06em}
.fs-block__t{font-size:15px;font-weight:600;color:var(--text)}
.fs-block__d{display:block;font-size:12px;color:var(--muted);margin-bottom:11px;line-height:1.45}
.fs-block ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.fs-block a{font-size:13.5px;color:rgba(245,245,247,.7)}
.fs-block a:hover{color:#fff}
.fs-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:30px 0;
  border-bottom:1px solid var(--hair)}
.fs-nav__col{display:flex;flex-direction:column;gap:8px}
.fs-nav__col b{font-size:12px;color:var(--text);margin-bottom:3px}
.fs-nav__col a{font-size:13.5px;color:rgba(245,245,247,.7)}
.fs-nav__col a:hover{color:#fff}
.fs-legal{padding-top:22px}
.fs-legal__fine{font-size:12px;color:rgba(255,255,255,.38);line-height:1.6}
@media (max-width:900px){
  .niches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mods,.mega-cards,.fs-grid,.fs-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mods,.mega-cards,.fs-grid,.fs-nav{grid-template-columns:1fr}
  .mega-in{padding:26px 20px 70px}
}


/* ---------- stats + specs ---------- */
.stats{display:grid;grid-template-columns:280px 1px minmax(0,1fr);gap:52px;margin:70px auto 0;
  max-width:960px;align-items:start}
.stat+.stat{margin-top:34px}
.ssm{font-size:12px;color:var(--muted);line-height:1.35}
.sbig{font-size:clamp(40px,4.4vw,54px);line-height:1.05;font-weight:600;letter-spacing:-.03em;margin:2px 0 4px}
.rule{background:var(--hair)}
.specs{display:flex;flex-direction:column;gap:22px}
.spt{font-size:14px;font-weight:600;line-height:1.35}
.spd{font-size:12px;color:var(--muted);line-height:1.5;margin-top:5px}
/* ---------- figure / two-col / panel ---------- */
.fig{margin:52px auto 0;max-width:980px}
.fig svg{width:100%;height:auto;border-radius:22px;background:var(--panel2);border:1px solid rgba(255,255,255,.06)}
.twocol{display:grid;grid-template-columns:280px minmax(0,1fr);gap:52px;max-width:960px;margin:46px auto 0;align-items:start}
.twocol p{font-size:14px;line-height:1.55;color:var(--muted)}
.twocol p b{color:var(--text);font-weight:600}
.panel{background:var(--panel2);border-radius:26px;padding:52px 46px;max-width:980px;margin:76px auto 0}
.pico{font-size:34px;text-align:center;line-height:1;margin-bottom:18px;color:var(--acc)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;margin-top:36px}
/* ---------- upgrader ---------- */
.upg{background:var(--panel2);border-radius:26px;padding:52px 46px;max-width:980px;margin:0 auto}
.utop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start}
.usel label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.usel select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--text);
  border-radius:12px;padding:10px 38px 10px 14px;font-size:14px;min-width:240px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 18px,calc(100% - 15px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.unote{font-size:14px;color:var(--muted);margin:20px 0}
.unote b{color:var(--text);font-weight:600}
.ugrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ucell{background:var(--panel);border-radius:18px;padding:24px 18px;min-height:168px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px}
.ucell .t{font-size:13px;color:var(--muted);line-height:1.4}
.ucell .v{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.05}
.ucell .v b{color:var(--acc);font-weight:600}
.ufoot{text-align:center;margin-top:32px}
.ufoot .fl{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.ufoot p{font-size:14px;color:var(--muted);margin-bottom:10px}

.fhead{background:var(--panel2);border-radius:26px;padding:46px 40px}
.flist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px;margin-top:40px}
.fitem{font-size:14px;line-height:1.55;color:var(--muted)}
.fitem b{color:var(--text);font-weight:600}
@media (max-width:900px){
  .stats,.twocol,.pgrid,.utop{grid-template-columns:1fr;gap:26px}
  .rule{height:1px;width:100%}
  .ugrid,.flist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel,.upg,.fhead{padding:34px 24px}
}
@media (max-width:560px){ .ugrid,.flist{grid-template-columns:1fr} }


/* ---------- process: таймлайн-ганта ---------- */
.gantt{background:var(--panel2);border-radius:26px;padding:clamp(24px,3vw,38px);
  border:1px solid rgba(255,255,255,.05)}
.gt-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vh,34px)}
.gt-sum{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--muted)}
.gt-sum b{font-size:34px;font-weight:600;color:var(--text);letter-spacing:-.03em;line-height:1}
.gt-scale{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:end;
  padding-bottom:10px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.gt-weeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.gt-weeks span{font-size:11px;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;
  padding-bottom:6px;border-left:1px solid var(--hair);padding-left:12px}
.gt-weeks span:first-child{border-left:0;padding-left:0}
.gt-rows{position:relative;display:flex;flex-direction:column}
.gt-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.gt-row:last-child{border-bottom:0}
.gt-lab b{display:block;font-size:15px;font-weight:600;letter-spacing:-.012em}
.gt-lab span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.gt-track{position:relative;height:38px;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/33.333% 100%,
             rgba(255,255,255,.03)}
.gt-track::after{content:"";position:absolute;inset:0;border-radius:10px;
  border:1px solid rgba(255,255,255,.05)}
.gt-bar{position:absolute;left:var(--g0);width:var(--gw);top:50%;margin-top:-19px;
  height:38px;border-radius:10px;display:flex;align-items:center;padding:0 14px;
  background:linear-gradient(90deg,rgba(254,74,35,.92),rgba(254,74,35,.6));
  box-shadow:0 10px 28px rgba(254,74,35,.28);overflow:hidden;white-space:nowrap;
  transform-origin:left center;transform:scaleX(0);
  transition:transform .95s var(--ease)}
.gt-bar.grow{transform:scaleX(1)}
.gt-bar i{font-style:normal;font-size:12px;font-weight:600;color:#fff;position:relative;z-index:1}
.gt-bar::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px);
  opacity:.5}
.gt-mile{position:absolute;left:var(--gm);top:50%;width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);background:#0e0e10;border:2.5px solid var(--acc);z-index:3}
.gt-mile::before{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(254,74,35,.35)}
.gt-row.is-done .gt-mile{background:var(--acc)}
@media (prefers-reduced-motion:reduce){ .gt-bar{transform:none;transition:none} }
@media (max-width:820px){
  .gt-scale{display:none}
  .gt-row{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .gt-lab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .gt-lab span{margin-top:0}
  .gt-track{height:34px}
  .gt-bar{height:34px;padding:0 12px}
  .gt-bar i{font-size:11.5px}
  .gt-sum b{font-size:28px}
}
/* ---------- app tiles ---------- */
.apps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:34px}
.app{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mega.open .app{opacity:1;transform:none}
.app-ic{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;
  background:linear-gradient(160deg,#2c2c31,#17171a);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .35s var(--ease)}
.app:hover .app-ic{transform:translateY(-4px) scale(1.04)}
.app-ic svg{width:30px;height:30px;stroke:#f5f5f7;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.app-ic .acc-fill{fill:var(--acc);stroke:none}
.app b{font-size:13px;font-weight:500;color:rgba(245,245,247,.9)}

/* ---------- menu accordion ---------- */
.amenu{border-top:1px solid var(--hair)}
.arow-m{border-bottom:1px solid var(--hair)}
.am-btn{width:100%;display:flex;align-items:center;gap:13px;padding:15px 2px;text-align:left;
  font-size:16px;font-weight:600;letter-spacing:-.012em}
.am-ic{flex:0 0 34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
.am-ic svg{width:22px;height:22px;color:rgba(245,245,247,.85)}
.am-ic svg.mi{width:24px;height:24px}
.am-n{font-size:11px;color:var(--acc);letter-spacing:.06em;margin-left:2px;min-width:18px}
.am-ch{margin-left:auto;width:9px;height:9px;border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .35s var(--ease)}
.am-btn[aria-expanded="true"] .am-ch{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--acc)}
.am-pan{overflow:hidden;height:0;transition:height .42s var(--ease)}
.am-in{padding:2px 0 20px 47px}
.am-links{display:flex;flex-direction:column;gap:9px}
.am-links a{font-size:14px;color:rgba(245,245,247,.72)}
.am-links a:hover{color:#fff}
.mega-lab{font-size:12px;color:var(--muted);letter-spacing:.06em;margin:26px 0 10px}
@media (max-width:820px){ .apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (max-width:420px){ .app-ic{width:56px;height:56px;border-radius:15px} .app b{font-size:12px} }


/* ---------- contact bar ---------- */
.cbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cb{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 11px;border-radius:980px;
  font-size:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  color:rgba(245,245,247,.9);transition:background .25s,transform .25s,border-color .25s}
.cb:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);color:#fff}
.cb-ic{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}
.cb-ic svg{width:18px;height:18px;color:rgba(245,245,247,.8)}
.cb-main{background:var(--acc);border-color:transparent;color:#fff;font-weight:500}
.cb-main:hover{background:#e8411c;color:#fff}
.cb-main .cb-ic svg{color:#fff}
@media (max-width:560px){ .cb{font-size:13px;padding:8px 13px 8px 9px} }

/* ---------- module card icons ---------- */
.mcard{display:flex;gap:12px;align-items:flex-start}
.mc-ic{flex:0 0 32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
.mc-ic svg{width:19px;height:19px;color:rgba(245,245,247,.85)}
.mc-tx{min-width:0}
.am-in-flush{padding-left:0;padding-bottom:6px}
.am-in-flush .amenu{border-top:0}

/* ---------- footer accordion (mobile) ---------- */
.fs-block__h{width:100%;text-align:left}
.fs-ch{display:none;margin-left:auto;width:8px;height:8px;border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease)}
@media (max-width:820px){
  .fs-grid,.fs-nav{gap:0}
  .fs-grid{padding-bottom:0;border-bottom:0}
  .fs-nav{padding:0 0 8px}
  .fs-legal{padding-top:16px}
  .fs-block,.fs-nav__col{border-bottom:1px solid var(--hair);padding:14px 0}
  .fs-block__h,.fs-nav__col>b{display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:0}
  .fs-ch{display:block}
  .fs-block__d{display:none}
  .fs-nav__col{gap:0}
  .fs-block ul{gap:0}
  .fs-block.is-open ul{gap:6px}
  .fs-nav__col.is-open{gap:8px}
  .fs-block ul,.fs-nav__col a{max-height:0;overflow:hidden;opacity:0;
    transition:max-height .4s var(--ease),opacity .3s,margin .3s}
  /* Ссылки-колонки не схлопывались одним max-height:0: у них
     min-height:auto как у flex-элементов, и высота оставалась 16px.
     Внизу страницы из-за этого оставалось ~240px пустого фона. */
  .fs-nav__col:not(.is-open) a{height:0;min-height:0;padding:0;margin:0;border:0}
  .fs-nav__col.is-open a{height:auto}
  .fs-block.is-open .fs-block__d{display:block;margin-top:9px}
  .fs-block.is-open ul,.fs-nav__col.is-open a{max-height:420px;opacity:1}
  .fs-block.is-open ul{margin-top:11px}
  .fs-nav__col.is-open a{margin-top:2px}
  .fs-block.is-open .fs-ch,.fs-nav__col.is-open .fs-ch{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--acc)}
}


/* ---------- audit button ---------- */
.cb-audit{display:flex;align-items:center;gap:13px;width:100%;padding:15px 18px;border-radius:18px;
  background:var(--acc);color:#fff;margin-bottom:24px;transition:filter .25s,transform .25s}
.cb-audit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cb-audit .cb-ic{width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center}
.cb-audit .cb-ic svg{width:20px;height:20px;color:#fff}
.cb-audit>span{display:flex;flex-direction:column;gap:2px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.cb-audit em{font-style:normal;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.82)}
.cb-go{margin-left:auto;width:9px;height:9px;border-right:1.8px solid #fff;border-bottom:1.8px solid #fff;
  transform:rotate(-45deg)}
.cbar{margin-top:4px}


/* ---------- file archive (visual) ---------- */
.files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:44px}
.file{background:var(--paper);border-radius:20px;color:var(--ink);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.file:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.file-ic{position:relative}
.file-ic svg{width:100%;height:100%}
.file-ext{font-size:15px;font-weight:700;letter-spacing:-.01em}
.file-d{font-size:12.5px;line-height:1.4;color:var(--ink-muted)}
.file-sz{font-size:11px;color:#a1a1a6}

/* ---------- packet cards (Apple style) ---------- */
.packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.pack{background:var(--paper);color:var(--ink);border-radius:22px;padding:26px 24px 22px;
  display:flex;flex-direction:column;min-height:400px;position:relative;overflow:hidden}
.pack-eye{font-size:13px;color:var(--ink-muted);margin-bottom:8px}
.pack h4{font-size:clamp(20px,1.7vw,25px);font-weight:600;letter-spacing:-.022em;line-height:1.12;margin-bottom:10px}
.pack p{font-size:13.5px;line-height:1.5;color:var(--ink-muted)}
.pack-art{margin-top:auto;padding-top:18px}
.pack-art svg{width:100%;height:auto;display:block}
.pack-go{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;
  background:#e8e8ed;display:grid;place-items:center;color:#1d1d1f;font-size:17px;line-height:1;
  transition:background .25s,transform .25s}
.pack:hover .pack-go{background:var(--acc);color:#fff;transform:scale(1.08)}

/* ---------- spec rows in tariffs ---------- */
.tspec{gap:0}
.trow{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--hair)}
.trow:first-child{border-top:0}
.tcol.now .trow{border-color:rgba(0,0,0,.1)}
.trow-ic{flex:0 0 22px;height:22px;display:grid;place-items:center;margin-top:1px}
.trow-ic svg{width:19px;height:19px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tcol.now .trow-ic svg{color:var(--ink-muted)}
.trow b{display:block;font-weight:600;font-size:13.5px;color:var(--text)}
.tcol.now .trow b{color:var(--ink)}
.trow span{font-size:12px;color:var(--muted);line-height:1.4}
.tcol.now .trow span{color:var(--ink-muted)}
.trow.off{opacity:.42}

@media (max-width:900px){ .packs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .packs{grid-template-columns:1fr} }


/* ---------- photo blocks ---------- */
.shot .ph{padding:0}
.shot .ph img{width:100%;height:100%;object-fit:cover}
.ucell{padding:0;overflow:hidden;gap:0;justify-content:flex-start}
.ucell-img{width:100%;aspect-ratio:1;overflow:hidden;background:#0c0c0e;display:block}
.ucell-img svg{width:100%;height:100%;display:block}
.ucell-img img{width:100%;height:100%;object-fit:cover;display:block}
.ucell-tx{padding:18px 18px 22px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.about{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;text-align:left}
.about-tx .lead{margin-top:16px;max-width:560px}
.about-ph{border-radius:24px;overflow:hidden;aspect-ratio:1;background:var(--panel2)}
.about-ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){ .about{grid-template-columns:1fr;gap:26px} .about-ph{max-width:260px} }

/* ---------- why me: фото + раскрытые плитки (премиальный блок) ---------- */
.why{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.why-id{position:relative}
.why-ph{position:relative;border-radius:24px;overflow:hidden;background:#0e0e10;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.why-ph img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 32%;
  filter:grayscale(1) contrast(1.04)}
.why-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(8,8,9,.9) 100%)}
.why-ph-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px}
.why-ph-cap b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.why-ph-cap span{display:block;font-size:12.5px;color:rgba(245,245,247,.6);letter-spacing:.03em;margin-top:3px}
.why-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.why-nums div{background:var(--panel2);border-radius:16px;padding:18px 18px 16px}
.why-nums b{display:block;font-size:clamp(26px,2.5vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1}
.why-nums span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:7px}
.why-tx .lead{margin-top:14px;max-width:62ch}
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.why-card{background:var(--panel2);border-radius:18px;padding:22px 22px 20px;
  border:1px solid rgba(255,255,255,.05);transition:background .35s var(--ease),transform .35s var(--ease)}
.why-card:hover{background:#202024;transform:translateY(-2px)}
.why-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(254,74,35,.12);color:var(--acc);margin-bottom:14px}
.why-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.why-card h4{font-size:15px;font-weight:600;letter-spacing:-.012em;margin-bottom:7px}
.why-card p{font-size:13px;line-height:1.55;color:var(--muted)}
.why-card p b{color:var(--text);font-weight:600}
@media (max-width:980px){
  .why{grid-template-columns:1fr;gap:26px}
  .why-ph{max-width:340px;margin:0 auto}
  .why-ph-cap{text-align:center}
}
@media (max-width:620px){ .why-grid{grid-template-columns:1fr} }

/* ---------- before / after ---------- */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  padding:0 var(--gut) 8px}
.bacard{background:var(--panel2);border-radius:26px;
  display:flex;flex-direction:column;gap:14px}
.ba-eye{font-size:12.5px;color:var(--acc);letter-spacing:.05em}
.bacard h4{font-size:clamp(21px,2vw,26px);font-weight:600;letter-spacing:-.02em}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
.ba-cell{border-radius:16px;padding:16px 17px;font-size:14px;line-height:1.5}
.ba-was{background:rgba(255,255,255,.05);color:var(--muted)}
.ba-now{background:rgba(254,74,35,.1);color:var(--text)}
.ba-cell b{display:block;font-size:11px;letter-spacing:.07em;margin-bottom:7px;color:var(--muted)}
.ba-now b{color:var(--acc)}
.ba-res{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:12px;
  border-top:1px solid var(--hair);font-size:13px}
.ba-res span{color:var(--muted)}
.ba-res i{font-style:normal;color:var(--acc)}
/* последняя карточка занимает обе колонки — чтобы не оставался «хвост» */
.bacard.ba-wide{grid-column:1 / -1}
@media (max-width:900px){
  .ba{grid-template-columns:1fr;gap:16px}
  .ba-pair{grid-template-columns:1fr}
  .bacard.ba-wide{grid-column:auto}
}

/* ---------- pack module icon ---------- */
.pack-ic{width:38px;height:38px;border-radius:12px;background:#f2f2f4;display:grid;place-items:center;
  margin-bottom:14px}
.pack-ic svg{width:26px;height:26px;color:#1d1d1f}
.pack-ic svg.mi{width:28px;height:28px}


/* ---------- before / after logo pairs ---------- */
.bacard{padding:0;overflow:hidden;gap:0}
.ba-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.08)}
.ba-slot{background:var(--paper);aspect-ratio:4/3;display:grid;place-items:center;padding:11%;
  position:relative}
.ba-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;
  -webkit-user-drag:none}
.ba-slot.empty{background:#e9e9ee}
.ba-slot .tag{position:absolute;left:12px;top:12px;font-size:10.5px;letter-spacing:.09em;
  color:#5a5a5f;background:rgba(240,240,242,.95);border:1px solid rgba(0,0,0,.14);
  border-radius:980px;padding:3px 10px;font-weight:600}
.ba-slot.new .tag{color:#fff;background:var(--acc);border-color:transparent}
.ba-slot .hint{font-size:11px;color:#a1a1a6;text-align:center;line-height:1.4}
.ba-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:11px;flex:1}


/* ---------- ART-OS chip ---------- */
.artos-sec{background:var(--black)}
.artos-head{max-width:1500px;margin:0 auto clamp(28px,4.5vh,56px);padding:0 var(--gut);
  display:flex;flex-direction:column;gap:12px}
.artos-head .h2{max-width:22ch}
.chipwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,90px);
  align-items:center;margin:clamp(32px,5vh,64px) 0 clamp(48px,7vh,90px)}
.chip{position:relative;width:100%;max-width:640px;margin:0 auto;background:none;
  filter:none}
.chip-plat{display:block;width:100%;height:auto;position:relative;z-index:1;
  mix-blend-mode:screen;border-radius:0}
.chip-m{position:absolute;z-index:2;left:var(--l);top:var(--t);width:var(--w);height:auto;
  opacity:0;transform:translateY(-42px) scale(1.12);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.7));
  transition:opacity .5s var(--ease),transform .72s var(--ease),filter .4s ease}
.chip-m.on{opacity:1;transform:none}
.chip-m.dim{opacity:.34;filter:grayscale(.75) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.chip-lid{position:absolute;z-index:3;left:22.7%;top:1.6%;width:66.6%;height:auto;
  opacity:0;transform:translateY(-96px) scale(1.045);
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.85));
  transition:opacity .5s ease,transform .9s var(--ease)}
.chip-lid.on{opacity:1;transform:none}
.chip-bolt{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:4;
  mix-blend-mode:screen;pointer-events:none;opacity:.9}
.chip-legend{list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:m}
.chip-li{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  cursor:default}
.chip-li.is-now{background:rgba(254,74,35,.1)}
.chip-ic{flex:0 0 26px;height:26px;display:grid;place-items:center;color:rgba(245,245,247,.75)}
.chip-ic svg{width:22px;height:22px}
.chip-ic svg.mi{width:24px;height:24px}
.chip-n{font-size:11px;color:var(--muted);letter-spacing:.06em;min-width:18px}
.chip-li.is-now .chip-n{color:var(--acc)}
.chip-t{font-size:14.5px;color:rgba(245,245,247,.82)}
.chip-li em{margin-left:auto;font-style:normal;font-size:11px;color:var(--acc);
  border:1px solid rgba(254,74,35,.4);border-radius:980px;padding:2px 9px;white-space:nowrap}
@media (max-width:900px){
  .chipwrap{grid-template-columns:1fr;gap:clamp(52px,8vh,90px)}
  .chip{max-width:420px}
  .chip-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .chip-li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;
    background:var(--panel2);border-radius:14px;min-height:112px}
  .chip-li.is-now{background:rgba(254,74,35,.12);outline:1px solid rgba(254,74,35,.3)}
  .chip-t{font-size:12.5px;line-height:1.3}
  .chip-li em{margin-left:0;font-size:10px;padding:1px 7px}
}
@media (max-width:430px){ .chip-legend{grid-template-columns:repeat(2,minmax(0,1fr))} }


/* ---------- archive animation ---------- */
.arch{height:340vh;position:relative}
.arch-pin{position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
@media (max-width:860px){
  .arch-pin{justify-content:flex-start;padding-top:calc(var(--nav) + 34px)}
  /* на мобильном сетку сжимаем: иначе крайние колонки уезжают за экран */
  .arch-stage{margin-top:10px}
  .arch-box{transform:translateY(2svh)}
  .af{width:calc(var(--afw,15)*1cqw);z-index:var(--z,6)}
  .af.is-book{width:auto;height:calc(var(--afw,15) * 1.554cqh)}
  .af.is-in{z-index:0}
  .folder{z-index:5}
}
.arch-head{position:relative;z-index:9;padding:0 var(--gut);margin-bottom:clamp(8px,2vh,26px);flex:0 0 auto;
  max-width:1320px;margin-left:auto;margin-right:auto;text-align:center}
.arch-head .h2{margin:0 auto;font-size:clamp(34px,4.6vw,74px);line-height:1.03;letter-spacing:-.02em}
.arch-head .eye{margin-bottom:14px}
.arch-sub{max-width:56ch;margin:clamp(14px,2.2vh,22px) auto 0;
  font-size:clamp(13px,1.05vw,15px);line-height:1.5;color:var(--muted)}
.arch-sub b{color:var(--text);font-weight:600}
.arch-rules{display:none}
.arch-stage{position:relative;display:grid;place-items:center;padding:0 var(--gut);flex:1 1 auto;min-height:0;z-index:1}
.arch-box{position:relative;width:min(1280px,94vw,66svh);aspect-ratio:1/0.8;margin:0 auto;
  container-type:size;container-name:archbox;
  /* масштаб сетки стартовой раскладки файлов (сжимается на узких экранах) */
  --side:14.5; --colgap:34; --rowgap:22; --topy:-46; --topgap:15;
  /* ряд файлов над папкой: ширина листа, шаг и высота ряда */
  --afw:12.4; --afgap:4.2; --afy:-40}
@media (max-width:860px){
  .arch-head{position:relative;z-index:12;text-align:left;padding-top:8px}
  .arch-head .h2{font-size:clamp(28px,8.4vw,44px)}
  .arch-head .eye{margin-bottom:10px}
  .arch-sub{font-size:12.5px;max-width:none;
    text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.95)}
  /* компактная сетка: крайние колонки не выходят за экран телефона.
     Базовое правило .arch-box объявлено выше — здесь оно корректно перекрывает */
  .arch-box{width:min(560px,92vw,58svh);
    --side:5.6; --colgap:30; --rowgap:52; --topy:-64; --topgap:34;
    --afw:15; --afgap:4.1; --afy:-36}
}
/* Лист стал крупнее: в прежнем размере формат на язычке не читался.
   Порядок перекрытия в ряду задаёт --z — первый лист лежит сверху,
   и каждый следующий открывается целиком, когда предыдущий улетел. */
.af{position:absolute;left:50%;top:50%;width:calc(var(--afw,11.5)*1cqw);z-index:var(--z,6);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));
  transform:translate3d(-50%,-50%,0) translate(calc(var(--x)*1cqw),calc(var(--y)*1cqh)) rotate(var(--r)) scale(var(--s,1));
  backface-visibility:hidden}
.af.is-in{z-index:4}
.arch-stage.play .af,.arch-stage.play .folder,.arch-stage.play .book,.arch-stage.play .pdf{will-change:transform,opacity;backface-visibility:hidden}
.af svg{width:100%;height:auto;display:block}
/* Лист логобука (21-й файл и финальный PDF): лист ровно во всю высоту папки,
   а плашка PDF — по центру листа, а не прижатая к нижнему краю. */
.af.is-book{width:auto;height:calc(var(--afw,11.5) * 1.554cqh);aspect-ratio:74/92;z-index:var(--z,7);
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.6))}
.af.is-book .af-b{position:relative;display:block;width:100%;height:100%}
.af.is-book svg{position:absolute;inset:0;width:100%;height:100%}
.af.is-book .af-badge{position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none}
.af.is-book .af-badge b{display:inline-block;white-space:nowrap;background:#d0342c;color:#fff;border-radius:9px;
  padding:7px 16px;font-size:clamp(13px,1.35cqw,21px);font-weight:700;letter-spacing:.06em;
  box-shadow:0 8px 22px rgba(208,52,44,.45)}
.arch-files{position:absolute;inset:0;pointer-events:none}
/* Папка строго по центру сцены: система координат та же, что у файлов
   (left/top 50% + translate -50/-50). Сдвиг вверх задаётся переменной
   --fy, чтобы над папкой поместился осевой ряд файлов. */
.folder{position:absolute;left:50%;top:50%;width:46%;z-index:5;
  --fy:-9%;
  transform:translate3d(-50%,calc(-50% + var(--fy)),0);transition:transform .3s var(--ease)}
.folder svg{width:100%;height:auto;display:block}
.folder-count{text-align:center;font-size:13px;color:var(--muted);margin-bottom:10px}
.folder-count b{color:var(--text);font-weight:600}
.book{position:absolute;left:50%;top:50%;width:66%;transform:translate3d(-50%,-50%,0) scale(.9);
  opacity:0;z-index:6;transition:opacity .35s ease}
.book svg{width:100%;height:auto;display:block}
/* Финальный лист PDF: ровно во всю высоту папки, по центру сцены —
   и по горизонтали, и по вертикали. Пропорция и размер подгоняются
   в JS (fitPdf) по реальной геометрии папки на сцене. */
.pdf{position:absolute;left:50%;top:50%;width:auto;height:auto;aspect-ratio:74/92;
  transform:translate3d(-50%,-50%,0) scale(.85);
  opacity:0;z-index:7;transition:opacity .35s ease;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.65))}
.pdf .pdf-s{position:relative;display:block;width:100%;height:100%}
.pdf .pdf-s svg{position:absolute;inset:0;width:100%;height:100%;filter:none}
.pdf .pdf-b{position:absolute;left:0;right:0;top:54%;transform:translateY(-50%);
  display:grid;place-items:center;pointer-events:none}
.pdf .pdf-b b{display:inline-block;white-space:nowrap;background:#d0342c;color:#fff;border-radius:11px;padding:9px 22px;
  font-size:clamp(15px,1.6vw,26px);font-weight:700;letter-spacing:.07em;
  box-shadow:0 10px 26px rgba(208,52,44,.5)}
.pdf .pdf-b i{display:block;margin-top:9px;font-style:normal;text-align:center;white-space:nowrap;
  font-size:clamp(10px,1vw,14px);color:#8a8a8f;letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(255,255,255,.95)}
.arch-cap{position:relative;z-index:9;text-align:center;padding:0 var(--gut) 26px;font-size:14px;color:var(--muted);min-height:44px;
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 26px rgba(0,0,0,.9)}
.arch-cap b{color:var(--text);font-weight:600}
.arch-steps{position:relative;z-index:9;display:flex;gap:8px;justify-content:center;padding-bottom:18px}
.arch-dot{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .3s}
.arch-dot.on{background:var(--acc)}

/* ---------- logobook pages ---------- */
.pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.page{background:var(--paper);border-radius:18px;overflow:hidden;color:var(--ink);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.page:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.page-art{aspect-ratio:4/3;background:#f6f6f8;display:block}
.page-art svg{width:100%;height:100%;display:block}
.page-tx{padding:16px 18px 20px}
.page-tx b{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.page-tx span{font-size:13px;color:var(--ink-muted);line-height:1.45}

/* ---------- destinations ---------- */
.dest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.dcard{background:var(--panel2);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.dcard .dic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);
  display:grid;place-items:center}
.dcard .dic svg{width:22px;height:22px;fill:none;stroke:rgba(245,245,247,.85);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.dcard b{font-size:16px;font-weight:600}
.dcard p{font-size:13.5px;color:var(--muted);line-height:1.5}
.dfmt{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.dfmt span{font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff;border-radius:6px;padding:3px 8px}

/* ---------- pack composition ---------- */
.pack-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pack-list span{font-size:11.5px;color:var(--ink-muted);background:#f2f2f4;border-radius:980px;padding:4px 10px}
@media (max-width:900px){ .pages,.dest{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .pages,.dest{grid-template-columns:1fr}
  /* «После сдачи» — горизонтальная лента, но с нормальным отступом от заголовка */
  .dest{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;
    padding:0 var(--gut) 12px;margin:32px calc(-1 * var(--gut)) 0;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;touch-action:pan-x pan-y}
  .dest::-webkit-scrollbar{display:none}
  .dcard{flex:0 0 min(300px,80vw);scroll-snap-align:center}
  /* «Знак — начало» — тоже лента, с таким же отступом от вводного текста */
  .tiles{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;
    padding:0 var(--gut) 12px;margin:32px calc(-1 * var(--gut)) 0;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;touch-action:pan-x pan-y}
  .tiles::-webkit-scrollbar{display:none}
  .tile{flex:0 0 min(300px,80vw);scroll-snap-align:center}
}



/* ---------- merged file cards ---------- */
/* раскладка переопределена ниже: 5 колонок, логобук занимает пятую на два ряда */
.files{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.file{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:
    "ic ext" "ic d" "sz sz" "go go";column-gap:16px;row-gap:3px;
  padding:20px 20px 18px;text-align:left;align-items:start;height:100%;position:relative;overflow:hidden}
.file-ic{grid-area:ic;width:46px;height:57px;align-self:center}
.file-ext{grid-area:ext;align-self:end;font-size:16px;padding-right:74px}
.file-d{grid-area:d;align-self:start;min-height:0;font-size:12.5px}
.file-sz{position:absolute;top:14px;right:14px;z-index:2;font-size:11px;font-weight:600;
  letter-spacing:.01em;color:var(--ink);background:#f2f2f4;border-radius:980px;padding:5px 11px;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset,0 4px 14px rgba(0,0,0,.1);white-space:nowrap}
.file-sz::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--acc);margin-right:6px;vertical-align:1px}
.file-go{grid-area:go;display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-start;
  align-self:end;margin-top:auto;padding-top:12px;border-top:1px solid #ececef;width:100%}
.file-go span{font-size:11px;color:var(--ink-muted);background:#f2f2f4;border-radius:980px;padding:3px 9px}
.files-count{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:28px auto 0;
  color:var(--muted);font-size:13px;line-height:1.4}
.files-count b{color:var(--text);font-size:16px;font-weight:600}
@media (max-width:1180px){ .files{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .files{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  /* файлы идут последовательно: без горизонтального скролла и обрезанных карточек */
  .files{display:grid;grid-template-columns:1fr;gap:16px;overflow:visible;
    padding:0;margin-top:32px;touch-action:auto}
  .file{padding:20px 18px 18px}
}

/* ---------- accessory graphic ---------- */
.tile-brand{background:var(--paper);color:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;height:100%}
.tile-brand h4{color:var(--ink)}
.tile-brand p{color:var(--ink-muted)}
a.tile-brand:hover{background:#fff}
.tile-art{display:block;aspect-ratio:1/1;margin:0 0 18px;overflow:hidden;border-radius:14px;background:none}
.tile-art svg{display:block;width:100%;height:100%}
.tile-price{display:inline-flex;align-items:center;align-self:flex-start;margin-top:auto;
  border:1px solid rgba(254,74,35,.34);border-radius:980px;padding:5px 10px;
  color:var(--acc);font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1;
  background:rgba(254,74,35,.06)}


/* ---------- logobook: cover + 3D book ---------- */
.lbwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:center;margin-top:40px}
.cover{display:block;position:relative;width:100%;max-width:520px;aspect-ratio:1.42/1;
  perspective:1400px;cursor:pointer;background:none;padding:0;border:0;justify-self:center;
  text-align:left;font:inherit;color:inherit}
.cover-in{display:block;position:absolute;inset:0;border-radius:6px 14px 14px 6px;overflow:hidden;
  background:linear-gradient(135deg,#232327 0%,#141416 60%,#1c1c1f 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.07);
  transform:rotateY(-14deg) rotateX(3deg);transform-origin:left center;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cover:hover .cover-in{transform:rotateY(-6deg) rotateX(1deg);box-shadow:0 38px 90px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.1)}
.cover-spine{position:absolute;left:0;top:0;bottom:0;width:22px;
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(255,255,255,.06) 60%,rgba(0,0,0,.35));z-index:2}
.cover-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 10% 0 16%;gap:14px}
.cover-mark{width:76px;height:auto;display:block}

.cover-body b{display:block;font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.024em}
.cover-body span{display:block;font-size:13px;color:var(--muted);max-width:280px}

.cover-pdf{display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:99px;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--acc);background:rgba(254,74,35,.12);
  border:1px solid rgba(254,74,35,.28);max-width:none}
.cover-body .cover-pdf{align-self:flex-start;margin-top:4px}
.cover-open{position:absolute;right:20px;bottom:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:rgba(245,245,247,.75);z-index:3}
.cover-open i{width:26px;height:26px;border-radius:50%;background:var(--acc);display:grid;place-items:center;
  font-style:normal;color:#fff;font-size:13px}
.lb-toc{list-style:none;display:flex;flex-direction:column;gap:2px}
.lb-toc li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  font-size:14.5px;color:rgba(245,245,247,.8);cursor:pointer;transition:background .25s}
.lb-toc li:hover{background:rgba(255,255,255,.06);color:#fff}
.lb-toc b{font-size:11px;color:var(--muted);min-width:20px;font-weight:400}
.lb-toc li:hover b{color:var(--acc)}

.bookv{position:fixed;inset:0;z-index:420;background:rgba(6,6,7,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  display:flex;flex-direction:column}
.bookv.open{opacity:1;visibility:visible}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,40px);flex:0 0 auto;touch-action:manipulation}
.bk-ttl{font-size:14px;font-weight:600}
.bk-ttl span{color:var(--muted);font-weight:400;margin-left:10px}
.bk-x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;
  font-size:16px;transition:background .25s}
.bk-x:hover{background:rgba(255,255,255,.2)}
.bk-stage{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:0 clamp(12px,3vw,40px);
  perspective:2200px;touch-action:pan-y}
.book3d{position:relative;width:min(1100px,94vw);aspect-ratio:1.62/1;max-height:100%;
  transform-style:preserve-3d;transition:transform .7s var(--ease)}
.bk-page{position:absolute;top:0;height:100%;width:50%;overflow:hidden;background:#fff;color:var(--ink)}
.bk-left{left:0;border-radius:12px 2px 2px 12px;box-shadow:inset -22px 0 30px -26px rgba(0,0,0,.6)}
.bk-right{left:50%;border-radius:2px 12px 12px 2px;box-shadow:inset 22px 0 30px -26px rgba(0,0,0,.6)}
.bk-pad{padding:clamp(18px,3.2vw,44px);height:100%;display:flex;flex-direction:column}
.bk-art{flex:1;display:grid;place-items:center;min-height:0}
.bk-art svg{width:100%;height:auto;max-height:100%}
.bk-cap{font-size:12px;color:#a1a1a6;text-align:center;padding-top:10px}
.bk-right h3{font-size:clamp(20px,2.3vw,30px);font-weight:600;letter-spacing:-.022em;margin-bottom:10px}
.bk-right p{font-size:14.5px;color:var(--ink-muted);line-height:1.55;margin-bottom:16px}
.bk-right ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.bk-right li{display:flex;gap:9px;font-size:13.5px;color:#3a3a3e;line-height:1.5}
.bk-right li::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;background:var(--acc);margin-top:7px}
.bk-num{margin-top:auto;padding-top:14px;font-size:11px;color:#b9b9c0;text-align:right}
.bk-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d;
  transform-origin:left center;z-index:8;pointer-events:none;display:none}
.bk-leaf.run{display:block}
.bk-face{position:absolute;inset:0;backface-visibility:hidden;background:#fff;color:var(--ink);overflow:hidden}
.bk-face.back{transform:rotateY(180deg)}
.bk-shadow{position:absolute;left:50%;top:0;bottom:0;width:38px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,0) 46%,rgba(0,0,0,.24));z-index:9;pointer-events:none}
.bk-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0 22px;flex:0 0 auto;touch-action:manipulation}
.bk-dots{display:flex;gap:7px;margin:0 8px}
.bk-dot{-webkit-appearance:none;appearance:none;display:block;flex:0 0 8px;
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.2);transition:background-color .3s;cursor:pointer}
.bk-dot.on{background:var(--acc)}
.bk-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:900px){
  .lbwrap{grid-template-columns:1fr;gap:26px}
  .book3d{aspect-ratio:auto;height:100%;width:min(560px,94vw)}
  .bk-page{position:relative;left:auto;width:100%;height:auto;border-radius:12px;box-shadow:none}
  .bk-pad{height:auto}
  .bk-art{min-height:180px}
  .book3d{height:auto;transform-style:flat;display:flex;flex-direction:column;gap:12px}
  .bk-right{margin-top:0}
  .bk-leaf,.bk-shadow{display:none !important}
  .bk-stage{overflow-y:auto;place-items:start center;padding-bottom:8px;touch-action:pan-y}
  /* свайп вместо стрелок: точки остаются как индикатор */
  .bk-nav{padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px))}
  .bk-nav .pad{display:none}
  .bk-dot{flex:0 0 24px;padding:6px;background-clip:content-box;height:24px;width:24px;box-sizing:border-box;
    border-radius:50%;background-color:rgba(255,255,255,.2)}
  .bk-dot.on{width:24px;border-radius:50%;background-color:var(--acc)}
  .bk-top{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .bk-ttl{font-size:13px}
  .bk-right h3{font-size:20px;margin-bottom:8px}
  .bk-right p{font-size:13.5px;margin-bottom:12px}
  .bk-right li{font-size:13px;gap:8px}
  .bk-right ul{gap:7px}
  .bk-num{padding-top:10px}
}
@media (max-width:900px) and (max-height:700px){
  .bk-art{min-height:130px}
  .bk-right h3{font-size:18px}
  .bk-right p{font-size:12.5px;margin-bottom:10px}
}


/* ---------- fixes ---------- */
.file{background:var(--panel2);color:var(--text)}
.file-ext{color:var(--text)}
.file-d{color:var(--muted)}
.file-sz{color:var(--text);background:rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 18px rgba(0,0,0,.35)}
.file-go{border-top-color:rgba(255,255,255,.1)}
.file-go span{color:var(--muted);background:rgba(255,255,255,.07)}
.file:hover{box-shadow:0 16px 40px rgba(0,0,0,.5)}
.chip{filter:none}
.chipwrap{background:none}
.lbwrap{margin-top:52px;align-items:center}
.lbsec{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:min(100svh,1040px);margin-top:clamp(48px,9vh,120px);padding-top:clamp(28px,5vh,64px);
  padding-bottom:clamp(28px,5vh,64px);border-top:1px solid rgba(255,255,255,.07)}
.lbsec .h3{margin-bottom:clamp(10px,1.6vh,20px);font-size:clamp(28px,3.4vw,52px)}
.cover{margin:0 auto}
.lb-toc{padding-left:0}
.lb-toc li{padding:12px 14px}
@media (min-width:901px){
  .lbwrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px)}
  .cover{max-width:620px}
  .lbsec .cover{max-width:640px}
}

@media (prefers-reduced-motion:reduce){
  .arch{height:auto}.arch-pin{position:static;height:auto}
  .af{position:relative;left:auto;top:auto;transform:none;width:auto}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .hero-scroll{height:auto}
  .hero-pin{position:static;height:auto;min-height:78svh}
  /* без скролл-скраба показываем сам знак: строительный каркас не нужен */
  .hfb{display:none !important}
  /* !important перебивает инлайновые значения скраба — иначе при отключённой
     анимации знак остался бы «погашенным» */
  #hm1{opacity:.30 !important}#hm2{opacity:.15 !important}
  #hLens circle,#hmr,#hmr2{opacity:1 !important}
  /* в этом режиме знак показываем целиком, но без контурного «резинта» */
  #hmr,#hmr2{stroke:transparent !important}
  #hLens{mix-blend-mode:normal}
}

/* ============================================================
   ЭТАЛОН · доработка (меню, иконки, мобильная читаемость, GEO)
   Блок стоит последним — намеренно: правила ниже перекрывают
   базовые, включая медиазапросы выше по файлу.
   ============================================================ */

/* ---------- плашка-иконка в карточках «Почему со мной» ---------- */
.secic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(254,74,35,.12);color:var(--acc);margin-bottom:14px}
.secic svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.secic.is-mark{background:rgba(255,255,255,.07)}
.secic.is-mark .admark{width:auto;height:24px;stroke:none;fill:none}
/* фирменный знак — голова. Держит форму и в 24 px, и в 16 px */
.admark{display:block;height:100%;width:auto}

/* ---------- процесс: воздух + раскрытие этапа ---------- */
#process > .wrap{margin-top:clamp(36px,5.5vw,76px)}
.gt-row{row-gap:0;position:relative}
.gt-toggle{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:12px;
  background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--muted);
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.gt-toggle:hover{color:var(--text)}
.gt-tname{display:none;color:var(--text);font-weight:600}
.gt-tmore{white-space:nowrap}
.gt-toggle .gt-ch{margin-left:auto}
.gt-ch{flex:0 0 auto;width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease)}
.gt-row.is-open .gt-ch{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--acc)}
.gt-note{grid-column:1/-1;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
.gt-row.is-open .gt-note{max-height:340px;opacity:1;margin-top:12px}
.gt-note p{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:66ch;
  border-left:2px solid rgba(254,74,35,.55);padding-left:14px}
@media (max-width:820px){
  /* подпись внутри полосы физически не помещается — выносим её в кнопку */
  .gt-bar i{display:none}
  .gt-tname{display:inline}
  .gt-tname + .gt-tmore::before{content:"· "}
  .gt-track{margin-top:10px}
  .gt-toggle{margin-top:11px;font-size:13px}
  .gt-note p{font-size:13px}
}

/* ---------- диалог в карточке «Поддержка после сдачи» ---------- */
.ucell-img.chat2{display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding:16px 14px;background:linear-gradient(180deg,#121216,#0a0a0c)}
.c2-row{display:flex;align-items:flex-end;gap:8px}
.c2-row.c2-me{flex-direction:row-reverse}
.c2-av{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.1)}
.c2-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.c2-av svg{width:16px;height:16px;display:block;fill:none;stroke:rgba(245,245,247,.62);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c2-on{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;
  background:#32d16d;border:2px solid #0d0d10}
.c2-bub{max-width:78%;border-radius:14px 14px 14px 5px;padding:8px 11px;
  font-size:11.5px;line-height:1.35;text-align:left;
  background:rgba(255,255,255,.085);color:rgba(245,245,247,.78)}
.c2-me .c2-bub{border-radius:14px 14px 5px 14px;background:var(--acc);color:#fff}
.c2-bub.c2-free{font-weight:700;letter-spacing:-.01em;font-size:12.5px}

/* ---------- «Зачем система»: девять областей слева и справа ---------- */
.ngwrap{margin-top:auto;padding-top:22px}
.ng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ng-c{position:relative;border-radius:9px;display:block;overflow:hidden;padding:0 0 1px}
.ng-c > svg{display:block;width:100%;height:auto}
.ng-l{display:block;font-style:normal;text-align:center;letter-spacing:.005em;
  font-size:clamp(8px,1vw,10.5px);line-height:1.25;padding:1px 4px 6px}
.ng-l b{display:block;font-weight:600;margin-bottom:1px}
.sblock.bad .ng-l b{color:rgba(255,255,255,.6)}
.sblock.good .ng-l b{color:var(--ink)}
.sblock.bad .ng-l{color:rgba(255,255,255,.34)}
.sblock.good .ng-l{color:#9a9aa0}
.sblock.bad .ng-c{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.sblock.good .ng-c{background:#f2f2f4;border:1px solid #e7e7ea}
.ng-note{display:flex;align-items:center;gap:7px;margin-top:13px;font-size:11.5px;letter-spacing:.02em}
.ng-note::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.sblock.bad .ng-note{color:rgba(255,255,255,.42)}
.sblock.bad .ng-note::before{background:rgba(255,255,255,.3)}
.sblock.good .ng-note{color:var(--ink-muted)}
.sblock.good .ng-note::before{background:var(--acc)}

/* ---------- квадратная иконка в плитках ---------- */
.tile .tic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.07);margin-bottom:16px;flex:0 0 auto}
.tile .tic svg{width:24px;height:24px;display:block;fill:none;stroke:rgba(245,245,247,.9);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile .tic svg .acc{stroke:var(--acc)}
.tile .tic svg .accf{fill:var(--acc);stroke:none}

/* ---------- «Что дальше»: плитки по центру ---------- */
@media (min-width:561px){
  .accessories .tiles{grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:1140px;margin-left:auto;margin-right:auto}
}

/* ---------- логотип в движении: живая анимация ---------- */
.mov{position:relative;border-radius:26px;overflow:hidden;background:var(--panel2);
  border:1px solid rgba(255,255,255,.06);margin-top:40px}
.mov-stage{position:relative;width:100%;aspect-ratio:16/7.4;display:block;background:transparent}
.mov-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mov-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.06)}
.mov-play{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.28);
  border-radius:980px;padding:8px 17px 8px 14px;font-size:13.5px;color:var(--text);
  background:none;cursor:pointer;font-family:inherit;transition:background .25s var(--ease)}
.mov-play:hover{background:rgba(255,255,255,.1)}
.mov-play svg{width:13px;height:13px;fill:currentColor}
.mov-t{font-size:12.5px;color:var(--muted)}
.mov-steps{display:flex;gap:6px;margin-left:auto}
.mov-steps i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);
  transition:background .3s var(--ease)}
.mov-steps i.on{background:var(--acc)}
@media (max-width:640px){
  .mov-stage{aspect-ratio:1/.78}
  .mov-steps{margin-left:0;width:100%}
  /* подпись в SVG масштабируется вместе с viewBox — на телефоне её надо крупнее */
  #mvT{font-size:26px;letter-spacing:2.4px}
}
/* состояние слоёв задаёт render(p) в JS — CSS-переходов здесь быть не должно,
   иначе при перетаскивании ползунка картинка отстаёт от руки */
#movArt #mvA,#movArt #mvB{transition:none}

/* ---------- заявка: диалог с Артёмом ---------- */
.talk{max-width:640px;margin:36px auto 0;text-align:left}
.talk-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px}
.talk-row.me{flex-direction:row-reverse}
.talk-av{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;overflow:visible;background:#e7e7ea}
.talk-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 28%;display:block}
.talk-av .ph{display:none;place-items:center;width:100%;height:100%;color:#1d1d1f}
.talk-av .ph .admark{height:56%}
.talk-av svg{width:24px;height:24px;fill:none;stroke:#8a8a8f;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.talk-on{position:absolute;right:0;bottom:2px;width:12px;height:12px;border-radius:50%;
  background:#32d16d;border:2.5px solid var(--paper)}
.talk-b{max-width:78%;border-radius:20px 20px 20px 6px;padding:13px 17px;
  font-size:15.5px;line-height:1.45;background:#f0f0f2;color:var(--ink);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.talk.in .talk-b{opacity:1;transform:none}
.talk.in .talk-row:nth-child(2) .talk-b{transition-delay:.35s}
.talk.in .talk-row:nth-child(3) .talk-b{transition-delay:.7s}
.talk-row.me .talk-b{border-radius:20px 20px 6px 20px;background:var(--ink);color:#fff}
.talk-b small{display:block;margin-top:5px;font-size:12px;color:#8a8a8f}
.talk-row.me .talk-b small{color:rgba(255,255,255,.5)}
.talk-who{font-size:12px;color:var(--ink-muted);margin:2px 0 14px 58px}
.talk-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.talk-typing{display:inline-flex;gap:4px;align-items:center;height:10px}
.talk-typing i{width:6px;height:6px;border-radius:50%;background:#b6b6bb;
  animation:tdot 1.3s infinite ease-in-out}
.talk-typing i:nth-child(2){animation-delay:.18s}
.talk-typing i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .talk-b{opacity:1;transform:none}
  .talk-typing i{animation:none}
}
@media (max-width:560px){
  .talk-b{max-width:82%;font-size:14.5px;padding:12px 15px}
  .talk-av{width:40px;height:40px}
  .talk-who{margin-left:52px}
}

/* ---------- избранные знаки: слайдер + полный экран ---------- */
.pick{margin-top:44px}
.pick-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;
  margin:0 calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut)}
.pick-rail::-webkit-scrollbar{display:none}
.pick-card{position:relative;flex:0 0 clamp(240px,27vw,360px);scroll-snap-align:center;
  aspect-ratio:1/1;border-radius:22px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(44px,4.4vw,54px);
  cursor:zoom-in;border:0;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pick-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.pick-card img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;flex:0 1 auto}
.pick-card .pc-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-size:12px;color:var(--ink-muted);text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.94) 55%)}
.pick-card .pc-cap b{color:var(--ink);font-weight:600}
.pick-ctrl{display:flex;align-items:center;gap:10px;margin-top:20px}
.pick-ctrl .pick-n{margin-left:auto;font-size:12.5px;color:var(--muted)}
.pick-full{position:fixed;inset:0;z-index:420;background:rgba(6,6,7,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),visibility .35s}
.pick-full.open{opacity:1;visibility:visible;pointer-events:auto}
.pick-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.pick-top b{font-size:15px;font-weight:600}
.pick-top span{font-size:12.5px;color:var(--muted)}
.pick-x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-size:16px;line-height:1;border:0;color:#fff;cursor:pointer}
.pick-x:hover{background:rgba(255,255,255,.22)}
.pick-view{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:clamp(18px,4vw,54px)}
.pick-view figure{width:min(1100px,100%);height:100%;min-height:0;border-radius:26px;
  background:var(--paper);display:grid;place-items:center;overflow:hidden;
  padding:clamp(26px,4vw,56px)}
.pick-view img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pick-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 20px 24px}
.pick-cap{text-align:center;font-size:13px;color:var(--muted);padding:0 20px 14px}
.pick-cap b{color:var(--text);font-weight:600}
.pick-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  width:min(1100px,100%);margin:0 auto;padding:0 clamp(14px,4vw,54px) 20px;
  justify-content:flex-start}
.pick-thumbs::-webkit-scrollbar{display:none}
.pick-th{position:relative;flex:0 0 64px;height:48px;border-radius:9px;
  background:rgba(255,255,255,.08);padding:0;overflow:hidden;
  border:1px solid transparent;cursor:pointer}
.pick-th.on{border-color:var(--acc);background:rgba(255,255,255,.16)}
.pick-th img{position:absolute;inset:7px;width:auto;height:auto;
  max-width:calc(100% - 14px);max-height:calc(100% - 14px);margin:auto;
  object-fit:contain;filter:invert(1) brightness(1.6);opacity:.75}
.pick-th.on img{opacity:1}

@media (max-width:640px){
  .pick-card{flex:0 0 min(320px,78vw)}
  .pick-view{padding:14px}
  .pick-view figure{height:auto;aspect-ratio:1/1;max-height:54svh;padding:clamp(22px,7vw,40px)}
  .pick-thumbs{padding:0 14px 18px}
  .pick-nav{padding:0 14px 16px}
}

/* ---------- футер: девять модулей сворачиваются и на десктопе ---------- */
/* Ссылки остаются в разметке — поисковик их видит, человек не тонет в списке. */
.fs-grid{align-items:start}
.fs-block{border-bottom:1px solid var(--hair);padding:14px 0}
.fs-block__h{display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:0;
  -webkit-tap-highlight-color:transparent}
.fs-ch{display:block}
.fs-block__d{display:none}
.fs-block ul{gap:0;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
.fs-block.is-open .fs-block__d{display:block;margin-top:9px}
.fs-block.is-open ul{gap:6px;max-height:520px;opacity:1;margin-top:11px}
.fs-block.is-open .fs-ch{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--acc)}
.fs-grid{gap:0 30px}
.fs-expand{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  border:1px solid rgba(255,255,255,.18);border-radius:980px;padding:8px 17px;
  font-size:13px;color:rgba(245,245,247,.8);background:none;cursor:pointer;font-family:inherit;
  transition:background .25s var(--ease)}
.fs-expand:hover{background:rgba(255,255,255,.1);color:#fff}
.fs-expand .fs-ch{margin-left:0}
.fs-expand.is-open .fs-ch{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--acc)}
@media (min-width:821px){ .fs-nav__col .fs-ch{display:none} }

/* ---------- архив: шапка не уезжает под навигацию ---------- */
.arch-pin{padding-top:calc(var(--nav) + 10px)}
.arch-box{width:min(1280px,94vw,58svh);perspective:1600px}
.book{transform-origin:center center}
.arch-box{--topy:-34;--topgap:16;--afy:-38}
.folder{--fy:-2%}
/* обложка логобука — такт между разворотом и PDF */
.lbcover{position:absolute;left:50%;top:50%;width:46%;z-index:8;opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.9);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.7))}
.lbcover svg{width:100%;height:auto;display:block}
@media (max-width:860px){
  .arch-pin{padding-top:calc(var(--nav) + 26px)}
  .arch-box{width:min(560px,92vw,54svh);--topy:-48;--topgap:32;--afw:15;--afgap:4.1;--afy:-36}
}

/* ---------- избранные знаки: крупнее на десктопе, разбор в полном экране ---------- */
@media (min-width:1100px){ .pick-card{flex:0 0 clamp(320px,24vw,420px)} }
.pick-view img{width:auto;height:auto;max-width:100%;max-height:100%}
.pick-meta{display:grid;justify-items:center;gap:14px;padding:0 clamp(14px,4vw,54px) 16px}
.pick-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 34px;
  width:min(1100px,100%);align-items:start}
.pick-dl > div{display:grid;gap:4px;text-align:left;min-width:0}
.pick-dl dt{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(245,245,247,.38)}
.pick-dl dd{font-size:13px;line-height:1.5;color:rgba(245,245,247,.8)}
@media (max-width:860px){
  .pick-dl{grid-template-columns:1fr;gap:14px}
  .pick-meta{justify-items:start;padding:0 16px 14px}
  .pick-cap{text-align:left;padding:0}
}

/* ---------- лайтбокс: картинка открывается в полном размере ---------- */
.lbx{position:fixed;inset:0;z-index:430;background:rgba(6,6,7,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;pointer-events:none;cursor:zoom-out;
  transition:opacity .3s var(--ease),visibility .3s}
.lbx.open{opacity:1;visibility:visible;pointer-events:auto}
.lbx figure{margin:0;max-width:min(1400px,100%);max-height:100%;
  display:grid;place-items:center;border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lbx img{max-width:min(1400px,100%);max-height:calc(100svh - clamp(48px,10vw,132px));
  width:auto;height:auto;object-fit:contain;display:block;cursor:default}
.lbx-x{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:16px;
  line-height:1;border:0;color:#fff;cursor:pointer;backdrop-filter:blur(8px);
  transition:background .25s var(--ease)}
.lbx-x:hover{background:rgba(255,255,255,.26)}
@media (max-width:640px){ .lbx{padding:12px} .lbx-x{right:10px;top:10px} }

/* ---------- шкала сборки знака ---------- */
.mov-bar{align-items:center}
.mov-play{min-width:132px;justify-content:center}
.mov-play .ic-s{display:none}
.mov.is-playing .mov-play .ic-p{display:none}
.mov.is-playing .mov-play .ic-s{display:block}
.mov-play svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px}
.mov-scrub{position:relative;flex:1 1 260px;min-width:200px;height:34px;display:flex;align-items:center}
.mov-rail{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.12)}
.mov-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--acc);width:0}
.mov-ticks{position:absolute;inset:0}
.mov-tick{position:absolute;top:50%;width:2px;height:10px;margin-left:-1px;border-radius:1px;
  transform:translateY(-50%);background:rgba(255,255,255,.28);transition:background .25s var(--ease)}
.mov-tick.on{background:rgba(255,255,255,.9)}
.mov-range{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:34px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;cursor:grab;touch-action:pan-y}
.mov-range:active{cursor:grabbing}
.mov-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:grab}
.mov-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:grab}
.mov-range::-moz-range-track{background:none}
.mov-range:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:980px}
.mov-cap{padding:0 20px 14px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:74ch}
.mov-cap b{color:var(--text);font-weight:600;margin-right:6px}
.mov-layers{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:0 20px 18px}
.ml-t{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(245,245,247,.34);
  margin-right:4px}
.ml-b{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.14);
  border-radius:980px;padding:6px 13px 6px 9px;font-size:12.5px;color:var(--muted);
  background:none;cursor:pointer;font-family:inherit;transition:.25s var(--ease);
  -webkit-tap-highlight-color:transparent}
.ml-b i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
  transition:.25s var(--ease)}
.ml-b.is-on{color:var(--text);border-color:rgba(255,255,255,.3)}
.ml-b.is-on i{background:var(--acc);border-color:var(--acc)}
.ml-b:hover{background:rgba(255,255,255,.07)}
@media (max-width:640px){
  .mov-bar{gap:10px}
  .mov-play{min-width:0;flex:0 0 auto}
  .mov-scrub{flex:1 1 100%;order:3}
  .mov-cap{padding:0 16px 12px}
  .mov-layers{padding:0 16px 16px;gap:7px}
  .ml-b{font-size:12px;padding:5px 11px 5px 8px}
}

/* ---------- селектор «что у вас сейчас» ----------
   Приём со страницы iPhone: человек выбирает свою исходную точку
   и видит разницу, а не общий список преимуществ. */
.cmp{background:var(--panel2);border-radius:26px;border:1px solid rgba(255,255,255,.05);
  overflow:hidden;max-width:1180px;margin:clamp(34px,5vw,60px) auto 0}
.cmp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-bottom:1px solid rgba(255,255,255,.08)}
.cmp-t{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:18px 18px 16px;text-align:left;border:0;background:none;cursor:pointer;
  border-right:1px solid rgba(255,255,255,.06);transition:background .25s var(--ease);
  -webkit-tap-highlight-color:transparent}
.cmp-t:last-child{border-right:0}
.cmp-t:hover{background:rgba(255,255,255,.04)}
.cmp-t b{font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--muted);transition:color .25s}
.cmp-t span{font-size:11.5px;color:rgba(245,245,247,.38);line-height:1.35}
.cmp-t.is-on{background:rgba(255,255,255,.055)}
.cmp-t.is-on b{color:var(--text)}
.cmp-t.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc)}
.cmp-p{padding:clamp(24px,3vw,36px)}
.cmp-p[hidden]{display:none}
.cmp-sub{font-size:clamp(16px,1.5vw,20px);line-height:1.4;letter-spacing:-.015em;
  max-width:62ch;margin-bottom:clamp(22px,3vw,32px)}
.cmp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.cmp-col{background:rgba(255,255,255,.03);border-radius:18px;padding:22px 22px 24px;
  border:1px solid rgba(255,255,255,.05)}
.cmp-next{background:rgba(254,74,35,.05);border-color:rgba(254,74,35,.18)}
.cmp-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cmp-next .cmp-h{color:var(--acc)}
.cmp-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.cmp-col li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--muted)}
.cmp-col li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.28)}
.cmp-next li{color:rgba(245,245,247,.86)}
.cmp-next li::before{content:"";top:5px;left:1px;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.cmp-verdict{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(20px,2.6vw,28px);padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid rgba(255,255,255,.08)}
.cmp-vt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.cmp-vd{font-size:15px;line-height:1.5;max-width:62ch}
.cmp-buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
.cmp-price{font-size:14px;font-weight:600;color:var(--acc);white-space:nowrap}
@media (max-width:900px){
  .cmp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp-t{border-bottom:1px solid rgba(255,255,255,.06)}
  .cmp-t:nth-child(2n){border-right:0}
  .cmp-t:last-child{grid-column:1 / -1}
  .cmp-cols{grid-template-columns:1fr}
  .cmp-buy{margin-left:0;width:100%}
}
@media (max-width:560px){
  .cmp-tabs{grid-template-columns:1fr}
  .cmp-t{border-right:0;flex-direction:row;align-items:baseline;gap:9px;flex-wrap:wrap;padding:14px 18px}
  .cmp-t b{font-size:15px}
  .cmp-t.is-on::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto}
  .cmp-col{padding:18px 18px 20px}
}

/* ---------- инфографика к каждой ситуации ---------- */
.cmp-top{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,3vw,40px);
  align-items:center;margin-bottom:clamp(22px,3vw,32px)}
.cmp-top .cmp-sub{margin-bottom:0}
.cmp-art{width:100%;border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);padding:8px}
.cmp-art svg{display:block;width:100%;height:auto}
@media (max-width:1100px){ .cmp-top{grid-template-columns:1fr;gap:20px} .cmp-art{max-width:420px} }

/* ---------- архив: запечатанный zip и каналы отправки ---------- */
.zip{position:absolute;left:50%;top:50%;width:62%;z-index:7;opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.84);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.65))}
.zip svg{width:100%;height:auto;display:block}
.zip-b{position:absolute;left:50%;top:100%;margin-top:clamp(8px,1.8cqh,20px);transform:translateX(-50%);
  display:grid;justify-items:center;gap:5px;white-space:nowrap;pointer-events:none}
.zip-b b{font-size:clamp(16px,2cqw,28px);font-weight:600;color:var(--text);letter-spacing:-.015em}
.zip-b i{font-style:normal;font-size:clamp(12px,1.25cqw,18px);color:var(--muted)}

/* Это обозначение способа передачи, а не реклама мессенджеров:
   нейтральные контуры, ничего кликабельного, брендовых цветов нет. */
.archto{position:absolute;left:50%;top:64%;width:100%;transform:translateX(-50%);
  z-index:8;opacity:0;display:grid;justify-items:center;gap:clamp(10px,2cqh,18px);
  pointer-events:none}
.at-line{width:1px;height:clamp(22px,6cqh,54px);transform-origin:top;transform:scaleY(var(--sp,0));
  background:linear-gradient(180deg,rgba(254,74,35,.6),rgba(254,74,35,0))}
.at-row{display:flex;gap:clamp(14px,3cqw,32px);align-items:flex-start}
.at-c{display:grid;justify-items:center;gap:8px;opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.archto.go .at-c{opacity:1;transform:none}
.archto.go .at-c:nth-child(2){transition-delay:.09s}
.archto.go .at-c:nth-child(3){transition-delay:.18s}
.at-c svg{box-sizing:border-box;width:clamp(52px,7.4cqw,76px);height:clamp(52px,7.4cqw,76px);
  padding:15px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  fill:none;stroke:rgba(245,245,247,.72);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.at-c svg.fill{fill:rgba(245,245,247,.72);stroke:none}
.at-c b{font-size:clamp(12px,1.3cqw,17px);font-weight:500;color:var(--muted);letter-spacing:.01em}
/* ---------- архив: zip крупнее, подпись строго под иконкой, каналы заметнее ---------- */
.zip{position:absolute;left:50%;top:47%;width:clamp(220px,30cqw,340px);z-index:7;opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.84);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.65))}
.zip-b{position:absolute;left:50%;top:100%;margin-top:clamp(14px,3cqh,30px);transform:translateX(-50%);
  display:grid;justify-items:center;gap:7px;white-space:nowrap;pointer-events:none;text-align:center}
.zip-b b{font-size:clamp(15px,1.7cqw,21px);font-weight:600;color:var(--text);letter-spacing:-.01em}
.zip-b i{font-style:normal;font-size:clamp(12px,1.25cqw,15px);color:var(--muted);line-height:1.45}
.archto{position:absolute;left:50%;top:72%;width:100%;transform:translateX(-50%);
  z-index:8;opacity:0;display:grid;justify-items:center;gap:clamp(12px,2.4cqh,22px);
  pointer-events:none}
.at-row{display:flex;gap:clamp(20px,4.2cqw,52px);align-items:flex-start}
.at-c svg{box-sizing:border-box;width:clamp(74px,10.5cqw,108px);height:clamp(74px,10.5cqw,108px);
  padding:21px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);fill:none;stroke:rgba(245,245,247,.72);
  stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.at-c b{font-size:clamp(14px,1.55cqw,20px)}
@media (max-width:860px){
  .zip{width:clamp(190px,58cqw,260px);top:44%}
  .archto{top:68%}
  .at-row{gap:18px}
  .at-c svg{width:64px;height:64px;padding:18px}
  .at-c b{font-size:13px}
}

/* ---------- 21 файл: восемь форматов + высокая карточка логобука ----------
   Сетка 5×2 = 10 ячеек, логобук забирает пятую колонку на оба ряда,
   остаётся ровно 8 мест под 8 форматов. Пустых слотов нет. */
.files{grid-template-columns:repeat(5,minmax(0,1fr))}
.file{grid-template-areas:"ic ext" "ic d" "sz sz" "go go" "more more"}
.file-more{grid-area:more;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.08)}
.file-more summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;
  font-size:11.5px;color:var(--muted);-webkit-tap-highlight-color:transparent}
.file-more summary::-webkit-details-marker{display:none}
.file-more summary:hover{color:var(--text)}
.file-more summary i{flex:0 0 auto;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease)}
.file-more[open] summary i{transform:rotate(-135deg) translate(-1px,-1px);border-color:var(--acc)}
.file-more p{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--muted)}

.file-lb{grid-column:5;grid-row:1 / span 2;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"cover" "tag" "ext" "d" "list" "why";
  row-gap:0;padding:22px 22px 24px;
  background:linear-gradient(180deg,#232327,#17171a)}
.file-lb .file-sz{display:none}
.lb-cover{grid-area:cover;display:block;width:100%;max-width:172px;margin:2px auto 18px;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.6))}
.lb-cover svg{display:block;width:100%;height:auto}
.lb-tag{grid-area:tag;justify-self:start;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(254,74,35,.42);border-radius:980px;
  padding:3px 9px;margin-bottom:11px}
.file-lb .file-ext{grid-area:ext;padding-right:0;font-size:20px;margin-bottom:6px}
.file-lb .file-d{grid-area:d;margin-bottom:14px}
.lb-list{grid-area:list;list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.lb-list li{position:relative;padding-left:15px;font-size:12px;line-height:1.45;color:var(--muted)}
.lb-list li::before{content:"";position:absolute;left:0;top:6.5px;width:5px;height:5px;
  border-radius:50%;background:var(--acc)}
.lb-why{grid-area:why;margin-top:auto;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;line-height:1.55;color:rgba(245,245,247,.5)}

@media (max-width:1180px){
  .files{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* пятая колонка не влезает — логобук ложится баннером на всю ширину */
  .file-lb{grid-column:1 / -1;grid-row:auto;
    grid-template-columns:210px minmax(0,1fr);
    grid-template-areas:"cover ext" "cover d" "cover list" "cover why";
    column-gap:30px;align-content:center;padding:26px 26px 28px}
  .lb-cover{margin:0;max-width:210px;align-self:center}
  .lb-tag{position:absolute;right:22px;top:22px;margin:0}
}
@media (max-width:900px){ .files{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .files{grid-template-columns:1fr}
  /* с телефона логобук читается как главная ценность — ставим его первым */
  .file-lb{order:-1;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"cover" "ext" "d" "list" "why";padding:54px 20px 24px}
  .lb-cover{max-width:148px;margin:0 auto 18px}
}

/* ---------- полная ширина для медиа ----------
   Текст остаётся в колонке: строка длиннее ~75 знаков не читается.
   На всю ширину выходят только ленты, стены знаков и фотоблоки —
   и не растягивают карточки, а добавляют колонки. */
.wrap.bleed{max-width:none}
@media (min-width:1560px){
  .lwall{grid-template-columns:repeat(7,minmax(0,1fr))}
  .shots{gap:22px}
}
@media (min-width:2040px){
  .lwall{grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}
}
@media (min-width:2480px){
  .lwall{grid-template-columns:repeat(9,minmax(0,1fr))}
}

/* ---------- широкий экран: ленты перестают быть лентами ----------
   Карточки делят ширину поровну, ничего не торчит за край — и пагинация
   прячется сама, потому что листать больше нечего. */
@media (min-width:1700px){
  .gal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    overflow:visible;padding-bottom:0}
  .gcard{flex:none;min-height:470px}
  /* «Было и стало» уже сетка 2 колонки на всех экранах — не перебиваем */
}

/* ---------- знак белорусского рубля вместо букв BYN ----------
   Отдельного символа в Юникоде нет, поэтому знак Нацбанка вставляется
   спрайтом. Рядом лежит скрытый текст «BYN»: иначе скопированная цена
   уйдёт без валюты, а экранный диктор не прочитает ничего. */
.byn{width:.86em;height:.86em;display:inline-block;vertical-align:-.11em;
  margin-left:.22em;fill:currentColor;flex:none}
.byn-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 3D-знак в финале сборки ----------
   У ролика фон давится в чистый чёрный ещё при кодировании (colorlevels), а на
   странице он кладётся через mix-blend-mode:screen. screen с чёрным возвращает
   подложку как есть, поэтому прямоугольника не видно на любой поверхности —
   и на панели, и на чистом чёрном первого экрана. Альфа-канал не нужен,
   работает везде, включая Safari. Диски знака — стекло, они и должны слегка
   подсвечивать фон. Главное: не менять ролик без повторного давления чёрного. */
.mov-3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;pointer-events:none;mix-blend-mode:screen;
  transition:opacity .45s var(--ease)}
@media (prefers-reduced-motion:reduce){ .mov-3d{display:none} }

/* ---------- фирменный знак в шапке ---------- */
/* лок-ап «голова + надпись» 377×117: на 16 px надпись нечитаема */
.gnav-logo img{height:26px}
@media (max-width:560px){ .gnav-logo img{height:22px} }

/* ---------- обложка логобука в «Коротко о главном» ----------
   rotateY с перспективой раздувает габарит примерно на 20 %, и обложку
   срезало правым краем карточки. Гасим угол и ужимаем — теперь она
   уменьшается пропорционально вместе с карточкой на любой ширине. */
.gcover{width:min(100%,520px);margin-inline:auto}
/* min-height:300px при aspect-ratio 1.42 жёстко задавал ширину 426 px —
   обложка не зависела от карточки и срезалась правым краем.
   Ширину задаёт карточка, высоту — пропорция. */
.gcard .gcover .cover-in{min-height:0;width:100%;height:auto}

/* ---------- подвал: вертикальный знак и соцсети ---------- */
.fs-sign{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px 0 4px;border-top:1px solid var(--hair);margin-top:4px}
.fs-sign__logo{height:62px;width:auto;opacity:.9}
.soc{list-style:none;display:flex;gap:10px;align-items:center}
.soc a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:rgba(245,245,247,.55);transition:color .25s var(--ease),transform .25s var(--ease)}
.soc a:hover{color:#fff;transform:translateY(-2px)}
.soc svg{width:100%;height:100%;fill:currentColor;display:block}
@media (max-width:560px){ .fs-sign{justify-content:center;text-align:center} .fs-sign__logo{height:52px} }

/* ---------- иконка у счётчика файлов ---------- */
.fc-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.07);flex:none;align-self:center}
.fc-ic svg{width:21px;height:21px;fill:none;stroke:rgba(245,245,247,.85);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.fc-ic svg .acc{stroke:var(--acc)}
.fc-ic svg .accf{fill:var(--acc);stroke:none}

/* ---------- полный экран на невысоких мониторах ---------- */
@media (max-height:920px){
  .pick-view{padding-top:10px;padding-bottom:10px}
  .pick-th{flex:0 0 54px;height:40px}
  .pick-thumbs{padding-bottom:12px}
  .pick-nav{padding-bottom:14px}
}

/* ---------- вопросы и ответы ---------- */
.fqlist{margin-top:44px;border-top:1px solid var(--hair)}
.fq{border-bottom:1px solid var(--hair)}
.fq summary{display:flex;align-items:flex-start;gap:16px;padding:22px 0;cursor:pointer;
  list-style:none;font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-.015em;
  -webkit-tap-highlight-color:transparent}
.fq summary::-webkit-details-marker{display:none}
.fq summary span{flex:1 1 auto}
.fq-ch{flex:0 0 auto;width:9px;height:9px;margin-top:7px;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.fq[open] .fq-ch{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--acc)}
.fq-a{padding:0 40px 24px 0}
.fq-a p{font-size:15px;line-height:1.6;color:var(--muted);max-width:66ch}
.fq summary:hover span{color:#fff}
@media (max-width:560px){ .fq-a{padding-right:0} .fq-a p{font-size:14.5px} }

/* ---------- контакты в плавающем меню услуги ---------- */
.sh-contacts{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.sh-contacts .mega-lab{margin:0 0 14px}
.sh-contacts .cbar{margin-bottom:0}
.sh-foot{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:18px;
  font-size:13px}
.sh-foot a{color:rgba(245,245,247,.75)}
.sh-foot a:hover{color:#fff}

/* ---------- «Срок жизни»: срок по носителям, быстрый режим ---------- */
.life-term{margin-top:46px}
.life-term-h{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:16px}
.life-term-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.life-tc{background:var(--panel2);border-radius:20px;padding:24px 22px;min-width:0;
  display:flex;flex-direction:column;gap:8px}
.life-tc span{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.life-tc b{font-size:clamp(27px,2.9vw,36px);line-height:1;font-weight:600;
  letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums}
.life-tc p{font-size:13px;line-height:1.5;color:var(--muted)}
.life-tc .life-ic{display:block;margin-bottom:4px}
.life-tc .life-ic svg{display:block;width:100%;height:auto;max-width:132px;
  border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);padding:10px 8px}
.life-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.life-why{max-width:980px;margin:44px auto 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:start}
.life-why h3{font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:14px}
.life-why p{font-size:14.5px;line-height:1.62;color:var(--muted)}
.life-why p b{color:var(--text);font-weight:600}
.life-fast{max-width:980px;margin:32px auto 0;background:var(--panel2);
  border-radius:24px;padding:34px 42px;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center}
.life-fast .lf-ic{width:56px;height:56px;border-radius:16px;flex:none;
  display:grid;place-items:center;background:rgba(254,74,35,.14)}
.life-fast .lf-ic svg{width:28px;height:28px;fill:none;stroke:var(--acc);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.life-fast h3{font-size:clamp(18px,1.9vw,23px);font-weight:600;
  letter-spacing:-.02em;margin-bottom:8px}
.life-fast p{font-size:14.5px;line-height:1.58;color:var(--muted)}
.life-fast p b{color:var(--text);font-weight:600}
.life-fast .lf-time{text-align:right;white-space:nowrap}
.life-fast .lf-time b{display:block;font-size:clamp(28px,3vw,38px);font-weight:600;
  letter-spacing:-.03em;line-height:1.05;color:var(--acc)}
.life-fast .lf-time span{font-size:12.5px;color:var(--muted)}
@media (max-width:900px){
  .life-term-g{grid-template-columns:1fr;gap:10px}
  .life-why,.life-fast{grid-template-columns:1fr;gap:22px}
  .life-fast{padding:28px 24px}
  .life-fast .lf-time{text-align:left}
}

/* ---------- единый набор контактных иконок ----------
   Один спрайт (#i-tel/#i-tg/#i-wa/#i-ig/#i-mail/#i-vb) на шапку, оба меню,
   пилюлю и подвал. Глифы без круглой подложки, заливка currentColor:
   цвет и размер задаёт место, куда иконка поставлена, а не сама иконка. */
.cic{width:100%;height:100%;display:block;fill:currentColor;stroke:none}

/* подвал: знак лежачий, как в шапке; соцсети без кружков */
.fs-sign__logo{height:34px;width:auto;opacity:.92}
.soc{gap:18px}
.soc a{width:20px;height:20px;border-radius:0;background:none;
  color:rgba(245,245,247,.6)}
.soc a:hover{color:#fff}
.soc svg{width:20px;height:20px}

/* шапка: иконки те же, но заливкой, а не обводкой */
.icbtn svg{width:16px;height:16px;fill:#f5f5f7;stroke:none}
.cb-ic svg{width:17px;height:17px}
.pill.tg svg{width:18px;height:18px;fill:#fff}

/* Под «Связаться» сходились две линии подряд: нижняя у .fs-nav и верхняя
   у .fs-sign, между ними 4px. Оставляю одну — у .fs-nav. */
.fs-sign{border-top:0;margin-top:0;padding-top:22px}
@media (max-width:820px){
  /* на мобильном к ним добавлялась третья — граница последней колонки */
  .fs-nav__col:last-child{border-bottom:0}
  .fs-sign__logo{height:28px}
  .soc{gap:22px}
}

/* ---------- мобильная компактность ----------
   На телефоне страница шла почти на 60 экранов: длинные колонки карточек
   разворачивались по одной в ряд. Ничего не прячу — меняю раскладку.
   Короткие карточки встают в две-три колонки, длинные уезжают в свайп
   по той же механике, что галерея «Коротко о главном». */
@media (max-width:560px){
  /* 79 знаков по два в ряд — это 40 строк. В три колонки знак читается,
     а блок становится вдвое короче. */
  .lwall{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .lcard img{left:9%;top:11%;width:82%;height:78%}

  /* карточки-факты короткие, им хватает половины ширины */
  .ugrid,.flist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .files{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .file-lb{grid-column:1/-1}

  /* пакеты и пары «было — стало» — в свайп */
  .packs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  /* .packs лежит внутри .wrap с отступом-жёлобом, его можно вывести под обрез;
     .ba — прямой ребёнок секции, там отрицательное поле вылезало за экран. */
  .wrap>.packs{margin-inline:calc(var(--gut)*-1);padding:0 var(--gut) 10px}

  .packs::-webkit-scrollbar{display:none}
  .pack{flex:0 0 min(320px,82vw);scroll-snap-align:center}


  /* тарифы и пара «сейчас / после» — тоже в свайп: три тарифа в столбик
     занимали почти два экрана, сравнивать их всё равно удобнее бок о бок */
  .tar{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  .tar::-webkit-scrollbar{display:none}
  .wrap>.tar{margin-inline:calc(var(--gut)*-1);padding:0 var(--gut) 10px}
  .tar>*{flex:0 0 min(300px,80vw);scroll-snap-align:center}
}

/* ---------- «Что у вас сейчас с логотипом?» на телефоне ----------
   Пять ситуаций в столбик занимали экран ещё до того, как человек увидит
   хоть один ответ. Теперь это горизонтальная лента с номерами, прилипающая
   к верху: ситуации всегда под рукой, а разворачивается только выбранная. */
@media (max-width:760px){
  .cmp{overflow:visible}
  .cmp-tabs{display:flex;grid-template-columns:none;gap:0;counter-reset:cmpt;
    position:sticky;top:0;z-index:30;overflow-x:auto;scroll-snap-type:x proximity;
    background:var(--panel2);border-bottom:1px solid rgba(255,255,255,.09);
    border-radius:26px 26px 0 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cmp-tabs::-webkit-scrollbar{display:none}
  .cmp-t{flex:0 0 auto;counter-increment:cmpt;flex-direction:row;align-items:center;
    gap:8px;padding:13px 16px;white-space:nowrap;scroll-snap-align:start;
    border-right:1px solid rgba(255,255,255,.06);border-bottom:0}
  .cmp-t:last-child{grid-column:auto;border-right:0}
  .cmp-t::before{content:counter(cmpt);display:grid;place-items:center;flex:none;
    width:19px;height:19px;border-radius:50%;font-size:10.5px;font-weight:600;
    background:rgba(255,255,255,.1);color:var(--muted);transition:background .25s,color .25s}
  .cmp-t.is-on::before{background:var(--acc);color:#fff}
  .cmp-t b{font-size:13.5px}
  .cmp-t span{display:none}
  .cmp-t.is-on::after{left:0;right:0;top:auto;bottom:0;width:auto;height:2px}
}

/* Обложка логобука: знак на обложке должен быть скромным — это книга правил,
   а не постер. После того как обложку перестало резать, знак поехал в размере. */
.gcard .gcover .cover-mark{width:96px}
.gcard .gcover .cover-body{padding:0 9% 20px 12%;gap:9px}
.gcard .gcover .cover-pdf{top:12px;right:12px}
@media (max-width:560px){
  .gcard .gcover .cover-mark{width:76px}
  .gcard .gcover .cover-pdf{top:9px;right:9px;padding:3px 7px;font-size:9.5px}
}

/* ---------- сцена сборки: чистый чёрный под ролик ----------
   У ролика фон ровно чёрный. Если сцена светлее, объёмный знак лежит на ней
   заплаткой. Поэтому и карточка, и сцена — #000: границы кадра не видно. */
.mov,.mov-stage{background:#000}
/* Пока видно разметку — объёмного знака нет, и наоборот. Разметка гасится
   раньше, чем появляется ролик, иначе 3D читается сквозь полупрозрачный SVG
   и перестаёт быть объёмом. */
#movArt{transition:none}
/* подвал и шапка: иконки были мелкими до нечитаемости */
.soc a{width:26px;height:26px}
.soc svg{width:26px;height:26px}
.soc{gap:20px}
.icbtn{width:38px;height:38px}
.icbtn svg{width:20px;height:20px}
.cb-ic{width:24px;height:24px;flex:0 0 24px}
.cb-ic svg{width:20px;height:20px}
.pill.tg svg{width:20px;height:20px}
/* выпадающее меню прижимается к шапке, лишнего поля сверху нет */
.mega-in{padding-top:14px}
@media (max-width:820px){
  .soc a,.soc svg{width:24px;height:24px}
  .mega-in{padding-top:10px}
}

/* Две мысли в конце «Срока жизни» висели в воздухе у левого края и читались
   как обрывок. Беру их в такую же плашку, как соседние карточки. */
.life-why{background:var(--panel2);border:1px solid rgba(255,255,255,.06);
  border-radius:24px;padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px);
  gap:clamp(26px,3vw,46px)}
.life-why h3{color:var(--text)}
@media (max-width:900px){ .life-why{padding:24px 22px} }

/* ---------- логобук всюду лежачий ----------
   Обложка и разворот горизонтальные, а лист в папке и финальный PDF были
   вертикальными — читалось как два разных документа. Одна пропорция всюду. */
.af.is-book{aspect-ratio:1.42/1;height:calc(var(--side,14.5) * 1.04cqh);width:auto}
.pdf{aspect-ratio:1.42/1}
/* Формат подписан язычком в углу, а не красной кнопкой поверх листа:
   кнопка выбивалась из ряда файлов и налезала на содержимое. */
.af.is-book .af-badge{place-items:end start;padding:0 0 6% 6%}
.af.is-book .af-badge b{background:rgba(20,20,22,.78);border-radius:5px;
  padding:3px 8px;font-size:clamp(8px,.78cqw,12px);letter-spacing:.08em;box-shadow:none}
.pdf .pdf-b{top:auto;bottom:7%;transform:none;justify-items:start;padding-left:7%}
.pdf .pdf-b b{background:rgba(20,20,22,.78);border-radius:6px;padding:4px 11px;
  font-size:clamp(10px,1vw,15px);letter-spacing:.08em;box-shadow:none}
.pdf .pdf-b i{text-shadow:none;color:rgba(255,255,255,.6);text-align:left;margin-top:6px}
/* Обложку надо успеть прочитать — она была мельче папки */
.book{width:84%}

/* «Знак — начало»: три карточки на три колонки, одинаковая высота,
   цена прижата к левому нижнему углу независимо от длины описания. */
.accessories .tiles{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.accessories .tile{height:100%;min-height:0}
.accessories .tile p{margin-bottom:18px}
.accessories .tile-price{margin-top:auto;align-self:flex-start}
@media (max-width:900px){ .accessories .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- подсказка у модулей ART-OS ----------
   Строки легенды подсвечивались, но ничего не объясняли. Теперь по наведению
   и по касанию (tabindex делает строку фокусируемой) выезжает пояснение —
   что именно входит в модуль. */
.chip-li{cursor:pointer;transition:background .22s var(--ease)}
.chip-li:hover,.chip-li:focus-visible{background:rgba(255,255,255,.06);outline:none}
.chip-li.is-now:hover,.chip-li.is-now:focus-visible{background:rgba(254,74,35,.16)}
.chip-tip{flex:1 1 100%;max-height:0;overflow:hidden;opacity:0;
  font-size:12.5px;line-height:1.45;color:var(--muted);
  transition:max-height .32s var(--ease),opacity .25s var(--ease),margin .32s var(--ease)}
.chip-li{flex-wrap:wrap}
.chip-li:hover .chip-tip,.chip-li:focus-visible .chip-tip,.chip-li:focus-within .chip-tip{
  max-height:70px;opacity:1;margin-top:5px;padding-left:37px}
/* На тач-экране раскрывает касание: строка фокусируемая, поэтому работает
   и без наведения. Показывать все пояснения разом нельзя — легенда в две
   колонки, текст в них не помещается. */
.chip-li:focus .chip-tip{max-height:70px;opacity:1;margin-top:5px;padding-left:37px}

/* ---------- четыре версии знака показаны, а не только названы ----------
   В блоке перечислялись горизонталь, вертикаль, знак без названия и монохром,
   но увидеть их было негде. Рядом с каждым описанием — сама сборка.
   Форма условная: это место клиентского знака, а не знак студии. */
.spv{display:block;width:100%;max-width:168px;height:auto;margin-bottom:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:8px 10px}
@media (max-width:620px){ .spv{max-width:140px;margin-bottom:10px} }

/* ---------- «Было и стало»: акцент на знаках ----------
   Раньше подписи занимали больше места, чем сами логотипы. Теперь это одна
   сцена: старый знак лежит под новым и уходит влево, новый выходит вперёд.
   Видно не «две картинки рядом», а направление замены. Подписи — короткой
   строкой под сценой. */
.ba-imgs{position:relative;display:block;aspect-ratio:16/10;background:none;gap:0}
.ba-slot{position:absolute;top:50%;left:1.5%;width:50%;aspect-ratio:4/3;
  border-radius:16px;padding:6.5%;
  transform:translateY(-50%) rotate(-3deg);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  transition:transform .55s var(--ease),opacity .45s var(--ease)}
.ba-slot.new{left:auto;right:1.5%;width:55%;z-index:2;
  transform:translateY(-50%) rotate(2deg);
  box-shadow:0 28px 62px rgba(0,0,0,.65)}
.bacard:hover .ba-slot,.bacard:focus-within .ba-slot{
  transform:translateY(-50%) translateX(-3%) rotate(-6deg);opacity:.78}
.bacard:hover .ba-slot.new,.bacard:focus-within .ba-slot.new{
  transform:translateY(-50%) translateX(4%) rotate(0deg) scale(1.06);opacity:1}
.ba-slot .tag{left:10px;top:10px}
.ba-body{padding:18px 22px 22px;gap:9px}
.ba-pair{gap:9px;margin-top:0}
.ba-cell{padding:12px 13px;font-size:12.5px;line-height:1.45}
.ba-cell b{font-size:10px;margin-bottom:5px}
.bacard h4{font-size:clamp(19px,1.8vw,23px)}
@media (max-width:560px){
  .ba-imgs{aspect-ratio:16/11}
  .ba-body{padding:16px 16px 18px}
  .ba-pair{grid-template-columns:1fr}
  .ba-cell{padding:11px 12px;font-size:12px}
}

/* ---------- телефон: «как сейчас / как будет» складываются ----------
   В развёрнутом виде обе колонки давали полтора экрана текста ещё до того,
   как человек решит, что ему интересно. По умолчанию открыт «как будет» —
   то, ради чего он здесь. */
@media (max-width:760px){
  .cmp-h{display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:0;
    user-select:none}
  .cmp-h::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;
    border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .32s var(--ease)}
  .cmp-col ul{max-height:0;overflow:hidden;opacity:0;
    transition:max-height .42s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
  .cmp-col.is-open ul{max-height:760px;opacity:1;margin-top:13px}
  .cmp-col.is-open .cmp-h::after{transform:rotate(-135deg) translate(-2px,-2px);
    border-color:var(--acc)}
}

/* ---------- телефон: шесть карточек «что входит» — стопкой ----------
   В две колонки им было тесно, в одну — длинно. Теперь карточка занимает
   экран целиком и остаётся приклеенной, пока следующая наезжает сверху:
   человек листает колоду, а не ленту. */
@media (max-width:620px){
  .upg{padding:28px 16px}
  .ugrid{display:block;gap:0}
  .ucell{position:sticky;margin:0 0 14px;min-height:0;
    box-shadow:0 -14px 34px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.07)}
  .ucell-img{aspect-ratio:1.25}
  .ucell:nth-child(1){top:74px}
  .ucell:nth-child(2){top:82px}
  .ucell:nth-child(3){top:90px}
  .ucell:nth-child(4){top:98px}
  .ucell:nth-child(5){top:106px}
  .ucell:nth-child(6){top:114px;margin-bottom:0}
}

/* Легенда модулей на телефоне делила строку с чипом и сжималась до 160 px —
   пояснения вылезали за экран. На узком экране колонки идут друг под другом. */
@media (max-width:760px){
  .chipwrap{grid-template-columns:1fr;gap:28px}
  /* легенда в одну колонку: в две пояснение не помещается по ширине */
  .chip-legend{grid-template-columns:1fr!important;display:grid}
  .chip-tip{flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box}
}
@media (max-width:620px){ .ucell-img{aspect-ratio:1.35} }

/* Папка выходит шире: её содержимое — главное на этом такте */
.folder{width:56%}
@media (max-width:700px){ .folder{width:66%} }

/* В плитке «Обо мне» стояла безличная иконка человека — там должно быть лицо. */
.app-ph{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.app:hover .app-ph{filter:none}

/* Плашка с двумя мыслями прижималась к краям экрана: она лежит прямо
   в секции, без общего жёлоба. Возвращаю отступы. */
.life-why{margin-inline:auto;width:min(980px,100% - var(--gut)*2)}
@media (max-width:620px){ .life-why{width:calc(100% - var(--gut)*2);padding:22px 18px} }

/* Логобук в анимации архива подписан как остальные файлы — красным PDF,
   а не серой плашкой: раньше она читалась как чужой элемент. */
.af.is-book .af-badge b{background:#d0342c;color:#fff}

/* ---------- телефон: колоды вместо лент ----------
   «Было и стало» и два блока «по частям / системой» идут стопкой:
   карточка держится у верха, следующая наезжает сверху. Свайп вбок здесь
   хуже — пары «до/после» надо сравнивать, не теряя предыдущую из виду. */
@media (max-width:620px){
  .ba{display:block;grid-template-columns:none;gap:0;margin-inline:0;padding:0}
  .bacard{position:sticky;margin:0 0 16px;
    box-shadow:0 -16px 38px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.07)}
  .bacard:nth-child(1){top:74px}
  .bacard:nth-child(2){top:84px}
  .bacard:nth-child(3){top:94px}
  .bacard:nth-child(4){top:104px}
  .bacard:nth-child(5){top:114px;margin-bottom:0}
  .bacard.ba-wide{grid-column:auto}

  .split{display:block}
  .sblock{position:sticky;margin:0 0 16px;
    box-shadow:0 -16px 38px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.07)}
  .sblock:nth-child(1){top:74px}
  .sblock:nth-child(2){top:86px;margin-bottom:0}
}

/* Иконки каналов под архивом рисуются заливкой, как весь набор: правило
   .at-c svg задавало им обводку, и они выглядели контурными белыми ящиками. */
.at-c svg.cic{fill:rgba(245,245,247,.78);stroke:none;padding:15px;
  border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);box-sizing:border-box}
.archto.go .at-c:nth-child(4){transition-delay:.27s}

/* ---------- девять модулей ART-OS: сетка, а не список ----------
   Было 3×3 — читалось как система. Список в столбик дал лишний экран
   прокрутки и перестал показывать, что модулей именно девять.
   Пояснение раскрывается одной широкой полосой под сеткой. */
.chip-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  flex-direction:unset}
.chip-li{flex-direction:column;align-items:flex-start;gap:7px;padding:13px 13px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;min-width:0}
.chip-li.is-now{border-color:rgba(254,74,35,.42)}
.chip-tip{display:none}
.chip-exp{margin-top:12px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  max-height:0;opacity:0;border-width:0;
  transition:max-height .36s var(--ease),opacity .26s var(--ease),
             margin .3s var(--ease),border-width .3s}
.chip-exp.is-open{max-height:200px;opacity:1;border-width:1px}
.chip-exp__in{padding:15px 17px;display:flex;gap:12px;align-items:flex-start}
.chip-exp__n{flex:none;font-size:11px;color:var(--acc);letter-spacing:.06em;padding-top:2px}
.chip-exp__t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.chip-exp__d{font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:760px){
  .chip-legend{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  .chip-li{padding:11px 10px;gap:5px}
  .chip-n{font-size:10px}
}
@media (max-width:430px){ .chip-legend{grid-template-columns:repeat(2,minmax(0,1fr))!important} }

/* ---------- телефон: «Отвечаю лично» колодой ---------- */
@media (max-width:620px){
  .why-grid{display:block}
  .why-card{position:sticky;margin:0 0 14px;
    background:var(--panel2);border:1px solid rgba(255,255,255,.07);border-radius:20px;
    padding:20px 18px;box-shadow:0 -16px 36px rgba(0,0,0,.6)}
  .why-card:nth-child(1){top:74px}
  .why-card:nth-child(2){top:82px}
  .why-card:nth-child(3){top:90px}
  .why-card:nth-child(4){top:98px}
  .why-card:nth-child(5){top:106px}
  .why-card:nth-child(6){top:114px;margin-bottom:0}
}

/* ---------- герой страницы: сборка знака прямо на первом экране ----------
   Прежняя графика героя осталась в разметке — на ней висит свой скраб,
   трогать его незачем. Она скрыта, а сцену занимает полная анимация
   с объёмом: та же, что на главной, с тем же разгоном. */
#heroArt{display:none!important}
.hero-stage{position:relative}
.hero-stage #movArt{width:100%;height:auto;max-height:62svh;display:block}
/* У .mov-3d уже есть inset:0 и object-fit:contain — сцена героя
   стала для него контейнером, своего правила размера не нужно. */
.hero-stage #mov3d{pointer-events:none}
.hero-beat{margin-top:14px;max-width:58ch;font-size:clamp(12.5px,1.05vw,15px);
  line-height:1.5;color:var(--muted)}
.hero-beat b{display:block;color:var(--text);font-weight:600;margin-bottom:3px}
@media (max-width:860px){
  .hero-stage #movArt{max-height:46svh}
  .hero-beat{font-size:12.5px;margin-top:10px}
}