/** Shopify CDN: Minification failed

Line 2511:0 All "@import" rules must come first

**/
/* ============ 所有变量与样式限定在 #Mepilo-sticky-bar 内 ============ */
        #Mepilo-sticky-bar {
            /* 局部CSS变量 */
            --brand: #fd8e03;
            --brand-deep: #e07b00;
            --brand-glow: rgba(253, 142, 3, 0.3);
            --gold: #c9a96e;
            --gold-soft: rgba(201, 169, 110, 0.2);
            --text-dark: #1E2A32;
            --text-sub: #6B7B83;
            --surface-light: rgba(255, 255, 255, 0.88);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 6px 28px rgba(0, 0, 0, 0.14);
            --border-subtle: rgba(201, 169, 110, 0.2);
            --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
            --font-body: 'DM Sans', 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--surface-light);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 11px 18px;
            transition: box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                        background 0.4s ease,
                        padding 0.35s ease;
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            box-shadow: none;
        }

        #Mepilo-sticky-bar *,
        #Mepilo-sticky-bar *::before,
        #Mepilo-sticky-bar *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 顶部微光装饰线 */
        #Mepilo-sticky-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(253, 142, 3, 0.15) 20%,
                rgba(201, 169, 110, 0.3) 50%,
                rgba(253, 142, 3, 0.15) 80%,
                transparent 100%);
            pointer-events: none;
            opacity: 0.7;
            transition: opacity 0.4s ease;
        }

        /* 底部柔和光晕（滚动后显现） */
        #Mepilo-sticky-bar::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 5%;
            right: 5%;
            height: 8px;
            background: radial-gradient(ellipse at center,
                rgba(253, 142, 3, 0.06) 0%,
                transparent 70%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.45s ease;
            border-radius: 50%;
        }
        /* 滚动后光晕显现（由JS控制） */
        #Mepilo-sticky-bar.Mepilo-scrolled::after {
            opacity: 1;
        }

        /* ============ 品牌名称 ============ */
        #Mepilo-sticky-bar .Mepilo-brand {
            display: flex;
            align-items: center;
            gap: 7px;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: -0.01em;
            color: var(--text-dark);
            white-space: nowrap;
            transition: font-size 0.35s ease, color 0.35s ease;
            position: relative;
            cursor: default;
        }
        /* 品牌名旁微光点 */
        #Mepilo-sticky-bar .Mepilo-brand-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--brand);
            flex-shrink: 0;
            box-shadow: 0 0 6px var(--brand-glow);
            animation: Mepilo-sticky-dotPulse 2.8s ease-in-out infinite;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }
        @keyframes Mepilo-sticky-dotPulse {
            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 6px var(--brand-glow);
            }
            50% {
                transform: scale(1.6);
                box-shadow: 0 0 14px rgba(253, 142, 3, 0.55);
            }
        }
        #Mepilo-sticky-bar .Mepilo-brand:hover .Mepilo-brand-dot {
            transform: scale(1.8);
            box-shadow: 0 0 18px rgba(253, 142, 3, 0.6);
        }

        /* ============ 评分区域 ============ */
        #Mepilo-sticky-bar .Mepilo-rating {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--text-sub);
            white-space: nowrap;
            letter-spacing: -0.01em;
            transition: font-size 0.35s ease;
            cursor: default;
        }
        /* 星星图标 */
        #Mepilo-sticky-bar .Mepilo-rating-star {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--brand);
            font-size: 1.1em;
            line-height: 1;
            flex-shrink: 0;
            animation: Mepilo-sticky-starGlow 2.5s ease-in-out infinite;
            filter: drop-shadow(0 0 4px rgba(253, 142, 3, 0.35));
            transition: transform 0.35s ease, filter 0.35s ease;
        }
        @keyframes Mepilo-sticky-starGlow {
            0%,
            100% {
                filter: drop-shadow(0 0 4px rgba(253, 142, 3, 0.35));
            }
            50% {
                filter: drop-shadow(0 0 10px rgba(253, 142, 3, 0.7));
            }
        }
        #Mepilo-sticky-bar .Mepilo-rating:hover .Mepilo-rating-star {
            transform: scale(1.2) rotate(-10deg);
            filter: drop-shadow(0 0 14px rgba(253, 142, 3, 0.85));
        }
        /* 评分数字 */
        #Mepilo-sticky-bar .Mepilo-rating-score {
            font-weight: 700;
            color: #2a1a0a;
            letter-spacing: -0.02em;
            transition: color 0.35s ease;
        }
        #Mepilo-sticky-bar .Mepilo-rating:hover .Mepilo-rating-score {
            color: var(--brand);
        }
        /* 分隔点 */
        #Mepilo-sticky-bar .Mepilo-rating-sep {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0;
            opacity: 0.6;
        }

        /* ============ 响应式：768px+ 桌面端 ============ */
        @media (min-width: 768px) {
            #Mepilo-sticky-bar {
                padding: 13px 32px;
            }
            #Mepilo-sticky-bar .Mepilo-brand {
                font-size: 1.25rem;
                gap: 9px;
            }
            #Mepilo-sticky-bar .Mepilo-brand-dot {
                width: 6px;
                height: 6px;
            }
            #Mepilo-sticky-bar .Mepilo-rating {
                font-size: 1.15rem;
                gap: 7px;
            }
            #Mepilo-sticky-bar .Mepilo-rating-star {
                font-size: 1.15em;
            }
            #Mepilo-sticky-bar .Mepilo-rating-sep {
                width: 3.5px;
                height: 3.5px;
            }
        }

        /* ============ 响应式：1024px+ 大桌面 ============ */
        @media (min-width: 1024px) {
            #Mepilo-sticky-bar {
                padding: 14px 40px;
            }
            #Mepilo-sticky-bar .Mepilo-brand {
                font-size: 1.35rem;
                gap: 10px;
            }
            #Mepilo-sticky-bar .Mepilo-brand-dot {
                width: 7px;
                height: 7px;
            }
            #Mepilo-sticky-bar .Mepilo-rating {
                font-size: 1.2rem;
                gap: 8px;
            }
        }

        /* ============ 小屏手机微调 ============ */
        @media (max-width: 380px) {
            #Mepilo-sticky-bar {
                padding: 9px 12px;
            }
            #Mepilo-sticky-bar .Mepilo-brand {
                font-size: 1.05rem;
                gap: 5px;
            }
            #Mepilo-sticky-bar .Mepilo-brand-dot {
                width: 4px;
                height: 4px;
            }
            #Mepilo-sticky-bar .Mepilo-rating {
                font-size: 1.05rem;
                gap: 4px;
            }
            #Mepilo-sticky-bar .Mepilo-rating-sep {
                width: 2.5px;
                height: 2.5px;
            }
        }



.Mepilo-who {
  --brand: #fd8e03;
  --neutral-dark: #1E2A32;
  --sub-text: #6B7B83;
  --border: #E2E6EA;
  background: #fefcf8;
margin:20px auto;
  padding: 44px 16px 52px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: 'Inter', 'SF Pro Display', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
--brand: #fd8e03;
  --brand-deep: #c56e00;
  --brand-soft: rgba(253, 142, 3, 0.10);
  --brand-glow: rgba(253, 142, 3, 0.16);
  --neutral-dark: #1E2A32;
  --neutral-mid: #3a4852;
  --sub-text: #6B7B83;
  --border: #E2E6EA;
  --bg-warm: #FDFBF7;
  --bg-cream: #fdf5ea;
  --card-bg: #FDFBF7;
  --support-dark: #141b22;
  --support-surface: #1a232b;
  --white: #ffffff;
  --shadow-xs: 0 1px 2px rgba(30, 42, 50, 0.04);
  --shadow-sm: 0 1px 4px rgba(30, 42, 50, 0.06);
  --shadow-md: 0 8px 28px rgba(30, 42, 50, 0.09);
  --shadow-lg: 0 18px 48px rgba(30, 42, 50, 0.13);
  --shadow-xl: 0 24px 64px rgba(30, 42, 50, 0.16);
  --shadow-glow: 0 0 70px rgba(253, 142, 3, 0.10);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-2xl: 36px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.slim-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.slim-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.07;
  animation: slimOrbFloat 16s ease-in-out infinite;
}
.slim-bg-orb--a {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle at 60% 40%, #fd8e03 0%, transparent 70%);
  top: -8%;
  right: -10%;
}
.slim-bg-orb--b {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle at 40% 55%, #e8b860 0%, transparent 70%);
  bottom: -14%;
  left: -7%;
  animation-delay: -7s;
  opacity: 0.06;
}
.slim-bg-orb--c {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 50% 50%, #f5d5a0 0%, transparent 70%);
  top: 44%;
  left: 55%;
  transform: translate(-50%, -50%);
  animation-delay: -12s;
  opacity: 0.05;
}
@keyframes slimOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(35px, -28px) scale(1.09); }
  40% { transform: translate(-18px, 22px) scale(0.93); }
  60% { transform: translate(-32px, -14px) scale(1.06); }
  80% { transform: translate(20px, 10px) scale(0.96); }
}
.slim-bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.022;
  background-image:
    linear-gradient(rgba(30, 42, 50, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 42, 50, 0.5) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 28%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 28%, transparent 72%);
}
.slim-bg-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1.5px solid rgba(253, 142, 3, 0.08);
  top: 12%;
  right: 6%;
  animation: slimRingSpin 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.slim-bg-ring::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(253, 142, 3, 0.22);
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 28px rgba(253, 142, 3, 0.35);
  animation: slimDotPulse 3.5s ease-in-out infinite;
}
@keyframes slimRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes slimDotPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(253, 142, 3, 0.35); transform: translateX(-50%) scale(1); }
  50% { box-shadow: 0 0 50px rgba(253, 142, 3, 0.6); transform: translateX(-50%) scale(1.45); }
}
.slim-bg-line {
  position: absolute;
  width: 1px;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(253, 142, 3, 0.12), transparent);
  top: 20%;
  left: 18%;
  animation: slimLineDrift 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
@keyframes slimLineDrift {
  0%, 100% { top: 20%; opacity: 0.4; }
  50% { top: 26%; opacity: 0.75; }
}

.slim-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.slim-section-header {
  text-align: center;
  margin-bottom: 38px;
}
.slim-section-badge {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b05d00;
  background: rgba(253, 142, 3, 0.08);
  padding: 7px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  border: 1px solid rgba(253, 142, 3, 0.16);
}
.slim-section-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--neutral-dark);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.slim-section-subtitle {
  font-size: 1.3rem;
  font-weight: 600;
  color: #4A4A4A;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.slim-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.slim-media-panel {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: linear-gradient(155deg, #fdf5ea 0%, #f0e4d5 38%, #e8d9c4 100%);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  cursor: pointer;
  transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
  isolation: isolate;
  min-height: 360px;
  z-index: 1;
}
.slim-media-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 64px rgba(30, 42, 50, 0.17), 0 0 90px rgba(253, 142, 3, 0.14);
}
.slim-media-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 42, 50, 0.05) 100%);
  z-index: 2;
  pointer-events: none;
}
.slim-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.4s var(--ease-smooth);
}
.slim-media-panel:hover .slim-media-placeholder {
  opacity: 0.65;
}
.slim-media-icon {
  font-size: 88px;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.07));
  animation: slimIconBreathe 5.5s ease-in-out infinite;
  line-height: 1;
}
@keyframes slimIconBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-16px) scale(1.04); }
  60% { transform: translateY(4px) scale(0.97); }
}
.slim-media-label {
  font-size: 1.15rem;
  font-weight: 500;
  color: #6B7B83;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0 22px;
  line-height: 1.4;
}
.slim-media-shimmer {
  position: absolute;
  width: 55%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(253, 142, 3, 0.45), transparent);
  top: 30%;
  left: 22.5%;
  z-index: 3;
  animation: slimShimmerDrift 4.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: 2px;
}
@keyframes slimShimmerDrift {
  0%, 100% { top: 30%; opacity: 0.4; }
  50% { top: 34%; opacity: 0.85; }
}

.slim-cards-vertical {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.slim-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.4s var(--ease-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  will-change: transform, box-shadow, border-color;
}
.slim-card:hover {
  border-color: rgba(253, 142, 3, 0.20);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.slim-card.is-open {
  border-color: rgba(253, 142, 3, 0.30);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(253, 142, 3, 0.04);
  transform: none;
  background: #fffefb;
}
.slim-card-header {
  padding: 17px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--neutral-dark);
  user-select: none;
  -webkit-user-select: none;
  gap: 12px;
  letter-spacing: -0.012em;
  transition: color 0.35s var(--ease-smooth);
  line-height: 1.2;
}
.slim-card.is-open .slim-card-header {
  color: #b05d00;
}
.slim-card-header-text {
  flex: 1;
  line-height: 1.25;
}
.slim-card-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(253, 142, 3, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--brand);
  transition: all 0.4s var(--ease-spring);
  line-height: 1;
}
.slim-card.is-open .slim-card-toggle {
  transform: rotate(45deg);
  background: rgba(253, 142, 3, 0.16);
  color: #c56e00;
}
.slim-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth), padding 0.4s var(--ease-smooth);
  padding: 0 20px;
  font-size: 1.15rem;
  color: var(--sub-text);
  line-height: 1.55;
}
.slim-card.is-open .slim-card-body {
  padding-bottom: 18px;
}
.slim-card-body-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}
.slim-card-body-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.slim-card-body-thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fdf5ea, #f0e4d5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow-xs);
}
.slim-card-body-text {
  flex: 1;
}
.slim-card-body-text strong {
  display: block;
  font-weight: 600;
  color: var(--neutral-dark);
  font-size: 1.15rem;
  margin-bottom: 1px;
  letter-spacing: -0.005em;
}
.slim-card-body-text span {
  font-weight: 600;
  color: var(--sub-text);
  font-size: 1.25rem;
  line-height: 1.5;
}

.slim-support-card {
  background: var(--support-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 20px 22px;
  margin-top: 6px;
  position: relative;
  box-shadow: 0 14px 38px rgba(0,0,0,0.24), 0 0 0 1px rgba(253,142,3,0.13);
  transform: translateY(0);
  transition: all 0.4s var(--ease-smooth);
  cursor: default;
  z-index: 2;
}
.slim-support-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.32), 0 0 0 2px rgba(253,142,3,0.22);
}
.slim-support-card-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.slim-support-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(253,142,3,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 22px rgba(253,142,3,0.18);
}
.slim-support-text {
  flex: 1;
  min-width: 150px;
}
.slim-support-text strong {
  display: block;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.slim-support-text span {
  font-weight: 400;
  color: #bcc5ca;
  font-size: 1.15rem;
  line-height: 1.4;
}
.slim-support-cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.35s var(--ease-smooth);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(253,142,3,0.32);
}
.slim-support-cta:hover {
  background: #e67e00;
  box-shadow: 0 10px 30px rgba(253,142,3,0.48);
  transform: scale(1.05);
}

/* Mobile horizontal scroll */
.slim-cards-horizontal-wrap {
  display: none;
  position: relative;
  margin-top: 6px;
}
.slim-cards-horizontal {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 6px 4px 22px 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-padding: 0 12px;
}
.slim-cards-horizontal::-webkit-scrollbar { display: none; }
.slim-cards-horizontal > * {
  scroll-snap-align: center;
  flex-shrink: 0;
}

.slim-card-h {
  width: 82vw;
  max-width: 380px;
  min-width: 270px;
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.4s var(--ease-smooth);
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.slim-card-h.is-active {
  border-color: rgba(253,142,3,0.35);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(253,142,3,0.05);
  transform: translateY(-2px);
}
.slim-card-h-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(148deg, #fdf5ea 0%, #f0e4d5 40%, #e4d5be 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.slim-card-h-media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to top, rgba(253,251,247,0.75), transparent);
  pointer-events: none;
  z-index: 2;
}
.slim-card-h-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.slim-card-h-media-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.slim-card-h-media-tag {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: rgba(30,42,50,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 13px;
  border-radius: 50px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.2);
}
.slim-card-h-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.slim-card-h-tag {
  font-size: 1.05rem;
  font-weight: 500;
  color: #c56e00;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.slim-card-h-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--neutral-dark);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.slim-card-h-desc {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--sub-text);
  line-height: 1.45;
}
.slim-card-h-extra {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--neutral-dark);
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.slim-card-h-extra-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(253,142,3,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* Dark support card */
.slim-card-h--support {
  background: var(--support-dark);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 44px rgba(0,0,0,0.32), 0 0 0 2px rgba(253,142,3,0.18);
  transform: translateY(-8px);
  z-index: 5;
}
.slim-card-h--support .slim-card-h-media {
  background: linear-gradient(148deg, #1e2830 0%, #151c22 50%, #0f151a 100%);
  font-size: 52px;
}
.slim-card-h--support .slim-card-h-media::after {
  background: linear-gradient(to top, rgba(20,27,34,0.75), transparent);
}
.slim-card-h--support .slim-card-h-tag { color: #fd8e03; }
.slim-card-h--support .slim-card-h-title { color: #ffffff; }
.slim-card-h--support .slim-card-h-desc { color: #bcc5ca; }
.slim-card-h--support .slim-card-h-extra {
  border-top-color: rgba(255,255,255,0.10);
  color: #ffffff;
}
.slim-card-h--support .slim-card-h-extra-icon {
  background: rgba(253,142,3,0.18);
}
.slim-card-h--support .slim-card-h-media-tag {
  background: rgba(253,142,3,0.75);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.slim-support-badge-mobile {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 50px;
  letter-spacing: 0.03em;
  margin-top: 4px;
  align-self: flex-start;
  box-shadow: 0 5px 16px rgba(253,142,3,0.38);
  cursor: pointer;
}

.slim-scroll-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  padding-bottom: 4px;
  flex-wrap: wrap;
}
.slim-scroll-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5dce0;
  transition: all 0.35s var(--ease-smooth);
  cursor: pointer;
  flex-shrink: 0;
}
.slim-scroll-dot.is-active {
  background: var(--brand);
  width: 26px;
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(253,142,3,0.45);
}
.slim-scroll-dot--support.is-active {
  background: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,0.55), 0 0 0 2px rgba(253,142,3,0.3);
}

/* Responsive */
@media (min-width: 768px) {
  .Mepilo-who { padding: 64px 36px 72px; }
  .slim-section-header { margin-bottom: 46px; }
  .slim-section-badge { font-size: 1.15rem; padding: 8px 22px; margin-bottom: 18px; }
  .slim-section-title { font-size: 4.2rem; margin-bottom: 12px; }
  .slim-section-subtitle { font-size: 1.7rem; max-width: 680px; }
  .slim-main-grid { grid-template-columns: 1fr 1fr; gap: 46px; }
  .slim-media-panel { position: sticky; top: 28px; aspect-ratio: 1/1; min-height: 460px; }
  .slim-media-icon { font-size: 100px; }
  .slim-cards-horizontal-wrap { display: none !important; }
  .slim-scroll-dots { display: none; }
  .slim-cards-vertical { display: flex; }
}
@media (max-width: 767px) {
  .Mepilo-who { padding: 36px 12px 48px; }
  .slim-section-header { margin-bottom: 20px; }
  .slim-section-badge { font-size: 1.05rem; padding: 6px 14px; margin-bottom: 10px; }
  .slim-section-title { font-size: 2.3rem; margin-bottom: 6px; }
  .slim-section-subtitle { font-size: 1.3rem; }
  .slim-main-grid { grid-template-columns: 1fr; gap: 16px; }
  .slim-media-panel { aspect-ratio: 1/1; min-height: 200px; border-radius: var(--radius-xl); }
  .slim-media-icon { font-size: 56px; }
  .slim-media-shimmer { display: none; }
  .slim-cards-vertical { display: none !important; }
  .slim-cards-horizontal-wrap { display: block; }
  .slim-scroll-dots { display: flex; }
  .slim-card-h-tag { font-size: 1.05rem; }
  .slim-card-h-title { font-size: 1.3rem; }
  .slim-card-h-desc { font-size: 1.05rem; }
  .slim-card-h-extra { font-size: 1.05rem; }
  .slim-card-h-media-tag { font-size: 1.05rem; }
  .slim-support-badge-mobile { font-size: 1.05rem; }
  .slim-support-card { display: none !important; }
}

/* ============ 所有变量与样式限定在 #Mepilo-hero 内 ============ */
        #Mepilo-hero {
            --brand: #fd8e03;
            --brand-deep: #e07b00;
            --brand-glow: rgba(253, 142, 3, 0.35);
            --gold: #c9a96e;
            --gold-soft: rgba(201, 169, 110, 0.25);
            --terracotta: #C17A60;
            --surface-warm: #FDFBF7;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.09);
            --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.11);
            --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(201, 169, 110, 0.15);
            --shadow-card-hover: 0 30px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(201, 169, 110, 0.25);
            --radius-sm: 12px;
            --radius-md: 18px;
            --radius-lg: 22px;
            --radius-xl: 28px;
            --radius-full: 50%;
            --font-display: 'Inter', 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
            --font-body: 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

            position: relative;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(253, 142, 3, 0.06) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 20%, rgba(201, 169, 110, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 15% 70%, rgba(27, 126, 90, 0.04) 0%, transparent 50%),
                linear-gradient(175deg, #FDFBF7 0%, #f7f2e8 25%, #f2ede2 50%, #f6f8f4 80%, #FDFBF7 100%);
            padding: 50px 16px;
            overflow: hidden;
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #Mepilo-hero *,
        #Mepilo-hero *::before,
        #Mepilo-hero *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* ============ 背景氛围装饰 ============ */
        #Mepilo-hero .Mepilo-hero-ambient {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        #Mepilo-hero .Mepilo-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            animation: Mepilo-orbBreathe 8s ease-in-out infinite;
        }
        #Mepilo-hero .Mepilo-orb--gold {
            width: 380px;
            height: 380px;
            background: rgba(253, 142, 3, 0.09);
            top: -120px;
            right: -100px;
            animation-delay: 0s;
        }
        #Mepilo-hero .Mepilo-orb--sage {
            width: 260px;
            height: 260px;
            background: rgba(140, 160, 140, 0.07);
            bottom: -80px;
            left: -80px;
            animation-delay: -4s;
        }
        #Mepilo-hero .Mepilo-orb--warm {
            width: 200px;
            height: 200px;
            background: rgba(193, 122, 96, 0.06);
            top: 30%;
            left: 50%;
            animation-delay: -2s;
            filter: blur(70px);
        }
        @keyframes Mepilo-orbBreathe {
            0%, 100% { transform: scale(1); opacity: 0.45; }
            40% { transform: scale(1.25); opacity: 0.7; }
            70% { transform: scale(0.9); opacity: 0.35; }
        }
        #Mepilo-hero .Mepilo-geo-ring {
            position: absolute;
            border-radius: 50%;
            border: 1.5px solid rgba(201, 169, 110, 0.22);
            pointer-events: none;
            animation: Mepilo-ringSpin 40s linear infinite;
        }
        #Mepilo-hero .Mepilo-geo-ring--1 {
            width: 320px; height: 320px; top: -60px; right: -100px;
            border-style: dashed; border-width: 1px; border-color: rgba(201, 169, 110, 0.3);
            animation-duration: 50s; animation-direction: reverse;
        }
        #Mepilo-hero .Mepilo-geo-ring--2 {
            width: 160px; height: 160px; bottom: 8%; left: -40px;
            border-color: rgba(253, 142, 3, 0.15); border-width: 1px; animation-duration: 35s;
        }
        #Mepilo-hero .Mepilo-geo-ring--3 {
            width: 100px; height: 100px; top: 20%; right: 8%;
            border-color: rgba(140, 160, 140, 0.2); border-width: 1px; animation-duration: 28s;
        }
        @keyframes Mepilo-ringSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #Mepilo-hero .Mepilo-sparkle {
            position: absolute; width: 3px; height: 3px; border-radius: 50%;
            background: var(--gold); pointer-events: none;
            animation: Mepilo-sparkleFloat 6s ease-in-out infinite; opacity: 0;
        }
        #Mepilo-hero .Mepilo-sparkle--1 { top: 15%; left: 10%; animation-delay: 0s; background: #c9a96e; }
        #Mepilo-hero .Mepilo-sparkle--2 { top: 22%; right: 18%; animation-delay: -2s; width: 2.5px; height: 2.5px; background: #fd8e03; }
        #Mepilo-hero .Mepilo-sparkle--3 { bottom: 20%; left: 25%; animation-delay: -4s; width: 3.5px; height: 3.5px; background: #c9a96e; }
        #Mepilo-hero .Mepilo-sparkle--4 { top: 40%; right: 10%; animation-delay: -1.5s; width: 2px; height: 2px; background: #C17A60; }
        #Mepilo-hero .Mepilo-sparkle--5 { bottom: 35%; right: 30%; animation-delay: -5s; width: 3px; height: 3px; background: #c9a96e; }
        #Mepilo-hero .Mepilo-sparkle--6 { top: 55%; left: 8%; animation-delay: -3s; width: 2px; height: 2px; background: #fd8e03; }
        @keyframes Mepilo-sparkleFloat {
            0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
            15% { opacity: 0.9; transform: translateY(-18px) scale(1.3); }
            30% { opacity: 0.3; transform: translateY(-30px) scale(0.7); }
            50% { opacity: 0.7; transform: translateY(-12px) scale(1.1); }
            70% { opacity: 0.1; transform: translateY(-25px) scale(0.4); }
            85% { opacity: 0.5; transform: translateY(-6px) scale(0.9); }
        }
        #Mepilo-hero .Mepilo-dot-line {
            position: absolute; pointer-events: none; opacity: 0.35;
        }
        #Mepilo-hero .Mepilo-dot-line--1 {
            top: 28%; right: 6%; width: 60px; height: 60px;
            border-right: 1.5px dotted rgba(201, 169, 110, 0.4); border-top: 1.5px dotted rgba(201, 169, 110, 0.4);
            border-radius: 0 30px 0 0; animation: Mepilo-dotPulse 5s ease-in-out infinite;
        }
        #Mepilo-hero .Mepilo-dot-line--2 {
            bottom: 18%; left: 5%; width: 40px; height: 40px;
            border-left: 1.5px dotted rgba(193, 122, 96, 0.35); border-bottom: 1.5px dotted rgba(193, 122, 96, 0.35);
            border-radius: 0 0 0 20px; animation: Mepilo-dotPulse 5s ease-in-out infinite; animation-delay: -2.5s;
        }
        @keyframes Mepilo-dotPulse {
            0%, 100% { opacity: 0.25; } 50% { opacity: 0.6; }
        }

        /* ============ 主内容外层容器 ============ */
        #Mepilo-hero .Mepilo-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 1150px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ============ 整体卡片 ============ */
        #Mepilo-hero .Mepilo-hero-card {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 26px;
            background: rgba(255, 255, 255, 0.68);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--radius-xl);
            padding: 32px 20px;
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(201, 169, 110, 0.2);
            transition: box-shadow 0.5s ease, transform 0.4s ease;
            animation: Mepilo-cardIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0;
            animation-delay: 0.05s;
        }
        #Mepilo-hero .Mepilo-hero-card:hover {
            box-shadow: var(--shadow-card-hover);
            transform: translateY(-2px);
        }
        @keyframes Mepilo-cardIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ============ 图片区域 ============ */
        #Mepilo-hero .Mepilo-hero-image-area {
            position: relative;
            width: 100%;
            max-width: 420px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            order: 1;
        }
        #Mepilo-hero .Mepilo-image-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            max-width: 380px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: Mepilo-imageFloat 6s ease-in-out infinite;
        }
        @keyframes Mepilo-imageFloat {
            0%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
            55% { transform: translateY(-3px); }
            75% { transform: translateY(-13px); }
        }
        #Mepilo-hero .Mepilo-image-orbit {
            position: absolute; inset: -8%; border-radius: 50%;
            border: 1.8px solid rgba(201, 169, 110, 0.4);
            animation: Mepilo-orbitSpin 25s linear infinite;
            pointer-events: none;
            box-shadow: 0 0 30px rgba(253, 142, 3, 0.08), inset 0 0 30px rgba(253, 142, 3, 0.04);
        }
        #Mepilo-hero .Mepilo-image-orbit--inner {
            inset: 2%; border-width: 1px; border-style: dashed;
            border-color: rgba(253, 142, 3, 0.25);
            animation-duration: 18s; animation-direction: reverse; box-shadow: none;
        }
        #Mepilo-hero .Mepilo-image-orbit--dot {
            inset: -14%; border: none; border-radius: 50%; background: transparent;
            box-shadow: none; animation: Mepilo-orbitSpin 35s linear infinite;
        }
        #Mepilo-hero .Mepilo-image-orbit--dot::before {
            content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
            background: #c9a96e; top: -4px; left: 50%; transform: translateX(-50%);
            box-shadow: 0 0 12px rgba(201, 169, 110, 0.7), 0 0 24px rgba(201, 169, 110, 0.3);
            animation: Mepilo-dotGlow 3s ease-in-out infinite;
        }
        #Mepilo-hero .Mepilo-image-orbit--dot::after {
            content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
            background: #fd8e03; bottom: -3px; left: 50%; transform: translateX(-50%);
            box-shadow: 0 0 10px rgba(253, 142, 3, 0.6);
            animation: Mepilo-dotGlow 3s ease-in-out infinite; animation-delay: -1.5s;
        }
        @keyframes Mepilo-orbitSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes Mepilo-dotGlow {
            0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
            50% { opacity: 1; transform: translateX(-50%) scale(1.8); }
        }
        #Mepilo-hero .Mepilo-image-glow {
            position: absolute; width: 75%; height: 75%; border-radius: 50%;
            background: radial-gradient(circle, rgba(253, 142, 3, 0.18) 0%, rgba(253, 142, 3, 0.04) 40%, transparent 70%);
            pointer-events: none; animation: Mepilo-glowPulse 5s ease-in-out infinite;
            z-index: -1; filter: blur(20px);
        }
        @keyframes Mepilo-glowPulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
        }
        #Mepilo-hero .Mepilo-image-frame {
            position: relative; z-index: 1; width: 72%; aspect-ratio: 1 / 1; border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(160deg, #fefcf8 0%, #f7efe0 40%, #f0e8d5 100%);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 60px rgba(253, 142, 3, 0.05);
            display: flex; align-items: center; justify-content: center; transition: box-shadow 0.6s ease;
        }
        #Mepilo-hero .Mepilo-image-frame img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        #Mepilo-hero .Mepilo-image-wrapper:hover .Mepilo-image-frame {
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14), 0 10px 25px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 80px rgba(253, 142, 3, 0.08), 0 0 50px rgba(253, 142, 3, 0.12);
        }
        #Mepilo-hero .Mepilo-image-wrapper:hover img {
            transform: scale(1.04);
        }

        /* ============ 文字区域 ============ */
        #Mepilo-hero .Mepilo-hero-text-area {
            width: 100%;
            max-width: 560px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 14px;
            order: 2;
        }

        /* -------- Badge 标签 -------- */
        #Mepilo-hero .Mepilo-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(201, 169, 110, 0.35);
            border-radius: 50px; padding: 0.5em 1.2em; font-size: 1.05rem; font-weight: 600;
            letter-spacing: 0.08em; text-transform: uppercase; color: #8B6F47;
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            box-shadow: var(--shadow-sm);
            animation: Mepilo-badgeIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0; animation-delay: 0.15s;
        }
        #Mepilo-hero .Mepilo-badge-dot {
            width: 6px; height: 6px; border-radius: 50%; background: #4CAF50;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.5); animation: Mepilo-dotLive 2s ease-in-out infinite;
        }
        @keyframes Mepilo-dotLive {
            0%, 100% { box-shadow: 0 0 6px rgba(76, 175, 80, 0.4); }
            50% { box-shadow: 0 0 14px rgba(76, 175, 80, 0.8); }
        }
        @keyframes Mepilo-badgeIn {
            from { opacity: 0; transform: translateY(-12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* -------- 标题 -------- */
        #Mepilo-hero .Mepilo-headline {
            font-family: var(--font-display); font-size: 2.3rem; font-weight: 800;
            line-height: 1.15; letter-spacing: -0.03em; color: #1a1a1a; margin: 0;
            animation: Mepilo-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0; animation-delay: 0.25s;
        }
        #Mepilo-hero .Mepilo-headline-highlight {
            display: inline; background: linear-gradient(180deg, transparent 60%, rgba(253, 142, 3, 0.2) 60%);
            padding: 0 4px; position: relative;
        }
        #Mepilo-hero .Mepilo-headline-accent {
            color: #fd8e03; position: relative;
        }
        @keyframes Mepilo-fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* -------- 三合一功能卡片 -------- */
        #Mepilo-hero .Mepilo-features-united-card {
            width: 100%;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(201, 169, 110, 0.22);
            border-radius: var(--radius-lg);
            padding: 16px 10px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: var(--shadow-md);
            display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 4px;
            animation: Mepilo-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0; animation-delay: 0.4s;
            transition: box-shadow 0.4s ease, transform 0.4s ease;
        }
        #Mepilo-hero .Mepilo-features-united-card:hover {
            box-shadow: var(--shadow-lg), 0 0 40px rgba(253, 142, 3, 0.08);
            transform: translateY(-2px);
        }
        #Mepilo-hero .Mepilo-feature-item {
            flex: 1 1 0; min-width: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 6px; padding: 10px 6px; text-align: center; position: relative;
            cursor: default; transition: transform 0.3s ease;
        }
        #Mepilo-hero .Mepilo-feature-item:hover { transform: translateY(-3px); }
        #Mepilo-hero .Mepilo-feature-divider {
            width: 1px; background: rgba(201, 169, 110, 0.3);
            align-self: center; height: 42px; flex-shrink: 0; border-radius: 1px;
        }
        #Mepilo-hero .Mepilo-feature-icon {
            font-size: 1.35rem; line-height: 1; flex-shrink: 0; transition: transform 0.35s ease;
        }
        #Mepilo-hero .Mepilo-feature-item:hover .Mepilo-feature-icon { transform: scale(1.2); }
        #Mepilo-hero .Mepilo-feature-label {
            font-size: 1.05rem; font-weight: 500; color: #4a4a4a; line-height: 1.3; letter-spacing: -0.01em;
        }

        /* -------- 描述卡片（重点凸出） -------- */
        #Mepilo-hero .Mepilo-description-card {
            width: 100%;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(201, 169, 110, 0.18);
            border-left: 4px solid #fd8e03;
            border-radius: var(--radius-md);
            padding: 18px 18px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: var(--shadow-lg);
            position: relative;
            animation: Mepilo-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0; animation-delay: 0.5s;
            transition: box-shadow 0.4s ease, transform 0.4s ease;
        }
        #Mepilo-hero .Mepilo-description-card:hover {
            box-shadow: var(--shadow-xl), 0 0 55px rgba(253, 142, 3, 0.1);
            transform: translateY(-2px);
        }
        #Mepilo-hero .Mepilo-description-card::after {
            content: ''; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(253, 142, 3, 0.3), transparent);
            pointer-events: none;
        }
        #Mepilo-hero .Mepilo-description-text {
            font-size: 1.3rem; font-weight: 600; line-height: 1.55; color: #4a3a2a;
            letter-spacing: -0.01em; margin: 0;
        }
        #Mepilo-hero .Mepilo-description-text strong {
            color: #2a1a0a; font-weight: 700;
        }

        /* -------- CTA 按钮 -------- */
        #Mepilo-hero .Mepilo-cta-wrap {
            width: 100%; max-width: 420px;
            animation: Mepilo-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0; animation-delay: 0.6s;
        }
        #Mepilo-hero .Mepilo-cta {
            display: block; width: 100%;
            background: linear-gradient(135deg, #fd8e03 0%, #f57c00 40%, #e87800 100%);
            color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
            border: none; border-radius: 50px; text-decoration: none; text-align: center;
            padding: 1em 1.8em; cursor: pointer; position: relative; overflow: hidden;
            box-shadow: 0 10px 35px rgba(253, 142, 3, 0.35), 0 0 0 0 rgba(253, 142, 3, 0.5);
            transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
            animation: Mepilo-ctaPulse 3.5s ease-in-out infinite; z-index: 1;
        }
        #Mepilo-hero .Mepilo-cta::before {
            content: ''; position: absolute; inset: 0; border-radius: 50px;
            background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
            transform: translateX(-100%); transition: transform 0.6s ease;
        }
        #Mepilo-hero .Mepilo-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 45px rgba(253, 142, 3, 0.45), 0 0 0 8px rgba(253, 142, 3, 0.08);
            background: linear-gradient(135deg, #ff9808 0%, #f88000 40%, #f07800 100%);
        }
        #Mepilo-hero .Mepilo-cta:hover::before { transform: translateX(100%); }
        @keyframes Mepilo-ctaPulse {
            0%, 100% { box-shadow: 0 10px 35px rgba(253, 142, 3, 0.35), 0 0 0 0 rgba(253, 142, 3, 0.4); }
            50% { box-shadow: 0 10px 45px rgba(253, 142, 3, 0.5), 0 0 0 14px rgba(253, 142, 3, 0); }
        }

        /* -------- 信任卡片 -------- */
        #Mepilo-hero .Mepilo-trust-card {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(201, 169, 110, 0.2);
            border-radius: 50px; padding: 10px 20px;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            box-shadow: var(--shadow-sm);
            font-size: 1.05rem; font-weight: 500; color: #6a6a6a;
            animation: Mepilo-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0; animation-delay: 0.7s;
            letter-spacing: -0.01em;
            transition: box-shadow 0.35s ease, transform 0.35s ease;
        }
        #Mepilo-hero .Mepilo-trust-card:hover {
            box-shadow: var(--shadow-md); transform: translateY(-1px);
        }
        #Mepilo-hero .Mepilo-trust-icon { font-size: 1.05em; flex-shrink: 0; }
        #Mepilo-hero .Mepilo-trust-sep {
            width: 4px; height: 4px; border-radius: 50%; background: #c9a96e; flex-shrink: 0;
        }

        /* ============ 响应式：桌面端 768px+ ============ */
        @media (min-width: 768px) {
            #Mepilo-hero { padding: 70px 30px; }
            #Mepilo-hero .Mepilo-hero-card {
                flex-direction: row;
                gap: 40px;
                padding: 40px 36px;
                align-items: center;
            }
            #Mepilo-hero .Mepilo-hero-image-area {
                order: 2;
                max-width: 420px;
                flex: 0 0 40%;
            }
            #Mepilo-hero .Mepilo-image-wrapper { max-width: 380px; }
            #Mepilo-hero .Mepilo-hero-text-area {
                order: 1;
                align-items: flex-start;
                text-align: left;
                max-width: 520px;
                flex: 1 1 auto;
                gap: 16px;
            }
            #Mepilo-hero .Mepilo-headline { font-size: 4.2rem; }
            #Mepilo-hero .Mepilo-badge { font-size: 1.15rem; align-self: flex-start; }
            #Mepilo-hero .Mepilo-features-united-card { padding: 20px 14px; gap: 0; }
            #Mepilo-hero .Mepilo-feature-item { padding: 12px 10px; gap: 8px; }
            #Mepilo-hero .Mepilo-feature-icon { font-size: 1.5rem; }
            #Mepilo-hero .Mepilo-feature-label { font-size: 1.15rem; }
            #Mepilo-hero .Mepilo-feature-divider { height: 50px; }
            #Mepilo-hero .Mepilo-description-card { padding: 22px 22px; }
            #Mepilo-hero .Mepilo-description-text { font-size: 1.7rem; }
            #Mepilo-hero .Mepilo-cta { font-size: 1.15rem; padding: 1em 2em; }
            #Mepilo-hero .Mepilo-cta-wrap { max-width: 340px; align-self: flex-start; }
            #Mepilo-hero .Mepilo-trust-card { font-size: 1.15rem; align-self: flex-start; }
            #Mepilo-hero .Mepilo-orb--gold { width: 500px; height: 500px; top: -180px; right: -140px; }
            #Mepilo-hero .Mepilo-orb--sage { width: 340px; height: 340px; bottom: -100px; left: -100px; }
            #Mepilo-hero .Mepilo-geo-ring--1 { width: 400px; height: 400px; top: -80px; right: -120px; }
        }

        @media (min-width: 1024px) {
            #Mepilo-hero { padding: 80px 40px; }
            #Mepilo-hero .Mepilo-hero-card { gap: 50px; padding: 48px 44px; }
            #Mepilo-hero .Mepilo-hero-image-area { max-width: 440px; flex: 0 0 42%; }
            #Mepilo-hero .Mepilo-image-wrapper { max-width: 400px; }
            #Mepilo-hero .Mepilo-hero-text-area { max-width: 540px; gap: 18px; }
            #Mepilo-hero .Mepilo-features-united-card { padding: 22px 16px; }
            #Mepilo-hero .Mepilo-description-card { padding: 24px 24px; }
        }

        @media (max-width: 400px) {
            #Mepilo-hero { padding: 40px 10px; }
            #Mepilo-hero .Mepilo-hero-card { padding: 22px 14px; gap: 20px; }
            #Mepilo-hero .Mepilo-features-united-card { padding: 12px 6px; gap: 2px; }
            #Mepilo-hero .Mepilo-feature-item { padding: 8px 3px; gap: 4px; }
            #Mepilo-hero .Mepilo-feature-icon { font-size: 1.15rem; }
            #Mepilo-hero .Mepilo-feature-divider { height: 30px; }
            #Mepilo-hero .Mepilo-description-card { padding: 14px 14px; }
            #Mepilo-hero .Mepilo-image-wrapper { max-width: 260px; }
        }



/* ============ LOCAL CSS VARIABLES (SCOPED) ============ */
    .sv-wrap {
      /* Brand & Theme */
      --sv-brand: #fd8e03;
      --sv-brand-dark: #b86500;
      --sv-brand-soft: rgba(253, 142, 3, 0.08);
      --sv-accent-gold: #c9a96e;
      
      /* Neutrals */
      --sv-text-dark: #1E2A32;
      --sv-text-mid: #3D4F5C;
      --sv-text-sub: #6B7B83;
      --sv-border-light: #f0f2f4;
      --sv-bg-warm: #FDFBF7;
      --sv-card-bg: #ffffff;
      
      /* Shadows */
      --sv-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
      --sv-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
      --sv-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.10);
      --sv-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
      --sv-shadow-card-hover: 0 16px 44px rgba(0, 0, 0, 0.12);
      
      /* Radii */
      --sv-radius-sm: 16px;
      --sv-radius-md: 24px;
      --sv-radius-lg: 32px;
      
      /* Transitions */
      --sv-trans-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --sv-trans-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
      --sv-trans-bounce: cubic-bezier(0.25, 0.1, 0.15, 1.35);
      
      /* Base styles for the component */
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #faf9f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
      isolation: isolate;
    }

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

    /* ============ BACKGROUND EFFECTS ============ */
    .sv-bg-layer {

      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      border-radius: 60px;
    }
    .sv-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.45;
      animation: svOrbFloat 10s ease-in-out infinite;
    }
    .sv-bg-orb--1 {
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(253, 142, 3, 0.18) 0%, transparent 70%);
      top: -60px; right: -60px;
    }
    .sv-bg-orb--2 {
      width: 240px; height: 240px;
      background: radial-gradient(circle, rgba(201, 169, 110, 0.16) 0%, transparent 70%);
      bottom: -40px; left: -50px;
      animation-delay: -5s; animation-duration: 11s;
    }
    .sv-bg-orb--3 {
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(253, 142, 3, 0.1) 0%, transparent 70%);
      top: 45%; left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: -2s; animation-duration: 8s;
      filter: blur(70px); opacity: 0.35;
    }
    @keyframes svOrbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(18px, -22px) scale(1.06); }
      50% { transform: translate(-10px, 14px) scale(0.95); }
      75% { transform: translate(-20px, -6px) scale(1.04); }
    }
    .sv-dots-pattern {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      opacity: 0.35;
      background-image: radial-gradient(circle, rgba(201, 169, 110, 0.28) 1px, transparent 1px);
      background-size: 16px 16px;
      mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 70%);
    }
    .sv-particles-container {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 1;
    }
    .sv-particle {
      position: absolute; border-radius: 50%;
      background: rgba(253, 142, 3, 0.25);
      animation: svFloatUp linear infinite;
      opacity: 0;
    }
    @keyframes svFloatUp {
      0% { transform: translateY(0) scale(0); opacity: 0; }
      20% { opacity: 0.7; transform: translateY(-20px) scale(1); }
      60% { opacity: 0.3; }
      100% { transform: translateY(-140px) scale(0.4); opacity: 0; }
    }

    /* ============ MAIN CONTAINER ============ */
    .sv-container {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1150px;
      background: var(--sv-card-bg);
      border-radius: var(--sv-radius-lg);
      padding: 32px 20px 36px;
      box-shadow: var(--sv-shadow-lg), 0 0 0 1px rgba(0,0,0,0.03);
      transition: box-shadow 0.5s var(--sv-trans-smooth);
      margin: 0 auto;
    }
    .sv-container:hover {
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(253,142,3,0.08);
    }

    /* ============ HEADER ============ */
    .sv-header {
      text-align: center;
      margin-bottom: 28px;
    }
    .sv-header__badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--sv-brand-soft);
      border: 1px solid rgba(253, 142, 3, 0.2);
      border-radius: 40px;
      padding: 7px 17px;
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--sv-brand-dark);
      letter-spacing: 0.4px;
      margin-bottom: 14px;
      opacity: 0;
      animation: svFadeInUp 0.7s var(--sv-trans-smooth) forwards;
    }
    .sv-header__badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--sv-brand);
      box-shadow: 0 0 0 0 rgba(253,142,3,0.5);
      animation: svPulse 2s ease-in-out infinite;
    }
    @keyframes svPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(253,142,3,0.5); }
      50% { box-shadow: 0 0 0 8px rgba(253,142,3,0); }
    }
    .sv-header__title {
      font-size: clamp(1.8rem, 6vw, 4.2rem);
      font-weight: 800;
      color: var(--sv-text-dark);
      line-height: 1.15;
      letter-spacing: -0.5px;
      margin-bottom: 8px;
      opacity: 0;
      animation: svFadeInUp 0.7s var(--sv-trans-smooth) 0.1s forwards;
    }
    .sv-header__title .highlight {
      background: linear-gradient(180deg, transparent 58%, rgba(253, 142, 3, 0.25) 58%);
      padding: 0 3px;
    }
    .sv-header__sub {
      font-size: clamp(1.25rem, 3vw, 1.7rem);
      font-weight: 700;
      color: var(--sv-text-sub);
      line-height: 1.4;
      max-width: 620px;
      margin: 0 auto;
      opacity: 0;
      animation: svFadeInUp 0.7s var(--sv-trans-smooth) 0.2s forwards;
    }
    @keyframes svFadeInUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .sv-trust-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      font-size: 1.15rem;
      font-weight: 500;
      color: var(--sv-text-sub);
      opacity: 0;
      animation: svFadeInUp 0.7s var(--sv-trans-smooth) 0.25s forwards;
    }
    .sv-stars {
      color: #f5a623;
      font-size: 1.5rem;
      letter-spacing: 1px;
    }

    /* ============ RESPONSIVE GRID LAYOUT ============ */
    .sv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 16px;
    }

    /* Cards Styling */
    .sv-card {
      background: var(--sv-card-bg);
      border-radius: var(--sv-radius-sm);
      padding: 18px 14px;
      box-shadow: var(--sv-shadow-card);
      border: 1px solid var(--sv-border-light);
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.45s var(--sv-trans-smooth), border-color 0.35s ease, box-shadow 0.45s var(--sv-trans-smooth);
      will-change: transform;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      cursor: grab;
      position: relative;
      z-index: 1;
    }
    .sv-card:active {
      cursor: grabbing;
    }
    .sv-card:hover {
      box-shadow: var(--sv-shadow-card-hover);
      border-color: rgba(253, 142, 3, 0.35);
      transform: translateY(-6px) scale(1.018);
      z-index: 6;
    }
    /* Mobile border connections */
    .sv-card:nth-child(1), .sv-card:nth-child(2) {
      border-bottom: 2px solid rgba(253, 142, 3, 0.08);
    }
    .sv-card:nth-child(1):hover, .sv-card:nth-child(2):hover {
      border-bottom-color: rgba(253, 142, 3, 0.22);
    }
    .sv-card:nth-child(4), .sv-card:nth-child(5) {
      border-top: 2px solid rgba(253, 142, 3, 0.08);
    }
    .sv-card:nth-child(4):hover, .sv-card:nth-child(5):hover {
      border-top-color: rgba(253, 142, 3, 0.22);
    }

    .sv-card__icon-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sv-card__icon {
      width: 42px; height: 42px;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(253,142,3,0.12) 0%, rgba(253,142,3,0.04) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
      position: relative;
      transition: background 0.4s ease, box-shadow 0.4s ease;
    }
    .sv-card:hover .sv-card__icon {
      background: linear-gradient(135deg, rgba(253,142,3,0.2) 0%, rgba(253,142,3,0.08) 100%);
      box-shadow: 0 4px 16px rgba(253,142,3,0.13);
    }
    .sv-card__num {
      position: absolute;
      top: -6px; right: -8px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--sv-brand);
      color: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(253,142,3,0.4);
      transition: transform 0.35s var(--sv-trans-spring), box-shadow 0.35s ease;
    }
    .sv-card:hover .sv-card__num {
      transform: scale(1.2);
      box-shadow: 0 4px 12px rgba(253,142,3,0.55);
    }
    .sv-card h3 {
      font-size: clamp(1.2rem, 2.5vw, 1.5rem);
      font-weight: 800;
      color: var(--sv-text-dark);
      line-height: 1.2;
      letter-spacing: -0.2px;
      flex: 1;
      transition: color 0.35s ease;
    }
    .sv-card:hover h3 { color: #1a252d; }
    .sv-feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .sv-feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: clamp(1.05rem, 2vw, 1.5rem);
      font-weight: 700;
      color: var(--sv-text-sub);
      line-height: 1.4;
      transition: color 0.35s ease;
    }
    .sv-card:hover .sv-feature-list li { color: #5a6b73; }
    .sv-feature-list li .check-icon {
      color: #fd8e03;
      font-weight: 600;
      font-size: 1.1rem;
      margin-top: 1px;
      flex-shrink: 0;
      transition: transform 0.35s var(--sv-trans-spring), color 0.35s ease;
    }
    .sv-card:hover .sv-feature-list li .check-icon {
      transform: scale(1.2);
      color: #e67e00;
    }
    .sv-card__tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: clamp(1rem, 2vw, 1.5rem);
      font-weight: 600;
      color: #b86500;
      background: rgba(253,142,3,0.08);
      padding: 5px 11px;
      border-radius: 18px;
      align-self: flex-start;
      letter-spacing: 0.2px;
      transition: all 0.4s ease;
    }
    .sv-card:hover .sv-card__tag {
      background: rgba(253,142,3,0.16);
      color: #9a5000;
      box-shadow: 0 2px 10px rgba(253,142,3,0.1);
    }

    /* Image Cell */
    .sv-img-wrap {
      grid-column: span 2;
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: var(--sv-radius-md);
      overflow: hidden;
      background: #fafaf8;
      border: 1px solid var(--sv-border-light);
      box-shadow: var(--sv-shadow-sm);
      transition: box-shadow 0.5s var(--sv-trans-smooth), transform 0.5s var(--sv-trans-bounce), border-color 0.4s ease;
      cursor: pointer;
      z-index: 2;
      will-change: transform;
    }
    .sv-img-wrap img, .sv-img-wrap video {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s var(--sv-trans-smooth);
    }
    .sv-img-wrap.image-resonate {
      box-shadow: 0 8px 36px rgba(253,142,3,0.16), 0 0 0 2px rgba(253,142,3,0.13);
      transform: scale(1.015);
    }
    .sv-img-wrap.image-resonate-top {
      box-shadow: 0 -6px 32px rgba(253,142,3,0.17), 0 2px 16px rgba(0,0,0,0.05), 0 0 0 2px rgba(253,142,3,0.13);
      transform: scale(1.012) translateY(-2px);
    }
    .sv-img-wrap.image-resonate-bottom {
      box-shadow: 0 6px 32px rgba(253,142,3,0.17), 0 -2px 16px rgba(0,0,0,0.05), 0 0 0 2px rgba(253,142,3,0.13);
      transform: scale(1.012) translateY(2px);
    }
    .sv-img-glow {
      position: absolute; inset: 0;
      pointer-events: none;
      border-radius: inherit;
      border: 2px solid transparent;
      background: linear-gradient(135deg, rgba(253,142,3,0.3), transparent 50%, rgba(201,169,110,0.25)) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: svRingGlow 3s ease-in-out infinite;
      transition: opacity 0.5s ease;
    }
    @keyframes svRingGlow {
      0%,100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    .sv-img-badge {
      position: absolute;
      bottom: 12px; right: 12px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 22px;
      padding: 6px 14px;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--sv-text-dark);
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      z-index: 4;
      transition: transform 0.35s var(--sv-trans-bounce), box-shadow 0.35s ease;
    }
    .sv-img-badge::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #4caf84;
      animation: svPulse 2.5s ease-in-out infinite;
    }
    .sv-connection-dot {
      position: absolute;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--sv-brand);
      z-index: 5;
      pointer-events: none;
      opacity: 0.55;
      transition: transform 0.5s var(--sv-trans-spring), box-shadow 0.5s ease, opacity 0.4s ease;
    }
    .sv-connection-dot--left1 { top: 16%; left: -5px; }
    .sv-connection-dot--left2 { top: 72%; left: -5px; }
    .sv-connection-dot--right1 { top: 16%; right: -5px; }
    .sv-connection-dot--right2 { top: 72%; right: -5px; }
    .sv-connection-dot.pulse-active {
      transform: scale(3);
      box-shadow: 0 0 24px 10px rgba(253,142,3,0.6);
      opacity: 1;
      animation: svDotBurst 0.9s ease-in-out infinite;
    }
    @keyframes svDotBurst {
      0%,100% { box-shadow: 0 0 18px 7px rgba(253,142,3,0.5); transform: scale(2.6); }
      50% { box-shadow: 0 0 30px 14px rgba(253,142,3,0.75); transform: scale(3.4); }
    }

    /* ============ DESKTOP OVERRIDES ============ */
    @media (min-width: 768px) {
      .sv-container {
        padding: 56px 44px 60px;
        border-radius: 48px;
      }
      .sv-header { margin-bottom: 40px; }
      .sv-trust-strip {
        margin-bottom: 44px;
        font-size: 1.15rem;
      }
      .sv-stars { font-size: 1.5rem; }
      
      .sv-grid {
        grid-template-columns: 1fr 380px 1fr;
        gap: 24px;
        align-items: center;
      }
      .sv-img-wrap {
        grid-column: 2;
        grid-row: 1 / 3;
      }
      /* Position cards in the 3-column layout */
      .sv-card:nth-child(1) { grid-column: 1; grid-row: 1; text-align: right; }
      .sv-card:nth-child(2) { grid-column: 1; grid-row: 2; text-align: right; }
      .sv-card:nth-child(4) { grid-column: 3; grid-row: 1; }
      .sv-card:nth-child(5) { grid-column: 3; grid-row: 2; }
      
      /* Adjust card internal alignment for left column */
      .sv-card:nth-child(1) .sv-card__icon-row,
      .sv-card:nth-child(2) .sv-card__icon-row { justify-content: flex-end; }
      .sv-card:nth-child(1) .sv-feature-list,
      .sv-card:nth-child(2) .sv-feature-list { align-items: flex-end; }
      .sv-card:nth-child(1) .sv-card__tag,
      .sv-card:nth-child(2) .sv-card__tag { align-self: flex-end; }
      
      .sv-card {
        max-width: 300px;
        padding: 24px 20px;
      }
      .sv-card:hover {
        transform: translateY(-8px) scale(1.025);
        box-shadow: 0 20px 50px rgba(0,0,0,0.13), 0 0 0 1px rgba(253,142,3,0.2);
      }
      
      /* Desktop image tilt effects */
      .sv-img-wrap.image-lean-left {
        transform: translateX(-6px) scale(1.018);
        box-shadow: 16px 8px 44px rgba(0,0,0,0.1), -4px 0 0 rgba(253,142,3,0.15);
        border-left: 2px solid rgba(253,142,3,0.3);
      }
      .sv-img-wrap.image-lean-right {
        transform: translateX(6px) scale(1.018);
        box-shadow: -16px 8px 44px rgba(0,0,0,0.1), 4px 0 0 rgba(253,142,3,0.15);
        border-right: 2px solid rgba(253,142,3,0.3);
      }
      .sv-img-wrap.image-all-glow {
        box-shadow: var(--sv-shadow-lg), 0 0 30px 6px rgba(253,142,3,0.2), 0 0 0 2px rgba(253,142,3,0.18);
        transform: translateY(-5px) scale(1.03);
        border-color: rgba(253,142,3,0.3);
      }
    }

    @media (min-width: 1024px) {
      .sv-grid {
        grid-template-columns: 1fr 440px 1fr;
        gap: 28px;
      }
      .sv-card { max-width: 330px; padding: 26px 22px; }
    }

    /* Footer Strip */
    .sv-footer-strip {
      display: none;
    }
    @media (min-width: 768px) {

      .sv-footer-strip {

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 36px;
        font-size: 1.15rem;
        font-weight: 500;
        color: var(--sv-text-sub);
      }
    }



/* ============ 所有变量与样式限定在 #Mepilo-comparison 内 ============ */
        #Mepilo-comparison {
            /* 局部CSS变量 */
            --trust-green: #1B7E5A;
            --trust-green-soft: rgba(27, 126, 90, 0.08);
            --brand-orange: #fd8e03;
            --brand-orange-soft: rgba(253, 142, 3, 0.06);
            --brand-orange-glow: rgba(253, 142, 3, 0.12);
            --gold: #c9a96e;
            --gold-soft: rgba(201, 169, 110, 0.18);
            --border: #E2E6EA;
            --border-soft: rgba(201, 169, 110, 0.2);
            --body-text: #2C3A42;
            --sub-text: #6B7B83;
            --surface-warm: #FDFBF7;
            --surface-cream: #FFFBF5;
            --surface-cool: #F7F8FA;
            --highlight-bg: linear-gradient(135deg, #FFFBF5 0%, #FFF8ED 50%, #FFFBF5 100%);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.08);
            --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.1);
            --shadow-glow: 0 0 50px rgba(253, 142, 3, 0.1), 0 0 100px rgba(253, 142, 3, 0.04);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --font-display: 'Inter', 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
            --font-body: 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

            position: relative;
            background: #fff;
            padding: 40px 16px;
            overflow: hidden;
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #Mepilo-comparison *,
        #Mepilo-comparison *::before,
        #Mepilo-comparison *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* ============ 背景氛围装饰层 ============ */
        #Mepilo-comparison .Mepilo-comparison-ambient {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        #Mepilo-comparison .Mepilo-comp-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.4;
            animation: Mepilo-comp-orbBreathe 9s ease-in-out infinite;
        }
        #Mepilo-comparison .Mepilo-comp-orb--top {
            width: 280px; height: 280px; background: rgba(253, 142, 3, 0.05);
            top: -100px; right: -80px; animation-delay: 0s;
        }
        #Mepilo-comparison .Mepilo-comp-orb--bottom {
            width: 220px; height: 220px; background: rgba(27, 126, 90, 0.04);
            bottom: -70px; left: -60px; animation-delay: -4.5s;
        }
        @keyframes Mepilo-comp-orbBreathe {
            0%, 100% { transform: scale(1); opacity: 0.35; }
            45% { transform: scale(1.3); opacity: 0.6; }
            75% { transform: scale(0.85); opacity: 0.28; }
        }
        #Mepilo-comparison .Mepilo-comp-geo {
            position: absolute; pointer-events: none; border-radius: 50%;
            border: 1px solid rgba(201, 169, 110, 0.18);
            animation: Mepilo-comp-ringSpin 45s linear infinite;
        }
        #Mepilo-comparison .Mepilo-comp-geo--1 {
            width: 200px; height: 200px; top: 10%; right: -60px;
            border-style: dashed; border-width: 1px; animation-duration: 55s; animation-direction: reverse;
        }
        #Mepilo-comparison .Mepilo-comp-geo--2 {
            width: 120px; height: 120px; bottom: 12%; left: -30px;
            border-color: rgba(253, 142, 3, 0.13); animation-duration: 38s;
        }
        @keyframes Mepilo-comp-ringSpin {
            from { transform: rotate(0deg); } to { transform: rotate(360deg); }
        }
        #Mepilo-comparison .Mepilo-comp-sparkle {
            position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
            background: var(--gold); pointer-events: none;
            animation: Mepilo-comp-sparkleFloat 7s ease-in-out infinite; opacity: 0;
        }
        #Mepilo-comparison .Mepilo-comp-sparkle--1 { top: 8%; left: 12%; animation-delay: 0s; }
        #Mepilo-comparison .Mepilo-comp-sparkle--2 { top: 18%; right: 14%; animation-delay: -2.3s; width: 2px; height: 2px; background: #fd8e03; }
        #Mepilo-comparison .Mepilo-comp-sparkle--3 { bottom: 22%; left: 18%; animation-delay: -4.8s; width: 3px; height: 3px; }
        #Mepilo-comparison .Mepilo-comp-sparkle--4 { top: 35%; right: 8%; animation-delay: -1.6s; background: #1B7E5A; }
        @keyframes Mepilo-comp-sparkleFloat {
            0%, 100% { opacity: 0; transform: translateY(0) scale(0.4); }
            12% { opacity: 0.8; transform: translateY(-14px) scale(1.2); }
            28% { opacity: 0.25; transform: translateY(-24px) scale(0.6); }
            50% { opacity: 0.6; transform: translateY(-8px) scale(1); }
            70% { opacity: 0.08; transform: translateY(-20px) scale(0.35); }
            85% { opacity: 0.45; transform: translateY(-4px) scale(0.85); }
        }
        #Mepilo-comparison .Mepilo-comp-grid {
            position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
            background-image:
                linear-gradient(rgba(201, 169, 110, 0.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201, 169, 110, 0.5) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
        }

        /* ============ 主内容容器 ============ */
        #Mepilo-comparison .Mepilo-comparison-inner {
            position: relative;
            z-index: 2;
            max-width: 1150px;
            width: 100%;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ============ 整体卡片 ============ */
        #Mepilo-comparison .Mepilo-card {
            width: 100%;
            background: #fff;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg), var(--shadow-glow);
            border: 1px solid rgba(201, 169, 110, 0.2);
            padding: 28px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            animation: Mepilo-comp-cardIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0;
            animation-delay: 0.05s;
            transition: box-shadow 0.5s ease, transform 0.4s ease;
            position: relative;
        }
        #Mepilo-comparison .Mepilo-card:hover {
            box-shadow: var(--shadow-xl), 0 0 70px rgba(253, 142, 3, 0.1);
            transform: translateY(-2px);
        }
        @keyframes Mepilo-comp-cardIn {
            from { opacity: 0; transform: translateY(18px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ============ 标题 ============ */
        #Mepilo-comparison .Mepilo-comparison-headline {
            font-family: var(--font-display);
            font-size: 2.3rem;          /* 移动端标题 2.3rem */
            font-weight: 800;            /* 标题字重 800 */
            text-align: center;
            color: #1a1a1a;
            letter-spacing: -0.02em;
            line-height: 1.2;
            position: relative;
            animation: Mepilo-comp-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0;
            animation-delay: 0.15s;
        }
        #Mepilo-comparison .Mepilo-comparison-headline-accent {
            display: inline;
            background: linear-gradient(180deg, transparent 58%, rgba(253, 142, 3, 0.22) 58%);
            padding: 0 4px;
        }
        @keyframes Mepilo-comp-fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ============ 表格容器 ============ */
        #Mepilo-comparison .Mepilo-table {
            width: 100%;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid rgba(201, 169, 110, 0.18);
        }

        /* 表头 */
        #Mepilo-comparison .Mepilo-table-header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
        }
        #Mepilo-comparison .Mepilo-table-header-cell {
            padding: 14px 10px;
            text-align: center;
            font-weight: 600;            /* ≥400 */
            font-size: 1.05rem;          /* 移动端最小 1.05rem */
            letter-spacing: 0.02em;
            font-family: var(--font-display);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        #Mepilo-comparison .Mepilo-table-header-cell--highlight {
            background: linear-gradient(135deg, #FFF8ED 0%, #FFF3E0 40%, #FFFBF5 100%);
            color: #2a1a0a;
            border-bottom: 2px solid #fd8e03;
        }
        #Mepilo-comparison .Mepilo-table-header-cell--dim {
            background: #F5F6F8;
            color: #8a8a8a;
            border-bottom: 2px solid #e0e0e0;
        }
        #Mepilo-comparison .Mepilo-header-star {
            display: inline-block;
            font-size: 0.9em;
            color: #fd8e03;
            animation: Mepilo-comp-starPulse 2.5s ease-in-out infinite;
        }
        @keyframes Mepilo-comp-starPulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.25); opacity: 1; }
        }

        /* 数据行 */
        #Mepilo-comparison .Mepilo-table-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            border-bottom: 1px solid rgba(201, 169, 110, 0.12);
            transition: background 0.3s ease;
        }
        #Mepilo-comparison .Mepilo-table-row:last-child {
            border-bottom: none;
        }
        #Mepilo-comparison .Mepilo-table-row:hover {
            background: rgba(253, 142, 3, 0.02);
        }
        #Mepilo-comparison .Mepilo-table-cell {
            padding: 12px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            line-height: 1.4;
            letter-spacing: -0.01em;
        }
        #Mepilo-comparison .Mepilo-table-cell--highlight {
            background: #FFFBF5;
            color: #2a1a0a;
        }
        #Mepilo-comparison .Mepilo-table-cell--dim {
            background: #FBFCFD;
            color: #7a7a7a;
        }
        /* 高亮列左侧强调线 */
        #Mepilo-comparison .Mepilo-table-cell--highlight {
            position: relative;
        }
        #Mepilo-comparison .Mepilo-table-cell--highlight::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            bottom: 15%;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: linear-gradient(180deg, #fd8e03 0%, #f57c00 50%, #fd8e03 100%);
            opacity: 0.7;
            transition: opacity 0.35s ease, width 0.35s ease;
        }
        #Mepilo-comparison .Mepilo-table-row:hover .Mepilo-table-cell--highlight::before {
            opacity: 1;
            width: 4px;
        }

        /* 正文描述文字（表格内的对比内容） */
        #Mepilo-comparison .Mepilo-comp-text {
            font-size: 1.3rem;          /* 移动端正文 1.3rem */
            font-weight: 600;           /* 正文描述字重 600 */
        }
        #Mepilo-comparison .Mepilo-comp-text-highlight {
            color: #2a1a0a;
        }
        #Mepilo-comparison .Mepilo-comp-text-dim {
            color: #888;
        }

        /* 图标 */
        #Mepilo-comparison .Mepilo-comp-icon {
            flex-shrink: 0;
            width: 20px; height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }
        #Mepilo-comparison .Mepilo-comp-icon-check {
            background: var(--trust-green);
            color: #fff;
            box-shadow: 0 2px 8px rgba(27, 126, 90, 0.25);
        }
        #Mepilo-comparison .Mepilo-comp-icon-cross {
            background: #e8e8e8;
            color: #b0b0b0;
        }
        #Mepilo-comparison .Mepilo-table-row:hover .Mepilo-comp-icon-check {
            transform: scale(1.15);
            box-shadow: 0 3px 12px rgba(27, 126, 90, 0.4);
        }
        #Mepilo-comparison .Mepilo-table-row:hover .Mepilo-comp-icon-cross {
            transform: scale(1.1);
            background: #f0e0e0;
            color: #c0a0a0;
        }

        /* ============ 响应式：768px+ 桌面端 ============ */
        @media (min-width: 768px) {
            #Mepilo-comparison {
                padding: 60px 30px;
            }
            #Mepilo-comparison .Mepilo-card {
                padding: 36px 28px;
                gap: 30px;
            }
            #Mepilo-comparison .Mepilo-comparison-headline {
                font-size: 4.2rem;       /* 桌面端标题 4.2rem */
            }
            #Mepilo-comparison .Mepilo-table-header-cell {
                font-size: 1.15rem;      /* 桌面端最小 1.15rem */
                padding: 18px 14px;
            }
            #Mepilo-comparison .Mepilo-table-cell {
                padding: 16px 14px;
                gap: 12px;
            }
            #Mepilo-comparison .Mepilo-comp-text {
                font-size: 1.7rem;       /* 桌面端正文 1.7rem */
            }
            #Mepilo-comparison .Mepilo-comp-icon {
                width: 24px; height: 24px;
                font-size: 0.85rem;
            }
            #Mepilo-comparison .Mepilo-table-cell--highlight::before {
                width: 4px;
            }
            #Mepilo-comparison .Mepilo-table-row:hover .Mepilo-table-cell--highlight::before {
                width: 5px;
            }
            #Mepilo-comparison .Mepilo-comp-orb--top {
                width: 400px; height: 400px; top: -150px; right: -120px;
            }
            #Mepilo-comparison .Mepilo-comp-orb--bottom {
                width: 300px; height: 300px; bottom: -100px; left: -80px;
            }
            #Mepilo-comparison .Mepilo-comp-geo--1 {
                width: 300px; height: 300px; top: 8%; right: -80px;
            }
            #Mepilo-comparison .Mepilo-comp-geo--2 {
                width: 180px; height: 180px; bottom: 10%; left: -50px;
            }
        }

        @media (min-width: 1024px) {
            #Mepilo-comparison {
                padding: 70px 40px;
            }
            #Mepilo-comparison .Mepilo-card {
                padding: 42px 34px;
                gap: 34px;
            }
            #Mepilo-comparison .Mepilo-table-header-cell {
                font-size: 1.25rem;
                padding: 20px 16px;
            }
            #Mepilo-comparison .Mepilo-table-cell {
                padding: 18px 16px;
                gap: 14px;
            }
            #Mepilo-comparison .Mepilo-comp-text {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 400px) {
            #Mepilo-comparison {
                padding: 30px 8px;
            }
            #Mepilo-comparison .Mepilo-card {
                padding: 20px 10px;
                gap: 18px;
            }
            #Mepilo-comparison .Mepilo-comparison-headline {
                font-size: 2.3rem;      /* 保持移动端最小值 */
            }
            #Mepilo-comparison .Mepilo-table-header-cell {
                font-size: 1.05rem;
                padding: 10px 6px;
            }
            #Mepilo-comparison .Mepilo-table-cell {
                padding: 10px 8px;
                gap: 6px;
            }
            #Mepilo-comparison .Mepilo-comp-text {
                font-size: 1.3rem;      /* 保持移动端正文最小值 */
            }
            #Mepilo-comparison .Mepilo-comp-icon {
                width: 17px; height: 17px;
                font-size: 0.65rem;
            }
            #Mepilo-comparison .Mepilo-table-cell--highlight::before {
                width: 2px;
            }
        }



@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&display=swap');

    #Mepilo-science {
        --sv-brand: #fd8e03;
        --sv-brand-soft: rgba(253, 142, 3, 0.12);
        --sv-dark-bg: #0c0c14;
        --sv-surface: #14141f;
        --sv-card-bg: rgba(20, 20, 31, 0.7);
        --sv-border: rgba(255, 255, 255, 0.06);
        --sv-text-primary: #f2f2f7;
        --sv-text-secondary: rgba(210, 210, 220, 0.7);
        --sv-radius-sm: 12px;
        --sv-radius-md: 20px;
        --sv-radius-lg: 32px;
        --sv-transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --sv-transition-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);

        /* 模块居中关键 */
        display: block;
        width: 100%;
        max-width: 1200px;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none;
        position: relative;
        isolation: isolate;
        background: var(--sv-dark-bg);
        border-radius: var(--sv-radius-lg);
        padding: 32px 14px 36px;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    #Mepilo-science,
    #Mepilo-science * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    /* 背景几何线条 */
    #Mepilo-science .sv-geo-lines {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.06;
        background-image:
            repeating-linear-gradient(45deg, #fff 0px, #fff 1px, transparent 1px, transparent 30px),
            repeating-linear-gradient(-45deg, #fff 0px, #fff 1px, transparent 1px, transparent 30px);
        mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
    }
    #Mepilo-science .sv-flow-lines {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.15;
        background:
            radial-gradient(circle at 30% 40%, rgba(253,142,3,0.2) 0%, transparent 40%),
            radial-gradient(circle at 70% 60%, rgba(253,142,3,0.15) 0%, transparent 40%);
        animation: svFlowPulse 6s ease-in-out infinite;
    }
    @keyframes svFlowPulse {
        0%,100% { opacity: 0.12; transform: scale(1); }
        50% { opacity: 0.22; transform: scale(1.04); }
    }
    #Mepilo-science .sv-content {
        position: relative;
        z-index: 2;
        max-width: 1100px;
        margin: 0 auto;
        width: 100%;
    }

    /* 头部 */
    #Mepilo-science .sv-header {
        text-align: center;
        margin-bottom: 24px;
    }
    #Mepilo-science .sv-header__badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--sv-brand-soft);
        border: 1px solid rgba(253, 142, 3, 0.22);
        border-radius: 40px;
        padding: 8px 20px;
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--sv-brand);
        letter-spacing: 0.6px;
        margin-bottom: 14px;
        animation: svFadeUp 0.7s var(--sv-transition-smooth) forwards;
        opacity: 0;
        max-width: 100%;
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
    }
    #Mepilo-science .sv-header__badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sv-brand);
        box-shadow: 0 0 12px 3px rgba(253,142,3,0.5);
        animation: svDotPulse 2s ease-in-out infinite;
        flex-shrink: 0;
    }
    @keyframes svDotPulse {
        0%,100% { box-shadow: 0 0 8px 2px rgba(253,142,3,0.4); }
        50% { box-shadow: 0 0 20px 6px rgba(253,142,3,0.7); }
    }
    #Mepilo-science .sv-header__title {
        font-family: 'Playfair Display', serif;
        font-size: 2.3rem;
        font-weight: 800;
        color: var(--sv-text-primary);
        line-height: 1.15;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
        animation: svFadeUp 0.7s var(--sv-transition-smooth) 0.1s forwards;
        opacity: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    #Mepilo-science .sv-header__sub {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--sv-text-secondary);
        line-height: 1.4;
        max-width: 520px;
        margin: 0 auto;
        animation: svFadeUp 0.7s var(--sv-transition-smooth) 0.2s forwards;
        opacity: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    @keyframes svFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ========== 移动端布局 ========== */
    #Mepilo-science .sv-mobile-layout {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    #Mepilo-science .sv-mobile-image-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: var(--sv-radius-md);
        overflow: hidden;
        background: #0e0e18;
        border: 1px solid var(--sv-border);
        box-shadow: 0 8px 36px rgba(0,0,0,0.5);
        cursor: pointer;
        z-index: 1;
        margin: 4px 0;
    }
    #Mepilo-science .sv-mobile-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        max-width: 100%;
    }
    #Mepilo-science .sv-mobile-image-wrap:active {
        transform: scale(0.98);
    }
    #Mepilo-science .sv-mobile-cards-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    #Mepilo-science .sv-image-glow-ring {
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 3;
        border: 2px solid transparent;
        border-top-color: rgba(253,142,3,0.3);
        border-right-color: rgba(253,142,3,0.15);
        animation: svRingRotate 10s linear infinite;
    }
    @keyframes svRingRotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    #Mepilo-science .sv-image-badge {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(10,10,18,0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 20px;
        padding: 5px 13px;
        font-size: 1.05rem;
        font-weight: 600;
        color: #fff;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
        z-index: 4;
        border: 1px solid rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
    }
    #Mepilo-science .sv-image-badge::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4caf84;
        box-shadow: 0 0 8px #4caf84;
        flex-shrink: 0;
    }

    /* 卡片 */
    #Mepilo-science .sv-card {
        background: var(--sv-card-bg);
        border-radius: var(--sv-radius-sm);
        padding: 12px 10px;
        border: 1px solid var(--sv-border);
        display: flex;
        flex-direction: column;
        gap: 5px;
        transition: all 0.35s var(--sv-transition-smooth);
        position: relative;
        z-index: 1;
        cursor: default;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        overflow: hidden;
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    #Mepilo-science .sv-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 20%, var(--sv-brand-soft) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: -1;
    }
    #Mepilo-science .sv-card:hover::after {
        opacity: 1;
    }
    #Mepilo-science .sv-card:hover {
        border-color: rgba(253,142,3,0.35);
        box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(253,142,3,0.15);
        transform: translateY(-2px);
    }
    #Mepilo-science .sv-card:active {
        transform: scale(0.97);
    }
    #Mepilo-science .sv-card__icon-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    #Mepilo-science .sv-card__diamond {
        width: 28px;
        height: 28px;
        background: var(--sv-brand-soft);
        border: 1px solid rgba(253,142,3,0.25);
        transform: rotate(45deg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 4px;
        position: relative;
    }
    #Mepilo-science .sv-card__diamond span {
        transform: rotate(-45deg);
        font-weight: 700;
        font-size: 1.75rem;
        color: var(--sv-brand);
        line-height: 1;
    }
    #Mepilo-science .sv-card:hover .sv-card__diamond {
        border-color: rgba(253,142,3,0.6);
        box-shadow: 0 0 14px 3px rgba(253,142,3,0.2);
    }
    #Mepilo-science .sv-card h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--sv-text-primary);
        line-height: 1.2;
        flex: 1;
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-family: 'Inter', sans-serif;
    }
    #Mepilo-science .sv-card__desc {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--sv-text-secondary);
        line-height: 1.35;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-family: 'Inter', sans-serif;
    }
    #Mepilo-science .sv-card__tag {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--sv-brand);
        background: var(--sv-brand-soft);
        padding: 4px 10px;
        border-radius: 10px;
        align-self: flex-start;
        border: 1px solid rgba(253,142,3,0.12);
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'Inter', sans-serif;
    }

    /* 统计 */
    #Mepilo-science .sv-stat {
        text-align: center;
        margin-top: 22px;
        animation: svFadeUp 0.7s var(--sv-transition-smooth) 0.5s forwards;
        opacity: 0;
    }
    #Mepilo-science .sv-stat__number {
        font-size: 1.7rem;
        font-weight: 800;
        background: linear-gradient(135deg, #fd8e03, #f5a623, #fd8e03);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: svShimmer 3s ease-in-out infinite;
        font-family: 'Inter', sans-serif;
    }
    @keyframes svShimmer {
        0% { background-position: 0% center; }
        50% { background-position: 100% center; }
        100% { background-position: 0% center; }
    }
    #Mepilo-science .sv-stat__label {
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--sv-text-secondary);
        margin-top: 4px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        padding: 0 8px;
        font-family: 'Inter', sans-serif;
    }

    /* ========== 桌面端布局（默认隐藏） ========== */
    #Mepilo-science .sv-desktop-layout {
        display: none;
    }

    /* ========== 平板及以上 ========== */
    @media (min-width: 768px) {
        #Mepilo-science {
            padding: 50px 28px 48px;
            border-radius: 44px;
        }
        #Mepilo-science .sv-header {
            margin-bottom: 28px;
        }
        #Mepilo-science .sv-header__title {
            font-size: 4.2rem;
            letter-spacing: -0.8px;
            margin-bottom: 10px;
        }
        #Mepilo-science .sv-header__sub {
            font-size: 1.7rem;
            max-width: 620px;
        }
        #Mepilo-science .sv-header__badge {
            font-size: 1.15rem;
            padding: 10px 24px;
            margin-bottom: 18px;
        }
        #Mepilo-science .sv-mobile-layout {
            display: none;
        }
        /* 改为 Flex 布局确保居中 */
        #Mepilo-science .sv-desktop-layout {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 8px;
            animation: svFadeUp 0.7s var(--sv-transition-smooth) 0.3s forwards;
            opacity: 0;
            width: 100%;
        }
        #Mepilo-science .sv-desktop-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 0;
            flex: 1; /* 左右列均分剩余空间 */
        }
        #Mepilo-science .sv-desktop-col--left {
            align-items: flex-end; /* 卡片靠右 */
        }
        #Mepilo-science .sv-desktop-col--right {
            align-items: flex-start; /* 卡片靠左 */
        }
        #Mepilo-science .sv-desktop-col .sv-card {
            max-width: 300px;
            width: 100%;
            padding: 16px 14px;
            gap: 6px;
        }
        #Mepilo-science .sv-desktop-col--left .sv-card {
            text-align: right;
        }
        #Mepilo-science .sv-card h3 {
            font-size: 1.7rem;
        }
        #Mepilo-science .sv-card__desc {
            font-size: 1.5rem;
            line-height: 1.35;
        }
        #Mepilo-science .sv-card__tag {
            font-size: 1.15rem;
            padding: 4px 12px;
        }
        #Mepilo-science .sv-desktop-image-wrap {
            position: relative;
            width: 400px; /* 固定宽度，保证居中 */
            max-width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: var(--sv-radius-md);
            overflow: hidden;
            background: #0e0e18;
            border: 1px solid var(--sv-border);
            box-shadow: 0 10px 44px rgba(0,0,0,0.55);
            cursor: pointer;
            z-index: 3;
            transition: box-shadow 0.5s, transform 0.5s;
            flex-shrink: 0; /* 防止被压缩 */
        }
        #Mepilo-science .sv-desktop-image-wrap:hover {
            box-shadow: 0 18px 60px rgba(0,0,0,0.7);
            transform: translateY(-3px);
        }
        #Mepilo-science .sv-desktop-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            max-width: 100%;
        }
        #Mepilo-science .sv-desktop-image-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            transition: background 0.5s;
            z-index: 3;
        }
        #Mepilo-science .sv-desktop-image-wrap.glow-left::after {
            background: linear-gradient(90deg, rgba(253,142,3,0.18) 0%, transparent 25%);
        }
        #Mepilo-science .sv-desktop-image-wrap.glow-right::after {
            background: linear-gradient(270deg, rgba(253,142,3,0.18) 0%, transparent 25%);
        }
        #Mepilo-science .sv-conn-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--sv-brand);
            z-index: 5;
            pointer-events: none;
            transition: transform 0.4s var(--sv-transition-spring), box-shadow 0.4s;
            box-shadow: 0 0 8px 3px rgba(253,142,3,0.4);
        }
        #Mepilo-science .sv-conn-dot.pulse-active {
            transform: scale(3.2);
            box-shadow: 0 0 22px 10px rgba(253,142,3,0.6);
        }
        #Mepilo-science .sv-conn-dot--l1 { top: 12%; left: 0; }
        #Mepilo-science .sv-conn-dot--l2 { top: 36%; left: 0; }
        #Mepilo-science .sv-conn-dot--l3 { top: 60%; left: 0; }
        #Mepilo-science .sv-conn-dot--r1 { top: 12%; right: 0; }
        #Mepilo-science .sv-conn-dot--r2 { top: 36%; right: 0; }
        #Mepilo-science .sv-conn-dot--r3 { top: 60%; right: 0; }
        #Mepilo-science .sv-stat__number {
            font-size: 2.3rem;
        }
        #Mepilo-science .sv-stat__label {
            font-size: 1.15rem;
        }
        #Mepilo-science .sv-image-badge {
            font-size: 1.15rem;
        }
    }
    @media (min-width: 1024px) {
        #Mepilo-science .sv-desktop-layout {
            gap: 24px;
        }
        #Mepilo-science .sv-desktop-col .sv-card {
            max-width: 320px;
            padding: 18px 16px;
        }
        #Mepilo-science {
            padding: 56px 32px 52px;
        }
        #Mepilo-science .sv-desktop-image-wrap {
            width: 440px;
        }
    }
    @media (max-width: 374px) {
        #Mepilo-science {
            padding: 20px 8px 24px;
            border-radius: 24px;
        }
        #Mepilo-science .sv-mobile-cards-grid {
            gap: 6px;
        }
        #Mepilo-science .sv-card {
            padding: 10px 7px;
            gap: 4px;
        }
        #Mepilo-science .sv-card__diamond {
            width: 24px;
            height: 24px;
        }
        #Mepilo-science .sv-card__diamond span {
            font-size: 0.7rem;
        }
        #Mepilo-science .sv-card h3 {
            font-size: 1.05rem;
        }
        #Mepilo-science .sv-card__desc {
            font-size: 1.05rem;
        }
        #Mepilo-science .sv-card__tag {
            font-size: 1.05rem;
            padding: 3px 8px;
        }
        #Mepilo-science .sv-header__title {
            font-size: 2.3rem;
        }
        #Mepilo-science .sv-header__sub {
            font-size: 1.3rem;
        }
        #Mepilo-science .sv-header__badge {
            font-size: 1.05rem;
            padding: 6px 14px;
        }
        #Mepilo-science .sv-mobile-image-wrap {
            border-radius: 16px;
        }
        #Mepilo-science .sv-stat__number {
            font-size: 1.5rem;
        }
        #Mepilo-science .sv-stat__label {
            font-size: 1.05rem;
        }
        #Mepilo-science .sv-image-badge {
            font-size: 1.05rem;
        }
    }

/* ===== Mepilo Reviews – Premium Scoped Styles ===== */
#Mepilo-reviews {
  --brand: #fd8e03;
  --brand-soft: #fdf0e0;
  --terracotta: #C17A60;
  --body-text: #2C3A42;
  --neutral-dark: #1E2A32;
  --card-shadow: 0 2px 24px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 20px 48px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  --card-bg: #ffffff;
  --card-radius: 24px;
  background: #FDFBF7;
  padding: 48px 16px 60px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== Background Decorations ===== */
#Mepilo-reviews .slim-reviews-bg-decor {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}

/* Orbs */
#Mepilo-reviews .slim-reviews-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.05;
  animation: slimReviewOrbFloat 16s ease-in-out infinite;
  will-change: transform;
}
#Mepilo-reviews .slim-reviews-bg-orb--a {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #fd8e03 0%, transparent 70%);
  top: -10%; right: -12%;
}
#Mepilo-reviews .slim-reviews-bg-orb--b {
  width: 340px; height: 340px;
  background: radial-gradient(circle, #e8b860 0%, transparent 70%);
  bottom: -12%; left: -10%;
  animation-delay: -8s;
}
#Mepilo-reviews .slim-reviews-bg-orb--c {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #f5c882 0%, transparent 65%);
  top: 40%; left: 50%;
  animation-delay: -4s;
  opacity: 0.035;
}
@keyframes slimReviewOrbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(32px, -24px) scale(1.07); }
  50% { transform: translate(-18px, 20px) scale(0.93); }
  75% { transform: translate(-26px, -14px) scale(1.05); }
}

/* Grid */
#Mepilo-reviews .slim-reviews-bg-grid {
  position: absolute; inset: 0; opacity: 0.016;
  background-image:
    linear-gradient(rgba(30,42,50,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,42,50,0.5) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 22%, transparent 68%);
}

/* Rings */
#Mepilo-reviews .slim-reviews-bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(253,142,3,0.07);
  animation: slimReviewRingSpin 30s linear infinite;
  will-change: transform;
}
#Mepilo-reviews .slim-reviews-bg-ring--1 {
  width: 300px; height: 300px;
  top: 12%; right: 3%;
}
#Mepilo-reviews .slim-reviews-bg-ring--1::before {
  content: ''; position: absolute; width: 14px; height: 14px;
  background: rgba(253,142,3,0.16); border-radius: 50%;
  top: -7px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 24px rgba(253,142,3,0.28);
}
#Mepilo-reviews .slim-reviews-bg-ring--2 {
  width: 180px; height: 180px;
  bottom: 18%; left: 8%;
  animation-delay: -15s;
  border-color: rgba(200,160,100,0.06);
}
#Mepilo-reviews .slim-reviews-bg-ring--2::before {
  content: ''; position: absolute; width: 10px; height: 10px;
  background: rgba(200,160,100,0.14); border-radius: 50%;
  bottom: -5px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(200,160,100,0.22);
}
@keyframes slimReviewRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Lines */
#Mepilo-reviews .slim-reviews-bg-line {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(253,142,3,0.08), transparent);
  animation: slimReviewLine 9s ease-in-out infinite;
}
#Mepilo-reviews .slim-reviews-bg-line--1 {
  height: 120px; top: 22%; left: 22%;
}
#Mepilo-reviews .slim-reviews-bg-line--2 {
  height: 80px; top: 55%; right: 18%;
  animation-delay: -4.5s;
  background: linear-gradient(to bottom, transparent, rgba(200,160,100,0.06), transparent);
}
@keyframes slimReviewLine {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.65; transform: translateY(16px); }
}

/* Floating particles */
#Mepilo-reviews .slim-reviews-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(253,142,3,0.1);
  animation: slimReviewParticle 7s ease-in-out infinite;
  pointer-events: none;
}
#Mepilo-reviews .slim-reviews-particle--1 { width: 6px; height: 6px; top: 15%; left: 30%; animation-delay: 0s; }
#Mepilo-reviews .slim-reviews-particle--2 { width: 4px; height: 4px; top: 28%; left: 65%; animation-delay: -1.2s; }
#Mepilo-reviews .slim-reviews-particle--3 { width: 5px; height: 5px; top: 50%; left: 18%; animation-delay: -2.5s; }
#Mepilo-reviews .slim-reviews-particle--4 { width: 7px; height: 7px; top: 40%; right: 20%; animation-delay: -3.8s; }
#Mepilo-reviews .slim-reviews-particle--5 { width: 3px; height: 3px; top: 70%; left: 40%; animation-delay: -5s; }
#Mepilo-reviews .slim-reviews-particle--6 { width: 5px; height: 5px; top: 60%; right: 12%; animation-delay: -6.2s; }
#Mepilo-reviews .slim-reviews-particle--7 { width: 4px; height: 4px; top: 35%; left: 80%; animation-delay: -0.6s; }
#Mepilo-reviews .slim-reviews-particle--8 { width: 6px; height: 6px; top: 18%; right: 35%; animation-delay: -4s; }
@keyframes slimReviewParticle {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  25% { transform: translate(18px, -14px) scale(1.5); opacity: 0.8; }
  50% { transform: translate(-10px, -22px) scale(0.8); opacity: 0.25; }
  75% { transform: translate(-16px, 8px) scale(1.3); opacity: 0.6; }
}

/* ===== Inner Container ===== */
#Mepilo-reviews .slim-reviews-inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 1;
}

/* ===== Header Block ===== */
#Mepilo-reviews .slim-reviews-header-block {
  text-align: center; margin-bottom: 36px;
}
#Mepilo-reviews .slim-reviews-eyebrow {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fd8e03;
  background: rgba(253,142,3,0.06);
  padding: 6px 16px;
  border-radius: 40px;
  margin-bottom: 12px;
}
#Mepilo-reviews .slim-reviews-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #1E2A32;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#Mepilo-reviews .slim-reviews-subtitle {
  font-size: 1.25rem;
  color: #6B7B83;
  text-align: center;
  margin-bottom: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ===== Carousel ===== */
#Mepilo-reviews .slim-reviews-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 8px 16px 28px;
  scroll-padding: 16px;
  cursor: grab;
}
#Mepilo-reviews .slim-reviews-carousel:active {
  cursor: grabbing;
}
#Mepilo-reviews .slim-reviews-carousel::-webkit-scrollbar { display: none; }

/* ===== Card ===== */
#Mepilo-reviews .slim-review-card {
  flex: 0 0 86%;
  scroll-snap-align: center;
  min-width: 280px;
  max-width: 420px;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
#Mepilo-reviews .slim-review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
}

/* Subtle card border glow */
#Mepilo-reviews .slim-review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  padding: 1px;
  background: linear-gradient(160deg, rgba(253,142,3,0.12), transparent 40%, transparent 60%, rgba(253,142,3,0.06));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}

/* ===== 1:1 Card Image ===== */
#Mepilo-reviews .slim-review-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #f5f2ed;
  flex-shrink: 0;
}
#Mepilo-reviews .slim-review-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#Mepilo-reviews .slim-review-card:hover .slim-review-card-img {
  transform: scale(1.04);
}
/* Image shine accent */
#Mepilo-reviews .slim-review-card-image-shine {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#Mepilo-reviews .slim-review-card:hover .slim-review-card-image-shine {
  opacity: 1;
}
/* Image badge */
#Mepilo-reviews .slim-review-card-image-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1E2A32;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  pointer-events: none;
}

/* ===== Card Inner Content ===== */
#Mepilo-reviews .slim-review-card-inner {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Header */
#Mepilo-reviews .slim-review-header {
  display: flex; gap: 11px; margin-bottom: 12px; align-items: center;
}
#Mepilo-reviews .slim-review-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #fd8e03, #e67600);
  color: #fff; font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(253,142,3,0.2);
}
#Mepilo-reviews .slim-review-user {
  display: flex; flex-direction: column; justify-content: center;
}
#Mepilo-reviews .slim-review-name {
  font-weight: 600; font-size: 1.5rem; color: #1E2A32;
  display: flex; align-items: center; gap: 5px;
}
#Mepilo-reviews .slim-review-flag { font-size: 1.5rem; }
#Mepilo-reviews .slim-review-meta {
  display: flex; align-items: center; gap: 7px; margin-top: 2px; flex-wrap: wrap;
}
#Mepilo-reviews .slim-review-date { font-size: 0.95rem; color: #8A9499; }
#Mepilo-reviews .slim-review-location { font-size: 0.82rem; color: #6B7B83; font-weight: 500; }
#Mepilo-reviews .slim-review-verified {
  font-size: 0.95rem; color: #4a9c5d; font-weight: 600;
  display: flex; align-items: center; gap: 2px;
}

/* Text */
#Mepilo-reviews .slim-review-text {
  font-size: 1.05rem; 
font-weight:500;line-height: 1.55; color: #2C3A42;
  margin-bottom: 14px; flex: 1;
}

/* Product mini */
#Mepilo-reviews .slim-review-product {
  display: flex; align-items: center; gap: 10px;
  background: #F9F7F4; border-radius: 14px; padding: 10px 12px;
  margin-bottom: 14px;
  transition: background 0.3s ease;
}
#Mepilo-reviews .slim-review-card:hover .slim-review-product {
  background: #fdf8f1;
}
#Mepilo-reviews .slim-review-product-img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 10px;
  flex-shrink: 0;
}
#Mepilo-reviews .slim-review-product-name {
  font-size: 0.95rem; font-weight: 700; color: #1E2A32;
}

/* Actions */
#Mepilo-reviews .slim-review-actions {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid #E8EBEF; padding-top: 12px;
  margin-top: auto;
}
#Mepilo-reviews .slim-review-helpful {
  font-size: 0.85rem; color: #6B7B83; margin-right: 2px;
}
#Mepilo-reviews .slim-review-like-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 22px;
  font-size: 0.85rem; color: #6B7B83;
  transition: all 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  outline: none;
}
#Mepilo-reviews .slim-review-like-btn:hover {
  background: rgba(253,142,3,0.06);
  color: #fd8e03;
}
#Mepilo-reviews .slim-review-like-btn:active {
  transform: scale(0.94);
  transition: transform 0.12s ease;
}
/* Liked state */
#Mepilo-reviews .slim-review-like-btn.liked {
  color: #fd8e03;
  background: rgba(253,142,3,0.07);
}
#Mepilo-reviews .slim-review-like-btn.liked .slim-like-icon {
  fill: #fd8e03;
  stroke: #fd8e03;
}
#Mepilo-reviews .slim-review-like-btn.liked .slim-review-like-count {
  color: #fd8e03;
  font-weight: 700;
}

/* Like animations */
@keyframes likePopIn {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes likePopOut {
  0% { transform: scale(1); }
  30% { transform: scale(0.75); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes countBounceIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); color: #fd8e03; }
  100% { transform: scale(1); }
}
@keyframes countBounceOut {
  0% { transform: scale(1); }
  50% { transform: scale(0.8); color: #8A9499; }
  100% { transform: scale(1); }
}
#Mepilo-reviews .like-animate-in {
  animation: likePopIn 0.38s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#Mepilo-reviews .like-animate-out {
  animation: likePopOut 0.38s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#Mepilo-reviews .count-animate-in {
  animation: countBounceIn 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#Mepilo-reviews .count-animate-out {
  animation: countBounceOut 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ===== Scroll Dots ===== */
#Mepilo-reviews .slim-reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
#Mepilo-reviews .slim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d5dbe0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
}
#Mepilo-reviews .slim-dot.active {
  background: #fd8e03;
  width: 26px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(253,142,3,0.3);
}
#Mepilo-reviews .slim-dot:hover {
  background: #c0c9cf;
}
#Mepilo-reviews .slim-dot.active:hover {
  background: #fd8e03;
}

/* ===== Responsive ===== */
@media (min-width: 600px) {
  #Mepilo-reviews { padding: 60px 28px 70px; }
  #Mepilo-reviews .slim-review-card { flex: 0 0 340px; max-width: 420px; }
  #Mepilo-reviews .slim-reviews-carousel { gap: 24px; scroll-padding: 28px; padding: 8px 28px 28px; }
  #Mepilo-reviews .slim-reviews-title { font-size: 2.8rem; }
  #Mepilo-reviews .slim-review-card-inner { padding: 20px 20px 18px; }
}
@media (min-width: 768px) {
  #Mepilo-reviews { padding: 80px 40px 90px; }
  #Mepilo-reviews .slim-reviews-title { font-size: 3.2rem; }
  #Mepilo-reviews .slim-review-card { flex: 0 0 370px; max-width: 430px; }
  #Mepilo-reviews .slim-reviews-carousel { gap: 28px; scroll-padding: 40px; padding: 10px 40px 32px; }
  #Mepilo-reviews .slim-reviews-subtitle { font-size: 1.18rem; }
  #Mepilo-reviews .slim-review-card-inner { padding: 24px 22px 20px; }
  #Mepilo-reviews .slim-review-text { font-size: 0.93rem; line-height: 1.6; }
}
@media (min-width: 1024px) {
  #Mepilo-reviews .slim-review-card { flex: 0 0 380px; max-width: 440px; }
  #Mepilo-reviews .slim-reviews-carousel { gap: 32px; }
}

/* ============ 所有变量与样式限定在 #Mepilo-how 内 ============ */
        #Mepilo-how {
            --brand: #fd8e03;
            --brand-deep: #e07b00;
            --brand-glow: rgba(253, 142, 3, 0.3);
            --gold: #c9a96e;
            --gold-soft: rgba(201, 169, 110, 0.2);
            --sub-text: #6B7B83;
            --body-text: #2C3A42;
            --surface-warm: #FDFBF7;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.08);
            --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.1);
            --shadow-glow: 0 0 50px rgba(253, 142, 3, 0.1), 0 0 100px rgba(253, 142, 3, 0.04);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --radius-full: 50px;
            /* 更优雅的字体变量 */
            --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
            --font-body: 'DM Sans', 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

            position: relative;
            background:
                radial-gradient(ellipse at 30% 20%, rgba(253, 142, 3, 0.05) 0%, transparent 55%),
                radial-gradient(ellipse at 70% 60%, rgba(201, 169, 110, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(27, 126, 90, 0.03) 0%, transparent 50%),
                #FDFBF7;
            padding: 40px 16px;
            overflow: hidden;
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #Mepilo-how *,
        #Mepilo-how *::before,
        #Mepilo-how *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 背景氛围装饰层 */
        #Mepilo-how .Mepilo-how-ambient {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        #Mepilo-how .Mepilo-how-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            opacity: 0.4;
            animation: Mepilo-how-orbBreathe 9s ease-in-out infinite;
        }
        #Mepilo-how .Mepilo-how-orb--top {
            width: 300px;
            height: 300px;
            background: rgba(253, 142, 3, 0.06);
            top: -120px;
            left: -80px;
            animation-delay: 0s;
        }
        #Mepilo-how .Mepilo-how-orb--mid {
            width: 240px;
            height: 240px;
            background: rgba(201, 169, 110, 0.05);
            top: 35%;
            right: -90px;
            animation-delay: -3s;
        }
        #Mepilo-how .Mepilo-how-orb--bottom {
            width: 200px;
            height: 200px;
            background: rgba(27, 126, 90, 0.04);
            bottom: -60px;
            left: 30%;
            animation-delay: -6s;
        }
        @keyframes Mepilo-how-orbBreathe {
            0%,
            100% {
                transform: scale(1);
                opacity: 0.35;
            }
            40% {
                transform: scale(1.3);
                opacity: 0.6;
            }
            70% {
                transform: scale(0.85);
                opacity: 0.28;
            }
        }
        #Mepilo-how .Mepilo-how-geo {
            position: absolute;
            pointer-events: none;
            border-radius: 50%;
            border: 1.2px solid rgba(201, 169, 110, 0.2);
            animation: Mepilo-how-ringSpin 40s linear infinite;
        }
        #Mepilo-how .Mepilo-how-geo--1 {
            width: 260px;
            height: 260px;
            top: -70px;
            right: -90px;
            border-style: dashed;
            border-width: 1px;
            animation-duration: 50s;
            animation-direction: reverse;
        }
        #Mepilo-how .Mepilo-how-geo--2 {
            width: 140px;
            height: 140px;
            bottom: 10%;
            left: -40px;
            border-color: rgba(253, 142, 3, 0.15);
            animation-duration: 32s;
        }
        #Mepilo-how .Mepilo-how-geo--3 {
            width: 90px;
            height: 90px;
            top: 25%;
            right: 10%;
            border-color: rgba(27, 126, 90, 0.12);
            animation-duration: 28s;
        }
        @keyframes Mepilo-how-ringSpin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        #Mepilo-how .Mepilo-how-sparkle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--gold);
            pointer-events: none;
            animation: Mepilo-how-sparkleFloat 6.5s ease-in-out infinite;
            opacity: 0;
        }
        #Mepilo-how .Mepilo-how-sparkle--1 { top: 10%; left: 8%; animation-delay: 0s; }
        #Mepilo-how .Mepilo-how-sparkle--2 { top: 20%; right: 15%; animation-delay: -2s; width: 2px; height: 2px; background: #fd8e03; }
        #Mepilo-how .Mepilo-how-sparkle--3 { bottom: 25%; left: 20%; animation-delay: -4.2s; width: 3.5px; height: 3.5px; background: #c9a96e; }
        #Mepilo-how .Mepilo-how-sparkle--4 { top: 40%; right: 6%; animation-delay: -1.8s; background: #1B7E5A; width: 2.5px; height: 2.5px; }
        #Mepilo-how .Mepilo-how-sparkle--5 { bottom: 15%; right: 25%; animation-delay: -5s; width: 2px; height: 2px; background: #fd8e03; }
        @keyframes Mepilo-how-sparkleFloat {
            0%,
            100% { opacity: 0; transform: translateY(0) scale(0.4); }
            12% { opacity: 0.85; transform: translateY(-15px) scale(1.25); }
            28% { opacity: 0.2; transform: translateY(-26px) scale(0.55); }
            50% { opacity: 0.65; transform: translateY(-7px) scale(1.05); }
            72% { opacity: 0.06; transform: translateY(-22px) scale(0.3); }
            86% { opacity: 0.5; transform: translateY(-3px) scale(0.9); }
        }
        #Mepilo-how .Mepilo-how-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.025;
            background-image:
                linear-gradient(rgba(201, 169, 110, 0.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201, 169, 110, 0.5) 1px, transparent 1px);
            background-size: 36px 36px;
            mask-image: radial-gradient(ellipse at center, black 25%, transparent 65%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 65%);
        }

        /* 主内容容器 */
        #Mepilo-how .Mepilo-how-inner {
            position: relative;
            z-index: 2;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 26px;
        }

        /* 标题 - 使用优雅的 Playfair Display */
        #Mepilo-how .Mepilo-how-headline {
            font-family: var(--font-display);
            font-size: 2.4rem;
            font-weight: 700;
            font-style: normal;
            text-align: center;
            color: #1a1a1a;
            letter-spacing: -0.01em;
            line-height: 1.15;
            animation: Mepilo-how-fadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0;
            animation-delay: 0.1s;
        }
        #Mepilo-how .Mepilo-how-headline-accent {
            display: inline;
            font-style: italic;
            background: linear-gradient(180deg, transparent 56%, rgba(253, 142, 3, 0.22) 56%);
            padding: 0 4px;
        }
        @keyframes Mepilo-how-fadeUp {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 内容区域 */
        #Mepilo-how .Mepilo-how-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
        }

        /* 图片区域 */
        #Mepilo-how .Mepilo-how-image-area {
            position: relative;
            width: 88%;
            max-width: 400px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: Mepilo-how-imageFloat 6.5s ease-in-out infinite;
            order: 1;
            margin: 0 auto;
        }
        #Mepilo-how .Mepilo-how-image-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        #Mepilo-how .Mepilo-how-image-frame {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 22px;
            overflow: hidden;
            background: linear-gradient(155deg, #fefcf8 0%, #f7efe0 40%, #f0e8d5 100%);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow 0.5s ease;
        }
        #Mepilo-how .Mepilo-how-image-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        @keyframes Mepilo-how-imageFloat {
            0%,
            100% { transform: translateY(0); }
            25% { transform: translateY(-8px); }
            50% { transform: translateY(-2px); }
            70% { transform: translateY(-11px); }
        }
        /* 轨道装饰 */
        #Mepilo-how .Mepilo-how-image-orbit {
            position: absolute;
            inset: -10%;
            border-radius: 50%;
            border: 1.5px solid rgba(201, 169, 110, 0.35);
            animation: Mepilo-how-orbitSpin 22s linear infinite;
            pointer-events: none;
            box-shadow: 0 0 25px rgba(253, 142, 3, 0.06);
        }
        #Mepilo-how .Mepilo-how-image-orbit--inner {
            inset: 0%;
            border-width: 1px;
            border-style: dashed;
            border-color: rgba(253, 142, 3, 0.22);
            animation-duration: 16s;
            animation-direction: reverse;
            box-shadow: none;
        }
        @keyframes Mepilo-how-orbitSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #Mepilo-how .Mepilo-how-image-glow {
            position: absolute;
            width: 70%;
            height: 70%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(253, 142, 3, 0.16) 0%, rgba(253, 142, 3, 0.03) 45%, transparent 70%);
            pointer-events: none;
            animation: Mepilo-how-glowPulse 5s ease-in-out infinite;
            z-index: -1;
            filter: blur(18px);
        }
        @keyframes Mepilo-how-glowPulse {
            0%,
            100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.18); opacity: 0.95; }
        }

        /* 步骤卡片网格 */
        #Mepilo-how .Mepilo-how-cards-grid {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            order: 2;
        }
        /* 单张卡片 */
        #Mepilo-how .Mepilo-how-step-card {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 0;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(201, 169, 110, 0.18);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
            position: relative;
            cursor: default;
            animation: Mepilo-how-cardIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            opacity: 0;
        }
        #Mepilo-how .Mepilo-how-step-card:nth-child(1) { animation-delay: 0.25s; }
        #Mepilo-how .Mepilo-how-step-card:nth-child(2) { animation-delay: 0.35s; }
        #Mepilo-how .Mepilo-how-step-card:nth-child(3) { animation-delay: 0.45s; }
        #Mepilo-how .Mepilo-how-step-card:nth-child(4) { animation-delay: 0.55s; }
        @keyframes Mepilo-how-cardIn {
            from { opacity: 0; transform: translateY(22px) scale(0.94); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        #Mepilo-how .Mepilo-how-step-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg), 0 0 35px rgba(253, 142, 3, 0.08);
            border-color: rgba(201, 169, 110, 0.4);
        }
        #Mepilo-how .Mepilo-how-step-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 15%;
            right: 15%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(253, 142, 3, 0.25), transparent);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        #Mepilo-how .Mepilo-how-step-card:hover::after { opacity: 1; }

        /* 胶囊标题 - 使用优雅的 Playfair Display */
        #Mepilo-how .Mepilo-how-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: linear-gradient(135deg, #FFF8ED 0%, #FFF3E0 50%, #FFFBF5 100%);
            border: 1.5px solid rgba(253, 142, 3, 0.35);
            border-radius: 50px;
            padding: 7px 18px;
            margin: 16px 10px 8px;
            font-family: var(--font-display);
            font-size: 1.15rem;
            font-weight: 600;
            font-style: normal;
            color: #3a2a0a;
            letter-spacing: 0.02em;
            white-space: nowrap;
            transition: all 0.35s ease;
            position: relative;
            z-index: 1;
            box-shadow: 0 2px 10px rgba(253, 142, 3, 0.08);
        }
        #Mepilo-how .Mepilo-how-step-card:hover .Mepilo-how-pill {
            border-color: rgba(253, 142, 3, 0.6);
            box-shadow: 0 4px 16px rgba(253, 142, 3, 0.18);
            transform: translateY(-2px);
        }
        #Mepilo-how .Mepilo-how-pill-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--brand);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            flex-shrink: 0;
            line-height: 1;
            box-shadow: 0 2px 6px rgba(253, 142, 3, 0.3);
            transition: transform 0.35s ease;
            font-family: var(--font-body);
        }
        #Mepilo-how .Mepilo-how-step-card:hover .Mepilo-how-pill-num {
            transform: scale(1.15);
        }

        /* 卡片描述文字 - 使用清晰的 DM Sans */
        #Mepilo-how .Mepilo-how-step-desc {
            font-family: var(--font-body);
            font-size: 1.25rem;
            font-weight: 600;
            color: #5a5a5a;
            line-height: 1.45;
            padding: 0 14px 16px;
            letter-spacing: -0.01em;
        }
        #Mepilo-how .Mepilo-how-step-desc strong {
            color: #2a1a0a;
            font-weight: 700;
        }

        /* ============ 响应式：768px+ 桌面端 ============ */
        @media (min-width: 768px) {
            #Mepilo-how {
                padding: 60px 28px;
            }
            #Mepilo-how .Mepilo-how-headline {
                font-size: 4.2rem;
                margin-bottom: 4px;
                letter-spacing: -0.015em;
            }
            /* 桌面三列：1fr 2fr 1fr */
            #Mepilo-how .Mepilo-how-content {
                flex-direction: row;
                display: grid;
                grid-template-columns: 1fr 2fr 1fr;
                gap: 20px;
                align-items: stretch;
            }
            /* 图片区域恢复桌面样式 */
            #Mepilo-how .Mepilo-how-image-area {
                order: 2;
                width: 100%;
                max-width: 100%;
                margin: 0;
                align-self: center;
            }
            #Mepilo-how .Mepilo-how-image-wrapper {
                max-width: 340px;
                width: 100%;
                margin: 0 auto;
            }
            #Mepilo-how .Mepilo-how-image-frame {
                width: 74%;
                border-radius: 24px;
                margin: 0 auto;
            }
            /* 左右卡片列 */
            #Mepilo-how .Mepilo-how-cards-grid--left {
                order: 1;
                display: flex;
                flex-direction: column;
                gap: 14px;
                justify-content: center;
            }
            #Mepilo-how .Mepilo-how-cards-grid--right {
                order: 3;
                display: flex;
                flex-direction: column;
                gap: 14px;
                justify-content: center;
            }
            #Mepilo-how .Mepilo-how-cards-grid {
                display: flex;
                flex-direction: column;
                gap: 14px;
            }
            /* 桌面卡片微调 */
            #Mepilo-how .Mepilo-how-step-card {
                border-radius: var(--radius-xl);
            }
            #Mepilo-how .Mepilo-how-pill {
                font-size: 1.15rem;
                padding: 9px 20px;
                margin: 18px 12px 10px;
                letter-spacing: 0.03em;
                gap: 8px;
            }
            #Mepilo-how .Mepilo-how-pill-num {
                width: 25px;
                height: 25px;
                font-size: 0.8rem;
            }
            #Mepilo-how .Mepilo-how-step-desc {
                font-size: 1.15rem;
                padding: 0 16px 18px;
            }
            /* 装饰放大 */
            #Mepilo-how .Mepilo-how-orb--top { width: 420px; height: 420px; top: -160px; left: -100px; }
            #Mepilo-how .Mepilo-how-orb--mid { width: 320px; height: 320px; top: 30%; right: -120px; }
            #Mepilo-how .Mepilo-how-geo--1 { width: 340px; height: 340px; top: -80px; right: -110px; }
            #Mepilo-how .Mepilo-how-geo--2 { width: 180px; height: 180px; bottom: 8%; left: -50px; }
        }

        /* 大桌面 */
        @media (min-width: 1024px) {
            #Mepilo-how { padding: 70px 36px; }
            #Mepilo-how .Mepilo-how-content { gap: 24px; }
            #Mepilo-how .Mepilo-how-image-wrapper { max-width: 380px; }
            #Mepilo-how .Mepilo-how-pill { font-size: 1.2rem; padding: 10px 22px; margin: 20px 14px 10px; }
            #Mepilo-how .Mepilo-how-step-desc { font-size: 1.2rem; padding: 0 18px 20px; }
            #Mepilo-how .Mepilo-how-cards-grid { gap: 16px; }
        }

        /* 小屏手机（≤400px）微调 */
        @media (max-width: 400px) {
            #Mepilo-how { padding: 30px 8px; }
            #Mepilo-how .Mepilo-how-image-area { width: 90%; }
            #Mepilo-how .Mepilo-how-cards-grid { gap: 8px; }
            #Mepilo-how .Mepilo-how-pill {
                font-size: 1.05rem;
                padding: 6px 14px;
                margin: 12px 8px 6px;
                gap: 5px;
            }
            #Mepilo-how .Mepilo-how-pill-num { width: 19px; height: 19px; font-size: 0.7rem; }
            #Mepilo-how .Mepilo-how-step-desc {
                font-size: 1.05rem;
                padding: 0 10px 12px;
            }
        }



.sv-expert {
  --brand: #fd8e03;
  --text-dark: #1E2A32;
  --text-body: #2C3A42;
  --bg: #F4F7F3;
  --card-bg: #ffffff;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  border-radius: 36px;
  padding: 40px 18px 48px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sv-expert * { box-sizing: border-box; margin: 0; padding: 0; }

.sv-expert-bg-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.25;
  background-image: radial-gradient(circle, rgba(44,58,66,0.15) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, black 25%, transparent 70%);
}
.sv-expert-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  pointer-events: none; z-index: 0;
  animation: svOrbFloat 12s ease-in-out infinite;
}
.sv-expert-orb--1 { width: 260px; height: 260px; background: rgba(253,142,3,0.06); top: -60px; right: -50px; }
.sv-expert-orb--2 { width: 220px; height: 220px; background: rgba(44,58,66,0.04); bottom: -40px; left: -40px; animation-delay: -6s; animation-duration: 15s; }
@keyframes svOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(25px,-20px) scale(1.08); }
  50% { transform: translate(-15px,15px) scale(0.94); }
  75% { transform: translate(-30px,-8px) scale(1.05); }
}

.sv-expert-content { position: relative; z-index: 2; }
.sv-expert-header { text-align: center; margin-bottom: 32px; }
.sv-expert-header__title { font-size: 2.4rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; letter-spacing: -0.3px; }

.sv-expert-mobile { display: flex; flex-direction: column; gap: 18px; }
.sv-expert-image-wrap {
  position: relative; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden;
  background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  transition: box-shadow 0.4s, transform 0.4s;
}
.sv-expert-image-wrap:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); transform: translateY(-3px); }
.sv-expert-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-expert-image-ring {
  position: absolute; inset: -3px; border-radius: 24px; pointer-events: none; z-index: 2;
  border: 2px solid transparent;
  border-top-color: rgba(253,142,3,0.2); border-right-color: rgba(253,142,3,0.1);
  animation: svRingSpin 10s linear infinite;
}
@keyframes svRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sv-expert-card {
  background: var(--card-bg); border-radius: 20px; padding: 22px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.35s, transform 0.35s;
}
.sv-expert-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.sv-expert-card__quote {
  font-size: 1.15rem;
font-weight: 500; font-style: italic; color: var(--text-body);
  line-height: 1.5; margin-bottom: 14px; padding-left: 16px;
  border-left: 3px solid var(--brand);
}
.sv-expert-card__author {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.05rem; font-weight: 600; color: var(--text-dark);
}
.sv-expert-card__check {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(253,142,3,0.1); display: flex; align-items: center;
  justify-content: center; color: var(--brand); font-weight: 700;
  font-size: 1.05rem;font-weight:600; flex-shrink: 0;
}

.sv-expert-stats {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
}
.sv-expert-stat-item {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fafbf8 100%);
  border-radius: 18px; padding: 16px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 0 0 1px rgba(253,142,3,0.08);
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 600; color: var(--text-body);
  flex: 1 1 auto; justify-content: center; min-width: 0;
  transition: all 0.3s cubic-bezier(0.22,0.61,0.36,1);
  overflow: hidden; z-index: 1;
}
.sv-expert-stat-item::before {
  content: ''; position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(253,142,3,0.1) 0%, transparent 70%);
  border-radius: 50%; z-index: -1;
  transition: transform 0.4s ease, opacity 0.4s; opacity: 0.6;
}
.sv-expert-stat-item::after {
  content: ''; position: absolute; bottom: -15px; left: -15px;
  width: 70px; height: 70px;
  background: radial-gradient(circle, rgba(44,58,66,0.05) 0%, transparent 70%);
  border-radius: 50%; z-index: -1;
  transition: transform 0.4s ease, opacity 0.4s; opacity: 0.5;
}
.sv-expert-stat-item:hover::before { transform: scale(1.2) translate(-5px,5px); opacity: 0.9; }
.sv-expert-stat-item:hover::after { transform: scale(1.1) translate(5px,-5px); opacity: 0.8; }
.sv-expert-stat-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(253,142,3,0.2); transform: translateY(-3px); }
.sv-expert-stat-icon { font-size: 1.5rem; flex-shrink: 0; position: relative; z-index: 2; }
.sv-expert-stat-label { position: relative; z-index: 2; font-weight: 600; }

.sv-expert-desktop { display: none; }

@media (min-width: 768px) {
  .sv-expert { padding: 56px 32px 60px; border-radius: 44px; }
  .sv-expert-header__title { font-size: 4.2rem; }
  .sv-expert-mobile { display: none; }
  .sv-expert-desktop {
    display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: center;
  }
  .sv-expert-desktop-image {
    position: relative; aspect-ratio: 1/1; border-radius: 28px; overflow: hidden;
    background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: box-shadow 0.4s, transform 0.4s;
  }
  .sv-expert-desktop-image:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.15); transform: translateY(-3px); }
  .sv-expert-desktop-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sv-expert-desktop-image .sv-expert-image-ring { position: absolute; inset: -4px; border-radius: 30px; }
  .sv-expert-desktop-right { display: flex; flex-direction: column; gap: 18px; }
  .sv-expert-desktop-right .sv-expert-card { padding: 24px 22px; }
  .sv-expert-card__quote { font-size: 1.7rem; }
  .sv-expert-card__author { font-size: 1.25rem; }
  .sv-expert-stats { margin-top: 4px; justify-content: flex-start; }
  .sv-expert-stat-item { font-size: 1.4rem; padding: 16px 18px; }
}

@media (min-width: 1024px) {
  .sv-expert-desktop { grid-template-columns: 460px 1fr; gap: 40px; }
  .sv-expert-header__title { font-size: 3.2rem; }
  .sv-expert-card__quote { font-size: 1.05rem; }
}

/* ============ 所有变量与样式限定在 #Mepilo-asseen 内 ============ */
        #Mepilo-asseen {
            --brand: #fd8e03;
            --brand-soft: rgba(253, 142, 3, 0.08);
            --brand-glow: rgba(253, 142, 3, 0.25);
            --gold: #c9a96e;
            --gold-soft: rgba(201, 169, 110, 0.18);
            --surface-warm: #FDFBF7;
            --text-dark: #1a1a1a;
            --text-mid: #4a4a4a;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 6px 22px rgba(0,0,0,0.06);
            --shadow-lg: 0 12px 36px rgba(0,0,0,0.07);
            --shadow-xl: 0 20px 50px rgba(0,0,0,0.09);
            --shadow-glow: 0 0 40px rgba(253,142,3,0.08), 0 0 80px rgba(253,142,3,0.03);
            --radius-lg: 20px;
            --radius-xl: 26px;
            --radius-full: 60px;
            --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
            --font-body: 'DM Sans', 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

            position: relative;
            background: radial-gradient(ellipse at 40% 15%, rgba(253,142,3,0.04) 0%, transparent 60%),
                        radial-gradient(ellipse at 65% 55%, rgba(201,169,110,0.05) 0%, transparent 50%),
                        radial-gradient(ellipse at 25% 75%, rgba(27,126,90,0.025) 0%, transparent 50%),
                        linear-gradient(180deg, #FDFBF7 0%, #faf8f4 30%, #f8f5ef 70%, #FDFBF7 100%);
            padding: 44px 16px;
            overflow: hidden;
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #Mepilo-asseen *,
        #Mepilo-asseen *::before,
        #Mepilo-asseen *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 背景装饰层 */
        #Mepilo-asseen .Mepilo-asseen-ambient {
            position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
        }
        #Mepilo-asseen .Mepilo-asseen-orb {
            position: absolute; border-radius: 50%; filter: blur(65px); opacity: 0.38;
            animation: Mepilo-asseen-orbBreathe 10s ease-in-out infinite;
        }
        #Mepilo-asseen .Mepilo-asseen-orb--top {
            width: 280px; height: 280px; background: rgba(253,142,3,0.05);
            top: -100px; right: -70px; animation-delay: 0s;
        }
        #Mepilo-asseen .Mepilo-asseen-orb--mid {
            width: 200px; height: 200px; background: rgba(201,169,110,0.045);
            top: 40%; left: -70px; animation-delay: -3.5s;
        }
        #Mepilo-asseen .Mepilo-asseen-orb--bottom {
            width: 180px; height: 180px; background: rgba(27,126,90,0.03);
            bottom: -50px; right: 15%; animation-delay: -7s;
        }
        @keyframes Mepilo-asseen-orbBreathe {
            0%,100% { transform: scale(1); opacity: 0.32; }
            35% { transform: scale(1.28); opacity: 0.55; }
            65% { transform: scale(0.88); opacity: 0.26; }
        }
        #Mepilo-asseen .Mepilo-asseen-geo {
            position: absolute; pointer-events: none; border-radius: 50%;
            border: 1px solid rgba(201,169,110,0.16); animation: Mepilo-asseen-ringSpin 45s linear infinite;
        }
        #Mepilo-asseen .Mepilo-asseen-geo--1 {
            width: 240px; height: 240px; top: -60px; left: -80px;
            border-style: dashed; border-width: 1px; animation-duration: 55s; animation-direction: reverse;
        }
        #Mepilo-asseen .Mepilo-asseen-geo--2 {
            width: 130px; height: 130px; bottom: 12%; right: -40px;
            border-color: rgba(253,142,3,0.12); animation-duration: 33s;
        }
        @keyframes Mepilo-asseen-ringSpin {
            from { transform: rotate(0deg); } to { transform: rotate(360deg); }
        }
        #Mepilo-asseen .Mepilo-asseen-sparkle {
            position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
            background: var(--gold); pointer-events: none;
            animation: Mepilo-asseen-sparkleFloat 7s ease-in-out infinite; opacity: 0;
        }
        #Mepilo-asseen .Mepilo-asseen-sparkle--1 { top: 12%; left: 10%; animation-delay: 0s; }
        #Mepilo-asseen .Mepilo-asseen-sparkle--2 { top: 22%; right: 12%; animation-delay: -2.2s; width: 2px; height: 2px; background: #fd8e03; }
        #Mepilo-asseen .Mepilo-asseen-sparkle--3 { bottom: 20%; left: 16%; animation-delay: -4.5s; width: 3px; height: 3px; background: #c9a96e; }
        #Mepilo-asseen .Mepilo-asseen-sparkle--4 { top: 38%; right: 8%; animation-delay: -1.6s; background: #1B7E5A; width: 2px; height: 2px; }
        #Mepilo-asseen .Mepilo-asseen-sparkle--5 { bottom: 28%; right: 22%; animation-delay: -5.8s; width: 2.5px; height: 2.5px; background: #fd8e03; }
        @keyframes Mepilo-asseen-sparkleFloat {
            0%,100% { opacity: 0; transform: translateY(0) scale(0.35); }
            10% { opacity: 0.8; transform: translateY(-14px) scale(1.25); }
            25% { opacity: 0.18; transform: translateY(-24px) scale(0.5); }
            48% { opacity: 0.6; transform: translateY(-6px) scale(1.05); }
            68% { opacity: 0.05; transform: translateY(-20px) scale(0.28); }
            84% { opacity: 0.45; transform: translateY(-2px) scale(0.9); }
        }
        #Mepilo-asseen .Mepilo-asseen-grid {
            position: absolute; inset: 0; pointer-events: none; opacity: 0.022;
            background-image: linear-gradient(rgba(201,169,110,0.45) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(201,169,110,0.45) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: radial-gradient(ellipse at center, black 22%, transparent 62%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 22%, transparent 62%);
        }

        /* 主内容 */
        #Mepilo-asseen .Mepilo-asseen-inner {
            position: relative; z-index: 2; max-width: 1000px; width: 100%; margin: 0 auto;
            display: flex; flex-direction: column; align-items: center; gap: 24px;
        }

        /* 卡片容器 */
        #Mepilo-asseen .Mepilo-asseen-card {
            width: 100%; background: rgba(255,255,255,0.6); backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px); border-radius: var(--radius-xl);
            padding: 28px 16px; box-shadow: var(--shadow-lg), var(--shadow-glow);
            border: 1px solid rgba(201,169,110,0.18);
            display: flex; flex-direction: column; align-items: center; gap: 22px;
            animation: Mepilo-asseen-cardIn 0.8s cubic-bezier(0.22,0.61,0.36,1) forwards;
            opacity: 0; animation-delay: 0.05s;
            transition: box-shadow 0.5s ease, transform 0.4s ease;
        }
        #Mepilo-asseen .Mepilo-asseen-card:hover {
            box-shadow: var(--shadow-xl), 0 0 60px rgba(253,142,3,0.08); transform: translateY(-1px);
        }
        @keyframes Mepilo-asseen-cardIn {
            from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }
        }

        /* 标题 - 移动端2.3rem，桌面端4.2rem，字重800 */
        #Mepilo-asseen .Mepilo-asseen-headline {
            font-family: var(--font-display);
            font-size: 2.3rem;          /* 移动端标题2.3rem */
            font-weight: 800;            /* 标题字重800 */
            font-style: normal;
            color: var(--text-dark);
            letter-spacing: -0.01em;
            line-height: 1.15;
            text-align: center;
            animation: Mepilo-asseen-fadeUp 0.7s cubic-bezier(0.22,0.61,0.36,1) forwards;
            opacity: 0; animation-delay: 0.15s;
        }
        #Mepilo-asseen .Mepilo-asseen-headline-accent {
            font-style: italic; color: #3a2a0a;
        }
        #Mepilo-asseen .Mepilo-asseen-headline-underline {
            display: inline-block; position: relative;
        }
        #Mepilo-asseen .Mepilo-asseen-headline-underline::after {
            content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 3px;
            background: rgba(253,142,3,0.28); border-radius: 2px;
        }

        /* 装饰分隔线 */
        #Mepilo-asseen .Mepilo-asseen-divider {
            display: flex; align-items: center; gap: 10px;
            animation: Mepilo-asseen-fadeUp 0.7s cubic-bezier(0.22,0.61,0.36,1) forwards;
            opacity: 0; animation-delay: 0.22s;
        }
        #Mepilo-asseen .Mepilo-asseen-divider-line {
            width: 28px; height: 1px; background: rgba(201,169,110,0.5); border-radius: 1px;
        }
        #Mepilo-asseen .Mepilo-asseen-divider-icon {
            font-size: 0.7rem; color: var(--gold); flex-shrink: 0;
            animation: Mepilo-asseen-starPulse 3s ease-in-out infinite;
        }
        @keyframes Mepilo-asseen-starPulse {
            0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.35); opacity: 1; }
        }
        @keyframes Mepilo-asseen-fadeUp {
            from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); }
        }

        /* 品牌标签网格 */
        #Mepilo-asseen .Mepilo-asseen-brands {
            display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; width: 100%;
        }

        /* 单个品牌标签 - 移动端最小1.05rem，桌面端1.15rem，字重600 */
        #Mepilo-asseen .Mepilo-asseen-brand-tag {
            display: inline-flex; align-items: center; gap: 7px;
            background: #fff; border: 1px solid rgba(201,169,110,0.25);
            border-radius: var(--radius-full); padding: 10px 17px;
            font-family: var(--font-body);
            font-size: 1.05rem;          /* 移动端最小1.05rem */
            font-weight: 600;            /* 正文描述字重600 */
            color: var(--text-mid);
            letter-spacing: 0.01em; white-space: nowrap;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
            transition: all 0.4s cubic-bezier(0.25,0.1,0.25,1);
            position: relative; cursor: default;
            animation: Mepilo-asseen-tagIn 0.55s cubic-bezier(0.22,0.61,0.36,1) forwards;
            opacity: 0; overflow: hidden;
        }
        #Mepilo-asseen .Mepilo-asseen-brand-tag::before {
            content: ''; position: absolute; inset: 0; border-radius: var(--radius-full);
            background: linear-gradient(135deg, transparent 40%, rgba(253,142,3,0.04) 60%, transparent 80%);
            pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
        }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:hover::before { opacity: 1; }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:nth-child(1) { animation-delay: 0.28s; }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:nth-child(2) { animation-delay: 0.36s; }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:nth-child(3) { animation-delay: 0.44s; }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:nth-child(4) { animation-delay: 0.52s; }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:nth-child(5) { animation-delay: 0.60s; }
        @keyframes Mepilo-asseen-tagIn {
            from { opacity: 0; transform: translateY(18px) scale(0.9); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md), 0 0 22px rgba(253,142,3,0.1);
            border-color: rgba(201,169,110,0.45); color: #2a1a0a; background: #FFFCF7;
        }
        #Mepilo-asseen .Mepilo-asseen-brand-dot {
            width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
            flex-shrink: 0; opacity: 0.7; transition: all 0.4s ease;
        }
        #Mepilo-asseen .Mepilo-asseen-brand-tag:hover .Mepilo-asseen-brand-dot {
            background: var(--brand); opacity: 1; box-shadow: 0 0 8px rgba(253,142,3,0.4); transform: scale(1.3);
        }
        #Mepilo-asseen .Mepilo-asseen-brand-name {
            font-weight: 600; letter-spacing: 0.02em;
        }

        /* 卡片底部微光 */
        #Mepilo-asseen .Mepilo-asseen-card::after {
            content: ''; position: absolute; bottom: 0; left: 8%; right: 8%; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(253,142,3,0.2), rgba(201,169,110,0.15), transparent);
            pointer-events: none; z-index: 1; border-radius: 0 0 50% 50%; opacity: 0.5;
        }

        /* ============ 响应式：768px+ 桌面端 ============ */
        @media (min-width: 768px) {
            #Mepilo-asseen { padding: 60px 28px; }
            #Mepilo-asseen .Mepilo-asseen-card { padding: 36px 28px; gap: 26px; }
            #Mepilo-asseen .Mepilo-asseen-headline {
                font-size: 4.2rem;       /* 桌面端标题4.2rem */
                letter-spacing: -0.015em;
            }
            #Mepilo-asseen .Mepilo-asseen-divider-line { width: 40px; }
            #Mepilo-asseen .Mepilo-asseen-divider { gap: 14px; }
            #Mepilo-asseen .Mepilo-asseen-divider-icon { font-size: 0.8rem; }
            #Mepilo-asseen .Mepilo-asseen-brands { gap: 14px; }
            #Mepilo-asseen .Mepilo-asseen-brand-tag {
                padding: 12px 22px;
                font-size: 1.15rem;      /* 桌面端最小1.15rem */
                gap: 9px;
            }
            #Mepilo-asseen .Mepilo-asseen-brand-dot { width: 6px; height: 6px; }
            #Mepilo-asseen .Mepilo-asseen-orb--top { width: 380px; height: 380px; top: -140px; right: -90px; }
            #Mepilo-asseen .Mepilo-asseen-orb--mid { width: 260px; height: 260px; top: 35%; left: -90px; }
            #Mepilo-asseen .Mepilo-asseen-orb--bottom { width: 220px; height: 220px; bottom: -60px; right: 12%; }
            #Mepilo-asseen .Mepilo-asseen-geo--1 { width: 320px; height: 320px; top: -80px; left: -100px; }
            #Mepilo-asseen .Mepilo-asseen-geo--2 { width: 180px; height: 180px; bottom: 10%; right: -50px; }
        }

        @media (min-width: 1024px) {
            #Mepilo-asseen { padding: 70px 36px; }
            #Mepilo-asseen .Mepilo-asseen-card { padding: 40px 34px; gap: 28px; }
            #Mepilo-asseen .Mepilo-asseen-brands { gap: 16px; }
            #Mepilo-asseen .Mepilo-asseen-brand-tag {
                padding: 13px 24px;
                font-size: 1.2rem;       /* 略大于1.15rem，保持优雅 */
                gap: 10px;
            }
            #Mepilo-asseen .Mepilo-asseen-brand-dot { width: 7px; height: 7px; }
        }

        @media (max-width: 400px) {
            #Mepilo-asseen { padding: 30px 8px; }
            #Mepilo-asseen .Mepilo-asseen-card { padding: 20px 10px; gap: 16px; }
            #Mepilo-asseen .Mepilo-asseen-headline { font-size: 2.3rem; } /* 保持移动端最小值 */
            #Mepilo-asseen .Mepilo-asseen-brands { gap: 7px; }
            #Mepilo-asseen .Mepilo-asseen-brand-tag {
                padding: 8px 13px;
                font-size: 1.05rem;      /* 保持移动端最小值 */
                gap: 5px;
            }
            #Mepilo-asseen .Mepilo-asseen-brand-dot { width: 4px; height: 4px; }
            #Mepilo-asseen .Mepilo-asseen-divider-line { width: 20px; }
            #Mepilo-asseen .Mepilo-asseen-divider { gap: 7px; }
        }



.section-template--29687139008593__custom_liquid_kdirBY-padding {
            padding-top: calc(40px * 0.75);
            padding-bottom: calc(0px * 0.75);
        }
        @media screen and (min-width: 750px) {
            .section-template--29687139008593__custom_liquid_kdirBY-padding {
                padding-top: 40px;
                padding-bottom: 0px;
            }
        }

.sv-ugc-stack {
                        --sv-brand: #fd8e03;
                        --sv-text-dark: #0f2a43;
                        --sv-text-sub: #6b7c93;
                        --sv-radius-xl: 28px;
                        --sv-radius-lg: 20px;
                        --sv-radius-sm: 12px;
                        --sv-shadow-card: 0 3px 16px rgba(0,0,0,0.055);
                        --sv-shadow-hover: 0 12px 34px rgba(0,0,0,0.11), 0 0 0 2px rgba(253,142,3,0.14);
                        --sv-shadow-top: 0 22px 52px rgba(0,0,0,0.18), 0 0 0 3px rgba(253,142,3,0.28);
                        --sv-trans-bounce: cubic-bezier(0.34,1.56,0.64,1);
                        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
                        max-width: 1200px;
                        margin: 0 auto;
                        padding: 36px 14px 32px;
                        position: relative;
                        isolation: isolate;
                        -webkit-font-smoothing: antialiased;
                    }
                    .sv-ugc-stack__bg {
                        position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; border-radius: 60px;
                    }
                    .sv-ugc-stack__orb {
                        position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.24;
                        animation: svOrbFloat 9s ease-in-out infinite;
                    }
                    .sv-ugc-stack__orb--1 {
                        width: 240px; height: 240px;
                        background: radial-gradient(circle, rgba(253,142,3,0.13) 0%, transparent 70%);
                        top: -50px; right: -50px;
                    }
                    .sv-ugc-stack__orb--2 {
                        width: 180px; height: 180px;
                        background: radial-gradient(circle, rgba(201,169,110,0.10) 0%, transparent 70%);
                        bottom: -30px; left: -30px;
                        animation-delay: -4s; animation-duration: 10s;
                    }
                    .sv-ugc-stack__orb--3 {
                        width: 130px; height: 130px;
                        background: radial-gradient(circle, rgba(253,142,3,0.07) 0%, transparent 70%);
                        top: 50%; left: 50%; transform: translate(-50%, -50%);
                        animation-delay: -2s; animation-duration: 8s; filter: blur(70px); opacity: 0.18;
                    }
                    @keyframes svOrbFloat {
                        0%,100%{ transform: translate(0,0) scale(1); }
                        25%{ transform: translate(14px,-18px) scale(1.05); }
                        50%{ transform: translate(-9px,10px) scale(0.94); }
                        75%{ transform: translate(-16px,-4px) scale(1.03); }
                    }
                    .sv-ugc-stack__dots {
                        position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.11;
                        background-image: radial-gradient(circle, rgba(160,140,110,0.5) 1px, transparent 1px);
                        background-size: 16px 16px;
                        mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 16%, transparent 66%);
                        -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 16%, transparent 66%);
                    }

                    .sv-ugc-stack__header {
                        text-align: center; margin-bottom: 22px; position: relative; z-index: 1;
                    }
                    .sv-ugc-stack__label {
                        display: inline-flex; align-items: center; gap: 7px;
                        font-size: 0.7rem; letter-spacing: 2.5px; color: var(--sv-text-sub);
                        text-transform: uppercase; font-weight: 500;
                        background: rgba(253,142,3,0.04); padding: 5px 13px; border-radius: 30px;
                        border: 1px solid rgba(253,142,3,0.10);
                        opacity: 0; transform: translateY(10px);
                        transition: opacity 0.6s ease, transform 0.6s ease;
                    }
                    .sv-ugc-stack__label.visible { opacity: 1; transform: translateY(0); }
                    .sv-ugc-stack__label-dot {
                        width: 5px; height: 5px; border-radius: 50%; background: var(--sv-brand);
                        animation: svPulseDot 2s ease-in-out infinite;
                    }
                    @keyframes svPulseDot {
                        0%,100%{ box-shadow: 0 0 0 0 rgba(253,142,3,0.4); }
                        50%{ box-shadow: 0 0 0 6px rgba(253,142,3,0); }
                    }
                    .sv-ugc-stack__title {
                        font-size: 1.85rem; font-weight: 700; margin-top: 10px;
                        color: var(--sv-text-dark); letter-spacing: -0.3px; line-height: 1.2;
                        max-width: 380px; margin-left: auto; margin-right: auto;
                        opacity: 0; transform: translateY(12px);
                        transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
                    }
                    .sv-ugc-stack__title.visible { opacity: 1; transform: translateY(0); }
                    .sv-ugc-stack__highlight {
                        background: linear-gradient(180deg, transparent 55%, rgba(253,142,3,0.2) 55%);
                        padding: 0 3px;
                    }

                    .sv-ugc-stack__content {
                        position: relative; z-index: 1; max-width: 640px;
                        margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
                    }

                    /* HERO */
                    .sv-ugc-stack__hero {
                        position: relative; overflow: hidden;
                        border-radius: var(--sv-radius-xl); background: #f5f7fb;
                        cursor: pointer; box-shadow: var(--sv-shadow-card);
                        aspect-ratio: 4 / 3;
                        z-index: 1; opacity: 0; transform: translateY(20px);
                        transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease;
                        will-change: transform, z-index;
                    }
                    .sv-ugc-stack__hero.visible { opacity: 1; transform: translateY(0); }
                    .sv-ugc-stack__hero img {
                        width: 100%; height: 100%; object-fit: cover; display: block;
                    }
                    .sv-ugc-stack__hero::before {
                        content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
                        background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.015) 78%, rgba(0,0,0,0.05) 100%);
                        border-radius: inherit; opacity: 0.5;
                    }

                    /* 四图容器 */
                    .sv-ugc-stack__quad {
                        position: relative; aspect-ratio: 1 / 1.25;
                    }

                    /* 卡片通用样式 */
                    .sv-ugc-stack__card {
                        position: absolute; overflow: hidden;
                        background: #f5f7fb; cursor: pointer;
                        box-shadow: var(--sv-shadow-card);
                        opacity: 0; transition: opacity 0.6s ease, box-shadow 0.4s ease;
                        will-change: transform, z-index;
                    }
                    .sv-ugc-stack__card.visible { opacity: 1; }
                    .sv-ugc-stack__card img {
                        width: 100%; height: 100%; object-fit: cover; display: block;
                    }
                    .sv-ugc-stack__card::before {
                        content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
                        background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.015) 78%, rgba(0,0,0,0.05) 100%);
                        border-radius: inherit; opacity: 0.5;
                    }

                    /* 四张图位置 */
                    .sv-ugc-stack__card--tall {
                        top: 0; left: 0; width: 53%;
                        aspect-ratio: 3 / 4; z-index: 2;
                        border-radius: var(--sv-radius-sm);
                    }
                    .sv-ugc-stack__card--wide {
                        top: 0; right: 0; width: 53%;
                        aspect-ratio: 4 / 3; z-index: 3;
                        border-radius: var(--sv-radius-lg);
                    }
                    .sv-ugc-stack__card--square {
                        bottom: 0; left: 0; width: 50%;
                        aspect-ratio: 1 / 1; z-index: 4;
                        border-radius: var(--sv-radius-sm);
                    }
                    .sv-ugc-stack__card--portrait {
                        bottom: 0; right: 0; width: 50%;
                        aspect-ratio: 2 / 3; z-index: 5;
                        border-radius: 20px;
                    }

                    /* 光点 */
                    .sv-ugc-stack__glow {
                        position: absolute; width: 5px; height: 5px; border-radius: 50%;
                        background: var(--sv-brand); pointer-events: none; z-index: 3;
                        opacity: 0; box-shadow: 0 0 0 0 rgba(253,142,3,0.4);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    .sv-ugc-stack__glow--tl { top: 7px; left: 7px; }
                    .sv-ugc-stack__glow--tr { top: 7px; right: 7px; }
                    .sv-ugc-stack__glow--br { bottom: 7px; right: 7px; }

                    @media (min-width: 768px) {
                        .sv-ugc-stack { padding: 56px 22px 44px; }
                        .sv-ugc-stack__header { margin-bottom: 30px; }
                        .sv-ugc-stack__label { font-size: 0.75rem; letter-spacing: 3px; }
                        .sv-ugc-stack__title { font-size: 2.5rem; max-width: 520px; margin-top: 12px; }
                        .sv-ugc-stack__content {
                            flex-direction: row; align-items: stretch; max-width: 100%; gap: 0;
                        }
                        .sv-ugc-stack__hero {
                            flex: 0 0 44%; aspect-ratio: 3 / 4.2; margin-right: 0; z-index: 2;
                        }
                        .sv-ugc-stack__quad {
                            flex: 1; aspect-ratio: 1 / 1.1; margin-left: -8%;
                        }
                        .sv-ugc-stack__card--tall { top: 0; left: 0; width: 52%; z-index: 3; }
                        .sv-ugc-stack__card--wide { top: 0; right: 0; width: 54%; z-index: 4; }
                        .sv-ugc-stack__card--square { bottom: 0; left: 0; width: 48%; z-index: 5; }
                        .sv-ugc-stack__card--portrait { bottom: 0; right: 0; width: 48%; z-index: 6; }
                    }

                    @media (min-width: 1024px) {
                        .sv-ugc-stack { padding: 64px 24px 48px; }
                        .sv-ugc-stack__title { font-size: 2.7rem; }
                        .sv-ugc-stack__hero { flex: 0 0 42%; }
                    }

                    @media (prefers-reduced-motion: reduce) {
                        .sv-ugc-stack * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
                    }