:root {
      color-scheme: light;
      --ink: #20232d;
      --muted: #626775;
      --line: #e9e7e2;
      --paper: #fffaf2;
      --white: #ffffff;
      --coral: #f45f50;
      --orange: #ff9c3c;
      --yellow: #ffd75e;
      --mint: #c8f0dc;
      --blue: #cfe7ff;
      --lilac: #e8d8ff;
      --green: #267b58;
      --shadow: 0 14px 36px rgba(51, 44, 31, .08);
      --container: 1160px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(ellipse at 12% 7%, rgba(255, 215, 94, .20), transparent 29rem),
        radial-gradient(ellipse at 92% 24%, rgba(200, 240, 220, .34), transparent 34rem),
        var(--paper);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
      line-height: 1.65;
    }
    a { color: inherit; }
    img { max-width: 100%; height: auto; }
    button, input, select, textarea { font: inherit; }
    .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
    .site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 250, 242, .94); border-bottom: 1px solid rgba(32, 35, 45, .08); backdrop-filter: blur(14px); }
    .header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 850; white-space: nowrap; }
    .ai-page-logo { width: 42px; height: 42px; object-fit: contain; }
    .nav-area { display: flex; align-items: center; gap: 20px; }
    .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
    .nav-links a { padding: 10px 9px; text-decoration: none; color: #464a55; font-size: 13px; font-weight: 650; white-space: nowrap; border-radius: 6px; transition: background .2s ease, color .2s ease; }
    .nav-links a:hover { background: #fff0d4; color: #a33d2e; }
    .nav-cta, .button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 6px; padding: 12px 18px; color: #fff; background: var(--coral); text-decoration: none; font-weight: 800; box-shadow: 0 6px 0 #cf493d; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; cursor: pointer; }
    .nav-cta:hover, .button:hover { background: #e95043; transform: translateY(-2px); box-shadow: 0 8px 0 #cf493d; }
    .nav-cta:active, .button:active { transform: translateY(3px); box-shadow: 0 2px 0 #cf493d; }
    .menu-toggle { display: none; border: 1px solid var(--line); color: var(--ink); background: #fff; border-radius: 6px; min-width: 42px; min-height: 42px; font-size: 20px; cursor: pointer; }
    main { overflow: clip; }
    .hero { padding: 78px 0 54px; position: relative; }
    .hero::before { content: ""; position: absolute; inset: 26px 0 auto; height: 390px; pointer-events: none; background: linear-gradient(105deg, rgba(255, 215, 94, .16), rgba(255, 255, 255, 0) 48%, rgba(244, 95, 80, .08)); border-radius: 14px; }
    .hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); align-items: center; gap: 54px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #8b4e15; background: #fff0c3; border: 1px solid #ffe298; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; }
    .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
    h1 { max-width: 650px; margin: 18px 0 16px; font-size: clamp(42px, 6vw, 70px); line-height: 1.08; font-weight: 900; }
    h1 span { color: var(--coral); }
    .hero-copy { max-width: 610px; color: #555965; font-size: 17px; margin: 0; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 27px; align-items: center; }
    .button-secondary { display: inline-flex; justify-content: center; align-items: center; padding: 11px 16px; border: 1px solid #d9d6ce; background: #fff; border-radius: 6px; text-decoration: none; font-weight: 750; transition: transform .18s ease, border-color .18s ease; }
    .button-secondary:hover { transform: translateY(-2px); border-color: var(--coral); }
    .hero-note { font-size: 12px; color: var(--muted); margin-top: 17px; }
    .hero-art { min-height: 330px; position: relative; display: grid; place-items: center; }
    .orbit { width: min(100%, 410px); aspect-ratio: 1; position: relative; border: 1px solid rgba(32, 35, 45, .13); border-radius: 50%; display: grid; place-items: center; animation: float 6s ease-in-out infinite; }
    .orbit::before, .orbit::after { content: ""; position: absolute; border: 1px dashed rgba(32, 35, 45, .16); border-radius: 50%; inset: 12%; }
    .orbit::after { inset: 25%; border-style: solid; border-color: rgba(244, 95, 80, .20); }
    .core { position: relative; z-index: 2; width: 126px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 32px; background: var(--yellow); transform: rotate(-7deg); box-shadow: 9px 9px 0 #f5ae47; font-size: 22px; font-weight: 900; line-height: 1.2; }
    .core span { font-size: 12px; font-weight: 700; margin-top: 6px; }
    .orbit-chip { position: absolute; z-index: 3; padding: 9px 13px; border: 1px solid rgba(32, 35, 45, .08); border-radius: 6px; box-shadow: var(--shadow); background: #fff; font-size: 13px; font-weight: 800; animation: bob 4s ease-in-out infinite; }
    .orbit-chip:nth-child(2) { top: 15%; left: 12%; background: var(--mint); }
    .orbit-chip:nth-child(3) { top: 17%; right: 7%; background: var(--lilac); animation-delay: -.7s; }
    .orbit-chip:nth-child(4) { bottom: 18%; left: 5%; background: var(--blue); animation-delay: -1.4s; }
    .orbit-chip:nth-child(5) { bottom: 12%; right: 12%; background: #ffd7cf; animation-delay: -2s; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; max-width: 540px; }
    .hero-stat { border-left: 3px solid var(--orange); padding: 2px 0 2px 12px; }
    .hero-stat strong { display: block; font-size: 15px; }
    .hero-stat span { color: var(--muted); font-size: 12px; }
    .ticker { border-block: 1px solid var(--line); background: rgba(255, 255, 255, .56); overflow: hidden; }
    .ticker-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px 22px; padding: 15px 0; color: #535865; font-size: 12px; font-weight: 700; }
    .ticker-inner span::before { content: "✦"; color: var(--coral); margin-right: 7px; }
    .section { padding: 78px 0; }
    .section-head { max-width: 720px; margin-bottom: 34px; }
    .section-kicker { margin: 0 0 8px; color: #be4c3c; font-size: 12px; text-transform: uppercase; font-weight: 850; }
    h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
    .section-head > p:last-child { color: var(--muted); margin: 13px 0 0; }
    .intro-band { background: #fff; border-block: 1px solid var(--line); }
    .intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
    .intro-text p { color: var(--muted); margin: 16px 0; }
    .capability-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; margin: 24px 0 0; padding: 0; list-style: none; }
    .capability-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; }
    .capability-list li::before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 9px; }
    .models-panel { padding: 25px; background: #f2f9f4; border: 1px solid #d9ebdf; border-radius: 8px; }
    .models-panel h3 { margin: 0 0 8px; font-size: 19px; }
    .models-panel p { margin: 0 0 17px; color: var(--muted); font-size: 14px; }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag-cloud span { border: 1px solid #c9dfd0; background: #fff; border-radius: 4px; padding: 5px 9px; font-size: 12px; color: #315643; font-weight: 700; }
    .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .service-item { position: relative; padding: 20px 18px; border-top: 3px solid var(--accent, var(--coral)); background: #fff; box-shadow: 0 4px 16px rgba(48, 43, 34, .045); transition: transform .2s ease, box-shadow .2s ease; }
    .service-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .service-item h3 { margin: 0 0 8px; font-size: 17px; }
    .service-item p { margin: 0; color: var(--muted); font-size: 13px; }
    .service-item:nth-child(4n+2) { --accent: #32a477; }
    .service-item:nth-child(4n+3) { --accent: #428bd2; }
    .service-item:nth-child(4n+4) { --accent: #e2a22a; }
    .service-item .number { color: #a8aab0; font-size: 11px; font-weight: 800; margin-bottom: 9px; }
    .production-section { color: var(--ink); background: #fff1d1; border-block: 1px solid #f1dfb5; }
    .production-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
    .production-copy p { color: #555965; }
    .production-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .production-step { padding: 17px; border: 1px solid rgba(79, 64, 33, .14); background: rgba(255, 255, 255, .68); border-radius: 6px; }
    .production-step b { display: block; font-size: 14px; margin-bottom: 5px; }
    .production-step span { color: var(--muted); font-size: 12px; }
    .timeline { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
    .timeline article { position: relative; padding: 18px 20px 12px 0; border-top: 2px solid #e5b548; }
    .timeline article::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); border: 2px solid #fff1d1; }
    .timeline b { display: block; margin: 0 0 5px; }
    .timeline p { color: var(--muted); font-size: 13px; margin: 0; }
    .solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .solution { padding: 23px; border-left: 4px solid var(--green); background: #fff; border-bottom: 1px solid var(--line); }
    .solution:nth-child(2) { border-color: var(--coral); }
    .solution:nth-child(3) { border-color: #498fd0; }
    .solution h3 { margin: 0 0 9px; font-size: 18px; }
    .solution p { color: var(--muted); margin: 0; font-size: 14px; }
    .network { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: center; padding: 28px; background: #eaf5ff; border: 1px solid #d5e8f8; }
    .network h3 { margin: 0 0 10px; font-size: 22px; }
    .network p { margin: 0; color: var(--muted); }
    .network-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
    .network-points div { padding: 13px; border-left: 2px solid #428bd2; background: rgba(255,255,255,.72); font-weight: 750; font-size: 14px; }
    .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .case { padding: 20px; background: #fff; border: 1px solid var(--line); }
    .case .case-type { color: #a44c32; font-size: 11px; font-weight: 850; }
    .case h3 { margin: 6px 0; font-size: 17px; }
    .case p { color: var(--muted); margin: 0; font-size: 13px; }
    .case a { display: inline-block; margin-top: 13px; color: #a33d2e; font-size: 13px; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .review { padding: 19px; background: #fff; border: 1px solid var(--line); }
    .review .stars { color: #d88e19; letter-spacing: 0; font-size: 14px; }
    .review p { color: #484c56; font-size: 14px; margin: 10px 0 14px; }
    .review strong { display: block; font-size: 13px; }
    .review span { color: var(--muted); font-size: 12px; }
    .comparison { background: #fff; border-block: 1px solid var(--line); }
    .score-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 0 0 23px; padding: 18px 20px; background: #fff0d2; border-left: 4px solid var(--orange); }
    .score-main { font-size: 35px; font-weight: 900; line-height: 1; color: #ae4a31; }
    .score-main small { color: var(--muted); font-size: 13px; font-weight: 650; }
    .score-stars { color: #ce8612; font-weight: 900; }
    .table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
    table { width: 100%; min-width: 690px; border-collapse: collapse; text-align: left; }
    th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
    th { background: #f3f7f2; color: #365442; font-size: 12px; }
    tbody tr:last-child td { border-bottom: 0; }
    td:first-child { font-weight: 750; }
    .good { color: #267b58; font-weight: 750; }
    .price-note { color: var(--muted); font-size: 12px; margin-top: 12px; }
    .faq-list { max-width: 900px; }
    .faq-item { background: rgba(255,255,255,.78); border-bottom: 1px solid #dcd9d0; }
    .faq-item:first-child { border-top: 1px solid #dcd9d0; }
    .faq-item summary { cursor: pointer; list-style: none; padding: 17px 42px 17px 4px; position: relative; font-weight: 780; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: "+"; position: absolute; right: 7px; top: 13px; font-size: 23px; color: var(--coral); transition: transform .2s ease; }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item p { color: var(--muted); margin: 0; padding: 0 36px 17px 4px; font-size: 14px; }
    .article-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .article-link { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; padding: 15px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
    .article-link:hover { border-color: var(--coral); transform: translateY(-3px); }
    .article-link span { font-size: 13px; font-weight: 750; }
    .article-link small { color: #a64c3a; font-size: 11px; }
    .contact-section { background: #dff2e7; border-top: 1px solid #c6e3d2; }
    .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: start; }
    .contact-details { display: grid; gap: 12px; margin-top: 22px; }
    .contact-details div { padding-bottom: 11px; border-bottom: 1px solid rgba(32,35,45,.13); }
    .contact-details b { display: block; font-size: 12px; color: #43614f; }
    .contact-details a { font-weight: 750; text-decoration: none; }
    .contact-details p { margin: 2px 0 0; font-weight: 750; }
    .qr-frame { width: 150px; padding: 8px; margin-top: 17px; background: #fff; border: 1px solid #bedac9; }
    .qr-frame img { display: block; width: 100%; height: auto; }
    .contact-form { padding: 24px; background: #fff; border: 1px solid #cde1d5; box-shadow: 0 12px 30px rgba(39, 76, 53, .08); }
    .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .field { display: grid; gap: 6px; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-size: 12px; font-weight: 800; }
    .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid #d9ded9; border-radius: 4px; background: #fff; color: var(--ink); }
    .field textarea { min-height: 110px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #99d7b0; border-color: #56a874; }
    .form-submit { margin-top: 16px; }
    .footer { padding: 26px 0 22px; color: #313540; background: #fff; border-top: 1px solid var(--line); }
    .footer-top { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
    .footer-brand p { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 8px 15px; justify-content: flex-end; }
    .footer-links a { color: #4a4f59; font-size: 12px; text-decoration: none; }
    .footer-links a:hover { color: #a33d2e; }
    .friend-links { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; }
    .friend-links a { color: #535965; font-size: 12px; text-decoration: none; }
    .copyright { margin-top: 14px; color: #686d76; font-size: 11px; }
    .float-contact { position: fixed; z-index: 15; right: 18px; bottom: 20px; display: grid; gap: 8px; }
    .float-contact a { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: #fff; text-decoration: none; font-weight: 900; font-size: 12px; box-shadow: 0 5px 16px rgba(127, 52, 44, .25); transition: transform .2s ease; }
    .float-contact a:last-child { background: #267b58; }
    .float-contact a:hover { transform: translateY(-3px); }
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(1deg); } }
    @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @media (max-width: 980px) {
      .nav-links a { padding-inline: 6px; font-size: 12px; }
      .nav-area { gap: 10px; }
      .nav-cta { padding: 10px 12px; font-size: 12px; }
      .service-grid { grid-template-columns: repeat(3, 1fr); }
      .article-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 760px) {
      .container { width: min(var(--container), calc(100% - 30px)); }
      .header-inner { min-height: 66px; }
      .menu-toggle { display: inline-grid; place-items: center; }
      .nav-area { gap: 8px; }
      .nav-cta { display: none; }
      .nav-links { display: none; position: absolute; top: 65px; left: 0; right: 0; padding: 10px 15px 15px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 18px rgba(32,35,45,.08); flex-direction: column; align-items: stretch; }
      .nav-links.is-open { display: flex; }
      .nav-links a { padding: 10px 12px; font-size: 14px; }
      .hero { padding: 53px 0 38px; }
      .hero-inner, .intro-grid, .production-grid, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
      .hero-art { min-height: 275px; }
      .orbit { width: min(80vw, 330px); }
      .core { width: 104px; font-size: 19px; }
      .hero-stats { gap: 8px; }
      .hero-stat { padding-left: 8px; }
      .hero-stat strong { font-size: 13px; }
      .hero-stat span { font-size: 11px; }
      .section { padding: 58px 0; }
      .service-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .service-item { padding: 16px 14px; }
      .solution-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
      .network { grid-template-columns: 1fr; padding: 21px; }
      .case-grid { grid-template-columns: repeat(2, 1fr); }
      .timeline { grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }
      .footer-top { flex-direction: column; }
      .footer-links { justify-content: flex-start; }
    }
    @media (max-width: 480px) {
      h1 { font-size: 42px; }
      .hero-copy { font-size: 15px; }
      .hero-actions { align-items: stretch; }
      .hero-actions > a { flex: 1 1 100%; }
      .hero-stats { grid-template-columns: 1fr; }
      .hero-stat { border-left-width: 2px; }
      .capability-list { grid-template-columns: 1fr; }
      .service-grid, .solution-grid, .review-grid, .case-grid { grid-template-columns: 1fr; }
      .production-steps, .network-points { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr 1fr; }
      .article-grid { grid-template-columns: repeat(2, 1fr); }
      .form-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .score-row { align-items: flex-start; flex-direction: column; gap: 8px; }
      .float-contact { right: 10px; bottom: 12px; }
      .float-contact a { width: 43px; height: 43px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }