/* XRmark (бывш. VRmark) v2: деловой проспект и каталог. Дизайн-код VRmark_Design_Code_v1: тёплый белый, графит,
   «сланец» вторичным, лайм только заливкой (кнопка, выноска, деталь в работе), Manrope + IBM Plex Mono
   (только индексы и подписи), скругление 8 px. Тайский: IBM Plex Sans Thai (в Manrope и Plex Mono
   тайских знаков нет), без капса и разрядки. Цвета статусов — из дизайн-кода, не лайм. */

@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212, U+2192; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 400; font-display: swap; src: url(fonts/plex-sans-thai-400.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 600; font-display: swap; src: url(fonts/plex-sans-thai-600.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 700; font-display: swap; src: url(fonts/plex-sans-thai-700.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --ink: #0D151C; --paper: #F5F3EA; --slate: #5D6870; --line: #D5D9D1; --lime: #C2F540; --panel: #23323C;
  --ok: #236342; --err: #A42D24; --order: #9A4A12; --card: #FBFAF5; --soft: #ECE9DE;
  --font: "Manrope", "IBM Plex Sans Thai", Arial, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, monospace;
  --r: 8px; --gutter: 16px; --wrap: 1200px; --bar: 64px;
  /* ритм страницы: одни и те же отступы на обеих страницах */
  --sec: clamp(56px, 7vw, 88px); --sec-first: clamp(28px, 3.6vw, 48px); --head-gap: clamp(24px, 3vw, 40px);
  --pad: clamp(18px, 2vw, 24px); --gap: 16px; --stack: 20px;
  --sc-canvas: var(--paper); --sc-surface: var(--card); --sc-ink: var(--ink); --sc-ink-soft: var(--slate);
  --sc-accent: var(--lime); --sc-accent-ink: var(--ink);
  --sc-font-display: var(--font); --sc-font-text: var(--font); --sc-font-mono: var(--mono);
}
@media (min-width: 720px) { :root { --gutter: 32px; --bar: 72px; } }
:lang(th) { --font: "IBM Plex Sans Thai", "Manrope", Arial, sans-serif; --mono: "IBM Plex Sans Thai", "IBM Plex Mono", monospace; }

/* Без скриптов содержимое видно сразу: движок прячет [data-sc-in] до появления. */
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > * { opacity: 1; transform: none; }

html { scroll-padding-top: calc(var(--bar) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:lang(th) body, body:lang(th) { line-height: 1.75; word-break: normal; overflow-wrap: break-word; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { letter-spacing: 0; font-weight: 700; line-height: 1.35; }
h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; }
h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; }
h3 { font-size: 19px; line-height: 1.3; }
p { margin: 0; }
.lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--slate); max-width: 64ch; text-wrap: pretty; }
.note { font-size: 14px; color: var(--slate); max-width: 90ch; margin-top: 16px; }
.muted { color: var(--slate); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: 20px; height: 20px; flex: none; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--lime); color: var(--ink); padding: 10px 14px; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--r); font: 800 16px/1.3 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .16s, border-color .16s, color .16s; text-align: center; }
:lang(th) .btn { font-weight: 700; line-height: 1.5; padding-top: 10px; padding-bottom: 10px; }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #D0FF64; }
.btn--lime:active { background: #ADD832; }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.ctl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); font: 600 14px/1.3 var(--font); cursor: pointer; }
.ctl:hover { border-color: var(--ink); }
.ctl--note { cursor: default; color: var(--slate); border-color: transparent; background: none; padding-left: 4px; }
.ctl[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- шапка ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); min-height: var(--bar); display: flex; align-items: center; gap: 20px; }
.bar__logo { display: flex; align-items: center; flex: none; }
.bar__logo-full { width: 140px; height: auto; }
.bar__logo-mark { display: none; width: 34px; height: auto; }
.bar__nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.bar__nav > a { padding: 10px 12px; border-radius: var(--r); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.bar__nav > a:hover { background: var(--soft); }
.bar__nav > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); border-radius: var(--r) var(--r) 0 0; }
.lang { display: flex; gap: 2px; font: 500 13px/1 var(--mono); }
.lang a { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: var(--r); text-decoration: none; color: var(--slate); letter-spacing: .04em; font-family: "IBM Plex Mono", monospace; }
.lang a:hover { color: var(--ink); background: var(--soft); }
.lang a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lang--bar { margin-left: auto; }
.lang--menu { display: none; }
.bar__cta { min-height: 44px; padding: 10px 18px; font-size: 15px; white-space: nowrap; }
.bar__menu { display: none; }
@media (max-width: 1080px) {
  .bar__in { gap: 12px; }
  .bar__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; margin-left: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); font: 600 15px/1 var(--font); color: var(--ink); cursor: pointer; order: 3; }
  .bar__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--gutter) 16px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px -16px rgba(13, 21, 28, .35); }
  .bar.is-open .bar__nav { display: flex; }
  .bar__nav > a { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 17px; }
  .bar__nav > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
  .lang--menu { display: flex; margin-top: 12px; }
  .lang--bar { display: none; }
  .bar__cta { order: 2; margin-left: auto; }
}
@media (max-width: 560px) {
  .bar__logo-full { display: none; }
  .bar__logo-mark { display: block; }
  .bar__cta { padding: 8px 12px; font-size: 14px; }
  :lang(th) .bar__cta { font-size: 13px; }
  .bar__menu { margin-left: 0; }
}

/* ---------- секции ---------- */
main > section { padding: var(--sec) 0; }
main > section + section { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; margin-bottom: var(--head-gap); max-width: 760px; }

/* ---------- первый экран ---------- */
.hero, .intro { padding-top: var(--sec-first) !important; }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.hero__text { display: grid; gap: var(--stack); align-content: start; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
@media (max-width: 960px) { .hero__in { grid-template-columns: 1fr; } }

/* проигрыватель: три этапа */
.player { margin: 0; display: grid; gap: 14px; }
.player__screen { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: 0 1px 0 rgba(13,21,28,.06), 0 24px 48px -28px rgba(13,21,28,.45); }
.player__frame { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.player__frame.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.player__media { position: absolute; inset: 0; }
.player__media > img, .player__media > video { width: 100%; height: 100%; object-fit: cover; }
.player__ftext { display: none; }
.taskcard { position: absolute; right: 14px; top: 14px; max-width: min(300px, 46%); display: grid; gap: 2px; padding: 14px 16px; background: var(--paper); border-radius: var(--r); box-shadow: 0 10px 28px -12px rgba(13,21,28,.55); font-size: 14px; line-height: 1.4; }
.taskcard strong { font-size: 17px; line-height: 1.3; margin-bottom: 4px; }
.taskcard__label { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
:lang(th) .taskcard__label { text-transform: none; letter-spacing: 0; font-size: 13px; }
.report { background: var(--card); padding: clamp(14px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.report__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 800; font-size: 17px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.report__tag { font: 500 12px/1.4 var(--mono); color: var(--slate); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
:lang(th) .report__tag { text-transform: none; letter-spacing: 0; }
.report__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; line-height: 1.4; }
.rrow__m { font: 500 13px/1.4 var(--mono); white-space: nowrap; }
:lang(th) .rrow__m { white-space: normal; text-align: right; }
.rrow--ok .rrow__m { color: var(--ok); }
.rrow--miss .rrow__m { color: var(--err); }
.rrow--late .rrow__m, .rrow--early .rrow__m, .rrow--wrong .rrow__m { color: var(--order); }
.report__foot { margin-top: auto; font-weight: 700; font-size: 15px; }
.player__bar { display: grid; gap: 12px; }
.player__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pstep { width: 100%; min-height: 56px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); font: 700 15px/1.3 var(--font); cursor: pointer; }
.pstep:hover { border-color: var(--slate); }
.pstep[aria-current="step"] { border-color: var(--ink); }
.pstep__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--mono); background: var(--soft); }
.pstep[aria-current="step"] .pstep__n { background: var(--lime); }
.pstep__bar { grid-column: 1 / -1; height: 3px; background: var(--soft); border-radius: 2px; overflow: hidden; }
.pstep__bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--k, 0)); }
.player__text { color: var(--slate); min-height: 3.2em; font-size: 15px; }
.player__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctl .ico--play { display: none; }
.player.is-paused .ctl .ico--pause { display: none; }
.player.is-paused .ctl .ico--play { display: block; }
@media (max-width: 560px) {
  .player__steps { grid-template-columns: 1fr; }
  .pstep { min-height: 48px; }
  .taskcard { right: 10px; top: 10px; max-width: 58%; padding: 10px 12px; font-size: 13px; }
  .taskcard strong { font-size: 15px; }
  .rrow { font-size: 13px; }
}
/* Статичный вариант: три этапа рядом, без смены кадров. */
.player.is-static .player__screen { aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.player.is-static .player__frame { position: static; opacity: 1; visibility: visible; display: grid; gap: 10px; align-content: start; }
.player.is-static .player__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; }
.player.is-static .player__ftext { display: block; font-size: 14px; color: var(--slate); }
.player.is-static .player__ftext b { color: var(--ink); display: block; }
.player.is-static .player__steps, .player.is-static .player__text, .player.is-static [data-pause] { display: none; }
.player.is-static .taskcard { position: static; max-width: none; box-shadow: none; border-radius: 0; padding: 8px 10px; font-size: 12px; }
.player.is-static .player__frame[data-frame="0"] .player__media { display: grid; grid-template-rows: 1fr auto; aspect-ratio: auto; background: var(--paper); border: 1px solid var(--line); }
.player.is-static .player__frame[data-frame="0"] img { aspect-ratio: 16 / 10; height: auto; }
.player.is-static .taskcard strong { font-size: 13px; }
.player.is-static .report { padding: 10px; gap: 6px; }
.player.is-static .report__head { font-size: 13px; padding-bottom: 6px; }
.player.is-static .rrow { font-size: 11px; padding: 4px 0; }
.player.is-static .rrow__m { font-size: 11px; }
.player.is-static .report__foot { font-size: 12px; }
@media (max-width: 720px) { .player.is-static .player__screen { grid-template-columns: 1fr; } .player.is-static .rrow { font-size: 13px; } .player.is-static .rrow__m { font-size: 12px; } }

/* ---------- как проходит обучение ---------- */
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.how__steps li { display: grid; gap: 10px; align-content: start; padding: var(--pad); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.how__n { width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 15px/1 var(--mono); }
.how__steps li:nth-child(2) .how__n { background: var(--lime); color: var(--ink); }
.how__steps p { color: var(--slate); }
@media (max-width: 860px) { .how__steps { grid-template-columns: 1fr; } }

/* ---------- сферы применения ---------- */
.areas__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.area { height: 100%; box-sizing: border-box; display: grid; gap: 10px; grid-template-rows: auto 1fr auto; padding: var(--pad); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; transition: border-color .16s, transform .16s; }
.area:hover { border-color: var(--ink); transform: translateY(-2px); }
.area p { color: var(--slate); font-size: 15px; }
.area__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }

/* ---------- возможности ---------- */
.caps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 32px; }
.cap { display: grid; gap: 8px; align-content: start; padding: var(--pad) 0; border-top: 1px solid var(--line); }
.cap p { color: var(--slate); font-size: 15px; }
.scope { font-size: 14px !important; }
.scope span { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 4px; font: 500 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
:lang(th) .scope span { text-transform: none; letter-spacing: 0; font-size: 13px; }
.scope--all span { background: var(--lime); }
.scope--some span { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 400px) { .caps__list { grid-template-columns: 1fr; } }

/* ---------- обращение ---------- */
.contact { background: var(--panel); color: var(--paper); border-top: 0 !important; }
.contact .lead { color: #C9CFC8; }
.contact__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact__text { display: grid; gap: 16px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 14px; }
.optional { font-weight: 400; color: #AEB6B0; }
.form input:not([type="checkbox"]), .form textarea, .form select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #66747C; border-radius: var(--r); background: #1A262E; color: var(--paper); font: 400 16px/1.4 var(--font); }
.form textarea { resize: vertical; min-height: 112px; }
.form ::placeholder { color: #8E9A9F; }
.form :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: #FF7A42; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #D9DED7; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lime); flex: none; }
.form__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form__status { flex: 1 1 260px; font-size: 14px; padding: 10px 14px; border-radius: var(--r); background: #1A262E; border-left: 3px solid #FF7A42; }
.form__status.is-ok { border-left-color: var(--lime); }
@media (max-width: 860px) { .contact__in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---------- подвал ---------- */
.foot { padding: 40px 0 48px; }
.foot__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto auto; gap: 24px 32px; align-items: start; }
.foot__brand { display: grid; gap: 10px; color: var(--slate); font-size: 14px; }
.foot__brand img { width: 140px; height: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 600; font-size: 15px; }
.foot__nav a { text-decoration: none; padding: 8px 0; }
.foot__nav a:hover { text-decoration: underline; }
.foot__note { grid-column: 1 / -1; font-size: 13px; color: var(--slate); }
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr; } }

/* ---------- кейсы: вступление ---------- */
.intro .wrap { display: grid; gap: var(--stack); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 4px 0 0; }
.stats > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: var(--pad); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.stats dt { color: var(--slate); font-size: 14px; }
.stats dd { margin: 0; font: 800 clamp(30px, 3.4vw, 42px)/1 var(--font); font-family: "Manrope", Arial, sans-serif; }
@media (max-width: 720px) { .stats { gap: 8px; } .stats > div { padding: 14px 12px; } .stats dt { font-size: 13px; } }

/* фильтр направлений */
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px/1.3 var(--font); cursor: pointer; text-align: left; }
.chip span { font: 500 12px/1 var(--mono); color: var(--slate); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] span { color: #C9CFC8; }
.filter__count { margin: 14px 0 22px; color: var(--slate); font-size: 14px; }
@media (max-width: 560px) { .filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scrollbar-width: thin; } .chip { flex: none; } }

/* карточка кейса */
.case-list { display: grid; gap: var(--gap); }
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: clamp(20px, 3vw, 40px); padding: var(--pad); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); scroll-margin-top: calc(var(--bar) + 16px); }
.case[hidden] { display: none; }
.case:target { border-color: var(--ink); }
.case__media { min-width: 0; }
.case__shot, .case__pending, .demo__screen { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--panel); }
.case__shot img, .case__shot video, .demo__screen > img { width: 100%; height: 100%; object-fit: cover; }
.case__pending { background: var(--ink) url(brand/VRmark-pattern.svg) center / 720px auto; display: grid; place-items: end start; }
.case__pending span { margin: 12px; padding: 6px 10px; border-radius: 6px; background: var(--paper); color: var(--ink); font: 500 12px/1.4 var(--mono); }
:lang(th) .case__pending span { font-size: 13px; }
.media-tag { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(245, 243, 234, .92); color: var(--ink); font: 500 11px/1.4 var(--mono); letter-spacing: .02em; }
:lang(th) .media-tag { font-size: 12px; letter-spacing: 0; }
.case__body { display: grid; gap: 14px; align-content: start; min-width: 0; }
.case__areas { font: 500 12px/1.5 var(--mono); color: var(--slate); text-transform: uppercase; letter-spacing: .06em; }
:lang(th) .case__areas { text-transform: none; letter-spacing: 0; font-size: 13px; }
.case h3 { font-size: clamp(20px, 1.9vw, 24px); }
.facts { margin: 0; display: grid; gap: 12px; }
.facts > div { display: grid; grid-template-columns: 168px 1fr; gap: 16px; }
.facts dt { font-weight: 700; font-size: 14px; padding-top: 1px; }
.facts dd { margin: 0; color: #2E3A42; font-size: 15px; }
@media (max-width: 1100px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }
.more { border-top: 1px solid var(--line); padding-top: 4px; }
.more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .16s; margin: 0 4px 0 2px; }
.more[open] summary::before { transform: rotate(45deg); }
.facts--more { padding: 6px 0 10px; }
.vars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vars li { display: grid; gap: 1px; font-size: 14px; }
.vars span { color: var(--slate); font-size: 13px; }
.case__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.case__demo { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: clamp(16px, 2vw, 24px); }
.case__demo[hidden] { display: none; }
.case__demo .demo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 900px) { .case__demo .demo { grid-template-columns: 1fr; } }
.demo__loading { position: absolute; z-index: 2; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: var(--r); background: var(--paper); font-weight: 600; font-size: 14px; }
.demo.is-gl-ready .demo__loading { display: none; }
.badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 4px; background: var(--lime); color: var(--ink); font: 500 11px/1.6 var(--mono); vertical-align: 2px; white-space: nowrap; }
:lang(th) .badge { font-size: 12px; }
.catalog__table .num { text-align: right; white-space: nowrap; }
.catalog__table td:nth-child(2), .catalog__table td:nth-child(3), .catalog__table td:nth-child(4) { color: #2E3A42; }
.more--note { border-top: 0; padding-top: 0; }
.more--note summary { font-size: 14px; color: var(--slate); min-height: 36px; }

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

/* интерактивные примеры */
.case--demo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1000px) { .case--demo { grid-template-columns: 1fr; } }
.demo { display: grid; gap: 14px; }
.demo__screen { background: var(--paper); }
.demo__screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__launch { position: absolute; right: 12px; bottom: 12px; z-index: 3; }
.demo.is-live .demo__launch { display: none; }
.demo.is-live .demo__screen > img { visibility: hidden; }
.demo.is-gl-ready .demo__screen > img { display: none; }
.gl-demo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.demo__screen .gl-demo { width: 100%; height: 100%; opacity: 1; pointer-events: auto; z-index: 1; }
.demo__callout { position: absolute; z-index: 4; left: 0; top: 0; transform: translate(18px, -50%); max-width: 200px; padding: 6px 10px; border-radius: 6px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 13px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 16px -8px rgba(13,21,28,.6); }
.demo__callout::after { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: var(--lime); transform: translateY(-50%) rotate(45deg); }
.marker { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: none; place-items: center; border: 0; border-radius: 50%; background: rgba(13,21,28,.18); cursor: pointer; padding: 0; }
.marker span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 500 12px/1 var(--mono); box-shadow: 0 0 0 2px var(--ink); }
.marker.is-placed { display: grid; }
.marker.is-next span { background: var(--lime); }
.marker.is-done span, .marker.is-early span { background: var(--ink); color: var(--paper); }
.marker.is-early span { box-shadow: 0 0 0 2px var(--order); }
.demo__panel { display: grid; gap: 12px; align-content: start; }
.demo__caption { font-weight: 700; font-size: 16px; }
.demo__state, .demo__ask { color: var(--slate); font-size: 15px; }
.demo__ask { color: var(--ink); font-weight: 600; }
.opts, .steps { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.opts[hidden] { display: none; }
.opt { width: 100%; min-height: 48px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 600 15px/1.35 var(--font); cursor: pointer; }
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt:disabled { cursor: default; }
.opt__m { font: 500 12px/1.4 var(--mono); }
:lang(th) .opt__m { font-size: 13px; }
.opt.is-right { border-color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }
.opt.is-right .opt__m { color: var(--ok); }
.opt.is-wrong { border-color: var(--err); box-shadow: inset 3px 0 0 var(--err); }
.opt.is-wrong .opt__m { color: var(--err); }
.opt.is-early { border-color: var(--order); box-shadow: inset 3px 0 0 var(--order); }
.opt.is-early .opt__m { color: var(--order); }
.opt.is-next { border-color: var(--ink); background: #F0F6DA; }
.step { grid-template-columns: auto 1fr auto; }
.step__n { font: 500 12px/1.3 var(--mono); color: var(--slate); white-space: nowrap; }
.step__n small { font-size: 11px; }
@media (max-width: 560px) { .step { grid-template-columns: 1fr auto; } .step__n { grid-column: 1 / -1; } }
.demo__note { padding: 10px 12px; border-radius: var(--r); background: var(--paper); border-left: 3px solid var(--ok); font-size: 14px; }
.demo__note.is-bad { border-left-color: var(--err); }
.demo__result { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.demo__rhead { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.demo [data-restart] { justify-self: start; }

/* ---------- каталог ---------- */
.catalog__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.catalog__filters label { font-weight: 600; font-size: 14px; }
.catalog__filters select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #9AA39C; border-radius: var(--r); background: var(--card); color: var(--ink); font: 400 15px/1.3 var(--font); }
.catalog__count { color: var(--slate); font-size: 14px; margin-bottom: 10px; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.catalog__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.catalog__table th { text-align: left; padding: 12px 14px; font-weight: 700; background: var(--soft); border-bottom: 1px solid var(--line); }
.catalog__table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.catalog__table tr:last-child td { border-bottom: 0; }
.catalog__table td:first-child { font-weight: 600; }
.catalog__table a { text-underline-offset: 3px; }
.catalog__table tr[hidden] { display: none; }
.catalog__empty { padding: 18px; color: var(--slate); }
@media (max-width: 860px) {
  .catalog__filters { grid-template-columns: 1fr; }
  .catalog__filters .ctl { justify-self: start; }
  .table-wrap { border: 0; background: none; overflow: visible; }
  .catalog__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .catalog__table, .catalog__table tbody, .catalog__table tr, .catalog__table td { display: block; }
  .catalog__table tr { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
  .catalog__table td { padding: 2px 0; border: 0; }
  .catalog__table td:nth-child(n+2) { color: var(--slate); font-size: 13px; }
  .catalog__table td.num { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .player__frame, .area { transition: none; }
  html { scroll-behavior: auto; }
}