/* Раздел «Портфолио»: список, страницы фильтров, страница проекта. Читаемый исходник, без сборки.
   Концепция: море и небо, рассвет над водой и маяк (маяк по-английски Lighthouse, как инструмент замера скорости).
   Шапка, меню, подвал и кнопки: общий css/site-chrome.css, окно и встроенная форма: css/site-form.css, команда: css/site-team.css, вопросы: css/site-faq.css (классы site-*, слой site).
   Здесь тема раздела (переменные --site-*, голубой сигнал каркаса) и блоки pf-*, всё в слое page (порядок слоёв объявлен в site-chrome.css).
   Блоки общие: карточка проекта, «Фишки», «Было и стало», результаты PageSpeed; их же берут будущие статьи и страницы услуг. */
/* рукописный шрифт «Слова команды» (Caveat, лицензия OFL, файлы /fonts/) */
@font-face { font-family: "Caveat"; src: url("../../fonts/caveat-cyrillic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; src: url("../../fonts/caveat-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; src: url("../../fonts/caveat-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; src: url("../../fonts/caveat-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@layer page {

body.pf {
  --site-bg: #04101e;
  --site-dim: rgba(224, 240, 255, 0.7);
  --site-line: rgba(124, 200, 255, 0.22);
  --site-accent: #d6efff;
  --site-accent-ink: #04101e;
  --site-signal: #7cc8ff;
  --site-wrap: 78rem;
  --bg-2: #0a1c33;
  --sig: #7cc8ff;              /* небо */
  --sig-hi: #d6efff;           /* пена */
  --sig-lo: #3a9be0;           /* глубокая вода */
  --warm: #ffc980;             /* рассвет: только для человеческого */
  --good: #0cce6b;
  --mid: #ffa400;
  --bad: #ff4e42;
  --line: rgba(124, 200, 255, 0.16);
  --card: rgba(124, 200, 255, 0.06);
  --team-card: rgba(124, 200, 255, 0.06);
  --team-line: rgba(124, 200, 255, 0.18);
  --team-accent: #ffc980;
}
html { scroll-behavior: smooth; }
/* всё под первым экраном как столб воды: сразу под поверхностью светлее, вниз темнее (без скрипта тоже) */
body.pf { background: #010409; }
.pf-water { position: relative; padding-bottom: clamp(6rem, 14vw, 11rem); background: linear-gradient(180deg, #0b4271 0, #08305a 5%, #05193a 15%, #04102a 32%, #030b1b 52%, #02060f 72%, #010409 90%); }
.pf-water > .pf-sec { position: relative; z-index: 1; }
body.pf .site-footer { background: #010409; border-top-color: rgba(124, 200, 255, 0.1); }
body.pf main { position: relative; z-index: 1; }

/* ---------- каркас в теме раздела ---------- */
.site-head::before { background: linear-gradient(to bottom, rgba(7, 9, 12, 0.94) 55%, rgba(7, 9, 12, 0)); }
.site-head.is-scrolled::before { background: rgba(7, 9, 12, 0.9); }
.site-head__tag { position: relative; z-index: 2; }
.site-head__tag li:first-child { color: var(--sig-hi); }
.site-menu { background: rgba(7, 9, 12, 0.985); }
.site-menu__n { color: var(--sig); }
.site-menu__list a:hover { color: var(--sig-hi); }
.site-menu__list a[aria-current="page"] { color: var(--sig); }
.site-footer__col ul a:hover, .site-footer__col > p > a:hover { color: var(--sig-hi); }
.site-footer__col .site-footer__h { color: var(--sig); }
.site-btn--main { background: linear-gradient(135deg, #9bd6ff, #4aa7ee); color: #04101e; border-color: #7cc8ff; font-weight: 600; }
.site-btn--main:hover { background: linear-gradient(135deg, #d6efff, #7cc8ff); }
.site-btn--ghost:hover { border-color: var(--sig); }

/* ---------- хлебные крошки (те же правила, что у остальных страниц; общий вид вынести в css/site-chrome.css) ---------- */
.crumbs { margin: 0 0 0.8rem; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--site-dim); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(242, 244, 245, 0.35); }
.crumbs a { text-decoration: none; color: var(--site-dim); }
.crumbs a:hover { color: var(--sig-hi); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs [aria-current="page"] { color: var(--site-fg); }

/* ---------- общие блоки ---------- */
/* боковое поле: общий .site-wrap его не задаёт, на телефоне текст иначе прижат к краю */
body.pf main .site-wrap { box-sizing: border-box; --gut: clamp(1rem, 4vw, 2rem); padding-inline: var(--gut); max-width: calc(var(--site-wrap) + 2 * var(--gut)); }
.pf-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sig); }
.pf-h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 700; text-wrap: balance; }
.pf-h2 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; font-weight: 700; text-wrap: balance; }
.pf-h3 { margin: 2.5rem 0 1rem; font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; }
.pf-lead { margin: 0 0 1.5rem; max-width: 46rem; font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--site-dim); text-wrap: pretty; }
.pf-sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.pf-two { display: grid; gap: 1.25rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .pf-two { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } .pf-two .pf-h2 { margin: 0; } }
.pf-prose { max-width: 46rem; font-size: 1.0625rem; line-height: 1.7; }
.pf-prose p { margin: 0 0 1rem; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- фильтр: обычные ссылки на отдельные адреса ---------- */
.pf-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.pf-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.9375rem; }
.pf-chip span { color: var(--site-dim); font-size: 0.8125rem; }
.pf-chip:hover { border-color: var(--sig); }
.pf-chip[aria-current="page"] { background: var(--sig); border-color: var(--sig); color: var(--site-accent-ink); }
.pf-chip[aria-current="page"] span { color: inherit; opacity: 0.7; }

/* ---------- карточки списка ---------- */
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.pf-card { display: flex; }
.pf-card__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.pf-card__link:hover { border-color: var(--sig); transform: translateY(-2px); }
.pf-card__img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: var(--bg-2); }
.pf-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; }
.pf-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-tag { padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; color: var(--site-dim); }
.pf-tag--svc { border-color: var(--site-line); color: var(--sig); }
.pf-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.pf-card__sum { color: var(--site-dim); line-height: 1.5; }
.pf-card__metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.pf-card__metric b { font-size: 1.75rem; line-height: 1; color: var(--sig); }
.pf-card__metric span { font-size: 0.8125rem; color: var(--site-dim); }
.pf-card__more { margin-top: 0.25rem; color: var(--sig); font-size: 0.9375rem; }
.pf-card__more::after { content: " →"; }

/* ---------- страница кейса: первый экран и факты ---------- */
.pf-top__grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 62rem) { .pf-top__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.pf-top__img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 1rem; background: var(--bg-2); }
.pf-facts { border-block: 1px solid var(--line); background: var(--card); }
.pf-facts__dl { display: grid; gap: 1rem 2rem; margin-block: 0; padding-block: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.pf-facts__dl div { min-width: 0; }
.pf-facts dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--site-dim); }
.pf-facts dd { margin: 0.2rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.pf-facts a { color: var(--sig); }

.pf-steps { margin: 0; padding-inline-start: 1.25rem; max-width: 46rem; display: grid; gap: 0.75rem; line-height: 1.6; font-size: 1.0625rem; }
.pf-steps li::marker { color: var(--sig); font-weight: 700; }

/* ---------- «Фишки»: решения с пояснением ---------- */
.pf-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.pf-feat { position: relative; padding: 1.5rem 1.5rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-feat__n { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.25rem; font-size: 2rem; font-weight: 700; line-height: 1; color: rgba(140, 242, 192, 0.25); }
.pf-feat__t { margin: 0 3rem 1rem 0; font-size: 1.1875rem; line-height: 1.25; font-weight: 700; }
.pf-feat__dl { margin: 0; display: grid; gap: 0.85rem; }
.pf-feat__dl dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sig); }
.pf-feat__dl dd { margin: 0.15rem 0 0; line-height: 1.55; color: rgba(242, 244, 245, 0.88); }

/* ---------- «Было и стало» ---------- */
.pf-cmp { display: grid; gap: 2rem; }
.pf-cmp__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.pf-cmp__row--mobile { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 16rem)); justify-content: start; }
.pf-cmp__fig { margin: 0; }
.pf-cmp__fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--bg-2); }
.pf-cmp__fig figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--site-dim); }
.pf-cmp__fig figcaption b { color: var(--sig); }

/* ---------- результаты ---------- */
.pf-metrics { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.pf-metric { display: grid; gap: 0.25rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-metric b { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1; color: var(--sig); }
.pf-metric span { color: var(--site-dim); }
.pf-metric small { color: var(--site-dim); font-size: 0.8125rem; }

.pf-ps__meta { margin: 0 0 1.25rem; max-width: 52rem; font-size: 0.875rem; line-height: 1.55; color: var(--site-dim); }
.pf-ps__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.pf-ps__col { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-ps__h { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
.pf-rings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-ring { --c: var(--good); display: grid; justify-items: center; gap: 0.4rem; text-align: center; }
.pf-ring--mid { --c: var(--mid); }
.pf-ring--bad { --c: var(--bad); }
.pf-ring__num { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; font-size: 1.375rem; font-weight: 700; color: var(--c);
  background: radial-gradient(closest-side, var(--bg-2) 80%, transparent 82%), conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255, 255, 255, 0.12) 0); }
.pf-ring__lab { font-size: 0.75rem; line-height: 1.25; color: var(--site-dim); overflow-wrap: anywhere; }
.pf-ps__range { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--site-dim); }
.pf-ps__dl { margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.pf-ps__dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.4rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.pf-ps__dl dt { color: var(--site-dim); }
.pf-ps__dl dd { margin: 0; font-weight: 600; white-space: nowrap; }

/* ---------- цитата, ссылки на услугу, призыв ---------- */
.pf-quote { margin: 0; max-width: 46rem; padding-inline-start: 1.5rem; border-inline-start: 3px solid var(--sig); font-size: 1.25rem; line-height: 1.55; }
.pf-quote__by { display: block; margin-top: 0.75rem; font-size: 0.9375rem; font-style: normal; color: var(--site-dim); }
.pf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pf-cta { text-align: left; }
.pf-sec--text { border-top: 1px solid var(--line); }


/* ---------- страница проекта: верх без моря ---------- */
.pf-top { padding-block: clamp(7rem, 12vw, 9.5rem) clamp(2rem, 4vw, 3rem); background: linear-gradient(180deg, #071b34, var(--site-bg) 70%); }

/* ---------- первый экран: море, небо и маяк ---------- */
.pf-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(50rem, 100svh); display: flex; align-items: center;
  padding-block: clamp(7rem, 12vw, 9rem) clamp(9rem, 22vw, 13rem); background: #0b4271; }
.pf-sky { position: absolute; inset: 0 0 26% 0; z-index: -3; transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--hs, 0) * -70px), 0) scale(1.08);
  background: linear-gradient(180deg, #030a15 0%, #07213f 30%, #0e4678 56%, #4b97c9 80%, #f2c08e 100%); }
.pf-sun { position: absolute; inset-inline-end: 22%; bottom: -2%; width: min(34rem, 60vw); aspect-ratio: 1; border-radius: 50%; transform: translateY(40%);
  background: radial-gradient(circle, rgba(255, 224, 170, 0.8) 0 16%, rgba(255, 190, 120, 0.4) 32%, rgba(255, 170, 110, 0) 64%); filter: blur(2px); }
.pf-sea { position: absolute; inset: auto 0 0 0; height: 34%; z-index: -2; pointer-events: none; transform: translate3d(0, calc(var(--hs, 0) * -40px), 0);
  background: linear-gradient(180deg, #2a78b0 0%, #1a5f96 35%, #0b4271 100%); }
.pf-wave { position: absolute; inset-inline-start: 0; bottom: 0; width: 200%; height: 78%; animation: pf-drift 38s linear infinite; }
.pf-wave path { fill: currentColor; }
.pf-wave--1 { color: #3a86bd; opacity: 0.7; bottom: 44%; height: 56%; animation-duration: 54s; }
.pf-wave--2 { color: #2a73ab; opacity: 0.85; bottom: 28%; height: 62%; animation-duration: 42s; animation-direction: reverse; }
.pf-wave--3 { color: #165689; opacity: 0.95; bottom: 12%; height: 66%; animation-duration: 33s; }
.pf-wave--4 { color: #0b4271; bottom: -6%; height: 70%; animation-duration: 26s; animation-direction: reverse; }
@keyframes pf-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pf-glints { position: absolute; inset-inline-end: 32%; top: 6%; width: min(16rem, 30vw); height: 60%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pf-glints i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 230, 190, 0.8); opacity: 0; animation: pf-glint 4s ease-in-out infinite; }
.pf-glints i:nth-child(1) { width: 38%; animation-delay: 0s; } .pf-glints i:nth-child(2) { width: 62%; animation-delay: 0.6s; } .pf-glints i:nth-child(3) { width: 46%; animation-delay: 1.3s; }
.pf-glints i:nth-child(4) { width: 80%; animation-delay: 2s; } .pf-glints i:nth-child(5) { width: 52%; animation-delay: 2.7s; } .pf-glints i:nth-child(6) { width: 70%; animation-delay: 3.3s; } .pf-glints i:nth-child(7) { width: 34%; animation-delay: 1.8s; }
@keyframes pf-glint { 0%, 100% { opacity: 0; transform: scaleX(0.6); } 50% { opacity: 0.85; transform: scaleX(1); } }

.pf-mist { position: absolute; inset-inline: 0; bottom: 22%; height: 22%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(236, 246, 255, 0.5), transparent 70%), linear-gradient(180deg, transparent, rgba(214, 235, 252, 0.28) 55%, transparent); }
.pf-hero__in { position: relative; z-index: 1; width: 100%; }
.pf-hero .pf-h1 { max-width: 17ch; font-size: clamp(2.2rem, 5.2vw, 4.1rem); text-shadow: 0 2px 28px rgba(3, 12, 24, 0.55); }
.pf-hero .pf-lead { max-width: 38rem; color: rgba(236, 246, 255, 0.86); text-shadow: 0 1px 16px rgba(3, 12, 24, 0.6); }
.pf-hero .site-btn--ghost { background: rgba(4, 16, 30, 0.45); border-color: rgba(214, 239, 255, 0.55); color: #fff; backdrop-filter: blur(3px); }
.pf-hero .crumbs { text-shadow: 0 1px 10px rgba(3, 12, 24, 0.6); }

/* ---------- проекты: главный проект и сетка ---------- */
.pf-sec--first { border-top: 0; padding-top: clamp(1.5rem, 4vw, 3rem); }
.pf-lp { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; background: linear-gradient(135deg, rgba(124, 200, 255, 0.1), rgba(124, 200, 255, 0.03)); }
@media (min-width: 62rem) { .pf-lp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.pf-lp__img { display: grid; background: var(--bg-2); }
.pf-lp__img img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8 / 5; }
.pf-lp__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.pf-lp__tag { margin: 0; padding: 0.2rem 0.75rem; border-radius: 999px; background: rgba(255, 201, 128, 0.14); border: 1px solid rgba(255, 201, 128, 0.45); color: var(--warm); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-lp__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.pf-lp__t { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; }
.pf-lp__t a { color: inherit; text-decoration: none; }
.pf-lp__s { margin: 0; color: var(--site-dim); line-height: 1.6; }
.pf-lp__m { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; }
.pf-lp__m b { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; color: var(--sig); }
.pf-lp__m span { color: var(--site-dim); font-size: 0.875rem; }
.pf-h3 { margin: 2.5rem 0 1rem; }
.pf-grid { margin-top: 0; }

/* ---------- люди и принципы ---------- */
.pf-rules { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pf-rule { position: relative; padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-rule__n { position: absolute; inset-block-start: 0.9rem; inset-inline-end: 1.1rem; font-size: 2.2rem; font-weight: 700; line-height: 1; color: rgba(255, 201, 128, 0.35); }
.pf-rule h3 { margin: 0 2.5rem 0.5rem 0; font-size: 1.1875rem; }
.pf-rule p { margin: 0; line-height: 1.55; color: var(--site-dim); }
.pf .site-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pf .site-team__item { padding: 0.5rem 0.5rem 0.9rem; }
.pf .site-team__t { font-size: 0.8125rem; }
@media (min-width: 48rem) { .pf .site-team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .pf .site-team__item { padding: 0.75rem 0.75rem 1.1rem; } .pf .site-team__t { font-size: 0.9375rem; } }
.pf-note { max-width: 46rem; margin: 2rem 0 1.25rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(236, 246, 255, 0.9); }
.pf-fine { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--site-dim); }

/* ---------- аналитика ---------- */
.pf-data { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
@media (min-width: 56rem) { .pf-data { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.pf-checks li { position: relative; padding-inline-start: 2rem; line-height: 1.55; font-size: 1.0625rem; }
.pf-checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.2em; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--sig); background: radial-gradient(circle, var(--sig) 0 32%, transparent 36%); }
.pf-measured { padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-h3--tight { margin-top: 0; }
.pf-metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pf-metric { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1rem; align-items: baseline; padding-block: 0.7rem; border-top: 1px solid var(--line); }
.pf-metric:first-child { border-top: 0; padding-top: 0; }
.pf-metric b { grid-row: span 2; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1; color: var(--sig); }
.pf-metric span { color: var(--site-dim); font-size: 0.875rem; }
.pf-metric a { color: var(--sig-hi); font-size: 0.875rem; }
.pf-sources-h { margin: 2rem 0 0.6rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-dim); }
.pf-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-sources__more { border-style: dashed; color: var(--site-dim); }
.pf-sources li { padding: 0.35rem 0.9rem; border: 1px solid var(--site-line); border-radius: 999px; font-size: 0.875rem; color: var(--sig-hi); }

/* ---------- маршрут ---------- */
.pf-route { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); counter-reset: s; position: relative; }
.pf-step { position: relative; padding-top: 3.2rem; }
.pf-step::before { content: ""; position: absolute; inset-inline: 0; top: 1.1rem; height: 2px; background: linear-gradient(90deg, var(--sig-lo), var(--sig)); opacity: 0.55; }
.pf-step__n { position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--sig); color: var(--sig-hi); font-weight: 700; }
.pf-step h3 { margin: 0 0 0.4rem; font-size: 1.1875rem; }
.pf-step p { margin: 0; line-height: 1.55; color: var(--site-dim); }

/* ---------- экран с большой формой ---------- */
.pf-start { background: radial-gradient(ellipse at 85% 0%, rgba(58, 155, 224, 0.22), transparent 55%); } /* прозрачный фон: обитатели глубины видны и здесь */
.pf-start__grid { display: grid; gap: 2rem 3.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .pf-start__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); } }
.pf-h2--xl { font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.08; }
.pf-start .site-inline { border: 1px solid rgba(124, 200, 255, 0.3); border-radius: 1.25rem; background: rgba(6, 22, 42, 0.78); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0, 12, 28, 0.5); }
.pf-start .site-form { padding: clamp(1.25rem, 3vw, 2rem); }
.pf-nums { margin: clamp(2rem, 5vw, 3.5rem) 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.pf-nums div { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-nums dd { margin: 0 0 0.25rem; order: -1; font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; line-height: 1; color: var(--sig-hi); }
.pf-nums div { display: flex; flex-direction: column; }
.pf-nums dt { font-size: 0.875rem; color: var(--site-dim); }
.pf-start__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.pf-start__hint { margin: 0; max-width: 30rem; color: var(--site-dim); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .pf-wave, .pf-glints i, .pf-rays { animation: none; }
  .pf-glints i { opacity: 0.5; }
}
@media (max-width: 40rem) {
  .pf-hero { min-height: 0; padding-block: 7rem 11rem; }
  .pf-glints { display: none; }
}

@media (max-width: 40rem) {
  .pf-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .pf-feat { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pf-card__link { transition: none; }
  .pf-card__link:hover { transform: none; }
}

}

@layer page {
/* ---------- погружение: лучи, пузырьки, шкала глубины (js/dive.js) ---------- */
.pf-rays { position: fixed; inset: 0; z-index: 2; mix-blend-mode: screen; pointer-events: none; opacity: calc(var(--water, 0) * (1 - var(--depth, 0) * 1.25)); transition: opacity 0.2s linear;
  background: repeating-linear-gradient(104deg, rgba(190, 228, 255, 0.16) 0 3%, transparent 3% 11%, rgba(190, 228, 255, 0.1) 11% 13%, transparent 13% 22%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.45) 55%, transparent 90%); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.45) 55%, transparent 90%);
  transform-origin: 50% 0; animation: pf-sway 14s ease-in-out infinite alternate; }
@keyframes pf-sway { from { transform: skewX(-3deg) scaleX(1.05); } to { transform: skewX(3deg) scaleX(0.97); } }
.pf-bubbles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
@media (hover: none) { .pf-bubbles { z-index: 5; } }

.pf-gauge { position: fixed; inset-inline-end: 1rem; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.pf-gauge__list { list-style: none; margin: 0; padding: 0 0 0 0; display: grid; gap: 0.35rem; position: relative; }
.pf-gauge__list::before { content: ""; position: absolute; inset-block: 0.6rem; inset-inline-end: 0.42rem; width: 2px; background: linear-gradient(180deg, rgba(214, 239, 255, 0.5), rgba(124, 200, 255, 0.15)); border-radius: 1px; }
.pf-gauge { pointer-events: none; }
.pf-gauge a { pointer-events: auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; min-height: 1.6rem; color: var(--sig-hi); text-decoration: none; font-size: 0.8125rem; }
.pf-gauge a::after { content: ""; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid rgba(214, 239, 255, 0.7); background: #06213f; position: relative; z-index: 1; transition: transform 0.2s, background 0.2s; }
.pf-gauge a span { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(4, 16, 30, 0.78); border: 1px solid var(--line); opacity: 0; transform: translateX(0.5rem); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; pointer-events: none; }
.pf-gauge a:hover span, .pf-gauge a:focus-visible span, .pf-gauge a[aria-current] span { opacity: 1; transform: none; }
.pf-gauge a[aria-current]::after { background: var(--sig); border-color: var(--sig-hi); transform: scale(1.25); }
.pf-gauge__depth { margin: 0; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(4, 16, 30, 0.78); border: 1px solid var(--line); font-size: 0.8125rem; color: var(--sig-hi); font-variant-numeric: tabular-nums; }
.pf-gauge__depth b { font-size: 1rem; }
@media (max-width: 62rem) { .pf-gauge__list { display: none; } .pf-gauge { top: auto; bottom: 1rem; transform: none; } }

html[data-rise-ready] .pf-rise { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s ease; }
html[data-rise-ready] .pf-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pf-gauge a, .pf-gauge a span { transition: none; } }
}

@layer page {
/* ---------- обитатели глубины (partials/portfolio/fauna.html): силуэты под текстом, без кликов ---------- */
.pf-fauna { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pf-defs { position: absolute; width: 0; height: 0; }
/* над колонкой контента существа почти прозрачные, чтобы не мешали тексту; по краям как есть (ширина колонки 78rem как у .site-wrap) */
.pf-fauna__live { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 39rem), rgba(0, 0, 0, 0.28) calc(50% - 38rem), rgba(0, 0, 0, 0.28) calc(50% + 38rem), #000 calc(50% + 39rem));
  mask-image: linear-gradient(90deg, #000 calc(50% - 39rem), rgba(0, 0, 0, 0.28) calc(50% - 38rem), rgba(0, 0, 0, 0.28) calc(50% + 38rem), #000 calc(50% + 39rem)); }
.pf-f { position: absolute; top: var(--t); left: var(--l, auto); right: var(--r, auto); width: var(--w); opacity: var(--o, 0.5); color: #7fcfff; }
.pf-f__s { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; transform: scaleX(var(--fx, 1)); }
.pf-f--swim { left: 0; animation: pf-swim var(--d, 90s) linear infinite; animation-delay: var(--dl, 0s); }
.pf-f--rtl { left: auto; right: 0; animation-name: pf-swim-rtl; }
@keyframes pf-swim { from { transform: translateX(-30vw); } to { transform: translateX(115vw); } }
@keyframes pf-swim-rtl { from { transform: translateX(30vw); } to { transform: translateX(-115vw); } }
.pf-f--bob { animation: pf-bob var(--d, 9s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes pf-bob { from { transform: translateY(-1.2rem); } to { transform: translateY(1.4rem); } }
.pf-shoal { fill-opacity: 0.9; }
.pf-jelly__dome { fill: currentColor; fill-opacity: 0.4; }
.pf-f--bio { color: #7fffd8; filter: drop-shadow(0 0 10px rgba(127, 255, 216, 0.7)); }
.pf-angler__b { fill: #123252; }
.pf-lure { animation: pf-lure 3.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes pf-lure { from { opacity: 0.55; transform: scale(0.9); } to { opacity: 1; transform: scale(1.15); } }
.pf-sub__beam { animation: pf-lure 4s ease-in-out infinite alternate; }
.pf-prop { animation: pf-prop 0.5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pf-prop { from { transform: scaleY(1); } to { transform: scaleY(0.2); } }
.pf-flip { animation: pf-flip 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 6% 50%; }
.pf-flip--b { animation-direction: alternate-reverse; }
@keyframes pf-flip { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }

.pf-seabed { position: absolute; inset-inline: 0; bottom: 0; height: clamp(8rem, 18vw, 14rem); pointer-events: none; }
.pf-seabed > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-kelp { position: absolute; bottom: 0; height: 60%; width: auto; aspect-ratio: 40 / 160; transform-origin: 50% 100%; animation: pf-kelp 6s ease-in-out infinite alternate; opacity: 0.9; }
.pf-kelp--1 { inset-inline-start: 8%; } .pf-kelp--2 { inset-inline-start: 11%; height: 48%; animation-delay: -2s; } .pf-kelp--3 { inset-inline-end: 14%; height: 54%; animation-delay: -4s; }
@keyframes pf-kelp { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.pf-anchor { position: absolute; bottom: 8%; inset-inline-start: 62%; width: clamp(2.6rem, 5vw, 3.8rem); height: auto; transform: rotate(-14deg); opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .pf-f--swim, .pf-f--rtl, .pf-f--bob, .pf-lure, .pf-sub__beam, .pf-prop, .pf-flip, .pf-kelp { animation: none; }
  .pf-f--swim { left: 12%; } .pf-f--rtl { left: auto; right: 12%; }
}
@media (max-width: 40rem) { .pf-f { width: calc(var(--w) * 0.65); } .pf-f--bob { right: 2%; } }
}

@layer page {
/* ---------- страница проекта на «столбе воды» ---------- */
.pf--case .pf-water { padding-bottom: 0; }
.pf--case .pf-top { background: none; }
.pf-keys { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; }
.pf-keys li { display: grid; gap: 0.15rem; }
.pf-keys b { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1; color: var(--sig-hi); font-variant-numeric: tabular-nums; }
.pf-keys span { max-width: 11rem; font-size: 0.8125rem; line-height: 1.3; color: var(--site-dim); }
.pf-metrics--grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pf-metrics--grid .pf-metric { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-metrics--grid .pf-metric:first-child { padding-top: 1.25rem; }
.pf-metrics--grid .pf-metric b { grid-row: auto; }
.pf-prose--lead { margin: 0 0 1rem; }

/* ---------- оценки: «было», подсказки ---------- */
.pf-ring__was { font-size: 0.75rem; color: var(--warm); }
.pf-ps__dl dd small { margin-inline-start: 0.5rem; font-size: 0.75rem; font-weight: 400; color: var(--site-dim); }
.pf-ps__help { margin: 0 0 1.25rem; max-width: 52rem; }
.pf-ps__help summary { cursor: pointer; color: var(--sig-hi); font-size: 0.875rem; }
.pf-ps__help dl { margin: 0.75rem 0 0; display: grid; gap: 0.6rem; }
.pf-ps__help dt { font-size: 0.8125rem; font-weight: 700; color: var(--sig-hi); }
.pf-ps__help dd { margin: 0.1rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--site-dim); }

/* ---------- «Было и стало» с ползунком ---------- */
.pf-cmp__handle, .pf-cmp__range { display: none; }
.pf-cmp__row[data-cmp].is-slider { --pos: 50%; position: relative; display: block; aspect-ratio: var(--ar); max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--bg-2); }
.pf-cmp__row--mobile[data-cmp].is-slider { max-width: 18rem; }
.is-slider .pf-cmp__fig { position: absolute; inset: 0; margin: 0; }
.is-slider .pf-cmp__fig img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.is-slider .pf-cmp__fig--before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.is-slider .pf-cmp__fig figcaption { position: absolute; bottom: 0.6rem; margin: 0; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(4, 16, 30, 0.78); font-size: 0.8125rem; }
.is-slider .pf-cmp__fig--before figcaption { inset-inline-start: 0.6rem; }
.is-slider .pf-cmp__fig--after figcaption { inset-inline-end: 0.6rem; }
.is-slider .pf-cmp__handle { display: block; position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 3px; margin-left: -1.5px; background: var(--sig-hi); box-shadow: 0 0 14px rgba(124, 200, 255, 0.9); pointer-events: none; }
.is-slider .pf-cmp__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: #0b4271; border: 2px solid var(--sig-hi); color: var(--sig-hi); font-size: 1.25rem; }
.is-slider .pf-cmp__range { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.is-slider .pf-cmp__range:focus-visible ~ .pf-cmp__handle::after { outline: 3px solid var(--sig-hi); outline-offset: 2px; }

/* ---------- слово команды: послание в бутылке ---------- */
.pf-bottle { display: grid; gap: 1.25rem 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 48rem) { .pf-bottle { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.pf-bottle__ill { width: 6.5rem; height: auto; justify-self: center; filter: drop-shadow(0 8px 18px rgba(0, 12, 28, 0.5)); transform: rotate(18deg); animation: pf-bottle 7s ease-in-out infinite alternate; }
@keyframes pf-bottle { from { transform: rotate(14deg) translateY(-0.4rem); } to { transform: rotate(22deg) translateY(0.5rem); } }
/* Два листа одного размера (записка команды и благодарность клиенту): бумага, которую достали из бутылки. Пожелтела, в пятнах, верх и низ выгнуты, а левый и правый края до сих пор скручены в трубку, как держалась свёрнутой; горизонтальных линий нет. */
.pf-letters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 2.25rem; align-items: stretch; }
@media (min-width: 56rem) { .pf-letters { grid-template-columns: repeat(2, minmax(0, 28rem)); } }
.pf-letter-wrap { display: flex; filter: drop-shadow(0 16px 22px rgba(0, 10, 24, 0.6)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); transform: rotate(-1.2deg); }
.pf-letter-wrap--b { transform: rotate(1.4deg); }
.pf-letter { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 17rem; margin: 0; padding: 2.3rem 2.4rem 2rem; color: #4a3519;
  background:
    linear-gradient(90deg, rgba(70, 45, 12, 0.3), transparent 6%, transparent 94%, rgba(70, 45, 12, 0.3)),
    radial-gradient(ellipse at 14% 16%, rgba(120, 70, 20, 0.26), transparent 36%),
    radial-gradient(ellipse at 90% 84%, rgba(105, 58, 14, 0.34), transparent 42%),
    radial-gradient(ellipse at 72% 10%, rgba(150, 110, 50, 0.22), transparent 30%),
    radial-gradient(circle at 28% 74%, rgba(90, 60, 20, 0.18), transparent 22%),
    radial-gradient(circle at 56% 40%, rgba(150, 100, 40, 0.12), transparent 18%),
    linear-gradient(180deg, #ecdcb0 0%, #e0cb92 50%, #d3b97a 100%);
  box-shadow: inset 0 0 2.6rem rgba(105, 65, 18, 0.45), inset 0 0 0.5rem rgba(70, 42, 10, 0.55);
  clip-path: polygon(0 1.1%, 5% 0.4%, 13% 1%, 26% 0.2%, 40% 0.8%, 55% 0.1%, 69% 0.7%, 83% 0.2%, 93% 0.9%, 100% 0.3%, 99.4% 16%, 100% 31%, 99.2% 47%, 100% 64%, 99.3% 82%, 100% 97.4%, 93% 98.6%, 82% 99.3%, 68% 99.8%, 50% 99.5%, 32% 99.8%, 16% 99.2%, 5% 98.4%, 0 97.2%, 0.7% 84%, 0 68%, 0.8% 51%, 0 34%, 0.6% 18%); }
/* скрученные края: полоса-«трубка» слева и справа (тёмная щель, светлый изгиб, плавный переход в лист) */
.pf-letter::before, .pf-letter::after { content: ""; position: absolute; top: 1.2%; bottom: 1.8%; width: 1.15rem; pointer-events: none; }
.pf-letter::before { inset-inline-start: 0; background: linear-gradient(90deg, rgba(60, 38, 10, 0.42) 0%, rgba(238, 219, 168, 0.85) 30%, rgba(210, 184, 120, 0.6) 62%, transparent 100%); box-shadow: 2px 0 5px rgba(70, 42, 10, 0.22); }
.pf-letter::after { inset-inline-end: 0; background: linear-gradient(270deg, rgba(60, 38, 10, 0.42) 0%, rgba(238, 219, 168, 0.85) 30%, rgba(210, 184, 120, 0.6) 62%, transparent 100%); box-shadow: -2px 0 5px rgba(70, 42, 10, 0.22); }
.pf-letter--b::before { top: 2%; bottom: 1.4%; width: 1rem; }
.pf-letter--b::after { top: 1.4%; bottom: 2.2%; width: 1.25rem; }
.pf-letter__lab { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7a5a2b; }
.pf-letter__t { margin: 0; position: relative; }
.pf-letter__t p { margin: 0; font-family: "Caveat", cursive; font-weight: 400; font-size: clamp(1.2rem, 2.3vw, 1.5rem); line-height: 1.35; color: #4a3519; }
.pf-letter__by { position: relative; margin-top: 0.75rem; font-family: "Caveat", cursive; font-weight: 400; font-size: 1.1rem; color: #66501f; text-align: right; }

/* ---------- цитата, отзыв, следующий проект ---------- */
.pf-quote { position: relative; margin: 0; max-width: 48rem; padding-inline-start: 1.75rem; border-inline-start: 3px solid var(--sig); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5; }
.pf-quote p { margin: 0; }
.pf-review { margin: 0; max-width: 48rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-review blockquote { margin: 0; }
.pf-review blockquote p { margin: 0; font-size: 1.125rem; line-height: 1.65; }
.pf-review figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-top: 1rem; font-size: 0.875rem; color: var(--site-dim); }
.pf-review figcaption b { color: var(--sig-hi); font-size: 1rem; }
.pf-review figcaption a { color: var(--sig); }
.pf-next { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.2s; }
@media (min-width: 48rem) { .pf-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.pf-next:hover { border-color: var(--sig); }
.pf-next__img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8 / 5; background: var(--bg-2); }
.pf-next__body { display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; padding: clamp(1.25rem, 3vw, 2rem); }
.pf-next__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-next__t { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.1; }
.pf-next__s { color: var(--site-dim); line-height: 1.55; }
.pf-next__go { color: var(--sig); font-size: 1rem; }
.pf-next__go::after { content: " \2192"; display: inline-block; transition: transform 0.2s; }
.pf-next:hover .pf-next__go::after { transform: translateX(0.35rem); }

@media (prefers-reduced-motion: reduce) { .pf-bottle__ill { animation: none; } .pf-next__go::after { transition: none; } }
}

@layer page {
/* ---------- «Было и стало»: страницы целиком и ряд элементов ---------- */
.pf-cmpx { display: grid; gap: 1rem; }
.pf-cmpx__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.pf-cmpx__tabs, .pf-cmpx__dev { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-cmpx__tab, .pf-cmpx__dev button { min-height: 2.5rem; padding: 0.3rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; }
.pf-cmpx__tab:hover, .pf-cmpx__dev button:hover { border-color: var(--sig); }
.pf-cmpx__tab[aria-selected="true"], .pf-cmpx__dev button[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: #04101e; font-weight: 600; }
.pf-cmpx__tip { margin: 0; font-size: 0.8125rem; color: var(--site-dim); }
.pf-cmpx__page { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.pf-cmpx__h { margin: 0; font-size: 1.125rem; }
.pf-cmpx.is-ready .pf-cmpx__h { display: none; }
.pf-cmpx.is-ready .pf-cmpx__page:not(.is-on) { display: none; }
.pf-cmpx__row--mobile { display: none; }
.pf-cmpx.is-ready .pf-cmpx__row { display: none; }
.pf-cmpx.is-ready .pf-cmpx__row.is-dev { display: block; }
.pf-cmpx__legend { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--sig); }
.pf-cmpx__win { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--bg-2); }
.pf-cmpx__stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0.5rem; }
.pf-cmpx__fig { margin: 0; }
.pf-cmpx__fig img { display: block; width: 100%; height: auto; }
.pf-cmpx.is-ready .pf-cmpx__win { max-height: 38rem; overflow-y: auto; }
.pf-cmpx.is-ready .pf-cmpx__row--mobile .pf-cmpx__win { max-width: 20rem; max-height: 36rem; }
.pf-cmpx.is-ready .pf-cmpx__row--mobile .pf-cmpx__legend { max-width: 20rem; }
.pf-cmpx__stack.is-slider { --pos: 50%; position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.is-slider .pf-cmpx__fig { grid-area: 1 / 1; align-self: start; }
.is-slider .pf-cmpx__fig--before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pf-cmpx__handle, .pf-cmpx__range { display: none; }
.is-slider .pf-cmpx__handle { display: block; position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 3px; margin-left: -1.5px; background: var(--sig-hi); box-shadow: 0 0 14px rgba(124, 200, 255, 0.9); pointer-events: none; }
.is-slider .pf-cmpx__handle::after { content: "\2194"; position: absolute; top: var(--ky, 50%); left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: #0b4271; border: 2px solid var(--sig-hi); color: var(--sig-hi); font-size: 1.25rem; }
.is-slider .pf-cmpx__range { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.is-slider .pf-cmpx__range:focus-visible ~ .pf-cmpx__handle::after { outline: 3px solid var(--sig-hi); outline-offset: 2px; }
.pf-cmpx__win:focus-visible { outline: 2px solid var(--sig-hi); outline-offset: 2px; }

.pf-cmp__objs-h { margin-top: 2.5rem; }
.pf-objs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.pf-obj--wide { grid-column: 1 / -1; }
.pf-obj__t { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--sig-hi); }
.pf-obj .pf-cmp__row[data-cmp].is-slider { max-width: 100%; }
.pf-obj .pf-cmp__fig img { width: 100%; height: auto; }
}

@layer page {
/* ---------- «Фишки» с визуалом: кадр или запись, иконка, номер ---------- */
.pf-feat__media { position: relative; margin: 1.1rem 0 1.1rem; aspect-ratio: 8 / 5; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--bg-2); }
.pf-feat__img, .pf-feat__vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-feat__pp { position: absolute; inset-inline-end: 0.6rem; bottom: 0.6rem; min-height: 1.9rem; padding: 0.2rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(4, 16, 30, 0.8); color: var(--sig-hi); font: inherit; font-size: 0.75rem; cursor: pointer; }
.pf-feat__pp:hover { border-color: var(--sig); }
.pf-feat__n { display: grid; place-items: center; z-index: 2; width: 2rem; height: 2rem; border: 1px solid var(--sig); border-radius: 50%; background: rgba(4, 16, 30, 0.82); color: var(--sig-hi); font-size: 0.9375rem; font-weight: 700; line-height: 1; inset-block-start: 1.1rem; inset-inline-end: 1.25rem; }
.pf-feat__t { display: flex; align-items: center; gap: 0.65rem; margin-inline-end: 0; }
.pf-feat__t { margin-inline-end: 2.6rem; }
.pf-feat__ico { flex: none; width: 2rem; height: 2rem; color: var(--sig); }
}

@layer page {
/* ---------- вкладки элементов в «Было и стало», пометка тестовых данных, строка об услуге ---------- */
.pf-cmpx__sep { align-self: center; padding-inline: 0.5rem 0.2rem; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--site-dim); }
.pf-cmpx__page--obj { max-width: 60rem; }
.pf-obj--narrow { max-width: 22rem; }
.pf-test { display: inline-block; margin: 0 0 1rem; padding: 0.25rem 0.8rem; border: 1px dashed var(--warm); border-radius: 999px; color: var(--warm); font-size: 0.75rem; letter-spacing: 0.06em; }
.pf-svc-blurb { margin: 0 0 1rem; max-width: 46rem; color: rgba(236, 246, 255, 0.9); }
}

@layer page {
}

@layer page {
.pf-review--shot { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); max-width: 54rem; }
@media (min-width: 48rem) { .pf-review--shot { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: center; } }
.pf-review__shot { display: block; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--bg-2); }
.pf-review__shot img { display: block; width: 100%; height: auto; }
}

@layer page {
/* ---------- стена отзывов на странице портфолио и подсветка в отзывах ---------- */
.pf-mk { background: none; color: var(--sig-hi); font-weight: 600; }
.pf-wall { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.pf-wallcard { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.pf-wallcard blockquote { margin: 0; }
.pf-wallcard blockquote p { margin: 0; font-size: 1rem; line-height: 1.6; }
.pf-wallcard__who { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; }
.pf-wallcard__who b { color: var(--sig-hi); }
.pf-wallcard__who span { font-size: 0.8125rem; color: var(--site-dim); }
.pf-wallcard__task { margin: 0; font-size: 0.8125rem; color: var(--site-dim); }
.pf-wallcard__foot { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: auto 0 0; padding-top: 0.5rem; font-size: 0.8125rem; color: var(--site-dim); }
.pf-wallcard__foot a { color: var(--sig); }
}