/* STREETWISE PH - Hero Banner */
.hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0d0b08 0%, #1a1510 50%, #0d0b08 100%); }
.hero-slide-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(201,169,110,0.06) 0%, transparent 60%); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,0.9) 40%, rgba(10,10,10,0.2) 100%); z-index: 2; }
.hero-content { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; }
.hero-text { max-width: 600px; }
.hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; opacity: 0; animation: heroFadeUp 0.8s ease 0.3s forwards; }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; font-style: italic; line-height: 1; color: var(--text-primary); margin-bottom: 24px; opacity: 0; animation: heroFadeUp 0.8s ease 0.5s forwards; }
.hero-subtitle { font-size: 1rem; color: var(--text-secondary); max-width: 400px; line-height: 1.7; margin-bottom: 40px; opacity: 0; animation: heroFadeUp 0.8s ease 0.7s forwards; }
.hero-cta { opacity: 0; animation: heroFadeUp 0.8s ease 0.9s forwards; display: flex; gap: 16px; align-items: center; }
.hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; }
.hero-scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollPulse 2s ease infinite; }
.hero-indicators { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 12px; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--text-muted); transition: var(--transition); cursor: pointer; }
.hero-dot.active { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
@keyframes heroFadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }