/* ============================================================
   ABOUT PAGE — supplementary styles
   Loaded after index.css. Reuses index.css entirely for shared
   components (nav, hero carousel, mini-banners, img-banner,
   proof-strip, feat-row, testimonials, cta-band, footer, buttons).
   Only new, About-specific components live here.
   ============================================================ */

/* ── TEAM GRID ── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.team-card { border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; background: var(--white); transition: box-shadow 0.2s, transform 0.2s; }
.team-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.team-photo-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: var(--g1); }
.team-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-body { padding: 1.1rem 1.2rem 1.3rem; }
.team-name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.team-role { font-size: 0.78rem; color: var(--g5); font-weight: 600; margin-bottom: 0.7rem; }
.team-social { display: flex; gap: 0.4rem; }
.team-social a { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--g6); transition: 0.15s; }
.team-social a:hover { color: var(--black); border-color: var(--g3); }

/* ============================================================
   TREE ROADMAP
   A trunk (vertical line) branches into phases (nodes), each
   phase grows a cluster of leaves (features). Status controls
   how "grown" each branch looks: live = solid/filled,
   coming soon = amber outline, planned = dashed/faint.
   ============================================================ */
.tree-root-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--g5); margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.5rem; }
.tree-root-label svg { color: var(--g4); }

.tree { position: relative; padding-left: 2.6rem; }
.tree::before { content: ''; position: absolute; left: 0.95rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: linear-gradient(to bottom, var(--black) 0%, var(--border-d) 55%, var(--border) 100%); }

.tree-branch { position: relative; padding-bottom: 2.8rem; }
.tree-branch:last-child { padding-bottom: 0; }
.tree-branch::before { content: ''; position: absolute; left: -1.65rem; top: 0.85rem; width: 1.65rem; height: 2px; background: var(--border-d); }

.tree-node { display: inline-flex; align-items: center; gap: 0.65rem; position: relative; flex-wrap: wrap; }
.tree-node-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--g4); flex-shrink: 0; position: relative; z-index: 2; }
.tree-branch.is-live .tree-node-dot { background: var(--black); border-color: var(--black); }
.tree-branch.is-soon .tree-node-dot { border-color: var(--warn); }
.tree-branch.is-planned .tree-node-dot { border-color: var(--g4); border-style: dashed; }

.tree-node-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.tree-node-status { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.18rem 0.55rem; border-radius: 3px; }
.tree-branch.is-live .tree-node-status { color: var(--ok); background: #eaf5ee; }
.tree-branch.is-soon .tree-node-status { color: var(--warn); background: #faf3e6; }
.tree-branch.is-planned .tree-node-status { color: var(--g5); background: var(--g1); }

.tree-leaves { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; margin-left: 0.2rem; padding-left: 1.5rem; border-left: 1.5px dashed var(--border-d); }
.tree-leaf { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--g7); border: 1px solid var(--border); border-radius: 40px; padding: 0.36rem 0.85rem; background: var(--white); transition: transform 0.15s, box-shadow 0.15s; }
.tree-leaf:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.tree-branch.is-live .tree-leaf { border-color: var(--g3); background: var(--g1); color: var(--black); }
.tree-branch.is-planned .tree-leaf { border-style: dashed; color: var(--g5); }
.tree-leaf svg { flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .tree { padding-left: 2rem; }
  .tree::before { left: 0.7rem; }
  .tree-branch::before { left: -1.3rem; width: 1.3rem; }
  .tree-leaves { padding-left: 1.1rem; }
  .tree-node-title { font-size: 0.92rem; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}