.hero{
  position:relative;
  padding:80px 0 60px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--primary-light) 0%,var(--bg-white) 100%)
}
.hero::before{
  content:'';
  position:absolute;
  top:-100px;
  right:-100px;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(108,92,231,0.1) 0%,transparent 70%);
  border-radius:50%
}
.hero::after{
  content:'';
  position:absolute;
  bottom:-80px;
  left:-80px;
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(245,158,11,0.08) 0%,transparent 70%);
  border-radius:50%
}
.hero-content{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto}
.hero h1{font-size:48px;font-weight:800;line-height:1.2;margin-bottom:20px;color:var(--dark)}
.hero h1 span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{
  font-size:18px;
  color:var(--text-secondary);
  max-width:600px;
  margin:0 auto 36px;
  line-height:1.8
}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-btns .btn-primary{
  padding:14px 36px;
  background:var(--gradient);
  color:#fff;
  border-radius:var(--radius-full);
  font-size:16px;
  font-weight:600;
  transition:all 0.3s;
  display:inline-block;
  box-shadow:0 4px 15px rgba(108,92,231,0.3)
}
.hero-btns .btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(108,92,231,0.4)}
.hero-btns .btn-outline{
  padding:14px 36px;
  border:2px solid var(--primary);
  color:var(--primary);
  border-radius:var(--radius-full);
  font-size:16px;
  font-weight:600;
  transition:all 0.3s;
  display:inline-block;
  background:#fff
}
.hero-btns .btn-outline:hover{background:var(--primary-light);transform:translateY(-3px)}
.hero-stats{display:flex;justify-content:center;gap:60px;margin-top:60px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat .num{font-size:40px;font-weight:800;color:var(--primary)}
.hero-stat .label{font-size:14px;color:var(--text-secondary);margin-top:4px}

.section{padding:80px 0}
.section-title{
  text-align:center;
  font-size:32px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--dark)
}
.section-subtitle{text-align:center;font-size:16px;color:var(--text-secondary);max-width:600px;margin:0 auto 48px}

.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.feature-card{
  background:var(--bg-white);
  border-radius:var(--radius);
  padding:32px 24px;
  text-align:center;
  border:1px solid var(--border);
  transition:all 0.3s
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.feature-card .icon{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  font-size:24px;
  color:#fff;
  background:var(--gradient)
}
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)}
.feature-card p{font-size:14px;color:var(--text-secondary);line-height:1.7}

.roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.role-card{
  background:var(--bg-white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  transition:all 0.3s;
  cursor:pointer
}
.role-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.role-card-img{
  width:100%;
  height:200px;
  overflow:hidden;
  background:var(--primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  color:var(--primary)
}
.role-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.role-card:hover .role-card-img img{transform:scale(1.08)}
.role-card-body{padding:16px}
.role-card-body h4{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text)}
.role-card-body p{font-size:13px;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.role-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.role-tag{
  padding:2px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:500
}
.role-tag.free{background:#DCFCE7;color:#166534}
.role-tag.zh{background:#DBEAFE;color:#1E40AF}
.role-tag.story{background:#FEF3C7;color:#92400E}
.role-tag.hot{background:#FCE7F3;color:#9D174D}

.scene-section{background:var(--dark);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.scene-section::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(108,92,231,0.15) 0%,rgba(245,158,11,0.1) 100%);
  pointer-events:none
}
.scene-section .section-title{color:#fff}
.scene-section .section-subtitle{color:rgba(255,255,255,0.7)}
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.scene-card{
  background:rgba(255,255,255,0.08);
  border-radius:var(--radius);
  padding:28px;
  border:1px solid rgba(255,255,255,0.1);
  transition:all 0.3s;
  backdrop-filter:blur(10px)
}
.scene-card:hover{background:rgba(255,255,255,0.12);transform:translateY(-4px)}
.scene-card .icon{font-size:32px;margin-bottom:16px;color:var(--accent)}
.scene-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.scene-card p{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.7}
.scene-card .code-block{
  margin-top:16px;
  background:rgba(0,0,0,0.3);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  overflow-x:auto;
  font-size:12px;
  font-family:'SF Mono','Fira Code',monospace;
  color:#A5B4FC;
  line-height:1.6
}

.code-showcase{
  background:var(--dark);
  padding:60px 0
}
.code-showcase-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center
}
.code-box{
  background:#151320;
  border-radius:var(--radius);
  padding:24px;
  border:1px solid rgba(255,255,255,0.08);
  overflow-x:auto;
  font-family:'SF Mono','Fira Code',monospace;
  font-size:13px;
  line-height:1.8;
  color:#E2E8F0
}
.code-box .keyword{color:#C084FC}
.code-box .string{color:#6EE7B7}
.code-box .comment{color:#64748B}
.code-box .func{color:#F59E0B}
.code-info h2{font-size:28px;font-weight:700;color:#fff;margin-bottom:16px}
.code-info p{color:rgba(255,255,255,0.7);font-size:15px;line-height:1.8;margin-bottom:24px}

.trust-section{background:var(--bg-white)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{
  background:var(--bg-light);
  border-radius:var(--radius);
  padding:24px;
  border:1px solid var(--border);
  transition:all 0.3s
}
.review-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.review-stars{color:var(--accent);font-size:14px;margin-bottom:12px}
.review-text{font-size:14px;color:var(--text);line-height:1.8;margin-bottom:12px}
.review-author{font-size:13px;color:var(--text-secondary);font-weight:500}

.news-grid-home{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card-home{
  background:var(--bg-white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  transition:all 0.3s
}
.news-card-home:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.news-card-home .img{width:100%;height:180px;overflow:hidden;background:var(--bg-light)}
.news-card-home .img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.news-card-home:hover .img img{transform:scale(1.08)}
.news-card-home .body{padding:16px 18px}
.news-card-home .body h4{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.news-card-home .body p{font-size:13px;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
.news-card-home .body .date{font-size:12px;color:var(--text-secondary)}

.hero-visual{position:relative;margin-top:40px;max-width:800px;margin-left:auto;margin-right:auto}
.hero-visual .chat-preview{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  border:1px solid var(--border)
}
.chat-preview-header{
  background:var(--bg-light);
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--border)
}
.chat-preview-header .dot{width:10px;height:10px;border-radius:50%}
.chat-preview-header .dot:nth-child(1){background:#EF4444}
.chat-preview-header .dot:nth-child(2){background:#F59E0B}
.chat-preview-header .dot:nth-child(3){background:#22C55E}
.chat-preview-header .title{font-size:12px;color:var(--text-secondary);margin-left:8px}
.chat-preview-body{padding:20px}
.chat-msg{display:flex;gap:10px;margin-bottom:16px}
.chat-msg.ai{align-items:flex-start}
.chat-msg.user{justify-content:flex-end}
.chat-msg .avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--primary);
  flex-shrink:0
}
.chat-msg .bubble{
  max-width:70%;
  padding:10px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.6
}
.chat-msg.ai .bubble{background:var(--bg-light);color:var(--text);border-bottom-left-radius:4px}
.chat-msg.user .bubble{background:var(--gradient);color:#fff;border-bottom-right-radius:4px}

@media(max-width:992px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .roles-grid{grid-template-columns:repeat(2,1fr)}
  .scene-grid{grid-template-columns:1fr}
  .code-showcase-inner{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .hero-stats{gap:30px}
}
@media(max-width:768px){
  .hero h1{font-size:28px}
  .hero p{font-size:16px}
  .hero-stats{gap:20px}
  .hero-stat .num{font-size:30px}
  .features-grid{grid-template-columns:1fr}
  .roles-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .news-grid-home{grid-template-columns:1fr}
  .section{padding:50px 0}
  .section-title{font-size:24px}
}

/* ========== 首页 section 背景变体 ========== */
.section-bg-white{background:var(--bg-white)}
.section-bg-light{background:var(--bg-light)}

/* ========== 查看更多角色卡片 ========== */
.roles-more-card{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-white);
  border:2px dashed var(--primary-light);
  border-radius:var(--radius);
  font-size:16px;
  font-weight:600;
  color:var(--primary);
  transition:all 0.3s;
  text-decoration:none;
  min-height:200px;
  cursor:pointer
}
.roles-more-card:hover{
  border-color:var(--primary);
  background:var(--primary-light)
}
.roles-more-card .inner{text-align:center}
.roles-more-card .inner .icon{font-size:36px;margin-bottom:8px}

/* ========== 首页FAQ区块 ========== */
.faq-section-home{max-width:800px;margin:0 auto}

/* ========== 查看全部资讯按钮 ========== */
.news-view-more{
  text-align:center;
  margin-top:32px
}
.news-view-more a{
  display:inline-block;
  padding:12px 32px;
  border:2px solid var(--primary);
  color:var(--primary);
  border-radius:50px;
  font-weight:600;
  font-size:15px;
  transition:all 0.3s
}
.news-view-more a:hover{
  background:var(--primary);
  color:#fff
}

/* ========== 代码展示区按钮 ========== */
.code-info .btn{
  display:inline-block;
  padding:12px 28px;
  background:var(--gradient);
  color:#fff;
  border-radius:50px;
  font-weight:600;
  transition:all 0.3s
}
.code-info .btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(108,92,231,0.3)}

/* ========== 角色卡片图标（备用图标占位） ========== */
.role-card-img .placeholder-icon{
  font-size:48px;
  color:var(--primary)
}
.role-card-img .placeholder-icon.accent{
  color:var(--accent)
}