/* 顺手拼豆官网样式 · 延续小程序「精致粉」设计语言（主操作/强调用粉，禁粉阴影） */

:root{
  --bg:#F7F6F3; --card:#FFFFFF; --line:#ECEAE6; --line-strong:#E3E0DA;
  --text-1:#26221F; --text-2:#6B6560; --text-3:#A29A92;
  --brand:#E8637F; --brand-deep:#C94F6C; --brand-weak:#FDF1F4; --on-brand:#FFFFFF;
  --dark:#2B2724;
  --shadow-soft:0 2px 8px rgba(31,26,23,.04); /* 仅中性阴影，不用粉阴影 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--text-1);background:var(--bg);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.hero,section,footer{scroll-margin-top:80px}

/* nav */
nav{position:sticky;top:0;background:rgba(247,246,243,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:9}
nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.logo .dot{width:22px;height:22px;border-radius:6px;background:var(--brand);display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;flex:none}
.logo .dot i{background:rgba(255,255,255,.85);border-radius:50%}
nav .links{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:14px;color:var(--text-2)}
nav .cta{background:var(--brand);color:var(--on-brand);font-size:14px;padding:8px 18px;border-radius:10px}
nav .menu-btn{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
nav .menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text-1)}

/* hero */
.hero{background:linear-gradient(180deg,var(--brand-weak) 0%,var(--bg) 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding-top:88px;padding-bottom:88px}
.kicker{display:inline-block;font-size:13px;color:var(--brand-deep);background:#fff;border:1px solid #F6D7DE;padding:4px 12px;border-radius:999px;margin-bottom:18px}
h1{font-size:52px;line-height:1.2;letter-spacing:-.5px}
h1 .pink{color:var(--brand)}
.sub{margin-top:18px;font-size:18px;color:var(--text-2);max-width:34em}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.btn{padding:12px 26px;border-radius:12px;font-size:15px}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-ghost{border:1.5px solid var(--line-strong);color:var(--text-1);background:#fff}
.stats{margin-top:34px;display:flex;gap:36px}
.stats b{display:block;font-size:22px;color:var(--brand-deep)}
.stats span{font-size:13px;color:var(--text-3)}
.qr-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;text-align:center;box-shadow:var(--shadow-soft);justify-self:end}
.qr-card img{width:200px;height:200px;object-fit:cover;border-radius:12px}
.qr-card p{margin-top:12px;font-size:13px;color:var(--text-2)}

/* section head */
section{padding:76px 0}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head .tag{font-size:13px;color:var(--brand-deep);letter-spacing:2px}
.sec-head h2{font-size:34px;margin-top:8px}
.sec-head p{color:var(--text-2);margin-top:10px;font-size:15px}

/* features */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-soft)}
.fcard .ico{width:46px;height:46px;border-radius:12px;background:var(--brand-weak);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.fcard h3{font-size:18px;margin-bottom:8px}
.fcard p{font-size:14px;color:var(--text-2)}
.fcard .pill{display:inline-block;margin-top:12px;font-size:12px;color:var(--brand-deep);background:var(--brand-weak);padding:3px 10px;border-radius:999px}

/* gallery */
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gitem{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);position:relative}
.gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gitem span{position:absolute;left:10px;bottom:10px;background:rgba(43,39,36,.72);color:#fff;font-size:12px;padding:3px 10px;border-radius:999px}

/* download */
.dl{background:var(--dark);color:#F5F1EC;border-radius:24px}
.dl .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.dl h2{font-size:30px}
.dl p{color:#9C948A;margin-top:12px;max-width:30em;font-size:15px}
.dl .qr{background:#fff;border-radius:18px;padding:16px;text-align:center}
.dl .qr img{width:170px;height:170px;border-radius:10px;display:block}
.dl .qr span{display:block;margin-top:10px;color:var(--text-2);font-size:13px}

/* footer */
footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;font-size:13px;color:var(--text-3)}
footer a{color:var(--text-2);border-bottom:1px dotted var(--line-strong)}

/* reveal animation（无 JS 时内容直接可见） */
[data-reveal]{transition:opacity .45s ease,transform .45s ease}
[data-reveal].is-hidden{opacity:0;transform:translateY(10px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:none}
  [data-reveal].is-hidden{opacity:1;transform:none}
}

/* 移动端：单列布局（无 min-width、无超过 375px 的固定 width） */
@media (max-width:768px){
  nav .wrap{position:relative;gap:14px}
  nav .menu-btn{display:flex}
  nav .links{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 14px;text-align:left}
  nav .links a{padding:12px 4px;border-bottom:1px solid var(--line);color:var(--text-1)}
  nav .links a:last-of-type{border-bottom:none}
  nav .cta{margin-top:8px;text-align:center}
  nav.open .links{display:flex}
  .hero .wrap{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px;gap:28px}
  h1{font-size:34px}
  .sub{font-size:16px}
  .qr-card{order:-1;margin:0 auto;justify-self:center}
  .qr-card img{width:150px;height:150px}
  .grid6{grid-template-columns:1fr}
  .ggrid{grid-template-columns:1fr 1fr}
  .dl .wrap{grid-template-columns:1fr;text-align:center;gap:28px}
  .dl p{margin-left:auto;margin-right:auto}
  .dl .qr{margin:0 auto}
  section{padding:52px 0}
  .stats{gap:22px;flex-wrap:wrap}
}