/* --- Global & Typography --- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Exo 2', sans-serif; background:#01010f; color:#eee; line-height:1.6; }
a { text-decoration:none; color:inherit; }
.container { width:90%; max-width:1200px; margin:0 auto; }

/* --- Navbar & Header --- */
.header { position:fixed; width:100%; top:0; background:rgba(0,0,0,0.6); z-index:100; }
.nav-container { display:flex; justify-content:space-between; align-items:center; padding:1rem; }
.logo-text { font-family:'Orbitron', sans-serif; font-size:1.8rem; font-weight:900; color:#ffcc00; }
.logo-accent { font-family:'Orbitron', sans-serif; font-size:1.8rem; font-weight:400; color:#fff; margin-left:5px; }
.nav-menu { list-style:none; display:flex; }
.nav-link { margin-left:2rem; font-weight:600; transition: color .3s; }
.nav-link:hover { color:#ffcc00; }

/* --- Hero Section --- */
.hero { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-background { position:absolute; width:100%; height:100%; top:0; left:0; background:#050525; z-index:1; }
.floating-shapes .shape { position:absolute; width:80px; height:80px; background:rgba(255,204,0,0.2); animation: float 6s ease-in-out infinite; border-radius:50%; }
.shape-1 { top:10%; left:20%; animation-delay:0s; }
.shape-2 { top:30%; left:75%; width:120px; height:120px; background:rgba(255,0,100,0.2); animation-delay:2s; }
.shape-3 { top:70%; left:40%; width:100px; height:100px; background:rgba(0,255,200,0.2); animation-delay:4s; }
.shape-4 { top:80%; left:80%; width:60px; height:60px; background:rgba(100,100,255,0.2); animation-delay:1s; }

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.hero-content { position:relative; z-index:10; max-width:600px; padding:2rem; }
.app-logo { width:150px; margin-bottom:1rem; animation: pop 1s ease-out; }
@keyframes pop { 0% { transform: scale(0.5); opacity:0; } 100% { transform: scale(1); opacity:1; } }

.hero-title .title-main { display:block; font-size:3rem; font-family:'Orbitron', sans-serif; color:#ffcc00; }
.hero-title .title-sub { display:block; font-size:1.5rem; color:#fff; margin-top:0.5rem; }
.hero-description { margin:1rem 0; font-size:1.1rem; }
.btn-primary, .btn-secondary {
  display:inline-flex; align-items:center;
  padding:0.8rem 1.5rem; border-radius:50px; font-size:1rem; font-weight:600; transition:background .3s, transform .3s;
}
.btn-primary { background:#ffcc00; color:#01010f; margin-right:1rem;}
.btn-primary:hover { background:#e6b800; transform:scale(1.05); }
.btn-secondary { border:2px solid #ffcc00; color:#ffcc00; }
.btn-secondary:hover { background:#ffcc00; color:#01010f; transform:scale(1.05); }

.hero-visual { position:absolute; bottom:0; right:10%; width:300px; height:400px; background:url('weapon-sil.png') center/contain no-repeat; opacity:0.2; animation: drift 8s linear infinite alternate; z-index:0; }
@keyframes drift { from { transform: translateY(0px); } to { transform: translateY(-20px); } }

/* --- Features Section --- */
.features { padding:6rem 0; background:#0b0b2e; }
.section-title { font-size:2.5rem; text-align:center; margin-bottom:3rem; }
.title-accent { color:#ffcc00; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:2rem; }
.feature-card { background:#16163f; padding:2rem; border-radius:12px; text-align:center; transition:transform .3s, background .3s; }
.feature-card:hover { transform:translateY(-10px); background:#1f1f58; }
.feature-icon { font-size:2.5rem; margin-bottom:1rem; }

/* --- Screenshots Gallery --- */
.screenshots { padding:6rem 0; }
.screenshots-gallery { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
.screenshot-item { background:#1a1a3e; width:250px; height:450px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:1rem; transition:transform .3s; }
.screenshot-item:hover { transform:scale(1.05); }
.screenshot-icon { font-size:3rem; margin-bottom:1rem; color:#ffcc00; }

/* --- Download Section --- */
.download { padding:6rem 0; background:#0d0d45; color:#fff; }
.download-title { font-size:2.5rem; margin-bottom:1rem; text-align:center; }
.download-description { text-align:center; margin-bottom:2rem; font-size:1.1rem; }
.download-btn { display:inline-block; background:#ffcc00; color:#01010f; padding:1rem 2rem; border-radius:50px; font-weight:700; transition:transform .3s; }
.download-btn:hover { transform:scale(1.05); }
.download-stats { display:flex; justify-content:center; gap:3rem; margin-top:2rem; }
.stat { text-align:center; }
.stat-number { font-size:2rem; font-weight:700; color:#ffcc00; }
.stat-label { display:block; font-size:0.9rem; color:#ccc; }

/* --- Footer --- */
.footer { background:#01010f; padding:3rem 0 1rem; }
.footer-content { display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; color:#ccc; }
.footer-section h4 { color:#ffcc00; margin-bottom:1rem; }
.footer-section ul { list-style:none; }
.footer-section li { margin-bottom:0.5rem; }
.footer-bottom { text-align:center; margin-top:2rem; color:#555; font-size:0.9rem; }

/* --- Responsive --- */
@media (max-width:768px) {
  .hero-title .title-main { font-size:2.5rem; }
  .hero-title .title-sub { font-size:1.3rem; }
  .features-grid { grid-template-columns:1fr; }
  .screenshots-gallery { flex-direction:column; align-items:center; }
}