:root{
  --bg0:#0b2a66;
  --bg1:#1b56c8;
  --bg2:#2b73ff;

  --card:#0f357b;
  --panel: rgba(255,255,255,.08);
  --text:#eaf2ff;
  --muted: rgba(234,242,255,.78);

  --primary:#2b73ff;
  --primary2:#66a0ff;

  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.22);

  --yellow:#ffd85a;
  --green:#a9f08f;
  --pink:#ff7f9a;
  --noteBlue:#8bb7ff;

  --radius: 20px;
  --radius2: 28px;
  --max: 1100px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

[data-theme="dark"]{
  /* 目前本來就偏深色；這裡保留切換時可微調 */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(102,160,255,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 40%, rgba(255,127,154,.14), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg1) 45%, var(--bg0));
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

.container{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.skip-link{
  position:absolute; left:-9999px; top: 8px;
  background:#fff; color:#000; padding:8px 10px; border-radius:10px;
}
.skip-link:focus{ left: 12px; z-index: 999; }

.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 26, 60, .55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{
  width:36px; height:36px; border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.brand__name{ font-weight: 800; letter-spacing:.2px; }

.nav__links{
  display:flex; gap: 18px;
  color: var(--muted);
  font-weight: 650;
}
.nav__links a{ padding: 8px 10px; border-radius: 12px; }
.nav__links a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.nav__cta{ display:flex; gap:10px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  font-weight: 750;
  letter-spacing:.2px;
}
.btn--primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border-color: rgba(255,255,255,.22);
}
.btn--secondary{
  background: rgba(255,255,255,.08);
}
.btn--ghost{
  width: 42px; height: 42px;
  border-radius: 14px;
  padding:0;
}

.nav__burger{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.nav__burger span{
  display:block;
  width: 18px; height: 2px;
  background: rgba(255,255,255,.85);
  margin: 4px auto;
  border-radius: 999px;
}

.nav__drawer{
  display:none;
  padding: 12px 24px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.nav__drawer a{
  display:block;
  padding: 10px 8px;
  color: var(--muted);
  border-radius: 12px;
}
.nav__drawer a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.hero{
  padding: 56px 0 26px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}
.badge{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
  font-weight: 700;
  letter-spacing:.2px;
}
.hero h1{
  margin: 12px 0 12px;
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1.05;
}
.accent{
  background: linear-gradient(135deg, #ffffff, #cfe3ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
}

.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.hero__mini{
  display:flex; gap: 10px; flex-wrap:wrap;
  margin-top: 18px;
}
.mini-stat{
  flex: 1 1 160px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 12px;
}
.mini-stat__k{ font-weight: 850; }
.mini-stat__v{ color: var(--muted); font-family: var(--mono); font-size: 12px; margin-top: 4px; }

.hero__visual{ position: relative; }
.visual-card{
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.visual-top{
  display:flex; align-items:center; gap: 12px;
}
.visual-icon{
  width: 54px; height: 54px;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.visual-app{ font-weight: 900; font-size: 18px; }
.visual-sub{ color: var(--muted); font-size: 12px; margin-top: 3px; }

.sticky-grid{
  display:flex; gap: 10px; flex-wrap:wrap;
  margin: 14px 0 14px;
}
.sticky{
  display:inline-flex;
  align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  color: rgba(10,16,26,.86);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.10);
  user-select:none;
}
.sticky--yellow{ background: linear-gradient(180deg, #ffe890, var(--yellow)); }
.sticky--green{ background: linear-gradient(180deg, #caffb7, var(--green)); }
.sticky--pink{ background: linear-gradient(180deg, #ffb0c1, var(--pink)); }
.sticky--blue{ background: linear-gradient(180deg, #cfe1ff, var(--noteBlue)); }
.tilt--1{ transform: rotate(-3deg); }
.tilt--2{ transform: rotate(2.5deg); }
.tilt--3{ transform: rotate(-1.5deg); }
.tilt--4{ transform: rotate(3.5deg); }

.paper-mock{
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 14px 14px 12px;
}
.paper-mock__line{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  margin: 10px 0;
}
.paper-mock__line.short{ width: 70%; }

.chips{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px; }
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  font-family: var(--mono);
  font-size: 12px;
}

.glow{
  position:absolute;
  filter: blur(40px);
  opacity:.55;
  pointer-events:none;
}
.glow--1{
  width: 240px; height: 240px;
  background: rgba(102,160,255,.55);
  left: -40px; top: 60px;
}
.glow--2{
  width: 220px; height: 220px;
  background: rgba(255,127,154,.38);
  right: -60px; bottom: -40px;
}

.section{ padding: 56px 0; }
.section--alt{
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.h2{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing:.2px;
}
.sub{
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 75ch;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 16px 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.card h3{ margin: 0 0 8px; font-size: 16px; }
.card p{ margin: 0; color: var(--muted); line-height: 1.65; }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}

.diagram{
  margin: 18px 0 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}
.diagram__paper{
  flex: 1 1 220px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.diagram__label{ font-weight: 900; margin-bottom: 6px; }
.diagram__meta{ color: var(--muted); line-height: 1.6; font-size: 13px; }
.diagram__arrow{ font-size: 22px; opacity:.9; padding: 0 2px; }
.diagram__cards{ display:flex; gap: 10px; flex-wrap:wrap; }

.check{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.75;
}
.check li{ margin: 6px 0; }

.mock-screens{ display:flex; flex-direction:column; gap: 12px; }
.screen{
  border-radius: var(--radius);
  background: rgba(12, 27, 58, .55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.screen__top{
  display:flex; align-items:center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.28);
}
.screen__title{ margin-left: 6px; color: var(--muted); font-weight: 700; font-size: 12px; }
.screen__body{ padding: 14px 12px 14px; }
.line{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  margin: 10px 0;
}
.w90{ width: 90%; } .w80{ width: 80%; } .w60{ width: 60%; }
.pill-row{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 10px; }
.pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: 12px;
}

.hint{ margin: 0; color: rgba(234,242,255,.65); font-size: 12px; }

.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.step{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.step__n{
  width: 34px; height: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
}
.step__t{ margin-top: 10px; font-weight: 900; }
.step__d{ margin-top: 6px; color: var(--muted); line-height: 1.65; }

.use{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.use__item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.use__item h3{ margin: 0 0 8px; }
.use__item p{ margin: 0; color: var(--muted); line-height: 1.65; }

.cta{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items:center;
}
.cta__buttons{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }
.cta__note{
  margin-top: 14px;
  display:flex; align-items:center; gap: 10px;
  color: rgba(234,242,255,.72);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px 12px;
}
.dot-badge{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(102,160,255,.85);
  box-shadow: 0 0 0 4px rgba(102,160,255,.18);
}

.qr-box{
  aspect-ratio: 1 / 1;
  width: min(360px, 100%);
  margin-left: auto;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 2px dashed rgba(255,255,255,.26);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow);
}
.qr-box__inner{
  text-align:center;
  color: rgba(234,242,255,.72);
}
.qr-box__title{
  font-weight: 900;
  color: rgba(255,255,255,.90);
}
.qr-box__desc{ margin-top: 6px; font-size: 12px; }

.cta__mini-sticky{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.faq{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 860px;
}
.faq__item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}
.faq__item summary{
  cursor:pointer;
  font-weight: 900;
}
.faq__item p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.footer{
  margin-top: 26px;
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer__brand{
  display:flex; align-items:center; gap: 10px;
}
.footer__brand img{
  width: 36px; height: 36px; border-radius: 12px;
}
.footer__name{ font-weight: 900; }
.footer__tag{ color: rgba(234,242,255,.72); font-size: 12px; margin-top: 2px; }
.footer__small{ margin: 10px 0 0; color: rgba(234,242,255,.62); font-size: 12px; }

.footer__right{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; }
.footer__link{ color: rgba(234,242,255,.78); font-weight: 700; }
.footer__link:hover{ color: rgba(255,255,255,.92); }
.btn-link{
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.btn--lang{
  width: 56px;
  font-weight: 900;
  letter-spacing: .4px;
}


/* Responsive */
@media (max-width: 920px){
  .hero__grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .cta{ grid-template-columns: 1fr; }
  .qr-box{ margin: 0; }
  .cta__mini-sticky{ justify-content:flex-start; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .use{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__drawer[aria-hidden="false"]{ display:block; }
  .cards{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .footer{ flex-direction:column; }
}

/* ----- bilingual content blocks (privacy/support pages) ----- */
.lang { display: none; }
html[data-lang="zh"] .lang-zh { display: block; }
html[data-lang="en"] .lang-en { display: block; }

.prose{
  max-width: 920px;
  line-height: 1.8;
  color: var(--muted);
}
.prose h1,.prose h2,.prose h3{
  color: var(--text);
  line-height: 1.25;
}
.prose h1{ font-size: 34px; margin: 0 0 10px; }
.prose h2{ font-size: 20px; margin: 22px 0 10px; }
.prose h3{ font-size: 16px; margin: 16px 0 8px; }
.prose p{ margin: 10px 0; }
.prose ul{ margin: 10px 0 10px 20px; }
.prose li{ margin: 6px 0; }

.page-badge{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
  font-weight: 800;
}