:root{
    --bg:#0f1218; --bg2:#151a23; --card:#1a2029; --line:#252d3a;
    --text:#eef1f6; --muted:#93A5BA; --accent:#FF6712; --accent-soft:rgba(255,103,18,.12);
    --ok:#3ecf8e; --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  /* header */
  header{position:sticky;top:0;z-index:10;background:rgba(15,18,24,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:28px;height:64px}
  .mark{font-weight:800;font-size:19px;letter-spacing:-.02em}
  .mark .dot{color:var(--accent)}
  .nav nav{display:flex;gap:22px;font-size:14px;color:var(--muted);margin-left:8px}
  .nav nav a:hover{color:var(--text)}
  .nav .cta{margin-left:auto}
  .btn{display:inline-block;padding:11px 20px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer}
  .btn.primary{background:var(--accent);color:#fff}
  .btn.primary:hover{filter:brightness(1.08)}
  .btn.ghost{border-color:var(--line);color:var(--text)}
  .btn.ghost:hover{border-color:var(--muted)}

  /* hero */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:84px 0 72px}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(255,103,18,.25);padding:6px 12px;border-radius:99px;margin-bottom:20px}
  .eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  h1{font-size:52px;line-height:1.08;font-weight:900;letter-spacing:-.03em;text-wrap:balance}
  h1 .hl{color:var(--accent)}
  .sub{margin-top:20px;font-size:19px;color:var(--muted);max-width:34em}
  .hero-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
  .hero-note{margin-top:18px;font-size:13.5px;color:var(--muted)}
  .hero-note b{color:var(--text);font-weight:600}
  .ticks{margin-top:26px;display:flex;flex-direction:column;gap:9px;font-size:15px}
  .ticks div{display:flex;align-items:center;gap:10px}
  .ticks svg{width:18px;height:18px;flex:none;stroke:var(--ok);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .ticks b{font-weight:600}

  /* «nie zginie» — сценарии вне экрана */
  .safe{background:linear-gradient(180deg,var(--bg2),transparent 70%);border-top:1px solid var(--line)}
  .scen{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .sc{display:flex;gap:16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .sc .ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
  .sc .ic svg{width:21px;height:21px;stroke:var(--accent);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .sc h4{font-size:16px;margin-bottom:5px}
  .sc p{color:var(--muted);font-size:14px}

  /* animated product mock — окно CRM клиента */
  .mock{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .chrome{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;background:#131820}
  .chrome .dots{display:flex;gap:5px}
  .chrome .dots i{width:9px;height:9px;border-radius:50%;background:#2b3442;display:block}
  .chrome .url{flex:1;background:var(--card);border:1px solid var(--line);border-radius:7px;padding:4px 12px;font-size:12px;color:var(--muted);text-align:center}
  .chrome .crm-tag{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(255,103,18,.3);border-radius:99px;padding:3px 9px;white-space:nowrap}
  .mock-body{padding:22px}
  /* «человек с трубкой» — владелец разговаривает, пока экран пишет сам */
  .speaker{position:absolute;bottom:-24px;left:-16px;display:flex;align-items:center;gap:12px;background:#fff;color:#16181d;border-radius:14px;padding:12px 16px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .speaker .ava{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
  .speaker .ava svg{width:20px;height:20px;fill:var(--accent)}
  .speaker .t{font-size:13.5px;font-weight:700;line-height:1.25}
  .speaker .t small{display:block;font-weight:500;color:#68707e;font-size:12px}
  .eq{display:flex;gap:2.5px;align-items:flex-end;height:16px;margin-left:2px}
  .eq i{width:3px;background:var(--accent);border-radius:2px;animation:eq 1s infinite ease-in-out}
  .eq i:nth-child(1){height:6px}.eq i:nth-child(2){height:14px;animation-delay:.15s}
  .eq i:nth-child(3){height:9px;animation-delay:.3s}.eq i:nth-child(4){height:13px;animation-delay:.45s}
  @keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
  .call-card{position:absolute;top:-26px;right:-14px;width:250px;background:#fff;color:#16181d;border-radius:14px;padding:14px 16px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .call-state{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent);display:flex;align-items:center;gap:6px}
  .call-state::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.4s infinite}
  .call-card .who{font-weight:700;margin-top:6px;font-size:15.5px}
  .call-card .veh{color:#68707e;font-size:13px}
  .call-card .act{margin-top:10px;background:var(--accent);color:#fff;text-align:center;border-radius:9px;padding:8px;font-size:13.5px;font-weight:600}
  .form-title{font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin-bottom:14px}
  .field{margin-bottom:12px}
  .field label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--muted);margin-bottom:5px;text-transform:uppercase}
  .field .box{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14.5px;min-height:41px;display:flex;align-items:center;justify-content:space-between}
  .field .box.filled{border-color:rgba(255,103,18,.4);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--card)}
  .tag{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.05em;opacity:0;transform:translateY(3px);transition:.4s}
  .filled .tag{opacity:1;transform:none}
  .typing::after{content:'';border-right:2px solid var(--accent);margin-left:2px;animation:caret .8s infinite}
  @keyframes caret{0%,100%{opacity:0}50%{opacity:1}}

  /* sections */
  section{padding:76px 0}
  .sec-head{max-width:640px;margin-bottom:44px}
  .sec-head h2{font-size:34px;font-weight:800;letter-spacing:-.02em}
  .sec-head p{margin-top:12px;color:var(--muted);font-size:16.5px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .step{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
  .step .n{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .step h3{font-size:18px;margin-bottom:8px}
  .step p{color:var(--muted);font-size:14.5px}

  .modes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .mode{border-radius:var(--radius);padding:30px;border:1px solid var(--line);background:var(--bg2)}
  .mode.hot{border-color:rgba(255,103,18,.45);background:linear-gradient(160deg,rgba(255,103,18,.09),transparent 55%),var(--bg2)}
  .mode .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--accent);margin-bottom:10px}
  .mode h3{font-size:21px;margin-bottom:10px}
  .mode p{color:var(--muted);font-size:15px}
  .mode ul{margin-top:14px;color:var(--muted);font-size:14.5px;list-style:none}
  .mode li{padding-left:22px;position:relative;margin-bottom:7px}
  .mode li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}

  .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .f{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .f h4{font-size:15.5px;margin-bottom:6px}
  .f p{color:var(--muted);font-size:13.5px}

  /* sdk */
  .sdk{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sdk .inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .sdk .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--accent)}
  .sdk h2{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
  .sdk p{color:var(--muted);font-size:16px}
  .sdk ul{margin:18px 0 26px;list-style:none;color:var(--muted);font-size:15px}
  .sdk li{padding-left:24px;position:relative;margin-bottom:9px}
  .sdk li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:700}
  pre{background:#0b0e13;border:1px solid var(--line);border-radius:12px;padding:20px;font-size:12.8px;line-height:1.7;overflow-x:auto;color:#c8d3e0}
  pre .c{color:#5b6b7d} pre .s{color:#8ec07c} pre .k2{color:#ffa94d}

  /* cta */
  .cta-band{text-align:center;padding:84px 0}
  .cta-band h2{font-size:36px;font-weight:900;letter-spacing:-.02em}
  .cta-band p{color:var(--muted);margin:14px 0 30px;font-size:17px}
  .demo-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .demo-form input{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;color:var(--text);font-size:15px;min-width:230px;font-family:inherit}
  .demo-form input::placeholder{color:#5d6b7c}

  footer{border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--muted)}
  .foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .foot .fam{margin-left:auto;display:flex;gap:18px}
  .foot .fam a:hover{color:var(--text)}
  .foot .fam b{color:var(--text);font-weight:600}

  @media (max-width:860px){
    .hero{grid-template-columns:1fr;padding-top:56px}
    .call-card{position:static;width:100%;margin-bottom:16px}
    .speaker{position:static;margin-top:16px}
    .mock{padding-bottom:0}
    h1{font-size:38px}
    .steps,.grid6,.scen{grid-template-columns:1fr}
    .modes{grid-template-columns:1fr}
    .sdk .inner{grid-template-columns:1fr}
    .nav nav{display:none}
  }

  /* language switcher */
  .lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:9px;padding:3px;font-size:12.5px;font-weight:600}
  .lang a{padding:4px 10px;border-radius:7px;color:var(--muted)}
  .lang a.on{background:var(--card);color:var(--text)}
  .lang a:hover{color:var(--text)}

  /* demo form states */
  .demo-form label.consent{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);width:100%;justify-content:center;margin-top:4px;cursor:pointer}
  .demo-form label.consent input{min-width:0;width:16px;height:16px;accent-color:var(--accent)}
  .form-msg{margin-top:16px;font-size:14.5px;min-height:22px}
  .form-msg.ok{color:var(--ok)}
  .form-msg.err{color:#ff7a7a}
  .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* tech: живой лог событий + стат-бейджи */
.tech-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.term{background:#0b0e13;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-family:ui-monospace,'Cascadia Code',Consolas,monospace}
.term-bar{display:flex;align-items:center;gap:5px;padding:10px 14px;border-bottom:1px solid var(--line);background:#10141b}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#2b3442}
.term-bar span{margin-left:8px;font-size:11.5px;color:var(--muted)}
.ll{display:flex;gap:14px;padding:9px 16px;font-size:13px;border-bottom:1px solid rgba(37,45,58,.5);opacity:0;animation:llin .5s forwards}
.ll:last-child{border-bottom:none}
.ll .ev{color:var(--accent);min-width:130px;font-weight:600}
.ll span:last-child{color:#c8d3e0}
@keyframes llin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px}
.stat b{display:block;font-size:24px;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--muted)}
@media (max-width:860px){.tech-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* строка «prowadzisz warsztat?» + архитектурный флоу */
.strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:13px 18px;font-size:14px;color:var(--muted);background:var(--bg2)}
.strip a{color:var(--accent);font-weight:600}
.strip a:hover{filter:brightness(1.15)}
.flow{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:560px;margin:0 auto}
.fb{width:100%;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 18px;font-size:14.5px;font-weight:600}
.fb.hot{border-color:rgba(255,103,18,.5);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--bg2);color:var(--accent)}
.fa{color:var(--muted);font-size:15px;line-height:1}