/* Global Base Setup */
    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
      background-color: #FAF6F0;
      color: #332F3A;
      overflow-x: hidden;
    }
    
    /* Ensure form inputs, dropdowns, and buttons inherit the beautiful sans-serif font stack */
    input, select, textarea, button {
      font-family: inherit;
    }
    
    .font-title {
      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
    }

    /* Claymorphism Animations */
    @keyframes clay-float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(2deg); }
    }
    
    @keyframes clay-float-delayed {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(-2deg); }
    }
    
    @keyframes clay-float-slow {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-30px) rotate(4deg); }
    }
    
    @keyframes clay-breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.03); }
    }

    .animate-clay-float {
      animation: clay-float 8s ease-in-out infinite;
    }

    .animate-clay-float-delayed {
      animation: clay-float-delayed 10s ease-in-out infinite;
    }

    .animate-clay-float-slow {
      animation: clay-float-slow 12s ease-in-out infinite;
    }

    .animate-clay-breathe {
      animation: clay-breathe 6s ease-in-out infinite;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: #FAF6F0;
    }
    ::-webkit-scrollbar-thumb {
      background: #CDC6D9;
      border-radius: 10px;
      border: 2px solid #FAF6F0;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #FFAF66;
    }

    /* Looping Video Background Integration */
    #bg-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-cover: cover;
      z-index: -30;
      pointer-events: none;
    }

    /* Interactive Canvas Styling */
    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -20;
      pointer-events: none;
    }

    /* Custom Cursor Magnet */
    .custom-cursor {
      width: 8px;
      height: 8px;
      background: #ff9900;
      border-radius: 50%;
      position: fixed;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 9999;
      transition: width 0.2s, height 0.2s, background 0.2s;
    }

    .custom-cursor-ring {
      width: 32px;
      height: 32px;
      border: 2px solid rgba(255, 153, 0, 0.4);
      border-radius: 50%;
      position: fixed;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 9998;
      transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Hover effect for buttons/cards */
    a:hover ~ .custom-cursor,
    button:hover ~ .custom-cursor,
    .clay-card-interactive:hover ~ .custom-cursor {
      scale: 1.5;
      background: #ff9900;
    }
    
    a:hover ~ .custom-cursor-ring,
    button:hover ~ .custom-cursor-ring,
    .clay-card-interactive:hover ~ .custom-cursor-ring {
      width: 44px;
      height: 44px;
      border-color: rgba(255, 153, 0, 0.7);
      background: rgba(255, 153, 0, 0.05);
    }

    /* Dynamic design system support for Safari */
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      .backdrop-blur-clay {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .animate-clay-float,
      .animate-clay-float-delayed,
      .animate-clay-float-slow,
      .animate-clay-breathe {
        animation: none !important;
      }
      .custom-cursor-ring {
        transition: none !important;
      }
    }