body{
    margin:0;
    font-family:'Segoe UI',sans-serif;
    background:#FEFAF4;
    overflow-x:hidden;
}

/* Animated gradient background */
.background-animation{
    position:fixed;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        #CC4034,
        #FFC526,
        #6AA121,
        #E4BC91
    );
    background-size:400% 400%;
    animation:gradientMove 14s ease infinite;
    z-index:-2;
}

@keyframes gradientMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Floating bubbles */
.bubble{
    position:fixed;
    bottom:-150px;
    border-radius:50%;
    background:rgba(255,255,255,0.25);
    animation:floatUp linear infinite;
}

.b1{width:60px;height:60px;left:10%;animation-duration:14s;}
.b2{width:40px;height:40px;left:25%;animation-duration:18s;}
.b3{width:80px;height:80px;left:50%;animation-duration:22s;}
.b4{width:50px;height:50px;left:70%;animation-duration:16s;}
.b5{width:70px;height:70px;left:85%;animation-duration:20s;}

@keyframes floatUp{
    0%{
        transform:translateY(0);
        opacity:.6;
    }
    100%{
        transform:translateY(-120vh);
        opacity:0;
    }
}

/* Container */
.container{
    text-align:center;
    padding-top:90px;
    color:white;
    max-width:600px;
    margin:auto;
    position:relative;
    z-index:2;
}

/* Logo */
.logo{
    width:140px;
    animation:logoFade 2s ease;
}

@keyframes logoFade{
    0%{
        opacity:0;
        transform:translateY(-40px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

/* Text */
h1{
    font-size:36px;
    margin-top:15px;
}

.subtitle{
    font-size:18px;
    margin-bottom:30px;
}

/* Buttons */
.btn{
    display:block;
    width:260px;
    margin:12px auto;
    padding:14px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    color:white;
    transition:.3s;
}

/* Native social colors */
.instagram{background:#E4405F;}
.tiktok{background:#000000;}
.facebook{background:#1877F2;}
.google{background:#34A853;}

/* Icon spacing */
.btn i{
    margin-right:10px;
}

/* Hover */
.btn:hover{
    transform:scale(1.07);
    box-shadow:0 10px 20px rgba(0,0,0,.3);
}

/* Review promo */
.review-promo{
    margin-top:20px;
    font-size:16px;
    background:rgba(255,255,255,0.2);
    padding:15px;
    border-radius:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
}

/* Progress bar */
.progress-container{
    width:85%;
    height:10px;
    background:rgba(255,255,255,0.3);
    margin:auto;
    margin-top:20px;
    border-radius:20px;
}

.progress-bar{
    height:100%;
    width:0%;
    background:#FF6F00; /* new orange color */
    border-radius:20px;
}

/* Connect button */
/* Connect button */
.connect{
    margin-top:25px;
    padding:16px 45px;
    font-size:18px;
    border:none;
    border-radius:10px;

    background:#FF1493; /* vibrant pink */
    color:white;        /* text color */
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.connect:hover{
    background:#E01187; /* darker pink on hover */
    transform:scale(1.1);
}

/* Responsive */
@media (max-width:768px){
    .logo{width:110px;}
    h1{font-size:26px;}
    .subtitle{font-size:16px;}
    .btn{width:85%;}
    .connect{width:85%;}
    .review-promo{width:90%;font-size:14px;}
}