/* =========================================================
   INNOVARTIC SOLUTIONS SECTION
   ========================================================= */

.innovartic-solutions-section {
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
       font-family: 'Plus Jakarta Sans', sans-serif;
}

.innovartic-solutions-grid {
    display: grid;
    grid-template-columns: 560px 1fr;
    align-items: center;
    gap: 55px;
}


/* =========================================================
   LEFT MENU
   ========================================================= */

.innovartic-solutions-menu {
    background: #faf8fd;
    border-radius: 0 20px 20px 0;
    padding: 12px 18px;
    box-shadow: 0 8px 35px rgba(50, 30, 80, 0.04);
}

.solution-menu-item {
    width: 100%;
    min-height: 70px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    padding: 10px 22px;
    margin-bottom: 5px;

    display: flex;
    align-items: center;
    gap: 24px;

    text-align: left;

     font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;

    color: #353f4f;

    cursor: pointer;

    position: relative;

    transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;
}

.solution-menu-item:last-child {
    margin-bottom: 0;
}

.solution-menu-item:hover {
    background: #f74780;
    transform: translateX(3px);
}

.solution-menu-item.active {
    background: #f74780;
    color: #fff;
}

.solution-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;

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

    font-size: 28px;

    position: relative;
}

.sms-icon {
    color: #0879e8;
}

.whatsapp-symbol {
    width: 31px;
    height: 31px;

    border-radius: 50%;

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

    background: #20d463;
    color: white;

    font-size: 19px;
}

.solution-notification {
    position: absolute;

    left: 42px;
    top: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

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

    background: #f74780;
    color: #ffffff;

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

    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}


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

.innovartic-solution-content {
    min-height: 500px;

    display: flex;
    align-items: center;
}

.solution-panel {
    display: none;
    width: 100%;

    animation: solutionFade .45s ease;
}

.solution-panel.active {
    display: block;
}

@keyframes solutionFade {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}




.solution-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffff;
}

.whatsapp-symbol {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(37, 211, 102, 0.22);
}

.whatsapp-symbol svg {
    width: 23px;
    height: 23px;
    display: block;
}


/* =========================================================
   SMS VISUAL
   ========================================================= */

.solution-visual {
    height: 400px;

    position: relative;

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

.sms-phone {
    width: 250px;
    height: 400px;

    border-radius: 22px;

    background: #ffffff;

    border: 7px solid #eeeeee;

    box-shadow:
        0 20px 45px rgba(35, 20, 60, .16);

    overflow: hidden;

    position: relative;

    z-index: 2;
}

.sms-phone-header {
    height: 65px;

    background: #6677e8;
    color: #ffffff;

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

    padding: 0 15px;

    font-size: 11px;
}

.sms-phone-header strong {
    font-size: 11px;
}

.sms-phone-date {
    text-align: center;

    padding: 15px 5px 8px;

    font-size: 8px;
    color: #888;
}

.sms-message {
    margin: 0 10px;

    padding: 13px;

    border-radius: 8px;

    background: #f2f1f0;

    color: #353f4f;

    font-size: 9px;

    line-height: 1.5;
}

.sms-message strong {
    font-size: 10px;
}

.sms-message p {
    margin: 10px 0;
}

.sms-message a {
    color: #1677ff;
    text-decoration: underline;
}

.sms-message span {
    font-size: 8px;
}

.sms-input {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    height: 34px;

    border: 1px solid #ddd;
    border-radius: 20px;

    display: flex;
    align-items: center;

    color: #aaa;

    font-size: 9px;
}

.sms-input>span {
    width: 27px;
    height: 27px;

    margin-left: 3px;

    border-radius: 50%;

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

    background: #287ef5;
    color: #ffffff;

    font-size: 20px;
}

.sms-input div {
    padding-left: 8px;
}

.solution-person {
    position: absolute;

    right: 20px;
    bottom: 0;

    width: 220px;
    height: 320px;

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

    z-index: 1;
}

.person-circle {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: #f8e7f9;
}

.person-placeholder {
    position: relative;

    font-size: 150px;

    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, .08));
}


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

.solution-description {
    margin-top: 20px;

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

    gap: 30px;
}

/* .solution-description p {
    margin: 0;

    max-width: 330px;

  font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 15px;
    line-height: 1.65;

    color: #303030;
} */

.solution-explore {
    min-width: 115px;

    padding: 12px 22px;

    border-radius: 30px;

    background: #75218f;
    color: #ffffff !important;

    text-align: center;

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

    text-decoration: none !important;

    transition: all .25s ease;
}

.solution-explore:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(117, 33, 143, .25);
}

.solution-explore span {
    margin-left: 5px;
}


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

.solution-illustration {
    height: 400px;

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

    position: relative;
}


/* =========================================================
   VOICE
   ========================================================= */

.voice-illustration {
    background:
        radial-gradient(circle,
            #f5e8fa 0%,
            #ffffff 62%);
}

.big-solution-icon {
    width: 160px;
    height: 160px;

    border-radius: 50%;

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

    background: #eee1fa;

    font-size: 75px;

    box-shadow:
        0 20px 45px rgba(100, 50, 150, .15);
}

.floating-card {
    position: absolute;

    padding: 15px 22px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .10);

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.floating-card strong {
    font-size: 20px;
    color: #70208c;
}

.floating-card small {
    color: #777;
}

.card-one {
    top: 60px;
    left: 35px;
}

.card-two {
    right: 30px;
    bottom: 70px;
}


/* =========================================================
   CONTACT CENTER
   ========================================================= */

.dashboard-window {
    width: 420px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow: 0 25px 60px rgba(40, 30, 70, .14);

    overflow: hidden;
}

.dashboard-top {
    height: 38px;

    background: #f5f3f9;

    display: flex;
    align-items: center;

    gap: 6px;

    padding-left: 15px;
}

.dashboard-top span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #c8c3d0;
}

.dashboard-body {
    display: flex;

    min-height: 250px;
}

.dashboard-sidebar {
    width: 70px;

    background: #eee5f5;
}

.dashboard-main {
    padding: 25px;

    flex: 1;
}

.dashboard-title {
    font-weight: 700;
    font-size: 18px;

    color: #3d3150;

    margin-bottom: 20px;
}

.dashboard-cards {
    display: grid;

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

    gap: 10px;
}

.dashboard-cards>div {
    padding: 15px 8px;

    background: #faf8fc;

    border-radius: 9px;

    text-align: center;
}

.dashboard-cards strong {
    display: block;

    color: #70208c;

    font-size: 19px;
}

.dashboard-cards small {
    color: #888;

    font-size: 8px;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-illustration {
    background:
        radial-gradient(circle,
            #e8f9ef 0%,
            #ffffff 65%);
}

.whatsapp-phone {
    width: 260px;
    height: 390px;

    border-radius: 25px;

    background: #e9e3dc;

    border: 7px solid #eeeeee;

    overflow: hidden;

    box-shadow: 0 25px 55px rgba(0, 0, 0, .15);
}

.whatsapp-header {
    height: 58px;

    background: #25d366;

    color: #fff;

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

    padding: 0 15px;

    font-size: 12px;
}

.whatsapp-date {
    text-align: center;

    font-size: 8px;

    color: #777;

    padding: 15px 0;
}

.whatsapp-chat {
    width: 85%;

    margin-left: 10px;

    padding: 14px;

    background: #ffffff;

    border-radius: 10px;

    font-size: 10px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
}

.whatsapp-chat p {
    margin: 9px 0;
}

.whatsapp-chat a {
    display: block;

    padding: 8px;

    border-radius: 6px;

    background: #e8f8f5;

    color: #128c7e;

    text-align: center;

    text-decoration: none;
}

.whatsapp-bottom {
    position: relative;

    margin: 125px 8px 0;

    height: 35px;

    border-radius: 20px;

    background: #ffffff;

    display: flex;
    align-items: center;

    color: #aaa;

    font-size: 9px;
}

.whatsapp-bottom span {
    margin: 0 8px;

    font-size: 18px;

    color: #128c7e;
}


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

.ai-illustration {
    background:
        radial-gradient(circle,
            #e9edff,
            #ffffff 65%);
}

.ai-core {
    width: 140px;
    height: 140px;

    border-radius: 50%;

    background: #6b72ed;

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

    color: white;

    font-size: 60px;

    box-shadow:
        0 0 0 25px rgba(107, 114, 237, .08),
        0 20px 50px rgba(80, 70, 180, .25);

    position: relative;

    z-index: 2;
}

.ai-orbit {
    position: absolute;

    border: 1px dashed #aaaef5;

    border-radius: 50%;
}

.orbit-one {
    width: 250px;
    height: 180px;

    transform: rotate(20deg);
}

.orbit-two {
    width: 320px;
    height: 220px;

    transform: rotate(-25deg);
}

.ai-message {
    position: absolute;

    background: #ffffff;

    padding: 12px 16px;

    border-radius: 12px;

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

    font-size: 11px;
}

.ai-message-one {
    top: 70px;
    left: 30px;
}

.ai-message-two {
    bottom: 70px;
    right: 25px;
}


/* =========================================================
   RCS
   ========================================================= */

.rcs-card {
    width: 360px;

    padding: 30px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 25px 60px rgba(40, 30, 80, .13);
}

.rcs-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 25px;
}

.rcs-logo {
    width: 38px;
    height: 38px;

    border-radius: 10px;

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

    background: #f74780;

    color: #fff;

    font-weight: 700;
}

.rcs-card h4 {
    font-size: 22px;

    color: #26233a;
}

.rcs-card p {
    color: #777;

    font-size: 13px;

    line-height: 1.6;
}

.rcs-card button {
    width: 100%;

    border: 0;

    padding: 12px;

    border-radius: 8px;

    background: #287ef5;

    color: white;

    font-weight: 600;
}


/* =========================================================
   EMAIL
   ========================================================= */

.email-window {
    width: 420px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow: 0 25px 60px rgba(30, 20, 60, .14);

    padding-bottom: 25px;

    overflow: hidden;
}

.email-top {
    height: 40px;

    background: #f5f2f8;

    display: flex;
    align-items: center;

    gap: 6px;

    padding-left: 15px;
}

.email-top span {
    font-size: 8px;
}

.email-content {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 25px;
}

.email-avatar {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #f74780;

    color: #ffffff;

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

    font-weight: 700;
}

.email-content strong,
.email-content small {
    display: block;
}

.email-content small {
    color: #888;

    margin-top: 5px;
}

.email-lines {
    padding: 0 25px;
}

.email-lines span {
    display: block;

    height: 10px;

    background: #f0edf3;

    border-radius: 5px;

    margin-bottom: 10px;
}

.email-lines span:nth-child(1) {
    width: 100%;
}

.email-lines span:nth-child(2) {
    width: 85%;
}

.email-lines span:nth-child(3) {
    width: 65%;
}

.email-window button {
    margin: 15px 25px 0;

    padding: 11px 20px;

    border: 0;

    border-radius: 7px;

    background: #76218f;

    color: white;
}


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

@media (max-width: 1100px) {

    .innovartic-solutions-grid {
        grid-template-columns: 420px 1fr;
        gap: 30px;
    }

    .solution-menu-item {
        font-size: 14px;
    }

    .solution-visual {
        transform: scale(.9);
    }

}


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

@media (max-width: 767px) {

    .innovartic-solutions-section {
        padding: 45px 15px;
    }

    .innovartic-solutions-grid {
        display: block;
    }

    .innovartic-solutions-menu {
        border-radius: 16px;

        padding: 8px;

        margin-bottom: 30px;
    }

    .solution-menu-item {
        min-height: 58px;

        padding: 8px 12px;

        gap: 13px;

        font-size: 13px;

        border-radius: 9px;
    }

    .solution-icon {
        width: 32px;
        min-width: 32px;
        height: 32px;

        font-size: 23px;
    }

    .solution-notification {
        left: 32px;
        top: 1px;
    }

    .innovartic-solution-content {
        min-height: auto;
    }

    .solution-panel {
        width: 100%;
    }

    .solution-visual,
    .solution-illustration {
        height: 320px;

        transform: none;

        overflow: hidden;
    }

    .sms-phone {
        width: 190px;
        height: 310px;
    }

    .solution-person {
        right: -25px;

        width: 160px;
        height: 250px;
    }

    .person-circle {
        width: 230px;
        height: 230px;
    }

    .person-placeholder {
        font-size: 110px;
    }

    .solution-description {
        display: block;

        text-align: center;

        margin-top: 20px;
    }

    .solution-description p {
        max-width: 100%;

        font-size: 13px;

        margin-bottom: 18px;
    }

    .solution-explore {
        display: inline-block;

        min-width: 120px;
    }

    .dashboard-window {
        width: 95%;

        transform: scale(.85);
    }

    .whatsapp-phone {
        width: 200px;
        height: 310px;
    }

    .whatsapp-bottom {
        margin-top: 90px;
    }

    .rcs-card {
        width: 90%;

        padding: 22px;
    }

    .rcs-card h4 {
        font-size: 18px;
    }

    .email-window {
        width: 95%;
    }

    .ai-core {
        width: 110px;
        height: 110px;

        font-size: 45px;
    }

    .ai-message {
        font-size: 9px;

        padding: 9px 11px;
    }

    .ai-message-one {
        left: 5px;
    }

    .ai-message-two {
        right: 5px;
    }

    .card-one {
        left: 5px;
    }

    .card-two {
        right: 5px;
    }

}


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

@media (max-width: 420px) {

    .solution-menu-item {
        font-size: 12px;
    }

    .solution-menu-item span:last-of-type {
        line-height: 1.3;
    }

    .solution-visual,
    .solution-illustration {
        height: 290px;
    }

    .sms-phone {
        width: 170px;
        height: 285px;
    }

    .solution-person {
        right: -45px;
        transform: scale(.8);
    }

}




/* =========================================================
   FINAL MOBILE FIX - SMS + WHATSAPP
   Add this CSS at the VERY END of your stylesheet
   ========================================================= */


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

@media (max-width: 991px) {

    .innovartic-solutions-grid {
        grid-template-columns: 380px minmax(0, 1fr);
        gap: 25px;
    }

    .solution-visual,
    .solution-illustration {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    /* Main section */
    .innovartic-solutions-section {
        padding: 45px 15px;
    }


    /* One column */
    .innovartic-solutions-grid {
        display: block;
        width: 100%;
    }


    /* Left menu */
    .innovartic-solutions-menu {
        width: 100%;
        margin-bottom: 25px;
    }


    /* Right content */
    .innovartic-solution-content {
        width: 100%;
        min-height: 0;
    }


    /* -----------------------------------------------------
       COMMON VISUAL AREA
       ----------------------------------------------------- */

    .solution-visual,
    .solution-illustration {

        width: 100%;

        height: 350px;

        min-height: 350px;

        transform: none !important;

        overflow: hidden;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* =====================================================
       SMS
       ===================================================== */

    .solution-visual {

        position: relative;

        padding: 0;

        isolation: isolate;
    }


    /* SMS phone */
    .sms-phone {

        width: 190px;

        height: 305px;

        flex-shrink: 0;

        position: absolute;

        left: 50%;

        top: 50%;

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

        z-index: 3;
    }


    /* SMS person */
    .solution-person {

        width: 155px;

        height: 245px;

        right: 0;

        bottom: 0;

        position: absolute;

        z-index: 2;

        transform: none;

        pointer-events: none;
    }


    .person-circle {

        width: 225px;

        height: 225px;

        left: 50%;

        bottom: -10px;

        transform: translateX(-50%);
    }


    .person-placeholder {

        font-size: 105px;

        position: relative;

        z-index: 2;
    }


    /* =====================================================
       WHATSAPP
       ===================================================== */

    .whatsapp-illustration {

        width: 100%;

        height: 350px;

        min-height: 350px;

        padding: 0;

        position: relative;

        overflow: hidden;
    }


    .whatsapp-phone {

        width: 215px;

        height: 325px;

        max-width: 78vw;

        flex-shrink: 0;

        position: relative;

        margin: 0 auto;

        transform: none;
    }


    /* WhatsApp header */
    .whatsapp-header {

        height: 50px;

        padding: 0 10px;

        font-size: 10px;
    }


    /* WhatsApp date */
    .whatsapp-date {

        padding: 10px 0 6px;

        font-size: 7px;
    }


    /* WhatsApp chat */
    .whatsapp-chat {

        width: 86%;

        margin-left: 8px;

        padding: 10px;

        font-size: 8px;
    }


    .whatsapp-chat p {

        margin: 6px 0;

        font-size: 8px;
    }


    .whatsapp-chat a {

        padding: 6px;

        font-size: 8px;
    }


    /* WhatsApp bottom */
    .whatsapp-bottom {

        margin: 78px 7px 0;

        height: 31px;

        font-size: 8px;
    }


    .whatsapp-bottom span {

        margin: 0 6px;

        font-size: 15px;
    }


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

    .solution-icon {

        width: 36px;

        min-width: 36px;

        height: 36px;
    }


    .whatsapp-symbol {

        width: 30px;

        height: 30px;
    }


    .whatsapp-symbol svg {

        width: 20px;

        height: 20px;
    }


    /* Notification */
    .solution-notification {

        left: 29px;

        top: 0;

        width: 16px;

        height: 16px;

        font-size: 9px;
    }


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

    .solution-description {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        gap: 16px;

        margin-top: 15px;
    }


    .solution-description p {

        width: 100%;

        max-width: 430px;

        font-size: 13px;

        line-height: 1.6;

        margin: 0;
    }


    .solution-explore {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-width: 120px;

        padding: 10px 20px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 420px) {

    .innovartic-solutions-section {

        padding-left: 10px;

        padding-right: 10px;
    }


    /* Visual area */
    .solution-visual,
    .solution-illustration {

        height: 325px;

        min-height: 325px;
    }


    /* =====================================================
       SMS - SMALL SCREEN
       ===================================================== */

    .sms-phone {

        width: 170px;

        height: 280px;

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


    .solution-person {

        width: 140px;

        height: 220px;

        right: -5px;
    }


    .person-circle {

        width: 205px;

        height: 205px;
    }


    .person-placeholder {

        font-size: 95px;
    }


    /* =====================================================
       WHATSAPP - SMALL SCREEN
       ===================================================== */

    .whatsapp-phone {

        width: 195px;

        height: 300px;

        max-width: 75vw;
    }


    .whatsapp-header {

        height: 46px;

        padding: 0 8px;
    }


    .whatsapp-date {

        padding: 8px 0 5px;
    }


    .whatsapp-chat {

        width: 87%;

        margin-left: 7px;

        padding: 9px;
    }


    .whatsapp-bottom {

        margin-top: 72px;

        height: 29px;
    }


    /* Description */
    .solution-description p {

        font-size: 12.5px;

        padding: 0 5px;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 350px) {

    .solution-visual,
    .solution-illustration {

        height: 305px;

        min-height: 305px;
    }


    /* SMS */
    .sms-phone {

        width: 155px;

        height: 260px;

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


    .solution-person {

        width: 125px;

        height: 200px;

        right: -8px;
    }


    .person-circle {

        width: 185px;

        height: 185px;
    }


    /* WhatsApp */
    .whatsapp-phone {

        width: 180px;

        height: 280px;
    }


    .whatsapp-header {

        height: 43px;
    }


    .whatsapp-chat {

        padding: 8px;

        font-size: 7.5px;
    }


    .whatsapp-chat p {

        font-size: 7.5px;
    }


    .whatsapp-bottom {

        margin-top: 65px;
    }

}


/* =========================================================
   ROOT
========================================================= */

.innovartic-framework-section {
    position: relative;
    padding: 105px 117px 100px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(117, 33, 143, 0.055),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf8fd 100%
        );
    overflow: hidden;
       font-family: 'Plus Jakarta Sans', sans-serif;
}

.innovartic-framework-section *,
.innovartic-framework-section *::before,
.innovartic-framework-section *::after {
    box-sizing: border-box;
}

.innovartic-framework-container {
    width: min(1240px, 100%);
    margin: auto;
}



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

.innovartic-framework-heading {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.innovartic-framework-eyebrow {
    display: inline-flex;
    align-items: center;
     font-family: 'Plus Jakarta Sans', sans-serif;
    gap: 9px;
    margin-bottom: 13px;
    color: #75218f;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.innovartic-framework-eyebrow::before,
.innovartic-framework-eyebrow::after {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 20px;
    background: #f74780;
}

.innovartic-framework-heading h2 {
    margin: 0;
    color: #22233d;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.8px;
    font-weight: 750;
}

.innovartic-framework-heading h2 span {
    display: block;
    background: linear-gradient(
        90deg,
        #f74780,
        #f74780
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* .innovartic-framework-heading p {
    max-width: 750px;
    margin: 18px auto 0;
    color: #6c757d;
      font-size: 1rem;

    line-height: 1.75;
} */



/* =========================================================
   MAIN GRID
========================================================= */

.innovartic-framework-main {
    min-height: 560px;
    display: grid;
    grid-template-columns: 285px minmax(420px, 1fr) 285px;
    align-items: center;
    gap: 35px;
}



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

.innovartic-framework-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    z-index: 10;
}

.innovartic-framework-info-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 108px;
    padding: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(117,33,143,.09);
    border-radius: 17px;
    box-shadow:
        0 14px 40px rgba(49,28,70,.065);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
    cursor: pointer;
}

.innovartic-framework-left .innovartic-framework-info-card:hover,
.innovartic-framework-left .innovartic-framework-info-card.framework-active {
    transform: translateX(8px);
}

.innovartic-framework-right .innovartic-framework-info-card:hover,
.innovartic-framework-right .innovartic-framework-info-card.framework-active {
    transform: translateX(-8px);
}

.innovartic-framework-info-card.framework-active {
    border-color: rgba(247,71,128,.4);
    box-shadow:
        0 18px 45px rgba(117,33,143,.13);
}

.innovartic-framework-card-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f4eff9;
    color: #75218f;
}

.innovartic-framework-card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.innovartic-framework-card-icon.sms {
    color: #0879e8;
    background: #edf6ff;
}

.innovartic-framework-card-icon.rcs {
    color: #7650e8;
    background: #f1edff;
}

.innovartic-framework-card-icon.ai {
    color: #f74780;
    background: #fff0f5;
}

.innovartic-framework-card-icon.voice {
    color: #0c9b84;
    background: #eafaf7;
}

.innovartic-framework-card-icon.email {
    color: #e68122;
    background: #fff5e8;
}

.innovartic-framework-card-icon.whatsapp {
    color: #ffffff;
    background: #25d366;
}

.innovartic-framework-card-icon.whatsapp svg {
    fill: currentColor;
    stroke: none;
}

.innovartic-framework-card-content {
    min-width: 0;
}

.innovartic-framework-card-content h3 {
    margin: 0 0 6px;
    color: #25253c;
    font-size: 15px;
    font-weight: 750;
}

.innovartic-framework-card-content p {
    margin: 0;
    color: #737383;
    font-size: 11.5px;
    line-height: 1.55;
}

.innovartic-framework-card-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f74780;
    box-shadow: 0 0 0 5px rgba(247,71,128,.08);
}

.innovartic-framework-left .innovartic-framework-card-dot {
    right: -4px;
}

.innovartic-framework-right .innovartic-framework-card-dot {
    left: -4px;
}



/* =========================================================
   CENTER AREA
========================================================= */

.innovartic-framework-center {
    position: relative;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}



/* =========================================================
   CENTER GLOW
========================================================= */

.innovartic-framework-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(117,33,143,.10) 0%,
            rgba(247,71,128,.055) 42%,
            transparent 70%
        );
    animation: frameworkGlow 4s ease-in-out infinite;
}

@keyframes frameworkGlow {
    0%,100% {
        transform: scale(.95);
        opacity: .65;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}



/* =========================================================
   ORBITS
========================================================= */

.innovartic-framework-orbit {
    position: absolute;
    border: 1px dashed rgba(117,33,143,.30);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: 365px;
    height: 365px;
    animation: frameworkOrbit 22s linear infinite;
}

.orbit-two {
    width: 295px;
    height: 295px;
    border-style: solid;
    border-color: rgba(247,71,128,.20);
    animation: frameworkOrbitReverse 16s linear infinite;
}

@keyframes frameworkOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes frameworkOrbitReverse {
    to {
        transform: rotate(-360deg);
    }
}

.innovartic-framework-orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #75218f;
    box-shadow:
        0 0 0 5px rgba(117,33,143,.08),
        0 0 18px rgba(117,33,143,.35);
}

.dot-one {
    top: 14px;
    left: 50%;
}

.dot-two {
    bottom: 30px;
    right: 15px;
    background: #f74780;
}

.dot-three {
    top: 50%;
    left: -4px;
    background: #f74780;
}



/* =========================================================
   CENTRAL CORE
========================================================= */

.innovartic-framework-core {
    position: relative;
    width: 210px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.innovartic-framework-core-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            #75218f,
            #f74780,
            #75218f
        );
    animation: coreRotate 7s linear infinite;
    box-shadow:
        0 0 50px rgba(117,33,143,.20);
}

.innovartic-framework-core-ring::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

@keyframes coreRotate {
    to {
        transform: rotate(360deg);
    }
}

.innovartic-framework-core-inner {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 25%,
            #ffffff,
            #f9f3fb
        );
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 30px rgba(117,33,143,.06),
        0 20px 55px rgba(68,36,84,.13);
}

.innovartic-framework-core-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #75218f;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(117,33,143,.12);
}

.innovartic-framework-core-icon svg {
    width: 40px;
    height: 40px;
}

.innovartic-framework-core-inner strong {
    color: #75218f;
    font-size: 17px;
    letter-spacing: 1.4px;
}

.innovartic-framework-core-inner > span {
    margin-top: 4px;
    color: #96929e;
    font-size: 1rem;
}



/* =========================================================
   CHANNEL BUBBLES
========================================================= */

.innovartic-framework-channel {
    position: absolute;
    width: 88px;
    min-height: 88px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(117,33,143,.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 8;
    box-shadow:
        0 15px 35px rgba(47,25,63,.10);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
    cursor: pointer;
}

.innovartic-framework-channel:hover,
.innovartic-framework-channel.framework-active {
    transform: scale(1.12);
    border-color: #f74780;
    box-shadow:
        0 18px 40px rgba(117,33,143,.18);
}

.framework-channel-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #75218f;
}

.framework-channel-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.framework-channel-icon.whatsapp {
    color: #25d366;
}

.framework-channel-icon.whatsapp svg {
    fill: currentColor;
    stroke: none;
}

.innovartic-framework-channel > span {
    color: #333347;
    font-size: 10px;
    font-weight: 750;
}



/* Channel Positions */

.channel-sms {
    left: 4%;
    top: 17%;
}

.channel-whatsapp {
    right: 4%;
    top: 17%;
}

.channel-rcs {
    left: -1%;
    bottom: 17%;
}

.channel-voice {
    right: -1%;
    bottom: 17%;
}

.channel-email {
    left: 50%;
    top: 1%;
    transform: translateX(-50%);
}

.channel-email:hover,
.channel-email.framework-active {
    transform: translateX(-50%) scale(1.12);
}

.channel-ai {
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
}

.channel-ai:hover,
.channel-ai.framework-active {
    transform: translateX(-50%) scale(1.12);
}



/* =========================================================
   CONNECTION LINES
========================================================= */

.innovartic-framework-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(117,33,143,.40),
        transparent
    );
    transform-origin: left center;
    z-index: 1;
}

.line-left-top {
    width: 160px;
    left: 20%;
    top: 37%;
    transform: rotate(28deg);
}

.line-left-mid {
    width: 150px;
    left: 18%;
    top: 50%;
}

.line-left-bottom {
    width: 160px;
    left: 20%;
    top: 63%;
    transform: rotate(-28deg);
}

.line-right-top {
    width: 160px;
    right: 20%;
    top: 37%;
    transform: rotate(-28deg);
}

.line-right-mid {
    width: 150px;
    right: 18%;
    top: 50%;
}

.line-right-bottom {
    width: 160px;
    right: 20%;
    top: 63%;
    transform: rotate(28deg);
}



/* =========================================================
   SIGNAL PARTICLES
========================================================= */

.framework-signal {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f74780;
    box-shadow: 0 0 12px rgba(247,71,128,.55);
    z-index: 4;
}

.signal-1 {
    left: 20%;
    top: 38%;
    animation: signalOne 2.5s linear infinite;
}

.signal-2 {
    left: 20%;
    top: 50%;
    animation: signalTwo 2.8s linear infinite;
}

.signal-3 {
    left: 20%;
    top: 62%;
    animation: signalThree 2.4s linear infinite;
}

.signal-4 {
    right: 20%;
    top: 38%;
    animation: signalFour 2.7s linear infinite;
}

.signal-5 {
    right: 20%;
    top: 50%;
    animation: signalFive 2.5s linear infinite;
}

.signal-6 {
    right: 20%;
    top: 62%;
    animation: signalSix 2.8s linear infinite;
}

@keyframes signalOne {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(80px,35px); opacity: 0; }
}

@keyframes signalTwo {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(90px,0); opacity: 0; }
}

@keyframes signalThree {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(80px,-35px); opacity: 0; }
}

@keyframes signalFour {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-80px,35px); opacity: 0; }
}

@keyframes signalFive {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-90px,0); opacity: 0; }
}

@keyframes signalSix {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-80px,-35px); opacity: 0; }
}



/* =========================================================
   BOTTOM BENEFITS
========================================================= */

.innovartic-framework-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 55px;
}

.innovartic-framework-benefit {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid rgba(117,33,143,.08);
    box-shadow: 0 10px 30px rgba(48,30,62,.04);
    transition: transform .3s ease;
}

.innovartic-framework-benefit:hover {
    transform: translateY(-5px);
}

.benefit-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7effa;
    color: #75218f;
    font-size: 12px;
    font-weight: 800;
}

.innovartic-framework-benefit strong {
    display: block;
    margin-bottom: 4px;
    color: #29293e;
    font-size: 13px;
}

.innovartic-framework-benefit span {
    display: block;
    color: #858492;
    font-size: 11px;
    line-height: 1.5;
    font-family: 'Plus Jakarta Sans', sans-serif;

}



/* =========================================================
   SCROLL REVEAL
========================================================= */

.innovartic-framework-heading,
.innovartic-framework-side,
.innovartic-framework-center,
.innovartic-framework-benefits {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.innovartic-framework-section.framework-visible
.innovartic-framework-heading,
.innovartic-framework-section.framework-visible
.innovartic-framework-side,
.innovartic-framework-section.framework-visible
.innovartic-framework-center,
.innovartic-framework-section.framework-visible
.innovartic-framework-benefits {
    opacity: 1;
    transform: translateY(0);
}

.innovartic-framework-section.framework-visible
.innovartic-framework-center {
    transition-delay: .15s;
}

.innovartic-framework-section.framework-visible
.innovartic-framework-benefits {
    transition-delay: .25s;
}



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

@media (max-width: 1100px) {

    .innovartic-framework-main {
        grid-template-columns: 240px minmax(380px,1fr) 240px;
        gap: 20px;
    }

    .innovartic-framework-info-card {
        padding: 14px;
        min-height: 100px;
    }

    .innovartic-framework-card-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
    }

    .innovartic-framework-card-content p {
        font-size: 10.5px;
    }

    .innovartic-framework-channel {
        width: 78px;
        min-height: 78px;
    }

    .orbit-one {
        width: 330px;
        height: 330px;
    }

    .orbit-two {
        width: 270px;
        height: 270px;
    }

}



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

@media (max-width: 767px) {

    .innovartic-framework-section {
        padding: 65px 15px 65px;
    }

    .innovartic-framework-heading {
        margin-bottom: 35px;
    }

    .innovartic-framework-eyebrow {
        font-size: 12px;
    }

    .innovartic-framework-heading h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .innovartic-framework-heading p {
        font-size: 13px;
        line-height: 1.65;
        padding: 0 5px;
    }


    /* Main becomes vertical */

    .innovartic-framework-main {
        display: flex;
        flex-direction: column;
        gap: 30px;
        min-height: auto;
    }


    /* Center first */

    .innovartic-framework-center {
        order: 1;
        width: 100%;
        height: 390px;
        min-height: 390px;
    }

    .innovartic-framework-left {
        order: 2;
        width: 100%;
    }

    .innovartic-framework-right {
        order: 3;
        width: 100%;
    }


    /* Center scale */

    .innovartic-framework-glow {
        width: 280px;
        height: 280px;
    }

    .orbit-one {
        width: 280px;
        height: 280px;
    }

    .orbit-two {
        width: 225px;
        height: 225px;
    }

    .innovartic-framework-core {
        width: 155px;
        height: 155px;
    }

    .innovartic-framework-core-inner {
        width: 139px;
        height: 139px;
    }

    .innovartic-framework-core-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        margin-bottom: 7px;
    }

    .innovartic-framework-core-icon svg {
        width: 30px;
        height: 30px;
    }

    .innovartic-framework-core-inner strong {
        font-size: 13px;
    }

    .innovartic-framework-core-inner > span {
        font-size: 9px;
    }


    /* Channels */

    .innovartic-framework-channel {
        width: 66px;
        min-height: 66px;
    }

    .framework-channel-icon {
        width: 27px;
        height: 27px;
    }

    .framework-channel-icon svg {
        width: 21px;
        height: 21px;
    }

    .innovartic-framework-channel > span {
        font-size: 8px;
    }

    .channel-sms {
        left: 4%;
        top: 22%;
    }

    .channel-whatsapp {
        right: 4%;
        top: 22%;
    }

    .channel-rcs {
        left: 6%;
        bottom: 16%;
    }

    .channel-voice {
        right: 6%;
        bottom: 16%;
    }

    .channel-email {
        top: 1%;
    }

    .channel-ai {
        bottom: 1%;
    }


    /* Hide complicated lines on mobile */
    .innovartic-framework-line {
        opacity: .45;
    }


    /* Side cards */

    .innovartic-framework-side {
        gap: 13px;
    }

    .innovartic-framework-info-card {
        width: 100%;
        min-height: 88px;
        padding: 14px;
        border-radius: 14px;
    }

    .innovartic-framework-card-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .innovartic-framework-card-icon svg {
        width: 22px;
        height: 22px;
    }

    .innovartic-framework-card-content h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .innovartic-framework-card-content p {
        font-size: 11px;
        line-height: 1.5;
    }

    .innovartic-framework-left
    .innovartic-framework-info-card:hover,
    .innovartic-framework-left
    .innovartic-framework-info-card.framework-active,
    .innovartic-framework-right
    .innovartic-framework-info-card:hover,
    .innovartic-framework-right
    .innovartic-framework-info-card.framework-active {
        transform: translateY(-3px);
    }


    /* Benefits */

    .innovartic-framework-benefits {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
    }

    .innovartic-framework-benefit {
        padding: 16px;
    }

}



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

@media (max-width: 420px) {

    .innovartic-framework-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .innovartic-framework-heading h2 {
        font-size: 27px;
    }

    .innovartic-framework-heading p {
        font-size: 12px;
    }

    .innovartic-framework-center {
        height: 350px;
        min-height: 350px;
    }

    .innovartic-framework-glow {
        width: 240px;
        height: 240px;
    }

    .orbit-one {
        width: 245px;
        height: 245px;
    }

    .orbit-two {
        width: 200px;
        height: 200px;
    }

    .innovartic-framework-core {
        width: 135px;
        height: 135px;
    }

    .innovartic-framework-core-inner {
        width: 121px;
        height: 121px;
    }

    .innovartic-framework-core-icon {
        width: 42px;
        height: 42px;
    }

    .innovartic-framework-core-inner strong {
        font-size: 11px;
    }

    .innovartic-framework-core-inner > span {
        font-size: 8px;
    }

    .innovartic-framework-channel {
        width: 58px;
        min-height: 58px;
    }

    .framework-channel-icon svg {
        width: 19px;
        height: 19px;
    }

    .innovartic-framework-channel > span {
        font-size: 7px;
    }

    .innovartic-framework-info-card {
        min-height: 82px;
    }

    .innovartic-framework-card-content p {
        font-size: 10px;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .innovartic-framework-orbit,
    .innovartic-framework-core-ring,
    .innovartic-framework-glow,
    .framework-signal {
        animation: none !important;
    }

    .innovartic-framework-heading,
    .innovartic-framework-side,
    .innovartic-framework-center,
    .innovartic-framework-benefits {
        opacity: 1;
        transform: none;
    }

}





:root {
    --purple: #641579;
    --purple-dark: #40104f;
    --purple-light: #a746bd;
    --cream: #fbf7ef;
    --green: #537a4b;
    --green-dark: #315337;
    --brown: #76503a;
    --text: #29202d;
}




/* =========================================================
   MAIN SECTION
========================================================= */

.industry-section {
    position: relative;
    min-height: 900px;
    overflow: hidden;
    padding: 90px 30px;
    background:
        radial-gradient(circle at 50% 40%, rgba(150, 74, 174, .13), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(91, 143, 72, .08), transparent 30%),
        var(--cream);
}


/* Background decorative circles */

.ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.ambient.one {
    width: 500px;
    height: 500px;
    background: rgba(117, 32, 143, .04);
    top: 100px;
    left: -250px;
}

.ambient.two {
    width: 450px;
    height: 450px;
    background: rgba(79, 129, 71, .05);
    right: -200px;
    bottom: 50px;
}


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

.industry-header {
    position: relative;
    z-index: 5;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.industry-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 100px;
    background: rgba(100, 21, 121, .08);
    border: 1px solid rgba(100, 21, 121, .12);
    color: var(--purple);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.industry-label span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ca15c;
    box-shadow: 0 0 0 5px rgba(108,161,92,.12);
}

.industry-header h2 {
    margin-top: 22px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
    font-weight: 900;
}

.industry-header h2 strong {
    color: #e54282;
}

/* .industry-header p {
    max-width: 650px;
    margin: 20px auto 0;
    color: #353f4f;
    font-size: 1rem;
    line-height: 1.7;
} */


/* =========================================================
   TREE STAGE
========================================================= */

.tree-stage {
    position: relative;
    width: min(1100px, 100%);
    height: 650px;
    margin: 30px auto 0;
}


/* =========================================================
   TREE TRUNK
========================================================= */

/* .tree-trunk {
    position: absolute;
    width: 125px;
    height: 360px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            #5b3b2c 0%,
            #80573e 35%,
            #6c4935 60%,
            #4d3227 100%
        );

    border-radius: 60% 55% 18px 18px;

    box-shadow:
        inset 15px 0 rgba(255,255,255,.05),
        inset -15px 0 rgba(0,0,0,.08),
        0 20px 40px rgba(63,40,28,.12);

    transform-origin: bottom center;
}




.tree-trunk::before,
.tree-trunk::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 270px;
    border-radius: 20px;
    background: rgba(45,27,20,.13);
    top: 35px;
}

.tree-trunk::before {
    left: 38px;
    transform: rotate(4deg);
}

.tree-trunk::after {
    right: 35px;
    transform: rotate(-5deg);
} */



.tree-trunk {
    position: absolute;
    width: 190px;
    height: 430px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;

    /* Main trunk */
    background:
        linear-gradient(
            90deg,
            #241912 0%,
            #3b261b 12%,
            #5a3927 28%,
            #704a31 42%,
            #4b3022 58%,
            #342118 76%,
            #1f1510 100%
        );

    border-radius:
        48% 52% 12px 12px /
        18% 20% 4% 4%;

    box-shadow:
        inset 18px 0 18px rgba(255,255,255,.07),
        inset -25px 0 25px rgba(0,0,0,.25),
        0 25px 45px rgba(24,16,10,.28);

    transform-origin: bottom center;
}


/* =====================================================
   MAIN HUGE BRANCHES
   ===================================================== */

.tree-trunk::before {
    content: "";
    position: absolute;

    width: 105px;
    height: 330px;

    left: -35px;
    top: -180px;

    background:
        linear-gradient(
            90deg,
            #211710 0%,
            #3a251a 25%,
            #60402b 48%,
            #3e281c 70%,
            #241811 100%
        );

    border-radius: 80px 80px 45px 45px;

    transform:
        rotate(-38deg)
        skewY(-8deg);

    box-shadow:
        55px 105px 0 -8px #3c281d,
        105px 155px 0 -20px #49301f,
        145px 195px 0 -30px #3b261b,

        /* left upper branch */
        -65px -90px 0 -22px #302016,
        -105px -140px 0 -35px #2b1c14,

        /* right branches */
        190px 40px 0 -22px #39251a,
        235px 5px 0 -35px #2d1d15;
}


/* =====================================================
   SECOND BRANCH SYSTEM
   ===================================================== */

.tree-trunk::after {
    content: "";
    position: absolute;

    width: 115px;
    height: 350px;

    right: -42px;
    top: -190px;

    background:
        linear-gradient(
            90deg,
            #251810 0%,
            #4b3020 25%,
            #65432b 45%,
            #40291d 70%,
            #21160f 100%
        );

    border-radius: 75px;

    transform:
        rotate(39deg)
        skewY(7deg);

    box-shadow:
        -55px 115px 0 -10px #49301f,
        -105px 165px 0 -22px #38251a,
        -150px 205px 0 -32px #2b1c14,

        /* right top branches */
        65px -85px 0 -20px #342218,
        110px -125px 0 -32px #2a1b13,
        150px -155px 0 -40px #21160f;
}


/* =====================================================
   ORGANIC BARK / ROOT SHAPE
   ===================================================== */

.tree-trunk {
    background-image:

        /* bark highlights */
        linear-gradient(
            78deg,
            transparent 0%,
            rgba(255,255,255,.06) 18%,
            transparent 25%,
            rgba(0,0,0,.14) 35%,
            transparent 43%,
            rgba(255,255,255,.045) 51%,
            transparent 60%,
            rgba(0,0,0,.18) 70%,
            transparent 78%
        ),

        /* bark lines */
        repeating-linear-gradient(
            82deg,
            transparent 0px,
            transparent 18px,
            rgba(30,18,12,.15) 19px,
            rgba(30,18,12,.15) 22px,
            transparent 24px,
            transparent 38px
        ),

        linear-gradient(
            90deg,
            #241912 0%,
            #5a3927 28%,
            #714a31 45%,
            #4b3022 62%,
            #281a13 100%
        );
}


/* =====================================================
   ROOTS — WIDE BASE LIKE REAL OLD TREE
   ===================================================== */

.tree-trunk {
    clip-path: polygon(
        27% 0%,
        43% 0%,
        50% 4%,
        58% 0%,
        74% 0%,

        76% 18%,
        73% 38%,
        78% 58%,
        75% 78%,

        84% 90%,
        100% 96%,
        100% 100%,

        72% 100%,
        61% 97%,
        50% 100%,
        39% 97%,
        25% 100%,
        0% 100%,

        5% 95%,
        18% 89%,
        25% 78%,
        22% 60%,
        26% 40%,
        23% 20%
    );
}
.tree-ground {
    position: absolute;
    width: 620px;
    height: 145px;
    left: 50%;
    bottom: -55px;
    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse at 50% 45%,
            #4f8f35 0%,
            #3f7d2d 32%,
            #326522 58%,
            transparent 72%
        );

    border-radius: 50%;
    z-index: 1;
}


/* =====================================================
   SMALL GREEN LEAVES / GRASS
   ===================================================== */

.tree-ground::before {
    content: "";
    position: absolute;
    inset: 20px 35px;

    background:
        radial-gradient(ellipse at 8% 65%, #4f8f35 0 7px, transparent 8px),
        radial-gradient(ellipse at 15% 35%, #67a941 0 9px, transparent 10px),
        radial-gradient(ellipse at 25% 70%, #3d7629 0 8px, transparent 9px),
        radial-gradient(ellipse at 35% 40%, #72ad48 0 7px, transparent 8px),
        radial-gradient(ellipse at 47% 72%, #477f2f 0 9px, transparent 10px),
        radial-gradient(ellipse at 58% 35%, #5f9b39 0 8px, transparent 9px),
        radial-gradient(ellipse at 68% 68%, #3d7428 0 8px, transparent 9px),
        radial-gradient(ellipse at 78% 38%, #6ba743 0 9px, transparent 10px),
        radial-gradient(ellipse at 90% 65%, #477f2e 0 8px, transparent 9px);

    border-radius: 50%;
}


/* =====================================================
   GRASS BLADES
   ===================================================== */

.tree-ground::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 75px;
    bottom: 20px;
    left: 0;

    background:
        linear-gradient(75deg, transparent 47%, #397326 48%, #397326 51%, transparent 52%) 20px 0 / 38px 55px,
        linear-gradient(105deg, transparent 47%, #4d8c32 48%, #4d8c32 51%, transparent 52%) 0 15px / 45px 60px,
        linear-gradient(80deg, transparent 47%, #65a440 48%, #65a440 51%, transparent 52%) 10px 25px / 55px 50px;

    opacity: .9;
}

/* =========================================================
   ROOTS
========================================================= */

.root {
    position: absolute;
    width: 170px;
    height: 65px;
    bottom: -15px;
    background: #684632;
    border-radius: 50%;
    z-index: 1;
}

.root.left {
    left: calc(50% - 160px);
    transform: rotate(18deg);
}

.root.right {
    right: calc(50% - 160px);
    transform: rotate(-18deg);
}


/* =========================================================
   BRANCHES
========================================================= */

.branch {
    position: absolute;
    height: 28px;
    background: #684632;
    border-radius: 30px;
    transform-origin: left center;
    z-index: 3;
}

.branch.b1 {
    width: 298px;
    left: 49%;
    top: 260px;
    transform: rotate(-30deg);
}

.branch.b2 {
    width: 295px;
    right: 49%;
    top: 260px;
    transform-origin: right center;
    transform: rotate(30deg);
}

.branch.b3 {
    width: 270px;
    left: 49%;
    top: 190px;
    transform: rotate(-52deg);
}

.branch.b4 {
    width: 270px;
    right: 49%;
    top: 190px;
    transform-origin: right center;
    transform: rotate(52deg);
}

.branch.b5 {
    width: 240px;
    left: 49%;
    top: 335px;
    transform: rotate(20deg);
}

.branch.b6 {
    width: 240px;
    right: 49%;
    top: 335px;
    transform-origin: right center;
    transform: rotate(-20deg);
}


/* =========================================================
   TREE LEAVES
========================================================= */

.leaves {
    position: absolute;
    z-index: 1;
}

.leaf-cloud {
    position: absolute;
    width: 230px;
    height: 150px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 50%, #789d68 0 30%, transparent 31%),
        radial-gradient(circle at 55% 35%, #648b57 0 35%, transparent 36%),
        radial-gradient(circle at 75% 55%, #769a66 0 35%, transparent 36%),
        radial-gradient(circle at 45% 70%, #547b4a 0 30%, transparent 31%);
    filter: drop-shadow(0 15px 10px rgba(53,85,45,.08));
}

.leaf1 {
    top: 80px;
    left: 30%;
}

.leaf2 {
    top: 80px;
    right: 30%;
}

.leaf3 {
    top: 150px;
    left: 39%;
}

.leaf4 {
    top: 145px;
    right: 38%;
}

.leaf5 {
    top: 225px;
    left: 42%;
}

.leaf6 {
    top: 220px;
    right: 41%;
}


/* =========================================================
   FRUITS
========================================================= */

.fruit {
    position: absolute;
    width: 76px;
    height: 76px;

    border: 0;
    border-radius: 48% 48% 52% 52%;

    cursor: pointer;
    z-index: 10;

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

    font-size: 32px;

    box-shadow:
        inset -8px -10px 0 rgba(0,0,0,.10),
        inset 8px 8px 0 rgba(255,255,255,.20),
        0 12px 25px rgba(52,32,45,.16);

    transition:
        transform .3s ease,
        filter .3s ease,
        opacity .3s ease;
}

.fruit:hover {
    transform: scale(1.16) rotate(-5deg);
    filter: brightness(1.08);
}

.fruit::before {
    content: "";
    position: absolute;
    width: 19px;
    height: 9px;
    background: #3e6735;
    top: -7px;
    right: 10px;
    border-radius: 100%;
    transform: rotate(-25deg);
}

.fruit::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 20px;
    background: #5a3829;
    top: -11px;
    left: 32px;
    border-radius: 8px;
}


/* positions */

.fruit.bank {
    left: 17%;
    top: 210px;
    background: #e75d55;
}

.fruit.health {
    left: 27%;
    top: 110px;
    background: #f3a742;
}

.fruit.ecommerce {
    left: 42%;
    top: 55px;
    background: #f4cf49;
}

.fruit.education {
    right: 27%;
    top: 110px;
    background: #e66b9c;
}

.fruit.logistics {
    right: 17%;
    top: 210px;
    background: #65a5db;
}

.fruit.realestate {
    left: 22%;
    top: 340px;
    background: #8d70c9;
}

.fruit.automotive {
    right: 22%;
    top: 340px;
    background: #e97b43;
}

.fruit.travel {
    left: 39%;
    top: 325px;
    background: #69b99a;
}

.fruit.tech {
    right: 39%;
    top: 397px;
    background: #7774d4;
}


/* fruit label */

.fruit-label {
    position: absolute;
    top: 84px;
    width: 150px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 1rem;
    font-weight: 800;
    color: #1f1343;
    text-align: center;

    pointer-events: none;
}


/* =========================================================
   FRUIT BREAK ANIMATION
========================================================= */

.fruit.breaking {
    animation: fruitBreak .7s forwards;
}

@keyframes fruitBreak {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    35% {
        transform: scale(1.35) rotate(8deg);
    }

    65% {
        transform:
            scale(.9)
            rotate(-18deg)
            translateX(-12px);
    }

    100% {
        transform:
            scale(.1)
            rotate(-40deg)
            translateX(-60px);
        opacity: 0;
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 30;
    animation: particleFly .8s ease-out forwards;
}

@keyframes particleFly {
    from {
        transform: translate(0,0) scale(1);
        opacity: 1;
    }

    to {
        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(.2);
        opacity: 0;
    }
}


/* =========================================================
   CENTER SMS HUB
========================================================= */

.sms-hub {
    position: absolute;
    left: 50%;
    top: 265px;
    transform: translate(-50%, -50%);

    width: 155px;
    height: 155px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #7c2396,
            #4b105b
        );

    z-index: 7;

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

    color: white;
    text-align: center;

    box-shadow:
        0 30px 70px rgba(93,21,115,.30),
        0 0 0 14px rgba(100,21,121,.06),
        0 0 0 28px rgba(100,21,121,.025);

    animation: hubPulse 3s ease-in-out infinite;
}

.sms-hub::before {
    content: "";
    position: absolute;
    inset: -17px;
    border: 1px dashed rgba(100,21,121,.22);
    border-radius: 50%;
    animation: orbit 12s linear infinite;
}

.sms-hub-icon {
    font-size: 34px;
    margin-bottom: 5px;
}

.sms-hub small {
    display: block;
    opacity: .72;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sms-hub strong {
    display: block;
    font-size: 18px;
}

@keyframes hubPulse {
    50% {
        box-shadow:
            0 35px 80px rgba(93,21,115,.35),
            0 0 0 20px rgba(100,21,121,.04),
            0 0 0 38px rgba(100,21,121,.015);
    }
}

@keyframes orbit {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   INDUSTRY DETAIL PANEL
========================================================= */

.industry-detail {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.85);

    width: min(850px, calc(100% - 30px));
    min-height: 440px;

    background: rgba(255,255,255,.97);
    border: 1px solid rgba(100,21,121,.10);
    border-radius: 34px;

    z-index: 100;

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    box-shadow:
        0 40px 100px rgba(53,32,61,.20);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;
}

.industry-detail.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.detail-inner {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 440px;
}


/* image */

.detail-image {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    background: #eee;
}

.detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform: scale(1.04);
    transition: transform 8s ease;
}

.industry-detail.active .detail-image img {
    transform: scale(1.12);
}

.detail-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(33,19,38,.48)
        );
}

.image-industry {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 2;
    color: white;
    font-size: 25px;
    font-weight: 900;
}


/* content */

.detail-content {
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-kicker {
    font-size: 11px;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 900;
}

.detail-content h3 {
    margin-top: 10px;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

/* .detail-content p {
    margin-top: 17px;
    color: #756d78;
    line-height: 1.7;
    font-size: 15px;
} */

.usecases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.usecase {
    padding: 9px 12px;
    background: #e54282;
    border-radius: 100px;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.close-detail {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.92);
    box-shadow: 0 5px 20px rgba(0,0,0,.10);

    cursor: pointer;
    z-index: 10;

    font-size: 20px;
    color: #4a404d;
}

.timer {
    margin-top: 25px;
    height: 5px;
    background: #eee;
    border-radius: 20px;
    overflow: hidden;
}

.timer span {
    display: block;
    width: 100%;
    height: 100%;
    background: #e54282;
    transform-origin: left;
}

.industry-detail.active .timer span {
    animation: timer30s 30s linear forwards;
}

@keyframes timer30s {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.timer-text {
    margin-top: 8px;
    font-size: 10px;
    color: #999;
}


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

@media(max-width: 800px) {

    .industry-section {
        padding: 65px 15px;
        min-height: 1000px;
    }

    .industry-header h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .industry-header p {
        font-size: 14px;
    }

    .tree-stage {
        height: 650px;
        margin-top: 10px;
        transform: scale(.78);
        transform-origin: top center;
        width: 125%;
        margin-left: -12.5%;
    }

    .industry-detail {
        width: calc(100% - 20px);
        min-height: auto;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 25px;
    }

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

    .detail-image {
        min-height: 250px;
        height: 250px;
    }

    .detail-content {
        padding: 27px 23px 30px;
    }

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

    .detail-content p {
        font-size: 14px;
    }
}


@media(max-width: 500px) {

    .industry-section {
        padding-top: 45px;
    }

    .industry-header h2 {
        font-size: 35px;
    }

    .industry-header p {
        font-size: 13px;
    }

    .tree-stage {
        transform: scale(.62);
        width: 161%;
        margin-left: -30.5%;
        height: 650px;
    }

    .industry-detail {
        top: 48%;
    }

    .detail-image {
        height: 210px;
        min-height: 210px;
    }

    .detail-content {
        padding: 24px 20px 28px;
    }

    .detail-content h3 {
        font-size: 26px;
    }

    .usecase {
        font-size: 11px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}