@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --blue:#1b36c4;      /* чертёжный синий */
  --blue-deep:#12258c;
  --ink:#14171f;
  --paper:#fbfbf8;
  --mist:#eceffa;
  --line:#d5d9e6;
  --grey:#5c6373;
  --lamp:#ffd92e;      /* «лампочка» */
  --display:"Manrope",system-ui,sans-serif;
  --text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--text)}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--lamp);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}

/* Кнопки */
.btn{display:inline-block;font:600 16px/1.2 var(--text);text-decoration:none;padding:16px 26px;border-radius:4px;border:2px solid transparent;cursor:pointer}
.btn-lamp{background:var(--lamp);color:var(--ink)}
.btn-lamp:hover{background:#ffe463}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-deep)}

/* Шапка */
.top{position:sticky;top:0;z-index:50;background:var(--blue);color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.top-in{display:flex;align-items:center;gap:28px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font:700 17px/1 var(--display);text-decoration:none;letter-spacing:-.01em;margin-right:auto}
.logo i{width:14px;height:14px;background:var(--lamp);border-radius:50%;flex:none}
.nav{display:flex;gap:26px}
.nav a{text-decoration:none;font-size:15px;opacity:.88}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.top .btn{padding:11px 18px;font-size:15px}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font:500 15px var(--text);padding:9px 14px;border-radius:4px}

/* Первый экран */
.hero{background:var(--blue);color:#fff;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px}
.hero-in{padding:84px 0 0}
.hero h1{font:700 clamp(31px,5.3vw,66px)/1.08 var(--display);letter-spacing:-.025em;max-width:17ch}
.hero-lead{margin-top:28px;max-width:60ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.9)}
.hero-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.route{margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid #fff;position:relative}
.route li{padding:22px 20px 34px 0;position:relative}
.route li::before{content:"";position:absolute;top:-9px;left:0;width:16px;height:16px;border-radius:50%;background:var(--blue);border:2px solid #fff}
.route li:first-child::before{background:var(--lamp);border-color:var(--lamp)}
.route b{display:block;font:500 clamp(15px,1.6vw,20px)/1.2 var(--display)}
.route span{display:block;margin-top:8px;font-size:15px;color:rgba(255,255,255,.78);max-width:22ch}

/* Общие блоки */
.sec{padding:96px 0}
.sec-tint{background:var(--mist)}
.sec h2{font:700 clamp(26px,3.4vw,42px)/1.14 var(--display);letter-spacing:-.02em;max-width:22ch}
.sec-lead{margin-top:18px;max-width:62ch;color:var(--grey);font-size:18px}

/* Сценарии */
.cases{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cases a{display:block;text-decoration:none;padding:32px 32px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.cases a:hover{background:#fff;box-shadow:inset 4px 0 0 var(--blue)}
.cases h3{font:500 20px/1.25 var(--display);letter-spacing:-.01em}
.cases p{margin-top:12px;color:var(--grey);max-width:46ch}
.cases em{display:inline-block;margin-top:18px;font-style:normal;font-weight:600;color:var(--blue);border-bottom:2px solid var(--lamp)}

/* Услуги */
.practice{display:grid;grid-template-columns:300px 1fr;gap:48px;padding:48px 0;border-top:2px solid var(--ink)}
.practice:first-of-type{margin-top:52px}
.practice-h h3{font:700 24px/1.2 var(--display);letter-spacing:-.015em}
.practice-h p{margin-top:12px;color:var(--grey);font-size:16px}
.svc{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;scroll-margin-top:90px}
.svc:first-child{padding-top:0}
.svc:last-child{border-bottom:0;padding-bottom:0}
.svc h4{margin:0;font:600 19px/1.3 var(--text)}
.svc h4 small{display:block;margin-top:6px;font:400 14px/1.4 var(--text);color:var(--grey)}
.svc p{font-size:16px}
.svc dl{grid-column:2;font-size:15px;color:var(--grey)}
.svc dt{display:inline;font-weight:600;color:var(--ink)}
.svc dd{display:inline}
.next{margin-top:8px;padding:30px 32px;background:var(--paper);border-left:4px solid var(--lamp)}
.next h3{font:500 19px/1.3 var(--display)}
.next p{margin-top:10px;max-width:74ch;color:var(--grey);font-size:16px}

/* Процесс */
.steps{margin-top:52px;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s;border-top:2px solid var(--blue)}
.steps li{counter-increment:s;padding:24px 22px 0 0;position:relative}
.steps li::before{content:counter(s);display:block;font:700 34px/1 var(--display);color:var(--blue);margin-bottom:16px}
.steps h3{font:600 18px/1.3 var(--text)}
.steps p{margin-top:8px;font-size:15px;color:var(--grey)}

/* Продукты */
.prods{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.prod{background:var(--ink);color:#fff;padding:30px 28px 28px;display:flex;flex-direction:column}
.prod .st{align-self:flex-start;font-size:13px;font-weight:600;background:var(--lamp);color:var(--ink);padding:3px 10px;border-radius:99px}
.prod h3{margin-top:22px;font:700 22px/1.2 var(--display)}
.prod p{margin-top:12px;font-size:16px;color:rgba(255,255,255,.78);flex:1}

/* Вопросы */
.faq{margin-top:44px;max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font:400 28px/1 var(--text);color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 44px 22px 0;color:var(--grey);max-width:70ch}

/* Контакт */
.contact{background:var(--blue);color:#fff}
.contact-in{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.contact h2{color:#fff}
.contact .sec-lead{color:rgba(255,255,255,.86)}
.direct{margin-top:36px;font-size:16px;color:rgba(255,255,255,.86)}
.direct a{display:inline-block;margin-top:8px;font:500 22px/1.2 var(--display);color:#fff;text-decoration-color:var(--lamp);text-underline-offset:6px}
form{background:var(--paper);color:var(--ink);padding:34px 32px 32px;border-radius:6px}
form h3{font:500 20px/1.2 var(--display);margin-bottom:22px}
.f{margin-bottom:16px}
.f label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;font:400 16px/1.4 var(--text);color:var(--ink);background:#fff;border:1px solid #b9bfd0;border-radius:4px;padding:12px 14px}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--grey);margin:6px 0 20px}
.agree input{margin-top:4px;width:18px;height:18px;flex:none}
form .btn{width:100%}
.note{margin-top:14px;font-size:14px;color:var(--grey)}
.msg{margin-top:16px;padding:14px 16px;border-radius:4px;font-size:15px;background:var(--mist);border-left:4px solid var(--blue)}
.msg[hidden]{display:none}
.msg.err{border-left-color:#c62828;background:#fdecec}

/* Подвал */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:48px 0 40px;font-size:15px}
.foot-in{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-start;justify-content:space-between}
.foot .logo{color:#fff;margin:0 0 10px}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}

@media (max-width:980px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--blue-deep);flex-direction:column;gap:0;padding:8px 20px 16px}
  .nav.open{display:flex}
  .nav a{padding:13px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.14)}
  .burger{display:block}
  .top .btn{display:none}
  .practice{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--blue)}
  .steps li{padding:0 0 30px 24px}
  .steps li:last-child{padding-bottom:0}
  .prods{grid-template-columns:1fr}
  .contact-in{grid-template-columns:1fr;gap:40px}
}
@media (max-width:680px){
  body{font-size:16px}
  .sec{padding:64px 0}
  .hero-in{padding-top:52px}
  .route{grid-template-columns:1fr;border-top:0;border-left:2px solid #fff;margin-top:48px;margin-bottom:44px}
  .route li{padding:0 0 24px 24px}
  .route li:last-child{padding-bottom:0}
  .route li::before{top:2px;left:-9px}
  .route span{max-width:none}
  .cases{grid-template-columns:1fr}
  .cases a{padding:24px 20px}
  .svc{grid-template-columns:1fr}
  .svc dl{grid-column:1}
  .row2{grid-template-columns:1fr}
  form{padding:26px 20px}
  .next{padding:24px 20px}
  .hero-cta .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The example is an illustrative workflow, drawn with the same type and grid as the page. */
[hidden] { display: none !important; }
:root { scroll-padding-top: 80px; }
.hero-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(42px, 6vw, 96px); align-items: center; }
.hero h1 { max-width: 13ch; font-size: clamp(44px, 5.9vw, 83px); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; }
.hero-lead { max-width: 46ch; }
.hero-in { padding-top: clamp(46px, 6.5vw, 96px); }
.hero .route { margin-top: clamp(42px, 6vw, 84px); }
.flow { background: #f3f3e9; color: var(--ink); padding: clamp(22px, 2.8vw, 42px); border-radius: 3px; box-shadow: 9px 9px 0 #102898; }
.flow figcaption { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.flow-dot { flex: none; width: 9px; height: 9px; background: var(--blue); border-radius: 50%; }
.flow h2 { margin: 13px 0 22px; font: 750 clamp(23px, 2.1vw, 32px)/1.16 var(--display); letter-spacing: -.04em; }
.flow-list { border-top: 1px solid #c6c9c0; }
.flow-list li { position: relative; display: flex; gap: 14px; padding: 15px 0; align-items: flex-start; border-bottom: 1px solid #c6c9c0; }
.flow-mark { flex: none; width: 22px; height: 22px; border: 1px solid var(--blue); border-radius: 50%; display: grid; place-items: center; color: var(--blue); font-size: 13px; font-weight: 700; }
.flow-current { background: var(--lamp); border-color: var(--ink); }
.flow-list strong, .flow-list small { display: block; }
.flow-list strong { font-size: 15px; line-height: 1.4; }
.flow-list small { margin-top: 3px; font-size: 13px; color: #505661; line-height: 1.45; }
.flow-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 20px; color: var(--blue-deep); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.examples { background: #edece1; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; gap: clamp(24px, 5vw, 72px); }
.example-grid article { padding: 20px 0 0; border-top: 2px solid var(--ink); }
.example-type { color: var(--blue-deep); font-size: 14px; font-weight: 700; }
.example-grid h3 { margin: 12px 0; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.035em; }
.example-result { margin-top: 18px; font-size: 15px; color: #414652; }
.example-result strong { display: block; color: var(--ink); }
.direct { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.direct a { font-size: 17px; }
.msg:empty { display: none; }
.form__status--error { background: #fdecec; border-color: #b42121; }
.draft { padding-top: 20px; }
.draft label { display: block; margin-bottom: 6px; font-weight: 600; }
.draft textarea { width: 100%; font: inherit; font-size: 15px; padding: 10px; resize: vertical; }
.draft-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 15px; }
.draft-actions button { cursor: pointer; padding: 8px 12px; color: var(--ink); font: inherit; background: white; border: 1px solid var(--ink); border-radius: 4px; }
[aria-invalid="true"] { outline: 2px solid #b42121; }
:focus-visible { outline-color: var(--blue); }
.top :focus-visible, .hero-copy :focus-visible, .contact .direct :focus-visible, .foot :focus-visible { outline-color: var(--lamp); }
#contact-draft a:focus-visible { outline-color: var(--blue); }
@media (max-width: 760px) {
  .hero-layout, .example-grid { grid-template-columns: 1fr; }
  .hero-layout { gap: 32px; }
  .flow { max-width: 540px; }
  .hero-cta { gap: 10px; margin-top: 24px; }
  .hero-cta .btn { flex: 0 1 auto; padding: 13px 15px; font-size: 15px; }
}
@media (max-width: 680px) {
  .hero .route { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; border: 0; padding: 18px 0 25px; margin: 30px 0 0; border-top: 1px solid #8090e7; }
  .hero .route li { padding: 0; }
  .hero .route li::before { display: none; }
  .hero .route span { margin-top: 4px; font-size: 13px; }
}
@media (max-width: 980px) {
  html:not(.js) .top { position: static; }
  html:not(.js) .top-in { flex-wrap: wrap; padding: 15px 0; }
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav { position: static; background: none; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 12px; padding: 0; }
  html:not(.js) .nav a { font-size: 14px; padding: 3px 0; }
}