/* ============================================================================
   HARMONYAI — ОБЩИЕ СТИЛИ СТАТИЧЕСКИХ СТРАНИЦ
   Используют: landing.html, about.html, contacts.html, api-docs.html,
   api-dashboard.html.

   Чат (index.html) сюда не подключается: у него собственный монолит стилей и
   тёмная тема. Здесь — светлая витрина, как в help.html и subscribe.html.

   ЕДИНАЯ СИСТЕМА АНИМАЦИЙ живёт в одном блоке (см. «АНИМАЦИИ»). Правило одно:
   двигаем только transform и opacity. Ни width, ни height, ни top/left — их
   изменение заставляет браузер пересчитывать раскладку на каждом кадре, и на
   телефоне это видно как рывки.

   Длительности и кривые взяты из index.html, чтобы витрина и чат ощущались
   одним продуктом: 150 мс на появление, 110 мс на исчезновение,
   cubic-bezier(.22,.61,.36,1) — та же кривая, что у меню чата.
   ============================================================================ */

/* ===== ТОКЕНЫ ============================================================= */
:root{
  --bg:#ffffff;
  --bg-soft:#fafaf9;
  --bg-sunk:#f4f4f2;
  --text:#111113;
  --text-2:#5f6169;
  --text-3:#8a8d95;
  --border:#e6e6e4;
  --border-strong:#d6d6d3;
  --accent:#111113;              /* акцент — графитовый, без ярких цветов */
  --accent-text:#ffffff;
  --link:#1f6feb;
  --ok:#16a34a;
  --warn:#b45309;
  --warn-bg:#fffbeb;
  --warn-border:#fde68a;
  --err:#dc2626;
  --code-bg:#f6f7f9;
  --shadow-sm:0 1px 2px rgba(17,17,19,.05);
  --shadow-md:0 8px 24px rgba(17,17,19,.08);
  --shadow-lg:0 18px 48px rgba(17,17,19,.14);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --wrap:1120px;
  --wrap-narrow:760px;

  /* Анимации — единственный источник значений для всех страниц */
  --anim-in:150ms;
  --anim-out:110ms;
  --anim-panel:280ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ===== БАЗА =============================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
/* scroll-padding-top — отступ для «липкой» шапки: без него переход по
   внутренней ссылке (/#pricing, /api#reference) прячет заголовок раздела
   под шапкой, и кажется, что попал не туда. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px;}

/* Пропустить к содержимому — для клавиатуры и скринридеров */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-text);
  padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 22px;}
.section{padding:76px 0;}
.section + .section{border-top:1px solid var(--border);}
.section-soft{background:var(--bg-soft);}
.center{text-align:center;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;}
.nowrap{white-space:nowrap;}
.hidden{display:none !important;}

/* ===== ТИПОГРАФИКА ======================================================== */
h1,h2,h3,h4{line-height:1.18;letter-spacing:-0.021em;font-weight:680;}
h1{font-size:clamp(34px,5.2vw,56px);letter-spacing:-0.032em;}
h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-0.026em;}
h3{font-size:19px;}
h4{font-size:16px;}
p{color:var(--text-2);}
.lead{font-size:clamp(17px,2vw,20px);color:var(--text-2);line-height:1.5;}
.eyebrow{
  font-size:12px;font-weight:640;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);
}
.section-head{max-width:720px;margin-bottom:40px;}
.section-head h2{margin-bottom:12px;}
.section-head.center{margin-left:auto;margin-right:auto;}

/* ===== КНОПКИ ============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:560;cursor:pointer;white-space:nowrap;
  background:var(--bg-sunk);color:var(--text);
  transition:transform var(--anim-out) var(--ease),
             background-color var(--anim-in) var(--ease),
             border-color var(--anim-in) var(--ease),
             box-shadow var(--anim-in) var(--ease),
             opacity var(--anim-in) var(--ease);
}
.btn:hover{background:var(--border);}
.btn:active{transform:scale(.972);}
.btn-primary{background:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:#2a2a2e;box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;border-color:var(--border-strong);}
.btn-outline:hover{background:var(--bg-sunk);border-color:var(--text-3);}
.btn-ghost{background:transparent;}
.btn-ghost:hover{background:var(--bg-sunk);}
.btn-lg{padding:15px 26px;font-size:16px;}
.btn-sm{padding:8px 14px;font-size:14px;}
.btn-danger{background:transparent;border-color:var(--border-strong);color:var(--err);}
.btn-danger:hover{background:#fef2f2;border-color:#fca5a5;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}

/* ===== ШАПКА ============================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 22px;
  height:64px;display:flex;align-items:center;gap:18px;
}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-0.02em;}
.brand-mark{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:var(--accent);color:var(--accent-text);
  display:grid;place-items:center;font-size:14px;font-weight:800;
}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:14px;}
.site-nav a{
  padding:8px 13px;border-radius:999px;font-size:15px;color:var(--text-2);
  transition:background-color var(--anim-in) var(--ease),color var(--anim-in) var(--ease);
}
.site-nav a:hover{background:var(--bg-sunk);color:var(--text);}
.site-nav a[aria-current="page"]{color:var(--text);font-weight:560;}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}

/* Гамбургер — только на узких экранах */
.nav-toggle{
  display:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--border);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;
  transition:background-color var(--anim-in) var(--ease);
}
.nav-toggle:hover{background:var(--bg-sunk);}
.nav-toggle span{
  display:block;width:17px;height:1.6px;background:var(--text);border-radius:2px;
  position:relative;transition:transform var(--anim-in) var(--ease),opacity var(--anim-out) var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--text);border-radius:2px;
  transition:transform var(--anim-in) var(--ease);
}
.nav-toggle span::before{top:-5.5px;}
.nav-toggle span::after{top:5.5px;}
.nav-toggle[aria-expanded="true"] span{transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(-90deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-90deg);opacity:0;}

/* ===== ГЕРОЙ ============================================================== */
.hero{padding:96px 0 84px;}
.hero-inner{max-width:820px;}
.hero h1{margin-bottom:20px;}
.hero .lead{margin-bottom:32px;max-width:640px;}
.hero-note{margin-top:22px;font-size:14px;color:var(--text-3);}

/* ===== СЕТКА КАРТОЧЕК ===================================================== */
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;
  transition:transform var(--anim-in) var(--ease),
             box-shadow var(--anim-in) var(--ease),
             border-color var(--anim-in) var(--ease);
}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.card h3{margin-bottom:8px;}
.card p{font-size:15px;}
.card-icon{
  width:36px;height:36px;border-radius:10px;margin-bottom:14px;
  background:var(--bg-sunk);display:grid;place-items:center;
}
.card-icon svg{width:19px;height:19px;stroke:var(--text);stroke-width:1.7;fill:none;}

/* ===== ШАГИ =============================================================== */
.steps{counter-reset:step;display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));}
.step{position:relative;padding-top:52px;}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;
  width:34px;height:34px;border-radius:999px;
  background:var(--accent);color:var(--accent-text);
  display:grid;place-items:center;font-size:15px;font-weight:680;
}
.step h3{margin-bottom:6px;}
.step p{font-size:15px;}

/* ===== FAQ (аккордеон) ==================================================== */
.faq{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;border:none;cursor:pointer;text-align:left;
  padding:20px 2px;font-size:17px;font-weight:560;
  transition:color var(--anim-in) var(--ease);
}
.faq-q:hover{color:var(--text-2);}
.faq-q .chev{
  flex-shrink:0;width:18px;height:18px;stroke:var(--text-3);stroke-width:1.9;fill:none;
  transition:transform var(--anim-in) var(--ease);
}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg);}
/* Раскрытие: grid-template-rows 0fr → 1fr анимируется без знания высоты
   и без скачков, в отличие от max-height с угаданным значением. */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--anim-in) var(--ease);}
.faq-a > div{overflow:hidden;}
.faq-a > div > p{padding:0 2px 20px;font-size:15.5px;max-width:760px;}
.faq-item.open .faq-a{grid-template-rows:1fr;}

/* ===== ПОДВАЛ ============================================================= */
.site-footer{border-top:1px solid var(--border);background:var(--bg-soft);padding:56px 0 40px;}
.footer-grid{
  display:grid;gap:32px;
  grid-template-columns:1.4fr repeat(4,minmax(0,1fr));
  margin-bottom:36px;
}
.footer-brand p{font-size:14px;margin-top:12px;max-width:260px;}
.footer-col h4{font-size:13px;font-weight:640;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;}
.footer-col ul{list-style:none;display:grid;gap:9px;}
.footer-col a{
  font-size:15px;color:var(--text-2);
  transition:color var(--anim-in) var(--ease);
}
.footer-col a:hover{color:var(--text);}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--text-3);
}

/* ===== ТАБЛИЦЫ (тарифы, ключи) =========================================== */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);}
table.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;}
table.tbl th,table.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);}
table.tbl th{font-size:12.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--bg-soft);}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}

/* ===== КОД И ТЕРМИНАЛ ==================================================== */
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.9em;background:var(--code-bg);border:1px solid var(--border);
  padding:1.5px 5px;border-radius:6px;
}
pre{
  background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:15px 16px;overflow-x:auto;font-size:13.5px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
pre code{background:none;border:none;padding:0;font-size:inherit;}
.code-block{position:relative;}
.code-block .copy{
  position:absolute;top:8px;right:8px;
  padding:5px 10px;font-size:12.5px;border-radius:8px;
  background:var(--bg);border:1px solid var(--border);cursor:pointer;
  opacity:0;transform:translateY(-2px);
  transition:opacity var(--anim-in) var(--ease),transform var(--anim-in) var(--ease),background-color var(--anim-in) var(--ease);
}
.code-block:hover .copy,.code-block .copy:focus-visible{opacity:1;transform:none;}
.code-block .copy:hover{background:var(--bg-sunk);}
.code-block .copy.done{color:var(--ok);border-color:var(--ok);}

/* ===== РАСКРЫВАЮЩИЕСЯ БЛОКИ (инструкции подключения) ==================== */
.disc{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg);}
.disc + .disc{margin-top:10px;}
.disc-head{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:15px 18px;background:transparent;border:none;cursor:pointer;text-align:left;
  font-size:16px;font-weight:560;
  transition:background-color var(--anim-in) var(--ease);
}
.disc-head:hover{background:var(--bg-soft);}
.disc-head .chev{
  margin-left:auto;flex-shrink:0;width:17px;height:17px;
  stroke:var(--text-3);stroke-width:1.9;fill:none;
  transition:transform var(--anim-in) var(--ease);
}
.disc-head[aria-expanded="true"] .chev{transform:rotate(180deg);}
.disc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--anim-in) var(--ease);}
.disc-body > div{overflow:hidden;}
.disc-body > div > .disc-inner{padding:2px 18px 18px;border-top:1px solid var(--border);margin-top:0;}
.disc.open .disc-body{grid-template-rows:1fr;}
.disc-inner p{font-size:14.5px;margin:12px 0 8px;}
.disc-inner p:first-child{margin-top:14px;}

/* ===== ПАНЕЛЬ ПОДКЛЮЧЕНИЯ (api-docs.html) ================================
   Слева список клиентов, справа подробная инструкция выбранного. Раскрытых
   блоков сразу семь, как было в аккордеонах, человек не листает — он выбирает
   свой инструмент и видит только его шаги.

   Панели все лежат в разметке и переключаются атрибутом hidden: так кнопки
   «Скопировать» навешиваются один раз при загрузке (hm.copy), и ничего не
   нужно доинициализировать при переключении.
   ========================================================================= */
.ig{
  display:grid;grid-template-columns:238px minmax(0,1fr);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg);box-shadow:var(--shadow-sm);overflow:hidden;
}
.ig-nav{
  background:var(--bg-soft);border-right:1px solid var(--border);
  padding:14px 10px;display:flex;flex-direction:column;gap:2px;
}
.ig-nav-title{
  font-size:11px;font-weight:640;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);padding:6px 11px 9px;
}
/* Второй и последующие заголовки групп отделяем линией — первый стоит вверху
   списка, ему разделитель не нужен. */
.ig-nav-title:not(:first-child){margin-top:12px;border-top:1px solid var(--border);padding-top:15px;}
.ig-tab{
  display:flex;align-items:center;gap:10px;width:100%;
  font:inherit;font-size:14.5px;font-weight:500;text-align:left;
  color:var(--text-2);background:none;border:0;
  border-radius:var(--radius-sm);padding:9px 11px;cursor:pointer;
  transition:background-color var(--anim-in) var(--ease),color var(--anim-in) var(--ease);
}
.ig-tab:hover{background:rgba(17,17,19,.05);color:var(--text);}
/* Активный пункт подсвечиваем тенью, а не рамкой: рамка добавила бы 1px и
   строки списка дёргались бы при переключении. */
.ig-tab[aria-selected="true"]{
  background:var(--bg);color:var(--text);font-weight:600;
  box-shadow:0 0 0 1px var(--border),var(--shadow-sm);
}
.ig-tab .ig-ico{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7;
}
.ig-tab[aria-selected="true"] .ig-ico{opacity:1;}

.ig-body{padding:26px 28px;min-width:0;}
.ig-panel[hidden]{display:none;}
.ig-panel{animation:igIn 200ms var(--ease) both;}
@keyframes igIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.ig-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;}
.ig-head h3{font-size:20px;letter-spacing:-.01em;}
.ig-lead{font-size:15px;color:var(--text-2);margin-bottom:22px;}
.ig-lead:last-child{margin-bottom:0;}

/* Шаги подключения: нумерация из CSS-счётчика, чтобы порядок в разметке
   и на экране не могли разойтись. */
.ig-steps{list-style:none;counter-reset:ig;display:grid;gap:20px;}
.ig-steps > li{counter-increment:ig;position:relative;padding-left:36px;}
.ig-steps > li::before{
  content:counter(ig);position:absolute;left:0;top:-1px;
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--accent-text);
  font-size:12.5px;font-weight:640;
  display:flex;align-items:center;justify-content:center;
}
.ig-step-t{display:block;font-size:15px;font-weight:600;margin-bottom:4px;}
.ig-steps > li p{font-size:14.5px;color:var(--text-2);margin-bottom:0;}
.ig-steps > li .code-block,.ig-steps > li .table-wrap,.ig-steps > li .notice{margin-top:11px;}
.ig-panel > .notice,.ig-panel > .table-wrap,.ig-panel > .code-block{margin-top:20px;}

/* Метки платформ внутри шага (macOS/Linux, Windows) */
.ig-os{
  font-size:12px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:14px 0 6px;
}
.ig-os:first-child{margin-top:11px;}

@media (max-width:900px){
  /* Узкий экран: список превращается в горизонтальную ленту над инструкцией. */
  .ig{grid-template-columns:1fr;}
  .ig-nav{
    flex-direction:row;overflow-x:auto;gap:6px;padding:10px;
    border-right:0;border-bottom:1px solid var(--border);
    scrollbar-width:none;
  }
  .ig-nav::-webkit-scrollbar{display:none;}
  .ig-nav-title{display:none;}
  .ig-tab{white-space:nowrap;padding:8px 12px;}
  .ig-body{padding:22px 18px;}
}

/* ===== ПЛАШКИ И ЗНАЧКИ ================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:560;
  background:var(--bg-sunk);color:var(--text-2);border:1px solid var(--border);
}
.badge-ok{background:#f0fdf4;color:#15803d;border-color:#bbf7d0;}
.badge-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border);}
.badge-err{background:#fef2f2;color:var(--err);border-color:#fecaca;}
.notice{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:14.5px;background:var(--bg-soft);color:var(--text-2);
}
.notice-warn{background:var(--warn-bg);border-color:var(--warn-border);color:#7c2d12;}
.notice strong{color:inherit;}

/* ===== ПОЛЯ ВВОДА ======================================================== */
.field{display:grid;gap:7px;}
.field label{font-size:14px;font-weight:560;}
.field .hint{font-size:13px;color:var(--text-3);}
.input{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--bg);
  transition:border-color var(--anim-in) var(--ease),box-shadow var(--anim-in) var(--ease);
}
.input:focus{outline:none;border-color:var(--text-3);box-shadow:0 0 0 3px rgba(31,111,235,.12);}
.input.err{border-color:var(--err);}
.err-text{font-size:13px;color:var(--err);}

/* ============================================================================
   АНИМАЦИИ — ЕДИНАЯ СИСТЕМА

   Три сущности, больше не нужно:
     .pop    — всплывающие меню и мини-окна у кнопки (контекстное меню, «…»)
     .modal  — модальные окна по центру (новый ключ, пополнение)
     .panel  — выезжающая боковая панель

   Управление одним классом .open. Скрытое состояние — visibility:hidden, а не
   display:none: без него нет исходного кадра и анимация появления не проигрывается.
   ============================================================================ */

/* ---- Всплывающее меню ---- */
.pop{
  position:absolute;z-index:70;min-width:190px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:6px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px) scale(.97);
  transform-origin:top right;
  transition:opacity var(--anim-out) var(--ease),
             transform var(--anim-out) var(--ease),
             visibility var(--anim-out);
}
.pop.open{
  opacity:1;visibility:visible;transform:none;
  transition-duration:var(--anim-in);
}
.pop-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border-radius:var(--radius-sm);border:none;background:transparent;
  cursor:pointer;text-align:left;font-size:14.5px;
  transition:background-color var(--anim-out) var(--ease);
}
.pop-item:hover{background:var(--bg-sunk);}
.pop-item.danger{color:var(--err);}
.pop-item.danger:hover{background:#fef2f2;}
.pop-item svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0;}
.pop-sep{height:1px;background:var(--border);margin:5px 6px;}

/* ---- Модальное окно ---- */
.modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity var(--anim-out) var(--ease),visibility var(--anim-out);
}
.modal.open{opacity:1;visibility:visible;transition-duration:var(--anim-in);}
.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(17,17,19,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.modal-card{
  position:relative;z-index:1;
  width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:26px;
  transform:translateY(10px) scale(.975);
  transition:transform var(--anim-out) var(--ease);
}
.modal.open .modal-card{transform:none;transition-duration:var(--anim-in);transition-timing-function:var(--ease-spring);}
.modal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.modal-head h3{font-size:20px;}
.modal-close{
  margin-left:auto;flex-shrink:0;width:32px;height:32px;border-radius:999px;
  border:none;background:var(--bg-sunk);cursor:pointer;display:grid;place-items:center;
  transition:background-color var(--anim-in) var(--ease),transform var(--anim-out) var(--ease);
}
.modal-close:hover{background:var(--border);}
.modal-close:active{transform:scale(.93);}
.modal-close svg{width:15px;height:15px;stroke:var(--text-2);stroke-width:2;fill:none;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap;}

/* ---- Боковая панель ---- */
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:110;
  width:min(92vw,420px);background:var(--bg);
  border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--anim-panel) var(--ease),visibility var(--anim-panel);
  display:flex;flex-direction:column;
}
.panel.open{transform:none;visibility:visible;}

/* ---- Появление содержимого, которое пришло по сети ----
   Один короткий кадр, чтобы список ключей не «выпрыгивал» из пустоты. */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.fade-in{animation:fadeUp var(--anim-in) var(--ease) both;}

/* ---- Скелет загрузки ---- */
@keyframes shimmer{0%{background-position:-180% 0;}100%{background-position:180% 0;}}
.skeleton{
  border-radius:8px;background:var(--bg-sunk);
  background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.72) 50%,transparent 100%);
  background-size:180% 100%;animation:shimmer 1.25s linear infinite;
  color:transparent !important;user-select:none;
}

/* ---- Спиннер в кнопке ---- */
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{
  width:15px;height:15px;border-radius:999px;flex-shrink:0;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;
}

/* ============================================================================
   ПОЛНОЕ ОТКЛЮЧЕНИЕ АНИМАЦИЙ ПО СИСТЕМНОЙ НАСТРОЙКЕ.

   prefers-reduced-motion включают не для красоты: у части людей движение
   вызывает тошноту и головокружение. Поэтому здесь не «поменьше», а совсем
   без движения — при этом интерфейс обязан остаться рабочим: раскрытие FAQ,
   меню и модальные окна продолжают открываться, просто мгновенно.
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .btn:active,.modal-close:active{transform:none;}
  .card-hover:hover{transform:none;}
  .pop,.modal,.modal-card,.panel{transform:none !important;}
  .code-block .copy{opacity:1;transform:none;}
  .skeleton{animation:none;background-image:none;}
  .spinner{animation:none;border-top-color:currentColor;opacity:.45;}
}

/* ============================================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
   Порядок правил: сначала планшет (сжимаем сетки), потом телефон
   (складываем в одну колонку и выносим навигацию в выпадающее меню).
   ============================================================================ */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:820px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:1fr;gap:26px;}
  .section{padding:56px 0;}
  .hero{padding:64px 0 56px;}

  /* Навигация уезжает в меню под шапкой. Анимация — та же система:
     transform + opacity, никаких изменений высоты. */
  .nav-toggle{display:inline-flex;}
  .site-nav{
    position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    padding:10px 14px 16px;
    background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--anim-out) var(--ease),
               transform var(--anim-out) var(--ease),
               visibility var(--anim-out);
  }
  .site-nav.open{opacity:1;visibility:visible;transform:none;transition-duration:var(--anim-in);}
  .site-nav a{padding:12px 14px;border-radius:var(--radius-sm);font-size:16px;}
  .header-actions .btn-hide-sm{display:none;}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px;}
  .wrap,.wrap-narrow,.header-inner{padding-left:16px;padding-right:16px;}
  .card{padding:20px;}
  .modal{padding:12px;align-items:flex-end;}
  .modal-card{max-width:none;padding:22px 18px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:88vh;}
  /* На телефоне окно приезжает снизу — так его удобнее закрывать большим пальцем */
  .modal-card{transform:translateY(24px);}
  .modal-actions .btn{flex:1;}
  .btn-row .btn{flex:1;}
  .faq-q{font-size:16px;}
  h1{font-size:clamp(28px,8vw,36px);}
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ АВТОРИЗАЦИИ (узкие экраны) =====================
   Карточка входа была фиксированной (36px паддинги, без safe-area): на
   iPhone с «чёлкой» и системными жестами текст прилипал к краям и к нотчу.
   Теперь — стекло на всю ширину, скруглённые углы и безопасные отступы. */
@media (max-width: 480px) {
  .auth-wrap{padding:0;align-items:flex-end;}
  .auth-card{
    max-width:none;width:100%;
    border-radius:24px 24px 0 0;
    padding:28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    border:1px solid rgba(255,255,255,.08);
    background:rgba(22,22,26,.88);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
  }
  html[data-theme="light"] .auth-card{background:rgba(252,251,249,.92);border-color:rgba(20,18,12,.07);}
  .auth-h1{font-size:26px;}
  .otp-box{width:44px;height:54px;font-size:22px;}
}

/* ============================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ АВТОРИЗАЦИИ (дополняет .auth-* из app.html; на лендинге
   и других статических страницах этих классов нет — блок безвреден).
   До 380px карточка входа не сжималась по бокам (36px padding + 2*20px
   отступа), а 6 OTP-полей по 46px + 5*8px gap = 316px — впритык к ширине
   iPhone SE и рвалось на Android с маленькими экранами.
   ============================================================================ */
@media (max-width: 380px) {
  .auth-card { padding: 28px 18px; border-radius: 18px; }
  .auth-h1 { font-size: 26px; }
  .otp-row { gap: 6px; }
  .otp-box { width: 42px; height: 52px; font-size: 20px; }
}

/* Доступность: минимальная зона нажатия для крошечных «крестиков» поверх
   полноэкранных изображений и предпросмотров (моб.) */
@media (max-width: 768px) {
  .otp-box { -webkit-tap-highlight-color: transparent; }
}


/* HarmonyAI theme palette audit 2026-09: no purple/violet */
html[data-theme="dark"]{
 --theme-black:#000;
 --theme-gray:#1b1b1b;
 --theme-white:#fff;
 --accent:#1f5cff;
}
html[data-theme="light"]{
 --theme-white:#fff;
 --theme-gray:#f1f3f5;
 --theme-black:#111;
 --accent:#1f5cff;
}
html[data-theme="messenger"]{
 --theme-blue:#1697ff;
 --theme-white:#fff;
 --theme-gray:#eef3f7;
 --theme-black:#111;
 --accent:#1697ff;
}