/* ============================================
   多多28娱乐官网 — "幸运糖果" 新拟态复古手账风
   配色：奶油米白 + 桃粉 + 薄荷青 + 琥珀金
   ============================================ */

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

:root{
  --cream:#FFF6E9;
  --cream-dark:#FBEBD3;
  --ink:#20263D;
  --pink:#FF5D8F;
  --pink-dark:#E8407A;
  --teal:#00B8A9;
  --teal-dark:#029385;
  --gold:#FFC93C;
  --border:#20263D;
}

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

/* 核心布局 */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:80px 0; position:relative; }
.section:nth-child(even) { background:var(--cream-dark); }
.section:nth-child(odd) {
  background-image:
    radial-gradient(circle at 92% 8%, rgba(255,201,60,0.25) 0%, transparent 40%),
    radial-gradient(circle at 6% 90%, rgba(0,184,169,0.15) 0%, transparent 40%);
}

/* 导航 */
.site-header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(255,246,233,0.9);
  backdrop-filter:blur(12px);
  border-bottom:3px solid var(--border);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; 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:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:900;
  background:var(--gold);
  border:3px solid var(--border);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--border);
}
.main-nav { display:flex; align-items:center; gap:28px; list-style:none; }
.main-nav a {
  text-decoration:none; font-size:0.92rem; font-weight:700;
  color:var(--ink); position:relative; transition:0.2s;
  padding:6px 2px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:3px;
  background:var(--pink); transition:width .25s ease;
}
.main-nav a:hover{ color:var(--pink-dark); }
.main-nav a:hover::after{ width:100%; }
.nav-cta {
  padding:9px 22px; border-radius:100px; color:#fff!important; font-weight:800;
  background:var(--pink);
  border:3px solid var(--border);
  box-shadow:3px 3px 0 var(--border);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--border); }
.menu-toggle {
  display:none; width:40px; height:40px; border-radius:8px;
  border:3px solid var(--border); background:var(--gold);
  align-items:center; justify-content:center; cursor:pointer;
}

/* Hero */
.hero {
  min-height:78vh; display:flex; align-items:center;
  padding-top:68px;
  position:relative;
}
.hero::before{
  content:'幸运'; position:absolute; right:-30px; top:10%;
  font-size:14rem; font-weight:900; color:rgba(255,93,143,0.08);
  z-index:0; pointer-events:none; letter-spacing:-10px;
}
.hero-content { max-width:720px; position:relative; z-index:1; }
.hero-eyebrow {
  display:inline-block; font-size:0.85rem; font-weight:800;
  padding:6px 18px; border-radius:100px; margin-bottom:20px;
  background:var(--teal); color:#fff;
  border:2.5px solid var(--border);
  box-shadow:3px 3px 0 var(--border);
}
.hero h1 {
  font-size:3.2rem; line-height:1.25; margin-bottom:22px;
  font-weight:900; color:var(--ink);
}
.hero h1 span, .hero h1 em{
  font-style:normal;
  background:var(--gold);
  padding:2px 12px;
  border-radius:6px;
  box-shadow:4px 4px 0 var(--border);
  display:inline-block;
}
.hero p { font-size:1.1rem; opacity:0.75; max-width:560px; margin-bottom:36px; font-weight:500; }
.hero-buttons { display:flex; gap:16px; }
.hero-image { border-radius:24px; overflow:hidden; border:4px solid var(--border); box-shadow:8px 8px 0 var(--gold); }
.hero-image img { width:100%; height:auto; display:block; }

/* 按钮 */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:14px 30px;
  border-radius:100px; font-weight:800; cursor:pointer; border:3px solid var(--border);
  text-decoration:none; transition:0.2s; font-size:0.95rem;
}
.btn-primary {
  color:#fff; background:var(--pink);
  box-shadow:4px 4px 0 var(--border);
}
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--border); background:var(--pink-dark); }
.btn-outline {
  background:var(--cream); border:3px solid var(--border); color:var(--ink);
  box-shadow:4px 4px 0 var(--teal);
}
.btn-outline:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--teal); }

/* 标题标签 */
.section-label {
  display:inline-block; font-size:0.8rem; font-weight:800; letter-spacing:3px;
  margin-bottom:14px; color:var(--pink-dark); text-transform:uppercase;
}
.section-title { font-size:2.3rem; margin-bottom:16px; font-weight:900; color:var(--ink); }
.section-desc { max-width:600px; opacity:0.7; margin-bottom:44px; font-weight:500; }

/* 卡片网格 */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px; }
.category-card {
  border-radius:20px; padding:30px; border:3px solid var(--border);
  background:#fff; transition:0.25s;
  box-shadow:5px 5px 0 var(--border);
}
.category-card:nth-child(3n+1){ box-shadow:5px 5px 0 var(--pink); }
.category-card:nth-child(3n+2){ box-shadow:5px 5px 0 var(--teal); }
.category-card:nth-child(3n+3){ box-shadow:5px 5px 0 var(--gold); }
.category-card:hover { transform:translate(-4px,-4px); box-shadow:9px 9px 0 var(--border); }
.card-icon {
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; margin-bottom:18px; font-size:1.4rem;
  background:var(--cream-dark); border:2.5px solid var(--border);
}
.card-link { font-weight:800; font-size:0.88rem; text-decoration:none; color:var(--pink-dark); }

/* 特性块 */
.feature-block { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.feature-image { border-radius:20px; overflow:hidden; border:4px solid var(--border); box-shadow:8px 8px 0 var(--teal); }
.feature-image img { width:100%; height:auto; display:block; }
.feature-list { list-style:none; }
.feature-list li { padding:8px 0; display:flex; align-items:center; gap:10px; font-weight:600; }
.feature-list li::before {
  content:'✓'; font-weight:900; color:#fff; background:var(--teal);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:0.75rem; border:2px solid var(--border);
  flex-shrink:0;
}

/* 数据条 */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center; }
.stat-item {
  padding:28px; border-radius:18px; border:3px solid var(--border);
  background:#fff; box-shadow:5px 5px 0 var(--border);
}
.stat-item:nth-child(odd){ background:var(--gold); }
.stat-item:nth-child(even){ background:#fff; }
.stat-number { font-size:2.4rem; font-weight:900; color:var(--ink); }
.stat-label { font-size:0.9rem; opacity:0.65; margin-top:8px; font-weight:700; }

/* 内容墙 */
.content-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; }
.content-wall-item {
  border-radius:18px; overflow:hidden; border:3px solid var(--border);
  transition:0.25s; background:#fff; box-shadow:5px 5px 0 var(--border);
}
.content-wall-item:hover { transform:translate(-4px,-4px); box-shadow:9px 9px 0 var(--border); }
.content-wall-item img { width:100%; height:200px; object-fit:cover; display:block; border-bottom:3px solid var(--border); }
.content-wall-body { padding:22px; }

/* FAQ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
  border:3px solid var(--border); border-radius:16px; margin-bottom:12px;
  overflow:hidden; cursor:pointer; background:#fff;
  box-shadow:4px 4px 0 var(--border); transition:0.2s;
}
.faq-item:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--border); }
.faq-item .faq-question { padding:18px 22px; font-weight:800; display:flex; justify-content:space-between; }
.faq-item .faq-answer { padding:0 22px 18px; display:none; opacity:0.75; font-weight:500; }
.faq-item.open { background:var(--cream-dark); }
.faq-item.open .faq-answer { display:block; }

/* CTA横幅 */
.cta-banner {
  padding:64px 30px; text-align:center; border-radius:24px; color:#fff;
  background:linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  border:4px solid var(--border); box-shadow:8px 8px 0 var(--gold);
  position:relative; overflow:hidden;
}
.cta-banner h2 { color:#fff; font-weight:900; }
.cta-banner .btn-primary { background:#fff; color:var(--pink-dark); box-shadow:4px 4px 0 rgba(255,255,255,0.5); }
.cta-banner .btn-primary:hover{ background:var(--gold); color:var(--ink); }

/* 页脚 */
.site-footer {
  padding:64px 0 28px;
  background:var(--ink);
  color:#EAE7F5;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; }
.footer-brand { font-weight:800; font-size:1.2rem; color:#fff; }
.footer-col h4{ color:var(--gold); margin-bottom:16px; font-size:1rem; font-weight:800; }
.footer-col ul{ list-style:none; }
.footer-col ul li{ margin-bottom:10px; opacity:0.75; font-size:0.9rem; }
.footer-col a{ color:#EAE7F5; text-decoration:none; }
.footer-col a:hover{ color:var(--pink); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.15); margin-top:44px; padding-top:22px;
  text-align:center; font-size:0.85rem; opacity:0.6;
}

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

/* 响应式 */
@media (max-width: 768px) {
  .hero::before{ font-size:8rem; }
  .hero h1{ font-size:2.2rem; }
  .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; }
  .main-nav.open {
    display:flex; flex-direction:column; position:absolute; top:68px; left:0;
    width:100%; background:var(--cream); padding:20px; border-bottom:3px solid var(--border);
    gap:16px;
  }
}
@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; }
  .hero h1{ font-size:1.8rem; }
}