/* ============================================================
   Типографии СПб — стили v3 (2026-09)
   Язык: печатный лист. Белая бумага, чёрная краска, триада CMY.
   Прямые углы, линейки вместо рамок, отточие в прайсах,
   приводочные метки, «печатный» проход вместо обычного fade.
   ============================================================ */

@font-face { font-family: 'Unbounded'; src: url('/assets/fonts/unbounded.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --c: #00aeef; --m: #e6007e; --y: #ffe600; --k: #16181d;
  --ink: #16181d; --ink-soft: #454a55; --gray-soft: #737986;
  --paper: #fff; --bg: #f4f5f7; --paper-warm: #f4f5f7;
  --gray-line: #dfe1e7; --line-strong: #b9bdc9;
  /* совместимость со старыми именами (встроенные стили в HTML) */
  --terracotta: var(--m); --terracotta-dark: #b80065; --accent: var(--m); --ochre: var(--y); --olive: #454a55; --teal: #0087ba; --red-stamp: var(--m);
  --cream: var(--paper); --cream-light: var(--bg); --border-soft: var(--gray-line);
  --font-display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: var(--font-body); --font-mono: var(--font-body);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --misreg: -5px 5px 0 var(--c), 5px -5px 0 var(--m);
  --line-1: #d8232a; --line-2: #0078c1; --line-3: #019b48; --line-4: #ea8a2c; --line-5: #6c1d80; --line-6: #80553e;
  --sy: 0; --mx: 0; --my: 0; --skew: 0;
  --w: 1280px; --pad: 32px;
}

:root {
  --i-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E");
  --i-briefcase: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='7'%20width='18'%20height='13'%20rx='1.5'/%3E%3Cpath%20d='M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2013h18'/%3E%3C/svg%3E");
  --i-cal: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='1.5'/%3E%3Cpath%20d='M8%203v4M16%203v4M3%2010h18'/%3E%3C/svg%3E");
  --i-calc: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='3'%20width='14'%20height='18'%20rx='1.5'/%3E%3Cpath%20d='M8.5%207.5h7M8.5%2012h.01M12%2012h.01M15.5%2012h.01M8.5%2016h.01M12%2016h.01M15.5%2016h.01'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a8%208%200%200%201-11.8%207L4%2020l1.1-4.6A8%208%200%201%201%2021%2012Z'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h9l4%204v14H6z'/%3E%3Cpath%20d='M15%203v4h4M9%2012h7M9%2016h5'/%3E%3C/svg%3E");
  --i-ext: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207'/%3E%3Cpath%20d='M8%207h9v9'/%3E%3C/svg%3E");
  --i-grid: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7.5'%20height='7.5'/%3E%3Crect%20x='13.5'%20y='3'%20width='7.5'%20height='7.5'/%3E%3Crect%20x='3'%20y='13.5'%20width='7.5'%20height='7.5'/%3E%3Crect%20x='13.5'%20y='13.5'%20width='7.5'%20height='7.5'/%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2011%209-8%209%208'/%3E%3Cpath%20d='M5%209.5V21h14V9.5'/%3E%3Cpath%20d='M10%2021v-6h4v6'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v6M12%207.5h.01'/%3E%3C/svg%3E");
  --i-metro: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2019%208%206l4%208%204-8%204%2013'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s7-5.5%207-11a7%207%200%201%200-14%200c0%205.5%207%2011%207%2011z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.6'/%3E%3C/svg%3E");
  --i-printer: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%208V3h10v5'/%3E%3Crect%20x='3'%20y='8'%20width='18'%20height='9'%20rx='1.5'/%3E%3Cpath%20d='M7%2014h10v7H7zM17%2011.5h.01'/%3E%3C/svg%3E");
  --i-regmark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Cpath%20d='M12%202v20M2%2012h20'/%3E%3C/svg%3E");
  --i-send: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%203%2010%2014'/%3E%3Cpath%20d='m21%203-7%2018-4-7-7-4z'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%203%202.7%205.8%206.3.8-4.6%204.4%201.2%206.3L12%2017.2%206.4%2020.3l1.2-6.3L3%209.6l6.3-.8z'/%3E%3C/svg%3E");
}

@view-transition { navigation: auto; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
em { font-style: normal; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--y); color: var(--ink); }
:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }

.container { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.container--narrow { max-width: 860px; }

/* ---------- межстраничный переход: четыре краски проходят по листу ---------- */
.pt { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; grid-template-rows: repeat(4, 1fr); }
.pt i { display: block; transform: translateX(-101%); will-change: transform; }
.pt i:nth-child(1) { background: var(--c); --n: 0; } .pt i:nth-child(2) { background: var(--m); --n: 1; }
.pt i:nth-child(3) { background: var(--y); --n: 2; } .pt i:nth-child(4) { background: var(--k); --n: 3; }
html.pt-leave .pt { pointer-events: all; }
html.pt-leave .pt i { animation: pt-in .42s var(--ease-io) both; animation-delay: calc(var(--n) * 45ms); }
html.pt-enter .pt i { animation: pt-out .62s var(--ease-io) both; animation-delay: calc(80ms + var(--n) * 55ms); }
@keyframes pt-in { from { transform: translateX(-101%); } to { transform: none; } }
@keyframes pt-out { from { transform: none; } to { transform: translateX(101%); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01s; }

/* индикатор прокрутки */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 300; background: linear-gradient(90deg, var(--c) 0 33.3%, var(--m) 33.3% 66.6%, var(--y) 66.6% 100%); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ============================ ШАПКА ============================ */
.header { position: sticky; top: 0; z-index: 200; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ink); }
.header__bar { background: var(--ink); color: #fff; font-size: 13px; overflow: hidden; max-height: 40px; transition: max-height .4s var(--ease); }
.header.is-stuck .header__bar { max-height: 0; }
.header__bar-inner { max-width: var(--w); margin: 0 auto; padding: 9px var(--pad); display: flex; justify-content: space-between; gap: 20px; }
.header__bar-item { color: rgba(255, 255, 255, .78); white-space: nowrap; }
.header__bar-item:first-child { padding-left: 62px; position: relative; }
.header__bar-item:first-child::before { content: ''; position: absolute; left: 0; top: 50%; width: 52px; height: 10px; margin-top: -5px; background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, #fff 75% 100%); }
.header__bar-item:last-child { display: inline-flex; align-items: center; gap: 7px; }
.header__bar-item:last-child::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-clock) center / contain no-repeat; mask: var(--i-clock) center / contain no-repeat; }
.header__main { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: height .4s var(--ease); }
.header.is-stuck .header__main { height: 60px; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo__mark { width: 42px; height: 42px; flex: none; font-size: 0; }
.logo__mark svg { width: 100%; height: 100%; isolation: isolate; overflow: visible; }
.logo__mark circle { mix-blend-mode: multiply; transition: transform .6s var(--ease); transform-box: fill-box; transform-origin: center; }
.logo:hover .logo__mark circle:nth-child(1) { transform: translate(-4px, -3px); }
.logo:hover .logo__mark circle:nth-child(2) { transform: translate(4px, -3px); }
.logo:hover .logo__mark circle:nth-child(3) { transform: translateY(4px); }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.logo__sub { font-size: 12px; color: var(--gray-soft); }

.nav { display: flex; height: 100%; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.nav__link::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .55; -webkit-mask: var(--ni) center / contain no-repeat; mask: var(--ni) center / contain no-repeat; transition: opacity .2s, transform .4s var(--ease); }
.nav__link:nth-child(1) { --ni: var(--i-home); } .nav__link:nth-child(2) { --ni: var(--i-metro); } .nav__link:nth-child(3) { --ni: var(--i-grid); }
.nav__link:nth-child(4) { --ni: var(--i-pin); } .nav__link:nth-child(5) { --ni: var(--i-briefcase); } .nav__link:nth-child(6) { --ni: var(--i-doc); } .nav__link:nth-child(7) { --ni: var(--i-calc); }
.nav__link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 4px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav__link:hover { color: var(--ink); }
.nav__link:hover::before { opacity: 1; transform: translateY(-2px); }
.nav__link:hover::after, .nav__link.active::after { transform: none; }
.nav__link.active { color: var(--ink); }
.nav__link.active::before { opacity: 1; }
.nav__link.active::after { background: linear-gradient(90deg, var(--c) 0 33.3%, var(--m) 33.3% 66.6%, var(--y) 66.6%); }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--ink); background: var(--paper); position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 14px; } .burger span:nth-child(2) { top: 20px; } .burger span:nth-child(3) { top: 26px; }
.burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================ ПЕРВЫЙ ЭКРАН ============================ */
.hero { position: relative; background: var(--paper); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; max-width: var(--w); margin: 0 auto; padding: 96px var(--pad) 72px; transform: translateY(calc(var(--sy) * -.06px)); }
.hero__top { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gray-soft); margin-bottom: 30px; }
.hero__top-line { width: 34px; height: 10px; background: linear-gradient(90deg, var(--c) 0 33.3%, var(--m) 33.3% 66.6%, var(--y) 66.6%); }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5.6vw, 78px); line-height: 1.03; letter-spacing: -.045em; }
.hero__title span { display: block; overflow: hidden; padding: .04em .12em .1em; margin: 0 -.12em; }
.hero__title span > b { display: block; font-weight: inherit; animation: line-up 1s var(--ease) both; }
.hero__title span:nth-child(2) > b { animation-delay: .09s; } .hero__title span:nth-child(3) > b { animation-delay: .18s; }
@keyframes line-up { from { transform: translateY(105%); } }
.hero__accent > b { width: fit-content; text-shadow: calc(-4px - var(--mx) * 5px) calc(-3px - var(--my) * 4px) 0 var(--c), calc(5px + var(--mx) * 5px) calc(4px + var(--my) * 4px) 0 var(--m); }
.hero__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-top: 52px; }
.hero__lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 33em; animation: rise .9s .4s var(--ease) both; }
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--ink); animation: rise .9s .5s var(--ease) both; }
.hero__stats > div { padding: 18px 14px 4px 0; position: relative; }
.hero__stats > div + div { padding-left: 16px; border-left: 1px solid var(--gray-line); }
.hero__stats > div::before { content: ''; display: block; width: 22px; height: 22px; margin-bottom: 14px; background: var(--ink); -webkit-mask: var(--si) center / contain no-repeat; mask: var(--si) center / contain no-repeat; }
.hero__stats > div:nth-child(1) { --si: var(--i-printer); } .hero__stats > div:nth-child(2) { --si: var(--i-metro); }
.hero__stats > div:nth-child(3) { --si: var(--i-grid); } .hero__stats > div:nth-child(4) { --si: var(--i-chat); }
.hero__stats > div::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; animation: grow 1s .9s var(--ease) forwards; }
.hero__stats > div:nth-child(2)::after { background: var(--m); animation-delay: 1s; } .hero__stats > div:nth-child(3)::after { background: var(--y); animation-delay: 1.1s; } .hero__stats > div:nth-child(4)::after { display: none; }
@keyframes grow { to { transform: none; } }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13.5px; line-height: 1.35; color: var(--gray-soft); margin-top: 6px; }

.hero__art { position: absolute; z-index: 1; right: -110px; top: -120px; width: min(42vw, 580px); pointer-events: none; transform: translateY(calc(var(--sy) * .22px)) rotate(calc(var(--sy) * .035deg)); }
.hero__art svg { width: 100%; height: auto; isolation: isolate; overflow: visible; }
.hero__art .par { transition: transform .9s var(--ease); }
.hero__art .par-c { transform: translate(calc(var(--mx) * -26px), calc(var(--my) * -18px)); }
.hero__art .par-m { transform: translate(calc(var(--mx) * 30px), calc(var(--my) * -14px)); }
.hero__art .par-y { transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 28px)); }
.hero__art circle.ink { mix-blend-mode: multiply; transform-box: fill-box; transform-origin: center; }
.hero__art .ink-c { animation: reg-c 1.8s var(--ease) both, drift-a 13s ease-in-out 2s infinite alternate; }
.hero__art .ink-m { animation: reg-m 1.8s var(--ease) both, drift-b 16s ease-in-out 2s infinite alternate; }
.hero__art .ink-y { animation: reg-y 1.8s var(--ease) both, drift-c 19s ease-in-out 2s infinite alternate; }
.hero__art .regmark { transform-box: fill-box; transform-origin: center; animation: spin-in 2s var(--ease) both; }
.hero__art .crop { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 1s 1s var(--ease) forwards; }
@keyframes reg-c { from { transform: translate(-140px, -80px) scale(.6); opacity: 0; } }
@keyframes reg-m { from { transform: translate(140px, -80px) scale(.6); opacity: 0; } }
@keyframes reg-y { from { transform: translate(0, 160px) scale(.6); opacity: 0; } }
@keyframes spin-in { from { transform: rotate(-270deg) scale(0); opacity: 0; } }
@keyframes drift-a { to { transform: translate(-10px, 8px); } }
@keyframes drift-b { to { transform: translate(12px, 6px); } }
@keyframes drift-c { to { transform: translate(4px, -12px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.hero__top { animation: rise .8s var(--ease) both; }

/* ---------- первый экран внутренних страниц ---------- */
.page-hero, .hero--inner { position: relative; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 22px 0 64px; overflow: hidden; }
main > .container:first-child { background: var(--paper); max-width: none; padding: 0; }
main > .container:first-child .breadcrumbs { max-width: var(--w); margin: 0 auto; padding: 22px var(--pad) 0; }
.page-hero::before, .hero--inner::before, .page-hero::after, .hero--inner::after { content: ''; position: absolute; border-radius: 50%; mix-blend-mode: multiply; pointer-events: none; width: 320px; height: 320px; }
.page-hero::before, .hero--inner::before { right: calc(50% - var(--w) / 2 + 130px); top: -170px; background: var(--c); animation: reg-c 1.3s var(--ease) both; translate: 0 calc(var(--sy) * .18px); }
.page-hero::after, .hero--inner::after { right: calc(50% - var(--w) / 2 - 20px); top: -100px; background: var(--y); animation: reg-m 1.3s var(--ease) both; translate: 0 calc(var(--sy) * .3px); }
.page-hero .container, .hero--inner .container { position: relative; z-index: 2; }
.page-hero__icon { position: absolute; z-index: 3; right: calc(50% - var(--w) / 2 + 84px); top: 26px; width: 150px; height: 150px; color: var(--ink); pointer-events: none; animation: icon-in 1.2s .35s var(--ease) both; }
.page-hero__icon svg { width: 100%; height: 100%; stroke-width: 1.1; }
.page-hero__icon svg * { stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 1.8s .5s var(--ease) forwards; }
@keyframes icon-in { from { opacity: 0; transform: scale(.7) rotate(-12deg); } }
.page-hero__label, .hero__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-soft); margin: 30px 0 16px; animation: rise .8s var(--ease) both; }
.page-hero__label::before, .hero__eyebrow::before { content: ''; width: 26px; height: 8px; flex: none; background: linear-gradient(90deg, var(--c) 0 33.3%, var(--m) 33.3% 66.6%, var(--y) 66.6%); }
.page-hero__label span[class^="line-"] { display: none !important; }
.page-hero__title, .hero--inner .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.04em; max-width: 15em; animation: rise .9s .06s var(--ease) both; }
.hero--inner .hero__title span { display: inline; overflow: visible; }
.page-hero__text, .hero--inner .hero__lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 38em; margin-top: 22px; animation: rise .9s .16s var(--ease) both; }

.breadcrumbs { font-size: 14px; color: var(--gray-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs a { text-decoration: none; color: var(--ink-soft); background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease), color .2s; }
.breadcrumbs a:hover { color: var(--ink); background-size: 100% 1px; }
.breadcrumbs a:first-child { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs a:first-child::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-home) center / contain no-repeat; mask: var(--i-home) center / contain no-repeat; }
.breadcrumbs__sep { color: var(--line-strong); }

/* ============================ СЕКЦИИ ============================ */
.section { padding: 0 0 96px; }
.hero + .marquee + .section, .page-hero + .section, .hero--inner + .section, main > .section:first-of-type { padding-top: 72px; }
.section > .container { position: relative; }
.section > .container:has(> .section__head)::before { content: ''; display: block; height: 3px; background: var(--ink); margin-bottom: 26px; transform-origin: 0 50%; grid-column: 1 / -1; }
.section > .container:has(> .section__head)::after { /* приводочная метка на конце линейки: вращается вместе с прокруткой */
  content: ''; position: absolute; right: var(--pad); top: -10px; width: 23px; height: 23px; background: var(--ink); box-shadow: 0 0 0 6px var(--paper);
  -webkit-mask: var(--i-regmark) center / contain no-repeat; mask: var(--i-regmark) center / contain no-repeat; rotate: calc(var(--sy) * .25deg);
}
.js .section > .container:has(> .section__head)::before { transform: scaleX(0); transition: transform 1.2s var(--ease-io); }
.js .section > .container.in::before { transform: none; }
.js .section > .container:has(> .section__head)::after { opacity: 0; transition: opacity .5s 1s; }
.js .section > .container.in::after { opacity: 1; }

.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: 1.1; letter-spacing: -.04em; max-width: 20em; }
h3.section__title { font-size: clamp(19px, 2vw, 24px); }
.section__title:has(.section__icon) { display: flex; align-items: flex-start; gap: 16px; }
.section__icon { width: 1.15em; height: 1.15em; flex: none; margin-top: -.02em; color: var(--ink); }
.section__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.section__meta { font-size: 14px; color: var(--gray-soft); white-space: nowrap; padding-bottom: 6px; }
.js .section > .container > .section__head .section__title, .js .section > .container > .section__head .section__meta, .js .blog-category > .section__title { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 1s .15s var(--ease), transform 1s .15s var(--ease); }
.js .container.in > .section__head .section__title, .js .container.in > .section__head .section__meta, .js .blog-category.in .section__title { clip-path: inset(-10% -5% -20% -5%); transform: none; }
.js .section__icon svg * { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.6s .4s var(--ease); }
.js .in .section__icon svg * { stroke-dashoffset: 0; }

/* редакционная раскладка: заголовок слева (липкий), содержимое справа */
@media (min-width: 1021px) {
  .section > .container:has(> .section__head):not(:has(> .print-grid, > .prints-list, > .services, > .services-grid, > .metro-grid, > .info-cols, > .calc-block)) { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.5fr); column-gap: 72px; align-items: start; }
  .section > .container:has(> .section__head):not(:has(> .print-grid, > .prints-list, > .services, > .services-grid, > .metro-grid, > .info-cols, > .calc-block)) > .section__head { grid-column: 1; grid-row: 2 / span 12; position: sticky; top: 96px; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
  .section > .container:has(> .section__head):not(:has(> .print-grid, > .prints-list, > .services, > .services-grid, > .metro-grid, > .info-cols, > .calc-block)) > .section__head .section__title { font-size: clamp(22px, 2.1vw, 30px); }
  .section > .container:has(> .section__head):not(:has(> .print-grid, > .prints-list, > .services, > .services-grid, > .metro-grid, > .info-cols, > .calc-block)) > :not(.section__head) { grid-column: 2; }
}

/* вводный текст: лид слева, подробности справа */
@media (min-width: 1021px) {
  .section > .container > .info-text:first-child:not(.info-text--simple):has(> p + p) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .section > .container > .info-text:first-child:not(.info-text--simple):has(> p + p) > p:first-child { grid-column: 1; grid-row: 1 / span 8; font-size: 24px; line-height: 1.42; letter-spacing: -.015em; }
  .section > .container > .info-text:first-child:not(.info-text--simple):has(> p + p) > :not(p:first-child) { grid-column: 2; }
}

/* «печатный проход»: блоки проявляются сверху вниз, как оттиск */
.js .fade-up { clip-path: inset(0 0 100% 0); }
.js .fade-up.visible { clip-path: none; animation: print-in .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes print-in { from { clip-path: inset(0 0 100% 0); transform: translateY(22px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ============================ РЕЙТИНГ ============================ */
.print-grid, .prints-list { display: block; border-bottom: 1px solid var(--ink); }
.print-card { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) 230px; gap: 32px; align-items: center; padding: 30px 24px 30px 0; border-top: 1px solid var(--gray-line); background: linear-gradient(var(--bg), var(--bg)) 0 0 / 0 100% no-repeat; transition: background-size .6s var(--ease); }
.print-card:hover { background-size: 100% 100%; }
.print-card--top { background: var(--ink); color: #fff; border-top-color: var(--ink); padding-left: 0; }
.print-card--top + .print-card { border-top: 0; }
.print-card__rank { text-align: center; }
.print-card__rank-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.06em; color: #d3d6de; font-variant-numeric: tabular-nums; transition: color .4s, text-shadow .5s var(--ease); }
.print-card:hover .print-card__rank-num { color: var(--ink); text-shadow: -4px -3px 0 var(--c), 4px 3px 0 var(--m); }
.print-card--top .print-card__rank-num, .print-card--top:hover .print-card__rank-num { color: var(--y); text-shadow: none; }
.print-card__rank-label { display: none; }
.print-card__name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.print-card__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0; padding: 3px 9px 3px 7px; background: var(--y); color: var(--ink); }
.print-card__badge::before { content: ''; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--i-star) center / contain no-repeat; mask: var(--i-star) center / contain no-repeat; }
.print-card__desc { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; max-width: 44em; }
.print-card--top .print-card__desc { color: rgba(255, 255, 255, .78); }
.print-card__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 14px; color: var(--gray-soft); }
.print-card--top .print-card__meta { color: rgba(255, 255, 255, .62); }
.print-card__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.print-card__meta-item strong { font-weight: 500; color: var(--ink-soft); }
.print-card--top .print-card__meta-item strong { color: rgba(255, 255, 255, .88); }
.print-card__meta-item::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.print-card__meta-item:nth-child(1) { --ico: var(--i-metro); } .print-card__meta-item:nth-child(2) { --ico: var(--i-cal); } .print-card__meta-item:nth-child(3) { --ico: var(--i-chat); }
.print-card__meta-item.is-address { --ico: var(--i-pin); }
.print-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.print-card__rating { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.04em; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.print-card__rating-stars { font-family: var(--font-body); font-size: 14px; letter-spacing: 2px; color: #f0a500; order: 2; }
.js .print-card__rating-stars { display: none; }
.rating-bar { order: 2; display: block; width: 148px; height: 9px; background: repeating-linear-gradient(90deg, var(--gray-line) 0 4px, transparent 4px 6px); position: relative; }
.rating-bar i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 6px); clip-path: inset(0 100% 0 0); transition: clip-path 1.4s .3s var(--ease-io); }
.visible .rating-bar i { clip-path: inset(0 calc(100% - var(--r) * 100%) 0 0); }
.print-card--top .rating-bar { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 6px); }
.print-card--top .rating-bar i { background: repeating-linear-gradient(90deg, var(--y) 0 4px, transparent 4px 6px); }
.print-card__price { font-size: 13px; color: var(--gray-soft); line-height: 1.35; }
.print-card__price strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.print-card--top .print-card__price { color: rgba(255, 255, 255, .6); }
.print-card--top .print-card__price strong { color: #fff; }

/* кнопки */
.print-card__cta, .cta-block__btn, .lead-form__submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 0; padding: 12px 20px; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; color: #fff; background: var(--ink); isolation: isolate; transition: color .3s, transform .25s var(--ease); }
.print-card__cta::before, .cta-block__btn::before, .lead-form__submit::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--y); transform: translateX(-101%); transition: transform .45s var(--ease-io); }
.print-card__cta:hover, .cta-block__btn:hover, .lead-form__submit:hover { color: var(--ink); }
.print-card__cta:hover::before, .cta-block__btn:hover::before, .lead-form__submit:hover::before { transform: none; }
.print-card__cta:active, .cta-block__btn:active { transform: scale(.97); }
a.print-card__cta::after, a.cta-block__btn::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-ext) center / contain no-repeat; mask: var(--i-ext) center / contain no-repeat; transition: transform .35s var(--ease); }
a.print-card__cta:hover::after, a.cta-block__btn:hover::after { transform: translate(3px, -3px); }
a.print-card__cta[href^="/"]::after { -webkit-mask-image: var(--i-arrow); mask-image: var(--i-arrow); }
a.print-card__cta[href^="/"]:hover::after { transform: translateX(4px); }
a.print-card__cta[href^="http"] { background: var(--m); border-color: var(--m); }
.print-card--top a.print-card__cta { background: var(--y); border-color: var(--y); color: var(--ink); }
.print-card--top a.print-card__cta::before { background: #fff; }
button.print-card__cta { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); font-size: 14px; padding: 9px 16px; }
button.print-card__cta::before { background: var(--ink); }
button.print-card__cta:hover { color: #fff; border-color: var(--ink); }

/* ============================ СЕТКА УСЛУГ ============================ */
.services, .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; padding: 0 1px 1px 0; }
.services-grid--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.service-card { position: relative; display: flex; flex-direction: column; min-height: 250px; margin: 0 -1px -1px 0; padding: 26px 26px 24px; border: 1px solid var(--gray-line); background: var(--paper); text-decoration: none; color: var(--ink); isolation: isolate; overflow: hidden; transition: color .35s; }
.service-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fill, var(--y)); transform: translateY(101%); transition: transform .55s var(--ease-io); }
.service-card:nth-child(3n+1) { --fill: var(--c); } .service-card:nth-child(3n+2) { --fill: var(--y); } .service-card:nth-child(3n) { --fill: var(--m); --on: #fff; }
.service-card:hover { color: var(--on, var(--ink)); z-index: 1; }
.service-card:hover::before { transform: none; }
.service-card__num { display: none; }
.service-card__icon { width: 40px; height: 40px; margin-bottom: 22px; transition: transform .6s var(--ease); transform-origin: 0 100%; }
.service-card__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.service-card:hover .service-card__icon { transform: scale(1.35) rotate(-6deg); }
.service-card__title { font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; }
.service-card__desc { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .35s; }
.service-card:hover .service-card__desc, .service-card:hover .service-card__meta { color: inherit; }
.service-card__meta { font-size: 13.5px; color: var(--gray-soft); margin-top: 12px; transition: color .35s; }
.service-card__link { margin-top: auto; padding-top: 20px; font-size: 0; display: flex; justify-content: flex-end; }
.service-card__link::after { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transform: rotate(-45deg); transition: transform .5s var(--ease); }
.service-card:hover .service-card__link::after { transform: rotate(0) translateX(4px); }
.blog-category { margin-bottom: 72px; border-top: 3px solid var(--ink); padding-top: 26px; }

/* ============================ МЕТРО ============================ */
.metro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; padding: 0 1px 1px 0; }
.metro-card { position: relative; display: flex; align-items: center; min-height: 66px; margin: 0 -1px -1px 0; padding: 12px 16px 12px 22px; border: 1px solid var(--gray-line); background: var(--paper); text-decoration: none; color: var(--ink); isolation: isolate; overflow: hidden; transition: color .3s; }
.metro-card__dot { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 0; transition: width .5s var(--ease-io); }
.metro-card:hover { color: #fff; z-index: 1; }
.metro-card:hover .metro-card__dot { width: 100%; }
.metro-card__name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.metro-card__line { font-size: 12.5px; color: var(--gray-soft); transition: color .3s; }
.metro-card:hover .metro-card__line { color: rgba(255, 255, 255, .8); }
.line-1 { background: var(--line-1); color: var(--line-1); } .line-2 { background: var(--line-2); color: var(--line-2); } .line-3 { background: var(--line-3); color: var(--line-3); }
.line-4 { background: var(--line-4); color: var(--line-4); } .line-5 { background: var(--line-5); color: var(--line-5); } .line-6 { background: var(--line-6); color: var(--line-6); }

/* ============================ ТЕКСТ ============================ */
.info-text, .article-body { max-width: 720px; font-size: 18px; line-height: 1.7; }
.info-text p, .article-body p { margin-bottom: 18px; }
.info-text p:first-letter { all: unset; }
.info-text:not(.info-text--simple) > p:first-child { font-size: 22px; line-height: 1.5; letter-spacing: -.01em; margin-bottom: 24px; }
.dropcap { font: inherit; }
.info-text h3, .article-body h2, .article-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.03em; margin: 40px 0 14px; }
.article-body h2 { font-size: 25px; padding-top: 22px; border-top: 1px solid var(--ink); }
.info-text ul, .info-text ol, .article-body ul, .article-body ol { list-style: none; margin-bottom: 20px; }
.info-text li, .article-body li { position: relative; padding: 14px 0 14px 38px; border-top: 1px solid var(--gray-line); }
.info-text li:last-child, .article-body li:last-child { border-bottom: 1px solid var(--gray-line); }
.info-text ul li::before, .article-body ul li::before { content: ''; position: absolute; left: 2px; top: 1.35em; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 6px 0 0 var(--m); mix-blend-mode: multiply; transition: box-shadow .4s var(--ease); }
.info-text ul li:hover::before, .article-body ul li:hover::before { box-shadow: 0 0 0 var(--m); }
.info-text ol, .article-body ol { counter-reset: n; }
.info-text ol li::before, .article-body ol li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--m); }
.js .info-text li, .js .article-body li { opacity: 0; transform: translateX(-14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .info-text.in li, .js .article-body .in li, .js .article-body ul.in li, .js .article-body ol.in li { opacity: 1; transform: none; }
.info-text a, .article-body a { color: var(--ink); text-decoration-color: var(--m); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.article-body th, .article-body td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--gray-line); text-align: left; }
.article-body blockquote { border-left: 6px solid var(--y); padding: 6px 0 6px 22px; margin: 28px 0; font-size: 20px; line-height: 1.5; }

.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 3px solid var(--ink); }
.info-cols > div { padding: 28px 40px 0 0; }
.info-cols > div + div { padding-left: 40px; border-left: 1px solid var(--gray-line); }
.info-cols__heading { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.03em; margin-bottom: 12px; }
.plain-list { list-style: none; }
.plain-list li { padding: 11px 0; border-bottom: 1px solid var(--gray-line); font-size: 16px; }

.related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.related-link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--ink); font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink); isolation: isolate; overflow: hidden; transition: color .3s; }
.related-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .4s var(--ease-io); }
.related-link::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .35s var(--ease); }
.related-link:hover { color: #fff; }
.related-link:hover::before { transform: none; }
.related-link:hover::after { transform: translateX(3px); }
.related-link[href^="#"]::after { transform: rotate(90deg); }
.related-link[href^="#"]:hover::after { transform: rotate(90deg) translateX(3px); }

/* ============================ ПРАЙС: линейки и отточие ============================ */
.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 16.5px; }
.price-table th { font-weight: 500; font-size: 13.5px; color: var(--gray-soft); text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.price-table th:last-child { text-align: right !important; }
.price-table td { padding: 17px 0; vertical-align: bottom; background: radial-gradient(circle, var(--line-strong) 1px, transparent 1.3px) 0 100% / 7px 3px repeat-x; }
.price-table tr { background: linear-gradient(var(--y), var(--y)) 0 0 / 0 100% no-repeat; transition: background-size .5s var(--ease); }
.price-table tbody tr:hover { background-size: 100% 100%; }
.price-table td:first-child { padding-right: 24px; transition: transform .4s var(--ease); }
.price-table tbody tr:hover td:first-child { transform: translateX(12px); }
.price-table tbody tr:hover td:last-child { transform: translateX(-12px); }
.price-table td strong { font-weight: 600; }
.price-table td span { font-family: var(--font-body) !important; color: var(--gray-soft) !important; font-size: 14px !important; transition: color .3s; }
.price-table tbody tr:hover td span { color: var(--ink-soft) !important; }
.price-table td:last-child { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -.03em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; transition: transform .4s var(--ease); }
.js .price-table tbody tr { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease), translate .6s var(--ease), background-size .5s var(--ease); transition-delay: calc(min(var(--i, 0), 14) * 45ms), calc(min(var(--i, 0), 14) * 45ms), 0s; }
.js .price-table.in tbody tr { opacity: 1; translate: 0 0; }
.price-note { font-size: 14px; line-height: 1.55; color: var(--gray-soft); max-width: 720px; padding-left: 26px; position: relative; }
.price-note::before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; }

/* ============================ ПРИЗЫВ ============================ */
.cta-block { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--y); color: var(--ink); padding: 56px; isolation: isolate; }
.cta-block::before { content: ''; position: absolute; inset: -40px; z-index: -1; background-image: radial-gradient(circle, rgba(22, 24, 29, .34) 2px, transparent 2.4px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 0, transparent 58%); mask-image: radial-gradient(ellipse at 100% 100%, #000 0, transparent 58%); animation: raster 26s linear infinite; }
@keyframes raster { to { background-position: 160px 80px; } }
.cta-block::after { content: ''; position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -140px; background: var(--m); mix-blend-mode: multiply; translate: 0 calc((var(--sy) - var(--top, 0)) * -.06px); }
.cta-block__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.9vw, 38px); line-height: 1.08; letter-spacing: -.04em; }
.cta-block__text { font-size: 17px; line-height: 1.6; color: rgba(22, 24, 29, .78); margin-top: 16px; max-width: 36em; }
.cta-block .cta-block__btn { padding: 16px 26px; font-size: 16px; }
.cta-block button.cta-block__btn::after { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-send) center / contain no-repeat; mask: var(--i-send) center / contain no-repeat; }
.cta-block .cta-block__btn::before { background: #fff; }
.cta-block__phones { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cta-block__phone-label { font-size: 14px; color: rgba(22, 24, 29, .66); margin-bottom: 2px; }
.cta-block__phone { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 25px); letter-spacing: -.03em; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 3px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 2px; }
.cta-block__phone::before { content: ''; width: .9em; height: .9em; background: currentColor; -webkit-mask: var(--i-phone) center / contain no-repeat; mask: var(--i-phone) center / contain no-repeat; transition: transform .5s var(--ease); }
.cta-block__phone:hover { background-size: 100% 3px; }
.cta-block__phone:hover::before { transform: rotate(-14deg) scale(1.1); }
.cta-block__phones a.cta-block__btn { background: transparent; color: var(--ink); padding: 10px 16px; font-size: 14.5px; }
.cta-block__phones a.cta-block__btn::before { background: var(--ink); }
.cta-block__phones a.cta-block__btn:hover { color: #fff; }
.calc-result .cta-block__btn, .hero--inner .cta-block__btn { background: var(--m); border-color: var(--m); }

/* ============================ ВОПРОСЫ ============================ */
.faq { border-bottom: 1px solid var(--ink); max-width: 920px; }
.faq__item { border-top: 1px solid var(--gray-line); background: linear-gradient(var(--bg), var(--bg)) 0 0 / 0 100% no-repeat; transition: background-size .5s var(--ease); }
.faq__item:first-child { border-top: 0; }
.faq__item:hover, .faq__item.open { background-size: 100% 100%; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 16px 22px 0; cursor: pointer; font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; user-select: none; transition: padding .4s var(--ease); }
.faq__item:hover .faq__q, .faq__item.open .faq__q { padding-left: 16px; }
.faq__toggle { flex: none; width: 36px; height: 36px; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 22px; font-weight: 400; line-height: 1; transition: transform .5s var(--ease), background .3s, color .3s; }
.faq__item.open .faq__toggle { transform: rotate(135deg); background: var(--ink); color: var(--y); }
.faq__a { color: var(--ink-soft); font-size: 17px; line-height: 1.65; overflow: hidden; max-height: 0; opacity: 0; padding: 0 70px 0 16px; transition: max-height .55s var(--ease), opacity .4s, padding .55s var(--ease); }
.faq__item.open .faq__a { max-height: 640px; opacity: 1; padding-bottom: 26px; }

/* ============================ ЛЕНТА ============================ */
.marquee { background: var(--ink); color: #fff; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; transform-origin: 50% 50%; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: inline-flex; align-items: baseline; gap: 10px; padding: 15px 26px; font-size: 15px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .16); transform: skewX(calc(var(--skew) * 1deg)); transition: transform .3s; }
.marquee__track span b { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: var(--y); font-variant-numeric: tabular-nums; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================ СЛОВАРЬ ============================ */
.glossary-alpha { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 48px; position: sticky; top: 60px; z-index: 5; background: var(--paper); padding: 12px 1px 13px 0; border-bottom: 1px solid var(--ink); }
.glossary-letter { width: 42px; height: 42px; margin: 0 -1px -1px 0; display: grid; place-items: center; border: 1px solid var(--gray-line); font-family: var(--font-display); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); transition: background .25s, color .25s; }
.glossary-letter:hover { background: var(--ink); color: var(--y); border-color: var(--ink); z-index: 1; }
.glossary-group-title { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.05em; color: var(--ink); text-shadow: -4px -3px 0 var(--c), 4px 3px 0 var(--m); margin: 64px 0 18px; scroll-margin-top: 150px; }
.glossary-item { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr); gap: 32px; padding: 20px 0; border-top: 1px solid var(--gray-line); max-width: 1000px; }
.glossary-term { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.glossary-desc { color: var(--ink-soft); font-size: 16.5px; }

/* ============================ КАЛЬКУЛЯТОР ============================ */
.calc-block { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border: 1px solid var(--ink); }
.calc-fields { display: grid; gap: 18px; align-content: start; padding: 32px; }
.calc-field { display: grid; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.calc-input, .lead-form__field input, .lead-form__field select, .lead-form__field textarea { width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: var(--paper); border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 10px 2px; transition: background .25s, box-shadow .3s var(--ease), padding .3s var(--ease); }
.calc-input:focus, .lead-form__field input:focus, .lead-form__field select:focus, .lead-form__field textarea:focus { outline: 0; background: var(--bg); padding-left: 10px; box-shadow: 0 3px 0 var(--c); }
.calc-result { background: var(--ink); color: #fff; padding: 32px; }
.calc-result__label { font-size: 14px; color: rgba(255, 255, 255, .6); }
.calc-result__total { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -.05em; color: var(--y); margin: 8px 0; font-variant-numeric: tabular-nums; }
.calc-result__per-copy { color: rgba(255, 255, 255, .8); }
.calc-result__note { font-size: 13.5px; color: rgba(255, 255, 255, .55); margin-top: 18px; }

/* ============================ ПОДВАЛ ============================ */
.footer { background: var(--ink); color: rgba(255, 255, 255, .7); position: relative; overflow: hidden; }
.footer::before { content: ''; display: block; height: 8px; background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, #fff 75%); }
.footer__inner { max-width: var(--w); margin: 0 auto; padding: 64px var(--pad) 0; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.footer .logo { color: #fff; }
.footer .logo__mark circle { mix-blend-mode: screen; }
.footer .logo__sub { color: rgba(255, 255, 255, .5); }
.footer__about { font-size: 15px; line-height: 1.6; margin-top: 20px; max-width: 30em; }
.footer__col-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.footer__col-title::before { content: ''; width: 17px; height: 17px; background: var(--y); -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat; }
.footer__top > div:nth-child(2) { --fi: var(--i-printer); } .footer__top > div:nth-child(3) { --fi: var(--i-metro); } .footer__top > div:nth-child(4) { --fi: var(--i-grid); }
.footer__list { list-style: none; display: grid; gap: 9px; }
.footer__link { font-size: 15px; text-decoration: none; color: rgba(255, 255, 255, .7); background: linear-gradient(var(--y), var(--y)) 0 100% / 0 2px no-repeat; transition: color .2s, background-size .4s var(--ease); padding-bottom: 2px; }
.footer__link:hover { color: #fff; background-size: 100% 2px; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.footer__inner::after { content: 'типографии-спб.рф'; display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 9.6vw, 148px); line-height: .8; letter-spacing: -.06em; white-space: nowrap; color: transparent; background: linear-gradient(90deg, var(--c), var(--m) 50%, var(--y)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; opacity: .9; margin: 44px 0 -0.08em -0.04em; translate: calc((1 - var(--fp, 1)) * -8%) calc((1 - var(--fp, 1)) * 40%); }

/* ============================ ФОРМА ============================ */
.lead-modal { position: fixed; inset: 0; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 50px 20px; }
.lead-modal.open { visibility: visible; opacity: 1; }
.lead-modal__backdrop { position: fixed; inset: 0; background: rgba(22, 24, 29, .76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; }
.lead-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 520px; background: var(--paper); padding: 44px; box-shadow: -10px 10px 0 var(--c), 10px -10px 0 var(--m); clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: transform .6s var(--ease), clip-path .6s var(--ease), box-shadow .6s .3s var(--ease); }
.lead-modal:not(.open) .lead-modal__dialog { box-shadow: 0 0 0 var(--c), 0 0 0 var(--m); }
.lead-modal.open .lead-modal__dialog { transform: none; clip-path: inset(-20px); }
.lead-modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 24px; line-height: 1; transition: background .2s, color .2s, transform .45s var(--ease); }
.lead-modal__close:hover { background: var(--ink); color: var(--y); transform: rotate(90deg); }
.lead-modal__eyebrow { font-size: 14px; color: var(--m); font-weight: 600; }
.lead-modal__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.04em; line-height: 1.12; margin: 8px 0 10px; }
.lead-modal__lead { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 24px; }
.lead-form { display: grid; gap: 16px; }
.lead-form__field { display: grid; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--gray-soft); }
.lead-form__field em { color: var(--m); }
.lead-form__submit { background: var(--m); border-color: var(--m); padding: 16px 22px; margin-top: 6px; width: 100%; font-size: 16px; }
.lead-form__submit::after { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-send) center / contain no-repeat; mask: var(--i-send) center / contain no-repeat; }
.lead-form__note { font-size: 12.5px; line-height: 1.5; color: var(--gray-soft); }
.lead-form__success { text-align: center; }
.lead-form__success h4 { font-family: var(--font-display); font-size: 22px; letter-spacing: -.03em; margin-bottom: 10px; }
.lead-form__phone { display: inline-block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--m); text-decoration: none; }

.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 50px; height: 50px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .45s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--y); box-shadow: -4px 4px 0 var(--c), 4px -4px 0 var(--m); }
.to-top svg { width: 22px; height: 22px; }

section[id] { scroll-margin-top: 100px; }
.section > .container > div:has(> .section__head) { border-top: 3px solid var(--ink); padding-top: 24px; margin-bottom: 64px !important; }
.section > .container > div > .section__head .section__title { font-size: clamp(20px, 2.2vw, 28px) !important; display: flex; align-items: center; }

/* ============================ АДАПТИВ ============================ */
@media (max-width: 1180px) { .nav__link::before { display: none; } .nav__link { padding: 0 11px; } .nav__link::after { left: 11px; right: 11px; } }
@media (max-width: 1020px) {
  :root { --pad: 24px; }
  .nav { position: fixed; inset: 0; height: auto; z-index: -1; background: var(--paper); flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 var(--pad); gap: 0; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease-io), visibility .6s; }
  .nav.active { clip-path: inset(0); visibility: visible; }
  .nav__link { width: 100%; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.04em; padding: 14px 0; border-top: 1px solid var(--gray-line); color: var(--ink); gap: 16px; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .nav__link::before { display: block; width: 24px; height: 24px; opacity: 1; }
  .nav__link::after { display: none; }
  .nav.active .nav__link { opacity: 1; transform: none; }
  .nav.active .nav__link:nth-child(1) { transition-delay: .2s; } .nav.active .nav__link:nth-child(2) { transition-delay: .25s; } .nav.active .nav__link:nth-child(3) { transition-delay: .3s; }
  .nav.active .nav__link:nth-child(4) { transition-delay: .35s; } .nav.active .nav__link:nth-child(5) { transition-delay: .4s; } .nav.active .nav__link:nth-child(6) { transition-delay: .45s; } .nav.active .nav__link:nth-child(7) { transition-delay: .5s; }
  .burger { display: block; z-index: 2; }
  .hero__row { grid-template-columns: 1fr; gap: 36px; }
  .hero__art { width: 72vw; right: -26vw; top: -16vw; opacity: .5; }
  .page-hero__icon { display: none; }
  .page-hero::before, .hero--inner::before { right: 60px; } .page-hero::after, .hero--inner::after { right: -90px; }
  .print-card { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 24px 16px 24px 0; align-items: start; }
  .print-card__rank-num { font-size: 40px; }
  .print-card__side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .print-card__rating { flex-direction: row; align-items: center; gap: 12px; font-size: 24px; }
  .cta-block { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .info-cols, .calc-block { grid-template-columns: 1fr; }
  .info-cols > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--gray-line); margin-top: 28px; }
  .glossary-item { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  :root { --pad: 18px; }
  body { font-size: 16px; }
  .header__bar-item:last-child, .logo__sub { display: none; }
  .hero__inner { padding-top: 56px; padding-bottom: 48px; }
  .hero__stats { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .hero__stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__stats > div:nth-child(n+3) { border-top: 1px solid var(--gray-line); margin-top: 12px; }
  .hero__accent > b { text-shadow: -2px -2px 0 var(--c), 3px 2px 0 var(--m); }
  .section { padding-bottom: 64px; }
  .page-hero::before, .hero--inner::before, .page-hero::after, .hero--inner::after { width: 150px; height: 150px; }
  .page-hero::before, .hero--inner::before { right: 40px; top: -100px; } .page-hero::after, .hero--inner::after { right: -40px; top: -70px; }
  .print-card { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .print-card--top { padding-left: 10px; padding-right: 14px; }
  .print-card__rank-num { font-size: 28px; }
  .print-card__name { font-size: 18px; }
  .print-card__meta { display: grid; gap: 6px; }
  .print-card__meta-item { display: block; }
  .print-card__meta-item::before { display: inline-block; vertical-align: -3px; margin-right: 6px; }
  .service-card { min-height: 0; }
  .price-table { font-size: 15.5px; }
  .price-table td:last-child { white-space: normal; font-size: 14.5px; min-width: 96px; padding-left: 8px; overflow-wrap: anywhere; }
  .price-table td:first-child { padding-right: 10px; }
  .info-text, .article-body { font-size: 16.5px; }
  .info-text:not(.info-text--simple) > p:first-child { font-size: 19px; }
  .faq__q { font-size: 17px; }
  .faq__a { padding-right: 16px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .lead-modal__dialog { padding: 32px 22px; }
  .glossary-alpha { position: static; }
  .glossary-group-title { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .pt { display: none; }
  @view-transition { navigation: none; }
}
@media print {
  .header, .footer, .marquee, .cta-block, .lead-modal, .to-top, .scroll-progress, .pt { display: none !important; }
  .fade-up, .js .price-table tbody tr, .js .info-text li { opacity: 1 !important; clip-path: none !important; transform: none !important; translate: none !important; }
}

.section[data-block="related"] > .container, .section > .container:not(:has(> .section__head)):has(> h3.section__title) { border-top: 1px solid var(--ink); padding-top: 28px; }
.section[data-block="related"] .section__title, .section > .container > h3.section__title { margin-bottom: 22px !important; }