/* --- 基礎變數與設定 --- */
:root {
    --brand-blue: #2a3843;  
    --brand-orange: #eb9621; 
    --gray: #777; 
    --light: #f6f5f1; 
    --line: #dddcd7; 
    --max: 1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--brand-blue);background:#fff;font-family:Inter,"Noto Sans HK",Arial,sans-serif;line-height:1.7; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a{text-decoration:none;color:inherit}
/* 加入防圖片長按與右鍵選取 */
img{display:block;width:100%; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: none;}
.container{width:min(var(--max),calc(100% - 44px));margin:auto}

/* --- 雙語切換核心 CSS --- */
body.lang-en .zh { display: none !important; }
body.lang-zh .en { display: none !important; }

/* --- 導覽列 --- */
.topbar{background:#ffffff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.06);}
.nav{min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* 修正 Logo 與 Banner 邊緣對齊問題 (抵銷圖片自帶的透明邊距) */
.brand img{width:160px; height: auto; transform: translateX(-8px);}
.navlinks{display:flex;align-items:center;gap:15px; margin-left: auto;}
.navlinks a{padding:10px 14px;font-size:13px;font-weight:700;color:var(--brand-blue); opacity: 0.8; transition: all 0.3s;}
.navlinks a:hover{opacity: 1; color: var(--brand-orange);}
.navbtn-wrapper { margin-left: 10px; display: flex; align-items: center; gap: 12px;}
.navbtn{border:2px solid var(--brand-orange); background: var(--brand-orange); color:#ffffff!important; border-radius: 4px; transition: all 0.3s;}
.navbtn:hover {background: transparent; color: var(--brand-orange) !important;}
.right-actions { display: flex; align-items: center; gap: 12px; }
.menu{display:none;border:0;background:none;font-size:26px; cursor: pointer; color: var(--brand-blue); padding: 0;}
.lang-toggle { background: transparent; border: 1px solid var(--line); color: var(--brand-blue); padding: 8px 12px; border-radius: 4px; font-weight: 700; font-size: 12px; cursor: pointer; transition: 0.3s; font-family: inherit; line-height: 1;}
.lang-toggle:hover { border-color: var(--brand-orange); color: var(--brand-orange); }

/* --- 首頁輪播圖 (Hero Slider) --- */
.slider-container { position: relative; width: 100%; height: 80vh; min-height: 500px; overflow: hidden; background: var(--brand-blue);}
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; display: flex; align-items: center; background-size: cover; background-position: center; z-index: 1;}
.slide.active { opacity: 1; z-index: 2; }
/* 加回遮罩，避免文字與背景融為一體 */
.slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(30, 40, 48, 0.9) 0%, rgba(30, 40, 48, 0.5) 50%, rgba(0,0,0,0) 100%); z-index: 1; pointer-events: none;}
.slide-inner { width: 90%; max-width: 1400px; margin: 0 auto; position: relative; z-index: 2;}

/* 修正文字模糊問題 (移除 translateZ，加入 will-change 與陰影) */
.slide-content { 
    color: #fff; max-width: 750px; transform: translateY(20px); 
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; opacity: 0; text-align: left; position: relative; z-index: 2;
}
.slide.active .slide-content { transform: translateY(0); opacity: 1; backface-visibility: hidden; will-change: transform, opacity; }
.slide-content h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.15; letter-spacing: 1px; font-weight: 900; color: var(--brand-orange); margin: 0 0 20px; text-transform: uppercase; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.slide-content p { color: #f8f9fa; font-size: 17px; max-width: 600px; font-weight: 500; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); color: #fff; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 10; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;}
.slider-btn:hover { background: var(--brand-orange); color: #fff; }
.slider-btn.prev { left: 30px; }
.slider-btn.next { right: 30px; }
.slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10;}
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: 0.3s;}
.dot.active, .dot:hover { background: var(--brand-orange); transform: scale(1.2);}

/* --- 關於我們與 4步線性流程圖 (Why Us & Workflow) --- */
.about-strip{background: var(--light); padding:90px 0}
.about-header { text-align: center; max-width: 800px; margin: 0 auto 60px;}
.eyebrow{font-size:11px;color:var(--brand-orange);font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.about-header h2{font-size:clamp(30px,4vw,40px);line-height:1.2;margin:15px 0 20px; color: var(--brand-blue);}
.about-header p{font-size:15px;color:#6d7478; line-height: 1.8;}
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.workflow-step { position: relative; padding: 0 15px;}
.workflow-icon { width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--brand-orange); box-shadow: 0 8px 20px rgba(0,0,0,0.04); position: relative; z-index: 2; border: 1px solid var(--line);}
.workflow-icon svg { width: 28px; height: 28px; stroke-width: 1.5; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.workflow-step h4 { color: var(--brand-blue); font-size: 16px; margin: 0 0 10px; font-weight: 800;}
.workflow-step p { font-size: 13.5px; color: #70777b; margin: 0; line-height: 1.6;}
@media (min-width: 901px) {
    .workflow-step:not(:last-child)::after { content: ''; position: absolute; top: 33px; right: -50%; width: 100%; height: 1px; border-top: 2px dashed #d1d5d8; z-index: 1;}
}

/* --- 我們的服務 (Services) --- */
.section{padding:86px 0}
.section-title{text-align:center;margin-bottom:46px}
.section-title h2{font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 10px; color: var(--brand-blue);}
.section-title p{margin:auto;max-width:650px;color:#777;font-size:15px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service{border:1px solid var(--line);background:#fff;transition:.25s; display: flex; flex-direction: column; padding: 40px 25px 30px;}
.service:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(42, 56, 67,.08)}
.service-icon { width: 46px; height: 46px; margin: 0 auto 20px; color: var(--brand-orange); transition: transform 0.4s ease;}
.service-icon svg { width: 100%; height: 100%; stroke-width: 1.5; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.service:hover .service-icon { transform: scale(1.15) translateY(-3px); }
.service-body{text-align:center}
.service-no{font-size:10px;letter-spacing:.16em;color:var(--gray);font-weight:800; margin-bottom: 8px;}
.service h3{font-size:19px;margin:0 0 10px; color: var(--brand-blue);}
.service p{font-size:13.5px;color:#70777b;margin:0; line-height: 1.6;}

/* --- 精選概念作品 (Portfolio) --- */
.portfolio-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px;}
.portfolio-menu button { background: transparent; border: 1px solid var(--line); padding: 8px 22px; border-radius: 30px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--brand-blue); cursor: pointer; transition: all 0.3s ease;}
.portfolio-menu button:hover, .portfolio-menu button.active { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff;}
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.portfolio-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; border-radius: 4px; display: block;}
.portfolio-item.hide { display: none;}
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}
.portfolio-item:hover img { transform: scale(1.08);}
.portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(42, 56, 67, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s ease;}
.portfolio-item:hover .portfolio-overlay { opacity: 1;}

.overlay-text { text-align: center; transform: translateY(15px); transition: transform 0.4s ease; padding: 0 15px;}
.portfolio-item:hover .overlay-text { transform: translateY(0);}
.overlay-text h4 { color: var(--brand-orange); font-size: 20px; font-weight: 800; margin: 0;}

/* --- 聯絡表單區塊 (Contact & FAQ) --- */
.contact-section { padding: 86px 0; border-top: 1px solid var(--line); }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 20px; }
.faq-container h3 { font-size: 24px; color: var(--brand-blue); margin: 0 0 25px; line-height: 1.2; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-size: 15px; font-weight: 700; color: var(--brand-blue); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s;}
.faq-question:hover { color: var(--brand-orange); }
.faq-icon { font-size: 22px; font-weight: 400; transition: transform 0.3s; color: var(--brand-orange); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p { margin: 0 0 18px 0; font-size: 14.5px; color: #6d7478; line-height: 1.6;}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-item.active .faq-answer { max-height: 250px; }

.contact-form-container { width: 100%; background: var(--light); border: none; border-radius: 8px; padding: 40px; }
.contact-form-container h3 { font-size: 20px; margin: 0 0 20px; color: var(--brand-blue);}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--brand-blue); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px; background: #fff; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--brand-orange); }
.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a3843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; cursor: pointer;}
.submit-btn { width: 100%; background: var(--brand-orange); color: #fff; border: none; border-radius: 4px; padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.3s; margin-top: 10px;}
.submit-btn:hover { background: var(--brand-blue); }

/* --- 頁尾 (Footer) --- */
footer { background: var(--brand-blue); color: #8e999f; padding: 80px 0 0; font-size: 14px; line-height: 1.8; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 60px; }
.footer-col h4 { color: #fff; font-size: 16px; margin: 0 0 20px 0; }
.footer-col a { display: block; color: #8e999f; margin-bottom: 12px; transition: color 0.3s; }
.footer-col a:hover { color: var(--brand-orange); }
.brand-col img { width: 160px; filter: brightness(0) invert(1); margin-bottom: 20px; }
.brand-col p { margin: 0 0 10px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 25px 0; text-align: left; font-size: 13px; }

/* --- 浮動按鈕區塊 (Floating Actions) --- */
.floating-actions { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 15px; z-index: 9999; }
.whatsapp-float { background-color: #25d366; color: #FFF; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 2px 4px 10px rgba(0,0,0,0.2); transition: transform 0.3s; font-size: 30px; }
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }
.whatsapp-float svg { width: 35px; height: 35px; fill: currentColor; }
.inquiry-float { background-color: var(--brand-orange); color: #FFF; padding: 12px 24px; border-radius: 30px; font-weight: 700; font-size: 15px; box-shadow: 2px 4px 10px rgba(0,0,0,0.2); transition: transform 0.3s, background-color 0.3s; text-align: center; white-space: nowrap; }
.inquiry-float:hover { transform: scale(1.05); background-color: #d8871b; color: #fff; }

/* --- 手機版響應式設定 --- */
@media(max-width:900px){
 .nav{min-height:75px; gap: 20px;}
 .menu{display:block;}
 .navlinks{ display: none; flex-direction: column; position: absolute; top: 75px; left: 0; width: 100%; background: #ffffff; box-shadow: 0 10px 10px rgba(0,0,0,0.05); padding: 10px 0 30px; gap: 0;}
 .navlinks.open { display: flex; }
 .navlinks a { width: 100%; text-align: center; padding: 15px 20px; font-size: 15px; }
 .navbtn-wrapper { margin: 15px auto 0; }
 .workflow { grid-template-columns: 1fr 1fr; gap: 40px; }
 .services{grid-template-columns:1fr 1fr}
 .portfolio-grid{grid-template-columns:1fr 1fr;}
 .slider-container { height: 60vh; min-height: 400px;}
 .slider-btn { display: none; }
 .contact-wrapper { grid-template-columns: 1fr; gap: 50px; }
 .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media(max-width:600px){
 .workflow { grid-template-columns: 1fr; gap: 40px; }
 .services{grid-template-columns:1fr}
 .portfolio-grid{grid-template-columns:1fr;}
 .contact-form-container { padding: 30px 20px;}
 .slide-content h1 { font-size: 28px; }
 .floating-actions { bottom: 20px; right: 20px; gap: 10px; }
 .whatsapp-float { width: 50px; height: 50px; }
 .whatsapp-float svg { width: 28px; height: 28px; }
 .inquiry-float { display: block; padding: 10px 18px; font-size: 13px; }
}