/* Shared editable styles. Load css/utilities.css before this file. */
/* ===== Shared component primitives ===== */
.jj-carousel-viewport
{
  overflow:visible;
  clip-path:none
}
.jj-carousel-track
{
  display:flex;
  align-items:stretch
}
.jj-carousel-slide
{
  display:flex;
  flex:0 0 33.3333%;
  flex-direction:column;
  min-width:0;
  padding:14px
}
.jj-carousel-nav
{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:36px
}
.jj-carousel-arrow
{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:9999px;
  border:1px solid rgba(13,18,41,.15);
  background:#fff;
  color:#0d1229;
  cursor:pointer;
  transition:all .3s
}
.jj-carousel-arrow:hover
{
  border-color:#ff9000;
  color:#ff9000;
  transform:translateY(-2px)
}
#reviews.content-reliability-section,
#reviews .jj-carousel,
#reviews .jj-carousel-viewport
{
  overflow:visible
}
#reviews .jj-carousel-slide picture
{
  aspect-ratio:4 / 3
}
#reviews .jj-carousel-slide picture img
{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.jj-blog-img
{
  width:100%;
  aspect-ratio:3 / 2;
}
.jj-blog-img img
{
  transition:transform .7s cubic-bezier(.22,1,.36,1)
}
.group:hover .jj-blog-img img
{
  transform:scale(1.06)
}
.jj-file
{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px dashed rgba(13,18,41,.25);
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  transition:border-color .3s;
  background:rgba(248,250,252,.5)
}
.jj-file:hover
{
  border-color:#ff9000
}
.jj-file-btn
{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  border-radius:9999px;
  background:#0d1229;
  color:#fff;
  padding:8px 18px;
  font-size:13px;
  font-weight:600
}
.jj-file-name
{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:#94a3b8
}
.jj-upload input.jj-file,.jj-file-input
{
  display:none
}
.jj-captcha
{
  width:130px;
  height:48px;
  border-radius:12px;
  border:1px solid rgba(13,18,41,.15);
  object-fit:cover;
  cursor:pointer;
  flex-shrink:0
}
.jj-hero
{
  position:relative;
  overflow:hidden;
  background:#0d1229;
  padding:190px 0 100px;
  color:#fff
}
.jj-hero::after
{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.5;
  pointer-events:none
}
.jj-hero-bg
{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none
}
.jj-hero-bg.is-active
{
  opacity:1
}
.jj-hero-bg-a
{
  background:#0d1229 url("../images/jeijiabanner.jpg") center/cover no-repeat
;background:#0d1229 image-set(url("../images/jeijiabanner.webp") type("image/webp"),url("../images/jeijiabanner.jpg") type("image/jpeg")) center/cover no-repeat
}
.jj-hero-bg-b
{
  background:#0d1229 url("../images/jeijiabanner.jpg") center/cover no-repeat
;background:#0d1229 image-set(url("../images/jeijiabanner.webp") type("image/webp"),url("../images/jeijiabanner.jpg") type("image/jpeg")) center/cover no-repeat
}
body[data-page="index"] .jj-hero-bg-a
{
  background-image:url("../images/jeijiabanner.jpg")
;background-image:image-set(url("../images/jeijiabanner.webp") type("image/webp"),url("../images/jeijiabanner.jpg") type("image/jpeg"))
}
body[data-page="index"] .jj-hero-bg-b
{
  background-image:url("../images/jeijiabanner.jpg")
;background-image:image-set(url("../images/jeijiabanner.webp") type("image/webp"),url("../images/jeijiabanner.jpg") type("image/jpeg"))
}
.jj-hero-inner
{
  position:relative;
  z-index:2;
  max-width:1520px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  gap:56px;
  align-items:center
}
.jj-quote-card
{
  flex:0 0 460px;
  max-width:460px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  color:#1a1a1a;
  overflow:hidden
}
.jj-quote-tabs
{
  display:flex;
  background:#2a335e
}
.jj-tab
{
  flex:1;
  padding:13px 8px;
  background:transparent;
  border:0;
  color:#eafff3;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,color .2s
}
.jj-tab:hover
{
  background:rgba(255,255,255,.12)
}
.jj-tab.is-active
{
  background:#fff;
  color:#2a335e
}
.jj-tab.is-active:hover
{
  background:#fff
}
.jj-quote-panel
{
  display:none;
  padding:22px 22px 16px
}
.jj-quote-panel.is-active
{
  display:block
}
.jj-frow
{
  display:flex;
  gap:12px;
  margin-bottom:13px
}
.jj-field
{
  flex:1;
  min-width:0
}
.jj-field label
{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#333;
  margin-bottom:6px
}
.jj-field input,.jj-field select
{
  width:100%;
  height:38px;
  border:1px solid #d9d9d9;
  border-radius:3px;
  padding:0 10px;
  font-family:inherit;
  font-size:13px;
  color:#333;
  background:#fff;
  outline:none;
  transition:border-color .2s
}
.jj-field input:focus,.jj-field select:focus
{
  border-color:#00a651
}
.jj-field select
{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px
}
.jj-dims
{
  display:flex;
  align-items:center;
  gap:6px
}
.jj-dims input
{
  min-width:0
}
.jj-dims span
{
  color:#999;
  flex:0 0 auto
}
.jj-actions
{
  display:flex;
  gap:12px;
  margin-top:16px
}
.jj-upload
{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  border:1px dashed #2a335e;
  border-radius:3px;
  background:#eef0f6;
  color:#2a335e;
  font-family:inherit;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background .2s;
  min-width:0
}
.jj-upload:hover
{
  background:#e2e6f0
}
.jj-upload .jj-upload-text
{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.jj-quote-btn
{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  border:0;
  border-radius:3px;
  background:#ff9000;
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s,transform .15s
}
.jj-quote-btn:hover
{
  background:#f07f00
}
.jj-quote-btn:active
{
  transform:scale(.97)
}
.jj-note
{
  margin:10px 0 0;
  text-align:right;
  font-size:12px;
  color:#999
}
.jj-hero-promo
{
  flex:1;
  min-width:0;
  position:relative;
  min-height:320px
}
.jj-promo-slide
{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
  pointer-events:none
}
.jj-promo-slide.is-active
{
  opacity:1;
  transform:none;
  pointer-events:auto
}
.jj-promo-slide h1,.jj-promo-slide .jj-promo-title
{
  font-family:"Space Grotesk","Noto Sans SC",sans-serif;
  font-size:clamp(30px,3.6vw,52px);
  font-weight:700;
  line-height:1.14;
  margin:0 0 24px;
  text-transform:uppercase;
  letter-spacing:.01em
}
.jj-promo-slide h1 em,.jj-promo-slide .jj-promo-title em
{
  font-style:normal;
  color:#ff9000
}
.jj-promo-slide ul
{
  list-style:none;
  margin:0;
  padding:0
}
.jj-promo-slide li
{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  font-size:15px;
  color:rgba(255,255,255,.85)
}
.jj-promo-slide li::before
{
  content:"";
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ff9000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat
}
.jj-dots
{
  position:absolute;
  left:0;
  bottom:0;
  display:flex;
  gap:10px
}
.jj-dot
{
  width:10px;
  height:10px;
  border-radius:5px;
  border:0;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  padding:0;
  transition:width .3s,background .3s
}
.jj-dot.is-active
{
  width:26px;
  background:#fff
}
@media (max-width:1024px)
{
  .jj-hero
  {
    padding:160px 0 80px
  }
  .jj-hero-inner
  {
    flex-direction:column;
    gap:44px;
    align-items:stretch
  }
  .jj-quote-card
  {
    flex:0 0 auto;
    width:100%;
    max-width:560px;
    margin:0 auto
  }
  .jj-hero-promo
  {
    width:100%;
    min-height:300px
  }
}
@media (max-width:767px)
{
  .jj-quote-card
  {
    display:none
  }
}
@media (max-width:560px)
{
  .jj-hero
  {
    padding:140px 0 64px
  }
  .jj-quote-panel
  {
    padding:16px 14px 12px
  }
  .jj-frow
  {
    flex-direction:column;
    gap:10px;
    margin-bottom:10px
  }
  .jj-tab
  {
    font-size:13px
  }
  .jj-hero-promo
  {
    min-height:280px
  }
}
/* ---- mobile hero tuning ---- */
@media (max-width:767px)
{
  .jj-hero
  {
    padding:150px 0 72px
  }
  .jj-promo-slide h1,.jj-promo-slide .jj-promo-title
  {
    font-size:24px;
    line-height:1.2;
    margin-bottom:16px
  }
  .jj-promo-slide li
  {
    font-size:14px;
    margin-bottom:10px;
    gap:10px
  }
  .jj-hero-promo
  {
    min-height:260px
  }
}
/* ---- mobile typography & spacing tuning (≤767px) ---- */
@media (max-width:767px)
{
  .text-4xl
  {
    font-size:1.625rem;
    line-height:2.125rem
  }
  .text-2xl
  {
    font-size:1.25rem;
    line-height:1.75rem
  }
  .py-28
  {
    padding-top:3.5rem;
    padding-bottom:3.5rem
  }
  .py-24
  {
    padding-top:3.5rem;
    padding-bottom:3.5rem
  }
  .py-16
  {
    padding-top:3rem;
    padding-bottom:3rem
  }
  .p-8
  {
    padding:1.25rem
  }
  .p-6
  {
    padding:1rem
  }
  .gap-14
  {
    gap:2rem
  }
  .gap-10
  {
    gap:1.5rem
  }
  .gap-8
  {
    gap:1.25rem
  }
  .gap-6
  {
    gap:1rem
  }
  .mt-20
  {
    margin-top:2.5rem
  }
  .mt-16
  {
    margin-top:2.5rem
  }
  .mt-9
  {
    margin-top:1.5rem
  }
  .space-y-7>:not([hidden])~:not([hidden])
  {
    margin-top:1.25rem
  }
}
.object-cover
{
  object-fit:cover
}
@media(min-width:768px)
{
  .md\:flex-row-reverse
  {
    flex-direction:row-reverse
  }
  .md\:w-2\/5
  {
    width:40%
  }
}
.qc-wrap
{
  position:relative;
  margin-top:3rem
}
.qc-viewport
{
  overflow:hidden
}
.qc-track
{
  display:flex;
  transition:transform .5s ease
}
.qc-slide
{
  flex:0 0 auto;
  box-sizing:border-box;
  padding:0 .75rem
}
.qc-card
{
  height:100%;
  overflow:hidden;
  border-radius:1.5rem;
  border:1px solid rgba(13,18,41,.1);
  background:#fff;
  transition:box-shadow .5s
}
.qc-card:hover
{
  box-shadow:0 30px 70px -24px rgba(13,18,41,.3)
}
.qc-img
{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#f1f5f9
}
.qc-caption
{
  padding:1.25rem;
  text-align:center
}
.qc-caption h3
{
  font-family:Space Grotesk,Noto Sans SC,sans-serif;
  font-size:1.125rem;
  font-weight:700;
  color:#0d1229
}
.qc-arrow
{
  position:absolute;
  top:38%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  padding:0;
  border-radius:9999px;
  border:1px solid rgba(13,18,41,.1);
  background:#fff;
  color:#0d1229;
  cursor:pointer;
  box-shadow:0 18px 40px -16px rgba(13,18,41,.35);
  transition:background .3s,color .3s,border-color .3s,opacity .3s;
  z-index:2
}
.qc-arrow:hover:not(:disabled)
{
  background:#ff9000;
  border-color:#ff9000;
  color:#fff
}
.qc-arrow:disabled
{
  opacity:.35;
  cursor:default
}
.qc-prev
{
  left:-1.25rem
}
.qc-next
{
  right:-1.25rem
}
.qc-arrow-icon
{
  width:1.25rem;
  height:1.25rem
}
.qc-dots
{
  margin-top:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.625rem
}
.qc-dot
{
  width:.625rem;
  height:.625rem;
  padding:0;
  border:0;
  border-radius:9999px;
  background:rgba(13,18,41,.15);
  cursor:pointer;
  transition:width .3s,background .3s
}
.qc-dot:hover
{
  background:rgba(13,18,41,.35)
}
.qc-dot.qc-active
{
  width:2rem;
  background:#ff9000
}
.ql-img
{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover
}
.ql-body
{
  padding:0 2rem 2rem
}
/* ===== Factory showcase ===== */
.factory-showcase
{
  background-image:linear-gradient(180deg,#ffffff 0%,#f4f6fb 45%,#ffffff 100%)
}
.factory-grid
{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center
}
.factory-grid>div:first-child
{
  counter-reset:fac
}
.factory-tab
{
  position:relative;
  display:flex;
  width:100%;
  align-items:center;
  gap:1rem;
  border:0;
  border-top:1px solid rgba(42,51,94,.12);
  background:none;
  cursor:pointer;
  padding:1.9rem 1rem 1.9rem .25rem;
  text-align:left;
  font-family:Space Grotesk,Noto Sans SC,sans-serif;
  font-size:1.375rem;
  font-weight:700;
  color:#2a335e;
  opacity:.5;
  transition:color .3s,opacity .3s,padding-left .35s cubic-bezier(.22,1,.36,1)
}
.factory-tab:last-child
{
  border-bottom:1px solid rgba(42,51,94,.12)
}
.factory-tab::before
{
  counter-increment:fac;
  content:"0" counter(fac);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.15em;
  color:rgba(42,51,94,.35);
  transition:color .3s
}
.factory-tab::after
{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:0;
  transform:translateY(-50%);
  border-radius:2px;
  background:linear-gradient(180deg,#ff9000,#ffc06a);
  transition:height .35s cubic-bezier(.22,1,.36,1)
}
.factory-tab:hover
{
  opacity:.85
}
.factory-tab.active
{
  opacity:1;
  color:#ff9000;
  padding-left:1.1rem;
  background:linear-gradient(90deg,rgba(255,144,0,.08),transparent 70%)
}
.factory-tab.active::before
{
  color:#ff9000
}
.factory-tab.active::after
{
  height:60%
}
.factory-img-wrap
{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}
.factory-img-wrap::before
{
  content:"";
  position:absolute;
  inset:-.9rem -.9rem .9rem .9rem;
  border:1.5px solid rgba(255,144,0,.4);
  border-radius:1.9rem;
  pointer-events:none
}
.factory-img
{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:1.5rem;
  box-shadow:0 32px 64px -24px rgba(13,18,41,.4);
  transition:transform .6s cubic-bezier(.22,1,.36,1)
}
.factory-img-wrap:hover .factory-img
{
  transform:translateY(-6px)
}
.factory-desc-wrap
{
  position:relative
}
.factory-desc
{
  margin:0;
  padding:2rem 2.25rem;
  background:#fff;
  border:1px solid rgba(42,51,94,.08);
  border-radius:1.25rem;
  box-shadow:0 18px 44px -22px rgba(13,18,41,.18);
  line-height:2.1;
  color:#475569;
  font-size:1.02rem
}
.factory-desc::before
{
  content:"";
  display:block;
  width:3rem;
  height:3px;
  margin-bottom:1.2rem;
  border-radius:2px;
  background:linear-gradient(90deg,#ff9000,#ffc06a)
}
@media(min-width:1024px)
{
  .factory-grid
  {
    grid-template-columns:3fr 5fr 4fr;
    gap:0
  }
  .factory-img-wrap
  {
    padding:0 3rem
  }
  .factory-img-wrap::before
  {
    inset:-.9rem 2.1rem .9rem 2.1rem
  }
  .factory-desc-wrap
  {
    padding-left:1rem
  }
}
/* ===== Equipment carousel ===== */
.jjws
{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0 1.5rem;
  box-sizing:border-box
}
.jjws-tabs
{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.5rem;
  background:#fff;
  border:1px solid rgba(13,18,41,.1);
  border-radius:1rem;
  scrollbar-width:none
}
.jjws-tabs::-webkit-scrollbar
{
  display:none
}
.jjws-tab
{
  display:flex;
  min-width:118px;
  flex:1 0 auto;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:.85rem .6rem;
  border:0;
  background:transparent;
  border-radius:.75rem;
  cursor:pointer;
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  color:rgba(13,18,41,.6);
  transition:background .3s,color .3s
}
.jjws-tab svg,.jjws-tab .ph
{
  width:26px;
  height:26px;
  font-size:26px
}
.jjws-tab:hover
{
  color:#e8963c
}
.jjws-tab.is-active
{
  background:#0d1229;
  color:#fff
}
.jjws-tab.is-active:hover
{
  color:#fff
}
.jjws-stage
{
  position:relative;
  margin-top:2.5rem
}
.jjws-cards
{
  display:flex;
  gap:1.5rem;
  justify-content:center;
  align-items:stretch
}
.jjws-slot
{
  flex:1 1 0;
  min-width:0
}
.jjws-slot.is-side
{
  display:none;
  cursor:pointer
}
@media(min-width:768px)
{
  .jjws-slot.is-side
  {
    display:block;
    opacity:.55;
    transform:scale(.96);
    transition:opacity .3s,transform .3s
  }
  .jjws-slot.is-side:hover
  {
    opacity:.85
  }
}
.jjws-card
{
  height:100%;
  background:#fff;
  border:1px solid rgba(13,18,41,.1);
  border-radius:1.5rem;
  overflow:hidden
}
.jjws-slot:not(.is-side) .jjws-card
{
  box-shadow:0 30px 70px -24px rgba(13,18,41,.3)
}
.jjws-card img
{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}
.jjws-card-body
{
  padding:1.4rem 1.5rem
}
.jjws-card-body h3
{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  color:#0d1229
}
.jjws-card-body p
{
  margin:.55rem 0 0;
  font-size:.85rem;
  line-height:1.6;
  color:rgba(13,18,41,.5)
}
.jjws-arrow
{
  position:absolute;
  top:37%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:9999px;
  border:1px solid rgba(13,18,41,.1);
  background:#fff;
  box-shadow:0 12px 30px -10px rgba(13,18,41,.35);
  cursor:pointer;
  color:#0d1229;
  transition:background .3s,color .3s
}
.jjws-arrow svg,.jjws-arrow .ph
{
  width:18px;
  height:18px;
  font-size:18px
}
.jjws-arrow:hover
{
  background:#0d1229;
  color:#fff
}
.jjws-prev
{
  left:-10px
}
.jjws-next
{
  right:-10px
}
@media(max-width:767px)
{
  .jjws-prev
  {
    left:6px
  }
  .jjws-next
  {
    right:6px
  }
}
/* dark-section variant */
.jjws-dark .jjws-tabs
{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12)
}
.jjws-dark .jjws-tab
{
  color:rgba(255,255,255,.55)
}
.jjws-dark .jjws-tab:hover
{
  color:#ffb84d
}
.jjws-dark .jjws-tab.is-active
{
  background:#ff9000;
  color:#0d1229
}
.jjws-dark .jjws-tab.is-active:hover
{
  color:#0d1229
}
.jjws-dark .jjws-card
{
  border-color:rgba(255,255,255,.12)
}
.jjws-dark .jjws-arrow
{
  border-color:rgba(255,255,255,.15)
}
/* ---- 移动端 Contact 区防溢出：单列网格轨道限制在容器宽度内 ---- */
@media (max-width:767px)
{
  html,body
  {
    overflow-x:hidden
  }
  section.contact-section .grid
  {
    grid-template-columns:minmax(0,1fr)
  }
  section.contact-section .grid>*
  {
    min-width:0
  }
  section.contact-section p,  section.contact-section a
  {
    overflow-wrap:anywhere
  }
  /* 入场动画的位移/透明度在移动端直接中和，避免卡住时顶出版面 */
  section.contact-section .jj-motion
  {
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}
/* Download card layouts are maintained in support-pages.css. */
/* 分页控件 */
.dl-pager
{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:36px;
}
.dl-pager button
{
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius:9999px;
  border:1px solid rgba(42,51,94,.18);
  background:#fff;
  color:#2a335e;
  font:inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all .25s;
}
.dl-pager button:hover:not(:disabled):not(.active)
{
  border-color:#ff9000;
  color:#ff9000;
}
.dl-pager button.active
{
  background:#2a335e;
  color:#fff;
  border-color:#2a335e;
}
.dl-pager button:disabled
{
  opacity:.35;
  cursor:default;
}
/* ---- 博客列表分页 ---- */
.jj-pagination
{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:48px;
  flex-wrap:wrap
}
.jj-page-btn
{
  min-width:44px;
  height:44px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(13,18,41,.15);
  background:#fff;
  color:#0d1229;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit
}
.jj-page-btn:hover:not(:disabled)
{
  border-color:#ff9000;
  color:#ff9000
}
.jj-page-btn.is-active
{
  background:#0d1229;
  color:#fff;
  border-color:#0d1229
}
.jj-page-btn:disabled
{
  opacity:.35;
  cursor:not-allowed
}
/* ---- 移动端分类栏（文章列表上方，原侧栏分类卡片在移动端隐藏） ---- */
.jj-cat-bar
{
  display:none
}
@media (max-width:767px)
{
  .jj-cat-bar
  {
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin:0 0 20px;
    padding:2px 2px 6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:calc(100vw - 48px)
  }
  .blog-list-section div:is(.lg\:col-span-2,.content-factory-image)
  {
    min-width:0
  }
  .jj-cat-bar::-webkit-scrollbar
  {
    display:none
  }
  .jj-cat-pill
  {
    flex:0 0 auto;
    padding:9px 18px;
    border-radius:9999px;
    border:1px solid rgba(13,18,41,.15);
    background:#fff;
    color:rgba(13,18,41,.6);
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    white-space:nowrap;
    transition:all .2s
  }
  .jj-cat-pill.is-active
  {
    background:#0d1229;
    color:#fff;
    border-color:#0d1229
  }
  .jj-cat-card
  {
    display:none
  }
}
/* Quote hero mobile tuning */
@media (max-width:767px)
{
  .mt-10
  {
    margin-top:1.75rem
  }
  /* ---- quote form: tighter inner spacing & control height ---- */
  .py-3\.5
  {
    padding-top:.625rem;
    padding-bottom:.625rem
  }
  .py-8
  {
    padding-top:1.25rem;
    padding-bottom:1.25rem
  }
}
/* Shared media and interaction state hooks */
.site-topbar
{
  max-height:48px;
  opacity:1
}
.scroll-progress
{
  transform:scaleX(0);
  transform-origin:left
}
.media-cover
{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.accordion-panel
{
  height:0;
  overflow:hidden;
  opacity:0;
  box-sizing:border-box;
  padding-bottom:1.25rem;
  transition:height .28s ease,opacity .2s ease
}
.accordion-panel > p
{
  margin:0;
  padding-top:.25rem;
  padding-bottom:0
}
.card-fill
{
  height:100%
}
.cover-background
{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat
}
.file-input
{
  display:none
}
.captcha-field
{
  max-width:200px
}
.jj-file-input
{
  display:none
}
.jj-captcha-input
{
  max-width:200px
}
.jj-motion
{
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),filter .75s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform,filter
}
.jj-motion
{
  opacity:0;
  transform:translateY(28px);
  filter:blur(8px)
}
.jj-motion.is-visible
{
  opacity:1!important;
  transform:none!important;
  filter:none!important
}
[data-reveal]
{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease
}
[data-reveal].is-visible
{
  opacity:1;
  transform:none
}
.jj-form-status
{
  margin-top:1rem;
  color:#0d1229;
  font-size:.875rem
}
.jj-mobile-menu
{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  padding:1rem 1.5rem;
  background:#0d1229;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(8,12,32,.24)
}
.jj-mobile-menu a
{
  display:block;
  padding:.8rem 0;
  color:rgba(255,255,255,.82);
  font:600 .9rem/1.2 "Space Grotesk",sans-serif;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.jj-mobile-menu a:last-child
{
  border-bottom:0
}
.jj-mobile-menu__label
{
  display:block;
  padding:.8rem 0 .35rem;
  color:#ff9000;
  font:700 .72rem/1.2 "Space Grotesk",sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase
}
.jj-mobile-menu a.jj-mobile-menu__subitem
{
  padding-left:1rem;
  color:rgba(255,255,255,.68);
  font-size:.84rem
}
.jj-mobile-menu a.jj-mobile-menu__quote
{
  margin-top:.65rem;
  border:0;
  border-radius:.45rem;
  padding:.8rem 1rem;
  background:#ff9000;
  color:#0d1229;
  text-align:center
}
.jj-mobile-menu.is-open
{
  display:block
}
.jj-carousel-track
{
  transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.jj-carousel-arrow:disabled
{
  opacity:.35;
  cursor:not-allowed;
  transform:none
}
.error-page
{
  min-height:100dvh;
  display:grid;
  place-content:center;
  gap:1rem;
  padding:2rem;
  background:#f7f8fb;
  color:#0d1229;
  text-align:center
}
.error-page h1
{
  font:800 clamp(2.25rem,6vw,4.5rem)/1.05 "Space Grotesk",sans-serif;
  letter-spacing:-.04em
}
.error-page p
{
  color:#64748b
}
.error-page .eyebrow
{
  margin:0;
  color:#ff9000;
  font:700 1rem/1 "Space Grotesk",sans-serif;
  letter-spacing:.22em
}
.error-page .button
{
  display:inline-flex;
  justify-self:center;
  margin-top:.5rem;
  padding:.85rem 1.5rem;
  border-radius:999px;
  background:#0d1229;
  color:#fff;
  font-weight:700
}
@media (prefers-reduced-motion: reduce)
{
  .jj-motion,[data-reveal]
  {
    transition:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important
  }
}
/* ---- delivery baseline: keyboard access, stable anchors and mobile safety ---- */
html
{
  scroll-padding-top:96px
}
body
{
  overflow-x:hidden
}
main[id]
{
  scroll-margin-top:96px
}
.skip-link
{
  position:fixed;
  left:1rem;
  top:.75rem;
  z-index:100;
  transform:translateY(-180%);
  padding:.7rem 1rem;
  border-radius:.65rem;
  background:#ff9000;
  color:#0d1229;
  font:700 .875rem/1 "Space Grotesk",sans-serif;
  box-shadow:0 8px 24px rgba(13,18,41,.24);
  transition:transform .2s ease
}
.skip-link:focus
{
  transform:translateY(0)
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible
{
  outline:3px solid rgba(255,144,0,.8);
  outline-offset:3px
}
button:disabled
{
  pointer-events:none
}
[aria-invalid="true"]
{
  border-color:#dc2626!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.12)
}
.jj-form-status
{
  padding:.75rem 1rem;
  border-radius:.75rem;
  background:#ecfdf3;
  color:#166534
}
form[data-submitted] [type="submit"]
{
  background:#166534!important
}
.jj-mobile-menu
{
  z-index:70;
  max-height:calc(100svh - 7rem);
  overflow:auto
}
@media (max-width:1279px)
{
  .jj-mobile-menu
  {
    display:none
  }
  .jj-mobile-menu.is-open
  {
    display:block
  }
}
@media (min-width:1280px)
{
  .jj-mobile-menu
  {
    display:none!important
  }
}
@media (max-width:767px)
{
  html
  {
    scroll-padding-top:80px
  }
  main[id]
  {
    scroll-margin-top:80px
  }
  .skip-link
  {
    left:.75rem
  }
}
@media (prefers-reduced-motion: reduce)
{
  html
  {
    scroll-behavior:auto
  }
  .jj-mobile-menu,.jj-promo-slide,.jj-hero-bg,.jj-carousel-track,.qc-track,.jj-dot
  {
    transition:none!important
  }
  .jj-promo-slide
  {
    transform:none!important
  }
}

/* ===== Unified quote hero, navigation dropdown and site search ===== */
body[data-page="index"] .site-nav,
body[data-page="index"] .site-nav.is-scrolled,
body:not([data-page="index"]) .site-nav,
body:not([data-page="index"]) .site-nav.is-scrolled
{
  background:#fff;
  border-color:rgba(13,18,41,.1);
  box-shadow:0 8px 40px -12px rgba(13,18,41,.18)
}
body[data-page="index"] .site-nav__inner .primary-nav__link,
body[data-page="index"] .site-nav.is-scrolled .site-nav__inner .primary-nav__link,
body[data-page="index"] .site-nav__inner .menu-toggle,
body[data-page="index"] .site-nav.is-scrolled .site-nav__inner .menu-toggle
{
  color:#0d1229
}

.primary-nav__services
{
  position:relative
}
.primary-nav__services-toggle
{
  border:0;
  background:transparent;
  color:#0d1229;
  cursor:pointer;
  font:inherit
}
.primary-nav__services-toggle svg,.primary-nav__services-toggle .ph
{
  transition:transform .2s ease
}
.primary-nav__services.is-open .primary-nav__services-toggle,
.primary-nav__services-toggle:hover
{
  color:#ff9000
}
.primary-nav__services.is-open .primary-nav__services-toggle svg,.primary-nav__services.is-open .primary-nav__services-toggle .ph
{
  transform:rotate(180deg)
}
.primary-nav__submenu
{
  position:absolute;
  top:calc(100% + .5rem);
  left:50%;
  min-width:235px;
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-.35rem);
  border:1px solid rgba(13,18,41,.1);
  border-radius:.75rem;
  background:#fff;
  box-shadow:0 18px 40px -18px rgba(13,18,41,.35);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease
}
.primary-nav__services.is-open .primary-nav__submenu
{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}
.primary-nav__submenu a
{
  display:block;
  padding:.75rem .85rem;
  border-radius:.45rem;
  color:#0d1229;
  font:600 .82rem/1.2 "Space Grotesk","Noto Sans SC",sans-serif;
  white-space:nowrap
}
.primary-nav__submenu a:hover,
.primary-nav__submenu a:focus-visible
{
  background:#f7f8fb;
  color:#ff9000
}
.nav-rfq
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.5rem;
  padding:.65rem 1rem;
  border-radius:.45rem;
  background:#ff9000;
  color:#fff;
  font:700 .78rem/1.1 "Space Grotesk","Noto Sans SC",sans-serif;
  white-space:nowrap;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease
}
.nav-rfq:hover
{
  background:#f07f00;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -14px rgba(255,144,0,.9)
}
.site-search
{
  position:fixed;
  top:auto;
  right:auto;
  z-index:80;
  display:flex;
  gap:.45rem;
  width:min(360px,calc(100vw - 2rem));
  padding:.45rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-.35rem);
  border:1px solid rgba(13,18,41,.1);
  border-radius:.7rem;
  background:#fff;
  box-shadow:0 18px 40px -18px rgba(13,18,41,.35);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease
}
.site-search.is-open
{
  opacity:1;
  visibility:visible;
  transform:none
}
.site-search input
{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  padding:.7rem .75rem;
  color:#0d1229;
  font:500 .85rem/1.2 "Space Grotesk","Noto Sans SC",sans-serif;
  background:#f7f8fb;
  border-radius:.45rem
}
.site-search button
{
  border:0;
  border-radius:.45rem;
  padding:0 .85rem;
  background:#0d1229;
  color:#fff;
  font:700 .78rem/1 "Space Grotesk","Noto Sans SC",sans-serif;
  cursor:pointer
}
.site-search__close
{
  display:inline-flex;
  width:2.25rem;
  flex:0 0 2.25rem;
  align-items:center;
  justify-content:center;
  padding:0!important;
  background:transparent!important;
  color:#64748b!important;
  font-size:1rem
}
.site-search__close:hover,.site-search__close:focus-visible
{
  background:#f1f5f9!important;
  color:#0d1229!important
}
.sr-only
{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.jj-unified-hero
{
  min-height:0;
  padding-top:120px
}
.jj-unified-hero .jj-hero-bg
{
  background-image:var(--jj-hero-poster),linear-gradient(135deg,#0d1229,#2a335e);
  background-position:center;
  background-size:cover
}
.jj-hero-video
{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease
}
.jj-hero-bg.has-video .jj-hero-video
{
  opacity:1
}
.jj-hero-bg::after
{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(13,18,41,.38) 0%,rgba(13,18,41,.22) 43%,rgba(13,18,41,.08) 100%)
}
.jj-unified-hero .jj-hero-inner
{
  align-items:stretch
}
.jj-unified-hero .jj-quote-card,
.jj-unified-hero .jj-hero-promo
{
  position:relative;
  z-index:2
}
.jj-unified-hero .jj-hero-promo
{
  display:flex;
  min-height:380px;
  flex-direction:column;
  justify-content:center;
  padding:3rem 0 4rem
}
.jj-unified-hero .jj-promo-kicker
{
  margin:0 0 1rem;
  color:#ff9000;
  font:700 .78rem/1 "Space Grotesk",sans-serif;
  letter-spacing:.22em
}
.jj-unified-hero .jj-promo-copy
{
  max-width:31rem;
  margin:0 0 1.25rem;
  color:rgba(255,255,255,.75);
  font-size:1rem;
  line-height:1.65
}
.jj-unified-hero .jj-promo-slide ul
{
  margin:1.25rem 0 0;
  padding-left:1.1rem;
  color:rgba(255,255,255,.82);
  line-height:1.9
}
.jj-unified-hero .jj-dots
{
  position:absolute;
  bottom:0;
  left:0
}
.jj-hero-arrow
{
  position:absolute;
  top:50%;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:rgba(13,18,41,.34);
  color:#fff;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .25s ease,border-color .25s ease,transform .25s ease
}
.jj-hero-arrow:hover
{
  border-color:#ff9000;
  background:#ff9000;
  transform:translateY(-50%) scale(1.05)
}
.jj-hero-arrow--prev
{
  left:24px
}
.jj-hero-arrow--next
{
  right:24px
}
.jj-unified-hero .jj-dot
{
  width:2.2rem;
  height:.2rem;
  margin-right:.45rem;
  border:0;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:background .2s ease,width .2s ease
}
.jj-unified-hero .jj-dot.is-active
{
  width:3.5rem;
  background:#ff9000
}
@media (max-width:1279px)
{
  .nav-rfq{display:none}
}
@media (max-width:767px)
{
  .site-search{right:1rem}
  .primary-nav__submenu{display:none}
  .jj-unified-hero{min-height:auto;padding-top:60px;padding-bottom:3rem}
  .jj-unified-hero .jj-hero-inner{display:flex;flex-direction:column;gap:2rem;padding-left:24px;padding-right:24px}
  .jj-unified-hero .jj-quote-card{flex:0 0 auto;max-width:none}
  .jj-unified-hero .jj-hero-promo{min-height:280px;padding:1rem 0 2rem}
  .jj-frow{flex-direction:column;gap:10px}
  .jj-actions{flex-direction:column}
}
/* ===== Shared site chrome ===== */
.site-header
{
  position:fixed;
  inset:0 0 auto;
  z-index:50
}
.site-topbar
{
  overflow:visible;
  background:#0d1229;
  color:rgba(255,255,255,.8)
}
.site-topbar__inner
{
  width:100%;
  max-width:1520px;
  height:44px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.75rem
}
.site-topbar__inner--desktop
{
  display:none
}
.site-topbar__tagline
{
  letter-spacing:.025em
}
.site-topbar__actions
{
  display:flex;
  align-items:center;
  gap:1rem
}
.site-topbar__link
{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  color:inherit;
  transition:color .2s
}
.site-topbar__link:hover,.site-social__link:hover,.site-language__button:hover
{
  color:#ff9000
}
.site-topbar__label
{
  display:none
}
.site-social
{
  display:none;
  align-items:center;
  gap:.75rem;
  padding-left:1rem;
  border-left:1px solid rgba(255,255,255,.15)
}
.site-social__link
{
  display:inline-flex;
  color:inherit;
  transition:transform .2s,color .2s
}
.site-social__link:hover
{
  transform:translateY(-2px)
}
.site-language
{
  padding-left:1rem;
  border-left:1px solid rgba(255,255,255,.15)
}
.site-language__menu
{
  position:relative;
  z-index:60
}
.site-language__button
{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  padding:.125rem .25rem;
  color:rgba(255,255,255,.8);
  font:600 .75rem/1 "Space Grotesk",sans-serif;
  transition:color .2s
}
.site-language__dropdown
{
  position:absolute;
  top:calc(100% + .55rem);
  right:0;
  min-width:7.5rem;
  padding:.35rem;
  border:1px solid rgba(13,18,41,.1);
  border-radius:.55rem;
  background:#fff;
  box-shadow:0 16px 32px -14px rgba(13,18,41,.4);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-.35rem);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease
}
.site-language__menu::after
{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  width:7.5rem;
  height:.55rem;
  display:none
}
.site-language__menu.is-open::after,
.site-language__menu:hover::after,
.site-language__menu:focus-within::after
{
  display:block
}
.site-language__menu.is-open .site-language__dropdown,
.site-language__menu:hover .site-language__dropdown,
.site-language__menu:focus-within .site-language__dropdown
{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0)
}
.site-language__option
{
  display:block;
  border-radius:.35rem;
  padding:.55rem .7rem;
  color:#0d1229;
  font:600 .75rem/1.2 "Space Grotesk",sans-serif;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease
}
.site-language__option:hover,
.site-language__option.is-current
{
  background:#f1f3f8;
  color:#ff9000
}
.site-icon--small
{
  width:.875rem;
  height:.875rem
}
.site-icon--tiny
{
  width:.75rem;
  height:.75rem
}
.site-nav
{
  height:76px;
  border-bottom:1px solid rgba(13,18,41,.1);
  background:rgba(255,255,255,.85);
  box-shadow:0 8px 40px -12px rgba(13,18,41,.25);
  backdrop-filter:blur(18px);
  transition:background-color .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease
}
.site-nav__inner
{
  width:100%;
  max-width:1520px;
  height:100%;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.site-brand
{
  display:flex;
  align-items:center
}
.site-brand__mark
{
  display:flex;
  align-items:center
}
.brand-logo
{
  display:block
}
.brand-logo__image
{
  display:block;
  width:auto;
  height:2.25rem;
  transition:opacity .3s
}
.primary-nav
{
  display:none;
  align-items:center
}
.primary-nav__item
{
  position:relative
}
.primary-nav__link
{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.5rem 1.25rem;
  font:600 .875rem/1.2 "Space Grotesk","Noto Sans SC",sans-serif;
  letter-spacing:.025em;
  transition:color .2s
}
.primary-nav__link
{
  color:#0d1229
}
.primary-nav__link:hover
{
  color:#ff9000
}
.site-nav__actions
{
  display:flex;
  align-items:center;
  gap:.75rem
}
.menu-toggle
{
  display:flex;
  width:2.5rem;
  height:2.5rem;
  align-items:center;
  justify-content:center;
  border-radius:.75rem
}
.menu-toggle
{
  color:#0d1229
}
.menu-toggle__icon
{
  width:1.5rem;
  height:1.5rem
}
.menu-toggle__icon.ph
{
  font-size:1.5rem
}
body[data-page="index"] .site-nav
{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,0);
  box-shadow:none
}
body[data-page="index"] .site-nav.is-scrolled
{
  border-color:rgba(13,18,41,.1);
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 40px -12px rgba(13,18,41,.25)
}
body[data-page="index"] .site-nav__inner .primary-nav__link
{
  color:rgba(255,255,255,.9)
}
body[data-page="index"] .site-nav.is-scrolled .site-nav__inner .primary-nav__link
{
  color:#0d1229
}
body[data-page="index"] .site-nav__inner .primary-nav__link:hover
{
  color:#ff9000
}
body[data-page="index"] .site-nav__inner .menu-toggle
{
  color:#fff
}
body[data-page="index"] .site-nav.is-scrolled .site-nav__inner .menu-toggle
{
  color:#0d1229
}
@media (min-width:640px)
{
  .site-topbar__label
  {
    display:inline
  }
}
@media (min-width:768px)
{
  .site-topbar__inner--desktop
  {
    display:flex
  }
  .site-social
  {
    display:flex
  }
  .site-nav__inner
  {
    padding-left:2.5rem;
    padding-right:2.5rem
  }
}
@media (min-width:1280px)
{
  .primary-nav
  {
    display:flex
  }
  .menu-toggle
  {
    display:none
  }
}
@media (max-width:767px)
{
  .site-topbar__inner
  {
    height:44px;
    padding:0 1rem
  }
  .site-nav__inner
  {
    padding:0 1.5rem
  }
}

/* Inner pages keep the header in normal flow so their banner starts below the
   navigation instead of rendering underneath it. The reduced hero top padding
   preserves the original visual distance from the top of the viewport. */
body:not([data-page="index"]) .site-header
{
  position:fixed;
  top:0;
  left:0;
  right:0;
}
body:not([data-page="index"]) .page-main
{
  padding-top:120px
}
body:not([data-page="index"]) .site-nav
{
  background:#fff;
}
body:not([data-page="index"]) .site-nav.is-scrolled
{
  background:rgba(255,255,255,.84);
  box-shadow:0 8px 32px -14px rgba(13,18,41,.22)
}
body:not([data-page="index"]) .jj-hero
{
  padding-top:70px
}

@media (max-width:1024px)
{
  body:not([data-page="index"]) .jj-hero
  {
    padding-top:40px
  }
}
@media (max-width:767px)
{
  body:not([data-page="index"]) .page-main
  {
    padding-top:76px
  }
  body:not([data-page="index"]) .jj-hero
  {
    padding-top:74px
  }
  
}
/* ===== Semantic page primitives =====
   These hooks are stable extension points for template-engine markup. */
.site-root,.site-shell
{
  min-height:100%
}
.page-main
{
  display:block
}
.section
{
  position:relative
}
.section--hero
{
  isolation:isolate
}
.contact-section,.downloads-list,.blog-list-section,.factory-showcase
{
  isolation:isolate
}
.form-grid
{
  min-width:0
}
.contact-form
{
  position:relative
}
.form-submit
{
  cursor:pointer
}
.download-grid,.article-grid
{
  min-width:0
}
.download-card__content
{
  min-width:0
}
.download-card__title,.download-card__description,.download-card__meta
{
  overflow-wrap:anywhere
}
.hero-canvas
{
  pointer-events:none
}
.site-footer__heading
{
  font:700 .875rem/1.2 "Space Grotesk","Noto Sans SC",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff
}
.site-footer__links
{
  margin-top:1.25rem;
  display:flex;
  flex-direction:column;
  gap:.75rem
}
.site-footer__item
{
  margin:0;
  padding:0
}
.site-footer__link
{
  display:inline-flex;
  align-items:center;
  color:rgba(255,255,255,.45);
  font-size:.875rem;
  transition:color .2s,transform .2s
}
.site-footer__link:hover
{
  color:#ff9000;
  transform:translateX(.25rem)
}


/* ===== Home industry accordion ===== */
.jj-acc
{
  display:flex;
  gap:16px;
  height:560px
}
.jj-acc-panel
{
  position:relative;
  display:block;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  border-radius:24px;
  isolation:isolate;
  cursor:pointer;
  transition:flex .6s cubic-bezier(.22,1,.36,1)
}
.jj-acc-panel::before
{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:1;
  pointer-events:none;
  opacity:.72;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%23b9c8ff' stroke-opacity='.28' stroke-width='2'%3E%3Cpath d='M8 28h82v38h62V42h82v-18h112'/%3E%3Cpath d='M26 208v-54h70v-34h76V82h62v42h110'/%3E%3Cpath d='M210 238v-42h46v-34h92'/%3E%3Cpath d='M6 112h42V78h46'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff9000' stroke-opacity='.58' stroke-width='2'%3E%3Cpath d='M24 28v26h46'/%3E%3Cpath d='M156 66v30h40'/%3E%3Cpath d='M96 154h34v-28'/%3E%3Cpath d='M256 196h36v-28'/%3E%3C/g%3E%3Cg fill='%23ff9000' fill-opacity='.9'%3E%3Ccircle cx='8' cy='28' r='4'/%3E%3Ccircle cx='90' cy='66' r='4'/%3E%3Ccircle cx='152' cy='42' r='4'/%3E%3Ccircle cx='234' cy='24' r='4'/%3E%3Ccircle cx='26' cy='208' r='4'/%3E%3Ccircle cx='172' cy='82' r='4'/%3E%3Ccircle cx='320' cy='124' r='4'/%3E%3Ccircle cx='210' cy='238' r='4'/%3E%3C/g%3E%3Cg fill='%237b9cff' fill-opacity='.65'%3E%3Ccircle cx='48' cy='112' r='3'/%3E%3Ccircle cx='130' cy='126' r='3'/%3E%3Ccircle cx='292' cy='168' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 55% at 10% 115%,transparent 0 56%,rgba(111,143,255,.32) 57%,transparent 59%);
  background-size:360px 240px,auto;
  background-repeat:repeat,no-repeat;
  background-position:0 0,0 0;
  animation:jj-acc-flow 16s ease-in-out infinite alternate;
  transform:rotate(-4deg) translate3d(-2%,0,0) scale(1.06);
  transition:opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1)
}
.jj-acc-panel::after
{
  content:"";
  position:absolute;
  left:-20%;
  top:38%;
  z-index:1;
  width:140%;
  height:72%;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,144,0,.06),0 0 48px rgba(74,90,168,.22);
  opacity:.5;
  transform:rotate(-12deg) translate3d(-4%,0,0);
  transition:opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1)
}
.jj-acc-panel:hover::before,
.jj-acc-panel.jj-acc-active::before
{
  opacity:.82;
  transform:rotate(-2deg) translate3d(2%,-2%,0) scale(1.12)
}
.jj-acc-panel:hover::after,
.jj-acc-panel.jj-acc-active::after
{
  opacity:.68;
  transform:rotate(-8deg) translate3d(3%,-3%,0) scale(1.04)
}
@keyframes jj-acc-flow
{
  0%{background-position:0 0,0 0}
  100%{background-position:54px -36px,24px -18px}
}
@media (prefers-reduced-motion:reduce)
{
  .jj-acc-panel::before
  {
    animation:none
  }
}
.jj-acc-panel.jj-acc-active
{
  flex:4 1 0;
  cursor:default
}
.jj-acc-num
{
  position:absolute;
  top:24px;
  left:24px;
  z-index:2;
  font-size:15px;
  font-weight:600;
  letter-spacing:.15em;
  color:rgba(255,255,255,.8)
}
.jj-acc-vtitle
{
  position:absolute;
  bottom:28px;
  left:50%;
  z-index:2;
  transform:translateX(-50%);
  writing-mode:vertical-rl;
  white-space:nowrap;
  font-size:18px;
  font-weight:700;
  color:#fff;
  opacity:1;
  transition:opacity .3s
}
.jj-acc-active .jj-acc-vtitle
{
  opacity:0
}
.jj-acc-body
{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:36px;
  padding:40px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .18s,transform .18s;
  pointer-events:none
}
.jj-acc-text
{
  flex:1 1 0;
  min-width:0
}
.jj-acc-img
{
  display:block;
  flex:1 1 0;
  align-self:stretch;
  border-radius:16px;
  overflow:hidden
}
.jj-acc-img img
{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.jj-acc-active .jj-acc-body
{
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition:opacity .45s .3s,transform .45s .3s
}
.jj-acc-icon
{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin-bottom:20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(12px)
}
.jj-acc-title
{
  font-size:24px;
  font-weight:700;
  color:#fff
}
.jj-acc-desc
{
  margin-top:12px;
  max-width:460px;
  font-size:14px;
  line-height:1.75;
  color:rgba(255,255,255,.7)
}
.jj-acc-link
{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.65);
  transition:color .3s
}
.jj-acc-panel:hover .jj-acc-link
{
  color:#ff9000
}

/* Keep the requested white navigation as the final cascade override. */
body[data-page="index"] .site-nav,
body[data-page="index"] .site-nav.is-scrolled,
body:not([data-page="index"]) .site-nav,
body:not([data-page="index"]) .site-nav.is-scrolled
{
  background:#fff;
  border-color:rgba(13,18,41,.1);
  box-shadow:0 8px 40px -12px rgba(13,18,41,.18)
}
body[data-page="index"] .site-nav__inner .primary-nav__link,
body[data-page="index"] .site-nav.is-scrolled .site-nav__inner .primary-nav__link,
body[data-page="index"] .site-nav__inner .menu-toggle,
body[data-page="index"] .site-nav.is-scrolled .site-nav__inner .menu-toggle
{
  color:#0d1229
}
@media (max-width:1023px)
{
  .jj-acc
  {
    flex-direction:column;
    height:auto
  }
  .jj-acc-panel
  {
    flex:none;
    min-height:84px
  }
  .jj-acc-panel.jj-acc-active
  {
    min-height:560px
  }
  .jj-acc-num
  {
    top:20px
  }
  .jj-acc-vtitle
  {
    writing-mode:horizontal-tb;
    left:auto;
    right:24px;
    bottom:auto;
    top:50%;
    transform:translateY(-50%)
  }
  .jj-acc-body
  {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end
  }
  .jj-acc-img
  {
    flex:none;
    width:100%;
    max-width:none;
    margin-top:20px;
    align-self:auto
  }
  .jj-acc-img img
  {
    height:auto;
    aspect-ratio:3/2
  }
}

/* Header owns its own vertical space; banners must start after it instead of
   sitting underneath a fixed navigation layer. */
.site-header
{
  position:sticky;
  top:0;
  right:0;
  left:0;
  z-index:50
}
body:not([data-page="index"]) .site-header
{
  position:sticky;
  top:0;
  right:0;
  left:0;
  z-index:50
}
body .page-main,
body:not([data-page="index"]) .page-main
{
  padding-top:0
}
body:not([data-page="index"]) .page-main
{
  padding-top:0
}
body[data-page="index"] .jj-unified-hero,
body:not([data-page="index"]) .jj-unified-hero
{
  padding-top:88px;
  padding-bottom:56px
}
body:not([data-page="index"]) .jj-hero
{
  padding-top:88px;
  padding-bottom:56px
}
body[data-page="index"] .jj-hero
{
  padding-top:88px;
  padding-bottom:56px
}
body[data-page="index"] .jj-hero-promo,
body:not([data-page="index"]) .jj-hero-promo
{
  min-height:380px;
  padding:3rem 0 4rem
}

@media (max-width:767px)
{
  body[data-page="index"] .jj-unified-hero,
  body:not([data-page="index"]) .jj-unified-hero,
  body:not([data-page="index"]) .jj-hero,
  body[data-page="index"] .jj-hero
  {
    padding-top:48px;
    padding-bottom:48px
  }
  .jj-unified-hero .jj-hero-promo
  {
    min-height:320px;
    padding:2rem 0 3rem
  }
  body[data-page="index"] .jj-hero-promo,
  body:not([data-page="index"]) .jj-hero-promo
  {
    min-height:320px;
    padding:2rem 0 3rem
  }
  
}

/* ===== Floating customer service shortcuts ===== */
.jj-service-float
{
  position:fixed;
  top:auto;
  bottom:1rem;
  right:1rem;
  z-index:45;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transform:none;
}
.jj-service-float__item
{
  position:relative;
  display:flex;
  width:3rem;
  height:3rem;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(13,18,41,.1);
  border-radius:.85rem;
  background:rgba(255,255,255,.96);
  color:#2a335e;
  box-shadow:0 10px 28px -16px rgba(13,18,41,.55);
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.jj-service-float__item:hover,
.jj-service-float__item:focus-visible,
.jj-service-float.is-wechat-open [data-service-key="wechat"]
{
  background:#ff9000;
  color:#fff;
  box-shadow:0 12px 28px -14px rgba(255,144,0,.9);
  transform:translateX(-2px);
}
.jj-service-float__item svg,.jj-service-float__item .ph
{
  width:1.25rem;
  height:1.25rem;
  font-size:1.25rem;
  display:inline-block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ph
{
  display:inline-block;
  line-height:1;
  font-style:normal;
  vertical-align:middle
}
.jj-upload .ph,.jj-quote-btn .ph
{
  font-size:1.125rem
}
.ph.content-contact-icon
{
  font-size:1.25rem
}
.ph.content-service-icon-small
{
  font-size:2rem
}

.ph.content-faq-chevron,.ph.content-reason-icon,.ph.content-link-arrow
{
  font-size:1rem
}
.ph.content-upload-attachment-icon
{
  font-size:.875rem
}
.ph.content-product-heading-icon
{
  font-size:1rem
}

[data-slot="accordion-trigger"] > .ph
{
  transition:transform .15s ease,color .15s ease
}
[data-slot="accordion-trigger"][data-state="open"] > .ph
{
  transform:rotate(180deg);
  color:#ff9000
}
.site-icon--small.ph
{
  font-size:.875rem
}
.site-icon--tiny.ph
{
  font-size:.75rem
}
.jj-service-float__label
{
  position:absolute;
  right:calc(100% + .6rem);
  top:50%;
  padding:.45rem .65rem;
  border-radius:.45rem;
  background:#0d1229;
  color:#fff;
  font:600 .75rem/1 "Noto Sans SC",sans-serif;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(4px,-50%);
  transition:opacity .18s ease,transform .18s ease;
}
.jj-service-float__item:hover .jj-service-float__label,
.jj-service-float__item:focus-visible .jj-service-float__label,
.jj-service-float.is-wechat-open [data-service-key="wechat"] .jj-service-float__label
{
  opacity:1;
  transform:translate(0,-50%);
}
.jj-service-float__notice
{
  position:absolute;
  right:calc(100% + .6rem);
  top:3.5rem;
  display:flex;
  width:13rem;
  flex-direction:column;
  gap:.35rem;
  padding:.8rem .9rem;
  border:1px solid rgba(13,18,41,.1);
  border-radius:.7rem;
  background:#fff;
  color:#475569;
  font-size:.75rem;
  line-height:1.5;
  box-shadow:0 14px 36px -18px rgba(13,18,41,.38);
  opacity:0;
  pointer-events:none;
  transform:translateX(6px);
  transition:opacity .2s ease,transform .2s ease;
}
.jj-service-float__notice strong
{
  color:#2a335e;
  font-size:.8rem;
}
.jj-service-float.is-wechat-open .jj-service-float__notice
{
  opacity:1;
  transform:none;
}
@media (max-width:767px)
{
  .jj-service-float
  {
    top:auto;
    right:.75rem;
    bottom:.75rem;
    flex-direction:row;
    transform:none;
  }
  .jj-service-float__item
  {
    width:2.75rem;
    height:2.75rem;
    border-radius:.75rem;
  }
  .jj-service-float__label
  {
    top:auto;
    right:50%;
    bottom:calc(100% + .5rem);
    transform:translate(50%,4px);
  }
  .jj-service-float__item:hover .jj-service-float__label,
  .jj-service-float__item:focus-visible .jj-service-float__label,
  .jj-service-float.is-wechat-open [data-service-key="wechat"] .jj-service-float__label
  {
    transform:translate(50%,0);
  }
  .jj-service-float__notice
  {
    right:0;
    top:auto;
    bottom:3.25rem;
    transform:translateY(6px);
  }
  .jj-service-float.is-wechat-open .jj-service-float__notice
  {
    transform:none;
  }
}

/* Industries: keep the accordion interaction, but use a quiet card grid
   background so the copy stays readable. */
.industries-section .jj-acc-panel
{
  background-color:#17203a;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background .35s ease,box-shadow .35s ease,flex .6s cubic-bezier(.22,1,.36,1)
}
.industries-section .jj-acc-panel:nth-child(1)
{
  background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),url("../images/index/industries-card/automotive-v2.jpg");background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),image-set(url("../images/index/industries-card/automotive-v2.webp") type("image/webp"),url("../images/index/industries-card/automotive-v2.jpg") type("image/jpeg"));
  background-position:68% center
}
.industries-section .jj-acc-panel:nth-child(2)
{
  background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),url("../images/index/industries-card/mobility-v2.jpg");background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),image-set(url("../images/index/industries-card/mobility-v2.webp") type("image/webp"),url("../images/index/industries-card/mobility-v2.jpg") type("image/jpeg"));
  background-position:58% center
}
.industries-section .jj-acc-panel:nth-child(3)
{
  background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),url("../images/index/industries-card/medical-v2.jpg");background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),image-set(url("../images/index/industries-card/medical-v2.webp") type("image/webp"),url("../images/index/industries-card/medical-v2.jpg") type("image/jpeg"));
  background-position:center
}
.industries-section .jj-acc-panel:nth-child(4)
{
  background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),url("../images/index/industries-card/industrial-v2.jpg");background-image:linear-gradient(135deg,rgba(13,18,41,.68),rgba(13,18,41,.24)),image-set(url("../images/index/industries-card/industrial-v2.webp") type("image/webp"),url("../images/index/industries-card/industrial-v2.jpg") type("image/jpeg"));
  background-position:42% center
}
.industries-section .jj-acc-panel:hover,
.industries-section .jj-acc-panel.jj-acc-active
{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 999px rgba(42,51,94,.12)
}
.industries-section .jj-acc-panel::before
{
  display:none
}
.industries-section .jj-acc-panel::after
{
  display:none;
}
.industries-section .jj-acc-panel > .content-background-overlay
{
  display:none;
}
.industries-section .jj-acc-body
{
  background:rgba(13,18,41,.16);
}
.industries-section .jj-acc-img
{
  display:none
}
.industries-section .jj-acc-num
{
  font-size:16px;
  font-weight:700
}
.industries-section .jj-acc-vtitle
{
  font-size:20px;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.45)
}
.industries-section .jj-acc-title
{
  font-size:30px;
  line-height:1.2;
  font-weight:700;
  text-shadow:0 2px 14px rgba(0,0,0,.5)
}
.industries-section .jj-acc-desc
{
  max-width:520px;
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.88);
  text-shadow:0 2px 12px rgba(0,0,0,.55)
}
.industries-section .jj-acc-link
{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 10px rgba(0,0,0,.5)
}
@media (max-width:1023px)
{
  .industries-section .jj-acc-panel:nth-child(1)
  {
    background-position:70% center
  }
  .industries-section .jj-acc-panel:nth-child(2)
  {
    background-position:55% center
  }
  .industries-section .jj-acc-panel:nth-child(3)
  {
    background-position:55% center
  }
  .industries-section .jj-acc-panel:nth-child(4)
  {
    background-position:38% center
  }
  .industries-section .jj-acc-vtitle
  {
    font-size:18px
  }
  .industries-section .jj-acc-title
  {
    font-size:28px
  }
  .industries-section .jj-acc-desc
  {
    font-size:16px;
    line-height:1.65
  }
  .industries-section .jj-acc-link
  {
    font-size:13px
  }
}

/* Service details appear on hover/focus beside the matching shortcut. */
.jj-service-float__detail
{
  position:absolute;
  right:calc(100% + .65rem);
  top:50%;
  display:flex;
  min-width:12rem;
  flex-direction:column;
  gap:.3rem;
  padding:.7rem .8rem;
  border:1px solid rgba(13,18,41,.1);
  border-radius:.6rem;
  background:#fff;
  color:#475569;
  font:500 .75rem/1.4 "Space Grotesk","Noto Sans SC",sans-serif;
  text-align:left;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(6px,-50%);
  box-shadow:0 14px 34px -18px rgba(13,18,41,.42);
  transition:opacity .2s ease,transform .2s ease;
}
.jj-service-float__detail strong
{
  color:#2a335e;
  font-weight:700;
  font-size:.78rem;
}
.jj-service-float__item:hover .jj-service-float__detail,
.jj-service-float__item:focus-visible .jj-service-float__detail,
.jj-service-float.is-wechat-open [data-service-key="wechat"] .jj-service-float__detail
{
  opacity:1;
  transform:translate(0,-50%);
}
.jj-service-float__detail--qr
{
  align-items:center;
  min-width:11.5rem;
  padding:.75rem;
  text-align:center;
}
.jj-service-float__detail--qr img
{
  display:block;
  width:9rem;
  height:9rem;
  margin:.2rem 0;
  border:4px solid #fff;
  object-fit:contain;
}
.jj-service-float__detail--qr span
{
  color:#64748b;
  font-size:.7rem;
}
@media (max-width:767px)
{
  .jj-service-float__detail
  {
    right:50%;
    top:auto;
    bottom:calc(100% + .6rem);
    transform:translate(50%,6px);
  }
  .jj-service-float__item:hover .jj-service-float__detail,
  .jj-service-float__item:focus-visible .jj-service-float__detail,
  .jj-service-float.is-wechat-open [data-service-key="wechat"] .jj-service-float__detail
  {
    transform:translate(50%,0);
  }
  .jj-service-float__detail--qr
  {
    right:.15rem;
    transform:translate(0,6px);
  }
  .jj-service-float.is-wechat-open [data-service-key="wechat"] .jj-service-float__detail--qr
  {
    transform:translate(0,0);
  }
}

/* FAQ state and answer styling belongs to the component, not CMS text. */
.content-faq-answer{padding:.25rem 0;line-height:1.625;color:rgba(255,255,255,.6)}
.content-faq-item:hover{background-color:rgba(255,255,255,.06)}
.content-faq-item[data-state="open"]{border-color:rgba(255,144,0,.4);background-color:rgba(255,255,255,.07)}
.content-faq-trigger[data-state="open"]{color:#ff9000}
.content-faq-trigger:disabled{opacity:.5;pointer-events:none}
.content-faq-trigger:focus-visible{outline:2px solid #ff9000;outline-offset:3px}