* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #FFFFFF;
  color: #1A1A2E;
  line-height: 1.6;
  padding: 40px 20px;
  max-width: 720px;
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
}

h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; }

.gradient {
  background: linear-gradient(135deg, #0066FF, #00C2FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tagline {
  font-size: 18px;
  color: #64748B;
  margin-bottom: 16px;
}

p { margin-bottom: 12px; }

ul { margin: 0 0 12px 20px; }
li { margin-bottom: 6px; }

a { color: #0066FF; text-decoration: none; }
a:hover { text-decoration: underline; }

nav {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
}

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
  font-size: 13px;
  color: #94A3B8;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  body { background: #1E293B; color: #E2E8F0; }
  .tagline { color: #94A3B8; }
  nav, footer { border-color: #334155; }
  footer { color: #64748B; }
}

@media (max-width: 600px) {
  body { padding: 24px 16px; }
  h1 { font-size: 22px; }
}