* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

 

html {
    -webkit-font-smoothing: antialiased;
    font-family: 'Open Sans', sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    margin: 0
}

ul {
    padding: 0;
    margin: 0
}

input {
    box-shadow: none!important
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block
}

audio,canvas,video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}
.noDisplay { display: none }
h1 { margin: 0 0 calc(var(--grid-gap)*1) 0  }

:root {
    --grid-gap: 24px;
    --header-height: 90px;
    --greed-gap: 24px;
    --menu-color-text: #000;
    --menu-color-text-hover: #666;

    --block-border-radius: 32px;
    --button-border-radius: 32px;

    --button-background-color: #000;
    --button-background-color-hover: #333;
    --button-text-color: #fff;
    --header-font-size: 16px;


--color-error: rgb(255 101 115);
    --text-color-title: #1f1f1f;

    --color-link: rgb(0, 119, 255);
    --color-success:  rgb(69, 205, 117);

 
    --footer-color-text: #666;
    --footer-color-link-hover: rgb(0, 119, 255);
    --footer-color-link-hover: #000;
    --heading-line-height: 1.2;

    --header-font-size-0: 54px;
    --heading-font-size-1: 48px;
    --heading-font-size-2: 24px;

    --heading-font-size-3: 32px;

    --text-font-size-0: 24px;
    --text-font-size-2: 22px;
    --text-font-size-1: 18px;
    --text-font-size-3: 16px;

    --color-1: #f1f6fb;
    --color-2: #333;
    --color-3: #999;
    --color-4: #424343;
 


}

.success { color: var(--color-success); }
a { color: var(--color-link); text-decoration: none }

a.button { 
    border-radius: var(--button-border-radius); 
    border: 0px; 
    background: var(--button-background-color); 
    color: var(--button-text-color) !important; 
    padding: calc(var(--grid-gap)) calc(var(--grid-gap)*4);
    line-height: 100%;  
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: var(--header-font-size);
    transition: all .2s ease;
}

a.button:hover { background: var(--button-background-color-hover); }

.ui-error { font-size: 14px; color: var(--color-error);  display: none; box-sizing: border-box; padding: calc(var(--grid-gap)/2) 0  }

.display { display: block; }

button { 
    border-radius: var(--button-border-radius); 
    border: 0px; 
    background: var(--button-background-color); 
    color: var(--button-text-color) !important; 
    padding: calc(var(--grid-gap)) calc(var(--grid-gap)*2);
    line-height: 100%;  
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: var(--header-font-size);
    transition: all .2s ease;
    cursor: pointer;
        position: relative;
}

input { 
    border-radius: var(--button-border-radius); 
    border: 0px; 
    background: #eee; 
    color: #000 !important; 
    padding: calc(var(--grid-gap));
    line-height: 100%;  
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: var(--header-font-size);
    transition: all .2s ease;
}

.table {display:  table;}
.cell { display: table-cell; }
.grid { display: grid; }

.grid-gap { grid-gap: var(--grid-gap); }
.grid-12 {  grid-template-columns: repeat(12, [col] 1fr);}
 
.grid-12 {    grid-column: span 12;}
.grid-11 {    grid-column: span 11;}
.grid-10 {    grid-column: span 10; }
.grid-9 {    grid-column: span 9;}
.grid-8 {    grid-column: span 8;}
.grid-7 {    grid-column: span 7;}
.grid-6 {    grid-column: span 6;}
.grid-5 {    grid-column: span 5;}
.grid-4 {    grid-column: span 4;}
.grid-3 {    grid-column: span 3;}
.grid-2 {    grid-column: span 2;}
.grid-1 {    grid-column: span 1;}

.flex { display: flex;    align-items: center;    gap: var(--grid-gap);    justify-content: space-between;    }

.align-self { align-self: auto; }
.align-center { text-align:  center; }

.margin-bottom { margin-bottom:  var(--grid-gap); }
.margin-bottom-half { margin-bottom:  calc(var(--grid-gap)/2); }

.border-radius {    border-radius: var(--block-border-radius);}

.padding {padding: calc(2 * var(--grid-gap));}
.padding-1 {padding: calc(var(--grid-gap)/2);}

.tracking-form { padding: calc(var(--grid-gap));
    max-width: 400px;
    background: #e6f3ff;
    margin: 0 auto;     border-radius: var(--block-border-radius); }
section.tracking p { max-width: 600px; margin-left: auto; margin-right: auto; }

.tracking-form input { width: 100%; background:  #fff}
.tracking-form button { width: 100% }


.wrapper {  padding: calc(2 * var(--grid-gap)) 0 calc(var(--grid-gap) * 1);  margin-left: auto;  margin-right: auto; max-width: 1224px;    flex-basis: 100%;       box-sizing: content-box;}
 
button.button-loading span {
  visibility: hidden;
  opacity: 0;
}

button.button-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}
 
header {
    display: flex;
    height: var(--header-height);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid #dde1e5;
    z-index: 3;
    user-select: none;
    background: hsla(0,0%,100%,.82);
    backdrop-filter: blur(16px);

}

section  {   }

section.main { background: var(--color-1); }

.tile-1 { background: var(--color-1); }

header .logo {  align-items: center;    gap: var(--grid-gap);    justify-content: space-between;}
header .logo .logo-wrapper { border-style: none; background: #eee; padding: 10px 20px; border-radius: var(--button-border-radius); }
header .logo .logo-wrapper img { height: 16px; width: auto; }

 
footer .logo img {  height: 10px; width: auto; margin-bottom:  var(--grid-gap); }


header .menu {  align-items: center; gap: 0px; justify-content: flex-end; font-size: var(--header-font-size); }

 header .menuToggle { display: none;  background: url(../img/burger.svg) center center; height: 30px; width: 30px }

.main .colab {  justify-content: center; margin-bottom: calc(2 * var(--grid-gap)); gap: calc(var(--grid-gap)/2)}

.colab div { align-items: top;    gap: 0;    justify-content: space-between; }
.colab .partner-1, .colab .partner-2 { height: 40px; }
.colab img { height: 40px; }

.colab .partner-1 img { height: 30px; }

.colab .cross { width: 30px; height: 30px; background: url(../img/cross.svg) center center; background-size: 20px 20px; background-repeat: no-repeat; opacity: 0.2; }

.colab .cross .line {   width: 2px; height: 15px; background: #eee;  }

header .menu-item { white-space: nowrap;  padding: calc(var(--grid-gap) * .5); }
header .menu-item a { color: var(--menu-color-text); text-decoration: none}
header .menu-item a:hover { color: var(--menu-color-text-hover); }


.main {    padding: calc(4 * var(--grid-gap)) 0 calc(2 * var(--grid-gap));}
.main h1 { font-size: var(--header-font-size-0); }
.main p { font-size: var(--text-font-size-0); color: var(--color-4); line-height: 125%; margin-bottom: var(--grid-gap); max-width: 80%; margin-left: auto; margin-right: auto}

 
.heading-1 { 
    color: var(--text-color-title);
    font-weight: 700;
    line-height: var(--heading-line-height);
    font-size: var(--heading-font-size-1);   
}

.heading-2 { 
    color: var(--text-color-title);
    font-weight: 700;
    line-height: var(--heading-line-height);
    font-size: var(--heading-font-size-2); 
    margin-bottom: calc(var(--grid-gap)/2)
}

.screenshot-1 { margin-top: calc(var(--grid-gap)); text-align: center; }
.screenshot-1 img { max-height: 450px; width: auto; max-width: 100%; box-shadow: 1px 1px 20px #e1f0ff, -1px -1px 20px #e1f0ff; border-radius: 10px; border: 10px solid #fff; background: #fff  }

.video-1 { margin-top: calc(var(--grid-gap)); text-align: center; }
.video-1 video {
cursor: auto;   width: 100%;  border-radius: 0px; display: block; object-fit: cover; box-shadow: 1px 1px 20px #e1f0ff, -1px -1px 20px #e1f0ff; border-radius: 10px; border: 10px solid #fff; background: #fff }


.text-1   {    font-size: var(--text-font-size-1); }
 

.img-1 { margin-top: calc(var(--grid-gap)); text-align: center; }
.img-1 img {    max-width: 100%;  height: auto; box-shadow: 1px 1px 20px #e1f0ff, -1px -1px 20px #e1f0ff; border-radius: 10px; border: 10px solid #fff; background: #fff  }


.text-1   {    font-size: var(--text-font-size-1); line-height: 125% }

.faq { margin-bottom: var(--grid-gap); }
.faq .question { color: var(--text-color-title); font-weight: 700; line-height: 1.15; font-size: var(--text-font-size-2); margin-bottom: calc(var(--grid-gap)/2) }

.faq .answer   {    font-size: var(--text-font-size-1); line-height: 125%; color: var(--color-3) }
 
footer {  font-size: 14px;  color: #b1b7be;}
footer { background: var(--color-1);  }
footer a {text-decoration: none; color: var(--color-2);}
footer a:hover { color: var(--color-3)}
footer .horizontal {  display: flex; gap: 20px;}
footer li { list-style: none; padding: 0 0 calc(var(--grid-gap)/2) 0; font-size: var(--text-font-size-3) }
footer li b {font-size: 14px; color: var(--text-color-title)}
footer div {vertical-align: top}

.apps { margin-bottom:  calc(var(--grid-gap)*1) }
.apps img { height: 30px; margin-bottom: var(--grid-gap); margin: 0 auto;
    display: block;}
.channels img { height: 32px; margin-bottom: var(--grid-gap);  }


.pricing .disqount { margin-bottom:  calc(var(--grid-gap)/2); color: var(--color-link); }
.pricing .price_month { margin-bottom:  calc(var(--grid-gap)/2);     font-size: 20px; }
.pricing .price {   font-size: 24px;    font-weight: 700; }

.pricing .period { margin-bottom: calc(var(--grid-gap)/2); }

.width80 { width: 80%;  }

.centered { margin-left: auto; margin-right: auto;  }

.opened-menu {  
    display: block;
    position: fixed;
    background: #fff;
    backdrop-filter: blur(16px);
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: 100vh;
    padding: calc(var(--grid-gap)*2) 0 0 0; text-align:center; transition:right 0.5s ease; }

.opened { background-image: url('../img/close.svg') !important; }

.opened-menu .menu-item { display: block; padding: calc(var(--grid-gap)); font-size: 24px;   }

@media(max-width: 960px) {
header .menu { display: none }
header .menu .flex { display: block }

header .opened-menu {display: block}

header .menuToggle { display: block }

}

@media(max-width: 760px) {

:root {
    --grid-gap: 16px;
    --block-border-radius: 16px;
    --text-font-size-1: 16px;

    --text-font-size-2: 20px;
    --text-font-size-0: 18px;
    --header-font-size-0: 36px;
    --heading-font-size-1: 28px;
    --heading-font-size-2: 24px;

    --header-height: 70px;

    

}


section  {  padding: var(--grid-gap) 0; }

header .logo .logo-wrapper img { height: 10px; width: auto; }




.colab img {
    height: 20px;
}

.colab .cross {
    width: 15px;
    height: 15px;
}

.colab .partner-1, .colab .partner-2 {
    height: 20px;
}

.colab .cdek_logo img {
    height: 15px;
}

a.button { padding: calc(var(--grid-gap)) calc(var(--grid-gap)*2); }


.grid-12, .grid-8, .grid-7, .grid-6, .grid-5, .grid-4, .grid-3, .grid-2, .grid-1 {
    grid-column: span 12;
}
 
 footer { text-align:center }

footer .padding:first-child { padding-bottom: 0 !important; padding-top: calc(2 * var(--grid-gap)) !important; }
footer .padding:last-child { padding-bottom: calc(2 * var(--grid-gap)) !important;   }
footer .padding { padding-top: 0 !important; padding-bottom: 0 !important }
 

  
}
section.footer { color: #999; font-size: 14px }
section.footer ul {display:  flex; grid-gap: var(--grid-gap); justify-self: center;
}

section.footer ul li { list-style: none;  
}
 
@media(max-width: 1024px) {

    :root {
        --grid-gap: 16px;
        --block-border-radius: 16px;
        --text-font-size-1: 16px;

        --text-font-size-2: 20px;
        --text-font-size-0: 18px;
        --header-font-size-0: 36px;
        --heading-font-size-1: 32px;
        --heading-font-size-2: 20px;

    }

}