@charset "UTF-8";
/* =========================================================================
   酷璞睿官网 · 首页移动端【排版重构】v3（仅 ≤767px，仅 index.html 引用）
   -------------------------------------------------------------------------
   原则：不改配色、不动 HTML，只重做移动端的排版语言——
   字号层级、对齐方式、编号、行距、间距刻度、触摸区尺寸。

   1. 建立 6 级字号对比（11px 眉标 → 40px 主标题），不再是"都差不多大"；
   2. 章节改为编排式版式：超大浅色编号 + 左对齐标题 + 眉标短横线；
   3. 正文行高 1.78、字号随屏宽流动，长段落读起来有呼吸；
   4. 卡片层级用字重/间距区分，弱化边框、强化层次；
   5. 服务行业改为三列清单（下划线分隔），替代重复的圆角色块；
   6. 保留原有配色（--primary #53c3e8 / --accent #2e4a99 / 浅底白卡）。

   回滚：删除本文件，或移除 index.html 中的 mobile.css 引用。
   ========================================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------------------------------------
     0. 基础与排版变量
     --------------------------------------------------------------------- */
  html { -webkit-text-size-adjust: 100%; }

  body {
    -webkit-tap-highlight-color: transparent;
    font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC",
                 Inter, system-ui, -apple-system, "Microsoft YaHei", sans-serif !important;
    /* 中文正文更松的行距，读起来才不像"挤在一起" */
    line-height: 1.6;
  }

  main > section {
    --gutter: clamp(16px, 4.6vw, 22px);
    --card-pad: clamp(15px, 4.2vw, 19px);
    --stack: clamp(10px, 2.8vw, 13px);
    min-height: 0 !important;
    padding-top: clamp(50px, 12vw, 66px) !important;
    padding-bottom: clamp(50px, 12vw, 66px) !important;
    scroll-margin-top: 68px;
  }

  main > section > div[class*="max-w-7xl"] {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  main > section a:active,
  main > section button:active,
  footer a:active { opacity: .65; }

  /* ---------------------------------------------------------------------
     1. 眉标：小字号 + 字距 + 渐变短横线（编排感的关键细节）
     --------------------------------------------------------------------- */
  main > section span[class*="rounded-full"][class*="font-medium"]:not(.inline-flex):not([class*="text-xs"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: clamp(14px, 4vw, 18px) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .2em;
    color: #2e9fc9 !important;
    box-shadow: none !important;
  }

  main > section span[class*="rounded-full"][class*="font-medium"]:not(.inline-flex):not([class*="text-xs"])::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #53c3e8, #2e4a99);
  }

  /* ---------------------------------------------------------------------
     2. 章节标题：超大浅色编号 + 左对齐 + 更强的字号/字重对比
     --------------------------------------------------------------------- */
  main > section h2 {
    font-size: clamp(23px, 6.8vw, 29px) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
    margin-bottom: 12px !important;
    text-wrap: balance;
  }

  /* 编号作为"背景性"排版元素（1 → 5，按页面顺序） */
  main > section h2::before {
    display: block;
    margin-bottom: 8px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(34px, 10vw, 46px);
    line-height: .9;
    font-weight: 700;
    letter-spacing: -.04em;
    color: rgba(46, 74, 153, .13);
  }

  #capabilities h2::before { content: "01"; }
  #fde h2::before { content: "02"; }
  #why-us h2::before { content: "03"; }
  #vision h2::before { content: "04"; }
  #about h2::before { content: "05"; }

  /* 各章节从"居中"改为"左对齐"的编排式版式（首屏保持居中） */
  #fde > div[class*="max-w-7xl"] > div[class*="text-center"],
  #vision > div[class*="max-w-7xl"] > div[class*="text-center"],
  #about > div[class*="max-w-7xl"] > div[class*="text-center"] {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #fde > div[class*="max-w-7xl"] > div[class*="text-center"] p,
  #vision > div[class*="max-w-7xl"] > div[class*="text-center"] p,
  #about > div[class*="max-w-7xl"] > div[class*="text-center"] p,
  #capabilities > div[class*="max-w-7xl"] > div[class*="lg:items-end"] > p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 34em;
    font-size: clamp(13px, 3.6vw, 14.5px) !important;
    line-height: 1.78 !important;
    color: #46586a !important;
  }

  #capabilities > div[class*="max-w-7xl"] > div[class*="lg:items-end"] {
    gap: 6px !important;
    margin-bottom: clamp(18px, 5vw, 24px) !important;
  }

  #fde > div[class*="max-w-7xl"] > div[class*="text-center"],
  #vision > div[class*="max-w-7xl"] > div[class*="text-center"],
  #about > div[class*="max-w-7xl"] > div[class*="text-center"] {
    margin-bottom: clamp(20px, 5.4vw, 26px) !important;
  }

  main > section h3 {
    font-size: clamp(15.5px, 4.3vw, 17.5px) !important;
    font-weight: 700 !important;
    letter-spacing: -.008em;
    line-height: 1.42 !important;
  }

  /* ---------------------------------------------------------------------
     3. 首屏：放大标题、压缩行高、把三层信息拉出层级
     --------------------------------------------------------------------- */
  #home {
    /* 内容紧凑居中；底部用一条细线做"下滑"暗示，而不是靠撑高留白 */
    min-height: 82vh !important;
    padding-top: clamp(58px, 14vw, 76px) !important;
    padding-bottom: clamp(52px, 13vw, 74px) !important;
  }

  @supports (min-height: 82svh) {
    #home { min-height: 82svh !important; }
  }

  #home::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, rgba(46, 74, 153, .28), rgba(46, 74, 153, 0));
  }

  #home h1 {
    font-size: clamp(31px, 9.2vw, 40px) !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    margin-bottom: clamp(12px, 3.4vw, 16px) !important;
    text-wrap: balance;
  }

  /* "酷璞睿信息 —— 企业级AI生产力构建者"：小字距的副题行 */
  #home h1 + p {
    font-size: clamp(12.5px, 3.4vw, 13.5px) !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    line-height: 1.6 !important;
    color: #46586a !important;
    margin-bottom: 10px !important;
  }

  #home h1 + p + p {
    font-size: clamp(13px, 3.5vw, 14px) !important;
    line-height: 1.75 !important;
    color: #5a6b7b !important;
    margin-bottom: clamp(22px, 6vw, 28px) !important;
  }

  #home div[class*="sm:flex-row"] { flex-direction: row !important; gap: 10px !important; }

  #home div[class*="sm:flex-row"] > button {
    flex: 1 1 0;
    width: auto !important;
    min-height: 50px;
    padding: 13px 8px !important;
    font-size: clamp(14px, 3.9vw, 15.5px) !important;
    border-radius: 14px !important;
    letter-spacing: .02em;
  }

  #home div[class*="sm:flex-row"] > button:first-child {
    box-shadow: 0 12px 26px -14px rgba(46, 74, 153, .7) !important;
  }

  /* 能力标签：四宫格，作为首屏的收尾信息块 */
  #home div[class*="mt-12"][class*="flex-wrap"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    margin-top: clamp(22px, 6vw, 30px) !important;
  }

  #home div[class*="mt-12"][class*="flex-wrap"] > span {
    text-align: center;
    font-size: clamp(12px, 3.3vw, 13px) !important;
    letter-spacing: .02em;
    padding: 10px 6px !important;
    border-radius: 12px !important;
  }

  /* ---------------------------------------------------------------------
     4. 卡片：弱化边框、强化层次，正文行距放宽
     --------------------------------------------------------------------- */
  main > section [class*="rounded-2xl"][class*="border"][class*="p-5"],
  main > section [class*="rounded-2xl"][class*="border"][class*="p-6"] {
    padding: var(--card-pad) !important;
    border-radius: 16px !important;
    border-color: rgba(227, 234, 241, .9) !important;
    box-shadow: 0 2px 6px -3px rgba(15, 23, 42, .06), 0 20px 34px -30px rgba(46, 74, 153, .55) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }

  main > section [class*="rounded-2xl"][class*="border"]:active { transform: scale(.985); }

  main > section [class*="rounded-2xl"][class*="border"] h3 { margin-bottom: 7px !important; }

  main > section [class*="rounded-2xl"][class*="border"] p {
    font-size: clamp(13px, 3.6vw, 14.5px) !important;
    line-height: 1.78 !important;
    color: #46586a !important;
  }

  main > section [class*="w-11 h-11"],
  main > section [class*="w-12 h-12"] {
    width: clamp(36px, 10vw, 42px) !important;
    height: clamp(36px, 10vw, 42px) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  main > section [class*="w-11 h-11"] svg,
  main > section [class*="w-12 h-12"] svg { width: 19px !important; height: 19px !important; }

  main > section span[class*="opacity-0"][class*="bg-gradient-brand"] { opacity: .45 !important; }

  /* ---------------------------------------------------------------------
     5. 四大核心能力：横向滑动卡组（露出下一张作为提示）
     --------------------------------------------------------------------- */
  #capabilities .grid[class*="lg:grid-cols-12"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--stack) !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter)) !important;
    margin-right: calc(-1 * var(--gutter)) !important;
    padding: 4px var(--gutter) 12px !important;
  }

  #capabilities .grid[class*="lg:grid-cols-12"]::-webkit-scrollbar { display: none; }

  #capabilities .grid[class*="lg:grid-cols-12"] > div {
    flex: 0 0 clamp(232px, 76vw, 320px);
    min-width: 0;
    scroll-snap-align: start;
  }

  #capabilities .grid[class*="lg:grid-cols-12"] > div:first-child > div {
    background: linear-gradient(140deg, rgba(83, 195, 232, .2), rgba(46, 74, 153, .08) 62%, #fff) !important;
    border-color: rgba(83, 195, 232, .5) !important;
  }

  #capabilities .grid[class*="lg:grid-cols-12"] > div:first-child > div > span[class*="opacity-0"] { opacity: .95 !important; }

  #capabilities .grid[class*="lg:grid-cols-12"] > div:first-child span[class*="text-2xl"] {
    color: rgba(46, 74, 153, .22) !important;
  }

  /* 卡片内的序号（01/02/…）改用等宽数字，与章节编号呼应 */
  main > section span[class*="text-2xl"] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 22px !important;
    letter-spacing: -.03em;
  }

  /* ---------------------------------------------------------------------
     6. FDE 前置交付：竖向时间轴 + 编排式序号
     --------------------------------------------------------------------- */
  #fde > div[class*="max-w-7xl"] > div[class*="relative"][class*="mb-10"] { margin-bottom: 0 !important; }

  #fde .grid[class*="lg:grid-cols-5"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    counter-reset: fde;
  }

  #fde .grid[class*="lg:grid-cols-5"] > div {
    position: relative;
    padding-left: 46px;
    counter-increment: fde;
  }

  #fde .grid[class*="lg:grid-cols-5"] > div::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 32px;
    bottom: -12px;
    width: 1px;
    background: linear-gradient(180deg, rgba(83, 195, 232, .5), rgba(46, 74, 153, .1));
  }

  #fde .grid[class*="lg:grid-cols-5"] > div:last-child::before { content: none; }

  #fde .grid[class*="lg:grid-cols-5"] > div::after {
    content: counter(fde, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    width: 30px;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #2e9fc9;
  }

  #fde .grid[class*="lg:grid-cols-5"] > div > div { padding: 14px 16px !important; }

  #fde .grid[class*="lg:grid-cols-5"] > div > div > span { display: none !important; }

  /* ---------------------------------------------------------------------
     7. 为何选择我们：2×2 矩阵，字号与间距重排
     --------------------------------------------------------------------- */
  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] { gap: clamp(20px, 5.6vw, 28px) !important; }

  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] > div[class*="lg:col-span-7"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(9px, 2.6vw, 12px) !important;
  }

  #why-us [class*="mb-8"] { margin-bottom: 18px !important; }

  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] > div[class*="lg:col-span-7"] > div > div {
    padding: 14px 12px !important;
  }

  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] > div[class*="lg:col-span-7"] h3 {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] > div[class*="lg:col-span-7"] p {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
  }

  #why-us span[class*="text-7xl"] { font-size: 34px !important; top: -6px !important; right: 8px !important; }
  #why-us span[class*="rounded-full"][class*="text-xs"] { font-size: 10.5px !important; padding: 3px 8px !important; letter-spacing: .02em; }

  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] [class*="w-12 h-12"] {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] [class*="w-12 h-12"] svg {
    width: 16px !important;
    height: 16px !important;
  }

  #why-us .flex-wrap { gap: 5px !important; }

  /* 左侧文案：与右侧矩阵拉出层级 */
  #why-us > div[class*="max-w-7xl"] > div[class*="lg:grid-cols-12"] > div[class*="lg:col-span-5"] p {
    font-size: clamp(13px, 3.6vw, 14.5px) !important;
    line-height: 1.78 !important;
  }

  /* ---------------------------------------------------------------------
     8. 企业文化
     --------------------------------------------------------------------- */
  #vision [class*="rounded-3xl"] { border-radius: 20px !important; }
  #vision [class*="relative p-8"] { padding: clamp(18px, 5vw, 24px) !important; }
  #vision p {
    font-size: clamp(13px, 3.6vw, 14.5px) !important;
    line-height: 1.78 !important;
    color: #46586a !important;
  }
  #vision span[class*="text-[100px]"] { font-size: 54px !important; top: 0 !important; right: 14px !important; opacity: .5; }
  #vision [class*="flex items-center gap-3"] { margin-bottom: 14px !important; }
  #vision .grid { gap: clamp(9px, 2.6vw, 12px) !important; }

  /* 愿景/使命的标题行：中文大 + 英文小字距 */
  #vision div[class*="text-lg font-bold"] { font-size: 16px !important; letter-spacing: -.005em; }
  #vision div[class*="text-[11px]"] { font-size: 10px !important; letter-spacing: .24em !important; }

  /* ---------------------------------------------------------------------
     9. 关于我们：3 张叙述卡 + 三列清单式行业
     --------------------------------------------------------------------- */
  #about .grid[class*="md:grid-cols-3"] {
    gap: clamp(10px, 3vw, 14px) !important;
    margin-bottom: clamp(18px, 4.8vw, 24px) !important;
  }

  /* 行业从"重复色块"改为清单：透明底 + 下划线分隔 */
  #about .grid[class*="sm:grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 clamp(8px, 2.6vw, 14px) !important;
  }

  #about .grid[class*="sm:grid-cols-3"] > div {
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(46, 74, 153, .1);
    padding: 11px 0 !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    font-size: clamp(12px, 3.2vw, 12.5px) !important;
    letter-spacing: .01em;
    color: #46586a !important;
  }

  #about .grid[class*="sm:grid-cols-3"] > div svg {
    width: 14px !important;
    height: 14px !important;
    color: #2e9fc9 !important;
  }

  /* "服务行业"小标题：与眉标同语言 */
  #about span[class*="font-semibold"] { font-size: 13px !important; letter-spacing: .04em; }

  /* ---------------------------------------------------------------------
     10. 页脚
     --------------------------------------------------------------------- */
  footer div[class*="py-12"][class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 30px 0 !important;
  }

  footer div[class*="py-12"][class*="grid"] > div { grid-column: auto !important; }
  footer h3 {
    font-size: 11px !important;
    letter-spacing: .18em;
    color: #2e9fc9 !important;
    margin-bottom: 12px !important;
  }
  footer ul { font-size: 13px !important; }
  footer ul[class*="space-y-2.5"] > li + li,
  footer ul[class*="space-y-3"] > li + li { margin-top: 7px !important; }

  footer div[class*="py-12"][class*="grid"] > div:nth-child(2) ul,
  footer div[class*="py-12"][class*="grid"] > div:nth-child(3) ul { columns: 2; column-gap: 16px; }
  footer div[class*="py-12"][class*="grid"] > div:nth-child(2) li,
  footer div[class*="py-12"][class*="grid"] > div:nth-child(3) li { break-inside: avoid; }

  footer p[class*="max-w-sm"] { font-size: 13px !important; line-height: 1.75 !important; color: #5a6b7b !important; }
  footer img + span[class*="text-xl"] { font-size: 16px !important; letter-spacing: -.01em; }
  footer div[class*="text-xs"] { font-size: 10.5px !important; letter-spacing: .02em; }

  /* ---------------------------------------------------------------------
     11. 顶部导航与移动菜单
     --------------------------------------------------------------------- */
  header nav > div[class*="h-[72px]"] { height: 62px !important; }
  header nav > div[class*="h-[72px]"] span[class*="text-xl"] { font-size: 17px !important; letter-spacing: -.01em; }

  header nav > div[class*="max-h-["] > div[class*="flex-col"] {
    gap: 2px !important;
    padding-bottom: 10px !important;
  }

  header nav > div[class*="max-h-["] > div[class*="flex-col"] > button {
    font-size: 14.5px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    letter-spacing: .02em;
  }
}