:root{
  --gold:#F2B400;
  --teal:#009C9F;
  --ink:#0E2B2E;
  --ink-2:#0A2022;
  --ink-3:#0F1A1D;
  --muted:#6b7280;
  --bg:#f7fafc;
  --container:1240px;
  --r24:24px;
  --shadow:0 20px 45px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#0b1520;font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Buttons */
.btn{display:inline-block;padding:14px 22px;border-radius:14px;font-weight:800;letter-spacing:.4px;border:2px solid transparent;transition:.22s transform,.22s box-shadow,.22s background,.22s color}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 10px 22px rgba(0,156,159,.28)}
.btn-teal:hover{background:#00B0B3}
.btn-ghost{background:transparent;border-color:#fff;color:#fff}
.btn-white{background:#fff;color:#111;border-color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;color:var(--teal);font-size:12px;font-weight:900;box-shadow:0 10px 22px rgba(0,156,159,.14)}

.section{padding:96px 0}
.section-header{margin-bottom:36px}
.h2{font-size:44px;line-height:1.12;margin:0 0 10px;font-weight:900;letter-spacing:.5px}
.sub{color:var(--muted);font-size:16px}

/* ===== Header（桌机） ===== */
.header{
  position:sticky;top:0;z-index:999;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  /* 關鍵：允許子選單超出 Header */
  overflow:visible;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;overflow:visible}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--teal);font-size:20px}
.logo img{height:40px;width:auto}

.menu{display:flex;gap:6px;align-items:center;margin:0;padding:0;overflow:visible}
.menu>li{list-style:none;position:relative;padding-bottom:16px;overflow:visible} /* 重要：建立定位上下文並允許外溢 */
/* 顶层链接 */
.menu>li>a{display:block;padding:10px 14px;border-radius:10px;font-weight:800}
.menu>li>a:hover{background:rgba(0,156,159,.12)}
.menu .cta{margin-left:8px}

/* 二级子选单（无缝相连 + 下滑淡入） */
.submenu{
  --gap:16px;                            /* 要和 li 的 padding-bottom 一致 */
  position:absolute;left:0;top:calc(100% - var(--gap));
  min-width:220px;border-radius:14px;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 36px rgba(0,0,0,.25);
  padding:8px;
  opacity:0; transform:translateY(10px); pointer-events:none; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s .18s;
  z-index:2000;                          /* 重要：浮在 hero 圖之上 */
  overflow:visible;
}
.menu>li:hover>.submenu{
  opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s;
}
.submenu a{
  display:block;padding:12px 14px;border-radius:10px;font-weight:700;color:#e7f2f4;
}
.submenu a:hover{background:rgba(255,255,255,.06); color:#fff}

/* 右側項目的子選單從右對齊，避免出界被切 */
.menu>li:nth-last-child(-n+2)>.submenu{
  left:auto; right:0;
  transform-origin: top right;
}

/* Hamburger（手机） */
.burger{display:none;width:42px;height:42px;border:1px solid rgba(0,0,0,.08);border-radius:12px;align-items:center;justify-content:center;background:#fff}
.burger i{font-size:22px;color:#111}

/* ===== 左侧抽屉菜单（Mobile Drawer） ===== */
.drawer{
  position:fixed; top:0; left:0; height:100vh; width:84vw; max-width:360px;
  background:#0f1115; color:#e6f0f3; z-index:1001;
  transform:translateX(-100%); transition:transform .35s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px}
.drawer-logo img{height:40px}
.drawer-close{width:40px;height:40px;border-radius:12px;border:0;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:20px}
.drawer-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 14px 24px}
.drawer-search{position:relative;margin:8px 0 16px}
.drawer-search input{width:100%;height:40px;border-radius:999px;border:1px solid #2a2f36;background:#14181f;color:#fff;padding:0 40px 0 14px;outline:none}
.drawer-search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8aa;font-size:18px}
.menu-list{list-style:none;margin:0;padding:4px 0}
.menu-list > li{margin:2px 0}
.menu-list .link{display:block;color:#fff;font-weight:800;padding:14px 6px 14px 8px;border-radius:10px}
.menu-list .link:hover{background:#161b22}
.acc{width:100%;text-align:left;background:transparent;border:0;color:#fff;font-weight:800;padding:14px 6px 14px 8px;border-radius:10px;display:flex;justify-content:space-between;align-items:center}
.acc i{transition:transform .25s ease}
.acc[aria-expanded="true"] i{transform:rotate(180deg)}
.acc:hover{background:#161b22}
.sublist{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#0c1016;border-left:2px solid var(--teal);border-radius:10px;margin:4px 0 10px 2px}
.sublist a{display:block;padding:12px 12px 12px 18px;color:#cfe3ea;position:relative}
.sublist a:before{content:"";position:absolute;left:10px;top:50%;width:6px;height:2px;background:#2aefef;transform:translateY(-50%)}
.drawer-social{background:var(--teal);padding:12px;display:flex;gap:12px;justify-content:center}
.drawer-social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-size:20px}
.drawer-social a:hover{background:rgba(255,255,255,.28)}
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;opacity:0;transition:opacity .25s ease;pointer-events:none}
.drawer-mask.show{opacity:1;pointer-events:auto}
body.nav-lock{overflow:hidden;touch-action:none}

/* Hero */
.hero{position:relative}
.swiper{height:86vh;min-height:520px}
.swiper-slide{position:relative}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25))}
.hero-cap{position:absolute;left:8%;bottom:12%;max-width:760px;color:#fff}
.hero-cap h1{margin:0 0 10px;font-size:62px;line-height:1.06;font-weight:900;text-shadow:0 16px 28px rgba(0,0,0,.38)}
.hero-cap p{margin:0 0 18px;font-size:18px}

/* Services */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.svc{background:#fff;border-radius:var(--r24);padding:26px;box-shadow:var(--shadow);text-align:center}
.svc .ico{width:84px;height:84px;border-radius:22px;display:grid;place-items:center;margin:0 auto 12px;background:#F1FBFB;color:var(--teal)}
.svc h3{margin:10px 0 6px;font-size:20px}
.svc p{margin:0 0 12px;color:var(--muted);font-size:14px;min-height:40px}
.svc .pill{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--teal);color:#fff;font-weight:800}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{position:relative;overflow:hidden;border-radius:26px;background:#000;box-shadow:var(--shadow)}
.proj img{width:100%;height:620px;object-fit:cover;transition:transform .6s ease}
.proj:hover img{transform:scale(1.06)}
.meta{position:absolute;left:18px;bottom:18px;color:#fff;max-width:86%}
.meta .panel{display:inline-block;background:rgba(0,0,0,.48);backdrop-filter:blur(2px);padding:10px 12px;border-radius:14px}
.meta h4{margin:6px 0 0 0;font-size:24px}
.meta .tag{font-size:13px;opacity:.95;font-size: 18px;font-weight: 900;letter-spacing: .2px;}
.meta .desc{
  display:inline-block;margin-top:8px;font-size:13.5px;line-height:1.65;font-weight:500;color:#fff;opacity:.95;
}

/* Advantage */
.adv-wrap{background:var(--teal);color:#fff;padding:80px 0}
.adv-title{font-weight:900;letter-spacing:.6px;text-align:center;font-size:40px;margin:0 0 12px}
.adv-subline{width:86%;max-width:980px;margin:8px auto 36px;border-top:1px solid rgba(255,255,255,.3)}
.adv-grid{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.adv-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:26px;padding:28px;text-align:center;box-shadow:0 20px 45px rgba(0,0,0,.18)}
.adv-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:800}
.adv-crest{margin:12px auto 10px;width:120px;height:120px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.adv-card h3{margin:10px 0 6px;font-size:22px}
.adv-card p{margin:0;color:#E6FFFB;opacity:.92}

/* Partners */
.partners-wrap{background:#eef5f6;padding:72px 0}
.partners-head{max-width:980px;margin:0 auto 28px;text-align:center;padding:0 24px}
.partners-head h2{margin:0 0 10px;font-size:40px;line-height:1.1;font-weight:900;letter-spacing:.6px;color:#0f172a}
.partners-head p{margin:0;color:#6b7280}
.pgrid{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.pcard{background:#fff;border-radius:18px;min-height:120px;box-shadow:0 10px 22px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;padding:18px;border:1px solid #e5eef0;overflow:hidden}
.pcard img{max-width:90%;max-height:70px;object-fit:contain;transition:transform .35s cubic-bezier(.22,.61,.36,1), filter .2s;filter:saturate(.92) contrast(.98)}
.pcard:hover img{transform:scale(1.06);filter:saturate(1)}

/* Footer */
.footer{background:#0f172a;color:#cbd5e1}
.footer a{color:#e2e8f0}
.footer h5{margin:0 0 10px;font-size:16px;color:#fff}
.footer .container{padding:0 40px}
.footer-card{max-width:1400px;margin:0 auto;padding:40px 32px 28px;border-radius:20px}
.footer-top{display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:flex-start}
.footer-lines p{margin:0 0 10px;line-height:1.9;color:#dbe4ee;font-size:15px}
.footer-lines p:last-child{margin-bottom:0}
.footer-social{margin-top:8px}
.social{display:flex;flex-wrap:wrap;gap:12px}
.social a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:22px}
.social a:hover{background:rgba(255,255,255,.18)}
.copy{border-top:1px solid rgba(255,255,255,.08);margin-top:32px;padding-top:18px;font-size:13px;color:#94a3b8}

/* RWD */
@media (max-width:1200px){ .projects{grid-template-columns:repeat(2,1fr)} .services{grid-template-columns:repeat(3,1fr)} .pgrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){ .menu{display:none} .burger{display:flex} .hero-cap h1{font-size:42px} .services{grid-template-columns:repeat(2,1fr)} .adv-grid{grid-template-columns:1fr} .pgrid{grid-template-columns:repeat(3,1fr)} .footer-top{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .swiper{height:78vh} .projects{grid-template-columns:1fr} .services{grid-template-columns:1fr} .pgrid{grid-template-columns:repeat(2,1fr)} }

/* Reveal + Top */
.reveal{opacity:0;transform:translateY(26px);transition:.8s ease;will-change:transform,opacity}
.reveal.in{opacity:1;transform:none}
#toTop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:12px;background:var(--teal);color:#fff;border:none;display:none;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,156,159,.35);cursor:pointer;z-index:950}
#toTop i{font-size:22px}

/* 当前选中的主菜单按钮（保持实底） */
.menu > li > a.cta,
.menu > li > a.is-active{
  background: var(--teal) !important;
  color:#fff !important;
}
.menu > li > a.cta:hover,
.menu > li > a.is-active:hover{
  background: var(--teal) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:0 10px 22px rgba(0,156,159,.28);
}
.menu .cta.btn-teal:hover{ 
  background: var(--teal) !important;
  transform:none !important;
}

/* 微信二维码弹窗 */
.img-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.img-modal.show{display:flex}
.img-modal__mask{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.img-modal__dialog{
  position:relative;background:#fff;border-radius:16px;padding:18px 18px 12px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);max-width:92vw;max-height:90vh;
  display:flex;flex-direction:column;align-items:center;animation:modalIn .2s ease
}
.img-modal__title{margin:6px 0 12px;font-weight:900;color:#0f172a}
.img-modal__dialog img{max-width:70vw;max-height:70vh;object-fit:contain;border-radius:8px}
.img-modal__close{
  position:absolute;top:8px;right:8px;border:none;width:34px;height:34px;border-radius:10px;
  background:rgba(0,0,0,.06);display:grid;place-items:center;font-size:20px;cursor:pointer
}
@media (max-width:560px){
  .img-modal__dialog img{max-width:86vw;max-height:66vh}
}
@keyframes modalIn{from{transform:translateY(8px);opacity:.5}to{transform:none;opacity:1}}

/* Mobile 折疊清單動效（保留） */
.sublist{ overflow:hidden; max-height:0; transition:max-height .28s ease; } 

/* 先把 reveal 預設設為可見，避免 JS 爆掉時整頁透明 */
.reveal{opacity:1;transform:none}

/* 只有在 <html> 上被加上 .js-ready 的情況，才啟用滑入效果 */
.js-ready .reveal{opacity:0;transform:translateY(26px);transition:.8s ease;will-change:transform,opacity}
.js-ready .reveal.in,.js-ready .reveal.is-visible{opacity:1;transform:none}

/* 強制保險：偵測到微信或不支援 IO，就直接顯示 */
.wx .reveal,
.no-io .reveal{opacity:1!important;transform:none!important}

/* 基礎樣式保持 */
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; }
.col-info { flex: 1; min-width: 300px; }
.col-social { min-width: 280px; } /* 稍微加寬以容納 3 個碼 */

@media (max-width: 768px) {
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .col-info { width: 100%; margin-bottom: 30px; }
  .qr-matrix { justify-content: center; }
  .footer-social .social { justify-content: center; display: flex; }
}

/* --- 彈窗縮放關鍵修正 --- */
.img-modal { 
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; 
  opacity: 0; visibility: hidden; transition: 0.3s; padding: 20px; 
}
.img-modal.show { opacity: 1; visibility: visible; }
.img-modal__mask { position: absolute; inset: 0; background: rgba(0,0,0,0.8); }

.img-modal__dialog { 
  position: relative; background: #fff; padding: 30px 20px 20px; border-radius: 12px; 
  width: 100%; max-width: 360px; /* 限制寬度 */
  max-height: 90vh; display: flex; flex-direction: column; align-items: center; 
}

.img-modal img { 
  width: 100%; height: auto; 
  max-height: calc(90vh - 120px); /* 關鍵：確保圖片不超過白色框高度 */
  object-fit: contain; border-radius: 4px; 
}

.img-modal__close { position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; border: none; background: none; }
.img-modal__title { margin-bottom: 15px; font-size: 18px; font-weight: bold; }

/* --- 友鏈彈窗容器優化 --- */
.friend-links-popup {
  position: absolute; 
  bottom: 100%; 
  left: 50%; 
  transform: translateX(-50%) translateY(15px);
  margin-bottom: 12px; 
  background-color: #ffffff; 
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* 加深一點陰影讓白底更立體 */
  border-radius: 8px; /* 稍微圓潤一點 */
  padding: 12px 0;    /* 增加上下留白空隙 */
  min-width: 150px;   /* 稍微加寬，避免文字太擠 */
  text-align: center;
  opacity: 0; 
  visibility: hidden; 
  transition: all 0.3s ease; 
  z-index: 100;
}

.friend-links-popup.is-open { 
  opacity: 1; 
  visibility: visible; 
  transform: translateX(-50%) translateY(0); 
}

/* --- 獨立設定友鏈文字的樣式 --- */
.friend-links-popup a {
  display: block;             /* 讓每個連結佔滿一行，整齊排列 */
  padding: 10px 16px;         /* 增加點擊範圍，並與外框左右留出空隙 */
  color: #334155 !important;  /* 改為深石板灰，解決原本字太灰看不清的問題 */
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- 滑鼠移入的互動效果 --- */
.friend-links-popup a:hover {
  background-color: #f1fbfb;  /* 淡淡的主題色背景 */
  color: #009C9F !important;  /* 文字變成你的網站主題色 (Teal) */
}