.hero {background: linear-gradient(135deg, #F0F5FA 0%, #E4ECF5 100%); padding: 60px 0; position:relative}
.hero-grid {display: flex;align-items: center;gap: 60px;}
.hero h1 {font-size: 46px;font-weight: 800;line-height: 1.2;color: var(--primary);margin-bottom: 20px;}
.hero p {font-size: 18px;color: var(--text-gray);margin:20px 0}
.hero-img {width: 400px;height: 400px;min-width: 400px;border-radius: 50%;border: 6px solid var(--accent);box-shadow: 0 25px 40px -15px rgba(0,0,0,0.2); overflow:hidden}
.hero-img img, .hero-img picture{object-fit: cover; width:100%; height:100%}
@media(max-width:1339px){
	.hero{padding: 50px 0}
	.hero-grid {gap: 50px}
	.hero h1 {font-size: 40px}
	.hero p {font-size: 16px}
	.hero-img {width: 380px;height: 380px;min-width: 380px}
}
@media(max-width:991px){
	.hero{padding: 40px 0}
	.hero-grid {gap: 40px}
	.hero h1 {font-size: 32px; margin-bottom: 15px}
	.hero p {font-size: 14px; margin: 15px 0}
	.hero-img {width: 320px;height: 320px;min-width: 320px}
}
@media(max-width:767px){
	.hero{padding: 30px 0}
	.hero-grid {gap: 20px;}
	.hero h1{font-size: 24px;margin-bottom: 10px;}
	.hero p{margin: 10px 0;}
	.hero-img {width: 230px;height: 230px;min-width: 230px;border-width: 3px;}
}
@media(max-width:575px){
	.hero{padding-bottom:40px}
	.hero-content{position:relative;z-index:2;text-align: center;}
	.hero-img{width: 100%;height: 100%;min-width: 100%;border: none;border-radius: 0;position: absolute;left: 0;right: 0;top: 0;bottom: 0; z-index:1; box-shadow:none;}
	.hero-img::after{position:absolute;content:"";top:0;left:0;right:0;bottom:0;background: rgba(240,245,250,0.9);backdrop-filter: blur(3px);}
	.hero h1{font-size: 24px;margin-bottom: 15px;}
	.hero p{margin: 15px 0;}
}