/* =========================================================
   Section · 02 About — story, vision and mission cards.
   ========================================================= */

/* ---------- About: our story, then vision + mission ---------- */
.story { max-width: 820px; margin-bottom: clamp(28px, 3.5vw, 40px); }
.story__body { display: grid; gap: 14px; padding-left: clamp(18px, 3vw, 32px); border-left: 3px solid var(--accent); }
.story__body p:not(.vm__tag) { font-size: 17px; }

.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vm__card {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius);
}
.vm__card--dark { background: var(--ink); border-color: var(--ink); color: #F3F2ED; }
.vm__tag { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.vm__tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); }
.vm__card--dark .vm__tag { color: rgba(238, 240, 255, .78); }
.vm__card h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.1; }
.vm__card > p:not(.vm__tag) { font-size: 16px; color: var(--text); }
.vm__card--dark > p:not(.vm__tag) { color: rgba(238, 240, 255, .84); }
.vm__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: auto 0 0; padding: 20px 0 0; list-style: none;
  border-top: 1px dashed var(--edge);
}
.vm__tags li { padding: 6px 12px; border-radius: 999px; background: var(--bg); font: 500 12px var(--mono); color: var(--text); }
@media (max-width: 860px) { .vm { grid-template-columns: minmax(0, 1fr); } }

/* Student → Idea → Prototype → Innovation, with a data pulse running along it */
.chain {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px dashed rgba(255, 255, 255, .14);
}
.chain::before {
  content: ""; position: absolute; top: 29px; left: 6px; right: calc(25% - 6px);
  height: 2px; background: rgba(238, 240, 255, .16);
}
.chain::after {
  content: ""; position: absolute; top: 26px; left: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: chain-pulse 3.2s var(--mech) infinite;
}
.chain li {
  position: relative; padding-top: 24px;
  font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 240, 255, .78);
}
.chain li::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 2px solid rgba(238, 240, 255, .4);
}
.chain li:last-child { color: #fff; }
.chain li:last-child::before { background: var(--accent); border-color: var(--accent); }
@media (max-width: 480px) { .chain li { font-size: 10px; letter-spacing: .02em; } }
@keyframes chain-pulse {
  0%   { left: 2px; opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: calc(75% + 2px); opacity: 0; }
}