/* ==========================================================================

   brand.css · trackandreact.com

   品牌体验系统 — 品牌记忆点/品牌声音/品牌语气

   生成者：Crystal Yifei Liu · 2026-09-25

   依赖：tokens.css, core.css

   品牌性格：务实 / 可信 / 直接 / 省钱

   ========================================================================== */



/* ==========================================================================

   一、品牌记忆点 · 核心

   ========================================================================== */



/* --- 品牌签名圆角（全站统一，但略有变化） --- */

.brand-card {

  border-radius: var(--brand-signature-radius);

  transition: all var(--duration-normal) var(--brand-signature-transition);

}



.brand-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-lg);

}



/* --- 品牌签名渐变（用于特殊强调区域） --- */

.brand-gradient {

  background: var(--brand-signature-gradient);

  color: hsl(0, 0%, 100%);

}



.brand-gradient-text {

  background: var(--brand-signature-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}



/* --- 品牌签名预算条（首页第一视觉焦点） --- */

.brand-budget-bar {

  background: var(--brand-signature-budget-bar);

  border-radius: var(--brand-signature-radius);

  padding: var(--space-5);

  color: hsl(0, 0%, 100%);

  position: relative;

  overflow: hidden;

}



.brand-budget-bar::before {

  content: '';

  position: absolute;

  top: -50%;

  right: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 70%);

  animation: budgetBarGlow 8s var(--ease-in-out) infinite;

  pointer-events: none;

}



@keyframes budgetBarGlow {

  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }

  50% { transform: translate(-5%, -5%) scale(1.1); opacity: 0.8; }

}



/* ==========================================================================

   二、品牌记忆点 · 无月费标签系统

   ========================================================================== */



.brand-no-fee {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  padding: var(--space-1) var(--space-3);

  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));

  color: hsl(0, 0%, 100%);

  font-size: var(--text-xs);

  font-weight: var(--font-bold);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wider);

  border-radius: var(--radius-full);

  box-shadow: 0 2px 4px var(--color-accent-alpha-20);

  position: relative;

  overflow: hidden;

}



.brand-no-fee::before {

  content: '✓ ';

  font-weight: var(--font-bold);

}



.brand-no-fee::after {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);

  animation: noFeeShine 3s var(--ease-in-out) infinite;

}



@keyframes noFeeShine {

  0% { left: -100%; }

  50%, 100% { left: 100%; }

}



/* --- 月费标签（对照） --- */

.brand-monthly-fee {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  padding: var(--space-1) var(--space-3);

  background-color: var(--color-warning);

  color: hsl(0, 0%, 100%);

  font-size: var(--text-xs);

  font-weight: var(--font-semibold);

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

}



.brand-monthly-fee::before {

  content: '↻ ';

}



/* ==========================================================================

   三、品牌记忆点 · DHgate 批发标签

   ========================================================================== */



.brand-dhgate {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-2) var(--space-4);

  background: linear-gradient(135deg,

    var(--color-accent-alpha-20),

    var(--color-primary-alpha-10));

  border: 1px solid var(--color-accent-300);

  border-radius: var(--radius-md);

  color: var(--color-accent-700);

  font-size: var(--text-sm);

  font-weight: var(--font-semibold);

  text-decoration: none;

  transition: all var(--duration-normal) var(--ease-out);

}



.brand-dhgate::before {

  content: '🏭 ';

  font-size: var(--text-base);

}



.brand-dhgate:hover {

  border-color: var(--color-accent-500);

  box-shadow: var(--shadow-sm);

  transform: translateX(2px);

  text-decoration: none;

  color: var(--color-accent-700);

}



/* ==========================================================================

   四、品牌声音 · CTA按钮

   ========================================================================== */



.brand-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  padding: var(--space-4) var(--space-6);

  background-color: var(--color-cta-bg);

  color: var(--color-cta-text);

  font-size: var(--text-base);

  font-weight: var(--font-semibold);

  border-radius: var(--brand-signature-radius);

  text-decoration: none;

  box-shadow: var(--shadow-md);

  transition: all var(--duration-normal) var(--brand-signature-transition);

  position: relative;

  overflow: hidden;

  min-height: 48px;

}



.brand-cta::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.2), transparent);

  transition: left var(--duration-slower) var(--ease-out);

}



.brand-cta:hover {

  background-color: var(--color-cta-hover);

  color: var(--color-cta-text);

  box-shadow: var(--shadow-lg);

  transform: translateY(-2px);

  text-decoration: none;

}



.brand-cta:hover::before {

  left: 100%;

}



.brand-cta:active {

  transform: translateY(0) scale(0.98);

}



.brand-cta-text {

  position: relative;

  z-index: 1;

}



.brand-cta-arrow {

  display: inline-block;

  transition: transform var(--duration-normal) var(--ease-spring);

}



.brand-cta:hover .brand-cta-arrow {

  transform: translateX(4px);

}



/* --- 品牌CTA话术：筛选列表类（禁止"Buy Now"） --- */

.brand-cta-filtered::after {

  content: ' →';

}



/* --- DHgate备选CTA --- */

.brand-cta-dhgate {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-3) var(--space-5);

  background-color: transparent;

  color: var(--color-accent-700);

  font-size: var(--text-sm);

  font-weight: var(--font-semibold);

  border: 2px solid var(--color-accent-500);

  border-radius: var(--brand-signature-radius);

  text-decoration: none;

  transition: all var(--duration-normal) var(--brand-signature-transition);

  min-height: 44px;

}



.brand-cta-dhgate:hover {

  background-color: var(--color-accent-50);

  transform: translateY(-1px);

  box-shadow: var(--shadow-sm);

  text-decoration: none;

  color: var(--color-accent-700);

}



.brand-cta-dhgate-note {

  display: block;

  margin-top: var(--space-2);

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  line-height: var(--leading-snug);

  font-style: italic;

}



/* ==========================================================================

   五、品牌声音 · 筛选列表价值包装段

   ========================================================================== */



.brand-filter-value {

  padding: var(--space-5);

  margin: var(--rhythm-normal) 0;

  background-color: var(--color-primary-alpha-10);

  border-left: 4px solid var(--color-primary-500);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

}



.brand-filter-value::before {

  content: '🔍 ';

  font-size: var(--text-base);

}



.brand-filter-value strong {

  color: var(--color-text-primary);

}



/* ==========================================================================

   六、品牌声音 · 空状态 / 错误提示 / 加载提示

   ========================================================================== */



.brand-empty {

  text-align: center;

  padding: var(--rhythm-silence) var(--space-4);

}



.brand-empty::before {

  content: '📍';

  display: block;

  font-size: 3rem;

  margin-bottom: var(--space-4);

  opacity: 0.5;

}



.brand-empty-text {

  font-size: var(--text-lg);

  color: var(--color-text-secondary);

  margin-bottom: var(--space-4);

}



.brand-empty-cta {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  color: var(--color-primary-600);

  font-weight: var(--font-semibold);

  text-decoration: none;

}



.brand-empty-cta:hover {

  text-decoration: underline;

}



.brand-empty-cta::after {

  content: ' →';

}



/* --- 错误提示 --- */

.brand-error {

  padding: var(--space-4);

  background-color: hsl(0, 70%, 97%);

  border-left: 4px solid var(--color-error);

  border-radius: var(--radius-md);

  color: var(--color-text-primary);

}



.brand-error::before {

  content: '⚠️ ';

}



/* --- 加载提示 --- */

.brand-loading {

  text-align: center;

  padding: var(--rhythm-loose);

  color: var(--color-text-tertiary);

  font-size: var(--text-sm);

}



.brand-loading::after {

  content: '';

  display: inline-block;

  width: 16px;

  height: 16px;

  margin-left: var(--space-2);

  border: 2px solid var(--color-neutral-300);

  border-top-color: var(--color-primary-500);

  border-radius: var(--radius-full);

  animation: spin 0.8s linear infinite;

  vertical-align: middle;

}



/* ==========================================================================

   七、品牌记忆点 · 作者签名区

   ========================================================================== */



.brand-author-signature {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  padding: var(--space-5);

  margin: var(--rhythm-silence) 0 var(--rhythm-loose);

  background: linear-gradient(135deg,

    var(--color-surface) 0%,

    var(--color-neutral-50) 100%);

  border: 1px solid var(--color-border);

  border-radius: var(--brand-signature-radius);

  position: relative;

  overflow: hidden;

}



.brand-author-signature::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 4px;

  height: 100%;

  background: var(--brand-signature-gradient);

}



.brand-author-signature .author-avatar {

  flex-shrink: 0;

  width: 64px;

  height: 64px;

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  color: hsl(0, 0%, 100%);

  font-weight: var(--font-bold);

  font-size: 28px;

  box-shadow: var(--shadow-md);

  border: 2px solid var(--color-surface);

}



.brand-author-name {

  font-size: var(--text-lg);

  font-weight: var(--font-bold);

  color: var(--color-text-primary);

  margin-bottom: var(--space-1);

  letter-spacing: var(--tracking-tight);

}



.brand-author-bio {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-snug);

  margin-bottom: var(--space-2);

}



.brand-author-conflict {

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  line-height: var(--leading-snug);

  padding-top: var(--space-2);

  border-top: 1px dashed var(--color-border);

}



/* ==========================================================================

   八、品牌记忆点 · 判断框架卡片

   ========================================================================== */



.brand-framework {

  padding: var(--space-5) var(--space-6);

  margin: var(--rhythm-loose) 0;

  background: linear-gradient(135deg,

    var(--color-primary-alpha-10),

    var(--color-accent-alpha-10));

  border-left: 4px solid var(--color-primary-500);

  border-radius: var(--brand-signature-radius);

  position: relative;

}



.brand-framework::before {

  content: '🧭';

  position: absolute;

  top: var(--space-4);

  right: var(--space-4);

  font-size: 1.5rem;

  opacity: 0.4;

}



.brand-framework h3 {

  font-size: var(--text-lg);

  margin-top: 0;

  margin-bottom: var(--space-3);

  color: var(--color-primary-700);

}



.brand-framework p {

  font-size: var(--text-base);

  color: var(--color-text-primary);

  line-height: var(--leading-relaxed);

}



/* ==========================================================================

   九、品牌记忆点 · 探索钩子（强化版）

   ========================================================================== */



.brand-exploration-hook {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  padding: var(--space-4) var(--space-5);

  margin: var(--rhythm-loose) 0;

  background: linear-gradient(135deg,

    var(--color-accent-alpha-10),

    var(--color-primary-alpha-10));

  border: 2px solid var(--color-accent-300);

  border-radius: var(--brand-signature-radius);

  text-decoration: none;

  color: var(--color-text-primary);

  position: relative;

  overflow: hidden;

  transition: all var(--duration-normal) var(--brand-signature-transition);

}



.brand-exploration-hook::before {

  content: '🔍';

  font-size: var(--text-xl);

  flex-shrink: 0;

  animation: explorePulse 3s var(--ease-in-out) infinite;

}



@keyframes explorePulse {

  0%, 100% { transform: scale(1); opacity: 0.8; }

  50% { transform: scale(1.15); opacity: 1; }

}



.brand-exploration-hook::after {

  content: '→';

  margin-left: auto;

  color: var(--color-accent-600);

  font-weight: var(--font-bold);

  font-size: var(--text-lg);

  transition: transform var(--duration-normal) var(--ease-spring);

  flex-shrink: 0;

}



.brand-exploration-hook:hover {

  border-color: var(--color-accent-500);

  box-shadow: var(--shadow-md);

  transform: translateY(-3px);

  text-decoration: none;

  color: var(--color-text-primary);

}



.brand-exploration-hook:hover::after {

  transform: translateX(6px);

}



.brand-exploration-hook-text {

  font-size: var(--text-base);

  font-weight: var(--font-semibold);

  line-height: var(--leading-snug);

}



/* ==========================================================================

   十、品牌记忆点 · 首页探索入口

   ========================================================================== */



.brand-exploration-entry {

  padding: var(--rhythm-loose) var(--space-6);

  margin: var(--rhythm-loose) 0;

  background: linear-gradient(135deg,

    var(--color-accent-alpha-20),

    var(--color-primary-alpha-20));

  border: 2px solid var(--color-accent-300);

  border-radius: var(--radius-2xl);

  position: relative;

  overflow: hidden;

  text-align: center;

}



.brand-exploration-entry::before {

  content: '🔒';

  display: block;

  font-size: 3rem;

  margin-bottom: var(--space-3);

}



.brand-exploration-entry::after {

  content: '';

  position: absolute;

  top: -50%;

  right: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle, var(--color-accent-alpha-10) 0%, transparent 60%);

  animation: exploreEntryGlow 10s var(--ease-in-out) infinite;

  pointer-events: none;

}



@keyframes exploreEntryGlow {

  0%, 100% { transform: translate(0, 0); opacity: 0.5; }

  50% { transform: translate(-10%, -10%); opacity: 0.9; }

}



.brand-exploration-entry h3 {

  font-size: var(--text-2xl);

  margin-top: 0;

  margin-bottom: var(--space-3);

  color: var(--color-accent-700);

  position: relative;

  z-index: 1;

}



.brand-exploration-entry p {

  font-size: var(--text-base);

  color: var(--color-text-secondary);

  margin-bottom: var(--space-4);

  position: relative;

  z-index: 1;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



.brand-exploration-entry .brand-cta {

  position: relative;

  z-index: 1;

}



/* ==========================================================================

   十一、品牌记忆点 · 对比表格的"省钱"高亮

   ========================================================================== */



.brand-cost-highlight {

  position: relative;

  background-color: var(--color-accent-alpha-10);

  border-left: 4px solid var(--color-accent-500);

  padding: var(--space-4) var(--space-5);

  border-radius: var(--radius-md);

  margin: var(--rhythm-normal) 0;

}



.brand-cost-highlight::before {

  content: '💰 ';

  font-size: var(--text-lg);

}



.brand-cost-highlight strong {

  color: var(--color-accent-700);

}



/* --- 成本计算框 --- */

.brand-cost-calculator {

  padding: var(--space-5);

  margin: var(--rhythm-loose) 0;

  background: linear-gradient(135deg,

    var(--color-accent-alpha-10),

    var(--color-primary-alpha-10));

  border: 2px solid var(--color-accent-200);

  border-radius: var(--brand-signature-radius);

}



.brand-cost-calculator h3 {

  margin-top: 0;

  margin-bottom: var(--space-3);

  color: var(--color-accent-700);

  font-size: var(--text-lg);

}



.brand-cost-calculator h3::before {

  content: '🧮 ';

}



/* ==========================================================================

   十二、品牌记忆点 · 预算导航条（首页核心）

   ========================================================================== */



.brand-budget-nav {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--space-3);

  margin: var(--rhythm-loose) 0;

}



.brand-budget-nav-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  padding: var(--space-5) var(--space-3);

  background: var(--brand-signature-budget-bar);

  color: hsl(0, 0%, 100%);

  border-radius: var(--brand-signature-radius);

  text-decoration: none;

  font-weight: var(--font-semibold);

  text-align: center;

  min-height: 100px;

  position: relative;

  overflow: hidden;

  transition: all var(--duration-normal) var(--brand-signature-transition);

  box-shadow: var(--shadow-sm);

}



.brand-budget-nav-item::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.2), transparent);

  transition: left var(--duration-slower) var(--ease-out);

}



.brand-budget-nav-item:hover {

  transform: translateY(-4px) scale(1.02);

  box-shadow: var(--shadow-xl);

  text-decoration: none;

  color: hsl(0, 0%, 100%);

}



.brand-budget-nav-item:hover::before {

  left: 100%;

}



.brand-budget-nav-item .budget-range {

  font-size: var(--text-2xl);

  font-weight: var(--font-bold);

  line-height: var(--leading-tight);

}



.brand-budget-nav-item .budget-label {

  font-size: var(--text-xs);

  opacity: 0.9;

  text-transform: uppercase;

  letter-spacing: var(--tracking-wider);

}



/* ==========================================================================

   十三、品牌记忆点 · 卡片评分可视化

   ========================================================================== */



.brand-score-display {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-1) var(--space-3);

  background-color: var(--color-primary-50);

  border-radius: var(--radius-full);

  text-decoration: none;

  font-weight: var(--font-semibold);

  font-size: var(--text-sm);

  transition: all var(--duration-fast) var(--ease-out);

}



.brand-score-display:hover {

  background-color: var(--color-primary-100);

  transform: scale(1.05);

  text-decoration: none;

}



.brand-score-stars {

  color: var(--color-warning);

  letter-spacing: -2px;

  font-size: var(--text-sm);

}



.brand-score-number {

  color: var(--color-primary-700);

  font-weight: var(--font-bold);

}



.brand-score-max {

  color: var(--color-text-tertiary);

  font-size: var(--text-xs);

}



/* ==========================================================================

   十四、品牌记忆点 · "小车队"标签

   ========================================================================== */



.brand-small-fleet {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  padding: var(--space-1) var(--space-3);

  background-color: var(--color-primary-100);

  color: var(--color-primary-700);

  font-size: var(--text-xs);

  font-weight: var(--font-semibold);

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

}



.brand-small-fleet::before {

  content: '🚚 ';

}



/* ==========================================================================

   十五、品牌语气 · CTA话术辅助类

   ========================================================================== */



/* --- "我筛过了"话术 --- */

.brand-voice-filtered {

  font-style: italic;

  color: var(--color-text-secondary);

  position: relative;

  padding-left: var(--space-4);

}



.brand-voice-filtered::before {

  content: '“';

  position: absolute;

  left: 0;

  top: -0.1em;

  font-size: 1.5em;

  color: var(--color-primary-300);

  font-family: var(--font-serif);

}



/* --- "不买也行"推开声明 --- */

.brand-voice-pushback {

  padding: var(--space-4);

  background-color: var(--color-neutral-50);

  border-left: 3px solid var(--color-neutral-400);

  border-radius: var(--radius-sm);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

}



.brand-voice-pushback::before {

  content: '🛑 ';

  font-size: var(--text-base);

}



/* --- "说实话"诚实声明 --- */

.brand-voice-honest {

  padding: var(--space-3) var(--space-4);

  background-color: var(--color-warning);

  background: linear-gradient(135deg, hsl(40, 90%, 97%), hsl(40, 90%, 93%));

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  color: var(--color-text-primary);

  line-height: var(--leading-relaxed);

}



.brand-voice-honest::before {

  content: '💬 ';

}



/* ==========================================================================

   十六、品牌记忆点 · Logo文字

   ========================================================================== */



.brand-logo-text {

  font-family: var(--font-display);

  font-weight: var(--font-bold);

  letter-spacing: var(--tracking-tight);

  color: var(--color-text-primary);

  display: inline-flex;

  align-items: baseline;

  gap: 2px;

}



.brand-logo-text .brand-logo-track {

  color: var(--color-primary-600);

}



.brand-logo-text .brand-logo-and {

  color: var(--color-text-tertiary);

  font-weight: var(--font-normal);

  font-size: 0.85em;

}



.brand-logo-text .brand-logo-react {

  color: var(--color-accent-600);

}



/* ==========================================================================

   十七、品牌记忆点 · favicon辅助

   ========================================================================== */



/* favicon由各页面<head>内联SVG data URI提供 */

.favicon-svg {

  width: 32px;

  height: 32px;

  display: block;

}



/* ==========================================================================

   十八、品牌记忆点 · 节日/季节性元素（可选）

   ========================================================================== */



/* --- Black Friday / Prime Day 促销高亮 --- */

.brand-promo {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-2) var(--space-4);

  background: linear-gradient(135deg, hsl(0, 80%, 55%), hsl(30, 90%, 55%));

  color: hsl(0, 0%, 100%);

  font-size: var(--text-sm);

  font-weight: var(--font-bold);

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

  box-shadow: var(--shadow-md);

  animation: promoPulse 2s var(--ease-in-out) infinite;

}



@keyframes promoPulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.03); }

}



.brand-promo::before {

  content: '🔥 ';

}



/* ==========================================================================

   十九、移动端品牌体验适配

   ========================================================================== */



@media (max-width: 768px) {

  .brand-budget-nav {

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

  }



  .brand-budget-nav-item {

    min-height: 80px;

    padding: var(--space-4) var(--space-2);

  }



  .brand-budget-nav-item .budget-range {

    font-size: var(--text-xl);

  }



  .brand-author-signature {

    flex-direction: column;

    text-align: center;

  }



  .brand-author-signature::before {

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 4px;

  }



  .brand-exploration-entry {

    padding: var(--rhythm-normal) var(--space-4);

  }



  .brand-exploration-entry::before {

    font-size: 2rem;

  }



  .brand-exploration-entry h3 {

    font-size: var(--text-xl);

  }



  .brand-cta {

    width: 80%;

    min-width: 80%;

    margin-left: auto;

    margin-right: auto;

  }

}



@media (max-width: 480px) {

  .brand-budget-nav {

    grid-template-columns: 1fr;

  }

}



/* ==========================================================================

   二十、减少动效偏好

   ========================================================================== */



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

  .brand-budget-bar::before,

  .brand-no-fee::after,

  .brand-cta::before,

  .brand-exploration-hook::before,

  .brand-exploration-entry::after,

  .brand-promo,

  .brand-budget-nav-item::before {

    animation: none;

  }



  .brand-cta:hover,

  .brand-budget-nav-item:hover,

  .brand-exploration-hook:hover {

    transform: none;

  }

}



/* ==========================================================================

   brand.css 结束

   ========================================================================== */