:root {
    --about-services-overlap: 730px;
}

.hero-bg {
    position: absolute;
    inset: 0 0 auto;
    height: 2184px;
    z-index: 0;
    background:
        radial-gradient(circle at 19% -23%, rgba(101, 0, 145, .98) 0 27%, transparent 55%),
        radial-gradient(circle at 75% -8%, rgba(12, 0, 16, .98) 0 22%, transparent 58%),
        linear-gradient(180deg, #21002f 0, #250030 16%, #8e48a4 28%, var(--bg) 54%);
}

main { position: relative; z-index: 1; }
.hero-section {
    width: var(--container);
    min-height: 727px;
    position: relative;
    margin: 48px auto 0;
    overflow: visible;
    isolation: isolate;
}
.hero-section::after {
    display: none;
}
.hero-copy {
    width: 631px;
    position: relative;
    z-index: 2;
}
.hero-tags { display: flex; gap: 8px; margin-bottom: 16px; }
.hero-tags span {
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    color: #fff;
    background: rgba(255,255,255,.1);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
}
.hero-tags i { width: 8px; height: 8px; border-radius: 50%; background: #FF8D2F; }
.hero-tags span:nth-child(2) i { background: var(--cyan); }
.hero-tags span:nth-child(3) i { background: var(--lime); }
.hero-copy h1 {
    width: 100%;
    height: 240px;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 80px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    display: flex;
    align-items: center;
    transition: opacity .18s ease;
}
.hero-copy h1 span {
    width: 100%;
    max-height: 280px;
    padding-right: .12em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
.hero-copy p {
    width: 520px;
    min-height: 56px;
    margin: 32px 0 48px;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: opacity .18s ease;
}
.orange-btn {
    width: max-content;
    max-width: 100%;
    height: 73px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    color: #fff;
    background: var(--orange);
    border: 0;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 500;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.orange-btn:hover {
    background: #ff6b18;
    box-shadow: 0 18px 34px rgba(253,91,3,.28);
    transform: translateY(-2px);
}
.orange-btn b {
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 8px;
}
.hero-man-wrap {
    width: min(900px, calc(100% - 650px));
    height: 600px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.hero-man-frame {
    width: 100%;
    aspect-ratio: 1200 / 650;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 40px;
}
.hero-man {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    transition: opacity .18s ease;
}
.hero-slider {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 44px;
    display: grid;
    grid-template-columns: repeat(var(--hero-slides, 6), 1fr);
    gap: 16px;
    min-height: 122px;
    align-items: stretch;
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 0;
    border-right: 0;
    backdrop-filter: none;
}
.hero-slider::before {
    display: none;
}
.hero-slider button {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    padding: 18px 0 40px;
    color: rgba(255,255,255,.5);
    background: transparent;
    border: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    outline: 0;
    text-align: left;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    transition: color .2s ease;
}
.hero-slider button::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    content: "";
    display: block;
    background: #fff;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}
.hero-slider button::before {
    display: none;
}
.hero-slider .is-active {
    color: #fff;
    box-shadow: none;
}
.hero-slider .is-active::after {
    opacity: 1;
    animation: heroSliderProgress 5s linear forwards;
}
.hero-slider button:hover {
    color: #fff;
}

@keyframes heroSliderProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.about-card {
    width: var(--wide);
    height: auto;
    position: relative;
    min-height: 1509px;
    margin: -19px auto 0;
    background: url("../../img/home/background.png") top center / 100% 100% no-repeat;
}
.about-stack {
    display: none;
}
.about-inner {
    height: auto;
    min-height: 1509px;
    position: relative;
    display: grid;
    grid-template-columns: 623px 759px;
    gap: 153px;
    align-items: start;
    padding: 145px 80px calc(var(--about-services-overlap) + 82px);
    background: transparent;
    border-radius: 0;
}
.about-inner h2 {
    margin: 0;
    font-size: 64px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
}
.about-inner h2 span { color: var(--indigo); }
.about-text {
    min-width: 0;
    align-self: start;
}
.about-note {
    display: grid;
    grid-template-columns: 238px 278px;
    gap: 24px;
    align-items: center;
    margin-top: 189px;
}
.about-icons { display: flex; align-items: center; }
.about-icons span {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    margin-right: -18px;
    background: var(--orange);
    border-radius: 50%;
}
.about-icons span:nth-child(2) { background: var(--indigo); }
.about-icons span:nth-child(3) { background: var(--black); }
.about-note p, .about-text p {
    margin: 0;
    color: var(--grey);
    font-size: 16px;
    line-height: 1.4;
}
.about-text h3 {
    margin: 0 0 44px;
    color: var(--black);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
}
.about-text p {
    margin-bottom: 32px;
    color: var(--black);
    font-size: 20px;
}

.services-section { margin-top: calc(0px - var(--about-services-overlap)); position: relative; z-index: 2; }

.advantages-section { padding-top: 112px; border-top: 1px solid var(--line); }
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.advantages-grid article {
    min-height: 382px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    color: var(--black);
    background: #fff;
    border: 1px solid #f0ecf2;
    border-radius: 16px;
    overflow: hidden;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.advantages-grid article.is-featured,
.advantages-grid article:hover,
.advantages-grid article:focus-within {
    color: #fff;
    background: #390894 url("../../img/home/mask-group.png") center / cover no-repeat;
    box-shadow: 0 24px 48px rgba(127, 10, 173, .18);
    transform: translateY(-2px);
}

.advantages-grid img,
.advantages-grid h3,
.advantages-grid p { position: relative; z-index: 1; }
.advantages-grid article:nth-child(1).is-featured img,
.advantages-grid article:nth-child(1):hover img,
.advantages-grid article:nth-child(1):focus-within img { content: url("../../img/home/advantages-1-1.png"); }
.advantages-grid article:nth-child(2).is-featured img,
.advantages-grid article:nth-child(2):hover img,
.advantages-grid article:nth-child(2):focus-within img { content: url("../../img/home/advantages-2-2.png"); }
.advantages-grid article:nth-child(3).is-featured img,
.advantages-grid article:nth-child(3):hover img,
.advantages-grid article:nth-child(3):focus-within img { content: url("../../img/home/advantages-3-3.png"); }
.advantages-grid article:nth-child(4).is-featured img,
.advantages-grid article:nth-child(4):hover img,
.advantages-grid article:nth-child(4):focus-within img { content: url("../../img/home/advantages-4-4.png"); }
.advantages-grid article:nth-child(5).is-featured img,
.advantages-grid article:nth-child(5):hover img,
.advantages-grid article:nth-child(5):focus-within img { content: url("../../img/home/advantages-5-5.png"); }
.advantages-grid article:nth-child(6).is-featured img,
.advantages-grid article:nth-child(6):hover img,
.advantages-grid article:nth-child(6):focus-within img { content: url("../../img/home/advantages-6-6.png"); }
.advantages-grid article:nth-child(7).is-featured img,
.advantages-grid article:nth-child(7):hover img,
.advantages-grid article:nth-child(7):focus-within img { content: url("../../img/home/advantages-7-7.png"); }
.advantages-grid article:nth-child(8).is-featured img,
.advantages-grid article:nth-child(8):hover img,
.advantages-grid article:nth-child(8):focus-within img { content: url("../../img/home/advantages-8-8.png"); }
.advantages-grid img { width: 64px; height: 64px; margin-bottom: auto; }
.advantages-grid h3 { margin: 72px 0 0; font-size: 30px; font-weight: 500; line-height: 1.04; }
.advantages-grid p { margin: 74px 0 0; color: var(--grey); font-size: 16px; line-height: 1.4; }
.advantages-grid article.is-featured h3,
.advantages-grid article:hover h3,
.advantages-grid article:focus-within h3 { color: #fff; }
.advantages-grid article.is-featured p,
.advantages-grid article:hover p,
.advantages-grid article:focus-within p { color: rgba(255,255,255,.82); }

.contacts-section { margin-top: 112px; }
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 1700px) {
    .hero-copy {
        width: 560px;
    }
    .hero-copy p {
        width: 500px;
    }
    .hero-man-wrap {
        width: min(680px, calc(100% - 560px));
        height: 540px;
        top: 0;
        right: 0;
        opacity: .9;
    }
    .about-inner { grid-template-columns: 1fr 1fr; gap: 64px; }
    .advantages-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hero-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .hero-section { min-height: auto; padding-bottom: 32px; }
    .hero-copy { width: 100%; }
    .hero-copy h1, .about-inner h2 {
        font-size: 38px;
        overflow-wrap: anywhere;
    }
    .hero-copy h1 {
        height: 104px;
        font-size: 32px;
        line-height: 1.08;
        -webkit-line-clamp: 3;
    }
    .hero-copy p {
        width: 100%;
        max-width: 520px;
        min-height: 50px;
        margin: 24px 0 32px;
    }
    .hero-section {
        min-height: 0;
        padding-bottom: 32px;
    }
    .hero-section::after {
        height: 150px;
    }
    .hero-man-wrap {
        position: relative;
        width: min(640px, 100%);
        height: auto;
        inset: auto;
        margin: 32px auto 0;
    }
    .hero-man {
        width: 100%;
        height: 100%;
        object-position: center top;
        transform: none;
    }
    .hero-man-frame {
        border-radius: 32px;
    }
    .hero-slider {
        position: relative;
        display: flex;
        overflow-x: auto;
        margin-top: 32px;
    }
    .hero-slider button { min-width: 220px; }
    .about-card { margin-top: 24px; }
    .about-inner, .about-note, .contacts-grid { grid-template-columns: 1fr; }
    .about-inner { min-height: 0; padding: 48px 24px; }
    .services-section { margin-top: 56px; }
    .advantages-grid { grid-template-columns: 1fr; }
    .advantages-grid article { min-height: 0; }
}

@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }

    .hero-bg {
        height: 1900px;
        background:
            radial-gradient(circle at 15% -12%, rgba(86, 0, 125, .96) 0 30%, transparent 58%),
            radial-gradient(circle at 88% 10%, rgba(9, 0, 14, .99) 0 30%, transparent 62%),
            linear-gradient(180deg, #0d0015 0, #230034 45%, #9b58b3 72%, #f7f7f7 100%);
    }

    .hero-section {
        min-height: 0;
        margin-top: 35px;
        padding-top: 0;
    }

    .hero-tags {
        width: 270px;
        gap: 8px 6px;
        align-items: flex-start;
    }

    .hero-tags span {
        height: 40px;
        min-height: 40px;
        padding: 0 12px;
        font-size: 14px;
        border-radius: 14px;
        white-space: nowrap;
    }

    .hero-copy h1 {
        margin-top: 20px;
        font-size: 48px;
        line-height: .98;
        letter-spacing: -0.06em;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .hero-copy p {
        max-width: 322px;
        margin: 24px 0 0;
        font-size: 18px;
        line-height: 1.35;
    }

    .orange-btn {
        width: max-content;
        max-width: 100%;
        height: 74px;
        margin-top: 32px;
        padding: 0 26px;
        gap: 5px;
        border-radius: 15px;
        font-size: 18px;
    }

    .hero-man-wrap {
        width: 100%;
        max-width: 360px;
        margin-top: 32px;
    }

    .hero-man-frame {
        border-radius: 24px;
    }

    .hero-slider {
        position: relative;
        z-index: 5;
        margin-top: 56px;
        padding-bottom: 10px;
        gap: 12px;
        scrollbar-width: none;
    }

    .hero-slider::-webkit-scrollbar {
        display: none;
    }

    .hero-slider button {
        min-width: 190px;
        min-height: 82px;
        padding: 14px 0 22px;
        font-size: 16px;
        border-radius: 0;
        box-shadow: none;
    }

    .about-card {
        width: min(450px, calc(100vw - 16px));
        margin-top: 12px;
        min-height: 0;
        background: #f7f7f7 url("../../img/home/phone-background.png") top center / 100% auto no-repeat;
        border-radius: 28px;
        overflow: hidden;
    }

    .about-inner {
        min-height: 824px;
        padding: 36px 18px;
        border-radius: 28px;
    }

    .about-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 824px;
    padding: 36px 18px;
    border-radius: 28px;
    }

    .about-inner > div:first-child {
        display: contents;
    }

    .about-inner h2 {
        order: 1;
    }

    .about-text {
        order: 2;
    }

    .about-note {
        order: 3;
        margin-top: 0;
        gap: 16px;
    }

    .about-inner h2,
    .contacts-section h2 {
        font-size: 34px;
    }

    .about-copy h3 {
        font-size: 24px;
    }

    .about-note {
        gap: 16px;
    }

    .about-icons img {
        width: 179px;
        height: 101px;
        content: url("../../img/home/phone-icons.png");
        object-fit: contain;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .advantages-grid article {
        min-height: 0;
        padding: 20px;
        border-radius: 14px;
    }

    .advantages-grid h3 {
        margin-top: 18px;
        font-size: 24px;
    }

    .advantages-grid p {
        margin-top: 18px;
    }

}