/* ============================================================
   SHIVORAA — about.css  |  macOS Premium Theme
============================================================ */

#about { background: var(--bg); }
.about-wrap { display: flex; flex-direction: column; gap: 64px; }
@media (min-width: 900px) { .about-wrap { flex-direction: row; align-items: flex-start; gap: 96px; } }

.about-left { flex: 1; min-width: 0; }
.about-left .section-eyebrow { margin-bottom: 14px; }
.about-left p { color: var(--text2); line-height: 1.8; margin-bottom: 16px; font-size: 0.98rem; }

.about-meta { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.meta-item {
  display: flex; gap: 16px; padding: 20px 22px;
  background: var(--bg-alt);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.meta-item:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.meta-icon  { font-size: 1.5rem; flex-shrink: 0; }
.meta-title { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; }
.meta-desc  { font-size: 0.84rem; color: var(--text2); line-height: 1.6; }
.about-right { flex: 1; min-width: 0; }

/* macOS Terminal style */
.terminal {
  background: #1C1C1E;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-xl);
  font-size: 0.84rem;
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: #2C2C2E;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tb-dot        { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tb-dot.red    { background: #FF5F57; }
.tb-dot.yellow { background: #FFBD2E; }
.tb-dot.green  { background: #28CA41; }
.tb-title {
  margin-left: 8px; font-family: 'SF Mono', Menlo, 'Courier New', monospace;
  font-size: 0.74rem; color: rgba(255,255,255,0.35);
}
.terminal-body {
  padding: 22px 24px; font-family: 'SF Mono', Menlo, 'Courier New', monospace;
  font-size: 0.84rem; line-height: 2;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  color: rgba(255,255,255,0.85);
}
.tl     { display: block; white-space: nowrap; }
.t-dim  { color: rgba(255,255,255,0.25); }
.t-cmd  { color: #30D158; }
.t-br   { color: rgba(255,255,255,0.5); }
.t-key  { color: #FFD60A; font-weight: 500; }
.t-str  { color: #FF9F0A; }
.t-bool { color: #64D2FF; }
.t-caret { color: #30D158; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }