/* =========================================================
   MOBILE EXPERIENCE — 手机端专属体验层（营销导向）
   断点：≤768px（手机） / ≤900px（小平板）
   设计原则：
   1. 完全去掉 gate 入场页（直接进内容，不刷屏）
   2. 首屏 = 品牌 + 一句话价值 + 图标能力 + 大CTA（营销导向）
   3. 导航：汉堡按钮 → 全屏抽屉（可用、可关）
   4. 字体精简缩小、卡片化、科幻感装饰
   ========================================================= */

/* ---------- 0. 彻底移除入场页 Gate ---------- */
@media (max-width: 768px) {
  .gate, #gate {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.gate-locked { overflow: auto !important; height: auto !important; }
  /* 入场按钮相关全部隐藏 */
  .gate__btn, .gate__nav, .gate__hint, .gate__index,
  .gate__chapter, .gate__center, .gate__top, .gate__deck {
    display: none !important;
  }
}

/* ---------- 1. 基础：字体精简缩小 ---------- */
@media (max-width: 768px) {
  html { font-size: 15px; }
  body { font-size: 14.5px; line-height: 1.65; }
  :root { --s4: 13px; --s5: 15px; --s6: 18px; --s8: 24px; }
  .wrap { padding: 0 16px !important; max-width: 100% !important; }
}

/* ---------- 2. 顶栏 + 语言切换 ---------- */
@media (max-width: 768px) {
  .topbar { padding: 8px 0; }
  .topbar__note, .topbar__status { display: none !important; }
  .lang-switch { position: static; display: flex !important; flex-wrap: nowrap; gap: 1px; }
  .lang-switch__btn { padding: 4px 7px; font-size: 12px !important; white-space: nowrap; flex: 0 0 auto; }
  .topbar__inner { flex-wrap: nowrap; justify-content: space-between; align-items: center; }
}

/* ---------- 3. 导航：汉堡按钮 + 全屏抽屉 ---------- */
@media (max-width: 768px) {
  .site-header {
    position: sticky; top: 0; z-index: 200;
    background: rgba(6,10,18,0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(87,227,196,0.12);
  }
  .site-header .wrap.nav { justify-content: space-between; min-height: 60px; }
  .brand__name { font-size: 16px; }

  /* 汉堡按钮：始终显示 */
  .nav__toggle { display: flex !important; width: 40px; height: 40px; }

  /* nav__links：默认隐藏，is-open 全屏抽屉 */
  .nav__links { display: none !important; }
  .nav__links.is-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300;
    padding: 72px 20px 40px;
    background: linear-gradient(180deg, rgba(6,10,18,0.99), rgba(10,16,28,0.98));
    backdrop-filter: blur(18px);
    overflow-y: auto;
  }
  .nav__links.is-open .nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 4px; font-size: 17px; font-weight: 600;
    border-bottom: 1px solid rgba(87,227,196,0.12);
    color: #e8eef4; text-decoration: none;
  }
  .nav__links.is-open .nav__link:active { color: #57e3c4; }

  /* mega 菜单平铺 */
  .nav__links.is-open .nav__item--mega { display: flex; flex-direction: column; }
  .nav__links.is-open .nav__trigger { display: none; }
  .nav__links.is-open .mega {
    position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    display: block; background: transparent; border: none; box-shadow: none; padding: 0;
  }
  .nav__links.is-open .mega__inner {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 0 18px; grid-template-columns: none;
  }
  .nav__links.is-open .mega__col { padding: 0; margin-bottom: 4px; }
  .nav__links.is-open .mega__cat {
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: #57e3c4; margin: 12px 0 2px; border-bottom: 1px solid rgba(87,227,196,0.1);
  }
  .nav__links.is-open .mega__link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 2px; border-radius: 0;
  }
  .nav__links.is-open .mega__ic { font-size: 19px; width: 28px; height: 28px; flex: none; }
  .nav__links.is-open .mega__link b { font-size: 15px; }
  .nav__links.is-open .mega__link i { font-size: 11.5px; margin-top: 1px; }
  .nav__links.is-open .mega__side { display: none; }

  /* 抽屉底部：联系方式 */
  .nav__links.is-open::after {
    content: "帧屿实验室 · 让AI成为企业基础设施\nhello@zhenyuzhineng.cloud";
    white-space: pre-line;
    display: block; margin-top: 24px; padding-top: 16px;
    border-top: 1px solid rgba(87,227,196,0.15);
    color: #7a8a9a; font-size: 12px; line-height: 1.7;
  }
}

/* ---------- 4. Hero：营销首屏 ---------- */
@media (max-width: 768px) {
  .hero { padding: 40px 0 32px !important; min-height: auto !important; }
  .hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero__status {
    font-size: 10.5px; margin-bottom: 14px; letter-spacing: .1em;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(87,227,196,0.08); border: 1px solid rgba(87,227,196,0.18);
    color: #9fe8d8;
  }
  .hero__title { font-size: 27px !important; line-height: 1.16 !important; letter-spacing: 0 !important; }
  .hero__title .line { display: block; margin-bottom: 5px; }
  .hero__title .hl-grad {
    background: linear-gradient(90deg, #57e3c4, #5c9dff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__sub { font-size: 14px !important; line-height: 1.7 !important; margin-top: 14px; max-width: 100% !important; opacity: 0.9; }
  .hero__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; width: 100%; }
  .hero__actions .btn {
    width: 100%; justify-content: center; padding: 14px 18px; font-size: 15px;
    border-radius: 999px;
  }
  .hero__actions .btn--primary {
    background: linear-gradient(135deg, #57e3c4, #3aa0ff);
    color: #04121a; font-weight: 700;
    box-shadow: 0 8px 30px rgba(87,227,196,0.25);
  }
  .hero__metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px; margin-top: 26px; width: 100%;
  }
  .metric {
    padding: 12px 4px; text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(87,227,196,0.12);
    border-radius: 14px;
  }
  .metric__num { font-size: 22px !important; }
  .metric__label { font-size: 10.5px !important; }

  /* 轻量科幻背景（保留但省电） */
  .hero__canvas, .hero__aurora, .hero__grid, .hero__grain,
  .scroll-progress, .scroll-cue { display: none !important; }
  .hero__bg {
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(87,227,196,0.10), transparent 60%),
      radial-gradient(70% 50% at 85% 90%, rgba(60,140,255,0.08), transparent 60%);
  }
}

/* ---------- 5. 内容：卡片化 + 精简 ---------- */
@media (max-width: 768px) {
  .section { padding: 36px 0 !important; }
  .section--tight { padding: 26px 0 !important; }
  h1, h2 { letter-spacing: 0 !important; }
  h2 { font-size: 21px !important; line-height: 1.25 !important; }
  h3 { font-size: 16.5px !important; line-height: 1.3 !important; }
  .section-title { font-size: 21px !important; }

  .services, .projects, .service-grid, .project-grid,
  .wayfinder-grid, .principles, .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .service, .project, .principle, .card {
    padding: 18px !important;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(87,227,196,0.14);
  }
  .service__desc p, .project__desc, .principle__p, .step__p, .mstep__body {
    font-size: 13.5px !important; line-height: 1.65 !important; opacity: 0.9;
  }
  .about__lead { font-size: 18px !important; line-height: 1.4 !important; }
  .about__body { font-size: 13.5px !important; }

  .process, .steps, .timeline { flex-direction: column !important; gap: 12px !important; }
  .process__step, .step, .mstep {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px !important;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(87,227,196,0.14);
    border-left: 3px solid #57e3c4;
  }
}

/* ---------- 6. wayfinder 三大入口：图标卡片 ---------- */
@media (max-width: 768px) {
  .wayfinder-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .wayfinder__card, .wf-card, .wayfinder-grid a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px !important;
    border-radius: 16px;
    background: rgba(87,227,196,0.06);
    border: 1px solid rgba(87,227,196,0.16);
    text-decoration: none;
  }
  .wayfinder__card [class*="ic"], .wayfinder__card .icon { font-size: 26px; flex: none; }
  .wayfinder__card h3, .wayfinder__card .wf-title { font-size: 16px !important; margin: 0; }
  .wayfinder__card p, .wayfinder__card .wf-desc { font-size: 12px !important; margin: 2px 0 0; opacity: 0.85; }
}

/* ---------- 7. CTA 大按钮 ---------- */
@media (max-width: 768px) {
  .cta, .section--cta { padding: 32px 16px !important; text-align: center; }
  .cta .btn, .section--cta .btn {
    width: 100%; display: flex; justify-content: center;
    padding: 15px 18px; font-size: 15px; margin-top: 16px; border-radius: 999px;
  }
  .cta .btn--primary, .section--cta .btn--primary {
    background: linear-gradient(135deg, #57e3c4, #3aa0ff);
    color: #04121a; font-weight: 700;
  }
}

/* ---------- 8. Footer 精简 ---------- */
@media (max-width: 768px) {
  .site-footer, .footer { padding: 28px 0 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .footer-col { padding: 0; }
  .footer-col__h { font-size: 13px; margin-bottom: 8px; }
  .footer__icp { display: block; margin-top: 8px; font-size: 11.5px; }
  .footer__icp a { color: #7a8a9a; text-decoration: none; }
}

/* ---------- 9. 内部页面通用 ---------- */
@media (max-width: 768px) {
  [class*="page-hero"], [class*="page-head"], [class*="inner-hero"] { padding: 28px 0 18px !important; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  input, textarea, select, button[type="submit"] { max-width: 100% !important; font-size: 15px !important; }
}

/* =========================================================
   900px 小平板过渡
   ========================================================= */
@media (max-width: 900px) and (min-width: 769px) {
  .wrap { padding: 0 24px; }
  .hero__title { font-size: 40px !important; }
  .services, .projects { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}