/* ============================================================
   首页样式 (v4 · Bento Grid Light)
   布局语言：异形拼贴首屏 + 编号式区块头 + 编辑式列表
   ============================================================ */

/* ---------- Bento Hero — 异形拼贴首屏 ---------- */
.cbps8b{padding:3.25rem 0 0;background:linear-gradient(180deg,#eff6ff 0%,rgba(255,255,255,0) 340px)}
.cxznn7{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem}
.ce82yt{border-radius:20px;border:1px solid var(--color-border);background:var(--color-bg-card);box-shadow:var(--shadow-card);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}

/* 主卡：品牌主张 */
.cybw5t{grid-column:span 12;position:relative;overflow:hidden;padding:3.4rem 2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#ffffff 0%,#eff6ff 55%,#e0f2fe 100%);border-color:#dbeafe;min-height:320px}
.cn38de{display:inline-flex;align-items:center;gap:.5rem;align-self:center;padding:.32rem .95rem;margin-bottom:1.35rem;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#1d4ed8;background:#fff;border:1px solid #bfdbfe;border-radius:var(--radius-full)}
.cc2mea{width:7px;height:7px;border-radius:50%;background:#2563eb;animation:kicker-pulse 2.4s ease-in-out infinite}
@keyframes kicker-pulse{0%,100%{box-shadow:0 0 0 3px rgba(37,99,235,.16)}50%{box-shadow:0 0 0 7px rgba(37,99,235,.05)}}
.cybw5t h1{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-bottom:1.05rem;color:#0f172a;position:relative;z-index:1}
.cybw5t h1 .cpgb2z{background:linear-gradient(92deg,#2563eb 0%,#0ea5e9 60%,#38bdf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cawqmv{font-size:clamp(.98rem,1.5vw,1.08rem);color:#475569;max-width:560px;line-height:1.85;margin:0 auto 1.85rem;position:relative;z-index:1}
.ccy96d{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;position:relative;z-index:1}
.ccy96d .cq4pbh{padding:.85rem 2rem;font-weight:700}
/* 下载入口（后台开关 download_enabled 控制显隐） */
.ccy96d .cdwn7x{gap:.45rem}
.ccy96d .cdwn7x svg{flex-shrink:0;transition:transform var(--transition-fast)}
.ccy96d .cdwn7x:hover svg{transform:translateY(2px)}
/* 统计卡 ×4 */
.cuxa6e{grid-column:span 3;padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:.12rem;position:relative;overflow:hidden}
.cuxa6e::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#2563eb,#38bdf8);opacity:0;transition:opacity var(--transition-base)}
.cuxa6e:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:#bfdbfe}
.cuxa6e:hover::before{opacity:1}
.cuxa6e .cp8jg9{font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:900;color:#2563eb;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.cuxa6e .c6a9wj{font-size:.8rem;color:var(--color-text-secondary);font-weight:500}

/* ---------- 编号式区块头 ---------- */
.cr8tqh{display:flex;align-items:flex-end;gap:1.15rem;margin-bottom:2.25rem;flex-wrap:wrap}
.cd5key{font-family:var(--font-mono);font-size:clamp(2rem,3.8vw,2.7rem);font-weight:800;line-height:.88;color:transparent;-webkit-text-stroke:1.5px #93c5fd;letter-spacing:-.02em;user-select:none;flex-shrink:0}
.ckzx47 h2{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.ckzx47 p{font-size:.86rem;color:var(--color-text-secondary);margin:.2rem 0 0}
.cetqtg{margin-left:auto;font-size:.88rem;font-weight:700;color:var(--color-primary);white-space:nowrap;transition:color var(--transition-fast)}
.cetqtg:hover{color:var(--color-primary-dark)}

/* ---------- Bento 功能入口 ---------- */
.cq78zf{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.c8pp87{display:flex;flex-direction:column;padding:1.55rem 1.6rem 1.35rem;border-radius:20px;border:1px solid var(--color-border);background:var(--color-bg-card);box-shadow:var(--shadow-card);text-decoration:none;position:relative;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.c8pp87:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:#bfdbfe}
.cjr4zr{grid-column:span 2;background:linear-gradient(135deg,#ffffff 0%,#eff6ff 100%);justify-content:flex-end;min-height:230px}
.cjr4zr::after{content:"";position:absolute;right:-64px;bottom:-64px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(37,99,235,.06);pointer-events:none}
.cp962e{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;position:relative;z-index:1}
.cdcy3n{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;transition:transform var(--transition-base)}
.c8pp87:hover .cdcy3n{transform:scale(1.08) rotate(-4deg)}
.c9798j{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#2563eb}
.cu8xq2{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#059669}
.cb9v9w{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#ea580c}
.cwfvuk{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#7c3aed}
.c6wzzh{background:linear-gradient(135deg,#ccfbf1,#99f6e4);color:#0d9488}
.czvjt7{background:linear-gradient(135deg,#ffe4e6,#fecdd3);color:#e11d48}
.c55z4r{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;color:#94a3b8;border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.22rem .62rem}
.c8pp87 h3{font-size:1.06rem;font-weight:800;color:var(--color-heading);margin:0 0 .3rem;position:relative;z-index:1}
.cjr4zr h3{font-size:1.5rem;letter-spacing:-.02em}
.c8pp87 p{font-size:.86rem;color:var(--color-text-secondary);line-height:1.65;margin:0 0 .85rem;position:relative;z-index:1}
.cjr4zr p{max-width:480px;font-size:.92rem}
.chtfen{margin-top:auto;font-size:.86rem;font-weight:700;color:var(--color-primary);position:relative;z-index:1;transition:color var(--transition-fast),letter-spacing var(--transition-fast)}
.c8pp87:hover .chtfen{color:var(--color-primary-dark);letter-spacing:.02em}

/* ---------- 编辑式教程列表 ---------- */
.cgutvf{display:flex;flex-direction:column}
.cbnu4d{display:flex;align-items:center;gap:1.5rem;padding:1.3rem .9rem;border-bottom:1px solid var(--color-border-light);text-decoration:none;border-radius:var(--radius-sm);transition:background var(--transition-fast)}
.cbnu4d:first-child{border-top:1px solid var(--color-border-light)}
.cbnu4d:hover{background:#eff6ff}
.crfvz6{flex-shrink:0;font-family:var(--font-mono);font-size:.9rem;font-weight:700;color:#2563eb;width:3.5rem;text-align:center;padding:.5rem 0;border:1px solid #bfdbfe;border-radius:var(--radius-sm);background:#fff}
.c596wu{flex:1;min-width:0}
.c596wu h3{font-size:1.04rem;font-weight:700;color:var(--color-heading);margin:0 0 .28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c596wu h3 a{color:inherit}
.c596wu p{font-size:.85rem;color:var(--color-text-secondary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cyncm7{flex-shrink:0;font-size:1.2rem;color:var(--color-text-muted);transition:all var(--transition-fast)}
.cbnu4d:hover .cyncm7{color:var(--color-primary);transform:translateX(5px)}
.cbnu4d:hover .c596wu h3{color:var(--color-primary)}

/* ---------- 分类教程（数据分组） ---------- */
.cjgmct{margin-bottom:2.25rem}
.cjgmct:last-child{margin-bottom:0}
.cavvk2{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.cavvk2 h3{font-size:1.05rem;font-weight:800;color:var(--color-heading);display:flex;align-items:center;gap:.55rem;margin:0}
.cavvk2 h3::before{content:"";width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,#2563eb,#38bdf8);transform:rotate(45deg)}
.c8be92{font-size:.75rem;font-weight:700;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;padding:.2rem .72rem;border-radius:var(--radius-full)}
.cbr46r{display:flex;flex-direction:column;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;overflow:hidden}
.c77ur8{display:flex;align-items:center;gap:1.2rem;padding:.95rem 1.2rem;text-decoration:none;border-bottom:1px solid var(--color-border-light);transition:background var(--transition-fast)}
.c77ur8:last-child{border-bottom:none}
.c77ur8:hover{background:#f0f7ff}
.cmekhd{flex-shrink:0;width:112px;height:68px;border-radius:10px;overflow:hidden;background:var(--color-bg-secondary)}
.cmekhd img{width:100%;height:100%;object-fit:cover}
.c6du3y{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.cy7h8h{font-size:.97rem;font-weight:700;color:var(--color-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chzfyz{font-size:.83rem;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c77ur8:hover .cy7h8h{color:var(--color-primary)}
.csdj56{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;font-size:.75rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}

/* ---------- CTA 大条 ---------- */
.cfz97x{position:relative;overflow:hidden;text-align:center;padding:3.75rem 2rem;background:linear-gradient(120deg,#1d4ed8 0%,#2563eb 45%,#0ea5e9 100%);border-radius:24px;color:#fff;box-shadow:0 16px 48px rgba(37,99,235,.28)}
.cfz97x::before{content:"";position:absolute;top:-70%;left:-25%;width:150%;height:200%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.1) 0%,transparent 55%);pointer-events:none}
.cfz97x::after{content:"";position:absolute;bottom:-90px;right:-90px;width:260px;height:260px;border-radius:50%;border:34px solid rgba(255,255,255,.08);pointer-events:none}
.cfz97x h2{color:#fff;font-size:clamp(1.4rem,3vw,1.85rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.55rem;position:relative;z-index:1}
.cfz97x p{color:rgba(255,255,255,.82);font-size:.98rem;margin-bottom:1.75rem;position:relative;z-index:1}
.c5jy2a{background:#fff;color:#1d4ed8;padding:.85rem 2.3rem;font-weight:800;position:relative;z-index:1}
.c5jy2a:hover{color:#1e40af;box-shadow:0 8px 28px rgba(0,0,0,.18);transform:translateY(-3px)}

/* ---------- 代码窗口（亮色，Bento 复用） ---------- */
.cfvdqs{border-radius:16px;overflow:hidden;border:1px solid #dbeafe;box-shadow:0 24px 64px rgba(37,99,235,.16),0 6px 20px rgba(15,23,42,.06);background:#fff}
.cdu2y7{display:flex;align-items:center;gap:.45rem;padding:.7rem .95rem;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.cdu2y7 .cweajp{width:11px;height:11px;border-radius:50%}
.cu6d22{background:#ff5f57}.c7vvws{background:#febc2e}.c9p4at{background:#28c840}
.c9g7jr{margin-left:auto;font-size:.72rem;color:#64748b;font-family:var(--font-mono)}
.ce8gbd{margin:0;padding:1.3rem 1.4rem;font-size:.86rem;line-height:1.75;overflow-x:auto;color:#1e293b;background:#fff;border:none}
.ce8gbd code{background:none;border:none;padding:0;color:inherit;font-family:var(--font-mono)}
.cf94np{color:#1d4ed8}
.cenebg{color:#0e7490}
.chfujb{color:#047857}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .cxznn7{grid-template-columns:repeat(2,1fr)}
  .cybw5t{grid-column:span 2;min-height:0}
  .cuxa6e{grid-column:span 1}
  .cq78zf{grid-template-columns:repeat(2,1fr)}
  .cjr4zr{grid-column:span 2}
}
@media(max-width:768px){
  .cbps8b{padding-top:1.75rem}
  .cybw5t{padding:2rem 1.6rem}
  .cq78zf{grid-template-columns:1fr}
  .cjr4zr{grid-column:span 1;min-height:0}
  .cr8tqh{margin-bottom:1.6rem}
  .cetqtg{margin-left:0;width:100%}
  .cbnu4d{flex-direction:column;align-items:flex-start;gap:.75rem}
  .crfvz6{width:auto;padding:.3rem .8rem}
  .cyncm7{display:none}
  .c77ur8{flex-wrap:wrap}
  .cmekhd{width:100%;height:auto;aspect-ratio:16/9}
  .csdj56{flex-direction:row;gap:1rem;width:100%}
  .cfz97x{padding:2.5rem 1.4rem}
}
@media(max-width:480px){
  .cxznn7{grid-template-columns:1fr}
  .cuxa6e{grid-column:span 1}
  .cd5key{font-size:1.7rem}
  .ckzx47 h2{font-size:1.2rem}
}

/* ---------- 为什么选择纸飞机 ---------- */
.cwhygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cwhycard{display:flex;flex-direction:column;gap:.6rem;padding:1.6rem 1.5rem;border-radius:18px;border:1px solid var(--color-border);background:var(--color-bg-card);box-shadow:var(--shadow-card);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.cwhycard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:#bfdbfe}
.cwhyicon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;margin-bottom:.25rem;flex-shrink:0}
.cwhyicon svg{width:24px;height:24px}
.cwhyicon.cwhy-a{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#ea580c}
.cwhyicon.cwhy-b{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#059669}
.cwhyicon.cwhy-c{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#2563eb}
.cwhyicon.cwhy-d{background:linear-gradient(135deg,#ccfbf1,#99f6e4);color:#0d9488}
.cwhycard h3{font-size:1.06rem;font-weight:800;color:var(--color-heading);margin:0}
.cwhycard p{font-size:.86rem;color:var(--color-text-secondary);line-height:1.65;margin:0}
@media(max-width:1024px){.cwhygrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cwhygrid{grid-template-columns:1fr}}