/* ═══════════════════════════════════════════════════════════
   不倒翁 BUDAOWENG — 公司首页
   设计语言：The Red Issue（杂志风皮肤，正常官网信息架构）
   规范：色值/字体/字距见 设计规范-网站风格说明.md
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. Tokens & Reset ---------- */
:root{
  --serif-cn:'Noto Serif SC','Songti SC','STSong','Source Han Serif SC',serif;
  --serif-en:'Cormorant Garamond','Didot','Bodoni 72',Georgia,serif;
  --sans:'Helvetica Neue',Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --red:#B0152C;
  --red-deep:#8E1024;
  --paper:#F7F2EC;
  --ink:#1A1413;
  --gold:#C2A05C;
  --gold-deep:#A8843A;
  --grey:#6E665E;
  --line:#E0D9CE;
  --black:#16100F;
  --container:1140px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border-radius:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--serif-cn);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
em{font-style:normal;}

::selection{background:var(--red);color:#fff;}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 6%;
}

/* ---------- 2. 章节头 ---------- */
.sec-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:60px;
}
.sec-en{
  font-family:var(--serif-en);
  font-size:12px;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--grey);
}
.sec-cn{
  font-size:19px;
  font-weight:500;
  letter-spacing:3px;
  color:var(--ink);
}
.sec-line{
  flex:1;
  height:1px;
  background:var(--line);
  transform:translateY(-4px);
}

section.paper{
  padding-top:110px;
}

/* ---------- 3. 按钮 ---------- */
.btn{
  display:inline-block;
  font-family:var(--serif-cn);
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
  padding:13px 32px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn-primary{
  background:var(--red);
  color:#fff;
}
.btn-primary:hover{
  background:var(--red-deep);
}
.btn-ghost-gold{
  border-color:var(--gold);
  color:#fff;
}
.btn-ghost-gold:hover{
  border-color:#fff;
}
.btn-nav{
  font-size:13px;
  padding:9px 22px;
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.btn-nav:hover{
  background:#fff;
  color:var(--red-deep);
  border-color:#fff;
}

/* ---------- 4. 顶部导航 + Hero（同一红渐变容器） ---------- */
.site-head{
  background:linear-gradient(160deg,#B0152C 0%,#8E1024 100%);
  color:#fff;
}

.nav{
  display:flex;
  align-items:center;
  gap:40px;
  padding-top:26px;
  padding-bottom:26px;
}
.brand{
  font-size:19px;
  font-weight:600;
  letter-spacing:2px;
  white-space:nowrap;
}
.brand em{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:15px;
  letter-spacing:3px;
  color:var(--gold);
  margin-left:2px;
}
.nav-links{
  display:flex;
  gap:34px;
  margin-left:auto;
}
.nav-links a{
  font-size:14px;
  letter-spacing:2px;
  color:rgba(255,255,255,.78);
  padding:4px 0;
  transition:color .25s ease;
}
.nav-links a:hover{
  color:#fff;
}

.gold-hairline{
  height:1px;
  background:var(--gold);
  opacity:.55;
}

.hero{
  padding:100px 0 112px;
  max-width:780px;
}
.kicker{
  font-family:var(--serif-en);
  font-size:12px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:26px;
}
.hero-title{
  font-size:clamp(40px,5.2vw,64px);
  font-weight:700;
  letter-spacing:2px;
  line-height:1.2;
  color:rgba(255,255,255,.96);
}
.hero-sub{
  margin-top:26px;
  font-size:21px;
  font-weight:500;
  letter-spacing:2px;
  color:rgba(255,255,255,.78);
}
.hero-en{
  margin-top:8px;
  font-family:var(--serif-en);
  font-size:16px;
  color:rgba(255,255,255,.55);
}
.hero-en em{font-style:italic;}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:48px;
}

/* ---------- 5. 品牌理念（纸白） ---------- */
.about-grid{
  max-width:880px;
}
.lede{
  font-size:clamp(18px,2vw,22px);
  font-weight:500;
  letter-spacing:1px;
  line-height:2;
  margin-bottom:34px;
}
.lede:first-of-type::first-letter{
  float:left;
  font-size:74px;
  line-height:.9;
  font-weight:600;
  padding:10px 16px 0 0;
  color:var(--red-deep);
}

.audience{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  margin-top:72px;
  padding-top:48px;
  border-top:1px solid var(--line);
}
.aud-t{
  font-size:19px;
  font-weight:600;
  letter-spacing:4px;
  margin-bottom:12px;
}
.aud-t::before{
  content:'';
  display:block;
  width:32px;
  height:1px;
  background:var(--gold-deep);
  margin-bottom:18px;
}
.aud-d{
  font-size:15px;
  color:var(--grey);
}

/* ---------- 6. 产品与服务（目录式列表） ---------- */
.prog{
  display:grid;
  grid-template-columns:72px 1fr 250px;
  gap:40px;
  padding:52px 0;
  border-top:1px solid var(--line);
}
.prog:last-child{
  border-bottom:1px solid var(--line);
}
.prog-no{
  font-family:var(--serif-en);
  font-size:26px;
  font-weight:500;
  font-style:italic;
  color:var(--red);
  padding-top:2px;
}
.prog-en{
  font-family:var(--serif-en);
  font-size:11px;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:8px;
}
.prog-t{
  font-size:24px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:14px;
}
.prog-d{
  font-size:15px;
  color:rgba(26,20,19,.8);
  max-width:560px;
}
.prog-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:14px;
}
.prog-meta{
  font-size:13.5px;
  letter-spacing:1px;
  color:var(--grey);
  line-height:2;
}
.prog-link{
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--red);
  border-bottom:1px solid var(--red);
  padding-bottom:4px;
  transition:color .25s ease,border-color .25s ease;
}
.prog-link:hover{
  color:var(--red-deep);
  border-color:var(--red-deep);
}
.price{
  font-family:var(--serif-en);
  font-size:50px;
  font-weight:600;
  line-height:1;
  color:var(--ink);
}
.price sup{
  font-size:22px;
  color:var(--gold-deep);
  vertical-align:24px;
  margin-right:2px;
}

.qr{
  border:1px solid var(--gold-deep);
  background:#fff;
  padding:10px;
}
.qr img{
  width:100%;
  height:auto;
}
.qr--sm{
  width:118px;
}
.qr-note{
  font-size:12px;
  letter-spacing:1px;
  color:var(--grey);
}
.qr--foot{
  width:104px;
  margin-top:14px;
}

/* ---------- 8. 联系 CTA（红渐变） ---------- */
.cta{
  background:linear-gradient(160deg,#B0152C 0%,#8E1024 100%);
  color:#fff;
  padding:104px 0;
  margin-top:120px;
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:72px;
  align-items:center;
}
.cta-en{
  font-family:var(--serif-en);
  font-size:15px;
  color:rgba(255,255,255,.55);
  margin-bottom:20px;
}
.cta-en em{font-style:italic;}
.cta-t{
  font-size:clamp(28px,3.4vw,42px);
  font-weight:700;
  letter-spacing:2px;
  line-height:1.5;
  color:rgba(255,255,255,.96);
  margin-bottom:40px;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:24px;
}
.cta .btn-primary{
  background:#fff;
  color:var(--red-deep);
}
.cta .btn-primary:hover{
  background:rgba(255,255,255,.86);
}
.cta-wx{
  font-size:13.5px;
  letter-spacing:1px;
  color:rgba(255,255,255,.62);
}
.wx-id{
  font-family:var(--serif-en);
  letter-spacing:2px;
  color:var(--gold);
}

.cta-qr{
  text-align:center;
}
.cta-qr .qr{
  width:180px;
}
.cta-qr figcaption{
  margin-top:14px;
  font-size:12.5px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.62);
}

/* ---------- 9. 页脚（近黑） ---------- */
.footer{
  background:var(--black);
  color:#fff;
  padding:80px 0 36px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 200px 260px;
  gap:56px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-logo{
  font-size:22px;
  font-weight:600;
  letter-spacing:2px;
  color:rgba(255,255,255,.9);
}
.foot-logo em{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:16px;
  letter-spacing:3px;
  color:var(--gold);
}
.foot-slogan{
  margin-top:14px;
  font-size:13.5px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.5);
}
.foot-h{
  font-family:var(--serif-en);
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:20px;
}
.foot-col a{
  display:block;
  font-size:14px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.72);
  padding:6px 0;
  transition:color .25s ease;
}
.foot-col a:hover{
  color:#fff;
}
.foot-wx{
  font-size:14px;
  letter-spacing:1px;
  color:rgba(255,255,255,.72);
  padding:4px 0;
}
.footer .wx-id{
  color:var(--gold);
}
.foot-bottom{
  padding-top:26px;
  text-align:center;
  font-size:11.5px;
  letter-spacing:1px;
  color:rgba(255,255,255,.38);
}
.foot-bottom a{
  color:rgba(255,255,255,.45);
  transition:color .25s ease;
}
.foot-bottom a:hover{
  color:rgba(255,255,255,.7);
}

/* ---------- 10. 滚动显影 ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
  .btn,.nav-links a,.prog-link,.foot-col a,.foot-bottom a{transition:none;}
}

/* ---------- 11. 响应式 ---------- */
@media (max-width:860px){
  .container{padding:0 8%;}

  .nav{
    gap:18px;
    padding-top:20px;
    padding-bottom:20px;
  }
  .nav-links{display:none;}
  .nav .btn-nav{margin-left:auto;}
  .brand em{display:none;}

  .hero{padding:64px 0 76px;}

  section.paper{padding-top:76px;}

  .audience{
    grid-template-columns:1fr;
    gap:36px;
    margin-top:56px;
    padding-top:40px;
  }

  .prog{
    grid-template-columns:1fr;
    gap:22px;
    padding:40px 0;
  }
  .prog-side{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    text-align:left;
  }
  .prog-no{font-size:22px;}

  .cta{
    padding:72px 0;
    margin-top:76px;
  }
  .cta-grid{
    grid-template-columns:1fr;
    gap:52px;
  }
  .cta-qr .qr{width:160px;}

  .footer{padding:56px 0 28px;}
  .footer-grid{
    grid-template-columns:1fr;
    gap:44px;
  }
}