* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #3b2118;

    background: #fff9f1;
}

body.no-scroll {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}


/* =========================
   HEADER
========================= */

.header {

    position: sticky;

    top: 0;

    z-index: 50;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 7%;

    background:
        rgba(255, 249, 241, .94);

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid #ead9c8;
}

.logo {

    font-size: 25px;

    font-weight: 900;

    letter-spacing: -1px;
}

.logo span {
    color: #c47742;
}

.logo small {
    font-size: 17px;
}

nav {

    display: flex;

    gap: 30px;
}

nav a {

    font-size: 14px;

    font-weight: 700;

    color: #6f5144;

    transition: .2s;
}

nav a:hover {
    color: #c47742;
}


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

.hero {

    min-height: 680px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    align-items: center;

    padding:
        80px 7%;
}

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

.eyebrow {

    display: inline-block;

    color: #b76c3d;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 25px;
}

.hero h1 {

    margin: 0;

    font-size:
        clamp(52px, 6vw, 82px);

    line-height: .94;

    letter-spacing: -5px;
}

.hero h1 span {

    display: block;

    color: #c47742;
}

.hero p {

    max-width: 560px;

    margin:
        30px 0;

    color: #775c4e;

    font-size: 19px;

    line-height: 1.65;
}

.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        15px 20px;

    border-radius: 14px;

    color: white;

    background: #3b2118;

    font-weight: 800;

    transition: .25s;
}

.hero-button span {
    font-size: 18px;
}

.hero-button:hover {

    background: #c47742;

    transform:
        translateY(-3px);
}


/* HERO VISUAL */

.hero-visual {

    position: relative;

    height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 38px;

    background:
        linear-gradient(
            135deg,
            #f3c9a5,
            #eaa0a2
        );
}

.gift-box {

    position: relative;

    width: 300px;

    height: 205px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff4e4;

    border:
        9px solid #d69b68;

    border-radius: 20px;

    transform: rotate(-5deg);

    box-shadow:
        0 30px 50px
        rgba(61, 30, 15, .22);
}

.box-ribbon {

    position: absolute;

    background: #c47742;
}

.box-ribbon.vertical {

    width: 32px;

    height: 100%;

    left: 50%;

    transform:
        translateX(-50%);
}

.box-ribbon.horizontal {

    width: 100%;

    height: 28px;

    top: 50%;

    transform:
        translateY(-50%);
}

.box-label {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 9px 14px;

    background: #fff4e4;

    border-radius: 6px;

    font-size: 20px;

    font-weight: 900;
}

.box-label strong {
    color: #c47742;
}

.floating {

    position: absolute;

    font-size: 58px;

    animation:
        float 4s ease-in-out infinite;
}

.sweet-one {

    top: 55px;
    left: 55px;
}

.sweet-two {

    top: 80px;
    right: 55px;

    animation-delay: .8s;
}

.sweet-three {

    bottom: 55px;
    left: 70px;

    animation-delay: 1.4s;
}

@keyframes float {

    0%, 100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(7deg);
    }
}


/* =========================
   INTRO
========================= */

.intro {

    display: grid;

    grid-template-columns:
        100px 1fr 1fr;

    gap: 35px;

    align-items: end;

    padding:
        110px 7% 55px;
}

.intro-number {

    color: #c47742;

    font-size: 13px;

    font-weight: 900;
}

.section-label {

    margin: 0 0 15px;

    color: #c47742;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}

.intro h2,
.about h2,
.how h2,
.delivery h2 {

    margin: 0;

    font-size:
        clamp(40px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -3px;
}

.intro h2 em,
.how h2 em {

    color: #c47742;

    font-style: normal;
}

.intro-text {

    max-width: 410px;

    margin: 0;

    color: #80665a;

    line-height: 1.7;
}


/* =========================
   SETS
========================= */

.sets {

    padding:
        50px 7% 120px;
}

.sets-grid {

    display: grid;

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

    gap: 70px 30px;
}

.set-card {

    cursor: pointer;
}

.set-image {

    position: relative;

    height: 370px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 28px;

    transition: .35s;
}

.set-card:hover .set-image {

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 50px
        rgba(60, 30, 15, .14);
}

.classic-image {
    background:
        linear-gradient(
            135deg,
            #f2d1ae,
            #eeb9a4
        );
}

.berry-image {
    background:
        linear-gradient(
            135deg,
            #efc0bc,
            #f3d3b0
        );
}

.choco-image {
    background:
        linear-gradient(
            135deg,
            #705044,
            #3d241b
        );
}

.girl-image {
    background:
        linear-gradient(
            135deg,
            #f5d4d1,
            #eab7c0
        );
}

.premium-image {
    background:
        linear-gradient(
            135deg,
            #d8c1aa,
            #9b7560
        );
}

.party-image {
    background:
        linear-gradient(
            135deg,
            #f2d49d,
            #e7a46f
        );
}

.image-sweet {

    font-size: 115px;

    transition: .35s;
}

.image-sweet.second {

    position: absolute;

    margin-left: 170px;

    margin-top: 100px;

    font-size: 70px;
}

.set-card:hover .image-sweet {

    transform:
        scale(1.08)
        rotate(-5deg);
}

.set-number {

    position: absolute;

    top: 22px;

    left: 24px;

    color: rgba(59, 33, 24, .55);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;
}

.view-label {

    position: absolute;

    bottom: 22px;

    right: 22px;

    padding:
        11px 15px;

    border-radius: 12px;

    color: #3b2118;

    background:
        rgba(255, 250, 242, .9);

    font-size: 12px;

    font-weight: 900;

    opacity: 0;

    transform:
        translateY(10px);

    transition: .3s;
}

.set-card:hover .view-label {

    opacity: 1;

    transform:
        translateY(0);
}

.set-info {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        18px 4px 0;
}

.set-info h3 {

    margin: 0 0 5px;

    font-size: 23px;
}

.set-info p {

    margin: 0;

    color: #80665a;

    font-size: 14px;
}

.set-info strong {

    white-space: nowrap;

    font-size: 20px;
}


/* =========================
   ABOUT
========================= */

.about {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;

    padding:
        120px 7%;

    background: #3b2118;

    color: white;
}

.about .section-label {
    color: #e4a172;
}

.about h2 span {
    display: block;

    color: #e5a174;
}

.about-text {

    max-width: 500px;
}

.about-text p {

    color: #dbc4b6;

    font-size: 17px;

    line-height: 1.8;
}

.signature {

    margin-top: 35px;

    font-size: 22px;

    font-weight: 900;
}

.signature span {
    color: #e5a174;
}


/* =========================
   HOW
========================= */

.how {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 80px;

    padding:
        120px 7%;
}

.steps {

    border-top:
        1px solid #ead9c8;
}

.step {

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 20px;

    padding:
        30px 0;

    border-bottom:
        1px solid #ead9c8;
}

.step > span {

    color: #c47742;

    font-size: 12px;

    font-weight: 900;
}

.step h3 {

    margin: 0 0 7px;

    font-size: 22px;
}

.step p {

    margin: 0;

    color: #80665a;
}


/* =========================
   DELIVERY
========================= */

.delivery {

    padding:
        110px 7%;

    background: #f5e5d7;
}

.delivery h2 span {

    display: block;

    color: #c47742;
}

.delivery-cards {

    display: grid;

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

    gap: 20px;

    margin-top: 50px;
}

.delivery-card {

    padding: 30px;

    border-radius: 22px;

    background: #fffaf4;
}

.delivery-icon {

    font-size: 32px;

    margin-bottom: 20px;
}

.delivery-card h3 {

    margin: 0 0 7px;

    font-size: 20px;
}

.delivery-card p {

    margin: 0;

    color: #80665a;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================
   FINAL
========================= */

.final {

    padding:
        110px 7%;
}

.final-inner {

    padding:
        90px 30px;

    text-align: center;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #eaa0a2,
            #f3c69d
        );
}

.final-inner > p {

    margin: 0 0 20px;

    color: #7b4535;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;
}

.final h2 {

    margin: 0 auto 30px;

    max-width: 700px;

    font-size:
        clamp(42px, 6vw, 70px);

    line-height: .95;

    letter-spacing: -4px;
}

.final h2 span {
    display: block;
    color: white;
}

.final-inner > a {

    display: inline-block;

    padding:
        15px 20px;

    border-radius: 13px;

    background: #3b2118;

    color: white;

    font-weight: 800;
}


/* =========================
   FOOTER
========================= */

footer {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    padding:
        35px 7%;

    border-top:
        1px solid #ead9c8;

    color: #80665a;

    font-size: 13px;
}

footer p {
    margin: 5px 0 0;
}


/* =========================
   MODAL
========================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(38, 21, 15, .68);

    opacity: 0;

    visibility: hidden;

    transition: .25s;
}

.modal.active {

    opacity: 1;

    visibility: visible;
}

.modal-content {

    position: relative;

    width: min(900px, 100%);

    max-height: 90vh;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    overflow: hidden;

    border-radius: 30px;

    background: #fffaf4;

    transform:
        translateY(20px)
        scale(.97);

    transition: .3s;
}

.modal.active .modal-content {

    transform:
        translateY(0)
        scale(1);
}

.close {

    position: absolute;

    top: 17px;

    right: 17px;

    z-index: 3;

    width: 40px;

    height: 40px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.9);

    color: #3b2118;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;
}

.close:hover {

    background: #3b2118;

    color: white;

    transform: none;
}

.modal-image {

    min-height: 530px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 120px;
}

.modal-image::after {

    content: "🍫  🍪  🍬";

    font-size: 75px;
}

.modal-info {

    padding:
        65px 45px 40px;

    overflow-y: auto;
}

.modal-info h2 {

    margin:
        5px 0 15px;

    font-size: 45px;

    letter-spacing: -2px;
}

.modal-description {

    color: #80665a;

    line-height: 1.7;
}

.ingredients {

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid #ead9c8;
}

.ingredients h3 {

    margin: 0 0 15px;
}

.ingredients ul {

    margin: 0;

    padding: 0;

    list-style: none;
}

.ingredients li {

    padding:
        8px 0;

    border-bottom:
        1px dashed #ead9c8;

    color: #60473c;
}

.ingredients li::before {

    content: "✦";

    margin-right: 9px;

    color: #c47742;
}

.modal-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid #ead9c8;
}

.modal-bottom > span:first-child {

    font-size: 27px;

    font-weight: 900;
}

.weight {

    color: #80665a;

    font-size: 13px;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 850px) {

    nav {
        display: none;
    }

    .hero {

        grid-template-columns: 1fr;

        padding:
            55px 6%;
    }

    .hero h1 {

        font-size: 53px;

        letter-spacing: -3px;
    }

    .hero-visual {

        height: 350px;
    }

    .intro {

        grid-template-columns:
            1fr;

        padding:
            80px 6% 40px;
    }

    .sets {

        padding:
            40px 6% 90px;
    }

    .sets-grid {

        grid-template-columns:
            1fr;

        gap: 50px;
    }

    .set-image {

        height: 330px;
    }

    .about,
    .how {

        grid-template-columns:
            1fr;

        gap: 50px;

        padding:
            85px 6%;
    }

    .delivery {

        padding:
            85px 6%;
    }

    .delivery-cards {

        grid-template-columns:
            1fr;
    }

    .final {

        padding:
            70px 6%;
    }

    .modal {

        padding: 15px;
    }

    .modal-content {

        grid-template-columns:
            1fr;

        max-height: 94vh;

        overflow-y: auto;
    }

    .modal-image {

        min-height: 250px;

        height: 250px;
    }

    .modal-info {

        padding:
            35px 25px;
    }

    .modal-info h2 {

        font-size: 36px;
    }

    footer {

        flex-direction: column;
    }
}/* =========================
   CONTACTS
========================= */

.contacts {
    padding: 120px 7vw 130px;
    background: #f3e8dc;
    border-top: 1px solid rgba(67, 37, 25, 0.12);
}

.contacts .section-number {
    color: #c8753d;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 45px;
}

.contacts-content {
    max-width: 1050px;
}

.contacts-title {
    font-size: clamp(42px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -3px;
    color: #432519;
    margin-bottom: 30px;
}

.contacts-title span {
    display: block;
    font-weight: 500;
}

.contacts-title strong {
    display: block;
    color: #c8753d;
    font-weight: 800;
}

.contacts-text {
    max-width: 650px;
    color: #765d50;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 45px;
}

/* Telegram card */

.telegram-card {
    width: min(100%, 620px);
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 25px;
    background: #fffaf4;
    border: 1px solid rgba(67, 37, 25, 0.12);
    border-radius: 22px;
    text-decoration: none;
    color: #432519;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.telegram-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(67, 37, 25, 0.12);
}

.telegram-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #432519;
    color: white;
    border-radius: 50%;
    font-size: 25px;
}

.telegram-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.telegram-info span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #c8753d;
}

.telegram-info strong {
    font-size: 22px;
    font-weight: 800;
}

.telegram-arrow {
    margin-left: auto;
    font-size: 30px;
    transition: transform 0.3s ease;
}

.telegram-card:hover .telegram-arrow {
    transform: translate(4px, -4px);
}

.contacts-note {
    margin-top: 25px;
    color: #765d50;
    font-size: 15px;
}