/*
  Core Microsystems Inc.
  File: /css/about.css
  Version: v0.2
  Updated: 2026-01-18
  Notes:
  - About page styles only (hero, story+stats, values, credentials, mission)
*/

/* ===== Hero ===== */
.about-hero {
  background: var(--hero-bg);
  background: -webkit-gradient(linear, left top, right bottom, 
    from(var(--blue-900)), 
    to(var(--blue-500)));
  /* Keep the complex one above → Safari will use the last one it understands */
color: #ffffff;
}


/* ===== Story + Stats ===== */
.about-story{
  background: #fff;
}
.about-story-grid{
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: 3.2rem;
  align-items: start;
}
.about-h2{
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #0b1220;
}
.about-story-copy p{
  margin: 0 0 1rem;
}

/* Stats tiles */
.about-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-content: start;
}
.stat-card{
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  border: 1px solid rgba(2,6,23,.08);
}
.stat-num{
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: .35rem;
  letter-spacing: -0.02em;
}
.stat-label{
  font-weight: 700;
  color: rgba(2,6,23,.68);
}

/* color variants similar to screenshot */
.stat-blue{ background: rgba(47,164,198,.12); }
.stat-blue .stat-num{ color: var(--blue-800); }

.stat-blue-soft{ background: rgba(47,164,198,.08); }
.stat-blue-soft .stat-num{ color: var(--blue-900); }

.stat-gray{ background: rgba(148,163,184,.18); }
.stat-gray .stat-num{ color: #0b1220; }

/* ===== Center Head block ===== */
.about-center-head{
  text-align: center;
  margin-bottom: 3rem;
}
.about-center-head .section-title{
  margin-bottom: .8rem;
}

/* ===== Values ===== */
.values-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}
.value-card{
  background: #fff;
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  padding: 1.6rem 2.2rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.value-card:hover{
  transform: translateY(-3px);
  border-color: rgba(47,164,198,.55);
  box-shadow: var(--shadow);
}
.value-icon{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  background: rgba(47,164,198,.12);
  border: 1px solid rgba(47,164,198,.22);
}
.value-icon-img{
  width: 38px;
  height: auto;
  display: block;

  /* Brand blue tint for black PNG icons */
  filter:
    invert(39%)
    sepia(79%)
    saturate(420%)
    hue-rotate(165deg)
    brightness(92%)
    contrast(92%);
}
.value-card:hover .value-icon-img{
  filter:
    invert(32%)
    sepia(88%)
    saturate(520%)
    hue-rotate(170deg)
    brightness(88%)
    contrast(95%);
}
.value-card h3{
  margin: 0 0 .75rem;
  font-size: 1.2rem;
  font-weight: 900;
}
.value-card p{
  font-size: 0.90rem;
}

/* ===== Credentials ===== */
.about-cred{
  background: #fff;
}
.cred-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}
.cred-card{
  background: #f6f7f9;
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
}
.cred-card:hover{
  transform: translateY(-3px);
  border-color: rgba(47,164,198,.45);
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
}
.cred-card.is-featured{
  border-color: rgba(47,164,198,.55);
  box-shadow: 0 18px 44px rgba(47,164,198,.14);
  background: #f7fbff;
}
.cred-logo{
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.cred-logo img{
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
}
.cred-card h3{
  margin: 0 0 .45rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: #0b1220;
}
.cred-org{
  font-size: .86rem;
  margin-bottom: .9rem;
}
.cred-issued{
  margin-top: .9rem;
  font-size: .86rem;
}
.cred-link{
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 900;
  text-decoration: none;
  color: var(--blue-800);
}
.cred-link:hover{ color: var(--blue-500); }

/* ===== Mission ===== */
.mission{
  background: var(--bg-soft);
  /*color: rgba(255,255,255,.92);*/
  color: var(--ink);
  padding: 5.2rem 0;
}
.mission-inner{
  text-align: center;
  max-width: 880px;
}
.mission h2{
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 900;
  /*color: #fff;*/
  color: var(--ink);
}
.mission p{
  margin: 0 auto;
  font-size: 1.05rem;
  /*color: rgba(255,255,255,.86);*/
  color: var(--ink);
  line-height: 1.75;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .about-story-grid{
    grid-template-columns: 1fr;
  }
  .values-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cred-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .about-hero{
    padding: 4.8rem 0;
  }
  .values-grid{
    grid-template-columns: 1fr;
  }
  .cred-grid{
    grid-template-columns: 1fr;
  }
}