/* ==========================================================================
   ARP Overseas Warehouse Landing Page Styles - Production Polished
   Exact 1:1 Match to Templates, Layouts & Color System
   ========================================================================== */

:root {
    --arp-red: #DE1717;
    --arp-red-glow: #F23636;
    --arp-red-dark: #C5221F;
    --arp-red-soft: #FCA5A5;
    --arp-red-bg: #FEF2F2;
    --arp-dark-bg: #0F172A;
    --arp-charcoal: #1E293B;
    --arp-dark-board: #1A2234;
    --arp-text-dark: #0F172A;
    --arp-text-muted: #64748B;
    --arp-text-light: #94A3B8;
    --arp-border: #E2E8F0;
    
    /* 严格保留原有字体配置 */
    --arp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    /* KKW 高质感物流视觉系统渐变与动效光影 */
    --gradient-primary: linear-gradient(135deg, #DE1717 0%, #F23636 100%);
    --gradient-radial: radial-gradient(circle at 50% 0%, rgba(222, 23, 23, 0.18) 0%, transparent 65%);
    --shadow-elegant: 0 10px 40px -10px rgba(222, 23, 23, 0.32);
    --shadow-glow: 0 0 50px rgba(242, 54, 54, 0.4);
    --shadow-lift: 0 20px 50px -15px rgba(15, 23, 42, 0.16);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--arp-font-family);
    background-color: #FFFFFF;
    color: var(--arp-text-dark);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ==========================================================================
   通用辅助类与微动效
   ========================================================================== */
.text-gray { color: #94A3B8 !important; }
.arp-red { color: var(--arp-red) !important; }

.hover-lift {
    transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth), border-color 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}

/* 通用居中标题头 */
.arp-title-header {
    text-align: center;
    margin-bottom: 50px;
}

.arp-title-main {
    font-size: 32px;
    font-weight: 900;
    margin: 0 0 8px;
    color: var(--arp-text-dark);
    letter-spacing: 0.5px;
    text-align: center;
}

.arp-title-sub {
    font-size: 13px;
    font-weight: 700;
    color: var(--arp-text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: center;
}

.arp-title-line {
    width: 48px;
    height: 3px;
    background: var(--gradient-primary);
    margin: 0 auto;
    border-radius: 3px;
}

/* ==========================================================================
   1. 顶部全站 Header 导航栏 (悬浮透光 / 居中导航 / 品牌微标)
   ========================================================================== */
.arp-header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
    transition: all 0.3s var(--transition-smooth);
}

.arp-header-transparent.is-scrolled {
    position: fixed;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.arp-header-centered {
    max-width: 1200px;
    margin: 0 auto;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    position: relative;
}

.arp-header-logo {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    z-index: 10;
    transition: opacity 0.25s ease;
}

.arp-header-logo:hover {
    opacity: 0.85;
}

.arp-logo-img {
    height: 26px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.arp-header-logo:hover .arp-logo-img {
    transform: scale(1.03);
    filter: drop-shadow(0 3px 12px rgba(235, 42, 42, 0.45));
}

.arp-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.arp-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arp-nav-list {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.arp-nav-item {
    position: relative;
}

.arp-nav-link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 0;
    transition: color 0.25s ease, opacity 0.25s ease;
    opacity: 0.88;
}

.arp-nav-link:hover {
    color: #FFFFFF;
    opacity: 1;
}

.arp-nav-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.25s var(--transition-smooth);
}

.arp-nav-item:hover::after,
.arp-nav-item.nav-current::after {
    width: 100%;
}

.arp-mobile-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 1040px) {
    .arp-nav-list {
        gap: 22px;
    }
    .arp-nav-link {
        font-size: 14px;
    }
}

@media (max-width: 860px) {
    .arp-header-logo {
        left: 20px;
    }
    .arp-logo-img {
        height: 22px;
        max-width: 120px;
    }
    .arp-logo-text {
        font-size: 18px;
    }
    .arp-mobile-btn {
        display: block;
    }
    .arp-header-nav {
        display: none;
    }
    .arp-header-nav.is-mobile-open {
        display: flex;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(16px);
        padding: 24px 0;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .arp-header-nav.is-mobile-open .arp-nav-list {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   2. 首页 Hero Banner (沉浸式仓储背景 / 核心服务标 / 询价胶囊)
   ========================================================================== */
.arp-hero-section {
    position: relative;
    width: 100%;
    min-height: 680px;
    padding: 130px 24px 70px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    background-color: #0B0F19;
    overflow: hidden;
}

.arp-hero-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.arp-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.arp-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    padding: 0 24px;
}

/* 1. 顶部红色短横线 + 小标题 */
.arp-hero-top-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.arp-hero-tag-line {
    width: 32px;
    height: 3px;
    background: #E52E2E;
    border-radius: 2px;
}

.arp-hero-tag-text {
    font-size: 13.5px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: 0.5px;
}

/* 2. 主标题：一站式(纯白加粗) 跨境服务(鲜红加粗) */
.arp-hero-title {
    font-size: 54px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.arp-hero-title-red {
    color: #E52E2E !important;
}

/* 3. 英文大写副标题：大号粗体白字 */
.arp-hero-en {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #FFFFFF;
    margin-bottom: 22px;
    text-transform: uppercase;
}

/* 4. 业务特性横排清单：纯白粗体、字号舒适 */
.arp-hero-features-text {
    font-size: 17.5px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .arp-hero-section {
        min-height: 380px;
        padding: 110px 16px 50px;
    }
    .arp-hero-title {
        font-size: 36px;
    }
    .arp-hero-en {
        font-size: 16px;
    }
    .arp-hero-features-text {
        font-size: 14px;
    }
}
/* ==========================================================================
   2. 仓库布局 (1行3列 x 2排 = 6个仓库卡片 - 严格对齐 KKW Trucks 设计)
   ========================================================================== */
.arp-section-warehouses {
    padding: 85px 24px 95px;
    position: relative;
}

.arp-wh-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 统一 一行 3 列网格 */
.arp-wh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* KKW 风格高质感纯白圆角卡片 */
.arp-wh-box {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 30px 26px 28px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    border: 1px solid #F1EAEA;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.arp-wh-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(222, 23, 23, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    border-color: #FECACA;
}

.arp-wh-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 22px;
}

/* 顶部浅粉底色圆角正方形图标容器 (KKW 特色微标) */
.arp-wh-icon-wrap {
    width: 46px;
    height: 46px;
    background: #FDF2F2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arp-wh-icon-wrap svg {
    stroke: #DE1717;
}

.arp-wh-header-tag {
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #DE1717;
    padding: 4px 10px;
    border-radius: 12px;
}

/* 卡片主标题：大写粗体、深黑灰字色 */
.arp-wh-name {
    font-size: 18px;
    font-weight: 900;
    color: #111827;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.3;
}

/* 区域副标小标签 */
.arp-wh-tag-sub {
    font-size: 12px;
    font-weight: 700;
    color: #DE1717;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* 详细地址说明文字：浅灰柔和排版、行高舒适 */
.arp-wh-address {
    font-size: 13.5px;
    line-height: 1.65;
    color: #6B7280;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 992px) {
    .arp-wh-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .arp-wh-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   3. 运营地点地图 (1:1 严格对齐原图：丝滑无断层粉红雾化背景 + 深炭黑大圆角地图卡片)
   ========================================================================== */
.arp-section-map {
    padding: 65px 24px 75px;
    background-color: #FFFFFF;
    background-image: url('../images/map-glow-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.arp-section-map .arp-title-main {
    color: var(--arp-text-dark);
}

.arp-section-map .arp-title-sub {
    color: #94A3B8;
}

/* 截图中精致的深炭黑圆角大面板 */
.arp-map-board {
    max-width: 1060px;
    margin: 0 auto;
    background: #202328;
    border-radius: 18px;
    padding: 30px 28px 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.38);
    position: relative;
    overflow: hidden;
}

/* 核心区域微弱红光氛围 (类似 KKW 柔和科技感) */
.arp-map-halo {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 280px;
    background: radial-gradient(circle, rgba(222, 23, 23, 0.10) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(50px);
}

.arp-map-viewport {
    width: 100%;
    margin-bottom: 22px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.arp-map-svg {
    max-width: 760px;
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
}

/* 50 州全境矢量路径：高对比度纯白微灰 */
.arp-map-state {
    fill: #F1F3F5;
    stroke: #D8DCE3;
    stroke-width: 0.8px;
    transition: fill 0.25s ease, opacity 0.2s ease;
}

.arp-map-state:hover {
    fill: #E2E8F0;
    cursor: default;
}

/* 加州与宾州微亮标识 */
#state-06, #state-42 {
    fill: #F8FAFC;
}

/* 标牌与雷达呼吸光圈 */
.arp-map-pin {
    pointer-events: auto;
    cursor: pointer;
}

.arp-pin-core {
    filter: drop-shadow(0 0 6px rgba(222, 23, 23, 0.85));
}

@keyframes radarPing {
    0% {
        r: 6;
        opacity: 0.95;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        r: 26;
        opacity: 0;
    }
}

.arp-pin-radar {
    fill: none;
    stroke: #E82424;
    stroke-width: 1.8;
    animation: radarPing 2.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

.arp-pin-label {
    font-size: 13.5px;
    font-weight: 800;
    fill: #DE1717;
    letter-spacing: 0.6px;
    font-family: inherit;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

.arp-pin-label.arp-label-left {
    text-anchor: end;
}

/* 底部 4 联排深灰半透运营中心卡片 (1:1 严格对齐参考截图) */
.arp-map-cards-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
    z-index: 3;
}

.arp-map-card {
    background: #34373E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 13px 14px;
    transition: transform 0.25s var(--transition-smooth), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.arp-map-card:hover {
    background: #3D4149;
    border-color: rgba(222, 23, 23, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45), 0 0 14px rgba(222, 23, 23, 0.15);
}

.arp-map-card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.arp-loc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arp-map-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.arp-map-card-address {
    font-size: 11.8px;
    color: #94A3B8;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

@media (max-width: 992px) {
    .arp-map-cards-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .arp-map-board {
        padding: 32px 20px 24px;
    }
}

@media (max-width: 580px) {
    .arp-map-cards-strip {
        grid-template-columns: 1fr;
    }
    .arp-pin-label {
        font-size: 11px;
    }
}
/* ==========================================================================
   4. 跨境卖家一站式海外仓操作流程 (3排完整闭环S型流转链路)
   ========================================================================== */
.arp-section-process {
    padding: 90px 20px;
    background-color: #FFFFFF;
    background-image: url('../images/map-glow-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.arp-pipeline-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 10px 40px;
}

.arp-pipe-row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 88px;
    width: 100%;
}

.arp-pipe-row:last-child {
    margin-bottom: 0;
}

/* 第 1 排 3个胶囊，右对齐第 2 排的右侧末端胶囊 */
.arp-pipe-r1 {
    justify-content: flex-end;
}

.arp-pipe-r1 .arp-capsule-anchor {
    margin-left: 0;
}

/* 第 2 排与第 3 排 4个胶囊两端撑满，均匀分布 */
.arp-pipe-r2,
.arp-pipe-r3 {
    justify-content: space-between;
}

/* 第 2 排视觉上从右向左流转 */
.arp-pipe-r2 {
    flex-direction: row-reverse;
}

/* 锚点容器，保证胶囊与弯管连接线完全绑定 */
.arp-capsule-anchor {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

/* 胶囊通用高精立体造型 */
.arp-capsule {
    flex: 0 0 auto;
    min-width: 172px;
    height: 60px;
    border-radius: 30px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
    z-index: 2;
    cursor: default;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.arp-capsule:hover {
    transform: translateY(-2px);
}

/* 1. 大红胶囊：饱满立体微渐变 + 顶部微高光 + 底部深红光晕投影 */
.arp-cap-red {
    background: linear-gradient(180deg, #E82424 0%, #D41212 100%);
    color: #FFFFFF;
    box-shadow: 
        0 8px 20px -3px rgba(212, 18, 18, 0.42),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.36),
        inset 0 -2px 4px rgba(150, 8, 8, 0.35);
}

.arp-cap-red .arp-cap-text-main {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* 2. 纯白胶囊：微高光 + 柔和立体阴影 */
.arp-cap-white {
    background: #FFFFFF;
    box-shadow: 
        0 8px 24px -2px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.arp-cap-white.arp-text-red .arp-cap-text-main {
    color: #DE1717;
    font-size: 14.5px;
    font-weight: 700;
}

.arp-cap-white.arp-text-red .arp-cap-text-sub {
    color: #DE1717;
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.15;
}

.arp-cap-white.arp-text-dark .arp-cap-text-main {
    color: #334155;
    font-size: 15px;
    font-weight: 700;
}

.arp-capsule .arp-cap-text-main {
    line-height: 1.25;
}

/* 胶囊之间的细红流转连接器 (线条 + 空心圆环 + 箭头) */
.arp-pipe-connector {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 20px;
    margin: 0 6px;
    min-width: 44px;
}

/* 贯穿细线 */
.arp-conn-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.8px;
    background: linear-gradient(90deg, rgba(238, 59, 59, 0.5) 0%, rgba(222, 23, 23, 0.9) 50%, rgba(238, 59, 59, 0.5) 100%);
    transform: translateY(-50%);
}

/* 细线上嵌入的空心圆环节点 */
.arp-conn-node {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.8px solid #E82424;
    position: absolute;
    top: 50%;
    left: calc(50% - 10px);
    transform: translateY(-50%);
    z-index: 1;
    box-shadow: 0 0 4px rgba(232, 36, 36, 0.25);
}

/* 指示箭头 */
.arp-conn-arrow {
    position: absolute;
    top: 50%;
    left: calc(50% + 5px);
    width: 7px;
    height: 7px;
    border-top: 1.8px solid #E82424;
    border-right: 1.8px solid #E82424;
    z-index: 1;
}

.arp-dir-right .arp-conn-arrow {
    transform: translateY(-50%) rotate(45deg);
}

.arp-dir-left .arp-conn-arrow {
    transform: translateY(-50%) rotate(-135deg);
}

/* 1:1 还原截图弯管：右上角连接器（从排1“贴海外仓标签”到排2“送国内前置仓”） */
.arp-turn-elbow-r1 {
    position: absolute;
    right: -24px;
    top: 24px;
    width: 48px;
    height: 148px;
    pointer-events: none;
    z-index: 1;
}

/* 1:1 还原截图弯管：左侧连接器（从排2“海外仓”到排3“上架”） */
.arp-turn-elbow-r2 {
    position: absolute;
    left: -24px;
    top: 24px;
    width: 48px;
    height: 148px;
    pointer-events: none;
    z-index: 1;
}

.arp-turn-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

@media (max-width: 992px) {
    .arp-pipeline-wrapper {
        padding: 10px 10px;
    }
    .arp-capsule {
        min-width: 140px;
        height: 54px;
        padding: 0 12px;
    }
    .arp-cap-red .arp-cap-text-main,
    .arp-cap-white.arp-text-dark .arp-cap-text-main {
        font-size: 13.5px;
    }
    .arp-cap-white.arp-text-red .arp-cap-text-main {
        font-size: 13px;
    }
    .arp-cap-white.arp-text-red .arp-cap-text-sub {
        font-size: 10.5px;
    }
}

@media (max-width: 860px) {
    .arp-pipe-row {
        flex-direction: column !important;
        gap: 16px;
        margin-bottom: 24px;
    }
    .arp-pipe-connector,
    .arp-turn-elbow-r1,
    .arp-turn-elbow-r2 {
        display: none;
    }
    .arp-capsule {
        width: 100%;
        max-width: 320px;
        height: 52px;
    }
}

/* ==========================================================================
   5. 海外仓仓库展示 (1:1 严格对齐截图：左右上角微红渐变 + 标题小红线 + 超透HUD黑曜石微光玻璃 + 全屏沉浸式展台)
   ========================================================================== */
.arp-section-gallery {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    background: #06080D;
    color: #FFFFFF;
}

/* 1. 顶部标题横幅：微弱红光氛围在左上角和右上角，中间深邃纯黑 */
.arp-gallery-header-band {
    width: 100%;
    position: relative;
    padding: 56px 24px 26px;
    background-color: #06080D;
    background-image: 
        radial-gradient(ellipse 480px 320px at 0% 0%, rgba(220, 24, 24, 0.20) 0%, rgba(220, 24, 24, 0.05) 55%, transparent 100%),
        radial-gradient(ellipse 480px 320px at 100% 0%, rgba(220, 24, 24, 0.20) 0%, rgba(220, 24, 24, 0.05) 55%, transparent 100%);
    text-align: center;
    z-index: 2;
}

.arp-gallery-header {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
}

.arp-gallery-title {
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 2px;
    margin: 0 0 14px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.9);
}

.arp-gallery-title .arp-red-text {
    color: #DE1717;
    display: inline;
}

/* 标题下方红色小短横线 (统一全站视觉规范) */
.arp-gallery-header .arp-title-line {
    width: 50px;
    height: 3px;
    background: #DE1717;
    margin: 0 auto 16px;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(222, 23, 23, 0.6);
}

.arp-gallery-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #CBD5E1;
    font-size: 14px;
    letter-spacing: 1.6px;
}

.arp-gallery-sub-line {
    display: inline-block;
    width: 48px;
    height: 1px;
    background: rgba(148, 163, 184, 0.4);
}

/* 2. 下方全屏横跨实景展台 */
.arp-gallery-stage {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 35px;
}

.arp-gallery-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.arp-gallery-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    display: block;
}

/* 顶部与标题横幅平滑交融的渐隐过渡 */
.arp-gallery-stage-top-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(180deg, #06080D 0%, rgba(6, 8, 13, 0.85) 35%, rgba(6, 8, 13, 0) 100%);
}

/* 底部深邃暗黑渐变层 (绝不遮挡地面反光，仅在最底端平滑托底) */
.arp-gallery-stage-subtle-tint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(0deg, #06080D 0%, rgba(6, 8, 13, 0.7) 40%, transparent 100%);
}

/* 悬浮 3 张高透毛玻璃卡片 (清晰透出地坪高光与黄色线条) */
.arp-gallery-cards-bar {
    position: relative;
    z-index: 5;
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.arp-gcard {
    flex: 1;
    max-width: 380px;
    /* 核心高透质感：暗黑通透半透明 + 毛玻璃磨砂滤镜，让地坪反光明显可见 */
    background: rgba(10, 14, 22, 0.42);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 
        0 14px 32px -4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.arp-gcard:hover {
    transform: translateY(-4px);
    background: rgba(14, 20, 30, 0.58);
    border-color: rgba(232, 36, 36, 0.6);
    box-shadow: 
        0 20px 45px -4px rgba(0, 0, 0, 0.65), 
        0 0 20px rgba(222, 23, 23, 0.25);
}

/* 卡片间微弱垂直分隔线 */
.arp-gcard-sep {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.16);
    margin: 0 16px;
    flex-shrink: 0;
}

/* 图标暗底红圈发光环 */
.arp-gcard-ico-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid #DE1717;
    background: rgba(14, 18, 24, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(222, 23, 23, 0.35), inset 0 0 8px rgba(222, 23, 23, 0.15);
}

.arp-gcard-ico {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arp-gcard-info {
    flex: 1;
}

.arp-gcard-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.arp-gcard-desc {
    font-size: 12.8px;
    color: #94A3B8;
    line-height: 1.45;
    letter-spacing: 0.2px;
}

@media (max-width: 960px) {
    .arp-gallery-stage {
        min-height: auto;
        padding-bottom: 30px;
    }
    .arp-gallery-cards-bar {
        flex-direction: column;
        gap: 14px;
    }
    .arp-gcard-sep {
        display: none;
    }
    .arp-gcard {
        max-width: 100%;
        width: 100%;
        padding: 18px 20px;
    }
}

/* ==========================================================================
   6. 对比表 (arp-comparison.hbs 完美对齐)
   ========================================================================== */
.arp-section-comparison {
    padding: 90px 20px 100px;
    background: #ffffff;
}

.arp-compare-dual {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.arp-compare-card {
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth);
}

.arp-card-arp {
    background: #FFFFFF;
    border: 2px solid var(--arp-red);
    box-shadow: 0 12px 36px rgba(222, 23, 23, 0.08);
    position: relative;
}

.arp-card-arp::before {
    content: 'RECOMMENDED';
    position: absolute;
    top: -13px;
    right: 28px;
    background: var(--gradient-primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(222, 23, 23, 0.3);
}

.arp-card-other {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    opacity: 0.95;
}

.arp-cc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #F1F5F9;
}

.arp-cc-badge {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arp-cc-badge-svg {
    width: 26px;
    height: 26px;
    display: block;
}

.arp-cc-brand-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    color: var(--arp-red);
}

.arp-cc-brand-title.text-gray {
    color: #64748B !important;
}

.arp-cc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.arp-cc-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #1E293B;
}

.arp-cc-list.text-gray li {
    color: #64748B !important;
}

.arp-chk-red {
    color: var(--arp-red);
    font-weight: 900;
    font-size: 15px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    display: inline-block;
    line-height: 1.6;
}

.arp-cross-gray {
    color: #94A3B8;
    font-weight: 900;
    font-size: 15px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    display: inline-block;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .arp-compare-dual {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   7. 承运商快递打单渠道 (arp-carriers.hbs 完美对齐)
   ========================================================================== */
.arp-section-carriers {
    padding: 90px 20px 100px;
    background: #FBFBFB;
}

.arp-carriers-row {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.arp-c-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 12px 12px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 
        0 14px 34px -4px rgba(222, 23, 23, 0.13),
        0 4px 14px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
}

.arp-c-card:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 20px 42px -4px rgba(222, 23, 23, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.06);
}

.arp-c-cap {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    background: linear-gradient(180deg, #E82424 0%, #D41212 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.1px;
    box-shadow: 
        0 6px 14px -2px rgba(212, 18, 18, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.arp-c-body {
    padding: 22px 6px 6px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #475569;
    text-align: center;
    width: 100%;
}

.arp-c-body p {
    margin: 0;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .arp-carriers-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .arp-carriers-row {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}

/* ==========================================================================
   9. ARP 跨境现货分销平台介绍与推广 (arpdepot.com)
   ========================================================================== */
.arp-section-distribution {
    background: #0B0F19;
    color: #94A3B8;
    padding: 85px 20px 75px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    position: relative;
}

.arp-distribution-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.arp-distribution-title {
    font-size: 36px;
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 10px;
    letter-spacing: 0.5px;
    text-align: center;
}

.arp-distribution-url {
    font-size: 18px;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 50px;
    text-align: center;
}

.arp-distribution-guarantees {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
    text-align: center;
}

.arp-g-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.arp-g-ring {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(222, 23, 23, 0.12);
    border: 1.5px solid rgba(222, 23, 23, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(222, 23, 23, 0.25);
    transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
}

.arp-g-item:hover .arp-g-ring {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-glow);
    border-color: var(--arp-red);
}

.arp-g-label {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    text-align: center;
}

.arp-distribution-btn-wrap {
    margin-bottom: 0;
    text-align: center;
}

.arp-btn-learn {
    display: inline-block;
    text-decoration: none;
    background: var(--gradient-primary);
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 40px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-elegant);
    transition: transform 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
}

.arp-btn-learn:hover {
    color: #FFFFFF !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   10. 网站独立页脚 (Site Footer)
   ========================================================================== */
.arp-site-footer {
    background: #06090F;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px 20px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.arp-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.arp-footer-copy {
    margin: 0;
    padding: 0;
    border-top: none;
    font-size: 13px;
    color: #64748B;
    text-align: center;
    line-height: 1.6;
}

.arp-footer-copy a {
    color: #94A3B8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.arp-footer-copy a:hover {
    color: var(--arp-red);
}

@media (max-width: 768px) {
    .arp-distribution-guarantees,
    .arp-footer-guarantees {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .arp-section-distribution {
        padding: 60px 20px 50px;
    }
}

/* ==========================================================================
   11. 默认单页与博客文章专属样式 (page.hbs & post.hbs)
   ========================================================================== */
.arp-page-main {
    min-height: 80vh;
    background: #FFFFFF;
}

.arp-page-hero {
    background: #0B0F19;
    background-image: radial-gradient(circle at 50% 30%, rgba(222, 23, 23, 0.16) 0%, transparent 60%);
    color: #FFFFFF;
    padding: 140px 24px 70px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.arp-page-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.arp-page-title {
    font-size: 38px;
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

.arp-page-excerpt {
    font-size: 16px;
    color: #CBD5E1;
    margin: 0;
    line-height: 1.7;
}

.arp-page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px 90px;
}

.arp-page-content {
    font-size: 16px;
    line-height: 1.85;
    color: #334155;
}

.arp-page-content h2 {
    font-size: 26px;
    font-weight: 900;
    color: #0F172A;
    margin-top: 50px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid #F1F5F9;
    position: relative;
}

.arp-page-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--gradient-primary);
}

.arp-page-content h3 {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin-top: 32px;
    margin-bottom: 12px;
}

.arp-page-content p {
    margin-bottom: 20px;
}

.arp-page-content ul,
.arp-page-content ol {
    margin-bottom: 28px;
    padding-left: 24px;
}

.arp-page-content li {
    margin-bottom: 10px;
}

.arp-page-cta-box {
    background: linear-gradient(135deg, #FEF2F2 0%, #FFF5F5 100%);
    border: 1.5px dashed #FCA5A5;
    border-radius: 16px;
    padding: 44px 30px;
    text-align: center;
    margin-top: 60px;
}

.arp-page-cta-box h3 {
    font-size: 24px;
    font-weight: 900;
    color: #0F172A;
    margin: 0 0 10px;
}

.arp-page-cta-box p {
    font-size: 15px;
    color: #64748B;
    margin: 0 0 24px;
}

.arp-btn-quote {
    background: var(--gradient-primary);
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-elegant);
    transition: transform 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
}

.arp-btn-quote:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}


/* ==========================================================================
   10. 模态询价弹窗 (KKW 风格高质感弹窗)
   ========================================================================== */
.arp-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 15, 25, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.arp-modal-backdrop.is-active {
    display: flex;
    opacity: 1;
}

.arp-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 620px;
    width: 100%;
    padding: 40px;
    position: relative;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
    transform: scale(0.96);
    transition: transform 0.3s var(--transition-spring);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.arp-modal-backdrop.is-active .arp-modal {
    transform: scale(1);
}

.arp-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #F1F5F9;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #64748B;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.arp-modal-close:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.arp-modal-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--arp-red);
    margin-bottom: 6px;
}

.arp-modal-title {
    font-size: 24px;
    font-weight: 900;
    color: #0F172A;
    margin: 0 0 8px;
}

.arp-modal-subtitle {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 24px;
}

.arp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.arp-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.arp-form-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.arp-form-input,
.arp-form-select,
.arp-form-textarea {
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #FFFFFF;
    color: #0F172A;
}

.arp-form-input:focus,
.arp-form-select:focus,
.arp-form-textarea:focus {
    border-color: var(--arp-red);
    box-shadow: 0 0 0 3px rgba(222, 23, 23, 0.15);
}

.arp-form-submit {
    width: 100%;
    height: 50px;
    background: var(--gradient-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-elegant);
    transition: transform 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
    margin-top: 8px;
}

.arp-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.arp-form-toast {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
}

.arp-form-toast.is-success {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

@media (max-width: 600px) {
    .arp-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .arp-modal {
        padding: 30px 20px;
    }
}


/* ==========================================================================
   13. 全站独立内页通用规范 (Hero Banner & 版心容器)
   ========================================================================== */

/* 1. 统一版心最大宽度与内边距 */
/* 统一内页版心容器规范 (关于我们 / 服务 / 客户 / 联系我们) */
.about-container,
.services-container,
.clients-container,
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. 统一 Hero Banner 容器与高度 */
.about-hero-section,
.services-hero-section,
.clients-hero-section,
.contact-hero-section {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    background: #0B1120;
}

.about-hero-img-wrap,
.services-hero-img-wrap,
.clients-hero-img-wrap,
.contact-hero-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.about-hero-img,
.services-hero-img,
.clients-hero-img,
.contact-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    opacity: 0.55;
    display: block;
}

/* 3. 统一蒙层：左侧深邃幽蓝(确保高对比度)，右侧自然通透透出仓库 */
.about-hero-overlay,
.services-hero-overlay,
.clients-hero-overlay,
.contact-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* background: linear-gradient(90deg, rgba(11, 17, 32, 0.92) 0%, rgba(11, 17, 32, 0.85) 35%, rgba(11, 17, 32, 0.55) 65%, rgba(11, 17, 32, 0.25) 100%); */
}

.about-hero-text,
.services-hero-text,
.clients-hero-text,
.contact-hero-text {
    max-width: 680px;
}

/* 4. 英文小标：浅蓝灰、大写、字间距 */
.about-hero-eyebrow,
.services-hero-eyebrow,
.clients-hero-eyebrow,
.contact-hero-eyebrow {
    font-size: 14px;
    font-weight: 700;
    color: #CBD5E1 !important;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
    text-shadow: none !important;
}

/* 5. 主标题：纯净白字 + 鲜明红色关键字高光 */
.about-hero-title,
.services-hero-title,
.clients-hero-title,
.contact-hero-title {
    font-size: 46px;
    font-weight: 900;
    color: #FFFFFF !important;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    text-shadow: none !important;
}

.hero-red {
    color: #EF4444 !important;
}

/* 6. 中文加粗副标题：高亮白/浅冷灰，对比度极高 */
.about-hero-subtitle,
.services-hero-subtitle,
.clients-hero-subtitle,
.contact-hero-subtitle {
    font-size: 21px;
    font-weight: 800;
    color: #F8FAFC !important;
    letter-spacing: 0.5px;
    margin: 0 0 16px;
    line-height: 1.35;
    text-shadow: none !important;
}

/* 7. 红色短横线分隔条 */
.about-hero-line,
.services-hero-line,
.clients-hero-line,
.contact-hero-line {
    width: 44px;
    height: 3.5px;
    background: #EF4444 !important;
    border-radius: 2px;
    margin-bottom: 18px;
}

/* 8. 详细描述说明文字：明亮灰白，绝对清晰，无阴影 */
.about-hero-desc,
.services-hero-desc,
.clients-hero-desc,
.contact-hero-desc {
    font-size: 14.5px;
    color: #FFFFFF !important;
    line-height: 1.75;
    margin: 0;
    font-weight: 400;
    text-shadow: none !important;
}


/* ==========================================================================
   14. 关于我们 (About Us) 页面专属样式
   ========================================================================== */
.about-page-main {
    background-color: #fff;
    font-family: var(--arp-font-family);
}



/* 2. 中间核心板块 */
.about-core-section {
    padding-top: 36px;
    padding-bottom: 24px;
}

.about-core-grid {
    display: grid;
    grid-template-columns: 1fr 410px;
    gap: 28px;
    align-items: stretch;
}

/* 左侧白底特性卡片容器 (淡蓝色微渐变，纯正原图质感) */
.about-features-col {
    background: #F5F9FC;
    border-radius: 8px;
    padding: 28px 28px 24px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    border: 1px solid #EDF2F7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
}

.about-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.about-feature-full {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* 红底白标圆角圆形图标 */
.about-feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #DE1717;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(222, 23, 23, 0.28);
}

.about-feature-icon svg {
    width: 22px;
    height: 22px;
}

.about-feature-text {
    flex: 1;
}

.about-feature-title {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.about-feature-desc {
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

/* 右侧美东、美西双总部展示 */
.about-hqs-col {
    display: flex;
    flex-direction: column;
}

.about-hqs-flex {
    display: flex;
    gap: 16px;
    height: 100%;
}

.about-hq-card {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-hq-img-box {
    width: 100%;
    overflow: hidden;
    background: #F1F5F9;
}

.about-hq-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.about-hq-card:hover .about-hq-img {
    transform: scale(1.03);
}

.about-hq-badge {
    background: #DE1717;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    padding: 10px 8px;
    letter-spacing: 0.8px;
}

/* ==========================================================================
   14.1 关于我们 - 占据全美热门港口横幅
   ========================================================================== */
.about-ports-banner-section {
    width: 100%;
    position: relative;
    background-image: url('../images/about-ports-ship.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 80px 0;
    margin-top: 40px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* 白色悬浮卡片 (左侧红边条 + 纯白底色 + 微阴影) */
.about-ports-floating-card {
    background: #FFFFFF;
    border-radius: 6px;
    border-left: 5px solid #DE1717;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    padding: 13px 32px 13px 18px;
    gap: 12px;
    max-width: 100%;
    position: relative;
    z-index: 2;
}

/* 红底白心定位图标 */
.about-ports-pin-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 2px;
}

/* 占据全美热门港口： */
.about-ports-heading {
    font-size: 18px;
    font-weight: 900;
    color: #DE1717;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-right: 24px;
    flex-shrink: 0;
}

/* 5 大港口横排列表 */
.about-ports-list {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.about-port-item {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.about-port-sep {
    font-size: 14.5px;
    color: #DE1717;
    font-weight: 800;
    user-select: none;
}

/* 响应式断点适配 */
@media (max-width: 1100px) {
    .about-ports-banner-section {
        padding: 28px 0;
    }
    .about-ports-floating-card {
        padding: 10px 20px 10px 14px;
        gap: 10px;
    }
    .about-ports-heading {
        font-size: 16px;
        margin-right: 8px;
    }
    .about-ports-list {
        gap: 12px;
    }
    .about-port-item {
        font-size: 13.5px;
    }
}

@media (max-width: 860px) {
    .about-ports-banner-section {
        background-position: 75% center;
        padding: 24px 0;
    }
    .about-ports-floating-card {
        flex-wrap: wrap;
        width: 100%;
        padding: 12px 16px;
    }
    .about-ports-list {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 992px) {
    .about-core-grid {
        grid-template-columns: 1fr;
    }
    .about-hqs-col {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
    .about-features-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   服务页面 (Services) 专属样式 - 1:1 对齐设计效果图
   ========================================================================== */
.services-page-main {
    background-color: #F8FAFC;
    min-height: 100vh;
    font-family: var(--arp-font-family);
    display: flex;
    flex-direction: column;
}



.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* 2. 服务流程主板块 */
.services-process-section {
    padding-top: 40px;
    padding-bottom: 50px;
    background-image: radial-gradient(#E2E8F0 1px, transparent 1px);
    background-size: 24px 24px;
}

/* 流程标题 */
.services-title-header {
    text-align: center;
    margin-bottom: 42px;
}

.services-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 6px;
}

.services-decor-line {
    width: 48px;
    height: 3px;
    background: #DE1717;
    border-radius: 2px;
}

.services-heading {
    font-size: 28px;
    font-weight: 900;
    color: #002B49;
    letter-spacing: 1px;
    margin: 0;
}

.services-subheading {
    font-size: 13px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 4px;
}

/* 5大卡片横排流转容器 */
.services-cards-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.services-card-wrap {
    flex: 1;
    min-width: 0;
}

.services-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px 14px 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    border: 1px solid #EDF2F7;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

/* 红色圆角序号标 */
.services-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #DE1717;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(222, 23, 23, 0.35);
}

/* 浅灰圆底图标 */
.services-icon-circle {
    width: 58px;
    height: 58px;
    background: #EDF2F7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 14px;
}

.services-icon-circle svg {
    stroke: #002B49;
}

.services-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #002B49;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.services-hash {
    color: #DE1717;
    font-weight: 900;
}

/* 藏蓝色说明卡底 */
.services-desc-box {
    width: 100%;
    background: #002B49;
    border-radius: 6px;
    padding: 12px 10px;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-desc-box p {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    opacity: 0.95;
}

/* 灰色流转箭头 */
.services-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 2px;
}

/* 3. 底部虚化背景 + 4大核心保障条 */
.services-bottom-bar-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    margin-top: auto;
}

.services-bottom-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.services-bottom-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.28;
    filter: blur(2px);
}

.services-bottom-container {
    position: relative;
    z-index: 2;
}

.services-bottom-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 24px 36px;
}

.services-guarantees-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.services-g-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.services-g-item:not(:last-child) {
    border-right: 1px solid #E2E8F0;
    padding-right: 14px;
}

.services-g-icon {
    flex-shrink: 0;
}

.services-g-icon svg {
    stroke: #DE1717;
}

.services-g-title {
    font-size: 17px;
    font-weight: 900;
    color: #0F172A;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
}

.services-g-desc {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

/* 响应式断点 */
@media (max-width: 992px) {
    .services-cards-track {
        flex-direction: column;
        gap: 24px;
    }
    .services-card-wrap {
        width: 100%;
        max-width: 360px;
    }
    .services-step-arrow {
        transform: rotate(90deg);
    }
    .services-guarantees-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .services-g-item:not(:last-child) {
        border-right: none;
    }
}

@media (max-width: 576px) {
    .services-guarantees-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   客户页面 (Clients) 专属样式 - 1:1 对齐设计效果图
   ========================================================================== */
.clients-page-main {
    background-color: #F8FAFC;
    min-height: 100vh;
    font-family: var(--arp-font-family);
    padding-bottom: 70px;
}

.clients-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}



/* 2. 客户网格板块 */
.clients-grid-section {
    padding-top: 36px;
    --client-card-w: calc((100% - 60px - 72px) / 4);
}

/* 第一排 4 个顶部卡片 (徽标+V型引导角标) - 宽度与第二排前三张卡片完全一致 */
.clients-row-top {
    display: grid;
    grid-template-columns: repeat(4, var(--client-card-w));
    gap: 20px;
    margin-bottom: 24px;
}

.client-top-card {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EDF2F7;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-top-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.client-card-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.client-brand-logo {
    max-height: 100px;
    max-width: 170px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}

.client-v-arrow {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.client-card-body {
    width: 100%;
}

.client-name {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: 0.5px;
}

.client-name-orange { color: #EA580C; }
.client-name-blue { color: #2563EB; }
.client-name-yellow { color: #D97706; }
.client-name-purple { color: #2563EB; }
.client-desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

/* 第二排 3 个白底卡片 + 1 个深蓝 CTA 卡片 (前三张卡片宽度与第一排完全一致，仅右下角CTA卡片放宽) */
.clients-row-bottom {
    display: grid;
    grid-template-columns: repeat(3, var(--client-card-w)) 1fr;
    gap: 20px;
}

.client-bottom-card {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EDF2F7;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-bottom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.client-b-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.client-brand-b-logo {
    max-height: 100px;
    max-width: 170px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}

/* 右下角深蓝行动号召卡片 (等比例全幅铺满海运货轮背景) */
.client-cta-card {
    background: #0B3056;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(11, 48, 86, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(11, 48, 86, 0.32);
}

.client-cta-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.client-cta-top {
    display: flex;
    flex-direction: column;
}

.client-cta-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: #94BBE2;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.client-cta-title {
    font-size: 21px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.35;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
}

.client-cta-line {
    width: 32px;
    height: 3px;
    background: #DE1717;
    margin-bottom: 12px;
    border-radius: 2px;
}

.client-cta-tags {
    font-size: 12px;
    color: #E2E8F0;
    font-weight: 600;
    letter-spacing: 0.5px;
    }

.client-cta-ship {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.client-cta-ship::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(10, 47, 85, 0.96) 0%, 
        rgba(10, 47, 85, 0.88) 38%, 
        rgba(10, 47, 85, 0.35) 68%, 
        rgba(10, 47, 85, 0.05) 100%
    );
    z-index: 2;
}

.client-ship-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    display: block;
}

/* 响应式断点 */
@media (max-width: 992px) {
    .clients-row-top,
    .clients-row-bottom {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .clients-row-top,
    .clients-row-bottom {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   17. 联系我们 (Contact Us) 页面专属样式
   ========================================================================== */
.contact-page-main {
    background-color: #F8FAFC;
    min-height: 100vh;
    font-family: var(--arp-font-family);
    padding-bottom: 70px;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}



/* 2. 核心联络信息布局 */
.contact-core-section {
    padding-top: 36px;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/* 通用白底卡片 */
.contact-box {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #EDF2F7;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.contact-box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.contact-red-bar {
    width: 4px;
    height: 20px;
    background: #DE1717;
    border-radius: 2px;
}

.contact-box-title {
    font-size: 20px;
    font-weight: 900;
    color: #0F172A;
    margin: 0;
    letter-spacing: 0.5px;
}

/* 官方联络渠道列表 */
.contact-channels-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-channel-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px dashed #E2E8F0;
}

.contact-channel-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-c-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-c-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-c-role {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.5px;
}

.contact-c-value {
    font-size: 15px;
    font-weight: 700;
    color: #DE1717;
    text-decoration: none;
    transition: color 0.2s ease;
    word-break: break-all;
}

.contact-c-value:hover {
    color: #B91C1C;
    text-decoration: underline;
}

.contact-c-value.text-dark {
    color: #0F172A;
    line-height: 1.5;
}

/* 美国仓储基地卡片 */
.contact-us-hqs-box {
    margin-top: 24px;
}

.contact-hqs-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-hq-item {
    background: #F8FAFC;
    border: 1px solid #EDF2F7;
    border-radius: 6px;
    padding: 14px 16px;
}

.contact-hq-tag {
    font-size: 13.5px;
    font-weight: 800;
    color: #002B49;
    margin-bottom: 6px;
}

.contact-hq-addr {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}

/* 右侧二维码卡片 */
.contact-qr-tip {
    font-size: 13.5px;
    color: #64748B;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.contact-qr-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.contact-qr-card {
    background: #F8FAFC;
    border: 1px solid #EDF2F7;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-qr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.contact-qr-frame {
    width: 170px;
    height: 170px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.contact-qr-title {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.contact-qr-sub {
    font-size: 11.5px;
    color: #64748B;
}

.contact-action-box {
    margin-top: auto;
    text-align: center;
}

.contact-action-box .arp-btn-learn {
    width: 100%;
    height: 48px;
    font-size: 15px;
}

/* 响应式断点 */
@media (max-width: 992px) {
    .contact-main-grid {
        grid-template-columns: 1fr;
    }
    .contact-hqs-compact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .contact-qr-cards-grid {
        grid-template-columns: 1fr;
    }
}