@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

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

body{
background:#000;
color:white;
overflow-x:hidden;
}

nav{
display:flex;
justify-content:space-between;
padding:30px 8%;
align-items:center;
}

.logo{
font-size:28px;
font-weight:700;
}

.menu{
display:flex;
gap:40px;
}

.menu a{
color:#999;
text-decoration:none;
}

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.hero h1{
font-size:90px;
font-weight:700;
line-height:1.05;
max-width:1000px;
}

.hero p{
margin-top:30px;
font-size:22px;
color:#aaa;
}

button{
margin-top:40px;
padding:18px 40px;
border:none;
border-radius:100px;
background:white;
cursor:pointer;
font-size:18px;
}

.ice{
margin-top:70px;
width:240px;
height:240px;
border-radius:50px;
display:flex;
justify-content:center;
align-items:center;
font-size:130px;

background:rgba(255,255,255,.07);
backdrop-filter:blur(30px);

border:1px solid rgba(255,255,255,.1);
}

.glass{
padding:100px 8%;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(40px);
padding:60px;
border-radius:40px;
}

.card h2{
font-size:80px;
margin-bottom:15px;
}

.card span{
color:#999;
}

.bigText{
padding:180px 10%;
text-align:center;
}

.bigText h2{
font-size:70px;
line-height:1.2;
}

.flavors{
padding:0 8% 150px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.flavor{
height:250px;
border-radius:40px;
display:flex;
justify-content:center;
align-items:center;
font-size:35px;
font-weight:700;
}

.mango{
background:#ffb000;
}

.strawberry{
background:#ff355d;
}

.blueberry{
background:#5d6cff;
}

.watermelon{
background:#00c48c;
}