/* ============================================================
   ДИЗАЙН-СИСТЕМА — общая для всех страниц сайта
   Токены, типографика, кнопки, иконки, шапка, подвал.
   Блоки конкретных страниц лежат в home.css / subscribe.css
   ============================================================ */

/* --- 1. Токены ------------------------------------------------ */
:root{
  /* Поверхности */
  --cream:#f2efe7;
  --cream-soft:#faf8f2;
  --white:#ffffff;

  /* Тёмные секции */
  --ink:#17120c;
  --ink-2:#241e16;
  --ink-3:#332b21;

  /* Текст */
  --text:#241e16;
  --muted:#6e6558;
  --muted-dark:rgba(255,255,255,.68);

  /* Акцент.
     Панель управления перебивает эти значения, когда клиент выбирает
     свой цвет. Поэтому ни один оттенок акцента не должен быть зашит
     в правилах ниже — только через переменные отсюда.
       --amber-rgb  каналы того же цвета, нужны для rgba() в тенях
       --amber-grad второй цвет градиентов
       --on-accent  цвет надписи на акцентном фоне */
  --amber:#f5a50b;
  --amber-rgb:245,165,11;
  --amber-2:#ffc24d;
  --amber-deep:#c47d00;
  --amber-tint:#fdf1dc;
  --amber-grad:#e89100;
  --on-accent:#1d1608;

  /* Служебные */
  --line:#e2dcd0;
  --line-dark:rgba(255,255,255,.14);
  --green:#2e7d4f;

  --shadow-sm:0 2px 8px rgba(35,28,18,.06);
  --shadow:0 12px 32px rgba(35,28,18,.09);
  --shadow-lg:0 26px 60px rgba(35,28,18,.14);

  --r-sm:14px;
  --r:20px;
  --r-lg:28px;
  --r-xl:36px;

  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* --- 2. База -------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-text);
  background:var(--cream);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

/* Панель прячет убранные клиентом элементы обычным атрибутом hidden.
   Без !important правило браузера [hidden]{display:none} проигрывает
   нашим display:flex у кнопок и шапки — и «убранное» остаётся на виду. */
[hidden]{display:none!important}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:96px 0;position:relative}
.section--tight{padding:64px 0}

/* Тёмная секция */
.section--dark{background:var(--ink);color:#fff}
.section--dark .section-title{color:#fff}
.section--dark .section-sub{color:var(--muted-dark)}

/* Мягкая секция */
.section--soft{background:var(--cream-soft)}

/* --- 3. Иконки ------------------------------------------------ */
.icon{width:1em;height:1em;flex-shrink:0;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon--fill{fill:currentColor;stroke:none}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Иконка в «плашке» */
.icon-tile{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--amber-tint);color:var(--amber-deep);
  font-size:24px;flex-shrink:0;
}
.icon-tile--amber{background:var(--amber);color:#fff}
.icon-tile--ink{background:var(--ink);color:var(--amber-2)}
.section--dark .icon-tile{background:rgba(var(--amber-rgb),.16);color:var(--amber-2)}

/* --- 4. Типографика ------------------------------------------- */
.section-head{max-width:760px;margin:0 0 48px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 12px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--amber-deep);margin-bottom:22px;
  box-shadow:var(--shadow-sm);
}
.eyebrow .icon{font-size:15px}
.section--dark .eyebrow{background:rgba(255,255,255,.07);border-color:var(--line-dark);color:var(--amber-2);box-shadow:none}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.6vw,46px);
  font-weight:800;line-height:1.1;letter-spacing:-.025em;
  margin-bottom:14px;
}
.section-sub{font-size:17px;line-height:1.7;color:var(--muted)}

/* Янтарная часть заголовка — двухцветная подача */
.accent{color:var(--amber-deep)}
.section--dark .accent{color:var(--amber-2)}

/* Выделение «маркером» внутри текста */
.mark{
  background:linear-gradient(180deg,transparent 58%,rgba(var(--amber-rgb),.42) 58%);
  color:inherit;padding:0 .06em;
}

/* --- 5. Кнопки ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  text-align:center;white-space:nowrap;
}
.btn .icon{font-size:19px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{background:var(--amber);color:var(--on-accent);box-shadow:0 10px 24px rgba(var(--amber-rgb),.32)}
.btn--primary:hover{background:var(--amber-2);box-shadow:0 14px 30px rgba(var(--amber-rgb),.4)}

.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-2)}

.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--ink);background:var(--white)}
.section--dark .btn--ghost{border-color:var(--line-dark);color:#fff}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}

.btn--light{background:var(--white);color:var(--text);box-shadow:var(--shadow-sm)}
.btn--light:hover{background:var(--amber-tint)}

.btn--sm{padding:11px 20px;font-size:14px}
.btn--block{display:flex;width:100%}

/* Пилюля-ссылка */
.pill{
  display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;
  font-size:14px;font-weight:700;background:var(--ink);color:#fff;
  transition:background .18s ease,transform .15s ease;
}
.pill:hover{background:var(--ink-2);transform:translateY(-1px)}
.pill--accent{background:var(--amber);color:var(--on-accent)}
.pill--accent:hover{background:var(--amber-2)}

/* Кнопка-контакт на светлом фоне */
.contact-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.contact-row--center{justify-content:center}
.contact-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--white);border:1px solid var(--line);color:var(--text);
  transition:border-color .18s ease,transform .15s ease;
}
.contact-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.contact-btn img{width:17px;height:17px;object-fit:contain}

/* Кнопки мессенджеров в фирменных цветах */
.msg-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.msg-btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 28px;border-radius:999px;
  font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.msg-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.msg-btn img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.msg-btn--max{background:#8733d1}
.msg-btn--vk{background:#0077ff}
.msg-btn--tg{background:#0088cc}

/* --- 6. Мелкий юридический текст ------------------------------ */
.legal{font-size:13px;line-height:1.7;color:rgba(255,255,255,.55);margin-top:26px}
.legal a{color:rgba(255,255,255,.8);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.legal a:hover{color:#fff}
.legal--light{color:var(--muted)}
.legal--light a{color:var(--muted);text-decoration-color:var(--line)}
.legal--light a:hover{color:var(--ink)}

/* --- 7. Аватар ------------------------------------------------- */
.avatar{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(160deg,var(--amber) 0%,var(--amber-grad) 100%);
  box-shadow:0 6px 18px rgba(var(--amber-rgb),.28);
}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.avatar--lg{width:76px;height:76px}

/* --- 8. Шапка -------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(242,239,231,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
/* ВАЖНО: .header-inner висит на том же элементе, что и .container.
   Сокращённый `padding` затёр бы боковые отступы контейнера,
   поэтому здесь и ниже — только longhand по вертикали. */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-avatar{
  width:38px;height:38px;border-radius:12px;object-fit:cover;flex-shrink:0;
  background:var(--white);border:1px solid var(--line);
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{
  display:block;font-family:var(--font-display);font-weight:800;font-size:16px;
  line-height:1.15;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-role{
  display:block;font-size:12px;line-height:1.25;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.site-header .btn{padding:11px 22px;font-size:15px}

/* Шапка статьи: крупная круглая аватарка, без кнопки, не липкая */
.site-header--author{position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header--author .header-inner{justify-content:flex-start;padding-top:26px;padding-bottom:26px}
.site-header--author .brand{gap:16px}
.site-header--author .brand-name{font-size:20px}
.site-header--author .brand-role{font-size:14px;color:var(--muted);margin-top:3px;white-space:normal}

/* --- 9. Подвал -------------------------------------------------- */
.site-footer{background:var(--ink);color:#fff;padding:72px 0 0}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:start}
.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.footer-brand img{width:52px;height:52px;border-radius:16px;object-fit:cover;background:rgba(255,255,255,.06)}
.footer-name{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.footer-role{font-size:13px;color:var(--muted-dark);margin-top:3px}

.footer-col-title{
  font-family:var(--font-display);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-bottom:16px;
}
.footer-contacts{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-contacts a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:16px;color:#fff;transition:color .18s ease;
}
.footer-contacts a:hover{color:var(--amber-2)}
.footer-contacts .icon{font-size:18px;color:var(--amber)}

.footer-social{display:flex;gap:10px;margin-top:22px}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;transition:transform .18s ease,filter .18s ease;
}
.social-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.social-btn img{width:22px;height:22px;object-fit:contain}

/* Документы — по правому краю */
.footer-docs{text-align:right;min-width:260px}
.footer-links{display:flex;flex-direction:column;gap:11px;align-items:flex-end}
.footer-links a{font-size:15px;color:var(--muted-dark);transition:color .18s ease}
.footer-links a:hover{color:var(--amber-2)}

/* Реквизиты — отдельной полосой на всю ширину */
.footer-legal{
  margin-top:56px;border-top:1px solid var(--line-dark);
  padding:28px 0 36px;
  display:flex;flex-wrap:wrap;gap:16px 48px;justify-content:space-between;align-items:flex-start;
}
.footer-legal p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.5)}
.footer-legal strong{color:rgba(255,255,255,.72);font-weight:600}
.footer-disclaimer{width:100%;font-size:12px;line-height:1.6;color:rgba(255,255,255,.35)}
/* Подпись разработчика — тише копирайта, чтобы не спорить с ним за внимание */
.footer-legal .footer-credit{width:100%;font-size:11px;line-height:1.6;color:rgba(255,255,255,.28)}
/* Анкор не выделяем: строка должна читаться как обычный текст */
.footer-legal .footer-credit a{color:inherit;text-decoration:none}
.footer-legal .footer-credit a:hover{color:rgba(255,255,255,.6)}

/* Компактный подвал — для подписных страниц */
.site-footer--compact{padding:44px 0 0}
/* Узкая колонка — только две смысловые группы, автор уходит в нижнюю полосу */
.site-footer--compact .footer-grid{
  grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}
.site-footer--compact .footer-col-title{margin-bottom:12px}

/* Контакты — по правому краю, документы остаются по левому */
.site-footer--compact .footer-reach{text-align:right}
.site-footer--compact .footer-reach .footer-contacts{align-items:flex-end}
.site-footer--compact .footer-reach .footer-social{justify-content:flex-end}
.site-footer--compact .footer-links{gap:8px}
.site-footer--compact .footer-links a{font-size:14px}
.site-footer--compact .footer-contacts a{font-size:15px;margin-bottom:8px}
.site-footer--compact .footer-social{margin-top:16px;gap:8px}
.site-footer--compact .social-btn{width:38px;height:38px;border-radius:12px}
.site-footer--compact .social-btn img{width:19px;height:19px}
.site-footer--compact .footer-docs{text-align:left;min-width:0}
.site-footer--compact .footer-links{align-items:flex-start}
/* В узкой колонке реквизиты кладём в столбик, а не разносим по краям */
.site-footer--compact .footer-legal{
  margin-top:36px;padding:20px 0 28px;
  flex-direction:column;align-items:flex-start;gap:10px;
}

/* --- 10. Адаптив общих блоков ---------------------------------- */
@media (max-width:860px){
  .section{padding:68px 0}
  .section--tight{padding:52px 0}
  .container{padding:0 18px}
  body{font-size:16px}

  .msg-btn{padding:13px 22px;font-size:15px}

  /* Подвал на мобильных: колонки по центру, нижняя полоса — как есть */
  .footer-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .footer-docs{text-align:center;min-width:0}
  .footer-links{align-items:center}
  .footer-brand{flex-direction:column;text-align:center;gap:12px}
  .footer-contacts{align-items:center}
  .footer-social{justify-content:center}
  .footer-legal{gap:14px;text-align:left}

  .site-footer--compact .footer-grid{grid-template-columns:1fr;gap:30px}
  .site-footer--compact .footer-docs{text-align:center}
  .site-footer--compact .footer-links{align-items:center}
  /* На мобильных колонки центрируются — правая выключка отменяется */
  .site-footer--compact .footer-reach{text-align:center}
  .site-footer--compact .footer-reach .footer-contacts{align-items:center}
  .site-footer--compact .footer-reach .footer-social{justify-content:center}
}

@media (max-width:600px){
  /* Шапка: подпись сохраняем, но мельче; кнопку ужимаем */
  .header-inner{gap:8px;padding-top:7px;padding-bottom:7px}
  .brand{gap:9px}
  .brand-avatar{width:34px;height:34px;border-radius:11px}
  .brand-name{font-size:14px}
  .brand-role{display:block;font-size:10px;line-height:1.2;margin-top:1px}
  .site-header .btn{padding:9px 13px;font-size:13px;flex-shrink:0}

  /* Шапка статьи на мобильных: по центру, читаемая */
  .site-header--author .header-inner{padding-top:20px;padding-bottom:20px;gap:12px;justify-content:center}
  .site-header--author .brand{gap:13px}
  .site-header--author .brand-name{font-size:17px}
  .site-header--author .brand-role{font-size:12.5px;line-height:1.35}
  .avatar--lg{width:62px;height:62px}
}

/* --- 11. Прочее -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}