.wechat-public-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% -4%,rgba(25,95,80,.13),transparent 30%),
    radial-gradient(circle at 92% 4%,rgba(190,143,72,.12),transparent 28%),
    linear-gradient(135deg,#fffef9 0%,#f1f7f3 54%,#eaf3ef 100%);
  color:#10241f;
}

.wechat-public-header{
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid rgba(25,95,80,.1);
  background:rgba(255,254,249,.72);
  backdrop-filter:blur(28px) saturate(1.25);
  -webkit-backdrop-filter:blur(28px) saturate(1.25);
}

.public-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(58px,8vw,104px) 0 clamp(48px,7vw,88px);
}

.public-hero::before{
  content:"";
  position:absolute;
  inset:24px max(18px,4vw);
  border:1px solid rgba(255,255,255,.72);
  border-radius:36px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.22)),
    radial-gradient(circle at 78% 18%,rgba(25,95,80,.11),transparent 34%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 28px 72px rgba(16,35,31,.055);
}

.public-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,390px);
  gap:clamp(28px,6vw,76px);
  align-items:center;
}

.public-kicker,
.public-follow-section span,
.public-boundary-card span{
  color:#195f50;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
}

.public-hero h1,
.public-follow-section h2,
.public-boundary-card h2{
  margin:18px 0 18px;
  color:#10241f;
  font-size:clamp(42px,6.2vw,76px);
  line-height:1.05;
  letter-spacing:-.038em;
  text-wrap:balance;
}

.public-hero h1 em{
  color:#195f50;
  font-style:normal;
}

.public-hero p,
.public-benefits p,
.public-boundary-card p,
.public-safe-note{
  color:#334a42;
  font-size:15px;
  line-height:1.86;
}

.public-actions,
.public-boundary-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.public-role-card,
.public-qr-panel,
.public-benefits,
.public-boundary-card{
  border:1px solid rgba(255,255,255,.78);
  border-radius:30px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.46)),
    rgba(255,254,249,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 18px 48px rgba(16,35,31,.075);
}

.public-role-card{
  padding:30px;
}

.public-role-card strong{
  display:block;
  margin-bottom:18px;
  color:#10241f;
  font-size:clamp(24px,3vw,34px);
  line-height:1.18;
  letter-spacing:-.03em;
}

.public-role-card dl{
  margin:0;
  display:grid;
  gap:14px;
}

.public-role-card div{
  padding:15px;
  border-radius:18px;
  background:rgba(255,255,255,.64);
}

.public-role-card dt{
  color:#195f50;
  font-weight:950;
}

.public-role-card dd{
  margin:6px 0 0;
  color:#40584f;
  font-size:13px;
  line-height:1.75;
}

.public-follow-section,
.public-boundary{
  padding:clamp(48px,7vw,88px) 0;
}

.public-follow-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:24px;
  align-items:start;
}

.public-qr-panel,
.public-benefits,
.public-boundary-card{
  padding:clamp(24px,4vw,34px);
}

.public-qr-card{
  margin:24px 0 0;
  display:grid;
  place-items:center;
  min-height:318px;
  border:1px solid rgba(25,95,80,.1);
  border-radius:28px;
  background:rgba(255,255,255,.72);
}

.public-qr-card img{
  width:min(260px,100%);
  height:auto;
  border-radius:22px;
  background:#fff;
  padding:10px;
}

.public-qr-card figcaption{
  padding:26px;
  text-align:center;
}

.public-qr-card strong,
.public-qr-card small{
  display:block;
}

.public-qr-card strong{
  color:#10241f;
  font-size:20px;
}

.public-qr-card small{
  margin-top:8px;
  color:#526a61;
  font-size:13px;
  line-height:1.8;
}

.public-qr-card code{
  padding:2px 6px;
  border-radius:8px;
  background:rgba(25,95,80,.08);
  color:#195f50;
}

.public-benefits h2,
.public-boundary-card h2{
  font-size:clamp(32px,4.4vw,52px);
}

.public-benefits ul{
  margin:24px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  list-style:none;
}

.public-benefits li{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.64);
}

.public-benefits b{
  display:block;
  color:#10241f;
  font-size:17px;
}

.public-benefits p{
  margin:8px 0 0;
  font-size:13px;
}

.public-boundary-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
}

.public-boundary-actions{
  min-width:220px;
  display:grid;
  margin:0;
}

.public-boundary-actions a{
  min-height:48px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#195f50;
  border:1px solid rgba(25,95,80,.14);
  font-size:13px;
  font-weight:950;
}

.public-boundary-actions a:first-child{
  background:#195f50;
  color:#fffef9;
}

@media(max-width:900px){
  .public-hero-grid,
  .public-follow-grid,
  .public-boundary-card{
    grid-template-columns:1fr;
  }

  .public-boundary-actions{
    min-width:0;
  }
}

@media(max-width:620px){
  .public-hero{
    padding:36px 0 38px;
  }

  .public-hero::before{
    inset:12px;
    border-radius:26px;
  }

  .public-hero-grid{
    padding:0 16px;
  }

  .public-hero h1{
    max-width:330px;
    font-size:clamp(31px,8.7vw,36px);
    line-height:1.14;
    letter-spacing:-.022em;
  }

  .public-hero p{
    max-width:330px;
    font-size:15px;
    line-height:1.78;
  }

  .public-benefits ul{
    grid-template-columns:1fr;
  }

  .public-qr-panel,
  .public-benefits,
  .public-boundary-card,
  .public-role-card{
    border-radius:26px;
  }
}