html, body { overflow-x: hidden; max-width: 100vw; }
    main { overflow-x: hidden; max-width: 100vw; }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }

    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2); }
      50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3); }
    }
    .btn-glow { animation: pulse-glow 2s ease-in-out infinite; }

    @keyframes shine {
      0% { transform: translateX(-100%) skewX(-15deg); }
      100% { transform: translateX(200%) skewX(-15deg); }
    }
    .card-shine { position: relative; overflow: hidden; }
    .card-shine::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
      animation: shine 4s ease-in-out infinite;
    }

    .icon-hover:hover { animation: icon-pulse 0.5s ease-in-out; }
    @keyframes icon-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .faq-item { transition: all 0.3s ease; }
    .faq-item:hover { background: rgba(255, 255, 255, 0.04); }

    .option-selected { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.8), 0 4px 20px rgba(59, 130, 246, 0.3); }





    /* Timeline visual do conteúdo */
    .timeline-item {
      position: relative;
      padding-left: 3rem;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: 15px;
      top: 2.5rem;
      bottom: -0.75rem;
      width: 2px;
      background: linear-gradient(to bottom, rgba(16, 185, 129, 0.4), rgba(16, 185, 129, 0.05));
    }
    .timeline-item:last-child::before { display: none; }
    .timeline-dot {
      position: absolute;
      left: 4px;
      top: 0.75rem;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: white;
      background: rgba(16, 185, 129, 0.15);
      border: 2px solid rgba(16, 185, 129, 0.4);
      transition: all 0.3s ease;
      z-index: 1;
    }
    .timeline-item:hover .timeline-dot {
      background: rgba(16, 185, 129, 0.3);
      border-color: rgba(16, 185, 129, 0.7);
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
      transform: scale(1.15);
    }
    .timeline-content {
      padding: 0.75rem 1rem;
      border-radius: 0.75rem;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.3s ease;
    }
    .timeline-item:hover .timeline-content {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(16, 185, 129, 0.2);
      transform: translateX(4px);
    }

    /* Micro-animações cards de stats */
    .stat-card {
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: default;
    }
    .stat-card:hover {
      transform: translateY(-4px) scale(1.03);
      background: rgba(255, 255, 255, 0.06);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
    .stat-card:hover .stat-icon {
      transform: scale(1.15) rotate(-5deg);
      box-shadow: 0 0 20px var(--icon-glow, rgba(59, 130, 246, 0.3));
    }
    .stat-icon {
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .stat-card:hover .stat-label {
      color: white;
    }
    .stat-label { transition: color 0.3s ease; }

    /* Glow colors para cada card */
    .stat-card[data-color="blue"]:hover { --tw-ring-color: rgba(59, 130, 246, 0.3); }
    .stat-card[data-color="blue"] { --icon-glow: rgba(59, 130, 246, 0.4); }
    .stat-card[data-color="amber"]:hover { --tw-ring-color: rgba(245, 158, 11, 0.3); }
    .stat-card[data-color="amber"] { --icon-glow: rgba(245, 158, 11, 0.4); }
    .stat-card[data-color="cyan"]:hover { --tw-ring-color: rgba(6, 182, 212, 0.3); }
    .stat-card[data-color="cyan"] { --icon-glow: rgba(6, 182, 212, 0.4); }
    .stat-card[data-color="emerald"]:hover { --tw-ring-color: rgba(16, 185, 129, 0.3); }
    .stat-card[data-color="emerald"] { --icon-glow: rgba(16, 185, 129, 0.4); }

    /* Barra de progresso geral */
    @keyframes progress-fill {
      from { width: 0; }
      to { width: 100%; }
    }
    .progress-bar-fill {
      animation: progress-fill 1.5s ease-out forwards;
      animation-delay: 0.3s;
      width: 0;
    }

    /* Carrossel de cursos relacionados -- responsivo (igual home) */
    .area-carousel-track { display: flex; gap: 16px; }
    .area-card { flex-shrink: 0; width: 100%; }
    @media (min-width: 640px) { .area-card { width: calc((100% - 16px) / 2); } }
    @media (min-width: 1024px) { .area-card { width: calc((100% - 48px) / 4); } }

    @media (prefers-reduced-motion: reduce) {
      .animate-fade-in-up, .btn-glow, .card-shine::after, .option-selected { animation: none !important; opacity: 1 !important; transform: none !important; }
    }