:root {
  --bg: #0b0b10; --bg-soft: #121219; --panel: #121218;
  --text: #f4f4f6; --muted: #c9c9d1;
  --brand: #c1121f; --brand-2: #7a0a0a; --accent: #f59f0b;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --radius: 18px; --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
}
*{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin-inline:auto}

/* 通用元件 */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.15rem;border-radius:999px;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:white;border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 20px rgba(193,18,31,.35);transition:.2s transform ease,.2s box-shadow ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(193,18,31,.45)}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,.12)}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);font-size:.85rem;color:var(--muted)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:1.25rem}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Header */
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(11,11,16,.9),rgba(11,11,16,.4) 60%,transparent);backdrop-filter:saturate(1.1) blur(6px)}
nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.logo{width:34px;height:34px;border-radius:50%;background:radial-gradient(60% 60% at 40% 40%, #ff6a6a, #7a0a0a);box-shadow:0 0 20px rgba(255,58,58,.35), inset 0 0 8px rgba(255,255,255,.2)}
.brand h1{font-size:1.05rem;letter-spacing:.04em;margin:0}
.navlinks{display:flex;gap:1rem}
.navlinks a{padding:.5rem .7rem;border-radius:10px}
.navlinks a:hover{background:rgba(255,255,255,.06)}
.menu-toggle{display:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:var(--text);border-radius:10px;padding:.45rem .6rem}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero .container{padding:5.5rem 0 3.5rem;position:relative;z-index:1}
.title{font-size:clamp(1.8rem,6vw,3.2rem);line-height:1.15;margin:0 0 .7rem}
.subtitle{max-width:760px;color:var(--muted);margin-bottom:1.2rem}
.cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1rem}

/* 火焰背景 */
.embers{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1200px 600px at 70% -10%,rgba(255,58,58,.18),transparent 60%),radial-gradient(800px 400px at 10% 110%,rgba(245,159,11,.08),transparent 60%)}
canvas#fx{position:absolute;inset:0;filter:saturate(1.1) brightness(1.05)}
.badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}

/* 內容區塊 */
section{padding:clamp(2.2rem,5vw,3.2rem) 0}
section h2{font-size:clamp(1.3rem,3.5vw,2rem);margin:.2rem 0 1rem}
section p.lead{color:var(--muted);max-width:800px}

.offerings{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.offer{padding:1.2rem}
.offer h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.offer p{color:var(--muted);font-size:.95rem}

.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{padding:1.1rem}
.step .n{font-weight:700;color:var(--accent)}

.testis{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.t{padding:1rem}
.t p{color:#e9e9ee}
.t footer{margin-top:.8rem;color:var(--muted);font-size:.9rem}

.altar{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sigil{padding:1.1rem;text-align:center}
.sigil svg{width:56px;height:56px;margin-inline:auto;display:block}
.sigil h4{margin:.5rem 0 .3rem;font-size:1rem}
.sigil p{color:var(--muted);font-size:.92rem}

.grid-booking{grid-template-columns:1.3fr .9fr;align-items:start}
.form-status{min-height:1.4em;margin-top:.6rem;color:var(--muted)}
.divider{border:none;border-top:1px solid rgba(255,255,255,.08);margin:1rem 0}
.lead.small{font-size:.98rem}
.muted{color:var(--muted);font-size:.9rem}

form{display:grid;gap:.9rem}
input,textarea,select{width:100%;padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--text);outline:none}
textarea{min-height:130px;resize:vertical}
.legal{font-size:.85rem;color:var(--muted)}

details{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted)}

footer{padding:2.2rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.08)}
.footer-flex{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}

/* ===== 多語系語言選單 ===== */
.lang-picker{appearance:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:var(--text);border-radius:10px;padding:.4rem .8rem;font-size:.9rem;margin-right:.6rem;cursor:pointer}
.lang-picker option{background-color:#1b1b1b;color:#f4f4f6;}
.lang-picker optgroup{background-color:#1b1b1b;color:#f4f4f6;}
.lang-picker:focus{outline:2px solid var(--brand)}
.nav-right{display:flex;align-items:center;gap:.5rem}

/* 語言標籤調整 */
#langLabel {
  min-width: 4.5em;          /* 給中文等寬一點空間 */
  text-align: right;         /* 與下拉選單對齊 */
  white-space: nowrap;       /* 不換行 */
  margin-right: 0.4rem;      /* 與下拉選單間距 */
  font-size: 0.9rem;
  color: var(--muted);
}

/* Webfont 宣告 */
@font-face {
  font-family: "DovahzulWeb";
  src: url("../fonts/Dovahzul.woff2") format("woff2"),
       url("../fonts/Dovahzul.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 或 optional，看你想不想快切換 */
}

/* 當 <html lang="dv"> 時套用龍語字型（再備援到系統字體） */
html[lang="dv"] body {
  font-family: "DovahzulWeb", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif;
}

/* 選單本身在 dv 時也用龍語字型（避免 option 仍用預設字型） */
html[lang="dv"] .lang-picker,
html[lang="dv"] .navlinks,
html[lang="dv"] [data-i18n],
html[lang="dv"] .btn,
html[lang="dv"] .chip {
  font-family: "DovahzulWeb", inherit;
}

/* ===== Dovahzul 表單字體覆寫（只在 dv 語系生效） ===== */
html[lang="dv"] body,
html[lang="dv"] input,
html[lang="dv"] textarea,
html[lang="dv"] select,
html[lang="dv"] button,
html[lang="dv"] .form-status,
html[lang="dv"] .legal {
  font-family: "DovahzulWeb", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif !important;
}

/* select 下拉清單（各瀏覽器/平台） */
html[lang="dv"] .lang-picker,
html[lang="dv"] select option,
html[lang="dv"] select optgroup {
  font-family: "DovahzulWeb", inherit !important;
}

/* placeholder 文字（跨瀏覽器寫法） */
html[lang="dv"] ::placeholder {
  font-family: "DovahzulWeb", inherit;
  font-style: normal;
  opacity: .8; /* 可依喜好調整 */
}
html[lang="dv"] :-ms-input-placeholder { /* IE/舊 Edge */
  font-family: "DovahzulWeb", inherit;
  font-style: normal;
}
html[lang="dv"] ::-ms-input-placeholder { /* IE/舊 Edge */
  font-family: "DovahzulWeb", inherit;
  font-style: normal;
}
html[lang="dv"] ::-webkit-input-placeholder { /* Safari/Chrome */
  font-family: "DovahzulWeb", inherit;
  font-style: normal;
}

/* iOS/Safari 某些情況會把表單內文恢復成系統字體，這樣能再強一點 */
@supports (-webkit-touch-callout: none) {
  html[lang="dv"] input,
  html[lang="dv"] textarea,
  html[lang="dv"] select,
  html[lang="dv"] button {
    -webkit-text-size-adjust: 100%;
  }
}


/* ===== RWD ===== */
@media (max-width:960px){
  .grid-booking{grid-template-columns:1fr}
}
@media (max-width:720px){
  .menu-toggle{display:inline-block}
  header{z-index:10000}
  .navlinks{
    position:absolute;
    top:56px; left:0; right:0;
    display:none; /* 預設隱藏 */
    flex-direction:column;
    background:#0b0b10; /* 實心背景，無半透明 */
    padding:1rem 1.1rem;
    border-top:1px solid rgba(255,255,255,.08);
    z-index:9999;
  }
  .navlinks.open{display:flex;} /* 點擊時顯示 */
  .navlinks a{padding:.8rem 1rem;border-radius:12px;background:rgba(255,255,255,.05)}
  .hero .container{padding:4.2rem 0 2.6rem}
}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  html{scroll-behavior:auto}
}