:root{--bg:#1a1a1a;--card:#292929;--card2:#333;--blue:#7294ea;--green:#b7ea72;--mute:#cacaca;--dark:#1d1d1d;--head:'Comfortaa',sans-serif;--body:'Inter',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden;overflow-y:scroll}
body{background:var(--bg);color:#fff;font:300 22px/normal var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:none}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#page{width:1520px;margin:0 auto;position:relative}
.hl{color:var(--green)}
/* декоративные слои Tilda не должны перекрывать кнопки и ссылки */
.s{pointer-events:none}
a.s{pointer-events:auto}
.tag{display:inline-block;background:var(--card);border-radius:30px;padding:40px 40px 30px;font:300 55px/normal var(--head);text-transform:uppercase;white-space:nowrap}
.tag.full{display:block;text-align:center}
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;height:57px;padding:0 25px;border-radius:6px;font:500 22px/normal var(--body);white-space:nowrap;transition:opacity .2s}
.btn:hover{opacity:.85}.btn.o{border:1px solid #fff;color:#fff}.btn.w{background:#fff;color:var(--dark)}.btn.g{background:var(--green);color:var(--dark)}
.btn.testbot{border-radius:6px;font-weight:400;animation:none}
.btn.o.testbot{border:1px solid #fff;background:transparent;color:#fff}
.btn.w.testbot{background:#fff;color:var(--dark);border:0}
.btn.testbot:hover{opacity:.85;box-shadow:none}
.ex .testbot{color:var(--dark)}
.arr{width:22px;height:11px}.eye{width:24px;height:24px}
/* шапка — идентична главной */
.hd{height:105px;position:relative;padding:0;z-index:5}
.hd .logo{position:absolute;left:0;top:30px;font:400 34px/1 var(--head);letter-spacing:.06em}
.logo img{width:158px;height:28px;object-fit:contain}
.hd nav{position:absolute;right:20px;top:29px;display:flex;gap:40px;align-items:center;font-size:22px;height:44px}
.hd nav a{font-size:22px;opacity:1}.hd nav a.on{color:var(--green)}
.hd nav .btn{height:auto;width:auto;padding:9px 20px;font-weight:400;font-size:22px;opacity:1;color:var(--dark);border-radius:6px}
/* стабильная геометрия шапки: фиксированные ширины не дают шрифту сдвигать навигацию */
@media(min-width:1000px){
.hd nav>a{flex:0 0 auto;text-align:center;white-space:nowrap}
.hd nav>a:nth-child(1){width:86.5px}
.hd nav>a:nth-child(2){width:172.8px}
.hd nav>a:nth-child(3){width:98.4px}
.hd nav>a:nth-child(4){width:124.4px}
.hd nav>a:nth-child(5){width:49.8px}
.hd nav>a:nth-child(6){width:231px;height:44px;padding:0;justify-content:center}
}
.burger{display:none;width:44px;height:44px;border-radius:8px;background:var(--card);flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger i{width:20px;height:2px;background:#fff;display:block}
.mmenu{display:none}
/* hero */
.hero2{position:relative;height:516px;margin-top:90px}
.hero2 .a{position:absolute;left:25px;top:172px;width:370px;height:88px;background-repeat:no-repeat;background-size:contain;background-position:center}
.hero2 .b{position:absolute;left:360px;top:0;width:1170px;height:365px;background-repeat:no-repeat;background-size:contain;background-position:center}
.hero2 .t{position:absolute;left:0;top:414px;width:732px}
.hero2 .bt{position:absolute;left:984px;top:427px;width:319px}.hero2 .bt2{position:absolute;left:1324px;top:427px;width:196px}
.sec{margin-top:45px}
/* карточки */
.card{background:var(--card);border-radius:15px;position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center}
.card h3{font:300 36px/normal var(--body)}.card p{color:var(--mute)}
.card .ic{width:24px;height:24px;margin-bottom:21px}
/* плюсы */
.pl{display:grid;grid-template-columns:repeat(3,487px);gap:30px}
.pl .tag{align-self:start;justify-self:start;grid-column:1;grid-row:1}
.pl .big{grid-column:2/4;grid-row:1;height:249px;padding:19px 40px}
.pl .big p{width:560px;margin-top:20px}.pl .big h3{margin-top:0}
.pl .sm{height:320px;padding:20px 40px 40px;display:flex;flex-direction:column;justify-content:space-between}
.pl .sm p{width:437px}
/* разновидности */
.rz{display:grid;grid-template-columns:745px 745px;gap:30px;margin-top:51px;justify-content:space-between}
.rz .card{padding:40px}
.rz .A{grid-row:1/3;height:592px;display:flex;flex-direction:column;justify-content:flex-end;gap:30px}
.rz .B,.rz .C{height:281px}.rz .B h3{margin-top:2px}.rz .C h3{margin-top:29px}
.rz .B p,.rz .C p{margin-top:40px;width:538px}
.rz .D{grid-column:1/3;height:400px;padding:114px 40px 0}.rz .D p{margin-top:36px;width:700px}
.rz .A p{width:560px}
/* аккордеон */
.acc{margin:0 auto;max-width:1160px}
.sec.accwrap{margin-top:100px}
.acc details{background:var(--card);border-radius:15px;margin-bottom:20px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:57px;padding:15px 30px;font:300 20px/1.35 Inter,sans-serif}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:28px;line-height:1;color:#fff;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .body{padding:0 30px 15px;color:#fff;font:300 16px/1.55 Comfortaa,sans-serif;max-width:1100px}
.acc .body p{padding:0 0 10px}.acc ul{list-style:disc;padding:0 0 10px 20px;margin:0}.acc li{padding:2px 0;color:#fff;font:300 16px/1.55 Comfortaa,sans-serif}
/* зазор между заголовком-тегом и списком (чат-боты) */
#services .acc{margin-top:100px}
/* примеры */
.ex{margin-top:51px;height:535px;padding:55px 40px}
.ex p.tx{width:717px}
.ex .btn{position:absolute;left:40px;top:277px;width:319px}
.ex .ph{position:absolute;right:89px;top:55px;width:538px;height:479px}
.ex .msg{position:absolute;left:740px;top:240px;width:650px;height:229px;background:var(--bg);border:1px solid #444;border-radius:15px;padding:20px 30px;font-size:18px;color:var(--mute)}
/* форма */
.lead{margin-top:130px;display:flex;justify-content:space-between;gap:40px;align-items:flex-start}
.lead h2{font:300 80px/1.1 var(--head);text-transform:uppercase}
.lead p{font:300 36px/1.222 var(--head);color:var(--mute);margin-top:30px}
.lf{width:583px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:84px}
.lf input{background:transparent;border:1px solid var(--green);border-radius:6px;color:var(--green);padding:0 20px;font:300 26px var(--body);width:100%;height:51px}
.lf input::placeholder{color:#6e8c45}
.lf small{font-size:16px;color:#ddd;line-height:1.5}.lf small a{color:var(--green)}
.lf .btn{width:100%;height:51px;font-size:26px}
.fmsg{grid-column:1/3;color:var(--green);min-height:22px;font-size:18px}
/* компактные горизонтальные формы внутри секций (веб-дизайн, CRM) */
.zf{display:flex;flex-wrap:wrap;gap:24px;align-items:center;width:auto}
.zf input{width:180px;flex:none;font-size:18px;padding:0 14px}
.zf .btn{width:auto;min-width:170px;flex:none}
.zf .fmsg{width:100%;grid-column:auto}
.zf input:focus{background:transparent}
/* компактная форма в одну строку (веб-дизайн, CRM и др.) */
@media(min-width:1000px){
  form.lf.zf{display:flex;flex-wrap:nowrap;gap:16px;align-items:center;width:583px}
  form.lf.zf input{flex:1 1 0;width:auto;min-width:0}
  form.lf.zf .btn{width:auto;min-width:0;padding:0 18px;font-size:18px}
  form.lf.zf .fmsg{position:absolute;left:0;top:100%;margin-top:4px;width:100%;min-height:0}
}
@media(max-width:999px){
  form.lf.zf{display:flex;flex-direction:column;gap:10px}
  form.lf.zf .btn{width:100%}
  form.lf.zf .fmsg{position:static;margin:0;min-height:0}
}
/* всплывающая подсказка у иконок info */
[data-tip]{position:relative;cursor:help}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  width:290px;max-width:70vw;background:#202020;border:1px solid #444;border-radius:12px;
  padding:14px 16px;font:300 15px/1.5 Inter,sans-serif;color:#fff;text-align:left;z-index:70;pointer-events:none;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{
  content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:#444;z-index:70;pointer-events:none}
/* футер */
.foot{display:grid;grid-template-columns:318px 420px 399px;justify-content:space-between;gap:30px;align-items:stretch;margin:110px 0 70px}
.foot>div{background:var(--card);border-radius:15px;padding:32px 36px;min-height:200px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;font:300 22px/1.4 var(--body)}
.foot .foot-brand{justify-content:space-between;gap:24px}
.foot-brand img{width:248px;height:44px;object-fit:contain;object-position:left center}
.foot-brand small{font:400 22px/1.4 var(--body);color:var(--mute)}
.foot .foot-materials{justify-content:center;gap:6px}
.foot-materials a{color:var(--mute);font-size:20px;line-height:1.45;transition:color .2s}
.foot-materials a:hover{color:#fff}
.foot-materials a:first-child{font-size:28px;line-height:1.3;color:var(--green);margin-bottom:10px}
.foot-materials a:nth-child(2){color:var(--green);text-decoration:underline}
.foot .foot-contact{justify-content:center;gap:6px;font-size:32px;line-height:1.3}
.foot-contact .mail,.foot-contact .phone-link{color:#fff;font:300 32px/1.3 var(--body);transition:color .2s}
.foot-contact a:hover{color:var(--green)}
.socials{display:flex;gap:12px;margin-top:12px}
.socials a{width:40px;height:40px;border-radius:50%;background:#1f1f1f;display:grid;place-items:center;transition:background .2s,transform .2s}
.socials a:hover{background:#3b3b3b;transform:translateY(-2px)}
.socials svg{width:20px;height:20px;fill:#fff}
@media(max-width:1199px){
.foot{grid-template-columns:1fr 1fr;gap:20px;margin:70px 0 50px}
.foot>div{min-height:0;padding:26px}
.foot .foot-contact{grid-column:1/-1}
}
/* попап */
.pop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:50}.pop[hidden]{display:none}
.pbox{background:var(--card);border-radius:20px;padding:40px;width:min(480px,92vw);position:relative}
.pbox h3{font:300 36px var(--head);margin-bottom:24px}.pbox .lf{width:100%;grid-template-columns:1fr;margin:0}.pbox .fmsg{grid-column:auto}
.px{position:absolute;right:18px;top:12px;font-size:34px;line-height:1}
/* мобильная версия */
@media(max-width:999px){
body{font-size:16px}#page{width:100%;padding:0 16px}
.tag{font-size:28px;padding:22px 24px 16px;border-radius:20px;white-space:normal}
.btn{font-size:16px;height:48px;padding:0 18px}
.hd{height:70px;min-height:0;padding:0;display:flex;align-items:center;justify-content:space-between}
.hd .logo{position:static;top:auto;left:auto}
.hd nav{display:none}.burger{display:flex}.logo img{width:124px;height:auto;max-height:none}
.mmenu{display:none;position:fixed;inset:70px 0 0;background:var(--bg);z-index:9;padding:24px 20px;flex-direction:column;gap:6px;overflow:auto}
.mmenu:not([hidden]){display:flex}.mmenu a{font-size:26px;padding:12px 0;border-bottom:1px solid #333}.mmenu .btn{margin-top:20px;border:0;font-size:18px}
.hero2{height:auto;display:flex;flex-direction:column;gap:18px}
.hero2>*{position:static!important;width:100%!important}
.hero2 .a{height:70px}.hero2 .b{height:230px}.hero2 .btn{width:100%!important}
.sec{margin-top:60px}
.pl,.rz{display:flex;flex-direction:column;gap:12px}.rz{margin-top:24px}
.pl .tag{align-self:flex-start}
.pl .big,.pl .sm,.rz .card{height:auto!important;min-height:200px;padding:24px!important}
.pl .big p,.pl .sm p,.rz p{width:auto!important;margin-top:14px!important}.rz .card h3{margin-top:0!important}
.pl .sm{gap:14px}.rz .A{min-height:300px}.rz .D{min-height:260px}
.card h3{font-size:24px}
.acc{margin-top:28px}.acc details{margin-bottom:10px}.acc summary{font-size:18px;padding:14px 18px;min-height:60px}.acc .body{padding:0 18px 18px;font-size:16px}
.sec.accwrap{margin-top:40px}#services .acc{margin-top:28px}
.zf{flex-direction:column;align-items:stretch;width:100%}
.zf input,.zf .btn{width:100%}
.ex{height:auto;padding:24px;display:flex;flex-direction:column;gap:18px}.ex p.tx{width:auto}
.ex .btn,.ex .ph,.ex .msg{position:static!important;width:100%!important;height:auto}.ex .ph{max-width:340px;margin:0 auto}.ex .msg{padding:16px;font-size:15px}
.lead{flex-direction:column;margin-top:60px}.lead h2{font-size:32px}.lead p{font-size:18px}
.lf{width:100%;grid-template-columns:1fr;margin-top:6px}.fmsg{grid-column:auto}.lf input,.lf .btn{font-size:18px}
.foot{grid-template-columns:1fr;margin:60px 0 40px;gap:14px}.foot>div{min-height:0;padding:24px;font-size:18px;width:100%}
.foot .foot-brand{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.foot-brand img{width:170px;height:30px}.foot-brand small{font-size:15px}
.foot .foot-materials{justify-content:flex-start;gap:8px}.foot-materials a:first-child{font-size:22px;margin-bottom:4px}.foot-materials a{font-size:17px}
.foot .foot-contact{justify-content:flex-start;gap:4px}.foot-contact .mail,.foot-contact .phone-link{font-size:22px}
.socials a{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}