/* ===== Variables base ===== */
:root {
  --c-bg:            #0e0e10;
  --c-bg-light:      #1a1a1e;
  --c-text:          #eaeaea;
  --c-accent:        #4e8dff;
  --c-card:          #161618;
  --c-card-border:   #2c2c2f;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  background:   var(--c-bg);
  color:        var(--c-text);
  line-height:  1.55;
}

/* ===== HERO ===== */
.hero {
  background: radial-gradient(circle at 50% 30%, #19325d 0%, #0e0e10 90%);
  padding: 5rem 1rem 4rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-content {
  max-width: 640px;
  margin: 0 auto;
  animation: fadeIn 1s ease-out;
}

.logo {
  height: 128px;
  width: 128px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 6px rgba(78, 141, 255, 0.5));
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.tagline {
  font-size: 1.2rem;
  color: #ccc;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.cta {
  background: var(--c-accent);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(78, 141, 255, 0.4);
}

.cta:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(78, 141, 255, 0.6);
}

/* ===== FEATURES ===== */
.features {
  display:        grid;
  gap:            1.5rem;
  margin:         auto;
  max-width:      1024px;
  padding:        3rem 1.25rem;
}

.features article {
  background:     var(--c-card);
  border:         1px solid var(--c-card-border);
  border-radius:  12px;
  padding:        1.5rem;
}

.features h2 {
  color:        var(--c-accent);
  font-size:    1.25rem;
  margin-bottom: .4rem;
}

@media (min-width: 720px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

/* ===== DOWNLOAD CTA ===== */
.download {
  background:  var(--c-bg-light);
  padding:     3rem 1rem;
  text-align:  center;
}

.download h2 {
  font-size:     1.75rem;
  margin-bottom: 1rem;
}

.play-btn {
  background:       var(--c-accent);
  border-radius:    10px;
  color:            #fff;
  display:          inline-block;
  font-weight:      600;
  padding:          .9rem 2.25rem;
  text-decoration:  none;
  transition:       transform .15s ease;
}

.play-btn:hover { transform: scale(1.04); }

/* ===== FOOTER ===== */
footer {
  background:  var(--c-bg-light);
  font-size:   .85rem;
  padding:     1.5rem .5rem;
  text-align:  center;
}

footer a {
  color:           var(--c-accent);
  text-decoration: none;
}

/* Animación de entrada */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}