@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/749a308406a63378.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/1ab1ad55902b85eb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--color-bg:#ffffff;--color-surface:#f6f7f9;--color-surface-2:#eceff3;--color-text:#14171c;--color-text-muted:#555d6b;--color-border:#dde1e7;--color-primary:#1f5eff;--color-primary-contrast:#ffffff;--color-accent:#ffb020;--color-accent-contrast:#14171c;--color-focus:#1f5eff;--font-heading:"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-pill:999px;--container:1200px;--container-narrow:760px;--shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);--shadow-md:0 12px 32px -12px rgba(16,24,40,.22);--header-h:68px}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;text-rendering:optimizeLegibility}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary)}h1,h2,h3{font-family:var(--font-heading);line-height:1.15;margin:0 0 .5em;overflow-wrap:anywhere;letter-spacing:-.01em}h1{font-size:clamp(2rem,1.4rem + 3vw,3.6rem);letter-spacing:-.02em}h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.5rem)}h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}p{margin:0 0 1em}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:4px}.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-block-end:.75rem}.site-header__in{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}.nav{display:none;margin-inline-start:auto}.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}.nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none;font-weight:500}.nav a[aria-current=page]{background:var(--color-surface)}@media (hover:hover){.nav a:hover{background:var(--color-surface)}}.langs{display:flex;gap:2px;list-style:none;margin:0;padding:0}.langs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding-inline:8px;font-size:.85rem;font-weight:600;color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius-sm);text-transform:uppercase}.langs a[aria-current=true]{color:var(--color-text);background:var(--color-surface)}.menu{margin-inline-start:auto}.menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer}.menu>summary::-webkit-details-marker{display:none}.menu__panel{position:absolute;inset-inline:0;inset-block-start:var(--header-h);background:var(--color-bg);border-block-end:1px solid var(--color-border);padding:12px clamp(16px,4vw,32px) 20px;box-shadow:var(--shadow-md)}.menu__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}.menu__panel a{display:flex;align-items:center;min-height:48px;padding-inline:8px;color:var(--color-text);text-decoration:none;font-weight:500;border-radius:var(--radius-sm)}@media (min-width:960px){.nav{display:block}.menu{display:none}.langs{margin-inline-start:4px}}.hero__grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center}.hero__lead{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);color:var(--color-text-muted);max-width:40ch}.hero__points{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}.hero__points li{display:flex;gap:10px;align-items:flex-start;font-weight:500}.hero__points svg{flex:none;margin-block-start:3px;color:var(--color-primary)}.hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr}}.faq__a{padding:0 20px 18px;color:var(--color-text-muted)}.faq__a>:last-child{margin-block-end:0}.footer-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.footer-grid h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-block-end:14px}.mcta{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--color-bg);border-block-start:1px solid var(--color-border);box-shadow:0 -8px 24px -12px rgba(0,0,0,.25)}body{padding-block-end:76px}@media (min-width:960px){.mcta{display:none}body{padding-block-end:0}}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

picture.media-picture{display:contents}h1,h2,h3{overflow-wrap:anywhere}.dej-lg{display:block;height:36px;width:auto;max-width:190px;object-fit:contain}.dej-summary-sec{padding-block:clamp(16px,3vw,32px) 0}.dej-toc-sec{padding-block:clamp(12px,2vw,24px) 0}.dej-meta{font-size:.9rem;margin:.25em 0 1em}.table-wrap{overflow-x:auto}
/* =========================================================
   Core — reset, typography, shell, navigation, footer,
   buttons, links, focus, utilities and prose.
   Colours and fonts come from tokens.css.
   ========================================================= */

:root {
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --space: clamp(3rem, 6vw, 5rem);
  --speed: 200ms;
  --speed-fast: 140ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-header: 100;
  --z-backdrop: 110;
  --z-menu: 120;
  --line: #26262a;
}

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

html {
  background: var(--color-bg);
  color-scheme: dark;
  scrollbar-color: #3a3a3e var(--color-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
svg { display: block; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-primary); color: var(--color-primary-contrast); }

/* ---------------------- typography ---------------------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; color: var(--color-text); }

h1 {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.25rem);
  line-height: 1.25;
}

.title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.copy {
  max-width: 40rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* ------------------------ layout ------------------------ */
.container {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin-inline: auto;
}

.section { padding-block: var(--space); }
.center { text-align: center; }
.icon { width: 1.25rem; height: 1.25rem; }

.site-main { background: radial-gradient(ellipse 65% 40% at 50% 119%, var(--color-primary), transparent 75%); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dej-sk {
  position: absolute;
  z-index: 300;
  top: 0;
  left: 0;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 0.8125rem;
  transform: translateY(-130%);
  transition: transform var(--speed) var(--ease-out);
}
.dej-sk:focus-visible { transform: translateY(0); }

[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}
[data-icon] > svg { width: 100%; height: 100%; }

/* --------------------- site header --------------------- */
.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: 100rem;
  margin-inline: auto;
  padding: 0.5rem 1.25rem;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  max-width: 100%;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dej-mk { display: inline-flex; align-items: center; }
.dej-mk svg { width: 1.375rem; height: 1.375rem; }
.brand__name { white-space: nowrap; }

/* ------------------- language switcher ------------------- */
.language {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid #ffffff;
  border-radius: 3rem;
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.language .language__icon { width: 0.875rem; height: 0.875rem; }
.language .language__chevron { width: 0.625rem; height: 0.625rem; }
.language__code {
  font-size: inherit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --------------------- desktop nav --------------------- */
.header-language, .desktop-nav { display: none; }
.desktop-nav { align-items: center; gap: 1.75rem; }
.nav-links, .account-links { display: flex; align-items: center; }
.nav-links { gap: 1.75rem; }
.account-links { gap: 1.25rem; margin-left: 1.75rem; }
.nav-links a, .account-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.account-links a { color: var(--color-text-muted); }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* ------------------- language dropdown ------------------- */
.lang-menu { position: relative; }
.lang-menu > summary { cursor: pointer; list-style: none; }
.lang-menu > summary::marker { content: ""; }
.lang-menu > summary::-webkit-details-marker { display: none; }

.lang-menu__panel {
  position: absolute;
  z-index: var(--z-menu);
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 10rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.5);
}
.lang-list a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
.lang-list a[aria-current="true"] { background: var(--color-surface-2); }

/* --------------------- mobile menu --------------------- */
.mobile-menu { position: relative; }
.mobile-menu summary {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.mobile-menu summary::marker { content: ""; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary [data-icon] { width: 1.5rem; height: 1.5rem; }
.mobile-menu .menu-toggle__close { display: none; }
.mobile-menu[open] .menu-toggle__open { display: none; }
.mobile-menu[open] .menu-toggle__close { display: inline-flex; }

.mobile-nav {
  position: absolute;
  z-index: var(--z-menu);
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: min(20rem, calc(100vw - 2rem));
  padding: 0.75rem;
  background: #141416;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.6);
}
.mobile-nav__list { display: grid; gap: 0.125rem; }
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.mobile-nav__account {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.lang-menu--inline { margin-top: 0.5rem; }
.lang-menu--inline .lang-menu__panel {
  position: static;
  min-width: 0;
  margin-top: 0.5rem;
  box-shadow: none;
}
.lang-menu--inline .lang-list a { min-height: 2.5rem; font-size: 0.875rem; }

/* ------------------------- buttons ------------------------- */
.button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border: 1px solid #333336;
  border-radius: 999px;
  background: #1f1f22;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color var(--speed-fast) var(--ease-out),
    border-color var(--speed-fast) var(--ease-out),
    color var(--speed-fast) var(--ease-out);
}
.button [data-icon], .btn [data-icon] { width: 1rem; height: 1rem; }

.button-primary, .btn--primary {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--color-text);
}

/* -------------------------- footer -------------------------- */
.site-footer {
  padding: 2.5rem 0 max(2.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--color-bg);
}

.footer-inner {
  display: grid;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.footer-brand .brand { font-size: 0.9375rem; }
.footer-brand .dej-mk svg { width: 1.375rem; height: 1.375rem; }

.lang-menu--footer .lang-menu__panel {
  top: auto;
  bottom: calc(100% + 0.5rem);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.footer-bottom {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.footer-meta {
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
}
.footer-tagline {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.footer-copy {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  opacity: 0.75;
}

/* --------------------------- prose --------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-top: 2rem; }
.prose h3 { font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); margin-top: 1.75rem; }
.prose p, .prose li { color: var(--color-text-muted); line-height: 1.55; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.2em; }
.prose blockquote {
  padding-left: 1rem;
  border-left: 1px solid var(--color-primary);
  color: var(--color-text);
}
.prose .table-wrap { overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.prose th, .prose td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.prose th { color: var(--color-text); font-weight: 700; }

/* ------------------------ breakpoints ------------------------ */
@media (min-width: 30rem) {
  .button, .btn { padding: 0 1.5rem; }
}

@media (min-width: 64rem) {
  .footer-inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .footer-nav ul { justify-content: flex-end; }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem 3rem;
    margin-top: 2.5rem;
  }
  .footer-legal { flex: 1 1 auto; }
  .footer-meta { flex: 0 1 38rem; text-align: right; }}

@media (min-width: 75rem) {
  .header-language, .desktop-nav { display: flex; }
  .mobile-menu { display: none; }}

@media (hover: hover) {
  a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .button:hover, .btn:hover { background: #2a2a2e; border-color: #454549; text-decoration: none; }
  .button-primary:hover, .btn--primary:hover { background: #a81b28; border-color: transparent; }
  .brand:hover, .language:hover { text-decoration: none; }
  .nav-links a:hover, .account-links a:hover { text-decoration: underline; }
  .mobile-nav a:hover, .lang-list a:hover, .footer-nav a:hover,
  .footer-legal a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }}

a:active, summary:active { filter: brightness(0.9); }

@media (max-width: 48rem) {
  input, select, textarea { font-size: 16px; }}

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }}

@media (forced-colors: active) {
  .button, .btn, .mobile-menu summary { border: 1px solid ButtonText; }}
/* =========================================================
   Home — first screen and every narrative block.
   Colours and fonts come from tokens.css.
   ========================================================= */

:root {
  --home-block: clamp(3.5rem, 6.5vw, 6rem);   /* 56 px на телефоне → 96 px на десктопе */
  --red: #a71d2c;
  --red-band: #a71d2c;
  --red-bright: #e5183c;
  --red-bright-hover: #cf1132;
  --card-bg: #141416;
  --card-line: #2a2a2a;
  --hairline: #2a2a2a;
  --ink: #0f0f10;
  --ink-muted: #cfcfcf;
}

/* --------------------------- hero --------------------------- */
.hero {
  padding-top: clamp(0.75rem, 2.8vw, 2.5rem);   /* 40 px до карточки на 1440 */
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hero-media {
  position: relative;
  width: 100%;
  max-width: 53.75rem;        /* 860 px на 1440 */
  aspect-ratio: 16 / 9;       /* 480 px высоты при ширине 860, 200 px на 390 */
  margin-inline: auto;
  border-radius: 16px;
  background: #0a0a0b;
  overflow: hidden;
  box-shadow: 0 1rem 1.5rem rgb(0 0 0 / 0.45);
}
.hero-media__img,
.hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------- broadcast overlay ------------------- */
.hero-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hero-live {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.hero-live__badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--red-bright);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero-live__viewers {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-chat {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  width: 18.75rem;                     /* 300 px */
  max-width: calc(100% - 32px);
  height: 11.25rem;                    /* 180 px */
  padding: 12px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.hero-chat__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.hero-chat__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 16px;
}
.hero-chat__name,
.hero-chat__text {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-chat__name {
  flex: 0 1 auto;
  color: var(--red-bright);
  font-weight: 700;
}
.hero-chat__text {
  flex: 1 1 6ch;
  color: var(--ink-muted);
}
.hero-chat__item--tip .hero-chat__text { color: #e6e6e6; }

.hero-tools {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.hero-tool--tip {
  border: 1px solid #2f7d52;
  background: rgb(0 0 0 / 0.7);
  color: #35c07a;
}
.hero-tool--private {
  background: #2ecc71;
  color: #08210f;
}

.hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  max-width: 53.75rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
}
.hero-actions .button { width: 100%; }

.hero-intro {
  max-width: 53.75rem;
  margin: clamp(1.75rem, 3.5vw, 3rem) auto 0;
  text-align: center;
}
.hero-intro h1 {
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
}
.hero-intro .copy { max-width: 40rem; margin: 1rem auto 0; }

/* ---------------------- immersive block ---------------------- */
.immersive {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: var(--home-block);
}
.immersive__icon { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; }
.immersive__body { min-width: 0; }
.immersive .title {
  font-size: clamp(1.875rem, 1.2rem + 2.1vw, 3rem);
  line-height: 1.15;
}
.immersive .copy {
  max-width: 28.75rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ------------------------- categories ------------------------- */
.categories {
  max-width: 55rem;
  padding-block: var(--home-block);
  text-align: center;
}
.categories__art {
  display: block;
  width: clamp(4.5rem, 7vw, 6.25rem);   /* до 100 px */
  height: auto;
  margin: 0 auto 24px;
  color: var(--red-bright);
  filter:
    drop-shadow(0 0 30px rgb(229 24 60 / 0.85))
    drop-shadow(0 0 60px rgb(229 24 60 / 0.55));
}
.categories .title {
  max-width: 20rem;                    /* 320 px → «Endless» / «categories» */
  margin: 0 auto 24px;
  font-size: clamp(2rem, 1.1rem + 2.2vw, 2.75rem);   /* 44 px на десктопе */
  line-height: 1.08;
  text-align: center;
}
.categories .copy {
  max-width: 35rem;                    /* 560 px */
  margin: 0 auto 32px;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.categories .button,
.categories .btn {
  min-height: 2rem;
  padding: 0 1rem;
  border-color: var(--hairline);
  border-radius: 999px;
  background: #1c1c1f;
  font-size: 0.8125rem;
}

/* -------------------------- controls -------------------------- */
.controls { padding-block: clamp(3rem, 6vw, 6rem) var(--home-block); }
.controls > .container > h2 {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.control-stage { position: relative; }
.control-list { padding: 0; margin: 0; list-style: none; }
.control-row { padding-block: clamp(1rem, 1.8vw, 1.25rem); }
.control-row--accent { background: var(--red-band); }

.control-copy {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);   /* иконка 24 px в колонке */
  align-items: center;
  gap: 1.5rem;
}
.control-copy__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-inline: auto;
  color: #ffffff;
}
.control-copy h3 {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;      /* 18 px */
  font-weight: 600;
  line-height: 1.25;
}
.control-copy .copy {
  max-width: 24rem;
  font-size: 0.875rem;      /* 14 px */
  line-height: 1.45;
}
.control-row--accent .copy { color: rgb(255 255 255 / 0.78); }
.control-row--accent .control-copy__icon { color: #ffffff; }

.control-preview {
  width: calc(100% - var(--gutter) * 2);
  max-width: 30rem;
  margin: 1.5rem auto 0;
}
.control-preview__img,
.control-preview img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: 16px;
}

/* ------------------------- invitation ------------------------- */
.invitation {
  max-width: 50rem;
  padding-block: var(--home-block);
}
.invitation h2 { line-height: 1.15; }
.invitation .copy { margin: 1.5rem auto 2.5rem; }

/* -------------------------- personal -------------------------- */
.personal { padding-top: var(--home-block); }
.personal-visual { max-width: 62.5rem; margin-inline: auto; }
.personal-title {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 4rem) 0.75rem;
  text-align: center;
}
.personal-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(92%, 32.5rem);       /* 520 px */
  height: min(92%, 16.25rem);     /* 260 px */
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(180 20 40 / 0.55), transparent 70%);
  pointer-events: none;
}
.personal-title__heading {
  max-width: 14ch;
  margin-inline: auto;
  font-size: clamp(2rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.15;
  text-wrap: balance;
}
.personal-art {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(58%, 22rem);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3rem rgb(224 30 55 / 0.5));
}
.personal-media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: -2rem;
  overflow: hidden;
  border-radius: 16px;
  background: #0f0f11;
  box-shadow: 0 1.125rem 3rem rgb(0 0 0 / 0.4);
}
.personal-media__img,
.personal-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefits-band {
  padding-block: clamp(2rem, 4vw, 3rem);
  background: var(--red-band);
}
.benefits {
  display: grid;
  gap: 1.25rem;
  max-width: 62.5rem;
  padding: 0;
  list-style: none;
}
.benefits li { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.benefit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: #ffffff;
}
.benefit-icon svg { width: 1.125rem; height: 1.125rem; }
.benefits p {
  min-width: 0;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ----------------------------- VR ----------------------------- */
.vr { padding-block: var(--home-block); }

.vr-icon {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 2rem;
  border-radius: 50%;
  background: #1b1b3a;
  box-shadow: 0 0 40px rgb(60 110 255 / 0.6);
}
.headset-icon {
  width: clamp(2.5rem, 5vw, 4rem);    /* 64 px */
  height: auto;
  color: #4d6dff;
}

.vr-stage {
  position: relative;
  isolation: isolate;
  max-width: 90rem;
  margin-inline: auto;
  padding-top: 1rem;
}
.vr-heading {
  position: relative;
  z-index: 2;
  max-width: 31.25rem;
  margin-inline: auto;
  text-align: center;
}
.vr-heading .copy { max-width: 24rem; margin: 1rem auto 0; }

.vr-scene {
  position: relative;
  width: 100%;
  max-width: 50rem;
  margin: 2rem auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
}
.vr-scene img,
.vr-scene video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-panels { display: flex; justify-content: center; margin-top: 2rem; }
.vr-chat { width: min(100%, 22.875rem); }
.vr-cta { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* --------------- VR chat mock (decorative replica) --------------- */
.vr-chat {
  padding: 0.75rem;
  border: 1px solid var(--card-line);
  border-radius: 0.75rem;
  background: var(--card-bg);
}
.vr-chat__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.vr-chat__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5183c, #8b1f8f);
}
.vr-chat__name { color: var(--color-text); font-size: 0.8125rem; font-weight: 600; }
.vr-chat__meta { margin-left: auto; color: var(--color-text-muted); font-size: 0.6875rem; }
.vr-chat__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  padding: 0.25rem;
  margin-bottom: 0.625rem;
  border-radius: 0.5rem;
  background: #0d0d0e;
}
.vr-chat__tab {
  padding: 0.375rem;
  border-radius: 0.375rem;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-align: center;
}
.vr-chat__tab--active { background: #242427; color: var(--color-text); }
.vr-chat__list { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.vr-chat__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
}
.vr-chat__user { color: var(--red-bright); font-weight: 700; white-space: nowrap; }
.vr-chat__text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; color: #d8d8dc; }
.vr-chat__item--tip .vr-chat__text { color: #e6e6e6; }
.vr-chat__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: #1f1f22;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.vr-chat__send {
  margin-left: auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #3a3a3e;
}
.vr-chat__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.vr-chat__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid #35c07a;
  border-radius: 0.375rem;
  color: #35c07a;
  font-size: 0.75rem;
  font-weight: 600;
}
.vr-chat__btn--private { border-color: #f0c53c; color: #f0c53c; }

/* -------------------------- community -------------------------- */
.community {
  max-width: 35.6875rem;
  padding-block: var(--home-block);
}
.community__art { width: clamp(6rem, 12vw, 8.75rem); margin: 0 auto 1.5rem; }
.community-label {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
.community h2 { margin-bottom: 1rem; }
.community .copy { max-width: 32rem; margin-inline: auto; }

/* ----------------------------- wild ----------------------------- */
.wild {
  padding-block: var(--home-block);
  background: radial-gradient(ellipse 42% 62% at 10% 50%, rgb(167 29 44 / 0.32), transparent 72%);
}
.wild-card {
  display: grid;
  gap: 1.25rem;
  max-width: 58.125rem;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  border: 1px solid var(--red);
  border-radius: 16px;
  background: #121214;
  overflow: hidden;
}
.megaphone {
  width: clamp(9rem, 24vw, 17rem);
  margin-inline: auto;
}
.wild h2 {
  margin-bottom: 0.875rem;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.wild-copy .copy { max-width: 30rem; }

.wild-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  pointer-events: none;
}

/* ------------------------------ FAQ ------------------------------ */
.faq { padding-block: var(--home-block); }
.faq__title {
  max-width: 22ch;
  margin: 0 auto 24px;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  text-align: center;
}
.faq-list {
  display: grid;
  gap: 0.625rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

[data-js="faq-item"] {
  position: relative;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 6px;
  background: #17171a;
  transition: background-color var(--speed-fast) var(--ease-out);
}
[data-js="faq-item"] > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 2.75rem 0.5rem 1rem;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
[data-js="faq-item"] > summary::marker { content: ""; }
[data-js="faq-item"] > summary::-webkit-details-marker { display: none; }

.faq-chevron,
.faq-list .faq-chevron {
  position: absolute;
  top: 22px;
  right: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  color: #8a8a8f;
  transform: translateY(-50%);
  transition: transform var(--speed) var(--ease-out), color var(--speed-fast) var(--ease-out);
  pointer-events: none;
}
[data-js="faq-item"][open] .faq-chevron {
  color: var(--color-text);
  transform: translateY(-50%) rotate(90deg);
}

[data-js="faq-panel"] { overflow: hidden; transition: height var(--speed) var(--ease-out); }
[data-js="faq-panel"] .prose { padding: 0 1rem 1rem; }
[data-js="faq-panel"] .prose p,
[data-js="faq-panel"] .prose li {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
[data-js="faq-item"][open] [data-js="faq-panel"] { animation: faq-drop var(--speed) var(--ease-out); }
@keyframes faq-drop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------- motion & detail ----------------------- */
.immersive__dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.35); }
}

.categories__art { animation: infinity-breathe 5.4s ease-in-out infinite; }
@keyframes infinity-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.personal-title::before { animation: heart-glow 5.4s ease-in-out infinite; }
@keyframes heart-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.vr-icon { animation: vr-glow 4.6s ease-in-out infinite; }
@keyframes vr-glow {
  0%, 100% { box-shadow: 0 0 30px rgb(60 110 255 / 0.45); }
  50% { box-shadow: 0 0 40px rgb(60 110 255 / 0.75); }
}

.community__art { animation: heart-float 6s ease-in-out infinite; }
@keyframes heart-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.5rem) scale(1.02); }
}

/* ---------------------- reveal on scroll ----------------------
   Контент виден по умолчанию: блоки не «пропадают»,
   если скрипт анимации не отработал.                          */
.has-reveal [data-reveal] { opacity: 1; transform: none; }

/* ------------------------- breakpoints ------------------------- */
@media (max-width: 47.99rem) {
  /* оверлеи героя: панель чата над кнопками, ничего не обрезается */
  .hero-live { top: 10px; left: 10px; }
  .hero-live__badge,
  .hero-live__viewers { font-size: 11px; }

  .hero-chat {
    left: 12px;
    top: 36px;
    bottom: auto;
    width: min(15rem, calc(100% - 24px));
    max-width: none;
    height: auto;
    max-height: calc(100% - 5rem);
    padding: 9px 10px;
  }
  .hero-chat__list { gap: 3px; }
  .hero-chat__item { font-size: 10px; line-height: 14px; }

  .hero-tools { right: 12px; bottom: 12px; gap: 6px; }
  .hero-tool { height: 26px; padding: 0 10px; font-size: 10px; }
}

@media (max-width: 22.5rem) {
  /* самые узкие экраны: хвост ленты чата убираем, чтобы не резать строки */
  .hero-chat__item:nth-child(n + 4) { display: none; }}

@media (min-width: 30rem) {
  .hero-actions {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 0.75rem;
  }
  .hero-actions .button { width: auto; }}

@media (min-width: 48rem) {
  .immersive { flex-direction: row; align-items: flex-start; gap: 1.75rem; }
  .immersive__icon { width: 5rem; height: 5rem; }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .wild-card {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 3rem;
  }
  .megaphone { width: 100%; margin: 0; }}

@media (min-width: 64rem) {
  .control-copy { width: calc(50% - 3rem); }

  .control-preview {
    position: absolute;
    top: -1.5rem;
    right: max(0px, calc((100% - 75rem) / 2));
    width: min(46%, 43.75rem);
    max-width: none;
    height: calc(100% + 3rem);
    margin: 0;
  }
  .control-preview__img,
  .control-preview img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 16px 0 0 16px;
  }

  .vr-stage { min-height: 62rem; padding-top: 2rem; }
  .vr-scene {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    max-width: none;
    margin: 0;
    height: 62%;
    border-radius: 0.75rem;
  }
  .vr-panels { position: relative; z-index: 2; justify-content: flex-end; margin-top: 12rem; }
  .vr-heading { margin-inline: auto; }}

@media (hover: hover) {
  [data-js="faq-item"]:hover { background: #1c1c20; }
  [data-js="faq-item"] > summary:hover { text-decoration: none; }
  [data-js="faq-item"] > summary:hover .faq-chevron { color: var(--color-text); }
  .hero-tool--private:hover { background: #29b765; }
  .hero-tool--tip:hover { border-color: #3ad48b; }}

/* Reduced motion is handled globally in styles.core.css */
/* =========================================================
   Content — inner pages: page header, prose blocks, features,
   steps, FAQ accordion, CTA, contacts, posts, summary.
   Colours and fonts come from tokens.css.
   ========================================================= */

/* --------------------------- shared --------------------------- */
.muted { color: var(--color-text-muted); }

.section--alt {
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

#faq, #contacts { scroll-margin-top: 6rem; }

.section__head {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}
.section__head h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section__head .muted {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* ------------------------- page header ------------------------- */
.page-header {
  padding-top: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.crumbs { margin-bottom: 1.5rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: "/";
  margin-right: 0.25rem;
  color: #5a5a5f;
}
.crumbs a,
.crumbs span {
  display: inline-flex;
  align-items: center;
  color: #8a8a90;
  font-size: 0.75rem;
  line-height: 1.4;
}

.page-header__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.page-header h1 {
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.page-header__lead {
  max-width: 30rem;
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}
.btn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.btn-row .btn { width: 100%; }

.page-header__media {
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 1.5rem rgb(0 0 0 / 0.4);
}
.page-header__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* ------------------------ text / prose ------------------------ */
[data-role="text"] > .container > h2 {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  text-align: center;
}
[data-role="text"] .prose { margin-inline: auto; }

.prose--legal p,
.prose--legal li { font-size: 0.875rem; }

/* -------------------------- features -------------------------- */
.cards { display: grid; gap: 1rem; }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-text);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }
.card h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
}
.card p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ---------------------------- steps ---------------------------- */
.steps {
  display: grid;
  gap: 1rem;
  max-width: 50rem;
  margin-inline: auto;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 1.5rem;
  left: 1.25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
}
.steps p {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ----------------------------- FAQ ----------------------------- */
.faq-acc {
  display: grid;
  gap: 0.5rem;
  max-width: 37.5rem;
  margin-inline: auto;
}

[data-js="faq-item"],
[data-js="accordion-item"] {
  position: relative;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  transition: background-color var(--speed-fast) var(--ease-out);
}
[data-js="faq-item"][open],
[data-js="accordion-item"][open] { background: color-mix(in srgb, var(--color-text) 11%, transparent); }

[data-js="faq-item"] > summary,
[data-js="accordion-item"] > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
[data-js="faq-item"] > summary::-webkit-details-marker,
[data-js="accordion-item"] > summary::-webkit-details-marker { display: none; }
[data-js="faq-item"] > summary::marker,
[data-js="accordion-item"] > summary::marker { content: ""; }

.faq-acc__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  transition: transform var(--speed) var(--ease-out), color var(--speed-fast) var(--ease-out);
}
[data-js="faq-item"][open] .faq-acc__chevron,
[data-js="accordion-item"][open] .faq-acc__chevron {
  color: var(--color-text);
  transform: rotate(90deg);
}

[data-js="faq-panel"],
[data-js="accordion-panel"] {
  overflow: hidden;
  transition: height 220ms var(--ease-out);
}
.faq-acc__a .prose { padding: 0 1.25rem 1.25rem; }
.faq-acc__a .prose > * + * { margin-top: 0.75rem; }
.faq-acc__a .prose p,
.faq-acc__a .prose li {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ----------------------------- CTA ----------------------------- */
.cta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 70% 90% at 50% 115%, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-text) 6%, transparent);
  text-align: center;
}
.cta-box__body { max-width: 42rem; }
.cta-box h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}
.cta-box p {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* --------------------------- contacts --------------------------- */
.contact-grid { display: grid; gap: 1rem; }

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.contact-item > span {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.contact-item a,
.contact-item p {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.contact-item a { width: fit-content; text-decoration: underline; text-underline-offset: 0.2em; }

/* ------------------------ posts / related ------------------------ */
.dej-posts { display: grid; gap: 1.75rem; }

.dej-post {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.dej-post__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
}
.dej-post__tag {
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-primary) 28%, transparent);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.dej-post__link {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}
.dej-post__text {
  font-size: 0.9375rem;
  line-height: 1.55;
}
.dej-post__date {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.dej-posts__more { margin-top: 2.5rem; text-align: center; }
.dej-posts__more a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ---------------------------- summary ---------------------------- */
.dej-summary {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--color-primary);
  border-radius: 1rem;
  background:
    radial-gradient(120% 100% at 20% 50%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 65%),
    color-mix(in srgb, var(--color-text) 5%, transparent);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.dej-summary__title {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
}
.dej-summary ul { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.dej-summary li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.dej-summary li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ------------------------- breakpoints ------------------------- */
@media (min-width: 30rem) {
  .btn-row { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 0.75rem; }
  .btn-row .btn { width: auto; }
}

@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dej-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

@media (min-width: 64rem) {
  .page-header__grid:has(> .page-header__media) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dej-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-box {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }}

@media (hover: hover) {
  .card { transition: background-color var(--speed-fast) var(--ease-out); }
  .card:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
  .dej-post__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .contact-item a:hover { color: var(--color-text-muted); }
  .dej-posts__more a:hover,
  [data-js="faq-item"] > summary:hover,
  [data-js="accordion-item"] > summary:hover {
    background: color-mix(in srgb, var(--color-text) 9%, transparent);
    text-decoration: none;
  }}

/* Reduced motion is handled globally in styles.core.css */
/* =========================================================
   Blog — post cards, related strip, takeaways panel,
   article body, on-page contents and reading progress.
   Colours and fonts come from tokens.css via CSS variables.
   ========================================================= */

/* ------------------------ section head ------------------------ */
.section__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section__head > h2 { max-width: 26ch; }

[data-block="related"].section--alt { background: var(--color-surface); }

/* ------------------------- post grid ------------------------- */
.dej-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.dej-post {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--speed-fast) var(--ease-out),
    background-color var(--speed-fast) var(--ease-out),
    transform var(--speed-fast) var(--ease-out);
}

.dej-post__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.dej-post__img[src=""],
.dej-post__img:not([src]) { display: none; }

.dej-post__tag {
  align-self: flex-start;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}

.dej-post__link {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.dej-post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.dej-post__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.dej-post__date {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
  padding-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.dej-post__date > span + span::before {
  content: "\00b7";
  margin-right: 0.5rem;
}

/* ----------------------- «all articles» ----------------------- */
.dej-posts__more { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.dej-posts__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  transition:
    background-color var(--speed-fast) var(--ease-out),
    border-color var(--speed-fast) var(--ease-out);
}

/* ------------------------ takeaways panel ------------------------ */
.dej-summary-sec { padding-block: var(--space); }
.dej-summary {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface);
  background-image: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 62%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.dej-summary__title {
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.2;
}
.dej-summary ul { display: grid; gap: 0.75rem; }
.dej-summary li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.dej-summary li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ------------------------ article column ------------------------ */
.dej-article { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--space); }
.dej-article__col { max-width: 45rem; margin-inline: auto; }
.dej-article__col > h2 { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.dej-article .prose {
  max-width: none;
  font-size: clamp(1.0625rem, 1.1vw, 1.1875rem);
  line-height: 1.7;
}
.dej-article .prose > * + * { margin-top: 1.25rem; }
.dej-article .prose p,
.dej-article .prose li {
  color: var(--color-text-muted);
  line-height: 1.7;
}
.dej-article .prose strong { color: var(--color-text); font-weight: 700; }
.dej-article .prose em { color: var(--color-text); }
.dej-article .prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
}
.dej-article .prose h3 {
  margin-top: 2rem;
  font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
  line-height: 1.25;
}
.dej-article .prose ul,
.dej-article .prose ol { padding-left: 1.35rem; }
.dej-article .prose ul { list-style: disc; }
.dej-article .prose ol { list-style: decimal; }
.dej-article .prose li + li { margin-top: 0.5rem; }
.dej-article .prose li::marker { color: var(--color-primary); }
.dej-article .prose a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.dej-article .prose blockquote {
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 1px solid var(--color-primary);
  color: var(--color-text);
}
.dej-article .prose blockquote p { color: var(--color-text); }
.dej-article .prose hr {
  margin-block: 2rem;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.dej-article .prose figure { margin-block: 1.75rem; }
.dej-article .prose img,
.dej-article .prose figure img { border-radius: var(--radius-md); }
.dej-article .prose figcaption {
  margin-top: 0.625rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.dej-article .prose code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.9em;
}
.dej-article .prose pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.dej-article .prose pre code { padding: 0; border: 0; background: none; }
.dej-article .prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.dej-article .prose th,
.dej-article .prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.dej-article .prose th { color: var(--color-text); font-weight: 700; }
.dej-article .prose td { color: var(--color-text-muted); }
.dej-article [id] { scroll-margin-top: 1.5rem; }

/* ------------------- meta row under the H1 ------------------- */
.dej-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.dej-meta > * + *::before {
  content: "\00b7";
  margin-right: 0.75rem;
}

/* -------- article page header (page-header next to meta) -------- */
.page-header:has(+ .dej-meta) {
  max-width: 45rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}
.page-header:has(+ .dej-meta) h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.page-header:has(+ .dej-meta) .copy { margin-top: 0.75rem; max-width: 60ch; }
.page-header:has(+ .dej-meta) + .dej-meta { margin-top: 0.75rem; }

/* --------------------- table of contents --------------------- */
.dej-toc-sec { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.dej-toc {
  max-width: 45rem;
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.dej-toc__title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.dej-toc ol { counter-reset: ns-toc; display: grid; gap: 0.125rem; }
.dej-toc ol li { counter-increment: ns-toc; }
.dej-toc ol li a {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
  transition:
    color var(--speed-fast) var(--ease-out),
    background-color var(--speed-fast) var(--ease-out);
}
.dej-toc ol li a::before {
  content: counter(ns-toc) ".";
  flex: 0 0 auto;
  min-width: 1.25rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.dej-toc ol li a.is-current,
.dej-toc ol li a[aria-current="true"] {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.dej-toc ol li a.is-current::before,
.dej-toc ol li a[aria-current="true"]::before { color: var(--color-primary); }

/* ----------------------- empty blog ----------------------- */
.dej-blog-empty {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}
.dej-blog-empty > * + * { margin-top: 0.5rem; }

/* -------------------- reading progress bar -------------------- */
.dej-progress {
  position: fixed;
  z-index: 250;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.dej-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  box-shadow: 0 0 0.5rem var(--color-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* --------------------------- breakpoints --------------------------- */
@media (min-width: 48rem) {
  .dej-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dej-posts:not(.dej-posts--compact) > .dej-post:first-child { grid-column: 1 / -1; }
  .dej-posts:not(.dej-posts--compact) > .dej-post:first-child .dej-post__img { aspect-ratio: 21 / 9; }
  .dej-posts:not(.dej-posts--compact) > .dej-post:first-child .dej-post__link { font-size: clamp(1.375rem, 2.6vw, 2rem); }
  .dej-posts:not(.dej-posts--compact) > .dej-post:first-child .dej-post__text {
    max-width: 70ch;
    font-size: 1rem;
    -webkit-line-clamp: 4;
  }
}

@media (min-width: 64rem) {
  .dej-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dej-toc { position: sticky; top: 1rem; }}

/* ------------------------- related strip ------------------------- */
.dej-posts--compact .dej-post {
  gap: 0.625rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.dej-posts--compact .dej-post__link { font-size: 1.0625rem; }
.dej-posts--compact .dej-post__text {
  font-size: 0.9375rem;
  -webkit-line-clamp: 2;
}
.dej-posts--compact .dej-post__img { border-radius: var(--radius-sm); }

@media (max-width: 47.99rem) {
  .dej-posts--compact {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 78%);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.75rem;
  }
  .dej-posts--compact > .dej-post { scroll-snap-align: start; }}

@media (min-width: 48rem) {
  .dej-posts--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

@media (min-width: 64rem) {
  .dej-posts--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }}

/* ---------------------------- hover ---------------------------- */
@media (hover: hover) {
  .dej-post:hover {
    background-color: var(--color-surface-2);
    border-color: var(--color-text-muted);
    transform: translateY(-2px);
  }
  .dej-posts--compact .dej-post:hover {
    background: none;
    border-color: transparent;
    transform: translateY(-2px);
  }
  .dej-post:hover .dej-post__link { text-decoration: underline; text-underline-offset: 0.2em; }
  .dej-posts__more a:hover {
    background: var(--color-surface-2);
    border-color: var(--color-text-muted);
    text-decoration: none;
  }
  .dej-toc ol li a:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
    text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {@media (hover:hover){.dej-post:hover,.dej-posts--compact .dej-post:hover{ transform: none; }}}
/* =========================================================
   Fix layer — подключается последним.
   Точечные правила: шапка и бренд, навигация, длинные тексты,
   внутренние страницы. Цвета и шрифты — из tokens.css.
   ========================================================= */

:root {
  --accent: #e5183c;
  --accent-hover: #cf1132;
  --band: #a71d2c;
  --hairline: #2a2a2a;
  --muted-ink: #cfcfcf;
}

/* ------------------------- шапка / бренд ------------------------- */
.site-header .header-inner {
  align-items: center;
  gap: 0.75rem 2rem;
  min-height: 4.5rem;                                /* 72 px */
  max-width: 100rem;
  padding: 0.5rem clamp(1rem, 8.3vw, 7.5rem);        /* 120 px на 1440 */
}

.site-header .brand {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 2.75rem;
}
.site-header .dej-mk { flex: 0 0 auto; }
.site-header .dej-mk svg { width: 1.75rem; height: 1.75rem; }   /* 28 px */
.site-header .brand__name {
  min-width: 0;
  font-size: 1.375rem;                               /* 22 px */
  font-weight: 700;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.site-header .brand-group { gap: 1.5rem; min-width: 0; }

/* ----------------------- навигация и локаль ----------------------- */
.site-header .nav-links { gap: 1.75rem; }
.site-header .account-links { gap: 1.75rem; margin-left: 1.75rem; }
.site-header .nav-links a,
.site-header .account-links a,
.site-header .nav-link {
  color: var(--muted-ink);
  font-size: 0.8125rem;                              /* 13 px */
  font-weight: 500;
  white-space: nowrap;
}
.site-header .account-links a { color: var(--muted-ink); }

.site-header .language {
  min-width: 3.75rem;                                /* 60 px */
  min-height: 1.75rem;                               /* 28 px */
  padding: 0 0.625rem;
  border: 1px solid #3a3a3f;
  border-radius: 999px;
}
.site-header .language .language__icon { width: 0.875rem; height: 0.875rem; }
.site-header .language .language__chevron { width: 0.625rem; height: 0.625rem; }

/* -------------------- страховка от обрезки текста -------------------- */
.hero-chat,
.hero-chat__list,
.hero-chat__item,
.hero-chat__name,
.hero-chat__text,
.vr-chat,
.vr-chat__item,
.vr-chat__user,
.vr-chat__text,
.brand,
.brand__name,
.brand-group,
.control-copy .copy,
.benefits p,
.dej-post,
.dej-post__link,
.dej-post__text {
  min-width: 0;
  max-width: 100%;
}

.hero-chat,
.vr-chat { overflow-wrap: anywhere; }

.hero-chat__item,
.hero-chat__name,
.hero-chat__text,
.vr-chat__item,
.vr-chat__user,
.vr-chat__text,
.brand__name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-chat__item,
.hero-chat__list,
.vr-chat__item { flex-wrap: wrap; }

/* -------------------- узкие экраны: не рвём шапку -------------------- */
@media (max-width: 30rem) {
  .site-header .header-inner { padding-inline: 1rem; }
  .site-header .brand__name { font-size: 1.125rem; }
  .site-header .dej-mk svg { width: 1.375rem; height: 1.375rem; }
  .site-header .brand { gap: 0.375rem; min-height: 2.5rem; }
}

/* --------------- внутренние страницы: заголовок без линейки --------------- */
.page-header h1 { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 64rem) {
  .page-header__grid:has(> .page-header__media) {
    grid-template-columns: minmax(0, 1fr) 35rem;     /* изображение 560 px */
    gap: 3.5rem;
  }}

/* ------------------------ типографика контента ------------------------ */
.crumbs { margin-bottom: 1.5rem; }
.crumbs a,
.crumbs span { color: #8a8a8f; font-size: 0.8125rem; line-height: 1.4; }
.crumbs li + li::before { color: #5a5a5f; }

.prose { max-width: 45rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  margin-top: 2rem;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.75rem);   /* до 28 px */
  line-height: 1.2;
}
.prose h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;                                  /* 20 px */
  line-height: 1.3;
}
.prose p,
.prose li {
  max-width: 45rem;
  color: var(--muted-ink);
  font-size: 0.9375rem;                                /* 15 px */
  line-height: 1.6;                                    /* 24 px */
}
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: #8a8a8f; }
.prose .table-wrap { overflow-x: auto; }
.prose table { max-width: 45rem; }
.prose th,
.prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.prose th { color: var(--color-text); font-size: 0.875rem; font-weight: 600; }

/* ------------------------- внешние ссылки/фокус ------------------------- */
@media (hover: hover) {
  .site-header .brand:hover .brand__name { text-decoration: none; }
  .site-header .language:hover { text-decoration: none; border-color: #55555c; }
}
:root{--color-bg:#0E0B12;--color-surface:#17131C;--color-surface-2:#241C2B;--color-text:#FFFFFF;--color-text-muted:#ADA6B5;--color-border:#2E2635;--color-primary:#E0295E;--color-primary-contrast:#FFFFFF;--color-accent:#7A4DFF;--color-accent-contrast:#FFFFFF;--color-focus:#E0295E;--font-heading:'Inter', system-ui, sans-serif;--font-body:'Inter', system-ui, sans-serif;--radius-sm:10px;--radius-md:18px;--radius-lg:999px;--radius-pill:999px;--container:75rem;--container-narrow:53.75rem;--shadow-sm:0 1rem 1.5rem rgba(0, 0, 0, 0.4);--shadow-md:0 1.125rem 3rem rgba(0, 0, 0, 0.4);--header-h:5rem;--font-display:'Inter', var(--font-heading)}