/* Shopify 推广页（/integrations/shopify）改版样式（DEV-135685）。
   由设计稿 shopify的专页.html 的 9 个 <style> 段按 section 顺序合并，选择器均带各 section 前缀，
   与站内既有样式互不干扰；纯 CSS，直接走 less 编译管线。 */
/* 页头与 Hero 同色（DEV-135685 补充，参照老页"头部透明+底部透出主色"的机制与
   integrationsAmazon.less 的 hero-bleed 先例）：mf 头部本体透明，把 Hero 的渐变
   背景画到 ::after 并向上延伸 400px，垫在透明页头后面，保证 logo 行/导航行与
   首屏颜色连续、无缝。 */
/* 站点公共字体（旧版页面即有）：mf 头部菜单无自身 font-family，依赖页面 body 字体，
   不补会退化成浏览器默认 Arial，与线上页头的字体/字间距观感不一致 */
body {
  font-family: PingFangSC-Medium, PingFangSCSemibold, Arial, Helvetica, sans-serif;
}
/* hero 改 overflow:visible 后，装饰层（cjsg-sheen 右侧越界 350px）会撑出横向滚动；
   用 clip 只裁横向，纵向的页头 bleed 不受影响（clip 与 hidden 不同，允许另一轴 visible）。 */
[data-gtag-module="integrations_shopify"] {
  overflow-x: clip;
}
#cj-header-container {
  position: relative;
  z-index: 1003;
}
#vue-unverify-tip {
  position: relative;
  z-index: 1002;
}
.cjsg-hero,
.cjsg-hero * {
  box-sizing: border-box;
}
.cjsg-hero {
  --cjsg-green: #95bf47;
  --cjsg-lime: #c5f578;
  --cjsg-orange: #ff7900;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 100%;
  background: none;
}
/* 渐变底色改画在 ::after 上并向页头方向延伸；径向光晕(::before)与网格(.cjsg-grid)
     仍按原层级叠在其上。负 z-index 被 isolation 限制在 Hero 自己的层叠上下文内。 */
.cjsg-hero::after {
  content: "";
  position: absolute;
  top: -400px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(112deg, #052f20 0%, #075039 49%, #0b6b43 100%);
}
.cjsg-hero::before {
  content: "";
  position: absolute;
  /* 顶部同样向上延伸 @cjsg-hero-bleed：光晕若只覆盖 Hero 盒子，会在 Hero 顶边缘
       被硬截断，与上方 bleed 区形成一条色差线（页头下"一条线"的成因） */
  top: -400px;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(circle at 82% 30%, rgba(183, 248, 99, 0.26), transparent 37%), radial-gradient(circle at 18% 92%, rgba(149, 191, 71, 0.19), transparent 43%), radial-gradient(circle at 67% 80%, rgba(9, 231, 139, 0.16), transparent 36%);
  animation: cjsg-aurora 9s ease-in-out infinite alternate;
}
.cjsg-grid {
  position: absolute;
  /* 与 ::before 同理向上延伸，避免网格层在 Hero 顶边缘露边界 */
  top: -400px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: linear-gradient(rgba(197, 245, 120, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 245, 120, 0.07) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent, black 47%, black);
  animation: cjsg-grid 24s linear infinite;
}
.cjsg-sheen {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 740px;
  height: 740px;
  right: -350px;
  top: -420px;
  border-radius: 50%;
  border: 1px solid rgba(211, 255, 158, 0.16);
  box-shadow: 0 0 0 80px rgba(220, 255, 164, 0.028), 0 0 0 160px rgba(220, 255, 164, 0.023), 0 0 0 240px rgba(220, 255, 164, 0.017);
}
.cjsg-inner {
  max-width: 1200px;
  width: calc(100% - 64px);
  margin: auto;
  min-height: 650px;
  padding: 78px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: center;
  gap: 30px;
  position: relative;
  z-index: 1;
}
.cjsg-copy {
  position: relative;
  z-index: 4;
  animation: cjsg-reveal 0.85s both;
}
.cjsg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(200, 255, 162, 0.3);
  background: rgba(183, 246, 133, 0.09);
  border-radius: 40px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #dbf8bf;
}
.cjsg-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #baff69;
  box-shadow: 0 0 0 0 rgba(186, 255, 105, 0.5);
  animation: cjsg-pulse 2.2s infinite;
}
.cjsg-copy h1 {
  margin: 24px 0 19px;
  font-size: clamp(43px, 4.7vw, 65px);
  line-height: 1.09;
  letter-spacing: -0.055em;
  font-weight: 700;
  color: #fff;
}
.cjsg-copy h1 em {
  font-style: normal;
  color: var(--cjsg-lime);
  position: relative;
}
.cjsg-copy h1 em::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #ff7700, rgba(189, 246, 111, 0));
  border-radius: 10px;
  transform-origin: left;
  animation: cjsg-underline 1.2s 0.6s both;
}
.cjsg-copy p {
  max-width: 530px;
  margin: 0;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.9;
}
.cjsg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 31px 0 0;
}
.cjsg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none !important;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s, border-color 0.25s;
}
.cjsg-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.cjsg-btn:hover {
  transform: translateY(-4px);
}
.cjsg-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.cjsg-primary {
  background: #c0f279;
  color: #133a22 !important;
  box-shadow: 0 10px 30px rgba(5, 29, 16, 0.26);
}
.cjsg-primary:hover {
  background: #d5ff99;
  box-shadow: 0 15px 34px rgba(177, 244, 112, 0.24);
}
.cjsg-primary::before {
  content: "";
  position: absolute;
  inset: -80% auto -80% -60%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-25deg);
  animation: cjsg-shine 4.7s ease-in-out infinite;
}
.cjsg-secondary {
  border-color: rgba(213, 255, 191, 0.36);
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(7px);
}
.cjsg-secondary:hover {
  border-color: rgba(220, 255, 191, 0.85);
  background: rgba(255, 255, 255, 0.15);
}
.cjsg-note {
  margin-top: 12px !important;
  font-size: 12px !important;
  color: #ffffff !important;
}
.cjsg-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 30px;
}
.cjsg-point {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 650;
  color: #e6f6e8;
}
.cjsg-point svg {
  color: #bdf17b;
  width: 16px;
  height: 16px;
}
/* Right side: actual logos + transparent portrait + layered animation */
.cjsg-stage {
  height: 500px;
  position: relative;
  width: 100%;
  max-width: 535px;
  justify-self: end;
  animation: cjsg-reveal 1s 0.18s both;
}
.cjsg-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 2%;
  bottom: 2%;
  height: 85%;
  border-radius: 46% 52% 26% 32%;
  background: radial-gradient(circle at 58% 46%, rgba(212, 255, 127, 0.26), rgba(91, 170, 81, 0.2) 40%, rgba(78, 160, 112, 0.06) 66%, transparent 70%);
  filter: blur(6px);
  animation: cjsg-halo 5s ease-in-out infinite alternate;
}
.cjsg-ring {
  position: absolute;
  z-index: 0;
  width: 430px;
  height: 430px;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(212, 255, 158, 0.36);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(160, 246, 119, 0.11), inset 0 0 50px rgba(160, 246, 119, 0.08);
  animation: cjsg-breathe 5s ease-in-out infinite;
}
.cjsg-ring::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  border: 1px dashed rgba(213, 252, 178, 0.3);
  animation: cjsg-spin 26s linear infinite;
}
.cjsg-ring::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9ff7e;
  box-shadow: 0 0 0 7px rgba(194, 245, 105, 0.1), 0 0 30px #b8ff75;
  top: 12%;
  right: 16%;
  animation: cjsg-spark 3s ease-in-out infinite;
}
.cjsg-orbit {
  position: absolute;
  z-index: 0;
  inset: 25px 35px 10px;
  border: 1px solid rgba(198, 255, 156, 0.12);
  border-radius: 50%;
  transform: rotate(-23deg);
}
.cjsg-bubble {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.cjsg-bubble--one {
  width: 26px;
  height: 26px;
  left: 5%;
  top: 30%;
  background: rgba(173, 249, 128, 0.55);
  animation: cjsg-float 5s -1s ease-in-out infinite;
}
.cjsg-bubble--two {
  width: 12px;
  height: 12px;
  right: 0;
  top: 47%;
  background: rgba(255, 121, 0, 0.95);
  box-shadow: 0 0 20px rgba(255, 121, 0, 0.75);
  animation: cjsg-float 4s -2s ease-in-out infinite;
}
.cjsg-bubble--three {
  width: 8px;
  height: 8px;
  left: 15%;
  bottom: 15%;
  background: #c8ff85;
  box-shadow: 0 0 17px #b7ef70;
  animation: cjsg-float 5.5s -0.8s ease-in-out infinite;
}
.cjsg-portrait {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  height: 80%;
  max-width: 100%;
  width: auto;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 30px rgba(0, 40, 20, 0.18));
  animation: cjsg-portrait-enter 1.1s 0.2s both;
}
.cjsg-stage-floor {
  position: absolute;
  z-index: 1;
  bottom: -6px;
  left: 11%;
  width: 78%;
  height: 47px;
  background: radial-gradient(ellipse, rgba(185, 255, 112, 0.4), transparent 70%);
  filter: blur(14px);
}
.cjsg-logo-row {
  position: absolute;
  z-index: 5;
  left: 5%;
  right: 5%;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 63px minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
.cjsg-logo-card {
  height: 70px;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  border: 1px solid #ffffff;
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 15px 38px rgba(1, 33, 15, 0.22);
  backdrop-filter: blur(14px);
  min-width: 0;
  animation: cjsg-float 5.5s ease-in-out infinite;
}
.cjsg-logo-card--cj {
  animation-delay: -2.4s;
}
.cjsg-logo-card--shopify img {
  display: block;
  width: 100%;
  max-width: 158px;
  height: 53px;
  object-fit: contain;
}
.cjsg-logo-card--cj img {
  display: block;
  width: 100%;
  max-width: 175px;
  height: 54px;
  object-fit: contain;
  object-position: center;
}
.cjsg-link-beam {
  position: relative;
  height: 32px;
  margin: 0 -3px;
  z-index: 1;
}
.cjsg-link-beam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed rgba(198, 255, 132, 0.55);
}
.cjsg-link-beam::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 4px;
  border-radius: 6px;
  background: #e4ff9d;
  top: calc(50% - 1px);
  box-shadow: 0 0 12px 4px rgba(176, 255, 99, 0.7);
  animation: cjsg-data 1.8s ease-in-out infinite alternate;
}
.cjsg-link-beam span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.66);
  color: #d8ff96;
  background: #1a6c41;
  box-shadow: 0 0 0 5px rgba(7, 81, 51, 0.72);
  font-size: 18px;
  font-weight: 800;
}
.cjsg-float-tag {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #183e29;
  box-shadow: 0 14px 36px rgba(0, 28, 17, 0.25);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  animation: cjsg-float 5s ease-in-out infinite;
}
.cjsg-float-tag svg {
  width: 17px;
  height: 17px;
  color: #4e9d4b;
  flex: 0 0 auto;
}
.cjsg-float-tag--a {
  left: -3%;
  top: 44%;
  animation-delay: -1s;
}
.cjsg-float-tag--b {
  right: -2%;
  bottom: 13%;
  animation-delay: -3s;
}
.cjsg-float-tag--b svg {
  color: var(--cjsg-orange);
}
.cjsg-stage-caption {
  position: absolute;
  z-index: 3;
  bottom: 4%;
  left: 11%;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d3f4c5;
  background: rgba(6, 45, 27, 0.5);
  border: 1px solid rgba(181, 232, 147, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
@keyframes cjsg-aurora {
  to {
    filter: hue-rotate(11deg);
    transform: scale(1.13) translate(-2%, 2%);
  }
}
@keyframes cjsg-grid {
  to {
    background-position: 58px 58px;
  }
}
@keyframes cjsg-pulse {
  50% {
    box-shadow: 0 0 0 9px rgba(186, 255, 105, 0);
  }
}
@keyframes cjsg-reveal {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cjsg-underline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes cjsg-shine {
  0%,
  24% {
    left: -60%;
  }
  58%,
  100% {
    left: 155%;
  }
}
@keyframes cjsg-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}
@keyframes cjsg-halo {
  to {
    transform: scale(1.1);
    opacity: 0.7;
  }
}
@keyframes cjsg-breathe {
  0%,
  100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}
@keyframes cjsg-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cjsg-spark {
  50% {
    opacity: 0.45;
    transform: scale(0.6);
  }
}
@keyframes cjsg-data {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 23px);
  }
}
@keyframes cjsg-portrait-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 35px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@media (max-width: 1080px) {
  .cjsg-inner {
    gap: 14px;
  }
  .cjsg-copy h1 {
    font-size: clamp(39px, 4.5vw, 56px);
  }
  .cjsg-logo-card {
    padding: 10px;
    height: 76px;
  }
  .cjsg-logo-card--cj img {
    width: 100%;
    max-width: 155px;
    height: 47px;
  }
  .cjsg-stage {
    height: 460px;
  }
  .cjsg-ring {
    width: 380px;
    height: 380px;
  }
}
@media (max-width: 800px) {
  .cjsg-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
    padding: 62px 0 52px;
    width: calc(100% - 48px);
  }
  .cjsg-copy {
    max-width: 670px;
  }
  .cjsg-copy h1 {
    font-size: clamp(42px, 6.5vw, 58px);
  }
  .cjsg-stage {
    height: 475px;
    max-width: 560px;
    justify-self: center;
  }
  .cjsg-logo-row {
    left: 6%;
    right: 6%;
  }
  .cjsg-stage-caption {
    bottom: 3%;
  }
}
@media (max-width: 480px) {
  .cjsg-inner {
    width: calc(100% - 36px);
    padding: 48px 0 42px;
    gap: 30px;
  }
  .cjsg-eyebrow {
    font-size: 10px;
  }
  .cjsg-copy h1 {
    font-size: clamp(36px, 9vw, 46px);
    letter-spacing: -0.045em;
  }
  .cjsg-actions {
    flex-direction: column;
    margin-top: 25px;
  }
  .cjsg-btn {
    width: 100%;
    min-height: 50px;
  }
  .cjsg-points {
    gap: 9px 14px;
    margin-top: 22px;
  }
  .cjsg-point {
    font-size: 11px;
  }
  .cjsg-stage {
    height: 360px;
  }
  .cjsg-ring {
    width: min(94vw, 330px);
    height: min(94vw, 330px);
    top: 54%;
  }
  .cjsg-logo-row {
    left: 0;
    right: 0;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  }
  .cjsg-logo-card {
    height: 62px;
    padding: 8px;
    border-radius: 12px;
    gap: 7px;
  }
  .cjsg-logo-card--shopify img {
    height: 40px;
    max-width: 120px;
  }
  .cjsg-logo-card--cj img {
    width: 100%;
    max-width: 126px;
    height: 39px;
  }
  .cjsg-link-beam span {
    width: 25px;
    height: 25px;
    font-size: 15px;
  }
  .cjsg-portrait {
    height: 79%;
  }
  .cjsg-float-tag {
    font-size: 10px;
    padding: 7px 9px;
    gap: 5px;
    border-radius: 9px;
  }
  .cjsg-float-tag svg {
    width: 14px;
    height: 14px;
  }
  .cjsg-float-tag--a {
    left: -2%;
    top: 49%;
  }
  .cjsg-float-tag--b {
    right: -2%;
    bottom: 11%;
  }
  .cjsg-stage-caption {
    font-size: 8px;
    left: 2%;
    bottom: 4%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjsg-hero::before,
  .cjsg-grid,
  .cjsg-live,
  .cjsg-copy,
  .cjsg-copy h1 em::after,
  .cjsg-primary::before,
  .cjsg-stage,
  .cjsg-stage::before,
  .cjsg-ring,
  .cjsg-ring::before,
  .cjsg-ring::after,
  .cjsg-bubble,
  .cjsg-portrait,
  .cjsg-logo-card,
  .cjsg-link-beam::after,
  .cjsg-float-tag {
    animation: none !important;
  }
  .cjsg-portrait {
    transform: translateX(-50%);
  }
}
.cjsol,
.cjsol * {
  box-sizing: border-box;
}
.cjsol {
  --g: #95bf47;
  --deep: #143b29;
  --body: #405c4b;
  --muted: #526e5a;
  --orange: #ff7900;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 25px 24px 96px;
  background: #fff;
  color: var(--deep);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}
.cjsol::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -320px;
  left: -260px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 191, 71, 0.12), transparent 67%);
  animation: cjsol-aurora 10s ease-in-out infinite alternate;
}
.cjsol::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  bottom: -350px;
  right: -280px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 191, 71, 0.13), transparent 68%);
  animation: cjsol-aurora 10s ease-in-out -4s infinite alternate-reverse;
}
.cjsol__wrap {
  max-width: 1200px;
  margin: auto;
}
.cjsol__heading {
  max-width: 1000px;
  margin: 0 auto 48px;
  text-align: center;
}
.cjsol__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 17px;
  border: 1px solid #d7e9ca;
  border-radius: 100px;
  background: #f0f8eb;
  color: #376b2c;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.035em;
}
.cjsol__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #82b749;
  box-shadow: 0 0 0 5px rgba(149, 191, 71, 0.16);
  animation: cjsol-pulse 2.4s ease-in-out infinite;
}
.cjsol__heading h2 {
  margin: 18px 0 16px;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #123c28;
}
.cjsol__heading h2 span {
  color: #679b3d;
}
.cjsol__heading p {
  max-width: 705px;
  margin: 0 auto;
  color: #405d4a;
  font-size: 16px;
  line-height: 1.85;
}
.cjsol__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.cjsol__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 416px;
  overflow: hidden;
  border: 1px solid #e0ebd9;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(23, 73, 37, 0.055);
  transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.36s, border-color 0.36s;
  animation: cjsol-enter 0.8s both;
  animation-delay: calc(var(--order) * 85ms);
}
.cjsol__card:hover,
.cjsol__card:focus-within {
  transform: translateY(-10px);
  border-color: #a6cf86;
  box-shadow: 0 26px 48px rgba(30, 98, 42, 0.13);
}
.cjsol__card::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  inset: -60% auto -60% -90%;
  width: 34%;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: left 0.8s ease;
}
.cjsol__card:hover::after {
  left: 145%;
}
.cjsol__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 201px;
  overflow: hidden;
  background: radial-gradient(ellipse at 75% 10%, #edf8e4 0%, transparent 55%), linear-gradient(125deg, #f4f9f0, #eaf4e7);
  border-bottom: 1px solid #e5efde;
}
.cjsol__art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
  background-image: linear-gradient(rgba(74, 144, 55, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 55, 0.075) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to top, transparent, #000);
}
.cjsol__art--orange {
  background: radial-gradient(ellipse at 80% 3%, #ffead6 0%, transparent 60%), linear-gradient(120deg, #f9f8ef, #eff6e9);
}
.cjsol__num {
  position: absolute;
  top: 17px;
  left: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #d9e9ce;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.89);
  color: #3a7134;
  font-size: 14px;
  font-weight: 700;
}
.cjsol__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px 26px 27px;
}
.cjsol__content-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}
.cjsol__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  color: #518436;
  background: #eef7e9;
}
.cjsol__icon--orange {
  background: #fff1e5;
  color: #e17320;
}
.cjsol__icon svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjsol__content h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: #173c29;
}
.cjsol__content p {
  margin: 0;
  color: #405c4b;
  font-size: 14px;
  line-height: 1.85;
}
.cjsol__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 19px;
  color: #4f7e38;
  font-size: 14px;
  font-weight: 700;
}
.cjsol__tag::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #92bd58;
  box-shadow: 0 0 0 4px #edf7e6;
}
/* Shared tiny illustration building blocks */
.cjsol__stage {
  position: relative;
  width: calc(100% - 70px);
  max-width: 285px;
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cjsol__window {
  position: absolute;
  border: 1px solid #d4e6ce;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 11px 26px rgba(40, 81, 40, 0.1);
  overflow: hidden;
}
.cjsol__winbar {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-bottom: 1px solid #eaf1e8;
  background: #fafff8;
}
.cjsol__winbar i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d2e5cd;
}
.cjsol__winbar i:first-child {
  background: #f5b17b;
}
.cjsol__mini-line {
  height: 7px;
  border-radius: 10px;
  background: #d8e8d1;
}
.cjsol__mini-line--light {
  background: #edf3ea;
}
.cjsol__status {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #dceacb;
  border-radius: 30px;
  background: #fff;
  color: #3f7838;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(29, 83, 30, 0.11);
  animation: cjsol-float 4s ease-in-out infinite;
}
.cjsol__status::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #8ac64d;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #eff8e9;
}
/* 01 / Product sourcing */
.cjsol__source-window {
  width: 223px;
  height: 115px;
  left: 50%;
  top: 19px;
  transform: translateX(-50%);
}
.cjsol__products {
  display: flex;
  gap: 8px;
  padding: 12px;
}
.cjsol__product {
  flex: 1;
  min-width: 0;
  height: 67px;
  border: 1px solid #e7eee4;
  border-radius: 7px;
  background: #fafcf9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.cjsol__product svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #6b9b55;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjsol__product:nth-child(2) svg {
  stroke: #e28e46;
}
.cjsol__product:nth-child(3) svg {
  stroke: #568c71;
}
.cjsol__product i {
  display: block;
  height: 5px;
  width: 26px;
  border-radius: 8px;
  background: #deebd8;
}
.cjsol__scan {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 27%;
  width: 46%;
  height: 82px;
  border: 1px solid rgba(135, 195, 79, 0.48);
  background: linear-gradient(180deg, rgba(149, 191, 71, 0), rgba(149, 191, 71, 0.12));
  pointer-events: none;
  animation: cjsol-scan 3.8s ease-in-out infinite alternate;
}
.cjsol__source-status {
  bottom: -1px;
  right: -7px;
  animation-delay: -1s;
}
/* 02 / Product listing */
.cjsol__listing-left {
  width: 126px;
  height: 103px;
  left: 0;
  top: 19px;
  transform: rotate(-6deg);
}
.cjsol__listing-right {
  width: 126px;
  height: 103px;
  right: 0;
  top: 19px;
  transform: rotate(6deg);
}
.cjsol__listing-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 9px;
  color: #214b30;
  font-size: 14px;
  font-weight: 700;
}
.cjsol__brand-cj,
.cjsol__brand-s {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.cjsol__brand-cj {
  background: #ff7900;
}
.cjsol__brand-s {
  background: #95bf47;
}
.cjsol__listing-left .cjsol__mini-line,
.cjsol__listing-right .cjsol__mini-line {
  margin: 2px 10px 0;
}
.cjsol__listing-beam {
  position: absolute;
  z-index: 2;
  left: 44%;
  top: 69px;
  width: 16%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #8db74f 0 8px, transparent 8px 13px);
}
.cjsol__listing-beam::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #91c85c;
  box-shadow: 0 0 0 6px rgba(149, 191, 71, 0.18), 0 0 15px #a9d26b;
  animation: cjsol-data 1.9s ease-in-out infinite alternate;
}
.cjsol__listing-status {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: cjsol-listing-float 4s ease-in-out infinite;
}
/* 03 / Sync */
.cjsol__sync-main {
  width: 216px;
  height: 123px;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
}
.cjsol__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf2e9;
  font-size: 14px;
  font-weight: 700;
  color: #355c3d;
}
.cjsol__order:last-child {
  border-bottom: 0;
}
.cjsol__order b {
  display: block;
  min-width: 54px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #edf8e9;
  color: #4f8c39;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.cjsol__order:nth-child(2) {
  animation: cjsol-row 3.7s infinite;
}
.cjsol__sync-arrows {
  position: absolute;
  z-index: 2;
  right: -21px;
  top: 57px;
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 1px solid #cce5b9;
  background: #fff;
  box-shadow: 0 6px 15px rgba(43, 86, 48, 0.15);
}
.cjsol__sync-arrows svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #5e9a3c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cjsol-syncturn 4s linear infinite;
}
/* 04 / Fulfillment */
.cjsol__ship-box {
  width: 105px;
  height: 105px;
  position: absolute;
  left: 25px;
  top: 15px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(150deg, #fff, #f5f8f0);
  border: 1px solid #d6e8c9;
  box-shadow: 0 15px 28px rgba(29, 78, 42, 0.12);
  animation: cjsol-float 5s infinite;
}
.cjsol__ship-box svg {
  width: 68px;
  height: 68px;
  fill: none;
  stroke: #84ae53;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cjsol__route {
  position: absolute;
  left: 116px;
  right: 8px;
  top: 36px;
  height: 90px;
  overflow: visible;
}
.cjsol__route path {
  stroke: #86b861;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 4 8;
  animation: cjsol-dash 3s linear infinite;
}
.cjsol__route circle {
  fill: #ff7900;
  filter: drop-shadow(0 0 4px rgba(255, 121, 0, 0.3));
}
.cjsol__truck {
  position: absolute;
  right: 7px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 51px;
  height: 48px;
  border: 1px solid #d4e6c9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 9px 18px rgba(36, 82, 39, 0.12);
  animation: cjsol-truck 4s ease-in-out infinite;
}
.cjsol__truck svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: #5a973b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 05 / Warehousing */
.cjsol__network {
  position: absolute;
  inset: 9px 5px;
  width: calc(100% - 10px);
  height: calc(100% - 18px);
  overflow: visible;
}
.cjsol__network path {
  fill: none;
  stroke: #91be72;
  stroke-width: 2;
  stroke-dasharray: 4 7;
  animation: cjsol-dash 4s linear infinite;
}
.cjsol__network circle {
  fill: #92ba59;
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 3px 4px rgba(55, 100, 42, 0.2));
}
.cjsol__network circle.cjsol__orange-dot {
  fill: #ff7900;
}
.cjsol__node-tag {
  position: absolute;
  z-index: 2;
  padding: 5px 10px;
  border: 1px solid #e0ead6;
  border-radius: 10px;
  background: #fff;
  color: #3b6e3e;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(31, 75, 37, 0.1);
  animation: cjsol-float 4.7s ease-in-out infinite;
}
.cjsol__node-tag--a {
  top: 4px;
  left: 19%;
}
.cjsol__node-tag--b {
  top: 65px;
  right: 0;
  animation-delay: -2s;
}
.cjsol__node-tag--c {
  bottom: 0;
  left: 26%;
  animation-delay: -1s;
}
/* 06 / branding & POD */
.cjsol__brand-box {
  position: absolute;
  left: 50%;
  top: 19px;
  width: 130px;
  height: 104px;
  transform: translateX(-50%) rotate(-6deg);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #fff9f3, #ffe7d2);
  border: 2px solid #f3bf92;
  border-radius: 9px;
  box-shadow: 8px 12px 0 #fbd1aa, 0 19px 22px rgba(143, 95, 47, 0.15);
  animation: cjsol-brand-wiggle 5s ease-in-out infinite;
}
.cjsol__brand-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 100%;
  background: rgba(255, 121, 0, 0.18);
  transform: translateX(-50%);
}
.cjsol__brand-box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;
  height: 19px;
  background: rgba(255, 121, 0, 0.16);
}
.cjsol__brand-label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 9px 13px;
  border-radius: 8px;
  background: #fff;
  color: #a95412;
  border: 1px solid #f4c899;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 13px rgba(139, 77, 32, 0.1);
}
.cjsol__brand-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff9a51;
  box-shadow: 0 0 0 8px rgba(255, 121, 0, 0.1);
  animation: cjsol-pulse 3s infinite;
}
.cjsol__brand-dot--one {
  left: 12px;
  top: 21px;
}
.cjsol__brand-dot--two {
  right: 5px;
  bottom: 15px;
  animation-delay: -1.5s;
}
/* Bottom CTA banner */
.cjsol__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 25px 29px;
  border: 1px solid #dcebd4;
  border-radius: 20px;
  background: linear-gradient(110deg, #f0f8e9 0%, #fff 72%);
  overflow: hidden;
}
.cjsol__footer::before {
  content: "";
  position: absolute;
  right: 26%;
  top: -135px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 191, 71, 0.18), transparent 67%);
  pointer-events: none;
  animation: cjsol-aurora 7s ease-in-out infinite alternate;
}
.cjsol__footer-copy {
  position: relative;
  z-index: 1;
}
.cjsol__footer h3 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  color: #173a28;
}
.cjsol__footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #45624c;
}
.cjsol__cta {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  overflow: hidden;
  border-radius: 12px;
  background: #679e3d;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 10px 22px rgba(87, 144, 57, 0.17);
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.cjsol__cta:hover {
  background: #4d832e;
  transform: translateY(-3px);
  box-shadow: 0 14px 27px rgba(87, 144, 57, 0.25);
}
.cjsol__cta::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  width: 38%;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.56), transparent);
  animation: cjsol-shine 5s ease-in-out infinite;
}
.cjsol__cta svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjsol__cta:focus-visible {
  outline: 3px solid #ff7900;
  outline-offset: 4px;
}
@keyframes cjsol-aurora {
  to {
    transform: translate(55px, 36px) scale(1.16);
  }
}
@keyframes cjsol-pulse {
  50% {
    box-shadow: 0 0 0 11px rgba(149, 191, 71, 0);
  }
}
@keyframes cjsol-enter {
  from {
    opacity: 0;
    transform: translateY(23px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cjsol-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes cjsol-scan {
  0% {
    transform: translateX(-41%);
    opacity: 0.28;
  }
  100% {
    transform: translateX(47%);
    opacity: 1;
  }
}
@keyframes cjsol-data {
  to {
    left: calc(100% - 10px);
  }
}
@keyframes cjsol-listing-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes cjsol-row {
  0%,
  100% {
    background: #fff;
  }
  50% {
    background: #f0faea;
  }
}
@keyframes cjsol-syncturn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cjsol-dash {
  to {
    stroke-dashoffset: -48;
  }
}
@keyframes cjsol-truck {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-13px);
  }
}
@keyframes cjsol-brand-wiggle {
  0%,
  100% {
    transform: translateX(-50%) rotate(-6deg);
  }
  50% {
    transform: translateX(-50%) rotate(-2deg) translateY(-6px);
  }
}
@keyframes cjsol-shine {
  0%,
  20% {
    left: -70%;
  }
  60%,
  100% {
    left: 155%;
  }
}
@media (max-width: 1040px) {
  .cjsol__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .cjsol {
    padding: 66px 18px 72px;
  }
  .cjsol__heading {
    margin-bottom: 33px;
  }
  .cjsol__heading h2 {
    font-size: 34px;
  }
  .cjsol__heading p {
    font-size: 14px;
  }
  .cjsol__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cjsol__card {
    min-height: 0;
  }
  .cjsol__art {
    height: 205px;
  }
  .cjsol__content {
    min-height: 193px;
    padding: 22px;
  }
  .cjsol__footer {
    padding: 23px;
    align-items: stretch;
    flex-direction: column;
    gap: 19px;
  }
  .cjsol__cta {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjsol::before,
  .cjsol::after,
  .cjsol__pulse,
  .cjsol__card,
  .cjsol__scan,
  .cjsol__status,
  .cjsol__listing-beam::after,
  .cjsol__order,
  .cjsol__sync-arrows svg,
  .cjsol__route path,
  .cjsol__network path,
  .cjsol__truck,
  .cjsol__brand-box,
  .cjsol__brand-dot,
  .cjsol__node-tag,
  .cjsol__footer::before,
  .cjsol__cta::before {
    animation: none !important;
  }
  .cjsol__card,
  .cjsol__card *,
  .cjsol__cta {
    transition: none !important;
  }
  .cjsol__card:hover {
    transform: none;
  }
}
.cjhw3,
.cjhw3 * {
  box-sizing: border-box;
}
.cjhw3 {
  --cjhw3-green: #78a943;
  --cjhw3-lime: #95bf47;
  --cjhw3-orange: #ff7900;
  --cjhw3-ink: #153727;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  background: #fff;
  color: var(--cjhw3-ink);
  font: 400 14px/1.7 Inter, Arial, Helvetica, sans-serif;
  padding: 30px 24px 90px;
}
.cjhw3::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -240px;
  top: -290px;
  width: 590px;
  height: 590px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 191, 71, 0.13), transparent 68%);
  animation: cjhw3-glow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.cjhw3__wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.cjhw3__head {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 54px;
}
.cjhw3__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 99px;
  background: #eef8e7;
  border: 1px solid #dbeecf;
  color: #386c29;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
}
.cjhw3__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #84bc43;
  box-shadow: 0 0 0 5px #dcefcf;
  animation: cjhw3-pulse 2.5s ease-in-out infinite;
}
.cjhw3 h2 {
  font: 700 clamp(32px, 3.7vw, 40px)/1.15 Inter, Arial, Helvetica, sans-serif;
  letter-spacing: -0.04em;
  color: #123725;
  margin: 17px 0 15px;
}
.cjhw3 h2 span {
  color: #669a3e;
}
.cjhw3__head p {
  color: #415b4b;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}
/* Animated path behind five nodes */
.cjhw3__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  padding-top: 67px;
  align-items: stretch;
}
.cjhw3__grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 23px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: repeating-linear-gradient(90deg, #cfe7bd 0 10px, transparent 10px 18px);
}
.cjhw3__runner {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 19px;
  left: 9%;
  width: 90px;
  height: 11px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #a0d764 54%, transparent);
  filter: drop-shadow(0 0 7px #89be4e);
  animation: cjhw3-flow 5s linear infinite;
}
/* Step cards */
.cjhw3__card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #dfebd8;
  border-radius: 18px;
  box-shadow: 0 11px 28px rgba(23, 65, 35, 0.065);
  transition: transform 0.36s ease, box-shadow 0.36s ease, border-color 0.36s ease;
  animation: cjhw3-in 0.76s both;
  animation-delay: calc(var(--step) * 125ms);
}
.cjhw3__card:hover {
  transform: translateY(-12px);
  border-color: #a9cf92;
  box-shadow: 0 26px 49px rgba(35, 92, 43, 0.16);
}
.cjhw3__node {
  position: absolute;
  z-index: 2;
  top: -67px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 5px solid #fff;
  border-radius: 15px;
  background: #e8f6db;
  color: #3e7731;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 1px #cce2bf, 0 7px 23px rgba(24, 68, 37, 0.12);
  transition: background 0.3s, transform 0.3s;
}
.cjhw3__card:hover .cjhw3__node {
  background: #95bf47;
  color: #fff;
  transform: translateX(-50%) rotate(6deg) scale(1.12);
}
/* Images */
.cjhw3__photo {
  position: relative;
  height: 174px;
  width: 100%;
  overflow: hidden;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(135deg, #e9f3e5, #d6e9ce);
}
.cjhw3__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s;
  filter: saturate(0.93);
}
.cjhw3__card:hover .cjhw3__photo img {
  transform: scale(1.13);
  filter: saturate(1.1);
}
.cjhw3__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12, 49, 27, 0.3));
  pointer-events: none;
}
.cjhw3__chip {
  position: absolute;
  z-index: 2;
  left: 13px;
  bottom: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #285a31;
  backdrop-filter: blur(7px);
}
.cjhw3__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #80af40;
  border-radius: 50%;
}
/* Card content */
.cjhw3__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 23px 19px 26px;
}
.cjhw3__content::before {
  content: "";
  position: absolute;
  left: 19px;
  right: 19px;
  top: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #95bf47, #ff7900);
  transition: transform 0.4s;
}
.cjhw3__card:hover .cjhw3__content::before {
  transform: scaleX(1);
}
.cjhw3__step {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: #56843d;
  margin-bottom: 8px;
}
.cjhw3 h3 {
  font: 700 19px/1.32 Inter, Arial, Helvetica, sans-serif;
  color: #163927;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.cjhw3__content p {
  font-size: 14px;
  line-height: 1.73;
  color: #4b6251;
  margin: 0;
}
.cjhw3__card:nth-of-type(5) .cjhw3__node {
  background: #fff1e6;
  color: #d96c13;
  box-shadow: 0 0 0 1px #f1d8bf, 0 7px 23px rgba(179, 87, 26, 0.11);
}
.cjhw3__card:nth-of-type(5):hover .cjhw3__node {
  background: #ff7900;
  color: #fff;
}
.cjhw3__card:nth-of-type(5) .cjhw3__chip::before {
  background: #ff7900;
}
/* CTA */
.cjhw3__cta {
  position: relative;
  overflow: hidden;
  margin-top: 38px;
  padding: 28px 30px;
  border: 1px solid #d9eacb;
  border-radius: 18px;
  background: linear-gradient(105deg, #f0f8ea, #fff 70%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.cjhw3__cta::after {
  content: "";
  position: absolute;
  right: 13%;
  bottom: -125px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(149, 191, 71, 0.2), transparent 70%);
  pointer-events: none;
}
.cjhw3__cta strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #173b29;
}
.cjhw3__cta p {
  font-size: 14px;
  color: #49624e;
  margin: 7px 0 0;
  max-width: 680px;
}
.cjhw3__button {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 51px;
  padding: 11px 22px;
  border-radius: 11px;
  background: #20734a;
  color: #fff !important;
  font: 700 14px/1.3 Inter, Arial, Helvetica, sans-serif;
  text-decoration: none !important;
  overflow: hidden;
  box-shadow: 0 10px 23px rgba(75, 139, 51, 0.17);
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
}
.cjhw3__button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjhw3__button:hover {
  background: #588e2d;
  transform: translateY(-3px);
  box-shadow: 0 15px 27px rgba(75, 139, 51, 0.24);
}
.cjhw3__button::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -55%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-23deg);
  animation: cjhw3-shine 4.8s ease-in-out infinite;
}
.cjhw3__button:focus-visible {
  outline: 3px solid #ff7900;
  outline-offset: 4px;
}
/* Animations */
@keyframes cjhw3-glow {
  to {
    transform: translate(-70px, 80px) scale(1.15);
  }
}
@keyframes cjhw3-pulse {
  50% {
    box-shadow: 0 0 0 11px rgba(149, 191, 71, 0);
  }
}
@keyframes cjhw3-flow {
  from {
    left: 8%;
  }
  to {
    left: 85%;
  }
}
@keyframes cjhw3-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cjhw3-shine {
  0%,
  20% {
    left: -55%;
  }
  60%,
  100% {
    left: 155%;
  }
}
/* Tablet */
@media (max-width: 1100px) {
  .cjhw3__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 16px;
    padding-top: 0;
  }
  .cjhw3__grid::before,
  .cjhw3__runner {
    display: none;
  }
  .cjhw3__node {
    top: 12px;
    left: 13px;
    transform: none;
    width: 43px;
    height: 43px;
    border: 3px solid #fff;
  }
  .cjhw3__card:hover .cjhw3__node {
    transform: rotate(6deg) scale(1.1);
  }
  .cjhw3__chip {
    left: auto;
    right: 13px;
  }
  .cjhw3__photo {
    height: 195px;
  }
}
@media (max-width: 760px) {
  .cjhw3 {
    padding: 70px 20px;
  }
  .cjhw3__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cjhw3__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .cjhw3__button {
    width: 100%;
  }
}
@media (max-width: 570px) {
  .cjhw3 {
    padding: 57px 17px 65px;
  }
  .cjhw3__head {
    margin-bottom: 34px;
  }
  .cjhw3 h2 {
    font-size: 32px;
  }
  .cjhw3__head p {
    font-size: 14px;
  }
  .cjhw3__grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .cjhw3__photo {
    height: 205px;
  }
  .cjhw3__content {
    padding: 20px;
  }
  .cjhw3__cta {
    margin-top: 29px;
    padding: 23px 19px;
  }
  .cjhw3__cta strong {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjhw3::before,
  .cjhw3__eyebrow::before,
  .cjhw3__runner,
  .cjhw3__card,
  .cjhw3__button::after {
    animation: none !important;
  }
  .cjhw3__card,
  .cjhw3__card *,
  .cjhw3__button {
    transition: none !important;
  }
  .cjhw3__card:hover {
    transform: none;
  }
}
.cjstage,
.cjstage * {
  box-sizing: border-box;
}
.cjstage {
  --shopify: #95bf47;
  --forest: #133b25;
  --dark: #0c2e1c;
  --cj-orange: #ff7900;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 94px 24px 86px;
  background: linear-gradient(132deg, #086343 0%, #0e6849 50%, #071b14 100%);
  color: var(--dark);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}
/* Animated background */
.cjstage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.38;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
  background-size: 23px 23px;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.cjstage::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  width: 610px;
  height: 610px;
  top: -340px;
  right: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 67%);
  animation: cjstage-glow 10s ease-in-out infinite alternate;
}
.cjstage__wrap {
  max-width: 1200px;
  margin: 0 auto;
}
/* Header */
.cjstage__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 36px;
}
.cjstage__intro {
  max-width: 1000px;
}
.cjstage__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid rgba(22, 70, 31, 0.18);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.51);
  color: #23512b;
  font-size: 14px;
  font-weight: 700;
}
.cjstage__label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cj-orange);
  box-shadow: 0 0 0 5px rgba(255, 121, 0, 0.13);
}
.cjstage h2 {
  color: #ff7700;
  font-size: clamp(32px, 3.9vw, 51px);
  line-height: 1.14;
  letter-spacing: -0.042em;
  font-weight: 700;
  margin: 18px 0 15px;
}
.cjstage h2 span {
  color: #fff;
  text-shadow: 0 1px 4px rgba(12, 55, 19, 0.12);
}
.cjstage__intro p {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.75;
  max-width: 730px;
}
/* Progress animation */
.cjstage__journey {
  min-width: 205px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #285331;
}
.cjstage__journey span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24);
}
.cjstage__journey b {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(16, 78, 33, 0.7));
  position: relative;
  overflow: hidden;
}
.cjstage__journey b::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: rgba(255, 255, 255, 0.9);
  animation: cjstage-progress 3s linear infinite;
}
.cjstage__journey .cjstage__dot--last {
  background: var(--cj-orange);
  box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.18);
}
/* Cards */
.cjstage__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cjstage__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 65, 25, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  animation: cjstage-rise 0.7s both;
  animation-delay: calc(var(--order) * 120ms);
}
.cjstage__card:hover {
  transform: translateY(-11px);
  border-color: rgba(20, 86, 37, 0.5);
  box-shadow: 0 28px 55px rgba(16, 68, 26, 0.23);
}
/* Photos */
.cjstage__media {
  position: relative;
  width: 100%;
  height: 245px;
  overflow: hidden;
  background: #dce9d1;
}
.cjstage__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1), filter 0.6s;
}
.cjstage__card:hover .cjstage__media img {
  transform: scale(1.09);
  filter: saturate(1.1);
}
.cjstage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 45, 20, 0.06) 5%, transparent 53%, rgba(11, 35, 19, 0.43));
}
.cjstage__index {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 28px;
  padding: 6px 13px;
  background: rgba(255, 255, 255, 0.96);
  color: #20522a;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.09);
}
.cjstage__index em {
  color: #d86a18;
  font-style: normal;
}
.cjstage__image-note {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 19px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cjstage__image-note::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--cj-orange);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
/* Card copy */
.cjstage__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 25px 25px;
  position: relative;
}
.cjstage__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  width: 52px;
  height: 4px;
  background: var(--cj-orange);
  border-radius: 0 0 4px 4px;
  transition: width 0.35s;
}
.cjstage__card:hover .cjstage__content::before {
  width: calc(100% - 50px);
}
.cjstage__subtitle {
  color: #52852e;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cjstage h3 {
  margin: 0 0 11px;
  color: #143922;
  font-size: 23px;
  line-height: 1.27;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.cjstage__content p {
  color: #4c6354;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}
.cjstage__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 23px;
}
.cjstage__features span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: #f0f8eb;
  border: 1px solid #e0ecd7;
  color: #345e36;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}
.cjstage__features span::before {
  content: "✓";
  color: #6a9f3c;
  font-weight: 700;
}
.cjstage__card--brand .cjstage__features span:last-child::before {
  color: var(--cj-orange);
}
/* CTA footer */
.cjstage__foot {
  margin-top: 28px;
  padding: 25px 28px;
  border-radius: 17px;
  background: #143a25;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 16px 40px rgba(12, 60, 22, 0.13);
  position: relative;
  overflow: hidden;
}
.cjstage__foot::after {
  content: "";
  position: absolute;
  width: 290px;
  height: 290px;
  top: -175px;
  right: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(149, 191, 71, 0.24), transparent 68%);
  pointer-events: none;
  animation: cjstage-glow 7s ease-in-out infinite alternate;
}
.cjstage__foot-copy {
  position: relative;
  z-index: 1;
}
.cjstage__foot strong {
  display: block;
  color: white;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}
.cjstage__foot p {
  color: #d4e8d4;
  font-size: 14px;
  line-height: 1.65;
  margin: 6px 0 0;
}
.cjstage__btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 21px;
  min-height: 50px;
  border-radius: 11px;
  background: #bff078;
  color: #143820 !important;
  text-decoration: none !important;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.25s, background 0.25s;
}
.cjstage__btn:hover {
  background: #d4ff97;
  transform: translateY(-3px);
}
.cjstage__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.cjstage__btn::before {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -70%;
  width: 40%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  animation: cjstage-shine 5s infinite;
}
.cjstage__btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Animations */
@keyframes cjstage-glow {
  to {
    transform: translate(-36px, 44px) scale(1.15);
    opacity: 0.6;
  }
}
@keyframes cjstage-rise {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cjstage-progress {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(430%);
  }
}
@keyframes cjstage-shine {
  0%,
  22% {
    left: -70%;
  }
  58%,
  100% {
    left: 170%;
  }
}
/* Tablet */
@media (max-width: 1020px) {
  .cjstage {
    padding: 76px 24px;
  }
  .cjstage__journey {
    display: none;
  }
  .cjstage__cards {
    gap: 15px;
  }
  .cjstage__media {
    height: 220px;
  }
  .cjstage__content {
    padding: 23px 20px;
  }
  .cjstage h3 {
    font-size: 21px;
  }
}
/* Mobile */
@media (max-width: 760px) {
  .cjstage {
    padding: 62px 18px;
  }
  .cjstage__head {
    margin-bottom: 26px;
  }
  .cjstage__cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cjstage__card {
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
  }
  .cjstage__media {
    height: 245px;
  }
  .cjstage__content {
    padding: 25px;
  }
  .cjstage__foot {
    flex-direction: column;
    align-items: flex-start;
    padding: 23px;
  }
  .cjstage__btn {
    width: 100%;
  }
}
@media (max-width: 400px) {
  .cjstage h2 {
    font-size: 32px;
  }
  .cjstage__intro p {
    font-size: 14px;
  }
  .cjstage__media {
    height: 215px;
  }
  .cjstage__content {
    padding: 21px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cjstage::after,
  .cjstage__journey b::after,
  .cjstage__card,
  .cjstage__foot::after,
  .cjstage__btn::before {
    animation: none !important;
  }
  .cjstage__card,
  .cjstage__media img,
  .cjstage__btn,
  .cjstage__content::before {
    transition: none !important;
  }
  .cjstage__card:hover {
    transform: none;
  }
  /* Shopify — Soft Sage Green Theme */
  .cjstage {
    --shopify: #719c69;
    --forest: #244b38;
    --dark: #203b2d;
    --cj-orange: #d97c42;
    background: linear-gradient(125deg, #f7faf5 0%, #edf5e9 52%, #e5f0e4 100%);
  }
  .cjstage h2 {
    color: #1f4330;
  }
  .cjstage h2 span {
    color: #55845e;
    text-shadow: none;
  }
  .cjstage__intro p {
    color: #486454;
  }
  .cjstage__card {
    border-color: #e4ece2;
    box-shadow: 0 14px 38px rgba(31, 71, 46, 0.065);
  }
  .cjstage__card:hover {
    border-color: #b2cab0;
    box-shadow: 0 25px 48px rgba(31, 71, 46, 0.12);
  }
  .cjstage__subtitle {
    color: #527f58;
  }
  .cjstage h3 {
    color: #234533;
  }
  .cjstage__content p {
    color: #52695a;
  }
  .cjstage__features span {
    background: #f2f7f0;
    border-color: #e4ece1;
    color: #42694b;
  }
  .cjstage__foot {
    background: #274e3b;
  }
  .cjstage__btn {
    background: #d4e8bd;
    color: #214831 !important;
  }
  .cjstage__btn:hover {
    background: #e4f0d4;
  }
}
.cj678,
.cj678 * {
  box-sizing: border-box;
}
.cj678 {
  --ink: #19382a;
  --mute: #4c6656;
  --sage: #e9f2e7;
  --line: #dce8db;
  --green: #6b9a58;
  --orange: #e58b53;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f8fbf7 48%, #fff 100%);
  color: var(--ink);
  font: 400 14px/1.75 Inter, Arial, Helvetica, sans-serif;
  padding: 88px 24px 94px;
}
.cj678 a {
  font-family: inherit;
}
.cj678__shell {
  max-width: 1200px;
  margin: 0 auto;
}
.cj678__intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 42px;
}
.cj678__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #3c7546;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.065em;
}
.cj678__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8db87f;
  box-shadow: 0 0 0 5px #e5f1e0;
  animation: cj678-pulse 3s infinite;
}
.cj678 h2 {
  font: 700 clamp(32px, 3.6vw, 40px)/1.16 Inter, Arial, Helvetica, sans-serif;
  letter-spacing: -0.035em;
  margin: 15px 0;
  color: #193c2b;
}
.cj678 h2 span {
  color: #5b8c5b;
}
.cj678__intro p {
  font-size: 16px;
  color: var(--mute);
  margin: 0;
}
.cj678__nav {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.cj678__nav a {
  color: #3b5f46 !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border: 1px solid #d9e7d8;
  border-radius: 100px;
  background: #fff;
  transition: background 0.2s, transform 0.2s;
}
.cj678__nav a:hover {
  background: #edf6ea;
  transform: translateY(-2px);
}
.cj678__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  padding: 64px 0;
  scroll-margin-top: 110px;
}
.cj678__panel + .cj678__panel {
  border-top: 1px solid #e1ebe0;
}
.cj678__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #3b7448;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cj678__no strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: #e9f3e6;
  border-radius: 12px;
  color: #396847;
  font-size: 16px;
}
.cj678 h3 {
  font: 700 clamp(29px, 3.15vw, 30px)/1.19 Inter, Arial, Helvetica, sans-serif;
  letter-spacing: -0.036em;
  color: #1b3c2b;
  margin: 18px 0 16px;
}
.cj678__copy > p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 22px;
  max-width: 550px;
}
.cj678__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0 28px;
}
.cj678__point {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #34543c;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}
.cj678__check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #e4f0df;
  color: #4e8759;
  font-weight: 700;
  font-size: 14px;
}
.cj678__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.cj678__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 21px;
  color: #fff !important;
  background: #447a4e;
  text-decoration: none !important;
  border-radius: 11px;
  font: 700 14px/1.4 Inter, Arial, Helvetica, sans-serif;
  box-shadow: 0 10px 26px rgba(45, 101, 65, 0.12);
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
}
.cj678__btn:hover {
  background: #2c623e;
  transform: translateY(-3px);
  box-shadow: 0 17px 28px rgba(45, 101, 65, 0.2);
}
.cj678__btn::after {
  content: "";
  position: absolute;
  inset: -70% auto -70% -60%;
  width: 32%;
  transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: cj678-shine 5.5s infinite;
}
.cj678__btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cj678__textlink {
  font-size: 14px;
  font-weight: 700;
  color: #44724d !important;
  text-decoration: underline !important;
  text-underline-offset: 5px;
}
.cj678 a:focus-visible {
  outline: 3px solid #e58b53;
  outline-offset: 4px;
}
/* Picture compositions */
.cj678__visual {
  position: relative;
  min-width: 0;
  height: 450px;
  border-radius: 26px;
  background: linear-gradient(145deg, #eaf3e6, #f2f4ed);
  border: 1px solid #dce9d9;
  box-shadow: 0 22px 60px rgba(29, 70, 39, 0.07);
}
.cj678__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 240px;
  height: 240px;
  right: -32px;
  top: -35px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 196, 121, 0.3), transparent 70%);
  animation: cj678-breathe 6s ease-in-out infinite alternate;
}
.cj678__mainpic {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 19px;
  background: #d9e8d6;
}
.cj678__mainpic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cj678__visual:hover .cj678__mainpic img {
  transform: scale(1.065);
}
.cj678__mainpic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 44, 25, 0.3), transparent 55%);
  pointer-events: none;
}
.cj678__picture-label {
  position: absolute;
  z-index: 3;
  left: 32px;
  bottom: 34px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.cj678__float {
  position: absolute;
  z-index: 3;
  padding: 12px 15px;
  border: 1px solid #e2eee0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 15px 33px rgba(20, 68, 42, 0.14);
  color: #2b5a39;
  font-size: 14px;
  font-weight: 700;
  animation: cj678-float 5s ease-in-out infinite;
}
.cj678__float::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #85b76f;
  box-shadow: 0 0 0 4px #e6f2df;
}
.cj678__float--top {
  top: 0;
  right: -10px;
}
.cj678__float--bottom {
  bottom: 65px;
  left: -40px;
  animation-delay: -2.5s;
}
.cj678__mini {
  position: absolute;
  z-index: 2;
  right: -18px;
  bottom: 38px;
  width: 146px;
  height: 158px;
  border: 6px solid #fff;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(17, 60, 32, 0.17);
  transform: rotate(7deg);
  transition: transform 0.4s;
}
.cj678__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cj678__visual:hover .cj678__mini {
  transform: rotate(0) translateY(-7px);
}
/* Fulfillment scene */
.cj678__visual--warehouse {
  background: #e6efe6;
}
.cj678__route {
  position: absolute;
  z-index: 3;
  left: 31px;
  right: 31px;
  bottom: 32px;
  padding: 15px 14px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(17, 57, 30, 0.18);
  backdrop-filter: blur(8px);
}
.cj678__route-title {
  color: #315a3e;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cj678__route-steps {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: #325b3c;
  font-size: 14px;
  font-weight: 700;
}
.cj678__route-line {
  position: relative;
  height: 2px;
  background: #bdd7b4;
  overflow: visible;
}
.cj678__route-line::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e18c57;
  box-shadow: 0 0 0 4px rgba(225, 140, 87, 0.18);
  animation: cj678-route 2.8s linear infinite;
}
/* brand panel */
.cj678__visual--brand {
  background: #f3ede8;
}
.cj678__brand-chip {
  position: absolute;
  z-index: 4;
  bottom: 31px;
  left: 33px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  background: #fff;
  padding: 9px 15px;
  color: #345b43;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(39, 68, 44, 0.14);
}
.cj678__brand-chip span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d98d60;
}
.cj678__service-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 23px 0 26px;
}
.cj678__service {
  padding: 15px 12px;
  background: #f5f9f3;
  border: 1px solid #e1ece0;
  border-radius: 13px;
}
.cj678__service strong {
  display: block;
  color: #31543c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.cj678__service small {
  display: block;
  color: #63796a;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 5px;
}
.cj678__service i {
  display: block;
  width: 26px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 100px;
  background: #8fb481;
}
.cj678__service:last-child i {
  background: #df9868;
}
/* final banner */
.cj678__bottom {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 8px;
  padding: 27px 33px;
  border-radius: 20px;
  background: #244b38;
  color: #fff;
}
.cj678__bottom::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -185px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(210, 244, 199, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(210, 244, 199, 0.035), 0 0 0 95px rgba(210, 244, 199, 0.023);
  pointer-events: none;
}
.cj678__bottom strong {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}
.cj678__bottom p {
  color: #dcece0;
  font-size: 14px;
  line-height: 1.7;
  margin: 7px 0 0;
}
.cj678__bottom .cj678__btn {
  z-index: 1;
  flex-shrink: 0;
  background: #d4ebc5;
  color: #1f4a33 !important;
}
.cj678__bottom .cj678__btn:hover {
  background: #e4f5d6;
}
@keyframes cj678-pulse {
  50% {
    box-shadow: 0 0 0 10px rgba(139, 192, 111, 0);
  }
}
@keyframes cj678-breathe {
  to {
    transform: translate(-35px, 30px) scale(1.12);
    opacity: 0.66;
  }
}
@keyframes cj678-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}
@keyframes cj678-shine {
  0%,
  22% {
    left: -60%;
  }
  55%,
  100% {
    left: 160%;
  }
}
@keyframes cj678-route {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 8px);
  }
}
@media (max-width: 1000px) {
  .cj678__panel {
    gap: 30px;
  }
  .cj678__visual {
    height: 395px;
  }
  .cj678__mini {
    width: 115px;
    height: 130px;
  }
  .cj678__service-row {
    grid-template-columns: 1fr 1fr;
  }
  .cj678__service:last-child {
    grid-column: -1;
  }
}
@media (max-width: 760px) {
  .cj678 {
    padding: 63px 18px 70px;
  }
  .cj678__intro {
    margin-bottom: 20px;
  }
  .cj678__panel {
    grid-template-columns: 1fr;
    padding: 47px 0;
    gap: 29px;
  }
  .cj678__visual {
    height: 395px;
    max-width: 590px;
    width: 100%;
    margin: 0 auto;
  }
  .cj678__panel--warehouse .cj678__visual {
    order: 2;
  }
  .cj678__panel--warehouse .cj678__copy {
    order: 1;
  }
  .cj678__bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 23px;
  }
  .cj678__bottom .cj678__btn {
    width: 100%;
  }
}
@media (max-width: 440px) {
  .cj678 {
    padding: 53px 16px 60px;
  }
  .cj678 h2 {
    font-size: 32px;
  }
  .cj678 h3 {
    font-size: 30px;
  }
  .cj678__intro p {
    font-size: 14px;
  }
  .cj678__points {
    grid-template-columns: 1fr;
  }
  .cj678__visual {
    height: 325px;
    padding: 12px;
    border-radius: 19px;
  }
  .cj678__mainpic {
    border-radius: 13px;
  }
  .cj678__mini {
    width: 93px;
    height: 105px;
    right: -5px;
    bottom: 42px;
    border-width: 4px;
  }
  .cj678__float {
    padding: 9px 11px;
    font-size: 14px;
    max-width: 200px;
  }
  .cj678__float--top {
    right: 0;
  }
  .cj678__float--bottom {
    left: 0;
  }
  .cj678__route {
    left: 17px;
    right: 17px;
    bottom: 17px;
    padding: 12px 10px;
  }
  .cj678__route-steps {
    gap: 5px;
    font-size: 14px;
  }
  .cj678__service-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .cj678__service:last-child {
    grid-column: auto;
  }
  .cj678__picture-label {
    left: 23px;
    bottom: 28px;
  }
  .cj678__brand-chip {
    left: 22px;
    bottom: 24px;
  }
  .cj678__bottom strong {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cj678__eyebrow::before,
  .cj678__visual::before,
  .cj678__float,
  .cj678__btn::after,
  .cj678__route-line::after {
    animation: none !important;
  }
  .cj678__btn,
  .cj678__mainpic img,
  .cj678__mini,
  .cj678__nav a {
    transition: none !important;
  }
  .cj678__btn:hover,
  .cj678__nav a:hover {
    transform: none !important;
  }
}
.cjhub,
.cjhub * {
  box-sizing: border-box;
}
.cjhub {
  --dark: #153d2c;
  --green: #609574;
  --light: #eaf4eb;
  --lime: #bceb8b;
  --orange: #e58c51;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 24px;
  background: linear-gradient(135deg, #f7faf7, #edf5ef);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--dark);
}
/* Background grid */
.cjhub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(29, 85, 49, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 85, 49, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
}
.cjhub__wrap {
  max-width: 1200px;
  margin: auto;
}
/* Header */
.cjhub__head {
  margin-bottom: 40px;
}
.cjhub__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #447c53;
  font-weight: 700;
  font-size: 14px;
}
.cjhub__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(229, 140, 81, 0.13);
}
.cjhub h2 {
  margin: 15px 0;
  max-width: 1000px;
  color: #193d2b;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.cjhub h2 span {
  color: #619473;
}
.cjhub__intro {
  max-width: 770px;
  margin: 0;
  font-size: 15px;
  color: #4a6654;
}
/* Main architecture */
.cjhub__network {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.cjhub__column {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 17px;
  min-width: 0;
}
/* Interactive feature panels */
.cjhub__feature {
  appearance: none;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 248px;
  overflow: hidden;
  display: block;
  padding: 20px;
  text-align: left;
  border: 1px solid #d8e7db;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 32px rgba(31, 76, 40, 0.05);
  color: #193c2c;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.cjhub__feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(129, 210, 141, 0.24), transparent 65%);
  transition: opacity 0.3s;
}
.cjhub__feature::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #95bf47, #b7e88a, #e58c51);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}
.cjhub__feature:hover,
.cjhub__feature[aria-pressed="true"] {
  transform: translateY(-4px);
  border-color: #9ccaa3;
  box-shadow: 0 20px 48px rgba(26, 91, 46, 0.14);
}
.cjhub__feature:hover::before,
.cjhub__feature[aria-pressed="true"]::before {
  opacity: 1;
}
.cjhub__feature:hover::after,
.cjhub__feature[aria-pressed="true"]::after {
  transform: scaleX(1);
}
.cjhub__feature:focus-visible {
  outline: 3px solid #6eaa70;
  outline-offset: 3px;
}
.cjhub__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  color: #527d5a;
}
.cjhub__meta b {
  color: var(--orange);
}
.cjhub__meta i {
  display: block;
  width: 18px;
  height: 1px;
  background: #b3cdb7;
}
/* Official CJ images */
.cjhub__image {
  position: absolute;
  z-index: 1;
  right: 16px;
  top: 47px;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid #d9e8dc;
  border-radius: 17px;
  background: radial-gradient(circle at 30% 20%, #fff, #edf6ec);
  box-shadow: 0 8px 25px rgba(70, 137, 72, 0.08);
  transition: transform 0.4s, box-shadow 0.4s;
}
.cjhub__image::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px dashed #bbd5bf;
  border-radius: 23px;
  animation: cjhub-ring 15s linear infinite;
  pointer-events: none;
}
.cjhub__image img {
  width: 73px;
  height: 73px;
  object-fit: contain;
  transition: transform 0.4s;
}
.cjhub__feature:hover .cjhub__image {
  transform: translateY(-6px) rotate(4deg);
  box-shadow: 0 14px 30px rgba(81, 163, 81, 0.18);
}
.cjhub__feature:hover img {
  transform: scale(1.1);
}
.cjhub__feature h3 {
  position: relative;
  z-index: 1;
  margin: 69px 0 9px;
  color: #193d2b;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.cjhub__feature p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #4b6656;
  font-size: 14px;
  line-height: 1.55;
}
/* Central animated technology hub */
.cjhub__core {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 790px;
  padding: 24px 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(183, 235, 164, 0.38);
  border-radius: 25px;
  background: radial-gradient(ellipse at 50% 42%, #28704c 0%, #154432 47%, #0b2922 100%);
  color: white;
  box-shadow: 0 26px 60px rgba(18, 71, 42, 0.2);
}
.cjhub__core::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: linear-gradient(rgba(209, 255, 198, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(209, 255, 198, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cjhub__core::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -85%;
  top: -45%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(194, 255, 184, 0.1), transparent);
  transform: rotate(20deg);
  animation: cjhub-scan 8s ease-in-out infinite;
  pointer-events: none;
}
.cjhub__system {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: #d0e9d0;
}
.cjhub__system::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bdea85;
  box-shadow: 0 0 0 5px rgba(189, 234, 133, 0.15);
  animation: cjhub-pulse 2.5s infinite;
}
/* Logo connection */
.cjhub__brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin: 40px 0 20px;
}
.cjhub__brand {
  width: 43%;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 11px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid rgba(210, 255, 194, 0.25);
  box-shadow: 0 10px 24px rgba(0, 25, 16, 0.2);
}
.cjhub__brand img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 40px;
  object-fit: contain;
}
.cjhub__multiply {
  color: #bde98b;
  font-size: 25px;
  font-weight: 700;
}
/* Radar illustration */
.cjhub__radar {
  position: relative;
  width: min(100%,370px);
  aspect-ratio: 1;
  margin: 22px auto;
  display: grid;
  place-items: center;
}
.cjhub__radar::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(210, 255, 186, 0.36);
  box-shadow: 0 0 0 27px rgba(188, 240, 164, 0.045), 0 0 0 54px rgba(188, 240, 164, 0.025), inset 0 0 40px rgba(182, 241, 159, 0.12);
  animation: cjhub-breathe 4s ease-in-out infinite;
}
.cjhub__radar::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px dashed rgba(209, 250, 173, 0.52);
  border-radius: 50%;
  animation: cjhub-ring 28s linear infinite;
}
.cjhub__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: cjhub-ring 18s linear infinite;
}
.cjhub__orbit::before,
.cjhub__orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.cjhub__orbit::before {
  top: 4%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: #bcf58b;
  box-shadow: 0 0 19px 6px rgba(189, 255, 135, 0.32);
}
.cjhub__orbit::after {
  bottom: 16%;
  left: 13%;
  width: 8px;
  height: 8px;
  background: #eaa376;
  box-shadow: 0 0 15px #eaa376;
}
.cjhub__core-circle {
  position: relative;
  z-index: 2;
  width: 57%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 30% 20%, #35764d, #123b2d);
  border: 1px solid rgba(204, 250, 170, 0.45);
  box-shadow: 0 0 0 8px rgba(182, 239, 157, 0.07), 0 0 46px rgba(143, 230, 102, 0.25);
}
.cjhub__core-circle small,
.cjhub__core-circle span {
  color: #c4e7bd;
  font-size: 14px;
  font-weight: 700;
}
.cjhub__core-circle strong {
  margin: 5px 0;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.cjhub__core-circle span {
  color: #bdec83;
}
/* Six orbital points */
.cjhub__points {
  position: absolute;
  inset: 0;
}
.cjhub__points i {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #1a5336;
  border-radius: 50%;
  background: #86c585;
  box-shadow: 0 0 0 4px rgba(191, 238, 169, 0.11);
  transition: transform 0.3s, background 0.3s;
}
.cjhub__points i:nth-child(1) {
  left: 19%;
  top: 24%;
}
.cjhub__points i:nth-child(2) {
  left: 48%;
  top: 7%;
}
.cjhub__points i:nth-child(3) {
  right: 15%;
  top: 26%;
}
.cjhub__points i:nth-child(4) {
  right: 14%;
  bottom: 24%;
}
.cjhub__points i:nth-child(5) {
  left: 48%;
  bottom: 7%;
}
.cjhub__points i:nth-child(6) {
  left: 15%;
  bottom: 24%;
}
.cjhub__points i.active {
  background: #ffb17a;
  transform: scale(1.6);
  box-shadow: 0 0 0 6px rgba(235, 165, 112, 0.2), 0 0 18px rgba(255, 177, 122, 0.55);
}
/* Active benefit display */
.cjhub__selected {
  width: 100%;
  margin-top: auto;
  padding: 20px 18px;
  text-align: left;
  border-radius: 15px;
  background: rgba(8, 41, 30, 0.65);
  border: 1px solid rgba(206, 255, 189, 0.2);
  backdrop-filter: blur(12px);
}
.cjhub__selected-label {
  color: #bce68e;
  font-size: 14px;
  font-weight: 700;
}
.cjhub__selected-label::before {
  content: "●";
  color: #eaa376;
  margin-right: 8px;
}
.cjhub__selected strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}
.cjhub__selected p {
  margin: 8px 0 0;
  color: #ccdfd1;
  font-size: 14px;
  line-height: 1.6;
}
.cjhub__stages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding-top: 21px;
  color: #cae9c8;
  font-size: 14px;
  font-weight: 700;
}
.cjhub__stages b {
  width: 22px;
  height: 1px;
  background: #79ab83;
}
.cjhub__stages span:nth-of-type(2) {
  color: #c4ee8a;
}
/* Bottom conversion */
.cjhub__footer {
  margin-top: 27px;
  padding: 25px 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border: 1px solid #d7e6d9;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(28, 75, 42, 0.06);
}
.cjhub__footer strong {
  display: block;
  color: #204831;
  font-size: 19px;
  font-weight: 700;
}
.cjhub__footer p {
  margin: 7px 0 0;
  color: #526c58;
  font-size: 14px;
}
.cjhub__button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 22px;
  flex-shrink: 0;
  background: #245b3d;
  border-radius: 11px;
  color: white !important;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.25s, background 0.25s;
}
.cjhub__button:hover {
  transform: translateY(-3px);
  background: #34754f;
}
.cjhub__button::after {
  content: "";
  position: absolute;
  left: -60%;
  top: -50%;
  width: 40%;
  height: 200%;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: cjhub-shine 5s infinite;
}
.cjhub__button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjhub__button:focus-visible {
  outline: 3px solid #82b66b;
  outline-offset: 4px;
}
/* Animations */
@keyframes cjhub-ring {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cjhub-breathe {
  50% {
    box-shadow: 0 0 0 35px rgba(188, 240, 164, 0.04), 0 0 0 62px rgba(188, 240, 164, 0.02), inset 0 0 55px rgba(182, 241, 159, 0.17);
  }
}
@keyframes cjhub-pulse {
  50% {
    box-shadow: 0 0 0 12px rgba(189, 234, 133, 0);
  }
}
@keyframes cjhub-scan {
  0%,
  20% {
    left: -85%;
  }
  70%,
  100% {
    left: 130%;
  }
}
@keyframes cjhub-shine {
  0%,
  20% {
    left: -70%;
  }
  65%,
  100% {
    left: 170%;
  }
}
/* Responsive */
@media (max-width: 1080px) {
  .cjhub__network {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cjhub__core {
    grid-column: -1;
    grid-row: 1;
    min-height: 640px;
  }
  .cjhub__radar {
    width: 300px;
    margin: 12px auto;
  }
  .cjhub__brands {
    max-width: 490px;
    margin-top: 28px;
  }
  .cjhub__selected {
    max-width: 620px;
  }
}
@media (max-width: 680px) {
  .cjhub {
    padding: 62px 17px;
  }
  .cjhub h2 {
    font-size: 34px;
  }
  .cjhub__intro {
    font-size: 14px;
  }
  .cjhub__network {
    grid-template-columns: 1fr;
  }
  .cjhub__core {
    grid-column: 1;
    grid-row: 1;
    min-height: 620px;
    padding: 21px 16px;
  }
  .cjhub__column {
    gap: 14px;
  }
  .cjhub__feature {
    min-height: 0;
    padding: 20px 19px 24px;
  }
  .cjhub__feature h3 {
    margin-top: 62px;
    font-size: 18px;
  }
  .cjhub__radar {
    width: min(100%,305px);
  }
  .cjhub__brands {
    margin-top: 29px;
  }
  .cjhub__footer {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 21px;
  }
  .cjhub__button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjhub__image::after,
  .cjhub__core::after,
  .cjhub__system::before,
  .cjhub__radar::before,
  .cjhub__radar::after,
  .cjhub__orbit,
  .cjhub__button::after {
    animation: none !important;
  }
  .cjhub__feature:hover,
  .cjhub__button:hover {
    transform: none;
  }
}
.cjr3,
.cjr3 * {
  box-sizing: border-box;
}
.cjr3 {
  --ink: #eef8f1;
  --mint: #bee8aa;
  --green: #95bf47;
  --quiet: #bacfc1;
  position: relative;
  isolation: isolate;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  max-width: 100vw;
  padding: 82px 0 77px;
  overflow: hidden;
  background: linear-gradient(115deg, #071b14 0%, #0a281e 49%, #0b3424 100%);
  color: var(--ink);
  font: 400 14px/1.65 Inter, Arial, Helvetica, sans-serif;
}
.cjr3:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 620px 390px at 12% 1%, rgba(149, 191, 71, 0.12), transparent 76%), radial-gradient(ellipse 680px 500px at 92% 98%, rgba(67, 143, 98, 0.12), transparent 75%), linear-gradient(rgba(198, 244, 189, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 244, 189, 0.035) 1px, transparent 1px);
  background-size: auto,

      auto,

      52px 52px,

      52px 52px;
}
.cjr3__container {
  max-width: 1200px;
  padding: 0 24px;
  margin: 0 auto;
}
.cjr3__heading {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 29px;
}
.cjr3__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bce09c;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cjr3__eyebrow:before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: #a7d97d;
  box-shadow: 0 0 16px rgba(161, 237, 133, 0.45);
}
.cjr3 h2 {
  font: 700 clamp(32px, 3.8vw, 40px)/1.14 Inter, Arial, Helvetica, sans-serif;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 15px 0 0;
}
.cjr3 h2 em {
  font-style: normal;
  color: #b8e693;
}
.cjr3__lead {
  color: #caddce;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 11px;
}
.cjr3__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 16px;
  color: #c4e6b5;
  font-size: 14px;
  font-weight: 700;
}
.cjr3__summary a {
  color: #cdecab;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cjr3__disclosure {
  margin-top: 9px;
  font-size: 14px;
  color: #a7bdaf;
}
.cjr3__nav {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}
.cjr3__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(189, 232, 164, 0.3);
  background: rgba(177, 232, 169, 0.08);
  color: #efffea;
  font: 700 25px/1 Inter, Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.cjr3__arrow:hover {
  background: rgba(169, 230, 145, 0.2);
  transform: translateY(-2px);
}
.cjr3__arrow:focus-visible,
.cjr3-identity a:focus-visible {
  outline: 3px solid #b7e789;
  outline-offset: 3px;
}
.cjr3__hint {
  color: #b6cfba;
  font-size: 14px;
  margin-left: 3px;
}
.cjr3__board {
  display: grid;
  gap: 13px;
}
.cjr3__lane {
  width: 100%;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  padding: 13px 0 15px;
  cursor: grab;
}
.cjr3__lane::-webkit-scrollbar {
  display: none;
}
.cjr3__lane.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.cjr3__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.cjr3__group {
  flex: 0 0 auto;
  display: flex;
  gap: 16px;
  padding-right: 16px;
}
.cjr3-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 390px;
  width: 390px;
  min-height: 260px;
  padding: 24px 23px 20px;
  border-radius: 19px;
  background: linear-gradient(142deg, rgba(19, 51, 37, 0.98), rgba(11, 34, 26, 0.98));
  border: 1px solid rgba(180, 224, 171, 0.2);
  box-shadow: 0 12px 30px rgba(1, 15, 7, 0.15);
  outline: none;
  transition: border-color 0.24s, box-shadow 0.24s, transform 0.24s;
}
.cjr3-card:hover,
.cjr3-card:focus-visible {
  border-color: rgba(182, 238, 147, 0.78);
  box-shadow: 0 17px 38px rgba(0, 10, 5, 0.34), 0 0 24px rgba(144, 213, 134, 0.13);
  transform: translateY(-3px);
}
.cjr3-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cjr3-photo {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(207, 244, 196, 0.45);
  background: linear-gradient(135deg, #416f59, #163b2d);
  display: grid;
  place-items: center;
}
.cjr3-photo img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cjr3-photo span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #efffea;
}
.cjr3-identity {
  flex: 1;
  min-width: 0;
}
.cjr3-identity a {
  display: block;
  color: #f8fff8 !important;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
.cjr3-identity a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.cjr3-identity span {
  display: block;
  margin-top: 4px;
  color: #c1d4c6;
  font-size: 14px;
  line-height: 1.35;
}
.cjr3-stars {
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.35;
  color: #d8e6a4;
  white-space: nowrap;
}
.cjr3-star-empty {
  color: #4f6454;
}
.cjr3-card p {
  color: #e0ece2;
  font-size: 14px;
  line-height: 1.8;
  margin: 18px 0 0;
  overflow: visible;
  white-space: normal;
  flex: 1;
}
@media (max-width: 790px) {
  .cjr3 {
    padding: 62px 0 58px;
  }
  .cjr3__container {
    padding: 0 20px;
  }
  .cjr3__heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cjr3 h2 {
    font-size: 36px;
  }
  .cjr3__lead {
    font-size: 14px;
  }
  .cjr3__board {
    gap: 4px;
  }
  .cjr3-card {
    width: 340px;
    flex-basis: 340px;
    min-height: 285px;
    padding: 21px 19px;
  }
  .cjr3-person {
    gap: 9px;
  }
  .cjr3-photo {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
  }
  .cjr3-identity a {
    font-size: 14px;
  }
  .cjr3-stars {
    font-size: 14px;
  }
  .cjr3__disclosure {
    font-size: 14px;
  }
}
@media (max-width: 390px) {
  .cjr3-card {
    width: 310px;
    flex-basis: 310px;
    min-height: 320px;
    padding: 20px 17px;
  }
  .cjr3-photo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .cjr3-stars {
    letter-spacing: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjr3__lane {
    overflow-x: auto;
    touch-action: pan-x;
  }
  .cjr3__track {
    will-change: auto;
    transform: none !important;
  }
  .cjr3-card {
    transition: none;
  }
  .cjr3-card:hover {
    transform: none;
  }
}
/* Fixed: hover uses only the real moving cards; no ghost preview layer. */
.cjr3__lane {
  position: relative;
}
.cjr3-card:focus-visible {
  outline: 2px solid #b7e789;
  outline-offset: -3px;
}
.cjr3__lane.is-dragging .cjr3-card {
  transition: none;
}
.cjr3__track,
.cjr3__group {
  backface-visibility: hidden;
}
@media (max-width: 360px) {
  .cjr3-card {
    width: calc(100vw - 28px);
    flex-basis: calc(100vw - 28px);
  }
}
.cjsfaq,
.cjsfaq * {
  box-sizing: border-box;
}
.cjsfaq {
  --ink: #203d2d;
  --muted: #4b6454;
  --forest: #0c3024;
  --sage: #71996f;
  --line: #dce9dd;
  --orange: #dd8754;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 92px 24px 98px;
  color: var(--ink);
  background: linear-gradient(120deg, #fff 0%, #f8fbf7 58%, #eef5ed 100%);
  font: 400 14px/1.75 Inter, Arial, Helvetica, sans-serif;
}
.cjsfaq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(62, 117, 68, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 117, 68, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.cjsfaq::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: -260px;
  top: -300px;
  width: 690px;
  height: 690px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(135, 190, 123, 0.17), transparent 69%);
  animation: cjsfaq-glow 11s ease-in-out infinite alternate;
}
.cjsfaq__wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 56px;
}
/* Left featured panel */
.cjsfaq__left {
  position: sticky;
  top: 26px;
  min-width: 0;
}
.cjsfaq__eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: #427c50;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.cjsfaq__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #7fad77;
}
.cjsfaq h2 {
  margin: 17px 0 16px;
  color: #1f4330;
  font: 700 clamp(34px, 3.5vw, 47px)/1.17 Inter, Arial, Helvetica, sans-serif;
  letter-spacing: -0.04em;
}
.cjsfaq h2 em {
  color: #54895d;
  font-style: normal;
}
.cjsfaq__intro {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  max-width: 455px;
}
.cjsfaq__illustration {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 318px;
  border-radius: 23px;
  border: 1px solid #315e49;
  background: radial-gradient(ellipse at 50% 37%, #246443 0%, #143f30 51%, #0b2c23 100%);
  box-shadow: 0 24px 56px rgba(16, 60, 37, 0.14);
}
.cjsfaq__illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: linear-gradient(rgba(215, 255, 204, 0.085) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 255, 204, 0.085) 1px, transparent 1px);
  background-size: 35px 35px;
}
.cjsfaq__illustration::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -70%;
  width: 55%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(221, 255, 194, 0.08), transparent);
  transform: rotate(20deg);
  animation: cjsfaq-sweep 8s ease-in-out infinite;
  pointer-events: none;
}
.cjsfaq__rings {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(205, 249, 176, 0.29);
  box-shadow: 0 0 0 22px rgba(194, 240, 152, 0.045), 0 0 0 48px rgba(194, 240, 152, 0.025), inset 0 0 43px rgba(160, 244, 147, 0.11);
  animation: cjsfaq-pulse 5s ease-in-out infinite;
}
.cjsfaq__rings::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(198, 249, 175, 0.37);
  border-radius: 50%;
  animation: cjsfaq-spin 34s linear infinite;
}
.cjsfaq__orb {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b9ec8d;
  box-shadow: 0 0 22px 6px rgba(170, 243, 146, 0.5);
  transform-origin: 0 100px;
  animation: cjsfaq-orbit 9s linear infinite;
}
.cjsfaq__logos {
  position: absolute;
  z-index: 2;
  left: 12%;
  right: 12%;
  top: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.cjsfaq__logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-width: 0;
  min-height: 68px;
  padding: 13px 11px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid rgba(244, 255, 239, 0.8);
  box-shadow: 0 11px 25px rgba(0, 23, 13, 0.22);
}
.cjsfaq__logo img {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  display: block;
  width: calc(100% - 20px);
  max-width: 154px;
  height: 42px;
  object-fit: contain;
}
.cjsfaq__logo img[hidden] {
  display: none;
}
.cjsfaq__logo span {
  z-index: 1;
  color: #264a33;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.cjsfaq__link {
  flex: 0 0 31px;
  color: #d1f2aa;
  font-size: 24px;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 18px rgba(187, 248, 151, 0.6);
}
.cjsfaq__techline {
  position: absolute;
  z-index: 2;
  left: 19%;
  right: 19%;
  bottom: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a5d68a, transparent);
}
.cjsfaq__techline::after {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 30%;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #c6f1a7, transparent);
  filter: drop-shadow(0 0 7px #b1e08c);
  animation: cjsfaq-flow 3.2s linear infinite;
}
.cjsfaq__techcap {
  position: absolute;
  z-index: 2;
  bottom: 29px;
  left: 18px;
  right: 18px;
  text-align: center;
  color: #d7f1d5;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cjsfaq__support {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}
.cjsfaq__support span {
  color: #496654;
  font-size: 14px;
}
.cjsfaq__support a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #326b44 !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 1px solid #a5c5aa;
  padding-bottom: 2px;
}
.cjsfaq__support a:hover {
  color: #1b5531 !important;
}
/* Right answer console */
.cjsfaq__right {
  min-width: 0;
}
.cjsfaq__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 17px;
  color: #5e7b65;
  font-size: 14px;
  font-weight: 700;
}
.cjsfaq__status {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cjsfaq__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #85b46b;
  box-shadow: 0 0 0 5px rgba(130, 182, 102, 0.15);
  animation: cjsfaq-dot 3s infinite;
}
.cjsfaq__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 19px;
}
.cjsfaq__filter {
  appearance: none;
  min-height: 39px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid #dce9dc;
  background: #fff;
  color: #3d6247;
  font: 700 14px/1.3 Inter, Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cjsfaq__filter:hover {
  background: #edf6eb;
  border-color: #b7d5b9;
}
.cjsfaq__filter[aria-pressed="true"] {
  color: #fff;
  background: #24573b;
  border-color: #24573b;
  box-shadow: 0 7px 18px rgba(35, 87, 58, 0.13);
}
.cjsfaq__filter:focus-visible,
.cjsfaq summary:focus-visible,
.cjsfaq a:focus-visible {
  outline: 3px solid #97ca79;
  outline-offset: 3px;
}
.cjsfaq__items {
  display: grid;
  gap: 10px;
}
.cjsfaq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce9dd;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 21px rgba(30, 72, 40, 0.038);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.cjsfaq__item[open] {
  border-color: #9fc7a3;
  box-shadow: 0 15px 38px rgba(35, 94, 51, 0.095);
}
.cjsfaq__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #7bae73, #c3e4a4);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s;
  pointer-events: none;
}
.cjsfaq__item[open]::before {
  transform: scaleY(1);
}
.cjsfaq__item[hidden] {
  display: none !important;
}
.cjsfaq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  min-height: 82px;
  padding: 20px 21px;
}
.cjsfaq summary::-webkit-details-marker {
  display: none;
}
.cjsfaq__index {
  display: block;
  flex: 0 0 25px;
  color: #689372;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cjsfaq__question {
  flex: 1;
  min-width: 0;
  color: #1c422d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.cjsfaq__plus {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d7e7d7;
  background: #f2f8f0;
  color: #3c7751;
  transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}
.cjsfaq__plus svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  transition: transform 0.25s;
}
.cjsfaq__item[open] .cjsfaq__plus {
  background: #21563a;
  border-color: #21563a;
  color: #fff;
}
.cjsfaq__item[open] .cjsfaq__plus svg {
  transform: rotate(45deg);
}
.cjsfaq__answer {
  padding: 0 22px 24px 62px;
  color: #435f4c;
  font-size: 14px;
  line-height: 1.85;
  animation: cjsfaq-reveal 0.25s ease-out both;
}
.cjsfaq__answer p {
  margin: 0;
}
.cjsfaq__answer p + p {
  margin-top: 11px;
}
.cjsfaq__answer a {
  color: #2b7650 !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-color: #9dc5a1 !important;
  text-underline-offset: 3px;
}
.cjsfaq__footer {
  margin-top: 21px;
  padding: 22px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 14px;
  background: #e9f3e8;
  border: 1px solid #d8e8d8;
}
.cjsfaq__footer strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: #254f34;
  font-weight: 700;
}
.cjsfaq__footer p {
  margin: 5px 0 0;
  color: #4d6855;
  font-size: 14px;
}
.cjsfaq__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  min-height: 45px;
  padding: 10px 17px;
  border-radius: 10px;
  background: #245a3b;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.25s, transform 0.25s;
}
.cjsfaq__button:hover {
  background: #347c50;
  transform: translateY(-2px);
}
/* Motion */
@keyframes cjsfaq-glow {
  to {
    transform: translate(-75px, 65px) scale(1.13);
  }
}
@keyframes cjsfaq-sweep {
  0%,
  22% {
    left: -70%;
  }
  65%,
  100% {
    left: 145%;
  }
}
@keyframes cjsfaq-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cjsfaq-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cjsfaq-pulse {
  50% {
    box-shadow: 0 0 0 29px rgba(194, 240, 152, 0.025), 0 0 0 55px rgba(194, 240, 152, 0.015), inset 0 0 55px rgba(160, 244, 147, 0.16);
  }
}
@keyframes cjsfaq-flow {
  from {
    left: 0;
  }
  to {
    left: 70%;
  }
}
@keyframes cjsfaq-dot {
  50% {
    box-shadow: 0 0 0 11px rgba(130, 182, 102, 0);
  }
}
@keyframes cjsfaq-reveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1050px) {
  .cjsfaq__wrap {
    gap: 30px;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
  .cjsfaq__illustration {
    min-height: 280px;
  }
  .cjsfaq__logos {
    left: 7%;
    right: 7%;
  }
  .cjsfaq__item summary {
    padding: 18px 16px;
  }
  .cjsfaq__answer {
    padding: 0 16px 22px 57px;
  }
}
@media (max-width: 820px) {
  .cjsfaq {
    padding: 70px 20px;
  }
  .cjsfaq__wrap {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .cjsfaq__left {
    position: static;
  }
  .cjsfaq__intro {
    max-width: 640px;
  }
  .cjsfaq__illustration {
    max-width: 580px;
    min-height: 235px;
  }
  .cjsfaq__rings {
    top: 39%;
    width: 220px;
    height: 220px;
  }
  .cjsfaq__logos {
    top: 25%;
    left: 16%;
    right: 16%;
  }
  .cjsfaq__techline {
    bottom: 59px;
  }
  .cjsfaq__techcap {
    bottom: 17px;
  }
}
@media (max-width: 520px) {
  .cjsfaq {
    padding: 56px 16px 65px;
  }
  .cjsfaq h2 {
    font-size: 33px;
  }
  .cjsfaq__intro {
    font-size: 14px;
  }
  .cjsfaq__illustration {
    min-height: 208px;
  }
  .cjsfaq__rings {
    width: 190px;
    height: 190px;
  }
  .cjsfaq__logos {
    top: 23%;
    left: 8%;
    right: 8%;
    gap: 7px;
  }
  .cjsfaq__logo {
    min-height: 56px;
    padding: 9px;
  }
  .cjsfaq__logo img {
    height: 35px;
  }
  .cjsfaq__link {
    flex-basis: 22px;
    font-size: 19px;
  }
  .cjsfaq__filters {
    gap: 7px;
  }
  .cjsfaq__filter {
    padding: 8px 11px;
  }
  .cjsfaq summary {
    gap: 10px;
    padding: 18px 13px;
    min-height: 72px;
  }
  .cjsfaq__question {
    font-size: 15px;
  }
  .cjsfaq__index {
    flex-basis: 23px;
  }
  .cjsfaq__plus {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .cjsfaq__answer {
    padding: 0 15px 21px 47px;
  }
  .cjsfaq__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .cjsfaq__button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjsfaq::after,
  .cjsfaq__illustration::after,
  .cjsfaq__rings,
  .cjsfaq__rings::after,
  .cjsfaq__orb,
  .cjsfaq__techline::after,
  .cjsfaq__status::before,
  .cjsfaq__answer {
    animation: none !important;
  }
  .cjsfaq__button:hover {
    transform: none;
  }
}
/* Hide all inactive categories even before JavaScript runs. */
.cjsfaq__item[hidden] {
  display: none !important;
}
.cjsfaq__filter {
  touch-action: manipulation;
}
.cjsfaq__right {
  min-width: 0;
}
.cjsfaq__count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .cjsfaq__topline {
    align-items: flex-start;
  }
  .cjsfaq__status {
    max-width: 75%;
    line-height: 1.45;
  }
}
/* ===== SECTION ===== */
.cjfx-cta,
.cjfx-cta * {
  box-sizing: border-box;
}
.cjfx-cta {
  --cj-lime: #b9f577;
  --cj-lime-light: #d4ff9a;
  --cj-dark: #062f25;
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: none;
  min-height: 530px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 95px 24px 85px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  background: #043a2c;
  color: #ffffff;
}
/* ===== BACKGROUND IMAGE ===== */
.cjfx-cta::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -4%;
  background: linear-gradient(100deg, rgba(2, 31, 24, 0.94) 0%, rgba(55, 37, 3, 0.84) 46%, rgba(233, 129, 10, 0.479) 100%), url("/egg/image/integrations/shopifyRevamp/cta-bg.jpg") center / cover no-repeat;
  animation: cjfx-bg-zoom 24s ease-in-out infinite alternate;
}
/* Animated color overlay */
.cjfx-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 15% 45%, rgba(32, 180, 105, 0.22), transparent 48%), radial-gradient(ellipse at 90% 70%, rgba(150, 255, 95, 0.13), transparent 48%);
  animation: cjfx-bg-pulse 9s ease-in-out infinite alternate;
}
/* ===== FLOATING LIGHTS ===== */
.cjfx-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(45px);
  z-index: 0;
  opacity: 0.6;
}
.cjfx-orb-1 {
  width: 360px;
  height: 360px;
  left: -160px;
  top: -170px;
  background: radial-gradient(circle, rgba(143, 255, 99, 0.3), transparent 70%);
  animation: cjfx-float-a 10s ease-in-out infinite alternate;
}
.cjfx-orb-2 {
  width: 440px;
  height: 440px;
  right: -210px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(54, 245, 163, 0.3), transparent 70%);
  animation: cjfx-float-b 13s ease-in-out infinite alternate;
}
.cjfx-orb-3 {
  width: 280px;
  height: 280px;
  left: 48%;
  bottom: -230px;
  background: radial-gradient(circle, rgba(176, 255, 103, 0.18), transparent 72%);
  animation: cjfx-float-a 12s ease-in-out infinite alternate-reverse;
}
/* ===== LIGHT SWEEP ===== */
.cjfx-sweep {
  position: absolute;
  top: -40%;
  left: -30%;
  width: 24%;
  height: 190%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  background: linear-gradient(90deg, transparent, rgba(185, 255, 139, 0.13) 45%, rgba(255, 255, 255, 0.13) 50%, transparent);
  filter: blur(14px);
  transform: translateX(-160%) rotate(17deg);
  animation: cjfx-scan 12s ease-in-out infinite;
}
/* ===== TOP GLOWING LINE ===== */
.cjfx-top-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(185, 245, 119, 0.25), #b9f577, rgba(185, 245, 119, 0.25), transparent);
  background-size: 200% 100%;
  animation: cjfx-line-move 6s linear infinite;
}
/* ===== CONTENT ===== */
.cjfx-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
/* Small label */
.cjfx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: #d8ffae;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  animation: cjfx-reveal 0.8s ease both;
}
.cjfx-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9f577;
  box-shadow: 0 0 0 4px rgba(185, 245, 119, 0.12), 0 0 15px rgba(185, 245, 119, 0.9);
  animation: cjfx-dot-pulse 2.5s ease-in-out infinite;
}
/* ===== HEADLINE ===== */
.cjfx-title {
  margin: 0 auto 22px;
  max-width: 1030px;
  font-size: clamp(36px, 3vw, 40px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -2px;
  color: #fff;
  animation: cjfx-reveal 0.9s 0.12s ease both;
}
.cjfx-title .cjfx-highlight {
  background: linear-gradient(105deg, #a6f266 0%, #d9ffa6 30%, #8fe86d 55%, #dcffae 80%, #a6f266 100%);
  background-size: 230% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cjfx-text-flow 7s linear infinite;
}
/* Decorative underline */
.cjfx-title-line {
  display: block;
  width: 88px;
  height: 3px;
  border-radius: 4px;
  margin: 0 auto 23px;
  background: linear-gradient(90deg, transparent, #b9f577, transparent);
  box-shadow: 0 0 18px rgba(185, 245, 119, 0.7);
  animation: cjfx-line-breathe 4s ease-in-out infinite;
}
/* ===== DESCRIPTION ===== */
.cjfx-description {
  max-width: 750px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  animation: cjfx-reveal 0.9s 0.25s ease both;
}
/* ===== BUTTONS ===== */
.cjfx-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 38px;
  animation: cjfx-reveal 0.9s 0.38s ease both;
}
.cjfx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 60px;
  min-width: 245px;
  padding: 18px 30px;
  border-radius: 12px;
  overflow: hidden;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none !important;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* SVG arrows */
.cjfx-btn svg {
  position: relative;
  z-index: 2;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.cjfx-btn-label {
  position: relative;
  z-index: 2;
}
/* Hover movement */
.cjfx-btn:hover {
  transform: translateY(-5px);
}
.cjfx-btn:hover svg {
  transform: translateX(5px);
}
/* ===== PRIMARY BUTTON ===== */
.cjfx-btn-primary {
  color: #063b2b !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(120deg, #c9fc91, #a4ec64, #d1ff99);
  background-size: 200% 200%;
  box-shadow: 0 10px 30px rgba(165, 241, 95, 0.28), 0 0 20px rgba(165, 241, 95, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: cjfx-gradient-shift 7s ease infinite, cjfx-button-glow 3.5s ease-in-out infinite;
}
.cjfx-btn-primary:hover {
  color: #063b2b !important;
  box-shadow: 0 15px 42px rgba(165, 241, 95, 0.48), 0 0 35px rgba(165, 241, 95, 0.27);
}
/* Moving light over button */
.cjfx-btn-primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -50%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-100%) rotate(8deg);
  animation: cjfx-button-shine 5s ease-in-out infinite;
}
/* ===== SECONDARY BUTTON ===== */
.cjfx-btn-secondary {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(216, 255, 194, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
}
.cjfx-btn-secondary:hover {
  color: #fff !important;
  background: rgba(185, 245, 119, 0.15);
  border-color: #c8ff91;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18), 0 0 25px rgba(185, 245, 119, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Secondary button moving shine */
.cjfx-btn-secondary::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.13) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
}
.cjfx-btn-secondary:hover::before {
  transform: translateX(130%);
}
.cjfx-btn:focus-visible {
  outline: 3px solid #e4ffb9;
  outline-offset: 4px;
}
/* ===== BENEFITS ===== */
.cjfx-benefits {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px 32px;
  margin-top: 33px;
  animation: cjfx-reveal 0.9s 0.55s ease both;
}
.cjfx-benefit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 500;
}
.cjfx-check {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid #b9f577;
  border-radius: 50%;
  color: #b9f577;
  font-size: 12px;
  box-shadow: 0 0 12px rgba(185, 245, 119, 0.13);
}
/* ===== KEYFRAMES ===== */
/* Background slow zoom */
@keyframes cjfx-bg-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.075);
  }
}
/* Background ambient light */
@keyframes cjfx-bg-pulse {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* Floating orbs */
@keyframes cjfx-float-a {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(70px, 45px, 0);
  }
}
@keyframes cjfx-float-b {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-80px, -60px, 0);
  }
}
/* Horizontal light sweep */
@keyframes cjfx-scan {
  0%,
  15% {
    transform: translateX(-180%) rotate(17deg);
    opacity: 0;
  }
  25% {
    opacity: 0.32;
  }
  60%,
  100% {
    transform: translateX(720%) rotate(17deg);
    opacity: 0;
  }
}
/* Glowing top line */
@keyframes cjfx-line-move {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* Text reveal */
@keyframes cjfx-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Animated text gradient */
@keyframes cjfx-text-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 230% 50%;
  }
}
/* Underline glow */
@keyframes cjfx-line-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.3);
  }
}
/* Status dot */
@keyframes cjfx-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(185, 245, 119, 0.1), 0 0 10px rgba(185, 245, 119, 0.35);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(185, 245, 119, 0.06), 0 0 22px rgba(185, 245, 119, 0.75);
  }
}
/* Primary button breathing glow */
@keyframes cjfx-button-glow {
  0%,
  100% {
    box-shadow: 0 10px 28px rgba(165, 241, 95, 0.22), 0 0 15px rgba(165, 241, 95, 0.1);
  }
  50% {
    box-shadow: 0 12px 38px rgba(165, 241, 95, 0.38), 0 0 25px rgba(165, 241, 95, 0.23);
  }
}
/* Button gradient animation */
@keyframes cjfx-gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
/* Button shine */
@keyframes cjfx-button-shine {
  0%,
  20% {
    transform: translateX(-100%) rotate(8deg);
  }
  55%,
  100% {
    transform: translateX(100%) rotate(8deg);
  }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .cjfx-cta {
    min-height: 490px;
    padding: 80px 25px;
  }
  .cjfx-title {
    font-size: clamp(36px, 5vw, 54px);
  }
}
/* Mobile */
@media (max-width: 767px) {
  .cjfx-cta {
    min-height: auto;
    padding: 70px 20px 65px;
  }
  .cjfx-cta::before {
    background-position: center;
  }
  .cjfx-eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px;
    margin-bottom: 22px;
  }
  .cjfx-title {
    font-size: clamp(32px, 8vw, 43px);
    line-height: 1.17;
    letter-spacing: -1px;
    margin-bottom: 20px;
  }
  .cjfx-description {
    font-size: 16px;
    line-height: 1.75;
  }
  .cjfx-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 30px;
    gap: 14px;
  }
  .cjfx-btn {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 16px 18px;
    font-size: 15px;
  }
  .cjfx-benefits {
    gap: 13px 18px;
    margin-top: 30px;
  }
  .cjfx-benefit {
    font-size: 12px;
  }
  .cjfx-orb-1,
  .cjfx-orb-2 {
    filter: blur(65px);
  }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .cjfx-cta *,
  .cjfx-cta::before,
  .cjfx-cta::after {
    animation: none !important;
    transition: none !important;
  }
}
/* 窄屏把页面根钳到视口宽：mf 头部/公共组件按 1200px 基准布局，不钳会整页撑宽出横滚
   （根因同 academy.less 平板注释；与 integrationsShoplazza.less 的 html/body 钳制同口径）。 */
@media (max-width: 1199px) {
  html,
  body {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}