:root {
  --navy: #24337a;
  --orange: #f2792b;
  --orange-dark: #d9621a;
  --gold: #f7c948;
  --cream: #fff7ee;
  --line: #06c755;
  --ink: #1f2433;
  --muted: #6b7080;
  --card: #ffffff;
  --border: #f0e2d2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  line-height: 1.5;
}

#app {
  max-width: 440px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}

.hero {
  position: relative;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--orange) 0%, #f89a4e 100%);
  color: #fff;
  padding: 22px 20px 64px;
}
.hero .tag { font-size: 12px; letter-spacing: .12em; opacity: .9; margin: 0; }
.hero .slogan { font-size: 20px; font-weight: 800; margin: 4px 0 0; }
.hero .logo {
  position: absolute; right: 14px; top: 12px;
  width: 72px; height: 72px; border-radius: 16px;
  background: #fff; padding: 4px; object-fit: contain;
}

.card {
  background: var(--card);
  border-radius: 0 0 20px 20px;
  padding: 0 20px 20px;
  box-shadow: 0 6px 24px rgba(36, 51, 122, .08);
}

.who { position: relative; z-index: 1; display: flex; gap: 14px; align-items: flex-end; margin-top: -48px; }
.avatar {
  flex: none; width: 96px; height: 96px; border-radius: 50%;
  border: 4px solid #fff; background: var(--cream); object-fit: cover;
}
.who h1 { margin: 0; font-size: 24px; color: var(--navy); }
.who .title { margin: 0; color: var(--orange-dark); font-weight: 700; font-size: 14px; }
.company { margin: 10px 0 0; font-weight: 700; color: var(--navy); }

.intro {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--cream); border: 1px solid var(--border); font-size: 14px;
}
.intro b { display: block; font-size: 12px; color: var(--orange-dark); letter-spacing: .08em; }

.contacts { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.contacts li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.contacts li:last-child { border-bottom: 0; }
.contacts span { flex: none; width: 64px; color: var(--muted); }
.contacts a { color: var(--ink); text-decoration: none; word-break: break-all; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 8px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  background: #eef0f7; color: var(--navy);
}
.btn.primary { background: var(--orange); color: #fff; }
.btn.line { background: var(--line); color: #fff; }
.btn.wide { grid-column: 1 / -1; }

.status { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; min-height: 1em; }
.disclaimer { margin: 16px 0 0; font-size: 12px; color: var(--muted); text-align: center; }