:root{
  /* Bootstrap theme bridge */
  --bs-body-font-family:"Manrope",Arial,sans-serif;
  --bs-body-bg:#f6f4ef;
  --bs-body-color:#151515;
  --bs-primary:#f05423;
  --bs-primary-rgb:240,84,35;
  --bs-dark:#151515;
  --bs-dark-rgb:21,21,21;
  --bs-link-color:#151515;
  --bs-link-hover-color:#f05423;
  --bs-border-color:rgba(21,21,21,.16);
  --bs-border-radius:18px;
  --bs-border-radius-lg:28px;
  --ubt-dark:#151515;

  /* UB Tech design tokens */
  --paper:#f6f4ef;
  --paper-2:#efede7;
  --ink:#151515;
  --muted:#686761;
  --line:rgba(21,21,21,.16);
  --orange:#f05423;
  --orange-soft:#ff9d7d;
  --navy:#17213a;
  --cream:#fffaf4;
  --white:#fff;
  --radius:28px;
  --shell:min(1480px,calc(100vw - 72px));
}
.ub-services {
  --ink: #151515;
  --panel: #ffffff;
  --panel2: #fbfaf8;
  --line: rgba(21, 21, 21, 0.11);
  --orange: #f05423;
  --muted: #686868;
  --white: #151515;
  color: #151515;
  font-family: "Manrope", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
}
::selection {
  background: var(--orange);
  color: #fff;
}
.ubt-preloader {
    position: fixed;
    inset: 0;

    z-index: 999999;

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

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.7s cubic-bezier(.16, 1, .3, 1),
        visibility 0.7s ease;
}

.ubt-preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* INNER */

.ubt-preloader-inner {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(86vw, 420px);

    text-align: center;
}

/* =====================================================
   ANIMATED MARK
===================================================== */

.ubt-preloader-mark {
    position: relative;

    width: 78px;
    height: 78px;

    margin-bottom: 28px;

    animation:
        ubtLoaderRotate
        5s linear
        infinite;
}

.ubt-preloader-cube {
    position: absolute;

    width: 26px;
    height: 26px;

    border-radius: 5px;

    background: #151515;

    transform-origin: center;

    animation:
        ubtCubePulse
        1.6s ease-in-out
        infinite;
}

.cube-1 {
    top: 5px;
    left: 5px;

    background: #f05423;

    animation-delay: 0s;
}

.cube-2 {
    top: 5px;
    right: 5px;

    animation-delay: .2s;
}

.cube-3 {
    bottom: 5px;
    right: 5px;

    background: #f05423;

    animation-delay: .4s;
}

.cube-4 {
    bottom: 5px;
    left: 5px;

    animation-delay: .6s;
}

/* =====================================================
   BRAND
===================================================== */

.ubt-preloader-brand {
    margin-bottom: 10px;

    color: #151515;

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

    letter-spacing: 5px;
}

.ubt-preloader-caption {
    margin-bottom: 30px;

    color: #8a8a8a;

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

    letter-spacing: 2.2px;
}

/* =====================================================
   PROGRESS
===================================================== */

.ubt-preloader-progress {
    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

    background: #ededed;
}

.ubt-preloader-progress span {
    position: absolute;

    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background: #f05423;

    transition:
        width 0.25s ease;
}

/* =====================================================
   PERCENT
===================================================== */

.ubt-preloader-percent {
    margin-top: 12px;

    color: #8c8c8c;

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

    letter-spacing: 1.5px;
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes ubtLoaderRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ubtCubePulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.65);
        opacity: .55;
    }
}

/* =====================================================
   PAGE DEMO CONTENT
===================================================== */

.demo-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px;
    text-align: center;
}

.demo-page h1 {
    margin: 0 0 12px;
    font-size: clamp(38px, 7vw, 88px);
    letter-spacing: -0.05em;
}

.demo-page p {
    margin: 0;
    color: #777;
}

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

@media (max-width: 767.98px) {
    .ubt-preloader-mark {
        width: 65px;
        height: 65px;
    }

    .ubt-preloader-cube {
        width: 22px;
        height: 22px;
    }

    .ubt-preloader-brand {
        font-size: 18px;
    }

    .ubt-preloader-caption {
        font-size: 7px;
        letter-spacing: 1.5px;
    }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.section-shell {
  width: var(--shell);
  margin-inline: auto;
}
.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 18px 0;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.site-header.scrolled,
.site-header.is-solid {
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(21, 21, 21, 0.08);
  padding: 12px 0;
}
.header-shell {
  width: var(--shell);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand img {
  width: 190px;
  height: auto;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
.desktop-nav a {
  font-size: 14px;
  font-weight: 600;
  position: relative;
}
.desktop-nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: var(--ink);
  transition: right 0.25s ease;
}
.desktop-nav a:hover:after,
.desktop-nav a.is-current:after {
  right: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-talk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease;
	border: 0px;
}
.header-talk:hover {
  background: var(--orange);
  transform: translateY(-2px);
}
.demo-wrap {
  text-align: center;
}
.demo-wrap h1 {
  margin-bottom: 22px;
  color: var(--ubt-dark);
  font-size: clamp(36px, 7vw, 72px);
  letter-spacing: -0.04em;
}
.btn-ubt-project {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--ubt-dark);
  border-radius: 0;
  background: var(--ubt-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: 0.3s;
}
.btn-ubt-project span {
  color: var(--orange);
  font-size: 18px;
  transition: 0.3s;
}
.btn-ubt-project:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.btn-ubt-project:hover span {
  color: #fff;
  transform: translate(4px, -3px);
}
.ubt-project-modal .modal-dialog {
  max-width: 1050px;
}
.ubt-project-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
}
.ubt-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(21, 21, 21, 0.12);
  border-radius: 50%;
  background: #fff;
  color: var(--ubt-dark);
  font-size: 26px;
  cursor: pointer;
  transition: 0.35s;
}
.ubt-modal-close:hover {
  background: var(--orange);
  color: #fff;
  transform: rotate(90deg);
}
.ubt-project-modal-intro {
  position: relative;
  height: 100%;
  padding: 55px 45px;
  background: var(--ubt-dark);
  color: #fff;
  overflow: hidden;
	z-index: 100;
}
.ubt-project-modal-intro::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  bottom: -90px;
  border: 1px solid rgba(240, 84, 35, 0.3);
  border-radius: 50%;
}
.ubt-project-modal-intro::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -35px;
  bottom: -20px;
  border: 1px solid rgba(240, 84, 35, 0.5);
  border-radius: 50%;
}
.ubt-modal-kicker {
  display: block;
  margin-bottom: 28px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.ubt-project-modal-intro h2 {
  max-width: 340px;
  margin: 0 0 24px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 600;
}
.ubt-project-modal-intro p {
  max-width: 340px;
  margin: 0;
  color: #a8a8a8;
  font-size: 14px;
  line-height: 1.75;
}
.ubt-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 35px;
}
.ubt-modal-meta span {
  padding: 7px 11px;
  border: 1px solid var(--orange);
  color: #d5d5d5;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
	border-radius: 25px;
}
.ubt-project-form-wrap {
  padding: 55px 48px;
}
.ubt-project-form-wrap .form-label {
  margin-bottom: 7px;
  color: var(--ubt-dark);
  font-size: 11px;
  font-weight: 600;
}
.ubt-form-control {
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  background: #fff;
  color: var(--ubt-dark);
  font-size: 13px;
  box-shadow: none !important;
  transition: 0.25s;
}
.ubt-form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 84, 35, 0.08) !important;
}
.ubt-form-control::placeholder {
  color: #ababab;
}
.ubt-textarea {
  min-height: 115px;
  resize: vertical;
}
.ubt-budget-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ubt-budget {
  padding: 9px 13px;
  border: 1px solid #dedede;
  border-radius: 25px;
  background: #fff;
  color: #666;
  font-size: 11px;
  cursor: pointer;
  transition: 0.25s;
}
.btn-check:checked + .ubt-budget {
  background: var(--ubt-dark);
  border-color: var(--ubt-dark);
  color: #fff;
}
.ubt-budget:hover {
  border-color: var(--orange);
}
.ubt-project-submit {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border: 0;
  border-radius: 25px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: 0.3s;
}
.ubt-project-submit:hover {
  background: var(--ubt-dark);
}
.ubt-submit-arrow {
  font-size: 19px;
  transition: 0.3s;
}
.ubt-project-submit:hover .ubt-submit-arrow {
  transform: translate(4px, -3px);
}
.ubt-form-note {
  margin: 0;
  text-align: center;
  color: #999;
  font-size: 10px;
}
.modal-backdrop.show {
  opacity: 0.7;
}
@media (max-width: 991.98px) {
  .ubt-project-modal .modal-dialog {
    margin: 20px auto;
  }
  .ubt-project-modal-intro {
    padding: 45px 35px;
  }
  .ubt-project-form-wrap {
    padding: 45px 35px;
  }
}
@media (max-width: 767.98px) {
  .ubt-project-modal .modal-dialog {
    margin: 10px;
  }
  .ubt-project-modal .modal-content {
    border-radius: 25px;
  }
  .ubt-modal-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .ubt-project-modal-intro {
    padding: 40px 25px;
  }
  .ubt-project-modal-intro h2 {
    font-size: 36px;
  }
  .ubt-project-form-wrap {
    padding: 35px 25px;
  }
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.menu-button span:not(.sr-only) {
  width: 17px;
  height: 1.5px;
  background: #fff;
  transition: 0.25s ease;
}
.menu-button[aria-expanded="true"] span:first-child {
  transform: translateY(3.8px) rotate(45deg);
}
.menu-button[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-3.8px) rotate(-45deg);
}
.mobile-menu {
  display: none;
}

.eyebrow,
.section-kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}
.eyebrow {
  margin: 0 0 24px;
}
.eyebrow.light {
  color: rgba(255, 255, 255, 0.62);
}
.section-kicker {
  color: var(--orange);
  margin: 0 0 24px;
}
/* ===============================
       Mouse follower
    =============================== */

    .mouse-logo {

        position: fixed;

        top: 0;
        left: 0;

        width: 46px;
        height: 46px;

        pointer-events: none;

        z-index: 999999;

        opacity: 0;

        will-change: transform;

        transition:
            opacity 0.25s ease;
    }


    /*
       Temporary demo logo.
       Later replace this circle
       with your actual logo image.
    */

    .mouse-logo-inner {

        width: 100%;
        height: 100%;

        border-radius: 50%;

        background: #f05423;

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

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

        color: white;

        transition:
            transform 0.25s ease,
            filter 0.25s ease,
            opacity 0.25s ease;
    }


    /* Click effect */

    .mouse-logo.clicking .mouse-logo-inner {

        transform: scale(1.8);

        filter: blur(8px);

        opacity: 0.15;
    }


    /* Mobile */

    @media (max-width: 991px) {

        .mouse-logo {
            display: none;
        }

    }
.reveal-title .word {
    display: inline-block;
    white-space: nowrap;
}

.reveal-title .char {
    display: inline-block;
}
.reveal-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(80px) rotate(6deg);
    transform-origin: bottom left;
    transition:
      transform .8s cubic-bezier(.16,1,.3,1),
      opacity .55s ease;
    transition-delay: calc(var(--char-index) * 0.03s);
    will-change: transform, opacity;
  }

  .reveal-title.is-visible .char {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
@media (prefers-reduced-motion: reduce) {
    .reveal-title .char {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
.hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    min-height:100vh;
	 padding-top: 175px;
}
.hero #scene{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
    pointer-events:none;
}
.hero .noise{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:.028;
}
.hero-copy{
    position:relative;
    z-index:4;
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(246,244,239,.98) 0%,
        rgba(246,244,239,.94) 34%,
        rgba(246,244,239,.58) 51%,
        rgba(246,244,239,.12) 70%,
        rgba(246,244,239,0) 100%
    );
}
@media (max-width: 991px){
    .hero #scene{
        opacity:.52;
    }
    .hero::after{
        background:linear-gradient(
            180deg,
            rgba(246,244,239,.30) 0%,
            rgba(246,244,239,.72) 48%,
            rgba(246,244,239,.98) 76%
        );
    }
}
.hero-copy h1 {
  font-size: clamp(60px, 8.45vw, 132px);
  line-height: 0.91;
  letter-spacing: -0.07em;
  font-weight: 600;
  max-width: 1360px;
  margin: 0;
}
.hero-copy h1 span {
  /*display: block;*/
  color: var(--orange);
}
.hero-bottom {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.hero-bottom > p {
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.55;
  max-width: 790px;
  margin: 0;
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 205px;
  border-radius: 999px;
  padding: 15px 18px 15px 22px;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.button span {
  font-size: 18px;
}
.button:hover {
  transform: translateY(-3px);
}
.button-dark {
  background: var(--ink);
  color: #fff;
}
.button-dark:hover {
  background: var(--orange);
}
.button-light {
  background: #fff;
  color: var(--ink);
}
.button-light:hover {
  background: var(--orange);
  color: #fff;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 14px;
}
.text-link span {
  transition: transform 0.25s ease;
}
.text-link:hover span {
  transform: translate(4px, -4px);
}

.hero-stage {
  position: relative;
  height: clamp(400px, 44vw, 640px);
  margin-top: 78px;
  background: var(--navy);
  overflow: hidden;
  border-radius: 32px;
  color: #fff;
  isolation: isolate;
}
.hero-stage:before {
  content: "";
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #f05423 0%,
    #f05423 24%,
    rgba(240, 84, 35, 0.28) 48%,
    transparent 70%
  );
  filter: blur(10px);
  left: 26%;
  top: 8%;
  animation: breathe 5s ease-in-out infinite;
}
.hero-stage-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 7vw 7vw;
  mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 76%);
}
.system-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit-one {
  width: 42%;
  aspect-ratio: 1;
  animation: spin 18s linear infinite;
}
.orbit-two {
  width: 68%;
  aspect-ratio: 1;
  animation: spinReverse 28s linear infinite;
}
.system-orbit:after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  left: 50%;
  top: -5px;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.8);
}
.system-core {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(20, 28, 50, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.24);
}
.core-mark {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.08em;
  color: #fff;
}
.system-core small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.58);
}
.system-node {
  position: absolute;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: center;
  animation: float 5s ease-in-out infinite;
}
.system-node span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 9px;
}
.node-a {
  left: 9%;
  top: 16%;
}
.node-b {
  right: 8%;
  top: 20%;
  animation-delay: -1.4s;
}
.node-c {
  left: 15%;
  bottom: 18%;
  animation-delay: -2.2s;
}
.node-d {
  right: 13%;
  bottom: 17%;
  animation-delay: -3.1s;
}
.node-e {
  left: 47%;
  top: 10%;
  animation-delay: -0.6s;
}
.stage-caption {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.stage-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  flex: 1;
  position: relative;
}
.stage-line:after {
  content: "";
  position: absolute;
  width: 52px;
  height: 1px;
  background: #fff;
  animation: scan 3s ease-in-out infinite;
}

.client-strip {
  padding: 70px 0 40px;
  overflow: hidden;
	background: #fff;
}
.client-strip-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 36px;
  gap: 40px;
}
.client-strip-head p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.client-strip-head p:last-child {
  color: var(--muted);
  font-weight: 500;
}
.logo-marquee {
  overflow: hidden;
}
.logo-track {
  display: flex;
  width: max-content;
  gap: 78px;
  align-items: center;
  animation: marquee 36s linear infinite;
	margin-top: 30px;
}
.client-wordmark {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #74726c;
  white-space: nowrap;
}
.client-wordmark.strong {
  font-weight: 800;
}
.client-wordmark.serif {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
.client-wordmark.compact {
  letter-spacing: -0.08em;
}
.client-wordmark.wide {
  letter-spacing: 0.05em;
  font-size: 19px;
  text-transform: uppercase;
}

.help {
  padding: 120px 0 155px;
}
.help-heading {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  align-items: end;
}
.help-heading h2,
.products-intro h2,
.work-head h2,
.method-intro h2,
.about-principles-head h2 {
  font-size: clamp(48px, 6vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 600;
  margin: 0;
}
.help-heading h2 span {
  color: var(--orange);
}
.help-heading p,
.products-intro > p {
  font-size: 19px;
  color: var(--muted);
  margin: 0;
  max-width: 530px;
  line-height: 1.65;
}
.problem-map {
  margin-top: 86px;
  display: grid;
  grid-template-columns: 0.75fr 0.8fr 1.15fr;
  min-height: 430px;
  border-top: 1px solid var(--line);
  
  padding: 46px 0;
  align-items: center;
}
.problem-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.map-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 14px;
}
.problem-pill {
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -0.04em;
  color: #9b9891;
  cursor: pointer;
  text-align: left;
  transition: color 0.25s ease, transform 0.25s ease;
}
.problem-pill:hover,
.problem-pill.is-active {
  color: var(--ink);
  transform: translateX(8px);
}
.problem-connector {
  height: 260px;
  position: relative;
}
.problem-connector svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.problem-connector path {
  fill: none;
  stroke:#f05423;
  stroke-width: 1.2;
  
}
.connector-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  left: 0;
  top: 116px;
  box-shadow: 0 0 0 8px rgba(240, 84, 35, 0.12);
  animation: connector 4s ease-in-out infinite;
}
.solution-card {
  background: #fff;
  border-radius: 26px;
  padding: 36px;
  box-shadow: 0 22px 70px rgba(32, 31, 29, 0.08);
}

/* Solution card entrance animation */

@keyframes solutionCardReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(3px);
    }

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

.solution-card.card-animate {
    animation: solutionCardReveal 0.65s
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .solution-card.card-animate {
        animation: none;
    }
}
.solution-card.is-changing {
  transform: translateY(8px);
  opacity: 0.35;
}
.solution-index {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--orange);
}
.solution-card h3 {
  font-size: clamp(29px, 3vw, 47px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  margin: 28px 0 20px;
  font-weight: 600;
}
.solution-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 520px;
}
.solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0;
}
.solution-tags span {
  border: 1px solid #dedbd3;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
}
.inline-cta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e6e3dc;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 800;
}
.inline-cta span {
  font-size: 17px;
}

.judgement {
  background: var(--ink);
  color: #fff;
  padding: 130px 0;
}
.judgement-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 100px;
}
.judgement-number {
  display: flex;
  align-items: flex-end;
  gap: 22px;
}
.judgement-number > span {
  font-size: clamp(130px, 19vw, 280px);
  line-height: 0.72;
  letter-spacing: -0.09em;
  color: var(--orange);
  font-weight: 600;
}
.judgement-number small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  padding-bottom: 10px;
}
.judgement-copy blockquote {
  font-size: clamp(35px, 4vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin: 0;
  font-weight: 500;
}
.judgement-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 70px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  gap: 30px;
}
.judgement-meta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.7;
}

.products {
  padding-top: 130px;
}
.products-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 95px;
}
.products-intro > p {
  padding-bottom: 6px;
}
.product-panel {
  min-height: 760px;
  padding: 80px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.product-raven {
  background: #192136;
  color: #fff;
}
.product-card {
  background: #f0c2ff;
  color: var(--ink);
}
.product-layout {
  display: grid;
  grid-template-columns: 0.77fr 1.23fr;
  gap: 85px;
  align-items: center;
}
.product-layout-reverse {
  grid-template-columns: 1.25fr 0.75fr;
}
.product-copy {
  max-width: 520px;
}
.product-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 34px;
}
.dark-copy .product-label {
  color: rgba(21, 21, 21, 0.55);
}
.product-copy h3 {
  font-size: clamp(52px, 6vw, 90px);
  line-height: 0.92;
  letter-spacing: -0.07em;
  font-weight: 600;
  margin: 0 0 26px;
}
.product-copy .product-lead {
  font-size: 17px;
  color: var(--orange-soft);
  font-weight: 800;
  margin: 0 0 18px;
}
.product-copy > p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.dark-copy > p {
  color: rgba(21, 21, 21, 0.7);
}
.raven-ui {
  position: relative;
  background: #f5f7fb;
  color: #1a2130;
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.26);
  transform: rotate(1.2deg);
  min-height: 520px;
}
.raven-topbar {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 10px;
}
.mini-logo {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: #202c4c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.raven-search {
  width: 34%;
  height: 13px;
  border-radius: 999px;
  background: #e3e6ee;
  margin-left: auto;
}
.raven-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f05423;
}
.raven-layout {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 12px;
  height: 430px;
}
.raven-sidebar {
  border-radius: 15px;
  background: #202c4c;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.raven-sidebar i {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}
.raven-sidebar i:first-child {
  background: #f05423;
  border-color: #f05423;
}
.raven-main {
  padding: 18px 14px;
}
.raven-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.raven-title-row b {
  font-size: 17px;
}
.raven-title-row span {
  background: #d8f5e2;
  color: #227342;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 8px;
  font-weight: 800;
}
.raven-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}
.raven-kpis > div {
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 13px;
  padding: 14px;
}
.raven-kpis span,
.raven-kpis em {
  display: block;
  font-size: 8px;
  color: #8c92a0;
  font-style: normal;
}
.raven-kpis strong {
  font-size: 26px;
  display: block;
  margin: 6px 0;
}
.raven-kpis em {
  color: #34a56c;
}
.raven-workspace {
  display: grid;
  grid-template-columns: 1.45fr 0.7fr;
  gap: 10px;
}
.raven-chart,
.raven-feed {
  height: 225px;
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 13px;
  padding: 18px;
}
.raven-chart {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #fafbfe);
}
.chart-line {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 45%;
  height: 2px;
  background: linear-gradient(90deg, #f05423, #6b78ff);
  transform: skewY(-8deg);
  box-shadow: 25px -20px 0 -1px #f05423, 70px 8px 0 -1px #6b78ff,
    125px -15px 0 -1px #f05423;
}
.chart-bars {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 75px;
  display: flex;
  align-items: end;
  gap: 8px;
}
.chart-bars i {
  flex: 1;
  background: #e9ecf5;
  border-radius: 4px 4px 0 0;
}
.chart-bars i:nth-child(1) {
  height: 36%;
}
.chart-bars i:nth-child(2) {
  height: 54%;
}
.chart-bars i:nth-child(3) {
  height: 43%;
}
.chart-bars i:nth-child(4) {
  height: 80%;
  background: #f05423;
}
.chart-bars i:nth-child(5) {
  height: 62%;
}
.chart-bars i:nth-child(6) {
  height: 88%;
}
.chart-bars i:nth-child(7) {
  height: 71%;
}
.raven-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.raven-feed > div {
  display: flex;
  gap: 9px;
  align-items: center;
}
.raven-feed span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #f0f2f7;
}
.raven-feed p {
  font-size: 8px;
  margin: 0;
  color: #676d7b;
}
.floating-status {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 11px 15px;
  font-size: 9px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  animation: float 5s ease-in-out infinite;
}
.floating-status b {
  font-size: 13px;
}
.status-one {
  left: -36px;
  bottom: 82px;
}
.status-two {
  right: -27px;
  top: 110px;
  animation-delay: -1.6s;
}
.card-visual {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}
.phone-shell {
  width: 290px;
  height: 560px;
  border: 8px solid #141414;
  border-radius: 44px;
  background: #fff;
  box-shadow: 0 38px 100px rgba(70, 28, 86, 0.25);
  padding: 42px 18px 18px;
  position: relative;
  z-index: 3;
  transform: rotate(-4deg);
}
.phone-camera {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 20px;
  border-radius: 999px;
  background: #111;
}
.digital-card-profile {
  text-align: center;
  padding: 30px 12px 18px;
}
.profile-mark {
  margin: 0 auto 18px;
  width: 78px;
  height: 78px;
  border-radius: 26px;
  background: var(--orange);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
}
.digital-card-profile h4 {
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: -0.04em;
}
.digital-card-profile p {
  font-size: 11px;
  color: #777;
  line-height: 1.5;
}
.phone-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.phone-actions span {
  font-size: 8px;
  text-align: center;
  background: #f2f1ed;
  border-radius: 9px;
  padding: 10px 4px;
  font-weight: 700;
}
.phone-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 24px;
}
.phone-list i {
  height: 54px;
  border-radius: 12px;
  background: #f5f4f0;
}
.qr-tile,
.review-tile,
.lead-tile {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(70, 28, 86, 0.22);
  z-index: 4;
}
.qr-tile {
  left: 6%;
  bottom: 65px;
  padding: 14px;
  transform: rotate(5deg);
  text-align: center;
}
.fake-qr {
  width: 88px;
  height: 88px;
  background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 50%/18px 18px;
  border: 8px solid #fff;
  box-shadow: inset 0 0 0 2px #111;
}
.qr-tile span {
  font-size: 8px;
  font-weight: 700;
}
.review-tile {
  right: 5%;
  top: 105px;
  padding: 15px 20px;
  transform: rotate(6deg);
}
.review-tile strong {
  display: block;
  font-size: 30px;
}
.review-tile span {
  font-size: 9px;
}
.lead-tile {
  right: 3%;
  bottom: 80px;
  padding: 14px 18px;
  transform: rotate(-7deg);
}
.lead-tile span {
  font-size: 9px;
  display: block;
}
.lead-tile strong {
  font-size: 24px;
  color: var(--orange);
}

.work {
  padding: 140px 0;
}
.work-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 68px;
}
.work-head > div {
  max-width: 950px;
}
.work-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 42px 28px;
}
.work-item {
  min-width: 0;
}
.work-large {
  grid-row: span 2;
}
.work-media {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: #ddd;
  min-height: 420px;
}
.work-large .work-media {
  min-height: 855px;
}
.cleansmart-media {
  background: #e7f7ea;
}
.cleansmart-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.work-item:hover .cleansmart-media img {
  transform: scale(1.035);
}
.work-float {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  padding: 13px 16px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}
.work-caption {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: start;
  padding: 17px 3px 0;
}
.work-caption div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.work-caption span {
  font-size: 16px;
  font-weight: 800;
}
.work-caption small {
  font-size: 12px;
  color: var(--muted);
}
.work-arrow {
  font-size: 20px !important;
  transition: transform 0.25s ease;
}
.work-item:hover .work-arrow {
  transform: translate(5px, -5px);
}
.work-iserve {
  background: #e3f1ff;
  padding: 32px;
  display: grid;
  place-items: center;
}
.browser-frame {
  width: 100%;
  height: 100%;
  min-height: 355px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 55px rgba(25, 79, 122, 0.16);
  overflow: hidden;
  transform: rotate(1.5deg);
  transition: transform 0.5s ease;
}
.work-item:hover .browser-frame {
  transform: rotate(0deg) scale(1.015);
}
.browser-bar {
  height: 34px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.browser-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c7c7c7;
}
.iserve-hero {
  height: 321px;
  padding: 42px;
  background: linear-gradient(135deg, #112a50, #0f5c96);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.iserve-hero:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #4ba7ff;
  right: -70px;
  bottom: -100px;
  box-shadow: -80px -40px 0 rgba(255, 255, 255, 0.08);
}
.iserve-hero span {
  font-size: 8px;
  letter-spacing: 0.18em;
}
.iserve-hero b {
  display: block;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}
.iserve-button {
  margin-top: 28px;
  display: inline-block;
  background: #fff;
  color: #14365c;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}
.work-edmerit {
  background: #f5e8dc;
  padding: 38px;
  display: grid;
  place-items: center;
}
.portal-card {
  width: 90%;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 25px 55px rgba(106, 67, 38, 0.12);
  transform: rotate(-2deg);
  transition: transform 0.5s ease;
}
.work-item:hover .portal-card {
  transform: rotate(0) translateY(-4px);
}
.portal-card > span {
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9a704d;
}
.portal-card h4 {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 14px 0 24px;
}
.portal-progress {
  display: flex;
  gap: 7px;
}
.portal-progress i {
  height: 5px;
  flex: 1;
  background: #eee3d9;
  border-radius: 99px;
}
.portal-progress i:first-child {
  background: var(--orange);
}
.portal-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}
.portal-fields b {
  height: 38px;
  background: #f7f5f1;
  border-radius: 8px;
}

.testimonial {
  background: #fff;
  padding: 130px 0;
}
.testimonial-shell blockquote {
  font-size: clamp(42px, 5.6vw, 82px);
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 500;
  margin: 0;
  max-width: 1320px;
}
.testimonial-person {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid #dedbd5;
  margin-top: 70px;
  padding-top: 20px;
}
.testimonial-person div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-person strong {
  font-size: 13px;
}
.testimonial-person span {
  font-size: 12px;
  color: var(--muted);
}
.country-mark {
  width: 42px;
  height: 28px;
  border-radius: 5px;
  background: #e9e8e3;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #666;
}

.method {
  padding: 145px 0;
}
.method-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 80px;
}
.method-steps {
  border-top: 1px solid var(--line);
}
.method-step {
  display: grid;
  grid-template-columns: 80px 0.7fr 1.1fr;
  gap: 30px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease;
}
.method-step:hover {
  padding-left: 12px;
}
.method-step > span {
  font-size: 12px;
  color: var(--orange);
  font-weight: 800;
}
.method-step h3 {
  font-size: 30px;
  letter-spacing: -0.04em;
  margin: 0;
  font-weight: 600;
}
.method-step p {
  margin: 0;
  color: var(--muted);
  max-width: 660px;
}

.contact {
  background: var(--orange);
  color: #fff;
  padding: 120px 0;
}
.contact-shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 100px;
  align-items: end;
}
.contact-copy h2 {
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.07em;
  font-weight: 600;
  margin: 0;
}
.contact-copy > p:last-child {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.74);
  max-width: 490px;
  margin: 34px 0 0;
}
.contact-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}
.contact-primary,
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding: 23px 0;
}
.contact-primary {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.contact-primary b {
  font-size: 32px;
  transition: transform 0.25s;
}
.contact-primary:hover b {
  transform: translate(5px, -5px);
}
.contact-row span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.contact-row b {
  font-size: 14px;
}

.site-footer {
  background: #111;
  color: #fff;
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.footer-brand img {
  width: 180px;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin-top: 20px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 40px;
  align-content: start;
}
.footer-links a {
  font-size: 24px;
  letter-spacing: -0.04em;
}
.footer-links a:hover {
  color: var(--orange);
}
.footer-bottom {
  grid-column: 1/-1;
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.about-hero {
  padding-top: 190px;
  padding-bottom: 90px;
}
.about-hero h1 {
  font-size: clamp(64px, 9vw, 138px);
  line-height: 0.9;
  letter-spacing: -0.075em;
  font-weight: 600;
  max-width: 1380px;
  margin: 0;
}
.about-hero h1 span {
  color: var(--orange);
}
.about-hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 70px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.about-hero-bottom p {
  font-size: 19px;
  line-height: 1.6;
  margin: 0;
  max-width: 610px;
}
.about-hero-bottom p:last-child {
  color: var(--muted);
}
.about-visual {
  height: 700px;
  padding-bottom: 120px;
}
.about-visual-inner {
  height: 100%;
  background: #d8d6cf;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.about-visual-inner:after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orange), transparent 68%);
  filter: blur(10px);
  opacity: 0.85;
}
.about-ring {
  position: absolute;
  border: 1px solid rgba(21, 21, 21, 0.3);
  border-radius: 50%;
  z-index: 2;
}
.ring-a {
  width: 430px;
  height: 430px;
}
.ring-b {
  width: 620px;
  height: 620px;
}
.about-center {
  position: relative;
  z-index: 4;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
}
.about-center strong {
  font-size: 86px;
  line-height: 0.9;
  letter-spacing: -0.07em;
}
.about-center span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.about-note {
  position: absolute;
  z-index: 4;
  background: #fff;
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.note-one {
  left: 12%;
  top: 22%;
}
.note-two {
  right: 10%;
  top: 26%;
}
.note-three {
  left: 16%;
  bottom: 18%;
}
.note-four {
  right: 12%;
  bottom: 20%;
}
.about-principles {
  padding: 40px 0 140px;
}
.about-principles-head {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 80px;
  margin-bottom: 80px;
}
.about-principles-head .section-kicker {
  padding-top: 16px;
}
.principle-list {
  border-top: 1px solid var(--line);
}
.principle-row {
  display: grid;
  grid-template-columns: 70px 0.9fr 1fr;
  gap: 35px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}
.principle-row > span {
  font-size: 11px;
  color: var(--orange);
  font-weight: 800;
}
.principle-row h3 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
}
.principle-row p {
  margin: 0;
  color: var(--muted);
  max-width: 600px;
}
.about-statement {
  background: #f1c9bb;
  padding: 130px 0;
}
.about-statement p {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.about-statement h2 {
  font-size: clamp(52px, 7vw, 105px);
  line-height: 0.96;
  letter-spacing: -0.065em;
  font-weight: 600;
  margin: 32px 0 0;
  max-width: 1350px;
}
.about-statement h2 span {
  color: var(--orange);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spinReverse {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.12);
    opacity: 0.82;
  }
}
@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}
@keyframes scan {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 52px);
  }
  100% {
    left: 0;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes connector {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    left: calc(100% - 12px);
    opacity: 1;
  }
  100% {
    left: calc(100% - 12px);
    opacity: 0;
  }
}

@media (max-width: 1100px) {
  :root {
    --shell: min(100% - 44px, 1480px);
  }
  .desktop-nav {
    display: none;
  }
  .menu-button {
    display: flex;
  }
  .header-talk {
    display: none;
  }
  .mobile-menu {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 72px;
    background: #111;
    color: #fff;
    border-radius: 20px;
    padding: 16px;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.25);
  }
  .mobile-menu.is-open {
    display: flex;
  }
  .mobile-menu a {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 17px;
  }
  .mobile-menu a:last-child {
    border: 0;
    color: var(--orange);
  }
  .hero-bottom,
  .help-heading,
  .products-intro,
  .judgement-grid,
  .contact-shell,
  .about-hero-bottom,
  .about-principles-head {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-ctas {
    justify-content: flex-start;
  }
  .problem-map {
    grid-template-columns: 0.8fr 0.35fr 1.1fr;
  }
  .problem-connector svg {
    display: none;
  }
  .problem-connector:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
  }
  .judgement-number > span {
    font-size: 170px;
  }
  .judgement-copy blockquote {
    max-width: 850px;
  }
  .product-layout,
  .product-layout-reverse {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .product-copy {
    max-width: 700px;
  }
  .product-raven .product-copy {
    order: 1;
  }
  .product-raven .raven-ui {
    order: 2;
  }
  .product-card .card-visual {
    order: 2;
  }
  .product-card .product-copy {
    order: 1;
  }
  .raven-ui {
    width: 92%;
    margin: auto;
  }
  .card-visual {
    min-height: 580px;
  }
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-large {
    grid-row: auto;
  }
  .work-large .work-media {
    min-height: 620px;
  }
  .work-media {
    min-height: 500px;
  }
  .method-step {
    grid-template-columns: 55px 0.65fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    grid-column: auto;
  }
  .about-principles-head .section-kicker {
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100vw - 30px);
  }
  .site-header {
    padding: 12px 0;
  }
  .brand img {
    width: 150px;
  }
  .menu-button {
    width: 40px;
    height: 40px;
  }
  .hero {
    padding-top: 132px;
    padding-bottom: 35px;
  }
  .hero-copy h1 {
    font-size: clamp(48px, 15vw, 78px);
    line-height: 0.92;
  }
  .hero-bottom {
    margin-top: 42px;
    padding-top: 20px;
  }
  .hero-bottom > p {
    font-size: 16px;
  }
  .hero-ctas {
    gap: 18px;
  }
  .button {
    min-width: 190px;
  }
  .hero-stage {
    height: 500px;
    margin-top: 50px;
    border-radius: 22px;
  }
  .system-core {
    width: 118px;
  }
  .core-mark {
    font-size: 40px;
  }
  .orbit-one {
    width: 62%;
  }
  .orbit-two {
    width: 94%;
  }
  .system-node {
    font-size: 9px;
    padding: 8px 10px;
  }
  .system-node span {
    width: 20px;
    height: 20px;
  }
  .node-a {
    left: 4%;
    top: 13%;
  }
  .node-b {
    right: 3%;
    top: 23%;
  }
  .node-c {
    left: 6%;
    bottom: 22%;
  }
  .node-d {
    right: 3%;
    bottom: 16%;
  }
  .node-e {
    left: 40%;
    top: 7%;
  }
  .stage-caption {
    left: 16px;
    right: 16px;
  }
  .client-strip {
    padding: 50px 0 70px;
  }
  .client-strip-head {
    flex-direction: column;
    gap: 8px;
  }
  .logo-track {
    gap: 48px;
  }
  .client-wordmark {
    font-size: 21px;
  }
  .help {
    padding: 85px 0 100px;
  }
  .help-heading h2,
  .products-intro h2,
  .work-head h2,
  .method-intro h2,
  .about-principles-head h2 {
    font-size: 47px;
  }
  .help-heading p,
  .products-intro > p {
    font-size: 16px;
  }
  .problem-map {
    margin-top: 55px;
    grid-template-columns: 1fr;
    padding: 0;
    border-bottom: 0;
  }
  .problem-column {
    padding: 25px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .problem-pill {
    font-size: 25px;
  }
  .problem-connector {
    display: none;
  }
  .solution-card {
    margin-top: 24px;
    padding: 25px;
  }
  .solution-card h3 {
    font-size: 34px;
  }
  .judgement {
    padding: 90px 0;
  }
  .judgement-grid {
    gap: 65px;
  }
  .judgement-number {
    align-items: center;
  }
  .judgement-number > span {
    font-size: 135px;
  }
  .judgement-number small {
    padding-bottom: 0;
  }
  .judgement-copy blockquote {
    font-size: 36px;
  }
  .judgement-meta {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 45px;
  }
  .products {
    padding-top: 90px;
  }
  .products-intro {
    margin-bottom: 65px;
  }
  .product-panel {
    padding: 65px 0;
    min-height: auto;
  }
  .product-copy h3 {
    font-size: 56px;
  }
  .raven-ui {
    min-height: 420px;
    width: 100%;
    padding: 10px;
  }
  .raven-layout {
    height: 340px;
    grid-template-columns: 48px 1fr;
  }
  .raven-sidebar {
    padding: 13px 8px;
  }
  .raven-main {
    padding: 12px 8px;
  }
  .raven-kpis > div {
    padding: 9px;
  }
  .raven-kpis strong {
    font-size: 17px;
  }
  .raven-workspace {
    grid-template-columns: 1fr;
  }
  .raven-feed {
    display: none;
  }
  .raven-chart {
    height: 180px;
  }
  .floating-status {
    display: none;
  }
  .card-visual {
    min-height: 500px;
    transform: scale(0.86);
    margin: -40px 0;
  }
  .phone-shell {
    width: 265px;
    height: 515px;
  }
  .qr-tile {
    left: -2%;
  }
  .review-tile {
    right: -2%;
  }
  .lead-tile {
    right: -5%;
  }
  .work {
    padding: 95px 0;
  }
  .work-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 45px;
  }
  .work-grid {
    gap: 45px;
  }
  .work-media,
  .work-large .work-media {
    min-height: 430px;
  }
  .work-iserve,
  .work-edmerit {
    padding: 18px;
  }
  .iserve-hero {
    padding: 28px;
  }
  .iserve-hero b {
    font-size: 29px;
  }
  .portal-card {
    width: 100%;
    padding: 24px;
  }
  .portal-card h4 {
    font-size: 24px;
  }
  .testimonial {
    padding: 90px 0;
  }
  .testimonial-shell blockquote {
    font-size: 39px;
  }
  .testimonial-person {
    margin-top: 45px;
    align-items: flex-start;
  }
  .testimonial-person span {
    max-width: 220px;
  }
  .method {
    padding: 95px 0;
  }
  .method-intro {
    margin-bottom: 50px;
  }
  .method-step {
    grid-template-columns: 38px 1fr;
    gap: 15px 20px;
  }
  .method-step p {
    grid-column: 2;
  }
  .method-step h3 {
    font-size: 26px;
  }
  .contact {
    padding: 90px 0;
  }
  .contact-copy h2 {
    font-size: 55px;
  }
  .contact-primary {
    font-size: 25px;
  }
  .contact-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .contact-row b {
    font-size: 13px;
  }
  .footer-links a {
    font-size: 20px;
  }
  .about-hero {
    padding-top: 145px;
  }
  .about-hero h1 {
    font-size: 58px;
  }
  .about-hero-bottom {
    margin-top: 48px;
  }
  .about-hero-bottom p {
    font-size: 16px;
  }
  .about-visual {
    height: 560px;
    padding-bottom: 85px;
  }
  .ring-a {
    width: 270px;
    height: 270px;
  }
  .ring-b {
    width: 410px;
    height: 410px;
  }
  .about-center {
    width: 150px;
    height: 150px;
  }
  .about-center strong {
    font-size: 60px;
  }
  .about-note {
    font-size: 9px;
    padding: 9px 11px;
  }
  .note-one {
    left: 4%;
    top: 17%;
  }
  .note-two {
    right: 2%;
    top: 28%;
  }
  .note-three {
    left: 5%;
    bottom: 21%;
  }
  .note-four {
    right: 3%;
    bottom: 12%;
  }
  .about-principles {
    padding-bottom: 90px;
  }
  .principle-row {
    grid-template-columns: 38px 1fr;
    gap: 14px 18px;
  }
  .principle-row p {
    grid-column: 2;
  }
  .principle-row h3 {
    font-size: 24px;
  }
  .about-statement {
    padding: 90px 0;
  }
  .about-statement h2 {
    font-size: 49px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}



.text-rotator {
    display: inline-block;
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-rotator.text-out {
    opacity: 0;
    transform: translateY(-20px);
}

.text-rotator.text-in-start {
    opacity: 0;
    transform: translateY(20px);
}

.text-rotator.text-in {
    opacity: 1;
    transform: translateY(0);
}
.ubt-stats-section {
    width: 100%;
    padding: 0px 30px;
    background: #fff;
}

.ubt-stats-wrapper {
    max-width: 1520px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
	background: #fff;
	
}

.ubt-stat-item {
    position: relative;

    min-height: 180px;
    padding: 35px 25px 30px;

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

    text-align: center;

    border-right: 1px solid #dedede;

    transition:
        background-color 0.35s ease,
        transform 0.35s ease;
}

.ubt-stat-item:last-child {
    border-right: none;
}


/* Icon */

.ubt-stat-icon {
    margin-bottom: 16px;

    font-size: 48px;
    line-height: 1;

    color: #f05423;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


/* Heading */

.ubt-stat-title {
    margin-bottom: 10px;

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

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #151515;
}


/* Number */

.ubt-stat-number {
    font-size: 31px;
    font-weight: 500;
    line-height: 1.2;

    color: #151515;
}


/* Hover */

.ubt-stat-item:hover {
    background: #151515;
}

.ubt-stat-item:hover .ubt-stat-icon {
    color: #f05423;
    transform: translateY(-5px);
}

.ubt-stat-item:hover .ubt-stat-title,
.ubt-stat-item:hover .ubt-stat-number {
    color: #ffffff;
}


/* Responsive */

@media (max-width: 991px) {

    .ubt-stats-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .ubt-stat-item:nth-child(2) {
        border-right: none;
    }

    .ubt-stat-item:nth-child(1),
    .ubt-stat-item:nth-child(2) {
        border-bottom: 1px solid #dedede;
    }

}


@media (max-width: 575px) {

    .ubt-stats-section {
        padding: 40px 20px;
    }

    .ubt-stats-wrapper {
        grid-template-columns: 1fr;
    }

    .ubt-stat-item {
        min-height: 160px;
        border-right: none;
        border-bottom: 1px solid #dedede;
    }

    .ubt-stat-item:last-child {
        border-bottom: none;
    }

    .ubt-stat-icon {
        font-size: 42px;
    }

    .ubt-stat-number {
        font-size: 28px;
    }
}


.ub-services .ub-heading {
  font-family: inherit;
}
.ub-services .ub-card summary {
  color: inherit;
}
.ub-services .ub-card .ub-expand ul {
  padding-left: 0;
}
.ub-services .ub-card .ub-expand li {
  margin: 0;
}
.ub-services .ub-art svg,
.ub-services .ub-card-icon svg,
.ub-services .ub-arrow svg {
  display: block;
}
.ub-art img{
	width: 80%;
}
.ub-services {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100vh;
  background: radial-gradient(
      ellipse 45% 29% at 92% 5%,
      rgba(240, 84, 35, 0.075),
      transparent 80%
    ),
    #151515;
}
.ub-services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  pointer-events: none;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.065) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.065) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: linear-gradient(
    115deg,
    transparent 7%,
    black 58%,
    transparent 100%
  );
}
.ub-shell {
  max-width: 1650px;
  padding: 0 clamp(22px, 4.7vw, 78px);
  margin: auto;
}
.ub-topbar {
  height: 105px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ub-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: -0.08em;
  font-weight: 900;
}
.ub-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--orange);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #151515;
  font-size: 16px;
  letter-spacing: -0.14em;
  padding-right: 3px;
}
.ub-brand-text {
  letter-spacing: -0.055em;
  font-weight: 850;
}
.ub-top-note {
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #939291;
}
.ub-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: #b9b7b4;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.ub-live-dot {
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(240, 84, 35, 0.13);
}
.ub-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.77fr) minmax(0, 1.23fr);
  gap: clamp(26px, 4.3vw, 72px);
  padding-top: clamp(65px, 8vw, 118px);
  padding-bottom: 110px;
}
.ub-intro {
  align-self: start;
  position: sticky;
  top: 48px;
  padding-top: 4px;
}
.ub-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #c1bfbd;
  font-size: 11px;
  letter-spacing: 0.23em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.ub-eyebrow::before {
  content: "";
  display: block;
  width: 37px;
  height: 1px;
  background: var(--orange);
}
.ub-heading {
  max-width: 640px;
  margin: 0;
  font-size: clamp(60px, 6.05vw, 109px);
  line-height: 0.94;
  letter-spacing: -0.088em;
  font-weight: 600;
  text-wrap: balance;
}
.ub-heading .ub-heading-orange {
  color: var(--orange);
}
.ub-heading .word {
  display: inline-block;
  white-space: nowrap;
}
.ub-heading .char {
  display: inline-block;
  will-change: transform, opacity;
}
.ub-services.ub-js .ub-heading:not(.is-visible) .char {
  opacity: 0;
  transform: translate3d(0, 68px, 0) rotate(5deg);
}
.ub-heading.is-visible .char {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0);
}
.ub-services.ub-js .ub-heading .char {
  transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--ch) * 23ms);
}
.ub-intro-copy {
  max-width: 400px;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--muted);
  line-height: 1.8;
  margin: 30px 0 31px;
}
.ub-anchor {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(240, 84, 35, 0.65);
  transition: gap 0.25s, border-color 0.25s;
}
.ub-anchor:hover {
  gap: 27px;
  border-color: var(--white);
}
.ub-anchor svg {
  width: 15px;
  height: 15px;
  color: var(--orange);
}
.ub-decor {
  position: relative;
  width: min(100%, 330px);
  height: 210px;
  margin-top: clamp(45px, 6vw, 90px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.ub-decor-arc {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 260px;
  height: 260px;
  left: -50px;
  top: 39px;
}
.ub-decor-arc:nth-child(2) {
  width: 190px;
  height: 190px;
  left: -15px;
  top: 74px;
  border-color: rgba(240, 84, 35, 0.25);
}
.ub-decor-arc:nth-child(3) {
  width: 120px;
  height: 120px;
  left: 20px;
  top: 109px;
}
.ub-decor-center {
  position: absolute;
  left: 73px;
  top: 161px;
  width: 15px;
  height: 15px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 32px 10px rgba(240, 84, 35, 0.23);
}
.ub-decor-label {
  position: absolute;
  right: 4px;
  top: 46px;
  text-align: right;
  font-size: 10px;
  line-height: 1.8;
  color: #888;
  letter-spacing: 0.19em;
}
.ub-decor-label strong {
  font-size: 27px;
  display: block;
  color: #f4f3ef;
  letter-spacing: -0.06em;
  font-weight: 500;
}
.ub-service-list-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.ub-service-list-head span:first-child {
  font-size: 12px;
  color: #e1deda;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 750;
}
.ub-service-list-head span:last-child {
  font-size: 10px;
  color: #8b8b8b;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}
.ub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.ub-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  min-width: 0;
  isolation: isolate;
  background: linear-gradient(145deg, #222224, #1b1b1d);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  overflow: hidden;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.4s,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	height: 100%;
}
.ub-card::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    360px circle at var(--mx) var(--my),
    rgba(240, 84, 35, 0.145),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s;
}
.ub-card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07),
    transparent 39%
  );
  opacity: 0.65;
}
.ub-card:hover,
.ub-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(240, 84, 35, 0.48);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.ub-card:hover::before,
.ub-card:focus-within::before {
  opacity: 1;
}
.ub-card[open] {
  border-color: rgba(240, 84, 35, 0.65);
}
.ub-card:nth-child(1),
.ub-card:nth-child(6) {
  grid-column: 1/-1;
}
.ub-card:nth-child(1) {
  background: linear-gradient(110deg, #252122 7%, #211d1d 62%, #2b2422);
}
.ub-card:nth-child(6) {
  background: linear-gradient(120deg, #252326, #202022 80%);
}
.ub-card summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 25px 25px 24px;
  min-height: 300px;
}
.ub-card summary::-webkit-details-marker {
  display: none;
}
.ub-card.featured summary {
  min-height: 285px;
  padding: 30px 30px 28px;
}
.ub-card.wide summary {
  min-height: 240px;
  padding: 28px 30px 26px;
}
.ub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 43px;
}
.ub-card-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: var(--orange);
  background: rgba(255, 255, 255, 0.03);
}
.ub-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.55;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ub-card-index {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #9e9a98;
}
.ub-arrow {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 50%;
  color: #ddd;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.ub-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ub-card:hover .ub-arrow,
.ub-card[open] .ub-arrow {
  background: var(--orange);
  color: #191919;
  transform: rotate(45deg);
  border-color: var(--orange);
}
.ub-card-title {
  font-size: clamp(20px, 2vw, 31px);
  line-height: 1.11;
  letter-spacing: -0.055em;
  font-weight: 760;
  max-width: 330px;
  margin: 0 0 12px;
}
.ub-card-desc {
  
  line-height: 1.65;
  color: #aaa7a4;
  margin: 0;
  max-width: 360px;
}
.ub-card-feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
  gap: 23px;
  align-items: center;
}
.ub-card-feature-layout .ub-card-top {
  margin-bottom: 38px;
}
.ub-pill-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 23px;
}
.ub-pill {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 100px;
  padding: 6px 9px;
  font-size: 9px;
  color: #bebbb8;
  letter-spacing: 0.03em;
}
.ub-card-footer {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9c5c0;
}
.ub-card-footer .ub-mini-dash {
  height: 1px;
  width: 24px;
  background: var(--orange);
  transition: width 0.35s;
}
.ub-card:hover .ub-mini-dash {
  width: 45px;
}
.ub-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
  margin-top: 15px;
  overflow: hidden;
  pointer-events: none;
}
.ub-card.featured .ub-art {
  min-height: 213px;
  margin: 0;
}
.ub-browser {
  width: min(100%, 290px);
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 9px;
  background: #171719;
  box-shadow: 12px 13px 0 rgba(240, 84, 35, 0.09),
    0 20px 30px rgba(0, 0, 0, 0.2);
  transform: rotate(-4deg) translateY(9px);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ub-card img {
  
  
  transform: rotate(-4deg) translateY(9px);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ub-card:hover .ub-browser {
  transform: rotate(-1deg) translateY(-3px);
}
.ub-card:hover img {
  transform: rotate(-1deg) translateY(-3px);
}
.ub-browser-head {
  height: 26px;
  border-bottom: 1px solid #353537;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}
.ub-browser-head i {
  width: 5px;
  height: 5px;
  background: #5d5b5a;
  border-radius: 50%;
}
.ub-browser-head i:first-child {
  background: var(--orange);
}
.ub-browser-url {
  height: 6px;
  width: 80px;
  border-radius: 7px;
  background: #363538;
  margin: auto;
}
.ub-browser-body {
  display: flex;
  gap: 9px;
  padding: 15px;
  height: 143px;
}
.ub-browser-copy {
  flex: 1;
}
.ub-browser-copy b,
.ub-browser-copy em {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: #e1dcd9;
  margin-bottom: 7px;
  width: 88%;
}
.ub-browser-copy b:nth-child(2) {
  width: 65%;
}
.ub-browser-copy em {
  height: 4px;
  margin-top: 14px;
  width: 93%;
  background: #595656;
}
.ub-browser-copy em:nth-child(4) {
  margin-top: 5px;
  width: 73%;
}
.ub-browser-cta {
  display: block;
  height: 15px;
  width: 55px;
  background: var(--orange);
  border-radius: 3px;
  margin-top: 18px;
}
.ub-browser-img {
  flex: 0 0 39%;
  background: radial-gradient(
      circle at 55% 36%,
      rgba(240, 84, 35, 0.72),
      transparent 35%
    ),
    linear-gradient(125deg, #4b3730, #282525 70%);
  border-radius: 5px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.ub-browser-img::after {
  content: "";
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 21px;
  box-shadow: 0 0 0 19px rgba(255, 255, 255, 0.025),
    0 0 0 38px rgba(255, 255, 255, 0.035);
}
.ub-browser-badge {
  position: absolute;
  bottom: 12px;
  right: 0;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #191919;
  background: #f3e5dc;
  padding: 7px 10px;
  border-radius: 3px;
  transform: rotate(4deg);
  box-shadow: 0 6px 20px #0005;
}
.ub-phone {
  position: relative;
  height: 114px;
  width: 77px;
  border: 1px solid #817977;
  border-radius: 13px;
  background: #161616;
  transform: rotate(-10deg) translateX(14px);
  box-shadow: 17px 10px 0 -2px #323033, 18px 10px 0 -1px #696061;
  transition: transform 0.45s;
}
.ub-card:hover .ub-phone {
  transform: rotate(-3deg) translateX(11px) translateY(-4px);
}
.ub-phone::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 28px;
  width: 22px;
  height: 3px;
  background: #65605e;
  border-radius: 5px;
}
.ub-phone b,
.ub-phone i {
  display: block;
  position: absolute;
  border-radius: 3px;
  background: #575153;
}
.ub-phone b {
  top: 19px;
  left: 9px;
  width: 59px;
  height: 28px;
  background: linear-gradient(120deg, #81432f, var(--orange));
}
.ub-phone i:nth-child(2) {
  top: 56px;
  left: 9px;
  width: 54px;
  height: 4px;
}
.ub-phone i:nth-child(3) {
  top: 67px;
  left: 9px;
  width: 39px;
  height: 4px;
}
.ub-phone i:nth-child(4) {
  top: 81px;
  left: 9px;
  width: 24px;
  height: 16px;
  background: #aa4c2d;
}
.ub-ai-art {
  height: 116px;
}
.ub-ai-ring {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px dashed rgba(240, 84, 35, 0.39);
  border-radius: 50%;
  animation: ub-spin 22s linear infinite;
}
.ub-ai-ring::before,
.ub-ai-ring::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%;
  top: 15px;
  left: 15px;
}
.ub-ai-ring::after {
  top: auto;
  left: auto;
  bottom: 15px;
  right: 15px;
  background: #f8dfd4;
}
.ub-ai-core {
  display: grid;
  place-items: center;
  width: 73px;
  height: 73px;
  border: 3px solid rgba(240, 84, 35, 0.9);
  border-radius: 21px;
  transform: rotate(45deg);
  background: radial-gradient(
    circle,
    rgba(240, 84, 35, 0.2),
    rgba(240, 84, 35, 0.035)
  );
  box-shadow: 0 0 38px rgba(240, 84, 35, 0.13);
}
.ub-ai-core svg {
  width: 30px;
  height: 30px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.4;
  transform: rotate(-45deg);
}
.ub-commerce-art {
  justify-items: stretch;
  padding: 0 15px;
}
.ub-checkout {
  max-width: 230px;
  width: 100%;
  margin: auto;
  background: #171719;
  border: 2px solid #f05423;
  border-radius: 8px;
  padding: 10px 12px;
  transform: rotate(-4deg);
  transition: transform 0.45s;
}
.ub-card:hover .ub-checkout {
  transform: rotate(0) translateY(-5px);
}
.ub-checkout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.ub-checkout-thumb {
  width: 25px;
  height: 25px;
  border-radius: 4px;
  background: #6d3e2c;
}
.ub-checkout-thumb.alt {
  background: #5c5550;
}
.ub-checkout-lines {
  flex: 1;
}
.ub-checkout-lines span {
  display: block;
  width: 80%;
  height: 4px;
  margin: 4px 0;
  background: #aaa09a;
  border-radius: 8px;
}
.ub-checkout-lines span:nth-child(2) {
  width: 55%;
  background: #5e5653;
}
.ub-checkout-total {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #454040;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #c6c2bd;
}
.ub-checkout-total strong {
  font-size: 11px;
  color: var(--orange);
}
.ub-metrics-art {
  align-items: end;
}
.ub-metrics {
  width: min(100%, 225px);
  height: 115px;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 12px;
  padding: 5px 5px 11px;
  border-bottom: 1px solid #61504b;
}
.ub-metrics b {
  position: relative;
  width: 19px;
  background: linear-gradient(0deg, rgba(240, 84, 35, 0.31), var(--orange));
  border-radius: 3px 3px 0 0;
  height: var(--h);
  transform-origin: bottom;
  transition: height 0.45s;
}
.ub-metrics b:nth-child(even) {
  background: linear-gradient(0deg, #4c3d3b, #8f736a);
}
.ub-metrics svg {
  position: absolute;
  inset: -4px 0 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ub-metrics path {
  stroke: #eeb5a1;
  stroke-width: 1.6;
  fill: none;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}
.ub-roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 30px;
  position: relative;
}
.ub-roadmap::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), rgba(255, 255, 255, 0.12));
  z-index: -1;
}
.ub-roadmap-step {
  min-width: 0;
}
.ub-roadmap-dot {
  display: block;
  width: 16px;
  height: 16px;
  border: 4px solid #272324;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(240, 84, 35, 0.5);
  margin-bottom: 11px;
}
.ub-roadmap-step:nth-child(2) .ub-roadmap-dot {
  background: #ac6b53;
}
.ub-roadmap-step:nth-child(3) .ub-roadmap-dot {
  background: #b2aaa6;
}
.ub-roadmap-step strong {
  display: block;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.01em;
}
.ub-roadmap-step small {
  display: block;
  font-size: 9px;
  color: #8f8c89;
  margin-top: 4px;
}
.ub-wide-layout {
  display: grid;
  grid-template-columns: 1fr minmax(170px, 0.9fr);
  gap: 20px;
  align-items: end;
}
.ub-wide-layout .ub-card-top {
  margin-bottom: 28px;
}
.ub-expand {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 26px 23px;
  background: rgba(0, 0, 0, 0.13);
  animation: ub-expand-in 0.3s ease both;
}
.ub-expand-label {
  font-size: 10px;
  color: var(--orange);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 750;
  margin: 0 0 12px;
}
.ub-expand ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ub-expand li {
  font-size: 11px;
  color: #e0ddda;
  border: 1px solid #51413c;
  background: rgba(240, 84, 35, 0.065);
  padding: 9px 11px;
  border-radius: 6px;
}
.ub-endbar {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  color: #8e8b89;
  font-size: 11px;
  line-height: 1.5;
}
.ub-endbar a {
  color: #e6e0db;
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 5px;
  white-space: nowrap;
}
.ub-services.ub-js .ub-card.ub-animate:not(.in-view) {
  opacity: 0;
  transform: translateY(38px);
}
.ub-services.ub-js .ub-card.ub-animate.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s, box-shadow 0.4s;
  transition-delay: var(--stagger, 0ms);
}
.ub-services.ub-js .ub-card.ub-animate.in-view:hover {
  transform: translateY(-5px);
  transition-delay: 0ms;
}
@keyframes ub-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ub-expand-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1150px) {
  .ub-layout {
    grid-template-columns: minmax(245px, 0.73fr) minmax(0, 1.27fr);
    gap: 28px;
  }
  .ub-heading {
    font-size: clamp(52px, 6vw, 80px);
  }
  .ub-card summary {
    padding: 20px;
    min-height: 310px;
  }
  .ub-card-feature-layout {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr);
  }
  .ub-card-title {
    font-size: clamp(20px, 2.35vw, 28px);
  }
  .ub-card.featured summary {
    padding: 25px;
  }
}
@media (max-width: 860px) {
  .ub-topbar {
    height: 78px;
  }
  .ub-layout {
    grid-template-columns: 1fr;
    padding-top: 75px;
    gap: 62px;
  }
  .ub-intro {
    position: relative;
    top: auto;
  }
  .ub-heading {
    max-width: 700px;
    font-size: clamp(62px, 11vw, 100px);
  }
  .ub-intro-copy {
    max-width: 590px;
  }
  .ub-decor {
    display: none;
  }
  .ub-card summary {
    min-height: 290px;
  }
}
@media (max-width: 560px) {
  .ub-shell {
    padding: 0 18px;
  }
  .ub-top-note {
    display: none;
  }
  .ub-layout {
    padding-top: 60px;
    padding-bottom: 70px;
    gap: 46px;
  }
  .ub-heading {
    font-size: clamp(49px, 12.1vw, 68px);
  }
  .ub-intro-copy {
    margin: 24px 0;
  }
  .ub-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ub-card:nth-child(1),
  .ub-card:nth-child(6) {
    grid-column: auto;
  }
  .ub-card summary,
  .ub-card.featured summary,
  .ub-card.wide summary {
    min-height: auto;
    padding: 23px;
  }
  .ub-card-top {
    margin-bottom: 27px;
  }
  .ub-card-title {
    font-size: 27px;
  }
  .ub-card-desc {
    font-size: 14px;
  }
  .ub-card-feature-layout,
  .ub-wide-layout {
    grid-template-columns: 1fr;
  }
  .ub-card.featured .ub-art {
    min-height: 180px;
    margin-top: 12px;
  }
  .ub-card:not(.featured):not(.wide) .ub-art {
    min-height: 105px;
  }
  .ub-roadmap {
    margin-top: 28px;
  }
  .ub-card-footer {
    margin-top: 18px;
  }
  .ub-service-list-head span:last-child {
    max-width: 138px;
  }
  .ub-endbar {
    align-items: start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ub-services.ub-js .ub-heading .char,
  .ub-services.ub-js .ub-heading:not(.is-visible) .char,
  .ub-services.ub-js .ub-card.ub-animate:not(.in-view) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ub-card,
  .ub-browser,
  .ub-phone,
  .ub-checkout,
  .ub-arrow {
    transition: none;
  }
  .ub-ai-ring {
    animation: none;
  }
  .ub-expand {
    animation: none;
  }
}

.ub-services {
  background: radial-gradient(
      ellipse 50% 34% at 98% 4%,
      rgba(240, 84, 35, 0.075),
      transparent 77%
    ),
    radial-gradient(
      ellipse 34% 27% at 0% 84%,
      rgba(240, 84, 35, 0.027),
      transparent 80%
    ),
    #fff;
}
.ub-services::before {
  opacity: 0.42;
  background-image: linear-gradient(
      rgba(21, 21, 21, 0.048) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(21, 21, 21, 0.048) 1px, transparent 1px);
  mask-image: linear-gradient(
    115deg,
    transparent 4%,
    black 64%,
    transparent 100%
  );
}
.ub-topbar {
  border-bottom-color: rgba(21, 21, 21, 0.13);
}
.ub-brand {
  color: #151515;
}
.ub-brand-mark {
  color: #fff;
  box-shadow: 0 7px 16px rgba(240, 84, 35, 0.18);
}
.ub-top-note {
  color: #777;
}
.ub-top-right {
  color: #555;
}
.ub-live-dot {
  box-shadow: 0 0 0 5px rgba(240, 84, 35, 0.105);
}
.ub-eyebrow {
  color: #686868;
}
.ub-heading {
  color: #151515;
}
.ub-intro-copy {
  color: #656565;
}
.ub-anchor {
  color: #151515;
}
.ub-anchor:hover {
  border-bottom-color: #151515;
}
.ub-decor {
  border-top-color: rgba(21, 21, 21, 0.13);
}
.ub-decor-arc {
  border-color: rgba(21, 21, 21, 0.12);
}
.ub-decor-arc:nth-child(2) {
  border-color: rgba(240, 84, 35, 0.33);
}
.ub-decor-label {
  color: #858585;
}
.ub-decor-label strong {
  color: #151515;
}
.ub-service-list-head {
  border-bottom-color: rgba(21, 21, 21, 0.16);
}
.ub-service-list-head span:first-child {
  color: #252525;
}
.ub-service-list-head span:last-child {
  color: #777;
}

.ub-card {
  background: linear-gradient(145deg, #ffffff, #faf9f7);
  border: 1px solid #e9e6e2;
  box-shadow: 0 4px 20px rgba(22, 22, 22, 0.035),
    0 1px 2px rgba(22, 22, 22, 0.025);
}
.ub-card::before {
  background: radial-gradient(
    350px circle at var(--mx) var(--my),
    rgba(240, 84, 35, 0.105),
    transparent 72%
  );
}
.ub-card::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82),
    transparent 39%
  );
  opacity: 0.45;
}
.ub-card:hover,
.ub-card:focus-within {
  border-color: rgba(240, 84, 35, 0.53);
  box-shadow: 0 24px 55px rgba(43, 36, 31, 0.1),
    0 6px 20px rgba(240, 84, 35, 0.055);
}
.ub-card[open] {
  border-color: rgba(240, 84, 35, 0.64);
}
.ub-card:nth-child(1) {
  background: radial-gradient(
      circle at 90% 12%,
      rgba(240, 84, 35, 0.13),
      transparent 43%
    ),
    linear-gradient(125deg, #fff, #fff7f1);
}
.ub-card:nth-child(6) {
  background: radial-gradient(
      circle at 92% 12%,
      rgba(240, 84, 35, 0.09),
      transparent 48%
    ),
    linear-gradient(120deg, #fff, #f8f7f5);
}
.ub-card-icon {
  border-color: rgba(240, 84, 35, 0.2);
  color: #ed5022;
  background: #fff3ec;
}
.ub-card-index {
  color: #85817d;
}
.icon-up-right {
  transform: rotate(-45deg);
  display: inline-block; /* Required for the rotation transformation to apply properly */
}
.ub-arrow {
  border-color: #dbd7d3;
  color: #242424;
  background: #fff;
}
.ub-card:hover .ub-arrow,
.ub-card[open] .ub-arrow {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.ub-card-title {
  color: #191919;
}
.ub-card-desc {
  color: #676460;
}
.ub-pill {
  border-color: #e7d9d0;
  color: #755b4e;
  background: rgba(255, 255, 255, 0.55);
}
.ub-card-footer {
  color: #65615c;
}
.ub-browser {
  border-color: #ddd8d3;
  background: #fff;
  box-shadow: 12px 13px 0 rgba(240, 84, 35, 0.09),
    0 17px 38px rgba(47, 41, 36, 0.12);
}
.ub-browser-head {
  border-bottom-color: #eae7e3;
  background: #f8f7f5;
}
.ub-browser-head i {
  background: #d5cfca;
}
.ub-browser-url {
  background: #e7e2de;
}
.ub-browser-copy b {
  background: #302f2e;
}
.ub-browser-copy em {
  background: #d8d2cc;
}
.ub-browser-img {
  background: radial-gradient(
      circle at 54% 35%,
      rgba(240, 84, 35, 0.72),
      transparent 34%
    ),
    linear-gradient(145deg, #f5c6a9, #ec8050 72%, #bd4e27);
}
.ub-browser-img::after {
  border-color: rgba(255, 255, 255, 0.75);
}
.ub-browser-badge {
  color: #71361f;
  background: #fff5ec;
  box-shadow: 0 6px 20px rgba(61, 41, 31, 0.13);
}
.ub-phone {
  border-color: #c5bdb6;
  background: #fff;
  box-shadow: 17px 10px 0 -2px #eeeae7, 18px 10px 0 -1px #d8d1ca;
}
.ub-phone::before {
  background: #cac5bf;
}
.ub-phone i {
  background: #d8d3ce;
}
.ub-phone i:nth-child(4) {
  background: #f5b391;
}
.ub-ai-core {
  background: radial-gradient(
    circle,
    rgba(240, 84, 35, 0.45),
    rgba(240, 84, 35, 0.45)
  );
}
.ub-ai-ring::after {
  background: #f6bd9f;
}
.ub-checkout {
  background: #fff;
  border-color:  #f05423;
  box-shadow: 0 12px 25px rgba(44, 37, 32, 0.45);
}
.ub-checkout-thumb {
  background: #f1a179;
}
.ub-checkout-thumb.alt {
  background: #b9b0a9;
}
.ub-checkout-lines span {
  background: #cdc6bf;
}
.ub-checkout-lines span:nth-child(2) {
  background: #e6e1dc;
}
.ub-checkout-total {
  border-top-color: #ebe6e1;
  color: #76716b;
}
.ub-metrics {
  border-bottom-color: #d9d1cb;
}
.ub-metrics b:nth-child(even) {
  background: linear-gradient(0deg, #e2d6d0, #a99d97);
}
.ub-metrics path {
  stroke: #ba673e;
}
.ub-roadmap::before {
  background: linear-gradient(90deg, var(--orange), rgba(21, 21, 21, 0.17));
}
.ub-roadmap-dot {
  border-color: #f9f8f6;
}
.ub-roadmap-step:nth-child(2) .ub-roadmap-dot {
  background: #de916e;
}
.ub-roadmap-step:nth-child(3) .ub-roadmap-dot {
  background: #c9bfba;
}
.ub-roadmap-step strong {
  color: #292929;
}
.ub-roadmap-step small {
  color: #898580;
}
.ub-expand {
  border-top-color: #eee4dd;
  background: rgba(255, 247, 241, 0.86);
}
.ub-expand li {
  color: #713c29;
  border-color: #ebd3c4;
  background: #fff;
}
.ub-endbar {
  color: #777;
  border-top-color: rgba(21, 21, 21, 0.13);
}
.ub-endbar a {
  color: #262626;
}


/* SVG */

.guide-path{
    fill:none;
    stroke:#e4e4e7;
    stroke-width:1;
    stroke-dasharray:2 4;
    opacity:.6;
}

.base-path{
    fill:none;
    stroke:#18181b;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.85;
}

.trail-path{
    fill:none;
    stroke:#f05423;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0;
}

.origin-dot{
    fill:#a1a1aa;
}

.runner-dot{
    fill:#f05423;
}

.runner-glow{
    fill:#f05423;
    opacity:.16;
}

.hub-pulse{
    fill:none;
    stroke:#f05423;
    stroke-width:1.5;
}

.hub-core{
    fill:#151515;
    transform-origin:315px 120px;
}

.hub-glow{
    opacity:.08;
}

.emission-line{
    stroke:#f05423;
    stroke-width:2.5;
    stroke-linecap:round;
    opacity:0;
}




/* RESPONSIVE */

@media(max-width:900px){

    .problem-map{
        grid-template-columns:1fr;
        gap:30px;
    }

    .problem-column{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .map-label{
        grid-column:1 / -1;
    }

    .problem-connector{
        max-width:550px;
        margin:auto;
    }
}

@media(max-width:550px){

    .problem-column{
        grid-template-columns:1fr;
    }

}
.ubt-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 30px;
}

.ubt-filter-button {
    position: relative;

    padding: 11px 18px;

    border: 1px solid #e5e5e5;
	border-radius: 20px;
    background: #ffffff;

    color: #6d6d6d;

    font-family: inherit;

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

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    overflow: hidden;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}

.ubt-filter-button::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #f05423;

    transform: translateX(-50%);

    transition:
        width 0.45s
        cubic-bezier(.16,1,.3,1);
}

.ubt-filter-button:hover {
    color: #151515;

    border-color: #bbbbbb;
}

.ubt-filter-button.is-active {
    background: #151515;

    border-color: #151515;

    color: #ffffff;
}

.ubt-filter-button.is-active::after {
    width: calc(100% - 20px);
}


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

.ubt-portfolio-grid {
    position: relative;

    display: grid;

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

    gap: 22px;

    will-change: height;
}


/* =====================================================
   PROJECT
===================================================== */

.ubt-project {
    position: relative;

    grid-column: span 6;

    min-height: 350px;

    overflow: hidden;

    background: #151515;

    cursor: pointer;

    will-change:
        transform,
        opacity;

    backface-visibility: hidden;
	border-radius: 26px;
}

.ubt-project.project-large {
    grid-column: span 7;
}

.ubt-project.project-small {
    grid-column: span 4;
}
.ubt-project.project-MED {
    grid-column: span 5;
}

.ubt-project.project-full {
    grid-column: span 12;

    min-height: 620px;
}

.ubt-project.is-hidden {
    display: none;
}


/* =====================================================
   PROJECT MEDIA
===================================================== */

.ubt-project-media {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


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

.ubt-project-image {
    position: absolute;

    width: calc(100% + 70px);
    height: calc(100% + 70px);

    left: 0px;
    top: 0px;

    object-fit: cover;

    transform:
        translate3d(
            var(--move-x, 0px),
            var(--move-y, 0px),
            0
        )
        scale(1.045);

    transform-origin: center;

    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =====================================================
   OVERLAY
===================================================== */

.ubt-project-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02) 15%,
            rgba(0,0,0,0.10) 50%,
            rgba(0,0,0,0.87) 100%
        );

    transition:
        background 0.65s ease;
}


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

.ubt-project-number {
    position: absolute;

    top: 28px;
    left: 30px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

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

    letter-spacing: 2px;

    transition:
        color 0.45s ease,
        transform 0.55s
        cubic-bezier(.16,1,.3,1);
}


/* =====================================================
   OPEN BUTTON
===================================================== */

.ubt-project-open {
    position: absolute;

    top: 25px;
    right: 25px;

    width: 51px;
    height: 51px;

    display: flex;

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

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.38
        );

    border-radius: 50%;

    color: #ffffff;

    font-size: 19px;

    opacity: 0;

    transform:
        scale(.72)
        rotate(-30deg);

    transition:
        opacity 0.45s ease,
        transform 0.6s
        cubic-bezier(.16,1,.3,1),
        background 0.3s ease,
        border-color 0.3s ease;
}


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

.ubt-project-content {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 35px;

    color: #ffffff;

    transform:
        translateY(39px);

    transition:
        transform 0.65s
        cubic-bezier(.16,1,.3,1);
}

.ubt-project-category {
    display: block;

    margin-bottom: 12px;

    color: #fff;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}

.ubt-project-title {
    max-width: 700px;

    font-size: clamp(
        25px,
        2.4vw,
        26px
    );

    line-height: 1.08;

    letter-spacing: -1.2px;
	text-transform: uppercase;
    font-weight: 500;
}


/* =====================================================
   PROJECT META
===================================================== */

.ubt-project-meta {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 18px;

    opacity: 0;

    transform:
        translateY(14px);

    transition:
        opacity 0.45s ease,
        transform 0.55s
        cubic-bezier(.16,1,.3,1);
}

.ubt-view-project {
    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.ubt-view-arrow {
    color: #f05423;

    font-size: 18px;

    transition:
        transform 0.35s ease;
}


/* =====================================================
   ORANGE ACCENT
===================================================== */

.ubt-project-accent {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background: #f05423;

    transition:
        width 0.65s
        cubic-bezier(.16,1,.3,1);
}


/* =====================================================
   PROJECT HOVER
===================================================== */

.ubt-project:hover
.ubt-project-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 10%,
            rgba(0,0,0,0.17) 45%,
            rgba(0,0,0,0.94) 100%
        );
}

.ubt-project:hover
.ubt-project-content {

    transform:
        translateY(0);
}

.ubt-project:hover
.ubt-project-meta {

    opacity: 1;

    transform:
        translateY(0);
}

.ubt-project:hover
.ubt-project-number {

    color: #f05423;

    transform:
        translateY(4px);
}

.ubt-project:hover
.ubt-project-open {

    opacity: 1;

    transform:
        scale(1)
        rotate(0);
}

.ubt-project:hover
.ubt-project-accent {

    width: 100%;
}

.ubt-project:hover
.ubt-view-arrow {

    transform:
        translate(
            5px,
            -4px
        );
}

.ubt-project-open:hover {

    background: #f05423;

    border-color: #f05423;
}


/* =====================================================
   LIGHTBOX
===================================================== */

.ubt-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

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

    background:
        rgba(
            8,
            8,
            8,
            0.985
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.ubt-lightbox.is-open {
    opacity: 1;

    visibility: visible;
}


/* =====================================================
   LIGHTBOX INNER
===================================================== */

.ubt-lightbox-inner {
    position: relative;

    width: min(
        82vw,
        1250px
    );

    height: min(
        83vh,
        850px
    );

    display: flex;

    flex-direction: column;

    opacity: 0;

    transform:
        translateY(20px)
        scale(.97);

    transition:
        opacity 0.5s ease,
        transform 0.6s
        cubic-bezier(.16,1,.3,1);
}

.ubt-lightbox.is-open
.ubt-lightbox-inner {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


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

.ubt-lightbox-image-wrap {
    flex: 1;

    min-height: 0;

    display: flex;

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

    overflow: hidden;
}

.ubt-lightbox-image {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    opacity: 1;

    transform:
        scale(1);

    transition:
        opacity 0.3s ease,
        transform 0.4s ease;
}

.ubt-lightbox-image.is-changing {
    opacity: 0;

    transform:
        scale(.985);
}


/* =====================================================
   LIGHTBOX INFO
===================================================== */

.ubt-lightbox-info {
    position: relative;

    padding-top: 22px;

    color: #ffffff;
}

.ubt-lightbox-category {
    display: block;

    margin-bottom: 7px;

    color: #f05423;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}

.ubt-lightbox-title {
    font-size: clamp(
        22px,
        3vw,
        35px
    );

    font-weight: 500;

    letter-spacing: -1px;
}

.ubt-lightbox-counter {
    position: absolute;

    right: 0;
    bottom: 3px;

    display: flex;

    gap: 5px;

    color: #888888;

    font-size: 11px;

    letter-spacing: 1px;
}

.ubt-lightbox-current {
    color: #ffffff;
}


/* =====================================================
   LIGHTBOX CLOSE
===================================================== */

.ubt-lightbox-close {
    position: absolute;

    top: 25px;
    right: 30px;

    z-index: 5;

    width: 52px;
    height: 52px;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 50%;

    background: transparent;

    color: #ffffff;

    font-size: 29px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.4s ease;
}

.ubt-lightbox-close:hover {
    background: #f05423;

    border-color: #f05423;

    transform:
        rotate(90deg);
}


/* =====================================================
   LIGHTBOX NAVIGATION
===================================================== */

.ubt-lightbox-nav {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 58px;
    height: 58px;

    display: flex;

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

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 50%;

    background: transparent;

    color: #ffffff;

    font-size: 20px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.35s ease;
}

.ubt-lightbox-prev {
    left: 30px;
}

.ubt-lightbox-next {
    right: 30px;
}

.ubt-lightbox-nav:hover {
    background: #f05423;

    border-color: #f05423;
}

.ubt-lightbox-prev:hover {
    transform:

        translate(
            -4px,
            -50%
        );
}

.ubt-lightbox-next:hover {
    transform:
        translate(
            4px,
            -50%
        );
}


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

@media (max-width: 991px) {

    .ubt-portfolio {
        padding: 80px 0;
    }

    .ubt-portfolio-head {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .ubt-portfolio-head h2 {
        letter-spacing: -2px;
    }

    .ubt-project,
    .ubt-project.project-large,
    .ubt-project.project-small,
    .ubt-project.project-full {

        grid-column: span 6;

        min-height: 470px;
    }

    .ubt-lightbox-nav {
        width: 46px;
        height: 46px;
    }

    .ubt-lightbox-prev {
        left: 10px;
    }

    .ubt-lightbox-next {
        right: 10px;
    }

}


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

@media (max-width: 700px) {

    .ubt-portfolio {
        padding: 65px 0;
    }

    .ubt-container {
        width: 90%;
    }

    .ubt-portfolio-head {
        margin-bottom: 35px;
    }

    .ubt-portfolio-head h2 {
        font-size: 38px;

        letter-spacing: -1.6px;
    }

    .ubt-portfolio-grid {
        display: block;
    }

    .ubt-project,
    .ubt-project.project-large,
    .ubt-project.project-small,
    .ubt-project.project-full {

        width: 100%;

        min-height: 420px;

        margin-bottom: 15px;
    }

    .ubt-project-content {
        left: 24px;
        right: 24px;
        bottom: 24px;

        transform: none;
    }

    .ubt-project-meta {
        opacity: 1;

        transform: none;
    }

    .ubt-project-open {
        opacity: 1;

        transform: none;
    }

    .ubt-lightbox-inner {
        width: 88%;

        height: 72vh;
    }

    .ubt-lightbox-close {
        top: 15px;
        right: 15px;

        width: 43px;
        height: 43px;

        font-size: 24px;
    }

    .ubt-lightbox-nav {
        top: auto;

        bottom: 22px;

        width: 45px;
        height: 45px;
    }

    .ubt-lightbox-prev {
        left: 20px;
    }

    .ubt-lightbox-next {
        right: 20px;
    }

    .ubt-lightbox-counter {
        position: static;

        margin-top: 9px;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

}
/* =====================================================
   TESTIMONIAL SLIDER
===================================================== */

.testimonial {
    overflow: hidden;
}

.testimonial-shell {
    position: relative;
}


/* HEADER */

.testimonial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 35px;
}

.testimonial-header .section-kicker {
    margin-bottom: 0;
}


/* SLIDER */

.testimonial-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    width: 100%;

    transform: translate3d(0, 0, 0);

    transition:
        transform 850ms cubic-bezier(.22, 1, .36, 1);

    will-change: transform;
}

.testimonial-slide {
    position: relative;

    flex: 0 0 100%;
    width: 100%;
    min-width: 0;

    padding-right: 2px;
}


/* QUOTE */

.testimonial-slide blockquote {
    margin: 0 0 35px;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 650ms ease,
        transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.testimonial-slide:not(.is-active) blockquote {
    opacity: 0.35;
    transform: translateY(12px);
}


/* PERSON */

.testimonial-slide .testimonial-person {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 650ms ease 100ms,
        transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.testimonial-slide:not(.is-active) .testimonial-person {
    opacity: 0.35;
    transform: translateY(10px);
}


/* =====================================================
   NAVIGATION ARROWS
===================================================== */

.testimonial-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-arrow {
    width: 44px;
    height: 44px;

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

    border: 1px solid rgba(21, 21, 21, 0.18);
    border-radius: 50%;

    background: transparent;
    color: #151515;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 300ms ease,
        border-color 300ms ease,
        color 300ms ease,
        transform 350ms ease;
}

.testimonial-arrow:hover {
    background: #f05423;
    border-color: #f05423;
    color: #ffffff;
}

.testimonial-prev:hover {
    transform: translateX(-3px);
}

.testimonial-next:hover {
    transform: translateX(3px);
}

.testimonial-arrow:focus-visible,
.testimonial-dot:focus-visible {
    outline: 2px solid #f05423;
    outline-offset: 4px;
}


/* =====================================================
   PAGINATION
===================================================== */

.testimonial-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    margin-top: 35px;
}

.testimonial-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: rgba(21, 21, 21, 0.25);

    cursor: pointer;

    transition:
        width 400ms cubic-bezier(.22, 1, .36, 1),
        background 350ms ease;
}

.testimonial-dot.is-active {
    width: 28px;
    background: #f05423;
}
.pt-100{
	padding-top: 100px;
}

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

@media (max-width: 767.98px) {

    .testimonial-header {
        margin-bottom: 25px;
    }

    .testimonial-navigation {
        gap: 7px;
    }

    .testimonial-arrow {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }

    .testimonial-slide blockquote {
        margin-bottom: 28px;
    }

    .testimonial-pagination {
        margin-top: 28px;
    }

}


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

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

    .testimonial-track,
    .testimonial-slide blockquote,
    .testimonial-slide .testimonial-person,
    .testimonial-dot {
        transition: none;
    }

}
.logo-slider {
    width: 100%;
    overflow: hidden;
}

.logo-slider-track {
    display: flex;
    align-items: center;
    gap: 60px;

    width: max-content;

    will-change: transform;
}

.logo-item {
    flex: 0 0 auto;

    width: 200px;
    height: 90px;

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

.logo-item img {
    display: block;

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

    object-fit: contain;
}
.ubt-footer-contact {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ubt-footer-contact p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: .75;
}
.ubt-footer-contact-button {
      display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease;
    border: 0px;
}
.ubt-footer-contact-button:hover,
.ubt-footer-contact-button:focus-visible {
  background: #fff;
  color: #151515;
  border-color: #fff;
	transform: translateY(-2px);	
}
.ubt-footer-contact-button span:last-child { font-size: 19px; margin-left: 15px; }
#ubtContactModal .modal-dialog { max-width: 540px; }
#ubtContactModal .modal-content {
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #151515;
  box-shadow: 0 26px 90px rgba(0,0,0,.2);
  overflow: hidden;
}
.ubt-contact-modal-body { padding: 38px; }
.ubt-contact-kicker {
  color: #f05423;
  font: 800 10px/1.4 Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ubt-contact-modal-body h2 {
  margin: 12px 34px 10px 0;
  font: 700 clamp(27px, 4vw, 38px)/1.15 Manrope, sans-serif;
  letter-spacing: -.04em;
}
.ubt-contact-modal-body .ubt-contact-intro {
  margin-bottom: 24px;
  color: #6e6e6e;
  font: 400 13px/1.7 Manrope, sans-serif;
}
#ubtContactModal .btn-close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2;
}
#ubtContactModal .form-label {
  display: block;
  color: #151515;
  font: 700 11px/1.4 Manrope, sans-serif;
  margin-bottom: 7px;
}
#ubtContactModal .form-control {
  min-height: 46px;
  border: 1px solid #ddd;
  border-radius: 25px;
  padding: 11px 13px;
  color: #151515;
  font: 500 13px/1.5 Manrope, sans-serif;
}
#ubtContactModal textarea.form-control { min-height: 110px; resize: vertical; }
#ubtContactModal .form-control:focus {
  border-color: #f05423;
  box-shadow: 0 0 0 .2rem rgba(240,84,35,.12);
}
.ubt-contact-send {
  width: 100%;
  border: 0;
  border-radius: 25px;
  background: #f05423;
  color: #fff;
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 12px/1.4 Manrope, sans-serif;
  transition: background .2s ease;
}
.ubt-contact-send:hover { background: #151515; }
.ubt-contact-note {
  margin: 0;
  font: 400 11px/1.5 Manrope, sans-serif;
  color: #777;
}
@media (max-width: 575.98px) {
  .ubt-contact-modal-body { padding: 29px 22px 24px; }
  #ubtContactModal .btn-close { right: 17px; top: 17px; }
}

.topinto{
  position:fixed;
  right:24px;
  bottom:24px;

  width:44px;
  height:44px;

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

  background:#151515;
  color:#fff;

  border-radius:12px;
  text-decoration:none;

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease;

  z-index:9999;
}

.topinto.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* =========================
   UB TECH LIVE CHAT
========================= */
.ub-chat-trigger{
  position:fixed;
  right:24px;
  bottom:24px;
	
  transition:
    bottom .3s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

/* scroll top visible */
.ub-chat-trigger.chat-up{
  bottom: 75px;
}


/* CHAT TRIGGER */

.ub-chat-trigger {
  position: fixed;
  right: 28px;
  

  width: 58px;
  height: 58px;

  border: 0;
  border-radius: 18px;

  background: #f05423;
  color: #fff;

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

  cursor: pointer;

  box-shadow:
    0 12px 35px rgba(240, 84, 35, 0.28);

  z-index: 10;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.ub-chat-trigger:hover {
  transform: translateY(-3px);

  box-shadow:
    0 18px 42px rgba(240, 84, 35, 0.34);
}


.ub-chat-dot {
  position: absolute;
  right: 5px;
  top: 5px;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #35c76f;
  border: 2px solid #fff;
}


/* CHAT PANEL */

.ub-chat-panel {
  position: fixed;

  right: 28px;
  bottom: 140px;

  width: 370px;
  height: 540px;

  background: #fff;

  border-radius: 24px;

  border: 1px solid rgba(0,0,0,.07);

  box-shadow:
    0 25px 80px rgba(0,0,0,.16);

  overflow: hidden;

  z-index: 9998;

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;

  transform: translateY(16px) scale(.97);

  transform-origin: bottom right;

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


.ub-chat-panel.active {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


/* HEADER */

.ub-chat-header {
  padding: 19px 20px;

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

  border-bottom: 1px solid #eee;

  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #fff8f5 100%
    );
}


.ub-chat-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}


.ub-chat-logo {
  width: 42px;
  height: 42px;

  border-radius: 13px;

  background: #f05423;

  color: #fff;

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

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

  letter-spacing: .4px;
}


.ub-chat-brand strong {
  display: block;

  color: #151515;

  font-size: 15px;
  font-weight: 700;
}


.ub-chat-brand span {
  margin-top: 4px;

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

  font-size: 11px;

  color: #777;
}


.ub-chat-brand span i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #35c76f;
}


.ub-chat-close {
  border: 0;
  background: transparent;

  color: #777;

  font-size: 26px;

  cursor: pointer;

  line-height: 1;
}


/* BODY */

.ub-chat-body {
  flex: 1;

  overflow-y: auto;

  padding: 22px 18px;

  background: #fcfcfc;
}


.ub-chat-date {
  text-align: center;

  font-size: 10px;

  color: #aaa;

  margin-bottom: 20px;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.ub-message {
  display: flex;

  gap: 8px;

  margin-bottom: 12px;
}


.ub-message.bot {
  align-items: flex-end;
}


.ub-message-avatar {
  width: 27px;
  height: 27px;

  border-radius: 9px;

  background: #f05423;

  color: #fff;

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

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

  flex-shrink: 0;
}


.ub-message-content {
  max-width: 75%;

  background: #fff;

  padding: 11px 14px;

  border-radius:
    14px
    14px
    14px
    4px;

  color: #333;

  font-size: 13px;

  line-height: 1.55;

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


.ub-message.user {
  justify-content: flex-end;
}


.ub-message.user .ub-message-content {
  background: #f05423;

  color: #fff;

  border-radius:
    14px
    14px
    4px
    14px;

  box-shadow:
    0 6px 20px rgba(240,84,35,.17);
}


/* QUICK OPTIONS */

.ub-chat-options {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin:
    10px
    0
    20px
    35px;
}


.ub-chat-options button {
  background: #fff;

  border:
    1px solid
    rgba(240,84,35,.22);

  border-radius: 50px;

  padding: 8px 11px;

  color: #444;

  font-size: 11px;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}


.ub-chat-options button:hover {
  background: #f05423;

  border-color: #f05423;

  color: #fff;
}


/* FOOTER */

.ub-chat-footer {
  background: #fff;

  padding:
    13px
    15px
    9px;

  border-top:
    1px solid #eee;
}


.ub-chat-input-wrap {
  display: flex;
  align-items: center;

  background: #f7f7f7;

  border-radius: 14px;

  padding:
    4px
    5px
    4px
    14px;

  border:
    1px solid transparent;

  transition: border-color .2s ease;
}


.ub-chat-input-wrap:focus-within {
  border-color:
    rgba(240,84,35,.32);
}


.ub-chat-input-wrap input {
  flex: 1;

  border: 0;
  outline: 0;

  background: transparent;

  height: 38px;

  color: #222;

  font-size: 12px;
}


.ub-chat-input-wrap input::placeholder {
  color: #aaa;
}


.ub-chat-input-wrap button {
  width: 36px;
  height: 36px;

  border: 0;

  border-radius: 11px;

  background: #f05423;

  color: #fff;

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

  cursor: pointer;
}


.ub-chat-powered {
  padding-top: 7px;

  text-align: center;

  color: #bbb;

  font-size: 9px;

  letter-spacing: .3px;
}


/* MOBILE */

@media (max-width: 500px) {

  .ub-chat-panel {
    right: 12px;
    left: 12px;

    bottom: 125px;

    width: auto;

    height:
      min(540px, calc(100vh - 115px));
  }

  .ub-chat-trigger {
    right: 18px;
    bottom: 18px;
  }

}
/* ---------------------------------------------------------
   Bootstrap integration
   --------------------------------------------------------- */
.container-fluid.section-shell {
  max-width: none;
}

.btn-ubt {
  --bs-btn-padding-y: .9rem;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 999px;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--orange);
  --bs-btn-hover-border-color: var(--orange);
}

.btn-ubt-light {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--orange);
  --bs-btn-hover-border-color: var(--orange);
}

/* Bootstrap responsive helpers are available throughout the project.
   Custom section layouts intentionally remain bespoke to preserve the
   Clay-inspired editorial rhythm instead of looking like a stock theme. */