/* =========================================================
   旺财28娱乐 —— 「锦鲤国潮 · 流彩集市」设计系统
   配色：奶油米白 × 翡翠青 × 赤陶橙 × 琥珀金
   风格：国潮剪纸 + 有机流体 + 手作质感
   ========================================================= */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --cream:#FBF3E4;
  --cream-deep:#F4E6CC;
  --jade:#0E6E55;
  --jade-light:#3D9A7D;
  --persimmon:#FF6B3D;
  --persimmon-deep:#E6501F;
  --gold:#E8A83C;
  --ink:#2B241C;
  --line:#E4D2AE;
  --radius-blob:63% 37% 43% 57% / 51% 46% 54% 49%;
}

body{
  font-family: system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--ink);
  position:relative;
}

/* 背景铜钱纹理 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,107,61,0.06) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 70%, rgba(14,110,85,0.07) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 30%, rgba(232,168,60,0.08) 0 3px, transparent 4px);
  background-size: 140px 140px, 180px 180px, 160px 160px;
}

/* ============ 核心布局 ============ */
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; position:relative; }
.section:nth-child(even){ background:var(--cream-deep); }
.section:nth-child(even)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--persimmon) 0 24px, var(--gold) 24px 48px);
  opacity:0.5;
}

/* ============ 导航 ============ */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(251,243,228,0.9);
  backdrop-filter:blur(12px);
  border-bottom:2px dashed var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; max-width:1200px; margin:0 auto; padding:0 24px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.3rem; text-decoration:none; color:var(--ink);
  letter-spacing:1px;
}
.logo-icon{
  width:40px; height:40px; border-radius:var(--radius-blob);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; font-weight:900;
  background:linear-gradient(135deg, var(--persimmon), var(--gold));
  box-shadow:0 4px 0 rgba(230,80,31,0.3);
}
.main-nav{ display:flex; align-items:center; gap:8px; list-style:none; }
.main-nav a{
  text-decoration:none; font-size:0.92rem; font-weight:700; color:var(--ink);
  padding:8px 16px; border-radius:20px; transition:0.25s;
}
.main-nav a:hover{ background:var(--jade); color:#fff; }
.nav-cta{
  padding:10px 24px!important; border-radius:20px;
  background:linear-gradient(120deg, var(--persimmon), var(--persimmon-deep));
  color:#fff!important; font-weight:800;
  box-shadow:0 4px 14px rgba(255,107,61,0.4);
}
.nav-cta:hover{ transform:translateY(-2px); background:var(--persimmon)!important; }
.menu-toggle{
  display:none; width:38px; height:38px; border-radius:10px;
  border:2px solid var(--jade); background:none; cursor:pointer;
}

/* ============ Hero ============ */
.hero{
  min-height:78vh; display:flex; align-items:center;
  padding-top:72px; position:relative;
}
.hero::before{
  content:"财";
  position:absolute; right:-40px; top:10%;
  font-size:26rem; font-weight:900; color:var(--gold);
  opacity:0.08; line-height:1; pointer-events:none;
  font-family:'STKaiti','KaiTi',serif;
}
.hero-content{ max-width:720px; position:relative; z-index:2; }
.hero-eyebrow{
  display:inline-block; font-size:0.85rem; font-weight:800;
  padding:6px 18px; border-radius:20px; margin-bottom:20px;
  background:var(--jade); color:#fff; letter-spacing:2px;
}
.hero h1{
  font-size:3.2rem; line-height:1.25; margin-bottom:22px;
  font-weight:900; color:var(--ink);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg, var(--persimmon), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ font-size:1.12rem; opacity:0.75; max-width:560px; margin-bottom:36px; line-height:1.8; }
.hero-buttons{ display:flex; gap:16px; }
.hero-image{ border-radius:var(--radius-blob); overflow:hidden; border:4px solid #fff; box-shadow:0 20px 50px rgba(14,110,85,0.18); }
.hero-image img{ width:100%; height:auto; display:block; }

/* ============ 按钮 ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 30px;
  border-radius:14px; font-weight:800; cursor:pointer; border:none;
  text-decoration:none; transition:0.25s; font-size:0.98rem;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(120deg, var(--persimmon), var(--persimmon-deep));
  box-shadow:0 6px 0 rgba(180,60,10,0.35);
}
.btn-primary:hover{ transform:translateY(3px); box-shadow:0 3px 0 rgba(180,60,10,0.35); }
.btn-outline{
  background:transparent; border:2.5px solid var(--jade); color:var(--jade);
}
.btn-outline:hover{ background:var(--jade); color:#fff; }

/* ============ 标签/标题 ============ */
.section-label{
  display:inline-block; font-size:0.82rem; font-weight:800; letter-spacing:3px;
  margin-bottom:14px; color:var(--persimmon-deep); text-transform:uppercase;
}
.section-title{
  font-size:2.3rem; margin-bottom:16px; font-weight:900; color:var(--ink);
  position:relative; display:inline-block;
}
.section-title::after{
  content:""; display:block; width:64px; height:5px; margin-top:12px;
  background:linear-gradient(90deg, var(--gold), var(--persimmon));
  border-radius:4px;
}
.section-desc{ max-width:600px; opacity:0.72; margin-bottom:44px; line-height:1.8; }

/* ============ 卡片网格 ============ */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px; }
.category-card{
  border-radius:22px; padding:32px; background:#fff;
  border:2px solid var(--line); transition:0.3s; position:relative; overflow:hidden;
}
.category-card::before{
  content:""; position:absolute; top:-30px; right:-30px; width:90px; height:90px;
  background:var(--cream-deep); border-radius:50%;
}
.category-card:hover{
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:0 16px 32px rgba(14,110,85,0.15);
  border-color:var(--jade-light);
}
.card-icon{
  width:52px; height:52px; border-radius:16px 16px 16px 4px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg, var(--jade), var(--jade-light));
  position:relative; z-index:1;
}
.card-link{ font-weight:800; font-size:0.86rem; text-decoration:none; color:var(--persimmon-deep); position:relative; z-index:1; }

/* ============ 特性块 ============ */
.feature-block{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.feature-image{ border-radius:28px; overflow:hidden; border:4px solid #fff; box-shadow:0 18px 40px rgba(232,168,60,0.25); }
.feature-image img{ width:100%; height:auto; display:block; }
.feature-list{ list-style:none; }
.feature-list li{
  padding:10px 0; display:flex; align-items:center; gap:10px; font-size:1.02rem;
}
.feature-list li::before{
  content:'✓'; font-weight:900; color:#fff; background:var(--jade);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:0.8rem; flex-shrink:0;
}

/* ============ 数据条 ============ */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center; }
.stat-item{
  padding:30px 20px; border-radius:20px; background:#fff;
  border:2px solid var(--line); position:relative;
}
.stat-item:nth-child(odd){ transform:rotate(-1.5deg); }
.stat-item:nth-child(even){ transform:rotate(1.5deg); }
.stat-number{
  font-size:2.4rem; font-weight:900;
  background:linear-gradient(120deg, var(--persimmon), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ font-size:0.9rem; opacity:0.65; margin-top:8px; font-weight:600; }

/* ============ 内容墙 ============ */
.content-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; }
.content-wall-item{
  border-radius:20px; overflow:hidden; border:2px solid var(--line);
  background:#fff; transition:0.3s;
}
.content-wall-item:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(14,110,85,0.15); }
.content-wall-item img{ width:100%; height:200px; object-fit:cover; }
.content-wall-body{ padding:22px; }
.content-wall-body h3{ margin-bottom:8px; font-weight:800; }

/* ============ FAQ ============ */
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{
  border:2px solid var(--line); border-radius:16px; margin-bottom:12px;
  overflow:hidden; cursor:pointer; background:#fff; transition:0.2s;
}
.faq-item:hover{ border-color:var(--gold); }
.faq-item .faq-question{
  padding:18px 22px; font-weight:800; display:flex; justify-content:space-between;
  color:var(--ink);
}
.faq-item .faq-answer{ padding:0 22px 18px; display:none; opacity:0.72; line-height:1.7; }
.faq-item.open{ border-color:var(--persimmon); }
.faq-item.open .faq-answer{ display:block; }

/* ============ CTA横幅 ============ */
.cta-banner{
  padding:64px 30px; text-align:center; border-radius:32px; color:#fff;
  background:linear-gradient(120deg, var(--jade) 0%, var(--jade-light) 100%);
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:"招财进宝"; position:absolute; font-size:8rem; font-weight:900;
  opacity:0.08; top:-20px; left:-10px; white-space:nowrap;
  font-family:'STKaiti','KaiTi',serif;
}
.cta-banner h2{ color:#fff; position:relative; }
.cta-banner p{ position:relative; opacity:0.9; margin-bottom:28px; }
.cta-banner .btn-primary{
  background:#fff; color:var(--jade)!important;
  box-shadow:0 6px 0 rgba(0,0,0,0.15); position:relative;
}
.cta-banner .btn-primary:hover{ color:var(--persimmon-deep)!important; }

/* ============ 页脚 ============ */
.site-footer{
  padding:64px 0 30px; background:var(--ink); color:#f0e6d2;
}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; }
.footer-brand .logo{ color:#fff; margin-bottom:12px; }
.footer-brand p{ opacity:0.6; line-height:1.8; font-size:0.9rem; }
.footer-col h4{ margin-bottom:16px; font-size:1rem; color:var(--gold); }
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:#f0e6d2; opacity:0.65; text-decoration:none; font-size:0.9rem; transition:0.2s; }
.footer-col a:hover{ opacity:1; color:var(--gold); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); margin-top:44px; padding-top:22px;
  text-align:center; font-size:0.85rem; opacity:0.55;
}

/* ============ 工具类 ============ */
.text-accent{ color:var(--persimmon-deep); }
.text-center{ text-align:center; }
.seo-description{ max-width:600px; margin:0 auto 48px; opacity:0.7; line-height:1.8; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }

/* ============ 响应式 ============ */
@media (max-width: 768px){
  .feature-block{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; align-items:center; justify-content:center; }
  .main-nav.open{
    display:flex; flex-direction:column; position:absolute; top:72px; left:0;
    width:100%; background:var(--cream); padding:20px;
    border-bottom:2px dashed var(--line);
  }
  .hero h1{ font-size:2.3rem; }
  .hero::before{ font-size:14rem; }
}
@media (max-width: 480px){
  .cards-grid, .content-wall, .stats-bar{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-buttons{ flex-direction:column; }
  .section{ padding:60px 0; }
}