/* ==== Design tokens (из Figma: Developer Documentation) ==== */
:root {
  --blue: #1775d2;
  --dark-blue: #005dbb;
  --blue-400: #80b3ff;
  --blue-hover: #cce0ff;
  --blue-6: rgba(23, 117, 210, 0.06);
  --black: #0d121c;
  --brand-dark: #0e1626;
  --grey-900: #202939;
  --grey-800: #2e374b;
  --grey-700: #434b5b;
  --grey-600: #576073;
  --grey-300: #c1cad8;
  --grey-200: #e3e6eb;
  --grey-100: #f2f2f2;
  --grey-50: #f9f9f9;
  --border: #e3e8ef;
  --text-secondary: #344054;
  --green: #16a34a;
  --white: #fff;
  --white-60: rgba(255, 255, 255, 0.6);
  --white-80: rgba(255, 255, 255, 0.8);
  --grad-btn: linear-gradient(180deg, #4ba3fa 0%, #1f79d3 100%);
  --grad-btn-hover: linear-gradient(180deg, #4aa2f9 0%, #0e5ba7 100%);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  /* Состояния карточек из Figma (States Carts) */
  --card-hover-shadow: 0 4px 20px 2px rgba(48, 132, 216, 0.10);
  --card-pressed-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-pressed-bg: #f9f9f9;
  --font-badge: 'Switzer', var(--font);

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Montserrat', var(--font);

  --container: 1280px;
  --pad-x: 80px;
  --section-y: 80px;
  --h1: 46px;
  --h2: 46px;
}

@media (max-width: 1100px) {
  :root { --pad-x: 40px; }
}
@media (max-width: 768px) {
  :root { --pad-x: 20px; --section-y: 48px; --h1: 36px; --h2: 36px; }
}

/* ==== Base ==== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol { list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: calc(var(--container) + var(--pad-x) * 2); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--section-y) 0; position: relative; }

/* ==== Typography ==== */
.h1, .h2 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--black); }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: -0.32px; }
.lead { font-size: 18px; line-height: 28px; letter-spacing: 0.18px; color: var(--grey-600); }
.lead--dark { color: var(--grey-800); }
.note { font-family: var(--font-accent); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-900); }
.small { font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-700); }
.label { font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.28px; text-transform: uppercase; color: var(--black); }

/* ==== Buttons ==== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 12px; border: 1px solid transparent;
  font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; white-space: nowrap;
  box-shadow: var(--shadow-xs); transition: filter .2s, background-color .2s, border-color .2s, transform .2s;
}
.btn--primary { background: var(--grad-btn); color: var(--white); }
.btn--primary:hover { background: var(--grad-btn-hover); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.20); }
.btn--primary:active { background: var(--grad-btn-hover); border-color: var(--dark-blue); box-shadow: 1px 1px 10px rgba(13, 24, 46, 0.20); }
.btn--primary:not(.btn--lg) { border-radius: 10px; }
.btn--lg.btn--primary:active { border-color: var(--blue); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.20); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--grey-300); border-color: transparent; color: var(--white); box-shadow: none; cursor: default; }
.btn--secondary { background: var(--white); border-color: var(--grey-200); color: var(--grey-800); }
.btn--secondary:hover { border-color: var(--blue-400); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.10); }
.btn--secondary:active { border-color: var(--blue); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.10); }
.btn--white { background: var(--white); border-color: var(--border); color: var(--grey-900); height: 46px; }
.btn--white:hover { border-color: var(--blue-400); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.10); }
.btn--white:active { border-color: var(--blue); }
.btn--lg { padding: 12px 20px; }
.btn--lg.btn--primary { font-weight: 600; line-height: 22px; letter-spacing: 0.14px; }
.btn--lg.btn--secondary { padding: 10px 20px; }
.btn--md { border-radius: 10px; }
.btn--sm.btn--primary { border-radius: 10px; }
.btn--sm.btn--secondary { color: var(--grey-800); border-color: var(--grey-200); }
.buttons { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }

/* ==== Tags, badges ==== */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags--10 { gap: 10px; }
.tag {
  display: inline-flex; padding: 6px 12px 8px; border-radius: 10px; background: var(--blue-6);
  color: var(--dark-blue); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.12px; white-space: nowrap;
}
.badges { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 4px 0 4px 2px; }
.badges--wrap { justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-badge); font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-secondary); white-space: nowrap; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #1f63d8; box-shadow: 0 0 0 2px rgba(31, 99, 216, 0.14); }
.sep { display: inline-block; width: 3px; height: 3px; margin: 0 3.5px; border-radius: 50%; background: var(--border); vertical-align: middle; flex: none; }

/* ==== Decorative glows (размытые фоновые пятна из макета) ==== */
.glow { position: absolute; pointer-events: none; z-index: -1; filter: blur(60px); }
.glow--hero { top: -220px; left: 0; right: 0; height: 1500px;
  background: radial-gradient(40% 35% at 78% 30%, rgba(128, 179, 255, 0.28), transparent 70%),
              radial-gradient(35% 25% at 20% 80%, rgba(204, 224, 255, 0.35), transparent 70%); }

/* ==== Header ==== */
.header { position: sticky; top: 0; z-index: 50; padding: 20px var(--pad-x) 0; max-width: calc(var(--container) + var(--pad-x) * 2); margin: 0 auto; }
.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 16px 16px 32px; border-radius: 16px; border: 1px solid var(--grey-100);
  background: var(--white-80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 10px rgba(20, 26, 105, 0.05);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo__text { display: flex; flex-direction: column; width: 120px; line-height: 1; }
.logo__text span:first-child { font-size: 16px; font-weight: 600; letter-spacing: -0.32px; color: var(--blue); line-height: 1.2; }
.logo__text span:last-child { font-size: 14.8px; font-weight: 500; color: var(--blue-400); margin: -2px 0 0 9px; letter-spacing: 0.15px; }
.logo--white .logo__text span:first-child { color: var(--white); }
.logo--white .logo__text span:last-child { color: var(--white-60); }
.header__nav { display: flex; gap: 32px; }
.header__nav a { font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.14px; color: var(--grey-800); transition: color .2s; }
.header__nav a:hover { color: var(--blue); }
.header__nav a:active { color: var(--dark-blue); }
.header__actions { display: flex; align-items: center; gap: 16px; }
.header__mobile { display: none; align-items: center; gap: 16px; }
.lang { display: flex; padding: 4px; border: 1px solid var(--grey-100); border-radius: 12px; background: var(--white); }
.lang__opt { padding: 6px 12px 8px; border-radius: 10px; font-size: 14px; line-height: 1.3; letter-spacing: 0.42px; color: var(--black); }
.lang__opt.is-active { background: var(--blue-6); color: var(--dark-blue); font-weight: 600; letter-spacing: 0.28px; }
.lang__opt:not(.is-active):hover { color: var(--blue); }
.burger { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--grey-200); transition: border-color .2s, box-shadow .2s; background: var(--white); display: grid; place-content: center; gap: 4px; padding: 0; box-shadow: var(--shadow-xs); }
.burger:hover { border-color: var(--blue-400); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.10); }
.burger:active { border-color: var(--blue); }
.burger span { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: var(--grey-800); transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
.mobile-menu { margin-top: -16px; padding: 32px 20px 24px; border-radius: 0 0 16px 16px; border: 1px solid var(--grey-100); border-top: 0;
  background: var(--white-80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 20px rgba(20, 26, 105, 0.06); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 16px; }
.mobile-menu nav a { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--grey-800); }
.mobile-menu__actions { display: flex; gap: 16px; margin-top: 40px; }
.mobile-menu .lang__opt { padding: 10px 14px; }

/* ==== Hero ==== */
.hero__grid { display: flex; align-items: flex-start; gap: 80px; }
.hero__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__role { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.36px; color: var(--dark-blue); }
.hero .lead { margin-top: 0; }
.hero .buttons { margin-top: 0; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 6px 0 0; width: 100%; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-800); }
.status .sep { margin: 0; }
.status__open { color: var(--green); font-weight: 600; letter-spacing: 0.28px; }
.hero__photo { flex: none; width: 520px; }
.hero__photo img { width: 100%; aspect-ratio: 520 / 472; object-fit: cover; border-radius: 24px; }

/* ==== Values ==== */
.values__title { text-align: center; margin-bottom: 60px; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.value__n { font-size: 38px; font-weight: 600; line-height: 1.2; letter-spacing: -0.38px; color: var(--blue); margin-bottom: 16px; }
.value__title { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.14px; margin-bottom: 12px; }
.value__text { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-600); max-width: 290px; }

/* ==== Portfolio ==== */
.portfolio__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.portfolio__intro { max-width: 660px; display: flex; flex-direction: column; gap: 12px; }
.portfolio__deco { width: 400px; }
.figma-cursor { position: relative; width: 90px; height: 90px; }
.figma-cursor__frame { position: absolute; left: 3px; top: 2px; width: 50px; height: 50px; border: .85px solid #129afe; display: grid; place-items: center; }
.figma-cursor__frame i { position: absolute; width: 3px; height: 3px; background: #fff; border: .85px solid #129afe; }
.figma-cursor__frame i:nth-of-type(1) { left: -2px; top: -2px; }
.figma-cursor__frame i:nth-of-type(2) { right: -2px; top: -2px; }
.figma-cursor__frame i:nth-of-type(3) { left: -2px; bottom: -2px; }
.figma-cursor__frame i:nth-of-type(4) { right: -2px; bottom: -2px; }
.figma-cursor__arrow { position: absolute; left: 48px; top: 48px; animation: cursor-float 3.2s ease-in-out infinite; }
@keyframes cursor-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, -3px); } }

.cases { display: flex; flex-direction: column; gap: 40px; }
.case { display: flex; min-height: 520px; background: var(--white); border: 1px solid var(--border); border-radius: 32px; overflow: hidden; transition: box-shadow .25s, background-color .25s; }
.case:hover { box-shadow: var(--card-hover-shadow); }
/* Hover (UI kit: Portfolio Card / State=Hover): обложка плавно приближается до 104%, рамка карточки не двигается */
.case picture { display: block; overflow: hidden; }
.case picture img { transition: transform .4s cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 50%; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .case:hover picture img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .case picture img { transition: none; } .case:hover picture img { transform: none; } }
.case:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.case--reverse { flex-direction: row-reverse; }
.case:not(.case--soon) { position: relative; cursor: pointer; }
.case__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.case--soon:hover, .case--soon:active { box-shadow: none; background: var(--white); }
.case--soon:hover picture img { transform: none; }
.case__soon { font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0.42px; color: #1775d2; }
.case__media { display: block; flex: 0 0 50%; overflow: hidden; }
.case__media picture { display: block; width: 100%; height: 100%; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 60px 40px 60px 50px; }
.case__info { display: flex; flex-direction: column; gap: 20px; }
.case__meta { font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-700); }
.case__title { font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: -0.32px; }
.case__text { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-700); }
.case__metric { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case__metric strong { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--blue); }
.case__metric span { font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-700); }

/* ==== Tools ==== */
.tools__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; margin-bottom: 60px; }
.tools__head .h2 { color: var(--brand-dark); }
.tools__head .lead { max-width: 742px; }
.tools__head .arrows { display: none; }
.tools__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
/* Колонки тянутся на высоту ряда: низ всех карточек на одной линии, отступы между карточками везде 24px */
.tools__col { display: grid; grid-auto-rows: 1fr; gap: 24px; container-type: inline-size; }
/* Карточка не шире колонки: минимум квадрат по ширине колонки, лишнюю высоту ряда делят поровну */
.tools__col .tool { aspect-ratio: auto; min-width: 0; min-height: 100cqi; }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 30px; aspect-ratio: 1; border-radius: 30px; border: 1px solid var(--border); background: var(--white-60);
  text-align: center; transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.tool:hover { box-shadow: var(--card-hover-shadow); }
.tool:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.tool--tall { aspect-ratio: auto; height: 100%; justify-content: flex-end; }
.tool--tall img { margin: auto 0; }
.tool img { width: 110px; height: 110px; flex: none; }
.tool__meta { display: flex; flex-direction: column; gap: 8px; max-width: 180px; }
.tool__name { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.36px; }
.tool__desc { font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-800); }

/* ==== Arrows ==== */
.arrows { display: flex; gap: 20px; }
/* Arrow button (UI kit: Type=Left/Right) */
.arrow { width: 40px; height: 40px; padding: 8px; border-radius: 25px; border: 1px solid var(--blue-hover); background: var(--white); color: var(--blue); display: grid; place-items: center; transition: border-color .2s, color .2s, box-shadow .2s; }
.arrow svg { display: block; }
.arrow:hover { border-color: rgba(23, 117, 210, 0.30); color: var(--blue-400); box-shadow: 1px 1px 4px rgba(38, 67, 112, 0.10); }
.arrow:active { border-color: var(--blue-400); color: var(--blue-400); box-shadow: 1px 1px 4px rgba(60, 76, 104, 0.10); }
.arrow:disabled { border-color: var(--border); color: var(--border); box-shadow: none; cursor: default; }

/* ==== About ==== */
.about__grid { display: flex; gap: 60px; align-items: flex-start; }
.about__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.about__text { display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: 28px; letter-spacing: 0.18px; color: var(--grey-600); margin-top: 6px; }
.about__left .buttons { margin-top: 6px; }
.about__ava { position: relative; width: 90px; height: 80px; margin-left: 270px; }
.about__ava-cursor { position: absolute; left: -2px; top: -2px; width: 40px; height: 44px; animation: cursor-float 3.2s ease-in-out infinite; }
.about__ava-photo { position: absolute; left: 25px; top: 15px; width: 64px; height: 64px; border-radius: 50%; }
/* padding-top: верх букв «Навыки и методы» на одном уровне с верхом букв заголовка «Обо мне» (у 46px заголовка больше межстрочный отступ) */
.about__right { flex: 0 0 626px; display: flex; flex-direction: column; gap: 24px; padding-top: 5.5px; }
.group { display: flex; flex-direction: column; gap: 12px; }

/* ==== Stages ==== */
.stages::before { content: ''; position: absolute; inset: 180px 10% 120px 5%; z-index: -1; pointer-events: none; filter: blur(58px);
  background: radial-gradient(30% 30% at 22% 38%, rgba(128, 179, 255, 0.35), transparent 70%), radial-gradient(35% 35% at 60% 60%, rgba(204, 224, 255, 0.4), transparent 70%); }
.stages__head { max-width: 844px; display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.stages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stage { display: flex; flex-direction: column; gap: 12px; min-height: 190px; padding: 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--white-60); backdrop-filter: blur(6px); transition: background-color .25s, box-shadow .25s; }
.stage:hover, .review:hover { background: var(--white); box-shadow: var(--card-hover-shadow); }
.stage:active, .review:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.stage__n { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 14px; font-weight: 600; line-height: 1; } /* Number Badge · Big */
.stage__title { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.36px; color: var(--grey-900); }
.stage__text { font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-600); }
.stage__points { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.12px; color: var(--blue-400); margin-top: auto; }
.stage__points .sep { margin: 0; }
.team { display: flex; justify-content: space-between; gap: 40px; margin-top: 80px; }
.team__title { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -0.13px; color: var(--grey-800); white-space: nowrap; }
.team__text { max-width: 846px; font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-700); }

/* ==== Testimonials ==== */
.testimonials__head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 48px; }
.reviews {
  display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--pad-x); scroll-padding: 0 var(--pad-x);
  --edge: max(var(--pad-x), calc((100vw - var(--container)) / 2));
  padding-left: var(--edge); padding-right: var(--edge); scroll-padding-left: var(--edge);
}
.reviews::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .reviews { cursor: grab; } }
.reviews.is-dragging { cursor: grabbing; user-select: none; }
.reviews.is-dragging .review { pointer-events: none; }
.reviews, .tools__track { padding-top: 8px; padding-bottom: 28px; margin-top: -8px; margin-bottom: -28px; }
.review { flex: 0 0 616px; min-height: 404px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 48px; border-radius: 16px; border: 1px solid var(--border); background: var(--white-60); transition: background-color .25s, box-shadow .25s; }
.review__top { display: flex; flex-direction: column; gap: 24px; }
.review__head { display: flex; align-items: center; justify-content: space-between; }
.review__quote { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 80px; line-height: 30px; height: 30px; color: var(--border); padding-top: 30px; }
.review__text { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-800); }
.review__author { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.review__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--blue-hover); }
.review__author > span { display: flex; flex-direction: column; gap: 4px; }
.review__author strong { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.36px; color: var(--grey-900); }
.review__author span span { font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-700); }

/* ==== Contacts ==== */
.contacts::before { content: ''; position: absolute; left: 10%; right: 5%; top: 120px; bottom: -40px; z-index: -1; pointer-events: none; filter: blur(58px);
  background: radial-gradient(40% 40% at 35% 30%, rgba(204, 224, 255, 0.55), transparent 70%), radial-gradient(28% 30% at 62% 78%, rgba(128, 179, 255, 0.45), transparent 70%); }
.contacts .h2 { margin-bottom: 40px; }
.contact-card { display: flex; gap: 100px; padding: 40px; border-radius: 30px; border: 1px solid var(--border); background: var(--white); box-shadow: 0 -2px 52px rgba(65, 151, 236, 0.08); transition: box-shadow .25s, background-color .25s; }
.contact-card:hover { box-shadow: 0 -2px 52px rgba(65, 151, 236, 0.08), var(--card-hover-shadow); }
.contact-card:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.contact-card__left { flex: 1; max-width: 500px; display: flex; flex-direction: column; gap: 20px; }
.contact-card__left .buttons { margin-top: 10px; }
.contact-card__right { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--white);
  font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; color: var(--grey-900); transition: border-color .2s, box-shadow .2s; }
.chip:hover { border-color: var(--blue-hover); box-shadow: 0 4px 14px rgba(23, 117, 210, 0.08); }
.chip img { flex: none; }
.chip__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ==== Footer ==== */
.footer { position: relative; overflow: hidden; color: var(--white); padding: 60px 0 40px;
  background: linear-gradient(101.77deg, #126ce5 22%, rgba(34, 121, 238, 0.85) 81.7%, #126ce5 100%), #126ce5; }
.footer::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30% 90% at 72% 40%, rgba(255, 255, 255, 0.16), transparent 70%), radial-gradient(20% 60% at 98% 0%, rgba(255, 255, 255, 0.12), transparent 70%); }
.footer .container { position: relative; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 24px; }
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links div { display: flex; gap: 12px; font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; }
.footer__links dt { color: var(--grey-300); }
.footer__links dd a { color: var(--grey-200); font-weight: 400; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: from-font; text-decoration-color: rgba(242, 242, 242, 0.55); transition: color .2s, text-decoration-color .2s; }
.footer__links dd a:hover { color: var(--white); text-decoration-color: var(--white); }
.footer__row > .logo { flex: none; align-self: flex-start; }
.footer__form { width: auto; min-width: 358px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__form label { white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.28px; text-transform: uppercase; opacity: .8; }
.footer__form input { width: 100%; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--white-60); background: rgba(255, 255, 255, 0.15);
  color: var(--white); font: inherit; font-size: 14px; line-height: 1.4; letter-spacing: 0.42px; outline: none; transition: border-color .2s, background .2s; }
.footer__form input::placeholder { color: var(--white-60); }
.footer__form input:focus { border-color: var(--white); background: rgba(255, 255, 255, 0.22); }
.footer__form .btn { margin-top: 12px; }
.footer__hint { font-size: 13px; opacity: .85; min-height: 1em; }
/* Согласие на обработку email (T4 Regular, белый 60%) */
.footer__consent { max-width: 358px; margin-top: 12px; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.24px; color: var(--white-60); }
.footer__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.footer__consent a:hover { color: var(--white); }

/* ==== Политика конфиденциальности ==== */
.legal { padding-top: 48px; }
.legal__inner { max-width: 844px; display: flex; flex-direction: column; gap: 24px; }
.legal__inner .case-page__back { margin-bottom: 0; }
.legal__updated { font-size: 14px; color: var(--grey-600); margin-top: -8px; }
.legal__block { display: flex; flex-direction: column; gap: 8px; }
.legal__h { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--black); }
.legal__block p { font-size: 16px; line-height: 1.6; letter-spacing: 0.32px; color: var(--grey-700); }
.legal__block a { color: var(--blue); }

/* ==== 404 ==== */
.nf { padding: 72px 0 120px; }
.nf__card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 72px 64px;
  border-radius: 32px; border: 1px solid var(--border); background: var(--white-60); }
.nf__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 560px; }
.nf__code { font-size: 160px; font-weight: 700; line-height: 1; letter-spacing: -4px; color: var(--blue); }
.nf__text, .nf__deco { position: relative; }
.nf__deco { flex: none; width: 180px; height: 180px; margin-right: 80px; }
.nf__deco .figma-cursor { transform: scale(2); transform-origin: 0 0; }
.nf__blob { position: absolute; right: -120px; top: 50%; width: 640px; height: 640px; max-width: none; transform: translateY(-50%) rotate(180deg); opacity: .35; filter: blur(40px); pointer-events: none; }
@media (max-width: 768px) {
  .nf { padding: 32px 0 80px; }
  .nf__card { flex-direction: column-reverse; align-items: flex-start; gap: 24px; padding: 32px 20px; border-radius: 24px; }
  .nf__code { font-size: 96px; letter-spacing: -2px; }
  .nf__deco { width: 90px; height: 90px; margin-right: 0; }
  .nf__deco .figma-cursor { transform: none; }
  .nf__blob { width: 420px; height: 420px; right: -160px; top: 0; transform: rotate(180deg); }
}
.footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 13px; color: var(--white-60); }

/* ==== Reveal on scroll ==== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .figma-cursor__arrow, .about__ava-cursor { animation: none; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer__form.is-sending .btn { opacity: .7; cursor: progress; }

/* ==== Responsive ==== */
@media (max-width: 1280px) {
  .hero__grid { gap: 48px; }
  .hero__photo { width: 42%; }
  .badges { flex-wrap: wrap; justify-content: flex-start; gap: 12px 16px; }
  .about__right { flex-basis: 50%; }
  .about__ava { margin-left: 40%; }
  .header__bar { padding-left: 20px; }
  .header__nav { gap: 20px; }
}

@media (max-width: 1100px) {
  .header__nav, .header__actions { display: none; }
  .header__mobile { display: flex; }
  .logo__text { display: none; }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .case, .case--reverse { flex-direction: column; }
  .case__media { flex-basis: auto; aspect-ratio: 640 / 520; }
  .case__body { padding: 32px; }
  .stages__grid { grid-template-columns: repeat(2, 1fr); }
  .team { flex-direction: column; gap: 16px; margin-top: 48px; }
  .about__grid { flex-direction: column; }
  .about__right { flex-basis: auto; width: 100%; padding-top: 0; }
  .contact-card { flex-direction: column; gap: 32px; }
  .footer__row { flex-wrap: wrap; row-gap: 40px; }
  .footer__row > .logo { width: 100%; }
  .footer .logo__text { display: flex; }

  .tools__head .arrows { display: flex; }
  .tools__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); scroll-padding: 0 var(--pad-x); }
  .tools__track::-webkit-scrollbar { display: none; }
  .tools__track > * { flex: 0 0 210px; scroll-snap-align: start; }
  .tools__col .tool { width: 210px; height: 210px; aspect-ratio: auto; }
  .tool--tall { height: 444px; }
}

@media (max-width: 768px) {
  .header { padding-top: 12px; }
  .header__bar { padding: 12px 12px 12px 16px; }
  .hero { padding-top: 32px; }
  .hero__grid { flex-direction: column-reverse; align-items: stretch; gap: 40px; }
  .hero__photo { width: 100%; }
  .hero__photo img { aspect-ratio: 350 / 318; }
  .br-desk { display: none; }
  .buttons { gap: 24px; }
  .values__title { text-align: left; margin-bottom: 40px; }
  .values__grid { grid-template-columns: 1fr; gap: 40px; }
  .value__n { font-size: 38px; }
  .value__title { font-size: 26px; }
  .value__text { max-width: none; }
  .portfolio__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .portfolio__deco { width: auto; }
  .case { min-height: 0; border-radius: 24px; }
  .case__body { padding: 24px 20px 28px; gap: 28px; }
  .case__title { font-size: 26px; line-height: 1.3; }
  .tools__head { align-items: flex-start; text-align: left; gap: 24px; margin-bottom: 40px; }
  .tools__head .lead { font-size: 14px; line-height: 1.6; }
  .about__ava { margin-left: auto; margin-right: 20px; }
  .stages__grid { grid-template-columns: 1fr; gap: 16px; }
  .team__title { white-space: normal; }
  .testimonials__head { margin-bottom: 32px; }
  .review { flex-basis: min(320px, 85vw); min-height: 0; padding: 24px; gap: 20px; }
  .review__text { font-size: 14px; }
  .reviews { gap: 16px; }
  .contact-card { padding: 24px; border-radius: 24px; }
  .contact-card .h3 { font-size: 26px; line-height: 1.35; }
  .footer__row { flex-direction: column; gap: 32px; }
  .footer__form { width: 100%; min-width: 0; }
  .footer__form label { white-space: normal; }
  .footer__consent { max-width: none; }
  .footer__bottom { justify-content: flex-start; }
}

/* ==== Case page ==== */
.case-page { padding-top: 48px; }
.case-page__back { display: inline-block; margin-bottom: 32px; font-size: 14px; font-weight: 600; color: var(--blue); }
.case-page__back:hover { color: var(--dark-blue); }
.case-page__head { max-width: 844px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
.case-page__cover { border-radius: 32px; overflow: hidden; border: 1px solid var(--border); max-width: 100%; }
.case-page__cover img { width: 100%; height: auto; }
.case-page__soon { margin: 48px 0 80px; max-width: 700px; }
.case-page__other-title { margin-bottom: 24px; }
.case-page__other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mini-case { display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 20px; border-radius: 24px; border: 1px solid var(--border); background: var(--white); transition: box-shadow .25s, background-color .25s; }
.mini-case:hover { box-shadow: var(--card-hover-shadow); }
.mini-case:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.mini-case img { border-radius: 16px; width: 100%; height: auto; }
.mini-case--soon:hover, .mini-case--soon:active { box-shadow: none; background: var(--white); }
.mini-case__soon { padding: 0 8px; margin-top: -8px; }
.mini-case__title { font-size: 18px; font-weight: 600; line-height: 1.3; padding: 0 8px; }
@media (max-width: 768px) {
  .case-page__other { grid-template-columns: 1fr; }
  .case-page__cover { border-radius: 20px; }
}


/* =====================================================================
   Страница кейса (полный разбор): .tm-*
   Макет Figma v3 — десктоп 1440, мобайл 390; планшет 768–1100 адаптирован.
   Брейкпоинты кейса: десктоп > 1100, планшет 768–1100, телефон < 768.
   ===================================================================== */
.tm { overflow-x: clip; --tm-sec: 60px; --tm-gap: 48px; --tm-h1: 46px; --tm-h2: 38px; --tm-sticky: 108px;
  --grey-500: #748193; --grey-400: #9aa4b2; --blue-8: rgba(23, 117, 210, 0.08); --blue-10: rgba(23, 117, 210, 0.10); --green-6: rgba(22, 163, 74, 0.06); }

/* ---- Hero ---- */
.tm-hero { position: relative; padding: 40px 0 0; }

/* ---- Фоновые пятна (слой Background из макета) ---- */
.tm-bgs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Как в Figma: картинка кадрирована прямоугольником, а размытие (Layer blur 116) накладывается поверх —
   края мягко расходятся за пределы прямоугольника и не выглядят обрезанными */
.tm-bg { position: absolute; overflow: hidden; filter: blur(58px); }
.tm-bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; transform-origin: 0 0; }
.tm-bg--m { display: none; }
@media (max-width: 767px) { .tm-bg--d { display: none; } .tm-bg--m { display: block; } }
.tm-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--blue); transition: color .2s; }
.tm-back:hover { color: var(--dark-blue); }
.tm-hero__body { display: flex; flex-direction: column; gap: 60px; margin-top: 32px; }
.tm-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.tm-intro__text { flex: 0 1 844px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.tm-meta { font-size: 14px; line-height: 1.3; letter-spacing: 0.14px; color: var(--grey-700); }
.tm-h1 { font-size: var(--tm-h1); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--black); }
.tm-intro .lead { color: var(--grey-600); }
.tm-intro .badges { padding: 0; }
.tm-intro .badge { font-family: var(--font); font-weight: 600; color: var(--grey-800); line-height: 22px; }
.tm-intro .badge__dot { background: var(--blue); box-shadow: none; }
.tm-intro .divider { margin: 0; }
.tm-intro .status .sep { margin: 0; }
.tm-stats { flex: 0 0 316px; display: flex; flex-direction: column; gap: 24px; }

/* ---- Fact card (цифры) ---- */
.tm-fact { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 16px; border: 1px solid var(--border); background: var(--white); transition: box-shadow .25s; }
.tm-fact { transition: box-shadow .25s, background-color .25s; }
.tm-fact:hover { box-shadow: var(--card-hover-shadow); }
.tm-fact:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.tm-fact__value { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.32px; color: var(--blue); }
.tm-fact__label { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-600); }
.tm-stats .tm-fact { padding: 24px 30px; }

/* ---- Слайдер (обложка и финальный UI) ---- */
.tm-slider { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--blue); isolation: isolate; }
.tm-slider--ui { border-radius: 24px; border: 0; }
.tm-slider__track { display: flex; transition: transform .6s cubic-bezier(.22, .61, .36, 1); touch-action: pan-y; }
.tm-slider__slide { flex: 0 0 100%; min-width: 0; }
.tm-slider__slide img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.tm-slider__dots { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12); backdrop-filter: blur(6px); }
.tm-slider__dot { width: 18px; height: 18px; padding: 0; border: 0; background: none; display: grid; place-items: center; border-radius: 50%; }
.tm-slider__dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.2px solid var(--blue); box-sizing: border-box; transition: background-color .25s, transform .25s; }
.tm-slider__dot.is-active::before { background: var(--blue); }
.tm-slider__dot:hover::before { transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .tm-slider__track { transition: none; } }

/* ---- Навигация по разделам (липкая) ---- */
.tm-nav { position: sticky; top: var(--tm-sticky); z-index: 20; width: fit-content; max-width: 100%; margin-top: 40px; }
.tm-nav + .tm-section { padding-top: calc(var(--tm-sec) * 2); }
.tm-nav__list { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 16px; border: 1px solid var(--border); background: var(--white-80);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-xs); }
.tm-nav__list::-webkit-scrollbar { display: none; }
.tm-nav a { flex: none; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.14px; color: var(--grey-800); white-space: nowrap; transition: background-color .2s, color .2s; }
.tm-nav a:hover, .tm-nav a.is-active { background: var(--blue-6); color: var(--dark-blue); }

/* ---- Секции ---- */
.tm-section { position: relative; display: flex; flex-direction: column; gap: var(--tm-gap); padding: var(--tm-sec) 0; scroll-margin-top: 90px; }
.tm-section--glow::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -40px -6% -60px 0; filter: blur(60px);
  background: radial-gradient(28% 32% at 20% 26%, rgba(128, 179, 255, 0.30), transparent 70%), radial-gradient(40% 40% at 62% 70%, rgba(204, 224, 255, 0.45), transparent 70%); }
.tm-head { display: flex; flex-direction: column; gap: 24px; }
.tm-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.42px; text-transform: uppercase; color: var(--grey-600); }
.tm-eyebrow b { font-weight: 600; color: var(--blue); }
.tm-eyebrow .sep { margin: 0 3.5px; }
.tm-h2 { font-size: var(--tm-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.38px; color: var(--black); }
.tm-lead { max-width: 844px; font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-600); }
.tm-p { max-width: 820px; font-size: 18px; line-height: 1.55; letter-spacing: 0.18px; color: var(--grey-700); }
.tm-h3 { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.14px; color: var(--grey-900); margin-bottom: calc(30px - var(--tm-gap)); }
.tm-h3--lg { font-size: 32px; letter-spacing: -0.32px; }

/* ---- Картинки ---- */
.tm-figure { border-radius: 16px; overflow: hidden; }
.tm-figure img { width: 100%; height: auto; }
.tm-pair { display: flex; flex-direction: column; gap: var(--tm-gap); }

/* CJM: превью открывает полную карту */
.tm-zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; border-radius: 16px; transition: box-shadow .25s; }
.tm-zoom:hover { box-shadow: var(--card-hover-shadow); }
.tm-zoom__hint { position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px;
  background: var(--grad-btn); color: var(--white); font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.14px; white-space: nowrap; box-shadow: 0 8px 20px rgba(23, 117, 210, 0.25);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.tm-zoom:hover .tm-zoom__hint, .tm-zoom:focus-visible .tm-zoom__hint { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .tm-zoom__hint { opacity: 1; transform: translate(-50%, 0); padding: 10px 16px; bottom: 16px; } }

.tm-lightbox { width: min(1320px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 20px; background: var(--white); overflow: hidden; box-shadow: 0 30px 80px rgba(13, 18, 28, 0.35); }
.tm-lightbox::backdrop { background: rgba(13, 18, 28, 0.6); backdrop-filter: blur(4px); }
.tm-lightbox[open] { display: flex; flex-direction: column; }
.tm-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--border); }
.tm-lightbox__title { font-size: 16px; font-weight: 600; color: var(--grey-900); }
.tm-lightbox__close { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--border); background: var(--white); font-size: 22px; line-height: 1; color: var(--grey-800); display: grid; place-items: center; }
.tm-lightbox__close:hover { background: var(--grey-50); }
.tm-lightbox__body { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tm-lightbox__body img { width: 100%; min-width: 900px; height: auto; }

/* ---- Панель «Моя роль» ---- */
.tm-panel { padding: 8px 32px 32px; border-radius: 16px; border: 1px solid var(--border); background: var(--white); display: flex; flex-direction: column; gap: 24px; transition: box-shadow .25s, background-color .25s; }
/* UI kit «Роль»: Hover — мягкая тень, Pressed — серый фон */
.tm-panel:hover { box-shadow: 6px -2px 52px rgba(48, 132, 216, 0.10); }
.tm-panel:active { background: var(--card-pressed-bg); box-shadow: none; }
.tm-info { display: grid; grid-template-columns: repeat(4, 1fr); }
.tm-info__item { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 24px 0; }
.tm-info__item + .tm-info__item { padding-left: 24px; }
.tm-label { font-size: 12px; font-weight: 600; line-height: 1.15; letter-spacing: 0.24px; text-transform: uppercase; color: var(--grey-600); }
.tm-info__value { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: var(--grey-900); }
.tm-rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
.tm-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0 0; }
.tm-group { display: flex; flex-direction: column; gap: 12px; }
.tm-group .badges { padding: 4px 0 4px 2px; justify-content: flex-start; gap: 8px 16px; }

/* ---- Цифры, задача ---- */
.tm-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tm-task { display: grid; grid-template-columns: 326px 1fr; align-items: start; gap: 16px; }
.tm-task__label { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -0.13px; color: var(--grey-800); }
.tm-task__text { max-width: 954px; font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-700); }

/* ---- Карточки (паттерн «Этапы работы» с главной) ---- */
.tm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tm-cards--2 { grid-template-columns: repeat(2, 1fr); }
.tm-cards .stage { min-height: 190px; }

/* ---- Аудитория ---- */
.tm-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: -16px; }
.tm-box { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.8); }
.tm-box--blue { background: var(--blue-6); border-color: transparent; }
/* «Кто пользуется»: состояния Hover и Pressed из компонента в UI kit */
.tm-box:not(.tm-box--blue) { transition: box-shadow .25s, background-color .25s; }
.tm-box:not(.tm-box--blue):hover { box-shadow: 6px -2px 52px rgba(48, 132, 216, 0.1); }
.tm-box:not(.tm-box--blue):active { background: #f9f9f9; box-shadow: none; }
.tm-box .label { font-size: 14px; color: #0d121c; }
.tm-box p:not(.label) { font-size: 14px; line-height: 1.6; letter-spacing: 0.28px; color: #434b5b; }

/* ---- Главный принцип ---- */
.tm-principle { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 44px 48px; border-radius: 24px; color: var(--white);
  background: linear-gradient(160deg, #4ba3fa 0%, #1f79d3 45%, #0b5ab8 100%); }
.tm-principle::before { content: ''; position: absolute; z-index: -1; width: 700px; height: 700px; right: -160px; top: -300px; border-radius: 50%; background: rgba(128, 179, 255, 0.18); filter: blur(40px); }
.tm-principle__text { flex: 0 1 676px; display: flex; flex-direction: column; gap: 14px; }
.tm-principle__label { font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.28px; text-transform: uppercase; }
.tm-principle__title { font-size: 38px; font-weight: 600; line-height: 1.2; letter-spacing: -0.38px; max-width: 600px; }
.tm-principle__lead { font-size: 18px; line-height: 1.55; letter-spacing: 0.18px; max-width: 560px; }
.tm-principle__rules { flex: 0 0 460px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tm-principle__rules li { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.15); font-size: 16px; line-height: 1.5; }
.tm-principle__rules li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--white); transform: translateY(-2px); }
.tm-principle__rules b { font-weight: 700; }

/* ---- Сценарии Анны и Майка ---- */
.tm-scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tm-scenario { display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: 20px; border: 1px solid var(--border); background: var(--white); transition: box-shadow .25s; }
.tm-scenario { transition: box-shadow .25s, background-color .25s; }
.tm-scenario:hover { box-shadow: var(--card-hover-shadow); }
.tm-scenario:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.tm-person { display: flex; align-items: center; gap: 16px; }
.tm-person img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.tm-person__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-person__name strong { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: var(--grey-900); }
.tm-person__name span { font-size: 14px; line-height: 1.3; letter-spacing: 0.14px; color: var(--grey-500); }
.tm-pill { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--blue-8); font-size: 13px; font-weight: 600; line-height: 18px; color: var(--dark-blue); white-space: nowrap; }
.tm-scenario__text { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-700); }
.tm-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: var(--blue-10); font-size: 14px; font-weight: 600; line-height: 18px; color: var(--grey-800); }
.tm-badge { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 14px; font-weight: 600; line-height: 1; } /* Number Badge · Small */
.tm-badge--lg { width: 32px; height: 32px; } /* Number Badge · Big */

/* ---- Карточка решения ---- */
.tm-decision { display: flex; flex-direction: column; gap: 24px; padding: 30px; border-radius: 16px; border: 1px solid var(--border); background: var(--white); transition: box-shadow .25s; }
.tm-decision { transition: box-shadow .25s, background-color .25s; }
.tm-decision:hover { box-shadow: var(--card-hover-shadow); }
.tm-decision:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.tm-decision:active .tm-decision__head { background: var(--grey-200); }
.tm-decision__head { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--grey-50); }
.tm-decision__title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: var(--grey-800); }
.tm-decision .tags { margin: -10px 0 -6px; }
.tm-decision__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tm-decision__cell { display: flex; flex-direction: column; gap: 10px; padding-right: 24px; }
.tm-decision__cell .tm-label { color: var(--grey-500); letter-spacing: 0.36px; }
.tm-decision__cell p:not(.tm-label) { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-800); }
.tm-decision__cell--result { gap: 6px; padding: 16px 20px; border-radius: 12px; background: var(--blue-6); }
.tm-decision__cell--result .tm-label { color: var(--blue); }

/* ---- Итог ---- */
.tm-results { display: grid; grid-template-columns: 764fr 500fr; gap: 16px; align-items: stretch; }
.tm-before { display: flex; flex-direction: column; padding: 32px 32px 28px; border-radius: 20px; border: 1px solid var(--border); background: var(--white); }
.tm-before .tm-label { color: var(--grey-500); margin-bottom: 12px; }
.tm-cmp { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.tm-cmp + .tm-cmp { border-top: 1px solid var(--border); }
.tm-cmp__label { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--grey-700); }
.tm-cmp__vals { display: flex; align-items: center; gap: 16px; flex: none; }
.tm-cmp__from { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--grey-400); }
.tm-cmp__arrow { font-size: 18px; line-height: 1; color: var(--blue-400); }
.tm-cmp__to { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.28px; color: var(--blue); }
.tm-note { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding: 14px 16px; border-radius: 12px; background: var(--grey-50); font-size: 14px; line-height: 1.3; letter-spacing: 0.14px; color: var(--grey-600); }
.tm-note svg { flex: none; margin-top: -1px; }
.tm-cmp:last-of-type { margin-bottom: 8px; }
.tm-ready { display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: 20px; background: var(--blue-10); }
.tm-ready .tm-label { color: var(--dark-blue); }
.tm-ready ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tm-ready li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--grey-900); }
.tm-ready li svg { flex: none; margin-top: 1px; }

/* ---- Следующие шаги (таблица) ---- */
.tm-table { border-radius: 20px; border: 1px solid var(--border); background: var(--white); overflow: hidden; }
.tm-table__head, .tm-table__row { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 24px 32px; }
.tm-table__head { padding-top: 16px; padding-bottom: 16px; background: var(--grey-50); }
.tm-table__row { border-top: 1px solid var(--border); align-items: start; }
.tm-table__what { display: flex; gap: 24px; min-width: 0; }
.tm-table__what > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-table__what strong { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.36px; color: var(--grey-900); }
.tm-table__what p { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-700); }
.tm-crit { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--green-6); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14px; color: var(--grey-900); }
.tm-crit::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); transform: translateY(-1px); }

/* ---- Кейс Spending Coach: новые блоки ---- */
/* «Главный принцип» в фиолетовой гамме кейса */
.tm-principle--violet { background: linear-gradient(143deg, #4129f9 0%, #6556e0 100%); }
.tm-principle--violet::before { background: rgba(149, 128, 255, 0.12); }
.tm-principle--violet .tm-principle__rules li { border-color: rgba(255, 255, 255, 0.25); }
/* Факт-карточки в три колонки (категории UI kit) */
.tm-facts--3 { grid-template-columns: repeat(3, 1fr); }
/* Заголовок h3 с полным отступом секции до следующего блока */
.tm-h3--loose { margin-bottom: 0; }
/* Метка без капса (Trade-off) */
.tm-label--plain { text-transform: none; letter-spacing: 0.12px; }
/* Один основной путь (UI kit: «Один путь») */
.tm-path { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 16px; border: 1px solid var(--border); background: var(--white); transition: box-shadow .25s, background-color .25s; }
.tm-path:hover { box-shadow: var(--card-hover-shadow); }
.tm-path:active { background: var(--card-pressed-bg); box-shadow: var(--card-pressed-shadow); }
.tm-path__label { font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0.42px; text-transform: uppercase; color: var(--dark-blue); }
.tm-path__text { font-size: 16px; line-height: 1.6; letter-spacing: 0.4px; color: var(--grey-900); }
.tm-path__steps { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.tm-path__steps li { flex: 0 1 auto; min-width: 250px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--grey-50); font-size: 16px; font-weight: 700; line-height: 24px; color: var(--grey-800); }
.tm-path:active .tm-path__steps li { background: var(--grey-200); }

/* ---- Состояния блоков из UI kit (States Carts): «Было → стало», «Что сделаю», CTA card ---- */
.tm-before, .tm-table, .tm-cta { transition: box-shadow .25s, background-color .25s; }
.tm-before:hover, .tm-cta:hover { box-shadow: var(--card-hover-shadow); }
.tm-table:hover { box-shadow: 6px -2px 52px rgba(48, 132, 216, 0.10); }
.tm-before:active, .tm-table:active, .tm-cta:active { background: var(--card-pressed-bg); box-shadow: none; }

/* ---- CTA и другие кейсы ---- */
.tm-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: var(--tm-sec) 0; padding: 40px 48px; border-radius: 16px; border: 1px solid var(--border); background: var(--white); }
.tm-cta__text { display: flex; flex-direction: column; gap: 8px; }
.tm-cta__title { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.32px; color: var(--black); }
.tm-other { padding: 0 0 calc(var(--tm-sec) + 20px); }
.tm-other .case-page__other-title { font-size: 32px; line-height: 1.1; margin: var(--tm-sec) 0 48px; }
.tm-cta + .tm-other .case-page__other-title { margin-top: 0; }

@media (min-width: 1101px) {
  .tm-section[data-gap="60"] { --tm-gap: 60px; }
  /* Подзаголовок → контент и подпись под картинкой — свои отступы из макета (только десктоп) */
  .tm-h3--gap { margin-bottom: calc(var(--hgap) - var(--tm-gap)); }
  .tm-mt { margin-top: calc(var(--mt) - var(--tm-gap)); }
  .tm-section[data-gap="40"] { --tm-gap: 40px; }
}

/* ================= Планшет: 768–1100 ================= */
@media (max-width: 1100px) {
  .tm { --tm-sec: 60px; --tm-gap: 40px; --tm-h1: 40px; --tm-sticky: 100px; }
  .tm-hero { padding-top: 32px; }
  .tm-hero__body { gap: 40px; }
  .tm-intro { flex-direction: column; gap: 32px; }
  .tm-intro__text { flex-basis: auto; }
  .tm-stats { flex-basis: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .tm-info { grid-template-columns: 1fr 1fr; }
  .tm-info__item:nth-child(odd) { padding-left: 0; }
  .tm-info__item { padding-top: 20px; padding-bottom: 20px; }
  .tm-info__item:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .tm-groups { padding-top: 4px; }
  .tm-facts, .tm-facts--3 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tm-facts--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .tm-path__steps { gap: 12px; }
  .tm-path__steps li { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .tm-task { grid-template-columns: 1fr; gap: 12px; }
  .tm-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tm-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tm-cards .stage { min-height: 0; }
  .tm-principle { flex-direction: column; align-items: stretch; gap: 24px; padding: 40px; }
  .tm-principle__text, .tm-principle__rules { flex: none; }
  /* Пары диаграмм (CJM, user flow) — мобильные версии рядом */
  .tm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .tm-pair .tm-figure { border-radius: 20px; }
  .tm-decision__cell { padding-right: 0; }
  .tm-results { grid-template-columns: 1fr; }
  .tm-table__head, .tm-table__row { grid-template-columns: 1fr 240px; padding-left: 24px; padding-right: 24px; }
  .tm-table__what { gap: 16px; }
  .tm-lightbox__body img { min-width: 1000px; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .tm-scenarios { grid-template-columns: 1fr; }
  .tm-decision__row { grid-template-columns: 1fr; gap: 16px; }
}

/* ================= Телефон: < 768 ================= */
@media (max-width: 767px) {
  .tm { --tm-sec: 40px; --tm-gap: 32px; --tm-h1: 34px; --tm-sticky: 88px; }
  .tm-hero { padding: 24px 0 0; }
  .tm-hero__body { gap: 24px; margin-top: 24px; }
  .tm-intro__text { gap: 20px; }
  .tm-stats { grid-template-columns: 1fr; }
  .tm-fact { padding: 20px 24px; gap: 10px; }
  .tm-fact__value { font-size: 28px; }
  .tm-slider { border: 0; border-radius: 20px; background: transparent; }
  .tm-slider__dots { bottom: 14px; }
  .tm-nav { margin-top: 24px; width: auto; position: static; } /* на телефоне 10 пунктов занимают 4–5 строк — не закрепляем */
  .tm-nav__list { gap: 2px; padding: 4px; border-radius: 14px; }
  .tm-nav a { padding: 6px 10px; font-size: 13px; line-height: 20px; }
  .tm-h2 { font-size: 34px; }
  .tm-head { gap: 20px; }
  .tm-p { font-size: 16px; line-height: 1.6; }
  .tm-h3 { font-size: 26px; }
  .tm-h3--lg { font-size: 28px; }
  .tm-figure { border-radius: 20px; }
  .tm-panel { padding: 4px 20px 20px; gap: 20px; }
  .tm-info__item { padding: 16px 12px 16px 0; }
  .tm-info__item:nth-child(even) { padding-left: 12px; }
  .tm-info__value { font-size: 16px; }
  .tm-groups { grid-template-columns: 1fr; gap: 24px; padding-top: 4px; }
  .tm-facts, .tm-facts--3 { grid-template-columns: 1fr; }
  .tm-path { padding: 20px; gap: 16px; }
  .tm-path__steps { flex-direction: column; gap: 8px; }
  .tm-path__steps li { flex: none; min-width: 0; }
  .tm-task__label { font-size: 22px; }
  .tm-cards, .tm-cards--2 { grid-template-columns: 1fr; }
  .tm-audience { grid-template-columns: 1fr; gap: 16px; margin-top: calc(30px - var(--tm-gap)); }
  .tm-box:not(.tm-box--blue) { padding: 16px; }
  .tm-principle { padding: 28px 20px; border-radius: 20px; gap: 24px; }
  .tm-principle__title { font-size: 30px; }
  .tm-principle__lead { font-size: 16px; }
  .tm-principle__rules li { padding: 14px 16px; font-size: 15px; }
  .tm-scenarios { grid-template-columns: 1fr; }
  .tm-scenario { padding: 20px; gap: 16px; border-radius: 16px; }
  .tm-person { flex-wrap: wrap; }
  .tm-pill { order: 3; }
  .tm-pair { display: flex; gap: var(--tm-gap); }
  .tm-decision { padding: 20px; gap: 20px; }
  .tm-decision__title { font-size: 17px; }
  .tm-decision__row { grid-template-columns: 1fr; gap: 16px; }
  .tm-decision__cell { padding-right: 0; }
  .tm-before { padding: 24px 20px 20px; }
  .tm-cmp { flex-wrap: wrap; gap: 6px 12px; padding: 14px 0; }
  .tm-cmp__label { flex-basis: 100%; }
  .tm-cmp__vals { gap: 10px; }
  .tm-cmp__to { font-size: 24px; }
  .tm-ready { padding: 24px 20px; }
  .tm-table__head { display: none; }
  .tm-table__row { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .tm-table__row:first-of-type { border-top: 0; }
  .tm-table__what { flex-direction: column; gap: 12px; }
  .tm-table__what strong { font-size: 17px; }
  .tm-cta { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 20px; }
  .tm-cta__title { font-size: 28px; }
  .tm-cta .btn { width: 100%; }
  .tm-other .case-page__other-title { font-size: 28px; margin-bottom: 24px; }
  .tm-lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .tm-lightbox__body img { min-width: 960px; }
}

/* ==== Кнопка «Наверх» (Figma: Arrow button · Type=Back to Top) ====
   Закреплена в правом нижнем углу. Отступы подстраиваются под экран:
   десктоп — кнопка 48 px стоит в боковом поле рядом с контентом (на 1440 — 16 px от края, на широких экранах — 40 px);
   планшет — 44 px, 24 px от краёв; телефон — 44 px (удобная зона нажатия), 16/20 px от краёв + безопасная зона iPhone. */
.to-top {
  --size: 48px;
  position: fixed; z-index: 40;
  right: calc(max(16px, min(40px, (100vw - var(--container)) / 2 - var(--size) - 16px)) + env(safe-area-inset-right, 0px));
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  width: var(--size); height: var(--size); padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--blue-hover); background: var(--white); color: var(--blue);
  box-shadow: 0 4px 14px rgba(20, 26, 105, 0.08);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity .25s, transform .25s, visibility 0s linear .25s, border-color .2s, color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.to-top[hidden] { display: grid; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .25s, transform .25s, visibility 0s, border-color .2s, color .2s, box-shadow .2s; }
.to-top:hover { border-color: rgba(23, 117, 210, 0.30); color: var(--blue-400); box-shadow: 1px 1px 4px rgba(38, 67, 112, 0.10), 0 4px 14px rgba(20, 26, 105, 0.08); }
.to-top:active { border-color: var(--blue-400); color: var(--blue-400); box-shadow: 1px 1px 4px rgba(60, 76, 104, 0.10); transform: scale(.96); }
.to-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 50%; }
.to-top svg { display: block; }
body.menu-open .to-top { opacity: 0; pointer-events: none; visibility: hidden; }
@media (max-width: 1100px) {
  .to-top { --size: 44px; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) {
  .to-top { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .to-top { transform: none; transition: opacity .01s, visibility 0s; } }

/* ---- Анализ рынка: график времени и занятости ---- */
.tm-market { display: flex; flex-direction: column; gap: 48px; }
.tm-market__head { display: flex; flex-direction: column; gap: 16px; }
.tm-market__title { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.14px; color: var(--black); }
.tm-bench { --red: #e53e3e; --bar-h: 24px; display: flex; flex-direction: column; gap: 20px; padding: 30px 20px; border-radius: 24px; border: 1px solid var(--border);
  background: var(--white); box-shadow: 0 4px 20px 2px rgba(48, 132, 216, 0.08); }
.tm-bench__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 40px; padding: 0 16px; font-size: 14px; line-height: 22px; color: var(--grey-700); }
.tm-bench__how { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tm-bench__how b { font-weight: 600; }
.tm-bench__sample { position: relative; flex: none; width: 72px; height: 14px; border-radius: 7px; background: var(--blue-6); overflow: hidden; }
.tm-bench__sample::before, .tm-bench__sample::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--grey-500); }
.tm-bench__sample::before { width: 56px; opacity: .3; }
.tm-bench__sample::after { width: 28px; }
.tm-bench__colors { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tm-bench__colors span { display: inline-flex; align-items: center; gap: 6px; }
.tm-bench__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-500); }
.tm-bench__dot--none { background: var(--red); }
.tm-bench__dot--ours { background: var(--blue); }
.tm-bench__table { display: flex; flex-direction: column; gap: 20px; }
.tm-bench__row { display: grid; grid-template-columns: 210px minmax(0, 400px) 200px 1fr; align-items: center; gap: 24px; padding: 0 16px; }
.tm-bench__row--head { font-size: 14px; font-weight: 600; line-height: 22px; letter-spacing: 0.42px; text-transform: uppercase; color: var(--grey-500); }
.tm-bench__divider { height: 1px; margin: 0 16px; border: 0; background: var(--border); }
.tm-bench__row--ours { padding: 12px 16px; border-radius: 16px; background: var(--blue-6); }
.tm-bench__name { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--black); }
.tm-bench__row--ours .tm-bench__name { font-weight: 700; color: var(--blue); }
.tm-bench__bar { position: relative; height: var(--bar-h); border-radius: 12px; background: var(--blue-6); overflow: hidden; }
.tm-bench__row--ours .tm-bench__bar { background: var(--white); }
.tm-bench__range, .tm-bench__min { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--grey-500); }
.tm-bench__range { opacity: .3; }
.tm-bench__row--none .tm-bench__range, .tm-bench__row--none .tm-bench__min { background: var(--red); }
.tm-bench__row--ours .tm-bench__range, .tm-bench__row--ours .tm-bench__min { background: var(--blue); }
.tm-bench__time { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--grey-700); }
.tm-bench__row--none .tm-bench__time { color: var(--red); }
.tm-bench__row--ours .tm-bench__time { color: var(--blue); }
.tm-pill { display: inline-flex; padding: 2px 8px; border-radius: 16px; font-size: 12px; font-weight: 500; line-height: 18px; }
.tm-pill--error { background: #fef2f2; color: #b91c1c; }
.tm-pill--warn { background: #fefce8; color: #a16207; }
.tm-pill--ok { background: #f0fdf4; color: #15803d; }
.tm-bench__axis { display: grid; grid-template-columns: 210px minmax(0, 400px) 200px 1fr; gap: 24px; padding: 0 16px; margin-top: 4px; }
.tm-bench__ticks { grid-column: 2; display: block; position: relative; height: 18px; font-size: 12px; line-height: 18px; color: var(--grey-500); }
.tm-bench__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.tm-bench__ticks span:first-child { transform: none; }
.tm-bench__ticks span:nth-last-child(2) { transform: translateX(-100%); }
.tm-bench__ticks em { display: none; font-style: normal; }
.tm-market .tm-task__label { margin: 0; font-size: 26px; }
.tm-bench__time { white-space: nowrap; }
.tm-market__take { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tm-market__take-label { font-size: 16px; font-weight: 700; line-height: 24px; color: var(--black); }
.tm-market__why { display: flex; flex-direction: column; gap: 24px; max-width: 954px; }
.tm-market__why .tm-task__text + .tm-task__text { margin-top: -24px; }
.tm-market__source { font-size: 14px; line-height: 1.6; color: var(--grey-500); }

@media (max-width: 1100px) {
  .tm-bench { --bar-h: 16px; padding: 28px 24px; gap: 16px; }
  .tm-bench__legend, .tm-bench__row, .tm-bench__axis { padding: 0; }
  .tm-bench__divider { display: none; }
  .tm-bench__legend { flex-direction: column; align-items: flex-start; }
  .tm-bench__table { gap: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
  .tm-bench__row--head { display: none; }
  .tm-bench__row { grid-template-columns: 1fr auto; grid-template-areas: "name time" "bar bar" "who who"; gap: 8px 12px; }
  .tm-bench__row--ours { margin: 0; padding: 12px; }
  .tm-bench__name { grid-area: name; }
  .tm-bench__time { grid-area: time; font-size: 14px; text-align: right; }
  .tm-bench__bar { grid-area: bar; border-radius: 8px; }
  .tm-bench__who { grid-area: who; }
  .tm-bench__axis { display: block; margin-top: 0; }
  .tm-bench__ticks em { display: block; position: absolute; right: 0; top: 0; }
  .tm-bench__ticks span:nth-last-child(2) { transform: translateX(-100%); margin-left: -30px; }
}
@media (max-width: 767px) {
  .tm-market { gap: 30px; }
  .tm-market__head { gap: 12px; }
  .tm-market__title { font-size: 24px; }
  .tm-bench { padding: 24px 20px; border-radius: 20px; }
  .tm-market .tm-task__label { font-size: 22px; }
  .tm-market__take { flex-direction: column; align-items: flex-start; }
  .tm-market__take .tag { white-space: normal; line-height: 1.35; }
}

/* ---- Видео-превью кейса ---- */
.tm-video { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0d4fb8; aspect-ratio: 16 / 9; isolation: isolate; }
.tm-video__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-video__controls { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.tm-video__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.92);
  color: var(--blue); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.14); backdrop-filter: blur(6px); cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.tm-video__btn:hover { border-color: var(--blue-400); box-shadow: 1px 2px 8px rgba(15, 41, 93, 0.16); }
.tm-video__btn:active { border-color: var(--blue); background: var(--white); }
.tm-video__ico { display: none; line-height: 0; }
.tm-video .tm-video__ico--pause, .tm-video .tm-video__ico--muted { display: block; }
.tm-video.is-paused .tm-video__ico--pause, .tm-video.is-sound .tm-video__ico--muted { display: none; }
.tm-video.is-paused .tm-video__ico--play, .tm-video.is-sound .tm-video__ico--sound { display: block; }
.tm-gallery { position: relative; padding: var(--tm-sec) 0; }
@media (max-width: 767px) {
  .tm-video { border-radius: 12px; }
  .tm-video__controls { right: 12px; bottom: 12px; gap: 6px; }
  .tm-video__btn { width: 38px; height: 38px; }
  .tm-video__btn svg { width: 18px; height: 18px; }
}
@media (min-width: 1101px) and (max-width: 1280px) { .tools__track .tool { padding: 24px 16px; } }