/* ============================================================
   小白云 - 二次元风格官网主题
   魔方财务 · 官网
   ============================================================ */
@import url("../../../clientarea/xiaobaiyun/css/style.css");

/* ---------- 官网专用：导航 ---------- */
.web-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border: none;
}
.web-nav .navbar-inner { background: transparent; }
.web-nav.scrolled {
  position: fixed;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
}

/* ---------- Hero 英雄区 ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 107, 157, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(183, 148, 244, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(91, 184, 247, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #fff7fa 0%, #fff0f5 100%);
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  animation: blob-float 8s ease-in-out infinite;
}
.hero-blob.b1 { width: 400px; height: 400px; background: var(--c-primary); top: -100px; right: -50px; }
.hero-blob.b2 { width: 300px; height: 300px; background: var(--c-lavender); bottom: -50px; left: 10%; animation-delay: -3s; }
.hero-blob.b3 { width: 250px; height: 250px; background: var(--c-secondary); top: 40%; right: 20%; animation-delay: -5s; }
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.1); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px var(--sp-5) 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-weight: 600;
  margin-bottom: var(--sp-5);
  box-shadow: var(--sh-sm);
}
.hero-title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--sp-5);
}
.hero-title .gradient-text { font-size: inherit; }
.hero-desc {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  margin-bottom: var(--sp-8);
  max-width: 480px;
}
.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border);
}
.hero-stat-num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-text);
}
.hero-stat-label {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* Hero 插画区 */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mascot {
  font-size: 200px;
  filter: drop-shadow(0 20px 40px rgba(255, 107, 157, 0.3));
  animation: mascot-bounce 3s ease-in-out infinite;
}
@keyframes mascot-bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}
.hero-float-card {
  position: absolute;
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.hero-float-card.c1 { top: 10%; left: 0; animation: float-card 4s ease-in-out infinite; }
.hero-float-card.c2 { bottom: 15%; right: 0; animation: float-card 4s ease-in-out infinite -2s; }
.hero-float-card .fc-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: #fff;
}
@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ---------- Section 通用 ---------- */
.section {
  padding: var(--sp-12) var(--sp-5);
  max-width: 1200px;
  margin: 0 auto;
}
.section-head {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.section-tag {
  display: inline-block;
  background: var(--c-primary-bg);
  color: var(--c-primary-dark);
  padding: 6px 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.section-title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin-bottom: var(--sp-3);
}
.section-subtitle {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- 特性网格 ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}
.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-primary-light);
}
.feature-icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  color: #fff;
}
.feature-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.feature-card p {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ---------- 价格方案 ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
}
.pricing-card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
  transition: all .3s;
  position: relative;
}
.pricing-card.featured {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-bg), var(--sh-lg);
  transform: scale(1.03);
}
.pricing-card.featured::before {
  content: '推荐';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--c-primary), var(--c-coral));
  color: #fff;
  padding: 4px 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.pricing-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.pricing-price {
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin-bottom: var(--sp-2);
}
.pricing-price span { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 400; }
.pricing-desc { color: var(--c-text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: var(--sp-6);
}
.pricing-features li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pricing-features li::before { content: '✅'; }

/* ---------- 数据展示 ---------- */
.stats-section {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-lavender) 100%);
  color: #fff;
  padding: var(--sp-12) var(--sp-5);
  margin: var(--sp-12) 0;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.1) 0%, transparent 60%);
}
.stats-row {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-8);
  position: relative;
  z-index: 1;
}
.stat-box { text-align: center; }
.stat-box .num {
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin-bottom: var(--sp-2);
}
.stat-box .label {
  font-size: var(--fs-sm);
  opacity: .9;
}

/* ---------- CTA 行动号召 ---------- */
.cta-section {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
}
.cta-card {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--c-primary-bg), var(--c-secondary-light));
  border-radius: var(--r-xl);
  padding: var(--sp-12);
  position: relative;
  overflow: hidden;
}
.cta-card h2 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
.cta-card p {
  color: var(--c-text-2);
  margin-bottom: var(--sp-8);
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 100px; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-mascot { font-size: 140px; }
}
@media (max-width: 768px) {
  .section-title { font-size: var(--fs-2xl); }
  .hero-title { font-size: var(--fs-2xl); }
}
:root{--fs-xs:10px;--fs-sm:11px;--fs-base:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:22px;--fs-3xl:27px;}
:root{--fs-xs:10px;--fs-sm:11px;--fs-base:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:22px;--fs-3xl:27px;}
.page-wrap{padding:120px 0 80px;min-height:100vh;background:linear-gradient(180deg,#fff7fa,#fff0f5);}
.container{max-width:1200px;margin:0 auto;padding:0 var(--sp-5);}
.page-header{text-align:center;margin-bottom:var(--sp-10);}
.page-title{font-size:var(--fs-2xl);font-weight:800;color:var(--c-text);margin-bottom:var(--sp-2);}
.page-subtitle{color:var(--c-text-2);font-size:var(--fs-md);}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-6);}
.product-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;transition:all .3s;}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--c-primary);}
.product-card-header{padding:var(--sp-4) var(--sp-5);background:linear-gradient
.product-card-header h3{margin:0;font-size:var(--fs-lg);font-weight:700;}
.product-card-body{padding:var(--sp-5);}
.product-desc{color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--sp-3);min-height:60px;}
.product-price{font-size:var(--fs-xl);font-weight:800;color:var(--c-primary);margin-bottom:var(--sp-3);}
.product-price span{font-size:var(--fs-sm);color:var(--c-text-3);font-weight:400;}
.product-soldout{text-align:center;padding:var(--sp-3);background:var(--c-bg-2);color:var(--c-text-3);border-radius:var(--r-md);}
.btn-block{display:block;width:100%;text-align:center;}
.pagination{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-10);}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-widthght:36px;padding:0 var(--sp-3);border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);text-decoration:none;}
.pagination a:hover{background:var(--c-primary);color:#fff;}
:root{--fs-xs:10px;--fs-sm:11px;--fs-base:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:22px;--fs-3xl:27px;}
:root{--fs-xs:10px;--fs-sm:11px;--fs-base:12px;--fs-md:13px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:22px;--fs-3xl:27px;}