/* =========================
   Hero (loaded after main.css — kept in sync with :root vars there)
========================= */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  padding:100px 8vw 60px;
  position:relative;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-bg svg{ width:100%; height:100%; position:absolute; inset:0; }
.hero-text{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:flex-start;
  max-width:480px;
}
.hero-eyebrow{
  font-size:11px; letter-spacing:.28em; color:var(--rose);
  text-transform:uppercase; margin-bottom:1.4rem;
}
.hero-text h1{
  font-family:'Noto Serif TC',serif;
  font-size:clamp(34px,5vw,54px);
  font-weight:500; line-height:1.5;
  letter-spacing:.04em; color:var(--cream);
  margin-bottom:1.4rem;
}
.hero-text h1 em{
  font-style:normal;
  background:var(--rose); opacity:.92; color:var(--bg);
  padding:0 8px;
}
.hero-text p{
  font-size:15px; color:var(--mid); line-height:2;
  margin-bottom:2.2rem; max-width:420px;
}
.hero-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cream); color:var(--bg);
  padding:12px 30px; border-radius:22px 4px 22px 4px;
  font-size:13px; letter-spacing:.06em;
  transition:opacity .2s;
}
.hero-btn:hover{ opacity:.85; }