/* XUNIA TECH V30 — responsive cleanup across phones, tablets and large screens */
html{width:100%;max-width:100%;overflow-x:clip;scroll-padding-top:88px}
body{width:100%;max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%}img{height:auto}
.wrap,.inner-wrap{width:min(100% - 40px,1080px);max-width:1080px;margin-inline:auto}
.section{padding:clamp(58px,7vw,108px) clamp(16px,3vw,28px)}
.section h2{font-size:clamp(28px,3.4vw,44px);overflow-wrap:break-word}
.hero-inner h1{font-size:clamp(2.35rem,5.4vw,5rem)!important;line-height:1.05!important}
.hero-inner p{font-size:clamp(15px,1.5vw,18px)!important;line-height:1.55!important}
.service-layout{gap:clamp(16px,4vw,65px)}
.service-list{min-width:0;max-width:100%;touch-action:pan-y}
.service-card,.project-card,.full-service-card{min-width:0}
.contact-layout,.form-grid,.sub-contact{min-width:0}
input,select,textarea{min-width:0;max-width:100%}
.contact-layout input,.contact-layout select,.contact-layout textarea,.sub-contact input,.sub-contact select,.sub-contact textarea{font-size:16px}
.hero-buttons{max-width:100%;gap:12px}
.hero-buttons .btn{max-width:100%;white-space:normal;text-align:center}
.section-top{gap:16px}
.project-card .preview{min-width:0}
.project-real-preview{max-width:100%;height:100%;object-fit:contain}
.launch-svg{width:100%;max-width:1200px;height:auto}
.launch-sticky{width:100%;max-width:100vw}
.float-actions{right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:110}
#site-header{min-width:0;max-width:calc(100vw - 16px)!important}
#site-header>a{overflow:hidden}#site-header .headright{min-width:0}
.ocean-footer .footer-content,.ocean-footer .footer-bottom{width:min(100% - 32px,1080px)}
.ocean-footer .footer-content>*{min-width:0}
.ocean-footer .footer-email{overflow-wrap:anywhere}
body.inner-page{padding-top:clamp(82px,8vw,106px)!important}
.inner-hero{margin:clamp(35px,6vw,75px) auto clamp(35px,5vw,65px)!important;width:min(100% - 32px,1150px)}
.inner-hero h1{font-size:clamp(2rem,5.5vw,5rem);overflow-wrap:anywhere}
.full-service-art img,.form-art img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:1100px){
 #site-header{width:calc(100% - 32px)!important}
 .project-card{gap:25px}
}
@media (max-width:850px){
 #site-header{width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;height:64px!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}
 #site-header #nav{max-height:min(70dvh,520px);overflow-y:auto!important;overscroll-behavior:contain}
 #site-header .headright{gap:5px!important}
 #site-header #theme,#site-header #menu{min-width:36px;min-height:40px;display:grid!important;place-items:center}
 #site-header #language-select{min-height:40px}
 .hero{min-height:640px!important;height:100svh!important;max-height:940px!important}
 .hero-inner{padding:110px 36px 88px!important;align-items:flex-start!important;text-align:left!important}
 .service-layout{grid-template-columns:1fr!important;gap:12px!important}
 .mascot{height:clamp(190px,38vw,340px)!important;margin:auto}
 .mascot-image{max-height:100%;object-fit:contain}
 .service-list{width:100%;max-height:min(490px,56dvh);overflow-y:auto}
 .project-card,.project-card.reverse{display:grid!important;grid-template-columns:1fr 1fr!important}
 .project-card.reverse .proj-text{order:2}
 .project-card .preview{height:220px}
 .contact-layout{grid-template-columns:1fr!important}
 .contact-art{display:none!important}
 .sub-contact{gap:30px!important}
 .full-service-card{grid-template-columns:1fr 1fr;gap:15px;padding:20px}
 .full-service-card .full-service-art{height:250px}
 .ocean-footer .footer-content{gap:22px;grid-template-columns:1fr 1fr}
 .ocean-footer .footer-about{grid-column:1/-1}
}
@media (max-width:600px){
 html{scroll-padding-top:70px}
 .wrap,.inner-wrap{width:calc(100% - 28px)!important;padding-inline:0!important}
 .hero{min-height:610px!important;height:100svh!important;max-height:920px!important;margin:0!important;border-radius:0!important;clip-path:none!important}
 .hero-inner{padding:100px 22px 90px!important;justify-content:center!important;text-align:left!important;align-items:flex-start!important}
 .hero-inner h1{font-size:clamp(2.45rem,10vw,3.7rem)!important;letter-spacing:-.05em!important}
 .hero-inner p{font-size:15px!important;max-width:440px}
 .hero-buttons{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:420px}
 .hero-buttons .btn{width:100%;font-size:14px!important;min-height:48px!important;padding:12px 14px!important}
 .hero .scroll{bottom:25px}
 #site-header{padding:0 9px!important;height:61px!important;border-radius:0 0 19px 19px!important}
 #site-header>a{gap:7px!important}
 #site-header>a .ms{font-size:23px!important}
 #site-header>a strong{font-size:12px!important}
 #site-header>a small{font-size:7px!important;max-width:124px}
 #site-header .headright>a{display:none!important}
 #site-header #theme,#site-header #menu{min-width:32px;min-height:36px;padding:3px!important}
 #site-header #language-select{font-size:11px!important;max-width:52px!important;padding:4px 1px!important}
 .section{padding:62px 16px!important}
 .section h2{font-size:clamp(27px,8vw,37px)!important;line-height:1.12}
 .subtitle{font-size:14px!important;line-height:1.45}
 .mascot{height:210px!important}
 .service-list{max-height:420px!important}
 .service-card{padding:20px!important}
 .service-card h3{font-size:19px}
 .service-card p,.service-card li{font-size:14px!important}
 .about-panel{padding:23px!important;display:block!important}
 .stat{min-width:0;padding-top:18px}
 .section-top{align-items:start}
 .section-top a{flex:0 0 auto;font-size:13px}
 .project-card,.project-card.reverse{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:18px!important;gap:18px!important}
 .project-card .proj-text,.project-card.reverse .proj-text{order:0!important}
 .project-card .preview{height:190px!important;order:1!important}
 .project-card .proj-text h3{font-size:21px}
 .process-grid{grid-template-columns:1fr!important}
 .full-service-card,.full-service-card.flip{display:flex!important;flex-direction:column!important;gap:6px!important;padding:15px!important}
 .full-service-card .full-service-copy,.full-service-card.flip .full-service-copy{order:0!important;padding:8px!important}
 .full-service-card .full-service-art,.full-service-card.flip .full-service-art{order:1!important;width:100%;height:220px!important}
 .inner-hero{margin:24px auto 36px!important}
 .inner-hero h1{font-size:clamp(33px,8.5vw,49px)!important}
 .inner-hero>p{font-size:15px!important}
 .sub-contact{grid-template-columns:1fr!important;padding-top:40px!important;padding-bottom:65px!important}
 .form-grid{grid-template-columns:1fr!important;gap:12px!important}
 .feature-panel{padding:20px!important}
 .launch-stage{height:180svh!important;max-width:100vw}
 .launch-sticky{height:100svh!important}
 .launch-svg{width:128%!important;max-width:none!important;transform:scale(.85);transform-origin:center}
 .ocean-footer{padding-inline:12px!important;min-height:850px!important}
 .ocean-footer .footer-content{display:grid!important;grid-template-columns:1fr!important;padding-top:130px!important;gap:24px!important}
 .ocean-footer .footer-about{grid-column:1!important}
 .ocean-footer .footer-cta>a{font-size:clamp(26px,7vw,36px)!important}
 .ocean-footer .footer-links{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
 .ocean-footer .footer-lang{grid-column:1/-1}
 .ocean-footer .footer-bottom{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;font-size:11px}
 .ocean-footer .footer-fisher{max-width:100px!important}
 .float-actions{right:10px;bottom:14px;gap:8px}
 .float-actions a{width:42px!important;height:42px!important;font-size:23px!important}
}
@media(max-width:370px){
 #site-header>a small{display:none!important}
 #site-header>a strong{font-size:11px!important}
 #site-header .headright{gap:2px!important}
 #site-header #language-select{max-width:43px!important}
 .hero-inner{padding-inline:17px!important}
 .hero-inner h1{font-size:36px!important}
 .hero-buttons .btn{font-size:12px!important}
}
@media(min-width:1700px){
 .hero-inner{max-width:1300px!important}
 .wrap{max-width:1200px!important}
 .inner-wrap{max-width:1200px!important}
}
@media(prefers-reduced-motion:reduce){.reveal-page,.reveal{opacity:1!important;transform:none!important}.hero .btn{transition:none!important}}