/* D.A.M navigation: the page's data-light attribute owns the palette. */
html {
  --dam-nav-surface: #191713;
  --dam-nav-ink: #f2ede3;
  --dam-nav-muted: #bab1a4;
  --dam-nav-border: rgba(242,237,227,.13);
  --dam-nav-track: #211e19;
  --dam-nav-current: #ff7956;
  --dam-nav-glow: rgba(232,71,42,.23);
  --dam-nav-active: rgba(232,71,42,.06);
  --dam-nav-height: 82px;
}
html[data-light] {
  --dam-nav-surface: #f2ede3;
  --dam-nav-ink: #16130f;
  --dam-nav-muted: #6e665a;
  --dam-nav-border: rgba(22,19,15,.13);
  --dam-nav-track: #eae4d9;
  --dam-nav-current: #b6331b;
  --dam-nav-glow: rgba(232,71,42,.17);
  --dam-nav-active: rgba(232,71,42,.035);
}
html body header.dam-site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dam-nav-surface) !important;
  border-bottom: 1px solid var(--dam-nav-border) !important;
  backdrop-filter: none !important;
}
html body header.dam-site-header > .dam-site-header__inner {
  width: min(1380px, 100% - 48px); height: var(--dam-nav-height) !important;
  margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 22px !important; align-items: center; box-sizing: border-box;
}
html body .dam-site-header .dam-site-brand { display: inline-flex; align-items: baseline; gap: 11px; justify-self: start; white-space: nowrap; color: var(--dam-nav-ink) !important; text-decoration: none; }
html body .dam-site-header .dam-site-brand strong { font: 800 22px/1 'Unbounded',sans-serif; letter-spacing: .02em; color: var(--dam-nav-ink) !important; }
html body .dam-site-header .dam-site-brand span { font: 400 10px/1.3 'JetBrains Mono',monospace; letter-spacing: .32em; color: var(--dam-nav-muted) !important; }
html body .dam-site-header nav[data-nav] { display: flex !important; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--dam-nav-border); border-radius: 14px; background: var(--dam-nav-track); }
html body .dam-site-header nav[data-nav] a {
  --nav-x: 50%; --nav-y: 50%; position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 0 12px; border-radius: 10px;
  font: 500 13px/1.3 'JetBrains Mono',monospace; letter-spacing: .025em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
  color: var(--dam-nav-muted) !important;
  transition: color 180ms ease, background-color 180ms ease;
}
html body .dam-site-header nav[data-nav] a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(95px circle at var(--nav-x) var(--nav-y),var(--dam-nav-glow),transparent 80%);
  opacity: 0; transition: opacity 180ms ease;
}
html body .dam-site-header nav[data-nav] a::after {
  content: ''; position: absolute; left: calc(50% - 8px); right: auto; bottom: 3px;
  width: 16px; height: 2px; border-radius: 2px; background: #e8472a;
  transform: scaleX(0); transform-origin: center; transition: transform 180ms ease;
}
html body .dam-site-header nav[data-nav] a[aria-current='page'] { color: var(--dam-nav-current) !important; background: var(--dam-nav-active); }
html body .dam-site-header nav[data-nav] a[aria-current='page']::after { transform: scaleX(1); }
html body .dam-site-header nav[data-nav] a:focus-visible { color: var(--dam-nav-ink) !important; }
html body .dam-site-header nav[data-nav] a:focus-visible::before { opacity: 1; }
html body .dam-site-header nav[data-nav] a:focus-visible:not([aria-current='page'])::after { transform: scaleX(0); }
html body .dam-site-header .dam-site-request {
  display: inline-flex; justify-self: end; align-items: center; justify-content: center; gap: 13px;
  height: 44px !important; padding: 0 20px !important; margin: 0 !important;
  border: 0; border-radius: 100px; background: #e8472a;
  color: #fff !important; font: 600 13px/1.3 'JetBrains Mono',monospace !important;
  letter-spacing: .04em; text-decoration: none; text-transform: uppercase;
  transition: background-color 180ms ease;
}
html body .dam-site-header .dam-site-request span { font-size: 18px; line-height: 1; }
html body .dam-site-header [data-burger] {
  display: none !important; width: 44px; height: 44px; margin: 0 !important; padding: 0;
  border: 1px solid var(--dam-nav-border); border-radius: 12px; background: var(--dam-nav-track);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer;
}
html body .dam-site-header [data-burger] [data-bl] { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--dam-nav-ink) !important; transition: transform 180ms ease,opacity 180ms ease; }
html body .dam-mobile-nav[data-mobnav] {
  position: fixed !important; inset: calc(var(--dam-nav-height) + 12px) 16px auto !important;
  width: auto; max-width: 620px; max-height: calc(100dvh - var(--dam-nav-height) - 30px);
  margin-inline: auto; z-index: 49; padding: 14px !important;
  border: 1px solid var(--dam-nav-border); border-radius: 16px;
  background: var(--dam-nav-surface) !important; color: var(--dam-nav-ink) !important;
  overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 20px 60px #0003;
}
html body .dam-mobile-nav [data-mlink] { min-height: 49px; padding: 13px 12px !important; border: 0 !important; border-radius: 10px; align-items: center !important; gap: 16px !important; color: var(--dam-nav-ink) !important; }
html body .dam-mobile-nav [data-mlink] span:first-child { font: 400 12px/1.4 'JetBrains Mono',monospace !important; letter-spacing: .04em !important; color: var(--dam-nav-muted) !important; }
html body .dam-mobile-nav [data-mlink] span:last-child { font: 500 15px/1.4 'JetBrains Mono',monospace !important; text-transform: uppercase; letter-spacing: .025em !important; color: inherit !important; }
html body .dam-mobile-nav [data-mlink][aria-current='page'] { background: var(--dam-nav-active); box-shadow: inset 2px 0 #e8472a; color: var(--dam-nav-current) !important; }
html body .dam-mobile-nav .dam-mobile-home {
  display:flex; align-items:center; gap:10px; min-height:46px;
  margin-top:8px; padding:12px; border-top:1px solid var(--dam-nav-border);
  color:var(--dam-nav-muted) !important; text-decoration:none;
  font:500 12px/1.4 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.04em;
}
html body .dam-site-header a:focus-visible, html body .dam-site-header button:focus-visible,
html body .dam-mobile-nav a:focus-visible, .dam-cases-more:focus-visible { outline: 2px solid var(--dam-nav-current); outline-offset: 3px; }
.dam-cases-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 36px; }
.dam-cases-actions > p { margin-top: 0 !important; }
.dam-cases-more { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 0 24px; border: 1px solid currentColor; border-radius: 100px; color: inherit; font: 500 14px/1.4 'JetBrains Mono',monospace; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease,border-color 180ms ease; }
.dam-cases-more span { font-size: 20px; }
html body .dam-cases-page { min-height: calc(100svh - var(--dam-nav-height)); padding: clamp(52px,7vw,96px) 0 !important; }
html body .dam-cases-page h1,
html body [data-flip='dark'] .dam-cases-more { color: #f2ede3 !important; }
@media (hover:hover) and (pointer:fine) {
  html body .dam-site-header nav[data-nav] a:hover { color: var(--dam-nav-ink) !important; }
  html body .dam-site-header nav[data-nav] a:hover::before { opacity: 1; }
  html body .dam-site-header nav[data-nav] a:hover:not([aria-current='page'])::after { transform: scaleX(0); }
  html body .dam-site-header .dam-site-request:hover { background: #cf3b20; }
  html body .dam-mobile-nav [data-mlink]:hover { background: var(--dam-nav-track); }
  .dam-cases-more:hover { background: rgba(232,71,42,.12); border-color: #e8472a; }
}
@media (min-width:1141px) { html body .dam-mobile-nav { display: none !important; } }
@media (max-width:1140px) {
  html { --dam-nav-height: 74px; }
  html body header.dam-site-header > .dam-site-header__inner { grid-template-columns: minmax(0,1fr) auto auto; gap: 12px !important; }
  html body .dam-site-header nav[data-nav] { display: none !important; }
  html body .dam-site-header [data-burger] { display: flex !important; }
  html.mobnav-open, html.mobnav-open body { overflow: hidden !important; }
  html.mobnav-open body .dam-mobile-nav { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: opacity 180ms ease,transform 180ms ease !important; }
  html.mobnav-open body [data-burger] [data-bl]:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  html.mobnav-open body [data-burger] [data-bl]:nth-child(2) { opacity: 0 !important; }
  html.mobnav-open body [data-burger] [data-bl]:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
}
@media (max-width:540px) {
  html { --dam-nav-height: 70px; }
  html body header.dam-site-header > .dam-site-header__inner { width: calc(100% - 32px); gap: 10px !important; }
  html body .dam-site-header .dam-site-brand span { display: none; }
  html body .dam-site-header .dam-site-brand strong { font-size: 20px; }
  html body .dam-site-header .dam-site-request { padding-inline: 15px !important; gap: 10px; }
  .dam-cases-actions { align-items: flex-start; gap: 22px; }
  .dam-cases-more { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  html body .dam-site-header *, html body .dam-site-header *::before, html body .dam-site-header *::after,
  html body .dam-mobile-nav, .dam-cases-more { transition: none !important; }
}

/* --- Кейсы: первый настоящий кейс (17 сентября) ---------------------------
   Карточка на главной стоит в общей сетке с заглушками и повторяет их
   инлайн-стили, поэтому тёмную тему получает теми же правилами
   [data-flip="dark"] из dam-motion.css. Те правила красят всё внутри
   карточки в бумажный с !important — свои цвета возвращаем правилами под
   тем же флагом, но с более точным селектором. До того как скрипт
   перевернёт секцию, текст просто наследует тёмный цвет светлой карточки. */
.dam-case-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.dam-case-card__media { position: relative; display: block; height: 200px; overflow: hidden; }
/* Фона у обложки нет намеренно: подбор контраста в motion.js видит светлый
   фон и перекрашивает подписи поверх снимка в тёмный. */
.dam-case-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.dam-case-card__tags {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 40px 18px 16px; background: linear-gradient(to top, rgba(22,19,15,.82), rgba(22,19,15,0));
  font: 400 11px/1 'JetBrains Mono',monospace; letter-spacing: .1em; text-transform: uppercase; color: #F2EDE3;
}
.dam-case-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; }
.dam-case-card__more { margin-top: auto; padding-top: 18px; font: 500 13px/1.3 'JetBrains Mono',monospace; letter-spacing: .04em; }
.dam-case-card__more span { color: #E8472A; }
html[data-motion] [data-flip="dark"] .dam-case-card .dam-case-card__more span { color: #E8472A !important; }
@media (hover:hover) and (pointer:fine) {
  .dam-case-card__link:hover .dam-case-card__media img { transform: scale(1.03); }
}

/* Развёрнутый кейс на странице кейсов: слева сайт в окне браузера и на
   телефоне, справа задача, что сделали и результат. */
.dam-case { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); margin-bottom: 18px; scroll-margin-top: calc(var(--dam-nav-height) + 24px); }
.dam-case__media {
  position: relative; display: block; padding: clamp(28px,3.4vw,48px) clamp(24px,3vw,40px);
  border-right: 1px solid rgba(22,19,16,.1); text-decoration: none;
}
/* Текст справа длинный, поэтому снимки держатся на экране, пока его читают.
   Для этого у карточки кейса нет overflow:hidden: он отключил бы sticky. */
.dam-case__stage {
  position: sticky; top: calc(var(--dam-nav-height) + 32px); display: block;
  padding: 0 clamp(44px,5vw,72px) clamp(40px,4.6vw,64px) 0;
}
.dam-case__browser { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: #F5F1E8; box-shadow: 0 0 0 1px rgba(22,19,16,.12), 0 30px 60px -28px rgba(0,0,0,.6); }
.dam-case__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #E7E0D4; }
.dam-case__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CBC2B4; }
.dam-case__bar::after { content: 'valeria-smm.ru'; margin-left: 12px; font: 500 11px/1 'JetBrains Mono',monospace; letter-spacing: .04em; color: #8C8378; }
.dam-case__browser img { display: block; width: 100%; height: auto; }
.dam-case__phone {
  position: absolute; right: 0; bottom: 0; width: clamp(92px,10.5vw,148px);
  aspect-ratio: 9 / 19; padding: 5px; border-radius: 20px; background: #0E0C0A; box-shadow: 0 26px 50px -18px rgba(0,0,0,.75);
}
.dam-case__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 15px; }
.dam-case__body { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px,3.4vw,48px); }
.dam-case__eyebrow { display: flex; align-items: center; gap: 10px; font: 500 12px/1.3 'JetBrains Mono',monospace; letter-spacing: .16em; text-transform: uppercase; color: #E8472A; }
.dam-case__eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 100px; background: #E8472A; }
.dam-case__head { display: flex; flex-direction: column; gap: 12px; }
.dam-case__title { font: 700 clamp(26px,2.7vw,40px)/1.04 'Unbounded',sans-serif; letter-spacing: -.03em; }
.dam-case__site { align-self: flex-start; font: 500 13px/1.3 'JetBrains Mono',monospace; letter-spacing: .04em; color: #8C8378; text-decoration: none; transition: color 180ms ease; }
.dam-case__lead { font: 500 17px/1.55 'Manrope',sans-serif; }
.dam-case__parts { display: grid; gap: 22px; padding-top: 24px; border-top: 1px solid rgba(22,19,16,.12); }
.dam-case__part h3 { margin-bottom: 10px; font: 500 11px/1.3 'JetBrains Mono',monospace; letter-spacing: .16em; text-transform: uppercase; color: #8C8378; }
.dam-case__part p, .dam-case__part li { font: 500 15px/1.55 'Manrope',sans-serif; }
.dam-case__part ul { display: grid; gap: 10px; list-style: none; }
.dam-case__part li { position: relative; padding-left: 22px; }
.dam-case__part li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: #E8472A; }
.dam-case__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.dam-case__tags li { padding: 8px 12px; border: 1px solid rgba(22,19,16,.16); border-radius: 100px; font: 500 11px/1 'JetBrains Mono',monospace; letter-spacing: .08em; text-transform: uppercase; color: #6E665A; }
.dam-case__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dam-case__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 24px;
  border: 1px solid currentColor; border-radius: 100px; font: 500 14px/1.3 'JetBrains Mono',monospace; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.dam-case__btn span { font-size: 18px; line-height: 1; }
.dam-case__btn--primary { border-color: #E8472A; background: #E8472A; color: #fff; }

html[data-motion] [data-flip="dark"] .dam-case .dam-case__title { color: #F2EDE3 !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__lead span { color: inherit !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__lead,
html[data-motion] [data-flip="dark"] .dam-case .dam-case__part p,
html[data-motion] [data-flip="dark"] .dam-case .dam-case__part li { color: #B7AEA2 !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__part h3,
html[data-motion] [data-flip="dark"] .dam-case .dam-case__site,
html[data-motion] [data-flip="dark"] .dam-case .dam-case__tags li { color: #8C8378 !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__eyebrow { color: #E8472A !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__btn { color: #F2EDE3 !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__btn--primary { color: #fff !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__media,
html[data-motion] [data-flip="dark"] .dam-case .dam-case__parts { border-color: rgba(242,237,227,.12) !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__tags li { border-color: rgba(242,237,227,.16) !important; }
html[data-motion] [data-flip="dark"] .dam-case .dam-case__browser { box-shadow: 0 0 0 1px rgba(242,237,227,.1), 0 30px 60px -28px rgba(0,0,0,.8); }

@media (hover:hover) and (pointer:fine) {
  .dam-case__btn:hover { background: rgba(232,71,42,.12); border-color: #E8472A; }
  .dam-case__btn--primary:hover { background: #cf3b20; border-color: #cf3b20; }
  html body .dam-case .dam-case__site:hover,
  html[data-motion] [data-flip="dark"] .dam-case .dam-case__site:hover { color: #E8472A !important; }
}
@media (max-width:900px) {
  .dam-case { grid-template-columns: 1fr; }
  .dam-case__media { border-right: 0; border-bottom: 1px solid rgba(22,19,16,.1); padding: 24px 20px 28px; }
  .dam-case__stage { position: relative; top: auto; padding: 0 clamp(40px,11vw,64px) clamp(36px,9vw,56px) 0; }
  .dam-case__phone { width: clamp(84px,22vw,132px); }
}
@media (max-width:540px) {
  .dam-case__body { padding: 24px 20px 28px; }
  .dam-case__lead { font-size: 16px; }
  .dam-case__actions { flex-direction: column; }
  .dam-case__btn { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .dam-case-card__media img, .dam-case__btn, .dam-case__site { transition: none !important; }
}