/* ============================================================
   EEK site template · page content styles (namespace-isolated .sy-page)
   Generated from assets/css/style.css, every selector scoped inside .sy-page
   Brand variables: --sany-red / --sany-dark and so on
   ============================================================ */

:root{
  --sany-red:#ed6a18;
  --sany-dark:#1a1a1a;
  --sany-gray:#666;
  --sany-gray-l:#999;
  --sany-light:#f5f5f5;
  --sany-border:#e5e5e5;
  --max-width:1400px;
  }

.sy-page *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }

.sy-page{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;
  color:#333;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  }

.sy-page a{
  text-decoration:none;
  color:inherit;
  }

.sy-page ul,
.sy-page ol{
  list-style:none;
  }

.sy-page img{
  max-width:100%;
  /* With width/height attributes present the browser uses the attribute height as a
     CSS px height while max-width caps the width, which squashes landscape images
     and stretches their cards. Keep height:auto alongside the CLS size attributes. */
  height:auto;
  display:block;
  }

.sy-page .container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  }

.sy-page .topbar{
  background:var(--sany-dark);
  color:#fff;
  font-size:12px;
  height:34px;
  line-height:34px;
  }

.sy-page .topbar .container{
  display:flex;
  justify-content:space-between;
  }

.sy-page .topbar a{
  margin-left:18px;
  opacity:.8;
  }

.sy-page .topbar a:hover{
  opacity:1;
  color:var(--sany-red);
  }

.sy-page .header{
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  position:sticky;
  top:0;
  z-index:100;
  }

.sy-page .header .container{
  display:flex;
  align-items:center;
  height:72px;
  gap:40px;
  }

.sy-page .logo img{
  height:44px;
  }

.sy-page .logo-placeholder{
  font-size:26px;
  font-weight:800;
  color:var(--sany-red);
  letter-spacing:2px;
  line-height:1;
  }

.sy-page .logo-placeholder small{
  display:block;
  font-size:10px;
  color:var(--sany-gray);
  font-weight:400;
  letter-spacing:4px;
  margin-top:4px;
  }

.sy-page .nav{
  display:flex;
  flex:1;
  }

.sy-page .nav>li{
  position:relative;
  }

.sy-page .nav>li>a{
  display:block;
  padding:0 18px;
  font-size:16px;
  font-weight:600;
  height:72px;
  line-height:72px;
  transition:.2s;
  white-space:nowrap;
  }

.sy-page .nav>li>a:hover,
.sy-page .nav>li.active>a{
  color:var(--sany-red);
  border-bottom:3px solid var(--sany-red);
  }

.sy-page .dropdown{
  position:absolute;
  top:72px;
  left:0;
  min-width:180px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.1);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.25s;
  }

.sy-page .nav>li:hover .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  }

.sy-page .dropdown a{
  display:block;
  padding:12px 20px;
  font-size:14px;
  border-bottom:1px solid var(--sany-border);
  white-space:nowrap;
  }

.sy-page .dropdown a:hover{
  background:var(--sany-light);
  color:var(--sany-red);
  }

.sy-page .search-box{
  width:170px;
  height:36px;
  border:1px solid var(--sany-border);
  border-radius:18px;
  display:flex;
  align-items:center;
  padding:0 14px;
  }

.sy-page .search-box input{
  border:none;
  outline:none;
  flex:1;
  font-size:13px;
  width:100%;
  }

.sy-page .search-box::before{
  content:"🔍";
  margin-right:6px;
  font-size:13px;
  }

.sy-page .section{
  padding:70px 0;
  }

.sy-page .section-gray{
  background:var(--sany-light);
  }

.sy-page .section-head{
  text-align:center;
  margin-bottom:44px;
  }

.sy-page .section-head h2{
  font-size:34px;
  font-weight:800;
  letter-spacing:2px;
  }

.sy-page .section-head h2 em{
  font-style:normal;
  color:var(--sany-red);
  }

.sy-page .section-head p{
  margin-top:10px;
  color:var(--sany-gray);
  font-size:15px;
  letter-spacing:1px;
  }

.sy-page .section-head::after{
  content:"";
  display:block;
  width:48px;
  height:4px;
  background:var(--sany-red);
  margin:18px auto 0;
  }

.sy-page .section-head.left{
  text-align:left;
  }

.sy-page .section-head.left::after{
  margin-left:0;
  }

.sy-page .img-placeholder{
  background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 12px,#eaeaea 12px,#eaeaea 24px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#aaa;
  font-size:13px;
  text-align:center;
  padding:0 10px;
  height:190px;
  }

.sy-page .img-placeholder::before{
  content:"🖼";
  font-size:30px;
  margin-bottom:8px;
  opacity:.6;
  }

/* ---------- Real image container (replaces the diagonal-stripe placeholder block) ---------- */
.sy-page .img-ph{
  height:190px;
  overflow:hidden;
  background:#eceff3;
  }
.sy-page .img-ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s;
  }
.sy-page .product-card:hover .img-ph img,
.sy-page .case-card:hover .img-ph img{
  transform:scale(1.05);
  }
.sy-page .product-grid.cols-3 .img-ph{
  height:210px;
  }
.sy-page .case-card .img-ph{
  height:210px;
  }
.sy-page .case-row-item .img-ph{
  height:160px;
  }
.sy-page .equip-card .img-ph{
  height:190px;
  }
.sy-page .series-card .img-ph{
  height:220px;
  }
.sy-page .prod-card .img-ph{
  height:200px;
  }
.sy-page .detail-imgs .img-ph{
  height:340px;
  }
.sy-page .sol-card .img-ph{
  height:230px;
  }

.sy-page .btn{
  display:inline-block;
  padding:11px 32px;
  font-size:14px;
  border:1px solid transparent;
  transition:.2s;
  cursor:pointer;
  }

.sy-page .btn-solid{
  background:var(--sany-red);
  color:#fff;
  }

.sy-page .btn-solid:hover{
  filter:brightness(1.15);
  }

.sy-page .btn-outline{
  border-color:var(--sany-red);
  color:var(--sany-red);
  background:#fff;
  }

.sy-page .btn-outline:hover{
  background:var(--sany-red);
  color:#fff;
  }

.sy-page .btn-ghost{
  border-color:var(--sany-border);
  color:#333;
  background:#fff;
  }

.sy-page .btn-ghost:hover{
  border-color:var(--sany-red);
  color:var(--sany-red);
  }

.sy-page .btn-sm{
  padding:7px 18px;
  font-size:13px;
  }

.sy-page .link-more{
  color:var(--sany-red);
  font-size:14px;
  font-weight:600;
  }

.sy-page .banner{
  position:relative;
  height:520px;
  overflow:hidden;
  background:#111;
  }

.sy-page .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s;
  display:flex;
  align-items:center;
  }

.sy-page .slide.active{
  opacity:1;
  }

/* Dark scrim over the banner background image: darker on the left, lighter on the right, so the left-hand copy stays readable */
.sy-page .slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,10,16,.88) 0%,rgba(6,10,16,.70) 36%,rgba(6,10,16,.34) 64%,rgba(6,10,16,.10) 100%);
  }

.sy-page .slide-1{
  background:url("../images/banner/banner-imaging-camera.webp") center/cover no-repeat #141414;
  }

.sy-page .slide-2{
  background:url("../images/banner/banner-multi-industry-objects.webp") center/cover no-repeat #101216;
  }

.sy-page .slide-3{
  background:url("../images/banner/banner-automotive-interior.webp") center/cover no-repeat #12100e;
  }

.sy-page .slide-inner{
  position:relative;
  z-index:2;
  max-width:var(--max-width);
  margin:0 auto;
  width:100%;
  padding:0 60px;
  color:#fff;
  }

.sy-page .slide-tag{
  font-size:34px;
  font-weight:800;
  letter-spacing:4px;
  }

.sy-page .slide-title{
  font-size:22px;
  margin-top:10px;
  color:#ddd;
  }

.sy-page .slide-desc{
  margin-top:24px;
  font-size:15px;
  color:#bbb;
  line-height:1.9;
  }

.sy-page .slide-desc span{
  display:block;
  }

.sy-page .slide-btn{
  display:inline-block;
  margin-top:30px;
  padding:12px 40px;
  background:var(--sany-red);
  color:#fff;
  font-size:15px;
  }

.sy-page .slide-btn:hover{
  filter:brightness(1.15);
  }

.sy-page .banner-dots{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:5;
  }

.sy-page .banner-dots span{
  width:32px;
  height:4px;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:.3s;
  }

.sy-page .banner-dots span.active{
  background:var(--sany-red);
  }

.sy-page .page-hero{
  position:relative;
  padding:64px 0 56px;
  color:#fff;
  background:linear-gradient(120deg,#2c2c2c 0%,#121212 70%);
  overflow:hidden;
  }

.sy-page .page-hero::after{
  content:"";
  position:absolute;
  right:-60px;
  top:-40px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,106,24,.22),transparent 70%);
  }

.sy-page .page-hero .container{
  position:relative;
  z-index:2;
  }

.sy-page .page-hero h1{
  font-size:38px;
  font-weight:800;
  letter-spacing:2px;
  }

.sy-page .page-hero h1 small{
  display:block;
  font-size:16px;
  font-weight:400;
  color:#bbb;
  letter-spacing:1px;
  margin-top:10px;
  }

.sy-page .page-hero p{
  margin-top:18px;
  font-size:15px;
  color:#c8c8c8;
  line-height:1.9;
  max-width:900px;
  }

.sy-page .page-hero .hero-actions{
  margin-top:26px;
  display:flex;
  gap:14px;
  }

.sy-page .breadcrumb{
  font-size:13px;
  color:#999;
  margin-bottom:18px;
  }

.sy-page .breadcrumb a:hover{
  color:var(--sany-red);
  }

.sy-page .breadcrumb span{
  margin:0 8px;
  }

.sy-page .sub-nav{
  position:sticky;
  top:72px;
  z-index:60;
  background:#fff;
  border-bottom:1px solid var(--sany-border);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  }

.sy-page .sub-nav .container{
  display:flex;
  gap:8px;
  overflow-x:auto;
  }

.sy-page .sub-nav a{
  display:block;
  padding:16px 22px;
  font-size:15px;
  font-weight:600;
  color:#555;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  }

.sy-page .sub-nav a:hover,
.sy-page .sub-nav a.active{
  color:var(--sany-red);
  border-bottom-color:var(--sany-red);
  }

.sy-page .sub-nav .nav-inquiry{
  margin-left:auto;
  color:var(--sany-red);
  }

.sy-page .product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  }

.sy-page .product-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  }

.sy-page .product-grid.cols-3 .img-placeholder{
  height:210px;
  }

.sy-page .product-grid.cols-3 .product-card-body h3{
  font-size:19px;
  }

.sy-page .product-grid.cols-3 .product-card-body h3 small{
  font-size:13px;
  }

.sy-page .product-card{
  background:#fff;
  border:1px solid var(--sany-border);
  overflow:hidden;
  transition:.3s;
  display:flex;
  flex-direction:column;
  }

.sy-page .product-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transform:translateY(-6px);
  border-color:transparent;
  }

.sy-page .product-card-body{
  padding:18px;
  flex:1;
  display:flex;
  flex-direction:column;
  }

.sy-page .product-card-body h3{
  font-size:17px;
  font-weight:800;
  }

.sy-page .product-card-body h3 small{
  display:block;
  font-size:12px;
  color:var(--sany-red);
  font-weight:600;
  margin-bottom:6px;
  }

.sy-page .product-card-body p{
  margin-top:10px;
  color:var(--sany-gray);
  font-size:13px;
  line-height:1.75;
  }

.sy-page .product-card-body p span{
  display:block;
  }

.sy-page .product-card-body .link-more{
  margin-top:auto;
  padding-top:14px;
  }

.sy-page .sol-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:40px;
  }

.sy-page .sol-tabs button{
  padding:10px 24px;
  border:1px solid var(--sany-border);
  background:#fff;
  cursor:pointer;
  font-size:14px;
  transition:.2s;
  font-family:inherit;
  }

.sy-page .sol-tabs button.active{
  background:var(--sany-red);
  border-color:var(--sany-red);
  color:#fff;
  }

.sy-page .tab-panel{
  display:none;
  }

.sy-page .tab-panel.active{
  display:block;
  }

.sy-page .sol-panel{
  display:none;
  grid-template-columns:1.1fr minmax(0,1fr);
  gap:40px;
  align-items:center;
  }

.sy-page .sol-panel.active{
  display:grid;
  }

.sy-page .sol-detail h3{
  font-size:26px;
  font-weight:800;
  }

.sy-page .sol-detail p{
  margin-top:18px;
  color:var(--sany-gray);
  line-height:2;
  font-size:15px;
  }

.sy-page .sol-tags{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  }

.sy-page .sol-tags a{
  padding:8px 22px;
  border:1px solid var(--sany-red);
  color:var(--sany-red);
  font-size:14px;
  transition:.2s;
  }

.sy-page .sol-tags a:hover{
  background:var(--sany-red);
  color:#fff;
  }

.sy-page .case-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  }

.sy-page .case-card{
  background:#fff;
  border:1px solid var(--sany-border);
  display:block;
  transition:.3s;
  }

.sy-page .case-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transform:translateY(-4px);
  }

.sy-page .case-card .img-placeholder{
  height:210px;
  }

.sy-page .case-card-body{
  padding:20px;
  }

.sy-page .case-card-body h4{
  font-size:17px;
  font-weight:800;
  line-height:1.6;
  }

.sy-page .case-card-body p{
  margin-top:10px;
  color:var(--sany-gray);
  font-size:13px;
  line-height:1.8;
  }

.sy-page .case-card-body p span{
  display:block;
  }

.sy-page .case-card-body span.more{
  display:block;
  margin-top:14px;
  color:var(--sany-red);
  font-size:13px;
  font-weight:600;
  }

.sy-page .case-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:30px;
  }

.sy-page .case-head h2{
  font-size:30px;
  font-weight:800;
  }

.sy-page .case-head a{
  color:var(--sany-gray);
  font-size:14px;
  }

.sy-page .case-head a:hover{
  color:var(--sany-red);
  }

.sy-page .case-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  }

.sy-page .case-row-item{
  border:1px solid var(--sany-border);
  background:#fff;
  transition:.3s;
  }

.sy-page .case-row-item:hover{
  box-shadow:0 10px 26px rgba(0,0,0,.1);
  }

.sy-page .case-row-item .img-placeholder{
  height:160px;
  }

.sy-page .case-row-item .txt{
  padding:16px 18px;
  }

.sy-page .case-row-item .txt h4{
  font-size:15px;
  line-height:1.6;
  font-weight:700;
  }

.sy-page .case-row-item .txt p{
  margin-top:8px;
  font-size:13px;
  color:var(--sany-gray);
  line-height:1.7;
  }

.sy-page .case-row-item .txt span{
  display:inline-block;
  margin-top:12px;
  color:var(--sany-red);
  font-size:13px;
  }

.sy-page .news-list{
  border-top:1px solid var(--sany-border);
  }

.sy-page .news-item{
  display:flex;
  align-items:center;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--sany-border);
  transition:.2s;
  }

.sy-page .news-item:hover{
  background:#fafafa;
  padding-left:12px;
  }

.sy-page .news-item .date{
  color:var(--sany-gray-l);
  font-size:13px;
  white-space:nowrap;
  font-family:Arial,sans-serif;
  }

.sy-page .news-item h4{
  font-size:15px;
  font-weight:600;
  flex:1;
  }

.sy-page .news-item:hover h4{
  color:var(--sany-red);
  }

.sy-page .news-item .go{
  color:var(--sany-gray-l);
  font-size:13px;
  white-space:nowrap;
  }

.sy-page .service{
  background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),repeating-linear-gradient(45deg,#222,#222 2px,#1c1c1c 2px,#1c1c1c 4px);
  color:#fff;
  padding:80px 0;
  text-align:center;
  }

.sy-page .service-stats{
  display:flex;
  justify-content:center;
  gap:120px;
  }

.sy-page .stat-num{
  font-size:56px;
  font-weight:800;
  color:var(--sany-red);
  }

.sy-page .stat-num small{
  font-size:30px;
  }

.sy-page .stat-label{
  margin-top:8px;
  font-size:18px;
  letter-spacing:2px;
  }

.sy-page .service-desc{
  margin-top:36px;
  color:#bbb;
  font-size:15px;
  letter-spacing:2px;
  }

.sy-page .service-actions{
  margin-top:36px;
  display:flex;
  justify-content:center;
  gap:20px;
  }

.sy-page .service-actions a{
  padding:13px 44px;
  font-size:15px;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  transition:.2s;
  }

.sy-page .service-actions a.solid{
  background:var(--sany-red);
  border-color:var(--sany-red);
  }

.sy-page .service-actions a:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
  }

.sy-page .service-actions a.solid:hover{
  background:#fff;
  color:var(--sany-red);
  }

.sy-page .service-hotline{
  margin-top:26px;
  font-size:14px;
  color:#ddd;
  }

.sy-page .service-hotline b{
  color:var(--sany-red);
  font-size:16px;
  }

.sy-page .footer{
  background:#141414;
  color:#999;
  padding:56px 0 0;
  font-size:13px;
  }

.sy-page .footer-grid{
  display:grid;
  grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:30px;
  padding-bottom:44px;
  border-bottom:1px solid #2a2a2a;
  }

.sy-page .footer h5{
  color:#fff;
  font-size:15px;
  margin-bottom:18px;
  }

.sy-page .footer li{
  margin-bottom:10px;
  }

.sy-page .footer a:hover{
  color:var(--sany-red);
  }

.sy-page .footer-bottom{
  padding:20px 0;
  text-align:center;
  color:#666;
  font-size:12px;
  }

.sy-page .brand-slogan{
  text-align:center;
  padding:56px 0 10px;
  }

.sy-page .brand-slogan .big{
  font-size:52px;
  font-weight:800;
  color:var(--sany-dark);
  letter-spacing:4px;
  line-height:1.3;
  }

.sy-page .brand-slogan .big em{
  font-style:normal;
  color:var(--sany-red);
  }

.sy-page .brand-slogan .sub{
  margin-top:14px;
  font-size:17px;
  color:var(--sany-gray);
  letter-spacing:2px;
  }

.sy-page .intro-2col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:50px;
  align-items:center;
  }

.sy-page .intro-2col .txt h3{
  font-size:26px;
  font-weight:800;
  margin-bottom:20px;
  }

.sy-page .intro-2col .txt p{
  color:var(--sany-gray);
  font-size:15px;
  line-height:2.1;
  }

.sy-page .kv-row{
  display:flex;
  gap:60px;
  margin-top:28px;
  }

.sy-page .kv-row .kv .n{
  font-size:44px;
  font-weight:800;
  color:var(--sany-red);
  line-height:1;
  }

.sy-page .kv-row .kv .t{
  margin-top:8px;
  font-size:14px;
  color:var(--sany-gray);
  }

.sy-page .series-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.sy-page .series-card{
  position:relative;
  border:1px solid var(--sany-border);
  background:#fff;
  display:block;
  transition:.3s;
  overflow:hidden;
  }

.sy-page .series-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  }

.sy-page .series-card .img-placeholder{
  height:220px;
  }

.sy-page .series-card .name{
  padding:20px;
  font-size:19px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  }

.sy-page .series-card .name i{
  font-style:normal;
  color:var(--sany-red);
  font-size:16px;
  transition:.2s;
  }

.sy-page .series-card:hover .name i{
  transform:translateX(6px);
  }

.sy-page .link-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  }

.sy-page .link-cloud a{
  padding:10px 22px;
  background:#fff;
  border:1px solid var(--sany-border);
  font-size:14px;
  color:#555;
  transition:.2s;
  }

.sy-page .link-cloud a:hover{
  border-color:var(--sany-red);
  color:var(--sany-red);
  }

.sy-page .prod-card{
  border:1px solid var(--sany-border);
  background:#fff;
  display:flex;
  flex-direction:column;
  transition:.3s;
  }

.sy-page .prod-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transform:translateY(-6px);
  border-color:transparent;
  }

.sy-page .prod-card .img-placeholder{
  height:200px;
  }

.sy-page .prod-card .pc-body{
  padding:18px;
  flex:1;
  display:flex;
  flex-direction:column;
  }

.sy-page .prod-card .model{
  font-size:15px;
  font-weight:800;
  color:var(--sany-dark);
  word-break:break-all;
  }

.sy-page .prod-card .pname{
  margin-top:6px;
  font-size:13px;
  color:var(--sany-gray);
  }

.sy-page .prod-card .params{
  margin-top:14px;
  border-top:1px dashed var(--sany-border);
  padding-top:10px;
  }

.sy-page .spec{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:13px;
  color:var(--sany-gray);
  margin-bottom:7px;
  }

.sy-page .spec .k{
  white-space:nowrap;
  }

.sy-page .spec .d{
  flex:1;
  border-bottom:1px dotted #ddd;
  transform:translateY(-4px);
  min-width:10px;
  }

.sy-page .spec .v{
  /* Values can be long (e.g. "presence/absence / missing part / wrong part / assembly state"). This used to be hard-coded to nowrap,
     so as soon as the card got narrow (mobile, 3–4 column product grids at mid widths) the whole row pushed out of the card and overflowed the page horizontally.
     Allowing wrapping makes no visual difference on wide cards and only kicks in when the row no longer fits. */
  min-width:0;
  word-break:break-word;
  color:#333;
  font-weight:600;
  }

.sy-page .prod-card .pc-actions{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  gap:10px;
  }

.sy-page .prod-card .pc-actions .btn{
  flex:1;
  text-align:center;
  padding:9px 0;
  font-size:13px;
  }

.sy-page .pd-top{
  padding:40px 0 50px;
  background:linear-gradient(120deg,#2c2c2c 0%,#141414 70%);
  color:#fff;
  }

.sy-page .pd-top-grid{
  display:grid;
  grid-template-columns:1.15fr minmax(0,1fr);
  gap:50px;
  align-items:center;
  }

.sy-page .pd-gallery{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size:14px;
  flex-direction:column;
  gap:10px;
  }

.sy-page .pd-gallery::before{
  content:"🖼";
  font-size:44px;
  opacity:.5;
  }

/* Product main image fills the box (the placeholder icon is hidden once a real image is wired up) */
.sy-page .pd-gallery:has(img)::before{
  content:none;
  }
.sy-page .pd-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  }

.sy-page .pd-info .code{
  font-size:20px;
  letter-spacing:2px;
  color:#bbb;
  font-family:Arial,sans-serif;
  }

.sy-page .pd-info h1{
  font-size:36px;
  font-weight:800;
  margin-top:10px;
  letter-spacing:2px;
  }

.sy-page .pd-info .key-params{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  }

.sy-page .pd-info .key-params .kp{
  border:1px solid rgba(255,255,255,.2);
  padding:10px 20px;
  font-size:14px;
  color:#ddd;
  }

.sy-page .pd-info .key-params .kp b{
  color:#fff;
  }

.sy-page .usecase{
  margin-top:28px;
  }

.sy-page .usecase .lbl{
  font-size:14px;
  color:#bbb;
  margin-bottom:14px;
  }

.sy-page .usecase .list{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  }

.sy-page .usecase .list a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#ccc;
  width:74px;
  text-align:center;
  }

.sy-page .usecase .list a i{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-style:normal;
  }

.sy-page .usecase .list a:hover{
  color:#fff;
  }

.sy-page .usecase .list a:hover i{
  background:var(--sany-red);
  }

.sy-page .pd-info .pd-actions{
  margin-top:30px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  }

.sy-page .pd-info .pd-actions .btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.4);
  }

.sy-page .pd-info .pd-actions .btn-ghost:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
  }

.sy-page .param-wrap{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;
  }

.sy-page .param-group{
  border-bottom:1px solid var(--sany-border);
  padding:18px 0;
  }

.sy-page .param-group>h4{
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  }

.sy-page .param-group>h4::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--sany-red);
  border-radius:50%;
  flex:none;
  }

.sy-page .param-group>h4 .arrow{
  margin-left:auto;
  color:var(--sany-gray-l);
  font-size:13px;
  transition:.3s;
  }

.sy-page .param-group.open>h4 .arrow{
  transform:rotate(180deg);
  }

.sy-page .param-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  }

.sy-page .param-group.open .param-body{
  max-height:2000px;
  }

.sy-page .param-body .inner{
  padding-top:14px;
  }

.sy-page .param-body .spec{
  font-size:14px;
  margin-bottom:12px;
  }

.sy-page .feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  }

.sy-page .feature-list .fe{
  border:1px solid var(--sany-border);
  border-left:4px solid var(--sany-red);
  padding:20px 22px;
  background:#fafafa;
  }

.sy-page .feature-list .fe h5{
  font-size:15px;
  font-weight:700;
  margin-bottom:8px;
  }

.sy-page .feature-list .fe p{
  font-size:13px;
  color:var(--sany-gray);
  line-height:1.9;
  }

.sy-page .detail-imgs{
  display:flex;
  flex-direction:column;
  gap:20px;
  }

.sy-page .detail-imgs .img-placeholder{
  height:340px;
  }

.sy-page .filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:36px;
  justify-content:center;
  }

.sy-page .filter-tabs button{
  padding:9px 22px;
  border:1px solid var(--sany-border);
  background:#fff;
  font-size:14px;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  }

.sy-page .filter-tabs button.active,
.sy-page .filter-tabs button:hover{
  background:var(--sany-red);
  border-color:var(--sany-red);
  color:#fff;
  }

.sy-page .sol-list{
  display:flex;
  flex-direction:column;
  gap:26px;
  }

.sy-page .sol-card{
  display:grid;
  grid-template-columns:380px minmax(0,1fr);
  gap:34px;
  border:1px solid var(--sany-border);
  background:#fff;
  padding:26px;
  transition:.3s;
  }

.sy-page .sol-card:hover{
  box-shadow:0 14px 34px rgba(0,0,0,.1);
  }

.sy-page .sol-card .img-placeholder{
  height:230px;
  }

.sy-page .sol-card .sc-body h3{
  font-size:23px;
  font-weight:800;
  }

.sy-page .sol-card .sc-body .cat{
  display:inline-block;
  margin-bottom:12px;
  font-size:12px;
  color:var(--sany-red);
  border:1px solid var(--sany-red);
  padding:2px 10px;
  letter-spacing:1px;
  }

.sy-page .sol-card .sc-body p{
  margin-top:14px;
  color:var(--sany-gray);
  font-size:14px;
  line-height:2;
  }

.sy-page .sol-card .sc-tags{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  }

.sy-page .sol-card .sc-tags a{
  font-size:12px;
  padding:6px 16px;
  background:var(--sany-light);
  color:#555;
  transition:.2s;
  }

.sy-page .sol-card .sc-tags a:hover{
  background:var(--sany-red);
  color:#fff;
  }

.sy-page .sol-card .sc-actions{
  margin-top:22px;
  display:flex;
  gap:12px;
  }

.sy-page .adv-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  }

.sy-page .adv-card{
  border:1px solid var(--sany-border);
  padding:26px;
  background:#fff;
  border-top:3px solid var(--sany-red);
  transition:.3s;
  }

.sy-page .adv-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.09);
  transform:translateY(-4px);
  }

.sy-page .adv-card h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
  }

.sy-page .adv-card p{
  font-size:14px;
  color:var(--sany-gray);
  line-height:2;
  }

.sy-page .equip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  }

.sy-page .equip-card{
  border:1px solid var(--sany-border);
  background:#fff;
  transition:.3s;
  }

.sy-page .equip-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transform:translateY(-6px);
  }

.sy-page .equip-card .img-placeholder{
  height:190px;
  }

.sy-page .equip-card .ec-body{
  padding:18px;
  }

.sy-page .equip-card .ec-body .model{
  font-size:15px;
  font-weight:800;
  }

.sy-page .equip-card .ec-body .pname{
  font-size:13px;
  color:var(--sany-gray);
  margin-top:5px;
  }

.sy-page .equip-card .ec-body .params{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--sany-border);
  }

.sy-page .equip-card .ec-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  }

.sy-page .equip-card .ec-actions .btn{
  flex:1;
  text-align:center;
  padding:8px 0;
  font-size:13px;
  }

.sy-page .steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  counter-reset:step;
  }

.sy-page .step{
  position:relative;
  border:1px solid var(--sany-border);
  background:#fff;
  padding:26px 22px;
  }

.sy-page .step::before{
  counter-increment:step;
  content:"0" counter(step);
  font-size:34px;
  font-weight:800;
  color:#eee;
  font-family:Arial,sans-serif;
  position:absolute;
  top:14px;
  right:18px;
  }

.sy-page .step h4{
  font-size:16px;
  font-weight:700;
  position:relative;
  }

.sy-page .step p{
  margin-top:10px;
  font-size:13px;
  color:var(--sany-gray);
  line-height:1.9;
  position:relative;
  }

.sy-page .pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:46px;
  }

.sy-page .pagination a,
.sy-page .pagination span{
  min-width:38px;
  height:38px;
  line-height:38px;
  text-align:center;
  border:1px solid var(--sany-border);
  font-size:14px;
  color:#555;
  padding:0 10px;
  transition:.2s;
  }

.sy-page .pagination a:hover,
.sy-page .pagination a.active{
  background:var(--sany-red);
  border-color:var(--sany-red);
  color:#fff;
  }
@media (max-width:1280px){
  .sy-page .product-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  }

.sy-page .equip-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:1024px){
  .sy-page .slide::before{
  background:linear-gradient(90deg,rgba(6,10,16,.93) 0%,rgba(6,10,16,.86) 58%,rgba(6,10,16,.62) 100%);
  }

.sy-page .product-grid,
.sy-page .product-grid.cols-3,
.sy-page .case-grid,
.sy-page .series-grid,
.sy-page .case-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
  }

.sy-page .sol-panel{
  grid-template-columns:minmax(0,1fr);
  }

.sy-page .sol-card{
  grid-template-columns:minmax(0,1fr);
  }

.sy-page .intro-2col,
.sy-page .pd-top-grid,
.sy-page .param-wrap,
.sy-page .adv-grid,
.sy-page .feature-list{
  grid-template-columns:minmax(0,1fr);
  }

.sy-page .steps{
  grid-template-columns:repeat(2,minmax(0,1fr));
  }

.sy-page .footer-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

.sy-page .nav{
  display:none;
  }

.sy-page .banner{
  height:400px;
  }

.sy-page .brand-slogan .big{
  font-size:34px;
  }

.sy-page .pd-gallery{
  height:280px;
  }
}
@media (max-width:640px){
  .sy-page .product-grid,
.sy-page .product-grid.cols-3,
.sy-page .case-grid,
.sy-page .series-grid,
.sy-page .case-row,
.sy-page .equip-grid,
.sy-page .steps{
  grid-template-columns:minmax(0,1fr);
  }

.sy-page .service-stats{
  flex-direction:column;
  gap:30px;
  }

.sy-page .kv-row{
  flex-direction:column;
  gap:24px;
  }

.sy-page .page-hero h1{
  font-size:26px;
  }
}

/* ============================================================
   Explore EEK (layout is a 1:1 reference to the Siemens site ExploreContainer)
   —— Dark background + title band + two large image cards on the left + a vertical pair on the right (solid card + image card)
   —— Separate namespace .sy-explore, located in the footer block of base.html
   ============================================================ */
.sy-explore{
  --sy-explore-bg:#1a1a1a;
  --sy-explore-accent:#ed6a18;
  --sy-explore-tag:rgba(255,255,255,.45);
  background:var(--sy-explore-bg);
  color:#fff;
  padding:84px 0 88px;
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;   /* The right-hand bleed decoration .sy-explore-deco overflows via a negative margin and must be clipped, or the page gets a horizontal scrollbar */
  }
.sy-explore *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
.sy-explore a{
  text-decoration:none;
  color:inherit;
  }
.sy-explore-container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  }

/* ---------------- Title band ---------------- */
.sy-explore-title-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  margin-bottom:64px;
  }
.sy-explore-tagline{
  font-size:16px;
  line-height:24px;
  font-weight:900;
  color:var(--sy-explore-tag);
  margin-bottom:8px;
  }
.sy-explore-title{
  max-width:640px;
  font-size:36px;
  line-height:48px;
  font-weight:400;
  }
.sy-explore-deco{
  flex:none;
  width:420px;
  height:340px;
  margin-right:-110px;
  margin-top:-64px;
  border:1px dashed rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  letter-spacing:1px;
  color:rgba(255,255,255,.25);
  }

/* ---------------- Content area: three columns ---------------- */
.sy-explore-content{
  display:flex;
  gap:32px;
  min-height:680px;
  }
/* Carousel dots are hidden by default (wide screens are not a carousel) */
.sy-explore-dots{display:none;}
.sy-explore-card{
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  }
.sy-explore-card--image{
  min-height:500px;
  }
.sy-explore-media{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:repeating-linear-gradient(135deg,#2c2c2c 0 18px,#242424 18px 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease-in-out;
  }
.sy-explore-media span{
  font-size:13px;
  letter-spacing:1px;
  color:rgba(255,255,255,.26);
  }
/* Once real images are in place: fill the card, keep the aspect ratio */
.sy-explore-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  }
.sy-tool-pop img[src=""]{display:none;}
.sy-explore-card:hover .sy-explore-media{
  transform:scale(1.08);
  }
.sy-explore-gradient{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,rgba(115,115,115,0) 28.21%,rgba(0,0,0,.72));
  transition:background .3s;
  }
.sy-explore-card:hover .sy-explore-gradient{
  background:linear-gradient(180deg,rgba(115,115,115,0) 28.21%,rgba(120,0,10,.78));
  }
.sy-explore-body{
  position:relative;
  padding:24px;
  }
.sy-explore-tagline-sm{
  font-weight:900;
  margin-bottom:8px;
  }
.sy-explore-card h3{
  font-size:24px;
  line-height:32px;
  font-weight:400;
  }
.sy-explore-info{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:14px;
  }
.sy-explore-info i{
  transition:transform .3s ease;
  }
.sy-explore-card:hover .sy-explore-info i{
  transform:translateX(8px);
  }

/* ---------------- Two stacked cards in the right column ---------------- */
.sy-explore-stacked{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:32px;
  }
.sy-explore-stacked .sy-explore-card{
  flex:1 1 0;
  min-height:0;
  }
.sy-explore-stacked .sy-explore-card h3{
  font-size:24px;
  line-height:32px;
  }

/* ---------------- Solid-color card (the original is a bright brand-gradient card) ---------------- */
.sy-explore-card--solid{
  background:linear-gradient(67deg,#ff3b30,var(--sy-explore-accent));
  color:#fff;
  justify-content:space-between;
  }
.sy-explore-card--solid:hover{
  background:linear-gradient(67deg,#ff5a4d,#b9000e);
  }
.sy-explore-solid-media{
  width:56%;
  height:104px;
  margin:24px 24px 0;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:1px;
  color:rgba(255,255,255,.75);
  overflow:hidden;
  }
/* Once real images are in place: fill and keep the aspect ratio */
.sy-explore-solid-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  }
.sy-explore-solid-body{
  padding:16px 24px 24px;
  }
.sy-explore-card--solid:hover .sy-explore-info i{
  transform:translateX(8px);
  }

/* ---------------- Responsive (breakpoints match the original: 84rem / 64rem / 48rem) ---------------- */
@media (max-width:1344px){
  .sy-explore-deco{
    margin-top:0;
    }
  }
@media (max-width:1024px){
  .sy-explore{
    padding:64px 0 68px;
    }
  .sy-explore-title-wrapper{
    gap:24px;
    margin-bottom:44px;
    }
  .sy-explore-deco{
    width:260px;
    height:196px;
    margin-right:-60px;
    }
  .sy-explore-title{
    max-width:480px;
    font-size:30px;
    line-height:42px;
    }
  .sy-explore-content{
    gap:24px;
    min-height:500px;
    }
  .sy-explore-stacked{
    gap:24px;
    }
  .sy-explore-card h3{
    font-size:20px;
    line-height:28px;
    }
  }
@media (max-width:768px){
  .sy-explore{
    padding:52px 0 56px;
    }
  .sy-explore-title-wrapper{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:28px;
    }
  .sy-explore-deco{
    display:none;
    }
  .sy-explore-title{
    max-width:none;
    font-size:24px;
    line-height:34px;
    }
  /* The original is a horizontal carousel on mobile: pure CSS horizontal scroll snapping reproduces the same effect */
  .sy-explore-content{
    min-height:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    }
  .sy-explore-stacked{
    display:contents;
    }
  .sy-explore-content>.sy-explore-card,
  .sy-explore-stacked>.sy-explore-card{
    /* One card per screen: at 80% width a sliver of the next card constantly showed on the right and the card text was cut off by the viewport edge, which looked unfinished.
       At full width nothing shows through, and "there is more" is conveyed by the dot indicator underneath. */
    flex:0 0 100%;
    min-height:440px;
    scroll-snap-align:start;
    }
  /* Carousel dots: shown only in the narrow-screen carousel mode (the markup is generated by main.js) */
  .sy-explore-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:20px;
    }
  .sy-explore-dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    cursor:pointer;
    transition:width .25s,background .25s;
    }
  .sy-explore-dots span.active{
    width:22px;
    border-radius:4px;
    background:var(--sy-explore-accent);
    }
  }

/* ============================================================
   Technology · Upgrading reality (layout is a 1:1 reference to the Siemens TabContainer + Bento Layout)
   Every value comes from the original CSS:
     .de-tabs__layout--vertical .de-tabs__tabs-list → flex-basis:25%; max-width:25%; padding:0 16px
     .de-tabs__tab                                  → font-size:h4; font-weight:900; padding:12px 32px
     .de-tabs__panel                                → padding:0 16px
     .bento-layout__content--left-large-right-stacked → 3fr 2fr; repeat(2,1fr); gap:var(--spacer)=32px
     .bento-layout__card--0                         → grid-row:1/3; only the large card shows an image; card-body padding-left:0
     .bento-layout .imageWrapper                    → display:none (the two right-column cards are text only on desktop)
     .bento-layout .card-body h3                    → font-weight:400
     .bento-layout__card .card .card-body           → padding:16px(p-3)
     .de-banner--box.de-banner--dark-blue           → content padding:0; image max 320x192; text area padding:32px 64px
   ============================================================ */
.sy-tech{
  background:var(--sany-light);
  border-top:1px solid var(--sany-border);
  }
.sy-kicker{
  display:block;
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  color:var(--sany-red);
  margin:0 0 8px;
  }
.sy-tech-head{
  max-width:933px;
  margin-bottom:48px;
  }
.sy-tech-head h2{
  font-size:36px;
  font-weight:800;
  letter-spacing:2px;
  line-height:1.3;
  }
.sy-tech-head h2 em{
  font-style:normal;
  color:var(--sany-red);
  }
.sy-tech-head p{
  margin-top:16px;
  font-size:16px;
  line-height:1.9;
  color:var(--sany-gray);
  }

/* ---------------- Left tab column 25% + right panel (original gutter 16px) ---------------- */
.sy-tech-body{
  display:flex;
  align-items:flex-start;
  }
.sy-tech-tabs{
  flex:0 0 25%;
  max-width:25%;
  display:flex;
  flex-direction:column;
  border-left:2px solid #ccccd4;
  padding:0 16px;
  position:sticky;
  top:96px;
  }
.sy-tech-tabs .tab-btn{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:none;
  border-left:2px solid transparent;
  margin-left:-2px;
  padding:12px 32px;
  text-align:left;
  font-family:inherit;
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
  color:#333;
  cursor:pointer;
  transition:.2s;
  }
.sy-tech-tabs .tab-btn:hover{
  color:var(--sany-red);
  background:#efefef;
  }
.sy-tech-tabs .tab-btn.active{
  color:var(--sany-red);
  border-left-color:var(--sany-red);
  background:#fff;
  }
.sy-tech-panels{
  flex:1;
  min-width:0;
  padding:0 16px;
  }
.sy-tech-panels .tab-panel{
  display:none;
  }
.sy-tech-panels .tab-panel.active{
  display:block;
  }

/* ---------------- Bento grid (original: 3fr 2fr, large card spans two rows, two cards in the right column) ---------------- */
.sy-bento{
  display:grid;
  grid-template-columns:3fr 2fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:32px;
  margin:32px 0;
  }
.sy-bento-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:0;
  background:#fff;
  color:inherit;
  text-decoration:none;
  }
.sy-bento-card--large{
  grid-row:1 / 3;
  grid-column:1;
  }
.sy-bento-card--dark{
  grid-row:1;
  grid-column:2;
  background:#1a1a1a;
  color:#fff;
  }
.sy-bento-card--light{
  grid-row:2;
  grid-column:2;
  background:#f7f3ee;
  }
.sy-bento-media{
  width:100%;
  aspect-ratio:3 / 2;
  flex:none;
  background:repeating-linear-gradient(135deg,#ececec 0 18px,#e2e2e2 18px 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  letter-spacing:1px;
  color:#9a9a9a;
  }
/* Original: .bento-layout .imageWrapper{display:none} —— only the large card shows an image on desktop */
.sy-bento-card--dark .sy-bento-media,
.sy-bento-card--light .sy-bento-media{
  display:none;
  }
.sy-bento-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:16px;
  }
.sy-bento-card--large .sy-bento-body{
  padding-left:0;
  }
.sy-bento-body h3{
  font-size:24px;
  line-height:1.4;
  font-weight:400;
  margin:0;
  padding-bottom:24px;
  transition:color .25s;
  }
.sy-bento-body p{
  flex:1;
  margin:0;
  padding-bottom:16px;
  font-size:14px;
  line-height:1.9;
  color:var(--sany-gray);
  }
.sy-bento-card--dark .sy-bento-body p{
  color:rgba(255,255,255,.72);
  }
.sy-bento-card--dark .sy-kicker{
  color:#ff6a5e;
  }
.sy-bento-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  font-size:14px;
  font-weight:600;
  color:var(--sany-red);
  }
.sy-bento-card--dark .sy-bento-link{
  color:#ff6a5e;
  }
.sy-bento-link i{
  transition:transform .3s ease;
  }
.sy-bento-card:hover h3{
  color:var(--sany-red);
  }
.sy-bento-card--dark:hover h3{
  color:#fff;
  }
.sy-bento-card:hover .sy-bento-link i{
  transform:translateX(6px);
  }

/* ---------------- CTA banner (original de-banner de-banner--box de-banner--dark-blue) ---------------- */
.sy-cta{
  margin-top:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#141414;
  color:#fff;
  }
.sy-cta-media{
  flex:0 0 320px;
  height:192px;
  background:repeating-linear-gradient(135deg,#242424 0 18px,#1d1d1d 18px 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  letter-spacing:1px;
  color:rgba(255,255,255,.35);
  }
.sy-cta-text{
  flex:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:64px;
  padding:32px 64px;
  }
.sy-cta-text h3{
  font-size:24px;
  line-height:1.4;
  font-weight:700;
  margin:0 0 8px;
  }
.sy-cta-btn{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  border:2px solid #fff;
  color:#fff;
  font-size:14px;
  transition:.25s;
  }
.sy-cta-btn:hover{
  background:var(--sany-red);
  border-color:var(--sany-red);
  }

/* ---------------- Responsive (original breakpoints 75rem / 48rem / 33.9rem) ---------------- */
@media (max-width:1200px){
  .sy-cta{
    flex-direction:column;
    align-items:stretch;
    }
  .sy-cta-media{
    flex:none;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    }
  .sy-cta-text{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:24px;
    }
  }
@media (max-width:1024px){
  .sy-tech-head{
    margin-bottom:32px;
    }
  .sy-tech-head h2{
    font-size:28px;
    }
  .sy-tech-body{
    flex-direction:column;
    gap:24px;
    }
  .sy-tech-tabs{
    position:static;
    flex:none;
    max-width:none;
    padding:0;
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    border-left:none;
    border-bottom:1px solid var(--sany-border);
    }
  .sy-tech-tabs .tab-btn{
    margin-left:0;
    border-left:none;
    border-bottom:2px solid transparent;
    padding:12px 16px;
    font-size:16px;
    }
  .sy-tech-tabs .tab-btn.active{
    background:none;
    border-bottom-color:var(--sany-red);
    }
  .sy-tech-panels{
    padding:0;
    }
  .sy-bento{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    gap:24px;
    margin:24px 0;
    }
  .sy-bento-card--large,
  .sy-bento-card--dark,
  .sy-bento-card--light{
    grid-row:auto;
    grid-column:auto;
    }
  /* In the original the right-column images reappear at ≤33.9rem */
  .sy-bento-card--dark .sy-bento-media,
  .sy-bento-card--light .sy-bento-media{
    display:flex;
    }
  .sy-bento-card--large .sy-bento-body{
    padding-left:16px;
    }
  .sy-bento-body h3{
    font-size:20px;
    padding-bottom:16px;
    }
  .sy-cta-text h3{
    font-size:20px;
    }
  }

/* Home page semantic H1: visually hidden, provided only to search engines and screen readers, no effect on the design */
.sy-page .sy-h1-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
  }


/* ---------- Mobile: product specification rows (label + dotted leader + value) are allowed to wrap ----------
   Values can be long text such as "presence/absence / missing part / wrong part / assembly state",
   and the original .spec .v{white-space:nowrap} pushed the whole row out of the card,
   overflowing the page horizontally on mobile (measured 35px overflow on /product/1). */
@media (max-width:640px){
  .sy-page .spec{align-items:flex-start;}
  .sy-page .spec .v{white-space:normal;min-width:0;word-break:break-word;}
}
/* English seam spacing is handled in the markup (a real space is written at every
   inline-element boundary), not here: generated content is invisible to search engines
   and left Googlebot reading headings like "CommonQuestion". */

/* FAQ accordion (moved here from topic.css: the home page does not load
   topic.css but does use this block) */
.sy-page .tp-faq{ margin:26px 0 0; }
.sy-page .tp-faq details{
  border:1px solid #ececec; border-radius:8px; margin-bottom:12px; background:#fff;
}
.sy-page .tp-faq summary{
  cursor:pointer; padding:16px 48px 16px 18px; font-size:16px; font-weight:600;
  color:#333; position:relative; list-style:none;
}
.sy-page .tp-faq summary::-webkit-details-marker{ display:none; }
.sy-page .tp-faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:20px; color:var(--sany-red,#ed6a18);
}
.sy-page .tp-faq details[open] summary::after{ content:"\2212"; }
.sy-page .tp-faq details[open] summary{ border-bottom:1px solid #f2f2f2; }
.sy-page .tp-faq .tp-a{
  padding:16px 18px; font-size:15px; line-height:1.85; color:#666;
}
.sy-page .tp-faq .tp-a p{ margin:0 0 10px; }
.sy-page .tp-faq .tp-a p:last-child{ margin-bottom:0; }

/* ==================== 探索亿恩凯 · 桌面端轮播（2026-09-24） ====================
   原先只有 ≤768px 是滑动轮播、桌面是静态两列；现统一成横向轮播：
   桌面 3 张 / ≤1024 两张 / ≤768 一张，容器横向滚动 + CSS 吸附对齐。
   圆点、箭头、自动播放由 main.js 模块 13 驱动。 */
.sy-explore-controls{ display:flex; gap:12px; flex:none; }
.sy-explore-arrow{
  width:52px; height:52px; border:1px solid rgba(255,255,255,.26); background:transparent;
  color:#fff; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s,border-color .25s;
  }
.sy-explore-arrow:hover{ background:var(--sy-explore-accent); border-color:var(--sy-explore-accent); }
.sy-explore-arrow:focus-visible{ outline:2px solid var(--sy-explore-accent); outline-offset:2px; }
.sy-explore-content{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  min-height:0; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
  }
.sy-explore-content::-webkit-scrollbar{ display:none; }
.sy-explore-content > .sy-explore-card{
  flex:0 0 calc((100% - 64px) / 3); min-height:0; height:440px; scroll-snap-align:start;
  }
.sy-explore-content > .sy-explore-card h3{ font-size:22px; line-height:30px; }
.sy-explore-dots{ display:flex; justify-content:center; gap:10px; margin-top:30px; }
.sy-explore-dots span{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.26);
  cursor:pointer; transition:background .25s,width .25s;
  }
.sy-explore-dots span.active{ background:var(--sy-explore-accent); width:26px; border-radius:5px; }
@media (max-width:1024px){
  .sy-explore-content > .sy-explore-card{ flex:0 0 calc((100% - 32px) / 2); height:420px; }
  .sy-explore-arrow{ width:46px; height:46px; font-size:20px; }
  }
@media (max-width:768px){
  .sy-explore-content > .sy-explore-card{ flex:0 0 100%; height:380px; }
  .sy-explore-controls{ display:none; }
  .sy-explore-dots{ margin-top:22px; }
  }
@media (prefers-reduced-motion:reduce){
  .sy-explore-content{ scroll-behavior:auto; }
  }