html, body { max-width: 100%; overflow-x: hidden; }
body { font-family: 'Heebo', sans-serif; scroll-behavior: smooth; }

.hero-gradient { background: linear-gradient(135deg, #020617 0%, #1e3a8a 100%); }
.hero-glow::before{
  content:"";
  position:absolute;
  inset:-200px;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,.30), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(96,165,250,.18), transparent 45%);
  filter: blur(10px);
  z-index: 0;
}

.glass-card { background: rgba(255,255,255,1); border: 1px solid rgba(229,231,235,1); transition: all .3s ease; }
.glass-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

.floating { animation: floating 4s ease-in-out infinite; }
@keyframes floating { 0% { transform: translateY(0px) rotate(-2deg); } 50% { transform: translateY(-15px) rotate(1deg);} 100% { transform: translateY(0px) rotate(-2deg);} }

.topic-link { transition: all .2s ease; display:flex; align-items:center; padding:.6rem .7rem; border-radius:.75rem; }
.topic-link:hover { background:#eff6ff; color:#1d4ed8; padding-right:1rem; }

.btn-pop { transition: transform .15s ease, box-shadow .15s ease; }
.btn-pop:hover { transform: translateY(-2px); }
.btn-pop:active { transform: translateY(0px) scale(.98); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7);} 70% { box-shadow: 0 0 0 15px rgba(34,197,94,0);} 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);} }
.wa-pulse { animation: pulse 2.2s infinite; }

@media (max-width: 640px){ body.has-wa-bar { padding-bottom: 68px; } }