*{box-sizing:border-box}
:root{
  --red:#f10b2f;
  --red-dark:#d5092b;
  --text:#14151a;
  --muted:#62656d;
  --line:#ededf0;
  --shadow:0 16px 42px rgba(18,23,35,.08);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(235,235,238,.8);
}
.header-inner{
  width:min(1450px,calc(100% - 72px));
  height:92px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:58px;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--red);
  text-decoration:none;
  flex:0 0 auto;
}
.brand-logo{
  width:48px;
  height:48px;
  object-fit:contain;
}
.brand-name{
  font-size:29px;
  font-weight:800;
  letter-spacing:-.04em;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:48px;
  margin-right:auto;
}
.main-nav a{
  text-decoration:none;
  font-size:16px;
  font-weight:620;
}
.main-nav span{margin-left:7px;font-size:16px}
.header-actions{
  display:flex;
  align-items:center;
  gap:30px;
  white-space:nowrap;
}
.language{font-size:15px}
.app-btn{
  border:1px solid #222;
  border-radius:25px;
  padding:11px 23px;
  background:#fff;
  font-weight:700;
}
.mobile-menu-btn,.mobile-menu{display:none}

.hero{
  background:#fff;
  overflow:hidden;
}
.hero-inner{
  width:min(1400px,calc(100% - 72px));
  min-height:590px;
  margin:auto;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  align-items:center;
  gap:60px;
  padding:52px 0 46px;
}
.hero-copy{
  padding-left:42px;
  position:relative;
  z-index:3;
}
.hero-copy h1{
  margin:0 0 26px;
  font-size:58px;
  line-height:1.28;
  letter-spacing:.02em;
  font-weight:820;
}
.hero-copy p{
  margin:0;
  color:#5c616a;
  font-size:20px;
}
.primary-btn{
  margin-top:38px;
  border:0;
  border-radius:34px;
  padding:17px 38px;
  background:var(--red);
  color:#fff;
  font-size:17px;
  font-weight:760;
  box-shadow:0 12px 28px rgba(241,11,47,.20);
}
.primary-btn:hover{background:var(--red-dark)}

.cards-visual{
  height:500px;
  position:relative;
  perspective:1300px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:25px;
}
.stack-card,.flip-shell{
  position:absolute;
  width:min(650px,78vw);
  aspect-ratio:1.59/1;
  border-radius:26px;
}
.stack-back{
  z-index:1;
  transform:translate(110px,82px) rotate(8deg);
  background:linear-gradient(135deg,#ee3d88 0%,#f21363 100%);
  box-shadow:0 24px 50px rgba(221,18,83,.17);
}
.stack-middle{
  z-index:2;
  transform:translate(65px,42px) rotate(4deg);
  background:linear-gradient(135deg,#6d5fd8 0%,#a45ad7 45%,#d55eaa 100%);
  box-shadow:0 20px 45px rgba(91,62,173,.16);
}
.flip-shell{
  z-index:3;
  perspective:1400px;
  transform:rotate(4deg);
}
.payment-card{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.75,.2,1);
  outline:none;
}
.payment-card.is-flipped{transform:rotateY(180deg)}
.card-side{
  position:absolute;
  inset:0;
  border-radius:26px;
  padding:34px 38px;
  overflow:hidden;
  backface-visibility:hidden;
  box-shadow:0 24px 58px rgba(45,45,130,.18),inset 0 0 0 1px rgba(255,255,255,.19);
}
.card-front{
  color:#fff;
  background:
    radial-gradient(circle at 74% 18%,rgba(255,255,255,.16),transparent 20%),
    linear-gradient(118deg,#1742dd 0%,#514bdc 42%,#8155df 72%,#aa69dc 100%);
}
.card-front:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 45%);
}
.card-back{
  transform:rotateY(180deg);
  color:#fff;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.16),transparent 21%),
    linear-gradient(118deg,#2549d8 0%,#5b4eda 44%,#8b58db 76%,#b56bd5 100%);
}
.card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:2;
}
.card-member{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:800;
  letter-spacing:.04em;
}
.card-logo{
  width:45px;
  height:45px;
  object-fit:contain;
}
.premium{
  font-size:17px;
  font-weight:800;
  letter-spacing:.04em;
}
.chip{
  width:58px;
  height:44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:7px;
  margin-top:46px;
  border-radius:11px;
  background:linear-gradient(135deg,#f4f8ff,#9fb9d7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
  position:relative;
  z-index:2;
}
.chip i{
  border:1px solid rgba(45,80,124,.45);
  border-radius:4px;
}
.masked-number{
  margin-top:38px;
  font-size:24px;
  letter-spacing:.1em;
  font-weight:760;
  position:relative;
  z-index:2;
}
.card-bottom{
  position:absolute;
  left:38px;
  right:38px;
  bottom:32px;
  display:flex;
  align-items:flex-end;
  gap:34px;
  z-index:2;
}
.card-bottom small{
  display:block;
  margin-bottom:7px;
  opacity:.7;
  font-size:10px;
  letter-spacing:.1em;
}
.card-bottom strong{
  font-size:15px;
  letter-spacing:.02em;
}
.valid{margin-left:auto}
.sparkle{
  margin-left:8px;
  font-size:27px;
}
.back-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:18px;
}
.magstripe{
  height:62px;
  margin:36px -38px 28px;
  background:rgba(23,24,54,.42);
}
.signature{
  width:78%;
  min-height:46px;
  padding:12px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#353752;
  background:rgba(255,255,255,.9);
  border-radius:5px;
  font-size:11px;
}
.back-footer{
  position:absolute;
  left:38px;
  right:38px;
  bottom:31px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  opacity:.86;
}
.card-tip{
  position:absolute;
  bottom:0;
  z-index:4;
  margin:0;
  color:#9b9da3;
  font-size:11px;
}

.benefits{
  border-top:1px solid #f0f0f2;
  background:#fff;
}
.benefits-inner{
  width:min(1450px,calc(100% - 72px));
  margin:auto;
  padding:24px 0 62px;
}
.benefits h2{
  margin:0 0 24px;
  text-align:center;
  font-size:34px;
}
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.benefit-card{
  min-height:230px;
  padding:25px 22px 24px;
  border:1px solid #ececef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 28px rgba(20,25,35,.055);
}
.icon-circle{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:50%;
  background:#fff2f4;
}
.icon-circle svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:var(--red);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.benefit-card h3{
  margin:0 0 11px;
  font-size:19px;
}
.benefit-card p{
  margin:0;
  color:#373a40;
  font-size:14px;
  line-height:1.7;
}

.application{
  background:#fafafb;
  border-top:1px solid #f0f0f2;
}
.application-inner{
  width:min(760px,calc(100% - 40px));
  margin:auto;
  padding:76px 0 86px;
}
.form-heading{text-align:center;margin-bottom:30px}
.form-heading>span{
  color:var(--red);
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
}
.form-heading h2{
  margin:9px 0 8px;
  font-size:32px;
}
.form-heading p{margin:0;color:#7b7e85}
.claim-form{
  padding:30px;
  border:1px solid #e8e8eb;
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}
.field{
  display:block;
  margin-bottom:18px;
}
.field span{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
}
.field input{
  width:100%;
  height:50px;
  padding:0 14px;
  border:1px solid #dadbe0;
  border-radius:10px;
  outline:none;
  color:#222;
  background:#fff;
}
.field input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(241,11,47,.07);
}
.agree{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#666;
  font-size:13px;
  line-height:1.6;
}
.agree input{margin-top:4px}
.agree a{color:var(--red);text-decoration:none}
.demo-note{
  margin:12px 0 16px;
  color:#a0a0a6;
  font-size:12px;
}
.submit-btn,.modal-btn{
  width:100%;
  height:50px;
  border:0;
  border-radius:25px;
  color:#fff;
  background:var(--red);
  font-weight:800;
}
.site-footer{
  padding:32px 20px 44px;
  text-align:center;
  color:#93949a;
  font-size:13px;
  background:#fff;
  border-top:1px solid #f0f0f2;
}

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  padding:20px;
  place-items:center;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
}
.modal-overlay.show{display:grid}
.modal{
  width:min(420px,100%);
  padding:32px;
  text-align:center;
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.2);
}
.success-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 15px;
  border-radius:50%;
  color:#fff;
  background:var(--red);
  font-size:28px;
  font-weight:900;
}
.modal h3{margin:0 0 8px;font-size:24px}
.modal>p{margin:0;color:#777}
.result-box{
  margin:22px 0;
  padding:13px 17px;
  border-radius:12px;
  background:#fafafb;
  border:1px solid #eee;
  text-align:left;
}
.result-box div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:8px 0;
}
.result-box span{color:#888}

@media(max-width:1100px){
  .main-nav{gap:25px}
  .header-inner{gap:30px}
  .hero-inner{grid-template-columns:.8fr 1.2fr}
  .hero-copy{padding-left:0}
  .hero-copy h1{font-size:48px}
  .benefits-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .header-inner{
    width:calc(100% - 30px);
    height:72px;
  }
  .brand-logo{width:39px;height:39px}
  .brand-name{font-size:23px}
  .main-nav,.header-actions{display:none}
  .mobile-menu-btn{
    display:block;
    margin-left:auto;
    border:0;
    background:transparent;
    font-size:25px;
  }
  .mobile-menu{
    display:none;
    padding:0 20px 16px;
    background:#fff;
  }
  .mobile-menu.show{display:grid}
  .mobile-menu a{
    padding:11px 0;
    text-decoration:none;
    border-top:1px solid #f2f2f2;
  }
  .hero-inner{
    width:calc(100% - 30px);
    grid-template-columns:1fr;
    min-height:auto;
    gap:30px;
    padding:48px 0 55px;
  }
  .hero-copy{
    text-align:center;
  }
  .hero-copy h1{
    font-size:43px;
  }
  .cards-visual{
    height:400px;
    padding:0;
  }
  .stack-card,.flip-shell{
    width:min(590px,84vw);
  }
  .stack-back{transform:translate(54px,52px) rotate(7deg)}
  .stack-middle{transform:translate(32px,28px) rotate(4deg)}
  .benefits-inner{
    width:calc(100% - 30px);
  }
}
@media(max-width:560px){
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:16px}
  .primary-btn{padding:14px 31px}
  .cards-visual{height:315px}
  .stack-card,.flip-shell{
    width:min(460px,86vw);
    border-radius:19px;
  }
  .card-side{
    border-radius:19px;
    padding:21px 22px;
  }
  .stack-back{transform:translate(28px,30px) rotate(6deg)}
  .stack-middle{transform:translate(16px,16px) rotate(3deg)}
  .card-logo{width:30px;height:30px}
  .card-member,.premium{font-size:12px}
  .chip{
    width:43px;height:33px;
    padding:5px;
    margin-top:24px;
  }
  .masked-number{
    margin-top:20px;
    font-size:15px;
  }
  .card-bottom{
    left:22px;right:22px;bottom:18px;
  }
  .card-bottom strong{font-size:11px}
  .card-bottom small{font-size:8px}
  .sparkle{font-size:19px}
  .magstripe{
    margin:24px -22px 20px;
    height:45px;
  }
  .back-footer{left:22px;right:22px;bottom:18px;font-size:9px}
  .benefits-grid{grid-template-columns:1fr 1fr}
  .benefit-card{
    min-height:210px;
    padding:21px 17px;
  }
  .benefit-card p{font-size:13px}
  .benefits h2{font-size:29px}
}
@media(max-width:390px){
  .benefits-grid{grid-template-columns:1fr}
}


/* ===== 简洁顶部 ===== */
.header-inner{
  justify-content:space-between;
}
.main-nav,
.mobile-menu-btn,
.mobile-menu{
  display:none !important;
}
.header-actions{
  margin-left:auto;
}
.language{
  font-size:15px;
  color:#333;
  font-weight:650;
}

/* ===== 表单错误提示 ===== */
.field-error{
  margin-top:7px;
  color:#f10b2f;
  font-size:12px;
  line-height:1.4;
}
.field input.input-error{
  border-color:#f10b2f !important;
  box-shadow:0 0 0 3px rgba(241,11,47,.08) !important;
}
.agree-error{
  margin-top:8px;
  color:#f10b2f;
  font-size:12px;
}

/* ===== 成功弹窗升级 ===== */
.success-modal{
  padding:34px;
}
.success-modal h3{
  margin:0 0 10px;
  font-size:26px;
}
.success-lead{
  margin:0;
  color:#666;
  line-height:1.7;
}
.success-note{
  margin:0 0 20px;
  color:#777;
  font-size:13px;
  line-height:1.65;
}
.result-box{
  margin:22px 0 18px;
}
.result-box strong{
  color:#171717;
}
.modal-btn{
  height:50px;
}

/* 顶部在手机端仍保持干净 */
@media(max-width:820px){
  .header-inner{
    justify-content:space-between;
  }
  .header-actions{
    display:flex !important;
  }
}