/* ============ Homepage ============ */

/* Hero */
.hero {
  position: relative;
  padding-block: var(--space-16);
  background:
    linear-gradient(180deg, rgba(14,4,6,0.6), rgba(14,4,6,0.92)),
    radial-gradient(1200px 600px at 80% -10%, rgba(216,31,58,0.18), transparent 60%),
    var(--color-bg);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-bg, none);
  background-size: cover; background-position: center; opacity: 0.18;
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-12); align-items: center; }
.hero__logo { height: 64px; width: auto; margin-bottom: var(--space-4); }
.hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.hero h1 .hl { color: var(--color-primary); }
.hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-8); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__trust { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); flex-wrap: wrap; }
.hero__trust .stars { color: var(--color-gold); letter-spacing: 2px; }

/* Hero visual — framed, animated app showcase */
.hero__visual { display: block; margin-top: var(--space-10); }
.hero__showcase {
  position: relative; width: 100%; max-width: 460px; margin-inline: auto;
  padding: var(--space-2);
  animation: heroFloat 7s ease-in-out infinite;
}
.hero__glow {
  position: absolute; inset: -12% -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,51,85,0.45), rgba(216,31,58,0.12) 60%, transparent 75%);
  filter: blur(24px); animation: heroPulse 5s ease-in-out infinite;
}
.hero__mockup {
  position: relative; z-index: 1; width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(245,197,66,0.35);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), var(--shadow-glow);
}
.hero__badge {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(27,10,14,0.92); backdrop-filter: blur(6px);
  border: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}
.hero__badge--1 { top: 8%; right: -4%; color: var(--color-gold); animation: heroFloat 4.5s ease-in-out infinite; }
.hero__badge--2 { bottom: 10%; right: -4%; color: var(--color-primary-glow); animation: heroFloat 5.5s ease-in-out infinite reverse; }
.hero__dl { margin-top: var(--space-8); max-width: 460px; margin-inline: auto; }

@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes heroPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Hero game strip footer bar */
.tab-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--color-border);
  background: rgba(14,4,6,0.6);
  margin-top: var(--space-8); padding-top: var(--space-2);
}
.tab-footer h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); }

/* Alternating feature panels */
.panel-content { display: flex; flex-direction: column; gap: var(--space-16); }
.panel {
  display: grid; gap: var(--space-8); align-items: center;
  grid-template-columns: 1fr;
}
.panel__text .eyebrow { color: var(--color-gold); }
.panel__text h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.panel__text p { color: var(--color-text-muted); }
.panel__media {
  border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
  aspect-ratio: 16/10; display: grid; place-items: center; box-shadow: var(--shadow-card);
}
.panel__media img { width: 100%; height: 100%; object-fit: cover; }

/* CTA band */
.cta-band {
  text-align: center; background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
}
.cta-band h2 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.cta-band p { color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 52ch; margin-inline: auto; }
.cta-band .hero__cta { justify-content: center; }

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-24); min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; }
  .hero h1 { font-size: var(--text-5xl); }
  .hero__visual { display: block; margin-top: 0; }
  .hero__mockup { max-width: 100%; }
  .panel { grid-template-columns: 1fr 1fr; }
  .panel--reverse .panel__text { order: 2; }
  .panel--reverse .panel__media { order: 1; }
}