/* Шапка и подвал сайта: главная, витрина (/product/..., /for/...) и публичные
   разделы. Разметка - components/site_header.html и components/footer.html,
   поведение - js/site-chrome.js. Файл самодостаточный: не зависит ни от
   Tailwind (главная, блог), ни от showcase.css (витрина), поэтому все свойства
   заданы явно, а сбросы - только внутри компонентов.
   --site-hdr - высота шапки; от нее считают отступы навигатор разделов
   (vt-path.css) и первый экран витрины (--vt-hdr в showcase.css). */

:root {
  --site-hdr: 72px;
  --site-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --site-ink: #14123a;
  --site-ink-2: #55517a;
  --site-ink-3: #77739a;
  --site-mute: #a19db9;
  --site-line: #e8e6f0;
  --site-line-2: #f0eef6;
  --site-indigo: #4f46e5;
  --site-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 58%, #a855f7 100%);
  --site-grad-btn: linear-gradient(135deg, #4f46e5, #7c3aed 62%, #d16bd6);
  --site-ease: cubic-bezier(.22, .75, .25, 1);
}
@media (max-width: 1140px) { :root { --site-hdr: 64px; } }

/* ---------- шапка ---------- */
.site-hdr { position: sticky; top: 0; z-index: 60; font-family: var(--site-font); -webkit-font-smoothing: antialiased; border-bottom: 1px solid rgba(20, 18, 58, .06); transition: border-color .3s, box-shadow .3s; }
.site-hdr--fixed { position: fixed; left: 0; right: 0; border-bottom-color: transparent; }
.site-hdr.is-scrolled { border-bottom-color: rgba(20, 18, 58, .06); box-shadow: 0 8px 24px -18px rgba(20, 18, 58, .25); }
/* размытие - на подложке: backdrop-filter на самой шапке сделал бы ее
   контейнером для fixed-меню телефона, и меню обрезалось бы ее высотой */
.site-hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: background .3s; }
.site-hdr *, .site-hdr *::before, .site-hdr *::after { box-sizing: border-box; }
.site-hdr a { color: inherit; text-decoration: none; }
.site-hdr svg { display: block; flex: none; }
.site-hdr__in { display: flex; align-items: center; gap: 24px; height: var(--site-hdr); width: min(1240px, calc(100% - 64px)); margin: 0 auto; }

.site-hdr__logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
/* знак обрезан по контуру карандаша (static/img/logo-mark*.png), без квадратных полей:
   высота задает размер, ширина - по пропорции рисунка */
.site-hdr__logo img { display: block; width: auto; height: 38px; max-width: none; transition: transform .3s var(--site-ease); }
.site-hdr__logo:hover img { transform: scale(1.05); }
.site-hdr__logo b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #1c1b3a; }
.site-hdr__logo b i { font-style: normal; background: var(--site-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.site-hdr__nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.site-hdr__nav > a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; line-height: 1; color: rgba(28, 25, 23, .78); white-space: nowrap; transition: background-color .2s, color .2s; }
.site-hdr__nav > a:hover { background: rgba(79, 70, 229, .07); color: #1c1917; }
.site-hdr__nav > a[aria-current="page"] { color: var(--site-indigo); background: rgba(79, 70, 229, .07); }

.site-hdr__act { display: flex; align-items: center; gap: 8px; flex: none; }
.site-hdr__login { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: #1c1917; transition: background-color .2s, color .2s; }
.site-hdr__login:hover { background: rgba(79, 70, 229, .07); color: var(--site-indigo); }
.site-hdr .site-hdr__cta { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 12px; background: var(--site-grad-btn); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 12px 24px -12px rgba(124, 58, 237, .6); transition: transform .25s var(--site-ease), filter .25s; }
.site-hdr .site-hdr__cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.site-hdr__ghost { display: inline-flex; align-items: center; justify-content: center; height: 50px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--site-line); color: var(--site-ink); font-size: 15.5px; font-weight: 600; }
.site-hdr__burger { display: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; place-items: center; color: var(--site-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--site-line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.site-hdr__burger svg { width: 20px; height: 20px; }
.site-hdr__i-close { display: none !important; }
.site-hdr.is-open .site-hdr__i-open { display: none !important; }
.site-hdr.is-open .site-hdr__i-close { display: block !important; }
.site-hdr :focus-visible { outline: 2px solid var(--site-indigo); outline-offset: 2px; border-radius: 10px; }
.site-hdr__drawer { display: none; }

/* темная страница (Студия, enterprise): светлые буквы на ночном стекле */
.site-hdr--dark { border-bottom-color: rgba(255, 255, 255, .06); }
.site-hdr--dark::before { background: rgba(18, 14, 42, .74); }
.site-hdr--dark .site-hdr__logo b { color: #fff; }
.site-hdr--dark .site-hdr__logo b i { background: linear-gradient(120deg, #c7d2fe, #d8b4fe); -webkit-background-clip: text; background-clip: text; }
.site-hdr--dark .site-hdr__nav > a, .site-hdr--dark .site-hdr__login { color: rgba(255, 255, 255, .72); }
.site-hdr--dark .site-hdr__nav > a:hover, .site-hdr--dark .site-hdr__login:hover, .site-hdr--dark .site-hdr__nav > a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); }
.site-hdr--dark .site-hdr__burger { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

@media (max-width: 1239px) {
  .site-hdr__in { gap: 16px; }
  .site-hdr__nav > a { padding: 0 9px; font-size: 14px; }
  .site-hdr__login { padding: 0 8px; }
}
@media (max-width: 1140px) {
  .site-hdr__in { width: calc(100% - 40px); }
  .site-hdr__nav, .site-hdr__login { display: none; }
  .site-hdr__act { margin-left: auto; }
  .site-hdr__burger { display: grid; }
  .site-hdr__logo img { height: 34px; }
  .site-hdr__logo b { font-size: 22px; }
  .site-hdr__drawer { position: fixed; top: var(--site-hdr); left: 0; right: 0; bottom: 0; display: block; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: #fff; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s ease, transform .28s var(--site-ease), visibility 0s linear .28s; }
  .site-hdr.is-open::before { background: #fff; }
  .site-hdr.is-open .site-hdr__drawer { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .28s var(--site-ease); }
  .site-hdr__dlist { display: block; max-width: 640px; margin: 0 auto; }
  .site-hdr__dlist a { display: grid; grid-template-columns: 1fr 20px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--site-line-2); }
  .site-hdr__dlist a b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--site-ink); }
  .site-hdr__dlist a[aria-current="page"] b { color: var(--site-indigo); }
  .site-hdr__dlist a span { grid-column: 1; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--site-ink-3); }
  .site-hdr__dlist a svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--site-mute); }
  .site-hdr__dcta { display: grid; gap: 10px; max-width: 640px; margin: 22px auto 0; }
  .site-hdr__dcta .site-hdr__cta { height: 52px; font-size: 16px; border-radius: 14px; }
  .site-hdr__dcta p { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--site-ink-3); }
  .site-hdr--dark.is-open::before { background: #120e2a; }
  .site-hdr--dark .site-hdr__drawer { background: #120e2a; }
  .site-hdr--dark .site-hdr__dlist a { border-bottom-color: rgba(255, 255, 255, .08); }
  .site-hdr--dark .site-hdr__dlist a b { color: #fff; }
  .site-hdr--dark .site-hdr__dlist a span { color: rgba(255, 255, 255, .56); }
}
@media (max-width: 420px) {
  .site-hdr__in { width: calc(100% - 28px); gap: 10px; }
  .site-hdr__act .site-hdr__cta { height: 40px; padding: 0 12px; font-size: 13px; }
}
/* меню открыто - страница под ним не прокручивается */
html.site-menu-open, html.site-menu-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .site-hdr, .site-hdr *, .site-hdr::before { transition: none !important; }
}

/* ---------- подвал ---------- */
.site-ftr { background: #111827; color: #9ca3af; font-family: var(--site-font); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; }
.site-ftr *, .site-ftr *::before, .site-ftr *::after { box-sizing: border-box; }
.site-ftr a { color: inherit; text-decoration: none; transition: color .2s; }
.site-ftr a:hover { color: #fff; }
.site-ftr :focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; border-radius: 6px; }
.site-ftr__in { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 64px 0 0; }
.site-ftr__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-ftr__logo { display: inline-flex; align-items: center; gap: 10px; }
/* белый силуэт, видимая высота как у прежнего квадратного logo.png 36x36 (84% = 30 px) */
.site-ftr__logo img { display: block; width: auto; height: 30px; max-width: none; filter: brightness(0) invert(1); }
.site-ftr__logo b { font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.site-ftr__logo b i { font-style: normal; color: #a5b4fc; }
.site-ftr__about { margin: 16px 0 20px; max-width: 360px; font-size: 14px; line-height: 1.65; }
.site-ftr__soc { display: flex; gap: 10px; }
.site-ftr__soc a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #1f2937; color: #9ca3af; }
.site-ftr__soc a:hover { background: #374151; color: #fff; }
.site-ftr__soc img { display: block; width: 16px; height: 16px; opacity: .7; transition: opacity .2s; }
.site-ftr__soc a:hover img { opacity: 1; }
.site-ftr__soc svg { display: block; width: 16px; height: 16px; }
.site-ftr__col h3 { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.site-ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14.5px; }
.site-ftr__col li { margin: 0; }
.site-ftr__accent { color: #a5b4fc !important; font-weight: 500; }
.site-ftr__accent:hover { color: #fff !important; }
.site-ftr__legal { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px 40px; align-items: start; margin-top: 48px; padding: 28px 0; border-top: 1px solid #1f2937; font-size: 12.5px; }
.site-ftr__req b { display: block; color: #d1d5db; font-weight: 600; }
.site-ftr__req span, .site-ftr__req a { display: block; margin-top: 3px; color: #6b7280; }
.site-ftr__docs { margin: 0; color: #6b7280; line-height: 1.8; text-wrap: balance; text-align: right; }
.site-ftr__docs a { color: #6b7280; }
.site-ftr__copy { margin: 0; padding: 20px 0 28px; border-top: 1px solid #1f2937; text-align: center; font-size: 12.5px; color: #4b5563; }
@media (max-width: 1000px) {
  .site-ftr__grid { grid-template-columns: 1fr 1fr; }
  .site-ftr__brand { grid-column: 1 / -1; }
  .site-ftr__legal { grid-template-columns: 1fr 1fr; }
  .site-ftr__docs { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 767px) {
  .site-ftr__in { width: calc(100% - 32px); padding-top: 48px; }
  .site-ftr__grid { gap: 28px 20px; }
  .site-ftr__col ul { gap: 4px; }
  .site-ftr__col li a { display: inline-flex; align-items: center; min-height: 36px; }
  .site-ftr__legal { grid-template-columns: 1fr; }
}