@charset "utf-8";
/* ==========================================================================
   汗汗漫画 · hanhancomics.cn
   第 22 档  ·  结构变体 A6（版本迭代风）  ·  视觉方向 B4（热血少年）
   白底 + 橙红 / 亮黄 / 墨黑点缀
   ========================================================================== */

@font-face{
  font-family:'Russo One';
  src:url('../fonts/russoone-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#FFFCF8;          /* 暖白纸感底（区别于档 13 的冷调纯白） */
  --bg2:#FFFFFF;
  --bg3:#F6F2EC;
  --line:#EAE3D9;

  --brand:#F04A14;       /* 炽燃橙红 */
  --brand-d:#C22F08;
  --brand-x:#8C1E04;
  --brand-l:#FEEDE6;

  --yellow:#FFCE00;      /* 亮黄：本站第二主色，不是单纯点缀 */
  --yellow-d:#D9A800;
  --yellow-l:#FFF7D1;

  --ink:#16130F;         /* 墨黑：结构性元素 */
  --ink2:#0B0908;

  --t1:#23201C;
  --t2:#5C554C;
  --t3:#8A8177;

  --maxw:1180px;
  --r:6px;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* 阶梯折线纹：纯 CSS 内联 SVG，不参与布局、不产生外链 */
  --stair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 42 H12 V30 H24 V18 H36 V6 H48' fill='none' stroke='%23F04A14' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E");
  --stair-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 42 H12 V30 H24 V18 H36 V6 H48' fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:16px;
  line-height:1.75;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brand-d);text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:700}
p{margin:0}
/* figure / blockquote 的 UA 默认外边距是 1em 40px，不重置会把栅格卡片挤成单字宽 */
figure,blockquote,figcaption{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* 吸顶导航会盖住锚点目标的首行 —— 必须给所有可跳转锚点留出身位 */
section[id],main [id]{scroll-margin-top:78px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* 网格子项必须能小于内容宽度：否则表格的 min-width 会把整列顶宽 → 窄屏横向溢出 */
.cols > *,.qual > *,.split > *,.hero__in > *,.page-hero__in > *{min-width:0}

.num{font-family:'Russo One','Arial Narrow',Impact,sans-serif;letter-spacing:.02em}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 入场动效：纯 CSS @keyframes，与滚动位置无关（JS 观察器在闸门下必然假 FAIL） ── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .55s var(--ease) both}
.rise.d1{animation-delay:.07s}
.rise.d2{animation-delay:.14s}
.rise.d3{animation-delay:.21s}
.rise.d4{animation-delay:.28s}
.rise.d5{animation-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   导航
   ========================================================================== */
.hd{
  position:sticky;top:0;z-index:60;
  background:rgba(255,252,248,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.hd__bar{display:flex;align-items:center;gap:18px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:38px;height:38px;box-shadow:0 0 0 1px var(--line)}
.brand b{font-size:18px;color:var(--ink);letter-spacing:.02em}
.hd__links{display:flex;align-items:center;gap:6px;margin-left:auto}
.hd__links a{
  padding:7px 12px;border-radius:999px;font-size:14px;color:var(--t2);
  transition:color .18s,background .18s;
}
.hd__links a:hover{color:var(--brand-d);background:var(--brand-l)}
.hd__links a.on{color:#fff;background:var(--ink)}
.hd__cta{flex:0 0 auto}

/* ==========================================================================
   按钮：右端箭头形（clip-path 五边形）—— 二十余档里首次
   box-shadow 会被 clip-path 裁掉，硬落影必须用 filter:drop-shadow
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px 13px 24px;
  background:linear-gradient(135deg,#FF7A2E,#F04A14 56%,#C22F08);
  color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;
  clip-path:polygon(0 0,calc(100% - 21px) 0,100% 50%,calc(100% - 21px) 100%,0 100%);
  filter:drop-shadow(4px 4px 0 var(--ink));
  transition:filter .18s var(--ease),transform .18s var(--ease);
}
.btn::after{content:"\203A";font-size:20px;line-height:1;color:var(--yellow);transform:translateY(-1px)}
.btn:hover{color:#fff;filter:drop-shadow(7px 7px 0 var(--ink));transform:translate(-3px,-3px)}
.btn--sm{padding:10px 24px 10px 18px;font-size:14px}
.btn--sm::after{font-size:17px}
.btn--ink{background:var(--ink);filter:drop-shadow(4px 4px 0 var(--brand))}
.btn--ink::after{color:var(--yellow)}

.btn2{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;font-size:15px;font-weight:700;color:var(--ink);
  background:var(--bg2);border:2px solid var(--ink);border-radius:var(--r);
  transition:background .18s,color .18s;
}
.btn2:hover{background:var(--yellow);color:var(--ink)}

.txt-link{border-bottom:2px solid var(--yellow);padding-bottom:1px;font-weight:700}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:52px 0 68px;
  background-image:
    linear-gradient(90deg,var(--brand) 0 33.34%,var(--yellow) 33.34% 66.67%,var(--ink) 66.67%),
    linear-gradient(152deg,#FFFFFF,#FFF9F4 48%,#FFF3E8);
  background-repeat:no-repeat,no-repeat;
  background-position:left bottom,left top;
  background-size:100% 6px,100% 100%;
}
/* 阶梯折线纹 */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--stair);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%);
}
/* 右上大面积橙红→亮黄实心斜切色块（档 13 的 Hero 是白底 + 放射细线，此处形态完全不同） */
.hero__blk{
  position:absolute;top:-6%;right:-10%;width:64%;height:112%;z-index:0;
  background-image:var(--stair-w),linear-gradient(142deg,var(--yellow) 0%,var(--brand) 38%,var(--brand-d) 70%,var(--brand-x) 100%);
  background-repeat:repeat,no-repeat;
  background-size:48px 48px,100% 100%;
  clip-path:polygon(36% 0,100% 0,100% 100%,0 100%);
}
.hero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:40px;align-items:center;
}
.hero__tag{
  display:inline-block;margin-bottom:16px;padding:5px 14px;
  background:var(--ink);color:var(--yellow);border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.04em;
}
.hero h1{font-size:46px;letter-spacing:.01em;color:var(--ink)}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg,transparent 58%,var(--yellow) 58%);
  padding:0 2px;
}
.lead{
  margin-top:18px;max-width:560px;
  font-size:16.5px;color:var(--t2);line-height:1.9;
}
.hero__btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.hero__facts li{position:relative;padding-left:20px;font-size:14.5px;color:var(--t2)}
.hero__facts li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  background:var(--brand);border:2px solid var(--ink);border-radius:2px;
}
.hero__facts b{color:var(--ink)}
.hero__art{display:flex;justify-content:center}
.phone{
  width:100%;max-width:272px;padding:9px;background:var(--bg2);
  border-radius:20px;box-shadow:0 0 0 3px var(--ink),0 20px 44px rgba(22,19,15,.24);
}
.phone img{width:100%;height:auto;border-radius:13px}

/* ==========================================================================
   区块通用
   ========================================================================== */
.sec{padding:66px 0}
.sec--alt{background:var(--bg3)}
.sec--ink{background:var(--ink);color:#EFEAE3}
.sec--line{border-top:1px solid var(--line)}

.sec-head{max-width:820px;margin-bottom:34px}
.kicker{
  display:inline-block;margin-bottom:12px;padding:3px 12px;
  background:var(--yellow);color:var(--ink);border-radius:3px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
}
.sec-head h2{font-size:30px;color:var(--ink);letter-spacing:.01em}
.sec-head .sub{margin-top:12px;font-size:15px;color:var(--t2)}
.sec--ink .sec-head h2{color:#fff}
.sec--ink .sec-head .sub{color:#B8B0A4}
.sec--ink .kicker{background:var(--brand);color:#fff}

.prose p{margin-bottom:16px;color:var(--t2)}
.prose h3{margin-top:34px;margin-bottom:12px;font-size:20px;color:var(--ink)}
.prose h3:first-child{margin-top:0}
.prose strong{color:var(--ink)}
.prose ul{margin:0 0 16px;display:grid;gap:9px}
.prose ul li{position:relative;padding-left:22px;color:var(--t2)}
.prose ul li::before{
  content:"";position:absolute;left:2px;top:11px;width:9px;height:9px;
  background:var(--yellow);border:2px solid var(--ink);border-radius:2px;
}
.prose ol{margin:0 0 16px;display:grid;gap:12px;counter-reset:st}
.prose ol li{position:relative;padding-left:40px;color:var(--t2)}
.prose ol li::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:0;top:2px;width:26px;height:26px;
  display:grid;place-items:center;border-radius:4px;
  background:var(--ink);color:var(--yellow);
  font-family:'Russo One',sans-serif;font-size:13px;
}

/* ==========================================================================
   A6 主线：能力台阶（逐级升高）—— 与档 14 的纵向时间轴完全不同的组织方式
   ========================================================================== */
.stair{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;align-items:end;
}
.stair__i{
  position:relative;padding:20px 18px 20px;
  background:#1E1A16;border:1px solid #332C24;border-radius:var(--r);
}
.stair__i:nth-child(1){padding-top:20px}
.stair__i:nth-child(2){padding-top:42px}
.stair__i:nth-child(3){padding-top:64px}
.stair__i:nth-child(4){padding-top:86px}
.stair__i:nth-child(5){padding-top:108px}
.stair__i::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:5px;
  background:linear-gradient(90deg,var(--brand),var(--yellow));
  border-radius:2px;
}
.stair__n{
  display:block;margin-bottom:10px;
  font-family:'Russo One',sans-serif;font-size:26px;line-height:1;
  color:var(--yellow);
}
.stair__i h3{margin:0 0 8px;font-size:17px;color:#fff}
.stair__i p{margin:0 0 14px;font-size:13.5px;line-height:1.7;color:#B8B0A4}
.stair__tag{
  display:inline-block;padding:3px 10px;border-radius:3px;
  background:rgba(240,74,20,.22);color:#FFB08A;font-size:12px;
}
.stages__art{display:flex;justify-content:center;margin-top:40px}
.stages__art .phone{max-width:236px;box-shadow:0 0 0 3px var(--yellow),0 20px 44px rgba(0,0,0,.35)}

/* ==========================================================================
   画质与清晰度（D7 专门模块）
   ========================================================================== */
.qual{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:start}
.tiers{display:grid;gap:14px}
.tier{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  padding:18px 20px;background:var(--bg2);border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:var(--r);
}
.tier__k{
  font-family:'Russo One',sans-serif;font-size:15px;color:#fff;
  background:var(--ink);border-radius:4px;padding:3px 10px;height:fit-content;
}
.tier h3{margin:0 0 6px;font-size:17px;color:var(--ink)}
.tier p{margin:0;font-size:14.5px;color:var(--t2)}
.tier:nth-child(2){border-left-color:var(--yellow)}
.tier:nth-child(3){border-left-color:var(--ink)}
.qual__art .phone{max-width:268px;margin:0 auto}

/* 表格 */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px;max-width:100%;min-width:0}
.tbl{min-width:520px;font-size:14.5px}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{
  background:var(--ink);color:#fff;font-size:13.5px;letter-spacing:.03em;
  border-bottom:0;white-space:nowrap;
}
.tbl thead th:first-child{border-radius:var(--r) 0 0 0}
.tbl thead th:last-child{border-radius:0 var(--r) 0 0}
.tbl tbody tr:nth-child(even){background:var(--bg3)}
.tbl td:first-child{font-weight:700;color:var(--ink)}
.tbl-cap{margin:20px 0 8px;font-size:14.5px;color:var(--ink);font-weight:700}
.tbl__note{margin-top:12px;font-size:13.5px;color:var(--t3)}

/* 三档口径胶囊 */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.pill--ok{background:var(--brand-l);color:var(--brand-x)}
.pill--mid{background:var(--yellow-l);color:#7A5D00}
.pill--no{background:#EDE7DF;color:var(--t2)}

/* ==========================================================================
   迭代记录
   ========================================================================== */
.marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mark{
  padding:22px 20px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);
}
.mark__t{
  display:block;margin-bottom:10px;
  font-family:'Russo One',sans-serif;font-size:13px;color:var(--brand-d);
}
.mark h3{margin:0 0 8px;font-size:17px;color:var(--ink)}
.mark p{margin:0;font-size:14.5px;color:var(--t2)}

/* ==========================================================================
   预览栅格：4 张排 4 列 × 1 行（排 3 列会让第二行只剩一张、右侧空一片）
   ========================================================================== */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.shot{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.shot img{width:100%;height:auto}
.shot figcaption{padding:12px 14px;font-size:13.5px;color:var(--t2)}
.shot figcaption b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}

/* ==========================================================================
   读者反馈
   ========================================================================== */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.voice{
  padding:22px 22px 20px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);border-top:4px solid var(--yellow);
}
.voice p{margin:0 0 14px;font-size:15px;color:var(--t2)}
.voice p::before{content:"\201C";color:var(--brand);font-size:22px;line-height:0;vertical-align:-4px;margin-right:2px}
.voice p::after{content:"\201D";color:var(--brand);font-size:22px;line-height:0;vertical-align:-4px;margin-left:2px}
.voice cite{
  display:block;font-style:normal;font-size:13.5px;color:var(--t3);
}
.voice cite b{color:var(--ink);font-size:14px;margin-right:8px}
.voice__stars{margin-bottom:12px;color:#B94B1E;font-size:18px;letter-spacing:0}
.voice time{display:block;margin-top:8px;color:var(--t3);font-size:12px}

/* ==========================================================================
   常见问题
   ========================================================================== */
.faqs{display:grid;gap:12px}
details.qa{
  background:var(--bg2);border:1px solid var(--line);border-left:5px solid var(--brand);
  border-radius:var(--r);
}
details.qa[open]{border-left-color:var(--yellow);background:#FFFDF6}
details.qa summary{
  cursor:pointer;list-style:none;padding:16px 52px 16px 20px;position:relative;
  font-size:16px;font-weight:700;color:var(--ink);
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  background:var(--ink);color:var(--yellow);border-radius:4px;
  font-family:'Russo One',sans-serif;font-size:16px;
}
details.qa[open] summary::after{content:"\2013"}
.qa__b{padding:0 20px 18px;font-size:15px;color:var(--t2)}
.qa__b p{margin-bottom:10px}
.qa__b p:last-child{margin-bottom:0}

/* ==========================================================================
   内页入口卡
   ========================================================================== */
.nexts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.next{
  display:block;padding:26px 24px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r);
  border-right:6px solid var(--brand);
  transition:border-right-color .18s,transform .18s var(--ease);
}
.next:hover{border-right-color:var(--yellow);transform:translateX(-3px)}
.next__k{
  display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:3px;
  background:var(--ink);color:var(--yellow);font-size:12px;font-weight:700;
}
.next h3{margin:0 0 8px;font-size:19px;color:var(--ink)}
.next p{margin:0;font-size:14.5px;color:var(--t2)}
.next__go{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--brand-d)}

/* ==========================================================================
   CTA 与页脚
   ========================================================================== */
.cta{
  position:relative;overflow:hidden;background:var(--ink);color:#EFEAE3;
  padding:58px 0;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--stair-w);
}
.cta__in{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.cta h2{font-size:28px;color:#fff}
.cta p{margin-top:10px;font-size:15px;color:#B8B0A4;max-width:640px}
.android-icon{width:20px;height:20px;flex:0 0 auto}

.ft{background-color:var(--ink2);color:#B8B2A8;padding:48px 0 30px;
  background-image:linear-gradient(90deg,var(--brand) 0 50%,var(--yellow) 50%);
  background-repeat:no-repeat;background-position:left top;background-size:100% 8px}
.ft__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:30px}
.ft__brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ft__brand img{width:34px;height:34px;box-shadow:0 0 0 1px #2C2822}
.ft__brand b{font-size:16px;color:#fff}
.ft p{font-size:13.5px;line-height:1.85}
.ft h3{margin:0 0 12px;font-size:14px;color:#fff;letter-spacing:.04em}
.ft__links{display:grid;gap:8px}
.ft__links a{font-size:13.5px;color:#B8B2A8}
.ft__links a:hover{color:var(--yellow)}
.ft__dsc{
  margin-top:30px;padding-top:18px;border-top:1px solid #2C2822;
  font-size:13px;color:#8E877C;
}
.ft__dsc strong{color:#CFC7BB;font-weight:700}

/* 内页横幅 */
.page-hero{
  position:relative;overflow:hidden;padding:44px 0 40px;
  background-image:
    linear-gradient(90deg,var(--brand) 0 33.34%,var(--yellow) 33.34% 66.67%,var(--ink) 66.67%),
    linear-gradient(150deg,#FFFFFF,#FFF8F2 52%,#FFF1E4);
  background-repeat:no-repeat,no-repeat;
  background-position:left bottom,center;
  background-size:100% 5px,100% 100%;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--stair);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
          mask-image:linear-gradient(180deg,#000,transparent 82%);
}
.page-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.crumb{font-size:13.5px;color:var(--t3);margin-bottom:12px}
.crumb a{color:var(--t2)}
.page-hero h1{font-size:36px;color:var(--ink)}
.page-hero .lead{margin-top:14px;font-size:16px}
.page-hero__art{width:180px}
.page-hero__art .phone{max-width:180px;padding:7px;border-radius:16px}
.page-hero__art .phone img{border-radius:10px}

/* 双栏内容 */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.side{
  position:sticky;top:94px;padding:22px 20px;
  background:var(--bg2);border:1px solid var(--line);border-top:4px solid var(--brand);
  border-radius:var(--r);
}
.side h2{font-size:17px;color:var(--ink);margin-bottom:14px}
.side ol{display:grid;gap:10px;counter-reset:sd}
.side ol li{position:relative;padding-left:30px;font-size:14.5px;color:var(--t2)}
.side ol li::before{
  counter-increment:sd;content:counter(sd);
  position:absolute;left:0;top:1px;width:21px;height:21px;
  display:grid;place-items:center;border-radius:3px;
  background:var(--ink);color:var(--yellow);
  font-family:'Russo One',sans-serif;font-size:11.5px;
}

/* 提示块 */
.tip{
  margin:22px 0;padding:16px 18px;border-radius:var(--r);
  background:var(--yellow-l);border-left:5px solid var(--yellow);
  font-size:15px;color:#5A4A12;
}
.tip b{color:var(--ink)}

/* 图文并排 */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
.split--rev .split__art{order:-1}
.split__art .phone{max-width:250px;margin:0 auto}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:980px){
  .hero{padding:40px 0 48px}
  /* 窄屏堆叠后手机图在上、文字在下 —— 色块必须跟着挪到顶部，否则会压到导语与事实条上 */
  .hero__blk{top:-4%;bottom:auto;right:0;width:100%;height:62%;
    clip-path:polygon(0 0,100% 0,100% 74%,0 100%)}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero h1{font-size:36px}
  .hero__art{order:-1}
  .phone{max-width:224px}
  .sec{padding:52px 0}
  .sec-head h2{font-size:25px}
  .cols{grid-template-columns:minmax(0,1fr);gap:32px}
  .side{position:static}
  .qual{grid-template-columns:minmax(0,1fr);gap:30px}
  .marks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voices{grid-template-columns:minmax(0,1fr)}
  .nexts{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split--rev .split__art{order:0}
  .ft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .stair{gap:10px}
  .stair__i{padding:16px 14px}
  .stair__i:nth-child(1){padding-top:16px}
  .stair__i:nth-child(2){padding-top:30px}
  .stair__i:nth-child(3){padding-top:44px}
  .stair__i:nth-child(4){padding-top:58px}
  .stair__i:nth-child(5){padding-top:72px}
  .stair__n{font-size:22px}
  .stair__i h3{font-size:15.5px}
  .stair__i p{font-size:12.5px}
  .page-hero__in{grid-template-columns:minmax(0,1fr)}
  .page-hero__art{width:150px}
  .page-hero h1{font-size:29px}
}

@media (max-width:620px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  section[id],main [id]{scroll-margin-top:118px}

  .hd__bar{flex-wrap:wrap;gap:8px 12px;padding:9px 0}
  .brand{order:1}
  .hd__cta{order:2;margin-left:auto}
  .hd__links{order:3;flex-basis:100%;margin-left:0;gap:4px;overflow-x:auto}
  .hd__links a{padding:5px 9px;font-size:13px;white-space:nowrap}
  .brand img{width:32px;height:32px}
  .brand b{font-size:16px}

  .hero{padding:28px 0 38px}
  .hero__blk{top:0;height:56%;clip-path:polygon(0 0,100% 0,100% 76%,0 100%)}
  .hero h1{font-size:29px}
  .lead{font-size:15.5px;line-height:1.85}
  .hero__btns{gap:12px}
  .hero__btns .btn,.hero__btns .btn2,.cta .btn{width:100%;justify-content:center}
  .btn--sm{width:auto}
  .hero__facts{gap:8px 18px;margin-top:20px}
  .hero__facts li{font-size:13.5px}
  .phone{max-width:198px}

  .sec{padding:42px 0}
  .sec-head{margin-bottom:26px}
  .sec-head h2{font-size:22px}
  .sec-head .sub{font-size:14.5px}

  /* 台阶在窄屏转为左侧逐级缩进，阶梯感保留 */
  .stair{grid-template-columns:minmax(0,1fr);gap:12px}
  .stair__i,
  .stair__i:nth-child(1){padding:16px 16px 16px 18px}
  .stair__i:nth-child(2){margin-left:10px}
  .stair__i:nth-child(3){margin-left:20px}
  .stair__i:nth-child(4){margin-left:30px}
  .stair__i:nth-child(5){margin-left:40px}

  .marks{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .shot figcaption{padding:10px 12px;font-size:12.5px}
  .shot figcaption b{font-size:13.5px}
  .tier{padding:16px}
  .next{padding:20px 18px}
  .cta{padding:44px 0}
  .cta h2{font-size:23px}
  .cta__in{gap:20px}
  .page-hero{padding:30px 0 28px}
  .page-hero h1{font-size:24px}
  .page-hero__art{display:none}
  .ft{padding:32px 0 24px}
  .ft__grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .tbl{min-width:440px}
  .prose h3{font-size:18px}
  details.qa summary{font-size:15px;padding:14px 48px 14px 16px}
}