/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/less-loader/dist/cjs.js!./app/web/page/worldfirst/index.less ***!
  \*********************************************************************************************************************************************************/
/**
 * 万里汇（WorldFirst）合作落地页 —— 样式
 *
 * 需求来源：docs/万里汇合作落地页/万里汇合作落地页-提示词.md 第1次提交（任务单 DEV-124229，父单 DEV-124227）；
 *           视觉基准 docs/万里汇合作落地页/万里汇合作页面.html。
 *
 * 注意事项：
 * 1. 样式整段迁移自目标 HTML 的 8 个内联 <style> 块（原 8479 行），以 :global{} 包裹保留字面量类名
 *    （cjwf-dark-banner / cjwf-bonus / wf-steps-section / wf-business-section / wf-multi-section /
 *     cj-suggestion-slider / cjwf-premium-faq / cjwf-cta），与 components/*.jsx 中的字面 className 一致。
 *    没有改成 CSS Modules：500+ 类名逐个改写为 hash class 是纯机械劳动、极易漏改，
 *    还会破坏"与原型逐字可比"这一还原度校验手段（同 entity / cjBusinessTravel 的做法）。
 *
 * 2. 【禁止上提 CSS 变量】8 个块各自定义了**同名但取值不同**的变量，实测：
 *      --text 5 种取值 / --muted 5 种 / --dark 3 种 / --pink 2 种。
 *    每块都把变量定义在自己的 section 类上（如 .cjwf-dark-banner{--pink:...}），
 *    **必须保持这种块内作用域**；一旦上提到 :root 会跨区块串值，而且不报错、只是颜色悄悄变了。
 *
 * 3. 【D7 原型缺陷修正】按用户 2026-08-17 拍板"全部修正"，迁移时已做（逐条可与原型 diff 复核）：
 *    ② 两个近似粉色统一：§2 独有的 #ff0151（12 处）→ 全页统一 #ff0051；
 *    ④ §3 桌面端连接箭头左右不对称：.wf-step-arrow--2 的 calc(66.666% - 24px) → -32px，与 --1 对称；
 *    ⑤ 5 组死 CSS 不迁入（markup 里无对应元素）：.cjwf-dark-partner/-dot 及其 @keyframes cjwfPartnerPulse、
 *       .cj-suggestion-tag(::before)、.cj-suggestion-desc、.cjwf-premium-eyebrow(-dot)、
 *       .cjwf-premium-side-stat strong；含 @media 内的残留选择器一并清掉。
 *
 * 4. 【保留不动】原型自身的 9 个断点（1327/1100/1024/900/800/767/680/600/480）与 6 处
 *    prefers-reduced-motion 全部原样保留 —— 它们是原型的视觉收敛点，删掉会破坏还原度；
 *    三端适配作为**增量**补在文件末尾（同 cjBusinessTravel/index.less 的做法）。
 *
 * 5. 【自动前缀】less 不会补 -webkit- 前缀，故 mask-image / mask-composite 等处
 *    -webkit- 与标准写法两个字面量都保留，勿"去重"。
 *
 * 6. 【@keyframes 必须写成 ~":global(名字)"】—— 260818 实测的坑，全页 38 个动画曾**集体不生效**。
 *    本仓 .less 走 css-loader 的 CSS Modules，**@keyframes 的名字默认会被哈希**
 *    （实测变成 `index__cjwfDarkBgMove___1cPM0`），而写在 :global{} 里的 `animation: cjwfDarkBgMove ...`
 *    引用的仍是原名 —— 两边对不上，浏览器里 animation-name 有值却找不到对应关键帧，动画静默不跑。
 *    注意：把 @keyframes 放进 :global{} 里**并不能**阻止哈希，必须对名字本身做 :global 转义。
 *    写法与 app/web/page/cjBusinessTravel/index.less:1190 一致。
 */
/**
 * 响应式设计工具文件
 * 提供便捷的混入和工具类来简化响应式开发
 */
:root {
  --root-fs: 16;
}
@media (min-width: 1200px) {
  :root {
    --root-fs: 40;
  }
}
@media (min-width: 1100px) and (max-width: 1200px) {
  :root {
    --root-fs: 38;
  }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  :root {
    --root-fs: 36;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  :root {
    --root-fs: 34;
  }
}
@media (min-width: 800px) and (max-width: 900px) {
  :root {
    --root-fs: 32;
  }
}
@media (min-width: 700px) and (max-width: 800px) {
  :root {
    --root-fs: 30;
  }
}
@media (min-width: 675px) and (max-width: 700px) {
  :root {
    --root-fs: 28;
  }
}
@media (min-width: 650px) and (max-width: 674px) {
  :root {
    --root-fs: 27;
  }
}
@media (min-width: 625px) and (max-width: 649px) {
  :root {
    --root-fs: 26;
  }
}
@media (min-width: 600px) and (max-width: 624px) {
  :root {
    --root-fs: 25;
  }
}
@media (min-width: 575px) and (max-width: 599px) {
  :root {
    --root-fs: 24;
  }
}
@media (min-width: 550px) and (max-width: 574px) {
  :root {
    --root-fs: 23;
  }
}
@media (min-width: 525px) and (max-width: 549px) {
  :root {
    --root-fs: 22;
  }
}
@media (min-width: 500px) and (max-width: 524px) {
  :root {
    --root-fs: 21;
  }
}
@media (min-width: 475px) and (max-width: 499px) {
  :root {
    --root-fs: 20;
  }
}
@media (min-width: 450px) and (max-width: 474px) {
  :root {
    --root-fs: 19;
  }
}
@media (min-width: 425px) and (max-width: 449px) {
  :root {
    --root-fs: 18;
  }
}
@media (min-width: 400px) and (max-width: 424px) {
  :root {
    --root-fs: 17;
  }
}
@media (min-width: 375px) and (max-width: 399px) {
  :root {
    --root-fs: 16;
  }
}
@media (min-width: 350px) and (max-width: 374px) {
  :root {
    --root-fs: 15;
  }
}
@media (min-width: 325px) and (max-width: 349px) {
  :root {
    --root-fs: 14;
  }
}
@media (min-width: 300px) and (max-width: 324px) {
  :root {
    --root-fs: 13;
  }
}
@media (min-width: 275px) and (max-width: 299px) {
  :root {
    --root-fs: 12;
  }
}
@media (min-width: 250px) and (max-width: 274px) {
  :root {
    --root-fs: 11;
  }
}
@media (max-width: 249px) {
  :root {
    --root-fs: 11;
  }
}
 {
  /* ==================== §1-hero(cjwf-dark-banner) ==================== */
  /* =========================================================
   CJdropshipping × WorldFirst
   Pink → Black Premium Financial Banner

   Primary Pink: #ff0051
   Accent Orange: #ff7700
========================================================= */
  /* =========================================================
   BACKGROUND IMAGE
========================================================= */
  /* =========================================================
   BIG GLOW
========================================================= */
  /* =========================================================
   GLOW ORBS
========================================================= */
  /* pink glow */
  /* orange glow */
  /* =========================================================
   GRID
========================================================= */
  /* =========================================================
   CONTAINER
========================================================= */
  /* =========================================================
   LEFT CONTENT
========================================================= */
  /* =========================================================
   TITLE
========================================================= */
  /* =========================================================
   DESCRIPTION
========================================================= */
  /* =========================================================
   BENEFITS
========================================================= */
  /* =========================================================
   CTA
========================================================= */
  /* =========================================================
   RIGHT VISUAL
========================================================= */
  /* back glow */
  /* =========================================================
   GLASS DASHBOARD
========================================================= */
  /* frame that hugs the dashboard: gives the floating
   cards a positioning context equal to the card itself */
  /* top gradient */
  /* glass shine */
  /* =========================================================
   DASH HEADER
========================================================= */
  /* =========================================================
   ACCOUNT BALANCE
========================================================= */
  /* =========================================================
   CURRENCY CARDS
========================================================= */
  /* =========================================================
   TRANSACTION
========================================================= */
  /* =========================================================
   DASHBOARD FOOTER
========================================================= */
  /* =========================================================
   FLOATING CARDS
========================================================= */
  /* sits just outside the card's left edge — wide screens only,
   because that gutter disappears below 1328px */
  /* =========================================================
   ANIMATIONS
========================================================= */
  /* =========================================================
   NARROW DESKTOP / LAPTOP
   Below 1328px the container stops growing, so the gutter
   left of the dashboard disappears. Move the top floating
   card above the card's corner so it cannot cover the
   dashboard header.
========================================================= */
  /* =========================================================
   TABLET
========================================================= */
  /* =========================================================
   TABLET PORTRAIT
========================================================= */
  /* =========================================================
   MOBILE
========================================================= */
  /* =========================================================
   REDUCED MOTION
========================================================= */
  /* ==================== §2-bonus(cjwf-bonus) ==================== */
  /* =========================================================
   CJ × WorldFirst $100 Bonus Section
========================================================= */
  /* =========================================================
   BACKGROUND DECORATION
========================================================= */
  /* =========================================================
   CONTAINER
========================================================= */
  /* =========================================================
   HEADING
========================================================= */
  /* =========================================================
   CARDS WRAPPER
========================================================= */
  /* =========================================================
   BONUS CARD
========================================================= */
  /* Card Glow */
  /* =========================================================
   CARD TITLE
========================================================= */
  /* =========================================================
   IMAGE AREA
========================================================= */
  /* =========================================================
   OR
========================================================= */
  /* =========================================================
   NEW REWARD BAR
========================================================= */
  /* Glow */
  /* =========================================================
   REWARD CONTENT
========================================================= */
  /* =========================================================
   META INFO
========================================================= */
  /* =========================================================
   T&C LINK
========================================================= */
  /* =========================================================
   REWARD IMAGE
========================================================= */
  /* =========================================================
   PARTICLES
========================================================= */
  /* =========================================================
   ANIMATIONS
========================================================= */
  /* =========================================================
   TABLET
========================================================= */
  /* =========================================================
   MOBILE
========================================================= */
  /* =========================================================
   SMALL MOBILE
========================================================= */
  /* =========================================================
   REDUCED MOTION
========================================================= */
  /* ==================== §3-steps(wf-steps-section) ==================== */
  /* =========================================================
   WorldFirst Exclusive Offer - 3 Steps
========================================================= */
  /* =========================================================
   Background Glow
========================================================= */
  /* =========================================================
   Container
========================================================= */
  /* =========================================================
   Heading
========================================================= */
  /* =========================================================
   Grid
========================================================= */
  /* =========================================================
   Card
========================================================= */
  /* =========================================================
   Step Badge
========================================================= */
  /* =========================================================
   Title
========================================================= */
  /* =========================================================
   Description
========================================================= */
  /* =========================================================
   STEP 2 — Either Condition
========================================================= */
  /* Condition Card */
  /* Check */
  /* Condition Text */
  /* OR Divider */
  /* =========================================================
   Button
========================================================= */
  /* =========================================================
   Image
========================================================= */
  /* =========================================================
   Arrow
========================================================= */
  /* =========================================================
   Terms
========================================================= */
  /* =========================================================
   Animations
========================================================= */
  /* =========================================================
   Tablet
========================================================= */
  /* =========================================================
   Mobile
========================================================= */
  /* =========================================================
   Reduced Motion
========================================================= */
  /* ==================== §4-business(wf-business-section) ==================== */
  /* =========================================================
   WorldFirst Global Business Payments
========================================================= */
  /* =========================================================
   Background glow
========================================================= */
  /* =========================================================
   Container
========================================================= */
  /* =========================================================
   Heading
========================================================= */
  /* =========================================================
   Subtitle
========================================================= */
  /* =========================================================
   Grid
========================================================= */
  /* =========================================================
   Card
========================================================= */
  /* subtle glow */
  /* =========================================================
   Accent bar
========================================================= */
  /* =========================================================
   Card title
========================================================= */
  /* =========================================================
   List
========================================================= */
  /* custom bullet */
  /* =========================================================
   Image
========================================================= */
  /* image overlay */
  /* =========================================================
   Gradient line on card hover
========================================================= */
  /* =========================================================
   Floating decorative dots
========================================================= */
  /* =========================================================
   Animations
========================================================= */
  /* =========================================================
   Tablet
========================================================= */
  /* =========================================================
   Mobile
========================================================= */
  /* =========================================================
   Reduced Motion
========================================================= */
  /* ==================== §5-multi(wf-multi-section) ==================== */
  /* =========================================================
   WorldFirst Multi-Currency Features
========================================================= */
  /* =========================================================
   Background Glow
========================================================= */
  /* =========================================================
   Background Grid
========================================================= */
  /* =========================================================
   Decorative Glow
========================================================= */
  /* =========================================================
   Container
========================================================= */
  /* =========================================================
   Title
========================================================= */
  /* =========================================================
   Cards Grid
========================================================= */
  /* =========================================================
   Card
========================================================= */
  /* pink highlight */
  /* bottom gradient */
  /* =========================================================
   Image
========================================================= */
  /* =========================================================
   Content
========================================================= */
  /* =========================================================
   Small Note
========================================================= */
  /* =========================================================
   Arrow Button
========================================================= */
  /* =========================================================
   CTA
========================================================= */
  /* button gradient */
  /* =========================================================
   Footer Note
========================================================= */
  /* =========================================================
   Animations
========================================================= */
  /* =========================================================
   Tablet
========================================================= */
  /* =========================================================
   Mobile
========================================================= */
  /* =========================================================
   Reduced Motion
========================================================= */
  /* ==================== §6-events(cj-suggestion-slider) ==================== */
  /* =========================================================
   CJ Suggestions - Infinite Loop Slider
========================================================= */
  /* =========================================================
   Heading
========================================================= */
  /* =========================================================
   Slider
========================================================= */
  /* Disable animation during hidden infinite-loop reset */
  /* =========================================================
   Cards
========================================================= */
  /* Near cards */
  /* Active card */
  /* Image */
  /* Bottom gradient */
  /* =========================================================
   Number
========================================================= */
  /* =========================================================
   Navigation
========================================================= */
  /* =========================================================
   Progress
========================================================= */
  /* =========================================================
   Tablet
========================================================= */
  /* =========================================================
   Mobile
========================================================= */
  /* =========================================================
   Reduced Motion
========================================================= */
  /* ==================== §7-faq(cjwf-premium-faq) ==================== */
  /* =========================================================
     CJdropshipping × WorldFirst FAQ
     Premium Pink Version
  ========================================================= */
  /* decorative background */
  /* =========================================================
     Header
  ========================================================= */
  /* =========================================================
     Main layout
  ========================================================= */
  /* =========================================================
     Left intro panel
  ========================================================= */
  /* =========================================================
     FAQ list
  ========================================================= */
  /* question */
  /* =========================================================
     Answer
  ========================================================= */
  /* =========================================================
     Important note / promo box
  ========================================================= */
  /* =========================================================
     Payment method cards
  ========================================================= */
  /* =========================================================
     Timeline / countries
  ========================================================= */
  /* =========================================================
     Security card
  ========================================================= */
  /* =========================================================
     Responsive
  ========================================================= */
  /* ==================== §8-cta(cjwf-cta) ==================== */
  /* =========================================
     CJdropshipping × WorldFirst CTA
  ========================================= */
  /* =========================================
     Background Overlay
  ========================================= */
  /* =========================================
     FLOATING BRAND LOGOS
  ========================================= */
  /* =========================================
     CJ LOGO - LEFT
  ========================================= */
  /* upper-left band */
  /* =========================================
     WorldFirst LOGO - RIGHT
  ========================================= */
  /* lower-right band */
  /* =========================================
     Logo Image
  ========================================= */
  /* =========================================
     Container
  ========================================= */
  /* =========================================
     Title
  ========================================= */
  /* =========================================
     Description
  ========================================= */
  /* =========================================
     Buttons
  ========================================= */
  /* =========================================
     Primary Button
  ========================================= */
  /* =========================================
     Secondary Button
  ========================================= */
  /* =========================================
     Tablet
  ========================================= */
  /* =========================================
     Mobile
  ========================================= */
  /* =========================================
     Small Mobile
  ========================================= */
  /* ====================================================================
     三端适配增量（站内 .mobile()/.tablet()/.desktop() 断点）

     需求来源：提示词 需求2「需要三端适配的：pc、pad、mobile」。
     原型自身的 9 个断点已在上方逐字保留，这里只补站内三端口径的**增量**。

     【级联陷阱 · 必读】.tablet() 是**有界**区间（701~1200px），**不会**向 ≤700 级联。
     凡写进 .tablet() 且 mobile 也需要的规则，必须在 .mobile() 里**重述一遍**。
     （cjBusinessTravel/index.less 踩过同一个坑，其文件头有同款告警。）
     ==================================================================== */
}
.cjwf-dark-banner, .cjwf-dark-banner * {
  box-sizing: border-box;
}
.cjwf-dark-banner {
  --pink: #ff0051;
  --pink-light: #ff3875;
  --orange: #ff7700;
  --orange-light: #ff9b42;
  --black: #050505;
  position: relative;
  width: 100%;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  background: linear-gradient(115deg, #ff0051 0%, #d70045 18%, #7e002b 39%, #26000f 63%, #090508 82%, #020202 100%);
  background-size: 160% 160%;
  animation: cjwfDarkBgMove 11s ease-in-out infinite;
}
.cjwf-dark-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 【底图地址由 JS 注入】原型这里是写死的第三方远程地址（cc-west-usa）。图片已落到公共资源仓，
     而 less 构建期拿不到 cdnHost，故整个 url(...) 由 index.jsx 以 --wf-hero-bg 注入。
     注意**不能**在这里写字面 `url(var(--wf-hero-bg))`：webpack 的 css-loader 会把 url() 当成资源路径
     去解析，报 `Can't resolve './var(--wf-hero-bg'`（standalone lessc 不报、只有走 webpack 才炸）。
     所以变量里存的是完整的 `url("...")`，此处只做拼接。 */
  background-image: linear-gradient(90deg, rgba(255, 0, 81, 0.82) 0%, rgba(109, 0, 37, 0.79) 38%, rgba(15, 4, 10, 0.72) 68%, rgba(0, 0, 0, 0.76) 100%), var(--wf-hero-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.52;
  transform: scale(1.04);
  animation: cjwfDarkImageMove 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.cjwf-dark-banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 760px;
  height: 760px;
  left: -320px;
  top: -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 94, 145, 0.46) 0%, rgba(255, 0, 81, 0.24) 26%, rgba(255, 0, 81, 0.08) 48%, transparent 70%);
  filter: blur(10px);
  animation: cjwfDarkGlowMove 10s ease-in-out infinite alternate;
  pointer-events: none;
}
.cjwf-dark-glow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}
.cjwf-dark-glow--pink {
  width: 460px;
  height: 460px;
  right: -100px;
  top: -150px;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.42) 0%, rgba(255, 0, 81, 0.13) 39%, transparent 72%);
  filter: blur(18px);
  animation: cjwfGlowFloat 9s ease-in-out infinite;
}
.cjwf-dark-glow--orange {
  width: 360px;
  height: 360px;
  left: 42%;
  bottom: -210px;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.35) 0%, rgba(255, 119, 0, 0.08) 46%, transparent 72%);
  filter: blur(20px);
  animation: cjwfGlowFloat 11s ease-in-out infinite reverse;
}
.cjwf-dark-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.28) 68%, transparent 96%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.28) 68%, transparent 96%);
}
.cjwf-dark-container {
  position: relative;
  z-index: 5;
  width: min(1280px, calc(100% - 48px));
  min-height: 700px;
  margin: 0 auto;
  padding: 74px 0 86px;
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(370px, 1fr);
  align-items: center;
  gap: 78px;
}
.cjwf-dark-content {
  position: relative;
}
.cjwf-dark-title {
  max-width: 650px;
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(42px, 4.5vw, 42px);
  line-height: 1.045;
  font-weight: 850;
  letter-spacing: -2.2px;
}
.cjwf-dark-title-highlight {
  line-height: 1.5;
  display: block;
  margin-top: 0px;
  color: transparent;
  background: linear-gradient(95deg, #ff4428, #ffd8e5 24%, #ff9e52 54%, #ff7700 70%, #000000 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cjwfTitleGradient
    7s
    linear
    infinite;
}
.cjwf-dark-description {
  max-width: 590px;
  margin: 0 0 28px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
}
.cjwf-dark-benefits {
  display: grid;
  gap: 11px;
  max-width: 610px;
  margin-bottom: 31px;
}
.cjwf-dark-benefit {
  position: relative;
  overflow: hidden;
  min-height: 53px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.08);
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.cjwf-dark-benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff7700, #ff0051);
}
.cjwf-dark-benefit:hover {
  transform: translateX(7px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
}
.cjwf-dark-benefit strong {
  color: #ffffff;
  font-weight: 850;
}
.cjwf-dark-benefit-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff7700, #ff0051);
  box-shadow: 0 7px 20px rgba(255, 0, 81, 0.25);
}
.cjwf-dark-benefit-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjwf-dark-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cjwf-dark-button {
  position: relative;
  overflow: hidden;
  min-height: 57px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: none;
  border-radius: 9px;
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 850;
  background: linear-gradient(105deg, #ff7700 0%, #ff4c20 46%, #ff0051 100%);
  background-size: 200% 200%;
  box-shadow: 0 18px 40px rgba(255, 0, 81, 0.3), 0 7px 18px rgba(255, 119, 0, 0.16);
  animation: cjwfButtonGradient
    5s
    ease
    infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid #ffffff;
}
.cjwf-dark-button::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70px;
  width: 45px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: rotate(18deg);
  animation: cjwfButtonShine 5s ease-in-out infinite;
}
.cjwf-dark-button:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 23px 50px rgba(255, 0, 81, 0.4), 0 8px 25px rgba(255, 119, 0, 0.23);
}
.cjwf-dark-button-icon {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.25s ease;
}
.cjwf-dark-button:hover .cjwf-dark-button-icon {
  transform: translateX(4px);
}
.cjwf-dark-button-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #e4496b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjwf-dark-note {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
}
.cjwf-dark-visual {
  position: relative;
  min-height: 535px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cjwf-dark-visual::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.3) 0%, rgba(255, 0, 81, 0.11) 32%, rgba(255, 119, 0, 0.07) 50%, transparent 72%);
  filter: blur(20px);
  animation: cjwfVisualGlow 7s ease-in-out infinite;
}
.cjwf-dark-visual-frame {
  position: relative;
  width: min(100%, 425px);
}
.cjwf-dark-dashboard {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 22px;
  /*
     WHITE LOW-OPACITY GLASS
  */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.09));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 35px 85px rgba(0, 0, 0, 0.36), 0 0 80px rgba(255, 0, 81, 0.08);
  animation: cjwfDashboardFloat 6s ease-in-out infinite;
}
.cjwf-dark-dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff7700 0%, #ff3e27 47%, #ff0051 100%);
}
.cjwf-dark-dashboard::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  right: -160px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
  pointer-events: none;
}
.cjwf-dark-dashboard-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.cjwf-dark-dashboard-label {
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cjwf-dark-dashboard-title {
  color: #ffffff;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 850;
}
.cjwf-dark-secure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.21);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}
.cjwf-dark-secure svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.cjwf-dark-account {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  background: linear-gradient(115deg, #ff7700 0%, #ff5c1a 31%, #ff2439 67%, #ff0051 100%);
  background-size: 180% 180%;
  box-shadow: 0 20px 43px rgba(255, 0, 81, 0.24);
  color: #ffffff;
  animation: cjwfAccountGradient
    7s
    ease
    infinite;
}
.cjwf-dark-account::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  top: -110px;
  right: -55px;
  border: 28px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.cjwf-dark-account::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: 28px;
  bottom: -82px;
  border: 18px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}
.cjwf-dark-account-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cjwf-dark-account-label {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
}
.cjwf-dark-account-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.17);
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
}
.cjwf-dark-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
  animation: cjwfStatusPulse
    2s
    ease
    infinite;
}
.cjwf-dark-balance {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.6px;
}
.cjwf-dark-account-footer {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
}
.cjwf-dark-currencies {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 13px;
}
.cjwf-dark-currency {
  padding: 13px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.89);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.cjwf-dark-currency:hover {
  transform: translateY(-4px);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
}
.cjwf-dark-currency-code {
  margin-bottom: 6px;
  color: #000000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
}
.cjwf-dark-currency-value {
  color: #252525;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 850;
}
.cjwf-dark-transaction {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.91);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cjwf-dark-transaction-left {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cjwf-dark-transaction-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff7700, #ff0051);
  color: #ffffff;
  box-shadow: 0 7px 17px rgba(255, 0, 81, 0.18);
}
.cjwf-dark-transaction-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cjwf-dark-transaction-label {
  margin-bottom: 2px;
  color: #292929;
  font-size: 14px;
  font-weight: 850;
}
.cjwf-dark-transaction-meta {
  color: #686767;
  font-size: 12px;
}
.cjwf-dark-transaction-amount {
  text-align: right;
}
.cjwf-dark-transaction-value {
  color: #ff0051;
  font-size: 16px;
  font-weight: 900;
}
.cjwf-dark-transaction-status {
  margin-top: 2px;
  color: #525252;
  font-size: 12px;
  font-weight: 700;
}
.cjwf-dark-dashboard-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
}
.cjwf-dark-dashboard-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
}
.cjwf-dark-feature-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.cjwf-dark-feature-dot--orange {
  background: #ff7700;
  color: #ff7700;
}
.cjwf-dark-feature-dot--pink {
  background: #ff0051;
  color: #ff0051;
}
.cjwf-dark-floating {
  position: absolute;
  z-index: 8;
  /* keep the natural one-line width even when the box is
     anchored outside its containing block */
  width: max-content;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 11px;
  background: #ffffff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
}
.cjwf-dark-floating strong {
  display: block;
  margin-bottom: 3px;
  color: #1c1c1c;
  font-size: 16px;
  font-weight: 850;
}
.cjwf-dark-floating span {
  color: #e80066;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cjwf-dark-floating--top {
  right: calc(100% + 4px);
  top: 90px;
  border-left: 4px solid #ff7700;
  animation: cjwfSmallFloat 5s ease-in-out infinite;
}
.cjwf-dark-floating--bottom {
  right: -23px;
  top: 100%;
  border-left: 4px solid #ff0051;
  animation: cjwfSmallFloat 6s ease-in-out infinite reverse;
}
@keyframes cjwfDarkBgMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes cjwfDarkImageMove {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.09) translate3d(-16px, -6px, 0);
  }
}
@keyframes cjwfDarkGlowMove {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(210px, 130px, 0) scale(1.28);
  }
}
@keyframes cjwfGlowFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-35px, 28px, 0) scale(1.12);
  }
}
@keyframes cjwfTitleGradient {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 200% center;
  }
}
@keyframes cjwfButtonGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes cjwfButtonShine {
  0%,
  55% {
    left: -70px;
  }
  80%,
  100% {
    left: calc(100% + 70px);
  }
}
@keyframes cjwfDashboardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
@keyframes cjwfVisualGlow {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.12);
  }
}
@keyframes cjwfSmallFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}
@keyframes cjwfStatusPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.42;
  }
}
@keyframes cjwfAccountGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 1327px) {
  .cjwf-dark-floating--top {
    right: auto;
    left: -20px;
    top: auto;
    bottom: calc(100% - 8px);
  }
}
@media (max-width: 1100px) {
  .cjwf-dark-container {
    grid-template-columns: minmax(0, 560px) minmax(320px, 1fr);
    gap: 42px;
  }
  .cjwf-dark-title {
    font-size: 48px;
  }
  .cjwf-dark-visual-frame {
    width: 385px;
  }
}
@media (max-width: 900px) {
  .cjwf-dark-banner {
    min-height: auto;
  }
  .cjwf-dark-container {
    width: min(760px, calc(100% - 36px));
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 58px
      0
      75px;
  }
  .cjwf-dark-content {
    text-align: center;
  }
  .cjwf-dark-description, .cjwf-dark-benefits {
    margin-left: auto;
    margin-right: auto;
  }
  .cjwf-dark-actions {
    justify-content: center;
  }
  .cjwf-dark-visual {
    justify-content: center;
    min-height: 510px;
  }
  .cjwf-dark-visual-frame {
    width: min(100%, 430px);
  }
}
@media (max-width: 767px) {
  .cjwf-dark-banner {
    background: linear-gradient(165deg, #ff0051 0%, #9e0035 28%, #340012 56%, #080408 79%, #020202 100%);
  }
  .cjwf-dark-container {
    width: calc(100% - 30px);
    padding: 44px
      0
      55px;
    gap: 37px;
  }
  .cjwf-dark-title {
    font-size: clamp(35px, 10vw, 45px);
    line-height: 1.07;
    letter-spacing: -1.5px;
  }
  .cjwf-dark-description {
    font-size: 15px;
    line-height: 1.65;
  }
  .cjwf-dark-benefit {
    text-align: left;
    padding: 11px 12px;
    font-size: 13px;
  }
  .cjwf-dark-actions {
    display: block;
  }
  .cjwf-dark-button {
    width: 100%;
    min-height: 54px;
  }
  .cjwf-dark-note {
    display: block;
    margin-top: 12px;
  }
  .cjwf-dark-visual {
    min-height: auto;
  }
  .cjwf-dark-dashboard {
    padding: 18px;
    border-radius: 18px;
  }
  .cjwf-dark-account {
    padding: 19px;
  }
  .cjwf-dark-balance {
    font-size: 34px;
  }
  .cjwf-dark-currencies {
    gap: 6px;
  }
  .cjwf-dark-currency {
    padding: 11px 8px;
  }
  .cjwf-dark-currency-value {
    font-size: 12px;
  }
  .cjwf-dark-dashboard-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cjwf-dark-floating {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjwf-dark-banner, .cjwf-dark-banner::before, .cjwf-dark-banner::after, .cjwf-dark-glow, .cjwf-dark-title-highlight, .cjwf-dark-button, .cjwf-dark-button::before, .cjwf-dark-dashboard, .cjwf-dark-account, .cjwf-dark-floating, .cjwf-dark-status-dot, .cjwf-dark-visual::before {
    animation: none !important;
  }
}
.cjwf-bonus, .cjwf-bonus * {
  box-sizing: border-box;
}
.cjwf-bonus {
  --orange: #ff7700;
  --pink: #ff0051;
  --dark: #202124;
  --text: #171717;
  --muted: #6f7177;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 60px 20px 55px;
  background: radial-gradient(circle at 15% 10%, rgba(255, 119, 0, 0.07), transparent 24%), radial-gradient(circle at 88% 90%, rgba(255, 1, 81, 0.065), transparent 26%), #f8f6f8;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}
.cjwf-bonus::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  left: -250px;
  top: -270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.13), rgba(255, 119, 0, 0.03) 45%, transparent 70%);
  animation: cjwfBonusGlow1 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.cjwf-bonus::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -300px;
  bottom: -330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 1, 81, 0.12), rgba(255, 1, 81, 0.025) 45%, transparent 70%);
  animation: cjwfBonusGlow2 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.cjwf-bonus__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1200px);
  margin: 0 auto;
}
.cjwf-bonus__heading {
  margin: 0 0 47px;
  text-align: center;
  color: var(--dark);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.cjwf-bonus__heading-highlight, .cjwf-bonus__heading strong {
  display: inline-block;
  color: transparent;
  background: linear-gradient(100deg, #ff0051 0%, #ff0051 35%, #ff7700 52%, #ff0051 70%, #ff0051 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cjwfBonusText
    5s
    linear
    infinite;
}
.cjwf-bonus__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.cjwf-bonus__card {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  padding: 27px
    26px
    20px;
  border: 1px solid rgba(0, 0, 0, 0.025);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 35px rgba(47, 29, 37, 0.035);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cjwf-bonus__card::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  top: -130px;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.cjwf-bonus__card--left::before {
  left: -80px;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.22), transparent 68%);
}
.cjwf-bonus__card--right::before {
  right: -80px;
  background: radial-gradient(circle, rgba(255, 1, 81, 0.2), transparent 68%);
}
.cjwf-bonus__card:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 1, 81, 0.07);
  box-shadow: 0 24px 55px rgba(68, 36, 48, 0.1);
}
.cjwf-bonus__card:hover::before {
  opacity: 1;
  transform: scale(1.3);
}
.cjwf-bonus__card-title {
  position: relative;
  z-index: 2;
  max-width: 510px;
  margin: 0;
  color: #111111;
  font-size: clamp(19px, 1.65vw, 24px);
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.cjwf-bonus__money, .cjwf-bonus__card-title strong {
  color: var(--pink);
  font-weight: 700;
  white-space: nowrap;
}
.cjwf-bonus__visual {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cjwf-bonus__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 14px rgba(81, 41, 53, 0.05));
  transform: translateZ(0);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.cjwf-bonus__card--left .cjwf-bonus__image {
  width: 405px;
  animation: cjwfBonusFloatLeft 5.5s ease-in-out infinite;
}
.cjwf-bonus__card--right .cjwf-bonus__image {
  width: 390px;
  animation: cjwfBonusFloatRight 6s ease-in-out infinite;
}
.cjwf-bonus__card:hover .cjwf-bonus__image {
  filter: drop-shadow(0 16px 20px rgba(255, 1, 81, 0.08));
}
.cjwf-bonus__or {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #f8f6f8;
  border-radius: 50%;
  background: #ff0051;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 10px 25px rgba(255, 1, 81, 0.16);
  animation: cjwfBonusOr 2.8s ease-in-out infinite;
}
.cjwf-bonus__reward-card {
  position: relative;
  width: 100%;
  min-height: 175px;
  margin-top: 40px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  align-items: stretch;
  border: 1px solid rgba(255, 1, 81, 0.07);
  border-radius: 26px;
  background: linear-gradient(105deg, #ffffff 0%, #ffffff 53%, #fff8fa 100%);
  box-shadow: 0 15px 40px rgba(55, 34, 43, 0.055);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cjwf-bonus__reward-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 1, 81, 0.14);
  box-shadow: 0 24px 55px rgba(61, 36, 46, 0.09);
}
.cjwf-bonus__reward-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -120px;
  bottom: -170px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.075), transparent 68%);
  pointer-events: none;
}
.cjwf-bonus__reward-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px
    20px
    30px
    34px;
}
.cjwf-bonus__reward-title {
  max-width: 690px;
  margin: 0
    0
    9px;
  color: #1c1c1f;
  font-size: clamp(23px, 2.2vw, 24px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.7px;
}
.cjwf-bonus__reward-highlight, .cjwf-bonus__reward-title strong {
  color: #ff0051;
}
.cjwf-bonus__reward-text {
  max-width: 650px;
  margin: 0
    0
    16px;
  color: #67686f;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 400;
}
.cjwf-bonus__reward-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
    18px;
  margin-bottom: 14px;
}
.cjwf-bonus__reward-meta-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 14px;
  color: #6a6b71;
  font-size: 11.5px;
  line-height: 1.45;
}
.cjwf-bonus__reward-meta-item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff0051;
  box-shadow: 0 0 0 3px rgba(255, 1, 81, 0.08);
}
.cjwf-bonus__reward-meta-item strong {
  margin-right: 4px;
  color: #343438;
  font-weight: 600;
}
.cjwf-bonus__reward-meta-highlight {
  color: #ff0051;
  font-weight: 600;
}
.cjwf-bonus__reward-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #222222;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.25s ease, transform 0.25s ease;
}
.cjwf-bonus__reward-link:hover {
  color: #ff0051;
  transform: translateX(3px);
}
.cjwf-bonus__reward-visual {
  position: relative;
  z-index: 1;
  min-height: 175px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.cjwf-bonus__reward-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.15) 20%, transparent 50%);
  z-index: 2;
  pointer-events: none;
}
.cjwf-bonus__reward-image {
  position: absolute;
  right: 0;
  top: 50%;
  width: 75%;
  height: 95%;
  transform: translateY(-50%) scale(1.02);
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.cjwf-bonus__reward-card:hover .cjwf-bonus__reward-image {
  transform: translateY(-50%) scale(1.06);
}
.cjwf-bonus__particle {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}
.cjwf-bonus__particle--1 {
  width: 7px;
  height: 7px;
  left: 5%;
  top: 33%;
  background: #ff7700;
  opacity: 0.3;
  animation: cjwfParticle 6s ease-in-out infinite;
}
.cjwf-bonus__particle--2 {
  width: 9px;
  height: 9px;
  right: 4%;
  top: 25%;
  background: #ff0051;
  opacity: 0.24;
  animation: cjwfParticle 7s ease-in-out infinite reverse;
}
.cjwf-bonus__particle--3 {
  width: 5px;
  height: 5px;
  left: 9%;
  bottom: 22%;
  background: #ff0051;
  opacity: 0.22;
  animation: cjwfParticle 5s ease-in-out infinite;
}
@keyframes cjwfBonusFloatLeft {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(-0.3deg);
  }
}
@keyframes cjwfBonusFloatRight {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.35deg);
  }
}
@keyframes cjwfBonusOr {
  0%,
  100% {
    box-shadow: 0 8px 22px rgba(255, 1, 81, 0.16), 0 0 0 0 rgba(255, 1, 81, 0.13);
  }
  50% {
    box-shadow: 0 12px 28px rgba(255, 1, 81, 0.24), 0 0 0 10px rgba(255, 1, 81, 0);
  }
}
@keyframes cjwfBonusText {
  0% {
    background-position: 0%
      center;
  }
  100% {
    background-position: 220%
      center;
  }
}
@keyframes cjwfBonusGlow1 {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(80px, 50px, 0) scale(1.18);
  }
}
@keyframes cjwfBonusGlow2 {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-90px, -40px, 0) scale(1.15);
  }
}
@keyframes cjwfParticle {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.18;
  }
  50% {
    transform: translateY(-22px);
    opacity: 0.42;
  }
}
@media (max-width: 900px) {
  .cjwf-bonus {
    padding: 50px
      18px
      44px;
  }
  .cjwf-bonus__cards {
    gap: 22px;
  }
  .cjwf-bonus__card {
    min-height: 330px;
    padding: 22px
      20px
      16px;
  }
  .cjwf-bonus__visual {
    height: 210px;
  }
  .cjwf-bonus__or {
    width: 58px;
    height: 58px;
    font-size: 16px;
  }
  .cjwf-bonus__reward-card {
    grid-template-columns: minmax(0, 1fr) 330px;
    min-height: 170px;
  }
  .cjwf-bonus__reward-content {
    padding: 25px
      10px
      25px
      27px;
  }
  .cjwf-bonus__reward-title {
    font-size: 24px;
  }
  .cjwf-bonus__reward-text {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
   {
    /* Reward Card */
  }
  .cjwf-bonus {
    padding: 43px
      15px
      39px;
  }
  .cjwf-bonus__heading {
    margin-bottom: 31px;
    font-size: 27px;
    line-height: 1.25;
  }
  .cjwf-bonus__cards {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .cjwf-bonus__card {
    width: 100%;
    min-height: auto;
    padding: 23px
      18px
      19px;
    border-radius: 24px;
  }
  .cjwf-bonus__card-title {
    font-size: 18px;
    line-height: 1.45;
    text-align: left;
  }
  .cjwf-bonus__visual {
    height: auto;
    min-height: 200px;
    padding-top: 15px;
  }
  .cjwf-bonus__card--left .cjwf-bonus__image {
    width: min(100%, 405px);
  }
  .cjwf-bonus__card--right .cjwf-bonus__image {
    width: min(100%, 390px);
  }
  .cjwf-bonus__or {
    top: 50%;
    width: 58px;
    height: 58px;
    font-size: 15px;
    border-width: 5px;
  }
  .cjwf-bonus__reward-card {
    margin-top: 32px;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .cjwf-bonus__reward-content {
    order: 1;
    padding: 25px
      22px
      22px;
  }
  .cjwf-bonus__reward-title {
    max-width: 100%;
    font-size: 22px;
    line-height: 1.3;
  }
  .cjwf-bonus__reward-text {
    margin-bottom: 14px;
    font-size: 13px;
  }
  .cjwf-bonus__reward-meta {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
  }
  .cjwf-bonus__reward-meta-item {
    font-size: 11px;
  }
  .cjwf-bonus__reward-visual {
    order: 2;
    min-height: 150px;
    height: 150px;
  }
  .cjwf-bonus__reward-visual::before {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.05) 22%, transparent 48%);
  }
  .cjwf-bonus__reward-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
@media (max-width: 480px) {
  .cjwf-bonus__reward-title {
    font-size: 20px;
  }
  .cjwf-bonus__reward-content {
    padding: 23px
      18px
      20px;
  }
  .cjwf-bonus__reward-visual {
    height: 135px;
    min-height: 135px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjwf-bonus::before, .cjwf-bonus::after, .cjwf-bonus__image, .cjwf-bonus__or, .cjwf-bonus__heading-highlight, .cjwf-bonus__particle, .cjwf-bonus__heading strong {
    animation: none !important;
  }
}
.wf-steps-section, .wf-steps-section * {
  box-sizing: border-box;
}
.wf-steps-section {
  --pink: #ff0051;
  --pink-dark: #e60049;
  --orange: #ff7700;
  --dark: #222222;
  --text: #303030;
  --muted: #62636a;
  --border: #ebe7ea;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 72px 20px 48px;
  background: #ffffff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  color: var(--text);
}
.wf-steps-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -260px;
  top: -270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.08), transparent 68%);
  animation: wfStepsGlow 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.wf-steps-section::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -275px;
  bottom: -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.07), transparent 70%);
  animation: wfStepsGlowRight 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.wf-steps-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1200px);
  margin: 0 auto;
}
.wf-steps-heading {
  margin: 0 0 44px;
  text-align: center;
  color: #222222;
  font-size: clamp(29px, 3vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -1px;
}
.wf-steps-heading-highlight, .wf-steps-heading strong {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #ff0051 0%, #ff0051 32%, #ff7700 50%, #ff0051 68%, #ff0051 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: wfStepsTitleFlow 6s linear infinite;
}
.wf-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.wf-step-card {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  padding: 27px
    24px
    80px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff 0%, #fbf9fb 100%);
  box-shadow: 0 8px 26px rgba(34, 25, 30, 0.035);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.wf-step-card::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 150px;
  right: -95px;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.13), rgba(255, 0, 81, 0.025) 46%, transparent 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.wf-step-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 0, 81, 0.17);
  box-shadow: 0 22px 46px rgba(55, 33, 43, 0.09);
}
.wf-step-card:hover::before {
  opacity: 1;
  transform: scale(1.25);
}
.wf-step-number {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 17px;
  padding: 7px 12px;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(255, 0, 81, 0.08), rgba(255, 119, 0, 0.07));
  color: #ff0051;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.wf-step-number::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ff0051;
  box-shadow: 0 0 0 4px rgba(255, 0, 81, 0.08);
}
.wf-step-title {
  position: relative;
  z-index: 3;
  max-width: 330px;
  margin: 0 0 13px;
  color: #212124;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.45px;
}
.wf-step-text {
  position: relative;
  z-index: 3;
  max-width: 333px;
  margin: 0;
  color: #64656b;
  font-size: 14px;
  line-height: 1.62;
  font-weight: 400;
}
.wf-step-either-text {
  position: relative;
  z-index: 3;
  margin: 0 0 13px;
  color: #64656b;
  font-size: 14px;
  line-height: 1.5;
}
.wf-step-either-text strong {
  color: #ff0051;
  font-weight: 700;
}
.wf-step-options {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 290px;
  gap: 7px;
}
.wf-step-option {
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 0, 81, 0.11);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255, 0, 81, 0.035), rgba(255, 119, 0, 0.025));
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.wf-step-option:hover {
  transform: translateX(3px);
  border-color: rgba(255, 0, 81, 0.25);
  background: linear-gradient(135deg, rgba(255, 0, 81, 0.07), rgba(255, 119, 0, 0.05));
}
.wf-step-option-check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0051, #ff7700);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}
.wf-step-option-text {
  color: #505158;
  font-size: 13px;
  line-height: 1.42;
  font-weight: 400;
}
.wf-step-option-text strong {
  color: #26262a;
  font-weight: 700;
}
.wf-step-or {
  display: flex;
  align-items: center;
  width: 100%;
  color: #ff0051;
}
.wf-step-or::before, .wf-step-or::after {
  content: "";
  flex: 1;
  height: 1px;
}
.wf-step-or::before {
  background: linear-gradient(90deg, transparent, rgba(255, 0, 81, 0.22));
}
.wf-step-or::after {
  background: linear-gradient(90deg, rgba(255, 0, 81, 0.22), transparent);
}
.wf-step-or span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 0 7px;
  border-radius: 30px;
  background: #ff0051;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.8px;
}
.wf-step-button-wrap {
  position: absolute;
  left: 24px;
  bottom: 23px;
  z-index: 6;
}
.wf-step-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 17px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(105deg, #ff0051 0%, #ff0051 55%, #ff7700 100%);
  background-size: 170% 100%;
  background-position: 0 center;
  color: #ffffff !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 8px 19px rgba(255, 0, 81, 0.17);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background-position 0.4s ease;
}
.wf-step-button span {
  position: relative;
  z-index: 2;
}
.wf-step-button svg {
  position: relative;
  z-index: 2;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.28s ease;
}
.wf-step-button:hover {
  transform: translateY(-2px);
  background-position: 100% center;
  color: #ffffff !important;
  box-shadow: 0 12px 27px rgba(255, 0, 81, 0.25);
}
.wf-step-button:hover svg {
  transform: translateX(3px);
}
.wf-step-image-wrap {
  position: absolute;
  right: 21px;
  bottom: 17px;
  z-index: 2;
  width: 92px;
  height: 82px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.wf-step-image {
  display: block;
  width: 100%;
  max-height: 82px;
  object-fit: contain;
  transform-origin: center;
  filter: drop-shadow(0 9px 12px rgba(255, 0, 81, 0.08));
  animation: wfStepIconFloat 4.8s ease-in-out infinite;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.wf-step-card:hover .wf-step-image {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 14px 18px rgba(255, 0, 81, 0.15));
}
.wf-step-arrow {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ebe7ea;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 20px rgba(32, 25, 29, 0.045);
  color: #3e3e42;
}
.wf-step-arrow--1 {
  left: calc(33.333% - 32px);
}
.wf-step-arrow--2 {
  left: calc(66.666% - 32px);
}
.wf-step-arrow svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: wfArrowMove 1.8s ease-in-out infinite;
}
.wf-steps-terms {
  margin-top: 38px;
  text-align: center;
}
.wf-steps-terms a {
  color: #252525;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.25s ease;
}
.wf-steps-terms a:hover {
  color: #ff0051;
}
@keyframes wfStepIconFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}
@keyframes wfArrowMove {
  0%,
  100% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(4px);
  }
}
@keyframes wfStepsTitleFlow {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 220% center;
  }
}
@keyframes wfStepsGlow {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(80px, 50px, 0) scale(1.2);
  }
}
@keyframes wfStepsGlowRight {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-80px, -40px, 0) scale(1.18);
  }
}
@media (max-width: 900px) {
  .wf-steps-section {
    padding: 56px 18px 42px;
  }
  .wf-steps-grid {
    gap: 15px;
  }
  .wf-step-card {
    min-height: 365px;
    padding: 23px
      18px
      78px;
  }
  .wf-step-title {
    max-width: 225px;
    font-size: 19px;
  }
  .wf-step-text {
    max-width: 210px;
    font-size: 14px;
  }
  .wf-step-options {
    max-width: 220px;
  }
  .wf-step-option {
    padding: 8px 9px;
  }
  .wf-step-option-text {
    font-size: 11.5px;
  }
  .wf-step-either-text {
    font-size: 12.5px;
  }
  .wf-step-button-wrap {
    left: 18px;
    bottom: 20px;
  }
  .wf-step-button {
    padding: 10px 14px;
    font-size: 12px;
  }
  .wf-step-image-wrap {
    width: 76px;
    height: 75px;
    right: 14px;
  }
  .wf-step-arrow {
    width: 47px;
    height: 47px;
  }
}
@media (max-width: 767px) {
  .wf-steps-section {
    padding: 44px 15px 38px;
  }
  .wf-steps-heading {
    margin-bottom: 32px;
    font-size: 27px;
    line-height: 1.25;
  }
  .wf-steps-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }
  .wf-step-card {
    min-height: 350px;
    padding: 24px
      20px
      78px;
    border-radius: 20px;
  }
  .wf-step-title {
    max-width: 82%;
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.3;
  }
  .wf-step-text {
    max-width: 68%;
    font-size: 13px;
    line-height: 1.6;
  }
  .wf-step-either-text {
    max-width: 75%;
    font-size: 13px;
  }
  .wf-step-options {
    max-width: 74%;
  }
  .wf-step-option {
    min-height: 42px;
    padding: 8px 10px;
  }
  .wf-step-option-text {
    font-size: 12px;
  }
  .wf-step-button-wrap {
    left: 20px;
    bottom: 20px;
  }
  .wf-step-button {
    min-height: 39px;
    padding: 10px 15px;
    border-radius: 9px;
    font-size: 12px;
  }
  .wf-step-image-wrap {
    width: 86px;
    height: 79px;
    right: 17px;
    bottom: 14px;
  }
  .wf-step-arrow {
    position: absolute;
    left: 50% !important;
    width: 50px;
    height: 50px;
    transform: translate(-50%, 0);
  }
  .wf-step-arrow--1 {
    top: calc(33.333% - 28px);
  }
  .wf-step-arrow--2 {
    top: calc(66.666% - 22px);
  }
  .wf-step-arrow svg {
    transform: rotate(90deg);
    animation: wfArrowMoveMobile 1.8s ease-in-out infinite;
  }
  .wf-steps-terms {
    margin-top: 31px;
  }
}
@keyframes wfArrowMoveMobile {
  0%,
  100% {
    transform: rotate(90deg) translateX(-2px);
  }
  50% {
    transform: rotate(90deg) translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-step-image, .wf-step-arrow svg, .wf-steps-heading-highlight, .wf-steps-section::before, .wf-steps-section::after, .wf-steps-heading strong {
    animation: none !important;
  }
}
.wf-business-section, .wf-business-section * {
  box-sizing: border-box;
}
.wf-business-section {
  --pink: #ff0051;
  --orange: #ff7700;
  --dark: #202124;
  --text: #3a3a3a;
  --muted: #64666c;
  --card: #f8f6f8;
  --border: #ebe8eb;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 72px 20px 62px;
  background: radial-gradient(circle at 12% 15%, rgba(255, 0, 81, 0.04), transparent 24%), radial-gradient(circle at 90% 84%, rgba(255, 119, 0, 0.04), transparent 26%), #ffffff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  color: var(--text);
}
.wf-business-section::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  left: -280px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.08), rgba(255, 0, 81, 0.02) 45%, transparent 72%);
  animation: wfBusinessGlowLeft 10s ease-in-out infinite alternate;
  pointer-events: none;
}
.wf-business-section::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -300px;
  bottom: -290px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.08), rgba(255, 119, 0, 0.02) 45%, transparent 72%);
  animation: wfBusinessGlowRight 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.wf-business-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1200px);
  margin: 0 auto;
}
.wf-business-heading {
  margin: 0 0 13px;
  text-align: center;
  color: #222222;
  font-size: clamp(29px, 3vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -1px;
}
.wf-business-heading-highlight {
  position: relative;
  display: inline-block;
}
.wf-business-heading-highlight::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 100px;
  background: linear-gradient(90deg, #ff0051, #ff7700);
  animation: wfBusinessUnderline 1.2s ease forwards;
}
.wf-business-subtitle {
  margin: 0 0 39px;
  text-align: center;
  color: #56585d;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}
.wf-business-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wf-business-card {
  position: relative;
  min-height: 338px;
  overflow: hidden;
  padding: 22px 20px 19px;
  border: 1px solid rgba(0, 0, 0, 0.035);
  border-radius: 19px;
  background: linear-gradient(145deg, #faf8fa 0%, #f6f4f6 100%);
  box-shadow: 0 7px 26px rgba(26, 21, 24, 0.025);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.wf-business-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 180px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.1), transparent 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.wf-business-card:nth-child(2)::before {
  background: radial-gradient(circle, rgba(255, 119, 0, 0.1), transparent 70%);
}
.wf-business-card:nth-child(3)::before {
  background: radial-gradient(circle, rgba(255, 0, 81, 0.1), transparent 70%);
}
.wf-business-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 0, 81, 0.12);
  box-shadow: 0 22px 48px rgba(50, 31, 41, 0.09);
}
.wf-business-card:hover::before {
  opacity: 1;
  transform: scale(1.25);
}
.wf-business-accent {
  position: absolute;
  left: 0;
  top: 20px;
  width: 4px;
  height: 24px;
  border-radius: 0
    3px
    3px
    0;
  background: linear-gradient(180deg, #ff0051, #ff2b70);
  box-shadow: 0 0 14px rgba(255, 0, 81, 0.2);
  animation: wfBusinessAccentPulse 2.8s ease-in-out infinite;
}
.wf-business-card-title {
  position: relative;
  z-index: 2;
  margin: 0
    0
    17px;
  color: #292929;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.35px;
}
.wf-business-list {
  position: relative;
  z-index: 2;
  margin: 0
    0
    20px;
  padding-left: 18px;
  color: #4d4f55;
  font-size: 14px;
  line-height: 1.3;
}
.wf-business-list li {
  margin-bottom: 7px;
}
.wf-business-list li:last-child {
  margin-bottom: 0;
}
.wf-business-list li::marker {
  color: #242424;
  font-size: 9px;
}
.wf-business-image-wrap {
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: 18px;
  height: 162px;
  overflow: hidden;
  border-radius: 24px;
  background: #eeeeee;
}
.wf-business-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
}
.wf-business-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.035) 100%);
  pointer-events: none;
}
.wf-business-card:hover .wf-business-image {
  transform: scale(1.065);
  filter: saturate(1.05) contrast(1.02);
}
.wf-business-card::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, #ff0051, #ff7700, transparent);
  transition: transform 0.4s ease;
}
.wf-business-card:hover::after {
  transform: scaleX(1);
}
.wf-business-dot {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}
.wf-business-dot--1 {
  width: 7px;
  height: 7px;
  left: 7%;
  top: 28%;
  background: #ff0051;
  opacity: 0.19;
  animation: wfBusinessDotFloat 6s ease-in-out infinite;
}
.wf-business-dot--2 {
  width: 8px;
  height: 8px;
  right: 7%;
  top: 36%;
  background: #ff7700;
  opacity: 0.2;
  animation: wfBusinessDotFloat 7s ease-in-out infinite reverse;
}
@keyframes wfBusinessAccentPulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 0, 81, 0.16);
  }
  50% {
    opacity: 0.68;
    box-shadow: 0 0 18px rgba(255, 0, 81, 0.3);
  }
}
@keyframes wfBusinessUnderline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes wfBusinessGlowLeft {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(80px, 50px, 0) scale(1.15);
  }
}
@keyframes wfBusinessGlowRight {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-80px, -50px, 0) scale(1.18);
  }
}
@keyframes wfBusinessDotFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.15;
  }
  50% {
    transform: translateY(-22px);
    opacity: 0.38;
  }
}
@media (max-width: 900px) {
  .wf-business-section {
    padding: 58px
      18px
      50px;
  }
  .wf-business-grid {
    gap: 16px;
  }
  .wf-business-card {
    min-height: 355px;
    padding: 20px
      16px
      17px;
  }
  .wf-business-card-title {
    font-size: 19px;
  }
  .wf-business-list {
    font-size: 12px;
  }
  .wf-business-image-wrap {
    left: 15px;
    right: 15px;
    height: 150px;
    border-radius: 20px;
  }
}
@media (max-width: 767px) {
  .wf-business-section {
    padding: 45px
      15px
      42px;
  }
  .wf-business-heading {
    font-size: 27px;
  }
  .wf-business-subtitle {
    margin-bottom: 30px;
    font-size: 13px;
  }
  .wf-business-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .wf-business-card {
    min-height: 400px;
    padding: 22px
      18px
      18px;
    border-radius: 19px;
  }
  .wf-business-card-title {
    font-size: 19px;
  }
  .wf-business-list {
    font-size: 13px;
  }
  .wf-business-image-wrap {
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 200px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-business-section::before, .wf-business-section::after, .wf-business-accent, .wf-business-dot {
    animation: none !important;
  }
  .wf-business-heading-highlight::after {
    animation: none !important;
    width: 100%;
  }
}
.wf-multi-section, .wf-multi-section * {
  box-sizing: border-box;
}
.wf-multi-section {
  --pink: #ff0051;
  --pink-light: #ff3b77;
  --orange: #ff7700;
  --dark: #080206;
  --card: #fff2f6;
  --text: #252225;
  --muted: #716871;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 56px 20px 34px;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, #ff0051 0%, #f40050 23%, #d10046 47%, #720029 73%, #17000b 100%);
  background-size: 180% 180%;
  animation: wfMultiBgMove 12s ease-in-out infinite;
}
.wf-multi-section::before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  left: -290px;
  top: -350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 70, 130, 0.13) 28%, transparent 70%);
  filter: blur(15px);
  animation: wfMultiGlowLeft 10s ease-in-out infinite alternate;
  pointer-events: none;
}
.wf-multi-section::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  bottom: -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.24) 0%, rgba(255, 0, 81, 0.1) 38%, transparent 72%);
  filter: blur(20px);
  animation: wfMultiGlowRight 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.wf-multi-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  background-image: linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 95%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 95%);
}
.wf-multi-orb {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}
.wf-multi-orb--1 {
  width: 280px;
  height: 280px;
  right: 18%;
  top: -130px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
  animation: wfMultiOrb 8s ease-in-out infinite;
}
.wf-multi-orb--2 {
  width: 240px;
  height: 240px;
  left: 15%;
  bottom: -150px;
  background: radial-gradient(circle, rgba(255, 119, 0, 0.2), transparent 70%);
  animation: wfMultiOrb 10s ease-in-out infinite reverse;
}
.wf-multi-container {
  position: relative;
  z-index: 3;
  width: min(100%, 1200px);
  margin: 0 auto;
}
.wf-multi-heading {
  max-width: 610px;
  margin: 0
    auto
    42px;
  text-align: center;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 35px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.wf-multi-heading span {
  position: relative;
  display: inline-block;
}
.wf-multi-heading span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 70px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #ffffff, rgba(255, 255, 255, 0.2));
  animation: wfMultiTitleLine 3s ease-in-out infinite;
}
.wf-multi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 22px;
}
.wf-multi-card {
  position: relative;
  min-height: 285px;
  overflow: hidden;
  padding: 22px
    21px
    20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255, 246, 249, 0.98), rgba(255, 237, 243, 0.96));
  box-shadow: 0 18px 45px rgba(55, 0, 22, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.wf-multi-card::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 150px;
  right: -110px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 81, 0.14), rgba(255, 0, 81, 0.03) 48%, transparent 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.wf-multi-card::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, #ff7700, #ff0051, transparent);
  transition: transform 0.4s ease;
}
.wf-multi-card:hover {
  transform: translateY(-9px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 60px rgba(43, 0, 18, 0.24);
}
.wf-multi-card:hover::before {
  opacity: 1;
  transform: scale(1.25);
}
.wf-multi-card:hover::after {
  transform: scaleX(1);
}
.wf-multi-image-area {
  position: relative;
  z-index: 2;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.wf-multi-image {
  display: block;
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  transform: translateZ(0);
  filter: drop-shadow(0 8px 12px rgba(75, 0, 27, 0.07));
  animation: wfMultiImageFloat 5s ease-in-out infinite;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.wf-multi-card:nth-child(2) .wf-multi-image {
  animation-delay: -0.8s;
}
.wf-multi-card:nth-child(3) .wf-multi-image {
  animation-delay: -1.5s;
}
.wf-multi-card:nth-child(4) .wf-multi-image {
  animation-delay: -2.2s;
}
.wf-multi-card:nth-child(5) .wf-multi-image {
  animation-delay: -2.9s;
}
.wf-multi-card:nth-child(6) .wf-multi-image {
  animation-delay: -3.6s;
}
.wf-multi-card:hover .wf-multi-image {
  transform: scale(1.07) translateY(-4px);
  filter: drop-shadow(0 14px 18px rgba(255, 0, 81, 0.13));
}
.wf-multi-card-content {
  position: relative;
  z-index: 2;
}
.wf-multi-title {
  margin: 0
    0
    9px;
  color: #272327;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.wf-multi-text {
  margin: 0;
  color: #766b73;
  font-size: 14px;
  line-height: 1.48;
  font-weight: 400;
}
.wf-multi-highlight, .wf-multi-text strong {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.wf-multi-card-note {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  color: #81747d;
  font-size: 10px;
  line-height: 1.4;
  font-style: italic;
}
.wf-multi-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff0051;
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(255, 0, 81, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wf-multi-arrow svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: wfMultiArrowMove 1.8s ease-in-out infinite;
}
.wf-multi-card:hover .wf-multi-arrow {
  transform: scale(1.12);
  box-shadow: 0 10px 24px rgba(255, 0, 81, 0.32);
}
.wf-multi-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}
.wf-multi-cta {
  position: relative;
  overflow: hidden;
  min-width: 162px;
  min-height: 46px;
  padding: 0
    28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  background: #ffffff;
  color: #ff0051;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.17);
  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.wf-multi-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, #ff7700, #ff0051);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wf-multi-cta:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}
.wf-multi-cta:hover::before {
  opacity: 1;
}
.wf-multi-footer-note {
  margin-top: 33px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  font-style: italic;
}
@keyframes wfMultiBgMove {
  0% {
    background-position: 0%
      50%;
  }
  50% {
    background-position: 100%
      50%;
  }
  100% {
    background-position: 0%
      50%;
  }
}
@keyframes wfMultiImageFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes wfMultiArrowMove {
  0%,
  100% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(2px);
  }
}
@keyframes wfMultiGlowLeft {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(130px, 80px, 0) scale(1.2);
  }
}
@keyframes wfMultiGlowRight {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-120px, -80px, 0) scale(1.18);
  }
}
@keyframes wfMultiOrb {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(30px) scale(1.1);
  }
}
@keyframes wfMultiTitleLine {
  0%,
  100% {
    width: 55px;
    opacity: 0.65;
  }
  50% {
    width: 110px;
    opacity: 1;
  }
}
@media (max-width: 900px) {
  .wf-multi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wf-multi-container {
    max-width: 700px;
  }
}
@media (max-width: 600px) {
  .wf-multi-section {
    padding: 44px
      15px
      30px;
  }
  .wf-multi-heading {
    margin-bottom: 34px;
    font-size: 27px;
  }
  .wf-multi-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .wf-multi-card {
    min-height: 280px;
    border-radius: 21px;
    padding: 20px
      18px;
  }
  .wf-multi-image-area {
    height: 100px;
  }
  .wf-multi-title {
    font-size: 18px;
  }
  .wf-multi-text {
    max-width: 88%;
    font-size: 12.5px;
  }
  .wf-multi-cta-wrap {
    margin-top: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-multi-section, .wf-multi-section::before, .wf-multi-section::after, .wf-multi-image, .wf-multi-arrow svg, .wf-multi-orb, .wf-multi-heading span::after {
    animation: none !important;
  }
}
.cj-suggestion-slider, .cj-suggestion-slider * {
  box-sizing: border-box;
}
.cj-suggestion-slider {
  width: 100%;
  padding: 80px 0 90px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}
.cj-suggestion-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
}
.cj-suggestion-head {
  max-width: 900px;
  margin: 0 auto 55px;
  text-align: center;
}
.cj-suggestion-title {
  margin: 0;
  color: #181818;
  font-size: clamp(34px, 4vw, 38px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.8px;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}
.cj-suggestion-title span {
  color: #ff7700;
}
.cj-slider-area {
  position: relative;
  width: 100%;
  padding: 28px 70px 38px;
}
.cj-slider-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.cj-slider-viewport:active {
  cursor: grabbing;
}
.cj-slider-track {
  display: flex;
  align-items: center;
  gap: 22px;
  will-change: transform;
  transition: transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cj-slider-track.cj-no-transition {
  transition: none !important;
}
.cj-slide-card {
  position: relative;
  flex: 0 0 250px;
  height: 340px;
  overflow: hidden;
  border-radius: 22px;
  background: #f4f4f4;
  opacity: 0.48;
  transform: scale(0.84);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease, filter 0.4s ease, box-shadow 0.5s ease;
}
.cj-slide-card.near {
  opacity: 0.78;
  transform: scale(0.92);
}
.cj-slide-card.active {
  z-index: 5;
  opacity: 1;
  transform: scale(1.12);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.16);
}
.cj-slide-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transition: transform 0.6s ease;
}
.cj-slide-card:hover img {
  transform: scale(1.04);
}
.cj-slide-card::after {
  content: "";
  position: absolute;
  inset: auto
    0
    0;
  height: 38%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cj-slide-number {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  min-width: 39px;
  height: 29px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #111111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
.cj-slider-btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 52px;
  height: 52px;
  border: 1px solid #ebebeb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  color: #222222;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cj-slider-btn:hover {
  background: #ff7700;
  border-color: #ff7700;
  color: #ffffff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 13px 30px rgba(255, 119, 0, 0.22);
}
.cj-slider-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cj-slider-prev {
  left: 0;
}
.cj-slider-next {
  right: 0;
}
.cj-slider-progress {
  width: 180px;
  height: 3px;
  margin: 25px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeeee;
}
.cj-slider-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7700, #ff9b3e);
  transition: transform 0.45s ease;
}
@media (max-width: 1100px) {
  .cj-suggestion-slider {
    padding: 70px
      0
      75px;
  }
  .cj-slider-area {
    padding-left: 55px;
    padding-right: 55px;
  }
  .cj-slide-card {
    flex-basis: 220px;
    height: 310px;
  }
}
@media (max-width: 767px) {
  .cj-suggestion-slider {
    padding: 55px
      0
      65px;
  }
  .cj-suggestion-inner {
    padding: 0
      15px;
  }
  .cj-suggestion-head {
    margin-bottom: 30px;
  }
  .cj-suggestion-title {
    font-size: 34px;
    letter-spacing: -1px;
  }
  .cj-slider-area {
    padding: 16px
      0
      25px;
  }
  .cj-slider-track {
    gap: 13px;
  }
  .cj-slide-card {
    flex: 0
      0
      68vw;
    max-width: 270px;
    height: 340px;
    border-radius: 18px;
    transform: scale(0.88);
  }
  .cj-slide-card.near {
    transform: scale(0.92);
  }
  .cj-slide-card.active {
    transform: scale(1);
  }
  .cj-slider-btn {
    display: none;
  }
  .cj-slider-progress {
    width: 130px;
    margin-top: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cj-slider-track, .cj-slide-card, .cj-slide-card img, .cj-slider-progress-bar {
    transition-duration: 0.01ms !important;
  }
}
.cjwf-premium-faq, .cjwf-premium-faq * {
  box-sizing: border-box;
}
.cjwf-premium-faq {
  --pink: #ff0051;
  --pink-dark: #d90045;
  --pink-soft: #fff0f5;
  --pink-soft-2: #fff7fa;
  --black: #151515;
  --text: #3f3f46;
  --muted: #77777f;
  --border: #ececf0;
  --bg: #ffffff;
  --soft-bg: #fafafa;
  width: 100%;
  padding: 110px 24px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 0% 0%, rgba(255, 0, 81, 0.07), transparent 28%), radial-gradient(circle at 100% 100%, rgba(255, 0, 81, 0.045), transparent 30%), #ffffff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.cjwf-premium-faq::before {
  content: "";
  position: absolute;
  top: 90px;
  right: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 0, 81, 0.08);
  pointer-events: none;
}
.cjwf-premium-faq::after {
  content: "";
  position: absolute;
  top: 150px;
  right: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(255, 0, 81, 0.06);
  pointer-events: none;
}
.cjwf-premium-container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.cjwf-premium-header {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
}
.cjwf-premium-title {
  margin: 0;
  color: var(--black);
  font-size: clamp(38px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2.7px;
}
.cjwf-premium-title span {
  color: var(--pink);
}
.cjwf-premium-desc {
  max-width: 680px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.cjwf-premium-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.cjwf-premium-side {
  position: sticky;
  top: 30px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(145deg, #171717, #252525);
  color: #fff;
  overflow: hidden;
}
.cjwf-premium-side::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(255, 0, 81, 0.24);
  filter: blur(6px);
}
.cjwf-premium-side > * {
  position: relative;
  z-index: 2;
}
.cjwf-premium-side-label {
  margin-bottom: 26px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cjwf-premium-side-title {
  margin: 0 0 14px;
  color: #fff;
  font-size: 25px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.7px;
}
.cjwf-premium-side-title span {
  color: #ff4d85;
}
.cjwf-premium-side-text {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.67);
  font-size: 14px;
  line-height: 1.7;
}
.cjwf-premium-side-stat {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.cjwf-premium-side-stat span {
  color: #ffffff;
  font-size: 16px;
}
.cjwf-premium-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.cjwf-premium-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.3s ease;
}
.cjwf-premium-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 81, 0.18);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.055);
}
.cjwf-premium-item.active {
  border-color: rgba(255, 0, 81, 0.3);
  box-shadow: 0 22px 55px rgba(23, 23, 23, 0.08), 0 0 0 1px rgba(255, 0, 81, 0.025);
}
.cjwf-premium-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #ff0051, #ff4d85);
}
.cjwf-premium-question {
  width: 100%;
  min-height: 88px;
  padding: 21px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.cjwf-premium-q-content {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.cjwf-premium-number {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #ff7700;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.cjwf-premium-item.active .cjwf-premium-number {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), #ff3a78);
  transform: scale(1.03);
  box-shadow: 0 9px 20px rgba(255, 0, 81, 0.2);
}
.cjwf-premium-question-text {
  color: #202024;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.25px;
}
.cjwf-premium-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  position: relative;
  border-radius: 50%;
  background: #f7f7f8;
  transition: background 0.3s ease, transform 0.3s ease;
}
.cjwf-premium-icon::before, .cjwf-premium-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 4px;
  background: #46464c;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.cjwf-premium-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.cjwf-premium-item.active .cjwf-premium-icon {
  background: var(--pink);
  transform: rotate(180deg);
}
.cjwf-premium-item.active .cjwf-premium-icon::before, .cjwf-premium-item.active .cjwf-premium-icon::after {
  background: #fff;
}
.cjwf-premium-item.active .cjwf-premium-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.cjwf-premium-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cjwf-premium-item.active .cjwf-premium-answer-wrap {
  grid-template-rows: 1fr;
}
.cjwf-premium-answer-inner {
  overflow: hidden;
}
.cjwf-premium-answer {
  padding: 4px
      28px
      30px
      88px;
  color: #65656d;
  font-size: 15px;
  line-height: 1.8;
}
.cjwf-premium-answer p {
  margin: 0 0 15px;
}
.cjwf-premium-answer p:last-child {
  margin-bottom: 0;
}
.cjwf-premium-answer strong {
  color: #222228;
}
.cjwf-premium-answer ul, .cjwf-premium-answer ol {
  margin: 14px 0 18px;
  padding-left: 21px;
}
.cjwf-premium-answer li {
  padding-left: 4px;
  margin-bottom: 9px;
}
.cjwf-premium-highlight {
  color: var(--pink);
  font-weight: 750;
}
.cjwf-premium-promo {
  margin: 20px 0 23px;
  padding: 24px;
  border-radius: 17px;
  background: linear-gradient(135deg, #fff0f5, #fff9fb);
  border: 1px solid rgba(255, 0, 81, 0.13);
  position: relative;
  overflow: hidden;
}
.cjwf-premium-promo::after {
  content: "$100";
  position: absolute;
  right: -10px;
  bottom: -18px;
  color: rgba(255, 0, 81, 0.045);
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -5px;
  pointer-events: none;
}
.cjwf-premium-promo-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cjwf-premium-promo-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
}
.cjwf-premium-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
}
.cjwf-premium-task {
  min-height: 108px;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(255, 0, 81, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.035);
}
.cjwf-premium-task-number {
  margin-bottom: 7px;
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cjwf-premium-task strong {
  display: block;
  margin-bottom: 5px;
  color: #202024;
  font-size: 14px;
}
.cjwf-premium-task span {
  color: #74747b;
  font-size: 13px;
  line-height: 1.55;
}
.cjwf-premium-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 22px 0;
}
.cjwf-premium-method {
  min-height: 178px;
  padding: 21px;
  border-radius: 16px;
  border: 1px solid #ececf0;
  background: linear-gradient(180deg, #fff, #fafafa);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cjwf-premium-method:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 0, 81, 0.22);
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.05);
}
.cjwf-premium-method-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 15px;
  border-radius: 11px;
  background: var(--pink-soft);
  color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.cjwf-premium-method-title {
  margin-bottom: 8px;
  color: #202024;
  font-size: 15px;
  font-weight: 750;
}
.cjwf-premium-method p {
  margin: 0;
  color: #77777f;
  font-size: 13.5px;
  line-height: 1.65;
}
.cjwf-premium-country-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}
.cjwf-premium-country {
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid #eeeeef;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cjwf-premium-country span:first-child {
  color: #53535a;
  font-size: 13px;
}
.cjwf-premium-country span:last-child {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 30px;
  background: var(--pink-soft);
  color: var(--pink);
  font-size: 11px;
  font-weight: 750;
}
.cjwf-premium-security {
  margin-top: 15px;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #181818, #2b2b2d);
  color: #fff;
}
.cjwf-premium-security-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(255, 0, 81, 0.23);
}
.cjwf-premium-security strong {
  color: #fff;
}
.cjwf-premium-security p {
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 1024px) {
  .cjwf-premium-faq {
    padding: 85px 22px;
  }
  .cjwf-premium-layout {
    grid-template-columns: 1fr;
  }
  .cjwf-premium-side {
    position: relative;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 25px;
  }
  .cjwf-premium-side-stat {
    min-width: 100px;
    padding-top: 0;
    padding-left: 22px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}
@media (max-width: 800px) {
  .cjwf-premium-methods {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .cjwf-premium-faq {
    padding: 65px 14px;
  }
  .cjwf-premium-header {
    margin-bottom: 38px;
  }
  .cjwf-premium-title {
    font-size: 36px;
    line-height: 1.09;
    letter-spacing: -1.5px;
  }
  .cjwf-premium-desc {
    font-size: 14px;
  }
  .cjwf-premium-layout {
    gap: 20px;
  }
  .cjwf-premium-side {
    padding: 23px;
    grid-template-columns: 1fr;
  }
  .cjwf-premium-side-stat {
    padding-top: 18px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .cjwf-premium-item {
    border-radius: 16px;
  }
  .cjwf-premium-question {
    min-height: 77px;
    padding: 17px 16px;
    gap: 12px;
  }
  .cjwf-premium-q-content {
    gap: 11px;
  }
  .cjwf-premium-number {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 9px;
  }
  .cjwf-premium-question-text {
    font-size: 14.5px;
  }
  .cjwf-premium-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .cjwf-premium-answer {
    padding: 0
        18px
        23px
        18px;
    font-size: 14px;
  }
  .cjwf-premium-task-grid, .cjwf-premium-country-grid {
    grid-template-columns: 1fr;
  }
  .cjwf-premium-promo {
    padding: 18px;
  }
}
.cjwf-cta, .cjwf-cta * {
  box-sizing: border-box;
}
.cjwf-cta {
  --cjwf-pink: #ff0051;
  --cjwf-orange: #ff7700;
  --cjwf-white: #ffffff;
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* top / bottom padding reserves the bands used by the floating logos,
       so the content can never sit under them */
  padding: 118px
      24px
      118px;
  overflow: hidden;
  /* 同 Hero：完整 url(...) 由 index.jsx 以 --wf-faq-bg 注入，此处不得写字面 url() */
  background-image: var(--wf-faq-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.cjwf-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(112, 0, 43, 0.05) 0%, rgba(90, 0, 35, 0.02) 50%, rgba(30, 0, 30, 0.06) 100%);
  pointer-events: none;
}
.cjwf-brand-logo {
  position: absolute;
  z-index: 15;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px
      18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(30, 0, 25, 0.1);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.cjwf-brand-logo:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 15px 35px rgba(30, 0, 25, 0.15);
}
.cjwf-brand-logo--cj {
  left: 200px;
  top: 30px;
}
.cjwf-brand-logo--cj::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 42%;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff7700, transparent);
}
.cjwf-brand-logo--worldfirst {
  right: 180px;
  bottom: 30px;
}
.cjwf-brand-logo--worldfirst::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 42%;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(270deg, #ff0051, transparent);
}
.cjwf-brand-logo img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.cjwf-brand-logo:hover img {
  transform: scale(1.04);
}
.cjwf-brand-logo--cj img {
  width: 165px;
  max-height: 35px;
}
.cjwf-brand-logo--worldfirst img {
  width: 170px;
  max-height: 35px;
}
.cjwf-cta-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.cjwf-cta-title {
  margin: 0;
  color: var(--cjwf-white);
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1.5px;
}
.cjwf-cta-desc {
  max-width: 790px;
  margin: 20px
      auto
      0;
  color: rgba(255, 255, 255, 0.93);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
.cjwf-cta-desc strong {
  color: #ffffff;
  font-weight: 700;
}
.cjwf-cta-actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.cjwf-cta-btn {
  min-width: 150px;
  height: 52px;
  padding: 0
      28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none !important;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.cjwf-cta-btn-primary {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: var(--cjwf-pink) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.cjwf-cta-btn-primary:hover {
  transform: translateY(-3px);
  background: var(--cjwf-pink);
  border-color: var(--cjwf-pink);
  color: #ffffff !important;
  box-shadow: 0 15px 34px rgba(255, 0, 81, 0.28);
}
.cjwf-cta-btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #ffffff !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cjwf-cta-btn-secondary:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: #ffffff;
  color: var(--cjwf-pink) !important;
}
@media (max-width: 900px) {
  .cjwf-cta {
    padding: 100px
        20px
        100px;
  }
  .cjwf-brand-logo {
    height: 52px;
    padding: 9px
        14px;
  }
  .cjwf-brand-logo--cj {
    left: 22px;
    top: 26px;
  }
  .cjwf-brand-logo--worldfirst {
    right: 22px;
    bottom: 26px;
  }
  .cjwf-brand-logo--cj img {
    width: 140px;
  }
  .cjwf-brand-logo--worldfirst img {
    width: 145px;
  }
}
@media (max-width: 767px) {
   {
    /* Logos remain separate */
  }
  .cjwf-cta {
    min-height: 470px;
    padding: 88px
        20px
        88px;
    background-position: center center;
  }
  .cjwf-brand-logo {
    height: 46px;
    padding: 8px
        11px;
    border-radius: 11px;
  }
  .cjwf-brand-logo--cj {
    left: 14px;
    top: 20px;
  }
  .cjwf-brand-logo--worldfirst {
    right: 14px;
    bottom: 20px;
  }
  .cjwf-brand-logo--cj img {
    width: 110px;
    max-height: 27px;
  }
  .cjwf-brand-logo--worldfirst img {
    width: 115px;
    max-height: 27px;
  }
  .cjwf-cta-title {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -1px;
  }
  .cjwf-cta-desc {
    margin-top: 18px;
    max-width: 530px;
    font-size: 14px;
    line-height: 1.6;
  }
  .cjwf-cta-actions {
    margin-top: 30px;
    gap: 14px;
  }
  .cjwf-cta-btn {
    min-width: 140px;
    height: 48px;
    padding: 0
        22px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .cjwf-cta {
    min-height: 500px;
    padding: 80px
        18px
        80px;
    background-position: 55%
        center;
  }
  .cjwf-brand-logo {
    height: 42px;
    padding: 7px
        9px;
  }
  .cjwf-brand-logo--cj {
    left: 10px;
    top: 16px;
  }
  .cjwf-brand-logo--worldfirst {
    right: 10px;
    bottom: 16px;
  }
  .cjwf-brand-logo--cj img {
    width: 92px;
    max-height: 24px;
  }
  .cjwf-brand-logo--worldfirst img {
    width: 96px;
    max-height: 24px;
  }
  .cjwf-cta-title {
    font-size: 29px;
  }
  .cjwf-cta-desc {
    font-size: 13.5px;
  }
  .cjwf-cta-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .cjwf-cta-btn {
    width: 100%;
    max-width: 260px;
  }
}
.worldfirst-page {
  /* 【行高基线对齐原型】原型是**独立 HTML**，其 line-height 继承根是浏览器默认的 `normal`；
       而放进 CJ 站点后会继承站点全局的 `line-height: 24px`，凡是原型没显式写 line-height 的元素
       都会被撑高。实测（260818，1440 视口）：`.cjwf-dark-floating--top` 原型 57px、站内 75px，
       其中 `strong` 由 19px 变 24px —— 用户反馈的"floating 高度有点高了"就是这个。
       这里把本页的继承根还原成 normal，原型自己写了 line-height 的地方仍以它为准，不受影响。 */
  line-height: normal;
  /* 【#3 浮动徽标高度】原型 57px、站内曾 75px→64px。前一步把继承行高还原成 normal 解决了大头，
       剩余 7px 出在 `.cjwf-dark-floating span` 上：它是 `display:inline`，其行盒高度由**父级**的
       font-size:16px 撑出行内 strut（span 自身只有 10px/11px 高），于是 strong 与 span 之间凭空
       多出约 5.5px、底部再多 1.5px。实测对照：原型 strong→span 间距 3px（正好等于 strong 的
       margin-bottom），站内是 8.5px。
       改成块级后 span 自成行盒、按自身字号算高，间距回到 margin-bottom 的 3px，整体高度与原型一致。 */
  /* 【#14】原型该处用的是内联 style="color:#ff0051"，内联样式进不了 :global 体系，
       迁移时改成了类名，但类规则一直没补 —— 于是它被 `.cj-suggestion-title span{color:#ff7700}`
       吃成橙色。这里补回粉色（第一个 span 不写规则，继续吃橙色，与原型一致）。 */
  /* 【列表符号：页面级恢复，不做逐处补丁】
       原型是独立 HTML，所有 ul/ol 都吃浏览器默认的圆点与序号（它甚至专门写了
       `.wf-business-list li::marker{color:#242424;font-size:9px}` 来调marker样式 —— 这条规则本身
       就证明它依赖默认 marker）。而站内全局 reset 把 list-style 清成了 none，于是**整页所有列表**
       的符号都没了：FAQ Q05 的条目没圆点、Q06/Q08 的步骤没序号、business 卡的清单也没圆点。
       实测本页共 3 处列表，全部命中同一原因，故在页面级一次性恢复默认值，而不是逐个类去补
       —— 后续再加列表也不会重犯。
       只恢复 list-style，**不碰 padding**：原型自己给了 .wf-business-list 18px、FAQ ol 21px，
       页面级插手 padding 反而会盖掉它们。 */
  /* 【已移走：FAQ 答案区的 font-size:inherit】
       原先这里写的是
         .cjwf-premium-answer { p, li, span, strong { font-size: inherit } }   // 特异度 (0,2,1)
       诊断方向是对的（站内 reset 掐断了继承），但**打法错了**，一条规则同时犯了两个方向的错：
       · 漏：没带 ul/ol **本身**，继承链断在 ul 上 —— ul 仍被 reset 打成 16px，其 li 再从 ul 继承，
         照样是 16px，等于没修（这正是 pad 上 .wf-business-list 文字压图的直接原因）。
       · 过：(0,2,1) 反手压掉了**原型自己**的 .cjwf-premium-task strong{14px}（0,1,1）、
         .cjwf-premium-country span:first-child{13px}（0,2,1 同分但我在后）—— 把对的也改错了。
       根因是站点级的，不该在某个区块里局部灌 inherit。已改为文件末尾的页面级 reset 中和
       （搜「页面级中和 reset.css」），那里把特异度精确卡在 reset 与原型类规则之间。 */
  /* FAQ 的 ul 原型没给 padding/margin（独立页吃浏览器默认约 40px），站内 reset 已清零，
       这里按与 ol(21px) 对齐补上，视觉与原型一致。 */
  /* 【D7 归一】原型各区块容器宽度四套并存：§1 用 ~"min(1280px,100%-48px)"、§2~§5 用 1200、
       §7 用 1220、§6 用 1500 —— 纵向内容边缘对不齐。统一到站内 1200px 口径
       （与头部固定 1200 内容区对齐，同 entity 第 7 次补充的归一做法）。 */
}
.worldfirst-page .cjwf-dark-floating span {
  display: block;
  line-height: 1.1;
}
.worldfirst-page .cj-suggestion-title-em--pink {
  color: #ff0051;
}
.worldfirst-page ul {
  list-style: disc outside;
}
.worldfirst-page ol {
  list-style: decimal outside;
}
.worldfirst-page ul > li, .worldfirst-page ol > li {
  display: list-item;
}
.worldfirst-page .cjwf-premium-answer ul {
  padding-left: 21px;
  margin: 14px 0 18px;
}
.worldfirst-page .cjwf-dark-container, .worldfirst-page .cjwf-bonus__container, .worldfirst-page .wf-steps-container, .worldfirst-page .wf-business-container, .worldfirst-page .wf-multi-container, .worldfirst-page .cj-suggestion-inner, .worldfirst-page .cjwf-premium-container, .worldfirst-page .cjwf-cta-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 701px) and (max-width: 1200px) {
  .worldfirst-page {
    /* 【已撤销 · D7 收敛缺口②：不要覆盖 §5 的列数断点】
         我曾以"§5 到 600px 才转单列、比其它区块晚，601~767 视觉不一致"为由，在 .tablet() 里
         把 .wf-multi-grid 钉成 2 列。但 .tablet() 是 **701~1200 的整段**，这一钉就把
         701~1200 全锁成 2 列 —— 而原型的断点是 **默认 3 列 / ≤900 两列 / ≤600 单列**。
         实测（两边同宽，不加 +16 补偿）：1200/1024/950 原型 3 列、我这边 2 列；650 原型 2 列、
         我这边被 .mobile() 钉成 1 列。四个宽度全错，只有 701~900 恰好蒙对。
         这是又一次"原型已经处理过、我却去覆盖"——同 §3 箭头、§8 logo。现全部交还原型自身的
         @900 / @600 两条断点（见本文件 .wf-multi-grid 的 @media 段），此处不再插手。

         附带教训（对照方法）：早先我用"原型页 +16px 宽"来抵消它裸 HTML 的 body{margin:8px}，
         那对**内容宽度**比对是对的，但用来验**断点**就会把原型推过它自己的临界值
         （测 900 时实际喂了 916，原型给出 3 列，看起来"我少了一列"其实是量错了）。
         断点类比对必须两边同宽。 */
    /* 【D7 收敛缺口③】§7 布局在 1024 已转单列，但答案体的 88px 左缩进直到 ≤680 才释放，
         pad 上答案严重内凹。提前到 tablet 段释放。 */
    /* 【已撤销：不要覆盖 §8 双 logo 的 left/right】
         我曾担心原型用裸像素钉位（left:200px / right:180px）在窄屏会飘，就统一改成 4%。
         但原型**自己在 @900 与 @767 已经给了显式值**（22px / 10px），我这条覆盖反而把它顶掉了：
         375px 下实测原型 left=10px、我这边被改成 15px。既然原型已针对窄屏处理过，就不该插手。 */
  }
  .worldfirst-page .cjwf-premium-answer {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 700px) {
  .worldfirst-page {
    /* 下列三条与 .tablet() 同内容，**必须重述**：.tablet 有界不向 ≤700 级联 */
    /* 【已撤销 · §5 手机端列数】原先按站内 mobile 口径（≤700）把 .wf-multi-grid 提前钉成 1 列，
         但原型是 ≤600 才转单列 —— 601~700 这一段原型是 2 列、我这边成了 1 列。
         与上面 .tablet() 那条同源，一并交还原型自身的 @600 断点。 */
    /* 【已撤销：不要把 §3 箭头改成 static】
         我曾判断"原型按网格百分比定位、Step2 更高必然错位"，据此改成随流排布 —— **实测证明这个判断是错的**：
         375px 下原型两个箭头中心落在 3050 / 3468，两处卡间空隙是 [2990,3048] / [3469,3527]，
         即仅差 1~2px，视觉上就在空隙里，并没有肉眼可见的错位。
         而改成 position:static 后，它们变成 1 列栅格的第 4、5 行，被排到**三张卡片下方**
         （中心 4018 / 4126，末卡底部才 3935），并把区块高度从 1469 顶到 1656 —— 明显更糟。
         故保留原型的绝对定位，不做任何覆盖。 */
    /* 【这里刻意不加 overflow-x: hidden】
         260818 与原型对比实测：原型在 375px 下各 section 自身的 scrollWidth 也超出视口 144~246px，
         那是它的装饰元素（glow / orb / particle / 浮动徽标）故意伸到视口外，并由**每个 section 自己**的
         `overflow: hidden` 裁掉；原型的整页 scrollWidth 因此等于视口宽、不产生横向滚动条。
         本页逐字迁移了那些 section 级 overflow:hidden，所以整页同样是 0 溢出（实测 375/834/1440 皆为 0）。
         早先我在这里加过一条页面级 overflow-x:hidden —— 那是**遮症状**而非治根因：它会把将来真正的
         布局溢出一并藏掉，让 CDP 那条 `scrollWidth <= innerWidth` 判据失去意义。既然根因侧已经裁好了，
         这条兜底就不该存在。 */
  }
  .worldfirst-page .cjwf-premium-answer {
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* =========================================================
   页面级中和 reset.css 的字号硬设（继承链修复）
   ========================================================= */
/*
 * 【问题】站内 app/public/static/css/reset.css 有一条：
 *     body, h1..h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre,
 *     form, fieldset, legend, button, input, textarea, th, td { font-size: 16px; ... }
 * 它用**元素选择器**（特异度 0,0,1）给这些标签硬设 16px。原型是独立 HTML、没有这条 reset，
 * 它的 p/ul/ol/li 全靠**继承**拿容器字号（.wf-business-list 12px、.cjwf-premium-answer 15px …）。
 * 迁移后继承链被 reset 掐断：260818 实测 834px 下共 8 处、58 个无类名排版元素被打成 16px。
 * 最明显的后果在 pad —— .wf-business-list 的 li 该是 12px 却是 16px，列表高 132px vs 原型 69px，
 * 直接压到卡片底部那张 `position:absolute` 的图片上（重叠最多 38px）。
 *
 * 【为什么用这个特异度】必须**卡在两者之间**：
 *     reset 的 p/li …………………… (0,0,1)   ← 要压过它
 *     本规则 `body :where(.worldfirst-page) p` (0,0,2)
 *     原型自己的 .wf-business-list / .cjwf-premium-task strong … (0,1,0) 起  ← 要让着它
 * `:where()` 不贡献特异度，只用来把作用域锁在本页（不波及同页的头部/侧栏/底部）；
 * `body` 补上第 2 个元素分量，使其稳定高于 reset 一档、且与样式表加载顺序无关。
 * 于是 reset 被精确中和，其余一切仍由原型自己的规则说了算 —— 这正是先前那条
 * `.cjwf-premium-answer p,li,span,strong{font-size:inherit}`（0,2,1）做不到的：
 * 它压过了头，把原型的 .cjwf-premium-task strong{14px} 也一起改错了。
 *
 * 【为什么不逐处补】同一根因在本页命中 8 处（business 列表、FAQ 的 ul/ol/li、任务卡、支付方式、
 * 国家表…），逐处补必然漏（先前就漏了 ul/ol 本身），且后续新增列表还会再犯。
 * 与本文件上方「列表符号：页面级恢复」同一处置思路。
 *
 * 只列本页实际用到的 4 个标签，不含 h1~h6：本页所有标题都带类、由原型规则给显式字号，
 * 不依赖继承，纳进来只会扩大影响面。
 */
body :where(.worldfirst-page) p, body :where(.worldfirst-page) ul, body :where(.worldfirst-page) ol, body :where(.worldfirst-page) li {
  font-size: inherit;
}
/* =========================================================
   §4 业务卡：把图片带在流内预留出来（原型缺陷修正）
   ========================================================= */
/*
 * 【原型缺陷】.wf-business-card 用 `min-height` 给 [标题 + 列表 + 图片] 一次性包了个固定高度，
 * 而图片 .wf-business-image-wrap 是 `position:absolute; bottom:18px` **脱离文档流**的。
 * 于是卡片高度**恒等于 min-height、从不随内容生长**（实测 901~1200 全段卡高都是 338px），
 * 列表只要比设计师预设的多折一行，就直接压进图片带 —— 无人拦它。
 *
 * 实测（本页与原型逐字一致、两边同宽）：901~975 第 2 张卡压图 +22px，976~1076 压 +4px。
 * 原型自己的 @900 断点（min-height 355 + 图片降到 150）能救回来，但**救得太晚**：
 * 901~975 这一段 3 列已经挤到卡宽 271~288px，却还在用默认的 338/162 尺寸。
 * 按既定的"原型缺陷全部修正"处理。
 *
 * 【修法】不动 min-height、不动图片定位，只把图片占的那条带子用 padding-bottom 在**流内**预留出来：
 *   padding-bottom = 图片带(bottom + height) + 6px 视觉间隙
 * 绝对定位的 bottom 是相对**padding box**量的，padding 不会移动图片 —— 只压缩流内内容区，
 * 于是列表放不下时卡片**自己长高**（min-height 退化为下限），压图在数学上不再可能发生。
 *
 * 【配套：列表的 margin-bottom 必须归零】.wf-business-list 带 `margin-bottom: 20px`，
 * 而它是卡片**最后一个流内子元素** —— 这 20px 会计进卡片的流高。
 * 新的 padding-bottom 已经把"列表与图片之间的间距"包含在内，两者作用重复；不归零的话
 * 卡片凭空高出 20px（首版实测 PC 卡高被顶到 353，越过了"不影响 PC"的红线）。
 * 归零后它只是不再重复占位，视觉间距完全由 padding-bottom 提供，与原型一致。
 *
 * 【为什么不影响 PC / mobile】所需高度 = 列表底 + padding-bottom + 下边框，与各断点 min-height 比：
 *   默认段 146 + 186 + 1 = 333 ≤ 338（1201~1440）→ 不生长，间隙仍是原型的 11px
 *   ≤900   162 + 174 + 1 = 337 ≤ 355（768~900） → 不生长
 *   ≤767   138 + 224 + 1 = 363 ≤ 400（≤767）    → 不生长
 * 只有真正压图的 901~1076 会长高（1024 +2px、901~975 +29px），正是要修的那一段。
 *
 * 用 .worldfirst-page 前缀把特异度抬到 (0,2,0)，压过原型自己的三条 (0,1,0)；
 * 三条之间同分，靠书写顺序（默认 → @900 → @767）与原型保持一致的级联。
 */
.worldfirst-page .wf-business-list {
  margin-bottom: 0;
}
.worldfirst-page .wf-business-card {
  padding-bottom: 186px;
  /* 180 + 6 */
}
@media (max-width: 1000px) {
  .worldfirst-page .wf-business-card {
    padding-bottom: 174px;
    /* 168 + 6 */
  }
}
@media (max-width: 767px) {
  .worldfirst-page .wf-business-card {
    padding-bottom: 224px;
    /* 218 + 6 */
  }
}
/* =========================================================
   强调元素改为词条内嵌 <strong> 后的配色承接
   ========================================================= */
/*
 * 【背景】原先句中强调走 EmphasisText：整句一个词条 + `%em%` 占位，被强调的片段另立 key，
 * 渲染时拼成 <span class="xxx-highlight">。260818 实测该方案在翻译管线活不下来：
 *   %x% 完好率 17.3%（与完全不受保护的 {x} 的 16.7% 无差别）—— 被首字母大写成 %Em%、拆断、挪位、吞掉；
 *   且被单独送翻的片段 key 有 60.1% 不可用（"20+" 的 + 号 128/128 全丢、金额被改、后台按钮名被翻译）。
 * 改为把强调词留在句内、用 <strong> 直接写进词条（该标签族实测 374 样本完好率 100%，
 * 且是本仓 mcpLanding 系已在用的既有范式）。
 *
 * 【本段作用】强调元素由 <span class="X"> 变成了 <strong>，把原类的样式接到 strong 上。
 * 用 `:extend(.X all)` 而不是复制声明 —— 两个 heading-highlight 是十几行的渐变文字
 * （color:transparent + background-clip:text），复制一份必然与原类走样；:extend 让编译器
 * 把本选择器并进原类的**所有**规则（含各断点 @media 内的那几份），改原类时自动同步。
 *
 * 【为什么 :extend 规则写在 :global 外面】extend 是把本选择器**注入到目标规则的选择器列表**里，
 * 注入后继承的是**目标那条规则**的上下文 —— 目标就在 :global{} 内，前缀会自动带上。
 * 若本规则也包一层 :global{}，产物会变成 `:global :global .x strong`（实测重复 7 处）。
 * 故这里只留空规则体做注入（Less 丢弃空规则本身，只保留注入效果），真正的声明放下面的 :global{} 块。
 *
 * 【为什么不把 class 写进词条】词条里带 class 属性的那一族实测属性保留率只有 50.6%
 * （对照 <strong>/<code>/<a href> 族的 100%），把配色寄托在译文里等于把样式交给机翻。
 */
 {
  /*
   * 【font-weight: inherit】原来的 <span> 继承容器字重，而 <strong> 默认加粗。
   * 凡原类**没有**显式声明 font-weight 的都要显式继承回去，否则这些标题会比原型更粗。
   * 原类已给了字重的（.cjwf-bonus__money 700、.wf-multi-highlight 600）不在此列。
   */
  /* 这两处原本靠"容器 span"选择器上色（.cjwf-premium-title span / .cjwf-premium-side-title span），
     没有独立类可 extend，直接照抄那两条声明（各只有一个 color）。 */
  /* FAQ Q01 第 2 段是全页唯一一处**粉色**强调（原 <span class="cjwf-premium-highlight">）。
     同一个 .cjwf-premium-answer 里其它段落的 <strong> 是默认深色，光靠容器选择器区分不开，
     故由 constants 给这一段的 <p> 挂 pClass（该字段不参与翻译），再在此上色。 */
}
.cjwf-bonus__heading strong, .cjwf-bonus__reward-title strong, .wf-steps-heading strong {
  font-weight: inherit;
}
.cjwf-premium-title strong {
  color: var(--pink);
  font-weight: inherit;
}
.cjwf-premium-side-title strong {
  color: #ff4d85;
  font-weight: inherit;
}
.cjwf-premium-answer-p--pink strong {
  color: var(--pink);
  font-weight: 750;
}