.fw-bold {
    font-weight: bold;
}

.logo img {
    height: 80px;
    width: 180px;
}

@media (max-width: 767px) {
    .logo img {
        max-width: 140px;
    }
}

.logo img {
    width: auto;
    max-width: 180px;
    height: 80px;
    object-fit: contain;
    display: block;
}

@media (max-width: 767px) {
    .logo img {
        max-width: 140px;
        height: 60px;
    }
}

/* =========================================================
   SMART AI DIALER INTELLIGENCE SECTION
   ========================================================= */

.smart-dialer-intelligence-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0 100px;
    background: #ffffff;
}


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

.smart-dialer-intro-row {
    margin-bottom: 95px;
}

.smart-dialer-intro-content {
    padding-right: 35px;
}

.smart-dialer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.smart-dialer-eyebrow i {
    font-size: 14px;
}

.smart-dialer-intro-content h2,
.smart-dialer-features-heading h2 {
    margin-bottom: 25px;
    color: #18233f;
    font-size: 43px;
    font-weight: 800;
    line-height: 1.18;
}

.smart-dialer-intro-content h2 span,
.smart-dialer-features-heading h2 span {
    color: #e37bf3;
}

.smart-dialer-intro-content p {
    margin-bottom: 17px;
    color: #6e7486;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
}


/* =========================================================
   INTRO HIGHLIGHTS
   ========================================================= */

.smart-dialer-intro-points {
    margin-top: 25px;
    margin-bottom: 30px;
}

.smart-dialer-intro-point {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: #30394e;
    font-size: 14px;
    font-weight: 700;
}

.smart-dialer-intro-point i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.12);
    color: #d852ed;
    font-size: 10px;
}


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

.smart-dialer-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 24px;
    border: 1px solid #d852ed;
    border-radius: 5px;
    background: #d852ed;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.smart-dialer-primary-btn i {
    transition: transform 0.3s ease;
}

.smart-dialer-primary-btn:hover {
    border-color: #18233f;
    background: #18233f;
    color: #ffffff !important;
}

.smart-dialer-primary-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   AI VISUAL PANEL
   ========================================================= */

.smart-dialer-visual {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    padding: 27px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 25px;
    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fbf4ff 52%,
            #f3e7ff 100%);
    box-shadow: 0 25px 70px rgba(50, 25, 80, 0.09);
}

.smart-dialer-visual::before {
    position: absolute;
    top: 80px;
    left: 50%;
    width: 280px;
    height: 280px;
    border: 1px dashed rgba(216, 82, 237, 0.3);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}

.smart-dialer-visual::after {
    position: absolute;
    top: 120px;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 1px dashed rgba(216, 82, 237, 0.25);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}

.smart-dialer-visual-glow {
    position: absolute;
    top: 105px;
    left: 50%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.18);
    filter: blur(45px);
    transform: translateX(-50%);
}


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

.smart-dialer-visual-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #18233f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.smart-dialer-visual-header>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smart-dialer-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28c76f;
    box-shadow: 0 0 0 5px rgba(40, 199, 111, 0.12);
}

.smart-dialer-status {
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(40, 199, 111, 0.12);
    color: #1ca35a;
    font-size: 10px;
    letter-spacing: 0;
}


/* =========================================================
   AI HUB
   ========================================================= */

.smart-dialer-ai-hub {
    position: absolute;
    z-index: 3;
    top: 145px;
    left: 50%;
    width: 185px;
    padding: 20px 12px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 15px 45px rgba(216, 82, 237, 0.15);
    text-align: center;
    transform: translateX(-50%);
}

.smart-dialer-ai-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, #d852ed, #8f4de8);
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.3);
}

.smart-dialer-ai-hub h4 {
    margin-bottom: 7px;
    color: #18233f;
    font-size: 14px;
    font-weight: 800;
}

.smart-dialer-ai-hub p {
    margin: 0;
    color: #85899b;
    font-size: 10px;
    line-height: 1.6;
}


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

.smart-dialer-node {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 175px;
    padding: 11px;
    border: 1px solid rgba(216, 82, 237, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 25px rgba(30, 20, 50, 0.06);
}

.smart-dialer-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.11);
    color: #d852ed;
    font-size: 13px;
}

.smart-dialer-node strong {
    display: block;
    margin-bottom: 3px;
    color: #273149;
    font-size: 11px;
    font-weight: 800;
}

.smart-dialer-node small {
    display: block;
    color: #9498a8;
    font-size: 9px;
    line-height: 1.4;
}

.smart-dialer-node-one {
    top: 95px;
    left: 25px;
}

.smart-dialer-node-two {
    top: 95px;
    right: 25px;
}

.smart-dialer-node-three {
    bottom: 95px;
    left: 25px;
}

.smart-dialer-node-four {
    right: 25px;
    bottom: 95px;
}


/* =========================================================
   VISUAL FOOTER
   ========================================================= */

.smart-dialer-visual-footer {
    position: absolute;
    right: 27px;
    bottom: 22px;
    left: 27px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid rgba(24, 35, 63, 0.08);
}

.smart-dialer-visual-footer strong {
    display: block;
    margin-bottom: 3px;
    color: #18233f;
    font-size: 11px;
    font-weight: 800;
}

.smart-dialer-visual-footer span {
    color: #9296a6;
    font-size: 10px;
}

.smart-dialer-visual-footer>i {
    color: #d852ed;
    font-size: 16px;
}


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

.smart-dialer-features-heading {
    max-width: 650px;
    margin: 0 auto 45px;
    text-align: center;
}

.smart-dialer-features-heading h2 {
    margin-bottom: 18px;
    font-size: 38px;
}

.smart-dialer-features-heading p {
    margin: 0;
    color: #777e91;
    font-size: 14px;
    line-height: 1.8;
}


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

.smart-dialer-features-row {
    row-gap: 25px;
}

.smart-dialer-feature-card {
    position: relative;
    height: 100%;
    padding: 30px;
    border: 1px solid #ece7f0;
    border-radius: 17px;
    background: #ffffff;
    transition: all 0.35s ease;
}

.smart-dialer-feature-card:hover {
    border-color: #d852ed;
    box-shadow: 0 18px 40px rgba(216, 82, 237, 0.1);
    transform: translateY(-7px);
}

.smart-dialer-feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.smart-dialer-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.1);
    color: #d852ed;
    font-size: 19px;
    transition: all 0.3s ease;
}

.smart-dialer-feature-card:hover .smart-dialer-feature-icon {
    background: #d852ed;
    color: #ffffff;
}

.smart-dialer-feature-top>span {
    color: #c5bdca;
    font-size: 13px;
    font-weight: 800;
}

.smart-dialer-feature-card h3 {
    margin-bottom: 13px;
    color: #202b45;
    font-size: 19px;
    font-weight: 800;
}

.smart-dialer-feature-card p {
    min-height: 78px;
    margin-bottom: 22px;
    color: #7d8394;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.85;
}

.smart-dialer-feature-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 17px;
    border-top: 1px solid #f0ebf2;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
}

.smart-dialer-feature-link i {
    transition: transform 0.3s ease;
}

.smart-dialer-feature-card:hover .smart-dialer-feature-link i {
    transform: translateX(5px);
}

.smart-dialer-feature-wide p {
    min-height: auto;
}


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

@media (max-width: 1199px) {

    .smart-dialer-intro-content h2 {
        font-size: 37px;
    }

    .smart-dialer-visual {
        min-height: 450px;
    }

    .smart-dialer-node {
        width: 160px;
    }

    .smart-dialer-node-one,
    .smart-dialer-node-three {
        left: 15px;
    }

    .smart-dialer-node-two,
    .smart-dialer-node-four {
        right: 15px;
    }

}


@media (max-width: 991px) {

    .smart-dialer-intelligence-section {
        padding: 75px 0;
    }

    .smart-dialer-intro-content {
        padding-right: 0;
        margin-bottom: 45px;
    }

    .smart-dialer-intro-content h2 {
        font-size: 36px;
    }

    .smart-dialer-visual {
        max-width: 620px;
        margin: 0 auto;
    }

    .smart-dialer-features-heading h2 {
        font-size: 34px;
    }

}


@media (max-width: 767px) {

    .smart-dialer-intelligence-section {
        padding: 60px 0;
    }

    .smart-dialer-intro-row {
        margin-bottom: 65px;
    }

    .smart-dialer-intro-content h2 {
        font-size: 31px;
    }

    .smart-dialer-intro-content p {
        font-size: 14px;
    }

    .smart-dialer-visual {
        min-height: 440px;
        padding: 20px;
        border-radius: 18px;
    }

    .smart-dialer-node {
        width: 145px;
        padding: 9px;
    }

    .smart-dialer-node-one,
    .smart-dialer-node-three {
        left: 10px;
    }

    .smart-dialer-node-two,
    .smart-dialer-node-four {
        right: 10px;
    }

    .smart-dialer-node-one,
    .smart-dialer-node-two {
        top: 90px;
    }

    .smart-dialer-node-three,
    .smart-dialer-node-four {
        bottom: 85px;
    }

    .smart-dialer-ai-hub {
        top: 145px;
    }

    .smart-dialer-visual-footer {
        right: 20px;
        bottom: 18px;
        left: 20px;
    }

    .smart-dialer-features-heading h2 {
        font-size: 29px;
    }

    .smart-dialer-feature-card {
        padding: 25px;
    }

}


@media (max-width: 480px) {

    .smart-dialer-intro-content h2 {
        font-size: 28px;
    }

    .smart-dialer-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .smart-dialer-visual {
        min-height: 420px;
        padding: 16px;
    }

    .smart-dialer-node {
        width: 130px;
    }

    .smart-dialer-node-icon {
        width: 29px;
        height: 29px;
        font-size: 11px;
    }

    .smart-dialer-node strong {
        font-size: 9px;
    }

    .smart-dialer-node small {
        font-size: 8px;
    }

    .smart-dialer-node-one,
    .smart-dialer-node-three {
        left: 8px;
    }

    .smart-dialer-node-two,
    .smart-dialer-node-four {
        right: 8px;
    }

    .smart-dialer-ai-hub {
        width: 155px;
        padding: 15px 8px;
    }

    .smart-dialer-ai-hub h4 {
        font-size: 12px;
    }

    .smart-dialer-ai-hub p {
        font-size: 9px;
    }

    .smart-dialer-ai-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .smart-dialer-visual-footer span {
        font-size: 8px;
    }

    .smart-dialer-feature-card h3 {
        font-size: 17px;
    }

}

/* =====================================================
   SMART AI DIALER WORKFLOW SECTION
===================================================== */

.smart-workflow-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 110px;
    background: #f7f9fc;
}


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

.smart-workflow-heading {
    max-width: 800px;
    margin: 0 auto 48px;
    text-align: center;
}

.smart-workflow-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.smart-workflow-eyebrow i {
    font-size: 13px;
}

.smart-workflow-heading h2 {
    margin-bottom: 20px;
    color: #18233f;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
}

.smart-workflow-heading h2 span {
    color: #d852ed;
}

.smart-workflow-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: #737c90;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


/* =====================================================
   MAIN IMAGE CONTAINER
===================================================== */

.smart-workflow-main {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 65px;
}

.smart-workflow-image-wrapper {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(36, 40, 70, 0.09);
    transition: all 0.3s ease;
}

.smart-workflow-image-wrapper:hover {
    border-color: rgba(216, 82, 237, 0.6);
    box-shadow: 0 25px 70px rgba(216, 82, 237, 0.12);
}


/* =====================================================
   IMAGE TOP BAR
===================================================== */

.smart-workflow-image-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 22px;
    border-bottom: 1px solid #eeeeF3;
    background: #ffffff;
}

.smart-workflow-window-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.smart-workflow-window-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9dce5;
}

.smart-workflow-window-dots span:nth-child(1) {
    background: #eaa8b4;
}

.smart-workflow-window-dots span:nth-child(2) {
    background: #edce91;
}

.smart-workflow-window-dots span:nth-child(3) {
    background: #a6d8b7;
}

.smart-workflow-window-label {
    color: #858b9b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.smart-workflow-live-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #5d687d;
    font-size: 10px;
    font-weight: 700;
}

.smart-workflow-live-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35bd79;
    box-shadow: 0 0 0 4px rgba(53, 189, 121, 0.12);
}


/* =====================================================
   IMAGE AREA
===================================================== */

.smart-workflow-image-area {
    position: relative;
    padding: 25px 35px;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(216, 82, 237, 0.08),
            transparent 55%);
}

.smart-workflow-image-area img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    transition: transform 0.4s ease;
}

.smart-workflow-image-wrapper:hover .smart-workflow-image-area img {
    transform: scale(1.015);
}


/* =====================================================
   FLOATING INFORMATION CARDS
===================================================== */

.smart-workflow-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 215px;
    padding: 15px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 35px rgba(32, 36, 65, 0.1);
}

.smart-workflow-card-left {
    bottom: 40px;
    left: -35px;
}

.smart-workflow-card-right {
    top: 45px;
    right: -35px;
}

.smart-workflow-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.11);
    color: #d852ed;
    font-size: 14px;
}

.smart-workflow-floating-card strong {
    display: block;
    margin-bottom: 4px;
    color: #202b45;
    font-size: 11px;
    font-weight: 800;
}

.smart-workflow-floating-card small {
    display: block;
    color: #8990a2;
    font-size: 9px;
    line-height: 1.4;
}


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

.smart-workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.smart-workflow-step {
    position: relative;
    padding: 30px 25px;
    border: 1px solid #e9eaf0;
    border-radius: 15px;
    background: #ffffff;
    transition: all 0.35s ease;
}

.smart-workflow-step:hover {
    border-color: #d852ed;
    box-shadow: 0 15px 35px rgba(216, 82, 237, 0.1);
    transform: translateY(-6px);
}

.smart-workflow-step-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #d8dce6;
    font-size: 13px;
    font-weight: 800;
}

.smart-workflow-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 23px;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.1);
    color: #d852ed;
    font-size: 18px;
    transition: all 0.3s ease;
}

.smart-workflow-step:hover .smart-workflow-step-icon {
    background: #d852ed;
    color: #ffffff;
}

.smart-workflow-step h3 {
    margin-bottom: 12px;
    color: #202b45;
    font-size: 17px;
    font-weight: 800;
}

.smart-workflow-step p {
    min-height: 95px;
    margin: 0;
    color: #7d8598;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .smart-workflow-card-left {
        left: -15px;
    }

    .smart-workflow-card-right {
        right: -15px;
    }

    .smart-workflow-steps {
        gap: 15px;
    }

}


@media (max-width: 991px) {

    .smart-workflow-section {
        padding: 80px 0;
    }

    .smart-workflow-heading h2 {
        font-size: 40px;
    }

    .smart-workflow-main {
        max-width: 750px;
    }

    .smart-workflow-floating-card {
        display: none;
    }

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

}


@media (max-width: 767px) {

    .smart-workflow-section {
        padding: 65px 0;
    }

    .smart-workflow-heading {
        margin-bottom: 30px;
    }

    .smart-workflow-heading h2 {
        font-size: 31px;
    }

    .smart-workflow-heading p {
        font-size: 13px;
    }

    .smart-workflow-image-topbar {
        min-height: 45px;
        padding: 0 14px;
    }

    .smart-workflow-window-label {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .smart-workflow-live-status {
        font-size: 8px;
    }

    .smart-workflow-image-area {
        padding: 18px 12px;
    }

    .smart-workflow-steps {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .smart-workflow-step p {
        min-height: auto;
    }

    .smart-workflow-step {
        padding: 25px;
    }

}

/* =========================================================
   INDUSTRIES DROPDOWN
========================================================= */

.industries-dropdown {
    position: relative;
}


/* =========================================================
   SUBMENU
========================================================= */

.industries-dropdown .industries-submenu {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;

    width: 255px;
    min-width: 255px;

    background: #fff;

    padding: 10px 0 !important;
    margin: 0 !important;

    z-index: 99999;

    box-shadow: 1px 1px 8px 0 rgba(87, 86, 86, 0.20);

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}


/* =========================================================
   DESKTOP - SHOW SUBMENU
========================================================= */

@media (min-width: 992px) {

    .industries-dropdown:hover .industries-submenu {
        display: block;
    }

}


/* =========================================================
   SUBMENU LI
========================================================= */

.industries-submenu li {
    position: relative;

    width: 100%;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;

    border: none !important;
    border-bottom: none !important;

    box-shadow: none !important;
}


/* =========================================================
   SUBMENU LINK
========================================================= */

.industries-submenu li a {
    position: relative;

    display: block;

    width: 100%;
    height: auto !important;

    padding: 8px 20px !important;
    margin: 0 !important;

    line-height: 1.4 !important;

    white-space: nowrap;

    color: #333 !important;

    background: transparent !important;

    text-decoration: none !important;

    border: none !important;
    border-bottom: none !important;

    box-shadow: none !important;

    /*
     * Important:
     * padding same rahega.
     * Isse hover par item ki thickness/height change nahi hogi.
     */

    transition: color 0.25s ease;
}


/* =========================================================
   REMOVE THEME PSEUDO LINES
========================================================= */

.industries-submenu li::after,
.industries-submenu li a::before,
.industries-submenu li a::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   DESKTOP HOVER EFFECT
========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       SMALL PINK LINE
       Normally hidden
    ----------------------------------------------------- */

    .industries-submenu li::before {
        content: "";

        position: absolute;

        left: 5px;
        top: 50%;

        width: 10px;
        height: 2px;

        background: #D852ED;

        border-radius: 10px;

        transform: translateY(-50%) scaleX(0);

        transform-origin: left center;

        opacity: 0;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease;

        z-index: 10;
    }


    /* -----------------------------------------------------
       SHOW LINE ONLY ON HOVERED LI
    ----------------------------------------------------- */

    .industries-submenu li:hover::before {
        transform: translateY(-50%) scaleX(1);

        opacity: 1;
    }


    /* -----------------------------------------------------
       HOVER TEXT
    ----------------------------------------------------- */

    .industries-submenu li:hover a {
        color: #D852ED !important;

        background: transparent !important;

        border: none !important;
        border-bottom: none !important;

        box-shadow: none !important;

        /*
         * Text visually 5px right.
         * Padding change nahi kar rahe.
         */
        text-indent: 5px;
    }

}


/* =========================================================
   MOBILE / TABLET
   NO PINK LINE
========================================================= */

@media (max-width: 991px) {

    .industries-dropdown .industries-submenu {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }


    /* No pink line */

    .industries-submenu li::before {
        content: none !important;
        display: none !important;
    }


    /* Normal mobile link */

    .industries-submenu li a {
        padding: 8px 15px !important;

        color: #333 !important;

        background: transparent !important;

        border: none !important;
        border-bottom: none !important;

        box-shadow: none !important;

        text-indent: 0 !important;
    }


    /* Mobile hover */

    .industries-submenu li a:hover {
        color: #D852ED !important;

        background: transparent !important;

        border: none !important;
        border-bottom: none !important;

        box-shadow: none !important;

        text-indent: 0 !important;
    }

}

/* =========================================================
   Contact Page?
   ========================================================= */

/* Contact Us Hero Section */
.contact-hero-slider {
    margin-top: 20vh;
    width: 100%;
    overflow: hidden;
}

/* Sky Blue Background */
.contact-hero-slider .single-slider {
    /* background-color: #e6f6ff; */
    min-height: 420px;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Container */
.contact-hero-slider .container-fluid {
    width: 100%;
    padding: 0 !important;
}

/* Row */
.contact-hero-slider .row {
    width: 100%;
    margin: 0 !important;
}

/* Column */
.contact-hero-slider .col-12 {
    padding: 0 !important;
}

/* Image Wrapper */
.contact-hero-image {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

/* Image */
.contact-hero-image img {
    width: 100%;
    max-width: 1000px;
    height: 500px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Desktop */
@media (min-width: 992px) {

    .contact-hero-slider .single-slider {
        min-height: 420px;
    }

    .contact-hero-image {
        width: 100%;
        text-align: center;
    }

    .contact-hero-image img {
        width: 1000px;
        max-width: 100%;
        height: 500px;
        margin: 0 auto;
    }

}

/* Tablet */
@media (max-width: 991px) {

    .contact-hero-slider {
        margin-top: 12vh;
    }

    .contact-hero-slider .single-slider {
        min-height: auto;
        padding: 0;
    }

    .contact-hero-image {
        width: 100%;
    }

    .contact-hero-image img {
        width: 100%;
        max-width: 100%;
        height: 500px;
        margin: 0 auto;
    }

}

/* Mobile */
@media (max-width: 767px) {

    .contact-hero-slider {
        margin-top: 80px;
    }

    .contact-hero-slider .single-slider {
        min-height: auto;
        padding: 0;
    }

    .contact-hero-image {
        width: 100%;
    }

    .contact-hero-image img {
        width: 100%;
        max-width: 100%;
        height: 500px;
        margin: 0 auto;
        object-fit: contain;
    }

}

/* =========================================================
   what is smart AI Dialer?
   ========================================================= */
.smart-ai-dialer-area {
    background-color: #faf3ff;
    padding: 70px 0 60px;
}

.smart-dialer-title {
    margin-bottom: 20px;
}

.smart-dialer-title h2 {
    margin-bottom: 0;
}

.smart-dialer-description {
    margin-bottom: 35px;
}

.smart-dialer-description p {
    color: #555;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 8px;
}

.smart-dialer-content {
    margin-top: 10px;
}

.smart-dialer-point {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.smart-point-number {
    min-width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    background: #D852ED;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-right: 15px;
}

.smart-point-content h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.smart-point-content p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
}

.smart-dialer-image {
    text-align: center;
    padding-left: 25px;
    width: 100%;
}

/* =========================================
   AI AGENT INTRO SECTION
========================================= */

.ai-agent-intro-section {
    width: 100%;
    padding: 3px 0;
    background: #D852ED;
    overflow: hidden;
    box-sizing: border-box;
}

.ai-agent-intro-section *,
.ai-agent-intro-section *::before,
.ai-agent-intro-section *::after {
    box-sizing: border-box;
}


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

.ai-agent-intro-section .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* =========================================
   ROW
========================================= */

.ai-agent-intro-row {
    width: 100%;
    margin: 0;
}


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

.ai-agent-intro-content {
    width: 100%;
    padding-right: 30px;
}

.ai-agent-intro-content h3 {
    width: 100%;
    max-width: 700px;

    margin: 0;
    padding: 0;

    font-size: 28px;
    line-height: 1.35;
    font-weight: 600;

    color: #ffffff;

    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* =========================================
   IMAGE AREA
========================================= */

.ai-agent-intro-visual {
    width: 100%;
    display: flex;

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

    padding: 0;
    margin: 0;
}

.ai-agent-intro-visual img {
    display: block;

    width: 100%;
    max-width: 450px;
    height: auto;

    margin: 0 auto;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (max-width: 1199px) {

    .ai-agent-intro-section {
        padding: 70px 0;
    }

    .ai-agent-intro-content {
        padding-right: 20px;
    }

    .ai-agent-intro-content h3 {
        font-size: 34px;
        line-height: 1.35;
    }

    .ai-agent-intro-visual img {
        max-width: 400px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .ai-agent-intro-section {
        padding: 60px 0;
    }

    .ai-agent-intro-content {
        padding-right: 0;
        text-align: center;
    }

    .ai-agent-intro-content h3 {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;

        font-size: 31px;
        line-height: 1.4;
    }

    .ai-agent-intro-visual {
        margin-top: 40px;
    }

    .ai-agent-intro-visual img {
        width: 75%;
        max-width: 400px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ai-agent-intro-section {
        padding: 50px 15px;
    }

    .ai-agent-intro-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    .ai-agent-intro-content {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .ai-agent-intro-content h3 {
        width: 100%;
        max-width: 100%;

        font-size: 26px;
        line-height: 1.45;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .ai-agent-intro-visual {
        width: 100%;
        margin-top: 35px;
        padding: 0;
    }

    .ai-agent-intro-visual img {
        width: 85%;
        max-width: 350px;
        height: auto;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 575px) {

    .ai-agent-intro-section {
        padding: 45px 15px;
    }

    .ai-agent-intro-content h3 {
        font-size: 24px;
        line-height: 1.45;
    }

    .ai-agent-intro-visual {
        margin-top: 30px;
    }

    .ai-agent-intro-visual img {
        width: 90%;
        max-width: 320px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .ai-agent-intro-section {
        padding: 40px 12px;
    }

    .ai-agent-intro-content h3 {
        font-size: 21px;
        line-height: 1.5;
    }

    .ai-agent-intro-visual {
        margin-top: 25px;
    }

    .ai-agent-intro-visual img {
        width: 92%;
        max-width: 290px;
    }
}

/* =========================================================
    New Section
   ========================================================= */
.custom-image-section {
    margin-top: 60px;

    width: 100%;
    background-color: #EAF7FF;
    padding: 40px 0;
}

.custom-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-image-container img {

    display: block;
    border-radius: 16px;
}

/* =========================================================
   Automate customer 
   ========================================================= */
.ai-agent-section {
    height: 330px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 !important;
}

.ai-agent-section .container,
.ai-agent-section .row {
    width: 100%;
}

.ai-agent-section h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1.4;
    font-weight: 500;
    color: #fff;
}

.app-img img {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
}

/* =========================================================
   Responsive
   ========================================================= */



/* Slider image full section ke according */
.slider-area .single-slider {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.slider-area .hero__img {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center;
}

.slider-area .hero__img img.ai-about-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
}


/* Main mega menu */
.main-header .main-menu ul ul.submenu.solutions-submenu {
    position: absolute !important;
    width: 600px !important;
    min-width: 600px !important;
    left: 0 !important;
    top: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    visibility: hidden;
    opacity: 0;
    z-index: 9999 !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.10) !important;
    transition: all 0.3s ease !important;
}

.ai-agent-section {
    min-height: 300px;
}

.smart-dialer-image {
    padding-top: 20px;
    padding-bottom: 20px;
}

.smart-dialer-image img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   About Smart AI Dialer Section
   ========================================================= */




/* About Us Hero Section */
.about-hero-slider {
    margin-top: 20vh;
    width: 100%;
    overflow: hidden;
}

/* Sky Blue Background */
.about-hero-slider .single-slider {

    min-height: 420px;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Container */
.about-hero-slider .container-fluid {
    width: 100%;
    padding: 0 !important;
}

/* Row */
.about-hero-slider .row {
    width: 100%;
    margin: 0 !important;
}

/* Column */
.about-hero-slider .col-12 {
    padding: 0 !important;
}

/* Image Wrapper */
.about-hero-image {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

/* Image */
.about-hero-image img {
    width: 100%;
    max-width: 2200px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Desktop */
@media (min-width: 992px) {

    .about-hero-slider .single-slider {
        min-height: 420px;
    }

    .about-hero-image {
        width: 100%;
        text-align: center;
    }

    .about-hero-image img {
        width: 100%;
        max-width: 2200px;
        height: auto;
        margin: 0 auto;
    }

}

/* Tablet */
@media (max-width: 991px) {

    .about-hero-slider {
        margin-top: 12vh;
    }

    .about-hero-slider .single-slider {
        min-height: auto;
        padding: 0;
    }

    .about-hero-image {
        width: 100%;
    }

    .about-hero-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

}

/* Mobile */
@media (max-width: 767px) {

    .about-hero-slider {
        margin-top: 80px;
    }

    .about-hero-slider .single-slider {
        min-height: auto;
        padding: 0;
    }

    .about-hero-image {
        width: 100%;
    }

    .about-hero-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

}

/*======================= Smart AI Dialer Section About ==================
==========================================================================*/
/* Smart AI Dialer Bullet Points */

.light-sky-section {
    background-color: #FFF;
    padding: 40px 0 60px;
}

/* Paragraph Color */
.light-sky-section .smart-dialer-description p {
    color: #333333;
}

/* Heading Color */
.light-sky-section .smart-dialer-title h2 {
    color: #011a33;
}

.smart-ai-dialer-area {
    padding: 40px 0 70px;
}

/* Section Heading */
.smart-ai-dialer-area .smart-dialer-title {
    margin-bottom: 20px;
}

.smart-ai-dialer-area .smart-dialer-title h2 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.3;
}

/* Description */
.smart-dialer-description {
    text-align: left;
    margin-bottom: 15px;
}

.smart-dialer-description p {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 18px;
}

/* Content */
.smart-dialer-content {
    margin-top: 25px;
}

/* Points */
.smart-point-content h3 {
    font-size: 25px;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
}

/* Bullet List */
.smart-dialer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.smart-dialer-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 13px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/*===========================================================
   Why we created Smart AI Dialer Section
   ========================================================= */

/* Why We Created Smart AI Dialer */
.why-smart-ai-section {
    background-color: #e7f3fa;
    padding: 55px 0 65px;
}

/* Heading */
.why-smart-ai-section .smart-dialer-title {
    margin-bottom: 25px;
}

.why-smart-ai-section .smart-dialer-title h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
    color: #222;
}

/* Content */
.why-smart-ai-section .smart-dialer-content {
    margin-top: 15px;
}

/* Paragraph */
.why-smart-ai-section .smart-point-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

/* Image Left */
.why-smart-ai-section .smart-dialer-image {
    text-align: center;
}

.why-smart-ai-section .smart-dialer-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Mobile Responsive */
@media (max-width: 767px) {

    .why-smart-ai-section {
        padding: 35px 0 45px;
    }

    .why-smart-ai-section .smart-dialer-title h2 {
        font-size: 28px;
    }

    .why-smart-ai-section .smart-dialer-content {
        padding: 15px !important;
    }

    .why-smart-ai-section .smart-dialer-image {
        margin-bottom: 30px;
    }

    .why-smart-ai-section .smart-point-content p {
        font-size: 15px;
        line-height: 1.7;
    }

}

/* Purple Bullet */
.smart-dialer-list li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #D852ED;
    font-size: 16px;
}

/* Image */
.smart-dialer-image {
    text-align: center;
}

.smart-dialer-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Mobile */
@media (max-width: 767px) {

    .smart-ai-dialer-area {
        padding: 25px 0 40px;
    }

    .smart-ai-dialer-area .smart-dialer-title h2 {
        font-size: 28px;
    }

    .smart-dialer-description p {
        font-size: 15px;
        line-height: 1.7;
    }

    .smart-point-content h3 {
        font-size: 21px;
    }

    .smart-dialer-content {
        padding: 15px !important;
    }

    .smart-dialer-image {
        margin-top: 30px;
    }

}

/* =========================================================
   goal
   ========================================================= */

/* =========================================================
   SHOW MENU
   ========================================================= */
.main-header .main-menu ul li:hover>ul.submenu.solutions-submenu {
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   EACH COLUMN / SECTION
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li {

    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px 25px !important;
    box-sizing: border-box !important;
    list-style: none !important;
}

/* =========================================================
   HEADINGS
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li>strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222 !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    text-transform: capitalize !important;
}


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

.main-header .main-menu ul ul.submenu.solutions-submenu>li>a {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-decoration: none !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}


/* =========================================================
   LINK HOVER
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li>a:hover {
    color: #a60dcf !important;
    padding-left: 15px !important;
}


/* =========================================================
   SMALL HOVER LINE
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li>a::before {
    position: absolute !important;
    content: "" !important;
    left: 0 !important;
    top: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: #a60dcf !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
}


.main-header .main-menu ul ul.submenu.solutions-submenu>li>a:hover::before {
    width: 8px !important;
}

/* =========================================================
   VERTICAL DIVIDER
   Between:
   Dialer | Industries
   AI Calling | Contact Center
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li:nth-child(1),

.main-header .main-menu ul ul.submenu.solutions-submenu>li:nth-child(3) {
    border-right: 1px solid #e5e5e5 !important;
}


/* =========================================================
   HORIZONTAL DIVIDER
   Between:
   Dialer / Industries
   --------------------
   AI Calling / Contact
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li:nth-child(1),

.main-header .main-menu ul ul.submenu.solutions-submenu>li:nth-child(2) {
    border-bottom: 1px solid #e5e5e5 !important;
}


/* =========================================================
   REMOVE APPCO DEFAULT SUBMENU BEHAVIOR
   ========================================================= */

.main-header .main-menu ul ul.submenu.solutions-submenu>li>ul {
    position: static !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


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

@media (max-width: 991px) {
    .main-header .main-menu ul ul.submenu.solutions-submenu {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        position: static !important;
        box-shadow: none !important;
    }

    .main-header .main-menu ul ul.submenu.solutions-submenu>li {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
    }

}

.blog-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* =========================================================
   Industries BPO 
   ========================================================= */

/* Smart AI Dialer Cards */

.smart-dialer-card {
    background: #ffffff;
    margin-top: 20px 20px;
    border-radius: 15px;
    padding: 30px 25px;
    text-align: center;
    height: 100%;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
}

/* Six Cards Row */

.smart-ai-dialer-area .row.g-4 {
    row-gap: 20px !important;
    column-gap: 0;
}

.smart-dialer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Card Icon */

.smart-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fbeaff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smart-card-icon i {
    font-size: 30px;
    color: #D852ED;
}

/* Card Content */

.smart-card-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222222;
}

.smart-card-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #666666;
    margin-bottom: 15px;
}

.smart-card-content p:last-child {
    margin-bottom: 0;
}

/* Tablet */

@media (max-width: 991px) {

    .smart-dialer-card {
        padding: 25px 20px;
    }

    .smart-card-content h3 {
        font-size: 20px;
    }

}

/* Mobile */

@media (max-width: 575px) {

    .smart-ai-dialer-area {
        padding: 40px 0;
    }

    .smart-dialer-card {
        padding: 25px 20px;
    }

    .smart-card-content h3 {
        font-size: 19px;
    }

    .smart-card-content p {
        font-size: 15px;
        line-height: 1.7;
    }

}

/* =========================================
   BPO AI BENEFITS PROFESSIONAL SECTION
========================================= */

.bpo-ai-benefits-pro-section {
    position: relative;
    padding: 100px 0;

    overflow: hidden;
}

.bpo-ai-benefits-pro-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -150px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.07);
    pointer-events: none;
}

.bpo-ai-benefits-pro-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -120px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.05);
    pointer-events: none;
}


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

.bpo-ai-benefits-pro-heading {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 55px;
}

.bpo-ai-benefits-pro-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid rgba(216, 82, 237, 0.28);
    border-radius: 50px;
    background: rgba(216, 82, 237, 0.06);
    color: #b13bc7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.bpo-ai-benefits-pro-tag i {
    font-size: 12px;
}

.bpo-ai-benefits-pro-heading h2 {
    margin: 22px 0 18px;
    color: #211b2b;
    font-size: 43px;
    line-height: 1.18;
    font-weight: 700;
}

.bpo-ai-benefits-pro-heading h2 span {
    color: #d852ed;
}

.bpo-ai-benefits-pro-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #777080;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   BENTO GRID
========================================= */

.bpo-ai-benefits-pro-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


/* =========================================
   MAIN FEATURE PANEL
========================================= */

.bpo-ai-benefits-pro-main-panel {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 420px;
    padding: 32px;
    border-radius: 24px;
    background-color: #FFFFFF;

    box-shadow: 0 18px 45px rgba(46, 24, 54, 0.13);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}

.bpo-ai-benefits-pro-main-panel::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    bottom: -70px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 25px rgba(255, 255, 255, 0.025),
        0 0 0 50px rgba(255, 255, 255, 0.025);
}

.bpo-ai-benefits-pro-main-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bpo-ai-benefits-pro-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d8a7e4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.bpo-ai-benefits-pro-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #77e5b1;
    box-shadow: 0 0 0 5px rgba(119, 229, 177, 0.1);
}

.bpo-ai-benefits-pro-main-top>i {
    color: #cba4d5;
    font-size: 14px;
}

.bpo-ai-benefits-pro-main-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 52px 0 25px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: #e99bfa;
    font-size: 30px;
}

.bpo-ai-benefits-pro-main-panel h3 {
    margin-bottom: 20px;
    font-size: 31px;
    line-height: 1.3;
    font-weight: 400;
}

.bpo-ai-benefits-pro-main-panel h3 strong {
    color: #e58cf7;
    font-weight: 700;
}

.bpo-ai-benefits-pro-main-panel p {
    max-width: 410px;
    margin-bottom: 40px;
    color: #d0c2d5;
    font-size: 13px;
    line-height: 1.9;
}

.bpo-ai-benefits-pro-main-footer {
    display: flex;
    gap: 38px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bpo-ai-benefits-pro-main-footer div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bpo-ai-benefits-pro-main-footer strong {
    color: #ffffff;
    font-size: 12px;
}

.bpo-ai-benefits-pro-main-footer small {
    color: #a999b0;
    font-size: 10px;
}


/* =========================================
   BENEFIT ITEMS
========================================= */

.bpo-ai-benefits-pro-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    padding: 25px;
    border: 1px solid #eee7f1;
    border-radius: 20px;
    background: #ffffff;
    transition: all 0.3s ease;
    overflow: hidden;
}

.bpo-ai-benefits-pro-item:hover {
    border-color: #d852ed;
    box-shadow: 0 14px 35px rgba(216, 82, 237, 0.12);
    transform: translateY(-5px);
}

.bpo-ai-benefits-pro-item.bpo-ai-benefits-pro-purple {
    background: #f8effb;
    border-color: #f0d9f5;
}

.bpo-ai-benefits-pro-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.bpo-ai-benefits-pro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: #f5e8f8;
    color: #c348da;
    font-size: 17px;
}

.bpo-ai-benefits-pro-purple .bpo-ai-benefits-pro-icon {
    background: #ffffff;
}

.bpo-ai-benefits-pro-item-top>span {
    color: #bcb0c2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.bpo-ai-benefits-pro-item h4 {
    max-width: 230px;
    margin-bottom: 11px;
    color: #29212f;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
}

.bpo-ai-benefits-pro-item p {
    margin: 0;
    color: #887d8e;
    font-size: 13px;
    line-height: 1.8;
}

.bpo-ai-benefits-pro-line {
    width: 35px;
    height: 3px;
    margin-top: auto;
    padding-top: 16px;
    border-bottom: 2px solid #d852ed;
}


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

.bpo-ai-benefits-pro-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 22px;
    padding: 25px 30px;
    border: 1px solid #eaddec;
    border-radius: 20px;
    background: #ffffff;
}

.bpo-ai-benefits-pro-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: #f7e7fb;
    color: #d852ed;
    font-size: 22px;
}

.bpo-ai-benefits-pro-bottom>div:nth-child(2) {
    flex: 1;
}

.bpo-ai-benefits-pro-bottom h4 {
    margin-bottom: 6px;
    color: #29212f;
    font-size: 17px;
    font-weight: 700;
}

.bpo-ai-benefits-pro-bottom p {
    margin: 0;
    color: #887d8e;
    font-size: 12px;
    line-height: 1.7;
}

.bpo-ai-benefits-pro-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
    padding: 14px 21px;
    border-radius: 10px;
    background: #d852ed;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bpo-ai-benefits-pro-btn:hover {
    background: #b83ed0;
    color: #ffffff;
    transform: translateX(3px);
}

/* =========================================
   LARGE MAIN BOX - WHITE PROFESSIONAL STYLE
========================================= */

.bpo-ai-benefits-pro-main-panel {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 420px;
    padding: 32px;

    background: #ffffff;
    color: #29212f;

    border: 1px solid #eee7f1;
    border-radius: 24px;

    box-shadow: 0 10px 30px rgba(45, 25, 55, 0.06);

    position: relative;
    overflow: hidden;

    transition: all 0.3s ease;
}

/* Pink outline on hover */

.bpo-ai-benefits-pro-main-panel:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 35px rgba(216, 82, 237, 0.16);
    transform: translateY(-5px);
}


/* Top Status Text */

.bpo-ai-benefits-pro-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Top Right Icon */

.bpo-ai-benefits-pro-main-top>i {
    color: #D852ED;
    font-size: 14px;
}


/* Main Icon */

.bpo-ai-benefits-pro-main-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;
    margin: 52px 0 25px;

    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 20px;

    background: #f9edfc;
    color: #D852ED;

    font-size: 30px;
}


/* Main Heading */

.bpo-ai-benefits-pro-main-panel h3 {
    margin-bottom: 20px;

    color: #29212f;
    font-size: 31px;
    line-height: 1.3;
    font-weight: 700;
}

.bpo-ai-benefits-pro-main-panel h3 strong {
    color: #D852ED;
    font-weight: 700;
}


/* Main Description */

.bpo-ai-benefits-pro-main-panel p {
    max-width: 410px;
    margin-bottom: 40px;

    color: #756b7c;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 700;
}


/* =========================================
   LARGE MAIN BOX - WHITE PROFESSIONAL STYLE
========================================= */

.bpo-ai-benefits-pro-main-panel {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 420px;
    padding: 32px;

    background: #ffffff;
    color: #29212f;

    border: 1px solid #eee7f1;
    border-radius: 24px;

    box-shadow: 0 10px 30px rgba(45, 25, 55, 0.06);

    position: relative;
    overflow: hidden;

    transition: all 0.3s ease;
}

/* Pink outline on hover */

.bpo-ai-benefits-pro-main-panel:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 35px rgba(216, 82, 237, 0.16);
    transform: translateY(-5px);
}


/* Top Status Text */

.bpo-ai-benefits-pro-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Top Right Icon */

.bpo-ai-benefits-pro-main-top>i {
    color: #D852ED;
    font-size: 14px;
}


/* Main Icon */

.bpo-ai-benefits-pro-main-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;
    margin: 52px 0 25px;

    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 20px;

    background: #f9edfc;
    color: #D852ED;

    font-size: 30px;
}


/* Main Heading */

.bpo-ai-benefits-pro-main-panel h3 {
    margin-bottom: 20px;

    color: #29212f;
    font-size: 31px;
    line-height: 1.3;
    font-weight: 700;
}

.bpo-ai-benefits-pro-main-panel h3 strong {
    color: #D852ED;
    font-weight: 700;
}


/* Main Description */

.bpo-ai-benefits-pro-main-panel p {
    max-width: 410px;
    margin-bottom: 40px;

    color: #756b7c;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 700;
}


/* Bottom Text */

.bpo-ai-benefits-pro-main-footer {
    display: flex;
    gap: 38px;

    padding-top: 22px;
    border-top: 1px solid #eee4f1;
}

.bpo-ai-benefits-pro-main-footer div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bpo-ai-benefits-pro-main-footer strong {
    color: #29212f;
    font-size: 15px;
    font-weight: 700;
}

.bpo-ai-benefits-pro-main-footer small {
    color: #887d8e;
    font-size: 12px;
    font-weight: 700;
}

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

@media (max-width: 1199px) {

    .bpo-ai-benefits-pro-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bpo-ai-benefits-pro-main-panel {
        grid-column: span 2;
    }

    .bpo-ai-benefits-pro-item h4 {
        font-size: 15px;
    }

    .bpo-ai-benefits-pro-main-panel h3 {
        font-size: 28px;
    }

}


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

@media (max-width: 767px) {

    .bpo-ai-benefits-pro-section {
        padding: 65px 0;
    }

    .bpo-ai-benefits-pro-heading {
        margin-bottom: 35px;
    }

    .bpo-ai-benefits-pro-heading h2 {
        font-size: 29px;
    }

    .bpo-ai-benefits-pro-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .bpo-ai-benefits-pro-tag {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .bpo-ai-benefits-pro-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bpo-ai-benefits-pro-main-panel {
        grid-column: span 1;
        grid-row: span 1;
        min-height: auto;
        padding: 25px;
    }

    .bpo-ai-benefits-pro-main-icon {
        margin-top: 38px;
    }

    .bpo-ai-benefits-pro-main-panel h3 {
        font-size: 27px;
    }

    .bpo-ai-benefits-pro-main-panel p {
        margin-bottom: 30px;
    }

    .bpo-ai-benefits-pro-main-footer {
        gap: 20px;
        flex-wrap: wrap;
    }

    .bpo-ai-benefits-pro-item {
        min-height: 190px;
        padding: 23px;
    }

    .bpo-ai-benefits-pro-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .bpo-ai-benefits-pro-bottom-icon {
        width: 48px;
        height: 48px;
    }

    .bpo-ai-benefits-pro-btn {
        width: 100%;
        justify-content: center;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .bpo-ai-benefits-pro-heading h2 {
        font-size: 25px;
    }

    .bpo-ai-benefits-pro-main-panel h3 {
        font-size: 24px;
    }

    .bpo-ai-benefits-pro-main-footer {
        flex-direction: column;
        gap: 15px;
    }

}


/* =====================================
   DIVERSE BPO CAMPAIGNS SECTION
===================================== */
/* =========================================================
   WHY SMART AI SECTION
========================================================= */

.why-smart-ai-section {
    padding: 80px 0;
    background: #eef9ff;
}


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

.why-smart-ai-section .smart-dialer-title h2 {
    margin-bottom: 15px;

    color: #202020;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
}

.why-smart-ai-section .smart-dialer-title p {
    margin: 0 auto;

    max-width: 700px;

    color: #777;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   CAMPAIGN BOX
========================================================= */

.bpo-campaign-hover-box {
    position: relative;

    /*
       FIXED HEIGHT
       Hover par box/section ki height nahi badhegi
    */
    height: 155px;
    min-height: 155px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #dcecf5;

    border-radius: 15px;

    overflow: hidden;

    transition: all 0.35s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.bpo-campaign-number {
    position: absolute;

    top: 12px;
    left: 15px;

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    background: #f5e7ff;

    color: #D852ED;

    font-size: 12px;
    font-weight: 700;

    transition: all 0.3s ease;
}


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

.bpo-campaign-hover-box h3 {
    margin: 0;

    color: #202020;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.3;

    transition: all 0.3s ease;

    position: relative;
    z-index: 2;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.bpo-campaign-description {
    position: absolute;

    left: 20px;
    right: 20px;

    bottom: 18px;

    /*
       Initially hidden
    */
    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(10px);

    transition:
        max-height 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}

.bpo-campaign-description p {
    margin: 0;

    padding: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   BOX HOVER
========================================================= */

.bpo-campaign-hover-box:hover {
    border-color: #D852ED;

    transform: translateY(-6px);

    box-shadow:
        0 12px 28px rgba(216, 82, 237, 0.12);
}


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

.bpo-campaign-hover-box:hover h3 {
    color: #D852ED;
    transform: translateY(-20px);
}


/* =========================================================
   SHOW DESCRIPTION
========================================================= */

.bpo-campaign-hover-box:hover .bpo-campaign-description {
    max-height: 60px;

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   HOVER NUMBER
========================================================= */

.bpo-campaign-hover-box:hover .bpo-campaign-number {
    background: #D852ED;

    color: #ffffff;
}


/* =========================================================
   DIFFERENT NUMBER COLORS
========================================================= */

.bpo-campaign-hover-box:nth-child(2) .bpo-campaign-number {
    background: #eaf3ff;
    color: #3985ff;
}

.bpo-campaign-hover-box:nth-child(3) .bpo-campaign-number {
    background: #e8fff3;
    color: #18a866;
}

.bpo-campaign-hover-box:nth-child(4) .bpo-campaign-number {
    background: #fff2e8;
    color: #f28b35;
}

.bpo-campaign-hover-box:nth-child(5) .bpo-campaign-number {
    background: #fff8df;
    color: #dca900;
}

.bpo-campaign-hover-box:nth-child(6) .bpo-campaign-number {
    background: #e9f7ff;
    color: #149bd7;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .why-smart-ai-section {
        padding: 65px 0;
    }

    .why-smart-ai-section .smart-dialer-title h2 {
        font-size: 30px;
    }

    .bpo-campaign-hover-box {
        height: 155px;
        min-height: 155px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .why-smart-ai-section {
        padding: 55px 0;
    }

    .why-smart-ai-section .smart-dialer-title h2 {
        font-size: 25px;
    }


    /* Fixed box height */

    .bpo-campaign-hover-box {
        height: 140px;
        min-height: 140px;

        padding: 28px 20px;
    }


    .bpo-campaign-hover-box h3 {
        font-size: 16px;
    }


    .bpo-campaign-description {
        left: 15px;
        right: 15px;

        bottom: 15px;
    }


    .bpo-campaign-description p {
        font-size: 12px;

        line-height: 1.45;
    }


    .bpo-campaign-hover-box:hover .bpo-campaign-description {
        max-height: 50px;
    }
}

/* ========================= Industries Real Estate ======================================== 
============================================================================================*/
.smart-dialer-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.smart-dialer-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Real Estate Benefits Section */
.real-estate-benefits-section {
    padding: 70px 0;
    background: #eef9ff;
}

/* Section Subtitle */
.real-estate-benefits-section .smart-dialer-title h5 {
    margin-top: 18px;
    color: #666666;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

/* Benefit Card */
.real-estate-benefit-card {
    height: 100%;
    padding: 35px 30px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

/* Card Hover */
.real-estate-benefit-card:hover {
    transform: translateY(-5px);
    border-color: #D852ED;
    box-shadow: 0 12px 30px rgba(216, 82, 237, 0.18);
}

/* Benefit List */
.real-estate-benefit-card .benefit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Benefit List Item */
.real-estate-benefit-card .benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

/* Last Item */
.real-estate-benefit-card .benefit-list li:last-child {
    margin-bottom: 0;
}

/* Check Icon */
.real-estate-benefit-card .benefit-list li i {
    flex-shrink: 0;
    margin-top: 4px;
    color: #D852ED;
    font-size: 18px;
}

/* Responsive */
@media (max-width: 767px) {

    .real-estate-benefits-section {
        padding: 50px 0;
    }

    .real-estate-benefit-card {
        padding: 25px 20px;
    }

    .real-estate-benefit-card .benefit-list li {
        font-size: 15px;
    }

}

.property-lead-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(216, 82, 237, 0.12);
    border-radius: 30%;
}

.property-lead-icon i {
    color: #D852ED;
    font-size: 20px;
}

/* =========================================================
   Industries Real Estate  Card Section
   ========================================================= */

.real-estate-help-section {
    padding: 70px 0;
    background: #ffffff;
}

/* Main Card */
.real-estate-help-card {
    padding: 40px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

/* Card Hover */
.real-estate-help-card:hover {
    transform: translateY(-5px);
    border-color: #D852ED;
    box-shadow: 0 12px 32px rgba(216, 82, 237, 0.16);
}

/* Image */
.real-estate-help-card .smart-dialer-image img {
    max-width: 100%;
    height: auto;
}

/* Content Heading */
.real-estate-help-card .smart-dialer-content h3 {
    margin-bottom: 20px;
    color: #222222;
    font-size: 28px;
    font-weight: 600;
}

/* Content Paragraph */
.real-estate-help-card .smart-dialer-content p {
    margin-bottom: 18px;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
}

.real-estate-help-card .smart-dialer-content p:last-child {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 991px) {

    .real-estate-help-card {
        padding: 30px;
    }

    .real-estate-help-card .smart-dialer-content {
        text-align: center;
    }

}

@media (max-width: 575px) {

    .real-estate-help-section {
        padding: 50px 0;
    }

    .real-estate-help-card {
        padding: 22px;
        border-radius: 14px;
    }

    .real-estate-help-card .smart-dialer-content h3 {
        font-size: 24px;
    }

    .real-estate-help-card .smart-dialer-content p {
        font-size: 15px;
    }

}


/* ======================================About Section ============================ 
=====================================================================================*/

.what-you-find-card {
    padding: 45px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

/* Card Hover */
.what-you-find-card:hover {
    transform: translateY(-5px);
    border-color: #D852ED;
    box-shadow: 0 12px 32px rgba(216, 82, 237, 0.16);
}

/* Card Heading */
.what-you-find-card h3 {
    margin-bottom: 22px;
    color: #222222;
    font-size: 26px;
    font-weight: 600;
}

/* List */
.what-you-find-card .smart-dialer-list {
    margin-bottom: 22px;
}

/* List Items */
.what-you-find-card .smart-dialer-list li {
    margin-bottom: 12px;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

/* Paragraph */
.what-you-find-card p {
    margin-bottom: 0;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
}

/* Image */
.what-you-find-card .smart-dialer-image img {
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 991px) {

    .what-you-find-card {
        padding: 30px;
    }

    .what-you-find-card .smart-point-content {
        text-align: center;
    }

    .what-you-find-card .smart-dialer-list {
        text-align: left;
    }

}

@media (max-width: 575px) {

    .what-you-find-card {
        padding: 22px;
        border-radius: 14px;
    }

    .what-you-find-card h3 {
        font-size: 23px;
    }

    .what-you-find-card .smart-dialer-list li,
    .what-you-find-card p {
        font-size: 15px;
    }

}

/* ======================Real State Card==================== */
.real-estate-intro-card {
    padding: 45px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

/* Card Hover */
.real-estate-intro-card:hover {
    transform: translateY(-5px);
    border-color: #D852ED;
    box-shadow: 0 12px 32px rgba(216, 82, 237, 0.16);
}

/* Paragraph */
.real-estate-intro-card .smart-dialer-content p {
    margin-bottom: 20px;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
}

.real-estate-intro-card .smart-dialer-content p:last-child {
    margin-bottom: 0;
}

/* Image */
.real-estate-intro-card .smart-dialer-image img {
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 991px) {

    .real-estate-intro-card {
        padding: 30px;
    }

    .real-estate-intro-card .smart-dialer-content {
        text-align: center;
    }

}

@media (max-width: 575px) {

    .real-estate-intro-card {
        padding: 22px;
        border-radius: 14px;
    }

    .real-estate-intro-card .smart-dialer-content p {
        font-size: 15px;
    }

}

/* =========================================================
    About Section Card
   ========================================================= */
.why-smart-ai-card {
    padding: 45px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

/* Card Hover */
.why-smart-ai-card:hover {
    transform: translateY(-5px);
    border-color: #D852ED;
    box-shadow: 0 12px 32px rgba(216, 82, 237, 0.16);
}

/* Image */
.why-smart-ai-card .smart-dialer-image img {
    max-width: 100%;
    height: auto;
}

/* Paragraph */
.why-smart-ai-card .smart-point-content p {
    margin-bottom: 20px;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
}

.why-smart-ai-card .smart-point-content p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 991px) {

    .why-smart-ai-card {
        padding: 30px;
    }

    .why-smart-ai-card .smart-point-content {
        text-align: center;
    }

}

@media (max-width: 575px) {

    .why-smart-ai-card {
        padding: 22px;
        border-radius: 14px;
    }

    .why-smart-ai-card .smart-point-content p {
        font-size: 15px;
    }

}


/* ==========================================
   AI DIALER USE CASES IN BFSI
========================================== */

.bfsi-use-cases-area {
    padding: 100px 0;
    background: #ffffff;
}


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

.bfsi-section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D852ED;
    margin-bottom: 15px;
}


.bfsi-section-title {
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
    color: #171717;
    margin-bottom: 0;
}


.bfsi-section-intro {
    font-size: 16px;
    line-height: 1.8;
    color: #777777;
    margin-bottom: 0;
}



/* ==========================================
   CARD
========================================== */

.bfsi-use-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    overflow: hidden;

    transition: all 0.35s ease;
}


/* ==========================================
   CARD HOVER
========================================== */

.bfsi-use-card:hover {
    border-color: #D852ED;

    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.15);

    transform: translateY(-6px);
}



/* ==========================================
   IMAGE AREA
========================================== */

.bfsi-card-visual {
    position: relative;

    height: 215px;

    margin: 12px;

    border-radius: 12px;

    background: #fffaff;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;
}



/* ==========================================
   IMAGE
========================================== */

.bfsi-use-case-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    border-radius: 12px;

    transition: transform 0.4s ease;
}


/* Image Hover */

.bfsi-use-card:hover .bfsi-use-case-image {
    transform: scale(1.04);
}



/* ==========================================
   FIRST CARD IMAGE
   (Your PHP image with inline style)
========================================== */

.bfsi-card-visual img {
    max-width: 100%;
    height: auto;
}



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

.bfsi-card-content {
    padding: 12px 25px 28px;
}


.bfsi-card-content h3 {
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;

    color: #171717;

    margin-bottom: 14px;
}


.bfsi-card-content p {
    font-size: 14px;
    line-height: 1.8;

    color: #777777;

    margin-bottom: 12px;
}


.bfsi-card-content p:last-child {
    margin-bottom: 0;
}



/* ==========================================
   EXTRA GAP FOR BOTTOM CARDS
========================================== */

/* Card 4 and Card 5 */

.bfsi-use-card.mt-4 {
    margin-top: 30px;
}



/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 991px) {

    .bfsi-use-cases-area {
        padding: 70px 0;
    }


    .bfsi-section-title {
        font-size: 36px;
    }


    .bfsi-section-intro {
        margin-top: 20px;
    }


    .bfsi-card-visual {
        height: 210px;
    }


    .bfsi-card-content {
        padding: 12px 22px 25px;
    }


    .bfsi-card-content h3 {
        font-size: 20px;
    }
}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */

@media (max-width: 767px) {

    .bfsi-use-cases-area {
        padding: 55px 0;
    }


    .bfsi-section-title {
        font-size: 30px;
    }


    .bfsi-section-intro {
        font-size: 15px;
        line-height: 1.7;
    }


    /* Image Center */

    .bfsi-card-visual {
        height: 210px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .bfsi-card-visual img {
        width: auto !important;

        max-width: 100%;

        height: auto !important;

        max-height: 100%;

        object-fit: contain;

        margin: 0 auto;

        display: block;
    }


    /* Card Content */

    .bfsi-card-content {
        padding: 10px 20px 25px;
    }


    .bfsi-card-content h3 {
        font-size: 20px;
    }


    .bfsi-card-content p {
        font-size: 14px;
        line-height: 1.8;
    }


    /* Bottom Cards Gap */

    .bfsi-use-card.mt-4 {
        margin-top: 10 10px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 575px) {

    .bfsi-section-title {
        font-size: 28px;
    }


    .bfsi-card-visual {
        height: 190px;

        margin: 10px;
    }


    .bfsi-card-content {
        padding: 10px 18px 22px;
    }


    .bfsi-card-content h3 {
        font-size: 19px;
    }

}

/*======================================What is an AI Dailer BFSI Cards ==================================
==========================================================================================================*/

/* Single Card: BFSI AI Dialer */

.bfsi-single-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(216, 82, 237, 0.15);
    transition: all 0.3s ease;
}

.bfsi-single-card:hover {
    box-shadow: 0 8px 30px rgba(216, 82, 237, 0.15);
    transform: translateY(-3px);
}

.bfsi-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 18px;
}

.bfsi-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 15px;
}

.bfsi-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Responsive Design */

@media (max-width: 991px) {

    .bfsi-single-card {
        padding: 30px;
    }

    .bfsi-image {
        padding-top: 10px;
    }

}

@media (max-width: 576px) {

    .bfsi-single-card {
        padding: 20px;
        border-radius: 15px;
    }

    .bfsi-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .bfsi-image {
        padding: 10px 0;
    }

}

/* =========================================
   INSURANCE BENEFITS SECTION
========================================= */

.ai-insurance-benefits-section {
    padding: 70px 0;
}


/* Section Subtitle */

.ai-insurance-section-subtitle {
    font-size: 16px;
    color: #0f0f0f;

    line-height: 1.7;
    margin-top: 15px;
}


/* Benefit Item */

.ai-insurance-benefit-item {
    height: 100%;
    text-align: center;
}


/* =========================================
   IMAGE CARD
========================================= */

.ai-insurance-benefit-card {

    position: relative;

    height: 240px;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid transparent;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;

}


/* Image */

.ai-insurance-card-image {

    width: 100%;
    height: 100%;

    display: flex;

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

    padding: 25px;

    transition: transform 0.3s ease;

}


.ai-insurance-card-image img {

    max-width: 100%;
    max-height: 190px;

    width: auto;
    height: auto;

    object-fit: contain;

    transition: transform 0.3s ease;

}


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

.ai-insurance-hover-content {

    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(248, 245, 255, 0.96);

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

}


.ai-insurance-hover-content p {

    font-size: 16px;

    line-height: 1.8;

    color: #555;

    margin: 0;

}


/* =========================================
   HEADING OUTSIDE CARD
========================================= */

.ai-insurance-benefit-title {

    font-size: 19px;

    font-weight: 700;

    line-height: 1.45;

    color: #222;

    margin-top: 22px;

    margin-bottom: 0;

    min-height: 55px;

    transition:
        color 0.3s ease;

}


/* =========================================
   HOVER EFFECT
========================================= */


/* Card hover */

.ai-insurance-benefit-card:hover {

    border-color: #D852ED;

    box-shadow:
        0 12px 35px rgba(216, 82, 237, 0.30);

    transform: translateY(-6px);

}


/* Image hover */

.ai-insurance-benefit-card:hover .ai-insurance-card-image img {

    transform: scale(1.05);

}


/* Show content on card hover */

.ai-insurance-benefit-card:hover .ai-insurance-hover-content {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* Heading hover */

.ai-insurance-benefit-item:hover .ai-insurance-benefit-title {

    color: #D852ED;

}


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

@media (max-width: 991px) {

    .ai-insurance-benefits-section {
        padding: 55px 0;
    }

    .ai-insurance-benefit-card {
        height: 230px;
    }

    .ai-insurance-benefit-title {
        font-size: 18px;
    }

}


@media (max-width: 575px) {

    .ai-insurance-benefits-section {
        padding: 45px 0;
    }

    .ai-insurance-benefit-card {
        height: 220px;
    }

    .ai-insurance-card-image {
        padding: 20px;
    }

    .ai-insurance-benefit-title {
        font-size: 17px;
        min-height: auto;
        margin-top: 16px;
    }

}


/* =========================================
   AI INSURANCE WORKFLOW SECTION
========================================= */

.ai-insurance-workflow-section {
    padding: 80px 0;
    background: #ffffff;
}


/* Section Subtitle */

.ai-insurance-workflow-subtitle {
    font-size: 16px;
    color: #777;
    line-height: 1.8;
    margin-top: 15px;
}


/* =========================================
   INTRODUCTION
========================================= */

.ai-insurance-workflow-intro {

    border-radius: 22px;
    padding: 40px 35px;
    height: 100%;

    border: 1px solid transparent;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

    transition: all 0.3s ease;
}


/* Intro Hover */

.ai-insurance-workflow-intro:hover {
    border-color: #D852ED;

    box-shadow:
        0 12px 35px rgba(216, 82, 237, 0.20);

    transform: translateY(-5px);
}


/* Label */

.ai-insurance-workflow-label {
    display: inline-block;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: #D852ED;

    margin-bottom: 18px;
}


/* Intro Heading */

.ai-insurance-workflow-intro h3 {
    font-size: 32px;
    font-weight: 700;

    line-height: 1.3;

    color: #222;

    margin-bottom: 22px;
}


/* Heading Highlight */

.ai-insurance-workflow-intro h3 span {
    display: block;
    color: #D852ED;
}


/* Intro Paragraph */

.ai-insurance-workflow-intro p {
    font-size: 15px;
    line-height: 1.9;

    color: #666;

    margin-bottom: 18px;
}

.ai-insurance-workflow-intro p:last-child {
    margin-bottom: 0;
}


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

.ai-insurance-workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Single Step Card */

.ai-insurance-workflow-step {
    display: flex;
    align-items: flex-start;

    gap: 22px;

    padding: 28px 25px;



    border-radius: 18px;

    border: 1px solid transparent;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

    transition: all 0.3s ease;
}


/* Step Hover */

.ai-insurance-workflow-step:hover {
    border-color: #D852ED;

    box-shadow:
        0 10px 30px rgba(216, 82, 237, 0.22);

    transform: translateX(5px);
}


/* Step Number */

.ai-insurance-step-number {
    min-width: 58px;
    height: 58px;

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

    border-radius: 14px;

    background: #ffffff;

    border: 1px solid rgba(216, 82, 237, 0.25);

    color: #D852ED;

    font-size: 18px;
    font-weight: 700;

    transition: all 0.3s ease;
}


/* Number Hover */

.ai-insurance-workflow-step:hover .ai-insurance-step-number {
    background: #D852ED;
    color: #ffffff;
}


/* Step Content */

.ai-insurance-step-content {
    flex: 1;
}


/* Step Heading */

.ai-insurance-step-content h3 {
    font-size: 20px;

    font-weight: 700;

    line-height: 1.4;

    color: #222;

    margin-bottom: 10px;

    transition: color 0.3s ease;
}


/* Step Heading Hover */

.ai-insurance-workflow-step:hover .ai-insurance-step-content h3 {
    color: #D852ED;
}


/* Step Paragraph */

.ai-insurance-step-content p {
    font-size: 15px;

    line-height: 1.8;

    color: #666;

    margin-bottom: 0;
}


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

@media (max-width: 1199px) {

    .ai-insurance-workflow-intro {
        padding: 32px 28px;
    }

    .ai-insurance-workflow-intro h3 {
        font-size: 28px;
    }

    .ai-insurance-workflow-step {
        padding: 24px 20px;
    }

}


/* Tablet */

@media (max-width: 991px) {

    .ai-insurance-workflow-section {
        padding: 60px 0;
    }

    .ai-insurance-workflow-intro {
        margin-bottom: 10px;
    }

    .ai-insurance-workflow-intro h3 {
        font-size: 30px;
    }

    .ai-insurance-workflow-step:hover {
        transform: translateY(-4px);
    }

}


/* Mobile */

@media (max-width: 575px) {

    .ai-insurance-workflow-section {
        padding: 45px 0;
    }

    .ai-insurance-workflow-intro {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .ai-insurance-workflow-intro h3 {
        font-size: 26px;
    }

    .ai-insurance-workflow-intro p {
        font-size: 14px;
        line-height: 1.8;
    }

    .ai-insurance-workflow-step {
        gap: 15px;
        padding: 22px 18px;
        border-radius: 16px;
    }

    .ai-insurance-step-number {
        min-width: 48px;
        height: 48px;
        font-size: 16px;
        border-radius: 12px;
    }

    .ai-insurance-step-content h3 {
        font-size: 18px;
    }

    .ai-insurance-step-content p {
        font-size: 14px;
        line-height: 1.7;
    }

}

/* =========================================
   Insurance AI Dialer Benefits Section
========================================= */

.insurance-benefits-area {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Section Heading */

.insurance-section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.insurance-section-title {
    margin-bottom: 18px;
    color: #222222;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
}

.insurance-section-description {
    max-width: 700px;
    margin: 0 auto;
    color: #777777;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   Horizontal Timeline
========================================= */

.insurance-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px 35px;
    margin-top: 80px;
    margin-bottom: 80px;
}

/* Horizontal Connecting Line */

.insurance-timeline::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(216, 82, 237, 0.15),
            #D852ED,
            rgba(216, 82, 237, 0.15));
    z-index: 0;
}

/* Timeline Item */

.insurance-timeline-item {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Number Circle */

.insurance-timeline-number {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 28px;
    border: 2px solid #D852ED;
    border-radius: 50%;
    background: #ffffff;
    color: #D852ED;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 0 0 8px #ffffff;
    transition: all 0.3s ease;
}

/* Timeline Content */

.insurance-timeline-content {
    min-height: 255px;
    padding: 32px 25px;
    border: 1px solid #eeeeee;
    border-radius: 20px;
    /* background: #faf7ff; */
    box-shadow: 0 10px 30px rgba(45, 20, 60, 0.06);
    transition: all 0.3s ease;
}

/* Icon */

.insurance-timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
    border-radius: 16px;
    background: rgba(216, 82, 237, 0.12);
    color: #D852ED;
    font-size: 24px;
    transition: all 0.3s ease;
}

/* Card Heading */

.insurance-timeline-content h3 {
    margin-bottom: 15px;
    color: #252525;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    transition: color 0.3s ease;
}

/* Card Paragraph */

.insurance-timeline-content p {
    margin: 0;
    color: #777777;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   Hover Effects
========================================= */

.insurance-timeline-item:hover .insurance-timeline-number {
    background: #D852ED;
    color: #ffffff;
    box-shadow: 0 0 0 8px #ffffff,
        0 8px 20px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.insurance-timeline-item:hover .insurance-timeline-content {
    border-color: #D852ED;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(216, 82, 237, 0.15);
    transform: translateY(-8px);
}

.insurance-timeline-item:hover .insurance-timeline-icon {
    background: #D852ED;
    color: #ffffff;
    transform: rotate(-5deg);
}

.insurance-timeline-item:hover .insurance-timeline-content h3 {
    color: #D852ED;
}


/* =========================================
   Bottom Image and Text
========================================= */

.insurance-benefits-bottom {
    margin-top: 30px;
}

.insurance-benefits-image-card {
    padding: 25px;
    border: 1px solid #eeeeee;
    border-radius: 24px;

    text-align: center;
    box-shadow: 0 10px 30px rgba(45, 20, 60, 0.06);
    transition: all 0.3s ease;
}

.insurance-benefits-image-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
}

.insurance-benefits-image-card:hover {
    border-color: #D852ED;
    box-shadow: 0 18px 40px rgba(216, 82, 237, 0.15);
    transform: translateY(-5px);
}

.insurance-benefits-text {
    padding-left: 30px;
}

.insurance-small-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.insurance-benefits-text h3 {
    margin-bottom: 20px;
    color: #252525;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
}

.insurance-benefits-text p {
    margin-bottom: 0;
    color: #777777;
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   Large Desktop Responsive
========================================= */

@media (max-width: 1199px) {

    .insurance-section-title {
        font-size: 38px;
    }

    .insurance-timeline {
        gap: 50px 25px;
    }

    .insurance-timeline-content {
        padding: 28px 20px;
    }

    .insurance-timeline-content h3 {
        font-size: 19px;
    }

    .insurance-benefits-text {
        padding-left: 15px;
    }

    .insurance-benefits-text h3 {
        font-size: 29px;
    }

}


/* =========================================
   Tablet Responsive
========================================= */

@media (max-width: 991px) {

    .insurance-benefits-area {
        padding: 80px 0;
    }

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

    .insurance-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 25px;
        margin-top: 60px;
    }

    .insurance-timeline::before {
        display: none;
    }

    .insurance-timeline-content {
        min-height: 260px;
    }

    .insurance-benefits-bottom {
        margin-top: 20px;
    }

    .insurance-benefits-text {
        padding-left: 0;
    }

    .insurance-benefits-text h3 {
        font-size: 30px;
    }

}


/* =========================================
   Mobile Responsive
========================================= */

@media (max-width: 767px) {

    .insurance-benefits-area {
        padding: 65px 0;
    }

    .insurance-section-label {
        font-size: 12px;
    }

    .insurance-section-title {
        font-size: 29px;
    }

    .insurance-section-description {
        font-size: 15px;
        line-height: 1.7;
    }

    .insurance-timeline {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 45px;
        margin-bottom: 55px;
    }

    .insurance-timeline-item {
        text-align: center;
    }

    .insurance-timeline-number {
        width: 62px;
        height: 62px;
        margin-bottom: 20px;
        font-size: 16px;
    }

    .insurance-timeline-content {
        min-height: auto;
        padding: 28px 22px;
        border-radius: 18px;
    }

    .insurance-timeline-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 18px;
        font-size: 22px;
    }

    .insurance-timeline-content h3 {
        font-size: 20px;
    }

    .insurance-timeline-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .insurance-benefits-image-card {
        padding: 18px;
        border-radius: 20px;
    }

    .insurance-benefits-text {
        margin-top: 15px;
        text-align: center;
    }

    .insurance-benefits-text h3 {
        font-size: 27px;
    }

    .insurance-benefits-text p {
        font-size: 15px;
        line-height: 1.8;
    }

}


/* =========================================
   Small Mobile Responsive
========================================= */

@media (max-width: 480px) {

    .insurance-section-title {
        font-size: 26px;
    }

    .insurance-timeline-content {
        padding: 25px 18px;
    }

    .insurance-timeline-content h3 {
        font-size: 19px;
    }

    .insurance-benefits-text h3 {
        font-size: 25px;
    }

}

/* =========================================
   Why Choose AI Dialer - Insurance
========================================= */

.insurance-why-area {
    position: relative;
    padding: 100px 0;
    background: #faf7ff;
    overflow: hidden;
}


/* =========================================
   Left Content
========================================= */

.insurance-why-content {
    padding-right: 45px;
}

.insurance-why-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.insurance-why-content h2 {
    margin-bottom: 25px;
    color: #252525;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
}

.insurance-why-content p {
    margin-bottom: 18px;
    color: #707070;
    font-size: 16px;
    line-height: 1.85;
}


/* Highlight */

.insurance-why-highlight {
    position: relative;
    margin-top: 30px;
    padding: 18px 22px;
    border-left: 4px solid #D852ED;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.08);
}

.insurance-why-highlight span {
    color: #333333;
    font-size: 16px;
    font-weight: 700;
}


/* =========================================
   Workflow Area
========================================= */

.insurance-workflow {
    position: relative;
    padding-left: 35px;
}


/* Vertical Connecting Line */

.insurance-workflow::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 34px;
    width: 2px;
    background: #e8c7ed;
}


/* Workflow Item */

.insurance-workflow-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 25px;
    z-index: 1;
}

.insurance-workflow-item:last-child {
    margin-bottom: 0;
}


/* Number */

.insurance-workflow-number {
    position: relative;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;

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

    border: 2px solid #D852ED;
    border-radius: 50%;

    background: #ffffff;
    color: #D852ED;

    font-size: 16px;
    font-weight: 700;

    box-shadow: 0 0 0 7px #faf7ff;

    transition: all 0.3s ease;
}


/* Content */

.insurance-workflow-content {
    flex: 1;
    padding: 20px 25px;

    border: 1px solid #eeeeee;
    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(45, 20, 60, 0.05);

    transition: all 0.3s ease;
}

.insurance-workflow-content h3 {
    margin: 0 0 8px;

    color: #252525;
    font-size: 19px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.insurance-workflow-content p {
    margin: 0;

    color: #777777;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   Hover Effect
========================================= */

.insurance-workflow-item:hover .insurance-workflow-number {
    background: #D852ED;
    color: #ffffff;

    box-shadow:
        0 0 0 7px #faf7ff,
        0 8px 20px rgba(216, 82, 237, 0.25);

    transform: scale(1.08);
}


.insurance-workflow-item:hover .insurance-workflow-content {
    border-color: #D852ED;

    box-shadow:
        0 15px 35px rgba(216, 82, 237, 0.12);

    transform: translateX(6px);
}


.insurance-workflow-item:hover .insurance-workflow-content h3 {
    color: #D852ED;
}


/* =========================================
   Desktop Large
========================================= */

@media (max-width: 1199px) {

    .insurance-why-content {
        padding-right: 25px;
    }

    .insurance-why-content h2 {
        font-size: 36px;
    }

    .insurance-workflow {
        padding-left: 20px;
    }

    .insurance-workflow::before {
        left: 19px;
    }

}


/* =========================================
   Tablet
========================================= */

@media (max-width: 991px) {

    .insurance-why-area {
        padding: 80px 0;
    }

    .insurance-why-content {
        padding-right: 0;
    }

    .insurance-why-content h2 {
        font-size: 34px;
    }

    .insurance-workflow {
        padding-left: 0;
        margin-top: 20px;
    }

    .insurance-workflow::before {
        left: 34px;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

    .insurance-why-area {
        padding: 65px 0;
    }

    .insurance-why-content {
        text-align: center;
    }

    .insurance-why-content h2 {
        font-size: 29px;
    }

    .insurance-why-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .insurance-why-highlight {
        text-align: left;
    }

    .insurance-workflow {
        padding-left: 0;
        margin-top: 35px;
    }

    .insurance-workflow::before {
        left: 28px;
    }

    .insurance-workflow-item {
        gap: 18px;
        margin-bottom: 20px;
    }

    .insurance-workflow-number {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;

        font-size: 14px;

        box-shadow: 0 0 0 6px #faf7ff;
    }

    .insurance-workflow-content {
        padding: 18px 17px;
        border-radius: 13px;
    }

    .insurance-workflow-content h3 {
        font-size: 17px;
    }

    .insurance-workflow-content p {
        font-size: 13px;
        line-height: 1.65;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .insurance-why-content h2 {
        font-size: 26px;
    }

    .insurance-workflow-item {
        gap: 14px;
    }

    .insurance-workflow::before {
        left: 25px;
    }

    .insurance-workflow-number {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;

        font-size: 13px;

        box-shadow: 0 0 0 5px #faf7ff;
    }

    .insurance-workflow-content {
        padding: 16px 14px;
    }

    .insurance-workflow-content h3 {
        font-size: 16px;
    }

    .insurance-workflow-content p {
        font-size: 12px;
    }

}

/* =========================================
   PROPERTY AI LEADS SECTION
========================================= */

.property-ai-leads-section {
    position: relative;
    padding: 100px 0 110px;
    background: #fbfaff;
    overflow: hidden;
}


/* =========================================
   Background Shapes
========================================= */

.property-ai-leads-section::before {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    top: -150px;
    left: -120px;

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.06);
}

.property-ai-leads-section::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.05);
}


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

.property-ai-title {
    position: relative;
    z-index: 2;
}

.property-ai-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #D852ED;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.property-ai-title h2 {
    margin-bottom: 18px;

    color: #17284b;

    font-size: 46px;
    font-weight: 700;

    line-height: 1.2;
}

.property-ai-title h2 span {
    display: block;

    color: #D852ED;
}

.property-ai-title p {
    max-width: 650px;

    margin: 0 auto;

    color: #71809d;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   MAIN SHOWCASE
========================================= */

.property-ai-showcase {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 300px 1fr;

    align-items: center;

    gap: 55px;

    max-width: 1250px;

    margin: 75px auto 0;

    z-index: 2;
}


/* =========================================
   LEFT / RIGHT COLUMNS
========================================= */

.property-ai-column {
    display: flex;

    flex-direction: column;

    gap: 28px;
}

.property-ai-left {
    align-items: flex-end;
}

.property-ai-right {
    align-items: flex-start;
}


/* =========================================
   LEAD CARD
========================================= */

.property-ai-card {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 420px;

    min-height: 105px;

    padding: 18px 22px;

    border: 1px solid rgba(216, 82, 237, 0.08);

    border-radius: 55px;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 15px 35px rgba(69, 48, 100, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    z-index: 3;
}


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

.property-ai-card-icon {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 25px;

    transition: all 0.3s ease;
}


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

.property-ai-card-content {
    padding: 0 18px;
}

.property-ai-card-content h3 {
    margin: 0 0 7px;

    color: #17284b;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.35;
}

.property-ai-card-content span {
    color: #7c89a3;

    font-size: 13px;
}


/* =========================================
   CARD HOVER
========================================= */

.property-ai-card:hover {
    border-color: rgba(216, 82, 237, 0.35);

    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(216, 82, 237, 0.14);
}

.property-ai-card:hover .property-ai-card-icon {
    background: #D852ED;

    color: #ffffff;

    transform: scale(1.08);
}

.property-ai-card:hover .property-ai-card-content h3 {
    color: #D852ED;
}


/* =========================================
   CONNECTORS
========================================= */

.property-ai-connector {
    position: absolute;

    width: 95px;
    height: 55px;

    top: 50%;

    transform: translateY(-50%);

    z-index: -1;
}


/* LEFT CONNECTOR */

.property-ai-left .property-ai-connector {
    right: -88px;

    border-top: 1.5px solid #D852ED;

    border-radius: 0 50px 0 0;
}

.property-ai-left .property-ai-connector::after {
    content: "";

    position: absolute;

    right: -2px;
    top: -4px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #D852ED;

    box-shadow:
        0 0 0 4px rgba(216, 82, 237, 0.10);
}


/* RIGHT CONNECTOR */

.property-ai-right .property-ai-connector {
    left: -88px;

    border-top: 1.5px solid #D852ED;

    border-radius: 50px 0 0 0;
}

.property-ai-right .property-ai-connector::after {
    content: "";

    position: absolute;

    left: -2px;
    top: -4px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #D852ED;

    box-shadow:
        0 0 0 4px rgba(216, 82, 237, 0.10);
}


/* =========================================
   CENTER AI DIALER
========================================= */

.property-ai-center {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 300px;
    height: 300px;

    margin: auto;
}


/* =========================================
   MAIN CIRCLE
========================================= */

.property-ai-main-circle {
    position: relative;

    width: 205px;
    height: 205px;

    display: flex;

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

    border-radius: 50%;

    background: linear-gradient(135deg,
            #D852ED,
            #b72de0);

    box-shadow:
        0 25px 55px rgba(216, 82, 237, 0.30);

    z-index: 3;
}


/* =========================================
   INNER CIRCLE
========================================= */

.property-ai-inner-circle {
    width: 158px;
    height: 158px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    background: #ffffff;

    text-align: center;
}


.property-ai-inner-circle i {
    margin-bottom: 10px;

    color: #D852ED;

    font-size: 32px;
}

.property-ai-inner-circle h3 {
    margin: 0 0 4px;

    color: #17284b;

    font-size: 22px;

    font-weight: 700;
}

.property-ai-inner-circle span {
    color: #8793a9;

    font-size: 12px;
}


/* =========================================
   ORBIT RINGS
========================================= */

.property-ai-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(216, 82, 237, 0.25);

    z-index: 1;
}

.orbit-one {
    width: 250px;
    height: 250px;
}

.orbit-two {
    width: 295px;
    height: 295px;

    border-style: dashed;

    border-color: rgba(216, 82, 237, 0.20);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199px) {

    .property-ai-showcase {
        grid-template-columns: 1fr 250px 1fr;

        gap: 35px;
    }

    .property-ai-center {
        width: 250px;
        height: 250px;
    }

    .property-ai-main-circle {
        width: 175px;
        height: 175px;
    }

    .property-ai-inner-circle {
        width: 135px;
        height: 135px;
    }

    .property-ai-card {
        min-height: 95px;

        padding: 15px 18px;
    }

    .property-ai-card-icon {
        flex: 0 0 55px;

        width: 55px;
        height: 55px;

        font-size: 21px;
    }

    .property-ai-card-content h3 {
        font-size: 16px;
    }

    .property-ai-connector {
        display: none;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .property-ai-leads-section {
        padding: 80px 0;
    }

    .property-ai-title h2 {
        font-size: 38px;
    }

    .property-ai-showcase {
        grid-template-columns: 1fr 1fr;

        gap: 25px;

        margin-top: 60px;
    }

    .property-ai-center {
        grid-column: 1 / -1;

        grid-row: 1;

        margin-bottom: 20px;
    }

    .property-ai-left {
        grid-column: 1;

        grid-row: 2;

        align-items: stretch;
    }

    .property-ai-right {
        grid-column: 2;

        grid-row: 2;

        align-items: stretch;
    }

    .property-ai-card {
        max-width: 100%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .property-ai-leads-section {
        padding: 65px 0 75px;
    }

    .property-ai-title h2 {
        font-size: 30px;
    }

    .property-ai-title p {
        font-size: 14px;
    }

    .property-ai-showcase {
        display: flex;

        flex-direction: column;

        gap: 18px;

        margin-top: 45px;
    }

    .property-ai-center {
        order: 1;

        width: 100%;
        height: 220px;

        margin-bottom: 10px;
    }

    .property-ai-left {
        order: 2;

        width: 100%;
    }

    .property-ai-right {
        order: 3;

        width: 100%;
    }

    .property-ai-card {
        max-width: 100%;

        min-height: 90px;

        border-radius: 45px;
    }

    .property-ai-card-icon {
        flex: 0 0 55px;

        width: 55px;
        height: 55px;

        font-size: 20px;
    }

    .property-ai-card-content h3 {
        font-size: 16px;
    }

    .property-ai-card-content span {
        font-size: 12px;
    }

    .property-ai-connector {
        display: none;
    }

    .property-ai-main-circle {
        width: 160px;
        height: 160px;
    }

    .property-ai-inner-circle {
        width: 125px;
        height: 125px;
    }

    .property-ai-inner-circle i {
        font-size: 25px;
    }

    .property-ai-inner-circle h3 {
        font-size: 18px;
    }

    .orbit-one {
        width: 200px;
        height: 200px;
    }

    .orbit-two {
        width: 235px;
        height: 235px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .property-ai-title h2 {
        font-size: 27px;
    }

    .property-ai-card {
        padding: 13px 15px;
    }

    .property-ai-card-icon {
        flex: 0 0 48px;

        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    .property-ai-card-content {
        padding-left: 12px;
    }

    .property-ai-card-content h3 {
        font-size: 14px;
    }

    .property-ai-card-content span {
        font-size: 11px;
    }

}

/* ======================================================================================================================
                                                EDUCATION AI DIALER
========================================================================================================================== */

.education-ai-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================
   Heading
========================================= */

.education-ai-title {
    position: relative;
    z-index: 2;
}

.education-ai-label {
    display: inline-block;

    margin-bottom: 14px;

    color: #D852ED;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.education-ai-title h2 {
    margin-bottom: 18px;

    color: #252525;

    font-size: 44px;
    font-weight: 700;

    line-height: 1.25;
}

.education-ai-title h2 span {
    color: #D852ED;
}

.education-ai-title p {
    max-width: 720px;

    margin: 0 auto;

    color: #777777;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.education-ai-layout {
    display: grid;

    grid-template-columns: 330px 1fr;

    gap: 55px;

    align-items: start;

    margin-top: 70px;
}


/* =========================================
   LEFT INTRO CARD
========================================= */

.education-ai-intro {
    position: sticky;
    top: 30px;
}

.education-ai-intro-card {
    padding: 35px 30px;

    border: 1px solid #eeeeee;

    border-radius: 24px;



    box-shadow:
        0 15px 40px rgba(45, 20, 60, 0.07);
}

.education-ai-intro-icon {
    width: 65px;
    height: 65px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 18px;

    background: rgba(216, 82, 237, 0.12);

    color: #D852ED;

    font-size: 27px;
}

.education-ai-intro-card h3 {
    margin-bottom: 18px;

    color: #252525;

    font-size: 24px;
    font-weight: 700;

    line-height: 1.35;
}

.education-ai-intro-card p {
    margin-bottom: 16px;

    color: #777777;

    font-size: 14px;

    line-height: 1.8;
}


/* Highlight */

.education-ai-highlight {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding: 14px 16px;

    border-radius: 10px;

    background: #ffffff;

    color: #555555;

    font-size: 13px;
}

.education-ai-highlight i {
    color: #D852ED;

    font-size: 17px;
}


/* =========================================
   USE CASE HEADING
========================================= */

.education-ai-usecase-heading {
    margin-bottom: 25px;
}

.education-ai-usecase-heading span {
    color: #D852ED;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.education-ai-usecase-heading h3 {
    margin: 8px 0 0;

    color: #252525;

    font-size: 28px;
    font-weight: 700;
}


/* =========================================
   USE CASE GRID
========================================= */

.education-ai-grid {
    display: grid;

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

    gap: 16px;
}


/* =========================================
   USE CASE ITEM
========================================= */

.education-ai-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 100px;

    padding: 18px;

    border: 1px solid #eeeeee;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 22px rgba(45, 20, 60, 0.045);

    transition: all 0.3s ease;
}


/* Icon */

.education-ai-item-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 13px;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 19px;

    transition: all 0.3s ease;
}


/* Text */

.education-ai-item h4 {
    margin: 0 0 5px;

    color: #252525;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.35;
}

.education-ai-item p {
    margin: 0;

    color: #808080;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================
   Hover
========================================= */

.education-ai-item:hover {
    border-color: #D852ED;

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(216, 82, 237, 0.12);
}

.education-ai-item:hover .education-ai-item-icon {
    background: #D852ED;

    color: #ffffff;

    transform: scale(1.08);
}

.education-ai-item:hover h4 {
    color: #D852ED;
}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.education-ai-bottom {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;

    padding: 25px 30px;

    border: 1px solid rgba(216, 82, 237, 0.18);

    border-radius: 18px;

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

.education-ai-bottom-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 15px;

    background: #D852ED;

    color: #ffffff;

    font-size: 23px;
}

.education-ai-bottom h3 {
    margin: 0 0 5px;

    color: #252525;

    font-size: 19px;
    font-weight: 700;
}

.education-ai-bottom p {
    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .education-ai-section {
        padding: 80px 0;
    }

    .education-ai-title h2 {
        font-size: 37px;
    }

    .education-ai-layout {
        grid-template-columns: 1fr;

        gap: 40px;

        margin-top: 55px;
    }

    .education-ai-intro {
        position: static;
    }

    .education-ai-intro-card {
        text-align: center;
    }

    .education-ai-intro-icon {
        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .education-ai-section {
        padding: 65px 0;
    }

    .education-ai-title h2 {
        font-size: 29px;
    }

    .education-ai-title p {
        font-size: 14px;
    }

    .education-ai-layout {
        margin-top: 45px;
    }

    .education-ai-intro-card {
        padding: 28px 22px;
    }

    .education-ai-intro-card h3 {
        font-size: 21px;
    }

    .education-ai-usecase-heading h3 {
        font-size: 24px;
    }

    .education-ai-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .education-ai-item {
        min-height: 90px;
    }

    .education-ai-bottom {
        align-items: flex-start;

        padding: 20px;

        margin-top: 30px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .education-ai-title h2 {
        font-size: 26px;
    }

    .education-ai-item {
        padding: 15px;
    }

    .education-ai-item-icon {
        flex: 0 0 44px;

        width: 44px;
        height: 44px;

        font-size: 17px;
    }

    .education-ai-item h4 {
        font-size: 15px;
    }

    .education-ai-item p {
        font-size: 11px;
    }

    .education-ai-bottom {
        flex-direction: column;

        text-align: center;

        align-items: center;
    }

}

/* =========================================
   EDUCATION PAIN POINT SECTION
========================================= */

.education-pain-section {
    position: relative;
    padding: 100px 0;
    background: #faf3ff;
    overflow: hidden;
}

.phone-icon {
    transform: scaleX(-1);
}

/* =========================================
   Heading
========================================= */

.education-pain-title {
    position: relative;
    z-index: 2;
}

.education-pain-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #D852ED;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.7px;
}

.education-pain-title h2 {
    margin-bottom: 18px;

    color: #252525;

    font-size: 43px;
    font-weight: 700;

    line-height: 1.25;
}

.education-pain-title h2 span {
    color: #D852ED;
}

.education-pain-title p {
    max-width: 760px;

    margin: 0 auto;

    color: #777777;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   Intro
========================================= */

.education-pain-intro {
    display: flex;

    align-items: center;

    gap: 22px;

    max-width: 950px;

    margin: 60px auto 70px;

    padding: 28px 32px;

    border: 1px solid rgba(216, 82, 237, 0.15);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(45, 20, 60, 0.06);
}

.education-pain-intro-icon {
    flex: 0 0 62px;

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 17px;

    background: rgba(216, 82, 237, 0.11);

    color: #D852ED;

    font-size: 26px;
}

.education-pain-intro h3 {
    margin: 0 0 8px;

    color: #252525;

    font-size: 21px;
    font-weight: 700;
}

.education-pain-intro p {
    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   Sub Heading
========================================= */

.education-pain-heading {
    margin-bottom: 30px;

    text-align: center;
}

.education-pain-heading span {
    color: #D852ED;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.education-pain-heading h3 {
    margin: 8px 0 0;

    color: #252525;

    font-size: 29px;
    font-weight: 700;
}


/* =========================================
   PAIN POINT ROW
========================================= */

.education-pain-list {
    max-width: 1150px;

    margin: 0 auto;
}

.education-pain-row {
    display: grid;

    grid-template-columns: 1fr 60px 1fr;

    align-items: stretch;

    gap: 15px;

    margin-bottom: 20px;
}


/* =========================================
   PROBLEM CARD
========================================= */

.education-pain-problem,
.education-pain-solution {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 25px;

    border-radius: 18px;

    transition: all 0.3s ease;
}


/* Problem */

.education-pain-problem {
    border: 1px solid #eeeeee;

    background: #ffffff;
}


/* Solution */

.education-pain-solution {
    border: 1px solid rgba(216, 82, 237, 0.18);

    background: linear-gradient(135deg,
            #ffffff,
            #fcf5ff);
}


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

.education-pain-problem-icon,
.education-pain-solution-icon {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 14px;

    font-size: 19px;
}

.education-pain-problem-icon {
    background: #f4f4f4;

    color: #777777;
}

.education-pain-solution-icon {
    background: rgba(216, 82, 237, 0.11);

    color: #D852ED;
}


/* =========================================
   CARD TEXT
========================================= */

.education-pain-problem small,
.education-pain-solution small {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}

.education-pain-problem small {
    color: #999999;
}

.education-pain-solution small {
    color: #D852ED;
}

.education-pain-problem h4,
.education-pain-solution h4 {
    margin: 0 0 8px;

    color: #252525;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.35;
}

.education-pain-problem p,
.education-pain-solution p {
    margin: 0;

    color: #777777;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================
   CENTER ARROW
========================================= */

.education-pain-arrow {
    display: flex;

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

    color: #D852ED;

    font-size: 19px;
}

.education-pain-arrow i {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(216, 82, 237, 0.15);
}


/* =========================================
   HOVER
========================================= */

.education-pain-problem:hover {
    border-color: #dddddd;

    transform: translateX(-4px);

    box-shadow:
        0 12px 30px rgba(45, 20, 60, 0.07);
}

.education-pain-solution:hover {
    border-color: #D852ED;

    transform: translateX(4px);

    box-shadow:
        0 12px 30px rgba(216, 82, 237, 0.12);
}

.education-pain-solution:hover .education-pain-solution-icon {
    background: #D852ED;

    color: #ffffff;
}


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

.education-pain-bottom {
    display: flex;

    align-items: center;

    gap: 20px;

    max-width: 950px;

    margin: 45px auto 0;

    padding: 25px 30px;

    border-radius: 18px;

    background: #e46ef7;

    box-shadow:
        0 18px 40px rgba(216, 82, 237, 0.18);
}

.education-pain-bottom-icon {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.18);

    color: #ffffff;

    font-size: 22px;
}

.education-pain-bottom h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 700;
}

.education-pain-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .education-pain-section {
        padding: 80px 0;
    }

    .education-pain-title h2 {
        font-size: 37px;
    }

    .education-pain-intro {
        margin-top: 50px;
        margin-bottom: 55px;
    }

    .education-pain-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .education-pain-arrow {
        height: 45px;
    }

    .education-pain-arrow i {
        transform: rotate(90deg);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .education-pain-section {
        padding: 65px 0;
    }

    .education-pain-title h2 {
        font-size: 29px;
    }

    .education-pain-title p {
        font-size: 14px;
    }

    .education-pain-intro {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 40px;
        margin-bottom: 45px;

        padding: 24px 20px;
    }

    .education-pain-intro-icon {
        width: 55px;
        height: 55px;
    }

    .education-pain-intro h3 {
        font-size: 20px;
    }

    .education-pain-heading h3 {
        font-size: 24px;
    }

    .education-pain-problem,
    .education-pain-solution {
        padding: 20px;

        gap: 14px;
    }

    .education-pain-problem-icon,
    .education-pain-solution-icon {
        flex: 0 0 44px;

        width: 44px;
        height: 44px;

        font-size: 17px;
    }

    .education-pain-problem h4,
    .education-pain-solution h4 {
        font-size: 16px;
    }

    .education-pain-problem p,
    .education-pain-solution p {
        font-size: 12px;
    }

    .education-pain-bottom {
        align-items: flex-start;

        padding: 20px;

        margin-top: 30px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .education-pain-title h2 {
        font-size: 26px;
    }

    .education-pain-problem,
    .education-pain-solution {
        flex-direction: column;
    }

    .education-pain-bottom {
        flex-direction: column;

        text-align: center;

        align-items: center;
    }

}

/* =========================================
   AI VOICE AGENT SECTION
========================================= */

.ai-voice-agent-section {
    position: relative;

    padding: 100px 0;



    overflow: hidden;
}


/* Background Glow */

.ai-voice-agent-section::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    top: -200px;
    right: -150px;

    border-radius: 50%;


}


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

.ai-voice-content {
    padding-right: 35px;
}

.ai-voice-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #D852ED;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.ai-voice-content h2 {
    margin-bottom: 22px;

    color: #252525;

    font-size: 43px;

    font-weight: 700;

    line-height: 1.25;
}


.ai-voice-content h2 span {
    color: #D852ED;
}


.ai-voice-content>p {
    margin-bottom: 15px;

    color: #777777;

    font-size: 15px;

    line-height: 1.8;
}


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

.ai-voice-feature {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 25px;
}


.ai-voice-feature-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 13px;

    background: rgba(216, 82, 237, 0.11);

    color: #D852ED;

    font-size: 18px;
}


.ai-voice-feature h4 {
    margin: 0 0 5px;

    color: #252525;

    font-size: 16px;

    font-weight: 700;
}


.ai-voice-feature p {
    margin: 0;

    color: #808080;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   CONVERSATION BOX
========================================= */

.ai-conversation-wrapper {
    position: relative;

    max-width: 650px;

    margin-left: auto;

    border: 1px solid rgba(216, 82, 237, 0.15);

    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(45, 20, 60, 0.10);

    overflow: hidden;
}


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

.ai-conversation-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px;

    border-bottom: 1px solid #eeeeee;

    background: #ffffff;
}


.ai-agent-profile {
    display: flex;

    align-items: center;

    gap: 13px;
}


.ai-agent-avatar {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 14px;

    background: #D852ED;

    color: #ffffff;

    font-size: 20px;
}


.ai-agent-profile h4 {
    margin: 0 0 4px;

    color: #252525;

    font-size: 16px;

    font-weight: 700;
}


.ai-agent-profile span {
    color: #8a8a8a;

    font-size: 11px;
}


.ai-agent-profile span i {
    margin-right: 5px;

    color: #35b96f;

    font-size: 7px;
}


.ai-call-status {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 15px;
}


/* =========================================
   CONVERSATION BODY
========================================= */

.ai-conversation-body {
    padding: 25px 22px;

    background:
        linear-gradient(180deg,
            #ffffff,
            #fcf8ff);
}


/* =========================================
   MESSAGE ROW
========================================= */

.ai-message-row {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;
}


.ai-message-avatar,
.student-message-avatar {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: flex;

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

    margin-top: 3px;

    border-radius: 50%;

    font-size: 12px;
}


.ai-message-avatar {
    background: rgba(216, 82, 237, 0.12);

    color: #D852ED;
}


.student-message-avatar {
    background: #eeeeee;

    color: #666666;
}


/* =========================================
   MESSAGE BOX
========================================= */

.ai-message {
    max-width: 78%;

    padding: 14px 17px;

    border-radius: 16px;

    position: relative;
}


.ai-message-agent {
    border-top-left-radius: 4px;

    background: #f6efff;
}


.ai-message-student {
    border-top-right-radius: 4px;

    background: #D852ED;

    color: #ffffff;
}


.ai-message small {
    display: block;

    margin-bottom: 5px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ai-message-agent small {
    color: #D852ED;
}


.ai-message-student small {
    color: rgba(255, 255, 255, 0.75);
}


.ai-message p {
    margin: 0;

    font-size: 13px;

    line-height: 1.6;
}


.ai-message span {
    display: block;

    margin-top: 6px;

    font-size: 9px;

    text-align: right;
}


.ai-message-agent span {
    color: #999999;
}


.ai-message-student span {
    color: rgba(255, 255, 255, 0.7);
}


/* Student row */

.student-row {
    justify-content: flex-end;
}


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

.ai-conversation-footer {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 17px 22px;

    border-top: 1px solid #eeeeee;

    background: #ffffff;
}


.ai-live-indicator {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #777777;

    font-size: 10px;

    white-space: nowrap;
}


.ai-live-indicator span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35b96f;

    box-shadow:
        0 0 0 4px rgba(53, 185, 111, 0.10);
}


/* =========================================
   SOUND WAVE
========================================= */

.ai-wave {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    flex: 1;

    height: 28px;
}


.ai-wave i {
    display: block;

    width: 3px;

    border-radius: 5px;

    background: #D852ED;
}


.ai-wave i:nth-child(1) {
    height: 8px;
}

.ai-wave i:nth-child(2) {
    height: 16px;
}

.ai-wave i:nth-child(3) {
    height: 23px;
}

.ai-wave i:nth-child(4) {
    height: 13px;
}

.ai-wave i:nth-child(5) {
    height: 25px;
}

.ai-wave i:nth-child(6) {
    height: 17px;
}

.ai-wave i:nth-child(7) {
    height: 10px;
}

.ai-wave i:nth-child(8) {
    height: 19px;
}


/* =========================================
   MIC
========================================= */

.ai-mic {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background: #D852ED;

    color: #ffffff;

    font-size: 13px;
}


/* =========================================
   HOVER
========================================= */

.ai-conversation-wrapper {
    transition: all 0.35s ease;
}

.ai-conversation-wrapper:hover {
    transform: translateY(-5px);

    box-shadow:
        0 30px 65px rgba(216, 82, 237, 0.15);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .ai-voice-agent-section {
        padding: 80px 0;
    }

    .ai-voice-content {
        padding-right: 0;

        margin-bottom: 45px;
    }

    .ai-voice-content h2 {
        font-size: 37px;
    }

    .ai-conversation-wrapper {
        margin: 0 auto;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ai-voice-agent-section {
        padding: 65px 0;
    }

    .ai-voice-content {
        margin-bottom: 35px;
    }

    .ai-voice-content h2 {
        font-size: 29px;
    }

    .ai-voice-content>p {
        font-size: 14px;
    }

    .ai-conversation-wrapper {
        border-radius: 18px;
    }

    .ai-conversation-header {
        padding: 16px;
    }

    .ai-conversation-body {
        padding: 20px 15px;
    }

    .ai-message {
        max-width: 85%;

        padding: 12px 14px;
    }

    .ai-message p {
        font-size: 12px;
    }

    .ai-message-avatar,
    .student-message-avatar {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        font-size: 10px;
    }

    .ai-conversation-footer {
        padding: 14px 15px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .ai-voice-content h2 {
        font-size: 26px;
    }

    .ai-agent-avatar {
        width: 42px;
        height: 42px;
    }

    .ai-agent-profile h4 {
        font-size: 14px;
    }

    .ai-message-row {
        gap: 7px;
    }

    .ai-message {
        max-width: 88%;
    }

    .ai-live-indicator {
        display: none;
    }

}

/* =========================================
   EDUCATION AI DIALER USE CASES
========================================= */

.education-usecase-section {
    padding: 100px 0;
    background: #fbf8ff;
    overflow: hidden;
}


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

.education-usecase-heading {
    max-width: 850px;
    margin: 0 auto 65px;
}

.education-usecase-label {
    display: inline-block;
    margin-bottom: 14px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #D852ED;
}

.education-usecase-heading h2 {
    margin: 0 0 18px;

    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;

    color: #222;
}

.education-usecase-heading h2 span {
    color: #D852ED;
}

.education-usecase-heading p {
    max-width: 700px;
    margin: 0 auto;

    color: #777;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   TIMELINE
========================================= */

.education-usecase-timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}


/* Vertical Line */

.education-usecase-timeline::before {
    content: "";

    position: absolute;

    top: 30px;
    bottom: 30px;
    left: 34px;

    width: 2px;

    background: linear-gradient(to bottom,
            rgba(216, 82, 237, 0.10),
            #D852ED,
            rgba(216, 82, 237, 0.10));
}


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

.education-usecase-item {
    position: relative;

    display: grid;
    grid-template-columns: 70px 1fr;

    gap: 25px;

    margin-bottom: 40px;
}

.education-usecase-item:last-child {
    margin-bottom: 0;
}


/* =========================================
   NUMBER
========================================= */

.education-usecase-number {
    position: relative;
    z-index: 2;

    width: 68px;
    height: 68px;

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

    border-radius: 50%;

    background: #fff;
    border: 2px solid #D852ED;

    color: #D852ED;

    font-size: 16px;
    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(216, 82, 237, 0.12);
}


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

.education-usecase-content {
    display: flex;
    align-items: flex-start;

    gap: 22px;

    padding: 30px;

    background: #fff;

    border: 1px solid rgba(216, 82, 237, 0.12);

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(40, 20, 60, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.education-usecase-content:hover {
    transform: translateX(7px);

    border-color: rgba(216, 82, 237, 0.35);

    box-shadow:
        0 18px 40px rgba(216, 82, 237, 0.12);
}


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

.education-usecase-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

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

    border-radius: 15px;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 21px;
}


/* =========================================
   DETAILS
========================================= */

.education-usecase-details {
    min-width: 0;
    flex: 1;
}

.education-usecase-tag {
    display: inline-block;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;

    color: #D852ED;
}

.education-usecase-details h3 {
    margin: 6px 0 12px;

    font-size: 24px;
    line-height: 1.3;
    font-weight: 750;

    color: #222;
}

.education-usecase-details>p {
    margin: 0;

    color: #777;

    font-size: 15px;
    line-height: 1.75;
}


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

.education-usecase-workflow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px dashed rgba(216, 82, 237, 0.25);
}

.education-usecase-workflow div {
    padding: 8px 11px;

    border-radius: 7px;

    background: #faf7ff;

    color: #555;

    font-size: 11px;
    font-weight: 600;
}

.education-usecase-workflow>i {
    color: #D852ED;
    font-size: 9px;
}


/* =========================================
   ENROLLMENT POINTS
========================================= */

.education-usecase-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    margin-top: 20px;
}

.education-usecase-points span {
    color: #555;

    font-size: 13px;
}

.education-usecase-points i {
    margin-right: 7px;

    color: #D852ED;
}


/* =========================================
   PARENT COMMUNICATION
========================================= */

.education-usecase-parent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 9px;

    margin-top: 20px;
}

.education-usecase-parent-grid span {
    padding: 10px 12px;

    border-radius: 8px;

    background: #faf8ff;

    color: #555;

    font-size: 12px;
    font-weight: 600;
}

.education-usecase-parent-grid i {
    margin-right: 6px;

    color: #D852ED;
}


/* =========================================
   ESCALATION
========================================= */

.education-usecase-escalation {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 18px;
    padding: 12px 14px;

    background: rgba(216, 82, 237, 0.06);

    border-left: 3px solid #D852ED;

    color: #666;

    font-size: 12px;
    line-height: 1.5;
}

.education-usecase-escalation i {
    color: #D852ED;
    font-size: 16px;
}


/* =========================================
   FEE FLOW
========================================= */

.education-usecase-fee-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 23px;
    padding: 18px;

    border-radius: 13px;

    background: #faf8ff;
}

.education-usecase-fee-step {
    display: flex;
    align-items: center;

    gap: 9px;
}

.education-usecase-fee-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

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

    border-radius: 10px;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 14px;
}

.education-usecase-fee-step span {
    color: #555;

    font-size: 12px;
    font-weight: 700;
}

.education-usecase-fee-flow>i {
    flex-shrink: 0;

    color: #D852ED;
    font-size: 10px;
}


/* =========================================
   ATTENDANCE FLOW
========================================= */

.education-usecase-attendance-flow {
    display: grid;

    grid-template-columns:
        1fr 25px 1fr 25px 1fr 25px 1fr;

    align-items: center;

    gap: 8px;

    margin-top: 23px;
    padding: 18px;

    border-radius: 13px;

    background: #faf8ff;
}

.education-usecase-attendance-flow>div {
    text-align: center;
}

.education-usecase-attendance-flow strong {
    width: 34px;
    height: 34px;

    margin: 0 auto 7px;

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

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 10px;
}

.education-usecase-attendance-flow span {
    display: block;

    color: #555;

    font-size: 10px;
    font-weight: 700;
}

.education-usecase-attendance-flow>i {
    text-align: center;

    color: #D852ED;

    font-size: 9px;
}

.education-usecase-number {
    transition: all 0.35s ease;
}

.education-usecase-item:hover .education-usecase-number {
    background: #D852ED;
    border-color: #D852ED;
    color: #fff;

    transform: scale(1.08);

    box-shadow:
        0 0 0 6px rgba(216, 82, 237, 0.10),
        0 10px 25px rgba(216, 82, 237, 0.30);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .education-usecase-section {
        padding: 80px 0;
    }

    .education-usecase-heading h2 {
        font-size: 38px;
    }

    .education-usecase-content {
        padding: 25px;
    }

    .education-usecase-fee-flow {
        flex-wrap: wrap;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .education-usecase-section {
        padding: 65px 0;
    }

    .education-usecase-heading {
        margin-bottom: 45px;
    }

    .education-usecase-heading h2 {
        font-size: 31px;
    }

    .education-usecase-heading p {
        font-size: 15px;
    }


    /* Remove Timeline */

    .education-usecase-timeline::before {
        display: none;
    }


    /* Stack Items */

    .education-usecase-item {
        display: block;

        margin-bottom: 30px;
    }


    /* Number */

    .education-usecase-number {
        width: 52px;
        height: 52px;

        margin-left: 18px;
        margin-bottom: -10px;

        font-size: 13px;
    }


    /* Content */

    .education-usecase-content {
        display: block;

        padding: 25px 20px;

        border-radius: 17px;
    }


    .education-usecase-icon {
        margin-bottom: 17px;
    }


    .education-usecase-details h3 {
        font-size: 21px;
    }


    .education-usecase-details>p {
        font-size: 14px;
    }


    /* Workflow */

    .education-usecase-workflow {
        gap: 6px;
    }

    .education-usecase-workflow>i {
        display: none;
    }


    /* Points */

    .education-usecase-points {
        grid-template-columns: 1fr;
    }


    /* Parent */

    .education-usecase-parent-grid {
        grid-template-columns: 1fr;
    }


    /* Fee */

    .education-usecase-fee-flow {
        flex-direction: column;
        align-items: flex-start;
    }

    .education-usecase-fee-flow>i {
        margin-left: 14px;

        transform: rotate(90deg);
    }


    /* Attendance */

    .education-usecase-attendance-flow {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .education-usecase-attendance-flow>i {
        transform: rotate(90deg);
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .education-usecase-heading h2 {
        font-size: 27px;
    }

    .education-usecase-heading p {
        font-size: 14px;
    }

    .education-usecase-content {
        padding: 22px 17px;
    }

    .education-usecase-details h3 {
        font-size: 20px;
    }

    .education-usecase-workflow div {
        font-size: 10px;
        padding: 7px 9px;
    }

    .education-usecase-escalation {
        align-items: flex-start;
    }

}

/* =========================================
   EDUCATION RESPONSIBLE AI
========================================= */

.education-responsible-section {
    padding: 100px 0;
    background: #fbf8ff;
    overflow: hidden;
}


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

.education-responsible-heading {
    max-width: 850px;
    margin: 0 auto 60px;
}

.education-responsible-label {
    display: inline-block;
    margin-bottom: 14px;

    color: #D852ED;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.education-responsible-heading h2 {
    margin: 0 0 18px;

    color: #222;

    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.education-responsible-heading h2 span {
    color: #D852ED;
}

.education-responsible-heading p {
    max-width: 700px;
    margin: 0 auto;

    color: #777;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   COMMON SMALL TITLE
========================================= */

.education-responsible-small-title {
    display: inline-block;

    margin-bottom: 8px;

    color: #D852ED;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* =========================================
   RESPONSIBLE INTRO
========================================= */

.education-responsible-intro {
    display: grid;

    grid-template-columns: 75px 1fr 270px;

    gap: 25px;

    align-items: center;

    padding: 35px;

    margin-bottom: 35px;

    background: #fff;

    border: 1px solid rgba(216, 82, 237, 0.13);

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(40, 20, 60, 0.05);
}


/* Shield */

.education-responsible-intro-icon {
    width: 70px;
    height: 70px;

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

    border-radius: 18px;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 27px;
}


/* Intro Content */

.education-responsible-intro-content h3 {
    margin: 3px 0 12px;

    color: #222;

    font-size: 27px;
    line-height: 1.3;
    font-weight: 750;
}

.education-responsible-intro-content p {
    margin: 0 0 10px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}

.education-responsible-intro-content p:last-child {
    margin-bottom: 0;
}


/* Principles */

.education-responsible-principles {
    display: grid;

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

    gap: 10px;
}

.education-responsible-principles div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 12px;

    background: #faf8ff;

    border-radius: 9px;

    color: #555;

    font-size: 12px;
    font-weight: 650;
}

.education-responsible-principles i {
    color: #D852ED;
}


/* =========================================
   HIGH VOLUME
========================================= */

.education-responsible-volume {
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 35px;

    align-items: center;

    padding: 38px;

    margin-bottom: 35px;

    background: #24202a;

    border-radius: 22px;

    position: relative;

    overflow: hidden;
}

.education-responsible-volume::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.13);
}


/* Volume Content */

.education-responsible-volume-content {
    position: relative;
    z-index: 2;
}

.education-responsible-volume-content h3 {
    margin: 4px 0 15px;

    color: #fff;

    font-size: 30px;
    line-height: 1.3;
    font-weight: 750;
}

.education-responsible-volume-content h3 span {
    color: #D852ED;
}

.education-responsible-volume-content p {
    margin: 0 0 10px;

    color: #c8c5cb;

    font-size: 14px;
    line-height: 1.75;
}

.education-responsible-volume-content p:last-child {
    margin-bottom: 0;
}


/* =========================================
   AI / HUMAN BALANCE
========================================= */

.education-responsible-balance {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    justify-content: center;

    gap: 15px;
}

.education-responsible-balance-item {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 16px;

    min-width: 145px;

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

    background: rgba(255, 255, 255, 0.05);

    border-radius: 13px;
}

.education-responsible-balance-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 10px;

    background: rgba(216, 82, 237, 0.14);

    color: #D852ED;
}

.education-responsible-balance-item strong {
    display: block;

    color: #fff;

    font-size: 13px;
}

.education-responsible-balance-item span {
    display: block;

    margin-top: 3px;

    color: #aaa;

    font-size: 9px;
}

.education-responsible-balance-line {
    color: #D852ED;
}


/* =========================================
   CHECKLIST
========================================= */

.education-responsible-checklist {
    padding: 40px;

    background: #fff;

    border: 1px solid rgba(216, 82, 237, 0.13);

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(40, 20, 60, 0.05);
}


/* Checklist Heading */

.education-responsible-checklist-heading {
    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 32px;
}

.education-responsible-checklist-icon {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;

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

    border-radius: 14px;

    background: rgba(216, 82, 237, 0.10);

    color: #D852ED;

    font-size: 21px;
}

.education-responsible-checklist-heading h3 {
    margin: 2px 0 10px;

    color: #222;

    font-size: 27px;
    font-weight: 750;
}

.education-responsible-checklist-heading h3 span {
    color: #D852ED;
}

.education-responsible-checklist-heading p {
    max-width: 750px;

    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}


/* Checklist Grid */

.education-responsible-checklist-grid {
    display: grid;

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

    gap: 12px;
}


/* Check */

.education-responsible-check {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 18px;

    border: 1px solid #f0eaf3;

    border-radius: 13px;

    transition: all 0.3s ease;
}

.education-responsible-check:hover {
    transform: translateY(-3px);

    border-color: rgba(216, 82, 237, 0.30);

    box-shadow:
        0 8px 22px rgba(216, 82, 237, 0.08);
}


/* Number */

.education-responsible-check-number {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

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

    border-radius: 8px;

    background: #faf7ff;

    color: #D852ED;

    font-size: 9px;
    font-weight: 800;
}


/* Check Icon */

.education-responsible-check i {
    margin-bottom: 5px;

    color: #D852ED;

    font-size: 15px;
}

.education-responsible-check strong {
    display: block;

    color: #333;

    font-size: 13px;
}

.education-responsible-check p {
    margin: 4px 0 0;

    color: #888;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.education-responsible-bottom {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 35px;

    padding: 22px 25px;

    background: rgba(216, 82, 237, 0.07);

    border-left: 4px solid #D852ED;

    border-radius: 12px;
}

.education-responsible-bottom-icon {
    flex: 0 0 45px;

    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background: #fff;

    color: #D852ED;

    box-shadow:
        0 5px 15px rgba(216, 82, 237, 0.10);
}

.education-responsible-bottom strong {
    display: block;

    margin-bottom: 4px;

    color: #333;

    font-size: 15px;
}

.education-responsible-bottom span {
    color: #777;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .education-responsible-section {
        padding: 80px 0;
    }

    .education-responsible-heading h2 {
        font-size: 38px;
    }

    .education-responsible-intro {
        grid-template-columns: 65px 1fr;
    }

    .education-responsible-principles {
        grid-column: 2;
    }

    .education-responsible-volume {
        grid-template-columns: 1fr;
    }

    .education-responsible-balance {
        justify-content: flex-start;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .education-responsible-section {
        padding: 65px 0;
    }

    .education-responsible-heading {
        margin-bottom: 45px;
    }

    .education-responsible-heading h2 {
        font-size: 31px;
    }

    .education-responsible-heading p {
        font-size: 14px;
    }


    /* Intro */

    .education-responsible-intro {
        display: block;

        padding: 25px 20px;
    }

    .education-responsible-intro-icon {
        margin-bottom: 18px;
    }

    .education-responsible-intro-content h3 {
        font-size: 23px;
    }

    .education-responsible-principles {
        margin-top: 20px;

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


    /* Volume */

    .education-responsible-volume {
        padding: 28px 20px;
    }

    .education-responsible-volume-content h3 {
        font-size: 25px;
    }

    .education-responsible-balance {
        flex-direction: column;
        align-items: stretch;
    }

    .education-responsible-balance-item {
        width: 100%;
    }

    .education-responsible-balance-line {
        text-align: center;

        transform: rotate(90deg);
    }


    /* Checklist */

    .education-responsible-checklist {
        padding: 25px 20px;
    }

    .education-responsible-checklist-heading {
        display: block;
    }

    .education-responsible-checklist-icon {
        margin-bottom: 15px;
    }

    .education-responsible-checklist-heading h3 {
        font-size: 23px;
    }

    .education-responsible-checklist-grid {
        grid-template-columns: 1fr;
    }


    /* Bottom */

    .education-responsible-bottom {
        align-items: flex-start;

        padding: 18px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .education-responsible-heading h2 {
        font-size: 27px;
    }

    .education-responsible-principles {
        grid-template-columns: 1fr;
    }

    .education-responsible-volume-content h3 {
        font-size: 22px;
    }

    .education-responsible-checklist-heading h3 {
        font-size: 21px;
    }

    .education-responsible-bottom {
        display: block;
    }

    .education-responsible-bottom-icon {
        margin-bottom: 12px;
    }

}

/* =========================================
   TRADITIONAL CALLING SECTION
========================================= */

.traditional-calling-section {
    position: relative;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}

.traditional-calling-section::before {
    content: "";
    position: absolute;
    top: -130px;
    left: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.045);
}

.traditional-calling-section .container {
    position: relative;
    z-index: 1;
}


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

.traditional-calling-heading {
    max-width: 850px;
    margin: 0 auto 55px;
}

.traditional-calling-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.traditional-calling-heading h2 {
    margin-bottom: 18px;
    color: #292330;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
}

.traditional-calling-heading h2 span {
    color: #D852ED;
}

.traditional-calling-heading p {
    max-width: 760px;
    margin: 0 auto;
    color: #756d7d;
    font-size: 16px;
    line-height: 1.9;
}


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

.traditional-calling-wrapper {
    display: grid;
    grid-template-columns: 0.95fr 1.2fr;
    gap: 48px;
    align-items: center;
}


/* =========================================
   LEFT VISUAL
========================================= */

.traditional-calling-visual {
    padding: 27px;
    border: 1px solid #e8dced;
    border-radius: 30px;

    box-shadow: 0 18px 45px rgba(54, 25, 71, 0.07);
}

/* Hover Effect - Left Visual & Right Content */
.traditional-calling-visual {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 22px;
}

/* Pink Outline + Move + Shadow */
.traditional-calling-visual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.traditional-calling-visual-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9dff0;
    color: #3a2c43;
    font-size: 13px;
    font-weight: 700;
}

.traditional-calling-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e27a86;
    box-shadow: 0 0 0 5px rgba(226, 122, 134, 0.12);
}

.traditional-calling-visual-top small {
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f9e5e8;
    color: #c35b69;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================
   PHONE MOCKUP
========================================= */

.traditional-calling-phone {
    margin: 25px 0 22px;
    padding: 20px;
    border: 1px solid #e8dced;
    border-radius: 17px;
    background: #ffffff;
}

.traditional-calling-phone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #80758b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.traditional-calling-phone-top i {
    color: #d36b7c;
    font-size: 15px;
}

.traditional-calling-number {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 25px 0 18px;
}

.traditional-calling-number>i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 16px;
}

.traditional-calling-number strong {
    display: block;
    margin-bottom: 4px;
    color: #35283e;
    font-size: 14px;
}

.traditional-calling-number span {
    display: block;
    color: #96899e;
    font-size: 11px;
}

.traditional-calling-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 10px;
    background: #f0eaf3;
}

.traditional-calling-progress span {
    display: block;
    width: 48%;
    height: 100%;
    border-radius: 10px;
    background: #D852ED;
}

.traditional-calling-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #a17835;
    font-size: 11px;
}

.traditional-calling-status i {
    color: #d99c42;
}


/* =========================================
   CALL ISSUES
========================================= */

.traditional-calling-issues {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.traditional-calling-issue {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid #eee3f1;
    border-radius: 12px;
    background: #ffffff;
}

.traditional-calling-issue-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff0f2;
    color: #d46c7b;
    font-size: 13px;
}

.traditional-calling-issue strong {
    display: block;
    margin-bottom: 3px;
    color: #3c3045;
    font-size: 12px;
    font-weight: 700;
}

.traditional-calling-issue span {
    display: block;
    color: #97899f;
    font-size: 10px;
}

.traditional-calling-cross {
    margin-left: auto;
    color: #dc8792;
    font-size: 12px;
}

.traditional-calling-visual-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e8dced;
    color: #887a92;
    font-size: 11px;
}

.traditional-calling-visual-footer i {
    color: #d99c42;
}


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

.traditional-calling-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.traditional-calling-content-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.traditional-calling-content h3 {
    margin-bottom: 20px;
    color: #2b2233;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.35;
}

.traditional-calling-content h3 span {
    color: #D852ED;
}

.traditional-calling-content>p {
    margin-bottom: 17px;
    color: #71687b;
    font-size: 14px;
    line-height: 1.95;
}


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

.traditional-calling-scale {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 20px;
    border: 1px solid #eee3f3;
    border-radius: 16px;
    background: #fcf9ff;
}

.traditional-calling-scale-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.traditional-calling-scale-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 13px;
}

.traditional-calling-scale-item span {
    display: block;
    margin-bottom: 4px;
    color: #95889e;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.traditional-calling-scale-item strong {
    display: block;
    color: #3b2e45;
    font-size: 12px;
    line-height: 1.5;
}

.traditional-calling-scale-item p {
    margin: 4px 0 0;
    color: #96899f;
    font-size: 10px;
    line-height: 1.6;
}

.traditional-calling-scale-divider {
    color: #D852ED;
    font-size: 16px;
}


/* =========================================
   CONCLUSION
========================================= */

.traditional-calling-conclusion {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
    padding: 20px;
    border-left: 4px solid #D852ED;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg,
            rgba(216, 82, 237, 0.10),
            rgba(216, 82, 237, 0.025));
}

.traditional-calling-conclusion-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #D852ED;
    color: #ffffff;
    font-size: 15px;
}

.traditional-calling-conclusion h4 {
    margin: 0 0 7px;
    color: #35283e;
    font-size: 15px;
    font-weight: 800;
}

.traditional-calling-conclusion p {
    margin: 0;
    color: #786c82;
    font-size: 12px;
    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .traditional-calling-wrapper {
        gap: 30px;
    }

    .traditional-calling-visual {
        padding: 23px;
    }

    .traditional-calling-content h3 {
        font-size: 26px;
    }

}

@media (max-width: 991px) {

    .traditional-calling-section {
        padding: 70px 0;
    }

    .traditional-calling-wrapper {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .traditional-calling-visual {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .traditional-calling-content h3 {
        font-size: 28px;
    }

}

@media (max-width: 767px) {

    .traditional-calling-heading {
        margin-bottom: 35px;
    }

    .traditional-calling-heading h2 {
        font-size: 32px;
    }

    .traditional-calling-heading p {
        font-size: 14px;
        line-height: 1.8;
    }

    .traditional-calling-content h3 {
        font-size: 25px;
    }

    .traditional-calling-scale {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .traditional-calling-scale-divider {
        display: flex;
        justify-content: center;
        transform: rotate(90deg);
    }

}

@media (max-width: 480px) {

    .traditional-calling-section {
        padding: 55px 0;
    }

    .traditional-calling-visual {
        padding: 19px;
        border-radius: 18px;
    }

    .traditional-calling-heading h2 {
        font-size: 28px;
    }

    .traditional-calling-visual-top {
        font-size: 11px;
    }

    .traditional-calling-phone {
        padding: 16px;
    }

    .traditional-calling-issue {
        padding: 10px;
    }

    .traditional-calling-conclusion {
        padding: 16px;
    }

}



/* =========================================
   PREDICTIVE DIALER BENEFITS
========================================= */

.predictive-benefits-section {
    padding: 100px 0;
    background: #fbf8ff;
    overflow: hidden;
}


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

.predictive-benefits-heading {
    max-width: 850px;
    margin: 0 auto 65px;
}

.predictive-benefits-label {
    display: inline-block;
    margin-bottom: 14px;

    color: #D852ED;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.predictive-benefits-heading h2 {
    margin: 0 0 18px;

    color: #222;

    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.predictive-benefits-heading h2 span {
    color: #D852ED;
}

.predictive-benefits-heading p {
    max-width: 700px;
    margin: 0 auto;

    color: #777;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   BENEFITS LIST
========================================= */

.predictive-benefits-list {
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================
   BENEFIT ITEM
========================================= */

.predictive-benefit-item {
    display: grid;

    grid-template-columns: 70px 220px 1fr;

    gap: 25px;
    align-items: center;

    margin-bottom: 25px;
    padding: 28px;

    background: #fff;

    border: 1px solid rgba(216, 82, 237, 0.12);
    border-radius: 22px;

    box-shadow: 0 10px 30px rgba(40, 20, 60, 0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.predictive-benefit-item:last-child {
    margin-bottom: 0;
}

.predictive-benefit-item:hover {
    transform: translateY(-5px);

    border-color: rgba(216, 82, 237, 0.35);

    box-shadow: 0 18px 40px rgba(216, 82, 237, 0.12);
}


/* =========================================
   NUMBER
========================================= */

.predictive-benefit-number {
    width: 55px;
    height: 55px;

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

    border: 1px solid rgba(216, 82, 237, 0.30);
    border-radius: 50%;

    background: #faf7ff;
    color: #D852ED;

    font-size: 15px;
    font-weight: 800;
}


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

.predictive-benefit-visual {
    min-height: 155px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 15px;

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            #faf5ff,
            #f5eaff);

    border: 1px solid rgba(216, 82, 237, 0.10);
}

.predictive-benefit-icon {
    width: 65px;
    height: 65px;

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

    border-radius: 20px;

    background: #fff;

    color: #D852ED;

    font-size: 27px;

    box-shadow: 0 8px 22px rgba(216, 82, 237, 0.12);
}

.predictive-benefit-mini-stat {
    text-align: center;
}

.predictive-benefit-mini-stat strong {
    display: block;

    color: #333;

    font-size: 17px;
    font-weight: 800;
}

.predictive-benefit-mini-stat span {
    display: block;
    margin-top: 3px;

    color: #888;

    font-size: 10px;
}


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

.predictive-benefit-content {
    min-width: 0;
}

.predictive-benefit-tag {
    display: inline-block;
    margin-bottom: 7px;

    color: #D852ED;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.predictive-benefit-content h3 {
    margin: 0 0 12px;

    color: #222;

    font-size: 25px;
    line-height: 1.3;
    font-weight: 750;
}

.predictive-benefit-content>p {
    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   NOTE
========================================= */

.predictive-benefit-note {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 17px;
    padding-top: 15px;

    border-top: 1px dashed rgba(216, 82, 237, 0.22);

    color: #666;

    font-size: 12px;
    line-height: 1.6;
}

.predictive-benefit-note i {
    margin-top: 3px;
    color: #D852ED;
}

/* Campaign Management Icon */
.predictive-benefit-item:last-child .predictive-benefit-icon {


    border: 1px solid rgba(216, 82, 237, 0.20);
}

.predictive-benefit-item:last-child .predictive-benefit-icon i {
    font-size: 58px;
    color: #D852ED;
    display: inline-block;
    line-height: 1;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .predictive-benefits-section {
        padding: 80px 0;
    }

    .predictive-benefits-heading h2 {
        font-size: 38px;
    }

    .predictive-benefit-item {
        grid-template-columns: 55px 180px 1fr;

        gap: 18px;
        padding: 22px;
    }

    .predictive-benefit-visual {
        min-height: 145px;
    }

    .predictive-benefit-content h3 {
        font-size: 21px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .predictive-benefits-section {
        padding: 65px 0;
    }

    .predictive-benefits-heading {
        margin-bottom: 45px;
    }

    .predictive-benefits-heading h2 {
        font-size: 31px;
    }

    .predictive-benefits-heading p {
        font-size: 14px;
    }

    .predictive-benefit-item {
        display: grid;

        grid-template-columns: 50px 1fr;

        gap: 15px;

        padding: 22px 18px;
    }

    .predictive-benefit-number {
        width: 45px;
        height: 45px;

        font-size: 12px;
    }

    .predictive-benefit-visual {
        grid-column: 2;

        min-height: 135px;
    }

    .predictive-benefit-content {
        grid-column: 1 / -1;
    }

    .predictive-benefit-icon {
        width: 55px;
        height: 55px;

        font-size: 23px;
    }

    .predictive-benefit-content h3 {
        font-size: 21px;
    }

    .predictive-benefit-content>p {
        font-size: 14px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .predictive-benefits-heading h2 {
        font-size: 27px;
    }

    .predictive-benefit-item {
        padding: 20px 15px;
    }

    .predictive-benefit-visual {
        min-height: 125px;
    }

    .predictive-benefit-content h3 {
        font-size: 20px;
    }

    .predictive-benefit-note {
        font-size: 11px;
    }

}

/* =========================================
   DIALER COMPARISON SECTION
========================================= */

.dialer-comparison-section {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(135deg, #ffffff, #fbf7ff);
    overflow: hidden;
}

.dialer-comparison-section .container,
.dialer-business-section .container {
    position: relative;
    z-index: 1;
}


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

.dialer-comparison-heading {
    max-width: 820px;
    margin: 0 auto 55px;
}

.dialer-comparison-label,
.dialer-business-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dialer-comparison-heading h2 {
    margin-bottom: 18px;
    color: #2c2334;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
}

.dialer-comparison-heading h2 span {
    color: #D852ED;
}

.dialer-comparison-heading p {
    max-width: 730px;
    margin: 0 auto;
    color: #756b80;
    font-size: 15px;
    line-height: 1.9;
}


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

.dialer-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 55px 1fr;
    gap: 18px;
    align-items: center;
}

.dialer-comparison-card {
    height: 100%;
    padding: 30px;
    border: 1px solid #e9dff0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(49, 25, 65, 0.06);
    transition: all 0.3s ease;
}

.dialer-comparison-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(216, 82, 237, 0.12);
}

.dialer-predictive-card {
    border-top: 4px solid #D852ED;
}

.dialer-power-card {
    border-top: 4px solid #8d78a0;
}

.dialer-comparison-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.dialer-comparison-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 18px;
}

.dialer-power-card .dialer-comparison-card-icon {
    background: #f1edf4;
    color: #806b91;
}

.dialer-comparison-type {
    color: #96889f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dialer-comparison-card h3 {
    margin-bottom: 14px;
    color: #33263d;
    font-size: 27px;
    font-weight: 800;
}

.dialer-comparison-description {
    min-height: 75px;
    margin-bottom: 25px;
    color: #766b80;
    font-size: 13px;
    line-height: 1.85;
}


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

.dialer-comparison-flow {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dialer-comparison-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px;
    border: 1px solid #f0e8f3;
    border-radius: 12px;
    background: #fdfbff;
}

.dialer-comparison-flow-step>span {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 10px;
    font-weight: 800;
}

.dialer-comparison-flow-step strong {
    display: block;
    margin-bottom: 4px;
    color: #44334e;
    font-size: 12px;
    font-weight: 700;
}

.dialer-comparison-flow-step small {
    display: block;
    color: #9a8ca2;
    font-size: 11px;
    line-height: 1.6;
}

.dialer-comparison-best {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 24px;
    padding: 15px;
    border-radius: 12px;
    background: #f8f0fc;
    color: #685270;
    font-size: 11px;
    line-height: 1.8;
}

.dialer-comparison-best i {
    padding-top: 3px;
    color: #D852ED;
}


/* =========================================
   VS BADGE
========================================= */

.dialer-comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialer-comparison-vs span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 5px 20px rgba(216, 82, 237, 0.25);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================
   SUMMARY BOX
========================================= */

.dialer-comparison-summary {
    margin-top: 35px;
    padding: 30px;
    border: 1px solid #eadff0;
    border-radius: 20px;
    background: #ffffff;
}

.dialer-comparison-summary-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

.dialer-comparison-summary-heading>i {
    color: #D852ED;
    font-size: 20px;
}

.dialer-comparison-summary-heading h3 {
    margin: 0;
    color: #34283d;
    font-size: 22px;
    font-weight: 800;
}

.dialer-comparison-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dialer-comparison-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dialer-comparison-summary-item>i {
    padding-top: 3px;
    color: #D852ED;
    font-size: 15px;
}

.dialer-comparison-summary-item h4 {
    margin: 0 0 6px;
    color: #44334d;
    font-size: 13px;
    font-weight: 800;
}

.dialer-comparison-summary-item p {
    margin: 0;
    color: #91839b;
    font-size: 11px;
    line-height: 1.7;
}


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

.dialer-business-section {
    position: relative;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}

.dialer-business-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.dialer-business-content h2 {
    margin-bottom: 22px;
    color: #2c2334;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.3;
}

.dialer-business-content h2 span {
    color: #D852ED;
}

.dialer-business-content>p {
    margin-bottom: 16px;
    color: #756b80;
    font-size: 14px;
    line-height: 1.95;
}

.dialer-business-quote {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 25px;
    padding: 20px;
    border-left: 4px solid #D852ED;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg,
            rgba(216, 82, 237, 0.10),
            rgba(216, 82, 237, 0.025));
}

.dialer-business-quote>i {
    padding-top: 4px;
    color: #D852ED;
    font-size: 18px;
}

.dialer-business-quote p {
    margin: 0;
    color: #685270;
    font-size: 13px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================
   BUSINESS CHECKLIST
========================================= */

.dialer-business-checklist {
    padding: 30px;
    border: 1px solid #e9dff0;
    border-radius: 22px;
    /* background: #fbf8ff; */
    box-shadow: 0 15px 40px rgba(49, 25, 65, 0.06);
}

/* Checklist Card Hover Effect */
.dialer-business-checklist {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 22px;
}

/* Pink Outline + Move + Pink Shadow */
.dialer-business-checklist:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.dialer-business-checklist-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e9dff0;
}

.dialer-business-checklist-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #D852ED;
    color: #ffffff;
    font-size: 18px;
}

.dialer-business-checklist-header h3 {
    margin: 0 0 5px;
    color: #34283d;
    font-size: 21px;
    font-weight: 800;
}

.dialer-business-checklist-header p {
    margin: 0;
    color: #97899f;
    font-size: 11px;
}

.dialer-business-check-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 22px;
}

.dialer-business-check-item:last-child {
    margin-bottom: 0;
}

.dialer-business-check-icon {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.12);
    color: #D852ED;
    font-size: 11px;
}

.dialer-business-check-item h4 {
    margin: 0 0 5px;
    color: #45344f;
    font-size: 13px;
    font-weight: 800;
}

.dialer-business-check-item p {
    margin: 0;
    color: #8e8098;
    font-size: 11px;
    line-height: 1.75;
}


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

@media (max-width: 1199px) {

    .dialer-comparison-card {
        padding: 24px;
    }

    .dialer-comparison-grid {
        gap: 12px;
    }

    .dialer-comparison-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 25px;
    }

    .dialer-business-wrapper {
        gap: 35px;
    }

}

@media (max-width: 991px) {

    .dialer-comparison-section,
    .dialer-business-section {
        padding: 70px 0;
    }

    .dialer-comparison-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .dialer-comparison-card {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .dialer-comparison-vs {
        margin: -7px 0;
    }

    .dialer-comparison-vs span {
        width: 42px;
        height: 42px;
        border-width: 4px;
    }

    .dialer-business-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dialer-business-content {
        max-width: 750px;
    }

}

@media (max-width: 767px) {

    .dialer-comparison-heading {
        margin-bottom: 35px;
    }

    .dialer-comparison-heading h2 {
        font-size: 32px;
    }

    .dialer-comparison-heading p {
        font-size: 14px;
    }

    .dialer-comparison-card {
        padding: 22px;
        border-radius: 18px;
    }

    .dialer-comparison-card h3 {
        font-size: 25px;
    }

    .dialer-comparison-summary {
        padding: 23px;
    }

    .dialer-comparison-summary-heading h3 {
        font-size: 19px;
    }

    .dialer-business-content h2 {
        font-size: 32px;
    }

    .dialer-business-checklist {
        padding: 23px;
    }

}

@media (max-width: 480px) {

    .dialer-comparison-section,
    .dialer-business-section {
        padding: 55px 0;
    }

    .dialer-comparison-heading h2 {
        font-size: 28px;
    }

    .dialer-comparison-summary-grid {
        grid-template-columns: 1fr;
    }

    .dialer-comparison-summary-heading {
        justify-content: flex-start;
    }

    .dialer-comparison-summary-heading h3 {
        font-size: 17px;
    }

    .dialer-business-content h2 {
        font-size: 28px;
    }

    .dialer-business-checklist-header h3 {
        font-size: 19px;
    }

    .dialer-business-quote {
        padding: 16px;
    }

}

/* =========================================
   PREDICTIVE BIGGER PICTURE SECTION
   SKY BLUE BACKGROUND
========================================= */

.predictive-bigger-picture-section {
    position: relative;
    padding: 95px 0;
    background: #fbf8ff;
    overflow: hidden;
}

.predictive-bigger-picture-section::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -110px;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
}

.predictive-bigger-picture-section::after {
    content: "";
    position: absolute;
    bottom: -180px;
    left: -120px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
}

.predictive-bigger-picture-section .container {
    position: relative;
    z-index: 1;
}


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

.predictive-bigger-picture-heading {
    max-width: 850px;
    margin: 0 auto 50px;
}

.predictive-bigger-picture-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.predictive-bigger-picture-heading h2 {
    margin-bottom: 18px;
    color: #203746;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
}

.predictive-bigger-picture-heading h2 span {
    color: #D852ED;
}

.predictive-bigger-picture-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: #607b8a;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   INTRO BOX
========================================= */

.predictive-bigger-picture-intro {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 27px 30px;

    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 35px rgba(61, 139, 177, 0.07);
}

.predictive-bigger-picture-intro-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #D852ED;
    color: #ffffff;
    font-size: 18px;
}

.predictive-bigger-picture-intro h3 {
    margin: 0 0 8px;
    color: #294353;
    font-size: 21px;
    font-weight: 800;
}

.predictive-bigger-picture-intro p {
    margin: 0;
    color: #66808f;
    font-size: 13px;
    line-height: 1.9;
}


/* =========================================
   FEATURE GRID
========================================= */

.predictive-bigger-picture-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 45px;
}

.predictive-bigger-picture-feature {
    padding: 25px 20px;

    border-radius: 17px;
    background: rgba(255, 255, 255, 0.88);
    transition: all 0.3s ease;
}

.predictive-bigger-picture-feature:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.predictive-bigger-picture-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 16px;
}

.predictive-bigger-picture-feature h4 {
    margin-bottom: 9px;
    color: #2e4655;
    font-size: 14px;
    font-weight: 800;
}

.predictive-bigger-picture-feature p {
    margin: 0;
    color: #718996;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================
   HUMAN VALUE SECTION
========================================= */

.predictive-bigger-picture-human {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 30px;
    padding: 38px;

    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(61, 139, 177, 0.08);
}


.predictive-bigger-picture-human {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 30px;
    padding: 38px;

    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(61, 139, 177, 0.08);

    /* Hover Transition */
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Pink Outline + Move + Shadow */
.predictive-bigger-picture-human:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.predictive-bigger-picture-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.predictive-bigger-picture-human-content h3 {
    margin-bottom: 18px;
    color: #294353;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.35;
}

.predictive-bigger-picture-human-content h3 span {
    color: #D852ED;
}

.predictive-bigger-picture-human-content p {
    margin: 0;
    color: #6c8491;
    font-size: 13px;
    line-height: 2;
}


/* =========================================
   CONVERSATION FLOW
========================================= */

.predictive-bigger-picture-conversation {
    padding: 23px;
    border-color: #D852ED;
    border-radius: 18px;
    background: #fff5fd;
    border: 1px #294353;
}

.predictive-bigger-picture-conversation-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid #deedf4;
    border-radius: 13px;
    border-color: rgba(216, 82, 237, 0.35);
    background: #fff9ff;
    ;
}

.predictive-bigger-picture-conversation-item.active {
    border-color: rgba(216, 82, 237, 0.35);
    background: #fff9ff;
}

.predictive-bigger-picture-conversation-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.12);
    color: #829eae;
    font-size: 14px;
}

.predictive-bigger-picture-conversation-item.active .predictive-bigger-picture-conversation-icon {
    background: rgba(216, 82, 237, 0.12);
    color: #D852ED;
}

.predictive-bigger-picture-conversation-item strong {
    display: block;
    margin-bottom: 4px;
    color: #3b5260;
    font-size: 12px;
    font-weight: 800;
}

.predictive-bigger-picture-conversation-item span {
    display: block;
    color: #8aa0ac;
    font-size: 10px;
    line-height: 1.6;
}

.predictive-bigger-picture-conversation-arrow {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    color: #D852ED;
    font-size: 15px;
}


/* =========================================
   CLOSING MESSAGE
========================================= */

.predictive-bigger-picture-closing {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 27px 30px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 20px;
    background: linear-gradient(100deg,
            rgba(216, 82, 237, 0.09),
            rgba(255, 255, 255, 0.82));
}

.predictive-bigger-picture-closing-icon {
    display: flex;
    flex: 0 0 45px;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #D852ED;
    color: #ffffff;
    font-size: 17px;
}

.predictive-bigger-picture-closing h3 {
    margin: 0 0 8px;
    color: #304653;
    font-size: 19px;
    font-weight: 800;
}

.predictive-bigger-picture-closing p {
    margin: 0;
    color: #6b8390;
    font-size: 12px;
    line-height: 1.9;
}


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

@media (max-width: 1199px) {

    .predictive-bigger-picture-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .predictive-bigger-picture-human {
        gap: 30px;
        padding: 30px;
    }

}

@media (max-width: 991px) {

    .predictive-bigger-picture-section {
        padding: 70px 0;
    }

    .predictive-bigger-picture-human {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .predictive-bigger-picture-human-content {
        max-width: 750px;
    }

}

@media (max-width: 767px) {

    .predictive-bigger-picture-heading {
        margin-bottom: 35px;
    }

    .predictive-bigger-picture-heading h2 {
        font-size: 32px;
    }

    .predictive-bigger-picture-heading p {
        font-size: 14px;
    }

    .predictive-bigger-picture-intro {
        padding: 22px;
    }

    .predictive-bigger-picture-features {
        gap: 14px;
    }

    .predictive-bigger-picture-feature {
        padding: 22px 18px;
    }

    .predictive-bigger-picture-human-content h3 {
        font-size: 26px;
    }

    .predictive-bigger-picture-human {
        padding: 25px;
        border-radius: 19px;
    }

}

@media (max-width: 480px) {

    .predictive-bigger-picture-section {
        padding: 55px 0;
    }

    .predictive-bigger-picture-heading h2 {
        font-size: 28px;
    }

    .predictive-bigger-picture-features {
        grid-template-columns: 1fr;
    }

    .predictive-bigger-picture-intro {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .predictive-bigger-picture-human-content h3 {
        font-size: 24px;
    }

    .predictive-bigger-picture-closing {
        flex-direction: column;
        padding: 22px;
    }

}

/* =====================================================
   BFSI AI DIALER WORKING SECTION
===================================================== */

.bfsi-ai-working-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 95px;
    background: #ffffff;
}


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

.bfsi-working-header {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.bfsi-working-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.bfsi-working-eyebrow>span {
    display: inline-block;
    width: 48px;
    height: 2px;
    background: #d852ed;
}

.bfsi-working-header h2 {
    margin-bottom: 25px;
    color: #18233f;
    font-size: 49px;
    font-weight: 800;
    line-height: 1.2;
}

.bfsi-working-header h2 strong {
    color: #d852ed;
    font-weight: 800;
}

.bfsi-working-header p {
    max-width: 830px;
    margin: 0 auto 13px;
    color: #718097;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


/* =====================================================
   MAIN PROCESS
===================================================== */

.bfsi-working-process {
    display: grid;
    grid-template-columns: 1fr 1.55fr 1fr;
    align-items: center;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 65px;
}


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

.bfsi-working-info-card {
    position: relative;
    min-height: 390px;
    padding: 30px 25px 25px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(50, 35, 75, 0.035);
    transition: all 0.3s ease;
}

.bfsi-working-info-card:hover {
    border-color: #d852ed;
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.1);
    transform: translateY(-5px);
}

.bfsi-working-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d852ed, #9749e7);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.bfsi-working-info-card h3 {
    margin-bottom: 18px;
    color: #18233f;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

.bfsi-working-info-card p {
    margin-bottom: 25px;
    color: #7b8498;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}


/* =====================================================
   MINI LISTS
===================================================== */

.bfsi-working-mini-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.bfsi-working-mini-list>div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #667188;
    font-size: 11px;
    font-weight: 700;
}

.bfsi-working-mini-list i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: rgba(216, 82, 237, 0.1);
    color: #d852ed;
    font-size: 12px;
}


/* =====================================================
   CARD FOOTER
===================================================== */

.bfsi-working-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    padding-top: 20px;
    border-top: 1px solid #f0eaf4;
}

.bfsi-working-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.1);
    color: #d852ed;
    font-size: 17px;
}

.bfsi-working-card-footer strong {
    color: #d852ed;
    font-size: 13px;
    font-weight: 800;
}


/* =====================================================
   CENTER AI WORKFLOW
===================================================== */

.bfsi-working-center {
    position: relative;
    min-width: 0;
    min-height: 440px;
}

.bfsi-ai-cloud {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 155px;
    padding: 13px 20px;
    border-radius: 35px;
    background: linear-gradient(135deg, #d852ed, #9846e7);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(216, 82, 237, 0.25);
    transform: translateX(-50%);
}

.bfsi-ai-cloud i {
    font-size: 20px;
}

.bfsi-ai-cloud strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}


/* =====================================================
   ORBIT
===================================================== */

.bfsi-working-orbit {
    position: absolute;
    top: 65px;
    left: 50%;
    width: 100%;
    height: 350px;
    transform: translateX(-50%);
}

.bfsi-working-orbit::before {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 285px;
    height: 285px;
    border: 1px dashed rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}

.bfsi-working-orbit::after {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 1px dashed rgba(216, 82, 237, 0.28);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}


/* =====================================================
   ORBIT DOTS
===================================================== */

.bfsi-orbit-dot {
    position: absolute;
    z-index: 4;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d852ed;
    box-shadow: 0 0 0 5px rgba(216, 82, 237, 0.1);
}

.bfsi-orbit-dot-one {
    top: 70px;
    left: 27%;
}

.bfsi-orbit-dot-two {
    right: 25%;
    bottom: 30px;
}


/* =====================================================
   AGENT CIRCLES
===================================================== */

.bfsi-working-agent {
    position: absolute;
    z-index: 4;
    top: 120px;
    text-align: center;
}

.bfsi-agent-ai {
    left: 0;
}

.bfsi-agent-human {
    right: 0;
}

.bfsi-agent-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3ddff, #e6c3ff);
    color: #a13fe4;
    font-size: 37px;
    box-shadow:
        0 0 0 1px rgba(216, 82, 237, 0.2),
        0 12px 30px rgba(216, 82, 237, 0.12);
}

.bfsi-working-agent h4 {
    margin-bottom: 5px;
    color: #18233f;
    font-size: 14px;
    font-weight: 800;
}

.bfsi-working-agent p {
    margin: 0;
    color: #8b91a3;
    font-size: 11px;
    font-weight: 600;
}


/* =====================================================
   CALL CARD
===================================================== */

.bfsi-working-call-card {
    position: absolute;
    z-index: 6;
    top: 100px;
    left: 50%;
    width: 145px;
    padding: 19px 13px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(40, 25, 70, 0.12);
    text-align: center;
    transform: translateX(-50%);
}

.bfsi-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.12);
    color: #d852ed;
    font-size: 14px;
}

.bfsi-working-call-card strong {
    display: block;
    margin-bottom: 3px;
    color: #18233f;
    font-size: 12px;
    font-weight: 800;
}

.bfsi-working-call-card small {
    color: #9a9faf;
    font-size: 9px;
}


/* =====================================================
   CALL WAVE
===================================================== */

.bfsi-call-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 36px;
    margin: 8px 0;
}

.bfsi-call-wave span {
    width: 3px;
    height: 12px;
    border-radius: 4px;
    background: #d852ed;
}

.bfsi-call-wave span:nth-child(2),
.bfsi-call-wave span:nth-child(8) {
    height: 21px;
}

.bfsi-call-wave span:nth-child(3),
.bfsi-call-wave span:nth-child(7) {
    height: 29px;
}

.bfsi-call-wave span:nth-child(4),
.bfsi-call-wave span:nth-child(6) {
    height: 18px;
}

.bfsi-call-wave span:nth-child(5) {
    height: 32px;
}


/* =====================================================
   CALL ACTIONS
===================================================== */

.bfsi-call-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 9px;
}

.bfsi-call-actions i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f5e9fb;
    color: #d852ed;
    font-size: 9px;
}

.bfsi-call-actions i:nth-child(2) {
    background: #ed5870;
    color: #ffffff;
}


/* =====================================================
   CRM CLOUD
===================================================== */

.bfsi-crm-cloud {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #f0eaf4;
    color: #d852ed;
}

.bfsi-crm-cloud>i:first-child {
    font-size: 27px;
}

.bfsi-crm-cloud strong {
    font-size: 17px;
    font-weight: 800;
}

.bfsi-crm-cloud>i:last-child {
    font-size: 11px;
}


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

.bfsi-capabilities-wrapper {
    padding: 30px 18px 25px;
    border-radius: 22px;
    background: #faf7ff;
}

.bfsi-capabilities-header {
    margin-bottom: 35px;
    text-align: center;
}

.bfsi-capabilities-header .bfsi-working-eyebrow {
    margin-bottom: 16px;
}

.bfsi-capabilities-header h2 {
    margin: 0;
    color: #18233f;
    font-size: 29px;
    font-weight: 800;
}

.bfsi-capabilities-header h2 span {
    color: #d852ed;
}


/* =====================================================
   CAPABILITY GRID
===================================================== */

.bfsi-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
}

.bfsi-capability-card {
    position: relative;
    min-width: 0;
    padding: 35px 12px 20px;
    border: 1px solid #eee8f6;
    border-radius: 11px;
    background: #ffffff;
    text-align: center;
    transition: all 0.3s ease;
}

.bfsi-capability-card:hover {
    border-color: #d852ed;
    box-shadow: 0 12px 25px rgba(216, 82, 237, 0.09);
    transform: translateY(-4px);
}

.bfsi-capability-number {
    position: absolute;
    top: -9px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d852ed, #9846e7);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    transform: translateX(-50%);
}

.bfsi-capability-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.09);
    color: #d852ed;
    font-size: 19px;
}

.bfsi-capability-card h4 {
    min-height: 34px;
    margin-bottom: 13px;
    color: #18233f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.bfsi-capability-card p {
    min-height: 93px;
    margin: 0;
    color: #8991a5;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;
}


/* =====================================================
   BOTTOM HIGHLIGHT
===================================================== */

.bfsi-working-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 700px;
    margin: 30px auto 0;
    padding: 13px 25px;
    border-radius: 30px;
    background: linear-gradient(90deg,
            #f9eaff,
            #f3ddff,
            #f9eaff);
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.bfsi-working-highlight i {
    font-size: 15px;
}

.bfsi-working-highlight b {
    color: #bc83d2;
}


/* =====================================================
   RESPONSIVE: TABLET
===================================================== */

@media (max-width: 1199px) {

    .bfsi-working-process {
        grid-template-columns: 1fr 1.3fr 1fr;
        gap: 15px;
    }

    .bfsi-working-info-card {
        padding: 25px 20px;
    }

    .bfsi-working-info-card h3 {
        font-size: 17px;
    }

    .bfsi-working-orbit::before {
        width: 250px;
        height: 250px;
    }

    .bfsi-working-orbit::after {
        width: 170px;
        height: 170px;
    }

    .bfsi-agent-circle {
        width: 80px;
        height: 80px;
        font-size: 29px;
    }

    .bfsi-working-call-card {
        width: 125px;
    }

    .bfsi-working-agent h4 {
        font-size: 12px;
    }

    .bfsi-capabilities-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 15px;
    }

}


/* =====================================================
   RESPONSIVE: TABLET / MOBILE
===================================================== */

@media (max-width: 991px) {

    .bfsi-ai-working-section {
        padding: 80px 0;
    }

    .bfsi-working-header h2 {
        font-size: 40px;
    }

    .bfsi-working-process {
        grid-template-columns: 1fr;
        max-width: 650px;
    }

    .bfsi-working-info-card {
        min-height: auto;
    }

    .bfsi-working-center {
        order: 2;
        min-height: 430px;
        margin: 15px 0;
    }

    .bfsi-setup-card {
        order: 1;
    }

    .bfsi-crm-card {
        order: 3;
    }

    .bfsi-working-mini-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .bfsi-working-card-footer {
        margin-top: 25px;
    }

    .bfsi-capabilities-header h2 {
        font-size: 27px;
    }

}


/* =====================================================
   RESPONSIVE: MOBILE
===================================================== */

@media (max-width: 767px) {

    .bfsi-ai-working-section {
        padding: 60px 0;
    }

    .bfsi-working-header {
        margin-bottom: 35px;
    }

    .bfsi-working-eyebrow {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .bfsi-working-eyebrow>span {
        width: 25px;
    }

    .bfsi-working-header h2 {
        font-size: 30px;
    }

    .bfsi-working-header p {
        font-size: 13px;
    }

    .bfsi-working-process {
        gap: 18px;
        margin-bottom: 45px;
    }

    .bfsi-working-center {
        min-height: 390px;
    }

    .bfsi-working-orbit {
        height: 320px;
    }

    .bfsi-working-orbit::before {
        width: 230px;
        height: 230px;
    }

    .bfsi-working-orbit::after {
        width: 155px;
        height: 155px;
    }

    .bfsi-working-agent {
        top: 115px;
    }

    .bfsi-agent-circle {
        width: 70px;
        height: 70px;
        font-size: 25px;
    }

    .bfsi-agent-ai {
        left: 2px;
    }

    .bfsi-agent-human {
        right: 2px;
    }

    .bfsi-working-call-card {
        top: 100px;
        width: 115px;
        padding: 15px 9px;
    }

    .bfsi-working-call-card strong {
        font-size: 10px;
    }

    .bfsi-working-call-card small {
        font-size: 8px;
    }

    .bfsi-working-agent h4 {
        font-size: 10px;
    }

    .bfsi-working-agent p {
        font-size: 9px;
    }

    .bfsi-capabilities-wrapper {
        padding: 25px 12px 20px;
    }

    .bfsi-capabilities-header h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    .bfsi-capabilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .bfsi-capability-card {
        padding: 35px 15px 20px;
    }

    .bfsi-capability-card h4 {
        min-height: auto;
        font-size: 13px;
    }

    .bfsi-capability-card p {
        min-height: auto;
        font-size: 11px;
    }

    .bfsi-working-highlight {
        gap: 9px;
        padding: 12px 15px;
        font-size: 10px;
    }

}


/* =====================================================
   RESPONSIVE: SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .bfsi-working-header h2 {
        font-size: 27px;
    }

    .bfsi-working-info-card {
        padding: 23px 18px;
    }

    .bfsi-working-mini-list {
        grid-template-columns: 1fr;
    }

    .bfsi-working-center {
        min-height: 365px;
    }

    .bfsi-working-orbit {
        height: 300px;
    }

    .bfsi-working-orbit::before {
        width: 205px;
        height: 205px;
    }

    .bfsi-working-orbit::after {
        width: 135px;
        height: 135px;
    }

    .bfsi-agent-circle {
        width: 58px;
        height: 58px;
        font-size: 21px;
    }

    .bfsi-working-agent {
        top: 112px;
    }

    .bfsi-agent-ai {
        left: 0;
    }

    .bfsi-agent-human {
        right: 0;
    }

    .bfsi-working-call-card {
        top: 95px;
        width: 102px;
    }

    .bfsi-call-wave {
        gap: 2px;
    }

    .bfsi-call-wave span {
        width: 2px;
    }

    .bfsi-working-agent h4 {
        font-size: 9px;
    }

    .bfsi-working-agent p {
        font-size: 8px;
    }

    .bfsi-capabilities-grid {
        gap: 10px;
    }

    .bfsi-capability-card {
        /* padding: 30px 10px 17px; */
    }

    .bfsi-capability-icon {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .bfsi-capability-card h4 {
        font-size: 11px;
    }

    .bfsi-capability-card p {
        font-size: 10px;
    }

}

/* =====================================================
   INCREASE BFSI CAPABILITIES SECTION WIDTH
===================================================== */

@media (min-width: 1200px) {

    .bfsi-capabilities-wrapper {
        width: calc(100% + 60px);
        margin-left: -30px;
        /* padding: 35px 25px 30px; */
    }

    .bfsi-capabilities-header {
        max-width: 950px;
        margin-right: auto;
        margin-bottom: 40px;
        margin-left: auto;
    }

    .bfsi-capabilities-header h2 {
        font-size: 34px;
        line-height: 1.35;
    }

    .bfsi-capabilities-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 13px;
    }

    .bfsi-capability-card {
        min-height: 270px;
        padding: 38px 14px 24px;
    }

    .bfsi-capability-card h4 {
        min-height: 40px;
        font-size: 12px;
    }

    .bfsi-capability-card p {
        min-height: 105px;
        font-size: 10.5px;
        line-height: 1.75;
    }

}


/* =====================================================
   MEDIUM DESKTOP
===================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

    .bfsi-capabilities-wrapper {
        width: calc(100% + 30px);
        margin-left: -15px;
        padding: 30px 20px 25px;
    }

    .bfsi-capabilities-header h2 {
        font-size: 31px;
    }

    .bfsi-capabilities-grid {
        gap: 12px;
    }

    .bfsi-capability-card {
        padding: 35px 12px 22px;
    }

}

/* =====================================================
   BFSI CAPABILITIES - 4 BOXES PER ROW
===================================================== */

@media (min-width: 992px) {

    /* Remove pink background from large wrapper */
    .bfsi-capabilities-wrapper {
        width: 100%;
        margin-left: 0;
        padding: 35px 25px 30px;
        background: #ffffff;
        border-radius: 0;
    }

    /* Heading width */
    .bfsi-capabilities-header {
        max-width: 1000px;
        margin: 0 auto 40px;
    }

    .bfsi-capabilities-header h2 {
        font-size: 34px;
        line-height: 1.35;
    }

    /* 4 boxes in one row */
    .bfsi-capabilities-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }

    /* Increase individual card width and height */
    .bfsi-capability-card {
        min-height: 245px;
        padding: 40px 25px 28px;
        border: 1px solid #eeeeF3;
        border-radius: 14px;
        background: #ffffff;
    }

    .bfsi-capability-card h4 {
        min-height: 40px;
        font-size: 14px;
    }

    .bfsi-capability-card p {
        min-height: 75px;
        font-size: 11px;
        line-height: 1.8;
    }

}


/* =====================================================
   TABLET - 2 BOXES PER ROW
===================================================== */

@media (min-width: 576px) and (max-width: 991px) {

    .bfsi-capabilities-wrapper {
        width: 100%;
        margin-left: 0;
        padding: 30px 20px;
        background: #ffffff;
        border-radius: 0;
    }

    .bfsi-capabilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .bfsi-capability-card {
        min-height: 220px;
        padding: 38px 20px 25px;
    }

}


/* =====================================================
   MOBILE - 2 BOXES PER ROW
===================================================== */

@media (max-width: 575px) {

    .bfsi-capabilities-wrapper {
        width: 100%;
        margin-left: 0;
        padding: 25px 10px 20px;
        background: #ffffff;
        border-radius: 0;
    }

    .bfsi-capabilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .bfsi-capability-card {
        min-height: 220px;
        padding: 35px 12px 20px;
    }

    .bfsi-capability-card h4 {
        min-height: auto;
        font-size: 12px;
    }

    .bfsi-capability-card p {
        min-height: auto;
        font-size: 10px;
        line-height: 1.7;
    }

}


/* =====================================================
   REAL ESTATE AI DIALER BENEFITS SECTION
===================================================== */

.re-benefits-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 90px;
    background: #ffffff;
}

.re-benefits-section::before {
    position: absolute;
    top: -180px;
    left: -180px;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(216, 82, 237, 0.08),
            transparent 68%);
    content: "";
    pointer-events: none;
}

.re-benefits-section::after {
    position: absolute;
    right: -180px;
    bottom: -220px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(216, 82, 237, 0.06),
            transparent 68%);
    content: "";
    pointer-events: none;
}


/* =====================================================
   INTRODUCTION ROW
===================================================== */

.re-benefits-hero-row {
    position: relative;
    z-index: 2;
    margin-bottom: 75px;
}


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

.re-benefits-content {
    padding-right: 25px;
}

.re-benefits-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.re-benefits-eyebrow i {
    font-size: 16px;
}

.re-benefits-content h2 {
    margin-bottom: 25px;
    color: #172342;
    font-size: 47px;
    font-weight: 800;
    line-height: 1.14;
}

.re-benefits-content h2 span {
    display: block;
    color: #d852ed;
}

.re-benefits-content p {
    margin-bottom: 16px;
    color: #667590;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.95;
}

.re-benefits-tagline {
    margin-top: 28px;
    color: #d852ed;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 30px;
    font-style: italic;
    line-height: 1.25;
}

.re-benefits-tagline-line {
    width: 270px;
    height: 2px;
    margin-top: 12px;
    background: linear-gradient(90deg,
            #d852ed,
            rgba(216, 82, 237, 0));
    transform: rotate(-4deg);
}


/* =====================================================
   EMPTY IMAGE AREA
===================================================== */

.re-benefits-image-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
    overflow: hidden;
    border: 1px solid rgba(216, 82, 237, 0.15);
    border-radius: 25px;
    background: #ffffff;
}




/* =====================================================
   BENEFITS GRID
===================================================== */

.re-benefits-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.re-benefit-card {
    position: relative;
    min-height: 220px;
    padding: 25px 20px;
    border: 1px solid #e9e3f1;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.35s ease;
}

.re-benefit-card:hover {
    border-color: #d852ed;
    box-shadow: 0 15px 35px rgba(216, 82, 237, 0.11);
    transform: translateY(-6px);
}

.re-benefit-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.re-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f8e4ff;
    color: #d852ed;
    font-size: 17px;
    transition: all 0.3s ease;
}

.re-benefit-card:hover .re-benefit-icon {
    background: #d852ed;
    color: #ffffff;
}

.re-benefit-card-top>span {
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
}

.re-benefit-card h3 {
    min-height: 58px;
    margin-bottom: 12px;
    color: #182342;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.re-benefit-card p {
    margin: 0;
    color: #78839b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
}


/* =====================================================
   BOTTOM TAGLINE
===================================================== */

.re-benefits-bottom-tagline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 45px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
}

.re-benefits-bottom-tagline i {
    font-size: 18px;
}

.re-benefits-bottom-tagline b {
    font-weight: 900;
}


/* =====================================================
   LARGE TABLET
===================================================== */

@media (max-width: 1199px) {

    .re-benefits-content h2 {
        font-size: 39px;
    }

    .re-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .re-benefits-section {
        padding: 80px 0;
    }

    .re-benefits-content {
        padding-right: 0;
        margin-bottom: 45px;
    }

    .re-benefits-content h2 {
        font-size: 42px;
    }

    .re-benefits-image-area {
        min-height: 400px;
    }

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

    .re-benefit-card h3 {
        min-height: auto;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .re-benefits-section {
        padding: 60px 0;
    }

    .re-benefits-content h2 {
        font-size: 32px;
    }

    .re-benefits-content p {
        font-size: 13px;
    }

    .re-benefits-tagline {
        font-size: 26px;
    }

    .re-benefits-image-area {
        min-height: 300px;
        border-radius: 18px;
    }

    .re-benefits-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .re-benefit-card {
        min-height: auto;
        padding: 25px;
    }

    .re-benefit-card h3 {
        font-size: 16px;
    }

    .re-benefit-card p {
        font-size: 12px;
    }

    .re-benefits-bottom-tagline {
        flex-wrap: wrap;
        font-size: 9px;
        letter-spacing: 1px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .re-benefits-content h2 {
        font-size: 28px;
    }

    .re-benefits-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .re-benefits-image-area {
        min-height: 250px;
    }

}

/* =====================================================
   AUTO DIALER CAMPAIGN MANAGEMENT SECTION
===================================================== */

.auto-campaign-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 100px;
    background: #fbf8ff;
}

.auto-campaign-section::before {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(216, 82, 237, 0.12),
            transparent 70%);
    content: "";
    pointer-events: none;
}

.auto-campaign-main-row {
    position: relative;
    z-index: 2;
}


/* =====================================================
   LEFT DASHBOARD VISUAL
===================================================== */

.auto-campaign-visual {
    position: relative;
    max-width: 555px;
    min-height: 490px;
    margin: 0 auto;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(145deg,
            #ffffff,
            #f7efff);
    box-shadow: 0 25px 65px rgba(48, 32, 75, 0.08);
}

.auto-campaign-visual-glow {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.12);
    filter: blur(50px);
    transform: translateX(-50%);
}


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

.auto-campaign-dashboard-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee8f5;
}

.auto-campaign-dashboard-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auto-campaign-dashboard-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg,
            #d852ed,
            #8f4de8);
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.25);
}

.auto-campaign-dashboard-title strong,
.auto-campaign-dashboard-title span {
    display: block;
}

.auto-campaign-dashboard-title strong {
    margin-bottom: 4px;
    color: #202b45;
    font-size: 14px;
    font-weight: 800;
}

.auto-campaign-dashboard-title span {
    color: #9297a9;
    font-size: 10px;
}

.auto-campaign-dashboard-menu {
    color: #8e94a7;
    font-size: 15px;
}


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

.auto-campaign-summary {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.auto-campaign-summary-card {
    padding: 17px;
    border: 1px solid #eee8f5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
}

.auto-campaign-summary-card span,
.auto-campaign-summary-card strong,
.auto-campaign-summary-card small {
    display: block;
}

.auto-campaign-summary-card span {
    margin-bottom: 7px;
    color: #8d92a5;
    font-size: 10px;
    font-weight: 600;
}

.auto-campaign-summary-card strong {
    margin-bottom: 7px;
    color: #202b45;
    font-size: 24px;
    font-weight: 800;
}

.auto-campaign-summary-card small {
    color: #9a9faf;
    font-size: 11px;
}

.auto-campaign-summary-card small i {
    margin-right: 4px;
    color: #d852ed;
}


/* =====================================================
   CAMPAIGN LIST
===================================================== */

.auto-campaign-list-box {
    position: relative;
    z-index: 2;
    padding: 20px;
    border: 1px solid #eee8f5;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
}

.auto-campaign-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.auto-campaign-list-heading h4 {
    margin: 0;
    color: #202b45;
    font-size: 13px;
    font-weight: 800;
}

.auto-campaign-list-heading span {
    color: #d852ed;
    font-size: 10px;
    font-weight: 700;
}

.auto-campaign-list-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid #f1edf5;
}

.auto-campaign-list-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.auto-campaign-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #f7e5ff;
    color: #d852ed;
    font-size: 12px;
}

.auto-campaign-list-content {
    flex: 1;
    min-width: 0;
}

.auto-campaign-list-content strong,
.auto-campaign-list-content span {
    display: block;
}

.auto-campaign-list-content strong {
    margin-bottom: 3px;
    color: #313951;
    font-size: 10px;
    font-weight: 800;
}

.auto-campaign-list-content span {
    margin-bottom: 7px;
    color: #9b9faf;
    font-size: 9px;
}

.auto-campaign-list-item>b {
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
}

.auto-campaign-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 10px;
    background: #f0eaf5;
}

.auto-campaign-progress span {
    display: block;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            #d852ed,
            #a24ce9);
}


/* =====================================================
   DASHBOARD FOOTER
===================================================== */

.auto-campaign-dashboard-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eee8f5;
    color: #858ca0;
    font-size: 11px;
}

.auto-campaign-dashboard-footer i {
    margin-right: 5px;
    color: #d852ed;
}

.auto-campaign-dashboard-footer span {
    white-space: nowrap;
}


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

.auto-campaign-content {
    padding-left: 35px;
}

.auto-campaign-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.auto-campaign-eyebrow i {
    font-size: 14px;
}

.auto-campaign-content h2 {
    margin-bottom: 25px;
    color: #18233f;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
}

.auto-campaign-content h2 span {
    color: #d852ed;
}

.auto-campaign-content>p {
    margin-bottom: 17px;
    color: #747e92;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


/* =====================================================
   HIGHLIGHT BOX
===================================================== */

.auto-campaign-highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 27px 0;
    padding: 18px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(50, 30, 80, 0.04);
}

.auto-campaign-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #f7e4ff;
    color: #d852ed;
    font-size: 18px;
}

.auto-campaign-highlight strong,
.auto-campaign-highlight span {
    display: block;
}

.auto-campaign-highlight strong {
    margin-bottom: 5px;
    color: #273149;
    font-size: 13px;
    font-weight: 800;
}

.auto-campaign-highlight span {
    color: #8b91a3;
    font-size: 11px;
    line-height: 1.6;
}


/* =====================================================
   CAMPAIGN TYPES
===================================================== */

.auto-campaign-types-title {
    margin-bottom: 17px;
    color: #202b45;
    font-size: 15px;
    font-weight: 800;
}

.auto-campaign-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auto-campaign-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e8dff0;
    border-radius: 7px;
    background: #ffffff;
    color: #626d84;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.auto-campaign-tag i {
    color: #d852ed;
    font-size: 11px;
}

.auto-campaign-tag:hover {
    border-color: #d852ed;
    background: #fdf5ff;
    color: #d852ed;
    transform: translateY(-2px);
}

.auto-campaign-bottom-text {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
}


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

.auto-campaign-benefit-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 75px;
    padding: 25px;
    border: 1px solid #e9e0f1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(40, 25, 70, 0.04);
}

.auto-campaign-benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 15px;
    border-right: 1px solid #eee8f3;
}

.auto-campaign-benefit-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.auto-campaign-benefit-item>i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f7e4ff;
    color: #d852ed;
    font-size: 14px;
}

.auto-campaign-benefit-item strong,
.auto-campaign-benefit-item span {
    display: block;
}

.auto-campaign-benefit-item strong {
    margin-bottom: 4px;
    color: #28324b;
    font-size: 11px;
    font-weight: 800;
}

.auto-campaign-benefit-item span {
    color: #9298aa;
    font-size: 11px;
    line-height: 1.5;
}


/* =====================================================
   RESPONSIVE - LARGE TABLET
===================================================== */

@media (max-width: 1199px) {

    .auto-campaign-content {
        padding-left: 15px;
    }

    .auto-campaign-content h2 {
        font-size: 34px;
    }

    .auto-campaign-visual {
        padding: 20px;
    }

    .auto-campaign-benefit-strip {
        gap: 15px;
        padding: 20px;
    }

}


/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 991px) {

    .auto-campaign-section {
        padding: 80px 0;
    }

    .auto-campaign-visual {
        max-width: 600px;
        margin-bottom: 50px;
    }

    .auto-campaign-content {
        padding-left: 0;
    }

    .auto-campaign-content h2 {
        font-size: 38px;
    }

    .auto-campaign-benefit-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .auto-campaign-benefit-item:nth-child(2) {
        border-right: 0;
    }

}


/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 767px) {

    .auto-campaign-section {
        padding: 60px 0;
    }

    .auto-campaign-visual {
        min-height: 450px;
        padding: 16px;
        border-radius: 18px;
    }

    .auto-campaign-dashboard-title strong {
        font-size: 12px;
    }

    .auto-campaign-summary-card {
        padding: 13px;
    }

    .auto-campaign-summary-card strong {
        font-size: 20px;
    }

    .auto-campaign-list-box {
        padding: 13px;
    }

    .auto-campaign-content h2 {
        font-size: 31px;
    }

    .auto-campaign-content>p {
        font-size: 13px;
    }

    .auto-campaign-highlight {
        padding: 15px;
    }

    .auto-campaign-tags {
        gap: 8px;
    }

    .auto-campaign-tag {
        font-size: 10px;
        padding: 9px 10px;
    }

    .auto-campaign-benefit-strip {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 45px;
    }

    .auto-campaign-benefit-item {
        padding-right: 0;
        padding-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid #eee8f3;
    }

    .auto-campaign-benefit-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

}


/* =====================================================
   RESPONSIVE - SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .auto-campaign-visual {
        min-height: 430px;
    }

    .auto-campaign-dashboard-content {
        padding: 8px;
    }

    .auto-campaign-dashboard-sidebar {
        width: 38px;
    }

    .auto-campaign-list-content strong {
        font-size: 9px;
    }

    .auto-campaign-content h2 {
        font-size: 28px;
    }

    .auto-campaign-eyebrow {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .auto-campaign-summary-card strong {
        font-size: 18px;
    }

}

/* =========================================
   LESS DIALING - SAAS SECTION
========================================= */

.dialer-conversation-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #ffffff;
}

/* Soft Background Decoration */

.dialer-conversation-section::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    top: -180px;
    right: -150px;
    background: rgba(216, 82, 237, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.dialer-conversation-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    bottom: -140px;
    left: -100px;
    background: rgba(216, 82, 237, 0.045);
    border-radius: 50%;
    pointer-events: none;
}

/* Section Label */

.dialer-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 50px;
    color: #b33bc9;
    background: #fdf7ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.dialer-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #ffffff;
    background: #d852ed;
    font-size: 11px;
}

/* Heading */

.dialer-conversation-title {
    margin-bottom: 20px;
    color: #20202d;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.dialer-conversation-title span {
    display: block;
    color: #d852ed;
}

.dialer-conversation-intro {
    max-width: 680px;
    margin: 0 auto;
    color: #777782;
    font-size: 16px;
    line-height: 1.85;
}

/* Main Content */

.dialer-conversation-main {
    position: relative;
    z-index: 1;
    margin-top: 65px;
}

/* Content Wrapper */

.dialer-content-wrapper {
    padding-right: 35px;
}

.dialer-content-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 24px;
}

.dialer-heading-line {
    display: block;
    flex: 0 0 4px;
    min-height: 62px;
    margin-top: 4px;
    border-radius: 10px;
    background: #d852ed;
}

.dialer-content-heading h3 {
    margin: 0;
    color: #252532;
    font-size: 26px;
    line-height: 1.4;
    font-weight: 700;
}

.dialer-content-wrapper p {
    margin-bottom: 18px;
    color: #6f707c;
    font-size: 15px;
    line-height: 1.9;
}

/* Benefits */

.dialer-content-benefits {
    margin-top: 30px;
}

.dialer-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 20px;
}

.dialer-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 10px;
    color: #d852ed;
    background: #fcf2ff;
    font-size: 14px;
}

.dialer-benefit-item strong {
    display: block;
    margin-bottom: 3px;
    color: #292936;
    font-size: 14px;
    font-weight: 700;
}

.dialer-benefit-item small {
    display: block;
    color: #858591;
    font-size: 13px;
    line-height: 1.6;
}

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

.dialer-workflow-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid #ebe2ef;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(49, 23, 61, 0.10);
}

/* Top Header */

.dialer-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f0eaf2;
    background: #fdfbfe;
}

.dialer-window-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dialer-window-controls span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e6d8e9;
}

.dialer-window-controls span:nth-child(2) {
    background: #d8b6e0;
}

.dialer-window-controls span:nth-child(3) {
    background: #d852ed;
}

.dialer-live-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8a8290;
    font-size: 11px;
    font-weight: 600;
}

.dialer-live-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #36bd82;
}

/* Workflow Top */

.dialer-workflow-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 30px 22px;
}

.dialer-workflow-top small {
    display: block;
    margin-bottom: 7px;
    color: #a59baa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.dialer-workflow-top h4 {
    margin: 0;
    color: #292432;
    font-size: 20px;
    font-weight: 700;
}

.dialer-workflow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, #d852ed, #a83ac1);
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.22);
    font-size: 18px;
}

/* Workflow Steps */

.dialer-workflow-steps {
    padding: 4px 30px 24px;
}

.dialer-workflow-step {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 13px;
    border: 1px solid #f0eaf3;
    border-radius: 14px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.dialer-workflow-step:hover {
    border-color: rgba(216, 82, 237, 0.35);
    transform: translateX(4px);
    box-shadow: 0 7px 20px rgba(216, 82, 237, 0.07);
}

.dialer-workflow-step.active {
    border-color: rgba(216, 82, 237, 0.35);
    background: #fdf6ff;
}

.dialer-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #b64dca;
    background: #f8eaff;
    font-size: 11px;
    font-weight: 800;
}

.dialer-step-content {
    flex: 1;
    min-width: 0;
}

.dialer-step-content strong {
    display: block;
    margin-bottom: 3px;
    color: #332c38;
    font-size: 13px;
    font-weight: 700;
}

.dialer-step-content p {
    margin: 0;
    color: #99909d;
    font-size: 11px;
    line-height: 1.6;
}

.dialer-step-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    color: #36b980;
    background: #eafaf2;
    font-size: 10px;
}

.dialer-step-active {
    padding: 5px 8px;
    border-radius: 6px;
    color: #b33bc9;
    background: #f1d8fa;
    font-size: 10px;
    font-weight: 700;
}

/* Connector */

.dialer-workflow-connector {
    width: 1px;
    height: 18px;
    margin-left: 31px;
    background: #dfcde5;
}

/* Footer */

.dialer-workflow-footer {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px 30px;
    border-top: 1px solid #f0eaf2;
    background: #fcf9fd;
}

.dialer-workflow-footer>div:not(.dialer-footer-arrow) {
    flex: 1;
}

.dialer-workflow-footer span {
    display: block;
    margin-bottom: 5px;
    color: #aaa0af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.dialer-workflow-footer strong {
    color: #3a3040;
    font-size: 12px;
    font-weight: 700;
}

.dialer-footer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #ffffff;
    background: #d852ed;
    font-size: 12px;
}

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

@media (max-width: 1199px) {

    .dialer-conversation-title {
        font-size: 37px;
    }

    .dialer-content-wrapper {
        padding-right: 15px;
    }

    .dialer-content-heading h3 {
        font-size: 23px;
    }

    .dialer-workflow-top,
    .dialer-workflow-steps,
    .dialer-workflow-footer {
        padding-left: 23px;
        padding-right: 23px;
    }

}

@media (max-width: 991px) {

    .dialer-conversation-section {
        padding: 75px 0;
    }

    .dialer-conversation-title {
        font-size: 35px;
    }

    .dialer-conversation-main {
        margin-top: 45px;
    }

    .dialer-content-wrapper {
        padding-right: 0;
        margin-bottom: 45px;
    }

    .dialer-workflow-card {
        max-width: 650px;
        margin: 0 auto;
    }

}

@media (max-width: 575px) {

    .dialer-conversation-section {
        padding: 60px 0;
    }

    .dialer-conversation-title {
        font-size: 29px;
    }

    .dialer-conversation-intro {
        font-size: 14px;
        line-height: 1.75;
    }

    .dialer-conversation-main {
        margin-top: 35px;
    }

    .dialer-content-heading h3 {
        font-size: 21px;
    }

    .dialer-content-wrapper p {
        font-size: 14px;
        line-height: 1.8;
    }

    .dialer-workflow-card {
        border-radius: 18px;
    }

    .dialer-workflow-header {
        padding: 15px 18px;
    }

    .dialer-workflow-top {
        padding: 23px 18px 18px;
    }

    .dialer-workflow-top h4 {
        font-size: 17px;
    }

    .dialer-workflow-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .dialer-workflow-steps {
        padding: 4px 18px 20px;
    }

    .dialer-workflow-step {
        gap: 9px;
        padding: 12px 9px;
    }

    .dialer-step-number {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 10px;
    }

    .dialer-step-content strong {
        font-size: 12px;
    }

    .dialer-step-content p {
        font-size: 10px;
    }

    .dialer-step-active {
        display: none;
    }

    .dialer-workflow-connector {
        margin-left: 25px;
    }

    .dialer-workflow-footer {
        gap: 12px;
        padding: 18px;
    }

    .dialer-footer-arrow {
        display: none;
    }

}

/* =========================================
   CALLING WORKFLOW - MAIN SECTION
========================================= */

.cw-flow-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background: #ffffff;
}

.cw-flow-section::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
    pointer-events: none;
}

.cw-flow-section::after {
    content: "";
    position: absolute;
    bottom: -260px;
    left: -190px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.04);
    pointer-events: none;
}


/* =========================================
   SECTION INTRO
========================================= */

.cw-section-intro {
    position: relative;
    z-index: 1;
    text-align: center;
}

.cw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(216, 82, 237, 0.24);
    border-radius: 50px;
    color: #b33bc9;
    background: #fdf7ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.cw-eyebrow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #ffffff;
    background: #d852ed;
    font-size: 11px;
}

.cw-main-title {
    margin-bottom: 25px;
    color: #242232;
    font-size: 48px;
    line-height: 1.18;
    font-weight: 700;
}

.cw-main-title span {
    display: block;
    color: #d852ed;
}

.cw-intro-text {
    max-width: 900px;
    margin: 0 auto 17px;
    color: #747381;
    font-size: 15px;
    line-height: 1.95;
}


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

.cw-journey-wrapper {
    position: relative;
    z-index: 1;
    margin-top: 65px;
    padding: 32px;
    border: 1px solid #eee4f2;
    border-radius: 25px;
    background: #fcf9fe;
}

.cw-journey-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.cw-mini-label {
    display: block;
    margin-bottom: 8px;
    color: #bd48d3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.cw-journey-heading h3 {
    margin: 0;
    color: #302738;
    font-size: 24px;
    font-weight: 700;
}

.cw-journey-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 8px;
    color: #2ca977;
    background: #eaf9f1;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.cw-journey-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35b980;
}


/* Journey Layout */

.cw-journey {
    display: flex;
    align-items: stretch;
    gap: 13px;
}

.cw-journey-step {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 24px 20px;
    border: 1px solid #eee4f2;
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.cw-journey-step:hover {
    border-color: rgba(216, 82, 237, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(216, 82, 237, 0.09);
}

.cw-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    border-radius: 13px;
    color: #d852ed;
    background: #f9edfd;
    font-size: 16px;
}

.cw-step-number {
    margin-bottom: 8px;
    color: #bba9c1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cw-journey-step h4 {
    min-height: 42px;
    margin-bottom: 11px;
    color: #302738;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
}

.cw-journey-step p {
    margin: 0;
    color: #918696;
    font-size: 12px;
    line-height: 1.75;
}

.cw-journey-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    color: #d852ed;
    font-size: 11px;
}


/* =========================================
   FEATURE STORY SECTION
========================================= */

.cw-feature-row {
    position: relative;
    z-index: 1;
    margin-top: 65px;
}


/* Dark Highlight Panel */

.cw-feature-highlight {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 410px;
    padding: 35px;
    border-radius: 24px;
    background: linear-gradient(145deg, #302238, #211a2c);
    box-shadow: 0 20px 45px rgba(44, 27, 52, 0.13);
}

.cw-feature-highlight::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -120px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(216, 82, 237, 0.04),
        0 0 0 70px rgba(216, 82, 237, 0.025);
    pointer-events: none;
}

.cw-highlight-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 40px;
}

.cw-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.22);
    font-size: 17px;
}

.cw-highlight-tag {
    color: #dca0eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cw-feature-highlight h3 {
    position: relative;
    z-index: 1;
    max-width: 370px;
    margin-bottom: 23px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
}

.cw-feature-highlight>p {
    position: relative;
    z-index: 1;
    max-width: 390px;
    margin-bottom: 28px;
    color: #c9bbd0;
    font-size: 14px;
    line-height: 1.9;
}

.cw-highlight-divider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.12);
}

.cw-highlight-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.cw-highlight-footer>span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    background: #d852ed;
    font-size: 9px;
}

.cw-highlight-footer p {
    margin: 0;
    color: #d8c9df;
    font-size: 12px;
    line-height: 1.7;
}


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

.cw-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100%;
    padding-left: 15px;
}

.cw-feature-card {
    padding: 25px;
    border: 1px solid #eee5f2;
    border-radius: 18px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.cw-feature-card:hover {
    border-color: rgba(216, 82, 237, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(216, 82, 237, 0.08);
}

.cw-feature-card-large {
    grid-column: span 2;
}

.cw-feature-card-wide {
    grid-column: span 2;
    background: #fdf8ff;
}

.cw-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
}

.cw-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #d852ed;
    background: #f9edfd;
    font-size: 14px;
}

.cw-card-index {
    color: #c5b4ca;
    font-size: 10px;
    font-weight: 800;
}

.cw-feature-card h4 {
    margin-bottom: 10px;
    color: #342a3b;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.cw-feature-card p {
    margin-bottom: 0;
    color: #8c8192;
    font-size: 12px;
    line-height: 1.8;
}

.cw-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    color: #c348d8;
    font-size: 11px;
    font-weight: 700;
}

.cw-card-link i {
    font-size: 10px;
}

.cw-analytics-line {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 42px;
    margin-top: 18px;
}

.cw-analytics-line span {
    display: block;
    flex: 1;
    min-width: 8px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, #d852ed, #edb1f8);
}

.cw-analytics-line span:nth-child(1) {
    height: 35%;
}

.cw-analytics-line span:nth-child(2) {
    height: 55%;
}

.cw-analytics-line span:nth-child(3) {
    height: 42%;
}

.cw-analytics-line span:nth-child(4) {
    height: 75%;
}

.cw-analytics-line span:nth-child(5) {
    height: 60%;
}

.cw-analytics-line span:nth-child(6) {
    height: 90%;
}

.cw-analytics-line span:nth-child(7) {
    height: 100%;
}


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

.cw-bottom-strip {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 55px;
    padding: 24px 28px;
    border: 1px solid #eadcf0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(53, 28, 65, 0.04);
}

.cw-bottom-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cw-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    color: #d852ed;
    background: #f9edfd;
    font-size: 17px;
}

.cw-bottom-content strong {
    display: block;
    margin-bottom: 5px;
    color: #332a3a;
    font-size: 14px;
    font-weight: 700;
}

.cw-bottom-content p {
    margin: 0;
    color: #918694;
    font-size: 12px;
    line-height: 1.7;
}

.cw-bottom-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: #d852ed;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.cw-bottom-button:hover {
    color: #ffffff;
    background: #b83bd0;
    transform: translateY(-2px);
}

.cw-bottom-button i {
    font-size: 10px;
}


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

@media (max-width: 1199px) {

    .cw-main-title {
        font-size: 42px;
    }

    .cw-journey-wrapper {
        padding: 25px;
    }

    .cw-journey-step {
        padding: 20px 15px;
    }

    .cw-journey-step h4 {
        font-size: 13px;
    }

    .cw-feature-highlight {
        padding: 28px;
    }

    .cw-feature-highlight h3 {
        font-size: 26px;
    }

    .cw-feature-grid {
        padding-left: 10px;
    }

    .cw-feature-card {
        padding: 20px;
    }

}


@media (max-width: 991px) {

    .cw-flow-section {
        padding: 80px 0;
    }

    .cw-main-title {
        font-size: 38px;
    }

    .cw-journey {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .cw-journey-line {
        display: none;
    }

    .cw-feature-row {
        margin-top: 45px;
    }

    .cw-feature-highlight {
        min-height: auto;
        margin-bottom: 20px;
    }

    .cw-feature-grid {
        padding-left: 0;
    }

}


@media (max-width: 767px) {

    .cw-journey-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cw-journey-heading h3 {
        font-size: 21px;
    }

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

    .cw-feature-card-large,
    .cw-feature-card-wide {
        grid-column: span 1;
    }

    .cw-bottom-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .cw-bottom-button {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 575px) {

    .cw-flow-section {
        padding: 60px 0;
    }

    .cw-main-title {
        font-size: 30px;
    }

    .cw-intro-text {
        font-size: 14px;
        line-height: 1.85;
    }

    .cw-journey-wrapper {
        padding: 18px;
        border-radius: 18px;
    }

    .cw-journey {
        grid-template-columns: 1fr;
    }

    .cw-journey-step {
        padding: 20px;
    }

    .cw-journey-step h4 {
        min-height: auto;
        font-size: 14px;
    }

    .cw-feature-highlight {
        padding: 25px;
        border-radius: 20px;
    }

    .cw-feature-highlight h3 {
        font-size: 25px;
    }

    .cw-feature-highlight>p {
        font-size: 13px;
    }

    .cw-feature-card {
        padding: 22px;
    }

    .cw-bottom-strip {
        padding: 20px;
    }

    .cw-bottom-content {
        align-items: flex-start;
    }

    .cw-bottom-content strong {
        font-size: 13px;
    }

    .cw-bottom-content p {
        font-size: 11px;
    }

}

/* =========================================
   CALLING INTEGRATIONS SECTION
========================================= */

.ci-tools-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background: #fbf9fd;
}

.ci-tools-section::before {
    content: "";
    position: absolute;
    top: -220px;
    left: -170px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.05);
    pointer-events: none;
}

.ci-tools-section::after {
    content: "";
    position: absolute;
    right: -190px;
    bottom: -220px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.045);
    pointer-events: none;
}


/* =========================================
   SECTION INTRO
========================================= */

.ci-section-intro {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ci-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 50px;
    color: #b33bc9;
    background: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.ci-eyebrow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #ffffff;
    background: #d852ed;
    font-size: 11px;
}

.ci-main-title {
    margin-bottom: 25px;
    color: #252231;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}

.ci-main-title span {
    display: block;
    color: #d852ed;
}

.ci-intro-text {
    max-width: 900px;
    margin: 0 auto 17px;
    color: #777481;
    font-size: 15px;
    line-height: 1.95;
}


/* =========================================
   INTEGRATION HUB
========================================= */

.ci-integration-hub {
    position: relative;
    z-index: 1;
    height: 510px;
    max-width: 1050px;
    margin: 65px auto 0;
}

/* Background Glow */

.ci-hub-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ci-hub-glow-left {
    top: 40px;
    left: 160px;
    width: 400px;
    height: 400px;
    background: rgba(216, 82, 237, 0.10);
    filter: blur(35px);
}

.ci-hub-glow-right {
    right: 100px;
    bottom: 10px;
    width: 250px;
    height: 250px;
    background: rgba(216, 82, 237, 0.07);
    filter: blur(30px);
}


/* Main Hub */

.ci-main-hub {
    position: absolute;
    top: 85px;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
}

.ci-hub-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(216, 82, 237, 0.32);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ci-hub-ring-one {
    width: 320px;
    height: 320px;
}

.ci-hub-ring-two {
    width: 235px;
    height: 235px;
    border-style: solid;
    border-color: rgba(216, 82, 237, 0.14);
}

.ci-hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 185px;
    height: 185px;
    border: 7px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(145deg, #d852ed, #a83bc2);
    box-shadow:
        0 20px 55px rgba(216, 82, 237, 0.28),
        0 0 0 15px rgba(216, 82, 237, 0.07);
    transform: translate(-50%, -50%);
}

.ci-hub-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    font-size: 18px;
}

.ci-hub-center strong {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.ci-hub-center span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f9dfff;
    font-size: 9px;
    font-weight: 600;
}

.ci-hub-center span i {
    font-size: 8px;
}


/* =========================================
   CONNECTION LINES
========================================= */

.ci-connection {
    position: absolute;
    height: 1px;
    border-top: 1px dashed rgba(216, 82, 237, 0.55);
    transform-origin: left center;
}

.ci-connection::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d852ed;
    box-shadow: 0 0 0 5px rgba(216, 82, 237, 0.10);
}

.ci-connection-one {
    top: 185px;
    left: 325px;
    width: 160px;
    transform: rotate(-27deg);
}

.ci-connection-two {
    top: 185px;
    right: 325px;
    width: 160px;
    transform: rotate(27deg);
    transform-origin: right center;
}

.ci-connection-three {
    bottom: 170px;
    left: 325px;
    width: 160px;
    transform: rotate(27deg);
}

.ci-connection-four {
    right: 325px;
    bottom: 170px;
    width: 160px;
    transform: rotate(-27deg);
    transform-origin: right center;
}


/* =========================================
   FLOATING TOOLS
========================================= */

.ci-floating-tool {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 225px;
    padding: 15px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 35px rgba(71, 35, 82, 0.09);
}

.ci-tool-crm {
    top: 20px;
    left: 25px;
}

.ci-tool-sales {
    top: 20px;
    right: 25px;
}

.ci-tool-support {
    bottom: 35px;
    left: 25px;
}

.ci-tool-analytics {
    right: 25px;
    bottom: 35px;
}

.ci-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #d852ed;
    background: #f9edfd;
    font-size: 15px;
}

.ci-floating-tool strong {
    display: block;
    margin-bottom: 4px;
    color: #302638;
    font-size: 12px;
    font-weight: 700;
}

.ci-floating-tool small {
    display: block;
    color: #a093a8;
    font-size: 10px;
}

.ci-tool-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
    color: #31b47e;
    background: #eaf9f1;
    font-size: 8px;
}


/* Hub Caption */

.ci-hub-caption {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #eadcf0;
    border-radius: 50px;
    color: #8c7894;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(65, 34, 75, 0.06);
    font-size: 10px;
    font-weight: 700;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ci-hub-caption span {
    color: #d852ed;
}


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

.ci-benefits-heading {
    position: relative;
    z-index: 1;
    margin: 55px 0 30px;
    text-align: center;
}

.ci-benefits-heading>span {
    display: block;
    margin-bottom: 10px;
    color: #bd48d3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ci-benefits-heading h3 {
    margin: 0;
    color: #2d2635;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
}


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

.ci-benefits-row {
    position: relative;
    z-index: 1;
}

.ci-benefit-card {
    height: 100%;
    padding: 27px;
    border: 1px solid #ece2f0;
    border-radius: 20px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.ci-benefit-card:hover {
    border-color: rgba(216, 82, 237, 0.35);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(216, 82, 237, 0.08);
}

.ci-benefit-card-highlight {
    background: #fdf7ff;
}

.ci-benefit-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.ci-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #d852ed;
    background: #f9edfd;
    font-size: 16px;
}

.ci-benefit-card-top>span {
    color: #c6b4cc;
    font-size: 11px;
    font-weight: 800;
}

.ci-benefit-card h4 {
    margin-bottom: 12px;
    color: #332a3a;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}

.ci-benefit-card p {
    min-height: 105px;
    margin-bottom: 20px;
    color: #8b8091;
    font-size: 13px;
    line-height: 1.85;
}

.ci-benefit-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 17px;
    border-top: 1px solid #f0e6f3;
    color: #b747cc;
    font-size: 11px;
    font-weight: 700;
}

.ci-benefit-footer i {
    font-size: 10px;
}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.ci-bottom-message {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 45px;
    padding: 24px 28px;
    border: 1px solid #eadcf0;
    border-radius: 18px;
    background: #ffffff;
}

.ci-bottom-message-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    color: #d852ed;
    background: #f9edfd;
    font-size: 16px;
}

.ci-bottom-message strong {
    display: block;
    margin-bottom: 5px;
    color: #332a3a;
    font-size: 14px;
    font-weight: 700;
}

.ci-bottom-message p {
    margin: 0;
    color: #918694;
    font-size: 12px;
    line-height: 1.7;
}


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

@media (max-width: 1199px) {

    .ci-main-title {
        font-size: 41px;
    }

    .ci-integration-hub {
        transform: scale(0.9);
        transform-origin: top center;
        margin-bottom: -50px;
    }

    .ci-floating-tool {
        width: 210px;
    }

}


@media (max-width: 991px) {

    .ci-tools-section {
        padding: 80px 0;
    }

    .ci-main-title {
        font-size: 37px;
    }

    .ci-integration-hub {
        height: 510px;
        transform: scale(0.82);
        margin-top: 45px;
        margin-bottom: -90px;
    }

    .ci-benefits-heading h3 {
        font-size: 25px;
    }

    .ci-benefit-card {
        margin-bottom: 20px;
    }

    .ci-benefit-card p {
        min-height: auto;
    }

}


@media (max-width: 767px) {

    .ci-integration-hub {
        height: auto;
        min-height: 620px;
        margin-top: 35px;
        margin-bottom: 0;
        transform: none;
    }

    .ci-main-hub {
        top: 190px;
        width: 290px;
        height: 290px;
    }

    .ci-hub-ring-one {
        width: 290px;
        height: 290px;
    }

    .ci-hub-ring-two {
        width: 215px;
        height: 215px;
    }

    .ci-hub-center {
        width: 160px;
        height: 160px;
    }

    .ci-floating-tool {
        width: 205px;
    }

    .ci-tool-crm {
        top: 10px;
        left: 0;
    }

    .ci-tool-sales {
        top: 10px;
        right: 0;
    }

    .ci-tool-support {
        bottom: 35px;
        left: 0;
    }

    .ci-tool-analytics {
        right: 0;
        bottom: 35px;
    }

    .ci-connection {
        display: none;
    }

    .ci-hub-caption {
        bottom: 0;
    }

    .ci-bottom-message {
        align-items: flex-start;
    }

}


@media (max-width: 575px) {

    .ci-tools-section {
        padding: 60px 0;
    }

    .ci-main-title {
        font-size: 30px;
    }

    .ci-intro-text {
        font-size: 14px;
        line-height: 1.85;
    }

    .ci-integration-hub {
        min-height: 670px;
    }

    .ci-main-hub {
        top: 205px;
    }

    .ci-floating-tool {
        width: 175px;
        gap: 8px;
        padding: 11px;
    }

    .ci-tool-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 12px;
    }

    .ci-floating-tool strong {
        font-size: 10px;
    }

    .ci-floating-tool small {
        font-size: 8px;
    }

    .ci-tool-status {
        display: none;
    }

    .ci-tool-crm {
        left: 0;
    }

    .ci-tool-sales {
        right: 0;
    }

    .ci-tool-support {
        left: 0;
    }

    .ci-tool-analytics {
        right: 0;
    }

    .ci-hub-caption {
        max-width: 90%;
        font-size: 9px;
    }

    .ci-benefits-heading h3 {
        font-size: 23px;
    }

    .ci-benefit-card {
        padding: 23px;
    }

    .ci-bottom-message {
        padding: 20px;
    }

    .ci-bottom-message strong {
        font-size: 13px;
    }

    .ci-bottom-message p {
        font-size: 11px;
    }

}

/* =========================================
   MANUAL DIALING CHALLENGES SECTION
========================================= */

.md-challenges-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background: #ffffff;
}

.md-challenges-section::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -180px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.045);
    pointer-events: none;
}

.md-challenges-section::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -180px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.035);
    pointer-events: none;
}


/* =========================================
   SECTION INTRO
========================================= */

.md-section-intro {
    position: relative;
    z-index: 1;
    text-align: center;
}

.md-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(216, 82, 237, 0.24);
    border-radius: 50px;
    color: #b33bc9;
    background: #fdf8ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.md-eyebrow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #ffffff;
    background: #d852ed;
    font-size: 11px;
}

.md-main-title {
    margin-bottom: 25px;
    color: #272230;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}

.md-main-title span {
    display: block;
    color: #d852ed;
}

.md-intro-text {
    max-width: 900px;
    margin: 0 auto 17px;
    color: #777481;
    font-size: 15px;
    line-height: 1.95;
}


/* =========================================
   MAIN CHALLENGE LAYOUT
========================================= */

.md-challenge-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 55px;
    margin-top: 70px;
}


/* =========================================
   LEFT SIDEBAR
========================================= */

.md-challenge-sidebar {
    position: relative;
}

.md-sidebar-heading {
    position: sticky;
    top: 30px;
}

.md-sidebar-heading>span {
    display: block;
    margin-bottom: 13px;
    color: #bd48d3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.md-sidebar-heading h3 {
    max-width: 245px;
    margin: 0;
    color: #302738;
    font-size: 27px;
    line-height: 1.45;
    font-weight: 700;
}


/* Vertical Progress Line */

.md-progress-line {
    position: relative;
    width: 3px;
    height: 230px;
    margin-top: 40px;
    margin-left: 3px;
    border-radius: 10px;
    background: #f0e5f3;
}

.md-progress-fill {
    width: 100%;
    height: 72%;
    border-radius: 10px;
    background: linear-gradient(to bottom,
            #d852ed,
            #e8a3f4);
}


/* Sidebar Note */

.md-sidebar-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 245px;
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #eee3f2;
    border-radius: 13px;
    background: #fdf9ff;
}

.md-sidebar-note>span {
    color: #d852ed;
    font-size: 13px;
}

.md-sidebar-note p {
    margin: 0;
    color: #8d8194;
    font-size: 11px;
    line-height: 1.75;
}


/* =========================================
   CHALLENGE ITEMS
========================================= */

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

.md-challenge-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 1fr;
    gap: 22px;
    align-items: center;
    padding: 24px;
    border: 1px solid #eee5f2;
    border-radius: 20px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.md-challenge-item:hover {
    border-color: rgba(216, 82, 237, 0.35);
    box-shadow: 0 14px 35px rgba(216, 82, 237, 0.07);
    transform: translateY(-3px);
}


/* Number */

.md-challenge-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #eadcf0;
    border-radius: 12px;
    color: #bd48d3;
    background: #fdf7ff;
    font-size: 11px;
    font-weight: 800;
}


/* Content */

.md-challenge-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.md-problem-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #a68aaf;
    background: #f6f1f8;
    font-size: 13px;
}

.md-problem-label {
    display: block;
    margin-bottom: 5px;
    color: #b6a5bc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.md-challenge-content h4 {
    margin: 0;
    color: #302638;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.md-challenge-content>p {
    margin: 0;
    color: #8e8295;
    font-size: 12px;
    line-height: 1.85;
}


/* =========================================
   SOLUTION PANEL
========================================= */

.md-solution-panel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 130px;
    padding: 18px;
    border: 1px solid rgba(216, 82, 237, 0.14);
    border-radius: 14px;
    background: #fdf8ff;
}

.md-solution-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 33px;
    width: 33px;
    height: 33px;
    border-radius: 9px;
    color: #ffffff;
    background: #d852ed;
    font-size: 12px;
}

.md-solution-label {
    display: block;
    margin-bottom: 5px;
    color: #bd48d3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.md-solution-panel strong {
    display: block;
    margin-bottom: 7px;
    color: #39253f;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.md-solution-panel p {
    margin: 0;
    color: #938199;
    font-size: 11px;
    line-height: 1.75;
}


/* =========================================
   BOTTOM SUMMARY
========================================= */

.md-bottom-summary {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 55px;
    padding: 25px 28px;
    border: 1px solid #eadcf0;
    border-radius: 18px;
    background: #fdf9ff;
}

.md-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #d852ed;
    background: #f6e7fc;
    font-size: 17px;
}

.md-summary-content {
    flex: 1;
}

.md-summary-content strong {
    display: block;
    margin-bottom: 5px;
    color: #332a3a;
    font-size: 14px;
    font-weight: 700;
}

.md-summary-content p {
    margin: 0;
    color: #918694;
    font-size: 12px;
    line-height: 1.7;
}

.md-summary-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: #d852ed;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.md-summary-button:hover {
    color: #ffffff;
    background: #b83bd0;
    transform: translateY(-2px);
}

.md-summary-button i {
    font-size: 10px;
}


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

@media (max-width: 1199px) {

    .md-main-title {
        font-size: 41px;
    }

    .md-challenge-layout {
        grid-template-columns: 230px 1fr;
        gap: 30px;
    }

    .md-challenge-item {
        grid-template-columns: 38px 1fr;
        gap: 18px;
    }

    .md-challenge-number {
        width: 38px;
        height: 38px;
    }

    .md-solution-panel {
        grid-column: 2;
    }

}


@media (max-width: 991px) {

    .md-challenges-section {
        padding: 80px 0;
    }

    .md-main-title {
        font-size: 37px;
    }

    .md-challenge-layout {
        display: block;
        margin-top: 50px;
    }

    .md-challenge-sidebar {
        margin-bottom: 35px;
    }

    .md-sidebar-heading {
        position: static;
    }

    .md-sidebar-heading h3 {
        max-width: 100%;
        font-size: 25px;
    }

    .md-progress-line {
        display: none;
    }

    .md-sidebar-note {
        max-width: 100%;
        margin-top: 20px;
    }

    .md-challenge-item {
        grid-template-columns: 42px 1fr;
    }

    .md-solution-panel {
        grid-column: 2;
    }

}


@media (max-width: 767px) {

    .md-challenge-item {
        grid-template-columns: 38px 1fr;
        gap: 14px;
        padding: 20px;
    }

    .md-challenge-number {
        width: 38px;
        height: 38px;
    }

    .md-solution-panel {
        grid-column: 1 / -1;
    }

    .md-bottom-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .md-summary-button {
        margin-left: 60px;
    }

}


@media (max-width: 575px) {

    .md-challenges-section {
        padding: 60px 0;
    }

    .md-main-title {
        font-size: 30px;
    }

    .md-intro-text {
        font-size: 14px;
        line-height: 1.85;
    }

    .md-challenge-layout {
        margin-top: 40px;
    }

    .md-sidebar-heading h3 {
        font-size: 23px;
    }

    .md-challenge-item {
        padding: 17px;
    }

    .md-challenge-content h4 {
        font-size: 14px;
    }

    .md-challenge-content>p {
        font-size: 11px;
    }

    .md-solution-panel {
        padding: 15px;
    }

    .md-solution-panel strong {
        font-size: 12px;
    }

    .md-bottom-summary {
        padding: 20px;
    }

    .md-summary-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

}

/* =========================================
   COMPACT GROWTH DIALER SECTION
========================================= */

.compact-growth-section {
    padding: 75px 0;
    background: #fbf9fd;
}

.compact-growth-wrapper {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 55px;
    align-items: center;
}


/* Left Content */

.compact-growth-content {
    max-width: 570px;
}

.compact-growth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    color: #c044d5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.compact-growth-eyebrow i {
    font-size: 13px;
}

.compact-growth-content h2 {
    margin-bottom: 20px;
    color: #292735;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
}

.compact-growth-content h2 span {
    display: block;
    color: #d852ed;
}

.compact-growth-content p {
    margin-bottom: 15px;
    color: #777382;
    font-size: 14px;
    line-height: 1.85;
}

.compact-growth-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 13px 20px;
    border-radius: 7px;
    background: #d852ed;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.compact-growth-button:hover {
    background: #b83ed0;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.22);
}


/* Right Feature Box */

.compact-growth-box {
    padding: 30px;
    border: 1px solid #e9e1ed;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(45, 25, 55, 0.04);

    transition: all 0.3s ease;
}

.compact-growth-box:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);

}

.compact-growth-box-heading {
    margin-bottom: 25px;
}

.compact-growth-box-heading span {
    display: block;
    margin-bottom: 9px;
    color: #bd48d1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.compact-growth-box-heading h3 {
    margin: 0;
    color: #2b2937;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.35;
}

.compact-growth-box-heading h3 strong {
    color: #d852ed;
    font-weight: 700;
}


/* Feature Points */

.compact-growth-point {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px 0;
    border-bottom: 1px solid #f0ebf3;
}

.compact-growth-point:first-child {
    padding-top: 0;
}

.compact-growth-point:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.compact-growth-icon {
    display: flex;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 9px;
    background: rgba(216, 82, 237, 0.09);
    color: #d852ed;
    font-size: 15px;
}

.compact-growth-point h4 {
    margin-bottom: 5px;
    color: #302d3b;
    font-size: 14px;
    font-weight: 700;
}

.compact-growth-point p {
    margin: 0;
    color: #85808e;
    font-size: 12px;
    line-height: 1.65;
}


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

@media (max-width: 991px) {

    .compact-growth-section {
        padding: 60px 0;
    }

    .compact-growth-wrapper {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .compact-growth-content {
        max-width: 100%;
    }

    .compact-growth-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 575px) {

    .compact-growth-section {
        padding: 45px 0;
    }

    .compact-growth-content h2 {
        font-size: 28px;
    }

    .compact-growth-content p {
        font-size: 13px;
        line-height: 1.8;
    }

    .compact-growth-box {
        padding: 23px 20px;
        border-radius: 13px;
    }

    .compact-growth-box-heading h3 {
        font-size: 22px;
    }

    .compact-growth-point {
        gap: 10px;
    }

}

/* =========================================
   TEAM GROWTH BANNER
========================================= */

.team-growth-banner {
    position: relative;
    padding: 65px 0;
    background: #ffffff;
    overflow: hidden;
}

.team-growth-banner::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 280px;
    height: 280px;
    border: 55px solid rgba(216, 82, 237, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.team-growth-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1.2fr;
    gap: 45px;
    padding: 42px 45px;
    border: 1px solid #eee6f2;
    border-radius: 20px;
    background: linear-gradient(120deg,
            #fcf8fe 0%,
            #ffffff 70%);
}


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

.team-growth-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-growth-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 17px;
    color: #bd45d1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.team-growth-label i {
    font-size: 12px;
}

.team-growth-heading h2 {
    margin: 0;
    color: #282633;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

.team-growth-heading h2 span {
    display: block;
    color: #d852ed;
}


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

.team-growth-text {
    align-self: center;
}

.team-growth-text p {
    margin-bottom: 13px;
    color: #777382;
    font-size: 13px;
    line-height: 1.85;
}

.team-growth-text p:last-child {
    margin-bottom: 0;
}


/* =========================================
   HIGHLIGHTS
========================================= */

.team-growth-highlights {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 25px;
    border-top: 1px solid #eee5f2;
}

.team-growth-highlight {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid #eee2f2;
    border-radius: 7px;
    background: #ffffff;
    color: #5e5868;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.team-growth-highlight i {
    color: #d852ed;
    font-size: 13px;
}

.team-growth-highlight:hover {
    border-color: #d852ed;
    background: #fdf6ff;
    transform: translateY(-3px);
}


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

@media (max-width: 991px) {

    .team-growth-banner {
        padding: 50px 0;
    }

    .team-growth-inner {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 35px;
    }

    .team-growth-heading h2 {
        font-size: 33px;
    }

    .team-growth-highlights {
        grid-column: auto;
        padding-top: 20px;
    }

}


@media (max-width: 575px) {

    .team-growth-banner {
        padding: 40px 0;
    }

    .team-growth-inner {
        gap: 22px;
        padding: 27px 22px;
        border-radius: 14px;
    }

    .team-growth-heading h2 {
        font-size: 28px;
    }

    .team-growth-text p {
        font-size: 12px;
        line-height: 1.8;
    }

    .team-growth-highlights {
        gap: 8px;
    }

    .team-growth-highlight {
        padding: 9px 11px;
        font-size: 10px;
    }

}

/* =========================================
   OUTBOUND CALLING CTA SECTION
========================================= */

.outbound-cta-section {
    position: relative;
    padding: 75px 0;
    overflow: hidden;
    background: linear-gradient(135deg,
            #fff8ff 0%,
            #f9edff 50%,
            #ffffff 100%);
}

.outbound-cta-wrapper {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


/* =========================================
   DECORATIVE ORBIT
========================================= */

.outbound-cta-orbit {
    position: absolute;
    z-index: -1;
    top: -170px;
    left: 50%;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(216, 82, 237, 0.14);
    border-radius: 50%;
    transform: translateX(-50%);
}

.outbound-cta-orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(216, 82, 237, 0.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


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

.outbound-cta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 30px;
    color: #e18af0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.outbound-cta-label i {
    font-size: 12px;
}


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

.outbound-cta-title {
    margin-bottom: 20px;
    color: #292235;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
}

.outbound-cta-title span {
    display: block;
    color: #d852ed;
}

.outbound-cta-title span {
    display: block;
    color: #d852ed;
}


/* =========================================
   TEXT
========================================= */

.outbound-cta-intro {
    max-width: 600px;
    margin: 0 auto 18px;
    color: #4f465b;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
}

.outbound-cta-description {
    max-width: 730px;
    margin: 0 auto;
    color: #777080;
    font-size: 13px;
    line-height: 1.9;
}

.outbound-cta-description strong {
    color: #c13bd7;
    font-weight: 700;
}

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

.outbound-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 30px;
}

.outbound-cta-primary,
.outbound-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.outbound-cta-primary {
    background: #d852ed;
    color: #ffffff;
}

.outbound-cta-primary:hover {
    background: #e16cf4;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.3);
}

.outbound-cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #D852ED;
    color: #ffffff;
}

.outbound-cta-secondary:hover {
    border-color: #D852ED;
    background: #e16cf4;
}

.outbound-cta-primary i,
.outbound-cta-secondary i {
    font-size: 11px;
}


/* =========================================
   BOTTOM BENEFITS
========================================= */

.outbound-cta-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 42px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.outbound-cta-bottom span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #aaa2b8;
    font-size: 11px;
}

.outbound-cta-bottom i {
    color: #d852ed;
    font-size: 12px;
}


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

@media (max-width: 767px) {

    .outbound-cta-section {
        padding: 60px 0;
    }

    .outbound-cta-title {
        font-size: 33px;
    }

    .outbound-cta-intro {
        font-size: 15px;
    }

    .outbound-cta-actions {
        flex-direction: column;
    }

    .outbound-cta-primary,
    .outbound-cta-secondary {
        width: 100%;
        max-width: 260px;
    }

    .outbound-cta-bottom {
        gap: 13px;
    }

}


@media (max-width: 575px) {

    .outbound-cta-section {
        padding: 48px 0;
    }

    .outbound-cta-title {
        font-size: 28px;
    }

    .outbound-cta-intro {
        font-size: 14px;
    }

    .outbound-cta-description {
        font-size: 12px;
        line-height: 1.8;
    }

    .outbound-cta-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        padding: 8px 15px;
        border: 1px solid rgba(216, 82, 237, 0.3);
        border-radius: 30px;
        background: rgba(216, 82, 237, 0.07);
        color: #b83ed0;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.6px;
    }

    .outbound-cta-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px;
        margin-top: 42px;
        padding-top: 22px;
        border-top: 1px solid rgba(216, 82, 237, 0.18);
    }

    .outbound-cta-bottom span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #777080;
        font-size: 11px;
    }

    .outbound-cta-bottom i {
        color: #d852ed;
        font-size: 12px;
    }
}

/* =========================================
   COMPACT FAQ SECTION
========================================= */

.compact-faq-section {
    padding: 75px 0;
    background: #ffffff;
}

.compact-faq-wrapper {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 65px;
    align-items: start;
}


/* FAQ Intro */

.compact-faq-intro {
    position: sticky;
    top: 30px;
}

.compact-faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #c044d5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.compact-faq-intro h2 {
    margin-bottom: 18px;
    color: #292735;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
}

.compact-faq-intro h2 span {
    display: block;
    color: #d852ed;
}

.compact-faq-intro>p {
    max-width: 360px;
    margin-bottom: 25px;
    color: #777382;
    font-size: 14px;
    line-height: 1.85;
}


/* FAQ Note */

.compact-faq-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 365px;
    padding: 17px;
    border-left: 3px solid #d852ed;
    border-radius: 7px;
    background: #fbf6fd;
}

.compact-faq-note i {
    padding-top: 3px;
    color: #d852ed;
    font-size: 16px;
}

.compact-faq-note span {
    color: #777382;
    font-size: 12px;
    line-height: 1.7;
}


/* FAQ List */

.compact-faq-list {
    border-top: 1px solid #eae5ef;
}

.compact-faq-item {
    border-bottom: 1px solid #eae5ef;
}


/* FAQ Question */

.compact-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 5px;
    border: none;
    outline: none;
    background: transparent;
    color: #302d3b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.compact-faq-question:hover {
    color: #d852ed;
}

.compact-faq-question:focus {
    outline: none;
    box-shadow: none;
}


/* Arrow */

.compact-faq-arrow {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e4d8e8;
    border-radius: 50%;
    color: #d852ed;
    font-size: 11px;
    transition: all 0.3s ease;
}


/* FAQ Answer - Hidden by Default */

.compact-faq-answer {
    display: none;
    padding: 0 45px 22px 5px;
}

.compact-faq-answer p {
    margin: 0;
    color: #777382;
    font-size: 13px;
    line-height: 1.85;
}


/* Active FAQ */

.compact-faq-item.active .compact-faq-answer {
    display: block;
}

.compact-faq-item.active .compact-faq-question {
    color: #d852ed;
}

.compact-faq-item.active .compact-faq-arrow {
    background: #d852ed;
    border-color: #d852ed;
    color: #ffffff;
    transform: rotate(180deg);
}


/* Responsive */

@media (max-width: 991px) {

    .compact-faq-section {
        padding: 60px 0;
    }

    .compact-faq-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .compact-faq-intro {
        position: relative;
        top: auto;
    }

    .compact-faq-intro>p,
    .compact-faq-note {
        max-width: 100%;
    }

    .compact-faq-intro h2 {
        font-size: 34px;
    }

}


@media (max-width: 575px) {

    .compact-faq-section {
        padding: 45px 0;
    }

    .compact-faq-intro h2 {
        font-size: 29px;
    }

    .compact-faq-intro>p {
        font-size: 13px;
    }

    .compact-faq-question {
        gap: 12px;
        padding: 18px 0;
        font-size: 13px;
    }

    .compact-faq-answer {
        padding: 0 35px 19px 0;
    }

    .compact-faq-answer p {
        font-size: 12px;
        line-height: 1.8;
    }

    .compact-faq-arrow {
        flex: 0 0 25px;
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

}





/* =========================================
   PROGRESSIVE DIALER FLOW MAP
========================================= */

.pd-flow-section {
    position: relative;
    padding: 105px 0;
    background: #ffffff;
    overflow: hidden;
}

.pd-flow-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
    pointer-events: none;
}

.pd-flow-section .container {
    position: relative;
    z-index: 1;
}


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

.pd-flow-header {
    max-width: 820px;
    margin: 0 auto 80px;
}

.pd-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.06);
    color: #b63cca;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.pd-flow-header h2 {
    margin-bottom: 22px;
    color: #262432;
    font-size: 43px;
    font-weight: 700;
    line-height: 1.25;
}

.pd-flow-header h2 span {
    display: block;
    color: #d852ed;
}

.pd-flow-header p {
    max-width: 750px;
    margin: 0 auto;
    color: #777382;
    font-size: 16px;
    line-height: 1.9;
}


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

.pd-flow-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 13px;
    align-items: start;
    margin-top: 30px;
}

.pd-flow-line {
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(216, 82, 237, 0.15),
            #d852ed,
            rgba(216, 82, 237, 0.15));
    transform: translateY(-50%);
    z-index: 0;
}


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

.pd-flow-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 24px 16px 17px;
    border: 1px solid #eee8f2;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(46, 24, 59, 0.045);
    transition: all 0.3s ease;
}

.pd-flow-card-top {
    margin-top: -27px;
}

.pd-flow-card-bottom {
    margin-top: 55px;
}

.pd-flow-card:hover {
    border-color: rgba(216, 82, 237, 0.5);
    box-shadow: 0 16px 35px rgba(55, 25, 67, 0.1);
    transform: translateY(-7px);
}


/* =========================================
   CARD NUMBER
========================================= */

.pd-flow-number {
    position: absolute;
    top: -15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #d852ed;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(216, 82, 237, 0.22);
}


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

.pd-flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.09);
    color: #d852ed;
    font-size: 18px;
}

.pd-flow-label {
    display: block;
    margin-bottom: 9px;
    color: #bd4acd;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pd-flow-card h4 {
    min-height: 42px;
    margin-bottom: 12px;
    color: #292735;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.pd-flow-card p {
    min-height: 115px;
    margin-bottom: 17px;
    color: #85818d;
    font-size: 12px;
    line-height: 1.75;
}


/* =========================================
   CARD FOOTER
========================================= */

.pd-flow-bottom {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 13px;
    border-top: 1px solid #f0ebf3;
    color: #777080;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.pd-flow-bottom i {
    color: #d852ed;
    font-size: 11px;
}


/* =========================================
   SUMMARY STRIP
========================================= */

.pd-flow-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 70px;
    padding: 25px 30px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 17px;
    background: linear-gradient(100deg,
            #fbf4fd 0%,
            #ffffff 100%);
}

.pd-summary-symbol {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #d852ed;
    color: #ffffff;
    font-size: 20px;
}

.pd-summary-text {
    flex: 1;
}

.pd-summary-text h4 {
    margin-bottom: 6px;
    color: #292735;
    font-size: 18px;
    font-weight: 700;
}

.pd-summary-text p {
    margin: 0;
    color: #777382;
    font-size: 13px;
    line-height: 1.7;
}

.pd-summary-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 30px;
    background: #ffffff;
    color: #8b748f;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pd-summary-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42bf83;
}


/* =========================================
   RESPONSIVE - LARGE TABLET
========================================= */

@media (max-width: 1199px) {

    .pd-flow-header h2 {
        font-size: 39px;
    }

    .pd-flow-map {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px 15px;
    }

    .pd-flow-line {
        display: none;
    }

    .pd-flow-card-top,
    .pd-flow-card-bottom {
        margin-top: 0;
    }

    .pd-flow-card h4 {
        min-height: auto;
    }

    .pd-flow-card p {
        min-height: 105px;
    }

    .pd-flow-summary {
        margin-top: 50px;
    }

}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 991px) {

    .pd-flow-section {
        padding: 80px 0;
    }

    .pd-flow-header {
        margin-bottom: 50px;
    }

    .pd-flow-header h2 {
        font-size: 35px;
    }

    .pd-flow-map {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px 15px;
    }

    .pd-flow-card p {
        min-height: 95px;
    }

    .pd-flow-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pd-summary-text {
        min-width: calc(100% - 75px);
    }

    .pd-summary-status {
        margin-left: 72px;
    }

}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 575px) {

    .pd-flow-section {
        padding: 60px 0;
    }

    .pd-flow-header {
        margin-bottom: 40px;
    }

    .pd-flow-header h2 {
        font-size: 29px;
    }

    .pd-flow-header p {
        font-size: 14px;
        line-height: 1.8;
    }

    .pd-flow-map {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 0;
    }

    .pd-flow-card {
        padding: 24px 20px 18px;
    }

    .pd-flow-card p {
        min-height: auto;
        font-size: 13px;
    }

    .pd-flow-card h4 {
        font-size: 17px;
    }

    .pd-flow-card:hover {
        transform: none;
    }

    .pd-flow-icon {
        width: 45px;
        height: 45px;
    }

    .pd-flow-bottom {
        font-size: 11px;
    }

    .pd-flow-summary {
        gap: 15px;
        margin-top: 40px;
        padding: 22px 18px;
    }

    .pd-summary-symbol {
        flex: 0 0 45px;
        width: 45px;
        height: 45px;
        font-size: 17px;
    }

    .pd-summary-text {
        min-width: calc(100% - 60px);
    }

    .pd-summary-text h4 {
        font-size: 16px;
    }

    .pd-summary-status {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

}


/* =========================================
   CONTACT LIST MANAGEMENT SECTION
========================================= */

.clm-section {
    position: relative;
    padding: 105px 0;
    background: #fbf9fd;
    overflow: hidden;
}

.clm-section::before {
    content: "";
    position: absolute;
    top: -190px;
    left: -180px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
    pointer-events: none;
}

.clm-section .container {
    position: relative;
    z-index: 1;
}


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

.clm-header {
    max-width: 850px;
    margin: 0 auto 65px;
}

.clm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.06);
    color: #b638ca;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.clm-header h2 {
    margin-bottom: 22px;
    color: #262432;
    font-size: 43px;
    font-weight: 700;
    line-height: 1.25;
}

.clm-header h2 span {
    display: block;
    color: #d852ed;
}

.clm-header p {
    max-width: 770px;
    margin: 0 auto;
    color: #777382;
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   MAIN WORKSPACE
========================================= */

.clm-workspace {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 25px;
    align-items: stretch;
}


/* =========================================
   DATABASE PANEL
========================================= */

.clm-database-panel {
    padding: 28px;
    border: 1px solid #e9e2ef;

    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(49, 25, 64, 0.05);

    transition: all 0.3s ease;
}

.clm-database-panel:hover {
    border-color: #D852ED;

    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);

}

.clm-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 24px;
}

.clm-panel-label {
    display: block;
    margin-bottom: 8px;
    color: #b94bcb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.clm-panel-top h3 {
    margin: 0;
    color: #292735;
    font-size: 23px;
    font-weight: 700;
}

.clm-panel-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f8f1fb;
    color: #b94bcb;
    font-size: 14px;
}


/* =========================================
   SEARCH BOX
========================================= */

.clm-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 23px;
    padding: 13px 14px;
    border: 1px solid #eee8f2;
    border-radius: 9px;
    background: #fcfbfd;
    color: #aaa3b1;
    font-size: 12px;
}

.clm-search-box>i:first-child {
    color: #d852ed;
    font-size: 13px;
}

.clm-filter-icon {
    margin-left: auto;
    color: #9b91a2;
}


/* =========================================
   DATABASE SUMMARY
========================================= */

.clm-database-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.clm-summary-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 11px;
    background: #faf6fc;
}

.clm-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    background: #ffffff;
    color: #d852ed;
    font-size: 13px;
}

.clm-summary-stat strong {
    display: block;
    color: #302d3c;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.clm-summary-stat small {
    display: block;
    margin-top: 4px;
    color: #8c8292;
    font-size: 10px;
}


/* =========================================
   CONTACT LIST
========================================= */

.clm-contact-list {
    border-top: 1px solid #f0ebf3;
}

.clm-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 12px;
    color: #aaa0b0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.clm-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid #f3eff5;
}

.clm-contact-person {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.clm-avatar {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

.clm-avatar-one {
    background: #f5e5fb;
    color: #bd42d2;
}

.clm-avatar-two {
    background: #e9f4ff;
    color: #4d8bc2;
}

.clm-avatar-three {
    background: #fff1df;
    color: #bd8544;
}

.clm-avatar-four {
    background: #e5f8ee;
    color: #3a9c6a;
}

.clm-contact-person strong {
    display: block;
    margin-bottom: 4px;
    color: #363241;
    font-size: 12px;
    font-weight: 700;
}

.clm-contact-person small {
    display: block;
    overflow: hidden;
    color: #968d9d;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clm-status {
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.clm-status-ready {
    background: #eaf8f0;
    color: #3e9d6b;
}

.clm-status-pending {
    background: #fff5e6;
    color: #c28a3c;
}

.clm-status-complete {
    background: #f0eafb;
    color: #9061b5;
}


/* =========================================
   DATABASE FOOTER
========================================= */

.clm-database-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 17px;
    border-top: 1px solid #f0ebf3;
    color: #958b9d;
    font-size: 10px;
}

.clm-database-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.clm-database-footer i {
    color: #d852ed;
}


/* =========================================
   CAMPAIGN PANEL
========================================= */

.clm-campaign-panel {
    padding: 32px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 20px;
    background: linear-gradient(145deg,
            #ffffff 0%,
            #fcf7fe 100%);

    transition: all 0.3s ease;
}

.clm-campaign-panel:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.clm-campaign-heading {
    margin-bottom: 27px;
}

.clm-campaign-heading h3 {
    margin-bottom: 14px;
    color: #292735;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.35;
}

.clm-campaign-heading h3 strong {
    display: block;
    color: #d852ed;
    font-weight: 700;
}

.clm-campaign-heading p {
    margin: 0;
    color: #817888;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================
   CAMPAIGN TAG GRID
========================================= */

.clm-campaign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}

.clm-campaign-tag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid #eee5f2;
    border-radius: 11px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.clm-campaign-tag:hover {
    border-color: rgba(216, 82, 237, 0.45);
    box-shadow: 0 8px 20px rgba(65, 27, 78, 0.07);
    transform: translateY(-3px);
}

.clm-campaign-icon {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8edfc;
    color: #d852ed;
    font-size: 12px;
}

.clm-campaign-tag h4 {
    margin-bottom: 4px;
    color: #393443;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.clm-campaign-tag div {
    min-width: 0;
}

.clm-campaign-tag div>span {
    display: block;
    color: #a096a8;
    font-size: 11px;
    line-height: 1.4;
}

.clm-tag-arrow {
    display: none;
    margin-left: auto;
    color: #d852ed;
    font-size: 10px;
}


/* =========================================
   CAMPAIGN FOOTER
========================================= */

.clm-campaign-footer {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px solid #eee5f2;
}

.clm-campaign-footer-icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #d852ed;
    color: #ffffff;
    font-size: 15px;
}

.clm-campaign-footer h4 {
    margin-bottom: 5px;
    color: #302d3c;
    font-size: 14px;
    font-weight: 700;
}

.clm-campaign-footer p {
    margin: 0;
    color: #8a8191;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================
   BENEFITS BAR
========================================= */

.clm-benefits-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
    padding: 24px 28px;
    border: 1px solid #eee6f2;
    border-radius: 16px;
    background: #ffffff;
}

.clm-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.clm-benefit>i {
    padding-top: 2px;
    color: #d852ed;
    font-size: 16px;
}

.clm-benefit strong {
    display: block;
    margin-bottom: 5px;
    color: #373241;
    font-size: 12px;
    font-weight: 700;
}

.clm-benefit span {
    display: block;
    color: #968d9d;
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================
   RESPONSIVE - LARGE TABLET
========================================= */

@media (max-width: 1199px) {

    .clm-header h2 {
        font-size: 39px;
    }

    .clm-workspace {
        gap: 18px;
    }

    .clm-database-panel,
    .clm-campaign-panel {
        padding: 23px;
    }

    .clm-campaign-heading h3 {
        font-size: 24px;
    }

    .clm-campaign-grid {
        grid-template-columns: 1fr;
    }

    .clm-campaign-tag {
        padding: 12px;
    }

}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 991px) {

    .clm-section {
        padding: 80px 0;
    }

    .clm-header {
        margin-bottom: 45px;
    }

    .clm-header h2 {
        font-size: 35px;
    }

    .clm-workspace {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

    .clm-benefits-bar {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 575px) {

    .clm-section {
        padding: 60px 0;
    }

    .clm-header h2 {
        font-size: 29px;
    }

    .clm-header p {
        font-size: 14px;
        line-height: 1.8;
    }

    .clm-database-panel,
    .clm-campaign-panel {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .clm-panel-top h3 {
        font-size: 20px;
    }

    .clm-database-summary {
        gap: 8px;
    }

    .clm-summary-stat {
        gap: 7px;
        padding: 12px 8px;
    }

    .clm-stat-icon {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .clm-summary-stat strong {
        font-size: 15px;
    }

    .clm-summary-stat small {
        font-size: 9px;
    }

    .clm-contact-row {
        gap: 7px;
    }

    .clm-contact-person {
        gap: 8px;
    }

    .clm-contact-person strong {
        font-size: 11px;
    }

    .clm-contact-person small {
        max-width: 125px;
        font-size: 9px;
    }

    .clm-status {
        padding: 4px 6px;
        font-size: 8px;
    }

    .clm-database-footer {
        font-size: 9px;
    }

    .clm-campaign-heading h3 {
        font-size: 23px;
    }

    .clm-campaign-heading p {
        font-size: 12px;
    }

    .clm-campaign-grid {
        grid-template-columns: 1fr;
    }

    .clm-campaign-tag:hover {
        transform: none;
    }

    .clm-campaign-footer {
        gap: 10px;
    }

    .clm-benefits-bar {
        padding: 21px 18px;
    }

}






/* =====================================================
   MANAGER VISIBILITY SECTION
===================================================== */

.manager-visibility-section {
    position: relative;
    padding: 100px 0;
    background: #f8f7fc;
    overflow: hidden;
}

.manager-visibility-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -140px;
    background: rgba(216, 82, 237, 0.08);
    border-radius: 50%;
    pointer-events: none;
}


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

.manager-visibility-header {
    max-width: 780px;
    margin: 0 auto 55px;
}

.manager-visibility-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.manager-visibility-eyebrow i {
    font-size: 14px;
}

.manager-visibility-header h2 {
    margin: 0 0 20px;
    color: #20202f;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.manager-visibility-header h2 span {
    color: #d852ed;
}

.manager-visibility-header p {
    margin: 0;
    color: #77758a;
    font-size: 16px;
    line-height: 1.9;
}


/* =====================================================
   MAIN WORKSPACE
===================================================== */

.manager-visibility-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 24px;
    padding: 24px;
    border: 1px solid #e9e4f1;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 20px 65px rgba(46, 31, 70, 0.08);

    transition: all 0.3s ease;
}

.manager-visibility-workspace:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);

}


/* =====================================================
   LEFT CONTROL PANEL
===================================================== */

.manager-control-panel {
    padding: 26px;
    border-radius: 20px;
    background: linear-gradient(155deg, #252033 0%, #171522 100%);
    color: #ffffff;
    overflow: hidden;
}

.manager-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}

.manager-panel-top small {
    display: block;
    margin-bottom: 8px;
    color: #aaa5bd;
    font-size: 9px;
    letter-spacing: 1.2px;
}

.manager-panel-top h4 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

.manager-live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(111, 239, 166, 0.3);
    border-radius: 20px;
    color: #79e8a9;
    font-size: 10px;
}

.manager-live-status i {
    font-size: 6px;
}


/* Campaign Selector */

.manager-campaign-selector {
    margin-bottom: 22px;
}

.manager-field-label {
    display: block;
    margin-bottom: 10px;
    color: #a6a1b6;
    font-size: 11px;
}

.manager-campaign-name {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.manager-campaign-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.18);
    color: #e18cf2;
}

.manager-campaign-name strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.manager-campaign-name small {
    display: block;
    margin-top: 4px;
    color: #9993ac;
    font-size: 10px;
}

.manager-dropdown-icon {
    margin-left: auto;
    color: #aaa5ba;
    font-size: 11px;
}


/* Primary Metric */

.manager-primary-metric {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 16px;
    background: linear-gradient(145deg,
            rgba(216, 82, 237, 0.2),
            rgba(216, 82, 237, 0.04));
}

.manager-metric-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #c0b9d0;
    font-size: 11px;
}

.manager-metric-heading i {
    color: #df8bf1;
}

.manager-primary-metric h3 {
    margin: 13px 0;
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
}

.manager-metric-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.manager-metric-footer span {
    color: #7ce7a9;
    font-size: 11px;
    font-weight: 600;
}

.manager-metric-footer small {
    color: #aaa4b9;
    font-size: 10px;
}


/* Mini Metrics */

.manager-mini-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 26px;
}

.manager-mini-metric {
    display: flex;
    align-items: center;
    gap: 12px;
}

.manager-mini-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 13px;
}

.manager-mini-icon.connected {
    background: rgba(78, 218, 151, 0.12);
    color: #63dfa0;
}

.manager-mini-icon.duration {
    background: rgba(244, 187, 91, 0.12);
    color: #f4bb5b;
}

.manager-mini-metric small {
    display: block;
    margin-bottom: 4px;
    color: #a39db5;
    font-size: 10px;
}

.manager-mini-metric strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}


/* Progress */

.manager-progress-block {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.manager-progress-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    color: #b3adc2;
    font-size: 11px;
}

.manager-progress-title strong {
    color: #ffffff;
}

.manager-progress-track {
    width: 100%;
    height: 7px;
    margin-bottom: 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.manager-progress-fill {
    width: 66.1%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b942d0, #e88af6);
}

.manager-progress-block>small {
    display: block;
    color: #8e879f;
    font-size: 10px;
    line-height: 1.7;
}


/* =====================================================
   RIGHT ANALYTICS PANEL
===================================================== */

.manager-analytics-panel {
    min-width: 0;
    padding: 8px;
}

.manager-analytics-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 5px 0 24px;
}

.manager-analytics-heading span {
    display: block;
    margin-bottom: 7px;
    color: #a09aad;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.manager-analytics-heading h3 {
    margin: 0;
    color: #292536;
    font-size: 22px;
    font-weight: 700;
}

.manager-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e7e1ed;
    border-radius: 10px;
    background: #ffffff;
    color: #6f687e;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.manager-filter-button:hover {
    border-color: #d852ed;
    color: #d852ed;
}


/* Analytics Cards */

.manager-analytics-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.manager-analytics-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 14px;
    border: 1px solid #eee9f3;
    border-radius: 14px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.manager-analytics-card:hover {
    border-color: rgba(216, 82, 237, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(55, 30, 75, 0.06);
}

.manager-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f9eafd;
    color: #d852ed;
    font-size: 13px;
}

.manager-analytics-card small {
    display: block;
    margin-bottom: 7px;
    color: #9891a5;
    font-size: 10px;
}

.manager-analytics-card h4 {
    margin: 0 0 5px;
    color: #2d2739;
    font-size: 21px;
    font-weight: 700;
}

.manager-analytics-card span {
    color: #72a78c;
    font-size: 9px;
}


/* =====================================================
   ACTIVITY CHART
===================================================== */

.manager-activity-chart {
    padding: 22px;
    border: 1px solid #eee9f3;
    border-radius: 17px;
    background: #ffffff;
    margin-bottom: 20px;
}

.manager-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 22px;
}

.manager-chart-header h4 {
    margin: 0 0 6px;
    color: #30293c;
    font-size: 15px;
    font-weight: 700;
}

.manager-chart-header small {
    color: #9992a7;
    font-size: 10px;
}

.manager-chart-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #72a78c;
    font-size: 10px;
    white-space: nowrap;
}


/* Chart Layout */

.manager-chart-visual {
    display: flex;
    gap: 12px;
    min-height: 190px;
}

.manager-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 25px;
}

.manager-chart-y-axis span {
    color: #aaa3b4;
    font-size: 9px;
}

.manager-chart-area {
    position: relative;
    flex: 1;
    min-width: 0;
}

.manager-chart-grid {
    position: absolute;
    inset: 0 0 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.manager-chart-grid span {
    display: block;
    width: 100%;
    border-top: 1px dashed #eeeaf2;
}

.manager-chart-bars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    top: 5px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding: 0 10px;
}

.manager-chart-bar {
    width: 100%;
    max-width: 18px;
    border-radius: 5px 5px 2px 2px;
    background: #ead3ef;
    transition: all 0.3s ease;
}

.manager-chart-bar:hover,
.manager-chart-bar.active {
    background: linear-gradient(180deg, #d852ed, #ad45c1);
}

.manager-chart-x-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.manager-chart-x-axis span {
    color: #aaa3b4;
    font-size: 9px;
}


/* =====================================================
   BOTTOM MONITORING ROW
===================================================== */

.manager-bottom-monitoring {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 16px;
}

.manager-outcome-box,
.manager-followup-box {
    padding: 20px;
    border: 1px solid #eee9f3;
    border-radius: 16px;
    background: #ffffff;
}

.manager-box-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.manager-box-heading h4 {
    margin: 0;
    color: #342d40;
    font-size: 13px;
    font-weight: 700;
}

.manager-box-heading>i {
    color: #d852ed;
    font-size: 14px;
}


/* Outcome Items */

.manager-outcome-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #81798f;
    font-size: 11px;
}

.manager-outcome-item:last-child {
    margin-bottom: 0;
}

.manager-outcome-item span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.manager-outcome-item>strong {
    color: #393143;
    font-size: 11px;
}

.manager-outcome-item i {
    font-size: 7px;
}

.connected-dot {
    color: #58c992;
}

.callback-dot {
    color: #d852ed;
}

.unanswered-dot {
    color: #f3b85e;
}


/* Follow-Up Box */

.manager-followup-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.manager-alert-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff4df;
    color: #e7a43c;
    font-size: 13px;
}

.manager-followup-content strong {
    display: block;
    margin-bottom: 6px;
    color: #403648;
    font-size: 11px;
}

.manager-followup-content p {
    margin: 0;
    color: #9991a5;
    font-size: 10px;
    line-height: 1.7;
}

.manager-review-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.manager-review-link:hover {
    color: #a936bd;
    gap: 12px;
}


/* =====================================================
   BENEFITS BAR
===================================================== */

.manager-visibility-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 25px;
    padding: 22px 25px;
    border: 1px solid #eae4f0;
    border-radius: 18px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.manager-visibility-benefits:hover {
    border-color: #D852ED;
    transform: translateY(-5px);

}

.manager-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.manager-benefit-item>span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #f9eafd;
    color: #d852ed;
    font-size: 13px;
}

.manager-benefit-item h4 {
    margin: 0 0 6px;
    color: #30293b;
    font-size: 12px;
    font-weight: 700;
}

.manager-benefit-item p {
    margin: 0;
    color: #9991a5;
    font-size: 11px;
    line-height: 1.7;
}


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

@media (max-width: 1199px) {

    .manager-visibility-workspace {
        grid-template-columns: 290px 1fr;
        padding: 18px;
    }

    .manager-control-panel {
        padding: 22px;
    }

    .manager-analytics-cards {
        gap: 10px;
    }

    .manager-analytics-card {
        padding: 13px 10px;
    }

    .manager-analytics-card h4 {
        font-size: 18px;
    }

    .manager-chart-bars {
        gap: 5px;
        padding: 0 5px;
    }

}


@media (max-width: 991px) {

    .manager-visibility-section {
        padding: 75px 0;
    }

    .manager-visibility-header h2 {
        font-size: 35px;
    }

    .manager-visibility-workspace {
        grid-template-columns: 1fr;
    }

    .manager-control-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .manager-panel-top {
        margin-bottom: 0;
    }

    .manager-campaign-selector {
        margin-bottom: 0;
    }

    .manager-primary-metric {
        margin-bottom: 0;
    }

    .manager-mini-metrics {
        margin-bottom: 0;
    }

    .manager-progress-block {
        grid-column: 1 / -1;
    }

    .manager-analytics-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .manager-visibility-benefits {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767px) {

    .manager-visibility-section {
        padding: 60px 0;
    }

    .manager-visibility-header {
        margin-bottom: 35px;
    }

    .manager-visibility-header h2 {
        font-size: 29px;
    }

    .manager-visibility-header p {
        font-size: 14px;
        line-height: 1.8;
    }

    .manager-visibility-workspace {
        padding: 12px;
        border-radius: 18px;
    }

    .manager-control-panel {
        display: block;
        padding: 20px;
    }

    .manager-panel-top {
        margin-bottom: 25px;
    }

    .manager-campaign-selector {
        margin-bottom: 20px;
    }

    .manager-primary-metric {
        margin-bottom: 20px;
    }

    .manager-mini-metrics {
        margin-bottom: 22px;
    }

    .manager-progress-block {
        padding-top: 20px;
    }

    .manager-analytics-panel {
        padding: 5px;
    }

    .manager-analytics-heading {
        display: block;
    }

    .manager-analytics-heading h3 {
        font-size: 19px;
    }

    .manager-filter-button {
        margin-top: 15px;
    }

    .manager-analytics-cards {
        grid-template-columns: 1fr;
    }

    .manager-analytics-card {
        align-items: center;
    }

    .manager-activity-chart {
        padding: 16px;
    }

    .manager-chart-header {
        display: block;
    }

    .manager-chart-badge {
        margin-top: 10px;
    }

    .manager-bottom-monitoring {
        grid-template-columns: 1fr;
    }

    .manager-visibility-benefits {
        padding: 20px;
    }

}


@media (max-width: 480px) {

    .manager-visibility-header h2 {
        font-size: 26px;
    }

    .manager-control-panel {
        padding: 17px;
    }

    .manager-panel-top h4 {
        font-size: 16px;
    }

    .manager-primary-metric h3 {
        font-size: 31px;
    }

    .manager-analytics-heading h3 {
        font-size: 17px;
    }

    .manager-chart-x-axis span {
        font-size: 8px;
    }

    .manager-chart-bars {
        gap: 3px;
    }

    .manager-chart-bar {
        max-width: 12px;
    }

}




/* =====================================================
   PROGRESSIVE DIALER BUSINESS CONNECT
===================================================== */

.pd-business-connect-section {
    position: relative;
    padding: 105px 0;
    background: #ffffff;
    overflow: hidden;
}

.pd-business-connect-section::before {
    content: "";
    position: absolute;
    top: 80px;
    left: -180px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(216, 82, 237, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.pd-business-connect-section::after {
    content: "";
    position: absolute;
    right: -130px;
    bottom: 80px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
    pointer-events: none;
}


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

.pd-business-connect-header {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: end;
    gap: 65px;
    margin-bottom: 65px;
}

.pd-business-connect-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.pd-business-connect-eyebrow i {
    font-size: 14px;
}

.pd-business-connect-heading h2 {
    max-width: 650px;
    margin: 0;
    color: #24202f;
    font-size: 43px;
    line-height: 1.22;
    font-weight: 700;
}

.pd-business-connect-heading h2 span {
    color: #d852ed;
}

.pd-business-connect-intro {
    padding-left: 25px;
    border-left: 3px solid #d852ed;
}

.pd-business-connect-intro p {
    margin: 0;
    color: #777184;
    font-size: 15px;
    line-height: 1.95;
}


/* =====================================================
   ECOSYSTEM
===================================================== */

.pd-business-ecosystem {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: center;
    gap: 35px;
    min-height: 430px;
    padding: 35px;
    border: 1px solid #ebe5f1;
    border-radius: 28px;
    background:
        linear-gradient(135deg,
            #fcfaff 0%,
            #ffffff 48%,
            #fcf9ff 100%);
    box-shadow: 0 18px 55px rgba(54, 35, 74, 0.06);
}


/* Tool Columns */

.pd-business-tools {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pd-business-tool-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 105px;
    padding: 18px;
    border: 1px solid #eae3f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(60, 38, 79, 0.035);
    transition: all 0.3s ease;
}

.pd-business-tool-card:hover {
    border-color: rgba(216, 82, 237, 0.55);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(216, 82, 237, 0.1);
}

.pd-business-tool-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #faeaff;
    color: #d852ed;
    font-size: 15px;
}

.pd-business-tool-card h4 {
    margin: 0 0 6px;
    color: #30293a;
    font-size: 13px;
    font-weight: 700;
}

.pd-business-tool-card p {
    margin: 0;
    color: #9991a5;
    font-size: 11px;
    line-height: 1.65;
}

.pd-business-tool-status {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-left: auto;
    border-radius: 50%;
    background: #e9faef;
    color: #53b87e;
    font-size: 8px;
}


/* =====================================================
   CENTRAL HUB
===================================================== */

.pd-business-hub-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
}

.pd-business-hub {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    padding: 25px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
    background: linear-gradient(145deg, #282035, #181521);
    box-shadow:
        0 0 0 15px rgba(216, 82, 237, 0.06),
        0 0 0 30px rgba(216, 82, 237, 0.035),
        0 20px 45px rgba(35, 20, 47, 0.18);
    text-align: center;
}

.pd-business-hub-ring {
    position: absolute;
    inset: -9px;
    border: 1px dashed rgba(216, 82, 237, 0.6);
    border-radius: 50%;
    animation: pd-business-ring-rotate 25s linear infinite;
}

@keyframes pd-business-ring-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.pd-business-hub-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    border-radius: 15px;
    background: linear-gradient(145deg, #e277f2, #b73dce);
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 7px 20px rgba(216, 82, 237, 0.25);
}

.pd-business-hub>span {
    color: #b7a9c5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.pd-business-hub h3 {
    margin: 6px 0 8px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
}

.pd-business-hub p {
    margin: 0 0 13px;
    color: #b4a9c2;
    font-size: 10px;
    line-height: 1.6;
}

.pd-business-hub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #df9aee;
    font-size: 8px;
    white-space: nowrap;
}


/* =====================================================
   CONNECTION LINES
===================================================== */

.pd-business-connection {
    position: absolute;
    z-index: 1;
    width: 75px;
    height: 1px;
    border-top: 1px dashed rgba(216, 82, 237, 0.5);
}

.pd-business-connection::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d852ed;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.1);
}

.connection-one,
.connection-two,
.connection-three {
    left: -22px;
}

.connection-one {
    top: 28%;
}

.connection-two {
    top: 50%;
}

.connection-three {
    top: 72%;
}

.connection-four,
.connection-five,
.connection-six {
    right: -22px;
}

.connection-four {
    top: 28%;
}

.connection-five {
    top: 50%;
}

.connection-six {
    top: 72%;
}

.connection-one::after,
.connection-two::after,
.connection-three::after {
    right: -3px;
}

.connection-four::after,
.connection-five::after,
.connection-six::after {
    left: -3px;
}


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

.pd-business-workflow {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1.6fr;
    gap: 45px;
    align-items: center;
    margin-top: 30px;
    padding: 35px;
    border-radius: 22px;
    background: #f9f6fc;
}

.pd-business-small-label {
    display: block;
    margin-bottom: 13px;
    color: #d852ed;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.pd-business-workflow-intro h3 {
    margin: 0 0 14px;
    color: #30283a;
    font-size: 25px;
    line-height: 1.35;
    font-weight: 700;
}

.pd-business-workflow-intro h3 span {
    color: #d852ed;
}

.pd-business-workflow-intro p {
    margin: 0;
    color: #898094;
    font-size: 12px;
    line-height: 1.85;
}

.pd-business-workflow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pd-business-step {
    flex: 1;
    text-align: center;
}

.pd-business-step-number {
    display: block;
    margin-bottom: 12px;
    color: #c9bdcf;
    font-size: 10px;
    font-weight: 700;
}

.pd-business-step-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 43px;
    height: 43px;
    margin: 0 auto 13px;
    border: 1px solid #e9d8ef;
    border-radius: 13px;
    background: #ffffff;
    color: #d852ed;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(70, 40, 88, 0.04);
}

.pd-business-step h4 {
    margin: 0 0 7px;
    color: #3b3246;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.pd-business-step p {
    margin: 0;
    color: #9991a6;
    font-size: 11px;
    line-height: 1.6;
}

.pd-business-step-line {
    width: 20px;
    height: 1px;
    flex-shrink: 0;
    margin-top: 66px;
    border-top: 1px dashed #d9a6e4;
}


/* =====================================================
   BENEFITS
===================================================== */

.pd-business-benefits {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.pd-business-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 23px;
    border: 1px solid #ebe5f0;
    border-radius: 17px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.pd-business-benefit:hover {
    border-color: rgba(216, 82, 237, 0.4);
    box-shadow: 0 10px 28px rgba(67, 36, 86, 0.06);
}

.pd-business-benefit-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #f9eafd;
    color: #d852ed;
    font-size: 13px;
}

.pd-business-benefit h4 {
    margin: 0 0 7px;
    color: #332b3e;
    font-size: 12px;
    font-weight: 700;
}

.pd-business-benefit p {
    margin: 0;
    color: #9890a4;
    font-size: 11px;
    line-height: 1.7;
}


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

@media (max-width: 1199px) {

    .pd-business-connect-heading h2 {
        font-size: 37px;
    }

    .pd-business-connect-header {
        gap: 35px;
    }

    .pd-business-ecosystem {
        grid-template-columns: 1fr 235px 1fr;
        gap: 20px;
        padding: 25px;
    }

    .pd-business-tool-card {
        padding: 13px;
    }

    .pd-business-tool-icon {
        width: 36px;
        height: 36px;
    }

    .pd-business-hub {
        width: 190px;
        height: 190px;
    }

    .pd-business-hub-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
    }

    .pd-business-hub h3 {
        font-size: 17px;
    }

    .pd-business-hub-badge {
        font-size: 7px;
    }

    .pd-business-connection {
        width: 45px;
    }

    .connection-one,
    .connection-two,
    .connection-three {
        left: -8px;
    }

    .connection-four,
    .connection-five,
    .connection-six {
        right: -8px;
    }

}


/* Tablet */

@media (max-width: 991px) {

    .pd-business-connect-section {
        padding: 80px 0;
    }

    .pd-business-connect-header {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
    }

    .pd-business-connect-heading h2 {
        max-width: 650px;
        font-size: 35px;
    }

    .pd-business-connect-intro {
        max-width: 700px;
    }

    .pd-business-ecosystem {
        grid-template-columns: 1fr 220px 1fr;
        gap: 14px;
        padding: 20px;
    }

    .pd-business-tool-card {
        min-height: 125px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pd-business-tool-status {
        margin-left: 0;
    }

    .pd-business-hub {
        width: 175px;
        height: 175px;
    }

    .pd-business-hub>span {
        font-size: 7px;
    }

    .pd-business-hub h3 {
        font-size: 15px;
    }

    .pd-business-workflow {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pd-business-workflow-intro {
        max-width: 550px;
    }

    .pd-business-benefits {
        grid-template-columns: 1fr;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .pd-business-connect-section {
        padding: 60px 0;
    }

    .pd-business-connect-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .pd-business-connect-heading h2 {
        font-size: 29px;
    }

    .pd-business-connect-intro {
        padding-left: 17px;
    }

    .pd-business-connect-intro p {
        font-size: 13px;
        line-height: 1.8;
    }

    .pd-business-ecosystem {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 15px;
        border-radius: 20px;
    }

    .pd-business-tools {
        width: 100%;
        gap: 12px;
    }

    .pd-business-tool-card {
        min-height: auto;
        align-items: center;
        flex-wrap: nowrap;
        padding: 15px;
    }

    .pd-business-tool-card h4 {
        font-size: 12px;
    }

    .pd-business-tool-card p {
        font-size: 10px;
    }

    .pd-business-tool-status {
        margin-left: auto;
    }

    .pd-business-hub-area {
        order: -1;
        min-height: 245px;
        width: 100%;
    }

    .pd-business-hub {
        width: 195px;
        height: 195px;
    }

    .pd-business-connection {
        display: none;
    }

    .pd-business-workflow {
        padding: 25px 18px;
        border-radius: 18px;
    }

    .pd-business-workflow-intro h3 {
        font-size: 22px;
    }

    .pd-business-workflow-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 15px;
    }

    .pd-business-step-line {
        display: none;
    }

    .pd-business-step-number {
        margin-bottom: 9px;
    }

    .pd-business-step-icon {
        width: 40px;
        height: 40px;
    }

    .pd-business-step h4 {
        font-size: 11px;
    }

    .pd-business-benefit {
        padding: 18px;
    }

}


/* Small Mobile */

@media (max-width: 420px) {

    .pd-business-connect-heading h2 {
        font-size: 26px;
    }

    .pd-business-tool-card {
        gap: 10px;
    }

    .pd-business-tool-icon {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .pd-business-tool-card h4 {
        font-size: 11px;
    }

    .pd-business-tool-card p {
        font-size: 9px;
    }

    .pd-business-hub {
        width: 175px;
        height: 175px;
    }

    .pd-business-hub-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .pd-business-hub h3 {
        font-size: 16px;
    }

    .pd-business-hub p {
        font-size: 9px;
    }

}







/* =====================================================
   BALANCED OUTBOUND CALLING SECTION
===================================================== */

.balanced-outbound-section {
    position: relative;
    padding: 105px 0;
    background: #f8f6fc;
    overflow: hidden;
}

.balanced-outbound-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -180px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(216, 82, 237, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.balanced-outbound-section::after {
    content: "";
    position: absolute;
    right: -170px;
    bottom: -200px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(216, 82, 237, 0.1);
    border-radius: 50%;
    pointer-events: none;
}


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

.balanced-outbound-heading {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto 65px;
}

.balanced-outbound-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.balanced-outbound-eyebrow i {
    font-size: 14px;
}

.balanced-outbound-heading h2 {
    margin: 0 0 20px;
    color: #292332;
    font-size: 43px;
    line-height: 1.2;
    font-weight: 700;
}

.balanced-outbound-heading h2 span {
    color: #d852ed;
}

.balanced-outbound-heading p {
    margin: 0;
    color: #81798e;
    font-size: 15px;
    line-height: 1.9;
}


/* =====================================================
   MAIN BALANCE LAYOUT
===================================================== */

.balanced-outbound-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 310px 1fr;
    align-items: center;
    gap: 25px;
}


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

.balanced-outbound-side {
    position: relative;
    min-height: 360px;
    padding: 30px;
    border: 1px solid #e9e2ef;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(57, 34, 75, 0.055);
    overflow: hidden;
    transition: all 0.35s ease;
}

.balanced-outbound-side::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -55px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(216, 82, 237, 0.1);
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.balanced-outbound-side:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(57, 34, 75, 0.1);
}

.balanced-technology-side {
    border-top: 4px solid #d852ed;
}

.balanced-human-side {
    border-top: 4px solid #6c83e8;
}


/* Side Top */

.balanced-side-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.balanced-side-number {
    color: #cfc4d9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.balanced-side-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #f9eafd;
    color: #d852ed;
    font-size: 18px;
}

.balanced-human-side .balanced-side-icon {
    background: #eef0ff;
    color: #6c83e8;
}


/* Side Content */

.balanced-outbound-side h3 {
    margin: 0 0 14px;
    color: #30283b;
    font-size: 23px;
    font-weight: 700;
}

.balanced-outbound-side p {
    margin: 0 0 23px;
    color: #8e859b;
    font-size: 12px;
    line-height: 1.85;
}

.balanced-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.balanced-side-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    color: #62596f;
    font-size: 11px;
    line-height: 1.6;
}

.balanced-side-list li i {
    margin-top: 3px;
    color: #d852ed;
    font-size: 10px;
}

.balanced-human-side .balanced-side-list li i {
    color: #6c83e8;
}

.balanced-side-label {
    position: absolute;
    bottom: 25px;
    left: 30px;
    color: #c4b8cf;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}


/* =====================================================
   CENTRAL BALANCE VISUAL
===================================================== */

.balanced-outbound-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 440px;
    padding: 20px 0;
}

.balanced-center-orbit {
    position: absolute;
    top: 25px;
    width: 280px;
    height: 280px;
    border: 1px dashed rgba(216, 82, 237, 0.25);
    border-radius: 50%;
}

.orbit-one {
    transform: rotate(25deg) scaleY(0.45);
}

.orbit-two {
    transform: rotate(-25deg) scaleY(0.45);
    border-color: rgba(108, 131, 232, 0.25);
}


/* Balance Visual */

.balanced-balance-visual {
    position: relative;
    z-index: 2;
    width: 245px;
    height: 235px;
    margin-top: 20px;
}

.balanced-balance-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border: 1px solid #ead8ef;
    border-radius: 16px;
    background: #ffffff;
    color: #d852ed;
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(68, 37, 85, 0.08);
}

.balanced-balance-beam {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 80px;
}

.balanced-beam-left,
.balanced-beam-right {
    width: 88px;
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(90deg, #d852ed, #b9a4c5);
}

.balanced-beam-right {
    background: linear-gradient(90deg, #b9a4c5, #6c83e8);
}

.balanced-beam-center {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    border: 6px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(145deg, #d852ed, #a83dbd);
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.22);
}

.balanced-balance-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 38px;
}

.balanced-bottom-node {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #eadff0;
    border-radius: 14px;
    background: #ffffff;
    color: #b3a5bf;
    font-size: 16px;
    box-shadow: 0 7px 18px rgba(67, 38, 86, 0.06);
}

.balanced-bottom-node.active {
    border-color: #d5dafe;
    background: #eef0ff;
    color: #6c83e8;
}


/* Center Text */

.balanced-center-content {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    text-align: center;
}

.balanced-center-content>span {
    display: block;
    margin-bottom: 10px;
    color: #b0a2bb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.balanced-center-content h3 {
    margin: 0;
    color: #30283b;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

.balanced-center-content h3 strong {
    color: #d852ed;
    font-size: 20px;
}

.balanced-center-content p {
    margin: 12px 0 0;
    color: #958a9f;
    font-size: 10px;
    line-height: 1.6;
}


/* =====================================================
   STATEMENT SECTION
===================================================== */

.balanced-outbound-statement {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    padding: 28px 32px;
    border: 1px solid #e8d9ed;
    border-radius: 20px;
    background: linear-gradient(105deg, #fffaff, #f8f4fc);
}

.balanced-statement-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #d852ed;
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.18);
}

.balanced-statement-content {
    flex: 1;
}

.balanced-statement-content>span {
    display: block;
    margin-bottom: 8px;
    color: #b09dbb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.balanced-statement-content h3 {
    margin: 0 0 8px;
    color: #342b40;
    font-size: 21px;
    font-weight: 700;
}

.balanced-statement-content h3 span {
    color: #d852ed;
}

.balanced-statement-content p {
    max-width: 700px;
    margin: 0;
    color: #8c8298;
    font-size: 11px;
    line-height: 1.8;
}

.balanced-statement-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid #dcefe3;
    border-radius: 30px;
    background: #f2fff6;
    color: #56a777;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}


/* =====================================================
   BOTTOM BENEFITS
===================================================== */

.balanced-outbound-benefits {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.balanced-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 23px;
    border: 1px solid #e9e3ef;
    border-radius: 17px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.balanced-benefit-item:hover {
    border-color: rgba(216, 82, 237, 0.4);
    transform: translateY(-3px);
}

.balanced-benefit-item>i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #f9eafd;
    color: #d852ed;
    font-size: 14px;
}

.balanced-benefit-item h4 {
    margin: 0 0 7px;
    color: #342b40;
    font-size: 12px;
    font-weight: 700;
}

.balanced-benefit-item p {
    margin: 0;
    color: #978da3;
    font-size: 11px;
    line-height: 1.7;
}


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

@media (max-width: 1199px) {

    .balanced-outbound-heading h2 {
        font-size: 38px;
    }

    .balanced-outbound-layout {
        grid-template-columns: 1fr 250px 1fr;
        gap: 15px;
    }

    .balanced-outbound-side {
        padding: 24px;
    }

    .balanced-outbound-side h3 {
        font-size: 20px;
    }

    .balanced-balance-visual {
        transform: scale(0.9);
    }

    .balanced-center-content h3 {
        font-size: 19px;
    }

    .balanced-side-label {
        left: 24px;
    }

}


/* Tablet */

@media (max-width: 991px) {

    .balanced-outbound-section {
        padding: 80px 0;
    }

    .balanced-outbound-heading h2 {
        font-size: 35px;
    }

    .balanced-outbound-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .balanced-outbound-center {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 330px;
        padding: 0;
    }

    .balanced-outbound-side {
        grid-row: 2;
        min-height: 340px;
    }

    .balanced-balance-visual {
        margin-top: 0;
        transform: scale(0.85);
    }

    .balanced-center-content {
        margin-top: -35px;
    }

    .balanced-center-orbit {
        top: -35px;
    }

    .balanced-outbound-statement {
        align-items: flex-start;
    }

    .balanced-statement-badge {
        margin-left: auto;
    }

    .balanced-outbound-benefits {
        grid-template-columns: 1fr;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .balanced-outbound-section {
        padding: 60px 0;
    }

    .balanced-outbound-heading {
        margin-bottom: 40px;
    }

    .balanced-outbound-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .balanced-outbound-heading h2 {
        font-size: 29px;
    }

    .balanced-outbound-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .balanced-outbound-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .balanced-outbound-center {
        order: 1;
        width: 100%;
        min-height: 350px;
    }

    .balanced-technology-side {
        order: 2;
        width: 100%;
    }

    .balanced-human-side {
        order: 3;
        width: 100%;
    }

    .balanced-outbound-side {
        min-height: auto;
        padding: 25px;
    }

    .balanced-side-label {
        position: static;
        margin-top: 25px;
    }

    .balanced-center-orbit {
        top: 5px;
    }

    .balanced-balance-visual {
        margin-top: 10px;
        transform: scale(0.85);
    }

    .balanced-center-content {
        margin-top: -15px;
    }

    .balanced-outbound-statement {
        display: block;
        padding: 25px;
    }

    .balanced-statement-icon {
        margin-bottom: 18px;
    }

    .balanced-statement-content h3 {
        font-size: 20px;
    }

    .balanced-statement-content p {
        font-size: 11px;
    }

    .balanced-statement-badge {
        display: inline-flex;
        margin-top: 20px;
    }

    .balanced-outbound-benefits {
        gap: 12px;
    }

}


/* Small Mobile */

@media (max-width: 420px) {

    .balanced-outbound-heading h2 {
        font-size: 26px;
    }

    .balanced-outbound-side {
        padding: 21px;
    }

    .balanced-outbound-side h3 {
        font-size: 20px;
    }

    .balanced-balance-visual {
        transform: scale(0.75);
    }

    .balanced-center-content h3 {
        font-size: 18px;
    }

    .balanced-statement-content h3 {
        font-size: 18px;
    }

    .balanced-benefit-item {
        padding: 18px;
    }

}





/* =========================================
   ORGANIZED CALLING OPERATION SECTION
========================================= */

.organized-calling-section {
    position: relative;
    padding: 100px 0;
    background: #fbf8ff;
    overflow: hidden;
}

.organized-calling-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.07);
    top: -180px;
    right: -130px;
    pointer-events: none;
}

.organized-calling-section .container {
    position: relative;
    z-index: 2;
}

/* Section Heading */

.organized-calling-heading {
    max-width: 790px;
    margin: 0 auto 55px;
    text-align: center;
}

.organized-calling-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50px;
    color: #b43acb;
    background: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.organized-calling-label i {
    font-size: 13px;
}

.organized-calling-heading h2 {
    margin: 20px 0 18px;
    color: #20202d;
    font-size: 43px;
    line-height: 1.18;
    font-weight: 800;
}

.organized-calling-heading h2 span {
    color: #d852ed;
}

.organized-calling-heading p {
    max-width: 720px;
    margin: auto;
    color: #737383;
    font-size: 16px;
    line-height: 1.9;
}

/* Main Layout */

.organized-calling-layout {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 38px;
    align-items: stretch;
}

/* Left Content */

.organized-calling-content {
    padding: 36px 10px 30px 0;
}

.organized-calling-intro {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 35px;
}

.organized-calling-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(135deg, #d852ed, #a83bc3);
    box-shadow: 0 12px 28px rgba(216, 82, 237, 0.22);
}

.organized-calling-icon i {
    font-size: 22px;
}

.organized-calling-intro h3 {
    margin: 0 0 11px;
    color: #252433;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 750;
}

.organized-calling-intro p {
    margin: 0;
    color: #777585;
    font-size: 15px;
    line-height: 1.8;
}

/* Feature List */

.organized-calling-feature-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.organized-calling-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.organized-calling-feature>span {
    width: 27px;
    height: 27px;
    min-width: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    color: #d852ed;
    background: rgba(216, 82, 237, 0.11);
}

.organized-calling-feature>span i {
    font-size: 13px;
}

.organized-calling-feature h4 {
    margin: 0 0 6px;
    color: #282635;
    font-size: 17px;
    font-weight: 750;
}

.organized-calling-feature p {
    margin: 0;
    color: #81808e;
    font-size: 14px;
    line-height: 1.7;
}

/* Operations Blueprint */

.organized-calling-blueprint {
    padding: 30px;
    border: 1px solid rgba(216, 82, 237, 0.16);
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(45, 20, 60, 0.08);

    transition: all 0.3s ease;
}

.organized-calling-blueprint:hover {

    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.organized-blueprint-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 23px;
    border-bottom: 1px solid #f0eaf4;
}

.organized-blueprint-top small {
    display: block;
    margin-bottom: 8px;
    color: #b43acb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.organized-blueprint-top h3 {
    margin: 0;
    color: #252433;
    font-size: 23px;
    font-weight: 800;
}

.organized-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 30px;
    color: #6b5d70;
    background: #faf4fc;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.organized-live-status i {
    color: #45b987;
    font-size: 7px;
}

/* Process Flow */

.organized-process-flow {
    padding: 25px 0 5px;
}

.organized-process-step {
    display: grid;
    grid-template-columns: 32px 48px 1fr;
    gap: 13px;
    align-items: center;
}

.organized-step-number {
    color: #bcb2c2;
    font-size: 11px;
    font-weight: 800;
}

.organized-step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 14px;
    color: #d852ed;
    background: #fff8ff;
}

.organized-step-icon i {
    font-size: 18px;
}

.organized-step-content h4 {
    margin: 0 0 5px;
    color: #2b2838;
    font-size: 15px;
    font-weight: 750;
}

.organized-step-content p {
    margin: 0;
    color: #898493;
    font-size: 12px;
    line-height: 1.6;
}

.organized-process-line {
    width: 1px;
    height: 25px;
    margin: 5px 0 5px 55px;
    border-left: 1px dashed #d9b4e1;
}

/* Blueprint Footer */

.organized-blueprint-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    padding: 15px 16px;
    border-radius: 13px;
    color: #8a4a96;
    background: #fff6ff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

.organized-blueprint-footer i {
    color: #d852ed;
    font-size: 15px;
}

/* Bottom Benefits */

.organized-calling-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 38px;
    padding: 23px;
    border: 1px solid #eee3f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(48, 20, 60, 0.04);
}

.organized-benefit-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 5px 15px;
    border-right: 1px solid #eee8f1;
}

.organized-benefit-item:last-child {
    border-right: none;
}

.organized-benefit-item>i {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #d852ed;
    background: #fff3ff;
    font-size: 16px;
}

.organized-benefit-item strong {
    display: block;
    margin-bottom: 4px;
    color: #302c3a;
    font-size: 13px;
    font-weight: 750;
}

.organized-benefit-item span {
    display: block;
    color: #96909d;
    font-size: 11px;
    line-height: 1.5;
}

/* Hover Effects */

.organized-calling-feature {
    transition: transform 0.3s ease;
}

.organized-calling-feature:hover {
    transform: translateX(6px);
}

.organized-step-icon {
    transition: all 0.3s ease;
}

.organized-process-step:hover .organized-step-icon {
    color: #ffffff;
    background: #d852ed;
    border-color: #d852ed;
    transform: translateY(-3px);
}

.organized-benefit-item {
    transition: transform 0.3s ease;
}

.organized-benefit-item:hover {
    transform: translateY(-3px);
}

/* Responsive Design */

@media (max-width: 991px) {

    .organized-calling-section {
        padding: 75px 0;
    }

    .organized-calling-heading h2 {
        font-size: 36px;
    }

    .organized-calling-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .organized-calling-content {
        padding: 0;
    }

    .organized-calling-blueprint {
        max-width: 700px;
        width: 100%;
        margin: auto;
    }

    .organized-calling-benefits {
        grid-template-columns: 1fr;
    }

    .organized-benefit-item {
        border-right: none;
        border-bottom: 1px solid #eee8f1;
        padding: 12px 8px;
    }

    .organized-benefit-item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 575px) {

    .organized-calling-section {
        padding: 55px 0;
    }

    .organized-calling-heading {
        margin-bottom: 35px;
    }

    .organized-calling-heading h2 {
        font-size: 29px;
    }

    .organized-calling-heading p {
        font-size: 14px;
        line-height: 1.75;
    }

    .organized-calling-label {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .organized-calling-intro {
        gap: 12px;
    }

    .organized-calling-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 13px;
    }

    .organized-calling-intro h3 {
        font-size: 20px;
    }

    .organized-calling-intro p {
        font-size: 14px;
    }

    .organized-calling-blueprint {
        padding: 21px 17px;
        border-radius: 19px;
    }

    .organized-blueprint-top h3 {
        font-size: 20px;
    }

    .organized-live-status {
        padding: 6px 8px;
        font-size: 9px;
    }

    .organized-process-step {
        grid-template-columns: 24px 42px 1fr;
        gap: 9px;
    }

    .organized-step-icon {
        width: 42px;
        height: 42px;
    }

    .organized-step-content h4 {
        font-size: 13px;
    }

    .organized-step-content p {
        font-size: 11px;
    }

    .organized-process-line {
        margin-left: 45px;
    }

    .organized-blueprint-footer {
        align-items: flex-start;
        font-size: 11px;
    }

    .organized-calling-benefits {
        padding: 15px;
    }
}



/* =====================================================
   PREVIEW DIALER CUSTOMER CONTEXT SECTION
===================================================== */

.preview-context-section {
    position: relative;
    padding: 105px 0;
    background: #f7f8fc;
    overflow: hidden;
}

.preview-context-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -150px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(216, 82, 237, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.preview-context-section::after {
    content: "";
    position: absolute;
    bottom: -230px;
    left: -180px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
    pointer-events: none;
}


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

.preview-context-heading {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.preview-context-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.preview-context-eyebrow i {
    font-size: 14px;
}

.preview-context-heading h2 {
    margin: 0 0 20px;
    color: #262331;
    font-size: 43px;
    line-height: 1.25;
    font-weight: 700;
}

.preview-context-heading h2 span {
    color: #d852ed;
}

.preview-context-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: #7d778b;
    font-size: 15px;
    line-height: 1.95;
}


/* =====================================================
   MAIN WORKSPACE
===================================================== */

.preview-context-workspace {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 24px;
    padding: 25px;

    border: 1px solid #e8e4ef;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgba(51, 37, 70, 0.07);

    /* Hover Transition */
    transition: all 0.3s ease;
}

/* Pink Outline + Move + Shadow */
.preview-context-workspace:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}


/* =====================================================
   CUSTOMER PROFILE PANEL
===================================================== */

.preview-customer-panel {
    padding: 27px;
    border-radius: 20px;
    background: #292235;
    color: #ffffff;
}

.preview-panel-header,
.preview-preparation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.preview-panel-header {
    margin-bottom: 28px;
}

.preview-panel-header span,
.preview-preparation-header>div:first-child>span {
    display: block;
    margin-bottom: 8px;
    color: #a7a0b9;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.preview-panel-header h3,
.preview-preparation-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.preview-panel-header h3 {
    color: #ffffff;
}

.preview-profile-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #aaa1b9;
    font-size: 12px;
}


/* Profile Identity */

.preview-profile-identity {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-profile-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: 3px solid rgba(216, 82, 237, 0.25);
    border-radius: 20px;
    background: linear-gradient(145deg, #e38af2, #b345c8);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.preview-profile-details h4 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.preview-profile-details p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: #aaa2b8;
    font-size: 10px;
}

.preview-profile-details p i {
    color: #d98bea;
}

.preview-profile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 20px;
    background: rgba(245, 181, 88, 0.12);
    color: #f1bf75;
    font-size: 9px;
}

.preview-profile-status i {
    font-size: 6px;
}


/* Contact Information */

.preview-contact-information {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.preview-info-row:last-child {
    margin-bottom: 0;
}

.preview-info-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.13);
    color: #d98bea;
    font-size: 12px;
}

.preview-info-row small {
    display: block;
    margin-bottom: 5px;
    color: #92889f;
    font-size: 9px;
}

.preview-info-row strong {
    display: block;
    color: #e9e3f0;
    font-size: 11px;
    font-weight: 500;
    word-break: break-word;
}


/* Interest Box */

.preview-interest-box {
    margin-top: 24px;
    padding: 17px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 14px;
    background: rgba(216, 82, 237, 0.07);
}

.preview-box-label {
    display: block;
    margin-bottom: 13px;
    color: #9e92ac;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.preview-interest-content {
    display: flex;
    align-items: center;
    gap: 11px;
}

.preview-interest-content>i {
    color: #d98bea;
    font-size: 17px;
}

.preview-interest-content strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
}

.preview-interest-content small {
    display: block;
    color: #a89eb5;
    font-size: 9px;
}


/* =====================================================
   PREPARATION PANEL
===================================================== */

.preview-preparation-panel {
    min-width: 0;
    padding: 12px 8px 8px;
}

.preview-preparation-header {
    margin-bottom: 28px;
}

.preview-preparation-header h3 {
    color: #2e2739;
    font-size: 22px;
}

.preview-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #cdeedb;
    border-radius: 20px;
    background: #f0fcf5;
    color: #4fa877;
    font-size: 10px;
    white-space: nowrap;
}

.preview-ready-badge i {
    font-size: 12px;
}


/* Preparation Progress */

.preview-preparation-progress {
    padding: 20px;
    border: 1px solid #eee8f3;
    border-radius: 15px;
    background: #fbf9fd;
    margin-bottom: 20px;
}

.preview-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #63596f;
    font-size: 11px;
}

.preview-progress-top strong {
    color: #d852ed;
    font-size: 13px;
}

.preview-progress-track {
    width: 100%;
    height: 7px;
    margin-bottom: 11px;
    border-radius: 10px;
    background: #eadff0;
    overflow: hidden;
}

.preview-progress-fill {
    width: 85%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #bd4bd2, #e28af1);
}

.preview-preparation-progress p {
    margin: 0;
    color: #9990a5;
    font-size: 11px;
    line-height: 1.7;
}


/* =====================================================
   INFORMATION CHECKLIST
===================================================== */

.preview-information-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 22px;
}

.preview-information-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    border: 1px solid #eee8f3;
    border-radius: 13px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.preview-information-item:hover {
    border-color: rgba(216, 82, 237, 0.4);
    background: #fdfaff;
}

.preview-check-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #f5e4fa;
    color: #d852ed;
    font-size: 10px;
}

.preview-information-item>div {
    min-width: 0;
    flex: 1;
}

.preview-information-item h4 {
    margin: 0 0 5px;
    color: #393043;
    font-size: 11px;
    font-weight: 700;
}

.preview-information-item p {
    margin: 0;
    color: #9990a5;
    font-size: 10px;
    line-height: 1.6;
}

.preview-item-tag {
    padding: 5px 7px;
    border-radius: 6px;
    background: #f5f2f8;
    color: #9b91a8;
    font-size: 8px;
    white-space: nowrap;
}


/* =====================================================
   CALL ACTION
===================================================== */

.preview-call-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 17px;
    border-radius: 15px;
    background: #292235;
}

.preview-call-action-info {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.preview-call-action-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(216, 82, 237, 0.17);
    color: #e08af1;
    font-size: 13px;
}

.preview-call-action-info strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
}

.preview-call-action-info small {
    display: block;
    color: #a69caf;
    font-size: 9px;
}

.preview-start-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 16px;
    border-radius: 9px;
    background: #d852ed;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.preview-start-call-btn:hover {
    background: #b83ed0;
    color: #ffffff;
    transform: translateY(-2px);
}

.preview-start-call-btn i {
    font-size: 9px;
}


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

.preview-context-features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.preview-context-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 23px;
    border: 1px solid #e9e4ef;
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.preview-context-feature:hover {
    border-color: rgba(216, 82, 237, 0.45);
    box-shadow: 0 12px 28px rgba(60, 36, 78, 0.06);
    transform: translateY(-3px);
}

.preview-feature-number {
    color: #d852ed;
    font-size: 14px;
    font-weight: 700;
}

.preview-context-feature h4 {
    margin: 0 0 7px;
    color: #332b3d;
    font-size: 12px;
    font-weight: 700;
}

.preview-context-feature p {
    margin: 0;
    color: #9890a4;
    font-size: 11px;
    line-height: 1.7;
}


/* =====================================================
   BOTTOM MESSAGE
===================================================== */

.preview-context-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    max-width: 800px;
    margin: 32px auto 0;
    text-align: center;
}

.preview-bottom-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 14px;
}

.preview-context-bottom p {
    margin: 0;
    color: #8b8298;
    font-size: 12px;
    line-height: 1.8;
}

.preview-context-bottom strong {
    color: #d852ed;
    font-weight: 700;
}


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

@media (max-width: 1199px) {

    .preview-context-heading h2 {
        font-size: 38px;
    }

    .preview-context-workspace {
        grid-template-columns: 0.9fr 1.1fr;
        padding: 20px;
        gap: 18px;
    }

    .preview-customer-panel {
        padding: 22px;
    }

    .preview-preparation-panel {
        padding: 8px 3px;
    }

    .preview-information-item {
        padding: 11px;
    }

    .preview-item-tag {
        display: none;
    }

}


@media (max-width: 991px) {

    .preview-context-section {
        padding: 80px 0;
    }

    .preview-context-heading h2 {
        font-size: 35px;
    }

    .preview-context-workspace {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .preview-customer-panel {
        padding: 25px;
    }

    .preview-contact-information {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .preview-info-row {
        margin-bottom: 0;
        align-items: flex-start;
    }

    .preview-interest-box {
        margin-top: 25px;
    }

    .preview-preparation-panel {
        padding: 10px;
    }

    .preview-context-features {
        grid-template-columns: 1fr;
    }

    .preview-context-feature {
        padding: 20px;
    }

}


@media (max-width: 767px) {

    .preview-context-section {
        padding: 60px 0;
    }

    .preview-context-heading {
        margin-bottom: 35px;
    }

    .preview-context-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .preview-context-heading h2 {
        font-size: 29px;
    }

    .preview-context-heading p {
        font-size: 13px;
        line-height: 1.85;
    }

    .preview-context-workspace {
        padding: 12px;
        border-radius: 19px;
    }

    .preview-customer-panel {
        padding: 20px;
    }

    .preview-panel-header h3 {
        font-size: 16px;
    }

    .preview-profile-avatar {
        width: 55px;
        height: 55px;
        border-radius: 17px;
        font-size: 17px;
    }

    .preview-profile-details h4 {
        font-size: 15px;
    }

    .preview-contact-information {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .preview-info-row {
        margin-bottom: 0;
    }

    .preview-preparation-panel {
        padding: 5px;
    }

    .preview-preparation-header {
        display: block;
    }

    .preview-preparation-header h3 {
        font-size: 20px;
    }

    .preview-ready-badge {
        margin-top: 14px;
    }

    .preview-preparation-progress {
        padding: 16px;
    }

    .preview-information-item {
        gap: 9px;
    }

    .preview-information-item p {
        font-size: 9px;
    }

    .preview-call-action {
        display: block;
        padding: 17px;
    }

    .preview-call-action-info {
        margin-bottom: 15px;
    }

    .preview-start-call-btn {
        width: 100%;
    }

    .preview-context-feature {
        padding: 18px;
    }

    .preview-context-bottom {
        align-items: flex-start;
        text-align: left;
    }

    .preview-context-bottom p {
        font-size: 11px;
    }

}


@media (max-width: 420px) {

    .preview-context-heading h2 {
        font-size: 26px;
    }

    .preview-customer-panel {
        padding: 17px;
    }

    .preview-profile-identity {
        gap: 11px;
    }

    .preview-profile-avatar {
        width: 48px;
        height: 48px;
        font-size: 15px;
    }

    .preview-profile-details h4 {
        font-size: 14px;
    }

    .preview-profile-details p {
        font-size: 9px;
    }

    .preview-information-item h4 {
        font-size: 10px;
    }

    .preview-information-item p {
        font-size: 9px;
    }

    .preview-check-icon {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }

}





/* =====================================================
   PREVIEW DIALING WORKFLOW SECTION
===================================================== */

.preview-workflow-section {
    position: relative;
    padding: 105px 0;
    background: #f8f7fc;
    overflow: hidden;
}

.preview-workflow-section::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -150px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(216, 82, 237, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.preview-workflow-section::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -180px;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(216, 82, 237, 0.09);
    border-radius: 50%;
    pointer-events: none;
}


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

.preview-workflow-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: end;
    gap: 60px;
    margin-bottom: 55px;
}

.preview-workflow-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.preview-workflow-eyebrow i {
    font-size: 14px;
}

.preview-workflow-title-area h2 {
    max-width: 650px;
    margin: 0;
    color: #272131;
    font-size: 43px;
    line-height: 1.2;
    font-weight: 700;
}

.preview-workflow-title-area h2 span {
    color: #d852ed;
}

.preview-workflow-heading>p {
    margin: 0;
    padding-left: 24px;
    border-left: 3px solid #d852ed;
    color: #81798e;
    font-size: 15px;
    line-height: 1.95;
}


/* =====================================================
   PREPARATION DESK
===================================================== */

.preview-preparation-desk {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.05fr 0.9fr;
    gap: 18px;
    padding: 28px;

    border: 1px solid #e8e1ef;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(53, 34, 72, 0.07);

    /* Hover Transition */
    transition: all 0.3s ease;
}

/* Pink Outline + Move + Shadow */
.preview-preparation-desk:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.preview-panel-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: #a098ad;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.preview-panel-label>span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 9px;
}


/* =====================================================
   CONTACT PREVIEW
===================================================== */

.preview-contact-area,
.preview-review-area,
.preview-summary-area {
    min-width: 0;
}

.preview-contact-card {
    height: calc(100% - 38px);
    padding: 22px;
    border: 1px solid #ece5f2;
    border-radius: 17px;
    background: #fcfbfe;
}

.preview-contact-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.preview-contact-tag {
    padding: 6px 10px;
    border-radius: 20px;
    background: #f5e5fa;
    color: #b544ca;
    font-size: 9px;
    font-weight: 700;
}

.preview-contact-top>i {
    color: #aaa0b5;
    font-size: 13px;
}

.preview-contact-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee8f3;
}

.preview-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, #eaa1f5, #c04bd5);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.preview-contact-profile h3 {
    margin: 0 0 6px;
    color: #30283b;
    font-size: 15px;
    font-weight: 700;
}

.preview-contact-profile p {
    margin: 0;
    color: #9990a6;
    font-size: 10px;
    line-height: 1.5;
}


/* Contact Details */

.preview-contact-details {
    padding: 20px 0;
    border-bottom: 1px solid #eee8f3;
}

.preview-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
}

.preview-detail-row:last-child {
    margin-bottom: 0;
}

.preview-detail-row>i {
    width: 15px;
    padding-top: 3px;
    color: #d852ed;
    font-size: 12px;
}

.preview-detail-row small {
    display: block;
    margin-bottom: 5px;
    color: #aaa1b4;
    font-size: 9px;
}

.preview-detail-row strong {
    display: block;
    color: #51475c;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}


/* Previous Note */

.preview-contact-note {
    padding: 18px 0;
}

.preview-contact-note>span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #70647f;
    font-size: 10px;
    font-weight: 700;
}

.preview-contact-note>span i {
    color: #d852ed;
}

.preview-contact-note p {
    margin: 0;
    color: #9990a6;
    font-size: 10px;
    line-height: 1.8;
}

.preview-contact-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 15px;
    border-top: 1px dashed #e5dce9;
}

.preview-contact-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa0b4;
    font-size: 9px;
}

.preview-contact-footer span i {
    color: #d852ed;
}

.preview-contact-footer>i {
    color: #d852ed;
    font-size: 11px;
}


/* =====================================================
   AGENT REVIEW CARD
===================================================== */

.preview-review-card {
    height: calc(100% - 38px);
    padding: 23px;
    border-radius: 17px;
    background: linear-gradient(150deg, #292136, #1d1827);
    box-shadow: 0 15px 35px rgba(36, 23, 49, 0.12);
}

.preview-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-review-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.18);
    color: #e68df4;
    font-size: 15px;
}

.preview-review-header h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.preview-review-header p {
    margin: 0;
    color: #a59ab4;
    font-size: 10px;
}


/* Checklist */

.preview-review-checklist {
    padding: 25px 0;
}

.preview-check-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 23px;
}

.preview-check-item:last-child {
    margin-bottom: 0;
}

.preview-check-item>span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1px solid #71647e;
    border-radius: 50%;
    color: #92849f;
    font-size: 8px;
}

.preview-check-item.completed>span {
    border-color: #62d99a;
    background: #62d99a;
    color: #1e3029;
}

.preview-check-item strong {
    display: block;
    margin-bottom: 5px;
    color: #eee8f3;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.preview-check-item small {
    display: block;
    color: #968aa5;
    font-size: 9px;
    line-height: 1.5;
}


/* Review Status */

.preview-review-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 11px 12px;
    border: 1px solid rgba(104, 222, 156, 0.16);
    border-radius: 9px;
    background: rgba(104, 222, 156, 0.07);
}

.preview-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #65d99a;
    box-shadow: 0 0 0 4px rgba(101, 217, 154, 0.1);
}

.preview-review-status span {
    color: #8de3b0;
    font-size: 9px;
}


/* Ready Button */

.preview-ready-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 13px 15px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #d852ed, #bd49d1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preview-ready-button:hover {
    background: linear-gradient(90deg, #be43d3, #a83abd);
    box-shadow: 0 7px 20px rgba(216, 82, 237, 0.22);
}

.preview-ready-button i {
    font-size: 10px;
}

.preview-review-note {
    display: block;
    margin-top: 13px;
    color: #8f829d;
    font-size: 9px;
    line-height: 1.6;
    text-align: center;
}


/* =====================================================
   CALL SUMMARY
===================================================== */

.preview-summary-card {
    height: calc(100% - 38px);
    padding: 22px;
    border: 1px solid #e9e1f0;
    border-radius: 17px;
    background: #ffffff;
}

.preview-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.preview-summary-top span {
    color: #a39aac;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.preview-summary-top i {
    color: #d852ed;
    font-size: 14px;
}

.preview-summary-card h3 {
    margin: 0 0 13px;
    color: #32293d;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.preview-summary-card>p {
    margin: 0;
    color: #93899f;
    font-size: 10px;
    line-height: 1.85;
}

.preview-summary-divider {
    margin: 24px 0 20px;
    border-top: 1px dashed #e6ddea;
}

.preview-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
}

.preview-summary-row span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92879e;
    font-size: 10px;
}

.preview-summary-row span i {
    width: 13px;
    color: #d852ed;
    font-size: 11px;
}

.preview-summary-row strong {
    color: #4e4359;
    font-size: 10px;
    font-weight: 700;
}

.preview-summary-bottom {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 23px;
    padding: 13px;
    border-radius: 10px;
    background: #fcf3ff;
}

.preview-summary-bottom i {
    padding-top: 2px;
    color: #d852ed;
    font-size: 11px;
}

.preview-summary-bottom span {
    color: #a05eb0;
    font-size: 9px;
    line-height: 1.65;
}


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

.preview-workflow-path {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    padding: 35px 30px;
    border-radius: 23px;
    background: #24202f;
    overflow: hidden;
}

.preview-workflow-path::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -80px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 50%;
}

.preview-path-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 35px;
    text-align: center;
}

.preview-path-heading>span {
    display: block;
    margin-bottom: 10px;
    color: #c28bcf;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.preview-path-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
}

.preview-path-heading h3 strong {
    color: #e38af2;
    font-weight: 600;
}


/* Sequence Items */

.preview-sequence {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.preview-sequence-item {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.preview-sequence-number {
    display: block;
    margin-bottom: 12px;
    color: #756b82;
    font-size: 9px;
    font-weight: 700;
}

.preview-sequence-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 43px;
    height: 43px;
    margin: 0 auto 13px;
    border: 1px solid #55485f;
    border-radius: 13px;
    background: #30283d;
    color: #a89aae;
    font-size: 13px;
    transition: all 0.3s ease;
}

.preview-sequence-item.active .preview-sequence-icon {
    border-color: rgba(216, 82, 237, 0.6);
    background: rgba(216, 82, 237, 0.13);
    color: #df83ef;
}

.preview-sequence-item:hover .preview-sequence-icon {
    border-color: #d852ed;
    background: #d852ed;
    color: #ffffff;
}

.preview-sequence-item h4 {
    margin: 0 0 7px;
    color: #e8e0ed;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.preview-sequence-item p {
    margin: 0;
    color: #8d819b;
    font-size: 9px;
    line-height: 1.6;
}

.preview-sequence-connector {
    width: 22px;
    height: 1px;
    flex-shrink: 0;
    margin-top: 77px;
    border-top: 1px dashed #66546e;
}


/* =====================================================
   BOTTOM MESSAGE
===================================================== */

.preview-workflow-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    padding: 27px 30px;
    border: 1px solid #eadff0;
    border-radius: 19px;
    background: #ffffff;
}

.preview-bottom-symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #faeafd;
    color: #d852ed;
    font-size: 18px;
}

.preview-bottom-content {
    flex: 1;
}

.preview-bottom-content h3 {
    margin: 0 0 8px;
    color: #32293c;
    font-size: 17px;
    font-weight: 700;
}

.preview-bottom-content p {
    max-width: 750px;
    margin: 0;
    color: #93899f;
    font-size: 11px;
    line-height: 1.8;
}

.preview-bottom-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid #dff2e6;
    border-radius: 20px;
    background: #f3fcf6;
    color: #5caa7c;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.preview-bottom-badge i {
    font-size: 10px;
}


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

@media (max-width: 1199px) {

    .preview-workflow-heading {
        gap: 35px;
    }

    .preview-workflow-title-area h2 {
        font-size: 37px;
    }

    .preview-preparation-desk {
        grid-template-columns: 1fr 1fr;
        padding: 22px;
    }

    .preview-summary-area {
        grid-column: 1 / -1;
    }

    .preview-summary-card {
        height: auto;
    }

    .preview-summary-card>p {
        max-width: 600px;
    }

    .preview-summary-bottom {
        max-width: 500px;
    }

    .preview-summary-divider {
        margin: 18px 0;
    }

    .preview-summary-row {
        display: inline-flex;
        margin-right: 35px;
    }

    .preview-summary-bottom {
        margin-top: 15px;
    }

    .preview-sequence-connector {
        width: 13px;
    }

}


/* Tablet */

@media (max-width: 991px) {

    .preview-workflow-section {
        padding: 80px 0;
    }

    .preview-workflow-heading {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
    }

    .preview-workflow-title-area h2 {
        font-size: 35px;
    }

    .preview-preparation-desk {
        grid-template-columns: 1fr 1fr;
    }

    .preview-contact-card,
    .preview-review-card {
        height: auto;
    }

    .preview-summary-area {
        grid-column: auto;
    }

    .preview-summary-row {
        display: flex;
        margin-right: 0;
    }

    .preview-workflow-path {
        padding: 30px 20px;
    }

    .preview-sequence {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 10px;
    }

    .preview-sequence-connector {
        display: none;
    }

    .preview-workflow-bottom {
        flex-wrap: wrap;
    }

    .preview-bottom-content {
        min-width: 70%;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .preview-workflow-section {
        padding: 60px 0;
    }

    .preview-workflow-title-area h2 {
        font-size: 29px;
    }

    .preview-workflow-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .preview-workflow-heading>p {
        padding-left: 17px;
        font-size: 13px;
        line-height: 1.85;
    }

    .preview-preparation-desk {
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding: 16px;
        border-radius: 20px;
    }

    .preview-panel-label {
        margin-bottom: 13px;
    }

    .preview-contact-card,
    .preview-review-card,
    .preview-summary-card {
        height: auto;
    }

    .preview-contact-card,
    .preview-review-card,
    .preview-summary-card {
        padding: 19px;
    }

    .preview-review-card {
        border-radius: 16px;
    }

    .preview-summary-card h3 {
        font-size: 18px;
    }

    .preview-summary-row {
        margin-bottom: 15px;
    }

    .preview-workflow-path {
        margin-top: 20px;
        padding: 28px 16px;
        border-radius: 18px;
    }

    .preview-path-heading h3 {
        font-size: 21px;
        line-height: 1.45;
    }

    .preview-sequence {
        grid-template-columns: 1fr 1fr;
        gap: 28px 12px;
    }

    .preview-sequence-icon {
        width: 40px;
        height: 40px;
    }

    .preview-sequence-item h4 {
        font-size: 11px;
    }

    .preview-sequence-item p {
        font-size: 9px;
    }

    .preview-workflow-bottom {
        align-items: flex-start;
        gap: 15px;
        padding: 22px;
        border-radius: 17px;
    }

    .preview-bottom-symbol {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .preview-bottom-content {
        min-width: 0;
    }

    .preview-bottom-content h3 {
        font-size: 15px;
        line-height: 1.5;
    }

    .preview-bottom-content p {
        font-size: 10px;
    }

    .preview-bottom-badge {
        margin-left: 57px;
        white-space: normal;
        line-height: 1.5;
    }

}


/* Small Mobile */

@media (max-width: 420px) {

    .preview-workflow-title-area h2 {
        font-size: 26px;
    }

    .preview-contact-profile h3 {
        font-size: 14px;
    }

    .preview-contact-card,
    .preview-review-card,
    .preview-summary-card {
        padding: 16px;
    }

    .preview-sequence {
        gap: 25px 8px;
    }

    .preview-sequence-icon {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .preview-sequence-item h4 {
        font-size: 10px;
    }

    .preview-bottom-badge {
        margin-left: 0;
    }

}






/* =========================================
   CALLING CONTROL FRAMEWORK
   OVERLAP-FREE VERSION
========================================= */

.control-framework-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #fbf9ff;
}

.control-framework-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -160px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
    pointer-events: none;
}

.control-framework-section .container {
    position: relative;
    z-index: 1;
}

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

.control-framework-heading {
    max-width: 790px;
    margin: 0 auto 60px;
    text-align: center;
}

.control-framework-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    margin-bottom: 17px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 40px;
    background: #ffffff;
    color: #b13bc9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.control-framework-heading h2 {
    margin: 0;
    color: #252131;
    font-size: 41px;
    font-weight: 800;
    line-height: 1.2;
}

.control-framework-heading h2 span {
    display: block;
    color: #d852ed;
}

.control-framework-heading p {
    max-width: 680px;
    margin: 21px auto 0;
    color: #85808f;
    font-size: 14px;
    line-height: 1.9;
}

/* =========================================
   MAIN FRAMEWORK GRID
========================================= */

.control-framework {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 30px;
    align-items: center;
    max-width: 1160px;
    margin: 0 auto;
}

/* =========================================
   USE CASE CARDS
========================================= */

.framework-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 23px;
    border: 1px solid #e9e1ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(53, 30, 74, 0.05);
    transition: all 0.3s ease;
    z-index: 2;
}

.framework-card:hover {
    border-color: #D852ED;
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.framework-card-number {
    position: absolute;
    top: 14px;
    right: 17px;
    color: #e2d5e8;
    font-size: 11px;
    font-weight: 800;
}

.framework-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #f8e9fc;
    color: #c142db;
    font-size: 14px;
}

.framework-card h4 {
    margin: 0 20px 8px 0;
    color: #30273a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.framework-card p {
    margin: 0;
    color: #8d8596;
    font-size: 11px;
    line-height: 1.8;
}

/* =========================================
   CARD GRID POSITIONS
========================================= */

/* High-Value Leads */
.framework-card-one {
    grid-column: 1;
    grid-row: 1;
}

/* Follow-Up Calls */
.framework-card-two {
    grid-column: 3;
    grid-row: 1;
}

/* Complex Sales */
.framework-card-three {
    grid-column: 1;
    grid-row: 3;
}

/* Customer Retention */
.framework-card-four {
    grid-column: 3;
    grid-row: 3;
}

/* Collections */
.framework-card-five {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    justify-self: stretch;
}

/* =========================================
   CENTER PREVIEW DIALER
========================================= */

.framework-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 100%;
    min-height: 365px;
    z-index: 3;
}

/* Decorative Rings */

.framework-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(216, 82, 237, 0.3);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.framework-orbit-one {
    width: 310px;
    height: 310px;
}

.framework-orbit-two {
    width: 365px;
    height: 365px;
    border-color: rgba(216, 82, 237, 0.16);
}

/* Center Content */

.framework-center-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 310px;
    padding: 34px 26px;
    border: 1px solid rgba(216, 82, 237, 0.28);
    border-radius: 25px;
    background: linear-gradient(145deg, #30233b, #211c2c);
    box-shadow: 0 20px 55px rgba(42, 25, 54, 0.2);
    text-align: center;
}

.framework-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin: 0 auto 19px;
    border-radius: 17px;
    background: linear-gradient(135deg, #e46af5, #b63bd1);
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 8px 22px rgba(216, 82, 237, 0.25);
}

.framework-center-box>span {
    display: block;
    margin-bottom: 12px;
    color: #cbb5d3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.framework-center-box h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.framework-center-box h3 strong {
    display: block;
    color: #e36af4;
    font-weight: 800;
}

.framework-center-box p {
    margin: 16px 0 20px;
    color: #c0b2c8;
    font-size: 11px;
    line-height: 1.8;
}

.framework-center-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 17px;
    border-top: 1px solid #51415c;
}

.framework-center-flow span {
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
}

.framework-center-flow i {
    color: #d852ed;
    font-size: 9px;
}

/* =========================================
   CONNECTING LINES
========================================= */

.framework-connector {
    position: absolute;
    display: block;
    background: #dfb5e9;
    z-index: 1;
    pointer-events: none;
}

/* Left Top Connection */
.connector-one {
    top: 24%;
    left: 24%;
    width: 10%;
    height: 1px;
}

/* Right Top Connection */
.connector-two {
    top: 24%;
    right: 24%;
    width: 10%;
    height: 1px;
}

/* Left Bottom Connection */
.connector-three {
    bottom: 24%;
    left: 24%;
    width: 10%;
    height: 1px;
}

/* Right Bottom Connection */
.connector-four {
    right: 24%;
    bottom: 24%;
    width: 10%;
    height: 1px;
}

/* Vertical Center Connections */
.connector-five {
    top: 30%;
    left: 50%;
    width: 1px;
    height: 12%;
}

.connector-six {
    bottom: 30%;
    left: 50%;
    width: 1px;
    height: 12%;
}

/* =========================================
   BOTTOM WORKFLOW BAR
========================================= */

.framework-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 950px;
    margin: 45px auto 0;
    padding: 22px 25px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(53, 30, 74, 0.04);
}

.framework-bottom-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4d4057;
    font-size: 11px;
    font-weight: 800;
}

.framework-bottom-item i {
    color: #d852ed;
    font-size: 13px;
}

.framework-bottom-arrow {
    color: #d6a1e2;
    font-size: 12px;
}

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

@media (max-width: 1199px) {

    .control-framework {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 1.1fr) minmax(0, 1fr);
        gap: 20px;
    }

    .framework-card {
        padding: 18px;
    }

    .framework-card p {
        font-size: 10px;
    }

    .framework-center {
        min-height: 340px;
    }

    .framework-center-box {
        max-width: 275px;
        padding: 28px 20px;
    }

    .framework-orbit-one {
        width: 275px;
        height: 275px;
    }

    .framework-orbit-two {
        width: 325px;
        height: 325px;
    }

    .connector-one,
    .connector-three {
        left: 27%;
        width: 7%;
    }

    .connector-two,
    .connector-four {
        right: 27%;
        width: 7%;
    }

}

/* =========================================
   TABLET / MOBILE GRID
========================================= */

@media (max-width: 991px) {

    .control-framework-section {
        padding: 75px 0;
    }

    .control-framework-heading {
        margin-bottom: 40px;
    }

    .control-framework-heading h2 {
        font-size: 34px;
    }

    .control-framework {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 18px;
    }

    /* Center First */
    .framework-center {
        grid-column: 1 / 3;
        grid-row: 1;
        min-height: auto;
        margin: 15px 0 25px;
    }

    .framework-center-box {
        max-width: 390px;
    }

    .framework-orbit {
        display: none;
    }

    /* Cards */
    .framework-card-one {
        grid-column: 1;
        grid-row: 2;
    }

    .framework-card-two {
        grid-column: 2;
        grid-row: 2;
    }

    .framework-card-three {
        grid-column: 1;
        grid-row: 3;
    }

    .framework-card-four {
        grid-column: 2;
        grid-row: 3;
    }

    .framework-card-five {
        grid-column: 1 / 3;
        grid-row: 4;
        width: 100%;
    }

    .framework-connector {
        display: none;
    }

    .framework-bottom-bar {
        flex-wrap: wrap;
        gap: 15px;
    }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .control-framework-section {
        padding: 60px 0;
    }

    .control-framework-heading h2 {
        font-size: 28px;
    }

    .control-framework-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .control-framework {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .framework-center {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 20px;
    }

    .framework-center-box {
        max-width: 100%;
        padding: 30px 22px;
    }

    .framework-center-box h3 {
        font-size: 22px;
    }

    .framework-card {
        padding: 20px;
    }

    .framework-card-one {
        grid-column: 1;
        grid-row: 2;
    }

    .framework-card-two {
        grid-column: 1;
        grid-row: 3;
    }

    .framework-card-three {
        grid-column: 1;
        grid-row: 4;
    }

    .framework-card-four {
        grid-column: 1;
        grid-row: 5;
    }

    .framework-card-five {
        grid-column: 1;
        grid-row: 6;
        width: 100%;
    }

    .framework-card h4 {
        font-size: 13px;
    }

    .framework-card p {
        font-size: 11px;
    }

    .framework-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 22px;
    }

    .framework-bottom-arrow {
        display: none;
    }

}





/* =========================================
   PREVIEW DIALER FEATURES
   FEATURE RAIL DESIGN
========================================= */

.preview-features-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #ffffff;
}

.preview-features-section::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
    pointer-events: none;
}

.preview-features-section .container {
    position: relative;
    z-index: 1;
}

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

.preview-features-heading {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.preview-features-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    margin-bottom: 17px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 40px;
    background: #fcf5ff;
    color: #b13bc9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.preview-features-heading h2 {
    margin: 0;
    color: #292333;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
}

.preview-features-heading h2 span {
    display: block;
    color: #d852ed;
}

.preview-features-heading p {
    max-width: 690px;
    margin: 20px auto 0;
    color: #85808f;
    font-size: 14px;
    line-height: 1.9;
}

/* =========================================
   MAIN EXPERIENCE LAYOUT
========================================= */

.preview-features-experience {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 28px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 25px;
    border: 1px solid #eae2f0;
    border-radius: 25px;
    background: #fbf9fd;
    box-shadow: 0 18px 55px rgba(53, 30, 74, 0.06);
}

/* =========================================
   LEFT NAVIGATION
========================================= */

.preview-feature-navigation {
    padding: 15px 0;
}

.preview-navigation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 17px;
    border-bottom: 1px solid #e9e1ef;
}

.preview-navigation-heading span {
    color: #a49aaf;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.preview-navigation-heading i {
    color: #d852ed;
    font-size: 12px;
}

/* =========================================
   FEATURE TABS
========================================= */

.preview-feature-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 14px;
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preview-feature-tab:hover {
    border-color: #ead2f0;
    background: #ffffff;
}

.preview-feature-tab.active {
    border-color: rgba(216, 82, 237, 0.25);
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(100, 45, 115, 0.07);
}

.preview-feature-tab.active::before {
    content: "";
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: -1px;
    width: 3px;
    border-radius: 4px;
    background: #d852ed;
}

.preview-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #f2e7f8;
    color: #b647ca;
    font-size: 13px;
    transition: all 0.3s ease;
}

.preview-feature-tab.active .preview-tab-icon {
    background: #d852ed;
    color: #ffffff;
}

.preview-tab-content {
    min-width: 0;
}

.preview-tab-content small {
    display: block;
    margin-bottom: 4px;
    color: #b4a7bd;
    font-size: 9px;
    font-weight: 800;
}

.preview-tab-content h4 {
    margin: 0;
    color: #46394f;
    font-size: 12px;
    font-weight: 800;
}

.preview-feature-tab.active .preview-tab-content h4 {
    color: #b13bc9;
}

.preview-tab-arrow {
    margin-left: auto;
    color: #cbbbd3;
    font-size: 10px;
}

.preview-feature-tab.active .preview-tab-arrow {
    color: #d852ed;
}

/* =========================================
   RIGHT DISPLAY
========================================= */

.preview-feature-display {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e9e0f0;
    border-radius: 20px;
    background: #ffffff;
}

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

.preview-display-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee7f2;
}

.preview-display-top>div:first-child span {
    display: block;
    margin-bottom: 8px;
    color: #a89db1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.preview-display-top h3 {
    margin: 0;
    color: #30273a;
    font-size: 25px;
    font-weight: 800;
}

.preview-display-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 30px;
    background: #effcf5;
    color: #239761;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.preview-display-status i {
    font-size: 10px;
}

/* =========================================
   LEAD VISUAL
========================================= */

.preview-lead-visual {
    margin-top: 25px;
    padding: 23px;
    border-radius: 17px;
    background: #faf7ff;
}

.preview-lead-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ece3f3;
}

.preview-lead-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-lead-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #d852ed, #a83ac5);
    color: #ffffff;
    font-size: 17px;
}

.preview-lead-heading small {
    display: block;
    margin-bottom: 5px;
    color: #a99db2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.preview-lead-heading h4 {
    margin: 0;
    color: #342b3e;
    font-size: 15px;
    font-weight: 800;
}

.preview-lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 30px;
    background: #ffffff;
    color: #a68daa;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.preview-lead-badge i {
    color: #d852ed;
    font-size: 6px;
}

/* =========================================
   LEAD DETAILS
========================================= */

.preview-lead-details {
    padding: 20px 0;
}

.preview-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px dashed #e9dff0;
}

.preview-detail-row:last-child {
    border-bottom: 0;
}

.preview-detail-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9c90a7;
    font-size: 11px;
}

.preview-detail-row span i {
    width: 15px;
    color: #c34bd8;
    text-align: center;
}

.preview-detail-row strong {
    color: #4b3d55;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

/* =========================================
   LEAD NOTE
========================================= */

.preview-lead-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid #ead7f0;
    border-radius: 11px;
    background: #ffffff;
}

.preview-lead-note i {
    margin-top: 3px;
    color: #d852ed;
    font-size: 12px;
}

.preview-lead-note p {
    margin: 0;
    color: #8e8299;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================
   DESCRIPTION
========================================= */

.preview-display-description {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 25px;
    padding-top: 23px;
    border-top: 1px solid #eee7f2;
}

.preview-description-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f8e9fc;
    color: #c142db;
    font-size: 11px;
    font-weight: 800;
}

.preview-display-description h4 {
    margin: 0 0 9px;
    color: #352b40;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.preview-display-description p {
    margin: 0;
    color: #8b8194;
    font-size: 12px;
    line-height: 1.9;
}

/* =========================================
   BENEFITS
========================================= */

.preview-feature-benefits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eee7f2;
}

.preview-feature-benefits div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #73667d;
    font-size: 10px;
    font-weight: 700;
}

.preview-feature-benefits i {
    color: #d852ed;
    font-size: 11px;
}

/* =========================================
   SUMMARY STRIP
========================================= */

.preview-feature-summary {
    display: flex;
    align-items: center;
    gap: 35px;
    max-width: 1120px;
    margin: 35px auto 0;
    padding: 24px 28px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 18px;
    background: linear-gradient(100deg, #ffffff, #fcf5ff);
}

.preview-summary-heading {
    width: 175px;
    flex-shrink: 0;
}

.preview-summary-heading span {
    display: block;
    margin-bottom: 8px;
    color: #b04ac4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.preview-summary-heading h3 {
    margin: 0;
    color: #33293d;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

.preview-summary-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    flex: 1;
    gap: 12px;
}

.preview-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 5px;
    text-align: center;
}

.preview-summary-item span {
    color: #cbb8d4;
    font-size: 9px;
    font-weight: 800;
}

.preview-summary-item i {
    color: #d852ed;
    font-size: 17px;
}

.preview-summary-item strong {
    color: #65566e;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1199px) {

    .preview-features-experience {
        grid-template-columns: 245px minmax(0, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .preview-feature-display {
        padding: 19px;
    }

    .preview-lead-visual {
        padding: 18px;
    }

    .preview-summary-heading {
        width: 145px;
    }

    .preview-summary-items {
        gap: 5px;
    }

}

/* =========================================
   TABLET / SMALL DESKTOP
========================================= */

@media (max-width: 991px) {

    .preview-features-section {
        padding: 75px 0;
    }

    .preview-features-heading {
        margin-bottom: 40px;
    }

    .preview-features-heading h2 {
        font-size: 34px;
    }

    .preview-features-experience {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin: 0 auto;
    }

    .preview-feature-navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
    }

    .preview-navigation-heading {
        grid-column: 1 / 3;
        margin-bottom: 3px;
    }

    .preview-feature-tab {
        margin-top: 0;
    }

    .preview-feature-display {
        padding: 22px;
    }

    .preview-feature-summary {
        flex-direction: column;
        align-items: stretch;
        max-width: 720px;
        margin: 30px auto 0;
        gap: 22px;
    }

    .preview-summary-heading {
        width: auto;
        text-align: center;
    }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .preview-features-section {
        padding: 60px 0;
    }

    .preview-features-heading h2 {
        font-size: 28px;
    }

    .preview-features-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .preview-features-experience {
        padding: 14px;
        border-radius: 19px;
    }

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

    .preview-navigation-heading {
        grid-column: 1;
    }

    .preview-feature-tab {
        padding: 14px;
    }

    .preview-feature-display {
        padding: 16px;
    }

    .preview-display-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .preview-display-top h3 {
        font-size: 23px;
    }

    .preview-lead-visual {
        padding: 15px;
    }

    .preview-lead-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .preview-lead-badge {
        font-size: 9px;
    }

    .preview-detail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .preview-detail-row strong {
        text-align: left;
    }

    .preview-display-description {
        gap: 11px;
    }

    .preview-display-description h4 {
        font-size: 14px;
    }

    .preview-display-description p {
        font-size: 11px;
    }

    .preview-feature-benefits {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .preview-summary-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 5px;
    }

    .preview-summary-item:last-child {
        grid-column: 1 / 3;
    }

}







/* =========================================
   CRM CONNECTED JOURNEY SECTION
========================================= */

.crm-journey-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #f8f7fc;
}

.crm-journey-section *,
.crm-journey-section *::before,
.crm-journey-section *::after {
    box-sizing: border-box;
}

.crm-journey-container {
    width: 92%;
    max-width: 1140px;
    margin: 0 auto;
}


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

.crm-journey-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.crm-journey-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 9px 17px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50px;
    color: #b038ca;
    background: #fcefff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.crm-journey-heading h2 {
    margin: 0;
    color: #28243b;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}

.crm-journey-heading h2 span {
    color: #d852ed;
}

.crm-journey-heading p {
    max-width: 690px;
    margin: 22px auto 0;
    color: #858197;
    font-size: 14px;
    line-height: 1.9;
}


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

.crm-journey-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: fit-content;
    margin: 0 auto 28px;
    padding: 13px 24px;
    border: 1px solid #eadcf2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(45, 30, 70, 0.04);
}

.crm-journey-start-icon {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff;
    background: #d852ed;
    font-size: 16px;
}

.crm-journey-start span {
    display: block;
    margin-bottom: 4px;
    color: #b13ac9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.crm-journey-start h4 {
    margin: 0;
    color: #302a45;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================
   TWO COLUMN CARDS
========================================= */

.crm-journey-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.crm-journey-card {
    min-width: 0;
    padding: 30px;
    border-radius: 20px;
}

.crm-journey-light-card {
    border: 1px solid #e9e4f1;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(45, 30, 70, 0.045);
    transition: all 0.3s ease;
}

.crm-journey-light-card:hover {
    border-color: #D852ED;
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.crm-journey-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 26px;
}

.crm-journey-card-icon {
    display: flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #d852ed;
    background: #f9eaff;
    font-size: 17px;
}

.crm-journey-step {
    color: #aaa4b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.crm-journey-label {
    display: block;
    margin-bottom: 9px;
    color: #b13ac9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.crm-journey-card h3 {
    margin: 0 0 12px;
    color: #2d2940;
    font-size: 22px;
    font-weight: 800;
}

.crm-journey-card>p {
    margin: 0;
    color: #898499;
    font-size: 12px;
    line-height: 1.85;
}


/* =========================================
   DATA LIST
========================================= */

.crm-journey-data-list {
    margin-top: 25px;
    padding-top: 12px;
    border-top: 1px solid #f0edf5;
}

.crm-journey-data-list>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
}

.crm-journey-data-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9993aa;
    font-size: 11px;
}

.crm-journey-data-list span i {
    width: 14px;
    color: #d852ed;
    text-align: center;
}

.crm-journey-data-list strong {
    max-width: 55%;
    overflow: hidden;
    color: #49435c;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-journey-data-list .crm-journey-status {
    color: #14a477;
}


/* =========================================
   PREVIEW INFORMATION
========================================= */

.crm-journey-preview-box {
    margin-top: 25px;
    padding: 17px;
    border-radius: 13px;
    background: #fbf5ff;
}

.crm-journey-preview-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #b13ac9;
    font-size: 11px;
    font-weight: 800;
}

.crm-journey-preview-box p {
    margin: 0;
    color: #858096;
    font-size: 11px;
    line-height: 1.8;
}

.crm-journey-mini-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.crm-journey-mini-points span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #777187;
    font-size: 10px;
}

.crm-journey-mini-points i {
    color: #d852ed;
}


/* =========================================
   CONNECTORS
========================================= */

.crm-journey-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 65px;
}

.crm-journey-connector-line {
    display: block;
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom,
            #e3c5eb,
            #d852ed);
}

.crm-journey-connector-arrow {
    display: flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid #edc9f4;
    border-radius: 50%;
    color: #d852ed;
    background: #ffffff;
    font-size: 10px;
}


/* =========================================
   WIDE PREPARATION CARD
========================================= */

.crm-journey-wide-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 34px 38px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 22px;
    background: linear-gradient(110deg,
            #2c2541 0%,
            #342545 55%,
            #41294c 100%);
    box-shadow: 0 18px 45px rgba(44, 32, 66, 0.14);
}

.crm-journey-wide-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
}

.crm-journey-wide-icon {
    display: flex;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.45);
    border-radius: 15px;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.18);
    font-size: 18px;
}

.crm-journey-wide-card .crm-journey-label {
    color: #d852ed;
}

.crm-journey-wide-card h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}

.crm-journey-wide-card p {
    max-width: 500px;
    margin: 0;
    color: #b9aec9;
    font-size: 12px;
    line-height: 1.9;
}

.crm-journey-checklist {
    flex: 0 0 285px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
}

.crm-journey-checklist div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 0;
    color: #d0c6dc;
    font-size: 10px;
    line-height: 1.5;
}

.crm-journey-checklist i {
    margin-top: 2px;
    color: #d852ed;
}

.crm-journey-checklist div:last-child i {
    color: #b9aec9;
}


/* =========================================
   CALL SESSION
========================================= */

.crm-journey-call-card {
    padding: 32px 38px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 22px;
    background: #29243d;
    box-shadow: 0 18px 45px rgba(44, 32, 66, 0.14);
}

.crm-journey-call-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crm-journey-call-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.18);
    font-size: 17px;
}

.crm-journey-call-heading span:first-of-type {
    display: block;
    margin-bottom: 5px;
    color: #aaa0bd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.crm-journey-call-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.crm-journey-call-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 11px;
    border-radius: 30px;
    color: #bdf4dc;
    background: rgba(22, 168, 121, 0.12);
    font-size: 10px;
    font-weight: 800;
}

.crm-journey-call-badge i {
    color: #20c990;
    font-size: 6px;
}

.crm-journey-call-content {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: center;
    gap: 25px;
    margin-top: 35px;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.crm-journey-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm-journey-person-right {
    justify-content: flex-end;
    text-align: right;
}

.crm-journey-person-avatar {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.18);
    font-size: 15px;
    font-weight: 800;
}

.crm-journey-person strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.crm-journey-person p {
    margin: 0;
    color: #a99fb9;
    font-size: 9px;
    line-height: 1.6;
}

.crm-journey-call-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.crm-journey-call-wave {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.55);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.18);
    box-shadow: 0 0 0 10px rgba(216, 82, 237, 0.05);
}

.crm-journey-call-lines {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 23px;
}

.crm-journey-call-lines span {
    display: block;
    width: 3px;
    border-radius: 10px;
    background: #d852ed;
}

.crm-journey-call-lines span:nth-child(1) {
    height: 10px;
}

.crm-journey-call-lines span:nth-child(2) {
    height: 18px;
}

.crm-journey-call-lines span:nth-child(3) {
    height: 23px;
}

.crm-journey-call-lines span:nth-child(4) {
    height: 15px;
}

.crm-journey-call-lines span:nth-child(5) {
    height: 8px;
}

.crm-journey-call-center small {
    color: #aaa0bd;
    font-size: 9px;
    font-weight: 700;
}

.crm-journey-call-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 24px;
}

.crm-journey-call-footer span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #bcb1cc;
    font-size: 10px;
}

.crm-journey-call-footer i {
    color: #d852ed;
}


/* =========================================
   RESULT LIST
========================================= */

.crm-journey-result-list {
    margin-top: 25px;
}

.crm-journey-result-list>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 13px;
    border: 1px solid #eeeaf4;
    border-radius: 10px;
    color: #8e889f;
    font-size: 11px;
}

.crm-journey-result-list span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-journey-result-list span i {
    color: #b0a9bd;
}

.crm-journey-result-list .crm-journey-result-active {
    border-color: rgba(216, 82, 237, 0.3);
    color: #a52bc0;
    background: #fcf5ff;
}

.crm-journey-result-active span i,
.crm-journey-result-active>i {
    color: #d852ed;
}


/* =========================================
   CRM UPDATE LIST
========================================= */

.crm-journey-update-list {
    margin-top: 25px;
}

.crm-journey-update-list div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0;
    color: #777187;
    font-size: 11px;
}

.crm-journey-update-list i {
    margin-top: 2px;
    color: #d852ed;
}

.crm-journey-update-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 10px;
    color: #159d73;
    background: #ebfbf4;
    font-size: 10px;
    font-weight: 700;
}

.crm-journey-update-tag i {
    font-size: 11px;
}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.crm-journey-bottom-message {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding: 28px 30px;
    border: 1px solid #e7d9ef;
    border-radius: 20px;
    background: linear-gradient(105deg,
            #ffffff,
            #fcf5ff);
}

.crm-journey-bottom-icon {
    display: flex;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #d852ed;
    background: #f8e8ff;
    font-size: 18px;
}

.crm-journey-bottom-message h3 {
    margin: 0 0 8px;
    color: #302a45;
    font-size: 18px;
    font-weight: 800;
}

.crm-journey-bottom-message p {
    max-width: 500px;
    margin: 0;
    color: #8a839c;
    font-size: 11px;
    line-height: 1.8;
}

.crm-journey-bottom-points {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-left: auto;
}

.crm-journey-bottom-points span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7e778f;
    font-size: 10px;
    white-space: nowrap;
}

.crm-journey-bottom-points i {
    color: #d852ed;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .crm-journey-heading h2 {
        font-size: 35px;
    }

    .crm-journey-wide-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .crm-journey-checklist {
        width: 100%;
        flex: auto;
    }

    .crm-journey-call-content {
        gap: 15px;
    }

    .crm-journey-person {
        flex-direction: column;
        text-align: center;
    }

    .crm-journey-person-right {
        justify-content: center;
        text-align: center;
    }

    .crm-journey-bottom-message {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .crm-journey-bottom-points {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 68px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .crm-journey-section {
        padding: 70px 0;
    }

    .crm-journey-container {
        width: 90%;
    }

    .crm-journey-heading {
        margin-bottom: 38px;
    }

    .crm-journey-heading h2 {
        font-size: 29px;
        letter-spacing: -0.5px;
    }

    .crm-journey-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .crm-journey-eyebrow {
        font-size: 9px;
        letter-spacing: 0.6px;
    }

    .crm-journey-start {
        width: 100%;
        justify-content: flex-start;
        padding: 15px;
    }

    .crm-journey-start h4 {
        font-size: 12px;
        line-height: 1.5;
    }

    .crm-journey-two-column {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .crm-journey-card {
        padding: 24px;
    }

    .crm-journey-card h3 {
        font-size: 21px;
    }

    .crm-journey-wide-card {
        padding: 26px 23px;
    }

    .crm-journey-wide-left {
        flex-direction: column;
        gap: 15px;
    }

    .crm-journey-wide-card h3 {
        font-size: 23px;
    }

    .crm-journey-call-card {
        padding: 26px 22px;
    }

    .crm-journey-call-heading h3 {
        font-size: 20px;
    }

    .crm-journey-call-badge {
        display: none;
    }

    .crm-journey-call-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .crm-journey-person,
    .crm-journey-person-right {
        flex-direction: row;
        justify-content: center;
        text-align: left;
    }

    .crm-journey-call-center {
        order: 2;
    }

    .crm-journey-call-footer {
        flex-direction: column;
        gap: 12px;
    }

    .crm-journey-bottom-message {
        padding: 24px;
    }

    .crm-journey-bottom-message h3 {
        font-size: 17px;
        line-height: 1.5;
    }

    .crm-journey-bottom-points {
        flex-direction: column;
        margin-left: 0;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .crm-journey-heading h2 {
        font-size: 26px;
    }

    .crm-journey-card {
        padding: 21px;
    }

    .crm-journey-data-list strong {
        max-width: 48%;
    }

    .crm-journey-wide-card h3 {
        font-size: 21px;
    }

    .crm-journey-call-heading {
        align-items: flex-start;
    }

    .crm-journey-call-heading h3 {
        font-size: 18px;
    }

}






/* =========================================
   DIALING STRATEGY SECTION
========================================= */

.dialing-strategy-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #f8f7fc;
}

.dialing-strategy-section *,
.dialing-strategy-section *::before,
.dialing-strategy-section *::after {
    box-sizing: border-box;
}

.dialing-strategy-container {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
}


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

.dialing-strategy-heading {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.dialing-strategy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 9px 17px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50px;
    color: #b038ca;
    background: #fcefff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.dialing-strategy-heading h2 {
    margin: 0;
    color: #29243d;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}

.dialing-strategy-heading h2 span {
    color: #d852ed;
}

.dialing-strategy-heading p {
    max-width: 690px;
    margin: 22px auto 0;
    color: #858197;
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.dialing-strategy-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.45fr;
    gap: 24px;
    align-items: stretch;
}


/* =========================================
   CAMPAIGN GOAL PANEL
========================================= */

.dialing-strategy-goal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px;
    overflow: hidden;
    border-radius: 23px;
    background: linear-gradient(145deg,
            #29243d 0%,
            #332540 65%,
            #40294b 100%);
    box-shadow: 0 20px 45px rgba(44, 32, 66, 0.16);
}

.dialing-strategy-goal-panel::after {
    position: absolute;
    right: -75px;
    bottom: -75px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 50%;
    content: "";
    box-shadow:
        0 0 0 25px rgba(216, 82, 237, 0.035),
        0 0 0 50px rgba(216, 82, 237, 0.025);
}

.dialing-strategy-goal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dialing-strategy-goal-top span {
    color: #b8abc9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dialing-strategy-goal-top i {
    color: #d852ed;
    font-size: 15px;
}

.dialing-strategy-goal-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin: 43px 0 24px;
    border: 1px solid rgba(216, 82, 237, 0.4);
    border-radius: 17px;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.17);
    font-size: 22px;
}

.dialing-strategy-goal-panel h3 {
    margin: 0;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.35;
    font-weight: 800;
}

.dialing-strategy-goal-panel h3 span {
    color: #d852ed;
}

.dialing-strategy-goal-panel>p {
    margin: 20px 0 27px;
    color: #b7acc8;
    font-size: 12px;
    line-height: 1.9;
}

.dialing-strategy-goal-list {
    position: relative;
    z-index: 1;
    padding-top: 21px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dialing-strategy-goal-list div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0;
    color: #d3c9df;
    font-size: 11px;
    line-height: 1.6;
}

.dialing-strategy-goal-list i {
    margin-top: 2px;
    color: #d852ed;
}

.dialing-strategy-goal-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: auto;
    padding-top: 25px;
    color: #a99dbb;
    font-size: 10px;
    line-height: 1.7;
}

.dialing-strategy-goal-footer i {
    margin-top: 2px;
    color: #d852ed;
}


/* =========================================
   OPTION AREA
========================================= */

.dialing-strategy-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialing-strategy-option {
    position: relative;
    padding: 25px 28px;
    border: 1px solid #e8e3f0;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(45, 30, 70, 0.035);
    transition: all 0.3s ease;
}

.dialing-strategy-option:hover {
    transform: translateX(5px);
    box-shadow: 0 14px 35px rgba(45, 30, 70, 0.08);
}

.dialing-strategy-option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.dialing-strategy-option-icon {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #d852ed;
    background: #f9eaff;
    font-size: 16px;
}

.dialing-strategy-option-number {
    color: #d6d0df;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}

.dialing-strategy-option-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.dialing-strategy-option-heading>div {
    min-width: 0;
}

.dialing-strategy-option-heading span:first-child {
    display: block;
    margin-bottom: 6px;
    color: #b13ac9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.dialing-strategy-option-heading h3 {
    margin: 0;
    color: #302a45;
    font-size: 21px;
    font-weight: 800;
}

.dialing-strategy-tag {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid #eee5f4;
    border-radius: 30px;
    color: #9990a9;
    background: #fcfaff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.dialing-strategy-option>p {
    max-width: 620px;
    margin: 14px 0 17px;
    color: #898398;
    font-size: 11px;
    line-height: 1.85;
}

.dialing-strategy-feature {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 18px 9px 0;
    color: #777187;
    font-size: 10px;
    line-height: 1.5;
}

.dialing-strategy-feature i {
    margin-top: 2px;
    color: #d852ed;
}

.dialing-strategy-fit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 12px;
    padding-top: 15px;
    border-top: 1px solid #f0edf5;
}

.dialing-strategy-fit span {
    color: #aaa2b7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.dialing-strategy-fit strong {
    color: #514a63;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}


/* =========================================
   CARD ACCENTS
========================================= */

.dialing-strategy-preview {
    border-left: 4px solid #d852ed;
}

.dialing-strategy-power {
    border-left: 4px solid #8e7bd1;
}

.dialing-strategy-power .dialing-strategy-option-icon {
    color: #8170c4;
    background: #f0edff;
}

.dialing-strategy-power .dialing-strategy-option-heading span:first-child {
    color: #8170c4;
}

.dialing-strategy-predictive {
    border-left: 4px solid #38a98b;
}

.dialing-strategy-predictive .dialing-strategy-option-icon {
    color: #269878;
    background: #eafaf4;
}

.dialing-strategy-predictive .dialing-strategy-option-heading span:first-child {
    color: #269878;
}

.dialing-strategy-predictive .dialing-strategy-feature i {
    color: #269878;
}


/* =========================================
   BOTTOM DECISION BANNER
========================================= */

.dialing-strategy-decision {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    padding: 29px 32px;
    border: 1px solid #e8d8f0;
    border-radius: 20px;
    background: linear-gradient(105deg,
            #ffffff,
            #fcf5ff);
}

.dialing-strategy-decision-icon {
    display: flex;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #d852ed;
    background: #f8e8ff;
    font-size: 18px;
}

.dialing-strategy-decision-content {
    flex: 1;
    min-width: 0;
}

.dialing-strategy-decision-content>span {
    display: block;
    margin-bottom: 7px;
    color: #b13ac9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dialing-strategy-decision-content h3 {
    margin: 0 0 8px;
    color: #302a45;
    font-size: 18px;
    font-weight: 800;
}

.dialing-strategy-decision-content p {
    max-width: 590px;
    margin: 0;
    color: #8a839c;
    font-size: 11px;
    line-height: 1.8;
}

.dialing-strategy-decision-points {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-left: auto;
}

.dialing-strategy-decision-points span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #777187;
    font-size: 10px;
    white-space: nowrap;
}

.dialing-strategy-decision-points i {
    color: #d852ed;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .dialing-strategy-heading h2 {
        font-size: 35px;
    }

    .dialing-strategy-layout {
        grid-template-columns: 1fr;
    }

    .dialing-strategy-goal-panel {
        min-height: auto;
    }

    .dialing-strategy-goal-icon {
        margin-top: 30px;
    }

    .dialing-strategy-goal-footer {
        margin-top: 20px;
    }

    .dialing-strategy-decision {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dialing-strategy-decision-points {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 70px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .dialing-strategy-section {
        padding: 70px 0;
    }

    .dialing-strategy-container {
        width: 90%;
    }

    .dialing-strategy-heading {
        margin-bottom: 38px;
    }

    .dialing-strategy-heading h2 {
        font-size: 29px;
        letter-spacing: -0.5px;
    }

    .dialing-strategy-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .dialing-strategy-eyebrow {
        font-size: 9px;
        letter-spacing: 0.6px;
    }

    .dialing-strategy-goal-panel {
        padding: 28px;
    }

    .dialing-strategy-goal-panel h3 {
        font-size: 25px;
    }

    .dialing-strategy-option {
        padding: 23px;
    }

    .dialing-strategy-option-heading {
        flex-direction: column;
        gap: 10px;
    }

    .dialing-strategy-option-heading h3 {
        font-size: 21px;
    }

    .dialing-strategy-tag {
        width: fit-content;
    }

    .dialing-strategy-fit {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .dialing-strategy-fit strong {
        text-align: left;
    }

    .dialing-strategy-decision {
        padding: 24px;
    }

    .dialing-strategy-decision-content h3 {
        font-size: 17px;
        line-height: 1.5;
    }

    .dialing-strategy-decision-points {
        flex-direction: column;
        margin-left: 0;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .dialing-strategy-heading h2 {
        font-size: 26px;
    }

    .dialing-strategy-goal-panel {
        padding: 24px;
    }

    .dialing-strategy-option {
        padding: 20px;
    }

    .dialing-strategy-option-heading h3 {
        font-size: 19px;
    }

    .dialing-strategy-option-number {
        font-size: 20px;
    }

}




/* =========================================
   CHOOSE PREVIEW DIALER SECTION
========================================= */

.choose-preview-section {
    position: relative;
    padding: 95px 0;
    background: #fbf9ff;
    overflow: hidden;
}

.choose-preview-container {
    width: 92%;
    max-width: 1240px;
    margin: 0 auto;
}

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

.choose-preview-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.choose-preview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.choose-preview-eyebrow i {
    font-size: 14px;
}

.choose-preview-heading h2 {
    margin: 0 0 19px;
    color: #20202f;
    font-size: 39px;
    line-height: 1.22;
    font-weight: 800;
}

.choose-preview-heading h2 span {
    color: #d852ed;
}

.choose-preview-heading p {
    max-width: 750px;
    margin: 0 auto;
    color: #747386;
    font-size: 16px;
    line-height: 1.9;
}

/* =========================================
   MAIN LAYOUT
========================================= */

.choose-preview-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.45fr;
    gap: 28px;
    align-items: stretch;
}

/* =========================================
   LEFT INTRO PANEL
========================================= */

.choose-preview-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 34px;
    border-radius: 24px;
    background: linear-gradient(145deg, #29203b, #171523);
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(36, 25, 54, 0.12);
}

.choose-preview-intro::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -85px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 0 25px rgba(216, 82, 237, 0.04),
        0 0 0 50px rgba(216, 82, 237, 0.03);
}

.choose-preview-intro-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.choose-preview-intro-top span {
    color: #d7b5df;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.choose-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.2);
    border: 1px solid rgba(216, 82, 237, 0.5);
}

.choose-preview-icon i {
    font-size: 18px;
}

.choose-preview-intro h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 500;
}

.choose-preview-intro h3 strong {
    display: block;
    color: #e783f5;
    font-weight: 800;
}

.choose-preview-intro>p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #c1baca;
    font-size: 14px;
    line-height: 1.9;
}

.choose-preview-quote {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 22px 0 0;
}

.choose-preview-quote i {
    margin-bottom: 10px;
    color: #d852ed;
    font-size: 22px;
}

.choose-preview-quote p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
}

.choose-preview-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #bdb4c9;
    font-size: 12px;
}

.choose-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 0 5px rgba(110, 231, 183, 0.08);
}

/* =========================================
   RIGHT SYSTEM PANEL
========================================= */

.choose-preview-system {
    padding: 35px;

    border: 1px solid #eee5f5;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(48, 30, 65, 0.05);

    /* Hover Transition */
    transition: all 0.3s ease;
}

/* Pink Outline + Move + Shadow */
.choose-preview-system:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.choose-system-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.choose-system-label {
    display: block;
    margin-bottom: 10px;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.choose-system-header h3 {
    margin: 0;
    color: #252335;
    font-size: 25px;
    line-height: 1.35;
    font-weight: 800;
}

.choose-system-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 8px 11px;
    border-radius: 30px;
    color: #16815d;
    background: #effbf5;
    font-size: 11px;
    font-weight: 700;
}

.choose-system-badge i {
    font-size: 12px;
}

/* =========================================
   FEATURE GRID
========================================= */

.choose-preview-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.choose-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px 14px;
    border: 1px solid #f0eaf5;
    border-radius: 14px;
    background: #fdfbff;
    transition: all 0.3s ease;
}

.choose-feature-item:hover {
    border-color: rgba(216, 82, 237, 0.4);
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(216, 82, 237, 0.08);
}

.choose-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #d852ed;
    background: #f8e9fc;
}

.choose-feature-icon i {
    font-size: 14px;
}

.choose-feature-item h4 {
    margin: 0 0 7px;
    color: #2c293b;
    font-size: 13px;
    font-weight: 800;
}

.choose-feature-item p {
    margin: 0;
    color: #858092;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================
   USE CASE AREA
========================================= */

.choose-usecase-area {
    margin-top: 75px;
}

.choose-usecase-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    margin-bottom: 25px;
}

.choose-usecase-heading>span {
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.choose-usecase-heading h3 {
    margin: 0;
    color: #252335;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;
    text-align: right;
}

.choose-usecase-heading h3 span {
    color: #d852ed;
}

/* =========================================
   USE CASE LIST
========================================= */

.choose-usecase-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.choose-usecase-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid #eee6f5;
    border-radius: 15px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.choose-usecase-item:hover {
    border-color: #d852ed;
    transform: translateX(4px);
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.08);
}

.choose-usecase-number {
    color: #d8c9df;
    font-size: 14px;
    font-weight: 800;
}

.choose-usecase-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.choose-usecase-content>i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #d852ed;
    background: #f9ebfc;
    font-size: 14px;
}

.choose-usecase-content h4 {
    margin: 0 0 5px;
    color: #292638;
    font-size: 14px;
    font-weight: 800;
}

.choose-usecase-content p {
    margin: 0;
    color: #898294;
    font-size: 11px;
    line-height: 1.6;
}

.choose-usecase-arrow {
    color: #d852ed;
    font-size: 12px;
}

/* =========================================
   BOTTOM MESSAGE
========================================= */

.choose-preview-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 35px;
    padding: 25px 28px;
    border-radius: 18px;
    background: linear-gradient(100deg, #f6e8fb, #ffffff);
    border: 1px solid #ead6f2;
}

.choose-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #ffffff;
    background: #d852ed;
    box-shadow: 0 8px 18px rgba(216, 82, 237, 0.2);
}

.choose-bottom-icon i {
    font-size: 18px;
}

.choose-preview-bottom h4 {
    margin: 0 0 6px;
    color: #2b2638;
    font-size: 16px;
    font-weight: 800;
}

.choose-preview-bottom p {
    max-width: 850px;
    margin: 0;
    color: #81758b;
    font-size: 12px;
    line-height: 1.8;
}

.choose-bottom-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    margin-left: auto;
    border-radius: 50%;
    color: #d852ed;
    background: #ffffff;
    border: 1px solid #ecd8f4;
}

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

@media (max-width: 991px) {

    .choose-preview-section {
        padding: 75px 0;
    }

    .choose-preview-heading h2 {
        font-size: 34px;
    }

    .choose-preview-layout {
        grid-template-columns: 1fr;
    }

    .choose-preview-intro {
        min-height: auto;
    }

    .choose-preview-quote {
        margin-top: 35px;
    }

    .choose-usecase-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .choose-usecase-heading h3 {
        text-align: left;
    }

    .choose-preview-system {
        padding: 28px;
    }
}

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

@media (max-width: 767px) {

    .choose-preview-section {
        padding: 60px 0;
    }

    .choose-preview-container {
        width: 90%;
    }

    .choose-preview-heading {
        margin-bottom: 35px;
    }

    .choose-preview-heading h2 {
        font-size: 28px;
    }

    .choose-preview-heading p {
        font-size: 14px;
        line-height: 1.8;
    }

    .choose-preview-intro {
        padding: 30px 25px;
    }

    .choose-preview-intro h3 {
        font-size: 28px;
    }

    .choose-system-header {
        flex-direction: column;
    }

    .choose-preview-system {
        padding: 23px 18px;
    }

    .choose-system-header h3 {
        font-size: 22px;
    }

    .choose-preview-features {
        grid-template-columns: 1fr;
    }

    .choose-feature-item {
        padding: 16px 13px;
    }

    .choose-usecase-area {
        margin-top: 50px;
    }

    .choose-usecase-heading h3 {
        font-size: 24px;
    }

    .choose-usecase-list {
        grid-template-columns: 1fr;
    }

    .choose-usecase-item {
        gap: 12px;
        padding: 17px 14px;
    }

    .choose-usecase-content {
        gap: 10px;
    }

    .choose-usecase-content p {
        font-size: 10px;
    }

    .choose-usecase-arrow {
        display: none;
    }

    .choose-preview-bottom {
        align-items: flex-start;
        padding: 22px 18px;
    }

    .choose-bottom-icon {
        width: 40px;
        height: 40px;
    }

    .choose-preview-bottom h4 {
        font-size: 14px;
    }

    .choose-preview-bottom p {
        font-size: 11px;
    }

    .choose-bottom-mark {
        display: none;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .choose-preview-heading h2 {
        font-size: 25px;
    }

    .choose-preview-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .choose-preview-intro h3 {
        font-size: 25px;
    }

    .choose-system-header h3 {
        font-size: 20px;
    }

    .choose-usecase-heading h3 {
        font-size: 22px;
    }
}






/* =========================================
   POWER DIALER CONTROL ROOM
========================================= */

.pd-control-room-section {
    padding: 100px 0;
    background: #fbf9ff;
    overflow: hidden;
}

.pd-control-room-container {
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
}

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

.pd-control-room-header {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 45px;
    margin-bottom: 45px;
}

.pd-control-room-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.pd-control-room-header h2 {
    margin: 0;
    color: #282336;
    font-size: 40px;
    line-height: 1.23;
    font-weight: 800;
}

.pd-control-room-header h2 span {
    color: #d852ed;
}

.pd-control-room-header>p {
    margin: 0;
    color: #81778d;
    font-size: 15px;
    line-height: 1.9;
}

/* =========================================
   DASHBOARD
========================================= */

.pd-productivity-dashboard {
    padding: 31px 34px;
    border: 1px solid #e9dff1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(52, 30, 70, 0.05);

    /* Hover Transition */
    transition: all 0.3s ease;
}

.pd-productivity-dashboard:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

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

.pd-dashboard-top span {
    display: block;
    margin-bottom: 8px;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.pd-dashboard-top h3 {
    margin: 0;
    color: #2b263a;
    font-size: 23px;
    font-weight: 800;
}

.pd-dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 30px;
    color: #17835e;
    background: #effbf5;
    font-size: 11px;
    font-weight: 700;
}

.pd-dashboard-status i {
    font-size: 7px;
}

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

.pd-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pd-metric-box {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 17px;
    border: 1px solid #f0e8f5;
    border-radius: 15px;
    background: #fdfbff;
}

.pd-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #d852ed;
    background: #f9eafd;
}

.pd-metric-box span {
    display: block;
    margin-bottom: 5px;
    color: #92879e;
    font-size: 10px;
}

.pd-metric-box strong {
    display: block;
    color: #30293d;
    font-size: 16px;
    font-weight: 800;
}

.pd-metric-box small {
    display: block;
    margin-top: 4px;
    color: #a49aaa;
    font-size: 9px;
}

/* =========================================
   PROGRESS BAR
========================================= */

.pd-dashboard-progress {
    margin-top: 27px;
    padding-top: 23px;
    border-top: 1px solid #f0e8f5;
}

.pd-progress-heading,
.pd-progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.pd-progress-heading {
    margin-bottom: 13px;
}

.pd-progress-heading span {
    color: #82758e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.pd-progress-heading strong {
    color: #d852ed;
    font-size: 10px;
}

.pd-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 20px;
    background: #f0eaf4;
    overflow: hidden;
}

.pd-progress-fill {
    width: 78%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #d852ed, #a83cc3);
}

.pd-progress-labels {
    margin-top: 10px;
    color: #9c91a7;
    font-size: 10px;
}

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

.pd-workflow-area {
    margin-top: 78px;
}

.pd-workflow-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
}

.pd-workflow-heading>span {
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.pd-workflow-heading h3 {
    margin: 0;
    color: #2b2639;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 800;
    text-align: right;
}

.pd-workflow-heading h3 span {
    color: #d852ed;
}

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

.pd-workflow-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) 50px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.pd-workflow-stage {
    min-height: 365px;
    padding: 27px 23px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #eee5f4;
    box-shadow: 0 12px 30px rgba(55, 31, 73, 0.04);

    transition: all 0.3s ease;
}

.pd-workflow-stage:hover {
    /* border-color: #D852ED; */
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.pd-stage-manual {
    border-top: 4px solid #bdb3c7;
}

.pd-stage-automation {
    border-top: 4px solid #d852ed;
    background: linear-gradient(160deg, #ffffff, #fdf5ff);
}

.pd-stage-agent {
    border-top: 4px solid #6bc69d;
}

.pd-stage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.pd-stage-number {
    color: #a398ae;
    font-size: 12px;
    font-weight: 800;
}

.pd-stage-label {
    color: #9e91a9;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.pd-stage-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    margin-bottom: 20px;
    border-radius: 15px;
    color: #d852ed;
    background: #f9eafd;
}

.pd-stage-manual .pd-stage-icon {
    color: #92839e;
    background: #f1edf4;
}

.pd-stage-agent .pd-stage-icon {
    color: #2e9b6c;
    background: #edf9f3;
}

.pd-stage-icon i {
    font-size: 19px;
}

.pd-workflow-stage h4 {
    margin: 0 0 13px;
    color: #2d273b;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 800;
}

.pd-workflow-stage>p {
    min-height: 78px;
    margin: 0 0 25px;
    color: #8a8096;
    font-size: 12px;
    line-height: 1.8;
}

.pd-stage-points {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.pd-stage-points span {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #74697f;
    font-size: 11px;
    line-height: 1.5;
}

.pd-stage-points i {
    margin-top: 2px;
    color: #d852ed;
    font-size: 10px;
}

.pd-stage-manual .pd-stage-points i {
    color: #b6a9bf;
}

.pd-stage-agent .pd-stage-points i {
    color: #2e9b6c;
}

/* =========================================
   CONNECTORS
========================================= */

.pd-workflow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pd-connector-line {
    width: 100%;
    height: 1px;
    background: #decce7;
}

.pd-connector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin-top: -26px;
    border: 1px solid #ead9f1;
    border-radius: 50%;
    color: #d852ed;
    background: #ffffff;
    font-size: 11px;
}

.pd-workflow-connector>span {
    color: #b19dbb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* =========================================
   AGENT FOCUS PANEL
========================================= */

.pd-agent-focus-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 40px;
    padding: 36px 40px;
    border-radius: 23px;
    color: #ffffff;
    background: linear-gradient(110deg, #2d203b, #1b1826);
    box-shadow: 0 20px 40px rgba(42, 28, 57, 0.12);
}

.pd-agent-focus-label {
    display: block;
    margin-bottom: 13px;
    color: #dca3e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.pd-agent-focus-content h3 {
    max-width: 540px;
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 800;
}

.pd-agent-focus-content h3 span {
    color: #e17af2;
}

.pd-agent-focus-content p {
    max-width: 620px;
    margin: 0;
    color: #c7b9d0;
    font-size: 12px;
    line-height: 1.9;
}

.pd-agent-focus-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.pd-focus-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 78px;
    height: 82px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 14px;
    color: #dca3e8;
    background: rgba(255, 255, 255, 0.05);
}

.pd-focus-action i {
    font-size: 17px;
}

.pd-focus-action span {
    font-size: 10px;
    font-weight: 700;
}

/* =========================================
   BOTTOM BENEFITS
========================================= */

.pd-bottom-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 22px;
}

.pd-bottom-benefit {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 19px 20px;
    border: 1px solid #eee5f4;
    border-radius: 15px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.pd-bottom-benefit:hover {
    border-color: #D852ED;
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(200, 82, 200, 0.25);
}

.pd-bottom-benefit>i {
    color: #d852ed;
    font-size: 18px;
}

.pd-bottom-benefit strong {
    display: block;
    margin-bottom: 5px;
    color: #342d40;
    font-size: 12px;
    font-weight: 800;
}

.pd-bottom-benefit span {
    display: block;
    color: #968ba1;
    font-size: 10px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .pd-control-room-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pd-control-room-header>p {
        max-width: 700px;
    }

    .pd-workflow-board {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pd-workflow-stage {
        min-height: auto;
    }

    .pd-workflow-stage>p {
        min-height: auto;
    }

    .pd-workflow-connector {
        flex-direction: row;
        justify-content: center;
    }

    .pd-connector-line {
        width: 55px;
    }

    .pd-connector-icon {
        margin-top: 0;
    }

    .pd-agent-focus-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   TABLET SMALL
========================================= */

@media (max-width: 800px) {

    .pd-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .pd-metric-box {
        padding: 16px;
    }

    .pd-workflow-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pd-workflow-heading h3 {
        text-align: left;
    }

    .pd-agent-focus-actions {
        width: 100%;
    }

    .pd-focus-action {
        flex: 1;
    }

    .pd-bottom-benefits {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .pd-control-room-section {
        padding: 65px 0;
    }

    .pd-control-room-container {
        width: 90%;
    }

    .pd-control-room-header h2 {
        font-size: 29px;
    }

    .pd-control-room-header>p {
        font-size: 13px;
    }

    .pd-productivity-dashboard {
        padding: 24px 18px;
        border-radius: 19px;
    }

    .pd-dashboard-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .pd-dashboard-top h3 {
        font-size: 20px;
    }

    .pd-progress-labels {
        flex-direction: column;
        gap: 7px;
    }

    .pd-workflow-area {
        margin-top: 55px;
    }

    .pd-workflow-heading h3 {
        font-size: 24px;
    }

    .pd-workflow-stage {
        padding: 25px 21px;
    }

    .pd-agent-focus-panel {
        padding: 28px 22px;
        gap: 25px;
    }

    .pd-agent-focus-content h3 {
        font-size: 24px;
    }

    .pd-agent-focus-actions {
        gap: 8px;
    }

    .pd-focus-action {
        width: auto;
        height: 75px;
    }

    .pd-focus-action span {
        font-size: 9px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .pd-control-room-header h2 {
        font-size: 26px;
    }

    .pd-workflow-heading h3 {
        font-size: 22px;
    }

    .pd-agent-focus-content h3 {
        font-size: 22px;
    }

    .pd-agent-focus-actions {
        flex-wrap: wrap;
    }

    .pd-focus-action {
        min-width: 70px;
    }
}







/* =========================================
   POWER DAILY WORKFLOW SECTION
========================================= */

.power-daily-workflow-section {
    padding: 100px 0;
    /* background: #fbf9ff; */
    overflow: hidden;
}

.power-daily-workflow-container {
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
}

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

.power-daily-workflow-header {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.power-daily-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.power-daily-workflow-header h2 {
    margin: 0 0 19px;
    color: #292438;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
}

.power-daily-workflow-header h2 span {
    color: #d852ed;
}

.power-daily-workflow-header p {
    max-width: 760px;
    margin: 0 auto;
    color: #82788e;
    font-size: 15px;
    line-height: 1.9;
}

/* =========================================
   COMMAND CENTER
========================================= */

.power-daily-command-center {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 24px;
    align-items: start;
}

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

.power-daily-process-panel {
    padding: 34px 30px;
    border: 1px solid #eae0f1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(53, 30, 70, 0.05);
    transition: all 0.3s ease;
}

.power-daily-process-pannel:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.power-daily-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.power-daily-panel-header>div:first-child span {
    display: block;
    margin-bottom: 9px;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.power-daily-panel-header h3 {
    margin: 0;
    color: #2b263b;
    font-size: 23px;
    line-height: 1.35;
    font-weight: 800;
}

.power-daily-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 30px;
    color: #b03bc7;
    background: #f9eafd;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.power-daily-live-badge i {
    font-size: 7px;
}

.power-daily-panel-description {
    margin: 0 0 29px;
    color: #8b8197;
    font-size: 12px;
    line-height: 1.8;
}

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

.power-daily-workflow-path {
    position: relative;
}

.power-daily-workflow-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 14px;
    border: 1px solid #f0e8f5;
    border-radius: 14px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.power-daily-workflow-row:hover {
    border-color: rgba(216, 82, 237, 0.45);
    background: #fefbff;
    transform: translateX(4px);
}

.power-daily-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    color: #a49aaa;
    background: #f5f0f8;
    font-size: 10px;
    font-weight: 800;
}

.power-daily-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    color: #d852ed;
    background: #f9eafd;
}

.power-daily-step-icon i {
    font-size: 14px;
}

.power-daily-step-content {
    flex: 1;
    min-width: 0;
}

.power-daily-step-content h4 {
    margin: 0 0 4px;
    color: #312b40;
    font-size: 13px;
    font-weight: 800;
}

.power-daily-step-content p {
    margin: 0;
    color: #94899f;
    font-size: 10px;
    line-height: 1.6;
}

.power-daily-step-tag {
    padding: 5px 7px;
    border-radius: 5px;
    color: #b03bc7;
    background: #f9eafd;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.power-daily-highlight-step {
    border-color: rgba(216, 82, 237, 0.45);
    background: linear-gradient(100deg, #fdf6ff, #ffffff);
}

.power-daily-highlight-step .power-daily-step-number {
    color: #ffffff;
    background: #d852ed;
}

.power-daily-last-step {
    border-color: #d8efe3;
    background: #fbfffd;
}

.power-daily-last-step .power-daily-step-icon {
    color: #2d9b6b;
    background: #edf9f3;
}

.power-daily-last-step .power-daily-step-tag {
    color: #2d9b6b;
    background: #edf9f3;
}

.power-daily-path-line {
    position: relative;
    width: 1px;
    height: 17px;
    margin-left: 47px;
    background: #e2d3e9;
}

/* =========================================
   CAMPAIGN PANEL
========================================= */

.power-daily-campaign-panel {
    padding: 34px 28px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(145deg, #30203e, #1b1827);
    box-shadow: 0 20px 45px rgba(44, 28, 58, 0.13);
}

.power-daily-campaign-heading>span {
    display: block;
    margin-bottom: 13px;
    color: #dca3e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.power-daily-campaign-heading h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 500;
}

.power-daily-campaign-heading h3 strong {
    display: block;
    color: #e17af2;
    font-weight: 800;
}

.power-daily-campaign-heading p {
    margin: 0 0 28px;
    color: #c7b7d0;
    font-size: 12px;
    line-height: 1.8;
}

/* =========================================
   CAMPAIGN LIST
========================================= */

.power-daily-campaign-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.power-daily-campaign-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    transition: all 0.3s ease;
}

.power-daily-campaign-item:hover {
    border-color: rgba(216, 82, 237, 0.5);
    background: rgba(216, 82, 237, 0.1);
    transform: translateX(4px);
}

.power-daily-campaign-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #e17af2;
    background: rgba(216, 82, 237, 0.14);
}

.power-daily-campaign-icon i {
    font-size: 13px;
}

.power-daily-campaign-item>div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.power-daily-campaign-item h4 {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.power-daily-campaign-item span {
    color: #a99ab4;
    font-size: 10px;
}

.power-daily-campaign-item>i {
    color: #b58ac0;
    font-size: 10px;
}

.power-daily-campaign-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #d0b9d9;
    font-size: 10px;
    line-height: 1.6;
}

.power-daily-campaign-footer i {
    color: #e17af2;
    font-size: 15px;
}

/* =========================================
   BOTTOM SUMMARY
========================================= */

.power-daily-summary {
    display: grid;
    grid-template-columns: 1.1fr repeat(3, 1fr);
    gap: 14px;
    align-items: stretch;
    margin-top: 28px;
}

.power-daily-summary-intro,
.power-daily-summary-item {
    padding: 25px 21px;
    border: 1px solid #ebe2f2;
    border-radius: 17px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.power-daily-summary-intro,
.power-daily-summary-item:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.power-daily-summary-intro {
    background: linear-gradient(145deg, #f8eafd, #ffffff);
}

.power-daily-summary-intro>span {
    display: block;
    margin-bottom: 10px;
    color: #d852ed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.power-daily-summary-intro h3 {
    margin: 0;
    color: #332a40;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
}

.power-daily-summary-intro h3 strong {
    display: block;
    color: #d852ed;
    font-weight: 800;
}

.power-daily-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.power-daily-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #d852ed;
    background: #f9eafd;
}

.power-daily-summary-icon i {
    font-size: 14px;
}

.power-daily-summary-item h4 {
    margin: 0 0 7px;
    color: #332c40;
    font-size: 12px;
    font-weight: 800;
}

.power-daily-summary-item p {
    margin: 0;
    color: #95899f;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .power-daily-command-center {
        grid-template-columns: 1fr;
    }

    .power-daily-campaign-panel {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 25px;
        align-items: start;
    }

    .power-daily-campaign-footer {
        grid-column: 1 / -1;
    }

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

    .power-daily-summary-intro {
        grid-column: 1 / -1;
    }
}

/* =========================================
   TABLET SMALL
========================================= */

@media (max-width: 750px) {

    .power-daily-workflow-header h2 {
        font-size: 34px;
    }

    .power-daily-campaign-panel {
        display: block;
    }

    .power-daily-summary {
        grid-template-columns: 1fr;
    }

    .power-daily-summary-intro {
        grid-column: auto;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .power-daily-workflow-section {
        padding: 65px 0;
    }

    .power-daily-workflow-container {
        width: 90%;
    }

    .power-daily-workflow-header {
        margin-bottom: 38px;
    }

    .power-daily-workflow-header h2 {
        font-size: 28px;
    }

    .power-daily-workflow-header p {
        font-size: 13px;
    }

    .power-daily-process-panel {
        padding: 25px 18px;
    }

    .power-daily-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .power-daily-panel-header h3 {
        font-size: 21px;
    }

    .power-daily-workflow-row {
        align-items: flex-start;
        gap: 10px;
        padding: 13px 10px;
    }

    .power-daily-step-number {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    .power-daily-step-icon {
        width: 34px;
        height: 34px;
    }

    .power-daily-step-content h4 {
        font-size: 12px;
    }

    .power-daily-step-content p {
        font-size: 9px;
    }

    .power-daily-step-tag {
        display: none;
    }

    .power-daily-path-line {
        margin-left: 42px;
    }

    .power-daily-campaign-panel {
        padding: 28px 20px;
    }

    .power-daily-campaign-heading h3 {
        font-size: 25px;
    }

    .power-daily-summary-intro h3 {
        font-size: 22px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .power-daily-workflow-header h2 {
        font-size: 25px;
    }

    .power-daily-campaign-heading h3 {
        font-size: 23px;
    }

    .power-daily-step-content p {
        line-height: 1.5;
    }
}





/* =========================================
   AGENT FOCUS SECTION
========================================= */

.agent-focus-section {
    padding: 100px 20px;
    background: #fbf9fd;
    font-family: inherit;
    overflow: hidden;
}

.agent-focus-container {
    max-width: 1180px;
    margin: 0 auto;
}


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

.agent-focus-header {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.agent-focus-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d852ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    margin-bottom: 18px;
}

.agent-focus-eyebrow i {
    font-size: 14px;
}

.agent-focus-header h2 {
    color: #25202e;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 20px;
}

.agent-focus-header h2 span {
    color: #d852ed;
}

.agent-focus-header p {
    color: #777181;
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
}


/* =========================================
   MAIN WORKSPACE
========================================= */

.agent-focus-workspace {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 42px;
    align-items: center;
}


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

.agent-focus-content {
    padding: 15px 0;
}

.agent-focus-small-label {
    display: block;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 17px;
}

.agent-focus-intro h3 {
    color: #292331;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 18px;
}

.agent-focus-intro h3 strong {
    display: block;
    color: #d852ed;
    font-weight: 800;
}

.agent-focus-intro p {
    color: #777181;
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 30px;
}


/* =========================================
   PRIORITIES
========================================= */

.agent-focus-priorities {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.agent-focus-priority {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 18px;
    background: #ffffff;
    border: 1px solid #eee5f2;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.agent-focus-priority:hover {
    transform: translateX(6px);
    border-color: #d852ed;
    box-shadow: 0 10px 28px rgba(216, 82, 237, 0.09);
}

.agent-focus-priority-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #fbecff;
    border-radius: 11px;
    font-size: 16px;
}

.agent-focus-priority h4 {
    color: #2d2737;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}

.agent-focus-priority p {
    color: #89818f;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}


/* =========================================
   RIGHT AGENT PANEL
========================================= */

.agent-focus-panel {
    padding: 25px;
    background: #282032;
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(43, 25, 53, 0.16);
    position: relative;
    overflow: hidden;
}

.agent-focus-panel::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    top: -120px;
    right: -90px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
}

.agent-focus-panel::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    bottom: -220px;
    left: -160px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 50%;
}

.agent-focus-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    z-index: 1;
    margin-bottom: 25px;
}

.agent-focus-panel-top span {
    display: block;
    color: #b8a8c4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}

.agent-focus-panel-top h4 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

.agent-focus-live {
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: #9ef3c4 !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    padding: 7px 10px;
    border: 1px solid rgba(158, 243, 196, 0.25);
    border-radius: 20px;
    margin: 0 !important;
}

.agent-focus-live span {
    width: 6px;
    height: 6px;
    background: #74e9aa;
    border-radius: 50%;
    margin: 0 !important;
}


/* =========================================
   CUSTOMER PROFILE
========================================= */

.agent-focus-customer {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    position: relative;
    z-index: 1;
}

.agent-focus-avatar {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #d852ed, #9e47d9);
    border-radius: 12px;
    font-size: 17px;
}

.agent-focus-customer-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.agent-focus-customer-info strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.agent-focus-customer-info span {
    color: #b7aabd;
    font-size: 11px;
}

.agent-focus-call-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ef3c4;
    background: rgba(158, 243, 196, 0.1);
    border-radius: 50%;
    font-size: 13px;
}


/* =========================================
   CONVERSATION
========================================= */

.agent-focus-conversation {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 25px 0;
    position: relative;
    z-index: 1;
}

.agent-focus-message {
    max-width: 88%;
    padding: 15px 17px;
    border-radius: 14px;
}

.agent-focus-message-customer {
    align-self: flex-start;
    background: #ffffff;
    border-bottom-left-radius: 3px;
}

.agent-focus-message-agent {
    align-self: flex-end;
    background: #d852ed;
    border-bottom-right-radius: 3px;
}

.agent-focus-message-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 7px;
}

.agent-focus-message-customer .agent-focus-message-label {
    color: #a44db8;
}

.agent-focus-message-agent .agent-focus-message-label {
    color: #f8d9ff;
}

.agent-focus-message p {
    color: #62586b;
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}

.agent-focus-message-agent p {
    color: #ffffff;
}


/* =========================================
   ACTIONS
========================================= */

.agent-focus-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;
}

.agent-focus-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 7px;
    color: #c9bbd2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: center;
}

.agent-focus-action i {
    color: #d852ed;
    font-size: 15px;
}

.agent-focus-action span {
    font-size: 11px;
}

.agent-focus-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #bcaec7;
    font-size: 11px;
    text-align: center;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}

.agent-focus-panel-footer i {
    color: #d852ed;
}


/* =========================================
   MANAGER INSIGHT
========================================= */

.agent-focus-manager {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-top: 45px;
    padding: 28px 32px;
    background: #ffffff;
    border: 1px solid #eee5f2;
    border-left: 4px solid #d852ed;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(55, 30, 66, 0.05);
    transition: all 0.3s ease;
}

.agent-focus-manager:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}


.agent-focus-manager-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #fbedff;
    border-radius: 16px;
    font-size: 23px;
}

.agent-focus-manager-content {
    flex: 1;
}

.agent-focus-manager-content span {
    display: block;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}

.agent-focus-manager-content h3 {
    color: #2d2737;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 750;
    margin: 0 0 8px;
}

.agent-focus-manager-content p {
    color: #817789;
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
}

.agent-focus-manager-points {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-focus-manager-points div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64586d;
    font-size: 12px;
}

.agent-focus-manager-points i {
    color: #d852ed;
    font-size: 13px;
}


/* =========================================
   BOTTOM BENEFITS
========================================= */

.agent-focus-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.agent-focus-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 12px;
    background: #ffffff;
    border: 1px solid #eee5f2;
    border-radius: 12px;
    text-align: center;

    transition: all 0.3s ease;
}

.agent-focus-benefit:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.agent-focus-benefit i {
    color: #d852ed;
    font-size: 14px;
}

.agent-focus-benefit span {
    color: #62576b;
    font-size: 12px;
    font-weight: 700;
}


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

@media (max-width: 991px) {

    .agent-focus-section {
        padding: 75px 20px;
    }

    .agent-focus-header h2 {
        font-size: 36px;
    }

    .agent-focus-workspace {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .agent-focus-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .agent-focus-panel {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .agent-focus-manager {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .agent-focus-manager-content {
        min-width: calc(100% - 100px);
    }

    .agent-focus-manager-points {
        width: 100%;
        min-width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-left: 85px;
    }

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

}


@media (max-width: 575px) {

    .agent-focus-section {
        padding: 60px 15px;
    }

    .agent-focus-header {
        margin-bottom: 38px;
    }

    .agent-focus-header h2 {
        font-size: 29px;
    }

    .agent-focus-header p {
        font-size: 14px;
        line-height: 1.75;
    }

    .agent-focus-intro h3 {
        font-size: 26px;
    }

    .agent-focus-priority {
        padding: 15px;
    }

    .agent-focus-panel {
        padding: 19px;
        border-radius: 18px;
    }

    .agent-focus-panel-top h4 {
        font-size: 16px;
    }

    .agent-focus-live {
        padding: 6px 8px;
    }

    .agent-focus-customer {
        padding: 12px;
    }

    .agent-focus-message {
        max-width: 96%;
    }

    .agent-focus-manager {
        padding: 23px 20px;
        gap: 15px;
    }

    .agent-focus-manager-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 18px;
    }

    .agent-focus-manager-content {
        min-width: calc(100% - 63px);
    }

    .agent-focus-manager-content h3 {
        font-size: 18px;
    }

    .agent-focus-manager-points {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .agent-focus-benefits {
        grid-template-columns: 1fr;
    }

    .agent-focus-benefit {
        justify-content: flex-start;
        padding: 15px 18px;
    }

}





/* =========================================
   CALLING SHIFT SECTION
========================================= */

.calling-shift-section {
    padding: 105px 20px;

    overflow: hidden;
}

.calling-shift-container {
    max-width: 1180px;
    margin: 0 auto;
}


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

.calling-shift-header {
    max-width: 780px;
    margin: 0 auto 58px;
    text-align: center;
}

.calling-shift-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 18px;
}

.calling-shift-eyebrow i {
    font-size: 14px;
}

.calling-shift-header h2 {
    color: #28212f;
    font-size: 43px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 19px;
}

.calling-shift-header h2 span {
    color: #d852ed;
}

.calling-shift-header p {
    color: #81758b;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}


/* =========================================
   TRANSFORMATION BOARD
========================================= */

.calling-shift-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
}


/* =========================================
   SIDE PANELS
========================================= */

.calling-shift-side {
    padding: 30px;
    border-radius: 24px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.calling-shift-side:hover {
    transform: translateY(-5px);
}

.calling-shift-manual {
    background: #ffffff;
    border: 1px solid #e9e0ee;

    transition: all 0.3s ease;
}

.calling-shift-manual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.calling-shift-power {
    background: #292032;
    box-shadow: 0 20px 50px rgba(48, 26, 57, 0.14);
}


/* =========================================
   SIDE HEADINGS
========================================= */

.calling-shift-side-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
}

.calling-shift-side-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #f8eaff;
    border-radius: 15px;
    font-size: 19px;
}

.calling-shift-power .calling-shift-side-icon {
    color: #ffffff;
    background: rgba(216, 82, 237, 0.2);
}

.calling-shift-side-heading span {
    display: block;
    color: #a796b0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 7px;
}

.calling-shift-power .calling-shift-side-heading span {
    color: #bba8c6;
}

.calling-shift-side-heading h3 {
    color: #302638;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.calling-shift-power .calling-shift-side-heading h3 {
    color: #ffffff;
}


/* =========================================
   DESCRIPTION
========================================= */

.calling-shift-description {
    min-height: 130px;
}

.calling-shift-description p {
    color: #81768a;
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

.calling-shift-power .calling-shift-description p {
    color: #c3b4cc;
}


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

.calling-shift-flow {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 24px;
    border-top: 1px solid #eee6f1;
}

.calling-shift-power .calling-shift-flow {
    border-top-color: rgba(255, 255, 255, 0.13);
}

.calling-shift-flow-item {
    display: flex;
    align-items: center;
    gap: 13px;
}

.calling-shift-flow-item>span {
    width: 31px;
    height: 31px;
    min-width: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #f8eaff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.calling-shift-power .calling-shift-flow-item>span {
    color: #ffffff;
    background: rgba(216, 82, 237, 0.2);
}

.calling-shift-flow-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calling-shift-flow-item strong {
    color: #403448;
    font-size: 12px;
    font-weight: 800;
}

.calling-shift-power .calling-shift-flow-item strong {
    color: #ffffff;
}

.calling-shift-flow-item small {
    color: #9b8ca3;
    font-size: 11px;
}

.calling-shift-power .calling-shift-flow-item small {
    color: #ab9cb7;
}


/* =========================================
   SIDE FOOTER
========================================= */

.calling-shift-side-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #eee6f1;
    color: #8a788f;
    font-size: 11px;
    font-weight: 700;
}

.calling-shift-side-footer i {
    color: #d852ed;
    font-size: 13px;
}

.calling-shift-power .calling-shift-side-footer {
    color: #b9f1ce;
    border-top-color: rgba(255, 255, 255, 0.13);
}


/* =========================================
   CENTER SHIFT AREA
========================================= */

.calling-shift-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    position: relative;
}

.calling-shift-center-orbit {
    position: absolute;
    width: 105px;
    height: 105px;
    border: 1px dashed rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    animation: callingShiftRotate 18s linear infinite;
}

.calling-shift-center-orbit span {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #d852ed;
    border-radius: 50%;
}

.calling-shift-center-orbit span:nth-child(1) {
    top: -3px;
    left: 50%;
}

.calling-shift-center-orbit span:nth-child(2) {
    right: 0;
    bottom: 20px;
}

.calling-shift-center-orbit span:nth-child(3) {
    left: 4px;
    bottom: 18px;
}

.calling-shift-center-icon {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #d852ed;
    border: 7px solid #f9f7fc;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.25);
    font-size: 17px;
    position: relative;
    z-index: 1;
}

.calling-shift-center strong {
    color: #4a3753;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    position: relative;
    z-index: 1;
}

.calling-shift-center small {
    max-width: 95px;
    color: #9c8ca5;
    font-size: 10px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

@keyframes callingShiftRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   HIGHLIGHT
========================================= */

.calling-shift-highlight {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 38px;
    padding: 26px 30px;
    background: #ffffff;
    border: 1px solid #eee3f2;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(50, 28, 61, 0.04);
}

.calling-shift-highlight-mark {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #fbedff;
    border-radius: 15px;
    font-size: 20px;
}

.calling-shift-highlight-content {
    flex: 1;
}

.calling-shift-highlight-content span {
    display: block;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}

.calling-shift-highlight-content p {
    color: #65566f;
    font-size: 15px;
    line-height: 1.85;
    margin: 0;
}

.calling-shift-highlight-arrow {
    width: 39px;
    height: 39px;
    min-width: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;

    border-radius: 50%;
    font-size: 13px;
}


/* =========================================
   BOTTOM INFORMATION
========================================= */

.calling-shift-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 18px;
}

.calling-shift-bottom-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #eee5f2;
    border-radius: 13px;

    transition: all 0.3s ease;
}

.calling-shift-bottom-item:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.calling-shift-bottom-item>i {
    color: #d852ed;
    font-size: 16px;
}

.calling-shift-bottom-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calling-shift-bottom-item strong {
    color: #403449;
    font-size: 12px;
    font-weight: 800;
}

.calling-shift-bottom-item span {
    color: #9a8ba3;
    font-size: 11px;
}


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

@media (max-width: 991px) {

    .calling-shift-section {
        padding: 80px 20px;
    }

    .calling-shift-header h2 {
        font-size: 36px;
    }

    .calling-shift-board {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .calling-shift-side {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .calling-shift-center {
        height: 105px;
        flex-direction: row;
        gap: 20px;
    }

    .calling-shift-center-orbit {
        width: 95px;
        height: 95px;
    }

    .calling-shift-center-icon {
        transform: rotate(90deg);
    }

    .calling-shift-center small {
        max-width: 150px;
    }

    .calling-shift-bottom {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 575px) {

    .calling-shift-section {
        padding: 60px 15px;
    }

    .calling-shift-header {
        margin-bottom: 38px;
    }

    .calling-shift-header h2 {
        font-size: 29px;
    }

    .calling-shift-header p {
        font-size: 14px;
    }

    .calling-shift-side {
        padding: 23px;
        border-radius: 18px;
    }

    .calling-shift-side-heading {
        align-items: flex-start;
    }

    .calling-shift-side-heading h3 {
        font-size: 22px;
    }

    .calling-shift-description {
        min-height: auto;
    }

    .calling-shift-description p {
        font-size: 13px;
    }

    .calling-shift-center {
        height: 120px;
        gap: 12px;
    }

    .calling-shift-center small {
        font-size: 9px;
        max-width: 105px;
    }

    .calling-shift-highlight {
        align-items: flex-start;
        gap: 14px;
        padding: 22px 18px;

        /* Default Border */
        border: 1px solid transparent;
        border-radius: 12px;

        /* Smooth Transition */
        transition: all 0.3s ease;
    }

    .calling-shift-highlight:hover {
        border-color: #D852ED;
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
    }

    .calling-shift-highlight-mark {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 16px;
    }

    .calling-shift-highlight-content p {
        font-size: 13px;
    }

    .calling-shift-highlight-arrow {
        display: none;
    }

    .calling-shift-bottom-item {
        padding: 16px;
    }

}



/* =========================================
   DIALER CHECK SECTION
========================================= */

.dialer-check-section {
    padding: 105px 20px;
    background: #ffffff;
    overflow: hidden;
}

.dialer-check-container {
    max-width: 1180px;
    margin: 0 auto;
}


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

.dialer-check-header {
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}

.dialer-check-header-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 20px;
}

.dialer-check-header-label>span:nth-child(2) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.dialer-check-label-line {
    width: 32px;
    height: 1px;
    background: #e4c8eb;
}

.dialer-check-header h2 {
    color: #292230;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 20px;
}

.dialer-check-header h2 span {
    display: block;
    color: #d852ed;
}

.dialer-check-header p {
    max-width: 720px;
    margin: 0 auto;
    color: #81758a;
    font-size: 16px;
    line-height: 1.9;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.dialer-check-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 28px;
    align-items: stretch;
}


/* =========================================
   CHECKLIST PANEL
========================================= */

.dialer-check-list-panel {
    padding: 32px;
    background: #fbf9fd;
    border: 1px solid #eee5f2;
    border-radius: 23px;
}

.dialer-check-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.dialer-check-panel-heading span {
    display: block;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}

.dialer-check-panel-heading h3 {
    color: #302638;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 800;
    margin: 0;
}

.dialer-check-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    height: 66px;
    background: #ffffff;
    border: 1px solid #ead8ef;
    border-radius: 15px;
}

.dialer-check-count strong {
    color: #d852ed;
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
}

.dialer-check-count small {
    color: #9b8aa3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-top: 6px;
}


/* =========================================
   CHECKLIST GRID
========================================= */

.dialer-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dialer-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #eee5f2;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.dialer-check-item:hover {
    border-color: #d852ed;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(216, 82, 237, 0.08);
}

.dialer-check-item>span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    min-width: 27px;
    color: #b19ab9;
    background: #f9f1fc;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
}

.dialer-check-item>div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dialer-check-item i {
    color: #d852ed;
    font-size: 12px;
}

.dialer-check-item strong {
    color: #51425b;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
}


/* =========================================
   READINESS PANEL
========================================= */

.dialer-check-readiness {
    display: flex;
    flex-direction: column;
    padding: 31px;
    color: #ffffff;
    background: #292032;
    border-radius: 23px;
    box-shadow: 0 22px 50px rgba(49, 27, 58, 0.15);
    position: relative;
    overflow: hidden;
}

.dialer-check-readiness::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    top: -140px;
    right: -115px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
}

.dialer-check-readiness::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: -120px;
    left: -100px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 50%;
}

.dialer-check-readiness-top {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.dialer-check-readiness-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(216, 82, 237, 0.18);
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 12px;
    font-size: 16px;
}

.dialer-check-readiness-top>span {
    color: #c2aecb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.dialer-check-readiness h3 {
    color: #ffffff;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 800;
    margin: 28px 0 17px;
    position: relative;
    z-index: 1;
}

.dialer-check-readiness h3 strong {
    display: block;
    color: #d852ed;
}

.dialer-check-readiness>p {
    color: #b9a9c4;
    font-size: 13px;
    line-height: 1.85;
    margin: 0 0 30px;
    position: relative;
    z-index: 1;
}


/* =========================================
   READINESS INDICATORS
========================================= */

.dialer-check-indicators {
    display: flex;
    flex-direction: column;
    gap: 23px;
    position: relative;
    z-index: 1;
}

.dialer-check-indicator-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dialer-check-indicator-heading span {
    color: #d9cbdF;
    font-size: 11px;
}

.dialer-check-indicator-heading i {
    color: #a2efc5;
    font-size: 12px;
}

.dialer-check-progress {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.dialer-check-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(to right,
            #a944bd,
            #d852ed);
    border-radius: 20px;
}


/* =========================================
   READINESS FOOTER
========================================= */

.dialer-check-readiness-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 30px;
    color: #c7b7d0;
    font-size: 10px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.dialer-check-readiness-footer i {
    color: #d852ed;
    font-size: 13px;
}


/* =========================================
   AGENT USABILITY
========================================= */

.dialer-check-usability {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-top: 32px;
    padding: 29px 32px;
    background: #fbf4fe;
    border: 1px solid #f0ddf5;
    border-left: 4px solid #d852ed;
    border-radius: 18px;
}

.dialer-check-usability-symbol {
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #ffffff;
    border: 1px solid #efd9f5;
    border-radius: 16px;
    font-size: 22px;
}

.dialer-check-usability-content {
    flex: 1;
}

.dialer-check-usability-content>span {
    display: block;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}

.dialer-check-usability-content h3 {
    color: #33263c;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;
    margin: 0 0 8px;
}

.dialer-check-usability-content p {
    color: #75647f;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

.dialer-check-usability-mark {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;

    border-radius: 50%;
    font-size: 13px;
}


/* =========================================
   BOTTOM INFORMATION
========================================= */

.dialer-check-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.dialer-check-bottom-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 10px;
    background: #ffffff;
    border: 1px solid #eee5f2;
    border-radius: 12px;
    text-align: center;

    transition: all 0.3s ease;
}

.dialer-check-bottom-item:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.dialer-check-bottom-item i {
    color: #d852ed;
    font-size: 13px;
}

.dialer-check-bottom-item span {
    color: #71617b;
    font-size: 11px;
    font-weight: 700;
}


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

@media (max-width: 991px) {

    .dialer-check-section {
        padding: 80px 20px;
    }

    .dialer-check-header h2 {
        font-size: 36px;
    }

    .dialer-check-layout {
        grid-template-columns: 1fr;
    }

    .dialer-check-list-panel,
    .dialer-check-readiness {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .dialer-check-readiness {
        min-height: 420px;
    }

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

}


@media (max-width: 575px) {

    .dialer-check-section {
        padding: 60px 15px;
    }

    .dialer-check-header {
        margin-bottom: 38px;
    }

    .dialer-check-header h2 {
        font-size: 29px;
    }

    .dialer-check-header p {
        font-size: 14px;
    }

    .dialer-check-list-panel,
    .dialer-check-readiness {
        padding: 22px;
        border-radius: 18px;
    }

    .dialer-check-panel-heading {
        align-items: flex-start;
    }

    .dialer-check-panel-heading h3 {
        font-size: 17px;
    }

    .dialer-check-count {
        min-width: 55px;
        height: 55px;
    }

    .dialer-check-count strong {
        font-size: 21px;
    }

    .dialer-check-grid {
        grid-template-columns: 1fr;
    }

    .dialer-check-item {
        min-height: 58px;
    }

    .dialer-check-readiness h3 {
        font-size: 25px;
    }

    .dialer-check-usability {
        align-items: flex-start;
        gap: 14px;
        padding: 23px 18px;
    }

    .dialer-check-usability-symbol {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 17px;
    }

    .dialer-check-usability-content h3 {
        font-size: 18px;
    }

    .dialer-check-usability-content p {
        font-size: 13px;
    }

    .dialer-check-usability-mark {
        display: none;
    }

    .dialer-check-bottom {
        grid-template-columns: 1fr;
    }

    .dialer-check-bottom-item {
        justify-content: flex-start;
        padding: 15px 18px;
    }

}




/* ==========================================
   BUSINESS FIT ORBIT SECTION
========================================== */

.business-fit-orbit-section {
    position: relative;
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}

.business-fit-orbit-container {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}


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

.business-fit-orbit-header {
    max-width: 780px;
    margin: 0 auto 70px;
    text-align: center;
}

.business-fit-orbit-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #c044d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.business-fit-orbit-tag i {
    font-size: 13px;
}

.business-fit-orbit-header h2 {
    margin: 0;
    color: #24202d;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
}

.business-fit-orbit-header h2 span {
    color: #d852ed;
}

.business-fit-orbit-header p {
    max-width: 620px;
    margin: 20px auto 0;
    color: #817989;
    font-size: 15px;
    line-height: 1.9;
}


/* ==========================================
   ORBIT MAIN LAYOUT
========================================== */

.business-fit-orbit-layout {
    position: relative;
    width: 900px;
    height: 720px;
    margin: 0 auto;
}


/* ==========================================
   ORBIT RINGS
========================================== */

.business-fit-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(216, 82, 237, 0.30);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ring-one {
    width: 470px;
    height: 470px;
}

.ring-two {
    width: 650px;
    height: 650px;
    border-color: rgba(216, 82, 237, 0.15);
}


/* ==========================================
   CENTER CORE
========================================== */

.business-fit-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 290px;
    height: 290px;
    padding: 35px;
    border: 7px solid #f8e7fc;
    border-radius: 50%;
    background: #292333;
    box-shadow:
        0 0 0 1px rgba(216, 82, 237, 0.14),
        0 22px 65px rgba(49, 31, 62, 0.20);
    text-align: center;
    transform: translate(-50%, -50%);
}

.business-fit-orbit-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #d852ed;
    color: #ffffff;
    font-size: 17px;
}

.business-fit-orbit-center>span {
    color: #e39af0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.business-fit-orbit-center h3 {
    margin: 13px 0 10px;
    color: #ffffff;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
}

.business-fit-orbit-center h3 strong {
    display: block;
    color: #d852ed;
}

.business-fit-orbit-center p {
    margin: 0;
    color: #bdb2c6;
    font-size: 11px;
    line-height: 1.7;
}

.business-fit-orbit-center-line {
    width: 40px;
    height: 2px;
    margin: 17px 0 12px;
    background: #d852ed;
}

.business-fit-orbit-center small {
    color: #8d8099;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* ==========================================
   ORBIT FACTOR ITEMS
========================================== */

.business-fit-orbit-item {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 265px;
    padding: 19px;
    border: 1px solid #eee4f3;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(55, 31, 72, 0.07);
    transition: all 0.3s ease;
}

.business-fit-orbit-item:hover {
    border-color: rgba(216, 82, 237, 0.45);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.12);
    transform: translateY(-5px);
}

.business-fit-orbit-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #f9eafd;
    color: #d852ed;
    font-size: 14px;
}

.business-fit-orbit-item strong {
    display: block;
    margin-bottom: 6px;
    color: #302839;
    font-size: 13px;
    font-weight: 800;
}

.business-fit-orbit-item p {
    margin: 0;
    color: #887e91;
    font-size: 11px;
    line-height: 1.7;
}


/* ==========================================
   FACTOR POSITIONS
========================================== */

.orbit-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-top:hover {
    transform: translateX(-50%) translateY(-5px);
}

.orbit-left {
    top: 245px;
    left: 0;
}

.orbit-right {
    top: 245px;
    right: 0;
}

.orbit-bottom-left {
    bottom: 0;
    left: 55px;
}

.orbit-bottom-right {
    right: 55px;
    bottom: 0;
}


/* ==========================================
   CONTENT BELOW ORBIT
========================================== */

.business-fit-orbit-content {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    max-width: 950px;
    margin: 40px auto 0;
    padding: 34px 40px;
    border-radius: 20px;
    background: #fbf7fd;
}

.business-fit-orbit-content-number {
    color: #d852ed;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.business-fit-orbit-content-text h3 {
    margin: 0 0 12px;
    color: #2b2535;
    font-size: 23px;
    font-weight: 800;
}

.business-fit-orbit-content-text p {
    margin: 0 0 10px;
    color: #7d7286;
    font-size: 13px;
    line-height: 1.85;
}

.business-fit-orbit-content-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   FOOTER STATEMENT
========================================== */

.business-fit-orbit-footer {
    display: flex;
    align-items: center;
    gap: 17px;
    max-width: 950px;
    margin: 22px auto 0;
    padding: 21px 28px;
    border-top: 1px solid #eee6f2;
    border-bottom: 1px solid #eee6f2;
}

.business-fit-orbit-footer-icon {
    display: flex;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 14px;
}

.business-fit-orbit-footer p {
    margin: 0;
    color: #82778b;
    font-size: 12px;
    line-height: 1.8;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

    .business-fit-orbit-layout {
        width: 700px;
        height: 690px;
    }

    .ring-one {
        width: 420px;
        height: 420px;
    }

    .ring-two {
        width: 580px;
        height: 580px;
    }

    .business-fit-orbit-item {
        width: 225px;
    }

    .orbit-left {
        left: -10px;
    }

    .orbit-right {
        right: -10px;
    }

    .orbit-bottom-left {
        left: 0;
    }

    .orbit-bottom-right {
        right: 0;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .business-fit-orbit-section {
        padding: 70px 0;
    }

    .business-fit-orbit-container {
        width: 92%;
    }

    .business-fit-orbit-header {
        margin-bottom: 40px;
    }

    .business-fit-orbit-header h2 {
        font-size: 31px;
    }

    .business-fit-orbit-header p {
        font-size: 13px;
    }

    .business-fit-orbit-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        height: auto;
    }

    .business-fit-orbit-ring {
        display: none;
    }

    .business-fit-orbit-center {
        position: relative;
        top: auto;
        left: auto;
        order: 1;
        width: 275px;
        height: 275px;
        margin: 0 auto 22px;
        transform: none;
    }

    .business-fit-orbit-item {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        order: 2;
        width: 100%;
        box-sizing: border-box;
    }

    .orbit-top,
    .orbit-top:hover {
        transform: none;
    }

    .orbit-left,
    .orbit-right,
    .orbit-bottom-left,
    .orbit-bottom-right {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .business-fit-orbit-content {
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
        padding: 27px 22px;
    }

    .business-fit-orbit-content-number {
        font-size: 25px;
    }

    .business-fit-orbit-content-text h3 {
        font-size: 21px;
    }

    .business-fit-orbit-content-text p {
        font-size: 12px;
    }

    .business-fit-orbit-footer {
        align-items: flex-start;
        padding: 20px 5px;
    }

    .business-fit-orbit-footer p {
        font-size: 11px;
    }

}






/* =========================================
   EFFICIENT CALLING WORKFLOW
========================================= */

.efficient-workflow-section {
    position: relative;
    padding: 105px 0;
    background: #f8f6fc;
    overflow: hidden;
}

.efficient-workflow-section::before {
    content: "";
    position: absolute;
    top: -170px;
    right: -140px;
    width: 430px;
    height: 430px;
    border: 70px solid rgba(216, 82, 237, 0.06);
    border-radius: 50%;
}

.efficient-workflow-container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}


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

.efficient-workflow-heading {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.efficient-workflow-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
    color: #c044d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.efficient-workflow-heading h2 {
    margin: 0;
    color: #282331;
    font-size: 43px;
    font-weight: 800;
    line-height: 1.25;
}

.efficient-workflow-heading h2 span {
    color: #d852ed;
}


/* =========================================
   EDITORIAL MAIN LAYOUT
========================================= */

.efficient-workflow-editorial {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 330px;
    gap: 38px;
    align-items: stretch;
}


/* =========================================
   NUMBER PANEL
========================================= */

.efficient-workflow-number-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 5px;
}

.efficient-workflow-number {
    color: #d852ed;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
}

.efficient-workflow-vertical-line {
    width: 1px;
    height: 145px;
    margin: 28px 0;
    background: linear-gradient(to bottom,
            #d852ed,
            rgba(216, 82, 237, 0.08));
}

.efficient-workflow-number-label {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.efficient-workflow-number-label span {
    color: #a69aae;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.efficient-workflow-number-label strong {
    color: #33283d;
    font-size: 12px;
    letter-spacing: 2px;
}


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

.efficient-workflow-content {
    padding: 10px 0 10px 5px;
}

.efficient-workflow-content-tag {
    display: inline-block;
    margin-bottom: 15px;
    color: #b640cd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.efficient-workflow-intro h3 {
    max-width: 510px;
    margin: 0 0 37px;
    color: #2b2434;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
}


/* =========================================
   ORIGINAL CONTENT PARAGRAPHS
========================================= */

.efficient-workflow-paragraph {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e9e1ef;
}

.efficient-workflow-paragraph:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.efficient-workflow-paragraph-marker {
    display: flex;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-top: 3px;
    border-radius: 10px;
    background: #ffffff;
    color: #d852ed;
    box-shadow: 0 5px 18px rgba(68, 38, 80, 0.06);
    font-size: 13px;
}

.efficient-workflow-paragraph p {
    margin: 0;
    color: #756b80;
    font-size: 14px;
    line-height: 1.95;
}


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

.efficient-workflow-visual {
    position: relative;
    padding: 26px 24px;
    border-radius: 22px;
    background: #292333;
    box-shadow: 0 20px 55px rgba(48, 31, 60, 0.15);
    overflow: hidden;
}

.efficient-workflow-visual::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border: 35px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}

.efficient-workflow-visual-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.efficient-workflow-visual-top span {
    color: #b9adbf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.efficient-workflow-visual-top i {
    color: #d852ed;
    font-size: 15px;
}

.efficient-workflow-visual-main {
    position: relative;
    z-index: 1;
    padding: 32px 0 27px;
}

.efficient-workflow-visual-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 21px;
    border-radius: 14px;
    background: #d852ed;
    color: #ffffff;
    font-size: 18px;
}

.efficient-workflow-visual-main h4 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.35;
}

.efficient-workflow-visual-main h4 span {
    display: block;
    color: #d852ed;
}

.efficient-workflow-visual-main p {
    margin: 0;
    color: #b4a8bd;
    font-size: 12px;
    line-height: 1.8;
}


/* =========================================
   VISUAL WORKFLOW STEPS
========================================= */

.efficient-workflow-visual-steps {
    position: relative;
    z-index: 1;
    padding-top: 23px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.efficient-workflow-visual-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 22px;
}

.efficient-workflow-visual-step:last-child {
    padding-bottom: 0;
}

.efficient-workflow-step-dot {
    position: relative;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border: 2px solid #8e7d99;
    border-radius: 50%;
}

.efficient-workflow-step-dot.active {
    border-color: #d852ed;
    background: #d852ed;
    box-shadow: 0 0 0 5px rgba(216, 82, 237, 0.10);
}

.efficient-workflow-visual-step:not(:last-child) .efficient-workflow-step-dot::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 2px;
    width: 1px;
    height: 37px;
    background: rgba(255, 255, 255, 0.15);
}

.efficient-workflow-visual-step strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.efficient-workflow-visual-step small {
    display: block;
    color: #95879f;
    font-size: 10px;
    line-height: 1.5;
}


/* =========================================
   BOTTOM HIGHLIGHT
========================================= */

.efficient-workflow-bottom {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 40px;
    padding: 24px 30px;
    border: 1px solid #eadcf0;
    border-radius: 17px;
    background: #ffffff;
}

.efficient-workflow-bottom-icon {
    display: flex;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 17px;
}

.efficient-workflow-bottom strong {
    display: block;
    margin-bottom: 5px;
    color: #30263a;
    font-size: 14px;
    font-weight: 800;
}

.efficient-workflow-bottom p {
    margin: 0;
    color: #81758b;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .efficient-workflow-editorial {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 25px;
    }

    .efficient-workflow-visual {
        grid-column: 2;
        margin-top: 10px;
    }

    .efficient-workflow-number {
        font-size: 45px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .efficient-workflow-section {
        padding: 70px 0;
    }

    .efficient-workflow-container {
        width: 92%;
    }

    .efficient-workflow-heading {
        margin-bottom: 38px;
    }

    .efficient-workflow-heading h2 {
        font-size: 30px;
    }

    .efficient-workflow-eyebrow {
        font-size: 9px;
    }

    .efficient-workflow-editorial {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .efficient-workflow-number-panel {
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        margin-bottom: 27px;
    }

    .efficient-workflow-number {
        font-size: 42px;
    }

    .efficient-workflow-vertical-line {
        width: 55px;
        height: 1px;
        margin: 20px 0 0;
        background: #d852ed;
    }

    .efficient-workflow-number-label {
        align-items: flex-start;
        flex-direction: row;
        gap: 5px;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .efficient-workflow-number-label span,
    .efficient-workflow-number-label strong {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .efficient-workflow-content {
        padding: 0;
    }

    .efficient-workflow-intro h3 {
        margin-bottom: 30px;
        font-size: 25px;
    }

    .efficient-workflow-paragraph {
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .efficient-workflow-paragraph-marker {
        flex: 0 0 31px;
        width: 31px;
        height: 31px;
        font-size: 11px;
    }

    .efficient-workflow-paragraph p {
        font-size: 12px;
        line-height: 1.85;
    }

    .efficient-workflow-visual {
        margin-top: 30px;
        padding: 25px 21px;
        border-radius: 18px;
    }

    .efficient-workflow-visual-main h4 {
        font-size: 22px;
    }

    .efficient-workflow-bottom {
        align-items: flex-start;
        gap: 12px;
        margin-top: 25px;
        padding: 21px 18px;
    }

    .efficient-workflow-bottom-icon {
        flex: 0 0 37px;
        width: 37px;
        height: 37px;
        font-size: 14px;
    }

    .efficient-workflow-bottom strong {
        font-size: 13px;
    }

    .efficient-workflow-bottom p {
        font-size: 11px;
    }

}




/* ==========================================
   AI VOICE AGENT
   PROBLEM HANDLING SECTION
========================================== */

.voice-problem-section {
    position: relative;
    padding: 110px 0;
    background: #f8f6fc;
    overflow: hidden;
}

.voice-problem-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -180px;
    width: 430px;
    height: 430px;
    border: 65px solid rgba(216, 82, 237, 0.055);
    border-radius: 50%;
}

.voice-problem-section::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -180px;
    width: 420px;
    height: 420px;
    border: 65px solid rgba(216, 82, 237, 0.055);
    border-radius: 50%;
}

.voice-problem-container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}


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

.voice-problem-header {
    margin-bottom: 55px;
    text-align: center;
}

.voice-problem-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #c044d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.voice-problem-header h2 {
    max-width: 800px;
    margin: 0 auto;
    color: #282331;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.22;
}

.voice-problem-header h2 span {
    color: #d852ed;
}

.voice-problem-header-line {
    width: 65px;
    height: 4px;
    margin: 25px auto 0;
    border-radius: 20px;
    background: #d852ed;
}


/* ==========================================
   INTRO STRIP
========================================== */

.voice-problem-intro {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 31px 36px;
    border: 1px solid #eee3f3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(55, 31, 72, 0.05);
    transition: all 0.3s ease;
}

.voice-problem-intro:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.voice-problem-intro-number {
    color: #d852ed;
    font-size: 45px;
    font-weight: 800;
    line-height: 1;
}

.voice-problem-intro-content {
    flex: 1;
}

.voice-problem-intro-content h3 {
    margin: 0 0 10px;
    color: #30273a;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
}

.voice-problem-intro-content h3 span {
    color: #d852ed;
}

.voice-problem-intro-content p {
    margin: 0;
    color: #7e7388;
    font-size: 14px;
    line-height: 1.8;
}

.voice-problem-intro-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 25px;
}


/* ==========================================
   PROBLEM JOURNEY
========================================== */

.voice-problem-journey {
    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 35px;
}

.voice-problem-call-types,
.voice-problem-followup {
    padding: 32px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(55, 31, 72, 0.05);

    transition: all 0.3s ease;
}

/* Hover Effect */
.voice-problem-call-types:hover,
.voice-problem-followup:hover {

    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.30);
    transform: translateY(-5px);
}


.voice-problem-call-types {
    border-top: 4px solid #d852ed;
}

.voice-problem-followup {
    border-top: 4px solid #33283d;
}

.voice-problem-side-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.voice-problem-side-label span {
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
}

.voice-problem-side-label strong {
    color: #a39aab;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.voice-problem-call-types h3,
.voice-problem-followup h3 {
    margin: 0 0 15px;
    color: #30273a;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
}

.voice-problem-call-types p,
.voice-problem-followup p {
    margin: 0;
    color: #7c7186;
    font-size: 13px;
    line-height: 1.9;
}


/* ==========================================
   REQUEST LIST
========================================== */

.voice-problem-request-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 25px;
}

.voice-problem-request {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 9px;
    background: #faf5fd;
    color: #786981;
    font-size: 10px;
    font-weight: 700;
}

.voice-problem-request i {
    color: #d852ed;
    font-size: 11px;
}


/* ==========================================
   CENTER CONNECTOR
========================================== */

.voice-problem-connector {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
}

.voice-problem-connector-line {
    width: 1px;
    height: 70px;
    background: linear-gradient(to bottom,
            transparent,
            #d852ed,
            transparent);
}

.voice-problem-connector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d852ed;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.23);
}

.voice-problem-connector span {
    color: #a69aae;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    writing-mode: vertical-rl;
}


/* ==========================================
   FOLLOW-UP PANEL
========================================== */

.voice-problem-followup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: #33283d;
    color: #d852ed;
    font-size: 19px;
}

.voice-problem-followup-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    padding: 13px 15px;
    border-radius: 10px;
    background: #f9f2fb;
    color: #85768e;
    font-size: 11px;
    font-weight: 700;
}

.voice-problem-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d852ed;
    box-shadow: 0 0 0 5px rgba(216, 82, 237, 0.10);
}


/* ==========================================
   CORE PROBLEM STATEMENT
========================================== */

.voice-problem-core {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 160px;
    gap: 30px;
    align-items: center;
    margin-top: 35px;
    padding: 40px;
    border-radius: 22px;
    background: #292333;
    box-shadow: 0 20px 50px rgba(48, 31, 60, 0.12);
}

.voice-problem-core-heading {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13px;
}

.voice-problem-core-number {
    color: #d852ed;
    font-size: 37px;
    font-weight: 800;
}

.voice-problem-core-label {
    color: #a99cb3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.voice-problem-core-content h3 {
    margin: 0 0 17px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
}

.voice-problem-core-content h3 span {
    color: #d852ed;
}

.voice-problem-core-content p {
    margin: 0;
    color: #b9adbf;
    font-size: 15px;
    line-height: 1.8;
}

.voice-problem-core-visual {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13px;
}

.voice-problem-core-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.10);
    color: #d852ed;
    font-size: 27px;
}

.voice-problem-core-visual span {
    color: #988aa3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* ==========================================
   EXAMPLE SECTION
========================================== */

.voice-problem-example {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 45px;
    align-items: center;
    margin-top: 35px;
    padding: 38px 40px;
    border: 1px solid #eadff0;
    border-radius: 20px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.voice-problem-example:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.voice-problem-example-visual {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.voice-problem-example-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 28px;
}

.voice-problem-example-line {
    width: 1px;
    height: 45px;
    margin: 15px 0;
    background: #d852ed;
}

.voice-problem-example-visual span {
    color: #a79aac;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
}

.voice-problem-example-tag {
    display: inline-block;
    margin-bottom: 15px;
    color: #bd45d4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.voice-problem-example-content h3 {
    max-width: 520px;
    margin: 0 0 17px;
    color: #30273a;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

.voice-problem-example-content p {
    max-width: 650px;
    margin: 0;
    color: #7d7186;
    font-size: 14px;
    line-height: 1.9;
}


/* ==========================================
   AI SOLUTION PANEL
========================================== */

.voice-problem-solution {
    margin-top: 35px;
    padding: 38px 40px;
    border-radius: 22px;
    background: linear-gradient(125deg,
            #30243a 0%,
            #292333 60%,
            #38213e 100%);
    box-shadow: 0 20px 55px rgba(48, 31, 60, 0.15);
}

.voice-problem-solution-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.voice-problem-solution-label {
    color: #dca0e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.voice-problem-solution-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(216, 82, 237, 0.30);
    border-radius: 20px;
    color: #e8a1f4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.voice-problem-solution-main {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 45px;
    align-items: center;
    padding-top: 32px;
}

.voice-problem-solution-copy h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.35;
}

.voice-problem-solution-copy h3 span {
    display: block;
    color: #d852ed;
}

.voice-problem-solution-copy p {
    margin: 0;
    color: #bcaec4;
    font-size: 13px;
    line-height: 1.9;
}


/* ==========================================
   AI FLOW
========================================== */

.voice-problem-solution-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.voice-problem-flow-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    min-width: 78px;
    text-align: center;
}

.voice-problem-flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 15px;
    background: rgba(216, 82, 237, 0.12);
    color: #e08aef;
    font-size: 18px;
}

.voice-problem-flow-item span {
    color: #b6a7c0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.voice-problem-flow-arrow {
    color: #d852ed;
    font-size: 13px;
}


/* ==========================================
   BOTTOM MESSAGE
========================================== */

.voice-problem-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 22px 28px;
    border: 1px solid #eadcf0;
    border-radius: 16px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.voice-problem-bottom:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.voice-problem-bottom>i {
    color: #d852ed;
    font-size: 18px;
}

.voice-problem-bottom p {
    margin: 0;
    color: #80738b;
    font-size: 13px;
    line-height: 1.8;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1050px) {

    .voice-problem-journey {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .voice-problem-connector {
        flex-direction: row;
        gap: 14px;
    }

    .voice-problem-connector-line {
        width: 70px;
        height: 1px;
    }

    .voice-problem-connector span {
        writing-mode: horizontal-tb;
    }

    .voice-problem-solution-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .voice-problem-section {
        padding: 70px 0;
    }

    .voice-problem-container {
        width: 92%;
    }

    .voice-problem-header {
        margin-bottom: 38px;
    }

    .voice-problem-header h2 {
        font-size: 31px;
    }

    .voice-problem-intro {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 18px;
        padding: 25px 22px;
    }

    .voice-problem-intro-number {
        font-size: 35px;
    }

    .voice-problem-intro-content {
        flex-basis: calc(100% - 65px);
    }

    .voice-problem-intro-content h3 {
        font-size: 22px;
    }

    .voice-problem-intro-content p {
        font-size: 12px;
    }

    .voice-problem-intro-symbol {
        display: none;
    }

    .voice-problem-call-types,
    .voice-problem-followup {
        padding: 25px 21px;
    }

    .voice-problem-call-types h3,
    .voice-problem-followup h3 {
        font-size: 22px;
    }

    .voice-problem-request-list {
        grid-template-columns: 1fr;
    }

    .voice-problem-core {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 30px 24px;
    }

    .voice-problem-core-heading {
        align-items: flex-start;
        flex-direction: row;
        gap: 13px;
    }

    .voice-problem-core-label {
        writing-mode: horizontal-tb;
        transform: none;
        padding-top: 10px;
    }

    .voice-problem-core-content h3 {
        font-size: 25px;
    }

    .voice-problem-core-content p {
        font-size: 13px;
    }

    .voice-problem-core-visual {
        align-items: flex-start;
    }

    .voice-problem-example {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 30px 23px;
    }

    .voice-problem-example-visual {
        align-items: flex-start;
    }

    .voice-problem-example-line {
        display: none;
    }

    .voice-problem-example-content h3 {
        font-size: 24px;
    }

    .voice-problem-example-content p {
        font-size: 12px;
    }

    .voice-problem-solution {
        padding: 28px 22px;
    }

    .voice-problem-solution-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .voice-problem-solution-copy h3 {
        font-size: 25px;
    }

    .voice-problem-solution-copy p {
        font-size: 12px;
    }

    .voice-problem-solution-flow {
        flex-wrap: wrap;
        gap: 13px;
    }

    .voice-problem-flow-item {
        min-width: 65px;
        flex: 1;
    }

    .voice-problem-flow-arrow {
        font-size: 10px;
    }

    .voice-problem-flow-icon {
        width: 43px;
        height: 43px;
        font-size: 15px;
    }

    .voice-problem-flow-item span {
        font-size: 9px;
    }

    .voice-problem-bottom {
        align-items: flex-start;
        padding: 20px;
    }

    .voice-problem-bottom p {
        font-size: 11px;
    }

}







/* ==========================================
   AI VOICE CONVERSATION EXPERIENCE
========================================== */

.voice-conversation-section {
    position: relative;
    padding: 110px 0;
    background: #f8f6fc;
    overflow: hidden;
}

.voice-conversation-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -160px;
    width: 450px;
    height: 450px;
    border: 75px solid rgba(216, 82, 237, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.voice-conversation-section::after {
    content: "";
    position: absolute;
    bottom: -190px;
    left: -160px;
    width: 430px;
    height: 430px;
    border: 65px solid rgba(216, 82, 237, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.voice-conversation-container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}


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

.voice-conversation-header {
    max-width: 850px;
    margin: 0 auto 62px;
    text-align: center;
}

.voice-conversation-heading-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 19px;
}

.voice-conversation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #c044d8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.voice-conversation-eyebrow i {
    font-size: 13px;
}

.voice-conversation-heading-line {
    width: 45px;
    height: 1px;
    background: #d852ed;
}

.voice-conversation-header h2 {
    margin: 0;
    color: #282331;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.22;
}

.voice-conversation-header h2 span {
    display: block;
    color: #d852ed;
}

.voice-conversation-header p {
    max-width: 610px;
    margin: 20px auto 0;
    color: #81758b;
    font-size: 14px;
    line-height: 1.9;
}


/* ==========================================
   MAIN CONVERSATION STAGE
========================================== */

.voice-conversation-stage {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 30px;
    align-items: stretch;
}


/* ==========================================
   LEFT INTRO PANEL
========================================== */

.voice-conversation-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px;
    border: 1px solid #e9dff0;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(57, 31, 74, 0.06);
    overflow: hidden;

    transition: all 0.3s ease;
}

.voice-conversation-intro:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.voice-conversation-intro::after {
    content: "";
    position: absolute;
    right: -85px;
    bottom: -85px;
    width: 220px;
    height: 220px;
    border: 35px solid rgba(216, 82, 237, 0.07);
    border-radius: 50%;
}

.voice-conversation-intro-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 52px;
}

.voice-conversation-intro-top>span {
    color: #a99cb2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.voice-conversation-live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #bd45d4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.voice-conversation-live-dot span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d852ed;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.10);
}

.voice-conversation-intro h3 {
    position: relative;
    z-index: 1;
    max-width: 350px;
    margin: 0 0 20px;
    color: #30273a;
    font-size: 31px;
    font-weight: 800;
    line-height: 1.3;
}

.voice-conversation-intro h3 strong {
    display: block;
    color: #d852ed;
}

.voice-conversation-intro p {
    position: relative;
    z-index: 1;
    max-width: 330px;
    margin: 0;
    color: #7d7186;
    font-size: 13px;
    line-height: 1.9;
}


/* ==========================================
   WAVEFORM
========================================== */

.voice-conversation-wave {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 65px;
    margin-top: auto;
    padding-top: 30px;
}

.voice-conversation-wave span {
    display: block;
    width: 4px;
    border-radius: 10px;
    background: #d852ed;
    opacity: 0.75;
}

.voice-conversation-wave span:nth-child(1) {
    height: 14px;
}

.voice-conversation-wave span:nth-child(2) {
    height: 27px;
}

.voice-conversation-wave span:nth-child(3) {
    height: 39px;
}

.voice-conversation-wave span:nth-child(4) {
    height: 22px;
}

.voice-conversation-wave span:nth-child(5) {
    height: 47px;
}

.voice-conversation-wave span:nth-child(6) {
    height: 31px;
}

.voice-conversation-wave span:nth-child(7) {
    height: 54px;
}

.voice-conversation-wave span:nth-child(8) {
    height: 36px;
}

.voice-conversation-wave span:nth-child(9) {
    height: 22px;
}

.voice-conversation-wave span:nth-child(10) {
    height: 44px;
}

.voice-conversation-wave span:nth-child(11) {
    height: 31px;
}

.voice-conversation-wave span:nth-child(12) {
    height: 51px;
}

.voice-conversation-wave span:nth-child(13) {
    height: 25px;
}

.voice-conversation-wave span:nth-child(14) {
    height: 40px;
}

.voice-conversation-wave span:nth-child(15) {
    height: 17px;
}

.voice-conversation-wave span:nth-child(16) {
    height: 31px;
}

.voice-conversation-wave span:nth-child(17) {
    height: 46px;
}

.voice-conversation-wave span:nth-child(18) {
    height: 26px;
}

.voice-conversation-wave span:nth-child(19) {
    height: 17px;
}

.voice-conversation-wave span:nth-child(20) {
    height: 33px;
}

.voice-conversation-intro-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #eee5f3;
    color: #8c7e96;
    font-size: 10px;
    font-weight: 700;
}

.voice-conversation-intro-footer i {
    color: #d852ed;
    font-size: 13px;
}


/* ==========================================
   CHAT PANEL
========================================== */

.voice-conversation-chat {
    border-radius: 24px;
    background: #292333;
    box-shadow: 0 20px 55px rgba(47, 29, 60, 0.15);
    overflow: hidden;
}

.voice-conversation-chat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.voice-conversation-agent-profile {
    display: flex;
    align-items: center;
    gap: 13px;
}

.voice-conversation-agent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: #d852ed;
    color: #ffffff;
    font-size: 16px;
}

.voice-conversation-agent-profile strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.voice-conversation-agent-profile span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a99bb4;
    font-size: 10px;
}

.voice-conversation-agent-profile span i {
    color: #d852ed;
    font-size: 6px;
}

.voice-conversation-chat-menu {
    color: #95869f;
    font-size: 16px;
}


/* ==========================================
   CHAT BODY
========================================== */

.voice-conversation-chat-body {
    padding: 29px 28px;
}

.voice-conversation-message {
    max-width: 88%;
    margin-bottom: 25px;
}

.voice-conversation-message.customer-message {
    margin-left: auto;
}

.voice-conversation-message.ai-message {
    margin-right: auto;
}

.voice-conversation-message-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

.voice-conversation-message-label span {
    color: #d5c8dd;
    font-size: 10px;
    font-weight: 800;
}

.voice-conversation-message-label small {
    color: #756780;
    font-size: 9px;
}

.voice-conversation-bubble {
    padding: 15px 17px;
    border-radius: 15px;
    color: #c4b6cc;
    font-size: 12px;
    line-height: 1.8;
}

.customer-message .voice-conversation-bubble {
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-top-right-radius: 4px;
    background: rgba(216, 82, 237, 0.10);
}

.ai-message .voice-conversation-bubble {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-top-left-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}


/* ==========================================
   PROCESSING STATUS
========================================== */

.voice-conversation-processing {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 30px;
    padding: 15px;
    border: 1px solid rgba(216, 82, 237, 0.20);
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.07);
}

.voice-conversation-processing-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.15);
    color: #d852ed;
    font-size: 13px;
}

.voice-conversation-processing div {
    flex: 1;
}

.voice-conversation-processing strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.voice-conversation-processing span {
    display: block;
    color: #95869f;
    font-size: 9px;
    line-height: 1.5;
}

.voice-conversation-processing>i {
    color: #d852ed;
    font-size: 13px;
}


/* ==========================================
   CHAT FOOTER
========================================== */

.voice-conversation-chat-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: #9d8ea8;
    font-size: 10px;
}

.voice-conversation-chat-bottom>i {
    color: #d852ed;
    font-size: 13px;
}

.voice-conversation-chat-status {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: #d852ed;
}


/* ==========================================
   EXPLANATION BLOCK
========================================== */

.voice-conversation-explanation {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 100px;
    gap: 30px;
    align-items: center;
    margin-top: 35px;
    padding: 40px;
    border: 1px solid #e9dff0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(55, 31, 72, 0.04);

    transition: all 0.3s ease;
}

.voice-conversation-explanation:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.voice-conversation-explanation-number {
    color: #d852ed;
    font-size: 43px;
    font-weight: 800;
    line-height: 1;
}

.voice-conversation-section-label {
    display: inline-block;
    margin-bottom: 13px;
    color: #b044c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.voice-conversation-explanation-content h3 {
    margin: 0 0 18px;
    color: #30273a;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.3;
}

.voice-conversation-explanation-content h3 span {
    color: #d852ed;
}

.voice-conversation-explanation-content p {
    max-width: 750px;
    margin: 0 0 13px;
    color: #7c7186;
    font-size: 13px;
    line-height: 1.9;
}

.voice-conversation-explanation-content p:last-child {
    margin-bottom: 0;
    color: #30273a;
    font-weight: 800;
}

.voice-conversation-explanation-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #f8e8fc;
    color: #d852ed;
    font-size: 28px;
}


/* ==========================================
   FINAL CONCEPT
========================================== */

.voice-conversation-concept {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    margin-top: 35px;
    padding: 35px 40px;
    border-radius: 22px;
    background: #30243a;
    box-shadow: 0 18px 45px rgba(48, 31, 60, 0.12);
}

.voice-conversation-concept-left {
    display: flex;
    align-items: center;
    gap: 17px;
}

.voice-conversation-concept-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #d852ed;
    color: #ffffff;
    font-size: 19px;
}

.voice-conversation-concept-left span {
    display: block;
    margin-bottom: 8px;
    color: #bca8c7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.voice-conversation-concept-left h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
}

.voice-conversation-concept-right {
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.voice-conversation-concept-right p {
    margin: 0;
    color: #d0c0d8;
    font-size: 14px;
    line-height: 1.9;
}

.voice-conversation-concept-line {
    width: 45px;
    height: 2px;
    margin: 18px 0 14px;
    background: #d852ed;
}

.voice-conversation-concept-badge {
    color: #dca0e8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1050px) {

    .voice-conversation-stage {
        grid-template-columns: 1fr;
    }

    .voice-conversation-intro {
        min-height: 350px;
    }

    .voice-conversation-explanation {
        grid-template-columns: 70px minmax(0, 1fr) 85px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .voice-conversation-section {
        padding: 70px 0;
    }

    .voice-conversation-container {
        width: 92%;
    }

    .voice-conversation-header {
        margin-bottom: 38px;
    }

    .voice-conversation-header h2 {
        font-size: 31px;
    }

    .voice-conversation-header p {
        font-size: 12px;
    }

    .voice-conversation-intro {
        min-height: auto;
        padding: 27px 23px;
        border-radius: 18px;
    }

    .voice-conversation-intro-top {
        margin-bottom: 35px;
    }

    .voice-conversation-live-dot {
        font-size: 7px;
    }

    .voice-conversation-intro h3 {
        font-size: 26px;
    }

    .voice-conversation-intro p {
        font-size: 12px;
    }

    .voice-conversation-wave {
        margin-top: 25px;
    }

    .voice-conversation-chat {
        border-radius: 18px;
    }

    .voice-conversation-chat-top {
        padding: 19px;
    }

    .voice-conversation-chat-body {
        padding: 25px 19px;
    }

    .voice-conversation-message {
        max-width: 96%;
    }

    .voice-conversation-bubble {
        font-size: 11px;
    }

    .voice-conversation-processing {
        align-items: flex-start;
    }

    .voice-conversation-processing>i {
        display: none;
    }

    .voice-conversation-chat-bottom {
        padding: 15px 19px;
        font-size: 9px;
    }

    .voice-conversation-explanation {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 23px;
        border-radius: 18px;
    }

    .voice-conversation-explanation-number {
        font-size: 35px;
    }

    .voice-conversation-explanation-content h3 {
        font-size: 25px;
    }

    .voice-conversation-explanation-content p {
        font-size: 12px;
    }

    .voice-conversation-explanation-mark {
        width: 65px;
        height: 65px;
        font-size: 22px;
    }

    .voice-conversation-concept {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 28px 23px;
        border-radius: 18px;
    }

    .voice-conversation-concept-right {
        padding-top: 23px;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-left: 0;
    }

    .voice-conversation-concept-left h3 {
        font-size: 22px;
    }

    .voice-conversation-concept-right p {
        font-size: 12px;
    }

}




/* =========================================
   SPEECH INTENT BRIDGE DESIGN
========================================= */

.speech-intent-bridge-section {
    padding: 110px 20px;
    background: #ffffff;
    overflow: hidden;
}

.speech-intent-bridge-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

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

.speech-intent-bridge-header {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

.speech-intent-bridge-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.speech-intent-bridge-tag i {
    font-size: 15px;
}

.speech-intent-bridge-header h2 {
    margin: 0;
    color: #292333;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
}

.speech-intent-bridge-header h2 span {
    color: #d852ed;
}

.speech-intent-bridge-header p {
    max-width: 650px;
    margin: 20px auto 0;
    color: #807689;
    font-size: 15px;
    line-height: 1.85;
}

/* =========================================
   INTRO
========================================= */

.speech-intent-bridge-intro {
    display: flex;
    align-items: stretch;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto 50px;
}

.speech-bridge-intro-line {
    width: 4px;
    flex: 0 0 4px;
    border-radius: 10px;
    background: #d852ed;
}

.speech-intent-bridge-intro p {
    margin: 0 0 10px;
    color: #6f6579;
    font-size: 15px;
    line-height: 1.85;
}

.speech-intent-bridge-intro p:last-child {
    margin-bottom: 0;
}

/* =========================================
   MAIN LAYOUT
========================================= */

.speech-intent-bridge-layout {
    display: grid;
    grid-template-columns: 1fr 230px 1fr;
    gap: 28px;
    align-items: center;
}

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

.speech-bridge-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.speech-bridge-section-label span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #f8eaff;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
}

.speech-bridge-section-label strong {
    color: #292333;
    font-size: 13px;
    font-weight: 800;
}

/* =========================================
   LEFT QUOTES
========================================= */

.speech-bridge-patterns,
.speech-bridge-action {
    min-width: 0;
}

.speech-bridge-quote {
    position: relative;
    margin-bottom: 13px;
    padding: 17px 18px;
    border: 1px solid #eee7f2;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(58, 31, 70, 0.04);
    transition: all 0.25s ease;
}

.speech-bridge-quote:hover {
    border-color: #d852ed;
    transform: translateX(5px);
}

.speech-bridge-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f9edff;
    color: #d852ed;
    font-size: 11px;
}

.speech-bridge-quote p {
    margin: 0 0 8px;
    color: #403648;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.speech-bridge-quote span {
    color: #a49aaa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* =========================================
   CENTER INTENT CORE
========================================= */

.speech-bridge-middle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 430px;
}

.speech-bridge-core {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 205px;
    height: 245px;
    padding: 25px 20px;
    border: 1px solid rgba(216, 82, 237, 0.4);
    border-radius: 105px;
    background: #292333;
    box-shadow:
        0 0 0 12px rgba(216, 82, 237, 0.05),
        0 20px 55px rgba(41, 35, 51, 0.18);
    text-align: center;
}

.speech-bridge-core-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 17px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.18);
    color: #d852ed;
    font-size: 19px;
}

.speech-bridge-core>span {
    margin-bottom: 9px;
    color: #b8a9c2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.speech-bridge-core h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.speech-bridge-core p {
    margin: 15px 0 0;
    color: #b9adbf;
    font-size: 10px;
    line-height: 1.7;
}

.speech-bridge-line {
    position: absolute;
    left: -20px;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            #d852ed);
}

.speech-bridge-line-one {
    top: 102px;
}

.speech-bridge-line-two {
    top: 176px;
}

.speech-bridge-line-three {
    top: 250px;
}

.speech-bridge-line-four {
    top: 324px;
}

.speech-bridge-core-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
    color: #d852ed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.speech-bridge-core-caption i {
    font-size: 12px;
}

/* =========================================
   RIGHT RESULT
========================================= */

.speech-bridge-result {
    padding: 28px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 20px;
    background: linear-gradient(145deg,
            #fcf4ff,
            #ffffff);
    box-shadow: 0 15px 45px rgba(58, 31, 70, 0.07);
}

.speech-bridge-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 25px;
}

.speech-bridge-result-top span {
    color: #a08da9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.speech-bridge-result-top i {
    color: #d852ed;
    font-size: 17px;
}

.speech-bridge-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    border-radius: 17px;
    background: #d852ed;
    color: #ffffff;
    font-size: 23px;
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.2);
}

.speech-bridge-result h3 {
    margin: 0;
    color: #292333;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.speech-bridge-result p {
    margin: 18px 0 25px;
    color: #82758b;
    font-size: 13px;
    line-height: 1.85;
}

.speech-bridge-result-footer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid #eadff0;
    color: #5b4c65;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

.speech-bridge-result-footer i {
    margin-top: 3px;
    color: #d852ed;
}

/* =========================================
   EXPLANATION
========================================= */

.speech-intent-bridge-explanation {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 25px;
    align-items: start;
    margin-top: 48px;
    padding: 34px 38px;
    border-radius: 18px;
    background: #292333;
}

.speech-bridge-explanation-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border: 1px solid rgba(216, 82, 237, 0.5);
    border-radius: 16px;
    color: #d852ed;
    font-size: 17px;
    font-weight: 800;
}

.speech-bridge-explanation-text h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.speech-bridge-explanation-text p {
    margin: 0 0 9px;
    color: #bcb0c4;
    font-size: 14px;
    line-height: 1.85;
}

.speech-bridge-explanation-text p:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 1100px) {

    .speech-intent-bridge-layout {
        grid-template-columns: 1fr 180px 1fr;
        gap: 18px;
    }

    .speech-bridge-core {
        width: 175px;
        height: 225px;
    }

    .speech-bridge-core h3 {
        font-size: 19px;
    }

    .speech-bridge-result {
        padding: 22px;
    }

    .speech-bridge-result h3 {
        font-size: 21px;
    }

}

@media (max-width: 850px) {

    .speech-intent-bridge-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .speech-bridge-middle {
        min-height: auto;
        padding: 20px 0;
    }

    .speech-bridge-line {
        display: none;
    }

    .speech-bridge-core {
        width: 230px;
        height: 230px;
    }

    .speech-bridge-core-caption {
        margin-top: 25px;
    }

    .speech-bridge-patterns {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .speech-bridge-action {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

}

@media (max-width: 767px) {

    .speech-intent-bridge-section {
        padding: 75px 15px;
    }

    .speech-intent-bridge-header h2 {
        font-size: 30px;
    }

    .speech-intent-bridge-header p {
        font-size: 14px;
    }

    .speech-intent-bridge-intro {
        margin-bottom: 35px;
    }

    .speech-bridge-quote p {
        font-size: 12px;
    }

    .speech-bridge-core {
        width: 215px;
        height: 215px;
    }

    .speech-bridge-core h3 {
        font-size: 20px;
    }

    .speech-bridge-result {
        padding: 25px;
    }

    .speech-intent-bridge-explanation {
        display: block;
        padding: 28px 25px;
    }

    .speech-bridge-explanation-number {
        margin-bottom: 22px;
    }

    .speech-bridge-explanation-text h3 {
        font-size: 21px;
    }

}

@media (max-width: 420px) {

    .speech-intent-bridge-header h2 {
        font-size: 27px;
    }

    .speech-bridge-result h3 {
        font-size: 21px;
    }

    .speech-bridge-core {
        width: 195px;
        height: 205px;
    }

}



/* =========================================
   AI VOICE CAPABILITY SECTION
========================================= */

.voice-capability-section {
    position: relative;
    padding: 105px 0 110px;
    background: #fbf8fd;
    overflow: hidden;
    font-family: inherit;
}

.voice-capability-section .container {
    position: relative;
    z-index: 2;
}


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

.voice-capability-header {
    max-width: 850px;
    margin: 0 auto 48px;
    text-align: center;
}

.voice-capability-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #a13bb5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.voice-capability-eyebrow-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: #d852ed;
}

.voice-capability-header h2 {
    margin: 0;
    color: #292333;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.3px;
}

.voice-capability-header h2 span {
    color: #d852ed;
}

.voice-capability-header p {
    max-width: 670px;
    margin: 22px auto 0;
    color: #777080;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   AUTOMATION SPECTRUM
========================================= */

.voice-capability-spectrum {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 370px;
    margin-bottom: 78px;
    padding: 1px;
    border-radius: 22px;
    background: linear-gradient(135deg,
            #d852ed 0%,
            #8e4ca6 45%,
            #292333 100%);
    overflow: hidden;
}

.voice-capability-spectrum-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 36px 42px;
    border-radius: 21px;
    background: #292333;
    overflow: hidden;
}

.voice-capability-spectrum-content::before {
    position: absolute;
    content: "";
    width: 350px;
    height: 350px;
    right: -160px;
    top: -180px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
}

.voice-capability-spectrum-content::after {
    position: absolute;
    content: "";
    width: 450px;
    height: 450px;
    right: -210px;
    top: -230px;
    border: 1px solid rgba(216, 82, 237, 0.13);
    border-radius: 50%;
}

.voice-capability-spectrum-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-capability-spectrum-top>span {
    color: #bcb0c4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.voice-capability-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 30px;
    color: #d9c9df;
    font-size: 10px;
    font-weight: 600;
}

.voice-capability-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75dfad;
    box-shadow: 0 0 0 4px rgba(117, 223, 173, 0.08);
}

.voice-capability-spectrum-title {
    position: relative;
    z-index: 3;
    max-width: 650px;
    margin-top: 30px;
}

.voice-capability-spectrum-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 29px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.6px;
}

.voice-capability-spectrum-title h3 strong {
    display: block;
    color: #d852ed;
    font-weight: 700;
}

.voice-capability-spectrum-title p {
    max-width: 570px;
    margin: 15px 0 0;
    color: #bcb3c4;
    font-size: 13px;
    line-height: 1.8;
}

.voice-capability-progress {
    position: relative;
    z-index: 3;
    max-width: 650px;
    margin-top: 28px;
}

.voice-capability-progress-track {
    height: 6px;
    border-radius: 20px;
    background: #51465a;
    overflow: hidden;
}

.voice-capability-progress-track span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg,
            #d852ed,
            #f0a2fb);
}

.voice-capability-progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 9px;
    color: #aaa0b3;
    font-size: 10px;
}

.voice-capability-engine {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 650px;
    margin-top: 28px;
    padding: 15px 18px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.voice-capability-engine-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 11px;
    background: rgba(216, 82, 237, 0.16);
    color: #d852ed;
    font-size: 17px;
}

.voice-capability-engine-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.voice-capability-engine-content strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.voice-capability-engine-content small {
    color: #aaa0b3;
    font-size: 11px;
    line-height: 1.5;
}

.voice-capability-engine-arrow {
    color: #d852ed;
    font-size: 14px;
}


/* =========================================
   BUSINESS CAPABILITY HEADER
========================================= */

.voice-capability-business-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 30px;
}

.voice-capability-small-label {
    display: block;
    margin-bottom: 12px;
    color: #a13bb5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.voice-capability-business-header h3 {
    margin: 0;
    color: #292333;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.7px;
}

.voice-capability-business-header h3 span {
    color: #d852ed;
}

.voice-capability-business-header>p {
    max-width: 390px;
    margin: 0;
    color: #777080;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================
   CAPABILITY MATRIX
========================================= */

.voice-capability-matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.voice-capability-item {
    position: relative;
    min-height: 265px;
    padding: 28px;
    border: 1px solid #eee8f2;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(43, 26, 53, 0.035);
    transition: transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.voice-capability-item::before {
    position: absolute;
    content: "";
    left: 0;
    top: 25px;
    width: 3px;
    height: 45px;
    border-radius: 0 5px 5px 0;
    background: #d852ed;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.voice-capability-item:hover {
    border-color: rgba(216, 82, 237, 0.45);
    box-shadow: 0 18px 45px rgba(82, 43, 96, 0.09);
    transform: translateY(-5px);
}

.voice-capability-item:hover::before {
    opacity: 1;
}

.voice-capability-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.voice-capability-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fbf0fd;
    color: #d852ed;
    font-size: 17px;
}

.voice-capability-number {
    color: #c9bfce;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.voice-capability-item h4 {
    margin: 24px 0 12px;
    color: #292333;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
}

.voice-capability-item p {
    min-height: 65px;
    margin: 0;
    color: #777080;
    font-size: 13px;
    line-height: 1.85;
}

.voice-capability-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f0ebf3;
}

.voice-capability-item-footer span {
    color: #a13bb5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.voice-capability-item-footer i {
    color: #c7bdce;
    font-size: 12px;
    transition: color 0.3s ease,
        transform 0.3s ease;
}

.voice-capability-item:hover .voice-capability-item-footer i {
    color: #d852ed;
    transform: translate(3px, -3px);
}


/* =========================================
   WIDE CAPABILITY ITEM
========================================= */

.voice-capability-item-wide {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    grid-column: 1 / -1;
    min-height: auto;
    background: linear-gradient(110deg,
            #ffffff 0%,
            #fdf8ff 100%);
}

.voice-capability-item-wide .voice-capability-item-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    flex: 0 0 75px;
}

.voice-capability-wide-content {
    flex: 1;
}

.voice-capability-wide-content h4 {
    margin-top: 4px;
}

.voice-capability-wide-content p {
    max-width: 570px;
}

.voice-capability-wide-content .voice-capability-item-footer {
    max-width: 570px;
}

.voice-capability-wide-visual {
    display: flex;
    flex: 0 0 170px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    gap: 18px;
    padding: 22px;
    border-radius: 13px;
    background: #292333;
}

.voice-capability-mini-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.voice-capability-mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75dfad;
}

.voice-capability-mini-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voice-capability-mini-lines span {
    display: block;
    height: 5px;
    border-radius: 20px;
    background: #51465a;
}

.voice-capability-mini-lines span:first-child {
    width: 100%;
    background: #d852ed;
}

.voice-capability-mini-lines span:nth-child(2) {
    width: 72%;
}

.voice-capability-mini-lines span:nth-child(3) {
    width: 88%;
}


/* =========================================
   BOTTOM INFORMATION BAR
========================================= */

.voice-capability-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 24px 28px;
    border: 1px solid #eadcf0;
    border-radius: 16px;
    background: #fbf7fd;
}

.voice-capability-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #ffffff;
    color: #d852ed;
    font-size: 17px;
    box-shadow: 0 5px 15px rgba(92, 43, 107, 0.05);
}

.voice-capability-bottom-content {
    flex: 1;
}

.voice-capability-bottom-content strong {
    display: block;
    margin-bottom: 5px;
    color: #292333;
    font-size: 14px;
    font-weight: 800;
}

.voice-capability-bottom-content p {
    margin: 0;
    color: #777080;
    font-size: 12px;
    line-height: 1.7;
}

.voice-capability-bottom-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #292333;
    color: #ffffff;
    font-size: 12px;
}


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

@media (max-width: 991px) {

    .voice-capability-section {
        padding: 80px 0;
    }

    .voice-capability-header h2 {
        font-size: 35px;
    }

    .voice-capability-spectrum-content {
        padding: 30px;
    }

    .voice-capability-spectrum-title h3 {
        font-size: 25px;
    }

    .voice-capability-business-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .voice-capability-business-header>p {
        max-width: 600px;
    }

    .voice-capability-item-wide {
        flex-wrap: wrap;
    }

    .voice-capability-wide-content {
        min-width: 0;
    }

    .voice-capability-wide-visual {
        flex: 1 1 100%;
        min-height: 120px;
    }

    .voice-capability-mini-lines {
        max-width: 300px;
    }

}


@media (max-width: 767px) {

    .voice-capability-section {
        padding: 65px 0;
    }

    .voice-capability-header {
        margin-bottom: 35px;
    }

    .voice-capability-header h2 {
        font-size: 29px;
        letter-spacing: -0.6px;
    }

    .voice-capability-header p {
        font-size: 13px;
        line-height: 1.8;
    }

    .voice-capability-spectrum {
        margin-bottom: 55px;
        border-radius: 16px;
    }

    .voice-capability-spectrum-content {
        padding: 25px 20px;
        border-radius: 15px;
    }

    .voice-capability-spectrum-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .voice-capability-spectrum-title {
        margin-top: 25px;
    }

    .voice-capability-spectrum-title h3 {
        font-size: 23px;
    }

    .voice-capability-spectrum-title p {
        font-size: 12px;
    }

    .voice-capability-progress-labels {
        font-size: 9px;
    }

    .voice-capability-engine {
        align-items: flex-start;
        padding: 13px;
    }

    .voice-capability-engine-icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .voice-capability-engine-content small {
        font-size: 10px;
    }

    .voice-capability-business-header h3 {
        font-size: 25px;
    }

    .voice-capability-matrix {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .voice-capability-item {
        min-height: auto;
        padding: 23px;
    }

    .voice-capability-item p {
        min-height: auto;
    }

    .voice-capability-item-wide {
        display: block;
    }

    .voice-capability-item-wide .voice-capability-item-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .voice-capability-wide-content h4 {
        margin-top: 22px;
    }

    .voice-capability-wide-visual {
        margin-top: 25px;
    }

    .voice-capability-bottom {
        align-items: flex-start;
        padding: 20px;
    }

    .voice-capability-bottom-icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .voice-capability-bottom-arrow {
        display: none;
    }

}


@media (max-width: 480px) {

    .voice-capability-header h2 {
        font-size: 26px;
    }

    .voice-capability-eyebrow {
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .voice-capability-spectrum-title h3 {
        font-size: 21px;
    }

    .voice-capability-spectrum-title h3 strong {
        margin-top: 4px;
    }

    .voice-capability-spectrum-top>span {
        font-size: 9px;
    }

    .voice-capability-business-header h3 {
        font-size: 23px;
    }

    .voice-capability-item h4 {
        font-size: 18px;
    }

    .voice-capability-item p {
        font-size: 12px;
    }

    .voice-capability-bottom-content strong {
        font-size: 13px;
    }

    .voice-capability-bottom-content p {
        font-size: 11px;
    }

}




/* =========================================
   VOICE INTELLIGENCE ARCHITECTURE
========================================= */

.voice-intelligence-section {
    position: relative;
    padding: 110px 0;
    background: #f9f7fc;
    overflow: hidden;
}

.voice-intelligence-section::before {
    position: absolute;
    content: "";
    width: 520px;
    height: 520px;
    top: -250px;
    right: -220px;
    border: 1px solid rgba(216, 82, 237, 0.09);
    border-radius: 50%;
}

.voice-intelligence-section::after {
    position: absolute;
    content: "";
    width: 350px;
    height: 350px;
    bottom: -200px;
    left: -150px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}

.voice-intelligence-section .container {
    position: relative;
    z-index: 2;
}


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

.voice-intelligence-header {
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}

.voice-intelligence-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: #a23ab7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.voice-intelligence-eyebrow span {
    width: 30px;
    height: 2px;
    background: #d852ed;
}

.voice-intelligence-header h2 {
    margin: 0;
    color: #292333;
    font-size: 43px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.3px;
}

.voice-intelligence-header h2 strong {
    color: #d852ed;
}

.voice-intelligence-header p {
    max-width: 680px;
    margin: 22px auto 0;
    color: #777080;
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.voice-intelligence-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.45fr);
    gap: 24px;
    align-items: stretch;
}


/* =========================================
   LEFT INTRO PANEL
========================================= */

.voice-intelligence-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: 20px;
    background: #292333;
    overflow: hidden;
}

.voice-intelligence-intro::before {
    position: absolute;
    content: "";
    width: 260px;
    height: 260px;
    right: -160px;
    top: -130px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
}

.voice-intelligence-intro::after {
    position: absolute;
    content: "";
    width: 360px;
    height: 360px;
    right: -210px;
    top: -180px;
    border: 1px solid rgba(216, 82, 237, 0.15);
    border-radius: 50%;
}

.voice-intelligence-intro-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 45px;
}

.voice-intelligence-tag {
    color: #bdb1c6;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.voice-intelligence-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 12px;
    color: #d852ed;
    font-size: 17px;
}

.voice-intelligence-statement {
    position: relative;
    z-index: 2;
}

.voice-intelligence-cross,
.voice-intelligence-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa0b3;
    font-size: 12px;
}

.voice-intelligence-statement h3 {
    margin: 0 0 13px;
    color: #d8d0de;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.voice-intelligence-statement p {
    margin: 0;
    color: #a99fb1;
    font-size: 12px;
    line-height: 1.9;
}

.voice-intelligence-divider {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 1px;
    margin: 30px 0;
    background: rgba(255, 255, 255, 0.1);
}

.voice-intelligence-statement.active h3 {
    color: #ffffff;
}

.voice-intelligence-statement.active p {
    color: #c4b7cc;
}

.voice-intelligence-check {
    background: rgba(216, 82, 237, 0.18);
    color: #d852ed;
}

.voice-intelligence-intro-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: auto;
    padding-top: 32px;
    color: #bcb0c4;
    font-size: 11px;
    line-height: 1.7;
}

.voice-intelligence-intro-footer i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #d852ed;
}


/* =========================================
   PIPELINE PANEL
========================================= */

.voice-intelligence-pipeline {
    padding: 30px;
    border: 1px solid #ebe4f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(51, 29, 62, 0.04);

    transition: all 0.3s ease;
}

.voice-intelligence-pipeline:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.voice-intelligence-pipeline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0ebf3;
}

.voice-intelligence-pipeline-header>div:first-child>span {
    color: #a23ab7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.voice-intelligence-pipeline-header h3 {
    margin: 10px 0 0;
    color: #292333;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.voice-intelligence-pipeline-header h3 strong {
    color: #d852ed;
}

.voice-intelligence-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #e7d8eb;
    border-radius: 30px;
    color: #9b8ca2;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.voice-intelligence-live span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #75dba6;
}


/* =========================================
   PIPELINE STEPS
========================================= */

.voice-intelligence-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid #f2edf4;
}

.voice-intelligence-step:last-child {
    border-bottom: none;
    padding-bottom: 3px;
}

.voice-intelligence-step-index {
    flex: 0 0 25px;
    color: #c4b7cc;
    font-size: 10px;
    font-weight: 800;
}

.voice-intelligence-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #eee5f2;
    border-radius: 11px;
    background: #fbf8fd;
    color: #a995b0;
    font-size: 14px;
    transition: all 0.3s ease;
}

.voice-intelligence-step-content {
    flex: 1;
    min-width: 0;
}

.voice-intelligence-step-content h4 {
    margin: 0 0 5px;
    color: #292333;
    font-size: 13px;
    font-weight: 800;
}

.voice-intelligence-step-content p {
    margin: 0;
    color: #89808e;
    font-size: 11px;
    line-height: 1.6;
}

.voice-intelligence-step-status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f4f0f6;
    color: #b7a9bf;
    font-size: 9px;
}

.voice-intelligence-step.highlighted {
    margin: 0 -12px;
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 11px;
    background: #fdf5ff;
}

.voice-intelligence-step.highlighted .voice-intelligence-step-icon {
    border-color: rgba(216, 82, 237, 0.3);
    background: #f5dcfb;
    color: #d852ed;
}

.voice-intelligence-step.highlighted .voice-intelligence-step-status {
    background: #d852ed;
    color: #ffffff;
}


/* =========================================
   CONCLUSION
========================================= */

.voice-intelligence-conclusion {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    padding: 25px 30px;
    border: 1px solid #e6d5eb;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(51, 29, 62, 0.035);

    transition: all 0.3s ease;
}

.voice-intelligence-conclusion:hover {
    border-color: #D852ED;
    box-shadow: 0 18px 45px rgba(82, 43, 96, 0.09);
    transform: translateY(-5px);
}

.voice-intelligence-conclusion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #292333;
    color: #d852ed;
    font-size: 18px;
}

.voice-intelligence-conclusion-content {
    flex: 1;
}

.voice-intelligence-conclusion-content>span {
    display: block;
    margin-bottom: 6px;
    color: #a23ab7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.voice-intelligence-conclusion-content h3 {
    margin: 0;
    color: #292333;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}

.voice-intelligence-conclusion-content h3 strong {
    color: #d852ed;
}

.voice-intelligence-conclusion-content p {
    margin: 6px 0 0;
    color: #827687;
    font-size: 12px;
    line-height: 1.7;
}



/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 991px) {

    .voice-intelligence-section {
        padding: 80px 0;
    }

    .voice-intelligence-header h2 {
        font-size: 36px;
    }

    .voice-intelligence-layout {
        grid-template-columns: 1fr;
    }

    .voice-intelligence-intro {
        min-height: auto;
    }

    .voice-intelligence-intro-footer {
        margin-top: 35px;
    }

}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 767px) {

    .voice-intelligence-section {
        padding: 65px 0;
    }

    .voice-intelligence-header {
        margin-bottom: 35px;
    }

    .voice-intelligence-header h2 {
        font-size: 29px;
        letter-spacing: -0.7px;
    }

    .voice-intelligence-header p {
        font-size: 13px;
        line-height: 1.8;
    }

    .voice-intelligence-intro {
        padding: 26px;
        border-radius: 16px;
    }

    .voice-intelligence-intro-top {
        margin-bottom: 32px;
    }

    .voice-intelligence-statement h3 {
        font-size: 23px;
    }

    .voice-intelligence-pipeline {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .voice-intelligence-pipeline-header {
        flex-direction: column;
        gap: 14px;
    }

    .voice-intelligence-pipeline-header h3 {
        font-size: 23px;
    }

    .voice-intelligence-step {
        gap: 10px;
        padding: 16px 0;
    }

    .voice-intelligence-step-index {
        flex: 0 0 20px;
        font-size: 9px;
    }

    .voice-intelligence-step-icon {
        flex: 0 0 37px;
        width: 37px;
        height: 37px;
        font-size: 12px;
    }

    .voice-intelligence-step-content h4 {
        font-size: 12px;
    }

    .voice-intelligence-step-content p {
        font-size: 10px;
    }

    .voice-intelligence-step-status {
        display: none;
    }

    .voice-intelligence-step.highlighted {
        margin: 0 -8px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .voice-intelligence-conclusion {
        align-items: flex-start;
        padding: 22px;
    }

    .voice-intelligence-conclusion-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .voice-intelligence-conclusion-content h3 {
        font-size: 16px;
    }

    .voice-intelligence-conclusion-content p {
        font-size: 11px;
    }

    .voice-intelligence-conclusion-mark {
        display: none;
    }

}


@media (max-width: 480px) {

    .voice-intelligence-header h2 {
        font-size: 26px;
    }

    .voice-intelligence-eyebrow {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .voice-intelligence-pipeline-header h3 {
        font-size: 21px;
    }

    .voice-intelligence-step-content h4 {
        font-size: 11px;
    }

    .voice-intelligence-step-content p {
        font-size: 9px;
    }

}


/* =========================================
   AI VOICE AGENT VS TRADITIONAL IVR
========================================= */

.ivr-experience-section {
    position: relative;
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}

.ivr-experience-section::before {
    position: absolute;
    content: "";
    width: 500px;
    height: 500px;
    top: -300px;
    left: -250px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}

.ivr-experience-section .container {
    position: relative;
    z-index: 2;
}


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

.ivr-experience-header {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.ivr-experience-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #a13bb5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ivr-experience-eyebrow span {
    width: 30px;
    height: 2px;
    background: #d852ed;
}

.ivr-experience-header h2 {
    margin: 0;
    color: #292333;
    font-size: 43px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.2px;
}

.ivr-experience-header h2 strong {
    color: #d852ed;
}

.ivr-experience-header p {
    margin: 20px auto 0;
    color: #777080;
    font-size: 14px;
    line-height: 1.8;
}


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

.ivr-experience-comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 55px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ivr-experience-column {
    min-width: 0;
    padding: 28px;
    border: 1px solid #eee7f2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(53, 29, 64, 0.04);

    transition: all 0.3s ease;
}

.ivr-experience-column:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 40px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.ivr-experience-traditional {
    background: #fbfafc;
}

.ivr-experience-ai {
    border-color: rgba(216, 82, 237, 0.25);
    background: #fdfaff;
}


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

.ivr-experience-column-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.ivr-experience-column-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #f0ebf3;
    color: #9b8ba4;
    font-size: 17px;
}

.ivr-experience-ai .ivr-experience-column-icon {
    background: #f7e4fb;
    color: #d852ed;
}

.ivr-experience-column-header span {
    display: block;
    margin-bottom: 5px;
    color: #a69aaE;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ivr-experience-column-header h3 {
    margin: 0;
    color: #292333;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}


/* =========================================
   TRADITIONAL IVR DEVICE
========================================= */

.ivr-experience-device {
    padding: 22px;
    border: 1px solid #e9e2ed;
    border-radius: 15px;
    background: #ffffff;
}

.ivr-experience-device-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 17px;
    border-bottom: 1px solid #f0ebf3;
}

.ivr-experience-device-top>span {
    color: #a59aaa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ivr-experience-device-dots {
    display: flex;
    gap: 5px;
}

.ivr-experience-device-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d8cfde;
}

.ivr-experience-voice-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #a095a9;
    font-size: 10px;
    font-weight: 700;
}

.ivr-experience-voice-label i {
    color: #b5a8be;
}

.ivr-experience-ivr-message {
    margin-top: 15px;
    padding: 18px;
    border-radius: 11px;
    background: #f7f4f9;
}

.ivr-experience-ivr-message p {
    margin: 0;
    color: #51465a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.9;
}

.ivr-experience-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.ivr-experience-key {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 66px;
    border: 1px solid #eee7f2;
    border-radius: 10px;
    background: #ffffff;
}

.ivr-experience-key strong {
    color: #51465a;
    font-size: 19px;
    font-weight: 800;
}

.ivr-experience-key span {
    margin-top: 4px;
    color: #aaa0b1;
    font-size: 9px;
}

.ivr-experience-device-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: #aaa0b1;
    font-size: 10px;
}

.ivr-experience-device-footer i {
    font-size: 10px;
}


/* =========================================
   VERSUS DIVIDER
========================================= */

.ivr-experience-versus {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.ivr-experience-versus-line {
    width: 1px;
    height: 100%;
    min-height: 70px;
    background: linear-gradient(to bottom,
            transparent,
            #e2d5e7,
            transparent);
}

.ivr-experience-versus-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border: 1px solid #e4d3e9;
    border-radius: 50%;
    background: #ffffff;
    color: #b19dbb;
    font-size: 10px;
    font-weight: 800;
}


/* =========================================
   AI CONVERSATION PANEL
========================================= */

.ivr-experience-conversation {
    padding: 22px;
    border-radius: 15px;
    background: #292333;
    box-shadow: 0 12px 30px rgba(41, 35, 51, 0.1);
}

.ivr-experience-conversation-top {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ivr-experience-ai-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(216, 82, 237, 0.18);
    color: #d852ed;
    font-size: 14px;
}

.ivr-experience-conversation-top>div:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.ivr-experience-conversation-top strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.ivr-experience-conversation-top span {
    color: #b3a7bc;
    font-size: 9px;
}

.ivr-experience-conversation-top span i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    border-radius: 50%;
    background: #75dba6;
}

.ivr-experience-signal {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ivr-experience-signal i {
    display: block;
    width: 3px;
    height: 8px;
    border-radius: 5px;
    background: #d852ed;
}

.ivr-experience-signal i:nth-child(2) {
    height: 15px;
}

.ivr-experience-signal i:nth-child(3) {
    height: 11px;
}

.ivr-experience-signal i:nth-child(4) {
    height: 18px;
}


/* =========================================
   CHAT MESSAGES
========================================= */

.ivr-experience-message-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
}

.ivr-experience-message-row.agent {
    align-items: flex-start;
}

.ivr-experience-message-row.customer {
    align-items: flex-end;
}

.ivr-experience-message-label {
    color: #998ba4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ivr-experience-message {
    max-width: 92%;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.8;
}

.customer-message {
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-bottom-right-radius: 3px;
    background: rgba(216, 82, 237, 0.16);
    color: #f4e9f7;
}

.agent-message {
    border-bottom-left-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: #d2c8d9;
}


/* =========================================
   INTENT DETECTION
========================================= */

.ivr-experience-intent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 23px;
    padding: 12px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.08);
}

.ivr-experience-intent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(216, 82, 237, 0.17);
    color: #d852ed;
    font-size: 11px;
}

.ivr-experience-intent-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.ivr-experience-intent-content span {
    color: #a99ab3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.ivr-experience-intent-content strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.ivr-experience-intent-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d852ed;
    color: #ffffff;
    font-size: 8px;
}


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

.ivr-experience-workflow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.ivr-experience-workflow>i {
    color: #75677e;
    font-size: 9px;
}

.ivr-experience-workflow-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #b4a7be;
    font-size: 9px;
    line-height: 1.4;
}

.ivr-experience-workflow-item i {
    color: #d852ed;
    font-size: 10px;
}


/* =========================================
   DESCRIPTION
========================================= */

.ivr-experience-description {
    margin-top: 24px;
}

.ivr-experience-description-label {
    display: block;
    margin-bottom: 9px;
    color: #a13bb5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ivr-experience-description p {
    margin: 0;
    color: #817587;
    font-size: 12px;
    line-height: 1.85;
}


/* =========================================
   EXPLANATION SECTION
========================================= */

.ivr-experience-explanation {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
    padding: 32px;
    border-radius: 17px;
    background: #f8f3fb;
}

.ivr-experience-explanation-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 185px;
    padding-top: 5px;
    color: #a13bb5;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1px;
}

.ivr-experience-explanation-label i {
    color: #d852ed;
}

.ivr-experience-explanation-content {
    flex: 1;
}

.ivr-experience-explanation-content h3 {
    margin: 0 0 10px;
    color: #292333;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
}

.ivr-experience-explanation-content h3 strong {
    color: #d852ed;
}

.ivr-experience-explanation-content p {
    max-width: 850px;
    margin: 0;
    color: #776a80;
    font-size: 13px;
    line-height: 1.9;
}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.ivr-experience-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 23px 28px;
    border: 1px solid #e8d9ed;
    border-radius: 16px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.ivr-experience-bottom:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 40px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.ivr-experience-bottom-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #292333;
    color: #d852ed;
    font-size: 17px;
}

.ivr-experience-bottom-content {
    flex: 1;
}

.ivr-experience-bottom-content span {
    display: block;
    margin-bottom: 5px;
    color: #a13bb5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.ivr-experience-bottom-content h3 {
    margin: 0;
    color: #292333;
    font-size: 18px;
    font-weight: 800;
}

.ivr-experience-bottom-content h3 strong {
    color: #d852ed;
}

.ivr-experience-bottom-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f8e9fc;
    color: #d852ed;
    font-size: 12px;
}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 991px) {

    .ivr-experience-section {
        padding: 80px 0;
    }

    .ivr-experience-header h2 {
        font-size: 36px;
    }

    .ivr-experience-comparison {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ivr-experience-versus {
        flex-direction: row;
        gap: 15px;
    }

    .ivr-experience-versus-line {
        width: 100%;
        height: 1px;
        min-height: 0;
        background: linear-gradient(to right,
                transparent,
                #e2d5e7,
                transparent);
    }

    .ivr-experience-versus-circle {
        flex: 0 0 43px;
    }

    .ivr-experience-explanation {
        gap: 20px;
    }

}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 767px) {

    .ivr-experience-section {
        padding: 65px 0;
    }

    .ivr-experience-header {
        margin-bottom: 35px;
    }

    .ivr-experience-header h2 {
        font-size: 29px;
        letter-spacing: -0.6px;
    }

    .ivr-experience-header p {
        font-size: 13px;
    }

    .ivr-experience-column {
        padding: 22px;
        border-radius: 16px;
    }

    .ivr-experience-column-header {
        margin-bottom: 22px;
    }

    .ivr-experience-column-header h3 {
        font-size: 20px;
    }

    .ivr-experience-device,
    .ivr-experience-conversation {
        padding: 17px;
    }

    .ivr-experience-ivr-message p {
        font-size: 12px;
    }

    .ivr-experience-key {
        min-height: 58px;
    }

    .ivr-experience-key strong {
        font-size: 17px;
    }

    .ivr-experience-message {
        max-width: 100%;
        font-size: 10px;
    }

    .ivr-experience-workflow {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ivr-experience-workflow>i {
        display: none;
    }

    .ivr-experience-explanation {
        flex-direction: column;
        gap: 16px;
        padding: 23px;
    }

    .ivr-experience-explanation-label {
        flex-basis: auto;
    }

    .ivr-experience-explanation-content h3 {
        font-size: 18px;
    }

    .ivr-experience-explanation-content p {
        font-size: 12px;
    }

    .ivr-experience-bottom {
        align-items: flex-start;
        padding: 20px;
    }

    .ivr-experience-bottom-content h3 {
        font-size: 16px;
        line-height: 1.5;
    }

    .ivr-experience-bottom-arrow {
        display: none;
    }

}


@media (max-width: 480px) {

    .ivr-experience-header h2 {
        font-size: 26px;
    }

    .ivr-experience-column-header span {
        font-size: 8px;
    }

    .ivr-experience-column-header h3 {
        font-size: 18px;
    }

    .ivr-experience-device-footer {
        font-size: 9px;
    }

    .ivr-experience-explanation-content h3 {
        font-size: 17px;
    }

}







/* =========================================
   ROI DECISION FRAMEWORK
========================================= */

.roi-decision-section {
    position: relative;
    padding: 110px 0;
    background: #f8f6fb;
    overflow: hidden;
}

.roi-decision-section::before {
    position: absolute;
    content: "";
    width: 480px;
    height: 480px;
    top: -280px;
    right: -210px;
    border: 1px solid rgba(216, 82, 237, 0.1);
    border-radius: 50%;
}

.roi-decision-section::after {
    position: absolute;
    content: "";
    width: 340px;
    height: 340px;
    bottom: -220px;
    left: -180px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}

.roi-decision-section .container {
    position: relative;
    z-index: 2;
}


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

.roi-decision-header {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.roi-decision-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: #a13bb5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.roi-decision-eyebrow span {
    width: 30px;
    height: 2px;
    background: #d852ed;
}

.roi-decision-header h2 {
    margin: 0;
    color: #292333;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.2px;
}

.roi-decision-header h2 strong {
    color: #d852ed;
}

.roi-decision-header p {
    max-width: 680px;
    margin: 21px auto 0;
    color: #777080;
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   MAIN DECISION FRAMEWORK
========================================= */

.roi-decision-framework {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: stretch;
}


/* =========================================
   QUESTION PANEL
========================================= */

.roi-decision-question-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    padding: 32px;
    border-radius: 21px;
    background: #292333;
    overflow: hidden;
}

.roi-decision-question-panel::before {
    position: absolute;
    content: "";
    width: 370px;
    height: 370px;
    right: -240px;
    top: -170px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
}

.roi-decision-question-panel::after {
    position: absolute;
    content: "";
    width: 470px;
    height: 470px;
    right: -290px;
    top: -220px;
    border: 1px solid rgba(216, 82, 237, 0.13);
    border-radius: 50%;
}

.roi-decision-question-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.roi-decision-question-top>span {
    color: #b8acbf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.roi-decision-question-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 12px;
    color: #d852ed;
    font-size: 17px;
}

.roi-decision-question-content {
    position: relative;
    z-index: 2;
    margin-top: 75px;
}

.roi-decision-question-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.roi-decision-question-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 31px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.7px;
}

.roi-decision-question-content h3 strong {
    display: block;
    color: #d852ed;
    font-weight: 800;
}

.roi-decision-question-content p {
    max-width: 310px;
    margin: 21px 0 0;
    color: #b9aebe;
    font-size: 12px;
    line-height: 1.9;
}

.roi-decision-question-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
}

.roi-decision-question-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.14);
    color: #d852ed;
    font-size: 14px;
}

.roi-decision-question-footer div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roi-decision-question-footer strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.roi-decision-question-footer span {
    color: #a89bad;
    font-size: 10px;
}


/* =========================================
   OPPORTUNITIES PANEL
========================================= */

.roi-decision-opportunities {
    padding: 30px;
    border: 1px solid #eae2ef;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(51, 29, 62, 0.035);

    transition: all 0.3s ease;
}

.roi-decision-opportunities:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 40px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}

.roi-decision-opportunities-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0eaf3;
}

.roi-decision-opportunities-header>div:first-child>span {
    color: #a13bb5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.roi-decision-opportunities-header h3 {
    margin: 10px 0 0;
    color: #292333;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.roi-decision-opportunities-header h3 strong {
    color: #d852ed;
}

.roi-decision-analysis-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #eadbed;
    border-radius: 30px;
    color: #9989a3;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.roi-decision-analysis-status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #75dba6;
}


/* =========================================
   OPPORTUNITY ROWS
========================================= */

.roi-decision-opportunity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 25px 0;
    border-bottom: 1px solid #f1ebf4;
}

.roi-decision-opportunity:last-child {
    padding-bottom: 3px;
    border-bottom: none;
}

.roi-decision-opportunity-number {
    flex: 0 0 24px;
    color: #c7b9cf;
    font-size: 10px;
    font-weight: 800;
}

.roi-decision-opportunity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid #eee3f2;
    border-radius: 13px;
    background: #fbf7fd;
    color: #d852ed;
    font-size: 16px;
}

.roi-decision-opportunity-content {
    flex: 1;
    min-width: 0;
}

.roi-decision-opportunity-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.roi-decision-opportunity-title h4 {
    margin: 0;
    color: #292333;
    font-size: 14px;
    font-weight: 800;
}

.roi-decision-opportunity-title span {
    padding: 5px 8px;
    border-radius: 5px;
    background: #f8edfB;
    color: #a13bb5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.roi-decision-opportunity-content p {
    max-width: 520px;
    margin: 9px 0 0;
    color: #83758b;
    font-size: 12px;
    line-height: 1.8;
}

.roi-decision-opportunity-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;

    color: #c6a1d0;
    font-size: 10px;
}


/* =========================================
   QUESTION TRANSITION
========================================= */

.roi-decision-transition {
    margin-top: 32px;
    padding: 30px;
    border: 1px solid #e8d9ed;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(51, 29, 62, 0.035);

    transition: all 0.3s ease;
}

.roi-decision-transition:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 40px rgba(216, 82, 237, 0.25);
    transform: translateY(-5px);
}


.roi-decision-transition-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 25px;
    color: #a13bb5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.roi-decision-transition-label i {
    color: #d852ed;
}

.roi-decision-transition-content {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) 50px minmax(0, 1.2fr);
    align-items: center;
    gap: 20px;
}

.roi-decision-wrong-question,
.roi-decision-right-question {
    min-width: 0;
}

.roi-decision-wrong-question>span,
.roi-decision-right-question>span {
    display: block;
    margin-bottom: 13px;
    color: #a99aad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.roi-decision-wrong-question h3 {
    margin: 0;
    color: #817489;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

.roi-decision-right-question {
    padding: 22px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 14px;
    background: #fdf5ff;
}

.roi-decision-right-question h3 {
    margin: 0;
    color: #292333;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
}

.roi-decision-right-question h3 strong {
    color: #d852ed;
}

.roi-decision-transition-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #292333;
    color: #d852ed;
    font-size: 12px;
}


/* =========================================
   FINAL INSIGHT
========================================= */

.roi-decision-insight {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 24px 28px;
    border-radius: 17px;
    background: #292333;
}

.roi-decision-insight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.15);
    color: #d852ed;
    font-size: 17px;
}

.roi-decision-insight-content {
    flex: 1;
}

.roi-decision-insight-content>span {
    display: block;
    margin-bottom: 5px;
    color: #b9a8c2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.roi-decision-insight-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

.roi-decision-insight-content h3 strong {
    color: #d852ed;
}

.roi-decision-insight-content p {
    margin: 6px 0 0;
    color: #b4a6bd;
    font-size: 12px;
    line-height: 1.7;
}

.roi-decision-insight-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #d852ed;
    color: #ffffff;
    font-size: 12px;
}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 991px) {

    .roi-decision-section {
        padding: 80px 0;
    }

    .roi-decision-header h2 {
        font-size: 36px;
    }

    .roi-decision-framework {
        grid-template-columns: 1fr;
    }

    .roi-decision-question-panel {
        min-height: 420px;
    }

    .roi-decision-question-content {
        margin-top: 55px;
    }

    .roi-decision-transition-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .roi-decision-transition-arrow {
        margin: 0 auto;
        transform: rotate(90deg);
    }

}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 767px) {

    .roi-decision-section {
        padding: 65px 0;
    }

    .roi-decision-header {
        margin-bottom: 35px;
    }

    .roi-decision-header h2 {
        font-size: 29px;
        letter-spacing: -0.6px;
    }

    .roi-decision-header p {
        font-size: 13px;
    }

    .roi-decision-question-panel {
        min-height: 390px;
        padding: 26px;
        border-radius: 17px;
    }

    .roi-decision-question-content {
        margin-top: 50px;
    }

    .roi-decision-question-content h3 {
        font-size: 27px;
    }

    .roi-decision-opportunities {
        padding: 22px;
        border-radius: 17px;
    }

    .roi-decision-opportunities-header {
        flex-direction: column;
        gap: 15px;
    }

    .roi-decision-opportunities-header h3 {
        font-size: 21px;
    }

    .roi-decision-opportunity {
        align-items: flex-start;
        gap: 10px;
        padding: 22px 0;
    }

    .roi-decision-opportunity-number {
        flex: 0 0 19px;
        padding-top: 5px;
        font-size: 9px;
    }

    .roi-decision-opportunity-icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .roi-decision-opportunity-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .roi-decision-opportunity-title h4 {
        font-size: 13px;
    }

    .roi-decision-opportunity-content p {
        font-size: 11px;
        line-height: 1.8;
    }

    .roi-decision-opportunity-arrow {
        display: none;
    }

    .roi-decision-transition {
        padding: 22px;
    }

    .roi-decision-transition-content {
        gap: 20px;
    }

    .roi-decision-wrong-question h3 {
        font-size: 18px;
    }

    .roi-decision-right-question {
        padding: 18px;
    }

    .roi-decision-right-question h3 {
        font-size: 18px;
    }

    .roi-decision-insight {
        align-items: flex-start;
        padding: 20px;
    }

    .roi-decision-insight-content h3 {
        font-size: 16px;
    }

    .roi-decision-insight-content p {
        font-size: 11px;
    }

    .roi-decision-insight-mark {
        display: none;
    }

}


@media (max-width: 480px) {

    .roi-decision-header h2 {
        font-size: 26px;
    }

    .roi-decision-question-content h3 {
        font-size: 24px;
    }

    .roi-decision-question-content p {
        font-size: 11px;
    }

    .roi-decision-opportunities-header h3 {
        font-size: 19px;
    }

    .roi-decision-transition-label {
        font-size: 8px;
    }

}







/* =========================================
   AI VOICE IMPORTANCE SECTION
========================================= */

.voice-importance-section {
    position: relative;
    padding: 105px 0;
    background: #ffffff;
    overflow: hidden;
}

.voice-importance-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(216, 82, 237, 0.06);
    border-radius: 50%;
    top: -190px;
    right: -140px;
    pointer-events: none;
}

.voice-importance-heading {
    max-width: 780px;
    margin: 0 auto 65px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.voice-importance-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border-radius: 30px;
    background: #fbf1ff;
    color: #b52ed0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 22px;
}

.voice-importance-eyebrow i {
    font-size: 13px;
}

.voice-importance-heading h2 {
    color: #171321;
    font-size: 43px;
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 22px;
}

.voice-importance-heading h2 span {
    color: #d852ed;
}

.voice-importance-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #73717b;
    font-size: 16px;
    line-height: 1.9;
}

/* Main Layout */

.voice-importance-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/* Left Content */

.voice-importance-content {
    position: relative;
}

.voice-importance-intro {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.voice-importance-number {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9c5f2;
    border-radius: 14px;
    color: #d852ed;
    font-size: 14px;
    font-weight: 700;
    background: #fffaff;
}

.voice-importance-intro h3 {
    color: #21182a;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 11px;
}

.voice-importance-intro p {
    color: #77717d;
    font-size: 15px;
    line-height: 1.85;
    margin: 0;
}

.voice-importance-divider {
    height: 1px;
    background: #eee6f0;
    margin: 30px 0;
}

/* Right Visual */

.voice-importance-visual {
    position: relative;
    min-height: 510px;
    padding: 27px;
    border: 1px solid #eee4f2;
    border-radius: 28px;
    background:
        linear-gradient(145deg, #ffffff 0%, #fcf7ff 100%);
    box-shadow: 0 20px 65px rgba(83, 35, 96, 0.08);
    overflow: hidden;

    transition: all 0.3s ease;
}

.voice-importance-visual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}


.voice-importance-visual::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
    right: -110px;
    bottom: 90px;
}

.voice-importance-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.voice-importance-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #82738b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.voice-importance-status i {
    color: #45c98b;
    font-size: 7px;
}

.voice-importance-visual-top>i {
    color: #a89bac;
    font-size: 16px;
}

/* Orbit */

.voice-importance-orbit {
    height: 340px;
    position: relative;
    margin-top: 5px;
}

.voice-importance-orbit-ring {
    position: absolute;
    border: 1px dashed #e6c9ed;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.voice-importance-orbit-ring.ring-one {
    width: 220px;
    height: 220px;
}

.voice-importance-orbit-ring.ring-two {
    width: 315px;
    height: 315px;
    border-color: #f0dff4;
}

/* Center */

.voice-importance-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 126px;
    height: 126px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 7px solid #f9eaff;
    box-shadow: 0 12px 35px rgba(216, 82, 237, 0.18);
    z-index: 3;
}

.voice-importance-center-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d852ed;
    color: #ffffff;
    margin-bottom: 7px;
}

.voice-importance-center strong {
    color: #2a1d30;
    font-size: 14px;
    line-height: 1.2;
}

.voice-importance-center span {
    color: #8d7b94;
    font-size: 12px;
}

/* Nodes */

.voice-importance-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid #ead8ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(64, 30, 75, 0.06);
    color: #4e4055;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 4;
}

.voice-importance-node i {
    color: #d852ed;
    font-size: 13px;
}

.voice-importance-node.node-top {
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
}

.voice-importance-node.node-right {
    top: 50%;
    right: -2px;
    transform: translateY(-50%);
}

.voice-importance-node.node-bottom {
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.voice-importance-node.node-left {
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
}

/* Bottom Message */

.voice-importance-bottom {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border-radius: 16px;
    background: #25172d;
    margin-top: 30px;
}

.voice-importance-bottom-icon {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
    background: #d852ed;
}

.voice-importance-bottom strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 4px;
}

.voice-importance-bottom p {
    color: #c5b5cb;
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}

/* Hover Effects */

.voice-importance-intro {
    transition: transform 0.3s ease;
}

.voice-importance-intro:hover {
    transform: translateX(6px);
}

.voice-importance-intro:hover .voice-importance-number {
    background: #d852ed;
    color: #ffffff;
    border-color: #d852ed;
    transition: all 0.3s ease;
}

.voice-importance-node {
    transition: all 0.3s ease;
}

.voice-importance-node:hover {
    border-color: #d852ed;
    transform: scale(1.04);
}

/* Responsive */

@media (max-width: 991px) {

    .voice-importance-section {
        padding: 75px 0;
    }

    .voice-importance-heading h2 {
        font-size: 36px;
    }

    .voice-importance-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .voice-importance-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .voice-importance-visual {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {

    .voice-importance-section {
        padding: 60px 15px;
    }

    .voice-importance-heading {
        margin-bottom: 42px;
    }

    .voice-importance-heading h2 {
        font-size: 29px;
    }

    .voice-importance-heading p {
        font-size: 14px;
    }

    .voice-importance-eyebrow {
        font-size: 9px;
        letter-spacing: 0.8px;
    }

    .voice-importance-intro {
        gap: 14px;
    }

    .voice-importance-number {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .voice-importance-intro h3 {
        font-size: 18px;
    }

    .voice-importance-intro p {
        font-size: 14px;
        line-height: 1.75;
    }

    .voice-importance-visual {
        min-height: 455px;
        padding: 18px;
        border-radius: 20px;
    }

    .voice-importance-orbit {
        height: 300px;
    }

    .voice-importance-orbit-ring.ring-one {
        width: 175px;
        height: 175px;
    }

    .voice-importance-orbit-ring.ring-two {
        width: 260px;
        height: 260px;
    }

    .voice-importance-center {
        width: 105px;
        height: 105px;
    }

    .voice-importance-node {
        padding: 8px 9px;
        font-size: 9px;
        gap: 5px;
    }

    .voice-importance-node i {
        font-size: 11px;
    }

    .voice-importance-node.node-right {
        right: -10px;
    }

    .voice-importance-node.node-left {
        left: -10px;
    }

    .voice-importance-bottom {
        padding: 13px;
        gap: 10px;
    }

    .voice-importance-bottom strong {
        font-size: 11px;
    }

    .voice-importance-bottom p {
        font-size: 10px;
    }
}



/* =========================================
   AI FINAL TAKEAWAY SECTION
========================================= */

.ai-final-takeaway-section {
    position: relative;
    padding: 105px 0;
    background: #fbf8fd;
    overflow: hidden;
}

.ai-final-takeaway-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
    left: -230px;
    top: 100px;
    pointer-events: none;
}

.ai-final-takeaway-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(216, 82, 237, 0.13);
    border-radius: 50%;
    right: -140px;
    bottom: 60px;
    pointer-events: none;
}

/* Header */

.ai-final-takeaway-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 60px;
}

.ai-final-takeaway-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 30px;
    color: #b92bd4;
    background: #f5e8fa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ai-final-takeaway-label i {
    font-size: 13px;
}

.ai-final-takeaway-header h2 {
    color: #211627;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    margin: 22px 0 20px;
}

.ai-final-takeaway-header h2 span {
    color: #d852ed;
}

.ai-final-takeaway-line {
    width: 65px;
    height: 4px;
    border-radius: 10px;
    background: #d852ed;
    margin: 0 auto;
}

/* Main Wrapper */

.ai-final-takeaway-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 65px;
    align-items: center;
}

/* Left Content */

.ai-final-takeaway-main {
    position: relative;
    padding: 10px 0 10px 25px;
}

.ai-final-takeaway-quote-mark {
    position: absolute;
    top: -42px;
    left: -5px;
    color: rgba(216, 82, 237, 0.18);
    font-family: Georgia, serif;
    font-size: 145px;
    line-height: 1;
    pointer-events: none;
}

.ai-final-takeaway-main h3 {
    position: relative;
    color: #211627;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 28px;
}

.ai-final-takeaway-main h3 span {
    color: #d852ed;
    display: block;
}

.ai-final-takeaway-main>p {
    color: #746b7b;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 18px;
    max-width: 570px;
}

/* Highlight Box */

.ai-final-takeaway-highlight {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 28px;
    padding: 23px;
    border-left: 4px solid #d852ed;
    border-radius: 0 15px 15px 0;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(66, 26, 78, 0.06);

    transition: all 0.3s ease;
}

.ai-final-takeaway-highlight:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.ai-final-takeaway-highlight>i {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #d852ed;
    border-radius: 10px;
    font-size: 14px;
}

.ai-final-takeaway-highlight p {
    color: #5f5366;
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
}

/* Right Flow Card */

.ai-final-takeaway-side {
    padding: 30px;
    border: 1px solid #ebdff0;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(70, 33, 83, 0.07);

    transition: all 0.3s ease;
}

.ai-final-takeaway-side:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.ai-final-takeaway-flow-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0e7f3;
}

.ai-final-takeaway-flow-title span {
    color: #9b8ba3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.ai-final-takeaway-flow-title i {
    color: #d852ed;
    font-size: 17px;
}

/* Flow Items */

.ai-final-takeaway-flow {
    padding-top: 27px;
}

.ai-final-takeaway-flow-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    border: 1px solid #eee5f1;
    border-radius: 15px;
    background: #fdfbfe;
    transition: all 0.3s ease;
}

.ai-final-takeaway-flow-item:hover {
    border-color: #d852ed;
    transform: translateX(5px);
    box-shadow: 0 8px 22px rgba(216, 82, 237, 0.08);
}

.ai-final-takeaway-flow-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d852ed;
    background: #f8eaff;
    border-radius: 12px;
    font-size: 16px;
}

.ai-final-takeaway-flow-icon.human-icon {
    color: #ffffff;
    background: #29202f;
}

.ai-final-takeaway-flow-item strong {
    display: block;
    color: #302237;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.ai-final-takeaway-flow-item p {
    color: #8a7c91;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

/* Connectors */

.ai-final-takeaway-connector {
    height: 28px;
    position: relative;
    margin-left: 38px;
}

.ai-final-takeaway-connector::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-left: 1px dashed #d852ed;
}

.ai-final-takeaway-connector span {
    position: absolute;
    left: -4px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #d852ed;
    border-bottom: 1px solid #d852ed;
    transform: rotate(45deg);
}

/* Balance Message */

.ai-final-takeaway-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    padding: 15px;
    border-radius: 12px;
    background: #291d31;
}

.ai-final-takeaway-balance i {
    color: #d852ed;
    font-size: 14px;
}

.ai-final-takeaway-balance span {
    color: #eee1f1;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 600;
}

/* Bottom Conclusion */

.ai-final-takeaway-conclusion {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 70px;
    padding: 30px 35px;
    border-radius: 22px;
    background: #25172d;
    overflow: hidden;
}

.ai-final-takeaway-conclusion::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 50%;
    right: -100px;
    top: -115px;
}

.ai-final-takeaway-conclusion-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #d852ed;
    border-radius: 14px;
    font-size: 17px;
}

.ai-final-takeaway-conclusion-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.ai-final-takeaway-conclusion-content h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}

.ai-final-takeaway-conclusion-content p {
    color: #c9b8d0;
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 8px;
}

.ai-final-takeaway-conclusion-content p:last-child {
    margin-bottom: 0;
}

.ai-final-takeaway-conclusion-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    border: 1px solid rgba(216, 82, 237, 0.4);
    border-radius: 30px;
    color: #f1c8fa;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;

    overflow: hidden;
}

/* Moving Border */
.ai-final-takeaway-conclusion-badge::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 30px;

    background: conic-gradient(from 0deg,
            transparent 0deg,
            transparent 240deg,
            #D852ED 300deg,
            #ffffff 330deg,
            #D852ED 360deg);

    animation: rotateBorder 3s linear infinite;

    z-index: -2;
}

/* Inner Background */
.ai-final-takeaway-conclusion-badge::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 30px;
    background: #24152c;
    z-index: -1;
}

/* Animation */
@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ai-final-takeaway-conclusion-badge i {
    color: #d852ed;
}

/* Responsive */

@media (max-width: 991px) {

    .ai-final-takeaway-section {
        padding: 80px 0;
    }

    .ai-final-takeaway-header h2 {
        font-size: 37px;
    }

    .ai-final-takeaway-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ai-final-takeaway-main {
        max-width: 700px;
        margin: 0 auto;
    }

    .ai-final-takeaway-side {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .ai-final-takeaway-conclusion {
        align-items: flex-start;
    }

    .ai-final-takeaway-conclusion-badge {
        display: none;
    }
}

@media (max-width: 575px) {

    .ai-final-takeaway-section {
        padding: 60px 15px;
    }

    .ai-final-takeaway-header {
        margin-bottom: 42px;
    }

    .ai-final-takeaway-header h2 {
        font-size: 30px;
    }

    .ai-final-takeaway-label {
        font-size: 9px;
        letter-spacing: 0.8px;
    }

    .ai-final-takeaway-main {
        padding-left: 5px;
    }

    .ai-final-takeaway-main h3 {
        font-size: 27px;
    }

    .ai-final-takeaway-main>p {
        font-size: 14px;
    }

    .ai-final-takeaway-highlight {
        padding: 17px;
        gap: 10px;
    }

    .ai-final-takeaway-highlight p {
        font-size: 13px;
    }

    .ai-final-takeaway-side {
        padding: 20px;
        border-radius: 20px;
    }

    .ai-final-takeaway-flow-item {
        padding: 13px;
        gap: 11px;
    }

    .ai-final-takeaway-flow-icon {
        flex-basis: 37px;
        width: 37px;
        height: 37px;
        font-size: 14px;
    }

    .ai-final-takeaway-flow-item strong {
        font-size: 12px;
    }

    .ai-final-takeaway-flow-item p {
        font-size: 11px;
    }

    .ai-final-takeaway-conclusion {
        flex-direction: column;
        gap: 16px;
        padding: 25px 20px;
        margin-top: 45px;
    }

    .ai-final-takeaway-conclusion-content h4 {
        font-size: 18px;
    }

    .ai-final-takeaway-conclusion-content p {
        font-size: 13px;
    }
}





/* =========================================
   AI CALL ANALYSIS SECTION
========================================= */

.call-analysis-intelligence-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
        radial-gradient(circle at 8% 15%,
            rgba(216, 82, 237, 0.09),
            transparent 28%),
        #fbf9ff;
}

/* Header */

.call-analysis-header {
    max-width: 780px;
    margin: 0 auto 65px;
}

.call-analysis-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    color: #b43aca;
    background: rgba(216, 82, 237, 0.07);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.call-analysis-eyebrow i {
    font-size: 12px;
}

.call-analysis-header h2 {
    margin-bottom: 20px;
    color: #21152d;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
}

.call-analysis-header h2 span {
    color: #d852ed;
}

.call-analysis-header p {
    max-width: 650px;
    margin: 0 auto;
    color: #746b7c;
    font-size: 16px;
    line-height: 1.9;
}


/* Main Layout */

.call-analysis-intelligence-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 65px;
    align-items: center;
}


/* Left Explanation */

.call-analysis-explanation {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid rgba(216, 82, 237, 0.25);
}

.call-analysis-number {
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.call-analysis-explanation h3 {
    max-width: 480px;
    margin-bottom: 22px;
    color: #24182e;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
}

.call-analysis-explanation h3 strong {
    display: block;
    color: #d852ed;
    font-weight: 800;
}

.call-analysis-explanation>p {
    margin-bottom: 27px;
    color: #766c80;
    font-size: 15px;
    line-height: 1.8;
}


/* Insight List */

.call-analysis-insight-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.call-analysis-insight-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border: 1px solid rgba(35, 20, 48, 0.07);
    border-radius: 9px;
    background: #ffffff;
    color: #4d4257;
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.call-analysis-insight-item:hover {
    border-color: rgba(216, 82, 237, 0.45);
    transform: translateX(6px);
    box-shadow: 0 8px 24px rgba(58, 27, 72, 0.06);
}

.call-analysis-insight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(216, 82, 237, 0.1);
    color: #d852ed;
    font-size: 12px;
}


/* Dashboard */

.call-analysis-dashboard {
    padding: 25px;
    border: 1px solid rgba(216, 82, 237, 0.16);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(47, 24, 58, 0.10);

    transition: all 0.3s ease;
}

.call-analysis-dashboard:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.call-analysis-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.call-analysis-dashboard-top small {
    display: block;
    margin-bottom: 8px;
    color: #a197ab;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.call-analysis-dashboard-top h4 {
    margin: 0;
    color: #2a1b35;
    font-size: 21px;
    font-weight: 800;
}

.call-analysis-live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 20px;
    background: #f2fbf6;
    color: #32a56b;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.call-analysis-live-status i {
    font-size: 7px;
}


/* Volume Card */

.call-analysis-volume-card {
    margin-bottom: 18px;
    padding: 21px;
    border-radius: 15px;
    background: #281d32;
    color: #ffffff;
}

.call-analysis-volume-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.call-analysis-volume-heading small {
    color: #bdb0c6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.call-analysis-volume-heading h3 {
    margin: 9px 0 0;
    color: #ffffff;
    font-size: 37px;
    font-weight: 800;
}

.call-analysis-volume-heading h3 span {
    color: #bfb1c9;
    font-size: 13px;
    font-weight: 500;
}

.call-analysis-volume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(216, 82, 237, 0.4);
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.13);
    color: #e18bf2;
}

.call-analysis-volume-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 105px;
    margin-top: 25px;
}

.call-analysis-volume-bars span {
    flex: 1;
    min-height: 8px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to top,
            #9c35b7,
            #e18bf2);
    opacity: 0.9;
}

.call-analysis-volume-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #a99bad;
    font-size: 10px;
}

.call-analysis-volume-footer strong {
    color: #e18bf2;
    font-weight: 700;
}


/* Category Panel */

.call-analysis-category-panel {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #eee8f1;
    border-radius: 15px;
    background: #ffffff;
}

.call-analysis-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.call-analysis-category-header h5 {
    margin: 0;
    color: #33243e;
    font-size: 13px;
    font-weight: 800;
}

.call-analysis-category-header span {
    color: #c08aca;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.call-analysis-category-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr 35px;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.call-analysis-category-row:last-child {
    margin-bottom: 0;
}

.call-analysis-category-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #665970;
    font-size: 10px;
    line-height: 1.4;
}

.call-analysis-category-name i {
    color: #d852ed;
    font-size: 12px;
}

.call-analysis-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: #f0eaf3;
}

.call-analysis-progress span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg,
            #b73ed0,
            #e18bf2);
}

.call-analysis-category-row strong {
    color: #8f789b;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}


/* Result Box */

.call-analysis-result-box {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    border-radius: 13px;
    background: #fcf3ff;
}

.call-analysis-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #d852ed;
    color: #ffffff;
    font-size: 13px;
}

.call-analysis-result-box strong {
    display: block;
    margin-bottom: 5px;
    color: #4e285b;
    font-size: 12px;
}

.call-analysis-result-box p {
    margin: 0;
    color: #94779d;
    font-size: 11px;
    line-height: 1.6;
}


/* Volume Explanation */

.call-analysis-volume-explanation {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 50px;
    align-items: center;
    margin-top: 90px;
    padding: 45px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(47, 24, 58, 0.06);

    transition: all 0.3s ease;
}

.call-analysis-volume-explanation:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.25);
}

.call-analysis-small-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #c044d8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.call-analysis-volume-content h3 {
    max-width: 600px;
    margin-bottom: 20px;
    color: #2a1b35;
    font-size: 31px;
    font-weight: 800;
    line-height: 1.25;
}

.call-analysis-volume-content h3 span {
    color: #d852ed;
}

.call-analysis-volume-content p {
    margin-bottom: 10px;
    color: #766c80;
    font-size: 15px;
    line-height: 1.8;
}

.call-analysis-volume-stat {
    position: relative;
    padding: 28px 20px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 15px;
    background: #fcf5ff;
    text-align: center;
}

.call-analysis-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: #d852ed;
    color: #ffffff;
}

.call-analysis-volume-stat strong {
    display: block;
    color: #392044;
    font-size: 39px;
    font-weight: 800;
    line-height: 1;
}

.call-analysis-volume-stat>span {
    display: block;
    margin-top: 10px;
    color: #8b7096;
    font-size: 12px;
    font-weight: 700;
}

.call-analysis-volume-stat small {
    display: block;
    margin-top: 14px;
    color: #a38eab;
    font-size: 10px;
    line-height: 1.5;
}


/* Final Section */

.call-analysis-final-section {
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: 28px;
    margin-top: 75px;
    padding: 20px 0 0;
}

.call-analysis-final-line {
    border-radius: 20px;
    background: linear-gradient(to bottom,
            #d852ed,
            #a92dc3);
}

.call-analysis-final-content h3 {
    margin-bottom: 20px;
    color: #2a1b35;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
}

.call-analysis-final-content h3 span {
    color: #d852ed;
}

.call-analysis-final-content p {
    max-width: 900px;
    margin-bottom: 14px;
    color: #766c80;
    font-size: 15px;
    line-height: 1.9;
}


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

@media (max-width: 1199px) {

    .call-analysis-intelligence-layout {
        gap: 35px;
    }

    .call-analysis-explanation h3 {
        font-size: 29px;
    }

    .call-analysis-category-row {
        grid-template-columns: 1.2fr 1fr 32px;
    }

}

@media (max-width: 991px) {

    .call-analysis-intelligence-section {
        padding: 80px 0;
    }

    .call-analysis-header h2 {
        font-size: 37px;
    }

    .call-analysis-intelligence-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .call-analysis-explanation {
        padding-left: 25px;
    }

    .call-analysis-dashboard {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .call-analysis-volume-explanation {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 65px;
        padding: 35px;
    }

    .call-analysis-volume-stat {
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
    }

}

@media (max-width: 575px) {

    .call-analysis-intelligence-section {
        padding: 60px 0;
    }

    .call-analysis-header {
        margin-bottom: 40px;
    }

    .call-analysis-header h2 {
        font-size: 29px;
    }

    .call-analysis-header p {
        font-size: 14px;
    }

    .call-analysis-explanation {
        padding-left: 18px;
    }

    .call-analysis-explanation h3 {
        font-size: 26px;
    }

    .call-analysis-insight-item {
        align-items: flex-start;
        font-size: 12px;
    }

    .call-analysis-dashboard {
        padding: 16px;
        border-radius: 15px;
    }

    .call-analysis-dashboard-top {
        flex-direction: column;
        gap: 12px;
    }

    .call-analysis-volume-heading h3 {
        font-size: 31px;
    }

    .call-analysis-volume-bars {
        gap: 4px;
    }

    .call-analysis-category-panel {
        padding: 15px;
    }

    .call-analysis-category-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .call-analysis-category-row {
        grid-template-columns: 1fr 65px 28px;
        gap: 7px;
    }

    .call-analysis-category-name {
        font-size: 9px;
    }

    .call-analysis-volume-explanation {
        margin-top: 50px;
        padding: 25px 20px;
    }

    .call-analysis-volume-content h3 {
        font-size: 26px;
    }

    .call-analysis-final-section {
        grid-template-columns: 5px 1fr;
        gap: 18px;
        margin-top: 50px;
    }

    .call-analysis-final-content h3 {
        font-size: 26px;
    }

    .call-analysis-final-content p {
        font-size: 14px;
    }

}




/* =========================================
   MINIMAL CALL ANALYSIS SECTION
========================================= */

.minimal-call-analysis-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #ffffff;
}

.minimal-call-analysis-section .container {
    position: relative;
    z-index: 1;
}


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

.minimal-call-analysis-header {
    max-width: 780px;
    margin-bottom: 55px;
}

.minimal-call-analysis-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #b33bc9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.minimal-call-analysis-header h2 {
    margin-bottom: 22px;
    color: #2a1a35;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
}

.minimal-call-analysis-header h2 span,
.minimal-call-analysis-insight-heading h3 span,
.minimal-call-analysis-actions-heading h3 span {
    color: #d852ed;
}

.minimal-call-analysis-header p {
    margin-bottom: 8px;
    color: #776a81;
    font-size: 15px;
    line-height: 1.8;
}


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

.minimal-call-analysis-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 70px;
}

.minimal-call-analysis-compare-box {
    padding: 30px;
    border: 1px solid #e9e2ed;
    border-radius: 15px;

    transition: all 0.3s ease;
}

.minimal-call-analysis-compare-box:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);

}

.minimal-call-analysis-compare-box.active {
    border-color: rgba(216, 82, 237, 0.35);
    background: #fcf4ff;

    transition: all 0.3s ease;
}

.minimal-call-analysis-compare-box.active:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}


.minimal-call-analysis-compare-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 23px;
    border-radius: 12px;
    background: #eee8f2;
    color: #89758f;
    font-size: 17px;
}

.minimal-call-analysis-compare-box.active .minimal-call-analysis-compare-icon {
    background: #f1dafa;
    color: #d852ed;
}

.minimal-call-analysis-label {
    display: block;
    margin-bottom: 12px;
    color: #b14ac6;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.minimal-call-analysis-compare-box h3 {
    margin-bottom: 14px;
    color: #302039;
    font-size: 24px;
    font-weight: 800;
}

.minimal-call-analysis-compare-box p {
    max-width: 480px;
    margin: 0;
    color: #7c7085;
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================
   EXAMPLE INTRODUCTION
========================================= */

.minimal-call-analysis-example-intro {
    max-width: 720px;
    margin-bottom: 32px;
}

.minimal-call-analysis-example-intro p {
    margin-bottom: 12px;
    color: #70637a;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   COMPLAINT HIGHLIGHT
========================================= */

.minimal-call-analysis-complaint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 90px;
    padding: 38px 42px;
    border-radius: 17px;
    background: #2b1b35;
}

.minimal-call-analysis-complaint-content {
    max-width: 580px;
}

.minimal-call-analysis-complaint-content .minimal-call-analysis-label {
    color: #d77ae9;
}

.minimal-call-analysis-complaint-content h3 {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
}

.minimal-call-analysis-complaint-content p {
    margin: 0;
    color: #c7b5ce;
    font-size: 14px;
    line-height: 1.8;
}

.minimal-call-analysis-complaint-number {
    flex: 0 0 180px;
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
}

.minimal-call-analysis-complaint-number strong {
    display: block;
    color: #e18bf2;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
}

.minimal-call-analysis-complaint-number span {
    display: block;
    margin-top: 10px;
    color: #c8b4d0;
    font-size: 11px;
    line-height: 1.6;
}


/* =========================================
   BUSINESS INSIGHT
========================================= */

.minimal-call-analysis-insight {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 65px;
    margin-bottom: 80px;
    padding-bottom: 65px;
    border-bottom: 1px solid #eee6f1;
}

.minimal-call-analysis-insight-heading h3,
.minimal-call-analysis-actions-heading h3 {
    margin: 0;
    color: #2b1b36;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
}

.minimal-call-analysis-insight-content>p {
    margin-bottom: 25px;
    color: #766a80;
    font-size: 15px;
    line-height: 1.9;
}

.minimal-call-analysis-insight-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px;
    border-left: 3px solid #d852ed;
    background: #fcf5ff;
    color: #765b80;
    font-size: 13px;
    line-height: 1.7;
}

.minimal-call-analysis-insight-line i {
    padding-top: 3px;
    color: #d852ed;
}


/* =========================================
   BUSINESS ACTIONS
========================================= */

.minimal-call-analysis-actions {
    margin-bottom: 38px;
}

.minimal-call-analysis-actions-heading {
    margin-bottom: 35px;
}

.minimal-call-analysis-action-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.minimal-call-analysis-action-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee7f1;
}

.minimal-call-analysis-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 11px;
    background: #f8eafa;
    color: #d852ed;
    font-size: 15px;
}

.minimal-call-analysis-action-item h4 {
    margin-bottom: 7px;
    color: #35233f;
    font-size: 17px;
    font-weight: 800;
}

.minimal-call-analysis-action-item p {
    margin: 0;
    color: #7b6e84;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   ORIGINAL ACTION PARAGRAPH
========================================= */

.minimal-call-analysis-original-action {
    margin-bottom: 75px;
    padding: 25px 28px;
    border: 1px solid #eadcf0;
    border-radius: 12px;
    background: #fdf9ff;
}

.minimal-call-analysis-original-action p {
    margin: 0;
    color: #6f5b79;
    font-size: 14px;
    font-style: italic;
    line-height: 1.9;
}


/* =========================================
   CONCLUSION
========================================= */

.minimal-call-analysis-conclusion {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 35px;
    border-top: 2px solid #d852ed;
    background: #faf7fc;
}

.minimal-call-analysis-conclusion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #d852ed;
    color: #ffffff;
    font-size: 17px;
}

.minimal-call-analysis-conclusion h3 {
    margin-bottom: 8px;
    color: #302039;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
}

.minimal-call-analysis-conclusion p {
    margin: 0;
    color: #d852ed;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .minimal-call-analysis-section {
        padding: 80px 0;
    }

    .minimal-call-analysis-header h2 {
        font-size: 37px;
    }

    .minimal-call-analysis-insight {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .minimal-call-analysis-complaint {
        padding: 32px;
    }

}

@media (max-width: 767px) {

    .minimal-call-analysis-comparison {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .minimal-call-analysis-complaint {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }

    .minimal-call-analysis-complaint-number {
        width: 100%;
        padding: 25px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        border-left: 0;
    }

    .minimal-call-analysis-complaint-number strong {
        font-size: 55px;
    }

}

@media (max-width: 575px) {

    .minimal-call-analysis-section {
        padding: 60px 0;
    }

    .minimal-call-analysis-header h2 {
        font-size: 29px;
    }

    .minimal-call-analysis-compare-box {
        padding: 24px;
    }

    .minimal-call-analysis-compare-box h3 {
        font-size: 22px;
    }

    .minimal-call-analysis-complaint {
        padding: 27px 22px;
    }

    .minimal-call-analysis-complaint-content h3 {
        font-size: 24px;
    }

    .minimal-call-analysis-insight-heading h3,
    .minimal-call-analysis-actions-heading h3 {
        font-size: 26px;
    }

    .minimal-call-analysis-conclusion {
        gap: 15px;
        padding: 25px 20px;
    }

    .minimal-call-analysis-conclusion h3 {
        font-size: 21px;
    }

    .minimal-call-analysis-conclusion p {
        font-size: 15px;
    }

}








/* =========================================
   AI CALL ANALYSIS WORKFLOW
========================================= */

.ai-analysis-workflow-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background: #fbf9fd;
}

.ai-analysis-workflow-section .container {
    position: relative;
    z-index: 1;
}


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

.ai-analysis-workflow-header {
    max-width: 760px;
    margin-bottom: 60px;
}

.ai-analysis-workflow-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: #b143c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ai-analysis-workflow-header h2 {
    margin-bottom: 20px;
    color: #2a1b35;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
}

.ai-analysis-workflow-header h2 span,
.ai-analysis-workflow-understanding-heading h3 span,
.ai-analysis-workflow-trend-content h3 span,
.ai-analysis-workflow-conclusion h3 span {
    color: #d852ed;
}

.ai-analysis-workflow-header p {
    max-width: 600px;
    margin: 0;
    color: #776b81;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   INTRODUCTION
========================================= */

.ai-analysis-workflow-intro {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    align-items: start;
    max-width: 780px;
    margin-bottom: 38px;
}

.ai-analysis-workflow-intro-number,
.ai-analysis-workflow-trend-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
    color: #d852ed;
    font-size: 12px;
    font-weight: 800;
}

.ai-analysis-workflow-intro h3 {
    margin-bottom: 14px;
    color: #302039;
    font-size: 25px;
    font-weight: 800;
}

.ai-analysis-workflow-intro p {
    margin-bottom: 8px;
    color: #786b81;
    font-size: 14px;
    line-height: 1.85;
}


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

.ai-analysis-workflow-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 90px;
}


/* Conversation Box */

.ai-analysis-workflow-conversation {
    padding: 30px;
    border: 1px solid #e8dfea;
    border-radius: 20px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.ai-analysis-workflow-conversation:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}


.ai-analysis-workflow-conversation-top,
.ai-analysis-workflow-processing-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 32px;
}

.ai-analysis-workflow-conversation-top span,
.ai-analysis-workflow-processing-top span {
    color: #a18ba9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ai-analysis-workflow-conversation-top i {
    color: #a58da9;
    font-size: 17px;
}

.ai-analysis-workflow-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.ai-analysis-workflow-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f2eaf5;
    color: #92759d;
    font-size: 15px;
}

.ai-analysis-workflow-person strong {
    display: block;
    margin-bottom: 4px;
    color: #3b2945;
    font-size: 13px;
    font-weight: 800;
}

.ai-analysis-workflow-person small {
    color: #a18da9;
    font-size: 10px;
}

.ai-analysis-workflow-quote {
    position: relative;
    padding: 23px;
    border-left: 3px solid #d852ed;
    border-radius: 0 12px 12px 0;
    background: #fcf6ff;
}

.ai-analysis-workflow-quote i {
    display: block;
    margin-bottom: 12px;
    color: #d852ed;
    font-size: 16px;
}

.ai-analysis-workflow-quote p {
    margin: 0;
    color: #5f4a6b;
    font-size: 15px;
    font-style: italic;
    line-height: 1.9;
}

.ai-analysis-workflow-call-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    color: #9b88a3;
    font-size: 10px;
}

.ai-analysis-workflow-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #62b98a;
}


/* Connector */

.ai-analysis-workflow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.ai-analysis-workflow-connector>span {
    color: #b044c7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
}

.ai-analysis-workflow-connector-line {
    width: 1px;
    min-height: 45px;
    background: linear-gradient(to bottom,
            transparent,
            #d852ed,
            transparent);
}

.ai-analysis-workflow-connector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
    background: #ffffff;
    color: #d852ed;
    font-size: 13px;
}


/* Processing Box */

.ai-analysis-workflow-processing {

    padding: 30px;
    border-radius: 17px;
    background: #2b1b35;
    box-shadow: 0 20px 45px rgba(45, 23, 55, 0.10);

    transition: all 0.3s ease;
}

.ai-analysis-workflow-processing:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ai-analysis-workflow-processing-top span {
    color: #d59ce3;
}

.ai-analysis-workflow-processing-top i {
    color: #e18bf2;
    font-size: 18px;
}

.ai-analysis-workflow-processing h3 {
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.35;
}

.ai-analysis-workflow-processing>p {
    margin-bottom: 28px;
    color: #c8b4d0;
    font-size: 14px;
    line-height: 1.9;
}

.ai-analysis-workflow-processing-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ai-analysis-workflow-processing-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #d5c5dc;
    font-size: 12px;
}

.ai-analysis-workflow-processing-item i {
    color: #e18bf2;
    font-size: 11px;
}


/* =========================================
   UNDERSTANDING SECTION
========================================= */

.ai-analysis-workflow-understanding {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    margin-bottom: 85px;
}

.ai-analysis-workflow-understanding-heading h3 {
    margin: 0;
    color: #2c1d37;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
}

.ai-analysis-workflow-understanding-result {
    padding: 28px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 16px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.ai-analysis-workflow-understanding-result:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ai-analysis-workflow-result-label {
    margin-bottom: 22px;
    color: #b044c7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ai-analysis-workflow-result-main {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.ai-analysis-workflow-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f8eafd;
    color: #d852ed;
    font-size: 18px;
}

.ai-analysis-workflow-result-main h4 {
    margin-bottom: 7px;
    color: #382443;
    font-size: 17px;
    font-weight: 800;
}

.ai-analysis-workflow-result-main p {
    margin: 0;
    color: #83718b;
    font-size: 12px;
    line-height: 1.7;
}

.ai-analysis-workflow-keyword-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid #eee6f1;
}

.ai-analysis-workflow-keyword-row span {
    padding: 7px 9px;
    border-radius: 5px;
    background: #f8f1fa;
    color: #a04cb5;
    font-size: 9px;
    font-weight: 800;
}


/* =========================================
   TREND SECTION
========================================= */

.ai-analysis-workflow-trend {
    display: grid;
    grid-template-columns: 55px 1fr 250px;
    gap: 25px;
    align-items: center;
    margin-bottom: 75px;
    padding: 40px;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(52, 27, 65, 0.06);

    transition: all 0.3s ease;
}

.ai-analysis-workflow-trend:hover {
    box-shadow: 0 12px 40px rgba(216, 82, 237, 0.25);
}

.ai-analysis-workflow-trend-content h3 {
    margin-bottom: 15px;
    color: #2d1d37;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
}

.ai-analysis-workflow-trend-content p {
    max-width: 600px;
    margin: 0;
    color: #776a80;
    font-size: 14px;
    line-height: 1.9;
}

.ai-analysis-workflow-trend-visual {
    padding: 20px;
    border-radius: 12px;
    background: #fcf5ff;
}

.ai-analysis-workflow-trend-label {
    margin-bottom: 18px;
    color: #ad83b8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ai-analysis-workflow-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 70px;
    margin-bottom: 15px;
}

.ai-analysis-workflow-trend-bars span {
    flex: 1;
    min-height: 8px;
    border-radius: 4px 4px 0 0;
    background: #d852ed;
}

.ai-analysis-workflow-trend-visual strong {
    display: block;
    margin-bottom: 5px;
    color: #4b2d57;
    font-size: 14px;
    font-weight: 800;
}

.ai-analysis-workflow-trend-visual small {
    color: #a187ac;
    font-size: 10px;
}


/* =========================================
   CONCLUSION
========================================= */

.ai-analysis-workflow-conclusion {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 35px;
    border-top: 2px solid #d852ed;
    background: #ffffff;
}

.ai-analysis-workflow-conclusion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #d852ed;
    color: #ffffff;
    font-size: 17px;
}

.ai-analysis-workflow-conclusion h3 {
    margin-bottom: 10px;
    color: #2d1d37;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
}

.ai-analysis-workflow-conclusion p {
    max-width: 800px;
    margin: 0;
    color: #d852ed;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
}


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

@media (max-width: 991px) {

    .ai-analysis-workflow-section {
        padding: 80px 0;
    }

    .ai-analysis-workflow-header h2 {
        font-size: 37px;
    }

    .ai-analysis-workflow-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ai-analysis-workflow-connector {
        flex-direction: row;
        gap: 15px;
    }

    .ai-analysis-workflow-connector>span {
        writing-mode: initial;
    }

    .ai-analysis-workflow-connector-line {
        width: 100%;
        height: 1px;
        min-height: 1px;
        background: linear-gradient(to right,
                transparent,
                #d852ed,
                transparent);
    }

    .ai-analysis-workflow-understanding {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ai-analysis-workflow-trend {
        grid-template-columns: 55px 1fr;
    }

    .ai-analysis-workflow-trend-visual {
        grid-column: 2;
        max-width: 300px;
    }

}

@media (max-width: 575px) {

    .ai-analysis-workflow-section {
        padding: 60px 0;
    }

    .ai-analysis-workflow-header h2 {
        font-size: 29px;
    }

    .ai-analysis-workflow-header p {
        font-size: 14px;
    }

    .ai-analysis-workflow-intro {
        grid-template-columns: 40px 1fr;
        gap: 15px;
    }

    .ai-analysis-workflow-intro-number,
    .ai-analysis-workflow-trend-number {
        width: 38px;
        height: 38px;
        font-size: 10px;
    }

    .ai-analysis-workflow-intro h3 {
        font-size: 22px;
    }

    .ai-analysis-workflow-conversation,
    .ai-analysis-workflow-processing {
        padding: 23px;
    }

    .ai-analysis-workflow-processing h3 {
        font-size: 23px;
    }

    .ai-analysis-workflow-understanding-heading h3 {
        font-size: 26px;
    }

    .ai-analysis-workflow-trend {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 25px;
    }

    .ai-analysis-workflow-trend-visual {
        grid-column: auto;
        max-width: none;
    }

    .ai-analysis-workflow-trend-content h3 {
        font-size: 25px;
    }

    .ai-analysis-workflow-conclusion {
        gap: 15px;
        padding: 25px 20px;
    }

    .ai-analysis-workflow-conclusion h3 {
        font-size: 22px;
    }

    .ai-analysis-workflow-conclusion p {
        font-size: 14px;
    }

}





/* =========================================
   CUSTOMER CONVERSATION INSIGHTS
========================================= */

.conversation-insights-section {
    position: relative;
    padding: 105px 0;
    background: #ffffff;
    overflow: hidden;
}


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

.conversation-insights-header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}

.conversation-insights-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.conversation-insights-eyebrow i {
    font-size: 14px;
}

.conversation-insights-heading h2 {
    margin: 0;
    max-width: 650px;
    color: #17131e;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.5px;
}

.conversation-insights-heading h2 span {
    color: #d852ed;
}

.conversation-insights-intro {
    position: relative;
    padding-left: 24px;
}

.conversation-insights-intro-line {
    position: absolute;
    top: 3px;
    left: 0;
    width: 3px;
    height: 80px;
    border-radius: 10px;
    background: #d852ed;
}

.conversation-insights-intro p {
    margin: 0 0 12px;
    color: #292330;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.conversation-insights-intro span {
    display: block;
    color: #817987;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   CONVERSATION INTELLIGENCE MAP
========================================= */

.conversation-insights-map {
    position: relative;
    margin-bottom: 65px;
    padding: 25px 30px 30px;
    border: 1px solid #eadff0;
    border-radius: 24px;
    background:
        linear-gradient(135deg,
            #fffaff 0%,
            #ffffff 55%,
            #faf5ff 100%);
    box-shadow: 0 18px 55px rgba(58, 25, 72, 0.06);
}

.conversation-map-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee4f2;
}

.conversation-map-top>span {
    color: #988ba0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.conversation-map-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6e6077;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.conversation-map-status i {
    color: #d852ed;
    font-size: 8px;
}

.conversation-map-content {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    gap: 20px;
    align-items: center;
    padding: 40px 20px 20px;
}

.conversation-map-main {
    max-width: 350px;
}

.conversation-map-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 17px;
    color: #ffffff;
    background: #d852ed;
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.25);
}

.conversation-map-icon i {
    font-size: 22px;
}

.conversation-map-main h3 {
    margin: 0 0 15px;
    color: #21192a;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
}

.conversation-map-main h3 span {
    display: block;
    color: #d852ed;
}

.conversation-map-main p {
    margin: 0;
    color: #83768b;
    font-size: 14px;
    line-height: 1.8;
}

.conversation-map-connector {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.conversation-map-connector span {
    display: block;
    width: 45px;
    height: 1px;
    background: #dcb8e5;
}

.conversation-map-connector span:nth-child(2),
.conversation-map-connector span:nth-child(3) {
    width: 65px;
    background: #d852ed;
}

.conversation-map-outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.conversation-map-outcome {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 15px;
    border: 1px solid #eee3f2;
    border-radius: 14px;
    background: #ffffff;
    transition: 0.3s ease;
}

.conversation-map-outcome:hover {
    border-color: #d852ed;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.09);
}

.conversation-map-outcome i {
    color: #d852ed;
    font-size: 18px;
}

.conversation-map-outcome span {
    color: #43364b;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================
   INSIGHT ROWS
========================================= */

.conversation-insights-list {
    position: relative;
}

.conversation-insight-row {
    display: grid;
    grid-template-columns: 85px 235px minmax(0, 1fr);
    gap: 35px;
    padding: 45px 0;
    border-top: 1px solid #eee8f0;
}

.conversation-insight-row:last-child {
    border-bottom: 1px solid #eee8f0;
}

.conversation-insight-index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.conversation-insight-index span {
    color: #d852ed;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}

.conversation-insight-index-line {
    width: 28px;
    height: 2px;
    background: #d852ed;
}

.conversation-insight-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.conversation-insight-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #e8d6ed;
    border-radius: 14px;
    color: #d852ed;
    background: #fff8ff;
}

.conversation-insight-title-icon i {
    font-size: 18px;
}

.conversation-insight-title h3 {
    margin: 0;
    color: #21192a;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.35;
}

.conversation-insight-description {
    max-width: 650px;
}

.conversation-insight-description p {
    margin: 0 0 16px;
    color: #706578;
    font-size: 14px;
    line-height: 1.9;
}

.conversation-insight-description p:last-of-type {
    margin-bottom: 20px;
}


/* =========================================
   SALES QUOTE LIST
========================================= */

.conversation-quote-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 15px 0 20px;
}

.conversation-quote-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-left: 3px solid #d852ed;
    border-radius: 0 10px 10px 0;
    background: #fff7ff;
}

.conversation-quote-item i {
    color: #d852ed;
    font-size: 11px;
}

.conversation-quote-item span {
    color: #4b3b52;
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
}


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

.conversation-insight-result {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 30px;
    background: #f8effb;
}

.conversation-insight-result i {
    color: #d852ed;
    font-size: 11px;
}

.conversation-insight-result span {
    color: #60456b;
    font-size: 11px;
    font-weight: 800;
}


/* =========================================
   SUMMARY BANNER
========================================= */

.conversation-insights-summary {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 55px;
    padding: 28px 32px;
    border-radius: 20px;
    background: #201527;
    box-shadow: 0 18px 45px rgba(32, 21, 39, 0.12);
}

.conversation-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    color: #ffffff;
    background: #d852ed;
}

.conversation-summary-icon i {
    font-size: 21px;
}

.conversation-summary-content {
    flex: 1;
}

.conversation-summary-content span {
    display: block;
    margin-bottom: 8px;
    color: #dca4e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.conversation-summary-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.4;
}

.conversation-summary-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(216, 82, 237, 0.4);
    border-radius: 50%;
    color: #d852ed;
}

.conversation-summary-arrow i {
    font-size: 14px;
}


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

@media (max-width: 991px) {

    .conversation-insights-section {
        padding: 75px 0;
    }

    .conversation-insights-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .conversation-insights-heading h2 {
        font-size: 40px;
    }

    .conversation-map-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .conversation-map-main {
        max-width: 100%;
    }

    .conversation-map-connector {
        display: none;
    }

    .conversation-map-outcomes {
        width: 100%;
    }

    .conversation-insight-row {
        grid-template-columns: 65px 190px minmax(0, 1fr);
        gap: 22px;
    }

    .conversation-insight-title h3 {
        font-size: 20px;
    }

}


@media (max-width: 767px) {

    .conversation-insights-section {
        padding: 60px 0;
    }

    .conversation-insights-heading h2 {
        font-size: 33px;
        letter-spacing: -0.7px;
    }

    .conversation-insights-map {
        padding: 20px;
        border-radius: 18px;
    }

    .conversation-map-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .conversation-map-content {
        padding: 30px 0 5px;
    }

    .conversation-map-main h3 {
        font-size: 24px;
    }

    .conversation-map-outcomes {
        grid-template-columns: 1fr;
    }

    .conversation-insight-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 35px 0;
    }

    .conversation-insight-index {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .conversation-insight-index-line {
        width: 45px;
    }

    .conversation-insight-title {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .conversation-insight-title h3 {
        font-size: 22px;
    }

    .conversation-insight-description {
        max-width: 100%;
    }

    .conversation-insights-summary {
        align-items: flex-start;
        gap: 15px;
        padding: 23px;
    }

    .conversation-summary-icon {
        flex: 0 0 43px;
        width: 43px;
        height: 43px;
    }

    .conversation-summary-content h3 {
        font-size: 18px;
    }

    .conversation-summary-arrow {
        display: none;
    }

}


@media (max-width: 480px) {

    .conversation-insights-heading h2 {
        font-size: 29px;
    }

    .conversation-insights-intro p {
        font-size: 16px;
    }

    .conversation-map-main h3 {
        font-size: 22px;
    }

    .conversation-insight-description p {
        font-size: 13px;
    }

    .conversation-quote-item span {
        font-size: 12px;
    }

}







/* =========================================
   AI CALL ANALYSIS COMPARISON
========================================= */

.call-monitoring-compare-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background: #fbf9fd;
}


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

.call-compare-header {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}

.call-compare-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.call-compare-heading h2 {
    max-width: 650px;
    margin: 0;
    color: #201725;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.5px;
}

.call-compare-heading h2 span {
    display: block;
    color: #d852ed;
}

.call-compare-intro {
    padding-left: 25px;
    border-left: 3px solid #d852ed;
}

.call-compare-intro span {
    display: block;
    margin-bottom: 12px;
    color: #9b87a4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.call-compare-intro p {
    margin: 0;
    color: #65566e;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================
   INTRODUCTION
========================================= */

.call-compare-introduction {
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr) 240px;
    gap: 30px;
    align-items: start;
    margin-bottom: 55px;
    padding: 32px;
    border: 1px solid #D852ED;
    border-radius: 20px;
    background: #fcf9fd;
}

.call-intro-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #d852ed;
    background: #f5e5fa;
}

.call-intro-marker i {
    font-size: 20px;
}

.call-intro-content p {
    margin: 0 0 12px;
    color: #70617a;
    font-size: 14px;
    line-height: 1.85;
}

.call-intro-content p:last-child {
    margin-bottom: 0;
}

.call-intro-side-label {
    padding: 20px;
    border-radius: 14px;
    background: #211629;
}

.call-intro-side-label span {
    display: block;
    margin-bottom: 12px;
    color: #dca8e8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.call-intro-side-label strong {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}


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

.call-compare-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.call-compare-panel {
    min-width: 0;
    padding: 32px;
    border: 1px solid #e9ddec;
    border-radius: 24px;
    background: #ffffff;

    transition: all 0.3s ease;
}

.call-compare-panel:hover {
    border-color: #d852ed;
    transform: translateY(-5px);
    box-shadow: 0 20px 55px rgba(65, 25, 79, 0.12);
}

.call-panel-ai {
    /* border-color: #d852ed; */
    background: #211629;
    box-shadow: 0 20px 55px rgba(65, 25, 79, 0.12);


    transition: all 0.3s ease;
}

.call-pannel-ai:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);

}

.call-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.call-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #d852ed;
    background: #f8edfb;
}

.call-panel-icon i {
    font-size: 19px;
}

.call-panel-label {
    display: block;
    margin-bottom: 7px;
    color: #a28da9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.call-panel-header h3 {
    margin: 0;
    color: #251a2d;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.call-panel-ai .call-panel-header h3 {
    color: #ffffff;
}

.call-panel-ai .call-panel-label {
    color: #d0a8d9;
}


/* =========================================
   PANEL VISUALS
========================================= */

.call-panel-visual {
    min-height: 190px;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 16px;
}

.manual-visual {
    border: 1px solid #eee3f1;
    background: #fcf9fd;
}

.ai-visual {
    border: 1px solid rgba(216, 82, 237, 0.3);
    background: rgba(255, 255, 255, 0.055);
}

.manual-visual-top,
.ai-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.manual-visual-top span,
.ai-visual-top span {
    color: #a08da8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.manual-visual-top i {
    color: #bcaac3;
    font-size: 13px;
}

.ai-visual-top span {
    color: #dca8e8;
}

.ai-visual-top i {
    color: #d852ed;
    font-size: 14px;
}


/* =========================================
   MANUAL VISUAL
========================================= */

.manual-call-lines {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.manual-call-line {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 10px;
    align-items: center;
}

.manual-call-line>span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cfc1d4;
}

.manual-call-line.active>span {
    background: #d852ed;
}

.manual-call-line div {
    height: 5px;
    border-radius: 20px;
    background: #e7dce9;
}

.manual-call-line.active div {
    background: #d9a3e4;
}

.manual-call-line small {
    color: #a294aa;
    font-size: 9px;
    white-space: nowrap;
}

.manual-visual-footer,
.ai-visual-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #e9dfea;
    color: #8e7d96;
    font-size: 10px;
    font-weight: 700;
}

.manual-visual-footer i {
    color: #d852ed;
}

.ai-visual-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #c6a9cf;
}

.ai-visual-footer i {
    color: #d852ed;
}


/* =========================================
   AI VISUAL
========================================= */

.ai-scan-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 20px 0;
}

.ai-scan-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border: 1px solid rgba(216, 82, 237, 0.7);
    border-radius: 50%;
    color: #d852ed;
    background: rgba(216, 82, 237, 0.1);
    box-shadow: 0 0 0 9px rgba(216, 82, 237, 0.05);
}

.ai-scan-ring i {
    font-size: 21px;
}

.ai-scan-data span {
    display: block;
    margin-bottom: 8px;
    color: #bda1c6;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ai-scan-data strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.ai-data-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ai-data-tags span {
    padding: 6px 9px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 20px;
    color: #e0bce8;
    background: rgba(216, 82, 237, 0.08);
    font-size: 9px;
    font-weight: 700;
}


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

.call-panel-points {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.call-compare-point {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 17px 0;
    border-top: 1px solid #eee6f1;
}

.call-panel-ai .call-compare-point {
    border-top-color: rgba(255, 255, 255, 0.11);
}

.call-point-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #d852ed;
    background: #f8edfb;
    font-size: 10px;
    font-weight: 800;
}

.call-panel-ai .call-point-number {
    color: #ffffff;
    background: rgba(216, 82, 237, 0.2);
}

.call-compare-point p {
    margin: 3px 0 0;
    color: #665671;
    font-size: 13px;
    line-height: 1.7;
}

.call-panel-ai .call-compare-point p {
    color: #d1bed7;
}


/* =========================================
   MIDDLE DIVIDER
========================================= */

.call-compare-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    gap: 20px;
}

.call-middle-line {
    width: 1px;
    height: 120px;
    background: #e2cce8;
}

.call-middle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #d852ed;
    border-radius: 50%;
    color: #d852ed;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.12);
}

.call-middle-badge span {
    font-size: 12px;
    font-weight: 900;
}

.call-middle-label {
    color: #a28ca9;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
    letter-spacing: 1px;
}

.call-middle-label strong {
    display: block;
    color: #d852ed;
}


/* =========================================
   HUMAN JUDGMENT BANNER
========================================= */

.call-human-judgment {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 25px;
    align-items: center;
    margin-top: 60px;
    padding: 32px;
    border: 1px solid #d852ed;
    border-radius: 22px;
    background: #fff8ff;
}

.human-judgment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    color: #ffffff;
    background: #d852ed;
}

.human-judgment-icon i {
    font-size: 22px;
}

.human-judgment-content>span {
    display: block;
    margin-bottom: 9px;
    color: #a38aa9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.human-judgment-content h3 {
    margin: 0 0 10px;
    color: #251a2c;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
}

.human-judgment-content p {
    margin: 0;
    color: #76627e;
    font-size: 14px;
    line-height: 1.7;
}

.human-judgment-flow {
    display: flex;
    align-items: center;
    gap: 15px;
}

.judgment-flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6d5276;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.judgment-flow-item i {
    color: #d852ed;
    font-size: 19px;
}

.judgment-flow-arrow {
    color: #c4a4cd;
    font-size: 13px;
}


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

@media (max-width: 1100px) {

    .call-compare-header {
        gap: 35px;
    }

    .call-compare-panels {
        grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
        gap: 10px;
    }

    .call-compare-panel {
        padding: 25px;
    }

    .call-human-judgment {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .human-judgment-flow {
        grid-column: 2;
        justify-content: flex-start;
    }

}


@media (max-width: 991px) {

    .call-monitoring-compare-section {
        padding: 80px 0;
    }

    .call-compare-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .call-compare-heading h2 {
        font-size: 40px;
    }

    .call-compare-introduction {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .call-intro-side-label {
        grid-column: 2;
    }

    .call-compare-panels {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .call-compare-middle {
        flex-direction: row;
        min-height: auto;
        gap: 18px;
    }

    .call-middle-line {
        width: 100px;
        height: 1px;
    }

    .call-middle-label {
        display: none;
    }

    .call-panel-visual {
        min-height: auto;
    }

}


@media (max-width: 767px) {

    .call-monitoring-compare-section {
        padding: 60px 0;
    }

    .call-compare-heading h2 {
        font-size: 33px;
        letter-spacing: -0.7px;
    }

    .call-compare-introduction {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

    .call-intro-side-label {
        grid-column: auto;
    }

    .call-compare-panel {
        padding: 24px;
        border-radius: 20px;
    }

    .call-panel-header h3 {
        font-size: 20px;
    }

    .call-human-judgment {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px;
    }

    .human-judgment-flow {
        grid-column: auto;
        justify-content: flex-start;
    }

}


@media (max-width: 480px) {

    .call-compare-heading h2 {
        font-size: 29px;
    }

    .call-compare-intro p {
        font-size: 13px;
    }

    .call-compare-panel {
        padding: 20px;
    }

    .call-panel-header {
        gap: 12px;
    }

    .call-panel-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .call-panel-header h3 {
        font-size: 18px;
    }

    .call-panel-visual {
        padding: 15px;
    }

    .call-compare-point p {
        font-size: 12px;
    }

    .human-judgment-content h3 {
        font-size: 18px;
    }

    .human-judgment-flow {
        gap: 10px;
    }

}


/* =========================================
   AI SELECTION BLUEPRINT
========================================= */

.ai-selection-blueprint {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background: #ffffff;
}


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

.ai-blueprint-header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 75px;
    align-items: end;
    margin-bottom: 50px;
}

.ai-blueprint-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #d852ed;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ai-blueprint-title h2 {
    max-width: 720px;
    margin: 0;
    color: #211728;
    font-size: 47px;
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.4px;
}

.ai-blueprint-title h2 span {
    display: block;
    color: #d852ed;
}

.ai-blueprint-header-note {
    padding-left: 25px;
    border-left: 3px solid #d852ed;
}

.ai-blueprint-header-note span {
    display: block;
    margin-bottom: 13px;
    color: #a18da9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.ai-blueprint-header-note p {
    margin: 0;
    color: #6c5b75;
    font-size: 15px;
    line-height: 1.85;
}


/* =========================================
   INTRO
========================================= */

.ai-blueprint-intro {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 35px;
    padding: 20px 25px;
    border-top: 1px solid #eee3f2;
    border-bottom: 1px solid #eee3f2;
}

.ai-blueprint-intro-number {
    color: #d852ed;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -1px;
}

.ai-blueprint-intro-content {
    flex: 1;
}

.ai-blueprint-intro-content p {
    margin: 0;
    color: #4f3c59;
    font-size: 15px;
    font-weight: 700;
}

.ai-blueprint-intro-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 30px;
    color: #765080;
    background: #f9effc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.ai-blueprint-intro-tag i {
    color: #d852ed;
}


/* =========================================
   MAIN BLUEPRINT GRID
========================================= */

.ai-blueprint-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.9fr) minmax(0, 0.85fr);
    gap: 25px;
    align-items: start;
}


/* =========================================
   LEFT CHECKLIST
========================================= */

.ai-blueprint-checklist {
    padding: 30px;
    border: 1px solid #e9ddec;
    border-radius: 22px;
    background: #ffffff;
}

.ai-blueprint-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.ai-blueprint-list-heading>span {
    color: #b09ab8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ai-blueprint-list-heading h3 {
    order: -1;
    margin: 0;
    color: #24182d;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
}

.ai-blueprint-list-heading h3 strong {
    display: block;
    color: #d852ed;
}


/* =========================================
   CHECK ITEMS
========================================= */

.ai-blueprint-check-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: start;
    padding: 17px 0;
    border-top: 1px solid #eee6f1;
}

.ai-check-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border: 1px solid #e7d8eb;
    border-radius: 8px;
    color: #a58cad;
    font-size: 10px;
    font-weight: 800;
}

.ai-blueprint-check-item.active .ai-check-number {
    border-color: #d852ed;
    color: #ffffff;
    background: #d852ed;
}

.ai-check-content h4 {
    margin: 2px 0 6px;
    color: #33243c;
    font-size: 13px;
    font-weight: 800;
}

.ai-check-content p {
    margin: 0;
    color: #88768f;
    font-size: 11px;
    line-height: 1.65;
}

.ai-blueprint-check-item>i {
    margin-top: 6px;
    color: #d852ed;
    font-size: 12px;
}


/* =========================================
   CENTER ORBIT VISUAL
========================================= */

.ai-blueprint-center {
    position: relative;
    min-height: 650px;
    padding: 25px;
    overflow: hidden;
    border-radius: 22px;
    background: #211629;
}

.ai-blueprint-center-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-blueprint-center-top span {
    color: #d8b3e2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ai-blueprint-center-top i {
    color: #d852ed;
    font-size: 14px;
}

.ai-blueprint-orbit {
    position: relative;
    width: 100%;
    min-height: 430px;
    margin-top: 25px;
}

.ai-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ai-orbit-ring-one {
    width: 170px;
    height: 170px;
}

.ai-orbit-ring-two {
    width: 270px;
    height: 270px;
    border-style: dashed;
}

.ai-orbit-ring-three {
    width: 370px;
    height: 370px;
    border-color: rgba(255, 255, 255, 0.08);
}

.ai-orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 145px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.ai-orbit-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 15px;
    border: 1px solid rgba(216, 82, 237, 0.6);
    border-radius: 50%;
    color: #d852ed;
    background: rgba(216, 82, 237, 0.12);
    box-shadow: 0 0 0 10px rgba(216, 82, 237, 0.04);
}

.ai-orbit-center-icon i {
    font-size: 23px;
}

.ai-orbit-center>span {
    color: #c7a8d0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ai-orbit-center strong {
    margin-top: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.ai-orbit-node {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 65px;
    height: 65px;
    border: 1px solid rgba(216, 82, 237, 0.4);
    border-radius: 50%;
    color: #d852ed;
    background: #2d1d38;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ai-orbit-node i {
    font-size: 15px;
}

.ai-orbit-node span {
    color: #e3cbe9;
    font-size: 8px;
    font-weight: 700;
}

.ai-node-one {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.ai-node-two {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.ai-node-three {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.ai-node-four {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.ai-blueprint-center-bottom {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-blueprint-center-bottom i {
    margin-top: 3px;
    color: #d852ed;
    font-size: 13px;
}

.ai-blueprint-center-bottom p {
    margin: 0;
    color: #bca3c6;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================
   USABILITY PANEL
========================================= */

.ai-blueprint-usability {
    padding: 30px;
    border-radius: 22px;
    background: #f8effb;
}

.ai-usability-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    color: #a088a9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ai-usability-label i {
    color: #d852ed;
    font-size: 13px;
}

.ai-blueprint-usability h3 {
    margin: 0 0 20px;
    color: #24182d;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.25;
}

.ai-blueprint-usability h3 span {
    display: block;
    color: #d852ed;
}

.ai-blueprint-usability p {
    margin: 0 0 20px;
    color: #76637f;
    font-size: 13px;
    line-height: 1.85;
}

.ai-usability-divider {
    width: 45px;
    height: 3px;
    margin: 25px 0;
    border-radius: 10px;
    background: #d852ed;
}

.ai-usability-visual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    padding: 18px;
    border: 1px solid #e7d5ec;
    border-radius: 15px;
    background: #ffffff;
}

.ai-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 9px;
    background: #fcf8fd;
}

.ai-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    color: #d852ed;
    background: #f1dff6;
}

.ai-user-avatar i {
    font-size: 11px;
}

.ai-user-lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.ai-user-lines span {
    display: block;
    width: 90%;
    height: 4px;
    border-radius: 10px;
    background: #e7dce9;
}

.ai-user-lines span:last-child {
    width: 55%;
}

.ai-user-row>i {
    color: #d852ed;
    font-size: 12px;
}

.ai-usability-bottom {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e8d6ed;
}

.ai-usability-bottom i {
    margin-top: 3px;
    color: #d852ed;
    font-size: 14px;
}

.ai-usability-bottom span {
    color: #7c6485;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}


/* =========================================
   SUMMARY
========================================= */

.ai-blueprint-summary {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 50px;
    padding: 28px 30px;
    border: 1px solid #d852ed;
    border-radius: 20px;
    background: #211629;
}

.ai-summary-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #ffffff;
    background: #d852ed;
}

.ai-summary-mark i {
    font-size: 19px;
}

.ai-summary-content {
    flex: 1;
}

.ai-summary-content span {
    display: block;
    margin-bottom: 8px;
    color: #dca8e8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ai-summary-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.45;
}

.ai-summary-line {
    width: 75px;
    height: 3px;
    border-radius: 10px;
    background: #d852ed;
}


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

@media (max-width: 1199px) {

    .ai-blueprint-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
    }

    .ai-blueprint-center {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .ai-blueprint-usability {
        grid-column: 1;
        grid-row: 2;
    }

}


@media (max-width: 991px) {

    .ai-selection-blueprint {
        padding: 80px 0;
    }

    .ai-blueprint-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ai-blueprint-title h2 {
        font-size: 40px;
    }

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

    .ai-blueprint-center,
    .ai-blueprint-usability {
        grid-column: auto;
        grid-row: auto;
    }

    .ai-blueprint-center {
        min-height: 600px;
    }

    .ai-blueprint-usability {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .ai-usability-label,
    .ai-blueprint-usability h3 {
        grid-column: 1 / -1;
    }

    .ai-usability-visual {
        margin-top: 0;
    }

    .ai-usability-bottom {
        align-self: end;
    }

}


@media (max-width: 767px) {

    .ai-selection-blueprint {
        padding: 60px 0;
    }

    .ai-blueprint-title h2 {
        font-size: 33px;
        letter-spacing: -0.8px;
    }

    .ai-blueprint-intro {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 15px;
        padding: 20px 0;
    }

    .ai-blueprint-intro-content {
        flex-basis: calc(100% - 65px);
    }

    .ai-blueprint-intro-tag {
        margin-left: 0;
    }

    .ai-blueprint-checklist,
    .ai-blueprint-center,
    .ai-blueprint-usability {
        padding: 24px;
        border-radius: 18px;
    }

    .ai-blueprint-center {
        min-height: 500px;
    }

    .ai-blueprint-usability {
        display: block;
    }

    .ai-usability-visual {
        margin-top: 25px;
    }

    .ai-blueprint-summary {
        align-items: flex-start;
        padding: 23px;
    }

    .ai-summary-content h3 {
        font-size: 18px;
    }

    .ai-summary-line {
        display: none;
    }

}


@media (max-width: 480px) {

    .ai-blueprint-title h2 {
        font-size: 29px;
    }

    .ai-blueprint-center {
        padding: 18px;
    }

    .ai-orbit-ring-one {
        width: 135px;
        height: 135px;
    }

    .ai-orbit-ring-two {
        width: 220px;
        height: 220px;
    }

    .ai-orbit-ring-three {
        width: 290px;
        height: 290px;
    }

    .ai-orbit-node {
        width: 53px;
        height: 53px;
    }

    .ai-orbit-node span {
        font-size: 7px;
    }

    .ai-orbit-node i {
        font-size: 12px;
    }

    .ai-orbit-center {
        width: 120px;
    }

    .ai-orbit-center-icon {
        width: 55px;
        height: 55px;
    }

    .ai-check-content p {
        font-size: 10px;
    }

    .ai-blueprint-usability h3 {
        font-size: 25px;
    }

}





/* =========================================
   CUSTOMER PRIVACY SECTION
========================================= */

.customer-privacy-section {
    position: relative;
    padding: 100px 0;
    background: #fbf9fe;
    overflow: hidden;
}

.customer-privacy-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.07);
    pointer-events: none;
}

.customer-privacy-section::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -180px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.05);
    pointer-events: none;
}


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

.customer-privacy-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto 65px;
}

.customer-privacy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(216, 82, 237, 0.28);
    border-radius: 30px;
    color: #b13ac8;
    background: rgba(216, 82, 237, 0.07);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.customer-privacy-eyebrow i {
    font-size: 12px;
}

.customer-privacy-header h2 {
    margin: 22px 0 18px;
    color: #24202c;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.customer-privacy-header h2 span {
    color: #d852ed;
}

.customer-privacy-header p {
    max-width: 730px;
    margin: 0 auto;
    color: #77717f;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.customer-privacy-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 65px;
    align-items: center;
}


/* =========================================
   PRIVACY VISUAL
========================================= */

.customer-privacy-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.16);
    border-radius: 28px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.98),
            rgba(250, 241, 253, 0.92));
    overflow: hidden;
}

.privacy-glow-circle {
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    border: 1px dashed rgba(216, 82, 237, 0.4);
}

.privacy-glow-circle::before {
    content: "";
    position: absolute;
    inset: 25px;
    border: 1px solid rgba(216, 82, 237, 0.15);
    border-radius: 50%;
}

.privacy-glow-circle::after {
    content: "";
    position: absolute;
    inset: 55px;
    border: 1px dashed rgba(216, 82, 237, 0.25);
    border-radius: 50%;
}


/* Shield */

.privacy-shield {
    position: relative;
    z-index: 2;
    width: 158px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,
            #d852ed,
            #8d36bd);
    clip-path: polygon(50% 0%,
            91% 15%,
            91% 58%,
            78% 78%,
            50% 100%,
            22% 78%,
            9% 58%,
            9% 15%);
    filter: drop-shadow(0 18px 25px rgba(146, 52, 180, 0.23));
}

.privacy-shield-inner {
    width: 132px;
    height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.13);
    clip-path: polygon(50% 0%,
            91% 15%,
            91% 58%,
            78% 78%,
            50% 100%,
            22% 78%,
            9% 58%,
            9% 15%);
}

.privacy-shield-inner i {
    color: #ffffff;
    font-size: 55px;
}


/* Floating Cards */

.privacy-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
    padding: 14px 16px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(49, 25, 60, 0.08);
}

.privacy-floating-card i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #d852ed;
    background: rgba(216, 82, 237, 0.1);
    font-size: 15px;
}

.privacy-floating-card strong {
    display: block;
    color: #33283a;
    font-size: 12px;
    font-weight: 700;
}

.privacy-floating-card small {
    display: block;
    margin-top: 3px;
    color: #968d9b;
    font-size: 10px;
}

.privacy-card-top {
    top: 72px;
    left: 22px;
}

.privacy-card-bottom {
    right: 22px;
    bottom: 88px;
}

.privacy-visual-caption {
    position: absolute;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #74677c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.privacy-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55b98a;
    box-shadow: 0 0 0 5px rgba(85, 185, 138, 0.12);
}


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

.customer-privacy-content {
    padding: 5px 0;
}

.privacy-content-label {
    color: #c04bd5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.privacy-content-intro h3 {
    margin: 15px 0 17px;
    color: #2b2431;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 700;
}

.privacy-content-intro h3 span {
    color: #d852ed;
}

.privacy-content-intro p {
    margin-bottom: 28px;
    color: #77717f;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================
   PRIVACY JOURNEY
========================================= */

.privacy-journey {
    position: relative;
    margin-top: 25px;
    padding-left: 8px;
}

.privacy-journey::before {
    content: "";
    position: absolute;
    top: 19px;
    bottom: 19px;
    left: 23px;
    width: 1px;
    background: linear-gradient(to bottom,
            rgba(216, 82, 237, 0.55),
            rgba(216, 82, 237, 0.1));
}

.privacy-journey-item {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 13px 0;
}

.privacy-step-number {
    position: relative;
    z-index: 2;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.32);
    border-radius: 50%;
    color: #c048d7;
    background: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.privacy-step-content {
    flex: 1;
    padding: 3px 0 8px;
}

.privacy-step-content h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    color: #342b3b;
    font-size: 14px;
    font-weight: 700;
}

.privacy-step-content h4 i {
    color: #d852ed;
    font-size: 13px;
}

.privacy-step-content p {
    max-width: 440px;
    margin: 0;
    color: #85808b;
    font-size: 12px;
    line-height: 1.75;
}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.customer-privacy-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
    padding: 25px 28px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 18px;
    background: #29202f;
    box-shadow: 0 15px 35px rgba(40, 24, 49, 0.09);
}

.privacy-bottom-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.5);
    border-radius: 14px;
    color: #f0b5fa;
    background: rgba(216, 82, 237, 0.14);
    font-size: 21px;
}

.privacy-bottom-text {
    flex: 1;
}

.privacy-bottom-text h4 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.privacy-bottom-text p {
    margin: 0;
    color: #c5b8ca;
    font-size: 13px;
    line-height: 1.7;
}

.privacy-bottom-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 30px;
    color: #f0b5fa;
    background: rgba(216, 82, 237, 0.1);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.privacy-bottom-tag i {
    font-size: 11px;
}


/* =========================================
   HOVER EFFECTS
========================================= */

.privacy-floating-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.privacy-floating-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(49, 25, 60, 0.13);
}

.privacy-journey-item:hover .privacy-step-number {
    color: #ffffff;
    background: #d852ed;
    border-color: #d852ed;
    transition: all 0.3s ease;
}


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

@media (max-width: 1199px) {

    .customer-privacy-layout {
        gap: 35px;
    }

    .customer-privacy-header h2 {
        font-size: 36px;
    }

    .privacy-content-intro h3 {
        font-size: 26px;
    }

    .privacy-card-top {
        left: 12px;
    }

    .privacy-card-bottom {
        right: 12px;
    }

}


@media (max-width: 991px) {

    .customer-privacy-section {
        padding: 75px 0;
    }

    .customer-privacy-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .customer-privacy-visual {
        max-width: 600px;
        width: 100%;
        min-height: 420px;
        margin: 0 auto;
    }

    .customer-privacy-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .customer-privacy-bottom {
        align-items: flex-start;
    }

}


@media (max-width: 575px) {

    .customer-privacy-section {
        padding: 60px 0;
    }

    .customer-privacy-header {
        margin-bottom: 40px;
    }

    .customer-privacy-header h2 {
        font-size: 29px;
    }

    .customer-privacy-header p {
        font-size: 13px;
        line-height: 1.8;
    }

    .customer-privacy-visual {
        min-height: 355px;
        border-radius: 20px;
    }

    .privacy-glow-circle {
        width: 230px;
        height: 230px;
    }

    .privacy-shield {
        width: 125px;
        height: 145px;
    }

    .privacy-shield-inner {
        width: 105px;
        height: 122px;
    }

    .privacy-shield-inner i {
        font-size: 42px;
    }

    .privacy-floating-card {
        min-width: auto;
        padding: 10px;
        gap: 8px;
    }

    .privacy-floating-card i {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .privacy-floating-card strong {
        font-size: 10px;
    }

    .privacy-floating-card small {
        font-size: 9px;
    }

    .privacy-card-top {
        top: 38px;
        left: 8px;
    }

    .privacy-card-bottom {
        right: 8px;
        bottom: 65px;
    }

    .privacy-content-intro h3 {
        font-size: 24px;
    }

    .privacy-step-content h4 {
        font-size: 13px;
    }

    .privacy-step-content p {
        font-size: 11px;
    }

    .customer-privacy-bottom {
        flex-wrap: wrap;
        gap: 15px;
        padding: 22px 18px;
    }

    .privacy-bottom-text {
        flex-basis: calc(100% - 67px);
    }

    .privacy-bottom-text h4 {
        font-size: 15px;
    }

    .privacy-bottom-text p {
        font-size: 12px;
    }

    .privacy-bottom-tag {
        margin-left: 67px;
    }

}



/* =========================================================
   AI CALL ANALYSIS - FINAL THOUGHTS
========================================================= */

.final-thoughts-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.final-thoughts-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
    top: -180px;
    right: -140px;
}

.final-thoughts-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.04);
    bottom: -120px;
    left: -100px;
}


/* Header */

.final-thoughts-header {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 65px;
    text-align: center;
}

.final-thoughts-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    color: #D852ED;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.final-thoughts-eyebrow i {
    font-size: 12px;
}

.final-thoughts-header h2 {
    margin: 0 0 18px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
    color: #17131b;
}

.final-thoughts-header h2 span {
    color: #D852ED;
}

.final-thoughts-header p {
    margin: 0;
    color: #68636d;
    font-size: 16px;
    line-height: 1.8;
}


/* Main Layout */

.final-thoughts-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    gap: 55px;
    align-items: stretch;
}


/* Highlight */

.final-thoughts-highlight {
    position: relative;
    padding: 45px;
    min-height: 440px;
    border-radius: 24px;
    background: #18141c;
    color: #ffffff;
    overflow: hidden;
}

.final-thoughts-highlight::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.35);
    right: -80px;
    bottom: -90px;
}

.final-thoughts-number {
    position: absolute;
    top: 25px;
    right: 30px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    font-weight: 700;
}

.final-thoughts-highlight-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(216, 82, 237, 0.14);
    border: 1px solid rgba(216, 82, 237, 0.3);
    color: #D852ED;
    font-size: 24px;
    margin-bottom: 70px;
}

.final-thoughts-highlight h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    font-size: 32px;
    line-height: 1.25;
}

.final-thoughts-highlight h3 span {
    color: #D852ED;
}

.final-thoughts-highlight p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #c9c4cc;
    font-size: 16px;
    line-height: 1.7;
}

.final-thoughts-mini-line {
    width: 55px;
    height: 2px;
    background: #D852ED;
    margin: 25px 0 18px;
}

.final-thoughts-highlight strong {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 290px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
}


/* Right Rows */

.final-thoughts-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.final-thoughts-row {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid #ece8ef;
}

.final-thoughts-row:first-child {
    padding-top: 0;
}

.final-thoughts-row:last-child {
    border-bottom: none;
}

.final-thoughts-row-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fbf5fd;
    border: 1px solid rgba(216, 82, 237, 0.2);
    color: #D852ED;
    font-size: 13px;
    font-weight: 700;
}

.final-thoughts-row-content h4 {
    margin: 0 0 9px;
    color: #201b23;
    font-size: 19px;
    font-weight: 700;
}

.final-thoughts-row-content p {
    margin: 0;
    color: #6d6871;
    font-size: 15px;
    line-height: 1.75;
}


/* Tags */

.final-thoughts-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.final-thoughts-tags span {
    padding: 7px 11px;
    border-radius: 20px;
    /* background: #faf7fb; */
    border: 1px solid #eee5f1;
    color: #615b65;
    font-size: 11px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.final-thoughts-tags span:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}


/* Philosophy */

.final-thoughts-philosophy {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 50px;
    margin-top: 70px;
    padding: 42px;
    border-radius: 24px;
    background: #f9f6fa;
    border: 1px solid #eee8f0;
}

.final-thoughts-small-label {
    display: block;
    margin-bottom: 13px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.final-thoughts-philosophy-left h3 {
    margin: 0;
    color: #1c1720;
    font-size: 28px;
    line-height: 1.3;
}

.final-thoughts-philosophy-left h3 span {
    color: #D852ED;
}

.final-thoughts-philosophy-right p {
    margin: 0 0 28px;
    color: #67616b;
    font-size: 15px;
    line-height: 1.8;
}


/* AI Flow */

.final-thoughts-ai-flow {
    display: flex;
    align-items: center;
    gap: 13px;
}

.final-thoughts-flow-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #302a34;
    font-size: 12px;
    font-weight: 600;
}

.final-thoughts-flow-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #eadfec;
    color: #D852ED;
}

.final-thoughts-flow-arrow {
    color: #b5adb8;
    font-size: 12px;
}


/* Closing */

.final-thoughts-closing {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 25px;
    padding: 30px 35px;
    border-radius: 20px;
    background: #D852ED;
    box-shadow: 0 15px 40px rgba(216, 82, 237, 0.15);
}

.final-thoughts-closing-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 22px;
}

.final-thoughts-closing-text p {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    line-height: 1.7;
}

.final-thoughts-closing-text h4 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}


/* Responsive */

@media (max-width: 991px) {

    .final-thoughts-section {
        padding: 75px 0;
    }

    .final-thoughts-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .final-thoughts-highlight {
        min-height: auto;
    }

    .final-thoughts-philosophy {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .final-thoughts-highlight-icon {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {

    .final-thoughts-header h2 {
        font-size: 32px;
    }

    .final-thoughts-highlight {
        padding: 32px;
    }

    .final-thoughts-highlight h3 {
        font-size: 27px;
    }

    .final-thoughts-row {
        grid-template-columns: 45px 1fr;
        gap: 14px;
    }

    .final-thoughts-philosophy {
        padding: 30px 25px;
    }

    .final-thoughts-ai-flow {
        flex-wrap: wrap;
    }

    .final-thoughts-flow-arrow {
        display: none;
    }

    .final-thoughts-closing {
        align-items: flex-start;
        padding: 25px;
    }

    .final-thoughts-closing-text h4 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    .final-thoughts-section {
        padding: 60px 0;
    }

    .final-thoughts-highlight {
        padding: 28px;
    }

    .final-thoughts-row {
        display: flex;
        flex-direction: column;
    }

    .final-thoughts-philosophy-left h3 {
        font-size: 24px;
    }

    .final-thoughts-closing {
        flex-direction: column;
    }
}



/* =========================================================
   CALL TRANSCRIPTION - TRANSFORMATION DESIGN
========================================================= */

.ct-transform-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.ct-transform-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.035);
    top: -220px;
    right: -180px;
}

.ct-transform-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.08);
    bottom: -170px;
    left: -120px;
}


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

.ct-transform-heading {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.ct-transform-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ct-transform-heading h2 {
    margin: 0 0 18px;
    color: #1c1720;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
}

.ct-transform-heading h2 span {
    color: #D852ED;
}

.ct-transform-heading p {
    max-width: 650px;
    margin: auto;
    color: #69636d;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   TRANSFORMATION STAGE
========================================================= */

.ct-transform-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    align-items: center;
    max-width: 1050px;
    margin: 0 auto;
}


/* =========================================================
   SIDE PANELS
========================================================= */

.ct-transform-side {
    min-height: 245px;
    padding: 28px;
    border-radius: 20px;
}

.ct-spoken-side {
    background: #211a24;
    border: 1px solid transparent;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    will-change: transform;
}

.ct-spoken-side:hover {
    border-color: rgba(216, 82, 237, 0.8);
    transform: translateY(-6px);
    box-shadow:
        0 15px 35px rgba(216, 82, 237, 0.18),
        0 0 25px rgba(216, 82, 237, 0.08);
}

.ct-text-side {
    background: #faf7fb;
    border: 1px solid #eee5f0;

    transition: all 0.3s ease;
}

.ct-text-side:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);

}

.ct-side-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ct-spoken-side .ct-side-label {
    color: #bcb4c0;
}

.ct-text-side .ct-side-label {
    color: #817985;
}

.ct-side-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
}


/* =========================================================
   SPOKEN VISUAL
========================================================= */

.ct-spoken-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ct-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 70px;
}

.ct-wave span {
    display: block;
    width: 5px;
    border-radius: 10px;
    background: #D852ED;
}

.ct-wave span:nth-child(1) {
    height: 18px;
}

.ct-wave span:nth-child(2) {
    height: 32px;
}

.ct-wave span:nth-child(3) {
    height: 48px;
}

.ct-wave span:nth-child(4) {
    height: 28px;
}

.ct-wave span:nth-child(5) {
    height: 58px;
}

.ct-wave span:nth-child(6) {
    height: 38px;
}

.ct-wave span:nth-child(7) {
    height: 64px;
}

.ct-wave span:nth-child(8) {
    height: 40px;
}

.ct-wave span:nth-child(9) {
    height: 55px;
}

.ct-wave span:nth-child(10) {
    height: 30px;
}

.ct-wave span:nth-child(11) {
    height: 47px;
}

.ct-wave span:nth-child(12) {
    height: 22px;
}

.ct-spoken-text {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-spoken-text i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.13);
    color: #D852ED;
}

.ct-spoken-text strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
}

.ct-spoken-text small {
    display: block;
    margin-top: 3px;
    color: #968e9b;
    font-size: 10px;
}


/* =========================================================
   MIDDLE TRANSFORM
========================================================= */

.ct-transform-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ct-transform-middle span {
    color: #9a929e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ct-transform-line {
    width: 55px;
    height: 1px;
    background: #e4dce7;
}

.ct-transform-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #D852ED;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.22);
}


/* =========================================================
   TEXT PREVIEW
========================================================= */

.ct-text-preview-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee7f0;
}

.ct-text-preview-top i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
}

.ct-text-preview-top strong {
    display: block;
    color: #332d36;
    font-size: 14px;
}

.ct-text-preview-top small {
    display: block;
    margin-top: 3px;
    color: #9b939e;
    font-size: 10px;
}

.ct-text-lines {
    padding-top: 25px;
}

.ct-text-lines span {
    display: block;
    height: 7px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: #e9e3eb;
}

.ct-text-lines span:nth-child(1) {
    width: 95%;
}

.ct-text-lines span:nth-child(2) {
    width: 82%;
}

.ct-text-lines span:nth-child(3) {
    width: 90%;
}

.ct-text-lines span:nth-child(4) {
    width: 62%;
}


/* =========================================================
   EXAMPLE
========================================================= */

.ct-example-section {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: 55px auto 0;
    padding: 25px 30px;
    border-top: 1px solid #eee8f0;
    border-bottom: 1px solid #eee8f0;
}

.ct-example-label {
    margin-bottom: 13px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ct-example-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ct-example-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #faf2fc;
    color: #D852ED;
}

.ct-example-content p {
    margin: 0;
    color: #625c66;
    font-size: 14px;
    line-height: 1.8;
}


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

.ct-workflow-section {
    position: relative;
    z-index: 1;
    margin-top: 80px;
}

.ct-workflow-heading {
    margin-bottom: 40px;
}

.ct-workflow-heading span {
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ct-workflow-heading h3 {
    margin: 8px 0 0;
    color: #211b24;
    font-size: 27px;
}


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

.ct-workflow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
}

.ct-workflow-item {
    position: relative;
    min-width: 120px;
    text-align: center;
}

.ct-workflow-number {
    margin-bottom: 10px;
    color: #aaa2ad;
    font-size: 10px;
    font-weight: 700;
}

.ct-workflow-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e8ddea;
    color: #D852ED;
    box-shadow: 0 8px 22px rgba(40, 25, 45, 0.06);
    font-size: 18px;

    transition: all 0.3s ease;
}

.ct-workflow-icon:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ct-workflow-item strong {
    display: block;
    color: #403943;
    font-size: 12px;
    font-weight: 600;
}

.ct-workflow-arrow {
    margin-top: 82px;
    color: #c5bdc8;
    font-size: 11px;
}


/* =========================================================
   MODERN SYSTEMS
========================================================= */

.ct-modern-section {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;
    margin-top: 75px;
    padding: 40px;
    border-radius: 22px;
    background: #211a24;
}

.ct-modern-heading span {
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ct-modern-heading h3 {
    margin: 10px 0 0;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.3;
}

.ct-modern-content p {
    margin: 0 0 24px;
    color: #bbb3be;
    font-size: 14px;
    line-height: 1.8;
}

.ct-modern-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ct-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 20px;
    color: #ddd5df;
    font-size: 11px;
}

.ct-feature-item i {
    color: #D852ED;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .ct-transform-stage {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ct-transform-middle {
        flex-direction: row;
    }

    .ct-transform-middle .ct-transform-line {
        width: 80px;
    }

    .ct-workflow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 35px 20px;
    }

    .ct-workflow-arrow {
        display: none;
    }

    .ct-workflow-item {
        flex: 0 0 28%;
    }

    .ct-modern-section {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ct-transform-section {
        padding: 70px 0;
    }

    .ct-transform-heading {
        margin-bottom: 45px;
    }

    .ct-transform-heading h2 {
        font-size: 34px;
    }

    .ct-transform-heading p {
        font-size: 14px;
    }

    .ct-transform-side {
        min-height: 220px;
        padding: 23px;


    }



    .ct-transform-middle {
        gap: 10px;
    }

    .ct-transform-middle .ct-transform-line {
        width: 45px;
    }

    .ct-example-section {
        padding: 23px 0;
    }

    .ct-example-content {
        align-items: flex-start;
    }

    .ct-workflow-section {
        margin-top: 60px;
    }

    .ct-workflow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 35px 15px;
    }

    .ct-workflow-item {
        min-width: 0;
        flex: none;
    }

    .ct-modern-section {
        margin-top: 60px;
        padding: 28px 23px;
    }

    .ct-modern-heading h3 {
        font-size: 24px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ct-transform-heading h2 {
        font-size: 29px;
    }

    .ct-transform-stage {
        gap: 18px;
    }

    .ct-transform-middle .ct-transform-line {
        width: 30px;
    }

    .ct-transform-icon {
        width: 42px;
        height: 42px;
    }

    .ct-workflow {
        grid-template-columns: 1fr;
    }

    .ct-modern-features {
        flex-direction: column;
        align-items: flex-start;
    }
}




/* =========================================================
   CALL TRANSCRIPTION - HOW IT WORKS
========================================================= */

.ct-work-section {
    position: relative;
    padding: 110px 0;
    background: #f9f7fa;
    overflow: hidden;
}

.ct-work-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.035);
    top: -250px;
    left: -220px;
}

.ct-work-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.07);
    right: -180px;
    bottom: -180px;
}


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

.ct-work-header {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 80px;
    text-align: center;
}

.ct-work-kicker {
    display: inline-block;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ct-work-header h2 {
    margin: 0 0 18px;
    color: #1d1820;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
}

.ct-work-header h2 span {
    color: #D852ED;
}

.ct-work-header p {
    margin: 0 auto;
    max-width: 650px;
    color: #6c656f;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   JOURNEY
========================================================= */

.ct-work-journey {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: auto;
}

.ct-work-line {
    position: absolute;
    top: 35px;
    bottom: 35px;
    left: 38px;
    width: 1px;
    background: linear-gradient(to bottom,
            rgba(216, 82, 237, 0.05),
            rgba(216, 82, 237, 0.5),
            rgba(216, 82, 237, 0.05));
}


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

.ct-work-item {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 35px;
    margin-bottom: 65px;
}

.ct-work-item:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MARKER
========================================================= */

.ct-work-marker {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(216, 82, 237, 0.25);
    box-shadow: 0 8px 25px rgba(41, 24, 46, 0.07);
}

.ct-work-marker span {
    color: #D852ED;
    font-size: 14px;
    font-weight: 700;
}


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

.ct-work-content {
    padding: 5px 0;
}

.ct-work-content-top {
    margin-bottom: 15px;
}

.ct-work-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ct-work-content h3 {
    margin: 0;
    color: #211b24;
    font-size: 27px;
    line-height: 1.35;
    font-weight: 700;
}

.ct-work-content>p {
    max-width: 760px;
    margin: 0 0 25px;
    color: #68616b;
    font-size: 15px;
    line-height: 1.85;
}


/* =========================================================
   VISUAL BASE
========================================================= */

.ct-work-visual {
    width: 100%;
    max-width: 720px;
    min-height: 105px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #ebe4ed;
    box-shadow: 0 8px 25px rgba(40, 24, 45, 0.04);
}


/* =========================================================
   RECORDING VISUAL
========================================================= */

.ct-record-visual {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 25px;

    transition: all 0.3s ease;
}

.ct-record-visual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}


.ct-record-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #211a24;
    color: #D852ED;
}

.ct-record-wave {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    height: 55px;
}

.ct-record-wave span {
    width: 4px;
    border-radius: 10px;
    background: #D852ED;
}

.ct-record-wave span:nth-child(1) {
    height: 18px;
}

.ct-record-wave span:nth-child(2) {
    height: 35px;
}

.ct-record-wave span:nth-child(3) {
    height: 25px;
}

.ct-record-wave span:nth-child(4) {
    height: 45px;
}

.ct-record-wave span:nth-child(5) {
    height: 32px;
}

.ct-record-wave span:nth-child(6) {
    height: 52px;
}

.ct-record-wave span:nth-child(7) {
    height: 30px;
}

.ct-record-wave span:nth-child(8) {
    height: 43px;
}

.ct-record-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #77707b;
    font-size: 10px;
    white-space: nowrap;
}

.ct-record-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
}


/* =========================================================
   PROCESS VISUAL
========================================================= */

.ct-process-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 23px;

    transition: all 0.3s ease;
}

.ct-process-visual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ct-process-circle {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #faf7fb;
    border: 1px solid #e9e0eb;
    color: #817985;
}

.ct-process-circle.active {
    background: #D852ED;
    border-color: #D852ED;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.2);
}

.ct-process-arrow {
    color: #b9b0bc;
    font-size: 11px;
}


/* =========================================================
   TRANSCRIPT VISUAL
========================================================= */

.ct-transcript-visual {
    padding: 20px 25px;

    transition: all 0.3s ease;
}

.ct-transcript-visual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ct-speaker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.ct-speaker-row:last-child {
    margin-bottom: 0;
}

.ct-speaker-badge {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f5eafa;
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
}

.ct-speaker-badge.client {
    background: #f1eef2;
    color: #625b66;
}

.ct-speaker-lines {
    flex: 1;
}

.ct-speaker-lines span {
    display: block;
    height: 6px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: #e9e4ea;
}

.ct-speaker-lines span:first-child {
    width: 80%;
}

.ct-speaker-lines span:last-child {
    width: 55%;
    margin-bottom: 0;
}

.ct-speaker-row small {
    color: #99919d;
    font-size: 10px;
}


/* =========================================================
   SEARCH VISUAL
========================================================= */

.ct-search-visual {
    padding: 20px 25px;

    transition: all 0.3s ease;
}

.ct-search-visual:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ct-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 13px;
    margin-bottom: 14px;
    border-radius: 9px;
    background: #f8f5f9;
    border: 1px solid #eee7f0;
    color: #615966;
    font-size: 11px;
}

.ct-search-box i {
    color: #D852ED;
}

.ct-search-result {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 20px;
    margin-bottom: 7px;
    color: #756d79;
    font-size: 10px;
}

.ct-result-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D852ED;
}

.ct-work-marker {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f3e7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ct-work-marker span {
    color: #D852ED;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Card hover */
.ct-work-item:hover .ct-work-marker {
    background: #D852ED;
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.30);
}

/* Number color on hover */
.ct-work-item:hover .ct-work-marker span {
    color: #ffffff;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .ct-work-section {
        padding: 85px 0;
    }

    .ct-work-item {
        grid-template-columns: 65px 1fr;
        gap: 25px;
    }

    .ct-work-marker {
        width: 65px;
        height: 65px;
    }

    .ct-work-line {
        left: 32px;
    }

    .ct-work-content h3 {
        font-size: 24px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ct-work-section {
        padding: 70px 0;
    }

    .ct-work-header {
        margin-bottom: 55px;
    }

    .ct-work-header h2 {
        font-size: 34px;
    }

    .ct-work-header p {
        font-size: 14px;
    }

    .ct-work-item {
        grid-template-columns: 48px 1fr;
        gap: 18px;
        margin-bottom: 50px;
    }

    .ct-work-marker {
        width: 48px;
        height: 48px;
    }

    .ct-work-marker span {
        font-size: 11px;
    }

    .ct-work-line {
        left: 24px;
    }

    .ct-work-content h3 {
        font-size: 21px;
    }

    .ct-work-content>p {
        font-size: 14px;
    }

    .ct-record-visual {
        gap: 12px;
        padding: 18px;
    }

    .ct-record-wave {
        gap: 3px;
    }

    .ct-record-status {
        display: none;
    }

    .ct-process-visual {
        gap: 10px;
        padding: 18px;
    }

    .ct-process-circle {
        width: 45px;
        height: 45px;
    }

    .ct-transcript-visual,
    .ct-search-visual {
        padding: 17px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ct-work-header h2 {
        font-size: 29px;
    }

    .ct-work-item {
        grid-template-columns: 40px 1fr;
        gap: 14px;
    }

    .ct-work-marker {
        width: 40px;
        height: 40px;
    }

    .ct-work-line {
        left: 20px;
    }

    .ct-work-content h3 {
        font-size: 19px;
    }

    .ct-work-label {
        font-size: 9px;
    }

    .ct-process-visual {
        justify-content: space-between;
    }

    .ct-process-circle {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }

    .ct-process-arrow {
        font-size: 9px;
    }

    .ct-search-result {
        display: flex;
        margin-right: 0;
    }
}






/* =========================================
   CALL TRANSCRIPTION PROCESS
   ========================================= */

.call-transcription-process-section {
    position: relative;
    padding: 100px 0;

    overflow: hidden;
}

.call-transcription-process-heading h2 span {
    color: #D852ED;
}

.call-transcription-process-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
    top: -180px;
    right: -120px;
}

.call-transcription-process-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.04);
    bottom: -150px;
    left: -120px;
}


/* Heading */

.call-transcription-process-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.call-transcription-process-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 15px;
    border: 1px solid rgba(216, 82, 237, 0.28);
    border-radius: 30px;
    color: #D852ED;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.call-transcription-process-heading h2 {
    margin-bottom: 16px;
    color: #20202a;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.call-transcription-process-heading p {
    margin: 0 auto;
    max-width: 650px;
    color: #70707c;
    font-size: 17px;
    line-height: 1.8;
}


/* Cards Grid */

.call-transcription-process-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    max-width: 1050px;
    margin: 0 auto;
}


/* Card */

.call-transcription-process-card {
    position: relative;
    padding: 32px;
    min-height: 330px;
    background: #ffffff;
    border: 1px solid #ece8ef;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(35, 25, 45, 0.05);
    overflow: hidden;
    transition: all 0.35s ease;
}

.call-transcription-process-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.05);
    right: -55px;
    bottom: -60px;
    transition: all 0.35s ease;
}

.call-transcription-process-card:hover {
    transform: translateY(-7px);
    border-color: #D852ED;
    box-shadow: 0 20px 45px rgba(216, 82, 237, 0.12);
}

.call-transcription-process-card:hover::after {
    transform: scale(1.3);
}


/* Featured Card */

.call-transcription-process-card.featured {
    background: #24202a;
    border-color: #24202a;
}

.call-transcription-process-card.featured h3,
.call-transcription-process-card.featured p {
    color: #ffffff;
}

.call-transcription-process-card.featured p {
    color: #d0ccd3;
}

.call-transcription-process-card.featured::after {
    background: rgba(216, 82, 237, 0.13);
}


/* Card Top */

.call-transcription-process-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.call-transcription-process-number {
    color: #D852ED;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
}

.call-transcription-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 19px;
}

.call-transcription-process-card.featured .call-transcription-process-icon {
    background: rgba(216, 82, 237, 0.18);
}


/* Card Content */

.call-transcription-process-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 15px;
    color: #292731;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.call-transcription-process-card p {
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
    color: #72717b;
    font-size: 15px;
    line-height: 1.8;
}


/* Status */

.call-transcription-process-status {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 30px;
    background: #f7f2f8;
    color: #66616a;
    font-size: 12px;
    font-weight: 600;
}

.call-transcription-process-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
}

.call-transcription-process-card.featured .call-transcription-process-status {
    background: rgba(255, 255, 255, 0.08);
    color: #ddd8df;
}


/* Bottom Flow */

.call-transcription-process-flow {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 850px;
    margin: 55px auto 0;
    padding: 18px 25px;
    background: #ffffff;
    border: 1px solid #ebe7ee;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(35, 25, 45, 0.05);
}

.call-transcription-process-flow-item {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.call-transcription-process-flow-item strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 11px;
}

.call-transcription-process-flow-item span {
    color: #34313a;
    font-size: 13px;
    font-weight: 700;
}

.call-transcription-process-flow-line {
    width: 60px;
    height: 1px;
    margin: 0 18px;
    background: #ded9e1;
}


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

@media (max-width: 991px) {

    .call-transcription-process-section {
        padding: 80px 0;
    }

    .call-transcription-process-heading h2 {
        font-size: 36px;
    }

    .call-transcription-process-grid {
        gap: 20px;
    }

    .call-transcription-process-card {
        padding: 27px;
        min-height: 350px;
    }

    .call-transcription-process-flow {
        max-width: 100%;
    }

    .call-transcription-process-flow-line {
        width: 35px;
        margin: 0 10px;
    }
}


@media (max-width: 767px) {

    .call-transcription-process-section {
        padding: 65px 15px;
    }

    .call-transcription-process-heading {
        margin-bottom: 40px;
    }

    .call-transcription-process-heading h2 {
        font-size: 30px;
    }

    .call-transcription-process-heading p {
        font-size: 15px;
    }

    .call-transcription-process-grid {
        grid-template-columns: 1fr;
    }

    .call-transcription-process-card {
        min-height: auto;
        padding: 25px;
    }

    .call-transcription-process-card h3 {
        font-size: 20px;
    }

    .call-transcription-process-card p {
        font-size: 14px;
    }

    .call-transcription-process-flow {
        flex-wrap: wrap;
        gap: 12px;
        padding: 18px;
        border-radius: 20px;
    }

    .call-transcription-process-flow-line {
        display: none;
    }

    .call-transcription-process-flow-item {
        flex: 0 0 calc(50% - 6px);
    }
}


@media (max-width: 480px) {

    .call-transcription-process-heading h2 {
        font-size: 26px;
    }

    .call-transcription-process-label {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .call-transcription-process-card {
        padding: 22px;
        border-radius: 18px;
    }

    .call-transcription-process-flow-item {
        flex: 0 0 100%;
    }

    .call-transcription-process-flow-item strong {
        width: 30px;
        height: 30px;
    }
}






/* =========================================
   CALL TRANSCRIPTION FOR CALL CENTERS
   ========================================= */

.call-center-transcription-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.call-center-transcription-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
    top: -280px;
    right: -180px;
}


/* Main Layout */

.call-center-transcription-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 70px;
    align-items: center;
}


/* Left Content */

.call-center-transcription-content {
    max-width: 600px;
}

.call-center-transcription-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.08);
    color: #D852ED;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.call-center-transcription-content h2 {
    margin: 20px 0 18px;
    color: #24212a;
    font-size: 44px;
    line-height: 1.18;
    font-weight: 700;
}

.call-center-transcription-line {
    width: 65px;
    height: 4px;
    margin-bottom: 25px;
    border-radius: 5px;
    background: #D852ED;
}

.call-center-transcription-content>p {
    margin-bottom: 18px;
    color: #6f6c75;
    font-size: 16px;
    line-height: 1.85;
}


/* Highlight */

.call-center-transcription-highlight {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 30px;
    padding: 18px;
    border-left: 3px solid #D852ED;
    background: #faf7fb;
}

.call-center-transcription-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #D852ED;
    color: #ffffff;
    font-size: 15px;
}

.call-center-transcription-highlight strong {
    display: block;
    margin-bottom: 5px;
    color: #2b2830;
    font-size: 15px;
}

.call-center-transcription-highlight span {
    display: block;
    color: #77727b;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   Dashboard
   ========================================= */

.call-center-transcription-dashboard {
    position: relative;
    padding: 25px;
    border: 1px solid #e8e3ea;
    border-radius: 24px;
    background: #f9f7fa;
    box-shadow: 0 25px 60px rgba(35, 25, 45, 0.09);


    transition: all 0.3s ease;
}

.call-center-transcription-dashboard:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}


/* Dashboard Header */

.call-center-transcription-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.call-center-transcription-dashboard-head span {
    display: block;
    margin-bottom: 4px;
    color: #9a949e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.call-center-transcription-dashboard-head strong {
    color: #2b2730;
    font-size: 18px;
}

.call-center-transcription-live {
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 6px 10px;
    border-radius: 20px;
    background: #ffffff;
    color: #77717a !important;
    font-size: 9px !important;
}

.call-center-transcription-live span {
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: #D852ED;
}


/* Search */

.call-center-transcription-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    margin-bottom: 18px;
    border: 1px solid #e5e0e7;
    border-radius: 13px;
    background: #ffffff;
}

.call-center-transcription-search i {
    color: #D852ED;
}

.call-center-transcription-search span {
    flex: 1;
    color: #a19ca5;
    font-size: 13px;
}

.call-center-transcription-search small {
    padding: 5px 9px;
    border-radius: 5px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
}


/* Result */

.call-center-transcription-result {
    padding: 20px;
    border: 1px solid #e8e3ea;
    border-radius: 17px;
    background: #ffffff;
}

.call-center-transcription-result-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.call-center-transcription-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
}

.call-center-transcription-result-top div:nth-child(2) {
    flex: 1;
}

.call-center-transcription-result-top strong {
    display: block;
    margin-bottom: 3px;
    color: #302c34;
    font-size: 13px;
}

.call-center-transcription-result-top span {
    color: #99939c;
    font-size: 11px;
}

.call-center-transcription-result-top b {
    color: #9b959e;
    font-size: 11px;
}

.call-center-transcription-result>p {
    margin: 17px 0;
    padding: 13px;
    border-radius: 10px;
    background: #faf8fb;
    color: #6f6b73;
    font-size: 12px;
    line-height: 1.7;
}


/* Tags */

.call-center-transcription-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.call-center-transcription-tags span {
    padding: 6px 9px;
    border-radius: 5px;
    background: #f4eff5;
    color: #77717a;
    font-size: 9px;
    font-weight: 700;
}


/* Manager Insight */

.call-center-transcription-manager {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 17px;
    border-radius: 15px;
    background: #26212b;
}

.call-center-transcription-manager-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(216, 82, 237, 0.18);
    color: #D852ED;
}

.call-center-transcription-manager span {
    display: block;
    margin-bottom: 3px;
    color: #aaa3ad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.call-center-transcription-manager strong {
    color: #ffffff;
    font-size: 13px;
}


/* =========================================
   Bottom Content
   ========================================= */

.call-center-transcription-bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr) 55px;
    align-items: center;
    gap: 25px;
    max-width: 1100px;
    margin: 70px auto 0;
    padding: 28px 30px;
    border: 1px solid #e9e4eb;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(35, 25, 45, 0.05);

    transition: all 0.3s ease;

}

.call-center-transcription-bottom:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.call-center-transcription-bottom-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: #D852ED;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.call-center-transcription-bottom-content h3 {
    margin-bottom: 10px;
    color: #29262e;
    font-size: 21px;
    font-weight: 700;
}

.call-center-transcription-bottom-content p {
    margin-bottom: 8px;
    color: #716d75;
    font-size: 14px;
    line-height: 1.75;
}

.call-center-transcription-bottom-content p:last-child {
    margin-bottom: 0;
}

.call-center-transcription-bottom-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
}


/* =========================================
   Responsive
   ========================================= */

@media (max-width: 991px) {

    .call-center-transcription-section {
        padding: 80px 20px;
    }

    .call-center-transcription-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .call-center-transcription-content {
        max-width: 750px;
    }

    .call-center-transcription-content h2 {
        font-size: 38px;
    }

    .call-center-transcription-dashboard {
        max-width: 700px;
        width: 100%;
        margin: auto;
    }
}


@media (max-width: 767px) {

    .call-center-transcription-section {
        padding: 65px 15px;
    }

    .call-center-transcription-content h2 {
        font-size: 31px;
    }

    .call-center-transcription-content>p {
        font-size: 15px;
    }

    .call-center-transcription-dashboard {
        padding: 18px;
        border-radius: 18px;
    }

    .call-center-transcription-dashboard-head {
        align-items: flex-start;
        gap: 12px;
    }

    .call-center-transcription-bottom {
        grid-template-columns: 50px 1fr;
        gap: 18px;
        margin-top: 45px;
        padding: 22px;
    }

    .call-center-transcription-bottom-number {
        width: 50px;
        height: 50px;
    }

    .call-center-transcription-bottom-action {
        display: none;
    }

    .call-center-transcription-bottom-content h3 {
        font-size: 19px;
    }
}


@media (max-width: 480px) {

    .call-center-transcription-content h2 {
        font-size: 27px;
    }

    .call-center-transcription-dashboard-head strong {
        font-size: 16px;
    }

    .call-center-transcription-live {
        display: none !important;
    }

    .call-center-transcription-search {
        padding: 13px;
    }

    .call-center-transcription-result {
        padding: 15px;
    }

    .call-center-transcription-result-top b {
        display: none;
    }

    .call-center-transcription-bottom {
        grid-template-columns: 1fr;
    }

    .call-center-transcription-highlight {
        padding: 15px;
    }
}




/* ==========================================
   CALL TRANSCRIPTION + AI CALL ANALYSIS
   PREMIUM PROFESSIONAL DESIGN
   ========================================== */

.cta-analysis-section {
    position: relative;
    padding: 115px 0;
    background:
        radial-gradient(circle at 8% 15%, rgba(216, 82, 237, 0.055), transparent 28%),
        radial-gradient(circle at 92% 85%, rgba(216, 82, 237, 0.045), transparent 30%),
        #ffffff;
    overflow: hidden;
}

.cta-analysis-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            rgba(216, 82, 237, 0.08),
            transparent);
}

.cta-analysis-section::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -300px;
    top: 30%;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}


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

.cta-analysis-header {
    position: relative;
    z-index: 5;
    max-width: 820px;
    margin: 0 auto 78px;
    text-align: center;
}

.cta-analysis-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.20);
    border-radius: 50px;
    background: rgba(216, 82, 237, 0.045);
    color: #D852ED;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.cta-analysis-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.10);
}

.cta-analysis-header h2 {
    margin: 0 0 18px;
    color: #211e26;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.cta-analysis-header p {
    max-width: 650px;
    margin: auto;
    color: #77717b;
    font-size: 17px;
    line-height: 1.85;
}


/* ==========================================
   MAIN AREA
   ========================================== */

.cta-analysis-main {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(330px, 0.9fr) minmax(280px, 0.95fr);
    gap: 35px;
    align-items: center;
    max-width: 1180px;
    margin: auto;
}


/* ==========================================
   LEFT SIDE
   ========================================== */

.cta-analysis-left {
    position: relative;
    min-width: 0;
}

.cta-analysis-copy {
    margin-bottom: 30px;
}

.cta-analysis-copy p {
    margin: 0 0 17px;
    color: #68626d;
    font-size: 15px;
    line-height: 1.9;
}

.cta-analysis-copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   ANALYSIS POINTS
   ========================================== */

.cta-analysis-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.cta-analysis-point {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    border: 1px solid #ece8ee;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.8);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.cta-analysis-point::after {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 3px;
    background: transparent;
    transition: background 0.3s ease;
}

.cta-analysis-point:hover {
    transform: translateX(6px);
    border-color: rgba(216, 82, 237, 0.25);
    box-shadow: 0 10px 28px rgba(35, 25, 45, 0.06);
}

.cta-analysis-point:hover::after {
    background: #D852ED;
}

.cta-analysis-point span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 8px;
    background: rgba(216, 82, 237, 0.055);
    color: #D852ED;
    font-size: 9px;
    font-weight: 800;
}

.cta-analysis-point p {
    margin: 0;
    color: #3d3942;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}


/* ==========================================
   CENTER AI VISUAL
   ========================================== */

.cta-analysis-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 475px;
}


/* Orbit */

.cta-analysis-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cta-analysis-orbit.orbit-one {
    width: 385px;
    height: 385px;
    border: 1px dashed rgba(216, 82, 237, 0.16);
}

.cta-analysis-orbit.orbit-two {
    width: 285px;
    height: 285px;
    border: 1px solid rgba(216, 82, 237, 0.14);
}


/* Orbit Dots */

.cta-analysis-orbit.orbit-one::before,
.cta-analysis-orbit.orbit-one::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 6px rgba(216, 82, 237, 0.08);
}

.cta-analysis-orbit.orbit-one::before {
    top: 48px;
    left: 52px;
}

.cta-analysis-orbit.orbit-one::after {
    right: 42px;
    bottom: 60px;
}


/* Center Card */

.cta-analysis-center-card {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 285px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 20%,
            rgba(216, 82, 237, 0.20),
            transparent 42%),
        #211d26;
    box-shadow:
        0 35px 80px rgba(34, 27, 39, 0.22),
        0 0 0 12px rgba(216, 82, 237, 0.035);
    text-align: center;
}

.cta-analysis-center-card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 25px;
    pointer-events: none;
}


/* Center Icon */

.cta-analysis-center-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 18px;
    background: rgba(216, 82, 237, 0.12);
    color: #D852ED;
    font-size: 22px;
    box-shadow:
        0 0 30px rgba(216, 82, 237, 0.10);
}

.cta-analysis-center-card>span {
    position: relative;
    z-index: 2;
    margin-bottom: 6px;
    color: #9f98a4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.cta-analysis-center-card>strong {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
}


/* ==========================================
   AUDIO WAVE
   ========================================== */

.cta-analysis-wave {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 38px;
    margin: 18px 0;
}

.cta-analysis-wave i {
    display: block;
    width: 3px;
    border-radius: 10px;
    background: #D852ED;
    box-shadow: 0 0 8px rgba(216, 82, 237, 0.25);
}

.cta-analysis-wave i:nth-child(1) {
    height: 10px;
}

.cta-analysis-wave i:nth-child(2) {
    height: 19px;
}

.cta-analysis-wave i:nth-child(3) {
    height: 29px;
}

.cta-analysis-wave i:nth-child(4) {
    height: 18px;
}

.cta-analysis-wave i:nth-child(5) {
    height: 26px;
}

.cta-analysis-wave i:nth-child(6) {
    height: 15px;
}

.cta-analysis-wave i:nth-child(7) {
    height: 22px;
}

.cta-analysis-wave i:nth-child(8) {
    height: 11px;
}


/* AI Badge */

.cta-analysis-ai {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(216, 82, 237, 0.16);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.045);
}

.cta-analysis-ai i {
    color: #D852ED;
    font-size: 10px;
}

.cta-analysis-ai span {
    color: #d5cfd8;
    font-size: 9px;
    font-weight: 700;
}


/* ==========================================
   RIGHT ANALYSIS PANEL
   ========================================== */

.cta-analysis-result-card {
    position: relative;
    padding: 27px;
    border: 1px solid #e7e2e9;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 22px 55px rgba(38, 29, 43, 0.08);

    transition: all 0.3s ease;
}

.cta-analysis-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.cta-analysis-result-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;
    height: 2px;
    border-radius: 0 0 5px 5px;
    background: #D852ED;
}


/* Result Header */

.cta-analysis-result-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
}

.cta-analysis-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(216, 82, 237, 0.16);
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.07);
    color: #D852ED;
}

.cta-analysis-result-head span {
    display: block;
    margin-bottom: 4px;
    color: #9a949d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.cta-analysis-result-head strong {
    color: #29252e;
    font-size: 15px;
    font-weight: 700;
}


/* Result Rows */

.cta-analysis-result-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid #eeeaf0;
}

.cta-analysis-result-line span {
    color: #69636e;
    font-size: 12px;
}

.cta-analysis-result-line strong {
    position: relative;
    padding-left: 13px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 800;
}

.cta-analysis-result-line strong::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D852ED;
    transform: translateY(-50%);
}


/* ==========================================
   FINAL NOTE
   ========================================== */

.cta-analysis-result-note {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 18px;
    padding: 17px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 14px;
    background: rgba(216, 82, 237, 0.045);
}

.cta-analysis-result-note>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 33px;
    width: 33px;
    height: 33px;
    border-radius: 9px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
}

.cta-analysis-result-note p {
    margin: 0;
    color: #625c67;
    font-size: 12px;
    line-height: 1.75;
}


/* ==========================================
   LARGE TABLET
   ========================================== */

@media (max-width: 1100px) {

    .cta-analysis-main {
        grid-template-columns: minmax(250px, 1fr) minmax(280px, 0.85fr) minmax(250px, 1fr);
        gap: 25px;
    }

    .cta-analysis-orbit.orbit-one {
        width: 320px;
        height: 320px;
    }

    .cta-analysis-orbit.orbit-two {
        width: 235px;
        height: 235px;
    }

    .cta-analysis-center-card {
        width: 195px;
        height: 255px;
    }

    .cta-analysis-header h2 {
        font-size: 43px;
    }
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 991px) {

    .cta-analysis-section {
        padding: 85px 20px;
    }

    .cta-analysis-section::before {
        display: none;
    }

    .cta-analysis-header {
        margin-bottom: 55px;
    }

    .cta-analysis-header h2 {
        font-size: 38px;
    }

    .cta-analysis-main {
        grid-template-columns: 1fr;
        max-width: 700px;
        gap: 45px;
    }

    .cta-analysis-center {
        order: -1;
        min-height: 350px;
    }

    .cta-analysis-left,
    .cta-analysis-right {
        width: 100%;
    }

    .cta-analysis-points {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .cta-analysis-section {
        padding: 65px 15px;
    }

    .cta-analysis-header {
        margin-bottom: 40px;
    }

    .cta-analysis-header h2 {
        font-size: 31px;
        letter-spacing: -0.5px;
    }

    .cta-analysis-header p {
        font-size: 15px;
    }

    .cta-analysis-center {
        min-height: 305px;
    }

    .cta-analysis-orbit.orbit-one {
        width: 265px;
        height: 265px;
    }

    .cta-analysis-orbit.orbit-two {
        width: 205px;
        height: 205px;
    }

    .cta-analysis-center-card {
        width: 175px;
        height: 225px;
        border-radius: 25px;
    }

    .cta-analysis-center-icon {
        width: 52px;
        height: 52px;
        font-size: 19px;
    }

    .cta-analysis-points {
        grid-template-columns: 1fr;
    }

    .cta-analysis-result-card {
        padding: 22px;
    }
}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

    .cta-analysis-header h2 {
        font-size: 27px;
    }

    .cta-analysis-eyebrow {
        font-size: 9px;
    }

    .cta-analysis-center {
        min-height: 275px;
    }

    .cta-analysis-orbit.orbit-one {
        width: 225px;
        height: 225px;
    }

    .cta-analysis-orbit.orbit-two {
        width: 175px;
        height: 175px;
    }

    .cta-analysis-center-card {
        width: 160px;
        height: 205px;
        padding: 20px;
    }

    .cta-analysis-center-card>strong {
        font-size: 16px;
    }

    .cta-analysis-result-card {
        padding: 19px;
        border-radius: 18px;
    }

    .cta-analysis-result-note {
        padding: 14px;
    }

    .cta-analysis-result-note p {
        font-size: 11px;
    }
}




/* ==========================================
   CALL TRANSCRIPTION FOR QUALITY MONITORING
   ========================================== */

.quality-monitoring-section {
    position: relative;
    padding: 105px 0;
    background: #faf8fc;
    overflow: hidden;
}

.quality-monitoring-section::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -170px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
}

.quality-monitoring-section::after {
    content: "";
    position: absolute;
    bottom: -230px;
    left: -170px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.035);
}


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

.quality-monitoring-header {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.quality-monitoring-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 14px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.06);
    color: #D852ED;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.quality-monitoring-header-tag span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D852ED;
}

.quality-monitoring-header h2 {
    margin: 0 0 16px;
    color: #25212a;
    font-size: 43px;
    line-height: 1.2;
    font-weight: 700;
}

.quality-monitoring-header>p {
    margin: 0;
    color: #706b75;
    font-size: 17px;
    line-height: 1.8;
}


/* ==========================================
   INTRO
   ========================================== */

.quality-monitoring-intro {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto 50px;
    padding: 24px 28px;
    border-left: 4px solid #D852ED;
    border-radius: 0 16px 16px 0;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(35, 25, 45, 0.05);

    transition: all 0.3s ease;
}

.quality-monitoring-intro:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.quality-monitoring-intro-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.10);
    color: #D852ED;
}

.quality-monitoring-intro p {
    margin: 0 0 10px;
    color: #68636d;
    font-size: 15px;
    line-height: 1.8;
}

.quality-monitoring-intro p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   MAIN BOARD
   ========================================== */

.quality-monitoring-board {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}


/* ==========================================
   LEFT CHECKLIST
   ========================================== */

.quality-monitoring-board-left {
    padding: 35px;
    border: 1px solid #e7e2e9;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(35, 25, 45, 0.06);

    transition: all 0.3s ease;
}

.quality-monitoring-board-left:hover {
    transform: translateY(-3px);
    border-color: #D852ED;
    box-shadow: 0 15px 45px rgba(216, 82, 237, 0.08);
}

.quality-monitoring-small-label {
    display: block;
    margin-bottom: 10px;
    color: #D852ED;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.quality-monitoring-board-left h3 {
    margin: 0 0 25px;
    color: #29252e;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
}


/* Checklist */

.quality-monitoring-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quality-monitoring-check {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #ece7ee;
    border-radius: 11px;
    background: #fcfbfd;
    transition: all 0.3s ease;
}

.quality-monitoring-check:hover {
    transform: translateY(-3px);
    border-color: rgba(216, 82, 237, 0.35);
    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.08);
}

.quality-monitoring-check>span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    background: rgba(216, 82, 237, 0.08);
    color: #D852ED;
    font-size: 8px;
    font-weight: 800;
}

.quality-monitoring-check div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quality-monitoring-check i {
    color: #D852ED;
    font-size: 11px;
}

.quality-monitoring-check p {
    margin: 0;
    color: #4c4750;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
}


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

.quality-monitoring-board-right {
    display: flex;
    align-items: center;
}

.quality-monitoring-visual {
    width: 100%;
    padding: 28px;
    border-radius: 22px;
    background: #27222c;
    box-shadow: 0 25px 55px rgba(35, 25, 45, 0.17);
}


/* Visual Header */

.quality-monitoring-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.quality-monitoring-visual-top span {
    display: block;
    margin-bottom: 4px;
    color: #a29ba6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.quality-monitoring-visual-top strong {
    color: #ffffff;
    font-size: 17px;
}

.quality-monitoring-status {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 20px;
    background: rgba(216, 82, 237, 0.12);
    color: #D852ED !important;
    font-size: 8px !important;
}

.quality-monitoring-status span {
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: #D852ED;
}


/* Document */

.quality-monitoring-document {
    padding: 22px;
    border-radius: 15px;
    background: #ffffff;
}

.quality-monitoring-document-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee9ef;
}

.quality-monitoring-document-head i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
}

.quality-monitoring-document-head strong {
    display: block;
    margin-bottom: 3px;
    color: #302b34;
    font-size: 13px;
}

.quality-monitoring-document-head span {
    color: #9b959e;
    font-size: 9px;
}


/* Document Lines */

.quality-monitoring-document-lines {
    padding: 20px 0;
}

.quality-monitoring-document-lines span {
    display: block;
    width: 92%;
    height: 6px;
    margin-bottom: 9px;
    border-radius: 10px;
    background: #eeeaf0;
}

.quality-monitoring-document-lines span.medium {
    width: 72%;
}

.quality-monitoring-document-lines span.short {
    width: 55%;
}


/* Document Checks */

.quality-monitoring-document-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.quality-monitoring-document-checks div {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f5f1f6;
    color: #716b74;
    font-size: 9px;
    font-weight: 600;
}

.quality-monitoring-document-checks i {
    color: #D852ED;
    font-size: 8px;
}


/* ==========================================
   WARNING / FINAL CONTENT
   ========================================== */

.quality-monitoring-warning {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 1100px;
    margin: 28px auto 0;
    padding: 23px 27px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 16px;
    background: rgba(216, 82, 237, 0.045);
}

.quality-monitoring-warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #D852ED;
    color: #ffffff;
}

.quality-monitoring-warning p {
    margin: 0;
    color: #5f5963;
    font-size: 14px;
    line-height: 1.75;
}


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

@media (max-width: 991px) {

    .quality-monitoring-section {
        padding: 80px 20px;
    }

    .quality-monitoring-header h2 {
        font-size: 36px;
    }

    .quality-monitoring-board {
        grid-template-columns: 1fr;
        max-width: 700px;
    }

    .quality-monitoring-board-right {
        justify-content: center;
    }

    .quality-monitoring-visual {
        max-width: 600px;
    }
}


@media (max-width: 767px) {

    .quality-monitoring-section {
        padding: 65px 15px;
    }

    .quality-monitoring-header {
        margin-bottom: 40px;
    }

    .quality-monitoring-header h2 {
        font-size: 30px;
    }

    .quality-monitoring-header>p {
        font-size: 15px;
    }

    .quality-monitoring-intro {
        padding: 20px;
    }

    .quality-monitoring-board-left {
        padding: 25px;
    }

    .quality-monitoring-checklist {
        grid-template-columns: 1fr;
    }

    .quality-monitoring-visual {
        padding: 20px;
    }
}


@media (max-width: 480px) {

    .quality-monitoring-header h2 {
        font-size: 27px;
    }

    .quality-monitoring-intro {
        flex-direction: column;
    }

    .quality-monitoring-board-left h3 {
        font-size: 21px;
    }

    .quality-monitoring-visual-top {
        align-items: flex-start;
        gap: 10px;
    }

    .quality-monitoring-status {
        display: none !important;
    }

    .quality-monitoring-document {
        padding: 16px;
    }

    .quality-monitoring-warning {
        padding: 18px;
    }
}





/* =========================================
   AUTOMATED CALL TRANSCRIPTION BENEFITS
   ========================================= */

.act-benefits-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.act-benefits-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
    top: -180px;
    right: -120px;
}

.act-benefits-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(216, 82, 237, 0.07);
    border-radius: 50%;
    bottom: -130px;
    left: -100px;
}


/* HEADER */

.act-benefits-header {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto 65px;
    text-align: center;
}

.act-benefits-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    color: #D852ED;
    background: rgba(216, 82, 237, 0.05);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.act-benefits-header h2 {
    margin: 0 0 18px;
    color: #20202a;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.act-benefits-header p {
    max-width: 650px;
    margin: 0 auto;
    color: #70707c;
    font-size: 17px;
    line-height: 1.8;
}


/* BENEFIT FLOW */

.act-benefits-flow {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    margin: 0 auto;
}

/* Connecting vertical line */

.act-benefits-flow::before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 35px;
    left: 31px;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(216, 82, 237, 0.35),
            rgba(216, 82, 237, 0.35),
            transparent);
}


/* SINGLE BENEFIT */

.act-benefit-item {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 28px;
    min-height: 145px;
    padding: 24px 28px 24px 0;
    margin-bottom: 18px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeF3;
    transition: all 0.35s ease;
}

.act-benefit-item:last-child {
    margin-bottom: 0;
}


/* NUMBER */

.act-benefit-number {
    position: relative;
    z-index: 3;
    width: 63px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(216, 82, 237, 0.3);
    color: #D852ED;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.35s ease;
}


/* CONTENT */

.act-benefit-content {
    padding-right: 30px;
}

.act-benefit-content h3 {
    margin: 0 0 8px;
    color: #24242d;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.act-benefit-content p {
    margin: 0;
    color: #74747f;
    font-size: 15px;
    line-height: 1.75;
}


/* ICON */

.act-benefit-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #faf4fc;
    color: #D852ED;
    font-size: 20px;
    border: 1px solid rgba(216, 82, 237, 0.12);
    transition: all 0.35s ease;
}


/* HOVER */

.act-benefit-item:hover {
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 18px;
    border-bottom-color: transparent;
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.act-benefit-item:hover .act-benefit-number {
    color: #ffffff;
    background: #D852ED;
    border-color: #D852ED;
    transform: scale(1.06);
}

.act-benefit-item:hover .act-benefit-icon {
    color: #ffffff;
    background: #D852ED;
    border-color: #D852ED;
    transform: rotate(-5deg);
}

.act-benefit-item:hover .act-benefit-content h3 {
    color: #D852ED;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .act-benefits-section {
        padding: 80px 0;
    }

    .act-benefits-header {
        margin-bottom: 50px;
    }

    .act-benefits-header h2 {
        font-size: 34px;
    }

    .act-benefit-item {
        grid-template-columns: 58px minmax(0, 1fr) 52px;
        gap: 20px;
        padding-right: 20px;
    }

    .act-benefit-number {
        width: 56px;
        height: 56px;
    }

    .act-benefit-icon {
        width: 52px;
        height: 52px;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .act-benefits-section {
        padding: 65px 0;
    }

    .act-benefits-header {
        margin-bottom: 40px;
        padding: 0 15px;
    }

    .act-benefits-header h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .act-benefits-header p {
        font-size: 15px;
        line-height: 1.7;
    }

    .act-benefits-flow {
        padding: 0 15px;
    }

    .act-benefits-flow::before {
        left: 28px;
        top: 28px;
        bottom: 28px;
    }

    .act-benefit-item {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 16px;
        min-height: auto;
        padding: 20px 10px 20px 0;
        margin-bottom: 10px;
    }

    .act-benefit-item:hover {
        padding-left: 8px;
        padding-right: 8px;
    }

    .act-benefit-number {
        width: 56px;
        height: 56px;
        font-size: 12px;
    }

    .act-benefit-content {
        padding-right: 0;
    }

    .act-benefit-content h3 {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .act-benefit-content p {
        font-size: 14px;
        line-height: 1.65;
    }

    .act-benefit-icon {
        display: none;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .act-benefits-section {
        padding: 55px 0;
    }

    .act-benefits-eyebrow {
        font-size: 9px;
        padding: 7px 12px;
        letter-spacing: 1.2px;
    }

    .act-benefits-header h2 {
        font-size: 25px;
    }

    .act-benefits-flow {
        padding: 0 10px;
    }

    .act-benefit-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        padding: 18px 5px;
    }

    .act-benefits-flow::before {
        left: 29px;
    }

    .act-benefit-number {
        width: 48px;
        height: 48px;
        font-size: 11px;
    }

    .act-benefit-content h3 {
        font-size: 16px;
    }

    .act-benefit-content p {
        font-size: 13.5px;
    }
}



/* ==========================================
   CALL TRANSCRIPTION VS MANUAL TRANSCRIPTION
   ========================================== */

.ctm-comparison-section {
    position: relative;
    padding: 105px 0;
    background: #f8f7fb;
    overflow: hidden;
}

.ctm-comparison-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.08);
    top: -260px;
    left: -220px;
}

.ctm-comparison-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.07);
    right: -190px;
    bottom: -200px;
}


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

.ctm-comparison-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.ctm-comparison-label {
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.06);
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ctm-comparison-header h2 {
    margin: 0;
    color: #20202a;
    font-size: 43px;
    line-height: 1.2;
    font-weight: 700;
}


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

.ctm-comparison-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: stretch;
}


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

.ctm-comparison-card {
    position: relative;
    min-height: 390px;
    padding: 38px;
    border-radius: 24px;
    transition: all 0.35s ease;
}

.ctm-manual-card {
    background: #ffffff;
    border: 1px solid #e7e5eb;
    box-shadow: 0 15px 45px rgba(35, 26, 42, 0.05);
}

.ctm-tech-card {
    background: #211d27;
    border: 1px solid #211d27;
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(25, 19, 30, 0.14);
}


/* ==========================================
   CARD TOP
   ========================================== */

.ctm-card-top {
    display: flex;
    align-items: center;
    gap: 17px;
}

.ctm-card-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
    font-size: 20px;
}

.ctm-tech-card .ctm-card-icon {
    background: rgba(216, 82, 237, 0.15);
}

.ctm-card-top span {
    display: block;
    margin-bottom: 5px;
    color: #96929d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.ctm-card-top h3 {
    margin: 0;
    color: #27252d;
    font-size: 23px;
    font-weight: 700;
}

.ctm-tech-card .ctm-card-top h3 {
    color: #ffffff;
}


/* ==========================================
   DIVIDER
   ========================================== */

.ctm-card-line {
    width: 100%;
    height: 1px;
    margin: 28px 0 25px;
    background: #eceaf0;
}

.ctm-tech-card .ctm-card-line {
    background: rgba(255, 255, 255, 0.12);
}


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

.ctm-comparison-card>p {
    margin: 0;
    color: #70707b;
    font-size: 15px;
    line-height: 1.85;
}

.ctm-tech-card>p {
    color: #bbb7c1;
}


/* ==========================================
   VS CENTER
   ========================================== */

.ctm-vs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctm-vs::before,
.ctm-vs::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    background: rgba(216, 82, 237, 0.18);
    transform: translateX(-50%);
}

.ctm-vs::before {
    top: 0;
    height: calc(50% - 30px);
}

.ctm-vs::after {
    bottom: 0;
    height: calc(50% - 30px);
}

.ctm-vs span {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #D852ED;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(216, 82, 237, 0.25);
}


/* ==========================================
   MANUAL PROCESS
   ========================================== */

.ctm-process {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.ctm-process-item {
    flex: 1;
    padding: 15px;
    border-radius: 12px;
    background: #f8f7fa;
    text-align: center;
}

.ctm-process-item strong {
    display: block;
    margin-bottom: 5px;
    color: #D852ED;
    font-size: 11px;
}

.ctm-process-item span {
    color: #55525c;
    font-size: 12px;
    font-weight: 600;
}

.ctm-process-arrow {
    color: #c2bec7;
    font-size: 13px;
}


/* ==========================================
   LIVE TRANSCRIPT
   ========================================== */

.ctm-live-transcript {
    margin-top: 30px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.ctm-live-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #d7d3db;
    font-size: 12px;
    font-weight: 600;
}

.ctm-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 5px rgba(216, 82, 237, 0.12);
}

.ctm-transcript-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ctm-transcript-row span,
.ctm-transcript-row strong {
    font-size: 10px;
    letter-spacing: 1px;
}

.ctm-transcript-row span {
    color: #85808c;
}

.ctm-transcript-row strong {
    color: #D852ED;
}

.ctm-transcript-row i {
    color: #aaa5af;
    font-size: 11px;
}


/* ==========================================
   SCALE SECTION
   ========================================== */

.ctm-scale-section {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    min-height: 145px;
    margin: 35px auto 0;
    padding: 30px 35px;
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr) 180px;
    align-items: center;
    gap: 25px;
    background: #ffffff;
    border: 1px solid #e9e6ed;
    border-radius: 20px;

    transition: all 0.3s ease;
}

.ctm-scale-section:hover {
    border-color: #D852ED;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(216, 82, 237, 0.25);
}

.ctm-scale-number {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #f8edfb;
    color: #D852ED;
    font-size: 14px;
    font-weight: 800;
}

.ctm-small-label {
    display: block;
    margin-bottom: 8px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.ctm-scale-content p {
    max-width: 700px;
    margin: 0;
    color: #62606a;
    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================
   SCALE VISUAL
   ========================================== */

.ctm-scale-visual {
    height: 75px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
}

.ctm-mini-bar {
    width: 20px;
    border-radius: 6px 6px 0 0;
    background: #D852ED;
    opacity: 0.35;
}

.ctm-bar-one {
    height: 25%;
}

.ctm-bar-two {
    height: 42%;
}

.ctm-bar-three {
    height: 58%;
}

.ctm-bar-four {
    height: 78%;
}

.ctm-bar-five {
    height: 100%;
    opacity: 0.9;
}


/* ==========================================
   HUMAN REVIEW NOTE
   ========================================== */

.ctm-review-note {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 18px auto 0;
    padding: 24px 30px;
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    border-radius: 18px;
    background: #211d27;
}

.ctm-review-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(216, 82, 237, 0.14);
    color: #D852ED;
    font-size: 18px;
}

.ctm-review-text span {
    display: block;
    margin-bottom: 5px;
    color: #a7a2ad;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.ctm-review-text p {
    margin: 0;
    color: #e2dfe5;
    font-size: 14px;
    line-height: 1.7;
}

.ctm-review-badge {
    padding: 9px 14px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 30px;
    color: #D852ED;
    background: rgba(216, 82, 237, 0.08);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


/* ==========================================
   HOVER
   ========================================== */

.ctm-manual-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 55px rgba(35, 26, 42, 0.09);
}

.ctm-tech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(25, 19, 30, 0.2);
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 991px) {

    .ctm-comparison-section {
        padding: 80px 0;
    }

    .ctm-comparison-header h2 {
        font-size: 35px;
    }

    .ctm-comparison-wrapper {
        grid-template-columns: 1fr 65px 1fr;
    }

    .ctm-comparison-card {
        padding: 28px;
    }

    .ctm-card-top h3 {
        font-size: 20px;
    }

    .ctm-scale-section {
        grid-template-columns: 55px 1fr;
    }

    .ctm-scale-visual {
        display: none;
    }
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .ctm-comparison-section {
        padding: 65px 0;
    }

    .ctm-comparison-header {
        margin-bottom: 40px;
        padding: 0 15px;
    }

    .ctm-comparison-header h2 {
        font-size: 29px;
    }

    .ctm-comparison-wrapper {
        display: block;
        padding: 0 15px;
    }

    .ctm-comparison-card {
        min-height: auto;
        padding: 25px;
        border-radius: 20px;
    }

    .ctm-vs {
        height: 70px;
    }

    .ctm-vs::before,
    .ctm-vs::after {
        display: none;
    }

    .ctm-vs span {
        width: 48px;
        height: 48px;
        font-size: 11px;
    }

    .ctm-scale-section {
        margin: 25px 15px 0;
        padding: 25px;
        grid-template-columns: 50px 1fr;
        gap: 18px;
    }

    .ctm-scale-number {
        width: 48px;
        height: 48px;
    }

    .ctm-scale-content p {
        font-size: 14px;
    }

    .ctm-review-note {
        margin: 15px 15px 0;
        padding: 22px;
        grid-template-columns: 50px 1fr;
        gap: 15px;
    }

    .ctm-review-icon {
        width: 48px;
        height: 48px;
    }

    .ctm-review-badge {
        grid-column: 2;
        width: fit-content;
    }
}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

    .ctm-comparison-section {
        padding: 55px 0;
    }

    .ctm-comparison-header h2 {
        font-size: 25px;
    }

    .ctm-comparison-label {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .ctm-card-top {
        align-items: flex-start;
    }

    .ctm-card-icon {
        width: 46px;
        height: 46px;
        font-size: 17px;
    }

    .ctm-card-top h3 {
        font-size: 18px;
    }

    .ctm-comparison-card>p {
        font-size: 14px;
        line-height: 1.75;
    }

    .ctm-process {
        gap: 7px;
    }

    .ctm-process-item {
        padding: 12px 7px;
    }

    .ctm-process-item span {
        font-size: 10px;
    }

    .ctm-review-text p {
        font-size: 13px;
    }
}



/* ==========================================
   FINAL THOUGHTS SECTION
   ========================================== */

.ctf-final-section {
    position: relative;
    width: 100%;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}

.ctf-final-section .container {
    position: relative;
    z-index: 2;
}


/* ==========================================
   DECORATIVE BACKGROUND
   ========================================== */

.ctf-final-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -210px;
    right: -180px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}

.ctf-final-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    bottom: -150px;
    left: -130px;
    border: 1px solid rgba(216, 82, 237, 0.06);
    border-radius: 50%;
}


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

.ctf-final-top {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 55px;

    display: flex;
    align-items: center;
    gap: 20px;
}

.ctf-final-eyebrow {
    display: inline-block;

    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1;
    white-space: nowrap;
}

.ctf-final-line {
    flex: 1;
    height: 1px;
    background: #e9e5ec;
}

.ctf-final-number {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

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

    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50%;

    background: #fcf8fd;
    color: #D852ED;

    font-size: 11px;
    font-weight: 700;
}


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

.ctf-final-layout {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px;

    align-items: start;
}


/* ==========================================
   LEFT TITLE AREA
   ========================================== */

.ctf-final-intro {
    width: 100%;
    padding-top: 5px;
}

.ctf-final-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 25px;

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

    border-radius: 15px;
    background: #D852ED;
    color: #ffffff;

    font-size: 20px;

    box-shadow: 0 12px 30px rgba(216, 82, 237, 0.20);
}

.ctf-final-intro h2 {
    margin: 0;

    color: #20202a;

    font-size: 50px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}

.ctf-final-intro h2 span {
    color: #D852ED;
}

.ctf-final-accent {
    width: 65px;
    height: 4px;
    margin-top: 25px;

    border-radius: 10px;
    background: #D852ED;
}


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

.ctf-final-content {
    width: 100%;
    border-top: 1px solid #e9e6ec;
}


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

.ctf-final-point {
    width: 100%;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 20px;

    padding: 28px 0;

    border-bottom: 1px solid #e9e6ec;

    transition: all 0.3s ease;
}


/* NUMBER */

.ctf-final-point-number {
    width: 40px;
    height: 40px;

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

    border: 1px solid #ddd9e1;
    border-radius: 50%;

    background: #ffffff;
    color: #85818b;

    font-size: 11px;
    font-weight: 700;

    transition: all 0.3s ease;
}


/* TEXT */

.ctf-final-point-body {
    min-width: 0;
}

.ctf-final-point-body p {
    margin: 0;

    color: #65616b;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
}


/* ==========================================
   HIGHLIGHTED THIRD POINT
   ========================================== */

.ctf-final-point.ctf-final-highlight {
    margin-top: 15px;
    padding: 25px 22px;

    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 16px;

    background: #fcf7fd;
}

.ctf-final-highlight .ctf-final-point-number {
    border-color: #D852ED;
    background: #D852ED;
    color: #ffffff;
}

.ctf-final-highlight .ctf-final-point-body p {
    color: #49454f;
}


/* ==========================================
   HOVER
   ========================================== */

.ctf-final-point:not(.ctf-final-highlight):hover {
    padding-left: 10px;
}

.ctf-final-point:not(.ctf-final-highlight):hover .ctf-final-point-number {
    border-color: rgba(216, 82, 237, 0.4);
    color: #D852ED;
}


/* ==========================================
   BOTTOM TECHNOLOGY FLOW
   ========================================== */

.ctf-final-flow {
    width: 100%;
    max-width: 1100px;

    margin: 55px auto 0;
    padding: 20px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border: 1px solid #e7e3ea;
    border-radius: 16px;

    background: #faf9fb;
}


/* FLOW ITEM */

.ctf-flow-item {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #4d4952;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.ctf-flow-item i {
    width: 35px;
    height: 35px;
    flex-shrink: 0;

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

    border: 1px solid rgba(216, 82, 237, 0.15);
    border-radius: 9px;

    background: #ffffff;
    color: #D852ED;

    font-size: 13px;
}


/* ARROW */

.ctf-flow-arrow {
    flex-shrink: 0;

    color: #bbb5c0;
    font-size: 11px;
}


/* ==========================================
   LARGE TABLET
   ========================================== */

@media (max-width: 1199px) {

    .ctf-final-layout,
    .ctf-final-top,
    .ctf-final-flow {
        max-width: 940px;
    }

    .ctf-final-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 50px;
    }

    .ctf-final-intro h2 {
        font-size: 44px;
    }
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 991px) {

    .ctf-final-section {
        padding: 75px 0;
    }

    .ctf-final-top {
        padding: 0 20px;
        margin-bottom: 45px;
    }

    .ctf-final-layout {
        padding: 0 20px;

        grid-template-columns: 220px minmax(0, 1fr);
        gap: 40px;
    }

    .ctf-final-intro h2 {
        font-size: 38px;
    }

    .ctf-final-mark {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    .ctf-final-point-body p {
        font-size: 14px;
    }

    .ctf-final-flow {
        margin-left: 20px;
        margin-right: 20px;

        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .ctf-final-section {
        padding: 60px 0;
    }

    /* Header */

    .ctf-final-top {
        padding: 0 15px;
        margin-bottom: 38px;

        gap: 12px;
    }

    .ctf-final-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .ctf-final-number {
        width: 32px;
        height: 32px;

        font-size: 9px;
    }


    /* Main */

    .ctf-final-layout {
        display: block;
        padding: 0 15px;
    }


    /* Title */

    .ctf-final-intro {
        margin-bottom: 40px;
    }

    .ctf-final-mark {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }

    .ctf-final-intro h2 {
        font-size: 38px;
        line-height: 1.05;
    }

    .ctf-final-accent {
        margin-top: 20px;
    }


    /* Content */

    .ctf-final-point {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;

        padding: 23px 0;
    }

    .ctf-final-point-number {
        width: 36px;
        height: 36px;

        font-size: 10px;
    }

    .ctf-final-point-body p {
        font-size: 14px;
        line-height: 1.75;
    }


    /* Highlight */

    .ctf-final-point.ctf-final-highlight {
        padding: 22px 15px;
        margin-top: 12px;
    }


    /* Bottom flow */

    .ctf-final-flow {
        margin: 40px 15px 0;
        padding: 18px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 14px;
    }

    .ctf-flow-arrow {
        display: none;
    }

    .ctf-flow-item {
        font-size: 11px;
    }

    .ctf-flow-item i {
        width: 32px;
        height: 32px;
    }
}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

    .ctf-final-section {
        padding: 50px 0;
    }

    .ctf-final-top {
        margin-bottom: 32px;
    }

    .ctf-final-intro {
        margin-bottom: 32px;
    }

    .ctf-final-intro h2 {
        font-size: 34px;
    }

    .ctf-final-point {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
    }

    .ctf-final-point-number {
        width: 34px;
        height: 34px;
    }

    .ctf-final-point-body p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .ctf-final-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ctf-flow-item {
        font-size: 12px;
    }
}




/* =====================================================
   CALL SUMMARIZATION - PROFESSIONAL SECTION
   ===================================================== */

.cas-overview-section {
    position: relative;
    padding: 105px 0;
    background: #ffffff;
    overflow: hidden;
}

.cas-overview-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(216, 82, 237, 0.07);
    border-radius: 50%;
    top: -280px;
    right: -200px;
}

.cas-overview-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(216, 82, 237, 0.06);
    border-radius: 50%;
    bottom: -180px;
    left: -150px;
}


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

.cas-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.cas-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 17px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.22);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.05);
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.cas-header h2 {
    margin: 0;
    color: #20202a;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
}

.cas-header-line {
    width: 65px;
    height: 3px;
    margin: 22px auto 0;
    border-radius: 10px;
    background: #D852ED;
}


/* =====================================================
   INTRO LAYOUT
   ===================================================== */

.cas-intro-layout {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto 75px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 80px;
    align-items: center;
}


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

.cas-intro-content {
    padding-left: 20px;
    border-left: 3px solid #D852ED;
}

.cas-content-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.cas-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
}

.cas-intro-content p {
    margin: 0 0 24px;
    color: #696670;
    font-size: 16px;
    line-height: 1.9;
}

.cas-intro-content p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   DOCUMENT VISUAL
   ===================================================== */

.cas-document {
    position: relative;
    padding: 22px;
    border: 1px solid #e5e2e9;
    border-radius: 22px;
    background: #faf9fb;
    box-shadow: 0 25px 60px rgba(37, 25, 42, 0.08);
    transform: rotate(1deg);
    transition: all 0.4s ease;
}

.cas-document:hover {
    transform: rotate(0deg) translateY(-5px);
}

.cas-document-top {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 13px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7e4ea;
}

.cas-document-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #D852ED;
    color: #ffffff;
    font-size: 18px;
}

.cas-document-top span {
    display: block;
    margin-bottom: 4px;
    color: #99939f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.cas-document-top strong {
    color: #302d35;
    font-size: 14px;
}

.cas-document-status {
    padding: 6px 10px;
    border-radius: 20px;
    background: #f2e5f5;
    color: #D852ED;
    font-size: 9px;
    font-weight: 700;
}

.cas-document-body {
    padding-top: 25px;
}

.cas-document-line {
    width: 100%;
    height: 7px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #e7e3e9;
}

.cas-line-large {
    width: 90%;
}

.cas-line-medium {
    width: 72%;
}

.cas-line-short {
    width: 50%;
}

.cas-document-highlight {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0;
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #eeeaf0;
    color: #D852ED;
    font-size: 10px;
    font-weight: 600;
}


/* =====================================================
   SUMMARY AREA
   ===================================================== */

.cas-summary-area {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto 75px;
    padding: 45px;
    border-radius: 25px;
    background: #f8f6fa;
}

.cas-summary-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
}

.cas-summary-heading>div {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cas-section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #D852ED;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.cas-summary-heading h3 {
    margin: 0;
    color: #25232b;
    font-size: 25px;
    font-weight: 700;
}

.cas-summary-heading p {
    max-width: 350px;
    margin: 0;
    color: #85818b;
    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================
   SUMMARY LIST
   ===================================================== */

.cas-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cas-summary-item {
    position: relative;
    display: grid;
    grid-template-columns: 35px 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 75px;
    padding: 13px 18px;
    border: 1px solid #e9e5eb;
    border-radius: 14px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.cas-summary-number {
    color: #aaa5ae;
    font-size: 9px;
    font-weight: 700;
}

.cas-summary-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fbf1fd;
    color: #D852ED;
    font-size: 15px;
}

.cas-summary-text span {
    color: #4d4a53;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.cas-summary-item:hover {
    transform: translateY(-3px);
    border-color: rgba(216, 82, 237, 0.3);
    box-shadow: 0 12px 30px rgba(35, 25, 40, 0.07);
}

.cas-summary-item:hover .cas-summary-icon {
    background: #D852ED;
    color: #ffffff;
}


/* =====================================================
   EXAMPLE SECTION
   ===================================================== */

.cas-example-section {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto 25px;
    padding: 45px;
    border-radius: 25px;
    background: #211d27;
    overflow: hidden;
}

.cas-example-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(216, 82, 237, 0.15);
    border-radius: 50%;
    right: -130px;
    top: -140px;
}

.cas-example-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 35px;
}

.cas-example-heading .cas-section-number {
    background: #D852ED;
}

.cas-example-heading .cas-content-label {
    margin-bottom: 10px;
}

.cas-example-heading h3 {
    max-width: 850px;
    margin: 0;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.65;
    font-weight: 500;
}


/* =====================================================
   EXAMPLE LAYOUT
   ===================================================== */

.cas-example-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
    align-items: stretch;
}

.cas-example-context {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.cas-context-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.13);
    color: #D852ED;
}

.cas-example-context p {
    margin: 0;
    color: #aaa5ae;
    font-size: 13px;
    line-height: 1.8;
}


/* =====================================================
   GENERATED SUMMARY
   ===================================================== */

.cas-generated-summary {
    padding: 28px 32px;
    border-radius: 17px;
    background: #ffffff;
}

.cas-summary-top {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeeaf0;
}

.cas-ai-symbol {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fbf0fd;
    color: #D852ED;
}

.cas-summary-top span {
    display: block;
    margin-bottom: 4px;
    color: #99949f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.cas-summary-top strong {
    color: #302d35;
    font-size: 13px;
}

.cas-generated-summary blockquote {
    margin: 22px 0 0;
    padding: 0;
    border: 0;
    color: #5c5862;
    font-size: 14px;
    line-height: 1.9;
}


/* =====================================================
   FINAL EXAMPLE
   ===================================================== */

.cas-final-example {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 18px auto 0;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    border: 1px solid #e8e4eb;
    border-radius: 18px;
    background: #ffffff;
}

.cas-final-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fbf0fd;
    color: #D852ED;
    font-size: 18px;
}

.cas-final-content .cas-content-label {
    margin-bottom: 8px;
}

.cas-final-content p {
    margin: 0;
    color: #65616b;
    font-size: 14px;
    line-height: 1.8;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {

    .cas-overview-section {
        padding: 80px 0;
    }

    .cas-header h2 {
        font-size: 36px;
    }

    .cas-intro-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 45px;
        padding: 0 20px;
    }

    .cas-summary-area,
    .cas-example-section,
    .cas-final-example {
        margin-left: 20px;
        margin-right: 20px;
    }

    .cas-summary-area {
        padding: 35px;
    }

    .cas-example-section {
        padding: 35px;
    }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    .cas-overview-section {
        padding: 65px 0;
    }

    .cas-header {
        margin-bottom: 45px;
        padding: 0 15px;
    }

    .cas-header h2 {
        font-size: 29px;
    }

    .cas-intro-layout {
        display: flex;
        flex-direction: column;
        gap: 35px;
        padding: 0 15px;
        margin-bottom: 55px;
    }

    .cas-intro-content {
        padding-left: 15px;
    }

    .cas-intro-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .cas-document {
        width: 100%;
        transform: none;
    }

    .cas-summary-area {
        margin: 0 15px 55px;
        padding: 25px 18px;
    }

    .cas-summary-heading {
        display: block;
    }

    .cas-summary-heading>div {
        margin-bottom: 15px;
    }

    .cas-summary-heading h3 {
        font-size: 21px;
    }

    .cas-summary-heading p {
        max-width: 100%;
    }

    .cas-summary-list {
        grid-template-columns: 1fr;
    }

    .cas-example-section {
        margin: 0 15px 18px;
        padding: 25px 18px;
    }

    .cas-example-heading {
        gap: 12px;
    }

    .cas-example-heading h3 {
        font-size: 16px;
        line-height: 1.6;
    }

    .cas-example-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cas-generated-summary {
        padding: 22px;
    }

    .cas-generated-summary blockquote {
        font-size: 13px;
    }

    .cas-final-example {
        margin: 0 15px;
        padding: 22px;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 15px;
    }

    .cas-final-icon {
        width: 46px;
        height: 46px;
    }

    .cas-final-content p {
        font-size: 13px;
    }
}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

    .cas-header h2 {
        font-size: 25px;
    }

    .cas-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .cas-document-top {
        grid-template-columns: 42px 1fr;
    }

    .cas-document-icon {
        width: 42px;
        height: 42px;
    }

    .cas-document-status {
        display: none;
    }

    .cas-summary-item {
        grid-template-columns: 28px 38px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    .cas-summary-icon {
        width: 38px;
        height: 38px;
    }

    .cas-summary-text span {
        font-size: 12px;
    }

    .cas-example-heading {
        flex-direction: column;
    }

    .cas-example-heading .cas-section-number {
        width: 34px;
        height: 34px;
    }

    .cas-final-example {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   AUTOMATED CALL SUMMARIES
   PROFESSIONAL WORKFLOW DESIGN
   ===================================================== */

.acs-business-section {
    position: relative;
    padding: 105px 0;
    background: #f9f8fb;
    overflow: hidden;
}

.acs-business-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(216, 82, 237, 0.07);
    border-radius: 50%;
    left: -280px;
    top: -220px;
}

.acs-business-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(216, 82, 237, 0.06);
    border-radius: 50%;
    right: -180px;
    bottom: -180px;
}


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

.acs-business-header {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.acs-business-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.05);
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.acs-business-header h2 {
    margin: 0;
    color: #222129;
    font-size: 43px;
    line-height: 1.2;
    font-weight: 700;
}

.acs-business-divider {
    width: 65px;
    height: 3px;
    margin: 22px auto 0;
    border-radius: 5px;
    background: #D852ED;
}


/* =====================================================
   INTRO
   ===================================================== */

.acs-business-intro {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto 65px;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 25px 30px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e8e4eb;
    box-shadow: 0 12px 35px rgba(36, 25, 43, 0.05);
}

.acs-intro-number {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #D852ED;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.acs-intro-text p {
    margin: 0;
    color: #4f4b55;
    font-size: 17px;
    line-height: 1.75;
}


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

.acs-workflow {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}


/* Connecting line */

.acs-workflow::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 35px;
    bottom: 35px;
    width: 1px;
    background: linear-gradient(to bottom,
            rgba(216, 82, 237, 0.08),
            rgba(216, 82, 237, 0.35),
            rgba(216, 82, 237, 0.08));
}


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

.acs-workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 310px;
    align-items: center;
    gap: 30px;
    min-height: 190px;
    padding: 28px 30px 28px 0;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 22px;
    transition: all 0.35s ease;
}

.acs-workflow-step:hover {
    background: #ffffff;
    border-color: #ebe7ee;
    box-shadow: 0 18px 45px rgba(35, 25, 42, 0.07);
    padding-left: 15px;
}


/* =====================================================
   MARKER
   ===================================================== */

.acs-step-marker {
    position: relative;
    z-index: 3;
    width: 63px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.28);
    background: #f9f8fb;
    color: #D852ED;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.35s ease;
}

.acs-workflow-step:hover .acs-step-marker {
    background: #D852ED;
    color: #ffffff;
    border-color: #D852ED;
}


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

.acs-step-content {
    padding-right: 15px;
}

.acs-step-label {
    margin-bottom: 10px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.acs-step-content p {
    margin: 0;
    color: #68646e;
    font-size: 15px;
    line-height: 1.85;
}


/* =====================================================
   STEP VISUAL
   ===================================================== */

.acs-step-visual {
    min-height: 125px;
    padding: 20px;
    border: 1px solid #e8e4eb;
    border-radius: 17px;
    background: #ffffff;
}


/* =====================================================
   CALL VISUAL
   ===================================================== */

.acs-call-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0edf2;
    color: #5e5a63;
    font-size: 11px;
    font-weight: 600;
}

.acs-call-row:last-child {
    border-bottom: 0;
}

.acs-call-row i {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fbf0fd;
    color: #D852ED;
    font-size: 11px;
}


/* =====================================================
   TIME VISUAL
   ===================================================== */

.acs-time-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.acs-time-header span {
    color: #89848e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.acs-time-header i {
    color: #D852ED;
    font-size: 15px;
}

.acs-time-bars {
    height: 48px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.acs-time-bars span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: #D852ED;
    opacity: 0.35;
}

.acs-time-bars span:nth-child(1) {
    height: 25%;
}

.acs-time-bars span:nth-child(2) {
    height: 40%;
}

.acs-time-bars span:nth-child(3) {
    height: 52%;
}

.acs-time-bars span:nth-child(4) {
    height: 65%;
}

.acs-time-bars span:nth-child(5) {
    height: 78%;
}

.acs-time-bars span:nth-child(6) {
    height: 100%;
    opacity: 0.85;
}

.acs-visual-time small {
    display: block;
    margin-top: 9px;
    color: #9b96a0;
    font-size: 9px;
}


/* =====================================================
   SUMMARY VISUAL
   ===================================================== */

.acs-workflow-highlight {
    padding-top: 35px;
    padding-bottom: 35px;
    border-radius: 22px;
    background: #ffffff;
    border-color: rgba(216, 82, 237, 0.15);
}

.acs-workflow-highlight .acs-step-marker {
    background: #D852ED;
    color: #ffffff;
    border-color: #D852ED;
}

.acs-visual-summary {
    background: #211d27;
    border-color: #211d27;
}

.acs-summary-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.acs-summary-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(216, 82, 237, 0.14);
    color: #D852ED;
}

.acs-summary-header span {
    display: block;
    margin-bottom: 3px;
    color: #8e8993;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.acs-summary-header strong {
    color: #ffffff;
    font-size: 11px;
}

.acs-summary-lines {
    padding: 15px 0;
}

.acs-summary-lines span {
    display: block;
    width: 100%;
    height: 5px;
    margin-bottom: 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
}

.acs-summary-lines span:nth-child(2) {
    width: 80%;
}

.acs-summary-lines span:nth-child(3) {
    width: 60%;
}

.acs-summary-ready {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #d7d1da;
    font-size: 9px;
}

.acs-summary-ready i {
    color: #D852ED;
}


/* =====================================================
   FINAL RESULT
   ===================================================== */

.acs-final-workflow {
    margin-bottom: 0;
}

.acs-step-result {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border-radius: 16px;
    background: #fdf7fe;
    border: 1px solid rgba(216, 82, 237, 0.16);
}

.acs-result-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #D852ED;
    color: #ffffff;
}

.acs-step-result span {
    display: block;
    margin-bottom: 4px;
    color: #9a929f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.acs-step-result strong {
    color: #403c45;
    font-size: 13px;
}


/* =====================================================
   BOTTOM MESSAGE
   ===================================================== */

.acs-bottom-message {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 45px auto 0;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 18px;
    background: #211d27;
}

.acs-bottom-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.14);
    color: #D852ED;
}

.acs-bottom-content span {
    display: block;
    margin-bottom: 5px;
    color: #918b96;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.acs-bottom-content p {
    margin: 0;
    color: #e1dde4;
    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {

    .acs-business-section {
        padding: 80px 0;
    }

    .acs-business-header h2 {
        font-size: 36px;
    }

    .acs-workflow-step {
        grid-template-columns: 60px minmax(0, 1fr) 250px;
        gap: 20px;
        padding-right: 20px;
    }

    .acs-step-marker {
        width: 58px;
        height: 58px;
    }

    .acs-step-content p {
        font-size: 14px;
    }

    .acs-step-visual {
        padding: 15px;
    }

    .acs-bottom-message {
        margin-left: 20px;
        margin-right: 20px;
    }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    .acs-business-section {
        padding: 65px 0;
    }

    .acs-business-header {
        margin-bottom: 45px;
        padding: 0 15px;
    }

    .acs-business-header h2 {
        font-size: 29px;
    }

    .acs-business-intro {
        margin: 0 15px 45px;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 15px;
        padding: 20px;
    }

    .acs-intro-number {
        width: 48px;
        height: 48px;
    }

    .acs-intro-text p {
        font-size: 14px;
        line-height: 1.75;
    }

    .acs-workflow {
        margin: 0 15px;
    }

    .acs-workflow::before {
        left: 25px;
    }

    .acs-workflow-step {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 15px;
        min-height: auto;
        padding: 22px 5px;
    }

    .acs-workflow-step:hover {
        padding-left: 10px;
        padding-right: 10px;
    }

    .acs-step-marker {
        width: 50px;
        height: 50px;
    }

    .acs-step-content {
        padding-right: 0;
    }

    .acs-step-content p {
        font-size: 13.5px;
        line-height: 1.8;
    }

    .acs-step-visual {
        grid-column: 2;
        min-height: auto;
        margin-top: 5px;
    }

    .acs-workflow-highlight {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .acs-step-result {
        grid-column: 2;
    }

    .acs-bottom-message {
        margin: 35px 15px 0;
        padding: 20px;
    }
}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

    .acs-business-header h2 {
        font-size: 25px;
    }

    .acs-business-eyebrow {
        font-size: 9px;
        letter-spacing: 1.1px;
    }

    .acs-workflow::before {
        left: 23px;
    }

    .acs-workflow-step {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
    }

    .acs-step-marker {
        width: 46px;
        height: 46px;
        font-size: 10px;
    }

    .acs-step-label {
        font-size: 9px;
    }

    .acs-step-content p {
        font-size: 13px;
    }

    .acs-step-visual {
        padding: 15px;
    }

    .acs-bottom-message {
        align-items: flex-start;
    }

    .acs-bottom-icon {
        width: 42px;
        height: 42px;
    }

    .acs-bottom-content p {
        font-size: 13px;
    }
}

/* =========================================================
   WHAT MAKES A CALL SUMMARY USEFUL
   Premium Editorial / Intelligence Sheet Design
========================================================= */

.summary-useful-section {
    position: relative;
    padding: 100px 20px;
    background: #ffffff;
    overflow: hidden;
}

.summary-useful-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


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

.summary-useful-header {
    position: relative;
    margin-bottom: 65px;
}

.summary-useful-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.06);
    color: #b83bcf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.summary-useful-header h2 {
    max-width: 720px;
    margin: 0;
    color: #19151d;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
}

.summary-useful-header-line {
    width: 75px;
    height: 4px;
    margin-top: 24px;
    border-radius: 10px;
    background: #D852ED;
}


/* =========================
   MAIN EDITORIAL AREA
========================= */

.summary-useful-main {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 70px;
    align-items: center;
    margin-bottom: 80px;
}


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

.summary-useful-intro {
    display: flex;
    gap: 25px;
}

.summary-useful-number {
    flex: 0 0 auto;
    color: #D852ED;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 5px;
}

.summary-useful-copy {
    max-width: 570px;
}

.summary-useful-lead {
    margin: 0 0 20px;
    color: #29232d;
    font-size: 25px;
    line-height: 1.45;
    font-weight: 600;
}

.summary-useful-copy>p:not(.summary-useful-lead) {
    margin: 0;
    color: #6f6873;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================
   QUESTION BOX
========================= */

.summary-useful-question {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-top: 30px;
    padding: 23px 24px;
    border-left: 3px solid #D852ED;
    background: #faf7fc;
}

.summary-useful-question-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #D852ED;
    color: #ffffff;
    font-size: 15px;
}

.summary-useful-question small {
    display: block;
    margin-bottom: 7px;
    color: #a25eae;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.summary-useful-question strong {
    display: block;
    color: #302733;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
}


/* =========================
   DOCUMENT VISUAL
========================= */

.summary-useful-document {
    position: relative;
    padding: 1px;
    border-radius: 22px;
    background: linear-gradient(145deg,
            rgba(216, 82, 237, 0.45),
            rgba(216, 82, 237, 0.08));
    box-shadow: 0 25px 60px rgba(46, 27, 52, 0.10);
}

.summary-useful-document::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -35px;
    top: -35px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.08);
    z-index: -1;
}

.summary-useful-document-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-radius: 21px 21px 0 0;
    background: #27212b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.summary-useful-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #D852ED;
}

.summary-useful-document-tag {
    color: #e7b9ef;
    font-size: 9px;
}

.summary-useful-document-body {
    padding: 32px 28px;
    border-radius: 0 0 21px 21px;
    background: #ffffff;
}

.summary-useful-document-heading {
    padding-bottom: 22px;
    border-bottom: 1px solid #eee8f0;
}

.summary-useful-document-heading span {
    color: #b25bc0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.summary-useful-document-heading h3 {
    margin: 7px 0 0;
    color: #28212b;
    font-size: 25px;
    font-weight: 700;
}


/* =========================
   INFO ROWS
========================= */

.summary-useful-info-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px 0;
    border-bottom: 1px solid #f0ebf2;
}

.summary-useful-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-useful-mini-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    background: #f8eefb;
    color: #D852ED;
}

.summary-useful-info-row small {
    display: block;
    margin-bottom: 4px;
    color: #9c939e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.summary-useful-info-row strong {
    color: #342d37;
    font-size: 14px;
    font-weight: 600;
}


/* =========================
   EXAMPLE
========================= */

.summary-useful-example {
    margin-bottom: 55px;
}

.summary-useful-example-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

.summary-useful-example-label {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 5px;
    background: #27212b;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.summary-useful-example-heading h3 {
    margin: 0;
    color: #302a33;
    font-size: 20px;
    font-weight: 600;
}


/* =========================
   SALES SUMMARY CARD
========================= */

.summary-useful-sales-card {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    min-height: 285px;
    border: 1px solid #ece5ef;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(50, 30, 55, 0.07);
}

.summary-useful-sales-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 35px;
    background: #27212b;
}

.summary-useful-sales-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
    border-radius: 15px;
    background: #D852ED;
    color: #ffffff;
    font-size: 19px;
}

.summary-useful-sales-side span {
    display: block;
    margin-bottom: 7px;
    color: #cda9d2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.summary-useful-sales-side strong {
    display: block;
    max-width: 180px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.35;
}


/* =========================
   POINTS
========================= */

.summary-useful-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    gap: 0;
    padding: 28px 32px;
}

.summary-useful-point {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 15px;
    border-bottom: 1px solid #eee9ef;
}

.summary-useful-point:nth-child(odd) {
    border-right: 1px solid #eee9ef;
}

.summary-useful-point:nth-child(4),
.summary-useful-point:nth-child(5) {
    border-bottom: none;
}

.summary-useful-point span {
    flex: 0 0 auto;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    padding-top: 3px;
}

.summary-useful-point p {
    margin: 0;
    color: #5e5661;
    font-size: 14px;
    line-height: 1.55;
}


/* =========================
   BOTTOM INSIGHT
========================= */

.summary-useful-bottom {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 30px;
    border-radius: 17px;
    background: #f9f6fa;
}

.summary-useful-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #D852ED;
    color: #ffffff;
}

.summary-useful-bottom p {
    margin: 0;
    color: #5e5662;
    font-size: 15px;
    line-height: 1.75;
}

.summary-useful-bottom p+p {
    margin-top: 7px;
}


/* =========================
   HOVER
========================= */

.summary-useful-document,
.summary-useful-sales-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.summary-useful-document:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 65px rgba(216, 82, 237, 0.13);
}

.summary-useful-sales-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 55px rgba(50, 30, 55, 0.10);
}


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

@media (max-width: 991px) {

    .summary-useful-section {
        padding: 80px 20px;
    }

    .summary-useful-header h2 {
        font-size: 38px;
    }

    .summary-useful-main {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .summary-useful-copy {
        max-width: 100%;
    }

    .summary-useful-document {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .summary-useful-sales-card {
        grid-template-columns: 1fr;
    }

    .summary-useful-sales-side {
        padding: 30px;
    }

    .summary-useful-sales-side strong {
        max-width: none;
    }
}


@media (max-width: 767px) {

    .summary-useful-section {
        padding: 65px 15px;
    }

    .summary-useful-header {
        margin-bottom: 45px;
    }

    .summary-useful-header h2 {
        font-size: 32px;
    }

    .summary-useful-intro {
        gap: 15px;
    }

    .summary-useful-lead {
        font-size: 21px;
    }

    .summary-useful-question {
        padding: 19px;
    }

    .summary-useful-question strong {
        font-size: 15px;
    }

    .summary-useful-document-body {
        padding: 25px 20px;
    }

    .summary-useful-example-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .summary-useful-example-heading h3 {
        font-size: 18px;
        line-height: 1.5;
    }

    .summary-useful-points {
        grid-template-columns: 1fr;
        padding: 15px 20px;
    }

    .summary-useful-point,
    .summary-useful-point:nth-child(odd) {
        border-right: none;
        border-bottom: 1px solid #eee9ef;
    }

    .summary-useful-point:last-child {
        border-bottom: none;
    }

    .summary-useful-bottom {
        padding: 22px;
    }
}


@media (max-width: 480px) {

    .summary-useful-header h2 {
        font-size: 28px;
    }

    .summary-useful-number {
        display: none;
    }

    .summary-useful-document-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .summary-useful-document-heading h3 {
        font-size: 22px;
    }

    .summary-useful-sales-side {
        padding: 25px;
    }

    .summary-useful-point {
        padding: 16px 5px;
    }

    .summary-useful-bottom {
        flex-direction: column;
    }
}





/* =========================================================
   CALL SUMMARIZATION FOR SALES TEAMS
   Lead Intelligence Board Design
========================================================= */

.sales-summary-section {
    position: relative;
    padding: 105px 20px;
    background: #fbf9fc;
    overflow: hidden;
}

.sales-summary-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -150px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.06);
}

.sales-summary-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    bottom: -140px;
    left: -120px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.045);
}

.sales-summary-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}


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

.sales-summary-header {
    max-width: 780px;
    margin-bottom: 70px;
}

.sales-summary-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #b341c6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sales-summary-kicker span {
    display: block;
    width: 28px;
    height: 2px;
    background: #D852ED;
}

.sales-summary-header h2 {
    margin: 0 0 22px;
    color: #211c24;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
}

.sales-summary-header p {
    max-width: 680px;
    margin: 0;
    color: #6e6671;
    font-size: 17px;
    line-height: 1.8;
}


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

.sales-summary-content {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(400px, 1.15fr);
    gap: 75px;
    align-items: center;
}


/* =========================
   LEFT TEXT
========================= */

.sales-summary-text {
    display: flex;
    gap: 25px;
}

.sales-summary-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 35px;
}

.sales-summary-line span {
    color: #D852ED;
    font-size: 13px;
    font-weight: 700;
}

.sales-summary-line div {
    width: 1px;
    flex: 1;
    min-height: 190px;
    margin-top: 13px;
    background: linear-gradient(to bottom,
            rgba(216, 82, 237, 0.6),
            rgba(216, 82, 237, 0.03));
}

.sales-summary-copy {
    max-width: 500px;
}

.sales-summary-copy p {
    margin: 0 0 28px;
    color: #5f5863;
    font-size: 16px;
    line-height: 1.9;
}

.sales-summary-copy p:last-child {
    margin-bottom: 0;
}


/* =========================
   SALES BRIEF
========================= */

.sales-summary-brief {
    position: relative;
    border: 1px solid #e9e0ec;
    border-radius: 24px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 25px 65px rgba(49, 31, 53, 0.09);
}

.sales-summary-brief-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 27px;
    background: #27212b;
}

.sales-summary-brief-header span {
    display: block;
    margin-bottom: 6px;
    color: #d6a9dc;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sales-summary-brief-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 600;
}

.sales-summary-brief-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 13px;
    background: #D852ED;
    color: #ffffff;
    font-size: 16px;
}


/* =========================
   STATUS
========================= */

.sales-summary-brief-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 27px;
    border-bottom: 1px solid #eee8f0;
    color: #817983;
    font-size: 11px;
    font-weight: 600;
}

.sales-summary-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.11);
}


/* =========================
   BRIEF ITEMS
========================= */

.sales-summary-brief-content {
    padding: 10px 27px 20px;
}

.sales-summary-brief-item {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 15px;
    padding: 21px 0;
    border-bottom: 1px solid #eee9ef;
}

.sales-summary-brief-item:last-child {
    border-bottom: none;
}

.sales-summary-item-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #faf0fc;
    color: #c147d3;
    font-size: 10px;
    font-weight: 700;
}

.sales-summary-brief-item small {
    display: block;
    margin-bottom: 6px;
    color: #9b929e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.sales-summary-brief-item strong {
    display: block;
    color: #352e38;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
}


/* =========================
   EXAMPLE STRIP
========================= */

.sales-summary-example {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 45px;
    align-items: center;
    margin-top: 75px;
    padding: 32px 0;
    border-top: 1px solid #e8e0ea;
    border-bottom: 1px solid #e8e0ea;
}

.sales-summary-example-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-summary-example-label {
    padding: 7px 11px;
    border-radius: 5px;
    background: #D852ED;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.sales-summary-example-line {
    width: 35px;
    height: 1px;
    background: #d8cbdc;
}

.sales-summary-example-title h3 {
    max-width: 650px;
    margin: 0;
    color: #332c36;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
}


/* =========================
   BOTTOM INSIGHT
========================= */

.sales-summary-insight {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 850px;
    margin: 42px auto 0;
    padding: 23px 28px;
    border-radius: 16px;
    background: #27212b;
}

.sales-summary-insight-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #D852ED;
    color: #ffffff;
}

.sales-summary-insight-content span {
    display: block;
    margin-bottom: 5px;
    color: #cda6d3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sales-summary-insight-content p {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
}


/* =========================
   HOVER
========================= */

.sales-summary-brief {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sales-summary-brief:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 75px rgba(216, 82, 237, 0.14);
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .sales-summary-section {
        padding: 85px 20px;
    }

    .sales-summary-header h2 {
        font-size: 38px;
    }

    .sales-summary-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sales-summary-copy {
        max-width: 700px;
    }

    .sales-summary-brief {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .sales-summary-section {
        padding: 65px 15px;
    }

    .sales-summary-header {
        margin-bottom: 45px;
    }

    .sales-summary-header h2 {
        font-size: 32px;
    }

    .sales-summary-header p {
        font-size: 15px;
    }

    .sales-summary-text {
        gap: 15px;
    }

    .sales-summary-copy p {
        font-size: 15px;
    }

    .sales-summary-brief-header {
        padding: 22px 20px;
    }

    .sales-summary-brief-status {
        padding: 13px 20px;
    }

    .sales-summary-brief-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sales-summary-example {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 55px;
    }

    .sales-summary-example-title h3 {
        font-size: 18px;
    }

    .sales-summary-insight {
        align-items: flex-start;
        padding: 21px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .sales-summary-header h2 {
        font-size: 28px;
    }

    .sales-summary-line {
        display: none;
    }

    .sales-summary-brief-header h3 {
        font-size: 18px;
    }

    .sales-summary-brief-item {
        grid-template-columns: 30px 1fr;
        gap: 12px;
    }

    .sales-summary-item-number {
        width: 28px;
        height: 28px;
    }

    .sales-summary-brief-item strong {
        font-size: 13px;
    }

    .sales-summary-insight {
        flex-direction: column;
    }
}




/* =========================================================
   CALL SUMMARIZATION FOR CUSTOMER SUPPORT
   Customer Case / Agent Handoff Design
========================================================= */

.support-summary-section {
    position: relative;
    padding: 105px 20px;
    background: #ffffff;
    overflow: hidden;
}

.support-summary-section::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -180px;
    top: 80px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
}

.support-summary-section::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    left: -120px;
    bottom: 20px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.035);
}

.support-summary-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


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

.support-summary-heading {
    max-width: 850px;
    margin-bottom: 65px;
}

.support-summary-label {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 12px;
    border-left: 3px solid #D852ED;
    color: #a943b7;
    background: #fbf3fd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.support-summary-heading h2 {
    margin: 0;
    color: #211b24;
    font-size: 46px;
    line-height: 1.13;
    font-weight: 700;
}

.support-summary-heading-line {
    width: 70px;
    height: 3px;
    margin-top: 23px;
    background: #D852ED;
    border-radius: 10px;
}


/* =========================
   INTRO
========================= */

.support-summary-intro {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 25px;
    max-width: 900px;
    margin-bottom: 65px;
}

.support-summary-intro-number {
    position: relative;
    display: flex;
    justify-content: center;
}

.support-summary-intro-number::after {
    content: "";
    position: absolute;
    top: 42px;
    width: 1px;
    height: 125px;
    background: linear-gradient(to bottom,
            rgba(216, 82, 237, 0.55),
            rgba(216, 82, 237, 0));
}

.support-summary-intro-number span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(216, 82, 237, 0.3);
    border-radius: 50%;
    color: #D852ED;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.support-summary-intro-content p {
    margin: 0 0 22px;
    color: #625a65;
    font-size: 16px;
    line-height: 1.9;
}

.support-summary-intro-content p:first-child {
    color: #302832;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
}

.support-summary-intro-content p:last-child {
    margin-bottom: 0;
}


/* =========================
   MAIN SUPPORT BOARD
========================= */

.support-summary-board {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    min-height: 470px;
    border: 1px solid #e9e1eb;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(48, 29, 53, 0.08);
}


/* =========================
   LEFT CONTEXT
========================= */

.support-summary-context {
    position: relative;
    padding: 38px 38px 35px;
    background: #f9f6fa;
    border-right: 1px solid #ebe3ed;
}

.support-summary-context-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.support-summary-context-top>span {
    color: #a35aae;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.support-summary-case-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8c7b90;
    font-size: 9px;
    font-weight: 700;
}

.support-summary-case-status i {
    color: #D852ED;
}


.support-summary-context-title {
    margin-top: 70px;
    max-width: 390px;
}

.support-summary-context-title h3 {
    margin: 0;
    color: #2c252f;
    font-size: 25px;
    line-height: 1.45;
    font-weight: 600;
}


/* =========================
   CALL HISTORY
========================= */

.support-summary-call-history {
    position: relative;
    margin-top: 55px;
    padding-left: 23px;
}

.support-summary-history-line {
    position: absolute;
    left: 4px;
    top: 5px;
    bottom: 8px;
    width: 1px;
    background: #ddd1df;
}

.support-summary-history-item {
    position: relative;
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.support-summary-history-item:last-child {
    margin-bottom: 0;
}

.support-summary-history-dot {
    position: absolute;
    left: -23px;
    top: 4px;
    width: 9px;
    height: 9px;
    border: 2px solid #cdbbce;
    border-radius: 50%;
    background: #f9f6fa;
}

.support-summary-history-dot.active {
    border-color: #D852ED;
    background: #D852ED;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.10);
}

.support-summary-history-item small {
    display: block;
    margin-bottom: 5px;
    color: #a095a3;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.support-summary-history-item strong {
    color: #514954;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}


/* =========================
   RIGHT HANDOFF
========================= */

.support-summary-handoff {
    display: flex;
    flex-direction: column;
    background: #27212b;
}

.support-summary-handoff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.support-summary-handoff-header span {
    display: block;
    margin-bottom: 6px;
    color: #c89dce;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.support-summary-handoff-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 600;
}

.support-summary-handoff-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #D852ED;
    color: #ffffff;
    font-size: 18px;
}


/* =========================
   DATA ITEMS
========================= */

.support-summary-handoff-content {
    padding: 25px 35px;
}

.support-summary-data {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.support-summary-data:last-child {
    border-bottom: none;
}

.support-summary-data-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 12px;
    color: #D852ED;
    background: rgba(216, 82, 237, 0.08);
}

.support-summary-data small {
    display: block;
    margin-bottom: 6px;
    color: #9e919f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.support-summary-data strong {
    display: block;
    color: #f7f1f8;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}


/* =========================
   CLOSING
========================= */

.support-summary-closing {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    align-items: start;
    max-width: 930px;
    margin: 60px auto 0;
}

.support-summary-closing-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #27212b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.support-summary-closing-content>p {
    margin: 0 0 20px;
    color: #403842;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}

.support-summary-result {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 8px;
    background: #fbf2fd;
    color: #7d487f;
    font-size: 13px;
    font-weight: 600;
}

.support-summary-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: #D852ED;
    color: #ffffff;
    font-size: 10px;
}


/* =========================
   HOVER
========================= */

.support-summary-board {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.support-summary-board:hover {
    transform: translateY(-5px);
    box-shadow: 0 32px 75px rgba(216, 82, 237, 0.12);
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .support-summary-section {
        padding: 85px 20px;
    }

    .support-summary-heading h2 {
        font-size: 38px;
    }

    .support-summary-board {
        grid-template-columns: 1fr;
    }

    .support-summary-context {
        border-right: none;
        border-bottom: 1px solid #ebe3ed;
    }

    .support-summary-context-title {
        margin-top: 45px;
    }

    .support-summary-call-history {
        margin-top: 40px;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .support-summary-section {
        padding: 65px 15px;
    }

    .support-summary-heading {
        margin-bottom: 45px;
    }

    .support-summary-heading h2 {
        font-size: 32px;
    }

    .support-summary-intro {
        grid-template-columns: 45px 1fr;
        gap: 15px;
        margin-bottom: 45px;
    }

    .support-summary-intro-number span {
        width: 38px;
        height: 38px;
    }

    .support-summary-intro-number::after {
        top: 38px;
        height: 150px;
    }

    .support-summary-intro-content p:first-child {
        font-size: 20px;
    }

    .support-summary-context {
        padding: 28px 22px;
    }

    .support-summary-context-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-summary-context-title {
        margin-top: 38px;
    }

    .support-summary-context-title h3 {
        font-size: 21px;
    }

    .support-summary-handoff-header {
        padding: 25px 22px;
    }

    .support-summary-handoff-content {
        padding: 20px 22px;
    }

    .support-summary-data {
        padding: 19px 0;
    }

    .support-summary-closing {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 45px;
    }

    .support-summary-closing-content>p {
        font-size: 16px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .support-summary-heading h2 {
        font-size: 28px;
    }

    .support-summary-intro {
        grid-template-columns: 1fr;
    }

    .support-summary-intro-number {
        display: none;
    }

    .support-summary-context-title h3 {
        font-size: 19px;
    }

    .support-summary-handoff-header h3 {
        font-size: 19px;
    }

    .support-summary-handoff-icon {
        width: 43px;
        height: 43px;
        font-size: 15px;
    }

    .support-summary-data strong {
        font-size: 13px;
    }

    .support-summary-result {
        align-items: flex-start;
    }
}



/* =========================================================
   CALL CENTER MANAGERS
   AUTO DIALER STYLE DESIGN
========================================================= */

.manager-summary-auto-section {
    position: relative;
    padding: 100px 20px;
    background: #fbf9fc;
    overflow: hidden;
}

.manager-summary-auto-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    top: -220px;
    right: -180px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.055);
}

.manager-summary-auto-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -160px;
    left: -130px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.035);
}

.manager-summary-auto-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}


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

.manager-summary-auto-heading {
    text-align: center;
    margin-bottom: 50px;
}

.manager-summary-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: #ffffff;
    color: #b23bc6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.manager-summary-auto-heading h2 {
    margin: 0;
    color: #211c24;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
}


/* =========================
   INTRO CARD
========================= */

.manager-summary-auto-intro {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 930px;
    margin: 0 auto 65px;
    padding: 28px 32px;
    border: 1px solid #e9e0ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(54, 31, 59, 0.05);
}

.manager-summary-auto-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #f8ebfb;
    color: #D852ED;
    font-size: 17px;
}

.manager-summary-auto-intro p {
    margin: 0;
    color: #625b66;
    font-size: 15px;
    line-height: 1.85;
}


/* =========================
   MAIN AREA
========================= */

.manager-summary-auto-main {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 55px;
    align-items: center;
    margin-bottom: 60px;
}


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

.manager-summary-auto-left {
    padding-right: 15px;
}

.manager-summary-auto-small-title {
    display: inline-block;
    margin-bottom: 15px;
    color: #b044bd;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.manager-summary-auto-left h3 {
    margin: 0 0 20px;
    color: #2b2530;
    font-size: 27px;
    line-height: 1.45;
    font-weight: 600;
}

.manager-summary-auto-description {
    margin: 0;
    color: #817883;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================
   FEATURE GRID
========================= */

.manager-summary-auto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.manager-summary-auto-card {
    position: relative;
    display: grid;
    grid-template-columns: 45px 1fr;
    column-gap: 14px;
    align-items: center;
    min-height: 105px;
    padding: 20px;
    border: 1px solid #ebe3ed;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(55, 32, 60, 0.035);
    transition: all 0.3s ease;
}

.manager-summary-auto-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / 3;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #faf0fc;
    color: #D852ED;
    font-size: 14px;
}

.manager-summary-auto-card>span {
    color: #b4a9b5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.manager-summary-auto-card strong {
    color: #413943;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.manager-summary-auto-card:hover {
    transform: translateY(-5px);
    border-color: rgba(216, 82, 237, 0.35);
    box-shadow: 0 15px 35px rgba(216, 82, 237, 0.10);
}

.manager-summary-auto-card:hover .manager-summary-auto-card-icon {
    background: #D852ED;
    color: #ffffff;
}


/* =========================
   RECORDING SECTION
========================= */

.manager-summary-auto-recording {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 25px 30px;
    border-radius: 17px;
    background: #27212b;
}

.manager-summary-auto-recording-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #D852ED;
    color: #ffffff;
    font-size: 16px;
}

.manager-summary-auto-recording-content p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
}

.manager-summary-auto-review {
    display: flex;
    align-items: center;
    gap: 18px;
}

.manager-summary-auto-review span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c6b4c9;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.manager-summary-auto-review i {
    color: #D852ED;
}


/* =========================
   FINAL
========================= */

.manager-summary-auto-final {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 45px auto 0;
}

.manager-summary-auto-final-line {
    width: 45px;
    height: 1px;
    background: #d9cedc;
}

.manager-summary-auto-final p {
    margin: 0;
    color: #5d5661;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.manager-summary-auto-final-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f8ebfb;
    color: #D852ED;
    font-size: 13px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .manager-summary-auto-section {
        padding: 80px 20px;
    }

    .manager-summary-auto-heading h2 {
        font-size: 38px;
    }

    .manager-summary-auto-main {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .manager-summary-auto-left {
        max-width: 700px;
    }

    .manager-summary-auto-recording {
        grid-template-columns: 55px 1fr;
    }

    .manager-summary-auto-review {
        grid-column: 2;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .manager-summary-auto-section {
        padding: 65px 15px;
    }

    .manager-summary-auto-heading {
        margin-bottom: 40px;
    }

    .manager-summary-auto-heading h2 {
        font-size: 32px;
    }

    .manager-summary-auto-intro {
        padding: 23px;
        margin-bottom: 45px;
    }

    .manager-summary-auto-main {
        margin-bottom: 45px;
    }

    .manager-summary-auto-left h3 {
        font-size: 23px;
    }

    .manager-summary-auto-grid {
        grid-template-columns: 1fr;
    }

    .manager-summary-auto-card {
        min-height: 90px;
    }

    .manager-summary-auto-recording {
        grid-template-columns: 48px 1fr;
        padding: 22px;
    }

    .manager-summary-auto-review {
        grid-column: 1 / -1;
        flex-wrap: wrap;
        padding-left: 68px;
    }

    .manager-summary-auto-final-line {
        display: none;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .manager-summary-auto-heading h2 {
        font-size: 28px;
    }

    .manager-summary-auto-intro {
        flex-direction: column;
    }

    .manager-summary-auto-left h3 {
        font-size: 21px;
    }

    .manager-summary-auto-review {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .manager-summary-auto-final {
        align-items: center;
        flex-direction: column;
    }
}





.call-crm-integration-section {
    padding: 85px 0;
    background: #fbf9fc;
}

.call-crm-integration-section .container {
    max-width: 1120px;
}

/* Header */

.call-crm-header {
    text-align: center;
    margin-bottom: 35px;
}

.call-crm-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.09);
    border: 1px solid rgba(216, 82, 237, 0.22);
    color: #D852ED;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.call-crm-header h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #20202a;
}

/* Intro */

.call-crm-intro {
    max-width: 850px;
    margin: 0 auto 45px;
    padding: 22px 28px;
    background: #ffffff;
    border: 1px solid #eee7f2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 10px 30px rgba(35, 20, 45, 0.04);
}

.call-crm-intro-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.1);
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.call-crm-intro p {
    margin: 0;
    color: #555360;
    font-size: 16px;
    line-height: 1.7;
}

/* Main */

.call-crm-main {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: stretch;
}

/* Left Content */

.call-crm-content {
    background: #ffffff;
    border: 1px solid #eee7f2;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 12px 35px rgba(35, 20, 45, 0.045);
}

.call-crm-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.call-crm-step-number {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: #D852ED;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.call-crm-step h4 {
    margin: 1px 0 9px;
    font-size: 18px;
    font-weight: 700;
    color: #25242d;
}

.call-crm-step p {
    margin: 0;
    color: #65616c;
    font-size: 14px;
    line-height: 1.8;
}

.call-crm-divider {
    height: 1px;
    background: #eee8f1;
    margin: 28px 0;
}

/* CRM Record */

.call-crm-record {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eee7f2;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(35, 20, 45, 0.06);
}

.call-crm-record-top {
    padding: 22px 24px;
    background: #27232b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.call-crm-record-top span {
    display: block;
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #d5ced9;
    margin-bottom: 5px;
}

.call-crm-record-top strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.call-crm-status {
    white-space: nowrap;
    padding: 7px 11px;
    border-radius: 20px;
    background: rgba(216, 82, 237, 0.15);
    color: #f0a5fa;
    font-size: 11px;
    font-weight: 600;
}

.call-crm-status i {
    margin-right: 4px;
}

/* Record Items */

.call-crm-record-body {
    padding: 20px;
}

.call-crm-record-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 1px solid #eee9f1;
    border-radius: 13px;
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

.call-crm-record-item:last-child {
    margin-bottom: 0;
}

.call-crm-record-item.active {
    border-color: rgba(216, 82, 237, 0.35);
    background: rgba(216, 82, 237, 0.045);
}

.call-crm-record-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: #f5edf7;
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-crm-record-item small {
    display: block;
    color: #99939f;
    font-size: 11px;
    margin-bottom: 4px;
}

.call-crm-record-item p {
    margin: 0;
    color: #3e3b44;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

/* Bottom Content */

.call-crm-bottom {
    margin-top: 28px;
    padding: 24px 28px;
    background: #ffffff;
    border: 1px solid #eee7f2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.call-crm-bottom-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    background: #f4e8f7;
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-crm-bottom p {
    margin: 0;
    color: #5d5963;
    font-size: 14px;
    line-height: 1.8;
}

/* Note */

.call-crm-note {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 8px;
}

.call-crm-note i {
    color: #D852ED;
    margin-top: 4px;
}

.call-crm-note p {
    margin: 0;
    color: #85808a;
    font-size: 12px;
    line-height: 1.7;
}

/* Hover */

.call-crm-record-item:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 82, 237, 0.25);
}

.call-crm-intro:hover,
.call-crm-content:hover,
.call-crm-bottom:hover {
    box-shadow: 0 15px 38px rgba(35, 20, 45, 0.07);
}

/* Responsive */

@media (max-width: 991px) {


    .call-crm-integration-section {
        padding: 65px 20px;
    }

    .call-crm-header h2 {
        font-size: 30px;
    }

    .call-crm-main {
        grid-template-columns: 1fr;
    }


}

@media (max-width: 767px) {


    .call-crm-integration-section {
        padding: 55px 15px;
    }

    .call-crm-header {
        margin-bottom: 28px;
    }

    .call-crm-header h2 {
        font-size: 26px;
    }

    .call-crm-intro {
        padding: 20px;
        align-items: flex-start;
    }

    .call-crm-intro p {
        font-size: 14px;
    }

    .call-crm-content {
        padding: 24px 20px;
    }

    .call-crm-record-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .call-crm-record-body {
        padding: 15px;
    }

    .call-crm-bottom {
        align-items: flex-start;
        padding: 20px;
    }


}

@media (max-width: 480px) {


    .call-crm-header h2 {
        font-size: 23px;
    }

    .call-crm-badge {
        font-size: 10px;
    }

    .call-crm-step {
        gap: 12px;
    }

    .call-crm-step-number {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 10px;
    }

    .call-crm-step h4 {
        font-size: 16px;
    }

    .call-crm-step p,
    .call-crm-bottom p {
        font-size: 13px;
    }

    .call-crm-record-item {
        padding: 13px;
        gap: 11px;
    }


}









.call-summary-check-section {
    padding: 85px 0;
    background: #fbf9fc;
}

.call-summary-check-section .container {
    max-width: 1140px;
}

/* Header */

.call-summary-check-header {
    max-width: 850px;
    margin: 0 auto 48px;
    text-align: center;
}

.call-summary-check-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    margin-bottom: 15px;
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.09);
    border: 1px solid rgba(216, 82, 237, 0.2);
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.call-summary-check-header h2 {
    margin: 0 0 15px;
    color: #24222a;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
}

.call-summary-check-header p {
    max-width: 700px;
    margin: auto;
    color: #68636d;
    font-size: 15px;
    line-height: 1.8;
}

/* Main Layout */

.call-summary-check-layout {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 28px;
    align-items: start;
}

/* Left Side */

.call-summary-check-side {
    position: sticky;
    top: 30px;
    padding: 34px;
    background: #29252d;
    border-radius: 22px;
    overflow: hidden;
}

.call-summary-check-side::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -85px;
    bottom: -90px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.3);
}

.call-summary-check-side-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    border-radius: 14px;
    background: rgba(216, 82, 237, 0.15);
    color: #e98af5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.call-summary-check-side>span {
    color: #cfc6d2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.call-summary-check-side h3 {
    margin: 10px 0 14px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 650;
}

.call-summary-check-side>p {
    margin: 0;
    color: #bdb6c1;
    font-size: 13px;
    line-height: 1.8;
}

/* Progress */

.call-summary-check-progress {
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.call-summary-check-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.call-summary-check-progress-top span {
    color: #aaa2ad;
    font-size: 11px;
}

.call-summary-check-progress-top strong {
    color: #eaa0f5;
    font-size: 11px;
}

.call-summary-check-progress-line {
    height: 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.call-summary-check-progress-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: #D852ED;
    border-radius: inherit;
}

/* Checklist */

.call-summary-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.call-summary-check-item {
    position: relative;
    padding: 25px 22px 22px;
    background: #ffffff;
    border: 1px solid #eee8f1;
    border-radius: 17px;
    transition: all 0.25s ease;
}

.call-summary-check-item:hover {
    transform: translateY(-4px);
    border-color: rgba(216, 82, 237, 0.3);
    box-shadow: 0 15px 35px rgba(40, 25, 50, 0.07);
}

/* Number */

.call-summary-check-number {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #d9d3dc;
    font-size: 11px;
    font-weight: 700;
}

/* Icon */

.call-summary-check-icon {
    width: 43px;
    height: 43px;
    margin-bottom: 19px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s ease;
}

.call-summary-check-item:hover .call-summary-check-icon {
    background: #D852ED;
    color: #ffffff;
}

/* Content */

.call-summary-check-content h4 {
    margin: 0 0 9px;
    color: #28252d;
    font-size: 17px;
    font-weight: 700;
}

.call-summary-check-content p {
    margin: 0;
    color: #6b6670;
    font-size: 13px;
    line-height: 1.75;
}

/* Responsive */

@media (max-width: 991px) {

    .call-summary-check-section {
        padding: 65px 20px;
    }

    .call-summary-check-header h2 {
        font-size: 30px;
    }

    .call-summary-check-layout {
        grid-template-columns: 1fr;
    }

    .call-summary-check-side {
        position: relative;
        top: auto;
    }

    .call-summary-check-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}

@media (max-width: 767px) {

    .call-summary-check-section {
        padding: 55px 15px;
    }

    .call-summary-check-header {
        margin-bottom: 32px;
    }

    .call-summary-check-header h2 {
        font-size: 26px;
    }

    .call-summary-check-header p {
        font-size: 14px;
    }

    .call-summary-check-side {
        padding: 28px 24px;
        border-radius: 18px;
    }

    .call-summary-check-side h3 {
        font-size: 21px;
    }

    .call-summary-check-list {
        grid-template-columns: 1fr;
    }

    .call-summary-check-item {
        padding: 22px 20px;
    }


}

@media (max-width: 480px) {

    .call-summary-check-header h2 {
        font-size: 23px;
    }

    .call-summary-check-badge {
        font-size: 10px;
    }

    .call-summary-check-side-icon {
        width: 46px;
        height: 46px;
        font-size: 17px;
    }

    .call-summary-check-content h4 {
        font-size: 16px;
    }

    .call-summary-check-content p {
        font-size: 12.5px;
    }


}

.future-call-summary-section {
    padding: 85px 0;

}

.future-call-summary-section .container {
    max-width: 1140px;
}

/* Header */

.future-call-summary-header {
    max-width: 850px;
    margin: 0 auto 52px;
    text-align: center;
}

.future-call-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    margin-bottom: 15px;
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.09);
    border: 1px solid rgba(216, 82, 237, 0.22);
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.future-call-summary-header h2 {
    margin: 0 0 15px;
    color: #24222a;
    font-size: 37px;
    line-height: 1.2;
    font-weight: 700;
}

.future-call-summary-header p {
    margin: 0;
    color: #68636d;
    font-size: 15px;
    line-height: 1.8;
}

/* Flow */

.future-call-summary-flow {
    display: grid;
    grid-template-columns: 1fr 55px 1fr 55px 1fr;
    align-items: stretch;
    gap: 0;
}

/* Node */

.future-call-summary-node {
    position: relative;
    padding: 27px 25px;
    background: #ffffff;
    border: 1px solid #eee8f1;
    border-radius: 18px;
    transition: all 0.25s ease;
}

.future-call-summary-node:hover {
    transform: translateY(-5px);
    border-color: rgba(216, 82, 237, 0.3);
    box-shadow: 0 16px 35px rgba(40, 25, 50, 0.07);
}

.future-call-summary-node.highlight {
    background: #29252d;
    border-color: #29252d;
    box-shadow: 0 15px 35px rgba(40, 25, 50, 0.1);
}

.future-call-summary-node-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 23px;
}

.future-call-summary-node-top>span {
    color: #c5bec9;
    font-size: 11px;
    font-weight: 700;
}

.future-call-summary-node.highlight .future-call-summary-node-top>span {
    color: #8e8491;
}

/* Icons */

.future-call-summary-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.future-call-summary-node.highlight .future-call-summary-icon {
    background: rgba(216, 82, 237, 0.15);
    color: #ed9af7;
}

/* Node Content */

.future-call-summary-node h3 {
    margin: 0 0 12px;
    color: #28252d;
    font-size: 18px;
    font-weight: 700;
}

.future-call-summary-node.highlight h3 {
    color: #ffffff;
}

.future-call-summary-node p {
    margin: 0;
    color: #68636d;
    font-size: 13px;
    line-height: 1.8;
}

.future-call-summary-node.highlight p {
    color: #c2bac5;
}

/* Connectors */

.future-call-summary-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D852ED;
    font-size: 15px;
}

.future-call-summary-connector i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(216, 82, 237, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Human Section */

.future-call-summary-human {
    margin-top: 30px;
    padding: 30px 34px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #eee8f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    box-shadow: 0 12px 30px rgba(40, 25, 50, 0.045);
}

.future-call-summary-human-content {
    max-width: 690px;
}

.future-call-summary-small-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.future-call-summary-human-content h3 {
    margin: 0 0 10px;
    color: #28252d;
    font-size: 22px;
    font-weight: 700;
}

.future-call-summary-human-content p {
    margin: 0;
    color: #68636d;
    font-size: 13px;
    line-height: 1.85;
}

/* Human Visual */

.future-call-summary-human-visual {
    min-width: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.future-call-summary-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.future-call-summary-circle i {
    font-size: 15px;
}

.future-call-summary-circle span {
    font-size: 9px;
    font-weight: 700;
}

.ai-circle {
    background: rgba(216, 82, 237, 0.1);
    border: 1px solid rgba(216, 82, 237, 0.25);
    color: #D852ED;
}

.human-circle {
    background: #29252d;
    color: #ffffff;
}

.future-call-summary-plus {
    color: #b5adb9;
    font-size: 17px;
    font-weight: 600;
}

/* Responsive */

@media (max-width: 991px) {


    .future-call-summary-section {
        padding: 65px 20px;
    }

    .future-call-summary-header h2 {
        font-size: 31px;
    }

    .future-call-summary-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .future-call-summary-connector {
        height: 35px;
        transform: rotate(90deg);
    }


}

@media (max-width: 767px) {


    .future-call-summary-section {
        padding: 55px 15px;
    }

    .future-call-summary-header {
        margin-bottom: 35px;
    }

    .future-call-summary-header h2 {
        font-size: 27px;
    }

    .future-call-summary-header p {
        font-size: 14px;
    }

    .future-call-summary-node {
        padding: 23px 20px;
    }

    .future-call-summary-human {
        padding: 25px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .future-call-summary-human-content {
        max-width: 100%;
    }

    .future-call-summary-human-visual {
        width: 100%;
    }


}

@media (max-width: 480px) {


    .future-call-summary-header h2 {
        font-size: 23px;
    }

    .future-call-summary-badge {
        font-size: 9px;
    }

    .future-call-summary-node h3 {
        font-size: 17px;
    }

    .future-call-summary-node p,
    .future-call-summary-human-content p {
        font-size: 12.5px;
    }

    .future-call-summary-human-content h3 {
        font-size: 20px;
    }


}



.final-call-summary-saas-section {
    padding: 90px 0;
    background: #f8f7fa;
}

.final-call-summary-saas-section .container {
    max-width: 1140px;
}

/* Heading */

.final-call-summary-saas-heading {
    margin-bottom: 42px;
}

.final-call-summary-saas-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #D852ED;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.final-call-summary-saas-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 5px rgba(216, 82, 237, 0.1);
}

.final-call-summary-saas-heading h2 {
    margin: 0;
    color: #242229;
    font-size: 38px;
    line-height: 1.22;
    font-weight: 700;
}

/* Main Panel */

.final-call-summary-saas-panel {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: #ffffff;
    border: 1px solid #ebe7ed;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(40, 25, 50, 0.05);
}

/* Intro */

.final-call-summary-saas-intro {
    padding: 42px;
    background: #29252d;
    position: relative;
    overflow: hidden;
}

.final-call-summary-saas-intro::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    top: -100px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.18);
}

.final-call-summary-saas-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
    border-radius: 15px;
    background: rgba(216, 82, 237, 0.14);
    color: #e99af5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.final-call-summary-saas-intro p {
    position: relative;
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 500;
}

.final-call-summary-saas-line {
    width: 45px;
    height: 2px;
    margin: 30px 0 22px;
    background: #D852ED;
}

.final-call-summary-saas-mini {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #aaa2ad;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.final-call-summary-saas-mini strong {
    color: #D852ED;
    font-size: 13px;
}

/* Main Content */

.final-call-summary-saas-content {
    padding: 36px 40px;
}

.final-call-summary-saas-content-block {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 18px;
    padding: 10px 0 30px;
}

.final-call-summary-saas-content-block+.final-call-summary-saas-content-block {
    padding-top: 30px;
    border-top: 1px solid #eeeaf0;
}

.final-call-summary-saas-number {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.final-call-summary-saas-content-block h3 {
    margin: 0 0 10px;
    color: #28252d;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.final-call-summary-saas-content-block p {
    margin: 0;
    color: #68636d;
    font-size: 13px;
    line-height: 1.85;
}

/* Takeaway */

.final-call-summary-saas-takeaway {
    margin-top: 22px;
    padding: 25px 28px;
    background: #ffffff;
    border: 1px solid #ebe7ed;
    border-radius: 17px;
    display: grid;
    grid-template-columns: 48px 1fr 38px;
    align-items: center;
    gap: 18px;
    transition: all 0.25s ease;
}

.final-call-summary-saas-takeaway:hover {
    border-color: rgba(216, 82, 237, 0.3);
    box-shadow: 0 14px 35px rgba(40, 25, 50, 0.06);
}

.final-call-summary-saas-takeaway-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #f6eafa;
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.final-call-summary-saas-takeaway-content span {
    display: block;
    margin-bottom: 6px;
    color: #D852ED;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.final-call-summary-saas-takeaway-content p {
    margin: 0;
    color: #514c56;
    font-size: 13px;
    line-height: 1.8;
}

.final-call-summary-saas-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #29252d;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Hover */

.final-call-summary-saas-content-block:hover .final-call-summary-saas-number {
    background: #D852ED;
    color: #ffffff;
}

/* Responsive */

@media (max-width: 991px) {


    .final-call-summary-saas-section {
        padding: 70px 20px;
    }

    .final-call-summary-saas-heading h2 {
        font-size: 32px;
    }

    .final-call-summary-saas-panel {
        grid-template-columns: 1fr;
    }

    .final-call-summary-saas-intro {
        padding: 34px;
    }


}

@media (max-width: 767px) {


    .final-call-summary-saas-section {
        padding: 55px 15px;
    }

    .final-call-summary-saas-heading {
        margin-bottom: 30px;
    }

    .final-call-summary-saas-heading h2 {
        font-size: 27px;
    }

    .final-call-summary-saas-intro {
        padding: 30px 24px;
    }

    .final-call-summary-saas-intro p {
        font-size: 18px;
    }

    .final-call-summary-saas-content {
        padding: 28px 22px;
    }

    .final-call-summary-saas-takeaway {
        grid-template-columns: 44px 1fr;
        padding: 22px;
    }

    .final-call-summary-saas-arrow {
        display: none;
    }


}

@media (max-width: 480px) {


    .final-call-summary-saas-heading h2 {
        font-size: 23px;
    }

    .final-call-summary-saas-label {
        font-size: 9px;
    }

    .final-call-summary-saas-content-block {
        grid-template-columns: 30px 1fr;
        gap: 13px;
    }

    .final-call-summary-saas-number {
        width: 29px;
        height: 29px;
    }

    .final-call-summary-saas-content-block h3 {
        font-size: 16px;
    }

    .final-call-summary-saas-content-block p,
    .final-call-summary-saas-takeaway-content p {
        font-size: 12.5px;
    }

    .final-call-summary-saas-mini {
        gap: 6px;
    }


}






/* =========================================================
   SMART WORKFLOW SECTION
========================================================= */

.smart-workflow-section {
    position: relative;

    width: 100%;

    /*
     * IMPORTANT:
     * Fixed navbar ke liye safe top spacing
     */
    padding: 140px 0 100px;

    background: #ffffff;

    overflow: hidden;

    /*
     * Workflow ko apni stacking layer do
     */
    isolation: isolate;

    z-index: 1;
}


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

.smart-workflow-heading {
    position: relative;

    max-width: 800px;

    margin: 0 auto 65px;

    text-align: center;

    z-index: 5;
}

.smart-workflow-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    padding: 8px 17px;

    border: 1px solid rgba(216, 82, 237, 0.25);

    border-radius: 50px;

    background: rgba(216, 82, 237, 0.06);

    color: #D852ED;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.smart-workflow-heading h2 {
    margin: 18px 0 15px;

    color: #172554;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 700;
}

.smart-workflow-heading h2 span {
    color: #D852ED;
}

.smart-workflow-heading p {
    max-width: 700px;

    margin: 0 auto;

    color: #64748b;

    font-size: 16px;

    line-height: 1.8;
}


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

.smart-workflow-main {
    position: relative;

    width: 100%;

    overflow: hidden;
}


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

.smart-workflow-engine {
    position: relative;

    /*
     * Fixed dimensions only for desktop
     */
    width: 1050px;

    height: 820px;

    margin: 0 auto;

    /*
     * Prevent anything from escaping
     */
    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   ORBITS
========================================================= */

.workflow-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

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

    pointer-events: none;

    z-index: 1;
}


/* Outer */

.workflow-orbit-outer {
    width: 680px;
    height: 680px;

    border: 1px dashed rgba(216, 82, 237, 0.16);

    animation:
        workflowOrbit 32s linear infinite;
}


/* Middle */

.workflow-orbit-middle {
    width: 530px;
    height: 530px;

    border: 1px dashed rgba(216, 82, 237, 0.23);

    animation:
        workflowOrbitReverse 24s linear infinite;
}


/* Inner */

.workflow-orbit-inner {
    width: 390px;
    height: 390px;

    border: 1px dotted rgba(216, 82, 237, 0.28);

    animation:
        workflowOrbit 17s linear infinite;
}


/* =========================================================
   ORBIT DOTS
========================================================= */

.workflow-orbit-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #D852ED;

    box-shadow:
        0 0 0 5px rgba(216, 82, 237, 0.07),
        0 0 15px rgba(216, 82, 237, 0.50);
}


/* Outer */

.dot-1 {
    top: -4px;
    left: 50%;
}

.dot-2 {
    top: 25%;
    right: 7%;
}

.dot-3 {
    right: 13%;
    bottom: 10%;
}

.dot-4 {
    left: 10%;
    bottom: 18%;
}


/* Middle */

.dot-5 {
    top: 8%;
    right: 18%;
}

.dot-6 {
    top: 47%;
    left: 4%;
}

.dot-7 {
    right: 12%;
    bottom: 8%;
}


/* Inner */

.dot-8 {
    top: 50%;
    right: -4px;
}

.dot-9 {
    bottom: 8%;
    left: 30%;
}


/* =========================================================
   CENTER AI DIALER
========================================================= */

.smart-workflow-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 235px;
    height: 235px;

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

    z-index: 10;
}


/* Glow */

.workflow-core-glow {
    position: absolute;

    inset: -35px;

    border-radius: 50%;

    background: rgba(216, 82, 237, 0.11);

    filter: blur(30px);

    animation:
        workflowCoreGlow 3s ease-in-out infinite;
}


/* Core */

.workflow-core-circle {
    position: relative;

    width: 235px;
    height: 235px;

    display: flex;

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

    flex-direction: column;

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 25%,
            #ffffff 0%,
            #fbf1ff 58%,
            #f2dcfa 100%);

    border: 1px solid rgba(216, 82, 237, 0.30);

    box-shadow:
        0 25px 65px rgba(216, 82, 237, 0.18),
        inset 0 0 40px rgba(216, 82, 237, 0.06);
}


/* Rotating ring */

.workflow-core-circle::before {
    content: "";

    position: absolute;

    inset: -11px;

    border-radius: 50%;

    border: 1px solid rgba(216, 82, 237, 0.16);

    border-top-color: #D852ED;

    animation:
        workflowOrbit 8s linear infinite;
}


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

.workflow-core-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 16px;

    background: #D852ED;

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(216, 82, 237, 0.30);
}

.workflow-core-icon i {
    font-size: 21px;
}


/* =========================================================
   WAVEFORM
========================================================= */

.workflow-wave {
    display: flex;

    align-items: center;

    gap: 3px;

    height: 25px;

    margin: 9px 0 7px;
}

.workflow-wave span {
    width: 3px;

    border-radius: 10px;

    background: #D852ED;

    animation:
        workflowWave .8s ease-in-out infinite alternate;
}

.workflow-wave span:nth-child(1) {
    height: 7px;
}

.workflow-wave span:nth-child(2) {
    height: 14px;
    animation-delay: .1s;
}

.workflow-wave span:nth-child(3) {
    height: 21px;
    animation-delay: .2s;
}

.workflow-wave span:nth-child(4) {
    height: 13px;
    animation-delay: .3s;
}

.workflow-wave span:nth-child(5) {
    height: 25px;
    animation-delay: .4s;
}

.workflow-wave span:nth-child(6) {
    height: 17px;
    animation-delay: .3s;
}

.workflow-wave span:nth-child(7) {
    height: 22px;
    animation-delay: .2s;
}

.workflow-wave span:nth-child(8) {
    height: 12px;
    animation-delay: .1s;
}

.workflow-wave span:nth-child(9) {
    height: 6px;
}


/* =========================================================
   CORE TEXT
========================================================= */

.workflow-core-circle strong {
    color: #172554;

    font-size: 24px;

    line-height: 1;
}

.workflow-core-circle small {
    margin-top: 3px;

    color: #D852ED;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;
}


/* Active */

.workflow-active {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 10px;

    color: #64748b;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}

.workflow-active span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #D852ED;

    animation:
        workflowStatus 1.5s infinite;
}


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

.smart-workflow-node {
    position: absolute;

    width: 235px;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(216, 82, 237, 0.14);

    box-shadow:
        0 12px 35px rgba(23, 37, 84, 0.07);

    backdrop-filter: blur(10px);

    z-index: 20;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* Hover */

.smart-workflow-node:hover {
    transform: translateY(-7px);

    border-color:
        rgba(216, 82, 237, 0.40);

    box-shadow:
        0 20px 45px rgba(216, 82, 237, 0.15);
}


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

.workflow-node-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 14px;

    background:
        linear-gradient(145deg,
            #ffffff,
            #f8e9ff);

    border: 1px solid rgba(216, 82, 237, 0.15);

    color: #D852ED;
}

.workflow-node-icon i {
    font-size: 19px;
}


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

.workflow-step {
    display: block;

    margin-bottom: 2px;

    color: #D852ED;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.workflow-node-content h4 {
    margin: 0 0 4px;

    color: #172554;

    font-size: 14px;

    font-weight: 700;
}

.workflow-node-content p {
    margin: 0;

    color: #64748b;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   CARD POSITIONS
========================================================= */

/*
 * IMPORTANT:
 * Cards ko engine ke andar hi rakha gaya hai.
 */


/* 01 - TOP */

.workflow-node-1 {
    top: 15px;
    left: 407px;
}


/* 02 - LEFT TOP */

.workflow-node-2 {
    top: 185px;
    left: 10px;
}


/* 03 - LEFT BOTTOM */

.workflow-node-3 {
    bottom: 105px;
    left: 35px;
}


/* 04 - BOTTOM */

.workflow-node-4 {
    bottom: 15px;
    left: 407px;
}


/* 05 - RIGHT BOTTOM */

.workflow-node-5 {
    right: 35px;
    bottom: 105px;
}


/* 06 - RIGHT TOP */

.workflow-node-6 {
    top: 185px;
    right: 10px;
}


/* =========================================================
   SIGNAL LINES
========================================================= */

.workflow-signal {
    position: absolute;

    z-index: 5;

    opacity: .65;
}


/* Top */

.workflow-signal-top {
    width: 1px;
    height: 90px;

    top: 110px;
    left: 50%;

    background:
        linear-gradient(to bottom,
            transparent,
            rgba(216, 82, 237, .45),
            transparent);
}


/* Bottom */

.workflow-signal-bottom {
    width: 1px;
    height: 90px;

    bottom: 110px;
    left: 50%;

    background:
        linear-gradient(to bottom,
            transparent,
            rgba(216, 82, 237, .45),
            transparent);
}


/* Left */

.workflow-signal-left {
    width: 90px;
    height: 1px;

    top: 50%;
    left: 155px;

    background:
        linear-gradient(to right,
            transparent,
            rgba(216, 82, 237, .45),
            transparent);
}


/* Right */

.workflow-signal-right {
    width: 90px;
    height: 1px;

    top: 50%;
    right: 155px;

    background:
        linear-gradient(to left,
            transparent,
            rgba(216, 82, 237, .45),
            transparent);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes workflowOrbit {

    from {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

}


@keyframes workflowOrbitReverse {

    from {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }

}


@keyframes workflowCoreGlow {

    0%,
    100% {
        transform: scale(.90);
        opacity: .5;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes workflowWave {

    from {
        transform: scaleY(.4);
    }

    to {
        transform: scaleY(1);
    }

}


@keyframes workflowStatus {

    0% {
        box-shadow:
            0 0 0 0 rgba(216, 82, 237, .30);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(216, 82, 237, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(216, 82, 237, 0);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

    .smart-workflow-engine {

        width: 950px;

        height: 760px;

    }


    .workflow-orbit-outer {
        width: 620px;
        height: 620px;
    }

    .workflow-orbit-middle {
        width: 490px;
        height: 490px;
    }

    .workflow-orbit-inner {
        width: 360px;
        height: 360px;
    }


    .smart-workflow-node {
        width: 215px;
    }


    .workflow-node-1,
    .workflow-node-4 {
        left: 367px;
    }


    .workflow-node-2 {
        left: 0;
    }

    .workflow-node-6 {
        right: 0;
    }


    .workflow-node-3 {
        left: 15px;
    }

    .workflow-node-5 {
        right: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .smart-workflow-section {

        /*
         * Mobile navbar ke liye
         * extra safe space
         */
        padding:
            100px 15px 70px;

    }


    .smart-workflow-heading {

        margin-bottom: 45px;

    }


    .smart-workflow-heading h2 {

        font-size: 30px;

    }


    .smart-workflow-heading p {

        font-size: 14px;

    }


    /* ============================
       MOBILE ENGINE
    ============================ */

    .smart-workflow-engine {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 18px;

        overflow: visible;

    }


    /* Hide orbit */

    .workflow-orbit,
    .workflow-signal {

        display: none;

    }


    /* ============================
       CENTER
    ============================ */

    .smart-workflow-core {

        position: relative;

        top: auto;
        left: auto;

        width: 190px;
        height: 190px;

        transform: none;

        margin-bottom: 25px;

    }


    .workflow-core-circle {

        width: 190px;
        height: 190px;

    }


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

    .smart-workflow-node {

        position: relative;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100%;

        max-width: 390px;

        min-height: 80px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .smart-workflow-section {

        padding-top: 90px;

    }


    .smart-workflow-heading h2 {

        font-size: 27px;

    }


    .smart-workflow-eyebrow {

        font-size: 10px;

    }


    .smart-workflow-node {

        padding: 13px;

    }


    .workflow-node-icon {

        width: 44px;
        height: 44px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .workflow-orbit,
    .workflow-core-glow,
    .workflow-core-circle::before,
    .workflow-wave span,
    .workflow-active span {

        animation: none;

    }

}



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

.saas-contact-hero {
    padding: 55px 0 70px;
    background: #f8f7fa;
    overflow: hidden;
}

.saas-contact-hero-grid {
    min-height: 400px;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 40px;
}

.saas-contact-hero-content {
    max-width: 620px;
}

.saas-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 20px;
    border-radius: 30px;
    background: rgba(216, 82, 237, 0.08);
    border: 1px solid rgba(216, 82, 237, 0.18);
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.saas-contact-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
}

.saas-contact-hero-content h1 {
    margin: 0 0 20px;
    color: #242229;
    font-size: 55px;
    line-height: 1.1;
    font-weight: 700;
}

.saas-contact-hero-content h1 span {
    color: #D852ED;
}

.saas-contact-hero-content>p {
    max-width: 570px;
    margin: 0;
    color: #68636d;
    font-size: 16px;
    line-height: 1.85;
}

.saas-contact-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 27px;
}

.saas-contact-hero-points div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4d4852;
    font-size: 12px;
    font-weight: 600;
}

.saas-contact-hero-points i {
    color: #D852ED;
    font-size: 13px;
}

.saas-contact-hero-image {
    position: relative;
    min-height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saas-contact-hero-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 950px;
    height: auto;
    object-fit: contain;
}

.saas-contact-image-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.08);
    filter: blur(5px);
}

/* =========================================================
MAIN CONTACT SECTION
========================================================= */

.saas-contact-section {
    padding: 85px 0;
    background: #ffffff;
}

.saas-contact-heading {
    margin-bottom: 42px;
}

.saas-contact-heading>span,
.saas-contact-info-title>span {
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.saas-contact-heading h2 {
    margin: 9px 0 10px;
    color: #25222a;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
}

.saas-contact-heading p {
    margin: 0;
    color: #706a74;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
FORM + INFO GRID
========================================================= */

.saas-contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 30px;
    align-items: start;
}

/* =========================================================
FORM CARD
========================================================= */

.saas-contact-form-card {
    padding: 34px;
    border: 1px solid #ebe7ed;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(40, 25, 50, 0.05);
}

.saas-contact-form-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eeeaf0;
}

.saas-contact-form-top span {
    color: #99929e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.saas-contact-form-top h3 {
    margin: 7px 0 0;
    color: #29262e;
    font-size: 22px;
    font-weight: 700;
}

.saas-contact-form-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.1);
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* =========================================================
FORM
========================================================= */

.saas-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.saas-contact-field {
    margin-bottom: 18px;
}

.saas-contact-field label {
    display: block;
    margin-bottom: 7px;
    color: #45414a;
    font-size: 12px;
    font-weight: 600;
}

.saas-contact-input {
    position: relative;
}

.saas-contact-input>i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #aaa3ae;
    font-size: 14px;
}

.saas-contact-input input,
.saas-contact-input textarea {
    width: 100%;
    margin: 0;
    padding: 13px 15px 13px 43px;
    border: 1px solid #e7e2e9;
    border-radius: 11px;
    outline: none;
    background: #fcfbfd;
    color: #37333c;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.25s ease;
}

.saas-contact-input textarea {
    min-height: 145px;
    padding-top: 14px;
    resize: vertical;
}

.saas-contact-textarea>i {
    top: 18px;
    transform: none;
}

.saas-contact-input input::placeholder,
.saas-contact-input textarea::placeholder {
    color: #aaa5ae;
}

.saas-contact-input input:focus,
.saas-contact-input textarea:focus {
    border-color: rgba(216, 82, 237, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(216, 82, 237, 0.07);
}

.saas-contact-input input:focus+*,
.saas-contact-input:focus-within>i {
    color: #D852ED;
}

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

.saas-contact-submit {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 11px;
    background: #D852ED;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.saas-contact-submit i {
    margin-left: 8px;
    transition: transform 0.25s ease;
}

.saas-contact-submit:hover {
    background: #c744dc;
    box-shadow: 0 10px 25px rgba(216, 82, 237, 0.22);
}

.saas-contact-submit:hover i {
    transform: translateX(4px);
}

/* =========================================================
CONTACT INFO
========================================================= */

.saas-contact-info-wrapper {
    padding: 8px 0;
}

.saas-contact-info-title {
    margin-bottom: 20px;
}

.saas-contact-info-title h3 {
    margin: 7px 0 0;
    color: #29262e;
    font-size: 24px;
    font-weight: 700;
}

.saas-contact-info-card {
    display: flex;
    gap: 16px;
    padding: 22px;
    margin-bottom: 13px;
    border: 1px solid #ebe7ed;
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.25s ease;
}

.saas-contact-info-card:hover {
    transform: translateX(4px);
    border-color: rgba(216, 82, 237, 0.28);
    box-shadow: 0 10px 28px rgba(40, 25, 50, 0.05);
}

.saas-contact-info-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 11px;
    background: #f7eafa;
    color: #D852ED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.saas-contact-info-card span {
    display: block;
    margin-bottom: 5px;
    color: #aaa3ad;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.saas-contact-info-card h4 {
    margin: 0 0 5px;
    color: #302c35;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

.saas-contact-info-card h4 a {
    color: inherit;
    text-decoration: none;
}

.saas-contact-info-card h4 a:hover {
    color: #D852ED;
}

.saas-contact-info-card p {
    margin: 0;
    color: #77717b;
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
AVAILABILITY
========================================================= */

.saas-contact-availability {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 17px;
    padding: 15px 18px;
    border-radius: 13px;
    background: #f8f7fa;
}

.saas-contact-online-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #54c779;
    box-shadow: 0 0 0 4px rgba(84, 199, 121, 0.1);
}

.saas-contact-availability strong {
    display: block;
    color: #3d3941;
    font-size: 12px;
}

.saas-contact-availability small {
    display: block;
    margin-top: 3px;
    color: #85808a;
    font-size: 10px;
}

/* =========================================================
MAP
========================================================= */

.saas-contact-map {
    position: relative;
    margin-top: 35px;
    height: 450px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #ebe7ed;
    box-shadow: 0 15px 40px rgba(40, 25, 50, 0.05);
}

.saas-contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.saas-contact-map-label {
    position: absolute;
    z-index: 5;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 30px;
    background: #ffffff;
    color: #39343e;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.saas-contact-map-label i {
    color: #D852ED;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {


    .saas-contact-hero {
        padding: 50px 20px 60px;
    }

    .saas-contact-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .saas-contact-hero-content {
        max-width: 700px;
        margin: auto;
    }

    .saas-contact-hero-content>p {
        margin: auto;
    }

    .saas-contact-hero-points {
        justify-content: center;
    }

    .saas-contact-hero-image {
        min-height: 300px;
    }

    .saas-contact-grid {
        grid-template-columns: 1fr;
    }

    .saas-contact-info-wrapper {
        padding-top: 15px;
    }


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


    .saas-contact-hero {
        padding: 45px 15px 50px;
    }

    .saas-contact-hero-content h1 {
        font-size: 42px;
    }

    .saas-contact-hero-content>p {
        font-size: 14px;
    }

    .saas-contact-hero-points {
        gap: 12px;
    }

    .saas-contact-hero-image {
        min-height: 240px;
    }

    .saas-contact-section {
        padding: 60px 15px;
    }

    .saas-contact-heading h2 {
        font-size: 29px;
    }

    .saas-contact-form-card {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .saas-contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .saas-contact-map {
        height: 350px;
        border-radius: 16px;
    }


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .saas-contact-hero-content h1 {
        font-size: 35px;
    }

    .saas-contact-eyebrow {
        font-size: 9px;
    }

    .saas-contact-hero-points {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
    }

    .saas-contact-hero-points div {
        justify-content: center;
    }

    .saas-contact-heading h2 {
        font-size: 25px;
    }

    .saas-contact-form-top h3 {
        font-size: 19px;
    }

    .saas-contact-info-card {
        padding: 18px;
    }

    .saas-contact-map {
        height: 300px;
    }


}







/* =========================================================
SMART AI DIALER WORKFLOW
========================================================= */

.aiw-workflow-section {
    position: relative;
    padding: 95px 0 105px;
    background: #fbf9fc;
    overflow: hidden;
}

.aiw-workflow-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -220px;
    right: -180px;
    border: 1px solid rgba(216, 82, 237, 0.08);
    border-radius: 50%;
}

.aiw-workflow-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    bottom: -170px;
    left: -140px;
    border: 1px solid rgba(216, 82, 237, 0.07);
    border-radius: 50%;
}

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

.aiw-section-header {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}

.aiw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 50px;
    background: rgba(216, 82, 237, 0.07);
    color: #D852ED;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.aiw-eyebrow i {
    font-size: 11px;
}

.aiw-section-header h2 {
    margin: 0;
    color: #252129;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 700;
}

.aiw-section-header h2 span {
    color: #D852ED;
}

.aiw-section-header p {
    max-width: 700px;
    margin: 19px auto 0;
    color: #706b74;
    font-size: 15px;
    line-height: 1.85;
}

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

.aiw-workflow-board {
    position: relative;
    z-index: 2;
    padding: 34px;
    border: 1px solid #e9e4eb;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(40, 25, 50, 0.06);

    transition: all 0.3s ease;
}

.aiw-workflow-board:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 35px rgba(216, 82, 237, 0.16);
    transform: translateY(-5px);
}

.aiw-board-label {
    display: flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-bottom: 30px;
    color: #817a85;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.aiw-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.10);
}

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

.aiw-workflow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr) 45px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
}

.aiw-workflow-second {
    margin-top: 22px;
}

/* =========================================================
STEP
========================================================= */

.aiw-step {
    position: relative;
    min-height: 205px;
    padding: 23px 20px;
    border: 1px solid #ebe7ed;
    border-radius: 17px;
    background: #fcfbfd;
    transition: all 0.3s ease;
}

.aiw-step:hover {
    transform: translateY(-5px);
    border-color: #D852ED;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(216, 82, 237, 0.08);
}

.aiw-step-active {
    border-color: #D852ED;
    background: linear-gradient(145deg,
            #ffffff 0%,
            #fcf4fe 100%);
    box-shadow: 0 15px 35px rgba(216, 82, 237, 0.08);
}

/* =========================================================
STEP NUMBER
========================================================= */

.aiw-step-number {
    position: absolute;
    top: 15px;
    right: 17px;
    color: #d6d0d8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.aiw-step-active .aiw-step-number {
    color: #D852ED;
}

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

.aiw-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(216, 82, 237, 0.09);
    color: #D852ED;
    font-size: 16px;
}

.aiw-step-content span {
    display: block;
    margin-bottom: 7px;
    color: #a19aa5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

.aiw-step-content h3 {
    margin: 0 0 9px;
    color: #312d35;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.aiw-step-content p {
    margin: 0;
    color: #85808a;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================================
CONNECTORS
========================================================= */

.aiw-connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiw-connector span {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #e2dce5;
}

.aiw-connector i {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5dfe8;
    border-radius: 50%;
    background: #ffffff;
    color: #D852ED;
    font-size: 9px;
}

/* =========================================================
FINAL FOLLOW-UP STEP
========================================================= */

.aiw-final-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 22px 25px;
    border-radius: 17px;
    background: #27232b;
    overflow: hidden;
}

.aiw-final-step::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -120px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50%;
}

.aiw-final-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(216, 82, 237, 0.14);
    color: #D852ED;
    font-size: 17px;
}

.aiw-final-content {
    position: relative;
    z-index: 1;
}

.aiw-final-content span {
    display: block;
    margin-bottom: 5px;
    color: #a79fa9;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.aiw-final-content h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.aiw-final-content p {
    margin: 0;
    color: #aaa3ad;
    font-size: 11px;
    line-height: 1.6;
}

.aiw-final-status {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    color: #dca0e8;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.aiw-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #D852ED;
}

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

.aiw-bottom-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    max-width: 850px;
    margin: 38px auto 0;
}

.aiw-bottom-line {
    width: 3px;
    min-height: 70px;
    flex: 0 0 3px;
    border-radius: 5px;
    background: #D852ED;
}

.aiw-bottom-text>span {
    display: block;
    margin-bottom: 8px;
    color: #D852ED;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.aiw-bottom-text p {
    margin: 0;
    color: #706a74;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {


    .aiw-workflow-section {
        padding: 75px 0 85px;
    }

    .aiw-section-header h2 {
        font-size: 36px;
    }

    .aiw-workflow-board {
        padding: 25px;
    }

    .aiw-workflow {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .aiw-connector {
        height: 30px;
    }

    .aiw-connector span {
        width: 1px;
        height: 100%;
    }

    .aiw-connector i {
        transform: rotate(90deg);
    }

    .aiw-workflow-second {
        margin-top: 14px;
    }


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


    .aiw-workflow-section {
        padding: 60px 15px 70px;
    }

    .aiw-section-header {
        margin-bottom: 35px;
    }

    .aiw-section-header h2 {
        font-size: 29px;
    }

    .aiw-section-header p {
        font-size: 13px;
    }

    .aiw-workflow-board {
        padding: 18px;
        border-radius: 18px;
    }

    .aiw-board-label {
        margin-bottom: 20px;
    }

    .aiw-step {
        min-height: auto;
        padding: 20px;
    }

    .aiw-final-step {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 20px;
    }

    .aiw-final-status {
        width: 100%;
        margin-left: 66px;
    }

    .aiw-bottom-content {
        gap: 14px;
        margin-top: 30px;
    }

    .aiw-bottom-text p {
        font-size: 12px;
    }


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .aiw-section-header h2 {
        font-size: 25px;
    }

    .aiw-eyebrow {
        font-size: 8px;
    }

    .aiw-step-content h3 {
        font-size: 14px;
    }

    .aiw-final-status {
        margin-left: 0;
    }


}




/* =========================================================
MORE MEANINGFUL CONVERSATIONS
HOMEPAGE SAAS DESIGN
========================================================= */

.mcv-section {
    position: relative;
    padding: 100px 0 105px;
    /* background: #f9f8fb; */
    overflow: hidden;
}

.mcv-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -300px;
    right: -220px;
    border: 1px solid rgba(216, 82, 237, 0.07);
    border-radius: 50%;
}

.mcv-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -240px;
    left: -200px;
    border: 1px solid rgba(216, 82, 237, 0.06);
    border-radius: 50%;
}

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

.mcv-heading {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.mcv-heading-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    margin-bottom: 18px;
    border: 1px solid rgba(216, 82, 237, 0.2);
    border-radius: 40px;
    background: rgba(216, 82, 237, 0.06);
    color: #D852ED;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.mcv-heading-tag span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D852ED;
    box-shadow: 0 0 0 4px rgba(216, 82, 237, 0.1);
}

.mcv-heading h2 {
    margin: 0;
    color: #25212a;
    font-size: 43px;
    line-height: 1.18;
    font-weight: 700;
}

.mcv-heading h2 strong {
    color: #D852ED;
    font-weight: 700;
}

.mcv-heading p {
    max-width: 700px;
    margin: 18px auto 0;
    color: #716b75;
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================================
MAIN VISUAL
========================================================= */

.mcv-visual {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 55px 1.15fr 55px 1fr;
    align-items: center;
    gap: 0;
}

/* =========================================================
LEFT VOLUME PANEL
========================================================= */

.mcv-volume-panel,
.mcv-value-panel {
    position: relative;
    min-height: 355px;
    padding: 28px;
    border: 1px solid #e8e3ea;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(45, 25, 50, 0.045);

    transition: all 0.3s ease;
}

.mcv-volume-panel,
.mcv-value-panel:hover {
    border-color: #D852ED;
    box-shadow: 0 12px 35px rgba(216, 82, 237, 0.16);
    transform: translateY(-5px);
}

.mcv-volume-panel {
    overflow: hidden;
}

.mcv-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mcv-panel-top span {
    color: #a29ba5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.mcv-panel-top i {
    color: #aaa3ad;
    font-size: 14px;
}

.mcv-volume-panel h3,
.mcv-value-panel h3 {
    margin: 15px 0 8px;
    color: #332e37;
    font-size: 20px;
    font-weight: 700;
}

.mcv-big-number {
    color: #3a3540;
    font-size: 58px;
    line-height: 1;
    font-weight: 700;
}

.mcv-big-number small {
    margin-left: 4px;
    color: #aaa3ad;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* =========================================================
CALL BARS
========================================================= */

.mcv-call-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 85px;
    margin: 28px 0 20px;
    padding-bottom: 1px;
    border-bottom: 1px solid #e9e4eb;
}

.mcv-call-bars span {
    flex: 1;
    min-width: 5px;
    border-radius: 4px 4px 0 0;
    background: #e8e3e9;
    transition: all 0.3s ease;
}

.mcv-volume-panel:hover .mcv-call-bars span:nth-child(2),
.mcv-volume-panel:hover .mcv-call-bars span:nth-child(5),
.mcv-volume-panel:hover .mcv-call-bars span:nth-child(8) {
    background: #D852ED;
}

.mcv-volume-panel p {
    margin: 0;
    color: #88818c;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================================
TRANSITION
========================================================= */

.mcv-transition {
    position: relative;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcv-transition-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #ded8e1;
}

.mcv-transition-icon {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1dbe4;
    border-radius: 50%;
    background: #ffffff;
    color: #D852ED;
    font-size: 10px;
}

.mcv-transition>span {
    position: absolute;
    top: calc(50% + 27px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #a39ca6;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* =========================================================
AI INTELLIGENCE CENTER
========================================================= */

.mcv-intelligence {
    position: relative;
    min-height: 410px;
    padding: 35px 28px;
    border-radius: 25px;
    background: #28242c;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(35, 25, 40, 0.13);
}

.mcv-intelligence::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -145px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50%;
}

.mcv-intelligence::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    bottom: -130px;
    right: -90px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 50%;
}

/* =========================================================
AI RING
========================================================= */

.mcv-ai-ring {
    position: relative;
    z-index: 2;
    width: 105px;
    height: 105px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 0 12px rgba(216, 82, 237, 0.035),
        0 0 0 24px rgba(216, 82, 237, 0.025);
}

.mcv-ai-core {
    width: 63px;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.14);
    color: #D852ED;
    font-size: 25px;
}

.mcv-ai-label {
    position: relative;
    z-index: 2;
    color: #a9a1ad;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.mcv-intelligence h3 {
    position: relative;
    z-index: 2;
    max-width: 260px;
    margin: 12px auto 22px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 600;
}

.mcv-intelligence h3 em {
    color: #D852ED;
    font-style: normal;
}

/* =========================================================
AI SIGNALS
========================================================= */

.mcv-ai-signals {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mcv-ai-signals span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: #b9b2bc;
    font-size: 8px;
    text-align: left;
}

.mcv-ai-signals i {
    color: #D852ED;
    font-size: 9px;
}

/* =========================================================
RIGHT VALUE PANEL
========================================================= */

.mcv-value-panel {
    background: #ffffff;
}

.mcv-value-score {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 27px;
}

.mcv-score-circle {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 50%;
    background: #fdf7fe;
}

.mcv-score-circle strong {
    color: #D852ED;
    font-size: 29px;
    line-height: 1;
}

.mcv-score-circle small {
    margin-top: 5px;
    color: #a49ca7;
    font-size: 7px;
    font-weight: 700;
}

.mcv-score-text span {
    display: block;
    margin-bottom: 5px;
    color: #a39ba6;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
}

.mcv-score-text strong {
    display: block;
    color: #36313a;
    font-size: 13px;
}

.mcv-score-text p {
    margin: 6px 0 0;
    color: #85808a;
    font-size: 9px;
    line-height: 1.5;
}

/* =========================================================
OUTCOME LIST
========================================================= */

.mcv-outcome-list {
    margin-top: 27px;
    padding-top: 20px;
    border-top: 1px solid #ebe6ed;
}

.mcv-outcome-list div {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: #625c66;
    font-size: 10px;
}

.mcv-outcome-list div:last-child {
    margin-bottom: 0;
}

.mcv-outcome-list i {
    color: #D852ED;
    font-size: 10px;
}

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

.mcv-content {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 18px;
    max-width: 900px;
    margin: 45px auto 0;
}

.mcv-content-line {
    width: 3px;
    flex: 0 0 3px;
    border-radius: 5px;
    background: #D852ED;
}

.mcv-content-text p {
    margin: 0 0 13px;
    color: #6e6872;
    font-size: 13px;
    line-height: 1.85;
}

.mcv-content-text p:last-child {
    margin-bottom: 0;
}

.mcv-content-text strong {
    color: #37323b;
    font-weight: 600;
}

/* =========================================================
BOTTOM MESSAGE
========================================================= */

.mcv-bottom-message {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 900px;
    margin: 28px auto 0;
    padding: 19px 22px;
    border: 1px solid rgba(216, 82, 237, 0.18);
    border-radius: 15px;
    background: rgba(216, 82, 237, 0.045);
}

.mcv-bottom-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ffffff;
    color: #D852ED;
    box-shadow: 0 5px 15px rgba(216, 82, 237, 0.08);
}

.mcv-bottom-message span {
    display: block;
    margin-bottom: 5px;
    color: #D852ED;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.mcv-bottom-message strong {
    color: #37323b;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {


    .mcv-visual {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mcv-transition {
        height: 35px;
    }

    .mcv-transition-line {
        width: 1px;
        height: 100%;
        left: 50%;
        right: auto;
    }

    .mcv-transition-icon {
        transform: rotate(90deg);
    }

    .mcv-transition>span {
        top: 50%;
        left: calc(50% + 28px);
        transform: translateY(-50%);
    }

    .mcv-volume-panel,
    .mcv-value-panel {
        min-height: auto;
    }

    .mcv-intelligence {
        min-height: 360px;
    }


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


    .mcv-section {
        padding: 65px 15px 75px;
    }

    .mcv-heading {
        margin-bottom: 38px;
    }

    .mcv-heading h2 {
        font-size: 29px;
    }

    .mcv-heading p {
        font-size: 13px;
    }

    .mcv-volume-panel,
    .mcv-value-panel,
    .mcv-intelligence {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .mcv-big-number {
        font-size: 50px;
    }

    .mcv-intelligence h3 {
        font-size: 19px;
    }

    .mcv-content {
        margin-top: 35px;
    }

    .mcv-content-text p {
        font-size: 12px;
    }


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .mcv-heading h2 {
        font-size: 25px;
    }

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

    .mcv-value-score {
        align-items: flex-start;
    }

    .mcv-bottom-message {
        align-items: flex-start;
    }


}




css
/* =========================================
   NEXT STAGE OF SMART AI CALLING
========================================= */

.next-stage-ai-section {
    position: relative;
    padding: 105px 0;
    background: #faf8fc;
    overflow: hidden;
}

.next-stage-ai-section::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.05);
    top: -220px;
    right: -180px;
}

.next-stage-ai-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.08);
    bottom: -180px;
    left: -130px;
}


/* Container */

.next-stage-ai-container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}


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

.next-stage-ai-header {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.next-stage-ai-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(216, 82, 237, 0.25);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.8);
    color: #a52dbb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.next-stage-ai-eyebrow i {
    font-size: 12px;
    color: #D852ED;
}

.next-stage-ai-header h2 {
    margin: 22px 0 15px;
    color: #17131b;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.next-stage-ai-header h2 span {
    color: #D852ED;
}

.next-stage-ai-header p {
    max-width: 650px;
    margin: 0 auto;
    color: #716b76;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   MAIN VISION
========================================= */

.next-stage-ai-vision {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: center;
    gap: 45px;
    min-height: 470px;
}


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

.next-stage-ai-intro {
    position: relative;
    padding: 35px 0;
}

.next-stage-ai-number {
    margin-bottom: 22px;
    color: #D852ED;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.next-stage-ai-intro h3,
.next-stage-ai-future h3 {
    margin: 0 0 20px;
    color: #1d1821;
    font-size: 29px;
    line-height: 1.3;
    font-weight: 700;
}

.next-stage-ai-intro h3 span {
    display: block;
    color: #D852ED;
}

.next-stage-ai-intro p {
    margin-bottom: 17px;
    color: #706a75;
    font-size: 15px;
    line-height: 1.8;
}

.next-stage-ai-intro strong {
    color: #302a34;
}


/* =========================================
   CENTER AI CORE
========================================= */

.next-stage-ai-core {
    position: relative;
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.next-stage-ai-core-circle {
    position: relative;
    z-index: 5;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #211a25;
    border: 8px solid #fff;
    box-shadow:
        0 0 0 1px rgba(216, 82, 237, 0.15),
        0 25px 70px rgba(40, 20, 45, 0.18);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.next-stage-ai-core-circle::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 1px solid rgba(216, 82, 237, 0.45);
}

.next-stage-ai-core-circle i {
    margin-bottom: 5px;
    color: #D852ED;
    font-size: 30px;
}

.next-stage-ai-core-circle strong {
    color: #fff;
    font-size: 31px;
    line-height: 1;
}

.next-stage-ai-core-circle small {
    margin-top: 9px;
    color: #cfc6d2;
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-align: center;
}


/* =========================================
   ORBITS
========================================= */

.next-stage-ai-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(216, 82, 237, 0.25);
}

.orbit-one {
    width: 285px;
    height: 285px;
}

.orbit-two {
    width: 395px;
    height: 395px;
    border-color: rgba(216, 82, 237, 0.12);
}


/* =========================================
   SIGNALS
========================================= */

.next-stage-ai-signal {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(216, 82, 237, 0.15);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(30, 20, 35, 0.08);
    color: #403845;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.next-stage-ai-signal i {
    color: #D852ED;
    font-size: 13px;
}

.signal-one {
    top: 45px;
    left: 4px;
}

.signal-two {
    top: 185px;
    right: -8px;
}

.signal-three {
    bottom: 45px;
    left: 22px;
}


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

.next-stage-ai-future {
    padding: 35px 0;
}

.next-stage-ai-label {
    display: block;
    margin-bottom: 15px;
    color: #9a929f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.next-stage-ai-future h3 {
    margin-bottom: 12px;
    font-size: 20px;
}

.next-stage-ai-question {
    color: #6f6873;
    font-size: 17px;
    line-height: 1.6;
    font-style: italic;
}

.next-stage-ai-divider {
    width: 45px;
    height: 2px;
    margin: 24px 0;
    background: #D852ED;
}

.next-stage-ai-future p {
    margin-bottom: 10px;
    color: #716a76;
    font-size: 14px;
}

.next-stage-ai-main-question {
    padding-left: 18px;
    border-left: 2px solid #D852ED;
    color: #27212b;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
}


/* =========================================
   CONCLUSION
========================================= */

.next-stage-ai-conclusion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 850px;
    margin: 60px auto 0;
    padding: 25px 30px;
    background: #211a25;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(30, 20, 35, 0.12);
}

.next-stage-ai-conclusion-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(216, 82, 237, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.next-stage-ai-conclusion-icon i {
    color: #D852ED;
    font-size: 17px;
}

.next-stage-ai-conclusion-text span {
    display: block;
    margin-bottom: 6px;
    color: #D852ED;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.next-stage-ai-conclusion-text p {
    margin: 0;
    color: #e7e1e9;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .next-stage-ai-section {
        padding: 80px 0;
    }

    .next-stage-ai-header {
        margin-bottom: 50px;
    }

    .next-stage-ai-header h2 {
        font-size: 40px;
    }

    .next-stage-ai-vision {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .next-stage-ai-core {
        grid-column: 1 / -1;
        grid-row: 1;
        height: 360px;
    }

    .next-stage-ai-intro {
        grid-column: 1;
        grid-row: 2;
    }

    .next-stage-ai-future {
        grid-column: 2;
        grid-row: 2;
    }

    .orbit-two {
        width: 340px;
        height: 340px;
    }

    .orbit-one {
        width: 250px;
        height: 250px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .next-stage-ai-section {
        padding: 65px 0;
    }

    .next-stage-ai-container {
        width: 92%;
    }

    .next-stage-ai-header {
        margin-bottom: 35px;
    }

    .next-stage-ai-header h2 {
        font-size: 32px;
        letter-spacing: -0.7px;
    }

    .next-stage-ai-header p {
        font-size: 15px;
        line-height: 1.7;
    }

    .next-stage-ai-vision {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .next-stage-ai-core {
        width: 100%;
        height: 330px;
        order: 1;
    }

    .next-stage-ai-intro {
        order: 2;
        padding: 15px 0;
    }

    .next-stage-ai-future {
        order: 3;
        padding: 15px 0;
    }

    .next-stage-ai-core-circle {
        width: 155px;
        height: 155px;
    }

    .next-stage-ai-core-circle strong {
        font-size: 27px;
    }

    .orbit-one {
        width: 230px;
        height: 230px;
    }

    .orbit-two {
        width: 300px;
        height: 300px;
    }

    .next-stage-ai-signal {
        padding: 8px 10px;
        font-size: 9px;
    }

    .signal-one {
        top: 30px;
        left: 0;
    }

    .signal-two {
        top: 145px;
        right: 0;
    }

    .signal-three {
        bottom: 25px;
        left: 5px;
    }

    .next-stage-ai-intro h3,
    .next-stage-ai-future h3 {
        font-size: 25px;
    }

    .next-stage-ai-main-question {
        font-size: 16px;
    }

    .next-stage-ai-conclusion {
        margin-top: 40px;
        padding: 22px;
        gap: 15px;
        align-items: flex-start;
    }

    .next-stage-ai-conclusion-text p {
        font-size: 14px;
    }

}




/* =========================================================
   AI DIALER POPUP
========================================================= */

.ai-dialer-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 99999;
}

.ai-dialer-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   POPUP BOX
========================================================= */

.ai-dialer-popup {
    position: relative;

    width: 100%;
    max-width: 950px;

    max-height: 90vh;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);

    transform: translateY(30px);
    transition: all 0.35s ease;
}

.ai-dialer-popup-overlay.active .ai-dialer-popup {
    transform: translateY(0);
}


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

.ai-dialer-popup-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    color: #333;

    font-size: 25px;
    line-height: 30px;

    cursor: pointer;

    z-index: 10;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);

    transition: all 0.3s ease;
}

.ai-dialer-popup-close:hover {
    background: #D852ED;
    color: #fff;
    transform: rotate(90deg);
}


/* =========================================================
   LEFT IMAGE - 6
========================================================= */

.ai-dialer-popup-image {
    position: relative;

    height: 100%;
    min-height: 580px;

    overflow: hidden;

    background: #f8f1fa;
}

.ai-dialer-popup-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* Image Overlay */

.ai-dialer-popup-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(25, 5, 30, 0.82),
            rgba(25, 5, 30, 0.15),
            rgba(25, 5, 30, 0));
}

.popup-ai-image {
    width: 460px;
    height: 690px;
    object-fit: cover;
    display: block;
}

/* Tablet + Mobile */
@media (max-width: 991px) {

    .ai-dialer-popup-image {
        display: none !important;
    }

    .popup-ai-image {
        display: none !important;
    }

}

/* Image Text */

.ai-dialer-popup-image-content {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 35px;

    z-index: 2;

    color: #fff;
}

.ai-dialer-popup-image-content span {
    display: inline-block;

    margin-bottom: 10px;

    color: #f0b5fa;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.ai-dialer-popup-image-content h2 {
    margin: 0 0 12px;

    color: #fff;

    font-size: 32px;
    line-height: 1.15;

    font-weight: 700;
}

.ai-dialer-popup-image-content p {
    margin: 0;

    max-width: 380px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   RIGHT FORM - 6
========================================================= */

.ai-dialer-popup-form-wrapper {
    height: 100%;

    padding: 45px 40px;

    background: #fff;

    overflow-y: auto;
}


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

.ai-dialer-popup-heading {
    margin-bottom: 25px;
}

.ai-dialer-popup-heading>span {
    display: inline-block;

    margin-bottom: 7px;

    color: #D852ED;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.ai-dialer-popup-heading h2 {
    margin: 0 0 10px;

    color: #222;

    font-size: 27px;
    line-height: 1.2;

    font-weight: 700;
}

.ai-dialer-popup-heading p {
    margin: 0;

    color: #777;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   FORM GROUP
========================================================= */

.ai-popup-form-group {
    margin-bottom: 15px;
}

.ai-popup-form-group label {
    display: block;

    margin-bottom: 6px;

    color: #333;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   INPUT
========================================================= */

.ai-popup-input {
    position: relative;
}

.ai-popup-input>i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #D852ED;

    font-size: 15px;

    z-index: 2;
}

.ai-popup-input input,
.ai-popup-input textarea {
    width: 100%;

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    background: #fafafa;

    color: #333;

    font-size: 13px;

    outline: none;

    transition: all 0.3s ease;
}

.ai-popup-input input {
    height: 44px;

    padding: 0 15px 0 42px;
}

.ai-popup-input textarea {
    min-height: 80px;

    padding: 12px 15px 12px 42px;

    resize: vertical;
}

.ai-popup-input input:focus,
.ai-popup-input textarea:focus {
    border-color: #D852ED;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(216, 82, 237, 0.08);
}

.ai-dialer-popup .ai-popup-textarea>i {
    top: 13px !important;
    transform: none !important;
}


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

.ai-popup-submit {
    width: 100%;

    height: 45px;

    margin-top: 5px;

    border: none;

    border-radius: 8px;

    background: #D852ED;

    color: #fff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.ai-popup-submit i {
    margin-left: 7px;
}

.ai-popup-submit:hover {
    background: #bd35d4;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(216, 82, 237, 0.25);
}


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

@media (max-width: 991px) {

    .ai-dialer-popup {
        max-width: 600px;

        max-height: 92vh;

        overflow-y: auto;
    }

    .ai-dialer-popup-image {
        min-height: 260px;

        height: 260px;
    }

    .ai-dialer-popup-form-wrapper {
        padding: 30px 28px;
    }

    .ai-dialer-popup-image-content {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }

    .ai-dialer-popup-image-content h2 {
        font-size: 26px;
    }
}


@media (max-width: 575px) {

    .ai-dialer-popup-overlay {
        padding: 12px;
    }

    .ai-dialer-popup {
        border-radius: 14px;
    }

    .ai-dialer-popup-image {
        min-height: 210px;

        height: 210px;
    }

    .ai-dialer-popup-image-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .ai-dialer-popup-image-content h2 {
        font-size: 22px;
    }

    .ai-dialer-popup-image-content p {
        display: none;
    }

    .ai-dialer-popup-form-wrapper {
        padding: 25px 20px;
    }

    .ai-dialer-popup-heading h2 {
        font-size: 23px;
    }

    .ai-dialer-popup-heading {
        margin-bottom: 20px;
    }

    .ai-popup-form-group {
        margin-bottom: 13px;
    }


}


.hero-stack-slider {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 560px;
    height: 460px;
    margin-left: auto;
    overflow: visible;
}


.hero-stack-slider img.hero-stack-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit: contain;
    object-position: center;

    opacity: 0;
    visibility: hidden;
    z-index: 0;

    filter: blur(5px);
    transform: translate(-50%, -50%) scale(0.72);

    transition:
        transform 0.8s ease,
        opacity 0.8s ease,
        filter 0.8s ease,
        visibility 0.8s ease;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;

    pointer-events: none;
}


.hero-stack-slider img.hero-stack-img.is-front {
    opacity: 1;
    visibility: visible;
    z-index: 10 !important;

    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


.hero-stack-slider img.hero-stack-img.is-back-left {
    opacity: 0.7;
    visibility: visible;
    z-index: 2 !important;

    filter: blur(5px);
    transform: translate(-72%, -47%) scale(0.76);

    box-shadow: none !important;
}


.hero-stack-slider img.hero-stack-img.is-back-right {
    opacity: 0.7;
    visibility: visible;
    z-index: 1 !important;

    filter: blur(5px);
    transform: translate(-28%, -47%) scale(0.76);

    box-shadow: none !important;
}


@media (max-width: 991px) {
    .hero-stack-slider {
        display: none !important;
    }
}