/* ==========================================
   HERO
========================================== */

.hero{

    min-height:calc(100vh - 90px);

    display:flex;

    align-items:center;

    background:
        radial-gradient(circle at top,#fffdfb,#faf5f0 70%);

    position:relative;

    overflow:hidden;

}

/* декоративные круги */

.hero::before{

    content:"";

    width:500px;

    height:500px;

    border-radius:50%;

    background:#f7ebe6;

    position:absolute;

    top:-180px;

    left:-180px;

    opacity:.7;

}

.hero::after{

    content:"";

    width:420px;

    height:420px;

    border-radius:50%;

    background:#f5e6df;

    position:absolute;

    bottom:-170px;

    right:-170px;

}

.hero .container{

    position:relative;

    z-index:2;

}

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

.hero-content{

    text-align:center;

    max-width:850px;

    margin:auto;

}

.hero-label{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:5px;

    color:var(--gold);

    font-size:14px;

    margin-bottom:20px;

}

.hero h1{

    font-size:110px;

    letter-spacing:14px;

    line-height:1;

    margin-bottom:20px;

}

.hero-description{

    font-size:20px;

    color:var(--secondary);

    max-width:700px;

    margin:auto;

    margin-bottom:50px;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:80px;

}

/* ==========================================
   BUTTONS
========================================== */

.btn {
    padding: 16px 36px;
    border-radius: 50px;
    transition: .35s;
    font-weight: 600;
}

.btn-primary {
    background: #d9a79a;
    color: white;
    box-shadow: 0 6px 20px rgba(180, 120, 105, 0.18);
}

.btn-primary:hover {
    transform: translateY(-3px);
    background: #cc9688;
    box-shadow: 0 10px 25px rgba(180, 120, 105, 0.25);
}

.btn-secondary {
    border: 1px solid #eadbd5;
    background: rgba(255, 255, 255, 0.8);
    color: #3d302c;
}

.btn-secondary:hover {
    background: #fff7f3;
    border-color: #d9b8ad;
}
/* ==========================================
   HERO CARDS
========================================== */

.hero-cards{

    display:flex;

    justify-content:center;

    gap:35px;

}

.hero-card{

    width:280px;

    background:white;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.hero-card:hover{

    transform:translateY(-8px);

}

.icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#f9ebe7;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin:auto;

    margin-bottom:20px;

}

.hero-card h3{

    font-size:34px;

    margin-bottom:10px;

}

.hero-card p{

    color:var(--secondary);

}

/* ==========================================
   FEATURES
========================================== */

.features{

    background:#fffdfb;

    position:relative;

    padding:120px 0;

}

.section-title{

    text-align:center;

    max-width:720px;

    margin:0 auto 70px;

}

.section-title span{

    display:inline-block;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:5px;

    color:var(--gold);

    margin-bottom:18px;

}

.section-title h2{

    font-size:64px;

    letter-spacing:10px;

    margin-bottom:25px;

}

.section-title p{

    color:var(--secondary);

    font-size:18px;

    line-height:1.9;

}

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

.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

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

.feature-card{

    background:white;

    padding:45px 35px;

    border-radius:22px;

    text-align:center;

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

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

.feature-icon{

    width:72px;

    height:72px;

    margin:0 auto 28px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fbf3ef;

    font-size:30px;

    color:var(--gold);

}

.feature-card h3{

    font-size:30px;

    margin-bottom:16px;

}

.feature-card p{

    color:var(--secondary);

    line-height:1.8;

}
/* ==========================================
   CATEGORIES
========================================== */

.categories{

    background:#faf5f0;

    padding:120px 0;

}

.category-grid{

    display:grid;

    gap:35px;

}

.category-card{

    position:relative;

    height:360px;

    border-radius:26px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.4s;

    background-size:cover;

    background-position:center;

}

.category-card:hover{

    transform:translateY(-10px);

}

/* картинки */



/* затемнение */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,0),
        rgba(0,0,0,.55)
    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:45px;

}

.overlay h3{

    color:white;

    font-size:42px;

    margin-bottom:12px;

}

.overlay span{

    color:white;

    opacity:.9;

    font-size:17px;

}


/* =========================================================
   АДАПТАЦИЯ HOME
========================================================= */


/* =========================================================
   ПЛАНШЕТ — до 900px
========================================================= */

@media (max-width: 900px) {

    /* ---------- HERO ---------- */

    .hero {
        min-height: auto;
        padding: 90px 0 80px;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero-label {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .hero h1 {
        font-size: 76px;
        letter-spacing: 9px;
    }

    .hero-description {
        font-size: 18px;
        max-width: 600px;
        margin-bottom: 40px;
    }

    .hero-buttons {
        margin-bottom: 60px;
    }


    /* ---------- HERO CARDS ---------- */

    .hero-cards {
        gap: 20px;
    }

    .hero-card {
        width: 240px;
        padding: 30px 25px;
    }

    .hero-card h3 {
        font-size: 28px;
    }


    /* ---------- FEATURES ---------- */

    .features {
        padding: 90px 0;
    }

    .section-title {
        margin-bottom: 55px;
    }

    .section-title h2 {
        font-size: 52px;
        letter-spacing: 7px;
    }

    .section-title p {
        font-size: 17px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .feature-card {
        padding: 35px 25px;
    }

    .feature-card h3 {
        font-size: 26px;
    }


    /* ---------- CATEGORIES ---------- */

    .categories {
        padding: 90px 0;
    }

    .category-grid {
        gap: 25px;
    }

    .category-card {
        height: 320px;
    }

    .overlay {
        padding: 35px;
    }

    .overlay h3 {
        font-size: 36px;
    }

    .overlay span {
        font-size: 16px;
    }

}


/* =========================================================
   ТЕЛЕФОН — до 600px
========================================================= */

@media (max-width: 600px) {

    /* ---------- HERO ---------- */

    .hero {
        min-height: auto;

        padding: 70px 20px 60px;
    }


    /* Декоративные круги */

    .hero::before {
        width: 280px;
        height: 280px;

        top: -120px;
        left: -120px;
    }

    .hero::after {
        width: 250px;
        height: 250px;

        bottom: -120px;
        right: -120px;
    }


    /* Контент */

    .hero-content {
        width: 100%;
        max-width: 100%;
    }


    /* Маленькая надпись */

    .hero-label {
        font-size: 10px;

        letter-spacing: 3px;

        margin-bottom: 16px;
    }


    /* VAMORI */

    .hero h1 {
        font-size: clamp(48px, 16vw, 68px);

        letter-spacing: 7px;

        line-height: 1;

        margin-bottom: 22px;
    }


    /* Описание */

    .hero-description {
        width: 100%;
        max-width: 340px;

        font-size: 16px;

        line-height: 1.7;

        margin-bottom: 30px;
    }


    /* Кнопки */

    .hero-buttons {
        flex-direction: column;

        align-items: center;

        gap: 12px;

        margin-bottom: 50px;
    }

    .btn {
        width: 100%;
        max-width: 280px;

        padding: 14px 25px;

        text-align: center;
    }


    /* ---------- HERO CARDS ---------- */

    .hero-cards {
        width: 100%;

        flex-direction: column;

        align-items: center;

        gap: 15px;
    }

    .hero-card {
        width: 100%;
        max-width: 320px;

        padding: 28px 22px;

        border-radius: 18px;
    }

    .icon {
        width: 65px;
        height: 65px;

        font-size: 28px;

        margin-bottom: 15px;
    }

    .hero-card h3 {
        font-size: 26px;
    }

    .hero-card p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* ---------- FEATURES ---------- */

    .features {
        padding: 75px 20px;
    }


    /* Заголовок секции */

    .section-title {
        width: 100%;

        margin-bottom: 45px;
    }

    .section-title span {
        font-size: 10px;

        letter-spacing: 3px;

        margin-bottom: 14px;
    }

    .section-title h2 {
        font-size: clamp(36px, 11vw, 48px);

        letter-spacing: 5px;

        line-height: 1.1;

        margin-bottom: 20px;
    }

    .section-title p {
        font-size: 15px;

        line-height: 1.7;
    }


    /* Карточки преимуществ */

    .features-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .feature-card {
        padding: 32px 24px;

        border-radius: 18px;
    }

    .feature-icon {
        width: 62px;
        height: 62px;

        margin-bottom: 20px;

        font-size: 26px;
    }

    .feature-card h3 {
        font-size: 25px;

        margin-bottom: 12px;
    }

    .feature-card p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* ---------- CATEGORIES ---------- */

    .categories {
        padding: 75px 20px;
    }

    .category-grid {
        gap: 18px;
    }

    .category-card {
        height: 260px;

        border-radius: 18px;
    }

    .overlay {
        padding: 25px;
    }

    .overlay h3 {
        font-size: 30px;

        margin-bottom: 8px;
    }

    .overlay span {
        font-size: 14px;
    }

}