﻿/* ============================================================
   易路行 E-LUXURY — 主样式表
   暗黑商务风  |  黑 / 金 / 银
   ============================================================ */

/* ============================================================
   易路行 E-LUXURY — 单文件门户
   暗黑商务风  |  黑 / 金 / 银
   ============================================================ */

:root{
  --black-deep:   #0A0A0A;
  --black-soft:   #131313;
  --black-card:   #161616;
  --black-line:   #1F1F1F;
  --gold:         #C9A96E;
  --gold-bright:  #E8C988;
  --gold-deep:    #8A6E3E;
  --silver:       #A0AAB5;
  --silver-dim:   #6E7680;
  --silver-fade:  #4A5058;
  --text-faint:   #8A8F95;
  --serif-cn:     'Noto Serif SC', 'Songti SC', serif;
  --sans-cn:      'Noto Sans SC', 'PingFang SC', sans-serif;
  --serif-en:     'Cormorant Garamond', 'Times New Roman', serif;
  --sans-en:      'Jost', 'Helvetica Neue', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black-deep);
  color:#E8E8EA;
  font-family:var(--sans-cn),var(--sans-en);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--gold);color:#0A0A0A;}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ====== 全局装饰背景：极淡的金色光晕 ====== */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,169,110,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(201,169,110,0.03), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* ============================================================
   1. Header 顶部导航栏
   ============================================================ */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:22px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(10,10,10,0.55);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(201,169,110,0.08);
  transition:padding 0.4s ease, background 0.4s ease;
}
.header.scrolled{
  padding:16px 56px;
  background:rgba(8,8,8,0.85);
}
/* 金色流光扫描线 */
.header::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 20%,
    var(--gold) 50%,
    transparent 80%,
    transparent 100%);
  background-size:200% 100%;
  background-position:-50% 0;
  opacity:0;
  animation:flowLine 5s linear infinite;
  transition:opacity 0.4s ease;
}
.header.scrolled::after{opacity:0.9;}
@keyframes flowLine{
  0%   { background-position:-50% 0; }
  100% { background-position:150% 0; }
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 30% 30%, rgba(201,169,110,0.18), transparent 70%);
}
.brand-mark::before{
  content:'易';
  font-family:var(--serif-cn);
  font-size:18px;
  font-weight:500;
  color:var(--gold);
  letter-spacing:0;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-cn{
  font-family:var(--serif-cn);
  font-size:18px;
  font-weight:500;
  color:#F0E6D2;
  letter-spacing:6px;
}
.brand-en{
  font-family:var(--serif-en);
  font-size:11px;
  font-weight:400;
  color:var(--gold);
  letter-spacing:5px;
  text-transform:uppercase;
  margin-top:2px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:36px;
}
.nav-link{
  font-family:var(--sans-cn);
  font-size:13px;
  font-weight:300;
  color:#C8C8CC;
  letter-spacing:4px;
  position:relative;
  padding:6px 0;
  cursor:pointer;
  transition:color 0.3s ease;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition:width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nav-link:hover{color:var(--gold);}
.nav-link:hover::after{width:100%;}

.butler-entry{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 22px;
  border:1px solid rgba(201,169,110,0.4);
  border-radius:2px;
  font-family:var(--sans-cn);
  font-size:12px;
  font-weight:400;
  color:var(--gold);
  letter-spacing:4px;
  cursor:pointer;
  transition:all 0.4s ease;
  background:rgba(201,169,110,0.04);
}
.butler-entry:hover{
  background:rgba(201,169,110,0.12);
  border-color:var(--gold);
  box-shadow:0 0 24px rgba(201,169,110,0.25);
}
.butler-entry svg{width:14px;height:14px;}

/* ============================================================
   2. Hero 首屏
   ============================================================ */
.hero{
  position:relative;
  height:100vh;
  min-height:720px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, #181818 0%, #0A0A0A 70%);
}
#particles-canvas{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  z-index:1;
  pointer-events:none;
}
.hero-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 40%, rgba(10,10,10,0.85) 100%);
  z-index:2;
}
.hero-content{
  position:relative;
  z-index:5;
  max-width:1100px;
  padding:0 24px;
}
.hero-eyebrow{
  font-family:var(--serif-en);
  font-size:13px;
  letter-spacing:8px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:32px;
  opacity:0;
  animation:fadeUp 1s 0.3s forwards;
}
.hero-eyebrow span{
  display:inline-block;
  padding:0 18px;
  position:relative;
}
.hero-eyebrow::before,
.hero-eyebrow::after{
  content:'';
  display:inline-block;
  width:60px;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  vertical-align:middle;
}
.hero-title{
  font-family:var(--serif-cn);
  font-weight:500;
  font-size:clamp(48px, 8vw, 112px);
  line-height:1.15;
  letter-spacing:12px;
  margin-bottom:28px;
  background:linear-gradient(180deg,
    #F4E4BC 0%,
    var(--gold-bright) 35%,
    var(--gold) 60%,
    var(--gold-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero-title .char{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
  animation:charReveal 0.9s forwards;
}
@keyframes charReveal{
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

.hero-subtitle{
  font-family:var(--serif-en);
  font-weight:300;
  font-style:italic;
  font-size:clamp(18px, 2vw, 24px);
  color:var(--silver);
  letter-spacing:2px;
  margin-bottom:14px;
  opacity:0;
  animation:fadeUp 1s 1.6s forwards;
}
.hero-tagline{
  font-family:var(--sans-cn);
  font-weight:200;
  font-size:14px;
  color:var(--text-faint);
  letter-spacing:6px;
  margin-bottom:64px;
  opacity:0;
  animation:fadeUp 1s 1.9s forwards;
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:18px 48px;
  font-family:var(--sans-cn);
  font-size:13px;
  font-weight:400;
  color:var(--gold);
  letter-spacing:6px;
  background:rgba(201,169,110,0.04);
  border:1px solid var(--gold);
  border-radius:2px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:fadeUp 1s 2.2s forwards;
  transition:color 0.4s ease;
}
.hero-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(201,169,110,0.25), transparent);
  transform:translateX(-100%);
  transition:transform 0.7s ease;
}
.hero-cta:hover::before{transform:translateX(100%);}
.hero-cta::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:2px;
  box-shadow:0 0 0 rgba(201,169,110,0);
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,0.0), 0 0 0 0 rgba(201,169,110,0.0);}
  50%    {box-shadow:0 0 30px 2px rgba(201,169,110,0.45), 0 0 60px 6px rgba(201,169,110,0.18);}
}
.hero-cta svg{width:16px;height:16px;transition:transform 0.4s ease;}
.hero-cta:hover svg{transform:translateY(4px);}

.hero-stats{
  position:relative;
  z-index:5;
  max-width:900px;
  margin:56px auto 0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid rgba(201,169,110,0.15);
  opacity:0;
  animation:fadeUp 1s 2.6s forwards;
}
.hero-stat{
  position:relative;
  padding:28px 12px 8px;
  text-align:center;
}
.hero-stat:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;top:20%;
  width:1px;height:60%;
  background:linear-gradient(180deg, transparent, rgba(201,169,110,0.3), transparent);
}
.hero-stat-num{
  font-family:var(--serif-en);
  font-weight:600;
  font-size:32px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:2px;
  line-height:1;
  margin-bottom:10px;
}
.hero-stat-num sup{
  font-size:14px;
  font-weight:500;
  vertical-align:super;
  margin-left:2px;
}
.hero-stat-label{
  font-family:var(--sans-cn);
  font-size:12px;
  color:var(--silver);
  letter-spacing:3px;
}
.hero-stat-en{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:10px;
  color:var(--silver-fade);
  letter-spacing:2px;
  margin-top:4px;
}

.hero-scroll-hint{
  position:absolute;
  left:50%;bottom:36px;
  transform:translateX(-50%);
  z-index:5;
  font-family:var(--sans-en);
  font-size:10px;
  letter-spacing:4px;
  color:var(--silver-dim);
  text-transform:uppercase;
  opacity:0;
  animation:fadeUp 1s 3s forwards;
}
.hero-scroll-hint::after{
  content:'';
  display:block;
  width:1px;height:38px;
  margin:14px auto 0;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%   {transform:scaleY(0.3);transform-origin:top;}
  50%  {transform:scaleY(1);transform-origin:top;}
  51%  {transform:scaleY(1);transform-origin:bottom;}
  100% {transform:scaleY(0);transform-origin:bottom;}
}

/* ============================================================
   3. 通用区块
   ============================================================ */
section{
  position:relative;
  z-index:2;
  padding:140px 56px;
}
.section-head{
  text-align:center;
  margin-bottom:80px;
}
.section-label{
  display:inline-block;
  font-family:var(--serif-en);
  font-size:12px;
  letter-spacing:8px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:18px;
}
.section-label::before,
.section-label::after{
  content:'';
  display:inline-block;
  width:30px;height:1px;
  background:var(--gold);
  vertical-align:middle;
  margin:0 14px;
  opacity:0.6;
}
.section-title{
  font-family:var(--serif-cn);
  font-weight:400;
  font-size:clamp(32px, 4vw, 48px);
  letter-spacing:8px;
  color:#F0E6D2;
  margin-bottom:18px;
}
.section-sub{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:16px;
  color:var(--silver-dim);
  letter-spacing:2px;
}

/* Reveal 滚动动画 */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in{opacity:1;transform:translateY(0);}

.reveal-stagger > *{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:0.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:0.15s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:0.25s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:0.35s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:0.45s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:0.55s;}

/* ============================================================
   4. 业务入口（4 大金刚）
   ============================================================ */
.business{
  background:linear-gradient(180deg, var(--black-deep) 0%, var(--black-soft) 100%);
}
.business-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.biz-card{
  position:relative;
  padding:48px 28px 44px;
  background:linear-gradient(180deg, rgba(22,22,22,0.8), rgba(15,15,15,0.6));
  border:1px solid rgba(160,170,181,0.12);
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  transition:transform 0.45s cubic-bezier(0.22,1,0.36,1),
             border-color 0.45s ease,
             box-shadow 0.45s ease,
             background 0.45s ease;
}
.biz-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(201,169,110,0.12), transparent 70%);
  opacity:0;
  transition:opacity 0.45s ease;
}
.biz-card::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transition:transform 0.45s ease;
}
.biz-card:hover{
  transform:translateY(-10px);
  border-color:rgba(201,169,110,0.5);
  background:linear-gradient(180deg, rgba(28,24,18,0.9), rgba(15,15,15,0.7));
  box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    0 0 20px rgba(201,169,110,0.5),
    inset 0 0 30px rgba(201,169,110,0.05);
}
.biz-card:hover::before{opacity:1;}
.biz-card:hover::after{transform:scaleX(1);}

.biz-icon{
  width:64px;height:64px;
  margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--silver);
  transition:color 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}
.biz-icon svg{width:100%;height:100%;stroke-width:1;}
.biz-card:hover .biz-icon{
  color:var(--gold-bright);
  filter:drop-shadow(0 0 8px rgba(201,169,110,0.6));
  transform:scale(1.08);
}
.biz-num{
  position:absolute;
  top:18px;right:22px;
  font-family:var(--serif-en);
  font-size:14px;
  color:var(--silver-fade);
  letter-spacing:2px;
  font-style:italic;
}
.biz-title{
  font-family:var(--serif-cn);
  font-weight:500;
  font-size:24px;
  letter-spacing:6px;
  color:#F0E6D2;
  margin-bottom:10px;
}
.biz-sub{
  font-family:var(--sans-cn);
  font-weight:300;
  font-size:13px;
  color:var(--silver-dim);
  letter-spacing:2px;
  margin-bottom:24px;
}
.biz-divider{
  width:24px;height:1px;
  background:var(--gold);
  margin:0 auto;
  opacity:0.5;
  transition:width 0.45s ease, opacity 0.45s ease;
}
.biz-card:hover .biz-divider{width:48px;opacity:1;}
.biz-en{
  margin-top:18px;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:12px;
  color:var(--silver-fade);
  letter-spacing:3px;
  text-transform:uppercase;
}

/* ============================================================
   5. 专属管家 Butler
   ============================================================ */
.butler{
  background:linear-gradient(180deg, var(--black-soft) 0%, var(--black-deep) 100%);
  overflow:hidden;
}
.butler-wrap{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.butler-left .section-label,
.butler-left .section-title{
  text-align:left;
}
.butler-left .section-label::before{display:none;}
.butler-left .section-label::after{
  margin-left:0;
}
.butler-title{
  font-family:var(--serif-cn);
  font-weight:500;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.3;
  letter-spacing:4px;
  color:#F0E6D2;
  margin-bottom:32px;
}
.butler-title em{
  font-style:normal;
  color:var(--gold);
  font-weight:600;
}
.butler-desc{
  font-family:var(--sans-cn);
  font-weight:300;
  font-size:15px;
  line-height:2;
  color:var(--silver);
  letter-spacing:1px;
  margin-bottom:44px;
  max-width:520px;
}
.butler-features{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.butler-feature{
  display:flex;
  align-items:flex-start;
  gap:18px;
  opacity:0;
  transform:translateX(-30px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.butler.in .butler-feature{
  opacity:1;
  transform:translateX(0);
}
.butler.in .butler-feature:nth-child(1){transition-delay:0.15s;}
.butler.in .butler-feature:nth-child(2){transition-delay:0.3s;}
.butler.in .butler-feature:nth-child(3){transition-delay:0.45s;}
.butler.in .butler-feature:nth-child(4){transition-delay:0.6s;}

.butler-feat-icon{
  flex-shrink:0;
  width:38px;height:38px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.butler-feat-icon svg{width:16px;height:16px;}
.butler-feat-text strong{
  display:block;
  font-family:var(--serif-cn);
  font-weight:500;
  font-size:17px;
  letter-spacing:3px;
  color:#F0E6D2;
  margin-bottom:4px;
}
.butler-feat-text span{
  font-family:var(--sans-cn);
  font-size:13px;
  color:var(--silver-dim);
  letter-spacing:1px;
}

.butler-right{
  position:relative;
  height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(60px) rotate(-6deg);
  transition:opacity 1.2s ease, transform 1.2s cubic-bezier(0.22,1,0.36,1);
}
.butler.in .butler-right{
  opacity:1;
  transform:translateY(0) rotate(0);
}
.butler-visual{
  position:relative;
  width:100%;height:100%;
  background:
    radial-gradient(circle at 50% 40%, rgba(201,169,110,0.18), transparent 60%),
    linear-gradient(135deg, #1a1a1a, #0e0e0e);
  border:1px solid rgba(201,169,110,0.25);
  overflow:hidden;
}
.butler-visual::before{
  content:'';
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(201,169,110,0.025) 30px, rgba(201,169,110,0.025) 31px);
}
.butler-visual img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0.7;
  mix-blend-mode:luminosity;
  filter:contrast(1.1) brightness(0.85) sepia(0.3) hue-rotate(-10deg);
}
.butler-visual::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 30%, transparent 60%, rgba(10,10,10,0.7) 100%);
}
.butler-visual-label{
  position:absolute;
  left:32px;bottom:32px;
  z-index:3;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:14px;
  color:var(--gold);
  letter-spacing:4px;
}
.butler-visual-label::before{
  content:'';
  display:inline-block;
  width:24px;height:1px;
  background:var(--gold);
  vertical-align:middle;
  margin-right:14px;
}
.butler-deco-ring{
  position:absolute;
  top:50%;left:50%;
  width:380px;height:380px;
  margin:-190px 0 0 -190px;
  border:1px dashed rgba(201,169,110,0.3);
  border-radius:50%;
  z-index:2;
  animation:slowRotate 60s linear infinite;
}
.butler-deco-ring::before{
  content:'';
  position:absolute;
  top:-3px;left:50%;
  width:6px;height:6px;
  background:var(--gold);
  border-radius:50%;
  margin-left:-3px;
  box-shadow:0 0 12px var(--gold);
}
@keyframes slowRotate{
  to{transform:rotate(360deg);}
}

/* ============================================================
   6. 精选推荐 Featured
   ============================================================ */
.featured{
  background:linear-gradient(180deg, var(--black-deep) 0%, #0D0D0D 100%);
}
.featured-carousel{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  height:480px;
  overflow:hidden;
}
.featured-track{
  position:relative;
  width:100%;height:100%;
}
.featured-card{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.8s ease, transform 0.8s ease;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg, rgba(22,22,22,0.95), rgba(13,13,13,0.95));
  border:1px solid rgba(160,170,181,0.15);
  overflow:hidden;
}
.featured-card.is-active{
  opacity:1;
  transform:translateY(0);
  z-index:2;
}
.featured-card:hover{
  border-color:rgba(201,169,110,0.6);
  box-shadow:0 0 30px rgba(201,169,110,0.25);
}
.featured-img{
  position:relative;
  overflow:hidden;
  background:#0A0A0A;
}
.featured-img img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(0.75) contrast(1.1) sepia(0.2) hue-rotate(-10deg);
  transition:transform 0.8s ease, filter 0.6s ease;
}
.featured-card:hover .featured-img img{
  transform:scale(1.05);
  filter:brightness(0.85) contrast(1.15) sepia(0.25) hue-rotate(-10deg);
}
.featured-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 60%, rgba(13,13,13,0.95) 100%);
}
.featured-content{
  padding:64px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.featured-tag{
  display:inline-block;
  width:fit-content;
  padding:6px 16px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--serif-en);
  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;
  margin-bottom:24px;
}
.featured-title{
  font-family:var(--serif-cn);
  font-weight:500;
  font-size:34px;
  letter-spacing:4px;
  color:#F0E6D2;
  margin-bottom:18px;
  line-height:1.3;
}
.featured-en{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:16px;
  color:var(--gold);
  letter-spacing:2px;
  margin-bottom:24px;
}
.featured-desc{
  font-family:var(--sans-cn);
  font-weight:300;
  font-size:14px;
  line-height:2;
  color:var(--silver);
  margin-bottom:36px;
  max-width:380px;
}
.featured-meta{
  display:flex;
  gap:36px;
  padding-top:24px;
  border-top:1px solid rgba(160,170,181,0.15);
}
.featured-meta-item span{
  display:block;
  font-family:var(--sans-en);
  font-size:10px;
  letter-spacing:3px;
  color:var(--silver-fade);
  text-transform:uppercase;
  margin-bottom:6px;
}
.featured-meta-item strong{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:20px;
  color:var(--gold);
  letter-spacing:1px;
}

.featured-nav{
  position:absolute;
  bottom:-60px;left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  z-index:10;
}
.featured-dot{
  width:32px;height:2px;
  background:rgba(160,170,181,0.25);
  cursor:pointer;
  transition:background 0.3s ease, width 0.3s ease;
}
.featured-dot.is-active{
  background:var(--gold);
  width:56px;
}
.featured-arrow{
  width:38px;height:38px;
  border:1px solid rgba(160,170,181,0.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--silver);
  cursor:pointer;
  transition:all 0.3s ease;
}
.featured-arrow:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.featured-arrow svg{width:14px;height:14px;}

/* ============================================================
   7. 联系我们 Contact
   ============================================================ */
.contact{
  position:relative;
  background:linear-gradient(180deg, #0D0D0D 0%, var(--black-deep) 100%);
  overflow:hidden;
}
.contact-bg{
  position:absolute;
  inset:0;
  background-image:url("../assets/images/contact-bg.jpg");
  background-size:cover;
  background-position:center;
  opacity:0.18;
  filter:grayscale(0.5) brightness(0.5) contrast(1.2);
}
.contact-bg::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, var(--black-deep) 0%, transparent 30%, transparent 70%, var(--black-deep) 100%);
}
.contact-wrap{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.contact-left{
  padding-right:40px;
}
.contact-quote{
  font-family:var(--serif-cn);
  font-weight:400;
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.6;
  letter-spacing:4px;
  color:#F0E6D2;
  margin-bottom:24px;
  position:relative;
}
.contact-quote::before{
  content:'"';
  position:absolute;
  top:-30px;left:-20px;
  font-family:var(--serif-en);
  font-size:80px;
  color:var(--gold);
  opacity:0.4;
  line-height:1;
}
.contact-quote em{
  font-style:normal;
  color:var(--gold);
}
.contact-quote-sub{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:18px;
  color:var(--silver);
  letter-spacing:2px;
  line-height:1.7;
  margin-top:18px;
}

.contact-right{
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:48px 44px;
  border:1px solid rgba(201,169,110,0.2);
  background:rgba(15,15,15,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
}
.contact-right::before,
.contact-right::after{
  content:'';
  position:absolute;
  width:24px;height:24px;
  border:1px solid var(--gold);
}
.contact-right::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.contact-right::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

.contact-block{
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.contact-block-icon{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  background:rgba(201,169,110,0.05);
}
.contact-block-icon svg{width:18px;height:18px;}
.contact-block-label{
  font-family:var(--sans-en);
  font-size:10px;
  letter-spacing:4px;
  color:var(--silver-fade);
  text-transform:uppercase;
  margin-bottom:8px;
}
.contact-block-value{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:24px;
  letter-spacing:2px;
  position:relative;
  display:inline-block;
  background:linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold-bright) 25%,
    #fff 50%,
    var(--gold-bright) 75%,
    var(--gold) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:goldSweep 4s linear infinite;
}
@keyframes goldSweep{
  0%   {background-position:200% 0;}
  100% {background-position:-200% 0;}
}
.contact-block-value.is-cn{
  font-family:var(--serif-cn);
  font-size:18px;
  letter-spacing:3px;
}
.contact-block-value.small{
  font-family:var(--sans-cn);
  font-size:14px;
  font-weight:300;
  letter-spacing:1px;
  color:var(--silver);
  -webkit-text-fill-color:var(--silver);
  background:none;
  animation:none;
  line-height:1.8;
}

.social-row{
  display:flex;
  gap:14px;
  margin-top:8px;
  padding-top:24px;
  border-top:1px solid rgba(160,170,181,0.12);
}
.social-icon{
  width:42px;height:42px;
  border:1px solid rgba(160,170,181,0.2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--silver-dim);
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.social-icon svg{width:18px;height:18px;}
.social-icon:hover{
  color:var(--gold);
  border-color:var(--gold);
  transform:rotate(5deg) scale(1.08);
  box-shadow:0 0 16px rgba(201,169,110,0.35);
}

/* ============================================================
   8. Footer
   ============================================================ */
.footer{
  background:#060606;
  padding:80px 56px 36px;
  border-top:1px solid rgba(201,169,110,0.2);
  position:relative;
  z-index:2;
}
.footer::before{
  content:'';
  position:absolute;
  top:-1px;left:50%;
  transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-wrap{
  max-width:1280px;
  margin:0 auto;
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(160,170,181,0.1);
}
.footer-brand .brand{margin-bottom:18px;}
.footer-brand p{
  font-family:var(--sans-cn);
  font-size:13px;
  color:var(--silver-dim);
  line-height:1.9;
  letter-spacing:1px;
  max-width:280px;
}
.footer-col h5{
  font-family:var(--serif-en);
  font-size:12px;
  letter-spacing:4px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:22px;
  font-weight:500;
}
.footer-col ul{list-style:none;}
.footer-col li{
  margin-bottom:12px;
}
.footer-col a{
  font-family:var(--sans-cn);
  font-size:13px;
  color:var(--silver-dim);
  letter-spacing:1px;
  transition:color 0.3s ease, padding-left 0.3s ease;
  cursor:pointer;
}
.footer-col a:hover{
  color:var(--gold);
  padding-left:6px;
}

.footer-partners{
  padding:32px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  border-bottom:1px solid rgba(160,170,181,0.08);
}
.footer-partners-label{
  font-family:var(--sans-en);
  font-size:11px;
  letter-spacing:4px;
  color:var(--silver-fade);
  text-transform:uppercase;
}
.partner-logos{
  display:flex;
  gap:36px;
  align-items:center;
  flex-wrap:wrap;
}
.partner-logo{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:16px;
  color:var(--silver-fade);
  letter-spacing:2px;
  filter:grayscale(1);
  opacity:0.6;
  transition:all 0.4s ease;
  cursor:default;
}
.partner-logo:hover{
  opacity:1;
  color:var(--gold);
  filter:grayscale(0);
}

.footer-bottom{
  padding-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.footer-bottom p{
  font-family:var(--sans-cn);
  font-size:12px;
  color:var(--silver-fade);
  letter-spacing:1px;
}
.footer-bottom a{
  color:var(--silver-dim);
  transition:color 0.3s ease;
}
.footer-bottom a:hover{color:var(--gold);}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1280px){
  .header,section,.footer{padding-left:36px;padding-right:36px;}
  .business-grid{grid-template-columns:repeat(2, 1fr);gap:24px;}
  .butler-wrap{gap:48px;}
  .featured-content{padding:48px 36px;}
}
@media (max-width: 1024px){
  .business-grid{grid-template-columns:repeat(2, 1fr);}
  .butler-wrap{grid-template-columns:1fr;gap:60px;}
  .butler-right{height:420px;}
  .contact-wrap{grid-template-columns:1fr;gap:48px;}
  .contact-left{padding-right:0;}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px;}
  .featured-card{grid-template-columns:1fr;}
  .featured-img{height:280px;}
  .hero-stats{max-width:640px;}
  .hero-stat-num{font-size:26px;}
}
@media (max-width: 768px){
  .header{padding:16px 20px;}
  .header.scrolled{padding:12px 20px;}
  .nav-actions{gap:18px;}
  .nav-link{display:none;}
  .butler-entry{padding:8px 16px;font-size:11px;letter-spacing:3px;}
  section{padding:90px 20px;}
  .business-grid{grid-template-columns:1fr;gap:18px;}
  .biz-card{padding:36px 22px;}
  .featured-carousel{height:auto;}
  .featured-card{position:relative;height:auto;}
  .featured-content{padding:32px 22px;}
  .featured-title{font-size:24px;}
  .contact-right{padding:32px 24px;}
  .footer{padding:60px 20px 28px;}
  .footer-top{grid-template-columns:1fr;gap:36px;}
  .footer-partners{flex-direction:column;align-items:flex-start;}
  .hero-cta{padding:14px 32px;letter-spacing:4px;}
  .hero-title{letter-spacing:6px;}
  .butler-deco-ring{width:280px;height:280px;margin:-140px 0 0 -140px;}
  .butler-right{height:340px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:0;margin-top:36px;}
  .hero-stat{padding:20px 8px 4px;}
  .hero-stat-num{font-size:24px;}
  .hero-stat-label{font-size:11px;letter-spacing:2px;}
  .hero-stat-en{display:none;}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}
