:root {
    --ud3-blue: #1546ad;
    --ud3-blue-dark: #0b2f77;
    --ud3-orange: #ff7200;
    --ud3-ink: #101828;
    --ud3-copy: #596273;
    --ud3-line: #e5eaf2;
    --ud3-white: #ffffff;
  }

  * {
    box-sizing: border-box
  }

  html {
    scroll-behavior: smooth
  }

  body {
    margin: 0;
    color: var(--ud3-ink);
    background: #fff;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    overflow-x: hidden;
  }

  .ud3-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 680px;
    display: flex;
    align-items: center;
    padding: 45px 24px 50px;
    background: radial-gradient(circle at 76% 45%, rgb(0 103 255 / 21%), transparent 28%), linear-gradient(110deg, #fffdfb 0%, #fff9f3 54%, #fff 100%)
  }

  .ud3-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .58;
    background-image: radial-gradient(rgb(0 113 255 / 24%) 1px, transparent 1px);
    background-size: 16px 16px;
    mask-image: linear-gradient(90deg, transparent 35%, #000 72%, transparent)
  }

  .ud3-hero__container {
    width: min(1180px, 100%);
    margin-inline: auto
  }

  .ud3-hero__grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(48px, 7vw, 92px);
    align-items: self-start
  }

  .ud3-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--ud3-blue-dark);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase
  }

  .ud3-hero__eyebrow::before {
    content: "";
    width: 3px;
    height: 22px;
    border-radius: 10px;
    background: linear-gradient(var(--ud3-orange), var(--ud3-blue))
  }

  .ud3-hero h1 {
    max-width: 650px;
    min-height: 230px;
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(42px, 4.70vw, 68px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -3.5px
  }

  .ud3-hero__rotator-wrap {
    display: block;
    min-height: 1.14em;
    margin-top: 7px;
    overflow: hidden
  }

  .ud3-hero__rotator {
    display: inline-block;
    color: var(--ud3-blue);
    background: linear-gradient(90deg, var(--ud3-blue), #2876df 62%, var(--ud3-orange));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ud3-word-in .55s cubic-bezier(.2, .8, .2, 1) both
  }

  .ud3-hero__rotator.is-changing {
    animation: ud3-word-out .28s ease both
  }

  @keyframes ud3-word-in {
    from {
      opacity: 0;
      transform: translateY(38px)
    }

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

  @keyframes ud3-word-out {
    from {
      opacity: 1;
      transform: translateY(0)
    }

    to {
      opacity: 0;
      transform: translateY(-24px)
    }
  }

  .ud3-hero__description {
    max-width: 620px;
    margin: 24px 0 0;
    color: #5a6474;
    font-size: 17px;
    line-height: 1.75
  }

  .ud3-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
  }

  .ud3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    background: var(--ud3-blue);
    box-shadow: 0 12px 30px rgba(21, 70, 173, .22);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease
  }

  .ud3-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 34px rgba(21, 70, 173, .28);
    color:#fff;
  }

  .ud3-btn--outline {
    color: var(--ud3-blue-dark);
    border-color: #dce4f2;
    background: rgba(255, 255, 255, .86);
    box-shadow: none
  }

  .ud3-btn--outline:hover {
    border-color: var(--ud3-orange);
    color: var(--ud3-orange);
    box-shadow: none
  }

  .ud3-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 34px
  }

  .ud3-hero__feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #384152;
    font-size: 12px;
    font-weight: 700
  }

  .ud3-hero__feature i {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(255, 114, 0, .2);
    border-radius: 50%;
    color: var(--ud3-orange);
    background: #fff8f1;
    font-style: normal
  }

  .ud3-hero__visual {
    margin-top: 4rem;
    position: relative;
    min-height: 450px;
    display: grid;
    place-items: center
  }

  .ud3-hero__frame {
    position: relative;
    width: min(420px, 86%);
    aspect-ratio: 1 / .95;
    padding: 22px;
    border: 5px solid var(--ud3-orange);
    border-radius: 38px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 28px 70px rgba(50, 40, 20, .15);
    transform: rotate(1.5deg)
  }

  .ud3-hero__screen {
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid #e4e9f1;
    border-radius: 23px;
    background: linear-gradient(155deg, #f7faff, #edf3ff 55%, #fff5ea)
  }

  .ud3-hero__screen-top {
    display: flex;
    gap: 6px;
    padding: 13px 15px;
    border-bottom: 1px solid #e1e7f0;
    background: rgba(255, 255, 255, .72)
  }

  .ud3-hero__screen-top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cad3e2
  }

  .ud3-hero__screen-top span:first-child {
    background: #ff7200
  }

  .ud3-hero__screen-top span:nth-child(2) {
    background: #f7be55
  }

  .ud3-hero__screen-top span:nth-child(3) {
    background: #1546ad
  }

  .ud3-code {
    padding: 33px 28px
  }

  .ud3-code__title {
    width: 72%;
    height: 16px;
    margin-bottom: 24px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--ud3-blue), #6a9fe8)
  }

  .ud3-code__line {
    height: 8px;
    margin: 12px 0;
    border-radius: 9px;
    background: #cbd7e9
  }

  .ud3-code__line:nth-child(2) {
    width: 84%
  }

  .ud3-code__line:nth-child(3) {
    width: 65%
  }

  .ud3-code__line:nth-child(4) {
    width: 92%;
    background: #ffd0ac
  }

  .ud3-code__line:nth-child(5) {
    width: 74%
  }

  .ud3-code__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px
  }

  .ud3-code__card {
    min-height: 95px;
    padding: 16px;
    border: 1px solid #dfe6f1;
    border-radius: 15px;
    color: var(--ud3-blue-dark);
    background: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 800
  }

  .ud3-code__card span {
    display: block;
    margin-top: 9px;
    color: #7a8494;
    font-size: 10px;
    font-weight: 600
  }

  .ud3-float-card {
    position: absolute;
    z-index: 2;
    padding: 13px 16px;
    border: 1px solid rgba(21, 70, 173, .12);
    border-radius: 14px;
    color: var(--ud3-blue-dark);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 38px rgba(25, 40, 80, .14);
    font-size: 12px;
    font-weight: 800;
    animation: ud3-float 4s ease-in-out infinite
  }

  .ud3-float-card--one {
    top: 17%;
    left: 0
  }

  .ud3-float-card--two {
    top: 29%;
    right: -2%;
    animation-delay: -1.2s
  }

  .ud3-float-card--three {
    bottom: 13%;
    left: 3%;
    animation-delay: -2.2s
  }

  .ud3-float-card b {
    display: inline-grid;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--ud3-blue), var(--ud3-orange))
  }

  @keyframes ud3-float {

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

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

  .ud3-about {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 96px 24px;
    background: radial-gradient(circle at 3% 12%, rgba(255, 114, 0, .11), transparent 23%), radial-gradient(circle at 96% 90%, rgba(21, 70, 173, .11), transparent 25%), linear-gradient(180deg, #fff 0%, #fbfcff 100%)
  }

  .ud3-about::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .55;
    background-image: radial-gradient(rgba(21, 70, 173, .12) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000)
  }

  .ud3-about__orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none
  }

  .ud3-about__orb--one {
    top: 42px;
    right: -70px;
    width: 190px;
    height: 190px;
    border: 36px solid rgba(255, 114, 0, .065)
  }

  .ud3-about__orb--two {
    bottom: 35px;
    left: -85px;
    width: 220px;
    height: 220px;
    border: 42px solid rgba(21, 70, 173, .055)
  }

  .ud3-about__container {
    width: min(1180px, 100%);
    margin-inline: auto
  }

  .ud3-about__grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(48px, 7vw, 90px);
    align-items: center
  }

  .ud3-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 21px;
    color: var(--ud3-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase
  }

  .ud3-about__eyebrow::before {
    content: "";
    width: 32px;
    height: 3px;
    border-radius: 99px;
    background: var(--ud3-orange)
  }

  .ud3-about h2 {
    max-width: 570px;
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(37px, 4.7vw, 62px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.8px
  }

  .ud3-about h2 span {
    display: block;
    color: var(--ud3-blue)
  }

  .ud3-about__accent {
    width: 86px;
    height: 5px;
    margin-top: 29px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ud3-orange), var(--ud3-blue))
  }

  .ud3-about__content {
    position: relative;
    padding: 8px 0 8px 46px;
    border-left: 1px solid var(--ud3-line)
  }

  .ud3-about__content::before {
    content: "";
    position: absolute;
    top: 8px;
    left: -2px;
    width: 3px;
    height: 72px;
    border-radius: 99px;
    background: linear-gradient(var(--ud3-orange), var(--ud3-blue))
  }

  .ud3-about__content p {
    margin: 0 0 18px;
    color: var(--ud3-copy);
    font-size: 16px;
    line-height: 1.86
  }

  .ud3-about__content .ud3-about__lead {
    color: #25314a;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.66
  }

  .ud3-about__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px
  }

  .ud3-about__point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(21, 70, 173, .14);
    border-radius: 99px;
    color: var(--ud3-blue-dark);
    background: rgba(245, 248, 255, .88);
    font-size: 13px;
    font-weight: 750
  }

  .ud3-about__point::before {
    content: "✓";
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ud3-orange);
    font-size: 11px
  }

  .ud3-about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 68px;
    overflow: hidden;
    border: 1px solid var(--ud3-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 70px rgba(16, 24, 40, .08);
    backdrop-filter: blur(10px)
  }

  .ud3-about__stat {
    position: relative;
    min-height: 130px;
    padding: 29px 20px;
    text-align: center;
    transition: background .25s ease, transform .25s ease
  }

  .ud3-about__stat:hover {
    background: linear-gradient(180deg, #fff8f2, #f7f9ff);
    transform: translateY(-3px)
  }

  .ud3-about__stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    background: var(--ud3-line)
  }

  .ud3-about__stat strong {
    display: block;
    margin-bottom: 9px;
    color: var(--ud3-blue);
    font-size: 36px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -1.5px
  }

  .ud3-about__stat span {
    color: #667085;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4
  }

  @media (max-width:900px) {
    .ud3-hero {
      min-height: auto;
      padding-block: 72px
    }

    .ud3-hero__grid {
      grid-template-columns: 1fr
    }

    .ud3-hero h1 {
      min-height: 205px
    }

    .ud3-hero__visual {
      min-height: 420px
    }

    .ud3-about {
      padding-block: 72px
    }

    .ud3-about__grid {
      grid-template-columns: 1fr
    }

    .ud3-about__content {
      padding: 0;
      border-left: 0
    }

    .ud3-about__content::before {
      display: none
    }

    .ud3-about__stats {
      grid-template-columns: repeat(2, 1fr)
    }

    .ud3-about__stat:nth-child(2)::after {
      display: none
    }

    .ud3-about__stat:nth-child(-n+2) {
      border-bottom: 1px solid var(--ud3-line)
    }
  }

  @media (max-width:560px) {
    .ud3-hero {
      padding: 56px 18px 62px
    }

    .ud3-hero h1 {
      min-height: 174px;
      font-size: 43px;
      letter-spacing: -2.2px
    }

    .ud3-hero__description {
      font-size: 15px
    }

    .ud3-hero__visual {
      min-height: 350px
    }

    .ud3-hero__frame {
      width: 90%;
      border-width: 4px;
      border-radius: 28px
    }

    .ud3-float-card {
      padding: 10px 11px;
      font-size: 10px
    }

    .ud3-code {
      padding: 24px 19px
    }

    .ud3-about {
      padding: 58px 18px
    }

    .ud3-about h2 {
      font-size: 38px;
      letter-spacing: -1.8px
    }

    .ud3-about__content .ud3-about__lead {
      font-size: 17px
    }

    .ud3-about__stats {
      grid-template-columns: 1fr;
      margin-top: 48px
    }

    .ud3-about__stat:nth-child(-n+3) {
      border-bottom: 1px solid var(--ud3-line)
    }

    .ud3-about__stat::after {
      display: none
    }
  }

  @media (prefers-reduced-motion:reduce) {
    * {
      scroll-behavior: auto !important;
      transition: none !important
    }
  }

  /* .ud3-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 10%;
    right: 3%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(21, 70, 173, .08), rgba(255, 114, 0, .10));
    filter: blur(1px)
  } */

  @keyframes ud3-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 114, 0, .28)
    }

    70% {
      box-shadow: 0 0 0 8px rgba(255, 114, 0, 0)
    }

    100% {
      box-shadow: 0 0 0 0 rgba(255, 114, 0, 0)
    }
  }

  .ud3-hero h1 {
    min-height: 238px;
    max-width: 680px;
    font-size: clamp(42px, 4.70vw, 68px);
    line-height: 1.02;
    letter-spacing: -3.8px;
    text-wrap: balance
  }

  .ud3-hero__rotator-wrap {
    position: relative;
    min-height: 1.18em;
    margin-top: 11px;
    padding-bottom: 9px
  }

  .ud3-hero__rotator-wrap::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 0;
    width: min(330px, 82%);
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ud3-orange), #ffb477 58%, transparent);
    transform: skewX(-18deg)
  }

  .ud3-hero__rotator {
    background: linear-gradient(92deg, #1546ad 0%, #2373df 52%, #ff7200 100%);
    background-clip: text;
    -webkit-background-clip: text
  }

  .ud3-hero__description {
    max-width: 590px;
    margin-top: 26px;
    color: #536075;
    font-size: 17px;
    line-height: 1.78
  }

  .ud3-hero__actions {
    margin-top: 32px
  }

  .ud3-btn {
    min-height: 54px;
    padding-inline: 25px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d3b96, #1a5ed1);
    box-shadow: 0 16px 35px rgba(21, 70, 173, .23)
  }

  .ud3-btn:first-child::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff9a4d;
    box-shadow: 0 0 0 4px rgba(255, 154, 77, .16)
  }

  .ud3-btn--outline {
    color: #173d7f;
    border-color: rgba(21, 70, 173, .16);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 9px 24px rgba(35, 55, 90, .06)
  }

  .ud3-hero__features {
    gap: 10px;
    margin-top: 35px;
    padding-top: 22px;
    border-top: 1px solid rgba(27, 56, 100, .09)
  }

  .ud3-hero__feature {
    padding: 7px 10px 7px 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .55)
  }

  .ud3-hero__visual {
    /* min-height: 500px; */
    perspective: 1200px
  }

  .ud3-hero__visual::before,
  .ud3-hero__visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
  }

  .ud3-hero__visual::before {
    width: 420px;
    height: 420px;
    border: 1px dashed rgba(21, 70, 173, .17);
    animation: ud3-spin 28s linear infinite
  }

  .ud3-hero__visual::after {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(45, 100, 210, .16), rgba(255, 126, 31, .08) 48%, transparent 70%);
    filter: blur(12px)
  }

  @keyframes ud3-spin {
    to {
      transform: rotate(360deg)
    }
  }

  .ud3-hero__frame {
    z-index: 1;
    width: min(420px, 86%);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 30px;
    background: linear-gradient(145deg, #143d8e, #081f4f 58%, #0f347c);
    box-shadow: 0 35px 80px rgba(14, 38, 86, .27), inset 0 1px 0 rgba(255, 255, 255, .25);
    transform: rotateY(-7deg) rotateX(2deg) rotateZ(1deg);
    transition: transform .45s ease, box-shadow .45s ease
  }

  .ud3-hero__frame:hover {
    transform: rotateY(0) rotateX(0) rotateZ(0) translateY(-7px);
    box-shadow: 0 42px 90px rgba(14, 38, 86, .32)
  }

  .ud3-hero__screen {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 21px;
    background: radial-gradient(circle at 80% 10%, rgba(255, 126, 31, .22), transparent 28%), linear-gradient(155deg, #f9fbff 0%, #edf4ff 54%, #fff6ed 100%)
  }

  .ud3-hero__screen-top {
    padding: 14px 16px;
    background: rgba(255, 255, 255, .84)
  }

  .ud3-code {
    padding: 40px 30px 31px
  }

  .ud3-code__title {
    height: 19px;
    margin-bottom: 28px;
    background: linear-gradient(90deg, #123f9b, #4389ee);
    box-shadow: 0 7px 16px rgba(21, 70, 173, .13)
  }

  .ud3-code__line {
    height: 9px;
    margin: 14px 0;
    background: linear-gradient(90deg, #c6d3e7, #e9eef6)
  }

  .ud3-code__cards {
    gap: 14px;
    margin-top: 32px
  }

  .ud3-code__card {
    position: relative;
    min-height: 108px;
    padding: 19px 17px;
    overflow: hidden;
    border: 1px solid rgba(21, 70, 173, .11);
    border-radius: 17px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 24px rgba(24, 45, 82, .08)
  }

  .ud3-code__card::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -25px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 114, 0, .09)
  }

  .ud3-float-card {
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 44px rgba(16, 39, 82, .16);
    backdrop-filter: blur(14px)
  }

  .ud3-float-card--one {
    top: 13%;
    left: -2%
  }

  .ud3-float-card--two {
    top: 32%;
    right: -4%
  }

  .ud3-float-card--three {
    bottom: 10%;
    left: 1%
  }

  @media (max-width:900px) {
    .ud3-hero {
      min-height: auto
    }

    .ud3-hero__grid {
      grid-template-columns: 1fr
    }

    .ud3-hero h1 {
      min-height: 228px
    }

    .ud3-hero__visual {
      min-height: 490px
    }
  }

  @media (max-width:560px) {
    .ud3-hero {
      padding-top: 48px
    }

    .ud3-hero h1 {
      min-height: 194px;
      font-size: 42px;
      line-height: 1.06;
      letter-spacing: -2.2px
    }

    .ud3-hero__rotator-wrap::after {
      height: 4px
    }

    .ud3-hero__visual {
      min-height: 390px
    }

    .ud3-hero__visual::before {
      width: 330px;
      height: 330px
    }

    .ud3-hero__frame {
      width: 88%;
      transform: none
    }

    .ud3-float-card--one {
      left: 0
    }

    .ud3-float-card--two {
      right: 0
    }

    .ud3-float-card--three {
      left: 2%
    }
  }

  .ud3-purpose {
    position: relative;
    overflow: hidden;
    padding: 100px 24px;
    background: #fff
  }

  .ud3-purpose__container,
  .ud3-services__container {
    width: min(1180px, 100%);
    margin-inline: auto
  }

  .ud3-section-head {
    max-width: 740px;
    margin: 0 auto 54px;
    text-align: center
  }

  .ud3-section-head__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: var(--ud3-blue);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.6px;
    text-transform: uppercase
  }

  .ud3-section-head__label::before,
  .ud3-section-head__label::after {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 9px;
    background: var(--ud3-orange)
  }

  .ud3-section-head h2 {
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -2px
  }

  .ud3-section-head h2 span {
    color: var(--ud3-blue)
  }

  .ud3-section-head p {
    margin: 18px auto 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.75
  }

  .ud3-purpose__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px
  }

  .ud3-purpose-card {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    padding: 44px 42px 38px;
    border: 1px solid rgba(21, 70, 173, .11);
    border-radius: 25px;
    background: linear-gradient(145deg, #fff 0%, #fffaf4 100%);
    box-shadow: 0 22px 60px rgba(25, 42, 76, .07);
    transition: transform .3s ease, box-shadow .3s ease
  }

  .ud3-purpose-card--vision {
    background: linear-gradient(145deg, #fff 0%, #f3f7ff 100%)
  }

  .ud3-purpose-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 75px rgba(25, 42, 76, .12)
  }

  .ud3-purpose-card::after {
    content: attr(data-word);
    position: absolute;
    right: -8px;
    bottom: -18px;
    color: rgba(21, 70, 173, .045);
    font-size: 92px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -6px;
    text-transform: uppercase
  }

  .ud3-purpose-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 27px
  }

  .ud3-purpose-card__number {
    color: rgba(21, 70, 173, .36);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px
  }

  .ud3-purpose-card__icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, #ff8a32, #ff6500);
    box-shadow: 0 15px 28px rgba(255, 101, 0, .23);
    font-size: 25px;
    font-weight: 850
  }

  .ud3-purpose-card--vision .ud3-purpose-card__icon {
    background: linear-gradient(145deg, #2669da, #0d3a91);
    box-shadow: 0 15px 28px rgba(13, 58, 145, .22)
  }

  .ud3-purpose-card h3 {
    margin: 0 0 16px;
    color: #13203a;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.8px
  }

  .ud3-purpose-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #5f6b7d;
    font-size: 15px;
    line-height: 1.82
  }

  .ud3-purpose-card__value {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: var(--ud3-blue-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase
  }

  .ud3-purpose-card__value::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 8px;
    background: var(--ud3-orange)
  }

  .ud3-services {
    position: relative;
    overflow: hidden;
    padding: 105px 24px 115px;
    background: radial-gradient(circle at 7% 9%, rgba(255, 114, 0, .09), transparent 22%), radial-gradient(circle at 92% 87%, rgba(21, 70, 173, .10), transparent 25%), #f7f9fd
  }

  .ud3-services__layout {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 52px;
    align-items: start
  }

  .ud3-services__intro {
    position: sticky;
    top: 35px;
    padding: 8px 15px 0 0
  }

  .ud3-services__intro .ud3-section-head__label {
    margin-bottom: 18px
  }

  .ud3-services__intro .ud3-section-head__label::after {
    display: none
  }

  .ud3-services__intro h2 {
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(38px, 4.7vw, 58px);
    line-height: 1.08;
    letter-spacing: -2.5px
  }

  .ud3-services__intro h2 span {
    display: block;
    color: var(--ud3-blue)
  }

  .ud3-services__intro p {
    margin: 23px 0 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.78
  }

  .ud3-services__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: var(--ud3-blue);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none
  }

  .ud3-services__cta span {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ud3-orange);
    transition: transform .25s ease
  }

  .ud3-services__cta:hover span {
    transform: translateX(5px)
  }

  .ud3-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .ud3-service-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    padding: 26px 24px 24px;
    border: 1px solid rgba(21, 70, 173, .10);
    border-radius: 19px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 13px 35px rgba(27, 45, 79, .055);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease
  }

  .ud3-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--ud3-blue), var(--ud3-orange));
    transform: scaleX(.18);
    transform-origin: left;
    transition: transform .32s ease
  }

  .ud3-service-card:hover {
    z-index: 1;
    border-color: rgba(21, 70, 173, .2);
    box-shadow: 0 23px 52px rgba(27, 45, 79, .11);
    transform: translateY(-6px)
  }

  .ud3-service-card:hover::before {
    transform: scaleX(1)
  }

  .ud3-service-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px
  }

  .ud3-service-card__icon {
    display: grid;
    width: 51px;
    height: 51px;
    place-items: center;
    border: 1px solid rgba(21, 70, 173, .10);
    border-radius: 15px;
    color: var(--ud3-blue);
    background: linear-gradient(145deg, #f0f5ff, #fff);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.5px;
    box-shadow: 0 10px 22px rgba(21, 70, 173, .08)
  }

  .ud3-service-card:nth-child(2n) .ud3-service-card__icon {
    color: #d95600;
    background: linear-gradient(145deg, #fff3e9, #fff)
  }

  .ud3-service-card__index {
    color: #bdc5d2;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1px
  }

  .ud3-service-card h3 {
    margin: 0 0 10px;
    color: #17233d;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.35px
  }

  .ud3-service-card p {
    margin: 0;
    color: #697386;
    font-size: 14px;
    line-height: 1.67
  }

  .ud3-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: var(--ud3-blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none
  }

  .ud3-service-card a::after {
    content: "→";
    transition: transform .2s ease
  }

  .ud3-service-card a:hover::after {
    transform: translateX(4px)
  }

  @media (max-width:960px) {
    .ud3-services__layout {
      grid-template-columns: 1fr
    }

    .ud3-services__intro {
      position: static;
      max-width: 720px
    }
  }

  @media (max-width:760px) {

    .ud3-purpose,
    .ud3-services {
      padding: 72px 20px
    }

    .ud3-purpose__grid,
    .ud3-services__grid {
      grid-template-columns: 1fr
    }

    .ud3-purpose-card {
      min-height: auto;
      padding: 32px 26px
    }

    .ud3-purpose-card::after {
      font-size: 68px
    }
  }

  @media (max-width:480px) {
    .ud3-section-head {
      margin-bottom: 38px
    }

    .ud3-section-head h2,
    .ud3-services__intro h2 {
      font-size: 36px;
      letter-spacing: -1.5px
    }

    .ud3-service-card {
      min-height: auto
    }
  }

  .ud3-purpose {
    padding: 110px 24px;
    background: radial-gradient(circle at 8% 15%, rgba(255, 114, 0, .08), transparent 20%), radial-gradient(circle at 92% 80%, rgba(21, 70, 173, .08), transparent 23%), #fff
  }

  .ud3-purpose__grid {
    position: relative;
    gap: 30px
  }
/* 
  .ud3-purpose__grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    border: 10px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ud3-blue), var(--ud3-orange));
    box-shadow: 0 15px 35px rgba(21, 70, 173, .18);
    transform: translate(-50%, -50%)
  } */
/* 
  .ud3-purpose__grid::after {
    content: "∞";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 31px;
    font-weight: 900;
    transform: translate(-50%, -53%)
  } */

  .ud3-purpose-card {
    z-index: 0;
    min-height: 385px;
    padding: 48px 48px 42px;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 248, 242, .96)), #fff;
    box-shadow: 0 25px 65px rgba(30, 43, 70, .09)
  }

  .ud3-purpose-card--vision {
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 246, 255, .98)), #fff
  }

  .ud3-purpose-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, var(--ud3-orange), #ffc08f)
  }

  .ud3-purpose-card--vision::before {
    background: linear-gradient(90deg, var(--ud3-blue), #6fa4f2)
  }

  .ud3-purpose-card::after {
    right: -2px;
    bottom: -11px;
    color: rgba(14, 43, 91, .035);
    font-size: 82px
  }

  .ud3-purpose-card__icon {
    width: 66px;
    height: 66px;
    border-radius: 20px
  }

  .ud3-purpose-card__icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .ud3-services {
    padding: 110px 24px 120px;
    background: linear-gradient(rgba(255, 255, 255, .83), rgba(255, 255, 255, .83)), radial-gradient(circle at 10% 10%, #ffe4d2, transparent 28%), radial-gradient(circle at 88% 80%, #dbe8ff, transparent 31%), #f5f8fd
  }

  .ud3-services__layout {
    display: block
  }

  .ud3-services__intro {
    position: static;
    max-width: 820px;
    margin: 0 auto 58px;
    padding: 0;
    text-align: center
  }

  .ud3-services__intro .ud3-section-head__label {
    justify-content: center
  }

  .ud3-services__intro .ud3-section-head__label::after {
    display: block
  }

  .ud3-services__intro h2 {
    font-size: clamp(39px, 4.6vw, 59px)
  }

  .ud3-services__intro h2 span {
    display: inline
  }

  .ud3-services__intro p {
    max-width: 690px;
    margin: 20px auto 0
  }

  .ud3-services__cta {
    margin-top: 25px
  }

  .ud3-services__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px
  }

  .ud3-service-card {
    grid-column: span 3;
    min-height: 292px;
    padding: 29px 27px 27px;
    border: 1px solid rgba(21, 70, 173, .10);
    border-radius: 23px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 16px 42px rgba(20, 40, 80, .07);
    backdrop-filter: blur(12px)
  }

  .ud3-service-card:nth-child(1),
  .ud3-service-card:nth-child(2) {
    grid-column: span 6;
    min-height: 285px
  }

  .ud3-service-card:nth-child(7),
  .ud3-service-card:nth-child(8) {
    grid-column: span 6;
    min-height: 245px
  }

  .ud3-service-card:nth-child(1) {
    background: radial-gradient(circle at 92% 18%, rgba(60, 113, 225, .17), transparent 24%), linear-gradient(145deg, #fff, #f2f6ff)
  }

  .ud3-service-card:nth-child(2) {
    background: radial-gradient(circle at 92% 18%, rgba(255, 120, 20, .16), transparent 24%), linear-gradient(145deg, #fff, #fff7f0)
  }

  .ud3-service-card:nth-child(7) {
    background: linear-gradient(145deg, #ffffff, #f8f3ff)
  }

  .ud3-service-card:nth-child(8) {
    background: linear-gradient(145deg, #ffffff, #effaff)
  }

  .ud3-service-card::before {
    height: 5px;
    transform: scaleX(0)
  }

  .ud3-service-card__head {
    margin-bottom: 25px
  }

  .ud3-service-card__icon {
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #2f72e4, #123d97);
    box-shadow: 0 13px 27px rgba(21, 70, 173, .23)
  }

  .ud3-service-card:nth-child(2n) .ud3-service-card__icon {
    color: #fff;
    background: linear-gradient(145deg, #ff963f, #e75500);
    box-shadow: 0 13px 27px rgba(231, 85, 0, .22)
  }

  .ud3-service-card__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .ud3-service-card__index {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(21, 70, 173, .1);
    border-radius: 50%;
    color: #8e9aae;
    background: rgba(255, 255, 255, .76)
  }

  .ud3-service-card h3 {
    font-size: 21px
  }

  .ud3-service-card:nth-child(1) h3,
  .ud3-service-card:nth-child(2) h3 {
    font-size: 25px
  }

  .ud3-service-card p {
    font-size: 14px;
    line-height: 1.72
  }

  @media (max-width:1020px) {
    .ud3-service-card {
      grid-column: span 6
    }

    .ud3-service-card:nth-child(1),
    .ud3-service-card:nth-child(2),
    .ud3-service-card:nth-child(7),
    .ud3-service-card:nth-child(8) {
      grid-column: span 6
    }
  }

  @media (max-width:760px) {

    .ud3-purpose__grid::before,
    .ud3-purpose__grid::after {
      display: none
    }

    .ud3-purpose-card {
      min-height: auto
    }

    .ud3-service-card,
    .ud3-service-card:nth-child(1),
    .ud3-service-card:nth-child(2),
    .ud3-service-card:nth-child(7),
    .ud3-service-card:nth-child(8) {
      grid-column: 1 / -1;
      min-height: auto
    }
  }

  .ud3-advantage,
  .ud3-impact,
  .ud3-industries {
    position: relative;
    overflow: hidden;
    padding: 105px 24px
  }

  .ud3-advantage {
    background: #fff
  }

  .ud3-impact {
    background: radial-gradient(circle at 18% 20%, rgba(255, 114, 0, .13), transparent 24%), radial-gradient(circle at 86% 78%, rgba(21, 70, 173, .16), transparent 28%), linear-gradient(135deg, #081a3d, #0d2d69 58%, #133f8d)
  }

  .ud3-industries {
    background: linear-gradient(180deg, #f7f9fd 0%, #fff 100%)
  }

  .ud3-wide-container {
    width: min(1180px, 100%);
    margin-inline: auto
  }

  .ud3-advantage__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px
  }

  .ud3-advantage-card {
    position: relative;
    min-height: 200px;
    padding: 23px 16px 20px;
    border: 1px solid rgba(21, 70, 173, .09);
    border-radius: 20px;
    background: linear-gradient(150deg, #fff, #f7f9fd);
    box-shadow: 0 16px 38px rgba(22, 42, 80, .07);
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease
  }

  .ud3-advantage-card:hover {
    z-index: 2;
    transform: translateY(-10px) rotateX(3deg);
    box-shadow: 0 28px 56px rgba(22, 42, 80, .14)
  }

  .ud3-3d-icon {
    position: relative;
    width: 82px;
    height: 82px;
    display: grid;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, #e9eef7);
    box-shadow: 12px 14px 25px rgba(17, 37, 75, .14), -8px -8px 20px rgba(255, 255, 255, .95), inset -4px -4px 8px rgba(21, 70, 173, .06), inset 4px 4px 8px rgba(255, 255, 255, .9);
    transform: rotateX(7deg) rotateY(-7deg);
    transform-style: preserve-3d;
    transition: transform .35s ease
  }

  .ud3-3d-icon::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 7px;
    left: 10px;
    height: 12px;
    border-radius: 50%;
    background: rgba(8, 27, 65, .16);
    filter: blur(7px);
    transform: translateZ(-10px)
  }

  .ud3-advantage-card:hover .ud3-3d-icon,
  .ud3-industry-card:hover .ud3-3d-icon {
    transform: rotateX(0) rotateY(0) translateY(-4px) scale(1.05)
  }

  .ud3-3d-icon img {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(4px 7px 5px rgba(17, 37, 75, .22));
    transform: translateZ(15px)
  }

  .ud3-advantage-card h3 {
    margin: 0 0 8px;
    color: #17233d;
    font-size: 15px;
    line-height: 1.35
  }

  .ud3-advantage-card p {
    margin: 0;
    color: #778196;
    font-size: 12px;
    line-height: 1.55
  }

  .ud3-impact__layout {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 48px;
    align-items: center
  }

  .ud3-impact__story {
    color: #fff
  }

  .ud3-impact__story .ud3-section-head__label {
    color: #9fc0ff
  }

  .ud3-impact__story .ud3-section-head__label::after {
    display: none
  }

  .ud3-impact__story h2 {
    margin: 0;
    max-width: 500px;
    color: #fff;
    font-size: clamp(39px, 4.3vw, 57px);
    line-height: 1.08;
    letter-spacing: -2.4px
  }

  .ud3-impact__story h2 span {
    color: #ff994b
  }

  .ud3-impact__story p {
    margin: 22px 0 0;
    max-width: 510px;
    color: #c2d1ed;
    font-size: 15px;
    line-height: 1.78
  }

  .ud3-impact__panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 28px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px)
  }

  .ud3-impact-stat {
    position: relative;
    min-height: 178px;
    padding: 32px 30px;
    transition: background .3s ease
  }

  .ud3-impact-stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .12)
  }

  .ud3-impact-stat:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, .12)
  }

  .ud3-impact-stat:hover {
    background: rgba(255, 255, 255, .08)
  }

  .ud3-impact-stat__icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #ff923f, #e95b00);
    box-shadow: 0 12px 23px rgba(233, 91, 0, .24)
  }

  .ud3-impact-stat__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .ud3-impact-stat strong {
    display: block;
    color: #fff;
    font-size: 39px;
    line-height: 1;
    letter-spacing: -1.8px
  }

  .ud3-impact-stat span {
    display: block;
    margin-top: 9px;
    color: #bdcce7;
    font-size: 13px;
    font-weight: 650
  }

  .ud3-industries__layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: center
  }

  .ud3-industries__content h2 {
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(39px, 4.3vw, 56px);
    line-height: 1.08;
    letter-spacing: -2.4px
  }

  .ud3-industries__content h2 span {
    display: block;
    color: var(--ud3-blue)
  }

  .ud3-industries__content p {
    margin: 22px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.78
  }

  .ud3-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    perspective: 900px
  }

  .ud3-industry-card {
    min-height: 145px;
    padding: 17px 10px 14px;
    border: 1px solid rgba(21, 70, 173, .08);
    border-radius: 17px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 30px rgba(24, 44, 80, .055);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease
  }

  .ud3-industry-card:hover {
    z-index: 2;
    transform: translateY(-7px) rotateX(3deg);
    box-shadow: 0 24px 45px rgba(24, 44, 80, .13)
  }

  .ud3-industry-card .ud3-3d-icon {
    width: 66px;
    height: 66px;
    margin-bottom: 13px;
    border-radius: 18px
  }

  .ud3-industry-card .ud3-3d-icon img {
    width: 42px;
    height: 42px
  }

  .ud3-industry-card h3 {
    margin: 0;
    color: #28344b;
    font-size: 11px;
    line-height: 1.35
  }

  @media (max-width:1020px) {
    .ud3-advantage__grid {
      grid-template-columns: repeat(3, 1fr)
    }

    .ud3-impact__layout,
    .ud3-industries__layout {
      grid-template-columns: 1fr
    }

    .ud3-industries__content {
      max-width: 720px
    }
  }

  @media (max-width:650px) {

    .ud3-advantage,
    .ud3-impact,
    .ud3-industries {
      padding: 72px 19px
    }

    .ud3-advantage__grid,
    .ud3-industry-grid {
      grid-template-columns: repeat(2, 1fr)
    }

    .ud3-impact__panel {
      grid-template-columns: 1fr
    }

    .ud3-impact-stat:nth-child(n) {
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .12)
    }

    .ud3-impact-stat:last-child {
      border-bottom: 0
    }
  }

  @media (max-width:410px) {
    .ud3-advantage__grid {
      grid-template-columns: 1fr
    }
  }

  .ud3-edge {
    position: relative;
    overflow: hidden;
    padding: 108px 24px 118px;
    color: #fff;
    background: radial-gradient(circle at 15% 16%, rgba(38, 103, 217, .16), transparent 23%), radial-gradient(circle at 88% 80%, rgba(255, 114, 0, .12), transparent 25%), #0d0f15
  }

  .ud3-edge::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent)
  }

  .ud3-edge__container {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin-inline: auto
  }
  
  .ud3-about__eyebrow::before {
    content: "";
    width: 32px;
    height: 3px;
    border-radius: 99px;
    background: var(--ud3-orange);
  }
  .ud3-about__eyebrow::after {
    content: "";
    width: 32px;
    height: 3px;
    border-radius: 99px;
    background: var(--ud3-orange);
  }
  .sectionHead{
    text-align: center;
    padding-bottom: 4rem;
  }
  .sectionHead h2{
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2.8px;
  }
  .sectionHead h2 span {
    color: var(--ud3-blue);
  }
  .sectionHead p{
    margin: 18px auto 0;
    color: #000;
    font-size: 16px;
    line-height: 1.72
  }

  .ud3-edge__stage {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 34px;
    background: linear-gradient(120deg, #1b1d26, #212329 58%, #18282d);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .32)
  }

  .ud3-edge__slide {
    display: none;
    min-height: 510px;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 25px;
    padding: 65px 68px;
    animation: ud3-edge-in .55s cubic-bezier(.2, .8, .2, 1) both
  }

  .ud3-edge__slide.is-active {
    display: grid
  }

  @keyframes ud3-edge-in {
    from {
      opacity: 0;
      transform: translateX(35px)
    }

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

  .ud3-edge__content {
    position: relative;
    z-index: 2
  }

  .ud3-edge__count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 23px;
    color: #72a7ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px
  }

  .ud3-edge__count::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #ff7a17
  }

  .ud3-edge__content h3 {
    margin: 0 0 17px;
    color: #fff;
    font-size: clamp(36px, 4.3vw, 58px);
    line-height: 1.08;
    letter-spacing: -2px
  }

  .ud3-edge__content p {
    max-width: 650px;
    margin: 0;
    color: #c5cbd6;
    font-size: 16px;
    line-height: 1.72
  }

  .ud3-edge__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    margin-top: 30px;
    padding: 0 8px 0 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, #1951b2, #199cd0);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 15px 30px rgba(21, 91, 190, .23)
  }

  .ud3-edge__btn i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: #1553a6;
    background: #fff;
    font-size: 20px;
    font-style: normal;
    transition: transform .25s ease
  }

  .ud3-edge__btn:hover i {
    transform: translateX(3px)
  }

  .ud3-edge__visual {
    position: relative;
    min-height: 390px;
    display: grid;
    place-items: center;
    perspective: 1100px
  }

  .ud3-edge__visual::before,
  .ud3-edge__visual::after {
    content: "";
    position: absolute;
    border-radius: 50%
  }

  .ud3-edge__visual::before {
    width: 345px;
    height: 345px;
    border: 1px dashed rgba(95, 157, 255, .28);
    animation: ud3-spin 24s linear infinite
  }

  .ud3-edge__visual::after {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(36, 112, 230, .24), rgba(255, 116, 24, .08) 50%, transparent 72%);
    filter: blur(9px)
  }

  .ud3-edge__orb {
    position: relative;
    z-index: 2;
    width: 245px;
    height: 245px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .35), transparent 18%), linear-gradient(145deg, #2d75e4, #142c6b 65%, #0d1632);
    box-shadow: 0 35px 65px rgba(0, 0, 0, .42), inset 10px 10px 25px rgba(255, 255, 255, .13), inset -14px -16px 28px rgba(0, 0, 0, .3);
    transform: rotateX(7deg) rotateY(-8deg);
    transform-style: preserve-3d
  }

  .ud3-edge__slide:nth-child(2) .ud3-edge__orb {
    background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .3), transparent 18%), linear-gradient(145deg, #8455ef, #30206e 65%, #14102c)
  }

  .ud3-edge__slide:nth-child(3) .ud3-edge__orb {
    background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .3), transparent 18%), linear-gradient(145deg, #16b7ad, #075f70 65%, #082b39)
  }

  .ud3-edge__slide:nth-child(4) .ud3-edge__orb {
    background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .3), transparent 18%), linear-gradient(145deg, #ff8b39, #b23c17 65%, #42180e)
  }

  .ud3-edge__slide:nth-child(5) .ud3-edge__orb {
    background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .3), transparent 18%), linear-gradient(145deg, #e14a8f, #7b2157 65%, #2f1024)
  }

  .ud3-edge__slide:nth-child(6) .ud3-edge__orb {
    background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .3), transparent 18%), linear-gradient(145deg, #36a5ff, #1759a9 65%, #0a264d)
  }

  .ud3-edge__orb svg {
    width: 118px;
    height: 118px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(8px 13px 7px rgba(0, 0, 0, .32));
    transform: translateZ(28px)
  }

  .ud3-edge__chip {
    position: absolute;
    z-index: 3;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #dbe8ff;
    background: rgba(10, 15, 25, .7);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .2);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 750
  }

  .ud3-edge__chip--one {
    top: 18%;
    left: 1%
  }

  .ud3-edge__chip--two {
    right: 0;
    bottom: 21%
  }

  .ud3-edge__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 28px
  }

  .ud3-edge__arrow {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    cursor: pointer;
    font-size: 19px;
    transition: background .2s ease, transform .2s ease
  }

  .ud3-edge__arrow:hover {
    background: #1756bb;
    transform: translateY(-2px)
  }

  .ud3-edge__dots {
    display: flex;
    gap: 8px;
    padding-inline: 8px
  }

  .ud3-edge__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #515866;
    cursor: pointer;
    transition: width .25s ease, background .25s ease
  }

  .ud3-edge__dot.is-active {
    width: 30px;
    background: linear-gradient(90deg, #226bd7, #ff7a17)
  }

  @media (max-width:880px) {
    .ud3-edge__slide {
      min-height: auto;
      grid-template-columns: 1fr;
      padding: 48px 42px 35px
    }

    .ud3-edge__visual {
      min-height: 360px
    }
  }

  @media (max-width:560px) {
    .ud3-edge {
      padding: 74px 18px 82px
    }

    .ud3-edge__stage {
      border-radius: 24px
    }

    .ud3-edge__slide {
      padding: 38px 25px 25px
    }

    .ud3-edge__content h3 {
      font-size: 37px
    }

    .ud3-edge__visual {
      min-height: 315px
    }

    .ud3-edge__visual::before {
      width: 285px;
      height: 285px
    }

    .ud3-edge__orb {
      width: 205px;
      height: 205px
    }

    .ud3-edge__orb svg {
      width: 95px;
      height: 95px
    }
  }

  .ud3-edge {
    min-height: 620vh;
    padding: 0 24px
  }

  .ud3-edge__container {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 0 28px
  }

  .ud3-edge__head {
    margin-bottom: 25px
  }

  .ud3-edge__head span {
    margin-bottom: 10px
  }

  .ud3-edge__head p {
    margin-top: 10px;
    font-size: 14px;
    line-height:23px
  }

  .ud3-edge__slide {
    min-height: 410px;
    padding: 44px 58px;
    animation-name: ud3-edge-vertical-in
  }

  @keyframes ud3-edge-vertical-in {
    from {
      opacity: 0;
      transform: translateY(-55px) scale(.985)
    }

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

  .ud3-edge__content h3 {
    font-size: clamp(34px, 3.8vw, 49px)
  }

  .ud3-edge__visual {
    min-height: 320px
  }

  .ud3-edge__visual::before {
    width: 305px;
    height: 305px
  }

  .ud3-edge__orb {
    width: 220px;
    height: 220px
  }

  .ud3-edge__orb svg {
    width: 104px;
    height: 104px
  }

  .ud3-edge__controls {
    margin-top: 16px
  }

  .ud3-edge__progress {
    position: absolute;
    right: 5px;
    bottom: 6px;
    left: 5px;
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08)
  }

  .ud3-edge__progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #246fdf, #ff7a17);
    transition: width .2s linear
  }

  @media (max-height:760px) and (min-width:881px) {
    .ud3-edge__head p {
      display: none
    }

    .ud3-edge__head {
      margin-bottom: 16px
    }

    .ud3-edge__slide {
      min-height: 360px;
      padding-block: 32px
    }

    .ud3-edge__visual {
      min-height: 280px
    }

    .ud3-edge__orb {
      width: 190px;
      height: 190px
    }
  }

  @media (max-width:880px) {
    .ud3-edge {
      min-height: 620vh
    }

    .ud3-edge__container {
      padding: 25px 0 20px
    }

    .ud3-edge__head {
      margin-bottom: 17px
    }

    .ud3-edge__head p {
      display: none
    }

    .ud3-edge__slide {
      min-height: 0;
      grid-template-columns: 1fr;
      padding: 30px 34px 24px
    }

    .ud3-edge__content p {
      font-size: 14px
    }

    .ud3-edge__visual {
      min-height: 245px
    }

    .ud3-edge__visual::before {
      width: 230px;
      height: 230px
    }

    .ud3-edge__orb {
      width: 165px;
      height: 165px
    }

    .ud3-edge__orb svg {
      width: 76px;
      height: 76px
    }
  }

  @media (max-width:560px) {
    .ud3-edge {
      min-height: 620vh;
      padding: 0 14px
    }

    .ud3-edge__head span,
    .ud3-edge__head p {
      display: none
    }

    .ud3-edge__head h2 {
      font-size: 30px
    }

    .ud3-edge__slide {
      padding: 26px 22px 20px
    }

    .ud3-edge__content h3 {
      font-size: 32px
    }

    .ud3-edge__content p {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3
    }

    .ud3-edge__btn {
      min-height: 46px;
      margin-top: 20px
    }

    .ud3-edge__visual {
      min-height: 215px
    }

    .ud3-edge__chip {
      font-size: 8px
    }
  }

  .ud3-edge {
    min-height: 0;
    padding: 88px 24px 96px
  }

  .ud3-edge__container {
    position: relative;
    top: auto;
    min-height: 0;
    display: block;
    padding: 0
  }

  .ud3-edge__head {
    margin-bottom: 35px
  }

  .ud3-edge__head h2 {
    font-size: clamp(32px, 3.6vw, 46px)
  }

  .ud3-edge__head p {
    display: block;
    font-size: 15px
  }

  .ud3-edge__slide {
    min-height: 485px;
    padding: 54px 62px
  }

  .ud3-edge__visual {
    min-height: 360px
  }

  .ud3-edge__visual::before {
    width: 330px;
    height: 330px
  }

  .ud3-edge__orb {
    width: 235px;
    height: 235px
  }

  .ud3-edge__progress {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 4px;
    margin-top: 22px
  }

  .ud3-edge__stage::after {
    content: "Scroll to explore technologies";
    position: absolute;
    right: 24px;
    bottom: 18px;
    z-index: 5;
    color: rgba(255, 255, 255, .46);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    pointer-events: none
  }

  @media (max-width:880px) {
    .ud3-edge {
      min-height: 0;
      padding: 72px 18px 80px
    }

    .ud3-edge__container {
      min-height: 0;
      padding: 0
    }

    .ud3-edge__head p {
      display: block
    }

    .ud3-edge__slide {
      min-height: 650px;
      padding: 38px 34px 28px
    }

    .ud3-edge__visual {
      min-height: 280px
    }
  }

  @media (max-width:560px) {
    .ud3-edge {
      min-height: 0;
      padding: 62px 14px 70px
    }

    .ud3-edge__head span {
      display: inline-flex
    }

    .ud3-edge__head p {
      display: block;
      font-size: 13px
    }

    .ud3-edge__slide {
      min-height: 610px;
      padding: 30px 22px 24px
    }

    .ud3-edge__content p {
      display: block;
      overflow: visible;
      -webkit-line-clamp: unset
    }
  }

  .ud3-future,
  .ud3-work,
  .ud3-testimonials,
  .ud3-blog,
  .ud3-contact {
    padding: 105px 24px
  }

  .ud3-future {
    background: #fff
  }

  .ud3-work {
    background: #f6f8fc
  }

  .ud3-testimonials {
    background: #fff
  }

  .ud3-blog {
    background: #f7f9fd
  }

  .ud3-contact {
    background: #fff
  }

  .ud3-section-container {
    width: min(1180px, 100%);
    margin-inline: auto
  }

  .ud3-future__panel {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgba(21, 70, 173, .09);
    border-radius: 28px;
    background: radial-gradient(circle at 18% 20%, rgba(145, 45, 255, .12), transparent 25%), linear-gradient(145deg, #fff, #f8f7ff);
    box-shadow: 0 24px 65px rgba(29, 45, 78, .08)
  }

  .ud3-future__content {
    display: none;
    min-height: 420px;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: center;
    padding: 40px 55px;
    animation: ud3-future-in .45s ease both
  }

  .ud3-future__content.is-active {
    display: grid
  }

  @keyframes ud3-future-in {
    from {
      opacity: 0;
      transform: translateY(18px)
    }

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

  .ud3-future__image {
    min-height: 330px;
    display: grid;
    place-items: center
  }

  .ud3-future__image img {
    max-width: 100%;
    max-height: 345px;
    object-fit: contain;
    filter: drop-shadow(0 22px 24px rgba(49, 24, 99, .16))
  }

  .ud3-future__copy span {
    color: var(--ud3-orange);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.4px;
    text-transform: uppercase
  }

  .ud3-future__copy h3 {
    margin: 13px 0 18px;
    color: #17233d;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -1.8px
  }

  .ud3-future__copy p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.77
  }

  .ud3-future__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px
  }

  .ud3-future-tab {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 86px;
    padding: 13px 16px;
    border: 1px solid rgba(21, 70, 173, .10);
    border-radius: 16px;
    color: #26334b;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    text-align: left;
    box-shadow: 0 12px 27px rgba(22, 42, 80, .05);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
  }

  .ud3-future-tab:hover,
  .ud3-future-tab.is-active {
    border-color: rgba(116, 47, 226, .3);
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(70, 35, 140, .12)
  }

  .ud3-future-tab img {
    width: 53px;
    height: 53px;
    padding: 7px;
    object-fit: contain;
    border-radius: 13px;
    background: linear-gradient(145deg, #f3eaff, #fff)
  }

  .ud3-work__top,
  .ud3-blog__top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px
  }

  .ud3-mini-label {
    display: block;
    margin-bottom: 10px;
    color: var(--ud3-blue);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.5px;
    text-transform: uppercase
  }

  .ud3-work h2,
  .ud3-blog h2,
  .ud3-testimonials h2,
  .ud3-contact h2 {
    margin: 0;
    color: var(--ud3-ink);
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -1.8px
  }

  .ud3-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #1546ad, #2875e5);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 25px rgba(21, 70, 173, .2)
  }

  .ud3-work__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
  }

  .ud3-case {
    display: grid;
    grid-template-columns: .83fr 1.17fr;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(21, 70, 173, .1);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(25, 44, 80, .07);
    transition: transform .3s ease, box-shadow .3s ease
  }

  .ud3-case:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 58px rgba(25, 44, 80, .13)
  }

  .ud3-case__copy {
    padding: 31px 12px 28px 28px
  }

  .ud3-case__copy h3 {
    margin: 0 0 12px;
    color: #17233d;
    font-size: 21px
  }

  .ud3-case__copy p {
    margin: 0;
    color: #6b7588;
    font-size: 13px;
    line-height: 1.67
  }

  .ud3-case__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px
  }

  .ud3-case__tags span {
    padding: 6px 9px;
    border-radius: 7px;
    color: #315690;
    background: #edf3ff;
    font-size: 10px;
    font-weight: 750
  }

  .ud3-case__image {
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 23px 16px 0;
    background: linear-gradient(145deg, #f2fff9, #e5f3ff)
  }

  .ud3-case:nth-child(2) .ud3-case__image {
    background: linear-gradient(145deg, #eef5ff, #e2edff)
  }

  .ud3-case__image img {
    width: 100%;
    max-height: 285px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 15px 16px rgba(20, 45, 90, .13))
  }

  .ud3-testimonials__head {
    max-width: 720px;
    margin: 0 auto 43px;
    text-align: center
  }

  .ud3-testimonials__head p,
  .ud3-contact__head p {
    margin: 15px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.7
  }

  .ud3-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
  }

  .ud3-quote {
    position: relative;
    min-height: 300px;
    padding: 29px 27px;
    overflow: hidden;
    border: 1px solid rgba(21, 70, 173, .09);
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #f8faff);
    box-shadow: 0 15px 38px rgba(24, 44, 80, .06)
  }

  .ud3-quote::after {
    content: "“";
    position: absolute;
    right: 18px;
    bottom: -28px;
    color: rgba(21, 70, 173, .055);
    font-family: Georgia, serif;
    font-size: 165px;
    line-height: 1
  }

  .ud3-quote__stars {
    color: #ff8a24;
    font-size: 16px;
    letter-spacing: 3px
  }

  .ud3-quote blockquote {
    position: relative;
    z-index: 1;
    margin: 22px 0 27px;
    color: #485469;
    font-size: 14px;
    line-height: 1.78
  }

  .ud3-quote__person {
    display: flex;
    align-items: center;
    gap: 12px
  }

  .ud3-quote__avatar {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, var(--ud3-blue), #4989eb);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 10px 20px rgba(21, 70, 173, .18)
  }

  .ud3-quote__person strong,
  .ud3-quote__person span {
    display: block
  }

  .ud3-quote__person strong {
    color: #17233d;
    font-size: 13px
  }

  .ud3-quote__person span {
    margin-top: 3px;
    color: #8a94a5;
    font-size: 10px
  }

  .ud3-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
  }

  .ud3-post {
    overflow: hidden;
    border: 1px solid rgba(21, 70, 173, .08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(24, 44, 80, .06);
    transition: transform .3s ease, box-shadow .3s ease
  }

  .ud3-post:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 52px rgba(24, 44, 80, .12)
  }

  .ud3-post__visual {
    position: relative;
    height: 195px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #164bb4, #40a5dd)
  }

  .ud3-post:nth-child(2) .ud3-post__visual {
    background: linear-gradient(145deg, #6c35ce, #b357e5)
  }

  .ud3-post:nth-child(3) .ud3-post__visual {
    background: linear-gradient(145deg, #ef6b19, #ffb044)
  }

  .ud3-post__visual svg {
    width: 82px;
    height: 82px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    filter: drop-shadow(8px 12px 8px rgba(0, 0, 0, .18))
  }

  .ud3-post__body {
    padding: 24px
  }

  .ud3-post__meta {
    color: #8a94a5;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .8px
  }

  .ud3-post h3 {
    margin: 12px 0 10px;
    color: #17233d;
    font-size: 19px;
    line-height: 1.35
  }

  .ud3-post p {
    margin: 0;
    color: #697386;
    font-size: 13px;
    line-height: 1.67
  }

  .ud3-post a {
    display: inline-flex;
    margin-top: 17px;
    color: var(--ud3-blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none
  }

  .ud3-cta {
    padding: 32px 24px;
    background: #fff
  }

  .ud3-cta__inner {
    width: min(1180px, 100%);
    min-height: 235px;
    display: flex;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 45px 58px;
    overflow: hidden;
    border-radius: 27px;
    background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, .16), transparent 22%), linear-gradient(125deg, #0b2c70, #155bc5 66%, #208ed1);
    box-shadow: 0 24px 60px rgba(21, 70, 173, .22)
  }

  .ud3-cta h2 {
    max-width: 650px;
    margin: 0;
    color: #fff;
        font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.08;
    letter-spacing: -2px
  }

  .ud3-contact__layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 45px;
    align-items: start
  }

  .ud3-contact__head {
    margin-bottom: 30px
  }

  .ud3-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }

  .ud3-form__field {
    display: flex;
    flex-direction: column;
    gap: 7px
  }

  .ud3-form__field--full {
    grid-column: 1 / -1
  }

  .ud3-form label {
    color: #445067;
    font-size: 11px;
    font-weight: 750
  }

  .ud3-form input,
  .ud3-form textarea {
    width: 100%;
    border: 1px solid #dfe5ef;
    border-radius: 11px;
    padding: 13px 14px;
    color: #17233d;
    background: #f8fafc;
    font: inherit;
    font-size: 13px;
    outline: none
  }

  .ud3-form textarea {
    min-height: 125px;
    resize: vertical
  }

  .ud3-form input:focus,
  .ud3-form textarea:focus {
    border-color: var(--ud3-blue);
    box-shadow: 0 0 0 3px rgba(21, 70, 173, .08)
  }

  .ud3-process {
    padding: 34px;
    border-radius: 22px;
    background: linear-gradient(145deg, #f3f6fc, #eef2f8)
  }

  .ud3-process h3 {
    margin: 0 0 26px;
    color: #17233d;
    font-size: 27px
  }

  .ud3-process__step {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    padding-bottom: 22px
  }

  .ud3-process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 38px;
    bottom: 3px;
    left: 19px;
    width: 2px;
    background: #cbd8ee
  }

  .ud3-process__step strong {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ud3-blue);
    font-size: 13px
  }

  .ud3-process__step h4 {
    margin: 2px 0 5px;
    color: #26334a;
    font-size: 14px
  }

  .ud3-process__step p {
    margin: 0;
    color: #758095;
    font-size: 12px;
    line-height: 1.55
  }

  @media (max-width:900px) {

    .ud3-future__content,
    .ud3-contact__layout {
      grid-template-columns: 1fr
    }

    .ud3-future__tabs {
      grid-template-columns: repeat(2, 1fr)
    }

    .ud3-work__grid,
    .ud3-testimonials__grid,
    .ud3-blog__grid {
      grid-template-columns: 1fr
    }

    .ud3-case {
      min-height: 310px
    }
  }

  @media (max-width:600px) {

    .ud3-future,
    .ud3-work,
    .ud3-testimonials,
    .ud3-blog,
    .ud3-contact {
      padding: 72px 18px
    }

    .ud3-future__content {
      padding: 25px 22px;
      gap: 15px
    }

    .ud3-future__image {
      min-height: 230px
    }

    .ud3-future__image img {
      max-height: 235px
    }

    .ud3-future__tabs {
      grid-template-columns: 1fr
    }

    .ud3-work__top,
    .ud3-blog__top {
      align-items: flex-start;
      flex-direction: column
    }

    .ud3-case {
      grid-template-columns: 1fr
    }

    .ud3-case__copy {
      padding: 25px
    }

    .ud3-case__image {
      min-height: 235px
    }

    .ud3-cta__inner {
      align-items: flex-start;
      flex-direction: column;
      padding: 38px 27px
    }

    .ud3-form {
      grid-template-columns: 1fr
    }

    .ud3-form__field--full {
      grid-column: auto
    }

    .ud3-process {
      padding: 27px 22px
    }
  }






  
/* -----------------banner-css-start-------------------- */
.sec01_digital_outer {
    width: 100%;
    background: url(../images/about_us/banner-bg.png) center center no-repeat;
    padding: 70px 0;
    position: relative;
    margin-bottom: 200px;
}

.sec01_digital_outer .sec01_digital_inner {
    width: 100%;
    gap: 50px;
}

.sec01_digital_outer .sec01_digital_inner .right_part {
    width: 100%;
    text-align: center;
}

.sec01_digital_outer .sec01_digital_inner .right_part h1 b {
    color: #161616 !important;
    display: block;
    font-size: 100px;
    font-weight: 700;
    line-height: normal;

}

.sec01_digital_outer .sec01_digital_inner .right_part h1 {
    color: #15459d;
    font-size: 52px;
    padding-bottom: 20px;

}

.sec01_digital_outer .sec01_digital_inner .right_part span {
    font-size: 20px;
    font-weight: 500;
    color: #161616;
    display: block;
    padding-bottom: 20px;
}

.sec01_digital_outer .sec01_digital_inner .right_part p {
    max-width: 700px;
    margin: auto;
    padding-bottom: 30px;
}

.sec01_digital_outer .sec01_digital_inner .right_part .sub_tittle {
    font-size: 20px;
    font-weight: 500;
    color: #161616;
    display: block;
    margin-bottom: 15px;
    width: fit-content;
    border-left: solid 4px #15459d;
    padding: 5px 0 5px 10px;
}

.sec01_digital_outer .sec01_digital_inner .right_part .sub_heading {
    font-size: 19px;
    color: #000;
    font-weight: 600;
    position: relative;
    padding-bottom: 18px;
    line-height: normal;
}

.clients {
    padding: 0;
}

.clients ul {
    background: #fff;
    box-shadow: 0px 8px 32px rgba(32, 21, 21, 5%);
    padding: 16px 30px;
    border-radius: 100px;
    width: fit-content;
    margin: auto;
    display: flex;
    margin-bottom: 30px;
}

.clients ul li {
    font-size: 18px;
    color: #161616;
    font-weight: 500;
    padding-right: 5px;
    border-right: solid 2px #000;
    margin-right: 5px;
}

.clients ul li:last-child {
    margin-right: 0;
    border-width: 0;
    padding-right: 0;
}

.rating {
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.rating ul {
    padding: 0;
    display: flex;
    gap: 10px;
}

.rating ul li {
    background: #fff;
    box-shadow: 0px 8px 32px rgba(32, 21, 21, 5%);
    padding: 20px;
    width: 175px;
    height: 150px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    text-align: left;
}

.rating ul li p {
    font-size: 18px;
    color: #161616;
    font-weight: 500;
    padding-bottom: 0 !important;
}

.star {
    margin-bottom: 20px !important;
    display: block;
}

/*Sec 01 End*/


/*Sec 02 start*/
.satisfaction {
    padding: 0;
    margin-bottom: 120px;
}

.satisfaction_outer {
    display: flex;
    align-items: center;
    gap: 50px;
}

.satisfaction_outer .right_part {
    width: 50%;
    position: relative;
}

.satisfaction_outer .left_part {
    width: 50%;
}

.satisfaction_outer .left_part h2 {
    padding-bottom: 20px;
}

.satisfaction_outer .left_part p {
    padding-bottom: 20px;
}


.year img {
    width: auto;
    max-width: 350px;
}

.year {
    padding-bottom: 20px;
}

.satisfaction_outer .right_part span {
    background: #fff;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    box-shadow: 0px 8px 32px rgba(32, 21, 21, 5%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.satisfaction_outer .right_part span img {
    width: auto;
}

/*Sec 02 end*/

/*Sec 03 start*/
.mission {
    margin-bottom: 120px;
    background: #fbfbfb;
    padding: 160px 0 50px;
    position: relative;
    border-top: solid 1px #a3a3a333;
    border-bottom: solid 1px #a3a3a333;
}

.tabs_main_outer .tabs {
    padding: 0px;
    list-style: none;
    gap: 40px;
    display: flex;
    align-items: center;
}


.tabs_main_outer .tabs li {
    padding: 40px;
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    background-image: url(../images/about_us/tab-1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 180px;
    max-width: 180px;
    height: 580px;
    position: relative;
}

.tabs_main_outer .tabs li h3 {
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 20px;

}

.tabs_main_outer .tabs li.current h3 {
    color: #fff;
    z-index: 9;
    font-size: 40px;
    transform: rotate(90deg) translate(-10%, -10%);
    top: 50%;
    bottom: revert;
    right: unset;
    left: 0%;
}

.tabs_main_outer .tabs li:nth-child(2) {
    background-image: url(../images/about_us/tab-2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 180px;
    max-width: 180px;
    height: 580px;
    margin-top: -150px;
}

.tabs_main_outer .tabs li:nth-child(3) {
    background-image: url(../images/about_us/tab-3.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 180px;
    max-width: 180px;
    height: 580px;
}

.tabs_main_outer .tabs li::before {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 60%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.tabs_main_outer .tabs li.current::after {
    position: absolute;
    content: "";
    background: rgba(249, 75, 0, 70%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.tabs_main_outer .tabs li.current::before {
    opacity: 0;
}

.tabs_main_outer .tabs li.current {
    padding: 40px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    background-image: url(../images/about_us/tab-1.png);
    min-width: 180px;
    height: 580px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

.tabs_main_outer .tabs li.current:nth-child(2) {
    background-image: url(../images/about_us/tab-2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 180px;
    max-width: 180px;
    height: 580px;
}

.tabs_main_outer .tabs li.current:nth-child(3) {
    background-image: url(../images/about_us/tab-3.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 180px;
    max-width: 180px;
    height: 580px;
}

.tabs_main_outer .tab-content {
    display: none;
}

.tabs_main_outer .tab-content.current {
    display: inherit;
}

.lefttab {
    width: 50%;
}

.righttab {
    width: 50%;
}

.tabs_main_outer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px
}

.righttab_heading {
    padding: 0;
}

.righttab_heading h2 {
    font-weight: 400;
    font-size: 60px;
    line-height: 60px;
    padding-bottom: 20px;
}

.righttab_heading h2 b {
    font-weight: 800;
    display: block;
}

/*Sec 03 end*/

/*Sec 04 start*/
.left_part_Sys_content {
    position: absolute;
    background: #fff;
    padding: 20px 25px;
    width: 100%;
    max-width: 347px;
    bottom: -35px;
    z-index: 99;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(0 0 0/20%);
    min-height: 130px;
    left: 230px;
}

.cto {
    position: absolute;
    top: 10%;
    left: 51%;
}

.left_part_Sys_content h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    color: #15459d;
    position: relative;
    padding-bottom: 0
}

.left_part_Sys_content p {
    font-size: 15px;
    color: #1a2e35;
    font-weight: 500
}

.left_part_Sys_content p.sys_aboutUs_linkedIn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    position: absolute;
    right: 10px;
    bottom: 10px
}

.left_part_Sys_content p.sys_aboutUs_linkedIn span {
    margin: 0 10px 0 0;
    position: absolute;
    right: 34px;
    bottom: 5px;
    display: contents
}

.sys_aboutUs_gleam .sys_aboutUs_gleam_content .right_part {
    width: 55%;
    padding-left: 60px;
    align-self: start
}

/*Sec 04 end*/

/*industries css*/
.industries_Section {
    background-color: currentcolor;
    position: relative;
}
.industries_tabs h2{color:#fff}
.industries_Section {
    padding-top: 64px;
}
.industries_Section:before
 {
    background: #fff;
    left: 0;
    right: auto;
    content: "";
    position: absolute;
    height: 100%;
}
#myTabContent{background:#cee3e3;}
.industries_tabs_Outer {
    display: flex;
    align-items: stretch;
}
.industries_tabsLeft {
    flex: 0 0 30%;
    max-width: 30%;
    padding: 84px 20px;
    background: radial-gradient(circle at 18% 20%, rgba(255, 114, 0, .13), transparent 24%), radial-gradient(circle at 86% 78%, rgba(21, 70, 173, .16), transparent 28%), linear-gradient(135deg, #081a3d, #0d2d69 58%, #133f8d);
}
.industries_tabsStyle {
    border: none;
    display: block;
    width: 320px;
    flex-shrink: 0;
    margin-left: auto;
}
.nav-tabs .nav-item:first-child {
    border-radius: 61px 0 0 61px;
}
.industries_tabsStyle .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    border: none;
    border-radius: 0;
}
.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    background: 0 0;
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.industries_tabsStyle .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    border: none;
    border-radius: 0;
}
.industries_tabsStyle img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}
.industries_tabsStyle .nav-link.active, .industries_tabsStyle .nav-link:hover {
    background: linear-gradient(91deg, transparent, rgba(255, 255, 255, .14), transparent);
    color: #fff;
}
.industries_tabs_Outer .tab-content {
    flex: 0 0 70%;
    max-width: 70%;
    padding: 24px 0 0;
    background-image: url(https://cdn-gnapb.nitrocdn.com/rVKsFrUUJpBqwSXDQLTtMASMDgzFisXl/assets/images/optimized/rev-397e6b9/www.octalsoftware.com/wp-content/themes/octal/images/home-new/industriesBG.png);
    background-position: right 16% center;
    background-repeat: no-repeat;
}
.industries_tabs_Outer .tab-content .tab-pane {
    height: 100%;
}
.tab-content>.active {
    display: block;
}
.tab-content>.tab-pane {
    /* display: none; */
}
.industries_main_Wrapper {
    position: relative;
    height: 100%;
}
.tab-content .tab-pane div, li {
    font-size: 17px;
}
.industries_Content {
    display: flex;
    height: 100%;
}
.industries_Content .new_Theme_Hgroup {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 20px 24px 20px 36px;
}
@media (min-width: 992px) {
    .mb-lg-4 {
        margin-bottom: 1.5rem !important;
    }
}
.new_Theme_Hgroup h3 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #081a3d;
}
.new_Theme_Hgroup h3 span{color:#0026f5}
.new_Theme_Hgroup p {
    line-height: 1.5;
    /* font-family: Onest, sans-serif !important; */
    color: #000;
    font-weight: 600;
}
.industries_Content figure {
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: end;
    padding-bottom: 110px;
}
.industries_Content figure {
    margin: 0;
}
.InnovativeCounter {
    background-image: url(https://cdn-gnapb.nitrocdn.com/rVKsFrUUJpBqwSXDQLTtMASMDgzFisXl/assets/images/optimized/rev-397e6b9/www.octalsoftware.com/wp-content/themes/octal/images/home-new/InnovativeCounter.jpg);
    background-size: cover;
    display: flex;
    padding: 15px 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.InnovativeCounterList {
    flex: 1;
    padding: 15px;
}
.InnovativeCounterList h4, p{color:#fff}




.apr{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #fafbfd, #fff, #fafbfd);
    padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}
.Sersection:before {
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, #0000, #0f172a1f, #0000);
    width: min(620px, 90%);
    height: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}
.apr__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.apr__aurora--1 {
    top: -160px;
    left: -100px;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(30, 136, 229, .4) 0%, transparent 70%);
    animation: apr-drift-a 28s ease-in-out infinite alternate;
}
.apr__aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(95px);
    opacity: .55;
}
.apr__aurora--2 {
    bottom: -180px;
    right: -120px;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(255, 107, 53, .4) 0%, transparent 70%);
    animation: apr-drift-b 32s ease-in-out infinite alternate;
}
.apr__grid-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(60deg, rgba(15, 23, 42, .04) 1px, transparent 1px), linear-gradient(-60deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at center, black 0%, transparent 100%);
    opacity: .5;
}
.apr__floaters {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.apr__float {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: 42px;
    color: #0f172ab3;
    opacity: .06;
    transform: translate(-50%, -50%);
    animation: apr-floater 22s ease-in-out infinite alternate;
    animation-delay: calc(var(--float-i) * -3.5s);
}
.apr__head {
    text-align: center;
    /* max-width: 820px; */
    width: 100%;
    justify-self: center;
    gap: 75rem;
}
.apr__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .4rem .95rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 600;
    color: #0b2545;
    background: #ffffffd9;
    backdrop-filter: blur(8px);
}
.apr__eyebrow-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6b35;
    box-shadow: 0 0 8px #ff6b35b3;
}
.apr__heading {
    font-family: "IBM Plex Sans", "IBM Plex Sans Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;;
    font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: #0b2545;
    margin: 0;
    text-wrap: balance;
}
.apr__intro {
    padding: 0 20%;
    /* max-width: 680px; */
    color: #334155;
    font-size: 16px;
    line-height: 1.65;
    text-wrap: pretty;
}
.apr__rail {
    position: relative;
    padding: .5rem 0;
}
.apr__track{
    /* list-style: none; */
    margin: 0;
    padding: 1rem .25rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, .75rem + .75vw, 1.5rem);
    /* overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; */
    scrollbar-width: none;
    margin: -1rem -.25rem;
}
.apr__cell--purple {
    --tone: #7c3aed;
    --tone-soft: rgba(124, 58, 237, .1);
    --tone-from: #7c3aed;
    --tone-to: #db2777;
}
.apr__cell {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (3 * clamp(1rem, .75rem + .75vw, 1.5rem))) / 4);
    max-width: 310px;
    /* opacity: 0; */
    transform: translateY(14px);
    animation: apr-cell-in .7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(min(var(--cell-i, 0), 8) * 80ms + .2s);
}
.apr__card {
    position: relative;
    display: grid;
    gap: .85rem;
    padding: 1.5rem 1.4rem 1.4rem;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    color: #0b2545;
    text-decoration: none;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.hover-spotlight {
    isolation: isolate;
    transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .25s var(--ease), border-color .25s var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.hover-spotlight:before {
    content: "";
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), #1e88e51f 0%, transparent 60%);
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
    z-index: 0;
    position: absolute;
    inset: 0;
}
.apr__watermark {
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 140px;
    height: 140px;
    color: rgb(26, 94, 209);
    opacity: .05;
    pointer-events: none;
    transition: transform .52s cubic-bezier(.22, 1, .36, 1), opacity .28s cubic-bezier(.4, 0, .2, 1);
}
.apr__card:hover .apr__icon {
    transform: rotate(-6deg) scale(1.08);
    background: rgb(26, 94, 209);
    color: #fff;
}
.apr__icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, .1);
    color: rgb(26, 94, 209);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s cubic-bezier(.4, 0, .2, 1), color .28s cubic-bezier(.4, 0, .2, 1);
}
.apr__name {
    position: relative;
    z-index: 1;
    font-family: "IBM Plex Sans", "IBM Plex Sans Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0b2545;
    margin: 0;
    letter-spacing: -.01em;
}
.apr__body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #334155;
}
.apr__tags[data-astro-cid-fys4kj62] {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.apr__card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 1px #ffffffe6 inset, 0 20px 40px -18px #0f172a2e;
}
.apr__card {
    position: relative;
    display: grid;
    gap: .85rem;
    padding: 1.5rem 1.4rem 1.4rem;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    color: #0b2545;
    text-decoration: none;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s cubic-bezier(.4, 0, .2, 1), border-color .28s cubic-bezier(.4, 0, .2, 1);
}
.hover-spotlight {
    isolation: isolate;
    transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.hover-spotlight:hover:before {
    opacity: 1;
}
.hover-spotlight:before {
    content: "";
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), #1e88e51f 0%, transparent 60%);
    opacity: 0;
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    z-index: 0;
    position: absolute;
    inset: 0;
}
.apr__card:hover:after {
    opacity: 1;
}
.apr__card:after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgb(26, 94, 209), #db2777);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .28s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.apr__card:hover .apr__rail-line {
    transform: scaleX(1);
}
.apr__rail-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,  rgb(26, 94, 209), #db2777);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1);
}
.apr__card:hover .apr__watermark{
    transform: rotate(-10deg) scale(1.18);
    opacity: .1;
}
.apr__watermark {
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 140px;
    height: 140px;
    color: rgb(26, 94, 209);
    opacity: .05;
    pointer-events: none;
    transition: transform .52s cubic-bezier(.22, 1, .36, 1), opacity .28s cubic-bezier(.4, 0, .2, 1);
}
.apr__tags {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.apr__tags li {
    padding: .2rem .55rem;
    background: rgba(124, 58, 237, .1);
    color:  rgb(26, 94, 209);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}
.apr__card:hover .apr__more {
    color:  rgb(26, 94, 209);
    gap: .5rem;
}
.apr__more {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: color .2s cubic-bezier(.4, 0, .2, 1), gap .2s cubic-bezier(.4, 0, .2, 1);
}
.apr__card:hover .apr__more svg {
    transform: translate(3px);
}
.apr__card:hover .apr__more {
    color:rgb(26, 94, 209);
    gap: .5rem;
}
.apr__more svg {
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}




@media (max-width:767px){
.industries_Section{overflow:hidden;padding-top:40px}
.industries_Section .industries_tabs_Outer{display:flex;align-items:stretch;gap:0}
.industries_Section .industries_tabsLeft{flex:0 0 66px;width:66px;max-width:66px;min-width:66px;padding:0;overflow:visible}
.industries_Section .industries_tabsStyle.nav-tabs{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;max-width:100%;padding:0;margin:0;border:0}
.industries_Section .industries_tabsStyle.nav-tabs .nav-item{width:100%;margin:0;list-style:none}
.industries_Section .industries_tabsStyle.nav-tabs .nav-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:65px;padding:12px 4px;border:0;border-radius:0;font-size:0!important;line-height:0!important;white-space:normal;overflow:hidden}
.industries_Section .industries_tabsStyle.nav-tabs .nav-link .industries_tabsStyle{display:flex;align-items:center;justify-content:center;width:100%;margin:0;font-size:0!important;line-height:0!important;color:transparent!important}
.industries_Section .industries_tabsStyle.nav-tabs .nav-link img{display:block;flex:none;width:24px;height:24px;max-width:24px;max-height:24px;margin:0;object-fit:contain}
.industries_Section .industries_tabsStyle.nav-tabs .nav-link.active{background:rgba(255,255,255,.17);box-shadow:inset 3px 0 #ff7200}
.industries_Section .industries_tabs_Outer .tab-content{flex:1 1 0;min-width:0;width:calc(100% - 66px);max-width:calc(100% - 66px);padding:0;background-image:none}
.industries_Section .industries_tabs_Outer .tab-pane,.industries_Section .industries_main_Wrapper{height:auto}
.industries_Section .industries_Content{display:flex;flex-direction:column;height:auto;min-width:0}
.industries_Section .industries_Content .new_Theme_Hgroup{flex:none;width:100%;max-width:100%;min-width:0;padding:22px 17px 10px;overflow-wrap:anywhere}
.industries_Section .new_Theme_Hgroup h3{font-size:clamp(21px,5.8vw,27px);line-height:1.2;margin:0 0 13px;letter-spacing:-.4px;overflow-wrap:anywhere}
.industries_Section .new_Theme_Hgroup p{font-size:13px;line-height:1.55;margin:0 0 12px;overflow-wrap:break-word}
.industries_Section .footer_Industries ul{margin:10px 0;padding-left:1px}
.industries_Section .footer_Industries li{font-size:12px;margin-bottom:6px;line-height:1.5}
.industries_Section .industries_Content figure{flex:none;width:100%;max-width:100%;height:auto;display:block;margin:0;padding:10px 15px 20px}
.industries_Section .industries_Content figure img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
.industries_Section .ud3-hero__actions{margin:14px 0 0}
.industries_Section .ud3-btn{min-height:42px;padding:0 15px}
.industries_Section .industries_tabs h2{font-size:26px;line-height:1.2}
.industries_Section .industries_tabs p{font-size:14px;line-height:1.55}
.apr__rail .apr__track{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;gap:12px}
.apr__rail .apr__cell{max-width:none;min-width:0}
.apr__rail .apr__card{padding:17px 14px;gap:10px}
.apr__rail .apr__name{font-size:16px}
.apr__rail .apr__body{font-size:13px}
.apr__rail .apr__tags{padding:0}
}
@media(max-width:480px){.apr__rail .apr__track{grid-template-columns:1fr}}




/* UD3 Logic - About Us. Layout uses Bootstrap 5; this file only adds brand styles. */
.ab {
            --ink: #0c1033; --ink2: #151a4a; --text: #4a5072; --muted: #6b7194;
            --blue: #5b6cff; --violet: #8a5cf6; --cyan: #22d3ee; --gold: #f5b841;
            --mist: #f5f6fd; --line: #e5e7f3;
            --grad: linear-gradient(100deg, #5b6cff 0%, #8a5cf6 50%, #22d3ee 100%);
            font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 17px; color: var(--text); overflow-x: clip;
        }
        .ab h1, .ab h2, .ab h3, .ab summary, .ab-stat strong, .ab-dash__num { font-family: "Bricolage Grotesque", "IBM Plex Sans", sans-serif; color: var(--ink); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
        main.ab p, main.ab li { color: var(--text); line-height: 1.65; }      /* site CSS overrides text colour */
        main.ab .ab-muted { color: var(--muted); }
        .ab a:focus-visible, .ab summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

        .ab-sec { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
        .ab-sec--tight { padding: clamp(48px, 6vw, 72px) 0; }
        .ab-mist { background: var(--mist); }
        .ab-h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02 !important; letter-spacing: -.04em !important; color: #fff !important; }
        .ab-h2 { font-size: clamp(30px, 3.6vw, 48px); }
        .ab-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .ab-kick { display: inline-block; padding: 6px 14px; border-radius: 50rem; background: #eceeff; color: var(--blue); font-size: 14px; font-weight: 600; }
        .ab-kick--light { background: rgba(255,255,255,.08); color: #b9c0ff; }
        @media (min-width: 992px) { .ab-sticky { position: sticky; top: 110px; } }

        /* buttons */
        .ab .btn { font-weight: 600; padding: .8rem 1.6rem; transition: transform .2s, box-shadow .2s, background .2s; }
        .ab-btn { background: var(--grad); background-size: 160% 100%; color: #fff !important; border: 0; box-shadow: 0 10px 30px -10px rgba(91,108,255,.7); }
        .ab-btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 36px -12px rgba(138,92,246,.8); }
        .ab-btn-glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff !important; backdrop-filter: blur(8px); }
        .ab-btn-glass:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
        .ab-btn-white { background: #fff; color: var(--ink) !important; }
        .ab-btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }

        /* glows & grid */
        .ab-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; animation: abDrift 14s ease-in-out infinite alternate; }
        .ab-glow--1 { width: 520px; height: 520px; background: #5b6cff; top: -160px; right: -80px; }
        .ab-glow--2 { width: 420px; height: 420px; background: #8a5cf6; bottom: -120px; left: -140px; animation-delay: -5s; }
        .ab-glow--3 { width: 300px; height: 300px; background: #22d3ee; top: 30%; right: 30%; opacity: .25; animation-delay: -9s; }
        .ab-glow--4 { width: 500px; height: 500px; background: #5b6cff; top: -200px; left: 40%; opacity: .3; }
        .ab-glow--5 { width: 380px; height: 380px; background: #22d3ee; top: -160px; right: -60px; opacity: .45; }
        @keyframes abDrift { to { transform: translate(40px, 30px) scale(1.1); } }
        .ab-gridbg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); }

        /* ---------- hero ---------- */
        .ab-hero { position: relative; overflow: hidden; background: var(--ink); padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); }
        .ab-hero .breadcrumb { --bs-breadcrumb-divider: "/"; --bs-breadcrumb-divider-color: #6b7194; }
        .ab-hero .breadcrumb a { color: #b9c0ff; text-decoration: none; }
        .ab-hero .breadcrumb-item.active, .ab-hero .breadcrumb-item::before { color: #8a90b8 !important; }
        .ab-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 50rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #d6daff; font-size: 14px; }
        .ab-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.2); }
        main.ab .ab-lead { color: #b7bcdb; font-size: clamp(17px, 1.4vw, 19px); max-width: 52ch; }

        .ab-visual { position: relative; max-width: 500px; aspect-ratio: 1; }
        .ab-ring { position: absolute; inset: 6%; border: 1px dashed rgba(255,255,255,.14); border-radius: 50%; animation: abSpin 40s linear infinite; }
        .ab-ring--2 { inset: 20%; animation-direction: reverse; animation-duration: 28s; border-style: solid; border-color: rgba(138,92,246,.25); }
        @keyframes abSpin { to { transform: rotate(360deg); } }
        .ab-dash { position: absolute; left: 50%; top: 50%; width: 78%; transform: translate(-50%, -50%) perspective(1200px) rotateY(-12deg) rotateX(6deg); padding: 22px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
        .ab-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; } .ab-dot--y { background: #ffd166; } .ab-dot--g { background: #4ade80; }
        .ab-live { font-size: 12px; color: #4ade80; }
        .ab-dim { color: #9aa0c7; }
        .ab-dash__num { color: #fff !important; font-size: clamp(28px, 4vw, 40px); }
        .ab-dash__num em { font-style: normal; font-size: 14px; color: #4ade80; vertical-align: middle; margin-left: 6px; }
        .ab-spark { width: 100%; height: 80px; display: block; }
        .ab-spark__line { fill: none; stroke: url(#abg); stroke: #a78bfa; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: abDraw 2s .4s ease forwards; }
        @keyframes abDraw { to { stroke-dashoffset: 0; } }
        .ab-mini { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); text-align: center; }
        .ab-mini b { display: block; color: #fff; font-size: 15px; } .ab-mini small { color: #9aa0c7; font-size: 11px; }
        .ab-chip { position: absolute; padding: 8px 14px; border-radius: 50rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 600; animation: abFloat 6s ease-in-out infinite; white-space: nowrap; }
        .ab-chip--1 { top: 8%; left: 6%; } .ab-chip--2 { top: 14%; right: 2%; animation-delay: -2s; }
        .ab-chip--3 { bottom: 12%; left: 0; animation-delay: -4s; } .ab-chip--4 { bottom: 24%; right: -2%; animation-delay: -1s; }
        @keyframes abFloat { 50% { transform: translateY(-12px); } }
        .ab-float-card { position: absolute; bottom: 2%; right: 14%; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); animation: abFloat 7s ease-in-out infinite -3s; }
        .ab-float-card__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 700; }
        .ab-float-card b { display: block; color: var(--ink); font-size: 14px; } .ab-float-card small { color: var(--muted); font-size: 12px; }

        .ab-stats { margin-top: clamp(32px, 5vw, 64px); }
        .ab-stat { height: 100%; padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
        .ab-stat strong { display: block; font-size: clamp(32px, 3.6vw, 46px); color: transparent !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
        .ab-stat > span { color: #b7bcdb; font-size: 15px; }

        /* marquee */
        .ab-marquee, .ab-belt { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
        .ab-marquee { background: var(--ink2); padding: 18px 0; }
        .ab-marquee__track, .ab-belt__track { display: flex; width: max-content; animation: abSlide 40s linear infinite; }
        .ab-marquee__track span { padding: 0 28px; color: #c9cdf0; font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 600; white-space: nowrap; }
        .ab-marquee__track span::after { content: "✦"; margin-left: 56px; color: var(--violet); font-size: 14px; }
        @keyframes abSlide { to { transform: translateX(-50%); } }

        /* cards */
        .ab-card { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -40px rgba(12,16,51,.35); }
        .ab-card--story { background: radial-gradient(circle at 100% 0, #eef0ff, #fff 55%); }
        main.ab .ab-card p + p { margin-top: 14px; }
        main.ab .ab-big { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; color: var(--ink); margin-bottom: 20px; }
        .ab-tags span { padding: 8px 14px; border-radius: 50rem; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
        .ab-card--grad { background: var(--grad); border: 0; }
        .ab-card--dark { background: var(--ink); border: 0; }
        main.ab .ab-card--grad p, main.ab .ab-card--dark p { color: rgba(255,255,255,.82); }
        .ab-card__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; }

        /* dark process */
        .ab-dark { background: var(--ink); overflow: hidden; }
        main.ab .ab-dark p { color: #a9aed0; }
        .ab-steps { counter-reset: s; }
        .ab-steps li { counter-increment: s; }
        .ab-step { position: relative; height: 100%; padding: 28px 22px 24px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: transform .3s, border-color .3s, background .3s; }
        .ab-step::before { content: "0" counter(s); display: block; margin-bottom: 18px; font-family: "Bricolage Grotesque", sans-serif; font-size: 44px; font-weight: 700; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .ab-step h3 { color: #fff !important; margin-bottom: 8px; }
        .ab-step:hover { transform: translateY(-6px); border-color: rgba(138,92,246,.5); background: rgba(138,92,246,.08); }

        /* services bento */
        .ab-svc { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); text-decoration: none; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
        .ab-svc::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s; }
        .ab-svc > * { position: relative; }
        .ab-svc__ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--mist); font-size: 26px; margin-bottom: 20px; transition: background .3s; }
        .ab-svc h3 { font-size: 21px; margin-bottom: 8px; transition: color .3s; }
        .ab-svc p { color: var(--muted) !important; font-size: 15.5px; margin-bottom: 20px; transition: color .3s; }
        .ab-svc__go { margin-top: auto; font-weight: 600; color: var(--blue); font-size: 15px; transition: color .3s; }
        .ab-svc__go::after { content: " ↗"; }
        .ab-svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(91,108,255,.6); border-color: transparent; }
        .ab-svc:hover::before, .ab-svc--feature::before { opacity: 1; }
        .ab-svc:hover h3, .ab-svc:hover .ab-svc__go, .ab-svc--feature h3, .ab-svc--feature .ab-svc__go { color: #fff !important; }
        .ab-svc:hover p, .ab-svc--feature p { color: rgba(255,255,255,.85) !important; }
        .ab-svc:hover .ab-svc__ic, .ab-svc--feature .ab-svc__ic { background: rgba(255,255,255,.18); }

        /* values */
        .ab-val { padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
        .ab-val > span { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: linear-gradient(135deg, #eef0ff, #f4ecff); font-size: 26px; }
        .ab-val h3 { margin-bottom: 8px; }
        main.ab .ab-val p { color: var(--muted); font-size: 15.5px; }
        .ab-val:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(12,16,51,.4); }

        /* industries belts */
        .ab-belt { padding: 8px 0; }
        .ab-belt--rev .ab-belt__track { animation-direction: reverse; animation-duration: 46s; }
        .ab-belt__track span { margin: 0 8px; padding: 16px 28px; border-radius: 50rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(12,16,51,.5); font-weight: 600; color: var(--ink); white-space: nowrap; font-size: 17px; }
        .ab-marquee:hover .ab-marquee__track, .ab-belt:hover .ab-belt__track { animation-play-state: paused; }

        /* FAQ */
        .ab-faq details { margin-bottom: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
        .ab-faq details[open] { border-color: #c9ceff; box-shadow: 0 20px 40px -30px rgba(91,108,255,.6); }
        .ab-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; font-size: 18px; font-weight: 600; }
        .ab-faq summary::-webkit-details-marker { display: none; }
        .ab-faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--blue); font-size: 22px; transition: transform .3s, background .3s, color .3s; }
        .ab-faq details[open] summary::after { transform: rotate(45deg); background: var(--grad); color: #fff; }
        .ab-faq details p { padding: 0 24px 22px; margin: 0; }

        /* CTA */
        .ab-cta { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px); border-radius: 32px; background: linear-gradient(120deg, #2b2f8f, #5b6cff 45%, #8a5cf6); }
        main.ab .ab-cta p { color: rgba(255,255,255,.85); }

        /* scroll reveal (only when JS is on) */
        .ab-js .ab-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
        .ab-js .ab-reveal.is-in { opacity: 1; transform: none; }

        @media (max-width: 991px) { .ab-visual { max-width: 440px; } }
        @media (max-width: 575px) {
            .ab-hero .btn, .ab-cta .btn { width: 100%; }
            .ab-dash { width: 86%; padding: 16px; transform: translate(-50%, -50%); }
            .ab-chip { font-size: 12px; padding: 6px 11px; }
            .ab-float-card { right: 4%; }
            .ab-stat { padding: 18px; }
            .ab-belt__track span { padding: 12px 20px; font-size: 15px; }
        }
        @media (prefers-reduced-motion: reduce) { .ab *, .ab *::before { animation: none !important; transition: none !important; } .ab-spark__line { stroke-dashoffset: 0; } }



        .ct { --ink:#0c1033; --text:#4a5072; --muted:#6b7194; --blue:#5b6cff; --violet:#8a5cf6; --cyan:#22d3ee; --mist:#f5f6fd; --line:#e5e7f3;
              --grad:linear-gradient(100deg,#5b6cff 0%,#8a5cf6 50%,#22d3ee 100%);
              font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; color:var(--text); overflow-x:clip; }
        .ct h1,.ct h2,.ct h3,.ct summary { font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif; color:var(--ink); font-weight:700; letter-spacing:-.025em; line-height:1.12; }
        main.ct p, main.ct li, main.ct small { color:var(--text); line-height:1.65; }
        main.ct .ct-way small { color:#9aa0c7; }
        main.ct .ct-muted { color:var(--muted); }
        .ct a:focus-visible,.ct summary:focus-visible,.ct .btn-check:focus-visible+.ct-chip { outline:3px solid var(--cyan); outline-offset:3px; }
        .ct-sec { padding:clamp(64px,9vw,104px) 0; }
        .ct-mist { background:var(--mist); }
        .ct-h1 { font-size:clamp(40px,5vw,64px); line-height:1.04 !important; letter-spacing:-.04em !important; color:#fff !important; }
        .ct-h2 { font-size:clamp(30px,3.4vw,44px); }
        .ct-grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
        .ct-kick { display:inline-block; padding:6px 14px; border-radius:50rem; background:#eceeff; color:var(--blue); font-size:14px; font-weight:600; }

        /* buttons */
        .ct .btn { font-weight:600; padding:.8rem 1.8rem; transition:transform .2s, box-shadow .2s; }
        .ct-btn { background:var(--grad); color:#fff !important; border:0; box-shadow:0 12px 30px -12px rgba(91,108,255,.8); }
        .ct-btn:hover { transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(138,92,246,.9); }
        .ct-btn-white { background:#fff; color:var(--ink) !important; }
        .ct-btn-white:hover { transform:translateY(-2px); }

        /* hero */
        .ct-hero { position:relative; overflow:hidden; background:var(--ink); padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,96px); }
        .ct-glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; animation:ctDrift 14s ease-in-out infinite alternate; }
        .ct-glow--1 { width:520px; height:520px; background:#5b6cff; top:-180px; right:-60px; }
        .ct-glow--2 { width:420px; height:420px; background:#8a5cf6; bottom:-160px; left:-140px; animation-delay:-6s; }
        @keyframes ctDrift { to { transform:translate(40px,30px) scale(1.1); } }
        .ct-gridbg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 15%,transparent 70%); mask-image:radial-gradient(ellipse at 30% 30%,#000 15%,transparent 70%); }
        .ct-hero .breadcrumb { --bs-breadcrumb-divider:"/"; }
        .ct-hero .breadcrumb a { color:#b9c0ff; text-decoration:none; }
        .ct-hero .breadcrumb-item.active,.ct-hero .breadcrumb-item::before { color:#8a90b8 !important; }
        .ct-pill { display:inline-flex; align-items:center; gap:10px; padding:7px 16px; border-radius:50rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#d6daff; font-size:14px; }
        .ct-pill i { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.2); }
        main.ct .ct-lead { color:#b7bcdb; font-size:clamp(17px,1.4vw,19px); }

        /* contact options */
        .ct-way { display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); text-decoration:none; transition:background .25s, border-color .25s, transform .25s; }
        .ct-way:hover { background:rgba(255,255,255,.1); border-color:rgba(138,92,246,.6); transform:translateX(4px); }
        .ct-way__ic { flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--grad); color:#fff; }
        .ct-way__ic--wa { background:#25d366; }
        .ct-way__ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        .ct-way small { display:block; color:#9aa0c7; font-size:13px; line-height:1.4; margin-bottom:2px; }
        .ct-way b { display:block; color:#fff; font-size:17px; font-weight:600; line-height:1.35; word-break:break-all; }
        .ct-way__go { color:#b9c0ff; font-size:20px; }

        /* form card */
        .ct-form { padding:clamp(24px,3.5vw,44px); border-radius:28px; background:#fff; box-shadow:0 40px 90px -40px rgba(0,0,0,.65); }
        .ct-label { font-size:14px; font-weight:600; color:var(--ink); }
        .ct .form-control,.ct .form-select { padding:.8rem 1rem; border-radius:14px; border-color:var(--line); background-color:#fafbff; font-size:16px; }
        .ct .form-control:focus,.ct .form-select:focus { border-color:var(--blue); background-color:#fff; box-shadow:0 0 0 4px rgba(91,108,255,.15); }
        .ct-chip { padding:8px 16px; border-radius:50rem; border:1px solid var(--line); background:#fafbff; color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; }
        .ct-chip:hover { border-color:var(--blue); }
        .btn-check:checked + .ct-chip { background:var(--grad); border-color:transparent; color:#fff; }

        /* next steps */
        .ct-steps { counter-reset:s; }
        .ct-steps li { counter-increment:s; }
        .ct-step { padding:30px 26px; border-radius:24px; background:#fff; border:1px solid var(--line); transition:transform .3s, box-shadow .3s; }
        .ct-step::before { content:"0" counter(s); display:block; margin-bottom:16px; font-family:"Bricolage Grotesque",sans-serif; font-size:44px; font-weight:700; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
        .ct-step h3 { margin-bottom:8px; }
        .ct-step:hover { transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(12,16,51,.45); }

        /* whatsapp card + faq */
        .ct-wa { padding:28px; border-radius:24px; background:linear-gradient(120deg,#2b2f8f,#5b6cff 50%,#8a5cf6); }
        main.ct .ct-wa p { color:rgba(255,255,255,.85); }
        .ct-faq details { margin-bottom:14px; border-radius:20px; background:#fff; border:1px solid var(--line); }
        .ct-faq details[open] { border-color:#c9ceff; box-shadow:0 20px 40px -30px rgba(91,108,255,.6); }
        .ct-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 24px; font-size:18px; font-weight:600; }
        .ct-faq summary::-webkit-details-marker { display:none; }
        .ct-faq summary::after { content:"+"; flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--mist); color:var(--blue); font-size:22px; transition:transform .3s; }
        .ct-faq details[open] summary::after { transform:rotate(45deg); background:var(--grad); color:#fff; }
        .ct-faq details p { padding:0 24px 22px; margin:0; }

        @media (max-width:575px) { .ct .btn-lg { width:100%; } .ct-way b { font-size:15px; } }
        @media (prefers-reduced-motion:reduce) { .ct *,.ct *::before { animation:none !important; transition:none !important; } }