:root {
      --ink: #111827;
      --muted: #758096;
      --soft: #f8f9fc;
      --line: #e7eaf1;
      --blue: #4775f6;
      --purple: #8b45ef;
      --pink: #e92d78;
      --orange: #f28a0d;
      --navy: #151d31;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    .page { overflow: hidden; }
    .container { width: min(1280px, calc(100% - 96px)); margin: 0 auto; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      height: 70px;
      border-bottom: 1px solid rgba(226, 229, 237, .84);
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(16px);
    }
    .topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; }
    .brand-mark {
      display: grid; place-items: center; width: 30px; height: 30px;
      color: #fff; background: linear-gradient(135deg, #4574f7, #8d45ef);
      border-radius: 9px; font-size: 14px;
    }
    .brand-text small { display: block; margin-top: 2px; color: #a4adbc; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
    .nav { display: flex; align-items: center; gap: 10px; color: #9aa4b5; font-size: 12px; }
    .nav a { padding: 8px 12px; border-radius: 18px; }
    .nav a:hover, .nav a.active { color: #fff; background: var(--blue); box-shadow: 0 6px 15px rgba(71,117,246,.2); }
    .nav a:not(.active):hover { color: var(--blue); background: #f1f4ff; }

    .hero { min-height: 720px; padding: 72px 0 48px; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); }
    .hero-inner { max-width: 1050px; }
    .edition { display: inline-flex; align-items: center; gap: 13px; color: #a0aabb; font-size: 12px; }
    .edition b { padding: 6px 12px; color: #667085; border: 1px solid #e6e9ef; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(20,31,55,.04); }
    .edition b::before { content: "✦"; margin-right: 6px; color: var(--orange); }
    .hero h1 { margin: 30px 0 20px; font-size: clamp(55px, 7vw, 92px); line-height: 1.04; letter-spacing: 0; }
    .hero h1 .gradient-a { color: var(--blue); background: linear-gradient(90deg, #426ff5, #8e3de7, #dd247d); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .hero h1 .gradient-b { color: var(--orange); background: linear-gradient(90deg, #f18b0b, #f0346f); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .hero-copy { max-width: 720px; margin: 0; color: #7b8495; font-size: 17px; line-height: 1.9; }
    .metrics { display: grid; grid-template-columns: repeat(4, 190px); gap: 14px; margin-top: 48px; }
    .metric { position: relative; padding: 18px 20px 17px; border: 1px solid #edf0f5; border-radius: 17px; background: #fff; box-shadow: 0 5px 16px rgba(22,36,66,.05); }
    .metric::before { content: ""; position: absolute; inset: -1px -1px auto; height: 4px; border-radius: 18px 18px 0 0; background: var(--accent); }
    .metric-label { display: flex; align-items: center; gap: 7px; color: #a5adbc; font-size: 12px; font-weight: 700; }
    .metric-label i { color: var(--accent); font-style: normal; font-size: 16px; }
    .metric strong { display: block; margin-top: 8px; color: var(--accent); font-size: 32px; line-height: 1; }
    .contents { display: flex; align-items: center; gap: 9px; margin-top: 54px; color: #a0a9b9; font-size: 12px; }
    .contents > span { margin-right: 6px; letter-spacing: .05em; }
    .contents a { padding: 9px 14px; border: 1px solid #e9ecf1; border-radius: 20px; background: #fff; color: #788294; font-weight: 800; }
    .contents a:first-of-type { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 7px 14px rgba(71,117,246,.22); }
    .scroll-note { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 66px; color: #c2c8d4; font-size: 10px; letter-spacing: .3em; }
    .scroll-note::after { content: ""; width: 1px; height: 40px; background: linear-gradient(#cad1df, transparent); }

    .section { position: relative; padding: 88px 0 90px; border-top: 1px solid #f0f1f4; }
    .section::after { content: ""; position: absolute; right: 8%; top: 90px; width: 19px; height: 19px; background: #f4f7fc; transform: rotate(-7deg); }
    .section-heading { display: flex; align-items: flex-end; gap: 26px; margin-bottom: 45px; }
    .section-number { margin: -8px 0 0 -2px; font-family: Georgia, "Times New Roman", serif; font-size: 96px; font-weight: 700; line-height: .8; letter-spacing: 0; color: var(--section-color); }
    .section-heading-main { padding-bottom: 3px; }
    .section-heading-main small { display: block; color: #a5adbc; font-size: 13px; font-weight: 800; letter-spacing: .25em; }
    .section-heading-main h2 { margin: 8px 0 0; font-size: 36px; line-height: 1.15; }
    .section-heading-main::after { content: ""; display: block; width: 80px; height: 2px; margin-top: 27px; background: var(--section-color); }
    .section-lead { margin: -23px 0 35px; color: #7b8495; font-size: 15px; line-height: 1.8; }
    .grid-company { display: grid; grid-template-columns: 1.62fr 1fr; gap: 28px; }
    .card { position: relative; overflow: hidden; border: 1px solid var(--card-line, #d8e3ff); border-radius: 16px; background: linear-gradient(135deg, #fff 10%, var(--card-soft, #f7f9ff)); box-shadow: 0 7px 17px rgba(28,43,75,.05); }
    .card::after { content: ""; position: absolute; right: -70px; top: -75px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, var(--card-glow, rgba(74,117,246,.12)), transparent 68%); }
    .card-inner { position: relative; z-index: 1; padding: 30px 34px; }
    .card-title { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; }
    .icon { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; border-radius: 11px; background: linear-gradient(135deg, var(--card-color), var(--card-color-2, #7796ff)); box-shadow: 0 7px 14px rgba(54,84,186,.18); font-size: 17px; }
    .card-title h3 { margin: 0; font-size: 21px; }
    .card-badge { margin-left: auto; color: var(--card-color); font-size: 11px; font-weight: 800; }
    .card p { margin: 0; color: #697487; font-size: 14px; line-height: 1.85; }
    .card p + p { margin-top: 16px; }
    .list { display: grid; gap: 15px; margin: 18px 0 0; padding: 0; list-style: none; color: #687286; font-size: 14px; line-height: 1.7; }
    .list li { display: flex; gap: 9px; }
    .list li::before { content: "✓"; flex: 0 0 auto; color: var(--card-color); font-weight: 900; }
    .quote { margin-top: 24px; padding: 17px 18px; border-left: 2px solid var(--card-color); color: #788293; background: rgba(255,255,255,.58); font-size: 13px; font-style: italic; line-height: 1.7; }
    .timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 43px; padding-top: 22px; border-top: 1px solid #dce3f7; }
    .timeline::before { content: ""; position: absolute; left: 15px; right: 15px; top: 18px; height: 1px; background: #cbd6f3; }
    .timeline-item { position: relative; padding-left: 20px; }
    .timeline-item::before { content: ""; position: absolute; left: 10px; top: -10px; width: 11px; height: 11px; border: 4px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #b9caf8; }
    .timeline-year { color: var(--blue); font-size: 14px; font-weight: 900; }
    .timeline h4 { margin: 12px 0 7px; font-size: 16px; }
    .timeline p { margin: 0; color: #788294; font-size: 12px; line-height: 1.7; }

    .workflow-box { padding: 23px 26px 28px; border: 1px solid #e5dcff; border-radius: 17px; background: linear-gradient(135deg, #fbf9ff, #fff); }
    .workflow-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
    .workflow-top h3 { margin: 0; font-size: 18px; }
    .workflow-top span { color: #a0a8b7; font-size: 10px; letter-spacing: .1em; }
    .workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .workflow-step { position: relative; padding: 24px 18px 19px; border: 1px solid #ece9f7; border-radius: 14px; background: #fff; }
    .workflow-step::before { content: attr(data-no); position: absolute; left: -9px; top: -13px; display: grid; place-items: center; width: 30px; height: 30px; color: #fff; border-radius: 50%; background: var(--purple); box-shadow: 0 5px 10px rgba(139,69,239,.22); font-size: 12px; font-weight: 900; }
    .workflow-step .icon { width: 34px; height: 34px; color: var(--purple); background: #f3edff; box-shadow: none; }
    .workflow-step h4 { margin: 15px 0 6px; font-size: 15px; }
    .workflow-step p { margin: 0; color: #7b8495; font-size: 12px; line-height: 1.65; }
    .two-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 28px; }
    .mini-card { padding: 26px 29px; border: 1px solid #e2ddff; border-radius: 16px; background: #fff; }
    .mini-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 17px; font-size: 18px; }
    .mini-card h3 .icon { width: 32px; height: 32px; }
    .mini-card p { margin: 0; color: #6d778a; font-size: 14px; line-height: 1.9; }
    .platform-box { margin-top: 20px; padding: 25px 29px 30px; border: 1px solid #e2ddff; border-radius: 16px; background: linear-gradient(135deg, #fff, #fbf9ff); }
    .platform-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 20px; }
    .platform { padding: 19px; border: 1px solid #eeeafa; border-radius: 13px; background: #fbfaff; }
    .platform .icon { width: 35px; height: 35px; margin-bottom: 14px; }
    .platform small { display: block; color: #a3a9b6; font-size: 10px; letter-spacing: .12em; }
    .platform strong { display: block; margin-top: 6px; font-size: 15px; }

    .feature-group { margin-bottom: 34px; }
    .feature-group:last-child { margin-bottom: 0; }
    .group-title { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
    .group-title strong { padding: 9px 15px; color: var(--group-color); border-radius: 21px; background: var(--group-bg); font-size: 15px; }
    .group-title span { color: #a1a9b8; font-size: 13px; }
    .group-count { margin-left: auto; color: var(--group-color); font-size: 12px; font-weight: 900; }
    .feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .feature { position: relative; min-height: 143px; padding: 22px 24px 18px; border: 1px solid var(--group-line); border-radius: 15px; background: #fff; box-shadow: 0 3px 9px rgba(25,39,74,.03); }
    .feature::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--group-color); opacity: 0; transition: opacity .2s; }
    .feature:hover::after { opacity: 1; }
    .feature-head { display: flex; gap: 13px; align-items: flex-start; }
    .feature .icon { flex: 0 0 auto; width: 38px; height: 38px; color: var(--group-color); background: var(--group-bg); box-shadow: none; }
    .feature h3 { margin: 5px 0 8px; font-size: 17px; }
    .feature p { margin: 0 0 0 51px; color: #7a8495; font-size: 13px; line-height: 1.75; }
    .capability-note { margin-top: 30px; padding: 23px 27px; border: 1px solid #edf0f4; border-radius: 16px; background: #fff; box-shadow: 0 5px 16px rgba(20,35,69,.04); }
    .capability-note h3 { margin: 0 0 19px; font-size: 17px; }
    .capability-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px 38px; }
    .bar-label { display: flex; justify-content: space-between; color: #687286; font-size: 13px; }
    .bar-label b { color: var(--ink); }
    .bar { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 6px; background: #eef0f5; }
    .bar i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--bar-color); }

    .advantage-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
    .advantage-card { min-height: 260px; padding: 29px 31px; border: 1px solid var(--edge-line); border-left: 4px solid var(--edge-color); border-radius: 16px; background: linear-gradient(135deg, #fff, var(--edge-soft)); }
    .advantage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .advantage-head .icon { width: 43px; height: 43px; }
    .advantage-head small { display: block; color: #a1aaba; font-size: 10px; letter-spacing: .1em; }
    .advantage-head h3 { margin: 4px 0 0; font-size: 19px; }
    .advantage-card ul { display: grid; gap: 13px; margin: 0; padding-left: 19px; color: #677184; font-size: 14px; line-height: 1.8; }

    .service-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 55px; padding: 31px 37px; border-radius: 22px; background: linear-gradient(110deg, #131d31, #202c46); box-shadow: 0 17px 35px rgba(21,29,49,.17); }
    .service { display: flex; align-items: center; gap: 16px; color: #fff; }
    .service .icon { width: 45px; height: 45px; color: #fff; background: linear-gradient(135deg, #ffb412, #ff7d14); box-shadow: none; }
    .service strong { display: block; color: #ffcb54; font-size: 23px; }
    .service span { display: block; margin-top: 4px; color: #bdc5d2; font-size: 12px; }

    .contact { margin: 73px 0 0; padding: 65px 60px 60px; border-radius: 25px; color: #fff; background: linear-gradient(125deg, #182338, #10192d); text-align: center; }
    .contact-kicker { display: inline-block; padding: 7px 13px; border: 1px solid #68748d; border-radius: 20px; color: #e6eaf2; font-size: 12px; }
    .contact h2 { margin: 19px 0 11px; font-size: 40px; }
    .contact h2 em { color: #7e9cff; font-style: normal; }
    .contact > p { margin: 0; color: #b8c0d0; font-size: 15px; }
    .contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 39px; }
    .contact-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-right: auto; margin-left: auto; }
    .contact-item { position: relative; min-height: 190px; padding: 29px 20px 20px; border: 1px solid rgba(190,202,227,.17); border-radius: 17px; background: rgba(255,255,255,.06); }
    .contact-item .icon { width: 55px; height: 55px; margin: 0 auto 17px; font-size: 22px; }
    .contact-item h3 { margin: 0; font-size: 17px; }
    .contact-item p { margin: 8px 0 0; color: #aeb8ca; font-size: 12px; line-height: 1.7; }
    .contact-item-vip .vip-tag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(90deg, #ffb412, #ff7d14); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
    .contact-phone { margin-top: 14px; color: #3de083; font-size: 31px; line-height: 1.05; font-weight: 800; letter-spacing: .02em; }
    .contact-button { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 352px); margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, #ffb412, #ff7d14); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
    .contact-cta { display: flex; justify-content: center; margin-top: 38px; }
    .contact-action { display: inline-flex; align-items: center; justify-content: center; min-width: 196px; padding: 12px 22px; border: 1px solid #657287; border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
    .contact-foot { margin-top: 35px; color: #9eabc0; font-size: 12px; }
    .footer { display: block; padding: 24px 0 30px; color: #9ca5b3; font-size: 11px; line-height: 1.8; text-align: center; }
    .footer span { display: block; }
    @media (max-width: 900px) {
      .container { width: min(100% - 44px, 700px); }
      .nav a:nth-child(-n+2) { display: none; }
      .hero { min-height: auto; padding-top: 55px; }
      .metrics { grid-template-columns: repeat(2, minmax(0, 190px)); }
      .grid-company, .two-cards, .advantage-grid { grid-template-columns: 1fr; }
      .workflow, .feature-grid { grid-template-columns: repeat(2,1fr); }
      .platform-grid, .capability-bars { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: repeat(2,1fr); gap: 35px 20px; }
      .timeline::before { display: none; }
      .service-strip, .contact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .container { width: calc(100% - 32px); }
      .topbar { height: 62px; }
      .nav { gap: 0; }
      .nav a { display: none !important; }
      .nav a:last-child { display: block !important; }
      .hero h1 { margin-top: 25px; font-size: 48px; }
      .hero-copy { font-size: 14px; line-height: 1.8; }
      .metrics { grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 33px; }
      .metric { padding: 16px 14px; }
      .metric strong { font-size: 27px; }
      .contents { flex-wrap: wrap; margin-top: 36px; }
      .scroll-note { margin-top: 42px; }
      .section { padding: 63px 0 66px; }
      .section-heading { gap: 13px; margin-bottom: 32px; }
      .section-number { font-size: 66px; }
      .section-heading-main h2 { font-size: 28px; }
      .section-heading-main small { font-size: 10px; }
      .section-heading-main::after { margin-top: 17px; width: 55px; }
      .card-inner { padding: 23px 20px; }
      .workflow, .feature-grid { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr; }
      .contact { padding: 42px 16px; }
      .contact h2 { font-size: 30px; }
      .service-strip { padding: 25px 22px; gap: 25px; }
      .contact-phone { font-size: 28px; }
      .footer { display: block; }
      .footer span { display: block; }
    }