.dev {
  position: relative;
  overflow: hidden;
  padding: 48px 0 84px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, #e4eeff, transparent 72%),
    linear-gradient(#f4f8ff, #fff);
  text-align: center;
}
.dev .sc {
  width: min(540px, 100%);
  margin: 0 auto 24px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(#e3eeff, #f7faff);
  box-shadow: 0 14px 34px rgba(18, 51, 143, 0.1);
}
.dev .sc svg {
  width: 100%;
  height: auto;
  display: block;
}
.gear,
.gear2,
.ship,
.wv1,
.wv2 {
  transform-box: fill-box;
  transform-origin: center;
}
.gear {
  animation: 14s linear infinite spin;
}
.gear2 {
  animation: 9s linear infinite reverse spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.ship {
  animation: 3.4s ease-in-out infinite bob;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg);
  }
  50% {
    transform: translateY(-7px) rotate(1.2deg);
  }
}
.wv1 {
  animation: 7s linear infinite wv;
}
.wv2 {
  animation: 4.6s linear infinite reverse wv;
}
@keyframes wv {
  to {
    transform: translateX(-130px);
  }
}
.dpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font:
    600 13px Poppins,
    sans-serif;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: 0 3px 0 var(--gold-d);
}
.dpill i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  animation: 1.6s ease-in-out infinite pls;
}
@keyframes pls {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(227, 162, 26, 0.6);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(227, 162, 26, 0);
  }
}
.dev h1 {
  font-size: clamp(30px, 5.4vw, 50px);
  margin: 18px 0 10px;
  color: var(--navy);
  line-height: 1.12;
}
.dev .lead {
  max-width: 580px;
  margin: 0 auto;
  color: var(--mut);
  font-size: 16px;
}
.dbar {
  width: min(420px, 86%);
  height: 10px;
  border-radius: 999px;
  background: #d6e4fa;
  margin: 26px auto 10px;
  overflow: hidden;
}
.dbar b {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: inherit;
  background: repeating-linear-gradient(
    115deg,
    var(--blue) 0 14px,
    #5b9bf0 14px 28px
  );
  background-size: 56px 100%;
  animation: 1.3s linear infinite strp;
}
@keyframes strp {
  to {
    background-position: 56px 0;
  }
}
.dwork {
  font-size: 13px;
  color: var(--mut);
  font-weight: 500;
}
.dwork i {
  display: inline-block;
  animation: 1.4s infinite both blk;
  font-style: normal;
}
.dwork i:nth-child(2) {
  animation-delay: 0.2s;
}
.dwork i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blk {
  0%,
  100%,
  80% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  max-width: 960px;
  margin: 34px auto 0;
  text-align: left;
}
.dgrid .card {
  padding: 18px 18px 20px;
  scroll-margin-top: 100px;
  animation: 0.6s both rise;
}
.dgrid .card:nth-child(2) {
  animation-delay: 0.08s;
}
.dgrid .card:nth-child(3) {
  animation-delay: 0.16s;
}
.dgrid .card:nth-child(4) {
  animation-delay: 0.24s;
}
.dgrid .card:nth-child(5) {
  animation-delay: 0.32s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.dgrid .card:target {
  outline: rgba(31, 111, 224, 0.35) solid 3px;
  outline-offset: 3px;
}
.dgrid h3 {
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--navy);
}
.dgrid p {
  font-size: 13.5px;
  color: var(--mut);
}
.dgrid .soon {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  background: var(--tint);
  border-radius: 999px;
  padding: 3px 10px;
}
.dact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
.dct {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--mut);
}
.dct a {
  color: var(--blue);
  font-weight: 600;
}