/*
 * [INPUT]: 依赖 styles.css 的布局类名与 mockups.css 的界面示意断点。
 * [OUTPUT]: 提供移动端布局、入场动效与减少动态效果的偏好适配。
 * [POS]: 官网响应式层；置于两份基础样式之后覆盖布局参数。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
/* ── 屏幕尺寸与动态效果 ── */
.anim .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.anim .reveal.in {
  opacity:1;
  transform:none
}
@media(max-width:1000px) {
  .pillar-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .hero-inner {
    gap:2rem
  }
}
@media(max-width:900px) {
  .hero-inner {
    grid-template-columns:1fr
  }
  .hero-copy {
    max-width:650px
  }
  .hero-stage {
    width:min(100%,680px);
    margin:2rem auto 0
  }
  .feature {
    grid-template-columns:1fr
  }
  .feature-reverse .feature-copy {
    order:-1
  }
  .tour-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:760px) {
  .nav-links {
    display:none
  }
  .language {
    margin-left:auto
  }
  .nav-cta {
    margin-left:0
  }
  .hero {
    padding-top:4rem
  }
  .hero-title {
    font-size:clamp(2.7rem,8vw,4.3rem)
  }
  .trust-strip {
    margin-inline:var(--pad)
  }
}
@media(max-width:560px) {
  .nav {
    gap:.65rem;
    padding-block:.6rem
  }
  .brand {
    font-size:1.1rem
  }
  .language {
    padding:.45rem .5rem;
    font-size:.78rem
  }
  .nav-cta {
    padding:.58rem .75rem;
    font-size:.8rem
  }
  .nav-cta .btn-mark {
    display:none
  }
  .hero {
    padding-top:3rem
  }
  .hero-title {
    font-size:clamp(2.5rem,10.4vw,3.4rem)
  }
  .hero-sub {
    font-size:1rem
  }
  .hero-actions {
    gap:.6rem
  }
  .btn-lg {
    font-size:.89rem;
    padding:.85rem 1rem
  }
  .hero-meta {
    font-size:.76rem
  }
  .trust-strip {
    justify-content:flex-start;
    gap:.65rem 1rem;
    font-size:.78rem
  }
  .trust-strip span {
    width:calc(50% - .5rem)
  }
  .pillar-grid,.tour-grid {
    grid-template-columns:1fr
  }
  .feature-copy h2 {
    font-size:2rem
  }
  .flow {
    flex-direction:column;
    align-items:center
  }
  .flow-link {
    transform:rotate(90deg)
  }
  .flow-step {
    width:100%;
    max-width:none
  }
  .code-dialog {
    padding:1.5rem
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
  .anim .reveal {
    opacity:1;
    transform:none
  }
}