:root {
        --brand: #0d6efd;
        --brand-2: #6610f2;
    }

    body {
        scroll-behavior: smooth
    }

    .navbar {
        transition: box-shadow .2s ease, background-color .2s ease
    }

    .navbar.scrolled {
        box-shadow: 0 8px 20px rgba(13, 110, 253, .12);
        background: #fff
    }

    /* Hero */
    .hero {
        position: relative;
        background: radial-gradient(1200px 600px at 10% 10%, rgba(13, 110, 253, .12), transparent),
            radial-gradient(900px 500px at 90% 10%, rgba(102, 16, 242, .08), transparent),
            linear-gradient(180deg, #f8fbff 0%, #ffffff 60%);
        overflow: hidden;
    }

    .hero-badge {
        background: rgba(13, 110, 253, .1);
        border: 1px solid rgba(13, 110, 253, .2)
    }

    .floating {
        -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: cover;
        mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: cover;
    }


    @keyframes float {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-8px)
        }
    }

    /* Cards */
    .feature-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
        background: rgba(13, 110, 253, .1)
    }

    /* Section spacing */
    section {
        padding: 4rem 0
    }

    @media (min-width: 992px) {
        section {
            padding: 6rem 0
        }
    }

    /* Gradients & accents */
    .gradient-text {
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    /* CTA strip */
    .cta {
        background: linear-gradient(90deg, rgba(13, 110, 253, .08), rgba(102, 16, 242, .08))
    }

    /* Footer */
    footer a {
        color: inherit;
        opacity: .8
    }

    footer a:hover {
        opacity: 1
    }

    /* Simple reveal on scroll */
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: all .6s ease
    }

    .reveal.revealed {
        opacity: 1;
        transform: none
    }