/* ═══════════════════════════════════════════════════════
   SONGYU LED Child — custom.css  v1.0.0
   松昱光電有限公司 · Hello Elementor 子主題自訂樣式
   ─────────────────────────────────────────────────────
   結構：
   1.  CSS 變數
   2.  Reset / Base
   3.  動畫
   4.  Pixel Grid 背景
   5.  Elementor 全域覆蓋
   6.  導覽列（Elementor Nav Menu）
   7.  按鈕
   8.  Hero 區塊
   9.  Stats 數字帶
   10. 產品卡片
   11. 解決方案
   12. 工程案例
   13. 為什麼選擇我們
   14. CTA 橫幅
   15. Footer
   16. 浮動聯絡按鈕
   17. 區塊標題共用
   18. RWD
═══════════════════════════════════════════════════════ */

/* ── 1. CSS 變數 ── */
:root {
  --sy-black:       #030507;
  --sy-navy:        #060c1a;
  --sy-blue-deep:   #090f22;
  --sy-cyan:        #00ddff;
  --sy-brand-blue:  #1a3acc;
  --sy-brand-light: #2550ee;
  --sy-cyan-dim:    rgba(0, 210, 255, 0.12);
  --sy-cyan-glow:   rgba(0, 210, 255, 0.45);
  --sy-blue-glow:   rgba(26, 58, 204, 0.50);
  --sy-white:       #ffffff;
  --sy-grey:        #7a8fa8;
  --sy-grey-light:  #b8ccdd;
  --sy-border:      rgba(0, 180, 255, 0.18);
  --sy-topbar-h:    64px;
}

/* ── 2. Reset / Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--sy-black) !important;
  color: var(--sy-white);
  font-family: 'Noto Sans TC', sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── 3. 動畫 ── */
@keyframes sy-scanline {
  0%   { top: -2px; }
  100% { top: 100%; }
}

@keyframes sy-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sy-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%       { transform: scale(1.2);  opacity: 1; }
}

@keyframes sy-flicker {
  0%, 100% { opacity: 0.06; }
  50%       { opacity: 0.42; }
}

/* ── 4. Pixel Grid 背景 ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 180, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 255, 0.028) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 5. Elementor 全域覆蓋 ── */
.elementor-section,
.e-con {
  position: relative;
}

/* 移除 Hello Elementor 預設 header padding */
.site-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 讓 Elementor 全版區塊可以出血 */
.elementor-section.elementor-section-stretched {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* ── 6. 導覽列（Elementor Nav Menu widget）── */
/* 若使用 Elementor Header，以下樣式確保風格一致 */
.elementor-nav-menu .elementor-item {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--sy-grey-light) !important;
  transition: color 0.25s !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--sy-cyan) !important;
}

/* Elementor Sticky Header */
.elementor-sticky--effects {
  background: rgba(3, 5, 7, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--sy-border) !important;
}

/* ── 7. 按鈕 ── */
.sy-btn-primary,
.elementor-button.sy-btn-primary {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--sy-brand-blue), var(--sy-brand-light)) !important;
  color: var(--sy-white) !important;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.2s;
  border-radius: 0 !important;
}

.sy-btn-primary:hover,
.elementor-button.sy-btn-primary:hover {
  box-shadow: 0 0 24px var(--sy-blue-glow), 0 0 48px rgba(26, 58, 204, 0.3);
  transform: translateY(-2px);
  color: var(--sy-white) !important;
}

.sy-btn-outline,
.elementor-button.sy-btn-outline {
  display: inline-block;
  padding: 14px 36px;
  background: transparent !important;
  color: var(--sy-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
  border-radius: 0 !important;
}

.sy-btn-outline:hover,
.elementor-button.sy-btn-outline:hover {
  border-color: var(--sy-cyan) !important;
  color: var(--sy-cyan) !important;
}

/* Elementor Button widget 全域圓角移除 */
.elementor-widget-button .elementor-button {
  border-radius: 0 !important;
}

/* ── 8. Hero 區塊 ── */
.sy-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 48px 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(26, 58, 204, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0, 200, 255, 0.07) 0%, transparent 50%),
    linear-gradient(160deg, var(--sy-black) 0%, var(--sy-navy) 50%, #03060f 100%);
}

.sy-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sy-cyan), transparent);
  animation: sy-scanline 4s linear infinite;
  opacity: 0.22;
}

.sy-hero-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--sy-cyan);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: sy-fadeUp 0.8s 0.1s both;
}

.sy-hero-label::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--sy-cyan);
}

.sy-hero-title-en {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 8vw, 100px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--sy-white);
  margin-bottom: 8px;
  animation: sy-fadeUp 0.8s 0.2s both;
}

.sy-hero-title-en span,
.sy-hero-title-en .sy-accent {
  color: var(--sy-cyan);
  text-shadow: 0 0 30px var(--sy-cyan-glow), 0 0 60px rgba(0, 210, 255, 0.2);
}

.sy-hero-title-cn {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--sy-grey-light);
  margin-bottom: 32px;
  animation: sy-fadeUp 0.8s 0.3s both;
}

.sy-hero-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--sy-grey);
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 48px;
  animation: sy-fadeUp 0.8s 0.4s both;
}

.sy-highlight {
  color: #c8ddf8;
  font-weight: 700;
}

.sy-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: sy-fadeUp 0.8s 0.5s both;
}

/* LED 屏幕模擬 */
.sy-led-wrap {
  position: absolute;
  right: -40px; top: 50%;
  transform: translateY(-50%);
  width: 480px; height: 350px;
  opacity: 0.65; z-index: 1;
}

.sy-led-screen {
  width: 100%; height: 100%;
  border: 1px solid rgba(0, 200, 255, 0.3);
  background: #020408;
  position: relative; overflow: hidden;
}

.sy-led-screen::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 200, 255, 0.03) 0, rgba(0, 200, 255, 0.03) 1px,
    transparent 1px, transparent 4px
  );
}

.sy-corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--sy-cyan);
  border-style: solid;
  z-index: 10;
}
.sy-corner.tl { top: -1px;    left: -1px;  border-width: 2px 0 0 2px; }
.sy-corner.tr { top: -1px;    right: -1px; border-width: 2px 2px 0 0; }
.sy-corner.bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.sy-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.sy-glow { position: absolute; border-radius: 50%; }
.sy-glow.g1 {
  width: 180px; height: 180px; top: 20%; left: 30%;
  background: radial-gradient(circle, rgba(26, 80, 238, 0.7), transparent 70%);
  animation: sy-pulse 3s ease-in-out infinite;
}
.sy-glow.g2 {
  width: 140px; height: 140px; bottom: 15%; right: 20%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.35), transparent 70%);
  animation: sy-pulse 4s ease-in-out infinite;
}
.sy-glow.g3 {
  width: 100px; height: 100px; top: 30%; right: 30%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.2), transparent 70%);
  animation: sy-pulse 5s ease-in-out infinite reverse;
}

.sy-led-pixels {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(18, 1fr);
  gap: 2px; padding: 12px; z-index: 3;
}

.sy-led-pixel {
  border-radius: 50%;
  background: var(--sy-cyan);
  animation: sy-flicker var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── 9. Stats 數字帶 ── */
.sy-stats-band {
  border-top: 1px solid var(--sy-border);
  border-bottom: 1px solid var(--sy-border);
  background: rgba(0, 200, 255, 0.04);
  padding: 32px 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sy-stat-item {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--sy-border);
}

.sy-stat-item:last-child { border-right: none; }

.sy-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  color: var(--sy-cyan);
  line-height: 1;
  text-shadow: 0 0 20px var(--sy-cyan-glow), 0 0 40px rgba(26, 58, 204, 0.4);
  letter-spacing: 0.04em;
}

.sy-stat-plus {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--sy-cyan);
  opacity: 0.7;
}

.sy-stat-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--sy-grey);
  margin-top: 6px;
}

/* ── 區塊標題（共用） ── */
.sy-section-header {
  text-align: center;
  margin-bottom: 64px;
}

.sy-section-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--sy-cyan);
  display: block;
  margin-bottom: 12px;
}

.sy-section-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--sy-white);
}

.sy-section-en {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 0.3em;
  color: var(--sy-grey);
  margin-top: 4px;
}

.sy-section-line {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--sy-cyan), transparent);
  margin: 18px auto 0;
}

/* ── 10. 產品卡片 ── */
.sy-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sy-border);
  border: 1px solid var(--sy-border);
}

.sy-product-card {
  background: var(--sy-navy);
  padding: 36px 24px;
  cursor: pointer;
  position: relative;
  border-top: 2px solid transparent;
  transition: background 0.3s, border-top-color 0.3s;
}

.sy-product-card:hover {
  background: rgba(0, 200, 255, 0.05);
  border-top-color: var(--sy-cyan);
}

.sy-product-icon {
  width: 44px; height: 44px;
  color: var(--sy-cyan);
  margin-bottom: 16px;
}

.sy-product-name {
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sy-white);
  margin: 0 0 6px;
}

.sy-product-en {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--sy-grey); margin-bottom: 14px;
}

.sy-product-desc {
  font-size: 13px; line-height: 1.7;
  color: var(--sy-grey); font-weight: 300;
}

.sy-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

.sy-tag {
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--sy-cyan);
  border: 1px solid rgba(0, 200, 255, 0.3);
  padding: 3px 10px;
}

/* ── 11. 解決方案 ── */
.sy-solutions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.sy-solution-item {
  text-align: center;
  padding: 36px 16px;
  border: 1px solid var(--sy-border);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color 0.3s;
}

.sy-solution-item::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--sy-cyan-dim), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}

.sy-solution-item:hover { border-color: var(--sy-cyan); }
.sy-solution-item:hover::after { opacity: 1; }

.sy-sol-icon {
  width: 56px; height: 56px;
  border: 1px solid var(--sy-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--sy-cyan);
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative; z-index: 1;
}

.sy-solution-item:hover .sy-sol-icon {
  border-color: var(--sy-cyan);
  box-shadow: 0 0 12px var(--sy-cyan-glow);
}

.sy-sol-name {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--sy-grey-light);
  position: relative; z-index: 1;
}

/* ── 12. 工程案例 ── */
.sy-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sy-case-card {
  border: 1px solid var(--sy-border);
  overflow: hidden;
  transition: border-color 0.3s;
}

.sy-case-card:hover { border-color: var(--sy-cyan); }

.sy-case-visual {
  height: 200px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.sy-case-visual.c1 { background: linear-gradient(135deg, #001428, #002244); }
.sy-case-visual.c2 { background: linear-gradient(135deg, #140a00, #281500); }
.sy-case-visual.c3 { background: linear-gradient(135deg, #001a0a, #002814); }

.sy-case-screen-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px; letter-spacing: 0.1em;
  position: relative; z-index: 1;
}

.sy-case-visual.c1 .sy-case-screen-text { color: rgba(0, 200, 255, 0.7); text-shadow: 0 0 30px var(--sy-cyan); }
.sy-case-visual.c2 .sy-case-screen-text { color: rgba(240, 180, 40, 0.8); text-shadow: 0 0 30px #f0b429; }
.sy-case-visual.c3 .sy-case-screen-text { color: rgba(0, 220, 130, 0.7); text-shadow: 0 0 30px rgba(0,220,130,.8); }

.sy-case-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.12) 0, rgba(0,0,0,.12) 1px,
    transparent 1px, transparent 3px
  );
}

.sy-case-info { padding: 24px; background: var(--sy-blue-deep); }

.sy-case-category {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--sy-cyan); margin-bottom: 8px;
}

.sy-case-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sy-white); margin: 0 0 8px;
}

.sy-case-spec {
  font-size: 12px; color: var(--sy-grey); font-weight: 300;
}

/* ── 13. 為什麼選擇我們 ── */
.sy-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sy-border);
  border: 1px solid var(--sy-border);
}

.sy-why-item {
  background: var(--sy-black);
  padding: 40px 28px; text-align: center;
  transition: background 0.3s;
}

.sy-why-item:hover { background: rgba(0, 200, 255, 0.04); }

.sy-why-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  color: rgba(0, 200, 255, 0.1);
  line-height: 1; display: block; margin-bottom: 12px;
}

.sy-why-icon { color: var(--sy-cyan); margin-bottom: 18px; }

.sy-why-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sy-white); margin: 0 0 12px;
}

.sy-why-desc {
  font-size: 13px; line-height: 1.7;
  color: var(--sy-grey); font-weight: 300;
}

/* ── 14. CTA 橫幅 ── */
.sy-cta-band {
  padding: 80px 48px;
  background: linear-gradient(135deg, #001428, #000c1e);
  border-top: 1px solid var(--sy-border);
  text-align: center;
  position: relative; overflow: hidden;
}

.sy-cta-band::before {
  content: 'LED';
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 280px;
  color: rgba(0, 200, 255, 0.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  letter-spacing: 0.1em; white-space: nowrap;
}

.sy-cta-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.4em;
  color: var(--sy-cyan);
  display: block; margin-bottom: 14px;
}

.sy-cta-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900; letter-spacing: 0.06em;
  color: var(--sy-white); margin-bottom: 10px;
  position: relative;
}

.sy-cta-sub {
  font-size: 15px; color: var(--sy-grey);
  font-weight: 300; margin-bottom: 36px;
}

.sy-cta-btns {
  display: flex; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}

/* ── 15. Footer ── */
.sy-footer,
.site-footer {
  background: var(--sy-black) !important;
  border-top: 1px solid var(--sy-border);
}

.sy-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}

.sy-footer-logo { height: 48px; width: auto; margin-bottom: 16px; }

.sy-footer-tagline {
  font-size: 13px; line-height: 1.8;
  color: var(--sy-grey); font-weight: 300;
}

.sy-footer-tagline strong { color: var(--sy-white); }

.sy-footer-col-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--sy-white); margin-bottom: 20px;
}

.sy-footer-links {
  display: flex; flex-direction: column; gap: 10px;
}

.sy-footer-links a {
  font-size: 13px; color: var(--sy-grey);
  font-weight: 300; transition: color 0.2s;
}

.sy-footer-links a:hover { color: var(--sy-cyan); }

.sy-footer-contact { display: flex; flex-direction: column; gap: 10px; }

.sy-footer-contact li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--sy-grey);
  font-weight: 300; line-height: 1.5;
}

.sy-footer-contact svg { color: var(--sy-cyan); flex-shrink: 0; margin-top: 2px; }

.sy-footer-contact a { color: var(--sy-grey); transition: color 0.2s; }
.sy-footer-contact a:hover { color: var(--sy-cyan); }

.sy-footer-bottom {
  border-top: 1px solid var(--sy-border); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}

.sy-footer-copy { font-size: 12px; color: var(--sy-grey); font-weight: 300; }

.sy-footer-socials { display: flex; gap: 16px; }
.sy-footer-socials a { color: var(--sy-grey); transition: color 0.2s; }
.sy-footer-socials a:hover { color: var(--sy-cyan); }

/* ── 16. 浮動聯絡按鈕 ── */
.sy-float {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 9999;
  display: flex; flex-direction: column;
  gap: 10px; align-items: flex-end;
}

.sy-float-btn {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.3s, transform 0.2s;
}

.sy-float-btn:hover { transform: scale(1.1); }

.sy-float-line { background: #06c755 !important; }
.sy-float-line:hover { box-shadow: 0 0 20px rgba(6, 199, 85, 0.5); }

.sy-float-mail { background: var(--sy-cyan) !important; color: var(--sy-black) !important; }
.sy-float-mail:hover { box-shadow: 0 0 20px var(--sy-cyan-glow); }

/* ── 17. Elementor Section 背景覆蓋 ── */
/* 幫助 Elementor 區塊繼承深色背景 */
.elementor-section .elementor-container,
.e-con-inner {
  position: relative;
  z-index: 1;
}

/* Elementor Heading widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Noto Sans TC', sans-serif;
}

/* Elementor Text widget */
.elementor-widget-text-editor p {
  line-height: 1.8;
  font-weight: 300;
}

/* ── 18. RWD ── */
@media (max-width: 1100px) {
  .sy-led-wrap { display: none; }
  .sy-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .sy-products-grid   { grid-template-columns: repeat(2, 1fr); }
  .sy-solutions-grid  { grid-template-columns: repeat(3, 1fr); }
  .sy-cases-grid      { grid-template-columns: 1fr; }
  .sy-why-grid        { grid-template-columns: repeat(2, 1fr); }
  .sy-stats-band      { padding: 24px; grid-template-columns: repeat(2, 1fr); }
  .sy-stat-item:nth-child(2) { border-right: none; }
  .sy-stat-item { border-bottom: 1px solid var(--sy-border); padding: 16px; }
  .sy-hero { padding: 100px 24px 60px; }
  .sy-cta-band { padding: 60px 24px; }
}

@media (max-width: 600px) {
  .sy-products-grid  { grid-template-columns: 1fr; }
  .sy-solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .sy-why-grid       { grid-template-columns: 1fr; }
  .sy-footer-grid    { grid-template-columns: 1fr; }
  .sy-hero-btns      { flex-direction: column; }
  .sy-cta-btns       { flex-direction: column; align-items: center; }
}

/* ── Topbar（header.php 渲染）── */
.sy-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999; height: 64px;
  background: rgba(3,5,7,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sy-border);
  transition: background .3s, border-color .3s;
}
.sy-topbar.scrolled {
  background: rgba(3,5,7,.98) !important;
  border-bottom-color: rgba(0,180,255,.28) !important;
}
.sy-topbar-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 48px; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.sy-logo-link { display: flex; align-items: center; }
.sy-logo-img  { height: 40px; width: auto; object-fit: contain; }

.sy-nav { display: flex; align-items: center; gap: 32px; }
.sy-nav-list { display: flex; align-items: center; gap: 32px; list-style: none; }
.sy-nav-list a {
  font-size: 13px; font-weight: 500; letter-spacing: .1em;
  color: var(--sy-grey-light); transition: color .25s; position: relative;
}
.sy-nav-list a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--sy-cyan); transition:width .3s;
}
.sy-nav-list a:hover,
.sy-nav-list .current-menu-item > a { color: var(--sy-cyan); }
.sy-nav-list a:hover::after,
.sy-nav-list .current-menu-item > a::after { width: 100%; }

.sy-nav-cta {
  font-size: 12px; font-weight: 600; letter-spacing: .15em;
  color: var(--sy-cyan) !important;
  border: 1px solid var(--sy-cyan); padding: 8px 20px;
  transition: background .25s, box-shadow .25s;
}
.sy-nav-cta:hover {
  background: var(--sy-cyan-dim);
  box-shadow: 0 0 16px var(--sy-cyan-glow);
}

/* Mobile hamburger */
.sy-menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.sy-menu-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--sy-grey-light); transition: transform .3s, opacity .3s;
}
.sy-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sy-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sy-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Elementor page 補上 topbar 高度偏移 */
#page { padding-top: 64px; }

/* Stats band 強制橫排 */
.sy-stats-band {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  width: 100%;
}

/* Mobile nav */
@media (max-width: 900px) {
  .sy-menu-toggle { display: flex; }
  .sy-nav {
    display: none; position: absolute;
    top: 64px; left: 0; right: 0;
    background: rgba(3,5,7,.97); flex-direction: column;
    align-items: flex-start; padding: 24px;
    gap: 20px; border-bottom: 1px solid var(--sy-border);
    z-index: 9998;
  }
  .sy-nav.is-open { display: flex; }
  .sy-nav-list { flex-direction: column; gap: 20px; }
  .sy-topbar-inner { padding: 0 24px; }
  .sy-stats-band {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 24px;
  }
  .sy-stat-item:nth-child(2) { border-right: none; }
  .sy-stat-item { border-bottom: 1px solid var(--sy-border); padding: 16px; }
}

/* ══ 版面對齊修正 v2.1 ══════════════════════════════════ */

/* 全域容器：與 Header 同寬度、同 padding */
.sy-container,
.sy-footer-inner,
.sy-topbar-inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

/* Footer 上方間距 + 寬度對齊 */
.sy-footer {
  padding-top: 0;
}
.sy-footer-inner {
  padding-top: 60px;
  padding-bottom: 32px;
}

/* Elementor HTML widget 內容對齊：
   讓各區塊 HTML 內容受 max-width 約束 */
.elementor-widget-html {
  width: 100%;
}
.elementor-widget-html > .elementor-widget-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

/* Hero 區塊例外：全寬不受約束 */
.elementor-widget-html:has(.sy-hero) > .elementor-widget-container,
.elementor-widget-html:has(.sy-cta-band) > .elementor-widget-container,
.elementor-widget-html:has(.sy-stats-band) > .elementor-widget-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Stats band 本身有自己的 padding */
.sy-stats-band {
  padding-left: 48px;
  padding-right: 48px;
}

/* Section 區塊標題 + 內容已有 sy-section-header 包覆，不需雙重 padding */
.sy-section-header,
.sy-products-grid,
.sy-solutions-grid,
.sy-cases-grid,
.sy-why-grid {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Elementor section 本身不加左右 padding，交給 widget-container 處理 */
.elementor-section .elementor-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 手機版 */
@media (max-width: 900px) {
  .sy-container,
  .sy-footer-inner,
  .sy-topbar-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .elementor-widget-html > .elementor-widget-container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .sy-stats-band {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ══ 版面對齊修正 v2.2 ══════════════════════════════════ */

/* 1. Footer：全寬，左右不留空間 */
.sy-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sy-footer-inner {
  max-width: 100% !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  padding-top: 60px !important;
}
/* Footer bottom border 對齊 */
.sy-footer-grid {
  width: 100%;
}

/* 2. Hero：內容對齊 Header 寬度（max-width 1280px, padding 48px） */
.sy-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 120px !important;
  padding-bottom: 80px !important;
}
.sy-hero-content {
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  position: relative;
  z-index: 2;
}

/* LED 屏幕模擬位置跟著 hero-content 對齊 */
.sy-led-wrap {
  right: 48px;
}

/* 手機版對齊 */
@media (max-width: 900px) {
  .sy-footer-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sy-hero-content {
    padding-left: 24px;
    padding-right: 24px;
  }
  .sy-led-wrap {
    right: 0;
  }
}

/* ══ 版面對齊修正 v2.3 ══════════════════════════════════ */

/* 1. Header：左右 padding 移除，真正全寬 */
.sy-topbar-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2. Hero：頂部空間移除，緊接 Header */
.sy-hero {
  padding-top: 0 !important;
}
.sy-hero-content {
  padding-top: 80px;
}

/* 3. LED 屏幕：右側貼齊邊緣（跟隨 Header 全寬） */
.sy-led-wrap {
  right: 0 !important;
}

/* 4. Footer：對齊 Header（全寬，左右無 padding） */
.sy-footer-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 60px !important;
  padding-bottom: 32px !important;
}
.sy-footer-grid,
.sy-footer-bottom {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 5. Footer 清單移除項目符號 */
.sy-footer-links,
.sy-footer-contact {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.sy-footer-links li,
.sy-footer-contact li {
  list-style: none !important;
  list-style-type: none !important;
}
.sy-footer-links li::before,
.sy-footer-contact li::before,
.sy-footer-links li::marker,
.sy-footer-contact li::marker {
  display: none !important;
  content: none !important;
}

/* 手機版對齊 */
@media (max-width: 900px) {
  .sy-hero-content {
    padding-top: 60px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ══ 版面對齊修正 v2.4 ══════════════════════════════════ */

/* 1. Hero content 頂部空間移除 */
.sy-hero-content {
  padding-top: 0 !important;
}

/* 2. LED 屏幕右側對齊 .sy-hero-content 右邊界
   hero-content = max-width:1280px, padding-right:48px
   right = (視窗寬 - 1280px) / 2  （視窗超過 1280px 時）
   視窗小於 1280px 時退回 48px     */
/* .sy-led-wrap {
  right: calc((100vw - 1280px) / 2) !important;
} */
@media (max-width: 1280px) {
  .sy-led-wrap {
    right: 48px !important;
  }
}

/* 3. Footer 不全寬，對齊 Header 內容寬度 */
.sy-footer-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* 4. "松昱光電有限公司" font-size */
.sy-footer-tagline strong {
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
}

/* 手機版 */
@media (max-width: 900px) {
  .sy-footer-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sy-led-wrap {
    right: 0 !important;
  }
}

/* ══ 字體樣式修正 v2.5 ══════════════════════════════════ */

/* Hero：「松昱光電」顏色 */
.sy-highlight {
  color: rgb(0, 221, 255) !important;
}

/* Hero：說明文字 */
.sy-hero-desc {
  font-size: 20px !important;
  color: #ffffff !important;
}

/* Stats Band */
.sy-stat-num  { font-size: 68px !important; }
.sy-stat-plus { font-size: 28px !important; }
.sy-stat-label { font-size: 18px !important; }

/* 產業解決方案：圖示文字 */
.sy-sol-name { font-size: 18px !important; }

/* 為什麼選擇我們：標題 + 說明 */
.sy-why-title { font-size: 18px !important; }
.sy-why-desc  { font-size: 18px !important; }

/* ══ 字體樣式修正 v2.6 ══════════════════════════════════ */

/* Header */
.sy-nav-list a  { font-size: 14px !important; }
.sy-nav-cta     { font-size: 14px !important; }

/* Hero */
.sy-hero-label  { font-size: 12px !important; }

/* 產品系列 */
.sy-product-name { font-size: 18px !important; }
.sy-product-en   { font-size: 12px !important; }
.sy-product-desc { font-size: 14px !important; }
.sy-tag          { font-size: 12px !important; }

/* 工程案例 */
.sy-case-category { font-size: 12px !important; }
.sy-case-title    { font-size: 18px !important; }
.sy-case-spec     { font-size: 14px !important; }

/* 為什麼選擇我們 */
.sy-why-desc { font-size: 16px !important; }

/* CTA 橫幅 */
.sy-cta-label { font-size: 12px !important; }
.sy-cta-sub   { font-size: 18px !important; }

/* Footer：公司名稱與英文名稱同行 */
.sy-footer-tagline strong {
  display: inline !important;
  font-size: 16px !important;
}
.sy-footer-tagline strong::after {
  content: ' · ';
  font-weight: 300;
  color: var(--sy-grey);
}

/* Footer：字體大小 */
.sy-footer-tagline    { font-size: 14px !important; }
.sy-footer-col-title  { font-size: 14px !important; }
.sy-footer-links a    { font-size: 14px !important; }
.sy-footer-contact li { font-size: 14px !important; }

/* ══ 修正 v2.7 ══════════════════════════════════════════ */

/* Footer：移除分隔符號，保留空格同行 */
.sy-footer-tagline strong::after {
  content: ' ' !important;
}

/* Go to Top 按鈕 */
.sy-float-top {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--sy-border);
  color: var(--sy-grey-light) !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s, box-shadow .3s, background .3s;
}
.sy-float-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.sy-float-top:hover {
  background: rgba(0,221,255,0.12) !important;
  border-color: var(--sy-cyan);
  box-shadow: 0 0 16px var(--sy-cyan-glow) !important;
  color: var(--sy-cyan) !important;
}

/* ══ 字體修正 v2.8 ══════════════════════════════════════ */

/* 全站：區塊小標籤 */
.sy-section-tag { font-size: 12px !important; }

/* ══ About 頁面修正 v2.9 ════════════════════════════════ */

/* 1. Elementor 所有 Section 內容對齊 Header（max-width 1280px, 無 padding） */
.elementor-section > .elementor-container {
  max-width: 1280px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Hero Section 例外：全寬背景不受約束 */
.sy-hero-section > .elementor-container {
  max-width: 1280px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2. Hero Section 漸層背景 + 掃描線 */
.sy-hero-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 70% 60% at 60% 50%, rgba(26,58,204,.22) 0%, transparent 60%),
    linear-gradient(160deg, #030507 0%, #060c1a 100%) !important;
}
.sy-hero-section::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, #00ddff, transparent);
  animation: sy-scanline 4s linear infinite;
  opacity: .2;
  pointer-events: none;
}

/* 3. Mission / Vision Section 邊框效果 */
.sy-mv-section {
  border-top: 1px solid rgba(0,180,255,.18) !important;
  border-bottom: 1px solid rgba(0,180,255,.18) !important;
}
.sy-mv-section > .elementor-container > .elementor-column {
  border-right: 1px solid rgba(0,180,255,.18);
  transition: background .3s;
}
.sy-mv-section > .elementor-container > .elementor-column:last-child {
  border-right: none;
}
.sy-mv-section > .elementor-container > .elementor-column:hover {
  background: rgba(0,200,255,.05) !important;
}

/* Mission/Vision icon-box 頂部光條 */
.sy-mv-section .elementor-icon-box-wrapper {
  position: relative;
}
.sy-mv-section .elementor-icon-box-wrapper::before {
  content: '';
  position: absolute; top: -48px; left: -40px; right: -40px; height: 2px;
  background: linear-gradient(90deg, #1a3acc, #00ddff);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s;
}
.sy-mv-section .elementor-column:hover .elementor-icon-box-wrapper::before {
  transform: scaleX(1);
}

/* 4. 公司故事右欄邊框 */
.sy-story-right {
  border: 1px solid rgba(0,180,255,.18) !important;
  border-top: 2px solid #1a3acc !important;
  position: relative;
}
.sy-story-right::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #1a3acc, #00ddff);
}

/* 5. Icon List 樣式強化（Story 區右欄） */
.sy-story-section .elementor-icon-list-items {
  gap: 24px !important;
}
.sy-story-section .elementor-icon-list-item {
  border-bottom: 1px solid rgba(0,180,255,.1);
  padding-bottom: 20px !important;
}
.sy-story-section .elementor-icon-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0 !important;
}

/* 6. 認證卡片欄位邊框 */
.sy-cert-section > .elementor-container > .elementor-column {
  border: 1px solid rgba(0,180,255,.18);
  transition: border-color .3s, background .3s;
  margin: 4px;
}
.sy-cert-section > .elementor-container > .elementor-column:hover {
  border-color: #00ddff !important;
  background: rgba(0,200,255,.05) !important;
}

/* 7. 工廠 Image widget 佔位樣式 */
.sy-factory-section .elementor-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: brightness(.8);
  transition: filter .3s;
}
.sy-factory-section .elementor-image:hover img { filter: brightness(1); }
.sy-factory-section .elementor-image-caption {
  font-size: 12px; letter-spacing: .2em;
  color: rgba(0,180,255,.5); text-align: center;
  margin-top: 8px;
}

/* 8. 手機版 */
@media (max-width: 900px) {
  .elementor-section > .elementor-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ══ About Hero 修正 v3.0 ═══════════════════════════════ */

/* 1. Hero 漸層背景 + 掃描線（靠 PHP body class，100% 可靠） */
.page-about .elementor-section:first-of-type {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 80% 60% at 65% 40%, rgba(26,58,204,.32) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 25% 80%, rgba(0,180,255,.12) 0%, transparent 50%),
    linear-gradient(160deg, #030507 0%, #060c1a 55%, #030507 100%) !important;
}

.page-about .elementor-section:first-of-type::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px; top: 0;
  background: linear-gradient(90deg, transparent 0%, #00ddff 50%, transparent 100%);
  animation: sy-scanline 4s linear infinite;
  opacity: 0.35;
  z-index: 10;
  pointer-events: none;
}

/* 2. Hero 左右空間改為 0px（覆蓋全域 48px 規則） */
.page-about .elementor-section:first-of-type > .elementor-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-about .elementor-section:first-of-type .elementor-column-wrap,
.page-about .elementor-section:first-of-type .elementor-widget-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ══ Story 右欄 icon-list 分隔線 v3.1 ══════════════════ */
.page-about .elementor-section:nth-of-type(2) .elementor-icon-list-item {
  border-bottom: 1px solid rgba(0,180,255,.15);
  padding-bottom: 20px !important;
}
.page-about .elementor-section:nth-of-type(2) .elementor-icon-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0 !important;
}
/* icon 對齊標題 top */
.page-about .elementor-section:nth-of-type(2) .elementor-icon-list-icon {
  align-self: flex-start;
  padding-top: 4px;
}

/* ══ Story 右欄 漸層框線 + "15" 背景文字 v3.2 ══════════ */

/* 右欄 column 需要 relative 定位 */
.page-about .elementor-section:nth-of-type(2) .elementor-column:last-child {
  position: relative !important;
  overflow: hidden !important;
}

/* 頂部漸層框線 */
.page-about .elementor-section:nth-of-type(2) .elementor-column:last-child::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1a3acc 0%, #00ddff 100%);
  z-index: 10;
}

/* 右上角 "15" 背景文字 */
.page-about .elementor-section:nth-of-type(2) .elementor-column:last-child::before {
  content: '15';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 120px;
  color: rgba(0, 200, 255, 0.07);
  position: absolute;
  top: 8px; right: 20px;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* ══ Mission/Vision 區塊 v3.3 ════════════════════════════ */

/* mv_cards = about 頁第 4 個 section（index 3） */
.page-about .elementor-section:nth-of-type(4) .elementor-column {
  position: relative !important;
  overflow: hidden !important;
  transition: background .35s ease !important;
}

/* 頂部漸層框線：左欄預設顯示，右欄 hover 後顯示 */
.page-about .elementor-section:nth-of-type(4) .elementor-column::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1a3acc 0%, #00ddff 100%);
  z-index: 10;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

/* 左欄：預設就展開漸層線 */
.page-about .elementor-section:nth-of-type(4) .elementor-column:first-child::after {
  transform: scaleX(1);
}

/* Hover：背景換色 + 右欄展開漸層線 */
.page-about .elementor-section:nth-of-type(4) .elementor-column:hover {
  background: rgba(0, 180, 255, 0.07) !important;
}
.page-about .elementor-section:nth-of-type(4) .elementor-column:hover::after {
  transform: scaleX(1);
}

/* Icon 圓框樣式強化 */
.page-about .elementor-section:nth-of-type(4) .elementor-icon {
  border: 1px solid rgba(0,200,255,.35) !important;
  border-radius: 50% !important;
  width: 56px !important; height: 56px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(0,200,255,.06) !important;
  transition: border-color .3s, box-shadow .3s !important;
}
.page-about .elementor-section:nth-of-type(4) .elementor-column:hover .elementor-icon {
  border-color: #00ddff !important;
  box-shadow: 0 0 12px rgba(0,210,255,.4) !important;
}

/* ══ Mission/Vision 修正 v3.4 ════════════════════════════ */

/* 覆蓋舊版（v3.3）的左欄預設展開設定 */
.page-about .elementor-section:nth-of-type(4) .elementor-column:first-child::after {
  transform: scaleX(0) !important;
}

/* Hover 背景：打到 .elementor-widget-wrap（Elementor 背景色實際位置）*/
.page-about .elementor-section:nth-of-type(4) .elementor-column:hover > .elementor-widget-wrap,
.page-about .elementor-section:nth-of-type(4) .elementor-column:hover > .elementor-column-wrap {
  background: rgba(0, 200, 255, 0.08) !important;
  transition: background .35s ease !important;
}

/* Divider 漸層線（靠 body class 確保套用）*/
.page-about .elementor-section:nth-of-type(3) .elementor-divider-separator {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, #1a3acc, #00ddff) !important;
}

/* Icon 圓框尺寸修正（配合 40px icon）*/
.page-about .elementor-section:nth-of-type(4) .elementor-icon {
  width: 72px !important;
  height: 72px !important;
}
.page-about .elementor-section:nth-of-type(4) .elementor-icon i {
  font-size: 40px !important;
}

/* ══ Mission/Vision 修正 v3.5 ════════════════════════════ */

/* 1. 左欄 hover 展開漸層線（兩欄統一 hover 行為） */
.page-about .elementor-section:nth-of-type(4) .elementor-column:hover::after {
  transform: scaleX(1) !important;
}

/* 2. 兩欄底部加框線 */
.page-about .elementor-section:nth-of-type(4) .elementor-column {
  border-bottom: 1px solid rgba(0,180,255,0.25) !important;
}

/* ══ Certifications 區塊 hover 效果 v3.6 ════════════════ */

/* cert_sec = about 頁第 6 個 section（nth-of-type 6）*/
.page-about .elementor-section:nth-of-type(6) .elementor-column {
  position: relative !important;
  overflow: hidden !important;
  transition: background .3s !important;
}

/* 頂部漸層線：hover 展開 */
.page-about .elementor-section:nth-of-type(6) .elementor-column::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #1a3acc, #00ddff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
  z-index: 10;
}

.page-about .elementor-section:nth-of-type(6) .elementor-column:hover::after {
  transform: scaleX(1);
}

/* Hover 背景 */
.page-about .elementor-section:nth-of-type(6) .elementor-column:hover > .elementor-widget-wrap,
.page-about .elementor-section:nth-of-type(6) .elementor-column:hover > .elementor-column-wrap {
  background: rgba(0, 200, 255, 0.08) !important;
  transition: background .3s ease !important;
}

/* 圓形 badge hover 發光 */
.page-about .elementor-section:nth-of-type(6) .elementor-column:hover .elementor-widget-html div {
  border-color: #00ddff !important;
  box-shadow: 0 0 14px rgba(0,210,255,.4) !important;
  transition: all .3s !important;
}

/* QUALITY & COMPLIANCE 分隔線漸層（備援）*/
.page-about .elementor-section:nth-of-type(5) .elementor-divider-separator {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, #1a3acc, #00ddff) !important;
}

/* ══ Factory 區塊 hover 效果 v3.7 ═══════════════════════ */

/* fac_imgs = about 頁第 8 個 section */
.page-about .elementor-section:nth-of-type(8) .elementor-column {
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .3s !important;
}

/* 頂部漸層線 hover 展開 */
.page-about .elementor-section:nth-of-type(8) .elementor-column::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #1a3acc, #00ddff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
  z-index: 10;
}
.page-about .elementor-section:nth-of-type(8) .elementor-column:hover::after {
  transform: scaleX(1);
}

/* Hover border 亮色 */
.page-about .elementor-section:nth-of-type(8) .elementor-column:hover {
  border-color: rgba(0,200,255,.5) !important;
}

/* FACTORY & WORKSHOP 分隔線漸層（備援）*/
.page-about .elementor-section:nth-of-type(7) .elementor-divider-separator {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, #1a3acc, #00ddff) !important;
}

/* ══ CTA 區塊按鈕 hover v3.8 ═══════════════════════════ */
.page-about .elementor-section:nth-of-type(9) .elementor-button:hover {
  box-shadow: 0 0 20px rgba(26,58,204,.5) !important;
  transform: translateY(-2px) !important;
  transition: all .3s !important;
}
.page-about .elementor-section:nth-of-type(9) #cta_btn2 .elementor-button:hover {
  border-color: #00ddff !important;
  color: #00ddff !important;
}
/* 讓兩個按鈕並排 */
.page-about .elementor-section:nth-of-type(9) .elementor-widget-button {
  display: inline-block !important;
  margin: 0 8px !important;
}
.page-about .elementor-section:nth-of-type(9) .elementor-column-gap-default .elementor-widget-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* ══ CTA 按鈕樣式 v3.9 ══════════════════════════════════ */
.sy-cta-primary,
.sy-cta-secondary {
  display: inline-block;
  padding: 14px 36px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  letter-spacing: .15em;
  text-decoration: none;
  transition: box-shadow .3s, transform .2s, border-color .3s, color .3s;
}

.sy-cta-primary {
  background: linear-gradient(135deg, #1a3acc, #2550ee);
  color: #fff !important;
  font-weight: 700;
  border: 1px solid transparent;
}
.sy-cta-primary:hover {
  box-shadow: 0 0 24px rgba(26,58,204,.55);
  transform: translateY(-2px);
  color: #fff !important;
}

.sy-cta-secondary {
  background: transparent;
  color: #fff !important;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.3);
}
.sy-cta-secondary:hover {
  border-color: #00ddff !important;
  color: #00ddff !important;
  box-shadow: 0 0 16px rgba(0,210,255,.25);
  transform: translateY(-2px);
}

/* ══ Solutions 頁 Hero v4.0 ═════════════════════════════ */
.page-solutions .elementor-section:first-of-type {
  position: relative !important; overflow: hidden !important;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(26,58,204,.28) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 25% 80%, rgba(0,180,255,.1) 0%, transparent 50%),
    linear-gradient(160deg, #030507 0%, #060c1a 60%, #030507 100%) !important;
}
.page-solutions .elementor-section:first-of-type::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, #00ddff, transparent);
  animation: sy-scanline 4s linear infinite; opacity: .3; z-index: 10; pointer-events: none;
}
.page-solutions .elementor-section:first-of-type > .elementor-container,
.page-solutions .elementor-section:first-of-type .elementor-widget-wrap,
.page-solutions .elementor-section:first-of-type .elementor-column-wrap {
  padding-left: 0 !important; padding-right: 0 !important;
}

/* ══ Portfolio 頁 Hero v4.1 ════════════════════════════ */
.page-portfolio .elementor-section:first-of-type {
  position:relative!important;overflow:hidden!important;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%,rgba(26,58,204,.28) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 25% 80%,rgba(0,180,255,.1) 0%,transparent 50%),
    linear-gradient(160deg,#030507 0%,#060c1a 60%,#030507 100%)!important;
}
.page-portfolio .elementor-section:first-of-type::after {
  content:'';position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,#00ddff,transparent);
  animation:sy-scanline 4s linear infinite;opacity:.3;z-index:10;pointer-events:none;
}
.page-portfolio .elementor-section:first-of-type > .elementor-container,
.page-portfolio .elementor-section:first-of-type .elementor-widget-wrap,
.page-portfolio .elementor-section:first-of-type .elementor-column-wrap {
  padding-left:0!important;padding-right:0!important;
}

/* ══ Support 頁 Hero v4.2 ══════════════════════════════ */
.page-support .elementor-section:first-of-type {
  position:relative!important;overflow:hidden!important;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%,rgba(26,58,204,.28) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 25% 80%,rgba(0,180,255,.1) 0%,transparent 50%),
    linear-gradient(160deg,#030507 0%,#060c1a 60%,#030507 100%)!important;
}
.page-support .elementor-section:first-of-type::after {
  content:'';position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,#00ddff,transparent);
  animation:sy-scanline 4s linear infinite;opacity:.3;z-index:10;pointer-events:none;
}
.page-support .elementor-section:first-of-type > .elementor-container,
.page-support .elementor-section:first-of-type .elementor-widget-wrap,
.page-support .elementor-section:first-of-type .elementor-column-wrap {
  padding-left:0!important;padding-right:0!important;
}

/* ══ Logo & Nav 修正 v4.3 ════════════════════════════════ */

/* Header Logo：強制限制尺寸 */
.sy-logo-img {
  height: 36px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Topbar 高度固定，內容不溢出 */
.sy-topbar {
  height: 64px !important;
  overflow: visible !important;
}

.sy-topbar-inner {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Nav 不換行 */
.sy-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  white-space: nowrap !important;
}

.sy-nav-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  list-style: none !important;
}

/* Nav 字體稍縮小以適應 6 個項目 */
.sy-nav-list a {
  font-size: 13px !important;
  white-space: nowrap !important;
}

.sy-nav-cta {
  font-size: 12px !important;
  white-space: nowrap !important;
  padding: 7px 16px !important;
}

/* Footer Logo：強制限制尺寸 */
.sy-footer-logo {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
  margin-bottom: 16px !important;
}

/* ══ Header 修正 v4.4 ════════════════════════════════════ */
.sy-topbar-inner {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.sy-nav-list a  { font-size: 14px !important; }
.sy-nav-cta     { font-size: 14px !important; }

/* ══ Logo 修正 v4.5 ═════════════════════════════════════ */
.sy-logo-img { height: 46px !important; }

/* ══ 首頁 Hero 掃描線（body class 備援）v5.0 ══════════════ */
/*.page-home .elementor-section:first-of-type {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 80% 70% at 60% 40%, rgba(26,58,204,.35) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(0,180,255,.12) 0%, transparent 50%),
    linear-gradient(160deg, #030507 0%, #060c1a 55%, #030507 100%) !important;
}*/
.page-home .elementor-section:first-of-type::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, #00ddff, transparent);
  animation: sy-scanline 4s linear infinite;
  opacity: .35; z-index: 10; pointer-events: none;
}