/* NexousHub landing - Expense page styles.
   NOTE: the original global stylesheet (sscs-pages.css) defining these classes was not in the zip,
   so this file is reconstructed from the class names used by Expense.tsx. */

.expense-landing-container {
  position: relative;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.hero-badge, .section-tag { letter-spacing: 0.04em; }
.section-tag { letter-spacing: 0.12em; }

/* Metrics bar */
.exp-metric-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.3s ease;
}
.exp-metric-item:hover {
  background: rgba(79, 142, 247, 0.08);
  border-color: rgba(79, 142, 247, 0.25);
  transform: translateY(-3px);
}
.exp-metric-num {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 480px) {
  .exp-metrics-bar .grid { grid-template-columns: 1fr !important; }
}

/* Feature cards */
.exp-feat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s ease;
}
.exp-feat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3); }
.exp-feat-card[data-color="blue"]:hover   { border-color: rgba(79, 142, 247, 0.4); }
.exp-feat-card[data-color="cyan"]:hover   { border-color: rgba(6, 182, 212, 0.4); }
.exp-feat-card[data-color="purple"]:hover { border-color: rgba(139, 92, 246, 0.4); }
.exp-feat-card[data-color="green"]:hover  { border-color: rgba(16, 185, 129, 0.4); }
.exp-feat-card[data-color="amber"]:hover  { border-color: rgba(245, 158, 11, 0.4); }
.exp-feat-card[data-color="red"]:hover    { border-color: rgba(239, 68, 68, 0.4); }

/* Payment-mode marquee */
.carousel-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carousel-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: expMarquee 30s linear infinite;
}
.carousel-wrapper:hover .carousel-track { animation-play-state: paused; }
@keyframes expMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); }
}
.pay-chip-c {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip-icon { font-size: 1.25rem; line-height: 1; }
.chip-label { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; }

/* Mock table */
.mock-table th { font-weight: 600; }

/* FAQ */
.faq-item { transition: border-color 0.3s ease; }
.faq-item.open { border-color: rgba(79, 142, 247, 0.3); }

/* Light theme */
[data-theme="light"] .expense-landing-container { color: #475569; }
[data-theme="light"] .expense-landing-container .text-white { color: #0f172a; }
[data-theme="light"] .expense-landing-container .text-white\/60 { color: #475569; }
[data-theme="light"] .exp-metric-item,
[data-theme="light"] .exp-feat-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .exp-metric-num { background: linear-gradient(135deg, #1e293b, #334155); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .ems-mockup .text-white,
[data-theme="light"] .approval-modal .text-white,
[data-theme="light"] .paid-modal .text-white { color: #fff; }