.hero{
padding:clamp(32px,8vw,92px) 0 clamp(24px,6vw,64px);
background: radial-gradient(1200px 600px at 10% -10%, rgba(52,211,153,.25), transparent 60%),
radial-gradient(900px 500px at 90% -20%, rgba(16,185,129,.2), transparent 55%),
linear-gradient(180deg, #eafaf3, #f7fcf9);
border-bottom:1px solid rgba(16,185,129,.08);
}
.hero__inner{display:grid; gap:22px; justify-items:center; text-align:center}
.hero__title{margin-bottom:.2em}
.hero__lead{color:var(--sp-muted); max-width:780px} .hero .cta-bar{margin-top:16px} .services{padding:clamp(28px,6vw,72px) 0} .hero{ padding: clamp(28px, 8vw, 92px) 0;
background:
radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,.12), transparent 55%),
radial-gradient(900px 450px at 85% 85%, rgba(16,185,129,.20), transparent 55%),
linear-gradient(180deg, #0e6b57, #0d715b); position: relative;
} .hero::after{
content:"";
position:absolute; left:0; right:0; bottom:-18px; height:18px;
background: linear-gradient(180deg, rgba(0,0,0,.10), transparent);
pointer-events:none;
} .hero__inner{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 32px;
align-items: center;
} .hero__title{ color:#ffffff; }
.hero__lead{ color:rgba(255,255,255,.9); } .hero .cta-bar{
display:flex;
justify-content:center; gap:14px;
margin-top: 16px;
} .hero .btn--solid{ box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.hero .btn--outline{
color:#fff; border-color: rgba(255,255,255,.55);
}
.hero .btn--outline:hover{ border-color:#fff; } @media (max-width: 1024px){
.hero__inner{ grid-template-columns: 1fr; }
.hero__media{ order: 2; }
.hero__copy{ order: 1; text-align: center; } .hero .cta-bar{ justify-content:center; }
} .hero__media img{
border-radius: 20px;
box-shadow: var(--sp-shadow-lg);
} .hero .cta-bar .btn{ 
min-width: 190px; box-shadow: 0 6px 16px rgba(0,0,0,.18);
} .hero .cta-bar .btn--outline{
background: var(--sp-green-500);
color: #fff;
border: 0;
}
.hero .cta-bar .btn--outline:hover{
background: var(--sp-green-600);
} .service-card { 
text-align: center; }
.service-card__cta{
display: inline-flex;
align-items: center; 
justify-content: center;
margin: 14px auto 0; } .service-card { border-top: 0 !important; }
.service-card::before { display: none !important;
content: none !important;
} @media (max-width: 991px){
:root { --header-h-m: 76px; } .sp-header{ z-index: 1000; }
.sp-header + .hero{ padding-top: calc(var(--header-h-m) + 10px); }
} @media (min-width: 992px){ .hero{
padding-block: clamp(32px, 4.6vw, 51px);
}
.hero .hero_inner{
align-items: center;
gap: clamp(20px, 3vw, 40px);
} .hero .hero__media{
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
overflow: hidden;
max-height: clamp(392px, 48vh, 529px); max-width: 100%;
}
.hero .hero__media img{
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: inherit;
}
.hero .hero_title{ margin-bottom: 12px; }
.hero .hero_lead { margin-bottom: 14px; }
.hero .cta-bar   { margin-top: 16px; }
} @media (min-width: 1400px){
.hero .hero__media{ max-height: 552px; } }