@charset "UTF-8";

*,
:before,
:after {
    box-sizing: border-box
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

html {
    text-size-adjust: none;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-block: 0
}

ul {
    margin-block: 0;
    padding: 0;
    list-style: none
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img,
picture {
    max-width: 100%;
    height: auto;
    display: block
}

svg:not([width]) {
    width: 100%;
    height: 100%
}

table {
    border-color: currentcolor
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-size: 100%;
    font-family: inherit
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

summary {
    display: list-item
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-user-select: none;
    user-select: none
}

.button:focus {
    outline: none
}

.button:disabled {
    pointer-events: none
}

.cookie__button {
    height: 40px;
    padding-inline: 24px;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    border-radius: 8px
}

.nav__menu-button {
    height: 64px;
    padding-inline: 24px;
    font-weight: 600;
    font-size: 21px;
    line-height: 24px;
    border-radius: 8px
}

.nav__menu-button,
.cookie__button {
    color: #fff;
    background-color: #00a88e
}

.nav__menu-button:hover,
.cookie__button:hover,
.nav__menu-button:focus,
.cookie__button:focus {
    background-color: #29ccb1
}

.nav__menu-button:active,
.cookie__button:active {
    background-color: #138170
}

:root {
    --control: #ffffff;
    --control-hover: rgba(255, 255, 255, .6);
    --control-checked: #00a88e;
    --control-checked-hover: #29ccb1
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
    padding: 0;
    background-color: transparent;
    border: 2px solid var(--control);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: all .3s ease;
    appearance: none
}

input[type=checkbox]:hover {
    border-color: var(--control-hover)
}

input[type=checkbox]:checked {
    background-color: var(--control-checked);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill: %23fff" d="M16.31 6.29a.9959.9959 0 0 0-1.41 0l-6.36 6.36-2.83-2.83a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l3.54 3.54c.39.39 1.02.39 1.41 0l7.07-7.07c.39-.39.39-1.02 0-1.41Z"/></svg>');
    border-color: var(--control-checked)
}

input[type=checkbox]:checked:hover {
    background-color: var(--control-checked-hover);
    border-color: var(--control-checked-hover)
}

input[type=radio] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: transparent;
    border: 2px solid var(--control);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: all .3s ease;
    appearance: none
}

input[type=radio]:hover {
    border-color: var(--control-hover)
}

input[type=radio]:before {
    width: 10px;
    height: 10px;
    background-color: var(--control-checked);
    border-radius: 50%;
    transform: scale(0);
    transition: all .3s ease;
    content: ""
}

input[type=radio]:hover:before {
    background-color: var(--control-checked-hover)
}

input[type=radio]:checked {
    border-color: var(--control-checked)
}

input[type=radio]:checked:before {
    transform: scale(1)
}

input[type=radio]:checked:hover {
    border-color: var(--control-checked-hover)
}

input[type=radio]:checked:hover:before {
    background-color: var(--control-checked-hover)
}

.cookie {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000c
}

.cookie__container {
    display: grid;
    gap: 16px;
    align-items: center;
    padding-block: 16px
}

@media (width >=640px) {
    .cookie__container {
        grid-template-columns: 1fr auto;
        gap: 32px
    }
}

.cookie__text {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px
}

.cookie__link {
    color: #29ccb1;
    transition: color .3s ease
}

.cookie__link:hover {
    color: #3de8ca
}

#form .contact__bitrix .b24-form {
    --b24-primary-color: #00a88e !important;
    --b24-primary-text-color: #ffffff !important;
    --b24-text-color: #ffffff !important;
    --b24-background-color: transparent !important;
    width: 100% !important;
    min-height: 0 !important;
    font-family: Kaspersky Sans Display, sans-serif !important;
    background: transparent !important
}

#form .contact__bitrix .b24-form *,
#form .contact__bitrix .b24-form *:before,
#form .contact__bitrix .b24-form *:after {
    box-sizing: border-box !important;
    font-family: Kaspersky Sans Display, sans-serif !important
}

#form .contact__bitrix .b24-form a {
    color: #29ccb1 !important;
    font: inherit !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    transition: color .3s ease
}

#form .contact__bitrix .b24-form a:hover {
    color: #3de8ca !important
}

#form .contact__bitrix .b24-form .b24-form-wrapper,
#form .contact__bitrix .b24-form .b24-form-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important
}

#form .contact__bitrix .b24-form .b24-form-shadow {
    box-shadow: none !important
}

#form .contact__bitrix .b24-form .b24-form-header,
#form .contact__bitrix .b24-form .b24-form-header-padding,
#form .contact__bitrix .b24-form .b24-form-sign,
#form .contact__bitrix .b24-form .b24-form-padding-side:before,
#form .contact__bitrix .b24-form .b24-form-padding-side:after,
#form .contact__bitrix .b24-form .b24-form-recaptcha,
#form .contact__bitrix .b24-form .b24-form-icon-remove {
    display: none !important
}

#form .contact__bitrix .b24-form form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important
}

#form .contact__bitrix .b24-form form>div:first-of-type {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important
}

#form .contact__bitrix .b24-form .b24-form-field {
    grid-column: 1/-1;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important
}

#form .contact__bitrix .b24-form .b24-form-field:nth-child(-n+4) {
    grid-column: span 3
}

#form .contact__bitrix .b24-form .b24-form-field:nth-child(n+5):nth-child(-n+7) {
    grid-column: span 2
}

#form .contact__bitrix .b24-form form>div:first-of-type:has(>.b24-form-field:nth-child(6):last-child)>.b24-form-field:nth-child(n+5) {
    grid-column: span 3
}

#form .contact__bitrix .b24-form .b24-form-control-container {
    position: relative !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important
}

#form .contact__bitrix .b24-form .b24-form-control {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 16px 12px !important;
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    background: transparent !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    outline: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: border-color .2s ease, background-color .2s ease !important
}

#form .contact__bitrix .b24-form .b24-form-control:hover,
#form .contact__bitrix .b24-form .b24-form-control:focus {
    background-color: #ffffff0a !important;
    border-color: #29ccb1 !important
}

#form .contact__bitrix .b24-form textarea.b24-form-control {
    height: 120px !important;
    min-height: 120px !important;
    padding-block: 12px !important;
    resize: vertical !important
}

#form .contact__bitrix .b24-form textarea.b24-form-control::placeholder {
    color: #fff9 !important;
    opacity: 1 !important
}

#form .contact__bitrix .b24-form .b24-form-field:has(textarea.b24-form-control) {
    position: relative !important;
    padding-top: 20px !important
}

#form .contact__bitrix .b24-form .b24-form-field:has(textarea.b24-form-control) .b24-form-control-label,
#form .contact__bitrix .b24-form .b24-form-field:has(textarea.b24-form-control) .b24-form-control:focus+.b24-form-control-label,
#form .contact__bitrix .b24-form .b24-form-field:has(textarea.b24-form-control) .b24-form-control-not-empty+.b24-form-control-label {
    position: absolute !important;
    inset-block-start: -20px !important;
    inset-inline-start: 0 !important;
    display: block !important;
    color: #fff !important;
    opacity: 1 !important
}

#form .contact__bitrix .b24-form .b24-form-control-label {
    inset-block-start: 16px !important;
    inset-inline-start: 12px !important;
    max-width: calc(100% - 24px) !important;
    padding: 0 !important;
    color: #fff9 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    background: transparent !important;
    transform: none !important;
    opacity: 1 !important
}

#form .contact__bitrix .b24-form .b24-form-control:focus+.b24-form-control-label,
#form .contact__bitrix .b24-form .b24-form-control-not-empty+.b24-form-control-label {
    opacity: 0 !important
}

#form .contact__bitrix .b24-form .b24-form-control-required {
    display: none !important
}

#form .contact__bitrix .b24-form .b24-form-control-alert-message {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 14px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    color: #f35 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: none !important
}

#form .contact__bitrix .b24-form .b24-form-control-alert-message:before,
#form .contact__bitrix .b24-form .b24-form-control-alert-message:after {
    content: none !important
}

#form .contact__bitrix .b24-form .b24-form-field-agreement {
    min-height: 64px !important;
    padding-block: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important
}

#form .contact__bitrix .b24-form .b24-form-field-agreement .b24-form-control-container {
    display: block !important
}

#form .contact__bitrix .b24-form .b24-form-field-agreement label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-height: 48px !important
}

#form .contact__bitrix .b24-form .b24-form-field-agreement .b24-form-control-alert-message {
    width: auto !important;
    margin-top: 4px !important;
    margin-inline-start: 32px !important
}

#form .contact__bitrix .b24-form .b24-form-field-agreement input[type=checkbox] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    accent-color: #29ccb1
}

#form .contact__bitrix .b24-form .b24-form-control-desc {
    margin: 0 !important;
    color: #fff9 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    opacity: 1 !important
}

#form .contact__bitrix .b24-form .b24-form-btn-container,
#form .contact__bitrix .b24-form .b24-form-btn-block {
    margin: 0 !important;
    padding: 0 !important
}

#form .contact__bitrix .b24-form .b24-form-btn-block {
    display: flex !important
}

#form .contact__bitrix .b24-form .b24-form-btn {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 14px 24px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    background-color: #00a88e !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important
}

#form .contact__bitrix .b24-form .b24-form-btn:hover:not(:disabled) {
    background-color: #29ccb1 !important
}

#form .contact__bitrix .b24-form .b24-form-btn:active:not(:disabled) {
    background-color: #138170 !important
}

#form .contact__bitrix .b24-form .b24-form-btn:disabled {
    color: #fff3 !important;
    background-color: #383f48 !important;
    cursor: not-allowed !important;
    opacity: 1 !important
}

#form .contact__bitrix .b24-form .b24-form-btn {
    font-size: 0 !important
}

#form .contact__bitrix .b24-form .b24-form-btn:after {
    content: "Register now";
    font-weight: 600;
    font-size: 16px;
    line-height: 20px
}

#form .contact__bitrix .b24-form form:has(.b24-form-field-agreement input[type=checkbox]:not(:checked)) .b24-form-btn {
    color: #fff3 !important;
    background-color: #383f48 !important;
    pointer-events: none !important
}

@media (width >=640px) {
    #form .contact__bitrix .b24-form .b24-form-btn {
        width: auto !important;
        min-width: 144px !important
    }
}

@media (width < 640px) {
    #form .contact__bitrix .b24-form form>div:first-of-type {
        grid-template-columns: minmax(0, 1fr) !important
    }

    #form .contact__bitrix .b24-form .b24-form-field,
    #form .contact__bitrix .b24-form .b24-form-field:nth-child(-n+4),
    #form .contact__bitrix .b24-form .b24-form-field:nth-child(n+5):nth-child(-n+7),
    #form .contact__bitrix .b24-form form>div:first-of-type:has(>.b24-form-field:nth-child(6):last-child)>.b24-form-field:nth-child(n+5) {
        grid-column: 1 !important
    }

    #form .contact__bitrix .b24-form .b24-form-field-agreement {
        min-height: 96px !important
    }
}

body {
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 375px;
    height: 100dvh;
    color: #fff;
    font-family: Kaspersky Sans Display, sans-serif;
    background-color: #0f151c
}

.container {
    width: 100%;
    max-width: 1264px;
    margin-inline: auto;
    padding-inline: 16px
}

@media (width >=640px) {
    .container {
        padding-inline: 32px
    }
}

.select-none {
    -webkit-user-select: none;
    user-select: none
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0)
}

:root {
    --nav-height: 54px
}

@media (width >=1024px) {
    :root {
        --nav-height: 64px
    }
}

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99
}

body {
    padding-top: var(--nav-height)
}

section[id] {
    scroll-margin-top: var(--nav-height)
}

.nav {
    background-color: #21272f;
    box-shadow: 0 4px 32px #00000052
}

.nav__container {
    display: grid
}

@media (width < 1024px) {

    .nav__container:has(.nav__button),
    .nav__container:has(.nav__lang-menu) {
        grid-template-columns: 64px 1fr 64px;
        padding-inline: 0
    }
}

@media (width >=1024px) {
    .nav__container {
        grid-template-columns: min-content 1fr
    }
}

.nav__button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    width: 64px
}

.nav__button span {
    width: 18px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all .3s ease
}

[dir=ltr] .nav__button span {
    transform-origin: 0 50%
}

[dir=rtl] .nav__button span {
    transform-origin: 100% 50%
}

.nav__button.open span {
    width: 20px
}

.nav__button.open span:nth-child(1) {
    rotate: 45deg;
    translate: 2.5px -2px
}

.nav__button.open span:nth-child(2) {
    opacity: 0
}

.nav__button.open span:nth-child(3) {
    rotate: -45deg;
    translate: 2.5px 2px
}

@media (width >=1024px) {
    .nav__button {
        display: none
    }
}

.nav__logo {
    display: flex;
    width: 169.84px;
    height: var(--nav-height);
    margin-inline: auto;
    color: #fff
}

@media (width >=1024px) {
    .nav__logo {
        width: 201.29px;
        margin-inline-start: -23px
    }
}

.nav__menu {
    display: none
}

@media (width < 1024px) {
    .nav__menu.open {
        position: absolute;
        top: var(--nav-height);
        display: block;
        width: 100%;
        max-height: calc(100dvh - var(--nav-height));
        overflow: auto;
        background-color: #21272f
    }

    .nav__menu.open li:not(:last-of-type) {
        position: relative
    }

    .nav__menu.open li:not(:last-of-type):before {
        position: absolute;
        bottom: 0;
        height: 1px;
        background-color: #ffffff1a;
        content: "";
        inset-inline: 16px
    }

    .nav__menu.open li:has(.nav__menu-button) {
        padding: 16px
    }
}

@media (width >=1024px) {
    .nav__menu {
        display: flex;
        align-items: center;
        justify-content: flex-end
    }
}

.nav__menu-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding-inline: 16px;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    white-space: nowrap;
    text-decoration: none
}

.nav__menu-link:before {
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: #29ccb1;
    border-radius: 3px;
    opacity: 0;
    transition: opacity .3s ease;
    content: "";
    inset-inline-start: 0
}

.nav__menu-link:hover:before,
.nav__menu-link.open:before {
    opacity: 1
}

@media (width >=1024px) {
    .nav__menu-link {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px
    }

    .nav__menu-link:before {
        bottom: 0;
        width: calc(100% - 32px);
        height: 3px;
        inset-inline: 16px
    }
}

.nav__menu-button {
    width: 100%
}

@media (width >=1024px) {
    .nav__menu-button {
        width: auto;
        height: 48px;
        padding-inline: 24px;
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        border-radius: 8px
    }

    [dir=ltr] .nav__menu-button {
        margin-left: 16px
    }

    [dir=rtl] .nav__menu-button {
        margin-right: 16px
    }
}

.hero {
    display: flex;
    min-height: 660px;
    padding-block: 40px 288px;
    color: #1d1d1b;
    background-color: #fff;
    background-image: url(https://media.kaspersky.com/landgo/august_ti_hero-mobile.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

@media (width >=640px) {
    .hero {
        min-height: 372px;
        padding-block: 48px;
        background-image: url(https://media.kaspersky.com/landgo/august_ti_hero-tablet.webp)
    }
}

@media (width >=1024px) {
    .hero {
        min-height: 540px;
        padding-block: 64px 72px;
        background-image: url(https://media.kaspersky.com/landgo/august_ti_hero-desktop.webp)
    }
}

.hero__container {
    display: flex;
    width: 100%
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0
}

@media (width >=640px) {
    .hero__content {
        max-width: 400px
    }
}

@media (width >=1024px) {
    .hero__content {
        max-width: 588px
    }
}

.hero__top {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    margin-bottom: 32px
}

@media (width >=640px) {
    .hero__top {
        gap: 12px;
        margin-bottom: 64px
    }
}

@media (width >=1024px) {
    .hero__top {
        margin-bottom: 92px
    }
}

.hero__product-logo {
    max-width: 72px;
    height: auto;
    flex-shrink: 1
}

@media (width >=640px) {
    .hero__product-logo {
        max-width: 80px
    }
}

.hero__text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    max-width: 93px;
    flex-shrink: 0
}

@media (width >=640px) {
    .hero__text {
        max-width: 103px;
        font-size: 19px;
        line-height: 23px
    }
}

.hero__title {
    width: 100%;
    max-width: 328px;
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: 34px;
    line-height: 37px
}

@media (width >=640px) {
    .hero__title {
        max-width: 400px;
        font-size: 40px;
        line-height: 44px
    }
}

@media (width >=1024px) {
    .hero__title {
        max-width: 560px;
        font-size: 54px;
        line-height: 54px
    }
}

.overview {
    padding-block: 24px;
    color: #fff;
    background: radial-gradient(95.12% 32.36% at 24.58% 116.57%, #29ccb1cc 5.51%, #29ccb100), #0f151c
}

@media (width >=640px) {
    .overview {
        padding-block: 32px 48px;
        background: radial-gradient(64.91% 107.04% at 9.64% 187.1%, #29ccb1cc 5.51%, #29ccb100), #0f151c
    }
}

@media (width >=1024px) {
    .overview {
        padding-block: 120px;
        background: radial-gradient(56.48% 97.57% at 10.96% 202.71%, #29ccb1cc 22.45%, #29ccb100), #0f151c
    }
}

.overview__container {
    display: flex
}

.overview__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    min-width: 0
}

@media (width >=640px) {
    .overview__content {
        grid-template-columns: 306px minmax(0, 1fr);
        column-gap: 24px
    }
}

@media (width >=1024px) {
    .overview__content {
        grid-template-columns: 429px minmax(0, 1fr);
        column-gap: 70px;
        row-gap: 32px
    }
}

.overview__text {
    font-weight: 400;
    font-size: 16px;
    line-height: 18px
}

.overview__text strong {
    color: #29ccb1;
    font-weight: 600
}

@media (width >=640px) {
    .overview__text {
        font-size: 18px;
        line-height: 21px
    }
}

@media (width >=1024px) {
    .overview__text {
        grid-column: 2
    }
}

@media (width >=640px) and (width < 1024px) {
    .overview__text--lead {
        grid-column: 1/-1
    }
}

.overview__image {
    grid-row: 4;
    width: 100%;
    height: 247px;
    object-fit: cover;
    border-radius: 16px
}

@media (width >=640px) {
    .overview__image {
        grid-row: 2/span 2;
        width: 306px;
        height: 310px
    }
}

@media (width >=1024px) {
    .overview__image {
        grid-row: 1/span 3;
        width: 429px;
        height: 295px
    }
}

.benefits {
    padding-block: 24px;
    color: #fff;
    background: #1d1d1b
}

@media (width >=640px) {
    .benefits {
        padding-block: 48px
    }
}

@media (width >=1024px) {
    .benefits {
        padding-block: 96px
    }
}

.benefits__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

@media (width >=640px) {
    .benefits__container {
        gap: 24px
    }
}

@media (width >=1024px) {
    .benefits__container {
        gap: 40px
    }
}

.benefits__title {
    width: 100%;
    max-width: 308px;
    color: #fff;
    font-weight: 500;
    font-size: 32px;
    line-height: 36px;
    text-align: center
}

@media (width >=640px) {
    .benefits__title {
        max-width: 740px;
        font-size: 42px;
        line-height: 42px
    }
}

@media (width >=1024px) {
    .benefits__title {
        font-size: 48px;
        line-height: 54px
    }
}

.benefits__description {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px
}

@media (width >=640px) {
    .benefits__description {
        font-size: 18px;
        line-height: 21px
    }
}

.benefits__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0
}

@media (width >=1024px) {
    .benefits__content {
        gap: 40px
    }
}

.benefits__lead,
.benefits__uses-title {
    color: #29ccb1;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px
}

@media (width >=640px) {

    .benefits__lead,
    .benefits__uses-title {
        font-size: 21px;
        line-height: 24px
    }
}

@media (width >=1024px) {

    .benefits__lead,
    .benefits__uses-title {
        font-size: 21px;
        line-height: 27px
    }
}

.benefits__uses-title {
    line-height: 24px
}

@media (width >=1024px) {
    .benefits__uses-title {
        line-height: 27px
    }
}

.benefits__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%
}

@media (width >=640px) {
    .benefits__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 800px;
        margin-inline: auto;
        gap: 16px
    }
}

@media (width >=1024px) {
    .benefits__stats {
        max-width: 792px;
        gap: 24px
    }
}

.benefits__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background-color: #21272f;
    border-radius: 16px;
    box-shadow: 0 4px 32px #00000052
}

@media (width >=640px) {
    .benefits__stat {
        gap: 16px;
        height: 224px;
        padding: 24px 16px
    }
}

@media (width >=1024px) {
    .benefits__stat {
        height: 233px;
        padding: 36px
    }
}

.benefits__stat-label,
.benefits__stat-caption {
    font-weight: 400;
    font-size: 18px;
    line-height: 21px
}

@media (width >=640px) {

    .benefits__stat-label,
    .benefits__stat-caption {
        font-size: 21px;
        line-height: 24px
    }
}

.benefits__stat-label--empty {
    display: none
}

@media (width >=640px) {
    .benefits__stat-label--empty {
        display: block;
        height: 24px
    }
}

.benefits__stat-value {
    color: #29ccb1;
    font-weight: 500;
    font-size: 72px;
    line-height: 72px
}

@media (width >=1024px) {
    .benefits__stat-value {
        font-size: 81px;
        line-height: 81px
    }
}

.benefits__uses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 96px 96px 72px 97px;
    gap: 8px;
    width: 100%
}

@media (width >=640px) {
    .benefits__uses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 96px);
        gap: 24px 16px
    }
}

@media (width >=1024px) {
    .benefits__uses {
        column-gap: 24px
    }
}

.benefits__use {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    background-color: #21272f;
    border-radius: 16px;
    box-shadow: 0 4px 32px #00000052
}

.benefits__use img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain
}

@media (width >=1024px) {
    .benefits__use {
        gap: 24px;
        padding-inline: 24px;
        font-size: 21px;
        line-height: 24px
    }
}

@media (width >=640px) {
    .benefits__use {
        font-size: 21px;
        line-height: 24px
    }
}

.feeds {
    padding-block: 24px;
    background: radial-gradient(89.11% 18.28% at 25.83% -5.82%, #29ccb199, #29ccb100 88.2%), #0f151c
}

@media (width >=720px) {
    .feeds {
        padding-block: 48px;
        background: radial-gradient(55.96% 23.84% at 25.52% -6.14%, #29ccb199, #29ccb100 88.2%), #0f151c
    }
}

@media (width >=1200px) {
    .feeds {
        padding-block: 96px;
        background: radial-gradient(40.68% 27.57% at 40.81% -10.07%, #29ccb199, #29ccb100 88.2%), #0f151c
    }
}

.feeds__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

@media (width >=1200px) {
    .feeds__container {
        gap: 40px
    }
}

.feeds__title {
    width: 100%;
    color: #fff;
    font-weight: 500;
    font-size: 32px;
    line-height: 36px;
    text-align: center
}

@media (width >=720px) {
    .feeds__title {
        max-width: 490px;
        font-size: 42px;
        line-height: 42px
    }
}

@media (width >=1200px) {
    .feeds__title {
        max-width: 1074px;
        font-size: 48px;
        line-height: 54px
    }
}

.feeds__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(236px, auto) minmax(250px, auto) minmax(330px, auto) minmax(236px, auto) minmax(144px, auto);
    gap: 8px;
    width: 100%
}

@media (width >=720px) {
    .feeds__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(336px, auto) minmax(408px, auto) minmax(330px, auto);
        gap: 16px
    }
}

@media (width >=1200px) {
    .feeds__grid {
        grid-template-rows: minmax(305px, auto) minmax(368px, auto) minmax(305px, auto);
        gap: 40px
    }
}

.feeds__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-block: 12px 8px;
    padding-inline: 12px 8px;
    background: radial-gradient(85.94% 71.82% at 130.63% 15.25%, #29ccb166, #29ccb100), #21272f;
    border-radius: 8px;
    box-shadow: 0 4px 32px #00000052
}

@media (width >=720px) {
    .feeds__card {
        gap: 16px;
        padding-block: 16px;
        padding-inline: 16px;
        border-radius: 16px
    }
}

@media (width >=1200px) {
    .feeds__card {
        padding-block: 32px;
        padding-inline: 32px
    }
}

.feeds__card-content {
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media (width >=720px) {
    .feeds__card-content {
        gap: 8px
    }
}

.feeds__icon {
    width: 48px;
    height: 48px;
    object-fit: contain
}

@media (width >=720px) {
    .feeds__icon {
        width: 64px;
        height: 64px
    }
}

.feeds__card-title {
    color: #29ccb1;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px
}

@media (width >=720px) {
    .feeds__card-title {
        font-size: 18px;
        line-height: 21px
    }
}

@media (width >=1200px) {
    .feeds__card-title {
        font-size: 21px;
        line-height: 24px
    }
}

.feeds__card-text {
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px
}

@media (width >=720px) {
    .feeds__card-text {
        font-size: 16px;
        line-height: 18px
    }
}

@media (width >=1200px) {
    .feeds__card-text {
        font-size: 18px;
        line-height: 21px
    }
}

.feeds__card--open-source,
.feeds__card--vulnerability,
.feeds__card--phishing,
.feeds__card--iot {
    background: radial-gradient(61.56% 53.81% at 100% 118.86%, #29ccb166, #29ccb100), #21272f
}

.feeds__card--suricata {
    background: radial-gradient(81.51% 79.2% at 100% -13.4%, #29ccb166, #29ccb100), #21272f
}

.feeds__card--shadow {
    background: radial-gradient(105.67% 57.34% at 89.06% -20.16%, #29ccb166, #29ccb100), #21272f
}

.feeds__card--web {
    background: radial-gradient(69.83% 68.9% at 107.19% -7.32%, #29ccb166, #29ccb100), #21272f
}

.feeds__card--botnet {
    grid-column: 1/-1;
    background: radial-gradient(95.12% 125.67% at 122.71% -42.71%, #29ccb166, #29ccb100), #21272f
}

@media (width >=720px) {
    .feeds__card {
        background: radial-gradient(92.46% 92.46% at 78.08% 129.18%, #29ccb166, #29ccb100), #21272f
    }

    .feeds__card--open-source,
    .feeds__card--shadow,
    .feeds__card--phishing {
        background: radial-gradient(113.61% 113.61% at 80.58% -50.82%, #29ccb166, #29ccb100), #21272f
    }

    .feeds__card--web {
        order: 6
    }

    .feeds__card--iot {
        order: 7
    }

    .feeds__card--phishing {
        order: 8
    }

    .feeds__card--botnet {
        grid-column: auto;
        order: 9
    }
}

.feeds__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    text-align: center
}

.feeds__links a {
    color: #29ccb1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px
}

@media (width >=720px) {
    .feeds__links {
        gap: 16px;
        font-size: 21px;
        line-height: 24px
    }
}

@media (width >=1200px) {
    .feeds__links {
        gap: 16px
    }
}

.contact {
    min-height: 1263px;
    padding-block: 24px;
    background: #0f151c url(https://media.kaspersky.com/landgo/august_ti_form-mobile.webp) center top/cover no-repeat
}

@media (width >=640px) {
    .contact {
        min-height: 986px;
        padding-block: 48px;
        background-image: url(https://media.kaspersky.com/landgo/august_ti_form-tablet.webp)
    }
}

@media (width >=1024px) {
    .contact {
        min-height: 1174px;
        padding-block: 120px;
        background-image: url(https://media.kaspersky.com/landgo/august_ti_form-desktop.webp)
    }
}

.contact__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

@media (width >=1024px) {
    .contact__container {
        gap: 40px
    }
}

.contact__title {
    width: 100%;
    max-width: 280px;
    color: #fff;
    font-weight: 500;
    font-size: 32px;
    line-height: 36px;
    text-align: center
}

@media (width >=640px) {
    .contact__title {
        max-width: 704px;
        font-size: 42px;
        line-height: 42px
    }
}

@media (width >=1024px) {
    .contact__title {
        max-width: 1074px;
        font-size: 48px;
        line-height: 54px
    }
}

.contact__description {
    width: 100%;
    max-width: 328px;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    text-align: center
}

@media (width >=640px) {
    .contact__description {
        max-width: 704px;
        font-size: 21px;
        line-height: 24px
    }
}

@media (width >=1024px) {
    .contact__description {
        max-width: 714px
    }
}

.contact__description-break {
    display: none
}

@media (width >=640px) {
    .contact__description-break {
        display: initial
    }
}

.contact__form-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: none;
    min-height: 1032px;
    padding-block: 40px;
    padding-inline: 8px;
    background-color: #21272f;
    border-radius: 8px;
    box-shadow: 0 4px 32px #00000052
}

@media (width >=640px) {
    .contact__form-card {
        gap: 32px;
        max-width: 588px;
        min-height: 752px;
        padding-inline: 32px;
        border-radius: 16px
    }
}

.contact__form-card:has(form>div:first-of-type>.b24-form-field:nth-child(6):last-child) {
    min-height: 0
}

.contact__form-title {
    width: 100%;
    color: #fff;
    font-weight: 500;
    font-size: 32px;
    line-height: 36px
}

.contact__bitrix {
    width: 100%;
    min-width: 0
}

.footer {
    background-color: #21272f
}

.footer__container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 20.16px;
    align-items: center;
    padding-block: 8px 16px
}

@media (width >=640px) {
    .footer__container {
        padding-block: 8px 24px;
        row-gap: 8px
    }
}

@media (width >=1024px) {
    .footer__container {
        grid-template-columns: auto 1fr auto;
        gap: 0px;
        padding-block: 9px 7px
    }
}

.footer__logo {
    display: flex;
    width: 169.84px;
    height: 54px;
    margin-inline-start: -19.6px;
    color: #fff
}

@media (width >=1024px) {
    .footer__logo {
        width: 201.29px;
        height: 64px;
        margin-inline-start: -23px
    }
}

.footer__social {
    display: flex;
    justify-self: end;
    column-gap: 13px
}

@media (width >=1024px) {
    .footer__social {
        order: 2;
        column-gap: 12px
    }
}

.footer__social-link {
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: #fff;
    transition: color .3s ease
}

.footer__social-link:hover {
    color: #fffc
}

.footer__text {
    display: flex;
    flex-wrap: wrap;
    color: #fff9;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    column-gap: 8px
}

.footer__text li:not(:first-of-type) {
    position: relative
}

.footer__text li:not(:first-of-type):before {
    padding-inline-end: 8px;
    content: "•"
}

@media (width < 1024px) {
    .footer__text {
        grid-column: span 2
    }
}

@media (width >=1024px) {
    .footer__text {
        margin-top: 8px
    }
}

.footer__link {
    color: #29ccb1;
    font-weight: 600;
    transition: color .3s ease
}

.footer__link:hover {
    color: #3de8ca
}