/* ═══════════════════════════════════════════════════════════════════════════
   Falcera — общие стили внешнего контура.
   Токены из docs/02-brand-and-product.md §5, макет — brand/falcera_site_hero_dark.html.
   Один файл на все страницы: правка цвета или отступа применяется везде сразу.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Темы ─────────────────────────────────────────────────────────────────
   Светлая — значение по умолчанию. Тёмная включается двумя путями:
   системной настройкой (когда пользователь ничего не выбирал) и вручную
   через data-theme. Все цвета описаны токенами, поэтому переключение
   не требует дублирования правил в компонентах.

   Контраст обеих палитр проверен по WCAG AA на каждом фоне темы.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* поверхности */
  --surface:#F7F6F1; --surface-deep:#EFEDE6; --surface-raised:#ECEAE3;
  --line:#E4E1D8; --line-soft:#EAE7DE; --line-strong:#7E7869;   /* 3.65 */
  /* текст */
  --ink:#2E3945;        /* 9.76 */
  --ink-soft:#3D4855;   /* 7.73 */
  --muted:#55503F;      /* 6.70 */
  --muted-dim:#6B6554;  /* 4.83 */
  /* акценты */
  --gold:#80612D;       /* латунь как текст: 4.76 */
  --gold-fill:#B08D57;  /* латунь как заливка кнопки */
  --gold-bright:#C6A56E;
  --on-gold:#1F2A33;    /* текст на латунной кнопке: 4.73 */
  --slate:#46586A;
  --up:#276B4E;         /* 5.29 */
  --down:#A63B33;       /* 5.29 */
  /* составные */
  --header-bg:rgba(247,246,241,.85);
  --drawer-bg:rgba(247,246,241,.97);
  --gold-tint:rgba(176,141,87,.08);
  --gold-edge:rgba(176,141,87,.45);
  --hero-glow:rgba(176,141,87,.12);
  --hero-glow-2:rgba(70,88,106,.10);
  /* знак сокола: перо, второе крыло, латунная кромка */
  --mark-a:#2E3945; --mark-b:#5F6E7C; --mark-c:#B08D57;

  --voice:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --wrap:1180px;
}

/* тёмная палитра — одним набором, подключается в двух местах ниже */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#1F2A33; --surface-deep:#18222A; --surface-raised:#26313B;
    --line:#2C3742; --line-soft:#243039; --line-strong:#6B7A87;
    --ink:#F0ECE1; --ink-soft:#E4DFD3; --muted:#A2AAB1; --muted-dim:#949DA5;
    --gold:#C6A56E; --gold-fill:#C6A56E; --gold-bright:#D8BA85; --on-gold:#26313B;
    --up:#4FAF88; --down:#DA8177;
    --header-bg:rgba(24,34,42,.85);
    --drawer-bg:rgba(24,34,42,.97);
    --gold-tint:rgba(198,165,110,.07);
    --gold-edge:rgba(198,165,110,.4);
    --hero-glow:rgba(198,165,110,.10);
    --hero-glow-2:rgba(70,88,106,.16);
    --mark-a:#E9E4D7; --mark-b:#CFC9BA; --mark-c:#C6A56E;
  }
}
:root[data-theme="dark"]{
  --surface:#1F2A33; --surface-deep:#18222A; --surface-raised:#26313B;
  --line:#2C3742; --line-soft:#243039; --line-strong:#6B7A87;
  --ink:#F0ECE1; --ink-soft:#E4DFD3; --muted:#A2AAB1; --muted-dim:#949DA5;
  --gold:#C6A56E; --gold-fill:#C6A56E; --gold-bright:#D8BA85; --on-gold:#26313B;
  --up:#4FAF88; --down:#DA8177;
  --header-bg:rgba(24,34,42,.85);
  --drawer-bg:rgba(24,34,42,.97);
  --gold-tint:rgba(198,165,110,.07);
  --gold-edge:rgba(198,165,110,.4);
  --hero-glow:rgba(198,165,110,.10);
  --hero-glow-2:rgba(70,88,106,.16);
  --mark-a:#E9E4D7; --mark-b:#CFC9BA; --mark-c:#C6A56E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink-soft);
     font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

h1,h2,h3,h4{font-family:var(--voice);font-weight:400;color:var(--ink);margin:0}
h1{font-size:clamp(36px,5.4vw,58px);line-height:1.07;letter-spacing:.5px}
h2{font-size:clamp(25px,3.3vw,37px);line-height:1.16;letter-spacing:.4px}
h3{font-size:21px;letter-spacing:.3px}
p{margin:0}
.eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin:0}
.lead{font-size:16.5px;line-height:1.75;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .gold{color:var(--gold)}
.muted{color:var(--muted)}

/* ── бегущая строка ─────────────────────────────────────────────────────── */
.ticker{background:var(--surface-deep);border-bottom:.5px solid var(--line);
        overflow:hidden;height:38px;display:flex;align-items:center}
.ticker-track{display:flex;gap:38px;white-space:nowrap;padding-left:28px;
              animation:marquee 46s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick{display:inline-flex;align-items:center;gap:9px;font-size:12.5px}
.tick b{color:var(--muted);font-weight:500;letter-spacing:.4px}
.tick .px{font-family:var(--mono);color:var(--ink-soft);transition:color .5s}
.tick .px.flash-up{color:var(--up)} .tick .px.flash-down{color:var(--down)}
.tick .ch{font-family:var(--mono);font-size:11.5px}

/* ── шапка ──────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:var(--header-bg);
       backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
       border-bottom:.5px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.mark{display:flex;align-items:center;gap:12px;flex-shrink:0}
.mark svg{width:24px;height:26px;display:block}
.wordmark{font-family:var(--voice);font-size:20px;letter-spacing:5px;color:var(--ink)}
nav{display:flex;align-items:center;gap:26px}
.links{display:flex;gap:22px}
nav a{font-size:13.5px;color:var(--muted);transition:color .2s}
nav a:hover,nav a.active{color:var(--ink)}
nav a.active{color:var(--gold)}
.lang{display:flex;gap:2px;font-size:11px;letter-spacing:1px;color:var(--muted-dim)}
.lang button{background:none;border:none;color:var(--muted-dim);font:inherit;
             cursor:pointer;padding:2px 4px}
.lang button[aria-pressed="true"]{color:var(--gold)}

.btn{display:inline-block;font-size:14px;padding:11px 22px;border-radius:8px;cursor:pointer;
     border:.5px solid transparent;transition:background .2s,border-color .2s,color .2s}
.btn-gold{background:var(--gold-fill);color:var(--on-gold);font-weight:500}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ── герой ──────────────────────────────────────────────────────────────── */
.hero{position:relative;text-align:center;padding:86px 0 64px;overflow:hidden}
.hero.compact{padding:64px 0 46px}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(760px 420px at 50% -8%,var(--hero-glow),transparent 70%),
  radial-gradient(560px 320px at 50% 106%,var(--hero-glow-2),transparent 70%)}
.falcon{width:62px;height:66px;display:block;margin:0 auto}
.thread{width:.5px;height:38px;background:linear-gradient(var(--muted-dim),transparent);
        margin:8px auto 24px}
.hero h1{margin:18px 0 22px}
.hero .lead{max-width:560px;margin:0 auto 34px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}
.trust{border-top:.5px solid var(--line);padding-top:22px;display:flex;justify-content:center;
       gap:44px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-dim)}

/* ── секции ─────────────────────────────────────────────────────────────── */
section{padding:76px 0}
section.tight{padding:52px 0}
.sec-head{max-width:660px;margin-bottom:38px}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head p{color:var(--muted);margin-top:14px;font-size:15.5px}
.band{background:var(--surface-deep);border-top:.5px solid var(--line);
      border-bottom:.5px solid var(--line)}

/* ── карточки котировок ─────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:repeat(2,1fr);gap:10px}}
.qcard{background:var(--surface-deep);border:.5px solid var(--line);border-radius:12px;
       padding:18px 18px 14px;transition:border-color .3s}
.qcard:hover{border-color:var(--line-strong)}
.qcard .sym{font-size:11px;letter-spacing:2px;color:var(--muted-dim);text-transform:uppercase}
.qcard .val{font-family:var(--mono);font-size:25px;color:var(--ink);margin:9px 0 3px;
            transition:color .5s}
.qcard .val.flash-up{color:var(--up)} .qcard .val.flash-down{color:var(--down)}
.qcard .ch{font-family:var(--mono);font-size:12.5px}
.qcard svg{width:100%;height:34px;margin-top:10px;display:block}
.qcard .src{margin-top:9px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-dim)}
.qcard.off .val{color:var(--muted-dim)} .qcard.off svg{opacity:.45} .tick.off .px{color:var(--muted-dim)}
.live-note{margin-top:16px;font-size:13px;color:var(--muted-dim)}

/* ── столпы и карточки-плитки ───────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.pillar{background:var(--surface-deep);border:.5px solid var(--line);border-radius:12px;
        padding:26px 24px 24px;position:relative;overflow:hidden;
        transition:border-color .3s,transform .3s}
.pillar:hover{border-color:var(--gold);transform:translateY(-2px)}
.pillar .n{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:2px}
.pillar h3{margin:14px 0 4px}
.pillar .tag{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-dim)}
.pillar p{color:var(--muted);font-size:14.5px;margin-top:14px;line-height:1.7}
.pillar .more{display:inline-block;margin-top:16px;font-size:13px;color:var(--gold)}
.soon{position:absolute;top:20px;right:20px;font-size:10px;letter-spacing:1.5px;
      text-transform:uppercase;color:var(--muted-dim);border:.5px solid var(--line);
      border-radius:4px;padding:3px 7px}

/* ── таблицы ────────────────────────────────────────────────────────────── */
.board{background:var(--surface-deep);border:.5px solid var(--line);border-radius:12px;
       overflow:hidden}
.board-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-dim);
   font-weight:500;padding:14px 18px;border-bottom:.5px solid var(--line);
   text-align:left;white-space:nowrap}
th.r,td.r{text-align:right}
td{padding:13px 18px;border-bottom:.5px solid var(--line-soft);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--gold-tint)}
.codename{font-family:var(--mono);color:var(--ink);font-size:13.5px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:1px;
       text-transform:uppercase;color:var(--gold);border:.5px solid var(--gold-edge);
       border-radius:20px;padding:3px 9px;white-space:nowrap}
.badge.dim{color:var(--muted-dim);border-color:var(--line)}
.board-foot{padding:15px 18px;font-size:13px;color:var(--muted);
            border-top:.5px solid var(--line)}

/* ── шаги, принципы, факты ──────────────────────────────────────────────── */
.steps{display:grid;gap:2px;background:var(--line-soft);border:.5px solid var(--line-soft);
       border-radius:12px;overflow:hidden}
.step{background:var(--surface-deep);padding:24px 26px;display:grid;
      grid-template-columns:52px 1fr;gap:20px;align-items:start}
.step .i{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:2px;padding-top:5px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.7}

.facts{display:grid;gap:20px}
.fact{border-left:.5px solid var(--line);padding-left:18px}
.fact b{display:block;font-family:var(--mono);font-size:23px;color:var(--ink)}
.fact span{font-size:13px;color:var(--muted)}
.fact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}

/* ── сравнение двух колонок ─────────────────────────────────────────────── */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-col{background:var(--surface-deep);border:.5px solid var(--line);border-radius:12px;padding:24px}
.vs-col.bad{border-color:var(--down)}
.vs-col.good{border-color:var(--gold-edge)}
.vs-col h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;
           color:var(--muted-dim);font-family:var(--sans);font-weight:500;margin-bottom:16px}
.vs-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
         border-bottom:.5px solid var(--line-soft);font-size:14px}
.vs-line:last-child{border-bottom:none}
.vs-line span{color:var(--muted)}
.vs-line b{font-family:var(--mono);font-weight:400;color:var(--ink)}

/* ── блок кода / консоли ────────────────────────────────────────────────── */
.console{background:#141C23;border:.5px solid var(--line);border-radius:10px;
         padding:20px 22px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;
         line-height:1.8;color:var(--ink-soft);white-space:pre}
.console .c-gold{color:var(--gold)} .console .c-dim{color:var(--muted-dim)}
.console .c-up{color:var(--up)} .console .c-down{color:var(--down)}

/* ── формы ──────────────────────────────────────────────────────────────── */
.access{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
form{background:var(--surface-deep);border:.5px solid var(--line);border-radius:12px;padding:26px}
.seg{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.seg label{flex:1;min-width:96px;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;font-size:13px;padding:9px 8px;border-radius:8px;
          border:.5px solid var(--line);color:var(--muted);cursor:pointer;transition:.2s}
.seg input:checked+span{border-color:var(--gold);color:var(--gold);background:var(--gold-tint)}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
             color:var(--muted-dim);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--surface);border:.5px solid var(--line);
  border-radius:8px;color:var(--ink);font:15px var(--sans);padding:11px 13px;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:78px}
form .btn-gold{width:100%;margin-top:6px}
.form-note{font-size:12px;color:var(--muted-dim);margin-top:12px;line-height:1.6}
.form-msg{display:none;margin-top:14px;padding:12px 14px;border-radius:8px;font-size:13.5px;
          border:.5px solid rgba(198,165,110,.4);background:rgba(198,165,110,.08);color:var(--gold-bright)}

/* ── правовые тексты ────────────────────────────────────────────────────── */
.legal h2{margin:44px 0 16px}
.legal h3{font-size:18px;margin:26px 0 10px}
.legal p,.legal li{color:var(--muted);font-size:15px;line-height:1.8}
.legal ul{padding-left:20px;margin:10px 0}
.legal li{margin-bottom:7px}
.notice{border:.5px solid var(--gold-edge);background:var(--gold-tint);
        border-radius:10px;padding:18px 20px;color:var(--gold);font-size:14px;line-height:1.7}

/* ── подвал ─────────────────────────────────────────────────────────────── */
footer{background:var(--surface-deep);border-top:.5px solid var(--line);padding:52px 0 34px}
.foot-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;
          padding-bottom:28px;border-bottom:.5px solid var(--line)}
.foot-col h4{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-dim);
             margin:0 0 12px;font-weight:500;font-family:var(--sans)}
.foot-col a{display:block;font-size:13.5px;color:var(--muted);margin-bottom:8px;transition:color .2s}
.foot-col a:hover{color:var(--gold)}
.disclaimer{margin-top:24px;font-size:13px;line-height:1.75;color:var(--muted);max-width:780px}
.copy{margin-top:22px;font-size:11.5px;color:var(--muted-dim)}

/* ── появление при прокрутке ────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}

@media (max-width:960px){
  .versus{grid-template-columns:1fr}
  .access{grid-template-columns:1fr;gap:32px}
}
@media (max-width:860px){
  section{padding:56px 0}
  .trust{gap:22px}
  .step{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Арабский и письмо справа налево.

   Два отдельных вопроса, которые легко перепутать:
   1) язык (lang="ar") — шрифт и межбуквенные интервалы;
   2) направление (dir="rtl") — зеркалим отступы, выравнивание и бегущую строку.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{ --arabic:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif; }

[lang="ar"] body,
[lang="ar"] .lead,
[lang="ar"] p,
[lang="ar"] td,
[lang="ar"] li{ font-family:var(--arabic); }

/* заголовки: антиква не поддерживает арабский, берём тот же шрифт крупнее и легче */
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{
  font-family:var(--arabic); font-weight:300; letter-spacing:0;
}
[lang="ar"] h1{ line-height:1.25 }
[lang="ar"] h2{ line-height:1.35 }

/* арабское письмо связное: разрядка разрывает вязь, поэтому убираем её везде,
   кроме латинского вордмарка бренда */
[lang="ar"] .eyebrow,
[lang="ar"] th,
[lang="ar"] .badge,
[lang="ar"] .foot-col h4,
[lang="ar"] .pillar .tag,
[lang="ar"] .soon,
[lang="ar"] .qcard .sym,
[lang="ar"] .kpi span,
[lang="ar"] .fact span,
[lang="ar"] .vs-col h4{ letter-spacing:0 }
[lang="ar"] .eyebrow{ font-size:12px }

/* цифры и таблицы остаются латиницей — так привычнее в финансовой среде */
[lang="ar"] .num,[lang="ar"] .codename,[lang="ar"] .console{
  font-family:var(--mono); direction:ltr; unicode-bidi:isolate;
}

/* ── зеркалим раскладку ─────────────────────────────────────────────────── */

[dir="rtl"] th,[dir="rtl"] td{ text-align:right }
[dir="rtl"] th.r,[dir="rtl"] td.r{ text-align:left }

[dir="rtl"] .fact{ border-left:none; border-right:.5px solid var(--line);
                   padding-left:0; padding-right:18px }
[dir="rtl"] .legal ul{ padding-left:0; padding-right:20px }
[dir="rtl"] .soon{ right:auto; left:20px }
[dir="rtl"] .sec-head,[dir="rtl"] .legal{ text-align:right }

/* бегущая строка едет в другую сторону */
[dir="rtl"] .ticker-track{ padding-left:0; padding-right:28px;
                           animation-name:marquee-rtl }
@keyframes marquee-rtl{ from{transform:translateX(0)} to{transform:translateX(50%)} }

/* блок консоли — технический вывод с выравниванием по колонкам:
   держим его слева направо при любом языке, иначе таблица рассыпается */
[dir="rtl"] .console{ direction:ltr; text-align:left }

/* презентация: стрелки управления меняются местами по смыслу */
[dir="rtl"] .deck-nav button#prev::before{ content:"" }

@media (prefers-reduced-motion:reduce){
  [dir="rtl"] .ticker-track{ animation:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Доступность и мобильная навигация.
   ═══════════════════════════════════════════════════════════════════════════ */

/* видимый фокус клавиатуры: раньше его не было вовсе */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px
}
.seg input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px }

/* цель нажатия не меньше 40px — переключатель языков был 11px высотой */
.lang button{ min-width:32px; min-height:34px; border-radius:5px }
.lang button:hover{ color:var(--ink-soft) }

/* пропускаем навигацию с клавиатуры */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold-fill);
       color:var(--on-gold); padding:11px 18px; border-radius:0 0 8px 0; font-size:14px }
.skip:focus{ left:0 }

/* ── бургер и выдвижное меню ─────────────────────────────────────────────── */
.burger{ display:none; background:none; border:.5px solid var(--line-strong); color:var(--ink);
         width:40px; height:40px; border-radius:8px; cursor:pointer; padding:0;
         align-items:center; justify-content:center; flex-shrink:0 }
.burger svg{ width:18px; height:18px; display:block }
.burger:hover{ border-color:var(--gold); color:var(--gold) }

.drawer{ position:fixed; inset:0; z-index:70; background:var(--drawer-bg);
         backdrop-filter:blur(16px); display:none; flex-direction:column;
         padding:22px 28px; overflow-y:auto }
.drawer.open{ display:flex }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:34px }
.drawer nav{ flex-direction:column; align-items:stretch; gap:0 }
.drawer a{ font-size:19px; color:var(--ink-soft); padding:15px 0;
           border-bottom:.5px solid var(--line) }
.drawer a.active{ color:var(--gold) }
.drawer .lang{ margin:26px 0; font-size:14px; gap:6px }
.drawer .lang button{ font-size:14px; min-width:44px; min-height:44px;
                      border:.5px solid var(--line) }
.drawer .btn{ text-align:center; padding:15px }
/* «.drawer a» перебивает цвет золотой кнопки: возвращаем контрастный текст */
.drawer .btn-gold{ color:var(--on-gold) }

/* Шапка перестаёт помещаться в строку заметно раньше, чем начинается мобильная
   вёрстка: самому длинному набору пунктов — русскому — нужно 1152px. Поэтому
   меню сворачивается в бургер по ширине обёртки, а не по «телефонному» порогу.
   Кнопка темы остаётся в шапке: до неё не нужно открывать меню. */
@media (max-width:1180px){
  .links{ display:none }
  .burger{ display:flex }
  .head .lang{ display:none }
  .head .btn-gold{ display:none }
}

/* ── печать: сайт должен читаться и на бумаге ───────────────────────────── */
@media print{
  .ticker,.burger,.drawer,header{ display:none }
  body{ background:#fff; color:#1a1a1a }
  .band,.pillar,.tile,.board,.qcard{ background:none; border-color:#ccc }
  h1,h2,h3,h4,.num{ color:#000 }
  .lead,p,td{ color:#333 }
}


/* ── переключатель темы ─────────────────────────────────────────────────── */
.theme-btn{ background:none; border:.5px solid var(--line); color:var(--muted);
            width:34px; height:34px; border-radius:7px; cursor:pointer; padding:0;
            display:inline-flex; align-items:center; justify-content:center;
            transition:border-color .2s,color .2s; flex-shrink:0 }
.theme-btn:hover{ border-color:var(--gold); color:var(--gold) }
.theme-btn svg{ width:16px; height:16px; display:block }
/* показываем солнце в тёмной теме и луну в светлой — иконка обещает результат */
.theme-btn .sun{ display:none }
:root[data-theme="dark"] .theme-btn .sun,
[data-theme="dark"] .theme-btn .sun{ display:block }
:root[data-theme="dark"] .theme-btn .moon,
[data-theme="dark"] .theme-btn .moon{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{ display:block }
  :root:not([data-theme="light"]) .theme-btn .moon{ display:none }
}
.drawer .theme-btn{ width:44px; height:44px; margin-top:8px }

/* смена темы должна быть мгновенной и одновременной для всей страницы */
.theme-switching *,.theme-switching *::before,.theme-switching *::after{
  transition:none !important; animation:none !important }

/* блок консоли остаётся тёмным в обеих темах: это терминальный вывод */
.console{ background:#141C23; color:#E4DFD3; border-color:#2C3742 }