/* static/css/styles.css */
:root{
  --bg: #fff5e2;
  --text: #00285c;
  --accent1: #ffd69b;
  --accent2: #c0cfdc;
}

*{ box-sizing: border-box; }
html, body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  line-height: 1.7;
}

.container{
  max-width: 880px;
  margin: 48px auto;
  padding: 0 20px;
}

.hero{
  background: #fff;
  border: 2px solid var(--accent2);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

h1{
  margin:0 0 8px;
  letter-spacing: .5px;
  font-size: clamp(24px, 4vw, 36px);
}

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius: 999px;
  background: var(--accent1);
  color:#5a3b00;
  font-weight: 700;
  margin-bottom: 12px;
}

.icons{
  display:flex;
  gap:14px;
  margin-top: 12px;
}

.icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius: 10px;
  background: var(--accent2);
  transition: transform .1s ease-in-out;
}

.icons a:hover{ transform: translateY(-2px); }

.footer{
  text-align:center;
  color:#264;
  margin-top: 20px;
}