/* Figma Mobile 6:75 / 390×3542。这些规则仅影响手机。 */
@media(max-width:767px) {
  .mobile-only { display:inline; }
  .desktop-only,.desktop-links { display:none; }
  .section-label { height:16px; font-size:12px; line-height:16px; font-weight:400; }
  h2 { font-size:30px; line-height:38px; }
  section[id],footer[id] { scroll-margin-top:20px; }
  #about { scroll-margin-top:0; }
  .site-header { position:absolute; }
  .site-header nav { height:48px; padding-inline:20px; }
  .site-logo :is(img,video) { width:49px; height:24px; }
  .contact-link { width:60px; height:24px; margin:0; font-size:10px; font-weight:400; line-height:15px; }
  #mobileQuickNav { position:fixed; left:50%; bottom:18px; top:auto; z-index:60; display:flex; justify-content:space-around; width:min(348px,calc(100vw - 42px)); height:58px; padding:1px 8px; border:1px solid rgba(255,255,255,.4); border-radius:30px; color:white; transform:translateX(-50%); }
  #mobileQuickNav a { position:relative; isolation:isolate; display:flex; flex:0 1 80px; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:54px; padding-bottom:5px; font-size:10px; line-height:15px; white-space:nowrap; }
  #mobileQuickNav a::before { content:""; position:absolute; z-index:-1; top:0; left:50%; width:124px; max-width:calc((100vw - 46px) / 3 + 14px); height:54px; border-radius:27px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 4px rgba(0,0,0,.25); opacity:0; transform:translateX(-50%); transition:opacity .15s; }
  #mobileQuickNav a:is(:active,:focus-visible)::before { opacity:1; }
  #mobileQuickNav a :is(img,video) { width:30px; height:30px; object-fit:contain; }
  #mobileQuickNav a:nth-child(2) :is(img,video) { width:28px; height:28px; margin-bottom:1px; }
  #mobileQuickNav a:nth-child(3) :is(img,video) { width:26px; height:26px; margin-bottom:2px; }
  /* 390×844是设计基准，不是只按宽度放大的画布。
     同时考虑屏高，并在大手机上停止放大；视频保持原比例cover，不拉伸。 */
  #hero { --hero-unit:min(1px,calc(100vw / 390),calc((100vh - 100px) / 744)); --video-height:calc(693.333333 * var(--hero-unit)); height:min(calc(850 * var(--hero-unit)),100vh); }
  @supports(height:100svh) { #hero { --hero-unit:min(1px,calc(100vw / 390),calc((100svh - 100px) / 744)); height:min(calc(850 * var(--hero-unit)),100svh); } }
  .hero-shade { background:rgba(39,39,42,.14); }
  .hero-gradient { top:calc(var(--video-height) - 150 * var(--hero-unit)); height:calc(150 * var(--hero-unit) + 1px); background:linear-gradient(180deg,rgba(250,249,245,0),#faf9f5 49.939%); }
  .hero-intro { top:calc(115 * var(--hero-unit)); width:100%; }
  .hero-title { width:203px; height:93.385px; margin-inline:auto; }
  .hero-eyebrow { font-size:12px; line-height:18px; }
  .hero-title-art { height:71.24px; margin-top:4.88px; }
  .hero-typewriter { height:40px; margin-top:25.615px; font-size:12px; line-height:20px; }
  #heroCards { --card-width:calc(280 * var(--hero-unit)); top:calc(522 * var(--hero-unit) - 24px); left:0; display:flex; width:100%; height:calc(200 * var(--hero-unit) + 60px); padding:24px calc((100vw - var(--card-width)) / 2) 36px; gap:0; margin:0; transform:none; align-items:center; overflow-x:auto; scroll-padding-inline:calc((100vw - var(--card-width)) / 2); touch-action:pan-y pinch-zoom; scroll-snap-type:none; scroll-behavior:auto; overscroll-behavior-x:none; }
  #heroCards { justify-content:flex-start; }
  #heroCards .hero-card { flex:0 0 var(--card-width); width:var(--card-width); height:calc(var(--card-width) * 5 / 7); margin-right:calc(-19 * var(--hero-unit)); aspect-ratio:7/5; transform:scale(var(--hero-scale,.75)); transform-origin:center; transition:none; will-change:transform; }
  #heroCards .hero-card.is-selected { --hero-scale:1; }
  #heroCards .hero-card:last-child { margin-right:0; }
  .hero-detail-cta { bottom:20px; font-size:12px; }
  #heroPagination { position:absolute; top:calc(738 * var(--hero-unit)); left:50%; display:flex; gap:4px; transform:translateX(-50%); }
  #heroPagination button { position:relative; display:block; flex:none; width:12px; height:2px; padding:0; border-radius:2px; background:#d9d9d9; }
  #heroPagination button[aria-pressed="true"] { background:#49494a; }
  #heroPagination button::before { content:""; position:absolute; inset:-9px 0; }
  .hero-more { display:none; }
  #aigc { padding:24px 0 49px; }
  .section-heading { display:block; margin:0; }
  .section-heading > p { max-width:none; margin-top:6px; padding:0; font-size:12px; line-height:16px; }
  .aigc-area { margin-top:24px; }
  .aigc-default { grid-template-columns:1fr; gap:16px; }
  #aigcTileGrid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:8px; }
  #aigcTileGrid .aigc-tile { border-radius:20px; aspect-ratio:1; }
  .aigc-preview { display:none; }
  #works { padding-bottom:35px; }
  .works-heading { display:block; }
  #works [role="tablist"] { gap:8px; margin-top:20px; padding:0 3px; }
  .filter-tab { width:80px; height:32px; font-size:12px; line-height:15px; font-weight:400; }
  .works-viewport { margin-top:24px; }
  #projectGrid { gap:16px; padding-inline:20px; scroll-padding-inline:20px; }
  .project-card { height:350px; }
  .works-controls { height:19px; margin-top:16px; padding-right:3px; font-size:12px; }
  #about.about-section { height:calc(100vw * 844 / 390); }
  .about-heading { top:calc(100vw * 49 / 390); }
  .about-heading h2 { font-size:30px; line-height:38px; font-weight:600; }
  #clients { padding:6px 0 64px; }
  #clients .section-label { color:#707078; font-weight:500; }
  .marquee { height:102px; margin-top:24px; }
  .client-group > .client-media { height:102px; }
  #contact { height:249px; }
  #contact .section-label { color:#707078; font-weight:500; }
  #contact h2 { font-size:25px; line-height:31px; }
  .contact-field { top:102px; gap:8px; height:16px; font-size:12px; line-height:16px; }
  .contact-phone { left:0; }
  .contact-mail { left:0; top:128px; }
  .contact-field button { width:16px; height:16px; }
  .copy-icon::before,.copy-icon::after { border-width:1px; border-radius:2px; }
  .contact-qr { top:41px; right:2px; width:80px; }
  .contact-qr :is(img,video) { width:80px; height:80px; }
  .contact-qr figcaption { margin-top:7px; font-size:12px; line-height:16px; }
  #copyFeedback { top:154px; }
  .modal-panel { top:108px; height:calc(100dvh - 108px); border-radius:20px 20px 0 0; }
  .modal-close { top:62px; right:18px; }
  .media-zoom-reset { top:62px; left:18px; }
}