body.landing { background: #17102a; color: #fff6e3; }
.landing h1, .landing h2 { font-family: "Trebuchet MS", system-ui, sans-serif; }
.landing main { max-width: 1060px; margin: 0 auto; padding: 0 20px 40px; }
.landing section { margin: 54px 0; }
.landing h2 { color: #ffd166; font-size: clamp(1.3rem, 4vw, 2rem); margin: 0 0 14px; letter-spacing: .04em; }
.landing p { line-height: 1.65; color: #e8ddc8; }
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  overflow: hidden; background: linear-gradient(#2b1e3d, #7d5ba6 60%, #ff7f50);
}
#hero-preview { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy { position: relative; z-index: 2; padding: 24px; max-width: 640px; }
.hero-copy::before {
  content: ""; position: absolute; inset: -20px -30px; z-index: -1; border-radius: 24px;
  background: linear-gradient(100deg, rgba(23,16,42,.88), rgba(23,16,42,.45) 65%, transparent);
}
.kicker { letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; color: #ffe9a0; }
.hero h1 {
  font-size: clamp(2.6rem, 9vw, 5.4rem); margin: 4px 0 8px; line-height: 1.02;
  color: #fff6e3; text-shadow: 0 4px 0 #b0264c, 0 18px 44px rgba(0,0,0,.55);
}
.tagline { font-size: clamp(1rem, 2.6vw, 1.4rem); color: #fff; margin-bottom: 22px; }
.tiny { font-size: .8rem; color: #ffe9a0; margin-top: 14px; }
#play-now, #play-now-2 { pointer-events: auto; }
.band {
  background: rgba(43,30,61,.65); border: 1px solid rgba(255,209,102,.4);
  border-radius: 18px; padding: 26px 28px;
}
.band h2 { margin-bottom: 8px; }
.orb { color: #ffd166; font-weight: 800; }
#gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
#gallery img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 2px solid rgba(255,209,102,.55); box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
#features { list-style: none; padding: 0; margin: 0; }
#features li {
  padding: 10px 14px; margin-bottom: 10px; border-radius: 12px;
  background: rgba(6,214,160,.12); border-left: 4px solid #06d6a0; line-height: 1.5;
}
#controls {
  background: rgba(43,30,61,.65); border-radius: 14px; padding: 18px 20px;
  border: 1px solid rgba(255,209,102,.35);
}
#controls b { color: #ffd166; }
.cta { text-align: center; padding: 30px 0 10px; }
footer { text-align: center; padding: 26px; color: #b9a8d6; border-top: 1px solid #3a2c55; }
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .hero { min-height: 84vh; }
  .hero-copy { padding: 20px 16px; }
}