:root {
  --bg: #0b0d10;
  --card: #12161b;
  --text: #e6edf3;
  --muted: #9fb0c0;
  --primary: #5b9cff;
  --primary-600: #478efc;
  --border: #223040;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, "Noto Color Emoji";
  line-height: 1.6;
}

.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 16px; }

.site-header { position: sticky; top: 0; background: rgba(11,13,16,0.8); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 700; letter-spacing: 0.3px; }
.nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
.nav a:hover { color: var(--text); }
.nav .cta { color: var(--text); border: 1px solid var(--border); padding: 8px 14px; border-radius: 8px; }
.nav .cta:hover { border-color: var(--primary); color: var(--primary); }

.hero { text-align: center; padding: 64px 0 24px; }
.hero .subtitle { color: var(--muted); margin-top: 8px; }
.actions { margin-top: 20px; }
.button { display: inline-block; color: var(--text); background: transparent; border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; text-decoration: none; margin-right: 10px; }
.button:hover { border-color: var(--primary); color: var(--primary); }
.button.primary { background: var(--primary); border-color: var(--primary); color: #08111d; font-weight: 600; }
.button.primary:hover { background: var(--primary-600); border-color: var(--primary-600); color: #08111d; }

.features { padding: 32px 0; }
.features .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }

.how-it-works { padding: 16px 0 8px; }
.steps { margin: 0; padding-left: 20px; }

.cta-section { text-align: center; padding: 32px 0 56px; }

.site-footer { border-top: 1px solid var(--border); padding: 20px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; margin-left: 14px; }
.footer-links a:hover { color: var(--text); }

.legal h1 { margin-top: 28px; }
.legal h2 { margin-top: 22px; }
.legal-pre { white-space: pre-wrap; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }

.contact h1 { margin-top: 28px; }
.contact .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 12px 0 16px; }

.app-hero-image { display: block; margin: 20px auto 8px; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); background: #0d1117; }

@media (max-width: 640px) {
  .header-inner { height: auto; padding: 12px 0; align-items: flex-start; }
  .nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .nav a { margin: 0; }
}