:root {
  --color-accent: #2563eb;
  --color-accent-strong: #1d4ed8;
  --color-accent-soft: #eff6ff;
  --color-accent-border: #bfdbfe;
  --color-success: #047857;
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, .22);
}

.home--zh {
  --color-accent: #c2410c;
  --color-accent-strong: #9a3412;
  --color-accent-soft: #fff7ed;
  --color-accent-border: #fed7aa;
  --focus-ring: 0 0 0 4px rgba(194, 65, 12, .2);
}

.home--en {
  --color-accent: #4f46e5;
  --color-accent-strong: #3730a3;
  --color-accent-soft: #f0f1ff;
  --color-accent-border: #c7d2fe;
  --focus-ring: 0 0 0 4px rgba(79, 70, 229, .2);
}

.home .site-header { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); }
.home .brand__mark { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.home .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 50% -15%, var(--color-accent-soft) 0, rgba(255,255,255,0) 48%); }
.home--en .hero { background: radial-gradient(circle at 10% 0%, #eef2ff 0, rgba(255,255,255,0) 35%), radial-gradient(circle at 92% 7%, #ecfeff 0, rgba(255,255,255,0) 32%); }
.home .eyebrow { color: var(--color-accent-strong); }
.home .button--primary { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 10px 22px rgba(37, 99, 235, .16); }
.home .button--primary:hover { background: var(--color-accent-strong); }
.home--zh .button--primary { box-shadow: 0 10px 22px rgba(194, 65, 12, .16); }
.home .hero-tool-links a { color: var(--color-accent-strong); }
.home .hero-tool-links a:hover { border-color: var(--color-accent); }
.home .tools { background: linear-gradient(180deg, var(--color-accent-soft), #fff 76%); }
.home .tool-card { border-color: rgba(17, 24, 39, .06); box-shadow: 0 12px 30px rgba(15, 23, 42, .035); }
.home .tool-card:hover { border-color: var(--color-accent-border); box-shadow: 0 18px 40px rgba(15, 23, 42, .09); }
.home .tool-card__icon { color: var(--color-accent-strong); background: var(--color-accent-soft); }
.home .tool-card__link { color: var(--color-accent-strong); }
.home .workflow { background: linear-gradient(125deg, #111827, #172554); }
.home--zh .workflow { background: linear-gradient(125deg, #431407, #7c2d12); }

.tool-card__meta { margin: 0 0 12px; color: var(--color-soft); font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.tool-card__link span { transition: transform .2s; }
.tool-card__link:hover span { display: inline-block; transform: translateX(3px); }

@media (max-width: 760px) {
  .home .hero { background: radial-gradient(circle at 50% -18%, var(--color-accent-soft) 0, rgba(255,255,255,0) 52%); }
}