:root {
      --bg: #07111f;
      --panel: rgba(12, 24, 42, 0.88);
      --text: #eef4ff;
      --muted: #a9b8cf;
      --line: rgba(148, 163, 184, 0.16);
      --primary: #69a7ff;
      --primary-strong: #3b82f6;
      --accent: #39c6b0;
      --warn: #f59e0b;
      --shadow: 0 18px 60px rgba(2, 8, 23, 0.45);
      --radius: 24px;
      --max: 1180px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(59,130,246,.20), transparent 32%),
        radial-gradient(circle at top right, rgba(20,184,166,.14), transparent 26%),
        linear-gradient(180deg, #07111f 0%, #0a1526 45%, #08111d 100%);
      line-height: 1.7;
    }
    a { color: inherit; }
    .top-nav {
      position: sticky; top: 0; z-index: 100;
      backdrop-filter: blur(14px);
      background: rgba(7, 17, 31, 0.72);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav-container {
      max-width: var(--max); margin: 0 auto; padding: 14px 20px;
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
    }
    .nav-logo { text-decoration: none; font-weight: 800; color: #fff; }
    .nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .nav-links a { text-decoration: none; color: var(--muted); font-weight: 500; }
    .nav-links a:hover, .nav-links a.active { color: #fff; }
    .mobile-menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 24px; }
    .container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
    .hero { padding: 72px 0 36px; }
    .hero-grid, .grid-3, .grid-2, .tools-grid, .compare-grid { display: grid; gap: 18px; }
    .hero-grid { grid-template-columns: 1.15fr .85fr; }
    .grid-3, .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-2, .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-card, .panel-card, .section-card, .tool-card, .compare-card {
      background: linear-gradient(180deg, rgba(17, 31, 53, 0.92), rgba(10, 21, 37, 0.94));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .hero-card { padding: 34px 30px; }
    .panel-card, .section-card, .tool-card, .compare-card { padding: 24px 22px; }
    .eyebrow {
      display: inline-flex; padding: 8px 12px; border-radius: 999px;
      background: rgba(105,167,255,.14); color: #d9e8ff;
      font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    }
    h1 {
      margin: 18px 0 14px; font-size: clamp(34px, 4vw, 56px);
      line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: #fff;
    }
    .hero-text, .section-desc, .section-card p, .tool-card p, .compare-card p { color: var(--muted); }
    .hero-actions, .badge-row, .tool-links { display: flex; gap: 10px; flex-wrap: wrap; }
    .hero-actions { margin-top: 22px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
      padding: 0 18px; border-radius: 14px; text-decoration: none; font-weight: 700; transition: .2s ease;
    }
    .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #fff; }
    .btn-secondary { border: 1px solid rgba(255,255,255,.12); color: #d9e8ff; background: rgba(255,255,255,.04); }
    .btn:hover { transform: translateY(-1px); }
    .metric {
      display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
      padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .metric:last-child { border-bottom: 0; padding-bottom: 0; }
    .metric-label { color: var(--muted); font-size: 14px; }
    .metric strong { font-size: 26px; color: #fff; }
    .section { padding: 24px 0 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .section-kicker { margin: 0 0 8px; color: #90b8ff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
    .section h2 { margin: 0; font-size: 30px; color: #fff; }
    .section-card h3, .tool-card h3, .compare-card h3 { margin: 0 0 10px; color: #fff; }
    .badge {
      display: inline-flex; padding: 6px 10px; border-radius: 999px;
      background: rgba(105,167,255,.12); color: #dceaff; font-size: 12px; font-weight: 700;
    }
    .badge.warn { background: rgba(245,158,11,.14); color: #fde7b0; }
    .tool-card { display: flex; flex-direction: column; gap: 14px; }
    .tool-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
    .tool-type {
      display: inline-flex; padding: 6px 10px; border-radius: 999px;
      background: rgba(57,198,176,.12); color: #b8fff3; font-size: 12px; font-weight: 700; white-space: nowrap;
    }
    .tool-list { margin: 0; padding-left: 18px; color: var(--muted); }
    .tool-list li { margin-bottom: 6px; }
    .tool-link { text-decoration: none; color: #cfe1ff; font-weight: 700; font-size: 14px; }
    .compare-card { border-color: rgba(255,255,255,.10); }
    .note {
      margin-top: 18px; padding: 14px 16px; border-radius: 16px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: var(--muted);
    }
    @media (max-width: 980px) {
      .hero-grid, .grid-3, .grid-2, .tools-grid, .compare-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .nav-links { display: none; }
      .mobile-menu-toggle { display: inline-flex; }
      .hero { padding-top: 44px; }
      .hero-card, .panel-card, .section-card, .tool-card, .compare-card { border-radius: 22px; }
      .hero-card { padding: 24px 20px; }
      .section-head { flex-direction: column; align-items: flex-start; }
    }


:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
  outline-offset: 4px;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}