:root {
        --mf-purple: #6846d8;
        --mf-purple2: #7b56df;
        --mf-blue: #5d8bea;
        --mf-ink: #211e27;
        --mf-muted: #69646e;
        --mf-bg: #f8f5f2;
        --mf-line: #e9e4e8
      }

      .solution-page {
        overflow: clip;
        background: #fff;
        color: var(--mf-ink)
      }

      .solution-orb {
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
        filter: blur(2px)
      }

      .solution-orb.one {
        width: 300px;
        height: 300px;
        left: -150px;
        top: 170px;
        background: rgba(120, 78, 215, .07)
      }

      .solution-orb.two {
        width: 390px;
        height: 390px;
        right: -190px;
        top: 45px;
        background: rgba(90, 139, 233, .08)
      }

      .solution-hero-inner {
        max-width: 1190px;
        margin: auto;
        position: relative;
        z-index: 1
      }

      .solution-hero-copy {
        text-align: center;
        max-width: 920px;
        margin: 0 auto 58px
      }

      .solution-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 13px;
        border: 1px solid #e4dbf2;
        border-radius: 999px;
        background: rgba(246, 242, 252, .9);
        color: #7251b6;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .11em
      }

      .solution-eyebrow-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7650dc, #5e91ea);
        box-shadow: 0 0 0 5px rgba(111, 75, 214, .08)
      }

      .solution-title {
        font-size: clamp(50px, 7vw, 88px);
        line-height: .96;
        letter-spacing: -.06em;
        margin: 23px 0;
        font-weight: 700
      }

      .solution-title .gradient {
        background: linear-gradient(90deg, #6d49ce, #5d8bea);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
      }

      .solution-description {
        max-width: 760px;
        margin: auto;
        color: #66616b;
        font-size: 20px;
        line-height: 1.55
      }

      .solution-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
        flex-wrap: wrap
      }

      .solution-actions .btn {
        border-radius: 12px;
        padding: 13px 22px;
        font-weight: 600
      }

      .hero-product {
        max-width: 1080px;
        margin: auto;
        position: relative
      }

     

      .cal-head,
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px
      }

      .cal-head {
        margin-top: 24px;
        color: #aaa3ae;
        font-size: 8px;
        text-align: center
      }

      .cal-grid {
        margin-top: 7px
      }

      .cal-grid span {
        height: 29px;
        display: grid;
        place-items: center;
        border: 1px solid #f0ecf1;
        border-radius: 7px;
        font-size: 9px;
        color: #77717d
      }

      .cal-grid span.active {
        background: #f0ebfc;
        color: #6948c9;
        border-color: #ded2f1;
        font-weight: 700
      }

      .cal-event {
        margin-top: 16px;
        border: 1px solid #e9e2f2;
        background: #fbf9fe;
        border-radius: 13px;
        padding: 11px;
        display: flex;
        gap: 10px;
        align-items: center
      }

      .cal-event i {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: #eee8fb;
        color: #704dbe;
        display: grid;
        place-items: center
      }

      .cal-event strong {
        display: block;
        font-size: 11px
      }

      .cal-event small {
        display: block;
        color: #99939e;
        font-size: 9px;
        margin-top: 3px
      }

      .timer-wrap {
        display: grid;
        place-items: center;
        margin: 18px 0
      }

      .timer-ring {
        width: 220px;
        height: 220px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: conic-gradient(#7350cf 0 76%, #ebe6f0 76% 100%);
        box-shadow: 0 18px 35px rgba(101, 71, 180, .13);
        animation: pulseRing 2.6s ease-in-out infinite
      }

      .timer-core {
        width: 186px;
        height: 186px;
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        align-content: center;
        text-align: center
      }

      .timer-core small {
        font-size: 8px;
        color: #aaa3ae;
        letter-spacing: .1em
      }

      .timer-core strong {
        font-size: 28px;
        letter-spacing: -.04em;
        margin: 5px 0
      }

      .timer-core span {
        font-size: 9px;
        color: #8f8994
      }

      .live-pill {
        font-size: 9px;
        color: #47a66d;
        display: flex;
        gap: 5px;
        align-items: center
      }

      .live-pill i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #57b77d;
        animation: blink 1.4s infinite
      }

      .timer-footer {
        display: flex;
        justify-content: space-between;
        color: #8f8994;
        font-size: 10px;
        border-top: 1px solid #eee9ef;
        padding-top: 13px
      }

      .timer-footer span:first-child {
        color: #48a56e;
        font-weight: 700
      }

      .billing-value {
        margin: 28px 0 12px
      }

      .billing-value small {
        font-size: 9px;
        color: #aaa3ae;
        letter-spacing: .1em
      }

      .billing-value strong {
        display: block;
        font-size: 36px;
        letter-spacing: -.05em;
        margin: 4px 0
      }

      .billing-positive {
        font-size: 10px;
        color: #43a56d
      }

      .bars {
        height: 130px;
        display: flex;
        align-items: end;
        gap: 9px;
        padding: 8px 0;
        border-bottom: 1px solid #eee9ef
      }

      .bars span {
        flex: 1;
        border-radius: 7px 7px 2px 2px;
        background: linear-gradient(180deg, #8a68dc, #dcd3f3);
        transform-origin: bottom;
        animation: barRise 1.2s cubic-bezier(.2, .8, .2, 1) both
      }

      .billing-caption {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 9px;
        color: #99939e
      }

      .pipeline {
        display: grid;
        gap: 11px;
        margin-top: 25px
      }

      .pipeline-row {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 11px;
        border: 1px solid #eee9ef;
        border-radius: 13px
      }

      .pipeline-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #f1edfb;
        color: #6e4dc2;
        display: grid;
        place-items: center
      }

      .pipeline-row strong {
        font-size: 11px
      }

      .pipeline-row small {
        display: block;
        color: #99939e;
        font-size: 9px;
        margin-top: 3px
      }

      .pipeline-status {
        font-size: 9px;
        padding: 5px 8px;
        border-radius: 999px;
        background: #e8f7ef;
        color: #339562
      }

      .pipeline-status.blue {
        background: #eaf2ff;
        color: #4d79ca
      }

      .process-line {
        position: relative;
        margin: 28px 0 12px;
        height: 5px;
        background: #ece8ef;
        border-radius: 99px;
        overflow: hidden
      }

      .process-line:after {
        content: "";
        display: block;
        width: 54%;
        height: 100%;
        background: linear-gradient(90deg, #6e4ccf, #6b94e7);
        border-radius: 99px;
        animation: progressMove 2.8s ease-in-out infinite alternate
      }

      .process-points {
        display: flex;
        justify-content: space-between;
        color: #99939e;
        font-size: 9px
      }

      .process-points b {
        color: #6e4ccf
      }

      .kpi-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 22px
      }

      .kpi {
        border: 1px solid #eee9ef;
        border-radius: 13px;
        padding: 14px
      }

      .kpi small {
        font-size: 9px;
        color: #aaa3ae
      }

      .kpi strong {
        display: block;
        font-size: 21px;
        margin-top: 6px
      }

      .kpi .up {
        color: #49a970;
        font-size: 9px;
        margin-top: 3px;
        display: block
      }

      .summary {
        position: relative;
        padding: 125px 24px 130px;
        background: linear-gradient(135deg, #211a31 0%, #302247 50%, #202c49 100%);
        color: #fff;
        overflow: hidden
      }

      .summary:before,
      .summary:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(20px);
        pointer-events: none
      }

      .summary:before {
        width: 520px;
        height: 520px;
        left: -260px;
        top: -200px;
        background: rgba(123, 86, 223, .23)
      }

      .summary:after {
        width: 520px;
        height: 520px;
        right: -280px;
        bottom: -270px;
        background: rgba(93, 139, 234, .2)
      }

      .summary-inner {
        max-width: 1120px;
        margin: auto;
        position: relative;
        z-index: 1
      }

      .summary-copy {
        max-width: 760px
      }

      .summary-kicker {
        font-size: 11px;
        letter-spacing: .15em;
        font-weight: 800;
        color: #b9a8ee
      }

      .summary h2 {
        font-size: clamp(42px, 5.8vw, 72px);
        line-height: 1;
        letter-spacing: -.055em;
        margin: 15px 0;
        color: white;
      }

      .summary p {
        font-size: 18px;
        line-height: 1.55;
        color: #d3cedd;
        max-width: 680px
      }

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

      .summary-actions .btn {
        border-radius: 12px;
        padding: 13px 21px
      }

      .btn-light {
        background: #fff;
        color: #27212f
      }

      .btn-soft {
        background: rgba(255, 255, 255, .1);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .16)
      }

      .summary-visual {
        margin-top: 65px;
        position: relative;
        min-height: 390px;
        display: grid;
        place-items: center
      }

      .summary-stage {
        position: relative;
        width: min(880px, 100%);
        height: 370px
      }

      .summary-core {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 145px;
        height: 145px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        text-align: center;
        background: radial-gradient(circle at 35% 30%, #9b7dea, #6746cf 60%, #4b3892);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 80px rgba(125, 88, 223, .34);
        animation: corePulse 3s ease-in-out infinite
      }

      .summary-core strong {
        font-size: 26px
      }

      .summary-core small {
        font-size: 8px;
        letter-spacing: .16em;
        color: #e3ddf1
      }

      .summary-orbit {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 50%;
        width: 610px;
        height: 250px;
        animation: orbitSpin 16s linear infinite
      }

      .summary-orbit.two {
        width: 740px;
        height: 320px;
        transform: translate(-50%, -50%) rotate(-14deg);
        animation-duration: 22s
      }

      .summary-node {
        position: absolute;
        min-width: 175px;
        padding: 15px 17px;
        border-radius: 17px;
        background: rgba(255, 255, 255, .09);
        border: 1px solid rgba(255, 255, 255, .15);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
        animation: nodeFloat 4s ease-in-out infinite
      }

      .summary-node strong {
        font-size: 12px;
        display: block
      }

      .summary-node span {
        font-size: 9px;
        color: #c8c1d5;
        display: block;
        margin-top: 4px
      }

      .summary-node i {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .11);
        margin-bottom: 9px;
        color: #c7b7f7
      }

      .summary-node.n1 {
        left: 2%;
        top: 34%;
        animation-delay: .2s
      }

      .summary-node.n2 {
        right: 2%;
        top: 18%;
        animation-delay: .8s
      }

      .summary-node.n3 {
        right: 7%;
        bottom: 7%;
        animation-delay: 1.4s
      }

      .summary-node.n4 {
        left: 7%;
        bottom: 5%;
        animation-delay: 2s
      }

      .summary-connector {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
        transform-origin: left center;
        opacity: .6
      }

      .summary-connector.c1 {
        width: 210px;
        left: 20%;
        top: 47%;
        transform: rotate(9deg)
      }

      .summary-connector.c2 {
        width: 220px;
        right: 20%;
        top: 40%;
        transform: rotate(167deg)
      }

      .summary-connector.c3 {
        width: 215px;
        right: 20%;
        bottom: 34%;
        transform: rotate(195deg)
      }

      .summary-connector.c4 {
        width: 220px;
        left: 19%;
        bottom: 31%;
        transform: rotate(-9deg)
      }

   

      @keyframes floatCard {

        0%,
        100% {
          transform: translateY(0)
        }

        50% {
          transform: translateY(-9px)
        }
      }

      @keyframes cursorMove {

        0%,
        100% {
          transform: translate(0, 0)
        }

        50% {
          transform: translate(22px, -18px)
        }
      }

      @keyframes pulseRing {

        0%,
        100% {
          transform: scale(1)
        }

        50% {
          transform: scale(1.025)
        }
      }

      @keyframes blink {
        50% {
          opacity: .25
        }
      }

      @keyframes barRise {
        from {
          transform: scaleY(0)
        }

        to {
          transform: scaleY(1)
        }
      }

      @keyframes progressMove {
        from {
          width: 38%
        }

        to {
          width: 82%
        }
      }

      @keyframes corePulse {

        0%,
        100% {
          transform: translate(-50%, -50%) scale(1)
        }

        50% {
          transform: translate(-50%, -50%) scale(1.045)
        }
      }

      @keyframes nodeFloat {

        0%,
        100% {
          transform: translateY(0)
        }

        50% {
          transform: translateY(-7px)
        }
      }

      @keyframes orbitSpin {
        to {
          transform: translate(-50%, -50%) rotate(360deg)
        }
      }

      @media(max-width:900px) {
        .hero-window-body {
          grid-template-columns: 1fr
        }

        .hero-side {
          display: none
        }

        .hero-search {
          display: none
        }

        .hero-float {
          right: 12px;
          top: 18px;
          transform: scale(.9)
        }

        .hero-cursor {
          display: none
        }


        .summary-stage {
          transform: scale(.82);
          transform-origin: center
        }

        .summary {
          padding-top: 100px
        }
      }

      @media(max-width:620px) {
        .solution-hero {
          padding-top: 70px
        }

        .solution-title {
          font-size: 48px
        }

        .solution-description {
          font-size: 17px
        }

        .features {
          padding-top: 85px
        }

        

        .illustration-card {
          min-height: 285px;
          padding: 20px
        }

        .summary-stage {
          transform: scale(.58);
          width: 880px
        }

        .summary-visual {
          min-height: 290px;
          margin-left: -160px;
          margin-right: -160px
        }

        .summary h2 {
          font-size: 43px
        }
      }

      /* V3 · vertical-specific hero and lightweight illustration placeholders */
      .hero-window-body {
        min-height: 355px
      }

      .hero-law .hero-main,
      .hero-proc .hero-main,
      .hero-ases .hero-main,
      .hero-cons .hero-main {
        padding: 28px 30px
      }

      .law-hero-case,
      .cons-project {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        padding: 18px;
        border: 1px solid #ece7ef;
        border-radius: 16px;
        background: #fcfbfd
      }

      .law-hero-case h2,
      .cons-project h2 {
        font-size: 22px;
        margin: 6px 0 4px;
        letter-spacing: -.03em
      }

      .law-hero-case small,
      .cons-project small {
        font-size: 8px;
        color: #a39ca7;
        letter-spacing: .1em;
        font-weight: 800
      }

      .law-hero-case span,
      .cons-project span {
        font-size: 10px;
        color: #99939e
      }

      .hero-case-status {
        font-size: 9px;
        padding: 7px 9px;
        border-radius: 999px;
        background: #e8f7ef;
        color: #2d9361;
        font-weight: 800
      }

      .law-timeline {
        margin-top: 17px;
        display: grid;
        gap: 0
      }

      .law-timeline>div {
        display: grid;
        grid-template-columns: 16px 1fr auto;
        gap: 9px;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid #eee9ef;
        font-size: 10px
      }

      .law-timeline>div:last-child {
        border: 0
      }

      .law-timeline small {
        color: #a29ba6
      }

      .timeline-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d7d2dc
      }

      .timeline-dot.done {
        background: #67b986;
        box-shadow: 0 0 0 4px rgba(103, 185, 134, .1)
      }

      .timeline-dot.live {
        background: #7451d1;
        box-shadow: 0 0 0 4px rgba(116, 81, 209, .1);
        animation: blink 1.5s infinite
      }

      .proc-hero-list {
        display: grid;
        gap: 9px;
        margin-top: 16px
      }

      .proc-alert {
        display: grid;
        grid-template-columns: 32px 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid #ece8ef;
        border-radius: 13px
      }

      .proc-alert.urgent {
        background: #fcfaff;
        border-color: #e4daf3
      }

      .proc-alert .proc-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: #f0ebfc;
        color: #704dc2;
        display: grid;
        place-items: center
      }

      .proc-alert strong {
        font-size: 11px;
        display: block
      }

      .proc-alert small {
        font-size: 8px;
        color: #9e98a2;
        display: block;
        margin-top: 3px
      }

      .proc-alert>b {
        font-size: 10px;
        color: #704dc2
      }

      .proc-flow {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-size: 8px;
        color: #9b94a0;
        letter-spacing: .08em
      }

      .proc-flow strong {
        color: #6947c8
      }

      .ases-hero-grid {
        display: grid;
        grid-template-columns: 1.5fr .7fr .7fr;
        gap: 10px;
        margin-top: 15px
      }

      .ases-client,
      .ases-kpi {
        padding: 15px;
        border: 1px solid #ece8ef;
        border-radius: 14px;
        background: #fff
      }

      .ases-client small,
      .ases-kpi small {
        font-size: 8px;
        color: #aaa3ae;
        letter-spacing: .08em
      }

      .ases-client h2 {
        font-size: 20px;
        margin: 7px 0 4px
      }

      .ases-client span,
      .ases-kpi span {
        font-size: 9px;
        color: #99939e
      }

      .client-progress,
      .hour-meter {
        height: 6px;
        background: #eeeaf0;
        border-radius: 99px;
        overflow: hidden;
        margin: 16px 0 7px
      }

      .client-progress i,
      .hour-meter span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #7350cf, #5d8bea);
        border-radius: 99px
      }

      .ases-kpi strong {
        display: block;
        font-size: 25px;
        margin: 10px 0 4px
      }

      .ases-next {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 13px;
        border: 1px solid #ece8ef;
        border-radius: 13px;
        margin-top: 10px
      }

      .ases-next>span {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        background: #f1edfb;
        color: #704dc2;
        display: grid;
        place-items: center
      }

      .ases-next strong {
        display: block;
        font-size: 10px
      }

      .ases-next small {
        display: block;
        font-size: 8px;
        color: #99939e;
        margin-top: 2px
      }

      .ases-next b {
        margin-left: auto;
        font-size: 9px;
        color: #6d4ac8
      }

      .cons-project>strong {
        font-size: 27px;
        color: #6c49ce
      }

      .cons-columns {
        display: grid;
        grid-template-columns: 1.3fr 1fr .8fr;
        gap: 10px;
        margin-top: 12px
      }

      .cons-columns>div {
        border: 1px solid #ece8ef;
        border-radius: 13px;
        padding: 13px
      }

      .cons-columns small {
        font-size: 8px;
        color: #aaa3ae;
        letter-spacing: .08em
      }

      .task-mini {
        font-size: 9px;
        padding: 9px 0;
        border-bottom: 1px solid #eee9ef
      }

      .task-mini i {
        color: #6f4dcc;
        margin-right: 5px
      }

      .task-mini b {
        float: right;
        color: #99939e;
        font-weight: 500
      }

      .cons-columns>div>strong {
        display: block;
        font-size: 22px;
        margin-top: 10px
      }

      .cons-columns em {
        font-style: normal;
        font-size: 8px;
        color: #99939e
      }

      .margin-big {
        color: #4aa56e
      }

      .is-visible .feature-placeholder,
      .feature-placeholder.is-visible {
        opacity: 1;
        transform: none
      }

      .ph-calendar-head,
      .ph-chart-head,
      .ph-timer-meta {
        display: flex;
        justify-content: space-between;
        align-items: center
      }

     

      .ph-main-title {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 30px
      }

      .ph-main-title>i {
        width: 45px;
        height: 45px;
        border-radius: 13px;
        background: #f0ebfc;
        color: #6948c9;
        display: grid;
        place-items: center;
        font-size: 20px
      }

      .ph-main-title strong {
        display: block;
        font-size: 17px
      }

      .ph-main-title small {
        display: block;
        font-size: 9px;
        color: #9d96a1;
        margin-top: 3px
      }

      .ph-lines {
        display: grid;
        gap: 9px;
        margin: 25px 0
      }

      .ph-lines span {
        height: 8px;
        border-radius: 10px;
        background: #f0edf1
      }

      .ph-lines span:nth-child(1) {
        width: 89%
      }

      .ph-lines span:nth-child(2) {
        width: 64%
      }

      .ph-lines span:nth-child(3) {
        width: 46%
      }

      .ph-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
      }

      .ph-grid>div {
        padding: 12px;
        border: 1px solid #eee9ef;
        border-radius: 12px
      }

      .ph-grid small {
        display: block;
        color: #aaa3ae;
        font-size: 8px
      }

      .ph-grid b {
        display: block;
        font-size: 11px;
        margin-top: 6px
      }

      .ph-calendar-head {
        margin-top: 23px
      }

      .ph-calendar-head strong {
        font-size: 15px
      }

      .ph-calendar-head span {
        font-size: 9px;
        color: #aaa3ae
      }

      .ph-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        margin-top: 15px
      }

      .ph-calendar-grid i {
        height: 29px;
        display: grid;
        place-items: center;
        border: 1px solid #eee9ef;
        border-radius: 7px;
        font-style: normal;
        font-size: 9px;
        color: #77717d
      }

      .ph-calendar-grid i.active {
        background: #f0ebfc;
        color: #6948c9;
        border-color: #ded2f1;
        font-weight: 700
      }

      .ph-note {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px;
        margin-top: 14px;
        border: 1px solid #eee9ef;
        border-radius: 12px
      }

      .ph-note>i {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: #f0ebfc;
        color: #704dc2;
        display: grid;
        place-items: center
      }

      .ph-note b {
        display: block;
        font-size: 10px
      }

      .ph-note small {
        display: block;
        color: #99939e;
        font-size: 8px;
        margin-top: 3px
      }

      

      .ph-chart-head strong {
        display: block;
        font-size: 28px;
        margin-top: 4px;
        letter-spacing: -.04em
      }

      .ph-chart-head small {
        font-size: 8px;
        color: #aaa3ae
      }

      .ph-chart-head>span {
        color: #55a974
      }

      .ph-bars {
        height: 150px;
        display: flex;
        align-items: end;
        gap: 9px;
        border-bottom: 1px solid #eee9ef;
        margin-top: 15px
      }

      .ph-bars i {
        flex: 1;
        border-radius: 6px 6px 2px 2px;
        background: linear-gradient(180deg, #8a68dc, #dcd3f3);
        transform-origin: bottom;
        animation: barRise 1.1s cubic-bezier(.2, .8, .2, 1) both
      }

      .ph-chart-meta {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 9px;
        color: #99939e
      }

      .ph-chart-meta b {
        color: #6846d8
      }

      .ph-inbox {
        display: grid;
        gap: 8px;
        margin-top: 25px
      }

      .ph-inbox>div {
        display: grid;
        grid-template-columns: 8px 1fr;
        gap: 9px;
        padding: 13px;
        border: 1px solid #eee9ef;
        border-radius: 12px
      }

      .ph-inbox .ph-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #6e4ccf;
        margin-top: 4px
      }

      .ph-inbox strong {
        font-size: 10px
      }

      .ph-inbox small {
        display: block;
        color: #99939e;
        font-size: 8px;
        margin-top: 3px
      }

      .ph-kanban {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 25px
      }

      .ph-kanban>div {
        min-height: 170px;
        background: #faf9fb;
        border: 1px solid #eee9ef;
        border-radius: 12px;
        padding: 10px
      }

      .ph-kanban small {
        display: block;
        font-size: 7px;
        color: #aaa3ae;
        letter-spacing: .08em;
        margin-bottom: 10px
      }

      .ph-kanban span {
        display: block;
        padding: 9px 8px;
        background: #fff;
        border: 1px solid #eee9ef;
        border-radius: 8px;
        font-size: 8px;
        margin-bottom: 7px
      }

      .summary-law .summary-core {
        background: radial-gradient(circle at 35% 30%, #9b7dea, #6746cf 60%, #4b3892)
      }

      .summary-procuradores .summary-core {
        background: radial-gradient(circle at 35% 30%, #7f8eea, #5365bd 60%, #39477e)
      }

      .summary-asesorias .summary-core {
        background: radial-gradient(circle at 35% 30%, #a276dd, #7551b6 60%, #523b7e)
      }

      .summary-consultorias .summary-core {
        background: radial-gradient(circle at 35% 30%, #6fa7e7, #4c79bd 60%, #36567e)
      }

      @media(max-width:900px) {

        .ases-hero-grid,
        .cons-columns {
          grid-template-columns: 1fr
        }

        .proc-flow {
          flex-wrap: wrap
        }

        .hero-proc .hero-main,
        .hero-ases .hero-main,
        .hero-cons .hero-main {
          padding: 20px
        }

        .feature-placeholder {
          min-height: 285px
        }
      }