.uums-drone-wrap {
  position: relative;
  width: 900px;
  max-width: 95vw;
  line-height: 0;
  overflow: visible;
  cursor: pointer;
  margin: 0 auto;
}
@media(max-width:1024px){
  .uums-drone-wrap{
width: 600px;
  }
}
@media(max-width:640px){
  .uums-drone-wrap{
width: 300px;
  }
}


.uums-drone-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.uums-drone-overlay {
  position: absolute;
  inset: 0;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.15s ease-out, mask-image 0.1s ease-out, -webkit-mask-image 0.1s ease-out;
  -webkit-mask-image: radial-gradient(300px at 1131.5px 448.922px, black 0%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-image: radial-gradient(300px at 1131.5px 448.922px, black 0%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
}

.uums-demo-scope {
  --blue: #114f9f;
  --blue-dark: #0a3c7d;
  --blue-soft: rgba(17, 79, 159, 0.18);
  --text: #0b1b35;
  --muted: #5e6f8c;
  --panel: #ffffff;
  --shadow: 0 18px 50px rgba(17, 79, 159, 0.12);
  --radius: 28px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  padding: 20px 0;
}

.uums-demo-scope * {
  box-sizing: border-box;
}

.uums-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}
@media(max-width:767px){
  .uums-page {
  width: 100%;
  }
}
.uums-hero {
  text-align: center;
  margin-bottom: 28px;
}

.uums-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
}

.uums-hero p {
  margin: 0 auto;
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.uums-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 28px;
}
.uums-card{
  display:flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/* .uums-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 79, 159, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  padding: 24px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  isolation: isolate;
} */

/* .uums-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(17, 79, 159, 0.16);
  border-color: rgba(17, 79, 159, 0.22);
} */
/* 
.uums-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 240px;
  background: radial-gradient(circle at center, rgba(17, 79, 159, .14), transparent 65%);
  z-index: -1;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  opacity: .8;
} */

/* .uums-card:hover::before {
  opacity: 1;
  transform: translateY(0);
} */

.uums-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

.uums-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
}

.uums-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  max-width: 34ch;
}

.uums-stage {
  position: relative;
  display: grid;
  place-items: center;
}

.uums-badge-stage {
  perspective: 1000px;
}

.uums-badge {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 65px;
  display: grid;
  place-items: center;
  transition: transform .6s var(--ease);
}
@media(min-width:767px){
  .uums-badge{
    padding: 45px;
  }
}

.uums-badge:hover {
  transform: translateY(-4px) scale(1.02);
}

.uums-badge-core {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 10px 20px rgba(10, 60, 125, .22));
  transition: transform .5s var(--ease), filter .5s var(--ease);
  animation: uumsBadgeFloat 4.8s ease-in-out infinite;
}
@media(max-width:767px){
  .uums-badge-core {
    width: 120px;
  }
}
.uums-badge:hover .uums-badge-core {
  transform: scale(1.04);
  filter: drop-shadow(0 16px 28px rgba(10, 60, 125, .28));
}

.uums-badge-ring,
.uums-badge-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.uums-badge-ring {
  z-index: 2;
  transition: transform 1.8s linear;
  transform-origin: 50% 50%;
}

.uums-badge:hover .uums-badge-ring {
  transform: rotate(360deg);
}

.uums-badge-ring text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2.6px;
  fill: var(--blue-dark);
}

.uums-badge-arcs {
  z-index: 1;
  animation: uumsSoftSpin 15s linear infinite;
}

.uums-badge:hover .uums-badge-arcs {
  animation-duration: 6s;
}

.uums-badge-glow {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 79, 159, .20), rgba(17, 79, 159, 0) 68%);
  filter: blur(12px);
  z-index: 0;
  animation: uumsPulseGlow 3.2s ease-in-out infinite;
}

.uums-lift-wrap {
  position: relative;
  width: 320px;
  height: 330px;
  display: grid;
  place-items: center;
}

/* .uums-lift-wrap::before,
.uums-lift-wrap::after {
  content: "";
  position: absolute;
  inset: 12% 16%;
  border-radius: 28px;
  opacity: .65;
  pointer-events: none;
} */

.uums-lift-wrap::before {
  border: 1px solid rgba(17, 79, 159, .14);
  transform: scale(.96);
}

.uums-lift-wrap::after {
  background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, .85) 50%, transparent 82%);
  transform: translateX(-130%) skewX(-14deg);
  opacity: 0;
  transition: transform 1s var(--ease), opacity .35s var(--ease);
  mix-blend-mode: screen;
}

.uums-card:hover .uums-lift-wrap::after {
  transform: translateX(130%) skewX(-14deg);
  opacity: 1;
}

.uums-lift-shadow {
  position: absolute;
  bottom: 34px;
  width: 180px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 60, 125, .22), rgba(10, 60, 125, 0) 70%);
  filter: blur(10px);
  animation: uumsShadowPulse 4s ease-in-out infinite;
}

.uums-lift-icon,
.uums-lift-glow {
  position: absolute;
  width: 160px;
  height: auto;
  object-fit: contain;
}

.uums-lift-glow {
  filter: blur(8px) opacity(.38);
  animation: uumsCableGlow 2.2s ease-in-out infinite;
  transform-origin: center top;
}

.uums-lift-icon {
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(17, 79, 159, .18));
  transform-origin: center top;
  animation: uumsSwayLift 4.8s ease-in-out infinite;
  transition: transform .55s var(--ease), filter .55s var(--ease);
}

.uums-card:hover .uums-lift-icon {
  transform: translateY(-4px) rotate(-1.5deg) scale(1.03);
  filter: drop-shadow(0 16px 24px rgba(17, 79, 159, .22));
}

.uums-energy {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 6px;
  height: 230px;
  transform: translateX(-50%);
  border-radius: 999px;
  overflow: hidden;
  opacity: .75;
}

.uums-energy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 79, 159, 0) 0%, rgba(17, 79, 159, .8) 45%, rgba(17, 79, 159, 0) 100%);
  transform: translateY(-100%);
  animation: uumsEnergyFlow 1.8s linear infinite;
}

.uums-blocks-stage {
  position: relative;
  width: 340px;
  height: 330px;
  display: grid;
  place-items: center;
}

.uums-blocks-stage::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 79, 159, .16), rgba(17, 79, 159, 0) 70%);
  filter: blur(8px);
  animation: uumsPulseGlow 3.6s ease-in-out infinite;
}

.uums-blocks-main {
  width: 200px;
  z-index: 2;
  filter: drop-shadow(0 12px 18px rgba(17, 79, 159, .18));
  animation: uumsMainSettle 5s ease-in-out infinite;
  transition: transform .55s var(--ease);
}

.uums-blocks-stage:hover .uums-blocks-main {
  transform: scale(1.03);
}

.uums-blocks-cube {
  position: absolute;
  width: 90px;
  top: 18px;
  left: 78px;
  z-index: 3;
  filter: drop-shadow(0 10px 14px rgba(17, 79, 159, .22));
  animation: uumsCubeOrbit 4.8s cubic-bezier(.42, 0, .2, 1) infinite;
  transform-origin: center center;
}

.uums-blocks-stage:hover .uums-blocks-cube {
  animation-play-state: paused;
  transform: translate(-6px, -6px) scale(1.04);
}

.uums-build-line {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px dashed rgba(17, 79, 159, .28);
  z-index: 1;
  animation: uumsSoftSpin 18s linear infinite reverse;
}

.uums-build-line::before,
.uums-build-line::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(17, 79, 159, .45);
}

.uums-build-line::after {
  top: auto;
  bottom: 22px;
  opacity: .55;
  width: 7px;
  height: 7px;
}

.uums-note {
font-family: "Nunito Sans", Sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 26px;
    color: #0F407E;
    text-align:center;
}

.uums-foot {
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.uums-tsca-shell {
  --tsca-width: 100%;
  --tsca-max-width: 1100px;
  --tsca-rx: 0deg;
  --tsca-ry: 0deg;
  --tsca-tx: 0px;
  --tsca-ty: 0px;
  --tsca-rotor-speed: 0.2s;
  width: min(var(--tsca-max-width), var(--tsca-width));
  max-width: 100%;
  margin: 0 auto;
}

.uums-tsca-shell,
.uums-tsca-shell * {
  box-sizing: border-box;
}

.uums-tsca-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 1101;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.uums-tsca-scene-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(45px);
  opacity: .55;
  pointer-events: none;
}

.uums-tsca-glow-one {
  width: 30%;
  height: 18%;
  left: 9%;
  top: 18%;
  background: rgba(40, 117, 255, 0.24);
}

.uums-tsca-glow-two {
  width: 36%;
  height: 20%;
  right: 6%;
  bottom: 11%;
  background: rgba(115, 191, 255, 0.14);
}

.uums-tsca-drone-shadow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 48%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.52) 0, rgba(0, 0, 0, 0.32) 38%, rgba(0, 0, 0, 0.06) 75%, transparent 100%);
  filter: blur(18px);
  animation: uumsTscaShadowPulse 4.6s ease-in-out infinite;
  pointer-events: none;
}

.uums-tsca-drone-unit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: uumsTscaDroneFloat 4.8s ease-in-out infinite;
  transform: translate3d(var(--tsca-tx), var(--tsca-ty), 0) rotateX(var(--tsca-rx)) rotateY(var(--tsca-ry));
  transition: transform 140ms ease-out;
  will-change: transform;
}

.uums-tsca-drone-image {
  position: absolute;
  inset: 0;
  width: 85%;
  height: 100%!important;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.38)) drop-shadow(0 8px 22px rgba(35, 118, 255, 0.16));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.uums-tsca-rotor {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.uums-tsca-rotor-top {
  left: 44.85%;
  top: 28.88%;
  width: 10.8%;
  aspect-ratio: 1;
}

.uums-tsca-rotor-left {
  left: 22.05%;
  top: 36.68%;
  width: 11.2%;
  aspect-ratio: 1;
}

.uums-tsca-rotor-right {
  left: 62.28%;
  top: 39.5%;
  width: 10.8%;
  aspect-ratio: 1;
}

.uums-tsca-rotor-bottom {
  left: 36.22%;
  top: 52.2%;
  width: 11.2%;
  aspect-ratio: 1;
}
@media(max-width:767px){
.uums-tsca-rotor-left, .uums-tsca-rotor-bottom, .uums-tsca-rotor-right , .uums-tsca-rotor-top {
  display: none;;
}
}
.uums-tsca-rotor-disc,
.uums-tsca-rotor-disc::before,
.uums-tsca-rotor-disc::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.uums-tsca-rotor-disc {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0) 0 19%, rgba(255, 255, 255, 0.22) 19.2%, rgba(255, 255, 255, 0.03) 31%, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.02) 58%, transparent 72%), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.92) 0deg 9deg, rgba(255, 255, 255, 0.08) 9deg 83deg, rgba(255, 255, 255, 0.78) 83deg 92deg, rgba(255, 255, 255, 0.08) 92deg 176deg, rgba(255, 255, 255, 0.92) 176deg 185deg, rgba(255, 255, 255, 0.08) 185deg 269deg, rgba(255, 255, 255, 0.78) 269deg 278deg, rgba(255, 255, 255, 0.08) 278deg 360deg);
  filter: blur(1px) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
  opacity: .64;
  animation: uumsTscaRotorSpin var(--tsca-rotor-speed) linear infinite;
  mix-blend-mode: screen;
}

.uums-tsca-rotor-disc::before {
  content: "";
  inset: 18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 8%, rgba(255, 255, 255, 0.09) 9% 56%, transparent 58%), repeating-conic-gradient(from 45deg, rgba(122, 183, 255, 0.42) 0deg 7deg, transparent 7deg 90deg);
  filter: blur(3px);
  opacity: .6;
  animation: uumsTscaRotorSpinReverse calc(var(--tsca-rotor-speed) * 1.5) linear infinite;
}

.uums-tsca-rotor-disc::after {
  content: "";
  inset: 34%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%);
  filter: blur(6px);
  opacity: .48;
}

.uums-tsca-rotor-hub {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(125, 164, 255, 0.4) 32%, rgba(10, 13, 24, 0.05) 75%, transparent 100%);
  box-shadow: 0 0 20px rgba(122, 183, 255, 0.32);
}

@keyframes uumsBadgeFloat {

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

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

@keyframes uumsSoftSpin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes uumsPulseGlow {

  0%,
  100% {
    transform: scale(.96);
    opacity: .7
  }

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

@keyframes uumsSwayLift {

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

  20% {
    transform: rotate(-1.4deg) translateY(-3px)
  }

  50% {
    transform: rotate(1.4deg) translateY(-8px)
  }

  80% {
    transform: rotate(-.8deg) translateY(-3px)
  }
}

@keyframes uumsCableGlow {

  0%,
  100% {
    opacity: .2;
    transform: translateY(0)
  }

  50% {
    opacity: .45;
    transform: translateY(-4px)
  }
}

@keyframes uumsEnergyFlow {
  0% {
    transform: translateY(-100%)
  }

  100% {
    transform: translateY(120%)
  }
}

@keyframes uumsShadowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .35
  }

  50% {
    transform: scale(.9);
    opacity: .24
  }
}

@keyframes uumsMainSettle {

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

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

@keyframes uumsCubeOrbit {
  0% {
    transform: translate(0, -6px) rotate(0deg) scale(1)
  }

  22% {
    transform: translate(32px, -28px) rotate(8deg) scale(1.03)
  }

  50% {
    transform: translate(66px, 12px) rotate(-8deg) scale(.98)
  }

  72% {
    transform: translate(30px, 44px) rotate(6deg) scale(1.01)
  }

  100% {
    transform: translate(0, -6px) rotate(0deg) scale(1)
  }
}

@keyframes uumsTscaRotorSpin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes uumsTscaRotorSpinReverse {
  from {
    transform: rotate(360deg)
  }

  to {
    transform: rotate(0deg)
  }
}

@keyframes uumsTscaDroneFloat {
  0% {
    transform: translate3d(var(--tsca-tx), calc(var(--tsca-ty) + 0px), 0) rotateX(calc(var(--tsca-rx) + 0deg)) rotateY(calc(var(--tsca-ry) + 0deg)) rotateZ(-1deg)
  }

  50% {
    transform: translate3d(var(--tsca-tx), calc(var(--tsca-ty) - 14px), 0) rotateX(calc(var(--tsca-rx) + 1deg)) rotateY(calc(var(--tsca-ry) + 1deg)) rotateZ(1deg)
  }

  100% {
    transform: translate3d(var(--tsca-tx), calc(var(--tsca-ty) + 0px), 0) rotateX(calc(var(--tsca-rx) + 0deg)) rotateY(calc(var(--tsca-ry) + 0deg)) rotateZ(-1deg)
  }
}

@keyframes uumsTscaShadowPulse {

  0%,
  100% {
    opacity: .34;
    transform: translateX(-50%) scale(1)
  }

  50% {
    opacity: .18;
    transform: translateX(-50%) scale(.92)
  }
}
@media (max-width: 1024px) {
  .uums-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .uums-grid {
    grid-template-columns: 1fr;
  }
}


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

  .uums-demo-scope *,
  .uums-demo-scope *::before,
  .uums-demo-scope *::after,
  .uums-tsca-shell *,
  .uums-tsca-shell *::before,
  .uums-tsca-shell *::after {
    animation: none !important;
    transition: none !important;
  }
}