.hosts-hero{background:linear-gradient(135deg,var(--color-dark-blue)0%,var(--color7)25%,var(--color3)50%,var(--color4)75%,var(--color6)100%);text-align:center;padding:120px 20px 80px;position:relative;overflow:hidden}.hosts-hero:before{content:"";opacity:.3;z-index:1;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>");position:absolute;inset:0}.hosts-hero-content{z-index:2;max-width:800px;margin:0 auto;position:relative}.hosts-hero h1{background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:3.5rem}.hosts-hero-subtitle{color:var(--color8);margin-bottom:1.5rem;font-size:1.5rem;font-style:italic;font-weight:300}.hosts-hero-description{color:var(--color8);opacity:.9;max-width:600px;margin:0 auto;font-size:1.1rem;line-height:1.6}.hosts-main-content{background-color:var(--color8);min-height:60vh;padding:60px 0}.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}}