/* запасные шрифты с метриками основных — при подгрузке веб-шрифтов строки не перескакивают (CLS) */
@font-face { font-family: "Noto Fallback"; src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("DejaVu Serif"); size-adjust: 104.3%; ascent-override: 102.5%; descent-override: 28.1%; line-gap-override: 0% }
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 103.8%; ascent-override: 93.4%; descent-override: 29.4%; line-gap-override: 0% }
@font-face { font-family: "Plex Fallback"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0% }
/* ФЕМИДА-Гарант — «Картотека». Строгий синий и серый. Заголовки — Noto Serif Display (контрастная антиква),
   текст и интерфейс — Onest, подписи досье — IBM Plex Mono. Каждое взаимодействие анимировано через transform/opacity. */
:root {
  --navy: #13233D; --navy2: #1B2F4E; --navy3: #24406A; --blue: #2B4C9B; --blue2: #3D63C2; --sky: #A9BEE6;
  --page: #D8DEE7; --paper: #F4F6F9; --paper2: #E9EDF3; --ink: #13213A; --mute: #56637A; --line: #C6CFDB;
  --on: #EEF2F9; --on-mute: #9EACCB; --line-d: rgba(233,238,247,.16);
  --serif: "Noto Serif Display", "Noto Fallback", Georgia, serif;
  --sans: "Onest", "Onest Fallback", Arial, sans-serif; --mono: "IBM Plex Mono", "Plex Fallback", "Courier New", monospace;
  --rail: 64px; --ease: cubic-bezier(.19, 1, .22, 1); --ease2: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; background: var(--page); color: var(--ink) }
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
body { font: 17px/1.6 var(--sans); padding-inline: var(--rail); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
a { color: inherit }
img { max-width: 100%; display: block }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--blue2); outline-offset: 3px; border-radius: 2px }
::selection { background: var(--blue); color: #fff }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; transition: top .3s var(--ease) }
.skip:focus { top: 12px }
.mono { font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute) }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
h1, h2, h3 { text-wrap: balance }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em }
h1 > em, h2 > em, h2 > span { font-style: italic; font-weight: 300 }

/* ===== Кнопки: круговая заливка от курсора, прокрутка подписи, стрелка, магнит ===== */
.line-btn { --x: 50%; --y: 50%; position: relative; display: inline-flex; align-items: center; gap: 14px; border: 1px solid currentColor; background: transparent; padding: 16px 24px; cursor: pointer; font: 500 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; overflow: hidden; isolation: isolate; border-radius: 999px; transition: color .45s var(--ease), border-color .45s var(--ease), transform .25s var(--ease); will-change: transform }
.line-btn::before { content: ""; position: absolute; left: var(--x); top: var(--y); width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--blue2); transform: translate(-50%, -50%) scale(0); transition: transform .65s var(--ease); z-index: -1 }
.line-btn:hover::before, .line-btn:focus-visible::before { transform: translate(-50%, -50%) scale(1) }
.line-btn:hover, .line-btn:focus-visible { color: #fff; border-color: var(--blue2) }
.line-btn:active { transform: scale(.965) }
.line-btn .lbl { display: inline-block; overflow: hidden; height: 1.1em; position: relative }
.line-btn .lbl > span { display: block; transition: transform .5s var(--ease) }
.line-btn .lbl > span::after { content: attr(data-t); position: absolute; left: 0; top: 100% }
.line-btn:hover .lbl > span { transform: translateY(-100%) }
.line-btn .ar { display: inline-grid; place-items: center; width: 1.2em; overflow: hidden; position: relative }
.line-btn .ar i { font-style: normal; display: block; transition: transform .5s var(--ease) }
.line-btn .ar i + i { position: absolute; transform: translateX(-150%) }
.line-btn:hover .ar i:first-child { transform: translateX(150%) }
.line-btn:hover .ar i + i { transform: none }
.line-btn.solid { background: var(--blue); color: #fff; border-color: var(--blue) }
.line-btn.solid::before { background: var(--navy) }
.line-btn.solid:hover { border-color: var(--navy) }
.on-dark .line-btn.solid::before, .cover .line-btn.solid::before, .sheet.dark .line-btn.solid::before { background: var(--on) }
.on-dark .line-btn.solid:hover, .cover .line-btn.solid:hover, .sheet.dark .line-btn.solid:hover { color: var(--navy); border-color: var(--on) }
.line-btn.ghost-light { color: var(--on) }
.line-btn.ghost-light::before { background: var(--on) }
.line-btn.ghost-light:hover { color: var(--navy); border-color: var(--on) }
.ulink { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s }
.ulink:hover, .ulink:focus-visible { background-size: 100% 1px }

/* ===== Рельсы ===== */
.rail { position: fixed; top: 0; bottom: 0; width: var(--rail); z-index: 60; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-block: 22px; background: var(--navy); color: var(--on) }
.rail .mono { color: var(--on-mute) }
.rail.l { left: 0; border-right: 1px solid var(--line-d) }
.rail.r { right: 0; border-left: 1px solid var(--line-d) }
.v { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap }
.rail.r .v { transform: none }
.brand { font: 600 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: letter-spacing .5s var(--ease) }
.brand:hover { letter-spacing: .26em }
.brand b { color: var(--sky) }
.rail .ico { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-d); border-radius: 50%; font: 500 10.5px var(--mono); text-decoration: none; letter-spacing: .04em; position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s, transform .25s var(--ease) }
.rail .ico::before { content: ""; position: absolute; inset: 0; background: var(--on); border-radius: 50%; transform: scale(0); transition: transform .45s var(--ease); z-index: -1 }
.rail .ico:hover { color: var(--navy); border-color: var(--on) }
.rail .ico:hover::before { transform: scale(1) }
.rail .ico:active { transform: scale(.92) }
.rail .stack { display: grid; gap: 8px; justify-items: center }
.rail .phone { text-decoration: none; transition: color .3s }
.rail .phone:hover { color: var(--on) }
.req { background: var(--blue2); color: #fff; border: 0; cursor: pointer; padding: 20px 11px; font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-radius: 999px; position: relative; overflow: hidden; isolation: isolate; transition: color .4s var(--ease) }
.req::before { content: ""; position: absolute; inset: 0; background: var(--on); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1 }
.req:hover { color: var(--navy) }
.req:hover::before { transform: none }

/* ===== Оглавление сверху ===== */
.idx { position: fixed; top: 0; left: var(--rail); right: var(--rail); z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 28px; pointer-events: none; transition: transform .5s var(--ease) }
.idx.hide { transform: translateY(-120%) }
.idx .case { pointer-events: auto; color: var(--on-mute); text-decoration: none; transition: color .3s }
.idx.light .case { color: var(--mute); opacity: 0; pointer-events: none }
.idx .case { transition: color .3s, opacity .35s }
.idx nav { display: flex; gap: 2px; pointer-events: auto; background: rgba(19,35,61,.95); border: 1px solid var(--line-d); padding: 4px; border-radius: 999px; position: relative }
.idx nav a { position: relative; z-index: 1; text-decoration: none; font: 500 11.5px var(--mono); letter-spacing: .1em; padding: 8px 13px; color: var(--on-mute); border-radius: 999px; transition: color .3s var(--ease) }
.idx nav a:hover, .idx nav a.on { color: var(--navy) }
.idx nav .pill { position: absolute; z-index: 0; top: 4px; height: calc(100% - 8px); border-radius: 999px; background: var(--on); transition: left .55s var(--spring), width .55s var(--spring), opacity .3s; opacity: 0; pointer-events: none }

/* ===== Обложка главной ===== */
.cover { position: relative; height: max(660px, 100svh); margin-inline: calc(var(--rail) * -1); overflow: hidden; background: var(--navy); color: var(--on) }
.cover video { will-change: transform; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50% }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,35,61,.94) 0%, rgba(19,35,61,.6) 38%, rgba(19,35,61,0) 64%), linear-gradient(0deg, rgba(19,35,61,.9) 0%, rgba(19,35,61,0) 36%) }
.cover .mono { color: var(--on-mute) }
.cover .in { position: absolute; inset: 0; z-index: 2; padding: 96px calc(var(--rail) + 32px) 42px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px }
.cover .top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.cover h1 { align-self: end; margin: 0; font: 300 clamp(40px, 6vw, 104px)/.96 var(--serif); letter-spacing: -.03em; max-width: 10.5em }
.cover h1 em { color: var(--sky); font-weight: 300 }
.cover .bot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; border-top: 1px solid var(--line-d); padding-top: 20px }
.cover .bot p { margin: 0; max-width: 54ch; color: #C9D3E6 }
.ctas { display: flex; flex-wrap: wrap; gap: 10px }
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: calc(var(--rail) * -1); padding-inline: calc(var(--rail) + 32px); background: var(--navy2); color: var(--on) }
.facts-strip div { padding: 26px 22px 26px 0; border-right: 1px solid var(--line-d); display: grid; gap: 4px }
.facts-strip div + div { padding-left: 22px }
.facts-strip div:last-child { border-right: 0 }
.facts-strip b { font: 400 clamp(30px, 3vw, 46px)/1 var(--serif); letter-spacing: -.02em }
.facts-strip span { font-size: 14px; color: var(--on-mute) }

/* ===== Шапка внутренних страниц ===== */
.pagehead { position: relative; margin-inline: calc(var(--rail) * -1); background: var(--navy); color: var(--on); overflow: hidden }
.pagehead::before { content: ""; position: absolute; right: -10%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(61,99,194,.45), rgba(61,99,194,0) 65%); pointer-events: none }
.pagehead .in { position: relative; padding: 110px calc(var(--rail) + 32px) 48px; display: grid; gap: 22px; max-width: 1400px }
.pagehead h1 { margin: 0; font: 300 clamp(40px, 5.6vw, 92px)/.98 var(--serif); letter-spacing: -.03em; max-width: 10em }
.pagehead h1 em { color: var(--sky) }
.pagehead .lead { margin: 0; max-width: 62ch; color: #C9D3E6; font-size: 18.5px }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--on-mute) }
.crumbs a { text-decoration: none; transition: color .3s }
.crumbs a:hover { color: var(--on) }
.keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-d); max-width: 1000px }
.keyfacts > div { padding: 18px 20px 4px 0; display: grid; gap: 4px }
.keyfacts > div + div { padding-left: 20px; border-left: 1px solid var(--line-d) }
.keyfacts .mono { color: var(--on-mute) }
.keyfacts b { font: 400 30px/1.1 var(--serif) }
.keyfacts small { color: var(--on-mute); font-size: 13.5px }

/* ===== Папки-досье ===== */
.folders { position: relative; padding-block: 80px 40px }
.folder { position: sticky; top: calc(66px + var(--i) * 38px); margin-bottom: 34vh; transform-origin: 50% 0 }
.folder:last-child { margin-bottom: 30px }
.tab { display: inline-flex; gap: 14px; align-items: center; background: var(--navy2); color: var(--on); padding: 11px 36px 9px 20px; margin-left: calc(var(--i) * 104px); font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%) }
.tab b { color: var(--sky); font-weight: 500 }
.sheet { position: relative; background: var(--paper); border-top: 3px solid var(--navy2); padding: clamp(24px, 4vw, 60px); min-height: min(76vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 34px; box-shadow: 0 -18px 40px rgba(19,35,61,.14), 0 1px 0 var(--line) }
.sheet h2 { margin: 0; font: 400 clamp(36px, 5vw, 84px)/.98 var(--serif); letter-spacing: -.03em; max-width: 17ch; color: var(--ink) }
.sheet h2 > span, .sheet h2 > em { color: var(--blue) }
.sheet .lead { margin: 0; color: var(--mute); max-width: 62ch; font-size: 18px }
.sheet.dark { background: var(--navy2); color: var(--on); border-top-color: var(--blue2) }
.sheet.dark .mono, .sheet.dark .consent { color: var(--on-mute) }
.sheet.dark h2 { color: var(--on) }
.sheet.dark h2 > span { color: var(--sky) }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 14px; padding: 16px 12px 16px 0; border-top: 1px solid var(--line); align-items: baseline; text-decoration: none; position: relative; isolation: isolate; transition: padding .45s var(--ease) }
a.row::before { content: ""; position: absolute; inset: 0 -12px; background: var(--paper2); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); z-index: -1 }
a.row:hover { padding-left: 10px }
a.row:hover::before { transform: none }
a.row:hover h3 { color: var(--blue) }
.row .n { font: 400 12px var(--mono); color: var(--blue2) }
.row h3 { margin: 0; font: 500 19px/1.3 var(--sans); transition: color .3s }
.row .p { font: 500 13px var(--mono); white-space: nowrap; color: var(--ink) }
.row .more { grid-column: 2 / -1; color: var(--mute); font-size: 14.5px }
.row.static { grid-template-columns: 44px minmax(0, 1fr) }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line) }
.st { padding: 24px 24px 0 0; display: grid; gap: 10px; align-content: start; position: relative }
.st::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--blue) }
.st b { font: 300 64px/1 var(--serif); color: var(--blue) }
.st h3 { margin: 0; font: 600 18px var(--sans) }
.st p { margin: 0; color: var(--mute); font-size: 15px }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px }
.pr { border-top: 1px solid var(--line); padding-block: 20px; display: grid; gap: 8px }
.pr h3 { margin: 0; font: 400 26px/1.15 var(--serif) }
.pr p { margin: 0; color: var(--mute) }
.who-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center }
.ph { aspect-ratio: 1; max-width: 100%; background: var(--paper2); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; color: var(--mute) }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform 1.2s var(--ease), filter .6s }
.ph:hover img { transform: scale(1.04); filter: saturate(1.05) }
.quote { font: 300 clamp(30px, 3.6vw, 56px)/1.12 var(--serif); letter-spacing: -.02em; margin: 0 0 22px; max-width: 24ch }
.quote b, .quote em { font-weight: 400; font-style: italic; color: var(--blue) }
.sig { display: grid; gap: 4px; margin: 0 0 24px }
.prose { max-width: 72ch; font-size: 17.5px }
.prose h2, .prose h3 { font: 400 28px/1.2 var(--serif); margin: 28px 0 8px; max-width: none; letter-spacing: -.01em }
.prose p { margin: 0 0 14px }
.prose ul { padding-left: 20px; margin: 0 0 14px }
.prose li { margin-bottom: 6px }
.note { font: 400 12px/1.5 var(--mono); color: var(--mute); border-left: 2px solid var(--blue); padding-left: 10px; margin: 0; max-width: 80ch }
.ptable { width: 100%; border-collapse: collapse; font-size: 16px }
.ptable th { text-align: left; font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink) }
.ptable td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top }
.ptable td:last-child { font: 500 14px var(--mono); white-space: nowrap }
.ptable tr { transition: background .3s }
.ptable tbody tr:hover { background: var(--paper2) }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px }
.checklist li { padding: 12px 0 12px 32px; border-top: 1px solid var(--line); position: relative }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 14px; height: 8px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg) }
.faq { border-top: 1px solid var(--ink) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 20px; font: 500 19px/1.35 var(--sans); transition: color .3s }
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { color: var(--blue) }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(var(--blue), var(--blue)) center / 12px 1.5px no-repeat, linear-gradient(var(--blue), var(--blue)) center / 1.5px 12px no-repeat; transition: transform .5s var(--ease), background-color .3s, border-color .3s }
.faq details[open] summary::after { transform: rotate(135deg); border-color: var(--blue) }
.faq .ans { overflow: hidden; color: var(--mute); max-width: 76ch }
.faq .ans p { margin: 0 0 18px }
.related { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.related a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14.5px; transition: background .35s var(--ease), color .35s, border-color .35s, transform .25s var(--ease) }
.related a:hover { background: var(--ink); color: #fff; border-color: var(--ink) }
.related a:active { transform: scale(.96) }
.related .mono { margin-right: 6px }

/* ===== Отзывы ===== */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
.review { margin: 0; background: #fff; border: 1px solid var(--line); padding: 26px; display: grid; gap: 14px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s }
.review:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(19,35,61,.1); border-color: var(--sky) }
.rv-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center }
.stars { color: var(--blue); letter-spacing: 2px }
.review blockquote { margin: 0; font: 300 21px/1.4 var(--serif) }
.review figcaption { font-size: 14px; color: var(--mute) }

.files { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
.file { border: 1px solid var(--line); background: #fff; padding: 24px; display: grid; gap: 12px; align-content: start; min-height: 240px; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s }
.file::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) }
.file:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(19,35,61,.1); border-color: var(--sky) }
.file:hover::after { transform: none }
.file .fig { font: 300 48px/1 var(--serif); color: var(--blue) }
.file p { margin: 0; font-size: 15px; color: #33405A }
.file .ref { margin-top: auto; font: 400 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border-top: 1px dashed var(--line); padding-top: 10px }
.file .ref i { font-style: normal; display: inline-block; transition: transform .45s var(--ease) }
.file:hover .ref i { transform: translate(3px, -3px) }
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px }
.pq { margin: 0; padding-block: 22px; border-top: 1px solid var(--line); display: grid; gap: 14px }
.pq blockquote { margin: 0; font: 300 24px/1.35 var(--serif); font-style: italic }
.pq figcaption { display: grid; gap: 4px; font-size: 14.5px; color: var(--mute) }
.pq figcaption b { color: var(--ink); font-weight: 600 }

/* ===== Хабы, карточки ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.card { display: grid; gap: 12px; align-content: space-between; min-height: 220px; padding: 26px; background: #fff; border: 1px solid var(--line); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--ease), border-color .45s, transform .3s var(--ease) }
.card::before { content: ""; position: absolute; inset: 0; background: var(--navy2); transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1 }
.card:hover { color: var(--on); border-color: var(--navy2) }
.card:hover::before { transform: none }
.card:active { transform: scale(.985) }
.card h3 { margin: 0; font: 400 28px/1.12 var(--serif) }
.card p { margin: 0; color: var(--mute); font-size: 15px; transition: color .45s }
.card:hover p { color: var(--on-mute) }
.card .go { display: flex; justify-content: space-between; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase }
.card .go i { font-style: normal; transition: transform .5s var(--ease) }
.card:hover .go i { transform: translateX(6px) }

/* ===== Лента изменений законодательства ===== */
.nchips { display: flex; flex-wrap: wrap; gap: 8px }
.nchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 15px; cursor: pointer; font: 500 14px var(--sans); transition: background .35s var(--ease), color .35s, border-color .35s, transform .25s var(--ease) }
.nchip:hover { border-color: var(--blue) }
.nchip:active { transform: scale(.95) }
.nchip.on { background: var(--navy2); color: var(--on); border-color: var(--navy2) }
.nlist { display: grid; border-top: 1px solid var(--ink) }
.nitem { display: grid; gap: 10px; padding-block: 20px; border-bottom: 1px solid var(--line); transition: opacity .35s, transform .45s var(--ease) }
.nitem[hidden] { display: none }
.nmeta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.nitem h3 { margin: 0; font: 400 22px/1.3 var(--serif); max-width: 70ch }
.nfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px }
.nfoot a { text-decoration: none; color: var(--blue) }
.nfoot a i { font-style: normal; display: inline-block; transition: transform .45s var(--ease) }
.nfoot a:hover i { transform: translateX(5px) }

/* ===== Формы ===== */
.sentence { font: 300 clamp(26px, 3.2vw, 48px)/1.65 var(--serif); letter-spacing: -.02em; margin: 0 }
.sentence input, .sentence select { font: inherit; color: var(--sky); background: transparent; border: 0; border-bottom: 1px solid var(--sky); width: 7em; max-width: 100%; padding: 0 4px; border-radius: 0; transition: border-color .3s, background-color .3s }
.sentence input:focus, .sentence select:focus { outline: none; border-color: var(--on); background: rgba(169,190,230,.08) }
.sentence select { width: auto; cursor: pointer }
.sentence select option { color: #111 }
.sentence input::placeholder { color: var(--on-mute) }
.sentence input.err { border-color: #F29A9A }
.form-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 28px }
.consent { display: flex; gap: 10px; font-size: 13px; color: var(--mute); max-width: 60ch }
.consent a { color: inherit }
.form-out { margin-top: 26px; border-top: 1px solid var(--line-d); padding-top: 22px; display: grid; gap: 14px }
.form-out p { margin: 0 }
.form-out .ctas { gap: 8px }

/* ===== Подвал ===== */
.foot { margin-inline: calc(var(--rail) * -1); background: var(--navy); color: var(--on-mute); padding: 60px calc(var(--rail) + 32px) 30px; font-size: 14.5px }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px }
.foot-grid > div { display: grid; gap: 8px; align-content: start }
.foot-grid .mono { color: var(--sky); margin-bottom: 6px }
.foot-grid a { text-decoration: none; color: var(--on); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); justify-self: start }
.foot-grid a:hover { background-size: 100% 1px }
.foot-grid p { margin: 0 }
.foot-brand { font: 400 30px var(--serif); color: var(--on) !important }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line-d); margin-top: 40px; padding-top: 20px }
.foot-bot a { text-decoration: none }

/* ===== Модалка-квиз ===== */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(13,24,42,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.modal-box { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border-top: 3px solid var(--blue); padding: 32px; display: grid; gap: 20px; box-shadow: 0 40px 100px rgba(0,0,0,.3) }
.q-top { display: flex; justify-content: space-between; align-items: center }
.q-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 20px; line-height: 1; transition: transform .5s var(--ease), background .3s, color .3s }
.q-x:hover { transform: rotate(90deg); background: var(--ink); color: #fff }
.q-bar { height: 2px; background: var(--line); overflow: hidden }
.q-bar i { display: block; height: 100%; background: var(--blue); width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease) }
.modal h3 { margin: 0; font: 400 32px/1.1 var(--serif) }
.opts { display: grid; gap: 8px }
.opt { text-align: left; border: 1px solid var(--line); background: #fff; padding: 15px 18px; cursor: pointer; font-size: 16px; display: flex; justify-content: space-between; gap: 12px; transition: border-color .3s, background .3s, transform .35s var(--ease) }
.opt::after { content: "→"; color: var(--blue); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease) }
.opt:hover, .opt[aria-pressed="true"] { border-color: var(--blue); background: var(--paper2); transform: translateX(4px) }
.opt:hover::after { opacity: 1; transform: none }
.res-price { font: 400 46px/1 var(--serif); color: var(--blue) }

/* ===== Курсор, переход страниц ===== */
.cursor { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--blue2); pointer-events: none; z-index: 150; transition: background-color .3s, opacity .3s; opacity: 0; will-change: transform }
.cursor.on { opacity: 1 }
.cursor.big { background: rgba(61,99,194,.22) }
.pt { position: fixed; inset: 0; z-index: 190; pointer-events: none; display: grid; place-items: center; background: var(--navy); color: var(--on); transform: translateY(100%) }
.pt .pt-brand { font: 300 clamp(28px, 4vw, 56px) var(--serif); letter-spacing: -.01em; opacity: 0 }
.pt .pt-brand em { color: var(--sky) }
html.pt-enter .pt { transform: none }
html.pt-enter .pt .pt-brand { opacity: 1 }

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .facts-strip div:nth-child(2) { border-right: 0 }
  .facts-strip div:nth-child(3) { padding-left: 0 }
}
@media (max-width: 900px) {
  :root { --rail: 0px }
  body { padding-inline: 16px; padding-bottom: 64px; font-size: 16.5px }
  .rail.l { display: none }
  .rail.r { top: auto; left: 0; right: 0; width: auto; height: 64px; flex-direction: row; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-left: 0; border-top: 1px solid var(--line-d); bottom: 0 }
  .rail.r .v { writing-mode: horizontal-tb }
  .rail.r .stack { display: flex; gap: 6px }
  .rail.r .phone { display: none }
  .req { padding: 13px 18px }
  .cover, .pagehead, .facts-strip, .foot { margin-inline: -16px }
  .cover .in { padding: 82px 16px 28px }
  .cover .bot { grid-template-columns: 1fr }
  .cover::after { background: linear-gradient(0deg, rgba(19,35,61,.96) 18%, rgba(19,35,61,.55) 60%, rgba(19,35,61,.3) 100%) }
  .pagehead .in { padding: 84px 16px 36px }
  .facts-strip { padding-inline: 16px }
  .keyfacts { grid-template-columns: 1fr }
  .keyfacts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-d) }
  .idx { left: 0; right: 0; padding: 10px 12px }
  .idx .case { display: none }
  .idx nav { overflow-x: auto; max-width: 100%; scrollbar-width: none }
  .idx nav a { white-space: nowrap }
  .tab { margin-left: calc(var(--i) * 22px) }
  .folder { position: relative; top: auto !important; margin-bottom: 26px }
  .cols, .principles, .checklist, .who-grid { grid-template-columns: 1fr }
  .steps { grid-template-columns: 1fr 1fr; gap: 20px 0 }
  .foot { padding: 48px 16px 90px }
  .foot-grid { grid-template-columns: 1fr 1fr }
  .ptable { font-size: 15px }
  .ptable td:nth-child(2), .ptable th:nth-child(2) { display: none }
  .cursor { display: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important }
  .pt { display: none }
}
/* карточка: ссылка только на заголовке (анкор = название), кликабельна вся карточка */
.card-link { color: inherit; text-decoration: none }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1 }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--navy2); outline-offset: 2px }
.pagehead .byline { margin: 18px 0 0; font-size: 12.5px; letter-spacing: .04em; color: var(--on-mute) }
.pagehead .byline a { color: var(--on); text-underline-offset: 3px }
/* блок «Руководитель практики» на услугах */
.lawyer { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 720px }
.lawyer img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line) }
.lawyer .mono { display: block; color: var(--mute); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase }
.lawyer b { display: block; font: 400 24px/1.2 var(--serif); margin: 4px 0 }
.lawyer p { margin: 0 0 6px; color: var(--mute); font-size: 15px }
.prose.intro { margin: 0 0 28px }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 6px 0 18px }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
.prose th { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute) }
@media (max-width: 560px) { .lawyer { grid-template-columns: 64px minmax(0, 1fr) } .lawyer img { width: 64px; height: 64px } }
.prose .tw { overflow-x: auto; margin: 6px 0 18px } .prose .tw table { margin: 0; min-width: 520px }
.map { aspect-ratio: 16 / 9; max-width: 100%; border: 1px solid var(--line); margin: 6px 0 22px; background: var(--paper2) }
.map iframe { width: 100%; height: 100%; border: 0; display: block }
@media (max-width: 560px) { .map { aspect-ratio: 4 / 5 } }
ul.cols.when { list-style: none; margin: 0; padding: 0 }
.row .wt { margin: 0; font: 500 19px/1.3 var(--sans) }
.ptable .m-term { display: none }
@media (max-width: 900px) { .ptable .m-term { display: block; margin-top: 4px; color: var(--mute); font-size: 13px } }
@media (max-width: 560px) { .mono { font-size: 12.5px } }
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr }
  .ptable td:last-child { white-space: normal; min-width: 96px }
}
.st h3, .st p, .ptable td, .prose { overflow-wrap: break-word; hyphens: auto }
@media (max-width: 420px) {
  .pagehead h1 { font-size: 36px }
  .sheet h2 { font-size: 32px }
}
.ptable .pgroup { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue) }
.ptable .nw { white-space: nowrap }

/* производительность анимаций: затемнение «уходящего» листа — отдельным слоем (opacity), а не filter по всему листу */
.sheet > .shade { position: absolute; inset: -3px 0 0; background: rgba(13, 24, 42, .3); opacity: 0; pointer-events: none; z-index: 5 }
@media (min-width: 901px) { .folder .sheet { will-change: transform; backface-visibility: hidden } }
.grain { will-change: transform; transform: translateZ(0) }

/* появление при прокрутке: CSS-переходы на transform/opacity (композитор), классы снимаются после окончания */
.rv { opacity: 0; transform: translate3d(0, 34px, 0) }
.rv.is-in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s) }
.split-h .wd > span { transform: translate3d(0, 115%, 0) }
.split-h.is-in .wd > span { transform: translate3d(0, 0, 0); transition: transform 1.1s var(--ease) var(--d, 0s) }
@media (prefers-reduced-motion: reduce) { .rv, .split-h .wd > span { opacity: 1 !important; transform: none !important } }

/* ---------- микровзаимодействия: единые токены движения ---------- */
:root {
  /* пружина: быстрый разгон, лёгкий перелёт, мягкая остановка */
  --spring: cubic-bezier(.34, 1.36, .64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.067, 1.087 25.4%, 1.083, 1.064 30.6%, 1.006 41.2%, .989 45.6%, .995 59%, 1) }
}
a, button, summary, .card, .opt, .nchip { -webkit-tap-highlight-color: transparent; touch-action: manipulation }
.idx nav { contain: layout paint }
/* заливка кнопки: заходит плавно, уходит быстрее (выход короче входа) */
.line-btn:not(:hover):not(:focus-visible)::before { transition-duration: .4s }
.line-btn .lbl > span, .line-btn .ar i { transition-timing-function: var(--spring) }
/* карточки: подъём независимым свойством translate — не конфликтует с нажатием */
.card, .file, .review { transition: color .45s var(--ease), border-color .45s, translate .6s var(--spring), box-shadow .5s var(--ease) }
.card:hover, .file:hover, .review:hover { translate: 0 -4px }
.review:hover, .file:hover { transform: none }
.card:active, .rail .ico:active, .related a:active, .nchip:active { transform: none }
/* FAQ: значок поворачивается пружиной и синхронно с содержимым */
.faq summary::after { transition: transform .6s var(--spring), border-color .3s, background-color .3s }
.faq details.js-faq[open]:not(.is-open) summary::after { transform: none; border-color: var(--line) }
.faq summary:hover::after { border-color: var(--blue) }
/* квиз: выбранный вариант подсвечивается до перехода */
.opt { transition: border-color .25s, background .25s, translate .5s var(--spring) }
.opt:hover, .opt[aria-pressed="true"] { transform: none; translate: 4px 0 }
.opt[aria-pressed="true"] { background: var(--navy2); color: var(--on); border-color: var(--navy2) }
.opt[aria-pressed="true"]::after { opacity: 1; transform: none; color: var(--on) }
/* ссылки-подчёркивания: уходят быстрее, чем появляются */
.ulink:not(:hover):not(:focus-visible) { transition-duration: .3s }
/* фокус клавиатуры: кольцо появляется мягко */
:focus-visible { transition: outline-offset .25s var(--spring) }
/* карта: включается по клику */
.map { position: relative }
.map:not(.live) iframe { pointer-events: none }
.map-on { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 18px; border: 0; background: linear-gradient(to top, rgba(13,24,42,.35), transparent 40%); cursor: pointer; color: #fff; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase }
.map-on span { background: var(--navy2); padding: 10px 16px; border-radius: 999px; transition: background .3s }
.map-on:hover span { background: var(--blue) }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important } }

/* телефоны: без полноэкранного зерна (лишний слой при DPR 3), без лишних слоёв */
@media (max-width: 900px), (pointer: coarse) { .grain { display: none } }
[id] { scroll-margin-top: 90px }

/* подвал: контраст мелкого текста на тёмном фоне ≥ 7:1 */
.foot-bot, .foot-bot .mono, .foot-bot a { color: #B9C5DA }
.foot-bot a:hover { color: var(--on) }

/* телефон: заголовок первого экрана без маски — виден сразу, слова поднимаются с проявлением */
.split-h.soft .wd { overflow: visible !important }
.split-h.soft .wd > span { transform: translate3d(0, .32em, 0); opacity: .02 }
.split-h.soft.is-in .wd > span { transform: translate3d(0, 0, 0); opacity: 1; transition: transform .9s var(--ease) var(--d, 0s), opacity .7s ease var(--d, 0s) }