/* Home page aligned with the independent Hong Kong server site. */
:root {
  --b: #1659d8;
  --bd: #0b43b5;
  --n: #0b2250;
  --bg: #eef4fb;
  --t: #17243a;
  --m: #617086;
  --l: #dce6f2;
}
body { font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; background:#fff; color:var(--t); }
.w { width:min(1180px,calc(100% - 40px)); max-width:none; padding:0; }
header { border:0; box-shadow:0 6px 24px #08193612; z-index:50; }
header::before { display:none; }
header .w { width:min(1180px,calc(100% - 40px)); max-width:none; height:76px; gap:24px; }
.logo { color:var(--n); font-size:25px; font-weight:900; letter-spacing:-.03em; line-height:1.15; }
.top-nav { gap:2px; }
.top-nav .navitem>a { padding:11px 9px; border-radius:8px; font-size:15px; font-weight:700; color:var(--t); }
.top-nav .navitem>a:hover,.top-nav .navitem>a.on { background:#ecf3ff; color:var(--b); }
.top-nav .dropdown { top:calc(100% + 5px); border:1px solid var(--l); border-radius:12px; box-shadow:0 15px 34px #08193624; }
.top-nav .dropdown a { font-weight:600; }
.btn { border-radius:9px; padding:12px 20px; font-weight:800; box-shadow:0 10px 22px #1659d830; transition:background .2s,box-shadow .2s,transform .2s; }
.btn:hover { background:var(--bd); box-shadow:0 14px 28px #1659d83d; transform:translateY(-1px); }
.btn.o { border-color:#fff; box-shadow:none; }
.btn.o:hover { background:#ecf3ff; }
header .btn { white-space:nowrap; }
.hero { background:#081936; color:#fff; }
.hero>img { opacity:1; object-position:center 45%; }
.hero:after { background:linear-gradient(90deg,#07152df5 0%,#07152de6 38%,#07152d91 68%,#07152d45 100%); }
.hero .w { display:block; min-height:550px; padding:70px 0 174px; }
.hero .w>div:first-child { max-width:730px; }
.hero h1 { color:#fff; font-size:clamp(42px,5vw,62px); line-height:1.15; max-width:700px; letter-spacing:-.03em; }
.hero p.s { color:#d4e2f5; font-size:18px; font-weight:500; line-height:1.8; margin:16px 0 21px; max-width:650px; }
.hero .dots { color:#e1edfb; font-size:14px; gap:8px 22px; margin-bottom:26px; }
.hero .dots span:before { background:#28c5df; }
.hero .btn { margin:0 10px 0 0; }
.hero .panel { position:absolute; left:0; right:0; bottom:28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; background:#091d3bd6; border:1px solid #ffffff36; border-radius:14px; box-shadow:0 20px 50px #06112652; backdrop-filter:blur(12px); }
.hero .panel div { display:block; min-width:0; padding:16px 18px; border:0; border-right:1px solid #ffffff2d; }
.hero .panel div:last-child { border-right:0; }
.hero .panel i { display:block; color:#2bdef4; font-size:14px; letter-spacing:.12em; margin-bottom:4px; }
.hero .panel h3 { color:#fff; font-size:15px; line-height:1.35; margin-bottom:4px; }
.hero .panel p { color:#c7d9ee; font-size:14px; line-height:1.55; }
.trust { background:#0b2250; }
.trust .w { padding:19px 0; gap:14px; font-size:14px; }
.trust .w>div+div { border-left:1px solid #ffffff2b; }
.trust b { font-size:19px; color:#fff; line-height:1.4; }
section { padding:82px 0; }
main > section:nth-of-type(odd) { background:#fff; }
main > section:nth-of-type(even) { background:#eef4fb; }
.hd { max-width:780px; margin:0 auto 38px; }
.hd:before { content:""; display:block; width:34px; height:3px; margin:0 auto 14px; border-radius:2px; background:#28c5df; }
.hd h2 { font-size:clamp(27px,3vw,34px); line-height:1.25; letter-spacing:-.02em; }
.hd p { font-size:16px; line-height:1.75; margin-top:9px; }
.tabs { margin-bottom:30px; gap:10px; }
.tabs button { padding:9px 18px; border-radius:30px; font-weight:700; background:#fff; }
.tabs button:not([aria-pressed="true"]):hover { border-color:var(--b); color:var(--b); background:#ecf3ff; }
.tabs button[aria-pressed=true] { box-shadow:0 8px 18px #1659d827; }
.cards { gap:18px; }
.card { border-radius:14px; padding:25px 21px 20px; box-shadow:0 12px 34px #0b22500d; transition:box-shadow .2s,transform .2s; }
.card:hover { box-shadow:0 18px 34px #0b225026; transform:translateY(-3px); }
.card h3 { font-size:17px; text-align:left; min-height:55px; padding-right:36px; }
.card ul { gap:8px; margin:17px 0 19px; }
.card .p b { color:#e95729; font-size:23px; }
.card .p .btn { box-shadow:none; }
.tag { top:11px; right:11px; border-radius:5px; padding:2px 7px; font-weight:700; }
.note { line-height:1.7; }
.grid3 { gap:20px; }
.box { border-radius:13px; padding:25px; box-shadow:0 10px 30px #0b22500b; }
.box h3 { font-size:18px; margin-bottom:8px; }
.box p { font-size:15px; line-height:1.75; }
.two { gap:58px; }
.two img { border-radius:14px; box-shadow:0 16px 34px #0819361b; }
#lines .two>div:first-child h2 { color:var(--n); font-size:30px; line-height:1.3; margin-bottom:17px; }
.tw { border:1px solid var(--l); border-radius:12px; overflow:auto; background:#fff; box-shadow:0 12px 30px #0b22500d; }
table { margin:0; }
th,td { border-color:#e4ebf4; padding:12px 13px; }
th { background:#e9f1fb; }
.ab { background:#fff; border-radius:16px; padding:28px; box-shadow:0 16px 40px #0b225012; }
.ab h2 { font-size:30px; }
.ab p { line-height:1.8; }
.two img.about-brand { border-radius:12px; box-shadow:none; }
.hk-benefits-visual { border-radius:16px; }
.hk-benefits-list .check { background:#13a773; }
.hk-benefits-list h3 { font-size:18px; }
.steps { border-radius:14px; overflow:hidden; box-shadow:0 14px 34px #0b225012; }
.steps div { padding:24px; }
.steps i { color:var(--b); }
details { border-radius:10px; margin-bottom:10px; overflow:hidden; }
summary { padding:15px 18px; }
details p { padding:0 18px 17px; line-height:1.7; }
.payment-grid .box { text-align:center; }
.cta { background:linear-gradient(115deg,#091b40,#114d9f); padding:62px 0; }
.cta h2 { font-size:32px; line-height:1.3; }
.cta .btn { border-color:#fff; }
footer { background:#081b3b; color:#b5c9e1; padding:62px 0 22px; }
footer .w { width:min(1180px,calc(100% - 40px)); max-width:none; gap:30px; }
footer h4 { font-size:17px; margin-bottom:15px; }
footer a { line-height:1.75; margin-bottom:8px; }
.cr { width:min(1180px,calc(100% - 40px)); max-width:none; margin-top:45px; border-color:#ffffff24; color:#9fb6d4; }
@media (max-width:1080px) {
  header .w { height:70px; }
  .mobile-nav-toggle { border-radius:8px; font-weight:700; }
  .top-nav { top:calc(100% - 1px); border-top:1px solid var(--l); }
  .top-nav .navitem>a { padding:11px 0; }
  header .btn { display:none; }
  .hero .w { min-height:0; }
  .hero .panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero .panel div:nth-child(2) { border-right:0; }
  .hero .panel div:nth-child(-n+2) { border-bottom:1px solid #ffffff2d; }
}
@media (max-width:760px) {
  .w,header .w,footer .w,.cr { width:min(100% - 30px,1180px); }
  header .w { height:65px; }
  .logo { font-size:20px; }
  .hero .w { padding:57px 0; }
  .hero:after { background:linear-gradient(90deg,#07152df2,#07152dbe); }
  .hero h1 { font-size:clamp(34px,8vw,42px); }
  .hero p.s { font-size:16px; }
  .hero .panel { position:static; margin-top:28px; }
  .hero .panel div { padding:13px 15px; }
  .trust .w { gap:8px; }
  section { padding:62px 0; }
  .two { grid-template-columns:1fr; gap:30px; }
  .two img { max-height:340px; }
  .grid3,.cards { grid-template-columns:1fr; }
  .ab { padding:22px; }
  .cta { padding:56px 0; }
  .cta h2 { font-size:28px; }
  footer .w { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .hero .panel { grid-template-columns:1fr; }
  .hero .panel div { border-right:0; border-bottom:1px solid #ffffff2d; }
  .hero .panel div:last-child { border-bottom:0; }
  .trust .w { grid-template-columns:repeat(2,minmax(0,1fr)); font-size:13px; }
  .trust .w>div:nth-child(3) { border-left:0; }
  .hd h2 { font-size:27px; }
  .card h3 { min-height:0; }
  .steps { grid-template-columns:1fr; }
  .steps div { border-right:0; }
  .payment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  footer .w { grid-template-columns:1fr; }
}
@media (max-width:760px) { .widget-fd { top:auto!important; bottom:16px!important; right:10px!important; } }

.logo em { display:block; margin-top:5px; font-size:14px; line-height:1.2; letter-spacing:.18em; font-style:normal; color:var(--b); font-weight:700; }

/* Scenario cards, purchase steps and payment methods. */
#scene .scene-card { padding:0; overflow:hidden; }
#scene .scene-image { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; background:#dce6f2; }
#scene .scene-card-copy { padding:22px 24px 24px; }
.steps>div { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-content:start; }
.steps>div>i { grid-column:1; line-height:1; }
.steps>div>h3 { grid-column:2; align-self:center; }
.steps>div>p { grid-column:1/-1; }
.payment-grid .payment-icon { width:160px; height:64px; object-fit:contain; margin:0 auto 18px; }
@media(max-width:560px) {
  #scene .scene-card-copy { padding:20px; }
  .payment-grid .box { padding:22px 12px; }
  .payment-grid .payment-icon { width:132px; max-width:100%; height:60px; }
}

@media(max-width:560px) { .payment-grid .box h3 { font-size:16px; } }

.tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"]:hover, .tabs button[aria-pressed="true"]:focus-visible { background:var(--b); color:#fff; border-color:var(--b); }

/* Center the requested advantage and scenario card copy. */
#why .box, #scene .scene-card-copy { text-align:center; }

footer h4 .footer-heading-link { display:inline; margin:0; color:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; }
footer h4 .footer-heading-link:hover { color:#71e6f4; }