:root{
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#fff;
  --card:#f8fafc;
  --line:#e2e8f0;
  --shadow:0 10px 20px rgba(2,8,23,.06),0 2px 6px rgba(2,8,23,.04)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans TC,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
.container{max-width:1160px;margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line);z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand img{height:36px;width:auto;display:block}
.brand .brand-text{display:none}.brand.no-logo .brand-text{display:block}
.nav{display:flex;gap:6px}
.nav a{color:var(--ink);padding:10px 12px;border-radius:10px}
.nav a:hover{background:#f1f5f9}
.hamburger{display:none;cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.mobile-menu{display:none;flex-direction:column;gap:10px;padding:10px 0}
@media (max-width:820px){
  .nav{display:none}
  .hamburger{display:block}
  .mobile-menu.show{display:flex}
}

/* ---------- Hero / Carousel ---------- */
.hero{background:linear-gradient(180deg,#e0f2fe,transparent);padding:24px 0 8px}
.carousel{position:relative;overflow:hidden;border-radius:18px;background:#000;box-shadow:var(--shadow)}
.carousel .slides{display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.carousel .slide{min-width:100%;position:relative;color:#fff}
.carousel .slide img{width:100%;height:380px;object-fit:cover;display:block;opacity:.85}
.carousel .slide .caption{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.5);padding:12px 14px;border-radius:12px}

/* ---------- Grid / Cards ---------- */
.grid{display:grid;gap:16px}
.grid.columns-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid.columns-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.columns-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:8px 12px;border-radius:10px}
.btn:hover{background:var(--brand-600)}
.service-card .thumb{width:100%;height:160px;border-radius:14px;overflow:hidden;margin-bottom:10px;border:1px solid var(--line);background:#fff}
.service-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.clamp-3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px dashed var(--line);padding:10px 0;position:relative}
.faq-q{cursor:pointer;font-weight:700;padding-right:26px}
.faq-q::after{content:'▸';position:absolute;right:0;top:10px;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(90deg)}
.faq-a{display:none;padding-top:8px}
.faq-item.open .faq-a{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
.footer{margin-top:40px;border-top:1px solid var(--line);background:#f8fafc}
.footer .cols{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:16px;padding:24px 0}
@media (max-width:980px){.footer .cols{grid-template-columns:1fr}}
.footer .qr{display:flex;flex-direction:column;align-items:center;gap:8px}
.footer .qr img{width:140px;height:140px;border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.footer .qr .cap{font-size:14px;color:var(--muted)}
.partner{margin:24px 0}
.partner .banner{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.partner .banner img{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.partner .content h3{margin:0 0 4px}
.partner .content p{margin:0}

/* ---------- Drawer Menu (<=1024px) ---------- */
[hidden]{display:none!important}
.fab-menu,.float-menu,.float-menu-backdrop{display:none}
@media (max-width:1024px){
  .header .nav, .header .hamburger, .mobile-menu{display:none!important}

  .fab-menu{
    position:fixed;right:16px;bottom:20px;z-index:1100;
    width:56px;height:56px;border-radius:999px;border:none;
    background:#111;color:#fff;font-size:24px;line-height:56px;text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer;display:block;
  }
  .fab-menu:focus{outline:2px solid #6aa3ff;outline-offset:2px}

  .float-menu-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1099;
    opacity:0;pointer-events:none;transition:opacity .2s ease;display:block;
  }
  .float-menu-backdrop.show{opacity:1;pointer-events:auto}

  /* 右側抽屜 */
  .float-menu{
    position:fixed;top:0;right:0;bottom:0;left:auto;z-index:1101;
    width:min(82vw,420px);transform:translateX(100%);background:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.2);transition:transform .25s ease;
    display:flex;flex-direction:column;
  }
  .float-menu.show{transform:translateX(0)}
  .float-menu-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06)}
  .float-menu-title{font-size:16px;font-weight:600}
  .float-menu-close{background:transparent;border:none;font-size:22px;line-height:1;cursor:pointer}
  .float-menu-body{padding:8px 8px 16px;overflow:auto;-webkit-overflow-scrolling:touch}
  .float-menu-list a{display:block;padding:14px 12px;border-radius:10px;margin:6px 8px;background:#f6f7f8;color:#111;text-decoration:none}
  .float-menu-list a:active{background:#eceef1}
}
.body-lock{overflow:hidden}

/* ---------- Floating Social (右側，96x96滿版) ---------- */
.floating-social{
  position:fixed;
  right:max(12px, env(safe-area-inset-right));
  left:auto;
  top:40%;
  bottom:auto;
  transform:translateY(-50%);
  z-index:1200;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.floating-social a{
  pointer-events:auto;
  display:inline-flex;
  width:48px;height:48px;           /* 固定 64x64 */
  padding:0 !important;
  background:transparent !important; /* 移除白底 */
  box-shadow:none !important;        /* 移除陰影 */
  border-radius:0 !important;        /* 需要圓角可改例如 12px */
  align-items:center;justify-content:center;
  overflow:hidden;                    /* 多餘裁掉 */
}
.floating-social a:hover{transform:translateY(-1px) scale(1.02)}
.floating-social img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;        /* 滿版 */
}
@media (max-width:768px){
  .floating-social{right:max(8px, env(safe-area-inset-right))}
}

/* ---------- Back To Top（左下） ---------- */
.back-to-top{
  position:fixed;
  left:max(16px, env(safe-area-inset-left));
  right:auto;
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:1200;
  width:48px;height:48px;border-radius:999px;border:0;
  background:#111;color:#fff;font-size:13px;line-height:1;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.25);cursor:pointer
}
.back-to-top.show{display:inline-flex}
.back-to-top .caret{
  display:block;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid #fff;margin-bottom:2px
}
.back-to-top span{display:block;font-size:10px;opacity:.9}
/* ===== 覆蓋：把右側 4 顆懸浮按鈕往下 ===== */
.floating-social { 
  top: 55% !important;     /* 原本 40%，改成 65%：整排更靠下 */
  transform: translateY(-50%) !important;
}

@media (max-width: 768px) {
  .floating-social { 
    top: 55% !important;   /* 手機再往下，避免擋內容 */
  }
}
/* ========== 二層導覽（桌機） ========== */
.header .nav{display:flex;gap:12px;align-items:center}
.header .nav .nav-item{position:relative}
.header .nav .nav-item .top-link{padding:6px 8px;border-radius:8px;text-decoration:none;color:inherit}
.header .nav .nav-item .dropdown{
  position:absolute;left:0;top:calc(100% + 8px);min-width:220px;background:#fff;
  border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.16);
  padding:8px;display:none;z-index:2000;
}
.header .nav .nav-item:hover .dropdown{display:block}
.header .nav .dropdown a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:#111;white-space:nowrap}
.header .nav .dropdown a:hover{background:#f6f7f8}

/* ========== 手機抽屜第二層（沿用你的 float-menu） ========== */
.float-menu-list details{background:#f6f7f8;margin:6px 8px;border-radius:10px;overflow:hidden}
.float-menu-list details>summary{padding:14px 12px;cursor:pointer;font-weight:600;list-style:none}
.float-menu-list details>summary::-webkit-details-marker{display:none}
.float-menu-list details[open]>summary{background:#eceef1}
.float-menu-list .m-parent{display:block;margin:6px 12px;padding:10px 10px;background:#fff;border-radius:8px;text-decoration:none;color:#111}
.float-menu-list .m-sub{padding:6px 8px 12px}
.float-menu-list .m-sub a{display:block;padding:10px 10px;background:#fff;border-radius:8px;margin:6px 4px;text-decoration:none;color:#111}

/* === 桌機：下拉選單防抖 + 緩衝橋接 === */
.header .nav .nav-item { position: relative; }

/* 1) 子選單緊貼父項，不留縫隙；視覺距離用 margin-top */
.header .nav .nav-item .dropdown{
  top: 100% !important;          /* 原本 calc(100% + 8px) → 改成緊貼 */
  margin-top: 4px !important;    /* 視覺間距（2~6px 可自行微調） */
  display: none;
  z-index: 2000;
}

/* 2) 只要父項或子選單本身被 hover，皆保持展開 */
.header .nav .nav-item:hover .dropdown,
.header .nav .nav-item .dropdown:hover{
  display: block;
}

/* 3) 在父項與子選單之間建立一個「不可見橋接區」避免 hover 斷掉 */
.header .nav .nav-item.has-children::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;               /* 從父項底部開始 */
  height: 10px;            /* 橋接高度，可調 8~14px */
  z-index: 1;              /* 在 dropdown 下方即可 */
}

/* 4) 讓父項在展開時有輕微高亮（可選） */
.header .nav .nav-item.has-children:hover > .top-link{
  background: #f1f5f9;
  border-radius: 10px;
}
/* 控制 header 內 logo 尺寸 */
.header .brand img {
  width: 391px;
  height: 55px;
  object-fit: contain; /* 確保圖片不被裁切 */
}