/* ─────────────────────────────────────────────────────────────────────────────
   AYLAR — общий бренд-кит публичных страниц (Ф4).
   Палитра/типографика/кнопки/шапка/подвал/состояния — единый язык для unit.html,
   cabinet.html, selection.html, agent.html. Каждая страница добавляет свои блоки
   в собственном <style>. Mobile-first, премиум, скруглённые формы.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#f4efe8; --card:#fbf8f3; --ink:#171412;
  --camel:#ceaa88; --camelD:#bd9468; --camelsoft:#f1e6d8;
  --sec:#ede4d9; --muted:#efe7dd; --mutfg:#7a6b5b;
  --bd:rgba(23,20,18,.10); --bd2:rgba(23,20,18,.16);
  --ok:#3a8f63; --oksoft:#e6f0e8;
  --warn:#c47d12; --warnsoft:#f7ecd9;
  --red:#dc2626; --redsoft:#f9e3e3;
  --review:#5b6cc4; --reviewsoft:#e7e9f6;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.62 "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }

/* ── Шапка ───────────────────────────────────────────────────────────────── */
header{ position:sticky; top:0; z-index:30; background:rgba(244,239,232,.82); backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--bd); }
.hbar{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.logo{ height:16px; width:auto; fill:var(--ink); display:block; }
.logo-link{ display:inline-flex; align-items:center; }
.hr{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; cursor:pointer; border:none; border-radius:999px; transition:transform .12s, background .2s, box-shadow .2s, border-color .2s, color .2s; font-family:inherit; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; }
.btn.sm{ height:40px; padding:0 17px; font-size:14px; }
.btn.md{ height:46px; padding:0 20px; font-size:15px; }
.btn.lg{ height:52px; padding:0 24px; font-size:16px; border-radius:14px; }
.btn.camel{ background:var(--camel); color:var(--ink); }
.btn.camel:hover{ background:var(--camelD); }
.btn.ink{ background:var(--ink); color:var(--bg); }
.btn.ink:hover{ box-shadow:0 8px 22px rgba(23,20,18,.22); }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--bd2); }
.btn.ghost:hover{ background:var(--sec); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }

/* ── Типографика секций ──────────────────────────────────────────────────── */
section{ margin-top:42px; }
.eyebrow{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--camelD); font-weight:800; }
.h2{ font-size:clamp(20px,2.6vw,28px); font-weight:800; letter-spacing:-.02em; margin:6px 0 16px; }
.card{ background:var(--card); border:1px solid var(--bd); border-radius:18px; padding:22px; }

/* ── Чипы ────────────────────────────────────────────────────────────────── */
.chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; }

/* ── Состояния (загрузка/ошибка/пусто) ───────────────────────────────────── */
.state{ text-align:center; color:var(--mutfg); padding:80px 22px; font-size:16px; }
.state .ttl{ font-size:20px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.state .retry{ margin-top:16px; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--bd2); border-top-color:var(--camelD); margin:0 auto 16px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── Подвал ──────────────────────────────────────────────────────────────── */
footer{ margin-top:54px; padding:34px 0; border-top:1px solid var(--bd); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.flogo{ height:34px; width:auto; fill:var(--ink); opacity:.55; }
.fcap{ font-size:13px; color:var(--mutfg); }

/* ── Скролл-проявление + ховер-подъём ────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.lift{ transition:transform .25s, box-shadow .25s; }
.lift:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(23,20,18,.3); }

/* ── Тост ────────────────────────────────────────────────────────────────── */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(18px); z-index:80; background:var(--ink); color:var(--bg); font-weight:700; font-size:14px; padding:13px 20px; border-radius:999px; box-shadow:0 16px 34px -14px rgba(23,20,18,.5); display:inline-flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:90vw; }
.toast svg{ width:18px; height:18px; }
.toast.show{ opacity:1; transform:translateX(-50%); }

/* ── Уважение к prefers-reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}