/* ==========================================================================
   02 — Thermal Model Overview — extracted from Elementor for Stage 3E Full Page Handoff
   ========================================================================== */
/*
===============================================================================
YUBEEN OPTICS — THERMAL MODEL OVERVIEW STYLESHEET
===============================================================================

样式版本：
v1.3.0

最后修改日期：
2026-08-04

样式作用：
1. 创建第二屏深色背景。
2. 创建2列产品简要概览卡片。
3. 创建浅色Tilt产品视觉区域。
4. 保持型号、参数和CTA稳定。
5. 隐藏后台数据状态。
6. 未发布参数显示为“—”。
7. 创建平板和移动端响应式布局。
8. 支持触摸设备和Reduced Motion。

命名规则：
所有样式使用ybn-tmo3-前缀。
===============================================================================
*/


/*
===============================================================================
01. ROOT VARIABLES AND BASE STYLES
===============================================================================
*/

.ybn-tmo3 {
  --ybn-tmo3-red: #ed2228;

  --ybn-tmo3-bg: #0b0d11;
  --ybn-tmo3-bg-middle: #0d0f14;
  --ybn-tmo3-bg-deep: #07080b;

  --ybn-tmo3-card-bg: #121419;

  --ybn-tmo3-white: #f7f7f8;
  --ybn-tmo3-muted: #9b9ea7;
  --ybn-tmo3-dim: #70737c;

  --ybn-tmo3-border:
    rgba(255, 255, 255, 0.105);

  --ybn-tmo3-border-strong:
    rgba(255, 255, 255, 0.18);

  --ybn-tmo3-visual-top: #fcfbf8;
  --ybn-tmo3-visual-middle: #f1f0eb;
  --ybn-tmo3-visual-bottom: #e4e3de;

  --ybn-tmo3-dark-text: #15161a;
  --ybn-tmo3-dark-muted: #656870;

  --ybn-tmo3-container-width: 1500px;
  --ybn-tmo3-card-radius: 26px;
  --ybn-tmo3-visual-radius: 20px;

  position: relative;
  isolation: isolate;

  width: 100%;
  height: auto;
  min-height: 0;

  overflow-x: clip;
  overflow-y: visible;

  color:
    var(--ybn-tmo3-white);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.065);

  background:
    linear-gradient(
      180deg,
      var(--ybn-tmo3-bg) 0%,
      var(--ybn-tmo3-bg-middle) 50%,
      var(--ybn-tmo3-bg-deep) 100%
    );

  font-family: inherit;
}


.ybn-tmo3 *,
.ybn-tmo3 *::before,
.ybn-tmo3 *::after {
  box-sizing: border-box;
}


.ybn-tmo3 a {
  color: inherit;
  text-decoration: none;
}


/*
===============================================================================
02. DECORATIVE BACKGROUND
===============================================================================
*/

.ybn-tmo3-background {
  position: absolute;
  inset: 0;
  z-index: -1;

  overflow: hidden;
  pointer-events: none;
}


.ybn-tmo3-background__glow {
  position: absolute;

  width: 720px;
  height: 720px;

  border-radius: 50%;

  opacity: 0.085;
  filter: blur(150px);
}


.ybn-tmo3-background__glow--left {
  left: -520px;
  top: 10%;

  background: #761116;
}


.ybn-tmo3-background__glow--right {
  right: -530px;
  bottom: -350px;

  background: #a2161c;
}


.ybn-tmo3-background__grid {
  position: absolute;
  inset: 0;

  opacity: 0.06;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 16%,
      #000 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 16%,
      #000 88%,
      transparent 100%
    );
}


/*
===============================================================================
03. MAIN CONTAINER
===============================================================================
*/

.ybn-tmo3-container {
  width:
    min(
      100%,
      var(--ybn-tmo3-container-width)
    );

  margin-inline: auto;

  padding:
    clamp(70px, 6vw, 100px)
    clamp(24px, 4vw, 58px)
    clamp(72px, 5.5vw, 96px);
}


/*
===============================================================================
04. SECTION HEADER
===============================================================================
*/

.ybn-tmo3-header {
  position: relative;
  z-index: 4;

  max-width: 880px;

  margin-bottom:
    clamp(34px, 3.4vw, 52px);
}


.ybn-tmo3-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin:
    0
    0
    14px;

  color:
    var(--ybn-tmo3-red);

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}


.ybn-tmo3-eyebrow__line {
  width: 29px;
  height: 1px;

  background: currentColor;
}


.ybn-tmo3-heading {
  max-width: 850px;

  margin: 0;

  color:
    var(--ybn-tmo3-white);

  font-size:
    clamp(42px, 4.3vw, 67px);

  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.052em;

  text-wrap: balance;
}


.ybn-tmo3-heading > span {
  color:
    var(--ybn-tmo3-red);
}


.ybn-tmo3-introduction {
  max-width: 710px;

  margin:
    clamp(17px, 1.7vw, 23px)
    0
    0;

  color:
    var(--ybn-tmo3-muted);

  font-size:
    clamp(14px, 1.05vw, 16px);

  line-height: 1.66;
}


/*
===============================================================================
05. PRODUCT GRID
===============================================================================
*/

.ybn-tmo3-grid {
  position: relative;
  z-index: 3;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(24px, 2.3vw, 36px);

  align-items: stretch;
}


/*
===============================================================================
06. PRODUCT CARD
===============================================================================
*/

.ybn-tmo3-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  padding:
    clamp(14px, 1.3vw, 20px);

  border:
    1px solid
    var(--ybn-tmo3-border);

  border-radius:
    var(--ybn-tmo3-card-radius);

  background:
    linear-gradient(
      145deg,
      rgba(24, 26, 32, 0.96),
      rgba(14, 16, 21, 0.985)
    );

  box-shadow:
    0 26px 65px
      rgba(0, 0, 0, 0.27),
    inset 0 1px 0
      rgba(255, 255, 255, 0.032);

  transition:
    border-color 240ms ease,
    box-shadow 240ms ease;
}


.ybn-tmo3-card:hover {
  border-color:
    rgba(237, 34, 40, 0.34);

  box-shadow:
    0 34px 76px
      rgba(0, 0, 0, 0.35),
    0 0 0 1px
      rgba(237, 34, 40, 0.06),
    inset 0 1px 0
      rgba(255, 255, 255, 0.045);
}


/*
===============================================================================
07. PRODUCT VISUAL WRAPPER
===============================================================================
*/

.ybn-tmo3-visual {
  position: relative;

  width: 100%;

  height:
    clamp(280px, 23vw, 350px);

  perspective:
    1100px;

  border-radius:
    var(--ybn-tmo3-visual-radius);

  -webkit-tap-highlight-color:
    transparent;
}


/*
===============================================================================
08. TILT PANEL
===============================================================================
*/

.ybn-tmo3-tilt {
  --ybn-tmo3-rx: 0deg;
  --ybn-tmo3-ry: 0deg;
  --ybn-tmo3-scale: 1;
  --ybn-tmo3-mx: 50%;
  --ybn-tmo3-my: 50%;

  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.42);

  border-radius:
    var(--ybn-tmo3-visual-radius);

  background:
    radial-gradient(
      circle at 50% 43%,
      #ffffff 0%,
      var(--ybn-tmo3-visual-top) 28%,
      var(--ybn-tmo3-visual-middle) 65%,
      var(--ybn-tmo3-visual-bottom) 100%
    );

  box-shadow:
    0 22px 43px
      rgba(0, 0, 0, 0.22),
    inset 0 1px 0
      rgba(255, 255, 255, 0.94);

  transform-style:
    preserve-3d;

  transform:
    rotateX(var(--ybn-tmo3-rx))
    rotateY(var(--ybn-tmo3-ry))
    scale(var(--ybn-tmo3-scale));

  will-change:
    transform;

  transition:
    transform
      430ms
      cubic-bezier(0.2, 0.72, 0.2, 1),
    border-color 250ms ease,
    box-shadow 250ms ease;
}


.ybn-tmo3-visual.is-tilting
.ybn-tmo3-tilt {
  border-color:
    rgba(237, 34, 40, 0.28);

  box-shadow:
    0 28px 52px
      rgba(0, 0, 0, 0.27),
    inset 0 1px 0
      rgba(255, 255, 255, 0.97);

  transition:
    transform 90ms linear,
    border-color 250ms ease,
    box-shadow 250ms ease;
}


/*
===============================================================================
09. POINTER GLARE
===============================================================================
*/

.ybn-tmo3-glare {
  position: absolute;
  inset: 0;
  z-index: 6;

  opacity: 0;

  background:
    radial-gradient(
      circle at
      var(--ybn-tmo3-mx)
      var(--ybn-tmo3-my),
      rgba(255, 255, 255, 0.27) 0%,
      rgba(255, 255, 255, 0.08) 21%,
      transparent 49%
    );

  pointer-events: none;

  transform:
    translateZ(50px);

  transition:
    opacity 220ms ease;
}


.ybn-tmo3-visual.is-tilting
.ybn-tmo3-glare {
  opacity: 0.36;
}


/*
===============================================================================
10. PRODUCT HALO
===============================================================================
*/

.ybn-tmo3-halo {
  position: absolute;
  z-index: 1;

  left: 18%;
  right: 18%;
  top: 20%;
  bottom: 13%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(237, 34, 40, 0.11) 0%,
      rgba(237, 34, 40, 0.038) 46%,
      transparent 74%
    );

  filter:
    blur(15px);

  transform:
    translateZ(8px)
    scaleX(1.28);

  pointer-events: none;
}


/*
===============================================================================
11. VISUAL LABEL
===============================================================================
*/

.ybn-tmo3-visual-label {
  position: absolute;
  z-index: 5;

  left:
    clamp(18px, 1.7vw, 26px);

  top:
    clamp(17px, 1.6vw, 24px);

  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding:
    8px
    12px;

  border:
    1px solid
    rgba(21, 22, 26, 0.10);

  border-radius: 999px;

  color:
    var(--ybn-tmo3-dark-text);

  background:
    rgba(255, 255, 255, 0.58);

  box-shadow:
    0 9px 24px
      rgba(0, 0, 0, 0.085);

  backdrop-filter:
    blur(10px);

  transform:
    translateZ(42px);

  pointer-events: none;
}


.ybn-tmo3-visual-index {
  color:
    var(--ybn-tmo3-red);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
}


.ybn-tmo3-visual-family {
  color:
    var(--ybn-tmo3-dark-muted);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/*
===============================================================================
12. PRODUCT IMAGE
===============================================================================
*/

.ybn-tmo3-product-image {
  position: absolute;
  z-index: 3;

  left: 50%;
  top: 53%;

  width: 84%;
  height: 74%;

  object-fit: contain;
  object-position: center;

  pointer-events: none;

  filter:
    brightness(1.10)
    contrast(0.99)
    saturate(0.93)
    drop-shadow(
      0 24px 20px
      rgba(0, 0, 0, 0.22)
    );

  transform:
    translate3d(
      -50%,
      -50%,
      28px
    )
    scale(1.01);

  will-change:
    transform;

  transition:
    filter 260ms ease;
}


.ybn-tmo3-visual.is-tilting
.ybn-tmo3-product-image {
  filter:
    brightness(1.13)
    contrast(1)
    saturate(0.95)
    drop-shadow(
      0 28px 23px
      rgba(0, 0, 0, 0.26)
    );
}


/*
===============================================================================
13. FIXED CONTENT AREA
===============================================================================
*/

.ybn-tmo3-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding:
    clamp(24px, 2.1vw, 33px)
    clamp(7px, 0.8vw, 12px)
    clamp(8px, 0.8vw, 12px);
}


.ybn-tmo3-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;
}


.ybn-tmo3-series {
  margin:
    0
    0
    7px;

  color:
    var(--ybn-tmo3-red);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.ybn-tmo3-model {
  margin: 0;

  color:
    var(--ybn-tmo3-white);

  font-size:
    clamp(30px, 2.45vw, 42px);

  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
}


/*
===============================================================================
14. PRODUCT DESCRIPTION
===============================================================================
*/

.ybn-tmo3-description {
  max-width: 590px;
  min-height: 46px;

  margin:
    15px
    0
    0;

  color:
    var(--ybn-tmo3-muted);

  font-size:
    clamp(12px, 0.92vw, 14px);

  line-height: 1.65;
}


/*
===============================================================================
15. CORE SPECIFICATIONS
===============================================================================
*/

.ybn-tmo3-specs {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  margin:
    clamp(23px, 1.9vw, 30px)
    0
    0;

  padding:
    17px
    0;

  border-top:
    1px solid
    var(--ybn-tmo3-border);

  border-bottom:
    1px solid
    var(--ybn-tmo3-border);
}


.ybn-tmo3-spec {
  min-width: 0;

  padding:
    0
    clamp(13px, 1.4vw, 21px);

  border-left:
    1px solid
    var(--ybn-tmo3-border);
}


.ybn-tmo3-spec:first-child {
  padding-left: 0;
  border-left: 0;
}


.ybn-tmo3-spec:last-child {
  padding-right: 0;
}


.ybn-tmo3-spec dt {
  margin:
    0
    0
    10px;

  color:
    var(--ybn-tmo3-dim);

  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.ybn-tmo3-spec dd {
  min-height: 22px;

  margin: 0;

  color:
    var(--ybn-tmo3-white);

  font-size:
    clamp(15px, 1.18vw, 20px);

  font-weight: 500;
  line-height: 1.2;

  overflow-wrap: anywhere;
}


.ybn-tmo3-value {
  display: inline-block;
}


/*
加载期间显示克制的Skeleton。

如果数据尚未发布或接口不可用，
最终显示“—”。
*/
.ybn-tmo3-card[data-ybn-data-state="loading"]
.ybn-tmo3-value {
  min-width: 48px;
  min-height: 13px;

  border-radius: 999px;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.05)
    );

  background-size:
    200% 100%;

  animation:
    ybn-tmo3-loading
    1.45s
    linear
    infinite;
}


@keyframes ybn-tmo3-loading {

  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }

}


/*
无数据时使用低层级破折号。
*/
.ybn-tmo3-card[data-ybn-data-state="empty"]
.ybn-tmo3-spec dd,
.ybn-tmo3-card[data-ybn-data-state="error"]
.ybn-tmo3-spec dd {
  color:
    #7f828b;
}


/*
===============================================================================
16. CARD FOOTER
===============================================================================
*/

.ybn-tmo3-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin-top: auto;

  padding-top:
    clamp(21px, 1.8vw, 28px);
}


/*
===============================================================================
17. PRODUCT BUTTON
===============================================================================
*/

.ybn-tmo3-button {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  padding:
    11px
    17px;

  border:
    1px solid
    var(--ybn-tmo3-border-strong);

  border-radius: 999px;

  color:
    var(--ybn-tmo3-white);

  background:
    rgba(255, 255, 255, 0.035);

  font-size: 11px;
  font-weight: 600;

  transition:
    color 200ms ease,
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}


.ybn-tmo3-button:hover {
  color: #ffffff;

  border-color:
    var(--ybn-tmo3-red);

  background:
    var(--ybn-tmo3-red);

  transform:
    translateY(-2px);
}


.ybn-tmo3-button__arrow {
  font-size: 16px;

  transition:
    transform 200ms ease;
}


.ybn-tmo3-button:hover
.ybn-tmo3-button__arrow {
  transform:
    translateX(4px);
}





/*
===============================================================================
19. MEDIUM DESKTOP
===============================================================================
*/

@media (max-width: 1240px) {

  .ybn-tmo3-container {
    padding-left: 28px;
    padding-right: 28px;
  }


  .ybn-tmo3-visual {
    height: 300px;
  }


  .ybn-tmo3-product-image {
    width: 88%;
  }


  .ybn-tmo3-content {
    padding-top: 27px;
  }

}


/*
===============================================================================
20. TABLET
===============================================================================
*/

@media (max-width: 980px) {

  .ybn-tmo3-grid {
    grid-template-columns: 1fr;
  }


  .ybn-tmo3-card {
    width: 100%;
    max-width: 780px;

    margin-inline: auto;
  }


  .ybn-tmo3-visual {
    height:
      clamp(300px, 49vw, 390px);
  }


  .ybn-tmo3-product-image {
    width: 78%;
  }

}


/*
===============================================================================
21. MOBILE
===============================================================================
*/

@media (max-width: 767px) {

  .ybn-tmo3-container {
    padding:
      60px
      16px
      68px;
  }


  .ybn-tmo3-header {
    margin-bottom: 32px;
  }


  .ybn-tmo3-heading {
    font-size:
      clamp(39px, 11vw, 54px);
  }


  .ybn-tmo3-introduction {
    font-size: 14px;
  }


  .ybn-tmo3-grid {
    gap: 21px;
  }


  .ybn-tmo3-card {
    padding: 12px;

    border-radius: 22px;
  }


  .ybn-tmo3-visual {
    height:
      clamp(245px, 72vw, 320px);

    perspective: none;
  }


  .ybn-tmo3-tilt {
    border-radius: 17px;
  }


  .ybn-tmo3-product-image {
    width: 91%;
    height: 69%;
  }


  .ybn-tmo3-content {
    padding:
      24px
      7px
      8px;
  }


  .ybn-tmo3-model {
    font-size: 33px;
  }


  .ybn-tmo3-description {
    min-height: 0;

    font-size: 13px;
  }


  .ybn-tmo3-specs {
    margin-top: 22px;
  }


  .ybn-tmo3-button {
    width: 100%;
  }


  .ybn-tmo3-page-note {
    width: 100%;

    border-radius: 18px;
  }

}


/*
===============================================================================
22. SMALL MOBILE
===============================================================================
*/

@media (max-width: 430px) {

  .ybn-tmo3-container {
    padding-left: 13px;
    padding-right: 13px;
  }


  .ybn-tmo3-visual-label {
    left: 15px;
    top: 15px;
  }


  /*
  小手机将三项参数改为纵向列表。
  */
  .ybn-tmo3-specs {
    grid-template-columns: 1fr;

    padding:
      3px
      0;
  }


  .ybn-tmo3-spec,
  .ybn-tmo3-spec:first-child,
  .ybn-tmo3-spec:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
      13px
      0;

    border-left: 0;

    border-top:
      1px solid
      var(--ybn-tmo3-border);
  }


  .ybn-tmo3-spec:first-child {
    border-top: 0;
  }


  .ybn-tmo3-spec dt {
    margin: 0;
  }


  .ybn-tmo3-spec dd {
    text-align: right;
  }

}


/*
===============================================================================
23. TOUCH DEVICES
===============================================================================
*/

@media (hover: none), (pointer: coarse) {

  .ybn-tmo3-tilt {
    transform: none !important;

    transition: none !important;
  }


  .ybn-tmo3-glare {
    display: none;
  }

}


/*
===============================================================================
24. REDUCED MOTION
===============================================================================
*/

@media (prefers-reduced-motion: reduce) {

  .ybn-tmo3-card,
  .ybn-tmo3-tilt,
  .ybn-tmo3-glare,
  .ybn-tmo3-product-image,
  .ybn-tmo3-button,
  .ybn-tmo3-button__arrow,
  .ybn-tmo3-value {
    transition-duration:
      1ms !important;

    animation-duration:
      1ms !important;
  }


  .ybn-tmo3-tilt {
    transform: none !important;
  }


  .ybn-tmo3-glare {
    display: none;
  }

}


/* ==========================================================================
   03 — Thermal Selection Guide — extracted from Elementor for Stage 3E Full Page Handoff
   ========================================================================== */
/*
===============================================================================
YUBEEN OPTICS — THERMAL SELECTION GUIDE STYLESHEET
===============================================================================

样式版本：
v3.0.0

命名规则：
所有Class使用ybn-tsg5-前缀。

设计原则：
1. 三段结构统一。
2. 图片不再套额外卡片。
3. 图片不再使用复杂裁切。
4. 三张图片使用相同的基础媒体逻辑。
5. 仅通过浅 / 深 / 浅背景形成节奏。
6. 不使用鼠标交互和持续动画。
===============================================================================
*/


/*
===============================================================================
01. ROOT VARIABLES
===============================================================================
*/

.ybn-tsg5 {
  --ybn-tsg5-red: #ed2228;

  --ybn-tsg5-ink: #111216;
  --ybn-tsg5-ink-soft: #55585f;

  --ybn-tsg5-white: #f7f7f8;
  --ybn-tsg5-white-soft:
    rgba(255, 255, 255, 0.74);

  --ybn-tsg5-intro-bg: #f7f5f0;
  --ybn-tsg5-detail-bg: #efede7;
  --ybn-tsg5-range-bg: #e7e8e4;

  --ybn-tsg5-dark: #080a0e;
  --ybn-tsg5-dark-soft: #101319;

  --ybn-tsg5-line-dark:
    rgba(17, 18, 22, 0.15);

  --ybn-tsg5-line-light:
    rgba(255, 255, 255, 0.16);

  --ybn-tsg5-shell-width: 1500px;

  position: relative;

  width: 100%;
  height: auto;
  min-height: 0;

  overflow-x: clip;

  font-family: inherit;
}


.ybn-tsg5 *,
.ybn-tsg5 *::before,
.ybn-tsg5 *::after {
  box-sizing: border-box;
}


.ybn-tsg5 h2,
.ybn-tsg5 h3,
.ybn-tsg5 p,
.ybn-tsg5 figure {
  margin-top: 0;
}


/*
===============================================================================
02. SHARED SHELL
===============================================================================
*/

.ybn-tsg5-shell {
  width:
    min(
      100%,
      var(--ybn-tsg5-shell-width)
    );

  margin-inline: auto;

  padding-inline:
    clamp(24px, 4vw, 58px);
}


/*
===============================================================================
03. COMPACT INTRO
===============================================================================
*/

.ybn-tsg5-intro {
  color:
    var(--ybn-tsg5-ink);

  background:
    linear-gradient(
      180deg,
      #faf8f4 0%,
      var(--ybn-tsg5-intro-bg) 100%
    );

  border-top:
    1px solid
    rgba(17, 18, 22, 0.08);
}


.ybn-tsg5-intro__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(330px, 0.82fr);

  align-items: end;

  gap:
    clamp(48px, 6.5vw, 104px);

  padding-top:
    clamp(62px, 5.4vw, 86px);

  padding-bottom:
    clamp(42px, 3.8vw, 58px);
}


.ybn-tsg5-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 15px;

  color:
    var(--ybn-tsg5-red);

  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}


.ybn-tsg5-eyebrow__line {
  width: 30px;
  height: 1px;

  background:
    currentColor;
}


.ybn-tsg5-heading {
  max-width: 860px;

  margin-bottom: 0;

  color:
    var(--ybn-tsg5-ink);

  font-size:
    clamp(46px, 5.05vw, 79px);

  font-weight: 680;
  line-height: 0.94;
  letter-spacing: -0.058em;

  text-wrap: balance;
}


.ybn-tsg5-heading > span {
  display: block;

  color:
    var(--ybn-tsg5-red);
}


.ybn-tsg5-intro__copy {
  max-width: 520px;

  justify-self: end;
}


.ybn-tsg5-intro__copy > p {
  margin-bottom: 20px;

  color:
    var(--ybn-tsg5-ink-soft);

  font-size:
    clamp(15px, 1.06vw, 17px);

  line-height: 1.7;
}


.ybn-tsg5-intro__dimensions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px 12px;

  padding-top: 15px;

  border-top:
    1px solid
    var(--ybn-tsg5-line-dark);
}


.ybn-tsg5-intro__dimensions > span {
  color:
    #656870;

  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.025em;
}


.ybn-tsg5-intro__dimensions > i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    var(--ybn-tsg5-red);

  opacity: 0.74;
}


/*
===============================================================================
04. SECTION BASE
===============================================================================
*/

.ybn-tsg5-section {
  position: relative;

  width: 100%;
}


.ybn-tsg5-section__layout {
  display: grid;

  grid-template-columns:
    minmax(315px, 0.78fr)
    minmax(0, 1.22fr);

  align-items: center;

  gap:
    clamp(54px, 7vw, 112px);

  padding-top:
    clamp(70px, 6.2vw, 96px);

  padding-bottom:
    clamp(74px, 6.5vw, 100px);
}


.ybn-tsg5-section__layout--reverse {
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(315px, 0.8fr);
}


/*
===============================================================================
05. SECTION BACKGROUNDS
===============================================================================
*/

.ybn-tsg5-section--light {
  color:
    var(--ybn-tsg5-ink);

  background:
    linear-gradient(
      180deg,
      var(--ybn-tsg5-detail-bg) 0%,
      #eceae4 100%
    );

  border-top:
    1px solid
    rgba(17, 18, 22, 0.055);
}


.ybn-tsg5-section--dark {
  color:
    var(--ybn-tsg5-white);

  background:
    radial-gradient(
      circle at 18% 46%,
      rgba(237, 34, 40, 0.07),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--ybn-tsg5-dark) 0%,
      var(--ybn-tsg5-dark-soft) 100%
    );
}


.ybn-tsg5-section--soft {
  color:
    var(--ybn-tsg5-ink);

  background:
    linear-gradient(
      180deg,
      #ecece8 0%,
      var(--ybn-tsg5-range-bg) 100%
    );
}


/*
===============================================================================
06. COPY
===============================================================================
*/

.ybn-tsg5-copy {
  max-width: 590px;
}


.ybn-tsg5-kicker {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom:
    clamp(20px, 1.8vw, 27px);
}


.ybn-tsg5-kicker__number {
  color:
    var(--ybn-tsg5-red);

  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}


.ybn-tsg5-kicker__line {
  width: 28px;
  height: 1px;

  background:
    var(--ybn-tsg5-red);
}


.ybn-tsg5-kicker__label {
  color:
    var(--ybn-tsg5-red);

  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


.ybn-tsg5-title {
  max-width: 620px;

  margin-bottom:
    clamp(18px, 1.7vw, 24px);

  font-size:
    clamp(42px, 4.05vw, 64px);

  font-weight: 670;
  line-height: 0.98;
  letter-spacing: -0.055em;

  text-wrap: balance;
}


.ybn-tsg5-title > span {
  display: block;
}


.ybn-tsg5-description {
  max-width: 565px;

  margin-bottom:
    clamp(25px, 2.3vw, 35px);

  font-size:
    clamp(15px, 1.05vw, 17px);

  line-height: 1.72;
}


.ybn-tsg5-section--light
.ybn-tsg5-description,
.ybn-tsg5-section--soft
.ybn-tsg5-description {
  color:
    #575a61;
}


.ybn-tsg5-section--dark
.ybn-tsg5-description {
  color:
    var(--ybn-tsg5-white-soft);
}


/*
===============================================================================
07. SPEC LINE
===============================================================================
*/

.ybn-tsg5-spec-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px 13px;

  padding-top: 17px;

  border-top:
    1px solid
    currentColor;
}


.ybn-tsg5-section--light
.ybn-tsg5-spec-line,
.ybn-tsg5-section--soft
.ybn-tsg5-spec-line {
  border-color:
    var(--ybn-tsg5-line-dark);
}


.ybn-tsg5-section--dark
.ybn-tsg5-spec-line {
  border-color:
    var(--ybn-tsg5-line-light);
}


.ybn-tsg5-spec-line > span {
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.02em;
}


.ybn-tsg5-section--light
.ybn-tsg5-spec-line > span,
.ybn-tsg5-section--soft
.ybn-tsg5-spec-line > span {
  color:
    #5e6168;
}


.ybn-tsg5-section--dark
.ybn-tsg5-spec-line > span {
  color:
    rgba(255, 255, 255, 0.68);
}


.ybn-tsg5-spec-line > i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    var(--ybn-tsg5-red);
}


/*
===============================================================================
08. MEDIA — FRAMELESS EDITORIAL VISUAL
===============================================================================
*/

.ybn-tsg5-media {
  min-width: 0;

  width: 100%;

  margin: 0;

  justify-self: stretch;
}


.ybn-tsg5-media__image {
  display: block;

  width: 100%;
  height: auto;

  border-radius:
    clamp(18px, 1.8vw, 28px);

  object-fit: cover;

  transform:
    scale(1.012);

  transition:
    transform
    760ms
    cubic-bezier(0.18, 0.72, 0.2, 1);

  will-change:
    transform;
}


.ybn-tsg5-media.is-visible
.ybn-tsg5-media__image {
  transform:
    scale(1);
}


/*
Image Detail：
源图的浅色外部背景与章节背景接近，
因此不增加额外边框或阴影。
*/
.ybn-tsg5-media--detail {
  max-width: 930px;

  justify-self: end;
}


.ybn-tsg5-media--detail
.ybn-tsg5-media__image {
  box-shadow: none;
}


/*
Viewing Configuration：
深色图片与深色章节自然融合，
仅保留极轻的轮廓线。
*/
.ybn-tsg5-media--viewing {
  max-width: 920px;

  justify-self: start;
}


.ybn-tsg5-media--viewing
.ybn-tsg5-media__image {
  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  box-shadow:
    0 24px 58px
    rgba(0, 0, 0, 0.24);
}


/*
Range Support：
源图的浅灰背景与章节背景接近，
同样不增加外层卡片。
*/
.ybn-tsg5-media--range {
  max-width: 940px;

  justify-self: end;
}


.ybn-tsg5-media--range
.ybn-tsg5-media__image {
  box-shadow: none;
}


/*
===============================================================================
09. SCROLL REVEAL
===============================================================================
*/

.ybn-tsg5.is-enhanced
[data-ybn-tsg5-reveal] {
  opacity: 0;

  transform:
    translateY(14px);

  transition:
    opacity
    640ms
    cubic-bezier(0.2, 0.72, 0.2, 1)
    var(--ybn-tsg5-delay, 0ms),
    transform
    640ms
    cubic-bezier(0.2, 0.72, 0.2, 1)
    var(--ybn-tsg5-delay, 0ms);
}


.ybn-tsg5.is-enhanced
[data-ybn-tsg5-reveal].is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/*
===============================================================================
10. MEDIUM DESKTOP
===============================================================================
*/

@media (max-width: 1200px) {

  .ybn-tsg5-shell {
    padding-inline: 28px;
  }


  .ybn-tsg5-intro__layout {
    gap: 52px;
  }


  .ybn-tsg5-section__layout,
  .ybn-tsg5-section__layout--reverse {
    gap: 60px;
  }

}


/*
===============================================================================
11. TABLET
===============================================================================
*/

@media (max-width: 980px) {

  .ybn-tsg5-intro__layout {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 27px;
  }


  .ybn-tsg5-intro__copy {
    max-width: 720px;

    justify-self: start;
  }


  .ybn-tsg5-section__layout,
  .ybn-tsg5-section__layout--reverse {
    grid-template-columns: 1fr;

    gap: 36px;
  }


  .ybn-tsg5-copy {
    max-width: 740px;
  }


  /*
  平板和移动端统一先读文字，再看图片。
  */
  .ybn-tsg5-section__layout--reverse
  .ybn-tsg5-media {
    order: 2;
  }


  .ybn-tsg5-section__layout--reverse
  .ybn-tsg5-copy {
    order: 1;
  }


  .ybn-tsg5-media--detail,
  .ybn-tsg5-media--viewing,
  .ybn-tsg5-media--range {
    max-width: none;
  }

}


/*
===============================================================================
12. MOBILE
===============================================================================
*/

@media (max-width: 767px) {

  .ybn-tsg5-shell {
    padding-inline: 16px;
  }


  .ybn-tsg5-intro__layout {
    padding-top: 54px;
    padding-bottom: 44px;
  }


  .ybn-tsg5-heading {
    font-size:
      clamp(42px, 12.2vw, 58px);
  }


  .ybn-tsg5-intro__copy > p {
    font-size: 14.5px;
  }


  .ybn-tsg5-intro__dimensions {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }


  .ybn-tsg5-intro__dimensions > i {
    display: none;
  }


  .ybn-tsg5-section__layout,
  .ybn-tsg5-section__layout--reverse {
    gap: 28px;

    padding-top: 54px;
    padding-bottom: 58px;
  }


  .ybn-tsg5-title {
    font-size:
      clamp(39px, 11vw, 52px);
  }


  .ybn-tsg5-description {
    font-size: 14.5px;
  }


  .ybn-tsg5-spec-line {
    align-items: flex-start;
    flex-direction: column;

    gap: 6px;
  }


  .ybn-tsg5-spec-line > i {
    display: none;
  }


  .ybn-tsg5-spec-line > span {
    font-size: 10.5px;
  }


  .ybn-tsg5-media__image {
    border-radius: 20px;
  }

}


/*
===============================================================================
13. SMALL MOBILE
===============================================================================
*/

@media (max-width: 430px) {

  .ybn-tsg5-shell {
    padding-inline: 13px;
  }

}


/*
===============================================================================
14. REDUCED MOTION
===============================================================================
*/

@media (prefers-reduced-motion: reduce) {

  .ybn-tsg5.is-enhanced
  [data-ybn-tsg5-reveal] {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }


  .ybn-tsg5-media__image {
    transform: none !important;

    transition: none !important;
  }

}


/* ==========================================================================
   04 — Thermal Selection Support — extracted from Elementor for Stage 3E Full Page Handoff
   ========================================================================== */
/*
===============================================================================
YUBEEN OPTICS — THERMAL SELECTION SUPPORT STYLESHEET
===============================================================================

样式版本：
v1.0.0

命名规则：
所有Class使用ybn-tss1-前缀。

视觉重点：
1. 全宽深色CTA。
2. 不使用外层圆角卡片。
3. 左侧编辑式标题，右侧行动区。
4. Aurora仅为极弱背景变化。
5. 主按钮Hover时才显示Border Glow和Specular Sweep。
===============================================================================
*/


/*
===============================================================================
01. ROOT VARIABLES
===============================================================================
*/

.ybn-tss1 {
  --ybn-tss1-red: #ed2228;
  --ybn-tss1-red-light: #ff3b40;
  --ybn-tss1-red-dark: #b8171c;

  --ybn-tss1-bg: #080a0e;
  --ybn-tss1-bg-soft: #0d1016;

  --ybn-tss1-white: #f7f7f8;
  --ybn-tss1-muted: rgba(255, 255, 255, 0.70);
  --ybn-tss1-dim: rgba(255, 255, 255, 0.48);

  --ybn-tss1-border:
    rgba(255, 255, 255, 0.13);

  --ybn-tss1-shell-width: 1500px;

  position: relative;
  isolation: isolate;

  width: 100%;
  height: auto;
  min-height: 0;

  overflow: hidden;

  color:
    var(--ybn-tss1-white);

  background:
    linear-gradient(
      135deg,
      var(--ybn-tss1-bg) 0%,
      var(--ybn-tss1-bg-soft) 100%
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

  font-family: inherit;
}


.ybn-tss1 *,
.ybn-tss1 *::before,
.ybn-tss1 *::after {
  box-sizing: border-box;
}


.ybn-tss1 h2,
.ybn-tss1 p {
  margin-top: 0;
}


.ybn-tss1 a {
  color: inherit;
  text-decoration: none;
}


/*
===============================================================================
02. BACKGROUND
===============================================================================
*/

.ybn-tss1-background {
  position: absolute;
  inset: 0;
  z-index: -1;

  overflow: hidden;
  pointer-events: none;
}


.ybn-tss1-aurora {
  position: absolute;

  width: 620px;
  height: 620px;

  border-radius: 50%;

  filter:
    blur(145px);

  will-change:
    transform;
}


.ybn-tss1-aurora--red {
  right: -260px;
  top: -330px;

  opacity: 0.14;

  background:
    rgba(237, 34, 40, 0.72);

  animation:
    ybn-tss1-aurora-red
    19s
    ease-in-out
    infinite alternate;
}


.ybn-tss1-aurora--neutral {
  right: 17%;
  bottom: -510px;

  opacity: 0.075;

  background:
    rgba(230, 232, 238, 0.70);

  animation:
    ybn-tss1-aurora-neutral
    23s
    ease-in-out
    infinite alternate;
}


@keyframes ybn-tss1-aurora-red {

  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(-28px, 22px, 0)
      scale(1.06);
  }

}


@keyframes ybn-tss1-aurora-neutral {

  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(22px, -18px, 0)
      scale(1.05);
  }

}


/*
光学弧线：
仅在右侧背景中出现。
*/
.ybn-tss1-ring {
  position: absolute;

  right:
    clamp(-310px, -16vw, -150px);

  top: 50%;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 50%;

  transform:
    translateY(-50%);

  opacity: 0.78;
}


.ybn-tss1-ring--one {
  width: 620px;
  height: 620px;
}


.ybn-tss1-ring--two {
  width: 760px;
  height: 760px;

  border-color:
    rgba(237, 34, 40, 0.052);
}


.ybn-tss1-ring--three {
  width: 920px;
  height: 920px;

  border-color:
    rgba(255, 255, 255, 0.035);
}


.ybn-tss1-grid {
  position: absolute;
  inset: 0;

  opacity: 0.035;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    );

  background-size:
    64px 64px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      #000 74%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      #000 74%,
      transparent 100%
    );
}


/*
===============================================================================
03. LAYOUT
===============================================================================
*/

.ybn-tss1-shell {
  width:
    min(
      100%,
      var(--ybn-tss1-shell-width)
    );

  margin-inline: auto;

  padding-inline:
    clamp(24px, 4vw, 58px);
}


.ybn-tss1-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(320px, 0.72fr);

  align-items: center;

  gap:
    clamp(62px, 8vw, 132px);

  min-height:
    clamp(360px, 29vw, 430px);

  padding-top:
    clamp(72px, 6vw, 94px);

  padding-bottom:
    clamp(72px, 6vw, 94px);
}


/*
===============================================================================
04. COPY
===============================================================================
*/

.ybn-tss1-copy {
  max-width: 820px;
}


.ybn-tss1-eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 16px;

  color:
    var(--ybn-tss1-red);

  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}


.ybn-tss1-eyebrow__line {
  width: 30px;
  height: 1px;

  background:
    currentColor;
}


.ybn-tss1-heading {
  max-width: 850px;

  margin-bottom:
    clamp(20px, 1.8vw, 27px);

  color:
    var(--ybn-tss1-white);

  font-size:
    clamp(43px, 4.45vw, 70px);

  font-weight: 670;
  line-height: 0.97;
  letter-spacing: -0.055em;

  text-wrap: balance;
}


.ybn-tss1-heading > span {
  display: block;

  color:
    var(--ybn-tss1-red);
}


.ybn-tss1-description {
  max-width: 680px;

  margin-bottom:
    clamp(26px, 2.5vw, 36px);

  color:
    var(--ybn-tss1-muted);

  font-size:
    clamp(15px, 1.05vw, 17px);

  line-height: 1.72;
}


.ybn-tss1-focus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px 13px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.12);
}


.ybn-tss1-focus > span {
  color:
    rgba(255, 255, 255, 0.58);

  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.025em;
}


.ybn-tss1-focus > i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    var(--ybn-tss1-red);
}


/*
===============================================================================
05. ACTION AREA
===============================================================================
*/

.ybn-tss1-actions {
  position: relative;

  display: flex;
  flex-direction: column;

  align-items: stretch;

  width: 100%;
  max-width: 420px;

  justify-self: end;

  padding-left:
    clamp(30px, 3.6vw, 54px);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.12);
}


.ybn-tss1-actions__label {
  margin-bottom: 16px;

  color:
    var(--ybn-tss1-dim);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


/*
===============================================================================
06. BUTTON BASE
===============================================================================
*/

.ybn-tss1-button {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  overflow: hidden;

  padding:
    15px
    20px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 650;
  line-height: 1;

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}


.ybn-tss1-button + .ybn-tss1-button {
  margin-top: 12px;
}


.ybn-tss1-button:hover {
  transform:
    translateY(-2px);
}


.ybn-tss1-button__text,
.ybn-tss1-button__arrow {
  position: relative;
  z-index: 4;
}


.ybn-tss1-button__arrow {
  font-size: 18px;

  transition:
    transform 200ms ease;
}


.ybn-tss1-button:hover
.ybn-tss1-button__arrow {
  transform:
    translateX(4px);
}


/*
===============================================================================
07. PRIMARY BUTTON — BORDER GLOW + SPECULAR SWEEP
===============================================================================
*/

.ybn-tss1-button--primary {
  color: #ffffff;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  background:
    linear-gradient(
      135deg,
      var(--ybn-tss1-red) 0%,
      #d91d23 100%
    );

  box-shadow:
    0 15px 36px
    rgba(237, 34, 40, 0.20);
}


/*
边缘高光：
只在Hover / Focus时出现。
*/
.ybn-tss1-button--primary::before {
  content: "";

  position: absolute;
  inset: -1px;
  z-index: 1;

  border-radius: inherit;

  opacity: 0;

  background:
    conic-gradient(
      from 210deg,
      transparent 0deg,
      transparent 260deg,
      rgba(255, 255, 255, 0.72) 300deg,
      rgba(255, 180, 180, 0.45) 324deg,
      transparent 350deg
    );

  transition:
    opacity 180ms ease;

  pointer-events: none;
}


/*
将高光限制在边缘区域。
*/
.ybn-tss1-button--primary::after {
  content: "";

  position: absolute;
  z-index: 3;

  top: -40%;
  left: -44%;

  width: 34%;
  height: 180%;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.13),
      transparent
    );

  transform:
    skewX(-20deg);

  pointer-events: none;
}


.ybn-tss1-button--primary:hover,
.ybn-tss1-button--primary:focus-visible {
  background:
    linear-gradient(
      135deg,
      var(--ybn-tss1-red-light) 0%,
      var(--ybn-tss1-red) 100%
    );

  box-shadow:
    0 19px 44px
    rgba(237, 34, 40, 0.29);
}


.ybn-tss1-button--primary:hover::before,
.ybn-tss1-button--primary:focus-visible::before {
  opacity: 0.52;

  animation:
    ybn-tss1-border-glow
    760ms
    ease
    1;
}


.ybn-tss1-button--primary:hover::after,
.ybn-tss1-button--primary:focus-visible::after {
  opacity: 1;

  animation:
    ybn-tss1-specular-sweep
    680ms
    ease
    1;
}


@keyframes ybn-tss1-border-glow {

  from {
    transform:
      rotate(-24deg);
  }

  to {
    transform:
      rotate(24deg);
  }

}


@keyframes ybn-tss1-specular-sweep {

  from {
    left: -44%;
  }

  to {
    left: 118%;
  }

}


/*
===============================================================================
08. SECONDARY BUTTON
===============================================================================
*/

.ybn-tss1-button--secondary {
  color:
    rgba(255, 255, 255, 0.88);

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  background:
    rgba(255, 255, 255, 0.025);
}


.ybn-tss1-button--secondary:hover,
.ybn-tss1-button--secondary:focus-visible {
  color: #ffffff;

  border-color:
    rgba(255, 255, 255, 0.31);

  background:
    rgba(255, 255, 255, 0.055);
}


/*
===============================================================================
09. ACTION NOTE
===============================================================================
*/

.ybn-tss1-actions__note {
  margin:
    18px
    0
    0;

  color:
    rgba(255, 255, 255, 0.43);

  font-size: 10.5px;
  line-height: 1.55;
}


/*
===============================================================================
10. SCROLL REVEAL
===============================================================================
*/

.ybn-tss1.is-enhanced
[data-ybn-tss1-reveal] {
  opacity: 0;

  transform:
    translateY(14px);

  transition:
    opacity
    650ms
    cubic-bezier(0.2, 0.72, 0.2, 1)
    var(--ybn-tss1-delay, 0ms),
    transform
    650ms
    cubic-bezier(0.2, 0.72, 0.2, 1)
    var(--ybn-tss1-delay, 0ms);
}


.ybn-tss1.is-enhanced
[data-ybn-tss1-reveal].is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/*
===============================================================================
11. MEDIUM DESKTOP
===============================================================================
*/

@media (max-width: 1180px) {

  .ybn-tss1-shell {
    padding-inline: 28px;
  }


  .ybn-tss1-layout {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(310px, 0.85fr);

    gap: 70px;
  }

}


/*
===============================================================================
12. TABLET
===============================================================================
*/

@media (max-width: 900px) {

  .ybn-tss1-layout {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .ybn-tss1-copy {
    max-width: 800px;
  }


  .ybn-tss1-actions {
    max-width: 620px;

    justify-self: start;

    padding:
      30px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(255, 255, 255, 0.12);
  }


  .ybn-tss1-ring {
    right: -450px;

    opacity: 0.55;
  }

}


/*
===============================================================================
13. MOBILE
===============================================================================
*/

@media (max-width: 767px) {

  .ybn-tss1-shell {
    padding-inline: 16px;
  }


  .ybn-tss1-layout {
    min-height: 0;

    gap: 38px;

    padding-top: 62px;
    padding-bottom: 66px;
  }


  .ybn-tss1-heading {
    font-size:
      clamp(40px, 11.4vw, 54px);
  }


  .ybn-tss1-description {
    font-size: 14.5px;
  }


  .ybn-tss1-focus {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;
  }


  .ybn-tss1-focus > i {
    display: none;
  }


  .ybn-tss1-actions {
    gap: 0;
  }


  .ybn-tss1-button {
    min-height: 54px;

    font-size: 12.5px;
  }


  .ybn-tss1-aurora,
  .ybn-tss1-ring,
  .ybn-tss1-grid {
    animation: none !important;
  }


  .ybn-tss1-aurora--red {
    right: -430px;
    top: -360px;

    opacity: 0.10;
  }


  .ybn-tss1-aurora--neutral {
    display: none;
  }

}


/*
===============================================================================
14. SMALL MOBILE
===============================================================================
*/

@media (max-width: 430px) {

  .ybn-tss1-shell {
    padding-inline: 13px;
  }


  .ybn-tss1-heading {
    font-size:
      clamp(38px, 11.2vw, 48px);
  }

}


/*
===============================================================================
15. REDUCED MOTION
===============================================================================
*/

@media (prefers-reduced-motion: reduce) {

  .ybn-tss1-aurora {
    animation: none !important;
  }


  .ybn-tss1.is-enhanced
  [data-ybn-tss1-reveal] {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }


  .ybn-tss1-button,
  .ybn-tss1-button__arrow {
    transition: none !important;
  }


  .ybn-tss1-button--primary::before,
  .ybn-tss1-button--primary::after {
    animation: none !important;
  }

}


/* ==========================================================================
   Global — Thermal Page Enhancement — extracted from Elementor for Stage 3E Full Page Handoff
   ========================================================================== */
/*
===============================================================================
YUBEEN OPTICS — THERMAL PAGE ENHANCEMENT STYLESHEET
Final Version: v2.0.0
===============================================================================
*/


/*
===============================================================================
MODULE A — GLOBAL INTERACTION
Stable internal namespace: ybn-ix2-
===============================================================================
*/

/*
===============================================================================
YUBEEN OPTICS — THERMAL INTERACTION LAYER STYLESHEET
===============================================================================

样式版本：
v1.1.1

注意：
本样式是现有页面的“增强层”，不是替换第一屏或第二屏的代码。
===============================================================================
*/


/*
===============================================================================
01. GLOBAL SECTION NAVIGATOR
v1.1.1：
1. 导航保持固定窄轨道。
2. 单个圆点Hover时，仅显示当前项目标签。
3. 自动根据背景切换Dark / Light主题。
4. 统一border-box并强制轨道、按钮和圆点共用同一中心轴。
===============================================================================
*/

/*
动态导航被插入到body中，不会继承第三屏或CTA组件内的box-sizing规则。
旧版的38px宽度因此按content-box计算，左右Padding额外增加，
导致轨道位于整个Padding Box中心，而24px按钮停留在内容区左侧。
这里统一使用border-box，确保38px总宽度、24px内容区和中心轴一致。
*/
.ybn-ix2-nav,
.ybn-ix2-nav *,
.ybn-ix2-nav *::before,
.ybn-ix2-nav *::after {
  box-sizing: border-box;
}

.ybn-ix2-nav {
  --ybn-ix2-nav-red: #ed2228;

  --ybn-ix2-nav-bg:
    rgba(8, 10, 14, 0.82);

  --ybn-ix2-nav-border:
    rgba(255, 255, 255, 0.11);

  --ybn-ix2-nav-track:
    rgba(255, 255, 255, 0.11);

  --ybn-ix2-nav-dot-border:
    rgba(255, 255, 255, 0.46);

  --ybn-ix2-nav-dot-bg:
    #0b0d12;

  --ybn-ix2-nav-dot-ring:
    rgba(8, 10, 14, 0.94);

  --ybn-ix2-tooltip-bg:
    rgba(8, 10, 14, 0.94);

  --ybn-ix2-tooltip-border:
    rgba(255, 255, 255, 0.12);

  --ybn-ix2-tooltip-text:
    rgba(255, 255, 255, 0.94);

  --ybn-ix2-tooltip-number:
    rgba(255, 255, 255, 0.38);

  position: fixed;
  z-index: 9995;

  top: 50%;
  right: 16px;

  width: 38px;

  padding:
    10px
    6px;

  overflow: visible;

  border:
    1px solid
    var(--ybn-ix2-nav-border);

  border-radius: 22px;

  background:
    var(--ybn-ix2-nav-bg);

  box-shadow:
    0 16px 42px
    rgba(0, 0, 0, 0.21);

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);

  transform:
    translateY(-50%);

  transition:
    background 230ms ease,
    border-color 230ms ease,
    box-shadow 230ms ease;

  font-family: inherit;
}


/*
浅色章节主题：
不再出现突兀的黑色遥控器感。
*/
.ybn-ix2-nav[data-ybn-ix2-theme="light"] {
  --ybn-ix2-nav-bg:
    rgba(248, 247, 243, 0.82);

  --ybn-ix2-nav-border:
    rgba(17, 18, 22, 0.13);

  --ybn-ix2-nav-track:
    rgba(17, 18, 22, 0.15);

  --ybn-ix2-nav-dot-border:
    rgba(17, 18, 22, 0.42);

  --ybn-ix2-nav-dot-bg:
    #f5f3ee;

  --ybn-ix2-nav-dot-ring:
    rgba(248, 247, 243, 0.96);

  --ybn-ix2-tooltip-bg:
    rgba(250, 249, 246, 0.97);

  --ybn-ix2-tooltip-border:
    rgba(17, 18, 22, 0.12);

  --ybn-ix2-tooltip-text:
    #15161a;

  --ybn-ix2-tooltip-number:
    rgba(17, 18, 22, 0.43);

  box-shadow:
    0 14px 36px
    rgba(28, 24, 20, 0.12);
}


.ybn-ix2-nav__track {
  position: absolute;

  left: 50%;
  top: 27px;
  bottom: 27px;

  width: 1px;

  background:
    var(--ybn-ix2-nav-track);

  transform:
    translateX(-50%);

  pointer-events: none;
}


.ybn-ix2-nav__progress {
  position: absolute;

  left: 0;
  top: 0;

  width: 1px;
  height:
    var(--ybn-ix2-progress, 0%);

  background:
    linear-gradient(
      180deg,
      var(--ybn-ix2-nav-red),
      rgba(237, 34, 40, 0.36)
    );

  transition:
    height 300ms ease;
}


.ybn-ix2-nav__list {
  position: relative;

  width: 100%;

  display: grid;

  justify-items: center;

  gap: 3px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.ybn-ix2-nav__button {
  position: relative;

  width: 100%;
  min-height: 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 999px;

  color: inherit;
  background: transparent;

  cursor: pointer;

  font: inherit;
}


.ybn-ix2-nav__button:focus-visible {
  outline:
    2px solid
    rgba(237, 34, 40, 0.62);

  outline-offset: 3px;
}


.ybn-ix2-nav__dot {
  position: relative;
  z-index: 2;

  justify-self: center;

  margin: 0;

  width: 7px;
  height: 7px;

  border:
    1px solid
    var(--ybn-ix2-nav-dot-border);

  border-radius: 50%;

  background:
    var(--ybn-ix2-nav-dot-bg);

  box-shadow:
    0 0 0 4px
    var(--ybn-ix2-nav-dot-ring);

  transition:
    width 200ms ease,
    height 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}


.ybn-ix2-nav__button:hover
.ybn-ix2-nav__dot,
.ybn-ix2-nav__button:focus-visible
.ybn-ix2-nav__dot {
  transform:
    scale(1.16);
}


.ybn-ix2-nav__tooltip {
  position: absolute;

  right:
    calc(100% + 14px);

  top: 50%;

  min-width: 154px;

  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr);

  align-items: center;

  gap: 9px;

  padding:
    11px
    13px;

  border:
    1px solid
    var(--ybn-ix2-tooltip-border);

  border-radius: 14px;

  color:
    var(--ybn-ix2-tooltip-text);

  background:
    var(--ybn-ix2-tooltip-bg);

  box-shadow:
    0 14px 38px
    rgba(0, 0, 0, 0.18);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);

  opacity: 0;

  pointer-events: none;

  transform:
    translate3d(
      7px,
      -50%,
      0
    );

  transition:
    opacity 170ms ease,
    transform 220ms
    cubic-bezier(0.2, 0.72, 0.2, 1);

  white-space: nowrap;
}


.ybn-ix2-nav__button:hover
.ybn-ix2-nav__tooltip,
.ybn-ix2-nav__button:focus-visible
.ybn-ix2-nav__tooltip {
  opacity: 1;

  transform:
    translate3d(
      0,
      -50%,
      0
    );
}


.ybn-ix2-nav__number {
  color:
    var(--ybn-ix2-tooltip-number);

  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.09em;
}


.ybn-ix2-nav__label {
  color:
    inherit;

  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.035em;
}


.ybn-ix2-nav__button[aria-current="true"]
.ybn-ix2-nav__dot {
  width: 10px;
  height: 10px;

  border-color:
    var(--ybn-ix2-nav-red);

  background:
    var(--ybn-ix2-nav-red);

  box-shadow:
    0 0 0 4px
      var(--ybn-ix2-nav-dot-ring),
    0 0 17px
      rgba(237, 34, 40, 0.38);
}


.ybn-ix2-nav__button[aria-current="true"]
.ybn-ix2-nav__number {
  color:
    var(--ybn-ix2-nav-red);
}


/*
===============================================================================
02. FIRST SCREEN — MAGNETIC PRODUCT RESPONSE
===============================================================================
*/

.ybn-ix2-hero-card {
  --ybn-ix2-card-x: 0px;
  --ybn-ix2-card-y: 0px;
  --ybn-ix2-image-x: 0px;
  --ybn-ix2-image-y: 0px;
  --ybn-ix2-glint-x: -140%;

  position: relative;
  isolation: isolate;

  translate:
    var(--ybn-ix2-card-x)
    var(--ybn-ix2-card-y);

  transition:
    translate 260ms cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 240ms ease;

  will-change:
    translate;
}


.ybn-ix2-hero-card::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 6;

  border-radius: inherit;

  opacity: 0;

  background:
    linear-gradient(
      112deg,
      transparent 34%,
      rgba(255, 255, 255, 0.28) 48%,
      rgba(255, 255, 255, 0.08) 54%,
      transparent 67%
    );

  clip-path:
    inset(
      0
      round 18px
    );

  pointer-events: none;

  transform:
    translateX(
      var(--ybn-ix2-glint-x)
    );

  transition:
    opacity 170ms ease,
    transform 620ms ease;
}


.ybn-ix2-hero-card[data-ybn-ix2-active="true"] {
  filter:
    drop-shadow(
      0 20px 28px
      rgba(0, 0, 0, 0.16)
    );
}


.ybn-ix2-hero-card[data-ybn-ix2-active="true"]::after {
  opacity: 0.48;

  --ybn-ix2-glint-x: 140%;
}


.ybn-ix2-hero-card
.ybn-ix2-hero-image {
  translate:
    var(--ybn-ix2-image-x)
    var(--ybn-ix2-image-y);

  scale: 1;

  transition:
    translate 280ms cubic-bezier(0.2, 0.72, 0.2, 1),
    scale 280ms cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 230ms ease;

  will-change:
    translate,
    scale;
}


.ybn-ix2-hero-card[data-ybn-ix2-active="true"]
.ybn-ix2-hero-image {
  scale: 1.025;

  filter:
    drop-shadow(
      0 15px 15px
      rgba(0, 0, 0, 0.18)
    );
}


.ybn-ix2-hero-card
.ybn-ix2-hero-arrow {
  rotate: 0deg;

  transition:
    rotate 220ms ease,
    translate 220ms ease,
    opacity 220ms ease;
}


.ybn-ix2-hero-card[data-ybn-ix2-active="true"]
.ybn-ix2-hero-arrow {
  rotate: 22deg;
  translate: 1px -1px;

  opacity: 1;
}


/*
===============================================================================
03. SECOND SCREEN — LOCAL SPOTLIGHT
===============================================================================
*/

.ybn-ix2-overview-card {
  --ybn-ix2-spot-x: 50%;
  --ybn-ix2-spot-y: 42%;

  position: relative;
  isolation: isolate;
}


.ybn-ix2-overview-card::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  opacity: 0;

  background:
    radial-gradient(
      420px circle at
      var(--ybn-ix2-spot-x)
      var(--ybn-ix2-spot-y),
      rgba(237, 34, 40, 0.105) 0%,
      rgba(237, 34, 40, 0.038) 31%,
      transparent 67%
    );

  pointer-events: none;

  transition:
    opacity 230ms ease;
}


.ybn-ix2-overview-card[data-ybn-ix2-active="true"]::before {
  opacity: 1;
}


.ybn-ix2-overview-card
.ybn-ix2-overview-visual {
  transition:
    border-color 230ms ease,
    box-shadow 230ms ease,
    filter 230ms ease;
}


.ybn-ix2-overview-card[data-ybn-ix2-active="true"]
.ybn-ix2-overview-visual {
  border-color:
    rgba(237, 34, 40, 0.25);

  box-shadow:
    0 26px 52px
      rgba(0, 0, 0, 0.24),
    0 0 0 1px
      rgba(237, 34, 40, 0.055);
}


.ybn-ix2-overview-spec {
  opacity: 0.82;

  translate: 0 0;

  transition:
    opacity 220ms ease
      var(--ybn-ix2-spec-delay, 0ms),
    translate 240ms ease
      var(--ybn-ix2-spec-delay, 0ms);
}


.ybn-ix2-overview-card[data-ybn-ix2-active="true"]
.ybn-ix2-overview-spec {
  opacity: 1;

  translate: 0 -1px;
}


.ybn-ix2-overview-card
.ybn-ix2-overview-button {
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    translate 200ms ease;
}


.ybn-ix2-overview-card[data-ybn-ix2-active="true"]
.ybn-ix2-overview-button {
  translate: 2px 0;
}


.ybn-ix2-overview-card
.ybn-ix2-overview-arrow {
  transition:
    translate 210ms ease,
    rotate 210ms ease;
}


.ybn-ix2-overview-card[data-ybn-ix2-active="true"]
.ybn-ix2-overview-arrow {
  translate: 4px 0;
  rotate: -7deg;
}


/*
===============================================================================
04. RESPONSIVE AND ACCESSIBILITY
===============================================================================
*/

@media (max-width: 1179px) {

  .ybn-ix2-nav {
    display: none !important;
  }

}


@media (hover: none), (pointer: coarse) {

  .ybn-ix2-hero-card,
  .ybn-ix2-hero-card
  .ybn-ix2-hero-image {
    translate: none !important;
    scale: 1 !important;
  }


  .ybn-ix2-hero-card::after,
  .ybn-ix2-overview-card::before {
    display: none;
  }


  .ybn-ix2-overview-spec {
    opacity: 1;
  }

}


@media (prefers-reduced-motion: reduce) {

  .ybn-ix2-nav,
  .ybn-ix2-nav *,
  .ybn-ix2-hero-card,
  .ybn-ix2-hero-card::after,
  .ybn-ix2-hero-image,
  .ybn-ix2-hero-arrow,
  .ybn-ix2-overview-card::before,
  .ybn-ix2-overview-visual,
  .ybn-ix2-overview-spec,
  .ybn-ix2-overview-button,
  .ybn-ix2-overview-arrow {
    animation: none !important;

    transition-duration:
      1ms !important;
  }


  .ybn-ix2-hero-card,
  .ybn-ix2-hero-image {
    translate: none !important;
    scale: 1 !important;
  }

}


/*
===============================================================================
MODULE B — CONTEXT INTERACTION
Stable internal namespace: ybn-cix2-
===============================================================================
*/

/*
===============================================================================
YUBEEN OPTICS — THERMAL CONTEXT INTERACTION LAYER STYLESHEET
===============================================================================
*/


/*
===============================================================================
01. SHARED
===============================================================================
*/

.ybn-cix2-enhanced-media {
  position: relative;
  isolation: isolate;

  overflow: hidden;
}


/*
===============================================================================
02. IMAGE DETAIL — TRUE 2.1× FOCUS LENS
===============================================================================

旧版问题：
CSS background-size与图片实际渲染尺寸之间可能产生比例误差，
视觉上会像普通圆形遮罩，而不是清晰放大。

新版方案：
1. JavaScript克隆当前图片。
2. 克隆图尺寸固定为原显示尺寸的2.35倍。
3. 根据鼠标在原图中的像素坐标计算克隆图偏移。
4. 放大镜中心与原图观察点精确对应。
===============================================================================
*/

.ybn-cix2-focus-lens {
  --ybn-cix2-lens-left: 50%;
  --ybn-cix2-lens-top: 50%;

  position: absolute;
  z-index: 8;

  left:
    var(--ybn-cix2-lens-left);

  top:
    var(--ybn-cix2-lens-top);

  width:
    clamp(146px, 10vw, 166px);

  aspect-ratio: 1;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.62);

  border-radius: 50%;

  opacity: 0;

  background:
    #111318;

  box-shadow:
    0 20px 48px
      rgba(0, 0, 0, 0.34),
    0 0 0 7px
      rgba(255, 255, 255, 0.11),
    inset 0 0 0 1px
      rgba(0, 0, 0, 0.22);

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    scale(0.92);

  transition:
    opacity 170ms ease,
    transform 230ms
      cubic-bezier(0.2, 0.72, 0.2, 1);

  will-change:
    left,
    top,
    transform;
}


/*
放大镜中的克隆图片。
尺寸与位置由JavaScript按照2.1×精确计算。
*/
.ybn-cix2-focus-lens__image {
  position: absolute;

  left: 0;
  top: 0;

  display: block;

  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  filter:
    brightness(1.035)
    contrast(1.055)
    saturate(1.02) !important;

  object-fit: fill !important;

  pointer-events: none;

  user-select: none;

  transform: none !important;
  translate: none !important;
  scale: 1 !important;

  transition: none !important;

  will-change:
    left,
    top,
    width,
    height;
}


/*
内圈只负责界定观察区域，
不添加准星或中心点，避免产生假HUD感。
*/
.ybn-cix2-focus-lens::before {
  content: "";

  position: absolute;
  inset: 12px;
  z-index: 3;

  border:
    1px solid
    rgba(237, 34, 40, 0.18);

  border-radius: 50%;

  pointer-events: none;
}


.ybn-cix2-detail-media[data-ybn-cix2-active="true"]
.ybn-cix2-focus-lens {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}


/*
只调整原始直系图片，
避免影响放大镜内部的克隆图片。
*/
.ybn-cix2-detail-media
> img {
  transition:
    filter 230ms ease;
}


.ybn-cix2-detail-media[data-ybn-cix2-active="true"]
> img {
  filter:
    brightness(0.965)
    contrast(1.015);
}


/*
===============================================================================
03. VIEWING CONFIGURATION — LIGHT PARALLAX
===============================================================================
*/

.ybn-cix2-viewing-media {
  --ybn-cix2-view-x: 0px;
  --ybn-cix2-view-y: 0px;
  --ybn-cix2-glow-x: 50%;
  --ybn-cix2-glow-y: 50%;
}


.ybn-cix2-viewing-media::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 4;

  opacity: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      390px circle at
      var(--ybn-cix2-glow-x)
      var(--ybn-cix2-glow-y),
      rgba(237, 34, 40, 0.075),
      transparent 64%
    );

  pointer-events: none;

  transition:
    opacity 220ms ease;
}


.ybn-cix2-viewing-media
img {
  translate:
    var(--ybn-cix2-view-x)
    var(--ybn-cix2-view-y);

  scale: 1.012;

  transition:
    translate 280ms
      cubic-bezier(0.2, 0.72, 0.2, 1),
    scale 280ms
      cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 220ms ease;

  will-change:
    translate;
}


.ybn-cix2-viewing-media[data-ybn-cix2-active="true"]::after {
  opacity: 1;
}


.ybn-cix2-viewing-media[data-ybn-cix2-active="true"]
img {
  scale: 1.022;

  filter:
    brightness(1.025)
    contrast(1.015);
}


/*
===============================================================================
04. RANGE SUPPORT — TARGET CONFIRMATION
默认坐标根据当前占位图设置。
如后续替换图片，只需调整两个CSS变量。
===============================================================================
*/

.ybn-cix2-range-media {
  /*
  当前thermal-selection-range-placeholder.webp中，
  白色动物/测距框中心的校准位置。
  */
  --ybn-cix2-target-x: 35.15%;
  --ybn-cix2-target-y: 49.35%;
}


.ybn-cix2-target {
  position: absolute;
  z-index: 7;

  left:
    var(--ybn-cix2-target-x);

  top:
    var(--ybn-cix2-target-y);

  width: 10px;
  height: 10px;

  border:
    1px solid
    rgba(237, 34, 40, 0.86);

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, -50%);
}


.ybn-cix2-target::before,
.ybn-cix2-target::after {
  content: "";

  position: absolute;
  inset: 50% auto auto 50%;

  width: 100%;
  height: 100%;

  border:
    1px solid
    rgba(237, 34, 40, 0.62);

  border-radius: 50%;

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.72);
}


.ybn-cix2-range-media[data-ybn-cix2-active="true"]
.ybn-cix2-target {
  opacity: 1;
}


.ybn-cix2-range-media[data-ybn-cix2-pulse="true"]
.ybn-cix2-target::before {
  animation:
    ybn-cix2-target-pulse
    760ms
    ease-out
    1;
}


.ybn-cix2-range-media[data-ybn-cix2-pulse="true"]
.ybn-cix2-target::after {
  animation:
    ybn-cix2-target-pulse
    760ms
    120ms
    ease-out
    1;
}


@keyframes ybn-cix2-target-pulse {

  0% {
    opacity: 0.78;

    transform:
      translate(-50%, -50%)
      scale(0.72);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(2.6);
  }

}


/*
===============================================================================
05. CTA PRIORITY SELECTOR
===============================================================================
*/

.ybn-cix2-priority {
  display: grid;

  gap: 10px;

  margin-bottom: 17px;
}


.ybn-cix2-priority__label {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.47);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.ybn-cix2-priority__options {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}


.ybn-cix2-priority__option {
  position: relative;

  min-height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    7px
    11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 999px;

  color:
    rgba(255, 255, 255, 0.63);

  background:
    rgba(255, 255, 255, 0.025);

  cursor: pointer;

  font: inherit;

  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;

  transition:
    color 190ms ease,
    border-color 190ms ease,
    background 190ms ease,
    transform 190ms ease,
    box-shadow 190ms ease;
}


.ybn-cix2-priority__option:hover,
.ybn-cix2-priority__option:focus-visible {
  color: #ffffff;

  border-color:
    rgba(255, 255, 255, 0.29);

  background:
    rgba(255, 255, 255, 0.055);

  outline: none;

  transform:
    translateY(-1px);
}


.ybn-cix2-priority__option[aria-pressed="true"] {
  color: #ffffff;

  border-color:
    rgba(237, 34, 40, 0.72);

  background:
    rgba(237, 34, 40, 0.20);

  box-shadow:
    0 8px 24px
    rgba(237, 34, 40, 0.12);
}


.ybn-cix2-primary-text {
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}


.ybn-cix2-primary-text.is-changing {
  opacity: 0;

  transform:
    translateY(3px);
}


/*
===============================================================================
06. RESPONSIVE
===============================================================================
*/

@media (max-width: 900px) {

  .ybn-cix2-focus-lens {
    display: none !important;
  }

}


@media (max-width: 767px) {

  .ybn-cix2-priority__options {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .ybn-cix2-priority__option {
    width: 100%;

    min-height: 36px;
  }


  .ybn-cix2-priority__option:last-child {
    grid-column:
      1 / -1;
  }

}


@media (hover: none), (pointer: coarse) {

  .ybn-cix2-focus-lens {
    display: none !important;
  }


  .ybn-cix2-viewing-media
  img {
    translate: none !important;
    scale: 1 !important;
  }


  .ybn-cix2-viewing-media::after {
    display: none;
  }


  .ybn-cix2-target {
    display: none;
  }

}


@media (prefers-reduced-motion: reduce) {

  .ybn-cix2-focus-lens,
  .ybn-cix2-detail-media img,
  .ybn-cix2-viewing-media::after,
  .ybn-cix2-viewing-media img,
  .ybn-cix2-target::before,
  .ybn-cix2-target::after,
  .ybn-cix2-priority__option,
  .ybn-cix2-primary-text {
    animation: none !important;

    transition-duration:
      1ms !important;
  }


  .ybn-cix2-viewing-media
  img {
    translate: none !important;
    scale: 1 !important;
  }


  .ybn-cix2-focus-lens,
  .ybn-cix2-target {
    display: none !important;
  }

}


/*
===============================================================================
MODULE C — ZOOM ACCESSIBILITY
Stable internal namespace: ybn-zf1-
===============================================================================
*/

/*
===============================================================================
YUBEEN OPTICS — THERMAL RANGE ZOOM PATCH STYLES
===============================================================================

所有新增Class使用ybn-zf1-前缀。
*/


/*
===============================================================================
01. NORMAL DESKTOP
901px以上不作任何修改。
===============================================================================
*/


/*
===============================================================================
02. HIGH ZOOM / NARROW DESKTOP / TABLET
561px—900px固定为2×2。
===============================================================================
*/

@media (min-width: 561px) and (max-width: 900px) {

  /*
  根区域不能裁切重新排列后的第二行卡片。
  */
  .ybn-zf1-range-root {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
    overflow-x: clip !important;
  }


  /*
  清除原横向轨道、Flex和Scroll Snap，
  强制形成稳定2×2网格。
  */
  .ybn-zf1-card-grid {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    gap:
      clamp(14px, 2.4vw, 22px) !important;

    margin:
      clamp(32px, 5vw, 58px)
      0
      0 !important;

    padding:
      0 !important;

    overflow: visible !important;

    scroll-snap-type: none !important;
    scroll-padding: 0 !important;

    transform: none !important;
    translate: none !important;
  }


  /*
  每张卡片回到正常文档流。
  清除弧形绝对定位和横向卡片宽度。
  */
  .ybn-zf1-card-item {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height:
      clamp(300px, 48vw, 390px) !important;

    flex:
      0 1 auto !important;

    align-self: stretch !important;

    margin: 0 !important;

    overflow: hidden !important;

    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;

    /*
    窄视口不保留桌面弧形旋转，
    避免旋转后的四角再次越界。
    */
    transform: none !important;
    rotate: 0deg !important;
    translate: none !important;
  }


  /*
  卡片链接占满整个卡片。
  */
  .ybn-zf1-card-item
  > a,
  .ybn-zf1-card-item
  a[href*="/products/thermal-imaging/"] {
    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: inherit !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }


  /*
  所有产品图完整显示，不再被横向卡片裁掉。
  */
  .ybn-zf1-card-item img {
    max-width: 100% !important;

    height: auto !important;
    max-height:
      clamp(210px, 32vw, 300px) !important;

    object-fit: contain !important;
    object-position: center !important;

    margin-inline: auto !important;

    transform: none !important;
    translate: none !important;
  }

}


/*
===============================================================================
03. TRUE SMALL VIEWPORT
560px及以下改为纵向1列。
不再使用难以发现的横向1×4轨道。
===============================================================================
*/

@media (max-width: 560px) {

  .ybn-zf1-range-root {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
    overflow-x: clip !important;
  }


  .ybn-zf1-card-grid {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;

    gap: 14px !important;

    margin:
      28px
      0
      0 !important;

    padding: 0 !important;

    overflow: visible !important;

    scroll-snap-type: none !important;

    transform: none !important;
    translate: none !important;
  }


  .ybn-zf1-card-item {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 460px !important;

    height: auto !important;
    min-height: 330px !important;

    justify-self: center !important;

    flex:
      0 1 auto !important;

    margin: 0 !important;

    overflow: hidden !important;

    scroll-snap-align: none !important;

    transform: none !important;
    rotate: 0deg !important;
    translate: none !important;
  }


  .ybn-zf1-card-item
  > a,
  .ybn-zf1-card-item
  a[href*="/products/thermal-imaging/"] {
    width: 100% !important;

    height: 100% !important;
    min-height: inherit !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }


  .ybn-zf1-card-item img {
    max-width: 100% !important;

    height: auto !important;
    max-height: 250px !important;

    object-fit: contain !important;
    object-position: center !important;

    margin-inline: auto !important;

    transform: none !important;
    translate: none !important;
  }

}


/*
===============================================================================
04. ACCESSIBILITY
浏览器缩放时保留文字缩放，不人为压小字体。
===============================================================================
*/

@media (prefers-reduced-motion: reduce) {

  .ybn-zf1-card-grid,
  .ybn-zf1-card-item,
  .ybn-zf1-card-item img {
    animation: none !important;

    transition-duration:
      1ms !important;
  }

}

/* ==========================================================================
   POST-LAUNCH THERMAL MODEL OVERVIEW ADJUSTMENTS — 2026-09-14
   1. Hide redundant "Model Overview" eyebrow.
   2. Restore sufficient clearance below the fixed site header.
   3. Reduce desktop product-image scale for complete product visibility.
   ========================================================================== */

/* Remove the redundant section eyebrow while retaining the main H2. */
.ybn-tmo3-eyebrow {
  display: none;
}


/*
 * The original Model Overview was designed as a later page section.
 * It is now the first visible section, so it needs additional clearance
 * below the fixed header.
 */
@media (min-width: 768px) {
  .ybn-tmo3-container {
    padding-top: clamp(120px, 8.5vw, 145px);
  }
}


/*
 * Slightly reduce product imagery on desktop.
 * Original desktop image sizing is 84% × 74%.
 */
@media (min-width: 981px) {
  .ybn-tmo3-product-image {
    width: 70%;
    height: 60%;
  }
}


/*
 * Keep enough top clearance on mobile after removing the eyebrow.
 */
@media (max-width: 767px) {
  .ybn-tmo3-container {
    padding-top: 92px;
  }
}

@media (min-width: 981px) {
  .ybn-tmo3-card[data-ybn-model="ST25L"] .ybn-tmo3-product-image {
    top: 46%;
  }
}

/*
 * Product visual link.
 * The destination is injected from each card's existing
 * "View details" button by thermal-sections.js.
 */
.ybn-ix2-overview-visual-link {
  position: absolute;
  z-index: 10;
  inset: 0;

  display: block;

  border-radius:
    var(--ybn-tmo3-visual-radius);

  cursor: pointer;
}


/* Keyboard accessibility. */
.ybn-ix2-overview-visual-link:focus-visible {
  outline:
    2px solid
    rgba(237, 34, 40, 0.82);

  outline-offset: -5px;
}