/**
 * clewPath – Brand colors and custom components
 * Single source of truth for primary palette and reusable UI classes.
 */

:root {
    --color-primary: #8b5cf6;
    --color-accent: #6366f1;
    --color-background-light: #FFFFFF;
    --color-background-dark: #0F172A;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Header – theme-aware background so dark mode toggle works reliably */
.site-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dark .site-header {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgb(30 41 59);
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-aura-glow {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
    max-width: 1100px;
    height: 600px;
    background: radial-gradient(
        circle at center,
        rgba(139, 92, 246, 0.3) 0%,
        rgba(99, 102, 241, 0.2) 25%,
        rgba(79, 70, 229, 0.15) 50%,
        transparent 75%
    );
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.premium-cta-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 35%, #4f46e5 70%, #1e1b4b 100%);
}

.step-visual-container {
    position: relative;
    overflow: hidden;
    background: rgb(241 245 249);
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240);
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    aspect-ratio: 16/10;
}

.dark .step-visual-container {
    background: rgb(30 41 59);
    border-color: rgb(51 65 85);
}