:root { --blue:#1769ff; --navy:#082970; --ink:#102a52; --muted:#6780a7; --line:#e6efff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:#f4f8ff; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.page-shell { width:min(1080px,100%); margin:0 auto; overflow:hidden; background:#fff; box-shadow:0 16px 56px rgba(25,78,162,.12); }
.hero { position:relative; isolation:isolate; min-height:466px; padding:82px 56px 64px; overflow:hidden; text-align:center; color:#fff; background:linear-gradient(135deg,#064ae8 0%,#126aff 47%,#67b1ff 100%); }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.32; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,black,transparent); }
.hero-orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); background:rgba(215,240,255,.3); }
.orb-one { width:310px;height:310px;top:-130px;left:-100px; }.orb-two { width:250px;height:250px;right:-80px;bottom:-120px; }
.gift-mark { width:42px; height:42px; margin:auto; display:grid; place-items:center; border:1px solid rgba(255,255,255,.46); border-radius:14px; color:#eaf7ff; font-size:23px; background:rgba(255,255,255,.12); box-shadow:0 9px 25px rgba(4,57,166,.23); }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0 12px; font-size:15px; font-weight:700; letter-spacing:.22em; }.eyebrow span { width:32px; height:1px; background:rgba(255,255,255,.68); }
h1,h2,h3,p { margin-top:0; }.hero h1 { margin-bottom:16px; font-size:45px; line-height:1.2; letter-spacing:.025em; }.hero h1 em { font-style:normal; color:#dff3ff; text-shadow:0 5px 20px rgba(8,45,145,.24); }.hero-copy { margin-bottom:27px; font-size:17px; color:rgba(255,255,255,.86); }.primary-button { display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border-radius:100px; color:#1461e8; background:#fff; text-decoration:none; font-size:15px; font-weight:700; box-shadow:0 12px 25px rgba(7,53,164,.25); }.primary-button b { font-size:17px; }
.section { padding:68px 56px; }.section-heading { text-align:center; }.section-heading p,.membership-kicker { margin-bottom:8px; color:#2c78ff; font-size:12px; font-weight:800; letter-spacing:.17em; }.section-heading h2,.membership h2 { margin-bottom:8px; font-size:30px; letter-spacing:.02em; }.section-heading span { color:var(--muted); font-size:15px; }
.step-overview { display:flex; align-items:center; justify-content:center; max-width:790px; margin:40px auto 0; }.overview-card { position:relative; flex:1; min-height:205px; padding:27px 24px 22px; border:1px solid var(--line); border-radius:20px; text-align:center; background:#fff; box-shadow:0 12px 28px rgba(38,93,180,.08); }.step-number { position:absolute; top:14px; left:17px; color:#b8d2ff; font-size:13px; font-weight:800; }.overview-icon { width:46px;height:46px;margin:8px auto 14px; }.user-icon { position:relative; border:2px solid #3d86ff; border-radius:14px; }.user-icon::before { content:""; position:absolute; width:12px;height:12px;left:15px;top:8px;border-radius:50%;background:#3d86ff; }.user-icon::after { content:"";position:absolute;width:24px;height:12px;left:9px;bottom:8px;border-radius:15px 15px 6px 6px;background:#3d86ff; }.ticket-icon { display:grid;place-items:center;border:2px solid #3d86ff;border-radius:11px;color:#3d86ff;font-size:25px;font-weight:800;transform:rotate(-6deg); }.overview-card h3 { margin-bottom:8px;font-size:18px; }.overview-card p { margin:0;color:var(--muted);font-size:13px;line-height:1.65; }.connector { display:flex;gap:5px;width:76px;justify-content:center; }.connector i { width:6px;height:6px;border-radius:50%;background:#92bdff; }.connector i:nth-child(2) { opacity:.67; }.connector i:nth-child(3) { opacity:.35; }
.tutorial { padding-top:18px; background:linear-gradient(#f7faff,#fff); }.tutorial-card { padding:30px; margin-bottom:28px; border:1px solid #e1edff; border-radius:24px; background:#fff; box-shadow:0 15px 40px rgba(37,90,170,.1); }.tutorial-card:last-child { margin-bottom:0; }.tutorial-header { display:flex; align-items:flex-start; gap:18px; margin-bottom:23px; }.badge { flex:none; padding:7px 11px; border-radius:8px; background:#eaf3ff; color:#2875f6; font-size:11px; font-weight:800; letter-spacing:.08em; }.tutorial-header h2 { margin:1px 0 7px; font-size:22px; }.tutorial-header p { margin:0; color:#5f7599; font-size:14px; line-height:1.7; }.tip { display:flex;align-items:center;gap:8px;margin:-5px 0 20px;padding:10px 12px;border-radius:10px;background:#f2f7ff;color:#6280ac;font-size:13px; }.tip span { display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#79aaff;color:#fff;font-weight:800;font-family:serif; }.screenshot-frame { overflow:hidden; border:1px solid #dbe9ff; border-radius:14px; background:#edf4ff; }.screenshot-frame img { display:block; width:100%; height:auto; }
.membership { display:flex;align-items:center;justify-content:space-between;gap:35px;padding:48px 56px;background:linear-gradient(112deg,#0750dc,#3489ff);color:#fff; }.membership-kicker { color:#b9dcff; }.membership h2 { margin-bottom:10px; }.membership-copy > p:last-child { margin:0;color:rgba(255,255,255,.8);font-size:14px; }.benefit-list { display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:13px 24px;margin:0;padding:0;list-style:none;font-size:15px;font-weight:600; }.benefit-list li { display:flex;align-items:center;gap:9px; }.benefit-list span { display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);font-size:12px; }.closing { margin:0;padding:34px 20px 38px;text-align:center;color:#7a91b2;font-size:14px; }
@media (max-width:700px) { .hero { min-height:410px;padding:64px 24px 48px; }.hero h1 { font-size:32px; }.hero-copy { font-size:14px; }.section { padding:48px 20px; }.section-heading h2,.membership h2 { font-size:26px; }.step-overview { gap:12px; }.connector { width:16px;flex-direction:column; }.overview-card { min-height:208px;padding:28px 13px 16px; }.overview-card p { font-size:12px; }.tutorial { padding-top:0; }.tutorial-card { padding:20px 15px;border-radius:18px; }.tutorial-header { gap:11px; }.tutorial-header h2 { font-size:18px; }.tutorial-header p { font-size:13px; }.membership { display:block;padding:40px 25px; }.benefit-list { grid-template-columns:1fr; margin-top:24px;gap:12px; }.closing { padding:28px 16px; } }
.hero-actions { display:flex; justify-content:center; align-items:center; gap:12px; }
.secondary-button { display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border:1px solid rgba(255,255,255,.52); border-radius:100px; color:#fff; background:rgba(255,255,255,.12); text-decoration:none; font-size:15px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease; }
.primary-button { transition:transform .2s ease,box-shadow .2s ease; }
.primary-button:hover,.secondary-button:hover { transform:translateY(-2px); box-shadow:0 16px 28px rgba(7,53,164,.28); }
.site-link { display:flex; align-items:center; justify-content:space-between; margin:0 0 20px; padding:12px 15px; border-radius:11px; background:#f0f6ff; color:#1769e9; text-decoration:none; font-size:14px; font-weight:700; }
.site-link span { font-size:17px; }.site-link:hover { background:#e6f0ff; }
@media (max-width:700px) { .hero-actions { flex-direction:column; }.primary-button,.secondary-button { width:100%; justify-content:center; } }
.hero { min-height:404px; padding:52px 56px 44px; }
.hero h1 { margin-bottom:12px; }
.hero-copy { margin-bottom:22px; }
.primary-button { position:relative; min-width:250px; justify-content:center; color:#0758db; background:linear-gradient(115deg,#fff 0%,#e8f6ff 100%); box-shadow:0 0 0 0 rgba(212,241,255,.72),0 12px 28px rgba(3,43,145,.32); animation:cta-breathe 2.3s ease-in-out infinite; }
.primary-button::before { content:""; position:absolute; inset:-4px; z-index:-1; border-radius:inherit; background:linear-gradient(110deg,rgba(255,255,255,.72),rgba(161,219,255,.92),rgba(255,255,255,.72)); filter:blur(5px); opacity:.9; }
.primary-button::after { content:""; width:8px; height:8px; border-radius:50%; background:#1d87ff; box-shadow:0 0 12px 3px rgba(29,135,255,.55); }
.primary-button b { order:3; }
@keyframes cta-breathe { 0%,100% { transform:translateY(0) scale(1); box-shadow:0 0 0 0 rgba(212,241,255,.64),0 12px 28px rgba(3,43,145,.32); } 50% { transform:translateY(-2px) scale(1.035); box-shadow:0 0 0 12px rgba(212,241,255,0),0 18px 36px rgba(3,43,145,.4); } }
.primary-button:hover { animation-play-state:paused; transform:translateY(-3px) scale(1.03); }
.step-overview { position:relative; gap:18px; max-width:850px; }
.overview-card { overflow:hidden; min-height:224px; padding:31px 27px 25px; border-width:0; box-shadow:0 18px 34px rgba(38,93,180,.13); transition:transform .2s ease,box-shadow .2s ease; }
.overview-card::before { content:""; position:absolute; width:150px; height:150px; top:-76px; right:-54px; border-radius:50%; background:rgba(87,157,255,.16); }
.overview-card:hover { transform:translateY(-5px); box-shadow:0 22px 38px rgba(38,93,180,.2); }
.overview-card .step-number { top:18px; left:20px; color:#1973fa; font-size:15px; letter-spacing:.05em; }
.step-register { background:linear-gradient(145deg,#edf6ff,#fff); }.step-redeem { color:#fff; background:linear-gradient(135deg,#0a58e5,#318dfd); }.step-redeem::before { background:rgba(255,255,255,.16); }.step-redeem .step-number { color:#cce7ff; }.step-redeem h3 { color:#fff; }.step-redeem p { color:#d8ecff; }.step-redeem .ticket-icon { border-color:#fff; color:#fff; }
.overview-icon { position:relative; z-index:1; width:52px; height:52px; margin:12px auto 16px; }.overview-card h3 { position:relative; font-size:20px; }.overview-card p { position:relative; font-size:13px; }.connector { position:relative; z-index:2; width:36px; }.connector i { width:7px; height:7px; background:#4592ff; }
.tutorial-card { position:relative; overflow:hidden; border-color:#d7e8ff; }.tutorial-card::before { content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:linear-gradient(#2b80ff,#91c7ff); }.tutorial-card .badge { padding:8px 12px; background:linear-gradient(135deg,#1b75f8,#4c9cff); color:#fff; box-shadow:0 7px 15px rgba(31,114,245,.22); }.tutorial-header h2 { color:#113b79; }
@media (max-width:700px) { .hero { min-height:382px; padding:48px 24px 37px; }.primary-button { min-width:0; }.step-overview { gap:10px; }.overview-card { min-height:218px; padding:30px 12px 18px; }.overview-card h3 { font-size:17px; }.connector { width:12px; } }
@media (prefers-reduced-motion:reduce) { .primary-button { animation:none; } }
.step-register,.step-redeem { color:var(--ink); background:linear-gradient(145deg,#edf6ff,#fff); }
.step-register::before,.step-redeem::before { background:rgba(87,157,255,.16); }
.step-register .step-number,.step-redeem .step-number { color:#1973fa; }
.step-register h3,.step-redeem h3 { color:var(--ink); }
.step-register p,.step-redeem p { color:var(--muted); }
.step-register .ticket-icon,.step-redeem .ticket-icon { border-color:#3d86ff; color:#3d86ff; }
.tutorial-header { position:relative; align-items:center; gap:22px; margin:-8px -8px 22px; padding:18px; border-radius:16px; background:linear-gradient(105deg,#edf5ff,#fff); }
/* removed title left bar to avoid clash with card bar */
.tutorial-card .badge { min-width:92px; padding:12px 10px; border-radius:11px; text-align:center; font-size:12px; letter-spacing:.1em; }
.tutorial-header h2 { margin-bottom:6px; font-size:25px; font-weight:800; letter-spacing:.025em; }.tutorial-header p { color:#315a94; font-size:15px; font-weight:600; line-height:1.7; }
@media (max-width:700px) { .tutorial-header { align-items:flex-start; gap:12px; margin:-5px -3px 18px; padding:14px 12px; }.tutorial-card .badge { min-width:68px; padding:9px 6px; font-size:10px; }.tutorial-header h2 { font-size:20px; }.tutorial-header p { font-size:13px; } }