body,  div,  img,  li, ol,  ul { margin: 0px; padding: 0px; vertical-align: baseline; }
img { border: 0px none; }
img { width: auto; height: auto; }
li, ol, ul { list-style: outside none none; }
header, nav,  { display: block; }
body, html {  }
body { font-size: 12px; font-family: var(--font-sans); }
html { background-image: none; background-attachment: fixed; }
a { cursor: pointer; }
a { color: var(--color-rgb-link-gray); }
a, a:hover { text-decoration: none; }
i { overflow: hidden; }
.clearfix {  }
body { position: relative; }
header {
  width: 100%;
  min-width: 1240px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  /* 默认态：顶部暗色渐变，确保白字在任意视频帧上可读 */
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
  background-color: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    background-color 0.35s var(--e, ease),
    background-image 0.35s var(--e, ease),
    -webkit-backdrop-filter 0.35s var(--e, ease),
    backdrop-filter 0.35s var(--e, ease),
    box-shadow 0.35s var(--e, ease);
}

/* 滚动态：白色磨砂，文字切换为深色 */
header.header--scrolled {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.10);
}

/* 滚动态：主导航链接变深色 */
header.header--scrolled nav ul > li > a {
  color: var(--color-text-heading);
  text-shadow: none;
}
header.header--scrolled nav ul > li > a:hover {
  color: var(--color-brand-primary);
}
/* 滚动态：顶部工具栏文字变深色 */
header.header--scrolled .nav-top > ul > li span {
  color: var(--color-text-heading);
}
/* 滚动态：社交平台图标恢复彩色（取消白色反色滤镜）*/
header.header--scrolled .nav-top > ul > li.partner-icon .pic-icon {
  filter: none;
  opacity: 0.8;
}
/* 滚动态：hover 下划线改为品牌橙 */
header.header--scrolled nav > ul > li:hover:not(:last-child) > a:after {
  background: var(--color-brand-primary);
}
header.header--scrolled nav > ul > li.on > a:after {
  background: var(--color-brand-primary);
}
header .head { display: block; width: 1240px; margin: 0px auto; height: 90px; }
.head .logo { display: block; width: 300px; float: left; }
.head .logo img { display: block; max-width: 160px; }
.head .nav { display: block; width: 940px; float: right; padding-top: 14px; }
.head .nav .nav-top { height: 28px; padding: 0px 19px; display: table; position: relative; }
.nav-top > ul { font-size: 0px; height: 28px; }
.nav-top > ul > li { float: left; line-height: 28px; height: 28px; margin-right: 24px; }
.nav-top > ul > li:last-child { margin-right: 0px; }
.nav-top > ul > li img { width: 16px; height: 16px; margin: 0px 5px 0px 0px; }
.nav-top > ul > li img, .nav-top > ul > li span { display: inline-block; vertical-align: middle; }
.nav-top > ul > li span { font-size: 12px; color: var(--color-white); position: relative; }
.nav-top > ul > li.partner-icon li { float: left; position: relative; }
.nav-top > ul > li.partner-icon .pic-icon { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; filter: brightness(0) invert(1); opacity: 0.85; transition: opacity 0.2s, filter 0.35s; }
.nav-top > ul > li.partner-icon li:hover .pic-icon { opacity: 1; }
.nav-top > ul > li.partner-icon li:last-child { margin-right: 0px; }
nav { padding-top: 16px; clear: both; }
nav > ul { height: 46px; }
nav > ul > li { float: left; text-align: center; height: 46px; position: relative; padding: 0px 18px 14px; }
nav ul > li.allProduct { position: static; }
nav > ul > li.on > a:after { content: ""; position: absolute; width: 56px; height: 2px; bottom: 0px; left: 50%; margin-left: -28px; background: var(--color-rgb-black) none repeat scroll 0% 0%; }
nav > ul > li.on a.relations::after { width: 96px; margin-left: -48px; }
nav > ul > li:hover:not(:last-child) > a:after { content: ""; position: absolute; width: 56px; height: 2px; bottom: 0px; left: 50%; margin-left: -28px; background: var(--color-brand-primary-b) none repeat scroll 0% 0%; }
nav > ul > li.relations:hover > a:after { width: 96px; margin-left: -48px; }
nav ul > li.on, nav ul > li:hover ol { display: block; }
nav ul > li ol a::after { display: none; }
nav ul > li > a {
  line-height: 30px;
  display: block;
  font-size: 15px;
  color: var(--color-white);
  position: relative;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65), 0 0 2px rgba(0,0,0,0.4);
  transition: color 0.35s var(--e, ease), text-shadow 0.35s var(--e, ease);
}
nav ul > li ol { position: absolute; left: 0px; top: 48px; padding: 4px 0px; background: var(--color-rgb-white) none repeat scroll 0% 0%; box-shadow: 0px 0px 40px 0px var(--color-nav-dropdown-shadow); border-radius: 4px; display: none; z-index: 100; }
nav ul > li ol li { height: 32px; background: var(--color-rgb-white) none repeat scroll 0% 0%; width: 135px; padding-left: 15px; text-align: left; line-height: 32px; cursor: pointer; }
nav ul > li ol li a { display: block; line-height: 32px; font-size: 12px; color: var(--color-rgb-link-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav ul > li ol li.current, nav ul > li ol li:hover { background: var(--color-nav-row-hover) none repeat scroll 0% 0%; }
head { position: relative; }
.allProduct .main { display: none; margin: 0px auto 0px -50%; position: absolute; left: 50%; top: 93px; width: 100%; min-width: 1240px; background: transparent url('../assets/images/index/allproductbg.jpg') no-repeat scroll 0% 0% / cover ; height: 515px; z-index: 999999; }
.productList { padding: 40px 0px 0px; width: 1240px; height: 515px; box-sizing: border-box; margin: 0px auto; }
.allProduct:hover .main { display: block; }
.productList .left { height: 385px; float: left; overflow: hidden; }
.productList .left ul li { list-style: outside none none; float: left; margin-right: 15px; width: 342px; height: 385px; }
.productList .left ul li img { width: 342px; height: 385px; display: block; border-radius: 6px; }
.productList .right { overflow: hidden; height: 385px; }
.productList .right ul li { list-style: outside none none; float: left; margin-right: 15px; height: 204px; width: 160px; padding-bottom: 24px; }
.productList .right ul li img { height: 181px; width: 160px; display: block; }
.productList .bottom { overflow: hidden; margin-top: 20px; }
.productList .bottom ul li { list-style: outside none none; float: left; margin-right: 19px; width: 160px; height: 181px; }
.productList ul li { position: relative; }
.partner-icon ul li .detail-pic { display: none; position: absolute; left: -250%; width: 226px; height: 308px; z-index: 2; }
.partner-icon ul li:hover .detail-pic { display: block; }

/* ============================================================
   Navigation Dropdown Menus — Unified Design
   ============================================================ */
nav ul > li.allProduct { position: relative; }

nav ul > li > .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08), 0 1px 3px rgba(17, 24, 39, 0.04);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 1001;
    padding: 24px;
    margin-top: -10px;
    border: 1px solid rgba(0,0,0,0.03);
}

nav ul > li:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dropdown-simple { width: 160px; padding: 12px; }
.dropdown-simple a {
    display: block;
    padding: 12px 16px;
    color: #4B5563;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s;
    line-height: 1.5;
    white-space: nowrap;
    height: auto;
    width: auto;
    background: none;
    text-align: left;
    overflow: visible;
}
.dropdown-simple a:hover {
    background-color: #F9FAFB;
    color: #FF6A13;
    transform: translateX(4px);
}

.dropdown-mega {
    width: 680px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    height: auto;
    background: #fff;
    background-image: none;
    min-width: auto;
    padding: 0 !important;
    overflow: hidden;
}

.mega-col-left {
    background: linear-gradient(160deg, #FAFBFC 0%, #F3F4F6 100%);
    border-radius: 16px 0 0 16px;
    padding: 28px 24px;
    border-right: none;
    display: flex;
    flex-direction: column;
}

.mega-title {
    font-size: 11px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.brand-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 10px;
    transition: all 0.25s ease;
    margin-bottom: 4px;
    flex: 1;
}
.brand-link:last-child { margin-bottom: 0; }
.brand-link:hover { background-color: rgba(255,255,255,0.75); }
.brand-link h4 {
    margin: 0 0 4px 0;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s;
    text-transform: none;
    line-height: 1.4;
}
.brand-link p {
    margin: 0;
    color: #9CA3AF;
    font-size: 12px;
    line-height: 1.5;
}
.brand-link:hover h4 { color: #FF6A13; }

.mega-col-right {
    padding: 28px 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(3, 1fr);
    gap: 6px 12px;
    align-content: center;
}
.mega-col-right .mega-title {
    grid-column: span 2;
    margin-bottom: 8px;
}

.category-link {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.25s ease;
    height: auto;
    width: auto;
    background: #F9FAFB;
}
.category-link:hover { background-color: #F3F4F6; transform: translateX(2px); }
.category-link span {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: color 0.2s;
}
.category-link:hover span { color: #FF6A13; }

footer {
 width:100%;
 min-width:1240px;
 background-color: var(--color-brand-tech-navy);
 border-top: 4px solid var(--color-brand-primary);
 font-size:0;
 position:relative;
 z-index:10
}
.footer {
 width:1240px;
 margin:0 auto;
 height:144px;
 line-height:144px
}
.footer img,
.footer span {
 display:inline-block;
 vertical-align:middle
}
.footer span {
 font-size:12px;
 color:var(--color-white);
 line-height:18px;
 margin-right:48px
}
.footer span i {
 display:block;
 font-size:14px;
 color:var(--color-white);
 line-height:20px;
 font-weight:600;
 font-style: normal;
}
.footer span.footer-tips {
 margin-right:0;
 font-size:12px;
 color:var(--color-white)
}
.footer span.footer-tips em {
 padding-left:20px;
 font-style: normal;
}
.footer .wechat-code {
 width:60px;
 margin-right:16px
}
.footer img.logo {
 margin-right:140px;
 width:158px
}
.footer-tips {
 font-size:12px;
 color:var(--color-text-caption);
 margin-right:0
}
.footer-bottom {
 width:1240px;
 margin:0 auto;
 border-top:1px solid var(--color-footer-divider);
 line-height:103px
}
.footer-bottom .icon,
.footer-bottom .icon>ul>li,
.footer-bottom .server>ul>li {
 float:left
}
.footer-bottom img {
 width:16px;
 height:16px;
 display:block
}
.footer-bottom img,
.footer-bottom span {
 display:inline-block;
 vertical-align:middle
}
.footer-bottom span {
 font-size:12px;
 color:var(--color-text-secondary);
 line-height:20px;
 margin-right:48px;
 margin-left:8px
}
.footer-bottom .server>ul>li {
 text-align:center
}
.footer-bottom .server li:last-child span {
 margin-right:0
}
.footer-bottom .server span {
 color:var(--color-white);
 font-size:14px
}

  #container {
      overflow: hidden;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }

    #background_video {
      position: absolute;

      top: 50%; left: 50%;
      transform: translate(-50%, -50%);

      object-fit: cover;
      height: 100%; width: 100%;
    }

    #video_cover {
      position: absolute;

      width: 100%; height: 100%;

      background: url('../images/9da/video.png') no-repeat;
      background-size: cover;
      background-position: center;
    }

    #video_controls {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }

    #play img {
      width: 100px;
    }
    #pause img {
      width: 90px;
    }
    #pause {
      display: none;
    }

    @media (min-width: 768px) {
      #video_controls {
        display: none;
      }
    }

    /* Demo page specific styles */

  

    #container {
      height: 100%;
	  text-align: center;
    }

    #overlay {
      position: absolute;
      top: 0; right: 0; left: 0; bottom: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 50%);
    }

    #main_content {
      z-index: 2;
      position: relative;
      display: inline-block;

      /* Shifted below center */
      top: 55%;
      transform: translateY(-50%);
    }

    #scroll-indicator {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      animation: scrollBounce 1.8s ease-in-out infinite;
      cursor: pointer;
    }

    #scroll-indicator svg {
      width: 28px;
      height: 28px;
      opacity: 0.85;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
    }

    #scroll-indicator span {
      font-size: 11px;
      color: rgba(255,255,255,0.75);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-family: var(--font-family-brand);
    }

    @keyframes scrollBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
      50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
    }

    #main_content h1 {
      text-transform: uppercase;
      font-weight: 600;
      color: #FFFFFF;
      font-size: 35px;
      font-family: var(--font-family-brand);
      text-shadow: none;
    }

    #main_content .sub_head {
      color: var(--color-white);
      font-size: 18px;
    }

    #main_content .info {
      color: var(--color-white);
      font-size: 12px;
      margin-top: 10px;
    }

    #links {
      margin-top: 50px;
    }

    #links a {
      display: inline-block;
      font-family: var(--font-family-brand);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.5px;
      text-decoration: none;
      text-transform: uppercase;
      padding: 11px 28px;
      border-radius: var(--radius-md);
      margin-right: 12px;
      transition: background-color var(--d) var(--e), border-color var(--d) var(--e);
    }
    /* 主按钮：实心虎魄橙 */
    #links a:first-child {
      background-color: var(--color-brand-primary);
      color: #FFFFFF;
      border: none;
    }
    #links a:first-child:hover {
      background-color: var(--color-brand-primary-hover);
    }
    /* 次按钮：透明底白框 */
    #links a:not(:first-child) {
      background-color: transparent;
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.7);
    }
    #links a:not(:first-child):hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

	
.nine-main-hd {
    padding-top: 45px;
    text-align: center
}
.nine-main-hd .nine-main-title {
    line-height: 44px;
    font-size: 36px;
    color: var(--color-black)
}
.nine-main-hd .nine-main-des {
    margin-top: 10px;
    line-height: 36px;
    font-size: 18px;
    color: var(--color-text-tertiary)
}
.nine-main-bd {
    padding-top: 30px
}
.w {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
	margin-top:20px;
}
.nine-solution-slider {
    margin-top: 30px
}
.nine-solution-slider-content {
    position: relative
}
.nine-solution-slider-content .nine-solution-wrap {
    position: relative;
    height: 628px;
}
.nine-solution-slider-content .nine-solution-item {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 650px;
    color: var(--color-black);
    background-size: cover!important;
    -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
    transition: all .2s cubic-bezier(.4, 0, .2, 1)
}
.nine-solution-slider-content .nine-solution-item.current {
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=100)
}
.nine-solution-slider-content .nine-solution-item-content {
    margin: 0 auto;
    padding-top: 175px;
    width: 91.66666666666667%;
    max-width: 1100px
}
.nine-solution-slider-content .nine-solution-text-wrap {
    float: left;
    padding-right: 40px;
    width: 590px
}
.nine-solution-slider-content .nine-solution-text-wrap .nine-solution-btn {
    margin-top: 15px;
    display: inline-block;
    box-sizing: border-box;
    min-width: 70px;
    background: var(--color-white);
    color: var(--color-hero-navy);
    text-align: center;
    padding: 0 30px;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    font-size: 14px;
    opacity: .9;
    filter: alpha(opacity=90);
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}
.nine-solution-slider-content .nine-solution-text-wrap .nine-solution-btn:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    box-shadow: 0 0 10px 0 rgba(3, 0, 76, .3)
}
.nine-solution-slider-content .nine-solution-title {
    line-height: 44px;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}
.nine-solution-slider-content .nine-solution-title em {
    font-size: 28px;
	font-style: normal;
}
.nine-solution-slider-content .nine-solution-des {
    margin-top: 15px;
    max-height: 120px;
    line-height: 30px;
    overflow: hidden;
    font-size: 16px
}
.nine-solution-slider-content .nine-solution-logo-wrap {
    float: left;
    margin-left: 40px;
    width: 420px;
    max-height: 230px;
    overflow: hidden;
    font-size: 0
}
.nine-solution-slider-content .nine-solution-logo-wrap:after {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle
}
.nine-solution-slider-content .nine-solution-logo-list {
    display: inline-block
}
.nine-solution-slider-content .nine-solution-logo-list li {
    display: inline-block;
    margin-top: 40px;
    width: 33%;
    vertical-align: middle;
    text-align: left
}
.nine-solution-list-wrap {
    position: relative;
    height: 132px;
    overflow: hidden
}
.nine-solution-list-wrap:hover .nine-solution-btn {
    display: block
}
.nine-solution-list-wrap .nine-solution-btn {
    display: none;
    position: absolute;
    top: 60px;
    width: 40px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    color: var(--color-link-blue);
    opacity: .6;
    filter: alpha(opacity=60);
    -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 1);
    transition: all .4s cubic-bezier(.4, 0, .2, 1)
}
.nine-solution-list-wrap .nine-solution-btn:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}
.nine-solution-list-wrap .nine-solution-btn.disabled {
    display: none
}
.nine-solution-list-wrap .nine-solution-btn-prev {
    left: 0
}
.nine-solution-list-wrap .nine-solution-btn-next {
    right: 0
}
.nine-solution-list {
    padding-top: 35px;
    text-align: center;
    font-size: 0
}
.nine-solution-list .nine-solution-list-item {
    display: inline-block;
    vertical-align: top;
    width: 130px;
    text-align: center;
    font-size: 14px;
    cursor: pointer
}
.nine-solution-list .img-wrap {
    margin: 0 auto;
    width: 42px;
    height: 42px;
    overflow: hidden;
    background-size: 42px;
    background-position: 0 0
}
.nine-solution-list .nine-solution-text {
    margin-top: 15px;
    line-height: 20px;
    color: var(--color-black);
	font-size:12px;
}
.nine-arrow-wrap {
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    display: table;
    width: 100%;
    height: 18px;
    overflow: hidden
}
.nine-arrow-wrap .nine-arrow-item {
    display: table-cell;
    position: relative;
    width: auto;
    background-color: var(--color-white)
}
.nine-arrow-wrap .nine-arrow-triangle {
    width: 1200px;
    height: 17px;
    background-color: transparent
}
.nine-arrow-wrap .nine-arrow-triangle:after, .nine-arrow-wrap .nine-arrow-triangle:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    box-sizing: border-box
}
.nine-arrow-wrap .nine-arrow-triangle:before {
    right: 50%;
    border-bottom: 18px solid var(--color-white);
    border-right: 22px solid transparent
}
.nine-arrow-wrap .nine-arrow-triangle:after {
    left: 50%;
    border-bottom: 18px solid var(--color-white);
    border-left: 22px solid transparent
}
.nine-arrow-wrap.nine-arrow-current1 .nine-arrow-triangle:before {
    right: 94%
}
.nine-arrow-wrap.nine-arrow-current1 .nine-arrow-triangle:after {
    left: 6%;
    width: 94%
}
.nine-arrow-wrap.nine-arrow-current2 .nine-arrow-triangle:before {
    right: 81%
}
.nine-arrow-wrap.nine-arrow-current2 .nine-arrow-triangle:after {
    left: 19%;
    width: 81%
}
.nine-arrow-wrap.nine-arrow-current3 .nine-arrow-triangle:before {
    right: 69%
}
.nine-arrow-wrap.nine-arrow-current3 .nine-arrow-triangle:after {
    left: 31%;
    width: 69%
}
.nine-arrow-wrap.nine-arrow-current4 .nine-arrow-triangle:before {
    right: 56%
}
.nine-arrow-wrap.nine-arrow-current4 .nine-arrow-triangle:after {
    left: 44%;
    width: 56%
}
.nine-arrow-wrap.nine-arrow-current5 .nine-arrow-triangle:before {
    right: 44%;
    width: 56%
}
.nine-arrow-wrap.nine-arrow-current5 .nine-arrow-triangle:after {
    left: 56%
}
.nine-arrow-wrap.nine-arrow-current6 .nine-arrow-triangle:before {
    right: 31%;
    width: 69%
}
.nine-arrow-wrap.nine-arrow-current6 .nine-arrow-triangle:after {
    left: 69%
}
.nine-arrow-wrap.nine-arrow-current7 .nine-arrow-triangle:before {
    right: 19%;
    width: 81%
}
.nine-arrow-wrap.nine-arrow-current7 .nine-arrow-triangle:after {
    left: 81%
}
.nine-arrow-wrap.nine-arrow-current8 .nine-arrow-triangle:before {
    right: 6%;
    width: 94%
}
.nine-arrow-wrap.nine-arrow-current8 .nine-arrow-triangle:after {
    left: 94%
}
	.nr div{background-image: url(../images/9off/0.jpg);background-position: 0px 0px;}
	.nr.current div{background-image: url(../images/9/0.jpg);background-position: 0px 0px;}
	
	.lr div{background-image: url(../images/9off/1.jpg);background-position: 0px 0px;}
	.lr.current div{background-image: url(../images/9/1.jpg);background-position: 0px 0px;}
	
	.jr div{background-image: url(../images/9off/2.jpg);background-position: 0px 0px;}
	.jr.current div{background-image: url(../images/9/2.jpg);background-position: 0px 0px;}
	.yy div{background-image: url(../images/9off/3.jpg);background-position: 0px 0px;}
	.yy.current div{background-image: url(../images/9/3.jpg);background-position: 0px 0px;}
	.sanwenyu div{background-image: url(../images/9off/4.jpg);background-position: 0px 0px;}
	.sanwenyu.current div{background-image: url(../images/9/4.jpg);background-position: 0px 0px;}
	.huoji div{background-image: url(../images/9off/5.jpg);background-position: 0px 0px;}
	.huoji.current div{background-image: url(../images/9/5.jpg);background-position: 0px 0px;}
	.jqy div{background-image: url(../images/9off/6.jpg);background-position: 0px 0px;}
	.jqy.current div{background-image: url(../images/9/6.jpg);background-position: 0px 0px;}
	.dcy div{background-image: url(../images/9off/7.jpg);background-position: 0px 0px;}
	.dcy.current div{background-image: url(../images/9/7.jpg);background-position: 0px 0px;}
	.ynf div{background-image: url(../images/9off/8.jpg);background-position: 0px 0px;}
	.ynf.current div{background-image: url(../images/9/8.jpg);background-position: 0px 0px;}
	.popular-food-heading{height:45px;}

/* =====================================================
   叙事区 #narrative — 第一幕（实验室）→ 第二幕（WarmData）
   ===================================================== */

/* ---- 通用入场动画 ---- */
.narr-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--e, ease), transform 0.9s var(--e, ease);
}
.narr-reveal.from-left  { transform: translateX(60px); }
.narr-reveal.from-right { transform: translateX(-60px); }
.narr-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---- 第一幕：明亮实验室 + 视差 ---- */
.narr-scene-lab {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  /* 不设 overflow:hidden，让 background-attachment:fixed 正确渲染 */
}

/* 视差背景：fixed 锚定视口 → 滚动时页面走、图片不走 */
.narr-lab-bg {
  position: absolute;
  inset: 0;
  background-image: url('../../2026/wm1.png');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  z-index: 0;
}

/* 遮罩：上方极浅白色（提高深色文字可读性）→ 底部完全融入纯白 */
.narr-lab-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.30) 0%,   /* 轻微白色打底，文字可读 */
    rgba(255,255,255,0.05) 45%,  /* 中部几乎透明，还原照片色调 */
    rgba(255,255,255,0.70) 75%,  /* 开始羽化 */
    rgba(255,255,255,1.00) 100%  /* 底部完全消融为白 */
  );
  z-index: 1;
}

/* 内容：居左，最大宽度限制，上下留适当内边距 */
.narr-lab-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 60px 160px; /* 底部大 padding 让统计卡自然落在羽化区 */
}

/* ---- 通用标签 ---- */
.narr-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  /* text-transform: uppercase; */
  color: var(--color-brand-primary);
  border: 1px solid rgba(255,106,19,0.50);
  border-radius: var(--radius-sm, 4px);
  padding: 5px 14px;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
/* 第二幕标签：在白底上去掉背景 */
.narr-tag--outline {
  background: transparent;
  backdrop-filter: none;
}

/* 第一幕标题：深色（底图已是明亮白蓝调） */
.narr-heading {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 52px;
  font-weight: 700;
  color: var(--color-text-heading, #111827);
  line-height: 1.15;
  margin: 0 0 24px;
  letter-spacing: -0.5px;
  max-width: none;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6); /* 轻微白色轮廓防止图片干扰 */
}

/* 第一幕正文 */
.narr-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-body, #4B5563);
  max-width: 520px;
  margin-bottom: 0;
}
.narr-body em {
  font-style: normal;
  color: var(--color-brand-primary);
  font-weight: 500;
}

/* ---- Bridge：数据锚点卡片，横跨两幕边界 ---- */
.narr-bridge {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  margin-top: -72px; /* 上浮，与场景一底部重叠 → 打破边界 */
  padding: 0 60px;
}
.narr-bridge-inner {
  background: #ffffff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  padding: 36px 72px;
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  width: 100%;
}
.narr-bridge-divider {
  width: 1px;
  height: 44px;
  background: var(--color-border-light, #E5E7EB);
  flex-shrink: 0;
}
.narr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.narr-stat-num {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--color-text-heading, #111827);
  line-height: 1;
}
.narr-stat-num i {
  font-style: normal;
  font-size: 24px;
  color: var(--color-brand-primary);
}
.narr-stat-label {
  font-size: 13px;
  color: var(--color-text-muted, #9CA3AF);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ---- 第二幕：WarmData — 纯白底，不对称排版 ---- */
.narr-scene-wd {
  background-color: #ffffff;
  padding: 100px 0 120px;
  position: relative;
  z-index: 2;
}

.narr-wd-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 5fr 6fr; /* 轻微不对称，文案侧更宽 */
  gap: 60px;
  align-items: center;
}

/* 左：图形 */
.narr-wd-graphic {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.narr-wd-glow {
  position: absolute;
  width: 75%;
  height: 75%;
  background: radial-gradient(circle, rgba(255,106,19,0.14) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.narr-wd-img {
  position: relative;
  width: 100%;
  max-width: 460px;
  z-index: 1;
  animation: narr-float 6s ease-in-out infinite;
  filter: drop-shadow(0 16px 40px rgba(255,106,19,0.18));
}
@keyframes narr-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* 右：文案，增加左侧留白 */
.narr-wd-text {
  padding-left: 40px; /* 呼吸感 */
}
.narr-wd-heading {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--color-text-heading, #111827);
  line-height: 1.2;
  margin: 16px 0 28px;
  letter-spacing: -0.5px;
}
.narr-wd-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-body, #4B5563);
  margin-bottom: 16px;
}
.narr-wd-body em {
  font-style: normal;
  color: var(--color-brand-primary);
  font-weight: 500;
}

/* 编辑语录体（Editorial Quote）：无白底白框，只有橙色竖线 */
.narr-wd-quote {
  margin: 36px 0 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--color-brand-primary);
  background: none;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-brand-primary);
  font-weight: 500;
  font-style: italic;
}

/* =====================================================
   环形协同体系 #huan-system
   ===================================================== */

#huan-system {
  background: #f9fafb;
  padding: 72px 0 100px;
}

.huan-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
}

.huan-hd {
  margin-bottom: 40px;
}

.huan-title {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-heading, #111827);
  margin: 8px 0 0;
  letter-spacing: -0.3px;
}

/* ---- 三列 Grid：左文案 | 中环形 | 右文案 ---- */
.huan-canvas {
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  gap: 0 32px;
  align-items: center;
}

/* 文案列公共 */
.huan-col {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.huan-col-l { align-items: flex-end; text-align: right; }
.huan-col-r { align-items: flex-start; text-align: left; }

.huan-text-block {
  max-width: 200px;
}

.huan-text-h {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brand-primary, #FF6A13);
  margin: 0 0 10px;
  line-height: 1.55;
}

.huan-text-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.huan-text-list li {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--color-text-body, #4B5563);
  position: relative;
}

/* 左列：橙色点在右侧 */
.huan-col-l .huan-text-list li {
  padding-right: 14px;
}
.huan-col-l .huan-text-list li::after {
  content: '';
  position: absolute;
  right: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brand-primary);
}

/* 右列：橙色点在左侧 */
.huan-col-r .huan-text-list li {
  padding-left: 14px;
}
.huan-col-r .huan-text-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brand-primary);
}

/* ---- 中央环形容器 ---- */
.huan-ring-wrap {
  position: relative;
}

.huan-ring {
  width: 100%;
  height: auto;
  display: block;
  /* 整体低强度呼吸光晕 */
  animation: huan-ring-breathe 6s ease-in-out infinite;
}

@keyframes huan-ring-breathe {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(255,106,19,0)); }
  50%       { filter: drop-shadow(0 2px 20px rgba(255,106,19,0.22)); }
}

/* ---- 四个 Icon 节点 ---- */
/*  位置参考 p3-c.png 的 4 个圆球圆心坐标（占环形图宽高的百分比）：
    TL(node1): left 24%  top 30%
    TR(node2): left 76%  top 27%
    BL(node3): left 24%  top 71%
    BR(node4): left 76%  top 71%                                        */
.huan-icon {
  position: absolute;
  transform: translate(-50%, -50%);
  /* 入场：初始不可见 */
  opacity: 0;
  /* 只对 opacity 做 transition，transform 交给 animation 接管 */
  transition: opacity 0.7s var(--e, ease);
}

.huan-icon-1 { left: 24%; top: 30%; width: 24%; transition-delay: 0.10s; }
.huan-icon-2 { left: 76%; top: 27%; width: 24%; transition-delay: 0.28s; }
.huan-icon-3 { left: 24%; top: 71%; width: 24%; transition-delay: 0.46s; }
.huan-icon-4 { left: 76%; top: 71%; width: 24%; transition-delay: 0.64s; }

/* 入场后切换到持续 bob 动画 */
.huan-icon.is-visible {
  opacity: 1;
}
.huan-icon-1.is-visible { animation: huan-bob 3.2s ease-in-out 0.00s infinite; }
.huan-icon-2.is-visible { animation: huan-bob 3.2s ease-in-out 0.80s infinite; }
.huan-icon-3.is-visible { animation: huan-bob 3.2s ease-in-out 1.60s infinite; }
.huan-icon-4.is-visible { animation: huan-bob 3.2s ease-in-out 2.40s infinite; }

/* Bob 动画：scale + 阴影脉动（包含 translate 以维持 -50%/-50% 居中） */
@keyframes huan-bob {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.00) translateY(0px);
    filter: drop-shadow(0 4px 10px rgba(255,106,19,0.28));
  }
  50% {
    transform: translate(-50%, -50%) scale(1.10) translateY(-5px);
    filter: drop-shadow(0 10px 26px rgba(255,106,19,0.52));
  }
}

/* =====================================================
   天性喂养的科学体系 · SVG 波纹时间线 (#timeline-science)
   ===================================================== */

#timeline-science {
  background: #FFF8F2;
  padding: 80px 0 0;
}

.tls-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px 52px;
}

/* 大标题：与 huan-title / narr-heading 风格一致，无竖线边框 */
.tls-title {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-heading, #111827);
  line-height: 1.2;
  margin: 8px 0 20px;
  letter-spacing: -0.3px;
}

/* 正文 */
.tls-body {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-body, #4B5563);
  max-width: 520px;
  margin: 0;
}

/*
  SVG 波纹区：用 padding-bottom 维持 viewBox 840.49×273.58 的宽高比
  32.55% = 273.58 / 840.49 × 100
*/
.tls-wave-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 32.55%;
  overflow: visible; /* 允许年份标签略微溢出 */
}

.tls-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* HTML 标签层 */
.tls-labels {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

/* 单个年份节点 */
.tls-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 160px;
  pointer-events: auto;
}

/* 年份数字：与品牌橙色保持一致，字体全局统一 */
.tls-year {
  display: block;
  font-family: var(--font-family-brand, sans-serif);
  font-size: 44px;
  font-weight: 800;
  color: var(--color-brand-primary, #FF6A13);
  line-height: 1;
  letter-spacing: -1.5px;
}

/* 描述文字：与全局 body 字体一致 */
.tls-desc {
  display: block;
  font-family: var(--font-family-brand, sans-serif);
  font-size: 12px;
  line-height: 1.7;
  color: #6B7280;
  margin-top: 4px;
}

/* ── 入场动画 keyframes ───────────────────────────── */

/* 波纹线切入动画：从左侧整体滑入 + 淡入 */
@keyframes tls-draw {
  0%   { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 节点圆点弹入 */
@keyframes tls-pop {
  0%   { opacity: 0; transform: scale(0.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* 上方标签：从高处下落切入，距离波纹更远 */
@keyframes tls-in-above {
  0%   { opacity: 0; transform: translate(-50%, calc(-100% - 100px - var(--tls-extra-offset, 0px))); }
  100% { opacity: 1; transform: translate(-50%, calc(-100% - 80px - var(--tls-extra-offset, 0px))); }
}

/* 下方标签：从低处上浮切入，距离波纹更远 */
@keyframes tls-in-below {
  0%   { opacity: 0; transform: translate(-50%, calc(70px + var(--tls-extra-offset, 0px))); }
  100% { opacity: 1; transform: translate(-50%, calc(50px + var(--tls-extra-offset, 0px))); }
}


/* ========================================================
   产品矩阵：过渡区 + Sticky 画廊
   #product-bridge  |  #product-gallery
   ======================================================== */

/* 过渡引子 */
#product-bridge {
  background: #ffffff;
  padding: 96px 0 72px;
  text-align: center;
}
.pb-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}
.pb-title {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--color-text-heading, #111827);
  margin: 12px 0 20px;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.pb-sub {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-body, #4B5563);
  margin: 0;
}

/* 整体画廊容器 */
#product-gallery {
  background: #ffffff;
  padding: 24px 0 140px;
}
.pg-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: flex-start;
  gap: 0 56px;
}

/* ── 左侧固定导航 ── */
.pg-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 104px;
  padding-top: 60px;
}
.pg-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid #E5E7EB;
}
.pg-nav-item {
  padding: 18px 0 18px 28px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}
.pg-nav-item::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--color-brand-primary, #FF6A13);
  transform: scaleY(0);
  transition: transform 0.35s var(--e, cubic-bezier(.4,0,.2,1));
  transform-origin: top;
}
.pg-nav-item.active::before { transform: scaleY(1); }
.pg-nav-name {
  display: block;
  font-family: var(--font-family-brand, sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: #9CA3AF;
  transition: color 0.3s;
  line-height: 1.3;
}
.pg-nav-item:hover .pg-nav-name { color: var(--color-brand-primary, #FF6A13); }
.pg-nav-item.active .pg-nav-name { color: var(--color-text-heading, #111827); }
.pg-nav-desc {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 13px;
  color: var(--color-text-body, #4B5563);
  line-height: 1.6;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.35s ease;
}
.pg-nav-item.active .pg-nav-desc {
  max-height: 60px;
  opacity: 1;
  margin-top: 10px;
}

/* ── 右侧产品卡片 ── */
.pg-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 60px;
}
.pg-card {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17,24,39,0.05), 0 16px 48px rgba(17,24,39,0.06);
  transition: transform 0.45s var(--e, cubic-bezier(.4,0,.2,1)),
              box-shadow 0.45s ease;
}
.pg-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 3px 0 0 var(--color-brand-primary, #FF6A13),
    0 24px 72px rgba(255,106,19,0.10),
    0 6px 20px rgba(17,24,39,0.07);
}

/* 卡片内层：图片铺满全卡 */
.pg-card-inner {
  position: relative;
  height: 460px;
}

/* 单一渐变遮罩：覆盖整张卡片，在文字区保持 88% 白，然后平滑消融到透明
   用 ::before 而非文字面板的 ::after，消除两层叠加产生的亮带 */
.pg-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.88)  0%,
    rgba(255, 255, 255, 0.88) 32%,   /* 与文字面板宽度对齐，匀速保持 */
    rgba(255, 255, 255, 0.44) 48%,   /* 中间过渡点，避免生硬 */
    rgba(255, 255, 255, 0.00) 65%    /* 完全透明，图片全力展示 */
  );
}
/* 奶弗的暖白渐变 */
#pg-card-naifu .pg-card-inner::before {
  background: linear-gradient(
    to right,
    rgba(255, 250, 246, 0.88)  0%,
    rgba(255, 250, 246, 0.88) 32%,
    rgba(255, 250, 246, 0.44) 48%,
    rgba(255, 250, 246, 0.00) 65%
  );
}

/* 纯图片卡片：去掉渐变蒙版 */
.pg-card--photo-only .pg-card-inner::before {
  display: none;
}

/* 图片层：绝对定位铺满整张卡片，位于渐变层下方 */
.pg-card-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}

/* 纯图片卡片：图片铺满整个卡片 */
.pg-card--photo-only .pg-card-photo {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 文字面板：无自身背景色，完全依赖上方渐变层提供半透明底色 */
.pg-card-text {
  position: relative;
  z-index: 3;
  width: 32%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 24px 36px 40px;
  background: none;
}

/* 标签 */
.pg-card-tag {
  display: inline-block;
  background: var(--color-brand-primary, #FF6A13);
  color: #ffffff;
  font-family: var(--font-family-brand, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: var(--radius-sm, 4px);
  margin-bottom: 14px;
  align-self: flex-start;
}
.pg-tag-warm {
  background: none;
  color: #7C5442;
  border: 1px solid #C4A882;
}

/* 大标题 */
.pg-card-title {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.1px;
  line-height: 1.25;
  color: #111827;
}

/* 副标题 */
.pg-card-sub {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.6;
  color: #4B5563;
}
.pg-sub-warm { font-style: italic; }

/* 正文 */
.pg-card-body {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 13px;
  line-height: 1.8;
  color: #6B7280;
  margin: 0 0 20px;
}

/* 列表 */
.pg-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-card-list li {
  font-family: var(--font-family-brand, sans-serif);
  font-size: 12px;
  color: #4B5563;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.pg-card-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-brand-primary, #FF6A13);
  font-size: 16px;
  line-height: 1;
  top: 0;
}

/* CTA 文字链接 */
.pg-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1.5px solid #D1D5DB;
  padding-bottom: 2px;
  font-family: var(--font-family-brand, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.22s, border-color 0.22s;
}
.pg-card-btn:hover {
  color: var(--color-brand-primary, #FF6A13);
  border-color: var(--color-brand-primary, #FF6A13);
}
.pg-btn-warm { color: #7C5442; border-color: #C4A882; }
.pg-btn-warm:hover {
  color: var(--color-brand-primary, #FF6A13);
  border-color: var(--color-brand-primary, #FF6A13);
}

/* ============================================================
   品牌动态 — 新卡片网格布局
   ============================================================ */
#popular-food-now {
  background: #ffffff;
  padding: 100px 0 120px;
}

.pfn-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.pfn-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.pfn-tag {
  display: inline-block;
  border: 1px solid var(--color-brand-primary, #FF6A13);
  color: var(--color-brand-primary, #FF6A13);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.pfn-title {
  font-size: 32px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.pfn-all-link {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1.5px solid #D1D5DB;
  transition: color 0.2s, border-color 0.2s;
}
.pfn-all-link:hover {
  color: var(--color-brand-primary, #FF6A13);
  border-color: var(--color-brand-primary, #FF6A13);
}

/* 网格：头条跨两行，右侧 2×2 */
/* 外层：头条 + 右侧子网格并排 */
.pfn-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: stretch;
}

/* 右侧 2×2 子网格，高度自动撑满 = 头条高度 */
.pfn-grid-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

.news-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.news-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.09);
  transform: translateY(-5px);
}

.news-card-img {
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* 右侧小卡片：固定 16/10 图片比例 */
.pfn-grid-right .news-card-img {
  aspect-ratio: 16 / 10;
}

/* 头条卡片：图片撑满剩余高度，文字固定在底部 */
.news-card--featured {
  display: flex;
  flex-direction: column;
}
.news-card--featured .news-card-img {
  flex: 1;
  aspect-ratio: unset;
  min-height: 260px;
}
.news-card--featured .news-card-body {
  padding: 28px 28px 32px;
}
.news-card--featured .news-card-title {
  font-size: 20px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}
.news-card--featured .news-card-excerpt {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.7;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-card-body {
  padding: 20px 20px 24px;
}

.news-card-date {
  font-size: 12px;
  color: #9CA3AF;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}

.news-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #111827;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ============================================================
   Footer — 浅灰四列布局
   ============================================================ */
.site-footer {
  background: #F7F7F8;
  padding: 0;
  border-top: none;
}

/* 渐变品牌线替代硬边橙线 */
.site-footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-brand-primary, #FF6A13) 25%,
    var(--color-brand-primary, #FF6A13) 75%,
    transparent 100%
  );
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 40px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.6fr;
  gap: 48px;
  padding-bottom: 60px;
}

.footer-col h4 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 20px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: #6B7280;
  line-height: 2.3;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--color-brand-primary, #FF6A13);
}

/* QR 码区 */
.footer-qr-row {
  display: flex;
  gap: 20px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.footer-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-qr-item img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  padding: 4px;
  background: #ffffff;
  display: block;
}

.footer-qr-item span {
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
}

/* 底栏 */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  color: #9CA3AF;
  font-size: 13px;
}

.footer-logo {
  display: block;
  height: 84px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(1);
  margin-top: 16px;
  margin-left: -18px; /* 补偿图片内置透明留白，让视觉重心与上方文字左对齐 */
}

.footer-copyright {
  font-size: 13px;
  color: #9CA3AF;
}

.footer-icp {
  font-size: 13px;
  color: #9CA3AF;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-icp:hover {
  color: #6B7280;
}