/* ============================================================
   narrow-screen-fix.css v2 —— 对齐统一 / 间距压缩 / 图标 / Footer
   追加在 css/style.css 之后引入，可覆盖基础样式。
   ============================================================ */

/* ---------- 1. 卡片对齐全站统一：一律左对齐（覆盖内联 text-align:center） ---------- */
.card{text-align:left!important}
.card .ico{margin:0 0 16px!important}

/* ---------- 2. 紧凑导航：1201–1365px ----------
   下界必须与 style.css 的汉堡断点（1200）对齐，否则 1201 以下的抽屉菜单
   会被这里的紧凑字号覆盖成小字密排 */
@media (min-width:1201px) and (max-width:1365px){
  .topbar-inner{gap:14px;}
  .brand{gap:9px;}
  .brand-logo{width:34px;height:34px;border-radius:9px;}
  .brand-logo span{font-size:18px;}
  .brand-name{font-size:15px;letter-spacing:0;}
  .nav{gap:0;}
  .nav a{padding:8px 8px;font-size:14px;}
  .nav-cta{padding:8px 12px !important;font-size:13px !important;margin-left:4px;}
}
.nav{flex-wrap:wrap;justify-content:flex-end;}

/* ---------- 2b. ≥1366px：容器上限 1280px，导航必须一行装下（否则电话按钮被 flex-wrap
       挤到第二行、菜单项顶出 header 被裁）。顶部英文副标题已从 HTML 删除，品牌块只剩约
       126px，这里把菜单字号提到 15px、左右内距收到 8px，总宽约 1150 仍有约 10% 余量 ---------- */
@media (min-width:1366px){
  .topbar-inner{gap:16px;}
  .nav{gap:0;}
  .nav a{padding:9px 8px;font-size:15px;}
  .nav-cta{padding:9px 14px!important;font-size:14px!important;margin-left:4px;}
}

/* ---------- 3. 字号连续过渡，消除断点跳变 ---------- */
.hero h1       { font-size:clamp(24px, 3.9vw, 54px); letter-spacing:clamp(-1.2px, -0.09vw, 0px); }
.page-hero h1  { font-size:clamp(22px, 3.9vw, 54px); }
.section-title { font-size:clamp(23px, 3.3vw, 42px); }
.section-sub   { font-size:clamp(15px, 1.25vw, 17px); }
.hero p.lead   { font-size:clamp(15px, 1.4vw, 19px); }
.hero-stat b   { font-size:clamp(20px, 2.4vw, 32px); }

/* ---------- 4. 1201–1280px：四列卡片正文过窄 ---------- */
@media (min-width:1201px) and (max-width:1280px){
  .g-4{grid-template-columns:repeat(2,1fr);}
  .card{padding:26px;}
  .process{grid-template-columns:repeat(3,1fr);}
  .process::before{display:none;}
}

/* ---------- 5. 长英文术语撑破窄卡片 ---------- */
.card p,.info p{overflow-wrap:break-word;word-break:break-word;}
.card,.info,.proc,.hero-stat,.grid > *{min-width:0;}

/* ---------- 6. 悬浮按钮 tooltip 在 480–900px 出界 ---------- */
@media (max-width:900px){
  .float-call::after{display:none;}
}

/* ---------- 7. 容器宽度平滑过渡 ---------- */
:root{--container:min(1280px, 100%);}

/* ---------- 8. 解除 body{overflow-x:hidden} 静默裁切 ---------- */
body{overflow-x:visible !important;}

/* ---------- 9. 手机版页脚美化（卡片式分区 + 两列菜单） ---------- */
@media (max-width:640px){
  footer{padding:28px 0 12px;background:linear-gradient(180deg,rgba(124,92,255,.07),transparent 46%);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:18px 14px;}
  .foot:first-child{grid-column:1 / -1;padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--line);}
  .foot h4{font-size:14px;margin-bottom:8px;letter-spacing:.5px;}
  .foot ul li{margin-bottom:4px;}
  .foot ul a{font-size:14px;}
  .foot p{font-size:13px;line-height:1.65;}
  .foot-contact div{font-size:13px;margin:3px 0;}
  .foot-bottom{padding-top:10px;font-size:11.5px;}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px 14px;}
  .foot:first-child{text-align:center;}
  .foot .brand{justify-content:center;}
  .foot:first-child p{margin:8px auto 0;max-width:320px;}
}

/* ---------- 10. 手机端 SVG 示意图：整体缩放进卡片，不再横向溢出 ---------- */
.svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.svg-scroll > svg{display:block;}
@media (max-width:768px){
  /* 原 min-width:440px 会让 400/500 宽的示意图在 390 手机上撑出卡片、右侧被裁掉，
     这里改为整体自适应宽度（矢量图缩放不糊），同时把图内文字字号提上去抵消缩放 */
  .svg-scroll{overflow-x:visible;}
  .svg-scroll > svg{min-width:0!important;max-width:100%!important;width:100%!important;height:auto!important;}
  .svg-scroll svg text[font-weight="700"]{font-size:16px;}
  .svg-scroll svg text[font-size="12"]{font-size:17px;}
  .svg-scroll svg text[font-size="11"]{font-size:13px;}
  /* 示意图卡片收窄内边距，把宽度让给图本身 */
  .svg-card{padding:16px!important;}
}