/* Basic page styling */
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;}
}

/* Main 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);}
}

/* Headings */
h1{font-size:36px;margin-top:15px;}
.subtitle{font-size:18px;margin-bottom:20px;}

/* Section titles */
.section-title{
  margin-top:25px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:bold;
}

/* Buttons */
.btn{
  display: flex;
  align-items: center;          /* vertically center */
  justify-content: flex-start;  /* align icon + text to left */
  gap: 12px;                    /* space between icon and text */

  width: 260px;
  margin: 12px auto;
  padding: 14px 20px;           /* extra side padding */
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  color: white;
  box-sizing: border-box;
  transition: .3s;
}
.btn i{
  font-size: 18px;
  flex-shrink: 0;               /* icon keeps size */
}
.btn span{
  text-align: left;
  white-space: nowrap;           /* prevent line wrap */
}

/* Button colors */
.menu{background:#8E44AD;font-size:17px;box-shadow:0 6px 14px rgba(0,0,0,0.25);}
.instagram{background:#E4405F;}
.tiktok{background:#000000;}
.facebook{background:#1877F2;}
.google{background:#34A853;}

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

/* Review promo box */
.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;
}

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