/* Reset & base */
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; color:#fff; background:#07060b; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:inherit; text-decoration:none; }
.logo{ font-weight:700; font-size:1.25rem; }

/* Navbar */
.navbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.6)); position:sticky; top:0; z-index:1000; }
.menu { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.menu li a { color:#fff; padding:6px 8px; display:inline-block; border-radius:6px; }
.menu li a.active, .menu li a:hover { background: rgba(255,152,0,0.12); color:#ffb18b; }
.menu-toggle { display:none; background:transparent; border:none; color:#fff; font-size:22px; cursor:pointer; }

/* Hero */
.hero { position:relative; height:70vh; min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:20px; }
.stars{ position:absolute; inset:0; background:url('https://i.ibb.co/ZYW3VTp/stars.png') repeat; animation:moveStars 120s linear infinite; opacity:0.6; }
@keyframes moveStars{ from{transform:translate(0,0)} to{transform:translate(-400px,-400px)} }
.plane{ position:absolute; width:72px; height:72px; background:url('https://cdn-icons-png.flaticon.com/512/3075/3075977.png') no-repeat center/contain; top:40%; left:-120px; animation:fly 10s linear infinite; opacity:0.95; }
@keyframes fly{ 0%{transform:translateX(0) translateY(-60px) } 50%{transform:translateX(100vw) translateY(60px)} 100%{transform:translateX(200vw) translateY(-60px)} }
.hero-text{ position:relative; z-index:2; max-width:920px; padding: 24px; }
.hero-text h1{ font-size:2.6rem; margin:0 0 12px; color:#fff; text-shadow:0 6px 20px rgba(0,0,0,0.6); }
.hero-text p{ font-size:1.05rem; color:#e6e6e6; margin:0 0 18px; }

.btn{ display:inline-block; padding:12px 20px; border-radius:8px; background:linear-gradient(45deg,#ff9800,#ff5722); color:#fff; font-weight:600; }
.cta{ margin-top:14px; }

/* Download */
.download{ padding:48px 18px; text-align:center; background:#0b0b10; }
.download h2{ margin:0 0 18px; font-size:1.6rem; }
.store-buttons{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.store-buttons img{ height:44px; max-width:160px; object-fit:contain; transition:transform .2s ease; }
.store-buttons .apk-badge{ height:50px; }
.store-buttons a:hover img{ transform:scale(1.05); }

/* Forms */
.form-section{ max-width:480px; margin:60px auto; padding:22px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:12px; }
.form-section h2{ margin:0 0 12px; font-size:1.4rem; }
.form-section label{ display:block; margin:8px 0 6px; font-size:0.95rem; color:#e8e8e8; }
.form-section input{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); color:#fff; outline:none; }
.form-section .btn{ width:100%; text-align:center; display:inline-block; margin-top:14px; }

.small{ font-size:0.9rem; color:#cfcfcf; margin-top:10px; text-align:right; }

/* Recharge layout */
.recharge-container{ display:flex; gap:28px; justify-content:center; align-items:flex-start; padding:40px 18px; flex-wrap:wrap; max-width:1200px; margin:0 auto; }
.denominations{ flex:2; min-width:240px; }
.denominations h2{ margin:0 0 14px; font-size:1.2rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:16px; border-radius:10px; text-align:center; cursor:pointer; position:relative; transition:transform .16s ease, box-shadow .16s ease; border:1px solid rgba(255,255,255,0.03); }
.card .tag{ position:absolute; top:10px; right:10px; background:#ff4b4b; color:#fff; font-size:0.75rem; padding:4px 8px; border-radius:8px; }
.card h3{ margin:12px 0 6px; font-size:1rem; }
.price{ font-weight:700; color:#ffb07a; }
.old{ display:block; font-weight:500; color:#a9a9a9; font-size:0.88rem; margin-top:6px; text-decoration:line-through; }
.card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.5); }
.card.selected{ outline:2px solid rgba(255,152,0,0.9); box-shadow:0 18px 40px rgba(0,0,0,0.6); transform:translateY(-8px); }

.checkout-box{ flex:1; min-width:260px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); }
.checkout-box h2{ margin:0 0 10px; }
.checkout-box label{ display:block; margin:8px 0 6px; color:#e6e6e6; }
.checkout-box input{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.05); background:rgba(255,255,255,0.02); color:#fff; }
.summary{ margin-top:12px; font-size:1rem; }
.buy-btn{ display:block; width:100%; margin-top:12px; padding:12px 14px; border-radius:10px; background:linear-gradient(45deg,#ff9800,#ff5722); color:#fff; font-weight:700; border:none; cursor:pointer; }

/* Footer */
.site-footer{ padding:20px; text-align:center; color:#9b9b9b; background:#06060a; }

/* Responsive */
@media (max-width:900px){
  .hero-text h1{ font-size:2rem; }
  .recharge-container{ padding:24px 16px; }
}
@media (max-width:700px){
  .menu{ display:none; }
  .menu.active{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
  .menu-toggle{ display:block; }
  .hero{ height:56vh; min-height:360px; }
  .hero-text h1{ font-size:1.6rem; }
  .store-buttons img{ height:44px; max-width:140px; }
  .grid{ grid-template-columns:1fr; }
  .checkout-box{ width:100%; }
  .form-section{ margin:30px 16px; padding:16px; }
}