:root {
        --color-text: #0f172a;
        --color-text-muted: #334155;
        --color-primary: #2F54C6;
        --color-accent: #2F54C6;
        --color-bg: #f7f9ff;
        --color-surface: #ffffff;
        --color-header-bg: rgba(255, 255, 255, 0.92);
        --color-line: rgba(47, 84, 198, 0.14);
        --radius: 6px;

        --h1-size: clamp(34px, 4vw, 56px);
        --h2-size: clamp(28px, 3vw, 40px);
        --h3-size: 24px;
        --body-size: 17px;
        --hero-p-size: 18px;
        --small-size: 14px;
        --brand-size: clamp(18px, 2vw, 24px);
        --section-pad-y: clamp(46px, 6vw, 78px);
        --hero-pad-y: 110px;
        --section-gap: 32px;
        --card-gap: 14px;

        color: var(--color-text);
        background: var(--color-bg);
        font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: auto; }
      body { margin: 0; background: var(--color-bg); overflow-x: hidden; color: var(--color-text); font-size: var(--body-size); }
      a { color: inherit; }
      .site { min-height: 100vh; background: var(--color-bg); display: flex; flex-direction: column; }

      /* 顶栏：浅色 + 下划线导航（非 pill） */
      .header {
        position: sticky; top: 0; z-index: 10;
        display: flex; align-items: center; justify-content: space-between;
        gap: 22px; min-height: 74px;
        padding: 0 clamp(22px, 5vw, 70px) 0 clamp(12px, 2vw, 28px);
        background: var(--color-header-bg); color: var(--color-text);
        border-bottom: 1px solid var(--color-line);
        backdrop-filter: blur(12px);
        box-shadow: 0 6px 20px rgba(47, 84, 198, 0.05);
      }
      .brand { display: grid; gap: 3px; min-width: 180px; }
      .brand strong { color: var(--color-primary); font-size: var(--brand-size); line-height: 1.25; font-weight: 900; white-space: nowrap; }
      .brand span { color: var(--color-text-muted); font-size: 12px; font-weight: 800; }
      .nav { display: flex; justify-content: center; flex-wrap: nowrap; align-items: center; gap: 6px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .nav::-webkit-scrollbar { display: none; }
      .nav a {
        position: relative; color: #475569; padding: 8px 2px 10px;
        font-size: var(--small-size); font-weight: 800; text-decoration: none;
        white-space: nowrap; flex-shrink: 0;
        transition: color 0.18s ease;
      }
      .nav a::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
        background: var(--color-primary); transform: scaleX(0); transition: transform 0.15s ease;
      }
      .nav a:hover, .nav a.active { color: var(--color-primary); }
      .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
      .footer-nav { display: grid; gap: 8px; }
      .footer-nav a.active { color: var(--color-primary); font-weight: 900; }
      .call-icon { flex-shrink: 0; }
      .call {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 8px; min-height: 44px; padding: 0 18px;
        border-radius: var(--radius); background: var(--color-primary); color: #fff;
        text-decoration: none; font-size: 16px; font-weight: 900; white-space: nowrap;
        box-shadow: 0 10px 24px rgba(47, 84, 198, 0.25);
        transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      }
      .call:hover {
        background: #1d39c4;
        box-shadow: 0 14px 30px rgba(47, 84, 198, 0.34);
        transform: translateY(-2px);
      }

      /* Hero：保持居中，浅色科技底 */
      .hero {
        position: relative; display: grid; place-items: center;
        min-height: 560px; overflow: hidden;
        padding: var(--hero-pad-y) 24px calc(var(--hero-pad-y) * 0.75);
        scroll-margin-top: 88px; text-align: center; color: var(--color-text);
        background:
          radial-gradient(circle at 18% 20%, rgba(47, 84, 198, 0.14), transparent 34%),
          radial-gradient(circle at 85% 30%, rgba(76, 110, 245, 0.12), transparent 36%),
          linear-gradient(160deg, #eef3ff 0%, #f8faff 50%, #ffffff 100%);
      }
      .hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
      .hero > .img-protect { position: absolute; inset: 0; z-index: 0; margin: 0; width: 100%; height: 100%; }
      .hero > .img-protect .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .hero::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background:
          linear-gradient(180deg, rgba(247,249,255,0.4), rgba(247,249,255,0.82)),
          repeating-linear-gradient(90deg, rgba(47,84,198,0.045) 0 1px, transparent 1px 88px),
          repeating-linear-gradient(0deg, rgba(47,84,198,0.04) 0 1px, transparent 1px 88px);
      }
      .hero-content { position: relative; z-index: 2; max-width: 900px; }
      .hero-badge {
        display: inline-flex; border: 1px solid rgba(47, 84, 198, 0.28);
        border-radius: var(--radius); background: rgba(47, 84, 198, 0.08);
        color: var(--color-primary); padding: 9px 16px; font-size: var(--small-size); font-weight: 900;
        transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
      }
      .hero-badge:hover {
        background: rgba(47, 84, 198, 0.12);
        border-color: rgba(47, 84, 198, 0.4);
        transform: translateY(-1px);
      }
      h1 { margin: 20px 0 0; color: #132a6e; font-size: var(--h1-size); line-height: 1.16; text-align: center; }
      .hero p { margin: 22px auto 0; max-width: 100%; color: #1e293b; font-size: var(--hero-p-size); line-height: 1.9; white-space: pre-wrap; }
      .hero-cta { margin-top: 30px; }

      .img-protect { position: relative; display: block; margin: 0; width: 100%; overflow: hidden; container-type: size; }
      .img-protect > img, .img-protect > .placeholder { width: 100%; display: block; }
      .product-card > .img-protect, .advantage-card > .img-protect, .case-card > .img-protect { aspect-ratio: 4 / 3; }
      .about-media > .img-protect { aspect-ratio: 4 / 3; }
      .product-card > .img-protect > img.product-image,
      .advantage-card > .img-protect > img.advantage-image,
      .case-card > .img-protect > img.case-image,
      .about-media > .img-protect > img.about-image { height: 100%; object-fit: cover; aspect-ratio: auto; }
      .img-protect__bar { pointer-events: none; position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; color: #fff; font-weight: 800; }
      .img-protect__bar--top { top: 0; height: 10%; min-height: 24px; justify-content: center; background: #2F54C6; font-size: clamp(12px, 5.2cqh, 96px); }
      .img-protect__bar--bottom { bottom: 0; height: 11%; min-height: 24px; background: #2F54C6; }
      .img-protect__contact { flex: 0 0 auto; aspect-ratio: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5dc5a; color: #1a1a1a; font-size: clamp(9px, 3.2cqh, 56px); font-weight: 800; }
      .img-protect__phone { flex: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 5cqh, 88px); font-weight: 900; }
      .img-protect__layer { pointer-events: none; position: absolute; inset: 0; z-index: 2; }
      .img-protect--watermark .img-protect__wm { pointer-events: none; position: absolute; inset: 0; z-index: 2; overflow: hidden; }
      .img-protect--watermark .img-protect__wm-inner { position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; display: flex; flex-wrap: wrap; align-content: space-evenly; justify-content: space-evenly; gap: 2.4em 3em; transform: rotate(-25deg); color: rgba(255,255,255,var(--img-protect-op,0.42)); font-size: clamp(14px, 4.2cqh, 80px); font-weight: 850; }

      .section {
        padding: var(--section-pad-y) max(24px, calc((100vw - 1240px) / 2));
        border-top: 1px solid var(--color-line);
        scroll-margin-top: 88px; background: var(--color-surface);
      }
      .section-head { text-align: center; margin: 0 0 28px; width: 100%; max-width: none; }
      .kicker {
        margin: 0 0 10px; color: var(--color-primary); font-size: 12px; font-weight: 900;
        letter-spacing: 0.16em; text-transform: uppercase;
      }
      .kicker-light { color: rgba(255,255,255,0.8); }
      h2 {
        margin: 0; color: #16318f; font-size: var(--h2-size); line-height: 1.2; text-align: center;
        position: relative; padding-bottom: 14px;
      }
      h2::after {
        content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
        width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #2F54C6, #7b93ff);
      }
      .section-head .body-text {
        margin: 16px 0 0; max-width: none; width: 100%; text-align: center;
        color: var(--color-text); line-height: 1.85; font-weight: 400; white-space: pre-wrap;
      }
      p { margin: 0; }
      .body-text { color: var(--color-text); line-height: 1.95; font-size: var(--body-size); white-space: pre-wrap; }

      .about-intro-wrap { display: block; }
      .about-intro-head, .about-intro-rest { white-space: pre-wrap; }
      .about-intro-ellipsis { white-space: nowrap; }
      .about-intro-rest[hidden] { display: none !important; }
      .about-intro-toggle {
        display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding: 0; border: 0;
        background: transparent; color: var(--color-primary); font: inherit; font-weight: 600; cursor: pointer;
      }
      .about-intro-toggle:hover { color: #1d39c4; }
      .about-intro-chevron { transition: transform 0.15s ease; }
      .about-intro-wrap.is-expanded .about-intro-ellipsis { display: none; }
      .about-intro-wrap.is-expanded .about-intro-chevron { transform: rotate(180deg); }

      /* 关于我们：上文字下图片，三列同图，底边贴线 */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
        position: relative;
        width: 100%;
        max-width: none;
        padding: 28px 28px 32px;
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
      }
      .about-grid::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 6px;
        border-radius: 0 0 16px 16px;
        background: #8FC5FF;
      }
      .about-grid:hover {
        border-color: rgba(47, 84, 198, 0.28);
        box-shadow: 0 18px 40px rgba(47, 84, 198, 0.14);
        transform: translateY(-3px);
      }
      .about-copy {
        display: grid;
        gap: 16px;
        align-content: start;
        width: 100%;
        max-width: none;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      .about-copy::before { display: none; }
      .about-media-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
      }
      .about-media {
        display: block;
        width: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
        min-height: 0;
        overflow: hidden;
      }
      .about-highlights { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
      .about-phone {
        display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
        color: var(--color-primary); font-size: var(--body-size); font-weight: 900; text-decoration: none;
        transition: color 0.18s ease, transform 0.18s ease;
      }
      .about-phone:hover { color: #1d39c4; transform: translateX(2px); }
      .about-highlights span, .tag {
        border: 1px solid rgba(47, 84, 198, 0.2); border-radius: 999px; background: #eef3ff; color: var(--color-primary);
        padding: 9px 14px; font-weight: 900; font-size: var(--small-size);
        transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
      }
      .about-highlights span:hover, .tag:hover {
        background: #e0e9ff; border-color: rgba(47, 84, 198, 0.35); transform: translateY(-1px);
      }
      .placeholder, .product-image, .advantage-image, .case-image { width: 100%; display: block; object-fit: cover; background: #eef3ff; }
      .about-image {
        width: 100%;
        max-width: none;
        height: auto;
        display: block;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        background: #eef3ff;
        border-radius: 12px;
        border: 0;
        box-shadow: none;
      }
      .about-media .about-image,
      .about-media .placeholder {
        width: 100%;
        max-width: none;
        margin: 0;
        aspect-ratio: 4 / 3;
        height: auto;
        object-fit: cover;
        background: #eef3ff;
        border-radius: 12px;
      }
      .about-grid:hover .about-media .about-image { transform: none; }
      .placeholder { display: grid; place-items: center; padding: 24px; color: var(--color-text-muted); font-weight: 900; text-align: center; }
      .about-copy .body-text {
        width: 100%;
        max-width: none;
        text-align: left;
      }

      .section-title-row { display: block; text-align: center; }
      .product-groups { display: grid; gap: var(--section-gap); margin-top: 8px; }
      .product-series { display: grid; gap: 20px; border-top: 1px solid var(--color-line); padding-top: 24px; transition: border-color 0.2s ease; }
      .product-series-header { display: grid; gap: 8px; justify-items: stretch; text-align: center; width: 100%; }
      .product-series h3 {
        margin: 0; width: 100%; max-width: none;
        color: #16318f; font-size: var(--h3-size); line-height: 1.25;
        text-align: center;
        padding: 12px 16px;
        background: #E0EFFF;
        border-radius: 8px;
      }
      .product-series h3::after { display: none; }
      .product-series-desc {
        margin: 0; max-width: none; width: 100%; color: var(--color-text);
        line-height: 1.75; font-size: var(--body-size); text-align: center;
      }

      /* 栅格保持原模板：服务4列 / 优势4列 / 案例3列 */
      .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }
      .case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin-top: 8px; }
      .product-card, .case-card {
        overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius);
        background: var(--color-surface); box-shadow: 0 10px 24px rgba(47, 84, 198, 0.06);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      }
      .product-card {
        background: #EAF1FF;
        border-color: rgba(47, 84, 198, 0.14);
      }
      .product-card:hover, .case-card:hover {
        border-color: rgba(47, 84, 198, 0.32);
        box-shadow: 0 16px 34px rgba(47, 84, 198, 0.14);
        transform: translateY(-4px);
      }
      .product-card:hover {
        background: #E0EBFF;
      }
      .product-card img, .case-card img {
        transition: transform 0.28s ease;
      }
      .product-card:hover img, .case-card:hover img { transform: scale(1.04); }
      .product-image, .case-image, .advantage-image { aspect-ratio: 4 / 3; }

      /* 核心优势：左图标右文 */
      .advantages-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px; margin-top: 8px;
      }
      #advantage-1 { background: linear-gradient(180deg, #f3f6ff 0%, #ffffff 100%); }
      .advantage-card {
        display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0; align-items: stretch;
        overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius);
        background: var(--color-surface); box-shadow: 0 10px 24px rgba(47, 84, 198, 0.06);
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      }
      .advantage-card:hover {
        border-color: rgba(47, 84, 198, 0.35);
        box-shadow: 0 14px 32px rgba(47, 84, 198, 0.12);
        transform: translateY(-3px);
      }
      .advantage-card:hover .advantage-icon {
        filter: brightness(1.06);
      }
      .advantage-icon {
        position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: auto;
        min-height: 100%; color: #fff; overflow: hidden;
        background:
          radial-gradient(circle at 28% 22%, rgba(255,255,255,0.38), transparent 42%),
          linear-gradient(155deg, #4C6EF5 0%, #2F54C6 55%, #1d39c4 100%);
        transition: filter 0.2s ease;
      }
      .advantage-icon::before {
        content: ""; position: absolute; inset: auto -20% -35% auto; width: 78%; height: 78%;
        border-radius: 50%; background: rgba(255,255,255,0.12);
      }
      .advantage-icon::after {
        content: ""; position: absolute; left: 10px; top: 10px; width: 18px; height: 18px;
        border-top: 2px solid rgba(255,255,255,0.45); border-left: 2px solid rgba(255,255,255,0.45);
      }
      .advantage-icon svg {
        position: relative; z-index: 1; width: 44px; height: 44px;
        filter: drop-shadow(0 6px 10px rgba(15, 40, 120, 0.28));
      }
      .advantage-body {
        display: grid; align-content: center; gap: 6px;
        padding: 18px 18px 18px 16px; text-align: left;
      }
      .advantage-card strong {
        color: #16318f; line-height: 1.45; font-size: 15px; font-weight: 900;
      }
      .advantage-card p {
        color: var(--color-text-muted); line-height: 1.65; font-size: 13px; font-weight: 600;
      }

      .product-card-body, .case-body { display: grid; gap: 10px; padding: 16px; }
      .product-card-body { padding: 12px 10px 14px; text-align: center; }
      .product-card strong, .case-card strong { color: var(--color-text); line-height: 1.55; font-size: var(--body-size); }
      .product-card strong { display: block; font-weight: 900; }
      .product-card p, .case-card p { color: var(--color-text-muted); line-height: 1.7; font-size: var(--small-size); }
      .case-section { background: color-mix(in srgb, #2F54C6 4%, #ffffff); }
      .case-body em { justify-self: start; border-radius: 999px; background: #eaf0ff; color: var(--color-primary); padding: 5px 10px; font-size: 12px; font-style: normal; font-weight: 900; }

      .contact {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center;
        margin: 0 max(24px, calc((100vw - 1240px) / 2)) var(--section-pad-y);
        padding: 32px; border-radius: var(--radius);
        background: linear-gradient(135deg, #2F54C6 0%, #4C6EF5 100%); color: #fff;
        scroll-margin-top: 88px; box-shadow: 0 16px 36px rgba(47, 84, 198, 0.22);
        transition: box-shadow 0.22s ease, transform 0.22s ease;
      }
      .contact:hover {
        box-shadow: 0 20px 44px rgba(47, 84, 198, 0.3);
        transform: translateY(-2px);
      }
      .contact h2 { color: #fff; text-align: left; }
      .contact h2::after { left: 0; transform: none; background: rgba(255,255,255,0.85); }
      .contact .kicker { text-align: left; }
      .contact p { color: rgba(255,255,255,0.88); font-size: var(--body-size); }
      .contact .call { background: #fff; color: var(--color-primary); box-shadow: none; }
      .contact .call:hover { background: #f0f4ff; color: #1d39c4; }

      .footer a { transition: color 0.18s ease; }
      .footer a:hover { color: var(--color-primary); }
      .brand strong { transition: opacity 0.18s ease; }
      .brand:hover strong { opacity: 0.85; }

      .footer { margin-top: auto; background: #eef3ff; color: #334155; padding: 42px max(24px, calc((100vw - 1240px) / 2)) 0; border-top: 1px solid var(--color-line); }
      .friend-links { display: none; }
      .friend-links a { color: #64748b; font-size: 13px; text-decoration: none; font-weight: 700; }
      .footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.6fr) minmax(220px, 0.7fr); gap: 34px; }
      .footer-grid > div { display: grid; align-content: start; gap: 10px; }
      .footer strong { color: var(--color-primary); font-size: 22px; line-height: 1.3; font-weight: 900; }
      .footer h3 { margin: 0; color: #16318f; font-size: 15px; text-align: left; padding-bottom: 0; }
      .footer h3::after { display: none; }
      .footer p, .footer span, .footer a { color: #64748b; line-height: 1.8; text-decoration: none; font-size: 14px; font-weight: 700; }
      .footer-bottom { margin-top: 32px; border-top: 1px solid rgba(47,84,198,0.12); color: #94a3b8; padding: 14px 0; font-size: 12px; font-weight: 700; }

      .viewport-disclaimer {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: rgba(255,255,255,0.96); border-top: 1px solid #e5e7eb;
        box-shadow: 0 -6px 20px rgba(15,23,42,0.06);
        padding: 10px max(16px, calc((100vw - 1240px) / 2));
        color: #64748b; font-size: 12px; line-height: 1.7; font-weight: 700;
      }
      .viewport-disclaimer a { color: #e11d48; text-decoration: underline; cursor: pointer; margin-left: 4px; }
      body.has-viewport-disclaimer { padding-bottom: 72px; }
      body.has-viewport-disclaimer .mobile-call { bottom: 78px; }
      .report-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998; display: none; align-items: center; justify-content: center; padding: 16px; }
      .report-modal-mask.is-open { display: flex; }
      .report-modal { width: min(560px, 100%); max-height: min(90vh, 720px); overflow: auto; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); color: #1f2937; }
      .report-modal h3 { margin: 0 0 14px; font-size: 18px; font-weight: 900; text-align: left; padding-bottom: 0; }
      .report-modal h3::after { display: none; }
      .report-modal .rm-field { margin-bottom: 14px; }
      .report-modal .rm-label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; color: #334155; }
      .report-modal .rm-label .req { color: #e11d48; margin-left: 2px; }
      .report-modal .rm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
      .report-modal .rm-tag { border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
      .report-modal .rm-tag.is-active { border-color: #2F54C6; background: #eef3ff; color: #2F54C6; }
      .report-modal textarea, .report-modal input { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
      .report-modal textarea { min-height: 72px; resize: vertical; }
      .report-modal .rm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
      .report-modal .rm-btn { border: 0; border-radius: 6px; padding: 9px 16px; font-size: 14px; font-weight: 800; cursor: pointer; }
      .report-modal .rm-btn-cancel { background: #e2e8f0; color: #334155; }
      .report-modal .rm-btn-submit { background: #2F54C6; color: #fff; }
      .report-modal .rm-err { color: #e11d48; font-size: 12px; margin-top: 6px; display: none; }
      .mobile-call {
        position: fixed; right: 18px; bottom: 18px; z-index: 20; min-height: 44px; padding: 0 16px;
        box-shadow: 0 12px 28px rgba(47,84,198,0.28);
        transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      }
      .mobile-call:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(47,84,198,0.34); }
      img { max-width: 100%; height: auto; }
      .header .call-desktop { display: inline-flex; }

      /* 平板 */
      @media (max-width: 1024px) {
        .header {
          display: grid; grid-template-columns: 1fr auto; align-items: center;
          gap: 12px 16px; padding: 12px 20px; min-height: 0;
        }
        .brand { min-width: 0; }
        .nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; gap: 4px 12px; overflow-x: auto; scrollbar-width: none; }
        .about-grid, .contact, .footer-grid { grid-template-columns: 1fr; }
        .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .advantages-grid { grid-template-columns: 1fr; }
        .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .contact { justify-items: center; text-align: center; }
        .contact h2, .contact .kicker { text-align: center; }
        .contact h2::after { left: 50%; transform: translateX(-50%); }
        .contact .call { width: auto; }
        .section { scroll-margin-top: 120px; }
        .hero { scroll-margin-top: 120px; }
      }

      /* 手机 */
      @media (max-width: 768px) {
        :root {
          --h1-size: clamp(26px, 7vw, 34px);
          --h2-size: clamp(22px, 5.5vw, 28px);
          --h3-size: 18px;
          --body-size: 15px;
          --hero-p-size: 15px;
          --small-size: 13px;
          --brand-size: 17px;
          --section-pad-y: 40px;
          --card-gap: 12px;
        }
        .header {
          grid-template-columns: 1fr;
          padding: 10px 14px;
          gap: 8px;
        }
        .brand { width: 100%; }
        .brand strong { white-space: normal; word-break: break-word; }
        .header .call-desktop { display: none; }
        .nav {
          width: 100%; overflow-x: auto; flex-wrap: nowrap;
          gap: 0; padding-bottom: 2px;
          -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .nav::-webkit-scrollbar { display: none; }
        .nav a {
          flex: 0 0 auto; padding: 8px 12px; font-size: 13px;
          border-radius: 999px; background: #eef3ff; color: #334155;
        }
        .nav a::after { display: none; }
        .nav a.active, .nav a:hover { background: var(--color-primary); color: #fff; }

        .hero {
          min-height: 0; padding: 56px 16px 48px;
          scroll-margin-top: 100px;
        }
        .hero-content { width: 100%; max-width: 100%; }
        .hero-badge {
          display: inline-block; max-width: 100%;
          padding: 8px 12px; font-size: 12px; line-height: 1.5;
          white-space: normal; text-align: center;
        }
        h1 { margin-top: 14px; word-break: break-word; }
        .hero p { margin-top: 14px; font-size: 14px; line-height: 1.7; }
        .hero-cta { width: 100%; max-width: 320px; margin-top: 22px; }

        .section {
          padding: 40px 16px;
          scroll-margin-top: 100px;
        }
        .section-head { margin-bottom: 20px; }
        .section-head .body-text { font-size: 14px; line-height: 1.75; }

        .about-grid { gap: 18px; padding: 22px 16px 26px; }
        .about-copy { padding: 0; }
        .about-media { padding: 0; }
        .about-media-grid { gap: 10px; }
        .about-media .about-image { max-width: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
        .body-text { font-size: 14px; line-height: 1.8; }
        .about-phone { font-size: 15px; }

        .product-series { gap: 14px; padding-top: 18px; }
        .product-series-desc { font-size: 14px; line-height: 1.7; text-align: left; }
        .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .product-card-body { padding: 10px 8px 12px; }
        .product-card strong { font-size: 13px; line-height: 1.4; }

        .advantages-grid { grid-template-columns: 1fr; gap: 12px; }
        .advantage-card { grid-template-columns: 72px minmax(0, 1fr); }
        .advantage-icon::after { left: 8px; top: 8px; width: 12px; height: 12px; }
        .advantage-icon svg { width: 32px; height: 32px; }
        .advantage-body { padding: 14px 12px; gap: 4px; }
        .advantage-card strong { font-size: 14px; }
        .advantage-card p { font-size: 12px; }

        .case-grid { grid-template-columns: 1fr; gap: 12px; }
        .case-body { padding: 14px; }
        .case-card strong { font-size: 16px; }
        .case-card p {
          font-size: 13px; line-height: 1.7;
          display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
        }

        .contact {
          grid-template-columns: 1fr; margin: 0 16px 32px; padding: 22px 16px;
          gap: 14px; justify-items: center; text-align: center;
        }
        .contact .call { width: 100%; max-width: 280px; }
        .contact p { font-size: 14px; }

        .footer { padding: 28px 16px 0; }
        .footer-grid { gap: 22px; }
        .footer strong { font-size: 18px; }
        .footer-bottom { font-size: 11px; line-height: 1.6; word-break: break-word; }

        .viewport-disclaimer {
          padding: 8px 12px 10px; font-size: 11px; line-height: 1.55;
          max-height: 22vh; overflow-y: auto;
        }
        body.has-viewport-disclaimer { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0px)); }
        .mobile-call {
          left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
          width: auto; justify-content: center; min-height: 48px; font-size: 15px;
          border-radius: 10px;
        }
        body.has-viewport-disclaimer .mobile-call {
          bottom: calc(12px + min(22vh, 110px) + env(safe-area-inset-bottom, 0px));
        }
        .report-modal { padding: 16px; border-radius: 10px; }
        .report-modal .rm-actions { flex-wrap: wrap; }
        .report-modal .rm-btn { flex: 1; min-width: 120px; }
      }

      /* 小屏手机 */
      @media (max-width: 480px) {
        .product-grid { grid-template-columns: 1fr; }
        .advantage-card { grid-template-columns: 64px minmax(0, 1fr); }
        .advantage-icon svg { width: 28px; height: 28px; }
        .hero { padding: 44px 14px 40px; }
        .section { padding: 36px 14px; }
        .contact { margin-inline: 14px; padding: 20px 14px; }
        .nav a { padding: 7px 10px; font-size: 12px; }
      }

      @media (hover: none) {
        .about-grid:hover,
        .advantage-card:hover,
        .product-card:hover,
        .case-card:hover,
        .contact:hover,
        .call:hover,
        .mobile-call:hover { transform: none; }
      }
    
      /* 新闻动态 */
      .news-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }
      .news-card {
        display: grid;
        gap: 12px;
        padding: 22px 20px;
        background: #EAF1FF;
        border: 1px solid rgba(47,84,198,0.12);
        border-radius: 16px;
        text-decoration: none;
        color: inherit;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      }
      .news-card:hover {
        transform: translateY(-3px);
        border-color: rgba(47,84,198,0.28);
        box-shadow: 0 14px 28px rgba(47,84,198,0.12);
      }
      .news-card time {
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
      }
      .news-card strong {
        color: #16318f;
        font-size: 17px;
        line-height: 1.45;
        font-weight: 900;
      }
      .news-card p {
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 700;
      }
      .news-list {
        display: grid;
        gap: 16px;
      }
      .news-list-item {
        display: grid;
        gap: 8px;
        padding: 20px 22px;
        background: #EAF1FF;
        border: 1px solid rgba(47,84,198,0.12);
        border-radius: 14px;
        text-decoration: none;
        color: inherit;
      }
      .news-list-item:hover { border-color: rgba(47,84,198,0.3); }
      .news-list-item strong { color: #16318f; font-size: 18px; font-weight: 900; }
      .news-list-item time, .news-list-item p { color: #64748b; font-size: 14px; font-weight: 700; margin: 0; line-height: 1.7; }
      .news-article {
        max-width: 860px;
        margin: 0 auto;
        display: grid;
        gap: 18px;
      }
      .news-article time { color: #64748b; font-size: 14px; font-weight: 700; }
      .news-article h1 {
        margin: 0;
        color: #16318f;
        font-size: clamp(26px, 3vw, 34px);
        line-height: 1.35;
        font-weight: 900;
      }
      .news-article .body-text { color: #475569; font-size: 15px; line-height: 1.9; font-weight: 600; }
      .news-back { color: var(--color-primary); font-weight: 800; text-decoration: none; }
      .news-back:hover { text-decoration: underline; }
      .contact-card {
        display: grid;
        gap: 14px;
        max-width: 560px;
        margin: 0 auto;
        padding: 28px 26px;
        background: #EAF1FF;
        border: 1px solid rgba(47,84,198,0.14);
        border-radius: 16px;
      }
      .contact-card dl { margin: 0; display: grid; gap: 12px; }
      .contact-card dt { color: #64748b; font-size: 13px; font-weight: 800; }
      .contact-card dd { margin: 4px 0 0; color: #16318f; font-size: 17px; font-weight: 900; }
      .page-main { padding-top: 12px; }
      @media (max-width: 900px) {
        .news-grid { grid-template-columns: 1fr; }
      }