:root{
    --vst-cyan:#27cfd0;
    --vst-cyan-dark:#0aa7b0;
    --vst-purple:#7d22b7;
    --vst-purple-dark:#53137e;
    --vst-navy:#051932;
    --vst-blue:#065de7;
    --vst-black:#06080c;
    --vst-light:#f5fbff;
    --vst-border:rgba(5,25,50,.12);
    --vst-shadow:0 18px 55px rgba(5,25,50,.12);
    --vst-radius:24px;
}

*{box-sizing:border-box}
body{
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    color:#101828;
    background:#fff;
    overflow-x:hidden;
}
a{color:var(--vst-purple);text-decoration:none}
a:hover{color:var(--vst-cyan-dark)}

.topbar{
    background:#05080d;
    color:#fff;
    font-size:.85rem;
    padding:.45rem 0;
}
.topbar-links{
    display:flex;
    gap:1rem;
    align-items:center;
    flex-wrap:wrap;
}
.topbar i{color:var(--vst-cyan)}
.topbar a{color:#fff}
.topbar a:hover{color:var(--vst-cyan)}

.main-nav{
    min-height:86px;
}
.brand-logo{
    width:88px;
    height:74px;
    object-fit:contain;
    border-radius:10px;
}
.brand-copy{
    border-left:1px solid #d6dbe4;
    padding-left:1rem;
    line-height:1.2;
    max-width:260px;
}
.brand-copy strong{
    display:block;
    font-size:.95rem;
    color:#0b1220;
}
.brand-copy small{
    display:block;
    color:var(--vst-purple);
    font-weight:800;
}
.nav-link{
    font-weight:800;
    color:#0b1220!important;
    margin:0 .35rem;
    position:relative;
}
.nav-link.active,
.nav-link:hover{
    color:var(--vst-purple)!important;
}
.nav-link.active:after{
    content:"";
    position:absolute;
    left:.5rem;
    right:.5rem;
    bottom:.25rem;
    height:3px;
    border-radius:20px;
    background:linear-gradient(90deg,var(--vst-cyan),var(--vst-purple));
}
.btn{
    border-radius:12px;
    font-weight:800;
}
.btn-primary-gradient{
    border:0;
    color:#fff!important;
    background:linear-gradient(135deg,var(--vst-cyan),var(--vst-purple));
    box-shadow:0 12px 28px rgba(125,34,183,.25);
}
.btn-primary-gradient:hover{
    filter:brightness(.98);
    transform:translateY(-1px);
}
.btn-whatsapp{
    border:0;
    color:#fff!important;
    background:linear-gradient(135deg,#16b83e,#0a8f2a);
    box-shadow:0 12px 28px rgba(22,184,62,.25);
}
.btn-outline-glow{
    color:#fff;
    border:1px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.06);
}
.btn-outline-glow:hover{
    background:#fff;
    color:var(--vst-navy);
}

.hero{
    position:relative;
    color:#061223;
    overflow:hidden;
    background:
        radial-gradient(circle at 70% 20%,rgba(255,255,255,.7),transparent 26%),
        radial-gradient(circle at 85% 45%,rgba(125,34,183,.22),transparent 25%),
        linear-gradient(105deg,rgba(39,207,208,.98) 0%,rgba(39,207,208,.86) 42%,rgba(5,25,50,.95) 100%);
}
.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(120deg,rgba(255,255,255,.18) 1px,transparent 1px),
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.35),transparent 1px),
        radial-gradient(circle at 70% 50%,rgba(255,255,255,.22),transparent 1px);
    background-size:70px 70px,48px 48px,75px 75px;
    opacity:.42;
}
.hero:after{
    content:"";
    position:absolute;
    right:-160px;
    top:-130px;
    width:640px;
    height:640px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.25);
    box-shadow:inset 0 0 80px rgba(255,255,255,.18);
}
.hero-inner{
    position:relative;
    z-index:2;
    min-height:430px;
    display:flex;
    align-items:center;
    padding:5rem 0 4rem;
}
.hero h1{
    font-size:clamp(2.2rem,4vw,4rem);
    font-weight:950;
    letter-spacing:-.04em;
    line-height:1.02;
}
.hero h1 .accent{
    color:var(--vst-purple);
    text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.hero p{
    font-size:1.15rem;
    font-weight:600;
    max-width:620px;
}
.hero-visual{
    min-height:330px;
    position:relative;
}
.glass-orb{
    position:absolute;
    inset:20px;
    border-radius:40px;
    background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(8px);
    box-shadow:0 30px 90px rgba(0,0,0,.28);
    overflow:hidden;
}
.glass-orb:before{
    content:"";
    position:absolute;
    inset:35px;
    border-radius:50%;
    border:1px dashed rgba(255,255,255,.45);
    animation:spin 20s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-icons{
    position:absolute;
    z-index:4;
    inset:0;
}
.hero-icon{
    position:absolute;
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    border-radius:30px;
    color:#fff;
    font-size:2.5rem;
    background:linear-gradient(135deg,rgba(39,207,208,.9),rgba(125,34,183,.92));
    box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.hero-icon span{
    position:absolute;
    bottom:12px;
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
}
.icon-1{left:12%;top:13%}
.icon-2{right:14%;top:9%}
.icon-3{left:22%;bottom:15%}
.icon-4{right:10%;bottom:20%}

.feature-strip{
    margin-top:-42px;
    position:relative;
    z-index:3;
}
.feature-strip .inner{
    background:#fff;
    border:1px solid var(--vst-border);
    border-radius:18px;
    box-shadow:var(--vst-shadow);
    overflow:hidden;
}
.feature-item{
    padding:1.2rem;
    display:flex;
    align-items:center;
    gap:1rem;
    min-height:112px;
}
.feature-item:not(:last-child){
    border-right:1px solid var(--vst-border);
}
.feature-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#061223;
    background:linear-gradient(135deg,rgba(39,207,208,.28),rgba(125,34,183,.12));
    font-size:1.7rem;
    flex:0 0 58px;
}
.feature-item h6{
    margin:0 0 .2rem;
    font-weight:900;
}
.feature-item p{
    margin:0;
    font-size:.88rem;
    color:#475467;
}

.section{
    padding:5rem 0;
}
.section-sm{
    padding:3.5rem 0;
}
.bg-soft{
    background:linear-gradient(180deg,#fff 0%,#f4fdff 100%);
}
.bg-darkmesh{
    color:#fff;
    background:
        radial-gradient(circle at 20% 10%,rgba(39,207,208,.25),transparent 25%),
        radial-gradient(circle at 78% 20%,rgba(125,34,183,.35),transparent 25%),
        linear-gradient(135deg,#05080d,#071c39);
}
.section-title{
    margin-bottom:2.3rem;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:var(--vst-purple);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:950;
    font-size:.78rem;
}
.section-title h2{
    font-weight:950;
    letter-spacing:-.035em;
    margin:.35rem 0 .6rem;
}
.section-title p{
    color:#667085;
    max-width:760px;
    margin:auto;
}
.bg-darkmesh .section-title p{color:rgba(255,255,255,.78)}

.card-lift{
    border:1px solid var(--vst-border);
    border-radius:var(--vst-radius);
    background:#fff;
    box-shadow:0 10px 30px rgba(5,25,50,.08);
    transition:.18s ease;
    height:100%;
}
.card-lift:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 55px rgba(5,25,50,.14);
}
.solution-card{
    padding:1.35rem;
}
.solution-card .iconbox,
.service-card .iconbox{
    width:56px;
    height:56px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--vst-cyan),var(--vst-purple));
    color:#fff;
    font-size:1.7rem;
    margin-bottom:1rem;
}
.solution-card h5,
.service-card h5{
    font-weight:950;
    font-size:1rem;
}
.solution-card p,
.service-card p{
    color:#667085;
    font-size:.92rem;
}
.learn-link{
    font-weight:900;
    font-size:.88rem;
}

.pricing-card{
    position:relative;
    padding:1.55rem;
    overflow:hidden;
}
.pricing-card.popular{
    border:2px solid var(--vst-purple);
}
.ribbon{
    position:absolute;
    top:18px;
    right:-44px;
    transform:rotate(38deg);
    background:linear-gradient(135deg,var(--vst-purple),var(--vst-cyan));
    color:#fff;
    font-size:.72rem;
    font-weight:950;
    padding:.35rem 3.2rem;
}
.price-name{
    font-weight:950;
    font-size:1.1rem;
}
.small-muted{
    color:#667085;
    font-size:.9rem;
}
.price-box{
    background:linear-gradient(135deg,rgba(39,207,208,.16),rgba(125,34,183,.08));
    border-radius:18px;
    padding:1rem;
    margin:1rem 0;
    border:1px solid rgba(39,207,208,.25);
}
.price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
}
.price-cell{
    background:#fff;
    border:1px solid var(--vst-border);
    border-radius:15px;
    padding:.75rem;
}
.price-cell strong{
    display:block;
    font-size:1.35rem;
    line-height:1;
}
.price-cell small{
    color:#667085;
    font-weight:700;
}
.best-value{
    border:2px solid var(--vst-cyan);
    box-shadow:0 18px 50px rgba(39,207,208,.14);
}
.compare-highlight{
    border-radius:18px;
    background:linear-gradient(135deg,var(--vst-cyan),var(--vst-purple));
    color:#fff;
    padding:1rem;
    font-weight:900;
}
.list-check{
    list-style:none;
    padding:0;
    margin:0;
}
.list-check li{
    display:flex;
    gap:.65rem;
    margin:.55rem 0;
    color:#344054;
}
.list-check i{
    color:var(--vst-cyan-dark);
}
.bg-darkmesh .list-check li{color:rgba(255,255,255,.82)}
.bg-darkmesh .card-lift.text-dark .list-check li,
.bg-darkmesh .card-lift.text-dark .list-check span{
    color:#344054;
}

.included-bar{
    background:linear-gradient(135deg,var(--vst-cyan),#36d7e0);
    border-radius:20px;
    padding:1.2rem;
    box-shadow:0 18px 48px rgba(39,207,208,.2);
    border:1px solid rgba(255,255,255,.45);
}
.included-pill{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-weight:950;
}
.included-pill i{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    color:#061223;
    font-size:1.25rem;
}
.stats-card{
    padding:1.5rem;
    border-radius:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
}
.stats-card strong{
    display:block;
    color:var(--vst-cyan);
    font-size:2rem;
}

.page-hero{
    padding:4rem 0;
    background:
        radial-gradient(circle at 85% 10%,rgba(125,34,183,.22),transparent 20%),
        linear-gradient(135deg,#061223,var(--vst-navy));
    color:#fff;
}
.page-hero h1{
    font-weight:950;
    letter-spacing:-.035em;
}
.page-hero p{
    color:rgba(255,255,255,.75);
    max-width:760px;
}
.breadcrumb-lite a{color:var(--vst-cyan)}

.contact-card{
    padding:2rem;
}
.form-control,
.form-select{
    border-radius:12px;
    padding:.82rem 1rem;
    border-color:#d0d5dd;
}
.form-control:focus,
.form-select:focus{
    border-color:var(--vst-cyan);
    box-shadow:0 0 0 .25rem rgba(39,207,208,.15);
}
.contact-method{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    padding:1rem;
    border:1px solid var(--vst-border);
    border-radius:18px;
    background:#fff;
}
.contact-method i{
    color:#fff;
    background:linear-gradient(135deg,var(--vst-cyan),var(--vst-purple));
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    font-size:1.35rem;
    flex:0 0 46px;
}

.cta-band{
    color:#fff;
    padding:2.2rem 0;
    background:
        radial-gradient(circle at 15% 25%,rgba(39,207,208,.35),transparent 25%),
        linear-gradient(135deg,#05080d,#071c39 55%,#17042b);
}
.cta-band h2{
    font-weight:950;
}
.site-footer{
    background:#04070d;
    color:#fff;
    padding:3.5rem 0 1.25rem;
}
.footer-brand img{
    width:80px;
    height:72px;
    object-fit:contain;
    border-radius:10px;
}
.footer-brand h5{
    margin:0;
    font-weight:950;
}
.footer-brand p{
    margin:0;
    color:var(--vst-cyan);
    font-weight:900;
}
.site-footer h6{
    font-weight:950;
    color:#fff;
}
.site-footer a{
    display:block;
    color:rgba(255,255,255,.72);
    margin:.4rem 0;
}
.site-footer a:hover{color:var(--vst-cyan)}
.footer-text{color:rgba(255,255,255,.72)}
.site-footer hr{
    border-color:rgba(255,255,255,.12);
    margin:2rem 0 1rem;
}
.footer-bottom,
.footer-bottom a{
    color:rgba(255,255,255,.65);
}

.floating-whatsapp{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:999;
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff!important;
    background:#1db954;
    box-shadow:0 16px 40px rgba(29,185,84,.35);
    font-size:1.8rem;
}

.anchor-offset{
    scroll-margin-top:105px;
}
.highlight-number{
    font-size:clamp(2rem,4vw,3.5rem);
    font-weight:950;
    color:var(--vst-purple);
    letter-spacing:-.05em;
}
.table-pricing{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 16px 48px rgba(5,25,50,.08);
}
.table-pricing th{
    background:#061223;
    color:#fff;
}
.table-pricing td,
.table-pricing th{
    padding:1rem;
    vertical-align:middle;
}

@media (max-width: 991px){
    .brand-logo{
        width:70px;
        height:62px;
    }
    .main-nav{min-height:76px}
    .nav-link.active:after{display:none}
    .hero-inner{padding:3.5rem 0}
    .hero-visual{display:none}
    .feature-strip{margin-top:0}
    .feature-item:not(:last-child){border-right:0;border-bottom:1px solid var(--vst-border)}
}
@media (max-width: 575px){
    .price-grid{grid-template-columns:1fr}
    .section{padding:3.5rem 0}
    .topbar-links{gap:.6rem}
}


.form-check-input:checked{
    background-color:var(--vst-purple);
    border-color:var(--vst-purple);
}
.form-check-label{
    color:#344054;
}
.card-lift h2,
.card-lift h3,
.card-lift h4{
    scroll-margin-top:105px;
}

.member-login-note{font-size:.9rem;color:#667085}
.ecard-public-card{max-width:760px;margin:auto}


/* V1.3.1 Mobile + Menu Cleanup */
.main-nav{
    min-height:78px;
}
.brand-logo{
    width:76px;
    height:66px;
}
.brand-copy{
    max-width:235px;
}
.brand-copy strong{
    font-size:.86rem;
}
.brand-copy small{
    font-size:.76rem;
}
.navbar-nav .nav-link{
    font-size:.9rem;
    padding-left:.45rem!important;
    padding-right:.45rem!important;
    white-space:nowrap;
}
.nav-quick-whatsapp{
    align-items:center;
    gap:.35rem;
}
.dropdown-menu-clean{
    border:1px solid var(--vst-border);
    border-radius:18px;
    box-shadow:0 18px 50px rgba(5,25,50,.14);
    padding:.55rem;
}
.dropdown-menu-clean .dropdown-item{
    border-radius:12px;
    font-weight:800;
    font-size:.88rem;
    padding:.7rem .85rem;
    display:flex;
    align-items:center;
    gap:.6rem;
}
.dropdown-menu-clean .dropdown-item i{
    color:var(--vst-purple);
    font-size:1.05rem;
}
.dropdown-menu-clean .dropdown-item:hover{
    background:linear-gradient(135deg,rgba(39,207,208,.12),rgba(125,34,183,.08));
    color:var(--vst-purple);
}
.dropdown-menu-wide{
    min-width:310px;
}
.w-xl-auto{
    width:auto!important;
}

@media (max-width: 1199.98px){
    .main-nav{
        min-height:72px;
    }
    .brand-logo{
        width:66px;
        height:58px;
    }
    .navbar-collapse{
        background:#fff;
        border-top:1px solid var(--vst-border);
        margin-top:.75rem;
        padding:.75rem 0 1rem;
        max-height:calc(100vh - 86px);
        overflow-y:auto;
    }
    .navbar-nav{
        gap:.15rem;
    }
    .navbar-nav .nav-link{
        font-size:.98rem;
        padding:.75rem 1rem!important;
        border-radius:12px;
        white-space:normal;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active{
        background:linear-gradient(135deg,rgba(39,207,208,.12),rgba(125,34,183,.08));
    }
    .nav-link.active:after{
        display:none!important;
    }
    .dropdown-menu-clean{
        box-shadow:none;
        border:0;
        border-left:3px solid var(--vst-cyan);
        border-radius:0;
        margin:.1rem 0 .35rem 1rem;
        padding:.15rem .35rem;
    }
    .dropdown-menu-clean .dropdown-item{
        font-size:.92rem;
        padding:.65rem .75rem;
        white-space:normal;
    }
    .dropdown-menu-wide{
        min-width:100%;
    }
    .w-xl-auto{
        width:100%!important;
    }
    .hero-inner{
        min-height:auto;
    }
    .feature-strip .inner{
        border-radius:0;
        box-shadow:none;
    }
}

@media (max-width: 767.98px){
    .topbar{
        display:none!important;
    }
    .main-nav{
        min-height:64px;
    }
    .brand-logo{
        width:56px;
        height:50px;
    }
    .navbar-toggler{
        padding:.35rem .45rem;
    }
    .nav-quick-whatsapp{
        font-size:.78rem;
        padding:.35rem .55rem;
    }
    .hero h1{
        font-size:2rem;
        line-height:1.08;
    }
    .hero p{
        font-size:1rem;
    }
    .hero-inner{
        padding:2.5rem 0;
    }
    .page-hero{
        padding:2.5rem 0;
    }
    .page-hero h1{
        font-size:2rem;
    }
    .section{
        padding:3rem 0;
    }
    .section-sm{
        padding:2rem 0;
    }
    .section-title{
        margin-bottom:1.5rem;
    }
    .section-title h2{
        font-size:1.75rem;
    }
    .card-lift,
    .contact-card,
    .pricing-card{
        border-radius:18px;
    }
    .contact-card{
        padding:1.25rem;
    }
    .feature-item{
        min-height:auto;
        padding:1rem;
    }
    .feature-icon{
        width:48px;
        height:48px;
        flex-basis:48px;
        font-size:1.35rem;
    }
    .btn-lg{
        font-size:1rem;
        padding:.65rem .9rem;
    }
    .included-pill{
        font-size:.9rem;
    }
    .included-pill i{
        width:38px;
        height:38px;
    }
    .table-pricing td,
    .table-pricing th{
        min-width:180px;
        font-size:.88rem;
    }
    .floating-whatsapp{
        width:54px;
        height:54px;
        right:14px;
        bottom:14px;
    }
    .footer-brand img{
        width:64px;
        height:58px;
    }
}

@media (max-width: 420px){
    .nav-quick-whatsapp{
        display:none!important;
    }
    .brand-logo{
        width:52px;
        height:46px;
    }
    .hero h1,
    .page-hero h1{
        font-size:1.75rem;
    }
    .price-cell strong{
        font-size:1.15rem;
    }
    .solution-card,
    .service-card{
        padding:1rem!important;
    }
}



/* VST shiny refresh using the supplied logo artwork */
body{
    background:
        radial-gradient(circle at 10% 0%, rgba(39,207,208,.10), transparent 28%),
        radial-gradient(circle at 95% 12%, rgba(125,34,183,.10), transparent 25%),
        #ffffff;
}

.topbar{
    background:linear-gradient(90deg,#03050a,#101329 52%,#26063d);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.main-nav{
    min-height:98px;
    background:rgba(255,255,255,.86)!important;
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(39,207,208,.22);
}

.navbar-brand{
    min-width:260px;
}

.brand-logo{
    width:230px;
    max-width:46vw;
    height:auto;
    object-fit:contain;
    border-radius:0;
    filter:drop-shadow(0 10px 18px rgba(5,25,50,.12));
}

.brand-copy{
    display:none!important;
}

.nav-link{
    letter-spacing:.01em;
}

.nav-link.active:after{
    left:.25rem;
    right:.25rem;
    bottom:.05rem;
    height:4px;
    box-shadow:0 0 16px rgba(39,207,208,.65);
}

.btn-primary-gradient,
.btn-whatsapp,
.hero-icon,
.feature-icon,
.card-icon,
.package-card .price-badge{
    position:relative;
    overflow:hidden;
}

.btn-primary-gradient:before,
.btn-whatsapp:before,
.hero-icon:before,
.feature-icon:before,
.card-icon:before,
.package-card .price-badge:before{
    content:"";
    position:absolute;
    top:-80%;
    left:-45%;
    width:36%;
    height:260%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
    transform:rotate(25deg);
    animation:vst-shine 4.8s ease-in-out infinite;
}

@keyframes vst-shine{
    0%,62%{left:-55%;opacity:0}
    72%{opacity:1}
    100%{left:125%;opacity:0}
}

.hero{
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.95), transparent 20%),
        radial-gradient(circle at 78% 22%, rgba(125,34,183,.32), transparent 28%),
        linear-gradient(135deg,#32e2e2 0%,#22c7cf 40%,#161f40 78%,#07080f 100%);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.3);
}

.hero:before{
    background-image:
        linear-gradient(120deg,rgba(255,255,255,.22) 1px,transparent 1px),
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.4),transparent 1px),
        radial-gradient(circle at 70% 50%,rgba(255,255,255,.26),transparent 1px);
    opacity:.55;
}

.hero h1{
    color:#07111f;
    text-shadow:0 2px 0 rgba(255,255,255,.18);
}

.hero p{
    color:#102033;
}

.eyebrow{
    box-shadow:0 12px 30px rgba(39,207,208,.18);
}

.glass-orb{
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.4rem;
    border-radius:34px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.08)),
        radial-gradient(circle at 15% 0%,rgba(255,255,255,.72),transparent 28%);
    border:1px solid rgba(255,255,255,.48);
    box-shadow:0 34px 100px rgba(5,25,50,.28), inset 0 1px 0 rgba(255,255,255,.5);
}

.glass-orb:before{
    display:none;
}

.hero-logo-card{
    position:relative;
    z-index:3;
    width:min(560px,100%);
    padding:1rem;
    border-radius:26px;
    background:linear-gradient(135deg,rgba(255,255,255,.40),rgba(255,255,255,.10));
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 22px 70px rgba(0,0,0,.20);
    overflow:hidden;
}

.hero-logo-card:after{
    content:"";
    position:absolute;
    inset:-40% auto -40% -35%;
    width:28%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
    transform:rotate(24deg);
    animation:vst-shine 5.4s ease-in-out infinite;
}

.hero-logo-card img{
    display:block;
    width:100%;
    height:auto;
    border-radius:18px;
}

.hero-icon{
    width:96px;
    height:96px;
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 20px 60px rgba(5,25,50,.32), inset 0 1px 0 rgba(255,255,255,.35);
}

.icon-1{left:2%;top:6%}
.icon-2{right:1%;top:6%}
.icon-3{left:6%;bottom:4%}
.icon-4{right:4%;bottom:5%}

.feature-strip .inner,
.service-card,
.package-card,
.value-card,
.solution-card,
.contact-card,
.card,
.stat-card{
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,253,255,.86));
    border:1px solid rgba(39,207,208,.18);
    box-shadow:0 22px 65px rgba(5,25,50,.11);
}

.service-card:hover,
.package-card:hover,
.value-card:hover,
.solution-card:hover{
    transform:translateY(-5px);
    box-shadow:0 30px 90px rgba(5,25,50,.16);
    border-color:rgba(125,34,183,.28);
}

.section-title h2{
    background:linear-gradient(90deg,#061223,#53137e 58%,#0aa7b0);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

footer,
.footer{
    background:
        radial-gradient(circle at 20% 10%,rgba(39,207,208,.22),transparent 25%),
        radial-gradient(circle at 80% 0%,rgba(125,34,183,.24),transparent 26%),
        linear-gradient(135deg,#05080d,#101329 55%,#23063a)!important;
}

@media (max-width:1199px){
    .brand-logo{width:190px}
    .navbar-brand{min-width:auto}
}

@media (max-width:575px){
    .brand-logo{width:158px;max-width:58vw}
    .main-nav{min-height:82px}
    .hero-logo-card{padding:.55rem;border-radius:18px}
    .hero-icons{display:none}
}


/* VST Premium Teal Theme v3
   One-logo rule: the site uses assets/img/vst-logo-marketing-teal.png everywhere.
   Theme direction: darker, glossy, technology-style background instead of plain white. */
:root{
    --vst-cyan:#28f0ef;
    --vst-cyan-dark:#10bfc7;
    --vst-teal:#0e8f9f;
    --vst-purple:#9657ff;
    --vst-purple-dark:#5b20a3;
    --vst-navy:#071425;
    --vst-ink:#040811;
    --vst-panel:rgba(8,24,43,.78);
    --vst-panel-soft:rgba(12,34,58,.68);
    --vst-border:rgba(40,240,239,.20);
    --vst-shadow:0 24px 80px rgba(0,0,0,.34);
}

html{
    background:#040811;
}

body{
    color:#eefcff;
    background:
        radial-gradient(circle at 8% 4%, rgba(40,240,239,.25), transparent 28%),
        radial-gradient(circle at 96% 0%, rgba(150,87,255,.22), transparent 24%),
        radial-gradient(circle at 72% 54%, rgba(16,191,199,.14), transparent 32%),
        linear-gradient(145deg,#040811 0%,#071425 46%,#092433 100%)!important;
    min-height:100vh;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background-image:
        linear-gradient(rgba(40,240,239,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,240,239,.055) 1px, transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,.12));
}

a{color:var(--vst-cyan)}
a:hover{color:#ffffff}

.topbar{
    background:linear-gradient(90deg,#03101b,#07283a 55%,#180d34)!important;
    border-bottom:1px solid rgba(40,240,239,.16);
}

.main-nav{
    background:rgba(4,13,25,.78)!important;
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(40,240,239,.18);
    box-shadow:0 18px 55px rgba(0,0,0,.26)!important;
}

.navbar-brand{
    min-width:240px;
}

.brand-logo{
    width:220px;
    max-width:46vw;
    height:auto;
    filter:drop-shadow(0 16px 30px rgba(40,240,239,.22));
}

.navbar-toggler{
    border-color:rgba(40,240,239,.28)!important;
}

.nav-link{
    color:rgba(238,252,255,.86)!important;
}

.nav-link.active,
.nav-link:hover{
    color:var(--vst-cyan)!important;
}

.nav-link.active:after{
    background:linear-gradient(90deg,var(--vst-cyan),var(--vst-purple));
}

.dropdown-menu-clean{
    background:rgba(5,18,32,.97);
    border:1px solid rgba(40,240,239,.18);
    box-shadow:0 24px 70px rgba(0,0,0,.38);
}

.dropdown-menu-clean .dropdown-item{
    color:rgba(238,252,255,.88);
}

.dropdown-menu-clean .dropdown-item:hover{
    background:linear-gradient(135deg,rgba(40,240,239,.14),rgba(150,87,255,.12));
    color:#fff;
}

.hero{
    color:#eefcff;
    background:
        radial-gradient(circle at 18% 18%,rgba(40,240,239,.34),transparent 24%),
        radial-gradient(circle at 82% 18%,rgba(150,87,255,.34),transparent 28%),
        linear-gradient(135deg,#04101d 0%,#072034 42%,#0a5660 72%,#14072c 100%)!important;
    border-bottom:1px solid rgba(40,240,239,.24);
}

.hero:before{
    background-image:
        linear-gradient(120deg,rgba(255,255,255,.11) 1px,transparent 1px),
        radial-gradient(circle at 20% 20%,rgba(40,240,239,.32),transparent 1px),
        radial-gradient(circle at 70% 50%,rgba(150,87,255,.25),transparent 1px);
    opacity:.62;
}

.hero h1{
    color:#ffffff;
    text-shadow:0 10px 32px rgba(0,0,0,.26);
}

.hero h1 .accent{
    color:var(--vst-cyan);
    text-shadow:0 0 28px rgba(40,240,239,.45);
}

.hero p{
    color:rgba(238,252,255,.84);
}

.eyebrow{
    color:var(--vst-cyan)!important;
    background:rgba(4,13,25,.42);
    border:1px solid rgba(40,240,239,.22);
    border-radius:999px;
    padding:.5rem .8rem;
    box-shadow:0 15px 45px rgba(0,0,0,.20);
}

.glass-orb{
    background:
        radial-gradient(circle at 20% 0%,rgba(40,240,239,.22),transparent 32%),
        linear-gradient(145deg,rgba(9,34,56,.78),rgba(6,16,31,.42));
    border:1px solid rgba(40,240,239,.26);
    box-shadow:0 34px 110px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}

.hero-logo-card{
    background:
        linear-gradient(145deg,rgba(5,18,32,.72),rgba(13,47,70,.34));
    border:1px solid rgba(40,240,239,.24);
    box-shadow:0 26px 90px rgba(0,0,0,.38), 0 0 42px rgba(40,240,239,.12);
}

.hero-logo-card img{
    filter:drop-shadow(0 18px 30px rgba(40,240,239,.22));
}

.hero-icon,
.solution-card .iconbox,
.service-card .iconbox,
.contact-method i{
    background:linear-gradient(135deg,var(--vst-cyan-dark),var(--vst-purple));
    box-shadow:0 18px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.24);
}

.section,
.section-sm,
.bg-soft{
    background:transparent!important;
}

.bg-darkmesh,
.page-hero,
.cta-band,
.site-footer{
    background:
        radial-gradient(circle at 18% 8%,rgba(40,240,239,.20),transparent 25%),
        radial-gradient(circle at 84% 8%,rgba(150,87,255,.22),transparent 25%),
        linear-gradient(135deg,#040811,#071425 58%,#100825)!important;
}

.section-title h2,
.card-lift h1,
.card-lift h2,
.card-lift h3,
.card-lift h4,
.card-lift h5,
.card-lift h6,
.price-name,
.feature-item h6,
.service-card h5,
.solution-card h5{
    color:#ffffff!important;
    background:none!important;
    -webkit-background-clip:initial!important;
    background-clip:initial!important;
}

.section-title p,
.feature-item p,
.solution-card p,
.service-card p,
.small-muted,
.list-check li,
.form-check-label,
.card-lift p,
.card-lift .text-muted,
p.text-muted,
.text-muted{
    color:rgba(238,252,255,.72)!important;
}

.feature-strip .inner,
.card-lift,
.solution-card,
.service-card,
.pricing-card,
.contact-card,
.contact-method,
.stats-card,
.price-box,
.price-cell,
.table-pricing,
.included-bar{
    color:#eefcff;
    background:
        linear-gradient(145deg,rgba(9,31,52,.82),rgba(7,20,37,.72))!important;
    border:1px solid rgba(40,240,239,.18)!important;
    box-shadow:0 24px 76px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(12px);
}

.card-lift:hover,
.solution-card:hover,
.service-card:hover,
.pricing-card:hover{
    border-color:rgba(40,240,239,.36)!important;
    box-shadow:0 30px 95px rgba(0,0,0,.36),0 0 38px rgba(40,240,239,.10)!important;
}

.price-cell strong,
.highlight-number,
.stats-card strong{
    color:var(--vst-cyan)!important;
}

.pricing-card.popular,
.best-value{
    border-color:rgba(40,240,239,.55)!important;
    box-shadow:0 26px 90px rgba(0,0,0,.35),0 0 44px rgba(40,240,239,.16)!important;
}

.ribbon,
.compare-highlight,
.btn-primary-gradient{
    background:linear-gradient(135deg,var(--vst-cyan-dark),var(--vst-purple))!important;
}

.btn-outline-glow{
    color:#eefcff;
    border:1px solid rgba(40,240,239,.38);
    background:rgba(4,13,25,.34);
}

.btn-outline-glow:hover,
.btn-light{
    background:#eaffff!important;
    color:#061223!important;
    border-color:#eaffff!important;
}

.form-control,
.form-select{
    color:#eefcff;
    background:rgba(4,13,25,.64);
    border-color:rgba(40,240,239,.24);
}

.form-control::placeholder{
    color:rgba(238,252,255,.48);
}

.form-control:focus,
.form-select:focus{
    color:#fff;
    background:rgba(4,13,25,.82);
    border-color:var(--vst-cyan);
    box-shadow:0 0 0 .25rem rgba(40,240,239,.16);
}

.form-select option{
    background:#071425;
    color:#eefcff;
}

.table-pricing th{
    background:#05111f!important;
}

.table-pricing td{
    color:rgba(238,252,255,.80);
    border-color:rgba(40,240,239,.12);
}

.site-footer{
    border-top:1px solid rgba(40,240,239,.16);
}

.footer-brand img{
    width:150px;
    height:auto;
    filter:drop-shadow(0 16px 28px rgba(40,240,239,.20));
}

.floating-whatsapp{
    box-shadow:0 16px 48px rgba(29,185,84,.34),0 0 24px rgba(40,240,239,.12);
}

@media (max-width:1199.98px){
    .navbar-collapse{
        background:rgba(4,13,25,.96)!important;
        border-top:1px solid rgba(40,240,239,.18);
    }
    .brand-logo{width:190px}
}

@media (max-width:575px){
    .brand-logo{width:156px;max-width:62vw}
    .navbar-brand{min-width:auto}
}


/* Premium dark table override: fixes Bootstrap table rows becoming white on the dark teal theme */
.table-pricing{
    background:linear-gradient(145deg,rgba(5,25,50,.92),rgba(3,48,68,.88));
    border:1px solid rgba(39,207,208,.28);
    box-shadow:0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.table-pricing .table{
    --bs-table-bg:transparent;
    --bs-table-color:#eefcff;
    --bs-table-hover-bg:rgba(39,207,208,.10);
    --bs-table-hover-color:#ffffff;
    color:#eefcff;
}
.table-pricing thead th{
    background:linear-gradient(135deg,rgba(3,12,26,.98),rgba(9,37,68,.98));
    color:#ffffff;
    border-bottom:1px solid rgba(39,207,208,.35);
}
.table-pricing tbody tr{
    background:rgba(255,255,255,.035);
}
.table-pricing tbody tr:nth-child(even){
    background:rgba(39,207,208,.065);
}
.table-pricing td,
.table-pricing th,
.table-pricing .table > :not(caption) > * > *{
    background-color:transparent!important;
    color:#eefcff;
    border-color:rgba(39,207,208,.18);
}
.table-pricing strong{
    color:#ffffff;
}
.table-pricing .small-muted{
    color:rgba(238,252,255,.74)!important;
}
.table-pricing .text-success{
    color:#55f2aa!important;
}
.table-pricing tbody tr:hover{
    box-shadow:inset 4px 0 0 var(--vst-cyan);
}


/* VST Premium living wallpaper + 3D motion theme */
html{
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}
body{
    color:#eafcff!important;
    background:#030814!important;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(39,207,208,.22), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(125,34,183,.28), transparent 26%),
        radial-gradient(circle at 72% 82%, rgba(0,168,255,.16), transparent 30%),
        linear-gradient(135deg,#030814 0%,#06182c 45%,#0a1025 100%)!important;
    background-attachment:fixed;
}
body::before,
body::after{
    content:"";
    position:fixed;
    inset:-20%;
    pointer-events:none;
    z-index:-2;
}
body::before{
    background:
        radial-gradient(circle at 20% 20%, rgba(39,207,208,.22), transparent 18%),
        radial-gradient(circle at 80% 25%, rgba(139,67,255,.20), transparent 20%),
        radial-gradient(circle at 58% 80%, rgba(0,255,210,.12), transparent 24%);
    filter:blur(22px);
    animation:vstLivingGlow 18s ease-in-out infinite alternate;
}
body::after{
    z-index:-1;
    background-image:
        linear-gradient(rgba(39,207,208,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39,207,208,.07) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.5px);
    background-size:80px 80px,80px 80px,46px 46px;
    mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 85%, transparent 100%);
    opacity:.65;
    animation:vstGridDrift 32s linear infinite;
}
@keyframes vstLivingGlow{
    0%{transform:translate3d(-2%, -1%,0) scale(1); filter:hue-rotate(0deg) blur(22px)}
    50%{transform:translate3d(2%, 1.5%,0) scale(1.05); filter:hue-rotate(12deg) blur(26px)}
    100%{transform:translate3d(3%, -2%,0) scale(1.08); filter:hue-rotate(-8deg) blur(24px)}
}
@keyframes vstGridDrift{
    from{background-position:0 0,0 0,0 0}
    to{background-position:160px 240px,160px 240px,92px 138px}
}
@keyframes vstFloat3d{
    0%,100%{transform:perspective(900px) translateY(0) rotateX(0deg) rotateY(0deg)}
    50%{transform:perspective(900px) translateY(-14px) rotateX(3deg) rotateY(-5deg)}
}
@keyframes vstShine{
    0%{transform:translateX(-140%) skewX(-18deg)}
    100%{transform:translateX(220%) skewX(-18deg)}
}
@keyframes vstPulseGlow{
    0%,100%{box-shadow:0 24px 80px rgba(0,0,0,.42),0 0 32px rgba(39,207,208,.20), inset 0 1px 0 rgba(255,255,255,.16)}
    50%{box-shadow:0 32px 100px rgba(0,0,0,.50),0 0 58px rgba(39,207,208,.34), inset 0 1px 0 rgba(255,255,255,.22)}
}
.main-nav{
    background:linear-gradient(135deg,rgba(3,8,20,.88),rgba(6,24,44,.80))!important;
    border-bottom:1px solid rgba(39,207,208,.20);
    backdrop-filter:blur(18px);
}
.topbar{
    background:rgba(2,6,16,.92)!important;
    border-bottom:1px solid rgba(39,207,208,.12);
}
.brand-logo{
    width:132px!important;
    height:auto!important;
    max-height:72px;
    padding:8px;
    border-radius:24px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(39,207,208,.05));
    border:1px solid rgba(39,207,208,.28);
    box-shadow:0 12px 35px rgba(0,0,0,.34),0 0 22px rgba(39,207,208,.13);
    transform-style:preserve-3d;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.navbar-brand:hover .brand-logo{
    transform:perspective(700px) rotateX(5deg) rotateY(-8deg) translateY(-2px);
    border-color:rgba(39,207,208,.55);
    box-shadow:0 18px 46px rgba(0,0,0,.44),0 0 34px rgba(39,207,208,.24);
}
.brand-copy{
    border-left:1px solid rgba(39,207,208,.28)!important;
}
.brand-copy strong,
.nav-link{
    color:#f2feff!important;
}
.brand-copy small,
.nav-link.active,
.nav-link:hover{
    color:#43f2ef!important;
}
.nav-link.active:after{
    background:linear-gradient(90deg,#43f2ef,#9a63ff)!important;
}
.hero{
    color:#f2feff!important;
    background:
        radial-gradient(circle at 18% 20%,rgba(39,207,208,.28),transparent 28%),
        radial-gradient(circle at 76% 22%,rgba(158,91,255,.30),transparent 25%),
        linear-gradient(135deg,rgba(3,8,20,.94),rgba(3,28,48,.90) 48%,rgba(12,9,31,.95))!important;
    isolation:isolate;
}
.hero:before{
    background-image:
        linear-gradient(120deg,rgba(39,207,208,.11) 1px,transparent 1px),
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 1px),
        radial-gradient(circle at 70% 50%,rgba(39,207,208,.28),transparent 1px)!important;
    animation:vstGridDrift 28s linear infinite;
}
.hero h1,
.hero p,
.hero .eyebrow{
    color:#f2feff!important;
}
.hero h1 .accent{
    color:#43f2ef!important;
    text-shadow:0 0 30px rgba(39,207,208,.45)!important;
}
.glass-orb{
    background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(39,207,208,.06))!important;
    border:1px solid rgba(39,207,208,.28);
    box-shadow:0 28px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22);
    overflow:hidden;
    animation:vstFloat3d 7s ease-in-out infinite;
}
.glass-orb::before,
.card-lift::after,
.pricing-card::after,
.service-card::after,
.solution-card::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:45%;
    left:-55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    animation:vstShine 7s ease-in-out infinite;
    pointer-events:none;
}
.hero-logo-card{
    border-radius:34px!important;
    background:linear-gradient(145deg,rgba(2,10,22,.78),rgba(5,45,65,.54))!important;
    border:1px solid rgba(67,242,239,.35)!important;
    box-shadow:0 26px 90px rgba(0,0,0,.48),0 0 45px rgba(39,207,208,.20), inset 0 1px 0 rgba(255,255,255,.16)!important;
    animation:vstPulseGlow 4.8s ease-in-out infinite;
}
.hero-logo-card img{
    width:min(340px,80%);
    height:auto;
    filter:drop-shadow(0 16px 24px rgba(39,207,208,.26));
    border-radius:26px;
}
.hero-icon,
.iconbox,
.feature-icon{
    transform-style:preserve-3d;
    animation:vstFloat3d 8s ease-in-out infinite;
    box-shadow:0 18px 44px rgba(0,0,0,.30),0 0 26px rgba(39,207,208,.15)!important;
}
.hero-icon:nth-child(2),
.iconbox:nth-child(even){animation-delay:-1.5s}
.hero-icon:nth-child(3){animation-delay:-3s}
.hero-icon:nth-child(4){animation-delay:-4.5s}
.card-lift,
.solution-card,
.service-card,
.pricing-card{
    position:relative;
    overflow:hidden;
    border-radius:28px!important;
    transform-style:preserve-3d;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-lift:hover,
.solution-card:hover,
.service-card:hover,
.pricing-card:hover{
    transform:perspective(900px) translateY(-8px) rotateX(2deg) rotateY(-2deg);
}
.price-chip{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.42rem .72rem;
    border-radius:999px;
    color:#04111f;
    background:linear-gradient(135deg,#43f2ef,#b8fffb);
    font-size:.82rem;
    font-weight:950;
    box-shadow:0 10px 24px rgba(39,207,208,.18);
}
.btn-primary-gradient,
.btn-whatsapp,
.btn-outline-glow{
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary-gradient:hover,
.btn-whatsapp:hover,
.btn-outline-glow:hover{
    transform:translateY(-3px);
}
.btn-primary-gradient::after,
.btn-whatsapp::after{
    content:"";
    position:absolute;
    top:-50%;
    bottom:-50%;
    width:35%;
    left:-50%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    transform:skewX(-18deg);
    animation:vstShine 5.5s ease-in-out infinite;
}
.accordion-item,
.accordion-button,
.table{
    color:#eafcff!important;
    background:rgba(5,22,40,.62)!important;
}
.accordion-button:not(.collapsed){
    color:#04111f!important;
    background:linear-gradient(135deg,#43f2ef,#9a63ff)!important;
}
.member-area .table,
.member-area .table > :not(caption) > * > *,
.member-area .accordion-body{
    color:#eafcff!important;
    background:transparent!important;
    border-color:rgba(39,207,208,.18)!important;
}
.member-area .form-check-label,
.member-area label{
    color:#eafcff!important;
}
.site-footer,
.section,
.section-sm,
.bg-soft{
    background:transparent!important;
}
@media (max-width:1199.98px){
    .brand-logo{width:112px!important;max-width:40vw}
}
@media (max-width:575px){
    .brand-logo{width:96px!important;max-width:34vw}
    .hero-logo-card img{width:min(260px,82%)}
}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
        animation:none!important;
        transition:none!important;
    }
}


.saving-chip{
    display:block;
    text-align:center;
    border-radius:999px;
    padding:.6rem .9rem;
    font-weight:950;
    color:#04111f;
    background:linear-gradient(135deg,#43f2ef,#d8ff70);
    box-shadow:0 12px 30px rgba(67,242,239,.22);
}
.monthly-route-note{
    text-align:center;
    color:#c8fbff;
    font-size:.82rem;
    font-weight:850;
    opacity:.95;
}
.pricing-calc-box{
    border:1px solid rgba(67,242,239,.22);
    border-radius:16px;
    padding:.85rem;
    background:rgba(4,17,31,.42);
}
.pricing-calc-box .calc-label{
    display:block;
    color:#9bdde4;
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.pricing-calc-box .calc-value{
    display:block;
    color:#eaffff;
    font-size:1.05rem;
    font-weight:950;
}


/* Free first consultation callouts */
.free-consultation-badge,
.free-consultation-line {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(0, 229, 255, .32);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 229, 255, .14), rgba(139, 92, 246, .14));
    color: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 36px rgba(0, 229, 255, .12);
    backdrop-filter: blur(12px);
    font-weight: 800;
}
.free-consultation-line {
    color: var(--vst-light);
    border-radius: 1.25rem;
}
.consultation-panel {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    border-radius: 2rem;
    border: 1px solid rgba(0, 229, 255, .28);
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 229, 255, .22), transparent 35%),
        radial-gradient(circle at 85% 10%, rgba(139, 92, 246, .22), transparent 35%),
        rgba(8, 16, 34, .74);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
}
.consultation-panel::after {
    content: "";
    position: absolute;
    inset: -60% -20%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14), transparent 65%);
    transform: translateX(-55%) rotate(8deg);
    animation: cardShine 7s ease-in-out infinite;
    pointer-events: none;
}
.consultation-panel > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 575.98px) {
    .free-consultation-badge,
    .free-consultation-line {
        border-radius: 1rem;
        align-items: flex-start;
    }
    .consultation-panel {
        padding: 1.35rem;
    }
}


/* v9 hero balance and deployment polish */
.main-nav .container-xl{
    gap:1.25rem;
}
.navbar-brand{
    flex:0 0 auto;
}
.brand-logo{
    width:124px!important;
    max-height:58px!important;
    padding:7px!important;
    border-radius:22px!important;
}
.hero-inner{
    min-height:560px!important;
    padding:5.75rem 0 5rem!important;
}
.hero .row{
    align-items:center!important;
}
.hero h1{
    max-width:700px;
}
.hero-visual{
    min-height:430px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-4px);
}
.glass-orb{
    position:relative!important;
    inset:auto!important;
    width:min(560px,92%)!important;
    min-height:300px!important;
    border-radius:36px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:2rem!important;
    transform-origin:center!important;
}
.glass-orb::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:28px!important;
    border-radius:28px!important;
    border:1px solid rgba(67,242,239,.22)!important;
    background:linear-gradient(135deg,rgba(67,242,239,.08),rgba(154,99,255,.08))!important;
    animation:none!important;
}
.hero-logo-card{
    width:min(390px,78%)!important;
    padding:.65rem!important;
    border-radius:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:5!important;
}
.hero-logo-card img{
    width:100%!important;
    max-width:340px!important;
    border-radius:22px!important;
}
.hero-icons{
    position:absolute!important;
    inset:0!important;
    pointer-events:none;
}
.hero-icon{
    width:82px!important;
    height:82px!important;
    border-radius:24px!important;
    font-size:1.9rem!important;
    z-index:7!important;
}
.hero-icon span{
    bottom:8px!important;
    font-size:.58rem!important;
}
.icon-1{left:1.5%!important;top:14%!important}
.icon-2{right:4%!important;top:16%!important}
.icon-3{left:7%!important;bottom:12%!important}
.icon-4{right:8%!important;bottom:11%!important}
.feature-strip{
    margin-top:-34px!important;
}
.free-consultation-badge{
    max-width:630px;
    line-height:1.35;
}
@media (min-width:1400px){
    .glass-orb{width:540px!important}
    .hero-logo-card{width:390px!important}
}
@media (max-width:1199.98px){
    .hero-inner{
        min-height:auto!important;
        padding:4.5rem 0 3.5rem!important;
    }
    .hero-visual{
        min-height:360px!important;
        margin-top:1rem;
    }
    .glass-orb{
        width:min(520px,100%)!important;
        min-height:280px!important;
    }
    .icon-1{left:5%!important;top:10%!important}
    .icon-2{right:7%!important;top:12%!important}
    .icon-3{left:10%!important;bottom:9%!important}
    .icon-4{right:12%!important;bottom:8%!important}
}
@media (max-width:991.98px){
    .hero{
        text-align:left;
    }
    .hero-visual{
        min-height:320px!important;
    }
    .glass-orb{
        width:min(500px,92vw)!important;
        min-height:260px!important;
    }
    .hero-icon{
        width:72px!important;
        height:72px!important;
        border-radius:21px!important;
        font-size:1.65rem!important;
    }
}
@media (max-width:767.98px){
    .hero{
        text-align:center;
    }
    .hero p,
    .hero h1{
        margin-left:auto;
        margin-right:auto;
    }
    .hero .d-flex{
        justify-content:center;
    }
    .free-consultation-badge{
        display:flex;
        margin-left:auto;
        margin-right:auto;
        border-radius:18px;
        text-align:left;
    }
    .hero-visual{
        min-height:260px!important;
    }
    .glass-orb{
        min-height:215px!important;
        padding:1.2rem!important;
        border-radius:28px!important;
    }
    .hero-logo-card{
        width:min(300px,74%)!important;
        border-radius:24px!important;
    }
    .hero-icon{
        width:58px!important;
        height:58px!important;
        border-radius:18px!important;
        font-size:1.3rem!important;
    }
    .hero-icon span{
        display:none;
    }
}
@media (max-width:575.98px){
    .brand-logo{
        width:104px!important;
        max-height:52px!important;
    }
    .hero-visual{
        min-height:220px!important;
    }
    .glass-orb{
        width:100%!important;
        min-height:195px!important;
    }
    .hero-logo-card{
        width:min(260px,72%)!important;
        padding:.5rem!important;
    }
    .icon-1{left:2%!important;top:10%!important}
    .icon-2{right:3%!important;top:12%!important}
    .icon-3{left:6%!important;bottom:10%!important}
    .icon-4{right:7%!important;bottom:9%!important}
}


/* v10 hero visual: use the right-side space and place icons over the logo design */
@media (min-width: 992px) {
    .hero .row {
        --bs-gutter-x: 2.5rem;
    }
    .hero-visual {
        min-height: 430px !important;
        justify-content: flex-end !important;
        transform: translateY(-6px);
    }
    .glass-orb {
        width: min(690px, 100%) !important;
        min-height: 350px !important;
        margin-left: auto !important;
        padding: 2.4rem 2.75rem !important;
        border-radius: 40px !important;
        overflow: visible !important;
    }
    .glass-orb::before {
        inset: 34px !important;
        border-radius: 34px !important;
    }
    .glass-orb::after {
        content: "" !important;
        position: absolute !important;
        inset: -22px -18px auto auto !important;
        width: 60% !important;
        height: 58% !important;
        border-radius: 999px !important;
        background: radial-gradient(circle, rgba(67,242,239,.22), transparent 64%) !important;
        filter: blur(10px) !important;
        opacity: .75 !important;
        pointer-events: none !important;
    }
    .hero-logo-card {
        width: min(470px, 72%) !important;
        transform: translateX(32px) translateY(18px) !important;
        box-shadow: 0 26px 80px rgba(0,0,0,.30), 0 0 38px rgba(67,242,239,.18) !important;
    }
    .hero-logo-card img {
        max-width: 430px !important;
    }
    .hero-icons {
        inset: 0 !important;
    }
    .hero-icon {
        width: 88px !important;
        height: 88px !important;
        border-radius: 26px !important;
        transform: translateZ(0);
        box-shadow: 0 20px 50px rgba(0,0,0,.30), 0 0 28px rgba(67,242,239,.18) !important;
    }
    .icon-1 {
        left: 10% !important;
        top: 9% !important;
    }
    .icon-2 {
        left: 31% !important;
        top: 6% !important;
    }
    .icon-3 {
        right: 20% !important;
        top: 8% !important;
    }
    .icon-4 {
        right: 4% !important;
        top: 34% !important;
    }
}

@media (min-width: 1200px) {
    .hero-visual {
        margin-left: -1rem;
    }
    .glass-orb {
        width: min(735px, 106%) !important;
    }
    .hero-logo-card {
        width: min(510px, 74%) !important;
        transform: translateX(44px) translateY(24px) !important;
    }
    .hero-logo-card img {
        max-width: 470px !important;
    }
    .icon-1 { left: 7% !important; top: 8% !important; }
    .icon-2 { left: 28% !important; top: 2% !important; }
    .icon-3 { right: 23% !important; top: 5% !important; }
    .icon-4 { right: 3% !important; top: 31% !important; }
}

@media (min-width: 1400px) {
    .glass-orb {
        width: 760px !important;
        min-height: 365px !important;
        transform: translateX(16px);
    }
    .hero-logo-card {
        transform: translateX(58px) translateY(26px) !important;
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .hero-logo-card {
        transform: translateX(18px) translateY(18px) !important;
    }
    .icon-1 { left: 7% !important; top: 10% !important; }
    .icon-2 { left: 29% !important; top: 5% !important; }
    .icon-3 { right: 20% !important; top: 8% !important; }
    .icon-4 { right: 4% !important; top: 33% !important; }
}

@media (max-width: 991.98px) {
    .glass-orb {
        overflow: visible !important;
    }
    .hero-logo-card {
        transform: none !important;
    }
    .icon-1 { left: 6% !important; top: 8% !important; }
    .icon-2 { left: 31% !important; top: 1% !important; }
    .icon-3 { right: 26% !important; top: 5% !important; }
    .icon-4 { right: 6% !important; top: 28% !important; }
}

@media (max-width: 575.98px) {
    .icon-1 { left: 2% !important; top: 8% !important; }
    .icon-2 { left: 28% !important; top: 0 !important; }
    .icon-3 { right: 24% !important; top: 4% !important; }
    .icon-4 { right: 2% !important; top: 30% !important; }
}


/* V10.1 hero icon alignment patch
   Makes the hero icons static in the upper-right hero space, above the logo card. */
@media (min-width: 992px){
    .hero .row.align-items-center{
        align-items:flex-start !important;
    }

    .hero-visual{
        min-height:420px;
        margin-top:-8px;
        padding-top:0;
    }

    .hero-visual .glass-orb{
        top:100px;
        right:0;
        bottom:0;
        left:0;
        height:300px;
        min-height:300px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:1.25rem 2rem;
    }

    .hero-visual .hero-logo-card{
        width:min(460px,86%);
        margin:0 auto;
        transform:none;
    }

    .hero-visual .hero-icons{
        position:absolute;
        top:10px;
        left:0;
        right:0;
        height:120px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        padding:0 1.5rem;
        z-index:8;
        pointer-events:none;
    }

    .hero-visual .hero-icon,
    .hero-visual .icon-1,
    .hero-visual .icon-2,
    .hero-visual .icon-3,
    .hero-visual .icon-4{
        position:static !important;
        width:92px;
        height:92px;
        transform:none !important;
        animation:none !important;
        flex:0 0 92px;
    }

    .hero-visual .icon-1{margin-top:0}
    .hero-visual .icon-2{margin-top:34px}
    .hero-visual .icon-3{margin-top:0}
    .hero-visual .icon-4{margin-top:34px}
}

@media (max-width: 991.98px){
    .hero-visual{
        min-height:360px;
    }

    .hero-visual .glass-orb{
        top:105px;
        left:0;
        right:0;
        bottom:0;
        height:240px;
    }

    .hero-visual .hero-icons{
        position:absolute;
        top:8px;
        left:0;
        right:0;
        height:100px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:.7rem;
        z-index:8;
    }

    .hero-visual .hero-icon,
    .hero-visual .icon-1,
    .hero-visual .icon-2,
    .hero-visual .icon-3,
    .hero-visual .icon-4{
        position:static !important;
        width:74px;
        height:74px;
        font-size:1.8rem;
        transform:none !important;
        animation:none !important;
    }

    .hero-visual .hero-icon span{
        font-size:.55rem;
        bottom:8px;
    }
}

@media (max-width: 575.98px){
    .hero-visual{
        min-height:330px;
    }

    .hero-visual .hero-icons{
        gap:.45rem;
    }

    .hero-visual .hero-icon,
    .hero-visual .icon-1,
    .hero-visual .icon-2,
    .hero-visual .icon-3,
    .hero-visual .icon-4{
        width:64px;
        height:64px;
        font-size:1.45rem;
        border-radius:20px;
    }

    .hero-visual .glass-orb{
        top:92px;
        height:220px;
        padding:1rem;
    }
}