/* ============================================================
   LEBI TECH — ABOUT PAGE STYLES (Template Match Update)
   ============================================================ */

/* About Intro grid */
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
}

.about-intro-image {
  position: relative;
}

.about-intro-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(13,37,98,.14);
}

/* Cyan border accent frame */
.about-intro-image::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  width: 55%;
  height: 55%;
  border: 3px solid var(--cyan);
  border-radius: var(--radius);
  z-index: -1;
}

/* Logo watermark badge */
.about-logo-watermark {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--white);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  box-shadow: 0 8px 28px rgba(13,37,98,.18);
  border: 1px solid var(--border);
}

.about-logo-watermark img { height: 40px; width: auto; }

/* Quick Stats */
.about-quick-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.about-stat {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.about-stat i { font-size: 1.5rem; color: var(--cyan); }

.about-stat strong {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}

.about-stat span {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* MVV Cards */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mvv-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 20px rgba(13,37,98,.07);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.mvv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(13,37,98,.12);
}

.mvv-card--accent {
  background: linear-gradient(145deg, var(--navy) 0%, #1a3a8a 100%);
  color: var(--white);
  border-color: transparent;
}

.mvv-card--accent h3 { color: var(--white); }
.mvv-card--accent p  { color: rgba(255,255,255,.78); }

.mvv-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius);
  background: rgba(0,180,216,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.mvv-card--accent .mvv-icon { background: rgba(0,180,216,.2); }

.mvv-icon i { font-size: 1.4rem; color: var(--cyan); }

.mvv-card h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: .65rem;
  font-weight: 700;
}

.mvv-card p { font-size: .86rem; color: var(--muted); line-height: 1.75; }

.values-list { display: flex; flex-direction: column; gap: .55rem; }

.values-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--muted);
}

.mvv-card--accent .values-list li { color: rgba(255,255,255,.8); }
.values-list i { color: var(--cyan); font-size: .8rem; }

/* Compliance */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.compliance-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: all var(--transition);
}

.compliance-card:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-4px);
}

.compliance-icon {
  width: 52px;
  height: 52px;
  background: rgba(0,180,216,.18);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
  border: 1px solid rgba(0,180,216,.3);
}

.compliance-icon i { font-size: 1.2rem; color: var(--cyan); }

.compliance-card h4 {
  font-family: 'Raleway', sans-serif;
  font-size: .9rem;
  color: var(--white);
  margin-bottom: .5rem;
  font-weight: 700;
}

.compliance-card p { font-size: .8rem; color: rgba(255,255,255,.64); line-height: 1.68; }

/* Team bio */
.team-bio { font-size: .8rem; color: var(--muted); margin-top: .6rem; line-height: 1.65; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .mvv-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .about-intro-grid { grid-template-columns: 1fr; }
  .about-intro-image::before { display: none; }
  .about-logo-watermark { right: 10px; bottom: 10px; }
  .about-intro-image img { height: 260px; }
  .compliance-grid { grid-template-columns: 1fr; }
  .about-quick-stats { gap: 1.25rem; }
}