/* mobile-responsive.css - 移动端及平板适配专用样式 */

/* ==========================================================================
   全局基础适配 (Touch Targets & Base Reset)
   ========================================================================== */
@media (max-width: 1024px), (max-device-width: 1024px) {
    /* 优化触摸区域，确保符合 >=44px 标准 */
    a, button, 
    .nav-item-custom, 
    .area-4-cards__tab-item, 
    .area-5-cards__tab,
    .area-5-top-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center; /* 确保文字居中，提升触摸体验 */
    }
    
    /* 调整字体大小 14-16px 以确保可读性 */
    body {
        font-size: 14px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 16px;
    }

    /* 图片自适应 */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* 默认隐藏移动端菜单按钮 */
.mobile-menu-toggle {
    display: none;
}

/* ==========================================================================
   移动设备 (Mobile) <= 750px
   ========================================================================== */
@media (max-width: 750px), (max-device-width: 750px) {
    /* 优化触摸区域，确保符合 >=44px 标准 */
    a, button, 
    .nav-item-custom, 
    .area-4-cards__tab-item, 
    .area-5-cards__tab,
    .area-5-top-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center; /* 确保文字居中，提升触摸体验 */
    }
    
    /* 调整字体大小 14-16px 以确保可读性 */
    body {
        font-size: 14px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 16px;
    }

    /* 图片自适应 */
    img {
        max-width: 100%;
        height: auto;
    }

    .section {
        padding: 44px 0;
    }

    .section-header {
        margin-bottom: 24px;
        max-width: none;
    }

    .section-title,
    .area-3-title {
        font-size: 18px;
        line-height: 30px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .section-title {
        margin-bottom: 0;
    }
    .section-subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
        overflow-wrap: anywhere;
    }

    :root {
        --header-height: 44px; /* 根据设计稿调整头部高度 */
        --overlay-bg: rgba(0, 0, 0, 0.5);
        --overlay-z-index: 9999;
        --overlay-duration: 300ms;
        --overlay-easing: cubic-bezier(0.16, 1, 0.3, 1);
        --menu-bg: #ffffff;
        --menu-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
        --font-family-base: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
        --font-family-inter: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
        --color-text-primary: #000000;
        --color-text-secondary: #6c7380;
        --color-text-active: #fb7807;
        --color-white: #ffffff;
        --color-icon: #263454;
        --btn-gradient: linear-gradient(90deg, #ffb221 0%, #fa6f02 100%);
        --btn-shadow: 0px 6px 10px 0px rgba(251, 124, 8, 0.2);
    }

    .container {
        padding: 0 16px; /* 根据设计稿调整内边距 */
    }

    /* Header & Navigation */
    .site-header {
        height: var(--header-height);
        display: flex;
        align-items: center;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); /* Header 底部阴影 */
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    body {
        padding-top: var(--header-height);
    }

    .main-nav {
        display: block;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 10px 16px 10px 16px;
    }
    .main-nav a.nav-item-custom {
        font-size: 14px;
    }
    .logo {
        display: flex;
        align-items: center;
    }

    .logo-img {
        height: 24px;
        width: auto;
    }

    .header-actions {
        display: flex !important; /* 显示操作区 */
        align-items: center;
        margin-left: auto;
        gap: 8px;
    }


    .login-link {
        font-family: var(--font-family-base);
        font-size: 14px;
        color: var(--color-text-secondary);
        margin-right: 8px;
        line-height: 20px;
        text-decoration: none;
        display: block;
        min-height: auto; /* 覆盖全局的min-height: 44px 避免错位 */
        opacity: 1;
        transition: opacity 200ms ease-out, background-color 200ms ease;
    }

    .login-link:active {
        opacity: 0.7;
    }

    .header-actions .btn.btn-primary.register-btn {
        background-image: var(--btn-gradient);
        box-shadow: var(--btn-shadow);
        color: var(--color-white);
        font-family: var(--font-family-inter);
        font-size: 14px;
        line-height: 17px;
        padding: 4px 10px 3px;
        border-radius: 0; /* 移除圆角以匹配设计稿 */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: auto;
        margin-right: 8px;
        transition: opacity 200ms ease-out, transform 100ms ease;
    }

    .header-actions .btn.btn-primary.register-btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: 8px;
        cursor: pointer;
        padding: 0; /* 移除 padding 以精准对齐 */
        width: 16px;
        height: 16px;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative; /* 确保 z-index 生效 */
        z-index: 100; /* 提升层级，防止被其他元素遮挡导致无法点击 */
    }

    .mobile-menu-toggle svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Overlay Mask */
    .mobile-overlay-mask {
        display: none; /* 默认隐藏，在移动端需要时才显示，这里使用 display 防止 opacity 动画前遮挡点击 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--overlay-bg);
        z-index: var(--overlay-z-index);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--overlay-duration) var(--overlay-easing),
                    visibility var(--overlay-duration) var(--overlay-easing);
    }

    .main-nav.active .mobile-overlay-mask {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    /* Menu Panel (Drops down from top) */
    .mobile-menu-panel {
        display: none; /* 默认隐藏，防止未激活时遮挡底部元素 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--menu-bg);
        box-shadow: var(--menu-shadow);
        z-index: calc(var(--overlay-z-index) + 1);
        transform: translateY(-100%);
        transition: transform var(--overlay-duration) var(--overlay-easing);
        flex-direction: column;
        padding-top: 20px;
        padding-bottom: 20px;
        border-radius: 0 0 16px 16px; /* 底部圆角 */
    }

    .main-nav.active .mobile-menu-panel {
        display: flex;
        transform: translateY(0);
    }

    /* Close Icon (X) */
    .close-btn-wrapper {
        position: absolute;
        top: 21px;
        right: 18px; /* 375 - 341 - 16 = 18px */
        width: 16px;
        height: 16px;
        cursor: pointer;
        z-index: 2;
    }

    .close-icon-line1 {
        position: absolute;
        top: 1px;
        left: 0;
        width: 16px;
        height: 2px;
        background: var(--color-icon);
        transform: rotate(45deg);
        transform-origin: 1px 1px;
    }

    .close-icon-line2 {
        position: absolute;
        bottom: 7px;
        left: 10px;
        width: 16px;
        height: 2px;
        background: var(--color-icon);
        transform: rotate(-45deg);
        transform-origin: 1px 15px;
    }

    /* Grid Layout for Menu Items */
    .menu-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        width: 100%;
        padding: 35px 30px 16px;
        list-style: none;
        margin: 0;
    }
    .main-nav ul{
        gap: 0;
    }
    .menu-grid li {
        width: 25%; /* 根据设计稿的宽度 */
        margin-bottom: 16px; /* 行间距 */
    }
    
    /* 每行4个元素，使用伪类或者特定的外边距来实现等间距 */
    /* 因为设计稿是两行，每行四个，我们可以依赖 flex-wrap 和 justify-content: space-between */
    /* 为了确保最后一排如果不够四个也能左对齐，但这里正好是 8 个元素 */

    .menu-grid .menu-item {
        font-family: var(--font-family-base);
        font-size: 12px;
        color: var(--color-text-primary);
        text-align: center;
        width: 100%;
        text-decoration: none;
        line-height: 1.2;
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-bottom: none;
    }

    .menu-grid .menu-item.active {
        color: var(--color-text-active);
        font-weight: 500;
    }

    .menu-grid .menu-item:active {
        opacity: 0.7;
    }
    
    .mobile-only-action {
        display: none !important; /* 在新的弹层设计中，登录注册已经移出弹层到了头部 */
    }
    .group-216 {
        margin: 0;
    }
    /* 隐藏原有的 ul 样式 */
    .main-nav > ul:not(.menu-grid) {
        display: none;
    }

    /* mobile <750px */
    .hero-section.group-216 {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0;
        background: none; /* 移除 PC 端的全屏背景 */
        display: block;
        box-sizing: border-box;
    }
    
    /* mobile <750px */
    .hero-section.group-216 .hero-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0; /* 容器内边距移除，由内部元素控制 */
        margin: 0;
    }
    
    /* mobile <750px */
    .hero-section.group-216 .hero-visual {
        display: block; /* 覆盖 PC 端的 display: none */
        position: relative;
        width: 100%;
        /* 使用从设计稿提取的百分比高度或者定高，根据截图大概是 187px */
        height: 187px;
        order: -1; /* 将图片调整到文本上方 */
        overflow: hidden;
    }
    
    /* mobile <750px */
    .hero-section.group-216 .lighthouse-placeholder {
        position: absolute;
        top: 0;
        left: 0; /* 修改为 0，让容器占满父级以便 contain 计算 */
        width: 100%;
        height: 100%; /* 使用 100% 占满 hero-visual 的 187px 高度 */
        background-image: url("../images/hero_illustration.png"); /* 使用实际存在的图片文件 */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    /* mobile <750px */
    .hero-section.group-216 .hero-content {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 47px 4px 47px 16px;
        width: 231px;
        height: 187px;

        z-index: 1; /* 保证文本在图片渐变之上 */
    }
    
    /* mobile <750px */
    .hero-section.group-216 .hero-title {
        line-height: 31px !important;
        letter-spacing: 0;
        color: #070c20;
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
        font-size: 22px !important;
        font-weight: 500;
        margin: 0;
        white-space: normal !important;
        text-align: left;
    }
    
    /* mobile <750px */
    .hero-section.group-216 .hero-desc {
        margin: 8px 0px 0px;
        width: 211px;
        line-height: 18px !important;
        letter-spacing: 0;
        color: #414b61;
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
        font-size: 12px !important;
        text-align: left;
    }
    
    /* mobile <750px */
    .hero-section.group-216 .hero-actions {
        display: none; /* 原型截图中该区域无按钮，故隐藏 */
    }

    /* 添加底部过渡渐变条，匹配 rectangle828 */
    /* mobile <750px */
    .hero-section.group-216::after {
        content: '';
        position: absolute;
        top: 143px;
        left: 0;
        width: 100%;
        height: 44px;
        background-image: linear-gradient(180deg, rgba(244, 245, 247, 0) 0%, #f4f5f7 100%);
        z-index: 2;
        pointer-events: none;
    }

    /* Process Diagram (Area 3) */
    .process-diagram-card-img {
        width: 100%;
        height: auto;
    }
    
    .area-3-subtitle {
        font-size: 14px;
        line-height: 1.5;
        text-align: left; /* 移动端左对齐更易读 */
        display: none;
    }

    /* Area 4 Cards */
    .area-4-cards {
        flex-direction: column;
        height: auto;
    }
    
    .area-4-cards__visual {
        width: 100%;
        height: 200px;
        display: none;
    }
    
    .area-4-cards__content {
        padding: 18px 16px 16px;
    }
    
    .area-4-cards__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-bottom: none;
        display: flex;
        margin-bottom: 12px;
    }

    .area-4-cards__tabs::-webkit-scrollbar {
        display: none;
    }
    
    .area-4-cards__tab-item {
        display: inline-block;
        min-height: auto;
        margin-right: 28px;
        padding-bottom: 12px;
        flex: 0 0 auto;
        font-size: 16px;
        line-height: 22px;
    }

    .area-4-cards__tab-item.active::after {
        bottom: 0;
        height: 2px;
        border-radius: 2px;
    }
    
    .area-4-cards__pane {
        grid-template-columns: 1fr !important;
        display: none;
    }

    .area-4-cards__pane.active {
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }

    .area-4-cards__feature {
        padding: 18px 0;
        gap: 12px;
    }

    .area-4-cards__feature + .area-4-cards__feature {
        border-top: 1px solid #eef2f6;
    }

    .area-4-cards__feature-icon {
        width: 36px;
        height: 36px;
    }
    
    .area-4-cards__feature-title {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 8px;
    }
    
    .area-4-cards__feature-desc {
        font-size: 14px;
        line-height: 22px;
    }

    /* Area 5 Cards */
    .area-5-cards__inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }
    
    .area-5-cards__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-bottom: none;
        display: flex;
        order: 0;
    }

    .area-5-cards__tabs::-webkit-scrollbar {
        display: none;
    }
    
    .area-5-cards__tab {
        display: inline-block;
        width: auto;
        min-width: auto;
        height: auto;
        margin-right: 28px;
        min-height: auto;
        flex: 0 0 auto;
        padding: 0 0 12px;
        font-size: 16px;
        line-height: 22px;
        background: none;
        color: #5a677d;
        position: relative;
    }

    .area-5-cards__tab:last-child {
        margin-right: 0;
    }

    .area-5-cards__tab-num,
    .area-5-cards__tab-sep {
        display: none;
    }

    .area-5-cards__tab-text {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        font-size: 14px;
    }

    .area-5-cards__tab--active {
        color: #fb7807;
        font-weight: 500;
    }

    .area-5-cards__tab--active::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #fb7807;
        border-radius: 2px;
    }
    
    .area-5-cards__stage {
        min-height: 150px;
    }

    .area-5-cards__panel {
        order: 1;
    }

    /* Area 6 AI Cards */
    .area-6-cards__viewport {
        margin: 0 40px;
    }

    .area-6-cards__list {
        align-items: center;
    }

    .area-6-cards__item {
        width: min(290px, calc(100vw - 112px));
        max-width: 100%;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin-right: 16px;
    }

    .area-6-cards__item:last-child {
        margin-right: 0;
    }

    .area-6-cards__item img {
        width: 100%;
        height: 100% !important;
        object-fit: contain !important;
    }

    .area-6-cards__item--service img {
        object-fit: contain !important;
    }

    .area-6-cards__btn {
        width: 32px;
        height: 32px;
        min-height:32px;
    }

    /* Area 7 Certifications */
    .area-7-pc{
        margin-top: -179px;
    }
    .area-7-cards__grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .area-7-cards__heading{
        font-size: 12px;
    }
    
    .area-7-cards__certs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        justify-items: stretch;
    }
    .area-7-cards__sub {
        /* display: block !important; */
        display: none;
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
        color: #6C7380;
    }
    .area-7-cards__globe {
        display: none; /* 移动端隐藏地球背景节省空间 */
    }
    .area-7-cards__info{
        display: flex;
        flex-direction:row;
        gap: 68px;
    }
    .area-7-cards__cert-item {
        width: 100%;
        min-width: 0;
        flex: none;
        padding: 0 4px;
    }

    /* Area 8 Service */
    .area-8-cards{
        padding: 20px 20px;
    }
    .area-8-cards__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .area-8-cards__feature-title {
        font-size: 14px;
    }
    .area-8-cards__feature-desc{
      font-size: 12px;
    }
    .area-8-cards__list {
        grid-template-columns: 1fr;
    }
    
    .area-8-cards__brands {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

/* ==========================================================================
   Area 9 Pricing Mobile Optimization
   ========================================================================== */
    .area-9-cards__tabs {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-bottom: none;
        margin-bottom: 12px;
    }

    .area-9-cards__tabs::-webkit-scrollbar {
        display: none;
    }

    .area-9-cards__tab-item {
        display: inline-block;
        flex: 0 0 auto;
        margin-right: 28px;
        padding: 0 0 12px;
        font-size: 16px;
        line-height: 22px;
        color: #5a677d;
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
    }

    .area-9-cards__tab-item:last-child {
        margin-right: 0;
    }

    .area-9-cards__tab-item.active {
        color: #fb7807;
        font-weight: 500;
    }

    .area-9-cards__tab-item.active::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #fb7807;
        border-radius: 2px;
    }

    .area-9-cards__grid {
        display: block;
    }
    
    /* 调整价格卡片样式 */
    .area-9-cards__card {
        display: none;
        margin-bottom: 0;
        min-height: auto;
    }

    .area-9-cards__card.active {
        display: block;
    }

    .area-9-cards__benefits {
        display: none;
        margin: 10px;
    }

    .area-9-cards__benefits.active {
        display: block;
    }

    .area-9-benefits__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .area-9-cards__benefits {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .area-9-cards__benefits-body {
        flex-direction: column;
        padding: 20px 16px 24px;
        gap: 16px;
    }

    .area-9-cards__benefits-divider,
    .area-9-cards__benefits-divider-1,
    .area-9-cards__benefits-divider-2 {
        display: none;
    }

    .area-9-cards__benefits-col,
    .area-9-cards__benefits-col--wide {
        flex: 0 0 auto;
    }

    .area-9-cards__benefits-title {
        font-size: 18px;
        letter-spacing: 0;
    }

    .area-9-cards__benefits-head {
        font-size: 16px;
        text-align: left;
    }

    .area-9-cards__meta {
        white-space: normal;
    }

    .area-9-cards__tag,
    .area-9-cards__tag--wide {
        width: auto;
    }
    
    /* Area 10 Partners */
    .area-10-partners__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Footer Mobile */
    .footer__main {
        display: block;
        position: relative;
        padding: 52px 16px 28px;
    }

    .footer__character {
        display: block !important;
        position: absolute;
        left: 12px;
        top: -44px;
        width: 132px;
        height: auto;
        pointer-events: none;
        z-index: 2;
    }

    .footer__divider {
        display: none;
    }
    .footer__brand {
        display: none;
    }

    .footer__logo-img {
        width: 150px;
        height: auto;
    }

    .footer__tagline {
        margin-top: 10px;
    }

    .footer__nav-group {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 20px;
    }

    .footer__nav-col {
        gap: 10px;
    }

    .footer__contact {
        margin-left: 0;
        max-width: none;
        padding-left: 156px;
    }

    .footer__contact-title {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .footer__phone-wrapper {
        gap: 10px;
    }

    .footer__phone-number {
        font-size: 26px;
        line-height: 28px;
        white-space: nowrap;
    }

    .footer__address {
        margin-top: 10px;
        line-height: 20px;
    }

    .footer-container {
        padding: 30px 15px;
    }
    .footer-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-3d-character {
        display: none; /* 移动端隐藏3D人物 */
    }
    
    .footer-info, .footer-links, .footer-contact {
        width: 100%;
    }
    
    .footer-links__grid {
        grid-template-columns: repeat(2, 1fr);
    }
/* 
    .area-6-cards__viewport {
        overflow: visible;
    }

    .area-6-cards__item {
        margin-right: 0;
    } */
}

/* ==========================================================================
   横屏适配 (Landscape)
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .site-header {
        position: fixed;
    }
    
    .hero-section {
        padding-top: 80px;
    }
}