.app-detail { position: relative; width: min(100%, 1536px); margin: 0 auto; padding-top: 77px; overflow: hidden; background: #fff; color: #213345; }
.app-detail > .figma-footer { position: relative; left: 0; width: 1920px; height: 712.5px; margin-bottom: -142.5px; transform: scale(.8); transform-origin: top left; }
.app-detail-hero { position: relative; height: 445.6px; overflow: hidden; }
.app-detail-hero__image { display: block; width: 100%; height: 100%; object-fit: fill; }
.app-detail-hero__panel { position: absolute; left: 94.4px; bottom: 0; width: 812.8px; height: 169.6px; overflow: hidden; color: #fff; }
.app-detail-hero__panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-detail-hero__panel > span { position: absolute; inset: 0; background: rgba(54,95,170,.5); }
.app-detail-hero__panel > div { position: absolute; top: 36px; left: 72.8px; right: 72px; }
.app-detail-hero__panel h1 { margin: 0; max-width: none; color: #fff; font-size: 28.8px; line-height: 1.2; letter-spacing: 0; }
.app-detail-hero__panel p { width: min(100%, 587.2px); margin: 11.2px 0 0; font-size: 16px; line-height: 1.25; }
.app-detail-content { position: relative; min-height: 1380px; padding-top: 56.8px; }
.app-detail-content h2 { margin: 0; text-align: center; font-size: 38.4px; line-height: 1.2; letter-spacing: 0; }
.app-detail-intro { width: min(75.57%, 1160.8px); margin: 21.6px auto 0; color: #586a7b; text-align: center; font-size: 19.2px; line-height: 1.18; }
.app-detail-grid { display: grid; grid-template-columns: repeat(2, 466.4px); gap: 35.2px 71.2px; width: 1004.8px; margin: 46.4px auto 0; }
.app-detail-card { position: relative; display: block; height: 218.4px; overflow: hidden; color: #fff; text-decoration: none; }
.app-detail-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.22,1,.36,1); }
.app-detail-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(102,102,102,0) 68%); }
.app-detail-card strong { position: absolute; top: 126.4px; left: 16px; right: 16px; text-align: center; font-size: 28.8px; line-height: 1.2; }
.app-detail-card b { position: absolute; right: 17.6px; bottom: 11.2px; font-size: 19.2px; line-height: 1; }
.app-detail-card i { font-style: normal; }
.app-detail-card:hover img, .app-detail-card:focus-visible img { transform: scale(1.025); }
.app-detail-card:focus-visible { outline: 3px solid #365faa; outline-offset: 3px; }
.app-detail-card--disabled { cursor: default; }
.app-detail-card--disabled:hover img { transform: none; }
.app-detail-divider { position: absolute; left: 50%; bottom: 23.2px; width: 684px; border-top: 1px solid #999; transform: translateX(-50%); }
.app-detail--fields .app-detail-content { min-height: 1030px; }
.app-detail--fields .app-detail-card:nth-child(5) { height: 220.8px; }
.app-detail--solutions .app-detail-content { min-height: 1110px; padding-top: 111.2px; }
.app-detail--solutions .app-detail-content h2 { display: none; }
.app-detail--solutions .app-detail-intro { margin-top: 0; }
.app-detail--solutions .app-detail-grid { margin-top: 52px; gap: 53.6px; }
.app-detail--solutions .app-detail-card { height: 221.6px; }
.app-detail--solutions .app-detail-card strong { top: 122.4px; }
@media (max-width: 1300px) {
  .app-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); width: calc(100% - 96px); gap: 36px; }
  .app-detail-card { height: auto; aspect-ratio: 583 / 273; }
  .app-detail-card strong { top: auto; bottom: 64px; font-size: clamp(23px,2.4vw,36px); }
}
@media (max-width: 760px) {
  .app-detail { padding-top: 77px; }
  .app-detail-hero { height: 460px; }
  .app-detail-hero__panel { left: 24px; width: calc(100% - 48px); height: 190px; }
  .app-detail-hero__panel > div { top: 32px; left: 28px; right: 28px; }
  .app-detail-hero__panel h1 { font-size: 30px; }
  .app-detail-hero__panel p { font-size: 16px; }
  .app-detail-content, .app-detail--solutions .app-detail-content { min-height: auto; padding: 58px 0 130px; }
  .app-detail--fields .app-detail-content { min-height: auto; }
  .app-detail-content h2 { font-size: 36px; }
  .app-detail-intro { width: calc(100% - 48px); font-size: 18px; line-height: 1.4; }
  .app-detail-grid, .app-detail--solutions .app-detail-grid { grid-template-columns: 1fr; width: calc(100% - 48px); margin-top: 45px; gap: 24px; }
  .app-detail--fields .app-detail-card:nth-child(5) { height: auto; }
  .app-detail-card strong { bottom: 52px; font-size: 24px; }
  .app-detail-card b { font-size: 17px; }
  .app-detail-divider { bottom: 48px; width: calc(100% - 96px); }
}