/* ============================================
   PICOUNI 界面润色层 v1（2026-09-04）
   在 picouni.css 之后加载，只做视觉增强；
   不改变 DOM 结构与 JS 交互钩子，可随时整体移除回滚。
   ============================================ */

:root {
  --accent-deep: #C75B39;            /* 深一档的品牌暖色，用于小字文本保证对比度 */
  --accent-tint: rgba(244,162,97,0.10);
  --accent-border: rgba(244,162,97,0.22);
}

/* ── 0. 锚点定位补偿：固定导航不再遮挡标题 ── */
section[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

/* ============================================
   1. Hero：更通透的层次（点阵纹理 + 双光晕 + 渐变过渡）
   ============================================ */
.hero {
  background: linear-gradient(180deg, #FBFAF6 0%, var(--bg-primary) 100%);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(31,31,31,0.07) 1.2px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
}
.hero-bg::before {
  width: 72%; height: 85%; top: -28%; right: -18%;
  background: radial-gradient(ellipse, rgba(244,162,97,0.15) 0%, transparent 65%);
}
.hero-bg::after {
  width: 58%; height: 65%; bottom: -18%; left: -12%;
  background: radial-gradient(ellipse, rgba(231,111,81,0.09) 0%, transparent 70%);
}

/* Hero 徽章（HTML 新增 .hero-badge） */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  margin-bottom: 26px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  box-shadow: 0 2px 12px rgba(231,111,81,0.08);
}
.hero-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  animation: heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244,162,97,0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(244,162,97,0.05); }
}

/* 主标题下的渐变笔触 */
.hero-content .heading-hero {
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
}
.hero-content .heading-hero::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -16px;
  width: 76px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
}
.hero-content .text-subtitle { margin-bottom: 52px; }

/* 主按钮悬停光泽扫过 */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-primary:hover::after { left: 135%; }

/* 向下滚动提示（HTML 新增 .scroll-hint） */
.scroll-hint {
  position: absolute;
  bottom: 96px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px;
  z-index: 2;
  border: 2px solid rgba(31,31,31,0.16);
  border-radius: 14px;
  display: flex; justify-content: center;
  padding-top: 7px;
  opacity: 0.75;
  transition: opacity var(--transition-base), border-color var(--transition-base);
}
.scroll-hint:hover { opacity: 1; border-color: rgba(231,111,81,0.55); }
.scroll-hint span {
  width: 3px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-start), var(--accent-end));
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ============================================
   2. 数据条：悬浮卡片，向上叠在 Hero 底边
   ============================================ */
.data-strip { padding: 0; background: transparent; border: none; }
.data-strip .container { margin-top: -52px; position: relative; z-index: 5; }
.data-strip-grid {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(31,31,31,0.10), 0 4px 16px rgba(231,111,81,0.05);
  padding: 36px 24px;
  gap: 0;
}
.data-item { position: relative; padding: 8px 16px; }
.data-item + .data-item::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 52px;
  background: var(--border-light);
}
.data-label { font-weight: 600; letter-spacing: 0.02em; }

/* ============================================
   3. 区块标题：品牌色胶囊标签
   ============================================ */
.section-header .text-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  margin-bottom: 20px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  color: var(--accent-deep);
}
.section-header .text-label::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}

/* ============================================
   4. 产品卡片：默认即有品牌温度，悬停有光晕
   ============================================ */
.product-card { border-radius: 20px; }
.product-card::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(244,162,97,0.16) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.product-card:hover::after { opacity: 1; }
.product-card:hover {
  box-shadow: 0 20px 48px rgba(31,31,31,0.10), 0 8px 24px rgba(231,111,81,0.10);
}
.product-card-icon {
  background: linear-gradient(135deg, rgba(244,162,97,0.13), rgba(231,111,81,0.06));
  border: 1px solid var(--accent-border);
}
.product-card-tags .tag {
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-weight: 500;
}
.product-card-count { box-shadow: 0 2px 8px rgba(231,111,81,0.28); }

/* ============================================
   5. 关于我们：图片偏移品牌色硬阴影
   ============================================ */
.about-image {
  box-shadow: 24px 24px 0 -10px rgba(244,162,97,0.16), 0 4px 24px rgba(0,0,0,0.06);
}
.about-image-overlay { border: 1px solid rgba(255,255,255,0.6); }

/* ============================================
   6. 核心优势：卡片化 + 圆形渐变图标
   ============================================ */
.strengths {
  background: var(--bg-primary);
  border: none;
}
.strength-item {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.strength-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent-border);
}
.strength-icon {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244,162,97,0.15), rgba(231,111,81,0.07));
  border: 1px solid var(--accent-border);
  transition: transform var(--transition-base);
}
.strength-item:hover .strength-icon { transform: scale(1.08); }

/* ============================================
   7. 联系我们：圆形渐变图标 + 悬停品牌描边
   ============================================ */
.contact-item {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 100%);
}
.contact-item:hover {
  border-color: rgba(244,162,97,0.35);
  box-shadow: 0 12px 32px rgba(31,31,31,0.08);
}
.contact-icon {
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244,162,97,0.15), rgba(231,111,81,0.07));
  border: 1px solid var(--accent-border);
}

/* ============================================
   8. 页脚：顶部品牌渐变发丝线 + 二维码微交互
   ============================================ */
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 4%,
    var(--accent-start) 30%,
    var(--accent-end) 50%,
    var(--accent-start) 70%,
    transparent 96%);
}
.footer-qr img { transition: transform var(--transition-base); }
.footer-qr:hover img { transform: scale(1.05); }
.footer-link { transition: color var(--transition-base), padding-left var(--transition-base); }
.footer-link:hover { padding-left: 4px; }

/* ============================================
   9. 导航：激活项品牌色 + 滚动后阴影加深
   ============================================ */
.nav-link.active {
  color: var(--accent-deep);
  background: var(--accent-tint);
}
.nav.scrolled { box-shadow: 0 4px 24px rgba(31,31,31,0.07); }

/* ============================================
   响应式补充
   ============================================ */
@media (max-width: 1024px) {
  .data-strip .container { margin-top: -36px; }
  .data-strip-grid { padding: 28px 20px; row-gap: 24px; }
  /* 2×2 网格：去掉行首那条多余分隔线 */
  .data-item:nth-child(3)::before { display: none; }
}

@media (max-width: 767px) {
  .scroll-hint { display: none; }
  .hero-badge { font-size: 0.78rem; padding: 6px 14px; margin-bottom: 20px; }
  .hero-content .heading-hero { margin-bottom: 34px; }
  .data-strip .container { margin-top: -28px; }
  .data-strip-grid { padding: 24px 12px; border-radius: var(--radius-md); }
  .data-item { padding: 4px 8px; }
  .about-image { box-shadow: 14px 14px 0 -8px rgba(244,162,97,0.16), 0 4px 24px rgba(0,0,0,0.06); }
}

/* 减少动画偏好：新增动效一并关闭 */
@media (prefers-reduced-motion: reduce) {
  .hero-badge-dot, .scroll-hint span { animation: none; }
  .btn-primary::after { display: none; }
}