/* Xwork landing — base styles complementing Tailwind CDN */

:root {
  --bg:        #0a0a0b;
  --bg-soft:   #121214;
  --surface:   #18181c;
  --border:    #27272a;
  --text:      #f5f5f7;
  --text-dim:  #a1a1aa;
  --accent:    #6366f1;
  --accent-2:  #8b5cf6;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg {
  background: radial-gradient(80% 60% at 50% 0%, rgba(99,102,241,0.15) 0%, rgba(10,10,11,0) 60%);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99,102,241,0.3); }

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.15s ease;
}
.btn-secondary:hover { border-color: var(--accent); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

.prose-doc h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text); }
.prose-doc h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--text); }
.prose-doc p, .prose-doc li { color: var(--text-dim); line-height: 1.7; margin-bottom: 0.75rem; }
.prose-doc ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-doc strong { color: var(--text); }
.prose-doc a { color: var(--accent); }
.prose-doc a:hover { text-decoration: underline; }
</content>
</invoke>