.hero {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
            linear-gradient(
                    135deg,
                    white,
                    #f4f8ff
            );
}

.hero-glow {

    position: absolute;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    background:
            rgba(56,102,255,.08);

    filter: blur(120px);

    top: -250px;
    right: -200px;
}

.hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;
}

.hero-badge {

    display: inline-block;

    background: white;

    border:
            1px solid #dbe4ff;

    padding: 12px 18px;

    border-radius: 999px;

    color: var(--main);

    font-size: 14px;

    font-weight: 700;

    box-shadow:
            0 10px 25px rgba(32,47,91,.06);
}

.hero-title {
    margin-top: 25px;
    font-size: clamp(48px, 6vw, 90px);
    line-height: 1.1;
    font-weight: 900;
    color: var(--main);
    white-space: nowrap;
    letter-spacing: -0.02em;
}



.descript{

    border-top:5px solid var(--main);

    position: relative;

    margin-top: 70px;

    padding: 45px 55px;

    background: linear-gradient(
            135deg,
            #ffffff,
            #f4f8ff
    );

    border:1px solid #dbe4ff;

    border-radius:32px;

    box-shadow:
            0 20px 50px rgba(32,47,91,.08);

    overflow:hidden;
}
.descript::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(56,102,255,.07);

    filter:blur(90px);

    right:-120px;
    top:-120px;

    pointer-events:none;
}
.descript h2{

    font-size:34px;

    color:var(--main);

    margin-bottom:25px;

    font-weight:800;

    line-height:1.3;
}

.descript p{

    font-size:18px;

    line-height:1.9;

    color:#334155;

    margin-bottom:20px;
}

.descript p:last-child{
    margin-bottom:0;
}


/* Адаптация для очень маленьких экранов */
@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(32px, 8vw, 48px);
        white-space: normal;
        word-break: keep-all;
    }
}

.hero-subtitle {

    margin-top: 30px;

    font-size: 28px;

    line-height: 1.5;

    color: #334155;

    max-width: 700px;
}

.hero-buttons {

    display: flex;

    gap: 20px;

    margin-top: 40px;
}

.btn {

    padding: 18px 34px;

    border-radius: 20px;

    font-weight: 700;

    text-decoration: none;

    transition: .3s;
}

.btn-primary {

    background: var(--main);

    color: white;

    box-shadow:
            0 15px 40px rgba(32,47,91,.18);
}

.btn-primary:hover {
    transform: translateY(-4px);
}

.btn-secondary {

    border:
            1px solid #dbe4ff;

    color: var(--main);

    background: white;
}

.btn-secondary:hover {
    transform: translateY(-4px);
}

.robot-card {

    position: relative;

    border-radius: 40px;

    overflow: hidden;

    box-shadow:
            0 30px 70px rgba(32,47,91,.12);
}

.robot-image {

    width: 100%;

    display: block;
}

@media (max-width:768px){

    .descript{

        padding:30px 25px;

        border-radius:24px;
    }

    .descript h2{

        font-size:28px;
    }

    .descript p{

        font-size:16px;

        line-height:1.8;
    }

}