* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #1e2f3a;
    line-height: 1.5;
    scroll-behavior: smooth;
}
/* 粘性顶栏：锚点（含 JS scrollIntoView）对齐时留出与 header 相当的上边距 */
#home,
#services,
#tech,
#fleet,
#charging,
#contact {
    scroll-margin-top: 76px;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* 头部：参考 webindex_v2 顶栏排版（单列 flex + 右侧 CTA + 毛玻璃） */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 22, 31, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #f5f9fc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 18px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.brand:hover .brand-title h1 span {
    color: #f5b041;
}
.brand img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.brand-title {
    min-width: 0;
}
.brand-title h1 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.15;
    color: #ffffff;
}
.brand-title span {
    color: #f39c12;
}
.brand-title p {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: #b7c7d3;
    margin-top: 4px;
    text-transform: uppercase;
}
.brand-tagline {
    /*
     * 对外主标语：避免在「·」处被拆成多行（PC）
     * 手机端在 @media 中覆盖为可换行
     */
    white-space: nowrap;
}
.brand-title p.brand-tagline {
    letter-spacing: 0.12em;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    color: #e6eef3;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.nav-links a:hover {
    color: #f39c12;
}
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: #f39c12;
    color: #0c1f2a;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.nav-cta:hover {
    background: #e67e22;
    color: #ffffff;
}
.menu-btn {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 8px;
}

.btn-primary {
    display: inline-block;
    background-color: #f39c12;
    color: #0a1c2a;
    padding: 12px 30px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.25s;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.btn-primary:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
    color: white;
}
.btn-outline {
    background: transparent;
    border: 2px solid #f39c12;
    color: #f39c12;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}
.btn-outline:hover {
    background: #f39c12;
    color: #0a1c2a;
}

/* Hero 区域：背景参考 webindex_v2（径向渐变 + 右上琥珀光晕） */
.hero {
    background: radial-gradient(circle at 20% 20%, #0b2a3c, #041016 70%);
    color: #f4fbff;
    padding: 80px 0 90px;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    max-width: 90vw;
    max-height: 90vw;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.2), transparent 70%);
    right: -120px;
    top: -120px;
    pointer-events: none;
}
.hero .container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}
.hero-content {
    flex: 1.2;
}
.hero-content h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-content .highlight {
    color: #f39c12;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    font-size: clamp(1.05rem, 4.2vw, 2.65rem);
}
.hero-content p {
    font-size: 1.05rem;
    color: #d7e6ef;
    margin-bottom: 32px;
    max-width: 580px;
}
.hero-badge {
    background: rgba(243,156,18,0.18);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 24px;
    border-left: 3px solid #f39c12;
}
.hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.stat-item h3 {
    font-size: 1.9rem;
    font-weight: 800;
}
.stat-item p {
    font-size: 0.88rem;
    opacity: 0.9;
    margin-top: 4px;
}
.hero-image {
    flex: 0.9;
    text-align: center;
}
.hero-image img {
    max-width: 100%;
    border-radius: 28px;
    box-shadow: 0 20px 30px -12px black;
    background: #1e3a47;
}

section {
    padding: 80px 0;
}
.section-title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #0a1c2a;
}
.section-sub {
    text-align: center;
    color: #4b6a7c;
    max-width: 720px;
    margin: 0 auto 48px auto;
    font-size: 1.1rem;
}

/* 核心业务卡片 (仓储+车队+超充站) */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}
.service-card {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0 20px 35px -12px rgba(0,0,0,0.08);
    padding: 36px 28px;
    flex: 1;
    min-width: 280px;
    transition: all 0.25s;
    border: 1px solid #eef2f8;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 38px -16px rgba(0,0,0,0.15);
    border-color: #f39c1260;
}
.service-icon {
    font-size: 3rem;
    color: #f39c12;
    margin-bottom: 24px;
}
.service-card h3 {
    font-size: 1.8rem;
    margin-bottom: 16px;
}
.feature-list {
    list-style: none;
    text-align: left;
    margin-top: 20px;
}
.feature-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.feature-list i {
    color: #f39c12;
    width: 24px;
}

/* 核心技术：幻灯片式双栏（浅蓝底 + 左文右胶囊卡片） */
.tech-showcase {
    background: linear-gradient(142deg, #dceefa 0%, #f0f9ff 38%, #ffffff 72%, #e8f4fc 100%);
    border-radius: 0;
}
.ppt-tech-wrap {
    padding-bottom: 8px;
}
.ppt-tech-head {
    text-align:center;
    margin-bottom: 36px;
}
.ppt-tech-ch {
    margin: 0;
    font-size: clamp(1.55rem, 3.5vw, 2.05rem);
    font-weight: 800;
    color: #0c3d6e;
    letter-spacing: 0.08em;
    line-height: 1.25;
}
.ppt-tech-en {
    margin: 10px 0 0 0;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    color: #5b6b80;
}
/* 双栏均分 + minmax(0,1fr) 防止左文撑破挤占右栏；左栏内自然换行 */
.ppt-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px clamp(28px, 4vw, 48px);
    align-items: start;
}
.ppt-tech-intro {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding-right: clamp(0px, 2vw, 16px);
    display: block;
}
.ppt-intro-metrics,
.ppt-intro-p {
    overflow-wrap: break-word;
}
.ppt-intro-metrics {
    margin: 0 0 22px 0;
    font-size: clamp(1.8rem, 2.75vw, 1.82rem);
    font-weight: 800;
    line-height: 1.42;
    color: #0c3d6e;
    letter-spacing: 0.02em;
}
.ppt-intro-p {
    margin: 0 0 1.28rem 0;
    font-size: clamp(1.36rem, 2.15vw, 1.34rem);
    line-height: 2.5;
    color: #2f4a5e;
    max-width: 100%;
}
.ppt-intro-p:last-of-type {
    margin-bottom: 0;
}
.ppt-tech-pills {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}
.ppt-pill {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 22px;
    padding: 20px 22px 20px 18px;
    box-shadow: 0 12px 36px rgba(15, 88, 140, 0.09);
    border: 1px solid rgba(147, 197, 236, 0.45);
    box-sizing: border-box;
}
.ppt-pill-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
.ppt-pill-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2dd4bf 0%, #38bdf8 45%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.28rem;
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.28);
}
.ppt-pill-body h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0c3d6e;
}
.ppt-pill-body p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #4a6d85;
}
/* 自建超充站 · 白底区块 */
.charging-section {
    background: #ffffff;
    color: #1e2f3a;
}
.charging-section .section-title {
    color: #0a1c2a;
}
.charging-section .section-sub {
    color: #4b6a7c;
}
.charging-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: stretch;
    margin-top: 8px;
}
.charging-card {
    flex: 1;
    min-width: 260px;
    background: linear-gradient(180deg, #f4fbfc 0%, #eef6f9 100%);
    border: 1px solid rgba(8, 74, 122, 0.12);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 8px 28px rgba(12, 74, 110, 0.06);
}
.charging-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0a1c2a;
}
.charging-card h3 i {
    color: #0d9488;
}
.charging-card p {
    color: #4b6a7c;
    font-size: 0.98rem;
    line-height: 1.6;
}
.charging-cta {
    margin-top: 28px;
    text-align: center;
}

/* 自有车队 · 暖灰褐工业风（与超充冷青绿区分） */
.fleet-section {
    background: linear-gradient(168deg, #1c1917 0%, #292524 48%, #1a1614 100%);
    color: #fafaf9;
}
.fleet-section .section-title {
    color: #fafaf9;
}
.fleet-section .section-sub {
    color: #d6d3d1;
}
.fleet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
}
.truck-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(3px);
    border-radius: 28px;
    padding: 28px 20px;
    width: 260px;
    text-align: center;
    border: 1px solid rgba(243,156,18,0.5);
}
.truck-card i {
    font-size: 3rem;
    color: #f39c12;
    margin-bottom: 18px;
}

/* 为什么选择慧轮达 · 使用原超充区块青绿渐变底（与白底超充交替） */
.why-us {
    background: linear-gradient(155deg, #042f2e 0%, #0c4a6e 42%, #082f49 100%);
    color: #e8f4f8;
}
.why-us .section-title {
    color: #f0fdfa;
}
.why-us .section-sub {
    color: #99d5e8;
}
.why-us .section-sub strong {
    color: #ecfeff;
    font-weight: 700;
}
.advantages {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}
.why-us .advantage-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 28px 20px;
    text-align: center;
    flex: 1;
    min-width: 220px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.why-us .advantage-item i {
    font-size: 2.2rem;
    color: #5eead4;
    margin-bottom: 14px;
}
.why-us .advantage-item h4 {
    color: #f0fdfa;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}
.why-us .advantage-item p {
    color: #b8dce8;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* 联系我们：经理电话 + 地址 + 位置示意图 */
.contact-flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 48px;
    align-items: start;
    margin-top: 24px;
}
.contact-info-main h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0a1c2a;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact-managers {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0 22px 0;
}
.contact-manager-card {
    background: #f0f6fa;
    border-radius: 18px;
    padding: 16px 20px;
    border-left: 4px solid #f39c12;
}
.contact-manager-card .contact-manager-name {
    font-weight: 700;
    color: #0a1c2a;
    margin-bottom: 8px;
    font-size: 1rem;
}
.contact-manager-card a {
    color: #0c4a6e;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}
.contact-manager-card a:hover {
    color: #f39c12;
}
.contact-address-block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background: #fafcfd;
    border-radius: 18px;
    border: 1px solid #e6edf2;
    margin-bottom: 8px;
}
.contact-address-block i {
    color: #f39c12;
    margin-top: 3px;
    flex-shrink: 0;
}
.contact-address-block p {
    margin: 0;
    line-height: 1.75;
    color: #3d5666;
    font-size: 1rem;
}
.contact-map {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(10, 35, 50, 0.1);
    border: 1px solid #dbe7ef;
    background: #eef2f5;
}
.contact-map img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}
.contact-map figcaption {
    padding: 12px 16px;
    font-size: 0.88rem;
    color: #5a7588;
    text-align: center;
    background: #f8fbfd;
}
footer {
    background: #07161f;
    color: #9ab3c2;
    padding: 28px 0 32px;
    border-top: 1px solid #1e3a47;
}
.copyright {
    text-align: center;
    margin: 0;
    font-size: 0.82rem;
    color: #7d96a8;
    line-height: 1.65;
    padding: 0 12px;
}
.footer-icp {
    text-align: center;
    margin: 12px 0 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 0 12px;
}
.footer-icp a {
    color: #8ca6b8;
    text-decoration: none;
}
.footer-icp a:hover {
    color: #f39c12;
}

/* ========= 手机端专项优化 ========= */
@media (max-width: 850px) {
    body {
        overflow-x: hidden;
    }
    .container {
        padding: 0 20px;
    }
    section {
        padding: 56px 0;
    }
    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2rem);
        line-height: 1.28;
        padding: 0 8px;
        margin-bottom: 12px;
    }
    .section-sub {
        font-size: 0.96rem;
        line-height: 1.6;
        margin-bottom: 32px;
        padding: 0 12px;
    }
    .nav {
        flex-wrap: wrap;
        padding: 10px 0 12px 0;
        align-items: center;
        gap: 10px 14px;
    }
    .brand {
        flex: 1;
        min-width: 0;
        max-width: calc(100% - 56px);
        gap: 8px;
    }
    .brand img {
        height: 48px;
        max-width: 150px;
    }
    .brand-title h1 {
        font-size: 1.12rem;
        line-height: 1.2;
    }
    .brand-title {
        min-width: 0;
    }
    .brand-title p.brand-tagline {
        font-size: 0.54rem;
        letter-spacing: 0.04em;
        white-space: normal;
        line-height: 1.3;
    }
    .menu-btn {
        display: block;
        flex-shrink: 0;
        margin-left: auto;
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.6rem;
    }
    .nav-cta {
        display: none;
    }
    .nav-links {
        display: none;
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 8px 0 12px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 4px;
        order: 10;
        align-items: stretch;
    }
    .nav-links.active {
        display: flex;
    }
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .nav-links a {
        display: block;
        padding: 14px 4px;
        font-size: 1rem;
        font-weight: 500;
    }
    .hero {
        padding: 36px 0 48px;
    }
    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    .hero-content {
        width: 100%;
    }
    .hero-content h2 {
        font-size: clamp(1.55rem, 6vw, 2rem);
        line-height: 1.3;
        margin-bottom: 14px;
    }
    .hero-content .highlight {
        white-space: normal;
        font-size: clamp(0.9rem, 3.8vw, 1.2rem);
        line-height: 1.45;
        display: inline;
    }
    .hero-badge {
        font-size: 0.72rem;
        padding: 5px 12px;
        margin-bottom: 16px;
    }
    .hero-content p {
        font-size: 0.96rem;
        margin-bottom: 22px;
        max-width: 100%;
        padding: 0 4px;
    }
    .hero .btn-primary {
        padding: 12px 28px;
        width: auto;
        min-width: 220px;
        font-size: 0.95rem;
    }
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 5px;
        margin-top: 18px;
        width: 100%;
        max-width: 100%;
        align-items: stretch;
    }
    .stat-item {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 10px 3px;
    }
    .stat-item h3 {
        font-size: clamp(1.05rem, 4.2vw, 1.32rem);
        margin: 0;
        line-height: 1.12;
    }
    .stat-item p {
        font-size: 0.62rem;
        line-height: 1.2;
        margin: 2px 0 0;
        opacity: 0.88;
        padding: 0 1px;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .hero-image {
        width: 100%;
        margin-top: 8px;
    }
    .hero-image img {
        width: 100%;
        max-height: 210px;
        object-fit: cover;
        border-radius: 24px;
    }
    .services-grid {
        gap: 24px;
    }
    .service-card {
        flex: 1 1 100%;
        min-width: 0;
        padding: 28px 20px;
        border-radius: 28px;
    }
    .service-card h3 {
        font-size: 1.5rem;
    }
    .service-icon {
        font-size: 2.4rem;
        margin-bottom: 18px;
    }
    .feature-list li {
        font-size: 0.92rem;
        gap: 8px;
    }
    .ppt-tech-wrap {
        padding-bottom: 0;
    }
    .ppt-tech-head {
        margin-bottom: 24px;
    }
    .ppt-tech-ch {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
    }
    .ppt-tech-en {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
    }
    .ppt-tech-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ppt-tech-intro {
        padding-right: 0;
    }
    .ppt-intro-metrics {
        font-size: clamp(1.1rem, 4vw, 1.35rem);
        margin-bottom: 16px;
    }
    .ppt-intro-p {
        font-size: clamp(0.95rem, 3.2vw, 1.08rem);
        line-height: 1.75;
    }
    .ppt-pill {
        border-radius: 24px;
        padding: 16px 18px;
        gap: 14px;
    }
    .ppt-pill-icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    .ppt-pill-body h4 {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    .ppt-pill-body p {
        font-size: 0.85rem;
        line-height: 1.55;
    }
    .fleet-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .truck-card {
        width: 100%;
        max-width: 100%;
        padding: 24px 16px;
    }
    .charging-grid {
        gap: 20px;
    }
    .charging-card {
        min-width: 0;
        padding: 22px 18px;
    }
    .charging-cta .btn-primary {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }
    .advantages {
        gap: 18px;
    }
    .why-us .advantage-item {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        padding: 22px 18px;
    }
    .contact-flex {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 12px;
    }
    .contact-info-main h3 {
        font-size: 1.2rem;
    }
    .contact-manager-card a {
        font-size: 1.1rem;
    }
    .contact-map {
        border-radius: 20px;
    }
    .copyright {
        font-size: 0.74rem;
        padding: 0 8px;
    }
    .copyright .brand-tagline {
        font-size: 0.7rem;
        white-space: normal;
        display: inline;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    /* 保持一行三格，避免 2+1 折行；略缩字以容纳「无人地磅运行」 */
    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px 3px;
        margin-top: 16px;
    }
    .stat-item {
        padding: 9px 2px;
        border-radius: 11px;
    }
    .stat-item h3 {
        font-size: clamp(0.98rem, 4.5vw, 1.18rem);
    }
    .stat-item p {
        font-size: 0.58rem;
        line-height: 1.18;
        margin-top: 1px;
    }
    .hero .btn-primary {
        width: 100%;
        max-width: 280px;
    }
    .charging-cta .btn-primary {
        width: 100%;
    }
    .ppt-pill {
        padding: 14px 14px;
    }
    .ppt-pill-icon {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}