/* CDN fallback or direct include for Tailwind CSS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-teal: #055170;
  --primary-dark: #033a52;
  --secondary-cyan: #00B5E2;
  --secondary-hover: #009ac0;
  --accent-soft: #E0F2FE;
  --dark-charcoal: #0F172A;
  --light-bg: #F8FAFC;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e293b;
  background-color: #ffffff;
  overflow-x: hidden;
}

.bg-brand-teal {
  background-color: var(--primary-teal);
}

.bg-brand-teal-dark {
  background-color: var(--primary-dark);
}

.text-brand-teal {
  color: var(--primary-teal);
}

.bg-brand-cyan {
  background-color: var(--secondary-cyan);
}

.text-brand-cyan {
  color: var(--secondary-cyan);
}

.border-brand-cyan {
  border-color: var(--secondary-cyan);
}

.btn-cyan {
  background-color: var(--secondary-cyan);
  color: #ffffff;
  transition: all 0.3s ease;
}

.btn-cyan:hover {
  background-color: var(--secondary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 181, 226, 0.4);
}

.btn-teal {
  background-color: var(--primary-teal);
  color: #ffffff;
  transition: all 0.3s ease;
}

.btn-teal:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(5, 81, 112, 0.4);
}

/* Glassmorphism Navigation */
.glass-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Card Hover Micro-animations */
.hover-card-rise {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-card-rise:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(5, 81, 112, 0.12);
}