.hero {
  min-height: 100vh;
  background: linear-gradient(var(--color-overlay), var(--color-overlay)), url('../images/hero-fallback.svg') center/cover no-repeat;
  color: var(--color-white);
  display: flex;
  align-items: center;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero-content { position: relative; z-index: 2; max-width: 760px; }
.hero h1 { color: var(--color-white); font-size: var(--text-4xl); line-height: 1.15; }
.hero .subtitle { color: var(--color-secondary); font-size: var(--text-lg); }
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.scroll-indicator { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--color-white); animation: bounce 1.6s infinite; }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }