:root {
  --mq-hero-max-block: 100vh;
}

.mq-hero {

  min-height: min(100vh, var(--mq-hero-max-block));
  display: flex;

  --mq-hero-bg-top: #f1f1f1;
  --mq-hero-bg-mid: #dee5f4;
  --mq-hero-bg-blue: #d6e0f5;

  --mq-hero-bg-bottom: #f5f8fd;

  --mq-hero-card: #ffffff;
  --mq-hero-ink: #131722;
  --mq-hero-deep: #1a3e64;
  --mq-hero-num: #204665;
  --mq-hero-accent: #3d62c4;

  --mq-hero-sub-gap: 1.1cqw;
  --mq-hero-icon-bg: #cfe0f7;

  --mq-hero-radius-outer: 16px;
  --mq-hero-radius-card: max(12px, 0.977cqw);

  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  container-type: inline-size;
  container-name: mq-hero;

  box-sizing: border-box;
  border-radius: var(--mq-hero-radius-outer);
  overflow: hidden;

  background-color: transparent;
  background-image: none;
}

.mq-hero *,
.mq-hero *::before,
.mq-hero *::after {
  box-sizing: border-box;
}

.mq-hero__inner {
  padding: 5.400cqw 5.176cqw 4.443cqw 5.420cqw;
}

.mq-hero__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  padding-top: 0;
  padding-bottom: 0;
}

.mq-hero__inner::before,
.mq-hero__inner::after {
  content: "";
  display: block;
  flex-shrink: 0;
  flex-basis: 0;
}

.mq-hero__inner::before {

  flex-grow: 300;

  min-height: min(126px, 15.4vh);

}

.mq-hero__inner::after {
  flex-grow: 440;
  min-height: 59px;
}

.mq-hero__intro {

  flex: 265 0 auto;

  margin-block-end: calc(-1 * var(--mq-hero-sub-gap));
}

.mq-hero__cards {
  flex: 0 0 auto;
}

.mq-hero__card {
  box-shadow: var(--v4-shadow-card);
}

@container (min-width: 900px) {
  .mq-hero__intro {

    max-height: calc(21.2cqw + 90px);
  }
}

.mq-hero__intro {
  display: grid;
  grid-template-columns: 76.03% 20.86%;
  column-gap: 3.11%;
  align-items: start;

  min-height: 0;
}

.mq-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin-block-start: 0;
}

.mq-hero__title {
  margin: 0;
  font-size: 5.664cqw;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;

  color: var(--mq-hero-ink);
}

.mq-hero__subtitle {

  margin: calc(1.126cqw + var(--mq-hero-sub-gap)) 0 0;
  font-size: 2.466cqw;
  line-height: 1.3;
  font-weight: 400;
  color: var(--mq-hero-deep);
}

.mq-hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6cqw;

  margin-block-start: 1.338cqw;
  height: 20.605cqw;
  padding: 1.6cqw;
  border-radius: var(--mq-hero-radius-card);
  border: 1px dashed rgba(26, 62, 100, 0.35);
  background-color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.mq-hero__media > img,
.mq-hero__media > video,
.mq-hero__media > picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.mq-hero__media-title {
  margin: 0;
  font-size: 1.270cqw;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mq-hero-deep);
}

.mq-hero__media-note {
  margin: 0;
  font-size: 1.100cqw;
  line-height: 1.45;
  color: var(--mq-hero-deep);
  opacity: 0.75;
}

.mq-hero__cards {
  margin-block-start: 1.904cqw;

  display: grid;
  grid-template-columns:
    8.793% 8.848% 0.928% 7.756% 7.974% 0.874% 7.428% 7.591% 0.874%
    7.646% 0.765% 7.756% 7.810% 0.710% 8.411% 7.701% 8.138%;

  grid-template-rows: 10.596cqw 10.840cqw;
  row-gap: 1.172cqw;
}

.mq-hero__cards {

  margin-inline: -6.544cqw -6.185cqw;
}

.mq-hero__card {
  justify-self: center;
}

.mq-hero__card--a { width: 15.768cqw; }
.mq-hero__card--b { width: 14.066cqw; }
.mq-hero__card--c { width: 13.426cqw; }
.mq-hero__card--d { width: 14.450cqw; }
.mq-hero__card--e { width: 14.157cqw; }
.mq-hero__card--f { width: 15.670cqw; }
.mq-hero__card--g { width: 14.405cqw; }
.mq-hero__card--h { width: 13.916cqw; }
.mq-hero__card--i { width: 14.405cqw; }

.mq-hero__card--a { grid-column: 1 / 3;   grid-row: 1; }
.mq-hero__card--b { grid-column: 4 / 6;   grid-row: 1; }
.mq-hero__card--c { grid-column: 7 / 9;   grid-row: 1; }
.mq-hero__card--d { grid-column: 10 / 13; grid-row: 1; }
.mq-hero__card--e { grid-column: 16 / 18; grid-row: 1; }
.mq-hero__card--f { grid-column: 2 / 5;   grid-row: 2; }
.mq-hero__card--g { grid-column: 8 / 11;  grid-row: 2; }
.mq-hero__card--h { grid-column: 12 / 14; grid-row: 2; }
.mq-hero__card--i { grid-column: 15 / 17; grid-row: 2; }

.mq-hero__card {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
  padding: 1.660cqw;
  border-radius: var(--mq-hero-radius-card);
  background-color: var(--mq-hero-card);
}

.mq-hero__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8cqw;
}

.mq-hero__label {
  margin: 0;
  font-size: 1.190cqw;
  line-height: 1.38;
  color: var(--mq-hero-deep);
}

.mq-hero__value {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.45cqw;

  font-size: 3.594cqw;

  line-height: 1;
  font-weight: 700;
  color: var(--mq-hero-num);
}

.mq-hero__unit {
  font-size: 1.900cqw;
  font-weight: 700;
}

.mq-hero__note {
  margin: 0;
  font-size: 1.190cqw;
  line-height: 1.38;
  color: var(--mq-hero-deep);
}

.mq-hero__card-head + .mq-hero__value { margin-block-start: 1.000cqw; }
.mq-hero__card-head + .mq-hero__note  { margin-block-start: 0.850cqw; }
.mq-hero__value + .mq-hero__note      { margin-block-start: 0.850cqw; }
.mq-hero__value + .mq-hero__label     { margin-block-start: 0.850cqw; }

.mq-hero__card--b,
.mq-hero__card--d {
  background-color: #e7eefb;
  background-image: none;
}

.mq-hero__card--a,
.mq-hero__card--e,
.mq-hero__card--i {

  background-color: #5b7cce;

  background-image: linear-gradient(135deg, #6d8fdb 0%, #4868c1 100%);
}

.mq-hero__card--a .mq-hero__value,
.mq-hero__card--a .mq-hero__label,
.mq-hero__card--a .mq-hero__note,
.mq-hero__card--a .mq-hero__unit,
.mq-hero__card--e .mq-hero__value,
.mq-hero__card--e .mq-hero__label,
.mq-hero__card--e .mq-hero__note,
.mq-hero__card--e .mq-hero__unit,
.mq-hero__card--i .mq-hero__value,
.mq-hero__card--i .mq-hero__label,
.mq-hero__card--i .mq-hero__note,
.mq-hero__card--i .mq-hero__unit {
  color: #ffffff;
}

.mq-hero__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.027cqw;
  height: 3.027cqw;
  border-radius: 50%;
  background-color: var(--mq-hero-icon-bg);
  color: var(--mq-hero-deep);
}

.mq-hero__icon svg,
.mq-hero__icon img {
  width: 60%;
  height: 60%;
  display: block;
  fill: currentColor;
}

.mq-hero__card--visual {
  padding: 0;
  overflow: hidden;

  background-color: transparent;
  background-image: none;
}

.mq-hero__visual {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: 0;
  border-radius: inherit;
}

.mq-hero__visual > img,
.mq-hero__visual > picture,
.mq-hero__visual > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.mq-hero__visual-media {
  pointer-events: none;
  background-color: transparent;
}

.mq-hero__visual-text {
  margin: 0;
  padding: 1.660cqw;
  font-size: 1.190cqw;
  line-height: 1.38;
  color: var(--mq-hero-deep);
}

.mq-hero__card--c,
.mq-hero__card--h {
  background-image: linear-gradient(
    135deg,
    #f8fafe 0%,
    #f1f5fd 22%,
    #e7eefb 52%,
    #dde7f9 100%
  );
}

.mq-page-bg {

  --mq-bg-start: 73px;

  --mq-bg-end: min(100vh, var(--mq-hero-max-block));

  --mq-bg-span: calc(var(--mq-bg-end) - var(--mq-bg-start));

  background-color: #f5f8fd;
  background-image: linear-gradient(
    180deg,
    #ffffff 0px,
    #ffffff var(--mq-bg-start),
    #fcfdfe calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.1667),
    #fafcfe calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.3333),
    #f8fafe calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.5),
    #f7f9fd calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.6667),
    #f6f8fd calc(var(--mq-bg-start) + var(--mq-bg-span) * 0.8333),
    #f5f8fd var(--mq-bg-end),
    #f5f8fd 100%
  );
}

@media (max-width: 1399px) {
  .mq-page-bg {
    --mq-bg-end: min(100vh, var(--mq-hero-max-block));
  }
}

@media (max-width: 932px) {
  .mq-page-bg {
    --mq-bg-start: 62px;
    --mq-bg-end: 640px;
  }
}

@container mq-hero (max-width: 900px) {
  .mq-hero__inner {

    padding: 90px 24px 32px;
  }

  .mq-hero__inner::before {
    min-height: 0;
  }

  .mq-hero__intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;

    min-height: 0;
  }

  .mq-hero__text {
    margin-block-start: 0;
  }

  .mq-hero__title {
    font-size: clamp(30px, 6.4cqw, 52px);
  }

  .mq-hero__subtitle {
    margin-block-start: 14px;

    font-size: clamp(var(--v4-fs-h3), 2.9cqw, 24px);
  }

  .mq-hero__media {
    height: auto;
    aspect-ratio: 16 / 10;
    padding: 20px;
  }

  .mq-hero__media-title { font-size: 13px; }
  .mq-hero__media-note  { font-size: 13px; }

  .mq-hero__cards {
    margin-block-start: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
  }

  .mq-hero__card--a,
  .mq-hero__card--b,
  .mq-hero__card--c,
  .mq-hero__card--d,
  .mq-hero__card--e,
  .mq-hero__card--f,
  .mq-hero__card--g,
  .mq-hero__card--h,
  .mq-hero__card--i {
    grid-column: auto;
    grid-row: auto;
  }

  .mq-hero__cards {
    margin-inline: 0;
  }

  .mq-hero__card {
    padding: 18px;
    min-height: 140px;
    border-radius: 14px;

    width: auto;
    justify-self: auto;
  }

  .mq-hero__card--visual { padding: 0; }
  .mq-hero__visual-text  { padding: 18px; font-size: 13px; }

  .mq-hero__label,
  .mq-hero__note  { font-size: var(--v4-fs-h3); }
  .mq-hero__value { font-size: 30px; }

  .mq-hero__unit  { font-size: var(--v4-fs-h3); }

  .mq-hero__icon  { width: 30px; height: 30px; }

  .mq-hero__card-head + .mq-hero__value { margin-block-start: 8px; }
  .mq-hero__value + .mq-hero__note,
  .mq-hero__value + .mq-hero__label     { margin-block-start: 6px; }
}

@container mq-hero (max-width: 560px) {
  .mq-hero__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mq-hero__intro {
  margin-inline: -5.420cqw -5.176cqw;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.mq-hero__shape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.mq-hero__shape > img {
  display: block;
  width: 480px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .mq-hero__intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .mq-hero__shape {
    justify-content: center;
  }

  .mq-hero__shape > img {
    width: min(480px, 100%);
  }
}

@media (max-width: 932px) {
  .mq-hero__intro {
    margin-inline: 0;
  }
}