/* ===== 我们在路上 · 东方国风美学视觉系统 ===== */
:root{
  --paper:#f7f4ed;          /* 澄心堂熟宣米白 */
  --paper2:#ede6d6;         /* 仿古宣纸微黄 */
  --paper3:#e2d8c3;         /* 陈年笺纸深色 */
  --paper-card:#faf7f0;     /* 卡片高亮底色 */
  --ink:#1c221e;            /* 焦墨 */
  --ink2:#3c443e;           /* 浓墨 */
  --ink3:#6e766e;           /* 淡墨/辅文 */
  --ink4:#9ca49c;           /* 极淡墨/边框与注脚 */
  
  --bronze:#274c43;         /* 石青/松石绿 */
  --bronze2:#36665a;        /* 亮青碧 */
  --bronze-soft:rgba(39,76,67,0.08); /* 青绿微染 */
  
  --cinnabar:#9c382a;       /* 朱砂印泥红 */
  --cinnabar2:#ba4635;      /* 鲜朱砂 */
  --cinnabar-soft:rgba(156,56,42,0.09); /* 朱砂微染 */
  
  --gold:#bfa054;           /* 泥金 */
  --gold2:#d9b868;          /* 亮泥金 */
  --gold-soft:rgba(191,160,84,0.12); /* 泥金微晕 */
  
  --line:rgba(39,76,67,0.14);    /* 水墨经纬细线 */
  --line2:rgba(39,76,67,0.08);   /* 极淡分隔线 */
  --line-gold:rgba(191,160,84,0.3);/* 泥金描边 */
  
  --shadow-sm:0 2px 8px rgba(28,34,30,0.04);
  --shadow-md:0 12px 30px rgba(28,34,30,0.06), 0 2px 6px rgba(39,76,67,0.03);
  --shadow-lg:0 24px 50px rgba(28,34,30,0.09), 0 6px 16px rgba(39,76,67,0.04);
  --shadow-seal:inset 0 0 0 2px rgba(247,244,237,0.4), 0 4px 16px rgba(156,56,42,0.35);

  --maxw:1220px;
  --serif:'Noto Serif SC','Songti SC','SimSun',serif;
  --kai:'ZCOOL XiaoWei','Kaiti SC','KaiTi','STKaiti',serif;
  --paper-texture:radial-gradient(circle at 15% 20%,rgba(191,160,84,.04),transparent 35%),radial-gradient(circle at 85% 80%,rgba(39,76,67,.04),transparent 40%),radial-gradient(circle at 50% 50%,rgba(156,56,42,.015),transparent 50%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  background:var(--paper);
  background-image:var(--paper-texture);
  color:var(--ink);
  min-height:100vh;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ===== 核心国风印章 ===== */
.seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:8px;
  background:var(--cinnabar);
  color:var(--paper);
  font-family:var(--kai);
  font-size:22px;
  font-weight:700;
  box-shadow:var(--shadow-seal);
  flex-shrink:0;
  line-height:1;
  user-select:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.seal:hover{transform:scale(1.05) rotate(-2deg);box-shadow:0 6px 20px rgba(156,56,42,0.45)}
.seal.sm{width:36px;height:36px;font-size:18px;border-radius:6px}
.seal.gold{background:linear-gradient(135deg,var(--gold),#997a30);box-shadow:0 4px 14px rgba(191,160,84,0.35)}

/* ===== 按钮系统 ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 28px;
  border-radius:6px;
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--bronze);
  transition:all .25s ease;
  white-space:nowrap;
  letter-spacing:1px;
}
.btn-primary{
  background:var(--bronze);
  color:var(--paper);
  box-shadow:0 4px 14px rgba(39,76,67,0.2);
}
.btn-primary:hover{
  background:var(--bronze2);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(39,76,67,0.3);
  color:var(--paper);
}
.btn-outline{
  background:transparent;
  color:var(--bronze);
  border:1px solid var(--bronze);
}
.btn-outline:hover{
  background:var(--bronze-soft);
  color:var(--bronze);
  border-color:var(--bronze2);
}
.btn-cinnabar{
  background:linear-gradient(135deg,var(--cinnabar),var(--cinnabar2));
  color:var(--paper);
  border-color:var(--cinnabar);
  box-shadow:0 6px 18px rgba(156,56,42,0.28);
}
.btn-cinnabar:hover{
  background:linear-gradient(135deg,var(--cinnabar2),#c94c3a);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(156,56,42,0.38);
  color:var(--paper);
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1c221e;
  border-color:var(--gold);
  font-weight:700;
  box-shadow:0 4px 14px rgba(191,160,84,0.3);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(191,160,84,0.45);
}
.btn-lg{padding:15px 36px;font-size:17px;border-radius:8px}
.btn-sm{padding:8px 20px;font-size:13px;border-radius:4px}

/* ===== 顶部导航 ===== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(247,244,237,0.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line2);
  transition:all .3s ease;
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:700;
  font-family:var(--kai);
  color:var(--ink);
  letter-spacing:2px;
}
.logo .sub{
  font-size:11px;
  color:var(--ink3);
  font-family:var(--serif);
  letter-spacing:1.5px;
  display:block;
  line-height:1.2;
  margin-top:2px;
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-link{
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px 16px;
  color:var(--ink2);
  font-size:15px;
  font-weight:500;
  border-radius:6px;
  transition:all .2s ease;
  cursor:pointer;
  letter-spacing:1px;
}
.nav-link:hover{
  color:var(--cinnabar);
  background:var(--cinnabar-soft);
}
.nav-link .arrow{font-size:9px;transition:transform .2s;opacity:.6}
.nav-item:hover .arrow{transform:rotate(180deg)}
.dropdown{
  position:absolute;
  top:100%;left:0;
  min-width:250px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:var(--shadow-lg);
}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:6px;
  color:var(--ink2);
  font-size:14px;
  transition:all .2s ease;
}
.dropdown a:hover{
  background:var(--cinnabar-soft);
  color:var(--cinnabar);
  transform:translateX(4px);
}
.dropdown .d-icon{
  width:34px;
  height:34px;
  border-radius:6px;
  background:var(--bronze-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
  color:var(--bronze);
}
.dropdown .d-title{font-weight:600;color:var(--ink);font-size:14px}
.dropdown .d-desc{font-size:11px;color:var(--ink3)}
.nav-cta{display:flex;align-items:center;gap:12px;margin-left:8px}
.nav-cta.mobile{display:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);font-size:20px;cursor:pointer;padding:6px 10px;border-radius:4px}

/* SVG 图标 */
.d-icon svg,.f-icon svg,.v-icon svg,.big-icon svg,.ph svg,.case-cover svg,.social svg,.pillar-icon svg,.placeholder svg,.ico svg,.dim-ico svg{
  width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.d-icon svg{color:var(--bronze)}
.f-icon svg{color:var(--bronze)}
.v-icon svg{color:var(--cinnabar)}
.big-icon svg,.ph svg,.case-cover svg{color:var(--bronze);opacity:.7}
.social svg{width:16px;height:16px}
.nav-cta{display:flex;align-items:center;gap:12px;margin-left:8px}
.nav-cta.mobile{display:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);font-size:20px;cursor:pointer;padding:6px 10px;border-radius:4px}
/* ===== Hero 首屏画卷与视差美学 ===== */
.hero{
  position:relative;
  padding:155px 0 90px;
  overflow:hidden;
  text-align:center;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(191,160,84,0.14), transparent 55%),
    radial-gradient(circle at 10% 30%, rgba(39,76,67,0.06), transparent 45%),
    radial-gradient(circle at 90% 40%, rgba(156,56,42,0.05), transparent 45%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:140px;
  background:linear-gradient(180deg,transparent,rgba(39,76,67,0.05));
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 22px;
  border-radius:30px;
  background:rgba(39,76,67,0.08);
  border:1px solid var(--line);
  color:var(--bronze);
  font-size:13px;
  font-weight:600;
  margin-bottom:28px;
  letter-spacing:2px;
  position:relative;
  backdrop-filter:blur(6px);
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cinnabar);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

.hero h1{
  font-size:clamp(38px,5.8vw,68px);
  font-weight:800;
  line-height:1.32;
  letter-spacing:4px;
  margin-bottom:22px;
  font-family:var(--kai);
  color:var(--ink);
  position:relative;
}
.hero h1 .grad{
  color:var(--cinnabar);
  position:relative;
  display:inline-block;
}
.hero h1 .grad::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:4px;
  height:8px;
  background:rgba(156,56,42,0.18);
  border-radius:4px;
  z-index:-1;pointer-events:none}
.hero h1 .seal-inline{display:inline-block;vertical-align:middle;margin-left:14px}
.hero p{
  font-size:clamp(16px,1.9vw,19px);
  color:var(--ink2);
  max-width:680px;
  margin:0 auto 38px;
  line-height:2.05;
  position:relative;
  letter-spacing:1px;
}
.hero-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;position:relative}
.hero-note{margin-top:24px;font-size:13px;color:var(--ink3);position:relative;letter-spacing:1px}
.hero-note span{color:var(--cinnabar);font-weight:600}

/* 竖排题字 */
.vertical-text{
  position:absolute;
  writing-mode:vertical-rl;
  font-family:var(--kai);
  color:rgba(39,76,67,0.12);
  font-size:100px;
  letter-spacing:18px;
  top:45%;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none;
  font-weight:700;
}
.vertical-text.left{left:24px}
.vertical-text.right{right:24px}

/* ===== 核心亮点特性横幅（带中式纹理） ===== */
.stats{
  padding:60px 0;
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
  background:rgba(39,76,67,0.035);
  position:relative;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{
  padding:16px 20px;
  border-radius:8px;
  background:rgba(250,247,240,0.6);
  border:1px solid var(--line2);
  transition:all .3s ease;
}
.stat:hover{
  background:var(--paper-card);
  border-color:var(--line-gold);
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}
.stat .num{
  font-size:clamp(30px,3.6vw,44px);
  font-weight:800;
  color:var(--bronze);
  font-family:var(--kai);
  letter-spacing:1px;
}
.stat .label{color:var(--ink2);font-size:14px;margin-top:4px;letter-spacing:2px;font-weight:600}
.stat .desc{color:var(--ink3);font-size:12px;margin-top:4px;letter-spacing:.5px}

/* ===== 通用板块规范 ===== */
.section{padding:90px 0;position:relative}
.section-head{text-align:center;max-width:700px;margin:0 auto 55px;position:relative}
.section-head .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:5px 20px;
  border-radius:30px;
  background:rgba(39,76,67,0.08);
  border:1px solid var(--line);
  color:var(--bronze);
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  margin-bottom:16px;
}
.section-head .eyebrow::before,.section-head .eyebrow::after{content:'◆';font-size:8px;color:var(--gold)}
.section-head h1,.section-head h2{
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;
  letter-spacing:3px;
  margin-bottom:14px;
  font-family:var(--kai);
  color:var(--ink);
}
.section-head p{color:var(--ink3);font-size:16px;line-height:1.95;letter-spacing:1px}

/* ===== 核心新板块：11套国风模板交互沙盒 ===== */
.tpl-sandbox{
  background:linear-gradient(180deg, rgba(39,76,67,0.04), rgba(247,244,237,1));
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
}
.tpl-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.tpl-tab{
  padding:9px 20px;
  border-radius:30px;
  background:var(--paper-card);
  border:1px solid var(--line);
  color:var(--ink2);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .25s ease;
  letter-spacing:1px;
}
.tpl-tab:hover{
  border-color:var(--bronze);
  color:var(--bronze);
  transform:translateY(-2px);
}
.tpl-tab.active{
  background:var(--bronze);
  color:var(--paper);
  border-color:var(--bronze);
  box-shadow:0 4px 14px rgba(39,76,67,0.25);
}

.tpl-showcase{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:36px;
  align-items:center;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.tpl-showcase::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--cinnabar),var(--gold),var(--bronze));pointer-events:none}
.tpl-preview-stage{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper2);
  box-shadow:var(--shadow-md);
  min-height:360px;
  display:flex;
  flex-direction:column;
}
.tpl-stage-bar{
  background:var(--paper3);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line2);
}
.tpl-stage-bar .dot{width:10px;height:10px;border-radius:50%}
.tpl-stage-bar .dot.red{background:#c0392b}
.tpl-stage-bar .dot.yellow{background:#d4a017}
.tpl-stage-bar .dot.green{background:#27ae60}
.tpl-stage-bar .domain-tag{
  margin-left:auto;
  font-size:11px;
  color:var(--ink3);
  background:rgba(255,255,255,0.6);
  padding:2px 10px;
  border-radius:12px;
  border:1px solid var(--line2);
}
.tpl-stage-canvas{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:24px;
  min-height:300px;
  transition:all .4s ease;
}
.tpl-info-panel h3{
  font-size:28px;
  font-weight:800;
  font-family:var(--kai);
  color:var(--ink);
  margin-bottom:10px;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:10px;
}
.tpl-info-panel .tagline{
  color:var(--cinnabar);
  font-weight:700;
  font-size:15px;
  margin-bottom:16px;
  letter-spacing:1px;
}
.tpl-info-panel .desc{
  color:var(--ink2);
  font-size:14px;
  line-height:1.95;
  margin-bottom:24px;
}
.tpl-palette{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.tpl-palette-title{font-size:12px;color:var(--ink3);font-weight:600;letter-spacing:1px}
.tpl-color-chip{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.1);
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  position:relative;
}

/* ===== 家庭与文化专属四大能力矩阵 ===== */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}
.pillar-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:36px;
  position:relative;
  transition:all .3s ease;
  box-shadow:var(--shadow-sm);
}
.pillar-card:hover{
  border-color:var(--bronze);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.pillar-header{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
.pillar-icon{
  width:50px;
  height:50px;
  border-radius:10px;
  background:var(--bronze-soft);
  color:var(--bronze);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex-shrink:0;
  border:1px solid var(--line);
}
.pillar-num{
  font-family:var(--kai);
  font-size:12px;
  color:var(--cinnabar);
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:2px;
}
.pillar-card h3{
  font-size:22px;
  font-weight:800;
  font-family:var(--kai);
  letter-spacing:1px;
  color:var(--ink);
}
.pillar-card p{
  color:var(--ink2);
  font-size:14px;
  line-height:1.95;
  margin-bottom:20px;
}
.pillar-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pillar-list li{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink2);
  font-size:13px;
}
.pillar-list li .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--bronze);
}

/* ===== 对比看板：传统建站 / 社交平台 vs 我们在路上 =====
   桌面端：四列网格表格，主推列（我们在路上）作视觉焦点
   移动端：整行转为独立卡片，列名由 data-label 伪元素输出，避免横向滚动 */
.compare-box{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
  table-layout:fixed;
}
.compare-table th, .compare-table td{
  padding:20px 22px;
  border-bottom:1px solid var(--line2);
  font-size:14px;
  vertical-align:middle;
  transition:background .22s ease;
}
.compare-table th{
  background:var(--paper2);
  font-family:var(--kai);
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--ink2);
  border-bottom:1px solid var(--line);
  padding:18px 22px;
}
.compare-table .th-sub{
  display:block;
  font-family:var(--serif);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0;
  color:var(--ink4);
  margin-top:2px;
}
/* 维度列 */
.compare-table .col-dim{width:22%}
.compare-table .col-other{width:26%}
.compare-table .col-us{width:26%}
.compare-table tbody .col-dim{
  font-weight:700;
  color:var(--ink);
  font-family:var(--kai);
  letter-spacing:1px;
  font-size:15px;
}
.compare-table tbody .col-other{color:var(--ink3);line-height:1.8}
/* 主推列：表头青绿实底 + 泥金描边 */
.compare-table thead .col-us{
  background:var(--bronze);
  color:var(--paper);
  border-bottom:none;
  box-shadow:inset 0 -3px 0 var(--gold);
}
.compare-table thead .col-us .th-sub{color:rgba(247,244,237,0.72)}
.compare-table thead .col-us .th-flag{display:block}
/* 主推列：数据格淡染 + 左右泥金描边 */
.compare-table tbody .col-us{
  background:rgba(39,76,67,0.055);
  border-left:1px solid var(--line-gold);
  border-right:1px solid var(--line-gold);
  color:var(--bronze);
  font-weight:600;
  line-height:1.8;
}
.compare-table tbody tr:hover td{background:rgba(191,160,84,0.07)}
.compare-table tbody tr:hover .col-us{background:rgba(39,76,67,0.1)}
.compare-table tbody tr:last-child td{border-bottom:none}
/* 维度图标 */
.compare-table .dim{display:inline-flex;align-items:center;gap:10px}
.compare-table .dim-ico{
  width:32px;height:32px;flex-shrink:0;
  border-radius:8px;
  background:var(--bronze-soft);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--bronze);
}
.compare-table .dim-ico svg{
  width:17px;height:17px;
  stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* 优势勾：圆形底 + 白色勾，比裸字符更精致 */
.cmp-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;
  border-radius:50%;
  background:var(--bronze);
  margin-right:8px;
  vertical-align:-3px;
}
.cmp-check svg{
  width:11px;height:11px;
  stroke:var(--paper);fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.compare-table .col-us{display:table-cell}
.compare-table .col-us .cmp-check{display:inline-flex}
/* 底部转化条 */
.compare-foot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 24px;
  background:linear-gradient(180deg,var(--paper2),var(--paper3));
  border-top:1px solid var(--line);
}
.cmp-seal{
  width:40px;height:40px;flex-shrink:0;
  border-radius:9px;
  background:var(--cinnabar);color:var(--paper);
  font-family:var(--kai);font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-seal);
}
.cmp-foot-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.cmp-foot-txt strong{font-family:var(--kai);font-size:16px;letter-spacing:1px;color:var(--ink)}
.cmp-foot-txt span{font-size:13px;color:var(--ink3)}
.compare-foot .btn{flex-shrink:0}

/* ===== 博客广场动态流瀑布卡片 ===== */
.plaza-flow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:36px;
}
.flow-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:24px;
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
}
.flow-card:hover{
  border-color:var(--bronze);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.flow-card .author-bar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.flow-card .avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--bronze);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--kai);
  font-weight:700;
  font-size:15px;
}
.flow-card .author-info .name{font-size:14px;font-weight:700;color:var(--ink)}
.flow-card .author-info .site{font-size:11px;color:var(--ink3)}
.flow-card h4{
  font-size:17px;
  font-weight:700;
  font-family:var(--kai);
  margin-bottom:10px;
  color:var(--ink);
  letter-spacing:1px;
}
.flow-card p{
  font-size:13px;
  color:var(--ink2);
  line-height:1.8;
  margin-bottom:16px;
  flex:1;
}
.flow-card .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--ink3);
  border-top:1px solid var(--line2);
  padding-top:12px;
}

/* 定价 */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.price-card{background:var(--paper-card);border:1px solid var(--line);border-radius:8px;padding:32px 26px;display:flex;flex-direction:column;position:relative;transition:all .3s;box-shadow:var(--shadow-sm)}
.price-card:hover{transform:translateY(-4px);border-color:var(--bronze);box-shadow:var(--shadow-lg)}
.price-card.popular{border-color:var(--cinnabar);background:linear-gradient(180deg,rgba(156,56,42,0.06),var(--paper-card));box-shadow:0 16px 40px rgba(156,56,42,0.12)}
.price-card .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--cinnabar);padding:4px 18px;border-radius:20px;font-size:11px;font-weight:700;color:var(--paper);white-space:nowrap;letter-spacing:1px}
.price-card .p-name{font-size:18px;font-weight:700;margin-bottom:4px;font-family:var(--kai);letter-spacing:2px}
.price-card .p-tagline{font-size:12px;color:var(--ink3);margin-bottom:20px}
.price-card .p-price{font-size:38px;font-weight:800;margin-bottom:4px;color:var(--cinnabar);font-family:var(--kai)}
.price-card .p-price .cur{font-size:18px;font-weight:600;color:var(--ink2);margin-right:2px}
.price-card .p-price .per{font-size:13px;color:var(--ink3);font-weight:400}
.price-card .p-duration{font-size:12px;color:var(--ink3);margin-bottom:20px}
.price-card .p-once{font-size:12px;color:var(--cinnabar);margin:-14px 0 16px;font-weight:600}
.price-card ul{list-style:none;flex:1;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.price-card li{display:flex;align-items:flex-start;gap:8px;color:var(--ink2);font-size:13px}
.price-card li::before{content:'✓';color:var(--cinnabar);font-weight:700;flex-shrink:0}
.price-card .btn{width:100%;justify-content:center}
.pricing-note{text-align:center;color:var(--ink3);font-size:13px;margin-top:24px}

/* CTA */
.cta{position:relative;padding:100px 0;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--bronze),#17332d);color:var(--paper)}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(191,160,84,0.25),transparent 65%);pointer-events:none}
.cta h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin-bottom:16px;position:relative;font-family:var(--kai);letter-spacing:3px}
.cta p{color:rgba(247,244,237,0.88);font-size:16px;max-width:560px;margin:0 auto 36px;position:relative;line-height:2}

/* 页脚 */
footer{background:var(--paper2);border-top:1px solid var(--line);padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-brand .logo{margin-bottom:16px}
.footer-brand p{color:var(--ink3);font-size:13px;line-height:1.9;max-width:300px}
.footer-col h4{font-size:15px;font-weight:700;margin-bottom:16px;font-family:var(--kai);letter-spacing:2px;color:var(--bronze)}
.footer-col a{display:block;color:var(--ink2);font-size:13px;padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--cinnabar)}
.footer-bottom{border-top:1px solid var(--line2);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:var(--ink3);font-size:12px}
.footer-bottom .social{display:flex;gap:10px}
.footer-bottom .social a{width:34px;height:34px;border-radius:8px;background:var(--paper-card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--bronze);transition:all .2s}
.footer-bottom .social a:hover{border-color:var(--cinnabar);color:var(--cinnabar);transform:translateY(-2px)}

/* 响应式 */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .tpl-showcase{grid-template-columns:1fr;gap:24px}
  .pillar-grid{grid-template-columns:1fr}
  .plaza-flow{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .vertical-text{display:none}
}
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:16px;gap:4px;box-shadow:var(--shadow-lg)}
  .nav-links.open{display:flex}
  .nav-item{width:100%}
  .nav-link{width:100%;justify-content:space-between}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 12px;display:none}
  .nav-item.open .dropdown{display:block}
  .nav-cta{display:none}
  .nav-cta.mobile{display:flex;margin:12px 0 0;flex-direction:column;align-items:stretch}
  .nav-cta.mobile .btn{width:100%;justify-content:center}
  .nav-toggle{display:block}
  .plaza-flow{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding:130px 0 70px}
  /* 对比表转卡片：每行一张，列名由 data-label 输出，彻底告别横向滚动
     注意：仅把 td 设为 display:block 仍会被表格列宽算法压窄，
     必须让 tr 成为 flex 容器，单元格才会真正撑满整行 */
  .compare-table,.compare-table tbody{display:block;width:100%}
  .compare-table{table-layout:auto}
  .compare-table thead{display:none}
  .compare-table tbody tr{
    display:flex;
    flex-direction:column;
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    margin:16px 16px 0;
    overflow:hidden;
    background:var(--paper-card);
  }
  .compare-table tbody tr:last-child{margin-bottom:16px}
  .compare-table tbody td{display:block;width:100%;min-width:0;box-sizing:border-box}
  /* 覆盖桌面的定宽列（.col-dim/.col-other/.col-us），特异性须对齐否则会被锁死列宽 */
  .compare-table .col-dim,.compare-table .col-other,.compare-table .col-us{width:100%}
  .compare-table th,.compare-table td{padding:12px 16px;border-bottom:1px dashed var(--line2)}
  .compare-table .col-dim{
    background:var(--paper2);
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .compare-table tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--serif);
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    color:var(--ink4);
    margin-bottom:2px;
  }
  .compare-table tbody .col-dim::before{display:none}
  .compare-table tbody .col-us{
    background:rgba(39,76,67,0.07);
    border-left:3px solid var(--gold);
    border-right:none;
  }
  .compare-table tbody .col-us::before{color:var(--bronze)}
  .compare-foot{padding:18px 16px;gap:12px}
  .compare-foot .btn{width:100%;justify-content:center}
}