:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f8fc; color: #182334; }
main { max-width: 920px; margin: auto; padding: 32px 24px 64px; }
a { color: #166bd0; text-underline-offset: 4px; }
.hero { padding: 48px 0 24px; }
.icon { width: 112px; height: 112px; border-radius: 24px; object-fit: contain; }
h1 { font-size: clamp(36px, 7vw, 56px); letter-spacing: -2px; margin: 20px 0 12px; }
h2 { margin-top: 0; font-size: 24px; }
p, li { line-height: 1.75; }
.lead { font-size: 20px; max-width: 680px; }
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0; }
.card { padding: 28px; background: white; border: 1px solid #dce3ed; border-radius: 20px; }
.button { display: inline-block; background: #166bd0; color: white; padding: 12px 18px; border-radius: 10px; text-decoration: none; font-weight: 650; }
.status { color: #546478; font-size: 14px; }
.features { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 36px; }
.features span { background: #e9eff9; border-radius: 8px; padding: 8px 12px; }
footer { margin-top: 40px; color: #546478; font-size: 14px; }
@media(max-width: 640px) { .platforms { grid-template-columns: 1fr; } .hero { padding-top: 32px; } }
@media(prefers-color-scheme: dark) {
  body { background: #0f1724; color: #edf3ff; }
  .card { background: #182335; border-color: #304057; }
  a { color: #8cc7ff; }
  .button { color: white; }
  .status, footer { color: #b3bfd2; }
  .features span { background: #243249; }
}