/* =========================================================
   V2X AI Services
   IA.Box Products / Structural UI v1
   ========================================================= */

.v2x-iabox-products {
  padding-top: 92px;
  padding-bottom: 92px;
  background:
    radial-gradient(
      circle at 93% 4%,
      rgba(65, 113, 255, 0.08),
      transparent 26%
    ),
    #ffffff;
}

.v2x-iabox-products .v2x-product-intro {
  max-width: 940px;
  margin-bottom: 38px;
}

.v2x-iabox-products .v2x-product-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  margin-bottom: 20px;

  border-radius: 999px;

  background: #edf4ff;
  color: #1556ad;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.v2x-iabox-products .v2x-product-heading {
  max-width: 900px;

  margin:
    0 0 18px;

  color: #13233a;

  font-size:
    clamp(38px, 4.2vw, 62px);

  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.v2x-iabox-products .v2x-product-lead {
  max-width: 920px;

  margin: 0;

  color: #58708f;

  font-size:
    clamp(17px, 1.4vw, 21px);

  line-height: 1.6;
}


/* Journey split */

.v2x-iabox-products .v2x-journey-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 3fr);

  gap: 22px;
}

.v2x-iabox-products .v2x-journey-group {
  padding: 18px;

  border:
    1px solid #dce7f5;

  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(245, 249, 255, .96),
      rgba(255, 255, 255, .96)
    );
}

.v2x-iabox-products .v2x-journey-group--consultive {
  border-color: #e5e1fa;

  background:
    linear-gradient(
      180deg,
      rgba(249, 247, 255, .98),
      rgba(255, 255, 255, .96)
    );
}


/* Group header */

.v2x-iabox-products .v2x-group-header {
  display: flex;
  align-items: center;
  gap: 14px;

  padding:
    2px 2px 18px;
}

.v2x-iabox-products .v2x-group-icon {
  flex: 0 0 48px;

  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 13px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #1264e8,
      #2d7cff
    );

  box-shadow:
    0 9px 24px
    rgba(18, 100, 232, .22);
}

.v2x-iabox-products
.v2x-journey-group--consultive
.v2x-group-icon {
  background:
    linear-gradient(
      135deg,
      #6956e7,
      #8170f3
    );

  box-shadow:
    0 9px 24px
    rgba(105, 86, 231, .20);
}

.v2x-iabox-products .v2x-group-icon svg {
  width: 25px;
  height: 25px;
}

.v2x-iabox-products .v2x-group-title {
  margin: 0 0 3px;

  color: #14243e;

  font-size: 20px;
  font-weight: 800;
}

.v2x-iabox-products .v2x-group-copy {
  margin: 0;

  color: #657a96;

  font-size: 14px;
  line-height: 1.4;
}


/* Card grids */

.v2x-iabox-products .v2x-entry-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.v2x-iabox-products .v2x-consultive-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}


/* Cards */

.v2x-iabox-products .v2x-product-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 360px;

  padding: 22px;

  border:
    1px solid #e3eaf4;

  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0 10px 28px
    rgba(21, 46, 89, .06);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.v2x-iabox-products .v2x-product-card:hover {
  transform:
    translateY(-4px);

  border-color: #cbdaf0;

  box-shadow:
    0 18px 36px
    rgba(21, 46, 89, .11);
}


/* Card visual icon */

.v2x-iabox-products .v2x-card-icon {
  display: grid;
  place-items: center;

  width: 50px;
  height: 50px;

  margin-bottom: 16px;

  border-radius: 14px;

  color: #2858a6;

  background: #edf4ff;
}

.v2x-iabox-products
.v2x-product-card--consultive
.v2x-card-icon {
  color: #6557d8;
  background: #f2efff;
}

.v2x-iabox-products .v2x-card-icon svg {
  width: 26px;
  height: 26px;
}


/* Badge */

.v2x-iabox-products .v2x-card-badge {
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 16px;

  padding: 7px 11px;

  border-radius: 999px;

  background: #edf4ff;
  color: #1260c9;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.v2x-iabox-products
.v2x-card-badge::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: currentColor;
}

.v2x-iabox-products
.v2x-product-card--consultive
.v2x-card-badge {
  background: #f2efff;
  color: #6758da;
}


/* Typography */

.v2x-iabox-products .v2x-card-title {
  margin:
    0 0 12px;

  color: #10213a;

  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.v2x-iabox-products .v2x-card-copy {
  margin:
    0 0 20px;

  color: #5d7390;

  font-size: 15px;
  line-height: 1.55;
}


/* CTA */

.v2x-iabox-products .v2x-card-footer {
  margin-top: auto;

  padding-top: 18px;

  border-top:
    1px solid #edf1f6;
}

.v2x-iabox-products .v2x-product-cta {
  display: flex;

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

  min-height: 48px;

  width: 100%;

  padding:
    11px 15px;

  border-radius: 10px;

  text-align: center;
  text-decoration: none;

  font-size: 14px;
  font-weight: 800;

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

.v2x-iabox-products .v2x-product-cta--kickstart {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #075fe3,
      #086fec
    );

  box-shadow:
    0 8px 20px
    rgba(7, 95, 227, .20);
}

.v2x-iabox-products
.v2x-product-cta--kickstart:hover {
  transform: translateY(-1px);

  box-shadow:
    0 12px 24px
    rgba(7, 95, 227, .28);
}

.v2x-iabox-products .v2x-product-cta--consultive {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #5547d9,
      #6855e7
    );

  box-shadow:
    0 8px 20px
    rgba(85, 71, 217, .18);
}

.v2x-iabox-products
.v2x-product-cta--consultive:hover {
  transform: translateY(-1px);

  box-shadow:
    0 12px 24px
    rgba(85, 71, 217, .25);
}


/* Capabilities */

.v2x-iabox-products .v2x-capabilities {
  margin-top: 28px;
  padding: 18px;

  border:
    1px solid #dfebf8;

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      #f8fbff,
      #f3f8ff
    );
}

.v2x-iabox-products .v2x-capabilities-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin:
    0 0 16px;

  color: #18365e;

  font-size: 16px;
  font-weight: 800;
}

.v2x-iabox-products .v2x-capabilities-title::before,
.v2x-iabox-products .v2x-capabilities-title::after {
  content: "";

  width: 90px;
  height: 1px;

  background:
    #aac7ee;
}

.v2x-iabox-products .v2x-capability-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 12px;
}

.v2x-iabox-products .v2x-capability {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 66px;

  padding:
    12px 14px;

  border:
    1px solid #e5edf7;

  border-radius: 15px;

  background: #ffffff;

  color: #25466d;

  text-align: center;

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

  box-shadow:
    0 6px 16px
    rgba(26, 55, 99, .04);
}


/* Responsive */

@media (max-width: 1100px) {

  .v2x-iabox-products .v2x-journey-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .v2x-iabox-products {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .v2x-iabox-products .v2x-entry-grid,
  .v2x-iabox-products .v2x-consultive-grid {
    grid-template-columns: 1fr;
  }

  .v2x-iabox-products .v2x-product-card {
    min-height: auto;
  }

  .v2x-iabox-products .v2x-capability-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {

  .v2x-iabox-products .v2x-capability-grid {
    grid-template-columns: 1fr;
  }

  .v2x-iabox-products
  .v2x-capabilities-title::before,
  .v2x-iabox-products
  .v2x-capabilities-title::after {
    width: 36px;
  }
}