/* ============================================================================
   MediByte — About page
   ========================================================================== */

/* ---- About hero ---- */
.ahero { position: relative; overflow: hidden; padding-top: clamp(130px, 17vh, 200px); padding-bottom: clamp(40px, 7vw, 90px); text-align: center; }
.ahero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ahero__bg .blob--1 { width: 620px; height: 620px; top: -200px; left: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(61,123,255,.4), transparent); }
.ahero__bg .blob--2 { width: 460px; height: 460px; bottom: -120px; right: -80px; background: radial-gradient(closest-side, rgba(54,211,232,.3), transparent); opacity:.5; }
.ahero__bg .grid-fade {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(11,12,16,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,12,16,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
  opacity:.6;
}
.ahero__inner { position: relative; z-index: 2; max-width: 920px; margin-inline: auto; }
.ahero h1 { margin: 1.1rem 0 0; }
.ahero .lead { margin: 1.5rem auto 0; max-width: 40em; }
.ahero__mascot { width: clamp(150px, 18vw, 220px); margin: clamp(28px,4vw,44px) auto 0; position: relative; z-index: 2; }
.ahero .kicker { justify-content: center; }
.ahero .kicker__rule { display: none; }

/* ---- Story (problem -> solution) ---- */
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(34px,5vw,52px); }
.story__card { position: relative; border-radius: var(--r-xl); padding: clamp(26px, 3vw, 40px); overflow: hidden; }
.story__card--old { background: var(--surface); box-shadow: var(--sh-sm), var(--ring-hair); }
.story__card--new { background: linear-gradient(160deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: var(--sh-lg); }
.story__tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.story__card--new .story__tag { color: rgba(255,255,255,.8); }
.story__card h3 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin-top: .8rem; }
.story__list { margin-top: 1.4rem; display: grid; gap: .85rem; }
.story__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .98rem; line-height: 1.45; color: var(--ink-2); }
.story__card--new .story__list li { color: rgba(255,255,255,.92); }
.story__list .mk { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; margin-top: 1px; }
.story__card--old .mk { background: rgba(10,11,14,.06); color: var(--ink-4); }
.story__card--new .mk { background: rgba(255,255,255,.16); color: #fff; }
.story__list svg { width: 13px; height: 13px; }
@media (max-width: 760px) { .story__grid { grid-template-columns: 1fr; } }

/* ---- Big manifesto statement ---- */
.manifesto { position: relative; overflow: hidden; text-align: center; background: var(--night); color: var(--night-ink); border-radius: clamp(28px,4vw,56px); margin-inline: clamp(8px,1.5vw,20px); padding-block: clamp(70px,10vw,140px); }
.manifesto .dark__beam { position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:70%; height:90%; background:conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(61,123,255,.22) 50%, transparent 60%); filter:blur(20px); }
.manifesto__q { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; font-size: clamp(2.2rem, 6vw, 4.6rem); max-width: 16em; margin-inline: auto; }
.manifesto__q .grad-blue { background: linear-gradient(96deg, #6aa0ff, var(--cyan)); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent; }
.manifesto__by { position: relative; z-index: 2; margin-top: 1.8rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--night-ink-2); }

/* ---- Values / beliefs ---- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.8vw,20px); margin-top: clamp(34px,5vw,52px); }
.value { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: clamp(22px,2.4vw,30px); box-shadow: var(--sh-sm), var(--ring-hair); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.value:hover { transform: translateY(-4px); box-shadow: var(--sh-lg), var(--ring-hair); }
.value__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff; margin-bottom: 18px; box-shadow: var(--sh-sm); }
.value__ico svg { width: 24px; height: 24px; }
.value h3 { font-size: 1.24rem; letter-spacing: -.025em; }
.value p { margin-top: .55rem; color: var(--ink-3); font-size: .96rem; line-height: 1.55; }
@media (max-width: 860px) { .values { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .values { grid-template-columns: 1fr; } }

/* ---- Meet mascot (about variant) ---- */
.who__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(30px,5vw,70px); }
.who__art { position: relative; display: grid; place-items: center; min-height: 380px; }
.who__art .mascot { width: clamp(220px, 28vw, 340px); }
.who__art .ring1, .who__art .ring2 { position:absolute; border-radius:50%; }
.who__art .ring1 { width: 92%; aspect-ratio:1; border:1.5px dashed var(--line); }
.who__art .ring2 { width: 70%; aspect-ratio:1; border:1.5px solid rgba(26,91,255,.18); }
.who__chip { font-family: var(--font-mono); font-size:.8rem; color: var(--blue-deep); background: var(--blue-tint); padding: 4px 10px; border-radius: 8px; display:inline-block; }
@media (max-width: 860px) { .who__grid { grid-template-columns: 1fr; } .who__art { min-height: 300px; } }

/* ---- Journey timeline ---- */
.journey { max-width: 760px; margin: clamp(34px,5vw,52px) auto 0; position: relative; }
.journey::before { content:""; position:absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue), var(--cyan)); opacity:.35; }
.milestone { position: relative; padding: 0 0 clamp(28px,3.5vw,44px) 58px; }
.milestone:last-child { padding-bottom: 0; }
.milestone__dot { position: absolute; left: 9px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 2px var(--blue); display:grid; place-items:center; }
.milestone__dot::after { content:""; width: 8px; height: 8px; border-radius:50%; background: var(--blue); }
.milestone--future .milestone__dot { box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 2px var(--cyan); }
.milestone--future .milestone__dot::after { background: var(--cyan); }
.milestone__when { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); }
.milestone h3 { font-size: 1.24rem; letter-spacing: -.025em; margin-top: .35rem; }
.milestone p { margin-top: .5rem; color: var(--ink-2); font-size: .98rem; line-height: 1.55; max-width: 42em; }

/* ---- Founders / team ---- */
.team__intro { max-width: 700px; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(34px, 5vw, 52px); }
.member {
  background: var(--surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md), var(--ring-hair);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.member:hover { transform: translateY(-6px); box-shadow: var(--sh-lg), var(--ring-hair); }
.member__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--blue-tint), var(--surface-2));
}
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.member__initials { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -.03em; color: var(--blue-deep); opacity: .42; }
.member__body { padding: clamp(20px, 2.2vw, 28px); }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 1.34rem; letter-spacing: -.025em; }
.member__role { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-tint); padding: 4px 10px; border-radius: 7px; }
.member__bio { margin-top: 15px; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.member__tags { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 7px; }
.member__tags span { font-size: .74rem; color: var(--ink-3); background: rgba(10,11,14,.045); box-shadow: var(--ring-hair); padding: 4px 10px; border-radius: var(--r-pill); }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }