/* Sunrise Glory Engineering — Our Capabilities enhancement, v5.0.0 */
.capabilities-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.capabilities-section:before {
  position: absolute;
  top: 90px;
  right: -220px;
  width: 510px;
  height: 510px;
  border: 1px solid rgba(0, 114, 188, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(0, 114, 188, .025), 0 0 0 104px rgba(0, 114, 188, .018);
  content: '';
  pointer-events: none;
}
.capabilities-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: end;
}
.capabilities-heading .section-title { max-width: 680px; }
.capabilities-heading .section-title span { color: var(--orange); }
.capabilities-heading .section-copy {
  max-width: 645px;
  margin: 0;
  border-left: 2px solid var(--orange);
  padding: 3px 0 4px 22px;
  color: var(--steel);
}
.capabilities-feature {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, .64fr);
  margin-top: 62px;
  overflow: hidden;
  background: var(--navy);
}
.capability-media {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: #0a2034;
}
.capability-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04);
  transition: transform 1.1s cubic-bezier(.23, 1, .32, 1), filter .6s var(--ease-out);
}
.capabilities-feature:hover .capability-media > img { transform: scale(1.035); filter: saturate(1) contrast(1.06); }
.capability-media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 19, 33, .78) 0%, rgba(6, 19, 33, .18) 46%, rgba(6, 19, 33, .05) 100%), linear-gradient(0deg, rgba(6, 19, 33, .55) 0%, transparent 48%);
}
.capability-scanline {
  position: absolute;
  top: -25%;
  left: 13%;
  width: 1px;
  height: 150%;
  background: linear-gradient(transparent 0%, rgba(125, 207, 255, 0) 18%, rgba(125, 207, 255, .88) 50%, rgba(125, 207, 255, 0) 82%, transparent 100%);
  opacity: .72;
  transform: rotate(24deg);
  animation: sg-capability-scan 7s cubic-bezier(.23, 1, .32, 1) infinite;
}
.capability-status {
  position: absolute;
  top: 26px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(6, 19, 33, .62);
  padding: 8px 10px;
  color: #d7edf9;
  font-family: 'Barlow Condensed','Noto Sans TC',sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  backdrop-filter: blur(7px);
}
.capability-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #72c6f1;
  box-shadow: 0 0 0 4px rgba(114, 198, 241, .14), 0 0 14px rgba(114, 198, 241, .85);
  animation: sg-capability-pulse 2.2s ease-in-out infinite;
}
.capability-image-caption {
  position: absolute;
  right: 28px;
  bottom: 25px;
  left: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, .35);
  padding-top: 14px;
  color: #fff;
}
.capability-image-caption span { color: #7dcfff; font-family: 'Barlow Condensed','Noto Sans TC',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.capability-image-caption strong { max-width: 180px; font-family: 'Barlow Condensed','Noto Sans TC',sans-serif; font-size: 15px; letter-spacing: .08em; text-align: right; }
.capability-intro-panel {
  position: relative;
  display: flex;
  min-height: 480px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 56px 48px;
  color: #fff;
}
.capability-intro-panel:after {
  position: absolute;
  right: -100px;
  bottom: -115px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(125, 207, 255, .30);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(125, 207, 255, .05), 0 0 0 70px rgba(125, 207, 255, .025);
  content: '';
}
.capability-intro-panel .tech-label { position: relative; z-index: 1; color: #7dcfff; }
.capability-intro-panel h3 {
  position: relative;
  z-index: 1;
  margin: 21px 0 0;
  font-family: 'Barlow Condensed','Noto Sans TC',sans-serif;
  font-size: clamp(38px, 3.7vw, 58px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
}
.capability-intro-panel > p:not(.tech-label) {
  position: relative;
  z-index: 1;
  margin: 23px 0 0;
  color: #c6d6df;
  font-size: 14px;
  line-height: 1.95;
}
.capability-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin-top: 31px;
  border-bottom: 1px solid #7dcfff;
  padding-bottom: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: color .16s var(--ease-out), gap .16s var(--ease-out);
}
.capability-link:hover { gap: 13px; color: #7dcfff; }
.capability-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.capability-card {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  padding: 27px 25px 30px;
  transition: background .24s var(--ease-out), color .24s var(--ease-out), transform .24s var(--ease-out);
}
.capability-card:last-child { border-right: 0; }
.capability-card:before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--orange);
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.capability-card:hover { background: var(--navy); color: #fff; }
.capability-card:hover:before { transform: scaleX(1); }
.capability-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.capability-card-no { color: var(--orange); font-family: 'Barlow Condensed','Noto Sans TC',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; }
.capability-card-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); color: var(--orange); font-size: 16px; transition: border-color .24s var(--ease-out), color .24s var(--ease-out), transform .24s var(--ease-out); }
.capability-card:hover .capability-card-icon { border-color: rgba(125, 207, 255, .55); color: #7dcfff; transform: translateY(-3px); }
.capability-card h3 { margin: 52px 0 0; color: inherit; font-size: 19px; font-weight: 900; letter-spacing: -.04em; line-height: 1.25; }
.capability-card p { margin: 13px 0 0; color: var(--steel); font-size: 13px; line-height: 1.85; transition: color .24s var(--ease-out); }
.capability-card:hover p { color: #bfced7; }
.capability-card-line { position: absolute; right: 25px; bottom: 25px; left: 25px; height: 1px; background: var(--line); transition: background .24s var(--ease-out); }
.capability-card:hover .capability-card-line { background: rgba(125, 207, 255, .4); }
.capability-card-assurance { grid-column: span 1; }
@keyframes sg-capability-scan {
  0%, 100% { transform: translateX(-145px) rotate(24deg); opacity: 0; }
  15% { opacity: .54; }
  52% { transform: translateX(440px) rotate(24deg); opacity: .12; }
  68% { opacity: .42; }
}
@keyframes sg-capability-pulse {
  0%, 100% { transform: scale(.78); opacity: .45; }
  50% { transform: scale(1.13); opacity: 1; }
}
@media (max-width:1100px) {
  .capabilities-heading { grid-template-columns: 1fr; gap: 27px; }
  .capabilities-heading .section-copy { max-width: 760px; }
  .capabilities-feature { grid-template-columns: 1.1fr .9fr; }
  .capability-intro-panel { padding: 42px 34px; }
  .capability-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-card:nth-child(2) { border-right: 0; }
  .capability-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width:720px) {
  .capabilities-feature { display: block; margin-top: 40px; }
  .capability-media { min-height: 330px; }
  .capability-media > img { object-position: 63% center; }
  .capability-status { top: 18px; left: 18px; }
  .capability-image-caption { right: 18px; bottom: 18px; left: 18px; }
  .capability-intro-panel { min-height: auto; padding: 38px 24px 42px; }
  .capability-intro-panel h3 { font-size: 43px; }
  .capability-cards { grid-template-columns: 1fr; }
  .capability-card { min-height: 245px; border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 20px 27px; }
  .capability-card:nth-child(2) { border-right: 0; }
  .capability-card h3 { margin-top: 34px; }
  .capability-card-line { right: 20px; bottom: 20px; left: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .capability-scanline, .capability-status-dot { animation: none; }
  .capability-media > img { transition: none; }
}