/* ==========================================================================
   Витрина Vanta — главная в языке owlsdepartment.com (переработка 2026-10-03).
   Тёмный лист #121617, светлый текст #EDE9E8, гротеск капсом с плотным трекингом,
   слова-пилюли в тексте, рифлёное стекло в первом экране, светлый финальный экран.
   Акцент — как у образца: монохром, серый #62696B и жёлтый #FCE87F только у карточек.
   Брендбук brandbook/vanta при переделке не действует — решение владельца 03.10.
   ========================================================================== */
@import url('../fonts/inter-tight/fonts.css');

:root {
  --o-bg: #121617;
  --o-bg2: #0c0f10;
  --o-fg: #EDE9E8;
  --o-mut: #9AA1A3;           /* 7,1:1 на #121617 */
  --o-line: rgba(237, 233, 232, .16);
  --o-gray: #7E8587;          /* серый образца #62696B, осветлён: чёрный мелкий текст 5,6:1 */
  --o-yellow: #FCE87F;
  --o-light: #EFEFEF;
  --o-ink: #121617;
  --o-ink-mut: #3C4345;
  --o-f: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --o-ease: cubic-bezier(.23, 1, .32, 1);   /* кривая образца */
  --o-pad: 16px;                             /* поля образца: 16 на широком, 10 на телефоне */
  --o-fs-h1: clamp(40px, 7.1vw, 136px);
  --o-fs-h2: clamp(30px, 4.54vw, 88px);
  --o-fs-lead: clamp(22px, 2.6vw, 44px);
  --o-fs-body: clamp(16px, 1.32vw, 22px);
  --o-fs-ui: clamp(13px, 1.025vw, 17px);
  --o-sec: clamp(75px, 8.8vw, 160px);
}
@media (max-width: 759px) { :root { --o-pad: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body { margin: 0; background: var(--o-bg); color: var(--o-fg); font: 400 var(--o-fs-body)/1.3 var(--o-f); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
p, li { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--o-yellow); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { padding-inline: var(--o-pad); }
.cap { text-transform: uppercase; font-weight: 500; letter-spacing: -.025em; line-height: .9; }
.lbl { font-size: var(--o-fs-ui); text-transform: uppercase; letter-spacing: -.01em; }
body.lock { overflow: hidden; }

/* --- пилюля: слово в рамке; у ссылок — заливка при наведении снизу вверх, как у меню образца --- */
.pill { position: relative; display: inline-block; padding: 0 .42em .04em; border: max(1.5px, .07em) solid currentColor; border-radius: 999px; line-height: 1.04; isolation: isolate; clip-path: inset(0 round 999px); vertical-align: baseline; transition: color .5s var(--o-ease); }
a.pill::before, .pill.is-on::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; transform: translateY(101%); transition: transform .5s var(--o-ease); }
a.pill:hover, .pill.is-on { color: var(--o-bg); border-color: var(--o-fg); }
a.pill:hover::before, .pill.is-on::before { transform: none; background: var(--o-fg); }
.pill--fill { background: var(--o-fg); color: var(--o-bg); border-color: var(--o-fg); }
a.pill--fill:hover { color: var(--o-fg); border-color: var(--o-fg); }
a.pill.pill--fill:hover::before { background: var(--o-bg); }

/* ============ ШАПКА ============ */
.hd { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 14px var(--o-pad); pointer-events: none; mix-blend-mode: difference; color: #EDE9E8; }
.hd > * { pointer-events: auto; }
.hd__mark { display: block; width: clamp(42px, 4.2vw, 64px); }
.hd__mark svg { width: 100%; height: auto; display: block; }
.hd__claim { display: flex; gap: .7em; font-size: var(--o-fs-ui); text-transform: uppercase; padding-top: .5em; white-space: nowrap; }
.hd__name { transition: transform .9s var(--o-ease); }
.hd__sup, .hd__nav { transition: opacity .5s var(--o-ease), transform .5s var(--o-ease); }
.hd__nav { justify-self: end; display: flex; gap: 4px; }
.hd__nav a { position: relative; padding: .45em .7em; font-size: var(--o-fs-ui); text-transform: uppercase; border-radius: 999px; overflow: hidden; isolation: isolate; transition: color .5s var(--o-ease); }
.hd__nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #EDE9E8; border-radius: inherit; transform: scale(.4); opacity: 0; transition: transform .5s var(--o-ease), opacity .3s; }
.hd__nav a:hover { color: #121617; }
.hd__nav a:hover::before { transform: none; opacity: 1; }
.hd.is-down .hd__sup { opacity: 0; transform: translateX(-80px); }
.hd.is-down .hd__nav { opacity: 0; transform: translateX(-32px); pointer-events: none; }
.hd { transition: background-color .4s var(--o-ease); }
.hd.is-scrolled { mix-blend-mode: normal; background: rgba(18, 22, 23, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: 10px; }
.hd.is-scrolled .hd__mark { width: clamp(34px, 3vw, 46px); }
.hd.is-down .hd__name { transform: translateX(min(80px, 5.6vw)); }
.hd__dot { position: absolute; right: var(--o-pad); top: 12px; visibility: hidden; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity .5s var(--o-ease), transform .5s var(--o-ease); }
.hd__dot::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #EDE9E8; transition: inset .4s var(--o-ease); }
.hd__dot:hover::before { inset: 6px; }
.hd.is-down .hd__dot { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
@media (max-width: 899px) { .hd__dot { display: none; } }
.burger { display: none; justify-self: end; align-items: center; gap: 8px; padding: .45em .8em; border: 1.5px solid currentColor; border-radius: 999px; background: none; font-size: 14px; text-transform: uppercase; cursor: pointer; min-height: 44px; }
.burger i { display: grid; gap: 4px; } .burger b { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .35s var(--o-ease); }
.burger[aria-expanded="true"] b:first-child { transform: translateY(2.75px) rotate(45deg); }
.burger[aria-expanded="true"] b:last-child { transform: translateY(-2.75px) rotate(-45deg); }
@media (max-width: 899px) {
  .hd__nav { display: none; } .burger { display: inline-flex; }
  .hd__claim { display: none; } .hd { grid-template-columns: 1fr auto; }
}
.sheet { position: fixed; inset: 0; z-index: 19; background: var(--o-bg); padding: 96px var(--o-pad) 24px; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .35s var(--o-ease), visibility 0s .35s; }
.sheet.open { opacity: 1; visibility: visible; transition: opacity .35s var(--o-ease); }
.sheet > a { font-size: clamp(34px, 10vw, 64px); text-transform: uppercase; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.sheet__foot { margin-top: auto; display: grid; gap: 6px; color: var(--o-mut); font-size: 16px; }
.sheet__foot b { color: var(--o-fg); font-weight: 500; font-size: 22px; }

/* ============ ПЕРВЫЙ ЭКРАН ============ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--o-bg); }
.glass { position: absolute; inset: 0; }
.glass__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--o-ease); }
.glass.is-ready .glass__gl { opacity: 1; }
.glass__gl--flat { filter: blur(6px); }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 58%; background: linear-gradient(180deg, rgba(18, 22, 23, .72), rgba(18, 22, 23, .35) 55%, transparent); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(18, 22, 23, .55)); pointer-events: none; }
.hero__lead { position: relative; z-index: 2; max-width: 30em; padding-top: clamp(96px, 9vw, 150px); font-size: var(--o-fs-lead); line-height: 1.24; }
.hero__lead .pill { margin-block: .06em; }
.hero__h { position: absolute; z-index: 2; left: var(--o-pad); right: var(--o-pad); bottom: clamp(20px, 2.2vw, 40px); font-size: var(--o-fs-h1); }
.hero__h .w { display: block; will-change: transform, opacity, filter; }
.hero__h .r { text-align: right; }
.hero__h .gap { margin-top: .32em; }
@media (max-width: 759px) {
  .hero { min-height: max(640px, 100svh); }
  .hero__lead { padding-top: 92px; font-size: 22px; }
  .intro__p { font-size: 20px; line-height: 1.32; }
  .hero__h { font-size: clamp(36px, 11.2vw, 64px); }
}

/* ============ СЕКЦИИ ============ */
.sec { position: relative; padding-block: var(--o-sec); }
.sec--light { background: var(--o-light); color: var(--o-ink); }
.h2 { font-size: var(--o-fs-h2); }
.count { font-size: .32em; vertical-align: top; margin-left: .25em; letter-spacing: 0; }
.more { display: inline-flex; gap: .5em; align-items: center; font-size: var(--o-fs-ui); text-transform: uppercase; padding-block: 10px; }
.more span { transition: transform .5s var(--o-ease); }
.more:hover span { transform: translateX(6px); }

/* --- абзац о сайтах --- */
.intro__p { max-width: 28em; font-size: var(--o-fs-lead); line-height: 1.24; }
.intro__p .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.intro__p .ln > span { display: block; }
.intro__side { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: clamp(28px, 3.4vw, 60px); color: var(--o-mut); font-size: var(--o-fs-ui); text-transform: uppercase; }
.intro__deco { position: absolute; right: 0; top: 50%; width: min(34vw, 520px); aspect-ratio: 1; transform: translateY(-50%); opacity: .14; pointer-events: none; }

@media (max-width: 759px) {
  .intro__p .ln, .intro__p .ln > span { display: inline; }
  .hd__mark { transition: opacity .35s var(--o-ease); }
  .hd.is-down .hd__mark { opacity: 0; pointer-events: none; }
}

/* --- работы: таблица строками --- */
.works__top { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2vw, 34px); }
.works__list { border-top: 1px solid var(--o-line); }
.row { position: relative; display: grid; grid-template-columns: 3.2em 1.2fr 2fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--o-line); font-size: var(--o-fs-ui); text-transform: uppercase; }
.row__n { color: var(--o-mut); }
.row__t { font-size: clamp(16px, 1.32vw, 22px); text-transform: none; transition: transform .5s var(--o-ease); }
.row__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row__tags span { border: 1.2px solid var(--o-line); border-radius: 999px; padding: .2em .65em; font-size: 12px; color: var(--o-mut); }
.row__go { width: 1.4em; text-align: right; transition: transform .5s var(--o-ease); }
.row:hover .row__t { transform: translateX(10px); }
.row:hover .row__go { transform: translateX(4px); }
.row { isolation: isolate; transition: color .45s var(--o-ease); }
.row::after { content: ""; position: absolute; inset: 0 calc(var(--o-pad) * -1); z-index: -1; background: var(--o-fg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--o-ease); pointer-events: none; }
.row:hover, .row:focus-visible { color: var(--o-bg); }
.row:hover::after, .row:focus-visible::after { transform: none; }
.row:hover .row__n, .row:hover .row__tags span { color: var(--o-bg); border-color: rgba(18, 22, 23, .35); }
.works { position: relative; }
.prev { position: fixed; z-index: 15; left: 0; top: 0; width: min(26vw, 380px); aspect-ratio: 1.47; pointer-events: none; will-change: transform; }
.prev__in { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; opacity: 0; transform: scale(.86) rotate(-2deg); transition: opacity .45s var(--o-ease), transform .6s var(--o-ease); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.prev.is-on .prev__in { opacity: 1; transform: none; }
.prev canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.prev__in { position: relative; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .prev { display: none; } }
@media (max-width: 899px) {
  .row { grid-template-columns: 2.4em 1fr auto; }
  .row__tags { display: none; }
  .prev { display: none; }
}

/* --- направления --- */
.dirs__head { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; margin-bottom: clamp(32px, 4vw, 70px); }
.dirs__head .lbl { color: var(--o-mut); padding-top: .4em; }
.dirs__head .h2 { text-align: right; }
.ghost { position: absolute; left: 18%; top: -.32em; font-size: clamp(120px, 17vw, 320px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(237, 233, 232, .1); pointer-events: none; user-select: none; }
.dirs__text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px) clamp(20px, 3vw, 56px); margin-left: 33.4%; margin-bottom: clamp(40px, 5vw, 90px); }
.dirs__text h3 { font-size: var(--o-fs-ui); text-transform: uppercase; font-weight: 500; margin-bottom: .7em; }
.dirs__text p { color: var(--o-mut); max-width: 30em; line-height: 1.42; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: .84; padding: 14px; overflow: hidden; scroll-margin-top: 80px; }
.card--dark { background: #000; color: var(--o-fg); }
.card--yellow { background: var(--o-yellow); color: var(--o-ink); }
.card--gray { background: var(--o-gray); color: #000; }
.card--yellow .card__p, .card--gray .card__p { opacity: 1; }
.card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__t { position: relative; font-size: clamp(20px, 1.76vw, 30px); line-height: 1.08; max-width: 12em; }
.card__p { position: relative; margin-top: .6em; font-size: clamp(14px, 1.04vw, 17px); line-height: 1.5; max-width: 22em; opacity: .82; }
.card__foot { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 10px; font-size: 12px; text-transform: uppercase; }
.card__foot .pill { border-width: 1.2px; padding: .15em .6em; }
.card--dark .card__foot .pill { background: #000; } .card--yellow .card__foot .pill { background: var(--o-yellow); } .card--gray .card__foot .pill { background: #9AA0A2; border-color: transparent; }
.card { clip-path: inset(0 0 0 0); }
@media (max-width: 1099px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .dirs__head { grid-template-columns: 1fr; } .dirs__head .h2 { text-align: left; }
  .dirs__text { margin-left: 0; grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; } .card { aspect-ratio: 1.05; }
  .ghost { left: auto; right: 0; }
}

/* --- внутренняя страница в языке главной: шапка страницы и разделы направлений --- */
.page-hero { padding-top: clamp(120px, 12vw, 220px); }
.page-hero__lbl { color: var(--o-mut); margin-bottom: 18px; }
.page-hero__h { font-size: var(--o-fs-h1); max-width: 11em; }
.page-hero__lead { max-width: 36em; margin-top: clamp(24px, 3vw, 50px); font-size: clamp(18px, 1.6vw, 26px); line-height: 1.32; color: var(--o-fg); }
.page-hero__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; font-size: clamp(16px, 1.32vw, 22px); }
.dir { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: min(100vh, 900px); scroll-margin-top: 0; }
.dir:nth-of-type(odd) .dir__art { order: 2; }
.dir__art { position: relative; min-height: 420px; overflow: hidden; }
.dir__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dir--dark .dir__art { background: #000; color: var(--o-fg); }
.dir--yellow .dir__art { background: var(--o-yellow); color: var(--o-ink); }
.dir--gray .dir__art { background: var(--o-gray); color: #000; }
.dir__txt { display: flex; flex-direction: column; gap: 18px; justify-content: center; padding: clamp(40px, 5vw, 96px) var(--o-pad); }
.dir__n { color: var(--o-mut); }
.dir__t { font-size: var(--o-fs-h2); }
.dir__p { max-width: 30em; font-size: clamp(17px, 1.4vw, 24px); line-height: 1.38; }
.dir__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--o-line); max-width: 36em; }
.dir__steps li { display: flex; gap: 12px; align-items: baseline; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--o-line); font-size: var(--o-fs-ui); text-transform: uppercase; }
.dir__steps span { color: var(--o-mut); font-size: 12px; }
@media (max-width: 899px) {
  .dir { grid-template-columns: 1fr; min-height: 0; }
  .dir:nth-of-type(odd) .dir__art { order: 0; }
  .dir__art { min-height: 0; aspect-ratio: 1.2; }
}
@media (max-width: 559px) { .dir__steps { grid-template-columns: 1fr; } }
.ask--short .ask__grid { align-items: center; }

/* --- стоимость --- */
.price__top { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(24px, 3vw, 50px); }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--o-line); }
.offer { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 22px 0; border-right: 1px solid var(--o-line); }
.offer + .offer { padding-left: 18px; }
.offer:last-child { border-right: 0; }
.offer__n { font-size: var(--o-fs-ui); text-transform: uppercase; font-weight: 500; }
.offer__d { color: var(--o-mut); line-height: 1.42; }
.offer__p { font-size: clamp(40px, 4.4vw, 84px); font-weight: 500; letter-spacing: -.04em; line-height: .95; }
.offer__p small { display: block; line-height: 1.4; margin-top: .6em; font-size: 14px; letter-spacing: -.01em; font-weight: 400; color: var(--o-mut); }
.offer__p b { display: block; line-height: 1.15; margin-top: .35em; font-size: clamp(18px, 1.5vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.offer__l { display: grid; gap: 7px; font-size: 15px; line-height: 1.5; color: var(--o-mut); }
.offer__l li::before { content: "— "; }
.offer .pill { align-self: start; margin-top: auto; font-size: var(--o-fs-ui); text-transform: uppercase; padding: .5em 1em; }
.offer--main { position: relative; }
.terms { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 26px; }
.terms li { border: 1.2px solid var(--o-line); border-radius: 999px; padding: .3em .8em; font-size: 13px; text-transform: uppercase; color: var(--o-mut); }
@media (max-width: 899px) {
  .offers { grid-template-columns: 1fr; }
  .offer, .offer + .offer { padding: 20px 0 26px; border-right: 0; border-bottom: 1px solid var(--o-line); }
}

/* --- финальный светлый экран: заявка и контакты --- */
.ask__h { font-size: clamp(42px, 7.1vw, 136px); margin-bottom: clamp(30px, 4vw, 70px); }
.ask__grid { display: grid; grid-template-columns: 1fr minmax(0, 1.3fr); gap: clamp(24px, 4vw, 80px); align-items: start; margin-left: 33.4%; }
.ask__ct { display: grid; gap: 4px; font-size: 16px; }
.ask__ct .lbl { color: var(--o-ink-mut); margin-bottom: 6px; }
.ask__ct a { width: fit-content; min-height: 26px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; transition: border-color .3s; }
.ask__ct a:hover { border-color: currentColor; }
.ask__ct .now { display: inline-flex; align-items: center; gap: 6px; color: var(--o-ink-mut); font-size: 14px; }
.ask__ct .now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9aa1a3; }
.ask__ct .now.on::before { background: #0E9F6E; }
.ask__more { margin-top: 10px; }
@media (max-width: 1099px) { .ask__grid { margin-left: 0; } }
@media (max-width: 759px) { .ask__grid { grid-template-columns: 1fr; } }

/* форма — поля линией, как бланк; подписи скрыты (D-16), пример называет поле */
.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.frm__wide { grid-column: 1 / -1; }
.fld { position: relative; display: grid; }
.fld input, .fld textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1.5px solid #8A8F91; border-radius: 0; background: transparent; color: var(--o-ink); font: 400 16px/1.3 var(--o-f); letter-spacing: -.01em; transition: border-color .3s; }
.fld textarea { min-height: 88px; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: #5E6567; opacity: 1; }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--o-ink); box-shadow: 0 1.5px 0 var(--o-ink); }
.fld__e { display: none; margin-top: 6px; font-size: 13px; color: #A32B1F; }
.fld--err input, .fld--err textarea { border-bottom-color: #A32B1F; }
.fld--err .fld__e { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.frm__ok { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--o-ink-mut); cursor: pointer; padding-block: 6px; }
.frm__ok input { width: 20px; height: 20px; margin: 0; accent-color: var(--o-ink); flex: none; }
.frm__ok a { text-decoration: underline; text-underline-offset: 2px; }
.frm__ok--err span { color: #A32B1F; }
.frm__st { font-size: 14px; color: #A32B1F; }
.frm__st:empty { display: none; }
.frm__send { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-ink { position: relative; display: inline-flex; gap: .6em; align-items: center; min-height: 48px; padding: .6em 1.3em; border: 1.5px solid var(--o-ink); border-radius: 999px; background: var(--o-ink); color: var(--o-light); font: 500 var(--o-fs-ui)/1 var(--o-f); text-transform: uppercase; letter-spacing: -.01em; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .5s var(--o-ease); }
.btn-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--o-light); transform: translateY(101%); transition: transform .5s var(--o-ease); }
.btn-ink:hover { color: var(--o-ink); } .btn-ink:hover::before { transform: none; }
.btn-ink:disabled { opacity: .55; cursor: progress; }
@media (max-width: 559px) { .frm { grid-template-columns: 1fr; } }
.done { padding: 22px; border: 1.5px solid var(--o-ink); border-radius: 8px; }
.done h3 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.done__l { display: grid; gap: 6px; margin: 14px 0; color: var(--o-ink-mut); }
.done .lnk { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* --- подвал --- */
.ft { background: var(--o-light); color: var(--o-ink); padding: 0 var(--o-pad) 18px; }
.ft__top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; padding-top: clamp(30px, 4vw, 70px); border-top: 1px solid rgba(18, 22, 23, .14); }
.ft__mark { width: clamp(70px, 8vw, 150px); }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ft__cols p { font-size: 12px; text-transform: uppercase; color: var(--o-ink-mut); margin-bottom: 8px; }
.ft__cols a, .ft__cols span { display: block; font-size: 14px; text-transform: uppercase; padding-block: 3px; width: fit-content; }
.ft__cols a:hover { text-decoration: underline; }
.ft__law { margin-top: 30px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--o-ink-mut); max-width: 72ch; }
.ft__btm { margin-top: 18px; font-size: 13px; color: var(--o-ink-mut); text-transform: uppercase; }
@media (max-width: 899px) { .ft__top { grid-template-columns: 1fr; } .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* зерно на тёмном: своя плитка (grain-tile.mjs), чтобы градиенты не шли ступенями */
.grain { position: relative; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../img/grain-128.png") repeat; opacity: .022; pointer-events: none; }
.grain > :not(.intro__deco) { position: relative; z-index: 1; }

/* ============ ДВИЖЕНИЕ ============
   Числа — из замера образца (motion/donor-home.md). Скрытие до показа — только при html.js,
   иначе без скриптов всё видно. «Меньше движения» — тише: без сдвигов и размытия, короткое появление. */
.js [data-line] > span { transform: translateY(35px); opacity: 0; filter: blur(3px); transition: transform 1s var(--o-ease), opacity 1s var(--o-ease), filter 1s var(--o-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-line].in > span { transform: none; opacity: 1; filter: none; }
.js [data-rise] { transform: translateY(16px); opacity: 0; filter: blur(3px); transition: transform .9s var(--o-ease), opacity .9s var(--o-ease), filter .9s var(--o-ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-rise].in, .js [data-rise]:focus-within { transform: none; opacity: 1; filter: none; }
.js [data-words] .wd { display: inline-block; transform: translateY(7px) rotate(5deg); transform-origin: left bottom; opacity: 0; transition: transform .9s var(--o-ease), opacity .9s var(--o-ease); transition-delay: calc(var(--i, 0) * 40ms); }
.js [data-words].in .wd { transform: none; opacity: 1; }
.js [data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--o-ease); transition-delay: calc(var(--i, 0) * 200ms); }
.js [data-wipe].in { clip-path: inset(0 0 0 0); }
.js .hero__lead, .js .hero__h .w { animation: o-in 1.1s var(--o-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
@keyframes o-in { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  .js [data-line] > span, .js [data-rise], .js [data-words] .wd, .js [data-wipe] { transform: none !important; filter: none !important; clip-path: none !important; transition: opacity .22s linear; }
  .js .hero__lead, .js .hero__h .w { animation: o-fade .4s linear both; }
  .hd__name, .hd__sup, .hd__nav { transition: opacity .22s linear; }
  .hd.is-down .hd__sup, .hd.is-down .hd__nav { transform: none; }
  .hd.is-scrolled .hd__name { transform: none; }
  .row__t, .row__go, .more span { transition: none; }
}
@keyframes o-fade { from { opacity: 0; } }

@media print {
  .hd, .sheet, .glass, .prev, .burger { display: none !important; }
  body { background: #fff; color: #000; }
}
.dirs__more { margin: -40px 0 clamp(30px, 4vw, 70px) 33.4%; }
@media (max-width: 759px) { .dirs__more { margin-left: 0; } }
@media (max-width: 379px) { .ft__cols { grid-template-columns: 1fr; } }