/* ================================================================= */
/*  TEAM AUGMENTATION PAGE                                             */
/* ================================================================= */

.ta-highlight { color: var(--pepla-orange); }


/* ── Hero ──────────────────────────────────────────────────────────── */
.ta-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ta-hero.animate-in { opacity: 1; transform: translateY(0); }

.ta-hero__title { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 12px; }
.ta-hero__subtitle { font-size: 1.1rem; font-weight: 600; color: var(--pepla-orange); text-transform: uppercase; margin-bottom: 20px; }
.ta-hero__content p { font-size: 1rem; line-height: 1.8; color: #444; margin-bottom: 16px; }
.ta-hero__icon { width: 220px; height: 200px; }

/* Hero animations */
.ta-aug1 { animation: augAppear 3s ease infinite; }
.ta-aug2 { animation: augAppear 3s ease 0.3s infinite; }
.ta-plus-h, .ta-plus-v { animation: plusPulse 2s ease infinite; }
.ta-link1 { animation: linkFlash 2.5s ease infinite; }
.ta-link2 { animation: linkFlash 2.5s ease 0.5s infinite; }

@keyframes augAppear {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes plusPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes linkFlash {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* ── Augmentation Models ───────────────────────────────────────────── */
.ta-models {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ta-models.animate-in { opacity: 1; transform: translateY(0); }

.ta-models__heading { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 16px; }
.ta-models__intro { font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 40px; max-width: 800px; }

.ta-models__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ta-model-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}
.ta-model-card.animate-in { opacity: 1; transform: translateY(0); }
.ta-model-card:nth-child(1) { transition-delay: 0s; }
.ta-model-card:nth-child(2) { transition-delay: 0.15s; }
.ta-model-card:nth-child(3) { transition-delay: 0.3s; }
.ta-model-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }

.ta-model-card__icon { width: 70px; height: 70px; margin: 0 auto 16px; }
.ta-icon { width: 100%; height: 100%; }

.ta-model-card h4 { font-size: 1.05rem; font-weight: 700; color: #222; margin-bottom: 10px; }
.ta-model-card p { font-size: 0.85rem; line-height: 1.6; color: #555; }

/* Model icon animations */
.ta-icon__add { animation: augAppear 2.5s ease infinite; }
.ta-icon__spike {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: spikeDraw 2.5s ease infinite;
}
.ta-icon__badge { animation: badgePop 2s ease infinite; }

@keyframes spikeDraw {
  0% { stroke-dashoffset: 80; }
  50%, 100% { stroke-dashoffset: 0; }
}
@keyframes badgePop {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* ── Roles ─────────────────────────────────────────────────────────── */
.ta-roles {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ta-roles.animate-in { opacity: 1; transform: translateY(0); }

.ta-roles__heading { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 40px; }

.ta-roles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ta-role {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ta-role.animate-in { opacity: 1; transform: translateY(0); }
.ta-role:nth-child(1) { transition-delay: 0s; }
.ta-role:nth-child(2) { transition-delay: 0.08s; }
.ta-role:nth-child(3) { transition-delay: 0.16s; }
.ta-role:nth-child(4) { transition-delay: 0.24s; }
.ta-role:nth-child(5) { transition-delay: 0.32s; }
.ta-role:nth-child(6) { transition-delay: 0.4s; }

.ta-role__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.ta-role h4 { font-size: 1rem; font-weight: 700; color: #222; margin-bottom: 4px; }
.ta-role p { font-size: 0.85rem; line-height: 1.5; color: #555; }

/* ── Why Pepla ─────────────────────────────────────────────────────── */
.ta-why {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ta-why.animate-in { opacity: 1; transform: translateY(0); }

.ta-why__heading { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 40px; }

.ta-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ta-why-card {
  border-radius: 16px;
  padding: 28px 20px;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ta-why-card.animate-in { opacity: 1; transform: translateY(0); }
.ta-why-card:nth-child(1) { transition-delay: 0s; }
.ta-why-card:nth-child(2) { transition-delay: 0.1s; }
.ta-why-card:nth-child(3) { transition-delay: 0.2s; }
.ta-why-card:nth-child(4) { transition-delay: 0.3s; }

.ta-why-card--green  { background: var(--pepla-green); }
.ta-why-card--orange { background: var(--pepla-orange); }
.ta-why-card--blue   { background: var(--pepla-blue); }
.ta-why-card--dark   { background: var(--dark); }

.ta-why-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.ta-why-card p { font-size: 0.85rem; line-height: 1.6; opacity: 0.92; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ta-hero { grid-template-columns: 1fr; }
  .ta-hero__visual { text-align: center; }
  .ta-models__grid { grid-template-columns: 1fr; }
  .ta-roles__grid { grid-template-columns: 1fr; }
  .ta-why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ta-hero, .ta-models, .ta-roles, .ta-why { padding: 50px 20px; }
  .ta-hero__title { font-size: 1.5rem; }
  .ta-why__grid { grid-template-columns: 1fr; }
}