@charset "UTF-8";

:root{
  --blue: #1262d9;
  --navy:#112b46;
  --ink:#18232d;
  --muted:#6f7b87;
  --line:#e2e7eb;
  --pale:#f2f5f7;
  --gutter:clamp(24px,5.2vw,100px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{
  margin:0;color:var(--ink);
  font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:17px;font-weight:500;letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
button:focus-visible,a:focus-visible{outline:3px solid #268cff;outline-offset:5px}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3{margin:0}
h1,h2,h3{font-weight:700}
[hidden]{display:none!important}
section{scroll-margin-top:90px}
::selection{background:#1262d9;color:#fff}

/* ============ 顶部导航 ============ */
.site-header{
  height:94px;padding:0 var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:36px;background:#fff;
  position:sticky;top:0;z-index:20;border-bottom:1px solid #e9edf0;
}
.brand{display:flex;align-items:center;flex-shrink:0;gap:19px}
.brand img{width:82px;height:auto}
.brand-divider{height:34px;width:1px;background:#d7dce1}
.brand-name{font-size:22px;font-weight:700;letter-spacing:2px}
.brand-name small{display:block;font-size:9px;letter-spacing:1.9px;margin-top:7px;color:#7a8691;font-weight:400}
.desktop-nav{display:flex;align-self:stretch;gap:38px}
.desktop-nav a{display:flex;align-items:center;position:relative;font-size:14px;letter-spacing:.5px}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--blue)}
.desktop-nav a.active:after{content:"";position:absolute;bottom:0;left:50%;width:22px;height:3px;transform:translateX(-50%);background:var(--blue)}
.header-contact{display:flex;align-items:center;justify-content:space-between;gap:36px;font-size:14px;background:var(--blue);color:#fff;padding:14px 22px}
.header-contact:hover{background:#084db3}
.header-contact span{font-size:21px}
.menu-toggle,.mobile-nav{display:none}

/* ============ 首页 Hero ============ */
.hero{
  position:relative;min-height:660px;height:calc(100svh - 170px);max-height:790px;
  background:linear-gradient(135deg,#081a2e 0%,#102b44 35%,#1e5a82 100%);
  overflow:hidden;display:flex;align-items:center;color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:#ffffff;
  z-index:9;
  pointer-events:none;
  animation:heroCurtain 1.6s ease-out forwards;
}
@keyframes heroCurtain{
  from{opacity:1;}
  to{opacity:0; visibility:hidden;}
}
.hero-grid{
  position:absolute;inset:0 0 0 46%;
  background-image:linear-gradient(#a9bac51a 1px,transparent 1px),linear-gradient(90deg,#a9bac51a 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(90deg,transparent,#000);
  background-image: none;
}
.hero-copy{position:relative;z-index:2;margin-left:var(--gutter);padding-bottom:60px;width:40%;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero .eyebrow{font-size:13px;letter-spacing:2.5px;display:flex;align-items:center;gap:10px;margin-bottom:24px;color:#fff;animation:heroIn .9s cubic-bezier(.2,.7,.3,1) both}
.hero .eyebrow>span{width:22px;height:2px;background:#b2cff6}
h1{font-size:clamp(52px,4.7vw,80px);letter-spacing:3px;line-height:1.3;font-weight:700;color:#fff;animation:heroIn 1s cubic-bezier(.2,.7,.3,1) .15s both}
@keyframes heroIn{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
h1 span{color:#fff}
.hero-description{color:#b9d4f9;font-size:16px;line-height:1.9;margin-top:26px;letter-spacing:1px;animation:heroIn 1s cubic-bezier(.2,.7,.3,1) .3s both}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:36px;animation:heroIn 1s cubic-bezier(.2,.7,.3,1) .45s both}
.hero .text-link{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .text-link:hover{color:#b2cff6;border-color:#b2cff6}
.hero-product{position:absolute;right:2%;width:66%;top:50%;transform:translateY(-43%);animation:heroImg 1.3s cubic-bezier(.2,.7,.3,1) .3s both}
.hero-product>img{position:relative;z-index:1;width:100%;filter:drop-shadow(0 20px 15px #25435c19)}
.hero-watermark{position:absolute;top:-13%;left:12%;font-size:clamp(70px,11.5vw,198px);font-weight:700;letter-spacing:-8px;color:#fff2;line-height:1}
@keyframes heroIn{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroImg{
  from{opacity:0;transform:translate(60px,-43%);}
  to{opacity:1;transform:translate(0,-43%);}
}
/* ============ 通用小标签 ============ */
.eyebrow{font-size:13px;letter-spacing:2.4px;font-weight:700;color:var(--blue);line-height:1.8}

/* ============ 按钮 / 文字链接 ============ */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:44px;padding:19px 28px;font-size:15px;font-weight:700;letter-spacing:1.5px;transition:background .2s,transform .2s}
.button.primary{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(18,98,217,.32)}
.button.primary:hover{background:#084db3;box-shadow:0 14px 32px rgba(8,77,179,.4)}
.button span{font-size:20px}
.text-link{display:inline-flex;align-items:center;gap:18px;font-size:15px;font-weight:700;border-bottom:1px solid #aab5bf;padding:10px 0}
.text-link:hover{color:var(--blue);border-color:var(--blue)}

/* ============ 首页能力条 ============ */
.expertise-strip{display:grid;grid-template-columns:1fr 1fr 1fr auto;padding:32px var(--gutter);align-items:center;border-bottom:1px solid var(--line);gap:36px}
.expertise-strip>div{display:grid;grid-template-columns:26px auto;column-gap:15px;border-right:1px solid var(--line)}
.expertise-strip>div>span{grid-row:1/3;font-size:12px;color:#92a0ae;padding-top:3px}
.expertise-strip strong{font-size:16px;font-weight:500;letter-spacing:1px}
.expertise-strip small{font-size:10px;color:#96a1ab;letter-spacing:1px;margin-top:8px}
.expertise-strip>a{font-size:14px;display:flex;gap:32px}
.expertise-strip>a>span{color:var(--blue)}

/* ============ 通用 section ============ */
.section{padding:100px var(--gutter)}
.products-section{padding-bottom:30px;background:#f7f8fa}
.about-section{padding-top:30px}
.section-heading{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:35px;margin-bottom:44px;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.6s ease-out, transform .8s ease-out;
}
.section-heading.visible{
  opacity:1;
  transform:translateY(0);
}
h2{font-size:clamp(32px,3vw,48px);letter-spacing:1.5px;line-height:1.45;font-weight:700}
.section-heading h2{margin-top:16px}
.section-intro{color:var(--muted);font-size:14px;line-height:1.9;letter-spacing:.6px}
.section-heading .eyebrow{color:#1a3a6b}

/* ============ 产品中心 ============ */
.product-tabs{display:flex;gap:36px;border-bottom:1px solid var(--line);margin-bottom:32px}
.product-tabs button{padding:0 0 19px;border-bottom:2px solid transparent;color:#7d8791;font-size:17px;font-weight:700;letter-spacing:.6px}
.product-tabs button.selected{color:var(--blue);border-bottom-color:var(--blue)}

/* 产品区整体：左侧 1 大 + 右侧上下两排 */
/* ===== 产品区：左右等高 + 上下两排宽度对齐 ===== */



/* 外层：左大右小，强制左右等高，并限制整体高度 */
/* ===== 产品区 ===== */
.product-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* 左侧大卡：固定高度 */
.product-card.featured{
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.product-card.featured .product-image{
  flex: 0 0 396px;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card.featured .product-image img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-card.featured .product-card-body{
  flex-shrink: 0;
  padding: 20px 32px;
}

/* 右侧网格：行数自适应，每行固定 268px */
.product-right{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 24px;
  align-content: start;
  min-height: 268px;
}

/* 上排 2 张：各跨 3 列 */
.product-right .product-card:nth-child(1),
.product-right .product-card:nth-child(2){
  grid-column: span 3;
}
/* 下排 3 张：各跨 2 列 */
.product-right .product-card:nth-child(3),
.product-right .product-card:nth-child(4),
.product-right .product-card:nth-child(5){
  grid-column: span 2;
}

/* 卡片撑满格子 */
.product-right .product-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* 图片区固定 160px 高 */
.product-right .product-card .product-image{
  flex: 0 0 160px;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
}
/* 图片区扫光：只作用于产品卡片内部的图片区 */
.product-card .product-image{
  position:relative;
  overflow:hidden;
}
.product-card .product-image::after{
  content:"";
  position:absolute;
  top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-20deg);
  pointer-events:none;
  transition:left .8s ease;
}
.product-card button:hover .product-image::after{
  left:125%;
}
.product-right .product-card .product-image img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 文字区占剩余 */
.product-right .product-card .product-card-body{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 0;
  overflow: hidden;
}

/* 右侧标题：最多两行 */
.product-right .product-card h3{
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-right .product-card p{
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
  color: #7d8791;
  letter-spacing: .5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卡片基础样式（其他不动） */
.product-card{
  background: #fff;
  border: 1px solid var(--line);
  min-width: 0;
  transition: transform .3s, box-shadow .3s;

}
/* 图片区浅灰底，文字区浅蓝底，卡片边框就清晰了 */
.product-image{
  background: #ffffff !important;
}
.product-card-body{
  background: #245b91 !important;
}

.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}
.product-card button{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0;              /* ← 加上这句 */
  border: 0;               /* ← 加上这句，防止按钮自带边框 */
  background: transparent; /* ← 加上这句，防止按钮自带底色 */
}
.product-card-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  color: var(--ink);
}
.product-card.featured h3{
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
}
.product-card.featured p{
  font-size: 14px;
  color: #7d8791;
  margin-top: 6px;
  letter-spacing: .5px;
}

.card-arrow{
  width: 30px;
  height: 30px;
  border: 1px solid #dce3e8;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #6e7f8d;
  background: #fff;
}
.product-card:hover .card-arrow{
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.product-note{
  font-size: 14px;
  font-weight: 500;
  color: #7a8b9b;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  line-height: 1.8;
  margin-top: 28px;
}
.product-note a{
  font-weight: 700;
  color: var(--blue);
}

/* 响应式 */
@media(max-width:850px){
  .product-grid{
    grid-template-columns: 1fr;
  }
  .product-card.featured{
    height: auto;
  }
  .product-card.featured .product-image{
    min-height: 250px;
  }
  .product-right{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    min-height: 0;
  }
  .product-right .product-card:nth-child(1),
  .product-right .product-card:nth-child(2),
  .product-right .product-card:nth-child(3),
  .product-right .product-card:nth-child(4),
  .product-right .product-card:nth-child(5){
    grid-column: auto;
  }
  .product-right .product-card .product-image{
    flex: 0 0 180px;
  }
}
.product-right .product-card .product-image img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 文字区：占剩余空间，居中 */
.product-right .product-card .product-card-body{
  flex:  1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 0;
  overflow: hidden;
}

/* 右侧标题：最多两行，超出省略 */
.product-right .product-card h3{
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 右侧副标题：最多一行 */
.product-right .product-card p{
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
  color: #b0bac3;
  letter-spacing: .5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 卡片基础样式 ---------- */
.product-card{
  background: #fff;
  border: 1px solid var(--line);
  min-width: 0;
  transition: transform .3s, box-shadow .3s;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}
.product-card button{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
}
.product-card-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  color: var(--ink);
  width: 100%;               /* ← 撑满卡片宽度 */
  margin: 0;                 /* ← 去掉外边距 */
  box-sizing: border-box;    /* ← 保证 padding 不撑出白边 */
}

/* 左侧大卡的标题字号单独控制（比右侧大） */
.product-card.featured h3{
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
.product-card.featured p{
  font-size: 14px;
  color: #b0bac3;
  margin-top: 6px;
  letter-spacing: .5px;
}

/* 箭头圆钮 */
.card-arrow{
  width: 30px;
  height: 30px;
  border: 1px solid #dce3e8;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  background:  #245b91;
}
.product-card:hover .card-arrow{
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* 产品区底部说明 */
.product-note{
  font-size: 14px;
  font-weight: 500;
  color: #7a8b9b;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  line-height: 1.8;
  margin-top: 28px;
}
.product-note a{
  font-weight: 700;
  color: var(--blue);
}

/* ============ 响应式：产品区在窄屏下恢复单列 ============ */
@media(max-width:850px){
  .product-grid{
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
  }
  .product-right{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .product-right .product-card:nth-child(1),
  .product-right .product-card:nth-child(2),
  .product-right .product-card:nth-child(3),
  .product-right .product-card:nth-child(4),
  .product-right .product-card:nth-child(5){
    grid-column: auto;
  }
  .product-right .product-card .product-image{
    flex: 0 0 200px;      /* 移动端图片区固定 200px 高 */
  }
  .product-card.featured .product-image{
    min-height: 250px;
  }
}
/* ============ 关于富田 ============ */
.about-section{
  display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:center;
  background:#fff;color:var(--ink);padding-top:110px;padding-bottom:110px;margin:0;
  transform:translateY(60px);                                    /* ← 新增 */
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);            /* ← 新增 */
}
.about-section.visible{
  transform:translateY(0);
}
.about-visual{min-width:0}
.film-trigger{width:100%;border:0;background:#162f44;padding:0;display:block;position:relative;overflow:hidden;aspect-ratio:1.2}
.film-trigger>img{width:100%;height:123%;max-width:none;object-fit:cover;object-position:center top;position:absolute;top:0;left:0;transition:transform .5s}
.film-trigger:hover>img{transform:scale(1.025)}
.film-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0c223ae6 0%,#0d294529 50%,#0d294533 100%)}
.play-circle{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);height:70px;width:70px;border:1px solid #ffffffbd;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:18px;padding-left:4px;background:#ffffff0d;backdrop-filter:blur(3px)}
.film-trigger:hover .play-circle{background:var(--blue);border-color:var(--blue)}
.film-label{position:absolute;bottom:36px;left:35px;text-align:left;color:#fff}
.film-label>span{font-size:26px;letter-spacing:2px}
.film-label small{display:block;font-size:10px;letter-spacing:1.8px;color:#c0cedc;margin-top:11px}
.visual-caption{font-size:12px;font-weight:500;color:#96a1aa;display:flex;justify-content:space-between;margin-top:18px;gap:20px}
.about-copy h2{margin:16px 0 26px;color:var(--ink);font-size:clamp(34px,3vw,50px)}
.about-copy>p:not(.eyebrow){color:#6f7b87;line-height:2.1;font-size:17px;margin-top:12px}
.about-copy .eyebrow{color:#1a3a6b}
.about-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin:28px 0 24px;border-top:1px solid var(--line);padding-top:25px;
}
.about-facts strong,
.about-facts>div:nth-child(2) strong{font-size:36px;line-height:1.3;white-space:nowrap;color:#1a3a6b;font-weight:700}
.about-facts strong span{font-size:12px;margin-left:5px;color:#6f7b87}
.about-facts p{font-size:13px;color:#8c98a2;font-weight:500;margin-top:8px}
.about-copy .text-link{color:var(--ink);border-color:#aab5bf}
.about-copy .text-link:hover{color:var(--blue);border-color:var(--blue)}

/* ============ 服务区 ============ */
.service-section{
  background: #183959;color:#fff;margin:0;
  padding:50px var(--gutter) 40px;gap:38px;
  display:grid;grid-template-columns:1.25fr repeat(3,1fr);
}
.service-heading h2{color:#fff;font-size:28px;font-weight:700;margin-top:12px;line-height:1.6}
.service-heading .eyebrow{color:#b2cff6;font-size:9px;letter-spacing:1.2px}
.service-item{
  padding-right:25px;
  opacity:0;
  transform:translateX(-60px);
  transition:opacity .9s ease-out, transform .9s cubic-bezier(.2,.7,.3,1);
}
.service-item.visible{
  opacity:1;
  transform:translateX(0);
}
/* 依次滑入*/
.service-section .service-item:nth-child(2){ transition-delay: .1s;   }
.service-section .service-item:nth-child(3){ transition-delay: .35s; }
.service-section .service-item:nth-child(4){ transition-delay: .7s;  }
.service-item>span{color:#b2cff6;font-size:12px;font-weight:700;letter-spacing:1px}
.service-item h3{color:#fff;font-size:20px;margin:16px 0 12px;font-weight:700}
.service-item p{color:#a9bccd;font-size:15px;font-weight:500;line-height:2}

/* ============ 资质条 ============ */
.credentials{
  margin:0 var(--gutter) 95px;padding:42px 0;
  border-top:2px solid #0d2338;border-bottom:2px solid #0d2338;
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px;align-items:center;
}
.credentials>div p{font-size:18px;font-weight:700}
.credentials>div>span{display:block;font-size:9px;letter-spacing:1.7px;color:#98a4ae;margin-top:13px}
.credentials>a{padding-left:25px;border-left:1px solid var(--line)}
.credentials>a strong{font-size:18px;font-weight:700}
.credentials>a>span{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:#8d9aa4;margin-top:13px;gap:12px}
.credentials i{font-style:normal;color:var(--blue)}
.credentials a:hover strong{color:var(--blue)}

/* ============ 联系区 ============ */
.contact-section{
  background:#fff;color:var(--ink);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.25fr 1fr;gap:1%;
  padding-top:40px;padding-bottom:40px;align-items:center;
}
.contact-section .eyebrow{color:#18232DFF}
.contact-heading h2{font-size:52px;font-weight:700;letter-spacing:2px;color:var(--ink);margin:17px 0 20px}
.contact-heading>p:not(.eyebrow){font-size:25px;font-weight:500;color:#6f7b87;line-height:1.9}
.contact-phone{font-size:46px;font-weight:700;letter-spacing:1.5px;color:var(--ink);display:inline-flex;gap:32px;align-items:center;margin-top:31px}
.contact-phone>span{font-size:27px}
.contact-details{border-left:2px solid var(--line);padding-left:50px;padding-top:0}
.contact-details>div{border-bottom:2px solid var(--line);padding:0 0 24px;margin-bottom:24px}
.contact-details>div:last-child{border:0;padding:0;margin:0}
.contact-details>div>span{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#18232DFF;display:block;margin-bottom:12px}
.contact-details>div>a{font-size:24px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:20px}
.contact-details b{font-weight:400}
.contact-details p{font-size:16px;font-weight:700;line-height:1.9;color:#18232DFF}
.wechat-line{display:flex;justify-content:space-between;gap:20px;align-items:center}
.wechat-line strong{font-size:24px;font-weight:700;color:var(--ink)}

/* ============ 页脚 ============ */
.site-footer{
  padding:42px var(--gutter);display:flex;justify-content:space-between;align-items:center;
  gap:30px;background: #183a59;color:#fff;
}
.footer-brand{gap:20px}
.footer-brand img{width:64px}
.footer-brand span{font-size:15px;font-weight:700;color:#fff}
.site-footer p,
.site-footer>a:last-child{font-size:13px;font-weight:500;color:#8fa4b8}
.site-footer>a:last-child:hover{color:#b2cff6}
.site-footer .icp-link{display:inline-block;margin-top:8px;font-size:12px;line-height:1.6;color:inherit;white-space:nowrap}
.site-footer .icp-link:hover,
.site-footer .icp-link:focus-visible{color:#b2cff6;text-decoration:underline;text-underline-offset:3px}

/* ============ 产品弹窗 ============ */
.product-dialog{border:0;width:min(960px,92vw);padding:0;max-height:90svh;box-shadow:0 25px 80px #0003}
.product-dialog::backdrop{background:#122c46a8;backdrop-filter:blur(5px)}
.dialog-close{position:absolute;right:15px;top:10px;z-index:2;width:40px;height:40px;background:#fff;border:1px solid var(--line);font-size:27px;color:#5d6d79}
.dialog-image{background:#f1f4f7;padding:36px;height:350px;display:flex;align-items:center;justify-content:center}
.dialog-image img{max-width:100%;max-height:100%;object-fit:contain}
.dialog-info{padding:35px 40px}
.dialog-info h2{font-size:28px;margin:10px 0 15px;color:var(--ink)}
.dialog-info>p{font-size:15px;line-height:1.9;color:#6a7885}
.dialog-actions{display:flex;gap:24px;align-items:center;margin-top:24px}
.spec-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:23px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-list dt{font-size:12px;color:#84919c}
.spec-list dd{margin:11px 0 0;font-size:18px;color:var(--blue)}
.dialog-info .spec-note{font-size:12px;color:#8a959f}

/* ============ 视频弹窗 ============ */
.film-dialog{padding:0;border:0;background:#081e31;width:min(1000px,95vw);max-width:none;max-height:90svh;overflow:visible}
.film-dialog::backdrop{background:#07192de8;backdrop-filter:blur(6px)}
.film-dialog video{display:block;width:100%;max-height:85svh}
.film-close{position:absolute;top:-42px;right:0;border:0;background:transparent;color:#fff;font-size:33px;width:40px;height:40px}
.dialog-open{overflow:hidden}

/* ============ 响应式 ============ */
@media(min-width:1800px){body{max-width:2200px;margin:auto}.hero{min-height:780px}}

@media(max-width:1150px){
  .desktop-nav{gap:23px}
  .site-header{gap:25px}
  .brand-name{font-size:19px}
  .brand{gap:12px}
  .header-contact{gap:18px}
  .hero{min-height:610px;height:680px}
  .hero-copy{width:45%}
  .hero-product{width:67%;right:-5%;transform:translateY(-28%)}
  .hero .eyebrow{font-size:11px;letter-spacing:1.5px}
  .hero-actions{gap:20px}
  .button{gap:27px}
  .text-link{gap:10px}
  .expertise-strip{gap:24px}
  .expertise-strip>a{gap:15px}
  .about-section{gap:5%}
  .about-copy>p:not(.eyebrow){font-size:15px}
  .credentials{gap:18px}
  .credentials>a{padding-left:18px}
  .credentials>a strong{font-size:15px}
  .contact-phone{font-size:32px}
}

@media(max-width:1000px){
  .service-section{grid-template-columns:repeat(3,1fr);gap:25px}
  .service-heading{grid-column:1/-1}
  .service-heading h2 br{display:none}
  .about-facts{gap:12px}
  .about-facts strong,
  .about-facts>div:nth-child(2) strong{font-size:30px}
}

@media(max-width:850px){
  .site-header{height:78px}
  .brand-name{font-size:18px}
  .brand-name small{font-size:8px}
  .brand img{width:69px}
  .desktop-nav{gap:19px}
  .desktop-nav a{font-size:13px}
  .header-contact{display:none}
  .hero{min-height:620px}
  .hero-copy{width:46%}
  .hero h1{font-size:54px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-product{width:68%;right:-9%}
  .hero-description{font-size:15px}
  .expertise-strip{grid-template-columns:repeat(3,1fr);gap:12px;padding-top:27px;padding-bottom:27px}
  .expertise-strip>a{display:none}
  .expertise-strip>div:last-of-type{border-right:0}
  .expertise-strip>div{column-gap:8px}
  .expertise-strip strong{font-size:14px}
  .expertise-strip small{font-size:8px}
  .section{padding-top:75px;padding-bottom:75px}
  .section-intro{display:none}
  .about-section{grid-template-columns:1fr;gap:38px}
  .film-trigger{aspect-ratio:1.8}
  .film-trigger>img{height:117%;object-position:50% 25%}
  .about-copy h2{font-size:33px}
  .about-copy>p:not(.eyebrow){font-size:16px}
  .about-facts{gap:70px}
  .credentials{grid-template-columns:1fr 1fr;row-gap:35px;margin-bottom:75px}
  .credentials>a:nth-child(3){border:0;padding:0}
  .site-footer{flex-wrap:wrap}
  .site-footer p{margin-left:auto}

  /* 产品区移动端 */
  .product-grid{grid-template-columns:1fr}
  .product-right .top-row,
  .product-right .bottom-row{grid-template-columns:1fr}
  .product-card.featured .product-image{min-height:250px}
}

@media(max-width:600px){
  :root{--gutter:24px}
  html{scroll-padding-top:74px}
  .site-header{height:74px;gap:15px}
  .brand img{width:65px}
  .brand-name{font-size:18px}
  .brand-divider{height:29px}
  .desktop-nav{display:none}
  .menu-toggle{display:flex;flex-direction:column;gap:6px;width:38px;height:38px;align-items:center;justify-content:center}
  .menu-toggle span{width:23px;height:2px;background:#23394b;transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .mobile-nav{display:flex;position:absolute;top:73px;left:0;right:0;padding:15px 24px 25px;background:#fff;box-shadow:0 12px 20px #1232;flex-direction:column}
  .mobile-nav a{padding:14px;border-bottom:1px solid var(--line)}

  .hero{height:740px;min-height:0;display:block}
  .hero-copy{margin:0;padding:46px var(--gutter) 0;width:100%}
  .hero .eyebrow{margin-bottom:17px;font-size:11px;letter-spacing:1.5px}
  .hero h1{font-size:51px;line-height:1.25;letter-spacing:3px}
  .hero-description{font-size:14px;line-height:1.8;margin-top:18px}
  .hero-actions{flex-direction:row;align-items:center;margin-top:24px;gap:22px}
  .button{padding:13px 17px;font-size:13px;gap:24px}
  .text-link{font-size:13px}
  .hero-product{width:107%;right:-6%;top:580px;transform:none}
  .hero-watermark{font-size:81px;letter-spacing:-4px;top:-16%;left:17%;color:#fffa}
  .hero-grid{left:15%;background-size:65px 65px}

  .expertise-strip{padding-top:24px;padding-bottom:24px}
  .expertise-strip>div{display:flex;flex-direction:column;gap:7px;padding-left:8px}
  .expertise-strip>div>span{font-size:10px;padding:0}
  .expertise-strip strong{font-size:14px}
  .expertise-strip small{display:none}

  .section{padding-top:61px;padding-bottom:61px}
  h2{font-size:30px;letter-spacing:0;line-height:1.5}
  .section-heading{margin-bottom:28px}
  .section-heading h2{margin-top:12px}
  .product-tabs{gap:0;justify-content:space-between;margin-bottom:24px}
  .product-tabs button{font-size:13px;padding-bottom:15px}

  .about-section{gap:34px}
  .film-trigger{aspect-ratio:1.25}
  .film-trigger>img{height:128%;object-position:50% top}
  .play-circle{width:60px;height:60px}
  .film-label{left:25px;bottom:28px}
  .film-label>span{font-size:22px}
  .visual-caption{font-size:10px;gap:10px}
  .about-copy h2{font-size:32px;margin:14px 0 22px}
  .about-copy>p:not(.eyebrow){font-size:15px}
  .about-facts{gap:18px}
  .about-facts strong,
  .about-facts>div:nth-child(2) strong{font-size:30px}
  .about-facts p{font-size:11px}
  .about-facts strong span{font-size:10px;margin-left:3px}

  .service-section{grid-template-columns:1fr;gap:26px;margin-bottom:50px;padding-top:28px}
  .service-heading h2{font-size:25px}
  .service-item{padding-top:20px;border-top:1px solid var(--line);padding-right:0}
  .service-item h3{margin:12px 0 10px;font-size:18px}
  .service-item p{font-size:15px}

  .credentials{margin-bottom:60px;grid-template-columns:1fr;gap:0;padding:0}
  .credentials>div{padding:26px 0;border-bottom:1px solid var(--line)}
  .credentials>a,
  .credentials>a:nth-child(3){padding:23px 0;border-left:0;border-bottom:1px solid var(--line)}
  .credentials>a:last-child{border-bottom:0}
  .credentials>a strong{font-size:17px}
  .credentials>a>span{font-size:12px}

  .contact-section{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:54px}
  .contact-heading h2{font-size:36px}
  .contact-heading>p:not(.eyebrow){font-size:15px}
  .contact-phone{font-size:36px;gap:28px;margin-top:25px;letter-spacing:0}
  .contact-details{border-left:0;padding-left:0;padding:0}
  .contact-details>div>a{font-size:20px}
  .contact-details p{font-size:15px}

  .spec-list{grid-template-columns:1fr;gap:15px}
  .spec-list>div{display:flex;align-items:center;justify-content:space-between;gap:20px}
  .spec-list dd{margin:0;font-size:16px}
  .spec-list dt{font-size:13px}

  .site-footer{padding-top:29px;padding-bottom:29px;gap:23px}
  .footer-brand span{font-size:12px}
  .site-footer p{margin:0;font-size:10px}
  .site-footer>a:last-child{font-size:11px}

  .product-dialog{width:calc(100% - 28px)}
  .dialog-image{height:260px;padding:24px}
  .dialog-info{padding:25px}
  .dialog-info h2{font-size:23px}
  .dialog-actions{align-items:flex-start;flex-direction:column;gap:16px}
}

@media(max-width:360px){
  .hero .eyebrow{font-size:10px;letter-spacing:1px}
  .hero-actions{gap:15px}
  .hero-actions .button{gap:17px}
  .hero h1{font-size:47px}
  .about-facts{gap:12px}
  .about-facts strong,
  .about-facts>div:nth-child(2) strong{font-size:26px}
  .contact-phone{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}
/* ============ 行业应用 ============ */
.industry-app-section {
  padding: 90px var(--gutter);
  background: linear-gradient(to bottom, #ffffff 0%, #f2f7fc 40%, #275787 100%);
}

.industry-app-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* 核心网格：保持原样 */
.industry-app-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr; /* 左短右长 */
  gap: 20px;
  align-items: start; /* 关键：让卡片高度由自身决定，不要被网格强行拉满 */
}

/* 卡片基础样式 */
.industry-app-card {
  position: relative;
  overflow: hidden; /* 切掉圆角和溢出的边 */
  background: #f2f5f7;
  transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0.1s;
  cursor: pointer;

}



/* 👇 新增悬停放大的效果 👇 */
.industry-app-card:hover {
  transform: scale(1.03); /* 放大 3%，你可以自己调大或小 */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 加深阴影，更有立体感 */
  z-index: 10; /* 保证放大时盖住旁边的卡片 */
  border-radius: 4px; /* 放大时加一点点圆角更好看，不需要可以删掉 */
}

.industry-app-grid > div:nth-child(1),
.industry-app-grid > div:nth-child(3),
.industry-app-grid > div:nth-child(2),
.industry-app-grid > div:nth-child(4) {
  aspect-ratio: auto !important;
  height: auto !important; /* 关键：清除任何可能强加的高度 */
}

/* 3. 统一设置图片区域的高度（这样左右高度就一致了，且绝对不会变形） */
.industry-app-bg {
  position: relative !important; /* 用相对定位把容器撑开 */
  height: 360px !important;      /* 您可根据需要调整这个高度，240px大约就是原图的高度 */
  background-size: cover !important;
  background-position: center !important;
}

/* =========================================
   文字与遮罩合并：一整条横幅
   ========================================= */
/* =========================================
   文字与遮罩：默认只显示标题，悬停展开副标题
   ========================================= */
.industry-app-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 30px;
  background: rgb(53 107 163 / 0.6); /* 默认深蓝底色 */
  color: #fff;
  z-index: 2;
  transition: background 0.3s ease;
}

.industry-app-content h3 {
  font-size: 22px;
  margin-bottom: 0; /* 默认取消下方间距 */
  font-weight: bold;
  transition: margin 0.3s ease;
}

/* 默认隐藏副标题 */
.industry-app-content p {
  font-size: 14px;
  color: #dce7f2;
  line-height: 1.6;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.3s ease;
}

/* 悬停时：展开副标题，并且遮罩背景稍微加深一点点 */
.industry-app-card:hover .industry-app-content {
  background: rgb(32 73 115 / 0.85);
}

.industry-app-card:hover .industry-app-content h3 {
  margin-bottom: 8px; /* 悬停时给副标题留出上间距 */
}

.industry-app-card:hover .industry-app-content p {
  max-height: 80px; /* 足够容纳文字的高度 */
  opacity: 1;
}

/* 响应式（移动端） */
@media (max-width: 1024px) {
  .industry-app-grid {
    grid-template-columns: 1fr;
  }
  .industry-app-grid > div {
    aspect-ratio: auto !important;
    min-height: 280px;
  }
  /* 移动端如果文字很多，可以改成底部对齐 */
  .industry-app-content {
    position: absolute;
    top: auto;
    bottom: 0;
  }
}

/* =========================================
   仅针对分切复卷系列：左侧拉长，右侧横向缩短
   ========================================= */

/* 这里把比例从 1.6 改大到了 2.2，意味着左边占得更宽，右边就被挤得更窄了 */
.product-grid:has(> .product-right > .product-card:nth-child(2):last-child) {
  grid-template-columns: 2.2fr 1fr !important;
}

/* 右侧强制上下排列 */
.product-right:has(> .product-card:nth-child(2):last-child) {
  display: flex !important;
  flex-direction: column !important;
  gap: 34px !important;
}

/* 右侧两张卡片均分高度 */
.product-right:has(> .product-card:nth-child(2):last-child) .product-card {
  flex: 1 !important;
}
/* 分切复卷系列在移动端的修复 */
@media (max-width: 850px) {
  /* 1. 强制恢复为单列（上大下小），取消之前的左右比例 */
  .product-grid:has(> .product-right > .product-card:nth-child(2):last-child) {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. 让左侧大卡片、右侧容器在手机上占满 100% 宽度 */
  .product-right:has(> .product-card:nth-child(2):last-child) {
    width: 100% !important;
    height: auto !important; /* 取消强制等高 */
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3. 右侧的两张小卡片，在手机上也占满 100% 宽度 */
  .product-right:has(> .product-card:nth-child(2):last-child) .product-card {
    width: 100% !important;
    flex: none !important;
  }

  /* 4. 左侧大卡片的图片区域给个适合手机的高度 */
  .product-card.featured {
    width: 100% !important;
    height: auto !important;
  }
}