html {
    font-size: 14px;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

/* Body top padding tracks the fixed promo banner + navbar heights */
body {
    overflow-x: hidden;
    padding-top: calc(var(--promo-offset, 0px) + var(--nav-offset, 6em));
    /* No forced bottom margin; footer sits in normal flow */
}

/* Floating labels */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Brand logo: swap by theme */
:root[data-bs-theme='dark'] .brand-logo {
    content: url('/assets/images/brand-light-45x295.svg');
}

:root[data-bs-theme='light'] .brand-logo {
    content: url('/assets/images/brand-dark-45x295.svg');
}

/* Bootstrap icon sizing (used by theme switcher) */
.bi {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -.60em;
}

.text-hotpink{
    color:hotpink;
}

/* Narrow dropdown for theme switcher */
.dropdown-narrow-60 {
    --bs-dropdown-min-width: 140px;
}

/* Promo banner (fixed above navbar) */
#promoBanner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040; /* higher than navbar (1030) */
}

.promoBanner {
    padding: 0.5rem;
    text-align: center;
    color: #fff;
}

/* Navbar offset under promo */
#siteNav {
    top: var(--promo-offset, 0);
}

/* Tall navbar that shrinks on scroll */
.navbar-taller {
    min-height: 6em;
    transition: min-height 0.3s ease;
}

    .navbar-taller.navbar-shrink {
        min-height: 4em;
    }

/* Mega menu link blocks */
.dropdown-menu .navbar-link {
    display: block;
    text-decoration: none;
    padding-bottom: 1rem;
}

    .dropdown-menu .navbar-link:last-child {
        padding-bottom: 0;
    }

@media (max-width: 575.98px) {
    .dropdown-menu {
        max-height: calc(100vh - var(--nav-h, 56px) - var(--promo-offset, 0px));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    @supports (height: 100dvh) {
        .dropdown-menu {
            max-height: calc(100dvh - var(--nav-h, 56px) - var(--promo-offset, 0px));
        }
    }
}

/* Hero illustration wrapper: fixed visual height, responsive */
.illustration-wrapper {
    height: 400px;
}

/* Hero CTA glow only */
#hero-cta {
    position: relative; 
    transition: transform 0.2s ease;
    z-index: 1; 
}

    /* gradient glow layer */
    #hero-cta::before {
        content: "";
        position: absolute;
        inset: -6px; 
        border-radius: inherit;
        background: linear-gradient(to right, #e44d9c, #4d49fc, #8a4dfc);
        filter: blur(18px);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: -1; 
    }

    /* hover/focus states */
    #hero-cta:hover,
    #hero-cta:focus {
        transform: translateY(-2px);
    }

        #hero-cta:hover::before,
        #hero-cta:focus::before {
            opacity: 1;
        }

@media (max-width: 767.98px) { /* < md */
    .illustration-wrapper {
        height: 280px;
    }
}
/* Ensure illustration scales inside wrapper without distortion */
.illustration-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

mark {
    background-color: #e1e2f3;
}

/* Gradient rules (brand-consistent) */
.gradient-hr {
    border: 0;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, transparent, #e44d9c, #4d49fc, #8a4dfc, transparent);
}

.gradient-section {
    background: linear-gradient(135deg, #e44d9c, #4d49fc, #8a4dfc);
    color: white;
}

.gradient-text {
    background: linear-gradient(to right, #4d49fc, #e44d9c, #8a4dfc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.border-curve {
    border-radius: 15px;
}

/* Footer */
.vl-footer {
    background: radial-gradient(1200px 600px at 85% -10%, rgba(138,77,252,0.25), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(228,77,156,0.25), transparent 60%), linear-gradient(135deg, #1b1835, #101225 65%, #0b0e1a);
}

.vl-footer-item {
    margin-bottom: 10px;
    font-size: small;
}

.vl-footer-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

    .vl-footer-link:hover, .vl-footer-link:focus {
        color: #fff;
        text-decoration: underline;
    }

/* Social icons */
.vl-social {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background-color: #4d49fc;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}

    .vl-social:hover, .vl-social:focus {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(77,73,252,0.5);
        opacity: 0.95;
    }

/* Subtle dividers */
.vl-hr {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.6), transparent);
    opacity: .9;
}

.vl-hr-tertiary {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #4d49fc, transparent);
    opacity: .9;
}

/* Footer image treatment */
.vl-footer-img {
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.25));
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: .5rem;
    border-radius: .5rem;
}

/* Footer input field */
.vl-footer-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

    .vl-footer-input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    .vl-footer-input:focus {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: #8a4dfc;
        box-shadow: 0 0 0 .2rem rgba(138, 77, 252, .25);
        color: #fff;
    }

/* Illustration glow */
.vl-illustration-glow {
    position: relative;
    display: inline-block;
    z-index: 0;
}

    .vl-illustration-glow::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300%;
        height: 50%;
        transform: translate(-58%, -65%);
        background: radial-gradient( circle at center, rgba(228, 77, 156, 0.6), rgba(77, 73, 252, 0.5), rgba(138, 77, 252, 0.4), transparent 90% );
        filter: blur(90px);
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
    }

/* Stat cards */
.vl-stat {
    border: 2px solid transparent;
    background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box, linear-gradient(135deg, var(--bs-primary), var(--bs-pink)) border-box;
    border-radius: 1rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1; /* keeps square, responsive */
    margin: 0 auto;
    transition: transform .15s ease, box-shadow .2s ease;
}

    .vl-stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(0,0,0,.18);
    }

.vl-stat-1 {
    background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box, linear-gradient(135deg, var(--bs-ultraviolet), var(--bs-pink)) border-box;
}

.vl-stat-2 {
    background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box, linear-gradient(135deg, var(--bs-blue), var(--bs-indigo)) border-box;
}

.vl-stat-3 {
    background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box, linear-gradient(135deg, var(--bs-orange), var(--bs-cyan)) border-box;
}

.vl-stat-4 {
    background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box, linear-gradient(135deg, var(--bs-yellow), var(--bs-green)) border-box;
}

/* Gradient border + tertiary interior for feature card */
.vl-stat-1-depth {
    border: 2px solid transparent;
    border-radius: 1rem;
    background: linear-gradient(var(--bs-tertiary-bg), var(--bs-tertiary-bg)) padding-box, linear-gradient(135deg, var(--bs-ultraviolet), var(--bs-pink)) border-box;
}

/* Icon spot */
.icon-spot {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px; 
    color: #ffffff;
    background-color: var(--bs-pink, #e44d9c); 
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
    flex: 0 0 44px; 
}

    .icon-spot:hover,
    .icon-spot:focus {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(228,77,156,0.5); 
        opacity: 0.95;
    }

.vl-mark-primary {
    background-color: var(--bs-ultraviolet);
    color:#fff;
    border-radius:5px;
    padding-left:.5em;
    padding-right:.5em;
}

.vl-mark-secondary {
    background-color: var(--bs-gray-200);
    /*color: #fff;*/
    border-radius: 5px;
    padding-left: .5em;
    padding-right: .5em;
}

.vl-product-image {
    max-height: 275px;
    width: auto;
}

.vl-h-50 {
    height:50px !important;
}