*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:
    linear-gradient(
    180deg,
    #07111f 0%,
    #0c1729 100%
    );

    min-height:200vh;
}

:root{

    --primary:#7c3aed;
    --primary-light:#8b5cf6;

    --dark:#07111f;
    --dark-light:#0d1728;

    --text:#ffffff;
    --text-light:#9ca3af;

    --border:rgba(255,255,255,.08);
}

a{
    text-decoration:none;
}

/* =================================
TOPBAR
================================= */

.topbar{

    padding:12px 0;

    border-bottom:
    1px solid rgba(255,255,255,.05);

    background:
    rgba(7,17,31,.75);

    backdrop-filter:blur(14px);
}

.topbar-left{

    color:#cbd5e1;

    font-size:14px;
}

.topbar-right{

    display:flex;

    align-items:center;

    gap:28px;
}

.topbar-right a{

    color:#cbd5e1;

    font-size:14px;

    transition:.3s;
}

.topbar-right a:hover{

    color:white;
}

/* =================================
NAVBAR
================================= */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

/* NAVBAR */

.voicex-navbar{
    background: rgba(4, 10, 30, 0.96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 16px 0;
    z-index: 9999;
}

.voicex-logo{
    font-size: 3rem;
    font-weight: 800;
    color: #fff !important;
}

.voicex-logo span{
    color: #7c4dff;
}

.navbar-nav{
    gap: 12px;
}

.nav-link{
    color: rgba(255,255,255,0.82) !important;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 16px !important;
    border-radius: 12px;
    transition: .3s;
}

.nav-link:hover{
    color: #8b5cf6 !important;
}

.nav-link.show{
    color: #8b5cf6 !important;
    background: rgba(139,92,246,0.08);
}

/* DROPDOWN */

.mega-menu{
    width: 96%;
    left: 2% !important;
    right: 2%;
    top: 90px !important;
    border-radius: 32px;
    background:
    linear-gradient(
    135deg,
    rgba(7,17,46,0.98),
    rgba(3,10,28,0.98)
    );
    padding: 30px;
    border: 1px solid rgba(139,92,246,0.12) !important;
    box-shadow: 0 20px 80px rgba(0,0,0,0.45);
}

.mega-scroll{
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.mega-scroll::-webkit-scrollbar{
    width: 6px;
}

.mega-scroll::-webkit-scrollbar-thumb{
    background: #7c4dff;
    border-radius: 30px;
}

.menu-heading{
    color: #8b5cf6;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 26px;
}

/* CATEGORY */

.menu-category-card{
    display: flex;
    gap: 18px;
    padding: 18px;
    border-radius: 20px;
    margin-bottom: 18px;
    transition: .3s;
    border: 1px solid rgba(255,255,255,0.05);
}

.active-menu-card,
.menu-category-card:hover{
    background: rgba(255,255,255,0.03);
    border-color: rgba(139,92,246,0.25);
}

.menu-icon{
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(139,92,246,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
    font-size: 20px;
    flex-shrink: 0;
}

.menu-category-card h5{
    color: #fff;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 700;
}

.menu-category-card p{
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin: 0;
}

/* LINKS */

.menu-links{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.menu-link-item{
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    padding: 14px;
    border-radius: 18px;
    transition: .3s;
}

.menu-link-item:hover{
    background: rgba(255,255,255,0.04);
}

.menu-link-item i{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(139,92,246,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
}

.menu-link-item span{
    display: block;
    color: #fff;
    font-weight: 600;
}

.menu-link-item small{
    color: rgba(255,255,255,0.6);
}

/* SIMPLE LINKS */

.simple-links{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.simple-links a{
    color: rgba(255,255,255,0.86);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: .3s;
}

.simple-links a:hover{
    color: #8b5cf6;
    transform: translateX(5px);
}

.dropdown-menu[data-bs-popper]{

    margin-top: 33px;
}

/* SIDE CARD */

.mega-side-card{
    height: 100%;
    border-radius: 28px;
    padding: 40px;
    background:
    linear-gradient(
    180deg,
    rgba(124,77,255,0.18),
    rgba(124,77,255,0.06)
    );
    border: 1px solid rgba(139,92,246,0.18);
}

.mini-badge{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 40px;
    background: rgba(139,92,246,0.12);
    color: #a78bfa;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.mega-side-card h3{
    color: #fff;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 22px;
}

.mega-side-card p{
    color: rgba(255,255,255,0.68);
    line-height: 1.8;
    margin-bottom: 30px;
}

.side-btn{
    display: inline-flex;
    padding: 14px 24px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg,#7c4dff,#8b5cf6);
    font-weight: 600;
}

/* ACTIONS */

.navbar-actions{
    display: inline-grid;
  
    gap: 14px;
}

.contact-link,
.login-link{
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-weight: 500;
}

.demo-btn{
    padding: 14px 26px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.trial-btn,
.mobile-trial-btn{
    padding: 14px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg,#7c4dff,#8b5cf6);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border: none;
}

/* MOBILE */

.navbar-toggler{
    color: #fff;
    font-size: 24px;
}

@media(max-width:1199px){

    .navbar-collapse{
        background: #07112a;
        margin-top: 20px;
        border-radius: 24px;
        padding: 24px;
        max-height: 85vh;
        overflow-y: auto;
    }

    .mega-menu{
        position: static !important;
        width: 100%;
        margin-top: 18px;
        border-radius: 24px;
        padding: 20px;
    }

    .mega-scroll{
        max-height: unset;
        overflow: visible;
    }

    .navbar-actions{
        flex-direction: column;
        align-items: stretch;
        margin-top: 24px;
    }

    .mega-side-card h3{
        font-size: 34px;
    }

    .nav-link{
        padding: 16px !important;
    }

    .voicex-logo{
        font-size: 2.4rem;
    }
}

@media(max-width:768px){

    .mega-side-card{
        padding: 28px;
    }

    .mega-side-card h3{
        font-size: 28px;
    }

    .menu-category-card{
        flex-direction: column;
    }

    .trial-btn,
    .demo-btn{
        width: 100%;
        text-align: center;
    }
}


/* NAVBAR */

.custom-navbar{
    background:#050816;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    z-index:9999;
}

.navbar-brand img{
    height:34px;
}

.navbar-nav{
    gap:25px;
}

.nav-link{
    color:#fff;
    font-size:15px;
    font-weight:500;
}

.nav-link:hover{
    color:#8b5cf6;
}

/* MEGA MENU */

.mega-dropdown{
    position:static;
}

.mega-menu{
    position:absolute;
    left:50%;

    top:100%;

    width:95%;
    max-width:1200px;

    background:#0b1120;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:30px;

    display:none;

    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

/* IMPORTANT */

.mega-scroll{
    max-height:75vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:10px;
}

/* SCROLLBAR */

.mega-scroll::-webkit-scrollbar{
    width:6px;
}

.mega-scroll::-webkit-scrollbar-thumb{
    background:#6d28d9;
    border-radius:20px;
}

.mega-dropdown.active .mega-menu{
    display:block;
}

/* MENU BOX */

.menu-box{
    background:#101827;
    padding:24px;
    border-radius:18px;
    height:100%;
}

.menu-box h6{
    color:#fff;
    font-size:18px;
    margin-bottom:15px;
}

.menu-box p{
    color:#94a3b8;
    font-size:14px;
    line-height:1.7;
}

.menu-box ul{
    padding:0;
    margin:20px 0 0;
    list-style:none;
}

.menu-box ul li{
    color:#e2e8f0;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

/* SOLUTION LINKS */

.solution-links{
    list-style:none;
    padding:0;
}

.solution-links li{
    padding:14px 0;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

/* BUTTONS */

.nav-buttons{
    display:flex;
    gap:12px;
}

.btn-primary{
    background:#7c3aed;
    border:none;
}

.btn-primary:hover{
    background:#6d28d9;
}

/* MOBILE */

@media(max-width:991px){

    .navbar-collapse{

        background:#081120;

        margin-top:20px;

        padding:20px;

        border-radius:20px;

        max-height:85vh;

        overflow-y:auto;
    }

    .navbar-nav{
        gap:0;
    }

    .mega-menu{

        position:relative;

        top:0;
        left:0;

        transform:none;

        width:100%;

        margin-top:15px;

        padding:20px;
    }

    .mega-scroll{
        max-height:400px;
    }

    .nav-buttons{
        flex-direction:column;
        margin-top:20px;
    }

    .nav-buttons .btn{
        width:100%;
    }

}



.hero-section{

position:relative;

padding:
120px 0 90px;

overflow:hidden;
}

/* BACKGROUND GLOW */

.hero-section::before{

content:"";

position:absolute;

width:700px;
height:700px;

background:
radial-gradient(
circle,
rgba(124,58,237,.25),
transparent 70%
);

top:-250px;
right:-150px;

z-index:0;
}

.hero-section::after{

content:"";

position:absolute;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(139,92,246,.12),
transparent 70%
);

bottom:-180px;
left:-100px;

z-index:0;
}

.hero-content{

position:relative;

z-index:2;
}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.12);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:14px;

font-weight:600;

margin-bottom:28px;
}

.hero-title{

font-size:68px;
color: #fff;
font-weight:800;

line-height:1.08;

margin-bottom:28px;

letter-spacing:-2px;
}

.gradient-text{

background:
linear-gradient(
90deg,
#ffffff,
#a78bfa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.highlight{

color:#8b5cf6;
}

.hero-description{

font-size:18px;

color:var(--text-light);

line-height:1.9;

max-width:620px;

margin-bottom:38px;
}

/* CTA BUTTONS */

.hero-buttons{

display:flex;

align-items:center;

gap:18px;

margin-bottom:50px;

flex-wrap:wrap;
}

.btn-primary-custom{

padding:16px 34px;

border-radius:16px;

background:
linear-gradient(
135deg,
#7c3aed,
#8b5cf6
);

color:white;

font-weight:600;

transition:.35s;

border:none;

box-shadow:
0 15px 35px rgba(124,58,237,.35);
}

.btn-primary-custom:hover{

transform:translateY(-4px);

color:white;

box-shadow:
0 22px 45px rgba(124,58,237,.45);
}

.btn-secondary-custom{

padding:16px 34px;

border-radius:16px;

border:
1px solid rgba(255,255,255,.12);

color:white;

font-weight:600;

transition:.35s;

background:
rgba(255,255,255,.03);

backdrop-filter:blur(10px);
}

.btn-secondary-custom:hover{

background:
rgba(255,255,255,.08);

color:white;

transform:translateY(-3px);
}

/* FEATURES */

.hero-features{

display:flex;

flex-wrap:wrap;

gap:18px;
}

.feature-item{

display:flex;

align-items:center;

gap:12px;

padding:14px 18px;

border-radius:16px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(10px);
}

.feature-icon{

width:42px;
height:42px;

border-radius:12px;

background:
rgba(124,58,237,.15);

display:flex;

align-items:center;
justify-content:center;

color:#8b5cf6;

font-size:16px;
}

.feature-text{

font-size:14px;

color:#dbe4f0;

font-weight:500;
}

/* RIGHT SIDE */

.hero-visual{

position:relative;

z-index:2;
}

.dashboard-card{

position:relative;

border-radius:32px;

padding:30px;

background:
linear-gradient(
180deg,
rgba(16,29,51,.92),
rgba(7,17,31,.92)
);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

box-shadow:
0 35px 90px rgba(0,0,0,.45);
}

.dashboard-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;
}

.dashboard-logo{

font-size:28px;
color: #fff;
font-weight:800;
}

.dashboard-logo span{

color:#8b5cf6;
}

.status-badge{

padding:10px 16px;

border-radius:50px;

background:
rgba(16,185,129,.12);

color:#34d399;

font-size:13px;

font-weight:600;

border:
1px solid rgba(16,185,129,.22);
}

/* PLATFORM GRID */

.platform-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:18px;

margin-bottom:30px;
}

.platform-card{

padding:24px;

border-radius:22px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

transition:.35s;
}

.platform-card:hover{

transform:translateY(-6px);

border-color:
rgba(124,58,237,.35);

background:
rgba(124,58,237,.08);
}

.platform-icon{

width:58px;
height:58px;

border-radius:18px;

background:
rgba(124,58,237,.15);

display:flex;

align-items:center;
justify-content:center;

color:#8b5cf6;

font-size:22px;

margin-bottom:18px;
}

.platform-card h5{

font-size:18px;
color: #fff;
font-weight:700;

margin-bottom:10px;
}

.platform-card p{

color:#94a3b8;

font-size:14px;

line-height:1.7;

margin:0;
}

/* STATS */

.hero-stats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:18px;
}

.stat-card{

padding:20px;

border-radius:20px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

text-align:center;
}

.stat-card h4{

font-size:28px;

font-weight:800;

color:#8b5cf6;

margin-bottom:8px;
}

.stat-card p{

color:#94a3b8;

font-size:14px;

margin:0;
}

/* FLOATING GLOW */

.floating-glow{

position:absolute;

width:240px;
height:240px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(124,58,237,.25),
transparent 70%
);

top:-80px;
right:-60px;

z-index:-1;
}

/* RESPONSIVE */

@media(max-width:1200px){

.hero-title{

font-size:56px;
}

}

@media(max-width:991px){

.hero-section{

padding:
90px 0 70px;
}

.hero-content{

text-align:center;

margin-bottom:60px;
}

.hero-description{

margin:auto auto 38px;
}

.hero-buttons{

justify-content:center;
}

.hero-features{

justify-content:center;
}

.hero-title{

font-size:48px;
}

}

@media(max-width:767px){

.hero-title{

font-size:38px;

line-height:1.2;
}

.hero-description{

font-size:16px;
}

.platform-grid{

grid-template-columns:1fr;
}

.hero-stats{

grid-template-columns:1fr;
}

.dashboard-card{

padding:22px;
}

.hero-buttons{

flex-direction:column;
}

.btn-primary-custom,
.btn-secondary-custom{

width:100%;

text-align:center;
}

}


.partners-section{

position:relative;

padding:100px 0 0;

background:
linear-gradient(
180deg,
#07111f 0%,
#0c1629 100%
);

overflow:hidden;
}

.partners-glow{

position:absolute;

width:600px;
height:600px;

background:
radial-gradient(
circle,
rgba(124,58,237,.15),
transparent 70%
);

top:-250px;
right:-200px;
}

/* =====================================
HEADING
===================================== */

.partners-heading{

margin-bottom:60px;

position:relative;

z-index:2;
}

.partners-badge{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

color:#c4b5fd;

font-size:13px;

font-weight:600;

letter-spacing:1px;

margin-bottom:24px;
}

.partners-heading h2{

color:#fff;

font-size:52px;

font-weight:800;

margin-bottom:20px;
}

.partners-heading h2 span{

color:#8b5cf6;
}

.partners-heading p{

color:#94a3b8;

font-size:18px;

line-height:1.8;

max-width:720px;

margin:auto;
}

/* =====================================
MARQUEE
===================================== */

.partners-marquee{

position:relative;

width:100%;

overflow:hidden;

padding:30px 0 60px;

border-top:
1px solid rgba(255,255,255,.05);

border-bottom:
1px solid rgba(255,255,255,.05);

background:
rgba(255,255,255,.02);

backdrop-filter:blur(12px);
}

.partners-track{

display:flex;

align-items:center;

width:max-content;

animation:marquee 28s linear infinite;
}

.partners-marquee:hover .partners-track{

animation-play-state:paused;
}

/* =====================================
LOGO ITEM
===================================== */

.partner-logo{

min-width:260px;

height:120px;

margin:0 18px;

border-radius:26px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

display:flex;

align-items:center;

justify-content:center;

gap:18px;

transition:.35s ease;
}

.partner-logo:hover{

transform:translateY(-6px);

border-color:
rgba(124,58,237,.30);

background:
rgba(124,58,237,.08);
}

.partner-logo img{

width:42px;

height:42px;

object-fit:contain;

filter:grayscale(1);

opacity:.9;
}

.partner-logo span{

color:#f8fafc;

font-size:24px;

font-weight:700;

letter-spacing:-0.5px;
}

/* =====================================
PURPLE BOTTOM LINE
===================================== */

.partners-bottom-line{

width:100%;

height:8px;

background:
linear-gradient(
90deg,
#7c3aed,
#8b5cf6,
#7c3aed
);

box-shadow:
0 0 30px rgba(124,58,237,.6);
}

/* =====================================
MARQUEE ANIMATION
===================================== */

@keyframes marquee{

from{

transform:translateX(0);
}

to{

transform:translateX(-50%);
}

}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.partners-section{

padding:80px 0 0;
}

.partners-heading h2{

font-size:40px;
}

}

@media(max-width:767px){

.partners-heading h2{

font-size:32px;
}

.partners-heading p{

font-size:16px;
}

.partner-logo{

min-width:220px;

height:100px;
}

.partner-logo span{

font-size:20px;
}

}


.why-voicex-section{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#08111f 0%,
#101827 100%
);

overflow:hidden;
}

.why-glow{

position:absolute;

width:700px;
height:700px;

background:
radial-gradient(
circle,
rgba(124,58,237,.12),
transparent 70%
);

top:-250px;
right:-200px;
}

.section-header{

margin-bottom:80px;
}

.section-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.12);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:13px;

font-weight:600;

letter-spacing:1px;

margin-bottom:24px;
}

.section-header h2{

color:#fff;

font-size:54px;

font-weight:800;

line-height:1.2;

margin-bottom:24px;
}

.section-header h2 span{

color:#8b5cf6;
}

.section-header p{

max-width:780px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.8;
}

/* =====================================
COMPARISON
===================================== */

.comparison-wrapper{

margin-bottom:120px;
}

.comparison-card{

height:100%;

padding:40px;

border-radius:32px;

position:relative;

overflow:hidden;

backdrop-filter:blur(16px);

transition:.35s ease;
}

.comparison-card:hover{

transform:translateY(-8px);
}

.traditional-card{

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);
}

.voicex-card{

background:
linear-gradient(
135deg,
rgba(124,58,237,.12),
rgba(255,255,255,.03)
);

border:
1px solid rgba(124,58,237,.25);

box-shadow:
0 20px 60px rgba(124,58,237,.18);
}

.comparison-top{

display:flex;

gap:18px;

align-items:center;

margin-bottom:40px;
}

.comparison-icon{

width:70px;
height:70px;

border-radius:20px;

display:flex;

align-items:center;
justify-content:center;

font-size:24px;
}

.comparison-icon.red{

background:
rgba(239,68,68,.12);

color:#f87171;
}

.comparison-icon.purple{

background:
rgba(124,58,237,.15);

color:#8b5cf6;
}

.comparison-top h3{

color:#fff;

font-size:30px;

font-weight:700;

margin-bottom:6px;
}

.comparison-top p{

color:#94a3b8;

margin:0;
}

.comparison-list{

display:flex;

flex-direction:column;

gap:18px;
}

.comparison-item{

display:flex;

align-items:center;

gap:14px;

padding:16px 18px;

border-radius:18px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.04);

color:#e2e8f0;

font-size:16px;

font-weight:500;
}

.comparison-item i{

width:34px;
height:34px;

border-radius:10px;

display:flex;

align-items:center;
justify-content:center;

font-size:14px;
}

.comparison-item i.fa-xmark{

background:
rgba(239,68,68,.12);

color:#f87171;
}

.comparison-item.success i{

background:
rgba(34,197,94,.12);

color:#4ade80;
}

.comparison-footer{

margin-top:32px;

color:#94a3b8;

font-size:18px;

font-weight:600;
}

.success-text{

color:#8b5cf6;
}

/* =====================================
INFRASTRUCTURE
===================================== */

.mini-badge{

display:inline-block;

color:#8b5cf6;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;
}

.infrastructure-content h2{

color:#fff;

font-size:52px;

font-weight:800;

line-height:1.2;

margin-bottom:24px;
}

.infrastructure-content h2 span{

color:#8b5cf6;
}

.infrastructure-content p{

color:#94a3b8;

font-size:18px;

line-height:1.9;

margin-bottom:36px;
}

.infra-features{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:18px;
}

.infra-feature{

display:flex;

align-items:center;

gap:14px;

padding:18px;

border-radius:18px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);

color:#e2e8f0;

font-weight:500;
}

.infra-feature i{

color:#8b5cf6;
}

/* =====================================
ARCHITECTURE VISUAL
===================================== */

.architecture-card{

position:relative;

height:650px;

border-radius:40px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(124,58,237,.06)
);

border:
1px solid rgba(255,255,255,.06);

overflow:hidden;
}

.core-platform{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:260px;
height:260px;

border-radius:40px;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

display:flex;

align-items:center;
justify-content:center;

box-shadow:
0 25px 80px rgba(124,58,237,.45);
}

.core-inner{

text-align:center;
}

.core-inner h3{

color:#fff;

font-size:42px;

font-weight:800;

margin-bottom:12px;
}

.core-inner p{

color:#e9d5ff;

margin:0;
}

.client-node{

position:absolute;

width:170px;

padding:20px;

border-radius:22px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.08);

text-align:center;

backdrop-filter:blur(10px);
}

.client-node i{

color:#8b5cf6;

font-size:24px;

margin-bottom:12px;
}

.client-node span{

color:#fff;

font-weight:600;
}

.top-left{

top:80px;
left:60px;
}

.top-right{

top:80px;
right:60px;
}

.bottom-left{

bottom:80px;
left:60px;
}

.bottom-right{

bottom:80px;
right:60px;
}

/* LINES */

.line{

position:absolute;

background:
linear-gradient(
90deg,
#7c3aed,
transparent
);

height:2px;
}

.line-1{

width:180px;

top:180px;
left:210px;

transform:rotate(25deg);
}

.line-2{

width:180px;

top:180px;
right:210px;

transform:rotate(-25deg);
}

.line-3{

width:180px;

bottom:180px;
left:210px;

transform:rotate(-25deg);
}

.line-4{

width:180px;

bottom:180px;
right:210px;

transform:rotate(25deg);
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.section-header h2,
.infrastructure-content h2{

font-size:40px;
}

.comparison-wrapper{

margin-bottom:80px;
}

.architecture-card{

height:600px;
}

}

@media(max-width:767px){

.why-voicex-section{

padding:90px 0;
}

.section-header h2,
.infrastructure-content h2{

font-size:32px;
}

.section-header p,
.infrastructure-content p{

font-size:16px;
}

.comparison-card{

padding:28px;
}

.infra-features{

grid-template-columns:1fr;
}

.architecture-card{

height:520px;
}

.core-platform{

width:180px;
height:180px;
}

.core-inner h3{

font-size:30px;
}

.client-node{

width:120px;

padding:14px;
}

.client-node span{

font-size:13px;
}

.top-left{

top:40px;
left:20px;
}

.top-right{

top:40px;
right:20px;
}

.bottom-left{

bottom:40px;
left:20px;
}

.bottom-right{

bottom:40px;
right:20px;
}

.line{

display:none;
}

}



.how-it-works-section{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#08111f 0%,
#111827 100%
);

overflow:hidden;
}

.workflow-glow{

position:absolute;

width:700px;
height:700px;

background:
radial-gradient(
circle,
rgba(124,58,237,.14),
transparent 70%
);

top:-250px;
left:-250px;
}

.section-header{

margin-bottom:90px;
}

.section-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.12);

border:
1px solid rgba(124,58,237,.2);

color:#c4b5fd;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:24px;
}

.section-header h2{

color:#fff;

font-size:54px;

font-weight:800;

line-height:1.2;

margin-bottom:24px;
}

.section-header h2 span{

color:#8b5cf6;
}

.section-header p{

max-width:760px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.9;
}

/* =====================================
WORKFLOW
===================================== */

.workflow-wrapper{

position:relative;
}

.workflow-line{

position:absolute;

top:120px;
left:10%;

width:80%;
height:2px;

background:
linear-gradient(
90deg,
rgba(124,58,237,.1),
rgba(124,58,237,.7),
rgba(124,58,237,.1)
);

z-index:0;
}

.workflow-card{

position:relative;

z-index:2;

height:100%;

padding:40px 30px;

border-radius:32px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(12px);

transition:.35s ease;

overflow:hidden;
}

.workflow-card:hover{

transform:translateY(-10px);

border-color:
rgba(124,58,237,.4);

box-shadow:
0 20px 60px rgba(124,58,237,.15);
}

.active-card,
.launch-card{

background:
linear-gradient(
180deg,
rgba(124,58,237,.12),
rgba(255,255,255,.03)
);

border:
1px solid rgba(124,58,237,.28);
}


.workflow-icon{

width:80px;
height:80px;

border-radius:24px;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(124,58,237,.2),
rgba(79,70,229,.2)
);

border:
1px solid rgba(124,58,237,.3);

margin-bottom:30px;
}

.workflow-icon i{

font-size:30px;

color:#8b5cf6;
}

.workflow-card h3{

color:#fff;

font-size:28px;

font-weight:700;

margin-bottom:18px;
}

.workflow-card p{

color:#94a3b8;

font-size:16px;

line-height:1.8;

margin-bottom:28px;
}

.workflow-points{

display:flex;

flex-direction:column;

gap:14px;
}

.point{

display:flex;

align-items:center;

gap:12px;

color:#e2e8f0;

font-size:15px;

font-weight:500;

padding:12px 16px;

border-radius:14px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.04);
}

.point i{

color:#8b5cf6;

font-size:13px;
}

/* =====================================
USER FEELING
===================================== */

.user-feeling-box{

margin-top:90px;

padding:60px 40px;

border-radius:32px;

background:
linear-gradient(
135deg,
rgba(124,58,237,.12),
rgba(255,255,255,.03)
);

border:
1px solid rgba(124,58,237,.2);

backdrop-filter:blur(10px);
}

.feeling-icon{

width:90px;
height:90px;

margin:auto auto 30px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

background:
rgba(124,58,237,.15);

border:
1px solid rgba(124,58,237,.3);
}

.feeling-icon i{

color:#8b5cf6;

font-size:36px;
}

.user-feeling-box h3{

color:#fff;

font-size:40px;

font-weight:800;

margin-bottom:18px;
}

.user-feeling-box p{

max-width:700px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.8;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.workflow-line{

display:none;
}

.section-header h2{

font-size:42px;
}

}

@media(max-width:767px){

.how-it-works-section{

padding:90px 0;
}

.section-header{

margin-bottom:60px;
}

.section-header h2{

font-size:32px;
}

.section-header p{

font-size:16px;
}

.workflow-card{

padding:32px 24px;
}

.workflow-card h3{

font-size:24px;
}

.workflow-icon{

width:70px;
height:70px;
}

.workflow-icon i{

font-size:24px;
}

.user-feeling-box{

padding:40px 24px;
}

.user-feeling-box h3{

font-size:28px;
}

.user-feeling-box p{

font-size:16px;
}

}


.ai-automation-section{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#07111d 0%,
#0f172a 100%
);

overflow:hidden;
}

.ai-glow{

position:absolute;

border-radius:50%;

filter:blur(80px);
}

.ai-glow-1{

width:500px;
height:500px;

background:
rgba(124,58,237,.18);

top:-200px;
left:-150px;
}

.ai-glow-2{

width:450px;
height:450px;

background:
rgba(79,70,229,.15);

bottom:-200px;
right:-150px;
}


/* -------------------------AI & AUTOMATION NEW----------------------------------------- */

/* =========================================
   AI OUTCOMES SECTION
========================================= */


/* benefits */

.section-description{
    color: #dbe4ff;
}

.benefits-list{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.benefit-item{
    display: flex;
    align-items: center;
    gap: 14px;
    color: #dbe4ff;
    font-size: 16px;
}

.benefit-item i{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(108,59,255,0.15);
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* -------------------------CLOSED AI & AUTOMATION NEW----------------------------------------- */


/* -------------------------------BUILT FOR BUSINESS GROWTH---------------------------------------- */

/* =========================================
   BUSINESS GROWTH SECTION V2
========================================= */

.growth-business-section{
    padding: 120px 0;
    background: #060816;
    position: relative;
    overflow: hidden;
}

/* section header */

.section-header{
    max-width: 820px;
    margin: auto;
    margin-bottom: 80px;
}

.section-badge{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(108,59,255,0.10);
    border: 1px solid rgba(139,92,246,0.18);
    color: #a78bfa;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.section-title{
    font-size: 58px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
}

.section-description{
    font-size: 18px;
    line-height: 1.8;
    color: #94a3b8;
}

/* left cards */

.growth-steps-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.growth-step-card{
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
    transition: 0.3s ease;
}

.growth-step-card:hover{
    border-color: rgba(139,92,246,0.22);
    transform: translateY(-4px);
}

.active-card{
    border-color: rgba(139,92,246,0.30);
    background: linear-gradient(
        180deg,
        rgba(108,59,255,0.10),
        rgba(13,19,36,0.95)
    );
}


/* content */

.step-content h4{
    color: #fff;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 700;
}

.step-content p{
    color: #94a3b8;
    line-height: 1.8;
    margin: 0;
}

/* right panel */

.business-panel{
    padding: 40px;
    border-radius: 32px;
    background: rgba(13,19,36,0.95);
    border: 1px solid rgba(255,255,255,0.06);
    height: 100%;
}

/* top */

.panel-badge{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(108,59,255,0.10);
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
}

.business-top h3{
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 20px;
}

.business-top p{
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* feature grid */

.feature-grid{
   
    grid-template-columns: repeat(2,1fr);
  
    margin-bottom: 35px;
}

.feature-box{
    padding: 22px;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 14px;
}

.feature-box i{
    font-size: 22px;
    color: #8b5cf6;
}

.feature-box span{
    color: #dbe4ff;
    font-size: 15px;
    font-weight: 500;
}

/* bottom card */

.bottom-growth-card{
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(108,59,255,0.14),
        rgba(59,130,246,0.08)
    );
    border: 1px solid rgba(139,92,246,0.16);
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.growth-icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.growth-icon i{
    color: #8b5cf6;
    font-size: 24px;
}

.bottom-growth-card h5{
    color: #fff;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
}

.bottom-growth-card p{
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}

/* responsive */

@media(max-width:991px){

    .section-title{
        font-size: 42px;
    }

    .business-top h3{
        font-size: 34px;
    }

}

@media(max-width:576px){

    .growth-business-section{
        padding: 90px 0;
    }

    .section-title{
        font-size: 34px;
    }

    .section-description{
        font-size: 16px;
    }

    .growth-step-card{
        flex-direction: column;
    }

    .business-panel{
        padding: 28px;
    }

    .feature-grid{
        grid-template-columns: 1fr;
    }

    .business-top h3{
        font-size: 28px;
    }

}

/* -------------------------------BUILT FOR BUSINESS GROWTH---------------------------------------- */

/* --------------------------------REVENUE GROWTH SECTION----------------------------------------- */

/* =========================================
   REVENUE GROWTH SECTION
========================================= */

/* =========================================
   BUSINESS REVENUE SECTION
========================================= */

.business-revenue-section{
    padding: 120px 0;
    background: #060816;
    position: relative;
    overflow: hidden;
}

/* background glow */

.business-revenue-section::before{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(108,59,255,0.08);
    filter: blur(140px);
    top: -200px;
    left: -150px;
    border-radius: 50%;
}

.business-revenue-section::after{
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(59,130,246,0.06);
    filter: blur(120px);
    bottom: -200px;
    right: -100px;
    border-radius: 50%;
}

/* content */

.revenue-content{
    position: relative;
    z-index: 2;
}

.section-badge{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(108,59,255,0.10);
    border: 1px solid rgba(139,92,246,0.18);
    color: #a78bfa;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.section-title{
    font-size: 58px;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 24px;
}

.section-description{
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* points */

.growth-points{
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 42px;
}

.growth-point{
    display: flex;
    align-items: center;
    gap: 14px;
    color: #dbe4ff;
    font-size: 16px;
}

.growth-point i{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(108,59,255,0.12);
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* buttons */

.section-buttons{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.primary-btn{
    padding: 15px 28px;
    border-radius: 14px;
    background: linear-gradient(to right,#8b5cf6,#6d28d9);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.secondary-btn{
    padding: 15px 28px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

/* right box */

.revenue-flow-box{
    position: relative;
    z-index: 2;
    padding: 45px;
    border-radius: 32px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
}

/* top */

.flow-mini-badge{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(108,59,255,0.10);
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
}

.flow-top h3{
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 40px;
}

/* flow items */

.flow-steps{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flow-item{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s ease;
}

.flow-item:hover{
    border-color: rgba(139,92,246,0.18);
    transform: translateX(5px);
}

.active-flow-item{
    background: linear-gradient(
        135deg,
        rgba(108,59,255,0.12),
        rgba(59,130,246,0.06)
    );

    border-color: rgba(139,92,246,0.20);
}

/* icon */

.flow-icon{
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(108,59,255,0.10);
    border: 1px solid rgba(139,92,246,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flow-icon i{
    font-size: 24px;
    color: #8b5cf6;
}

/* text */

.flow-text h5{
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.flow-text p{
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}

/* responsive */

@media(max-width:991px){

    .section-title{
        font-size: 44px;
    }

    .flow-top h3{
        font-size: 30px;
    }

}

@media(max-width:576px){

    .business-revenue-section{
        padding: 90px 0;
    }

    .section-title{
        font-size: 34px;
    }

    .section-description{
        font-size: 16px;
    }

    .revenue-flow-box{
        padding: 28px;
    }

    .flow-item{
        flex-direction: column;
    }

}

/* --------------------------------REVENUE GROWTH SECTION----------------------------------------- */


/* =====================================
HEADER
===================================== */

.section-header{

margin-bottom:90px;
}

.section-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.12);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:24px;
}

.section-header h2{

color:#fff;

font-size:56px;

font-weight:800;

line-height:1.2;

margin-bottom:24px;
}

.section-header h2 span{

color:#8b5cf6;
}

.section-header p{

max-width:820px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.9;
}

/* =====================================
FEATURE CARDS
===================================== */

.ai-content-wrapper{

display:flex;

flex-direction:column;

gap:24px;
}

.ai-feature-card{

display:flex;

gap:24px;

padding:28px;

border-radius:28px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(12px);

transition:.35s ease;
}

.ai-feature-card:hover{

transform:translateY(-6px);

border-color:
rgba(124,58,237,.35);

box-shadow:
0 20px 60px rgba(124,58,237,.12);
}

.ai-icon{

min-width:78px;
height:78px;

border-radius:24px;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(124,58,237,.18),
rgba(79,70,229,.15)
);

border:
1px solid rgba(124,58,237,.25);
}

.ai-icon i{

color:#8b5cf6;

font-size:28px;
}

.ai-feature-content h3{

color:#fff;

font-size:26px;

font-weight:700;

margin-bottom:12px;
}

.ai-feature-content p{

color:#94a3b8;

font-size:16px;

line-height:1.8;

margin:0;
}

/* =====================================
VISUAL SIDE
===================================== */

.ai-visual-wrapper{

position:relative;

height:650px;

border-radius:40px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(124,58,237,.06)
);

border:
1px solid rgba(255,255,255,.06);

overflow:hidden;
}

/* CORE */

.ai-core{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:290px;
height:290px;

border-radius:40px;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

display:flex;

align-items:center;
justify-content:center;

box-shadow:
0 30px 100px rgba(124,58,237,.45);
}

.ai-core-inner{

text-align:center;

padding:20px;
}

.core-badge{

display:inline-block;

padding:8px 14px;

border-radius:50px;

background:
rgba(255,255,255,.12);

border:
1px solid rgba(255,255,255,.18);

color:#fff;

font-size:11px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;
}

.ai-core-inner h3{

color:#fff;

font-size:38px;

font-weight:800;

margin-bottom:14px;
}

.ai-core-inner p{

color:#ede9fe;

line-height:1.7;

margin:0;
}

/* FLOATING CARDS */

.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:12px;

padding:16px 22px;

border-radius:18px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(12px);

color:#fff;

font-weight:600;
}

.floating-card i{

color:#8b5cf6;
}

.card-1{

top:90px;
left:40px;
}

.card-2{

top:90px;
right:40px;
}

.card-3{

bottom:90px;
left:40px;
}

.card-4{

bottom:90px;
right:40px;
}

/* LINES */

.ai-line{

position:absolute;

height:2px;

background:
linear-gradient(
90deg,
rgba(124,58,237,.8),
transparent
);
}

.line-1{

width:160px;

top:180px;
left:180px;

transform:rotate(25deg);
}

.line-2{

width:160px;

top:180px;
right:180px;

transform:rotate(-25deg);
}

.line-3{

width:160px;

bottom:180px;
left:180px;

transform:rotate(-25deg);
}

.line-4{

width:160px;

bottom:180px;
right:180px;

transform:rotate(25deg);
}

/* =====================================
USER FEELING
===================================== */

.user-feeling-box{

margin-top:100px;

padding:60px 40px;

border-radius:36px;

background:
linear-gradient(
135deg,
rgba(124,58,237,.10),
rgba(255,255,255,.03)
);

border:
1px solid rgba(124,58,237,.18);

backdrop-filter:blur(12px);
}

.feeling-icon{

width:90px;
height:90px;

margin:auto auto 30px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

background:
rgba(124,58,237,.12);

border:
1px solid rgba(124,58,237,.25);
}

.feeling-icon i{

font-size:34px;

color:#8b5cf6;
}

.user-feeling-box h3{

color:#fff;

font-size:40px;

font-weight:800;

line-height:1.4;

margin-bottom:20px;
}

.user-feeling-box p{

max-width:760px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.9;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.section-header h2{

font-size:42px;
}

.ai-visual-wrapper{

height:560px;
}

.ai-line{

display:none;
}

}

@media(max-width:767px){

.ai-automation-section{

padding:90px 0;
}

.section-header{

margin-bottom:60px;
}

.section-header h2{

font-size:32px;
}

.section-header p{

font-size:16px;
}

.ai-feature-card{

flex-direction:column;
}

.ai-feature-content h3{

font-size:22px;
}

.ai-visual-wrapper{

height:500px;
}

.ai-core{

width:210px;
height:210px;
}

.ai-core-inner h3{

font-size:28px;
}

.floating-card{

padding:12px 16px;

font-size:13px;
}

.card-1{

top:40px;
left:15px;
}

.card-2{

top:40px;
right:15px;
}

.card-3{

bottom:40px;
left:15px;
}

.card-4{

bottom:40px;
right:15px;
}

.user-feeling-box{

padding:40px 24px;
}

.user-feeling-box h3{

font-size:28px;
}

.user-feeling-box p{

font-size:16px;
}

}



.integration-strip{

position:relative;

padding:90px 0;

background:
linear-gradient(
180deg,
#08111f 0%,
#0f172a 100%
);

overflow:hidden;
}

/* GLOW */

.integration-glow{

position:absolute;

border-radius:50%;

filter:blur(90px);
}

.integration-glow-1{

width:300px;
height:300px;

background:
rgba(124,58,237,.12);

top:-100px;
left:-100px;
}

.integration-glow-2{

width:300px;
height:300px;

background:
rgba(99,102,241,.10);

bottom:-100px;
right:-100px;
}

/* =====================================
WRAPPER
===================================== */

.integration-wrapper{

position:relative;

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

padding:55px;

border-radius:32px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(16px);

overflow:hidden;
}

.integration-wrapper::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(124,58,237,.08),
transparent
);

pointer-events:none;
}

/* =====================================
CONTENT
===================================== */

.integration-content{

max-width:460px;

position:relative;

z-index:2;
}

.integration-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.10);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:22px;
}

.integration-content h2{

color:#fff;

font-size:48px;

font-weight:800;

line-height:1.2;

margin-bottom:22px;
}

.integration-content h2 span{

color:#8b5cf6;
}

.integration-content p{

color:#94a3b8;

font-size:17px;

line-height:1.9;

margin:0;
}

/* =====================================
LOGOS
===================================== */

.integration-logos{

position:relative;

z-index:2;

display:grid;

grid-template-columns:
repeat(3, 1fr);

gap:22px;

min-width:520px;
}

.logo-card{

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

gap:14px;

height:140px;

border-radius:24px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

transition:.35s ease;
}

.logo-card:hover{

transform:translateY(-6px);

border-color:
rgba(124,58,237,.25);

background:
rgba(124,58,237,.06);

box-shadow:
0 20px 50px rgba(124,58,237,.10);
}

.logo-card i{

font-size:34px;

color:#d1d5db;

transition:.3s ease;
}

.logo-card span{

color:#e5e7eb;

font-size:15px;

font-weight:600;
}

.logo-card:hover i{

color:#8b5cf6;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.integration-wrapper{

flex-direction:column;

align-items:flex-start;
}

.integration-content{

max-width:100%;
}

.integration-content h2{

font-size:40px;
}

.integration-logos{

min-width:100%;

width:100%;
}

}

@media(max-width:767px){

.integration-strip{

padding:70px 0;
}

.integration-wrapper{

padding:35px 24px;
}

.integration-content h2{

font-size:30px;
}

.integration-content p{

font-size:15px;
}

.integration-logos{

grid-template-columns:
repeat(2,1fr);

gap:16px;
}

.logo-card{

height:120px;
}

.logo-card i{

font-size:28px;
}

}

@media(max-width:480px){

.integration-logos{

grid-template-columns:1fr;
}

}

.trust-section{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#08111f 0%,
#0f172a 100%
);

overflow:hidden;
}

/* GLOW */

.trust-glow{

position:absolute;

border-radius:50%;

filter:blur(100px);
}

.trust-glow-1{

width:350px;
height:350px;

background:
rgba(124,58,237,.12);

top:-100px;
left:-100px;
}

.trust-glow-2{

width:350px;
height:350px;

background:
rgba(99,102,241,.10);

bottom:-100px;
right:-100px;
}

/* =====================================
HEADER
===================================== */

.trust-header{

margin-bottom:70px;
}

.trust-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.10);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:24px;
}

.trust-header h2{

color:#fff;

font-size:56px;

font-weight:800;

margin-bottom:20px;
}

.trust-header h2 span{

color:#8b5cf6;
}

.trust-header p{

max-width:760px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.9;
}

/* =====================================
METRICS
===================================== */

.trust-metrics{

margin-bottom:90px;
}

.metric-card{

height:100%;

padding:40px 30px;

text-align:center;

border-radius:30px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

transition:.35s ease;

backdrop-filter:blur(14px);
}

.metric-card:hover{

transform:translateY(-8px);

border-color:
rgba(124,58,237,.25);

box-shadow:
0 25px 60px rgba(124,58,237,.12);
}

.metric-icon{

width:90px;
height:90px;

margin:auto auto 28px;

border-radius:26px;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(124,58,237,.14),
rgba(79,70,229,.10)
);

border:
1px solid rgba(124,58,237,.25);
}

.metric-icon i{

font-size:34px;

color:#8b5cf6;
}

.metric-card h3{

color:#fff;

font-size:42px;

font-weight:800;

margin-bottom:14px;
}

.metric-card h4{

color:#e5e7eb;

font-size:22px;

font-weight:700;

line-height:1.5;

margin-bottom:16px;
}

.metric-card p{

color:#94a3b8;

font-size:15px;

line-height:1.8;

margin:0;
}

/* =====================================
TESTIMONIALS
===================================== */

.testimonial-wrapper{

padding:70px;

border-radius:36px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(14px);
}

.testimonial-header{

margin-bottom:50px;
}

.testimonial-header span{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.10);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:18px;
}

.testimonial-header h2{

color:#fff;

font-size:46px;

font-weight:800;
}

/* CARD */

.testimonial-card{

height:100%;

padding:34px;

border-radius:28px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

transition:.35s ease;
}

.testimonial-card:hover{

transform:translateY(-6px);

border-color:
rgba(124,58,237,.25);

box-shadow:
0 20px 50px rgba(124,58,237,.10);
}

.quote-icon{

margin-bottom:24px;
}

.quote-icon i{

font-size:30px;

color:#8b5cf6;
}

.testimonial-card p{

color:#cbd5e1;

font-size:16px;

line-height:1.9;

margin-bottom:34px;
}

/* USER */

.testimonial-user{

display:flex;

align-items:center;

gap:16px;
}

.user-image{

width:58px;
height:58px;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

color:#fff;

font-size:22px;

font-weight:700;
}

.user-info h4{

color:#fff;

font-size:18px;

font-weight:700;

margin-bottom:6px;
}

.user-info span{

color:#94a3b8;

font-size:14px;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.trust-header h2{

font-size:42px;
}

.testimonial-wrapper{

padding:50px 35px;
}

.testimonial-header h2{

font-size:38px;
}

}

@media(max-width:767px){

.trust-section{

padding:90px 0;
}

.trust-header h2{

font-size:32px;
}

.trust-header p{

font-size:16px;
}

.metric-card{

padding:34px 24px;
}

.metric-card h3{

font-size:34px;
}

.metric-card h4{

font-size:20px;
}

.testimonial-wrapper{

padding:35px 22px;
}

.testimonial-header h2{

font-size:28px;
}

.testimonial-card{

padding:28px 22px;
}

}


.conversion-footer-section{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#050d18 0%,
#0b1220 100%
);

overflow:hidden;
}

/* GLOW */

.footer-glow{

position:absolute;

border-radius:50%;

filter:blur(120px);
}

.footer-glow-1{

width:400px;
height:400px;

background:
rgba(124,58,237,.14);

top:-150px;
left:-150px;
}

.footer-glow-2{

width:350px;
height:350px;

background:
rgba(99,102,241,.12);

bottom:-120px;
right:-120px;
}

/* =====================================
HEADER
===================================== */

.conversion-header{

margin-bottom:70px;
}

.conversion-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.10);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:24px;
}

.conversion-header h2{

color:#fff;

font-size:58px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;
}

.conversion-header h2 span{

color:#8b5cf6;
}

.conversion-header p{

max-width:760px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.9;
}

/* =====================================
CARDS
===================================== */

.conversion-card{

position:relative;

height:100%;

padding:38px;

border-radius:32px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(16px);

transition:.4s ease;

overflow:hidden;
}

.conversion-card::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(124,58,237,.08),
transparent
);

opacity:0;

transition:.4s ease;
}

.conversion-card:hover{

transform:translateY(-10px);

border-color:
rgba(124,58,237,.30);

box-shadow:
0 25px 80px rgba(124,58,237,.15);
}

.conversion-card:hover::before{

opacity:1;
}

/* ACTIVE CARD */

.active-card{

border:
1px solid rgba(124,58,237,.35);

background:
linear-gradient(
180deg,
rgba(124,58,237,.08),
rgba(255,255,255,.03)
);
}

/* =====================================
ICON
===================================== */

.card-icon{

width:72px;
height:72px;

border-radius:22px;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(124,58,237,.18),
rgba(79,70,229,.12)
);

border:
1px solid rgba(124,58,237,.25);

margin-bottom:24px;
}

.card-icon i{

font-size:28px;

color:#8b5cf6;
}

/* =====================================
LABEL
===================================== */

.card-label{

display:inline-block;

color:#8b5cf6;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:18px;
}

/* =====================================
CONTENT
===================================== */

.conversion-card h3{

color:#fff;

font-size:34px;

font-weight:800;

line-height:1.3;

margin-bottom:18px;
}

.conversion-card p{

color:#94a3b8;

font-size:16px;

line-height:1.9;

margin-bottom:28px;
}

/* =====================================
FEATURES
===================================== */

.conversion-features{

padding:0;

margin:0 0 35px;

list-style:none;
}

.conversion-features li{

display:flex;

align-items:center;

gap:12px;

color:#d1d5db;

font-size:15px;

margin-bottom:16px;
}

.conversion-features li i{

color:#8b5cf6;

font-size:16px;
}

/* =====================================
BUTTON
===================================== */

.conversion-btn{

display:flex;

align-items:center;

justify-content:space-between;

width:100%;

padding:16px 22px;

border-radius:18px;

border:
1px solid rgba(255,255,255,.10);

background:
rgba(255,255,255,.03);

color:#fff;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:.35s ease;
}

.conversion-btn:hover{

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

border-color:transparent;

color:#fff;

transform:translateY(-2px);
}

.conversion-btn i{

transition:.3s ease;
}

.conversion-btn:hover i{

transform:translateX(6px);
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.conversion-header h2{

font-size:44px;
}

.conversion-card{

padding:32px;
}

}

@media(max-width:767px){

.conversion-footer-section{

padding:90px 0;
}

.conversion-header{

margin-bottom:50px;
}

.conversion-header h2{

font-size:34px;
}

.conversion-header p{

font-size:16px;
}

.conversion-card{

padding:28px 24px;
}

.conversion-card h3{

font-size:28px;
}

.conversion-btn{

font-size:15px;
}

}


/* =========================================
VOICEX FOOTER
========================================= */

.voicex-footer{

position:relative;

background:
linear-gradient(
180deg,
#050816 0%,
#090f1d 100%
);

padding-top:100px;

overflow:hidden;

border-top:
1px solid rgba(255,255,255,.06);
}

/* =========================================
BACKGROUND GLOW
========================================= */

.footer-blur{

position:absolute;

border-radius:50%;

filter:blur(120px);

z-index:0;
}

.footer-blur-1{

width:400px;
height:400px;

background:
rgba(124,58,237,.10);

top:-150px;
left:-100px;
}

.footer-blur-2{

width:350px;
height:350px;

background:
rgba(99,102,241,.08);

bottom:-100px;
right:-100px;
}

/* =========================================
CONTAINER LAYER
========================================= */

.footer-top,
.footer-bottom{

position:relative;

z-index:2;
}

/* =========================================
BRAND
========================================= */

.footer-logo{

text-decoration:none;

display:inline-block;

margin-bottom:22px;
}

.logo-gradient{

font-size:40px;

font-weight:800;

background:
linear-gradient(
135deg,
#ffffff,
#8b5cf6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.footer-brand p{

color:#94a3b8;

line-height:1.9;

font-size:15px;

margin-bottom:28px;

max-width:320px;
}

/* =========================================
SOCIALS
========================================= */

.footer-socials{

display:flex;

gap:14px;
}

.footer-socials a{

width:42px;
height:42px;

border-radius:12px;

display:flex;

align-items:center;
justify-content:center;

text-decoration:none;

color:#cbd5e1;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.06);

transition:.3s ease;
}

.footer-socials a:hover{

transform:translateY(-4px);

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

color:#fff;

border-color:transparent;
}

/* =========================================
LINK COLUMNS
========================================= */

.footer-links h5{

color:#fff;

font-size:17px;

font-weight:700;

margin-bottom:26px;
}

.footer-links ul{

list-style:none;

padding:0;

margin:0;
}

.footer-links ul li{

margin-bottom:16px;
}

.footer-links ul li a{

color:#94a3b8;

text-decoration:none;

font-size:15px;

transition:.3s ease;
}

.footer-links ul li a:hover{

color:#8b5cf6;

padding-left:4px;
}

/* =========================================
NEWSLETTER
========================================= */

.newsletter-box{

margin-top:35px;
}

.newsletter-box h6{

color:#fff;

font-size:16px;

font-weight:700;

margin-bottom:12px;
}

.newsletter-box p{

color:#94a3b8;

font-size:14px;

line-height:1.8;

margin-bottom:18px;
}

/* FORM */

.newsletter-form{

display:flex;

align-items:center;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

border-radius:16px;

overflow:hidden;
}

.newsletter-form input{

width:100%;

height:56px;

border:none;

outline:none;

background:transparent;

padding:0 18px;

color:#fff;

font-size:15px;
}

.newsletter-form input::placeholder{

color:#64748b;
}

.newsletter-form button{

width:60px;
height:56px;

border:none;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

color:#fff;

transition:.3s ease;
}

.newsletter-form button:hover{

opacity:.9;
}

/* =========================================
BOTTOM STRIP
========================================= */

.footer-bottom{

margin-top:70px;

padding:28px 0;

border-top:
1px solid rgba(255,255,255,.06);
}

/* COPYRIGHT */

.footer-copy{

color:#64748b;

font-size:14px;
}

/* LEGAL */

.footer-legal{

display:flex;

justify-content:flex-end;

align-items:center;

gap:24px;

flex-wrap:wrap;
}

.footer-legal a{

color:#94a3b8;

text-decoration:none;

font-size:14px;

transition:.3s ease;
}

.footer-legal a:hover{

color:#8b5cf6;
}

/* STATUS */

.status-badge{

display:flex;

align-items:center;

gap:10px;

padding:10px 14px;

border-radius:50px;

background:
rgba(16,185,129,.08);

border:
1px solid rgba(16,185,129,.18);

color:#10b981;

font-size:13px;

font-weight:600;
}

.status-dot{

width:8px;
height:8px;

border-radius:50%;

background:#10b981;

box-shadow:
0 0 12px #10b981;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px){

.footer-bottom{

text-align:center;
}

.footer-legal{

justify-content:center;
}

.footer-brand{

margin-bottom:20px;
}

}

@media(max-width:767px){

.voicex-footer{

padding-top:80px;
}

.logo-gradient{

font-size:34px;
}

.footer-links{

margin-top:10px;
}

.footer-bottom{

margin-top:50px;
}

.footer-legal{

gap:16px;
}

.status-badge{

width:100%;

justify-content:center;
}

}

/* ----------------------ABOUT PAGE--------------------------------- */


       
/* =================================
LEFT INDUSTRY CARDS
================================= */

.industry-card{

    padding:24px;

    border-radius:22px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid transparent;

    transition:.35s;

    margin-bottom:18px;

    cursor:pointer;
}

.industry-card:hover{

    border-color:
    rgba(124,58,237,.35);

    background:
    rgba(124,58,237,.08);

    transform:translateY(-4px);
}

.industry-icon{

    width:58px;
    height:58px;

    border-radius:18px;

    background:
    rgba(124,58,237,.12);

    display:flex;

    align-items:center;
    justify-content:center;

    color:#8b5cf6;

    font-size:22px;

    margin-bottom:18px;
}

.industry-card h5{

    color:white;

    font-size:18px;

    font-weight:700;

    margin-bottom:12px;
}

.industry-card p{

    color:#94a3b8;

    font-size:14px;

    line-height:1.8;
}

/* =================================
MENU TITLES
================================= */

.menu-title{

    color:#8b5cf6;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;
}

/* =================================
PRODUCT LINKS
================================= */

.product-link{

    display:flex;

    gap:16px;

    padding:16px;

    border-radius:18px;

    transition:.35s;

    margin-bottom:10px;
}

.product-link:hover{

    background:
    rgba(255,255,255,.04);

    transform:translateX(6px);
}

.product-icon{

    width:48px;
    height:48px;

    border-radius:14px;

    background:
    rgba(124,58,237,.12);

    display:flex;

    align-items:center;
    justify-content:center;

    color:#8b5cf6;
}

.product-content h6{

    color:white;

    font-size:15px;

    font-weight:600;

    margin-bottom:5px;
}

.product-content p{

    color:#94a3b8;

    font-size:13px;

    margin:0;
}

/* =================================
RESOURCE LINKS
================================= */

.resource-links a{

    display:block;

    color:#dbe4f0;

    margin-bottom:20px;

    transition:.3s;

    font-weight:500;
}

.resource-links a:hover{

    color:#8b5cf6;

    transform:translateX(5px);
}

/* =================================
RIGHT VISUAL
================================= */

.menu-visual{

    height:100%;

    border-radius:28px;

    padding:35px;

    background:
    linear-gradient(
    180deg,
    rgba(124,58,237,.12),
    rgba(124,58,237,.04)
    );

    border:
    1px solid rgba(124,58,237,.18);

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;
}

.menu-visual img{

    width:100%;

    max-width:240px;

    margin:auto;
}

.menu-visual h3{

    color:white;

    font-size:30px;

    font-weight:800;

    line-height:1.3;

    margin-top:20px;
}

.menu-visual p{

    color:#94a3b8;

    margin-top:12px;

    line-height:1.8;
}


       /* =====================================
COMMON
===================================== */

.section-padding{
    padding:110px 0;
}

.section-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(124,58,237,.12);

    border:
    1px solid rgba(124,58,237,.25);

    color:#a78bfa;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;
}

.section-title{

    font-size:58px;

    line-height:1.15;
    color: #fff;
    font-weight:800;

    margin-bottom:28px;
}

.section-title span{

    background:
    linear-gradient(
    135deg,
    #8b5cf6,
    #6366f1
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-text{

    color:#94a3b8;

    line-height:1.9;

    font-size:17px;
}

/* =====================================
BUTTONS
===================================== */

.primary-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 32px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;
}

.primary-btn:hover{

    transform:translateY(-4px);

    color:#fff;

    box-shadow:
    0 15px 40px rgba(124,58,237,.35);
}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 32px;

    border-radius:16px;

    border:
    1px solid rgba(255,255,255,.12);

    background:
    rgba(255,255,255,.03);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;
}

.secondary-btn:hover{

    border-color:#8b5cf6;

    color:#fff;

    transform:translateY(-4px);
}

/* =====================================
HERO
===================================== */

.about-hero{

    position:relative;

    padding-top:140px;

    overflow:hidden;
}

.hero-glow{

    position:absolute;

    width:500px;
    height:500px;

    background:
    rgba(124,58,237,.15);

    filter:blur(120px);

    border-radius:50%;

    top:-200px;
    right:-100px;
}

.hero-image{

    position:relative;

    text-align:center;
}

.hero-image img{

    width:100%;

    border-radius:30px;

    border:
    1px solid rgba(255,255,255,.08);

    box-shadow:
    0 40px 100px rgba(0,0,0,.45);
}

/* =====================================
FEATURE BOXES
===================================== */

.feature-grid{

    margin-top:70px;
}

.feature-card{

    height:100%;

    padding:35px;

    border-radius:26px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    transition:.4s ease;
}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:
    rgba(124,58,237,.35);

    box-shadow:
    0 20px 60px rgba(124,58,237,.12);
}

.feature-icon{

    width:70px;
    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:24px;

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,.18),
    rgba(79,70,229,.12)
    );
}

.feature-icon i{

    font-size:28px;

    color:#8b5cf6;
}

.feature-card h4{

    font-size:24px;
    color: #fff;
    margin-bottom:16px;

    font-weight:700;
}

.feature-card p{

    color:#94a3b8;

    line-height:1.8;

    margin-bottom:22px;
}

.feature-list{

    list-style:none;

    padding:0;
}

.feature-list li{

    margin-bottom:14px;

    color:#cbd5e1;

    display:flex;

    gap:12px;
}

.feature-list i{

    color:#8b5cf6;
}

/* =====================================
WHO USES
===================================== */

.use-card{

    padding:35px;

    border-radius:24px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    text-align:center;

    transition:.4s ease;

    height:100%;
}

.use-card:hover{

    transform:translateY(-8px);

    border-color:
    rgba(124,58,237,.30);
}

.use-icon{

    width:80px;
    height:80px;

    margin:auto auto 24px;

    border-radius:24px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,.18),
    rgba(79,70,229,.12)
    );
}

.use-icon i{

    font-size:34px;

    color:#8b5cf6;
}

.use-card h4{

    font-size:24px;
    color: #fff;
    margin-bottom:14px;
}

.use-card p{

    color:#94a3b8;

    line-height:1.8;
}

/* =====================================
PHILOSOPHY
===================================== */

.philosophy-section{

    position:relative;

    background:
    linear-gradient(
    180deg,
    rgba(124,58,237,.05),
    transparent
    );
}

.philosophy-box{

    padding:70px;

    border-radius:36px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    text-align:center;
}

/* =====================================
FLOW CARDS
===================================== */

.flow-card{

    height:100%;

    padding:40px;

    border-radius:28px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);
}

.flow-number{

    width:60px;
    height:60px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
    );

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:22px;

    font-weight:700;

    margin-bottom:26px;
}

.flow-card h4{

    font-size:26px;
    color: #fff;
    margin-bottom:18px;
}

.flow-card ul{

    list-style:none;

    padding:0;

    margin-top:20px;
}

.flow-card li{

    margin-bottom:14px;

    color:#cbd5e1;

    display:flex;

    gap:12px;
}

.flow-card li i{

    color:#8b5cf6;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

    .section-title{

        font-size:42px;
    }

    .hero-image{

        margin-top:60px;
    }

    .philosophy-box{

        padding:50px 30px;
    }

}

@media(max-width:767px){

    .section-padding{

        padding:80px 0;
    }

    .section-title{

        font-size:34px;
    }

    .section-text{

        font-size:15px;
    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        justify-content:center;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .feature-card,
    .flow-card{

        padding:28px;
    }

}



.conversion-footer-section{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#050d18 0%,
#0b1220 100%
);

overflow:hidden;
}

/* GLOW */

.footer-glow{

position:absolute;

border-radius:50%;

filter:blur(120px);
}

.footer-glow-1{

width:400px;
height:400px;

background:
rgba(124,58,237,.14);

top:-150px;
left:-150px;
}

.footer-glow-2{

width:350px;
height:350px;

background:
rgba(99,102,241,.12);

bottom:-120px;
right:-120px;
}

/* =====================================
HEADER
===================================== */

.conversion-header{

margin-bottom:70px;
}

.conversion-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:
rgba(124,58,237,.10);

border:
1px solid rgba(124,58,237,.25);

color:#c4b5fd;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:24px;
}

.conversion-header h2{

color:#fff;

font-size:58px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;
}

.conversion-header h2 span{

color:#8b5cf6;
}

.conversion-header p{

max-width:760px;

margin:auto;

color:#94a3b8;

font-size:18px;

line-height:1.9;
}

/* =====================================
CARDS
===================================== */

.conversion-card{

position:relative;

height:100%;

padding:38px;

border-radius:32px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(16px);

transition:.4s ease;

overflow:hidden;
}

.conversion-card::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(124,58,237,.08),
transparent
);

opacity:0;

transition:.4s ease;
}

.conversion-card:hover{

transform:translateY(-10px);

border-color:
rgba(124,58,237,.30);

box-shadow:
0 25px 80px rgba(124,58,237,.15);
}

.conversion-card:hover::before{

opacity:1;
}

/* ACTIVE CARD */

.active-card{

border:
1px solid rgba(124,58,237,.35);

background:
linear-gradient(
180deg,
rgba(124,58,237,.08),
rgba(255,255,255,.03)
);
}

/* =====================================
ICON
===================================== */

.card-icon{

width:72px;
height:72px;

border-radius:22px;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
rgba(124,58,237,.18),
rgba(79,70,229,.12)
);

border:
1px solid rgba(124,58,237,.25);

margin-bottom:24px;
}

.card-icon i{

font-size:28px;

color:#8b5cf6;
}

/* =====================================
LABEL
===================================== */

.card-label{

display:inline-block;

color:#8b5cf6;

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:18px;
}

/* =====================================
CONTENT
===================================== */

.conversion-card h3{

color:#fff;

font-size:34px;

font-weight:800;

line-height:1.3;

margin-bottom:18px;
}

.conversion-card p{

color:#94a3b8;

font-size:16px;

line-height:1.9;

margin-bottom:28px;
}

/* =====================================
FEATURES
===================================== */

.conversion-features{

padding:0;

margin:0 0 35px;

list-style:none;
}

.conversion-features li{

display:flex;

align-items:center;

gap:12px;

color:#d1d5db;

font-size:15px;

margin-bottom:16px;
}

.conversion-features li i{

color:#8b5cf6;

font-size:16px;
}

/* =====================================
BUTTON
===================================== */

.conversion-btn{

display:flex;

align-items:center;

justify-content:space-between;

width:100%;

padding:16px 22px;

border-radius:18px;

border:
1px solid rgba(255,255,255,.10);

background:
rgba(255,255,255,.03);

color:#fff;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:.35s ease;
}

.conversion-btn:hover{

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

border-color:transparent;

color:#fff;

transform:translateY(-2px);
}

.conversion-btn i{

transition:.3s ease;
}

.conversion-btn:hover i{

transform:translateX(6px);
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

.conversion-header h2{

font-size:44px;
}

.conversion-card{

padding:32px;
}

}

@media(max-width:767px){

.conversion-footer-section{

padding:90px 0;
}

.conversion-header{

margin-bottom:50px;
}

.conversion-header h2{

font-size:34px;
}

.conversion-header p{

font-size:16px;
}

.conversion-card{

padding:28px 24px;
}

.conversion-card h3{

font-size:28px;
}

.conversion-btn{

font-size:15px;
}

}


/* =========================================
VOICEX FOOTER
========================================= */

.voicex-footer{

position:relative;

background:
linear-gradient(
180deg,
#050816 0%,
#090f1d 100%
);

padding-top:100px;

overflow:hidden;

border-top:
1px solid rgba(255,255,255,.06);
}

/* =========================================
BACKGROUND GLOW
========================================= */

.footer-blur{

position:absolute;

border-radius:50%;

filter:blur(120px);

z-index:0;
}

.footer-blur-1{

width:400px;
height:400px;

background:
rgba(124,58,237,.10);

top:-150px;
left:-100px;
}

.footer-blur-2{

width:350px;
height:350px;

background:
rgba(99,102,241,.08);

bottom:-100px;
right:-100px;
}

/* =========================================
CONTAINER LAYER
========================================= */

.footer-top,
.footer-bottom{

position:relative;

z-index:2;
}

/* =========================================
BRAND
========================================= */

.footer-logo{

text-decoration:none;

display:inline-block;

margin-bottom:22px;
}

.logo-gradient{

font-size:40px;

font-weight:800;

background:
linear-gradient(
135deg,
#ffffff,
#8b5cf6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.footer-brand p{

color:#94a3b8;

line-height:1.9;

font-size:15px;

margin-bottom:28px;

max-width:320px;
}

/* =========================================
SOCIALS
========================================= */

.footer-socials{

display:flex;

gap:14px;
}

.footer-socials a{

width:42px;
height:42px;

border-radius:12px;

display:flex;

align-items:center;
justify-content:center;

text-decoration:none;

color:#cbd5e1;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.06);

transition:.3s ease;
}

.footer-socials a:hover{

transform:translateY(-4px);

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

color:#fff;

border-color:transparent;
}

/* =========================================
LINK COLUMNS
========================================= */

.footer-links h5{

color:#fff;

font-size:17px;

font-weight:700;

margin-bottom:26px;
}

.footer-links ul{

list-style:none;

padding:0;

margin:0;
}

.footer-links ul li{

margin-bottom:16px;
}

.footer-links ul li a{

color:#94a3b8;

text-decoration:none;

font-size:15px;

transition:.3s ease;
}

.footer-links ul li a:hover{

color:#8b5cf6;

padding-left:4px;
}

/* =========================================
NEWSLETTER
========================================= */

.newsletter-box{

margin-top:35px;
}

.newsletter-box h6{

color:#fff;

font-size:16px;

font-weight:700;

margin-bottom:12px;
}

.newsletter-box p{

color:#94a3b8;

font-size:14px;

line-height:1.8;

margin-bottom:18px;
}

/* FORM */

.newsletter-form{

display:flex;

align-items:center;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

border-radius:16px;

overflow:hidden;
}

.newsletter-form input{

width:100%;

height:56px;

border:none;

outline:none;

background:transparent;

padding:0 18px;

color:#fff;

font-size:15px;
}

.newsletter-form input::placeholder{

color:#64748b;
}

.newsletter-form button{

width:60px;
height:56px;

border:none;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

color:#fff;

transition:.3s ease;
}

.newsletter-form button:hover{

opacity:.9;
}

/* =========================================
BOTTOM STRIP
========================================= */

.footer-bottom{

margin-top:70px;

padding:28px 0;

border-top:
1px solid rgba(255,255,255,.06);
}

/* COPYRIGHT */

.footer-copy{

color:#64748b;

font-size:14px;
}

/* LEGAL */

.footer-legal{

display:flex;

justify-content:flex-end;

align-items:center;

gap:24px;

flex-wrap:wrap;
}

.footer-legal a{

color:#94a3b8;

text-decoration:none;

font-size:14px;

transition:.3s ease;
}

.footer-legal a:hover{

color:#8b5cf6;
}

/* STATUS */

.status-badge{

display:flex;

align-items:center;

gap:10px;

padding:10px 14px;

border-radius:50px;

background:
rgba(16,185,129,.08);

border:
1px solid rgba(16,185,129,.18);

color:#10b981;

font-size:13px;

font-weight:600;
}

.status-dot{

width:8px;
height:8px;

border-radius:50%;

background:#10b981;

box-shadow:
0 0 12px #10b981;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px){

.footer-bottom{

text-align:center;
}

.footer-legal{

justify-content:center;
}

.footer-brand{

margin-bottom:20px;
}

}

@media(max-width:767px){

.voicex-footer{

padding-top:80px;
}

.logo-gradient{

font-size:34px;
}

.footer-links{

margin-top:10px;
}

.footer-bottom{

margin-top:50px;
}

.footer-legal{

gap:16px;
}

.status-badge{

width:100%;

justify-content:center;
}

}


/* ------------------------------PRICING----------------------------------------------- */

    .pricing-section{
      padding:120px 0;
      position:relative;
      overflow:hidden;
      background:
      radial-gradient(circle at top right,#7c3aed25,transparent 30%),
      radial-gradient(circle at bottom left,#2563eb20,transparent 30%),
      #070b17;
      margin-top: 50px;
    }

    .pricing-section::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size:80px 80px;
      pointer-events:none;
    }

    .pricing-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 18px;
      border-radius:100px;
      background:rgba(124,58,237,0.12);
      border:1px solid rgba(124,58,237,0.35);
      color:#a78bfa;
      font-size:14px;
      font-weight:600;
      margin-bottom:20px;
    }

    .pricing-title{
      font-size:58px;
      color: #fff;
      font-weight:800;
      line-height:1.1;
      margin-bottom:18px;
    }

    .pricing-title span{
      color:#8b5cf6;
    }

    .pricing-subtitle{
      color:#9ca3af;
      font-size:18px;
      max-width:750px;
      margin:auto;
      line-height:1.8;
    }

    .billing-switch{
      margin-top:45px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }

    .billing-switch span{
      color:#cbd5e1;
      font-weight:600;
    }

    .save-badge{
      background:#052e16;
      color:#4ade80;
      font-size:13px;
      padding:6px 12px;
      border-radius:30px;
      font-weight:700;
      border:1px solid rgba(74,222,128,0.25);
    }

    .form-check-input{
      width:55px;
      height:28px;
      cursor:pointer;
      background-color:#1e293b;
      border:none;
    }

    .form-check-input:checked{
      background-color:#7c3aed;
      border:none;
    }

    .pricing-card{
      background:rgba(10,15,30,0.88);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:28px;
      padding:35px;
      position:relative;
      overflow:hidden;
      transition:0.4s;
      height:100%;
      backdrop-filter:blur(18px);
    }

    .pricing-card:hover{
      transform:translateY(-10px);
      border-color:#8b5cf6;
      box-shadow:0 25px 60px rgba(124,58,237,0.25);
    }

    .pricing-card.popular{
      border:1px solid #8b5cf6;
      transform:scale(1.03);
      box-shadow:0 25px 70px rgba(124,58,237,0.28);
    }

    .popular-tag{
      position:absolute;
      top:18px;
      right:18px;
      background:#7c3aed;
      color:#fff;
      font-size:12px;
      font-weight:700;
      padding:8px 14px;
      border-radius:50px;
    }

    .plan-icon{
      width:62px;
      height:62px;
      border-radius:18px;
      background:rgba(124,58,237,0.12);
      border:1px solid rgba(124,58,237,0.35);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      color:#8b5cf6;
      margin-bottom:24px;
    }

    .plan-name{
      font-size:30px;
      font-weight:700;
      color: #fff;
      margin-bottom:10px;
    }

    .plan-desc{
      color:#9ca3af;
      margin-bottom:28px;
      line-height:1.7;
    }

    .price{
      font-size:54px;
      font-weight:800;
      color: #fff;
      margin-bottom:5px;
    }

    .price span{
      font-size:18px;
      color:#94a3b8;
      font-weight:500;
    }

    .year-price{
      color:#8b5cf6;
      font-weight:600;
      margin-bottom:30px;
      display:block;
    }

    .feature-list{
      list-style:none;
      padding:0;
      margin:0 0 35px;
    }

    .feature-list li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      margin-bottom:16px;
      color:#d1d5db;
      font-size:15px;
    }

    .feature-list i{
      color:#8b5cf6;
      font-size:18px;
      margin-top:2px;
    }

    .pricing-btn{
      width:100%;
      border:none;
      padding:16px;
      border-radius:14px;
      font-weight:700;
      font-size:15px;
      transition:0.3s;
    }

    .btn-primary-custom{
      background:linear-gradient(135deg,#7c3aed,#4f46e5);
      color:#fff;
      box-shadow:0 12px 30px rgba(124,58,237,0.35);
    }

    .btn-primary-custom:hover{
      transform:translateY(-2px);
    }

    .btn-outline-custom{
      background:transparent;
      border:1px solid rgba(255,255,255,0.12);
      color:#fff;
    }

    .btn-outline-custom:hover{
      background:#8b5cf6;
      border-color:#8b5cf6;
    }

    .addon-wrapper{
      margin-top:80px;
    }

    .addon-card{
      background:rgba(10,15,30,0.88);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:24px;
      padding:35px;
      height:100%;
    }

    .addon-title{
      font-size:26px;
      font-weight:700;
      color: #fff;
      margin-bottom:10px;
    }

    .addon-sub{
      color:#94a3b8;
      margin-bottom:35px;
    }

    .addon-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:18px;
    }

    .addon-item{
      background:#0f172a;
      border:1px solid rgba(255,255,255,0.06);
      border-radius:16px;
      padding:18px;
      transition:0.3s;
    }

    .addon-item:hover{
      border-color:#8b5cf6;
      transform:translateY(-4px);
    }

    .addon-item i{
      font-size:24px;
      color:#8b5cf6;
      margin-bottom:10px;
      display:inline-block;
    }

    .addon-item h6{
      font-weight:600;
      color: #fff;
      margin-bottom:6px;
    }

    .addon-item p{
      color:#94a3b8;
      font-size:14px;
      margin:0;
    }

    .security-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:18px;
      margin-top:25px;
    }

    .security-item{
      background:#0f172a;
      border:1px solid rgba(255,255,255,0.06);
      border-radius:16px;
      padding:20px;
      text-align:center;
    }

    .security-item i{
      font-size:28px;
      color:#8b5cf6;
      margin-bottom:12px;
      display:block;
    }

    .security-item h6{
      font-weight:700;
      color: #fff;
      margin-bottom:5px;
    }

    .security-item p{
      color:#94a3b8;
      font-size:13px;
      margin:0;
    }

    .bottom-cta{
      margin-top:80px;
      background:
      linear-gradient(135deg,rgba(124,58,237,0.12),rgba(37,99,235,0.08));
      border:1px solid rgba(124,58,237,0.22);
      border-radius:30px;
      padding:45px;
    }

    .bottom-cta h3{
      font-size:38px;
      font-weight:800;
      color: #fff;
      margin-bottom:14px;
    }

    .bottom-cta p{
      color:#9ca3af;
      max-width:700px;
      line-height:1.8;
    }

    .cta-buttons{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
      margin-top:25px;
    }

    .cta-btn{
      padding:15px 28px;
      border-radius:14px;
      font-weight:700;
      text-decoration:none;
      transition:0.3s;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }

    .cta-primary{
      background:linear-gradient(135deg,#7c3aed,#4f46e5);
      color:#fff;
    }

    .cta-secondary{
      border:1px solid rgba(255,255,255,0.12);
      color:#fff;
    }

    .cta-btn:hover{
      transform:translateY(-3px);
    }

    @media(max-width:991px){

      .pricing-title{
        font-size:42px;
      }

      .pricing-card.popular{
        transform:none;
      }

      .addon-grid,
      .security-grid{
        grid-template-columns:1fr;
      }
    }

    @media(max-width:576px){

      .pricing-section{
        padding:90px 0;
      }

      .pricing-title{
        font-size:34px;
      }

      .price{
        font-size:42px;
      }

      .pricing-card{
        padding:28px;
      }

      .bottom-cta{
        padding:30px;
      }

      .bottom-cta h3{
        font-size:30px;
      }
    }

/* ----------------------------------CONTACT US --------------------------------------- */

/* =========================================
   VOICEX CONTACT PAGE
========================================= */

.voicex-contact-page{
    padding: 120px 0;
    background: #060816;
    position: relative;
    overflow: hidden;
    margin-top: 50px;
}

/* background glow */

.voicex-contact-page::before{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(108,59,255,0.08);
    filter: blur(150px);
    top: -220px;
    left: -180px;
    border-radius: 50%;
}

.voicex-contact-page::after{
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(59,130,246,0.06);
    filter: blur(140px);
    bottom: -220px;
    right: -150px;
    border-radius: 50%;
}

/* hero */

.contact-hero{
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    margin-bottom: 90px;
}

.contact-badge{
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(108,59,255,0.12);
    border: 1px solid rgba(139,92,246,0.16);
    color: #a78bfa;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.contact-hero h1{
    color: #fff;
    font-size: 62px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.contact-hero p{
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.9;
}

/* left side */

.contact-info-wrapper{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* cards */

.contact-info-card{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
    border-radius: 28px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
}

/* icon */

.contact-icon{
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(108,59,255,0.12);
    border: 1px solid rgba(139,92,246,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i{
    font-size: 26px;
    color: #8b5cf6;
}

/* info */

.info-label{
    display: inline-block;
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.contact-info-card h4{
    color: #fff;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 700;
}

.contact-info-card p{
    color: #94a3b8;
    line-height: 1.8;
    margin: 0;
}

/* support box */

.support-box{
    padding: 35px;
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        rgba(108,59,255,0.12),
        rgba(59,130,246,0.06)
    );

    border: 1px solid rgba(139,92,246,0.18);
}

.support-box span{
    display: inline-block;
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.support-box h3{
    color: #fff;
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 18px;
    font-weight: 800;
}

.support-box p{
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 28px;
}

.support-btn{
    display: inline-block;
    padding: 14px 28px;
    border-radius: 14px;
    background: linear-gradient(to right,#8b5cf6,#6d28d9);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

/* form */

.contact-form-wrapper{
    position: relative;
    z-index: 2;
    padding: 50px;
    border-radius: 34px;
    background: rgba(13,19,36,0.94);
    border: 1px solid rgba(255,255,255,0.06);
}

/* top */

.form-badge{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(108,59,255,0.10);
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 18px;
}

.form-top h2{
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
}

.form-top p{
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 38px;
}

/* form */

label{
    color: #dbe4ff;
    font-size: 15px;
    margin-bottom: 12px;
    display: block;
}

.form-control{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    height: 58px;
    border-radius: 16px;
    color: #fff;
    padding: 14px 18px;
}

.form-control:focus{
    background: rgba(255,255,255,0.04);
    border-color: rgba(139,92,246,0.28);
    box-shadow: none;
    color: #fff;
}

.form-control::placeholder{
    color: #64748b;
}

.message-box{
    height: 150px !important;
    resize: none;
}

/* button */

.submit-btn{
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(to right,#8b5cf6,#6d28d9);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

/* responsive */

@media(max-width:991px){

    .contact-hero h1{
        font-size: 46px;
    }

    .form-top h2{
        font-size: 34px;
    }

}

@media(max-width:576px){

    .voicex-contact-page{
        padding: 90px 0;
    }

    .contact-hero h1{
        font-size: 34px;
    }

    .contact-hero p{
        font-size: 16px;
    }

    .contact-form-wrapper{
        padding: 28px;
    }

    .contact-info-card{
        flex-direction: column;
    }

    .support-box h3{
        font-size: 28px;
    }

}



/* ============================== SOLUTION PAGE CSS=============================== */



/* =========================================
   GLOBAL
========================================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #060816;
    font-family: Inter, sans-serif;
    color: #fff;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}

section{
    position: relative;
    overflow: hidden;
}

.section-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(108,59,255,0.10);
    border: 1px solid rgba(139,92,246,0.18);
    color: #a78bfa;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.primary-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border-radius: 14px;
    background: linear-gradient(to right,#8b5cf6,#6d28d9);
    color: #fff;
    font-weight: 600;
    transition: 0.3s;
}

.primary-btn:hover{
    transform: translateY(-3px);
    color: #fff;
}

.secondary-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    transition: 0.3s;
}

.secondary-btn:hover{
    background: rgba(255,255,255,0.05);
    color: #fff;
}

/* =========================================
   HERO
========================================= */

.hero-section{
    padding: 130px 0 110px;
}

.hero-section::before{
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: rgba(108,59,255,0.12);
    filter: blur(160px);
    top: -300px;
    right: -100px;
    border-radius: 50%;
}

.hero-title{
    font-size: 72px;
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 28px;
}

.hero-description{
    color: #94a3b8;
    font-size: 19px;
    line-height: 1.9;
    margin-bottom: 40px;
    max-width: 620px;
}

.hero-buttons{
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* stats */

.hero-stats{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.stat-item h4{
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
}

.stat-item p{
    color: #94a3b8;
    margin: 0;
}

/* right */

.hero-right{
    position: relative;
}

.hero-card{
    padding: 35px;
    border-radius: 32px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
}

.dashboard-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.dashboard-top h5{
    font-size: 22px;
    font-weight: 700;
}

.live-badge{
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(16,185,129,0.10);
    color: #10b981;
    font-size: 13px;
    font-weight: 600;
}

.flow-box{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flow-item{
    padding: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 18px;
}

.flow-icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(108,59,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-icon i{
    font-size: 24px;
    color: #8b5cf6;
}

.flow-text h6{
    font-size: 18px;
    margin-bottom: 6px;
    font-weight: 700;
}

.flow-text p{
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

/* =========================================
   BUSINESS VALUE
========================================= */

.business-section{
    padding: 10px 0;
}

.business-wrapper{
    padding: 70px;
    border-radius: 40px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
}

.business-title{
    font-size: 58px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
}

.business-description{
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 40px;
}

/* growth flow */

.growth-flow{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.growth-step{
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: 0.3s;
}

.growth-step:hover{
    transform: translateX(5px);
    border-color: rgba(139,92,246,0.18);
}

.step-number{
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(108,59,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
    font-weight: 700;
}

.step-text h5{
    font-size: 22px;
    margin-bottom: 6px;
    font-weight: 700;
}

.step-text p{
    color: #94a3b8;
    margin: 0;
}

/* =========================================
   OUTCOMES SECTION
========================================= */

.outcome-section{
    padding: 110px 0;
}

.section-title{
    font-size: 58px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
}

.section-description{
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.9;
}

/* cards */

.outcome-card{
    padding: 35px;
    border-radius: 30px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
    height: 100%;
    transition: 0.3s;
}

.outcome-card:hover{
    transform: translateY(-6px);
    border-color: rgba(139,92,246,0.18);
}

.outcome-icon{
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: rgba(108,59,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.outcome-icon i{
    font-size: 28px;
    color: #8b5cf6;
}

.outcome-card h4{
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 16px;
}

.outcome-card p{
    color: #94a3b8;
    line-height: 1.8;
    margin: 0;
}

/* =========================================
   TRUST SECTION
========================================= */

.trust-section{
    padding: 110px 0;
}

.trust-box{
    padding: 70px;
    border-radius: 40px;
    background: linear-gradient(
        135deg,
        rgba(108,59,255,0.10),
        rgba(59,130,246,0.05)
    );

    border: 1px solid rgba(255,255,255,0.06);
}

.trust-item{
    padding: 30px;
    border-radius: 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    height: 100%;
}

.trust-item h3{
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 12px;
}

.trust-item p{
    color: #94a3b8;
    margin: 0;
}

/* =========================================
   CTA
========================================= */

.cta-section{
    padding: 0 0 120px;
}

.cta-box{
    padding: 80px;
    border-radius: 40px;
    background: rgba(13,19,36,0.92);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.cta-box h2{
    font-size: 58px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
}

.cta-box p{
    max-width: 760px;
    margin: auto;
    color: #94a3b8;
    line-height: 1.9;
    font-size: 18px;
    margin-bottom: 42px;
}

.cta-buttons{
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .hero-title,
    .business-title,
    .section-title,
    .cta-box h2{
        font-size: 48px;
    }

    .business-wrapper,
    .trust-box,
    .cta-box{
        padding: 40px;
    }

}

@media(max-width:576px){

    .hero-section,
    .business-section,
    .outcome-section,
    .trust-section{
        padding: 90px 0;
    }

    .cta-section{
        padding-bottom: 90px;
    }

    .hero-title,
    .business-title,
    .section-title,
    .cta-box h2{
        font-size: 34px;
    }

    .hero-description,
    .section-description,
    .business-description,
    .cta-box p{
        font-size: 16px;
    }

    .business-wrapper,
    .trust-box,
    .cta-box{
        padding: 28px;
    }

    .flow-item,
    .growth-step{
        flex-direction: column;
        align-items: flex-start;
    }

}



/* ============================== PRODUCT CSS ==================================== */

        /* ======================================
           GLOBAL
        ====================================== */

       


        /* ======================================
           HERO
        ====================================== */

        .demo-hero{
            padding: 130px 0 90px;
            text-align: center;
            position: relative;
            margin-top: 50px;
        }

        .demo-hero::before{
            content: "";
            position: absolute;
            width: 700px;
            height: 700px;
            background: rgba(99,102,241,0.12);
            filter: blur(180px);
            top: -300px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
        }

        .hero-badge{
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            border-radius: 50px;
            background: rgba(99,102,241,0.10);
            border: 1px solid rgba(255,255,255,0.08);
            color: #a5b4fc;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 28px;
            position: relative;
            z-index: 1;
        }

        .demo-hero h1{
            font-size: 74px;
            line-height: 1.05;
            font-weight: 800;
            margin-bottom: 26px;
            position: relative;
            z-index: 1;
        }

        .demo-hero p{
            max-width: 780px;
            margin: auto;
            color: #94a3b8;
            font-size: 20px;
            line-height: 1.9;
            position: relative;
            z-index: 1;
        }

        /* ======================================
           DEMO CARDS
        ====================================== */

        .demo-options{
            padding: 20px 0 110px;
        }

        .demo-card{
            background: rgba(10,15,30,0.92);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 40px;
            height: 100%;
            transition: 0.3s ease;
            position: relative;
        }

        .demo-card:hover{
            transform: translateY(-8px);
            border-color: rgba(99,102,241,0.25);
        }

        .recommended-tag{
            position: absolute;
            top: 24px;
            right: 24px;
            padding: 8px 14px;
            border-radius: 50px;
            background: rgba(16,185,129,0.10);
            color: #10b981;
            font-size: 12px;
            font-weight: 600;
        }

        .demo-icon{
            width: 82px;
            height: 82px;
            border-radius: 24px;
            background: rgba(99,102,241,0.10);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 32px;
        }

        .demo-icon i{
            font-size: 34px;
            color: #8b5cf6;
        }

        .demo-card h3{
            font-size: 34px;
            line-height: 1.2;
            font-weight: 700;
            margin-bottom: 18px;
        }

        .demo-card p{
            color: #94a3b8;
            line-height: 1.9;
            margin-bottom: 28px;
        }

        /* perfect for */

        .demo-label{
            font-size: 13px;
            letter-spacing: 1px;
            color: #64748b;
            text-transform: uppercase;
            margin-bottom: 18px;
            display: block;
            font-weight: 700;
        }

        .demo-list{
            margin-bottom: 32px;
        }

        .demo-list li{
            list-style: none;
            color: #cbd5e1;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
        }

        .demo-list li i{
            color: #10b981;
            font-size: 18px;
        }

        /* button */

        .demo-btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 16px;
            border-radius: 16px;
            background: linear-gradient(to right,#7c3aed,#4f46e5);
            color: #fff;
            font-weight: 600;
            transition: 0.3s;
        }

        .demo-btn:hover{
            transform: translateY(-2px);
            color: #fff;
        }

        /* ======================================
           FLOW SECTION
        ====================================== */

        .flow-section{
            padding: 0 0 110px;
        }

        .flow-wrapper{
            background: linear-gradient(
                135deg,
                rgba(99,102,241,0.10),
                rgba(59,130,246,0.04)
            );

            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 40px;
            padding: 70px;
        }

        .flow-title{
            font-size: 58px;
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .flow-description{
            color: #94a3b8;
            font-size: 18px;
            line-height: 1.9;
            margin-bottom: 55px;
        }

        /* flow cards */

        .flow-grid{
            display: grid;
            grid-template-columns: repeat(5,1fr);
            gap: 20px;
        }

        .flow-step{
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 26px;
            padding: 28px;
            text-align: center;
            position: relative;
        }

        .flow-step::after{
            content: "→";
            position: absolute;
            top: 50%;
            right: -16px;
            transform: translateY(-50%);
            color: #8b5cf6;
            font-size: 28px;
            font-weight: 700;
        }

        .flow-step:last-child::after{
            display: none;
        }

        .flow-step span{
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: rgba(99,102,241,0.10);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto auto 20px;
        }

        .flow-step span i{
            font-size: 24px;
            color: #8b5cf6;
        }

        .flow-step h5{
            font-size: 20px;
            margin-bottom: 12px;
            font-weight: 700;
        }

        .flow-step p{
            color: #94a3b8;
            font-size: 14px;
            line-height: 1.8;
            margin: 0;
        }

        /* ======================================
           HELP SECTION
        ====================================== */

        .help-section{
            padding-bottom: 110px;
        }

        .help-box{
            background: rgba(10,15,30,0.92);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 34px;
            padding: 60px;
        }

        .help-title{
            font-size: 52px;
            font-weight: 800;
            margin-bottom: 18px;
        }

        .help-subtitle{
            color: #94a3b8;
            line-height: 1.9;
            margin-bottom: 45px;
            font-size: 18px;
        }

        .help-option{
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 28px;
            height: 100%;
        }

        .help-option h5{
            font-size: 22px;
            margin-bottom: 16px;
            font-weight: 700;
        }

        .help-option p{
            color: #94a3b8;
            margin: 0;
            line-height: 1.8;
        }

        /* ======================================
           CTA SECTION
        ====================================== */

        .final-cta{
            padding-bottom: 120px;
        }

        .cta-box{
            background: rgba(10,15,30,0.92);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 40px;
            padding: 90px 60px;
            text-align: center;
        }

        .cta-box h2{
            font-size: 60px;
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: 24px;
        }

        .cta-box p{
            max-width: 780px;
            margin: auto;
            color: #94a3b8;
            line-height: 1.9;
            font-size: 18px;
            margin-bottom: 42px;
        }

        .cta-buttons{
            display: flex;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .primary-btn{
            padding: 16px 30px;
            border-radius: 16px;
            background: linear-gradient(to right,#7c3aed,#4f46e5);
            color: #fff;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .primary-btn:hover{
            transform: translateY(-2px);
            color: #fff;
        }

        .secondary-btn{
            padding: 16px 30px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .secondary-btn:hover{
            background: rgba(255,255,255,0.04);
            color: #fff;
        }

        /* ======================================
           RESPONSIVE
        ====================================== */

        @media(max-width:1200px){

            .flow-grid{
                grid-template-columns: repeat(2,1fr);
            }

            .flow-step::after{
                display: none;
            }

        }

        @media(max-width:991px){

            .demo-hero h1{
                font-size: 54px;
            }

            .flow-title,
            .help-title,
            .cta-box h2{
                font-size: 42px;
            }

            .flow-wrapper,
            .help-box,
            .cta-box{
                padding: 40px;
            }

        }

        @media(max-width:576px){

            .demo-hero{
                padding: 100px 0 70px;
            }

            .demo-options,
            .flow-section,
            .help-section{
                padding-bottom: 80px;
            }

            .final-cta{
                padding-bottom: 90px;
            }

            .demo-hero h1{
                font-size: 38px;
            }

            .flow-title,
            .help-title,
            .cta-box h2{
                font-size: 32px;
            }

            .demo-hero p,
            .flow-description,
            .help-subtitle,
            .cta-box p{
                font-size: 16px;
            }

            .flow-grid{
                grid-template-columns: 1fr;
            }

            .flow-wrapper,
            .help-box,
            .cta-box{
                padding: 28px;
            }

            .demo-card{
                padding: 28px;
            }

        }

      
      
 /* ============================== WHITE-LABELLING ================================= */


     
/* ================================= */
/* GLOBAL */
/* ================================= */

.section-padding{
    padding:100px 0;
    margin-top: 80px;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(124,77,255,0.12);
    border:1px solid rgba(124,77,255,0.2);
    color:#bda7ff;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
}

.section-title{
    font-size:56px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
}

.section-title span{
    background:linear-gradient(90deg,#ffffff,#8f66ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-subtitle{
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.btn-primary-custom{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 28px;
    border-radius:14px;
    background:linear-gradient(90deg,#6f3cff,#8f66ff);
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-primary-custom:hover{
    transform:translateY(-2px);
    color:white;
}

.btn-outline-custom{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 28px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.03);
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-outline-custom:hover{
    background:rgba(255,255,255,0.06);
    color:white;
}

/* ================================= */
/* HERO */
/* ================================= */

.hero-section{
    padding:130px 0 100px;
    background:
    radial-gradient(circle at top right, rgba(124,77,255,0.22), transparent 30%),
    radial-gradient(circle at bottom left, rgba(0,102,255,0.10), transparent 25%),
    var(--dark);
    position:relative;
    overflow:hidden;
}

.hero-graphic{
    position:relative;
}

.hero-card{
    background:linear-gradient(180deg,#111936,#0a1023);
    border:1px solid rgba(124,77,255,0.2);
    border-radius:28px;
    padding:45px;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.hero-card::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(124,77,255,0.15);
    top:-100px;
    right:-100px;
    border-radius:50%;
}

.infrastructure-box{
    background:linear-gradient(180deg,#171b3a,#10152e);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    padding:35px;
    text-align:center;
}

.infrastructure-box h3{
    font-size:38px;
    font-weight:800;
    margin-bottom:14px;
}

.infrastructure-box p{
    color:var(--muted);
    margin-bottom:0;
}

.mini-node{
    background:#11172d;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:16px;
    text-align:center;
    margin-top:20px;
}

.mini-node i{
    font-size:24px;
    color:#9d7dff;
    margin-bottom:10px;
}

.mini-node h6{
    margin-bottom:0;
    font-size:14px;
}

/* ================================= */
/* FEATURES */
/* ================================= */

.feature-card{
    background:linear-gradient(180deg,#0d1530,#0a1124);
    border:1px solid var(--border);
    border-radius:24px;
    padding:35px;
    height:100%;
    transition:.3s;
}

.feature-card:hover{
    transform:translateY(-6px);
    border-color:rgba(124,77,255,0.35);
}

.feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(124,77,255,0.14);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#9d7dff;
    margin-bottom:24px;
}

.feature-card h4{
    font-size:26px;
    font-weight:700;
    margin-bottom:16px;
}

.feature-card p{
    color:var(--muted);
    line-height:1.8;
}

/* ================================= */
/* FLOW */
/* ================================= */

.flow-section{
    background:#070d1d;
}

.flow-box{
    background:linear-gradient(180deg,#0f1835,#0a1124);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    padding:40px;
}

.flow-step{
    text-align:center;
    position:relative;
}

.flow-step .circle{
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(124,77,255,0.12);
    border:1px solid rgba(124,77,255,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:28px;
    color:#9d7dff;
    margin-bottom:20px;
}

.flow-step h5{
    font-size:22px;
    font-weight:700;
}

.flow-step p{
    color:var(--muted);
    font-size:15px;
}

.flow-arrow{
    font-size:30px;
    color:#8f66ff;
}

/* ================================= */
/* USE CASES */
/* ================================= */

.use-card{
    background:#0c1328;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:22px;
    padding:30px;
    height:100%;
}

.use-card i{
    font-size:28px;
    color:#9d7dff;
    margin-bottom:20px;
}

.use-card h4{
    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
}

.use-card p{
    color:var(--muted);
    line-height:1.8;
}

/* ================================= */
/* CTA */
/* ================================= */

.cta-section{
    padding-bottom:100px;
}

.cta-box{
    background:linear-gradient(180deg,#111936,#0a1023);
    border:1px solid rgba(124,77,255,0.18);
    border-radius:32px;
    padding:70px;
    position:relative;
    overflow:hidden;
}

.cta-box::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(124,77,255,0.12);
    right:-120px;
    top:-100px;
    border-radius:50%;
}

.cta-box h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:20px;
}

.cta-box p{
    max-width:760px;
    margin:auto;
    color:var(--muted);
    line-height:1.8;
    font-size:18px;
}

.cta-buttons{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

/* ================================= */
/* RESPONSIVE */
/* ================================= */

@media(max-width:991px){

    .section-title{
        font-size:42px;
    }

    .hero-section{
        padding-top:100px;
    }

    .hero-graphic{
        margin-top:50px;
    }

    .flow-arrow{
        transform:rotate(90deg);
        margin:20px 0;
    }

    .cta-box{
        padding:50px 25px;
    }

    .cta-box h2{
        font-size:36px;
    }

}

@media(max-width:576px){

    .section-padding{
        padding:70px 0;
    }

    .section-title{
        font-size:34px;
    }

    .section-subtitle{
        font-size:15px;
    }

    .hero-card{
        padding:25px;
    }

    .infrastructure-box h3{
        font-size:28px;
    }

    .cta-box h2{
        font-size:30px;
    }

}


/* =============================DIY-DEPLOYMENT===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }

  body{
    background:#050816;
    font-family:Inter,sans-serif;
    color:white;
    overflow-x:hidden;
  }

  section{
    padding:100px 0;
  }

  .gradient-text{
    background:linear-gradient(to right,#ffffff,#8b5cf6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .section-tag{
    display:inline-block;
    padding:8px 18px;
    border:1px solid rgba(139,92,246,0.3);
    border-radius:50px;
    color:#a78bfa;
    font-size:14px;
    font-weight:600;
    background:rgba(139,92,246,0.08);
    margin-bottom:25px;
  }

  .hero-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
  }

  .hero-section::before{
    content:'';
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#7c3aed25,transparent 70%);
    top:-250px;
    right:-200px;
  }

  .hero-title{
    font-size:72px;
    line-height:1.05;
    font-weight:800;
    margin-bottom:28px;
  }

  .hero-description{
    color:#9ca3af;
    font-size:18px;
    line-height:1.9;
    max-width:620px;
    margin-bottom:40px;
  }

  .hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }

  .btn-primary-custom{
    background:linear-gradient(135deg,#7c3aed,#8b5cf6);
    border:none;
    color:white;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    transition:0.3s;
  }

  .btn-primary-custom:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(124,58,237,0.35);
  }

  .btn-outline-custom{
    border:1px solid rgba(255,255,255,0.12);
    color:white;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    background:transparent;
  }

  .hero-panel{
    background:linear-gradient(180deg,#101528,#090d1a);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:32px;
    padding:45px;
    position:relative;
    overflow:hidden;
  }

  .hero-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,#7c3aed35,transparent 60%);
  }

  .deploy-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px;
    padding:24px;
    margin-bottom:18px;
    position:relative;
    z-index:2;
  }

  .deploy-card h5{
    font-size:20px;
    margin-bottom:10px;
    font-weight:700;
  }

  .deploy-card p{
    color:#9ca3af;
    line-height:1.7;
    margin:0;
  }

  .section-heading{
    text-align:center;
    margin-bottom:70px;
  }

  .section-heading h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:18px;
  }

  .section-heading p{
    max-width:720px;
    margin:auto;
    color:#9ca3af;
    line-height:1.9;
  }

  .feature-card{
    height:100%;
    background:#0c1224;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:26px;
    padding:40px;
    transition:0.3s;
  }

  .feature-card:hover{
    transform:translateY(-8px);
    border-color:#7c3aed;
  }

  .feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(139,92,246,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    color:#8b5cf6;
    font-size:26px;
  }

  .feature-card h4{
    font-size:26px;
    margin-bottom:16px;
    font-weight:700;
  }

  .feature-card p{
    color:#9ca3af;
    line-height:1.9;
  }

  .process-wrapper{
    background:linear-gradient(180deg,#0b1020,#10182f);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:60px;
  }

  .process-card{
    text-align:center;
    position:relative;
  }

  .step-number{
    width:80px;
    height:80px;
    border-radius:50%;
    color: #fff;
    background:linear-gradient(135deg,#7c3aed,#8b5cf6);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    margin-bottom:24px;
    font-size:24px;
    font-weight:700;
  }

  .process-card h5{
    font-size:24px;
    margin-bottom:14px;
    font-weight:700;
  }

  .process-card p{
    color:#9ca3af;
    line-height:1.8;
  }

  .cta-section{
    text-align:center;
    background:linear-gradient(135deg,#111936,#090d1a);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:80px 50px;
    position:relative;
    overflow:hidden;
  }

  .cta-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#7c3aed22,transparent 70%);
    top:-150px;
    right:-150px;
  }

  .cta-section h2{
    font-size:56px;
    font-weight:800;
    margin-bottom:20px;
    position:relative;
    z-index:2;
  }

  .cta-section p{
    max-width:700px;
    margin:auto;
    color:#9ca3af;
    line-height:1.9;
    margin-bottom:40px;
    position:relative;
    z-index:2;
  }

  @media(max-width:991px){

    .hero-section{
      text-align:center;
      padding-top:120px;
    }

    .hero-title{
      font-size:48px;
    }

    .hero-buttons{
      justify-content:center;
    }

    .hero-panel{
      margin-top:50px;
    }

    .section-heading h2{
      font-size:38px;
    }

    .process-wrapper{
      padding:40px 25px;
    }

    .cta-section{
      padding:60px 25px;
    }

    .cta-section h2{
      font-size:38px;
    }

  }

  /* ==========================AI-CALL-ROUTING=================================== */



    
  section{
    padding:100px 0;
  }

  .gradient-text{
    background:linear-gradient(to right,#ffffff,#8b5cf6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    border-radius:50px;
    border:1px solid rgba(139,92,246,0.3);
    background:rgba(139,92,246,0.08);
    color:#b794ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
  }

  /* ========================= */
  /* HERO */
  /* ========================= */

  .hero-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
  }

  .hero-section::before{
    content:'';
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#7c3aed25,transparent 70%);
    top:-250px;
    right:-150px;
  }

  .hero-title{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    margin-bottom:28px;
  }

  .hero-description{
    color:#9ca3af;
    font-size:18px;
    line-height:1.9;
    margin-bottom:40px;
    max-width:620px;
  }

  .hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }

  .btn-primary-custom{
    background:linear-gradient(135deg,#7c3aed,#8b5cf6);
    border:none;
    color:white;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    transition:0.3s;
  }

  .btn-primary-custom:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(124,58,237,0.35);
  }

  .btn-outline-custom{
    border:1px solid rgba(255,255,255,0.12);
    color:white;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    background:transparent;
  }

  .routing-panel{
    background:linear-gradient(180deg,#101528,#090d1a);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:32px;
    padding:40px;
    position:relative;
    overflow:hidden;
  }

  .routing-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,#7c3aed35,transparent 60%);
  }

  .route-box{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px;
    padding:24px;
    margin-bottom:18px;
    position:relative;
    z-index:2;
  }

  .route-box h5{
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
  }

  .route-box p{
    color:#9ca3af;
    line-height:1.8;
    margin:0;
  }

  .arrow{
    text-align:center;
    color:#8b5cf6;
    margin-bottom:18px;
    font-size:20px;
    position:relative;
    z-index:2;
  }

  /* ========================= */
  /* FEATURES */
  /* ========================= */

  .section-heading{
    text-align:center;
    margin-bottom:70px;
  }

  .section-heading h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:18px;
  }

  .section-heading p{
    color:#9ca3af;
    max-width:720px;
    margin:auto;
    line-height:1.9;
  }

  .feature-card{
    height:100%;
    background:#0c1224;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:28px;
    padding:40px;
    transition:0.3s;
  }

  .feature-card:hover{
    transform:translateY(-8px);
    border-color:#7c3aed;
  }

  .feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(139,92,246,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    font-size:26px;
    color:#8b5cf6;
  }

  .feature-card h4{
    font-size:26px;
    font-weight:700;
    margin-bottom:16px;
  }

  .feature-card p{
    color:#9ca3af;
    line-height:1.9;
  }

  /* ========================= */
  /* BENEFITS */
  /* ========================= */

  .benefits-wrapper{
    background:linear-gradient(180deg,#0b1020,#10182f);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:60px;
  }

  .benefit-item{
    display:flex;
    gap:20px;
    margin-bottom:35px;
  }

  .benefit-icon{
    min-width:60px;
    height:60px;
    border-radius:16px;
    background:rgba(139,92,246,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8b5cf6;
    font-size:22px;
  }

  .benefit-content h5{
    font-size:24px;
    font-weight:700;
    margin-bottom:10px;
  }

  .benefit-content p{
    color:#9ca3af;
    line-height:1.8;
    margin:0;
  }

  /* ========================= */
  /* CTA */
  /* ========================= */

  .cta-box{
    background:linear-gradient(135deg,#111936,#090d1a);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:80px 50px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }

  .cta-box::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#7c3aed22,transparent 70%);
    top:-150px;
    right:-150px;
  }

  .cta-box h2{
    font-size:56px;
    font-weight:800;
    margin-bottom:20px;
    position:relative;
    z-index:2;
  }

  .cta-box p{
    max-width:720px;
    margin:auto;
    color:#9ca3af;
    line-height:1.9;
    margin-bottom:40px;
    position:relative;
    z-index:2;
  }

  /* ========================= */
  /* RESPONSIVE */
  /* ========================= */

  @media(max-width:991px){

    .hero-section{
      text-align:center;
      padding-top:120px;
    }

    .hero-title{
      font-size:48px;
    }

    .hero-buttons{
      justify-content:center;
    }

    .routing-panel{
      margin-top:50px;
    }

    .section-heading h2{
      font-size:38px;
    }

    .benefits-wrapper{
      padding:40px 25px;
    }

    .cta-box{
      padding:60px 25px;
    }

    .cta-box h2{
      font-size:38px;
    }

  }


  /* --------------------------- AI TRANSCRIPTION CSS -------------------------------- */



  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }

  body{
    background:#050816;
    font-family:'Inter',sans-serif;
    color:#fff;
    overflow-x:hidden;
  }

  section{
    padding:100px 0;
  }

  .gradient-text{
    background:linear-gradient(to right,#ffffff,#8b5cf6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    border-radius:50px;
    border:1px solid rgba(139,92,246,0.3);
    background:rgba(139,92,246,0.08);
    color:#b794ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
  }

  /* ===================== */
  /* HERO SECTION */
  /* ===================== */

  .hero-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    margin-top: 50px;
  }

  .hero-section::before{
    content:'';
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#7c3aed22,transparent 70%);
    top:-250px;
    right:-150px;
  }

  .hero-title{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    margin-bottom:28px;
  }

  .hero-description{
    color:#9ca3af;
    font-size:18px;
    line-height:1.9;
    max-width:620px;
    margin-bottom:40px;
  }

  .hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }

  .btn-primary-custom{
    background:linear-gradient(135deg,#7c3aed,#8b5cf6);
    border:none;
    color:white;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    transition:0.3s;
  }

  .btn-primary-custom:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(124,58,237,0.35);
  }

  .btn-outline-custom{
    border:1px solid rgba(255,255,255,0.12);
    color:white;
    padding:16px 30px;
    border-radius:14px;
    font-weight:600;
    background:transparent;
  }

  /* ===================== */
  /* TRANSCRIPTION PANEL */
  /* ===================== */

  .transcription-panel{
    background:linear-gradient(180deg,#101528,#090d1a);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:32px;
    padding:35px;
    position:relative;
    overflow:hidden;
  }

  .transcription-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right,#7c3aed35,transparent 60%);
  }

  .call-box{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px;
    padding:22px;
    margin-bottom:18px;
    position:relative;
    z-index:2;
  }

  .call-box h5{
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
  }

  .call-box p{
    color:#9ca3af;
    line-height:1.8;
    margin:0;
  }

  .call-arrow{
    text-align:center;
    margin-bottom:18px;
    color:#8b5cf6;
    font-size:20px;
    position:relative;
    z-index:2;
  }

  /* ===================== */
  /* SECTION HEADING */
  /* ===================== */

  .section-heading{
    text-align:center;
    margin-bottom:70px;
  }

  .section-heading h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:18px;
  }

  .section-heading p{
    color:#9ca3af;
    max-width:720px;
    margin:auto;
    line-height:1.9;
  }

  /* ===================== */
  /* FEATURE CARDS */
  /* ===================== */

  .feature-card{
    height:100%;
    background:#0c1224;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:28px;
    padding:40px;
    transition:0.3s;
  }

  .feature-card:hover{
    transform:translateY(-8px);
    border-color:#7c3aed;
  }

  .feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:rgba(139,92,246,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    font-size:26px;
    color:#8b5cf6;
  }

  .feature-card h4{
    font-size:26px;
    font-weight:700;
    margin-bottom:16px;
  }

  .feature-card p{
    color:#9ca3af;
    line-height:1.9;
  }

  /* ===================== */
  /* BENEFITS */
  /* ===================== */

  .benefits-wrapper{
    background:linear-gradient(180deg,#0b1020,#10182f);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:60px;
  }

  .benefit-item{
    display:flex;
    gap:20px;
    margin-bottom:35px;
  }

  .benefit-icon{
    min-width:60px;
    height:60px;
    border-radius:16px;
    background:rgba(139,92,246,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8b5cf6;
    font-size:22px;
  }

  .benefit-content h5{
    font-size:24px;
    font-weight:700;
    margin-bottom:10px;
  }

  .benefit-content p{
    color:#9ca3af;
    line-height:1.8;
    margin:0;
  }

  /* ===================== */
  /* CTA */
  /* ===================== */

  .cta-box{
    background:linear-gradient(135deg,#111936,#090d1a);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:80px 50px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }

  .cta-box::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#7c3aed22,transparent 70%);
    top:-150px;
    right:-150px;
  }

  .cta-box h2{
    font-size:56px;
    font-weight:800;
    margin-bottom:20px;
    position:relative;
    z-index:2;
  }

  .cta-box p{
    max-width:720px;
    margin:auto;
    color:#9ca3af;
    line-height:1.9;
    margin-bottom:40px;
    position:relative;
    z-index:2;
  }

  /* ===================== */
  /* RESPONSIVE */
  /* ===================== */

  @media(max-width:991px){

    .hero-section{
      text-align:center;
      padding-top:120px;
    }

    .hero-title{
      font-size:48px;
    }

    .hero-buttons{
      justify-content:center;
    }

    .transcription-panel{
      margin-top:50px;
    }

    .section-heading h2{
      font-size:38px;
    }

    .benefits-wrapper{
      padding:40px 25px;
    }

    .cta-box{
      padding:60px 25px;
    }

    .cta-box h2{
      font-size:38px;
    }

  }


  /* ========================= VIRTUAL NUMBER CSS ============================== */


  body{
    background:#050816;
    font-family:'Inter',sans-serif;
    color:#fff;
    overflow-x:hidden;
  }

  a{
    text-decoration:none;
  }

  /* =========================
     HERO SECTION
  ==========================*/

  .virtual-hero{
    position:relative;
    padding:120px 0 90px;
    background:
    radial-gradient(circle at top right, rgba(120,70,255,0.18), transparent 30%),
    radial-gradient(circle at left, rgba(0,120,255,0.10), transparent 25%),
    #050816;
    overflow:hidden;
    margin-top: 50px;
  }

  .virtual-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:1px solid rgba(138,92,246,0.3);
    background:rgba(138,92,246,0.08);
    border-radius:50px;
    color:#9b6dff;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
  }

  .virtual-title{
    font-size:68px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:25px;
  }

  .gradient-text{
    background:linear-gradient(to right,#9f6bff,#5b8cff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .virtual-desc{
    color:#9ea4c3;
    font-size:18px;
    line-height:1.8;
    max-width:620px;
    margin-bottom:35px;
  }

  .hero-btns{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }

  .btn-primary-custom{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f6fff);
    color:#fff;
    font-weight:600;
    border:none;
    transition:0.3s;
  }

  .btn-primary-custom:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(124,77,255,0.35);
  }

  .btn-outline-custom{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    font-weight:600;
    background:rgba(255,255,255,0.03);
    transition:0.3s;
  }

  .btn-outline-custom:hover{
    background:#fff;
    color:#000;
  }

  /* =========================
     HERO CARD
  ==========================*/

  .virtual-card{
    background:linear-gradient(180deg,#10162d,#090d1c);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:28px;
    padding:40px;
    position:relative;
    overflow:hidden;
    box-shadow:0 0 60px rgba(93,78,255,0.18);
  }

  .virtual-card::before{
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(130,80,255,0.12);
    border-radius:50%;
    top:-120px;
    right:-100px;
    filter:blur(40px);
  }

  .number-box{
    background:#11182f;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:22px;
    margin-bottom:18px;
    transition:0.3s;
  }

  .number-box:hover{
    transform:translateY(-5px);
    border-color:#8d5dff;
  }

  .number-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:15px;
  }

  .number-country{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
  }

  .number-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(124,77,255,0.15);
    color:#8d5dff;
    font-size:18px;
  }

  .phone-number{
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
  }

  .status{
    color:#4ade80;
    font-size:14px;
  }

  /* =========================
     FEATURES
  ==========================*/

  .section-space{
    padding:90px 0;
  }

  .section-subtitle{
    color:#8d5dff;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:18px;
    text-transform:uppercase;
  }

  .section-title{
    font-size:48px;
    font-weight:800;
    margin-bottom:20px;
  }

  .section-desc{
    color:#98a0c2;
    font-size:17px;
    line-height:1.8;
    max-width:700px;
    margin:auto;
  }

  .feature-card{
    background:linear-gradient(180deg,#0e1428,#090d1b);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    padding:35px;
    height:100%;
    transition:0.3s;
  }

  .feature-card:hover{
    transform:translateY(-8px);
    border-color:#7b4dff;
    box-shadow:0 0 40px rgba(123,77,255,0.18);
  }

  .feature-icon{
    width:65px;
    height:65px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8d5dff;
    font-size:26px;
    margin-bottom:25px;
  }

  .feature-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:14px;
  }

  .feature-text{
    color:#9ea4c3;
    line-height:1.8;
    font-size:15px;
  }

  /* =========================
     BENEFITS
  ==========================*/

  .benefits-box{
    background:linear-gradient(180deg,#0f1427,#0a0e1d);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:28px;
    padding:60px;
  }

  .benefit-item{
    display:flex;
    gap:18px;
    margin-bottom:30px;
  }

  .benefit-check{
    width:48px;
    height:48px;
    flex-shrink:0;
    border-radius:14px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8d5dff;
    font-size:18px;
  }

  .benefit-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
  }

  .benefit-text{
    color:#98a0c2;
    line-height:1.7;
  }

  /* =========================
     CTA
  ==========================*/

  .cta-section{
    padding:90px 0 110px;
  }

  .cta-box{
    background:
    linear-gradient(135deg, rgba(123,77,255,0.15), rgba(35,58,120,0.15)),
    #0b1020;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:30px;
    padding:70px 50px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }

  .cta-title{
    font-size:52px;
    font-weight:800;
    margin-bottom:20px;
  }

  .cta-text{
    color:#9ea4c3;
    max-width:700px;
    margin:auto;
    line-height:1.8;
    margin-bottom:35px;
    font-size:17px;
  }

  /* =========================
     RESPONSIVE
  ==========================*/

  @media(max-width:991px){

    .virtual-title{
      font-size:50px;
    }

    .section-title{
      font-size:38px;
    }

    .cta-title{
      font-size:38px;
    }

    .virtual-card{
      margin-top:50px;
    }

  }

  @media(max-width:767px){

    .virtual-title{
      font-size:40px;
    }

    .section-title{
      font-size:32px;
    }

    .cta-title{
      font-size:32px;
    }

    .benefits-box{
      padding:35px 25px;
    }

    .cta-box{
      padding:50px 25px;
    }

    .hero-btns{
      flex-direction:column;
    }

    .btn-primary-custom,
    .btn-outline-custom{
      width:100%;
      text-align:center;
    }

  }


  /* -======================== COUSTOMER SUPPORT CSS=================================== */

  
  

  body{
    font-family:'Inter',sans-serif;
    background:#050816;
    color:#fff;
    overflow-x:hidden;
  }

  a{
    text-decoration:none;
  }

  /* ==========================
     HERO SECTION
  ========================== */

  .support-hero{
    position:relative;
    padding:120px 0 100px;
    background:
    radial-gradient(circle at top left, rgba(123,77,255,0.20), transparent 30%),
    radial-gradient(circle at bottom right, rgba(0,119,255,0.12), transparent 30%),
    #050816;
    overflow:hidden;
    margin-top: 50px;
  }

  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.25);
    color:#9b6dff;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
  }

  .hero-title{
    font-size:68px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:25px;
  }

  .gradient-text{
    background:linear-gradient(to right,#9b6dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .hero-desc{
    color:#9ca4c7;
    font-size:18px;
    line-height:1.8;
    max-width:620px;
    margin-bottom:35px;
  }

  .hero-btns{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }

  .btn-primary-custom{
    padding:15px 30px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f6fff);
    color:#fff;
    font-weight:600;
    transition:0.3s;
  }

  .btn-primary-custom:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(123,77,255,0.35);
  }

  .btn-outline-custom{
    padding:15px 30px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    font-weight:600;
    transition:0.3s;
  }

  .btn-outline-custom:hover{
    background:#fff;
    color:#000;
  }

  /* ==========================
     SUPPORT DASHBOARD
  ========================== */

  .support-dashboard{
    background:linear-gradient(180deg,#0d1327,#080c1a);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:28px;
    padding:35px;
    box-shadow:0 0 60px rgba(123,77,255,0.18);
  }

  .dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
  }

  .dashboard-title{
    font-size:20px;
    font-weight:700;
  }

  .live-badge{
    padding:8px 14px;
    background:rgba(34,197,94,0.15);
    color:#4ade80;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
  }

  .support-card{
    background:#11172d;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:18px;
    padding:22px;
    margin-bottom:18px;
    transition:0.3s;
  }

  .support-card:hover{
    transform:translateY(-5px);
    border-color:#7b4dff;
  }

  .support-top{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
  }

  .support-user{
    display:flex;
    gap:14px;
    align-items:center;
  }

  .support-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(123,77,255,0.12);
    color:#9b6dff;
    font-size:18px;
  }

  .support-name{
    font-size:16px;
    font-weight:700;
  }

  .support-dept{
    color:#8f97b6;
    font-size:13px;
  }

  .support-status{
    color:#4ade80;
    font-size:13px;
    font-weight:600;
  }

  .support-text{
    color:#9ea4c3;
    line-height:1.7;
    font-size:14px;
  }

  /* ==========================
     FEATURES
  ========================== */

  .section-space{
    padding:100px 0;
  }

  .section-subtitle{
    color:#9b6dff;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:1px;
    font-weight:700;
    margin-bottom:18px;
  }

  .section-title{
    font-size:48px;
    font-weight:800;
    margin-bottom:20px;
  }

  .section-desc{
    color:#98a0c2;
    line-height:1.8;
    font-size:17px;
  }

  .feature-card{
    height:100%;
    background:linear-gradient(180deg,#0d1327,#080c1a);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    padding:35px;
    transition:0.3s;
  }

  .feature-card:hover{
    transform:translateY(-8px);
    border-color:#7b4dff;
    box-shadow:0 0 40px rgba(123,77,255,0.15);
  }

  .feature-icon{
    width:65px;
    height:65px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b6dff;
    font-size:24px;
    margin-bottom:25px;
  }

  .feature-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:14px;
  }

  .feature-text{
    color:#98a0c2;
    line-height:1.8;
    font-size:15px;
  }

  /* ==========================
     FLOW SECTION
  ========================== */

  .flow-wrapper{
    background:linear-gradient(180deg,#0d1327,#080c1a);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:28px;
    padding:60px;
  }

  .flow-box{
    text-align:center;
    position:relative;
  }

  .flow-icon{
    width:85px;
    height:85px;
    border-radius:22px;
    margin:auto;
    margin-bottom:20px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b6dff;
    font-size:30px;
  }

  .flow-title{
    font-size:22px;
    font-weight:700;
    margin-bottom:10px;
  }

  .flow-text{
    color:#98a0c2;
    line-height:1.7;
    font-size:15px;
  }

  .flow-arrow{
    font-size:30px;
    color:#7b4dff;
    margin-top:35px;
  }

  /* ==========================
     CTA SECTION
  ========================== */

  .cta-section{
    padding:90px 0 110px;
  }

  .cta-box{
    background:
    linear-gradient(135deg, rgba(123,77,255,0.15), rgba(39,60,120,0.15)),
    #0b1020;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:32px;
    padding:70px 40px;
    text-align:center;
  }

  .cta-title{
    font-size:52px;
    font-weight:800;
    margin-bottom:20px;
  }

  .cta-text{
    color:#98a0c2;
    max-width:750px;
    margin:auto;
    line-height:1.8;
    margin-bottom:35px;
    font-size:17px;
  }

  /* ==========================
     RESPONSIVE
  ========================== */

  @media(max-width:991px){

    .hero-title{
      font-size:52px;
    }

    .section-title{
      font-size:38px;
    }

    .cta-title{
      font-size:40px;
    }

    .support-dashboard{
      margin-top:50px;
    }

    .flow-arrow{
      transform:rotate(90deg);
      margin:20px 0;
    }

  }

  @media(max-width:767px){

    .hero-title{
      font-size:40px;
    }

    .section-title{
      font-size:30px;
    }

    .cta-title{
      font-size:30px;
    }

    .flow-wrapper{
      padding:35px 25px;
    }

    .cta-box{
      padding:50px 25px;
    }

    .hero-btns{
      flex-direction:column;
    }

    .btn-primary-custom,
    .btn-outline-custom{
      width:100%;
      text-align:center;
    }

  }


  /* --------------------------SALES MANAGEMENT CSS------------------------------------- */

/* =========================================
   SALES MANAGEMENT CSS
========================================= */

.vx-sales-section{
    position:relative;
    padding:120px 0;
    background:#060816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-sales-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(123,77,255,0.10);
    filter:blur(120px);
    top:-200px;
    left:-100px;
}

.vx-sales-hero{
    margin-bottom:120px;
}

.vx-sales-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.25);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-sales-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-sales-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-sales-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    max-width:580px;
    margin-bottom:40px;
}

.vx-sales-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.vx-sales-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.vx-sales-primary-btn:hover{
    transform:translateY(-4px);
    color:#fff;
}

.vx-sales-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-sales-dashboard{
    background:linear-gradient(180deg,#0e1427,#0a0e1d);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:32px;
    padding:35px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-sales-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-sales-dashboard-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-sales-dashboard-header span{
    color:#8f98ba;
    font-size:14px;
}

.vx-sales-live{
    padding:10px 16px;
    border-radius:30px;
    background:rgba(34,197,94,0.12);
    color:#4ade80;
    font-size:13px;
    font-weight:600;
}

.vx-sales-metric-card{
    background:#11172b;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.06);
    padding:28px;
    height:100%;
}

.vx-sales-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:28px;
    margin-bottom:24px;
}

.vx-sales-metric-card h3{
    color:#fff;
    font-size:38px;
    font-weight:800;
    margin-bottom:10px;
}

.vx-sales-metric-card p{
    color:#97a0c3;
    margin-bottom:8px;
}

.vx-sales-metric-card span{
    color:#4ade80;
    font-size:14px;
    font-weight:600;
}

.vx-sales-chart-card{
    background:#11172b;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.06);
    padding:30px;
}

.vx-chart-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:35px;
}

.vx-chart-header h5{
    color:#fff;
}

.vx-chart-header span{
    color:#8f98ba;
}

.vx-chart-bars{
    display:flex;
    align-items:flex-end;
    gap:18px;
    height:160px;
}

.vx-bar{
    flex:1;
    border-radius:16px 16px 0 0;
    background:linear-gradient(to top,#7b4dff,#5f87ff);
}

.vx-bar-1{height:60%;}
.vx-bar-2{height:85%;}
.vx-bar-3{height:45%;}
.vx-bar-4{height:100%;}
.vx-bar-5{height:70%;}

.vx-sales-features{
    margin-bottom:120px;
}

.vx-sales-feature-card{
    height:100%;
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    transition:.3s;
}

.vx-sales-feature-card:hover{
    transform:translateY(-8px);
    border-color:#7b4dff;
}

.vx-sales-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-sales-feature-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-sales-feature-card p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-sales-flow-section{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:36px;
    border:1px solid rgba(255,255,255,0.06);
    padding:70px 50px;
}

.vx-sales-flow-header{
    margin-bottom:60px;
}

.vx-sales-flow-header h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin-top:24px;
}

.vx-sales-flow-card{
    text-align:center;
}

.vx-sales-flow-icon{
    width:90px;
    height:90px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c78ff;
    font-size:36px;
    margin:auto;
    margin-bottom:24px;
}

.vx-sales-flow-card h4{
    color:#fff;
    font-size:24px;
    margin-bottom:15px;
}

.vx-sales-flow-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-sales-arrow{
    font-size:42px;
    color:#7b4dff;
    text-align:center;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .vx-sales-title{
        font-size:48px;
    }

    .vx-sales-dashboard{
        margin-top:50px;
    }

    .vx-sales-flow-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-sales-section{
        padding:80px 0;
    }

    .vx-sales-title{
        font-size:38px;
    }

    .vx-sales-dashboard{
        padding:24px;
    }

    .vx-sales-flow-section{
        padding:50px 24px;
    }

    .vx-sales-flow-header h2{
        font-size:30px;
    }

    .vx-sales-buttons{
        flex-direction:column;
    }

    .vx-sales-primary-btn,
    .vx-sales-secondary-btn{
        width:100%;
        text-align:center;
    }

}

  /* ========================ANALYTICS & REPORTING================================= */

 
/* =========================================
   ANALYTICS PAGE CSS
========================================= */

.vx-analytics-section{
    position: relative;
    padding: 120px 0;
    background: #060816;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    margin-top: 50px;
}

.vx-analytics-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.10);
    filter: blur(120px);
    top:-200px;
    right:-100px;
    border-radius:50%;
}

.vx-analytics-top{
    margin-bottom:120px;
}

.vx-analytics-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.25);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
}

.vx-analytics-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:25px;
}

.vx-analytics-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-analytics-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:40px;
    max-width:580px;
}

.vx-analytics-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.vx-primary-btn{
    padding:15px 32px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    border-radius:14px;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.vx-primary-btn:hover{
    transform:translateY(-4px);
    color:#fff;
}

.vx-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-dashboard-wrapper{
    background:linear-gradient(180deg,#0e1427,#0a0e1d);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:30px;
    padding:35px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-dashboard-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-dashboard-header span{
    color:#8f98ba;
    font-size:14px;
}

.vx-live-indicator{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-dashboard-card{
    background:#11172b;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:22px;
    padding:28px;
    height:100%;
}

.vx-card-icon{
    width:65px;
    height:65px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c78ff;
    font-size:26px;
    margin-bottom:22px;
}

.vx-dashboard-card h3{
    color:#fff;
    font-size:38px;
    font-weight:800;
    margin-bottom:10px;
}

.vx-dashboard-card p{
    color:#97a0c3;
    margin-bottom:8px;
}

.vx-dashboard-card span{
    color:#4ade80;
    font-size:14px;
    font-weight:600;
}

.vx-graph-card{
    background:#11172b;
    border-radius:24px;
    padding:30px;
    border:1px solid rgba(255,255,255,0.06);
}

.vx-graph-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:35px;
}

.vx-graph-header h5{
    color:#fff;
}

.vx-graph-header span{
    color:#8f98ba;
}

.vx-graph-lines{
    position:relative;
    height:160px;
}

.vx-line{
    position:absolute;
    height:4px;
    border-radius:20px;
}

.vx-line-one{
    width:80%;
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    bottom:50px;
    left:20px;
    transform:skewY(-8deg);
}

.vx-line-two{
    width:60%;
    background:linear-gradient(to right,#5f87ff,#7b4dff);
    bottom:90px;
    left:40px;
    transform:skewY(6deg);
}

.vx-feature-box{
    height:100%;
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    padding:38px;
    border:1px solid rgba(255,255,255,0.06);
    transition:.3s;
}

.vx-feature-box:hover{
    transform:translateY(-8px);
    border-color:#7b4dff;
}

.vx-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:25px;
}

.vx-feature-box h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-feature-box p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-analytics-features{
    margin-bottom:120px;
}

.vx-reporting-flow{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:36px;
    padding:70px 50px;
    border:1px solid rgba(255,255,255,0.06);
}

.vx-flow-header{
    margin-bottom:60px;
}

.vx-flow-header h2{
    font-size:52px;
    font-weight:800;
    color:#fff;
    margin-top:25px;
}

.vx-flow-card{
    text-align:center;
}

.vx-flow-icon{
    width:90px;
    height:90px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c78ff;
    font-size:36px;
    margin:auto;
    margin-bottom:25px;
}

.vx-flow-card h4{
    color:#fff;
    margin-bottom:15px;
    font-size:24px;
}

.vx-flow-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-flow-arrow{
    font-size:42px;
    color:#7b4dff;
    text-align:center;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .vx-analytics-title{
        font-size:48px;
    }

    .vx-dashboard-wrapper{
        margin-top:50px;
    }

    .vx-flow-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-analytics-section{
        padding:80px 0;
    }

    .vx-analytics-title{
        font-size:38px;
    }

    .vx-dashboard-wrapper{
        padding:25px;
    }

    .vx-reporting-flow{
        padding:50px 25px;
    }

    .vx-flow-header h2{
        font-size:30px;
    }

    .vx-analytics-buttons{
        flex-direction:column;
    }

    .vx-primary-btn,
    .vx-secondary-btn{
        width:100%;
        text-align:center;
    }

}



/* ======================== API & INTEGRATION=========================== */

/* =========================================
   API INTEGRATIONS CSS
========================================= */

.vx-api-section{
    position:relative;
    padding:120px 0;
    background:#060816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-api-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(123,77,255,0.10);
    filter:blur(120px);
    top:-180px;
    right:-100px;
}

.vx-api-hero{
    margin-bottom:120px;
}

.vx-api-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-api-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-api-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-api-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
    max-width:580px;
}

.vx-api-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-api-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-api-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-api-dashboard{
    background:linear-gradient(180deg,#0e1427,#0a0e1d);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:35px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-api-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-api-dashboard-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-api-dashboard-header span{
    color:#8f98ba;
    font-size:14px;
}

.vx-api-live{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-api-tool-card{
    background:#11172b;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.06);
    padding:28px;
    height:100%;
}

.vx-api-tool-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:28px;
    margin-bottom:22px;
}

.vx-api-tool-card h5{
    color:#fff;
    font-size:22px;
    margin-bottom:14px;
}

.vx-api-tool-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-api-business-section{
    margin-bottom:120px;
}

.vx-api-business-header{
    margin-bottom:60px;
}

.vx-api-business-header h2{
    font-size:52px;
    font-weight:800;
    color:#fff;
    margin:24px 0;
}

.vx-api-business-header p{
    color:#97a0c3;
    max-width:700px;
    margin:auto;
    line-height:1.9;
}

.vx-api-flow-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    text-align:center;
    height:100%;
}

.vx-api-flow-icon{
    width:85px;
    height:85px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c78ff;
    font-size:34px;
    margin:auto;
    margin-bottom:24px;
}

.vx-api-flow-card h4{
    color:#fff;
    margin-bottom:16px;
    font-size:24px;
}

.vx-api-flow-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-api-feature-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    height:100%;
}

.vx-api-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-api-feature-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-api-feature-card p{
    color:#97a0c3;
    line-height:1.9;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .vx-api-title{
        font-size:48px;
    }

    .vx-api-dashboard{
        margin-top:40px;
    }

    .vx-api-business-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-api-section{
        padding:80px 0;
    }

    .vx-api-title{
        font-size:38px;
    }

    .vx-api-dashboard{
        padding:24px;
    }

    .vx-api-business-header h2{
        font-size:30px;
    }

    .vx-api-buttons{
        flex-direction:column;
    }

    .vx-api-primary-btn,
    .vx-api-secondary-btn{
        width:100%;
        text-align:center;
    }

}


/* ---------------------CALL RECORDING ============---------------------------- */

/* =========================================
   CALL RECORDING PAGE CSS
========================================= */

.vx-recording-section{
    position:relative;
    padding:120px 0;
    background:#060816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-recording-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(123,77,255,0.10);
    filter:blur(120px);
    top:-180px;
    left:-100px;
}

.vx-recording-hero{
    margin-bottom:120px;
}

.vx-recording-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.22);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-recording-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-recording-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-recording-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
    max-width:580px;
}

.vx-recording-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-recording-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-recording-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-recording-dashboard{
    background:linear-gradient(180deg,#0e1427,#0a0e1d);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:35px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-recording-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-recording-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-recording-header span{
    color:#8f98ba;
    font-size:14px;
}

.vx-recording-status{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-recording-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.vx-recording-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:#11172b;
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.06);
    padding:22px;
}

.vx-recording-icon{
    width:65px;
    height:65px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:26px;
}

.vx-recording-info{
    flex:1;
}

.vx-recording-info h5{
    color:#fff;
    font-size:20px;
    margin-bottom:6px;
}

.vx-recording-info p{
    color:#97a0c3;
    margin:0;
}

.vx-recording-time{
    color:#4ade80;
    font-size:14px;
    font-weight:600;
}

.vx-recording-benefits{
    margin-bottom:120px;
}

.vx-recording-benefits-header{
    margin-bottom:60px;
}

.vx-recording-benefits-header h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin:24px 0;
}

.vx-recording-benefits-header p{
    color:#97a0c3;
    max-width:700px;
    margin:auto;
    line-height:1.9;
}

.vx-recording-feature-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    height:100%;
}

.vx-recording-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-recording-feature-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-recording-feature-card p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-recording-workflow{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:36px;
    border:1px solid rgba(255,255,255,0.06);
    padding:70px 50px;
}

.vx-recording-workflow-header{
    margin-bottom:60px;
}

.vx-recording-workflow-header h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin-top:24px;
}

.vx-recording-flow-card{
    text-align:center;
}

.vx-recording-flow-icon{
    width:90px;
    height:90px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c78ff;
    font-size:34px;
    margin:auto;
    margin-bottom:24px;
}

.vx-recording-flow-card h4{
    color:#fff;
    font-size:24px;
    margin-bottom:15px;
}

.vx-recording-flow-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-recording-arrow{
    font-size:42px;
    color:#7b4dff;
    text-align:center;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .vx-recording-title{
        font-size:48px;
    }

    .vx-recording-dashboard{
        margin-top:40px;
    }

    .vx-recording-benefits-header h2,
    .vx-recording-workflow-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-recording-section{
        padding:80px 0;
    }

    .vx-recording-title{
        font-size:38px;
    }

    .vx-recording-dashboard{
        padding:24px;
    }

    .vx-recording-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .vx-recording-workflow{
        padding:50px 24px;
    }

    .vx-recording-benefits-header h2,
    .vx-recording-workflow-header h2{
        font-size:30px;
    }

    .vx-recording-buttons{
        flex-direction:column;
    }

    .vx-recording-primary-btn,
    .vx-recording-secondary-btn{
        width:100%;
        text-align:center;
    }

}

/* -============================== AI AUTOMATION=================================== */


/* =========================================
   AI AUTOMATION PAGE CSS
========================================= */

.vx-ai-section{
    position:relative;
    padding:120px 0;
    background:#060816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-ai-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(123,77,255,0.10);
    filter:blur(120px);
    top:-150px;
    right:-100px;
}

.vx-ai-hero{
    margin-bottom:120px;
}

.vx-ai-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-ai-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-ai-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-ai-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
    max-width:580px;
}

.vx-ai-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-ai-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-ai-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-ai-dashboard{
    background:linear-gradient(180deg,#0e1427,#0a0e1d);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:35px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-ai-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-ai-dashboard-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-ai-dashboard-header span{
    color:#8f98ba;
    font-size:14px;
}

.vx-ai-live{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-ai-flow{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.vx-ai-flow-item{
    display:flex;
    align-items:center;
    gap:18px;
    background:#11172b;
    border-radius:22px;
    border:1px solid rgba(255,255,255,0.06);
    padding:22px;
}

.vx-ai-flow-icon{
    width:65px;
    height:65px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:26px;
}

.vx-ai-flow-text h5{
    color:#fff;
    font-size:20px;
    margin-bottom:6px;
}

.vx-ai-flow-text p{
    color:#97a0c3;
    margin:0;
}

.vx-ai-arrow{
    text-align:center;
    color:#7b4dff;
    font-size:28px;
    font-weight:700;
}

.vx-ai-benefits{
    margin-bottom:120px;
}

.vx-ai-benefits-header{
    margin-bottom:60px;
}

.vx-ai-benefits-header h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin:24px 0;
}

.vx-ai-benefits-header p{
    color:#97a0c3;
    max-width:700px;
    margin:auto;
    line-height:1.9;
}

.vx-ai-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    height:100%;
}

.vx-ai-card-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-ai-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-ai-card p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-ai-bottom{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:36px;
    border:1px solid rgba(255,255,255,0.06);
    padding:70px 50px;
}

.vx-ai-bottom-content h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin:24px 0;
}

.vx-ai-bottom-content p{
    color:#97a0c3;
    line-height:1.9;
    margin-bottom:28px;
}

.vx-ai-list{
    list-style:none;
    padding:0;
    margin:0;
}

.vx-ai-list li{
    display:flex;
    align-items:center;
    gap:12px;
    color:#d7def7;
    margin-bottom:18px;
    font-size:17px;
}

.vx-ai-list i{
    color:#7b4dff;
}

.vx-ai-stats{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.vx-ai-stat-card{
    background:#11172b;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.06);
    padding:30px;
}

.vx-ai-stat-card h3{
    color:#fff;
    font-size:28px;
    margin-bottom:16px;
}

.vx-ai-stat-card p{
    color:#97a0c3;
    line-height:1.8;
    margin:0;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .vx-ai-title{
        font-size:48px;
    }

    .vx-ai-dashboard{
        margin-top:40px;
    }

    .vx-ai-benefits-header h2,
    .vx-ai-bottom-content h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-ai-section{
        padding:80px 0;
    }

    .vx-ai-title{
        font-size:38px;
    }

    .vx-ai-dashboard{
        padding:24px;
    }

    .vx-ai-flow-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .vx-ai-benefits-header h2,
    .vx-ai-bottom-content h2{
        font-size:30px;
    }

    .vx-ai-bottom{
        padding:50px 24px;
    }

    .vx-ai-buttons{
        flex-direction:column;
    }

    .vx-ai-primary-btn,
    .vx-ai-secondary-btn{
        width:100%;
        text-align:center;
    }

}


/* ============================ WHITE LABEL APIs================================ */

/* =========================================
   WHITE LABEL APIs PAGE CSS
========================================= */

.vx-wlapi-section{
    position:relative;
    padding:120px 0;
    background:#060816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-wlapi-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(123,77,255,0.10);
    filter:blur(120px);
    top:-180px;
    right:-120px;
}

.vx-wlapi-hero{
    margin-bottom:120px;
}

.vx-wlapi-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.12);
    border:1px solid rgba(123,77,255,0.22);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-wlapi-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-wlapi-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-wlapi-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
    max-width:580px;
}

.vx-wlapi-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-wlapi-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-wlapi-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-wlapi-dashboard{
    background:linear-gradient(180deg,#0e1427,#0a0e1d);
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.06);
    padding:35px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-wlapi-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-wlapi-dashboard-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-wlapi-dashboard-header span{
    color:#8f98ba;
    font-size:14px;
}

.vx-wlapi-status{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-wlapi-api-card{
    background:#11172b;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.06);
    padding:28px;
    height:100%;
}

.vx-wlapi-api-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:28px;
    margin-bottom:22px;
}

.vx-wlapi-api-card h5{
    color:#fff;
    font-size:22px;
    margin-bottom:14px;
}

.vx-wlapi-api-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-wlapi-business{
    margin-bottom:120px;
}

.vx-wlapi-business-header{
    margin-bottom:60px;
}

.vx-wlapi-business-header h2{
    font-size:52px;
    font-weight:800;
    color:#fff;
    margin:24px 0;
}

.vx-wlapi-business-header p{
    color:#97a0c3;
    max-width:700px;
    margin:auto;
    line-height:1.9;
}

.vx-wlapi-step-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    text-align:center;
    height:100%;
}

.vx-wlapi-step-icon{
    width:85px;
    height:85px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9c78ff;
    font-size:34px;
    margin:auto;
    margin-bottom:24px;
}

.vx-wlapi-step-card h4{
    color:#fff;
    margin-bottom:16px;
    font-size:24px;
}

.vx-wlapi-step-card p{
    color:#97a0c3;
    line-height:1.8;
}

.vx-wlapi-feature-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.06);
    padding:38px;
    height:100%;
}

.vx-wlapi-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-wlapi-feature-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-wlapi-feature-card p{
    color:#97a0c3;
    line-height:1.9;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .vx-wlapi-title{
        font-size:48px;
    }

    .vx-wlapi-dashboard{
        margin-top:40px;
    }

    .vx-wlapi-business-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-wlapi-section{
        padding:80px 0;
    }

    .vx-wlapi-title{
        font-size:38px;
    }

    .vx-wlapi-dashboard{
        padding:24px;
    }

    .vx-wlapi-business-header h2{
        font-size:30px;
    }

    .vx-wlapi-buttons{
        flex-direction:column;
    }

    .vx-wlapi-primary-btn,
    .vx-wlapi-secondary-btn{
        width:100%;
        text-align:center;
    }

}


/* ============================= BUSINESS & MARKETING ============================== */

/* =========================================
   BUSINESS & MARKETING PAGE
========================================= */

.vx-business-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-business-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.10);
    filter:blur(140px);
    border-radius:50%;
    top:-200px;
    right:-120px;
}

/* HERO */

.vx-business-hero{
    margin-bottom:120px;
}

.vx-business-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-business-title{
    font-size:68px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-business-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-business-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    max-width:580px;
}

.vx-business-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-business-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-business-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* DASHBOARD */

.vx-business-dashboard{
    background:linear-gradient(180deg,#0f1426,#0b0f1d);
    border-radius:32px;
    padding:35px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-business-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-business-dashboard-header h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-business-dashboard-header span{
    color:#8d97ba;
    font-size:14px;
}

.vx-business-live{
    background:rgba(34,197,94,0.10);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-business-feature-card{
    background:#11172b;
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(255,255,255,0.05);
    height:100%;
}

.vx-business-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:28px;
    margin-bottom:22px;
}

.vx-business-feature-card h5{
    color:#fff;
    font-size:22px;
    margin-bottom:12px;
}

.vx-business-feature-card p{
    color:#97a0c3;
    line-height:1.7;
}

/* SECTION HEADING */

.vx-business-section-heading h2{
    font-size:48px;
    color:#fff;
    font-weight:800;
    margin-bottom:24px;
}

.vx-business-section-heading p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

/* PROBLEM */

.vx-business-why{
    margin-bottom:120px;
}

.vx-business-problems{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.vx-business-problem-card{
    background:#0f1426;
    border:1px solid rgba(255,255,255,0.05);
    padding:24px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:16px;
    color:#fff;
    font-weight:500;
}

.vx-business-problem-card i{
    color:#ff5b7d;
    font-size:22px;
}

/* FLOW */

.vx-business-flow{
    margin-bottom:120px;
}

.vx-business-flow-header{
    margin-bottom:60px;
}

.vx-business-flow-header h2{
    font-size:52px;
    font-weight:800;
    color:#fff;
    margin:22px 0;
}

.vx-business-flow-header p{
    color:#97a0c3;
    max-width:760px;
    margin:auto;
    line-height:1.9;
}

.vx-business-step-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    text-align:center;
    height:100%;
}

.vx-business-step-icon{
    width:85px;
    height:85px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:34px;
    margin:auto auto 24px;
}

.vx-business-step-card h4{
    color:#fff;
    margin-bottom:16px;
    font-size:24px;
}

.vx-business-step-card p{
    color:#97a0c3;
    line-height:1.8;
}

/* OUTCOMES */

.vx-business-outcomes{
    margin-bottom:120px;
}

.vx-business-outcome-card{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    height:100%;
}

.vx-business-outcome-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-business-outcome-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-business-outcome-card p{
    color:#97a0c3;
    line-height:1.9;
}

/* TRUST */

.vx-business-trust{
    margin-bottom:120px;
}

.vx-business-trust-card{
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:40px 20px;
    text-align:center;
}

.vx-business-trust-card h3{
    color:#fff;
    font-size:34px;
    font-weight:800;
    margin-bottom:14px;
}

.vx-business-trust-card p{
    color:#97a0c3;
}

/* PRICING */

.vx-business-plan-card{
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:35px;
    text-align:center;
}

.vx-business-plan-card.active{
    border:1px solid #7b4dff;
    box-shadow:0 0 30px rgba(123,77,255,0.15);
}

.vx-business-plan-card h4{
    color:#fff;
    font-size:28px;
    margin-bottom:12px;
}

.vx-business-plan-card p{
    color:#97a0c3;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-business-title{
        font-size:48px;
    }

    .vx-business-section-heading h2,
    .vx-business-flow-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-business-page{
        padding:80px 0;
    }

    .vx-business-title{
        font-size:38px;
    }

    .vx-business-buttons{
        flex-direction:column;
    }

    .vx-business-primary-btn,
    .vx-business-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-business-dashboard{
        padding:24px;
    }

    .vx-business-section-heading h2,
    .vx-business-flow-header h2{
        font-size:30px;
    }

}


/* ======================= EDUCATION & HEALTHCARE =================================== */

/* =========================================
   EDUCATION & HEALTHCARE PAGE
========================================= */

.vx-edu-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-edu-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.10);
    filter:blur(140px);
    border-radius:50%;
    top:-200px;
    right:-120px;
}

/* HERO */

.vx-edu-hero{
    margin-bottom:120px;
}

.vx-edu-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-edu-title{
    font-size:66px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-edu-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-edu-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    max-width:580px;
}

.vx-edu-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-edu-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-edu-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* DASHBOARD */

.vx-edu-dashboard{
    background:linear-gradient(180deg,#0f1426,#0b0f1d);
    border-radius:32px;
    padding:35px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-edu-dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-edu-dashboard-top h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-edu-dashboard-top span{
    color:#8d97ba;
    font-size:14px;
}

.vx-edu-live{
    background:rgba(34,197,94,0.10);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-edu-card{
    background:#11172b;
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(255,255,255,0.05);
    height:100%;
}

.vx-edu-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:28px;
    margin-bottom:22px;
}

.vx-edu-card h5{
    color:#fff;
    font-size:22px;
    margin-bottom:12px;
}

.vx-edu-card p{
    color:#97a0c3;
    line-height:1.7;
}

/* WHY */

.vx-edu-why{
    margin-bottom:120px;
}

.vx-edu-heading h2{
    font-size:48px;
    color:#fff;
    font-weight:800;
    margin-bottom:24px;
}

.vx-edu-heading p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

.vx-edu-problems{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.vx-edu-problem-card{
    background:#0f1426;
    border:1px solid rgba(255,255,255,0.05);
    padding:24px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:16px;
    color:#fff;
    font-weight:500;
}

.vx-edu-problem-card i{
    color:#ff5b7d;
    font-size:22px;
}

/* FLOW */

.vx-edu-flow{
    margin-bottom:120px;
}

.vx-edu-flow-header{
    margin-bottom:60px;
}

.vx-edu-flow-header h2{
    font-size:52px;
    font-weight:800;
    color:#fff;
    margin:22px 0;
}

.vx-edu-flow-header p{
    color:#97a0c3;
    max-width:760px;
    margin:auto;
    line-height:1.9;
}

.vx-edu-step-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    text-align:center;
    height:100%;
}

.vx-edu-step-icon{
    width:85px;
    height:85px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:34px;
    margin:auto auto 24px;
}

.vx-edu-step-card h4{
    color:#fff;
    margin-bottom:16px;
    font-size:24px;
}

.vx-edu-step-card p{
    color:#97a0c3;
    line-height:1.8;
}

/* FEATURES */

.vx-edu-features{
    margin-bottom:120px;
}

.vx-edu-feature-box{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    height:100%;
}

.vx-edu-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-edu-feature-box h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-edu-feature-box p{
    color:#97a0c3;
    line-height:1.9;
}

/* INDUSTRIES */

.vx-edu-industries{
    margin-bottom:50px;
}

.vx-edu-industry-card{
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:40px 20px;
    text-align:center;
    height:100%;
}

.vx-edu-industry-card i{
    color:#9b78ff;
    font-size:42px;
    margin-bottom:22px;
}

.vx-edu-industry-card h4{
    color:#fff;
    font-size:24px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-edu-title{
        font-size:48px;
    }

    .vx-edu-heading h2,
    .vx-edu-flow-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-edu-page{
        padding:80px 0;
    }

    .vx-edu-title{
        font-size:38px;
    }

    .vx-edu-buttons{
        flex-direction:column;
    }

    .vx-edu-primary-btn,
    .vx-edu-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-edu-dashboard{
        padding:24px;
    }

    .vx-edu-heading h2,
    .vx-edu-flow-header h2{
        font-size:30px;
    }

}

/* ========================= PEROSNAL & SMALL BUSINESS=============================== */

/* =========================================
   PERSONAL & SMALL BUSINESS PAGE
========================================= */

.vx-smallbiz-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-smallbiz-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.10);
    filter:blur(140px);
    border-radius:50%;
    top:-200px;
    right:-120px;
}

/* HERO */

.vx-smallbiz-hero{
    margin-bottom:120px;
}

.vx-smallbiz-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-smallbiz-title{
    font-size:66px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-smallbiz-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-smallbiz-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    max-width:580px;
}

.vx-smallbiz-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-smallbiz-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-smallbiz-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* DASHBOARD */

.vx-smallbiz-dashboard{
    background:linear-gradient(180deg,#0f1426,#0b0f1d);
    border-radius:32px;
    padding:35px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-smallbiz-dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.vx-smallbiz-dashboard-top h4{
    color:#fff;
    font-size:24px;
    margin-bottom:5px;
}

.vx-smallbiz-dashboard-top span{
    color:#8d97ba;
    font-size:14px;
}

.vx-smallbiz-live{
    background:rgba(34,197,94,0.10);
    color:#4ade80;
    padding:10px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.vx-smallbiz-card{
    background:#11172b;
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(255,255,255,0.05);
    height:100%;
}

.vx-smallbiz-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:28px;
    margin-bottom:22px;
}

.vx-smallbiz-card h5{
    color:#fff;
    font-size:22px;
    margin-bottom:12px;
}

.vx-smallbiz-card p{
    color:#97a0c3;
    line-height:1.7;
}

/* WHY */

.vx-smallbiz-why{
    margin-bottom:120px;
}

.vx-smallbiz-heading h2{
    font-size:48px;
    color:#fff;
    font-weight:800;
    margin-bottom:24px;
}

.vx-smallbiz-heading p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

.vx-smallbiz-problems{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.vx-smallbiz-problem-card{
    background:#0f1426;
    border:1px solid rgba(255,255,255,0.05);
    padding:24px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:16px;
    color:#fff;
    font-weight:500;
}

.vx-smallbiz-problem-card i{
    color:#ff5b7d;
    font-size:22px;
}

/* FLOW */

.vx-smallbiz-flow{
    margin-bottom:120px;
}

.vx-smallbiz-flow-header{
    margin-bottom:60px;
}

.vx-smallbiz-flow-header h2{
    font-size:52px;
    font-weight:800;
    color:#fff;
    margin:22px 0;
}

.vx-smallbiz-flow-header p{
    color:#97a0c3;
    max-width:760px;
    margin:auto;
    line-height:1.9;
}

.vx-smallbiz-step-card{
    background:linear-gradient(180deg,#0d1327,#090d1b);
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    text-align:center;
    height:100%;
}

.vx-smallbiz-step-icon{
    width:85px;
    height:85px;
    border-radius:24px;
    background:rgba(123,77,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:34px;
    margin:auto auto 24px;
}

.vx-smallbiz-step-card h4{
    color:#fff;
    margin-bottom:16px;
    font-size:24px;
}

.vx-smallbiz-step-card p{
    color:#97a0c3;
    line-height:1.8;
}

/* FEATURES */

.vx-smallbiz-features{
    margin-bottom:120px;
}

.vx-smallbiz-feature-box{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    height:100%;
}

.vx-smallbiz-feature-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-smallbiz-feature-box h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-smallbiz-feature-box p{
    color:#97a0c3;
    line-height:1.9;
}

/* INDUSTRIES */

.vx-smallbiz-industries{
    margin-bottom:50px;
}

.vx-smallbiz-industry-card{
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:40px 20px;
    text-align:center;
    height:100%;
}

.vx-smallbiz-industry-card i{
    color:#9b78ff;
    font-size:42px;
    margin-bottom:22px;
}

.vx-smallbiz-industry-card h4{
    color:#fff;
    font-size:24px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-smallbiz-title{
        font-size:48px;
    }

    .vx-smallbiz-heading h2,
    .vx-smallbiz-flow-header h2{
        font-size:38px;
    }

}

@media(max-width:767px){

    .vx-smallbiz-page{
        padding:80px 0;
    }

    .vx-smallbiz-title{
        font-size:38px;
    }

    .vx-smallbiz-buttons{
        flex-direction:column;
    }

    .vx-smallbiz-primary-btn,
    .vx-smallbiz-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-smallbiz-dashboard{
        padding:24px;
    }

    .vx-smallbiz-heading h2,
    .vx-smallbiz-flow-header h2{
        font-size:30px;
    }

}

/* ========================== API REFRENCE ================================== */

    /* =========================================
   API REFERENCE PAGE
========================================= */

.vx-api-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-api-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.12);
    filter:blur(140px);
    border-radius:50%;
    top:-200px;
    right:-150px;
}

/* HERO */

.vx-api-hero{
    margin-bottom:120px;
}

.vx-api-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-api-title{
    font-size:66px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-api-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-api-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    max-width:580px;
}

.vx-api-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-api-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-api-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* DASHBOARD */

.vx-api-dashboard{
    background:linear-gradient(180deg,#0f1426,#0b0f1d);
    border-radius:30px;
    border:1px solid rgba(255,255,255,0.06);
    padding:30px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-api-window-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.vx-api-dots{
    display:flex;
    gap:10px;
}

.vx-api-dots span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#7b4dff;
}

.vx-api-status{
    color:#4ade80;
    font-size:14px;
    font-weight:600;
}

.vx-api-code{
    background:#09101d;
    border-radius:24px;
    padding:30px;
    color:#b799ff;
    font-size:15px;
    line-height:2;
    overflow:auto;
}

/* SECTION HEADER */

.vx-api-section-header{
    margin-bottom:60px;
}

.vx-api-section-header h2{
    font-size:52px;
    color:#fff;
    font-weight:800;
    margin:22px 0;
}

.vx-api-section-header p{
    color:#97a0c3;
    max-width:760px;
    margin:auto;
    line-height:1.9;
}

/* FEATURES */

.vx-api-features{
    margin-bottom:120px;
}

.vx-api-card{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    height:100%;
}

.vx-api-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-api-card h4{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-api-card p{
    color:#97a0c3;
    line-height:1.9;
}

/* FLOW */

.vx-api-flow{
    margin-bottom:120px;
}

.vx-api-flow-content h2{
    font-size:48px;
    color:#fff;
    font-weight:800;
    margin-bottom:24px;
}

.vx-api-flow-content p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

.vx-api-flow-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.vx-api-step{
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:35px;
}

.vx-api-step span{
    display:inline-block;
    font-size:14px;
    color:#b799ff;
    margin-bottom:18px;
    font-weight:700;
}

.vx-api-step h4{
    color:#fff;
    font-size:24px;
}

/* CTA */

.vx-api-cta{
    background:linear-gradient(135deg,#11182f,#0c1121);
    border-radius:36px;
    padding:60px;
    border:1px solid rgba(255,255,255,0.06);
}

.vx-api-cta h2{
    color:#fff;
    font-size:44px;
    font-weight:800;
    margin-bottom:20px;
}

.vx-api-cta p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-api-cta-buttons{
    display:flex;
    gap:16px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-api-title{
        font-size:48px;
    }

    .vx-api-section-header h2,
    .vx-api-flow-content h2,
    .vx-api-cta h2{
        font-size:36px;
    }

    .vx-api-cta-buttons{
        justify-content:flex-start;
        margin-top:30px;
    }

}

@media(max-width:767px){

    .vx-api-page{
        padding:80px 0;
    }

    .vx-api-title{
        font-size:38px;
    }

    .vx-api-buttons{
        flex-direction:column;
    }

    .vx-api-primary-btn,
    .vx-api-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-api-flow-box{
        grid-template-columns:1fr;
    }

    .vx-api-section-header h2,
    .vx-api-flow-content h2,
    .vx-api-cta h2{
        font-size:30px;
    }

    .vx-api-cta{
        padding:40px 24px;
    }

}

/* ------------------------- DOCUMENTATION ------------------------------------- */

/* =========================================
   DOCUMENTATION PAGE
========================================= */

.vx-docs-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-docs-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.12);
    filter:blur(140px);
    border-radius:50%;
    top:-200px;
    right:-150px;
}

/* HERO */

.vx-docs-hero{
    margin-bottom:120px;
}

.vx-docs-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.20);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-docs-title{
    font-size:66px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-docs-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-docs-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    max-width:580px;
}

.vx-docs-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-docs-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-docs-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* PANEL */

.vx-docs-panel{
    background:linear-gradient(180deg,#0f1426,#0b0f1d);
    border-radius:30px;
    border:1px solid rgba(255,255,255,0.06);
    padding:30px;
    box-shadow:0 0 40px rgba(123,77,255,0.12);
}

.vx-docs-search{
    position:relative;
    margin-bottom:30px;
}

.vx-docs-search i{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:#8d97ba;
}

.vx-docs-search input{
    width:100%;
    height:62px;
    border:none;
    outline:none;
    border-radius:18px;
    background:#0b1020;
    padding-left:55px;
    color:#fff;
}

.vx-docs-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px;
    border-radius:20px;
    background:#11172b;
    margin-bottom:16px;
    border:1px solid transparent;
}

.vx-docs-item.active{
    border-color:#7b4dff;
    background:rgba(123,77,255,0.08);
}

.vx-docs-item h5{
    color:#fff;
    font-size:20px;
    margin-bottom:8px;
}

.vx-docs-item span{
    color:#8d97ba;
    font-size:14px;
}

.vx-docs-item i{
    color:#9b78ff;
    font-size:20px;
}

/* SECTION HEADER */

.vx-docs-section-header{
    margin-bottom:60px;
}

.vx-docs-section-header h2{
    font-size:52px;
    color:#fff;
    font-weight:800;
    margin:22px 0;
}

.vx-docs-section-header p{
    color:#97a0c3;
    max-width:760px;
    margin:auto;
    line-height:1.9;
}

/* CATEGORIES */

.vx-docs-categories{
    margin-bottom:120px;
}

.vx-docs-card{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    height:100%;
}

.vx-docs-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-docs-card h4{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-docs-card p{
    color:#97a0c3;
    line-height:1.9;
}

/* QUICK START */

.vx-docs-quickstart{
    margin-bottom:120px;
}

.vx-docs-quickstart-content h2{
    font-size:48px;
    color:#fff;
    font-weight:800;
    margin-bottom:24px;
}

.vx-docs-quickstart-content p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

.vx-docs-steps{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.vx-docs-step{
    display:flex;
    gap:24px;
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:30px;
}

.vx-docs-step span{
    min-width:60px;
    height:60px;
    border-radius:18px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-weight:700;
}

.vx-docs-step h5{
    color:#fff;
    font-size:22px;
    margin-bottom:10px;
}

.vx-docs-step p{
    color:#97a0c3;
    line-height:1.8;
}

/* CTA */

.vx-docs-cta{
    background:linear-gradient(135deg,#11182f,#0c1121);
    border-radius:36px;
    padding:60px;
    border:1px solid rgba(255,255,255,0.06);
}

.vx-docs-cta h2{
    color:#fff;
    font-size:44px;
    font-weight:800;
    margin-bottom:20px;
}

.vx-docs-cta p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-docs-cta-buttons{
    display:flex;
    gap:16px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-docs-title{
        font-size:48px;
    }

    .vx-docs-section-header h2,
    .vx-docs-quickstart-content h2,
    .vx-docs-cta h2{
        font-size:36px;
    }

    .vx-docs-cta-buttons{
        justify-content:flex-start;
        margin-top:30px;
    }

}

@media(max-width:767px){

    .vx-docs-page{
        padding:80px 0;
    }

    .vx-docs-title{
        font-size:38px;
    }

    .vx-docs-buttons{
        flex-direction:column;
    }

    .vx-docs-primary-btn,
    .vx-docs-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-docs-cta{
        padding:40px 24px;
    }

    .vx-docs-section-header h2,
    .vx-docs-quickstart-content h2,
    .vx-docs-cta h2{
        font-size:30px;
    }

    .vx-docs-step{
        flex-direction:column;
    }

}


/* ========================== DEVELOPER GUIDES ============================== */

/* =========================================
   DEVELOPER GUIDE PAGE
========================================= */

.vx-dev-guide-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-dev-guide-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.12);
    filter:blur(150px);
    border-radius:50%;
    top:-200px;
    right:-120px;
}

/* HERO */

.vx-dev-hero{
    margin-bottom:120px;
}

.vx-dev-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.18);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-dev-title{
    font-size:66px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-dev-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-dev-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    max-width:580px;
}

.vx-dev-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-dev-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-dev-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* CODE PANEL */

.vx-dev-panel{
    background:#0d1224;
    border-radius:32px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 0 50px rgba(123,77,255,0.12);
}

.vx-dev-code-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 24px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.vx-dev-dots{
    display:flex;
    gap:10px;
}

.vx-dev-dots span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#7b4dff;
}

.vx-dev-code-header p{
    color:#a8b0d3;
    margin:0;
    font-size:14px;
}

.vx-dev-code-block{
    padding:40px;
    margin:0;
    color:#fff;
    font-size:18px;
    line-height:2.2;
}

/* SECTION HEADER */

.vx-dev-section-header{
    margin-bottom:60px;
}

.vx-dev-section-header h2{
    font-size:52px;
    color:#fff;
    font-weight:800;
    margin:22px 0;
}

.vx-dev-section-header p{
    color:#97a0c3;
    line-height:1.9;
    max-width:760px;
    margin:auto;
}

/* CARDS */

.vx-dev-guides{
    margin-bottom:120px;
}

.vx-dev-card{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:38px;
    height:100%;
}

.vx-dev-icon{
    width:75px;
    height:75px;
    border-radius:22px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-dev-card h4{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.vx-dev-card p{
    color:#97a0c3;
    line-height:1.9;
    margin-bottom:22px;
}

.vx-dev-card a{
    text-decoration:none;
    color:#9b78ff;
    font-weight:600;
}

.vx-dev-card a i{
    margin-left:8px;
}

/* WORKFLOW */

.vx-dev-workflow{
    margin-bottom:120px;
}

.vx-dev-workflow-content h2{
    color:#fff;
    font-size:48px;
    font-weight:800;
    margin-bottom:24px;
}

.vx-dev-workflow-content p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

.vx-dev-steps{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.vx-dev-step{
    display:flex;
    gap:24px;
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:30px;
}

.vx-dev-step span{
    min-width:60px;
    height:60px;
    border-radius:18px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-weight:700;
}

.vx-dev-step h5{
    color:#fff;
    font-size:22px;
    margin-bottom:10px;
}

.vx-dev-step p{
    color:#97a0c3;
    line-height:1.8;
}

/* CTA */

.vx-dev-cta{
    background:linear-gradient(135deg,#11182f,#0c1121);
    border-radius:36px;
    padding:60px;
    border:1px solid rgba(255,255,255,0.06);
}

.vx-dev-cta h2{
    color:#fff;
    font-size:44px;
    font-weight:800;
    margin-bottom:20px;
}

.vx-dev-cta p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-dev-cta-buttons{
    display:flex;
    gap:16px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-dev-title{
        font-size:48px;
    }

    .vx-dev-section-header h2,
    .vx-dev-workflow-content h2,
    .vx-dev-cta h2{
        font-size:36px;
    }

    .vx-dev-cta-buttons{
        justify-content:flex-start;
        margin-top:30px;
    }

}

@media(max-width:767px){

    .vx-dev-guide-page{
        padding:80px 0;
    }

    .vx-dev-title{
        font-size:38px;
    }

    .vx-dev-buttons{
        flex-direction:column;
    }

    .vx-dev-primary-btn,
    .vx-dev-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-dev-code-block{
        font-size:15px;
        padding:25px;
    }

    .vx-dev-section-header h2,
    .vx-dev-workflow-content h2,
    .vx-dev-cta h2{
        font-size:30px;
    }

    .vx-dev-step{
        flex-direction:column;
    }

    .vx-dev-cta{
        padding:40px 24px;
    }

}

/* ========================== CASE STUDIES ========================================= */

/* =========================================
   CASE STUDIES PAGE
========================================= */

.vx-case-page{
    position:relative;
    padding:120px 0;
    background:#050816;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    margin-top: 50px;
}

.vx-case-page::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(123,77,255,0.12);
    filter:blur(150px);
    border-radius:50%;
    top:-180px;
    right:-120px;
}

/* HERO */

.vx-case-hero{
    margin-bottom:120px;
}

.vx-case-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(123,77,255,0.10);
    border:1px solid rgba(123,77,255,0.18);
    color:#b799ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.vx-case-title{
    font-size:64px;
    line-height:1.1;
    font-weight:800;
    color:#fff;
    margin-bottom:24px;
}

.vx-case-title span{
    background:linear-gradient(to right,#7b4dff,#5f87ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.vx-case-description{
    color:#97a0c3;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
}

.vx-case-buttons{
    display:flex;
    gap:18px;
    margin-top:35px;
    flex-wrap:wrap;
}

.vx-case-primary-btn{
    padding:15px 32px;
    border-radius:14px;
    background:linear-gradient(135deg,#7b4dff,#5f87ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.vx-case-secondary-btn{
    padding:15px 32px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* STATS */

.vx-case-highlight{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.vx-case-stat-card{
    background:#0f1426;
    border-radius:28px;
    border:1px solid rgba(255,255,255,0.05);
    padding:40px;
}

.vx-case-stat-card h2{
    color:#9b78ff;
    font-size:48px;
    font-weight:800;
    margin-bottom:14px;
}

.vx-case-stat-card p{
    color:#97a0c3;
    line-height:1.8;
}

/* HEADER */

.vx-case-header{
    margin-bottom:60px;
}

.vx-case-header h2{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin:22px 0;
}

.vx-case-header p{
    color:#97a0c3;
    line-height:1.9;
    max-width:760px;
    margin:auto;
}

/* CASE STUDIES */

.vx-case-section{
    margin-bottom:120px;
}

.vx-case-card{
    background:#0f1426;
    border-radius:30px;
    border:1px solid rgba(255,255,255,0.05);
    padding:40px;
    height:100%;
}

.vx-case-icon{
    width:75px;
    height:75px;
    border-radius:22px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-size:30px;
    margin-bottom:24px;
}

.vx-case-category{
    display:inline-block;
    margin-bottom:16px;
    color:#b799ff;
    font-size:14px;
    font-weight:600;
}

.vx-case-card h3{
    color:#fff;
    font-size:28px;
    line-height:1.4;
    margin-bottom:20px;
}

.vx-case-card p{
    color:#97a0c3;
    line-height:1.9;
    margin-bottom:24px;
}

.vx-case-card ul{
    padding-left:18px;
    margin-bottom:28px;
}

.vx-case-card ul li{
    color:#d7def7;
    margin-bottom:12px;
}

.vx-case-card a{
    color:#9b78ff;
    text-decoration:none;
    font-weight:600;
}

.vx-case-card a i{
    margin-left:8px;
}

/* FLOW */

.vx-case-growth{
    margin-bottom:120px;
}

.vx-case-growth-content h2{
    color:#fff;
    font-size:48px;
    font-weight:800;
    margin-bottom:24px;
}

.vx-case-growth-content p{
    color:#97a0c3;
    line-height:1.9;
    font-size:17px;
}

.vx-case-flow{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.vx-case-step{
    display:flex;
    gap:24px;
    background:#0f1426;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.05);
    padding:30px;
}

.vx-case-step span{
    min-width:60px;
    height:60px;
    border-radius:18px;
    background:rgba(123,77,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b78ff;
    font-weight:700;
}

.vx-case-step h5{
    color:#fff;
    font-size:22px;
    margin-bottom:10px;
}

.vx-case-step p{
    color:#97a0c3;
    line-height:1.8;
}

/* CTA */

.vx-case-cta{
    background:linear-gradient(135deg,#11182f,#0c1121);
    border-radius:36px;
    padding:60px;
    border:1px solid rgba(255,255,255,0.06);
}

.vx-case-cta h2{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin-bottom:20px;
}

.vx-case-cta p{
    color:#97a0c3;
    line-height:1.9;
}

.vx-case-cta-buttons{
    display:flex;
    gap:16px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vx-case-title{
        font-size:48px;
    }

    .vx-case-header h2,
    .vx-case-growth-content h2,
    .vx-case-cta h2{
        font-size:36px;
    }

    .vx-case-cta-buttons{
        justify-content:flex-start;
        margin-top:30px;
    }

}

@media(max-width:767px){

    .vx-case-page{
        padding:80px 0;
    }

    .vx-case-title{
        font-size:38px;
    }

    .vx-case-highlight{
        grid-template-columns:1fr;
    }

    .vx-case-buttons{
        flex-direction:column;
    }

    .vx-case-primary-btn,
    .vx-case-secondary-btn{
        width:100%;
        text-align:center;
    }

    .vx-case-header h2,
    .vx-case-growth-content h2,
    .vx-case-cta h2{
        font-size:30px;
    }

    .vx-case-step{
        flex-direction:column;
    }

    .vx-case-cta{
        padding:40px 24px;
    }

}

/* ============================= BOOK A DEMO==================================== */






/* =========================
   BACKGROUND
========================== */

.demo-page{
  position:relative;
  min-height:100vh;
  padding:120px 0;
  background:
  radial-gradient(circle at top left,#6d3df000 0%, transparent 30%),
  radial-gradient(circle at bottom right,#6d3df01c 0%, transparent 30%),
  linear-gradient(135deg,#050816 0%, #081224 40%, #050816 100%);
  overflow:hidden;
  margin-top: 50px;
}

.demo-page::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:#6d3df0;
  filter:blur(180px);
  opacity:.12;
  top:-100px;
  right:-120px;
}

.demo-page::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:#4b7bff;
  filter:blur(180px);
  opacity:.10;
  bottom:-120px;
  left:-100px;
}

/* =========================
   HEADER
========================== */

.section-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50px;
  background:rgba(255,255,255,.03);
  color:#9f7cff;
  font-size:13px;
  font-weight:600;
  margin-bottom:22px;
}

.hero-title{
  font-size:58px;
  line-height:1.1;
  font-weight:800;
  margin-bottom:24px;
  letter-spacing:-2px;
}

.hero-title span{
  background:linear-gradient(to right,#8d63ff,#5d8cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-desc{
  color:#9aa4bf;
  font-size:18px;
  line-height:1.8;
  max-width:600px;
  margin-bottom:40px;
}

/* =========================
   FORM CARD
========================== */

.demo-card{
  background:rgba(10,16,35,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:45px;
  backdrop-filter:blur(18px);
  box-shadow:
  0 10px 40px rgba(0,0,0,.4),
  inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}

.demo-card::before{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  background:#6d3df0;
  filter:blur(120px);
  opacity:.12;
  top:-100px;
  right:-50px;
}

.card-title{
  font-size:34px;
  font-weight:800;
  margin-bottom:12px;
}

.card-subtitle{
  color:#98a2bd;
  margin-bottom:35px;
  line-height:1.7;
}

.form-label{
  color:#dbe4ff;
  font-weight:600;
  margin-bottom:10px;
  font-size:14px;
}

.form-control,
.form-select{
  background:#0b1328;
  border:1px solid rgba(255,255,255,.08);
  height:58px;
  border-radius:16px;
  color:#fff;
  padding:0 18px;
  transition:.3s;
}

.form-control:focus,
.form-select:focus{
  background:#0b1328;
  border-color:#7b57ff;
  box-shadow:0 0 0 4px rgba(123,87,255,.15);
  color:#fff;
}

textarea.form-control{
  height:140px;
  padding-top:18px;
  resize:none;
}

.submit-btn{
  width:100%;
  height:60px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#7b57ff,#5f8cff);
  color:#fff;
  font-size:17px;
  font-weight:700;
  transition:.35s;
  margin-top:10px;
}

.submit-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 30px rgba(123,87,255,.3);
}

/* =========================
   FEATURES
========================== */

.feature-list{
  margin-top:45px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.feature-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.feature-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(123,87,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8d63ff;
  font-size:20px;
  flex-shrink:0;
}

.feature-box h6{
  margin:0 0 6px;
  font-size:15px;
  font-weight:700;
}

.feature-box p{
  margin:0;
  color:#8e97b2;
  font-size:13px;
  line-height:1.6;
}

/* =========================
   RESPONSIVE
========================== */

@media(max-width:991px){

  .demo-page{
    padding:90px 0;
  }

  .hero-title{
    font-size:42px;
  }

  .hero-desc{
    font-size:16px;
  }

  .demo-card{
    margin-top:50px;
  }
}

@media(max-width:767px){

  .hero-title{
    font-size:34px;
    letter-spacing:-1px;
  }

  .demo-card{
    padding:28px;
    border-radius:24px;
  }

  .card-title{
    font-size:28px;
  }

  .feature-list{
    grid-template-columns:1fr;
  }

}


/* =========================== START FREE TRAIL ================================ */
    

a{
  text-decoration:none;
}

/* =========================
   PAGE BACKGROUND
========================== */

.trial-page{
  position:relative;
  min-height:100vh;
  padding:100px 0;
  overflow:hidden;
  background:
  radial-gradient(circle at top right,#6d3df022 0%,transparent 30%),
  radial-gradient(circle at bottom left,#4b7bff1a 0%,transparent 30%),
  linear-gradient(135deg,#050816 0%,#081224 45%,#050816 100%);
  margin-top: 70px;
}

.trial-page::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background:#6d3df0;
  filter:blur(160px);
  opacity:.12;
  top:-120px;
  right:-100px;
}

.trial-page::after{
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  background:#4b7bff;
  filter:blur(150px);
  opacity:.10;
  bottom:-100px;
  left:-80px;
}

/* =========================
   LEFT CONTENT
========================== */

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#9d7bff;
  font-size:13px;
  font-weight:600;
  margin-bottom:24px;
}

.hero-title{
  font-size:58px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-2px;
  margin-bottom:24px;
}

.hero-title span{
  background:linear-gradient(to right,#8f68ff,#5f8cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-desc{
  color:#99a4be;
  font-size:18px;
  line-height:1.8;
  max-width:570px;
  margin-bottom:40px;
}

/* =========================
   FEATURES
========================== */

.feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.feature-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:.3s;
}

.feature-box:hover{
  transform:translateY(-4px);
  border-color:rgba(123,87,255,.4);
}

.feature-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(123,87,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8d63ff;
  font-size:20px;
  flex-shrink:0;
}

.feature-box h6{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}

.feature-box p{
  font-size:13px;
  line-height:1.6;
  color:#8d98b3;
  margin:0;
}

/* =========================
   FORM CARD
========================== */

.trial-card{
  background:rgba(9,15,32,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:42px;
  backdrop-filter:blur(18px);
  box-shadow:
  0 10px 40px rgba(0,0,0,.4),
  inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}

.trial-card::before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  background:#6d3df0;
  filter:blur(120px);
  opacity:.12;
  top:-100px;
  right:-50px;
}

.card-title{
  font-size:34px;
  font-weight:800;
  margin-bottom:12px;
}

.card-subtitle{
  color:#99a4be;
  line-height:1.7;
  margin-bottom:34px;
}

/* =========================
   FORM
========================== */

.form-label{
  color:#dbe4ff;
  font-size:14px;
  font-weight:600;
  margin-bottom:10px;
}

.form-control,
.form-select{
  background:#0b1328;
  border:1px solid rgba(255,255,255,.08);
  height:58px;
  border-radius:16px;
  color:#fff;
  padding:0 18px;
  transition:.3s;
}

.form-control:focus,
.form-select:focus{
  background:#0b1328;
  border-color:#7b57ff;
  box-shadow:0 0 0 4px rgba(123,87,255,.15);
  color:#fff;
}

.submit-btn{
  width:100%;
  height:60px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#7b57ff,#5f8cff);
  color:#fff;
  font-size:17px;
  font-weight:700;
  transition:.35s;
  margin-top:10px;
}

.submit-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 30px rgba(123,87,255,.3);
}

.trial-note{
  margin-top:18px;
  color:#8893ae;
  font-size:13px;
  text-align:center;
}

/* =========================
   RESPONSIVE
========================== */

@media(max-width:991px){

  .trial-page{
    padding:80px 0;
  }

  .hero-title{
    font-size:42px;
  }

  .trial-card{
    margin-top:50px;
  }

}

@media(max-width:767px){

  .hero-title{
    font-size:34px;
    letter-spacing:-1px;
  }

  .hero-desc{
    font-size:16px;
  }

  .feature-list{
    grid-template-columns:1fr;
  }

  .trial-card{
    padding:28px;
    border-radius:24px;
  }

  .card-title{
    font-size:28px;
  }

}