/* หน้าที่: หน้าดาวน์โหลดแบบพื้นผิวสามมิติ โดยรักษา QR และลิงก์สโตร์เดิมทั้งหมด */
* { box-sizing:border-box; }
body {
  margin:0; min-height:100svh; display:grid; place-items:center;
  padding:clamp(20px,5vw,72px);
  font:16px/1.75 system-ui,-apple-system,"Segoe UI",sans-serif; color:#f4f6ff;
  background:radial-gradient(ellipse at 10% 8%,#343d7d 0,transparent 46%),
    radial-gradient(ellipse at 94% 90%,#493354 0,transparent 42%),
    linear-gradient(145deg,#111a32,#0b1020 70%);
}
a { color:inherit; text-decoration:none; touch-action:manipulation; }
a:focus-visible { outline:3px solid #bdcdff; outline-offset:5px; }
.download-card {
  position:relative; isolation:isolate; width:min(1120px,100%); min-width:0;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px); align-items:center; padding:clamp(28px,5vw,60px);
  border:1px solid #a1b6ea40; border-radius:36px;
  background:radial-gradient(ellipse at 8% 0%,#344c7524,transparent 60%),linear-gradient(145deg,#192943f5,#101729fa);
  box-shadow:inset 0 1px 0 #e2ecff40,0 8px 0 #0a1226b3,0 38px 90px #0008,0 0 90px #275ef622;
}
.download-card::before {
  content:""; position:absolute; pointer-events:none; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,#d4e1ffbb,transparent);
}
.download-copy { min-width:0; }
.brand { display:inline-flex; align-items:center; gap:14px; min-height:48px; max-width:100%; font-size:18px; line-height:1.4; font-weight:800; letter-spacing:.08em; }
.brand img { flex:0 0 52px; width:52px; height:52px; padding:3px; border:1px solid #a8bbeb38; border-radius:16px; object-fit:contain; background:#e5ecff08; box-shadow:0 4px 0 #0a142899; }
.brand b { display:block; margin-top:3px; font-size:14px; line-height:1.4; letter-spacing:.24em; color:#b3c7f2; }
.eyebrow { margin:32px 0 14px; font-size:14px; line-height:1.6; letter-spacing:.12em; color:#bed0fa; overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(36px,4.8vw,60px); line-height:1.35; letter-spacing:-.025em; overflow-wrap:anywhere; text-shadow:0 2px 0 #334c73,0 8px 24px #0006; }
h1 span { color:#bfd0ff; }
.intro { margin:24px 0; color:#c9d4eb; font-size:16px; line-height:1.85; }
.store-links { display:grid; gap:16px; }
.store-links>a {
  display:grid; gap:4px; min-width:0; min-height:90px; padding:16px 20px;
  border:1px solid #849ac269; border-radius:18px;
  background:linear-gradient(120deg,#2c3e62,#233250);
  box-shadow:inset 0 1px 0 #d3e1ff26,0 4px 0 #0c172c,0 12px 24px #03081730;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.store-links small { font-size:14px; line-height:1.5; color:#d5e0f5; }
.store-links strong { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:26px; line-height:1.4; }
.store-links strong span { color:#c5d3fa; font-size:28px; }
.device-status { margin-top:22px; font-size:14px; line-height:1.75; color:#c3d1ee; min-height:2em; }
.back-link { display:inline-flex; align-items:center; min-height:48px; padding:8px 0; font-size:16px; color:#c1d2ff; text-decoration:underline; text-underline-offset:5px; }
/* ขอบเงาสร้างความลึก แต่ QR อยู่ระนาบตรง มีพื้นที่ขาว ไม่ครอป ไม่เอียง ไม่ใส่ฟิลเตอร์ */
.qr-panel {
  min-width:0; width:100%; padding:24px; border:1px solid #fff; border-radius:28px;
  color:#18213a; background:linear-gradient(150deg,#fff,#edf2ff); text-align:center;
  box-shadow:inset 0 1px #fff,0 8px 0 #a5b6d4,0 24px 38px #02081666;
  transform:none!important;
}
.qr-image { width:100%; padding:12px; border:1px solid #dce4f3; border-radius:18px; background:#fff; }
.qr-image img { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:0; transform:none!important; filter:none; }
.qr-panel h2 { margin:22px 0 0; font-size:24px; line-height:1.5; }
.qr-panel>p { margin:10px 0 18px; font-size:14px; line-height:1.75; color:#425574; overflow-wrap:anywhere; }
.qr-downloads { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.qr-downloads a { display:inline-flex; align-items:center; justify-content:center; flex:1 1 130px; min-height:48px; padding:10px 12px; border:1px solid #b1c0da; border-radius:12px; background:#fff; color:#243e68; font-size:14px; line-height:1.5; font-weight:700; box-shadow:0 3px 0 #d2ddee; transition:background .2s,border-color .2s; }
.qr-downloads a:focus-visible { outline-color:#3355b2; }
@media(hover:hover) and (pointer:fine) {
  .store-links>a:hover { transform:translateY(-3px); border-color:#b0c6f3; background:linear-gradient(120deg,#3b527e,#2e416a); box-shadow:inset 0 1px #d3e1ff36,0 7px 0 #0c172c,0 20px 32px #03081755; }
  .qr-downloads a:hover { background:#e8efff; border-color:#7d96c4; }
  .back-link:hover { color:#e0e9ff; }
}
.store-links>a:active { transform:translateY(1px); }
@media(max-width:900px) {
  body { padding:clamp(20px,5vw,40px); }
  .download-card { grid-template-columns:minmax(0,1fr); gap:36px; padding:clamp(28px,5vw,44px); }
  .download-copy { max-width:620px; width:100%; justify-self:center; }
  .qr-panel { max-width:440px; justify-self:center; }
  h1 br { display:none; }
  h1 span { margin-left:.2em; }
}
@media(max-width:440px) {
  body { padding:18px 12px 26px; }
  .download-card { gap:30px; padding:26px 18px; border-radius:26px; }
  .brand { font-size:16px; }
  .brand img { width:48px; height:48px; flex-basis:48px; }
  .eyebrow { margin-top:26px; letter-spacing:.08em; }
  h1 { font-size:36px; }
  .store-links>a { padding:16px; }
  .store-links strong { font-size:24px; }
  .qr-panel { padding:18px; border-radius:22px; }
  .qr-image { padding:10px; border-radius:14px; }
  .qr-panel h2 { font-size:22px; }
}
@supports(padding:max(0px)) {
  body { padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(28px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .store-links>a:hover,.store-links>a:active { transform:none; }
}
@media(forced-colors:active) {
  .download-card,.qr-panel,.store-links>a,.qr-downloads a { border:1px solid CanvasText; box-shadow:none; }
  h1 { text-shadow:none; }
  .qr-image { forced-color-adjust:none; }
}