/* ============================================================
   Braindoos — About Us page styles
   ============================================================ */

/* ---------- ABOUT HERO ---------- */
.abhero { position: relative; background: var(--navy-900); color: #fff; padding: calc(var(--nav-h) + 80px) 0 88px; overflow: hidden; }
.abhero__bg { position: absolute; inset: 0; background:
  radial-gradient(800px 500px at 82% 12%, rgba(34,211,238,.15), transparent 60%),
  radial-gradient(720px 540px at 8% 100%, rgba(59,91,196,.28), transparent 62%),
  linear-gradient(180deg, var(--navy-900), var(--navy-800) 78%); }
.abhero__grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(120% 90% at 60% 0%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 90% at 60% 0%, #000 30%, transparent 80%); }
.abhero .wrap { position: relative; z-index: 2; }
.abhero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.abhero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 100px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.abhero h1 { color: #fff; font-size: 56px; letter-spacing: -0.03em; margin-top: 24px; }
.abhero h1 .grad { background: linear-gradient(100deg, #6FE9FB, var(--accent) 50%, #7C8FF0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abhero__sub { margin-top: 24px; font-size: 19.5px; line-height: 1.62; color: rgba(225,233,250,.78); max-width: 540px; }
.abhero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* hero side panel — mission card */
.abhero__panel { position: relative; border-radius: var(--r-xl); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); padding: 34px; box-shadow: var(--shadow-lg); }
.abhero__panel .label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.abhero__panel .quote { margin-top: 16px; font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1.34; letter-spacing: -0.01em; color: #fff; }
.abhero__panel .by { margin-top: 22px; display: flex; align-items: center; gap: 13px; }
.abhero__panel .by .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg, var(--primary-400), var(--accent-600)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 15px; }
.abhero__panel .by .who { font-weight: 700; font-size: 14.5px; color: #fff; }
.abhero__panel .by .who span { display: block; font-weight: 500; font-size: 12.5px; color: rgba(225,233,250,.6); }

/* ---------- STATS STRIP ---------- */
.abstats { background: var(--bg); border-bottom: 1px solid var(--line); }
.abstats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.abstat { padding: 44px 0; position: relative; text-align: center; }
.abstat + .abstat::before { content:""; position: absolute; left: 0; top: 38px; bottom: 38px; width: 1px; background: var(--line); }
.abstat .n { font-family: var(--font-display); font-weight: 600; font-size: 46px; letter-spacing: -0.03em; color: var(--primary); line-height: 1; }
.abstat .n .suffix { color: var(--accent-600); }
.abstat .l { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--muted); }

/* ---------- MISSION / APPROACH ---------- */
.mission { background: var(--bg); }
.mission__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mission__copy .lead { margin-top: 20px; font-size: 19px; color: var(--ink-700); line-height: 1.65; }
.mission__copy .body { margin-top: 16px; font-size: 16.5px; color: var(--muted); line-height: 1.7; }
.mission__points { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.mission__point { display: flex; gap: 13px; align-items: flex-start; }
.mission__point .ck { width: 26px; height: 26px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; }
.mission__point .ck svg { width: 15px; height: 15px; color: var(--accent-600); }
.mission__point strong { font-weight: 700; color: var(--ink); }
.mission__point p { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.mission__visual { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 460px; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.mission__visual .ph-label { position: absolute; left: 18px; bottom: 16px; font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.7); background: rgba(6,15,43,.5); padding: 6px 12px; border-radius: 8px; }

/* ---------- VALUES ---------- */
.values { background: var(--panel); }
.values__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vcard { padding: 30px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .3s ease; }
.vcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.vcard__ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(160deg, var(--primary), var(--primary-600)); box-shadow: 0 8px 20px rgba(11,42,107,.22); }
.vcard__ic svg { width: 24px; height: 24px; color: #fff; }
.vcard--accent .vcard__ic { background: linear-gradient(160deg, var(--accent-600), #0E91A8); box-shadow: 0 8px 20px rgba(34,211,238,.28); }
.vcard h3 { font-size: 20px; margin-top: 22px; }
.vcard p { margin-top: 11px; color: var(--muted); font-size: 15px; }

/* ---------- LEADERSHIP ---------- */
.team { background: var(--bg); }
.team__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.member { border-radius: var(--r-lg); overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .3s ease; }
.member:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.member__photo { position: relative; height: 240px; overflow: hidden; }
.member__photo .ph-label { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.7); background: rgba(6,15,43,.45); padding: 4px 9px; border-radius: 6px; }
.member__body { padding: 20px 22px 24px; }
.member__body h4 { font-size: 18px; }
.member__role { margin-top: 5px; font-size: 13.5px; font-weight: 600; color: var(--accent-600); }
.member__bio { margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.member__social { margin-top: 16px; display: flex; gap: 8px; }
.member__social a { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--ink-700); transition: all .2s ease; }
.member__social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.member__social svg { width: 15px; height: 15px; }

/* ---------- TIMELINE / JOURNEY ---------- */
.journey { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.journey__bg { position: absolute; inset: 0; background:
  radial-gradient(660px 440px at 90% 8%, rgba(34,211,238,.13), transparent 60%),
  radial-gradient(620px 460px at 4% 98%, rgba(59,91,196,.24), transparent 62%); }
.journey .wrap { position: relative; z-index: 2; }
.journey h2 { color: #fff; font-size: 42px; }
.journey__track { margin-top: 60px; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.journey__track::before { content:""; position: absolute; top: 19px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, rgba(34,211,238,.5) 10%, rgba(124,143,240,.5) 90%, transparent); }
.jstep { position: relative; }
.jstep__dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-800); border: 2px solid var(--accent); position: relative; z-index: 2; box-shadow: 0 0 0 5px rgba(34,211,238,.12); }
.jstep__dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.jstep__year { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: #fff; margin-top: 22px; }
.jstep h4 { color: #fff; font-size: 16px; margin-top: 8px; }
.jstep p { color: rgba(225,233,250,.62); font-size: 13.5px; margin-top: 8px; line-height: 1.5; }

/* ---------- COMPLIANCE / TRUST ---------- */
.trust { background: var(--panel); }
.trust__layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.trust__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tbadge { padding: 24px 20px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-align: center; transition: transform .2s ease, box-shadow .25s ease; }
.tbadge:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tbadge__ic { width: 46px; height: 46px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); }
.tbadge__ic svg { width: 23px; height: 23px; color: var(--primary); }
.tbadge .name { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.tbadge .desc { margin-top: 5px; font-size: 12.5px; color: var(--muted); }

/* ---------- CAREERS TEASER ---------- */
.careers { background: var(--bg); }
.careers__card { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(150deg, var(--primary-600), var(--primary) 70%); color: #fff; padding: 56px 60px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; box-shadow: var(--shadow-lg); }
.careers__card .glow { position: absolute; inset: 0; background: radial-gradient(520px 320px at 90% 10%, rgba(34,211,238,.28), transparent 60%); }
.careers__copy { position: relative; z-index: 2; }
.careers__copy h2 { color: #fff; font-size: 36px; }
.careers__copy p { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,.85); max-width: 460px; }
.careers__actions { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.careers__perk { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.careers__perk svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.careers__cta { margin-top: 10px; }

@media (max-width: 1080px) {
  .abhero__inner, .mission__layout, .trust__layout, .careers__card { grid-template-columns: 1fr; }
  .abstats__grid, .team__grid { grid-template-columns: repeat(2, 1fr); }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .journey__track { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .journey__track::before { display: none; }
}

@media (max-width: 640px) {
  .abstats__grid, .team__grid, .values__grid, .journey__track { grid-template-columns: 1fr; }
  .careers__card { padding: 32px 24px; }
  .careers__copy h2 { font-size: 28px; }
}