:root {
    --page: #020817;
    --page2: #04112a;
    --page3: #061737;
    --surface: #091a3d;
    --surface2: #0d2451;
    --line: rgba(103, 143, 255, .18);
    --white: #f7faff;
    --copy: #c4d0e7;
    --muted: #8797b6;
    --blue: #2b8fff;
    --cyan: #28dcff;
    --purple: #765fff;
    --violet: #ae58ff;
    --green: #2ee985;
    --pink: #ff50b4;
    --orange: #ff9c36;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--white);
    font-family: "Manrope", system-ui, sans-serif;
    background:
        linear-gradient(
            180deg,
            #020817,
            #03102a 40%,
            #020817 100%
        );
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button {
    font: inherit;
}

h1,
h2,
h3,
h4,
.v5-brand {
    font-family: "Sora", system-ui, sans-serif;
}

.v5-shell {
    width: min(
        1240px,
        calc(100% - 42px)
    );
    margin: 0 auto;
}


/* HEADER */

.v5-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(93, 139, 255, .12);
    background: rgba(2, 8, 23, .90);
    backdrop-filter: blur(22px);
}

.v5-nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.v5-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.v5-brand img {
    width: 39px;
    height: 39px;
    border-radius: 11px;
    box-shadow: 0 0 26px rgba(98, 88, 255, .28);
}

.v5-brand b {
    color: #39c3ff;
}

.v5-desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.v5-desktop-nav a {
    padding: 10px 11px;
    border-radius: 10px;
    color: #c2cee3;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.v5-desktop-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
}

.v5-wa-button,
.v5-primary-wa {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border: 1px solid rgba(80, 255, 157, .50);
    border-radius: 14px;
    color: #031b0e;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    background:
        linear-gradient(
            135deg,
            #49f591,
            #14d66d
        );
    box-shadow:
        0 14px 34px
        rgba(20, 214, 109, .25);
}

.v5-mobile-nav {
    display: none;
}


/* HERO */

.v5-hero {
    position: relative;
    overflow: hidden;
    padding: 85px 0 91px;
    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(25, 139, 255, .29),
            transparent 31rem
        ),
        radial-gradient(
            circle at 96% 75%,
            rgba(163, 57, 255, .27),
            transparent 31rem
        ),
        linear-gradient(
            135deg,
            #020b21,
            #051a45 55%,
            #0a1640
        );
}

.v5-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .30;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        );
    background-size: 60px 60px;
}

.v5-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.v5-orb-one {
    width: 500px;
    height: 500px;
    right: -170px;
    top: -170px;
    background:
        radial-gradient(
            circle,
            rgba(26, 180, 255, .28),
            transparent 70%
        );
}

.v5-orb-two {
    width: 460px;
    height: 460px;
    right: 22%;
    bottom: -330px;
    background:
        radial-gradient(
            circle,
            rgba(166, 60, 255, .28),
            transparent 72%
        );
}

.v5-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        minmax(0, .92fr)
        minmax(520px, 1.08fr);
    align-items: center;
    gap: 60px;
}

.v5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #8ddfff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.v5-eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2adfff;
    box-shadow: 0 0 15px #2adfff;
}

.v5-hero h1 {
    max-width: 690px;
    margin: 20px 0 24px;
    font-size: clamp(50px, 5.2vw, 78px);
    line-height: .99;
    letter-spacing: -.055em;
}

.v5-hero h1 em,
.v5-hero h1 strong {
    font-style: normal;
}

.v5-hero h1 em {
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #36dfff,
            #548fff 42%,
            #ac5cff
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.v5-hero h1 strong {
    color: transparent;
    background:
        linear-gradient(
            90deg,
            #da9eff,
            #8979ff,
            #45d8ff
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.v5-hero-copy > p {
    max-width: 650px;
    margin: 0;
    color: var(--copy);
    font-size: 16px;
    line-height: 1.72;
}

.v5-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.v5-primary-wa,
.v5-outline-button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 21px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

.v5-outline-button {
    color: #f3f7ff;
    border: 1px solid rgba(121, 157, 255, .38);
    background: rgba(7, 21, 54, .72);
}

.v5-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 26px;
    color: #aebbd2;
    font-size: 11px;
    font-weight: 700;
}

.v5-hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v5-hero-proof i {
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-size: 9px;
    font-style: normal;
    background:
        linear-gradient(
            135deg,
            #258fff,
            #745eff
        );
}


/* HERO VISUAL */

.v5-hero-scene {
    position: relative;
    min-height: 590px;
}

.v5-big-orbit {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -10px;
    top: 10px;
    border: 1px solid rgba(82, 134, 255, .22);
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(61, 97, 255, .12),
        inset 0 0 80px rgba(133, 64, 255, .06);
}

.v5-big-orbit::before,
.v5-big-orbit::after {
    content: "";
    position: absolute;
    inset: 49px;
    border: 1px solid rgba(180, 70, 255, .17);
    border-radius: 50%;
}

.v5-big-orbit::after {
    inset: 103px;
    border-color: rgba(33, 220, 255, .14);
}

.v5-laptop {
    position: absolute;
    width: 94%;
    right: -1%;
    top: 49px;
    z-index: 3;
    transform:
        perspective(1200px)
        rotateY(-5deg);
}

.v5-laptop-frame {
    overflow: hidden;
    border: 2px solid #172756;
    border-radius: 23px;
    background: #07152e;
    box-shadow:
        0 38px 90px rgba(0,0,0,.45),
        0 0 60px rgba(51, 108, 255, .17);
}

.v5-laptop-top {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(4, 13, 32, .82);
}

.v5-mini-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 800;
}

.v5-mini-logo span {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #238dff,
            #7158ff
        );
}

.v5-window-dots {
    display: flex;
    gap: 5px;
}

.v5-window-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #607195;
}

.v5-dashboard-layout {
    display: grid;
    grid-template-columns:
        108px
        minmax(0, 1fr);
    min-height: 358px;
}

.v5-dashboard-layout aside {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 17px 9px;
    border-right: 1px solid rgba(255,255,255,.06);
    color: #7686a5;
    font-size: 9px;
    font-weight: 700;
}

.v5-dashboard-layout aside span,
.v5-dashboard-layout aside strong {
    padding: 9px 8px;
    border-radius: 8px;
}

.v5-dashboard-layout aside strong {
    color: #d8edff;
    background:
        linear-gradient(
            135deg,
            rgba(35, 140, 255, .25),
            rgba(115, 80, 255, .19)
        );
}

.v5-dashboard-main {
    padding: 23px 21px;
}

.v5-dashboard-main > small {
    color: #53dfff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
}

.v5-dashboard-main h3 {
    max-width: 350px;
    margin: 8px 0 17px;
    font-size: 22px;
    line-height: 1.2;
}

.v5-metrics {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 8px;
}

.v5-metrics article {
    padding: 11px;
    border: 1px solid rgba(111, 151, 255, .16);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(18, 42, 93, .88),
            rgba(9, 26, 61, .88)
        );
}

.v5-metrics span,
.v5-metrics em {
    display: block;
    color: #8292b2;
    font-size: 8px;
}

.v5-metrics strong {
    display: block;
    margin: 6px 0 3px;
    font-size: 15px;
}

.v5-metrics em {
    color: #4ceaa0;
    font-style: normal;
}

.v5-chart {
    width: 100%;
    height: 128px;
    margin-top: 15px;
}

.v5-laptop-base {
    width: 108%;
    height: 17px;
    margin-left: -4%;
    border-radius:
        0 0 55% 55%;
    background:
        linear-gradient(
            180deg,
            #334365,
            #0d1425
        );
    box-shadow:
        0 15px 30px rgba(0,0,0,.30);
}

.v5-phone {
    position: absolute;
    z-index: 6;
    width: 198px;
    left: -15px;
    bottom: 1px;
    padding: 17px 13px 14px;
    border: 5px solid #0a1227;
    border-radius: 30px;
    background:
        linear-gradient(
            160deg,
            #102d6d,
            #07152f
        );
    box-shadow:
        0 28px 75px rgba(0,0,0,.48),
        0 0 44px rgba(63, 104, 255, .16);
}

.v5-phone-notch {
    width: 56px;
    height: 6px;
    margin: -6px auto 12px;
    border-radius: 99px;
    background: #050915;
}

.v5-phone-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v5-phone-head > span {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #258fff,
            #705aff
        );
    font-size: 10px;
    font-weight: 900;
}

.v5-phone-head > div {
    display: grid;
}

.v5-phone-head strong {
    font-size: 9px;
}

.v5-phone-head small {
    color: #57eda0;
    font-size: 7px;
}

.v5-chat {
    margin-top: 9px;
    padding: 9px;
    border-radius: 11px;
    font-size: 8px;
    line-height: 1.45;
}

.v5-chat.ai {
    margin-right: 13px;
    color: #cfdaed;
    background: rgba(57, 84, 146, .51);
}

.v5-chat.user {
    margin-left: 15px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #3975f6,
            #775af2
        );
}

.v5-phone > a {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
    border-radius: 9px;
    color: #03190d;
    text-decoration: none;
    background:
        linear-gradient(
            135deg,
            #45f28f,
            #14d66d
        );
    font-size: 8px;
    font-weight: 900;
}

.v5-hero-automation {
    position: absolute;
    z-index: 7;
    right: -22px;
    bottom: 23px;
    width: 220px;
    padding: 16px;
    border: 1px solid rgba(158, 96, 255, .32);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 40, 91, .98),
            rgba(14, 21, 59, .98)
        );
    box-shadow:
        0 26px 65px rgba(0,0,0,.35),
        0 0 33px rgba(132, 73, 255, .12);
}

.v5-hero-automation > span {
    display: block;
    margin-bottom: 8px;
    color: #a8c8ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .13em;
}

.v5-hero-automation div {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #d4def0;
    font-size: 9px;
    font-weight: 700;
}

.v5-hero-automation i {
    color: #4bf1a1;
    font-style: normal;
}

.v5-hero-side-card {
    position: absolute;
    z-index: 5;
    right: -30px;
    top: 172px;
    display: grid;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid rgba(69, 221, 255, .28);
    border-radius: 13px;
    background: rgba(6, 22, 55, .92);
    box-shadow:
        0 20px 45px rgba(0,0,0,.28),
        0 0 28px rgba(36, 204, 255, .09);
}

.v5-hero-side-card strong {
    font-size: 9px;
}

.v5-hero-side-card span {
    color: #7f91b0;
    font-size: 7px;
}


/* TRUST */

.v5-trust {
    border-top: 1px solid rgba(84, 134, 255, .10);
    border-bottom: 1px solid rgba(84, 134, 255, .12);
    background:
        linear-gradient(
            90deg,
            #06152f,
            #0a214d,
            #06152f
        );
}

.v5-trust-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px 27px;
}

.v5-trust span {
    color: #aab7cf;
    font-size: 10px;
    font-weight: 800;
}

.v5-trust span::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 7px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #2cdfff,
            #8b62ff
        );
    box-shadow:
        0 0 12px rgba(75, 143, 255, .40);
}


/* COMMON SECTION HEADING */

.v5-section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .58fr);
    align-items: end;
    gap: 45px;
    margin-bottom: 37px;
}

.v5-section-heading h2 {
    max-width: 780px;
    margin: 13px 0 0;
    font-size: clamp(35px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.046em;
}

.v5-section-heading h2 em {
    color: transparent;
    font-style: normal;
    background:
        linear-gradient(
            90deg,
            #42dcff,
            #746eff 48%,
            #b95fff
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.v5-section-heading > p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


/* SERVICES */

.v5-services {
    position: relative;
    padding: 100px 0 105px;
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(28, 118, 255, .10),
            transparent 28rem
        ),
        radial-gradient(
            circle at 92% 74%,
            rgba(162, 67, 255, .09),
            transparent 28rem
        ),
        #03102a;
}

.v5-service-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 15px;
}

.v5-service {
    position: relative;
    min-height: 283px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid rgba(96, 139, 255, .18);
    border-radius: 20px;
    background:
        linear-gradient(
            150deg,
            rgba(16, 37, 84, .94),
            rgba(6, 18, 49, .97)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 50px rgba(0,0,0,.16);
}

.v5-service::before {
    content: "";
    position: absolute;
    width: 185px;
    height: 185px;
    right: -94px;
    top: -92px;
    border-radius: 50%;
    opacity: .18;
    background: currentColor;
}

.v5-service-icon {
    position: relative;
    z-index: 2;
    width: 51px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border: 1px solid currentColor;
    border-radius: 14px;
    color: currentColor;
    background: rgba(255,255,255,.03);
    box-shadow: 0 13px 30px rgba(0,0,0,.18);
}

.v5-service-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v5-service h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 9px;
    font-size: 17px;
    line-height: 1.24;
}

.v5-service p {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    color: #9faecc;
    font-size: 11px;
    line-height: 1.65;
}

.v5-service a {
    position: relative;
    z-index: 2;
    margin-top: auto;
    color: currentColor;
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
}

.v5-blue { color: #39a9ff; }
.v5-pink { color: #ff58b7; }
.v5-green { color: #3fe498; }
.v5-purple { color: #9669ff; }
.v5-orange { color: #ffad45; }
.v5-cyan { color: #33dce9; }
.v5-violet { color: #b56aff; }
.v5-indigo { color: #618eff; }


/* AI AUTOMATION */

.v5-ai {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background:
        radial-gradient(
            circle at 76% 45%,
            rgba(41, 125, 255, .20),
            transparent 29rem
        ),
        radial-gradient(
            circle at 92% 65%,
            rgba(160, 67, 255, .19),
            transparent 31rem
        ),
        linear-gradient(
            135deg,
            #020919,
            #06183b
        );
}

.v5-ai-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    right: -140px;
    top: -100px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(57, 135, 255, .12),
            transparent 70%
        );
}

.v5-ai-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        .88fr
        1.12fr;
    align-items: center;
    gap: 70px;
}

.v5-ai-copy h2,
.v5-web-copy h2,
.v5-nexbit-ai h2 {
    margin: 14px 0 17px;
    font-size: clamp(37px, 4.4vw, 57px);
    line-height: 1.04;
    letter-spacing: -.049em;
}

.v5-ai-copy h2 em,
.v5-web-copy h2 em,
.v5-nexbit-ai h2 em {
    color: transparent;
    font-style: normal;
    background:
        linear-gradient(
            90deg,
            #36dfff,
            #6b7aff,
            #ba5eff
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.v5-ai-copy > p,
.v5-web-copy > p,
.v5-nexbit-ai p {
    max-width: 570px;
    color: #a8b6cf;
    line-height: 1.72;
    font-size: 13px;
}

.v5-ai-list,
.v5-web-list {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 11px 17px;
    margin: 26px 0 29px;
}

.v5-ai-list span,
.v5-web-list span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #cfdaeb;
    font-size: 10px;
    font-weight: 700;
}

.v5-ai-list i,
.v5-web-list i {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    background:
        linear-gradient(
            135deg,
            #258fff,
            #765eff
        );
}

.v5-ai-scene {
    position: relative;
    min-height: 540px;
}

.v5-ai-rings {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(87, 131, 255, .25);
    border-radius: 50%;
    box-shadow:
        0 0 85px rgba(69, 97, 255, .15),
        inset 0 0 90px rgba(107, 69, 255, .07);
}

.v5-ai-rings::before,
.v5-ai-rings::after {
    content: "";
    position: absolute;
    inset: 58px;
    border: 1px solid rgba(177, 72, 255, .20);
    border-radius: 50%;
}

.v5-ai-rings::after {
    inset: 120px;
    border-color: rgba(42, 217, 255, .18);
}

.v5-ai-core {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 52%;
    width: 180px;
    transform: translate(-50%, -50%);
}

.v5-ai-head {
    position: relative;
    width: 180px;
    height: 125px;
    border: 8px solid #bfd6ff;
    border-radius: 62px;
    background:
        linear-gradient(
            135deg,
            #071530,
            #162c68
        );
    box-shadow:
        0 20px 55px rgba(25, 91, 255, .29),
        0 0 45px rgba(61, 214, 255, .18);
}

.v5-eye {
    position: absolute;
    top: 45px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2be4ff;
    box-shadow:
        0 0 19px rgba(43, 228, 255, .82);
}

.v5-eye.left {
    left: 47px;
}

.v5-eye.right {
    right: 47px;
}

.v5-ai-head > span {
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 48px;
    height: 17px;
    transform: translateX(-50%);
    border-bottom: 5px solid #747cff;
    border-radius: 50%;
}

.v5-ai-body {
    width: 135px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -5px auto 0;
    border-radius: 52px 52px 60px 60px;
    color: #5477ff;
    background:
        linear-gradient(
            145deg,
            #eff7ff,
            #9fbfff
        );
    box-shadow:
        0 22px 45px rgba(0,0,0,.24);
}

.v5-ai-body strong {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #258fff,
            #7b5cff
        );
    font-size: 12px;
}

.v5-ai-bubble,
.v5-ai-card {
    position: absolute;
    z-index: 7;
    border: 1px solid rgba(117, 153, 255, .24);
    background:
        linear-gradient(
            145deg,
            rgba(18, 39, 84, .98),
            rgba(8, 22, 54, .98)
        );
    box-shadow:
        0 22px 55px rgba(0,0,0,.31),
        0 0 24px rgba(73, 100, 255, .07);
}

.v5-ai-bubble {
    left: 50%;
    top: 22px;
    min-width: 250px;
    padding: 14px 17px;
    transform: translateX(-50%);
    border-radius: 15px;
}

.v5-ai-bubble strong,
.v5-ai-bubble span {
    display: block;
}

.v5-ai-bubble strong {
    font-size: 10px;
}

.v5-ai-bubble span {
    margin-top: 3px;
    color: #8d9dbb;
    font-size: 8px;
}

.v5-ai-card {
    min-width: 175px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 13px;
    border-radius: 13px;
}

.v5-ai-card > i {
    color: #2be1ff;
    font-style: normal;
}

.v5-ai-card > div {
    display: grid;
    gap: 3px;
}

.v5-ai-card strong {
    font-size: 9px;
}

.v5-ai-card span {
    color: #8091b1;
    font-size: 7px;
}

.v5-ai-card-one {
    left: 0;
    top: 143px;
}

.v5-ai-card-two {
    right: -3px;
    top: 166px;
}

.v5-ai-card-three {
    left: 8px;
    bottom: 97px;
}

.v5-ai-card-four {
    right: 4px;
    bottom: 76px;
}


/* WEBSITES */

.v5-websites {
    position: relative;
    overflow: hidden;
    padding: 104px 0;
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(47, 112, 255, .26),
            transparent 30rem
        ),
        radial-gradient(
            circle at 97% 78%,
            rgba(164, 63, 255, .22),
            transparent 30rem
        ),
        linear-gradient(
            135deg,
            #05132f,
            #082253
        );
}

.v5-websites-grid {
    display: grid;
    grid-template-columns:
        .86fr
        1.14fr;
    align-items: center;
    gap: 70px;
}

.v5-web-scene {
    position: relative;
    min-height: 535px;
}

.v5-web-orbit {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -10px;
    top: 15px;
    border: 1px solid rgba(90, 136, 255, .23);
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(69, 98, 255, .13),
        inset 0 0 80px rgba(143, 65, 255, .07);
}

.v5-web-laptop {
    position: absolute;
    width: 83%;
    right: 8%;
    top: 61px;
    overflow: hidden;
    border: 7px solid #111a35;
    border-radius: 19px;
    background: #fff;
    box-shadow:
        0 38px 85px rgba(0,0,0,.38),
        0 0 55px rgba(54, 103, 255, .16);
    transform:
        perspective(1100px)
        rotateY(-6deg);
}

.v5-browser-bar {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: #eaf0f9;
}

.v5-browser-bar > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b7c3d6;
}

.v5-browser-bar small {
    margin-left: auto;
    margin-right: auto;
    color: #8b98ad;
    font-size: 7px;
}

.v5-demo-website {
    min-height: 330px;
    color: #fff;
    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(65, 121, 255, .60),
            transparent 17rem
        ),
        linear-gradient(
            135deg,
            #071832,
            #122c67
        );
}

.v5-demo-nav {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.v5-demo-nav strong {
    font-size: 10px;
}

.v5-demo-nav div {
    display: flex;
    gap: 12px;
    color: #b9c8df;
    font-size: 7px;
}

.v5-demo-content {
    padding: 48px 37px;
}

.v5-demo-content small {
    color: #55d9ff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}

.v5-demo-content h3 {
    max-width: 340px;
    margin: 10px 0 10px;
    font-size: 37px;
    line-height: 1.05;
}

.v5-demo-content h3 em {
    color: #7fa2ff;
    font-style: normal;
}

.v5-demo-content p {
    max-width: 360px;
    color: #becce2;
    font-size: 9px;
    line-height: 1.62;
}

.v5-demo-content button,
.v5-web-phone button {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #278dff,
            #705cff
        );
    font-size: 8px;
    font-weight: 800;
}

.v5-web-phone {
    position: absolute;
    z-index: 7;
    width: 160px;
    right: -3px;
    bottom: 5px;
    padding: 20px 14px;
    border: 6px solid #0a132a;
    border-radius: 27px;
    background:
        linear-gradient(
            145deg,
            #102b68,
            #07162e
        );
    box-shadow:
        0 28px 60px rgba(0,0,0,.40);
}

.v5-web-phone > div {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 33px;
    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            #238dff,
            #6f5aff
        );
    font-size: 10px;
    font-weight: 900;
}

.v5-web-phone small {
    color: #58dcff;
    font-size: 7px;
    font-weight: 900;
}

.v5-web-phone h4 {
    margin: 8px 0 17px;
    font-size: 18px;
    line-height: 1.08;
}

.v5-web-benefits {
    position: absolute;
    z-index: 8;
    left: -7px;
    bottom: 6px;
    width: 190px;
    padding: 14px;
    border: 1px solid rgba(107, 151, 255, .30);
    border-radius: 15px;
    background: rgba(7, 24, 59, .97);
    box-shadow: 0 22px 55px rgba(0,0,0,.30);
}

.v5-web-benefits span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 7px 0;
    color: #d0daeb;
    font-size: 8px;
    font-weight: 700;
}

.v5-web-benefits i {
    color: #4ceba0;
    font-style: normal;
}


/* NEXBIT AI */

.v5-nexbit-ai {
    padding: 102px 0;
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(114, 76, 255, .15),
            transparent 27rem
        ),
        linear-gradient(
            135deg,
            #020817,
            #061433
        );
}

.v5-nexbit-ai-grid {
    display: grid;
    grid-template-columns:
        1fr
        1fr;
    align-items: center;
    gap: 76px;
}

.v5-ai-steps {
    display: grid;
    gap: 9px;
    margin-top: 25px;
}

.v5-ai-steps span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #bdc9dc;
    font-size: 10px;
    font-weight: 700;
}

.v5-ai-steps b {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #5bdcff;
    background: rgba(39, 114, 255, .14);
    font-size: 8px;
}

.v5-project-chat {
    padding: 24px;
    border: 1px solid rgba(109, 150, 255, .23);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 34, 75, .98),
            rgba(6, 18, 46, .99)
        );
    box-shadow:
        0 28px 75px rgba(0,0,0,.35),
        0 0 45px rgba(74, 95, 255, .08);
}

.v5-project-chat-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.v5-project-chat-head > span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #268eff,
            #735bff
        );
    font-weight: 900;
}

.v5-project-chat-head > div {
    display: grid;
    gap: 2px;
}

.v5-project-chat-head strong {
    font-size: 11px;
}

.v5-project-chat-head small {
    color: #7f90ae;
    font-size: 7px;
}

.v5-project-chat-head > i {
    margin-left: auto;
    color: #4ce99c;
    font-size: 8px;
    font-style: normal;
}

.v5-project-message {
    max-width: 79%;
    margin-top: 17px;
    padding: 12px 13px;
    border-radius: 13px;
    color: #becbe0;
    background: rgba(50, 73, 132, .36);
    font-size: 10px;
    line-height: 1.55;
}

.v5-project-message.user {
    margin-left: auto;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #3c76f7,
            #765af1
        );
}

.v5-project-input {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    padding: 0 14px;
    border: 1px solid rgba(112, 145, 215, .16);
    border-radius: 12px;
    color: #7183a2;
    background: rgba(1, 9, 26, .46);
    font-size: 9px;
}

.v5-project-input b {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #765cff;
}


/* PRODUCT */

.v5-work {
    position: relative;
    overflow: hidden;
    padding: 102px 0 108px;
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(125, 62, 255, .17),
            transparent 31rem
        ),
        linear-gradient(
            135deg,
            #06122e,
            #08204c
        );
}

.v5-work-glow {
    position: absolute;
    width: 550px;
    height: 550px;
    right: -130px;
    top: 70px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(124, 77, 255, .13),
            transparent 70%
        );
}

.v5-product {
    position: relative;
    z-index: 2;
    min-height: 450px;
    display: grid;
    grid-template-columns:
        .92fr
        1.08fr;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(109, 147, 255, .20);
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(14, 34, 77, .98),
            rgba(5, 17, 46, .99)
        );
    box-shadow:
        0 32px 80px rgba(0,0,0,.30);
}

.v5-product-copy {
    padding: 45px;
}

.v5-product-copy > span {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 8px;
    color: #c2a2ff;
    background: rgba(118, 75, 255, .14);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.v5-product h3 {
    margin: 15px 0 7px;
    font-size: 41px;
}

.v5-product h4 {
    margin: 0 0 14px;
    color: #bac7dc;
    font-size: 13px;
    line-height: 1.4;
}

.v5-product-copy p {
    max-width: 570px;
    color: #9fafc9;
    font-size: 12px;
    line-height: 1.72;
}

.v5-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 22px 0;
}

.v5-product-tags b {
    padding: 7px 9px;
    border: 1px solid rgba(116, 151, 255, .17);
    border-radius: 8px;
    color: #b6c5dc;
    background: rgba(255,255,255,.02);
    font-size: 8px;
}

.v5-product-copy > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(122, 158, 255, .28);
    border-radius: 10px;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
}

.v5-product-scene {
    position: relative;
    min-height: 450px;
}

.v5-product-orbit {
    position: absolute;
    width: 310px;
    height: 310px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(143, 92, 255, .35);
    border-radius: 50%;
    box-shadow:
        0 0 68px rgba(112, 70, 255, .23),
        inset 0 0 60px rgba(70, 118, 255, .08);
}

.v5-product-orbit::before,
.v5-product-orbit::after {
    content: "";
    position: absolute;
    inset: 39px;
    border: 1px solid rgba(79, 147, 255, .24);
    border-radius: 50%;
}

.v5-product-orbit::after {
    inset: 83px;
    border-color: rgba(197, 97, 255, .23);
}

.v5-product-core {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            #7059ff,
            #a14de8
        );
    box-shadow:
        0 22px 55px rgba(96, 69, 255, .34);
}

.v5-product-core img {
    width: 62px;
    height: 62px;
    border-radius: 16px;
}

.v5-node {
    position: absolute;
    padding: 8px 10px;
    border: 1px solid rgba(112, 150, 255, .20);
    border-radius: 9px;
    color: #b4c3da;
    background: rgba(7, 23, 56, .96);
    font-size: 8px;
    font-weight: 700;
}

.v5-node.one {
    left: 11%;
    top: 29%;
}

.v5-node.two {
    right: 17%;
    top: 20%;
}

.v5-node.three {
    right: 7%;
    bottom: 28%;
}

.v5-node.four {
    left: 14%;
    bottom: 22%;
}

.v5-node.five {
    right: 29%;
    bottom: 9%;
}


/* PROCESS */

.v5-process {
    padding: 100px 0 105px;
    background:
        linear-gradient(
            180deg,
            #020817,
            #04122d
        );
}

.v5-process-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 14px;
}

.v5-process-grid article {
    min-height: 238px;
    padding: 22px;
    border: 1px solid rgba(96, 137, 255, .17);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 34, 75, .91),
            rgba(6, 18, 47, .95)
        );
}

.v5-process-grid article > span {
    color: #7c70ff;
    font-size: 9px;
    font-weight: 900;
}

.v5-process-grid article > div {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0;
    border-radius: 13px;
    color: #47d8ff;
    background:
        linear-gradient(
            135deg,
            rgba(37, 139, 255, .21),
            rgba(115, 81, 255, .18)
        );
    font-weight: 900;
}

.v5-process-grid h3 {
    margin: 0 0 7px;
    font-size: 15px;
}

.v5-process-grid p {
    margin: 0;
    color: #8797b4;
    font-size: 10px;
    line-height: 1.62;
}


/* FINAL CTA */

.v5-final {
    padding: 39px 0 80px;
    background: #04122d;
}

.v5-final-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: grid;
    grid-template-columns:
        1fr
        .55fr
        auto;
    align-items: center;
    gap: 35px;
    padding: 45px;
    border: 1px solid rgba(108, 153, 255, .24);
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 84% 50%,
            rgba(116, 79, 255, .32),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #08235b,
            #15155a
        );
    box-shadow:
        0 30px 75px rgba(0,0,0,.30),
        0 0 45px rgba(71, 94, 255, .12);
}

.v5-final-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    right: -120px;
    top: -80px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(45, 213, 255, .12),
            transparent 70%
        );
}

.v5-final-card > div:first-of-type {
    position: relative;
    z-index: 2;
}

.v5-final-card > div:first-of-type > span {
    color: #5addff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.v5-final h2 {
    max-width: 540px;
    margin: 10px 0 9px;
    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.v5-final h2 em {
    color: transparent;
    font-style: normal;
    background:
        linear-gradient(
            90deg,
            #47dbff,
            #786dff,
            #bc5fff
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.v5-final p {
    margin: 0;
    color: #abbad2;
    font-size: 11px;
}

.v5-final-points {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    color: #d0daeb;
    font-size: 9px;
    font-weight: 700;
}


/* FOOTER */

.v5-footer {
    padding: 48px 0;
    border-top: 1px solid rgba(93, 136, 255, .12);
    background: #020817;
}

.v5-footer-inner {
    display: grid;
    grid-template-columns:
        1fr
        1fr
        auto;
    align-items: center;
    gap: 35px;
}

.v5-footer p {
    max-width: 310px;
    margin: 10px 0 0;
    color: #7484a1;
    font-size: 9px;
    line-height: 1.55;
}

.v5-footer nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.v5-footer nav a {
    color: #9aabc4;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}

.v5-footer small {
    color: #647490;
    font-size: 8px;
}


/* FLOATING WHATSAPP */

.v5-floating-wa {
    position: fixed;
    z-index: 900;
    right: 18px;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 185px;
    padding: 10px 12px;
    transform: translateY(-50%);
    border: 1px solid rgba(47, 220, 119, .34);
    border-radius: 15px;
    color: #fff;
    text-decoration: none;
    background: rgba(5, 19, 46, .96);
    box-shadow:
        0 18px 48px rgba(0,0,0,.38),
        0 0 27px rgba(33, 218, 113, .16);
    backdrop-filter: blur(14px);
}

.v5-floating-wa > b {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: #20d875;
}

.v5-floating-wa > span {
    display: grid;
    gap: 2px;
}

.v5-floating-wa strong {
    font-size: 9px;
}

.v5-floating-wa small {
    color: #8fa0ba;
    font-size: 7px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .v5-wa-button {
        display: none;
    }

    .v5-hero-grid,
    .v5-ai-grid,
    .v5-websites-grid,
    .v5-nexbit-ai-grid {
        grid-template-columns: 1fr;
    }

    .v5-hero-copy,
    .v5-ai-copy,
    .v5-web-copy {
        max-width: 790px;
    }

    .v5-hero-scene,
    .v5-ai-scene,
    .v5-web-scene {
        width: min(100%, 760px);
        margin: 0 auto;
    }

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

    .v5-product {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 860px) {

    .v5-desktop-nav {
        display: none;
    }

    .v5-mobile-nav {
        position: relative;
        display: block;
        margin-left: auto;
    }

    .v5-mobile-nav summary {
        width: 44px;
        height: 44px;
        display: grid;
        place-content: center;
        gap: 5px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        cursor: pointer;
        list-style: none;
    }

    .v5-mobile-nav summary::-webkit-details-marker {
        display: none;
    }

    .v5-mobile-nav summary span {
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }

    .v5-mobile-nav nav {
        position: absolute;
        right: 0;
        top: 54px;
        width: 240px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 14px;
        background: #071936;
        box-shadow: 0 25px 60px rgba(0,0,0,.40);
    }

    .v5-mobile-nav nav a {
        display: block;
        padding: 10px;
        border-radius: 8px;
        color: #d3deef;
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
    }

    .v5-mobile-nav nav .v5-mobile-wa {
        margin-top: 5px;
        color: #03190e;
        background: #24d978;
    }

    .v5-section-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

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

    .v5-product {
        grid-template-columns: 1fr;
    }

    .v5-product-scene {
        min-height: 400px;
    }

    .v5-final-card {
        grid-template-columns: 1fr;
    }

    .v5-footer-inner {
        grid-template-columns: 1fr;
    }

    .v5-footer nav {
        justify-content: flex-start;
    }

}


@media (max-width: 620px) {

    .v5-shell {
        width: min(
            100% - 28px,
            1240px
        );
    }

    .v5-nav {
        min-height: 66px;
    }

    .v5-brand {
        font-size: 18px;
    }

    .v5-brand img {
        width: 34px;
        height: 34px;
    }

    .v5-hero {
        padding: 48px 0 56px;
    }

    .v5-eyebrow {
        font-size: 8px;
        letter-spacing: .10em;
    }

    .v5-hero h1 {
        margin-top: 17px;
        font-size: clamp(40px, 12vw, 53px);
        line-height: 1.01;
    }

    .v5-hero-copy > p {
        font-size: 14px;
        line-height: 1.65;
    }

    .v5-hero-actions {
        display: grid;
    }

    .v5-primary-wa,
    .v5-outline-button {
        width: 100%;
    }

    .v5-hero-proof {
        display: grid;
        grid-template-columns: 1fr;
    }

    .v5-hero-scene {
        min-height: 520px;
    }

    .v5-big-orbit {
        width: 430px;
        height: 430px;
        right: -110px;
    }

    .v5-laptop {
        width: 108%;
        right: -18%;
        top: 32px;
    }

    .v5-dashboard-layout {
        grid-template-columns:
            73px
            1fr;
        min-height: 286px;
    }

    .v5-dashboard-layout aside {
        padding: 11px 5px;
        font-size: 7px;
    }

    .v5-dashboard-layout aside span,
    .v5-dashboard-layout aside strong {
        padding: 7px 5px;
    }

    .v5-dashboard-main {
        padding: 17px 12px;
    }

    .v5-dashboard-main h3 {
        font-size: 16px;
    }

    .v5-metrics {
        gap: 5px;
    }

    .v5-metrics article {
        padding: 7px;
    }

    .v5-metrics strong {
        font-size: 10px;
    }

    .v5-chart {
        height: 88px;
    }

    .v5-phone {
        width: 173px;
        left: -2px;
    }

    .v5-hero-automation {
        width: 170px;
        right: -2px;
        padding: 12px;
    }

    .v5-hero-side-card {
        display: none;
    }

    .v5-trust-inner {
        justify-content: flex-start;
        padding: 20px 0;
    }

    .v5-services,
    .v5-ai,
    .v5-websites,
    .v5-nexbit-ai,
    .v5-work,
    .v5-process {
        padding-top: 70px;
        padding-bottom: 73px;
    }

    .v5-section-heading h2,
    .v5-ai-copy h2,
    .v5-web-copy h2,
    .v5-nexbit-ai h2 {
        font-size: clamp(31px, 9vw, 42px);
    }

    .v5-service-grid,
    .v5-process-grid {
        grid-template-columns: 1fr;
    }

    .v5-service {
        min-height: 0;
    }

    .v5-ai-list,
    .v5-web-list {
        grid-template-columns: 1fr;
    }

    .v5-ai-scene {
        min-height: 490px;
    }

    .v5-ai-rings {
        width: 390px;
        height: 390px;
    }

    .v5-ai-core {
        width: 145px;
    }

    .v5-ai-head {
        width: 145px;
        height: 104px;
        border-radius: 50px;
    }

    .v5-eye {
        top: 37px;
        width: 15px;
        height: 15px;
    }

    .v5-eye.left {
        left: 38px;
    }

    .v5-eye.right {
        right: 38px;
    }

    .v5-ai-body {
        width: 110px;
        height: 100px;
    }

    .v5-ai-bubble {
        min-width: 205px;
    }

    .v5-ai-card {
        min-width: 135px;
        padding: 10px;
    }

    .v5-ai-card-one {
        left: 0;
    }

    .v5-ai-card-two {
        right: 0;
    }

    .v5-ai-card-three {
        left: 0;
    }

    .v5-ai-card-four {
        right: 0;
    }

    .v5-web-scene {
        min-height: 500px;
    }

    .v5-web-laptop {
        width: 101%;
        right: -10%;
    }

    .v5-demo-content {
        padding: 39px 25px;
    }

    .v5-demo-content h3 {
        font-size: 29px;
    }

    .v5-web-phone {
        width: 137px;
    }

    .v5-web-benefits {
        width: 160px;
    }

    .v5-product-copy {
        padding: 28px;
    }

    .v5-product h3 {
        font-size: 34px;
    }

    .v5-floating-wa {
        top: auto;
        right: 12px;
        bottom: 12px;
        min-width: 0;
        transform: none;
        padding: 8px;
    }

    .v5-floating-wa > span {
        display: none;
    }

}


/* ================================================================
   NEXBIT_V5_FINAL_POLISH_START
   Final visual refinement
   ================================================================ */


/* HERO — more visual dominance */

.v5-hero-grid {
    grid-template-columns:
        minmax(0, .88fr)
        minmax(560px, 1.12fr);
    gap: 48px;
}

.v5-hero-scene {
    min-height: 625px;
}

.v5-big-orbit {
    width: 595px;
    height: 595px;
    right: -20px;
    top: 0;
}

.v5-laptop {
    width: 101%;
    right: -5%;
    top: 38px;
}

.v5-laptop-frame {
    box-shadow:
        0 42px 100px rgba(0,0,0,.48),
        0 0 78px rgba(43,109,255,.22),
        0 0 125px rgba(115,74,255,.10);
}

.v5-phone {
    width: 210px;
    left: -21px;
    bottom: 5px;
}

.v5-hero-automation {
    width: 232px;
    right: -31px;
    bottom: 27px;
}

.v5-hero-side-card {
    right: -35px;
    top: 158px;
}


/* SERVICE READABILITY */

.v5-service {
    min-height: 302px;
    padding: 24px;
}

.v5-service h3 {
    font-size: 18px;
}

.v5-service p {
    color: #aab8d2;
    font-size: 12px;
    line-height: 1.68;
}

.v5-service a {
    font-size: 11px;
}

.v5-service-icon {
    width: 54px;
    height: 54px;
}


/* AI AUTOMATION — larger stronger focal visual */

.v5-ai-grid {
    grid-template-columns:
        .82fr
        1.18fr;
    gap: 58px;
}

.v5-ai-scene {
    min-height: 595px;
}

.v5-ai-rings {
    width: 555px;
    height: 555px;
    box-shadow:
        0 0 105px rgba(58,96,255,.21),
        inset 0 0 105px rgba(108,68,255,.09);
}

.v5-ai-core {
    width: 205px;
}

.v5-ai-head {
    width: 205px;
    height: 141px;
    border-width: 9px;
}

.v5-eye {
    top: 51px;
    width: 20px;
    height: 20px;
}

.v5-eye.left {
    left: 55px;
}

.v5-eye.right {
    right: 55px;
}

.v5-ai-body {
    width: 153px;
    height: 135px;
}

.v5-ai-bubble {
    min-width: 285px;
    padding: 16px 19px;
}

.v5-ai-bubble strong {
    font-size: 11px;
}

.v5-ai-bubble span {
    font-size: 9px;
}

.v5-ai-card {
    min-width: 194px;
    padding: 14px 15px;
    border-color: rgba(113,159,255,.33);
    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 32px rgba(61,102,255,.12);
}

.v5-ai-card strong {
    font-size: 10px;
}

.v5-ai-card span {
    font-size: 8px;
}

.v5-ai-card-one {
    left: -12px;
    top: 150px;
}

.v5-ai-card-two {
    right: -20px;
    top: 172px;
}

.v5-ai-card-three {
    left: -3px;
    bottom: 112px;
}

.v5-ai-card-four {
    right: -10px;
    bottom: 83px;
}


/* WEBSITE SHOWCASE — more product-like */

.v5-web-scene {
    min-height: 575px;
}

.v5-web-laptop {
    width: 88%;
    right: 5%;
    top: 48px;
    box-shadow:
        0 42px 95px rgba(0,0,0,.43),
        0 0 72px rgba(50,105,255,.20);
}

.v5-web-phone {
    width: 170px;
    right: -6px;
}

.v5-web-benefits {
    width: 205px;
}


/* NEXBIT AI */

.v5-project-chat {
    padding: 27px;
}

.v5-project-message {
    font-size: 11px;
    line-height: 1.6;
}

.v5-project-input {
    min-height: 52px;
}


/* ASTROVEDIQ FINAL PRODUCT VISUAL */

.v5-product {
    min-height: 500px;
}

.v5-product-scene-final {
    min-height: 500px;
}

.v5-product-orbit {
    width: 345px;
    height: 345px;
    left: 58%;
}

.v5-product-core {
    width: 84px;
    height: 84px;
    left: 58%;
    z-index: 8;
}

.v5-product-core > span {
    font-size: 33px;
}

.v5-astro-admin {
    position: absolute;
    z-index: 5;
    width: 380px;
    left: 2%;
    top: 75px;
    overflow: hidden;
    border: 1px solid rgba(109,153,255,.29);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(14,35,80,.99),
            rgba(5,17,47,.99)
        );
    box-shadow:
        0 30px 75px rgba(0,0,0,.40),
        0 0 50px rgba(67,97,255,.13);
    transform:
        perspective(1000px)
        rotateY(5deg);
}

.v5-astro-admin-top {
    min-height: 53px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.v5-astro-logo {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #725cff,
            #ad4bea
        );
}

.v5-astro-admin-top > div {
    display: grid;
}

.v5-astro-admin-top strong {
    font-size: 9px;
}

.v5-astro-admin-top small {
    color: #8191af;
    font-size: 6px;
}

.v5-astro-admin-top > i {
    margin-left: auto;
    color: #4de99e;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
}

.v5-astro-admin-body {
    display: grid;
    grid-template-columns:
        78px
        1fr;
    min-height: 250px;
}

.v5-astro-admin-body aside {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 7px;
    border-right: 1px solid rgba(255,255,255,.05);
    color: #7384a5;
    font-size: 7px;
}

.v5-astro-admin-body aside span,
.v5-astro-admin-body aside b {
    padding: 7px 6px;
    border-radius: 7px;
}

.v5-astro-admin-body aside b {
    color: #fff;
    background: rgba(106,87,255,.19);
}

.v5-astro-admin-body > div {
    padding: 22px 16px;
}

.v5-astro-admin-body > div > small {
    color: #bf8fff;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .12em;
}

.v5-astro-admin-body h4 {
    max-width: 230px;
    margin: 8px 0 19px;
    font-size: 17px;
    line-height: 1.22;
}

.v5-astro-metrics {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 6px;
}

.v5-astro-metrics span {
    min-height: 65px;
    padding: 8px;
    border: 1px solid rgba(111,150,255,.13);
    border-radius: 9px;
    color: #7f90af;
    background: rgba(19,42,86,.65);
    font-size: 6px;
}

.v5-astro-metrics b {
    display: block;
    margin-bottom: 5px;
    color: #e9efff;
    font-size: 8px;
}

.v5-astro-phone {
    position: absolute;
    z-index: 7;
    width: 154px;
    right: 7%;
    bottom: 34px;
    padding: 17px 13px;
    border: 5px solid #0b1228;
    border-radius: 27px;
    background:
        linear-gradient(
            155deg,
            #17245e,
            #0b1536
        );
    box-shadow:
        0 28px 65px rgba(0,0,0,.43),
        0 0 38px rgba(137,65,255,.17);
}

.v5-astro-phone-notch {
    width: 49px;
    height: 5px;
    margin: -8px auto 16px;
    border-radius: 99px;
    background: #050817;
}

.v5-astro-phone-logo {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #785eff,
            #ad4dea
        );
}

.v5-astro-phone > small {
    color: #c299ff;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .11em;
}

.v5-astro-phone > h4 {
    margin: 8px 0 14px;
    font-size: 17px;
    line-height: 1.08;
}

.v5-astro-phone-card {
    padding: 10px;
    border: 1px solid rgba(146,111,255,.21);
    border-radius: 11px;
    background: rgba(74,47,143,.20);
}

.v5-astro-phone-card span,
.v5-astro-phone-card small {
    display: block;
    color: #8d9bb5;
    font-size: 6px;
}

.v5-astro-phone-card strong {
    display: block;
    margin: 4px 0;
    font-size: 8px;
}

.v5-astro-phone button {
    width: 100%;
    min-height: 31px;
    margin-top: 12px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #765cff,
            #a64fec
        );
    font-size: 7px;
    font-weight: 800;
}


/* PROCESS */

.v5-process-grid article {
    min-height: 260px;
    padding: 25px;
}

.v5-process-grid article > div {
    width: 49px;
    height: 49px;
}

.v5-process-grid h3 {
    font-size: 17px;
}

.v5-process-grid p {
    color: #93a2be;
    font-size: 11px;
}


/* FINAL CTA — fully rebuilt */

.v5-final {
    padding:
        48px
        0
        90px;
}

.v5-final-card-final {
    min-height: 310px;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(220px, .65fr)
        minmax(230px, .62fr);
    gap: 48px;
    padding:
        52px
        55px;
    background:
        radial-gradient(
            circle at 92% 50%,
            rgba(37,205,255,.18),
            transparent 23rem
        ),
        radial-gradient(
            circle at 68% 30%,
            rgba(142,77,255,.31),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #082761,
            #17145e
        );
}

.v5-final-glow-two {
    position: absolute;
    width: 360px;
    height: 360px;
    left: -120px;
    bottom: -210px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(37,145,255,.23),
            transparent 70%
        );
}

.v5-final-copy {
    position: relative;
    z-index: 2;
}

.v5-final-copy > span {
    color: #5ee1ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}

.v5-final-copy h2 {
    margin:
        11px
        0
        12px;
}

.v5-final-copy p {
    max-width: 520px;
    color: #bac7dc;
    font-size: 12px;
    line-height: 1.65;
}

.v5-final-middle {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 13px;
}

.v5-final-middle span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d8e1f0;
    font-size: 10px;
    font-weight: 700;
}

.v5-final-middle i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    background:
        linear-gradient(
            135deg,
            #258fff,
            #765eff
        );
}

.v5-final-action {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
}

.v5-final-action > small {
    margin-bottom: 10px;
    color: #72e4ff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}

.v5-final-wa {
    width: 100%;
    min-height: 58px;
    font-size: 13px;
    box-shadow:
        0 18px 45px rgba(23,218,112,.30),
        0 0 35px rgba(28,221,131,.10);
}

.v5-final-action > p {
    margin:
        11px
        0
        0;
    color: #8293b0;
    font-size: 8px;
    line-height: 1.5;
}


/* TABLET FINAL POLISH */

@media (max-width: 1100px) {

    .v5-hero-grid {
        grid-template-columns: 1fr;
    }

    .v5-hero-scene {
        width: min(100%, 790px);
    }

    .v5-ai-grid {
        grid-template-columns: 1fr;
    }

    .v5-ai-scene {
        width: min(100%, 760px);
        margin: 0 auto;
    }

    .v5-final-card-final {
        grid-template-columns:
            1fr 1fr;
    }

    .v5-final-action {
        grid-column:
            1 / -1;
        max-width: 340px;
    }

}


/* MOBILE FINAL POLISH */

@media (max-width: 620px) {

    .v5-hero-scene {
        min-height: 545px;
    }

    .v5-laptop {
        width: 112%;
        right: -21%;
    }

    .v5-phone {
        width: 178px;
    }

    .v5-hero-automation {
        width: 174px;
    }

    .v5-service {
        min-height: 0;
        padding: 22px;
    }

    .v5-service h3 {
        font-size: 18px;
    }

    .v5-service p {
        font-size: 12px;
    }

    .v5-ai-scene {
        min-height: 520px;
    }

    .v5-ai-rings {
        width: 420px;
        height: 420px;
    }

    .v5-ai-core {
        width: 155px;
    }

    .v5-ai-head {
        width: 155px;
        height: 108px;
    }

    .v5-eye {
        top: 39px;
    }

    .v5-eye.left {
        left: 41px;
    }

    .v5-eye.right {
        right: 41px;
    }

    .v5-ai-body {
        width: 116px;
        height: 103px;
    }

    .v5-ai-card {
        min-width: 139px;
    }

    .v5-web-scene {
        min-height: 520px;
    }

    .v5-product {
        min-height: 730px;
    }

    .v5-product-scene-final {
        min-height: 470px;
    }

    .v5-astro-admin {
        width: 90%;
        left: 1%;
        top: 42px;
    }

    .v5-product-orbit {
        width: 290px;
        height: 290px;
        left: 58%;
        top: 59%;
    }

    .v5-product-core {
        left: 58%;
        top: 59%;
    }

    .v5-astro-phone {
        width: 138px;
        right: 0;
        bottom: 4px;
    }

    .v5-node {
        display: none;
    }

    .v5-process-grid article {
        min-height: 0;
    }

    .v5-final-card-final {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        padding:
            34px
            24px;
    }

    .v5-final-action {
        grid-column: auto;
        max-width: none;
    }

    .v5-final-wa {
        width: 100%;
    }

}


/* NEXBIT_V5_FINAL_POLISH_END */


/* ================================================================
   NEXBIT_V5_R5C_100_PERCENT_ALIGNMENT_START
   Final reference-alignment pass
   ================================================================ */


/* ------------------------------------------------
   1. HERO — brighter, richer and visually dominant
   ------------------------------------------------ */

.v5-hero {
    padding-top: 92px;
    padding-bottom: 98px;
}

.v5-hero-grid {
    grid-template-columns:
        minmax(0, .84fr)
        minmax(585px, 1.16fr);
    gap: 42px;
}

.v5-hero-copy {
    position: relative;
    z-index: 10;
}

.v5-hero h1 {
    max-width: 650px;
}

.v5-hero-scene {
    min-height: 650px;
    transform: scale(1.025);
    transform-origin: center center;
}

.v5-big-orbit {
    width: 620px;
    height: 620px;
    right: -36px;
    top: -3px;
    border-color: rgba(70, 153, 255, .30);
    box-shadow:
        0 0 110px rgba(54, 102, 255, .18),
        inset 0 0 100px rgba(147, 67, 255, .10);
}

.v5-laptop {
    width: 104%;
    right: -6%;
    top: 33px;
}

.v5-laptop-frame {
    border-color: rgba(91, 134, 255, .35);
    box-shadow:
        0 44px 110px rgba(0,0,0,.48),
        0 0 95px rgba(45,117,255,.26),
        0 0 150px rgba(132,70,255,.12);
}

.v5-dashboard-layout {
    background: #07152e;
}

.v5-dashboard-main {
    margin: 9px;
    border-radius: 15px;
    color: #142442;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(93, 126, 255, .13),
            transparent 15rem
        ),
        linear-gradient(
            145deg,
            #f9fbff,
            #eaf1ff
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 30px rgba(0,0,0,.14);
}

.v5-dashboard-main > small {
    color: #3571dc;
}

.v5-dashboard-main h3 {
    color: #132342;
    font-size: 24px;
}

.v5-metrics article {
    border-color: #dce6f6;
    color: #142442;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f7ff
        );
    box-shadow:
        0 7px 18px
        rgba(41, 69, 127, .08);
}

.v5-metrics span {
    color: #77849a;
}

.v5-metrics strong {
    color: #142442;
    font-size: 17px;
}

.v5-metrics em {
    color: #16ad65;
    font-weight: 800;
}

.v5-chart {
    height: 136px;
}

.v5-phone {
    width: 220px;
    left: -27px;
    bottom: 0;
    color: #132442;
    border-color: #0a1327;
    background:
        linear-gradient(
            155deg,
            #ffffff,
            #eaf2ff
        );
    box-shadow:
        0 30px 80px rgba(0,0,0,.43),
        0 0 52px rgba(47,114,255,.23);
}

.v5-phone-head strong {
    color: #142442;
}

.v5-phone-head small {
    color: #18b56b;
}

.v5-chat.ai {
    color: #53617a;
    background: #e8eef9;
}

.v5-chat.user {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #3f7df8,
            #795bf3
        );
}

.v5-hero-automation {
    width: 238px;
    right: -39px;
    bottom: 25px;
    border-color: rgba(151, 93, 255, .48);
    background:
        linear-gradient(
            145deg,
            #172f6b,
            #16184c
        );
    box-shadow:
        0 28px 70px rgba(0,0,0,.39),
        0 0 45px rgba(137,75,255,.20);
}

.v5-hero-side-card {
    right: -47px;
    top: 150px;
    border-color: rgba(54, 222, 255, .43);
    box-shadow:
        0 22px 55px rgba(0,0,0,.31),
        0 0 35px rgba(38,205,255,.17);
}


/* ------------------------------------------------
   2. TRUST STRIP — stronger continuation
   ------------------------------------------------ */

.v5-trust {
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(54, 111, 255, .10),
            transparent 33rem
        ),
        linear-gradient(
            90deg,
            #06152f,
            #0a2455,
            #06152f
        );
}

.v5-trust-inner {
    min-height: 88px;
}

.v5-trust span {
    color: #c1cee3;
}


/* ------------------------------------------------
   3. SERVICES — vivid individual cards
   ------------------------------------------------ */

.v5-services {
    padding-top: 105px;
    padding-bottom: 112px;
}

.v5-service-grid {
    gap: 17px;
}

.v5-service {
    min-height: 310px;
    padding: 25px;
    border-width: 1px;
    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}

.v5-service:hover {
    transform: translateY(-7px);
}

.v5-blue {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(44, 151, 255, .29),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #0e2d63,
            #081a3e
        );
    border-color: rgba(53,169,255,.35);
}

.v5-pink {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(255, 75, 179, .27),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #34204d,
            #111a3d
        );
    border-color: rgba(255,88,183,.33);
}

.v5-green {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(59, 226, 148, .27),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #123d4c,
            #0a1f3e
        );
    border-color: rgba(63,228,152,.32);
}

.v5-purple {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(145, 96, 255, .30),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #28215d,
            #111940
        );
    border-color: rgba(150,105,255,.34);
}

.v5-orange {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(255, 171, 67, .25),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #3b2b3d,
            #101a3b
        );
    border-color: rgba(255,173,69,.30);
}

.v5-cyan {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(48, 220, 234, .29),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #123650,
            #0a1b3f
        );
    border-color: rgba(51,220,233,.33);
}

.v5-violet {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(181, 103, 255, .29),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #2d2058,
            #11183e
        );
    border-color: rgba(181,106,255,.34);
}

.v5-indigo {
    background:
        radial-gradient(
            circle at 95% 2%,
            rgba(94, 140, 255, .30),
            transparent 11rem
        ),
        linear-gradient(
            145deg,
            #172d64,
            #091a40
        );
    border-color: rgba(97,142,255,.34);
}

.v5-service-icon {
    width: 58px;
    height: 58px;
    border-width: 1px;
    background: currentColor;
    box-shadow:
        0 13px 32px rgba(0,0,0,.25),
        0 0 28px currentColor;
}

.v5-service-icon svg {
    width: 27px;
    height: 27px;
    stroke: #fff;
}

.v5-service h3 {
    font-size: 18px;
}

.v5-service p {
    color: #b8c5db;
    font-size: 12px;
}

.v5-service a {
    font-size: 11px;
}


/* ------------------------------------------------
   4. AI AUTOMATION — major focal showcase
   ------------------------------------------------ */

.v5-ai {
    padding-top: 112px;
    padding-bottom: 112px;
}

.v5-ai-grid {
    grid-template-columns:
        minmax(0, .78fr)
        minmax(590px, 1.22fr);
    gap: 50px;
}

.v5-ai-scene {
    min-height: 620px;
}

.v5-ai-rings {
    width: 585px;
    height: 585px;
    border-color: rgba(75,144,255,.31);
    box-shadow:
        0 0 125px rgba(49,106,255,.24),
        inset 0 0 115px rgba(128,71,255,.11);
}

.v5-ai-rings::before {
    border-color: rgba(181,71,255,.28);
}

.v5-ai-rings::after {
    border-color: rgba(37,222,255,.25);
}

.v5-ai-core {
    width: 220px;
}

.v5-ai-head {
    width: 220px;
    height: 151px;
    border-color: #d9ebff;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(39, 111, 255, .44),
            transparent 7rem
        ),
        linear-gradient(
            135deg,
            #07122b,
            #17377d
        );
    box-shadow:
        0 25px 65px rgba(25,91,255,.34),
        0 0 65px rgba(44,219,255,.23);
}

.v5-eye {
    top: 56px;
    width: 22px;
    height: 22px;
}

.v5-eye.left {
    left: 58px;
}

.v5-eye.right {
    right: 58px;
}

.v5-ai-head::before,
.v5-ai-head::after {
    content: "";
    position: absolute;
    top: 52px;
    width: 29px;
    height: 49px;
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            #ddecff,
            #87b8ff
        );
}

.v5-ai-head::before {
    left: -24px;
}

.v5-ai-head::after {
    right: -24px;
}

.v5-ai-body {
    position: relative;
    width: 165px;
    height: 145px;
    background:
        linear-gradient(
            145deg,
            #f7fbff,
            #91bbff
        );
}

.v5-ai-body::before,
.v5-ai-body::after {
    content: "";
    position: absolute;
    top: 28px;
    width: 71px;
    height: 22px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            #d9ebff,
            #85b4ff
        );
}

.v5-ai-body::before {
    left: -57px;
    transform: rotate(-27deg);
}

.v5-ai-body::after {
    right: -57px;
    transform: rotate(27deg);
}

.v5-ai-scene::before {
    content: "◉";
    position: absolute;
    z-index: 8;
    left: 5%;
    top: 47%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(89,255,161,.55);
    border-radius: 19px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #35ef87,
            #12c965
        );
    box-shadow:
        0 17px 45px rgba(22,214,108,.31),
        0 0 40px rgba(27,226,122,.18);
    font-size: 24px;
}

.v5-ai-bubble {
    top: 10px;
    min-width: 305px;
}

.v5-ai-card {
    min-width: 208px;
    padding: 15px 16px;
}

.v5-ai-card-one {
    left: -14px;
    top: 158px;
    border-color: rgba(51,216,255,.38);
}

.v5-ai-card-two {
    right: -31px;
    top: 183px;
    border-color: rgba(115,102,255,.42);
}

.v5-ai-card-three {
    left: 0;
    bottom: 122px;
    border-color: rgba(255,176,65,.33);
}

.v5-ai-card-four {
    right: -20px;
    bottom: 88px;
    border-color: rgba(52,231,144,.34);
}


/* ------------------------------------------------
   5. WEBSITE SHOWCASE — bigger, richer composition
   ------------------------------------------------ */

.v5-websites {
    padding-top: 110px;
    padding-bottom: 112px;
}

.v5-websites-grid {
    grid-template-columns:
        minmax(0, .78fr)
        minmax(600px, 1.22fr);
    gap: 52px;
}

.v5-web-scene {
    min-height: 610px;
}

.v5-web-orbit {
    width: 545px;
    height: 545px;
    right: -20px;
    top: 18px;
}

.v5-web-laptop {
    width: 94%;
    right: 3%;
    top: 42px;
    border-width: 8px;
    box-shadow:
        0 44px 105px rgba(0,0,0,.44),
        0 0 90px rgba(49,106,255,.24);
}

.v5-demo-website {
    min-height: 360px;
    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(69, 128, 255, .75),
            transparent 18rem
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(173, 75, 255, .45),
            transparent 14rem
        ),
        linear-gradient(
            135deg,
            #071830,
            #173875
        );
}

.v5-demo-content h3 {
    font-size: 41px;
}

.v5-web-phone {
    width: 178px;
    right: -8px;
    bottom: 0;
}

.v5-web-benefits {
    left: auto;
    right: -23px;
    top: 103px;
    bottom: auto;
    width: 206px;
    padding: 16px;
    border-color: rgba(100,154,255,.40);
    background:
        linear-gradient(
            145deg,
            rgba(11,35,81,.98),
            rgba(7,22,54,.98)
        );
}


/* ------------------------------------------------
   6. NEXBIT AI — stronger product demo
   ------------------------------------------------ */

.v5-nexbit-ai-grid {
    grid-template-columns:
        minmax(0, .80fr)
        minmax(560px, 1.20fr);
    gap: 58px;
}

.v5-project-chat {
    padding: 30px;
    border-color: rgba(109,150,255,.32);
    box-shadow:
        0 32px 85px rgba(0,0,0,.39),
        0 0 60px rgba(78,92,255,.13);
}

.v5-project-chat-head > span {
    width: 43px;
    height: 43px;
}

.v5-project-chat-head strong {
    font-size: 12px;
}

.v5-project-message {
    max-width: 82%;
    padding: 14px 15px;
    font-size: 11px;
}

.v5-project-input {
    min-height: 55px;
}


/* ------------------------------------------------
   7. ASTROVEDIQ — force product UI visible
   ------------------------------------------------ */

.v5-product {
    min-height: 535px;
}

.v5-product-copy {
    position: relative;
    z-index: 30;
}

.v5-product-scene-final {
    position: relative;
    min-height: 535px;
    overflow: visible;
}

.v5-product-scene-final > .v5-product-orbit {
    left: 73%;
    top: 50%;
    z-index: 1;
    width: 355px;
    height: 355px;
    opacity: .82;
}

.v5-product-scene-final > .v5-product-core {
    left: 73%;
    top: 50%;
    z-index: 4;
}

.v5-product-scene-final > .v5-astro-admin {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: 18;
    width: 405px;
    left: 0;
    top: 72px;
    transform:
        perspective(1100px)
        rotateY(3deg);
}

.v5-product-scene-final > .v5-astro-phone {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: 24;
    width: 160px;
    right: 1%;
    bottom: 25px;
}

.v5-product-scene-final > .v5-node {
    z-index: 27;
}

.v5-product-scene-final > .v5-node.one {
    left: 3%;
    top: 20px;
}

.v5-product-scene-final > .v5-node.two {
    right: 7%;
    top: 36px;
}

.v5-product-scene-final > .v5-node.three {
    right: 1%;
    bottom: 205px;
}

.v5-product-scene-final > .v5-node.four {
    left: 7%;
    bottom: 44px;
}

.v5-product-scene-final > .v5-node.five {
    right: 30%;
    bottom: 12px;
}


/* ------------------------------------------------
   8. PROCESS — clearer flow
   ------------------------------------------------ */

.v5-process-grid {
    gap: 18px;
}

.v5-process-grid article {
    position: relative;
    min-height: 270px;
    padding: 27px;
    border-color: rgba(101,145,255,.24);
    box-shadow:
        0 18px 48px rgba(0,0,0,.17);
}

.v5-process-grid article:not(:last-child)::after {
    content: "→";
    position: absolute;
    z-index: 8;
    right: -17px;
    top: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(81,218,255,.28);
    border-radius: 50%;
    color: #5adfff;
    background: #071a3d;
    box-shadow:
        0 0 25px rgba(51,210,255,.14);
    font-size: 13px;
}

.v5-process-grid article > div {
    width: 52px;
    height: 52px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #258fff,
            #735eff
        );
    box-shadow:
        0 12px 30px rgba(57,99,255,.23);
}

.v5-process-grid h3 {
    font-size: 18px;
}

.v5-process-grid p {
    font-size: 11px;
    line-height: 1.68;
}


/* ------------------------------------------------
   9. FINAL CTA — FIX ACTUAL GRID BUG
   ------------------------------------------------ */

.v5-final {
    padding-top: 52px;
    padding-bottom: 92px;
}

.v5-final-card-final {
    min-height: 300px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(210px, .62fr)
        minmax(245px, .62fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 45px;
    padding: 54px 56px;
}

.v5-final-card-final > div.v5-final-glow,
.v5-final-card-final > div.v5-final-glow-two {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.v5-final-card-final > div.v5-final-copy {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.v5-final-card-final > div.v5-final-middle {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.v5-final-card-final > div.v5-final-action {
    position: relative;
    z-index: 3;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: 100%;
    max-width: none;
}

.v5-final-copy h2 {
    max-width: 525px;
    font-size: clamp(35px, 3.5vw, 48px);
}

.v5-final-copy p {
    max-width: 500px;
}

.v5-final-middle {
    gap: 14px;
}

.v5-final-wa {
    width: 100%;
    min-width: 230px;
}


/* ------------------------------------------------
   10. RESPONSIVE ALIGNMENT
   ------------------------------------------------ */

@media (max-width: 1100px) {

    .v5-hero-grid,
    .v5-ai-grid,
    .v5-websites-grid,
    .v5-nexbit-ai-grid {
        grid-template-columns: 1fr;
    }

    .v5-hero-scene {
        width: min(100%, 820px);
        margin: 0 auto;
    }

    .v5-ai-scene,
    .v5-web-scene {
        width: min(100%, 780px);
        margin: 0 auto;
    }

    .v5-final-card-final {
        grid-template-columns:
            1fr
            1fr;
        grid-template-rows:
            auto
            auto;
    }

    .v5-final-card-final > div.v5-final-copy {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .v5-final-card-final > div.v5-final-middle {
        grid-column: 1;
        grid-row: 2;
    }

    .v5-final-card-final > div.v5-final-action {
        grid-column: 2;
        grid-row: 2;
    }

}


@media (max-width: 620px) {

    .v5-hero-scene {
        min-height: 560px;
        transform: none;
    }

    .v5-laptop {
        width: 113%;
        right: -22%;
    }

    .v5-dashboard-main {
        margin: 5px;
    }

    .v5-service {
        min-height: 0;
    }

    .v5-ai-scene {
        min-height: 535px;
    }

    .v5-ai-rings {
        width: 430px;
        height: 430px;
    }

    .v5-ai-core {
        width: 158px;
    }

    .v5-ai-head {
        width: 158px;
        height: 110px;
        border-width: 7px;
    }

    .v5-eye {
        top: 40px;
        width: 16px;
        height: 16px;
    }

    .v5-eye.left {
        left: 42px;
    }

    .v5-eye.right {
        right: 42px;
    }

    .v5-ai-head::before,
    .v5-ai-head::after {
        width: 20px;
        height: 37px;
        top: 36px;
    }

    .v5-ai-head::before {
        left: -16px;
    }

    .v5-ai-head::after {
        right: -16px;
    }

    .v5-ai-body {
        width: 118px;
        height: 104px;
    }

    .v5-ai-body::before,
    .v5-ai-body::after {
        width: 48px;
        height: 17px;
    }

    .v5-ai-body::before {
        left: -36px;
    }

    .v5-ai-body::after {
        right: -36px;
    }

    .v5-ai-scene::before {
        width: 49px;
        height: 49px;
        left: 0;
        font-size: 18px;
    }

    .v5-ai-card {
        min-width: 140px;
        padding: 10px;
    }

    .v5-web-scene {
        min-height: 535px;
    }

    .v5-web-laptop {
        width: 103%;
        right: -11%;
    }

    .v5-web-benefits {
        right: 0;
        top: 98px;
        width: 158px;
    }

    .v5-product {
        min-height: 760px;
    }

    .v5-product-scene-final {
        min-height: 485px;
    }

    .v5-product-scene-final > .v5-astro-admin {
        width: 92%;
        left: 0;
        top: 35px;
    }

    .v5-product-scene-final > .v5-product-orbit {
        width: 290px;
        height: 290px;
        left: 61%;
        top: 65%;
    }

    .v5-product-scene-final > .v5-product-core {
        left: 61%;
        top: 65%;
    }

    .v5-product-scene-final > .v5-astro-phone {
        width: 137px;
        right: -2px;
        bottom: 0;
    }

    .v5-process-grid article:not(:last-child)::after {
        display: none;
    }

    .v5-final-card-final {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 28px;
        min-height: 0;
        padding: 36px 25px;
    }

    .v5-final-card-final > div.v5-final-copy,
    .v5-final-card-final > div.v5-final-middle,
    .v5-final-card-final > div.v5-final-action {
        grid-column: 1;
        grid-row: auto;
    }

    .v5-final-wa {
        min-width: 0;
        width: 100%;
    }

}


/* NEXBIT_V5_R5C_100_PERCENT_ALIGNMENT_END */


/* ================================================================
   NEXBIT_V5_R5D_DESKTOP_ALIGNMENT_START
   Final desktop proportions / typography / rhythm
   ================================================================ */


/* ------------------------------------------------
   HEADER — more visual presence
   ------------------------------------------------ */

.v5-nav {
    min-height: 78px;
}

.v5-brand {
    gap: 11px;
    font-size: 21px;
}

.v5-brand img {
    width: 42px;
    height: 42px;
}

.v5-desktop-nav {
    gap: 4px;
}

.v5-desktop-nav a {
    padding: 11px 12px;
    font-size: 13px;
}

.v5-wa-button {
    min-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
}


/* ------------------------------------------------
   HERO — fix excessive headline wrapping
   ------------------------------------------------ */

.v5-hero {
    padding-top: 92px;
    padding-bottom: 102px;
}

.v5-hero-grid {
    grid-template-columns:
        minmax(0, .96fr)
        minmax(535px, 1.04fr);
    gap: 46px;
}

.v5-hero-copy {
    max-width: 720px;
}

.v5-hero h1 {
    max-width: 720px;
    font-size: clamp(48px, 4.7vw, 72px);
    line-height: .995;
}

.v5-hero-copy > p {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.72;
}

.v5-hero-scene {
    min-height: 625px;
    transform:
        translateY(13px)
        scale(1.01);
    transform-origin: center;
}

.v5-laptop {
    width: 99%;
    right: -2%;
    top: 43px;
}

.v5-phone {
    left: -17px;
}

.v5-hero-automation {
    right: -24px;
}


/* ------------------------------------------------
   CAPABILITY STRIP — stop it disappearing
   ------------------------------------------------ */

.v5-trust-inner {
    min-height: 98px;
    gap: 16px 30px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.v5-trust span {
    font-size: 11.5px;
    letter-spacing: .01em;
}

.v5-trust span::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
}


/* ------------------------------------------------
   SHARED SECTION HEADING
   ------------------------------------------------ */

.v5-section-heading {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .55fr);
    gap: 42px;
    margin-bottom: 42px;
}

.v5-section-heading h2 {
    max-width: 860px;
    font-size: clamp(35px, 3.75vw, 52px);
    line-height: 1.06;
}

.v5-section-heading > p {
    max-width: 440px;
    color: #9baac4;
    font-size: 14px;
    line-height: 1.72;
}


/* ------------------------------------------------
   SERVICES — readability
   ------------------------------------------------ */

.v5-services {
    padding-top: 108px;
    padding-bottom: 116px;
    background:
        radial-gradient(
            circle at 7% 17%,
            rgba(32, 132, 255, .14),
            transparent 29rem
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(171, 70, 255, .13),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            #03102a,
            #041532
        );
}

.v5-service-grid {
    gap: 18px;
}

.v5-service {
    min-height: 316px;
}

.v5-service h3 {
    margin-bottom: 11px;
    font-size: 18px;
}

.v5-service p {
    font-size: 12.5px;
    line-height: 1.7;
}

.v5-service a {
    font-size: 11.5px;
}


/* ------------------------------------------------
   AI AUTOMATION — rebalance text vs visual
   ------------------------------------------------ */

.v5-ai {
    padding-top: 114px;
    padding-bottom: 116px;
    background:
        radial-gradient(
            circle at 76% 45%,
            rgba(35, 141, 255, .26),
            transparent 31rem
        ),
        radial-gradient(
            circle at 97% 75%,
            rgba(170, 61, 255, .21),
            transparent 32rem
        ),
        linear-gradient(
            135deg,
            #020919,
            #06183b
        );
}

.v5-ai-grid {
    grid-template-columns:
        minmax(0, .92fr)
        minmax(555px, 1.08fr);
    gap: 58px;
}

.v5-ai-copy {
    max-width: 650px;
}

.v5-ai-copy h2 {
    max-width: 650px;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.05;
}

.v5-ai-copy > p {
    max-width: 620px;
    font-size: 14px;
}

.v5-ai-list span {
    font-size: 11px;
}

.v5-ai-scene {
    min-height: 590px;
}

.v5-ai-rings {
    width: 550px;
    height: 550px;
}

.v5-ai-card {
    min-width: 198px;
}

.v5-ai-card strong {
    font-size: 10.5px;
}

.v5-ai-card span {
    font-size: 8.5px;
}


/* ------------------------------------------------
   WEBSITE DEVELOPMENT — rebalance text vs visual
   ------------------------------------------------ */

.v5-websites {
    padding-top: 114px;
    padding-bottom: 116px;
    background:
        radial-gradient(
            circle at 79% 44%,
            rgba(48, 132, 255, .32),
            transparent 31rem
        ),
        radial-gradient(
            circle at 98% 78%,
            rgba(168, 61, 255, .26),
            transparent 31rem
        ),
        linear-gradient(
            135deg,
            #04132f,
            #09275d
        );
}

.v5-websites-grid {
    grid-template-columns:
        minmax(0, .92fr)
        minmax(555px, 1.08fr);
    gap: 58px;
}

.v5-web-copy {
    max-width: 650px;
}

.v5-web-copy h2 {
    max-width: 650px;
    font-size: clamp(36px, 4vw, 54px);
}

.v5-web-copy > p {
    max-width: 610px;
    font-size: 14px;
}

.v5-web-list span {
    font-size: 11px;
}

.v5-web-scene {
    min-height: 585px;
}

.v5-web-laptop {
    width: 91%;
    right: 4%;
}

.v5-web-benefits {
    right: -9px;
    top: 112px;
}


/* ------------------------------------------------
   NEXBIT AI — larger product-demo panel
   ------------------------------------------------ */

.v5-nexbit-ai {
    padding-top: 110px;
    padding-bottom: 112px;
    background:
        radial-gradient(
            circle at 83% 33%,
            rgba(110, 80, 255, .19),
            transparent 29rem
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(25, 126, 255, .09),
            transparent 27rem
        ),
        linear-gradient(
            135deg,
            #020817,
            #061433
        );
}

.v5-nexbit-ai-grid {
    grid-template-columns:
        minmax(0, .90fr)
        minmax(540px, 1.10fr);
    gap: 64px;
}

.v5-nexbit-ai > .v5-shell > div:first-child {
    max-width: 650px;
}

.v5-nexbit-ai h2 {
    max-width: 650px;
    font-size: clamp(36px, 4vw, 54px);
}

.v5-nexbit-ai p {
    max-width: 610px;
    font-size: 14px;
}

.v5-ai-steps span {
    font-size: 11px;
}

.v5-project-chat {
    width: 104%;
    margin-left: -2%;
    transform: scale(1.025);
    transform-origin: center;
    border-color: rgba(111, 154, 255, .36);
    box-shadow:
        0 34px 90px rgba(0,0,0,.41),
        0 0 74px rgba(85, 88, 255, .16);
}

.v5-project-message {
    font-size: 11.5px;
}


/* ------------------------------------------------
   ASTROVEDIQ — distribute composition
   ------------------------------------------------ */

.v5-work {
    padding-top: 110px;
    padding-bottom: 116px;
    background:
        radial-gradient(
            circle at 77% 47%,
            rgba(131, 65, 255, .23),
            transparent 31rem
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(32, 120, 255, .09),
            transparent 26rem
        ),
        linear-gradient(
            135deg,
            #06122e,
            #08204c
        );
}

.v5-product {
    grid-template-columns:
        minmax(0, .90fr)
        minmax(0, 1.10fr);
    min-height: 535px;
}

.v5-product-copy {
    padding: 48px;
}

.v5-product-copy p {
    font-size: 13px;
}

.v5-product-scene-final {
    min-height: 535px;
}

.v5-product-scene-final > .v5-astro-admin {
    width: 380px;
    left: -4%;
    top: 84px;
}

.v5-product-scene-final > .v5-product-orbit {
    left: 75%;
    width: 340px;
    height: 340px;
}

.v5-product-scene-final > .v5-product-core {
    left: 75%;
}

.v5-product-scene-final > .v5-astro-phone {
    width: 158px;
    right: 4%;
    bottom: 30px;
}

.v5-product-scene-final > .v5-node.one {
    left: 0;
    top: 30px;
}

.v5-product-scene-final > .v5-node.two {
    right: 10%;
    top: 38px;
}

.v5-product-scene-final > .v5-node.three {
    right: 1%;
    bottom: 206px;
}

.v5-product-scene-final > .v5-node.four {
    left: 1%;
    bottom: 45px;
}

.v5-product-scene-final > .v5-node.five {
    right: 30%;
    bottom: 13px;
}


/* ------------------------------------------------
   PROCESS — readable cards + clear connectors
   ------------------------------------------------ */

.v5-process {
    padding-top: 108px;
    padding-bottom: 114px;
    background:
        radial-gradient(
            circle at 52% 20%,
            rgba(44, 117, 255, .10),
            transparent 31rem
        ),
        linear-gradient(
            180deg,
            #020817,
            #04132f
        );
}

.v5-process-grid {
    gap: 21px;
}

.v5-process-grid article {
    min-height: 282px;
    padding: 28px;
}

.v5-process-grid article:not(:last-child)::after {
    right: -27px;
    width: 34px;
    height: 34px;
    border-color: rgba(72, 221, 255, .43);
    color: #6ae6ff;
    box-shadow:
        0 0 32px rgba(48, 215, 255, .21);
}

.v5-process-grid article > span {
    font-size: 10px;
}

.v5-process-grid article > div {
    width: 54px;
    height: 54px;
    font-size: 16px;
}

.v5-process-grid h3 {
    font-size: 18px;
}

.v5-process-grid p {
    color: #a0aec8;
    font-size: 12px;
    line-height: 1.7;
}


/* ------------------------------------------------
   FINAL CTA — stronger ending
   ------------------------------------------------ */

.v5-final {
    padding-top: 58px;
    padding-bottom: 100px;
    background:
        linear-gradient(
            180deg,
            #04132f,
            #03102a
        );
}

.v5-final-card-final {
    min-height: 335px;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(220px, .60fr)
        minmax(255px, .64fr);
    gap: 48px;
    padding: 58px 60px;
    border-color: rgba(111, 158, 255, .37);
    background:
        radial-gradient(
            circle at 94% 45%,
            rgba(41, 217, 255, .26),
            transparent 24rem
        ),
        radial-gradient(
            circle at 65% 16%,
            rgba(151, 73, 255, .38),
            transparent 25rem
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(38, 137, 255, .28),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #082a69,
            #191466
        );
    box-shadow:
        0 35px 90px rgba(0,0,0,.34),
        0 0 60px rgba(74, 93, 255, .17);
}

.v5-final-copy h2 {
    max-width: 560px;
    font-size: clamp(38px, 3.7vw, 52px);
}

.v5-final-copy p {
    max-width: 520px;
    font-size: 13px;
}

.v5-final-middle span {
    font-size: 11px;
}

.v5-final-middle i {
    width: 24px;
    height: 24px;
}

.v5-final-action > small {
    font-size: 8px;
}

.v5-final-wa {
    min-height: 62px;
    font-size: 14px;
    border-radius: 16px;
}

.v5-final-action > p {
    font-size: 9px;
}


/* ------------------------------------------------
   FOOTER — slightly more substantial
   ------------------------------------------------ */

.v5-footer {
    padding-top: 56px;
    padding-bottom: 56px;
}

.v5-footer p {
    font-size: 10px;
}

.v5-footer nav {
    gap: 14px;
}

.v5-footer nav a {
    font-size: 9px;
}

.v5-footer small {
    font-size: 8.5px;
}


/* ------------------------------------------------
   TABLET SAFETY
   ------------------------------------------------ */

@media (max-width: 1100px) {

    .v5-hero-grid,
    .v5-ai-grid,
    .v5-websites-grid,
    .v5-nexbit-ai-grid {
        grid-template-columns: 1fr;
    }

    .v5-hero-scene {
        width: min(100%, 820px);
        margin: 0 auto;
        transform: none;
    }

    .v5-ai-scene,
    .v5-web-scene {
        width: min(100%, 790px);
        margin-left: auto;
        margin-right: auto;
    }

    .v5-project-chat {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    .v5-product {
        grid-template-columns: 1fr;
    }

    .v5-final-card-final {
        grid-template-columns:
            1fr
            1fr;
        grid-template-rows:
            auto
            auto;
    }

    .v5-final-card-final > div.v5-final-copy {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .v5-final-card-final > div.v5-final-middle {
        grid-column: 1;
        grid-row: 2;
    }

    .v5-final-card-final > div.v5-final-action {
        grid-column: 2;
        grid-row: 2;
    }

}


/* ------------------------------------------------
   MOBILE SAFETY
   Mobile styling itself will be reviewed next.
   ------------------------------------------------ */

@media (max-width: 620px) {

    .v5-nav {
        min-height: 66px;
    }

    .v5-brand {
        font-size: 18px;
    }

    .v5-brand img {
        width: 34px;
        height: 34px;
    }

    .v5-hero {
        padding-top: 48px;
        padding-bottom: 56px;
    }

    .v5-hero h1 {
        font-size: clamp(40px, 12vw, 53px);
    }

    .v5-hero-copy > p {
        font-size: 14px;
    }

    .v5-hero-scene {
        min-height: 560px;
        transform: none;
    }

    .v5-trust-inner {
        min-height: auto;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .v5-trust span {
        font-size: 10px;
    }

    .v5-section-heading h2,
    .v5-ai-copy h2,
    .v5-web-copy h2,
    .v5-nexbit-ai h2 {
        font-size: clamp(31px, 9vw, 42px);
    }

    .v5-section-heading > p,
    .v5-ai-copy > p,
    .v5-web-copy > p,
    .v5-nexbit-ai p {
        font-size: 13px;
    }

    .v5-service {
        min-height: 0;
        padding: 22px;
    }

    .v5-service p {
        font-size: 12px;
    }

    .v5-ai-scene {
        min-height: 535px;
    }

    .v5-web-scene {
        min-height: 535px;
    }

    .v5-product {
        min-height: 760px;
    }

    .v5-product-scene-final > .v5-astro-admin {
        width: 92%;
        left: 0;
        top: 35px;
    }

    .v5-product-scene-final > .v5-product-orbit {
        left: 61%;
    }

    .v5-product-scene-final > .v5-product-core {
        left: 61%;
    }

    .v5-product-scene-final > .v5-astro-phone {
        right: -2px;
    }

    .v5-process-grid article {
        min-height: 0;
    }

    .v5-process-grid article:not(:last-child)::after {
        display: none;
    }

    .v5-final-card-final {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 28px;
        min-height: 0;
        padding: 36px 25px;
    }

    .v5-final-card-final > div.v5-final-copy,
    .v5-final-card-final > div.v5-final-middle,
    .v5-final-card-final > div.v5-final-action {
        grid-column: 1;
        grid-row: auto;
    }

    .v5-final-wa {
        min-width: 0;
        width: 100%;
    }

}


/* NEXBIT_V5_R5D_DESKTOP_ALIGNMENT_END */


/* ================================================================
   NEXBIT_V5_R5E_HERO_CLEANUP_START
   Desktop hero only
   ================================================================ */

@media (min-width: 1101px) {

    .v5-hero {
        padding-top: 74px;
        padding-bottom: 76px;
    }

    .v5-hero-grid {
        grid-template-columns:
            minmax(0, 1.03fr)
            minmax(520px, .97fr);
        gap: 54px;
        align-items: center;
    }

    .v5-hero-copy {
        max-width: 735px;
        align-self: center;
    }

    .v5-hero .v5-eyebrow {
        font-size: 9px;
        letter-spacing: .13em;
    }

    .v5-hero h1 {
        width: 100%;
        max-width: 735px;
        margin:
            17px
            0
            19px;
        font-size: clamp(
            46px,
            3.75vw,
            58px
        );
        line-height: 1.015;
        letter-spacing: -.048em;
    }

    .v5-hero-copy > p {
        max-width: 610px;
        font-size: 15px;
        line-height: 1.68;
        color: #bdc9df;
    }

    .v5-hero-actions {
        gap: 10px;
        margin-top: 24px;
    }

    .v5-hero-actions .v5-primary-wa,
    .v5-hero-actions .v5-outline-button {
        min-height: 49px;
        padding-left: 18px;
        padding-right: 18px;
        border-radius: 13px;
        font-size: 12px;
    }

    .v5-hero-proof {
        max-width: 650px;
        gap: 10px 16px;
        margin-top: 20px;
        font-size: 10px;
    }

    .v5-hero-proof i {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        font-size: 8px;
    }

    .v5-hero-scene {
        min-height: 550px;
        transform: none;
        align-self: center;
    }

    .v5-big-orbit {
        width: 525px;
        height: 525px;
        right: -3px;
        top: 5px;
    }

    .v5-laptop {
        width: 96%;
        right: 0;
        top: 26px;
    }

    .v5-dashboard-layout {
        min-height: 325px;
    }

    .v5-dashboard-main h3 {
        font-size: 21px;
    }

    .v5-chart {
        height: 112px;
    }

    .v5-phone {
        width: 190px;
        left: -7px;
        bottom: 4px;
    }

    .v5-hero-automation {
        width: 205px;
        right: -7px;
        bottom: 18px;
        padding: 14px;
    }

    .v5-hero-side-card {
        right: -10px;
        top: 130px;
    }

}


/* NEXBIT_V5_R5E_HERO_CLEANUP_END */



/* ================================================================
   NEXBIT_V5_R5L_FINAL_MOBILE_START
   Single authoritative mobile layout
   ================================================================ */


/* Preserve the Nexbit technology mark introduced after desktop approval */

.v5-brand > img {
    display: none !important;
}

.v5-brand::before {
    content: "N";
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(95,170,255,.48);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #1768ff,
            #516cff 48%,
            #13cfff
        );
    box-shadow:
        0 8px 24px rgba(41,105,255,.25);
    font-family:
        Inter,
        system-ui,
        sans-serif;
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
}


@media (max-width: 620px) {


    /* ============================================================
       GLOBAL — EXACT 16PX MOBILE GUTTER
       ============================================================ */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .v5-shell {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .v5-brand::before {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 9px;
        font-size: 17px;
    }


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

    .v5-nav {
        min-height: 62px;
    }

    .v5-brand {
        gap: 8px;
        font-size: 17px;
    }

    .v5-mobile-nav summary {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }


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

    .v5-hero {
        padding:
            30px
            0
            38px;
    }

    .v5-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
    }

    .v5-hero-copy {
        width: 100%;
        max-width: none;
    }

    .v5-hero .v5-eyebrow {
        font-size: 7px;
        letter-spacing: .08em;
    }

    .v5-hero h1 {
        width: 100%;
        max-width: 100%;
        margin:
            11px
            0
            14px;
        font-size: clamp(
            28px,
            8.1vw,
            32px
        );
        line-height: 1.035;
        letter-spacing: -.045em;
    }

    .v5-hero-copy > p {
        width: 100%;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.58;
    }

    .v5-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 18px;
    }

    .v5-hero-actions .v5-primary-wa,
    .v5-hero-actions .v5-outline-button {
        width: 100%;
        min-height: 45px;
        font-size: 11px;
    }

    .v5-hero-proof {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 14px;
    }

    .v5-hero-proof span {
        min-height: 35px;
        padding:
            7px
            8px;
        font-size: 7.8px;
    }

    .v5-hero-scene {
        position: relative;
        width: 100%;
        min-height: 315px;
        margin: 0;
        transform: none;
    }

    .v5-big-orbit {
        width: 320px;
        height: 320px;
        left: 50%;
        right: auto;
        top: -3px;
        transform: translateX(-50%);
    }

    .v5-laptop {
        width: 100%;
        left: 0;
        right: auto;
        top: 10px;
        transform: none;
    }

    .v5-dashboard-layout {
        display: block;
        min-height: 235px;
    }

    .v5-dashboard-layout aside,
    .v5-phone,
    .v5-hero-automation,
    .v5-hero-side-card {
        display: none;
    }

    .v5-dashboard-main {
        margin: 6px;
        padding:
            13px
            11px;
    }

    .v5-dashboard-main h3 {
        font-size: 15px;
    }

    .v5-chart {
        height: 78px;
    }


    /* ============================================================
       CAPABILITIES
       ============================================================ */

    .v5-trust {
        padding:
            15px
            0;
    }

    .v5-trust-inner {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
        min-height: 0;
    }

    .v5-trust span {
        min-height: 38px;
        display: flex;
        align-items: center;
        padding:
            8px
            9px;
        border: 1px solid rgba(86,145,255,.18);
        border-radius: 9px;
        font-size: 8.2px;
        line-height: 1.3;
        background: rgba(12,35,78,.58);
    }


    /* ============================================================
       SHARED SECTION TYPOGRAPHY
       ============================================================ */

    .v5-services,
    .v5-ai,
    .v5-websites,
    .v5-nexbit-ai,
    .v5-work,
    .v5-process {
        padding:
            58px
            0;
    }

    .v5-section-heading {
        display: block;
        width: 100%;
        margin:
            0
            0
            22px;
    }

    .v5-section-heading h2,
    .v5-ai-copy h2,
    .v5-web-copy h2,
    .v5-nexbit-ai h2 {
        width: 100%;
        max-width: 100%;
        margin:
            9px
            0
            10px;
        font-size: clamp(
            27px,
            7.8vw,
            33px
        );
        line-height: 1.055;
        letter-spacing: -.043em;
    }

    .v5-section-heading > p,
    .v5-ai-copy > p,
    .v5-web-copy > p,
    .v5-nexbit-ai p {
        width: 100%;
        max-width: 100%;
        font-size: 11.5px;
        line-height: 1.62;
    }


    /* ============================================================
       SERVICES — COMPACT + EXACT ALIGNMENT
       ============================================================ */

    .v5-service-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .v5-service {
        width: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns:
            46px
            minmax(0, 1fr);
        grid-template-rows:
            auto
            auto
            auto;
        column-gap: 13px;
        row-gap: 4px;
        margin: 0;
        padding:
            15px
            16px;
        border-radius: 14px;
    }

    .v5-service-icon {
        grid-column: 1;
        grid-row:
            1 / 4;
        width: 44px;
        height: 44px;
        margin: 1px 0 0;
    }

    .v5-service h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 14px;
    }

    .v5-service p {
        grid-column: 2;
        grid-row: 2;
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        font-size: 10px;
        line-height: 1.48;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .v5-service a {
        grid-column: 2;
        grid-row: 3;
        margin-top: 2px;
        font-size: 9px;
    }


    /* ============================================================
       AI AUTOMATION — CLEAN, NO FLOATING MOBILE CLUTTER
       ============================================================ */

    .v5-ai-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        width: 100%;
    }

    .v5-ai-copy {
        width: 100%;
    }

    .v5-ai-list {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap:
            8px
            7px;
        margin:
            18px
            0
            20px;
    }

    .v5-ai-list span {
        font-size: 8.7px;
    }

    .v5-ai-copy .v5-primary-wa {
        width: 100%;
        min-height: 46px;
    }

    .v5-ai-scene {
        position: relative;
        width: 100%;
        height: 245px;
        min-height: 245px;
        margin:
            4px
            0
            0;
        overflow: hidden;
    }

    .v5-ai-rings {
        position: absolute;
        width: 235px;
        height: 235px;
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform:
            translate(-50%, -50%);
    }

    .v5-ai-rings::before {
        inset: 30px;
    }

    .v5-ai-rings::after {
        inset: 65px;
    }

    .v5-ai-core {
        position: absolute;
        width: 122px;
        left: 50%;
        top: 51%;
        right: auto;
        bottom: auto;
        transform:
            translate(-50%, -50%);
    }

    .v5-ai-head {
        width: 122px;
        height: 85px;
        border-width: 6px;
    }

    .v5-eye {
        top: 31px;
        width: 13px;
        height: 13px;
    }

    .v5-eye.left {
        left: 32px;
    }

    .v5-eye.right {
        right: 32px;
    }

    .v5-ai-body {
        width: 91px;
        height: 78px;
    }

    .v5-ai-bubble,
    .v5-ai-card,
    .v5-ai-scene::before {
        display: none !important;
    }


    /* ============================================================
       WEBSITE
       ============================================================ */

    .v5-websites-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
    }

    .v5-web-list {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .v5-web-copy .v5-primary-wa {
        width: 100%;
        min-height: 46px;
    }

    /* R5P_MOBILE_WEBSITE_PHONE_REMOVED */

    .v5-web-scene {
        position: relative;
        width: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .v5-web-orbit {
        display: none;
    }

    .v5-web-laptop {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin: 0;
        transform: none;
    }

    .v5-web-benefits {
        display: none;
    }

    .v5-web-phone {
        display: none !important;
    }


    /* ============================================================
       NEXBIT AI
       ============================================================ */

    .v5-nexbit-ai-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        width: 100%;
    }

    .v5-ai-steps {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .v5-project-chat {
        width: 100%;
        margin: 0;
        padding: 16px;
        transform: none;
        border-radius: 16px;
    }

    .v5-project-message {
        font-size: 8.8px;
    }


    /* ============================================================
       ASTROVEDIQ
       ============================================================ */

    .v5-product {
        width: 100%;
        display: block;
        min-height: 0;
        margin: 0;
        border-radius: 17px;
    }

    .v5-product-copy {
        width: 100%;
        padding:
            20px
            18px
            17px;
    }

    .v5-product h3 {
        font-size: 27px;
    }

    .v5-product-copy p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 10.2px;
        line-height: 1.6;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .v5-product-tags b:nth-child(n+4) {
        display: none;
    }

    /* R5P_MOBILE_ASTRO_PHONE_REMOVED */

    .v5-product-scene-final {
        position: relative;
        width: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
        padding: 12px;
        overflow: visible;
    }

    .v5-product-scene-final > .v5-product-orbit,
    .v5-product-scene-final > .v5-product-core,
    .v5-product-scene-final > .v5-node {
        display: none;
    }

    .v5-product-scene-final > .v5-astro-admin {
        position: relative;
        display: block;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin: 0;
        transform: none;
    }

    .v5-astro-admin-body {
        display: block;
        min-height: 142px;
    }

    .v5-astro-admin-body aside {
        display: none;
    }

    .v5-astro-admin-body > div {
        padding:
            15px
            14px;
    }

    .v5-astro-admin-body h4 {
        max-width: none;
        margin:
            6px
            0
            13px;
        font-size: 14px;
        line-height: 1.25;
    }

    .v5-astro-metrics {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .v5-astro-metrics span {
        min-height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        font-size: 0;
    }

    .v5-astro-metrics b {
        margin: 0;
        font-size: 6.7px;
        text-align: center;
    }

    .v5-product-scene-final > .v5-astro-phone {
        display: none !important;
    }


    /* ============================================================
       PROCESS
       ============================================================ */

    .v5-process-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .v5-process-grid article {
        position: relative;
        width: 100%;
        min-height: 112px;
        display: grid;
        grid-template-columns:
            48px
            minmax(0, 1fr);
        grid-template-rows:
            auto
            auto;
        column-gap: 13px;
        row-gap: 5px;
        align-items: start;
        margin: 0;
        padding:
            21px
            16px
            17px;
        border-radius: 15px;
    }

    .v5-process-grid article > span {
        position: absolute;
        top: 11px;
        right: 14px;
        left: auto;
        width: auto;
        height: auto;
        margin: 0;
        color: #8f7cff;
        font-size: 8px;
        font-weight: 800;
        line-height: 1;
    }

    .v5-process-grid article > div {
        position: static;
        grid-column: 1;
        grid-row:
            1 / 3;
        align-self: center;
        justify-self: start;
        width: 44px;
        height: 44px;
        margin: 0;
        transform: none;
        border-radius: 12px;
    }

    .v5-process-grid h3 {
        position: static;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
        padding: 0;
        transform: none;
        font-size: 15px;
        line-height: 1.2;
    }

    .v5-process-grid p {
        position: static;
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0;
        padding: 0;
        transform: none;
        color: #a9b7cc;
        font-size: 10px;
        line-height: 1.48;
    }

    .v5-process-grid article:not(:last-child)::after {
        display: none;
    }


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

    .v5-final {
        padding:
            31px
            0
            52px;
    }

    .v5-final-card-final {
        width: 100%;
        display: block;
        min-height: 0;
        margin: 0;
        padding:
            27px
            20px;
        border-radius: 18px;
        text-align: center;
    }

    .v5-final-middle {
        width: min(
            100%,
            230px
        ) !important;
        margin:
            19px
            auto;
        text-align: left;
    }

    .v5-final-wa {
        width: 100%;
        min-height: 50px;
    }


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

    .v5-footer {
        padding:
            30px
            0
            76px;
    }

    .v5-footer-inner {
        display: block;
        width: 100%;
    }

    .v5-footer nav {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin:
            18px
            0;
    }


    /* ============================================================
       REAL WHATSAPP FLOATING BUTTON
       ============================================================ */

    .v5-floating-wa {
        position: fixed !important;
        z-index: 99999;
        right: 12px !important;
        bottom:
            calc(
                15px
                + env(safe-area-inset-bottom)
            ) !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        min-width: 142px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;
        margin: 0 !important;
        padding:
            7px
            14px
            7px
            7px !important;
        transform: none !important;
        border: 1px solid rgba(255,255,255,.38);
        border-radius: 16px;
        color: #fff !important;
        background:
            linear-gradient(
                135deg,
                #2ce378,
                #17be5d
            ) !important;
        box-shadow:
            0 15px 36px rgba(0,0,0,.38),
            0 8px 30px rgba(37,211,102,.35);
    }

    .v5-floating-wa > b {
        position: relative;
        width: 35px !important;
        height: 35px !important;
        flex:
            0
            0
            35px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffffff;
        border-radius: 50%;
        color: #ffffff !important;
        background: rgba(255,255,255,.08) !important;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .v5-floating-wa > b::before {
        content: "☎";
        color: #ffffff;
        font-size: 17px;
        font-weight: 900;
        line-height: 1;
        transform: rotate(-15deg);
    }

    .v5-floating-wa > span {
        display: block !important;
        min-width: 0;
    }

    .v5-floating-wa strong {
        display: block;
        color: #ffffff !important;
        font-size: 10.5px;
        font-weight: 900;
        line-height: 1.1;
        white-space: nowrap;
    }

    .v5-floating-wa small {
        display: block !important;
        margin-top: 2px;
        color: rgba(255,255,255,.82) !important;
        font-size: 6.8px;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
    }

}


/* NEXBIT_V5_R5L_FINAL_MOBILE_END */

/* ============================================================
   NEXBIT_V6_LIVE_AI_INTEGRATION_START
   Scoped working Nexbit AI consultation modal
   ============================================================ */

#consultationModal {
    --cyan: #55e7d1;
    --gold: #ffbc45;
    --line: rgba(145, 164, 255, 0.16);
    --line-strong: rgba(145, 164, 255, 0.28);
}

#consultationModal button,
#consultationModal input,
#consultationModal textarea {
    font: inherit;
}

#consultationModal button {
    border: 0;
}

.v5-nexbit-ai-open {
    min-height: 46px;
    margin-top: 20px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(116, 103, 255, .42);
    border-radius: 12px;
    cursor: pointer;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #6656ef,
            #3e8de0
        );
    box-shadow:
        0 13px 35px rgba(74, 83, 227, .24);
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.v5-nexbit-ai-open:hover {
    transform: translateY(-1px);
}

@media (max-width: 620px) {
    .v5-nexbit-ai-open {
        width: 100%;
        min-height: 46px;
        margin-top: 17px;
    }
}

body.modal-open {
overflow: hidden;
}

#consultationModal .brand {
display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    white-space: nowrap;
}

#consultationModal .brand img {
width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 10px;
}

#consultationModal .brand span {
font-size: 16px;
}

#consultationModal .brand b {
color: var(--gold);
}

#consultationModal .button {
min-height: 48px;
    padding: 0 19px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

#consultationModal .button:hover {
transform: translateY(-2px);
}

#consultationModal .button:disabled {
opacity: 0.55;
    cursor: wait;
    transform: none;
}

#consultationModal .button-small {
min-height: 42px;
    padding: 0 16px;
    color: #fff;
    border: 1px solid rgba(142, 121, 255, 0.32);
    background:
        linear-gradient(
            135deg,
            rgba(122, 87, 255, 0.22),
            rgba(67, 134, 255, 0.13)
        );
}

#consultationModal .button-primary {
color: #fff;
    border: 1px solid rgba(169, 145, 255, 0.35);
    background:
        linear-gradient(
            135deg,
            #6950e8,
            #526fff 55%,
            #349bdc
        );
    box-shadow:
        0 13px 35px rgba(86, 88, 255, 0.28);
}

#consultationModal .button-primary:hover {
box-shadow:
        0 18px 44px rgba(86, 88, 255, 0.38);
}

#consultationModal .button-secondary {
color: #e5e9f8;
    border: 1px solid var(--line-strong);
    background: rgba(13, 19, 43, 0.74);
}

#consultationModal .preview-message.assistant {
border: 1px solid rgba(121, 111, 255, 0.15);
    border-bottom-left-radius: 5px;
    background: rgba(55, 47, 114, 0.2);
}

#consultationModal .preview-message.user {
margin-left: auto;
    color: #fff;
    border-bottom-right-radius: 5px;
    background:
        linear-gradient(
            135deg,
            #6250d3,
            #416ec0
        );
}

.consultation-modal {
position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.consultation-modal.is-open {
display: flex;
}

#consultationModal .consultation-backdrop {
position: absolute;
    inset: 0;
    background: rgba(1, 3, 11, 0.86);
    backdrop-filter: blur(12px);
}

#consultationModal .consultation-panel {
position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    min-height: 690px;
    max-height: calc(100vh - 56px);
    display: grid;
    grid-template-columns: 330px 1fr;
    overflow: hidden;
    border: 1px solid rgba(135, 124, 255, 0.25);
    border-radius: 28px;
    background: #080d1f;
    box-shadow:
        0 50px 130px rgba(0, 0, 0, 0.7);
}

#consultationModal .modal-close {
position: absolute;
    z-index: 10;
    right: 17px;
    top: 17px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    cursor: pointer;
    color: #b8c0d6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    font-size: 22px;
}

#consultationModal .consultation-side {
position: relative;
    padding: 34px 28px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(128, 75, 255, 0.28),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(39, 115, 216, 0.2),
            transparent 35%
        ),
        #0d1230;
}

#consultationModal .modal-brand img {
width: 38px;
    height: 38px;
}

#consultationModal .modal-side-badge {
display: inline-flex;
    margin-top: 64px;
    padding: 7px 9px;
    border-radius: 8px;
    color: #ae9cff;
    border: 1px solid rgba(157, 125, 255, 0.22);
    background: rgba(126, 81, 224, 0.12);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

#consultationModal .consultation-side h2 {
margin: 18px 0 15px;
    font-family: "Sora", sans-serif;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

#consultationModal .consultation-side h2 span {
color: #9c81ff;
}

#consultationModal .consultation-side > p {
margin: 0;
    color: #96a1c0;
    font-size: 14px;
    line-height: 1.75;
}

#consultationModal .modal-points {
margin-top: 30px;
}

#consultationModal .modal-points span {
min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a9b3ce;
    font-size: 12px;
    font-weight: 700;
}

#consultationModal .modal-points i {
color: var(--cyan);
    font-style: normal;
}

#consultationModal .modal-side-bottom {
position: absolute;
    bottom: 30px;
    left: 28px;
    color: #8d99ba;
    font-size: 10px;
    font-weight: 800;
}

#consultationModal .modal-side-bottom small {
display: block;
    margin-top: 4px;
    color: #5f6c8d;
    font-size: 8px;
}

#consultationModal .consultation-main {
min-width: 0;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 37px 42px 40px;
}

#consultationModal .consultation-head {
min-height: 70px;
    padding-right: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

#consultationModal .consultation-head small {
color: #8d99bb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

#consultationModal .consultation-head h3 {
margin: 7px 0 0;
    font-family: "Sora", sans-serif;
    font-size: 25px;
    letter-spacing: -0.03em;
}

#consultationModal .reference-chip {
padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
}

#consultationModal .reference-chip span {
display: block;
    color: #667291;
    font-size: 7px;
    text-transform: uppercase;
}

#consultationModal .reference-chip b {
display: block;
    margin-top: 2px;
    color: #bcc6e2;
    font-size: 9px;
}

#consultationModal .consultation-view {
display: none;
}

#consultationModal .consultation-view.is-active {
display: block;
}

#consultationModal .form-grid {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#consultationModal .form-grid label,
#consultationModal .correction-form label {
display: block;
}

#consultationModal .form-grid label > span,
#consultationModal .correction-form label > span {
display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    color: #b2bdd7;
    font-size: 11px;
    font-weight: 800;
}

#consultationModal .form-grid label span b {
color: #7ee4ce;
}

#consultationModal .form-grid label span em {
margin-left: auto;
    color: #687493;
    font-size: 8px;
    font-style: normal;
}

#consultationModal .form-wide {
grid-column: 1 / -1;
}

#consultationModal .form-grid input,
#consultationModal .form-grid textarea,
#consultationModal .followup-form textarea,
#consultationModal .correction-form textarea {
width: 100%;
    border: 1px solid var(--line);
    outline: none;
    color: #edf0fb;
    background: rgba(5, 10, 25, 0.7);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#consultationModal .form-grid input {
height: 48px;
    padding: 0 14px;
    border-radius: 11px;
}

#consultationModal .form-grid textarea {
min-height: 145px;
    resize: vertical;
    padding: 14px;
    border-radius: 11px;
    line-height: 1.6;
}

#consultationModal .form-grid input:focus,
#consultationModal .form-grid textarea:focus,
#consultationModal .followup-form textarea:focus,
#consultationModal .correction-form textarea:focus {
border-color: rgba(117, 102, 255, 0.58);
    box-shadow: 0 0 0 3px rgba(92, 78, 216, 0.09);
}

#consultationModal .form-grid input::placeholder,
#consultationModal .form-grid textarea::placeholder,
#consultationModal .followup-form textarea::placeholder,
#consultationModal .correction-form textarea::placeholder {
color: #505c7a;
}

#consultationModal .honeypot {
position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

#consultationModal .consent-notice {
margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #697594;
    background: rgba(255, 255, 255, 0.018);
    font-size: 10px;
    line-height: 1.65;
}

#consultationModal .form-actions {
display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

#consultationModal .form-error {
display: none;
    margin-top: 13px;
    padding: 10px 12px;
    border-radius: 9px;
    color: #ff9aab;
    border: 1px solid rgba(255, 101, 128, 0.2);
    background: rgba(255, 76, 108, 0.07);
    font-size: 11px;
    line-height: 1.55;
}

#consultationModal .form-error.is-visible {
display: block;
}

#consultationModal .conversation {
min-height: 380px;
    max-height: 440px;
    overflow-y: auto;
    padding: 6px 5px 20px;
}

#consultationModal .chat-row {
display: flex;
    margin: 11px 0;
}

#consultationModal .chat-row.user {
justify-content: flex-end;
}

#consultationModal .chat-bubble {
max-width: 77%;
    padding: 13px 15px;
    border-radius: 15px;
    color: #bcc5de;
    border: 1px solid rgba(128, 115, 255, 0.14);
    background: rgba(48, 43, 106, 0.18);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

#consultationModal .chat-row.user .chat-bubble {
color: #fff;
    border-color: transparent;
    border-bottom-right-radius: 5px;
    background:
        linear-gradient(
            135deg,
            #6350d5,
            #416ec1
        );
}

#consultationModal .chat-row.assistant .chat-bubble {
border-bottom-left-radius: 5px;
}

#consultationModal .assistant-working {
min-height: 34px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8290b3;
    font-size: 10px;
}

#consultationModal .assistant-working span {
width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7869d3;
}

#consultationModal .followup-form {
position: relative;
    display: flex;
    gap: 9px;
    margin-top: 8px;
}

#consultationModal .followup-form textarea {
min-height: 68px;
    resize: none;
    padding: 13px 58px 13px 13px;
    border-radius: 13px;
}

#consultationModal .send-button {
position: absolute;
    right: 9px;
    top: 9px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    cursor: pointer;
    color: #fff;
    background: #6353dc;
    font-size: 18px;
}

#consultationModal .summary-intro span {
color: #9b8bff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

#consultationModal .summary-intro h4,
#consultationModal .success-wrap h4 {
margin: 7px 0 7px;
    font-family: "Sora", sans-serif;
    font-size: 26px;
}

#consultationModal .summary-intro p {
margin: 0;
    color: #98a4c1;
    font-size: 12px;
}

#consultationModal .summary-card {
margin-top: 22px;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid var(--line-strong);
    background: rgba(7, 12, 30, 0.78);
}

#consultationModal .summary-meta {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#consultationModal .summary-meta > div {
padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

#consultationModal .summary-meta small,
#consultationModal .summary-text small {
display: block;
    margin-bottom: 5px;
    color: #7d89a9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#consultationModal .summary-meta strong {
color: #e1e5f2;
    font-size: 12px;
}

#consultationModal .summary-features {
display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 15px 0;
}

#consultationModal .summary-features span {
padding: 6px 8px;
    border-radius: 7px;
    color: #9da8c8;
    background: rgba(96, 78, 206, 0.1);
    border: 1px solid rgba(117, 96, 231, 0.15);
    font-size: 10px;
}

#consultationModal .summary-text {
padding-top: 15px;
    border-top: 1px solid var(--line);
}

#consultationModal .summary-text p {
margin: 0;
    color: #c3cbe0;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#consultationModal .summary-actions {
display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 19px;
}

#consultationModal .correction-form {
margin-top: 19px;
    padding: 17px;
    border-radius: 13px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.018);
}

#consultationModal .correction-form textarea {
min-height: 110px;
    resize: vertical;
    padding: 13px;
    border-radius: 10px;
}

#consultationModal .correction-actions {
display: flex;
    gap: 9px;
    margin-top: 12px;
}

#consultationModal .success-wrap {
max-width: 570px;
    margin: 60px auto 0;
    text-align: center;
}

#consultationModal .success-icon {
width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #081419;
    background:
        linear-gradient(
            135deg,
            #62e3af,
            #61c9f0
        );
    box-shadow:
        0 17px 45px rgba(80, 220, 180, 0.18);
    font-size: 28px;
    font-weight: 900;
}

#consultationModal .success-wrap > small {
color: #70d6bd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

#consultationModal .success-wrap > p {
margin: 12px auto 20px;
    color: #a8b2cc;
    font-size: 13px;
    line-height: 1.75;
}

#consultationModal .success-reference {
max-width: 350px;
    margin: 0 auto 20px;
    padding: 13px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.026);
    border: 1px solid var(--line);
}

#consultationModal .success-reference span {
display: block;
    color: #6f7a99;
    font-size: 7px;
    text-transform: uppercase;
}

#consultationModal .success-reference strong {
display: block;
    margin-top: 3px;
    color: #fff;
    font-family: "Sora", sans-serif;
    font-size: 13px;
}

@media (max-width: 1050px) {
#consultationModal .consultation-panel {
grid-template-columns: 270px 1fr;
}

#consultationModal .consultation-side {
padding: 28px 23px;
}

#consultationModal .consultation-main {
padding: 34px 30px;
}
}

@media (max-width: 760px) {
#consultationModal .header-inner .button-small {
min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
}

#consultationModal .hero-actions .button {
flex: 1 1 160px;
}

.consultation-modal {
padding: 0;
        align-items: stretch;
}

#consultationModal .consultation-panel {
width: 100%;
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: 0;
        grid-template-columns: 1fr;
        overflow-y: auto;
}

#consultationModal .consultation-side {
min-height: 230px;
        padding: 24px 20px 28px;
}

#consultationModal .modal-side-badge {
margin-top: 28px;
}

#consultationModal .consultation-side h2 {
max-width: 430px;
        font-size: 27px;
}

#consultationModal .consultation-side > p {
max-width: 500px;
}

#consultationModal .modal-points {
display: none;
}

#consultationModal .modal-side-bottom {
display: none;
}

#consultationModal .consultation-main {
max-height: none;
        overflow: visible;
        padding: 27px 18px 40px;
}

#consultationModal .consultation-head {
min-height: auto;
        padding-right: 36px;
        margin-bottom: 22px;
        flex-direction: column;
}

#consultationModal .consultation-head h3 {
font-size: 22px;
}

#consultationModal .form-grid {
grid-template-columns: 1fr;
}

#consultationModal .form-wide {
grid-column: auto;
}

#consultationModal .form-actions .button {
width: 100%;
}

#consultationModal .conversation {
min-height: 300px;
        max-height: none;
}

#consultationModal .chat-bubble {
max-width: 88%;
}

#consultationModal .summary-meta {
grid-template-columns: 1fr;
}

#consultationModal .summary-actions,
#consultationModal .correction-actions {
flex-direction: column;
}

#consultationModal .summary-actions .button,
#consultationModal .correction-actions .button {
width: 100%;
}
}

@media (max-width: 420px) {
#consultationModal .brand span {
font-size: 14px;
}

#consultationModal .header-inner .button-small {
font-size: 9px;
}
}

#consultationModal .form-grid input,
#consultationModal .form-grid textarea,
#consultationModal .followup-form textarea,
#consultationModal .correction-form textarea {
font-size: 14px;
}

#consultationModal .reference-chip span {
font-size: 8px;
}

#consultationModal .reference-chip b {
font-size: 10px;
}

#consultationModal .modal-side-bottom {
font-size: 11px;
}

#consultationModal .modal-side-bottom small {
font-size: 9px;
}

@media (max-width: 760px) {
#consultationModal .form-grid label > span,
#consultationModal .correction-form label > span {
font-size: 11px;
}

#consultationModal .form-grid input,
#consultationModal .form-grid textarea,
#consultationModal .followup-form textarea,
#consultationModal .correction-form textarea {
font-size: 16px;
}

#consultationModal .consent-notice {
font-size: 10px;
        line-height: 1.65;
}

#consultationModal .chat-bubble {
font-size: 14px;
}

#consultationModal .summary-text p {
font-size: 13px;
}

#consultationModal .summary-meta strong {
font-size: 12px;
}

#consultationModal .summary-features span {
font-size: 10px;
}
}

@media (max-width: 900px) {
#consultationModal .site-header .brand {
margin: 0 !important;
        padding: 0 !important;

        min-width: 0;
}

#consultationModal .site-header .brand img {
width: 34px !important;
        height: 34px !important;

        flex:
            0 0 34px !important;
}

#consultationModal .site-header .brand span {
font-size: 15px !important;
}
}

@media (max-width: 420px) {
#consultationModal .site-header .brand img {
width: 33px !important;
        height: 33px !important;

        flex-basis:
            33px !important;
}

#consultationModal .site-header .brand span {
font-size: 14px !important;
}
}

@media (max-width: 760px) {
#consultationModal .footer-inner .brand {
justify-content: center !important;
        margin: 0 auto !important;
}
}


/* NEXBIT_V6_LIVE_AI_INTEGRATION_END */