: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);
}
/* 移除頂部業務資訊列：隱藏 top bar，導覽列上移至頁面最頂 */
#top-bar{ display:none !important; }
.nav-blur{ top:0 !important; }

/* ---------- 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;}}


/* ============ 高級感微動效層（附加式；不更動版面、顏色、字體、內容、產品圖） ============ */
/* 卡片：懸浮微升 + 描邊光暈 */
.feature-card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,border-color .5s ease;}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px -24px rgba(122,16,36,.30);border-color:rgba(200,162,77,.5);}
/* 主要按鈕：hover 微放大 */
.btn-primary:hover{transform:translateY(-2px) scale(1.02);}
/* 導覽列：頂部半透明 → 捲動後轉為實心 */
#site-nav{transition:background .45s ease,box-shadow .45s ease;}
#site-nav.nav-top{background:linear-gradient(135deg,rgba(255,253,246,.55),rgba(246,233,196,.42));box-shadow:none;}

@media (prefers-reduced-motion: no-preference){
  /* Hero 進場：整體淡入 + 內容輕升（GPU transform，無版面位移） */
  .hero-bg{animation:kb-heroFade 1.4s ease-out both;}
  @keyframes kb-heroFade{from{opacity:0;}to{opacity:1;}}
  .hero-bg > [class*="max-w-"]{animation:kb-heroRise 1.5s cubic-bezier(.16,1,.3,1) both;}
  @keyframes kb-heroRise{from{transform:translateY(12px) scale(.985);}to{transform:none;}}
  /* 產品海報：極輕微浮動 */
  .kb-float{animation:kb-float 8s ease-in-out infinite;will-change:transform;}
  @keyframes kb-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
  /* 暖陽光暈：18s 緩慢掃過一次（幾乎不察覺） */
  .kb-light{position:absolute;top:-30%;bottom:-30%;left:-25%;width:55%;z-index:0;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,214,150,.20),transparent 72%);filter:blur(48px);
    opacity:0;animation:kb-light 18s ease-in-out infinite;}
  @keyframes kb-light{0%{opacity:0;transform:translateX(-20%);}42%,58%{opacity:.72;}100%{opacity:0;transform:translateX(185%);}}
  /* 微塵（透明度 < 0.08） */
  .kb-dust{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .kb-dust b{position:absolute;display:block;border-radius:50%;background:#fff7e8;opacity:0;
    animation:kb-dust var(--d,16s) linear var(--dl,0s) infinite;}
  @keyframes kb-dust{0%{opacity:0;transform:translate(0,0);}18%{opacity:.07;}82%{opacity:.045;}100%{opacity:0;transform:translate(var(--dx,10px),var(--dy,-42px));}}
  /* 捲動揭示：加入極淡模糊，收斂更細緻 */
  .reveal{filter:blur(5px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s ease;}
  .reveal.is-visible{filter:blur(0);}
}

/* ============ 可及性：鍵盤焦點可見 ============ */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-accent);outline-offset:2px;border-radius:4px;
}
:focus:not(:focus-visible){outline:none;}

/* 跳至主要內容（鍵盤/螢幕閱讀器） */
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--color-primary);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 10px;font-size:14px;font-weight:700;transition:top .2s ease;text-decoration:none;}
.skip-link:focus{top:0;}

/* ============ CRO：首屏信任帶 + 手機常駐 CTA ============ */
.cro-trust{background:linear-gradient(90deg,#fbf3e0,#f4e7c8);border-top:1px solid rgba(200,162,77,.35);border-bottom:1px solid rgba(200,162,77,.35);}
.cro-trust ul{max-width:80rem;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;list-style:none;font-size:13.5px;color:#5c1a2b;font-weight:600;}
.cro-trust li{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.cro-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;background:#fff;border-top:1px solid rgba(200,162,77,.4);box-shadow:0 -6px 20px -8px rgba(0,0,0,.18);}
.cro-cta a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 4px;font-size:12px;font-weight:700;text-decoration:none;color:#5c1a2b;}
.cro-cta a .ic{font-size:18px;line-height:1;}
.cro-cta a.line{background:#06C755;color:#fff;}
.cro-cta a.ask{background:var(--color-primary);color:#fff;}
@media(max-width:767px){
  .cro-cta{display:flex;}
  body{padding-bottom:60px;}
  .fixed.bottom-6.right-6 > a{display:none;}     /* 收起重複的浮動 LINE/電話 */
  .fixed.bottom-6.right-6{bottom:72px;}          /* 回頂鈕移到 CTA 列上方 */
}

/* ============ 導覽列改為品牌紅（文字轉白/金以確保對比） ============ */
.nav-blur{background:linear-gradient(135deg, rgba(122,16,36,.97) 0%, rgba(92,10,27,.97) 100%);}
#site-nav.nav-top{background:linear-gradient(135deg, rgba(122,16,36,.9), rgba(92,10,27,.88));box-shadow:none;}
#site-nav{border-bottom:1px solid rgba(200,162,77,.35);}
#site-nav nav{border-top-color:rgba(255,255,255,.14)!important;}
#site-nav .font-serif-tc{color:#ffffff;}                 /* logo：愷樂生醫 → 白 */
#site-nav .nav-link{color:#fbeede;}                       /* 選單文字 → 米白 */
#site-nav .nav-link:hover{color:#ffffff;}
#site-nav .nav-link.text-primary{color:var(--color-accent);}  /* 目前頁 → 金色 */
#site-nav .nav-link::after{background:var(--color-accent);}
#site-nav .btn-primary{background:var(--color-accent);color:#4d0a1a;}   /* 立即諮詢 → 金底深字 */
#site-nav .btn-primary:hover{background:#e0b95e;color:#4d0a1a;box-shadow:0 12px 24px -10px rgba(0,0,0,.4);}

/* ── 產品頁 Hero：海報貼齊底部（修正高螢幕上海報浮在中央、下方留一大片米色的問題） ── */
.hero-product{align-items:flex-end;padding-bottom:1.5rem;}
@media (min-width:1024px){.hero-product{padding-bottom:2.5rem;}}