/* ===== BODY ===== */
body {
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#0e0f13;
  color:white;
  overflow-x:hidden;
}

/* ===== HEADER ===== */
header {
  display:flex;
  justify-content:center;
  padding:18px 40px;
  background:rgba(10,10,15,0.7);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:1000;
}

header nav a {
  margin:0 15px;
  color:white;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
}

header nav a:hover {
  color:#3aa8ff;
}

/* ===== HERO ===== */
.hero {
  position:relative;
  min-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:100px 20px 80px 20px;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
    url("gecko_concept_art.png") center/cover no-repeat;
}

.hero-overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:radial-gradient(circle,#2cff8f33,transparent 70%);
  animation:floatGlow 9s infinite alternate;
  pointer-events:none;
}

@keyframes floatGlow {
  from {transform:translateY(-20px);}
  to {transform:translateY(20px);}
}

/* ===== HERO CONTENT ===== */
.hero-floating {
  text-align:center;
  max-width:600px;
  z-index:10;
}

.hero-floating h2 {
  font-size:52px;
  margin:0;
  letter-spacing:1px;
}

.hero-floating p {
  opacity:0.9;
  margin-top:12px;
  font-size:17px;
}

/* ===== RELEASE BADGE ===== */
.release-badge {
  display:inline-block;
  background:#3aa8ff;
  color:white;
  font-weight:600;
  padding:10px 20px;
  border-radius:12px;
  margin-top:20px;
  box-shadow:0 8px 25px rgba(58,168,255,0.4);
  font-size:16px;
  text-transform:uppercase;
}

/* ===== HERO IMAGES ===== */
.hero-images {
  margin-top:50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}

.hero-images img {
  max-width:300px;
  border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
  transition:transform 0.3s, box-shadow 0.3s;
}

.hero-images img:hover {
  transform:scale(1.05);
  box-shadow:0 15px 45px rgba(0,0,0,0.6);
}

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

.section h2 {
  font-size:32px;
  margin-bottom:15px;
}

/* ===== FEATURES GRID ===== */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  margin-top:40px;
}

.feature-card {
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);
  padding:30px;
  border-radius:14px;
  transition:0.3s;
}

.feature-card:hover {
  transform:translateY(-6px);
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* ===== DOWNLOAD BUTTONS ===== */
.download-buttons {
  margin-top:30px;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  justify-content:center;
}

.download-buttons a {
  background:#3aa8ff;
  padding:14px 26px;
  border-radius:8px;
  text-decoration:none;
  color:white;
  font-weight:600;
  transition:0.3s;
}

.download-buttons a:hover {
  background:#2b82c7;
  transform:translateY(-2px);
}

/* ===== FOOTER ===== */
footer {
  padding:30px;
  background:#090a0d;
  text-align:center;
  opacity:0.6;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .hero-floating h2 { font-size:36px; }
  header { flex-direction:column; }
}

.patreon-button,
.patreon-link {
  background:#ff424d;
  color:white;
  padding:14px 26px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.patreon-button:hover,
.patreon-link:hover {
  background:#e03a43;
  transform:translateY(-2px);
}