:root{--blue:#0B5CFF;--blue-d:#0A48C7;--ink:#04061c;--ink2:#4a5570;--bg:#F5F7FB;
      --line:#e7ebf3;--card:#fff;--r:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
     font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.center{text-align:center;margin-top:28px}
.center-block{text-align:center}
.hidden{display:none!important}

/* шапка */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{font-weight:800;color:var(--ink);font-size:17px;letter-spacing:-.2px;white-space:nowrap}
.logo-m{color:var(--blue)}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--ink2);font-size:15px}
.nav a:hover{color:var(--blue)}
.hdr-cta{display:none}
.hdr.scrolled .hdr-cta{display:inline-flex}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
     padding:14px 26px;border-radius:999px;border:none;cursor:pointer;font:inherit;
     font-size:17px;font-weight:700;text-align:center}
.btn-sm{min-height:40px;padding:9px 16px;font-size:15px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-outline{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-white{background:#fff;color:var(--blue)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* типографика секций */
.sec{padding:76px 0}
.sec.alt{background:#fff}
h1{font-size:46px;line-height:1.12;letter-spacing:-1px;margin:0 0 18px}
h2{font-size:32px;line-height:1.2;letter-spacing:-.6px;margin:0 0 16px}
h2.big{font-size:38px}
h3{font-size:19px;line-height:1.3;margin:0 0 8px}
.over{color:var(--blue);font-weight:700;font-size:14px;letter-spacing:.06em;
      text-transform:uppercase;margin:0 0 10px}
.lead{font-size:19px;color:var(--ink2);margin:0 0 26px}
.body{color:var(--ink2);margin:0 0 18px}
.body.sub{margin-bottom:28px}
.body.close{margin-top:26px;font-weight:600;color:var(--ink)}
.fine{font-size:14px;color:#7a8290;margin:12px 0 0}
.fine.light{color:rgba(255,255,255,.8)}

/* первый экран */
.hero{padding:64px 0 72px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero-shot img{border-radius:var(--r);box-shadow:0 18px 50px rgba(4,6,28,.14);
               border:1px solid var(--line);background:#fff}

/* плитки и карточки */
.tiles-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tile h3{color:var(--blue)}
.tile p{margin:0;color:var(--ink2);font-size:16px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card p{margin:0;color:var(--ink2);font-size:16px}
.role{color:var(--blue);font-weight:700;font-size:14px;margin:0 0 6px;text-transform:uppercase;
      letter-spacing:.05em}
.grid-9{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card.accent{background:var(--blue);border-color:var(--blue);color:#fff}
.card.accent p{color:rgba(255,255,255,.92)}
.card.wide{grid-column:span 2}
.truck-svg{width:100%;height:auto;margin:16px 0 8px}
.svg-cap{font-size:14px;color:rgba(255,255,255,.85)!important}

/* шаги */
.steps{list-style:none;padding:0;margin:34px 0 0;display:grid;
       grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.steps:before{content:"";position:absolute;top:22px;left:12%;right:12%;height:2px;
              background:var(--line)}
.steps li{position:relative;text-align:center;padding-top:0}
.dot{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
     border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:18px;
     margin-bottom:14px;position:relative;z-index:1}
.steps p{margin:0;color:var(--ink2);font-size:15px}

/* тезисы */
.theses{list-style:none;padding:0;margin:30px 0 0}
.theses li{display:grid;grid-template-columns:64px 1fr;gap:12px 20px;margin-bottom:30px}
.num{grid-row:span 2;font-size:44px;font-weight:800;color:var(--blue);line-height:1;
     letter-spacing:-2px}
.theses h3{margin:6px 0 6px}
.theses p{margin:0;color:var(--ink2)}

/* инверсный блок */
.sec.invert{background:var(--blue);color:#fff}
.sec.invert .over{color:rgba(255,255,255,.75)}
.sec.invert h2,.sec.invert h3{color:#fff}
.sec.invert .body{color:rgba(255,255,255,.9)}
.tiles-3.on-dark .tile{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.tiles-3.on-dark .tile h3{color:#fff}
.tiles-3.on-dark .tile p{color:rgba(255,255,255,.85)}
.link-light{color:#fff;text-decoration:underline}

/* переписка */
.chat-title{margin:30px 0 14px;font-size:17px;color:rgba(255,255,255,.85)}
.chat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
      border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;max-width:760px}
.msg{max-width:80%;padding:13px 16px;border-radius:16px;font-size:16px;line-height:1.5}
.msg.in{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;background:#DCF3E4;color:#0d2b17;border-bottom-right-radius:5px}
.file{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;background:#fff;
      border-radius:10px;font-size:14px;color:var(--ink);font-weight:600}
.file-i{background:#c7433a;color:#fff;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700}
.techbox{margin-top:26px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
         border-radius:12px;padding:18px;font-family:ui-monospace,Menlo,Consolas,monospace;
         font-size:14px;line-height:1.6}
.techbox p{margin:0 0 8px;color:rgba(255,255,255,.92)}
.techbox a{color:#fff;text-decoration:underline}

/* виджет */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-top:24px}
/* элементы grid по умолчанию min-width:auto — из-за этого блок кода распирал страницу */
.two-col>*{min-width:0}
.grid-9>*,.cards-3>*,.tiles-3>*,.steps>*,.theses>*{min-width:0}
.code{background:#04061c;color:#9fe8b0;border-radius:12px;padding:16px;overflow-x:auto;
      max-width:100%;white-space:pre;
      font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;margin:0}
.shot img{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 10px 30px rgba(4,6,28,.10)}

/* вопросы */
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:700;font-size:17px;
             position:relative;padding-right:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:20px;top:15px;font-size:24px;
                   color:var(--blue);font-weight:400}
.faq[open] summary:after{content:"–"}
.faq p{margin:0;padding:0 20px 18px;color:var(--ink2)}

/* финал и форма */
.final{background:var(--blue);color:#fff;padding:76px 0}
.final h2{color:#fff}
.final .body{color:rgba(255,255,255,.9)}
.req{margin-top:26px;text-align:left}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.req label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:rgba(255,255,255,.85)}
.req input{min-height:52px;padding:12px 14px;border-radius:12px;border:1px solid transparent;
           font-size:16px;font-family:inherit;color:var(--ink);background:#fff;width:100%}
.req input:focus{outline:3px solid rgba(255,255,255,.5)}
.wide-btn{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:#ffd7d3;margin:12px 0 0;font-size:15px}
.ok{color:#d8ffe8;margin:12px 0 0;font-size:17px;font-weight:700}

/* футер */
.ftr{background:#04061c;color:#fff;padding:40px 0}
.ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;align-items:start}
.ftr-name{font-weight:800;margin:0 0 6px}
.ftr .fine{color:rgba(255,255,255,.65)}
.ftr-nav{display:flex;flex-direction:column;gap:8px}
.ftr-nav a{color:#fff;font-size:15px}
.ftr p{margin:0 0 4px}

/* ===== адаптив ===== */
@media (max-width:1100px){
  h1{font-size:38px} h2{font-size:28px} h2.big{font-size:32px}
  .hero-in{grid-template-columns:1fr;gap:34px}
  .card.wide{grid-column:span 3}
}
@media (max-width:900px){
  .sec{padding:56px 0}
  .grid-9,.cards-3,.tiles-3{grid-template-columns:1fr 1fr}
  .card.wide{grid-column:span 2}
  .two-col{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr 1fr;gap:26px}
  .steps:before{display:none}
  .ftr-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .sec,.final{padding:44px 0}
  .hero{padding:36px 0 44px}
  h1{font-size:29px;letter-spacing:-.5px}
  h2{font-size:23px} h2.big{font-size:25px}
  h3{font-size:18px}
  .lead{font-size:17px}
  .nav{gap:8px;flex-wrap:nowrap;min-width:0}
  .nav a:not(.btn){display:none}
  /* на узком экране в шапке остаётся только «Войти»: две кнопки рядом не помещаются,
     а призывов на самой странице и так семь */
  .hdr.scrolled .hdr-cta{display:none}
  .logo{font-size:15px;overflow:hidden;text-overflow:ellipsis}
  .grid-9,.cards-3,.tiles-3{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .steps{grid-template-columns:1fr;gap:18px;text-align:left}
  .steps li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;text-align:left}
  .dot{grid-row:span 2;margin-bottom:0}
  .theses li{grid-template-columns:44px 1fr;gap:6px 14px}
  .num{font-size:34px}
  .msg{max-width:92%}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .req-grid{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr;gap:20px}
  .code{font-size:13px}
}
@media (max-width:380px){
  h1{font-size:26px} h2{font-size:21px}
  .wrap{padding:0 14px}
  .btn{font-size:16px;padding:13px 20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Пометка, что диалог и сумма демонстрационные. Намеренно заметная:
   посетитель не должен принять пример за оферту. */
.demo-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  border-radius:12px;padding:12px 14px;margin:0 0 14px;max-width:760px;
  color:#fff;font-size:15px;line-height:1.45}
.demo-badge{flex:none;background:#fff;color:#0B5CFF;font-weight:800;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.demo-inline{display:inline-block;background:#0B5CFF;color:#fff;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;
  vertical-align:middle;margin:0 2px}
@media (max-width:640px){
  .demo-note{font-size:14px;padding:11px 12px}
  .demo-badge{font-size:12px;padding:4px 10px}
}