@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:680px){
  .wrap{
    padding-left:max(20px,var(--sal));
    padding-right:max(20px,var(--sar));
  }
  .nav-links{gap:16px;font-size:13.5px}
  .nav-links a.nav-cta{padding:10px 18px}
  .brand-mark{height:30px}
  .hero{padding:calc(var(--nav-h) + var(--sat) + 48px) 0 64px}
  .hero-title{font-size:clamp(26px,calc(10.2vw - 5px),44px)}
  .hl-1{display:block}
  .section{padding:68px 0}
  .sec-head{margin-bottom:32px}
  .hero-sub{margin-top:22px}
  .hero-techs{margin-top:24px}
  .hero-techs li{font-size:12px;letter-spacing:.12em;padding:0 14px}
  .hero-actions{margin-top:30px;gap:12px}
  .btn{width:100%;max-width:320px;height:52px}
  .metrics-cap{margin-top:48px;font-size:11.5px;letter-spacing:.12em;gap:11px}
  .hero-metrics{grid-template-columns:1fr;margin-top:16px;border-bottom:none}
  .hero-metrics li{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:15px 2px;border-left:none;border-bottom:1px solid var(--line);
  }
  .hero-metrics li:first-child{border-top:none}
  .m-num{font-size:30px}
  .m-label{margin-top:0;flex:none;font-size:12px}
  .contact-list{grid-template-columns:1fr}
  .contact-item{padding:18px 20px}
  .ci-icon{top:17px;right:17px}
  .ci-value{padding-right:26px}
  .contact-note{padding:22px}
  .play-btn{width:64px;height:64px}
  .play-btn svg{width:26px;height:26px}
  .footer-inner{flex-direction:column;text-align:center;gap:10px}
}
@media (orientation:landscape) and (max-height:520px){
  .hero{padding:calc(var(--nav-h) + var(--sat) + 36px) 0 56px}
  .section{padding:56px 0}
  .sec-head{margin-bottom:26px}
  .hero-sub{margin-top:18px}
  .hero-techs{margin-top:18px}
  .hero-actions{margin-top:24px}
  .metrics-cap{margin-top:30px}
  .hero-metrics{margin-top:12px}
}
@media (max-width:380px){
  .nav-links a:not(.nav-cta){display:none}
  .hero-techs li{padding:0 11px;letter-spacing:.08em}
  .m-num{font-size:27px}
  .metrics-cap{gap:9px;letter-spacing:.08em}
  .metrics-cap::before,.metrics-cap::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-up{opacity:1;transform:none;transition:none}
  .btn,.card,.contact-item,.video-box,.play-btn,.nav{transition-duration:.01ms}
  .btn-primary:hover,.btn-ghost:hover,.play-btn:hover,.card:hover{transform:none}
}