/* ============================================================
   本本科技 - 资产变现数智营销 - 自定义样式
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans SC', sans-serif;
  background: #F5F9FF;
  color: #0A0E27;
}

/* Header 悬浮固定效果 */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
#site-header.header-scrolled {
  background-color: rgba(5, 3, 20, 0.98);
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.45);
}

h1, h2, h3, .font-heading {
  font-family: 'Noto Serif SC', serif;
}

.kicker {
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.22em;
}

.num {
  font-family: 'JetBrains Mono', monospace;
}

::selection {
  background: #08DCFF;
  color: #050314;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #08DCFF;
  border-radius: 8px;
}

/* 滚动揭示动画 */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 颗粒纹理叠加层 */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* 深色网格渐变背景 */
.mesh-dark {
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(8,220,255,0.16) 0%, rgba(8,220,255,0) 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(50,118,220,0.2) 0%, rgba(50,118,220,0) 60%),
    linear-gradient(160deg, #050314 0%, #0D0D6E 46%, #1818B8 100%);
}

/* 玻璃拟态卡片 */
.glass-card {
  background: linear-gradient(180deg, rgba(24,24,184,0.72), rgba(5,3,20,0.86));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(8,220,255,0.22);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* 缓慢浮动动画 */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.float-slow {
  animation: floatSlow 7s ease-in-out infinite;
}

/* 按钮按压反馈 */
.btn-press:active {
  transform: translateY(1px) scale(0.98);
}

/* FAQ 折叠面板 */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* 渐变分隔线 */
.divider-line {
  background: linear-gradient(90deg, transparent, rgba(8,220,255,0.5), transparent);
}

/* 移动端抽屉动画 */
#mobile-drawer {
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}

#mobile-drawer.closed {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
}

/* Toast 提示动画 */
#toast {
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}

#toast.hidden-toast {
  transform: translateY(140%);
  opacity: 0;
}

/* ============================================================
   悬停特效 (Hover Effects)
   ============================================================ */

/* ---------- 卡片上浮 ---------- */
.card-lift {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px -12px rgba(24,24,184,0.18);
  border-color: rgba(8,220,255,0.45);
}

/* 深色大卡片悬停 */
.card-dark-glow {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.card-dark-glow:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px -16px rgba(0,0,0,0.5), 0 0 40px -8px rgba(8,220,255,0.2);
}
.card-dark-glow:hover > .absolute.rounded-full {
  transform: scale(1.25);
  opacity: 0.18;
}
.card-dark-glow > .absolute.rounded-full {
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}

/* ---------- 服务领域卡片 ---------- */
.type-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.type-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 18px 40px -10px rgba(24,24,184,0.2);
}
.type-card:hover svg {
  stroke: #08DCFF;
  transform: scale(1.12) translateY(-2px);
}
.type-card svg {
  transition: stroke .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.type-card:hover h3 {
  color: #2851E3;
}

/* ---------- 导航链接下划线动画 ---------- */
.nav-link {
  position: relative;
  transition: color .25s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #08DCFF, #4DE8FF);
  border-radius: 2px;
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after {
  width: 100%;
}

/* ---------- 主按钮光晕 ---------- */
.btn-glow {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .3s ease;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -10px rgba(8,220,255,0.7), 0 0 0 1px rgba(8,220,255,0.12);
}

/* ---------- 流程步骤圆点 ---------- */
.step-circle {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  cursor: pointer;
}
.step-circle:hover {
  transform: scale(1.15);
}
.step-circle.bg-gold-400:hover {
  box-shadow: 0 0 0 8px rgba(8,220,255,0.22), 0 8px 20px -6px rgba(8,220,255,0.5);
}
.step-circle.bg-white\/10:hover {
  box-shadow: 0 0 0 8px rgba(255,255,255,0.12);
  background: rgba(8,220,255,0.15);
  border-color: rgba(8,220,255,0.3) !important;
}

/* ---------- 数字统计悬停 ---------- */
.stat-item {
  transition: transform .3s ease;
  cursor: pointer;
}
.stat-item:hover {
  transform: translateY(-3px);
}
.stat-item:hover .num {
  color: #08DCFF;
  transform: scale(1.06);
}
.stat-item .num {
  transition: color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  display: inline-block;
}

/* ---------- Hero 徽章悬停 ---------- */
.hero-badge {
  transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.hero-badge:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(8,220,255,0.45);
  transform: translateY(-2px);
}
.hero-badge:hover svg {
  transform: scale(1.15);
}
.hero-badge svg {
  transition: transform .3s ease;
}

/* ---------- FAQ 悬停 ---------- */
details.faq-item > summary {
  transition: color .25s ease, padding-left .3s cubic-bezier(.16,1,.3,1);
}
details.faq-item > summary:hover {
  color: #00C8F0;
  padding-left: 8px;
}
details.faq-item > summary:hover svg {
  stroke: #08DCFF;
}
details.faq-item > summary svg {
  transition: stroke .25s ease;
}

/* ---------- 玻璃卡片边框光晕 ---------- */
.glass-card {
  transition: border-color .4s ease, box-shadow .4s ease;
}
.glass-card:hover {
  border-color: rgba(8,220,255,0.42);
  box-shadow: 0 36px 70px -20px rgba(0,0,0,0.6), 0 0 36px -6px rgba(8,220,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ---------- 页脚链接滑入 ---------- */
.footer-link {
  transition: color .25s ease, padding-left .25s ease;
  display: inline-block;
}
.footer-link:hover {
  padding-left: 6px;
}

/* ---------- 咨询链接提示 ---------- */
a[onclick*="openConsult"] {
  position: relative;
}
a[onclick*="openConsult"]::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -14px;
  width: 6px;
  height: 6px;
  background: #08DCFF;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
}
a[onclick*="openConsult"]:hover::after {
  opacity: 0.7;
}

/* ---------- 滚动条悬停 ---------- */
::-webkit-scrollbar-thumb:hover {
  background: #4DE8FF;
}

/* ============================================================
   模块点击咨询 (Click-to-Consult Modules)
   ============================================================ */

.consult-clickable {
  position: relative;
  cursor: pointer;
}

.consult-clickable:active {
  transform: scale(0.985);
  transition: transform 0.1s ease;
}

.consult-clickable::before {
  content: '点击咨询';
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #050314;
  background: linear-gradient(135deg, #08DCFF, #00C8F0);
  padding: 3px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(8, 220, 255, 0.4);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

.consult-clickable:hover::before,
.consult-clickable:focus-visible::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.consult-clickable:focus-visible {
  outline: 2px solid #08DCFF;
  outline-offset: 3px;
  border-radius: 20px;
}

/* ============================================================
   背景图 + 蒙版 (Background Images with Masks)
   ============================================================ */

.bg-image-section {
  position: relative;
  overflow: hidden;
}

.bg-image-section .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.05);
  transition: transform 8s cubic-bezier(.16, 1, .3, 1);
}

.bg-image-section.is-visible .bg-image,
.bg-image-section:hover .bg-image {
  transform: scale(1);
}

.bg-image-section .bg-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(5,3,20,0.92) 0%, rgba(13,13,110,0.84) 40%, rgba(13,13,110,0.68) 70%, rgba(13,13,110,0.55) 100%);
}

.bg-image-section .bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 55%, rgba(5,3,20,0.55) 100%);
}

.bg-image-section > *:not(.bg-image):not(.bg-mask):not(.bg-vignette) {
  position: relative;
  z-index: 3;
}

.real-deal-card {
  background: linear-gradient(180deg, rgba(24,24,184,0.78), rgba(5,3,20,0.9));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(8,220,255,0.25);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}

.process-bg .bg-image {
  object-position: center 35%;
}

/* ============================================================
   媒体平台 Logo 网格背景 (Media Logo Grid)
   ============================================================ */

.media-matrix-section {
  position: relative;
  overflow: hidden;
}

.media-logo-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%), radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%), radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-composite: intersect;
}

.media-logo-grid-inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  padding: 24px;
  width: 130%;
  margin-left: -15%;
  transform: rotate(-8deg);
  animation: mediaFloat 26s linear infinite;
}

@media (max-width: 768px) {
  .media-logo-grid-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 150%;
    margin-left: -25%;
  }
}

.mlogo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(8,220,255,0.14);
  color: rgba(77,232,255,0.22);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color .4s ease, border-color .4s ease, background .4s ease;
}

@media (max-width: 768px) {
  .mlogo {
    height: 48px;
    font-size: 12px;
    border-radius: 12px;
  }
}

@keyframes mediaFloat {
  0%   { transform: rotate(-8deg) translateY(0); }
  50%  { transform: rotate(-8deg) translateY(-22px); }
  100% { transform: rotate(-8deg) translateY(0); }
}

.bg-mask-soft {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at center, rgba(13,13,110,0.78) 0%, rgba(13,13,110,0.55) 50%, rgba(5,3,20,0.88) 100%),
    linear-gradient(180deg, rgba(5,3,20,0.6) 0%, transparent 25%, transparent 75%, rgba(5,3,20,0.6) 100%);
}

/* 平台分类标签 */
.media-tag {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(8,220,255,0.2);
  padding: 3px 9px;
  border-radius: 999px;
  transition: background .3s ease, border-color .3s ease;
}

.real-deal-card:hover .media-tag {
  background: rgba(8,220,255,0.12);
  border-color: rgba(8,220,255,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .bg-image-section .bg-image {
    transform: none;
    transition: none;
  }
}