/* NaijaTopup Landing — glassmorphism over a vivid mesh */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ COLOURFUL MESH BACKGROUND ============ */
.bg-mesh {
  background-color: #eef2ff;
  background-image:
    radial-gradient(at  8% 12%, rgba(16,185,129,0.55) 0%, transparent 38%),
    radial-gradient(at 92%  6%, rgba(251,191,36,0.55) 0%, transparent 35%),
    radial-gradient(at 88% 88%, rgba(99,102,241,0.55) 0%, transparent 38%),
    radial-gradient(at 12% 92%, rgba(244,114,182,0.50) 0%, transparent 38%),
    radial-gradient(at 50% 50%, rgba(56,189,248,0.32) 0%, transparent 40%);
  background-attachment: fixed;
}

/* ============ FLOATING ORBS ============ */
.orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.orbs::before, .orbs::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6;
}
.orbs::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
  top: -160px; left: -120px;
  animation: orb-a 22s ease-in-out infinite alternate;
}
.orbs::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
  bottom: -200px; right: -160px;
  animation: orb-b 28s ease-in-out infinite alternate;
}
@keyframes orb-a { from{transform:translate(0,0) scale(1)}   to{transform:translate(80px,60px)  scale(1.15)} }
@keyframes orb-b { from{transform:translate(0,0) scale(1)}   to{transform:translate(-60px,-80px) scale(1.1)} }

/* All sections sit above the orbs */
header, section, footer { position: relative; z-index: 1; }

/* ============ GLASS ============ */
.glass {
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(28px) saturate(220%) contrast(105%);
          backdrop-filter: blur(28px) saturate(220%) contrast(105%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 12px 40px -12px rgba(11,18,32,0.18);
}

.glass-bar {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
          backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,0.7);
}

/* ============ MISC ============ */
::selection { background: #10b981; color: white; }

.animate-tick { will-change: transform; }

/* Safari fallback */
@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass-bar { background: rgba(255,255,255,0.92); }
}

/* Print-friendly */
@media print {
  .orbs, .bg-mesh { display: none; }
  body { background: white; }
}