* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
:root {
--ink: #101725;
--ink-2: #55627a;
--blue: #2563eb;
--blue-2: #4f8bff;
--gold: #f59e0b;
--gold-2: #fbbf24;
--bg: #f6f8fd;
--card: rgba(255, 255, 255, .72);
--line: rgba(20, 40, 90, .08);
--r: 24px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Segoe UI", sans-serif;
color: var(--ink);
background: var(--bg);
font-size: 15px;
line-height: 1.75;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.wrap {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 0 20px;
}

/* ============ 极光背景 ============ */
.aurora {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.aurora i {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: .55;
will-change: transform;
}
.aurora .a1 {
width: 52vmax;
height: 52vmax;
left: -18vmax;
top: -22vmax;
background: radial-gradient(circle, #b7ccff 0%, rgba(183, 204, 255, 0) 65%);
animation: drift1 16s ease-in-out infinite alternate;
}
.aurora .a2 {
width: 44vmax;
height: 44vmax;
right: -16vmax;
top: -10vmax;
background: radial-gradient(circle, #ffe4ae 0%, rgba(255, 228, 174, 0) 65%);
animation: drift2 20s ease-in-out infinite alternate;
}
.aurora .a3 {
width: 40vmax;
height: 40vmax;
left: 24vmax;
bottom: -24vmax;
background: radial-gradient(circle, #b9f3e0 0%, rgba(185, 243, 224, 0) 65%);
animation: drift1 24s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 {
to {
transform: translate(6vmax, 4vmax) scale(1.08);
}
}
@keyframes drift2 {
to {
transform: translate(-5vmax, 5vmax) scale(1.12);
}
}

/* ============ 顶部玻璃导航 ============ */
.nav {
position: sticky;
top: 0;
z-index: 40;
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
background: rgba(255, 255, 255, .55);
border-bottom: 1px solid var(--line);
}
.nav-in {
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 16px;
letter-spacing: .5px;
}
.logo .dot {
width: 26px;
height: 26px;
border-radius: 9px;
background: linear-gradient(135deg, var(--blue-2), var(--blue));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px;
font-weight: 900;
}
.nav-cta {
font-size: 14px;
font-weight: 700;
color: #fff;
background: linear-gradient(120deg, var(--blue), var(--blue-2));
border: 0;
border-radius: 999px;
padding: 8px 18px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}

/* ============ 首屏 ============ */
.hero {
padding: 26px 0 18px;
}
.hero-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
text-align: center;
}
.badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: var(--blue);
background: rgba(37, 99, 235, .08);
border: 1px solid rgba(37, 99, 235, .18);
padding: 6px 16px;
border-radius: 999px;
}
.badge i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
}
.hero h1 {
font-size: clamp(38px, 9vw, 64px);
line-height: 1.18;
font-weight: 900;
letter-spacing: 1px;
margin: 18px 0 6px;
}
.grad-gold {
background: linear-gradient(110deg, #f59e0b 5%, #fb7185 55%, #f59e0b 95%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 5s linear infinite;
}
@keyframes shine {
to {
background-position: 200% 0;
}
}
.hero .slogan {
font-size: clamp(17px, 4.4vw, 24px);
font-weight: 700;
color: var(--ink);
letter-spacing: 2px;
}
.hero .slogan .sep {
color: #c3cddf;
margin: 0 10px;
font-weight: 400;
}
.hero .desc {
margin-top: 12px;
color: var(--ink-2);
max-width: 430px;
font-size: 15px;
}
.chips {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 18px;
}
.chips span {
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
background: var(--card);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 14px;
backdrop-filter: blur(8px);
}
.chips span b {
color: #10b981;
margin-right: 4px;
}

/* 首屏二维码浮岛 */
.qr-stage {
position: relative;
/* 只在下方留悬浮卡的位置,顶部不留白 */
padding: 8px 0 122px;
}
.qr-glass {
position: relative;
z-index: 2;
width: min(300px, 84vw);
margin: 0 auto;
background: var(--card);
backdrop-filter: blur(18px) saturate(1.5);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 28px;
padding: 24px 24px 20px;
box-shadow: 0 24px 60px rgba(30, 58, 138, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
text-align: center;
}
.qr-glass::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 28px;
padding: 1px;
background: linear-gradient(140deg, rgba(79, 139, 255, .5), rgba(255, 255, 255, 0) 40%, rgba(245, 158, 11, .45));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.qr-glass img {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 14px;
}
.qr-tip {
margin-top: 12px;
font-size: 15px;
font-weight: 800;
color: var(--ink);
}
.qr-tip .wx {
color: #07c160;
}
.qr-sub {
font-size: 14px;
color: var(--ink-2);
margin-top: 2px;
}
/* 悬浮通知卡 & 奖励气泡 */
.float-card {
position: absolute;
z-index: 1; /* 垫在码卡下层,永不遮码 */
/*border-radius: 14px;
box-shadow: 0 14px 34px rgba(30, 58, 138, .18);
border: 1px solid rgba(255, 255, 255, .85);*/
overflow: hidden;
animation: floaty 5.5s ease-in-out infinite;
}
.float-notify {
width: min(210px, 54vw);
right: max(calc(50% - 265px), 8px);
bottom: 14px;
transform: rotate(-3deg);
}
.float-coin {
z-index: 3;
left: max(calc(50% - 285px), 4px);
bottom: 30px;
background: linear-gradient(120deg, #fff7e0, #ffedc2);
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
color: #92600a;
border-radius: 999px;
animation-delay: 1.2s;
}
.float-coin .coin {
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, #ffe9a8, #f59e0b);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #7c4a00;
}
@keyframes floaty {
0%, 100% {
translate: 0 0;
}
50% {
translate: 0 -6px;
}
}

/* ============ 区块通用 ============ */
section {
padding: 54px 0 8px;
}
.sec-head {
text-align: center;
max-width: 640px;
margin: 0 auto 30px;
}
.eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 800;
letter-spacing: 3px;
color: var(--blue);
text-transform: uppercase;
margin-bottom: 8px;
}
h2 {
font-size: clamp(18px, 5vw, 38px);
font-weight: 900;
line-height: 1.3;
letter-spacing: 1px;
}
.sec-head p {
color: var(--ink-2);
margin-top: 10px;
}

/* ============ Bento 卖点 ============ */
.bento {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.cell {
position: relative;
background: var(--card);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .8);
border-radius: var(--r);
padding: 26px 24px;
box-shadow: 0 10px 34px rgba(30, 58, 138, .08);
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease;
}
@media (hover: hover) {
.cell:hover {
transform: translateY(-5px);
box-shadow: 0 22px 50px rgba(30, 58, 138, .14);
}
}
.cell .tag {
display: inline-block;
font-size: 13px;
font-weight: 800;
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 12px;
background: rgba(37, 99, 235, .1);
color: var(--blue);
}
.cell h3 {
font-size: 21px;
font-weight: 900;
line-height: 1.35;
margin-bottom: 8px;
}
.cell p {
font-size: 14.5px;
color: var(--ink-2);
}
.cell .art {
margin-top: 20px;
padding: 16px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(37, 99, 235, .05), rgba(79, 139, 255, .12));
display: flex;
justify-content: center;
align-items: center;
}
.cell .art img {
width: auto;
max-width: 100%;
border-radius: 10px;
box-shadow: 0 10px 26px rgba(30, 58, 138, .12);
background: #fff;
}
/* 手机外壳展示:手机从卡片底部探出,被卡片边缘裁切 */
.cell .art.phone {
position: relative;
display: block;
height: 350px;
margin-top: 22px;
padding: 0;
background: none;
overflow: visible;
}
.cell .art.phone::before {
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 300px;
height: 300px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(79, 139, 255, .18), transparent 68%);
pointer-events: none;
}
.phone-shell {
position: absolute;
z-index: 1;
left: 50%;
top: 0;
width: 250px;
overflow: hidden;
transform: translateX(-50%) rotate(1.8deg);
border: 7px solid #18201c;
border-radius: 38px;
background: #fff;
box-shadow: 0 30px 60px rgba(30, 58, 138, .2), 12px 14px 0 rgba(37, 99, 235, .06);
}
.phone-shell::before {
content: "";
position: absolute;
z-index: 2;
top: 8px;
left: 50%;
width: 60px;
height: 7px;
transform: translateX(-50%);
border-radius: 99px;
background: #18201c;
}
.cell .art.phone img {
width: 100%;
border-radius: 0;
box-shadow: none;
}
/* 奖励主卡 */
.cell.gold {
background: linear-gradient(135deg, #fffaf0 0%, #fff3d6 60%, #ffe9b8 100%);
border-color: #ffe6ad;
}
.cell.gold .tag {
background: rgba(245, 158, 11, .16);
color: #92600a;
}
.cell.gold h3 {
font-size: clamp(22px, 5.5vw, 30px);
}
.gold-art {
margin-top: 22px;
display: flex;
justify-content: center;
}
.gold-art svg {
width: min(340px, 82%);
height: auto;
filter: drop-shadow(0 14px 26px rgba(214, 148, 22, .28));
}

/* ============ 步骤 ============ */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
counter-reset: st;
}
.step {
position: relative;
background: var(--card);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 20px;
padding: 20px 20px 18px 20px;
box-shadow: 0 8px 26px rgba(30, 58, 138, .07);
}
.step::before {
counter-increment: st;
content: "0" counter(st);
display: block;
font-size: 26px;
font-weight: 900;
line-height: 1;
margin-bottom: 10px;
background: linear-gradient(120deg, var(--blue), #7cc0ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.step b {
display: block;
font-size: 16px;
margin-bottom: 3px;
}
.step span {
font-size: 14px;
color: var(--ink-2);
}

/* ============ 回复演示 ============ */
.duo {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.duo .cell {
padding: 20px;
}
.duo figcaption {
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--ink-2);
margin-top: 12px;
}
.duo .frame {
padding: 16px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(37, 99, 235, .05), rgba(79, 139, 255, .12));
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.duo img {
width: auto;
max-width: 100%;
border-radius: 10px;
box-shadow: 0 10px 26px rgba(30, 58, 138, .12);
background: #fff;
}
.duo figure {
display: flex;
flex-direction: column;
}
.duo figure .frame {
flex: 1;
}

/* ============ 小卖点 ============ */
.mini-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mini {
background: var(--card);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 20px;
padding: 20px 16px;
text-align: center;
box-shadow: 0 8px 26px rgba(30, 58, 138, .06);
}
.mini .ic {
width: 44px;
height: 44px;
margin: 0 auto 10px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(79, 139, 255, .14), rgba(37, 99, 235, .08));
}
.mini b {
display: block;
font-size: 15px;
margin-bottom: 4px;
}
.mini span {
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
display: block;
}

/* ============ 结尾暗色岛 ============ */
.final-island {
position: relative;
border-radius: 32px;
background: radial-gradient(120% 140% at 50% 0%, #1c3f8f 0%, #0d1e45 55%, #0a1633 100%);
color: #fff;
text-align: center;
padding: 22px 22px 20px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(13, 30, 69, .35);
}
.final-island::before {
content: "";
position: absolute;
width: 480px;
height: 480px;
left: 50%;
top: -260px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(251, 191, 36, .28), transparent 62%);
pointer-events: none;
}
.final-island h2 {
color: #fff;
}
.final-island .sub {
color: #b9c8e8;
font-size: 14px;
margin: 10px 0 28px;
}
.final-island .qr-glass {
background: rgba(255, 255, 255, .96);
}
.final-island .hint {
margin-top: 20px;
font-size: 14px;
color: #93a7d1;
}

footer {
text-align: center;
font-size: 13px;
color: #97a3ba;
padding: 30px 16px 20px;
}

/* ============ 悬浮 CTA ============ */
.ctabar {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 50;
display: flex;
justify-content: center;
transition: transform .4s ease, opacity .4s ease;
pointer-events: none;
}
.ctabar.hide {
transform: translateY(140%);
opacity: 0;
}
.ctabtn {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
max-width: 480px;
height: 54px;
border: 0;
border-radius: 999px;
font-size: 17px;
font-weight: 800;
letter-spacing: 1px;
color: #401f00;
background: linear-gradient(120deg, #ffd34d, #ffab1f);
box-shadow: 0 10px 30px rgba(255, 171, 31, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
cursor: pointer;
}
.ctabtn::after {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
background-size: 250% 100%;
animation: sweep 2.8s ease-in-out infinite;
pointer-events: none;
}
.ctabtn {
position: relative;
overflow: hidden;
}
@keyframes sweep {
0% {
background-position: 180% 0;
}
60%, 100% {
background-position: -80% 0;
}
}

/* ============ 进场动画 ============ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.in {
opacity: 1;
transform: none;
}
.bento .cell.reveal:nth-child(2), .steps .step.reveal:nth-child(2), .mini.reveal:nth-child(2) {
transition-delay: .08s;
}
.bento .cell.reveal:nth-child(3), .steps .step.reveal:nth-child(3), .mini.reveal:nth-child(3) {
transition-delay: .16s;
}
.bento .cell.reveal:nth-child(4), .steps .step.reveal:nth-child(4), .mini.reveal:nth-child(4) {
transition-delay: .24s;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.aurora i, .float-card, .grad-gold, .ctabtn::after {
animation: none;
}
}

/* ============ 桌面端 ============ */
@media (min-width: 900px) {
body {
font-size: 16px;
}
.hero {
padding: 40px 0 24px;
}
.hero-grid {
flex-direction: row;
text-align: left;
justify-content: space-between;
align-items: flex-start;
gap: 60px;
}
.hero-copy {
max-width: 580px;
}
.hero .desc {
font-size: 17px;
}
.chips {
justify-content: flex-start;
}
.qr-stage {
flex: 0 0 400px;
padding: 8px 0 74px;
}
/* PC:通知卡放到码卡左侧的空白区,微倾探出 */
.float-notify {
right: auto;
bottom: auto;
top: 120px;
left: max(min(-60px, calc(190px - 26vw)), -170px);
transform: rotate(6deg);
}
.float-coin {
left: 12px;
bottom: 14px;
}
section {
padding: 0px 0 10px;
}
.bento {
grid-template-columns: repeat(6, 1fr);
}
/* 手机卡竖占右侧一列(跨两行),金色卡横幅,b3/b4 补齐下一行 */
.bento .b1 {
grid-column: 1 / span 4;
grid-row: 1;
}
.bento .b2 {
grid-column: 5 / span 2;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bento .b3 {
grid-column: 1 / span 2;
grid-row: 2;
}
.bento .b4 {
grid-column: 3 / span 2;
grid-row: 2;
}
.cell {
padding: 32px 30px;
}
.cell.gold {
display: flex;
align-items: center;
gap: 32px;
padding: 40px 44px;
}
.cell.gold .gtxt {
flex: 1;
}
.gold-art {
margin-top: 0;
flex: 0 0 46%;
}
.gold-art svg {
width: min(460px, 100%);
}
.b2 .art.phone {
align-self: stretch;
flex: 1;
height: auto;
min-height: 380px;
}
.steps {
grid-template-columns: repeat(4, 1fr);
}
.duo {
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.mini-grid {
grid-template-columns: repeat(4, 1fr);
}
.final-island {
padding: 68px 40px 60px;
}
}
.beian{
    width:270px;
}
.beian>a{
    text-decoration:none;
}
.beian-drag{
    width: 150px;
}
.beian-drag>a{
    text-decoration: none;
}