@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;700;800&display=swap');

body { 
  font-family: 'Inter', sans-serif; 
  color: #334155; 
  background-color: #fafaf9; /* Warm off-white */
}

h1, h2, h3, h4, h5, h6 { 
  font-family: 'Outfit', sans-serif; 
  color: #312e81; 
  font-weight: 700; 
  letter-spacing: -0.02em;
}

.text-primary { color: #312e81; } /* Deep Indigo */
.bg-primary { background-color: #312e81; }
.text-accent { color: #14b8a6; } /* Vibrant Teal */
.bg-accent { background-color: #14b8a6; }

.separator { 
  width: 60px; 
  height: 4px; 
  background-color: #14b8a6; 
  margin: 0 auto; 
  border-radius: 0px; 
}

/* Hard edge styling for a more serious/corporate look */
.rounded-xl, .rounded-2xl {
  border-radius: 4px !important;
}

.nav-link { 
  font-weight: 600; 
  font-size: 0.9rem; 
  color: #312e81; 
  transition: all 0.3s ease; 
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-link:hover { color: #14b8a6; }

.btn-accent { 
  background-color: #14b8a6; 
  color: white; 
  padding: 14px 40px; 
  border-radius: 0px; 
  font-weight: 700; 
  display: inline-block; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  text-transform: uppercase; 
  font-size: 0.85rem; 
  letter-spacing: 0.1em; 
  box-shadow: 4px 4px 0px rgba(49, 46, 129, 0.1);
}
.btn-accent:hover { 
  background-color: #0d9488; 
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(49, 46, 129, 0.15);
}

.form-control { 
  width: 100%; 
  padding: 14px 20px; 
  border: 1px solid #cbd5e1; 
  border-radius: 0px; 
  font-family: inherit; 
  font-size: 0.95rem; 
  margin-bottom: 20px; 
  outline: none; 
  background: white; 
  transition: all 0.3s; 
}
.form-control:focus { 
  border-color: #14b8a6; 
  box-shadow: -4px 4px 0px rgba(20, 184, 166, 0.2); 
}

/* Page Heroes */
.page-hero {
  position: relative;
  background-color: #312e81;
  padding: 140px 0 100px;
  color: white;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at right top, rgba(20, 184, 166, 0.2), transparent 50%);
  z-index: 1;
}
.page-hero > div { position: relative; z-index: 2; }
.page-hero h1 { color: white; margin-bottom: 1rem; }

/* New Animation: Scale and Fade */
.reveal { 
  opacity: 0; 
  transform: scale(0.9) translateY(30px); 
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); 
}
.reveal.visible { 
  opacity: 1; 
  transform: scale(1) translateY(0); 
}