/* ============================================================
   Love365 官方网站 · 设计系统
   德芙深紫 + 香槟金蝴蝶结飘带 · 高奢化妆品礼盒质感
   延续小程序品牌基因（#5B3A8A 深紫水晶）
   ============================================================ */

:root {
  /* —— 核心品牌色 —— */
  --dove-purple:    #3E1E5A;   /* 德芙深紫（主背景） */
  --dove-purple-2:  #4A2C5A;   /* 德芙紫·亮 */
  --brand-purple:   #5B3A8A;   /* 深紫水晶（延续小程序） */
  --iris-blue:      #4A5FCC;   /* 皇家鸢尾蓝 */
  --rose-pink:      #C77BA8;   /* 玫瑰石英粉 */
  --deep-plum:      #2A1B3D;   /* 深梅紫（正文） */

  /* —— 香槟金缎带（礼盒飘带） —— */
  --champagne:      #D4AF7A;   /* 香槟金 */
  --champagne-light:#E8C97A;   /* 亮金 */
  --champagne-pale: #F0DFB6;   /* 淡金 */
  --satin:          #F5E9D8;   /* 丝缎白 */
  --gold-glow:      rgba(212,175,122,0.35);

  /* —— 中性色 —— */
  --bg-card:        #FFFFFF;
  --bg-soft:        #FAF8FD;   /* 薰衣草白 */
  --bg-section:     #F5F2FA;

  --text:           #2A1B3D;
  --text-secondary: #6B5B7A;
  --text-light:     #A89BB5;

  /* —— 渐变 —— */
  --gradient-brand: linear-gradient(135deg, #3E1E5A 0%, #5B3A8A 45%, #4A5FCC 75%, #C77BA8 100%);
  --gradient-dove:  linear-gradient(160deg, #2A1240 0%, #3E1E5A 40%, #5B3A8A 100%);
  --gradient-gold:  linear-gradient(135deg, #D4AF7A 0%, #E8C97A 50%, #C9A96E 100%);
  --gradient-satin: linear-gradient(135deg, #F0DFB6 0%, #E8C97A 50%, #D4AF7A 100%);

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
               "Noto Sans CJK SC", sans-serif;
  --font-serif: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", serif;

  /* —— 字号 —— */
  --fs-xs: 12px;   --fs-sm: 14px;   --fs-base: 16px;
  --fs-md: 18px;   --fs-lg: 22px;   --fs-xl: 28px;
  --fs-2xl: 36px;  --fs-3xl: 48px;  --fs-display: 64px;

  /* —— 字重 —— */
  --w-light: 300;  --w-regular: 400; --w-medium: 500;
  --w-semibold: 600; --w-bold: 700;

  /* —— 阴影（紫色调 + 金色光晕） —— */
  --shadow-sm:      0 2px 12px rgba(62, 30, 90, 0.06);
  --shadow-card:    0 4px 24px rgba(62, 30, 90, 0.10);
  --shadow-elevated:0 8px 40px rgba(62, 30, 90, 0.14);
  --shadow-glow:    0 4px 24px rgba(199, 123, 168, 0.25);
  --shadow-gold:    0 6px 28px var(--gold-glow);

  /* —— 圆角 —— */
  --radius-sm: 8px;   --radius-md: 14px;   --radius-lg: 22px;
  --radius-xl: 32px;  --radius-full: 999px;

  /* —— 间距 —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* —— 过渡 —— */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg-soft);
  line-height: 1.7;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 给 body 预留底部导航高度，避免内容被遮挡 */
@media (max-width: 1023px) {
  body { padding-bottom: 60px; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ============ 通用容器 ============ */
.container { width: 100%; padding: 0 20px; margin: 0 auto; }
@media (min-width: 768px)  { .container { max-width: 720px; padding: 0 24px; } }
@media (min-width: 1024px) { .container { max-width: 960px; } }
@media (min-width: 1280px) { .container { max-width: 1160px; } }

/* ============ 文字工具 ============ */
.serif { font-family: var(--font-serif); }
.light { font-weight: var(--w-light); }
.medium { font-weight: var(--w-medium); }
.tracking { letter-spacing: 2px; }
.tracking-wide { letter-spacing: 4px; }
.text-gold { color: var(--champagne); }
.text-purple { color: var(--brand-purple); }
.center { text-align: center; }

/* ============ 英文大写标签（化妆品包装手法） ============ */
.eyebrow {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: var(--w-medium);
}

/* ============ 按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: var(--w-medium);
  letter-spacing: 1px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.97); }

.btn-gold {
  background: var(--gradient-gold);
  color: #3E1E5A;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px var(--gold-glow);
}

.btn-outline {
  background: transparent;
  color: var(--champagne);
  border: 1px solid rgba(212, 175, 122, 0.5);
}
.btn-outline:hover {
  background: rgba(212, 175, 122, 0.1);
  border-color: var(--champagne);
}

.btn-white {
  background: #fff;
  color: var(--brand-purple);
  box-shadow: var(--shadow-card);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }

/* ============ 顶部导航 ============ */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  padding: 14px 0;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.top-header.scrolled {
  background: rgba(42, 18, 64, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(42, 18, 64, 0.35);
}
.top-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.brand__name {
  font-size: 18px;
  font-weight: var(--w-semibold);
  letter-spacing: 1px;
}
.brand__name .heart { color: var(--rose-pink); }

.top-header__nav {
  display: none;
  align-items: center;
  gap: 28px;
}
.top-header__nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  letter-spacing: 1px;
  transition: color var(--dur) var(--ease);
}
.top-header__nav a:hover { color: var(--champagne-light); }
.top-header__nav a.active { color: var(--champagne-light); }

.top-header__cta { display: none; }

@media (min-width: 1024px) {
  .top-header__nav { display: flex !important; }
  .top-header__cta { display: inline-flex; }
}

/* ============ 移动端底部导航栏 ============ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1900;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(91, 58, 138, 0.08);
  box-shadow: 0 -4px 24px rgba(42, 18, 64, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 6px;
  color: #A89BB5;
  font-size: 11px;
  letter-spacing: 0.5px;
  transition: color var(--dur) var(--ease);
}
.bottom-nav__item svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform var(--dur) var(--ease);
}
.bottom-nav__item.active {
  color: var(--brand-purple);
  font-weight: var(--w-medium);
}
.bottom-nav__item.active svg { transform: translateY(-1px); }
.bottom-nav__item:active svg { transform: scale(0.9); }

/* 小程序 CTA tab 高亮 */
.bottom-nav__item--cta {
  color: #C9A96E;
}
.bottom-nav__item--cta.active {
  color: #C9A96E;
}

/* PC 端隐藏底部导航（用顶部导航） */
@media (min-width: 1024px) {
  .bottom-nav { display: none; }
}

/* ============ 通用 section ============ */
.section { padding: var(--sp-8) 0; }
.section--tight { padding: var(--sp-6) 0; }
.section-title {
  font-size: var(--fs-2xl);
  font-weight: var(--w-light);
  letter-spacing: 2px;
  color: var(--deep-plum);
  text-align: center;
  margin-bottom: 12px;
}
.section-sub {
  text-align: center;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto var(--sp-6);
  font-size: var(--fs-base);
}

/* ============ 页脚 ============ */
.site-footer {
  background: #2A1240;
  color: rgba(255, 255, 255, 0.65);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-8);
}
.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h4 {
  color: #fff;
  font-size: 15px;
  font-weight: var(--w-medium);
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.site-footer a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.site-footer a:hover { color: var(--champagne-light); }
.site-footer__legal {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--sp-6);
  line-height: 2;
}

/* ============ 通用动效 ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }