html {
    scroll-behavior: smooth;
}
.animated-gradient {
    filter: blur(120px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Mobile menu styles */
  #mobile-menu {
      transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
      transform-origin: top center;
      width: calc(100% - 2rem);
      margin: 0.5rem auto;
      opacity: 1;
      transform: translateY(0) scaleY(1);
      visibility: visible;
  }
  
  #mobile-menu.hidden {
      opacity: 0;
      transform: translateY(-10px) scaleY(0.95);
      visibility: hidden;
      pointer-events: none;
  }
  
  /* Mobile menu items animation */
  #mobile-menu .space-y-1 > a {
      transition: all 0.2s ease-in-out;
      transform: translateX(0);
  }
  
  #mobile-menu.hidden .space-y-1 > a {
      transform: translateX(-20px);
      opacity: 0;
  }
  
  /* Staggered animation for menu items */
  #mobile-menu .space-y-1 > a:nth-child(1) { transition-delay: 0.05s; }
  #mobile-menu .space-y-1 > a:nth-child(2) { transition-delay: 0.1s; }
  #mobile-menu .space-y-1 > a:nth-child(3) { transition-delay: 0.15s; }
  #mobile-menu .space-y-1 > a:nth-child(4) { transition-delay: 0.2s; }
  #mobile-menu .space-y-1 > a:nth-child(5) { transition-delay: 0.25s; }
  
  /* Mobile menu button animation */
  #mobile-menu-button {
      transition: transform 0.2s ease-in-out;
  }
  
  #mobile-menu-button:active {
      transform: scale(0.95);
  }
  
  .blob {
      position: absolute;
      border-radius: 9999px;
      opacity: 0.6;
  }
  
  /* Responsive blob sizes */
  @media (max-width: 640px) {
      .blob {
          transform: scale(0.6);
      }
      
      .animated-gradient {
          filter: blur(80px);
      }
  }
  
  .blob:nth-child(1) {
      width: 750px;
      height: 750px;
      background-color: #5f27cd;
      animation: move-blob-1 18s infinite alternate;
      top: 20%;
      left: 25%;
  }
  
  .blob:nth-child(2) {
      width: 550px;
      height: 550px;
      background-color: #00b4d8;
      animation: move-blob-2 22s infinite alternate;
      top: 30%;
      left: 55%;
  }
  
  .blob:nth-child(3) {
      width: 450px;
      height: 450px;
      background-color: #240e5a;
      animation: move-blob-3 16s infinite alternate;
      top: 50%;
      left: 35%;
  }
  
  .blob:nth-child(4) {
      width: 500px;
      height: 500px;
      background-color: #0d042b;
      animation: move-blob-4 20s infinite alternate;
      top: 60%;
      left: 65%;
  }
  
  .blob:nth-child(5) {
      width: 350px;
      height: 350px;
      background-color: #6366f1; /* A slightly brighter purple for accent */
      animation: move-blob-5 25s infinite alternate;
      top: 40%;
      left: 15%;
  }
  
  .blob:nth-child(6) {
      width: 400px;
      height: 400px;
      background-color: #4f46e5;
      animation: move-blob-6 21s infinite alternate;
      top: 70%;
      left: 25%;
  }
  
  .blob:nth-child(7) {
      width: 300px;
      height: 300px;
      background-color: #c7d2fe; /* A light accent color */
      animation: move-blob-7 26s infinite alternate;
      top: 15%;
      left: 60%;
  }
  
  .blob:nth-child(8) {
      width: 450px;
      height: 450px;
      background-color: #5f27cd;
      animation: move-blob-8 24s infinite alternate;
      top: 35%;
      left: 45%;
  }
  
  .blob:nth-child(9) {
      width: 350px;
      height: 350px;
      background-color: #00b4d8;
      animation: move-blob-9 28s infinite alternate;
      top: 65%;
      left: 50%;
  }
  
  .blob:nth-child(10) {
      width: 250px;
      height: 250px;
      background-color: #240e5a;
      animation: move-blob-10 32s infinite alternate;
      top: 80%;
      left: 30%;
  }
  
  .blob:nth-child(11) {
      width: 500px;
      height: 500px;
      background-color: #0d042b;
      animation: move-blob-11 23s infinite alternate;
      top: 55%;
      left: 15%;
  }
  
  .blob:nth-child(12) {
      width: 200px;
      height: 200px;
      background-color: #6366f1;
      animation: move-blob-12 27s infinite alternate;
      top: 25%;
      left: 75%;
  }
  
  .blob:nth-child(13) {
      width: 600px;
      height: 600px;
      background-color: #4f46e5;
      animation: move-blob-13 25s infinite alternate;
      top: 75%;
      left: 60%;
  }
  
  .blob:nth-child(14) {
      width: 300px;
      height: 300px;
      background-color: #c7d2fe;
      animation: move-blob-14 30s infinite alternate;
      top: 10%;
      left: 40%;
  }
  
  @keyframes move-blob-1 {
    0% {
      transform: translate(-20%, -15%) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(30%, 20%) scale(1.3) rotate(180deg);
    }
    100% {
      transform: translate(-10%, 30%) scale(0.9) rotate(360deg);
    }
  }
  
  @keyframes move-blob-2 {
    0% {
      transform: translate(20%, 15%) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(-30%, -20%) scale(0.7) rotate(180deg);
    }
    100% {
      transform: translate(10%, -30%) scale(1.2) rotate(360deg);
    }
  }
  
  @keyframes move-blob-3 {
    0% {
      transform: translate(25%, -10%) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(-15%, 20%) scale(1.2) rotate(180deg);
    }
    100% {
      transform: translate(20%, -25%) scale(0.8) rotate(360deg);
    }
  }
  
  @keyframes move-blob-4 {
      0% {
          transform: translate(20%, 30%) scale(1) rotate(0deg);
      }
      50% {
          transform: translate(-20%, -15%) scale(1.3) rotate(180deg);
      }
      100% {
          transform: translate(25%, 20%) scale(0.9) rotate(360deg);
      }
  }
  
  @keyframes move-blob-5 {
      0% {
          transform: translate(-15%, 10%) scale(0.9) rotate(0deg);
      }
      50% {
          transform: translate(25%, -20%) scale(1.2) rotate(180deg);
      }
      100% {
          transform: translate(-10%, 15%) scale(1) rotate(360deg);
      }
  }
  
  @keyframes move-blob-6 {
      0% {
          transform: translate(15%, 20%) scale(1) rotate(0deg);
      }
      50% {
          transform: translate(-25%, -10%) scale(0.8) rotate(180deg);
      }
      100% {
          transform: translate(10%, 25%) scale(1.1) rotate(360deg);
      }
  }
  
  @keyframes move-blob-7 {
      0% {
          transform: translate(-10%, 20%) scale(1.1) rotate(0deg);
      }
      50% {
          transform: translate(20%, -15%) scale(0.9) rotate(180deg);
      }
      100% {
          transform: translate(-15%, 25%) scale(1.2) rotate(360deg);
      }
  }
  
  @keyframes move-blob-8 {
      0% { transform: translate(-10%, 20%) scale(1) rotate(0deg); }
      50% { transform: translate(20%, -10%) scale(0.8) rotate(180deg); }
      100% { transform: translate(-15%, 25%) scale(1.1) rotate(360deg); }
  }
  
  @keyframes move-blob-9 {
      0% { transform: translate(20%, -15%) scale(1) rotate(0deg); }
      50% { transform: translate(-10%, 25%) scale(1.2) rotate(180deg); }
      100% { transform: translate(25%, -10%) scale(0.9) rotate(360deg); }
  }
  
  @keyframes move-blob-10 {
      0% { transform: translate(15%, 25%) scale(1) rotate(0deg); }
      50% { transform: translate(-20%, -10%) scale(0.9) rotate(180deg); }
      100% { transform: translate(25%, 20%) scale(1.1) rotate(360deg); }
  }
  
  @keyframes move-blob-11 {
      0% { transform: translate(25%, 15%) scale(1) rotate(0deg); }
      50% { transform: translate(-15%, 20%) scale(1.3) rotate(180deg); }
      100% { transform: translate(20%, -25%) scale(0.8) rotate(360deg); }
  }
  
  @keyframes move-blob-12 {
      0% { transform: translate(-20%, 15%) scale(1) rotate(0deg); }
      50% { transform: translate(25%, -10%) scale(0.7) rotate(180deg); }
      100% { transform: translate(-15%, 25%) scale(1.2) rotate(360deg); }
  }
  
  @keyframes move-blob-13 {
      0% { transform: translate(20%, 25%) scale(1) rotate(0deg); }
      50% { transform: translate(-15%, -10%) scale(1.2) rotate(180deg); }
      100% { transform: translate(25%, 20%) scale(0.9) rotate(360deg); }
  }
  
  @keyframes move-blob-14 {
      0% { transform: translate(10%, -15%) scale(1) rotate(0deg); }
      50% { transform: translate(-25%, 25%) scale(0.8) rotate(180deg); }
      100% { transform: translate(15%, -10%) scale(1.1) rotate(360deg); }
  }
  
  .architect-card {
      border: 1px solid #e5e7eb;
      background-clip: padding-box;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .architect-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .icon-bg {
      width: 80px;
      height: 80px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #6366f1, #818cf8);
      box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
  }
  
  .footer-decoration {
      filter: blur(100px);
      opacity: 0.3;
  }
  
  .footer-blob {
      position: absolute;
      border-radius: 9999px;
      background-color: #5f27cd;
  }
  
  .footer-blob:nth-child(1) {
      width: 400px;
      height: 400px;
      top: 20%;
      left: 80%;
      animation: footer-float-1 20s infinite ease-in-out;
  }
  
  .footer-blob:nth-child(2) {
      width: 300px;
      height: 300px;
      top: 60%;
      left: 10%;
      animation: footer-float-2 25s infinite ease-in-out;
  }
  
  .footer-blob:nth-child(3) {
      width: 250px;
      height: 250px;
      top: 10%;
      left: 30%;
      animation: footer-float-3 30s infinite ease-in-out;
  }
  
  @keyframes footer-float-1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(-20%, 10%) scale(1.1); }
      66% { transform: translate(10%, -15%) scale(0.9); }
  }
  
  @keyframes footer-float-2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(15%, -20%) scale(1.2); }
  }
  
  @keyframes footer-float-3 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(20px, -30px) scale(1.1); }
  }
  
  /* Contact section styles */
  .contact-decoration {
    filter: blur(80px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .contact-blob {
    position: absolute;
    border-radius: 9999px;
    opacity: 0.4;
  }
  
  .contact-blob:nth-child(1) {
    width: 600px;
    height: 600px;
    background-color: #5f27cd;
    animation: contact-float-1 20s infinite alternate;
    top: 10%;
    left: 10%;
  }
  
  .contact-blob:nth-child(2) {
    width: 400px;
    height: 400px;
    background-color: #00b4d8;
    animation: contact-float-2 25s infinite alternate;
    top: 60%;
    right: 15%;
  }
  
  .contact-blob:nth-child(3) {
    width: 500px;
    height: 500px;
    background-color: #4f46e5;
    animation: contact-float-3 22s infinite alternate;
    bottom: 20%;
    left: 20%;
  }
  
  @keyframes contact-float-1 {
    0% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(40px, -30px) scale(1.2) rotate(180deg);
    }
    100% {
      transform: translate(-20px, 40px) scale(0.8) rotate(360deg);
    }
  }
  
  @keyframes contact-float-2 {
    0% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(-50px, 20px) scale(0.9) rotate(180deg);
    }
    100% {
      transform: translate(30px, -40px) scale(1.1) rotate(360deg);
    }
  }
  
  @keyframes contact-float-3 {
    0% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(30px, -50px) scale(1.3) rotate(180deg);
    }
    100% {
      transform: translate(-40px, 30px) scale(0.7) rotate(360deg);
    }
  }
  
  /* Contact form animations */
  #contact form input:focus,
  #contact form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(214, 198, 249, 0.3);
  }
  
  #contact .bg-white\/5 {
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
  }
  
  #contact .bg-white\/5:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  
  /* Contact info card animations */
  #contact .flex-shrink-0 {
    transition: all 0.3s ease;
  }
  
  #contact .flex-shrink-0:hover {
    transform: scale(1.1) rotate(5deg);
  }
  
    /* Responsive contact section */
  @media (max-width: 768px) {
    .contact-blob {
      transform: scale(0.8);
    }
    .contact-decoration {
      filter: blur(80px);
    }
    #contact .grid {
      gap: 2rem;
      grid-template-columns: 1fr;
    }
  }

  /* Hide cursor only on touch devices (actual mobile/tablet) */
  @media (hover: none) and (pointer: coarse) {
    .cursor {
      display: none;
    }

    body {
      cursor: auto;
    }
  }
  
  nav {
      transition: transform 0.3s ease-in-out;
  }
  
  /* Custom Cursor Styles */
  body {
      cursor: none;
  }
  
  .cursor {
      position: fixed;
      z-index: 1000;
      pointer-events: none;
      border-radius: 50%;
      top: 0;
      left: 0;
      will-change: transform;
      transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
  }
  
  #cursor-dot {
      width: 8px;
      height: 8px;
      background-color: white;
  }
  
  #cursor-outline {
      width: 40px;
      height: 40px;
      border: 2px solid white;
      background-color: transparent;
  }

  /* New Hero Background for Careers Page */
  .hero-grid-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #000000;
  }

  .grid-container {
      position: absolute;
      inset: -100px;
      background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
      background-size: 50px 50px;
      will-change: transform;
  }

  @keyframes pan-grid {
      from {
          transform: translate(0, 0);
      }
      to {
          transform: translate(-50px, -50px);
      }
  }

  .glow-container {
      position: absolute;
      inset: 0;
  }

  .glow {
      position: absolute;
      width: 800px;
      height: 800px;
      border-radius: 9999px;
      filter: blur(150px);
      opacity: 0.15;
      background-color: #6366f1;
  }

  .glow:nth-child(2) {
      background-color: #a855f7;
  }

  @keyframes spin-glow {
      from {
          transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
      }
      to {
          transform: translate(50%, 50%) rotate(360deg) scale(1.2);
      }
  }