/* 云帆官网 · V3「暖陶人文」视觉系统
   设计真源：prototypes/v3-暖陶人文.html
   纯手写 CSS，零外链依赖；全部颜色走 :root CSS 变量。 */

:root{
  --bg:#F5F0E8;
  --bg-deep:#EDE5D8;
  --surface:#FBF8F2;
  --surface-warm:#F0E9DC;
  --ink:#2B2118;
  --ink-soft:#5C4F42;
  --ink-faint:#8A7A68;
  --line:#D9CDBB;
  --line-soft:#E6DCCB;
  --primary:#C0532F;
  --primary-deep:#9A3F22;
  --primary-soft:#E9C9B8;
  --primary-wash:#F3E2D8;
  --success:#5F7A4E;
  --warning:#B07A2A;
  --danger:#A8402F;
  --radius:6px;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-display:"Yuanti SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  /* 纸张纹理感：极轻的暖色杂点 */
  background-image:radial-gradient(var(--line-soft) 0.6px,transparent 0.6px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--primary-soft)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
img,svg,video{max-width:100%;height:auto}
fieldset{min-width:0}
h1,h2,h3,.font-display{
  font-family:var(--font-display);
  letter-spacing:.04em;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* ── 布局容器 ── */
.wrap{max-width:1152px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.wrap-narrow{max-width:880px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.section{padding:4.5rem 0}
.band{
  background:var(--bg-deep);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.scroll-mt{scroll-margin-top:5rem}

/* ── 通用文字 ── */
.kicker{
  letter-spacing:.28em;font-size:12px;color:var(--primary);
  font-weight:600;text-transform:uppercase;margin-bottom:1rem;
}
.text-primary{color:var(--primary)}
.dim{color:var(--ink-faint)}
.num-serif{font-family:var(--font-serif);font-style:italic;color:var(--primary)}
.section-head{max-width:42rem;margin-bottom:2.5rem}
.section-head h2{font-size:1.9rem;font-weight:700;line-height:1.35;margin-bottom:.8rem}
.section-head p{color:var(--ink-soft);font-size:1rem;line-height:1.8}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ── 按钮 ── */
.btn{
  display:inline-block;font-family:inherit;font-size:.95rem;font-weight:600;
  padding:.65rem 1.5rem;border-radius:var(--radius);border:none;cursor:pointer;
  background:var(--primary);color:var(--surface);line-height:1.5;text-align:center;
  transition:background .2s,transform .15s,border-color .2s,color .2s;
}
.btn:hover{background:var(--primary-deep);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:transparent}
.btn-weak{
  display:inline-block;background:none;border:none;cursor:pointer;font-family:inherit;
  color:var(--ink-faint);font-size:.9rem;padding:.65rem .25rem;
  transition:color .2s;
}
.btn-weak:hover{color:var(--primary);text-decoration:none}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}
.req{color:var(--primary);margin-left:.15rem}

/* ── 吸顶导航（全站） ── */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(245,240,232,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.site-nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:4rem;position:relative;
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{
  width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--surface);border-radius:var(--radius);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.04em}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{font-size:.9rem;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--primary);text-decoration:none}
.nav-links .nav-cta{
  background:var(--primary);color:var(--surface);font-weight:600;
  padding:.45rem 1.1rem;border-radius:var(--radius);
  transition:background .2s;
}
.nav-links .nav-cta:hover{background:var(--primary-deep);color:var(--surface)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:.5rem .55rem;cursor:pointer;flex-direction:column;gap:4px;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px}

/* ── Hero ── */
.hero{padding:5rem 0 3.5rem}
.hero-inner{max-width:48rem}
.hero h1{
  font-size:clamp(2rem,4.5vw,3.25rem);font-weight:700;line-height:1.25;
  margin-bottom:1.2rem;
}
.hero-sub{font-size:1.15rem;line-height:1.8;color:var(--ink-soft);margin-bottom:.8rem}
.hero-note{font-size:.88rem;line-height:1.8;color:var(--ink-faint);margin-bottom:2.2rem}
.hero .btn,.hero .btn-ghost{font-size:1rem;padding:.8rem 1.8rem}

/* ── 签名元素：先看懂，再决定 · 三站旅程带 ── */
.journey-band{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2.5rem 0;
}
.journey-title{
  text-align:center;font-size:.85rem;color:var(--ink-faint);
  letter-spacing:.2em;margin-bottom:2.2rem;
}
.journey{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}
.journey::before{
  content:"";position:absolute;top:9px;left:4%;right:4%;
  border-top:1px dashed var(--line);
}
.station{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  text-align:center;color:var(--ink);
}
.station:hover{text-decoration:none}
.station:hover .station-name{color:var(--primary)}
.station-dot{
  width:18px;height:18px;border-radius:9999px;flex-shrink:0;
  background:var(--primary);border:4px solid var(--primary-wash);
  position:relative;z-index:1;
}
.station-name{font-size:.9rem;margin-bottom:.25rem;display:block}
.station-desc{
  display:block;font-size:.85rem;line-height:1.7;color:var(--ink-soft);
}

/* ── 对话式条目（能力中心） ── */
.convo-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:3.5rem;
}
.convo-item{
  border-top:1px solid var(--line);padding:1.8rem 0;
}
.convo-item:nth-child(even){margin-top:0}
.convo-q{
  color:var(--primary-deep);font-weight:600;font-size:1.1rem;
  position:relative;padding-left:1.4rem;margin-bottom:.7rem;line-height:1.6;
}
.convo-q::before{
  content:"“";position:absolute;left:0;top:-.2rem;
  color:var(--primary);font-size:1.4rem;font-family:var(--font-serif);
}
.convo-item h3{font-size:1rem;font-weight:700;margin-bottom:.7rem}
.convo-item p{font-size:.9rem;line-height:1.8;color:var(--ink-soft);margin-bottom:.5rem}
.convo-item p strong{color:var(--ink)}
.tag-fee{
  display:block;font-size:.78rem;color:var(--ink-faint);
  border-top:1px dashed var(--line);padding-top:.6rem;margin-top:.9rem;
}
.convo-more{
  display:inline-block;font-size:.85rem;margin-top:.7rem;
}
.convo-item.feature{
  grid-column:1 / -1;background:var(--surface-warm);
  border-left:3px solid var(--primary);
  padding-left:1.5rem;padding-right:1.5rem;
}
.convo-item.feature p{max-width:48rem}
.convo-item .btn{margin-top:.8rem}
.convo-meta{font-size:.82rem;color:var(--ink-faint)}
.convo-meta a{color:var(--primary)}

/* ── 三方约定 ── */
.pact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2rem}
.pact-col{
  border-top:3px solid var(--primary);background:var(--surface);
  padding:1.6rem;
}
.pact-col h3{font-size:1.1rem;font-weight:700;margin-bottom:.8rem}
.pact-col p{font-size:.9rem;line-height:2;color:var(--ink-soft)}
.pact-note{
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
  padding:1.4rem 1.6rem;
}
.pact-note p{font-size:.9rem;line-height:2;color:var(--ink-soft)}
.pact-note strong{color:var(--ink)}

/* ── 案例 ── */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.case-card{
  display:block;border-top:3px solid var(--primary);padding:1.4rem 0;
  color:var(--ink);
}
.case-card:hover{text-decoration:none}
.case-card:hover h3{color:var(--primary)}
.case-card-top{
  display:flex;align-items:center;justify-content:flex-end;margin-bottom:.9rem;
}
.badge-case{
  font-size:11px;letter-spacing:.1em;color:var(--primary-deep);
  border:1px solid var(--primary-soft);border-radius:9999px;
  padding:3px 10px;background:var(--primary-wash);white-space:nowrap;
}
.case-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;line-height:1.5;transition:color .2s}
.case-card p{font-size:.88rem;line-height:1.8;color:var(--ink-soft)}
.case-card ul{list-style:none;margin:.6rem 0}
.case-card li{font-size:.88rem;line-height:1.8;color:var(--ink-soft);margin:.25rem 0}
.case-card li strong{color:var(--ink)}
.tags{margin-top:.8rem}
.tag{
  display:inline-block;font-size:.75rem;line-height:1.6;padding:.15rem .6rem;
  border-radius:999px;border:1px solid var(--line);color:var(--ink-faint);
  margin:.12rem .18rem .12rem 0;background:var(--surface);
}
.tag.acc{color:var(--primary-deep);border-color:var(--primary-soft);background:var(--primary-wash)}

/* ── 路径选择：tabs + 表单 ── */
.tabs{display:flex;justify-content:center;gap:.7rem;margin-bottom:2.2rem}
.tab-btn{
  font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
  padding:.55rem 1.8rem;border-radius:9999px;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);
  transition:all .2s;
}
.tab-btn:hover{color:var(--primary);border-color:var(--primary)}
.tab-btn.active{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.path-grid{display:grid;grid-template-columns:2fr 3fr;gap:1.4rem;align-items:stretch}
.path-grid .panel-card{display:flex;flex-direction:column}
.path-grid .panel-card .btn{margin-top:auto;align-self:flex-start}
.panel-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem;
}
.panel-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.6rem}
.panel-card>p{font-size:.9rem;line-height:1.9;color:var(--ink-soft);margin-bottom:1.2rem}
.panel-card .dim{font-size:.85rem}
.opc-panel{max-width:42rem;margin:0 auto}

/* ── 信纸式表单：下划线输入 ── */
.lead-form{margin-top:.5rem}
.field{margin-bottom:1.6rem;border:none}
.field label,.field legend{
  display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:.4rem;
}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],
.field textarea,.field select{
  width:100%;background:transparent;font-family:inherit;
  border:none;border-bottom:1.5px solid var(--line);border-radius:0;
  padding:.55rem .1rem;font-size:.95rem;color:var(--ink);
  outline:none;transition:border-color .2s;
}
.field select{cursor:pointer}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  border-bottom-color:var(--primary);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.85}
.field .hint{font-size:.78rem;color:var(--ink-faint);margin-top:.35rem}
.contact-group input{margin-bottom:.8rem}
.contact-group input:last-child{margin-bottom:0}
.form-msg{font-size:.9rem;min-height:1.4em;margin:.3rem 0}
.form-msg.ok{color:var(--success)}
.form-msg.err{color:var(--danger)}
.privacy-note{font-size:.8rem;color:var(--ink-faint);margin-top:.9rem;line-height:1.7}
.form-wrap{margin-top:1.4rem}
.gift-option{
  display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.9rem;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem 1rem;margin-bottom:.6rem;cursor:pointer;background:var(--surface);
  transition:border-color .2s;
}
.gift-option:hover{border-color:var(--primary)}
.gift-option span{min-width:0}
.gift-option strong{color:var(--ink)}
.gift-option input{margin-top:.35rem;accent-color:var(--primary)}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  padding:1.2rem .25rem;font-weight:600;font-size:1rem;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";color:var(--primary);font-size:1.3rem;font-weight:400;
  flex-shrink:0;transition:transform .25s;line-height:1;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{
  padding:0 .25rem 1.3rem;color:var(--ink-soft);line-height:1.9;font-size:.92rem;
}

/* ── 辅助页（page） ── */
.page{padding:3.5rem 0 4.5rem}
.page-inner{max-width:1152px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.page-head{max-width:44rem;margin-bottom:2.2rem}
.page-head h1{font-size:2.1rem;font-weight:700;line-height:1.3;margin-bottom:.7rem}
.page-sub{color:var(--ink-soft);font-size:1rem;line-height:1.8}
.page h2{
  font-size:1.3rem;font-weight:700;margin:2.4rem 0 1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.callout{
  border:1px dashed var(--line);background:var(--surface);border-radius:var(--radius);
  padding:1.1rem 1.4rem;margin:1.1rem 0;
}
.callout p{font-size:.92rem;color:var(--ink-soft);line-height:1.9;margin:.25rem 0}
.callout strong{color:var(--ink)}
.callout.solid{border-style:solid;border-left:3px solid var(--primary)}
.placeholder-block{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:2.2rem 1.5rem;margin:1.4rem 0;
  text-align:center;color:var(--ink-faint);background:var(--surface);
}

/* ── 长文排版（关于 / 公益 / 隐私 / 条款 / 免责声明） ── */
.prose{max-width:44rem}
.prose h1{font-size:2.1rem;font-weight:700;margin-bottom:1.2rem;line-height:1.3}
.prose h2{
  font-size:1.25rem;font-weight:700;margin:2.2rem 0 .8rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.prose h3{font-size:1.05rem;font-weight:700;margin:1.6rem 0 .6rem}
.prose p{margin:.8rem 0;color:var(--ink);line-height:1.9}
.prose ul,.prose ol{padding-left:1.35rem;margin:.8rem 0}
.prose li{margin:.35rem 0;color:var(--ink-soft);line-height:1.9}
.prose li strong,.prose p strong{color:var(--ink)}
.prose blockquote{
  border-left:3px solid var(--primary);background:var(--surface-warm);
  padding:.8rem 1.2rem;margin:1.2rem 0;color:var(--ink-soft);border-radius:0 var(--radius) var(--radius) 0;
}

/* ── Candy ── */
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:1.4rem 0}
.gift-preview{
  border-top:3px solid var(--primary);background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius);
  border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.4rem;transition:opacity .2s,box-shadow .2s;
}
.gift-preview .lock-badge{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;
  padding:.12rem .6rem;margin-bottom:.7rem;background:var(--bg);
}
.gift-preview h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.gift-preview p{font-size:.88rem;color:var(--ink-soft);line-height:1.8}
.gift-preview.active{
  border-top-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary),0 8px 28px rgba(192,83,47,.14);
}
.gift-preview.active .lock-badge{color:var(--primary-deep);border-color:var(--primary-soft);background:var(--primary-wash)}
.gift-preview.dimmed{opacity:.5}
.candy-step{margin-bottom:2.4rem}
.candy-step h2{
  font-size:1.25rem;font-weight:700;margin-bottom:1rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.identity-btn.weak{
  background:transparent;color:var(--ink-faint);border:1px solid var(--line);
}
.dl-btn.locked{opacity:.45;pointer-events:none;cursor:not-allowed}
.dl-btn.locked::after{content:"（未解锁）";font-weight:400;font-size:.8rem}
.candy-bottom{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.4rem}

/* ── 页脚 ── */
.site-footer{
  background:var(--bg-deep);border-top:1px solid var(--line);margin-top:0;
  padding:3rem 0 1.8rem;
}
.footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap;
}
.footer-brand p{font-size:.9rem;color:var(--ink-soft);margin-top:.7rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem}
.footer-nav a{font-size:.9rem;color:var(--ink-soft)}
.footer-nav a:hover{color:var(--primary);text-decoration:none}
.footer-legal{
  border-top:1px solid var(--line-soft);padding-top:1.2rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.5rem;
  color:var(--ink-faint);font-size:.78rem;
}
.footer-legal p{margin:.15rem 0}
.footer-note a{color:var(--ink-faint);text-decoration:underline}

/* ── 响应式 ── */
@media(max-width:960px){
  .convo-grid,.pact-grid,.case-grid,.gift-grid{grid-template-columns:1fr}
  .path-grid{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr;gap:1.8rem}
  .journey::before{display:none}
  .station{flex-direction:row;align-items:flex-start;text-align:left;gap:1rem}
  .station-dot{margin-top:.3rem}
  .convo-item.feature{grid-column:auto}
}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1rem;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
  .nav-links .nav-cta{
    border-bottom:none;text-align:center;margin-top:.7rem;padding:.6rem 1rem;
  }
}
@media(max-width:640px){
  body{font-size:15px}
  .section{padding:3rem 0}
  .hero{padding:3rem 0 2.5rem}
  .hero h1{font-size:1.8rem}
  .hero .btn,.hero .btn-ghost{width:100%}
  .hero .btn-weak{width:100%;text-align:center}
  .section-head h2{font-size:1.55rem}
  .panel-card{padding:1.3rem}
  .footer-top{flex-direction:column}
}

/* ── reduced motion ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}