/* ============================================================
   taocan.html 建站套餐总览 · 烘焙复古风
   版式签名：H1 左右对撞 Hero + 底部数据条 + 三账错位痛点卡 + 报价总表
   ============================================================ */

/* ---------- 通用工具（本页专属，禁内联） ---------- */
.a-deep{background:var(--cream-deep)}
.mt16{margin-top:16px}
.mt20{margin-top:20px}
.mt28{margin-top:28px}
.mt40{margin-top:40px}
.txt-center{text-align:center}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wf-flip{transform:scaleY(-1)}
.glow-gold{background:var(--gold);width:240px;height:240px;top:-70px;right:-50px}
.tbl-link{color:var(--gold-deep);font-weight:600;white-space:nowrap}
.tbl-link:hover{color:var(--brown)}

/* ---------- H1 Hero ---------- */
.tk-hero{
  position:relative;overflow:hidden;padding:150px 0 0;background:linear-gradient(160deg,var(--cream) 0%,var(--cream-deep) 100%);
}
.tk-hero .dot-a{background:var(--gold);width:300px;height:300px;top:-90px;left:-80px;opacity:.35}
.tk-hero-in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center;
  position:relative;z-index:2;padding-bottom:70px;
}
.tk-hero-copy .crumb{margin-bottom:22px}
.tk-eyebrow{
  display:inline-block;padding:7px 18px;border-radius:999px;font-size:12px;letter-spacing:.2em;
  color:var(--gold-deep);background:rgba(233,180,76,.14);border:1px solid rgba(233,180,76,.45);margin-bottom:22px;
}
.tk-h1{font-size:clamp(30px,4.4vw,50px);line-height:1.28;margin-bottom:20px}
.tk-h1 .tk-hl{
  display:block;color:var(--brown);position:relative;white-space:normal;
}
.tk-h1 .tk-hl::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:12px;z-index:-1;
  background:linear-gradient(90deg,rgba(233,180,76,.5),rgba(233,180,76,.05));border-radius:4px;
}
.tk-sub{font-size:16px;max-width:560px;margin-bottom:30px}
.tk-sub b{color:var(--gold-deep)}
.tk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.tk-tel{
  display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border-radius:999px;
  background:var(--paper);border:1.5px dashed var(--sand);box-shadow:var(--shadow-sm);
}
.tk-tel svg{width:19px;height:19px;stroke:var(--gold-deep)}
.tk-tel span{font-size:12px;color:var(--muted);letter-spacing:.12em}
.tk-tel b{font-family:var(--font-serif);font-size:19px;color:var(--brown)}
.tk-hero-media{position:relative}
.tk-hero-media img{
  border-radius:20px;box-shadow:var(--shadow-md);width:100%;object-fit:cover;
}
.tk-hero-media::before{
  content:"";position:absolute;inset:20px -22px -22px 22px;border:2px solid var(--sand);
  border-radius:20px;z-index:-1;
}
.tk-media-tag{
  position:absolute;left:-18px;bottom:26px;padding:10px 20px;border-radius:14px;
  background:var(--brown);color:var(--gold-bright);font-size:13px;letter-spacing:.1em;
  box-shadow:var(--shadow-brown);
}
/* Hero 底部数据条 */
.tk-hero-bar{
  position:relative;background:linear-gradient(180deg,transparent,rgba(46,26,12,.9));
  padding:40px 0 26px;
}
.tk-hero-bar .stat-num{color:var(--gold-bright)}
.tk-hero-bar .stat-label{color:rgba(251,244,232,.62)}
.tk-hero-bar .stat-row{grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- 痛点：三账错位卡 ---------- */
.tk-pain{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.tk-pain-card{
  grid-column:span 4;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;
  padding:32px 28px;box-shadow:var(--shadow-sm);position:relative;transition:transform .35s,box-shadow .35s;
}
.tk-pain-card:nth-child(2){grid-column:span 4;transform:translateY(26px)}
.tk-pain-card:nth-child(3){grid-column:span 4;transform:translateY(12px)}
.tk-pain-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tk-pain-card:nth-child(2):hover{transform:translateY(20px)}
.tk-pain-card:nth-child(3):hover{transform:translateY(6px)}
.tk-pain-no{
  display:inline-block;font-family:var(--font-serif);font-size:13px;letter-spacing:.2em;
  color:var(--gold-deep);border:1px dashed var(--gold-deep);border-radius:999px;padding:4px 14px;margin-bottom:16px;
}
.tk-pain-card h3{font-size:19px;margin-bottom:10px}
.tk-pain-card p{font-size:14px;line-height:1.9}

/* ---------- 功能四卡 ---------- */
.tk-func{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tk-func-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:30px 24px;
  box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;
}
.tk-func-card:nth-child(even){transform:translateY(16px)}
.tk-func-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tk-func-card:nth-child(even):hover{transform:translateY(10px)}
.tk-func-card h4{font-size:17px;margin-bottom:10px}
.tk-func-card p{font-size:13.5px;line-height:1.85}

/* ---------- 流程五步 ---------- */
.tk-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .tk-hero-in{grid-template-columns:1fr;padding-bottom:50px}
  .tk-hero-media::before{inset:14px 14px -14px -14px}
  .tk-pain,.tk-pain-card,.tk-pain-card:nth-child(2),.tk-pain-card:nth-child(3){grid-column:span 12;transform:none}
  .tk-pain-card:nth-child(2):hover,.tk-pain-card:nth-child(3):hover{transform:translateY(-6px)}
  .tk-func{grid-template-columns:repeat(2,1fr)}
  .tk-func-card:nth-child(even){transform:none}
  .tk-func-card:nth-child(even):hover{transform:translateY(-6px)}
  .tk-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .tk-func{grid-template-columns:1fr}
  .tk-steps{grid-template-columns:1fr}
  .tk-hero-bar .stat-row{grid-template-columns:1fr 1fr}
}