@layer components{.hero{position:relative;overflow:hidden;min-height:600px;padding:var(--space-16)0;color:var(--text-on-purple);background:linear-gradient(135deg,#5c1f71 0,#7b2b85 25%,#9b3fa0 50%,#b55fbf 75%,#d080d0 100%)}.hero::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="paw-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M20,10 Q15,5 10,10 Q15,15 20,10 M30,15 Q25,10 20,15 Q25,20 30,15 M10,25 Q5,20 0,25 Q5,30 10,25 M30,30 Q25,25 20,30 Q25,35 30,30" fill="rgba(255,255,255,0.1)" stroke="none"/></pattern></defs><rect width="100" height="100" fill="url(%23paw-pattern)"/></svg>');opacity:.3;animation:float 20s ease-in-out infinite}.hero--compact,.hero--contact{min-height:0;text-align:center;background:var(--gradient-purple)}.hero--compact{padding:var(--space-6)0 var(--space-6);margin-bottom:var(--space-6)}.hero--contact{z-index:0;padding:var(--space-16)0 var(--space-12)}.hero--contact::before{pointer-events:none}.hero .btn:focus-visible,.hero a:focus-visible,.hero button:focus-visible{outline:3px solid var(--text-on-purple);outline-offset:2px;box-shadow:0 0 0 6px var(--purple-500)}}