/* 公司介紹區底色（右欄） */
.intro-col {
  background: #eef4fb;
  border-radius: 16px;
  padding: clamp(14px, 2.6vh, 26px) clamp(14px, 2.2vw, 28px);
  text-align: center;
}
.brand {
  font-size: clamp(19px, 3.7vh, 27px); font-weight: 900; color: #1a2b3c;
  line-height: 1.15; letter-spacing: .01em;
  padding-bottom: clamp(7px, 1.6vh, 16px);
}
.en2 {font-size: clamp(12px, 2vh, 14.5px); font-weight: 700; color: #5a6b7a; line-height: 1.15;}
.brand .co + .co {margin-top: .35em;}
.brand .en2 {display: block; margin-top: -.2em;}
.cooperate {
  padding: clamp(7px, 1.5vh, 12px) 20px;
  background: linear-gradient(90deg, #06c755a8, #06c75533);
  border: 1px dashed #06c755; border-radius: 12px;
  font-size: clamp(14px, 2.5vh, 18px); font-weight: 700; color: #04782f; display: inline-block;
}
.coop-line { margin-top: clamp(6px, 1.2vh, 12px); font-size: clamp(12px, 1.85vh, 13.5px); line-height: 1.75; color: #3c4a58; overflow-wrap: anywhere; text-align: center; }
.contact {
  margin-top: clamp(8px, 1.9vh, 15px); font-size: clamp(13px, 2.2vh, 15px);
  line-height: clamp(1.75, 3.1vh, 2.05); color: #3c4a58; overflow-wrap: anywhere;
}
.contact a {color: #1a6feb; text-decoration: none; font-weight: 600;}
.contact a:hover {text-decoration: underline;}

/* 各 breakpoint */
@media (orientation: portrait) and (min-width: 660px) {
  .brand {font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; padding-bottom: 18px;}
  .en2 {font-size: 17px; margin-top: 0;}
  .cooperate {font-size: clamp(18px, 2.1vw, 23px); padding: 14px 28px; border-radius: 14px; margin-top: 6px;}
  .coop-line {margin-top: 14px; font-size: 16px; line-height: 1.85;}
  .contact {margin-top: 20px; font-size: 17px; line-height: 2.05;}
}
@media (min-width: 1024px) {
  .brand {font-size: clamp(30px, 2.4vw, 40px); line-height: 1.15; padding-bottom: 22px;}
  .en2 {font-size: clamp(16px, 1.3vw, 21px); margin-top: 0;}
  .cooperate {font-size: clamp(20px, 1.6vw, 27px); padding: 15px 30px; border-radius: 15px; margin-top: 8px;}
  .coop-line {margin-top: 18px; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.9; overflow-wrap: break-word;}
  .contact {margin-top: 26px; font-size: clamp(17px, 1.2vw, 20px); line-height: 2.1; overflow-wrap: break-word;}
}
@media (min-width: 1600px) {
  .brand {font-size: 44px; line-height: 1.15;}
  .en2 {font-size: 23px;}
  .cooperate {font-size: 29px; padding: 17px 34px;}
  .coop-line {font-size: 21px; margin-top: 22px;}
  .contact {font-size: 22px; margin-top: 32px;}
}

/* ===== 動態特效（尊重「減少動態效果」設定）===== */
@keyframes fx-up {from {opacity: 0; transform: translateY(18px);} to {opacity: 1; transform: none;}}
@keyframes fx-bg {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}
@keyframes fx-shine {0% {left: -60%;} 55%, 100% {left: 130%;}}
@keyframes fx-pulse {0%, 100% {box-shadow: 0 0 0 0 rgba(6,199,85,.35);} 50% {box-shadow: 0 0 0 9px rgba(6,199,85,0);}}
html body {background-size: 220% 220%; animation: fx-bg 22s ease-in-out infinite;}
.card {animation: fx-up .7s cubic-bezier(.2,.7,.2,1) both;}
.brand .co {animation: fx-up .7s cubic-bezier(.2,.7,.2,1) both; transition: transform .25s ease, color .25s ease;}
.brand .co:nth-child(1) {animation-delay: .15s;}
.brand .co:nth-child(2) {animation-delay: .3s;}
.brand .co:nth-child(3) {animation-delay: .45s;}
.brand .co:hover {transform: scale(1.04); color: #04782f;}
.cooperate {position: relative; overflow: hidden; animation: fx-up .7s .6s cubic-bezier(.2,.7,.2,1) both, fx-pulse 2.8s 1.6s ease-out infinite;}
.cooperate::after {content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg);
  animation: fx-shine 3.6s 1.2s ease-in-out infinite;}
.coop-line, .contact {animation: fx-up .7s .75s cubic-bezier(.2,.7,.2,1) both;}
.qr-col {animation: fx-up .8s .3s cubic-bezier(.2,.7,.2,1) both;}
.qr-box {transition: transform .25s ease;}
.qr-box:hover {transform: translateY(-6px) scale(1.05);}
.qr-box img {transition: box-shadow .25s ease, border-color .25s ease;}
.qr-box:hover img {box-shadow: 0 10px 24px rgba(6,199,85,.35); border-color: #06c755;}
.qr-link {transition: transform .2s ease, background .2s ease, box-shadow .2s ease;}
.qr-link:hover {transform: translateY(-2px); box-shadow: 0 6px 14px rgba(255,152,0,.45);}
@media (prefers-reduced-motion: reduce) {
  html body, .card, .brand .co, .cooperate, .cooperate::after, .coop-line, .contact, .qr-col {animation: none !important;}
  .brand .co, .qr-box, .qr-link {transition: none;}
}

/* ===== 中英文切換：固定在畫面最上方右側 ===== */
html body .lang-toggle {position: fixed; top: 10px; right: 14px; z-index: 100; box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: fx-up .6s .8s cubic-bezier(.2,.7,.2,1) both;}
html body .lang-toggle a, html body .lang-toggle .on {transition: background .2s ease, color .2s ease;}
html body .card {animation-fill-mode: backwards;}
@media (min-width: 1024px) {html body .lang-toggle {top: 16px; right: 24px;}}
@media (prefers-reduced-motion: reduce) {html body .lang-toggle {animation: none !important;}}

/* ===== 專業配色主題：深藍＋金，LINE 綠只留給 LINE ===== */
@keyframes fx-pulse {0%, 100% {box-shadow: 0 0 0 0 rgba(184,138,62,.4);} 50% {box-shadow: 0 0 0 9px rgba(184,138,62,0);}}
html body {background-image: linear-gradient(135deg, #0a1727 0%, #14283f 40%, #23445f 70%, #14283f 100%);}
html body .card {border-top: 4px solid #b88a3e; box-shadow: 0 24px 70px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.6) inset;}
html body .intro-col {background: #fbf9f4; border: 1px solid #ece4d2;}
html body .brand {color: #14283f;}
html body .brand .co {position: relative;}
html body .brand .co:hover {color: #9a6f24;}
html body .en2 {color: #5d6d7d; letter-spacing: .02em;}
html body .cooperate {background: linear-gradient(135deg, #14283f, #27496a); color: #f3e3bd; border: 1px solid #b88a3e; box-shadow: 0 6px 16px rgba(20,40,63,.28);}
html body .coop-line {color: #3a4856;}
html body .contact {color: #2a3947;}
html body .contact a {color: #1b4b82;}
.ic {display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .38em; color: #b88a3e;}
.ic svg {display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
html body .qr-col {background: #f1f8f4; border: 1px solid #d6e9dd;}
html body .qr-top {color: #0a6b2d; box-shadow: 0 1px 4px rgba(10,107,45,.1);}
html body .qr-bot {background: #fff6e0; color: #6e4608; border: 1px solid #efd9a6;}
html body .qr-link {background: #06c755; color: #fff; padding: 7px 18px; font-size: clamp(12px, 1.8vh, 14px); box-shadow: 0 3px 8px rgba(6,199,85,.3);}
html body .qr-link:hover {background: #05b24b; color: #fff; box-shadow: 0 7px 16px rgba(6,199,85,.4);}
html body .lang-toggle {background: rgba(255,255,255,.95);}
html body .lang-toggle .on {background: #14283f; color: #f3e3bd;}
html body footer {color: #5f6f7e;}

/* ===== 地圖導航按鈕 ===== */
.map-btn {display: inline-flex; align-items: center; gap: .4em; margin-top: .55em; padding: .42em 1.05em; border-radius: 999px; background: #14283f; color: #f3e3bd !important; font-size: .86em; font-weight: 700; text-decoration: none !important; border: 1px solid #b88a3e; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
.map-btn svg {width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.map-btn:hover {background: #27496a; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,40,63,.3);}

/* ===== 進階特效：流動光球背景、金色光點、聚光燈、轉場 ===== */
@keyframes fx-float {0%, 100% {transform: translate3d(0,0,0) scale(1);} 33% {transform: translate3d(5vw,-7vh,0) scale(1.15);} 66% {transform: translate3d(-4vw,5vh,0) scale(.92);}}
@keyframes fx-rise {0% {transform: translateY(8vh) scale(.6); opacity: 0;} 15% {opacity: .9;} 85% {opacity: .7;} 100% {transform: translateY(-112vh) scale(1.1); opacity: 0;}}
@keyframes fx-out {to {opacity: 0; transform: translateY(-14px) scale(.985);}}
@keyframes fx-wipe-in {from {transform: translateX(0);} to {transform: translateX(-101%);}}
@keyframes fx-wipe-out {from {transform: translateX(101%);} to {transform: translateX(0);}}
@keyframes fx-bob {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-5px);}}
@keyframes fx-gold {0% {background-position: 0% 50%;} 100% {background-position: 200% 50%;}}
.bg-fx {position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;}
.bg-fx i {position: absolute; border-radius: 50%; filter: blur(48px); will-change: transform; animation: fx-float 20s ease-in-out infinite;}
.bg-fx .o1 {width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: radial-gradient(circle, rgba(184,138,62,.50), transparent 66%);}
.bg-fx .o2 {width: 40vmax; height: 40vmax; right: -12vmax; top: 8vh; background: radial-gradient(circle, rgba(58,118,178,.50), transparent 66%); animation-duration: 26s; animation-delay: -6s;}
.bg-fx .o3 {width: 34vmax; height: 34vmax; left: 18vw; bottom: -18vmax; background: radial-gradient(circle, rgba(6,199,85,.30), transparent 66%); animation-duration: 30s; animation-delay: -12s;}
.bg-fx .o4 {width: 26vmax; height: 26vmax; right: 10vw; bottom: -10vmax; background: radial-gradient(circle, rgba(184,138,62,.40), transparent 66%); animation-duration: 24s; animation-delay: -3s;}
.bg-fx .o5 {width: 22vmax; height: 22vmax; left: 38vw; top: -10vmax; background: radial-gradient(circle, rgba(120,170,230,.36), transparent 66%); animation-duration: 28s; animation-delay: -9s;}
.bg-fx .o6 {width: 18vmax; height: 18vmax; left: -6vmax; bottom: 10vh; background: radial-gradient(circle, rgba(243,227,189,.28), transparent 66%); animation-duration: 22s; animation-delay: -15s;}
.bg-fx::after {content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);}
.bg-fx .spark {position: absolute; inset: 0;}
.bg-fx .spark b {position: absolute; bottom: -4vh; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: #f3e3bd; box-shadow: 0 0 10px 2px rgba(243,227,189,.7); opacity: 0; animation: fx-rise 14s linear infinite;}
html body .card {position: relative; z-index: 1; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; --mx: 50%; --my: 0%;}
html body .card::before {content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(184,138,62,.14), transparent 62%);}
html body .card > * {position: relative; z-index: 1;}
html body .lang-toggle {position: fixed; z-index: 150;}
html body .brand .co {background: linear-gradient(100deg, #14283f 0%, #14283f 40%, #b88a3e 50%, #14283f 60%, #14283f 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fx-up .7s cubic-bezier(.2,.7,.2,1) both, fx-gold 7s 2s linear infinite;}
html body .brand .co .en2 {-webkit-text-fill-color: #5d6d7d;}
html body .brand .co:hover {-webkit-text-fill-color: transparent;}
html body .qr-box:nth-child(1) {animation: fx-bob 5s ease-in-out infinite;}
html body .qr-box:nth-child(2) {animation: fx-bob 5s -2.5s ease-in-out infinite;}
html body .qr-box:hover {animation-play-state: paused;}
/* 轉場：進頁幕簾滑開，換頁幕簾滑入 */
html body::after {content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; background: linear-gradient(100deg, #0a1727 0%, #14283f 70%, #b88a3e 100%); transform: translateX(-101%); animation: fx-wipe-in .8s .05s cubic-bezier(.7,0,.2,1) backwards;}
html body.leaving::after {animation: fx-wipe-out .42s cubic-bezier(.7,0,.3,1) forwards;}
html body.leaving .card {animation: fx-out .38s ease forwards;}
@media (max-width: 640px) {.bg-fx .spark b:nth-child(n+14) {display: none;} .bg-fx i {filter: blur(34px);}}
@media (prefers-reduced-motion: reduce) {
  .bg-fx i, .bg-fx .spark b, html body .qr-box, html body::after, html body .brand .co {animation: none !important;}
  html body .card {transform: none !important;}
  .bg-fx .spark {display: none;}
  html body .brand .co {background: none; -webkit-text-fill-color: #14283f;}
}

/* ===== 科技感升級：玻璃擬態、霓虹流光邊框、粒子網路、游標光暈、字體 ===== */
@property --ang {syntax: '<angle>'; inherits: false; initial-value: 0deg;}
@keyframes fx-spin {to {--ang: 360deg;}}
@keyframes fx-breathe {0%, 100% {opacity: .55;} 50% {opacity: 1;}}
html body {font-family: "Space Grotesk", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif; background-image: linear-gradient(135deg, #060f1c 0%, #0f2238 38%, #17385a 68%, #0f2238 100%);}
.bg-net {position: absolute; inset: 0;}
.bg-fx .spark {display: none;}
.cursor-glow {position: fixed; left: 0; top: 0; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(95,211,255,.22), rgba(95,211,255,.06) 45%, transparent 70%); will-change: transform;}
/* 玻璃擬態卡片 */
html body .card {background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(244,248,252,.9)); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border-top: 0; border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(95,211,255,.12), 0 0 70px rgba(95,211,255,.10);}
html body .intro-col {background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(20,40,63,.06);}
html body .qr-col {background: rgba(236,249,242,.62); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(6,199,85,.07);}
/* 霓虹流光邊框 */
html body .card::after {content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), transparent 0deg 70deg, rgba(184,138,62,.95) 110deg, rgba(95,211,255,.95) 160deg, rgba(184,138,62,.95) 210deg, transparent 250deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fx-spin 7s linear infinite; filter: drop-shadow(0 0 6px rgba(95,211,255,.7));}
/* 公司名稱：英文字改科技字體 */
html body .en2 {font-family: "Space Grotesk", "Noto Sans TC", sans-serif; letter-spacing: .06em; text-transform: none;}
html body .brand {font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;}
/* 營業時間標籤 */
.hours {display: inline-flex; align-items: center; gap: .1em; margin-top: clamp(8px, 1.4vh, 14px); padding: .35em .95em; border-radius: 999px; font-size: clamp(12px, 1.7vh, 14px); font-weight: 700; color: #14283f; background: rgba(95,211,255,.14); border: 1px solid rgba(95,211,255,.5);}
.hours .ic {color: #1f93b8; margin-right: .4em;}
/* 按鈕：霓虹光暈＋磁吸位移 */
html body .qr-link, html body .map-btn, html body .cooperate, html body .lang-toggle a {transition: transform .2s ease, background .2s ease, box-shadow .25s ease, translate .18s ease-out;}
html body .cooperate {box-shadow: 0 0 0 1px rgba(184,138,62,.85), 0 8px 22px rgba(20,40,63,.35), 0 0 26px rgba(95,211,255,.32);}
html body .map-btn {box-shadow: 0 0 0 0 rgba(95,211,255,0);}
html body .map-btn:hover {box-shadow: 0 0 22px rgba(95,211,255,.55), 0 6px 14px rgba(20,40,63,.3);}
html body .qr-link:hover {box-shadow: 0 0 20px rgba(6,199,85,.6), 0 7px 16px rgba(6,199,85,.4);}
html body .lang-toggle {box-shadow: 0 4px 18px rgba(0,0,0,.3), 0 0 0 1px rgba(95,211,255,.35);}
/* QR 外框：呼吸光 */
html body .qr-box img {box-shadow: 0 0 0 1px rgba(6,199,85,.25), 0 6px 16px rgba(6,199,85,.12);}
/* 數字／聯絡資訊用科技字體 */
html body .contact, html body .contact a, html body .qr-box .s {font-family: "Space Grotesk", "Noto Sans TC", sans-serif; letter-spacing: .02em;}
@media (max-width: 640px) {.cursor-glow {display: none;} html body .card {-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);}}
@media (prefers-reduced-motion: reduce) {html body .card::after {animation: none !important;} .cursor-glow {display: none;}}
html body .brand {font-weight: 700;}
html body .brand .co {letter-spacing: .03em;}