/* Reset & basics */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x:hidden; background:#fdfdfd;}
a {text-decoration:none; color:inherit;}

/* 顶部标题 */
/* ====================================
            HEADER
==================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    z-index:9999;

    transition:.45s;

}

.header.scrolled{

    height:70px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:0 10px 40px rgba(0,0,0,.08);

}

/* 内层 */

.header-inner{

    width:min(1380px,94%);

    height:100%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* Logo */
.logo{

    display:flex;

    flex-direction:column;

    transition:.35s;

}

.logo:hover{

    transform:scale(1.04);

}

.logo-cn{

    color:white;

    font-size:28px;

    font-weight:700;

    letter-spacing:1px;

}

.logo-en{

    margin-top:2px;

    color:rgba(255,255,255,.72);

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}

/* 导航 */
.nav{

    display:flex;

    gap:14px;

}

.nav-item{

    padding:11px 22px;

    border-radius:999px;

    color:white;

    font-size:15px;

    transition:.35s;

}

.nav-item:hover{

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(14px);

}

.nav-item.active{

    background:rgba(255,255,255,.24);

    backdrop-filter:blur(16px);

}

/* Header按钮 */
.header-btn{

    width:150px;

    height:46px;

    border-radius:999px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:15px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(18px);

    transition:.35s;

}

.header-btn:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.24);

}

/* 轮播区域 */
.carousel-container {
  margin-top: 60px;
  width: 100%;
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f5f5f5, #ffffff);
  overflow: hidden;
  padding: 40px 0;
}

/* 圆角矩形容器，更宽 */
.carousel-wrapper {
  width: 95%;
  max-width: 1400px;
  height: 90%;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 轮播 track */
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 每个 slide */
.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片样式 */
.carousel-slide img {
  width: auto;
  height: 80%;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 1;
  pointer-events: none; /* 防止点击 */
}

/* 左侧信息条（电脑端） */
.cards {
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card {
  width: 220px;
  padding: 16px;
  background: rgba(128, 128, 128, 0.15);
  border-radius: 12px;
  color: #000;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.card.show {
  opacity: 1;
  transform: translateY(0);
}

/* 手机端专用盒子 */
.mobile-info {
  display: none;
}

/* 导航箭头 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: rgba(0,0,0,0.3);
  cursor: pointer;
  user-select: none;
  z-index: 10;
}
.arrow.left { left: 20px; }
.arrow.right { right: 20px; }

/* 下载区域 */
.download-section {
  padding: 80px 40px;
  background: #f7f7f7;
  text-align: center;
}
.download-section h2 {
  font-size: 28px;
  margin-bottom: 16px;
}
.download-cards {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.download-card {
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.download-card:hover { transform: translateY(-5px); }
.download-card img { width: 50px; margin-bottom: 12px; }
.download-card span { font-size: 16px; font-weight: bold; }

/* =========================
   Footer
========================= */

.site-footer {
  background: #333333;
  padding: 40px 20px;
  margin-top: 60px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}


/* 备案信息 */
.footer-beian {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* 控制整体间距 */
  font-size: 13px;
}

.footer-beian a {
  color: #7B7B7B;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
  padding: 0; /* 删除 padding */
}

.footer-beian a:hover {
  color: #4caf50;
}

/* 版权 */
.footer-copy {
  color: #7B7B7B;
  font-size: 12px;
}

.footer-divider {
  color: #7B7B7B;
  opacity: 0.6;
  padding: 0 4px;
}

/* 点击/聚焦状态 */
.footer-nav a:active,

.footer-beian .divider {
  color: #7B7B7B;
  opacity: 0.6;
}

.footer-beian img.beian-icon {
  height: 14px;
  width: 14px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
}

.footer-contact {
  margin: 10px 0;
  font-size: 12px;
  color: #7B7B7B;
}

.footer-contact a {
  color: #7B7B7B;
}

.footer-contact a:hover {
  color: #4caf50;
}

/* 手机端适配：图片下方显示盒子，两列显示信息条 */
@media screen and (max-width: 768px) {
  .carousel-slide {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 40px; /* 图片上方padding */
  }

  .cards {
    display: none; /* 隐藏电脑端信息条 */
  }

  .carousel-container {
    height: 105vh; /* 原来是95vh，可以调大一点，保证信息条显示完整 */
    margin-top: 10px;
  }
  
  .carousel-slide img {
    width: 70%;
    height: auto;
    max-height: 60vh;
    border-radius: 24px;
  }

  .arrow {
    font-size: 30px;
  }

  /* 手机端信息条 */
  .mobile-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    max-width: 360px;
    margin: 16px auto 0 auto;
    gap: 12px;
  }

  .mobile-card {
    width: 48%;
    padding: 12px;
    background: rgba(128, 128, 128, 0.15);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    color: #000;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-card.show {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =======================
        HERO
======================= */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

}

/* 四层图片 */
.hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    user-select:none;

    pointer-events:none;

}

.hero-bg{

    z-index:1;

}

.hero-light{

    z-index:2;

}

.hero-leaf{

    z-index:3;

}

.hero-flowers{

    z-index:4;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

    rgba(0,0,0,.18),

    rgba(0,0,0,.28)

    );

    z-index:5;

}

.hero-content{

    position:relative;

    z-index:10;

    width:90%;

    max-width:820px;

    text-align:center;

    color:white;

    display:flex;

    flex-direction:column;

    align-items:center;

}

/* =========================
      Hero 副标题
========================= */

.hero-subtitle{

    display:inline-block;

    margin-bottom:18px;

    font-size:14px;

    letter-spacing:5px;

    color:rgba(255,255,255,.88);

    text-transform:uppercase;

}

/* =========================
      Hero 主标题
========================= */

.hero-title{

    font-size:82px;

    font-weight:800;

    color:#fff;

    line-height:1;

    margin-bottom:22px;

    text-shadow:
    0 8px 30px rgba(0,0,0,.25);

}

/* =========================
      Hero Slogan
========================= */

.hero-slogan{

    font-size:34px;

    font-weight:500;

    margin-bottom:22px;

    color:rgba(255,255,255,.95);

}

/* =========================
      Hero 描述
========================= */

.hero-desc{

    max-width:680px;

    width:90%;

    margin:auto;

    font-size:19px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

}


/* 毛玻璃 */
.hero-btn{

    margin-top:42px;

    width:230px;

    height:72px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.28);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    color:#fff;

    transition:.35s;

}

.btn-title{

    font-size:18px;

    font-weight:600;

}

.btn-subtitle{

    font-size:12px;

    opacity:.75;

    letter-spacing:.5px;

}

.hero-btn:hover{

    background:

    rgba(255,255,255,.22);

    transform:

    translateY(-3px);

}

.scroll-down{

    position:absolute;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:34px;

    z-index:20;

}

.scroll-down{

    animation:

    scrollMove

    2.4s

    ease-in-out

    infinite;

}

@keyframes scrollMove{

0%{

transform:

translate(-50%,0);

}

50%{

transform:

translate(-50%,10px);

}

100%{

transform:

translate(-50%,0);

}

}


/* =======================================
                Intro
======================================= */

.intro{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:120px 30px;

    background:
    linear-gradient(
        180deg,
        #eef6ee,
        #f7faf7
    );

}

.intro-content{

    width:min(900px,90%);

    text-align:center;

}

.intro-small{

    display:inline-block;

    margin-bottom:24px;

    letter-spacing:5px;

    font-size:13px;

    color:#7c9482;

}

.intro-title{

    font-size:64px;

    color:#243628;

    margin-bottom:36px;

    font-weight:700;

}

.intro-desc{

    font-size:22px;

    color:#4b5d4d;

    line-height:2;

    margin-bottom:70px;

}

.intro-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin-bottom:80px;

}

.intro-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:26px;

    border-radius:22px;

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.75);

    box-shadow:
    0 15px 40px rgba(0,0,0,.06);

    transition:.35s;

}

.intro-item:hover{

    transform:translateY(-8px);

}

.intro-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#6bb46d;

}

.intro-item span:last-child{

    font-size:20px;

    color:#2d4632;

}

.intro-end{

    margin-top:30px;

    font-size:30px;

    line-height:1.8;

    color:#233226;

    font-weight:600;

}


/* =========================
        森林生命动态
========================= */


/* =========================
        图层层级
========================= */


.hero-bg{

    z-index:1;

    transform:
    translate(
        var(--px,0px),
        var(--py,0px)
    );

}


.hero-light{

    z-index:2;

}





/* =========================
        树冠图层
========================= */


.hero-leaf-left,
.hero-leaf-middle,
.hero-leaf-right{

    z-index:3;

}





/* =========================
        花草图层
========================= */


.hero-flower-left-grass,
.hero-flower-middle-left,
.hero-flower-middle-center,
.hero-flower-middle-right,
.hero-flower-right-grass{

    z-index:4;

}





/* =========================
        光束呼吸
========================= */


.hero-light{


    animation:

    lightBreath

    16s

    ease-in-out

    infinite;


    transform-origin:center;


}



@keyframes lightBreath{


0%,100%{


    opacity:.55;


    transform:

    translate(
    var(--px,0px),
    var(--py,0px)
    )

    scale(1);


}



50%{


    opacity:.95;


    transform:

    translate(
    var(--px,0px),
    var(--py,0px)
    )

    scale(1.06);


}


}





/* =========================
        左侧树冠
========================= */


.hero-leaf-left{


    animation:

    leafLeftWind

    11s

    ease-in-out

    infinite;


    transform-origin:left top;


}



@keyframes leafLeftWind{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg);


}



35%{


transform:

translateX(calc(var(--px,0px) + 12px))

rotate(1.2deg);


}



70%{


transform:

translateX(calc(var(--px,0px) - 7px))

rotate(-0.7deg);


}


}




/* =========================
        中间树冠
========================= */


.hero-leaf-middle{


    animation:

    leafMiddleWind

    13s

    ease-in-out

    infinite;


    animation-delay:2s;


    transform-origin:center top;


}



@keyframes leafMiddleWind{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg);


}



40%{


transform:

translateX(calc(var(--px,0px) + 12px))

rotate(1deg);


}



75%{


transform:

translateX(calc(var(--px,0px) - 7px))

rotate(-.7deg);


}


}







/* =========================
        右侧树冠
========================= */


.hero-leaf-right{


    animation:

    leafRightWind

    12s

    ease-in-out

    infinite;


    animation-delay:4s;


    transform-origin:right top;


}





@keyframes leafRightWind{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg);


}



30%{


transform:

translateX(calc(var(--px,0px) - 15px))

rotate(-1.5deg);


}



70%{


transform:

translateX(calc(var(--px,0px) + 10px))

rotate(1deg);


}


}







/* =========================
        花草风场
========================= */


.hero-flower-left-grass{


    animation:

    grassLeftMove

    9s

    ease-in-out

    infinite;


    transform-origin:bottom center;


}





.hero-flower-middle-left{


    animation:

    flowerLeftMove

    10s

    ease-in-out

    infinite;


    animation-delay:1.2s;


    transform-origin:bottom center;


}





.hero-flower-middle-center{


    animation:

    flowerCenterMove

    12s

    ease-in-out

    infinite;


    animation-delay:2.8s;


    transform-origin:bottom center;


}





.hero-flower-middle-right{


    animation:

    flowerRightMove

    11s

    ease-in-out

    infinite;


    animation-delay:4s;


    transform-origin:bottom center;


}





.-flower-right-grass{


    animation:

    grassRightMove

    10s

    ease-in-out

    infinite;


    animation-delay:5s;


    transform-origin:bottom center;


}







/* =========================
        花草动画
========================= */

@keyframes grassLeftMove{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg);


}



50%{


transform:

translateX(var(--px,0px))

rotate(-1.8deg)

translateY(-4px);


}


}



@keyframes flowerLeftMove{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg)

translateY(0);


}



50%{


transform:

translateX(var(--px,0px))

rotate(1.2deg)

translateY(-4px);


}


}



@keyframes flowerCenterMove{


0%,100%{


transform:

translateX(var(--px,0px))

translateY(0)

scale(1);


}



50%{


transform:

translateX(var(--px,0px))

translateY(-3px)

scale(1.005);


}


}


@keyframes flowerRightMove{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg)

translateY(0);


}



50%{


transform:

translateX(var(--px,0px))

rotate(-1.2deg)

translateY(-4px);


}


}



@keyframes grassRightMove{


0%,100%{


transform:

translateX(var(--px,0px))

rotate(0deg);


}



50%{


transform:

translateX(var(--px,0px))

rotate(1.8deg)

translateY(-4px);


}


}


/* =========================
        Canvas 粒子
========================= */


#forest-particles{


    position:absolute;


    inset:0;


    width:100%;


    height:100%;


    z-index:6;


    pointer-events:none;


}

/* =========================
        导航高亮
========================= */
.nav-item.active{

    color:#ffffff;

}

.nav-item.active::after{

    width:100%;

}