.page-hero {
    position: relative; padding: 5rem 0 4rem;
    text-align: center; overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.page-hero-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(139,92,246,0.1) 0%, transparent 65%);
    pointer-events: none;
}
.page-hero .hero-badge { margin-bottom: 1.5rem; }
.page-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin-bottom: 1rem; }
.page-description { font-size: 1.125rem; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; }
.page-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; font-size: 0.85rem; color: var(--color-text-muted); }
.page-content { max-width: 860px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.content-section { margin-bottom: 3.5rem; }
.content-section-title {
    font-size: 1.25rem; font-weight: 700;
    margin-bottom: 1rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: 0.6rem;
}
.section-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
p { color: var(--color-text-muted); margin-bottom: 1rem; line-height: 1.7; }
p strong { color: var(--color-text); font-weight: 600; }
ul { padding-left: 1.5rem; color: var(--color-text-muted); margin-bottom: 1rem; }
li { margin-bottom: 0.5rem; line-height: 1.65; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { opacity: 0.8; text-decoration: underline; }

/* TOC */
.toc {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 1rem; padding: 1.5rem; margin-bottom: 3rem;
}
.toc-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem; }
.toc ol { padding-left: 1.25rem; margin: 0; }
.toc li { margin-bottom: 0.35rem; }
.toc a { color: var(--color-text-muted); font-size: 0.9rem; }
.toc a:hover { color: var(--color-primary); text-decoration: none; }

@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.page-hero, .page-content { animation: fadeUp 0.35s ease both; }