:root{
    --g1:#8637d1;  /* 紫 */
    --g2:#2bb3ff;  /* 蓝 */
    --text:#f6f9ff;
    --muted:#c9d3ea;
    --card: rgba(255,255,255,.08);
    --line: rgba(255,255,255,.18);
    --shadow: 0 10px 30px rgba(0,0,0,.35), 0 6px 16px rgba(43,179,255,.25);
    --radius: 18px;
    --space: clamp(14px, 2.2vw, 24px);
    --space-sm: clamp(10px, 1.5vw, 16px);
    --space-lg: clamp(18px, 3vw, 30px);
    --fs-body: clamp(15px, 1.9vw, 16px);
    --fs-h1: clamp(22px, 3.2vw, 30px);
    --fs-h2: clamp(18px, 2.6vw, 20px);
    --fs-btn: clamp(15px, 2.4vw, 16px);
    --tap: 48px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--text);font:var(--fs-body)/1.7 -APPle-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;-webkit-text-size-adjust:100%}
  img{max-width:100%;height:auto;display:block}
  a{color:inherit}
  .wrap{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--space)}
  .card{width:min(1060px,100%);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.06));backdrop-filter: blur(10px);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .hero{display:grid;grid-template-columns:130px 1fr;gap:var(--space);padding:var(--space-lg);border-bottom:1px solid var(--line)}
  .logo{width:130px;height:130px;border-radius:28px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .logo img{width:100%;height:100%;object-fit:contain;filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));}
  .title{font-size:var(--fs-h1);font-weight:800;letter-spacing:.5px}
  .subtitle{margin-top:6px;color:var(--muted)}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
  .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
  .btn{APPearance:none;border:0;cursor:pointer;border-radius:12px;min-height:var(--tap);padding:12px 16px;font-weight:700;letter-spacing:.3px;transition:.2s;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#0a1020;background:#fff;font-size:var(--fs-btn)}
  .btn:hover{transform:translateY(-1px);filter:saturate(1.08)}
  .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
  .btn svg{width:20px;height:20px}
  .note{font-size:12px;opacity:.9;margin-top:8px}

  .section{padding:var(--space-lg) var(--space);border-bottom:1px solid var(--line)}
  h2{margin:0 0 10px;font-size:var(--fs-h2)}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space)}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:var(--space)}
  ul{margin:8px 0 0 18px;padding:0}
  li{margin:.35em 0}
  .kvs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}
  .kv{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:var(--space-sm)}
  .kv b{font-size:clamp(16px,2.2vw,18px);display:block;margin-bottom:6px}
  .scene{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
  .scene > div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:var(--space)}
  .faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:var(--space);margin:10px 0}
  .faq summary{cursor:pointer;font-weight:700;min-height:var(--tap);display:flex;align-items:center}
  .qrbox{display:flex;align-items:center;justify-content:center}
  .qrbox img{width:min(220px,56vw);height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:#fff}

  .foot{padding:16px 22px;color:#dbe6ff99;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .chip{font-size:12px;opacity:.95;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}

  .m-cta{position:fixed;left:0;right:0;bottom:0;z-index:10;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.18)), rgba(12,16,28,.2);backdrop-filter: blur(10px);padding:12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));border-top:1px solid var(--line);display:none}
  .m-cta .row{display:flex;gap:10px}
  .m-cta .btn{flex:1;justify-content:center}

  @media (max-width:900px){
    .grid-2{grid-template-columns:1fr}
    .scene{grid-template-columns:1fr 1fr}
    .kvs{grid-template-columns:1fr 1fr}
  }
  @media (max-width:720px){
    .hero{grid-template-columns:90px 1fr;gap:var(--space);padding:var(--space)}
    .logo{width:90px;height:90px;border-radius:18px}
    .title{font-size:var(--fs-h1)}
    .btn{width:100%;justify-content:center}
    .scene{grid-template-columns:1fr}
    .actions{display:none}
    .m-cta{display:block}
    .wrap{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;animation:none !important}
  }