body { background: linear-gradient(180deg, #141a3c 0%, #232b5e 55%, #1b2149 100%); }
.nav {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem;
  max-width: 68rem; margin: 0 auto;
}
.logo { font-weight: 800; letter-spacing: 0.3em; color: var(--amber); margin-right: auto; }
.btn-small { padding: 0.45rem 1.2rem; font-size: 0.9rem; }
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
  max-width: 68rem; margin: 0 auto; padding: 2.2rem 1.4rem 3rem;
}
.kicker {
  color: var(--mint); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.8rem; margin: 0 0 0.6rem;
}
.hero h1 {
  margin: 0 0 0.6rem; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02;
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, #ffe28a 10%, #ff5f9e 55%, #9fe8d8 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { color: var(--ink-dim); font-size: 1.1rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 32rem; }
#hero-preview {
  width: 100%; aspect-ratio: 4 / 3; display: block;
  border-radius: 1.2rem; border: 1px solid rgba(159,232,216,0.25);
  background: #10163a; box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.band { max-width: 68rem; margin: 0 auto; padding: 2.4rem 1.4rem; }
.band h2 { font-size: 1.6rem; letter-spacing: 0.08em; margin: 0 0 1.4rem; color: var(--amber); }
#features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
#features li {
  background: var(--card); border: 1px solid rgba(159,232,216,0.18); border-left: 3px solid var(--teal);
  border-radius: 0.8rem; padding: 0.9rem 1.1rem; color: var(--ink-dim); line-height: 1.55; font-size: 0.95rem;
}
#features b { color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; display: block; border-radius: 0.8rem;
  border: 1px solid rgba(159,232,216,0.22); box-shadow: 0 12px 34px rgba(0,0,0,0.4);
}
.gallery figcaption { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.45rem; }
#controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1.6rem; }
.ctl { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--card); border-radius: 0.8rem; padding: 0.9rem 1rem; border: 1px solid rgba(159,232,216,0.18); }
.ctl p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.5; }
.ctl b { color: var(--mint); }
.keys {
  flex: 0 0 auto; background: #10163a; color: var(--amber); border: 1px solid rgba(255,196,107,0.4);
  border-radius: 0.5rem; padding: 0.25rem 0.6rem; font-size: 0.8rem; white-space: nowrap;
}
.foot {
  max-width: 68rem; margin: 2rem auto 0; padding: 1.4rem; display: flex; gap: 1rem;
  justify-content: space-between; color: var(--ink-dim); font-size: 0.85rem;
  border-top: 1px solid rgba(159,232,216,0.15);
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 0.8rem; }
  #features, #controls { grid-template-columns: 1fr; }
  .foot { flex-direction: column; }
}