/* 浅色商务风：层级清晰、留白充足，不用花哨特效 */
  :root {
    --主色: #2f6bff;
    --主色浅: #eaf1ff;
    --文字: #1f2d3d;
    --次文字: #5a6480;
    --弱文字: #98a2b3;
    --描边: #e6eaf3;
    --底: #f6f8fc;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: #fff;
    color: var(--文字);
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
  }
  a { color: var(--主色); text-decoration: none; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

  /* 顶栏 */
  .nav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--描边);
  }
  .nav .inner { display: flex; align-items: center; gap: 28px; height: 68px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
  /* 品牌 LOGO：用服务端 /static 下的真图（static/logo.png 方形、static/logo-wide.png 长条） */
  .brand img { height: 32px; width: auto; display: block; }
  .brand .logo-text { white-space: nowrap; }
  .nav .menu { display: flex; gap: 22px; margin-left: auto; }
  .nav .menu a { color: var(--次文字); font-size: 14.5px; }
  .nav .menu a:hover { color: var(--主色); }
  .nav .cta {
    padding: 7px 16px; border-radius: 8px; background: var(--主色); color: #fff; font-size: 14px;
  }
  .nav .cta:hover { background: #245bdd; }

  /* 首屏：第一眼就露出「两大产品」——品牌+标题之后，紧跟工具箱 / IDE 两张产品预览卡 */
  /* 内边距收紧（原 76/64）：留出高度预算，保证 1280 视口下不用滚动就能看到两张产品卡 */
  .hero { padding: 44px 0 40px; background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%); }
  /* 首屏品牌长条 LOGO */
  .hero-logo { display: block; height: 40px; width: auto; margin-bottom: 12px; }
  /* 首屏文字块限宽：标题与说明不铺满整屏，视线自然落到下方的产品卡上 */
  .hero-文 { max-width: 780px; }
  .hero h1 { margin: 0 0 12px; font-size: 34px; line-height: 1.28; letter-spacing: 0.5px; }
  .hero .slogan {
    display: inline-block; margin-bottom: 14px; padding: 4px 12px;
    background: var(--主色浅); color: #245bdd; border-radius: 999px; font-size: 13px;
    /* 标语变长了：窄屏时允许换行，且行距撑开避免两行挤在一起 */
    max-width: 100%; line-height: 1.8;
  }
  /* 这里只作用于首屏正文段落；产品卡里的说明另有 .hero-卡文 p，避免被这条的限宽/字号带上 */
  .hero-文 p { max-width: 720px; margin: 0; color: var(--次文字); font-size: 15px; }

  /* ============ 首屏两大产品入口带（工具箱 / IDE 各一张预览卡） ============ */
  /* minmax(0, …) 而不是裸 fr：图片固有宽度大，裸 fr 的 min-content 会把列撑爆导致横向溢出 */
  .hero-产品 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
  .hero-卡 {
    display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: center;
    background: #fff; border: 1px solid var(--描边); border-radius: 14px; padding: 14px;
    min-width: 0; /* 网格子项默认 min-width:auto 会被内容撑宽，这里必须显式允许压缩 */
  }
  /* 卡内截图：固定高度 + max-height 双封顶，绝不做「按整栏宽等比放大」
     —— 上次页面畸形正是截图被整栏宽撑到几百像素高，所以这里先把高度钉死 */
  .hero-卡图 {
    display: block; width: 100%; height: 168px; max-height: 168px;
    object-fit: cover; border-radius: 10px; background: var(--底);
    border: 1px solid var(--描边); cursor: zoom-in; /* 点一下看原图（复用已有的原图层） */
  }
  .hero-卡图:hover { border-color: #c6e2ff; }
  .hero-卡文 { min-width: 0; }
  .hero-卡文 h2 { margin: 0 0 6px; font-size: 18px; }
  .hero-卡文 p { margin: 0 0 12px; color: var(--次文字); font-size: 13px; line-height: 1.6; }
  /* 卡内按钮比全局 .btn 略小，免得卡片被按钮撑高 */
  .hero-卡文 .btn { padding: 9px 18px; font-size: 14px; }

  .hero .btns { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; border-radius: 10px; font-size: 16px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
  }
  .btn-主 { background: var(--主色); color: #fff; }
  .btn-主:hover { background: #245bdd; }
  .btn-主[disabled] { background: #c9d3e6; cursor: not-allowed; }
  .btn-次 { background: #fff; color: var(--文字); border-color: var(--描边); font-weight: 500; }
  .btn-次:hover { border-color: #c9d3e6; }
  .dl-meta { color: var(--弱文字); font-size: 13px; }

  /* 通用区块 */
  section { padding: 62px 0; }
  section.alt { background: var(--底); }
  .sec-head { margin-bottom: 30px; }
  .sec-head h2 { margin: 0 0 8px; font-size: 26px; }
  .sec-head p { margin: 0; color: var(--次文字); }
  .grid { display: grid; gap: 16px; }
  .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .card {
    background: #fff; border: 1px solid var(--描边); border-radius: 12px; padding: 22px;
  }
  .card h3 { margin: 0 0 8px; font-size: 17px; }
  .card p { margin: 0; color: var(--次文字); font-size: 14px; }
  .card .tag {
    display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 6px;
    background: var(--主色浅); color: #245bdd; font-size: 12px;
  }

  /* 开发者 */
  .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; }
  .steps { margin: 0; padding: 0; list-style: none; }
  .steps li { position: relative; padding: 0 0 18px 30px; color: var(--次文字); }
  .steps li::before {
    content: ""; position: absolute; left: 6px; top: 9px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--主色);
  }
  .steps li::after {
    content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 1px; background: var(--描边);
  }
  .steps li:last-child::after { display: none; }
  .steps b { color: var(--文字); }

  /* 评分榜（官网首页展示真实应用：评分 / 评价内容 / 使用教程） */
  .show-head { text-align: center; margin: 46px 0 18px; }
  .show-head h3 { margin: 0 0 6px; font-size: 22px; }
  .show-head p { margin: 0; color: var(--次文字); font-size: 14px; }
  .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .app-card {
    display: flex; flex-direction: column; gap: 10px;
    background: #fff; border: 1px solid var(--描边); border-radius: 12px; padding: 16px;
  }
  .app-head { display: flex; align-items: center; gap: 10px; }
  .app-icon { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; border: 1px solid var(--描边); }
  .app-icon-字 {
    width: 42px; height: 42px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--主色浅); color: var(--主色); font-weight: 700; font-size: 18px;
  }
  .app-name { font-weight: 700; font-size: 15px; }
  .app-dev { color: var(--弱文字); font-size: 12px; }
  .app-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--次文字); }
  .app-star { color: #ff9f1c; letter-spacing: 1px; }
  .app-desc {
    margin: 0; color: var(--次文字); font-size: 13px; line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .app-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .app-tags span {
    padding: 1px 8px; border-radius: 999px; font-size: 12px;
    background: var(--底); border: 1px solid var(--描边); color: var(--次文字);
  }
  /* 评价内容：让访客看到"别人用了觉得怎么样" */
  .app-rv { border-top: 1px dashed var(--描边); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
  .app-rv .rv { font-size: 12px; color: var(--次文字); line-height: 1.6; }
  .app-rv .rv b { color: #ff9f1c; font-weight: 400; }
  .app-rv .rv .who { color: var(--弱文字); }
  .app-foot { margin-top: auto; display: flex; gap: 8px; }
  .btn-mini {
    padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: inherit;
    border: 1px solid #c6dcff; background: var(--主色浅); color: #245bdd;
  }
  .btn-mini:hover { background: #dbe7ff; }
  .show-more { text-align: center; margin-top: 18px; }
  /* 教程弹窗（视频直接播、word 文档下载看） */
  .遮罩 {
    position: fixed; inset: 0; z-index: 50; display: none;
    background: rgba(17, 24, 39, 0.55); padding: 40px 16px; overflow: auto;
  }
  .遮罩.开 { display: flex; align-items: flex-start; justify-content: center; }
  .弹层 { width: 100%; max-width: 760px; background: #fff; border-radius: 14px; padding: 18px; }
  .弹层 .头, .灯箱 .头 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .弹层 .头 b, .灯箱 .头 b { font-size: 16px; }
  .弹层 .关, .灯箱 .关 { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--弱文字); }
  .弹层 .关:hover, .灯箱 .关:hover { color: var(--文字); }
  .视频 { width: 100%; max-height: 66vh; background: #000; border-radius: 10px; }
  .教程项 {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--描边); border-radius: 10px; cursor: pointer;
  }
  .教程项:hover { border-color: #c6e2ff; background: #f5f9ff; }
  .教程项 .n { flex: 1; min-width: 0; font-size: 14px; }
  .教程项 .d { color: var(--弱文字); font-size: 12px; white-space: nowrap; }
  /* 应用截图：卡片里的缩略图（点开看大图）+ 放大用的灯箱 */
  .shots { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
  .shots .shot {
    flex: 1 1 0; min-width: 0; height: 62px; object-fit: cover; cursor: zoom-in;
    background: var(--底); border: 1px solid var(--描边); border-radius: 6px;
  }
  .shots .shot:hover { border-color: #c6e2ff; }
  .shot-more {
    flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 12px;
    background: var(--底); border: 1px solid var(--描边); color: var(--次文字);
  }
  .灯箱 { width: 100%; max-width: 1040px; background: #fff; border-radius: 14px; padding: 18px; }
  .大图区 { display: flex; align-items: center; gap: 10px; }
  .大图 {
    flex: 1; min-width: 0; max-height: 72vh; object-fit: contain;
    background: var(--底); border-radius: 10px;
  }
  .翻 {
    flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-family: inherit;
    border: 1px solid var(--描边); background: #fff; color: var(--次文字); font-size: 20px; line-height: 1;
  }
  .翻:hover { border-color: #c6e2ff; color: var(--主色); }
  .翻[hidden] { display: none; }
  .页码 { margin-top: 10px; text-align: center; font-size: 12px; color: var(--弱文字); }
  .空提示 { grid-column: 1 / -1; padding: 24px 0; text-align: center; color: var(--弱文字); font-size: 14px; }

  /* 下载选择模态框：左右两个版本卡片（电商工具箱 / AI 编程工具），窄屏自动换行 */
  .下载选项组 {
    display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap;
  }
  .下载选项 {
    flex: 1 1 280px; min-width: 0;
    padding: 22px 20px;
    border: 1px solid var(--描边); border-radius: 12px;
    display: flex; flex-direction: column; gap: 12px;
    text-align: center; background: var(--底);
  }
  .下载选项名 { font-size: 18px; font-weight: 700; color: var(--文字); }
  .下载选项介 {
    flex: 1; text-align: left; color: var(--次文字); font-size: 13px; line-height: 1.7;
  }
  .下载选项 .btn { width: 100%; }
  .下载选项 .ver { font-size: 12px; color: var(--弱文字); }
  /* 多平台下载：每个平台一行（已发布→下载，没发布→待开发） */
  .平台组 { display: flex; flex-direction: column; gap: 6px; }
  .平台行 {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border: 1px solid var(--描边); border-radius: 9px;
    background: var(--底); text-align: left;
  }
  .平台行名 { font-size: 13px; font-weight: 700; color: var(--文字); }
  .平台行右 { display: flex; align-items: center; gap: 8px; }
  .平台行版本 { font-size: 11px; color: var(--弱文字); }
  .平台行下载 {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; border-radius: 7px; background: var(--主色);
    color: #fff; font-size: 12px; font-weight: 600;
  }
  .平台行下载:hover { opacity: .9; }
  .平台行待 { font-size: 12px; color: var(--弱文字); }
  /* 下载弹窗底部：两个版本合起来的累计下载次数 */
  .下载合计 {
    margin-top: 16px; padding-top: 12px; text-align: center;
    border-top: 1px solid var(--描边); font-size: 13px; color: var(--次文字);
  }
  .下载合计 b { color: var(--主色); font-size: 15px; }

  /* ============ 产品界面展示区（云捷电商工具箱 / YunJev 各配一组截图） ============ */
  /* minmax(0, …) 而不是裸 fr：截图固有宽度达 1774px，裸 fr 的 min-content 会被图片撑爆整个网格
     （列被拉宽 → 图片被放大到几千像素、页面横向溢出），minmax(0,…) 允许列收缩到实际分到的宽度 */
  .product { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 34px; align-items: center; margin-top: 40px; }
  /* 第二个产品左右镜像，视觉上做交替（图片放到左、文字放到右） */
  .product.反 { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
  /* order:-1 才是真的把截图框排到左列；原来写 order:2 = 排在文字之后，图仍在右列，镜像根本没生效 */
  .product.反 .shot-box { order: -1; }
  .product-info { min-width: 0; }
  .product-info h3 { margin: 0 0 6px; font-size: 22px; }
  .product-info .sub { color: var(--主色); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
  .product-info p { margin: 0 0 12px; color: var(--次文字); }
  .product-info ul { margin: 0 0 20px; padding-left: 20px; color: var(--次文字); }
  .product-info ul li { margin-bottom: 4px; }
  /* YunJev Bot 没有截图：右栏放一张"能力清单"卡（白底圆角，和截图框同一视觉） */
  .bot-list { margin: 0; padding: 4px 6px; list-style: none; }
  .bot-list li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 6px; border-bottom: 1px dashed var(--描边);
    color: var(--次文字); font-size: 14px; line-height: 1.6;
  }
  .bot-list li:last-child { border-bottom: 0; }
  .bot-list b { flex: 0 0 auto; width: 84px; color: var(--文字); font-weight: 600; }
  /* 截图框：主图 + 一排缩略图（点缩略图切换主图，纯 JS 无依赖） */
  /* min-width:0：作为网格子项时允许被压缩（否则按截图固有宽度把列撑宽） */
  .shot-box { background: #fff; border: 1px solid var(--描边); border-radius: 14px; padding: 12px; min-width: 0; }
  .shot-main {
    display: block; width: 100%; height: auto; border-radius: 10px;
    /* 截图原始尺寸达 1774×1182：若只按宽度自适应，窗口一进入单列区间（≤980px）主图会一路涨到
       600px 以上，把整块页面顶得又长又空 —— 所以给高度封顶（桌面 340px，窄屏再矮一档） */
    max-height: 340px;
    /* contain 只是兜底：封顶后图片仍按原始比例完整显示，多出来的空间用浅色底兜住，绝不裁掉截图内容 */
    object-fit: contain; background: var(--底);
    /* 点一下就看原图（不再是悬停放大镜），所以光标是放大镜 */
    cursor: zoom-in;
  }
  /* 主图外框：左右切换按钮与「当前 / 总数」计数浮在主图两侧/右下，不占额外高度 */
  .shot-frame { position: relative; min-width: 0; }
  /* 主图聚焦时给个浅色描边，提示此刻可以用 ←/→ 键切图 */
  .shot-main:focus { outline: none; }
  .shot-main:focus-visible { outline: 2px solid var(--主色); outline-offset: 2px; }
  .shot-prev, .shot-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--描边); background: rgba(255, 255, 255, .9); color: var(--次文字);
    font-size: 20px; line-height: 1; padding: 0;
  }
  .shot-prev { left: 8px; }
  .shot-next { right: 8px; }
  .shot-prev:hover, .shot-next:hover { color: var(--主色); border-color: #c6e2ff; }
  .shot-prev[hidden], .shot-next[hidden], .shot-count[hidden] { display: none; }
  .shot-count {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    padding: 2px 10px; border-radius: 999px; font-size: 12px;
    background: rgba(17, 24, 39, .62); color: #fff;
  }
  .shot-thumbs { display: flex; gap: 8px; margin-top: 10px; }
  .shot-thumbs img {
    flex: 1 1 0; min-width: 0; height: 56px; border-radius: 6px; cursor: pointer;
    /* 固定 56px 高度：一排缩略图整齐等高（自适应高度会让缩略图随原图比例高矮不一、整块卡参差）；
       配 contain 保证每张缩略图完整可见，不会被 cover 裁掉一截 */
    object-fit: contain; background: var(--底); border: 1px solid var(--描边);
    transition: transform .15s ease, border-color .15s ease;
  }
  .shot-thumbs img:hover { border-color: #c6e2ff; transform: translateY(-2px); }
  .shot-thumbs img.选中 { border-color: var(--主色); box-shadow: 0 0 0 2px var(--主色浅); }

  /* 点主图看原图：整屏遮罩 + 原始尺寸（不缩放），可上下左右滚动查看；层内可 ‹ › 或 ←/→ 翻图 */
  .截图层 {
    position: fixed; inset: 0; z-index: 60; display: none; overflow: auto;
    background: rgba(17, 24, 39, .82); overscroll-behavior: contain;
  }
  .截图层.开 { display: block; }
  /* width:max-content 让宽图不被压缩；margin:auto 居中，图比屏幕宽时自动变 0 边距 → 左边也能滚到 */
  .截图内容 { width: max-content; margin: 0 auto; padding: 60px 20px 40px; }
  .截图原图 {
    display: block; max-width: none; border-radius: 8px; background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  }
  .截图关 {
    position: fixed; top: 16px; right: 20px; z-index: 61; width: 40px; height: 40px;
    border: none; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1;
    background: rgba(255, 255, 255, .92); color: var(--文字);
  }
  .截图关:hover { background: #fff; color: var(--主色); }
  /* 原图层里的左右翻图按钮：固定在屏幕两侧中间（层内可滚动，按钮不跟着图走） */
  .截图翻 {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 61;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .92);
    color: var(--文字); font-size: 26px; line-height: 1; padding: 0;
  }
  .截图翻:hover { color: var(--主色); }
  .截图翻[hidden] { display: none; }
  #截图上一张 { left: 16px; }
  #截图下一张 { right: 16px; }
  /* 原图层底部的「当前 / 总数」 */
  .截图页码 {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 61;
    padding: 4px 14px; border-radius: 999px; font-size: 13px;
    background: rgba(17, 24, 39, .7); color: #fff;
  }
  .截图页码:empty { display: none; }

  /* ============ 新手教程（面向完全不懂技术的小白：分步、编号、口语化） ============ */
  .guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; }
  .guide-card { background: #fff; border: 1px solid var(--描边); border-radius: 12px; padding: 22px; }
  .guide-card .no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; margin-bottom: 10px;
    background: var(--主色浅); color: #245bdd; font-weight: 700; font-size: 14px;
  }
  .guide-card h3 { margin: 0 0 10px; font-size: 17px; }
  .guide-card ol { margin: 0; padding-left: 20px; color: var(--次文字); font-size: 14px; }
  .guide-card ol li { margin-bottom: 7px; line-height: 1.65; }
  .guide-card .tips { margin: 12px 0 0; padding: 10px 12px; background: var(--底); border-radius: 8px; color: var(--次文字); font-size: 13px; }

  /* ============ 关于云捷科技（公司介绍正文，供搜索引擎 / AI 抓取） ============ */
  .about { max-width: 900px; }
  .about h3 { margin: 26px 0 8px; font-size: 18px; }
  .about p { margin: 0 0 12px; color: var(--次文字); }

  /* 页脚 */
  footer { padding: 30px 0 44px; border-top: 1px solid var(--描边); color: var(--弱文字); font-size: 13px; }
  footer .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

  @media (max-width: 980px) {
    .app-grid { grid-template-columns: repeat(2, 1fr); }
    /* 首屏两张产品卡：窄屏由并排改为上下堆叠（图仍在卡内左侧）；卡内截图高度再降一档 */
    .hero-产品 { grid-template-columns: 1fr; gap: 16px; }
    .hero-卡图 { height: 160px; max-height: 160px; }
    /* 产品展示区：窄屏改成上下堆叠，并把"镜像"那块的图片顺序还原（图永远在文字下方） */
    .product, .product.反 { grid-template-columns: 1fr; gap: 20px; }
    .product.反 .shot-box { order: 0; }
    /* 单列时主图会占满整栏：限宽居中 + 限高，免得一张截图撑满整屏、页面被拉得又长又空 */
    .shot-main { max-width: 480px; max-height: 320px; margin: 0 auto; }
  }
  @media (max-width: 760px) {
    .nav .menu { display: none; }
    .hero h1 { font-size: 30px; }
    .hero-logo { height: 36px; }
    .split { grid-template-columns: 1fr; }
    .app-grid { grid-template-columns: 1fr; }
  }
  /* 手机竖屏（≤560）：产品卡内部也改成「图上文下」，否则左侧固定 210px 的图会把文字挤成一条 */
  @media (max-width: 560px) {
    .hero-卡 { grid-template-columns: 1fr; }
    /* height:auto 让图按自身比例显示（不再 cover 裁切），max-height 兜底防止超高 */
    .hero-卡图 { height: auto; max-height: 200px; object-fit: contain; }
    .hero-卡文 .btn { width: 100%; justify-content: center; }
  }
  /* ============ YunJev 专属优势区（2026-11-02） ============
     只描述 YunJev（AI 开发 IDE）让用户能感知到的结果，不复用其他产品的文案。
     颜色全部取现有变量，跟随站点主题，不引入新色板。 */
  #yunjiev .yj-kicker {
    display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
    background: var(--主色浅); color: #245bdd; font-size: 12px; font-weight: 600; letter-spacing: .5px;
  }
  #yunjiev .yj-card { display: flex; flex-direction: column; }
  #yunjiev .yj-pair { margin-top: 2px; }
  #yunjiev .yj-row { display: flex; gap: 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
  #yunjiev .yj-row b {
    flex: none; height: 20px; line-height: 18px; padding: 0 7px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600;
  }
  #yunjiev .yj-row.前 b { color: #b45454; background: #fdeeee; border: 1px solid #f3d2d2; }
  #yunjiev .yj-row.后 b { color: #237a4b; background: #e9f8ef; border: 1px solid #c9ebd7; }
  #yunjiev .yj-row span { color: var(--次文字); }
  #yunjiev .yj-row.后 span { color: var(--文字); }
  /* 稳定条：一条横向承诺 + 四个小格 */
  #yunjiev .yj-stable {
    margin-top: 22px; padding: 22px 24px; border-radius: 14px;
    background: linear-gradient(180deg, #f4fbf7, #fbfefc);
    border: 1px solid #d6efe1;
  }
  #yunjiev .yj-stable-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  #yunjiev .yj-stable-head b { font-size: 17px; }
  #yunjiev .yj-stable-head span { color: var(--次文字); font-size: 13.5px; }
  #yunjiev .yj-stable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  #yunjiev .yj-stable-item {
    background: #fff; border: 1px solid #e2f0e8; border-radius: 10px; padding: 12px 14px;
    font-size: 13.5px; color: var(--次文字);
  }
  #yunjiev .yj-stable-item b { display: block; color: var(--文字); font-size: 14px; margin-bottom: 2px; }
  #yunjiev .yj-cta { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  #yunjiev .yj-cta .dl-meta { font-size: 13px; }