body{

margin:0;

font-family:'Comfortaa',sans-serif;

color:white;

background:#0b1324;

text-align:center;

overflow-x:hidden;

}

/* фон */

.background{

position:fixed;

width:100%;

height:100%;

z-index:-1;

background:

radial-gradient(circle at 20% 30%,rgba(0,140,255,0.25),transparent 40%),

radial-gradient(circle at 80% 20%,rgba(255,140,0,0.25),transparent 40%),

radial-gradient(circle at 50% 80%,rgba(0,180,255,0.2),transparent 40%),

linear-gradient(180deg,#0b1324,#09101d);

}

/* header */

header{

padding:60px 20px;

animation:fadeIn 1s ease;

}

.logo{

width:200px;

margin-bottom:15px;

filter:drop-shadow(0 0 25px rgba(0,180,255,0.6));

transition:0.4s;

}

.logo:hover{

transform:scale(1.05);

filter:drop-shadow(0 0 35px rgba(0,180,255,0.9));

}

h1{

margin:10px 0;

font-size:44px;

color:#58c8ff;

}

.subtitle{

color:#b7c6ff;

margin-bottom:25px;

}

/* кнопка */

.ozon-btn{

display:inline-block;

padding:14px 30px;

background:linear-gradient(45deg,#ff9d2f,#ff6a00);

color:white;

text-decoration:none;

border-radius:12px;

transition:0.3s;

box-shadow:0 8px 20px rgba(255,120,0,0.4);

}

.ozon-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(255,150,0,0.6);

}

/* товары */

.products{

max-width:1100px;

margin:40px auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

padding:20px;

}

/* карточка */

.card{

background:rgba(255,255,255,0.05);

border-radius:22px;

padding:22px;

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.08);

transition:0.4s;

opacity:0;

transform:translateY(40px);

}

.card.show{

opacity:1;

transform:translateY(0);

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 15px 40px rgba(0,0,0,0.4);

}

.card img{

width:100%;

border-radius:16px;

margin-bottom:15px;

transition:0.4s;

}

.card:hover img{

transform:scale(1.05);

}

.card h3{

margin:10px 0;

color:#8dd8ff;

}

.card p{

font-size:14px;

color:#cbd5ff;

}

/* кнопка товара */

.card-btn{

display:inline-block;

margin-top:12px;

padding:10px 22px;

background:linear-gradient(45deg,#ff9d2f,#ff6a00);

color:white;

text-decoration:none;

border-radius:10px;

transition:0.3s;

}

.card-btn:hover{

transform:scale(1.05);

}

/* footer */

footer{

margin-top:50px;

padding:25px;

color:#7c8cff;

}

/* анимация */

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}