:root {--primary: #1890ff;--primary-dark: #096dd9;--primary-light: #e6f7ff;--secondary: #722ed1;--secondary-light: #9254de;--success: #52c41a;--warning: #faad14;--danger: #ff4d4f;--dark: #001529;--light: #f5f7fa;--white: #ffffff;--gray: #666666;--gray-light: #f0f2f5;--shadow: 0 8px 25px rgba(0, 0, 0, 0.08);--shadow-hover: 0 12px 35px rgba(0, 0, 0, 0.12);--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);--transition-fast: all 0.25s ease;}* {margin: 0;padding: 0;box-sizing: border-box;}html {scroll-behavior: smooth;}body {font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: var(--light);color: #333;line-height: 1.6;overflow-x: hidden;font-size: 15px;}h1, h2, h3, h4, h5, h6 {font-weight: 600;margin-bottom: 0.5em;}.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;}.section-title {text-align: center;margin-bottom: 60px;}.section-title h2 {font-size: 2.2rem;color: var(--dark);position: relative;display: inline-block;margin-bottom: 18px;animation: fadeInUp 0.8s ease-out;}.section-title h2:after {content: '';position: absolute;width: 70px;height: 4px;background: linear-gradient(90deg, var(--primary), var(--secondary));bottom: -12px;left: 50%;transform: translateX(-50%);border-radius: 2px;animation: expandWidth 1s ease-out 0.3s forwards;opacity: 0;}.section-title p {color: var(--gray);font-size: 1.05rem;max-width: 750px;margin: 0 auto;animation: fadeInUp 0.8s ease-out 0.2s forwards;opacity: 0;}header {background-color: rgba(255, 255, 255, 0.98);backdrop-filter: blur(15px);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;transition: var(--transition);}header.scrolled {box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);padding: 0;background-color: rgba(255, 255, 255, 0.98);}.header-content {display: flex;justify-content: space-between;align-items: center;padding: 18px 0;transition: var(--transition);}.logo {display: flex;align-items: center;text-decoration: none;}.logo-icon {width: 42px;height: 42px;background: linear-gradient(135deg, var(--primary), var(--secondary));border-radius: 8px;display: flex;align-items: center;justify-content: center;color: white;font-size: 20px;font-weight: bold;margin-right: 10px;box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);transition: var(--transition);}.logo:hover .logo-icon {transform: rotate(10deg) scale(1.05);box-shadow: 0 6px 18px rgba(24, 144, 255, 0.35);}.logo-text h1 {font-size: 1.4rem;background: linear-gradient(to right, var(--primary), var(--secondary));-webkit-background-clip: text;background-clip: text;color: transparent;margin: 0;letter-spacing: 0.3px;}.logo-text span {font-size: 0.8rem;color: var(--gray);font-weight: 400;}.nav-links {display: flex;list-style: none;}.nav-links li {margin-left: 30px;position: relative;}.nav-links a {text-decoration: none;color: var(--dark);font-weight: 500;font-size: 0.95rem;position: relative;padding: 6px 0;transition: var(--transition);}.nav-links a:after {content: '';position: absolute;width: 0;height: 2px;background: linear-gradient(to right, var(--primary), var(--secondary));bottom: 0;left: 0;border-radius: 1px;transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.nav-links a:hover:after {width: 100%;}.nav-links a:hover {color: var(--primary);transform: translateY(-2px);}.action-buttons {display: flex;align-items: center;gap: 12px;}.btn {padding: 10px 20px;border-radius: 6px;text-decoration: none;font-weight: 500;font-size: 0.9rem;transition: var(--transition);display: inline-flex;align-items: center;justify-content: center;cursor: pointer;border: none;position: relative;overflow: hidden;letter-spacing: 0.3px;}.btn:before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.2);transform: translate(-50%, -50%);transition: width 0.5s, height 0.5s;}.btn:hover:before {width: 250px;height: 250px;}.btn i {margin-right: 6px;}.btn-primary {background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);}.btn-primary:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(24, 144, 255, 0.35);}.btn-outline {background: transparent;color: var(--primary);border: 1.5px solid var(--primary);}.btn-outline:hover {background: var(--primary);color: white;transform: translateY(-3px);box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);}.btn-white {background: white;color: var(--primary);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}.btn-white:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);}.mobile-menu-btn {display: none;background: none;border: none;font-size: 1.5rem;color: var(--dark);cursor: pointer;z-index: 1001;transition: var(--transition);}.mobile-menu-btn:hover {color: var(--primary);}.hero {background: linear-gradient(135deg, rgba(24, 144, 255, 0.85) 0%, rgba(114, 46, 209, 0.85) 100%), url('/static/index/shujuzhontai.png');background-size: cover;background-position: center;color: white;padding: 180px 0 120px;text-align: center;position: relative;overflow: hidden;animation: fadeIn 1s ease-out;}.hero:before {content: '';position: absolute;width: 250%;height: 180px;background: white;bottom: -70px;left: -50%;transform: rotate(-5deg);z-index: 1;}.hero-content {position: relative;z-index: 2;max-width: 850px;margin: 0 auto;animation: fadeInUp 1s ease-out 0.2s forwards;opacity: 0;}.hero h2 {font-size: 2.8rem;margin-bottom: 22px;font-weight: 700;line-height: 1.2;text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);animation: fadeInUp 0.8s ease-out 0.4s forwards;opacity: 0;}.hero p {font-size: 1.15rem;max-width: 800px;margin: 0 auto 40px;animation: fadeInUp 0.8s ease-out 0.6s forwards;opacity: 0;}.hero-buttons {display: flex;justify-content: center;gap: 20px;margin-top: 35px;animation: fadeInUp 0.8s ease-out 0.8s forwards;opacity: 0;}.hero .btn {padding: 14px 32px;font-size: 1.05rem;border-radius: 8px;min-width: 160px;}.products {padding: 100px 0;background-color: white;position: relative;}.product-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));gap: 40px;}.product-card {background: white;border-radius: 14px;overflow: hidden;box-shadow: var(--shadow);transition: var(--transition);height: 100%;display: flex;flex-direction: column;position: relative;border: 1px solid rgba(0, 0, 0, 0.04);}.product-card:hover {transform: translateY(-12px) scale(1.02);box-shadow: var(--shadow-hover);border-color: var(--primary-light);}.product-image {height: 200px;width: 100%;position: relative;overflow: hidden;}.product-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);}.product-card:hover .product-image img {transform: scale(1.08);}.product-badge {position: absolute;top: 18px;right: 18px;background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;padding: 5px 15px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);z-index: 2;transition: var(--transition);}.product-card:hover .product-badge {transform: scale(1.05);}.product-content {padding: 28px;flex-grow: 1;display: flex;flex-direction: column;}.product-content h3 {font-size: 1.4rem;margin-bottom: 14px;color: var(--dark);transition: var(--transition);}.product-card:hover .product-content h3 {color: var(--primary);}.product-content p {color: var(--gray);margin-bottom: 20px;flex-grow: 1;line-height: 1.7;font-size: 0.95rem;}.product-features {list-style: none;margin-top: 18px;}.product-features li {margin-bottom: 10px;padding-left: 26px;position: relative;transition: var(--transition-fast);font-size: 0.9rem;}.product-features li:hover {transform: translateX(4px);}.product-features li:before {content: '\f00c';font-weight: 900;position: absolute;left: 0;color: var(--success);font-size: 1rem;transition: var(--transition);}.product-features li:hover:before {transform: scale(1.1);}.product-footer {margin-top: 22px;padding-top: 20px;border-top: 1px solid rgba(0, 0, 0, 0.07);display: flex;justify-content: space-between;align-items: center;}.product-price {font-size: 1.2rem;font-weight: 600;color: var(--primary);}.features {padding: 100px 0;background-color: var(--light);position: relative;}.feature-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 30px;}.feature-item {background: white;padding: 35px 28px;border-radius: 14px;text-align: center;box-shadow: var(--shadow);transition: var(--transition);position: relative;overflow: hidden;border: 1px solid rgba(0, 0, 0, 0.04);}.feature-item:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 4px;background: linear-gradient(90deg, var(--primary), var(--secondary));transform: scaleX(0);transform-origin: left;transition: transform 0.5s ease;}.feature-item:hover:before {transform: scaleX(1);}.feature-item:hover {transform: translateY(-8px);box-shadow: var(--shadow-hover);}.feature-icon {width: 80px;height: 80px;background: linear-gradient(135deg, var(--primary), var(--secondary));border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 25px;color: white;font-size: 28px;transition: var(--transition);box-shadow: 0 6px 18px rgba(24, 144, 255, 0.18);}.feature-item:hover .feature-icon {transform: scale(1.1) rotate(8deg);box-shadow: 0 10px 25px rgba(24, 144, 255, 0.25);}.feature-item h3 {font-size: 1.25rem;margin-bottom: 15px;color: var(--dark);}.feature-item p {color: var(--gray);line-height: 1.7;font-size: 0.95rem;}.gallery {padding: 100px 0;background-color: white;}.gallery-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 30px;}.gallery-item {position: relative;border-radius: 14px;overflow: hidden;height: 250px;box-shadow: var(--shadow);transition: var(--transition);}.gallery-item:hover {transform: translateY(-8px);box-shadow: var(--shadow-hover);}.gallery-item img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);}.gallery-item:hover img {transform: scale(1.1);}.gallery-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);color: white;padding: 22px;transform: translateY(100%);transition: var(--transition);}.gallery-item:hover .gallery-overlay {transform: translateY(0);}.gallery-overlay h4 {font-size: 1.2rem;margin-bottom: 6px;}.gallery-overlay p {opacity: 0.9;font-size: 0.9rem;}.platform-features {padding: 90px 0;background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);position: relative;}.feature-list {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;margin-top: 45px;}.feature-list-item {background: white;padding: 30px;border-radius: 14px;width: calc(33.333% - 20px);min-width: 300px;box-shadow: var(--shadow);transition: var(--transition);position: relative;overflow: hidden;border: 1px solid rgba(0, 0, 0, 0.04);}.feature-list-item:hover {transform: translateY(-8px);box-shadow: var(--shadow-hover);}.feature-list-item h4 {color: var(--primary);margin-bottom: 18px;font-size: 1.2rem;position: relative;padding-bottom: 10px;}.feature-list-item h4:after {content: '';position: absolute;width: 45px;height: 3px;background: linear-gradient(90deg, var(--primary), var(--secondary));bottom: 0;left: 0;border-radius: 2px;}.feature-list-item ul {list-style: none;padding-left: 0;}.feature-list-item li {margin-bottom: 10px;padding-left: 22px;position: relative;transition: var(--transition-fast);font-size: 0.9rem;}.feature-list-item li:hover {transform: translateX(4px);color: var(--primary);}.feature-list-item li:before {content: "▶";color: var(--success);position: absolute;left: 0;font-size: 0.85rem;transition: var(--transition);}.feature-list-item li:hover:before {transform: translateX(3px);}footer {background-color: var(--dark);color: rgba(255, 255, 255, 0.7);padding: 90px 0 35px;position: relative;}footer:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 4px;background: linear-gradient(90deg, var(--primary), var(--secondary));}.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 45px;margin-bottom: 50px;}.footer-column h3 {color: white;margin-bottom: 25px;font-size: 1.2rem;position: relative;padding-bottom: 12px;}.footer-column h3:after {content: '';position: absolute;width: 45px;height: 3px;background: var(--primary);bottom: 0;left: 0;border-radius: 2px;}.footer-links {list-style: none;}.footer-links li {margin-bottom: 12px;}.footer-links a {color: rgba(255, 255, 255, 0.7);text-decoration: none;transition: var(--transition);display: inline-block;font-size: 0.9rem;}.footer-links a:hover {color: var(--primary);transform: translateX(4px);}.social-links {display: flex;gap: 15px;margin-top: 20px;}.social-links a {width: 40px;height: 40px;background: rgba(255, 255, 255, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;text-decoration: none;transition: var(--transition);font-size: 1rem;}.social-links a:hover {background: var(--primary);transform: translateY(-4px);box-shadow: 0 6px 18px rgba(24, 144, 255, 0.25);}.copyright {text-align: center;padding-top: 35px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 0.9rem;color: rgba(255, 255, 255, 0.5);}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes fadeInUp {from {opacity: 0;transform: translateY(25px);}to {opacity: 1;transform: translateY(0);}}@keyframes expandWidth {from {opacity: 0;width: 0;}to {opacity: 1;width: 70px;}}@media (max-width: 1100px) {.hero h2 {font-size: 2.5rem;}.feature-list-item {width: calc(50% - 15px);}}@media (max-width: 992px) {.hero h2 {font-size: 2.3rem;}.product-grid {grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));}.feature-grid {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}.gallery-grid {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}}@media (max-width: 768px) {.mobile-menu-btn {display: block;}.action-buttons{display: none;}.nav-links {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(255, 255, 255, 0.98);flex-direction: column;align-items: center;justify-content: center;padding: 20px 0;box-shadow: none;transform: translateX(100%);transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);z-index: 999;}.nav-links.active {transform: translateX(0);}.nav-links li {margin: 18px 0;opacity: 0;transform: translateY(20px);transition: opacity 0.3s, transform 0.3s;}.nav-links.active li {opacity: 1;transform: translateY(0);}.nav-links.active li:nth-child(1) {transition-delay: 0.1s;}.nav-links.active li:nth-child(2) {transition-delay: 0.2s;}.nav-links.active li:nth-child(3) {transition-delay: 0.3s;}.nav-links.active li:nth-child(4) {transition-delay: 0.4s;}.nav-links.active li:nth-child(5) {transition-delay: 0.5s;}.nav-links.active li:nth-child(6) {transition-delay: 0.6s;}.header-content {padding: 16px 0;}.hero {padding: 160px 0 100px;}.hero h2 {font-size: 2rem;}.hero p {font-size: 1.05rem;}.hero-buttons {flex-direction: column;align-items: center;gap: 18px;}.hero .btn {width: 100%;max-width: 300px;padding: 13px 25px;}.section-title h2 {font-size: 1.9rem;}.section-title p {font-size: 1rem;}.feature-list-item {width: 100%;}}@media (max-width: 576px) {.product-grid, .feature-grid, .gallery-grid {grid-template-columns: 1fr;}.footer-content {grid-template-columns: 1fr;gap: 35px;}.hero h2 {font-size: 1.8rem;}.hero p {font-size: 0.95rem;}.section-title h2 {font-size: 1.7rem;}.product-content, .feature-item, .feature-list-item {padding: 24px;}.product-image {height: 180px;}.gallery-item {height: 220px;}}