/* ============================================================
   Основной лендинг «Агент Смит» (структура из landing/structure.md)
   Добавки к базовому css/style.css. Строго на его токенах:
   монохром-«чертёж», рамки 0.5px, --ink/--paper, без новых цветов.
   ============================================================ */

/* ---------- nav: 4 пункта + бургер ---------- */
.nav-burger{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  background:none; border:0.5px solid var(--line2); border-radius:8px; color:var(--ink);
}
.nav-burger i{ font-size:20px; }
@media(max-width:760px){
  .nav-burger{ display:flex; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:6px 0;
    background:rgba(255,255,255,0.97); backdrop-filter:saturate(180%) blur(10px);
    border-bottom:0.5px solid var(--line);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 28px; font-size:14px; }
  .nav-cta .login{ display:none; }
}

/* ---------- 1. HERO: сплит «текст слева / портрет справа» ---------- */
.hero-split{
  display:grid; grid-template-columns:1.05fr 0.85fr; gap:40px; align-items:stretch;
  text-align:left; padding:60px 28px 12px; max-width:100%;
}
.hero-l{ display:flex; flex-direction:column; }
.hero-l h1{ text-align:left; margin:0 0 18px; max-width:none; }
.hero-l .sub{ text-align:left; margin:0 0 4px; max-width:540px; }
.hero-l .hero-cta{ justify-content:flex-start; margin-top:auto; padding-top:40px; }

/* портрет — плейсхолдер мастера (без гексагона), тихое облако узлов */
.hero-portrait{
  position:relative; aspect-ratio:4/5; max-width:350px; width:100%; margin:0 auto;
  border:0.5px solid var(--line); border-radius:16px; background:var(--paper2);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 20px 50px rgba(0,0,0,0.08);
}
.hero-portrait::before{ /* мягкий ореол */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 110%, rgba(20,20,20,0.06), transparent 60%);
}
.hero-portrait-img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
/* тихое облако узлов (схематический акцент из лого → живые связи) */
.node{ position:absolute; z-index:1; width:7px; height:7px; border-radius:50%; background:var(--ink3); opacity:0.5; }
.node.n1{ top:18%; left:12%; } .node.n2{ top:30%; right:14%; }
.node.n3{ bottom:26%; left:16%; } .node.n4{ top:52%; right:10%; }
.node::after{ content:""; position:absolute; top:50%; left:50%; width:1px; height:44px;
  background:linear-gradient(var(--line2), transparent); transform-origin:top; }
.node.n2::after{ transform:rotate(150deg); } .node.n3::after{ transform:rotate(-30deg); }
.node.n4::after{ transform:rotate(120deg); }

@media(max-width:760px){
  .hero-split{ grid-template-columns:1fr; gap:20px; padding:36px 28px 8px; }
  .hero-portrait{ order:-1; max-width:200px; aspect-ratio:4/5; }
  .hero-portrait .ph-face i{ font-size:96px; }
  .hero-l h1, .hero-l .sub{ text-align:center; }
  .hero-l .sub{ margin-left:auto; margin-right:auto; }
  .hero-l .hero-cta{ justify-content:center; }
}

/* ---------- 2–4. Named jobs ---------- */
.jobs{ max-width:1040px; margin:30px auto 0; padding:0 28px 20px; }
.jobs-intro{ font-size:15px; color:var(--ink2); max-width:640px; margin:0 auto 26px; text-align:center; }
.jobs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.job-card{
  border:0.5px solid var(--line); border-radius:var(--radius-lg); background:#fff; padding:24px;
  display:flex; flex-direction:column; gap:12px; box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.job-ic{ width:38px; height:38px; border:0.5px solid var(--line2); border-radius:9px;
  display:flex; align-items:center; justify-content:center; }
.job-ic i{ font-size:19px; }
.job-card h3{ font-size:16.5px; font-weight:500; margin:2px 0 0; }
.job-card p{ font-size:13.5px; color:var(--ink2); margin:0; line-height:1.55; }
.job-card p strong{ color:var(--ink); font-weight:600; }
.jobs-more{
  max-width:820px; margin:20px auto 0; padding:16px 20px; border:0.5px solid var(--line);
  border-radius:var(--radius-lg); background:var(--paper2); font-size:13.5px; color:var(--ink2);
  line-height:1.6; display:flex; gap:10px;
}
.jobs-more i{ flex-shrink:0; margin-top:2px; color:var(--ink3); font-size:16px; }
@media(max-width:900px){ .jobs-grid{ grid-template-columns:1fr; } }

/* ---------- 6. «Масштабируй себя»: сценка + расплата ---------- */
.scale{ max-width:900px; margin:32px auto 0; padding:0 28px 20px; }
.scale-intro{ font-size:15px; color:var(--ink2); max-width:640px; margin:0 auto 24px; text-align:center; }
.scene{
  max-width:820px; margin:22px auto 0; padding:22px 24px; border:0.5px solid var(--line2);
  border-radius:var(--radius-lg); background:var(--paper2); font-size:14.5px; color:var(--ink);
  line-height:1.65; position:relative;
}
.scene::before{ content:"\201C"; position:absolute; top:2px; left:14px; font-size:44px; color:var(--ink3); opacity:0.4; }
.scene strong{ font-weight:600; }
.payoff{ max-width:700px; margin:24px auto 0; text-align:center; font-size:16px; color:var(--ink); line-height:1.55; }

/* ---------- 8. Уровни автономности (кратко) ---------- */
.levels{ max-width:900px; margin:32px auto 0; padding:0 28px 12px; }
.levels-note{ text-align:center; font-size:13px; color:var(--ink3); margin:18px auto 0; }
.levels-note a{ text-decoration:underline; }

/* ---------- 9. Цены v2 — два плана + тумблер оплаты ---------- */
.plans{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:16px; align-items:stretch;
  max-width:820px; margin:32px auto 0; }
.plan{ position:relative; display:flex; flex-direction:column; padding:26px 24px 24px;
  border:0.5px solid var(--line2); border-radius:var(--radius-lg); background:#fff; }
.plan-main{ border-color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 18px 48px rgba(0,0,0,0.09); }
.plan-biz{ background:var(--paper2); }
.plan-badge{ position:absolute; top:0; right:22px; transform:translateY(-50%);
  background:var(--ink); color:#fff; font-size:11px; font-weight:600; letter-spacing:0.02em;
  padding:4px 12px; border-radius:999px; }

.plan-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.plan-name{ font-size:18px; font-weight:600; margin:0; }
.plan-tag{ font-size:11.5px; color:var(--ink3); border:0.5px solid var(--line2); border-radius:999px; padding:3px 10px; }

.plan-toggle{ display:inline-flex; padding:3px; background:var(--paper3); border-radius:999px; }
.pt-opt{ border:0; background:none; cursor:pointer; font-size:12.5px; color:var(--ink2);
  padding:6px 14px; border-radius:999px; transition:background .15s ease, color .15s ease; }
.pt-opt.active{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.12); }

.plan-body[hidden]{ display:none; }
.plan-price{ font-size:32px; font-weight:500; letter-spacing:-0.02em; }
.plan-price small{ font-size:14px; color:var(--ink3); font-weight:400; margin-left:3px; }
.plan-lead{ font-size:13.5px; color:var(--ink2); margin:8px 0 16px; line-height:1.5; }
.plan-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.plan-list li{ position:relative; padding-left:24px; font-size:13.5px; color:var(--ink); line-height:1.5; }
.plan-list li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--ink); font-size:13px; font-weight:700; }
.plan-biz .plan-list li::before{ color:var(--ink3); }
.plan .ph{ display:block; margin-top:2px; font-size:12px; color:var(--ink3); } /* плейсхолдер-числа — уточнить */

.plan-cta{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box; }

@media(max-width:760px){ .plans{ grid-template-columns:1fr; } }

/* ---------- 12. Футер (4 колонки) ---------- */
.foot2{ border-top:0.5px solid var(--line); }
.foot2-in{ max-width:var(--maxw); margin:0 auto; padding:44px 28px 28px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:28px; }
.foot2-brand .brand{ margin-bottom:12px; }
.foot2-brand .tag{ font-size:13px; color:var(--ink2); max-width:230px; line-height:1.55; }
.foot2-col h4{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink3);
  font-weight:500; margin:0 0 14px; }
.foot2-col a{ display:block; font-size:13.5px; color:var(--ink2); padding:5px 0; }
.foot2-col a:hover{ color:var(--ink); }
.foot2-bottom{ max-width:var(--maxw); margin:0 auto; padding:16px 28px 28px;
  border-top:0.5px solid var(--line); font-size:12.5px; color:var(--ink3); }
@media(max-width:760px){
  .foot2-in{ grid-template-columns:1fr 1fr; gap:24px; }
  .foot2-brand{ grid-column:1 / -1; }
}
@media(max-width:460px){ .foot2-in{ grid-template-columns:1fr; } }

/* ==========================================================================
   Чат-виджет «плавающий Смит» (structure.md §«Чат-виджет»)
   Состав: чат (общение) + Рабочая область (исполнение). Без списка задач и
   меню разделов. Дизайн-язык — из виндового прототипа, токены — лендинга.
   ========================================================================== */
.smith-widget{ position:fixed; right:24px; bottom:24px; z-index:1000; font-family:var(--font); }

/* --- лаунчер: кружок с портретом Смита + тихая реплика --- */
.sw-launcher{
  position:relative; width:62px; height:62px; border-radius:50%; padding:0; border:0.5px solid var(--line2);
  background:var(--paper2); overflow:visible; box-shadow:0 4px 14px rgba(0,0,0,0.16); transition:transform .15s ease, box-shadow .15s ease;
}
.sw-launcher:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.22); }
.sw-launcher img{ width:100%; height:100%; border-radius:50%; object-fit:contain; object-position:center; display:block; background:#fff; }
.sw-launcher-dot{ position:absolute; right:3px; bottom:3px; width:13px; height:13px; border-radius:50%;
  background:#22c55e; border:2.5px solid var(--paper); }
.sw-invite{
  position:absolute; right:74px; bottom:12px; max-width:230px; background:var(--paper); color:var(--ink);
  border:0.5px solid var(--line); border-radius:14px 14px 4px 14px; padding:11px 32px 11px 14px; font-size:13px; line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,0.12); white-space:normal;
}
.sw-invite-x{ position:absolute; top:6px; right:8px; background:none; border:0; color:var(--ink3); font-size:16px; line-height:1; padding:2px; }
.smith-widget.open .sw-launcher, .smith-widget.open .sw-invite,
.smith-widget.invite-hidden .sw-invite{ display:none; }

/* блокируем прокрутку фона, пока открыт виджет */
body.sw-locked{ overflow:hidden; }

/* --- затемнение фона (scrim) --- */
.sw-scrim{
  position:fixed; inset:0; z-index:1; background:rgba(17,17,17,0.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .24s ease;
}
.smith-widget.open .sw-scrim{ opacity:1; pointer-events:auto; }

/* --- окно виджета: панель-drawer справа во всю высоту --- */
.sw-panel{
  position:fixed; top:0; right:0; z-index:2; height:100dvh; width:min(440px, 100vw);
  background:var(--paper); border-left:0.5px solid var(--line2); overflow:hidden;
  box-shadow:-24px 0 70px rgba(0,0,0,0.20);
  display:flex; flex-direction:column; transform:translateX(100%);
  pointer-events:none; transition:transform .26s cubic-bezier(.4,0,.2,1), width .22s ease;
}
.smith-widget.open .sw-panel{ transform:translateX(0); pointer-events:auto; }
.smith-widget.ws-open .sw-panel{ width:min(760px, 100vw); }

/* шапка */
.sw-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:0.5px solid var(--line); background:var(--paper2); }
.sw-head-id{ display:flex; align-items:center; gap:10px; }
.sw-avatar{ width:38px; height:38px; border-radius:50%; overflow:hidden; border:0.5px solid var(--line2); flex-shrink:0; }
.sw-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.sw-head-name{ font-size:14.5px; font-weight:600; }
.sw-head-status{ font-size:11.5px; color:var(--ink3); display:flex; align-items:center; gap:5px; }
.sw-online{ width:7px; height:7px; border-radius:50%; background:#22c55e; }
.sw-head-actions{ display:flex; gap:4px; }
.sw-head-actions button{ width:32px; height:32px; border-radius:8px; border:0; background:none; color:var(--ink2);
  display:flex; align-items:center; justify-content:center; font-size:17px; }
.sw-head-actions button:hover{ background:var(--paper3); color:var(--ink); }

/* тело: чат + рабочая область */
.sw-body{ flex:1; display:flex; min-height:0; position:relative; }
.sw-chat{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sw-stream{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; }
.sw-msg{ max-width:86%; padding:10px 13px; font-size:13.5px; line-height:1.5; }
.sw-msg.bot{ align-self:flex-start; background:var(--paper3); color:var(--ink); border-radius:14px 14px 14px 4px; }
.sw-msg.me{ align-self:flex-end; background:var(--ink); color:#fff; border-radius:14px 14px 4px 14px; }
.sw-msg.note{ align-self:center; background:none; color:var(--ink3); font-size:12px; padding:2px 0; max-width:100%; }
.sw-quick{ display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; }
.sw-quick button{ border:0.5px solid var(--line2); background:#fff; color:var(--ink); border-radius:999px;
  padding:7px 13px; font-size:12.5px; }
.sw-quick button:hover{ background:var(--paper2); }

/* композер */
.sw-composer{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:0.5px solid var(--line); background:var(--paper); }
.sw-composer input{ flex:1; border:0.5px solid var(--line2); border-radius:999px; padding:11px 15px; font-size:13.5px;
  outline:none; color:var(--ink); background:#fff; }
.sw-composer input:focus{ border-color:var(--line2); box-shadow:0 0 0 3px rgba(20,20,20,0.05); }
.sw-send{ width:40px; height:40px; flex-shrink:0; border:0; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; }
.sw-send:hover{ background:#000; }
.sw-send:disabled, .sw-composer input:disabled{ opacity:.55; cursor:wait; }

/* рабочая область (исполнение) */
.sw-workspace{ width:312px; flex-shrink:0; border-left:0.5px solid var(--line); background:var(--paper2);
  display:none; flex-direction:column; min-height:0; }
.smith-widget.ws-open .sw-workspace{ display:flex; }
.sw-ws-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border-bottom:0.5px solid var(--line); }
.sw-ws-head span{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink); }
.sw-ws-head span i{ font-size:15px; color:var(--ink3); }
.sw-ws-close{ width:26px; height:26px; border:0; background:none; color:var(--ink3); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.sw-ws-close:hover{ background:var(--paper3); color:var(--ink); }
.sw-ws-scroll{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.sw-ws-empty{ margin:auto; text-align:center; color:var(--ink3); font-size:12.5px; line-height:1.5; padding:20px 10px; }
.sw-ws-empty i{ font-size:24px; display:block; margin:0 auto 8px; opacity:.5; }
.sw-ws-card{ border:0.5px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.sw-ws-card-head{ display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:0.5px solid var(--line); font-size:12.5px; font-weight:600; }
.sw-ws-card-head i{ font-size:15px; color:var(--ink2); }
.sw-ws-card-head .tag{ margin-left:auto; font-size:10.5px; font-weight:600; color:#b45309; background:#fef3c7; padding:2px 7px; border-radius:999px; }
.sw-ws-body{ padding:12px 13px; }
.sw-kv{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:4px 0; }
.sw-kv .k{ color:var(--ink2); } .sw-kv .v{ color:var(--ink); font-weight:600; } .sw-kv .v.warn{ color:#dc2626; }
.sw-proc{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:6px 0; border-top:0.5px solid var(--line); }
.sw-proc:first-of-type{ border-top:0; }
.sw-proc .p{ color:var(--ink); } .sw-proc .u{ color:var(--ink3); font-variant-numeric:tabular-nums; }
.sw-ws-verdict{ font-size:12.5px; color:var(--ink2); line-height:1.5; padding:11px 13px; border-top:0.5px solid var(--line); background:var(--paper2); }
.sw-ws-verdict strong{ color:var(--ink); }
.sw-code{ margin:0; white-space:pre-wrap; word-break:break-word; font-size:12px; line-height:1.45; color:var(--ink); background:var(--paper2);
  border:0.5px solid var(--line); border-radius:8px; padding:10px; max-height:260px; overflow:auto; }
.sw-cta-card .sw-ws-body{ display:flex; flex-direction:column; gap:10px; }
.sw-cta-text{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink2); }
.sw-cta-link{ width:100%; justify-content:center; text-align:center; }

/* подвал: конвертер в установку */
.sw-foot{ padding:12px 14px; border-top:0.5px solid var(--line); background:var(--paper); display:flex; gap:10px; }
.sw-foot .btn-dark-lg{ flex:1; justify-content:center; }

/* мобилка: фуллскрин, рабочая область — оверлей по кнопке */
@media(max-width:600px){
  .smith-widget{ right:16px; bottom:16px; }
  .sw-scrim{ display:none; }
  .sw-panel, .smith-widget.ws-open .sw-panel{ position:fixed; inset:0; width:100vw; height:100dvh; border-radius:0; border:0; }
  /* на мобилке рабочая область — оверлей поверх чата по кнопке */
  .sw-workspace{ position:absolute; inset:0; width:100%; border-left:0; z-index:2; }
}

/* ============================================================
   Страница «Бизнес» (business.php): hero + тур по консоли + сетка отличий.
   Механика тура — референс Lansweeper; оформление на базовых токенах.
   ============================================================ */

/* рамка-«браузер» (.app-window/.app-bar из style.css) со статичным скрином */
.app-window img{ display:block; width:100%; height:auto; }

/* активный пункт nav на этой странице */
.nav-links a.active{ color:var(--ink); font-weight:500; }

/* ---------- hero: слева текст, справа уголок консоли ---------- */
.biz-hero .eyebrow{ text-align:left; }
.biz-hero-shot{ display:flex; align-items:center; justify-content:center; }
.biz-hero-shot .app-window{ margin:0; width:100%; max-width:540px; }
@media(max-width:760px){
  .biz-hero .eyebrow{ text-align:center; }
  .biz-hero-shot{ margin-top:20px; }
  .biz-hero-shot .app-window{ max-width:460px; }
}

/* ---------- тур по консоли: липкое меню + сцена ---------- */
.tour{
  display:grid; grid-template-columns:290px 1fr; gap:22px;
  max-width:1060px; margin:26px auto 0; padding:0 28px 26px; align-items:start;
}
.tour-menu{ display:flex; flex-direction:column; gap:8px; position:sticky; top:88px; }
.tour-opt{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:13px 14px; border:0.5px solid var(--line2); border-radius:var(--radius-lg);
  background:#fff; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s;
}
.tour-opt:hover{ border-color:var(--ink3); }
.tour-opt.active{ border-color:var(--ink); background:var(--paper2); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.tour-ic{
  flex-shrink:0; width:36px; height:36px; border:0.5px solid var(--line2); border-radius:9px;
  display:flex; align-items:center; justify-content:center; background:#fff;
}
.tour-ic i{ font-size:18px; }
.tour-opt.active .tour-ic{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tour-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tour-txt b{ font-size:14.5px; font-weight:600; }
.tour-txt small{ font-size:12px; color:var(--ink3); }

.tour-stage{ min-width:0; }
.tour-stage .app-window{ max-width:none; margin:0; }
.tour-stage .app-window img{ background:#f4f5f7; }
.tour-cap{ font-size:14px; color:var(--ink2); line-height:1.6; margin:16px 4px 0; max-width:640px; }

@media(max-width:900px){
  .tour{ grid-template-columns:1fr; gap:16px; }
  /* меню → горизонтальная лента чипов, без sticky */
  .tour-menu{ position:static; flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .tour-opt{ flex:0 0 auto; }
  .tour-txt small{ display:none; }
}

/* ---------- отличия для бизнеса: 2×2 ---------- */
.biz-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  max-width:820px; margin:30px auto 0; padding:0 28px 20px;
}
.biz-card{
  border:0.5px solid var(--line); border-radius:var(--radius-lg); background:#fff; padding:24px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.biz-card h3{ font-size:16.5px; font-weight:600; margin:2px 0 0; }
.biz-card p{ font-size:13.5px; color:var(--ink2); margin:0; line-height:1.55; }
@media(max-width:760px){ .biz-grid{ grid-template-columns:1fr; } }