/* Updated styles to match reference design with cyan/yellow color scheme */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
  }
  
  /* Custom animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade-in {
    animation: fadeIn 0.6s ease-out;
  }
  
  /* Card flip animation */
  @keyframes cardFlip {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(180deg);
    }
  }
  
  .card-flip {
    animation: cardFlip 0.6s ease;
  }
  
  /* Smooth expand animation */
  @keyframes expandHeight {
    from {
      max-height: 0;
      opacity: 0;
    }
    to {
      max-height: 500px;
      opacity: 1;
    }
  }
  
  .value-details,
  .solution-details,
  .team-bio,
  .story-full {
    animation: expandHeight 0.4s ease-out;
  }
  
  /* Form focus states */
  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
  }
  
  /* Custom scrollbar with cyan theme */
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #06b6d4;
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #0891b2;
  }
  
  /* Button hover effects */
  button,
  .btn {
    transition: all 0.3s ease;
  }
  
  /* Image lazy loading effect */
  img {
    transition: opacity 0.3s ease, transform 0.5s ease;
  }
  
  img[loading="lazy"] {
    opacity: 0;
  }
  
  img[loading="lazy"].loaded {
    opacity: 1;
  }
  
  /* Mobile menu transition */
  #mobileMenu {
    transition: max-height 0.3s ease-in-out;
  }
  
  /* Enhanced card hover effects matching reference design */
  .value-card,
  .solution-card,
  .team-card,
  .story-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  }
  
  .value-card:hover,
  .solution-card:hover,
  .team-card:hover,
  .story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.15);
  }
  
  /* Yellow accent glow effect */
  .value-card:hover .w-16.bg-yellow-400,
  .solution-card:hover {
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
  }
  
  /* Form input animations */
  input,
  textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  input:focus,
  textarea:focus {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
  }
  
  /* Cookie popup */
  #cookiePopup {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  /* Gradient text effect with cyan theme */
  .gradient-text {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Section spacing */
  section {
    position: relative;
  }
  
  /* Yellow decorative shapes */
  .yellow-shape {
    background: #fbbf24;
    border-radius: 9999px;
    opacity: 0.8;
  }
  
  /* Rounded corners matching reference design */
  .rounded-3xl {
    border-radius: 1.5rem;
  }
  
  /* Responsive utilities */
  @media (max-width: 768px) {
    .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  
    h1 {
      font-size: 2rem;
    }
  
    h2 {
      font-size: 1.75rem;
    }
  
    h3 {
      font-size: 1.5rem;
    }
  }
  
  /* Loading state */
  .loading {
    pointer-events: none;
    opacity: 0.6;
  }
  
  /* Accessibility improvements */
  a:focus,
  button:focus {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
  }
  
  /* Interactive cursor indicators */
  .value-card,
  .solution-card,
  .team-card,
  .story-card {
    cursor: pointer;
    user-select: none;
  }
  
  /* Print styles */
  @media print {
    header,
    footer,
    #cookiePopup,
    #mobileMenuBtn {
      display: none;
    }
  }
  
  /* Smooth transitions for all interactive elements */
  * {
    transition-property: color, background-color, border-color, transform, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
  
  /* Ring effect for active cards */
  .ring-2 {
    box-shadow: 0 0 0 2px #06b6d4;
  }
  
  .ring-cyan-400 {
    --tw-ring-color: #22d3ee;
  }