body{margin:0;font-family:'Cairo';background:#000;color:#fff;overflow-x:hidden;transition:.5s}
#bg{
 position:fixed;inset:0;background:url('backgraund.png') center/cover;
 filter:brightness(.63);animation:bgFloat 18s infinite alternate ease-in-out;z-index:-3}
@keyframes bgFloat{0%{transform:scale(1)}100%{transform:scale(1.07)}}

#modeToggle{
 position:fixed;top:20px;left:20px;z-index:20;
 background:#111;color:#fff;border:1px solid gold;
 padding:8px 14px;border-radius:8px;cursor:pointer}

.dark{filter:invert(1) hue-rotate(180deg)}

.hero{
 min-height:80vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 padding:20px;
}

.logo-wrap{position:relative;display:flex;justify-content:center}
.logo{width:135px;filter:drop-shadow(0 0 12px gold);z-index:2}
#goldDust{
 position:absolute;top:0;left:50%;transform:translateX(-50%);
 width:200px;height:200px;pointer-events:none;z-index:1}

.fire-glow{text-shadow:0 0 25px orange,0 0 60px red}

.title{
 color:gold;font-size:28px;margin-top:20px;
 text-shadow:0 0 25px gold,0 0 45px rgba(255,215,0,0.5)
}
.subtitle{color:#ffd;font-size:18px;margin-top:10px}

.container{max-width:900px;margin:auto;padding:20px}
.card{
 text-align:center;background:rgba(0,0,0,0.6);
 padding:25px;border-radius:16px;margin-bottom:22px}

.cta-whatsapp,.cta-download{
 display:inline-block;margin:10px auto;padding:18px 32px;
 background:linear-gradient(#ffd700,#c19a00);
 color:#000;font-size:22px;font-weight:800;border-radius:14px;
 text-decoration:none;box-shadow:0 10px 0 #8f7900,0 0 35px gold;
 transition:.2s}
.cta-whatsapp:hover,.cta-download:hover{transform:translateY(-4px)}

.social-links{
 display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.social-links a{
 padding:10px 14px;border-radius:10px;background:rgba(255,255,255,0.06);
 color:gold;text-decoration:none;transition:.2s;}
.social-links a:hover{
 transform:translateY(-6px);filter:drop-shadow(0 0 14px gold)}

.scroll-animate{opacity:0;transform:translateY(25px);transition:.7s}
.scroll-animate.active{opacity:1;transform:none}

#particles{
 position:fixed;inset:0;pointer-events:none;z-index:50}


.external-browser-section {
  text-align: center;
  margin-top: 30px;
  opacity: 0.8;
}

.external-btn {
  display: inline-block;
  background: #222;
  color: gold;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
  transition: 0.3s;
}

.external-btn:hover {
  background: #333;
  box-shadow: 0 0 18px rgba(255,215,0,0.7);
}

.external-note {
  margin-top: 8px;
  font-size: 13px;
  color: #ccc;
}