/* ===================== 网站建设页 ===================== */
.web-page{position:relative;overflow:hidden;background:#fff;color:var(--text)}
.web-page .container{position:relative;z-index:2}

/* ===================== 首屏 Banner ===================== */
.web-hero{position:relative;overflow:hidden;color:#fff;padding:calc(var(--nav-h) + 68px) 0 80px;text-align:left;background:linear-gradient(160deg,#141d42 0%,#1d2559 34%,#2b2064 66%,#36193f 100%)}
.web-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(900px 520px at 6% -14%,rgba(230,0,18,.42),transparent 62%),radial-gradient(820px 480px at 92% -6%,rgba(99,102,241,.50),transparent 60%),radial-gradient(940px 560px at 58% 116%,rgba(34,211,238,.28),transparent 62%)}
.web-hero .container{z-index:3}
.web-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.web-deco i{position:absolute;display:block;border-radius:50%;filter:blur(100px)}
.web-deco i:nth-child(1){width:520px;height:520px;left:-170px;top:-230px;background:rgba(230,0,18,.30)}
.web-deco i:nth-child(2){width:500px;height:500px;right:-150px;top:40px;background:rgba(99,102,241,.38)}
.web-deco i:nth-child(3){width:440px;height:440px;left:36%;bottom:-250px;background:rgba(34,211,238,.22)}
.web-deco .web-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(circle at 50% 8%,#000,transparent 66%);mask-image:radial-gradient(circle at 50% 8%,#000,transparent 66%)}

.web-tag{display:inline-block;font-size:12px;letter-spacing:5px;padding:7px 20px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.05);margin-bottom:22px}
.web-hero h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:1px;line-height:1.32}
.web-sub{margin:16px 0 30px;max-width:620px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.9}

.web-points{max-width:100%;margin:0;display:grid;gap:12px;text-align:left}
.web-points li{display:flex;align-items:flex-start;gap:11px;padding:12px 16px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.7;color:rgba(255,255,255,.82)}
.web-points li svg{flex-shrink:0;margin-top:3px;color:#4ade80}
.web-cta{margin-top:28px;display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap}
.web-cta .btn{padding:14px 34px;border-radius:10px;font-size:15px}
.web-btn-main{background:linear-gradient(135deg,#e60012,#ff5a1f);color:#fff;box-shadow:0 12px 28px rgba(230,0,18,.32)}
.web-btn-main:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(230,0,18,.44);color:#fff}
.web-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.web-btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.web-note{margin-top:22px;font-size:13px;letter-spacing:2px;color:rgba(255,255,255,.5)}

/* ---- 首屏改为「左文案 + 右动画插图」 ---- */
.web-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center}
.web-hero__copy{min-width:0}
.web-hero__viz{position:relative;min-width:0}
.build-canvas{display:block;width:100%;height:430px;opacity:0;animation:webRise .9s .25s ease both;touch-action:pan-y}
@keyframes webRise{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.build-canvas{animation:none;opacity:1}}

/* 流程步骤标签（与动画阶段联动） */
.build-steps{display:flex;justify-content:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.build-steps span{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:999px;font-size:11.5px;line-height:1.5;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);transition:color .3s,border-color .3s,background .3s;
}
.build-steps span::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;transition:opacity .3s,box-shadow .3s}
.build-steps span.on{
  color:#fff;border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.14);
}
.build-steps span.on::before{opacity:1;background:#22d3ee;box-shadow:0 0 8px rgba(34,211,238,.9)}

/* ===================== 套餐对比 ===================== */
.web-plans{padding:88px 0;background:#fff}
.web-sec-head{text-align:center;margin-bottom:48px}
.web-sec-head h2{font-size:32px;font-weight:800;letter-spacing:1px;color:var(--text)}
.web-sec-head h2::after{content:"";display:block;width:46px;height:3px;border-radius:2px;margin:16px auto 0;background:linear-gradient(90deg,#e60012,#ff7a2f)}
.web-sec-head p{margin-top:14px;color:var(--text-2);font-size:15px}

/* 手机端套餐切换选项卡(桌面隐藏, ≤768px 显示) */
.plan-tabs{display:none}

/* 无缝对比表: 整块圆角容器, 四列共享边框、列间无间距 */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch;background:#fff;border:1px solid #eef0f7;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(24,24,28,.05)}
.plan-card{position:relative;display:flex;flex-direction:column;background:#fff;border-right:1px solid #f0f2f8;padding:28px 22px 26px;transition:background .3s ease}
.plan-card:last-child{border-right:0}
.plan-card:hover{background:#fbfbfe}
.plan-card.hot{background:linear-gradient(180deg,#fff6f5 0,#fff 22%);box-shadow:inset 0 0 0 1px rgba(230,0,18,.28)}
.plan-card.hot::before{content:"推荐";position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:1px;color:#fff;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#e60012,#ff7a2f)}
.plan-card.hot .plan-name{color:var(--primary)}
.plan-card.hot .plan-group h4 i{width:5px}
.plan-name{font-size:20px;font-weight:800;color:var(--text);letter-spacing:.5px;margin-bottom:10px}
.plan-desc{font-size:13px;line-height:1.85;color:var(--text-2);min-height:66px;margin-bottom:18px}
.plan-group{margin-bottom:16px}
.plan-group h4{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid #f0f2f8}
.plan-group h4 i{width:5px;height:14px;border-radius:3px;background:linear-gradient(180deg,#e60012,#ff7a2f)}
.plan-group li{position:relative;padding-left:23px;font-size:12.5px;line-height:1.8;color:var(--text-2);margin-bottom:2px}
/* ✓ 支持 / ⊗ 不支持 */
.plan-group li::before{position:absolute;left:0;top:4px;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;font-size:9px;font-weight:700;line-height:1}
.plan-group li.ok::before{content:"✓";color:#e60012;background:rgba(230,0,18,.09)}
.plan-group li.off{color:#b9c0cc}
.plan-group li.off::before{content:"✕";color:#c3cbdb;border:1px solid #e2e6ee;background:#fff}
.plan-price{margin-top:auto;padding-top:16px;border-top:1px solid #f0f2f8;margin-bottom:16px}
.plan-price .pv{font-size:26px;font-weight:800;color:var(--primary);letter-spacing:-.5px;line-height:1.2}
.plan-price .pv small{font-size:13px;font-weight:600;margin-left:2px}
.plan-price .pd{font-size:12px;color:var(--text-2);margin-top:4px}
.plan-btn{display:block;text-align:center;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;transition:all .28s;border:1px solid transparent}
.plan-btn.buy{background:linear-gradient(135deg,#e60012,#ff5a1f);color:#fff;box-shadow:0 8px 20px rgba(230,0,18,.26)}
.plan-btn.buy:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px rgba(230,0,18,.36)}
.plan-btn.line{background:#fff;color:var(--primary);border-color:rgba(230,0,18,.35)}
.plan-btn.line:hover{background:#fff5f5;color:var(--primary);border-color:var(--primary)}

.plan-notes{margin-top:30px;padding:18px 22px;border-radius:12px;background:#f8f9fd;border:1px solid #eef0f7}
.plan-notes li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.95;color:var(--text-2)}
.plan-notes li::before{content:"";position:absolute;left:4px;top:11px;width:4px;height:4px;border-radius:50%;background:#c3cbdb}

/* ===================== 模板建站亮点 ===================== */
.web-highlights{padding:88px 0;background:#f6f7fb}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hl-card{background:#fff;border:1px solid #eef0f7;border-radius:16px;padding:30px 26px;box-shadow:0 8px 24px rgba(24,24,28,.05);transition:all .35s}
.hl-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(24,24,28,.1);border-color:#e2e8f4}
.hl-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,#e60012,#ff7a2f);box-shadow:0 10px 22px rgba(230,0,18,.26);transition:transform .35s}
.hl-card:hover .hl-icon{transform:translateY(-4px) scale(1.06)}
.hl-card h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:.3px}
.hl-card p{font-size:13.5px;line-height:1.95;color:var(--text-2)}

/* ===================== 模板展示 ===================== */
.web-tpl{padding:88px 0;background:#fff}
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tpl-card{background:#fff;border:1px solid #eef0f7;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(24,24,28,.05);transition:all .32s}
.tpl-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(24,24,28,.12);border-color:#e2e8f4}
.tpl-shot{position:relative;display:block;height:150px;border-bottom:1px solid #f0f2f8;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28)) no-repeat 11% 20% / 78% 20%,
    linear-gradient(180deg,rgba(24,24,28,.10),rgba(24,24,28,.06)) no-repeat 11% 47% / 78% 7%,
    linear-gradient(180deg,rgba(24,24,28,.10),rgba(24,24,28,.06)) no-repeat 11% 58% / 60% 7%,
    linear-gradient(180deg,rgba(24,24,28,.10),rgba(24,24,28,.06)) no-repeat 11% 69% / 70% 7%,
    var(--tpl-bg,linear-gradient(135deg,#e9eef8,#dbe3f4));
  border-radius:5px 5px 0 0}
.tpl-shot::before{content:"";position:absolute;left:11%;right:11%;top:10%;height:6px;border-radius:3px;background:rgba(24,24,28,.16)}
.tpl-shot::after{content:"";position:absolute;left:11%;top:10%;width:18px;height:6px;border-radius:3px;background:linear-gradient(90deg,#e60012,#ff7a2f)}
/* 动态缩略图（数据来自 /web-template 同源模板库），无图时回落骨架占位 */
.tpl-shot.has-img{background:#eef0f7}
.tpl-shot.has-img::before,.tpl-shot.has-img::after{display:none}
.tpl-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tpl-shot.has-img .tpl-code{left:10px;bottom:10px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.88);color:#33383f}
.tpl-empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--text-2);font-size:14px}
.tpl-code{position:absolute;left:11%;bottom:8px;font-size:11px;font-weight:700;letter-spacing:1px;color:rgba(24,24,28,.45)}
.tpl-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,12,20,.55);opacity:0;transition:opacity .3s}
.tpl-shot:hover .tpl-mask{opacity:1}
.tpl-mask span{padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:13px;font-weight:600;backdrop-filter:blur(4px)}
.tpl-info{padding:16px 16px 18px}
.tpl-info h3{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.55;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:45px}
.tpl-use{font-size:12px;color:var(--text-2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.tpl-act{display:flex;gap:10px;margin-top:14px}
.tpl-act a{flex:1;text-align:center;padding:7px 0;border-radius:8px;font-size:12.5px;font-weight:600;transition:all .26s;border:1px solid transparent}
.tpl-act a.demo{background:rgba(230,0,18,.08);color:var(--primary)}
.tpl-act a.demo:hover{background:var(--primary);color:#fff}
.tpl-act a.doc{border-color:#e3e9f4;color:var(--text-2)}
.tpl-act a.doc:hover{border-color:var(--primary);color:var(--primary)}
.tpl-more{margin-top:34px;text-align:center}
.tpl-more a{display:inline-flex;align-items:center;gap:8px;padding:12px 30px;border-radius:999px;font-size:14px;font-weight:600;color:var(--primary);border:1px solid rgba(230,0,18,.35);background:#fff;transition:all .28s}
.tpl-more a:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 12px 26px rgba(230,0,18,.26)}

/* 模板缩略图配色轮换 */
.tpl-card:nth-child(8n+1) .tpl-shot{--tpl-bg:linear-gradient(135deg,#e8eefb,#d9e2f6)}
.tpl-card:nth-child(8n+2) .tpl-shot{--tpl-bg:linear-gradient(135deg,#eaf5f1,#d7ece4)}
.tpl-card:nth-child(8n+3) .tpl-shot{--tpl-bg:linear-gradient(135deg,#fdeeee,#f8dbdb)}
.tpl-card:nth-child(8n+4) .tpl-shot{--tpl-bg:linear-gradient(135deg,#eef0fb,#e0e3f7)}
.tpl-card:nth-child(8n+5) .tpl-shot{--tpl-bg:linear-gradient(135deg,#fdf3e9,#f9e5cf)}
.tpl-card:nth-child(8n+6) .tpl-shot{--tpl-bg:linear-gradient(135deg,#e9f1fb,#d6e5f8)}
.tpl-card:nth-child(8n+7) .tpl-shot{--tpl-bg:linear-gradient(135deg,#f0eefa,#e3dff6)}
.tpl-card:nth-child(8n+8) .tpl-shot{--tpl-bg:linear-gradient(135deg,#eaf4f8,#d8ebf2)}

/* ===================== 产品帮助 ===================== */
.web-help{padding:88px 0 96px;background:#f6f7fb}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.help-col{background:#fff;border:1px solid #eef0f7;border-radius:16px;padding:26px 24px;box-shadow:0 8px 24px rgba(24,24,28,.05)}
.help-col header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #eaeef7}
.help-col h3{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px}
.help-col h3::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,#e60012,#ff7a2f)}
.help-col header a{font-size:12px;color:#9aa7ba;transition:color .25s}
.help-col header a:hover{color:var(--primary)}
.help-col li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;font-size:13.5px;color:var(--text-2);border-bottom:1px dashed #e7ecf5;transition:color .25s}
.help-col li:last-child a{border-bottom:none}
.help-col li a:hover{color:var(--primary)}
.help-col li a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-col li a time{flex-shrink:0;font-size:12px;color:#b0bacb}

/* ===================== 响应式 ===================== */
@media (max-width:1080px){
  /* 首屏：插图移到文案下方并压低高度 */
  .web-hero__inner{grid-template-columns:1fr;gap:34px}
  .build-canvas{height:360px}
}
@media (max-width:1024px){
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  /* 两列折行时补横向分隔线, 每列右框线只在行尾去掉 */
  .plan-card{border-bottom:1px solid #f0f2f8}
  .plan-card:nth-child(2n){border-right:0}
  .plan-desc{min-height:auto}
  .hl-grid{grid-template-columns:repeat(2,1fr)}
  .tpl-grid{grid-template-columns:repeat(3,1fr)}
  .help-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .web-hero{padding:calc(var(--nav-h) + 40px) 0 56px;text-align:center}
  .web-hero h1{font-size:26px}
  .web-sub{font-size:14px;margin-bottom:26px;margin-left:auto;margin-right:auto}
  .web-points{gap:9px}
  .web-points li{font-size:13px;padding:11px 14px}
  .web-cta{gap:10px;justify-content:center}
  .web-cta .btn{flex:1;min-width:150px;justify-content:center;padding:13px 20px}
  .build-canvas{height:300px}
  .web-plans,.web-highlights,.web-tpl{padding:56px 0}
  .web-help{padding:56px 0 60px}
  .web-sec-head{margin-bottom:34px}
  .web-sec-head h2{font-size:25px}
  /* 手机端: 上方切换选项卡 + 只显示当前套餐这一列 */
  .plan-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .plan-tab{flex:1;min-width:78px;white-space:nowrap;padding:10px 6px;border:1px solid #e6eaf3;border-radius:10px;background:#f8f9fd;font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .28s}
  .plan-tab.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#e60012,#ff7a2f);box-shadow:0 8px 18px rgba(230,0,18,.22)}
  .plan-grid{grid-template-columns:1fr;gap:0;border:none;overflow:visible;background:transparent;box-shadow:none}
  .plan-card{display:none;border:1px solid #eef0f7;border-radius:16px;padding:24px 20px;box-shadow:0 8px 22px rgba(24,24,28,.06)}
  .plan-card.active{display:flex}
  .plan-card.hot{box-shadow:0 10px 26px rgba(230,0,18,.16)}
  .hl-grid{grid-template-columns:1fr}
  .tpl-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .tpl-shot{height:120px}
  .tpl-info{padding:14px}
  .tpl-info h3{font-size:13.5px;min-height:42px}
  .tpl-use{min-height:auto}
}
@media (max-width:480px){
  .tpl-grid{grid-template-columns:1fr}
}