/* FrameworkMapper Design System — supplements tailwind.css */
:root {
  /* Brand */
  --fm-navy: #0E0129;
  --fm-rose: #D80650;
  --fm-rose-gradient: linear-gradient(135deg, #D2044D 0%, #FF5E68 100%);

  /* Semantic */
  --fm-bg: #f8f9fa;
  --fm-bg-white: #ffffff;
  --fm-border: #e2e8f0;
  --fm-text: #1a1a2e;
  --fm-text-secondary: #4a5568;
  --fm-text-muted: #718096;

  /* Spacing */
  --section-padding: 80px 24px;
  --card-radius: 12px;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
}

/* Nav dropdown styles (used by nav.js) */
.fm-nav-dropdown { position: relative; }
.fm-nav-dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 260px;
  background: white; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s ease; z-index: 100;
  border: 1px solid #e5e7eb;
}
.fm-nav-dropdown-menu.right { left: auto; right: 0; }
.fm-nav-dropdown:hover .fm-nav-dropdown-menu,
.fm-nav-dropdown:focus-within .fm-nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.fm-nav-dropdown-menu a, .fm-nav-dropdown-menu button {
  display: block; width: 100%; padding: 10px 16px;
  color: #374151; font-size: 0.875rem; text-align: left;
  text-decoration: none; background: none; border: none; cursor: pointer;
  transition: background 0.15s;
}
.fm-nav-dropdown-menu a:hover, .fm-nav-dropdown-menu button:hover { background: #f9fafb; }
.fm-dropdown-header {
  padding: 8px 16px 4px; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af;
}
.fm-dropdown-divider { height: 1px; background: #e5e7eb; margin: 4px 0; }
.fm-dropdown-item-desc { font-size: 0.75rem; color: #9ca3af; margin-top: 1px; }

/* Mobile menu */
.fm-mobile-menu { display: none; }
.fm-mobile-menu.open { display: block; }
.fm-mobile-accordion-body { display: none; }
.fm-mobile-accordion-body.open { display: block; }

/* Get Started button */
.fm-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 6px; font-size: 0.875rem; font-weight: 600;
  background: var(--fm-rose-gradient); color: white; text-decoration: none;
  transition: all 0.2s ease; white-space: nowrap;
}
.fm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(216,6,80,0.3); }

/* Shared section styles */
.fm-section { padding: 80px 0; }
.fm-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.fm-section-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6b7280; margin-bottom: 8px;
}

/* Vertical card */
.vertical-card {
  background: white; border-radius: var(--card-radius); border: 1px solid var(--fm-border);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  transition: all 0.2s ease; text-decoration: none; color: inherit;
}
.vertical-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.vertical-card__icon { font-size: 2rem; line-height: 1; }
.vertical-card__title { font-size: 1rem; font-weight: 700; color: var(--fm-text); }
.vertical-card__frameworks { font-size: 0.75rem; color: #6b7280; font-weight: 500; }
.vertical-card__description { font-size: 0.875rem; color: var(--fm-text-secondary); flex: 1; }
.vertical-card__cta { font-size: 0.875rem; font-weight: 600; color: #2563eb; margin-top: 4px; }

/* CTA block */
.fm-cta-block {
  background: var(--fm-navy); color: white; padding: 64px 24px; text-align: center;
}
.fm-cta-block h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 12px; }
.fm-cta-block p { color: #d1d5db; margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* Gradient btn (for pages using design-system.css) */
.gradient-btn {
  background: linear-gradient(135deg, #D2044D 0%, #FF5E68 100%);
  transition: all 0.3s ease;
}
.gradient-btn:hover {
  background: linear-gradient(135deg, #B00542 0%, #D80650 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(216, 6, 80, 0.3);
}