/* ============================================================
   VETUSTAR AI 应用导航 · 深蓝夜空（参考图配色）
   深蓝黑底 + 径向光晕层次，亮青强调 + 金色点缀，米白文字，全宽铺满
   ============================================================ */

:root{
  --bg: #101722;               /* 深蓝黑页面底 */
  --bg-glow-1: #1d2b3f;        /* 右上光晕 */
  --bg-glow-2: #16202e;        /* 底部微光 */
  --bg-panel: #141d2a;         /* 顶栏/页脚面板 */
  --card: #253449;             /* 卡片（明显浮起）*/
  --card-hover: #2d3f58;
  --line: #3b4d66;
  --line-strong: #4d6484;
  --text: #ffffff;             /* 米白主文字 */
  --text-2: #dfe6ee;           /* 描述 */
  --text-3: #a8b6c6;           /* 辅助 */
  --accent: #5bc2e7;           /* 亮青蓝（主强调）*/
  --accent-dim: rgba(91,194,231,.13);
  --gold: #d4b45a;             /* 金色（次强调）*/
  --ok: #4ade9c;
  --ok-bg: rgba(74,222,156,.13);
  --down: #f88a8a;
  --down-bg: rgba(248,138,138,.12);
  --pending: #6db6f5;
  --pending-bg: rgba(109,182,245,.12);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font-ui: -apple-system, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1200px 560px at 82% -12%, var(--bg-glow-1), transparent 62%),
    radial-gradient(1000px 480px at 8% 108%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection{background: rgba(91,194,231,.3);color:#fff}

/* ── 顶栏 ─────────────────────────────── */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px clamp(20px,4vw,56px);
  border-bottom:1px solid var(--line);
  background:rgba(20,29,42,.82);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;gap:16px;align-items:center;min-width:0}
.logo{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--gold);
  background:linear-gradient(145deg, rgba(212,180,90,.14), rgba(91,194,231,.10));
  border:1px solid rgba(212,180,90,.45);
  box-shadow: inset 0 1px 0 rgba(240,237,228,.08);
}
.topbar h1{font-size:23px;font-weight:700;letter-spacing:.02em}
.sub{font-size:13px;color:var(--text-3);margin-top:2px;display:flex;align-items:center;flex-wrap:wrap}
.env-badge{
  border:1px solid rgba(109,182,245,.45);color:var(--pending);
  background:var(--pending-bg);
  border-radius:999px;padding:1px 10px;font-size:12px;margin-left:8px;white-space:nowrap;
}
.meta{display:flex;gap:14px;align-items:center;flex-shrink:0}
.last-check{
  font-size:13px;color:var(--text-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.refresh-btn{
  background:var(--card);border:1px solid var(--line-strong);color:var(--text);
  border-radius:10px;padding:9px 18px;cursor:pointer;font-size:14px;font-family:inherit;
  transition: border-color .16s var(--ease-out), color .16s var(--ease-out),
              background-color .16s var(--ease-out);
}
.refresh-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--card-hover)}
.refresh-btn:active{transform:scale(.97)}
.refresh-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 分组与卡片网格（全宽铺满） ─────────── */
.portal{
  padding:clamp(24px,4vw,48px) clamp(20px,4vw,56px) 64px;
  display:grid;gap:42px;
  width:100%;flex:1;
}
.group-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.group-head .gicon{font-size:21px;line-height:1}
.group-head h2{
  font-size:15px;font-weight:600;color:var(--text-2);letter-spacing:.1em;
}
.group-head .grule{
  flex:1;height:1px;
  background:linear-gradient(90deg, var(--line-strong), transparent);
}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid.n6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ── 应用卡片 ─────────────────────────── */
.card{
  --ac:#5BC2E7;
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 24px 20px;
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
  overflow:hidden;
  box-shadow: 0 2px 14px rgba(5,10,18,.55),
             inset 0 1px 0 rgba(240,237,228,.05);
}
/* 顶部亮青发丝线（hover 点亮） */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--ac), transparent);
  opacity:.35;
  transition: opacity .18s var(--ease-out);
}
.card.pending-card{cursor:default;opacity:.62}
.card.pending-card::before{opacity:0}
.card.pending-card:hover{opacity:.85}

.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card-idfa{
  width:52px;height:52px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
  color:var(--ac);
  background:color-mix(in srgb, var(--ac) 14%, #1A2436);
  border:1px solid color-mix(in srgb, var(--ac) 45%, #26364A);
  box-shadow: inset 0 1px 0 rgba(240,237,228,.06);
}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;margin-top:4px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:4px 12px;border-radius:999px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.status-pill .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-pill.online{color:var(--ok);background:var(--ok-bg);border:1px solid rgba(74,222,156,.35)}
.status-pill.online .dot{background:var(--ok)}
.status-pill.offline{color:var(--down);background:var(--down-bg);border:1px solid rgba(248,138,138,.35)}
.status-pill.offline .dot{background:var(--down)}
.status-pill.pending{color:var(--pending);background:var(--pending-bg);border:1px solid rgba(109,182,245,.35)}
.status-pill.pending .dot{background:var(--pending)}

.card h3{font-size:18px;font-weight:650;letter-spacing:.01em}
.card .desc{font-size:14px;color:var(--text-2);line-height:1.65;flex:1}
.card-foot{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding-top:14px;border-top:1px solid var(--line);
}
.tag{
  font-size:12.5px;color:var(--text-2);
  background:#31435c;border:1px solid var(--line-strong);
  border-radius:7px;padding:2px 10px;white-space:nowrap;
}
.tag.internal{color:var(--gold);border-color:rgba(212,180,90,.42);background:rgba(212,180,90,.08)}
.card-arrow{
  margin-left:auto;color:var(--text-3);font-size:18px;line-height:1;
  transition: color .16s var(--ease-out), transform .16s var(--ease-out);
}

/* hover 反馈（仅精确指针设备） */
@media (hover:hover) and (pointer:fine){
  a.card:hover{
    background:var(--card-hover);
    border-color:rgba(91,194,231,.55);
    transform:translateY(-3px);
    box-shadow:0 14px 36px -12px rgba(2,5,10,.85),
               0 4px 14px -6px rgba(91,194,231,.16),
               inset 0 1px 0 rgba(240,237,228,.06);
  }
  a.card:hover::before{opacity:1}
  a.card:hover .card-arrow{color:var(--accent);transform:translateX(3px)}
}
a.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── 页脚 ─────────────────────────────── */
.footer{
  padding:26px;text-align:center;color:var(--text-3);font-size:13px;
  border-top:1px solid var(--line);background:rgba(20,29,42,.9);
}
.footer .lg{font-size:11px}
.footer .lg.online{color:var(--ok)}
.footer .lg.offline{color:var(--down)}
.footer .lg.pending{color:var(--pending)}
.loading{color:var(--text-3);text-align:center;padding:80px 0;grid-column:1/-1;font-size:15px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

@media(max-width:720px){
  .topbar{flex-direction:column;align-items:flex-start;padding:18px 20px}
  .meta{align-self:stretch;justify-content:space-between}
  .last-check{font-size:12px;overflow:hidden;text-overflow:ellipsis}
  .portal{padding:24px 20px 48px;gap:34px}
  .grid{grid-template-columns:1fr;gap:16px}
  .card{padding:20px 18px 16px}
}

/* ============================================================
   应用详情页 v5 · 撞色饱满版
   布局：Hero(紧凑) → 功能特色(首屏主体/五色撞色大卡) → 流程 → 视频(置底) → CTA
   ============================================================ */
.back-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  font-size:20px;color:var(--text-2);text-decoration:none;
  background:var(--card);border:1px solid var(--line);
  transition: border-color .16s var(--ease-out), color .16s var(--ease-out);
}
.back-link:hover{border-color:var(--accent);color:var(--accent)}
.open-btn{
  display:inline-block;text-decoration:none;
  background:var(--clash-1);color:#04202e;font-weight:800;
  border-radius:10px;padding:10px 22px;font-size:14.5px;
  box-shadow: 0 4px 18px -6px rgba(91,194,231,.55);
  transition: filter .16s var(--ease-out), transform .16s var(--ease-out);
}
.open-btn:hover{filter:brightness(1.12)}
.open-btn:active{transform:scale(.97)}
.open-big{padding:15px 38px;font-size:17px;border-radius:12px}

/* ════════════════════════════════════════════
   详情页 · UI Spec v8
   颜色体系：深蓝黑 #0D141E / 白 #F4F7FB / 蓝 #45C7FF / 橙 #FFB547
   字级：主标题 48/700 · 模块标题 32/700 · 卡片标题 20/700 · 正文 14/400 · 标签 13-14/600
   ════════════════════════════════════════════ */
.app-body{background:#0D141E}

.detail-page{
  padding:0 0 72px;
  display:grid;gap:0;align-content:start;
  width:100%;flex:1;
  --card:#172232; --line:#26364A; --line-strong:#2A4057;
  --text:#F4F7FB; --text-2:#8291A5; --text-3:#8291A5;
  --accent:#45C7FF; --gold:#FFB547; --ok:#35D69A;
}

/* ── 首屏：标题 → 痛点 → 转折 ↓ → 解法，居中一页 ── */
/* ── 区块基础（供视频等区块用；痛点/解法区自带覆盖） ── */
.detail-section{
  padding:clamp(22px,3.2vh,36px) clamp(20px,3vw,48px);
  display:grid;gap:18px;
}
.detail-section .sec-title{
  justify-self:center;text-align:center;margin:0;
  font-size:clamp(22px,2.2vw,32px);font-weight:700;color:#F4F7FB;
  padding:0;border-radius:0;background:none;box-shadow:none;letter-spacing:.01em;
}

.first-page{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.2vh,26px);
  padding-bottom:1vh;
}

/* ── Hero：居中标题 ── */
.hero{
  position:relative;
  display:grid;justify-items:center;text-align:center;gap:clamp(10px,1.6vh,16px);
  padding:clamp(20px,3vh,38px) clamp(20px,3vw,48px) 0;
}
.hero-back{
  position:absolute;top:6px;left:clamp(10px,1.5vw,20px);
  font-size:13.5px;font-weight:600;color:#8291A5;text-decoration:none;
  padding:6px 10px;border-radius:8px;
  transition:color .15s var(--ease-out);
}
.hero-back:hover{color:#45C7FF}
.hero-trow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-title{
  font-size:clamp(30px,3.4vw,48px);font-weight:700;letter-spacing:.01em;
  line-height:1.15;text-wrap:balance;margin:0;
}
.hero-title::after{content:".";color:#FFB547}
.hero-tagline{
  font-size:clamp(14px,1.2vw,18px);color:#8291A5;font-weight:400;
  line-height:1.6;max-width:52em;margin:0;
}
.hero-cta{
  display:inline-flex;align-items:center;white-space:nowrap;margin-top:2px;
  padding:12px 34px;border-radius:10px;text-decoration:none;
  font-size:16px;font-weight:700;
  background:#45C7FF;color:#04202E;
  box-shadow:0 6px 18px -6px rgba(69,199,255,.5);
  transition:filter .15s var(--ease-out), transform .15s var(--ease-out);
}
.hero-cta:hover{filter:brightness(1.08)}
.hero-cta:active{transform:scale(.97)}

/* ── 模块标题：悬空无背板 ── */
.mod-title{
  margin:0;text-align:center;justify-self:center;
  font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:.01em;
  color:#F4F7FB;line-height:1.25;text-wrap:balance;
}
.mark-orange{color:#FFB547;font-weight:800}
.mark-blue{color:#45C7FF}

/* ── 痛点四卡：暖橙警示底 + 卡片斜置错落（问题=乱） ── */
.pain-section{
  display:grid;justify-items:center;gap:clamp(14px,2.2vh,24px);
  background:#331D0B;
  border:1px solid rgba(255,181,71,.38);
  border-top:3px solid #FFB547;
  border-radius:20px;
  padding:clamp(20px,2.6vh,30px) clamp(18px,2vw,28px) calc(clamp(18px,2.6vh,28px) + 16px);
  width:min(100%,1360px);
  margin:0 auto;
  box-shadow:inset 0 2px 20px rgba(0,0,0,.4), 0 12px 36px -14px rgba(255,181,71,.22);
}
.pain-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.2vw,22px);
  width:min(100%,1288px);
}
.pain-card{
  background:#1B222C;
  border:1px solid #3A4756;
  border-left:3px solid #FFB547;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  padding:clamp(14px,1.6vh,18px) clamp(16px,1.2vw,20px);
  display:flex;flex-direction:column;gap:5px;
  min-height:clamp(88px,11.5vh,108px);
  transform:rotate(-1.4deg);
  transition:transform .18s var(--ease-out), border-color .18s var(--ease-out);
}
.pain-card:nth-child(2){transform:translateY(14px) rotate(1.1deg)}
.pain-card:nth-child(3){transform:translateY(-9px) rotate(-.7deg)}
.pain-card:nth-child(4){transform:translateY(10px) rotate(1.4deg)}
.pain-card:hover{transform:rotate(0deg) translateY(-3px);border-color:#4A5A6C;border-left-color:#FFB547}
.pain-no{font-size:14px;font-weight:500;color:#FFB547;line-height:1}
.pain-t{font-size:clamp(17px,1.25vw,20px);font-weight:700;color:#F4F7FB;line-height:1.3;margin:0}
.pain-d{font-size:14px;font-weight:400;color:#98A5B5;line-height:1.5;margin:0}

/* ── 转折箭头：蓝色圆徽章 ── */
.turn-arrow{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#3CCBFF;font-size:20px;line-height:1;
  border:1px solid rgba(60,203,255,.45);
  background:rgba(60,203,255,.08);
  align-self:center;
}

/* ── 解法：三词流程 + 四个 ✓ 卡（与痛点卡同宽同高，两排四列对齐） ── */
.answer-section{display:grid;justify-items:center;gap:clamp(12px,1.8vh,20px);padding:0 clamp(20px,3vw,48px)}
.pipeline{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);flex-wrap:wrap;justify-content:center}
.pl-word{font-size:clamp(20px,1.9vw,28px);font-weight:700;color:#F4F7FB;line-height:1.2}
.pl-word.is-out{color:#45C7FF}
.pl-arrow{font-size:clamp(18px,1.6vw,24px);color:#3CCBFF;font-weight:400}
.answer-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.2vw,20px);
  width:min(100%,1288px);
}
.answer-item{
  display:flex;align-items:center;gap:12px;
  background:#182638;border:1px solid #2A4057;border-left:3px solid #45C7FF;border-radius:14px;
  min-height:clamp(88px,11.5vh,108px);padding:14px clamp(16px,1.2vw,20px);
  font-size:clamp(15px,1.15vw,17px);font-weight:600;color:#E9F0F7;line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.answer-item.is-lock{border-left-color:#35D69A}
.answer-item.is-wide{grid-column:1/-1}
.ans-check{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;color:#06251A;background:#35D69A;
}
.ans-check svg{display:block}
.lock-ico{flex-shrink:0;width:28px;text-align:center;font-size:18px;line-height:1}

/* ── 移动端"请在电脑端打开"提示条 ── */
.desktop-only-tip{
  position:fixed;left:50%;top:16%;transform:translate(-50%,-10px);z-index:100;
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  background:#172232;border:1px solid #2A4057;border-left:3px solid #45C7FF;border-radius:12px;
  padding:16px 28px;box-shadow:0 12px 36px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.desktop-only-tip.show{opacity:1;transform:translate(-50%,0)}
.desktop-only-tip .t1{margin:0;font-size:16px;font-weight:700;color:#F4F7FB}
.desktop-only-tip .t2{margin:0;font-size:13px;color:#8291A5}

/* ── 滚出首屏后右上角浮现的小号常驻按钮 ── */
.float-open{
  position:fixed;top:14px;right:clamp(14px,2.5vw,28px);z-index:60;
  padding:9px 20px;border-radius:10px;text-decoration:none;
  font-size:14px;font-weight:700;
  background:#45C7FF;color:#04202E;
  box-shadow:0 6px 18px -6px rgba(69,199,255,.55);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.float-open.show{opacity:1;pointer-events:auto;transform:none}

/* ── 灵感库：类别瓦片墙 + 灯箱 ── */
.gallery-section{gap:20px}
.gallery-head{display:grid;justify-items:center;gap:6px}
.gallery-sub{margin:0;font-size:14px;color:#8291A5}

.ins-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:14px;width:min(100%,1360px);margin:0 auto;
}
.ins-tile{
  position:relative;aspect-ratio:4/5;
  border:1px solid #26364A;border-radius:14px;overflow:hidden;
  padding:0;cursor:pointer;background:#172232;
  box-shadow:0 8px 24px rgba(5,10,18,.55);
  transition:transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.ins-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s var(--ease-out);
}
.ins-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,12,18,0) 42%, rgba(8,12,18,.82) 100%);
}
.ins-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(69,199,255,.6);
  box-shadow:0 16px 36px -10px rgba(5,10,18,.8), 0 4px 18px -6px rgba(69,199,255,.35);
}
.ins-tile:hover img{transform:scale(1.06)}
.ins-tile-name{
  position:absolute;left:14px;bottom:12px;z-index:1;
  font-size:18px;font-weight:800;color:#F4F7FB;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.ins-tile-n{
  position:absolute;right:12px;bottom:14px;z-index:1;
  font-size:12px;font-weight:600;color:#B8C6D6;
}

.lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,12,18,.92);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease-out);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{
  max-width:88vw;max-height:84vh;border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid #2A4057;
  background:rgba(23,34,50,.9);color:#F4F7FB;font-size:26px;cursor:pointer;
}
.lb-btn:hover{border-color:#45C7FF;color:#45C7FF}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-close{
  position:absolute;top:18px;right:22px;
  width:44px;height:44px;border-radius:50%;border:1px solid #2A4057;
  background:rgba(23,34,50,.9);color:#F4F7FB;font-size:22px;cursor:pointer;
}
.lb-close:hover{border-color:#FF6B6B;color:#FF6B6B}
.lb-badge{
  position:absolute;top:20px;left:22px;
  font-size:12.5px;font-weight:700;color:#E9F0F7;
  background:rgba(23,34,50,.85);border:1px solid #2A4057;
  border-radius:999px;padding:5px 14px;
}
.lb-count{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:700;color:#F4F7FB;
  background:rgba(23,34,50,.85);border:1px solid #2A4057;
  border-radius:999px;padding:4px 14px;
}
@media(max-width:1080px){.deck{width:min(80vw,560px)}}
@media(max-width:640px){.deck{width:88vw}}

/* ── 第二屏：演示视频（居中单列） ── */
.video-last{
  border-top:1px solid #26364A;
  justify-items:center;
  padding-top:clamp(28px,4.5vh,52px);
}
.video-box{
  width:min(100%,1320px);
  background:#172232;border:1px solid #26364A;border-radius:16px;
  padding:12px;display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.video-box video{display:block;width:100%;flex:1;min-height:0;border-radius:12px;background:#000;aspect-ratio:16/9}
.video-note{font-size:13px;color:#8291A5;margin-top:10px;text-align:center}
.video-empty{
  aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  color:#8291A5;font-size:15px;
}
.pending-note{font-size:13.5px;color:var(--pending);line-height:1.6;padding-top:6px;justify-self:center;text-align:center}

/* ── 响应式 ── */
@media(max-width:1560px){
  .grid.n5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
  .grid,.grid.n5,.grid.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .answer-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pain-card,.pain-card:nth-child(2),.pain-card:nth-child(3),.pain-card:nth-child(4){transform:none}
  .pain-section{padding-bottom:clamp(18px,2.6vh,28px)}
}
@media(max-width:640px){
  .grid,.grid.n5,.grid.n6{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pain-grid{grid-template-columns:1fr}
  .pain-card{transform:none}
  .answer-list{grid-template-columns:1fr}
  .first-page{min-height:auto}
  .hero-trow .status-pill{display:none}
}

/* ── 功能版图（详情页可选段：模块卡片墙） ── */
.modules-section{max-width:1080px;margin:0 auto;width:100%}
.modules-sub{
  justify-self:center;text-align:center;margin:10px 0 0;
  font-size:14px;color:#8291A5;
}
.mod-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;margin-top:22px;width:100%;
}
.mod-card{
  display:flex;flex-direction:column;gap:8px;
  background:#182638;border:1px solid #2A4057;border-top:3px solid #45C7FF;
  border-radius:14px;padding:18px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.mod-card:hover{transform:translateY(-3px);border-color:#3B5372;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.mod-ico{font-size:24px;line-height:1}
.mod-t{margin:0;font-size:17px;font-weight:700;color:#F4F7FB;line-height:1.3}
.mod-d{margin:0;font-size:13.5px;color:#A8B6C6;line-height:1.65}