/* ── 銷冠助手 官網共用樣式（index / features / pricing / faq 共用） ── */
*{ box-sizing:border-box; }
body{ margin:0; background:#faf8f3; color:#1c1a15; font-family:'Noto Sans TC',sans-serif; }
a{ color:inherit; }
.hidden{ display:none !important; }
button.btn-reset{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:inherit; }
:focus-visible{ outline:3px solid rgb(188,135,47); outline-offset:2px; border-radius:6px; }
.burger{ display:none; }
.mobile-menu{ display:none; }

/* ── 頁面過場（進場淡入上浮、離場淡出） ── */
.page{ animation:pageIn .6s cubic-bezier(.16,.84,.44,1) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
body.leaving .page{ opacity:0; transform:translateY(-12px); transition:opacity .26s ease, transform .26s ease; }
@media(prefers-reduced-motion:reduce){
  .page{ animation:none; }
  body.leaving .page{ opacity:1; transform:none; transition:none; }
}

/* ── Nav ── */
.nav{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:18px 64px; background:rgba(250,248,243,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(28,26,21,.08); transition:box-shadow .3s ease, background .3s ease; }
.nav.scrolled{ box-shadow:0 6px 24px rgba(60,50,20,.09); }
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.nav-logo-mark{ width:76px; height:76px; margin:-16px 0; border-radius:14px; object-fit:cover; display:block; }
.nav-logo-text{ height:76px; width:auto; margin:-16px 0; display:block; }
.nav-links{ display:flex; align-items:center; gap:32px; font-size:14.5px; color:#5a564c; }
.nav-sections{ display:flex; align-items:center; gap:30px; }
.nav-sections a{ position:relative; padding:7px 2px; color:#5a564c; text-decoration:none; font-weight:600; letter-spacing:.3px; transition:color .25s ease; }
.nav-sections a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2.5px; border-radius:3px; background:linear-gradient(90deg,rgb(210,162,73),rgb(171,114,60)); transform:scaleX(0); transform-origin:center; transition:transform .32s cubic-bezier(.2,.8,.3,1); }
.nav-sections a:hover{ color:rgb(157,99,0); }
.nav-sections a:hover::after{ transform:scaleX(1); }
.nav-sections a[aria-current="page"]{ color:rgb(157,99,0); }
.nav-sections a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{ padding:10px 22px; border-radius:999px; background:linear-gradient(135deg,rgb(210,162,73),rgb(171,114,60)); color:#fff; font-weight:700; }
#nav-user{ position:relative; }
.nav-user-btn{ display:flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; background:rgba(28,26,21,.06); }
.nav-user-initial{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,rgb(220,177,85),rgb(176,120,65)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; }
.nav-user-menu{ position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid rgba(28,26,21,.1); border-radius:14px; padding:8px; box-shadow:0 8px 28px rgba(60,50,20,.14); min-width:160px; z-index:30; }
.nav-user-menu a{ display:block; padding:11px 16px; border-radius:9px; text-decoration:none; color:#1c1a15; font-size:14px; font-weight:600; }
.nav-user-menu .sep{ height:1px; background:rgba(28,26,21,.06); margin:4px 2px; }
.nav-user-menu button{ display:block; width:100%; padding:11px 16px; border-radius:9px; font-size:14px; color:#9a958a; }

/* ── 共用元件 ── */
.eyebrow{ font-size:14px; letter-spacing:2px; color:rgb(167,117,40); font-weight:600; }
.h2{ font-family:'Baloo 2','Noto Sans TC'; font-weight:800; font-size:42px; margin:10px 0 0; }
.btn-primary{ position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.btn-primary::after{ content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:scShine 3.6s ease-in-out infinite; }
@keyframes scShine{ 0%,60%{ left:-120%; } 85%,100%{ left:180%; } }
.btn-primary:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px rgba(195,149,83,.45) !important; }
.feat-card{ position:relative; transition:transform .3s ease, box-shadow .3s ease; }
.feat-card:hover{ transform:translateY(-6px); box-shadow:0 18px 42px rgba(60,50,20,.12); }
.count-num{ font-variant-numeric:tabular-nums; }

/* ── 捲動淡入 ── */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ── 動態演示動畫 ── */
@keyframes scPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.sc-live-dot{ width:9px; height:9px; border-radius:50%; background:rgb(74,166,81); display:inline-block; animation:scPulse 1.6s infinite; }

/* ── FAQ 摺疊 ── */
.faq-ans{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.faq-item.open .faq-ans{ max-height:500px; }
.faq-item.open .faq-arrow{ transform:rotate(180deg); }
.faq-arrow{ display:inline-block; font-size:12px; color:#9a958a; transition:transform .3s ease; flex-shrink:0; }

/* ── Login Modal ── */
.modal-mask{ position:fixed; inset:0; z-index:100; background:rgba(28,26,21,.48); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-close{ position:absolute; top:14px; right:16px; font-size:18px; color:#9a958a; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px; }

/* ── 浮動 LINE 按鈕 ── */
@keyframes scBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.float-line{ position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:9px; padding:13px 20px 13px 16px; border-radius:999px; background:#06C755; color:#fff; font-weight:800; font-size:15px; text-decoration:none; box-shadow:0 10px 30px rgba(6,199,85,.4); animation:scBob 2.6s ease-in-out infinite; transition:transform .2s ease; }
.float-line:hover{ transform:scale(1.06); }
.float-line svg{ width:22px; height:22px; flex-shrink:0; }
@media(prefers-reduced-motion:reduce){ .float-line{ animation:none; } }

/* ── Footer CTA + Footer ── */
.cta-sec{ text-align:center; padding:88px 64px; background:linear-gradient(180deg,#faf8f3,rgba(222,192,136,.28)); border-top:1px solid rgba(28,26,21,.07); }
.footer-cta-h{ font-family:'Baloo 2','Noto Sans TC'; font-weight:800; font-size:46px; margin:0; }
.site-footer{ padding:44px 64px; border-top:1px solid rgba(28,26,21,.08); background:#faf8f3; }
.site-footer a{ text-decoration:none; }
.foot-col-title{ font-weight:700; font-size:14px; margin-bottom:12px; }
.foot-col{ display:flex; flex-direction:column; gap:9px; font-size:13px; color:#7c7668; }
.foot-col a{ color:inherit; transition:color .2s ease; }
.foot-col a:hover{ color:rgb(157,99,0); }

/* ── RWD ── */
@media(max-width:760px){
  .nav{ padding:12px 16px !important; }
  .nav-links{ gap:10px !important; font-size:13px !important; }
  .nav-sections{ display:none !important; }
  .nav-logo-mark{ display:none !important; }
  .nav-logo-text{ height:42px !important; margin:0 !important; }
  .burger{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:rgba(28,26,21,.06); font-size:20px; color:#3a362c; }
  .mobile-menu{ display:block; position:fixed; top:66px; left:0; right:0; z-index:50; background:#faf8f3; border-bottom:1px solid rgba(28,26,21,.1); box-shadow:0 18px 40px rgba(60,50,20,.14); padding:10px 16px 18px; }
  .mobile-menu a{ display:block; padding:14px 10px; font-size:16px; font-weight:600; color:#3a362c; text-decoration:none; border-bottom:1px solid rgba(28,26,21,.06); }
  .mobile-menu a:last-child{ border-bottom:none; }
  .mobile-menu a[aria-current="page"]{ color:rgb(157,99,0); }
  .float-line{ right:16px; bottom:16px; padding:12px 16px 12px 13px; font-size:14px; }
  .sec{ padding-left:20px !important; padding-right:20px !important; }
  .feat-card{ padding:26px !important; }
  .grid2{ grid-template-columns:1fr !important; }
  .grid4{ grid-template-columns:1fr 1fr !important; }
  .grid5{ grid-template-columns:1fr 1fr !important; }
  .footer-cta-h{ font-size:34px !important; }
  .cta-sec{ padding-left:20px !important; padding-right:20px !important; }
  .site-footer{ padding-left:20px !important; padding-right:20px !important; }
  .h2{ font-size:32px !important; }
}