*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;

    background:
    radial-gradient(circle at -10% 50%, #ffdbe8 0 280px, transparent 281px),
    radial-gradient(circle at 110% 20%, #f7d4ff 0 300px, transparent 301px),
    radial-gradient(circle at -5% 95%, #ffd2e6 0 240px, transparent 241px),
    radial-gradient(circle at 105% 100%, #e7d1ff 0 250px, transparent 251px);

    opacity:.9;
}

body::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:220px;
    z-index:-1;

    background:
    radial-gradient(circle at 5% 100%, #ffcde3 0 110px, transparent 111px),
    radial-gradient(circle at 15% 100%, #f6c9ff 0 90px, transparent 91px),
    radial-gradient(circle at 90% 100%, #e6cfff 0 110px, transparent 111px),
    radial-gradient(circle at 80% 100%, #ffd4e8 0 90px, transparent 91px);
}

.leaf{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    font-size:220px;
    color:rgba(255,255,255,0.6);
    pointer-events:none;
    z-index:0;
}

.left{
    left:20px;
}

.right{
    right:20px;
}
.container{

max-width:1200px;
margin:auto;
text-align:center;
}

h1{

font-size:3rem;
color:#8b5cf6;
margin-bottom:15px;
}

.subtitle{

color:#6b7280;
margin-bottom:40px;
font-size:1.1rem;
}

.top-grid,
.bottom-grid{

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

gap:25px;

margin-bottom:40px;
}

.card{

background:white;

padding:12px;

border-radius:25px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.4s;
}

.card:hover{

transform:
translateY(-10px)
rotate(1deg);
}

.card img{

width:100%;
height:250px;
object-fit:contain;
background: linear-gradient(135deg, #fdf2f8, #fce7f3);
padding: 8px;
border-radius:15px;
}

.card p{

padding:15px;
line-height:1.8;
color:#555;
}

.center-card{

max-width:500px;

margin:50px auto;

background:white;

padding:15px;

border-radius:30px;

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

transform:rotate(-2deg);
}

.center-card img{

width:100%;

height:420px;

object-fit:cover;

border-radius:20px;
}

.center-card p{

padding:20px;

line-height:2;
color:#444;
}

.next-btn{

display:inline-block;

margin-top:50px;

padding:18px 45px;

border-radius:999px;

background:
linear-gradient(
45deg,
#a855f7,
#ec4899);

color:white;

font-weight:600;

text-decoration:none;

box-shadow:
0 10px 25px rgba(236,72,153,.3);

transition:.4s;
}

.next-btn:hover{

transform:
scale(1.05);

}

.floating-hearts::before{

content:"💖 💕 💗 ❤️ 💞 💓";

position:fixed;

font-size:25px;

opacity:.15;

animation:float 20s linear infinite;
}

@keyframes float{

from{
transform:translateY(100vh);
}

to{
transform:translateY(-120vh);
}

}

@media(max-width:900px){

.top-grid,
.bottom-grid{

grid-template-columns:1fr;
}

.center-card{

max-width:350px;
}

.center-card img{

height:350px;
}

h1{

font-size:2.2rem;
}
}


.heart-doodle{
    position:fixed;
    width:180px;
    height:180px;
    pointer-events:none;
    z-index:-1;
    opacity:.25;
}

.heart-doodle::before{
    content:"♡";
    font-size:140px;
    color:#ff8fc7;
    position:absolute;
}

.heart-left{
    left:110px;
    top:250px;
    transform:rotate(-15deg);
}

.heart-right{
    right:110px;
    top:250px;
    transform:rotate(15deg);
}