:root {--primary-color: #6366f1;--secondary-color: #8b5cf6;--accent-color: #8914e9;--dark: #0f172a;--light: #f8fafc;--gray: #64748b;}* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;background: #fff;color: #333;overflow-x: hidden;}body.js-loading {overflow: hidden;}body.js-loading > *:not(.loading-screen) {opacity: 0;visibility: hidden;pointer-events: none;}.loading-screen {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 99999;animation: fadeIn 0.3s ease;}body.js-loaded .loading-screen {animation: fadeOut 0.5s ease forwards;}.loading-spinner {width: 60px;height: 60px;border: 4px solid rgba(255, 255, 255, 0.3);border-top-color: white;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 20px;}.loading-text {color: white;font-size: 18px;font-weight: 500;letter-spacing: 1px;animation: pulse 1.5s ease-in-out infinite;}@keyframes spin {to {transform: rotate(360deg);}}@keyframes pulse {0%, 100% {opacity: 1;}50% {opacity: 0.5;}}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes fadeOut {to {opacity: 0;visibility: hidden;}}body.js-loaded > *:not(.loading-screen) {opacity: 1;visibility: visible;pointer-events: auto;animation: fadeIn 0.6s ease;}.top-nav {position: fixed;top: 0;left: 0;right: 0;z-index: 1000;background: transparent;transition: all 0.3s ease;}.top-nav.scrolled {background: transparent;}.nav-container {max-width: 1400px;margin: 0 auto;padding: 30px 40px;display: flex;justify-content: center;align-items: center;}.nav-logo {display: none;}.nav-tabs {display: flex;gap: 10px;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);padding: 8px;border-radius: 50px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);position: relative;}.nav-slider {position: absolute;top: 8px;left: 8px;height: calc(100% - 16px);background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius: 50px;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);pointer-events: none;}.nav-tab {padding: 14px 36px;border: none;background: transparent;color: rgba(255, 255, 255, 0.7);font-size: 16px;font-weight: 500;cursor: pointer;border-radius: 50px;transition: color 0.3s ease;position: relative;z-index: 1;}.nav-tab span {position: relative;z-index: 1;}.nav-tab:hover {color: white;}.nav-tab.active {color: white;}.nav-tab.active::before {opacity: 1;}.top-nav.scrolled .nav-tab {color: #94a3b8;}.top-nav.scrolled .nav-tab:hover, .top-nav.scrolled .nav-tab.active {color: white;}.main-content {margin-top: 0;min-height: 100vh;}.tab-panel {display: none;opacity: 0;transform: translateY(30px);transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);}.tab-panel.active {display: block;opacity: 1;transform: translateY(0);}.hero {height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}.hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.4) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);animation: gradientShift 15s ease infinite;}.hero::after {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);animation: gridMove 60s linear infinite;}@keyframes gradientShift {0%, 100% {opacity: 1;transform: scale(1);}50% {opacity: 0.8;transform: scale(1.1);}}@keyframes gridMove {0% {transform: translate(0, 0) rotate(0deg);}100% {transform: translate(50px, 50px) rotate(360deg);}}.hero-decoration {position: absolute;border-radius: 50%;opacity: 0.1;animation: float 20s ease-in-out infinite;}.hero-decoration:nth-child(1) {width: 300px;height: 300px;background: white;top: 10%;left: 10%;animation-delay: 0s;}.hero-decoration:nth-child(2) {width: 200px;height: 200px;background: white;bottom: 20%;right: 15%;animation-delay: 5s;}.hero-decoration:nth-child(3) {width: 150px;height: 150px;background: rgba(255, 255, 255, 0.5);top: 50%;right: 20%;animation-delay: 10s;}@keyframes float {0%, 100% {transform: translateY(0) scale(1);}50% {transform: translateY(-30px) scale(1.1);}}.hero-content {max-width: 1400px;margin: 0 auto;padding: 0 40px;text-align: center;position: relative;z-index: 10;}.hero h1 {font-size: 90px;font-weight: 900;color: white;margin-bottom: 30px;letter-spacing: -3px;line-height: 1;text-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);animation: fadeInUp 1s ease-out;}.hero-subtitle {font-size: 28px;color: rgba(255, 255, 255, 0.95);margin-bottom: 25px;font-weight: 400;letter-spacing: 0.5px;animation: fadeInUp 1s ease-out 0.2s backwards;}.hero-description {font-size: 20px;color: rgba(255, 255, 255, 0.85);max-width: 750px;margin: 0 auto 50px;line-height: 1.8;animation: fadeInUp 1s ease-out 0.4s backwards;}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}.hero-buttons {display: flex;justify-content: center;gap: 20px;margin: 50px 0;animation: fadeInUp 1s ease-out 0.6s backwards;}.hero-btn {padding: 18px 45px;border-radius: 50px;font-size: 18px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;border: 2px solid white;text-decoration: none;display: inline-block;}.hero-btn-primary {background: white;color: var(--primary-color);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}.hero-btn-primary:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);}.hero-btn-secondary {background: transparent;color: white;}.hero-btn-secondary:hover {background: rgba(255, 255, 255, 0.1);transform: translateY(-3px);}.hero-stats {display: flex;justify-content: center;gap: 50px;margin-top: 80px;animation: fadeInUp 1s ease-out 0.8s backwards;flex-wrap: wrap;}.stat-item {text-align: center;padding: 20px 30px;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 20px;border: 1px solid rgba(255, 255, 255, 0.2);transition: all 0.3s ease;min-width: 180px;}.stat-item:hover {transform: translateY(-5px);background: rgba(255, 255, 255, 0.15);}.stat-number {font-size: 52px;font-weight: 800;color: white;margin-bottom: 8px;text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);min-width: 150px;display: inline-block;}.stat-label {font-size: 14px;color: rgba(255, 255, 255, 0.8);text-transform: uppercase;letter-spacing: 2px;font-weight: 500;}.content-section {background: var(--light);position: relative;min-height: 100vh;display: flex;align-items: center;}.section-container {max-width: 1400px;margin: 0 auto;padding: 100px 40px 60px;width: 100%;}.download-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;margin: 80px 0;}.download-card {background: white;border-radius: 24px;padding: 50px 40px;text-align: center;transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden;border: 1px solid rgba(0, 0, 0, 0.05);}.download-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 6px;background: linear-gradient(135deg, var(--primary-color), var(--accent-color));transform: scaleX(0);transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);}.download-card:hover {transform: translateY(-15px);box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);}.download-card:hover::before {transform: scaleX(1);}.card-icon {width: 120px;height: 120px;margin: 0 auto 30px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius: 30px;display: flex;align-items: center;justify-content: center;font-size: 60px;transition: all 0.5s ease;box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);}.card-icon img {width: 80px;height: 80px;object-fit: contain;}.download-card:hover .card-icon {transform: scale(1.1) rotate(5deg);}.download-card h3 {font-size: 28px;margin-bottom: 20px;color: var(--dark);font-weight: 700;}.download-card p {color: var(--gray);line-height: 1.8;margin-bottom: 35px;font-size: 16px;}.download-button {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;border: none;padding: 16px 40px;border-radius: 50px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.4s ease;box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);}.download-button:hover {transform: translateY(-2px);box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);}.download-buttons {display: flex;flex-direction: column;gap: 12px;}.download-button-secondary {background: white;color: var(--primary-color);border: 2px solid var(--primary-color);padding: 14px 35px;border-radius: 50px;font-size: 15px;font-weight: 600;cursor: pointer;transition: all 0.4s ease;box-shadow: none;}.download-button-secondary:hover {background: var(--primary-color);color: white;transform: translateY(-2px);box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);}.btn-recommend {position: relative;}.btn-recommend::after {content: '推荐';position: absolute;top: -8px;right: -8px;background: linear-gradient(135deg, #10b981, #059669);color: white;font-size: 11px;padding: 3px 8px;border-radius: 10px;font-weight: 700;}.code-modal {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.8);z-index: 10000;backdrop-filter: blur(5px);animation: fadeIn 0.3s ease;}.code-modal.active {display: flex;align-items: center;justify-content: center;padding: 20px;}.code-modal-content {background: white;border-radius: 20px;max-width: 900px;width: 100%;max-height: 85vh;display: flex;flex-direction: column;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);animation: slideUp 0.3s ease;}@keyframes slideUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}.code-modal-header {padding: 25px 30px;border-bottom: 1px solid rgba(0, 0, 0, 0.1);display: flex;justify-content: space-between;align-items: center;}.code-modal-title {color: var(--dark);font-size: 20px;font-weight: 600;}.code-modal-close {background: transparent;border: none;color: rgba(0, 0, 0, 0.4);font-size: 28px;cursor: pointer;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;border-radius: 8px;transition: all 0.3s ease;}.code-modal-close:hover {background: rgba(0, 0, 0, 0.05);color: var(--dark);}.code-modal-body {padding: 0;overflow-y: auto;flex: 1;}.code-modal-body::-webkit-scrollbar {width: 8px;}.code-modal-body::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.05);}.code-modal-body::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2);border-radius: 4px;}.code-modal-body::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.3);}.code-block {background: #f5f5f5;color: #333;font-family: 'Consolas', 'Monaco', 'Courier New', monospace;font-size: 14px;line-height: 1.6;padding: 25px 30px;margin: 0;white-space: pre;overflow-x: auto;border-radius: 0;}.code-modal-footer {padding: 20px 30px;border-top: 1px solid rgba(0, 0, 0, 0.1);display: flex;gap: 15px;justify-content: space-between;align-items: center;}.copy-tip {color: var(--gray);font-size: 14px;flex: 1;display: flex;align-items: center;gap: 10px;}.select-all-btn {padding: 4px 12px;border-radius: 6px;font-size: 12px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;border: 1px solid rgba(0, 0, 0, 0.15);background: white;color: var(--gray);}.select-all-btn:hover {background: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.25);transform: translateY(-1px);}.modal-buttons {display: flex;gap: 15px;}.modal-btn {padding: 12px 30px;border-radius: 10px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;border: none;}.modal-btn-primary {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);}.modal-btn-primary:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);}.modal-btn-secondary {background: white;color: var(--gray);border: 2px solid rgba(0, 0, 0, 0.1);}.modal-btn-secondary:hover {background: rgba(0, 0, 0, 0.02);border-color: rgba(0, 0, 0, 0.2);}.download-card.group-a {background: linear-gradient(135deg, #f8f9ff 0%, #faf5ff 100%);border: 2px solid rgba(99, 102, 241, 0.1);}.download-card.group-a .card-icon {background: linear-gradient(135deg, #818cf8, #a78bfa);}.download-card.recommended {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);}.download-card.recommended h3, .download-card.recommended p {color: white;}.download-card.recommended .card-icon {background: white;color: var(--primary-color);box-shadow: 0 20px 40px rgba(255, 255, 255, 0.3);}.download-card.recommended .download-button {background: white;color: var(--primary-color);box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);}.download-card.recommended .download-button:hover {background: rgba(255, 255, 255, 0.95);box-shadow: 0 15px 40px rgba(255, 255, 255, 0.4);}.download-card.recommended::before {display: none;}.recommend-badge {position: absolute;top: 20px;right: 20px;background: linear-gradient(135deg, #fbbf24, #f59e0b);color: white;padding: 8px 20px;border-radius: 20px;font-size: 14px;font-weight: 700;box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);z-index: 1;animation: pulse 2s ease-in-out infinite;}@keyframes pulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.05);}}.recommend-badge::before {content: '⭐';margin-right: 5px;}.tutorial-section {background: white;padding: 100px 0;min-height: 100vh;display: flex;align-items: center;}.tutorial-area {margin-top: 100px;}.section-header {text-align: center;margin-bottom: 80px;}.section-title {font-size: 56px;font-weight: 800;color: var(--dark);margin-bottom: 20px;letter-spacing: -1px;}.section-subtitle {font-size: 20px;color: var(--gray);font-weight: 300;}.tutorial-steps {display: grid;gap: 60px;}.step-card {background: white;border-radius: 30px;overflow: hidden;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);transition: all 0.4s ease;display: grid;gap: 0;align-items: center;}.step-card:hover {box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);transform: translateY(-5px);}.step-card:nth-child(odd) {grid-template-columns: 6fr 4fr;}.step-card:nth-child(odd) .step-image {order: 1;}.step-card:nth-child(odd) .step-content {order: 2;}.step-card:nth-child(even) {grid-template-columns: 4fr 6fr;}.step-card:nth-child(even) .step-image {order: 2;}.step-card:nth-child(even) .step-content {order: 1;}.step-content {padding: 60px;}.step-number {display: inline-flex;width: 60px;height: 60px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;border-radius: 50%;align-items: center;justify-content: center;font-size: 24px;font-weight: 700;margin-bottom: 25px;box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);}.step-card h4 {font-size: 32px;color: var(--dark);margin-bottom: 20px;font-weight: 700;}.step-card p {font-size: 18px;color: var(--gray);line-height: 1.9;margin-bottom: 0;}.step-image {width: 100%;height: 100%;min-height: 400px;background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);display: flex;align-items: center;justify-content: center;color: var(--gray);font-size: 20px;font-weight: 500;position: relative;overflow: hidden;cursor: pointer;padding: 30px;}.step-image::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);}.step-image img {width: 100%;height: 100%;max-width: 100%;max-height: 100%;object-fit: contain;position: relative;z-index: 1;transition: transform 0.3s ease;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}.step-image:hover img {transform: scale(1.03);}.image-viewer {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.95);z-index: 10001;backdrop-filter: blur(10px);animation: fadeIn 0.3s ease;}.image-viewer.active {display: flex;align-items: center;justify-content: center;padding: 40px;}.image-viewer-content {max-width: 90%;max-height: 90%;position: relative;animation: zoomIn 0.3s ease;}@keyframes zoomIn {from {opacity: 0;transform: scale(0.8);}to {opacity: 1;transform: scale(1);}}.image-viewer-content img {max-width: 100%;max-height: 90vh;border-radius: 12px;box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);}.image-viewer-close {position: absolute;top: -50px;right: 0;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.2);color: white;font-size: 32px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;}.image-viewer-close:hover {background: rgba(255, 255, 255, 0.2);transform: rotate(90deg);}.image-viewer-hint {position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);color: rgba(255, 255, 255, 0.7);font-size: 14px;text-align: center;white-space: nowrap;}.mobile-warning {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99999;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);overflow: hidden;}.mobile-warning::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.4) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);}.mobile-warning::after {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);}.mobile-warning.active {display: flex;align-items: center;justify-content: center;animation: fadeIn 0.5s ease;}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}.mobile-warning-content {position: relative;z-index: 1;text-align: center;padding: 40px 30px;background: rgba(255, 255, 255, 0.95);border-radius: 30px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);max-width: 90%;backdrop-filter: blur(20px);animation: slideUp 0.5s ease;}.mobile-warning-title {font-size: 32px;font-weight: 800;color: var(--dark);margin-bottom: 15px;letter-spacing: -1px;}.mobile-warning-text {font-size: 16px;color: var(--gray);line-height: 1.6;margin: 0;}.split-layout {display: grid;grid-template-columns: 7fr 3fr;gap: 60px;align-items: center;margin-bottom: 100px;}.feature-showcase {width: 100%;height: 700px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 30px;display: flex;align-items: center;justify-content: center;color: white;font-size: 28px;font-weight: 600;box-shadow: 0 30px 80px rgba(102, 126, 234, 0.4);position: relative;overflow: hidden;}.feature-showcase::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);animation: rotate 20s linear infinite;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.feature-info {background: white;padding: 60px;border-radius: 30px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);height: 100%;display: flex;flex-direction: column;justify-content: center;}.feature-info h3 {font-size: 42px;color: var(--dark);margin-bottom: 30px;font-weight: 800;line-height: 1.2;}.feature-list {list-style: none;}.feature-list li {padding: 18px 0;color: var(--gray);font-size: 18px;position: relative;padding-left: 45px;transition: all 0.3s ease;}.feature-list li:hover {color: var(--primary-color);padding-left: 50px;}.feature-list li::before {content: "✓";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 28px;height: 28px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;border-radius: 50%;font-weight: bold;font-size: 14px;line-height: 28px;text-align: center;}.feature-hero {min-height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}.feature-hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.4) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);animation: gradientShift 15s ease infinite;}.feature-hero::after {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);animation: gridMove 60s linear infinite;}.feature-hero .split-layout {max-width: 1600px;margin: 0 auto;padding: 0 40px;position: relative;z-index: 1;margin-bottom: 0;}.feature-hero .feature-showcase {background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);}.feature-hero .feature-info {background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(20px);padding: 60px;border-radius: 30px;display: flex;flex-direction: column;justify-content: center;}.feature-hero .feature-info h3 {font-size: 42px;color: var(--dark);margin-bottom: 30px;font-weight: 800;}.feature-hero .feature-info .feature-list {margin-bottom: 35px;}.feature-hero .feature-btn-group {gap: 12px;}.feature-hero .feature-btn {padding: 14px 32px;font-size: 16px;flex: 1;min-width: 0;}.database-hero {min-height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}.database-hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.4) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);animation: gradientShift 15s ease infinite;}.database-hero::after {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);animation: gridMove 60s linear infinite;}.database-hero .split-layout {max-width: 1400px;margin: 0 auto;padding: 0 40px;position: relative;z-index: 1;margin-bottom: 0;grid-template-columns: 6fr 4fr;gap: 60px;}.database-hero .feature-showcase {height: 650px;background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);backdrop-filter: blur(30px);border: 2px solid rgba(255, 255, 255, 0.2);box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden;}.database-hero .feature-showcase.database-preview {background: transparent;backdrop-filter: none;border: none;box-shadow: none;cursor: default;display: flex;align-items: center;justify-content: center;padding: 0;}.database-hero .feature-showcase.database-preview img {max-width: 100%;max-height: 100%;width: auto;height: auto;object-fit: contain;transform: perspective(1200px) rotateY(-15deg) rotateX(5deg);transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);border-radius: 16px;}.database-hero .feature-showcase.database-preview:hover img {transform: perspective(1200px) rotateY(0deg) rotateX(0deg);}.database-hero .feature-showcase::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);animation: shimmer 8s ease-in-out infinite;}.database-hero .feature-showcase.database-preview::before {display: none;}.feature-hero .feature-showcase.config-preview {background: transparent;backdrop-filter: none;border: none;box-shadow: none;cursor: default;display: flex;align-items: center;justify-content: center;padding: 0;}.feature-hero .feature-showcase.config-preview img {width: 100%;height: 100%;object-fit: cover;border-radius: 16px;}.feature-hero .feature-showcase.config-preview::before {display: none;}.feature-hero .feature-showcase.config-preview:hover {transform: none;box-shadow: none;border: none;}@keyframes shimmer {0%, 100% {transform: translateX(-100%) translateY(-100%) rotate(45deg);}50% {transform: translateX(100%) translateY(100%) rotate(45deg);}}.database-hero .feature-showcase:hover:not(.database-preview) {transform: translateY(-8px) scale(1.02);box-shadow: 0 35px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);border-color: rgba(255, 255, 255, 0.4);}.database-hero .feature-info {background: transparent;padding: 0;box-shadow: none;display: flex;flex-direction: column;justify-content: center;animation: fadeInRight 1s ease-out;}@keyframes fadeInRight {from {opacity: 0;transform: translateX(30px);}to {opacity: 1;transform: translateX(0);}}.database-hero .feature-info h3 {font-size: 52px;color: white;margin-bottom: 20px;font-weight: 900;line-height: 1.1;letter-spacing: -2px;text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);animation: fadeInUp 1s ease-out 0.2s backwards;}.database-hero .feature-info p {font-size: 18px;color: rgba(255, 255, 255, 0.85);line-height: 1.8;margin-bottom: 30px;animation: fadeInUp 1s ease-out 0.4s backwards;}.database-hero .feature-list {margin-bottom: 35px;animation: fadeInUp 1s ease-out 0.6s backwards;}.database-hero .feature-list li {color: rgba(255, 255, 255, 0.9);font-size: 17px;padding: 12px 0;padding-left: 45px;transition: all 0.3s ease;}.database-hero .feature-list li::before {background: linear-gradient(135deg, #60a5fa, #a78bfa);color: white;box-shadow: 0 4px 15px rgba(96, 165, 250, 0.4);top: 50%;transform: translateY(-50%);line-height: 28px;text-align: center;}.database-hero .feature-list li:hover {color: white;padding-left: 53px;}.database-hero .feature-btn-group {gap: 12px;}.database-hero .feature-btn {padding: 14px 32px;font-size: 16px;flex: 1;min-width: 0;background: linear-gradient(135deg, #60a5fa, #a78bfa);box-shadow: 0 10px 35px rgba(96, 165, 250, 0.4);border: none;}.database-hero .feature-btn:hover {box-shadow: 0 15px 45px rgba(96, 165, 250, 0.6);}.database-hero .feature-btn-secondary {background: white;color: #60a5fa;box-shadow: 0 10px 35px rgba(96, 165, 250, 0.2);border: none;}.database-hero .feature-btn-secondary:hover {background: linear-gradient(135deg, #60a5fa, #a78bfa);color: white;box-shadow: 0 15px 45px rgba(96, 165, 250, 0.5);}.feature-btn-group {display: flex;gap: 15px;flex-wrap: wrap;}.feature-btn {display: inline-flex;align-items: center;gap: 12px;padding: 18px 45px;background: linear-gradient(135deg, #60a5fa, #a78bfa);color: white;border: none;border-radius: 50px;font-size: 18px;font-weight: 700;cursor: pointer;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 10px 35px rgba(96, 165, 250, 0.4);position: relative;overflow: hidden;animation: fadeInUp 1s ease-out 0.8s backwards;}.feature-btn-secondary {background: white;color: #60a5fa;box-shadow: 0 10px 35px rgba(96, 165, 250, 0.2);border: none;}.feature-btn-secondary:hover {background: linear-gradient(135deg, #60a5fa, #a78bfa);color: white;box-shadow: 0 15px 45px rgba(96, 165, 250, 0.5);}.feature-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.5s ease;}.feature-btn:hover::before {left: 100%;}.feature-btn:hover {transform: translateY(-3px) scale(1.05);box-shadow: 0 15px 45px rgba(96, 165, 250, 0.6);}.footer {background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);color: #e2e8f0;padding: 80px 0 0;position: relative;overflow: hidden;}.footer::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);}.footer-content {max-width: 1400px;margin: 0 auto;padding: 0 40px 60px;display: grid;grid-template-columns: 2fr 1fr 1fr 1.5fr;gap: 60px;}.footer-section {}.footer-title {font-size: 28px;font-weight: 800;color: white;margin-bottom: 15px;background: linear-gradient(135deg, #60a5fa, #a78bfa);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.footer-desc {color: #94a3b8;font-size: 14px;line-height: 1.6;margin-bottom: 25px;}.footer-social {display: flex;gap: 12px;}.social-link {width: 40px;height: 40px;border-radius: 10px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);display: flex;align-items: center;justify-content: center;color: #94a3b8;transition: all 0.3s ease;}.social-link:hover {background: linear-gradient(135deg, #60a5fa, #a78bfa);border-color: transparent;color: white;transform: translateY(-3px);}.footer-section-title {font-size: 16px;font-weight: 700;color: white;margin-bottom: 20px;letter-spacing: 0.5px;}.footer-links {list-style: none;padding: 0;margin: 0;}.footer-links li {margin-bottom: 12px;}.footer-links a {color: #94a3b8;text-decoration: none;font-size: 14px;transition: all 0.3s ease;display: inline-block;}.footer-links a:hover {color: #60a5fa;transform: translateX(5px);}.footer-disclaimer {color: #64748b;font-size: 13px;line-height: 1.8;margin: 0;}.footer-bottom {background: rgba(0, 0, 0, 0.2);padding: 25px 0;border-top: 1px solid rgba(255, 255, 255, 0.05);}.footer-bottom-content {max-width: 1400px;margin: 0 auto;padding: 0 40px;display: flex;justify-content: space-between;align-items: center;}.copyright {color: #64748b;font-size: 14px;margin: 0;}.footer-links-inline {display: flex;align-items: center;gap: 15px;margin: 0;}.footer-links-inline a {color: #64748b;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}.footer-links-inline a:hover {color: #60a5fa;}.footer-links-inline .separator {color: #334155;}@media (max-width: 1200px) {.hero h1 {font-size: 70px;letter-spacing: -2px;}.hero-subtitle {font-size: 24px;}.hero-description {font-size: 18px;}.hero-stats {gap: 50px;}.download-grid {grid-template-columns: 1fr;}.split-layout {grid-template-columns: 1fr;}.database-hero .split-layout {grid-template-columns: 1fr;gap: 40px;}.database-hero .feature-showcase {height: 500px;order: 1;}.database-hero .feature-info {order: 2;}.database-hero .feature-info h3 {font-size: 42px;}.step-card {grid-template-columns: 1fr;}.step-card:nth-child(odd), .step-card:nth-child(even) {grid-template-columns: 1fr;}.step-card:nth-child(odd) .step-image, .step-card:nth-child(even) .step-image {order: 1;min-height: 350px;padding: 25px;}.step-card:nth-child(odd) .step-content, .step-card:nth-child(even) .step-content {order: 2;}.step-content {padding: 40px;}}@media (max-width: 768px) {.hero h1 {font-size: 48px;letter-spacing: -1px;}.hero-subtitle {font-size: 20px;}.hero-description {font-size: 16px;}.hero-buttons {flex-direction: column;gap: 15px;}.hero-btn {width: 100%;max-width: 300px;}.hero-stats {flex-direction: column;gap: 20px;}.stat-item {width: 100%;max-width: 300px;margin: 0 auto;}.nav-tabs {padding: 6px;}.nav-tab {padding: 10px 24px;font-size: 14px;}.section-title {font-size: 40px;}.step-card h4 {font-size: 24px;}.step-card p {font-size: 16px;}.step-image {min-height: 280px;padding: 20px;}.step-content {padding: 30px;}.database-hero .feature-showcase {height: 350px;}.database-hero .feature-info h3 {font-size: 36px;}.database-hero .feature-info p {font-size: 16px;}.database-hero .feature-list li {font-size: 15px;padding: 10px 0;}.feature-btn {width: 100%;justify-content: center;padding: 16px 35px;font-size: 16px;}.feature-btn-group {flex-direction: column;gap: 12px;}.footer-content {grid-template-columns: 1fr;gap: 40px;}.footer-bottom-content {flex-direction: column;gap: 15px;text-align: center;}}