/* ================================================================= */
/*  AI AUTOMATION PAGE                                                 */
/* ================================================================= */

.ai-highlight { color: var(--pepla-green); }


/* ── Hero ──────────────────────────────────────────────────────────── */
.ai-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;
}
.ai-hero.animate-in { opacity: 1; transform: translateY(0); }
.ai-hero__title { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 12px; }
.ai-hero__subtitle { font-size: 1.1rem; font-weight: 600; color: var(--pepla-green); text-transform: uppercase; margin-bottom: 20px; }
.ai-hero__content p { font-size: 1rem; line-height: 1.8; color: #444; margin-bottom: 16px; }
.ai-hero__icon { width: 220px; height: 220px; }

/* Hero animations */
.ai-node1, .ai-node4 { animation: aiNodePulse 3s ease infinite; }
.ai-node2, .ai-node5 { animation: aiNodePulse 3s ease 0.5s infinite; }
.ai-node3 { animation: aiNodePulse 3s ease 1s infinite; }
.ai-hub { animation: aiHubGlow 2.5s ease infinite; }
.ai-conn1, .ai-conn3, .ai-conn5 { animation: aiConnFlash 2s ease infinite; }
.ai-conn2, .ai-conn4 { animation: aiConnFlash 2s ease 0.5s infinite; }
.ai-spark1 { animation: aiSpark 2s ease infinite; }
.ai-spark2 { animation: aiSpark 2s ease 0.5s infinite; }
.ai-out1 { animation: aiOutType 3s ease infinite; }
.ai-out2 { animation: aiOutType 3s ease 0.3s infinite; }
.ai-out3 { animation: aiOutType 3s ease 0.6s infinite; }

@keyframes aiNodePulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes aiHubGlow { 0%,100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.1); } }
@keyframes aiConnFlash { 0%,100% { opacity: 0.2; } 50% { opacity: 0.8; } }
@keyframes aiSpark { 0%,100% { opacity: 0.1; transform: scale(0.8); } 50% { opacity: 0.6; transform: scale(1.3); } }
@keyframes aiOutType { 0% { stroke-dasharray: 40; stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: 0; } }

/* ── Platforms ─────────────────────────────────────────────────────── */
.ai-platforms {
  max-width: 1280px; margin: 0 auto; padding: 50px;
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.ai-platforms.animate-in { opacity: 1; transform: translateY(0); }
.ai-platforms__heading { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 16px; }
.ai-platforms__intro { font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 40px; max-width: 800px; }

.ai-platforms__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

.ai-platform-card {
  background: #fff; border-radius: 12px; padding: 24px 16px; 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;
}
.ai-platform-card.animate-in { opacity: 1; transform: translateY(0); }
.ai-platform-card:nth-child(1) { transition-delay: 0s; }
.ai-platform-card:nth-child(2) { transition-delay: 0.1s; }
.ai-platform-card:nth-child(3) { transition-delay: 0.2s; }
.ai-platform-card:nth-child(4) { transition-delay: 0.3s; }
.ai-platform-card:nth-child(5) { transition-delay: 0.4s; }
.ai-platform-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); }

.ai-platform-card__icon { width: 60px; height: 60px; margin: 0 auto 12px; }
.ai-plat-icon { width: 100%; height: 100%; }
.ai-platform-card h4 { font-size: 0.95rem; font-weight: 700; color: #222; margin-bottom: 8px; }
.ai-platform-card p { font-size: 0.8rem; line-height: 1.5; color: #555; }

/* Platform icon animations */
.ai-plat__ring { animation: aiNodePulse 3s ease infinite; }
.ai-plat__wave1 { stroke-dasharray: 40; animation: aiWaveDraw 2.5s ease infinite; }
.ai-plat__spiral { stroke-dasharray: 100; animation: aiSpiralDraw 4s linear infinite; }
.ai-plat__bracket-l { animation: aiBracketL 2s ease infinite; }
.ai-plat__bracket-r { animation: aiBracketR 2s ease infinite; }
.ai-plat__dot { animation: aiHubGlow 2s ease infinite; }
.ai-plat__gem1 { animation: aiNodePulse 3s ease infinite; }
.ai-plat__gem2 { animation: aiNodePulse 3s ease 0.5s infinite; }
.ai-plat__t-node1 { animation: aiNodePulse 2.5s ease infinite; }
.ai-plat__t-node2 { animation: aiNodePulse 2.5s ease 0.3s infinite; }
.ai-plat__t-node3 { animation: aiNodePulse 2.5s ease 0.6s infinite; }
.ai-plat__t-link1, .ai-plat__t-link2, .ai-plat__t-link3 { animation: aiConnFlash 2s ease infinite; }

@keyframes aiWaveDraw { 0% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: 0; } }
@keyframes aiSpiralDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes aiBracketL { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes aiBracketR { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }

/* ── Use Cases ─────────────────────────────────────────────────────── */
.ai-usecases {
  max-width: 1280px; margin: 0 auto; padding: 50px;
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.ai-usecases.animate-in { opacity: 1; transform: translateY(0); }
.ai-usecases__heading { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 40px; }

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

.ai-usecase {
  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;
}
.ai-usecase.animate-in { opacity: 1; transform: translateY(0); }
.ai-usecase:nth-child(1) { transition-delay: 0s; }
.ai-usecase:nth-child(2) { transition-delay: 0.1s; }
.ai-usecase:nth-child(3) { transition-delay: 0.2s; }
.ai-usecase:nth-child(4) { transition-delay: 0.3s; }
.ai-usecase:nth-child(5) { transition-delay: 0.4s; }
.ai-usecase:nth-child(6) { transition-delay: 0.5s; }
.ai-usecase:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); }

.ai-usecase__icon { width: 70px; height: 70px; margin: 0 auto 16px; }
.ai-uc-icon { width: 100%; height: 100%; }
.ai-usecase h4 { font-size: 1.05rem; font-weight: 700; color: #222; margin-bottom: 10px; }
.ai-usecase p { font-size: 0.85rem; line-height: 1.6; color: #555; text-align: left; }

/* Use case icon animations */
.ai-uc__check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ucCheckDraw 2.5s ease infinite; }
.ai-uc__wave { stroke-dasharray: 40; animation: aiWaveDraw 2.5s ease infinite; }
.ai-uc__arrow { animation: ucArrowBob 2s ease infinite; }
.ai-uc__transfer { animation: ucTransferFlash 1.5s ease infinite; }
.ai-uc__msg1 { animation: ucMsgSlide 2.5s ease infinite; }
.ai-uc__msg2 { animation: ucMsgSlide 2.5s ease 0.4s infinite; }
.ai-uc__msg3 { animation: ucMsgSlide 2.5s ease 0.8s infinite; }
.ai-uc__graph { stroke-dasharray: 80; stroke-dashoffset: 80; animation: ucGraphDraw 3s ease infinite; }
.ai-uc__dot { animation: aiSpark 2s ease infinite; }

@keyframes ucCheckDraw { 0% { stroke-dashoffset: 40; } 40%,100% { stroke-dashoffset: 0; } }
@keyframes ucArrowBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes ucTransferFlash { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes ucMsgSlide { 0%,100% { opacity: 0.3; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2px); } }
@keyframes ucGraphDraw { 0% { stroke-dashoffset: 80; } 50%,100% { stroke-dashoffset: 0; } }

/* ── Pepla Voice Section ───────────────────────────────────────────── */
.ai-voice {
  max-width: 1280px; margin: 0 auto; padding: 50px;
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.ai-voice.animate-in { opacity: 1; transform: translateY(0); }
.ai-voice__heading { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 20px; }
.ai-voice__content p { font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 20px; }

.ai-voice__layout { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }

.ai-voice-anim {
  width: 200px; height: 120px;
  background: var(--dark); border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}

.ai-voice-anim__bars { display: flex; align-items: center; gap: 6px; }

.ai-voice-anim__bar {
  width: 6px; background: var(--pepla-green); border-radius: 4px;
  animation: voiceBarLg 1.2s ease infinite;
}
.ai-voice-anim__bar:nth-child(1) { height: 20px; animation-delay: 0s; }
.ai-voice-anim__bar:nth-child(2) { height: 36px; animation-delay: 0.1s; }
.ai-voice-anim__bar:nth-child(3) { height: 28px; animation-delay: 0.2s; }
.ai-voice-anim__bar:nth-child(4) { height: 44px; animation-delay: 0.3s; }
.ai-voice-anim__bar:nth-child(5) { height: 32px; animation-delay: 0.4s; }
.ai-voice-anim__bar:nth-child(6) { height: 48px; animation-delay: 0.5s; }
.ai-voice-anim__bar:nth-child(7) { height: 28px; animation-delay: 0.6s; }
.ai-voice-anim__bar:nth-child(8) { height: 36px; animation-delay: 0.7s; }
.ai-voice-anim__bar:nth-child(9) { height: 20px; animation-delay: 0.8s; }

@keyframes voiceBarLg {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ai-hero { grid-template-columns: 1fr; }
  .ai-hero__visual { text-align: center; }
  .ai-platforms__grid { grid-template-columns: repeat(2, 1fr); }
  .ai-usecases__grid { grid-template-columns: repeat(2, 1fr); }
  .ai-voice__layout { grid-template-columns: 1fr; }
  .ai-voice-anim { margin: 0 auto; }
}

@media (max-width: 600px) {
  .ai-hero, .ai-platforms, .ai-usecases, .ai-voice { padding: 50px 20px; }
  .ai-platforms__grid { grid-template-columns: 1fr; }
  .ai-usecases__grid { grid-template-columns: 1fr; }
  .ai-hero__title { font-size: 1.5rem; }
}