 <style>
      :root {
        --matfy-purple: #6846d8;
        --matfy-purple-2: #7c55d9;
        --matfy-blue: #5d8bea;
        --matfy-ink: #201d28;
        --matfy-muted: #68636f;
        --matfy-bg: #faf8f6;
        --matfy-line: #e9e5ed;
      }

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

      .solution-hero {
        position: relative;
        padding: 92px 24px 74px;
        background:
          radial-gradient(circle at 18% 20%, rgba(125, 85, 217, .13), transparent 30%),
          radial-gradient(circle at 84% 34%, rgba(93, 139, 234, .12), transparent 28%),
          linear-gradient(180deg, #fff 0%, #fbfafc 100%);
        border-bottom: 1px solid #eeeaf0
      }

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

      .solution-orb.one {
        width: 280px;
        height: 280px;
        left: -130px;
        top: 160px;
        background: rgba(123, 80, 218, .07)
      }

      .solution-orb.two {
        width: 360px;
        height: 360px;
        right: -170px;
        top: 80px;
        background: rgba(91, 138, 234, .08)
      }

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

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

      .solution-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 13px;
        border: 1px solid #e6def5;
        border-radius: 999px;
        background: rgba(245, 241, 253, .85);
        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(48px, 6.4vw, 82px);
        line-height: .98;
        letter-spacing: -.055em;
        margin: 22px 0 22px;
        font-weight: 700
      }

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

      .solution-description {
        max-width: 750px;
        margin: 0 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
      }

      .solution-preview {
        max-width: 1080px;
        margin: 0 auto;
        position: relative
      }

      .preview-glow {
        position: absolute;
        inset: 8% 12% -10%;
        background: radial-gradient(ellipse, rgba(109, 73, 206, .16), transparent 65%);
        filter: blur(24px)
      }

      .app-window {
        position: relative;
        background: #fff;
        border: 1px solid #e6e2e9;
        border-radius: 22px;
        box-shadow: 0 28px 70px rgba(43, 34, 58, .13), 0 3px 12px rgba(43, 34, 58, .06);
        overflow: hidden
      }

      .app-top {
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        border-bottom: 1px solid #eeeaf0;
        background: #fcfbfd
      }

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

      .window-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d8d4dc
      }

      .app-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 700
      }

      .app-logo {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, #7149d5, #5c8ce8);
        font-weight: 800
      }

      .app-search {
        width: 220px;
        height: 30px;
        border: 1px solid #e8e4eb;
        border-radius: 9px;
        color: #aaa5af;
        font-size: 11px;
        display: flex;
        align-items: center;
        padding: 0 11px;
        gap: 7px
      }

      .app-body {
        display: grid;
        grid-template-columns: 190px 1fr;
        min-height: 330px
      }

      .app-side {
        padding: 20px 14px;
        background: #faf9fb;
        border-right: 1px solid #eeeaf0
      }

      .side-label {
        font-size: 10px;
        letter-spacing: .09em;
        color: #aaa3ae;
        font-weight: 700;
        margin: 12px 9px 8px
      }

      .side-item {
        padding: 10px 10px;
        border-radius: 10px;
        color: #66616b;
        font-size: 12px;
        margin: 3px 0;
        display: flex;
        gap: 9px;
        align-items: center
      }

      .side-item.active {
        background: #f0ebfc;
        color: #6846d8;
        font-weight: 700
      }

      .app-main {
        padding: 25px 28px;
        background: #fff
      }

      .main-kicker {
        font-size: 10px;
        color: #9c96a0;
        letter-spacing: .09em;
        font-weight: 700
      }

      .main-title {
        font-size: 24px;
        letter-spacing: -.03em;
        margin: 6px 0 20px
      }

      .data-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
      }

      .data-card {
        border: 1px solid #ebe7ee;
        border-radius: 14px;
        padding: 15px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(42, 35, 51, .04)
      }

      .data-card small {
        color: #99939e;
        font-size: 10px
      }

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

      .data-list {
        margin-top: 14px;
        border: 1px solid #ece8ef;
        border-radius: 14px;
        overflow: hidden
      }

      .data-row {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 80px;
        gap: 10px;
        padding: 13px 15px;
        font-size: 11px;
        border-bottom: 1px solid #eeeaf0;
        align-items: center
      }

      .data-row:last-child {
        border-bottom: 0
      }

      .data-row.head {
        font-size: 9px;
        color: #aaa3ae;
        text-transform: uppercase;
        letter-spacing: .06em;
        background: #fcfbfd
      }

      .status {
        display: inline-flex;
        width: max-content;
        padding: 5px 8px;
        border-radius: 999px;
        font-size: 9px;
        background: #eeeafa;
        color: #6c4cc0
      }

      .status.green {
        background: #e9f7f0;
        color: #2c9662
      }

      .status.orange {
        background: #fff2e7;
        color: #c97c34
      }

      .floating-note {
        position: absolute;
        right: -24px;
        top: 74px;
        background: #fff;
        border: 1px solid #ebe6f0;
        border-radius: 15px;
        padding: 12px 14px;
        box-shadow: 0 16px 35px rgba(43, 34, 58, .12);
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 205px
      }

      .note-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: #f0ebfc;
        color: #6b4ac6;
        display: grid;
        place-items: center
      }

      .floating-note strong {
        font-size: 11px;
        display: block
      }

      .floating-note span {
        font-size: 10px;
        color: #99939e
      }

      .features {
        padding: 110px 24px 125px;
        background: var(--matfy-bg)
      }

      .features-inner {
        max-width: 1180px;
        margin: auto
      }

      .features-head {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 54px
      }

      .features-kicker {
        color: #7452b6;
        font-size: 12px;
        letter-spacing: .13em;
        font-weight: 700
      }

      .features-title {
        font-size: clamp(38px, 5vw, 62px);
        line-height: 1.02;
        letter-spacing: -.05em;
        margin: 13px 0
      }

      .features-subtitle {
        color: #6b6670;
        font-size: 18px;
        line-height: 1.5
      }

      .feature-card {
        background: #fff;
        border: 1px solid #e9e5ec;
        border-radius: 20px;
        padding: 27px 24px 30px;
        min-height: 240px;
        box-shadow: 0 10px 30px rgba(45, 36, 58, .035);
        position: relative;
        overflow: hidden
      }

      .feature-card:after {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        right: -65px;
        bottom: -65px;
        border-radius: 50%;
        background: rgba(111, 74, 210, .06)
      }

      .feature-number {
        font-size: 11px;
        color: #a49ca9;
        letter-spacing: .1em
      }

      .feature-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: #f1edfb;
        color: #6948c9;
        margin: 22px 0 18px;
        font-size: 19px
      }

      .feature-card h3 {
        font-size: 20px;
        letter-spacing: -.03em;
        margin: 0 0 9px
      }

      .feature-card p {
        font-size: 14px;
        line-height: 1.55;
        color: #716b76;
        margin: 0
      }

      .solution-bottom {
        padding: 90px 24px;
        background: #fff;
        text-align: center
      }

      .solution-bottom h2 {
        font-size: clamp(36px, 5vw, 58px);
        letter-spacing: -.05em;
        margin: 0 auto 16px;
        max-width: 800px
      }

      .solution-bottom p {
        max-width: 650px;
        margin: 0 auto;
        color: #6d6872;
        font-size: 17px;
        line-height: 1.5
      }

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

        .app-search {
          display: none
        }

        .floating-note {
          right: 10px;
          top: 66px
        }
      }

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

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

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

        .app-body {
          grid-template-columns: 1fr
        }

        .app-side {
          display: none
        }

        .app-main {
          padding: 18px
        }

        .data-grid {
          grid-template-columns: 1fr
        }

        .data-row {
          grid-template-columns: 1.4fr .8fr
        }

        .data-row>:nth-child(3) {
          display: none
        }

        .floating-note {
          position: relative;
          right: auto;
          top: auto;
          margin: 14px auto 0;
          width: max-content
        }

     
      }
    </style>