:root{
  --bg:#0b0c0f;
  --card:#121420;
  --text:#e9ecf1;
  --muted:#aab2c0;
  --line:rgba(255,255,255,.08);
  --accent:#5ee1ff;
  --btn:#1c2235;
  --btn2:#2a3350;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", system-ui, sans-serif; }
a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.9; }

.container{ max-width: 1040px; margin: 0 auto; padding: 28px 20px 60px; }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; backdrop-filter: blur(10px);
  background: rgba(11,12,15,.6);
  border-bottom:1px solid var(--line);
  padding: 14px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.brand img{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line); }

.navlinks{ display:flex; gap:14px; align-items:center; color:var(--muted); font-size:14px; }
.navlinks a{ padding:8px 10px; border-radius:10px; }
.navlinks a:hover{ background: rgba(255,255,255,.06); color:var(--text); }

.lang{ display:flex; gap:8px; align-items:center; }
.pill{
  font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 10px;
}
.pill.active{ color:var(--text); background: rgba(255,255,255,.06); }

.hero{ padding: 48px 0 26px; display:grid; grid-template-columns: 1.25fr .75fr; gap:22px; align-items:start; }
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } }

.h1{ font-size:46px; line-height:1.08; margin:0 0 10px; letter-spacing:-.6px; }
.sub{ color:var(--muted); font-size:16px; line-height:1.7; margin:0 0 20px; }

.ctaRow{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  background: var(--btn); border:1px solid var(--line);
  color: var(--text); font-size:14px; gap:8px;
}
.btn.primary{ background: linear-gradient(135deg, rgba(94,225,255,.18), rgba(94,225,255,.05)); border-color: rgba(94,225,255,.25); }
.btn:hover{ background: var(--btn2); }

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } }

.kicker{ color:var(--muted); font-size:13px; margin:0 0 6px; }
.h2{ font-size:20px; margin:0 0 8px; }
.p{ color:var(--muted); margin:0; line-height:1.7; font-size:14px; }

.section{ margin-top: 28px; }
.sectionTitle{ font-size:18px; margin:0 0 12px; }

.shots{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 900px){ .shots{ grid-template-columns: 1fr; } }
.shot{
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow:hidden;
  background: rgba(255,255,255,.03);
}
.shot img{ width:100%; height:auto; display:block; }

.footer{
  margin-top: 40px; padding-top: 18px;
  border-top:1px solid var(--line);
  color: var(--muted); font-size:13px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}

/* QR block inside Quick start card */
.qrCard{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

.qrImgLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.qrImg{
  width: 96px;
  height: 96px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff; /* 保證 QR 在深色背景可讀 */
}

.qrText{
  min-width: 0;
}

.qrTitle{
  margin: 0;
}

.qrSub{
  margin: 4px 0 0 0;
  opacity: .85;
}

/* Better layout on small screens */
@media (max-width: 900px){
  .qrImg{ width: 88px; height: 88px; }
}