* { margin:0; padding:0; box-sizing:border-box; }

/* ========================
   BODY & FONTS
======================== */
body {
  font-family:'Inter', sans-serif;
  background:#121212;
  color:#fff;
  overflow-x:hidden;
}
h1,h2,h3 { font-family:'Orbitron', sans-serif; }
a { color:#00ff9c; text-decoration:none; transition: color 0.2s; }
a:hover { color:#9cffb1; }

/* ========================
   CANVAS BACKGROUND
======================== */
canvas { 
  position: fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  z-index:-1; 
}

/* ========================
   HERO SECTION
======================== */
.hero {
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 20px;
}
.hero h1 {
  font-size:4rem;
  color:#00ff9c;
  text-shadow: 0 0 15px #00ff9c, 0 0 30px #00ff9c;
  margin-bottom:10px;
}
.hero h2 {
  font-size:1.8rem;
  color:#9cffb1;
  margin-bottom:20px;
}
.hero p {
  font-size:1rem;
  color:#cccccc;
  margin-bottom:30px;
}
.cta-btn {
  padding:15px 40px;
  font-size:1.2rem;
  font-weight:bold;
  color:#000;
  background:#00ff9c;
  border:none;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 0 15px #00ff9c;
  transition: all 0.3s ease;
}
.cta-btn:hover {
  box-shadow: 0 0 30px #00ff9c, 0 0 60px #00ff9c;
  transform:scale(1.05);
}

.cta-form {
  margin-top: 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}

.cta-form input {
  padding:12px 20px;
  font-size:1rem;
  border:2px solid #00ff9c;
  border-radius:8px;
  background:#000;
  color:#00ff9c;
  width:280px;
  text-align:center;
  outline:none;
  transition: box-shadow 0.3s ease;
}
.cta-form input:focus {
  box-shadow: 0 0 15px #00ff9c;
}

.form-message {
  font-size:0.9rem;
  margin-top:10px;
  min-height:20px;
  text-shadow: 0 0 8px rgba(0,255,156,0.6);
}


/* ========================
   FEATURES SECTION
======================== */
section {
  padding:80px 20px;
  max-width:1200px;
  margin:0 auto;
}
.features {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:40px;
}
.feature {
  flex:1 1 280px;
  background: #0a0a0a; /* scuro e pieno */
  border:1px solid #00ff9c;
  border-radius:12px;
  padding:30px;
  text-align:center;
  transition: all 0.3s ease;
}
.feature:hover {
  background:#0a0a0a; /* manteniamo scuro */
  box-shadow:0 0 20px #00ff9c; /* glow neon */
}
.feature h3 { 
  color:#00ff9c; 
  font-size:1.5rem; 
  margin-bottom:15px; 
}
.feature p { 
  color:#9cffb1; 
}

/* ========================
   TOKEN SECTION
======================== */
.token {
  background:#001a00;
  text-align:center;
  border-top:2px solid #00ff9c;
  border-bottom:2px solid #00ff9c;
  padding:60px 20px;
}
.token h2 { 
  color:#00ff9c; 
  font-size:2rem; 
  margin-bottom:20px; 
}
.token p { 
  color:#9cffb1; 
  font-size:1rem; 
  max-width:800px; 
  margin:0 auto; 
}

/* ========================
   FOOTER
======================== */
footer {
  background:#000;
  padding:40px 20px;
  text-align:center;
  color:#00ff9c;
}
footer small { display:block; margin-bottom:10px; }
footer a { margin:0 10px; }

/* ========================
   RESPONSIVE
======================== */
@media(max-width:768px){
  .hero h1{ font-size:3rem; }
  .hero h2{ font-size:1.4rem; }
  .features{ flex-direction:column; gap:30px; }
}

/* Flex container for logo + text */
.logo-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px; /* spacing between logo and text */
  margin-bottom: 30px;
  flex-wrap: wrap; /* responsive: wraps on small screens */
}

/* Logo size */
.logo-header img {
  width: 100px; /* puoi regolare */
  height: auto;
}