:root {
  --orange:#FF7A00;
  --bg:#05080F;
  --card:#0B1220;
}

body {
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:#fff;
  padding-top:80px;
}

/* NAV */

/* NAV */
.nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 40px;
  background:rgba(5,8,15,0.85);
  backdrop-filter:blur(12px);
  z-index:1000;
  border-bottom:1px solid rgba(255,122,0,0.1);
}

/* LOGO */
.logo {
  font-family:'Orbitron';
  font-size:1.6rem;
  font-weight:bold;
}

.logo span {
  color:#FF7A00;
  text-shadow:0 0 10px #FF7A00;
}

/* LINKS WRAPPER */



/* CTA BUTTON (THIS IS THE GAME CHANGER) */

.logo {
  font-family:'Orbitron';
  font-size:1.5rem;
  font-weight:bold;
}

.logo span {
  color:#FF7A00;
}

.nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(5,8,15,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,122,0,0.1);
  z-index:1000;
}

/* THIS IS WHAT CENTERS EVERYTHING */
.nav-inner {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
}

/* LOGO */
.logo {
  font-family:'Orbitron';
  font-size:1.6rem;
}

.logo span {
  color:#FF7A00;
}

/* LINKS */
.nav-links {
  display:flex;
  align-items:center;
  gap:20px;
}

/* NORMAL LINK */
.nav-link {
  color:#aaa;
  text-decoration:none;
}

.nav-link:hover {
  color:#fff;
}

/* CTA BUTTON */
.nav-btn {
  padding:10px 18px;
  border-radius:8px;
  background:linear-gradient(90deg,#FF7A00,#FF3C00);
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  box-shadow:0 0 15px rgba(255,122,0,0.6);
}

.nav-btn:hover {
  box-shadow:0 0 25px rgba(255,122,0,0.9);
}

.logo {
  font-family:'Orbitron';
}
.logo span {
  color:var(--orange);
}

/* HERO */
.hero {
  text-align:center;
  padding:100px 20px;
}

.hero h1 {
  font-family:'Orbitron';
  font-size:3rem;
}

.hero span {
  color:var(--orange);
  text-shadow:0 0 15px var(--orange);
}
.footer {
  text-align:center;
  padding:30px 20px;
  background:#05080F;
  border-top:1px solid rgba(255,122,0,0.1);
}

.footer a {
  color:#fff;
  text-decoration:none;
}

.footer a:hover {
  color:#FF7A00;
}
/* BUTTON */
.btn {
  padding:15px 30px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  margin:10px;
}

.primary {
  background:var(--orange);
  color:#000;
  box-shadow:0 0 15px var(--orange);
}

/* SECTION */
.section {
  padding:80px 20px;
  text-align:center;
}

/* CARDS */
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.card {
  background:rgba(11,18,32,0.6);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,122,0,0.2);
  border-radius:16px;
  padding:30px;
  transition:0.4s;
}

.card:hover {
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 0 40px rgba(255,122,0,0.4);
}

#particles {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  background:#05080F;
}

.popup {
  position:fixed;
  bottom:20px;
  left:20px;
  background:rgba(11,18,32,0.95);
  color:#fff;
  padding:15px 20px;
  border-radius:10px;
  font-size:0.9rem;
  box-shadow:0 0 20px rgba(255,122,0,0.3);
  opacity:0;
  transform:translateY(20px);
  transition:0.4s;
  z-index:999;
}

.popup.show {
  opacity:1;
  transform:translateY(0);
}

.modal {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:1000;
}

.modal-content {
  background:#0B1220;
  padding:30px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 0 30px rgba(255,122,0,0.3);
}

.modal input {
  padding:12px;
  width:250px;
  border-radius:6px;
  border:none;
}

/* FOOTER */
.footer {
  text-align:center;
  padding:40px;
  font-size:0.9rem;
  color:#888;
  border-top:1px solid rgba(255,122,0,0.2);
}
input {
  width:100%;
  padding:12px;
  margin:10px 0;
  border-radius:6px;
  border:none;
  background:#111827;
  color:#fff;
}

.nav-links {
  display:flex;
  align-items:center;
  gap:20px;
  padding-left:20px;
}

.nav-link {
  color:#aaa;
  text-decoration:none;
}

.nav-link:hover {
  color:#fff;
}

.nav-btn {
  padding:10px 18px;
  border-radius:8px;
  background:linear-gradient(90deg,#FF7A00,#FF3C00);
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}