/* Stripe-inspired Design System */
        :root {
            --stripe-primary: var(--global--color-primary);
            --stripe-secondary: #0a2540;
            --stripe-accent: #00d4ff;
            --stripe-success: #32d583;
            --stripe-warning: #f6ad55;
            --stripe-error: #f56565;
            --stripe-gray-50: #f7fafc;
            --stripe-gray-100: #edf2f7;
            --stripe-gray-200: #e2e8f0;
            --stripe-gray-300: #cbd5e0;
            --stripe-gray-400: #a0aec0;
            --stripe-gray-500: #718096;
            --stripe-gray-600: #4a5568;
            --stripe-gray-700: #2d3748;
            --stripe-gray-800: #1a202c;
            --stripe-gray-900: #171923;
            --stripe-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --stripe-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --stripe-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --stripe-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --stripe-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

       /* Global Styles */
       body {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
           line-height: 1.6;
           color: var(--stripe-gray-800);
           background-color: white;
       }

                       /* Hero Section - Stripe Style */
        .intro-hero {
            background: url('/static/portal/picture/cover1.jpg') center/cover;
            color: white;
            padding: 120px 0 160px;
            position: relative;
            overflow: hidden;
        }

        .intro-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
        }

       .intro-hero-content {
           position: relative;
           z-index: 2;
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 24px;
       }

       .intro-hero h1 {
           font-size: clamp(2.5rem, 5vw, 4rem);
           font-weight: 700;
           margin-bottom: 24px;
           line-height: 1.1;
           letter-spacing: -0.02em;
           color: white;
       }

       .intro-hero p {
           font-size: clamp(1.125rem, 2vw, 1.25rem);
           opacity: 0.9;
           margin-bottom: 48px;
           max-width: 600px;
           line-height: 1.6;
           color: white;
       }

               /* Navigation Cards - Stripe Style */
        .intro-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            margin-top: 64px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .intro-nav-link {
            flex: 1;
            min-width: 200px;
            max-width: 220px;
        }

       .intro-nav-link {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           padding: 32px;
           background: rgba(255, 255, 255, 0.1);
           border: 1px solid rgba(255, 255, 255, 0.2);
           border-radius: 12px;
           color: white;
           text-decoration: none;
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           backdrop-filter: blur(10px);
       }

       .intro-nav-link:hover {
           background: rgba(255, 255, 255, 0.15);
           border-color: rgba(255, 255, 255, 0.3);
           transform: translateY(-4px);
           color: white;
           text-decoration: none;
           box-shadow: var(--stripe-shadow-xl);
       }

       .intro-nav-link i {
           font-size: 2rem;
           margin-bottom: 16px;
           opacity: 0.9;
       }

               .intro-nav-link span {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .intro-nav-link small {
            font-size: 0.875rem;
            opacity: 0.8;
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .intro-nav-link::after {
            content: '→';
            font-size: 1.25rem;
            margin-top: auto;
            opacity: 0.7;
            transition: transform 0.3s ease;
        }

        .intro-nav-link:hover::after {
            transform: translateX(4px);
        }

               /* Section Dividers - Stripe Style */
        .section-divider {
            position: relative;
            height: 120px;
            background: var(--stripe-gray-50);
            transform: skewY(-4deg);
            transform-origin: 0 0;
            margin-top: -60px;
            margin-bottom: -60px;
        }

        .section-divider::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--stripe-gray-50);
            transform: skewY(4deg);
            transform-origin: 0 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Section Divider for dark sections */
        .section-divider-dark {
            position: relative;
            height: 120px;
            background: var(--stripe-gray-900);
            transform: skewY(-4deg);
            transform-origin: 0 0;
            margin-top: -60px;
            margin-bottom: -60px;
        }

        .section-divider-dark::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--stripe-gray-900);
            transform: skewY(4deg);
            transform-origin: 0 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Section Divider for primary sections */
        .section-divider-primary {
            position: relative;
            height: 120px;
            background: var(--stripe-primary);
            transform: skewY(-4deg);
            transform-origin: 0 0;
            margin-top: -60px;
            margin-bottom: -60px;
        }

        .section-divider-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--stripe-primary);
            transform: skewY(4deg);
            transform-origin: 0 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Responsive skew angles for different screen widths */
        @media (min-width: 1920px) {
            .section-divider,
            .section-divider-dark,
            .section-divider-primary {
                transform: skewY(-2deg);
            }

            .section-divider::before,
            .section-divider-dark::before,
            .section-divider-primary::before {
                transform: skewY(2deg);
            }
        }

        @media (min-width: 2200px) {
            .section-divider,
            .section-divider-dark,
            .section-divider-primary {
                transform: skewY(-1.5deg);
            }

            .section-divider::before,
            .section-divider-dark::before,
            .section-divider-primary::before {
                transform: skewY(1.5deg);
            }
        }

        @media (min-width: 2400px) {
            .section-divider,
            .section-divider-dark,
            .section-divider-primary {
                transform: skewY(-1.2deg);
            }

            .section-divider::before,
            .section-divider-dark::before,
            .section-divider-primary::before {
                transform: skewY(1.2deg);
            }
        }

        @media (min-width: 2560px) {
            .section-divider,
            .section-divider-dark,
            .section-divider-primary {
                transform: skewY(-1deg);
            }

            .section-divider::before,
            .section-divider-dark::before,
            .section-divider-primary::before {
                transform: skewY(1deg);
            }
        }

        @media (min-width: 3840px) {
            .section-divider,
            .section-divider-dark,
            .section-divider-primary {
                transform: skewY(-0.5deg);
            }

            .section-divider::before,
            .section-divider-dark::before,
            .section-divider-primary::before {
                transform: skewY(0.5deg);
            }
        }

        /* Search Section - Stripe Style */
        .search-section {
            padding: 80px 0 160px;
            background: var(--stripe-gray-50);
        }



        .search-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 0 24px;
        }



       .search-title {
           font-size: clamp(2rem, 4vw, 3rem);
           font-weight: 700;
           color: var(--stripe-gray-900);
           margin-bottom: 16px;
           letter-spacing: -0.02em;
       }

       .search-subtitle {
           font-size: 1.125rem;
           color: var(--stripe-gray-600);
           margin-bottom: 48px;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
           line-height: 1.6;
       }

       .search-box {
           background: white;
           border: 2px solid var(--stripe-gray-200);
           border-radius: 12px;
           padding: 8px;
           box-shadow: var(--stripe-shadow-lg);
           display: flex;
           align-items: center;
           max-width: 600px;
           margin: 0 auto 48px;
           transition: all 0.3s ease;
       }

       .search-box:focus-within {
           border-color: var(--stripe-primary);
           box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
       }

       .search-input {
           flex: 1;
           border: none;
           padding: 16px 20px;
           font-size: 1.125rem;
           outline: none;
           background: transparent;
           color: var(--stripe-gray-800);
       }

       .search-input::placeholder {
           color: var(--stripe-gray-400);
       }

       .search-btn {
           background: var(--stripe-primary);
           color: white;
           border: none;
           padding: 16px 32px;
           border-radius: 8px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           font-size: 1rem;
       }

       .search-btn:hover {
           background: #5851ec;
           transform: translateY(-1px);
           box-shadow: var(--stripe-shadow-lg);
       }

               .search-features {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 48px;
            flex-wrap: nowrap;
        }

       .search-feature {
           display: flex;
           align-items: center;
           gap: 12px;
           color: var(--stripe-gray-600);
           font-size: 1rem;
           padding: 16px;
           border-radius: 8px;
           transition: all 0.3s ease;
       }

       .search-feature:hover {
           background: white;
           color: var(--stripe-gray-800);
           box-shadow: var(--stripe-shadow);
       }

       .search-feature i {
           color: var(--stripe-primary);
           font-size: 1.25rem;
       }

               /* Website Banner - Stripe Style */
        .website-banner {
            padding: 80px 0 160px;
            background: url('/static/portal/picture/cover2.jpg') center/cover;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .website-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
        }



               .website-content {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

       .website-title {
           font-size: clamp(2.5rem, 5vw, 3.5rem);
           font-weight: 700;
           margin-bottom: 24px;
           color: white;
           letter-spacing: -0.02em;
       }

       .website-subtitle {
           font-size: 1.25rem;
           opacity: 0.9;
           margin-bottom: 64px;
           color: white;
           line-height: 1.6;
       }

       .website-features {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 32px;
           margin-bottom: 64px;
       }

       .website-feature {
           text-align: center;
           padding: 32px 24px;
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 12px;
           transition: all 0.3s ease;
       }

       .website-feature:hover {
           background: rgba(255, 255, 255, 0.1);
           transform: translateY(-4px);
       }

       .website-feature i {
           font-size: 2.5rem;
           margin-bottom: 20px;
           color: var(--stripe-accent);
       }

       .website-feature h4 {
           font-size: 1.25rem;
           margin-bottom: 12px;
           color: white;
           font-weight: 600;
       }

       .website-feature p {
           font-size: 1rem;
           opacity: 0.8;
           color: white;
           line-height: 1.6;
       }

               .website-btn {
            background: var(--stripe-accent);
            color: var(--stripe-gray-900);
            border: none;
            padding: 16px 32px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            font-size: 1.125rem;
            margin: 0 0 0 auto;
            text-align: center;
            width: fit-content;
            align-self: flex-end;
        }

       .website-btn:hover {
           background: #00b8e6;
           color: var(--stripe-gray-900);
           transform: translateY(-2px);
           box-shadow: var(--stripe-shadow-lg);
       }

                               /* Products Section - Stripe Style */
         .products-section {
             padding: 80px 0 160px;
             background: white;
         }

                   .products-container {
              max-width: 1200px;
              margin: 0 auto;
              padding: 0 24px;
              position: relative;
              overflow: visible;
          }

                   .products-grid {
              display: flex;
              gap: 32px;
              margin-bottom: 48px;
              transition: transform 0.5s ease;
              transform: translateX(0);
              cursor: grab;
          }

          .products-grid:active {
              cursor: grabbing;
          }

         .products-grid .product-card {
             min-width: 350px;
             flex-shrink: 0;
         }

         .product-card {
             background: white;
             border: 1px solid var(--stripe-gray-200);
             border-radius: 16px;
             overflow: hidden;
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             text-decoration: none;
             color: inherit;
             box-shadow: var(--stripe-shadow);
         }

         .product-card:hover {
             border-color: var(--stripe-primary);
             box-shadow: var(--stripe-shadow-xl);
             transform: translateY(-8px);
             text-decoration: none;
             color: inherit;
         }

                   .product-image {
              width: 100%;
              height: 280px;
              background: url('/static/uploads/0d61f24c-1e92-4114-9319-4cda491a08e5.jpg') center/cover;
              position: relative;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .product-image-2 {
              background: url('/static/uploads/0d61f24c-1e92-4114-9319-4cda491a08e5.jpg') center/cover;
          }

          .product-image-3 {
              background: url('/static/uploads/0d61f24c-1e92-4114-9319-4cda491a08e5.jpg') center/cover;
          }

          .product-image-4 {
              background: url('/static/uploads/0d61f24c-1e92-4114-9319-4cda491a08e5.jpg') center/cover;
          }

          .product-image-5 {
              background: url('/static/uploads/0d61f24c-1e92-4114-9319-4cda491a08e5.jpg') center/cover;
          }

          .product-image-6 {
              background: url('/static/uploads/0d61f24c-1e92-4114-9319-4cda491a08e5.jpg') center/cover;
          }

         .product-overlay {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: rgba(0, 0, 0, 0.3);
             display: flex;
             align-items: center;
             justify-content: center;
             opacity: 0;
             transition: all 0.3s ease;
         }

         .product-overlay i {
             color: white;
             font-size: 2rem;
             transform: scale(0.8);
             transition: all 0.3s ease;
         }

         .product-card:hover .product-overlay {
             opacity: 1;
         }

         .product-card:hover .product-overlay i {
             transform: scale(1.2);
         }

         .product-content {
             padding: 24px;
             position: relative;
         }

         .product-badge {
             position: absolute;
             top: -12px;
             right: 24px;
             background: var(--stripe-primary);
             color: white;
             padding: 4px 12px;
             border-radius: 20px;
             font-size: 0.75rem;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.5px;
         }

         .product-title {
             font-size: 1.5rem;
             font-weight: 700;
             color: var(--stripe-gray-900);
             margin-bottom: 8px;
             line-height: 1.2;
         }

         .product-category {
             font-size: 1rem;
             color: var(--stripe-gray-600);
             margin-bottom: 16px;
             font-weight: 500;
         }

         .product-features {
             display: flex;
             flex-wrap: wrap;
             gap: 8px;
         }

         .feature-tag {
             background: var(--stripe-gray-100);
             color: var(--stripe-gray-700);
             padding: 4px 12px;
             border-radius: 20px;
             font-size: 0.875rem;
             font-weight: 500;
             transition: all 0.3s ease;
         }

         .product-card:hover .feature-tag {
             background: var(--stripe-primary);
             color: white;
         }

         .products-pagination {
             display: flex;
             justify-content: center;
             gap: 12px;
             margin-top: 48px;
         }

         .products-pagination-btn {
             width: 12px;
             height: 12px;
             border-radius: 50%;
             border: none;
             background: var(--stripe-gray-300);
             cursor: pointer;
             transition: all 0.3s ease;
         }

         .products-pagination-btn.active {
             background: var(--stripe-primary);
             transform: scale(1.2);
         }

                                /* Alliance Section - Stripe Style */
         .alliance-section {
             padding: 80px 0 160px;
             background: var(--stripe-gray-900);
             color: white;
         }

                   .alliance-container {
              max-width: 1200px;
              margin: 0 auto;
              padding: 0 24px;
              position: relative;
              overflow: visible;
              padding-top: 8px;
              padding-bottom: 8px;
          }

                   .alliance-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 24px;
              margin-bottom: 48px;
              transition: transform 0.5s ease;
              transform: translateX(0);
              cursor: grab;
              padding: 8px 0;
          }

          .alliance-grid:active {
              cursor: grabbing;
          }

                   .alliance-grid .alliance-card {
              min-width: 350px;
              min-height: 180px;
              flex-shrink: 0;
          }

                   .alliance-card {
              background: rgba(255, 255, 255, 0.05);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 16px;
              overflow: visible;
              transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
              position: relative;
              text-decoration: none;
              color: inherit;
              backdrop-filter: blur(10px);
              display: flex;
              flex-direction: column;
              padding: 24px;
          }

          .alliance-card:hover {
              border-color: var(--stripe-accent);
              box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
              transform: translateY(-8px);
              text-decoration: none;
              color: inherit;
              z-index: 1000;
          }

                   .alliance-logo {
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-bottom: 16px;
              transition: all 0.3s ease;
          }

          .alliance-logo img {
              height: 20px;
              width: auto;
              object-fit: contain;
              /*filter: brightness(0) invert(1);*/
              transition: all 0.3s ease;
          }

          .alliance-card:hover .alliance-logo img {
              transform: scale(1.1);
          }

          .alliance-content {
              flex: 1;
              display: flex;
              flex-direction: column;
          }

         .alliance-name {
             font-size: 1.5rem;
             font-weight: 700;
             color: white;
             margin-bottom: 16px;
             line-height: 1.2;
         }

         .alliance-business {
             display: flex;
             flex-wrap: wrap;
             gap: 8px;
             margin-bottom: 16px;
         }

         .business-tag {
             background: rgba(255, 255, 255, 0.1);
             color: white;
             padding: 4px 12px;
             border-radius: 20px;
             font-size: 0.875rem;
             font-weight: 500;
             transition: all 0.3s ease;
             border: 1px solid rgba(255, 255, 255, 0.2);
         }

         .alliance-card:hover .business-tag {
             background: var(--stripe-accent);
             color: var(--stripe-gray-900);
             border-color: var(--stripe-accent);
         }

                   .alliance-description {
              font-size: 0.95rem;
              color: rgba(255, 255, 255, 0.8);
              line-height: 1.5;
              flex: 1;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
          }

         .alliance-pagination {
             display: flex;
             justify-content: center;
             gap: 12px;
             margin-top: 48px;
         }

         .alliance-pagination-btn {
             width: 12px;
             height: 12px;
             border-radius: 50%;
             border: none;
             background: rgba(255, 255, 255, 0.3);
             cursor: pointer;
             transition: all 0.3s ease;
         }

         .alliance-pagination-btn.active {
             background: var(--stripe-accent);
             transform: scale(1.2);
         }

                 /* News Section - Stripe Style */
          .news-section {
              padding: 80px 0 160px;
              background: var(--stripe-gray-50);
          }

       .section-header {
           text-align: center;
           margin-bottom: 64px;
           padding: 0 24px;
       }

               .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--stripe-gray-900);
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }

        .section-subtitle {
            font-size: 1.125rem;
            color: var(--stripe-gray-600);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Alliance section specific styles */
        .alliance-section .section-title {
            color: white;
        }

        .alliance-section .section-subtitle {
            color: rgba(255, 255, 255, 0.8);
        }

                        .news-container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 24px;
             position: relative;
             overflow: visible;
         }

                 .news-grid {
             display: flex;
             gap: 24px;
             opacity: 1;
             transition: transform 0.5s ease;
             transform: translateX(0);
             cursor: grab;
         }

         .news-grid:active {
             cursor: grabbing;
         }

        .news-grid.hidden {
            opacity: 0;
            transform: translateX(100%);
        }

        .news-grid.slide-left {
            transform: translateX(-100%);
        }

        .news-pagination {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 48px;
        }

        .news-pagination-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            background: var(--stripe-gray-300);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .news-pagination-btn.active {
            background: var(--stripe-primary);
            transform: scale(1.2);
        }

               .news-card {
            background: white;
            border: 1px solid var(--stripe-gray-200);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            min-width: 320px;
            max-width: 320px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: inherit;
        }

        .news-card:hover {
            border-color: var(--stripe-gray-300);
            box-shadow: var(--stripe-shadow-lg);
            transform: translateY(-4px);
            text-decoration: none;
            color: inherit;
        }

               .news-card-image {
            width: 100%;
            height: 200px;
            background: url('https://images.tmtpost.com/uploads/images/2023/09/c2fd3d564b79780d8d53e7d3f1309a5e_1695861810.jpeg') center/cover;
            position: relative;
        }

        .news-card-content {
            padding: 24px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .news-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--stripe-primary);
            transform: scaleY(0);
            transition: transform 0.3s ease;
            z-index: 2;
        }

        .news-card:hover {
            border-color: var(--stripe-gray-300);
            box-shadow: var(--stripe-shadow-lg);
            transform: translateY(-4px);
        }

        .news-card:hover::before {
            transform: scaleY(1);
        }

       .news-title {
           font-size: 1.25rem;
           font-weight: 600;
           color: var(--stripe-gray-900);
           margin-bottom: 12px;
           line-height: 1.4;
       }

       .news-meta {
           font-size: 0.875rem;
           color: var(--stripe-gray-500);
           margin-bottom: 16px;
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .news-meta::before {
           content: '•';
           color: var(--stripe-gray-300);
       }

       .news-excerpt {
           font-size: 1rem;
           color: var(--stripe-gray-600);
           line-height: 1.6;
       }

               /* CTA Section - Stripe Style */
        .cta-section {
            padding: 80px 0 120px;
            background: var(--stripe-primary);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

       .cta-section::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain2" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain2)"/></svg>');
       }

       .cta-content {
           position: relative;
           z-index: 2;
           max-width: 800px;
           margin: 0 auto;
           padding: 0 24px;
       }

       .cta-content h2 {
           font-size: clamp(2rem, 4vw, 3rem);
           font-weight: 700;
           margin-bottom: 24px;
           color: white;
           letter-spacing: -0.02em;
       }

       .cta-content p {
           font-size: 1.25rem;
           opacity: 0.9;
           margin-bottom: 48px;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
           color: white;
           line-height: 1.6;
       }

       .cta-buttons {
           display: flex;
           gap: 16px;
           justify-content: center;
           flex-wrap: wrap;
       }

       .cta-btn-primary {
           background: white;
           color: var(--stripe-primary);
           border: none;
           padding: 16px 32px;
           border-radius: 8px;
           font-weight: 600;
           text-decoration: none;
           transition: all 0.3s ease;
           display: inline-flex;
           align-items: center;
           gap: 8px;
           font-size: 1.125rem;
       }

       .cta-btn-primary:hover {
           background: var(--stripe-gray-50);
           color: var(--stripe-primary);
           transform: translateY(-2px);
           box-shadow: var(--stripe-shadow-lg);
       }

       .cta-btn-secondary {
           background: transparent;
           color: white;
           border: 2px solid rgba(255, 255, 255, 0.3);
           padding: 16px 32px;
           border-radius: 8px;
           font-weight: 600;
           text-decoration: none;
           transition: all 0.3s ease;
           display: inline-flex;
           align-items: center;
           gap: 8px;
           font-size: 1.125rem;
       }

       .cta-btn-secondary:hover {
           background: rgba(255, 255, 255, 0.1);
           border-color: rgba(255, 255, 255, 0.5);
           color: white;
           transform: translateY(-2px);
       }

               /* Responsive Design */
        @media (max-width: 768px) {
            .intro-hero {
                padding: 80px 0 120px;
            }

                         .intro-nav {
                 flex-direction: column;
                 gap: 16px;
             }

             .intro-nav-link {
                 min-width: auto;
                 max-width: none;
             }

            .search-section,
            .website-banner,
            .news-section {
                padding: 60px 0 120px;
            }

            .cta-section {
                padding: 60px 0 80px;
            }

           .search-box {
               flex-direction: column;
               border-radius: 12px;
           }

           .search-input {
               border-radius: 8px 8px 0 0;
               text-align: center;
           }

           .search-btn {
               border-radius: 0 0 8px 8px;
               width: 100%;
           }

                       .search-features {
                flex-direction: column;
                gap: 16px;
            }

           .website-features {
               grid-template-columns: 1fr;
               gap: 24px;
           }

                       .news-grid {
                gap: 16px;
            }

                         .news-card {
                 min-width: 280px;
                 max-width: 280px;
             }

             .news-card-image {
                 height: 150px;
             }

             .news-card-content {
                 padding: 16px;
             }

             .products-grid {
                 gap: 24px;
             }

             .products-grid .product-card {
                 min-width: 280px;
             }

             .product-image {
                 height: 200px;
             }

             .product-content {
                 padding: 16px;
             }

             .product-title {
                 font-size: 1.25rem;
             }

             .alliance-grid {
                 grid-template-columns: repeat(2, 1fr);
                 gap: 16px;
             }

                           .alliance-grid .alliance-card {
                  min-width: 280px;
                  min-height: 160px;
              }

             .alliance-logo {
                 height: 35px;
                 margin-bottom: 12px;
             }

             .alliance-logo img {
                 height: 35px;
                 width: auto;
             }

             .alliance-content {
                 padding: 16px;
             }

             .alliance-name {
                 font-size: 1.25rem;
             }

           .cta-buttons {
               flex-direction: column;
               align-items: center;
           }

           .cta-btn-primary,
           .cta-btn-secondary {
               width: 100%;
               max-width: 300px;
               justify-content: center;
           }
       }

       /* Smooth scrolling */
       html {
           scroll-behavior: smooth;
       }