:root {
    --cs-bg-start: #020617;
    --cs-bg-mid:   #020617;
    --cs-bg-end:   #020617;
    --cs-border:   rgba(148, 163, 184, 0.55);
    --cs-accent:   #f97316; 
    --cs-accent-soft: rgba(249, 115, 22, 0.18);
}

.cs-wrapper {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.25), transparent 55%),
        radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.25), transparent 55%),
        linear-gradient(145deg, var(--cs-bg-start), var(--cs-bg-mid), var(--cs-bg-end));
    color: #e5e7eb;
}

.cs-card {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 1.5rem;
    border: 1px solid var(--cs-border);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(18px);
}

.cs-tag {
    letter-spacing: 0.18em;
    color: #9ca3af;
}

.cs-divider {
    border-color: rgba(148, 163, 184, 0.35);
    opacity: 1;
}

.cs-card .lead {
    color: #9ca3af;
}

.btn-outline-light {
    border-radius: 999px;
    border-width: 1.5px;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6);
    transition:
        transform 0.12s ease-out,
        box-shadow 0.12s ease-out,
        background-color 0.12s ease-out,
        color 0.12s ease-out,
        border-color 0.12s ease-out;
}

.btn-outline-light:hover {
    background-color: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #0b1120;
    transform: translateY(-1px);
    box-shadow: 0 18px 40px var(--cs-accent-soft);
}

@media (max-width: 575.98px) {
    .cs-card {
        border-radius: 1.25rem;
        padding: 2.25rem 1.75rem;
    }
}
