/* ============================================================
   Mix — original CV structure + the timeline (B) palette touches,
   no moving particles. Load after styles.tokyo.css.
   ============================================================ */

/* Calm, static backdrop — hide the particle layer entirely. */
.particles { display: none !important; }

/* B's mono labels — the "developer / terminal" feel. */
.section-eyebrow,
.scroll-cue,
.xp-when,
.xp-co,
.stat-label,
.project-lang {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
}

/* B's gradient skill bars. */
.skill-bar .fill {
  background: linear-gradient(90deg, #0CC7A0 0%, var(--accent-soft) 100%) !important;
}
.skill-bar.max .fill {
  background: linear-gradient(90deg, var(--accent) 0%, #FE017B 100%) !important;
  box-shadow: 0 0 8px rgba(80, 79, 246, 0.5);
}

/* Match the timeline (B) surfaces exactly — solid navy gradient cards,
   crisp lines, mono aqua meta. (This is the palette you preferred.) */
.card {
  background: linear-gradient(180deg, #1f2236 0%, #181a2b 100%) !important;
  border: 1px solid #2f3454 !important;
}
.card:hover { border-color: #504FF6 !important; }

.tag {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace !important;
  font-size: 11.5px !important;
  color: #c3c7de !important;
  background: rgba(80, 79, 246, 0.09) !important;
  border: 1px solid #2f3454 !important;
  border-radius: 7px !important;
}

.section-eyebrow { color: #8A89FA; }     /* B's soft-purple eyebrow */
.co, .xp-co { color: #0CC7A0; }          /* aqua company names */
.xp-when { color: #8A89FA; }             /* mono soft-purple dates */

/* Inline text links (footer "Respawn", Kamil credit) — soft-purple, underlined. */
.inline-link {
  color: #8A89FA;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 137, 250, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.inline-link:hover { color: #6E6DF8; border-bottom-color: #6E6DF8; }

/* Featured build card (Image Slicer) — one accent edge to set it apart. */
.project-featured {
  border-left: 3px solid #504FF6 !important;
  padding: 26px 28px;          /* was missing — matched to the other cards */
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Greeting on its own line at the top of the about card. */
.about-greeting {
  font-size: 1.12rem;
  font-weight: 650;
  margin-bottom: 2px;
}
.project-featured .featured-name { font-size: 1.34rem; margin-top: 4px; }
.project-featured .featured-credit { color: #8f95b6; margin-top: -2px; }
.project-featured .featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}