/* Critical CSS inlined for faster rendering */
        :root {
          --primary-blue: #3b82f6;
          --secondary-blue: #1d4ed8;
          --light-blue: #dbeafe;
          --primary-text: #1f2937;
          --secondary-text: #4b5563;
      }

      body {
          font-family: 'Inter', sans-serif;
          scroll-behavior: smooth;
          color: var(--primary-text);
          opacity: 0;
          transition: opacity 0.4s ease-in;
      }

      body.loaded {
          opacity: 1;
      }

      /* Optimization: reduce CLS (Cumulative Layout Shift) */
      .hero-image-container {
          aspect-ratio: 16/9;
      }

      /* Focus styles for accessibility */
      a:focus, button:focus {
          outline: 2px solid var(--primary-blue);
          outline-offset: 2px;
      }

      /* Skip to main content link for accessibility */
      .skip-link {
          position: absolute;
          top: -40px;
          left: 0;
          background: var(--primary-blue);
          color: white;
          padding: 8px;
          z-index: 100;
          transition: top 0.3s;
      }

      .skip-link:focus {
          top: 0;
      }

      .gradient-text {
          background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      .bg-gradient {
          background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
      }

      .btn-primary {
          background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
          transition: all 0.3s ease;
      }

      .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
      }

      .card {
          transition: all 0.3s ease;
          will-change: transform;
      }

      .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }

      .feature-icon {
          background: linear-gradient(135deg, var(--light-blue), #e0f2fe);
          color: var(--primary-blue);
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1rem;
          font-size: 1.5rem;
      }

      .pricing-card {
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
          will-change: transform;
      }

      .pricing-card:hover {
          transform: scale(1.03);
      }

      .pricing-popular {
          position: absolute;
          top: 12px;
          right: -35px;
          transform: rotate(45deg);
          background: var(--primary-blue);
          color: white;
          padding: 5px 40px;
          font-size: 0.8rem;
          font-weight: 600;
      }

      .nav-link {
          position: relative;
      }

      .nav-link::after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -4px;
          left: 0;
          background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
          transition: width 0.3s ease;
      }

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

      /* Floating animation */
      @keyframes float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-15px); }
          100% { transform: translateY(0px); }
      }

      .float-animation {
          animation: float 6s ease-in-out infinite;
      }

      /* Pulse animation for CTA */
      @keyframes pulse {
          0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
          70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
          100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
      }

      .pulse-animation {
          animation: pulse 2s infinite;
      }

      /* Code block styling */
      .code-block {
          background-color: #1e293b;
          color: #e2e8f0;
          border-radius: 8px;
          padding: 20px;
          font-family: monospace;
          position: relative;
      }

      .code-block pre {
          margin: 0;
          white-space: pre-wrap;
      }

      .code-language {
          position: absolute;
          top: 10px;
          right: 10px;
          color: #64748b;
          font-size: 0.75rem;
      }

      /* Mobile menu */
      .mobile-menu {
          transition: transform 0.3s ease;
          transform: translateX(100%);
      }

      .mobile-menu.open {
          transform: translateX(0);
      }

      /* Hero Section Styles */
      @keyframes float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-15px); }
          100% { transform: translateY(0px); }
      }

      .badge-float-1 {
          animation: float 7s ease-in-out infinite;
      }

      .badge-float-2 {
          animation: float 9s ease-in-out infinite 1s;
      }

      .badge-float-3 {
          animation: float 8s ease-in-out infinite 2s;
      }

      @keyframes gradient-conic {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      .bg-gradient-conic {
          background-image: conic-gradient(var(--tw-gradient-stops));
      }

      /* Animation d'écriture */
      .typing-cursor::after {
          content: '|';
          animation: blink 1s step-end infinite;
      }

      @keyframes blink {
          from, to { opacity: 1; }
          50% { opacity: 0; }
      }

      .typing-effect, .typing-delay-1, .typing-delay-2, .typing-delay-3,
      .typing-delay-4, .typing-delay-5, .typing-delay-6, .typing-delay-7 {
          opacity: 0;
          animation: typeIn 0.5s forwards;
      }

      .typing-delay-1 { animation-delay: 0.5s; }
      .typing-delay-2 { animation-delay: 1s; }
      .typing-delay-3 { animation-delay: 1.5s; }
      .typing-delay-4 { animation-delay: 2s; }
      .typing-delay-5 { animation-delay: 2.5s; }
      .typing-delay-6 { animation-delay: 3s; }
      .typing-delay-7 { animation-delay: 3.5s; }

      @keyframes typeIn {
          to { opacity: 1; }
      }

      /* Animation des logos */
      .logos-slider {
          animation: scroll 30s linear infinite;
      }

      @keyframes scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(calc(-120px * 5 - 3rem * 5)); }
      }

      /* Z-index corrections */
      .z-10 { z-index: 10; }
      .z-5 { z-index: 5; }
      .-z-1 { z-index: -1; }
      .-z-5 { z-index: -5; }
      .-z-10 { z-index: -10; }

      /* Loading animation */
      .loader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: white;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
          transition: opacity 0.5s ease, visibility 0.5s ease;
      }

      .loader.hidden {
          opacity: 0;
          visibility: hidden;
      }

      .loader-circle {
          width: 50px;
          height: 50px;
          border: 4px solid #f3f3f3;
          border-top: 4px solid var(--primary-blue);
          border-radius: 50%;
          animation: spin 1s linear infinite;
      }

      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      /* Features section enhancements */
      .feature-card {
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          border-radius: 1.5rem;
          overflow: hidden;
          background: white;
      }

      .feature-card:hover {
          transform: translateY(-12px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
      }

      .feature-card:hover .feature-icon {
          transform: scale(1.1);
          background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
          color: white;
      }

      .feature-icon {
          transition: all 0.3s ease;
      }

      /* Models section enhancements */
      .model-card {
          position: relative;
          overflow: hidden;
          transition: all 0.3s ease;
          border-radius: 1rem;
          z-index: 1;
      }

      .model-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(29, 78, 216, 0.1));
          z-index: -1;
          opacity: 0;
          transition: opacity 0.3s ease;
      }

      .model-card:hover::before {
          opacity: 1;
      }

      .model-card .model-shine {
          position: absolute;
          top: -100%;
          left: -100%;
          width: 80%;
          height: 80%;
          background: linear-gradient(
              135deg,
              rgba(255, 255, 255, 0) 20%,
              rgba(255, 255, 255, 0.4) 50%,
              rgba(255, 255, 255, 0) 80%
          );
          transform: rotate(45deg);
          transition: all 0.6s ease;
      }

      .model-card:hover .model-shine {
          top: 100%;
          left: 100%;
      }

      /* Pricing section enhancements */
      .pricing-card {
          border-radius: 1.5rem;
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .pricing-card:hover {
          transform: translateY(-10px) scale(1.02);
      }

      .pricing-marker {
          position: relative;
          padding-left: 25px;
      }

      .pricing-marker::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
          background-color: rgba(59, 130, 246, 0.1);
          border-radius: 50%;
      }

      .pricing-marker::after {
          content: '✓';
          position: absolute;
          left: 5px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--primary-blue);
          font-size: 0.8rem;
      }

      /* FAQ section enhancements */
      .faq-item {
          border-radius: 1rem;
          overflow: hidden;
          transition: all 0.3s ease;
          background-color: white;
      }

      .faq-question {
          user-select: none;
      }

      .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
          opacity: 0;
          margin-top: 0;
      }

      .faq-answer.active {
          max-height: 500px;
          opacity: 1;
          margin-top: 1rem;
      }

      /* Testimonial section enhancements */
      .testimonial-card {
          position: relative;
          overflow: hidden;
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .testimonial-card::before {
          content: "“";
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 120px;
          font-family: serif;
          line-height: 1;
          color: rgba(59, 130, 246, 0.1);
          z-index: 0;
      }

      .testimonial-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
      }

      /* 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;
          }
      }

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

      ::-webkit-scrollbar-track {
          background: #f1f5f9;
      }

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

      ::-webkit-scrollbar-thumb:hover {
          background: #94a3b8;
      }