/* Миктера · темы и UX. Подключается ПОСЛЕДНИМ, после a4.css.
   1) новые элементы: кнопка темы, «Пропустить», индикатор истории, нижняя панель, «Наверх», магнитные кнопки, успех формы;
   2) <html data-theme="dark"> — палитра A4-dark: фон #0E1013, поверхности #16191E / #1E2329, границы #2A2F37,
      текст #ECEEF1 / #A2A9B4, оранжевый #F26B0F только акцент. «Оранжевая» (data-theme="orange" или без атрибута) = макет. */

/* ============ 1. НОВЫЕ ЭЛЕМЕНТЫ ============ */

/* кнопка темы: луна в оранжевой, солнце в тёмной */
.theme-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; display: grid; place-items: center; transition: background-color 0.25s; }
.theme-btn:hover { background: rgba(127, 127, 127, 0.16); }
.theme-btn .ic-sun { display: none; }
:root[data-theme='dark'] .theme-btn .ic-moon { display: none; }
:root[data-theme='dark'] .theme-btn .ic-sun { display: block; }

/* «Пропустить ↓» и индикатор глав внутри липкой сцены */
.story-skip { position: absolute; z-index: 5; right: var(--pad); top: 82px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid currentColor; color: var(--stage-fg); background: rgba(127, 127, 127, 0.1); text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 0.35s, background-color 0.25s, transform 0.35s var(--ease); }
.story-skip:hover { background: rgba(127, 127, 127, 0.24); }
.story-skip span { display: inline-block; transition: transform 0.35s var(--ease); }
.story-skip:hover span { transform: translateY(2px); }
.story-skip.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
.story-skip:focus-visible { outline-color: currentColor; }
.story-progress { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; color: var(--stage-fg);
  background: linear-gradient(90deg, transparent calc(20% - 1px), var(--stage-bg-tick, rgba(127, 127, 127, 0.55)) calc(20% - 1px) 20%, transparent 20%) 0 0 / 20% 100%, rgba(127, 127, 127, 0.18); }
.story-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: currentColor; opacity: 0.85; }

/* липкая нижняя панель на мобильных */
.mbar { display: none; }
.totop { position: fixed; z-index: 85; right: 16px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-l); background: var(--white); color: var(--ink); place-items: center; box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.35s, visibility 0.35s, transform 0.45s var(--ease), bottom 0.35s var(--ease), background-color 0.25s, color 0.25s; }
.totop { display: grid; }
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--orange); border-color: var(--orange); color: #151618; }
.toast { transition: bottom 0.35s var(--ease), right 0.35s var(--ease); }
html.totop-on .toast { right: 76px; }

@media (max-width: 720px) {
  .mbar { position: fixed; z-index: 58; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(21, 22, 24, 0.94); border-top: 1px solid rgba(244, 241, 236, 0.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateY(105%); visibility: hidden; transition: transform 0.45s var(--ease), visibility 0.45s; }
  .mbar.show { transform: none; visibility: visible; }
  .mbar .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; color: #151618; }
  .mbar .btn-line { color: #ECEEF1; border-color: rgba(244, 241, 236, 0.5); }
  .mbar .btn-line:hover { background: #ECEEF1; color: #151618; border-color: #ECEEF1; }
  /* всё плавающее поднимается над панелью и друг над другом */
  .cookie { bottom: calc(16px + var(--mbar-h, 0px)); transition: bottom 0.35s var(--ease); }
  .toast { bottom: calc(16px + var(--mbar-h, 0px)); right: 16px; }
  html.totop-on .toast { right: 16px; bottom: calc(76px + var(--mbar-h, 0px) + var(--cookie-h, 0px)); }
  .totop { right: 14px; bottom: calc(18px + var(--mbar-h, 0px) + var(--cookie-h, 0px)); width: 46px; height: 46px; }
  .story-skip { top: 76px; min-height: 34px; padding: 0 12px; }
}

/* магнитные кнопки: смещение задаёт app.js (--mx/--my), только мышь */
@media (hover: hover) and (pointer: fine) {
  .btn[data-mag] { transition: transform 0.18s ease-out, background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.35s var(--ease); }
  .btn[data-mag]:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }
}

/* «Наверх» не закрывает ссылку в подвале */
.foot-bottom { padding-right: max(var(--pad), 76px); }

/* успех формы заявки */
.form { position: relative; }
.form.is-sent > :not(.form-ok) { display: none; }
.form-ok { display: none; }
.form-ok:not([hidden]) { display: grid; }
.form-ok { justify-items: start; align-content: center; gap: 12px; min-height: 340px; padding: 8px 0; background: none; border-radius: 0; font-weight: 400; outline: none; }
.form.is-sent .form-ok { animation: okIn 0.6s var(--ease); }
.form-ok-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: #151618; box-shadow: 0 0 0 10px rgba(242, 107, 15, 0.18); }
.form-ok-ic svg path { stroke-dasharray: 30; stroke-dashoffset: 0; animation: tick 0.6s var(--ease) 0.2s backwards; }
.form-ok-h { font: 500 2rem/1.05 var(--display); letter-spacing: -0.03em; margin-top: 10px; }
.form-ok-t { color: var(--dim-l); font-size: 1.05rem; max-width: 24rem; }
.form-ok .btn { margin-top: 10px; color: var(--ink); }
.form-ok .btn:hover { color: var(--paper); }
@keyframes okIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes tick { from { stroke-dashoffset: 30; } }

@media (prefers-reduced-motion: reduce) {
  .story-skip, .totop, .mbar { transition: none; }
  .form.is-sent .form-ok, .form-ok-ic svg path { animation: none; }
}

/* ============ 2. ТЁМНАЯ ТЕМА ============ */
:root[data-theme='dark'] {
  color-scheme: dark;
  --orange-ink: #ff8a3d;
  --ink: #eceef1;
  --graphite: #16191e;
  --graphite-2: #1e2329;
  --graphite-3: #2a2f37;
  --paper: #0e1013;
  --paper-2: #1e2329;
  --white: #16191e;
  --light: #eceef1;
  --steel: #a2a9b4;
  --dim-l: #a2a9b4;
  --dim-d: #a2a9b4;
  --line-l: #2a2f37;
  --line-d: #2a2f37;
  --on-accent: #151618;
  --surface-2: #1e2329;
}

/* кнопки: оранжевая остаётся акцентом с тёмным текстом; «чёрная» становится светлой */
:root[data-theme='dark'] .btn-accent,
:root[data-theme='dark'] .a4 .btn-accent,
:root[data-theme='dark'] .a4-sub-act .btn-accent { background: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .btn-accent:hover,
:root[data-theme='dark'] .a4 .btn-accent:hover,
:root[data-theme='dark'] .a4-sub-act .btn-accent:hover { background: var(--orange-hi); }
:root[data-theme='dark'] .btn-ink { background: #eceef1; color: #0e1013; }
:root[data-theme='dark'] .btn-ink:hover { background: #fff; box-shadow: 0 14px 30px -14px rgba(236, 238, 241, 0.35); }
:root[data-theme='dark'] .btn-line:hover,
:root[data-theme='dark'] .sec-dark .btn-line:hover { background: #eceef1; color: #0e1013; border-color: #eceef1; }
:root[data-theme='dark'] .skip { color: #0e1013; }

/* шапка, объявление, мега-меню */
:root[data-theme='dark'] .announce { background: var(--surface-2); border-bottom: 1px solid var(--line-d); }
:root[data-theme='dark'] .hdr-in { border-color: rgba(236, 238, 241, 0.2); }
:root[data-theme='dark'] .hdr.scrolled .hdr-in,
:root[data-theme='dark'] .hdr.menu-open .hdr-in { background: rgba(22, 25, 30, 0.9); border-color: #2a2f37; }
:root[data-theme='dark'] .mega { border-color: #2a2f37; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); }
:root[data-theme='dark'] .mega li a:hover { background: var(--surface-2); }
:root[data-theme='dark'] .nav-foot { background: #16191e; border-top-color: #2a2f37; }
:root[data-theme='dark'] .mega-ic-a4 { background: #eceef1; }

/* аккордеон, формы */
:root[data-theme='dark'] .acc-btn[aria-expanded='true'] .acc-i,
:root[data-theme='dark'] .a4-sub.open .acc-i { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .form { background: var(--surface-2); border: 1px solid #2a2f37; }
:root[data-theme='dark'] .fld input, :root[data-theme='dark'] .fld select, :root[data-theme='dark'] .fld textarea, :root[data-theme='dark'] .inp { background: #0e1013; border-color: #2a2f37; color: var(--ink); }
:root[data-theme='dark'] .fld input::placeholder, :root[data-theme='dark'] .fld textarea::placeholder { color: #7d8591; }
:root[data-theme='dark'] .fld input:focus, :root[data-theme='dark'] .fld select:focus, :root[data-theme='dark'] .fld textarea:focus, :root[data-theme='dark'] .inp:focus { border-color: var(--orange); }
:root[data-theme='dark'] .form-err, :root[data-theme='dark'] .a4-err { color: #ff9a8f; }
:root[data-theme='dark'] .form-ok-t { color: var(--dim-l); }
:root[data-theme='dark'] .form-ok .btn:hover { color: #0e1013; }
:root[data-theme='dark'] .win .inp, :root[data-theme='dark'] .win .fld select { background: #0e1013; border-color: #2a2f37; }

/* подвал, cookie, уведомление, плавающие */
:root[data-theme='dark'] .foot { background: #0a0c0f; border-top: 1px solid #2a2f37; }
:root[data-theme='dark'] .foot-bottom { border-top-color: #2a2f37; }
:root[data-theme='dark'] .cookie { background: rgba(30, 35, 41, 0.94); border: 1px solid #2a2f37; }
:root[data-theme='dark'] .toast { background: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .mbar { background: rgba(22, 25, 30, 0.94); border-top-color: #2a2f37; }
:root[data-theme='dark'] .totop { background: var(--surface-2); border-color: #2a2f37; color: var(--ink); }
:root[data-theme='dark'] .totop:hover { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .form-ok-ic { color: var(--on-accent); }
:root[data-theme='dark'] .story-progress { --stage-bg-tick: rgba(14, 16, 19, 0.9); }
:root[data-theme='dark'] .story-progress i { background: var(--orange); opacity: 1; }

/* история: без оранжевой заливки — главы тёмные (цвета фона даёт story.js) */
:root[data-theme='dark'] .story { --stage-fg: #eceef1; }
:root[data-theme='dark'] .stage-bg::after, :root[data-theme='dark'] .stage-wipe::after { opacity: 0.18; }
:root[data-theme='dark'] .stage-wipe::before { background: var(--orange); }
:root[data-theme='dark']:not(.story-on) [data-tone='orange'] { background: #0e1013; color: var(--ink); }
:root[data-theme='dark']:not(.story-on) [data-tone='paper'] { background: #12151a; color: var(--ink); }
:root[data-theme='dark']:not(.story-on) [data-tone='graphite'] { background: #16191e; color: var(--ink); }
:root[data-theme='dark']:not(.story-on) .ch-hero { background: transparent; }
:root[data-theme='dark']:not(.story-on) .story-stage { background: #0e1013; }
:root[data-theme='dark'] .clients { border-top-color: #2a2f37; }
:root[data-theme='dark'] .client { color: #151618; background: #eceef1; }
:root[data-theme='dark'] .client:hover { background: #fff; }
:root[data-theme='dark'] [data-go='5'] i { background: var(--orange-hi) !important; }
:root[data-theme='dark'] .stage-lines .ln-h, :root[data-theme='dark'] .stage-lines .ln-v { opacity: 0.1; }

/* главная */
:root[data-theme='dark'] .words .w { color: rgba(236, 238, 241, 0.2); }
:root[data-theme='dark'] .words .w.on { color: var(--ink); }
:root[data-theme='dark'] .bp-ring { border-color: rgba(236, 238, 241, 0.22); }
:root[data-theme='dark'] .bp-r3 { border-color: rgba(236, 238, 241, 0.1); }
:root[data-theme='dark'] .bp-axis { background: rgba(236, 238, 241, 0.16); }
:root[data-theme='dark'] .blueprint img { filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.5)); }
:root[data-theme='dark'] .why-card { background: var(--surface-2); color: var(--ink); border: 1px solid #2a2f37; border-top: 2px solid var(--orange); }
:root[data-theme='dark'] .why-list { border-top-color: #2a2f37; }
:root[data-theme='dark'] .why-card :focus-visible, :root[data-theme='dark'] .cta :focus-visible { outline-color: var(--orange-hi); }
:root[data-theme='dark'] .shelf-list a::before { background: var(--surface-2); }
:root[data-theme='dark'] .shelf-list a:hover span, :root[data-theme='dark'] .shelf-list a:hover em { color: var(--orange-hi); }
:root[data-theme='dark'] .pt { background: #eceef1; border-color: #2a2f37; }
:root[data-theme='dark'] .pt a:hover { background: #fff; }
:root[data-theme='dark'] .pt-t { color: #151618; }
:root[data-theme='dark'] .pt small { color: #4b515a; }
:root[data-theme='dark'] .cta { background: #16191e; color: var(--ink); border-top: 1px solid var(--orange); border-bottom: 1px solid #2a2f37; }
:root[data-theme='dark'] .cta-lines i { opacity: 0.12; }
:root[data-theme='dark'] .cta-fig img { filter: drop-shadow(0 44px 40px rgba(0, 0, 0, 0.6)); }

/* A4 */
:root[data-theme='dark'] .a4 { background: #16191e; color: var(--ink); border-top: 1px solid #2a2f37; border-bottom: 1px solid #2a2f37; }
:root[data-theme='dark'] .a4 .sec-label { color: var(--orange-hi); }
:root[data-theme='dark'] .a4 .sec-lead { color: var(--dim-l); }
:root[data-theme='dark'] .a4-nav, :root[data-theme='dark'] .a4-tab { border-color: #2a2f37; }
:root[data-theme='dark'] .a4-tab::before { background: var(--surface-2); }
:root[data-theme='dark'] .a4-tab[aria-selected='true'] { color: var(--ink); box-shadow: inset 3px 0 0 var(--orange); }
:root[data-theme='dark'] .a4-tab:focus-visible { outline-color: var(--orange-hi); }
:root[data-theme='dark'] .a4-panel { background: var(--surface-2); border: 1px solid #2a2f37; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.8); }
:root[data-theme='dark'] .a4-items li { background: #0e1013; }
:root[data-theme='dark'] .win-dark { background: #0e1013; border-color: #2a2f37; }
:root[data-theme='dark'] .a4-call { background: #0e1013; border: 1px solid #2a2f37; color: var(--ink); }
:root[data-theme='dark'] .a4t-grid { border-color: #2a2f37; }
:root[data-theme='dark'] .a4t { border-color: #2a2f37; }
:root[data-theme='dark'] .a4t a::before { background: var(--surface-2); }
:root[data-theme='dark'] .a4t a:hover, :root[data-theme='dark'] .a4t a:focus-visible { color: var(--ink); }
:root[data-theme='dark'] .a4t a:hover i { color: var(--orange-hi); }

/* каталог */
:root[data-theme='dark'] .cat-hero { background: radial-gradient(ellipse 42% 58% at 75% 48%, #1e242c 0%, transparent 72%), linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.2) 100%), #0e1013; color: var(--ink); --stage-fg: #eceef1; }
:root[data-theme='dark'] .cat-hero .stage-lines { color: #eceef1; }
:root[data-theme='dark'] .switch button[aria-selected='true'] { background: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .switch button:hover:not([aria-selected='true']) { background: var(--surface-2); }
:root[data-theme='dark'] .cat:hover, :root[data-theme='dark'] .pop:hover { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.85); }
:root[data-theme='dark'] .round { border-color: #2a2f37; }
:root[data-theme='dark'] .round:hover { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .strip-call { background: var(--surface-2); color: var(--ink); border: 1px solid #2a2f37; border-top: 2px solid var(--orange); }
:root[data-theme='dark'] .strip-call i { color: var(--orange-hi); }
:root[data-theme='dark'] .step:first-child .step-n,
:root[data-theme='dark'] .step:hover .step-n { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
:root[data-theme='dark'] .win { background: linear-gradient(180deg, rgba(236, 238, 241, 0.04), rgba(236, 238, 241, 0.015)); }
:root[data-theme='dark'] .cat-img, :root[data-theme='dark'] .pop-img { background: #1e2329; }
:root[data-theme='dark'] .mega-ic { background: #1e2329; }