/* 响应式设计 */

/* 平板设备 */
@media (max-width: 968px) {
    .hero-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-visual {
        height: 500px;
    }
    
    .virtual-cards {
        right: -40px;
    }
    
    .vcard {
        width: 160px;
        height: 100px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .features-title {
        font-size: 2rem;
    }
    
    .features-title-en {
        font-size: 1rem;
    }
    
    .features-subtitle {
        font-size: 1rem;
    }
    
    .advantages-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: -100%;
        left: 0;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: top 0.3s ease;
        box-shadow: var(--shadow-lg);
        padding: 2rem 0;
        gap: 0;
        z-index: 999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    
    .nav-menu.active {
        top: 70px;
    }
    
    .nav-menu li {
        width: 100%;
        padding: 0.5rem 0;
    }
    
    .nav-menu a {
        display: block;
        padding: 1rem;
        color: var(--text-color) !important;
    }
    
    .nav-menu a.active {
        color: #ffa500 !important;
    }
    
    .nav-menu a:hover {
        color: #ffa500 !important;
    }
    
    .nav-menu .nav-language,
    .nav-menu .nav-auth {
        display: flex;
        justify-content: center;
        padding: 1rem;
    }
    
    .nav-menu .language-selector {
        color: var(--text-color);
    }
    
    .nav-menu .btn-register {
        color: var(--text-color) !important;
    }
    
    .nav-menu .auth-divider {
        color: var(--text-light);
        margin: 0 0.5rem;
    }
    
    .nav-menu .btn-login {
        color: var(--text-color) !important;
        border-color: var(--border-color);
    }
    
    .hero {
        padding: 6rem 0 3rem;
        min-height: auto;
        height: auto;
    }
    
    .hero::after {
        background-size: cover;
    }
    
    .hero-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
    }
    
    .hero-title {
        font-size: 1.75rem;
        text-align: center;
        margin-bottom: 1.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .hero-description {
        font-size: 0.95rem;
        text-align: left;
        line-height: 1.8;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 1rem;
        background: rgb(29 29 23 / 30%);
        border-radius: 8px;
    }
    
    .hero-visual {
        display: none;
    }
    
    .nav-language,
    .nav-auth {
        margin-left: 0;
    }
    
    .language-selector {
        color: var(--text-color);
    }
    
    .btn-register {
        color: var(--text-color) !important;
    }
    
    .auth-divider {
        color: var(--text-light);
    }
    
    .btn-login {
        color: var(--text-color) !important;
        border-color: var(--border-color);
    }
    
    .page-hero {
        padding: 3rem 0;
    }
    
    .page-hero-image {
        margin-bottom: 1.5rem;
    }
    
    .page-hero-img.placeholder-image {
        min-height: 200px;
        height: 200px;
    }
    
    .feature-image {
        margin-bottom: 0.75rem;
    }
    
    .feature-img.placeholder-image {
        min-height: 150px;
        height: 150px;
    }
    
    .hero-image .placeholder-image {
        height: 200px;
    }
    
    .page-hero-image .placeholder-image {
        height: 200px;
    }
    
    .feature-image .placeholder-image {
        height: 150px;
    }
    
    .features {
        padding: 3rem 0;
    }
    
    .features-header {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }
    
    .features-title-line {
        width: 150px;
        margin-bottom: 1.5rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .features-title {
        font-size: 1.5rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .features-title-en {
        font-size: 0.9rem;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .features-subtitle {
        font-size: 0.9rem;
        line-height: 1.6;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .feature-card {
        padding: 2rem 1.5rem;
        width: 100%;
        max-width: 100%;
    }
    
    .feature-icon-circle {
        width: 80px;
        height: 80px;
    }
    
    .feature-icon-img {
        width: 50px;
        height: 50px;
    }
    
    .feature-card h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .feature-card p {
        font-size: 0.95rem;
        line-height: 1.7;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .advantages {
        padding: 3rem 0;
    }
    
    .advantages-header {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }
    
    .advantages-title {
        font-size: 1.5rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .advantages-title-en {
        font-size: 0.9rem;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .advantages-subtitle {
        font-size: 0.9rem;
        line-height: 1.6;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .advantages-list {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .advantage-card {
        width: 100%;
        max-width: 100%;
        padding: 2rem 1.5rem;
        margin: 0 auto;
        height: auto;
        min-height: auto;
    }
    
    .advantage-icon-circle {
        width: 80px;
        height: 80px;
    }
    
    .advantage-icon-img {
        width: 60px;
        height: 60px;
    }
    
    .advantage-card h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .advantage-card p {
        font-size: 0.95rem;
        line-height: 1.7;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-bottom: 1.5rem;
    }
    
    .advantage-btn {
        font-size: 0.95rem;
        padding: 0.6rem 1.5rem;
    }
    
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .footer-section {
        padding: 0;
    }
    
    .footer-section h3,
    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-section p,
    .footer-section ul li {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .footer-bottom {
        padding-top: 1.5rem;
        font-size: 0.85rem;
    }
    
    .page-hero h1 {
        font-size: 2rem;
    }
    
    .page-hero p {
        font-size: 1rem;
    }
    
    .content-section {
        padding: 2rem 0;
    }
    
    .content-text h2 {
        font-size: 1.75rem;
    }
    
    .content-text h3 {
        font-size: 1.25rem;
    }
    
    .scenarios,
    .integration-methods,
    .security-features,
    .vcc-types,
    .values,
    .contact-info {
        grid-template-columns: 1fr;
    }
    
    .card-types {
        flex-direction: column;
    }
    
    .card-type-item {
        text-align: center;
    }
    
    .cta-section {
        flex-direction: column;
    }
    
    .cta-section .btn {
        width: 100%;
    }
    
    .login-box {
        padding: 2rem 1.5rem;
    }

    /* Hero区域按钮移动端样式 */
    .btn-use-now-hero {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0;
        text-align: center;
    }

    /* 跨境收款账户页面移动端样式 */
    .hero-cross-border {
        padding-top: 80px;
        min-height: 400px;
        background-size: cover;
        background-position: center center;
    }

    .hero-cross-border .hero-wrapper {
        min-height: 300px;
    }

    .hero-cross-border .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
    }

    .hero-cross-border .hero-title {
        font-size: 1.75rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .hero-cross-border .hero-description {
        font-size: 0.95rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .hero-card-payment,
    .hero-wallet,
    .hero-vcc,
    .hero-about {
        padding-top: 80px;
        min-height: 400px;
    }

    .hero-card-payment .hero-content,
    .hero-wallet .hero-content,
    .hero-vcc .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
    }

    .hero-card-payment .hero-title,
    .hero-wallet .hero-title,
    .hero-vcc .hero-title {
        font-size: 1.75rem;
        text-align: center;
    }

    .hero-card-payment .hero-description,
    .hero-wallet .hero-description,
    .hero-vcc .hero-description {
        font-size: 0.95rem;
        text-align: center;
    }

    /* 优势特点区域移动端样式 */
    .advantages-section {
        padding: 3rem 0;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
        justify-items: center;
    }

    .advantage-card-white {
        width: 100%;
        max-width: 100%;
        padding: 2rem 1rem;
        margin: 0 auto;
    }

    /* 跨境收款账户页面优势区域移动端样式 */
    .advantages-section-cross-border .advantages-grid {
        justify-items: center;
        align-items: center;
    }

    .advantages-section-cross-border .advantage-card-white {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        text-align: center;
    }

    .advantage-card-white h3 {
        font-size: 1.25rem;
    }

    .advantage-card-white p {
        font-size: 0.95rem;
    }

    /* 国家币种区域移动端样式 */
    .countries-section {
        padding: 3rem 0;
    }

    .countries-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .country-card {
        padding: 2rem 1rem;
    }

    .country-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* 付款方式区域移动端样式 */
    .payment-methods-section {
        padding: 3rem 0;
    }

    .payment-methods-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .payment-methods-content {
        width: 100%;
    }

    .payment-methods-images {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* 转账方式区域移动端样式 */
    .transfer-methods-section {
        padding: 3rem 0;
    }

    .transfer-methods-header {
        padding: 0 1rem;
    }

    .transfer-methods-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    /* 收款方式区域移动端样式 */
    .payment-collection-section {
        padding: 3rem 0;
        height: auto;
        min-height: 300px;
    }

    .payment-collection-wrapper {
        padding: 0 1rem;
    }

    /* VCC页面移动端样式 */
    .vcc-intro-section {
        padding: 3rem 0;
    }

    .vcc-intro-title {
        font-size: 2rem;
    }

    .vcc-intro-description {
        font-size: 1rem;
    }

    .vcc-categories {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .vcc-online-section {
        padding: 3rem 0;
    }

    .vcc-online-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .vcc-online-card-title {
        font-size: 0.9rem;
    }

    .vcc-offline-section {
        padding: 3rem 0;
        height: auto !important;
        margin-top: 0 !important;
        min-height: auto !important;
    }

    .vcc-offline-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .vcc-offline-content {
        order: 2;
    }

    .vcc-offline-image {
        order: 1;
        position: relative;
    }

    .vcc-offline-image img {
        width: 100%;
        max-width: 100%;
        position: relative !important;
        top: 0 !important;
        height: auto;
    }

    .vcc-offline-title {
        font-size: 2rem;
    }

    .vcc-offline-title-en {
        font-size: 1.1rem;
    }

    .vcc-offline-description {
        font-size: 0.95rem;
    }

    /* 关于我们页面移动端样式 */
    .hero-about {
        min-height: 300px;
    }

    .hero-about-title-cn {
        font-size: 2rem;
        line-height: 1.3;
        letter-spacing: 4px;
    }

    .hero-about-title-en {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .about-detail-section {
        padding: 3rem 0;
    }

    .about-detail-content {
        padding: 0 1rem;
    }

    .about-detail-title-en {
        font-size: 1.5rem;
    }

    .about-detail-title-cn {
        font-size: 2rem;
    }

    .about-detail-main-text,
    .about-detail-indent-text {
        font-size: 0.9rem;
    }

    .about-detail-contact {
        padding-left: 0;
    }

    /* 币种列表移动端样式 */
    .currencies-section {
        padding: 3rem 0;
    }

    .currencies-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .currencies-section-card-payment .currencies-list-wrapper {
        padding-left: 0;
    }
}

/* 小屏移动设备 */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .navbar .container {
        padding: 0 15px;
    }
    
    .logo-img {
        height: 45px;
    }
    
    .hero {
        padding: 5rem 0 2rem;
        height: auto;
    }
    
    .hero-content {
        padding: 0.5rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }
    
    .hero-description {
        font-size: 0.9rem;
        line-height: 1.8;
        padding: 1rem;
        background: rgb(29 29 23 / 30%);
        border-radius: 8px;
    }
    
    .features-title {
        font-size: 1.25rem;
    }
    
    .features-title-en {
        font-size: 0.85rem;
    }
    
    .features-subtitle {
        font-size: 0.85rem;
    }
    
    .advantages-title {
        font-size: 1.25rem;
    }
    
    .advantages-title-en {
        font-size: 0.85rem;
    }
    
    .advantages-subtitle {
        font-size: 0.85rem;
    }
    
    .feature-card {
        padding: 1.5rem 1rem;
    }
    
    .advantage-card {
        padding: 1.5rem 1rem;
        height: auto;
        min-height: auto;
        width: 100%;
        max-width: 100%;
    }
    
    .advantage-btn {
        position: relative !important;
        transform: none !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 1rem;
    }
    
    .advantage-card p {
        margin-bottom: 1rem;
    }
    
    .features-title {
        font-size: 1.15rem;
    }
    
    .features-title-en {
        font-size: 0.8rem;
    }
    
    .features-subtitle {
        font-size: 0.8rem;
    }
    
    .advantages-title {
        font-size: 1.15rem;
    }
    
    .advantages-title-en {
        font-size: 0.8rem;
    }
    
    .advantages-subtitle {
        font-size: 0.8rem;
    }
    
    .feature-icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .feature-icon-img {
        width: 45px;
        height: 45px;
    }
    
    .advantage-icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .advantage-icon-img {
        width: 55px;
        height: 55px;
    }
    
    .hero-visual {
        height: 350px;
    }
    
    .phone-screen {
        width: 200px;
        height: 400px;
        padding: 15px;
    }
    
    .phone-header {
        margin-bottom: 1.5rem;
    }
    
    .virtual-cards {
        right: -10px;
        bottom: -30px;
    }
    
    .vcard {
        width: 100px;
        height: 60px;
        padding: 0.75rem;
    }
    
    .vcard-logo {
        font-size: 0.75rem;
    }
    
    .vcard-brand {
        font-size: 0.9rem;
    }
    
    .vcard-label {
        font-size: 0.6rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .feature-card,
    .scenario-item,
    .method-item,
    .security-item,
    .vcc-type-item,
    .value-item,
    .contact-item {
        padding: 1.25rem;
    }
    
    .login-box {
        padding: 1.5rem 1rem;
    }
    
    .login-box h2 {
        font-size: 1.5rem;
    }
    
    .login-modal-content {
        padding: 2rem 1.5rem;
        width: 95%;
    }
    
    .login-modal h2 {
        font-size: 1.5rem;
    }

    /* Hero区域按钮小屏样式 */
    .btn-use-now-hero {
        padding: 12px 30px;
        font-size: 14px;
    }

    /* Hero区域小屏样式 */
    .hero-card-payment .hero-title,
    .hero-wallet .hero-title,
    .hero-vcc .hero-title {
        font-size: 1.5rem;
    }

    .hero-card-payment .hero-description,
    .hero-wallet .hero-description,
    .hero-vcc .hero-description {
        font-size: 0.9rem;
    }

    /* 跨境收款账户页面小屏样式 */
    .hero-cross-border {
        padding-top: 70px;
        min-height: 350px;
        background-size: cover !important;
        background-position: center center !important;
    }

    .hero-cross-border .hero-wrapper {
        min-height: 280px;
    }

    .hero-cross-border .hero-title {
        font-size: 1.5rem;
    }

    .hero-cross-border .hero-description {
        font-size: 0.9rem;
    }

    /* 优势特点区域小屏样式 */
    .advantage-card-white {
        padding: 1.5rem 1rem;
        margin: 0 auto;
    }

    .advantage-card-white h3 {
        font-size: 1.15rem;
    }

    /* 跨境收款账户页面优势区域小屏样式 */
    .advantages-section-cross-border .advantage-card-white {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    /* VCC页面小屏样式 */
    .vcc-intro-title {
        font-size: 1.75rem;
    }

    .vcc-online-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .vcc-online-card-title {
        font-size: 0.85rem;
    }

    /* VCC线下消费区域小屏样式 */
    .vcc-offline-section {
        padding: 2rem 0;
        height: auto !important;
        margin-top: 0 !important;
    }

    .vcc-offline-title {
        font-size: 1.75rem;
    }

    .vcc-offline-title-en {
        font-size: 1rem;
    }

    .vcc-offline-description {
        font-size: 0.9rem;
    }

    .vcc-offline-image img {
        width: 100%;
        max-width: 100%;
        position: relative !important;
        top: 0 !important;
    }

    /* 关于我们页面小屏样式 */
    .hero-about-title-cn {
        font-size: 1.5rem;
        letter-spacing: 2px;
        line-height: 1.2;
    }

    .hero-about-title-en {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .about-detail-title-en {
        font-size: 1.25rem;
    }

    .about-detail-title-cn {
        font-size: 1.75rem;
    }

    .about-detail-main-text,
    .about-detail-indent-text {
        font-size: 0.85rem;
    }
}

/* 大屏设备优化 */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}