/* RM² Tech Solutions — Master Style System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --brand-primary: #2A6FDB;
  --brand-dark: #2B2B2B;
  --brand-light: #BFC3C7;
  --brand-utility: #5A8BD6;
  --brand-navy: #0F172A;
  --brand-navy-dark: #0A1128;
  --bg-slate-50: #F8FAFC;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1E293B;
  background-color: #FFFFFF;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Glassmorphism Header */
.glass-nav {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-nav.scrolled {
  background: rgba(10, 17, 40, 0.98);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(42, 111, 219, 0.3);
}

/* Gradient Text */
.text-gradient-blue {
  background: linear-gradient(135deg, #60A5FA 0%, #2A6FDB 50%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom Hero Radial Overlay */
.hero-glow {
  background: radial-gradient(circle at 75% 45%, rgba(42, 111, 219, 0.35) 0%, rgba(42, 111, 219, 0.05) 55%, transparent 80%);
}

/* Card Glow Hover */
.tech-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.tech-card:hover {
  transform: translateY(-4px);
  border-color: #2A6FDB;
  box-shadow: 0 20px 25px -5px rgba(42, 111, 219, 0.08), 0 8px 10px -6px rgba(42, 111, 219, 0.04);
}

.dark-tech-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-tech-card:hover {
  transform: translateY(-4px);
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(42, 111, 219, 0.6);
  box-shadow: 0 0 25px rgba(42, 111, 219, 0.2);
}

/* Accordion Transition */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, opacity 0.25s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 400px;
  opacity: 1;
  margin-top: 1rem;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: #2A6FDB;
}

/* Supplier Modal Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 17, 40, 0.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

/* Cyan & Blue Gradient Text */
.text-gradient-cyan {
  background: linear-gradient(135deg, #00F2FE 0%, #38BDF8 40%, #2A6FDB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Interactive Map Pulse Animation */
@keyframes mapPulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.6); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.9; }
}

.map-node-pulse {
  animation: mapPulse 3s infinite ease-in-out;
  transform-origin: center;
}

/* Interactive Tech Matrix Tab Styling */
.matrix-tab {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.matrix-tab.active {
  background-color: rgba(42, 111, 219, 0.2);
  border-color: #38BDF8;
  color: #FFFFFF;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

/* FAE Badge Glow */
.fae-badge {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(42, 111, 219, 0.15) 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
}