:root {
    --bg: #F8F0E3;
    --card: #FFF8ED;

    --text: #2F2A24;
    --text-soft: #625B53;

    --brown: #8B6A47;
    --brown-light: #F0E1C8;

    --telegram: #9EC4D8;
    --max: #A7C58B;

    --shadow: 0 20px 55px rgba(74, 58, 38, 0.09);

    --radius: 32px;
}

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

html{
    min-height:100%;
}

body{

    font-family:"Nunito",sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow-x:hidden;

    position:relative;

    padding:28px;

    opacity:0;

    animation:pageFade .8s ease forwards;

}

.background-blur{

    position:fixed;

    border-radius:50%;

    filter:blur(90px);

    opacity:.55;

    pointer-events:none;

    z-index:0;

    will-change:transform;

}

.blur-1{

    width:330px;
    height:330px;

    background:#CDE6F3;

    top:-120px;
    left:-100px;

}

.blur-2{

    width:350px;
    height:350px;

    background:#DCEBC8;

    right:-120px;
    bottom:-100px;

}

.hero{

    width:100%;
    max-width:1400px;

    position:relative;
    z-index:1;

}

.hero-card{

    width:100%;

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    overflow:hidden;

    min-height:820px;

}

/* ------------------ */
/* ИЛЛЮСТРАЦИЯ        */
/* ------------------ */

.hero-image{

    display:flex;
    justify-content:center;
    align-items:center;

    padding:55px;

    position:relative;

}


.hero-image img{

    width:100%;
    max-width:620px;

    display:block;

    position:relative;
    z-index:1;

    border-radius:42px;

    border:10px solid rgba(255,248,237,.95);

    box-shadow:
    0 30px 70px rgba(70,55,35,.10),
    0 8px 18px rgba(70,55,35,.06);

    will-change:transform;

}

/* ------------------ */

.hero-content{

    padding:65px 70px 65px 45px;

}

.brand-badge{

    display:inline-flex;
    align-items:center;
    gap:9px;

    background:var(--brown-light);

    color:var(--brown);

    font-weight:800;

    padding:8px 18px 8px 8px;

    border-radius:999px;

    margin-bottom:30px;

    font-size:1rem;

}

.brand-avatar{

    width:30px;
    height:30px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}

.hero-content h1{

    font-size:clamp(3rem,4vw,4.4rem);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-0.035em;

    margin-bottom:28px;

}

.subtitle{

    font-size:1.35rem;

    line-height:1.6;

    color:var(--text-soft);

    margin-bottom:20px;

}

.description{

    max-width:570px;

    font-size:1.25rem;

    line-height:1.75;

    color:var(--text-soft);

    margin-bottom:34px;

}

.messenger-title{

    font-size:.98rem;

    color:#756D64;

    font-weight:700;

    margin-bottom:14px;

}

.buttons{

    display:flex;
    flex-direction:column;

    gap:18px;

    max-width:570px;

}

.btn{

    display:flex;
    align-items:center;
    justify-content:space-between;

    text-decoration:none;

    min-height:76px;

    padding:0 28px;

    border-radius:24px;

    color:#2F2A24;

    font-weight:800;

    font-size:1.15rem;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.telegram{

    background:#A9CCE0;

}

.max{

    background:#AECD92;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 34px rgba(73,57,38,.12);

}

.btn-left{

    display:flex;
    align-items:center;

    gap:16px;

}

.btn-icon{

    width:34px;
    height:34px;

    flex-shrink:0;

}

.btn-arrow{

    font-size:1.5rem;

    transition:transform .25s ease;

}

.btn:hover .btn-arrow{

    transform:translateX(6px);

}

@media(max-width:1050px){

    body{
        padding:20px;
    }

    .hero-card{

        min-height:auto;

        grid-template-columns:1fr;

    }

    .hero-image{

        padding:45px 35px 0;

    }

    .hero-image img{

        max-width:520px;

    }

    .hero-content{

        padding:35px 50px 55px;

        text-align:center;

    }

    .description{

        margin:auto;

    }

    .buttons{

        margin:auto;

    }

}

@media(max-width:600px){

    body{

        padding:12px;

        align-items:flex-start;

    }

    .hero-card{

        border-radius:26px;

    }

    .hero-image{

        padding:28px 15px 0;

    }

    .hero-image img{

        max-width:390px;

        border-radius:28px;

        border-width:7px;

    }

    .hero-content{

        padding:22px;

    }

    .hero-content h1{

        font-size:2.55rem;

    }

    .subtitle{

        font-size:1.07rem;

    }

    .description{

        font-size:1rem;

        line-height:1.65;

    }

    .btn{

    min-height:64px;

    padding:0 20px;

    border-radius:18px;

    font-size:1rem;

}

.btn-left{

    gap:12px;

}

.btn-icon{

    width:28px;
    height:28px;

}

.btn-arrow{

    font-size:1.25rem;

}
}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(prefers-reduced-motion:reduce){

    body{
        animation:none;
        opacity:1;
    }

    .hero-image img,
    .background-blur{
        transform:none !important;
    }

}