:root {
      --primary:#177fd1;
      --primary-dark:#0f5fa0;
      --accent:#00b894;
      --bg:#f5f7fb;
      --text:#1f2933;
      --muted:#6c7a89;
      --card:#ffffff;
      --border:#e1e4ee;
      --radius-lg:18px;
      --radius-md:12px;
      --shadow-soft:0 18px 40px rgba(15,35,80,0.12);
      --shadow-light:0 8px 20px rgba(15,35,80,0.08);
    }

    * {
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    body {
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.7;
    }

    /* 全局图片：有尺寸，同时手机端自适应 */
    img {
      display:block;
      max-width:100%;
      height:auto;
    }

    a {
      color:var(--primary);
      text-decoration:none;
    }
    a:hover { text-decoration:underline; }

    .page-wrapper {
      max-width:960px;
      margin:0 auto;
      padding:18px 16px 40px;
    }

    header {
      background:linear-gradient(135deg,#ffffff,#e7f3ff);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-soft);
      padding:24px 20px;
      margin-bottom:24px;
      display:flex;
      flex-wrap:wrap;
      gap:20px;
      align-items:center;
    }

    .hero-text {
      flex:1 1 260px;
      min-width:260px;
    }

    .hero-eyebrow {
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--primary-dark);
      margin-bottom:6px;
    }

    h1 {
      font-size:30px;
      margin-bottom:8px;
    }

    .hero-subtitle {
      font-size:15px;
      color:var(--muted);
      margin-bottom:14px;
    }

    .hero-meta {
      font-size:12px;
      color:var(--muted);
      margin-bottom:16px;
    }

    .hero-meta span + span::before {
      content:"•";
      margin:0 6px;
    }

    .hero-actions {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .btn-primary,
    .btn-outline {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:14px;
      padding:10px 22px;
      border-radius:999px;
      border:1px solid transparent;
      cursor:pointer;
      text-decoration:none;
      transition:all .18s ease-out;
      white-space:nowrap;
    }

    .btn-primary {
      background:var(--primary);
      color:#fff;
      box-shadow:var(--shadow-light);
    }
    .btn-primary:hover {
      background:var(--primary-dark);
      transform:translateY(-1px);
      box-shadow:var(--shadow-soft);
    }

    .btn-outline {
      background:#fff;
      color:var(--primary-dark);
      border-color:var(--border);
    }
    .btn-outline:hover {
      border-color:var(--primary);
      transform:translateY(-1px);
      box-shadow:var(--shadow-light);
    }

    .hero-media {
      flex:1 1 260px;
      min-width:220px;
      text-align:center;
    }

    /* 主图：设置桌面尺寸，移动端自动缩放 */
    .hero-media img {
      width:700px;
      height:auto;
      max-width:100%;
      border-radius:var(--radius-md);
      box-shadow:var(--shadow-light);
      margin:0 auto;
    }

    article {
      background:var(--card);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-light);
      padding:22px 20px 26px;
    }

    article h2 {
      font-size:22px;
      margin:18px 0 10px;
    }

    article h3 {
      font-size:18px;
      margin:16px 0 8px;
    }

    article p {
      margin-bottom:10px;
      font-size:15px;
    }

    article ul {
      margin:6px 0 10px 20px;
      font-size:15px;
    }

    .color-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:16px;
      margin-top:10px;
    }

    .color-card {
      border-radius:var(--radius-md);
      border:1px solid var(--border);
      padding:12px 12px 10px;
      background:#fbfcff;
      font-size:14px;
    }

    .color-label {
      font-weight:600;
      margin-bottom:4px;
    }

    .cta-block {
      margin:22px 0;
      padding:18px 16px;
      border-radius:var(--radius-md);
      background:linear-gradient(120deg,#177fd1,#00b894);
      color:#fff;
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      align-items:center;
      justify-content:space-between;
    }

    .cta-block p {
      margin:0;
      max-width:520px;
      font-size:15px;
    }

    .cta-block .btn-primary {
      background:#fff;
      color:var(--primary-dark);
      box-shadow:none;
    }
    .cta-block .btn-primary:hover {
      background:#eef4ff;
      transform:translateY(-1px);
      box-shadow:var(--shadow-light);
    }

    .note {
      font-size:12px;
      color:var(--muted);
      margin-top:4px;
    }

    footer {
      text-align:center;
      font-size:11px;
      color:var(--muted);
      margin-top:18px;
    }

    @media (max-width:720px) {
      header {
        padding:18px 16px;
      }
      h1 {
        font-size:24px;
      }
      article {
        padding:18px 14px 22px;
      }
      .cta-block {
        align-items:flex-start;
      }
    }