.font-bold {
  font-weight: 600 !important;
}

.inter-font {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-blue {
  color: #005BC4;
  font-weight: 700;
}

.text-md {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .sm\:text-md {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.font-extrabold {
    font-weight: 700 !important;
}

body {
  font-family: "Inter", sans-serif;
}

[x-cloak] {
  display: none !important;
}

.fa-solid.h-3,
.fa-regular.h-3,
.fa-brands.h-3 {
  font-size: 0.75rem;
}

.fa-solid.h-4,
.fa-regular.h-4,
.fa-brands.h-4 {
  font-size: 1rem;
}

.fa-solid.h-5,
.fa-regular.h-5,
.fa-brands.h-5 {
  font-size: 1.25rem;
}

.fa-solid.h-6,
.fa-regular.h-6,
.fa-brands.h-6 {
  font-size: 1.5rem;
}

.fa-solid.h-7,
.fa-regular.h-7,
.fa-brands.h-7 {
  font-size: 1.75rem;
}

.fa-solid.h-8,
.fa-regular.h-8,
.fa-brands.h-8 {
  font-size: 2rem;
}

.footer-social-link {
  background: transparent;
  border-color: #cbd5e1;
  color: #64748B;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.footer-social-facebook:hover,
.footer-social-facebook:focus-visible {
  background: #1877F2;
}

.footer-social-instagram:hover,
.footer-social-instagram:focus-visible {
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 45%, #8134AF 100%);
}

.footer-social-linkedin:hover,
.footer-social-linkedin:focus-visible {
  background: #0A66C2;
}

.footer-social-x:hover,
.footer-social-x:focus-visible {
  background: #111827;
}

/* High-end Hero Background */
.hero-section {
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 91, 196, 0.24), transparent 32%),
    linear-gradient(135deg, #020617 0%, #061126 48%, #08204A 100%);
  position: relative;
  background-size: 100% 100%;
}

/* .hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 40px 40px;
        opacity: 0.5;
        z-index: 1;
      } */

.underline-brush {
  position: relative;
  display: inline-block;
  z-index: 10;

}

.underline-brush::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  bottom: -5px;
  left: 0;
  background-image: url(../images/vector-yellow-line.png);
  background-repeat: no-repeat;

  transform: skewX(-15deg);
  z-index: -1;
}

/* Hide scrollbar for slider */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-card {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .product-card {
    flex-basis: calc((100% - 1.5rem) / 2);
    max-width: calc((100% - 1.5rem) / 2);
  }
}

@media (min-width: 991px) {
  .product-card {
    flex-basis: calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
  }
}

.product-card.is-active .product-details {
  grid-template-rows: 1fr;
}

.product-card.is-active .product-icon {
  color: #6CFF9A;
  box-shadow: 0 0 35px rgba(0, 91, 196, 0.55);
}

.product-card.is-active .product-icon svg {
  color: #005BC4;
}

.product-card.is-active .product-image-wrap {
  height: 305px;
}

.product-card.is-active .product-image-wrap img {
  transform: scale(1.05);
}

/* Vertical Marquee Animations */
.marquee-wrapper {
  height: 600px;
  overflow: hidden;
  position: relative;
}

/* Fading edges for marquee */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 10;
  pointer-events: none;
}

.marquee-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, #f8fafc, transparent);
}

.marquee-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, #f8fafc, transparent);
}

.marquee-track-up {
  animation: scrollUp 30s linear infinite;
}

.marquee-track-down {
  animation: scrollDown 30s linear infinite;
}

/* Pause on hover */
.marquee-wrapper:hover .marquee-track-up,
.marquee-wrapper:hover .marquee-track-down {
  animation-play-state: paused;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }

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

/* amination banner  */
.hero-section {

  isolation: isolate;
  background-color: #020617;
}

/* Curved grid */
.curve-grid {
  position: absolute;
  inset: -18%;
  z-index: 1;
  background-image:
    linear-gradient(rgba(67, 136, 253, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 136, 253, 0.12) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.08) 49% 51%, transparent 52% 100%);
  background-size: 50px 50px, 50px 50px, 140px 140px;
  transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.55);
  transform-origin: center center;
  animation: gridMove 28s linear infinite;
  opacity: 0.58;
  pointer-events: none;
}

.hero-orbit {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(67, 136, 253, 0.24);
  border-radius: 999px;
  box-shadow: inset 0 0 35px rgba(67, 136, 253, 0.08), 0 0 45px rgba(0, 91, 196, 0.12);
  pointer-events: none;
}

.hero-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  height: 10px;
  width: 10px;
  border-radius: 999px;
  background: #65A7FF;
  box-shadow: 0 0 22px rgba(101, 167, 255, 0.9);
}

.hero-orbit-one {
  height: 420px;
  width: 420px;
  left: 8%;
  top: 23%;
  animation: heroOrbitSpin 22s linear infinite;
}

.hero-orbit-two {
  height: 560px;
  width: 560px;
  right: -8%;
  top: 18%;
  animation: heroOrbitSpin 28s linear infinite reverse;
  opacity: 0.72;
}

.hero-node {
  position: absolute;
  z-index: 5;
  height: 12px;
  width: 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 8px rgba(67, 136, 253, 0.12), 0 0 28px rgba(67, 136, 253, 0.9);
  pointer-events: none;
}

.hero-node-one {
  left: 18%;
  top: 34%;
  animation: heroNodeFloat 6s ease-in-out infinite;
}

.hero-node-two {
  right: 19%;
  top: 58%;
  animation: heroNodeFloat 7s ease-in-out infinite 1.2s;
}

.hero-node-three {
  left: 63%;
  top: 28%;
  animation: heroNodeFloat 8s ease-in-out infinite 2s;
}

.hero-color-wash {
  position: absolute;
  inset: -15%;
  z-index: 3;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(67, 136, 253, 0.16) 42%, transparent 50% 100%),
    radial-gradient(ellipse at 30% 48%, rgba(0, 91, 196, 0.22), transparent 35%),
    radial-gradient(ellipse at 72% 48%, rgba(67, 136, 253, 0.18), transparent 38%);
  animation: heroColorShift 12s ease-in-out infinite alternate;
  filter: blur(2px);
  pointer-events: none;
}

.hero-scan-lines {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px);
  animation: heroScanMove 7s linear infinite;
  opacity: 0.34;
  pointer-events: none;
}

.hero-data-panel {
  position: absolute;
  z-index: 5;
  width: 150px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.hero-data-panel-left {
  left: 8%;
  top: 42%;
  animation: heroPanelFloat 7s ease-in-out infinite;
}

.hero-data-panel-right {
  right: 9%;
  top: 36%;
  animation: heroPanelFloat 7s ease-in-out infinite 1.8s;
}

.hero-data-panel span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(67, 136, 253, 0.34));
  animation: heroPanelBar 2.8s ease-in-out infinite;
}

.hero-data-panel span + span {
  margin-top: 10px;
}

.hero-data-panel span:nth-child(2) {
  width: 72%;
  animation-delay: 0.4s;
}

.hero-data-panel span:nth-child(3) {
  width: 48%;
  animation-delay: 0.8s;
}

/* Red center glow */
.red-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 38% 50%, rgba(255, 75, 50, 0.36), transparent 25%),
    radial-gradient(circle at 42% 56%, rgba(255, 75, 50, 0.22), transparent 38%);
  filter: blur(4px);
  animation: glowMove 7s ease-in-out infinite alternate;
}

/* Dark edge overlay */
.dark-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    radial-gradient(circle at center, transparent 16%, rgba(2, 6, 23, 0.58) 76%),
    linear-gradient(90deg, rgba(2, 6, 23, 0.78), transparent 38%, rgba(2, 6, 23, 0.82));
  pointer-events: none;
}

@keyframes heroGradientFlow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 45%;
  }
}

@keyframes gridMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 72px 72px;
  }
}

@keyframes heroColorShift {
  from {
    transform: translateX(-2%) scale(1);
    opacity: 0.82;
  }

  to {
    transform: translateX(2%) scale(1.04);
    opacity: 1;
  }
}

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

  to {
    transform: rotate(360deg);
  }
}

@keyframes heroNodeFloat {
  0%,
  100% {
    opacity: 0.45;
    transform: translate3d(0, 0, 0) scale(0.9);
  }

  50% {
    opacity: 1;
    transform: translate3d(18px, -22px, 0) scale(1.12);
  }
}

@keyframes heroScanMove {
  from {
    background-position: 0 -120px, 0 0;
  }

  to {
    background-position: 0 120px, 0 36px;
  }
}

@keyframes heroPanelFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-16px) rotate(2deg);
  }
}

@keyframes heroPanelBar {
  0%,
  100% {
    opacity: 0.46;
    transform: scaleX(0.72);
    transform-origin: left;
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes glowMove {
  from {
    transform: translateX(-30px) scale(1);
    opacity: 0.75;
  }
  to {
    transform: translateX(35px) scale(1.1);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .hero-data-panel {
    display: none;
  }

  .hero-orbit,
  .hero-node {
    opacity: 0.45;
    transform: scale(0.7);
  }

  .hero-section {
    animation-duration: 14s;
  }
}

.hero-mesh {
  position: absolute;
  inset: -30%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 22% 46%, rgba(67, 136, 253, 0.46), transparent 34%),
    radial-gradient(ellipse at 72% 34%, rgba(0, 91, 196, 0.34), transparent 36%),
    radial-gradient(ellipse at 48% 78%, rgba(56, 189, 248, 0.16), transparent 34%);
  animation: heroMeshMove 18s ease-in-out infinite alternate;
  filter: blur(28px);
  opacity: 0.82;
  pointer-events: none;
}

.hero-grid-plane {
  position: absolute;
  left: -22%;
  right: -22%;
  bottom: -24%;
  z-index: 2;
  height: 82%;
  background-image:
    linear-gradient(rgba(135, 190, 255, 0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135, 190, 255, 0.32) 1px, transparent 1px);
  background-size: 64px 64px;
  box-shadow: 0 -18px 90px rgba(0, 91, 196, 0.28);
  mask-image: linear-gradient(to top, #000 0 72%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
  opacity: 0.78;
  pointer-events: none;
  transform: perspective(820px) rotateX(60deg) scale(1.18);
  transform-origin: center top;
}

.hero-grid-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(67, 136, 253, 0.22), transparent 55%);
  animation: heroGridForward 8s linear infinite;
}

.hero-grid-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(67, 136, 253, 0.32), transparent 24%),
    linear-gradient(to bottom, transparent, rgba(2, 6, 23, 0.48));
  mix-blend-mode: screen;
  opacity: 0.6;
}

.hero-side-grid {
    position: absolute;
    top: -16%;
    bottom: -16%;
    z-index: 2;
    width: 108%;
    background-image: linear-gradient(rgba(135, 190, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(135, 190, 255, 0.26) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: 0 0, 0 0;
    mask-image: linear-gradient(to right, #000 0 68%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
    opacity: 0.68;
    pointer-events: none;
    filter: brightness(120%) contrast(110%) saturate(120%) blur(0px) hue-rotate(0deg);
    will-change: background-position, transform;
}

.hero-side-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(67, 136, 253, 0.16), transparent);
  animation: heroSideGridMove 12s linear infinite;
}

.hero-side-grid-left {
    left: 0%;
    animation: heroGridScroll 7s linear infinite, heroGridZoomEffect 16s ease-in-out infinite;
    transform-origin: left center;
}

.hero-side-grid-right {
  display: none;
  right: -8%;
  transform: perspective(820px) rotateY(-52deg) rotateX(5deg);
  transform-origin: left center;
}

.hero-light-beam {
  position: absolute;
  inset: -35% -55%;
  z-index: 3;
  width: auto;
  height: auto;
  background:
    linear-gradient(105deg, transparent 0 41%, rgba(255, 255, 255, 0.11) 48%, transparent 55% 100%),
    linear-gradient(105deg, transparent 0 58%, rgba(67, 136, 253, 0.13) 64%, transparent 70% 100%);
  animation: heroBeamSweep 13s ease-in-out infinite;
  pointer-events: none;
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at center, transparent 0 44%, rgba(2, 6, 23, 0.58) 86%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.38)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 9px);
  opacity: 0.82;
  pointer-events: none;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px),
    linear-gradient(rgba(67, 136, 253, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 136, 253, 0.08) 1px, transparent 1px);
  background-size: 28px 28px, 112px 112px, 112px 112px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0 34%, transparent 72%);
  animation: heroBlueprintDrift 26s linear infinite;
  opacity: 0.24;
  pointer-events: none;
}

.hero-visual {
  animation: heroVisualFloat 7s ease-in-out infinite;
}

.hero-visual-glow {
  position: absolute;
  inset: 12% 6% 6% 6%;
  border-radius: 32px;
  background: rgba(67, 136, 253, 0.26);
  filter: blur(42px);
}

.hero-dashboard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.hero-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.16) 48%, transparent 62% 100%);
  animation: heroDashboardShine 7s ease-in-out infinite;
}

.hero-dashboard-top {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px 18px;
}

.hero-dashboard-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
}

.hero-dashboard-body {
  position: relative;
  display: grid;
  grid-template-columns: 0.28fr 1fr;
  gap: 18px;
  padding: 20px;
}

.hero-dashboard-sidebar {
  display: grid;
  gap: 12px;
}

.hero-dashboard-sidebar span {
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.hero-dashboard-sidebar span:nth-child(2) {
  background: rgba(67, 136, 253, 0.34);
}

.hero-dashboard-main {
  display: grid;
  gap: 18px;
}

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

.hero-kpi-row div {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.11);
  padding: 16px;
}

.hero-kpi-row strong,
.hero-kpi-row span {
  display: block;
}

.hero-kpi-row strong {
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1;
}

.hero-kpi-row span {
  margin-top: 8px;
  color: rgba(219, 234, 254, 0.76);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-chart {
  display: flex;
  align-items: end;
  gap: 12px;
  height: 190px;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    rgba(255, 255, 255, 0.08);
  background-size: 100% 38px;
  padding: 18px;
}

.hero-chart span {
  flex: 1;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #8CB9FF, #005BC4);
  box-shadow: 0 0 22px rgba(67, 136, 253, 0.32);
  animation: heroBarPulse 3.8s ease-in-out infinite;
}

.hero-chart span:nth-child(2) {
  animation-delay: 0.25s;
}

.hero-chart span:nth-child(3) {
  animation-delay: 0.5s;
}

.hero-chart span:nth-child(4) {
  animation-delay: 0.75s;
}

.hero-chart span:nth-child(5) {
  animation-delay: 1s;
}

.hero-chart span:nth-child(6) {
  animation-delay: 1.25s;
}

.hero-workflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-workflow span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 10px 14px;
}

.hero-workflow i {
  height: 2px;
  flex: 1;
  background: linear-gradient(90deg, rgba(67, 136, 253, 0.2), rgba(255, 255, 255, 0.74));
}

.hero-mini-card {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  padding: 14px 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.hero-mini-card strong,
.hero-mini-card span {
  display: block;
}

.hero-mini-card strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.hero-mini-card span {
  margin-top: 3px;
  color: rgba(219, 234, 254, 0.75);
  font-size: 0.78rem;
}

.hero-mini-card-one {
  left: -16px;
  top: 18%;
  animation: heroMiniCardFloat 6s ease-in-out infinite;
}

.hero-mini-card-two {
  right: -10px;
  bottom: 18%;
  animation: heroMiniCardFloat 6s ease-in-out infinite 1.4s;
}

@keyframes heroMeshMove {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg);
    opacity: 0.72;
  }

  to {
    transform: translate3d(3%, 2%, 0) scale(1.08) rotate(8deg);
    opacity: 0.9;
  }
}

@keyframes heroGridSlide {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 30px 30px, 120px 120px, 120px 120px;
  }
}

@keyframes heroGridForward {
  from {
    transform: translateY(-12%);
    opacity: 0.35;
  }

  to {
    transform: translateY(12%);
    opacity: 0.65;
  }
}

@keyframes heroBlueprintDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 28px 28px, 112px 0, 0 112px;
  }
}

@keyframes heroSideGridMove {
  0% {
    transform: translateY(-18%);
    opacity: 0.44;
  }

  50% {
    opacity: 0.62;
  }

  100% {
    transform: translateY(18%);
    opacity: 0.44;
  }
}

@keyframes heroGridScroll {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 64px 64px, 64px 64px;
  }
}

@keyframes heroGridZoomEffect {
  0%,
  100% {
    transform: perspective(900px) rotateY(357deg) rotateX(0deg) scale(1) rotate(0deg);
  }

  50% {
    transform: perspective(900px) rotateY(357deg) rotateX(0deg) scale(1.025) rotate(0.2deg);
  }
}

@keyframes heroBeamSweep {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-18%) rotate(0deg);
  }

  35% {
    opacity: 0.78;
  }

  62% {
    opacity: 0;
    transform: translateX(18%) rotate(0deg);
  }
}

@keyframes heroVisualFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes heroDashboardShine {
  0%,
  100% {
    transform: translateX(-90%);
    opacity: 0;
  }

  45%,
  55% {
    opacity: 1;
  }

  70% {
    transform: translateX(90%);
    opacity: 0;
  }
}

@keyframes heroBarPulse {
  0%,
  100% {
    transform: scaleY(0.88);
    transform-origin: bottom;
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes heroMiniCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

@media (max-width: 1023px) {
  .hero-section {
    min-height: auto;
  }

  .hero-mini-card {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-dashboard-body {
    grid-template-columns: 1fr;
  }

  .hero-dashboard-sidebar {
    display: none;
  }

  .hero-kpi-row {
    grid-template-columns: 1fr;
  }

  .hero-chart {
    height: 150px;
  }
}

.service-hero-grid {
  position: absolute;
  inset: -20%;
  z-index: 2;
  background-image:
    linear-gradient(rgba(67, 136, 253, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 136, 253, 0.16) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(900px) rotateX(0deg) scale(1.35);
  transform-origin: center;
  animation: serviceGridMove 18s linear infinite;
}

.service-blue-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 70%, rgba(0, 91, 196, 0.5), transparent 28%),
    radial-gradient(circle at 70% 40%, rgba(67, 136, 253, 0.28), transparent 34%);
  filter: blur(8px);
  animation: serviceGlowMove 7s ease-in-out infinite alternate;
}

.service-dark-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(8, 20, 43, 0.05), rgba(5, 15, 35, 0.86) 72%),
    linear-gradient(180deg, rgba(3, 10, 24, 0.72), rgba(4, 13, 30, 0.92));
}

.floating-service-card {
  animation: floatServiceCard 5s ease-in-out infinite;
}

@keyframes serviceGridMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 84px 84px;
  }
}

@keyframes serviceGlowMove {
  from {
    transform: translateY(18px) scale(0.98);
    opacity: 0.75;
  }
  to {
    transform: translateY(-16px) scale(1.08);
    opacity: 1;
  }
}

@keyframes floatServiceCard {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
.customer-bg {
  min-height: 620px;
  background-color: #061126;
  background-image: url('../images/home-banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
  position: relative;
}

.customer-bg .service-hero-grid {
  animation: customerGridVertical 14s linear infinite;
}

@keyframes customerGridVertical {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 84px;
  }
}
.digital-marketing-bg {
  min-height: 620px;
  background-color: #061126;
  background-image: url('../images/software/digital-marketing-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 105% auto;
  isolation: isolate;
  position: relative;
  animation: digitalMarketingBgDrift 16s ease-in-out infinite alternate;
}

.digital-marketing-bg::before,
.digital-marketing-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.digital-marketing-bg::before {
  z-index: 1;
  background:
    radial-gradient(circle at 78% 22%, rgba(64, 198, 255, 0.5) 0 4px, transparent 8px),
    radial-gradient(circle at 88% 34%, rgba(102, 255, 218, 0.42) 0 5px, transparent 10px),
    radial-gradient(circle at 72% 57%, rgba(64, 198, 255, 0.45) 0 5px, transparent 11px),
    radial-gradient(circle at 56% 68%, rgba(102, 255, 218, 0.38) 0 4px, transparent 10px),
    radial-gradient(circle at 44% 61%, rgba(64, 198, 255, 0.32) 0 5px, transparent 12px);
  filter: blur(0.2px);
  opacity: 0.85;
  animation: digitalNodePulse 3.8s ease-in-out infinite alternate;
}

.digital-marketing-bg::after {
  z-index: 2;
  background:
    linear-gradient(115deg, transparent 18%, rgba(67, 136, 253, 0.16) 42%, transparent 68%),
    radial-gradient(circle at 78% 50%, rgba(0, 91, 196, 0.18), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.7;
  transform: translateX(-22%);
  animation: digitalNetworkSweep 7s ease-in-out infinite;
}

@keyframes digitalMarketingBgDrift {
  from {
    background-position: 48% 50%;
    background-size: 105% auto;
  }
  to {
    background-position: 54% 48%;
    background-size: 110% auto;
  }
}

@keyframes digitalNodePulse {
  from {
    opacity: 0.45;
    transform: scale(0.98);
  }
  to {
    opacity: 0.95;
    transform: scale(1.03);
  }
}

@keyframes digitalNetworkSweep {
  0% {
    opacity: 0;
    transform: translateX(-28%);
  }
  35% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translateX(28%);
  }
}

/* ─── Nav active state (scroll-spy) ─────────────────────────────────────────── */
.nav-link-active {
    color: #005BC4 !important;
}

.nav-link-active::after {
    transform: scaleX(1) !important;
}