/* SL TECH WADDA TOPUP STORE — styles */
:root{
  --bg:#0b0f1a;
  --card:#101626;
  --card-2:#0f1422;
  --text:#eaf2ff;
  --muted:#9bb0d3;
  --brand:#4f8cff;
  --accent:#7cf7d4;
  --glow: 0 0 30px rgba(127, 255, 212, .35);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 500px at 80% 0%, rgba(79,140,255,0.15), transparent 60%),
              radial-gradient(800px 400px at 10% 20%, rgba(124,247,212,0.12), transparent 60%),
              var(--bg);
  line-height: 1.6;
}

.container { width: min(1200px, 92%); margin: 0 auto; }
.muted { color: var(--muted); }
code { background: #0a1120; padding: .15rem .35rem; border-radius: .35rem }

/* Floating CTA (side middle) */
.floating-cta {
  position: fixed;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #001432;
  font-weight: 800;
  letter-spacing:.5px;
  padding: 18px 14px;
  border-radius: 16px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 6px rgba(124,247,212,.15);
  animation: breathe 2.5s ease-in-out infinite, wiggle 8s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{ transform: translateY(-50%) scale(1);} 50%{ transform: translateY(-50%) scale(1.06);} }
@keyframes wiggle { 0%,100%{ rotate:0deg } 50%{ rotate: 1.5deg } }

/* Nav */
.nav { position: sticky; top:0; backdrop-filter: blur(10px); background: rgba(5,10,20,.5); z-index: 10; border-bottom: 1px solid rgba(124,247,212,.08); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.brand { display:flex; gap:14px; align-items:center; }
.logo { width:46px; height:46px; }
.brand-text h1 { font-size: 1.3rem; margin:0; letter-spacing:.5px }
.brand-text .tag { margin:0; color: var(--muted); font-size:.85rem }
.nav a { color: var(--text); text-decoration:none; margin-left:20px; opacity:.9; }
.nav a:hover { color: var(--accent); }

/* Hero */
.hero { padding: 80px 0 40px; position:relative; overflow:hidden; }
.hero-inner { display:grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items:center; }
.hero-copy h2 { font-size: clamp(2rem, 4.5vw, 3.3rem); margin:0 0 8px; }
.sparkle { text-shadow: 0 0 12px rgba(79,140,255,.35); }
.cta-row { display:flex; gap: 14px; margin: 22px 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 18px; border-radius:14px; text-decoration:none; font-weight:700; border: 1px solid transparent; transition: .2s }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--accent)); color:#001432; box-shadow: var(--glow); }
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { border-color: rgba(124,247,212,.3); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.small { padding:10px 12px; border-radius:10px; font-size:.9rem }

.badges { display:flex; gap:10px; flex-wrap:wrap; }
.badge { background: rgba(124,247,212,.08); border:1px solid rgba(124,247,212,.22); padding: 8px 12px; border-radius:999px; font-size:.85rem }

.hero-art .card-stack { position:relative; height: 360px; perspective: 1000px; }
.card { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; border-radius:24px; border:1px solid rgba(124,247,212,.18); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.card:nth-child(1){ transform: rotate(-6deg) translate(-20px, 14px); z-index:3; }
.card:nth-child(2){ transform: rotate(4deg) translate(20px, 18px); z-index:2; }
.card:nth-child(3){ transform: rotate(-2deg) translate(10px, -6px); z-index:1; }
.tilt { animation: tilt 10s ease-in-out infinite; }
.tilt.delay-1 { animation-delay: 1s }
.tilt.delay-2 { animation-delay: 2s }
@keyframes tilt { 0%,100%{ transform: translate(0) rotate(-4deg) } 50%{ transform: translateY(-6px) rotate(-2deg) } }

.scroll-indicator{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:.9rem; color:var(--muted) }

/* About */
.section { padding: 70px 0; }
.section.alt { background: linear-gradient(180deg, rgba(124,247,212,.06), transparent); }
.grid.two { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:start; }
.tick-list { list-style:none; padding:0; margin:14px 0 0; }
.tick-list li { margin: 10px 0; padding-left:28px; position:relative }
.tick-list li::before{ content:"✔"; position:absolute; left:0; color: var(--accent) }

.about-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.info-card { background: var(--card); border:1px solid rgba(124,247,212,.15); padding: 18px; border-radius:16px; min-height:120px }
.pop { animation: pop 1.2s ease both }
.pop.delay-1{ animation-delay:.15s } .pop.delay-2{ animation-delay:.3s }
@keyframes pop { from{ transform: translateY(16px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

/* Stats */
.stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat { text-align:center; background: var(--card-2); border:1px solid rgba(124,247,212,.15); border-radius:18px; padding: 24px }
.stat-number { font-size: clamp(2rem, 6vw, 3rem); font-weight:800; letter-spacing:1px; color: var(--accent); text-shadow: var(--glow) }
.stat-label { color: var(--muted); }
.bounce { animation: bounce 1.6s ease-in-out infinite }
.bounce.delay-1{ animation-delay:.2s } .bounce.delay-2{ animation-delay:.4s }
@keyframes bounce { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }

/* Slider */
.slider { position:relative; overflow:hidden; background: #0c1221; border:1px solid rgba(124,247,212,.15); border-radius:18px; }
.slides { display:flex; transition: transform .6s ease; }
.slide { min-width:100%; padding: 28px 22px; }
.slide blockquote { font-size: clamp(1rem, 2.4vw, 1.2rem); margin:0 0 10px }
.slider-dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:8px }
.slider-dots button { width:10px; height:10px; border-radius:50%; border:0; background: rgba(124,247,212,.25); cursor:pointer }
.slider-dots button.active { background: var(--accent) }

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top:14px }
.gallery img { width:100%; height:200px; object-fit:cover; border-radius:14px; border:1px solid rgba(124,247,212,.15) }
.zoom-in { transition: transform .25s ease }
.zoom-in:hover { transform: scale(1.03) }

/* Footer */
.footer { border-top: 1px solid rgba(124,247,212,.08); background: rgba(4,8,16,.6) }
.footer-bottom { border-top: 1px solid rgba(124,247,212,.08); margin-top: 18px; padding: 12px 0; text-align:center; color: var(--muted) }

/* Responsive */
@media (max-width: 900px){
  .hero-inner { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .floating-cta { right: 8px; }
}