:root {
    --brand: #6c5ce7;
    --brand-2: #00c2ff;
    --gradient: linear-gradient(135deg, var(--brand) 0%, #9b59b6 40%, var(--brand-2) 100%);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.btn-brand {
    background: var(--brand);
    color: #fff;
    border: none;
}

    .btn-brand:hover {
        filter: brightness(1.05);
        color: #fff;
    }

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(108,92,231,.25), transparent 60%), radial-gradient(800px 400px at 10% -10%, rgba(0,194,255,.25), transparent 60%), conic-gradient(from 180deg at 50% 120%, #f8f9fa, #fff);
    position: relative;
    overflow: hidden;
}

.glass {
    background: rgba(255,255,255,.6);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(0,0,0,.05);
}

[data-bs-theme="dark"] .glass {
    background: rgba(33,37,41,.5);
    border-color: rgba(255,255,255,.08);
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108,92,231,.12);
}

.step {
    counter-reset: c;
}

    .step .step-item {
        counter-increment: c;
    }

        .step .step-item .num {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--brand);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

.price-card {
    border: 1px solid rgba(0,0,0,.06);
}

    .price-card.popular {
        border-color: transparent;
        box-shadow: 0 10px 30px rgba(108,92,231,.18);
    }

.logo-cloud img {
    opacity: .65;
    transition: .2s;
}

    .logo-cloud img:hover {
        opacity: 1;
    }

.pulse-dot {
    position: relative;
}

    .pulse-dot::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid var(--brand);
        animation: pulse 1.5s infinite;
    }

@keyframes pulse {
    0% {
        transform: scale(.9);
        opacity: .7
    }

    100% {
        transform: scale(1.6);
        opacity: 0
    }
}

#backToTop {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: none;
    z-index: 1040;
}

.glass-nav {
   opacity:0.8;
}