/* ===== Reset & White Theme ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    :root {
      --bg-body: #ffffff;
      --bg-card: #f8fafc;
      --text-primary: #0f172a;
      --text-secondary: #475569;
      --text-muted: #94a3b8;
      --border-color: #e2e8f0;
      --accent-blue: #2563eb;
      --accent-light: #dbeafe;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.02);
      --radius: 12px;
    }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--bg-body);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ===== Hero ===== */
    .hero {
      padding: 48px 0 64px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 48px;
      border-bottom: 1px solid var(--border-color);
    }
    .hero-left {
      flex: 1 1 50%;
    }
    .hero-tag {
      display: inline-block;
      background: var(--accent-light);
      color: var(--accent-blue);
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.3px;
      margin-bottom: 16px;
    }
    .hero h1 {
      font-size: 44px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 12px;
      letter-spacing: -1px;
      color: var(--text-primary);
    }
    .hero h1 .highlight {
      color: var(--accent-blue);
    }
    .hero-sub {
      font-size: 18px;
      color: var(--text-secondary);
      margin-bottom: 24px;
      font-weight: 400;
    }
    .hero-features {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 32px;
      margin-bottom: 0;
    }
    .hero-features .item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      color: var(--text-secondary);
    }
    .hero-features .item .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background: var(--accent-blue);
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      flex-shrink: 0;
    }
    .hero-right {
      flex: 1 1 40%;
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 32px 28px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      text-align: center;
    }
    .hero-right .product-icon {
      font-size: 72px;
      margin-bottom: 12px;
      opacity: 0.8;
      display: block;
    }
    .hero-right .model-group {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin: 12px 0 8px;
      flex-wrap: wrap;
    }
    .hero-right .model-tag {
      background: #fff;
      padding: 6px 18px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }
    .hero-right .model-tag.pro {
      border-color: var(--accent-blue);
      background: var(--accent-light);
      color: var(--accent-blue);
    }
    .hero-right .model-desc {
      font-size: 14px;
      color: var(--text-secondary);
      margin-top: 12px;
    }
    .hero-right .cloud-badges {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }
    .hero-right .cloud-badges span {
      background: #fff;
      padding: 4px 14px;
      border-radius: 30px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }
    .hero-right .cloud-badges .aws { border-color: #ff9900; color: #232f3e; }
    .hero-right .cloud-badges .tb { border-color: #8a2be2; color: #5a2d82; }
    .hero-right .cloud-badges .ign { border-color: #e04e39; color: #a03a2a; }

    /* ===== Comparison Table ===== */
    .section {
      padding: 64px 0;
      border-bottom: 1px solid var(--border-color);
    }
    .section:last-of-type {
      border-bottom: none;
    }
    .section-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.3px;
      color: var(--text-primary);
    }
    .section-desc {
      color: var(--text-secondary);
      font-size: 17px;
      max-width: 720px;
      margin-bottom: 36px;
    }

    .compare-table-wrapper {
      background: var(--bg-card);
      border-radius: var(--radius);
      border: 1px solid var(--border-color);
      overflow-x: auto;
      box-shadow: var(--shadow-sm);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }
    .compare-table th {
      padding: 18px 24px;
      text-align: left;
      font-weight: 600;
      font-size: 15px;
      color: var(--text-secondary);
      border-bottom: 2px solid var(--border-color);
      background: #fafcfc;
    }
    .compare-table th:first-child { width: 28%; color: var(--text-primary); }
    .compare-table th:nth-child(2) { width: 36%; }
    .compare-table th:last-child { width: 36%; }
    .compare-table td {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border-color);
      font-size: 15px;
      vertical-align: middle;
    }
    .compare-table tr:last-child td { border-bottom: none; }
    .compare-table .tag-reco {
      display: inline-block;
      background: #f1f5f9;
      padding: 4px 14px;
      border-radius: 30px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }
    .compare-table .tag-reco.highlight {
      background: var(--accent-light);
      color: var(--accent-blue);
    }
    .compare-table strong { color: var(--text-primary); }

    /* ===== Value + Architecture Block ===== */
    .value-block {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: center;
    }
    .value-left {
      flex: 1 1 45%;
    }
    .value-left .key-label {
      background: #fef3c7;
      color: #b45309;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.3px;
      display: inline-block;
      margin-bottom: 16px;
    }
    .value-left h2 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.3px;
    }
    .value-left h2 .hl-blue { color: var(--accent-blue); }
    .value-list {
      list-style: none;
      padding: 0;
      margin-bottom: 24px;
    }
    .value-list li {
      display: flex;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-color);
    }
    .value-list li:last-child { border-bottom: none; }
    .value-list .check-icon {
      color: var(--accent-blue);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.3;
    }
    .value-list .desc {
      color: var(--text-secondary);
      font-size: 15px;
    }
    /* 修复标题独立成行的关键样式 */
    .value-list .item-title {
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 2px;
      color: var(--text-primary);
    }
    .value-list .item-content {
      display: flex;
      flex-direction: column;
    }

    .value-right {
      flex: 1 1 45%;
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 30px 24px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }
    .value-right h4 {
      text-align: center;
      margin-bottom: 20px;
      font-weight: 600;
      color: var(--text-secondary);
      font-size: 14px;
      letter-spacing: 1px;
    }
    .arch-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .arch-node {
      text-align: center;
      flex: 1;
    }
    .arch-node .box {
      background: #e0e7ff;
      padding: 12px 8px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e40af;
    }
    .arch-node .sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .arch-gw {
      text-align: center;
      flex: 1.5;
      background: var(--accent-blue);
      padding: 14px 10px;
      border-radius: 8px;
      color: #fff;
      box-shadow: 0 4px 10px rgba(37,99,235,0.3);
    }
    .arch-gw .title { font-weight: 700; font-size: 16px; }
    .arch-gw .sub { font-size: 11px; opacity: 0.9; }
    .arch-gw .icons {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
      font-size: 12px;
    }
    .arch-arrow {
      font-size: 24px;
      color: var(--text-muted);
    }
    .arch-cloud {
      text-align: center;
      flex: 1.5;
    }
    .arch-cloud .badge-group {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .arch-cloud .badge-group span {
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      background: #e2e8f0;
      color: #1e293b;
    }
    .arch-cloud .badge-group .aws-b { background: #232f3e; color: #ff9900; }
    .arch-cloud .badge-group .tb-b { background: #6b21a5; color: #fff; }
    .arch-cloud .badge-group .ign-b { background: #c2410c; color: #fff; }
    .arch-cloud .sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
    }
    .arch-footer {
      margin-top: 20px;
      text-align: center;
      font-size: 13px;
      color: var(--text-secondary);
      background: #f1f5f9;
      padding: 8px;
      border-radius: 30px;
    }

    /* ===== Advantages Grid ===== */
    .advantages-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 992px) { .advantages-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .advantages-grid { grid-template-columns: 1fr; } }
    .adv-card {
      background: var(--bg-card);
      padding: 28px 24px;
      border-radius: var(--radius);
      border: 1px solid var(--border-color);
      transition: border 0.25s, box-shadow 0.25s;
    }
    .adv-card:hover {
      border-color: var(--accent-blue);
      box-shadow: var(--shadow-md);
    }
    .adv-card .icon-large { font-size: 28px; margin-bottom: 10px; display: block; }
    .adv-card h3 { font-size: 18px; margin-bottom: 6px; font-weight: 600; }
    .adv-card p { color: var(--text-secondary); font-size: 14px; margin: 0; }

    /* ===== Spec Tabs ===== */
    .spec-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }
    .spec-tab {
      padding: 8px 22px;
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: 30px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }
    .spec-tab.active {
      background: var(--accent-blue);
      border-color: var(--accent-blue);
      color: #fff;
    }
    .spec-tab:hover { border-color: var(--accent-blue); }
    .spec-content {
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 28px 32px;
      border: 1px solid var(--border-color);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 40px;
    }
    @media (max-width: 600px) {
      .spec-content { grid-template-columns: 1fr; padding: 20px; }
    }
    .spec-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-color);
      font-size: 15px;
    }
    .spec-item .s-label { color: var(--text-secondary); }
    .spec-item .s-value { font-weight: 500; text-align: right; color: var(--text-primary); }

    /* ===== Scenarios ===== */
    .scene-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 768px) { .scene-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .scene-grid { grid-template-columns: 1fr; } }
    .scene-card {
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 28px 20px;
      border: 1px solid var(--border-color);
      text-align: center;
      transition: transform 0.2s;
    }
    .scene-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .scene-card .emoji-big { font-size: 40px; display: block; margin-bottom: 10px; }
    .scene-card h4 { font-size: 18px; margin-bottom: 4px; }
    .scene-card p { color: var(--text-secondary); font-size: 14px; margin: 0; }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .hero h1 { font-size: 32px; }
      .hero-sub { font-size: 16px; }
      .compare-table th, .compare-table td { padding: 12px 16px; font-size: 14px; }
      .value-left h2 { font-size: 24px; }
    }