/* ============================================================
   Портфолио — минимализм
   Токены, светлая/тёмная тема, типографика, сетка
   ============================================================ */

:root {
  color-scheme: light;

  /* Палитра — светлая тема */
  --bg: #ffffff;
  --bg-soft: #e7e4df;
  --panel: #f5f5f7;
  --fg: #0a0a0a;
  --fg-muted: #6b6862;
  --line: #dad7d0;
  --accent: #e8452a;
  --card-fg: #0a0a0a;

  /* Тона для превью-карточек */
  --tone-1: #e9e4da;
  --tone-2: #e3e6df;
  --tone-3: #e6e0e6;
  --tone-4: #dfe4e6;

  /* Типографика */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Ритм */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-gap: clamp(88px, 12vw, 180px);

  /* 4px-сетка — шкала отступов (все значения кратны 4px) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-7: 28px; --s-8: 32px;  --s-9: 36px;  --s-10: 40px; --s-11: 44px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px; --s-18: 72px; --s-20: 80px; --s-24: 96px; --s-30: 120px;

  /* 4px-шкала типографики (шаг 4px) */
  --fs-12: 12px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px;
  --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px; --fs-64: 64px;
  --fs-72: 72px; --fs-80: 80px;

  /* Радиусы — кратны 4px */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-screen: 8px; /* скругление экранов внутри кейсов */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0e0c;
    --bg-soft: #17170f;
    --panel: #17170f;
    --fg: #f3f2ec;
    --fg-muted: #9a998f;
    --line: #29281f;
    --accent: #ff5a3c;
    --card-fg: #f3f2ec;
    --tone-1: #23211b;
    --tone-2: #1e2320;
    --tone-3: #241e24;
    --tone-4: #1c2224;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0c;
  --bg-soft: #17170f;
  --panel: #17170f;
  --fg: #f3f2ec;
  --fg-muted: #9a998f;
  --line: #29281f;
  --accent: #ff5a3c;
  --card-fg: #f3f2ec;
  --tone-1: #23211b;
  --tone-2: #1e2320;
  --tone-3: #241e24;
  --tone-4: #1c2224;
}

/* -------------------------------------------------- Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Lenis (плавный инерционный скролл) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  overflow-x: clip;   /* full-bleed секции не дают горизонтальной прокрутки */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -1000px;
  top: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

/* -------------------------------------------------- Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(12px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
}
.nav__logo-img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.nav__links {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  font-size: 16px;
  color: var(--fg-muted);
}
.nav__links a { position: relative; transition: color 0.2s var(--ease); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__theme {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav__theme:hover { transform: rotate(20deg); border-color: var(--fg-muted); }
.nav__theme-sun,
.nav__theme-moon {
  display: grid;
  width: 16px; height: 16px;
  color: var(--fg);
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.nav__theme-sun { -webkit-mask-image: url("assets/theme-sun.svg"); mask-image: url("assets/theme-sun.svg"); }
.nav__theme-moon { -webkit-mask-image: url("assets/theme-moon.svg"); mask-image: url("assets/theme-moon.svg"); }
/* светлая тема → луна, тёмная → солнце */
.nav__theme-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__theme-moon { display: none; }
  :root:not([data-theme="light"]) .nav__theme-sun { display: grid; }
}
:root[data-theme="dark"] .nav__theme-moon { display: none; }
:root[data-theme="dark"] .nav__theme-sun { display: grid; }
:root[data-theme="light"] .nav__theme-moon { display: grid; }
:root[data-theme="light"] .nav__theme-sun { display: none; }

@media (max-width: 560px) {
  .nav__links { display: none; }
}

/* -------------------------------------------------- Intro */
.intro {
  padding-top: clamp(44px, 8vw, 104px);
  padding-bottom: clamp(24px, 3.5vw, 40px);
}
/* Хиро-леттеринг «Portfolio» по центру: один статичный PORT + слои folio.
   Слои folio БЕЗ PORT (прозрачны в его области) → PORT никогда не двоится. */
.intro__lockup {
  position: relative;
  width: min(100%, 720px);
  margin: 0 auto clamp(20px, 3.5vw, 48px);
  aspect-ratio: 808 / 285;
}
.pf-port {
  position: absolute;
  left: 0; top: 14.39%;
  width: 51.86%; height: auto; /* 419/808 */
  z-index: 0;
}
.lk {
  position: absolute;
  left: 0;
  display: block;
  height: auto;
  z-index: 1;
  opacity: 0;
  /* сдвиг слова «folio» вниз на 8px и вправо на 8px — отступ от «PORT» */
  transform: translate(8px, 8px);
  transition: opacity 0.25s var(--ease);
  will-change: opacity;
}
.lk.is-on { opacity: 1; }
.lk--1 { top: 1.05%;   width: 100.62%; }  /* script  813×285 */
.lk--2 { top: -2.46%;  width: 90.47%; }   /* faceted 731×289 */
.lk--3 { top: 14.39%;  width: 110.15%; left: 4%; }  /* graffiti 890×198 — воздух от T */
.lk--4 { top: 14.39%;  width: 99.63%; }   /* bubble  805×198 */
.lk--5 { top: 14.39%;  width: 106.31%; left: 5%; }  /* groovy  859×198 — воздух от T */
.lk--6 { top: -4.91%;  width: 100.62%; }  /* bold    813×291, PORT relY 55 */
.lk--7 { top: 12.63%;  width: 87%; }      /* brush   703×215, PORT relY 5  */
.lk--8 { top: 14.39%; width: 106.56%; left: 5%; }  /* groovy 861×198 — воздух от T */
.lk--9 { top: 14.39%; width: 96.41%; }     /* outline 779×198, PORT relY 0 */
:root[data-theme="dark"] .intro__lockup { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intro__lockup { filter: invert(1) hue-rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .lk { transition: none; } }
.intro__line {
  max-width: 34ch;
  margin-inline: 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 2.3vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
}
/* Scroll-fill: слова затемняются по мере прокрутки */
.intro__line .w {
  color: var(--fg-muted);
  transition: color 0.45s var(--ease);
}
.intro__line .w.on { color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .intro__line, .intro__line .w { color: var(--fg); transition: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--fg);
  transition: transform 0.2s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--fg); transform: translateY(-2px); }

/* -------------------------------------------------- Section head */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.section-title { font-size: clamp(24px, 3vw, 32px); }
.section-count {
  font-family: var(--font-display);
  color: var(--fg-muted);
  font-size: 16px;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------- Works (full-bleed gallery) */
.works {
  --tile-gap: 8px;
  padding-bottom: var(--section-gap);
}
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--tile-gap);
  row-gap: clamp(32px, 4vw, 52px);
}
@media (max-width: 900px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 26px; }
  .works__grid > .tile { min-width: 0; } /* чтобы 1fr-колонки были равны, а подпись обрезалась */
  .tile__cap { padding-top: 10px; }
  .tile__title { font-size: 16px; line-height: 1.12; }
  .tile__meta { display: none; } /* на мобильном показываем только заголовки */
}

.tile__link { display: block; color: inherit; }
.tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: clamp(12px, 1.4vw, 16px);
  background: var(--tone-1);
}
.tile__media[data-tone="1"] { background: var(--tone-1); }
.tile__media[data-tone="2"] { background: var(--tone-2); }
.tile__media[data-tone="3"] { background: var(--tone-3); }
.tile__media[data-tone="4"] { background: var(--tone-4); }
.tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}
.tile__link:hover .tile__media img { transform: scale(1.07); }
/* Плитки-плейсхолдеры (без картинки) тоже реагируют на ховер */
.tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.tile__link:hover .tile__media::after { opacity: 1; }

.tile__cap { padding-top: 16px; }
.tile__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.tile__meta { margin-top: 4px; color: var(--fg-muted); font-size: 16px; }

/* -------------------------------------------------- About / CV */
.about { padding-bottom: var(--section-gap); }

.cv {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 760px) {
  .cv { grid-template-columns: 1fr; }
}

/* Chips (used in sidebar + jobs) */
.cv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cv__tags li {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  /* по умолчанию (чипсы сайдбара) — как было: тонкая полупрозрачная заливка */
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
/* Теги в карточках опыта — сплошная чёрная заливка + белый текст
   (на тёмной теме инверсия: светлый фон + тёмный текст) */
.cv__job-body .cv__tags li {
  background: var(--fg);
  color: var(--panel);
}
/* На тёмной теме все чипсы — приглушённая полупрозрачная заливка (единый стиль) */
[data-theme="dark"] .cv__tags li,
[data-theme="dark"] .cv__job-body .cv__tags li {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
}

/* Sidebar — инвертированная карточка: чёрный фон, светлый контент */
.cv__aside {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 32px);
  --panel: #0e0e0c;
  --fg: #f4f3f0;
  --fg-muted: #9d998f;
  --line: color-mix(in srgb, #f4f3f0 14%, transparent);
  background: var(--panel);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, #f4f3f0 8%, transparent);
  border-radius: 20px;
}
@media (max-width: 760px) {
  .cv__aside { position: static; }
}
.cv__photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--bg);
  display: block;
}
.cv__id { display: flex; flex-direction: column; gap: 4px; }
.cv__name { font-size: 24px; }
.cv__role { color: var(--fg-muted); font-size: 16px; }

.cv__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: var(--fg-muted);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.cv__contacts li { display: flex; align-items: center; gap: 8px; }
.cv__contacts a { transition: color 0.2s var(--ease); }
.cv__contacts a:hover { color: var(--fg); }
.cv__ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--fg-muted);
}
.cv__ico--tg { width: 12px; height: 12px; }

.cv__block { display: flex; flex-direction: column; gap: 12px; }
.cv__label {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  font-weight: 600;
}
.cv__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
}
.cv__year { color: var(--fg-muted); font-size: 12px; flex: none; }
.cv__muted { color: var(--fg-muted); font-size: 16px; line-height: 1.45; }
.cv__courses { display: flex; flex-direction: column; gap: 20px; }
.cv__course { display: flex; flex-direction: column; gap: 4px; }
.cv__course-year { font-size: 12px; letter-spacing: 0.02em; color: var(--fg-muted); }
.cv__course-name { font-size: 16px; line-height: 1.4; color: var(--fg); }
.cv__course-org { font-size: 12px; color: var(--fg-muted); }

/* Main column */
.cv__main { min-width: 0; }
.cv__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cv__summary {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--fg-muted);
  font-size: clamp(16px, 1.5vw, 16px);
  line-height: 1.6;
}
.cv__exp-title {
  margin-top: clamp(36px, 4vw, 52px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(16px, 2vw, 24px);
  font-family: var(--font-display);
  font-weight: 600;
}
.cv__exp { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cv__job {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(24px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) {
  .cv__job { grid-template-columns: 1fr; gap: 12px; border-bottom: none; }
}
.cv__job-side { display: flex; flex-direction: column; gap: 4px; }
.cv__job-company { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.cv__job-dates { color: var(--fg-muted); font-size: 12px; }
.cv__job-domain { color: var(--fg-muted); font-size: 12px; }
.cv__job-body { min-width: 0; }
.cv__job-role { font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.cv__points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 82%, var(--fg-muted));
}
.cv__points li { position: relative; padding-left: 16px; }
.cv__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-muted);
}
/* Блок опыта на мобильном — шрифты и интерлиньяж по 4px-сетке */
@media (max-width: 560px) {
  .cv__exp-title,
  .cv__job-company,
  .cv__job-role { font-size: 16px; line-height: 24px; }
  .cv__job-dates,
  .cv__job-domain { font-size: 12px; line-height: 16px; }
  .cv__points { font-size: 16px; line-height: 24px; }
  .cv__tags li { font-size: 12px; line-height: 16px; }
}

/* -------------------------------------------------- Contact */
.contact { padding-block: clamp(64px, 10vw, 128px); }
.contact__inner {
  padding-top: clamp(56px, 8vw, 100px);
  text-align: center;
}
.contact__title { font-size: clamp(32px, 6vw, 60px); letter-spacing: -0.03em; }
.contact__lead { margin-top: 16px; color: var(--fg-muted); }
.contact__email {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: -0.02em;
  border-bottom: 2px solid var(--line);
  padding-bottom: 4px;
  transition: border-color 0.3s var(--ease);
}
.contact__email:hover { border-color: var(--fg); }
.contact__socials {
  margin-top: 44px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact__socials .btn svg { width: 16px; height: 16px; display: block; }

/* Футтер-контакт на мобильном — по левому краю */
@media (max-width: 560px) {
  .contact__inner { text-align: left; }
  .contact__socials { justify-content: flex-start; }
}

/* -------------------------------------------------- Footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 40px;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 16px;
}

/* -------------------------------------------------- Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------- Contact form */
.form {
  max-width: 540px;
  margin: 40px auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
}
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.form__input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form__input::placeholder { color: color-mix(in srgb, var(--fg-muted) 70%, transparent); }
.form__input:focus { outline: none; border-color: var(--fg); background: var(--bg); }
.form__textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form__actions .btn { cursor: pointer; }
.form__status { font-size: 16px; color: var(--fg-muted); margin: 0; }
.form__status[data-type="error"] { color: #d9534f; }
.form__status[data-type="ok"] { color: var(--fg); }

.contact__or {
  margin-top: 44px;
  font-size: 16px;
  color: var(--fg-muted);
}
.contact__email { margin-top: 12px; }

/* -------------------------------------------------- Case page */
.case { padding-bottom: var(--section-gap); }

.case__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 5vw, 56px);
  font-size: 16px;
  color: var(--fg-muted);
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.case__back:hover { color: var(--fg); gap: 12px; }

.case__hero { margin-top: clamp(40px, 7vw, 88px); max-width: 900px; }
.case__num {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.case__title {
  font-size: clamp(48px, 9vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.case__subtitle {
  margin-top: 24px;
  max-width: 42ch;
  font-size: clamp(16px, 2.4vw, 24px);
  color: var(--fg-muted);
}
.case__subtitle a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.case__subtitle a:hover { color: var(--fg-muted); }
.case__actions { margin-top: 32px; }

.case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 24px;
  align-items: start;
  margin: clamp(48px, 7vw, 80px) 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.case__meta-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
@media (max-width: 640px) {
  .case__meta-item { flex-basis: 40%; }
}
.case__meta-key {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
}
.case__meta-val { font-size: 16px; margin: 0; }
.case__meta-list { display: flex; flex-direction: column; gap: 8px; }
.case__meta-list li { position: relative; padding-left: 16px; }
.case__meta-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--fg-muted);
}

/* Тональные блоки-плейсхолдеры (обложка, медиа, галерея) */
/* Скрытый h1 для доступности (постерные кейсы с заголовком, запечённым в полосу) */
.case__title--sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.case__cover { margin: clamp(40px, 6vw, 72px) 0 0; aspect-ratio: 16 / 9; }   /* сброс дефолтного margin у <figure>, чтобы хиро были одной ширины */
.case__media { margin-top: 40px; aspect-ratio: 16 / 10; }
.case__tile { aspect-ratio: 4 / 3; }
.case__cover,
.case__media,
.case__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--tone-1);
}
.case__media { border-radius: var(--radius-screen); }
:is(.case__cover, .case__media, .case__tile)[data-tone="1"] { background: var(--tone-1); }
:is(.case__cover, .case__media, .case__tile)[data-tone="2"] { background: var(--tone-2); }
:is(.case__cover, .case__media, .case__tile)[data-tone="3"] { background: var(--tone-3); }
:is(.case__cover, .case__media, .case__tile)[data-tone="4"] { background: var(--tone-4); }
:is(.case__cover, .case__media, .case__tile)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 78% 14%, color-mix(in srgb, var(--fg) 7%, transparent), transparent 60%);
}
/* Hero-обложки без светлой подложки — чтобы на тёмной теме не было просветов */
.case__cover--image { background: transparent; }
.case__cover--image img,
.case__cover--image video { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__cover--image::after { display: none; }
/* Full-bleed секция под хиро: тёмный фон от края до края экрана */
.case__fullbleed {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(40px, 6vw, 72px);
}
.case__fullbleed-img {
  display: block;
  width: 100%;
  max-width: var(--container);   /* контент по ширине сетки */
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: auto;
}
.case__cover[data-tone] { display: none; }   /* hero-плейсхолдер без картинки — не показываем пустую подложку */

/* Графический кейс: секции дизайна от края до края, без зазоров (один в один) */
.case__bleed-img {
  display: block;
  width: calc(100vw - 80px);   /* по 40px отступа слева и справа — не впритык к краю */
  max-width: none;   /* перебиваем глобальный img{max-width:100%} */
  margin-inline: calc(50% - 50vw + 40px);
  margin-top: clamp(40px, 6vw, 72px);
  height: auto;
  border-radius: var(--radius);   /* скруглённый блок — как у хиро (.mlogo) */
}
/* внутренние стыки ленты — без скругления, чтобы картинка оставалась бесшовной */
.case__bleed-img + .case__bleed-img {
  margin-top: -1px;   /* бесшовная стыковка секций */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.case__bleed-img:has(+ .case__bleed-img) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* Мобильный — лента во всю ширину экрана, без боковых отступов */
@media (max-width: 560px) {
  .case__bleed-img {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* Сцена с парящими объектами поверх full-bleed ленты (кейс «Тёплые страны») */
.wfloat { position: relative; }
.wfloat__item {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  /* лёгкая тень для «отрыва» от фона */
  filter: drop-shadow(0 18px 28px rgba(60, 10, 10, 0.16));
}
/* Парение: верхний и нижний плавно стягиваются к центральному и обратно,
   центральный мягко покачивается в противофазе. Трансформ в % — относительно
   размера самого объекта, поэтому амплитуда масштабируется под экран. */
.wfloat__item--top { animation: wfloat-top 6s ease-in-out infinite; }
.wfloat__item--bot { animation: wfloat-bot 6s ease-in-out infinite; }
.wfloat__item--mid { animation: wfloat-mid 6s ease-in-out infinite; }
/* На пике (50%) верхний и нижний съезжают к центру на 173px макета (43.25% от
   своей высоты 400px): зазор 237px → 64px. Центр в этот момент строго на месте. */
@keyframes wfloat-top {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(43.25%); }
}
@keyframes wfloat-bot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-43.25%); }
}
@keyframes wfloat-mid {
  0%, 50%, 100% { transform: translateY(0); }
  25%           { transform: translateY(-3%); }
  75%           { transform: translateY(3%); }
}
@media (prefers-reduced-motion: reduce) {
  .wfloat__item { animation: none !important; }
}

/* Видео-хиро карточка поверх ленты (форма из макета «Тёплые страны») */
.whero {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: #1b1b2b; /* подложка, пока видео грузится */
  /* точная форма карточки из элемента Vector (сквиркл), один в один */
  clip-path: url(#whero-squircle);
}
.whero__clip { position: absolute; width: 0; height: 0; }
.whero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.whero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Горизонтальный скролл строки фильтров (белые пилюли на вязаном фоне) */
.whs {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.whs__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: whs-scroll 9s ease-in-out infinite alternate;
}
.whs__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  box-sizing: border-box;
  flex: 0 0 auto;
  background: var(--whs-pill, #fff);
  color: var(--whs-text, #131313);
  font-family: "Lato", var(--font-sans);
  font-weight: 400;
  white-space: nowrap;
}
.whs__chip--icon { justify-content: center; }
.whs__ic, .whs__chev { width: 1em; height: 1em; flex: 0 0 auto; display: block; }
@keyframes whs-scroll {
  0%, 14%   { transform: translateX(0); }
  86%, 100% { transform: translateX(calc(-1 * var(--whs-shift, 0px))); }
}
@media (prefers-reduced-motion: reduce) { .whs__track { animation: none !important; } }

/* Анимированный ползунок времени поверх ленты (на белой карточке, не по теме) */
.wslider { display: contents; }
.wslider__patch { position: absolute; z-index: 2; pointer-events: none; }
.wslider__handle {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  will-change: left, opacity;
}
.wslider__time {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  font-family: "Rubik", var(--font-sans);
  font-weight: 400;
}

/* Подписи поверх ленты — цвет по теме (тёмные на светлой, светлые на тёмной) */
.wcap {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--fg);
  font-family: "Cabin", var(--font-sans);
  pointer-events: none;
}

/* Бегущая строка иконок поверх ленты (ряд из макета «Тёплые страны») */
.wmarquee {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.wmarquee__track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: wmarquee-run 36s linear infinite;
}
.wmarquee__item {
  height: 100%;
  width: auto;
  flex: 0 0 auto;
  user-select: none;
}
/* трек содержит два одинаковых набора; сдвиг на половину ширины = бесшовный цикл */
@keyframes wmarquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wmarquee__track { animation: none !important; }
}

/* Hero с устройством: фон-мокап + видео в области экрана */
.hero-device { background: transparent; container-type: inline-size; }
.hero-device__bg { position: absolute; inset: 0; }
.hero-device__screen {
  position: absolute;
  object-fit: contain;
  display: block;
  background: var(--bg-soft);
  border: 0;
  border-radius: 0.55cqw; /* скругление под экран монитора */
  overflow: hidden;
}

.case__overview {
  margin: clamp(48px, 7vw, 80px) auto 0;
  max-width: 720px;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.case__section { margin-top: clamp(56px, 8vw, 108px); max-width: 900px; }
.case__section-head { margin-bottom: 24px; }
.case__section-title { font-size: clamp(24px, 3vw, 32px); }
.case__section-body {
  max-width: 640px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg) 82%, var(--fg-muted));
}

.case__gallery {
  margin-top: clamp(56px, 8vw, 108px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 640px) {
  .case__gallery { grid-template-columns: 1fr; }
}
/* нечётный последний тайл — во всю ширину для баланса */
.case__gallery > .case__tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}

/* Реальные картинки в секциях и галерее */
.case__media--image { aspect-ratio: auto; background: var(--bg-soft); }
.case__media--image img { width: 100%; height: auto; display: block; }
.case__media--image::after { display: none; }

.case__gallery--image { align-items: start; }
.case__gallery--image > .case__tile--image:last-child:nth-child(odd) { aspect-ratio: auto; }
.case__tile--image { aspect-ratio: auto; background: var(--bg-soft); }
.case__tile--image img { width: 100%; height: auto; display: block; }
.case__tile--image::after { display: none; }

.case__next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(64px, 9vw, 120px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.case__next-label {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
}
.case__next-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 52px);
  letter-spacing: -0.02em;
  transition: transform 0.3s var(--ease);
}
.case__next:hover .case__next-title { transform: translateX(10px); }

/* Рекомендации внизу кейса — превью всех других работ */
.case__more {
  margin-top: clamp(64px, 9vw, 120px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.case__more-label {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  margin: 0 0 clamp(24px, 4vw, 40px);
}
/* Горизонтальный скролл маленьких плиток */
.case__more-track {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-padding-left: var(--gutter);
}
.case__more-track::-webkit-scrollbar { display: none; }
.case__more-track .tile {
  flex: 0 0 clamp(200px, 26vw, 280px);
  scroll-snap-align: start;
  margin: 0;
}
.case__more-track .tile__title { font-size: 18px; }
.case__more-track .tile__meta { font-size: 14px; }
/* Мобильный — карточки меньше, чтобы помещалось ~2,5 */
@media (max-width: 560px) {
  .case__more-track { gap: 12px; }
  .case__more-track .tile { flex: 0 0 calc((100% - 24px) / 2.5); }
  .case__more-track .tile__title { font-size: 15px; }
  .case__more-track .tile__meta { font-size: 12px; }
}

.case__notfound {
  padding-top: clamp(80px, 15vw, 160px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.case__notfound h1 { font-size: clamp(32px, 6vw, 56px); }
.case__notfound p { color: var(--fg-muted); }
.case__notfound .btn { margin-top: 12px; }

/* -------------------------------------------------- Статья кейса + оглавление */
.art {
  display: grid;
  grid-template-columns: 230px minmax(0, 720px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  justify-content: center;
  margin-top: clamp(40px, 6vw, 72px);
}
@media (max-width: 860px) {
  .art { grid-template-columns: 1fr; gap: 24px; }
}
/* Вариант без оглавления — одна колонка по центру */
.art--notoc { display: block; }
.art--notoc .art__body { max-width: 760px; margin-inline: auto; }

/* Оглавление — вынесено за сетку: фиксированный рейл слева, тело по центру.
   Появляется только после главного вижуала (обложки). Скрыто по умолчанию. */
.art__toc { display: none; }
.art__toc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.art__toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border-left: 1px solid var(--line);
}
.art__toc-list a {
  display: block;
  padding-left: 16px;
  margin-left: -4px;
  border-left: 1px solid transparent;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--fg-muted);
  transition: color 0.2s var(--ease);
}
.art__toc-list a:hover { color: var(--fg); }
.art__toc-list a.is-active { color: var(--fg); font-weight: 500; }
.art__toc-num { display: none; }

@media (min-width: 1280px) {
  .art__toc {
    display: block;
    position: fixed;
    top: 50%;
    left: calc((100vw - 760px) / 2 - 252px);
    width: 204px;
    max-height: 74vh;
    overflow-y: auto;
    z-index: 20;
    opacity: 0;
    transform: translateY(-50%) translateX(-8px);
    pointer-events: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .art__toc.is-shown {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .art__toc { transition: none; }
}

/* Тело статьи */
.art__body { min-width: 0; max-width: 720px; }
.art__lead {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 8px;
}
.art__section {
  scroll-margin-top: 96px;
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
.art__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.art__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg-muted);
  flex: none;
}
.art__title { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -0.02em; }
.art__en { color: var(--fg-muted); font-weight: 400; font-size: 0.6em; letter-spacing: 0; }
.art__p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--fg) 86%, var(--fg-muted));
  margin: 0 0 16px;
}
.art__h { font-size: 16px; font-weight: 600; margin: 32px 0 16px; }
.art__list { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 24px; }
.art__list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg) 86%, var(--fg-muted));
}
.art__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-muted);
}
.art__list strong { color: var(--fg); font-weight: 600; }

/* Нумерованные карточки (проблемы / решения) */
.art__cards { margin: 24px 0 8px; }
.art__card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(24px, 3vw, 32px) 0;
  border-top: 1px solid var(--line);
}
.art__card:last-child { border-bottom: 1px solid var(--line); }
.art__card-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg-muted);
  padding-top: 8px;
  font-variant-numeric: tabular-nums;
}
.art__card-body { min-width: 0; }
.art__card-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin-bottom: 12px;
}
.art__card-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.art__card-text { color: var(--fg-muted); font-size: 16px; line-height: 1.55; max-width: 62ch; }

/* Иллюстрации в статье */
.art__figure { margin: 32px 0 8px; }
.art__figure-ph { aspect-ratio: 16 / 9; border-radius: 16px; background: var(--tone-1); }
.art__figure-ph[data-tone="1"] { background: var(--tone-1); }
.art__figure-ph[data-tone="2"] { background: var(--tone-2); }
.art__figure-ph[data-tone="3"] { background: var(--tone-3); }
.art__figure-ph[data-tone="4"] { background: var(--tone-4); }
.art__figure-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--bg-soft);
}
.art__figure-art .art__radial { width: min(72%, 328px); height: auto; }
.art__radial-lines line { stroke: var(--fg-muted); stroke-width: 1.5; opacity: 0.5; }
.art__radial-lines .chord { opacity: 0.22; }
.art__radial-nodes circle { fill: var(--fg-muted); }
.art__radial-nodes .hub { fill: var(--fg); }
.art__figure figcaption { margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--fg-muted); }

/* -------------------------------------------------- Переходы между страницами */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }

/* Кастомная анимация перехода (фейд + сдвиг) — применяется на всех страницах */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-fill-mode: both;
}
::view-transition-old(root) { animation-name: pageExit; }
::view-transition-new(root) { animation-name: pageEnter; }
@keyframes pageExit { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pageEnter { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==================================================================
   Кейс-стади — стилистика компонентов 1:1 с pamidordesign.co/work/rise
   Шрифты: Space Grotesk (тайтл), Funnel Display (всё остальное),
   Archivo (чипы). Значения сняты с реальных computed-стилей примера.
   ================================================================== */

:root {
  --cs-line: #ccc9c4;   /* разделители, как в примере (темнее нашего --line) */
  --cs-chip: #b8b5b0;   /* бордер чипов */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cs-line: #34332a; --cs-chip: #3c3a30; }
}
:root[data-theme="dark"] { --cs-line: #34332a; --cs-chip: #3c3a30; }

/* Шрифт всей области кейса (шапка/футер вне #case-root — их не трогаем) */
.is-case #case-root {
  font-family: "Funnel Display", var(--font-sans);
}

/* — Мелкие лейблы: 11px, uppercase, трекинг 0.06em, muted (как в примере) — */
.cs__eyebrow,
.cs__kicker,
.is-case .case__meta-key,
.cs__statement-label,
.cs__stat-cap,
.cs__frame-label {
  font-family: "Funnel Display", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  margin: 0;
}

/* — Герой — */
.cs__eyebrow { padding-top: clamp(36px, 5vw, 56px); }
.cs__title {
  font-family: "Space Grotesk", var(--font-display);
  margin-top: 16px;
  font-size: clamp(48px, 9.6vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.cs__tags {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vw, 32px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cs__tags li {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--fg);
  padding: 8px 16px;
  border: 1px solid var(--cs-chip);
  border-radius: 0;
}

/* — Обложка — */
.cs__cover {
  margin: clamp(28px, 4vw, 44px) 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}
.cs__cover img { width: 100%; height: auto; display: block; }
.cs__cover--tint { position: relative; aspect-ratio: 16 / 9; }
.cs__cover--tint[data-tone="1"] { background: var(--tone-1); }
.cs__cover--tint[data-tone="2"] { background: var(--tone-2); }
.cs__cover--tint[data-tone="3"] { background: var(--tone-3); }
.cs__cover--tint[data-tone="4"] { background: var(--tone-4); }

/* — Лид: 17px, ink, узкий трекинг, широкая мера — */
.cs__lead {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  max-width: 70ch;
  font-size: clamp(16px, 1.9vw, 16px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.cs__actions { margin-top: 24px; }
.cs__actions .btn { font-size: 16px; }

/* — Мета: 4 равные колонки, линии сверху/снизу — */
.cs__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  align-items: start;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}
.is-case .case__meta-item { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.is-case .case__meta-val {
  font-family: "Funnel Display", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
@media (max-width: 640px) { .cs__meta { grid-template-columns: repeat(2, 1fr); } }

/* — Блок «Моя роль»: список без разделителей, muted 15px — */
.cs__block { margin-top: clamp(40px, 5vw, 64px); }
.cs__role {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  max-width: 820px;
}
.cs__role li {
  padding-top: 8px;
  font-family: "Funnel Display", var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}
.cs__role li:first-child { padding-top: 0; }

/* — Подход: заголовок + нумерованные строки — */
.cs__approach { margin-top: clamp(52px, 7vw, 88px); }
.cs__h2 {
  font-family: "Funnel Display", var(--font-display);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cs__steps { margin-top: clamp(20px, 2.5vw, 32px); }
.cs__step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px 20px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--cs-line);
}
.cs__step:last-child { border-bottom: 1px solid var(--cs-line); }
.cs__step-num {
  font-family: "Funnel Display", var(--font-sans);
  font-size: 16px;
  color: var(--fg-muted);
  padding-top: 8px;
}
.cs__step-title {
  font-family: "Funnel Display", var(--font-display);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cs__step-text {
  margin: 8px 0 0;
  max-width: 720px;
  font-family: "Funnel Display", var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}
@media (max-width: 560px) { .cs__step { grid-template-columns: 1fr; gap: 4px; } }

/* — Часть (крупный делитель) — */
.cs__part { margin-top: clamp(64px, 9vw, 128px); }
.cs__part > .cs__kicker { padding-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--cs-line); margin-bottom: 12px; }
.cs__part-title {
  font-family: "Funnel Display", var(--font-display);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.cs__part-intro {
  margin: clamp(16px, 2vw, 24px) 0 0;
  max-width: 70ch;
  font-family: "Funnel Display", var(--font-sans);
  font-size: clamp(16px, 1.9vw, 16px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

/* — Система (подраздел) — */
.cs__system { margin-top: clamp(48px, 7vw, 96px); }
.cs__system > .cs__kicker { margin-bottom: 12px; }
.cs__system-title {
  font-family: "Funnel Display", var(--font-display);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cs__system-desc {
  margin: 16px 0 0;
  max-width: 70ch;
  font-family: "Funnel Display", var(--font-sans);
  font-size: clamp(16px, 1.9vw, 16px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* — Утверждения: 11px uppercase лейбл + 15px muted текст — */
.cs__statements { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: clamp(24px, 3vw, 36px); }
.cs__statement { max-width: 70ch; }
.cs__statement-text {
  margin: 8px 0 0;
  font-family: "Funnel Display", var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

/* — Объём: крупные цифры (Funnel Display 500) + 11px uppercase подписи — */
.cs__scope { margin-top: clamp(40px, 5vw, 64px); }
.cs__scope > .cs__kicker { margin-bottom: 16px; }
.cs__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.cs__stat { display: flex; flex-direction: column; gap: 8px; }
.cs__stat-n {
  font-family: "Funnel Display", var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 7.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.cs__stat-cap { max-width: 24ch; }
@media (max-width: 620px) {
  .cs__stats { grid-template-columns: 1fr; gap: 24px; }
  .cs__stat { flex-direction: row; align-items: baseline; gap: 16px; }
}

/* — Процесс: помеченные фрейм-артефакты — */
.cs__process {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.cs__process > .cs__frame:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 620px) { .cs__process { grid-template-columns: 1fr; } }
.cs__frame { margin: 0; }
.cs__frame-label { margin-bottom: 12px; }
.cs__frame-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  border-radius: var(--radius-screen);
  aspect-ratio: 7 / 5;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
}
.cs__frame-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cs__process > .cs__frame:last-child:nth-child(odd) .cs__frame-media { aspect-ratio: 21 / 9; }

/* Портретные скриншоты (напр. экраны регистрации) — выше кадр, показываем верх */
.cs__media--portrait { aspect-ratio: 3 / 4; }
.cs__media--portrait img { object-position: top center; }
.cs__frame-cap {
  margin: 12px 0 0;
  font-family: "Funnel Display", var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--fg-muted);
}

/* — Крупный визуал системы — */
.cs__visual { margin: clamp(24px, 3vw, 40px) 0 0; }
.cs__visual-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-screen);
  aspect-ratio: 7 / 5;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
}
.cs__visual-media img { width: 100%; height: 100%; object-fit: cover; }
.cs__visual figcaption {
  margin-top: 12px;
  font-family: "Funnel Display", var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* — Визуальные подсекции части — */
.cs__vsub { margin-top: clamp(36px, 4.5vw, 60px); }
.cs__vsub-title {
  font-family: "Funnel Display", var(--font-display);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cs__vsub-cap {
  margin: 8px 0 0;
  max-width: 70ch;
  font-family: "Funnel Display", var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}
.cs__vsub-media {
  position: relative;
  overflow: hidden;
  margin-top: clamp(16px, 2.5vw, 28px);
  border-radius: var(--radius-screen);
  aspect-ratio: 7 / 5;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
}
.cs__vsub-media img { width: 100%; height: 100%; object-fit: cover; }

/* — Тональные заливки медиа — */
:is(.cs__frame-media, .cs__visual-media, .cs__vsub-media)[data-tone="1"] { background: var(--tone-1); }
:is(.cs__frame-media, .cs__visual-media, .cs__vsub-media)[data-tone="2"] { background: var(--tone-2); }
:is(.cs__frame-media, .cs__visual-media, .cs__vsub-media)[data-tone="3"] { background: var(--tone-3); }
:is(.cs__frame-media, .cs__visual-media, .cs__vsub-media)[data-tone="4"] { background: var(--tone-4); }
:is(.cs__frame-media, .cs__visual-media, .cs__vsub-media)[aria-hidden="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 78% 14%, color-mix(in srgb, var(--fg) 6%, transparent), transparent 60%);
}
.cs__fig { width: 100%; display: grid; place-items: center; padding: 24px; }
.cs__fig .art__radial { width: min(70%, 300px); height: auto; }

/* ==================================================================
   Кейс-страница по макету Figma (node 3017-43971) — tl__
   Шрифты сайта (Inter / Inter Tight), контент в .container
   ================================================================== */
.tl__lead {
  margin: clamp(40px, 6vw, 84px) 0 0;
  max-width: 900px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.tl__section { margin-top: clamp(56px, 8vw, 104px); }
.tl__h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.tl__h2--solo { display: block; margin-top: clamp(64px, 9vw, 120px); }
.tl__body {
  margin: clamp(16px, 2vw, 24px) 0 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--fg) 88%, var(--fg-muted));
}
.tl__list {
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding-left: 1.3em;
  max-width: 900px;
  list-style: decimal;
  font-family: var(--font-sans);
}
.tl__list li {
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--fg) 88%, var(--fg-muted));
  padding-left: 8px;
  margin-top: 12px;
}
.tl__list li:first-child { margin-top: 0; }

/* Подблок: 20px label + 16px light */
.tl__sub { margin-top: clamp(40px, 5vw, 72px); max-width: 800px; margin-inline: auto; }
.tl__sub .tl__text { max-width: none; }
.tl__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.tl__text {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 16px);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 780px;
}
.tl__text + .tl__text { margin-top: 1em; }

/* Две колонки: Проблема | Решение */
.tl__twocol {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}
@media (max-width: 680px) { .tl__twocol { grid-template-columns: 1fr; gap: 28px; } }
.tl__col .tl__text { max-width: none; }

/* Медиа-рамка (картинка/видео) */
.tl__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-screen);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.tl__frame img,
.tl__frame video { width: 100%; height: auto; display: block; }

/* Полноширинное медиа с лейблом */
.tl__media { margin: clamp(28px, 4vw, 48px) 0 0; }
.tl__media .tl__label { margin-bottom: 16px; }

/* Медиа без белой подложки — только картинка, без рамки и фона */
.tl__media--plain .tl__frame { border: 0; background: transparent; }

/* ===== Miru: лендинг, собранный слоями, с каскадным появлением ===== */
.miru2 {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  aspect-ratio: 1362 / 909;
  border-radius: var(--radius);
  overflow: hidden;
  container-type: inline-size;
  background: #0a0f15;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
}
.miru2__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.miru2 > *:not(.miru2__bg) { position: absolute; z-index: 2; }
.miru2__lines { position: absolute; inset: 0; z-index: 1; }
.miru2__lines span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.1); }
.miru2__logo { left: 2.06%; top: 4.5%; width: 7.35%; height: auto; }
.miru2__nav {
  left: 39.3%; top: 4.7%;
  display: flex; gap: 2.3cqw; align-items: center;
}
.miru2__nav span {
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-weight: 300; font-size: 0.735cqw; color: #fcfcfc; white-space: nowrap;
}
.miru2__btn {
  right: 2.06%; top: 3.5%;
  display: inline-flex; align-items: center;
  padding: 0.62cqw 1.45cqw;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0.7cqw;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-weight: 300; font-size: 1.03cqw; color: #fff; white-space: nowrap;
}
.miru2__title { left: 2.06%; top: 18.3%; width: 42%; }
.miru2__hero {
  margin: 0; font-weight: 500; font-size: 7.93cqw; line-height: 0.92; letter-spacing: -0.01em;
  background: linear-gradient(104deg, #ffffff 34%, #93a0ab 62%, #e9edf1 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.miru2__lead { margin: 2.2cqw 0 0; max-width: 21.5cqw; font-size: 0.81cqw; line-height: 1.45; color: #cad5d9; }
.miru2__t3 { left: 2.06%; top: 68.3%; width: 21.5%; }
.miru2__t2 { right: 1.5%; top: 19.9%; width: 21.1%; }
.miru2__ew { right: 1.5%; top: 75%; width: 18%; }
.miru2__h { margin: 0; font-weight: 500; font-size: 1.91cqw; line-height: 1.05; color: #fff; }
.miru2__h--mid { font-size: 2.28cqw; }
.miru2__h--big { font-size: 3.3cqw; line-height: 1; }
.miru2__body { margin: 1cqw 0 0; font-family: "Inter", sans-serif; font-weight: 400; font-size: 0.81cqw; line-height: 1.5; color: #b9c2ca; }
.miru2__t2 .miru2__body { color: #cad5d9; }
.miru2__more { margin: 1.3cqw 0 0; font-family: "Inter", sans-serif; font-weight: 500; font-size: 0.81cqw; color: #fff; }
.miru2__year { margin: 0.3cqw 0 0; font-family: "Inter", sans-serif; font-weight: 400; font-size: 5.21cqw; line-height: 1; color: #fff; }

/* каскад появления — «кинематографичная сборка»:
   фото из размытия → линии-сетка развёрткой слева направо →
   заголовок открывается wipe'ом, боковые блоки въезжают с расфокуса. */
.miru2.reveal { opacity: 1; transform: none; transition: none; }
/* 1. фон-фото: из тёмного размытия в резкость + медленный отъезд */
.miru2__bg {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(16px) brightness(0.55);
  transition: opacity 1.6s var(--ease), transform 2.2s var(--ease),
    filter 1.9s var(--ease);
}
/* 2. линии-сетка: прочерчиваются сверху, развёрткой слева направо */
.miru2__lines span {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.6s var(--ease), transform 0.85s var(--ease);
}
/* 3а. заголовок: открывается wipe'ом слева направо + лёгкий подъём */
.miru2__title {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(1.1cqw);
  filter: blur(4px);
  transition: opacity 1s var(--ease), clip-path 1.15s var(--ease),
    transform 1.15s var(--ease), filter 1s var(--ease);
}
/* 3б. боковые блоки: въезжают с расфокуса — левые слева, правые справа */
.miru2__logo, .miru2__nav, .miru2__t3 {
  opacity: 0;
  transform: translateX(-3.6cqw);
  filter: blur(5px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease),
    filter 1.1s var(--ease);
}
.miru2__btn, .miru2__t2, .miru2__ew {
  opacity: 0;
  transform: translateX(3.6cqw);
  filter: blur(5px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease),
    filter 1.1s var(--ease);
}
/* крупный год слегка подрастает в масштабе */
.miru2__year {
  transform: scale(0.94);
  transform-origin: left bottom;
  transition: transform 1.2s var(--ease);
}
/* видимое состояние */
.miru2.is-visible .miru2__bg { opacity: 1; transform: none; filter: none; }
/* фон остаётся виден и резок между повторами петли (не уходит в чёрный) */
.miru2.is-seen .miru2__bg { opacity: 1; transform: none; filter: none; }
.miru2.is-visible .miru2__lines span { opacity: 1; transform: none; }
.miru2.is-visible .miru2__lines span:nth-child(1) { transition-delay: 0.55s; }
.miru2.is-visible .miru2__lines span:nth-child(2) { transition-delay: 0.63s; }
.miru2.is-visible .miru2__lines span:nth-child(3) { transition-delay: 0.71s; }
.miru2.is-visible .miru2__lines span:nth-child(4) { transition-delay: 0.79s; }
.miru2.is-visible .miru2__lines span:nth-child(5) { transition-delay: 0.87s; }
.miru2.is-visible .miru2__lines span:nth-child(6) { transition-delay: 0.95s; }
.miru2.is-visible .miru2__lines span:nth-child(7) { transition-delay: 1.03s; }
.miru2.is-visible .miru2__title {
  opacity: 1; clip-path: inset(0 0 0 0); transform: none; filter: none;
  transition-delay: 1.25s;
}
.miru2.is-visible .miru2__t2 { opacity: 1; transform: none; filter: none; transition-delay: 1.5s; }
.miru2.is-visible .miru2__t3 { opacity: 1; transform: none; filter: none; transition-delay: 1.65s; }
.miru2.is-visible .miru2__ew { opacity: 1; transform: none; filter: none; transition-delay: 1.8s; }
.miru2.is-visible .miru2__ew .miru2__year { transform: none; transition-delay: 1.95s; }
.miru2.is-visible .miru2__logo { opacity: 1; transform: none; filter: none; transition-delay: 2s; }
.miru2.is-visible .miru2__nav { opacity: 1; transform: none; filter: none; transition-delay: 2.1s; }
.miru2.is-visible .miru2__btn { opacity: 1; transform: none; filter: none; transition-delay: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .miru2 *, .miru2__lines span {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; transition: none !important;
  }
}

/* ===== Miru: экран логотипа — знак вращается по часовой ===== */
/* фон + надпись «MIRU» — реальный экран из Figma (SVG), знак — поверх */
.mlogo {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  width: calc(100vw - 80px);   /* во всю ширину, по 40px по краям — как остальные полосы */
  max-width: none;
  margin-inline: calc(50% - 50vw + 40px);
  border-radius: var(--radius);
  overflow: hidden;
}
.mlogo__screen { display: block; width: 100%; height: auto; }
/* логотип (знак + слово) поверх фото, по центру; группа = 36.26% ширины кадра */
.mlogo__logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36.26%;
  display: flex;
  align-items: center;
}
/* знак MIRU — вращение вокруг своей оси (195/698 ширины группы) */
.mlogo__sign {
  width: 27.94%;
  height: auto;
  transform-origin: 50% 50%;
  animation: mlogo-spin 8s linear infinite;
  will-change: transform;
}
/* слово MIRU — статично (459/698), зазор от знака 44/698 */
.mlogo__word {
  width: 65.76%;
  height: auto;
  margin-left: 6.3%;
}
@keyframes mlogo-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mlogo__sign { animation: none; } }

/* ===== Miru: веер постов — при наведении плавно раскладывается в ряд ===== */
.fan {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  aspect-ratio: 1872 / 1219;
  container-type: size; /* для cqw/cqh — сдвиги относительно блока */
}
.fan__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.4; pointer-events: none;
}
.fan__card {
  position: absolute;
  left: 50%; top: 50%;
  width: 26.11%; height: 52.82%;
  transform-origin: 50% 50%;
  /* мягкая многослойная тень, повторяющая скруглённую форму карточки */
  filter:
    drop-shadow(0 1px 3px rgba(22, 32, 48, 0.10))
    drop-shadow(0 16px 34px rgba(22, 32, 48, 0.20));
  /* анимируем только transform и filter — максимально плавно (GPU) */
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
  will-change: transform, filter;
}
/* исходный веер (как в макете): -15° / 0° / +15°, со смещением от центра */
.fan__card--a { transform: translate(calc(-50% - 9.81cqw), -50%) rotate(-15deg); z-index: 1; }
.fan__card--b { transform: translate(-50%, -50%) rotate(0deg); z-index: 2; }
.fan__card--c { transform: translate(calc(-50% + 9.53cqw), calc(-50% + 7.19cqh)) rotate(15deg); z-index: 3; }
/* наведение → ровный ряд, карточки чуть «приподнимаются» (глубже тень) */
.fan:hover .fan__card,
.fan:focus-within .fan__card {
  filter:
    drop-shadow(0 3px 8px rgba(22, 32, 48, 0.12))
    drop-shadow(0 26px 56px rgba(22, 32, 48, 0.24));
}
.fan:hover .fan__card--a,
.fan:focus-within .fan__card--a { transform: translate(calc(-50% - 30cqw), -50%) rotate(0deg); }
.fan:hover .fan__card--b,
.fan:focus-within .fan__card--b { transform: translate(-50%, -50%) rotate(0deg); }
.fan:hover .fan__card--c,
.fan:focus-within .fan__card--c { transform: translate(calc(-50% + 30cqw), -50%) rotate(0deg); }
/* текучий стаггер при раскладке и сборке */
.fan__card--a { transition-delay: 0.12s; }
.fan__card--b { transition-delay: 0.06s; }
.fan__card--c { transition-delay: 0s; }
.fan:hover .fan__card--a, .fan:focus-within .fan__card--a { transition-delay: 0s; }
.fan:hover .fan__card--b, .fan:focus-within .fan__card--b { transition-delay: 0.06s; }
.fan:hover .fan__card--c, .fan:focus-within .fan__card--c { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .fan__card { transition: none; } }

/* Выраженная анимация появления блока на экране (всплытие + зум + фейд) */
.reveal.tl__media--rise {
  transform: translateY(52px) scale(0.94);
  transition: opacity 1s var(--ease), transform 1.05s var(--ease);
  will-change: opacity, transform;
}
.reveal.tl__media--rise.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal.tl__media--rise { transform: none; transition: none; }
}

/* Сетка фреймов в натуральном размере (попап + пустые слоты) */
.tl__grid {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.tl__gcell {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-screen);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.tl__gcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl__gcell--empty {
  background: color-mix(in srgb, var(--bg-soft) 70%, var(--bg));
  border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}

/* Интерактивная модалка: карточки внутри подсвечиваются и кликаются */
.tl__gcell--modalui {
  background: #ffffff;
  border: 1px solid #ebedf1;
  overflow: visible;
}
.hsmodal {
  --hs-blue: #2f8bf6;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(16px, 6%, 24px) clamp(16px, 7%, 40px);
}
.hsmodal__head { position: relative; text-align: center; flex: 0 0 auto; }
.hsmodal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(12px, 2.1cqw, 16px);
  letter-spacing: -0.01em;
  color: #16284a;
}
.hsmodal__close {
  position: absolute;
  top: -4px;
  right: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #99a2b2;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.hsmodal__close svg { width: 16px; height: 16px; }
.hsmodal__close:hover { color: #16284a; background: #f1f3f6; }
.hsmodal__options {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.59cqw, 16px); /* макет: 16px */
}
.hsmodal__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.29cqw, 8px); /* макет: 8px */
  width: clamp(72px, 16.02cqw, 99px); /* макет: 99px */
  aspect-ratio: 99 / 88; /* макет: 99×88 */
  padding: clamp(11px, 2.59cqw, 16px);
  background: #ffffff;
  border: 1px solid #d4d4d4; /* макет */
  border-radius: clamp(8px, 1.94cqw, 12px); /* макет: 12px */
  color: #000000; /* макет */
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
    background 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease);
}
.hsmodal__ico { color: #576478; transition: color 0.5s var(--ease), transform 0.5s var(--ease); } /* макет */
.hsmodal__ico svg { width: clamp(16px, 3.88cqw, 24px); height: auto; display: block; } /* макет: 24px */
.hsmodal__label {
  font-family: inherit;
  font-weight: 400; /* макет: Regular */
  font-size: clamp(11px, 2.59cqw, 16px); /* макет: 16px */
  line-height: 1.5;
  white-space: nowrap; /* макет: в одну строку */
  transition: color 0.3s var(--ease);
}
.hsmodal__opt:hover,
.hsmodal__opt:focus-visible,
.hsmodal__opt.is-demo {
  outline: none;
  border-color: var(--hs-blue);
  background: color-mix(in srgb, var(--hs-blue) 8%, #fff);
  color: var(--hs-blue);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px -8px color-mix(in srgb, var(--hs-blue) 30%, transparent);
}
.hsmodal__opt:hover .hsmodal__ico,
.hsmodal__opt:focus-visible .hsmodal__ico,
.hsmodal__opt.is-demo .hsmodal__ico { color: var(--hs-blue); transform: scale(1.08); }
.hsmodal__opt:active { transform: translateY(-1px) scale(0.98); }
.hsmodal__opt.is-selected {
  border-color: var(--hs-blue);
  background: color-mix(in srgb, var(--hs-blue) 14%, #fff);
  color: var(--hs-blue);
  box-shadow: inset 0 0 0 1px var(--hs-blue);
}
.hsmodal__opt.is-selected .hsmodal__ico { color: var(--hs-blue); }
.tl__gcell--modalui { container-type: inline-size; }
@media (prefers-reduced-motion: reduce) {
  .hsmodal__opt, .hsmodal__ico, .hsmodal__close { transition: none; }
  .hsmodal__opt:hover, .hsmodal__opt:active, .hsmodal__opt.is-demo { transform: none; }
  .hsmodal__opt:hover .hsmodal__ico, .hsmodal__opt.is-demo .hsmodal__ico { transform: none; }
}

/* ===== Модалка 2: дропдаун со списком (по макету 3039-53688) ===== */
.tl__gcell--mdd { overflow: hidden; } /* список не выходит за модалку */
.hsdd-modal {
  --dd-blue: #1a76ff;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  color: #000;
}
.hsdd__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 1.6cqw 2.6cqw 0.4cqw;
}
.hsdd__title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 500;
  color: #001a3f;
  font-size: clamp(12px, 3.24cqw, 20px);
}
.hsdd__iconbtn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(20px, 3.9cqw, 24px);
  height: clamp(20px, 3.9cqw, 24px);
  padding: 0;
  border: 0;
  background: none;
  color: #1e1e1e;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.hsdd__iconbtn svg { width: 64%; height: 64%; }
.hsdd__iconbtn:hover { background: #f1f3f6; }
.hsdd__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.4cqw;
  padding: 0.5cqw 2.6cqw;
}
.hsdd__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 3cqw; }
.hsdd__lang {
  display: inline-flex;
  align-items: center;
  gap: 1.3cqw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #000;
  font-size: clamp(12px, 2.59cqw, 16px);
}
.hsdd__radio {
  position: relative;
  box-sizing: border-box;
  width: clamp(16px, 3.88cqw, 24px);
  height: clamp(16px, 3.88cqw, 24px);
  border: 1px solid #d4d4d4;
  border-radius: 50%;
  transition: border-color 0.3s var(--ease);
}
.hsdd__lang.is-on .hsdd__radio { border-color: var(--dd-blue); }
.hsdd__lang.is-on .hsdd__radio::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: var(--dd-blue);
}
.hsdd__field { display: flex; flex-direction: column; gap: 1.3cqw; max-width: 51.8cqw; }
.hsdd__flabel { font-size: clamp(8px, 2.27cqw, 16px); color: #000; }
.hsdd { position: relative; }
.hsdd__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3cqw;
  padding: clamp(8px, 1.3cqw, 8px) clamp(8px, 2.59cqw, 16px);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: clamp(8px, 1.94cqw, 12px);
  cursor: pointer;
  color: #000;
  font-size: clamp(12px, 2.59cqw, 16px);
  transition: border-color 0.3s var(--ease);
}
.hsdd__trigger:hover { border-color: #c4cad4; }
.hsdd.is-open .hsdd__trigger { border-color: var(--dd-blue); }
.hsdd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.hsdd__value.is-empty { color: #c4cad4; }
.hsdd__chev {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #000;
  transition: transform 0.4s var(--ease);
}
.hsdd__chev svg { width: clamp(12px, 2.6cqw, 16px); height: auto; }
.hsdd.is-open .hsdd__chev { transform: rotate(180deg); }
.hsdd__list {
  position: absolute;
  top: calc(100% + 1.3cqw);
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: clamp(8px, 1.94cqw, 12px);
  box-shadow: 0 10px 24px -14px rgba(16, 24, 40, 0.35);
  padding: 1cqw;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.hsdd.is-open .hsdd__list { opacity: 1; pointer-events: auto; overflow-y: auto; }
.hsdd__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(4px, 1.1cqw, 8px) clamp(8px, 2cqw, 12px);
  border: 0;
  background: none;
  border-radius: clamp(8px, 1.3cqw, 8px);
  cursor: pointer;
  color: #1f2430;
  font-size: clamp(12px, 2.4cqw, 16px);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.hsdd__item:hover { background: color-mix(in srgb, var(--dd-blue) 8%, #fff); color: var(--dd-blue); }
.hsdd__item.is-active { background: color-mix(in srgb, var(--dd-blue) 12%, #fff); color: var(--dd-blue); font-weight: 500; }
.hsdd__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 2.6cqw;
  padding: 1.2cqw 2.6cqw 1.8cqw;
}
.hsdd__btn {
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  font-size: clamp(8px, 2.27cqw, 16px);
  padding: clamp(4px, 1cqw, 8px) clamp(16px, 3.9cqw, 24px);
  border-radius: clamp(8px, 1.6cqw, 8px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.15s var(--ease);
}
.hsdd__btn--ghost { background: #fff; border: 1px solid #d4d4d4; color: #000; }
.hsdd__btn--ghost:hover { border-color: #b7bcc5; }
.hsdd__btn--primary { background: var(--dd-blue); border: 1px solid var(--dd-blue); color: #fafcff; }
.hsdd__btn--primary:hover { background: #1569ea; }
.hsdd__btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .hsdd__list, .hsdd__chev, .hsdd__item, .hsdd__btn { transition: none; }
}

/* ===== Модалка «Сохранить как шаблон» (по макету 3039-53742) ===== */
.hssave-modal {
  --dd-blue: #1a76ff;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  color: #000;
}
.hssave__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2cqw 2.6cqw;
}
.hssave__title {
  flex: 1 1 auto;
  font-weight: 600;
  color: #001a3f;
  font-size: clamp(12px, 3.24cqw, 20px);
}
.hssave__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1cqw 6.5cqw;
}
.hssave__field { display: flex; flex-direction: column; gap: 1.3cqw; width: 51.8cqw; max-width: 100%; }
.hssave__label { font-size: clamp(8px, 2.27cqw, 16px); color: #000; }
.hssave__input {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(8px, 1.3cqw, 8px) clamp(8px, 2.59cqw, 16px);
  border: 1px solid #e0e0e0;
  border-radius: clamp(8px, 1.94cqw, 12px);
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: clamp(12px, 2.59cqw, 16px);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hssave__input::placeholder { color: #c4cad4; }
.hssave__input:focus {
  outline: none;
  border-color: var(--dd-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-blue) 14%, transparent);
}
.hssave__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 2.6cqw;
  padding: 1.5cqw 2.6cqw 2.6cqw;
}
.hssave__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  font-size: clamp(12px, 2.59cqw, 16px);
  padding: clamp(8px, 1.6cqw, 8px) clamp(16px, 4.5cqw, 28px);
  border-radius: clamp(8px, 1.94cqw, 12px);
  white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.18s var(--ease);
}
.hssave__btn--ghost { background: #fff; border: 1px solid #d4d4d4; color: #000; }
.hssave__btn--ghost:hover { border-color: #b7bcc5; }
.hssave__btn--primary { background: var(--dd-blue); border: 1px solid var(--dd-blue); color: #fafcff; }
.hssave__btn--primary:hover { background: #1569ea; }
.hssave__btn:active { transform: translateY(1px); }
/* авто-демо: поле «печатает», кнопка «нажимается» и подтверждает */
.hssave__input.is-typing {
  border-color: var(--dd-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-blue) 14%, transparent);
}
.hssave__btn--primary.is-press { transform: scale(0.95); }
.hssave__btn--primary.is-done {
  background: #16a34a;
  border-color: #16a34a;
}
.hssave__check { display: inline-flex; }
.hssave__check svg { width: 1em; height: 1em; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hssave__input, .hssave__btn { transition: none; }
}

@media (max-width: 640px) {
  .tl__grid { grid-template-columns: 1fr; }
}

/* Строки «ярлык — текст» (Проблема / Задача / Ценность), как в макете */
.tl__rows { margin-top: clamp(56px, 8vw, 104px); display: grid; gap: clamp(28px, 4vw, 44px); }
.tl__row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.tl__row-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.tl__row-text {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--fg) 86%, var(--fg-muted));
}
@media (max-width: 640px) {
  .tl__row { grid-template-columns: 1fr; gap: 8px; }
}

/* Было/Стало */
.tl__compare {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 680px) { .tl__compare { grid-template-columns: 1fr; gap: 28px; } }
.tl__cmp { margin: 0; }
.tl__cmp .tl__label { margin-bottom: 16px; }

/* «+» композиция: План школы + Лого Alem.ai */
.tl__plus {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  flex-wrap: wrap;
}
.tl__plus-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tl__plus-media {
  width: clamp(152px, 22vw, 232px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tl__plus-media img { width: 100%; height: 100%; object-fit: cover; }
.tl__plus-media--logo { background: transparent; border: none; }
.tl__plus-media--logo img { object-fit: contain; padding: 16px; }
.tl__plus-sign {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 68px);
  color: var(--fg-muted);
  line-height: 1;
}
.tl__plus .tl__label { text-align: center; }
/* Мобильный — две колонки в ряд, знак «+» между ними */
@media (max-width: 560px) {
  .tl__plus { flex-wrap: nowrap; gap: 12px; }
  .tl__plus-item { flex: 1; min-width: 0; gap: 10px; }
  .tl__plus-media { width: 100%; }
  .tl__plus-sign { flex: none; font-size: 32px; }
}
/* Тёмная тема: даём контраст — лого инвертируем в белый, карту подсвечиваем */
:root[data-theme="dark"] .tl__plus-media { border-color: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .tl__plus-media--logo img { filter: invert(1); }
:root[data-theme="dark"] .tl__plus-media:not(.tl__plus-media--logo) img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl__plus-media { border-color: rgba(255, 255, 255, 0.16); }
  :root:not([data-theme="light"]) .tl__plus-media--logo img { filter: invert(1); }
  :root:not([data-theme="light"]) .tl__plus-media:not(.tl__plus-media--logo) img { filter: invert(1) hue-rotate(180deg); }
}

/* ==================================================================
   Before/After слайдер (Было/Стало) — .ba
   ================================================================== */
.ba {
  position: relative;
  margin: clamp(28px, 4vw, 48px) auto 0;
  max-width: 100%;
  border-radius: var(--radius-screen);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.ba:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba__img { position: absolute; inset: 0; }
.ba__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba__before { will-change: clip-path; }
.ba__label {
  position: absolute;
  top: 16px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  pointer-events: none;
  backdrop-filter: blur(3px);
  transition: opacity 0.2s var(--ease);
}
.ba__label--before { left: 16px; }
.ba__label--after { right: 16px; }
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 8px color-mix(in srgb, #000 40%, transparent);
  z-index: 4;
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px color-mix(in srgb, #000 32%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 0.18s var(--ease);
}
.ba.is-dragging .ba__grip { transform: translate(-50%, -50%) scale(1.08); }
.ba__grip::before,
.ba__grip::after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
}
.ba__grip::before { border-right-color: #141414; }
.ba__grip::after { border-left-color: #141414; }

/* ==================================================================
   Анимированный хиро кейса: появление логотипа + падающая звезда
   (bg и логотип — отдельные слои одного размера 1920×807)
   ================================================================== */
.hero-anim {
  position: relative;
  margin: clamp(40px, 6vw, 72px) 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #16263b;
  isolation: isolate;
}
.hero-anim__bg,
.hero-anim__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-anim__bg {
  object-fit: cover;
  z-index: 1;
  animation: heroBgIn 0.9s var(--ease) both;
}
.hero-anim__mark {
  object-fit: contain;
  z-index: 3;
  opacity: 0;
  transform: scale(1.06);
  animation: heroHolo 10s ease-in-out 0.4s infinite;
}
.hero-anim__star {
  position: absolute;
  top: 15%;
  left: 82%;
  z-index: 2;
  width: 120px;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%);
  transform: rotate(146deg) translateX(0);
  transform-origin: right center;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
  animation: heroStar 8s linear 3.3s infinite;
  pointer-events: none;
}
.hero-anim__star::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
}
@keyframes heroBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroHolo {
  0%   { opacity: 0;    transform: scale(1.06); filter: blur(14px) brightness(1.7) drop-shadow(0 0 26px rgba(120, 210, 255, 0.85)); }
  16%  { opacity: 0.85; transform: scale(1.025); filter: blur(5px) brightness(1.4) drop-shadow(0 0 18px rgba(120, 210, 255, 0.62)); }
  30%  { opacity: 1;    transform: scale(1); filter: blur(0) brightness(1) drop-shadow(0 0 7px rgba(130, 200, 255, 0.3)); }
  80%  { opacity: 1;    transform: scale(1); filter: blur(0) brightness(1) drop-shadow(0 0 7px rgba(130, 200, 255, 0.3)); }
  93%  { opacity: 0.45; transform: scale(1.03); filter: blur(7px) brightness(1.45) drop-shadow(0 0 22px rgba(120, 210, 255, 0.72)); }
  100% { opacity: 0;    transform: scale(1.06); filter: blur(14px) brightness(1.7) drop-shadow(0 0 26px rgba(120, 210, 255, 0.85)); }
}
@keyframes heroStar {
  0%   { opacity: 0;    transform: rotate(146deg) translateX(0); }
  3%   { opacity: 0.9;  }
  9%   { opacity: 0.85; }
  18%  { opacity: 0.55; }
  26%  { opacity: 0.22; }
  34%  { opacity: 0;    transform: rotate(146deg) translateX(720px); }
  100% { opacity: 0;    transform: rotate(146deg) translateX(720px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim__bg { animation: none; opacity: 1; }
  .hero-anim__mark { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-anim__star { display: none; }
}


/* Затирание чувствительных данных поверх медиа (блюр) */
.tl__redact {
  position: absolute;
  z-index: 2;
  border-radius: 8px;
  background: rgba(20, 27, 42, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

/* ==================================================================
   Переключатель категорий работ (UX/UI ↔ Graphic Design)
   ================================================================== */
.works__filter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;        /* табы одинаковой ширины */
  gap: 8px;
  width: min(100%, 400px);
  margin: 0 auto clamp(24px, 4vw, 48px);   /* по центру экрана */
  padding: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 16px;   /* концентрично: таб 12px + отступ 4px */
}
.works__tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.25s var(--ease);
}
.works__tab:hover { color: var(--fg); }
.works__tab.is-active { background: var(--fg); color: var(--bg); }
.works__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile--hidden { display: none; }

.works__empty {
  grid-column: 1 / -1;
  padding: clamp(48px, 9vw, 112px) 0;
  text-align: center;
  color: var(--fg-muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
}

/* Пустой слот-плейсхолдер под экран (пока нет реального скрина) */
.tl__frame--tint { aspect-ratio: 16 / 9; background: var(--tone-1); }
.tl__frame--tint[data-tone="1"] { background: var(--tone-1); }
.tl__frame--tint[data-tone="2"] { background: var(--tone-2); }
.tl__frame--tint[data-tone="3"] { background: var(--tone-3); }
.tl__frame--tint[data-tone="4"] { background: var(--tone-4); }

/* -------------------------------------------------- Кнопка «наверх» (страницы кейсов) */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 50;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease), border-color 0.2s var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top.is-visible:hover {
  border-color: var(--fg);
  transform: translateY(-3px);
}
.to-top svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* -------------------------------------------------- Табы в hero кейса */
.case__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;        /* табы одинаковой ширины */
  gap: 8px;
  width: min(100%, 560px);
  margin: clamp(16px, 2.4vw, 28px) 0 0;   /* по левому краю */
  padding: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 16px;          /* концентрично: таб 12px + отступ 4px */
  overflow-x: auto;             /* на узких экранах табы прокручиваются внутри пилюли */
  scrollbar-width: none;
}
.case__tabs::-webkit-scrollbar { display: none; }
.case__tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 16px);
  letter-spacing: -0.01em;
  color: var(--fg-muted);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.25s var(--ease);
}
.case__tab:hover { color: var(--fg); }
.case__tab.is-active { background: var(--fg); color: var(--bg); }
.case__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.case__tab-panel[hidden] { display: none; }
.tl__lead--muted { color: var(--fg-muted); }

/* Пустой hero-фрейм (таб без обложки) и узкая media (модалка) */
.case__cover--empty { background: transparent; border: 1px solid var(--line); }
.tl__media--narrow { max-width: 680px; margin-inline: auto; }
.tl__media--phone { max-width: 420px; margin-inline: auto; }   /* мобильный экран — по центру, в ширину телефона */

/* Desktop + mobile рядом: широкий экран слева, телефон справа */
.tl__pair {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr clamp(200px, 24%, 280px);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.tl__pair figure { margin: 0; min-width: 0; }
@media (max-width: 680px) {
  .tl__pair { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .tl__pair-m { max-width: 420px; width: 100%; }
}

/* -------------------------------------------------- Карусель страниц с нумерованными табами (горизонтальный скролл) */
.cz { margin-top: clamp(28px, 4vw, 48px); }
.cz__bar { display: flex; justify-content: center; margin-bottom: clamp(16px, 1.8vw, 20px); }
.cz__tabs {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 16px;   /* концентрично: таб 12px + отступ 4px */
}
.cz__tab {
  appearance: none; -webkit-appearance: none; border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.25s var(--ease);
}
.cz__tab:hover { color: var(--fg); }
.cz__tab.is-active { background: var(--fg); color: var(--bg); }
.cz__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cz__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-screen);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.cz__track::-webkit-scrollbar { display: none; }
.cz__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: visible;
}
.cz__slide::-webkit-scrollbar { display: none; }
.cz__pair {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 23%, 260px);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}
.cz__pair figure { margin: 0; min-width: 0; }
@media (max-width: 680px) {
  .cz__pair { grid-template-columns: 1fr; justify-items: center; gap: 24px; }
  .cz__m { max-width: 360px; width: 100%; }
}

/* -------------------------------------------------- Success-модалка «Изменение ИУП» (800×548, анимированная) */
.hssucc-wrap { max-width: 800px; margin: clamp(28px, 4vw, 48px) auto 0; }
.hssucc {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 800 / 548;
  border-radius: 2cqw;
  background: #fff;
  border: 1px solid #e7e5e4;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  color: #1c1917;
}
.hssucc__head {
  flex: 0 0 auto;
  height: 8cqw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2cqw;
}
.hssucc__close {
  appearance: none; -webkit-appearance: none;
  width: 4cqw; height: 4cqw;
  display: grid; place-items: center;
  border: 1px solid #e7e5e4; border-radius: 1.25cqw;
  background: #fff; color: #1c1917; cursor: pointer;
}
.hssucc__close svg { width: 2cqw; height: 2cqw; }
.hssucc__body {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2cqw;
  padding-bottom: 3cqw;
}
.hssucc__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hssucc__piece {
  position: absolute; left: 50%; top: 28%;
  width: 2cqw; height: 3cqw; border-radius: 0.4cqw;
  background: var(--c, #facc15);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.hssucc__badge {
  width: 12cqw; height: 12cqw; border-radius: 50%;
  background: rgba(0, 122, 255, 0.15); display: grid; place-items: center;
}
.hssucc__thumb { width: 6cqw; height: 6cqw; color: #007aff; display: grid; place-items: center; }
.hssucc__thumb svg { width: 100%; height: 100%; display: block; }
.hssucc__title2 { font-family: var(--font-display); font-weight: 600; font-size: 4cqw; margin: 0; }
.hssucc__text { font-size: 2.5cqw; color: #57534e; white-space: nowrap; text-align: center; margin: 0; line-height: 1.3; }
.hssucc__btn {
  appearance: none; -webkit-appearance: none; border: 0;
  background: #2563eb; color: #fafaf9;
  font-family: var(--font-display); font-weight: 500; font-size: 2cqw;
  padding: 1.5cqw 3cqw; border-radius: 1.5cqw; cursor: pointer;
  transition: background 0.2s var(--ease);
}
.hssucc__btn:hover { background: #1d4ed8; }

@keyframes hssuccToss {
  0%   { opacity: 0; transform: translateY(2cqw) rotate(0deg) scale(0.8); animation-timing-function: cubic-bezier(0.25, 0.7, 0.4, 1); }
  12%  { opacity: 1; }
  48%  { transform: translateY(-8.5cqw) rotate(270deg) scale(1.06); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.95); }
  100% { opacity: 1; transform: translateY(0) rotate(360deg) scale(1); }
}
@keyframes hssuccUp { from { opacity: 0; transform: translateY(1.4cqw); } to { opacity: 1; transform: none; } }
@keyframes hssuccPiece {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
  8% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); }
}
.hssucc.is-playing .hssucc__badge { animation: hssuccToss 0.72s both; }
.hssucc.is-playing .hssucc__title2 { animation: hssuccUp 0.45s 0.42s both; }
.hssucc.is-playing .hssucc__text { animation: hssuccUp 0.45s 0.52s both; }
.hssucc.is-playing .hssucc__btn { animation: hssuccUp 0.45s 0.62s both; }
.hssucc.is-playing .hssucc__piece { animation: hssuccPiece var(--dur, 1.6s) var(--delay, 0s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .hssucc.is-playing .hssucc__badge,
  .hssucc.is-playing .hssucc__title2,
  .hssucc.is-playing .hssucc__text,
  .hssucc.is-playing .hssucc__btn { animation: none; }
  .hssucc__piece { display: none; }
}

/* -------------------------------------------------- Hero: видео на экране ноутбука (перспектива matrix3d) */
.hero-laptop { position: relative; }
.hero-laptop__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-laptop__screen {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  object-fit: cover;
  opacity: 0;                 /* показываем после позиционирования в JS */
  transition: opacity 0.35s var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}
.hero-laptop__screen.is-placed { opacity: 1; }
.hero-laptop__screen--img { object-position: top left; }

/* Экран-конструктор: интерфейс собирается по компонентам */
.hero-laptop__screen--layers { overflow: hidden; background: #151515; }
.lap-layer {
  position: absolute; display: block; object-fit: cover; object-position: top left;
  opacity: 0; will-change: transform, opacity; backface-visibility: hidden;
}
/* Полный цикл: проявление → удержание собранного → мягкое растворение → повтор */
@keyframes lapLoopLeft {
  0%   { opacity: 0; transform: translateX(-12px); }
  16%  { opacity: 1; transform: none; }
  84%  { opacity: 1; transform: none; }
  95%  { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateX(-12px); }
}
@keyframes lapLoopTop {
  0%   { opacity: 0; transform: translateY(-12px); }
  16%  { opacity: 1; transform: none; }
  84%  { opacity: 1; transform: none; }
  95%  { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes lapLoopUp {
  0%   { opacity: 0; transform: translateY(14px); }
  16%  { opacity: 1; transform: none; }
  84%  { opacity: 1; transform: none; }
  95%  { opacity: 0; transform: none; }
  100% { opacity: 0; transform: translateY(14px); }
}
.reveal.is-visible .lap-layer--left { animation: lapLoopLeft 7.5s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) infinite both; }
.reveal.is-visible .lap-layer--top  { animation: lapLoopTop  7.5s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) infinite both; }
.reveal.is-visible .lap-layer--up   { animation: lapLoopUp   7.5s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) infinite both; }
@media (prefers-reduced-motion: reduce) {
  .lap-layer { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* -------------------------------------------------- «Обо мне» — шапка (референс Obscura: заголовок+стрелка, фото слева, контент справа) */
.abouthero { margin-bottom: clamp(72px, 10vw, 152px); }

/* 12-колоночная сетка (как в референсе Obscura) */
.abouthero__top,
.abouthero__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(12px, 1.5vw, 28px);
  align-items: start;
}
.abouthero__title {
  grid-column: 1 / 10;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 9.5vw, 128px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.abouthero__arrow {
  grid-column: 11 / 13;
  justify-self: end;
  align-self: start;
  display: grid;
  place-items: center;
  width: clamp(48px, 7vw, 116px);
  height: clamp(48px, 7vw, 116px);
  margin-top: clamp(8px, 1.4vw, 32px);
  color: var(--fg);
  transition: transform 0.3s var(--ease);
}
.abouthero__arrow:hover { transform: translateY(10px); }
.abouthero__arrow svg { width: 78%; height: 78%; display: block; }

/* Ряд: фото cols 1–3, контент cols 6–12 — между ними воздух */
.abouthero__row { margin-top: clamp(56px, 8vw, 128px); }
.abouthero__photo {
  grid-column: 1 / 4;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 16px);
  background: var(--bg-soft);
}
.abouthero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; filter: grayscale(100%) contrast(1.04); }

.abouthero__body { grid-column: 6 / 13; }
.abouthero__lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4.8vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
/* Мета: эйрбрау (2 кол.) + текст (5 кол.), глубоко ниже подзаголовка — ритм */
.abouthero__meta {
  margin-top: clamp(64px, 10vw, 176px);
  display: grid;
  grid-template-columns: 2fr 5fr;
  gap: clamp(16px, 2vw, 40px);
}
.abouthero__eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
}
.abouthero__text p {
  margin: 0 0 1.1em;
  font-size: clamp(16px, 1.25vw, 16px);
  line-height: 1.55;
  color: var(--fg);
  max-width: 46ch;
}
.abouthero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-weight: 500;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 4px;
  transition: gap 0.25s var(--ease);
}
.abouthero__link:hover { gap: 16px; }

@media (max-width: 1024px) {
  .abouthero__photo { grid-column: 1 / 5; }
  .abouthero__body { grid-column: 6 / 13; }
}
@media (max-width: 760px) {
  .abouthero__title { grid-column: 1 / -1; }
  .abouthero__arrow { display: none; }
  .abouthero__row { margin-top: 28px; }
  .abouthero__photo { grid-column: 1 / -1; aspect-ratio: 4 / 3; max-height: 62vh; }
  .abouthero__body { grid-column: 1 / -1; }
  .abouthero__meta { grid-template-columns: 1fr; gap: 8px; margin-top: 28px; }
}
@media (max-width: 560px) {
  /* фото «обо мне» — размером как превью работы, с отступами вокруг */
  .abouthero__photo {
    width: clamp(150px, 46vw, 180px);
    aspect-ratio: 1 / 1;
    max-height: none;
    margin: 4px 0 24px;
    border-radius: 16px;
  }
  /* на мобильном прячем мелкую подпись «— Обо мне» */
  .abouthero__eyebrow { display: none; }
}

/* -------------------------------------------------- Чёрный футтер с формой (инверсия, full-bleed) */
.contact,
.site-footer {
  position: relative;
  isolation: isolate;
  --fg: #f4f3f0;
  --fg-muted: #9d998f;
  --bg: #141311;
  --bg-soft: #1f1d18;
  --panel: #0e0e0c;
  --line: color-mix(in srgb, #f4f3f0 10%, transparent);
  color: var(--fg);
}
.contact::before,
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #0e0e0c;
}
.contact__title { color: var(--fg); }

/* -------------------------------------------------- Hero «переключение темы» (кроссфейд светлая↔тёмная) */
.hero-theme { position: relative; background: transparent; }
.hero-theme__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-theme__img--dark {
  opacity: 0;
  animation: heroThemeSwitch 7s ease-in-out infinite;
  will-change: opacity;
}
@keyframes heroThemeSwitch {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-theme__img--dark { animation: none; opacity: 0; }
}

/* Экран-переключатель: кроссфейд между двумя состояниями (свернуть ↔ развернуть) */
.tl__swap {
  position: relative;
  border-radius: var(--radius-screen);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.tl__swap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.tl__swap-img--b {
  opacity: 0;
  animation: tlSwap 6s ease-in-out infinite;
  will-change: opacity;
}
@keyframes tlSwap {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tl__swap-img--b { animation: none; opacity: 0; }
}