/* ──────────────────────────────────────────────────────────────────────
   components.css — nav, buttons, cards, chips
   ──────────────────────────────────────────────────────────────────── */

/* ── NAV ───────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(220, 38, 38, 0.15);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
.nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav-brand img { width: 38px; height: 38px; }
.nav-brand span {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.35rem;
  color: #fff; letter-spacing: 0.05em;
}
.nav-brand span em { color: #ef4444; font-style: normal; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  color: #a1a1aa; text-decoration: none; font-size: 0.92rem; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }

@media (max-width: 768px) {
  .nav-links { display: none; }
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.btn-primary {
  background: #dc2626; color: #fff;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
}
.btn-primary:hover {
  background: #ef4444;
  box-shadow: 0 0 24px 0 rgba(220, 38, 38, 0.5);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-ghost:hover { border-color: #dc2626; color: #fca5a5; }

/* ── FEATURE CARDS ─────────────────────────────────────────────────── */
.feature-card {
  padding: 2rem;
  background: rgba(15, 15, 17, 0.6);
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 0;
  background: #dc2626;
  transition: height 0.3s ease;
}
.feature-card:hover {
  background: rgba(20, 20, 22, 0.8);
  border-color: rgba(220, 38, 38, 0.4);
  transform: translateY(-4px);
}
.feature-card:hover::before { height: 100%; }
.feature-num {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 2px;
  background: rgba(220, 38, 38, 0.08);
}
.feature-card h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem; color: #fff;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.feature-card p { color: #a1a1aa; font-size: 0.94rem; }

/* ── COMMAND CARDS ─────────────────────────────────────────────────── */
.cmd {
  padding: 1.25rem 1.5rem;
  background: rgba(15, 15, 17, 0.5);
  border-left: 3px solid #dc2626;
  border-radius: 0 4px 4px 0;
  transition: all 0.2s ease;
}
.cmd:hover {
  background: rgba(20, 20, 22, 0.8);
  border-left-color: #ef4444;
}
.cmd code {
  display: block;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #fca5a5;
  font-size: 0.95rem; font-weight: 500;
  margin-bottom: 0.4rem;
}
.cmd p { color: #a1a1aa; font-size: 0.88rem; margin: 0; }

/* ── SUPPORT CHIP ──────────────────────────────────────────────────── */
.support-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  color: #fca5a5;
  font-size: 0.95rem;
  font-weight: 500;
}
.support-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}