/* Uklad — shared styles for "AI employee by role" spoke landing pages.
   Единая дизайн-система v5 «дерево» / знак «Пара» (та же, что slazhivanie.ru).
   ДНК: тёплый=человек (глина #B85C3C), холодный=агент (зелень #3D7A3E). Served at /employee.css. */
:root{
  --dark:#201C17; --darker:#191510; --ink-dark:#2A241C;
  --light:#F4EFE6; --white:#fff; --paper-2:#EDE6D8; --core:#EBD9CE;
  --line-light:#E5DCCD; --line-dark:#3A332A;
  --t1:#201C17; --t2:#6B6258; --t3:#8E877E;
  --t1d:#F4EFE6; --t2d:#C9BEAE; --t3d:#9E9384;
  --green:#3D7A3E; --green-d:#2F5F30; --green-soft:#E2EEDB; --green-lite:#9CC791;
  --clay:#B85C3C; --clay-d:#A24E32; --clay-soft:#F2E3DB;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--light);color:var(--t1);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.h-sec,.hero h1,.about-lead,.stat .num,.case .metric,.logo{font-family:'Fraunces','IBM Plex Sans',serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-family:'Fraunces',serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--clay-d);margin-bottom:18px}
.eyebrow.on-dark{color:var(--green-lite)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.1;font-weight:700}
.h-sec{font-size:clamp(30px,4.4vw,46px);font-weight:700;color:var(--t1)}
.sec{padding:88px 0}
.sec.light-block{background:var(--white);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.green{color:var(--green)}
.lead{font-size:clamp(17px,2vw,19px);color:var(--t2);max-width:720px;line-height:1.55}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-weight:600;font-size:16px;padding:14px 24px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:var(--green-d)}
.btn-ghost{background:transparent;color:var(--t1);border-color:var(--line-light)}
.btn-ghost:hover{border-color:var(--clay)}
.btn-ghost.on-dark{color:var(--t1d);border-color:#4A4238}
.btn-ghost.on-dark:hover{border-color:var(--green-lite)}
.link-arrow{color:var(--green-d);font-weight:600;font-size:15px;white-space:nowrap}
.link-arrow:hover{color:var(--clay-d)}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(244,239,230,.86);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line-light)}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--t1)}
.logo .mark{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}
.logo .mark svg{width:28px;height:28px}
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{font-size:15px;color:var(--t2);font-weight:500}
.nav-links a:hover{color:var(--t1)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-right .login{font-size:15px;font-weight:600;color:var(--t1)}
.nav-right .login:hover{color:var(--clay-d)}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--t1);margin:4px 0;border-radius:2px}
.mmenu{display:none;border-top:1px solid var(--line-light);background:var(--light);padding:14px 0}
.mmenu.open{display:block}
.mmenu a{display:block;padding:11px 24px;font-size:16px;color:var(--t2);font-weight:500}
.mmenu .btn{margin:12px 24px 4px;width:calc(100% - 48px)}
.crumbs{font-size:13.5px;color:var(--t3);padding:16px 0 0}
.crumbs a{color:var(--clay-d);font-weight:600}
/* hero (светлый, бумага-градиент) */
.hero{background:linear-gradient(135deg,var(--clay-soft),var(--green-soft));color:var(--t1);position:relative;overflow:hidden}
.hero-radar{position:absolute;top:-120px;right:-120px;width:520px;height:520px;border-radius:50%;opacity:.7;pointer-events:none;background:radial-gradient(circle,transparent 0 38%,rgba(61,122,62,.10) 38% 39%,transparent 39%),radial-gradient(circle,transparent 0 56%,rgba(184,92,60,.08) 56% 57%,transparent 57%),radial-gradient(circle,transparent 0 74%,rgba(61,122,62,.07) 74% 75%,transparent 75%),radial-gradient(circle,transparent 0 92%,rgba(184,92,60,.06) 92% 93%,transparent 93%)}
.hero-inner{padding:60px 0 76px;position:relative;z-index:2;max-width:920px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d);background:var(--green-soft);border:1px solid #CFE3C4;padding:7px 14px;border-radius:999px;margin-bottom:28px}
.hero h1{font-size:clamp(34px,5.6vw,58px);font-weight:700;letter-spacing:-.02em}
.hero .sub{margin-top:26px;font-size:clamp(17px,2.1vw,21px);color:var(--t2);max-width:660px;line-height:1.5}
.hero-btns{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
/* cards / grids */
.card{background:var(--white);border:1px solid var(--line-light);border-radius:16px;padding:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ic{width:46px;height:46px;border-radius:12px;background:var(--green-soft);display:grid;place-items:center;margin-bottom:18px}
.ic svg{width:22px;height:22px;stroke:var(--green-d);fill:none}
.card h3{font-size:19px;font-weight:700;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--t2);line-height:1.5}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.sec-head .h-sec{max-width:680px}
.about-lead{font-size:clamp(24px,3.1vw,34px);font-weight:600;letter-spacing:-.01em;max-width:880px;line-height:1.18}
.about-lead .green{color:var(--green-d)}
.about-sub{margin-top:20px;font-size:16.5px;color:var(--t2);max-width:700px}
/* pain list — глина (боль=человек) */
.pains{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.pains li{font-size:15px;color:var(--t2);background:var(--white);border:1px solid var(--line-light);border-radius:13px;padding:18px 18px 18px 46px;position:relative;line-height:1.45}
.pains li::before{content:"";position:absolute;left:18px;top:20px;width:14px;height:14px;border-radius:50%;background:var(--clay-soft);border:2px solid var(--clay)}
/* demo / product screens — тёплое «окно продукта» */
.demo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
.win{background:var(--ink-dark);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(32,28,23,.5)}
.win-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-dark);background:#332C22}
.win-bar .dot{width:10px;height:10px;border-radius:50%;background:#4A4238}
.win-bar .ttl{margin-left:6px;font-size:13px;font-weight:600;color:var(--t2d)}
.win-bar .live{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-lite);display:flex;align-items:center;gap:6px}
.win-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-lite);box-shadow:0 0 0 3px rgba(61,122,62,.25)}
.chat{padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--ink-dark)}
.msg{max-width:82%;font-size:14px;line-height:1.45;padding:10px 13px;border-radius:14px}
.msg .who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px;opacity:.7}
.msg.in{align-self:flex-start;background:#332C22;color:var(--t1d);border-bottom-left-radius:5px}
.msg.in .who{color:#C9BEAE}
.msg.bot{align-self:flex-end;background:var(--green-soft);color:#1E3A1E;border-bottom-right-radius:5px}
.msg.bot .who{color:var(--green-d)}
.msg.note{align-self:center;max-width:90%;text-align:center;background:transparent;color:var(--t3d);font-size:12px;padding:2px}
/* deal / record card mockup */
.deal{background:var(--white);border:1px solid var(--line-light);border-radius:16px;overflow:hidden}
.deal-h{padding:16px 18px;border-bottom:1px solid var(--line-light);display:flex;align-items:center;gap:12px}
.deal-h .co{font-weight:700;font-size:16px}
.deal-h .src{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.stages{display:flex;gap:6px;padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line-light)}
.stg{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--paper-2);color:var(--t3)}
.stg.on{background:var(--green-soft);color:var(--green-d)}
.stg.warn{background:#F3E3C8;color:#8A6A2C}
.stg.risk{background:var(--clay-soft);color:var(--clay-d)}
.deal-b{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.drow{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.drow .k{color:var(--t3)}
.drow .v{color:var(--t1);font-weight:600;text-align:right}
.score{display:flex;align-items:center;gap:10px}
.score .bar{flex:1;height:7px;border-radius:5px;background:var(--paper-2);overflow:hidden}
.score .bar i{display:block;height:100%;width:78%;background:var(--green);border-radius:5px}
.score .bar i.mid{width:56%;background:#C79A44}
.score .bar i.low{width:30%;background:var(--clay)}
.deal-f{padding:13px 18px;border-top:1px solid var(--line-light);font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:8px}
.deal-f b{color:var(--green-d)}
/* checklist inside a card */
.klist{list-style:none;display:flex;flex-direction:column;gap:10px}
.klist li{font-size:14px;color:var(--t1);padding-left:26px;position:relative;line-height:1.45}
.klist li::before{content:"✓";position:absolute;left:4px;color:var(--green-d);font-weight:700}
.klist li.x::before{content:"!";color:var(--clay-d)}
/* flow */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.fnode{background:var(--white);border:1px solid var(--line-light);border-radius:16px;padding:24px;position:relative}
.fnode .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-d);background:var(--green-soft);padding:4px 10px;border-radius:7px;margin-bottom:14px}
.fnode h3{font-size:18px;margin-bottom:8px}
.fnode p{font-size:14px;color:var(--t2);line-height:1.5}
.fnode .arrow{position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;z-index:2;color:var(--white);font-weight:800;font-size:14px}
.flow .fnode:last-child .arrow{display:none}
.handoff{margin-top:20px;background:var(--dark);color:var(--t1d);border-radius:16px;padding:24px 26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.handoff .em{font-size:26px}
.handoff p{font-size:15.5px;color:var(--t2d);line-height:1.5;max-width:820px}
.handoff b{color:var(--t1d)}
/* chips */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.chip{border:1px solid var(--line-light);border-radius:13px;padding:18px;background:var(--white)}
.chip .nm{font-weight:700;font-size:15px;margin-bottom:3px}
.chip .kd{font-size:13px;color:var(--t3)}
.secure{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.secure li{font-size:14.5px;color:var(--t2);padding-left:26px;position:relative;line-height:1.45}
.secure li::before{content:"🛡";position:absolute;left:0;top:0;font-size:14px}
/* case */
.case-card{background:var(--white);border:1px solid var(--line-light);border-radius:20px;padding:30px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.case-card .metric{font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--green-d);letter-spacing:-.01em;line-height:1;font-family:'Fraunces',serif}
.case-card .meta{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.case-card .cx{flex:1;min-width:240px}
.case-card p{font-size:15px;color:var(--t2);margin-top:6px}
/* faq */
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
.faq details{background:var(--white);border:1px solid var(--line-light);border-radius:14px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Fraunces','IBM Plex Sans',serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay-d);font-weight:700;font-size:24px;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq .faq-a{padding:0 24px 22px;color:var(--t2);font-size:15.5px;line-height:1.55}
/* contact form */
.form-wrap{background:var(--white);border:1px solid var(--line-light);border-radius:20px;padding:32px;box-shadow:0 1px 3px rgba(32,28,23,.04),0 12px 30px rgba(32,28,23,.05)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:7px}
.field input,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--t1);background:var(--light);border:1px solid var(--line-light);border-radius:11px;padding:12px 14px;transition:.15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);background:var(--white)}
.field textarea{min-height:96px;resize:vertical}
.form-consent{font-size:12.5px;color:var(--t3);margin-top:6px;line-height:1.45}
.form-ok{display:none;text-align:center;padding:30px 10px}
.form-ok.show{display:block}
.form-ok .ic-ok{width:54px;height:54px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 16px}
.form-ok h3{font-size:21px;font-weight:700;margin-bottom:10px}
.form-ok p{font-size:15px;color:var(--t2);max-width:380px;margin:0 auto}
/* footer */
footer{background:var(--darker);color:var(--t3d);padding:40px 0;font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .logo{color:var(--t1d);font-size:17px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--t3d)}
.foot-links a:hover{color:var(--t1d)}
/* responsive */
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-right{display:none}
  .grid-4,.grid-3,.chips{grid-template-columns:1fr 1fr}
  .demo-grid,.flow,.pains,.secure{grid-template-columns:1fr}
  .flow .fnode .arrow{display:none}
  .sec{padding:64px 0}
}
@media(max-width:560px){
  body{font-size:16px}
  .grid-4,.grid-3,.chips{grid-template-columns:1fr}
  .hero-inner{padding:40px 0 48px}
  .hero h1{font-size:clamp(26px,7.5vw,34px)}
  .hero .sub{font-size:16px}
  .hero-btns .btn{flex:1}
  .sec{padding:52px 0}
  .card,.case-card{padding:22px}
  .form-row{grid-template-columns:1fr}
  .form-wrap{padding:22px}
}