/* ==========================================================
   CARDS
========================================================== */

.card {
  position: relative;

  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 22px 24px;

  margin-bottom: 16px;

  transition:
    transform 0.18s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;

  box-shadow: var(--shadow-card);
}
.card-decoration {
  position: absolute;

  top: 30%;

  right: 0px;

  transform: translateY(-50%);

  width: 200px;

  display: flex;

  justify-content: center;

  align-items: center;

  pointer-events: none;

  user-select: none;

  opacity: 0.05;
}

.card-decoration img {
  width: 100%;

  height: auto;

  display: block;
}

.card-decoration-network {
  position: absolute;

  top: 20%;

  right: -10px;

  width: 175px;

  pointer-events: none;

  user-select: none;

  opacity: 0.05;

  z-index: 0;
}

.card-decoration-network img {
  width: 100%;

  height: auto;

  display: block;
}
/*----------------------------------------------------------*/

.card:hover {
  transform: translateY(-2px);

  border-color: #c6dced;

  box-shadow: var(--shadow-hover);
}

/*----------------------------------------------------------
    Future decorative HUD
----------------------------------------------------------*/

.card::after {
  content: "";

  position: absolute;

  top: 18px;

  right: 18px;

  width: 170px;

  height: 170px;

  opacity: 0.045;

  pointer-events: none;

  background-image: url("../assets/circuit.svg");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: top right;
}
.card-header {
  display: flex;

  align-items: flex-start;

  gap: 22px;

  margin-bottom: 22px;
}
.card-icon {
  width: 58px;

  height: 58px;

  flex-shrink: 0;

  border-radius: 50%;

  background: linear-gradient(180deg, #174d7d, #0f3b67);

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow:
    0 10px 28px rgba(18, 72, 120, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.card-icon img {
  width: 35px;

  height: 35px;

  filter: brightness(0) invert(1);

  opacity: 0.95;
}

.card-accent {
  width: 56px;

  height: 3px;

  margin-top: 12px;

  border-radius: 10px;

  background: linear-gradient(90deg, #2b74af, transparent);
}

@media (max-width: 700px) {
  .card-header {
    gap: 16px;
  }

  .card-icon {
    width: 48px;
    height: 48px;
  }

  .card-icon img {
    width: 22px;
    height: 22px;
  }
}
/*----------------------------------------------------------*/

.card-title {
  margin: 0;

  font-size: 1.45rem;

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--text);
}

/*----------------------------------------------------------*/

.card-description {
  margin-top: 14px;

  max-width: 650px;

  color: var(--text-soft);

  line-height: 1.7;
}

/*----------------------------------------------------------*/

.card-footer {
  display: flex;

  justify-content: center;

  margin-top: 10px;
}

/*----------------------------------------------------------*/

.card + .card {
  margin-top: 22px;
}

/*----------------------------------------------------------
    Responsive
----------------------------------------------------------*/

@media (max-width: 700px) {
  .card {
    padding: 22px;

    border-radius: 16px;
  }

  .card-title {
    font-size: 1.28rem;
  }

  .card-description {
    margin-top: 12px;

    line-height: 1.65;
  }
}
@media (max-width: 900px) {
  .card-decoration {
    width: 170px;

    right: 20px;

    opacity: 0.08;
  }
}

@media (max-width: 700px) {
  .card-decoration {
    display: none;
  }
}
@media (max-width: 900px) {
  .card-decoration-network {
    width: 170px;

    right: 18px;

    opacity: 0.07;
  }
}

@media (max-width: 700px) {
  .card-decoration-network {
    display: none;
  }
}