.detail-site {
  background: white;
}

.detail-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #faf9f6, #edf1f3);
}

.detail-hero::after {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 62%;
  content: "";
  background: linear-gradient(145deg, #123f63, #06192a 62%);
}

.detail-hero__grid {
  position: absolute;
  inset: 0 38% 0 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgb(35 91 148 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(35 91 148 / 7%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 96%);
}

.detail-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 720px;
  grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr);
  align-items: center;
  gap: clamp(42px, 5vw, 76px);
  padding-block: 92px;
}

.detail-hero__copy {
  max-width: 680px;
}

.detail-hero h1 {
  max-width: 12em;
  margin: 0 0 30px;
  color: var(--navy-950);
  font-size: clamp(46px, 4.35vw, 62px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.34;
  text-wrap: balance;
  word-break: auto-phrase;
}

.detail-hero__copy > p:not(.section-label) {
  max-width: 44em;
  margin-bottom: 34px;
  color: #44586c;
  font-size: 16px;
  line-height: 1.9;
  text-wrap: pretty;
}

.detail-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #aebdca;
  font-size: 14px;
  font-weight: 700;
}

.detail-hero__visual {
  position: relative;
  min-width: 0;
  min-height: 440px;
}

.detail-media {
  width: min(100%, 560px);
  margin: 0 auto;
}

.detail-media .media-frame {
  aspect-ratio: 3 / 2;
  background: #06182a;
}

.detail-system-visual {
  position: absolute;
  inset: 0;
  width: min(100%, 500px);
  height: 410px;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgb(130 175 222 / 28%);
  background: linear-gradient(145deg, rgb(15 55 85 / 98%), rgb(3 20 35 / 100%));
  box-shadow:
    0 30px 64px rgb(0 0 0 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

.detail-system-visual::before {
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(255 255 255 / 8%);
  content: "";
  pointer-events: none;
}

.detail-system-visual__grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgb(114 169 228 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(114 169 228 / 8%) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 96%);
}

.detail-system-visual__core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 124px;
  height: 84px;
  place-items: center;
  border: 1px solid rgb(203 222 245 / 40%);
  border-radius: 2px;
  color: white;
  background: #184f7f;
  box-shadow: 0 18px 38px rgb(0 0 0 / 22%);
  transform: translate(-50%, -50%);
}

.detail-system-visual__core span {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.detail-system-visual__nodes::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 64px;
  left: 64px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold), #4b8df2, var(--gold));
}

.detail-system-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 126px;
  min-height: 84px;
  align-content: center;
  padding: 14px 16px;
  border: 1px solid rgb(126 177 233 / 35%);
  color: white;
  background: rgb(8 39 65 / 96%);
  box-shadow:
    0 14px 28px rgb(0 0 0 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  backdrop-filter: blur(6px);
}

.detail-system-node small {
  margin-bottom: 5px;
  color: #e6c986;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.detail-system-node strong {
  font-size: 14px;
  line-height: 1.45;
}

.detail-system-node--1 {
  top: 44px;
  left: 34px;
}

.detail-system-node--2 {
  right: 34px;
  bottom: 44px;
}

.detail-system-node--3 {
  bottom: 34px;
  left: 46px;
}

.detail-issues {
  padding-block: var(--tp-section-space);
  background: white;
}

.detail-issues__layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: start;
  gap: clamp(60px, 8vw, 110px);
}

.detail-issues h2,
.detail-heading h2,
.detail-faq h2,
.detail-principle h2,
.detail-cta h2 {
  max-width: 13em;
  margin: 0;
  color: var(--navy-950);
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.42;
  text-wrap: balance;
  word-break: auto-phrase;
}

.detail-issues ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}

.detail-issues li {
  position: relative;
  min-height: 86px;
  padding: 27px 62px 25px 68px;
  background: #f8fafc;
  font-size: 17px;
  font-weight: 650;
}

.detail-issues li::before {
  position: absolute;
  top: 31px;
  left: 26px;
  width: 20px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold), var(--blue-600));
}

.detail-section {
  padding-block: var(--tp-section-space);
  background: var(--off-white);
}

.detail-heading {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(60px, 8vw, 110px);
  align-items: end;
  margin-bottom: 58px;
}

.detail-heading .section-label {
  margin-bottom: 7px;
}

.detail-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.detail-card {
  position: relative;
  grid-column: span 4;
  min-height: 250px;
  padding: 32px 32px 50px;
  border: 1px solid #d8e1ea;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 20px 48px rgb(9 42 72 / 5%);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.detail-card:nth-child(-n + 2) {
  grid-column: span 6;
  min-height: 280px;
}

.detail-card:nth-child(7):last-child {
  grid-column: span 12;
  min-height: 190px;
}

a.detail-card:hover,
a.detail-card:focus-visible {
  border-color: #8eb7ee;
  box-shadow: 0 25px 55px rgb(9 42 72 / 11%);
  transform: translateY(-3px);
}

.detail-card > span {
  display: inline-block;
  margin-bottom: 35px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.detail-card h3 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.5;
}

.detail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.detail-card i {
  position: absolute;
  right: 28px;
  bottom: 22px;
  color: var(--blue-600);
  font-size: 19px;
  font-style: normal;
}

.detail-principle {
  color: white;
  background: linear-gradient(135deg, #123f63, #06192a 65%);
}

.detail-principle__layout {
  display: grid;
  min-height: 480px;
  grid-template-columns: 0.45fr 1.55fr;
  align-items: center;
  gap: clamp(60px, 8vw, 120px);
  padding-block: 90px;
}

.detail-principle__layout > p {
  align-self: start;
  margin-top: 18px;
  color: #95b8dc;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.detail-principle h2 {
  max-width: 780px;
  margin-bottom: 28px;
  color: white;
}

.detail-principle div > p {
  max-width: 750px;
  margin: 0;
  color: #c4d2df;
  font-size: 17px;
  line-height: 2;
}

.detail-process {
  padding-block: var(--tp-section-space);
  background: white;
}

.detail-process ol {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: #d6e0ea;
}

.detail-process li {
  position: relative;
  min-height: 185px;
  padding: 25px 20px;
  background: #f8fafc;
}

.detail-process li span {
  display: block;
  margin-bottom: 45px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 750;
}

.detail-process li strong {
  font-size: 15px;
  line-height: 1.6;
}

.detail-faq {
  padding-block: var(--tp-section-space);
  background: var(--off-white);
}

.detail-faq__layout {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(60px, 8vw, 110px);
}

.detail-faq .faq-list {
  background: white;
}

.detail-cta {
  color: white;
  background: linear-gradient(135deg, #1b5a91, #123f6d 58%, #071d32);
}

.detail-cta__layout {
  display: grid;
  min-height: 440px;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 90px;
  padding-block: 80px;
}

.detail-cta__layout > div > p:first-child {
  margin-bottom: 20px;
  color: #a8c9f1;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.detail-cta h2 {
  color: white;
}

.detail-cta__layout > div:last-child > p {
  margin-bottom: 25px;
  color: #c7d7e9;
  font-size: 15px;
}

@media (max-width: 1024px) {
  .detail-hero__layout {
    min-height: 620px;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: 45px;
  }

  .detail-hero h1 {
    font-size: clamp(44px, 5vw, 58px);
  }

  .detail-system-visual {
    height: 380px;
  }

  .detail-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-card,
  .detail-card:nth-child(-n + 2),
  .detail-card:nth-child(7):last-child {
    grid-column: auto;
  }

  .detail-process ol {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .detail-hero::after {
    inset: auto 0 0;
    height: 370px;
  }

  .detail-hero__grid {
    inset: 0;
  }

  .detail-hero__layout {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 58px;
    padding-block: 72px 55px;
  }

  .detail-hero__visual {
    min-height: 360px;
  }

  .detail-media {
    width: min(100%, 620px);
  }

  .detail-issues__layout,
  .detail-heading,
  .detail-faq__layout,
  .detail-principle__layout,
  .detail-cta__layout {
    grid-template-columns: 1fr;
  }

  .detail-heading {
    gap: 12px;
  }

  .detail-principle__layout,
  .detail-cta__layout {
    gap: 35px;
  }

  .detail-principle__layout > p {
    margin: 0;
  }
}

@media (max-width: 620px) {
  .detail-hero__layout {
    gap: 42px;
    padding-block: 55px 38px;
  }

  .detail-hero h1 {
    font-size: clamp(32px, 8.7vw, 36px);
    line-height: 1.4;
  }

  .detail-hero h1 br {
    display: none;
  }

  .detail-hero__copy > p:not(.section-label) {
    font-size: 15px;
  }

  .detail-hero__actions {
    display: grid;
    gap: 18px;
  }

  .detail-hero__actions .button {
    width: 100%;
  }

  .text-link {
    width: max-content;
  }

  .detail-hero__visual {
    min-height: 315px;
  }

  .detail-system-visual {
    width: 100%;
    height: 300px;
  }

  .detail-system-visual__core {
    width: 82px;
    height: 82px;
  }

  .detail-system-node {
    width: 108px;
    min-height: 72px;
    padding: 11px 13px;
  }

  .detail-system-node--1 {
    top: 28px;
    left: 20px;
  }

  .detail-system-node--2 {
    right: 20px;
    bottom: 28px;
  }

  .detail-system-node--3 {
    bottom: 20px;
    left: 26px;
  }

  .detail-system-node strong {
    font-size: 12px;
  }

  .detail-system-visual__nodes::before {
    right: 48px;
    left: 48px;
  }

  .detail-issues,
  .detail-section,
  .detail-process,
  .detail-faq {
    padding-block: 76px;
  }

  .detail-issues__layout {
    gap: 38px;
  }

  .detail-issues h2,
  .detail-heading h2,
  .detail-faq h2,
  .detail-principle h2,
  .detail-cta h2 {
    max-width: 15em;
    font-size: clamp(29px, 8.5vw, 32px);
    line-height: 1.42;
  }

  .detail-issues li {
    min-height: 76px;
    padding: 23px 22px 22px 55px;
    font-size: 15px;
  }

  .detail-issues li::before {
    top: 28px;
    left: 20px;
  }

  .detail-card-grid {
    grid-template-columns: 1fr;
  }

  .detail-card {
    min-height: 210px;
    padding: 27px 25px 45px;
  }

  .detail-card > span {
    margin-bottom: 24px;
  }

  .detail-principle__layout {
    min-height: 520px;
    padding-block: 74px;
  }

  .detail-principle div > p {
    font-size: 15px;
  }

  .detail-process ol {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-process li {
    min-height: 150px;
  }

  .detail-process li span {
    margin-bottom: 28px;
  }

  .detail-cta__layout {
    min-height: 520px;
    padding-block: 70px;
  }

  .detail-cta .button {
    width: 100%;
  }
}