* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
body {
padding: 2rem 1rem;
max-width: 960px;
margin: 0 auto;
transition: all 0.2s ease;
}

/* Light Mode (Default) */
:root {
--bg: #f8f9fa;
--card: #ffffff;
--text: #222222;
--text-light: #555555;
--border: #eeeeee;
--cta-bg: #e9f5ff;
--btn-bg: #007bff;
--btn-color: #fff;
}

/* Dark Mode Auto Adapt */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--card: #2d2d2d;
--text: #f0f0f0;
--text-light: #b0b0b0;
--border: #444444;
--cta-bg: #2c3e50;
--btn-bg: #409eff;
--btn-color: #fff;
}
}

/* Common Styles */
body {
background: var(--bg);
color: var(--text);
}
.container {
width: 100%;
}
.hero {
background: var(--card);
padding: 2rem;
border-radius: 8px;
margin-bottom: 2.5rem;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.section {
margin-bottom: 2.5rem;
}
h1 {
font-size: 1.9rem;
margin-bottom: 1rem;
font-weight: 700;
}
h2 {
font-size: 1.5rem;
margin: 2rem 0 1rem;
font-weight: 600;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
h3 {
font-size: 1.25rem;
margin: 1.5rem 0 1rem;
font-weight: 600;
}
p {
color: var(--text-light);
margin-bottom: 1rem;
}
ul, ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
color: var(--text-light);
}
li {
margin-bottom: 0.5rem;
}

/* List Group */
.list-group {
list-style: none;
margin-left: 0;
}
.list-group-item {
background: var(--card);
padding: 0.8rem 1rem;
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 0.5rem;
}

/* FAQ */
.faq-item {
margin-bottom: 1rem;
}
.faq-question {
font-weight: 600;
color: var(--text);
}

/* CTA Box */
.cta-box {
background: var(--cta-bg);
padding: 1.8rem;
border-radius: 8px;
text-align: center;
}
.btn {
display: inline-block;
background: var(--btn-bg);
color: var(--btn-color);
padding: 0.7rem 1.4rem;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
.btn:hover {
opacity: 0.9;
}

/* Footer */
.footer {
text-align: center;
margin-top: 3rem;
color: var(--text-light);
font-size: 0.9rem;
}