/* ============================================================
   BioSky — About page
   Reuses tokens + components from styles.css
   ============================================================ */

/* ---------- hero (dark, night-earth) ---------- */
.ab-hero{
  position:relative; background:#05100F; color:var(--on-navy);
  padding:clamp(150px,18vh,210px) 0 clamp(64px,9vh,110px); overflow:hidden;
}
.ab-hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.55; z-index:0;
}
.ab-hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, #05100F 18%, rgba(5,16,15,.65) 55%, rgba(5,16,15,.25) 100%);
}
/* fallback starfield when no photo present */
.ab-hero__stars{
  position:absolute; inset:0; z-index:0; opacity:.9;
  background:
    radial-gradient(circle at 82% 38%, rgba(60,120,150,.5), transparent 42%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,220,150,.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 46%, rgba(255,220,150,.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 30%, rgba(255,230,170,.7), transparent 100%),
    radial-gradient(1px 1px at 64% 60%, rgba(255,220,150,.6), transparent 100%),
    radial-gradient(1px 1px at 92% 58%, rgba(255,220,150,.6), transparent 100%),
    radial-gradient(1px 1px at 74% 74%, rgba(255,210,140,.5), transparent 100%),
    #05100F;
}
.ab-hero__inner{ position:relative; z-index:2; max-width:46rem; }
.ab-hero__title{
  font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(2.6rem,6vw,4rem); color:#fff;
}
.ab-hero__sub{
  margin-top:1.6rem; font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:1.55;
  color:rgba(236,234,226,.78); max-width:42ch;
}

/* ---------- mission / vision ---------- */
.ab-mv{ padding:clamp(56px,8vh,110px) 0; }
.ab-mv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); }
.ab-mv__card{
  background:var(--navy); color:var(--on-navy); border-radius:6px;
  padding:clamp(34px,4vw,64px); min-height:clamp(280px,32vw,360px);
  display:flex; flex-direction:column;
}
.ab-mv__card h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2rem,3.4vw,2.8rem); color:#fff; margin-bottom:auto;
}
.ab-mv__card p{
  margin-top:2rem; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.5;
  color:rgba(236,234,226,.82); max-width:26ch;
}

/* ---------- our team ---------- */
.ab-team{ padding:clamp(56px,8vh,110px) 0; border-top:1px solid var(--hair); }
.ab-team__head h2{ color:var(--accent-deep); }
.ab-team__lede{ margin-top:1rem; max-width:54ch; color:var(--ink-body); font-size:1.12rem; line-height:1.55; }
.ab-team__grid{
  margin-top:clamp(36px,5vw,60px);
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(20px,2.4vw,34px) clamp(18px,2vw,30px);
}
.ab-member__photo{
  position:relative; aspect-ratio:1/1; border-radius:4px; overflow:hidden;
  background:linear-gradient(155deg,var(--navy),var(--navy-2)); display:grid; place-items:center;
}
.ab-member__ph{ font-family:var(--display); font-weight:700; font-size:2rem; color:rgba(47,230,189,.5); }
.ab-member__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.ab-member__name{ margin-top:1rem; font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--ink); }
.ab-member__role{
  margin-top:.35rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-deep); line-height:1.4;
}
.ab-member__li{ display:inline-flex; margin-top:.9rem; color:var(--ink); opacity:.7; transition:opacity .2s, color .2s; }
.ab-member__li:hover{ opacity:1; color:var(--accent-deep); }
.ab-member__li svg{ width:20px; height:20px; }

/* ---------- recognitions ---------- */
.ab-recog{ padding:clamp(56px,8vh,110px) 0; border-top:1px solid var(--hair); }
.ab-recog__head{ text-align:center; }
.ab-recog__head h2{ color:var(--accent-deep); }
.ab-recog__list{ margin:clamp(36px,5vw,56px) auto 0; max-width:60rem; display:flex; flex-direction:column; }
.ab-recog__item{ display:flex; gap:1.1em; align-items:flex-start; padding:1.05em 0; }
.ab-recog__item + .ab-recog__item{ border-top:1px solid var(--hair); }
.ab-recog__ico{ flex:none; width:30px; height:30px; color:var(--accent); margin-top:.05em; }
.ab-recog__ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.ab-recog__item p{ font-size:1.08rem; line-height:1.5; color:var(--ink-body); }
.ab-recog__item strong{ color:var(--ink); font-weight:600; }

/* ---------- logo strips (partners / tech / investors) ---------- */
.ab-logos{ padding:clamp(40px,6vh,80px) 0; }
.ab-logos__title{
  text-align:center; font-family:var(--display); font-weight:600; color:var(--accent-deep);
  font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.02em; margin-bottom:clamp(24px,3vw,40px);
}
.ab-logos__band{
  background:#fff; border-radius:6px; box-shadow:0 1px 0 rgba(23,27,34,.06);
  padding:clamp(28px,4vw,48px) clamp(24px,4vw,56px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(28px,4vw,60px) clamp(32px,5vw,72px);
}
.ab-logo{ position:relative; display:flex; align-items:center; justify-content:center;
  height:50px; min-width:84px; }
.ab-logo img{ max-height:50px; max-width:150px; object-fit:contain; }
.ab-logo__txt{ font-family:var(--display); font-weight:600; font-size:.92rem; color:#6a7574;
  text-align:center; line-height:1.25; }
.ab-logos__band--lg .ab-logo{ height:74px; }
.ab-logos__band--lg .ab-logo img{ max-height:74px; max-width:220px; }
.ab-logos__band--lg .ab-logo__txt{ font-size:1.25rem; }

/* ---------- responsive ---------- */
@media (max-width:1024px){ .ab-team__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:880px){
  .ab-mv__grid{ grid-template-columns:1fr; }
  .ab-team__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){ .ab-team__grid{ grid-template-columns:1fr 1fr; gap:18px; } }