body {
      font-family: 'Inter', system-ui, sans-serif;
      background-color: #09090b;
      color: #e4e4e7;
      overflow-x: hidden;
  }

  .font-serif {
      font-family: 'Cormorant Garamond', Georgia, serif;
  }

  /* Starfield canvas */
  #starfield {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
      width: 8px;
  }

  ::-webkit-scrollbar-track {
      background: #09090b;
  }

  ::-webkit-scrollbar-thumb {
      background: #3f3f46;
      border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #52525b;
  }

  /* Glass morphism */
  .glass {
      background: rgba(24, 24, 27, 0.6);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .glass-strong {
      background: rgba(24, 24, 27, 0.85);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(212, 168, 67, 0.1);
  }

  /* Gradient text */
  .text-gradient {
      background: linear-gradient(135deg, #d4a843 0%, #f0dcac 50%, #d4a843 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  /* Glow effects */
  .glow-gold {
      box-shadow: 0 0 40px rgba(212, 168, 67, 0.15);
  }

  .glow-gold-strong {
      box-shadow: 0 0 60px rgba(212, 168, 67, 0.25), 0 0 120px rgba(212, 168, 67, 0.1);
  }

  /* Tech badge shimmer */
  .tech-shimmer {
      background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.1), transparent);
      background-size: 200% 100%;
      animation: shimmer 3s linear infinite;
  }

  /* Section reveal */
  .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.active {
      opacity: 1;
      transform: translateY(0);
  }

  /* Card hover */
  .service-card {
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 168, 67, 0.08);
  }

  /* Timeline connector */
  .timeline-line {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, #d4a843, transparent);
      transform: translateX(-50%);
  }

  @media (max-width: 768px) {
      .timeline-line {
          left: 20px;
      }
  }

  /* Python/Django orbit animation */
  .orbit-container {
      position: relative;
      width: 200px;
      height: 200px;
  }

  .orbit-ring {
      position: absolute;
      border: 1px solid rgba(212, 168, 67, 0.2);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  .orbit-dot {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #d4a843;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(212, 168, 67, 0.5);
  }

  /* Contact form styling */
  .form-input {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
  }

  .form-input:focus {
      outline: none;
      border-color: rgba(212, 168, 67, 0.4);
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 20px rgba(212, 168, 67, 0.05);
  }

  /* Navigation */
  .nav-link {
      position: relative;
  }

  .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: #d4a843;
      transition: width 0.3s ease;
  }

  .nav-link:hover::after {
      width: 100%;
  }

  .form-input {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
      color: #e4e4e7;
  }

  /* Forçar a cor de fundo e texto no Select */
  .form-input select,
  .form-input option {
      background-color: #3f3f46
          /*rgba(255,255,255,0.03)*/
          !important;
      color: #e4e4e7 !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
  }

  .form-input select:focus,
  .form-input option:focus {
      background-color: #3f3f46
          /*rgba(255,255,255,0.05)*/
          !important;
      border-color: rgba(212, 168, 67, 0.4) !important;
      outline: none;
      box-shadow: 0 0 20px rgba(212, 168, 67, 0.05);
  }

  /* Opcional: Cor do texto do select quando selecionado */
  .form-input option {
      color: #e4e4e7;
      background-color: #0f0f12;
      /* Fundo escuro para as opções */
  }