:root{
  --bg:#0b1220;
  --bg2:#111a2c;
  --text:#eef3ff;
  --muted:#aab7d4;
  --gold:#f6c762;
  --gold2:#d8a73a;
  --wa:#25d366;
  --shadow:0 16px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at -10% -10%, #1e293b20, transparent 70%),
    radial-gradient(800px 400px at 110% -10%, #1e293b20, transparent 70%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  min-height:100vh;
}

.bg-app{ color: var(--text); }
.text-app{ color: var(--text); }
.text-muted-app{ color: var(--muted) !important; }
.brand-gold{ color: var(--gold); }
.brand-title{ letter-spacing:.5px; }

.header-glass{ background:#080f1cdd; backdrop-filter: blur(8px); }
.filters-glass{ background:linear-gradient(180deg,#0b1220e6,#0b1220b3); backdrop-filter: blur(6px); }
.footer-glass{ background:linear-gradient(180deg,#0b1220,#0b1220cc); }

.btn-app-gold{
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#1a1205;
  border: 1px solid #f6c76255;
  font-weight:800;
}
.btn-app-gold:hover{ filter: brightness(1.05); }

.logo{
  width: clamp(64px, 10vw, 92px);
  height:auto;
  filter: drop-shadow(0 0 10px #f6c76255);
  user-select:none;
}

/* Logo animation */
@keyframes logoFloat {
  0%   { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 10px #f6c76255); }
  50%  { transform: translateY(-6px) rotate(-2deg) scale(1.02); filter: drop-shadow(0 0 16px #f6c76288); }
  100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 10px #f6c76255); }
}
.logo-anim{ animation: logoFloat 3.2s ease-in-out infinite; }

/* Hero */
.hero{
  position:relative;
}
.hero::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(700px 240px at 20% 20%, #f6c7621a, transparent 70%),
    radial-gradient(700px 240px at 90% 10%, #60a5fa12, transparent 70%);
  pointer-events:none;
}
.hero-card, .hero-side{
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.badge-glow{
  border:1px solid #ffffff1a;
  background: linear-gradient(180deg, #ffffff0d, #ffffff05);
  box-shadow: 0 10px 30px rgba(246,199,98,.12);
}
.icon-bubble{
  width:46px; height:46px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, #f6c76222, #ffffff08);
  border:1px solid #ffffff1a;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  font-size: 20px;
  color: var(--gold);
}
.mini-glass{
  background: linear-gradient(180deg, #ffffff0a, #ffffff05);
}

/* Animations (rise + delay) */
@keyframes riseIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.99); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.anim-rise { animation: riseIn .55s cubic-bezier(.2,.8,.2,1) both; }
.anim-d2 { animation-delay: .10s; }

/* Cards */
.card-app{
  background:linear-gradient(180deg,#121a2b,#0f1626);
  border:1px solid #ffffff14;
  box-shadow:var(--shadow);
  transition: transform .25s ease, filter .25s ease, border-color .25s ease;
  cursor:pointer;
  overflow:hidden;
}
.card-app:hover{
  transform: translateY(-6px);
  border-color:#f6c7623d;
  filter: brightness(1.03);
}

.card-img-wrap{ position:relative; }
.card-app img{ height: 210px; object-fit: cover; }
.card-sheen{
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, #ffffff18 45%, transparent 70%);
  transform: translateX(-120%) skewX(-15deg);
  transition: transform .8s ease;
  pointer-events:none;
}
.card-app:hover .card-sheen{
  transform: translateX(140%) skewX(-15deg);
}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(10px) scale(.995);
  filter: blur(6px);
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}

/* Modal */
.modal-app{
  background: linear-gradient(180deg, #0e1626ee, #0a1222ee);
  border: 1px solid #ffffff22;
  box-shadow: var(--shadow);
  color: var(--text);
}

/* Empty */
.empty-icon{
  width:64px;height:64px;border-radius:18px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid #ffffff14;
  box-shadow: var(--shadow);
  font-size: 28px;
  color: var(--gold);
}

/* WhatsApp float */
.wa-float{
  position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--wa);
  box-shadow:0 12px 30px rgba(37,211,102,.35);z-index:35;transition:transform .25s ease;
  text-decoration:none;
  font-size: 28px;
}
.wa-float:hover{transform:scale(1.07)}
.fw-bold {
    color:var(--gold);
}