/* ══ Страница 404 (по макету Figma, 05.10.2026) ═════════════════════
   Крупное «404» слева, персонаж разводит руками справа, ниже три плитки-выхода. */

.ds-page--n404{padding-bottom:40px}
.ds-n404__krosh{padding:28px 56px 0}
.ds-n404__krosh .ds-kroshki{margin:0}
.ds-n404__hero{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);align-items:center;gap:16px;
  padding:16px 28px 0}
.ds-n404__slova{display:grid;gap:12px;padding-bottom:32px}
.ds-n404__chislo{margin:0;font:600 300px/260px var(--ds-font-display);letter-spacing:-.02em}
.ds-n404__zag{margin:0;font:600 86px/85px var(--ds-font-display);letter-spacing:-.01em;text-transform:uppercase}
.ds-n404__lid{margin:0;color:var(--ds-gray);font:400 19px/29px var(--ds-font-text)}
.ds-n404__lico{display:block;justify-self:end;width:560px;max-width:100%;height:470px;object-fit:contain}

/* три плитки-выхода */
.ds-n404__kuda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:28px;
  border-top:1px solid var(--ds-line)}
.ds-n404__plitka{display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:28px;
  border:1px solid var(--ds-line);border-radius:24px;background:var(--ds-bg-card);color:inherit;
  text-decoration:none;transition:border-color .18s ease}
.ds-n404__plitka:hover{border-color:var(--ds-blue)}
.ds-n404__krug{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--ds-badge);
  color:var(--ds-blue)}
.ds-n404__teksty{display:grid;gap:8px;margin-top:14px}
.ds-n404__razdel{color:var(--ds-gray);font:400 16px/22px var(--ds-font-text)}
.ds-n404__nazv{font:600 28px/32px var(--ds-font-display);text-transform:uppercase}
.ds-n404__opis{color:var(--ds-gray);font:400 16px/24px var(--ds-font-text)}
.ds-n404__strelka{margin-top:auto;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ds-line);
  border-radius:50%;color:var(--ds-ink);transition:background .18s ease,color .18s ease,border-color .18s ease}
.ds-n404__plitka:hover .ds-n404__strelka{background:var(--ds-blue);border-color:var(--ds-blue);color:#fff}

/* планшет */
@media (max-width:1199px){
  .ds-n404__krosh{padding:28px 28px 0}
  .ds-n404__hero{grid-template-columns:minmax(0,1fr) 360px;padding:16px 28px 0}
  .ds-n404__slova{gap:12px;padding-bottom:32px}
  .ds-n404__chislo{font-size:220px;line-height:190px}
  .ds-n404__zag{font-size:60px;line-height:60px}
  .ds-n404__lid{font-size:17px;line-height:26px}
  .ds-n404__lico{width:360px;height:302px}
  .ds-n404__kuda{gap:16px;padding:28px}
}

/* телефон: персонаж под текстом, плитки строками «значок | текст | стрелка» */
@media (max-width:809px){
  .ds-n404__krosh{padding:20px 20px 0}
  .ds-n404__hero{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 20px 0}
  .ds-n404__slova{gap:12px;padding-bottom:8px}
  .ds-n404__chislo{font-size:150px;line-height:130px}
  .ds-n404__zag{font-size:42px;line-height:41px}
  .ds-n404__lid{font-size:16px;line-height:22px}
  .ds-n404__lico{justify-self:stretch;width:100%;height:294px}
  .ds-n404__kuda{grid-template-columns:1fr;gap:12px;padding:20px}
  .ds-n404__plitka{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:20px}
  .ds-n404__krug{flex:none;width:56px;height:56px}
  .ds-n404__teksty{flex:1;margin-top:0;min-width:0}
  .ds-n404__nazv{font-size:22px;line-height:26px}
  .ds-n404__opis{font-size:15px;line-height:21px}
  .ds-n404__strelka{flex:none}
}

/* тёмная тема: персонаж на белой скруглённой плашке, как на главной (карточки-направления не меняются) */
:root[data-theme="dark"] .ds-n404__lico{box-sizing:border-box;padding:12px;border-radius:24px;background:var(--ds-кадр)}
@media (max-width:809px){
  :root[data-theme="dark"] .ds-n404__lico{border-radius:18px}
}

/* Первый экран: кадр на чистом белом фоне (без вырезки: у вырезки оставались «лужа» и рваный пол).
   В светлой теме фон страницы белый, в тёмной кадр лежит на белой плашке. */
.ds-n404__lico{background:#fff}