/* 
 * style.css — VisionTrace 品牌页面的自定义样式
 *
 * 补充 Tailwind CSS 未覆盖的样式：
 * 1. 毛玻璃导航栏效果
 * 2. Material Symbols 图标配置
 * 3. 安装步骤的连接线装饰
 * 4. 卡片阴影效果
 */

/* 正文字体、背景和文字颜色 */
body { font-family: 'Hanken Grotesk', sans-serif; background-color: #faf9f7; color: #1a1c1b; }

/* 毛玻璃导航栏（支持 webkit 和标准 backdrop-filter） */
.glass-nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Material Symbols Outlined 字体配置 */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* 卡片区域柔和阴影 */
.artist-shadow { box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05); }

/* 安装步骤间连接线（位于中间水平线） */
.step-line::after {
  content: '';
  position: absolute;
  top: 2rem;           /* 与步骤编号垂直居中 */
  left: 50%;
  width: 100%;
  height: 2px;
  background: #dadad8;  /* 浅灰色连接线 */
  z-index: -1;          /* 放在内容下方 */
}

/* 最后一个步骤不显示连接线 */
.step-item:last-child .step-line::after { display: none; }