/* ================================================================
   KeyAi 全站共用樣式（Navbar / Footer / 共用按鈕 / 共用卡片）
   視覺語言：暗黑底 + 金(#e2b96a) / 青(#3ec8ea) 雙色，與 v1 終端一致
   ================================================================ */
:root{
  color-scheme:dark;
  --bg-base:#0b0f19;
  --bg-nav:rgba(11,15,25,.88);
  --bg-panel:rgba(30,41,59,.8);
  --border-color:#334155;
  --text-main:#f8fafc;
  --text-muted:#94a3b8;
  --accent:#3b82f6;
  --cyan:#3ec8ea;
  --gold:#e2b96a;
  --gold-hi:#f7dfae;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  background-color:var(--bg-base);
  background-image:radial-gradient(circle at 50% 0%,#1e293b 0%,#0b0f19 70%);
  background-attachment:fixed;
  color:var(--text-main);
  min-height:100vh;
}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------- Navbar ---------------- */
.site-nav{
  position:sticky;top:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 max(20px,4vw);height:62px;
  background:var(--bg-nav);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,185,106,.22);
}
.nav-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.nav-brand:hover{text-decoration:none}
.nav-logo{width:30px;height:30px;flex:0 0 auto}
.nav-name{font-size:16px;font-weight:800;letter-spacing:.06em}
.nav-name b{color:var(--gold)}
.nav-name small{display:block;font-size:9px;letter-spacing:.24em;color:var(--text-muted);font-weight:600;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  color:var(--text-muted);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  padding:8px 14px;border-radius:8px;transition:.2s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.nav-links a.on{color:var(--gold);background:rgba(226,185,106,.1)}
.nav-auth{display:flex;align-items:center;gap:10px}
.nav-btn{
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.05em;
  padding:9px 18px;border-radius:9px;border:1px solid rgba(247,223,174,.6);
  background:linear-gradient(180deg,#f7dfae,#e2b96a);color:#12161d;
  box-shadow:0 4px 14px rgba(226,185,106,.25);transition:filter .2s,transform .2s;text-decoration:none;
}
.nav-btn:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none}
.nav-btn.ghost{background:transparent;color:#cbd5e1;border:1px solid var(--border-color);box-shadow:none}
.nav-btn.ghost:hover{color:#fff;border-color:#64748b}
.nav-burger{display:none;background:none;border:1px solid var(--border-color);color:#e2e8f0;width:36px;height:36px;border-radius:8px;font-size:16px;cursor:pointer}
.nav-lang{display:flex;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;flex:0 0 auto}
.nav-lang button{background:transparent;border:none;color:var(--text-muted);font-family:inherit;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;padding:7px 10px;cursor:pointer;transition:.18s}
.nav-lang button:hover{color:#fff}
.nav-lang button.on{background:rgba(226,185,106,.14);color:var(--gold-hi)}
.nav-lang button + button{border-left:1px solid var(--border-color)}

/* ---------------- Footer ---------------- */
.site-foot{
  margin-top:80px;border-top:1px solid rgba(226,185,106,.18);
  background:rgba(8,11,18,.9);padding:36px max(20px,4vw) 28px;
}
.foot-grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.foot-brand{max-width:320px}
.foot-brand .nav-name{font-size:15px}
.foot-brand p{font-size:12px;color:var(--text-muted);line-height:1.8;margin:10px 0 0}
.foot-col b{display:block;font-size:12.5px;color:#e2e8f0;letter-spacing:.08em;margin-bottom:12px}
.foot-col a{display:block;font-size:12.5px;color:var(--text-muted);padding:5px 0}
.foot-col a:hover{color:var(--gold);text-decoration:none}
.foot-bar{max-width:1100px;margin:26px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11.5px;color:#5b6779}
.foot-disclaim{max-width:1100px;margin:12px auto 0;font-size:11px;color:#4b5563;line-height:1.7}

/* ---------------- 共用元件 ---------------- */
.container{max-width:1100px;margin:0 auto;padding:0 max(20px,4vw)}

/* 斜切雙框 CTA（沿用 keyai003 的科幻艙視覺，簡化版） */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;letter-spacing:.08em;text-decoration:none;
  padding:16px 30px;min-width:230px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:filter .2s,transform .2s;
}
.cta:hover{filter:brightness(1.1);transform:translateY(-2px);text-decoration:none}
.cta:active{transform:none}
.cta .en{display:block;font-size:10px;letter-spacing:.22em;opacity:.75;font-weight:700;margin-top:2px}
.cta.gold{background:linear-gradient(160deg,rgba(226,185,106,.95),rgba(178,136,62,.95));color:#12161d;box-shadow:0 8px 30px rgba(226,185,106,.3)}
.cta.cyan{background:linear-gradient(160deg,rgba(62,200,234,.9),rgba(30,120,160,.9));color:#08121a;box-shadow:0 8px 30px rgba(62,200,234,.28)}
.cta.sm{min-width:0;padding:11px 22px;font-size:13px}

@media (max-width:760px){
  .site-nav{height:56px;gap:10px;padding:0 14px}
  .nav-burger{display:flex;align-items:center;justify-content:center}
  .nav-name small{display:none}
  .nav-links{
    position:absolute;top:56px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
    background:var(--bg-nav);border-bottom:1px solid var(--border-color);padding:10px 16px 14px;gap:2px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 12px;font-size:14px}
  .cta{min-width:min(300px,84vw)}
}