body { margin: 0 }
body { padding: 0 }
body { background-color: #111827 }
body { color: #f3f4f6 }
body { font-family: system-ui, sans-serif }

.hero { text-align: center }
.hero { padding: 5rem 2rem }
.hero { background-color: #1f2937 }
.hero { border-bottom: 4px solid #f59e0b }

h1 { font-size: 3.5rem }
h1 { margin: 0 0 1rem 0 }
h1 { color: #f59e0b }

.subtitle { font-size: 1.25rem }
.subtitle { color: #9ca3af }
.container { max-width: 800px }
.container { margin: 0 auto }
.container { padding: 3rem 2rem }

h2 { color: #f59e0b }
h2 { font-size: 2rem }
h2 { margin-top: 2rem }
p { line-height: 1.7 }
p { margin-bottom: 1rem }
ul { line-height: 1.7 }
ul { margin-bottom: 1rem }
li { margin-bottom: 0.5rem }

.button-group { display: flex }
.button-group { justify-content: center }
.button-group { gap: 1rem }
.button-group { margin-top: 2rem }

.btn { display: inline-block }
.btn { background-color: #f59e0b }
.btn { color: #111827 }
.btn { padding: 1rem 2.5rem }
.btn { text-decoration: none }
.btn { font-weight: bold }
.btn { border-radius: 0.5rem }
.btn:hover { background-color: #fbbf24 }
.btn-modrinth { background-color: #10b981 }
.btn-modrinth:hover { background-color: #34d399 }

.footer { text-align: center }
.footer { padding: 2rem }
.footer { color: #6b7280 }
.footer { border-top: 1px solid #374151 }

.social-links { display: flex }
.social-links { justify-content: center }
.social-links { gap: 1.5rem }
.social-links { margin-top: 1.5rem }
.social-links a { color: #9ca3af }
.social-links a { text-decoration: none }
.social-links a:hover { color: #f59e0b }

.title-link { text-decoration: none }
.title-link { color: inherit }

.hero-logo { max-width: 100% }
.hero-logo { height: auto }
.hero-logo { width: 400px }
.hero-logo { display: block }
.hero-logo { margin: 0 auto }
.hero-logo { margin-bottom: 1rem }