body{background:#fff;color:#333;line-height:1.8}
.headerwarp .logo-lan {display: flex}
.header-top{margin-bottom:0}
.share-banner img{width:100%}
.share-banner img {transition: opacity 0.3s ease;}
.share-banner img.lazy-load {  opacity: 0.8;}
.top-title{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px 0px;flex-wrap:wrap}
.dot-group{display:grid;grid-template-columns:repeat(3,6px);grid-template-rows:repeat(2,6px);gap:4px}
.dot{width:6px;height:6px;border-radius:2px;background-color:#ff7a7a;opacity:0.6}
.dot:nth-child(3n){background-color:#ff5252;opacity:1}
.main-title{font-size:36px;font-weight:bold;color:#ff4a7a;white-space:nowrap}
.sub-title{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:bold;color:#222;margin-bottom:50px;justify-content:center;padding-top:20px;flex-wrap:wrap}
.sub-title::before{content:"";width:40px;height:38px;margin-top:7px;background:url(friend-icon.webp) no-repeat center center;background-size:contain}
.steps-container{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;margin-bottom:60px}
.step-card{background-color:#fff0f0;border-radius:20px;padding:30px 48px;width:240px;position:relative;padding-right:0px;flex-shrink:0;margin-bottom:20px}
.step-number{position:absolute;top:0px;left:0;color:white;width:50px;height:47px;border-radius:25px 0 25px 0;display:flex;align-items:center;justify-content:center;font-size:26px;font-style:italic;background:linear-gradient(97deg,#ff557e,#ff91ac)}
.step-title{color:#ff6a4a;font-size:22px;font-weight:bold;margin-bottom:12px;margin-left:10px;background:linear-gradient(97deg,#ff7a3f,#ff002f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.step-desc{color:#555;font-size:16px;line-height:1.6;margin-left:10px}
.arrow{color:#fff0f0;font-size:25px;position:relative;display:flex;gap:3px;flex-shrink:0}
.arrow::before{content:"";width: 29px;height: 44px;background: url(arrow.webp) no-repeat center center; background-size: 74%;margin-top:10px}
.rule-bg{background:url(friend-bg.jpg) no-repeat center top;background-size:contain}
.rule-bg .rule-title { font-size: 34px; font-weight: bold;padding-top: 137px; height: 178px;padding-left: 49px;color: #242424;}
.page-title{font-size:28px;color:#ff4a7a;text-align:center;margin-bottom:40px;font-weight:bold;position:relative;padding-bottom:15px}
.page-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,#ff4a7a,#ff6a4a);border-radius:2px}
.rule-section{margin-bottom:25px;margin-top:42px;padding:0px 40px}
.section-title{font-size:18px;font-weight:bold;color:#222;background-color:#ffeeef;padding:10px 20px;margin-bottom:20px;border-radius:7px}
.rule-list{padding-left:18px;margin-bottom:15px}
.rule-list li{margin-bottom:10px;font-size:16px;color:#262626}
.rule-list li:last-child{margin-bottom:0}
.rule-list .note{font-size: 14px;color:#666}
.sub-rule{padding-left:25px;list-style-type:lower-alpha;margin-top:8px}
.sub-rule li{margin-bottom:8px;font-size:15px}
.sub-rule li.note{color:#666}
.highlight{color:#ff002f;font-weight:bold}
.invite-btn-container{text-align:center;padding-top:15px;margin-bottom:20px}
.invite-btn{position:relative;padding:11px 30px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(357deg,#ff4a7a,#ff6a4a);border-radius:50px;cursor:pointer;overflow:hidden;transition:all 0.3s ease;z-index:1;border:2px solid #ffffff;min-width:200px}
.invite-btn:hover,.invite-btn:focus{transform:scale(1.08);filter:brightness(1.15)}
.invite-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.1);transform:translate(-50%,-50%);transition:width 0.6s ease,height 0.6s ease;z-index:-1}
.invite-btn:hover::before{width:300px;height:300px}
.invite-btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease;z-index:-1}
.invite-btn:hover::after{left:100%}
.step-card,.arrow{opacity:0;transform:translateY(30px);animation:fadeInUp 0.8s ease forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}
}.step-card:nth-child(1){animation-delay:0.1s}
.step-card:nth-child(3){animation-delay:0.3s}
.step-card:nth-child(5){animation-delay:0.5s}

@media screen and (max-width: 768px) {
.top-title {margin: 10px 0px;}
.main-title {font-size: 25px;}
.invite-btn { padding: 5px 22px}
.sub-title{font-size: 18px; margin-bottom: 28px;}
.sub-title::before {width: 27px;height: 30px;background-size: 100%;}
.step-card{width: 100%;padding: 10px;}
.steps-container{gap: 0;padding: 15px; padding-top: 0px; margin-bottom: 0;}
.arrow{display: none;}
.step-title{font-size: 20px;margin-bottom: 0px; margin-left: 54px;}
.step-desc{font-size: 16px; margin-left: 54px;}
.rule-bg{background-size: 160%;}
.rule-bg .rule-title {font-size: 26px;padding-top: 20px;height: 60px;padding-left: 0;text-indent: -39px;text-align: center;}
.rule-section {padding: 0px 10px;margin-top: 18px;}
.section-title {font-size: 16px;padding: 4px 10px;margin-bottom: 10px;}
.rule-list li {margin-bottom: 4px; font-size: 14px;}
.rule-list {padding: 0px 8px;margin-bottom: 0px;}
.share-banner{overflow: hidden;height: 142px}
.share-banner img{width: auto;height: 110%;transform:translateX(-16%);}
}