/* 全局与布局 */
:root{
  --bg:#0b0b0f;          /* 深色背景 */
  --surface:#121218;     /* 表層背景 */
  --muted:#9aa0aa;       /* 次要文字 */
  --text:#e7e7ec;        /* 主文字 */
  --accent:#b08cff;      /* 品牌重點色 */
  --accent-2:#5be9b9;    /* 補充輔助色 */
  --border:rgba(255,255,255,0.06);
  --gradient: radial-gradient(1200px 600px at 20% -10%, rgba(176,140,255,.12), transparent),
              radial-gradient(1000px 500px at 80% 120%, rgba(91,233,185,.08), transparent);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto}
img{max-width:100%;display:block}
.container{width:min(1200px,90vw);margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.4rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),#7e5bff);color:#fff;text-decoration:none;border:1px solid var(--border);box-shadow:0 10px 30px rgba(176,140,255,.15);transition:transform .3s ease,box-shadow .3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(176,140,255,.25)}

/* 导航样式 - 使用主样式文件的统一设计，仅在必要时进行微调 */
/* 移除所有导航样式覆盖，让 styles.css 中的导航样式生效 */

/* 英雄视差区 */
.about-hero{position:relative;min-height:60vh;aspect-ratio:16/9;background:
  linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.75)),
  url('../images/product/zy/zy_main2.webp') center 35%/cover no-repeat fixed; /* 視差效果: background-attachment:fixed */
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-overlay{position:absolute;inset:-30% -30% -30% -30%;background:var(--gradient);filter:blur(40px);opacity:.7;pointer-events:none}
.about-hero-content{position:relative;text-align:center;z-index:1}
.about-title{font-family:"Playfair Display",serif;font-size:clamp(32px,6vw,56px);letter-spacing:.6px;margin:0 0 10px}
.about-subtitle{color:var(--muted);margin:0 0 22px;font-size:clamp(14px,2.2vw,18px)}

/* 区块标题 */
.section-header{padding:80px 0 20px;text-align:center}
.section-title{font-size:28px;margin:0 0 6px}
.section-subtitle{color:var(--muted);margin:0}

/* 时间轴 */
.timeline-section{padding:20px 0 80px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
.timeline{position:relative;margin:40px auto 0;padding-left:26px;border-left:1px dashed rgba(255,255,255,.15);width:min(900px,86%)}
.timeline-item{position:relative;margin:28px 0;padding-left:18px}
.timeline-year{position:absolute;left:-78px;top:0;color:var(--accent);font-weight:600}
.timeline-content{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.timeline-item::before{content:"";position:absolute;left:-32px;top:6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #fff, var(--accent));box-shadow:0 0 0 6px rgba(176,140,255,.18)}

/* 工艺传承 */
.craft-section{padding:80px 0}
.craft-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.craft-text .philosophy-title{font-size:26px;margin:0 0 10px}
.philosophy-description{color:#cfd2d9;line-height:1.8;margin:10px 0}
.craft-media{position:relative}
.craft-video{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.craft-video video{width:100%;height:auto;display:block;filter:contrast(1.02) saturate(1.05)}

/* 视频链接样式 */
.video-link{display:block;text-decoration:none;color:inherit;width:100%;height:100%;position:relative}
.video-preview{width:100%;height:300px;background:linear-gradient(135deg,rgba(176,140,255,.15),rgba(91,233,185,.1));display:flex;align-items:center;justify-content:center;position:relative}
.video-placeholder{text-align:center;color:var(--text)}
.play-icon{font-size:48px;color:var(--accent);margin-bottom:16px;transition:transform .3s ease}
.video-title{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--text)}
.video-subtitle{font-size:14px;color:var(--muted)}
.video-link:hover .play-icon{transform:scale(1.1)}
.video-link:hover .video-preview{background:linear-gradient(135deg,rgba(176,140,255,.25),rgba(91,233,185,.15))}
.video-overlay{position:absolute;bottom:16px;left:16px;background:rgba(0,0,0,.7);color:white;padding:8px 16px;border-radius:20px;font-size:14px;backdrop-filter:blur(10px)}

/* 创始人寄语 */
.founder-section{padding:40px 0 90px}
.founder-card{display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:center;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));padding:22px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.founder-photo{width:140px;height:140px;border-radius:18px;background:url('../images/product/zy/zy_hand2.webp') center/cover no-repeat,radial-gradient(60% 60% at 30% 10%, rgba(176,140,255,.35), transparent);border:1px solid var(--border)}
.founder-text h3{margin:0 0 6px}
.founder-text p{margin:0 0 8px;color:#d7d9e0;line-height:1.8}
.founder-sign{color:var(--muted);font-family:"Playfair Display",serif;font-style:italic}

/* CTA */
.cta-section{padding:20px 0 100px}
.cta-card{border:1px solid var(--border);border-radius:18px;padding:34px;text-align:center;background:
  radial-gradient(800px 400px at 15% -10%, rgba(176,140,255,.12), transparent),
  radial-gradient(800px 400px at 85% 120%, rgba(91,233,185,.10), transparent),
  linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* 页尾覆用主样式（此处可微调间距） */
.footer{border-top:1px solid var(--border);background:rgba(10,10,14,.6);backdrop-filter:blur(8px)}

/* 响应式 */
@media (max-width: 980px){
  .craft-grid{grid-template-columns:1fr;gap:20px}
  .timeline{padding-left:18px}
  .timeline-year{left:-64px}
  .founder-card{grid-template-columns:100px 1fr}
  .founder-photo{width:100px;height:100px}
}
@media (max-width: 720px){
  .timeline{width:92%}
  .timeline-year{left:-56px}
  .founder-card{grid-template-columns:1fr}
  .founder-photo{width:100%;height:200px}
}
/* 新增：英雄区粒子与统计 */
.hero-particles{position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 400px at 20% -10%, rgba(176,140,255,.18), transparent),radial-gradient(800px 400px at 80% 120%, rgba(91,233,185,.12), transparent);mix-blend-mode:screen;opacity:.45}
.hero-stats{display:flex;gap:22px;justify-content:center;margin:20px 0 10px}
.stat-item{min-width:120px;border:1px solid var(--border);border-radius:14px;padding:12px 16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));box-shadow:0 10px 30px rgba(0,0,0,.25)}
.stat-number{font-family:"Playfair Display",serif;font-size:28px}
.stat-label{color:var(--muted);font-size:12px}
.hero-subtitle-accent{color:var(--accent);letter-spacing:.2em;font-size:12px;text-transform:uppercase;margin-bottom:8px;display:inline-block;opacity:.9}

/* 新增：品牌故事核心区域 */
.brand-story-section{padding:60px 0 20px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.story-content{border:1px solid var(--border);border-radius:16px;padding:18px 20px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));box-shadow:0 10px 30px rgba(0,0,0,.25)}
.story-paragraph{color:#d9dbe3;line-height:1.9;margin:12px 0}
.section-accent{color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.philosophy-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.pillar{border:1px solid var(--border);border-radius:14px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));text-align:center}
.pillar-icon{font-size:18px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;color:var(--accent);transition:transform .3s ease,color .3s ease}
.pillar-icon svg{width:24px;height:24px;filter:drop-shadow(0 2px 8px rgba(176,140,255,.3))}
.pillar:hover .pillar-icon{transform:scale(1.1);color:var(--accent-2)}
.pillar:hover .pillar-icon svg{filter:drop-shadow(0 4px 12px rgba(176,140,255,.5))}
.story-visual .visual-container{position:relative;height:360px;border-radius:16px;border:1px solid var(--border);overflow:hidden;background:radial-gradient(1200px 600px at 20% -10%, rgba(176,140,255,.10), transparent),radial-gradient(1000px 500px at 80% 120%, rgba(91,233,185,.08), transparent)}
.floating-gems{position:absolute;inset:0;pointer-events:none}
.gem{position:absolute;width:80px;height:80px;border-radius:12px;background:conic-gradient(from 45deg, rgba(255,255,255,.9), rgba(176,140,255,.6), rgba(91,233,185,.55), rgba(255,255,255,.9));filter:blur(.2px);box-shadow:0 12px 40px rgba(176,140,255,.18);animation:float 8s ease-in-out infinite}
.gem-1{left:10%;top:16%}
.gem-2{right:12%;top:30%;animation-delay:1.2s}
.gem-3{left:22%;bottom:12%;animation-delay:2.4s}
.gem-4{right:18%;bottom:10%;animation-delay:3.6s}
.light-rays{position:absolute;inset:-20% -40%;background:radial-gradient(60% 40% at 50% 50%, rgba(255,255,255,.08), transparent);filter:blur(30px);animation:pulse 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.55}}

/* 新增：时间轴徽章 */
.milestone-badge{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));font-size:12px;color:var(--muted)}

/* 新增：工艺展示画廊与步骤 */
.craft-steps{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.step{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.step-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 35%, #fff, var(--accent));color:#0b0b0f;font-weight:700;font-size:12px;box-shadow:0 0 0 6px rgba(176,140,255,.15)}
.step-content h4{margin:0 0 6px}
.step-content p{margin:0;color:#d7d9e0}
.craft-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery-item{height:160px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));position:relative;overflow:hidden}
.gallery-item::after{content:"";position:absolute;inset:-40% -20%;background:conic-gradient(from 90deg, rgba(255,255,255,.25), transparent 40%);filter:blur(30px);opacity:.25;transform:rotate(15deg)}
.glimmer{background:radial-gradient(600px 300px at 30% 20%, rgba(176,140,255,.25), transparent), radial-gradient(600px 300px at 80% 120%, rgba(91,233,185,.18), transparent)}
.lattice{background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px), linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.caustics{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 40%), radial-gradient(circle at 70% 70%, rgba(176,140,255,.2), transparent 50%)}
.halo{background:radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 40%), radial-gradient(circle at 50% 120%, rgba(91,233,185,.18), transparent 50%)}

/* 拋光步骤特殊美化样式 */
.step-polishing {
  background: linear-gradient(135deg, 
    rgba(255,255,255,.08) 0%, 
    rgba(255,255,255,.04) 25%, 
    rgba(176,140,255,.06) 50%, 
    rgba(255,255,255,.04) 75%, 
    rgba(255,255,255,.08) 100%);
  border: 1px solid rgba(176,140,255,.3);
  box-shadow: 
    0 8px 32px rgba(176,140,255,.15),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(176,140,255,.1);
  position: relative;
  overflow: hidden;
}

.step-polishing::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255,255,255,.08) 50%, 
    transparent 70%);
  transform: rotate(-45deg);
  animation: polishingShine 3s ease-in-out infinite;
}

.step-polishing .step-icon {
  background: radial-gradient(circle at 30% 30%, 
    #ffffff 0%, 
    #f0f0ff 20%, 
    var(--accent) 60%, 
    #7e5bff 100%);
  box-shadow: 
    0 0 0 6px rgba(176,140,255,.25),
    0 4px 16px rgba(176,140,255,.3),
    inset 0 1px 0 rgba(255,255,255,.4);
  color: #0b0b0f;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(255,255,255,.3);
}

.step-polishing:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(176,140,255,.2),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(176,140,255,.15);
  border-color: rgba(176,140,255,.4);
}

.step-polishing:hover::before {
  animation-duration: 1.5s;
}

@keyframes polishingShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }
  50% { transform: translateX(0%) translateY(0%) rotate(-45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(-45deg); }
}

/* 新增：响应式调整 */
@media (max-width: 980px){
  .story-grid{grid-template-columns:1fr}
  .story-visual .visual-container{height:280px}
}
@media (max-width: 720px){
  .hero-stats{flex-wrap:wrap}
  .stat-item{flex:1 1 30%}
  .philosophy-pillars{grid-template-columns:1fr 1fr}
  .craft-gallery{grid-template-columns:1fr}
}

/* 新增：移动端英雄区适配修复（参照首页的稳定呈现） */
@media (max-width: 820px){
  .about-hero{
    background-attachment: scroll;          /* 移动端禁用 fixed，防止闪烁/裁切/性能问题 */
    background-position: center 20%;        /* 略微上移焦点，呈现更佳 */
    aspect-ratio: auto;                     /* 取消固定比例，避免过矮 */
    min-height: 56vh;                       /* 提升可视高度 */
    padding-top: calc(72px + env(safe-area-inset-top)); /* 预留导航与安全区，避免遮挡 */
  }
  .about-hero .about-hero-content{
    padding: 0 16px 24px;                   /* 增加侧边与底部留白，提升可读性 */
  }
  .hero-overlay{
    inset: -12% -12%;                       /* 降低溢出范围，小屏更稳定 */
    filter: blur(32px);
  }
}

/* iOS 兜底：确保禁用 fixed */
@supports (-webkit-touch-callout: none) {
  .about-hero { background-attachment: scroll; }
}