/* depremvar.site — about.css */

/* ── Vision section ── */
.vision-section { padding:100px 0; border-top:1px solid var(--border); }
.vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; margin-top:52px; }
.vision-body { font-size:1rem; line-height:1.85; color:var(--text-dim); margin-top:24px; }
.vision-body p { margin-bottom:18px; }
.vision-body strong { color:var(--text); font-weight:500; }
.vision-body em { color:var(--text); font-style:normal; }
.vision-signature {
  margin-top:36px; padding:20px 24px;
  border-left:2px solid var(--teal);
  background:linear-gradient(90deg,rgba(0,255,204,.05),transparent);
  border-radius:0 8px 8px 0;
}
.sig-name { font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:#fff; }
.sig-role { font-family:var(--font-mono); font-size:.62rem; color:var(--text-dim); letter-spacing:.12em; margin-top:4px; }
.sig-org  { font-family:var(--font-mono); font-size:.62rem; color:var(--teal); margin-top:2px; }

/* Stats card */
.stats-card { padding:28px; margin-bottom:20px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.stat-item {
  display:flex; flex-direction:column; align-items:center; padding:20px 12px;
  background:var(--bg-panel); text-align:center;
}
.stat-val { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--teal); line-height:1; }
.stat-label { font-family:var(--font-mono); font-size:.58rem; color:var(--text-dim); letter-spacing:.12em; margin-top:5px; text-transform:uppercase; }

/* Quote card */
.quote-card { padding:24px 28px; }
.quote-mark { font-family:var(--font-display); font-size:4rem; color:var(--teal-glow); line-height:.8; margin-bottom:10px; }
.quote-text { font-size:.95rem; line-height:1.8; color:var(--text-dim); font-style:italic; }
.quote-author { font-family:var(--font-mono); font-size:.62rem; color:var(--teal-dim); margin-top:14px; letter-spacing:.1em; }

/* ── Timeline ── */
.timeline-section { padding:100px 0; border-top:1px solid var(--border); background:linear-gradient(180deg,transparent,rgba(0,255,204,.015) 50%,transparent); }
.timeline { margin-top:52px; display:flex; flex-direction:column; gap:0; }

.tl-entry { display:grid; grid-template-columns:60px 1fr; gap:0 24px; }
.tl-marker { display:flex; flex-direction:column; align-items:center; padding-top:4px; }
.tl-dot {
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--teal); background:var(--bg);
  box-shadow:0 0 8px var(--teal-glow); flex-shrink:0;
}
.tl-dot-active { background:var(--teal); animation:pulse 2s infinite; }
.tl-line { width:2px; flex:1; min-height:30px; margin:8px 0; background:linear-gradient(180deg,var(--teal-glow),var(--text-faint)); }
.tl-card { padding:24px 28px; margin-bottom:16px; transition:border-color .25s; }
.tl-card:hover { border-color:var(--teal-glow); }
.tl-card-active { border-color:var(--teal-glow); }
.tl-date {
  font-family:var(--font-mono); font-size:.62rem;
  color:var(--teal); letter-spacing:.15em;
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.tl-title { font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff; margin-bottom:10px; }
.tl-body  { font-size:.85rem; line-height:1.75; color:var(--text-dim); }
.tl-body strong { color:var(--text); font-weight:500; }
.tl-tags  { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tl-tags span {
  font-family:var(--font-mono); font-size:.58rem;
  background:var(--teal-soft); border:1px solid rgba(0,255,204,.18);
  color:var(--teal-dim); padding:3px 10px; border-radius:2px; letter-spacing:.08em;
}

/* ── Stack section ── */
.stack-section { padding:100px 0; border-top:1px solid var(--border); }
.stack-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; }
.stack-card { padding:24px 20px; transition:all .25s var(--ease); }
.stack-card:hover { border-color:var(--teal-glow); transform:translateY(-4px); }
.stack-icon  { font-size:1.8rem; margin-bottom:12px; }
.stack-layer { font-family:var(--font-mono); font-size:.58rem; color:var(--teal); letter-spacing:.2em; text-transform:uppercase; margin-bottom:4px; }
.stack-name  { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:#fff; margin-bottom:14px; }
.stack-items { list-style:none; display:flex; flex-direction:column; gap:7px; }
.stack-items li { font-size:.8rem; color:var(--text-dim); padding-left:12px; position:relative; }
.stack-items li::before { content:'›'; position:absolute; left:0; color:var(--teal); }

/* ── Responsive ── */
@media (max-width:900px) {
  .vision-grid { grid-template-columns:1fr; gap:40px; }
  .stack-grid  { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .stack-grid  { grid-template-columns:1fr; }
  .stat-grid   { grid-template-columns:repeat(2,1fr); }
  .tl-entry    { grid-template-columns:40px 1fr; }
}