/* Tribble Component Library
 * Shared styles for workflow pages, platform, and feature pages
 * Used across 30+ pages to maintain consistency and reduce duplication
 */

/* Base Styles */
body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;
  background: #f8fafc;
  color: #0b1220;
}

/* Navigation */
.zen-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.zen-nav::before,
.zen-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zen-nav::before {
  background: radial-gradient(
    42% 68% at 12% 18%,
    rgba(99, 102, 241, 0.08),
    transparent 75%
  );
}

.zen-nav::after {
  background: radial-gradient(
    36% 52% at 82% -10%,
    rgba(14, 165, 233, 0.08),
    transparent 75%
  );
  mix-blend-mode: screen;
}

.zen-nav__inner {
  position: relative;
  z-index: 1;
}

.zen-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.zen-links a {
  color: #475569;
  transition: color 0.25s ease;
}

.zen-links a:hover {
  color: #0f172a;
}

.zen-links .active {
  color: #0f172a;
  font-weight: 600;
}

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

/* Hero Background */
.hero-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      120% 120% at 12% -10%,
      rgba(99, 102, 241, 0.14),
      transparent 60%
    ),
    radial-gradient(
      110% 110% at 95% -20%,
      rgba(16, 185, 129, 0.14),
      transparent 65%
    ),
    #0b1220;
  color: #fff;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 70% at 50% 0%,
    rgba(50, 99, 233, 0.24),
    transparent 70%
  );
  opacity: 0.6;
  pointer-events: none;
}

/* Metric Card */
.metric-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.5);
  border-radius: 1.25rem;
  backdrop-filter: blur(14px);
}

/* Glass Card */
.glass-card {
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 1.5rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
}

/* Shadow Card Utility */
.shadow-card {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Flow Grid & Steps */
.flow-grid {
  display: grid;
  gap: 1.5rem;
  position: relative;
}

@media (min-width: 1024px) {
  .flow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.flow-step {
  position: relative;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  min-height: 100%;
}

.flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.75rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-top: 2px solid rgba(99, 102, 241, 0.5);
  border-right: 2px solid rgba(99, 102, 241, 0.5);
  border-radius: 0.4rem;
  opacity: 0.7;
}

.flow-step:last-child::after {
  display: none;
}

@media (max-width: 1023px) {
  .flow-step::after {
    display: none;
  }
}

/* Integration Logos */
.integration-logo {
  height: 30px;
  filter: grayscale(100%);
  opacity: 0.75;
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}

.integration-logo:hover {
  filter: none;
  opacity: 1;
}