/* Dmessenger site — 沿用 shred.nadrix.io 的版面，品牌色換成 #3051DA（Jason 2026-09-07 定案），字全部由 i18n.js 依語言填 */
:root{
  --bg:#07070b; --tx:#f4f4f8; --tx2:#a7a7b4; --tx3:#6d6d7d;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.03); --card2:rgba(255,255,255,.05);
  --brand:#3051DA; --brand2:#5A73E8; --magenta:#d946ef; --cyan:#22d3ee;
  --grad:linear-gradient(100deg,#22d3ee 0%,#3051DA 45%,#d946ef 100%);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);min-height:100vh;line-height:1.5;
     background-image:radial-gradient(900px 500px at 18% 30%, rgba(48,81,218,.18), transparent 60%),
                      radial-gradient(760px 480px at 88% 78%, rgba(217,70,239,.12), transparent 60%);}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px}
.logo{width:34px;height:34px;border-radius:9px;display:block;object-fit:cover;
      box-shadow:0 0 0 1px rgba(255,255,255,.09),0 6px 18px rgba(48,81,218,.4)}
.brand b{font-size:17px;letter-spacing:.2px;font-weight:700}
.tnav{display:flex;align-items:center;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:9px;
      padding:7px 13px;font-size:13.5px;color:var(--tx2);cursor:pointer;background:none;font-family:inherit}
.chip:hover{color:var(--tx);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04)}

/* home: two columns */
.wrap{max-width:1240px;margin:0 auto;padding:40px 40px 60px;display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
@media (max-width:900px){.wrap{grid-template-columns:1fr;gap:40px;padding:24px 22px 40px}.topbar{padding:16px 22px}}
.hero-logo{width:96px;height:96px;border-radius:24px;display:block;object-fit:cover;
           box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 50px rgba(48,81,218,.45);margin-bottom:26px}
.kicker{font-size:12.5px;letter-spacing:3px;color:var(--tx3);text-transform:uppercase;font-weight:600;margin-bottom:14px}
.title{font-size:56px;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:22px}
@media (max-width:480px){.title{font-size:44px}}
.title .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:16px;line-height:1.75;color:var(--tx2);max-width:440px;margin-bottom:34px}
.dl{display:flex;flex-direction:column;gap:12px;max-width:430px}
.dl-row{display:flex;gap:12px}
.dl-row .btn{flex:1}
.desknote{font-size:12px;color:var(--tx3);line-height:1.6;margin-top:-2px}
.qrcard{display:flex;align-items:center;gap:16px;border:1px dashed var(--line2);border-radius:15px;padding:14px 16px;background:var(--card)}
.qrcard.live{border-style:solid}
.qrbox{width:148px;height:148px;flex:none;border-radius:10px;background:#fff;padding:8px;display:none}
.qrcard.live .qrbox{display:block}
.qrbox img,.qrbox canvas{width:132px;height:132px;display:block}
.qrcap{font-size:13px;color:var(--tx2);line-height:1.6}
.qrcard.live .qrcap{color:var(--tx)}
.btn{display:flex;align-items:center;gap:12px;border-radius:13px;padding:14px 18px;cursor:pointer;
     border:1px solid var(--line2);background:var(--card2);transition:.15s;color:var(--tx)}
.btn:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07)}
.btn.primary{background:var(--grad);border:none;color:#0a0a0f}
.btn.primary:hover{filter:brightness(1.06)}
.btn svg{width:22px;height:22px;flex:none}
.btn .t{display:flex;flex-direction:column;line-height:1.25}
.btn .t small{font-size:11px;opacity:.72}
.btn .t b{font-size:14.5px;font-weight:650}
.btn.soon{opacity:.5;cursor:default;pointer-events:none}
.note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;color:var(--tx3)}
.note .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}

.why{font-size:12.5px;letter-spacing:2px;color:var(--tx3);text-transform:uppercase;font-weight:600;margin-bottom:12px}
.rtitle{font-size:26px;font-weight:750;line-height:1.3;margin-bottom:10px}
.rlead{font-size:14px;color:var(--tx2);line-height:1.7;margin-bottom:26px;max-width:440px}
.feat{display:flex;flex-direction:column;gap:12px}
.card{display:flex;gap:16px;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--card);transition:.15s}
.card:hover{border-color:var(--line2);background:var(--card2)}
.ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(48,81,218,.18);color:#c7d0ff}
.ic svg{width:22px;height:22px}
.card h4{font-size:15.5px;font-weight:700;margin-bottom:5px}
.card p{font-size:13px;color:var(--tx2);line-height:1.6}

/* steps */
.steps{max-width:1240px;margin:0 auto;padding:0 40px 60px}
@media (max-width:900px){.steps{padding:0 22px 40px}}
.steps h3,.faq h3{font-size:12.5px;letter-spacing:2px;color:var(--tx3);text-transform:uppercase;font-weight:600;margin-bottom:14px}
.steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none}
@media (max-width:900px){.steps ol{grid-template-columns:1fr}}
.steps li{display:flex;gap:14px;border:1px solid var(--line);border-radius:15px;padding:16px 18px;background:var(--card);font-size:13px;color:var(--tx2);line-height:1.65}
.steps li b{display:block;color:var(--tx);font-size:14.5px;margin-bottom:4px}
.steps .n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#0a0a0f;font-weight:800;font-size:14px}

/* faq */
.faq{max-width:1240px;margin:0 auto;padding:0 40px 60px}
@media (max-width:900px){.faq{padding:0 22px 40px}}
.faq details{border:1px solid var(--line);border-radius:13px;background:var(--card);margin-bottom:10px;padding:0 18px}
.faq details[open]{border-color:var(--line2);background:var(--card2)}
.faq summary{cursor:pointer;list-style:none;font-size:15px;font-weight:650;padding:14px 0;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--tx3);font-weight:500;font-size:18px}
.faq details[open] summary::after{content:'–'}
.faq p{font-size:13.5px;color:var(--tx2);line-height:1.7;padding:0 0 16px;max-width:720px}

/* honest section */
.honest{max-width:1240px;margin:0 auto;padding:0 40px 60px}
@media (max-width:900px){.honest{padding:0 22px 40px}}
.honest h3{font-size:12.5px;letter-spacing:2px;color:var(--tx3);text-transform:uppercase;font-weight:600;margin-bottom:14px}
.honest ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none}
@media (max-width:900px){.honest ol{grid-template-columns:1fr}}
.honest li{border:1px solid var(--line);border-radius:15px;padding:16px 18px;background:var(--card);font-size:13px;color:var(--tx2);line-height:1.65}
.honest li b{display:block;color:var(--tx);font-size:14.5px;margin-bottom:4px}

/* footer */
.foot{max-width:1240px;margin:0 auto;padding:22px 40px 40px;border-top:1px solid var(--line);
      display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px;color:var(--tx3)}
@media (max-width:900px){.foot{padding:20px 22px 34px}}
.foot a:hover{color:var(--tx)}

/* privacy page */
.doc{max-width:760px;margin:0 auto;padding:16px 40px 70px}
@media (max-width:900px){.doc{padding:8px 22px 50px}}
.doc h1{font-size:34px;font-weight:800;letter-spacing:-.5px;margin:18px 0 6px}
.doc .meta{color:var(--tx3);font-size:13px;margin-bottom:28px}
.doc h2{font-size:19px;font-weight:700;margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.doc p{font-size:15px;line-height:1.8;color:var(--tx2);margin-bottom:12px}
.doc p strong,.doc li strong{color:var(--tx)}
.doc ul{margin:0 0 14px 20px}
.doc li{font-size:15px;line-height:1.8;color:var(--tx2);margin-bottom:6px}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border:1px solid var(--line);color:var(--tx2);line-height:1.6}
.doc th{color:var(--tx);background:var(--card2);font-weight:650}
.doc .tablewrap{overflow-x:auto}
.doc code{font-family:var(--mono);font-size:.92em;background:var(--card2);padding:1px 6px;border-radius:5px;color:var(--tx)}