/* Сеятель — ОБЩИЙ слой обеих половин сайта: маркетинг (aisower.org) и инструменты (/tools).
   Файл раздаётся nginx из /var/www/aisower.org/assets/ и подключается ОБЕИМИ базами
   ПЕРВЫМ, до site.css / tools.css. Всё, что здесь, — единое: токены, базовая типографика,
   контейнер, шапка с под-навигацией, футер, кнопки, появление секций.
   Ступени адаптива всего четыре: 1040 / 860 / 640 / 460. Новых не заводить. */

:root{
  --bg:#0a0c10; --bg-2:#0e1117; --panel:#12161e; --panel-2:#161b24;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --text:#f2f4f8; --muted:#9aa3b2; --faint:#8a93a3;
  --accent:#ffc24b; --accent-deep:#e8a72a; --accent-ink:#1c1503;
  --ok:#7fd4a0; --err:#ff8a7a;
  --radius:18px; --pill:99px;
  --font-display:'Unbounded',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;
  --wrap:1080px; --gutter:22px; --hdr-h:58px; --sub-h:42px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;line-height:1.15}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
h3{font-size:1.06rem}
img{max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);min-width:0}
[id]{scroll-margin-top:calc(var(--hdr-h) + 20px)}

/* ── Шапка: одна и та же на обеих половинах ────────────────────────────────
   Лого «Сеятель», на страницах инструментов к нему через точку-акцент
   дописывается «Инструменты» — раздел, а не отдельный продукт. */
.hdr{position:sticky;top:0;z-index:60;background:rgba(10,12,16,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:14px;min-height:var(--hdr-h)}

/* ★ Кто кому уступает место в шапке. На страницах инструментов бренд длинный
   («Сеятель · Инструменты», 295 px), меню — четыре пункта, справа чип аккаунта
   и кнопка. В 1080 px ширины контейнера это НЕ ВЛЕЗАЕТ никогда, ни на каком
   экране. Раньше сжимался правый блок, и имя аккаунта схлопывалось до 20 px:
   человек видел «e…» вместо «@moskaltsov». Теперь наоборот: правый блок и меню
   держат ширину, а уступает хвост бренда — он подпись, а не название, и его
   потеря безобидна (раздел и так написан в под-навигации строкой ниже). */
.brand{display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text)}
.brand img{width:24px;height:24px;display:block;flex:0 0 auto}
.brand:hover{text-decoration:none;color:var(--accent)}
.brand .brand-tail{color:var(--muted);font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.brand .brand-tail::before{content:"·";color:var(--accent);margin:0 6px}

.nav{display:flex;gap:2px;margin-left:auto;flex:0 0 auto;min-width:0}
.nav a{color:var(--muted);font-size:13.5px;font-weight:600;padding:7px 8px;
  border-radius:var(--pill);white-space:nowrap}
.nav a:hover{color:var(--text);text-decoration:none;background:rgba(255,255,255,.05)}
.nav a.on{color:var(--accent);background:rgba(255,194,75,.09)}

/* Правый слот: аккаунт (только инструменты) + «Подключить» (везде) */
/* Правый блок не сжимаем: это он раньше расплачивался за длинный бренд. */
.hdr-act{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.hdr-act .btn{flex:0 0 auto}

.btn-tg{display:inline-flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--line-strong);border-radius:var(--pill);cursor:pointer;
  color:var(--text);font:inherit;font-weight:700;font-size:13px;padding:7px 16px;transition:.2s}
.btn-tg:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

.user{display:none;align-items:center;gap:7px;min-width:0;max-width:240px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--pill);
  padding:5px 12px;font-size:12.5px;color:var(--muted)}
/* Потолок на имя: очень длинный ник не должен распирать шапку целиком. */
.user b{color:var(--text);font-weight:700;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user .cnt{flex:0 0 auto;background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:var(--accent-ink);border-radius:var(--pill);padding:0 7px;font-size:11px;font-weight:800}
.user .out{flex:0 0 auto;color:var(--faint);font-size:12px}
.user .out:hover{color:var(--accent);text-decoration:none}

/* Второй ряд — только на страницах инструментов */
.subhead{position:sticky;top:var(--hdr-h);z-index:55;border-bottom:1px solid var(--line);
  background:rgba(10,12,16,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.subnav{display:flex;align-items:center;gap:4px;height:var(--sub-h);
  margin:0 -11px;padding:0 11px;overflow-x:auto;scrollbar-width:none;scroll-padding-left:11px}
.subnav::-webkit-scrollbar{display:none}
.subnav a{color:var(--muted);font-size:12.5px;font-weight:600;padding:5px 11px;
  border-radius:var(--pill);border:1px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--text);text-decoration:none;border-color:var(--line)}
.subnav a.on{color:var(--accent);border-color:var(--line-strong);background:var(--panel)}
.tools-page main{padding-top:34px}
.subnav .mark{margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--accent);background:rgba(255,194,75,.14);border-radius:var(--pill);padding:1px 6px}

/* ── Кнопки: один компонент на оба сайта ──────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--pill);cursor:pointer;font:inherit;font-weight:800;
  font-size:16px;padding:13px 28px;transition:.2s;text-decoration:none;
  -webkit-appearance:none;appearance:none}
.btn.main{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:var(--accent-ink)}
.btn.main:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:none;border:1px solid var(--line-strong);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.sm{padding:8px 17px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:default;filter:none;transform:none}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── Футер: один на обе половины ──────────────────────────────────────── */
footer{padding:44px 0 60px;color:var(--faint);font-size:14.5px}
footer a{color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
.fbrand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:800;color:var(--text);margin-bottom:8px}
.fbrand img{width:20px;height:20px}
.foot>div:first-child{max-width:420px}
.fnav{display:grid;grid-template-columns:auto auto;gap:6px 26px;align-content:start}
.fnav a{font-size:14px}

/* ── Появление секций при скролле (класс .rv, включается только с JS) ──── */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ── Адаптив шапки: меню уходит на свою строку раньше, чем что-то обрежется ── */
@media (max-width:1040px){
  .hdr-in{flex-wrap:wrap;padding-top:9px;padding-bottom:9px;gap:9px 12px}
  .brand{order:1}
  .hdr-act{order:2;margin-left:auto}
  /* меню на своей строке: выносим только внутренний паддинг пилюли, бокс остаётся в гаттере */
  .nav{order:3;flex-basis:100%;margin:0 -11px;padding:0 11px;
    overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .subhead{top:auto;position:static}
}
/* На телефоне прокрутка меню не находится руками — переносим в два ряда */
@media (max-width:640px){
  .nav{flex-wrap:wrap;overflow:visible;row-gap:2px;
    -webkit-mask-image:none;mask-image:none}
  .subnav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .subnav a{padding:5px 9px}
}
@media (max-width:640px){
  .brand{font-size:15px}
  .brand .brand-tail::before{margin:0 6px}
  .user{max-width:190px}
  footer{padding:34px 0 46px}
  .fnav{grid-template-columns:auto}
}
@media (max-width:460px){
  .brand .brand-tail{display:none}
  .hdr-act .btn{padding:8px 14px}
}