*{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;} 
}



/* ---------- HERO ---------- */
.hero
  {height:200px;
  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;padding-top: 0px;
  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: 20px;margin-top: 15px;}}
/*---------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);} }

/* --------- CARDS ------------------------- */
.card-list{max-width:1000px;margin:0 auto;list-style:none;padding:0;}
.card-item{display:flex;align-items:center;background:#fff;margin-bottom:20px;padding:15px;border-radius:20px;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-item:hover{transform:scale(1.03);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-item img{width:200px;height:200px;border-radius:50%;margin-right:20px;border:2px solid #FF6FD8;object-fit:cover;}
.card-content h3{color:#4F46E5;text-shadow:0 0 2px #FF6FD8,0 0 15px #FF6FD8;animation: neonPulse 2s infinite alternate;margin-bottom:5px;font-size: 2rem;font-weight: bolder;}
.card-content p{color:#1a1a1a;font-size:1.3rem;}
.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){.card-item{flex-direction: column;flex-wrap: wrap; align-items:center;text-align: center;}
.card-item img{margin-right: 15px;text-align: center;}}

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

  #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: 50px;
  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{font-size: 1.6rem; margin-right: 10px; 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;}}
@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: 2rem;}}


/*------------- INSTALL BUTTON ----------------*/
#installBtn{display:block;margin:10px auto;padding:10px 20px;
  background:#06B6D4;color:white;border:none;border-radius:10px;
  cursor:pointer;transition:0.3s;
  box-shadow:0 0 10px #06B6D4,0 0 20px #FF6FD8;}


    /* 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: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 25px;
    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;}