/* Главная (задание 24): видоискатель с монитором, бенто, кадры кейсов, линейка, плёнка. Только вид и движение.
   Общий слой (уголки, зерно, REC, проявка) — site.css, motion.css; классы здесь начинаются с hm-. Движение включает home.js (класс hm-js на <html>);
   без него и при «Уменьшить движение» страница в конечном состоянии. Только transform и opacity, без transition: all. */
:root { --hm-ease: cubic-bezier(.23, 1, .32, 1); --hm-move: cubic-bezier(.77, 0, .175, 1); --hm-night-2: #211d25; --hm-line: #3a343f; --hm-coral: #ff8a80; --hm-muted: #bdb6c0; }
.hm-rec-dot, .hm-rec::before { background: var(--rec); }

/* ---------- 1. Видоискатель ---------- */
.hm-wrap { max-width: 1320px; }
.hm-vf { position: relative; isolation: isolate; border-radius: 22px; padding: 64px 40px 44px; color: var(--on-night); --mx: 70%; --my: 30%; --corner: var(--on-night);
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(226, 54, 44, .1), transparent 60%), linear-gradient(160deg, var(--hm-night-2), var(--night) 60%); }
.hm-vf__c { position: absolute; width: 34px; height: 34px; border: 2px solid var(--on-night); opacity: .85; pointer-events: none; z-index: 2; }
.hm-vf__c--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; } .hm-vf__c--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.hm-vf__c--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; } .hm-vf__c--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.hm-vf__hud { position: absolute; top: 24px; left: 60px; right: 60px; display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--hm-muted); z-index: 2; }
.hm-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--on-night); }
.hm-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.hm-tc { font-variant-numeric: tabular-nums; }
@keyframes hm-blink { to { opacity: .25; } }
@media (prefers-reduced-motion: no-preference) { .hm-rec::before { animation: hm-blink 1.2s steps(2, start) infinite; } }
.hm-hero__grid { position: relative; z-index: 1; padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: center; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.hm-chips li { font: 500 13px/1 var(--font-mono); padding: 8px 12px; border: 1px solid var(--hm-line); border-radius: 999px; color: var(--hm-muted); transition: border-color .2s ease, color .2s ease; }
.hm-chips li.on { border-color: var(--hm-coral); color: var(--on-night); }
.hm-h1 { margin: 0 0 24px; font: 700 clamp(40px, 5.3vw, 76px)/1.06 var(--font-display); letter-spacing: -.03em; color: var(--on-night); text-wrap: balance; }
.hm-h1 em { font-style: normal; color: var(--rec); }
.hm-h1 .w { display: inline-block; max-width: 100%; }
.hm-js .hm-h1 .w { animation: hm-word .7s var(--hm-ease) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes hm-word { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
.hm-lead { margin: 0 0 32px; font: 400 18px/28px var(--font-text); color: var(--hm-muted); max-width: 52ch; }
.hm-hero .mo-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* монитор */
.hm-mon { position: relative; border: 1px solid var(--hm-line); border-radius: 18px; padding: 22px 22px 18px; background: rgba(14, 12, 16, .6); min-width: 0; }
.hm-mon__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 78px; margin-bottom: 14px; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--hm-muted); }
.hm-lens { position: absolute; top: -29px; right: 28px; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--on-night); background: radial-gradient(circle at 50% 50%, #2b2630 0 55%, #3a343f 56% 60%, #2b2630 61%); display: grid; place-items: center; transition: transform .14s var(--hm-ease); z-index: 3; }
.hm-lens__iris { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a80 0 12%, var(--rec) 13% 100%); display: grid; place-items: center; will-change: transform; }
.hm-lens__iris::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #0e0c10; transition: transform .25s var(--hm-ease); }
.hm-lens.wide .hm-lens__iris::after { transform: scale(1.5); }
.hm-lens.blink { transform: scaleY(.12); }
.hm-niches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.hm-niches button { min-height: 36px; padding: 9px 12px; border: 1px solid var(--hm-line); border-radius: 999px; background: transparent; color: var(--hm-muted); font: 500 13px/1 var(--font-text); cursor: pointer; transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
.hm-niches button:hover { border-color: var(--on-night); color: var(--on-night); }
.hm-niches button[aria-pressed="true"] { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.hm-budget { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; margin-bottom: 14px; }
.hm-budget label { font-size: 14px; color: var(--hm-muted); }
.hm-budget output { font: 500 15px/1 var(--font-mono); color: var(--on-night); font-variant-numeric: tabular-nums; }
.hm-budget input { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; accent-color: var(--rec); }
.hm-bars { display: grid; gap: 9px; margin-bottom: 16px; }
.hm-bar { display: grid; grid-template-columns: minmax(0, 1fr) 52px 88px; gap: 4px 10px; align-items: center; font-size: 13px; }
.hm-bar--h { align-items: end; min-height: 34px; font: 500 10px/1.15 var(--font-mono); color: var(--hm-muted); }
.hm-bar--h span:not(:first-child) { text-align: right; }
.hm-bar__n { color: var(--hm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bar__v { font: 500 12px/1 var(--font-mono); text-align: right; color: var(--on-night); font-variant-numeric: tabular-nums; }
.hm-bar__t { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #2b2630; overflow: hidden; }
.hm-bar__f { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff8a80, var(--rec)); transform-origin: left; transform: scaleX(var(--s, 0)); transition: transform .6s var(--hm-ease); }
.hm-res { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px dashed var(--hm-line); padding-top: 14px; }
.hm-res__big { font: 700 clamp(30px, 3.4vw, 42px)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-res__big small { display: block; margin-top: 8px; font: 500 14px/1.2 var(--font-text); letter-spacing: 0; color: var(--hm-muted); }
.hm-note { margin-top: 4px; font-size: 13px; color: var(--hm-muted); }
.hm-res__cpl { flex: none; text-align: right; font-size: 13px; color: var(--hm-muted); }
.hm-res__cpl b { display: block; font: 500 18px/1.2 var(--font-mono); color: var(--on-night); font-variant-numeric: tabular-nums; }
.hm-mon__foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: var(--hm-muted); }
.hm-mon__foot p { margin: 0; max-width: 30ch; }
.hm-mon__foot a { color: var(--on-night); }

/* ---------- Общее ---------- */
.hm-kicker-row { display: flex; flex-direction: column; }
.hm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--ink); }
.hm-card--dark { background: var(--night); border-color: var(--night); color: var(--on-night); --corner: var(--on-night); }
.hm-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hm-sample { font-size: 12px; color: var(--ink-subtle); }
.hm-card--dark .hm-sample { color: var(--hm-muted); }

/* ---------- 2. Бенто инструментов ---------- */
.hm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hm-cell { grid-column: span 6; container-type: inline-size; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 24px; transition: transform .2s var(--hm-ease); }
.hm-cell:hover { transform: translateY(-3px); }
.hm-c7 { grid-column: span 7; } .hm-c5 { grid-column: span 5; } .hm-c12 { grid-column: span 12; }
.hm-demo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; border-radius: 14px; background: var(--surface-sunken); overflow: hidden; }
.hm-cell__k { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.hm-cell__t { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; }
.hm-cell__d { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.hm-cell__go { font: 600 15px/20px var(--font-text); color: var(--rec-text); }
.hm-mb { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; }
.hm-mb i { height: 10px; border-radius: 5px; background: var(--rec); transform-origin: left; transform: scaleX(var(--s)); }
.hm-mb span:last-child { text-align: right; }
.hm-js .hm-mb i { transform: scaleX(0); transition: transform .9s var(--hm-ease); }
.hm-js .in .hm-mb i, .hm-js .hm-mb.in i { transform: scaleX(var(--s)); }
.hm-total { margin-bottom: 4px; font: 700 28px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-checks { display: grid; gap: 8px; font: 500 14px/1.2 var(--font-mono); }
.hm-checks > span { display: flex; align-items: center; gap: 10px; }
.hm-checks b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--positive); color: #fff; font-size: 12px; }
.hm-checks .bad b { background: var(--rec-fill); }
.hm-js .hm-checks > span { opacity: .35; transition: opacity .3s ease; }
.hm-js .hm-checks > span.on { opacity: 1; }
.hm-leak { font: 700 30px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--rec-text); font-variant-numeric: tabular-nums; }
.hm-kp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.hm-kp__form { display: grid; gap: 6px; font-size: 12px; }
.hm-kp__form > span { color: var(--ink-muted); }
.hm-kp__form > div { min-height: 32px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.hm-kp__page { padding: 12px; border-radius: 8px; background: var(--surface); box-shadow: 0 10px 30px -12px rgba(34, 30, 36, .35); font-size: 11px; line-height: 1.35; transform: rotate(1.5deg); }
.hm-kp__page strong { display: block; margin: 6px 0; font: 700 13px/1.15 var(--font-display); }
.hm-kp__row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.hm-caret::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .hm-caret::after { animation: hm-blink 1s steps(2, start) infinite; } }
@container (max-width: 420px) { .hm-kp { grid-template-columns: 1fr; } .hm-kp__page { display: none; } }
.hm-game { flex-direction: row; align-items: center; min-height: 180px; gap: 28px; overflow: hidden; }
.hm-game .hm-cell__d { color: var(--hm-muted); } .hm-game .hm-cell__k, .hm-game .hm-cell__go { color: var(--hm-coral); }
.hm-game > div:last-child { display: grid; gap: 10px; }
.hm-pix { flex: none; position: relative; width: 220px; height: 120px; border: 1px solid var(--hm-line); border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(90deg, #211d25 0 20px, #1a171d 20px 40px); }
.hm-pix::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 6px; background: #3a343f; }
.hm-pix i { position: absolute; bottom: 22px; left: 20px; width: 16px; height: 16px; background: var(--on-night); }
.hm-pix b { position: absolute; bottom: 22px; left: 150px; width: 12px; height: 12px; background: var(--rec); }
@keyframes hm-run { 0% { transform: translate(0, 0); } 25% { transform: translate(45px, -30px); } 50% { transform: translate(90px, 0); } 100% { transform: translate(180px, 0); } }
@keyframes hm-leakmove { from { transform: translateX(80px); } to { transform: translateX(-170px); } }
@media (prefers-reduced-motion: no-preference) { .hm-game.hm-live .hm-pix i { animation: hm-run 2.4s steps(12) infinite; } .hm-game.hm-live .hm-pix b { left: 190px; animation: hm-leakmove 2.4s linear infinite; } }

/* ---------- Цифры ---------- */
.hm-stats .mo-metric { padding-top: 16px; border-top: 2px solid var(--ink); }

/* ---------- 5. Отрасли ---------- */
.hm-ind { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.hm-svc { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; transition: transform .2s var(--hm-ease); }
.hm-svc:hover { transform: translateY(-3px); }
.hm-svc--flag { grid-row: span 2; padding: 32px; }
.hm-svc__n { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); }
.hm-svc--flag .hm-svc__n { color: var(--hm-coral); }
.hm-svc__t { margin: 0; font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.hm-svc--flag .hm-svc__t { font-size: clamp(30px, 3.4vw, 44px); }
.hm-svc__d { margin: 0; max-width: 46ch; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.hm-svc--flag .hm-svc__d { color: var(--hm-muted); }
.hm-svc .mo-formula { font-size: 13px; line-height: 18px; }
.hm-svc__more { margin-top: auto; font: 600 15px/20px var(--font-text); color: var(--rec-text); }
.hm-svc--flag .hm-svc__more { color: var(--hm-coral); }
.hm-chan { margin-top: 8px; width: 100%; max-width: 420px; display: grid; gap: 10px; padding: 16px; border: 1px solid var(--hm-line); border-radius: 16px; background: var(--hm-night-2); }
.hm-chan__h { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hm-chan__h i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #ff8a80, var(--rec)); }
.hm-chan__h small { display: block; font-size: 12px; color: var(--hm-muted); }
.hm-chan__subs { font: 700 30px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-chan__subs small { margin-left: 6px; font: 500 13px/1 var(--font-text); letter-spacing: 0; color: var(--hm-muted); }
.hm-spark { display: block; width: 100%; height: auto; }
.hm-spark path { fill: none; stroke: #ff8a80; stroke-width: 2; }
.hm-js .hm-spark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--hm-ease); }
.hm-js .in .hm-spark path { stroke-dashoffset: 0; }
.hm-other { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.hm-other .other__label { font: 600 15px/20px var(--font-text); color: var(--ink-muted); }
.hm-dash { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-text); }
.hm-dash:hover { border-color: var(--ink); }

/* ---------- 6. Форматы: глубина резкости ---------- */
.hm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hm-tabs button { min-height: 44px; padding: 11px 16px; border: 1px solid var(--hm-line); border-radius: 999px; background: transparent; color: var(--hm-muted); font: 500 14px/1 var(--font-text); cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.hm-tabs button[aria-selected="true"] { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.hm-stage { display: flex; justify-content: center; align-items: flex-start; gap: 28px; min-height: 540px; }
.hm-ph { margin: 0; flex: none; width: 250px; display: flex; flex-direction: column; align-items: center; transform: scale(.86); opacity: .55; filter: blur(3px); transition: transform .5s var(--hm-move), filter .5s var(--hm-move), opacity .5s var(--hm-move); }
.hm-ph.on { transform: none; opacity: 1; filter: none; }
.hm-ph__body { width: 100%; padding: 12px; border: 2px solid #3a343f; border-radius: 34px; background: #0e0c10; }
.hm-ph__scr { height: 440px; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #1a171d; font-size: 13px; text-align: left; }
.hm-ph figcaption { margin-top: 14px; text-align: center; font-size: 14px; line-height: 20px; color: var(--hm-muted); }
.hm-ph figcaption b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--on-night); }
.hm-clip { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; background: linear-gradient(180deg, #3b2a33, #17141a 70%); }
.hm-clip small, .hm-post small, .hm-av small { font: 500 11px/1.3 var(--font-mono); color: var(--hm-muted); }
.hm-clip strong { font: 700 20px/1.1 var(--font-display); }
.hm-clip .hm-pill { align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--on-night); color: var(--night); font-weight: 600; }
.hm-post, .hm-av { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.hm-post__img { height: 150px; border-radius: 12px; background: linear-gradient(135deg, #5b6b4f, #2f3a2a); }
.hm-post span.hm-btn { text-align: center; padding: 10px; border-radius: 10px; background: #2f6fed; color: #fff; font-weight: 600; }
.hm-post p { margin: 0; }
.hm-av__ad { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #221e24; }
.hm-av__ad i { height: 120px; border-radius: 8px; background: linear-gradient(135deg, #6b5a4a, #2a2420); }
.hm-av__item { height: 64px; border-radius: 10px; background: #221e24; }

/* ---------- 7. Кейсы: кадры ---------- */
.hm-cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hm-case { grid-column: span 6; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.hm-case--wide { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.hm-case__col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hm-case__frame { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; color: var(--rec-text); }
.hm-case__t { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: -.01em; }
.hm-case__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-case p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.hm-vs { display: grid; gap: 16px; }
.hm-vs__row { display: grid; gap: 6px; }
.hm-vs__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hm-vs__h b { font: 700 28px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-vs__h b small { font-size: .5em; letter-spacing: 0; margin-left: .15em; }
.hm-vs__h span { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: right; }
.hm-vs__l { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; font: 500 11px/1 var(--font-mono); color: var(--ink-muted); }
.hm-vs__l i { height: 10px; border-radius: 5px; transform-origin: left; transform: scaleX(var(--s)); background: var(--rec); }
.hm-vs__l.plan i { background: var(--line-strong); opacity: .55; }
.hm-js .hm-vs__l i { transform: scaleX(0); transition: transform 1s var(--hm-ease); }
.hm-js .in .hm-vs__l i { transform: scaleX(var(--s)); }
.hm-case__foot { font-size: 14px; line-height: 20px; color: var(--ink-subtle); }

/* ---------- 8. Монтажная линейка ---------- */
.hm-tl { position: relative; overflow: hidden; padding: 28px 24px 30px; border-radius: 20px; background: var(--night); color: var(--on-night); }
.hm-tl__ruler { display: flex; justify-content: space-between; height: 24px; margin-bottom: 14px; font: 500 11px/1 var(--font-mono); color: var(--hm-muted);
  background: repeating-linear-gradient(90deg, var(--hm-line) 0 1px, transparent 1px 12px) bottom / 100% 8px no-repeat, repeating-linear-gradient(90deg, #5a5360 0 1px, transparent 1px 120px) bottom / 100% 16px no-repeat; }
.hm-tl__tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-tl__clip { display: flex; flex-direction: column; gap: 8px; min-height: 170px; padding: 16px; border: 1px solid var(--hm-line); border-radius: 12px; background: #2b2630; transition: background-color .3s ease, border-color .3s ease; }
.hm-tl__clip.on { background: #3b2a2e; border-color: var(--hm-coral); }
.hm-tl__clip small { font: 500 11px/1 var(--font-mono); color: var(--hm-muted); }
.hm-tl__clip h3 { margin: 0; font: 600 20px/26px var(--font-display); }
.hm-tl__clip p { margin: 0; font-size: 14px; line-height: 21px; color: var(--hm-muted); }
.hm-tl__head { position: absolute; top: 18px; bottom: 18px; left: 24px; width: 2px; background: var(--rec); pointer-events: none; will-change: transform; }
.hm-tl__head::before { content: ""; position: absolute; top: -4px; left: -6px; border: 7px solid transparent; border-top: 9px solid var(--rec); }

/* ---------- 9. Плёнка продуктов ---------- */
.hm-film { position: relative; display: flex; gap: 14px; overflow-x: auto; padding: 38px 18px; border-radius: 20px; background: var(--night); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #5a5360 transparent; }
.hm-film::before, .hm-film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none; background: radial-gradient(circle, #3a343f 4px, transparent 5px) 0 0 / 26px 14px repeat-x; }
.hm-film::before { top: 10px; } .hm-film::after { bottom: 10px; }
.hm-film:focus-visible { outline: 2px solid var(--on-night); outline-offset: 3px; }
.hm-frame { flex: none; scroll-snap-align: start; width: 270px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .2s var(--hm-ease); }
.hm-frame:hover { transform: translateY(-3px); }
.hm-frame small { font: 500 11px/16px var(--font-mono); color: var(--rec-text); }
.hm-frame strong { font: 700 18px/1.15 var(--font-display); letter-spacing: -.02em; }
.hm-frame span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.hm-frame em { margin-top: auto; font: 600 14px/20px var(--font-text); font-style: normal; color: var(--rec-text); }

/* ---------- 10. Команда ---------- */
.hm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-fact { display: flex; flex-direction: column; gap: 8px; padding: 26px; border: 1px solid var(--hm-line); border-radius: 20px; min-width: 0; }
.hm-fact__n { font: 700 clamp(46px, 6vw, 76px)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hm-fact__n small { font-size: .45em; letter-spacing: -.02em; }
.hm-fact__l { font: 600 16px/22px var(--font-text); }
.hm-fact p { margin: 0; font-size: 14px; line-height: 20px; color: var(--hm-muted); }
.hm-run { margin-top: 40px; overflow: hidden; padding: 16px 0; border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.hm-run:focus-visible { outline: 2px solid var(--on-night); outline-offset: 3px; }
.hm-run__in { display: flex; flex-wrap: wrap; gap: 12px 40px; font: 500 15px/1 var(--font-mono); color: var(--hm-muted); }
.hm-run__in span { white-space: nowrap; }
.hm-run__in span::before { content: "● "; color: var(--rec); }
@keyframes hm-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) { .hm-js .hm-run__in { flex-wrap: nowrap; width: max-content; animation: hm-tick 40s linear infinite; } .hm-run:hover .hm-run__in, .hm-run:focus-within .hm-run__in, .hm-run:focus .hm-run__in { animation-play-state: paused; } }

/* ---------- 11. Заявка ---------- */
.hm-formbox { position: relative; min-width: 0; }
.hm-formbox .hm-lens { right: 30px; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 1100px) { .hm-tl__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .hm-vf { padding: 56px 20px 28px; } .hm-vf__hud { left: 26px; right: 26px; }
  .hm-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hm-mon { margin-top: 10px; }
}
@media (max-width: 900px) {
  .hm-bento, .hm-cases { grid-template-columns: minmax(0, 1fr); } .hm-c7, .hm-c5, .hm-c12, .hm-cell, .hm-case, .hm-case--wide { grid-column: auto; }
  .hm-case--wide { grid-template-columns: minmax(0, 1fr); }
  .hm-game { flex-direction: column; align-items: flex-start; }
  .hm-ind { grid-template-columns: minmax(0, 1fr); } .hm-svc--flag { grid-row: auto; }
  .hm-stage { justify-content: flex-start; gap: 16px; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 2px 8px; }
  .hm-ph, .hm-ph.on { scroll-snap-align: center; transform: none; opacity: 1; filter: none; }
  .hm-tl__tracks { grid-template-columns: minmax(0, 1fr); } .hm-tl__head, .hm-tl__ruler { display: none; } .hm-tl { padding: 16px; }
  .hm-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .hm-vf__hud > span:last-child { display: none; } .hm-bar { grid-template-columns: minmax(0, 1fr) 44px 74px; } .hm-mb { grid-template-columns: 84px minmax(0, 1fr) 40px; } }
@media (hover: hover) and (pointer: fine) { .hm-js .hm-vf { background: radial-gradient(600px circle at var(--mx) var(--my), rgba(226, 54, 44, .12), transparent 60%), linear-gradient(160deg, var(--hm-night-2), var(--night) 60%); } }

/* Уменьшить движение: ни одной бесконечной анимации, всё в конечном состоянии */
@media (prefers-reduced-motion: reduce) {
  .hm-h1 .w, .hm-rec::before, .hm-caret::after, .hm-run__in, .hm-pix i, .hm-pix b { animation: none !important; }
  .hm-bar__f, .hm-mb i, .hm-vs__l i, .hm-tl__clip, .hm-ph, .hm-checks > span { transition: none !important; }
  .hm-js .hm-mb i, .hm-js .hm-vs__l i { transform: scaleX(var(--s)); }
  .hm-js .hm-checks > span { opacity: 1; }
  .hm-js .hm-spark path { stroke-dashoffset: 0; transition: none; }
}