/* ============================================================
   about.css — "Signal Broadcast" node.
   Neutral dark base, white text, single amber accent.
   ============================================================ */

.about-panel {
  --theme-primary: #f5a623;
  --theme-bg: #05060a;
  background: linear-gradient(180deg, rgba(5,6,10,0.96), rgba(8,10,16,0.94));
  color: #e8ecf3;
}
.about-panel .panel-return { border-color: rgba(245,166,35,0.4); color: #f5a623; }
.about-panel .panel-return:hover { background: rgba(245,166,35,0.12); }
.about-panel .eyebrow { color: #f5a623; }
.about-panel h1 { color: #fff; letter-spacing: -0.02em; }
.about-panel h2 { color: #fff; margin-top: 48px; }
.about-panel p { color: #b4bdcc; }
.about-panel strong { color: #fff; }
.about-panel code { background: rgba(245,166,35,0.12); color: #f5a623; }

/* cloud vs local comparison diagram */
.cmp-diagram { margin-top: 12px; }
.cmp-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; max-width: 720px; }
.cmp-card { flex: 1; min-width: 220px; padding: 22px 20px; border: 1px solid; border-radius: 4px; position: relative; }
.cmp-bad { border-color: rgba(255,77,77,0.4); background: rgba(255,77,77,0.05); }
.cmp-good { border-color: rgba(51,255,153,0.4); background: rgba(51,255,153,0.05); }
.cmp-x, .cmp-check { position: absolute; top: 12px; right: 14px; font-size: 22px; font-weight: 800; }
.cmp-x { color: #ff4d4d; }
.cmp-check { color: #33ff99; }
.cmp-name { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.cmp-bad .cmp-name { color: #ff7a7a; text-decoration: line-through; text-decoration-color: rgba(255,77,77,0.6); }
.cmp-good .cmp-name { color: #33ff99; }
.cmp-cost { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.cmp-bad .cmp-cost { color: #ff7a7a; }
.cmp-good .cmp-cost { color: #33ff99; }
.cmp-list { list-style: none; font-size: 12px; color: #8a93a6; }
.cmp-list li { padding: 3px 0; }
.cmp-list li::before { content: '· '; color: #4a5263; }
.cmp-vs { display: flex; align-items: center; justify-content: center; color: #4a5263; font-weight: 800; letter-spacing: 0.1em; }
.cmp-note { margin-top: 14px; }

/* tech stack grid */
.stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; max-width: 720px; }
.stack-badge {
  padding: 14px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid rgba(245,166,35,0.3); border-radius: 4px; color: #f5a623;
  background: rgba(245,166,35,0.04); transition: all 200ms;
}
.stack-badge:hover { background: rgba(245,166,35,0.12); box-shadow: 0 0 16px rgba(245,166,35,0.25); transform: translateY(-2px); }