/* index.html 首页专用：hero banner + 四大产品族入口 + about/news
   （从 index.html 内联 <style> 提取，依赖 shared.css 的 :root 变量）*/
.banner{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;background:#000}
.hero-slides,.slide{position:absolute;inset:0;width:100%;height:100%}
.slide{opacity:0;transition:opacity 1.2s var(--ease)}
.slide.active{opacity:1;z-index:1}
.slide video,.slide img{width:100%;height:100%;object-fit:cover;background:#000}
.slide a.slide-link{display:block;width:100%;height:100%;cursor:pointer}
/* 轮播控制组:箭头+圆点+暂停 一行居中(底部,数据条上方)。
   白玻璃样式 —— 深底照片/蒙版上保持可见 */
.hero-ctl{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:13;display:flex;align-items:center;gap:1.6rem}
.hero-ctl .hero-arrow{position:static;transform:none;width:36px;height:36px;font-size:22px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35)}
.hero-ctl .hero-arrow:hover{background:rgba(255,255,255,.42);transform:scale(1.1)}
.hero-ctl .hero-dots{position:static;transform:none}
.hero-dots{display:flex;gap:2px;align-items:center}
/* 0916:圆点命中区 20×38(bg-clip content-box 保 10px 视觉),10px 裸点在手机上太难戳 */
.hero-dots .dot{width:20px;height:20px;padding:5px;box-sizing:border-box;border-radius:50%;background-color:rgba(255,255,255,.45);background-clip:content-box;border:0;cursor:pointer;transition:all .35s}
.hero-dots .dot.active{background-color:var(--green);width:38px;border-radius:10px}
/* 暂停/播放:控制组内一员,白玻璃圆 */
.hero-toggle{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex-shrink:0}
.hero-toggle:hover{background:rgba(255,255,255,.42);transform:scale(1.12)}
.hero-toggle.paused{background:var(--green);border-color:var(--green);color:#163028}
.hero-toggle svg{display:block}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:13;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.32);color:#fff;border:0;font-size:30px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .3s;display:flex;align-items:center;justify-content:center;font-family:'NettoReflex',Arial,sans-serif}
.hero-arrow:hover{background:rgba(0,0,0,.6);transform:translateY(-50%) scale(1.08)}
.hero-arrow.prev{left:24px}
.hero-arrow.next{right:24px}
/* 蒙版统一用一套, 深/浅通过 .video-active 切换, background 可平滑 transition */
.banner::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.1) 75%);
  transition:background .8s ease,opacity .8s ease}
/* 视频 slide: 浅蒙版(底部 35%, 顶部几乎透明), 白底视频依然明亮 */
.banner.video-active::after{
  background:linear-gradient(to top,rgba(0,0,0,.35) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,0) 70%);
}
.banner-text{position:absolute;left:5%;bottom:14%;width:62%;z-index:10;color:#fff;transition:opacity .5s ease}
/* 带自带文案的 slide 激活时,全局标题让位(hero.js observer 切换 .slide-has-text) */
.banner.slide-has-text .banner-text{opacity:0;pointer-events:none}
/* 每页自带文案的独立图层(与 .hero-slides 平级,z-index:10 在蒙版 ::after 之上,
   否则左侧深色渐变会压在文字上)。hero.js 按激活 slide 索引切换 .on */
.hero-texts{position:absolute;inset:0;z-index:10;pointer-events:none}
.hero-texts .slide-text{position:absolute;left:5%;bottom:24%;width:56%;max-width:760px;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s;pointer-events:none}
.hero-texts .slide-text.on{opacity:1;transform:none;pointer-events:auto}
.slide-text .eyebrow{font-size:1.2rem;letter-spacing:.4em;color:var(--green);text-transform:uppercase;margin-bottom:1.4rem;font-weight:600}
.slide-text h2{font-size:4.6rem;font-weight:700;line-height:1.15;letter-spacing:.01em;color:#fff}
.slide-text .sub{font-size:1.7rem;opacity:.92;margin-top:1.6rem;line-height:1.65;max-width:46rem;color:#fff}
.slide-text .btn-row{margin-top:2.2rem;display:flex;gap:1.4rem}
.slide-text .btn-row .tbtn{border-color:#fff;color:#fff}
.slide-text .btn-row .tbtn:hover{background:#fff;color:var(--ink)}
.slide-text .btn-row .tbtn.solid{background:var(--green);border-color:var(--green);color:#163028;font-weight:700}
.slide-text .btn-row .tbtn.solid:hover{background:#fff;border-color:#fff}
@media(max-width:560px){.hero-texts .slide-text{width:88%;bottom:16%}.slide-text h2{font-size:3.2rem}.slide-text .sub{font-size:1.4rem}}
.banner-text .eyebrow{font-size:1.3rem;letter-spacing:.4em;color:var(--green);text-transform:uppercase;margin-bottom:1.8rem;font-weight:600}
.banner-text h1{font-size:6rem;font-weight:700;line-height:1.12;color:#fff;letter-spacing:.01em}
.banner-text h1 em{font-style:normal;color:var(--green)}
.banner-text .text-2{font-size:1.9rem;color:#fff;opacity:.85;margin-top:2rem;max-width:50rem;line-height:1.7}
.banner-text .btn-row .tbtn{border-color:#fff;color:#fff}
.banner-text .btn-row .tbtn:hover{background:#fff;color:var(--ink)}
.banner-text .btn-row .tbtn.solid{background:var(--brand);border-color:var(--brand)}
.banner-text .btn-row .tbtn.solid:hover{background:#fff;border-color:#fff}
.hero-stats{position:absolute;left:0;bottom:0;width:100%;z-index:12;display:flex;justify-content:center;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12);transition:background .8s ease}
.banner.video-active .hero-stats{background:rgba(255,255,255,.5)}
.hero-stat{flex:1;padding:2.2rem 1rem;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.hero-stat:last-child{border-right:0}
.hero-stat strong{display:block;font-size:2.8rem;color:var(--green);font-weight:800;font-family:'NettoReflex',Arial,sans-serif}
.hero-stat span{display:block;font-size:1.2rem;color:rgba(255,255,255,.7);margin-top:.6rem;letter-spacing:.05em}

/* ===== 移动端 hero(0915 手机适配;>680px 桌面不受影响) =====
   坑:667px 屏上 .hero-ctl(bottom:150px) 与 .banner-text(bottom:22%≈147px) 几乎同位,箭头压按钮。
   触屏上箭头冗余(拖拽切帧已实现),≤680px 收掉,控制组只留圆点+暂停;
   bottom:132 给右下 review-mode 反馈浮窗(≤768 bottom:86px)让位,两层文案统一抬到控制组上方。 */
@media(max-width:680px){
  /* 0916:82vh 短 banner——超宽图(2.3:1)在整屏竖窗里 cover 只剩 1/4 画面,比例失真;矮窗+字阶下调 */
  .banner{height:82vh;min-height:540px}
  /* 0922:高度铺到 tabbar 顶边——消灭「上半照片下半白」的拦腰分色
     (vh 按"最大可视"算永远偏高,82vh 底下必露一条白);banner 从 y=0 起、顶部本就被
     fixed header 覆盖,故只减 tabbar 高。svh=地址栏可见时的稳定视口;裁切量与 82vh 基本持平。
     旧浏览器不认 svh 自动回退上一行的 82vh */
  .banner{height:calc(100svh - 5.4rem)}
  .banner .hero-ctl{bottom:132px;gap:1rem}
  .banner .hero-ctl .hero-arrow{display:none}
  .banner .banner-text{bottom:170px}
  .banner .banner-text h1{font-size:2.9rem}
  .banner .banner-text .text-2{font-size:1.45rem;margin-top:1.1rem}
  .banner .banner-text .btn-row .tbtn{padding:.95rem 1.8rem}
  .banner .banner-text .btn-row .tbtn span{font-size:1.25rem}
  .banner .hero-texts .slide-text{bottom:170px}
  .banner .hero-texts .slide-text h2{font-size:2.7rem}
  .banner .hero-texts .slide-text .sub{font-size:1.3rem}
}
/* ≤560px:数据条四项缩字防挤(375px 屏每项仅 ~90px,3.2rem 大数字放不下) */
@media(max-width:560px){
  .banner .hero-stat{padding:1.3rem .4rem}
  .banner .hero-stat strong{font-size:1.9rem}
  .banner .hero-stat:first-child strong,.banner .hero-stat:last-child strong{font-size:2.5rem}
  .banner .hero-stat span{font-size:.95rem}
  .banner .hero-stat .src-note{font-size:.72rem}
}

/* 四大产品族入口（真图 + 暗化 overlay）*/
.sect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;padding-bottom:6rem}
.sect-card{position:relative;aspect-ratio:3/4;border-radius:.8rem;overflow:hidden;display:flex;align-items:flex-end;padding:2.6rem;color:#fff;transition:all var(--ease);background-size:cover;background-position:center}
.sect-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.15) 100%);z-index:1;transition:background var(--ease)}
.sect-card:hover::before{background:linear-gradient(to top,rgba(42,81,77,.82) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.15) 100%)}
.sect-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px -12px rgba(29,58,55,.35)}
.sect-card .inner{position:relative;z-index:2}
.sect-card .eng{font-size:1.2rem;letter-spacing:.25em;color:var(--green);text-transform:uppercase;font-weight:600}
.sect-card h3{font-size:2.6rem;font-weight:700;margin-top:.6rem;line-height:1.1}
.sect-card .more{font-size:1.3rem;margin-top:1.4rem;color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:.6rem;letter-spacing:.05em}
.sect-card:hover .more{color:#fff;transform:translateX(4px);transition:transform var(--ease)}
@media(max-width:1024px){.sect-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sect-grid{grid-template-columns:1fr}.banner-text h1{font-size:4rem}.banner-text{width:88%}}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center;margin-top:2rem}
@media(max-width:768px){.about-grid{grid-template-columns:1fr;gap:2rem}}
.news-ph{background:linear-gradient(135deg,#2A514D,#1d3a37);display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem}