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


body{

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

color:#4b3025;

line-height:1.5;


/* Candy Bear cream background */

background-color:#fff8ed;

background-image:

radial-gradient(circle at 8% 12%,
rgba(255,182,193,.22) 0,
rgba(255,182,193,.22) 38px,
transparent 39px),

radial-gradient(circle at 92% 18%,
rgba(255,210,120,.22) 0,
rgba(255,210,120,.22) 42px,
transparent 43px),

radial-gradient(circle at 12% 82%,
rgba(190,230,170,.20) 0,
rgba(190,230,170,.20) 45px,
transparent 46px),

radial-gradient(circle at 88% 78%,
rgba(255,170,200,.20) 0,
rgba(255,170,200,.20) 40px,
transparent 41px),

linear-gradient(
135deg,
#fff8ed,
#fff1dc
);

background-attachment:fixed;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

}




/* HEADER */


.header{

max-width:1200px;

margin:20px auto;

padding:18px 35px;

display:flex;

align-items:center;

justify-content:space-between;


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

backdrop-filter:blur(12px);


border-radius:30px;


box-shadow:

0 10px 30px rgba(75,48,37,.12);

}



.logo img{

width:95px;

}



nav{

display:flex;

gap:35px;

}



nav a{

font-weight:700;

color:#4b3025;

transition:.3s;

}



nav a:hover{

color:#c47b52;

transform:translateY(-2px);

}



.menu-btn{

display:none;

font-size:32px;

cursor:pointer;

}





/* MOBILE MENU */


.mobile-menu{

position:fixed;

top:0;

right:-320px;


width:290px;


height:100vh;


background:#fff8ed;


padding:100px 35px;


z-index:999;


box-shadow:-10px 0 35px rgba(0,0,0,.15);


transition:.35s;

}



.mobile-menu.active{

right:0;

}



.mobile-menu a{

display:block;

font-size:21px;

font-weight:bold;

margin-bottom:28px;

color:#4b3025;

}



.mobile-menu .telegram{

background:#5b3828;

color:white !important;

text-align:center;

padding:14px;

border-radius:40px;

}


/* BUTTON */


.button,
.telegram,
.product-card a{


display:inline-block;

background:#5b3828;

color:white;

padding:13px 28px;

border-radius:40px;

font-weight:bold;

transition:.35s;

}



.button:hover,
.telegram:hover,
.product-card a:hover{

transform:translateY(-4px);

box-shadow:

0 10px 20px rgba(91,56,40,.25);

}

/* HERO */


.hero{

max-width:1200px;

margin:70px auto;

padding:45px;


display:flex;

align-items:center;

gap:60px;


background:

linear-gradient(

135deg,

#fff8ed,

#ffe5cc

);


border-radius:45px;


box-shadow:

0 20px 50px rgba(75,48,37,.12);


position:relative;

overflow:hidden;

}



.hero::before{


content:"";


position:absolute;


width:180px;


height:180px;


background:rgba(255,182,193,.18);


border-radius:50%;


top:-60px;


left:-60px;


}



.hero-text{

flex:1;

position:relative;

z-index:2;

}



.hero-text h1{

font-size:58px;

letter-spacing:-2px;

}



.hero-text h2{

font-size:35px;

margin:20px 0;

}



.hero-text p{

font-size:18px;

max-width:500px;

}



.hero-image{

flex:1;

position:relative;

z-index:2;

}



.hero-image img{


border-radius:35px;


box-shadow:

0 20px 40px rgba(75,48,37,.18);


}





/* FEATURES */


.features{


max-width:1200px;


margin:70px auto;


display:grid;


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


gap:30px;


}



.feature-card{


background:white;


padding:35px 25px;


border-radius:30px;



box-shadow:


0 15px 35px rgba(75,48,37,.08);



transition:.35s;


}



.feature-card:hover{


transform:

translateY(-10px);


}



.icon{


font-size:40px;


}







/* COLLECTION */


.collection{


max-width:1200px;


margin:80px auto;


text-align:center;


position:relative;


}



.collection::after{


content:"🍭";


position:absolute;


right:20px;


bottom:0;


font-size:70px;


opacity:.12;


transform:rotate(20deg);


}



.collection h1,
.collection h2{


font-size:42px;


}



.collection p{


color:#806554;


}





/* PRODUCTS */


.products{


margin-top:45px;


display:grid;


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


gap:30px;


}



.product-card{


background:white;


padding:15px;


border-radius:32px;


box-shadow:


0 15px 35px rgba(75,48,37,.1);



transition:.35s;



overflow:hidden;


}



.product-card:hover{


transform:


translateY(-12px);


box-shadow:


0 25px 50px rgba(75,48,37,.18);


}



.product-card img{


border-radius:25px;


transition:.35s;


}



.product-card:hover img{


transform:scale(1.05);


}



.product-card h3{


margin-top:18px;


font-size:22px;


}

/* ABOUT */


.about-preview{


max-width:900px;


margin:80px auto;


padding:50px;


background:white;


border-radius:40px;



box-shadow:


0 15px 40px rgba(75,48,37,.1);



text-align:center;


}



.about-preview img{


width:160px;


margin:auto;


}







/* FOOTER */


footer{


margin-top:80px;


background:#4b3025;


color:white;


padding:50px;


text-align:center;


}



.footer-logo img{


width:90px;


margin:auto;


}







/* EXTRA CANDY DECORATION */


body::before{


content:"🍭";


position:fixed;


top:120px;


left:25px;


font-size:65px;


opacity:.08;


z-index:-1;


transform:rotate(-25deg);


}



body::after{


content:"🍬";


position:fixed;


bottom:100px;


right:25px;


font-size:70px;


opacity:.08;


z-index:-1;


transform:rotate(20deg);


}







/* MOBILE */


@media(max-width:768px){



.header{


margin:15px;


padding:15px 20px;


}



.logo img{


width:75px;


}



nav{


display:none;


}



.menu-btn{


display:block;


}





.hero{


margin:30px 15px;


padding:25px;


flex-direction:column;


text-align:center;


gap:30px;


}



.hero-text h1{


font-size:40px;


}



.hero-text h2{


font-size:26px;


}





.features{


grid-template-columns:1fr;


margin:40px 15px;


}



.collection{


margin:50px 15px;


}



.collection h1,
.collection h2{


font-size:32px;


}




.products{


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


gap:15px;


}



.product-card{


padding:10px;


}



.product-card h3{


font-size:17px;


}




.about-preview{


margin:40px 15px;


padding:30px 20px;


}




body::before{


font-size:45px;


left:5px;


}



body::after{


font-size:45px;


right:5px;


}


}