.sec_services {
  position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #08182b, #0a1730 60%, #071427);
  &::before { position: absolute; z-index: -1; left: 0; bottom: -130px; width: 100%; height: 380px; background: url("../../assets/images/mesh-wave.svg") center / cover no-repeat; content: ""; opacity: .52; }
  .wrap { margin: 0 auto; padding: 55px 40px 115px; max-width: 1500px; }
  .heading { margin-bottom: 32px; text-align: center; .kicker { margin-bottom: 11px; } .ja { font-size: 37px; } }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .card { position: relative; overflow: hidden; min-height: 475px; display: flex; align-items: stretch; border: 1px solid #3a5984; border-radius: 14px; background: radial-gradient(circle at 90% 65%, #183b69, #0b1c34 55%, #0b1728 100%); box-shadow: 0 25px 60px #030c1e70; }
  .card::after { position: absolute; inset: 0; background: linear-gradient(90deg, #0b1a2df0 0, #0b1a2dd8 45%, transparent 85%); content: ""; pointer-events: none; }
  .card img { position: absolute; right: -145px; bottom: -20px; width: 75%; max-width: none; height: 380px; object-fit: cover; object-position: left center; border-radius: 12px; transform: perspective(900px) rotateY(-9deg) rotateZ(-3deg); filter: drop-shadow(0 25px 24px #010a20b3); }
  .app img { right: -160px; width: 79%; transform: perspective(900px) rotateY(-7deg) rotateZ(3deg); }
  .copy { position: relative; z-index: 1; padding: 38px 30px; width: 63%; display: flex; flex-direction: column; align-items: flex-start; }
  .number { margin-bottom: 45px; color: #83aaff; font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
  h3 { font-size: 31px; font-weight: 800; line-height: 1.4em; letter-spacing: -.03em; }
  .catch { margin-top: 13px; font-size: 15px; font-weight: 700; line-height: 1.75em; }
  .body { margin-top: 19px; color: #b9cce4; font-size: 13px; line-height: 1.85em; }
  .text-link { margin-top: auto; padding-top: 30px; }
  @media (max-width: 1200px) { .wrap { padding: 50px 28px 95px; } .card { min-height: 430px; } .card img { right: -125px; width: 82%; } .copy { width: 68%; } h3 { font-size: 27px; } }
  @media (max-width: 850px) { .cards { grid-template-columns: 1fr; } .card { min-height: 390px; } .card img { right: -95px; width: 65%; } .copy { width: 60%; } }
  @media (max-width: 600px) { .wrap { padding: 35px 18px 78px; } .heading .ja { font-size: 30px; } .card { min-height: 510px; } .card::after { background: linear-gradient(180deg, #0b1a2df0 0, #0b1a2de8 55%, #0b1a2d35 100%); } .card img, .app img { right: -40px; bottom: -30px; width: 105%; height: 260px; object-position: left center; transform: none; } .copy { padding: 26px 22px; width: 100%; } .number { margin-bottom: 20px; } h3 { font-size: 27px; } .catch { margin-top: 8px; font-size: 14px; } .body { margin-top: 10px; max-width: 360px; } .text-link { margin-top: 12px; padding-top: 0; } }
}