:root{
  --ink:#0d1f1a;            /* 主色：深林綠，近黑 */
  --ink-soft:#122c25;
  --panel:#15332b;
  --cream:#f4ecdb;          /* 主要文字 */
  --cream-dim:rgba(244,236,219,.60);
  --cream-faint:rgba(244,236,219,.14);
  --ochre:#e6a23c;          /* 撞色：暖赭金 */
  --ochre-deep:#c9822a;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:"Noto Serif TC","Fraunces",Georgia,"Songti TC",serif;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
body.lang-en{font-family:"Fraunces","Noto Serif TC",Georgia,serif}
body.lang-sc{font-family:"Noto Serif SC","Noto Serif TC","Fraunces",Georgia,serif}

/* ---------- 背景層次：光暈 + 幼線格仔 + 噪點 ---------- */
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% 12%, rgba(230,162,60,.20), transparent 60%),
    radial-gradient(55% 50% at 8% 88%, rgba(58,138,110,.28), transparent 62%),
    radial-gradient(120% 90% at 50% 0%, #113029 0%, var(--ink) 55%);
}
.bg::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(244,236,219,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,236,219,.045) 1px, transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%, #000, transparent 82%);
          mask-image:radial-gradient(90% 70% at 50% 30%, #000, transparent 82%);
}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 排版基準 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem)}

/* ---------- 語言切換 ---------- */
.langnav{
  position:fixed;top:0;right:0;z-index:20;
  display:flex;gap:.2rem;align-items:stretch;
  padding:clamp(.7rem,2vw,1.1rem) clamp(1rem,4vw,2rem);
  font-family:"Fraunces","Noto Serif TC",serif;
  font-size:.86rem;letter-spacing:.14em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.langnav a{
  color:var(--cream-dim);text-decoration:none;
  padding:.35em .7em;border-radius:2px;
  transition:color .3s, background .3s;
}
.langnav a:hover{color:var(--cream)}
.langnav a[aria-current="page"]{color:var(--ink);background:var(--ochre);font-weight:600}
.langnav .sep{color:var(--cream-faint);align-self:center}

.kicker{
  font-family:"Fraunces","Noto Serif TC",serif;
  font-weight:400;font-style:italic;
  font-size:clamp(.82rem,1.6vw,1rem);
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--ochre);
}

h1,h2{font-weight:400;line-height:1.02;letter-spacing:-.015em}
h1{
  font-family:"Fraunces","Noto Serif TC",serif;
  font-size:clamp(3.4rem,13vw,7rem);
}
.h1-cjk{
  display:block;
  font-family:"Noto Serif TC","Noto Serif SC","Fraunces",serif;
  font-weight:600;
  font-size:clamp(3.6rem,15vw,8.5rem);
  letter-spacing:.06em;
}
.h1-en{
  display:block;
  font-family:"Fraunces","Noto Serif TC",serif;
  font-weight:400;
  font-size:clamp(3rem,12vw,6.6rem);
  letter-spacing:-.02em;
}
h2{
  font-family:"Noto Serif TC","Noto Serif SC","Fraunces",serif;
  font-weight:500;
  font-size:clamp(2rem,6vw,3.6rem);
  letter-spacing:.02em;
}
.lang-en h2{font-family:"Fraunces","Noto Serif TC",serif;font-weight:400}

.lead{
  font-size:clamp(1.1rem,2.3vw,1.5rem);
  color:var(--cream-dim);
  max-width:42ch;
  font-weight:300;
}

/* ---------- 淡入上升動畫（load 時錯開） ---------- */
/* 冇 JS（冇 .anim）時內容照樣顯示；有 .anim 先由隱藏狀態淡入 */
.anim .rise{opacity:0;transform:translateY(34px);
  animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:14vh;padding-bottom:12vh;position:relative;isolation:isolate}
/* 破曉：日出後約一小時的第一道光（貼合出生時辰） */
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48vh;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 120% at 50% 100%, rgba(230,162,60,.18), rgba(230,162,60,.04) 46%, transparent 74%);
}
.hero .kicker{margin-bottom:clamp(1.4rem,4vw,2.4rem)}
.hero h1{margin-bottom:clamp(1.4rem,3.4vw,2.1rem)}
.hero .stmt{
  font-family:"Fraunces","Noto Serif TC",serif;
  font-weight:400;line-height:1.3;letter-spacing:-.005em;
  font-size:clamp(1.55rem,3.8vw,2.5rem);
  max-width:24ch;color:var(--cream);
  margin-bottom:clamp(1.5rem,3.6vw,2.1rem);
}
.lang-sc .hero .stmt{font-family:"Noto Serif SC","Noto Serif TC",serif;font-weight:500}
.lang-en .hero .stmt{font-family:"Fraunces","Noto Serif TC",serif}
.name-en{
  display:block;
  font-family:"Fraunces","Noto Serif TC",serif;
  font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,4vw,2.4rem);
  color:var(--cream-dim);
  letter-spacing:.02em;
  margin-top:.55em;
  padding-left:.12em;
}
.name-cjk-sub{
  display:block;
  font-family:"Noto Serif TC","Noto Serif SC",serif;
  font-weight:300;
  font-size:clamp(1.4rem,3.4vw,2rem);
  color:var(--cream-dim);
  letter-spacing:.14em;
  margin-top:.5em;
}
.hero .lead{margin-left:clamp(0rem,14vw,10rem);padding-left:1.2rem;border-left:2px solid var(--ochre)}

.scrollcue{
  position:absolute;left:clamp(1.4rem,5vw,4rem);bottom:clamp(1.6rem,5vh,3rem);
  display:flex;align-items:center;gap:.9rem;
  font-family:"Fraunces",serif;font-style:italic;font-size:.9rem;color:var(--cream-dim)}
.scrollcue .bar{width:64px;height:1px;background:var(--ochre);transform-origin:left;
  animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ---------- 區塊通用 ---------- */
section{padding:clamp(5rem,13vw,9rem) 0;position:relative}
.idx{
  font-family:"Fraunces","Noto Serif TC",serif;
  font-size:clamp(1rem,2vw,1.15rem);
  letter-spacing:.3em;color:var(--ochre);
  display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.8rem,5vw,3rem)}
/* 指向線末端的箭頭 —— 射手座的箭，抽象化為方向感 */
.idx::after{
  content:"";flex:1;height:8px;max-width:min(38vw,340px);
  background:
    linear-gradient(rgba(244,236,219,.16),rgba(244,236,219,.16)) 0 50%/100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l4.5 3L1 7' fill='none' stroke='%23e6a23c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 100% 50%/8px 8px no-repeat;
}

/* ---------- 服務卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2.4rem,6vw,3.6rem)}
.card{
  background:linear-gradient(160deg, rgba(244,236,219,.05), rgba(244,236,219,.015));
  border:1px solid var(--cream-faint);
  border-radius:4px;
  padding:clamp(1.6rem,3vw,2.3rem);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, background .5s;
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:100%;width:2px;background:var(--ochre);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card h3{font-family:"Noto Serif TC","Noto Serif SC",serif;font-weight:600;font-size:clamp(1.3rem,2.6vw,1.65rem);letter-spacing:.03em;margin-bottom:.7rem}
.lang-en .card h3{font-family:"Fraunces","Noto Serif TC",serif;font-weight:600}
.card p{font-size:1rem;color:var(--cream-dim);font-weight:300}
.card:hover{transform:translateY(-8px);border-color:rgba(230,162,60,.5);background:linear-gradient(160deg, rgba(230,162,60,.10), rgba(244,236,219,.02))}
.card:hover::before{transform:scaleY(1)}

/* ---------- 做法 ---------- */
.approach{max-width:22ch}
.approach-body{
  margin-top:clamp(2rem,5vw,3rem);
  font-size:clamp(1.25rem,3vw,1.9rem);
  line-height:1.55;font-weight:300;color:var(--cream);
  max-width:34ch;margin-left:auto;
}
.approach-body b{font-weight:600;color:var(--ochre);font-style:normal}

/* ---------- 聯絡 ---------- */
.contact{text-align:left;padding-bottom:clamp(6rem,15vw,10rem)}
.contact h2{max-width:18ch;margin-bottom:clamp(2.4rem,6vw,3.4rem)}
.btn{
  --pad:clamp(1rem,2.4vw,1.35rem) clamp(1.8rem,4vw,2.6rem);
  display:inline-flex;align-items:center;gap:.85rem;
  padding:var(--pad);
  background:var(--ochre);color:var(--ink);
  font-family:"Noto Serif TC","Noto Serif SC",serif;font-weight:600;
  font-size:clamp(1.05rem,2.4vw,1.35rem);letter-spacing:.06em;
  border:0;cursor:pointer;
  border-radius:3px;text-decoration:none;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  box-shadow:0 0 0 rgba(230,162,60,0);
}
.lang-en .btn{font-family:"Fraunces","Noto Serif TC",serif}
.btn span.arrow{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 44px -18px rgba(230,162,60,.7)}
.btn:hover::before{transform:translateY(0)}
.btn:hover span.arrow{transform:translateX(6px)}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:4px}

.contact small{display:block;margin-top:clamp(1.6rem,4vw,2.2rem);color:var(--cream-dim);font-weight:300;font-size:.95rem}

/* ---------- 微信聯絡卡（簡體頁） ---------- */
.wx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:.5rem}
.wx-card{
  border:1px solid var(--cream-faint);border-radius:4px;
  padding:clamp(1.6rem,3vw,2.2rem);
  background:linear-gradient(160deg, rgba(244,236,219,.05), rgba(244,236,219,.015));
}
.wx-card .label{
  font-family:"Fraunces","Noto Serif SC",serif;font-style:italic;
  color:var(--ochre);letter-spacing:.2em;text-transform:uppercase;
  font-size:.8rem;margin-bottom:.8rem;
}
.wx-card .value{
  font-family:"Noto Serif SC","Noto Serif TC",serif;
  font-size:clamp(1.35rem,3.2vw,1.9rem);font-weight:500;
  word-break:break-all;letter-spacing:.02em;
}
.wx-qr{
  display:block;width:100%;max-width:240px;height:auto;
  margin:1.3rem 0 .4rem;
  background:#fff;border-radius:6px;
  padding:10px;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.55);
}
.wx-card .hint{color:var(--cream-dim);font-weight:300;font-size:.92rem;margin-top:.6rem}
.copybtn{
  margin-top:1.1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;color:var(--cream);
  border:1px solid var(--ochre);border-radius:3px;
  padding:.55em 1.1em;cursor:pointer;
  font-family:"Noto Serif SC",serif;font-size:.9rem;letter-spacing:.08em;
  transition:background .3s, color .3s;
}
.copybtn:hover{background:var(--ochre);color:var(--ink)}
.copybtn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

footer{border-top:1px solid var(--cream-faint);padding:2.6rem 0;color:var(--cream-dim);font-size:.85rem;letter-spacing:.08em}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
footer .en{font-family:"Fraunces",serif;font-style:italic}

@media (max-width:640px){
  .hero .lead{margin-left:0;padding-left:1rem;border-left-width:2px}
  .approach-body{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim .rise{animation:none}
  .rise{opacity:1;transform:none}
  .scrollcue .bar{animation:none}
}