/* ======================== MAIN HERO SECTION ======================== */
.hero {
  padding: 4rem 1rem;
  max-width: 700px;
  margin: auto;
}

.hero h2 {
  color: #800080;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.hero button {
  background-color: #800080;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 6px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.hero button:hover {
  background-color: #a347a6;
}

/* ================== POETIC HOOK SECTION ===================== */
.poetic-hook {
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem 2.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #f9f0ff, #f2e6ff);
  box-shadow: 0 6px 20px rgba(128,0,128,0.2);
  color: #800080;
  animation: slideFade 1.5s ease forwards, float 4s ease-in-out 1.5s infinite;
}

.poetic-hook span {
  display: inline-block;
  background: linear-gradient(90deg, #eea0ee, #ded8e3, #f9f0ff);
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}

/* ================== ANIMATIONS ===================== */
@keyframes slideFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ======================== HOME HERO SECTION ======================== */
.home-main {
  padding: 2rem 1rem;
  background-color: #fdf4ff;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hero {
  background-color: white;
  padding: 3rem 2rem;
  border-radius: 10px;
  max-width: 700px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  animation: fadeIn 1.2s ease;
}

.home-hero h2 {
  color: #800080;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.home-hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #444;
}

.home-buttons button {
  background-color: #800080;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  margin: 0 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.home-buttons button:hover {
  background-color: #a347a6;
  transform: scale(1.05);
}