:root{
  --color-primary:#7A1024;
  --color-accent:#C8A24D;
  --color-bg:#F6EFDC;
  --color-text:#222222;
  --color-text-muted:#6b6b6b;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:150px;}
body{
  margin:0;
  font-family:'Noto Sans TC','PingFang TC','Helvetica Neue',Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(200,162,77,.16), transparent 45%),
    radial-gradient(circle at 90% 30%, rgba(122,16,36,.08), transparent 50%),
    linear-gradient(180deg, #FBF5E6 0%, var(--color-bg) 100%);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Top business bar ---------- */
.top-bar{
  background:linear-gradient(90deg, #5c0a1b 0%, var(--color-primary) 45%, #9c3a1f 75%, var(--color-accent) 100%);
  color:#fff;
}
.top-bar a:hover{
  color:var(--color-accent);
}

/* ---------- Gold sheen sections ---------- */
.section-gold{
  background:
    radial-gradient(circle at 90% 0%, rgba(200,162,77,.16), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(122,16,36,.06), transparent 55%),
    linear-gradient(160deg, #FFFDF7 0%, #FBF1DC 55%, #F3E3BE 100%);
}
.section-gold-soft{
  background:
    radial-gradient(circle at 10% 10%, rgba(200,162,77,.14), transparent 50%),
    linear-gradient(180deg, #FAF3E2 0%, #F4E7C8 100%);
}

.font-serif-tc{font-family:'Noto Serif TC','Noto Sans TC',serif;}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}
.reveal-delay-5{transition-delay:.4s;}
.reveal-delay-6{transition-delay:.48s;}

/* ---------- 業務名片進場動畫（兩段式：名片升起 → 內容依序浮現） ---------- */
.biz-card .biz-stagger > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.biz-card.is-visible .biz-stagger > *{
  opacity:1;
  transform:translateY(0);
}
.biz-card.is-visible .biz-stagger > *:nth-child(1){transition-delay:.30s;}
.biz-card.is-visible .biz-stagger > *:nth-child(2){transition-delay:.38s;}
.biz-card.is-visible .biz-stagger > *:nth-child(3){transition-delay:.46s;}
.biz-card.is-visible .biz-stagger > *:nth-child(4){transition-delay:.54s;}
.biz-card.is-visible .biz-stagger > *:nth-child(5){transition-delay:.62s;}
/* 名片本身：升起時帶輕微縮放 */
.biz-card .biz-stagger{
  transform:scale(.97);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.biz-card.is-visible .biz-stagger{
  transform:scale(1);
}
/* 光澤掃過效果 */
.biz-card .biz-stagger::after{
  content:"";
  position:absolute;
  top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.biz-card.is-visible .biz-stagger::after{
  animation:card-sheen 1.1s ease-out .5s 1;
}
@keyframes card-sheen{
  0%{left:-60%;opacity:0;}
  20%{opacity:1;}
  100%{left:120%;opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .biz-card .biz-stagger,
  .biz-card .biz-stagger > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .biz-card .biz-stagger::after{display:none;}
}

/* ---------- 產品圖燈箱（點擊放大） ---------- */
.product-img, .zoomable{cursor:zoom-in;}
.lightbox-overlay{position:fixed;inset:0;background:rgba(26,10,16,.9);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.lightbox-overlay.open{opacity:1;pointer-events:auto;}
.lightbox-overlay img{max-width:min(95%,900px);max-height:92vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.55);background:#fff;}
.lightbox-close{position:absolute;top:16px;right:24px;width:44px;height:44px;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:1;border-radius:50%;cursor:pointer;transition:background .2s;}
.lightbox-close:hover{background:rgba(255,255,255,.32);}

/* ---------- 名片輕微浮動 ---------- */
@keyframes card-floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.card-floaty{animation:card-floaty 4s ease-in-out infinite;will-change:transform;}
@media (prefers-reduced-motion: reduce){.card-floaty{animation:none;}}

/* ---------- Hero：左欄 CTA 按鈕對齊右欄底部（lg 以上） ---------- */
@media (min-width:1024px){
  .hero-cta-bottom{margin-top:auto;}
}

/* ---------- 比較表：小螢幕維持最小寬度並可橫向捲動 ----------
   （補足預先編譯 Tailwind 未包含的任意值 min-w-[...]） */
.overflow-x-auto > table{min-width:520px;}

/* ---------- 快速結論卡：進場光澤掃過 ---------- */
.summary-card::before{
  content:"";
  position:absolute;
  top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.summary-card.is-visible::before{
  animation:card-sheen 1.2s ease-out .65s 1;
}
.summary-card > *{position:relative;z-index:2;}
@media (prefers-reduced-motion: reduce){
  .summary-card::before{display:none;}
}

/* ---------- Nav ---------- */
.nav-blur{
  background:linear-gradient(135deg, rgba(255,253,246,.88) 0%, rgba(246,233,196,.82) 100%);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}

.nav-link{
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--color-accent);
  transition:width .35s ease;
}
.nav-link:hover::after{width:100%;}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--color-primary);
  color:#fff;
  letter-spacing:.05em;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .35s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(122,16,36,.55);
  background:#8e1530;
}
.btn-outline{
  border:1px solid var(--color-accent);
  color:var(--color-primary);
  letter-spacing:.05em;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease;
}
/* ---------- 優惠詢價閃動標示 ---------- */
.price-strike{
  text-decoration:line-through;
  color:#999;
  font-size:.9em;
}
.flash-quote{
  display:inline-block;
  background:var(--color-primary);
  color:#fff;
  font-weight:700;
  padding:2px 12px;
  border-radius:999px;
  animation:flash-quote 1.1s ease-in-out infinite;
}
@keyframes flash-quote{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(122,16,36,.45);}
  50%{opacity:.78;transform:scale(1.05);box-shadow:0 0 0 6px rgba(122,16,36,0);}
}
@media (prefers-reduced-motion: reduce){
  .flash-quote{animation:none;}
}
.product-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
  border-radius:1rem;
}

.btn-outline-white{
  border:1px solid rgba(255,255,255,.7);
  color:#fff;
  letter-spacing:.05em;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease;
}
.btn-outline-white:hover{
  transform:translateY(-2px);
  background:#fff;
  color:var(--color-primary);
}
.btn-outline:hover{
  transform:translateY(-2px);
  background:var(--color-accent);
  color:#fff;
}

/* ---------- Hero ---------- */
.hero-bg{
  background:
    radial-gradient(circle at 80% 20%, rgba(200,162,77,.32), transparent 55%),
    radial-gradient(circle at 10% 85%, rgba(122,16,36,.22), transparent 55%),
    linear-gradient(180deg,#FFFCF2 0%, #F3E3BE 100%);
}

.hero-float{
  animation:hero-float 7s ease-in-out infinite;
}
@keyframes hero-float{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-16px);}
}

.shimmer-line{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* ---------- Cards ---------- */
.feature-card{
  background:linear-gradient(160deg, #fffdf6 0%, #fbf2dc 100%);
  border:1px solid rgba(200,162,77,.18);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -25px rgba(122,16,36,.25);
  border-color:rgba(200,162,77,.4);
}
.feature-icon{
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.feature-card:hover .feature-icon{
  transform:scale(1.12) rotate(-4deg);
}

/* ---------- Counter ---------- */
.counter-num{
  font-feature-settings:"tnum";
}

/* ---------- Lifestyle ---------- */
.lifestyle-img{
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.lifestyle-card:hover .lifestyle-img{
  transform:scale(1.06);
}

/* ---------- Testimonials ---------- */
.testimonial-track{
  display:flex;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.testimonial-slide{
  flex:0 0 100%;
}
@media(min-width:768px){
  .testimonial-slide{flex:0 0 50%;}
}
@media(min-width:1024px){
  .testimonial-slide{flex:0 0 33.3333%;}
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(34,34,34,.18);
  transition:background .3s ease, width .3s ease;
}
.dot.active{
  background:var(--color-primary);
  width:22px;
  border-radius:5px;
}

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom:1px solid rgba(34,34,34,.1);
}
.faq-question{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.faq-icon{
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  flex-shrink:0;
}
.faq-item.open .faq-icon{
  transform:rotate(45deg);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  opacity:0;
}
.faq-item.open .faq-answer{
  opacity:1;
}

/* ---------- Misc ---------- */
.divider-gold{
  width:48px;height:2px;background:var(--color-accent);
}

.back-to-top{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.back-to-top.show{
  opacity:1;
  pointer-events:auto;
}

#mobile-menu{
  transition:max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  max-height:0;
  opacity:0;
  overflow:hidden;
}
#mobile-menu.open{
  max-height:480px;
  opacity:1;
}

::selection{
  background:var(--color-accent);
  color:#fff;
}
.scroll-down-bounce{animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.spec-img{width:100%;height:22rem;object-fit:contain;background:#fff;border-radius:1rem;padding:.5rem;}
@media(max-width:768px){.spec-img{height:18rem;}}