:root{
  --green:#168965;
  --dgreen:#0b624a;
  --ink:#14251d;
  --ink-soft:#3d4c44;
  --cream:#f5f7f3;
  --gray:#66736c;
  --line:#dfe5df;
  --mint:#e8f3ed;
}

body{
  font-family:"HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:#f5f7f3;
  line-height:1.75;
}

h1,h2,h3{letter-spacing:0;}
.wrap{max-width:1320px;padding:0 36px;}

nav{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(20,37,29,.08);
  box-shadow:0 4px 22px rgba(20,37,29,.04);
}
.nav-in{height:76px;}
.nav-links{gap:34px;}
.nav-links a{font-size:15px;font-weight:600;}
.nav-cta,.btn{border-radius:6px;}
.nav-cta{padding:10px 22px;}

section{padding:96px 0;}
.sec-head{max-width:880px;margin-bottom:58px;}
.sec-title{font-size:40px;line-height:1.25;margin-bottom:18px;}
.sec-intro{font-size:18px;line-height:1.8;}
.sec-eyebrow,.page-hero .ph-eyebrow{
  gap:10px;
  padding:0;
  border-radius:0;
  background:transparent;
  font-size:15px;
  letter-spacing:0;
}
.sec-eyebrow::before,.page-hero .ph-eyebrow::before{
  content:"";
  width:18px;
  height:3px;
  background:var(--green);
}

.hero{
  background:linear-gradient(90deg,rgba(244,248,245,.98) 0%,rgba(244,248,245,.92) 46%,rgba(244,248,245,.46) 100%),url("community-activity.png") center/cover;
}
.hero-in{min-height:650px;padding:72px 0;grid-template-columns:1.1fr .9fr;gap:96px;}
.hero h1{font-size:58px;line-height:1.2;margin-bottom:26px;}
.hero .lead{font-size:19px;max-width:580px;}
.phone{width:278px;height:572px;border-radius:32px;box-shadow:0 34px 70px rgba(20,37,29,.24);}
.phone-screen{border-radius:23px;}

.page-hero{
  min-height:430px;
  display:flex;
  align-items:center;
  text-align:left;
  padding:80px 0;
  background-position:center;
  background-size:cover;
}
.page-hero .wrap{width:100%;}
.page-hero h1{max-width:850px;font-size:50px;line-height:1.2;margin-bottom:22px;}
.page-hero p{max-width:760px;margin:0;font-size:19px;line-height:1.8;}
.page-about .page-hero{background-image:linear-gradient(90deg,rgba(244,248,245,.98) 0%,rgba(244,248,245,.9) 48%,rgba(244,248,245,.42) 100%),url("community-board.png");}
.page-merchant .page-hero{background-image:linear-gradient(90deg,rgba(244,248,245,.98) 0%,rgba(244,248,245,.9) 48%,rgba(244,248,245,.38) 100%),url("photo-studio-service.png");background-position:center 42%;}
.page-partner .page-hero{background-image:linear-gradient(90deg,rgba(244,248,245,.98) 0%,rgba(244,248,245,.9) 48%,rgba(244,248,245,.38) 100%),url("community-activity.png");}
.page-business .page-hero{background-image:linear-gradient(90deg,rgba(244,248,245,.98) 0%,rgba(244,248,245,.9) 48%,rgba(244,248,245,.38) 100%),url("merchant-service.png");}

.imgph{border-radius:8px;box-shadow:0 22px 54px rgba(20,37,29,.14);}
.media-row{grid-template-columns:1.08fr .92fr;gap:88px;}
.media-row .mr-text h2{font-size:38px;line-height:1.3;margin-bottom:20px;}
.media-row .mr-text p{font-size:17px;}
.media-row .mr-list li{font-size:16px;margin-bottom:13px;}
.gallery{grid-template-columns:1.2fr .9fr .9fr;gap:18px;}

.feat-grid,.ben-grid{gap:18px;}
.feat,.ben,.val,.biz-card,.link-card{border-radius:8px;}
.feat,.ben,.val{
  border-color:var(--line);
  box-shadow:0 12px 34px rgba(20,37,29,.055);
}
.feat{padding:34px 26px;text-align:left;}
.feat .fic{margin:0 0 22px;border-radius:6px;}
.feat h3,.ben h3,.val h3{font-size:20px;}
.feat p,.ben p,.val p{font-size:15px;}

.steps{gap:24px;}
.step{text-align:left;padding:26px 24px 0;border-top:2px solid var(--line);}
.step .num{margin:0 0 20px;border-radius:6px;}
.step h3{font-size:21px;}
.step p{font-size:15.5px;}

.cats{gap:14px;}
.cat{border-radius:6px;padding:12px 24px;box-shadow:0 8px 24px rgba(20,37,29,.04);}
.links-band{background:linear-gradient(90deg,rgba(16,38,28,.96),rgba(16,38,28,.82)),url("community-activity.png") center/cover;}
.link-card{background:rgba(255,255,255,.06);padding:36px 30px;}
.link-card h3{font-size:22px;}

.flow-row{gap:22px;}
.fstep{text-align:left;padding:24px;border-top:2px solid var(--line);}
.fstep .n{margin:0 0 16px;border-radius:6px;}
.fstep h4{font-size:18px;}
.who{border-radius:8px;padding:36px 38px;}
.who .tag{border-radius:6px;}

.biz-split{gap:22px;}
.biz-card{padding:52px 46px;}
.biz-card h3{font-size:28px;line-height:1.35;}
.biz-card>p,.biz-card li{font-size:16px;}
.biz-card .jtag{border-radius:4px;}
.model-strip{border-radius:8px;padding:64px 56px;}
.model-strip h3{font-size:30px;}
.model-strip>p{font-size:17px;max-width:760px;}
.ms-step .c{border-radius:6px;}

.contact-band{border-radius:8px;padding:72px 48px;}
.contact-band h2{font-size:36px;}
.contact-band p{font-size:17px;max-width:650px;}
footer{background:#10241b;padding-top:64px;}

@media(max-width:900px){
  .wrap{padding:0 24px;}
  section{padding:72px 0;}
  .hero-in{min-height:auto;grid-template-columns:1fr;gap:42px;text-align:center;}
  .hero .lead{margin-left:auto;margin-right:auto;}
  .hero h1{font-size:46px;}
  .page-hero{min-height:370px;padding:70px 0;}
  .page-hero h1{font-size:42px;}
  .media-row{grid-template-columns:1fr;gap:42px;}
  .media-row.rev{direction:ltr;}
  .gallery{grid-template-columns:1fr 1fr;}
}

@media(max-width:520px){
  .wrap{padding:0 20px;}
  .nav-in{height:64px;}
  section{padding:58px 0;}
  .sec-head{text-align:left;margin-bottom:36px;}
  .sec-title{font-size:30px;}
  .sec-intro{font-size:16px;}
  .hero{background-position:62% center;}
  .hero-in{padding:36px 0 42px;gap:22px;}
  .hero h1{font-size:35px;}
  .hero .lead{font-size:16px;}
  .phone{width:176px;height:220px;margin-top:0;}
  .phone-screen{display:block;}
  .ph-body{height:auto;}
  .page-hero{min-height:330px;padding:56px 0;background-position:62% center;}
  .page-hero h1{font-size:34px;}
  .page-hero p{font-size:16px;}
  .page-hero .ph-eyebrow{font-size:14px;}
  .media-row{gap:30px;}
  .media-row .mr-text h2{font-size:29px;}
  .gallery{grid-template-columns:1fr;}
  .feat,.ben,.val,.biz-card,.link-card{padding:26px 22px;}
  .step,.fstep{padding:22px 0 0;}
  .cat{width:auto;flex:1 1 calc(50% - 14px);padding:11px 12px;}
  .biz-card h3{font-size:23px;}
  .model-strip{padding:38px 24px;}
  .model-strip h3{font-size:25px;}
  .contact-band{padding:44px 24px;}
  .contact-band h2{font-size:27px;}
}