/* Custom CSS for preview */

@layer base {
  body { 
    background-color: #0A0A0A; 
    color: #e5e2e1; 
  }
}

@layer components {
  .bg-light-section { 
    background-color: #F2F2F0; 
    color: #0A0A0A; 
  }
  .bg-light-section .text-on-surface-variant { 
    color: #454747; 
  }
  .bg-light-section .border-white\/10 { 
    border-color: rgba(0,0,0,0.1); 
  }

  .material-symbols-outlined { 
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
  }
  
  .hex-bg { 
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 
  }
  
  .divider-thin { 
    background: rgba(255, 255, 255, 0.1); 
  }
  
  .glass-header { 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
  }
  
  .bento-card { 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    background: #111318; 
    border-radius: 16px; 
  }
  
  .bg-light-section .bento-card { 
    border: 1px solid rgba(0, 0, 0, 0.08); 
    background: #ffffff; 
  }
  
  .red-btn { 
    background-color: #d32f2f; 
    color: white; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    transition: all 0.3s ease; 
  }
  
  .red-btn:hover { 
    background-color: #b71c1c; 
    transform: translateY(-2px); 
  }
  
  /* Form Status */
  .form-success-msg {
    display: none;
    color: #ffb3ac;
    margin-top: 10px;
    font-size: 0.875rem;
  }
  
  /* Scroll Reveal */
  .reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s ease-out; 
  }
  .reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
  }
  
  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }
}