/* =======================================================
   Technology page – page-specific styles
   This file is scoped to .technology-page.
   ======================================================= */
.gtm-noscript { display: none; visibility: hidden; }

.technology-page .technology-hero {
  background-image: url('../images/hero-ai-technology.png');
}

.technology-page .tech-intro { max-width: 650px; margin: 0 0 42px; color: #aebcd0; font-size: 17px; line-height: 1.75; }
.technology-page .technology-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.technology-page .technology-capability-card { min-height: 280px; padding: 30px; border: 1px solid rgba(152, 185, 232, .22); border-radius: 18px; background: rgba(255, 255, 255, .045); }
.technology-page .technology-capability-card:nth-child(4),
.technology-page .technology-capability-card:nth-child(5) { grid-column: span 1; }
.technology-page .technology-capability-card h3 { margin: 14px 0 12px; color: #fff; font-size: 24px; }
.technology-page .technology-capability-card p { min-height: 78px; margin: 0; color: #b9c8dc; line-height: 1.7; }
.technology-page .capability-code { color: #83b8ff; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.technology-page .capability-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.technology-page .capability-tags span,
.technology-page .experience-tags span { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(131, 184, 255, .32); border-radius: 999px; color: #bdd9ff; font-size: 12px; line-height: 1.2; }
.technology-page .technology-flow-section {
  /* This is one continuous dark technology journey, not a light insert. */
  background: linear-gradient(180deg, #081730 0%, #050f24 100%);
}
.technology-page .technology-flow-section .section-title { color: #fff; }
.technology-page .technology-flow-section .section-desc,
.technology-page .experience-section .section-desc { max-width: 580px; color: #b9c8dc; }
.technology-page .technology-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.technology-page .technology-flow-card {
  position: relative;
  min-height: 188px;
  padding: 25px 20px;
  border: 1px solid rgba(152, 185, 232, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.technology-page .technology-flow-card:not(:last-child)::after { content: '\2192'; position: absolute; z-index: 1; top: 50%; right: -23px; width: 30px; transform: translateY(-50%); color: #3163c9; font-size: 23px; font-weight: 700; text-align: center; }
.technology-page .flow-number { display: block; margin-bottom: 18px; color: #83b8ff; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.technology-page .technology-flow-card h3 { margin: 0 0 10px; color: #fff; font-size: 19px; line-height: 1.28; }
.technology-page .technology-flow-card p { margin: 0; color: #b9c8dc; font-size: 14px; line-height: 1.65; }
.technology-page .technology-page-process { margin-top: 6px; }
.technology-page .experience-section { background: linear-gradient(180deg, #081730 0%, #030a1a 100%); }
.technology-page .experience-box { padding: clamp(28px, 4vw, 52px); border: 1px solid rgba(152, 185, 232, .22); border-radius: 18px; background: linear-gradient(135deg, rgba(16, 41, 83, .92) 0%, rgba(6, 20, 43, .96) 100%); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); }
.technology-page .experience-box h3 { margin: 0 0 15px; color: #fff; font-size: clamp(24px, 2.4vw, 32px); }
.technology-page .experience-box p { max-width: 800px; margin: 0; color: #b9c8dc; font-size: 17px; line-height: 1.75; }
.technology-page .experience-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.technology-page .experience-tags span { border-color: rgba(131, 184, 255, .32); color: #bdd9ff; background: rgba(102, 165, 255, .08); }

@media (min-width: 861px) {
  .technology-page .technology-capability-card:nth-child(4) { grid-column: 1 / span 1; }
  .technology-page .technology-capability-card:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 960px) {
  .technology-page .technology-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technology-page .technology-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .technology-page .technology-flow-card::after { display: none; }
}

@media (max-width: 620px) {
  .technology-page .technology-capability-grid,
  .technology-page .technology-flow { grid-template-columns: 1fr; }
  .technology-page .technology-capability-card,
  .technology-page .technology-capability-card:nth-child(4),
  .technology-page .technology-capability-card:nth-child(5) { grid-column: auto; min-height: 0; }
  .technology-page .technology-capability-card p { min-height: 0; }
  .technology-page .technology-flow-card { min-height: 0; }
}