* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, sans-serif;
background: #ffffff;
color: #111827;
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: auto;
padding: 80px;
gap: 40px;
overflow: hidden;
}
.hero-content {
flex: 1;
max-width: 600px;
}

.badge {
display: inline-block;
background: #000;
/*background: #fff4e6;*/
color: #fff;
/*color: #ff8c00;*/
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
margin-bottom: 24px;
}
.hero h1 {
font-size: 5rem;
line-height: 1;
font-weight: 800;
margin-bottom: 24px;
}
.hero h1 span {
display: block;
color: #000;
/*color: #f59e0b;*/
}
.hero p {
font-size: 1.2rem;
line-height: 1.8;
/*color: #6b7280;*/
color: #000;
margin-bottom: 40px;
}
.hero-buttons {
display: flex;
gap: 16px;
}
.btn {
text-decoration: none;
padding: 16px 32px;
border-radius: 14px;
font-weight: 700;
transition: 0.3s;
}
.btn-primary {
/*background: #f59e0b;*/
background: #000;
color: white;
}
.btn-primary:hover {
background: #000;
/*background: #d97706;*/
}
.btn-secondary {
border: 2px solid #f59e0b;
color: #f59e0b;
}
.btn-secondary:hover {
background: #fff7ed;
}
.hero-image {
flex: 1;
display: flex;
justify-content: center;
position: relative;
}
.hero-image::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
background: #fef3c7;
border-radius: 50%;
z-index: -1;
}
.hero-image img {
width: 100%;
max-width: 700px;
/*filter: drop-shadow(0 30px 50px rgba(0,0,0,.15));*/
}
@media (max-width: 992px) {
.hero {
flex-direction: column;
text-align: center;
padding: 40px 24px;
}
.hero-buttons {
justify-content: center;
}
.hero h1 {
font-size: 3.5rem;
}
}