/* Motion Hero - Phase 1 (static) + Phase 2 (GSAP hooks). DST light branding. */
.motion-hero { position: relative; overflow: hidden; background-color: #ffffff; background-image: radial-gradient(640px 420px at 82% 18%, rgba(20, 184, 166, 0.18), transparent 60%), radial-gradient(560px 380px at 8% 92%, rgba(249, 115, 22, 0.12), transparent 60%); }
.motion-hero__container { position: relative; z-index: 2; display: flex; align-items: center; gap: 2.5rem; max-width: 1200px; margin: 0 auto; padding: 4.5rem 1rem; }
.motion-hero__content { flex: 1 1 55%; max-width: 640px; min-width: 0; position: relative; z-index: 2; }
.motion-hero__title { color: #074e4d; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.15; font-weight: 700; margin: 0 0 1rem; }
.motion-hero__title h1, .motion-hero__title .section-title { color: #074e4d; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.15; font-weight: 700; margin: 0; }
.motion-hero__subtitle { color: #475569; font-size: 1.125rem; line-height: 1.7; margin: 0 0 1.75rem; }
.motion-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.motion-hero__actions .button { border-radius: 999px; margin: 0; }
.motion-hero__actions .button.primary { background-color: #f97316; border-color: #f97316; color: #ffffff; }
.motion-hero__actions .button.secondary { background-color: transparent; border: 2px solid #0f766e; color: #0f766e; }
.motion-hero__scene { flex: 1 1 45%; min-width: 0; position: relative; z-index: 1; }
#motion-hero-scene { position: relative; z-index: 1; width: 100%; min-height: 420px; pointer-events: none; }
@media (max-width: 849px) {
.motion-hero__container { flex-direction: column; padding: 3rem 1rem 2.5rem; gap: 1.5rem; }
.motion-hero__content { max-width: 100%; }
.motion-hero__title { font-size: 2rem; }
.motion-hero__title h1, .motion-hero__title .section-title { font-size: 2rem; }
#motion-hero-scene { min-height: 220px; }
.motion-hero__actions .button { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.motion-hero *, .motion-hero *::before, .motion-hero *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}