.hero{padding: 32px 0}
.hero__banner{background: radial-gradient(circle at 30% 50%, #4a00e0 0%, #8e2de2 100%); height: 420px;border-radius: 32px;display: flex;align-items: center;justify-content: space-between; color: white;position: relative;overflow: hidden;padding: 0 80px;box-shadow: 0 10px 30px rgba(142, 45, 226, 0.3)}
.hero__banner::before{content: '';position: absolute;width: 400px;height: 400px;background: rgba(255, 255, 255, 0.1);border-radius: 50%;top: -100px;right: -50px;filter: blur(50px)}
.hero__content{position: relative; z-index: 2; flex: 1; min-width: 0; padding-right: 20px}
.hero__image{max-width: 35%; margin-top:65px; height: auto;max-height: 100%;object-fit: contain;z-index: 1;flex-shrink: 0}
.hero__content h1{font-size: 80px;font-weight: 900;text-transform: uppercase;white-space: nowrap;margin-bottom: 0px;line-height: 1.5;font-style: italic;text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2)}
.hero__content h1 span{color: #ffecd2;display: block;font-size: 60px;line-height: 1.2}
.hero__content p{font-size: 24px;margin: 24px 0 0;font-weight: 600;background: rgba(0, 0, 0, 0.2);display: inline-block;padding: 8px 16px;border-radius: 8px}

@media(max-width:1260px){
	.hero__banner{padding: 0 clamp(30px, 6vw, 80px)}
	.hero__content h1{font-size: clamp(30px, 6.3vw, 80px)}
	.hero__content h1 span{font-size:clamp(20px, 5vw, 60px)}
	.hero__content p{font-size: clamp(16px, 2vw, 24px);}
}
@media(max-width:991px){
	.hero__banner{height:360px}
	.hero__image {max-width: 30%; margin-top: 5px;}
}
@media(max-width:767px){
	.hero__banner{height:300px}
}
@media(max-width:650px){
	.hero__content p{margin:10px 0}
	.hero__content p{width:100%; text-align:center}
}
@media(max-width:575px){
	.hero__banner{flex-direction:column; height:420px; padding:20px; text-align:center}
	.hero__content{padding-right: 0;width: 100%}
	.hero__image {display: block;max-width: 220px;width: 100%;height: auto;margin-top: 16px;order: 2;}
}