* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         }
         body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
         line-height: 1.6;
         color: #333;
         background-color: #f8f9fa;
         overflow-x: hidden;
         touch-action: pan-y;
         }
         .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 15px;
         }
         .preview-header {
         background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
         color: white;
         padding: 35px 0;
         text-align: center;
         margin-bottom: 30px;
         }
         .preview-header h1 {
         font-size: 32px;
         font-weight: 800;
         margin-bottom: 8px;
         padding: 0 10px;
         }
         .preview-header p {
         font-size: 16px;
         color: rgba(255, 255, 255, 0.85);
         max-width: 600px;
         margin: 0 auto;
         padding: 0 10px;
         }
         .back-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         background-color: white;
         color: #1f2937;
         padding: 10px 24px;
         border-radius: 8px;
         font-weight: 600;
         text-decoration: none;
         margin-top: 20px;
         transition: all 0.3s ease;
         border: 2px solid transparent;
         font-size: 15px;
         }
         .back-btn:hover {
         background-color: #f3f4f6;
         border-color: #10b981;
         transform: translateY(-2px);
         }
         .preview-content {
         background-color: white;
         border-radius: 14px;
         padding: 30px;
         box-shadow: 0 8px 25px rgba(0,0,0,0.06);
         margin-bottom: 30px;
         overflow: hidden;
         }
         .system-title {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
         gap: 15px;
         margin-bottom: 25px;
         }
         .system-title h2 {
         font-size: 28px;
         color: #1f2937;
         margin: 0;
         padding: 0;
         word-wrap: break-word;
         flex-shrink: 0;
         }
         .system-title .tag {
         display: inline-flex;
         align-items: center;
         background-color: #10b981;
         color: white;
         padding: 3.5px 15px;
         border-radius: 18px;
         font-size: 13px;
         font-weight: 600;
         height: fit-content;
         white-space: nowrap;
         flex-shrink: 0;
         }
         .image-carousel {
         margin: 25px 0;
         position: relative;
         }
         .carousel-container {
         position: relative;
         overflow: hidden;
         border-radius: 12px;
         background-color: #f9fafb;
         cursor: grab;
         user-select: none;
         }
         .carousel-container:active {
         cursor: grabbing;
         }
         .carousel-track {
         display: flex;
         transition: transform 0.4s ease;
         height: 100%;
         }
         .carousel-slide {
         flex: 0 0 100%;
         position: relative;
         }
         .carousel-image {
         width: 100%;
         height: 400px;
         object-fit: contain;
         background-color: #f9fafb;
         cursor: pointer;
         padding: 20px;
         user-select: none;
         }
         .carousel-nav {
         display: flex;
         justify-content: center;
         gap: 10px;
         margin-top: 15px;
         }
         .carousel-dot {
         width: 10px;
         height: 10px;
         border-radius: 50%;
         background-color: #d1d5db;
         cursor: pointer;
         transition: background-color 0.3s ease, transform 0.3s ease;
         }
         .carousel-dot.active {
         background-color: #10b981;
         transform: scale(1.2);
         }
         .carousel-btn {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background-color: rgba(255, 255, 255, 0.9);
         border: none;
         width: 44px;
         height: 44px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         z-index: 10;
         transition: all 0.3s ease;
         color: #1f2937;
         font-size: 18px;
         opacity: 0;
         visibility: hidden;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
         }
         .carousel-container:hover .carousel-btn {
         opacity: 1;
         visibility: visible;
         }
         .carousel-btn:hover {
         background-color: white;
         box-shadow: 0 6px 16px rgba(0,0,0,0.2);
         transform: translateY(-50%) scale(1.1);
         }
         .carousel-prev {
         left: 20px;
         }
         .carousel-next {
         right: 20px;
         }
         .image-caption {
         color: #6b7280;
         font-size: 14px;
         margin-top: 12px;
         text-align: center;
         font-style: italic;
         }
         .system-description {
         margin: 30px 0;
         }
         .system-description h3 {
         color: #1f2937;
         font-size: 22px;
         margin-bottom: 18px;
         padding-bottom: 8px;
         border-bottom: 2px solid #f3f4f6;
         display: flex;
         align-items: center;
         }
         .description-content {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 20px;
         }
         .description-item {
         padding: 18px;
         background-color: #f9fafb;
         border-radius: 10px;
         border-left: 4px solid #10b981;
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;
         }
         .description-item h4 {
         color: #1f2937;
         font-size: 17px;
         margin-bottom: 8px;
         display: flex;
         align-items: center;
         }
         .description-item h4 i {
         color: #10b981;
         margin-right: 8px;
         font-size: 16px;
         }
         .description-item p {
         color: #6b7280;
         font-size: 14px;
         line-height: 1.5;
         }
         .features-section {
         margin: 30px 0;
         }
         .features-section h3 {
         color: #1f2937;
         font-size: 22px;
         margin-bottom: 18px;
         display: flex;
         align-items: center;
         }
         .features-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 16px;
         }
         .feature-item {
         padding: 16px;
         background-color: white;
         border-radius: 10px;
         border: 1px solid #e5e7eb;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         }
         .feature-item:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 20px rgba(0,0,0,0.1);
         border-color: #10b981;
         }
         .feature-item:before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 4px;
         height: 100%;
         background-color: #10b981;
         opacity: 0;
         transition: opacity 0.3s ease;
         }
         .feature-item:hover:before {
         opacity: 1;
         }
         .feature-item h4 {
         color: #1f2937;
         font-size: 15px;
         margin-bottom: 6px;
         display: flex;
         align-items: center;
         }
         .feature-item h4 i {
         color: #10b981;
         margin-right: 8px;
         font-size: 14px;
         width: 20px;
         text-align: center;
         }
         .feature-item p {
         color: #6b7280;
         font-size: 13.5px;
         line-height: 1.5;
         }
         .preview-cta {
         background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
         color: white;
         padding: 40px 20px;
         border-radius: 14px;
         text-align: center;
         margin-top: 30px;
         }
         .preview-cta h3 {
         font-size: 24px;
         margin-bottom: 12px;
         padding: 0 10px;
         }
         .preview-cta p {
         color: #d1d5db;
         font-size: 16px;
         max-width: 700px;
         margin: 0 auto 20px;
         line-height: 1.6;
         padding: 0 10px;
         }
         .cta-buttons {
         display: flex;
         gap: 15px;
         justify-content: center;
         flex-wrap: wrap;
         }
         .btn {
         padding: 12px 28px;
         border-radius: 8px;
         font-weight: 600;
         text-decoration: none;
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         font-size: 15px;
         }
         .btn-primary {
         background: linear-gradient(135deg, #10b981 0%, #059669 100%);
         color: white;
         border: none;
         }
         .btn-primary:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
         }
         .btn-secondary {
         background-color: white;
         color: #1f2937;
         border: 2px solid white;
         }
         .btn-secondary:hover {
         background-color: #f3f4f6;
         transform: translateY(-3px);
         }
         .preview-footer {
         text-align: center;
         padding: 25px 0;
         color: #6b7280;
         font-size: 13px;
         border-top: 1px solid #e5e7eb;
         margin-top: 30px;
         }
         .image-modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.95);
         z-index: 2000;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         }
         .modal-image {
         max-width: 90%;
         max-height: 90%;
         object-fit: contain;
         animation: zoomIn 0.3s ease;
         cursor: default;
         }
         @keyframes zoomIn {
         from { transform: scale(0.8); opacity: 0; }
         to { transform: scale(1); opacity: 1; }
         }
         .close-modal {
         position: absolute;
         top: 20px;
         right: 30px;
         color: white;
         font-size: 36px;
         cursor: pointer;
         background: none;
         border: none;
         z-index: 2001;
         }
         .close-modal:hover {
         color: #10b981;
         }
         .modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.5);
         z-index: 1000;
         align-items: center;
         justify-content: center;
         }
         .modal-content {
         background-color: white;
         border-radius: 16px;
         width: 90%;
         max-width: 400px;
         overflow: hidden;
         box-shadow: 0 20px 40px rgba(0,0,0,0.15);
         animation: modalFadeIn 0.3s ease;
         position: relative;
         }
         @keyframes modalFadeIn {
         from { opacity: 0; transform: translateY(-20px); }
         to { opacity: 1; transform: translateY(0); }
         }
         .modal-header {
         padding: 20px 24px;
         background-color: #f9fafb;
         border-bottom: 1px solid #e5e7eb;
         }
         .modal-header h3 {
         font-size: 19px;
         color: #1f2937;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         .modal-header h3 i {
         color: #10b981;
         margin-right: 9px;
         }
         .modal-body {
         padding: 22px;
         }
         .wechat-qr-container {
         text-align: center;
         margin-bottom: 18px;
         }
         .wechat-qr {
         width: 180px;
         height: 180px;
         margin: 0 auto 16px;
         background-color: #f9fafb;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 50px;
         color: #10b981;
         border: 1px solid #e5e7eb;
         }
         .modal-wechat-id {
         background-color: #f3f4f6;
         padding: 14px;
         border-radius: 8px;
         text-align: center;
         font-size: 20px;
         font-weight: 700;
         color: #1f2937;
         letter-spacing: 1px;
         margin: 16px 0;
         cursor: pointer;
         transition: all 0.3s ease;
         border: 2px solid transparent;
         position: relative;
         }
         .modal-wechat-id:hover {
         background-color: #e5e7eb;
         border-color: #10b981;
         transform: translateY(-2px);
         }
         .modal-wechat-id.copied {
         background-color: #d1fae5;
         border-color: #10b981;
         color: #065f46;
         }
         .copy-hint {
         position: absolute;
         top: -30px;
         left: 0;
         right: 0;
         background-color: #10b981;
         color: white;
         padding: 6px 12px;
         border-radius: 6px;
         font-size: 13px;
         font-weight: 600;
         opacity: 0;
         transition: opacity 0.3s ease;
         pointer-events: none;
         }
         .copy-hint.show {
         opacity: 1;
         }
         .modal-notes {
         color: #6b7280;
         font-size: 14px;
         text-align: center;
         line-height: 1.5;
         }
         .modal-close-area {
         padding: 18px;
         text-align: center;
         background-color: #f9fafb;
         border-top: 1px solid #e5e7eb;
         cursor: pointer;
         transition: background-color 0.2s ease;
         }
         .modal-close-area:hover {
         background-color: #f3f4f6;
         }
         .modal-close-text {
         color: #6b7280;
         font-size: 14px;
         font-weight: 500;
         }
         @media (max-width: 768px) {
         .system-title {
         flex-direction: row;
         align-items: center;
         gap: 10px;
         }
         .system-title .tag {
         align-self: center;
         }
         .preview-header h1 {
         font-size: 26px;
         }
         .preview-content {
         padding: 20px;
         margin: 0 -15px;
         border-radius: 0;
         }
         .system-title h2 {
         font-size: 24px;
         }
         .carousel-image {
         height: 300px;
         padding: 15px;
         }
         .carousel-btn {
         opacity: 0.8;
         visibility: visible;
         width: 40px;
         height: 40px;
         font-size: 16px;
         }
         .carousel-prev {
         left: 10px;
         }
         .carousel-next {
         right: 10px;
         }
         .description-content {
         grid-template-columns: 1fr;
         gap: 15px;
         }
         .features-grid {
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 12px;
         }
         .cta-buttons {
         flex-direction: column;
         gap: 12px;
         }
         .btn {
         width: 100%;
         }
         .preview-cta h3 {
         font-size: 22px;
         }
         .system-description h3,
         .features-section h3 {
         font-size: 20px;
         }
         }
         @media (max-width: 480px) {
         .carousel-image {
         height: 250px;
         }
         .preview-header {
         padding: 25px 0;
         }
         .preview-header h1 {
         font-size: 22px;
         }
         .system-title h2 {
         font-size: 21px;
         }
         .description-item,
         .feature-item {
         padding: 15px;
         }
         .features-grid {
         grid-template-columns: 1fr;
         }
         .carousel-btn {
         width: 36px;
         height: 36px;
         opacity: 0.9;
         }
         }