.docs-hero {
    background: linear-gradient(135deg, var(--text-heading) 0%, #020617 100%);
    position: relative;
    overflow: hidden;
}
.docs-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.doc-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
    border-top: 4px solid #fbbf24;
}
.doc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-top-color: #ef4444;
}
.doc-icon {
    background: linear-gradient(135deg, #fbbf24, #ef4444);
}
.code-block {
    background: var(--text-body);
    border-radius: 8px;
    padding: 1rem;
    color: #f1f5f9;
}