/* ============================================================
   about.css -- About Us page
   ============================================================ */

.services-section {
  padding: 64px 20px;
  background: #000;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px);
  background-size: 30px 30px;
}
.services-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.services-intro h2 { font-size: 32px; color: #fff; margin: 0 0 16px; font-weight: 700; }
.services-intro p { color: #a3adc2; font-size: 15.5px; line-height: 1.75; margin: 0 auto; max-width: 720px; }
.services-kicker { display: block; color: #8fb0ff; font-weight: 600; font-size: 14px; margin-bottom: 10px; }

.feature-row {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 46px 0;
}
.feature-row-reverse { flex-direction: row-reverse; }
.feature-row-media { flex: 1 1 42%; min-width: 0; }
.feature-row-media img {
  width: 100%; height: auto; border-radius: 14px; display: block;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.feature-row-text { flex: 1 1 58%; min-width: 0; }
.feature-row-text h3 { font-size: 24px; color: #fff; margin: 0 0 14px; font-weight: 700; }
.feature-row-text p { font-size: 15px; color: #a3adc2; line-height: 1.75; margin: 0 0 14px; }
.feature-row-text p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .feature-row, .feature-row-reverse { flex-direction: column; gap: 26px; padding: 28px 0; }
}

/* ---- Icon grids (verbatim master-icon-box widgets, styled site-wide
   via global.css -- this just handles the grid layout) ---- */
.about-icon-grid {
  display: grid;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
.about-icon-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .about-icon-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .about-icon-grid-3 { grid-template-columns: 1fr; } }

.services-final-cta { padding: 80px 20px; background: #000; text-align: center; }
.services-final-cta h2 { color: #fff; font-size: 30px; margin: 0 0 12px; font-weight: 700; }
.services-final-cta p { color: #9ca9c4; font-size: 16px; margin: 0 auto 30px; max-width: 680px; }
.services-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* ---- principle & culture cards: equal height, no frames, systematic ---- */
.about-card-grid { display: grid; gap: 22px; margin-top: 8px; align-items: stretch; }
.about-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .about-card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .about-card-grid-3 { grid-template-columns: 1fr; } }
.about-card {
  display: flex; flex-direction: column; height: 100%; padding: 30px 28px 32px; border-radius: 18px;
  background: linear-gradient(180deg, #0f1119 0%, #0a0b11 100%); border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-card:hover { border-color: rgba(160,150,255,0.28); transform: translateY(-4px); }
.about-card-icon {
  width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple), var(--brand-magenta));
  box-shadow: 0 10px 26px -10px rgba(123,63,228,0.8);
}
.about-card-icon i { color: #fff; font-size: 20px; }
.about-card h3 { color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.about-card p { color: #a3adc2; font-size: 15px; line-height: 1.7; margin: 0; }