:root {
      color-scheme: light;
      --ink: #202923;
      --muted: #5c655f;
      --paper: #f8f8f1;
      --white: #fffefa;
      --line: #dfe4da;
      --green: #235d47;
      --lime: #d6ed59;
      --coral: #f16d52;
      --blue: #94d9ed;
      --yellow: #f5d560;
      --container: 1180px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 84px; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(ellipse at 5% 21%, rgba(214,237,89,.17), transparent 22rem),
        radial-gradient(ellipse at 95% 51%, rgba(148,217,237,.18), transparent 25rem),
        var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      line-height: 1.7;
    }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    img { display: block; max-width: 100%; height: auto; }
    .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
    .site-header { position: sticky; top: 0; z-index: 20; background: rgba(248,248,241,.94); border-bottom: 1px solid rgba(32,41,35,.1); backdrop-filter: blur(14px); }
    .nav-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; white-space: nowrap; }
    .brand img { width: 42px; max-height: 42px; object-fit: contain; }
    .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 0; flex-wrap: wrap; }
    .nav-links a { padding: 9px 10px; color: #39453d; font-size: 13px; text-decoration: none; border-radius: 5px; transition: background .2s, color .2s; }
    .nav-links a:hover { background: var(--lime); color: var(--ink); }
    .nav-links .nav-cta { background: var(--green); color: white; margin-left: 8px; }
    .menu-toggle { display: none; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink); padding: 8px 12px; cursor: pointer; }
    .hero { overflow: hidden; position: relative; padding: 76px 0 48px; border-bottom: 1px solid var(--line); }
    .hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; }
    .hero::before { width: 230px; height: 48px; right: 8%; top: 80px; border: 4px solid var(--coral); border-radius: 50%; transform: rotate(-15deg); opacity: .76; }
    .hero::after { width: 22px; height: 22px; right: 16%; top: 180px; background: var(--blue); border-radius: 50%; box-shadow: 50px 34px 0 var(--yellow), -72px 61px 0 var(--lime); }
    .hero-inner { position: relative; z-index: 1; max-width: 800px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 750; color: var(--green); }
    .eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--coral); border-radius: 50%; }
    h1 { max-width: 760px; margin: 15px 0 16px; font-size: clamp(38px, 6vw, 70px); line-height: 1.13; letter-spacing: 0; }
    .hero h1 span { position: relative; z-index: 0; white-space: nowrap; }
    .hero h1 span::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: 2px; height: 35%; background: var(--lime); transform: rotate(-1.4deg); }
    .hero-copy { max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
    .button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--green); border-radius: 5px; background: var(--green); color: white; font-weight: 750; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; cursor: pointer; }
    .button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(35,93,71,.15); }
    .button-outline { background: transparent; color: var(--green); }
    .hero-note { margin-top: 18px; color: var(--muted); font-size: 13px; }
    .hero-note strong { color: var(--ink); }
    .quick-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .quick-item { padding: 17px 20px 17px 0; }
    .quick-item + .quick-item { padding-left: 20px; border-left: 1px solid var(--line); }
    .quick-item strong { display: block; font-size: 15px; }
    .quick-item span { color: var(--muted); font-size: 13px; }
    .section { padding: 72px 0; border-bottom: 1px solid rgba(32,41,35,.09); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
    .section-kicker { margin: 0 0 6px; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
    h2 { margin: 0; font-size: clamp(27px, 4vw, 39px); line-height: 1.24; letter-spacing: 0; }
    .section-lead { max-width: 570px; margin: 10px 0 0; color: var(--muted); }
    h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.4; letter-spacing: 0; }
    .intro-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 42px; align-items: start; }
    .intro-copy p { margin: 0 0 14px; color: var(--muted); }
    .principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; margin-top: 20px; }
    .principle { padding: 13px 0; border-top: 1px solid var(--line); }
    .principle strong { display: block; }
    .principle span { color: var(--muted); font-size: 13px; }
    .model-band { padding: 24px; background: #eaf2e7; border-left: 5px solid var(--green); }
    .model-band p { margin: 8px 0 14px; color: var(--muted); }
    .tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag { padding: 5px 10px; background: var(--white); border: 1px solid #d9e3d7; border-radius: 3px; font-size: 12px; }
    .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .service { position: relative; min-height: 170px; padding: 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); transition: transform .2s, box-shadow .2s; }
    .service:hover, .case:hover, .quote:hover { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(32,41,35,.08); }
    .service-mark { width: 32px; height: 7px; margin-bottom: 14px; border-radius: 9px; background: var(--coral); }
    .service:nth-child(3n+2) .service-mark { background: #68b8cf; }
    .service:nth-child(3n) .service-mark { background: #bdd63c; }
    .service p { margin: 0; color: var(--muted); font-size: 13px; }
    .service .service-more { display: inline-block; margin-top: 12px; color: var(--green); font-size: 13px; font-weight: 750; text-decoration: none; }
    .workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: steps; }
    .step { position: relative; padding: 20px 22px 20px 0; border-top: 2px solid var(--green); counter-increment: steps; }
    .step::before { content: "0" counter(steps); display: inline-block; margin-bottom: 14px; padding: 3px 8px; background: var(--lime); font-size: 12px; font-weight: 800; }
    .step + .step { margin-left: 18px; }
    .step h3 { font-size: 17px; }
    .step p { margin: 0; color: var(--muted); font-size: 13px; }
    .split-band { display: grid; grid-template-columns: .85fr 1.15fr; gap: 38px; align-items: start; }
    .promise { padding: 26px; background: var(--green); color: white; border-radius: 5px; }
    .promise h3 { font-size: 22px; }
    .promise p { color: #e0ece4; }
    .promise .button { border-color: var(--lime); background: var(--lime); color: var(--ink); }
    .check-list { padding: 0; margin: 20px 0 0; list-style: none; }
    .check-list li { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.2); }
    .check-list li::before { content: "✓"; margin-right: 10px; color: var(--lime); font-weight: 800; }
    .solution-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
    .solution { padding: 15px 0; border-bottom: 1px solid var(--line); }
    .solution p { margin: 0; color: var(--muted); font-size: 13px; }
    .network { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
    .network-copy p { color: var(--muted); }
    .network-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
    .network-list span { padding: 7px 12px; background: #e5f1ed; border-radius: 3px; font-size: 13px; }
    .network-note { padding: 22px; border: 1px dashed #9cae9d; border-radius: 5px; background: rgba(255,254,250,.68); }
    .network-note strong { display: block; font-size: 18px; }
    .network-note p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
    .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .case { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--white); transition: transform .2s, box-shadow .2s; }
    .case img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .case-copy { padding: 17px; }
    .case-copy p { margin: 0; color: var(--muted); font-size: 13px; }
    .rating-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 28px; align-items: start; }
    .rating { padding: 25px; background: #f7e7a3; border-radius: 5px; }
    .rating .score { display: block; font-size: 56px; font-weight: 850; line-height: 1.1; }
    .stars { color: #8d6710; font-size: 21px; letter-spacing: 0; }
    .rating p { margin: 10px 0 0; font-size: 13px; }
    .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
    th { background: #edf2e9; font-size: 13px; }
    td { font-size: 13px; }
    tr:last-child td { border-bottom: 0; }
    td:first-child { min-width: 125px; font-weight: 750; }
    .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .quote { padding: 19px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); transition: transform .2s, box-shadow .2s; }
    .quote p { margin: 0 0 15px; color: #414c44; font-size: 14px; }
    .quote strong { font-size: 13px; }
    .quote span { display: block; color: var(--muted); font-size: 12px; }
    .match-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start; }
    .match-copy p { color: var(--muted); }
    form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .field { display: grid; gap: 6px; }
    .field-full { grid-column: 1 / -1; }
    label { font-size: 13px; font-weight: 700; }
    input, select, textarea { width: 100%; padding: 11px 12px; border: 1px solid #cbd4ca; border-radius: 4px; background: var(--white); color: var(--ink); }
    input:focus, select:focus, textarea:focus { outline: 2px solid #a8c8a5; outline-offset: 1px; }
    textarea { min-height: 116px; resize: vertical; }
    .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .form-hint { color: var(--muted); font-size: 12px; }
    .articles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .article { min-height: 116px; padding: 15px; border-top: 3px solid var(--coral); background: var(--white); text-decoration: none; transition: background .2s; }
    .article:nth-child(2n) { border-color: #67b6cf; }
    .article:hover { background: #edf2e9; }
    .article small { display: block; margin-bottom: 8px; color: var(--muted); }
    .article strong { font-size: 14px; }
    .faq-list { border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary { position: relative; padding: 17px 38px 17px 0; font-weight: 750; cursor: pointer; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--green); font-size: 23px; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 850px; margin: 0; padding: 0 34px 17px 0; color: var(--muted); font-size: 14px; }
    .bottom-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
    .contact-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
    .contact-item { padding: 12px 0; border-top: 1px solid var(--line); }
    .contact-item strong { display: block; font-size: 13px; }
    .contact-item a { color: var(--green); font-size: 14px; text-decoration-thickness: 1px; }
    .qr-wrap { display: grid; grid-template-columns: 110px 1fr; gap: 17px; align-items: center; margin-top: 18px; }
    .qr-wrap img { width: 110px; padding: 5px; border: 1px solid var(--line); background: white; }
    .qr-wrap p { margin: 0; color: var(--muted); font-size: 13px; }
    .affiliate { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
    .affiliate h3 { font-size: 15px; }
    .affiliate-links { display: flex; flex-wrap: wrap; gap: 7px 15px; }
    .affiliate-links a { color: var(--green); font-size: 13px; }
    .footer { padding: 22px 0; background: #e9eee5; color: #29372e; }
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; font-size: 12px; }
    .footer p { margin: 0; }
    .footer a { color: #235d47; }
    .floating { position: fixed; right: 18px; bottom: 20px; z-index: 15; display: grid; gap: 8px; }
    .floating a { display: grid; place-items: center; min-width: 46px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: white; font-size: 12px; text-decoration: none; box-shadow: 0 3px 12px rgba(32,41,35,.16); }
    .to-top { display: none !important; }
    .to-top.visible { display: grid !important; }
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }
    @media (max-width: 980px) {
      .menu-toggle { display: inline-flex; }
      .nav-row { position: relative; }
      .nav-links { display: none; position: absolute; top: calc(100% - 1px); left: 0; right: 0; align-items: stretch; padding: 10px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 18px rgba(32,41,35,.08); }
      .nav-links.open { display: grid; grid-template-columns: repeat(3, 1fr); }
      .nav-links a { text-align: center; }
      .nav-links .nav-cta { margin: 0; }
      .service-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 700px) {
      .container { width: min(var(--container), calc(100% - 28px)); }
      .hero { padding-top: 54px; }
      .hero::before { right: -80px; top: 36px; opacity: .4; }
      .hero::after { right: 12%; top: 140px; opacity: .65; }
      .hero-copy { font-size: 15px; }
      .quick-strip { grid-template-columns: repeat(2, 1fr); }
      .quick-item { padding: 13px 10px 13px 0; }
      .quick-item + .quick-item { padding-left: 12px; }
      .quick-item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
      .quick-item:nth-child(4) { border-top: 1px solid var(--line); }
      .section { padding: 52px 0; }
      .section-head { display: block; }
      .section-head .button { margin-top: 16px; }
      .intro-grid, .split-band, .network, .rating-layout, .match-grid, .bottom-grid { grid-template-columns: 1fr; gap: 22px; }
      .service-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .service { min-height: 0; padding: 16px; }
      .workflow { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
      .step + .step { margin-left: 0; }
      .step:nth-child(even) { margin-left: 14px; }
      .solution-list { grid-template-columns: 1fr; }
      .case-grid, .quotes { grid-template-columns: repeat(2, 1fr); }
      .articles { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 440px) {
      .nav-links.open { grid-template-columns: repeat(2, 1fr); }
      .case-grid, .quotes { grid-template-columns: 1fr; }
      .service-grid { grid-template-columns: 1fr 1fr; }
      .service h3 { font-size: 16px; }
      form { grid-template-columns: 1fr; }
      .field-full, .form-actions { grid-column: auto; }
      .articles { grid-template-columns: 1fr 1fr; }
      .footer-row { align-items: flex-start; flex-direction: column; }
      .floating { right: 9px; bottom: 12px; }
      .floating a { min-width: 40px; padding: 5px 7px; }
    }