/* Проектный слой AI Маржа. Только раскладка. Стили ядра не переопределяются. */
:root{ --shell:1280px; --gut:32px; }
@media(max-width:820px){ :root{ --gut:20px } }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg-app);color:var(--fg-default);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}

/* ---------- шапка ---------- */
.site{position:fixed;inset:0 0 auto 0;z-index:50}
.site .shell{display:flex;align-items:center;gap:var(--sp-6);height:68px}
.site .logo{display:flex;align-items:center;gap:10px;font-weight:var(--fw-bold);
  font-size:var(--fs-lg);letter-spacing:-.01em;color:#f6f5f0}
.site .logo i{width:26px;height:26px;border-radius:var(--r-sm);background:var(--c-brand);
  display:grid;place-items:center;font-style:normal;color:#fff;font-size:13px;font-weight:700}
.site nav{margin-left:auto;display:flex;gap:var(--sp-6);font-size:var(--fs-md);color:#9b9a92}
.site nav a:hover{color:#f6f5f0}
@media(max-width:900px){.site nav{display:none}}

/* ---------- кадр 1: канонная тёмная тема, отскоупленная на секцию ---------- */
.hero {
  --bg-app: #0b0f0d;
  --bg-surface: #12161a;
  --bg-surface-2: #171c20;
  --bg-sidebar: #070a09;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(22, 163, 74, 0.18);
  --bg-inset: rgba(255, 255, 255, 0.05);
  --chart-shadow: rgba(0, 0, 0, 0.40);   /* глубже на тёмном фоне */
  --chart-card-shadow:       0 14px 40px rgba(0, 0, 0, 0.35);
  --chart-card-shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.50);
  --chart-tip-bg: color-mix(in srgb, var(--bg-surface-2) 88%, transparent);
  --chart-tip-border: color-mix(in srgb, #ffffff 12%, transparent);

  --fg-default: #ecebe6;
  --fg-muted: #9b9a92;
  --fg-subtle: #74736c;
  --fg-on-sidebar: #9b9a92;

  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --accent: #22c55e;
  --accent-hover: #16a34a;
  --ring: rgba(34, 197, 94, 0.3);

  --c-surface: #12161a;
  --c-surface-2: #171c20;
  --c-line: rgba(255,255,255,0.10);
  --c-line-2: rgba(255,255,255,0.14);
  --c-line-3: rgba(255,255,255,0.22);
  --c-ink-900: #f6f5f0;   /* максимальный контраст на тёмном фоне */
  --c-ink-800: #ecebe6;
  --c-ink-700: #c4c2b8;
  --c-ink-600: #b4b2a8;
  --c-ink-500: #9b9a92;
  --c-brand-soft: rgba(22, 163, 74, 0.18);
  --c-ai-soft: rgba(47, 109, 240, 0.18);
  --c-success-bg: rgba(26, 143, 94, 0.18);
  --c-warning-bg: rgba(178, 107, 0, 0.18);
  --c-danger-bg: rgba(201, 53, 53, 0.18);
  --c-info-bg: rgba(47, 109, 240, 0.18);
  --c-blue-bg: rgba(47, 109, 240, 0.18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);

  --grad-canvas:
    radial-gradient(1100px 600px at 92% -8%, rgba(22, 163, 74, 0.08), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(47, 109, 240, 0.06), transparent 55%);
}


.hero{min-height:100dvh;display:flex;flex-direction:column;padding-top:68px;
  position:relative;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background:#0b0e11}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(72% 58% at 50% 34%,rgba(34,197,94,.09),transparent 68%),
             radial-gradient(120% 90% at 50% 50%,transparent 30%,#07090b 92%)}
.hero-in{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(10px,1.6vh,20px);padding:clamp(8px,2vh,28px) 0}
.eyebrow{font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-brand)}
.hero h1{margin:0;font-family:var(--font-serif);font-weight:var(--fw-semibold);
  font-size:clamp(28px,min(4.2vw,5.4vh),52px);line-height:1.08;letter-spacing:-.015em;
  color:var(--c-ink-900);max-width:20ch}
.hero .sub{margin:0;max-width:60ch;font-size:clamp(14px,1.7vh,17px);color:var(--fg-muted)}
.hero-cue{padding-bottom:clamp(12px,2.4vh,26px);text-align:center;
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-500)}

/* чат — главный герой первого экрана */
.chatbox{width:min(780px,100%);margin-top:clamp(6px,1.4vh,14px);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;
  display:flex;flex-direction:column;max-height:min(52vh,460px)}
.chatbox__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--c-line);font-size:var(--fs-sm);color:var(--fg-muted)}
.chatbox__body{padding:var(--sp-5) var(--sp-5) var(--sp-3);overflow:auto;flex:1;min-height:0}
.chatbox__foot{padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:1px solid var(--c-line)}
.composer{display:flex;align-items:flex-end;gap:10px}
.composer textarea{flex:1;min-height:52px;max-height:120px;resize:none;
  background:var(--bg-inset);border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:11px 14px;color:var(--fg-default);font:inherit;outline:none}
.composer textarea:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--ring)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- кадр 2 ---------- */
.built{padding:clamp(56px,8vh,104px) 0 clamp(64px,9vh,120px);background:var(--bg-app)}
.built__head{max-width:60ch;margin:0 auto clamp(28px,4vh,48px);text-align:center}
.built__head h2{margin:12px 0 0;font-family:var(--font-serif);font-weight:var(--fw-semibold);
  font-size:clamp(24px,3vw,40px);line-height:1.12;color:var(--c-ink-900)}
.built__head p{margin:14px 0 0;font-size:var(--fs-lg);color:var(--fg-muted)}

.frame{max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.window{border:1px solid var(--c-line);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--bg-surface)}
.window__chrome{display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--bg-surface-2);border-bottom:1px solid var(--c-line)}
.window__chrome i{width:10px;height:10px;border-radius:50%;background:var(--c-line-3);font-style:normal}
.window__url{margin-left:12px;font-size:var(--fs-xs);color:var(--fg-subtle)}
.wsgrid{display:grid;grid-template-columns:232px 1fr;min-height:640px}
@media(max-width:900px){.wsgrid{grid-template-columns:1fr}.ws-side{display:none}}
.ws-side{background:var(--bg-sidebar);padding:var(--sp-4) var(--sp-3);display:flex;flex-direction:column;gap:2px}
.ws-side .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 16px;color:#fff;font-weight:var(--fw-semibold)}
.ws-side .brand i{width:24px;height:24px;border-radius:8px;background:var(--c-brand);display:grid;place-items:center;font-style:normal;font-size:12px}
.ws-side .grp{margin:14px 10px 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.34)}
.ws-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  color:rgba(255,255,255,.72);font-size:var(--fs-md)}
.ws-item.is-on{background:rgba(34,197,94,.16);color:#fff}
.ws-item .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--c-brand)}
.ws-main{display:flex;flex-direction:column;min-width:0}
.ws-top{display:flex;align-items:center;gap:var(--sp-4);padding:14px var(--sp-6);
  border-bottom:1px solid var(--c-line);background:var(--bg-surface)}
.ws-crumb{font-size:var(--fs-md);color:var(--fg-muted)}
.ws-crumb b{color:var(--fg-default);font-weight:var(--fw-semibold)}
.ws-top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.ws-body{padding:var(--sp-6);display:grid;gap:var(--sp-5);background:var(--bg-app);flex:1;min-width:0}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.row-2{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--sp-5)}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:1180px){.row-4{grid-template-columns:repeat(2,1fr)}.row-2,.row-3{grid-template-columns:1fr}}
.kpi{padding:var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--bg-surface)}
.kpi .k{font-size:var(--fs-sm);color:var(--fg-muted)}
.kpi .v{margin-top:8px;font-size:26px;font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--c-ink-900)}
.kpi .d{margin-top:6px;font-size:var(--fs-sm);color:var(--c-success)}
.kpi .d.down{color:var(--c-success)}
.panel{border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--bg-surface);overflow:hidden}
.panel__h{display:flex;align-items:center;gap:10px;padding:14px var(--sp-4);border-bottom:1px solid var(--c-line)}
.panel__h h3{margin:0;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--c-ink-900)}
.panel__h .right{margin-left:auto;display:flex;gap:8px}
.panel__b{padding:var(--sp-4)}
.panel__b--flush{padding:0}
.spark{width:100%;height:170px;display:block}
.agent{display:flex;flex-direction:column;gap:10px;padding:var(--sp-4);
  border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--bg-surface)}
.agent .t{display:flex;align-items:center;gap:10px}
.agent .t b{font-size:var(--fs-md);color:var(--c-ink-900)}
.agent ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:var(--fs-sm);color:var(--fg-muted)}
.agent ul li{display:flex;justify-content:space-between;gap:12px}
.agent ul li b{color:var(--c-ink-900);font-weight:var(--fw-semibold)}
.flow{display:grid;gap:10px}
.flow div{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--fg-muted)}
.flow span{padding:4px 10px;border:1px solid var(--c-line);border-radius:var(--r-full);
  background:var(--bg-surface);color:var(--c-ink-800);font-size:var(--fs-xs)}
.flow em{font-style:normal;color:var(--c-ink-400)}
.tsteps{display:grid;gap:2px}
.tsteps .tstep{align-items:flex-start}
.tsteps .tstep__ico{position:relative}
.row-2{align-items:start}
/* шапка над светлым кадром №2 */
.site.is-solid{background:var(--bg-surface);border-bottom:1px solid var(--c-line)}
.site.is-solid .logo,.site.is-solid nav a:hover{color:var(--c-ink-900)}
.site.is-solid nav a{color:var(--fg-muted)}