/* 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:88px;

    z-index:9999;

    transition:.45s;

}


.header.scrolled{

    height:72px;

    background:

    rgba(20,35,25,.35);

    backdrop-filter:

    blur(24px);

    -webkit-backdrop-filter:

    blur(24px);


    border-bottom:

    1px solid rgba(255,255,255,.12);


    box-shadow:

    0 15px 50px rgba(0,0,0,.18);

}

/* 内层 */

.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:30px;

    font-weight:800;

    letter-spacing:2px;

    text-shadow:

    0 4px 20px rgba(0,0,0,.35);

}

.logo-en{

    margin-top:4px;

    color:

    rgba(255,255,255,.65);

    font-size:11px;

    letter-spacing:4px;

}

/* 导航 */
.nav{

    display:flex;

    gap:8px;

    padding:6px;

    border-radius:999px;

}

.nav-item{

    padding:

    12px 24px;


    border-radius:

    999px;


    color:

    rgba(255,255,255,.85);


    font-size:14px;


    transition:.35s;

}

.nav-item:hover{

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

    backdrop-filter:blur(14px);

}

.nav-item.active{

background:

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


box-shadow:

inset 0 0 0 1px rgba(255,255,255,.18);


backdrop-filter:

blur(18px);

}

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

    width:154px;

    height:48px;


    border-radius:

    999px;


    display:flex;


    justify-content:center;


    align-items:center;


    color:white;


    font-size:15px;


    font-weight:500;


    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.25),

    rgba(255,255,255,.12)

    );


    border:

    1px solid rgba(255,255,255,.25);


    backdrop-filter:

    blur(20px);


    box-shadow:

    0 10px 35px rgba(0,0,0,.18);


    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);
  }

  .intro{

    padding:100px 20px;

  }



  .intro-title{


    font-size:42px;


  }


  .intro-desc{


    font-size:17px;


  }

  .intro-list{


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


  }

  .intro-item{


    height:100px;


  }

  .intro-end{


    font-size:24px;


  }
}

/* =======================
        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:

    clamp(56px,6vw,86px);


    font-weight:

    850;


    letter-spacing:

    8px;


    margin-bottom:

    28px;


    text-shadow:

    0 10px 40px rgba(0,0,0,.45);

}

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

.hero-slogan{

    font-size:34px;

    font-weight:500;

    margin-bottom:22px;

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

}

/* =========================
      Hero 描述
========================= */
.hero-desc{

    max-width:720px;


    font-size:

    18px;


    line-height:

    2;


    letter-spacing:

    1px;


    color:

    rgba(255,255,255,.82);

}


/* 毛玻璃 */
.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;

    position:relative;

    overflow:hidden;
    
    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{


transform:

translateY(-5px);


background:

rgba(255,255,255,.3);


box-shadow:

0 20px 50px rgba(0,0,0,.3);


}

.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;

    overflow:hidden;

    padding:160px 40px;


    background:

    radial-gradient(
        circle at 50% 20%,
        rgba(111,180,110,.18),
        transparent 45%
    ),

    linear-gradient(
        180deg,
        #ffffff 0%,
        #f4faf3 50%,
        #edf6ee 100%
    );

}


/* 背景光晕 */

.intro::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(111,180,110,.15),
        transparent 70%
    );


    top:-200px;

    left:50%;

    transform:translateX(-50%);


    filter:blur(30px);


}


.intro::after{


content:"";


position:absolute;


width:100%;

height:100%;


inset:0;


background-image:


radial-gradient(
circle,
rgba(100,170,100,.18) 1px,
transparent 2px
);



background-size:

80px 80px;



animation:

dustMove

25s

linear

infinite;



opacity:.25;



}


@keyframes dustMove{


from{

transform:
translateY(0);

}


to{

transform:
translateY(-120px);

}


}

.intro-content{

    width:min(900px,90%);

    text-align:center;


    opacity:0;

    transform:translateY(80px);

    transition:

    opacity 1.2s ease,

    transform 1.2s cubic-bezier(.22,1,.36,1);

}


.intro.show .intro-content{

    opacity:1;

    transform:translateY(0);

}

.intro.show .intro-small{

    animation:
    fadeUp .8s ease forwards;

}


.intro.show .intro-title{

    animation:
    fadeUp .9s .15s ease forwards;

}


.intro.show .intro-desc{

    animation:
    fadeUp .9s .3s ease forwards;

}


.intro.show .intro-list{

    animation:
    fadeUp .9s .45s ease forwards;

}


.intro.show .intro-end{

    animation:
    fadeUp .9s .6s ease forwards;

}


@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}


/* 小标题 */

.intro-small{


    display:inline-block;


    letter-spacing:6px;


    font-size:13px;


    color:#78977b;


    margin-bottom:30px;


    opacity:.9;


}


/* 主标题 */

.intro-title{


    font-size:72px;


    font-weight:800;


    letter-spacing:2px;


    color:#203526;


    line-height:1.2;


    margin-bottom:35px;


}


/* 描述 */
.intro-desc{


    font-size:22px;


    line-height:2;


    color:#556956;


    margin-bottom:70px;


}


/* 四个问题 */

.intro-list{


    display:grid;


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


    gap:22px;


    margin:auto;


}


.intro-item{


    height:120px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:14px;


    border-radius:28px;


    background:

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


    backdrop-filter:blur(20px);


    border:

    1px solid rgba(255,255,255,.8);



    box-shadow:


    0 20px 50px rgba(30,70,30,.08);



    transition:.45s;


}


.intro-item:hover{


    transform:

    translateY(-12px);


    background:

    rgba(255,255,255,.8);



}


/* 小绿点 */

.intro-dot{


    width:12px;


    height:12px;


    border-radius:50%;


    background:#69b66b;


    box-shadow:


    0 0 20px rgba(105,182,107,.7);


}


.intro-item span:last-child{


    font-size:18px;


    color:#314a35;


    font-weight:500;


}


/* 底部宣言 */

.intro-end{


    margin-top:80px;


    font-size:34px;


    line-height:1.8;


    font-weight:700;


    color:#1e3324;


}


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


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


.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;


}




.hero-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%;

}

/* =====================
   第二屏进入动画
   Scroll Reveal
===================== */


/* 初始状态 */

.intro-content,
.intro-small,
.intro-title,
.intro-desc,
.intro-item,
.intro-end{

    opacity:0;

    transform:translateY(60px);

}



/* JS触发 */

.intro.show .intro-content{

    opacity:1;

    transform:translateY(0);

    transition:

    opacity 1.2s ease,

    transform 1.2s cubic-bezier(.22,1,.36,1);

}



/* 子元素依次进入 */


.intro.show .intro-small{

    transition-delay:.1s;

}


.intro.show .intro-title{

    transition-delay:.25s;

}


.intro.show .intro-desc{

    transition-delay:.4s;

}



.intro.show .intro-list{

    transition-delay:.55s;

}


.intro.show .intro-end{

    transition-delay:.8s;

}




.intro.show .intro-item{

    opacity:1;

    transform:translateY(0);

    transition:

    opacity .9s ease,

    transform .9s cubic-bezier(.22,1,.36,1);

}



.intro.show .intro-item:nth-child(1){

    transition-delay:.65s;

}


.intro.show .intro-item:nth-child(2){

    transition-delay:.8s;

}


.intro.show .intro-item:nth-child(3){

    transition-delay:.95s;

}


.intro.show .intro-item:nth-child(4){

    transition-delay:1.1s;

}