/* Dark Japan theme */
:root{
  --bg:#0b0d10;--panel:#11151a;--text:#e6e9ee;--muted:#9aa3ad;
  --accent:#9b87f5;--accent-2:#2dd4bf;--border:#212833;--shadow:0 8px 30px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 15% 12%,#0f1318,#0b0d10 60%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-2);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding:clamp(20px,5vw,56px) clamp(16px,4vw,40px)}
.header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:14px 0 12px;margin-bottom:8px}
.brand{display:flex;gap:12px;align-items:center}
.brand__logo{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(157,124,255,.4),rgba(45,212,191,.4));box-shadow:var(--shadow)}
.brand__name{font-weight:800;letter-spacing:.02em}
.nav a{color:var(--muted);margin-left:14px}
.nav a:hover{color:var(--text)}
/* Cards */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.card h3{margin:0 0 6px;font-size:1.2rem}
.card p{color:var(--muted);margin:0 0 10px}
.card .btn{align-self:flex-start}
/* Buttons */
.btn{appearance:none;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;background:var(--accent-2);color:#071013;box-shadow:var(--shadow);transition:transform .15s ease,filter .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
/* Intro page */
.intro{position:fixed;inset:0;display:grid;place-items:center;background:#000;z-index:10}
.intro__video{width:100vw;height:100svh;height:100dvh;height:100vh;width:100vw;object-fit:cover}
.btn--skip{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:transparent; /* 半透明風格（透明底 + 邊框） */
  border:1px solid rgba(255,255,255,.9);
  color:#fff;
  padding:18px 22px;
  font-size:2rem; /* 字體加大兩倍 */
  letter-spacing:.02em;
  backdrop-filter:saturate(120%) blur(1px);
}
.hidden{display:none}
/* Sections */
.section{border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.section h1,.section h2{margin:0 0 10px}
.section p{color:var(--muted)}
/* Forms */
.form{max-width:760px}
.form__row{display:grid;gap:8px;margin-bottom:14px}
input,textarea{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:12px;font:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--accent-2)}
.feedback-list{display:grid;gap:12px;margin-top:18px}
.feedback-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.feedback-item header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.feedback-item .name{font-weight:700}
.feedback-item time{color:var(--muted);font-size:.9em}
.footer{border-top:1px solid var(--border);color:var(--muted);padding:16px 0;margin-top:24px}
figure.qr{margin:0;background:var(--panel);border:1px solid var(--border);padding:14px;border-radius:14px;box-shadow:var(--shadow);text-align:center}
figure.qr img{width:min(320px,48vw);height:auto;border-radius:10px}
small.hint{color:var(--muted)}