/* ===== 颜色变量 ===== */
:root {
    --bg: #292623;
    --text: #D7D261;
    --text-hover: #DFDACB;
}

html, body {
    margin: 0;
    padding: 0;
}

/* 放在最上面，所有元素都按 border-box 算宽度 */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ===== 导航整体 ===== */
.navbar {
    background: var(--bg);
    height: 10rem;             /* 原来 72px，换成 rem */
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    width: 100%;
    max-width: 140rem;        /* 1300px → 81.25rem */
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== LOGO 放大 ===== */
.logo img {
    height: 8rem;            /* 大一圈，差不多是你现在的 5 倍视觉效果 */
    max-height: 8rem;
    width: auto;
    object-fit: contain;
}

/* Logo hover 动画 */
.logo a img {
    transition: transform 0.25s ease;
}

.logo a:hover img {
    transform: scale(1.2); /* 微微放大 5% */
}


/* ===== Desktop 菜单 ===== */
.nav-links {
    display: flex;
    gap: 3rem;
    align-items: center; 
}

.nav-links a {
    color: var(--text);
    font-size: 1.5rem;
    text-decoration: none;
    font-family: "MiSans VF Regular", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    transition: color 0.25s ease;
}

.nav-links a.contact-btn {
    background: #d9d56a;
    padding: 0.7rem 1.5rem;
    border-radius: 0.3rem;
    color: #000 !important;
    font-weight: 600;

    /* 背景+文字颜色都加动画 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-links a.contact-btn:hover {
    background-color: #DFDACB;
    color: #000;
}

.nav-links a:hover {
    color: var(--text-hover);
}

/* ===== 汉堡按钮 ===== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 0.3125rem;             /* 5px → rem */
    cursor: pointer;
}

.hamburger span {
    width: 1.625rem;            /* 26px */
    height: 0.1875rem;          /* 3px */
    background: var(--text);
    border-radius: 0.1875rem;
    transition: all 0.3s ease;
}

/* 点击后做个小动画：变 X（可选，如果不要可以删这段） */
.hamburger.open span:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
}

/* ===== Mobile 抽屉菜单（默认隐藏 + 在屏外）===== */
.mobile-menu {
    position: fixed;
    top: 10rem;                /* 紧贴导航栏下边缘 */
    right: 0;
    width: 16rem;
    max-width: 70vw;
    height: calc(100vh - 4.5rem);
    background: var(--bg);
    padding: 1.5rem;
    display: none;              /* 关键：桌面端完全不显示 */
    flex-direction: column;
    gap: 1.5rem;
    transform: translateX(100%);/* 从右侧滑出 */
    transition: transform 0.35s ease;
}

.mobile-menu a {
    color: var(--text);
    text-decoration: none;
    font-size: 1.125rem;
    font-family: "MiSans VF Regular", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    transition: color 0.25s ease;
}

.mobile-menu a:hover {
    color: var(--text-hover);
}

/* 打开时滑入 */
.mobile-menu.active {
    transform: translateX(0);
}

/* ===== 响应式：小屏幕用 mobile 菜单 ===== */
@media (max-width: 53.125rem) {      /* 850px */
    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: flex;
    }
}

/* ===== Hero Section ===== */
.hero {
    width: 100%;
    height: 75vh;                               /* 你可调整成 80vh 或 90vh */
    background-image: url("img/b5.png");        /* 已替换成 b5.png */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    position: relative;
    margin-top: 8rem; /* 刚好避开导航栏高度 */
}

.hero-content h1 {
    color: var(--text);
    font-size: 3.8rem;
    line-height: 1.2;
    font-family: "MiSans VF Regular", system-ui, sans-serif;
    font-weight: 700;
}

.hero-content h2 {
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1.2;
    font-family: "MiSans VF Regular", system-ui, sans-serif;
    font-weight: 400;
}

/* ===== Hero 按钮（div） ===== */
.hero-btn {
    margin-top: 2rem;
    display: inline-block;
    padding: 0.9rem 2.4rem;

    background: var(--bg);
    color: var(--text);

    font-size: 1.15rem;
    border-radius: 15px;
    cursor: pointer;

    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    font-family: "MiSans VF Regular", system-ui, sans-serif;
}

.hero-btn:hover {
    background: #D7D261;
    color: #292623;
    transform: translateY(-3px);
}

/* ===========================
   Service Cards Section
   =========================== */
.services {
    width: 100%;
    max-width: 1200px;
    margin: 7rem auto 7rem auto;
    padding: 0 2rem;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* 卡片本体 */
.service-card {
    background: #ececec;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.08) 0 6px 20px;

    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover 效果 */
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(0, 0, 0, 0.15) 0 10px 30px;
}

.service-card-dark{
    background: var(--bg);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.08) 0 6px 20px;

    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover 效果 */
.service-card-dark:hover {
    transform: translateY(-6px);
    box-shadow: rgba(0, 0, 0, 0.15) 0 10px 30px;
}

/* 上半部分图片 2:3 比例 */
.service-img {
    width: 100%;
    aspect-ratio: 3/2; /* 3宽:2高（竖出来效果非常好） */
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字内容部分 */
.service-content {
    padding: 1.8rem;
}

/* 标题 */
.service-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: "MiSans VF Regular", system-ui, sans-serif;
    margin-bottom: 1rem;
}

/* 描述文本 */
.service-content p {
    font-size: 0.95rem;
    line-height: 1.5rem;
    color: #555;
    margin-bottom: 1.5rem;
}

/* call to action */
.service-link {
    color: var(--bg);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.25s ease;
}

.service-link:hover {
    color: var(--text);
}

/* 第二张卡片深色背景 */
.service-content.dark {
    background: var(--bg);
    color: var(--text);
}

.service-content.dark p {
    color: var(--text-hover);
}

.service-content.dark .service-link {
    color: var(--text-hover);
}
.service-content.dark .service-link:hover {
    color: var(--text);
}

/* 手机端：1 列布局 */
@media (max-width: 768px) {
    .services {
        grid-template-columns: 90%;     /* ← 真正缩小卡片宽度 */
        justify-content: center;        /* ← 居中卡片 */
        padding: 0;                     
    }
}


/* ===========================
   SOLUTION SECTION (SAFE)
   =========================== */

.solution-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-image: url("img/hat.png");
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center; /* 永远居中 */
    padding: 3rem 1rem;
    text-align: center;
}

.solution-overlay {
    position: absolute;
    inset: 0;
    background: rgba(215, 210, 97, 0.75);
}

.solution-content {
    position: relative;
    z-index: 5;
    width: min(600px, 90%);
    margin: 0 auto;
}

.solution-content h2 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    color: white;
    font-weight: 800;
    margin-bottom: 2rem;
}

.solution-btn {
    margin: 0.3rem;
    display: inline-flex;              /* 让内容完美垂直居中 */
    align-items: center;               /* 上下居中 */
    justify-content: center;           /* 左右居中 */
    padding: 0.8rem 2.6rem;            /* 你要“长度长一点、但高度差不多”的最佳尺寸 */
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    min-width: auto;
    text-align: center;
    white-space: nowrap;               /* ★ 不换行、不堆叠 */
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* 主按钮 */
.solution-btn.primary {
    border: 2px solid transparent;
    border-color: #ffffff;
    background: none;
    color: white;
    backdrop-filter: blur(4px);
}

.solution-btn.primary:hover {
    background: #ffffff;
    color: #292623;
}

/* 次按钮 */
.solution-btn.secondary {
    border: 2px solid transparent;
    border-color: #ffffff;
    background: none;
    color: white;
    backdrop-filter: blur(4px);
}

.solution-btn.secondary:hover {
    background: #ffffff;  
    color: #292623;
}

/* ===========================
   DUAL SECTION (SAFE)
   =========================== */

.dual-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 70vh;
}

.dual-left {
    background: #000;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dual-left h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--text);
    margin-bottom: 1.2rem;
}

/* 文案颜色改为 #D7D261 */
.dual-left p {
    font-size: 1.1rem;
    color: #D7D261;
    margin-bottom: 2rem;
}

/* 按钮区域 */
.dual-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* 按钮：默认无边框、无背景、文字 #DFDACB */
/* 按钮：默认无边框、无背景、文字 #DFDACB */
.dual-btn {
    display: inline-flex;              /* ★ 关键：让内容垂直居中 */
    align-items: center;               /* 垂直居中 */
    justify-content: center;           /* 水平居中 */
    white-space: nowrap;               /* ★ 防止文字换行堆叠 */

    padding: 0.8rem 1.8rem;            /* 平衡尺寸，比 2rem 更适合按钮 */
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    min-width: auto;
    text-align: center;
    flex: 0;
    background: transparent;
    border: 2px solid transparent;
    color: #DFDACB;

    transition: 
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* primary / secondary 默认都是透明按钮 */
.dual-btn.primary,
.dual-btn.secondary {
    background: transparent;
    border-color: transparent;
    color: #DFDACB;
}

/* hover：出现 #D7D261 描边 + 文字变成 #D7D261 */
.dual-btn.primary:hover,
.dual-btn.secondary:hover {
    background: transparent;
    border-color: #D7D261;
    color: #D7D261;
}

/* 右半部分背景图 */
.dual-right {
    background-image: url("img/b5.png");
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {


    /* 彻底解除 flex，和 black section 行为统一 */
    .solution-section {
        display: block !important;     /* ★ 关键修复：不再 flex */
        width: 100%;
        padding: 3rem 1.5rem;
        box-sizing: border-box;
        min-height: 500px !important;
    }

    /* 让内容块成为正常容器 */
    .solution-content {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    /* 标题和黑色区完全一致 */
    .solution-content h2 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 1.2rem;
        text-align: left;
    }

    /* 按钮和 black section 一模一样 */
    .solution-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        width: auto;
        margin-top: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: auto;
        text-align: left;
    }



    /* ==========================
       Dual Section (保持你已有的)
       ========================== */

    .dual-section {
        grid-template-columns: 1fr;
        height: auto;
    }

    .dual-left {
        padding: 3rem 1.5rem;
    }

    .dual-left h2 {
        font-size: 2rem;
    }

    .dual-buttons {
        flex-direction: column;
        gap: 0.8rem;
        align-items: flex-start;
        width: auto;
    }

    .dual-right {
        display: none;
    }
}

/* ============================
   CTA Section (Builder Wiser)
   ============================ */

/* Section 白色背景（看起来与页面背景无缝）*/
.cta-section {
    margin: 3rem auto 3rem  auto;
    padding: 6rem 2rem;
    background: #fff;  /* 和网站背景一样，造成视觉差 */
}

.cta-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;  /* PC 端标题、副标题居中 */
}

/* 大标题 */
.cta-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    font-family: "MiSans VF Regular", system-ui, sans-serif;
}

/* 副标题 */
.cta-subtitle {
    font-size: 1.2rem;
    color: #707070;
    margin-top: 1.2rem;
}

/* 按钮区域（PC 横排） */
.cta-buttons {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.cta-btn-primary,
.cta-btn-secondary {
    padding: 0.9rem 2.4rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
}

/* 主按钮：黑底白字 */
.cta-btn-primary {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000;
    transition: 
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* 主按钮 hover：反色 → 白底黑字 */
.cta-btn-primary:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000;
}

/* 次按钮：白底黑字 */
.cta-btn-secondary {
    background: #fff;
    border: 2px solid #000;
    color: #000;
    transition: 
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* 次按钮 hover：反色 → 黑底白字 */
.cta-btn-secondary:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}




/* ============================
   MOBILE VERSION
   Like your second screenshot
   ============================ */
@media (max-width: 768px) {

    .cta-section {
        padding: 4rem 1.5rem;
    }

    /* 标题更紧凑一点 */
    .cta-title {
        font-size: 2.2rem;
        line-height: 1.3;
        text-align: center;
    }

    .cta-subtitle {
        font-size: 1rem;
        margin-top: 1rem;
        text-align: center;
    }

    /* Mobile 下按钮竖排 */
    .cta-buttons {
        display: block;      /* ← 直接 block，不用 flex */
        margin-top: 2rem;
        text-align: center;  /* 按钮内部居中 */
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        max-width: 320px;          /* optional：不拉满全屏，更美观 */
        margin: 0.7rem auto;
        display: block;
        padding: 1rem;
    }
}

/* ================================
   无限横向滚动图片区（修正版）
   ================================ */

.img-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 450px;
  margin-bottom: 6rem;
}

.img-item {
  position: absolute;
  width: 350px;
  height: 450px;
  border-radius: 15px;
  object-fit: cover;

  /* 初始位置在右侧（8 张图片） */
  left: max(calc(350px * 8), 100%);

  animation: slideLeft 25s linear infinite;
}

@keyframes slideLeft {
  to {
    left: -350px;
  }
}

/* 下面是关键：按照 8 张重算每个 delay */
.i1 { animation-delay: calc(25s / 8 * (8 - 1) * -1); }
.i2 { animation-delay: calc(25s / 8 * (8 - 2) * -1); }
.i3 { animation-delay: calc(25s / 8 * (8 - 3) * -1); }
.i4 { animation-delay: calc(25s / 8 * (8 - 4) * -1); }
.i5 { animation-delay: calc(25s / 8 * (8 - 5) * -1); }
.i6 { animation-delay: calc(25s / 8 * (8 - 6) * -1); }
.i7 { animation-delay: calc(25s / 8 * (8 - 7) * -1); }
.i8 { animation-delay: calc(25s / 8 * (8 - 8) * -1); }


@media (max-width: 768px) {
    .scroll-track img {
        width: 90vw; /* 或 70%，但必须配合 margin-right */
        /* 1rem 的像素值通常是 16px */
        margin-right: 16px; 
    }
    /* .scroll-track { gap: 1rem; } <-- 移除 */
}


/* ============================
   Footer （白色 + 黄色）
   ============================ */

footer {
    background-color: #fffcf5;
    
    font-family: "MiSans VF Regular", system-ui, sans-serif;
}

/* --- 上半部分（白色） --- */
.footer-main {
    
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;

    padding: 4rem 2rem;

    display: grid;
    grid-template-columns: 5fr 1fr 1fr 1fr;
    column-gap: 4rem;            /* ★ 更优雅的“更靠两边”方式 */
    row-gap: 3rem;
}

/* 列内容 */
.footer-col h3,
.footer-col h4 {
    font-weight: 700;
}

.footer-col h3 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.footer-col p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1.5rem;
}

.footer-col a {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.7rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--bg);
}

/* 社交图标 */
.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social img {
    width: 40px;
    height: 40px;
    opacity: 0.8;
    transition: opacity 0.25s ease;
}



.footer-social img:hover {
    opacity: 1;
}

/* --- 下半部分（黄色） --- */
.footer-bottom {
    background: var(--text);
    padding: 2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
}

/* ============================
   MOBILE（干净重写版）
   ============================ */
@media (max-width: 768px) {

    .footer-main {
        grid-template-columns: 1fr;     /* ★ 自动一列 */
        padding: 3rem 1.5rem;
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
    }

    .footer-bottom p {
        font-size: 1.25rem;
    }
}