# Introduction

<br><br>

<div class="intro-container container-fade-in">
  <div class="intro-point animated-text delay-1">
    <div class="intro-icon"><i class="fas fa-microchip"></i></div>
    <div>LLMs are increasingly integrated into <span class="highlight-word">critical applications</span></div>
  </div>
  
  <div class="intro-point animated-text delay-2">
    <div class="intro-icon"><i class="fas fa-exclamation-triangle"></i></div>
    <div>Security vulnerabilities present <span class="highlight-word">significant challenges</span></div>
  </div>
  
  <div class="intro-point animated-text delay-3">
    <div class="intro-icon"><i class="fas fa-clipboard-check"></i></div>
    <div>Need for <span class="highlight-word">systematic evaluation</span> approaches</div>
  </div>
  
  <div class="intro-point animated-text delay-4">
    <div class="intro-icon"><i class="fas fa-user-secret"></i></div>
    <div>Focus on <span class="highlight-word">red teaming</span> methodologies</div>
  </div>
</div>

<style>
.intro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 85%;
  max-width: 700px;
  margin: 0 auto;
  padding: 1.25rem;
  background: var(--background-card);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 12px var(--card-shadow);
}

.intro-point {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem;
  width: 100%;
  transition: transform 0.2s ease;
}

.intro-point:hover {
  transform: translateX(5px);
}

.intro-icon {
  flex: 0 0 3rem;
  font-size: 1.5rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.highlight-word {
  color: var(--highlight);
  font-weight: 600;
  position: relative;
  background: linear-gradient(90deg, var(--highlight), var(--primary-color));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: gentle-shimmer 4s linear infinite;
}

@keyframes gentle-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
</style>