*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body
  {background: white;color:#1a1a1a;
  scroll-behavior:smooth;
  padding-top:120px;padding-bottom:70px;
  transition:background 0.5s,color 0.5s;}
a
  {text-decoration:none;color:inherit;}

/* ---------- HEADER ---------- */
header
  {position:fixed;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;
  padding:15px 30px;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);z-index:1000;}
header h1
  {font-size:2rem;color:#4F46E5;
  text-shadow:0 8px #FF6FD8,0 0 15px #06B6D4;
  animation: neonPulse 2s infinite alternate;}
#searchbar
  {display:flex;width:50%;max-width:400px;margin-top:0;position: relative;}
#searchbar input
  {flex:1;padding:10px 15px;border-radius:8px 0 0 8px;border:1px solid #ccc;font-size:1rem;
  outline:none;box-shadow:0 0 5px rgba(255,111,216,0.3);}
#searchbar button
  {padding:10px 20px;border:none;background:#FF6FD8;color:white;
  border-radius:0 8px 8px 0;cursor:pointer;font-weight:bold;
  box-shadow:0 0 10px #FF6FD8;transition:0.3s;}
#searchbar button:hover{opacity:0.85;}
#results
  {position: absolute;background-color: #fff;
  width: 100%; top: 45px; left: 0; max-height: 200px;
  border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  overflow-y: auto;display: none;z-index: 999;}
  #results div{padding: 10px;cursor: pointer;transition: 0.2s;}
  #results div:hover{background: #FF6FD8;color: white;}

/* MOBILE RESPONSIVE HEADER */
@media(max-width:768px){
header{flex-direction:column; align-items:flex-start;}
#searchbar{width:100%; margin-top:10px;} 
#searchbar button{margin-right: 50px;}}



/* ---------- HERO ---------- */
.hero
  {height:250px;
  display:flex;
  justify-content:center; align-items:center; text-align:center;
  color:white;
  font-size:2.8rem; font-weight:bold;
  background:linear-gradient(270deg,#FF6FD8,#06B6D4,#FF6FD8);
  background-size:600% 600%;
  border-radius:15px;
  box-shadow:0 0 40px #FF6FD8,0 0 80px #06B6D4 inset;
  position:relative;
  overflow:hidden;
  margin-bottom:30px;
  animation:gradientShift 15s ease infinite;
  text-shadow:0 0 25px black,0 0 50px black;}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%} }
@media(max-width:600px){.hero{height:150px;font-size: 1.5rem;margin-bottom: 5px;}}
/*---------HERO SPARKLES---------*/
.sparkleHero
  {position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:white;
  box-shadow:
    0 0 4px #fff,
    0 0 8px #FF6FD8,
    0 0 12px #06B6D4;
  animation:floatUp 4s linear infinite;}
@keyframes floatUp{0%{transform:translateY(200px) scale(0.4);}100%{transform:translateY(-200px) scale(1.2);} }



/* ---------- SECTIONS ---------- */
section > div[id] {scroll-margin:140px;}
section{padding:50px 0px ;}
section h2
  {margin-bottom:30px;font-size :2.5rem;color:black;
  text-shadow:0 0 8px white,0 0 15px white;text-align: center;
  transition:color 0.5s,text-shadow 0.5s;
   background:linear-gradient(270deg,#FF6FD8,#06B6D4,#FF6FD8);height: 80px;padding-top: 15px;}
@media(max-width:600px){section h2{font-size: 1.5rem;height: 50px;padding:10px ;}}
/* ---------- GRID & CARDS ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;height: 250px;padding: 0px 40px;}
.card
  {background:#fff;border-radius:18px;overflow:hidden;border: 5px solid black;
  box-shadow:0 10px 25px rgba(255,111,216,0.2);
  transition:transform 0.4s ease, box-shadow 0.4s ease;
  position:relative;cursor:pointer;}
.card img{width:100%;height:80%;display:block;border-bottom:1px solid #eee;}
.card-content{padding:10px;text-align: center;}
.card-content h3
  {color:purple;
  text-shadow:0 0 2px #FF6FD8,0 0 15px purple;
  animation: neonPulse 2s infinite alternate;
  font-size:2rem;}
.card:hover
  {transform:scale(1.05);
  box-shadow:0 15px 35px rgba(255,111,216,0.6),0 0 25px rgba(6,182,212,0.8), inset 0 0 10px rgba(255,111,216,0.3);}
.card-link{text-decoration: none; color: inherit; display: block;}
/* ---------- BADGE ---------- */
.badge
  {position:absolute;top:10px;right:10px;
  background:#FF6FD8;color:white;
  padding:5px 10px;font-size:0.75rem;border-radius:12px;
  text-shadow:0 0 5px #fff;box-shadow:0 0 10px #FF6FD8,0 0 20px #06B6D4;}
 @media(max-width:600px){
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:150px;padding: 0px 20px;}
.card{height:130px;}
.card-content{padding: 5px;}
.card-content h3{font-size: 0.5rem;padding: 4px;}
.badge{padding: 2px ;position:absolute;top:10px;right:10px;font-size: 0.50rem;}}
/* ---------- CONFETTI ---------- */
.confetti
  {position:fixed;width:8px;height:8px;top:-10px;
  z-index:9999;animation:fall linear forwards;
  border-radius:50%;
  box-shadow:0 0 4px #fff,0 0 8px #FF6FD8,0 0 12px #06B6D4;}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:0;}}
/* ---------- SPARKLE ---------- */
.sparkle
  {position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  pointer-events:none;
  background:white;
  box-shadow:0 0 4px #fff, 0 0 8px #FF6FD8, 0 0 12px #06B6D4;
  animation:sparklePulse 1.5s infinite alternate;}
@keyframes sparklePulse{from{transform:scale(0.8);opacity:0.7;} to{transform:scale(1.3);opacity:1;} }
/* ---------- SEE MORE BUTTON ---------- */
.seemore
  {display:block;margin:20px auto;padding:10px 20px;
  background:#06B6D4;color:white;border:none;border-radius:8px;
  cursor:pointer;transition:0.3s;
  box-shadow:0 0 10px #06B6D4,0 0 20px #FF6FD8;}
.seemore:hover{opacity:0.85;}
/*--------------SLIDER---------*/
#alltrends{display:flex; overflow: hidden; width: 100%; max-width: 100%;}
.slider{display: flex;animation: scroll 40s linear infinite;margin-bottom: 20px;}
  @keyframes scroll{
    0%{transform: translateX(0);}
    100%{transform: translateX(-50%);}}
.slider .card{width:250px; border: 5px solid black;margin:10px;}
h4{color:purple;padding: 10px;
  text-shadow:0 0 2px #FF6FD8,0 0 15px purple;
  animation: neonPulse 2s infinite alternate;}
@media(max-width:760px){.slider .card{width: 150px;}}


/* ---------- BOTTOM NAV (Swipeable Mobile) ---------- */
#bottomnav
  {position:fixed;
  bottom:0;
  width:100%;
  background:linear-gradient(270deg,#FF6FD8,#06B6D4,#FF6FD8);
  display:flex;
  overflow-x:auto;
  white-space:nowrap;
  padding:5px 0;
  box-shadow:0 -2px 10px rgba(0,0,0,0.1);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;}
#bottomnav::-webkit-scrollbar{display:none;}
#bottomnav a
  {display:inline-block;
  scroll-snap-align:center;
  padding:0 10px;
  font-size:1rem;
  text-align:center;
  color:black;text-shadow:0 0 8px white,0 0 15px white;
  transition:color 0.3s,text-shadow 0.3s;}
#bottomnav a:hover
  {color:white;
  text-shadow:0 0 8px black,0 0 15px black;}

/* DESKTOP FIX: show all items inline */
@media(min-width:769px){
#bottomnav
    {justify-content:space-around;
    overflow-x:visible;
    white-space:normal;
    scroll-snap-type: none;}
#bottomnav a{padding:0;} }
/*--------------- SWIPE -----------------*/
#swipeHint{
  position:fixed;
  bottom:55px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.9rem;
  color:white;
  background:rgba(0,0,0,0.5);
  padding:6px 14px;
  border-radius:20px;
  z-index:9999;
  animation: swipeMove 1.5s infinite ease-in-out;}
@keyframes swipeMove{
  0%{transform:translateX(-50%) translateX(-10px);opacity:0.6;}
  50%{transform:translateX(-50%) translateX(10px);opacity:1;}
  100%{transform:translateX(-50%) translateX(-10px);opacity:0.6;}}
/* Hide on desktop */
@media(min-width:769px){
  #swipeHint{display:none;}
}


/* ---------- FOOTER ---------- */
#footer
  {background: linear-gradient(270deg,#FF6FD8,#06B6D4,#FF6FD8);
  color: white;
  padding: 50px 30px 20px;
  margin-top: 30px;
  box-shadow:0 -5px 30px rgba(0, 0, 0, 0.2);}
.footer
  {display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px; max-width: 1200px; margin:auto;}
.brand h2{font-size: 1.8rem; text-shadow: 0 0 10px black;}
.brand p{font-size: 0.95rem; line-height: 1.6; opacity: 0.9; padding-top: 15px;}
.link h3, .social h3
  {margin-bottom: 15px; font-size: 1.2rem; text-shadow: 0 0 8px black;}
.link a{display: block; margin-bottom: 8px; font-size: 0.95rem; opacity: 0.9; transition: 0.3s;}
.link a:hover{opacity: 1; transform: translateX(5px);}
.social a{transition: 0.3s;}
.social a:hover{transform: scale(1.2);}
.right
  {text-align: center; font-size: 1rem;
  margin-top: 20px; padding-top: 15px; opacity: 0.85;
  border-top: 1px solid rgba(255,255,255,0,0.3);}
@media(max-width:768px){.footer{grid-template-columns: 1fr 1fr;}h4{padding: 4px;font-size: 0.5rem;}}
@media(max-width:480px){.footer{grid-template-columns: 1fr; text-align: center;}
.social a{margin: 0 8px;}
section h2{font-size: 1.4rem;}
.card-content h3{font-size: 0.5rem;padding: 0px;}
h4{padding: 4px;font-size: 0.5rem;}}


/*------------- INSTALL BUTTON ----------------*/
#installBtn{display:block;margin:10px auto;padding:10px 20px;
  background:linear-gradient(45deg,#f58529,#dd2a7b,#ff8134af,#515bd4);
  border:1px solid white ;border-radius:50px;
  cursor:pointer;transition:0.3s;
  box-shadow:0 0 10px #06B6D4,0 0 20px #FF6FD8;
  position:fixed;
  bottom:80px;
  right:30px;
  padding:12px 15px;
  color:white;
  font-size:18px;
  box-shadow:0 0 10px #06B6D4,0 0 20px #FF6FD8;
  transition:0.3s;}

  /* Floating Share Bar */
#floatingShare {

    
    margin:30px 0px 30px 0px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 9999;
}
.share-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size:30px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.share-btn:hover {transform: scale(1.1);}
.whatsapp {background-color: #25D366;}
.instagram {background:linear-gradient(45deg,#f58529,#dd2a7b,#ff8134af,#515bd4);}
.copy{background-color: #333;}
@media(max-width:760px){#floatingShare{margin:20px 0px 20px 0px;}}