/* =====================================================
   CiroX Landing — Pricing
   ===================================================== */

.pricing { padding: var(--space-12) 0; }

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.pricing-card {
  position: relative;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-xl);
  transition: var(--transition-animated);
}
.pricing-card.popular {
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: var(--shadow-glow-cyan), var(--shadow-md);
  transform: scale(1.03);
}
.pricing-card.popular:hover { transform: scale(1.03) translateY(-6px); }

.popular-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-brand);
  color: var(--bg-void);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  animation: breathe 3s var(--ease-base) infinite;
}

.no-card-needed-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--volt-emerald-bright);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.p-header { margin-bottom: var(--space-6); }
.p-name { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); color: var(--text-pure); }
.p-price { margin-bottom: var(--space-2); }
.p-price-num { font-size: var(--display-sm); font-weight: 800; color: var(--text-pure); font-family: var(--font-mono); }
.pricing-card.popular .p-price-num { color: var(--volt-cyan-bright); }
.p-price-period { font-size: var(--text-base); color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.p-desc { font-size: var(--text-sm); color: var(--text-muted); }

.p-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.p-features li { display: flex; align-items: center; gap: var(--space-2); }
.check { color: var(--volt-emerald); font-weight: 700; font-size: var(--text-xs); }

.btn-pricing-outline {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px;
  font-size: var(--text-sm); font-weight: 600;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-full);
  color: var(--text-main);
  transition: var(--transition-animated);
  background: transparent;
}
.btn-pricing-outline:hover {
  border-color: var(--volt-cyan);
  background: rgba(34,211,238,0.06);
  transform: translateY(-2px);
}

.btn-pricing-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px;
  font-size: var(--text-sm); font-weight: 700;
  background: var(--grad-brand);
  color: var(--bg-void);
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-glow-cyan);
  transition: var(--transition-animated), filter var(--dur-quick) var(--ease-quick);
}
.btn-pricing-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34,211,238,0.4);
  filter: brightness(1.1);
}

@media (max-width: 1024px) {
  .pricing-cards-grid { grid-template-columns: 1fr; }
  .pricing-card.popular { transform: none; }
  .pricing-card.popular:hover { transform: translateY(-4px); }
}