/* =====================================================
   玹翔旅遊｜Global CSS V30
   Luxury Black Gold Design System
   全站共用高端黑金基礎樣式
===================================================== */
:root{
  --xx-bg:#050505;
  --xx-bg-soft:#0b0b0f;
  --xx-panel:#11131a;
  --xx-panel-2:#171b24;
  --xx-panel-3:#1d2230;

  --xx-text:#f7f4ec;
  --xx-text-soft:rgba(255,255,255,.78);
  --xx-text-muted:rgba(255,255,255,.56);

  --xx-line:rgba(216,181,109,.22);
  --xx-line-strong:rgba(216,181,109,.46);
  --xx-line-bright:rgba(255,240,184,.62);

  --xx-gold:#d8b56d;
  --xx-gold-2:#f6df9b;
  --xx-gold-3:#fff2c8;
  --xx-gold-deep:#a47a33;

  --xx-shadow-sm:0 10px 24px rgba(0,0,0,.24);
  --xx-shadow:0 20px 60px rgba(0,0,0,.38);
  --xx-shadow-lg:0 34px 100px rgba(0,0,0,.55);
  --xx-shadow-gold:0 18px 48px rgba(216,181,109,.18);

  --xx-radius-xs:10px;
  --xx-radius-sm:14px;
  --xx-radius-md:22px;
  --xx-radius-lg:32px;
  --xx-radius-xl:42px;

  --xx-wrap:min(1280px, calc(100% - 40px));
  --xx-wrap-wide:min(1440px, calc(100% - 40px));

  --xx-ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--xx-bg);
}
body{
  margin:0;
  color:var(--xx-text);
  background:
    radial-gradient(circle at top, rgba(216,181,109,.10), transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(246,223,155,.08), transparent 20%),
    linear-gradient(180deg, #090909 0%, #040404 100%);
  font-family:"Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
section{position:relative}

.xx-container,
.container,
.wrap{
  width:var(--xx-wrap);
  margin-inline:auto;
}

.xx-container-wide,
.wrap-wide{
  width:var(--xx-wrap-wide);
  margin-inline:auto;
}

.xx-section,
.section{
  position:relative;
  padding:88px 0;
}

.xx-section-head,
.section-title{
  position:relative;
  text-align:center;
  margin-bottom:36px;
}

.xx-section-head h2,
.section-title h2{
  margin:0 0 12px;
  font-family:"Noto Serif TC", serif;
  font-size:clamp(32px, 4.8vw, 58px);
  line-height:1.08;
  letter-spacing:-.04em;
  color:var(--xx-text);
  text-shadow:0 0 34px rgba(216,181,109,.24);
}

.xx-section-head p,
.section-title p{
  margin:0 auto;
  max-width:780px;
  color:var(--xx-text-soft);
  font-size:16px;
  line-height:1.95;
}

.xx-section-head::after,
.section-title::after{
  content:"";
  display:block;
  width:min(180px, 42%);
  height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--xx-gold), var(--xx-gold-3), var(--xx-gold), transparent);
  box-shadow:0 0 22px rgba(216,181,109,.24);
}

.xx-card,
.card,
.panel{
  position:relative;
  background:linear-gradient(180deg, rgba(19,22,30,.96), rgba(8,10,16,.98));
  border:1px solid var(--xx-line);
  border-radius:var(--xx-radius-md);
  box-shadow:var(--xx-shadow);
  overflow:hidden;
  transition:transform .28s var(--xx-ease), box-shadow .28s var(--xx-ease), border-color .28s var(--xx-ease);
}

.xx-card::before,
.card::before,
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,240,184,.12), transparent 34%, rgba(216,181,109,.08));
  opacity:.78;
}

.xx-card > *,
.card > *,
.panel > *{position:relative;z-index:1}

.xx-card:hover,
.card:hover,
.panel:hover{
  transform:translateY(-4px);
  border-color:rgba(255,240,184,.36);
  box-shadow:0 26px 72px rgba(0,0,0,.42), 0 0 36px rgba(216,181,109,.10);
}

.xx-glass{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--xx-shadow);
}

.xx-gold-line{position:relative}
.xx-gold-line::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(720px, 86%);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--xx-gold), var(--xx-gold-3), var(--xx-gold), transparent);
  box-shadow:0 0 22px rgba(216,181,109,.24);
}

.btn,
button.btn,
a.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid var(--xx-line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  color:var(--xx-text);
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:var(--xx-shadow-sm);
  transition:transform .24s var(--xx-ease), box-shadow .24s var(--xx-ease), border-color .24s var(--xx-ease), background .24s var(--xx-ease);
  cursor:pointer;
  overflow:hidden;
}

.btn::before,
button.btn::before,
a.btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 34%, transparent 68%);
  transform:translateX(-115%);
  transition:transform .6s var(--xx-ease);
}

.btn:hover,
button.btn:hover,
a.btn:hover{
  transform:translateY(-2px);
  border-color:var(--xx-line-bright);
  box-shadow:0 18px 40px rgba(0,0,0,.36), 0 0 0 1px rgba(216,181,109,.16) inset;
}

.btn:hover::before,
button.btn:hover::before,
a.btn:hover::before{transform:translateX(115%)}

.btn.primary,
button.btn.primary,
a.btn.primary{
  color:#1a1307;
  border-color:rgba(216,181,109,.88);
  background:linear-gradient(135deg, var(--xx-gold-3), var(--xx-gold-2) 42%, var(--xx-gold));
  box-shadow:var(--xx-shadow-gold);
}

.btn.primary:hover,
button.btn.primary:hover,
a.btn.primary:hover{
  box-shadow:0 20px 44px rgba(216,181,109,.24);
}

.xx-badge,
.badge,
.news-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(216,181,109,.28);
  background:rgba(216,181,109,.10);
  color:var(--xx-gold-3);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}

.xx-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.xx-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.xx-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}

.xx-surface-dark{
  background:linear-gradient(180deg, rgba(7,7,8,.96), rgba(4,4,6,.98));
}

.xx-luxury-section{
  background:
    radial-gradient(circle at 50% 0%, rgba(216,181,109,.16), transparent 34%),
    linear-gradient(180deg, #070707 0%, #030303 100%);
}

@media (max-width:1024px){
  .xx-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xx-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xx-section,
  .section{padding:72px 0}
}

@media (max-width:700px){
  :root{--xx-wrap:min(100% - 24px, 100%)}
  .xx-grid-2,
  .xx-grid-3,
  .xx-grid-4{grid-template-columns:1fr;gap:16px}
  .btn,
  button.btn,
  a.btn{min-height:44px;padding:0 16px;font-size:14px}
  .xx-section,
  .section{padding:56px 0}
  .xx-section-head,
  .section-title{margin-bottom:28px}
  .xx-section-head h2,
  .section-title h2{font-size:clamp(26px, 8vw, 40px)}
  .xx-section-head p,
  .section-title p{font-size:15px}
}