.hosts-hero{background:linear-gradient(135deg,var(--color-dark-blue) 0,var(--color7) 25%,var(--color3) 50%,var(--color4) 75%,var(--color6) 100%);padding:120px 20px 80px;text-align:center;position:relative;overflow:hidden}.hosts-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.3;z-index:1}.hosts-hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}.hosts-hero h1{font-size:3.5rem;margin-bottom:1rem;background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;background-clip:text}.hosts-hero-subtitle{font-size:1.5rem;color:var(--color8);margin-bottom:1.5rem;font-weight:300;font-style:italic}.hosts-hero-description{font-size:1.1rem;color:var(--color8);line-height:1.6;max-width:600px;margin:0 auto;opacity:.9}.hosts-main-content{background-color:var(--color8);padding:60px 0;min-height:60vh}.hosts-container{max-width:1400px;margin:0 auto;padding:0 20px}@media (max-width:768px){.hosts-hero{padding:80px 15px 60px}.hosts-hero h1{font-size:2.5rem}.hosts-hero-subtitle{font-size:1.2rem}.hosts-hero-description{font-size:1rem}.hosts-main-content{padding:40px 0}}