/* 主题与基础色：黑底 + 百度蓝高亮 */
:root{
  --bg:#000000;
  --fg:#ffffff;
  --muted:#9ca3af;
  --baidu-blue:#2932e1;
  --baidu-light:#4285f4;
  --card:#0b0b0f;
  --border:rgba(255,255,255,0.08);
  --accent-a:rgba(41,50,225,0.16);
  --accent-b:rgba(66,133,244,0.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body.theme-dark{background:var(--bg);color:var(--fg);font-family:'Microsoft YaHei',PingFang SC,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}

/* 容器与栅格 */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.text-center{text-align:center}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center}
.small{font-size:14px}
.muted{color:var(--muted)}
.relative{position:relative}
.z-1{position:relative;z-index:1}
.min-h-screen{min-height:100vh}
.section{padding:96px 0;position:relative}

/* 首屏：纯色渐变（无图形元素），高端配色 */
.hero-bg-solid{position:absolute;inset:0;z-index:0;background:
  linear-gradient(180deg, #05060d 0%, #0a0f2a 55%, #05060d 100%)}

/* 渐变与发光：高亮色自身透明度渐变，不互相渐变 */
.bg-gradient{position:absolute;inset:0;background:
  radial-gradient(800px 300px at 85% -10%, rgba(41,50,225,0.10), transparent 60%),
  radial-gradient(700px 280px at 10% 110%, rgba(41,50,225,0.07), transparent 60%);
  filter:saturate(120%);
}

.gradient-text{background:linear-gradient(135deg, rgba(41,50,225,1), rgba(41,50,225,0.65), rgba(41,50,225,1));
  background-size:300% 300%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:gradientShift 6s ease-in-out infinite}

@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 文字层级：超大视觉元素 */
.headline-xxl{font-size:clamp(44px,9vw,120px);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:20px 0 24px}
.headline-xxl .sub{display:block;font-size:clamp(20px,2.8vw,32px);font-weight:300;color:#cfd8ff;margin-top:14px;opacity:.92}
.headline-xl{font-size:clamp(32px,5.5vw,56px);font-weight:900;letter-spacing:-.02em;margin-bottom:12px}
.lede{max-width:920px;margin:18px auto 0;color:#dbe1ff;opacity:.92;line-height:1.95;font-size:clamp(16px,2.1vw,18px)}

.hero-number{font-size:clamp(64px,14vw,140px);font-weight:1000;line-height:.8;opacity:.9;margin-bottom:12px}
.section-number{font-size:clamp(40px,10vw,96px);font-weight:900;line-height:.9;margin-bottom:8px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 28px;border-radius:999px;border:1px solid var(--border);color:#fff;text-decoration:none;font-weight:700;transition:all .25s}
.btn i{font-size:20px}
.btn-primary{background:rgba(255,255,255,0.04)}
.btn-primary:hover{background:rgba(41,50,225,0.22)}
.btn-secondary{background:transparent}
.btn-secondary:hover{background:rgba(255,255,255,0.08)}

.cta-group{display:flex;gap:16px;justify-content:center;margin-top:28px}

/* Bento Grid */
.bento-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:28px}
.bento-card{grid-column:span 6;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid var(--border);border-radius:22px;padding:24px;position:relative;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease}
.bento-card:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(41,50,225,0.18)}
.bento-card.wide{grid-column:span 12}
.bento-card.tall{min-height:280px}
.bento-card.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.card-accent{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(135deg, rgba(41,50,225,0.14), rgba(41,50,225,0.05));opacity:0;transition:opacity .25s}
.bento-card:hover .card-accent{opacity:1}

.icon-wrap{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(41,50,225,0.20), rgba(41,50,225,0.08));margin-bottom:16px}
.icon-wrap.large{width:88px;height:88px;border-radius:20px}
.icon-wrap i{font-size:28px;color:#dfe7ff}

/* 统一客服卡片的版式与排版 */
.support-card{padding-top:28px;padding-bottom:28px}
.support-icon i{font-size:34px}
.support-title{font-size:20px;font-weight:900;margin-top:10px;margin-bottom:6px}
.support-subtitle{font-size:16px;color:#cfd8ff;opacity:.92}
.support-desc{margin-top:10px;color:#9ca3af;max-width:360px}

.mega-number{font-size:clamp(40px,9vw,96px);font-weight:1000;letter-spacing:-.02em}
.mega-number.accent{color:var(--baidu-blue)}
.mega-caption{font-weight:700;color:var(--muted);margin-top:4px}
.price-row{display:flex;align-items:flex-end;gap:10px}
.price-unit{font-size:16px;color:#9ca3af;margin-bottom:10px}
.wechat-id{font-size:clamp(18px,3.2vw,28px);font-weight:800;letter-spacing:0.5px;word-break:break-all;color:#dfe7ff}

.chart-title{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.chart{height:260px;border:1px solid var(--border);border-radius:16px;background:#0a0b12}

/* 页脚 */
.footer{padding:48px 0;border-top:1px solid #111}
.footer .brand{font-size:28px;font-weight:900;margin-bottom:8px}

/* 滚动动效（Apple风） */
[data-reveal]{opacity:0;transform:translateY(36px);transition:transform .7s cubic-bezier(.23,1,.32,1), opacity .7s}
[data-reveal].is-visible{opacity:1;transform:none}
.scroll-indicator{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);opacity:.8;color:var(--baidu-blue);animation:float 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}

/* 响应式 */
@media (max-width:1024px){
  .bento-card{grid-column:span 12}
}
@media (max-width:640px){
  .section{padding:72px 0}
  .chart{height:220px}
}