*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  --bg:#eef2f7;
  --paper:#ffffff;
  --ivory:#fff8ef;
  --cream:#f4eadc;
  --ink:#141a28;
  --muted:#627087;
  --line:#d7dfec;
  --navy:#0b1224;
  --blue:#315cff;
  --gold:#c9a86a;
  --shadow:0 24px 70px rgba(18,31,57,.10);
  --shadow-strong:0 34px 100px rgba(11,18,36,.22);
  --container:1180px;
}
body{
  margin:0;
  background:
    radial-gradient(circle at top left,rgba(49,92,255,.10),transparent 25%),
    linear-gradient(180deg,#f7f9fc 0%,#eef2f7 52%,#e8edf4 100%);
  color:var(--ink);
  font-family:"Avenir Next",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font:inherit}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}
.eyebrow:before{
  content:"";
  width:28px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),transparent);
}
.concierge{
  margin:18px auto 0;
  width:min(var(--container),calc(100% - 30px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(215,223,236,.9);
  border-radius:24px;
  padding:14px 16px;
  position:sticky;
  top:14px;
  z-index:20;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(18,31,57,.08);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  font-size:22px;
  font-weight:900;
}
.brand strong{display:block;font-size:18px;line-height:1.05}
.brand em{display:block;font-style:normal;font-size:12px;color:#778399;letter-spacing:.12em;margin-top:2px}
.concierge nav{
  display:flex;
  gap:8px;
  align-items:center;
}
.concierge nav a,.nav-contact{
  padding:10px 13px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.nav-contact{
  background:var(--navy);
  color:#fff;
}
.openNav{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
}

.warm-hero{
  width:min(var(--container),calc(100% - 30px));
  margin:34px auto;
  display:grid;
  grid-template-columns:.98fr 1.02fr;
  gap:22px;
}
.hero-copy{
  background:#fff;
  border:1px solid var(--line);
  border-radius:44px;
  padding:54px;
  box-shadow:var(--shadow);
}
.warm-hero h1{
  font-size:clamp(46px,6vw,82px);
  line-height:.92;
  letter-spacing:-.065em;
  margin:18px 0;
}
.warm-hero p{
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
}
.hero-actions,.support-actions,.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.btn-primary,.btn-secondary,.btn-outline,.product-contact,.download-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px 22px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary,.download-cta{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  box-shadow:0 18px 42px rgba(49,92,255,.20);
}
.btn-secondary{
  background:#fff;
  border-color:var(--line);
  color:var(--ink);
}
.btn-outline{
  background:transparent;
  border-color:rgba(20,26,40,.18);
  color:var(--ink);
}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:32px;
}
.hero-metrics article{
  background:#f7f9fc;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
}
.hero-metrics strong{
  display:block;
  font-size:28px;
  line-height:1;
}
.hero-metrics span{
  display:block;
  color:var(--muted);
  margin-top:8px;
}
.hero-figure{
  margin:0;
  background:
    radial-gradient(circle at top right,rgba(49,92,255,.18),transparent 34%),
    linear-gradient(145deg,#0b1224,#1f315c);
  border-radius:44px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:var(--shadow-strong);
  overflow:hidden;
}
.hero-product{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-product img{
  max-height:430px;
  object-fit:contain;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.25));
}
.hero-figure figcaption{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  padding:18px;
  color:#fff;
  text-align:center;
}
.hero-figure figcaption strong{display:block}
.hero-figure figcaption span{
  display:block;
  color:rgba(255,255,255,.72);
  margin-top:4px;
}

.entry-hub,.vertical-set,.plan,.delivery,.section-table,.warmfaq,.download-band,.support-zone,.security-zone,.site-footer{
  width:min(var(--container),calc(100% - 30px));
  margin:36px auto;
}
.section-title{
  margin:0 0 24px;
}
.section-title.center{text-align:center}
.section-title h2,.plan h2,.delivery h2,.section-table h2,.faq h2,.download-band h2,.support-copy h2,.security-zone h2,.site-footer h2,.modal-panel h2{
  font-size:clamp(38px,5vw,66px);
  line-height:.95;
  letter-spacing:-.055em;
  margin:14px 0 12px;
}
.section-title p{color:var(--muted);font-size:17px}

.entry-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.entry-card{
  min-height:265px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:32px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.entry-card small{
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--blue);
}
.entry-card h3{
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
  margin:14px 0 10px;
}
.entry-card p{
  color:var(--muted);
  line-height:1.7;
}
.entry-card strong{
  margin-top:16px;
  word-break:break-word;
}
.entry-card.dark{
  background:var(--navy);
  color:#fff;
}
.entry-card.dark p,.entry-card.dark strong{color:rgba(255,255,255,.74)}
.entry-card.dark small{color:#90a8ff}
.entry-card.accent{
  background:#eef3ff;
}
.entry-card.contact{
  cursor:pointer;
  border-style:dashed;
}

.vertical-set{
  display:grid;
  gap:18px;
}
.vertical-product{
  display:grid;
  grid-template-columns:1fr 360px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:36px;
  padding:28px;
  box-shadow:var(--shadow);
}
.vertical-product.flagship{
  background:linear-gradient(135deg,#ffffff,#f3f6ff);
}
.vertical-product small{
  color:var(--blue);
  font-weight:900;
  letter-spacing:.12em;
}
.vertical-product h3{
  font-size:42px;
  line-height:.98;
  letter-spacing:-.05em;
  margin:14px 0 12px;
}
.vertical-product p,.vertical-product li{
  color:var(--muted);
  line-height:1.75;
}
.vertical-product ul{
  margin:16px 0 20px;
  padding-left:20px;
}
.product-contact{
  background:var(--navy);
  color:#fff;
}
.vertical-product figure{
  margin:0;
  background:linear-gradient(180deg,#fbfcff,#edf2fa);
  border:1px solid var(--line);
  border-radius:30px;
  padding:20px;
  text-align:center;
}
.vertical-product img{
  height:235px;
  object-fit:contain;
  margin:auto;
  filter:drop-shadow(0 22px 28px rgba(18,31,57,.14));
}
.vertical-product figcaption{
  font-size:22px;
  font-weight:900;
  margin-top:10px;
}

.plan,.delivery,.section-table,.warmfaq,.security-zone{
  background:#fff;
  border:1px solid var(--line);
  border-radius:38px;
  padding:42px;
  box-shadow:var(--shadow);
}
.plan>div{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.plan article,.security-grid article{
  background:#f7f9fc;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
}
.plan b,.security-grid h3{
  font-size:24px;
  line-height:1.1;
}
.plan p,.delivery-line p,.faq p,.security-grid p{
  color:var(--muted);
  line-height:1.75;
}
.delivery-line{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.delivery-line article{
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
}
.delivery-line span{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  background:var(--navy);
  color:#fff;
  border-radius:16px;
  font-weight:900;
}
.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  padding:18px;
  text-align:left;
  border-bottom:1px solid #e8edf5;
}
th{
  background:#eef3ff;
}
.mini-btn{
  border:0;
  background:#eef3ff;
  color:var(--blue);
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}
.download-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:linear-gradient(135deg,var(--navy),#203b7a 55%,var(--blue));
  color:#fff;
  border-radius:40px;
  padding:42px;
  box-shadow:var(--shadow-strong);
}
.download-band p,.download-band .eyebrow{
  color:rgba(255,255,255,.78);
}
.download-band .eyebrow:before{
  background:linear-gradient(90deg,#fff,transparent);
}
.download-cta{
  min-width:max-content;
  background:#fff;
  color:var(--blue);
  box-shadow:none;
}
.support-zone{
  display:grid;
  grid-template-columns:1.05fr .75fr;
  gap:18px;
}
.support-copy,.support-qr{
  background:#fff;
  border:1px solid var(--line);
  border-radius:38px;
  padding:42px;
  box-shadow:var(--shadow);
}
.support-copy p,.support-qr p{
  color:var(--muted);
  line-height:1.75;
}
.support-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.support-tags span{
  padding:9px 12px;
  border-radius:999px;
  background:#f7f9fc;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:800;
}
.support-qr{
  text-align:center;
}
.support-qr img{
  width:min(300px,100%);
  margin:0 auto 18px;
  border-radius:24px;
  border:1px solid var(--line);
  padding:12px;
  background:#f7f9fc;
}
.security-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.faq details{
  border-top:1px solid var(--line);
  padding:20px 0;
}
.faq summary{
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}
.site-footer{
  background:var(--navy);
  color:#fff;
  border-radius:38px 38px 0 0;
  padding:42px;
  margin-bottom:0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:24px;
}
.site-footer p{
  color:rgba(255,255,255,.70);
  max-width:680px;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
.footer-links a{
  color:rgba(255,255,255,.86);
}
.footer-contact{
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
}
.contact-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  align-items:center;
  justify-content:center;
}
.contact-modal.open{display:flex}
.modal-mask{
  position:absolute;
  inset:0;
  background:rgba(11,18,36,.66);
  backdrop-filter:blur(10px);
}
.modal-panel{
  position:relative;
  z-index:2;
  width:min(460px,calc(100% - 24px));
  background:#fff;
  border-radius:34px;
  padding:30px;
  text-align:center;
  box-shadow:var(--shadow-strong);
}
.modal-close{
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:transparent;
  font-size:30px;
  cursor:pointer;
}
.modal-qr{
  width:min(300px,100%);
  margin:18px auto;
  padding:12px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#f7f9fc;
}
.modal-panel p{color:var(--muted)}
.float-contact{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  padding:14px 18px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 20px 44px rgba(49,92,255,.24);
}
body.lock{overflow:hidden}

@media(max-width:1000px){
  .concierge nav{display:none}
  .concierge nav.show{
    display:flex;
    position:absolute;
    left:0;
    right:0;
    top:72px;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:16px;
    box-shadow:var(--shadow);
  }
  .openNav{display:block}
  .warm-hero,.vertical-product,.support-zone{grid-template-columns:1fr}
  .vertical-product figure{order:-1}
  .entry-grid,.plan>div,.delivery-line,.security-grid{grid-template-columns:repeat(2,1fr)}
  .download-band,.footer-inner{flex-direction:column;align-items:flex-start}
  .footer-links{align-items:flex-start}
}
@media(max-width:680px){
  .hero-copy,.plan,.delivery,.section-table,.warmfaq,.support-copy,.support-qr,.security-zone,.download-band,.site-footer{padding:24px}
  .entry-grid,.plan>div,.delivery-line,.security-grid{grid-template-columns:1fr}
  .hero-metrics{grid-template-columns:1fr}
  .hero-product{min-height:300px}
  .warm-hero h1{font-size:42px}
  .btn-primary,.btn-secondary,.btn-outline,.download-cta,.product-contact{width:100%}
}


.content-deep{
  width:min(var(--container),calc(100% - 30px));
  margin:36px auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:38px;
  padding:42px;
  box-shadow:var(--shadow);
}
.deep-grid,
.scenario-grid,
.wallet-grid,
.support-depth-grid{
  display:grid;
  gap:16px;
}
.deep-grid{grid-template-columns:repeat(2,1fr)}
.scenario-grid{grid-template-columns:repeat(4,1fr)}
.wallet-grid,
.support-depth-grid{grid-template-columns:repeat(3,1fr)}
.deep-grid article,
.scenario-grid article,
.wallet-grid article,
.support-depth-grid article{
  background:#f7f9fc;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
}
.deep-grid h3,
.scenario-grid h3,
.wallet-grid h3,
.support-depth-grid h3{
  margin:0 0 10px;
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.deep-grid p,
.scenario-grid p,
.wallet-grid p,
.support-depth-grid p,
.deep-grid li{
  color:var(--muted);
  line-height:1.75;
}
.deep-grid ul{
  margin:16px 0 0;
  padding-left:20px;
}
.scenario-grid b{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:16px;
  background:var(--navy);
  color:#fff;
  margin-bottom:16px;
}

@media(max-width:1000px){
  .deep-grid,
  .scenario-grid,
  .wallet-grid,
  .support-depth-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:680px){
  .content-deep{
    padding:24px;
  }
  .deep-grid,
  .scenario-grid,
  .wallet-grid,
  .support-depth-grid{
    grid-template-columns:1fr;
  }
}