#page-index{
  background:linear-gradient(-45deg,#ffd1dc,#ffe4e1,#fce7f3,#f8bbd0);
  background-size:400% 400%;
  animation:bg-index 10s infinite ease;
}
@keyframes bg-index{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

#page-index .background{position:absolute;inset:0;z-index:0;}
#page-index .hearts{position:absolute;inset:0;pointer-events:none;z-index:1;}
#page-index .hearts span{position:absolute;font-size:25px;color:#ff7aa8;animation:float-index 8s linear infinite;bottom:0;}
#page-index .hearts span:nth-child(1){left:10%;animation-delay:0s;}
#page-index .hearts span:nth-child(2){left:25%;animation-delay:2s;}
#page-index .hearts span:nth-child(3){left:50%;animation-delay:4s;}
#page-index .hearts span:nth-child(4){left:75%;animation-delay:1s;}
#page-index .hearts span:nth-child(5){left:90%;animation-delay:3s;}
@keyframes float-index{0%{transform:translateY(100vh);opacity:0;}20%{opacity:1;}100%{transform:translateY(-120px);opacity:0;}}

#page-index .container{
    width:90%;
    max-width:360px;
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    transform:translateY(40px); /* adjust 30–50px to your liking */
}


#page-index .progress{height:8px;background:white;border-radius:20px;overflow:hidden;margin-bottom:20px;}
#page-index .progress-fill{width:8%;height:100%;background:#ff4d88;}
#page-index .card{background:rgba(255,255,255,.25);backdrop-filter:blur(18px);padding:35px;border-radius:30px;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.15);}
#page-index h1{color:#ff2e74;margin-bottom:15px;}
#page-index p{color:#444;line-height:1.6;margin-bottom:30px;}
#page-index button{width:100%;padding:15px;border:none;border-radius:15px;background:#ff4d88;color:white;font-size:18px;cursor:pointer;transition:.3s;}
#page-index button:hover{transform:scale(1.05);}
#page-index #indexTitle{cursor:default;}
#page-index .index-quote{font-style:italic;color:#ff4d88;margin-top:-10px;margin-bottom:20px;font-size:14px;}
#page-index .index-quote.hidden{display:none;}
#page-index .index-toast{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(0,0,0,.75);color:white;padding:10px 18px;border-radius:20px;font-size:13px;
  max-width:85%;text-align:center;animation:toast-in .3s ease;}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* Premium responsive */
*{box-sizing:border-box}img,video{max-width:100%;height:auto}body{overflow-x:hidden}
.container{width:min(92%,1100px);margin:auto}
h1{font-size:clamp(2rem,5vw,4rem)}h2{font-size:clamp(1.5rem,4vw,3rem)}p{font-size:clamp(1rem,2vw,1.1rem)}
button,.btn{min-height:48px;padding:.8rem 1.4rem;border-radius:14px}
@media(max-width:768px){section{padding:60px 16px}}