/* 重置样式和基础设置 */* {    margin: 0;    padding: 0;    box-sizing: border-box;}html {    scroll-behavior: smooth;}body {    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;    line-height: 1.6;    color: #333;    overflow-x: hidden;}.container {    max-width: 1200px;    margin: 0 auto;    padding: 0 20px;}/* 导航栏样式 */.navbar {    position: fixed;    top: 0;    left: 0;    right: 0;    background: rgba(255, 255, 255, 0.95);    backdrop-filter: blur(10px);    z-index: 1000;    transition: all 0.3s ease;    border-bottom: 1px solid rgba(0, 0, 0, 0.1);}.navbar.scrolled {    background: rgba(255, 255, 255, 0.98);    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);}.nav-container {    max-width: 1200px;    margin: 0 auto;    padding: 0 20px;    display: flex;    justify-content: space-between;    align-items: center;    height: 70px;}.nav-logo {    display: flex;    align-items: center;    font-size: 24px;    font-weight: 700;    color: #ff6b6b;    text-decoration: none;}.nav-logo i {    margin-right: 8px;    font-size: 28px;}.nav-menu {    display: flex;    align-items: center;    gap: 30px;}.nav-link {    color: #333;    text-decoration: none;    font-weight: 500;    transition: color 0.3s ease;    position: relative;}.nav-link:hover,.nav-link.active {    color: #ff6b6b;}.nav-link::after {    content: '';    position: absolute;    bottom: -5px;    left: 0;    width: 0;    height: 2px;    background: #ff6b6b;    transition: width 0.3s ease;}.nav-link:hover::after,.nav-link.active::after {    width: 100%;}.nav-btn {    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);    color: white;    padding: 12px 24px;    border-radius: 25px;    text-decoration: none;    font-weight: 600;    transition: all 0.3s ease;    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);}.nav-btn:hover {    transform: translateY(-2px);    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);}.nav-toggle {    display: none;    flex-direction: column;    cursor: pointer;}.bar {    width: 25px;    height: 3px;    background: #333;    margin: 3px 0;    transition: 0.3s;}/* 主横幅区域 */.hero {    min-height: 100vh;    display: flex;    align-items: center;    position: relative;    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    overflow: hidden;}.hero-background {    position: absolute;    top: 20px;    left: 0;    right: 0;    bottom: 0;    background: url('../images/ferrari-sf-25-gate-launch-big-desk.avif') center/cover no-repeat;    z-index: 1;}.hero-overlay {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));    z-index: 2;}.hero-content {    position: relative;    z-index: 3;    max-width: 1200px;    margin: 0 auto;    padding: 0 20px;    display: grid;    grid-template-columns: 1fr 1fr;    gap: 60px;    align-items: center;}.hero-text {    color: white;}.hero-title {    font-size: 3.5rem;    font-weight: 700;    line-height: 1.2;    margin-bottom: 20px;    opacity: 0;    transform: translateY(30px);    animation: fadeInUp 1s ease 0.5s forwards;}.highlight {    background: linear-gradient(45deg, #ff6b6b, #ffd93d);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;}.hero-subtitle {    font-size: 1.3rem;    margin-bottom: 40px;    opacity: 0.9;    opacity: 0;    transform: translateY(30px);    animation: fadeInUp 1s ease 0.7s forwards;}.hero-buttons {    display: flex;    gap: 20px;    opacity: 0;    transform: translateY(30px);    animation: fadeInUp 1s ease 0.9s forwards;}.btn {    display: inline-flex;    align-items: center;    gap: 8px;    padding: 15px 30px;    border-radius: 30px;    text-decoration: none;    font-weight: 600;    transition: all 0.3s ease;    position: relative;    overflow: hidden;}.btn-primary {    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);    color: white;    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);}.btn-primary:hover {    transform: translateY(-3px);    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);}.btn-outline {    background: transparent;    color: white;    border: 2px solid white;}.btn-outline:hover {    background: white;    color: #667eea;    transform: translateY(-3px);}.btn.clicked {    transform: scale(0.95);}/* 手机模拟器 */.hero-visual {    display: flex;    justify-content: center;    align-items: center;}.phone-mockup {    width: 300px;    height: 600px;    background: #1a1a1a;    border-radius: 40px;    padding: 20px;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);    position: relative;}.phone-screen {    width: 100%;    height: 100%;    background: white;    border-radius: 30px;    overflow: hidden;    position: relative;}.app-interface {    padding: 20px;    height: 100%;    display: flex;    flex-direction: column;}.app-header {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 30px;    padding-bottom: 15px;    border-bottom: 1px solid #eee;}.app-title {    font-size: 18px;    font-weight: 600;    color: #333;}.app-status {    font-size: 12px;    color: #4CAF50;    background: #e8f5e8;    padding: 4px 8px;    border-radius: 10px;}.app-content {    flex: 1;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}.praise-card {    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);    color: white;    padding: 30px;    border-radius: 20px;    text-align: center;    margin-bottom: 30px;    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);}.praise-amount {    font-size: 36px;    font-weight: 700;    margin-bottom: 10px;}.praise-message {    font-size: 14px;    opacity: 0.9;}.praise-buttons {    display: flex;    gap: 10px;    flex-wrap: wrap;    justify-content: center;}.praise-btn {    background: #f8f9fa;    border: 1px solid #dee2e6;    padding: 8px 16px;    border-radius: 20px;    font-size: 12px;    cursor: pointer;    transition: all 0.3s ease;}.praise-btn:hover {    background: #ff6b6b;    color: white;    border-color: #ff6b6b;}/* 滚动指示器 */.scroll-indicator {    position: absolute;    bottom: 30px;    left: 50%;    transform: translateX(-50%);    z-index: 3;}.scroll-arrow {    width: 30px;    height: 30px;    border: 2px solid white;    border-top: none;    border-right: none;    transform: rotate(-45deg);    animation: bounce 2s infinite;}/* 功能特色区域 */.features {    padding: 100px 0;    background: #f8f9fa;}.section-header {    text-align: center;    margin-bottom: 80px;}.section-title {    font-size: 2.5rem;    font-weight: 700;    color: #333;    margin-bottom: 20px;}.section-subtitle {    font-size: 1.2rem;    color: #666;    max-width: 600px;    margin: 0 auto;}.features-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));    gap: 40px;}.feature-card {    background: white;    padding: 40px 30px;    border-radius: 20px;    text-align: center;    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;    opacity: 0;    transform: translateY(30px);}.feature-card.animate {    opacity: 1;    transform: translateY(0);}.feature-card:hover {    transform: translateY(-10px);    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);}.feature-icon {    width: 80px;    height: 80px;    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    margin: 0 auto 25px;    color: white;    font-size: 32px;}.feature-card h3 {    font-size: 1.5rem;    font-weight: 600;    color: #333;    margin-bottom: 15px;}.feature-card p {    color: #666;    line-height: 1.6;}/* 价格方案区域 */.pricing {    padding: 100px 0;    background: white;}.pricing-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 40px;    max-width: 1000px;    margin: 0 auto;}.pricing-card {    background: white;    border: 2px solid #eee;    border-radius: 20px;    padding: 40px 30px;    text-align: center;    position: relative;    transition: all 0.3s ease;}.pricing-card.featured {    border-color: #ff6b6b;    transform: scale(1.05);    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.2);}.pricing-card:hover {    transform: translateY(-10px);    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);}.pricing-card.hovered {    transform: translateY(-10px) scale(1.02);}.pricing-badge {    position: absolute;    top: -15px;    left: 50%;    transform: translateX(-50%);    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);    color: white;    padding: 8px 20px;    border-radius: 20px;    font-size: 14px;    font-weight: 600;}.pricing-header h3 {    font-size: 1.5rem;    font-weight: 600;    color: #333;    margin-bottom: 20px;}.price {    margin-bottom: 30px;}.currency {    font-size: 1.5rem;    color: #666;    vertical-align: top;}.amount {    font-size: 3rem;    font-weight: 700;    color: #ff6b6b;}.period {    font-size: 1rem;    color: #666;}.pricing-features ul {    list-style: none;    margin-bottom: 40px;}.pricing-features li {    padding: 10px 0;    color: #666;    display: flex;    align-items: center;    justify-content: center;    gap: 10px;}.pricing-features i {    color: #4CAF50;    font-size: 16px;}/* 联系我们区域 */.contact {    padding: 100px 0;    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    color: white;}.contact .section-title,.contact .section-subtitle {    color: white;}.contact-content {    display: grid;    grid-template-columns: 2fr 1fr;    gap: 60px;    align-items: center;}.contact-info {    display: flex;    flex-direction: column;    gap: 30px;}.contact-item {    display: flex;    align-items: center;    gap: 20px;    padding: 20px;    background: rgba(255, 255, 255, 0.1);    border-radius: 15px;    backdrop-filter: blur(10px);    transition: all 0.3s ease;}.contact-item:hover {    background: rgba(255, 255, 255, 0.2);    transform: translateX(10px);}.contact-icon {    width: 60px;    height: 60px;    background: rgba(255, 255, 255, 0.2);    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 24px;}.contact-details h3 {    font-size: 1.2rem;    margin-bottom: 5px;}.contact-details p {    font-size: 1rem;    margin-bottom: 5px;}.contact-details small {    font-size: 0.9rem;    opacity: 0.8;}.contact-qr {    display: flex;    justify-content: center;}.qr-code {    text-align: center;    background: white;    padding: 30px;    border-radius: 20px;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}.qr-code img {    width: 150px;    height: 150px;    border-radius: 10px;    margin-bottom: 15px;}.qr-code p {    color: #333;    font-weight: 600;}/* 页脚 */.footer {    background: #1a1a1a;    color: white;    padding: 60px 0 20px;}.footer-content {    display: grid;    grid-template-columns: 1fr 2fr;    gap: 60px;    margin-bottom: 40px;}.footer-brand {    max-width: 300px;}.footer-logo {    display: flex;    align-items: center;    font-size: 24px;    font-weight: 700;    color: #ff6b6b;    margin-bottom: 15px;}.footer-logo i {    margin-right: 8px;    font-size: 28px;}.footer-brand p {    color: #ccc;    line-height: 1.6;}.footer-links {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 40px;}.footer-column h4 {    font-size: 1.1rem;    margin-bottom: 20px;    color: white;}.footer-column ul {    list-style: none;}.footer-column li {    margin-bottom: 10px;}.footer-column a {    color: #ccc;    text-decoration: none;    transition: color 0.3s ease;}.footer-column a:hover {    color: #ff6b6b;}.footer-bottom {    border-top: 1px solid #333;    padding-top: 20px;    text-align: center;}.footer-copyright {    color: #999;    font-size: 14px;}.footer-copyright a {    color: #ff6b6b;    text-decoration: none;}/* 动画效果 */@keyframes fadeInUp {    from {        opacity: 0;        transform: translateY(30px);    }    to {        opacity: 1;        transform: translateY(0);    }}@keyframes bounce {    0%, 20%, 50%, 80%, 100% {        transform: translateX(-50%) rotate(-45deg) translateY(0);    }    40% {        transform: translateX(-50%) rotate(-45deg) translateY(-10px);    }    60% {        transform: translateX(-50%) rotate(-45deg) translateY(-5px);    }}.fade-in {    animation: fadeInUp 1s ease forwards;}/* 响应式设计 */@media (max-width: 768px) {    .nav-menu {        position: fixed;        top: 70px;        left: -100%;        width: 100%;        height: calc(100vh - 70px);        background: white;        flex-direction: column;        justify-content: flex-start;        align-items: center;        padding-top: 50px;        transition: left 0.3s ease;        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);    }    .nav-menu.active {        left: 0;    }    .nav-toggle {        display: flex;    }    .nav-toggle.active .bar:nth-child(2) {        opacity: 0;    }    .nav-toggle.active .bar:nth-child(1) {        transform: translateY(8px) rotate(45deg);    }    .nav-toggle.active .bar:nth-child(3) {        transform: translateY(-8px) rotate(-45deg);    }    .hero-content {        grid-template-columns: 1fr;        text-align: center;        gap: 40px;    }    .hero-title {        font-size: 2.5rem;    }    .hero-subtitle {        font-size: 1.1rem;    }    .hero-buttons {        flex-direction: column;        align-items: center;    }    .phone-mockup {        width: 250px;        height: 500px;    }    .features-grid {        grid-template-columns: 1fr;        gap: 30px;    }    .pricing-grid {        grid-template-columns: 1fr;        gap: 30px;    }    .pricing-card.featured {        transform: none;    }    .contact-content {        grid-template-columns: 1fr;        gap: 40px;    }    .footer-content {        grid-template-columns: 1fr;        gap: 40px;    }    .footer-links {        grid-template-columns: 1fr;        gap: 30px;    }    .section-title {        font-size: 2rem;    }    .container {        padding: 0 15px;    }}@media (max-width: 480px) {    .hero-title {        font-size: 2rem;    }    .hero-subtitle {        font-size: 1rem;    }    .btn {        padding: 12px 24px;        font-size: 14px;    }    .feature-card,    .pricing-card {        padding: 30px 20px;    }    .phone-mockup {        width: 200px;        height: 400px;    }    .praise-amount {        font-size: 28px;    }    .praise-buttons {        gap: 5px;    }    .praise-btn {        padding: 6px 12px;        font-size: 11px;    }}/* 滚动条样式 */::-webkit-scrollbar {    width: 8px;}::-webkit-scrollbar-track {    background: #f1f1f1;}::-webkit-scrollbar-thumb {    background: #ff6b6b;    border-radius: 4px;}::-webkit-scrollbar-thumb:hover {    background: #ff5252;}/* 选择文本样式 */::selection {    background: #ff6b6b;    color: white;}/* 焦点样式 */*:focus {    outline: 2px solid #ff6b6b;    outline-offset: 2px;}/* 加载动画 */.loading {    opacity: 0;    transform: translateY(20px);    transition: all 0.6s ease;}.loading.loaded {    opacity: 1;    transform: translateY(0);}