/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  padding: 140px 0 80px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.hero h1 {
  font-size: 48px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px;
}
.highlight { color: var(--brand); }
.hero-sub {
  font-size: 18px; color: var(--text-2); margin-top: 16px; max-width: 480px; line-height: 1.6;
}
.hero-actions { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.hero-note { font-size: 13px; color: var(--text-3); }
.hero-badges {
  display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap;
}
.hero-badges .badge {
  background: var(--brand-light); color: var(--brand-text);
  padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
}

/* ─── APP MOCKUP ─────────────────────────────────────────────────────────── */
.app-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
}
.mockup-bar {
  background: var(--surface-2); padding: 10px 14px;
  display: flex; gap: 6px; border-bottom: 1px solid var(--border);
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,0.12);
}
.mockup-body { display: grid; grid-template-columns: 56px 1fr; min-height: 280px; }
.mockup-sidebar {
  background: var(--surface-2); padding: 12px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.m-brand { width: 28px; height: 28px; border-radius: 6px; background: var(--brand); margin: 0 auto 8px; }
.m-nav { display: flex; flex-direction: column; gap: 4px; }
.m-nav span {
  height: 8px; border-radius: 3px; background: rgba(0,0,0,0.06);
}
.m-nav span.active { background: var(--brand-light); }
.mockup-content { padding: 16px; }
.m-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.m-cards span { height: 48px; border-radius: 6px; background: var(--surface-2); }
.m-grid {
  height: 140px; border-radius: 6px; background: var(--surface-2);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 23px, var(--border) 23px, var(--border) 24px
  );
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin: 16px auto 0; }
  .hero-actions { justify-content: center; }
  .hero-badges { justify-content: center; }
  .hero-visual { display: none; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 32px; }
}