/* Desktop 80% content study. Keep independent mobile/tablet layouts readable. */
@media(min-width:1100px){
 /* 80 / 87.320574: shrink typography, imagery, spacing and section heights together. */
 main>.section{--content-scale:.9161645}
 main>.section>.container,.cases-section .container,.site-footer .container,.customer-ribbon-inner{width:80%;max-width:none;margin-left:auto;margin-right:auto}
 .devices-showcase{width:86.12vw}
 /* The case carousel uses explicit refinement dimensions outside the design compiler. */
 .cases-grid{grid-auto-columns:calc((100% - 40.31px)/3);gap:20.16px;padding:5.5px 0 12.83px}
 .case-cover{height:calc(clamp(175px,12vw,220px)*var(--content-scale))}
 .case-copy{padding:18.32px 21.99px 16.49px}
 .case-copy h3{font-size:20.16px}.case-copy>p{font-size:12.83px}
 .case-bottom{padding-top:13.74px;font-size:10.99px}
 .cases-section{padding-bottom:38.48px}
 .carousel-controls{gap:14.66px;margin-top:14.66px}
 .carousel-controls .circle-button{width:31.15px;height:31.15px}
 .carousel-count{font-size:10.99px}
 /* 80 / 88: preserve the approved logo ribbon proportions. */
 .customer-ribbon{margin-top:-40px;min-height:98.18px}
 .customer-ribbon-inner{min-height:96.36px;grid-template-columns:203.64px minmax(0,1fr);gap:34.55px}
 .customer-message{padding-right:21.82px}
 .customer-message p{font-size:18.18px;letter-spacing:.272727px}
 .customer-message p+p{font-size:17.27px;margin-top:2.73px;letter-spacing:.545455px}
 .customer-message span{font-size:23.64px;padding:0 3.64px}
 .customer-logos{grid-template-columns:repeat(6,minmax(0,1fr)) 70px;gap:25.45px}
 .customer-logo{height:69.09px}
 .customer-logo img{max-width:136.36px;max-height:40px}
 .customer-logo--sany img{max-width:120px;max-height:32.73px}
 .customer-logo--powerchina img{max-width:130.91px;max-height:38.18px}
 .customer-logo--bbg img{max-width:101.82px;max-height:34.55px}
 .customer-logo--nudt img{max-width:158.18px;max-height:46.36px}
 .customer-logo--csu img{max-width:136.36px;max-height:41.82px}
 .customer-logo--syoung{gap:7.27px}
 .customer-logo--syoung .syoung-symbol{width:calc((100% - 7.27px)*.36424);max-width:50px;height:55.45px;max-height:none}
 .customer-logo--syoung .syoung-wordmark{width:calc((100% - 7.27px)*.63576);max-width:87.27px;height:21.82px;max-height:none}
 .customer-logo--jiahe img{width:70px;height:59.09px;max-height:none}
 /* Footer graphics and gaps shrink; type grows independently for a coherent reading size. */
 .footer-cta{padding:35px 0 31px}
 .footer-cta-grid{gap:58px}
 .footer-cta h2{font-size:30px}
 .footer-cta p{font-size:14px}
 .footer-cta-actions{gap:11px;margin-top:17px}
 .footer-cta .button{font-size:14px;min-height:38px;padding:0 17px}
 .footer-promises{max-width:550px;gap:16px 20px}
 .footer-promises>div{padding:8px 12px;gap:8px;min-height:43px}
 .footer-promises span{font-size:13px}
 .footer-promise-icon{width:22px;height:22px}
 .footer-promises .ui-icon{width:14px;height:14px}
 .footer-grid{grid-template-columns:repeat(5,minmax(0,1fr)) 1.9fr;gap:31px;padding:28px 0 30px}
 .footer-column h3{font-size:15px;margin-bottom:16px}
 .footer-column li a{font-size:14px}
 .footer-column p{font-size:13px}
 .footer-phone{font-size:26px}
 .footer-contact-methods{gap:14px;margin-top:15px}
 .footer-wechat img{width:72px;height:72px}
 .footer-wechat span{font-size:11px}
 .footer-contact-methods .text-link{font-size:13px}
 .footer-bottom-inner{padding:18px 0 20px}
 .footer-legal{font-size:12px;gap:20px}
 .site-footer .brand--footer img{width:31px;height:28px}
 .site-footer .brand--footer strong{font-size:19px}
}
@media(min-width:1100px) and (max-width:1279px){
 .customer-ribbon-inner{grid-template-columns:172.73px minmax(0,1fr);gap:20px}
 .customer-message p{font-size:15.45px}.customer-message p+p{font-size:14.55px}.customer-message span{font-size:20px}
 .customer-logos{gap:15.45px}
 .footer-grid{gap:20px}
 .footer-promises span{font-size:12px}
 .footer-promises>div{padding:8px 10px}
 .footer-column h3{font-size:14px}.footer-column li a{font-size:13px}
 .footer-contact-methods{gap:11px}.footer-contact-methods .text-link{font-size:12px}
 .footer-column p{font-size:12px}
}

/* Emphasize customer count and bring both lines closer to the divider. */
@media(min-width:1100px){
 .customer-ribbon-inner{grid-template-columns:245px minmax(0,1fr)}
 .customer-message{padding-right:12px;text-align:right}
 .customer-message p{font-size:22px}
 .customer-message p+p{font-size:21.5px;margin-top:3px}
 .customer-message span{font-size:30px;padding:0 4px}
}
@media(min-width:1100px) and (max-width:1279px){
 .customer-ribbon-inner{grid-template-columns:218px minmax(0,1fr)}
 .customer-message p{font-size:20px}.customer-message p+p{font-size:19.5px}.customer-message span{font-size:27px}
}
@media(min-width:761px) and (max-width:1099px){
 .customer-ribbon-inner{grid-template-columns:214px minmax(0,1fr)}
 .customer-message{padding-right:12px;text-align:right}
 .customer-message p{font-size:19px}.customer-message p+p{font-size:18.5px}.customer-message span{font-size:26px}
}

/* Compact desktop navigation after scrolling; keep the hero layout stable. */
@media(min-width:1100px){
 .site-header{transition:height .25s ease,background .25s,box-shadow .25s}
 .site-header.is-scrolled{height:5vw}
}
@media(min-width:761px){
 .customer-message p,.customer-message p+p,.customer-message span{font-size:20px}
}

/* Wider centered customer ribbon, with a stronger customer count. */
.customer-message span{font-weight:800;line-height:1.1}
@media(min-width:1100px){
 .customer-ribbon-inner{width:86%;max-width:none;margin-left:auto;margin-right:auto}
 .customer-message span{font-size:32px}
}
@media(min-width:761px) and (max-width:1099px){
 .customer-message span{font-size:28px}
}
@media(max-width:760px){
 .customer-message span{font-size:24px}
}

/* Tighten mobile hero whitespace while preserving the original illustration size. */
@media(max-width:760px){
 .hero{padding-top:calc(var(--header) + 8px);padding-bottom:8px}
 .hero h1{margin-top:10px;margin-bottom:0}
 .hero-actions{margin-top:14px}
 .hero-pagination{margin-top:10px}
}