/* Shared layout for image-led service banners. Individual page files only choose the artwork. */
.service-hero{position:relative;isolation:isolate;display:flex;min-height:540px;align-items:center;overflow:hidden;padding:68px 0;background-position:right center;background-size:auto 100%;background-repeat:no-repeat}
.caller-page .service-hero{background-image:url("banner-caller-id-light.jpg")}
.compliance-page .service-hero{background-image:url("banner-compliance-light.jpg")}
.smslogo-page .service-hero{background-image:url("banner-smslogo-light.jpg")}
.service-hero:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 28%,rgba(255,255,255,.72) 45%,rgba(255,255,255,.08) 67%,transparent 80%),linear-gradient(0deg,rgba(255,255,255,.72),transparent 14%)}
.service-hero .service-hero-copy{position:relative;z-index:1;width:51%;max-width:640px;min-width:0;padding:0}
.service-hero :is(.eyebrow,.compliance-kicker){display:inline-flex;align-items:center;max-width:100%;padding:6px 12px;border:1px solid #dce7fa;border-radius:999px;color:#315da6;background:rgba(237,244,255,.9);font-size:11px;font-weight:750;line-height:1.4;letter-spacing:.7px}
.service-hero h1{margin:18px 0 9px;color:#10203a;font-size:clamp(40px,4.5vw,56px);line-height:1.16;letter-spacing:-1.5px}
.service-hero .hero-subtitle{margin:0 0 18px;color:#2859bd;font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.45}
.service-hero .service-hero-copy>p{max-width:620px;margin:0;color:#52647e;font-size:15px;line-height:1.9}
.service-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin:27px 0 0}
.service-hero .hero-actions .btn{min-height:46px;padding:0 23px;box-shadow:0 9px 22px rgba(34,92,237,.15)}
.service-hero .hero-actions>a:not(.btn){display:inline-flex;min-height:46px;align-items:center;padding:0 20px;border:1px solid #cad9ef;border-radius:9px;color:#315da6;background:rgba(255,255,255,.8);font-size:14px;font-weight:700}
.service-hero :is(.development-tags,.baike-tags,.caller-tags,.geo-tags,.software-tags,.compliance-tags){display:flex;flex-wrap:wrap;gap:8px 10px;margin:23px 0 0;padding:0;color:#536781;list-style:none}
.service-hero :is(.development-tags,.baike-tags,.caller-tags,.geo-tags,.software-tags,.compliance-tags)>*{display:inline-flex;min-height:28px;align-items:center;padding:4px 10px;border:1px solid #d9e5f5;border-radius:999px;color:#536781;background:rgba(255,255,255,.76);font-size:11px;font-weight:600;line-height:1.4}
.service-hero .software-tags span+span{padding-left:10px;border-left:1px solid #d9e5f5}

@media(max-width:1000px){
 .service-hero{display:block;min-height:0;padding:48px 0 270px;background-position:center bottom;background-size:auto 320px}
 .service-hero:before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.99) calc(100% - 285px),rgba(255,255,255,.28) calc(100% - 175px),rgba(255,255,255,.02))}
 .service-hero .service-hero-copy{width:100%;max-width:720px}
 .development-app .service-hero{background-image:url("banner-app-development-light-960.jpg")}
 .development-mini .service-hero{background-image:url("banner-mini-program-light-960.jpg")}
 .baike-page .service-hero{background-image:url("banner-baike-light-960.jpg")}
 .caller-page .service-hero{background-image:url("banner-caller-id-light-960.jpg")}
 .smslogo-page .service-hero{background-image:url("banner-smslogo-light-960.jpg")}
 .geo-page .service-hero{background-image:url("geo-banner-960.jpg")}
 .software-page .service-hero{background-image:url("banner-software-light-960.jpg")}
 .compliance-page .service-hero{background-image:url("banner-compliance-light-960.jpg")}
}
@media(max-width:600px){
 .service-hero{padding:38px 0 205px;background-position:center bottom;background-size:auto 235px}
 .service-hero:before{background:linear-gradient(180deg,#fff 0%,#fff calc(100% - 215px),rgba(255,255,255,.22) calc(100% - 125px),rgba(255,255,255,0))}
 .service-hero h1{margin:15px 0 8px;font-size:34px;line-height:1.2;letter-spacing:-.8px}
 .service-hero .hero-subtitle{margin-bottom:14px;font-size:20px;line-height:1.45}
 .service-hero .service-hero-copy>p{font-size:14px;line-height:1.8}
 .service-hero :is(.eyebrow,.compliance-kicker){font-size:9px;letter-spacing:.35px;white-space:normal}
 .service-hero .hero-actions{align-items:stretch;gap:9px;margin-top:21px}
 .service-hero .hero-actions>a{justify-content:center}
 .service-hero :is(.development-tags,.baike-tags,.caller-tags,.geo-tags,.software-tags,.compliance-tags){margin-top:17px;gap:7px}
 .service-hero :is(.development-tags,.baike-tags,.caller-tags,.geo-tags,.software-tags,.compliance-tags)>*{min-height:26px;padding:3px 8px;font-size:10px}
}
@media(max-width:390px){.service-hero .hero-actions{display:grid;grid-template-columns:1fr}.service-hero{background-position:58% bottom}}