/* 字型：改用 Google Fonts CDN (開發階段)，見各 HTML head 的 link。日後上線可改回本地自託管。 */
:root {
    --primary: #FF5F00;
    --primary-glow: rgba(255, 95, 0, 0.5);
    --primary-soft: rgba(255, 95, 0, 0.12);
    --black: #000000;
    --bg: #0A0A0C;
    --surface: #16161A;
    --surface-2: #1C1C22;
    --border: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(255, 95, 0, 0.4);
    --white: #FFFFFF;
    --text: #EDEDED;
    --text-dim: #9A9AA5;
    --text-faint: #6B6B76;
    --radius: 16px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t: 0.4s var(--ease);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Hiragino Sans GB", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.7;
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
/* 彈性容器：4K 寬版時放大內容寬度與內距，1080P 以下逐步收窄，全程不留死白邊 */
.container { width: 100%; max-width: clamp(1100px, 86vw, 1680px); margin: 0 auto; padding: 0 clamp(20px, 3.2vw, 64px); }
a { text-decoration: none; color: inherit; }

.bg-grid {
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px; z-index: 0; pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(10,10,12,0.7); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border);
    transition: var(--t);
}
.header.scrolled { background: rgba(10,10,12,0.92); }
.header-content { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    background: var(--primary); color: var(--black); font-weight: 900;
    font-size: 16px; border-radius: 10px; box-shadow: 0 0 20px var(--primary-glow);
    letter-spacing: -0.5px;
}
.logo-mark .logo-e, .logo-mark .logo-z { display: inline; line-height: 1; }
.logo-text { font-weight: 800; font-size: 21px; letter-spacing: 0.5px; color: var(--white); }
.nav { display: flex; gap: 6px; }
.nav a {
    padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--text-dim);
    border-radius: 8px; transition: var(--t);
}
.nav a:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.nav a.active { color: var(--primary); }
.mobile-menu-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
}
.mobile-menu-toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--t); }

.btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px;
    font-size: 15px; font-weight: 600; border-radius: 12px; transition: var(--t);
    border: 1px solid transparent; cursor: pointer;
}
.btn-arrow { transition: transform var(--t); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-primary { background: var(--primary); color: var(--black); }
.btn-primary:hover { box-shadow: 0 8px 30px var(--primary-glow); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--white); border-color: var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.btn-light { background: var(--white); color: var(--black); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,255,255,0.2); }

.hero {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    padding: 120px 0 80px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }

/* iOS-HERO-OPT */
/* ===== Hero office floor plan background ===== */
.hero-floor { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; z-index: 0; }
.hf-wall  { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 2.5; }
.hf-room  { fill: rgba(255,255,255,0.018); stroke: rgba(255,255,255,0.14); stroke-width: 1.5; }
.hf-door-gap { stroke: #000; stroke-width: 4; }
.hf-door  { fill: none; stroke: var(--primary); stroke-width: 1.8; opacity: 0.7; }
.hf-lab   { fill: rgba(255,255,255,0.4); font: 600 16px/1 'Inter',sans-serif; letter-spacing: 1px; }
.hf-lab2  { fill: rgba(255,255,255,0.34); font: 600 12px/1 'Inter',sans-serif; letter-spacing: 0.5px; }
.hf-table { fill: rgba(255,95,0,0.10); stroke: var(--primary); stroke-width: 1.4; }
.hf-chair { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.22); stroke-width: 1; }
.hf-desk  { fill: rgba(255,255,255,0.02); stroke: rgba(255,255,255,0.20); stroke-width: 1.2; }
.hf-mon   { fill: rgba(255,95,0,0.18); stroke: var(--primary); stroke-width: 1; }
.hf-rack  { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.25); stroke-width: 1.4; }
.hf-ru    { fill: rgba(255,95,0,0.12); stroke: rgba(255,95,0,0.4); stroke-width: 0.6; }
.hf-panel { fill: rgba(255,255,255,0.02); stroke: rgba(255,255,255,0.22); stroke-width: 1.2; }
.hf-key   { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.18); stroke-width: 0.8; }
.hf-alarm-led { fill: var(--primary); animation: hfBlink 1.4s ease-in-out infinite; }
.hf-ac    { fill: rgba(255,255,255,0.03); stroke: var(--primary); stroke-width: 1.4; }
.hf-ac-led{ fill: var(--primary); animation: hfBlink 1.8s ease-in-out infinite; }
.hf-ac-card { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.3); stroke-width: 0.8; }
.hf-cam   { fill: var(--primary); }
.hf-cone  { fill: rgba(255,95,0,0.08); stroke: rgba(255,95,0,0.35); stroke-width: 1; transform-origin: center; animation: hfCone 5s ease-in-out infinite; }
.hf-cctv:nth-of-type(2) .hf-cone { animation-delay: 1.2s; }
.hf-cctv:nth-of-type(3) .hf-cone { animation-delay: 2.4s; }
.hf-ap    { fill: var(--primary); }
.hf-ring  { fill: none; stroke: var(--primary); stroke-width: 1.5; opacity: 0; transform-origin: center; animation: hfWifi 3s ease-out infinite; }
.hf-ring.r2 { animation-delay: 0.6s; }
.hf-ring.r3 { animation-delay: 1.2s; }
@keyframes hfBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes hfCone  { 0%,100% { opacity: 0.35; transform: rotate(-8deg); } 50% { opacity: 0.9; transform: rotate(8deg); } }
@keyframes hfWifi  { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: scale(1.1); } }
@media (max-width: 768px) { .hero-floor { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .hf-cone, .hf-ring, .hf-alarm-led, .hf-ac-led { animation: none; } }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(120px); }
.glow-1 { width: 600px; height: 600px; background: var(--primary); top: -200px; right: -100px; opacity: 0.25; animation: drift 14s ease-in-out infinite; }
.glow-2 { width: 500px; height: 500px; background: #FF8C42; bottom: -150px; left: -100px; opacity: 0.15; animation: drift 18s ease-in-out infinite reverse; }
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 820px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px;
    background: var(--primary-soft); border: 1px solid var(--border-glow);
    border-radius: 100px; font-size: 14px; font-weight: 500; color: var(--primary);
    margin-bottom: 28px; animation: fadeUp 0.8s var(--ease) both;
}
.badge-dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary); animation: blink 2s ease-in-out infinite; }
.hero-title {
    font-size: clamp(38px, 6vw, 72px); font-weight: 900; line-height: 1.08;
    letter-spacing: -1px; color: var(--white); margin-bottom: 24px;
    animation: fadeUp 0.8s var(--ease) 0.1s both;
}
.text-gradient {
    background: linear-gradient(120deg, var(--primary), #FF9D5C);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-subtitle { font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); margin-bottom: 40px; animation: fadeUp 0.8s var(--ease) 0.2s both; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 64px; animation: fadeUp 0.8s var(--ease) 0.3s both; }
.hero-stats { display: flex; gap: 56px; animation: fadeUp 0.8s var(--ease) 0.4s both; }
.stat-num { font-size: 42px; font-weight: 900; color: var(--white); letter-spacing: -1px; }
.stat-num span { color: var(--primary); }
.stat-label { font-size: 14px; color: var(--text-faint); margin-top: 2px; }
.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; }
.hero-scroll span { display: block; width: 26px; height: 44px; border: 2px solid var(--text-faint); border-radius: 20px; position: relative; }
.hero-scroll span::after { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--primary); border-radius: 2px; animation: scrollDot 1.8s ease-in-out infinite; }

section { position: relative; z-index: 2; padding: 100px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.section-tag { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--primary); margin-bottom: 16px; }
.section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--white); letter-spacing: -0.5px; line-height: 1.2; }
.section-desc { font-size: 17px; color: var(--text-dim); margin-top: 16px; }

.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card {
    position: relative; padding: 40px 28px 36px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); transition: var(--t); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.service-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--primary-soft), transparent 70%); opacity: 0; transition: var(--t); }
.service-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0; transform: scaleX(0.4); transition: var(--t); }
.service-card:hover { border-color: var(--border-glow); transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.45); }
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { opacity: 1; transform: scaleX(1); }
.service-card > * { position: relative; z-index: 1; }
.service-card h3 { font-size: 21px; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: 0.5px; }
.service-card p { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; max-width: 240px; }
.service-card p.p-fit { white-space: nowrap; max-width: none; }

.service-icon {
    width: 96px; height: 96px; margin: 0 auto 24px; position: relative;
    transition: var(--t);
}
.service-card:hover .service-icon { transform: scale(1.08); }

/* ===== SVG Line-Art Icons ===== */
.service-icon { display: grid; place-items: center; }
.svg-icon { width: 76px; height: 76px; color: var(--primary); overflow: visible; }
.service-card:hover .svg-icon { color: var(--primary); filter: drop-shadow(0 0 6px var(--primary-glow)); }

/* draw-on stroke animation */
.svg-icon path, .svg-icon rect, .svg-icon circle { transition: stroke 0.4s var(--ease); }
.svg-icon .dash { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 2.4s var(--ease) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 60; } 45%,100% { stroke-dashoffset: 0; } }

/* pulsing accent strokes */
.svg-icon .pulse { animation: strokePulse 1.6s ease-in-out infinite; }
@keyframes strokePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* glowing dots / nodes */
.svg-icon .dot { fill: var(--primary); stroke: var(--primary); animation: dotGlow 1.8s ease-in-out infinite; }
.svg-icon .dot.d2 { animation-delay: 0.3s; }
.svg-icon .dot.d3 { animation-delay: 0.6s; }
@keyframes dotGlow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; filter: drop-shadow(0 0 4px var(--primary)); } }
.icon-cctv .dot { animation: cctvRec 1.38s ease-in-out infinite; }
@keyframes cctvRec { 0%,100% { opacity: 0.2; } 50% { opacity: 1; filter: drop-shadow(0 0 6px var(--primary)); } }
/* 網絡系統周邊節點: 閃更快, 暗時更暗 (專屬覆寫, 不影響全站) */
.icon-network .dot { animation: netDot 0.8s ease-in-out infinite; }
.icon-network .nd1 { animation-delay: 0s; }
.icon-network .nd2 { animation-delay: 0.13s; }
.icon-network .nd3 { animation-delay: 0.27s; }
.icon-network .nd4 { animation-delay: 0.4s; }
.icon-network .nd5 { animation-delay: 0.53s; }
.icon-network .nd6 { animation-delay: 0.67s; }
@keyframes netDot { 0%,100% { opacity: 0.12; } 50% { opacity: 1; filter: drop-shadow(0 0 5px var(--primary)); } }
@keyframes doorHandle { 0%,12% { transform: rotate(0deg); } 35%,55% { transform: rotate(28deg); } 78%,100% { transform: rotate(0deg); } }

/* sound waves */
.svg-icon .wave { opacity: 0.5; animation: waveFade 1.6s ease-in-out infinite; }
.svg-icon .wave.w2 { animation-delay: 0.3s; }
@keyframes waveFade { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
/* alarm sound waves: 向外擴散像發出聲音 */
.svg-icon .sw { transform-origin: 24px 24px; opacity: 0; animation: soundWave 1.8s ease-out infinite; }
.svg-icon .sw1 { animation-delay: 0s; }
.svg-icon .sw2 { animation-delay: 0.3s; }
.svg-icon .sw3 { animation-delay: 0.6s; }
@keyframes soundWave { 0% { opacity: 0; transform: scale(0.5); } 15% { opacity: 1; } 70% { opacity: 0.15; } 100% { opacity: 0; transform: scale(1.25); } }

/* bell ring */
.service-card:hover .svg-icon .bell { transform-origin: 24px 12px; animation: bellRing 0.8s ease-in-out; }
@keyframes bellRing { 0%,100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } }

/* flame flicker */
.svg-icon .flame { transform-origin: 24px 40px; animation: flameFlick 0.9s ease-in-out infinite alternate; }
.svg-icon .flame.f2 { transform-origin: 24px 40px; animation: flameFlickInner 0.55s ease-in-out infinite alternate; }
.svg-icon .flame.f3 { fill: var(--primary); stroke: none; animation: flameSpark 1.3s ease-out infinite; }
@keyframes flameFlick { 0% { transform: scaleY(1) scaleX(1) skewX(0deg); } 50% { transform: scaleY(1.12) scaleX(0.94) skewX(3deg); } 100% { transform: scaleY(1.05) scaleX(0.97) skewX(-3deg); } }
@keyframes flameFlickInner { 0% { transform: scaleY(0.92) translateY(0); } 100% { transform: scaleY(1.18) translateY(-1px); } }
@keyframes flameSpark { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scale(1.1); } }

/* AI eye: 眼球上下左右掃視 + 眨眼 */
.icon-ai .ai-eye { transform-box: fill-box; transform-origin: center; animation: aiBlink 4s ease-in-out infinite; }
.icon-ai .ai-eye-white { stroke: currentColor; stroke-width: 1.6; opacity: 0.55; }
.icon-ai .ai-eyeball { transform-box: fill-box; transform-origin: center; animation: aiGaze 5s ease-in-out infinite; }
.icon-ai .ai-pupil { fill: var(--primary); stroke: none; filter: drop-shadow(0 0 4px var(--primary)); }
@keyframes aiGaze {
    0%, 12%   { transform: translate(0, 0); }
    18%, 28%  { transform: translate(2.6px, 0); }
    34%, 44%  { transform: translate(-2.6px, 0); }
    50%, 60%  { transform: translate(0, -1.6px); }
    66%, 76%  { transform: translate(0, 1.6px); }
    82%, 90%  { transform: translate(2px, -1.2px); }
    96%, 100% { transform: translate(0, 0); }
}
@keyframes aiBlink {
    0%, 46%, 54%, 92%, 100% { transform: scaleY(1); }
    49%, 51% { transform: scaleY(0.08); }
    95%, 97% { transform: scaleY(0.08); }
}

/* Scenario SVG icons */
.scenario-icon { display: grid; place-items: center; }
.scenario-icon .svg-icon { width: 36px; height: 36px; color: var(--primary); }
.scenario-card:hover .scenario-icon .svg-icon { filter: drop-shadow(0 0 6px var(--primary-glow)); }
.scenario-card:hover .scenario-icon { animation: float 2s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Scenarios grid */
.scenarios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.scenario-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 32px 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); transition: var(--t);
}
.scenario-card span { font-size: 16px; font-weight: 600; color: var(--text); }
.scenario-card:hover { border-color: var(--border-glow); transform: translateY(-5px); background: var(--surface-2); }
.scenario-card:hover span { color: var(--white); }

/* Advantage / Fluke */
.advantage-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.advantage-text .section-head { text-align: left; margin: 0; }
.advantage-text .section-tag { display: block; }
.advantage-text .section-title { text-align: left; }
.advantage-text p { font-size: 17px; color: var(--text-dim); margin: 20px 0 32px; }
.advantage-text strong { color: var(--primary); }
.advantage-visual { display: flex; justify-content: center; align-items: center; }
.advantage-visual { min-height: 460px; }
.advantage-visual .fk-visual { width: 100%; max-width: 380px; height: 460px; max-height: 70vh; aspect-ratio: auto; }
.advantage-visual .fk-svg { height: 100%; max-height: 70vh; }

/* Certifications */
.certifications { background: linear-gradient(180deg, transparent, rgba(255,95,0,0.03), transparent); }
.cert-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 900px; margin: 0 auto; }
.cert-badge {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 30px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; font-size: 18px; font-weight: 800; color: var(--white);
    letter-spacing: 1px; transition: var(--t);
}
.cert-icon { width: 46px; height: 46px; color: var(--primary); }
.cert-badge:hover { border-color: var(--border-glow); color: var(--primary); transform: translateY(-4px); box-shadow: 0 10px 30px var(--primary-soft); }

/* Emergency CTA */
.emergency-cta { overflow: hidden; }
.cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 300px; background: var(--primary); filter: blur(140px); opacity: 0.15; z-index: 0; }
.cta-inner {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    gap: 40px; padding: 56px; background: linear-gradient(135deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-glow); border-radius: 24px; flex-wrap: wrap;
}
.cta-inner .section-tag { display: block; }
.cta-text h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--white); margin-bottom: 10px; }
.cta-text p { color: var(--text-dim); font-size: 17px; }

/* Footer */
.footer { padding: 80px 0 32px; border-top: 1px solid var(--border); background: #060608; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { font-size: 14px; color: var(--text-dim); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: #FF5F00; }
.footer-brand p { color: var(--text-dim); font-size: 15px; margin-top: 18px; max-width: 260px; }
.footer-col h4 { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 16px; }
.footer-col p { font-size: 14px; color: var(--text-dim); margin-bottom: 8px; }
.footer-bottom { text-align: center; padding-top: 28px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); }

/* WhatsApp float */
.whatsapp-float {
    position: fixed; bottom: 28px; right: 28px; width: 60px; height: 60px;
    background: #25D366; border-radius: 50%; display: grid; place-items: center;
    color: var(--white); z-index: 999; box-shadow: 0 8px 24px rgba(37,211,102,0.4);
    transition: var(--t);
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 12px 32px rgba(37,211,102,0.6); }
.whatsapp-icon { display:grid; place-items:center; width:34px; height:34px; line-height:0; transform-origin:50% 50%; animation: waRing 2s ease-in-out infinite; }
.whatsapp-float svg { width: 34px; height: 34px; display:block; }
.whatsapp-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: waWave 2s ease-out infinite; pointer-events: none; }
.whatsapp-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: waWave 2s ease-out 1s infinite; pointer-events: none; }
@keyframes waRing {
    0%   { transform: rotate(0deg); }
    2%   { transform: rotate(16deg); }
    5%   { transform: rotate(-15deg); }
    8%   { transform: rotate(14deg); }
    11%  { transform: rotate(-13deg); }
    14%  { transform: rotate(12deg); }
    17%  { transform: rotate(-11deg); }
    20%  { transform: rotate(10deg); }
    23%  { transform: rotate(-9deg); }
    26%  { transform: rotate(8deg); }
    29%  { transform: rotate(-7deg); }
    32%  { transform: rotate(6deg); }
    35%  { transform: rotate(-5deg); }
    38%  { transform: rotate(4deg); }
    41%  { transform: rotate(-3deg); }
    44%  { transform: rotate(2deg); }
    47%  { transform: rotate(-1deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
@keyframes waWave {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Global animations */
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes scrollDot { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 22px; } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
    /* header 響應式提至 1024 */
    .nav {
        position: fixed; top: 72px; left: 0; right: 0;
        flex-direction: column; gap: 0; padding: 16px;
        background: rgba(10,10,12,0.98); backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        transform: translateY(calc(-100% - 80px)); transition: var(--t);
        pointer-events: none; visibility: hidden;
    }
    .nav.active { transform: translateY(0); pointer-events: auto; visibility: visible; }
    .nav a { padding: 14px 16px; font-size: 16px; }
    .mobile-menu-toggle { display: flex; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .scenarios-grid { grid-template-columns: repeat(2, 1fr); }
    .advantage-inner { grid-template-columns: 1fr; gap: 40px; }
    .advantage-text .section-head, .advantage-text .section-title { text-align: center; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .logo-text { font-size: 18px; }
    .logo-mark { width: 34px; height: 34px; }
    .hero { min-height: auto; padding: 130px 0 70px; }
    /* iOS-HERO-OPT: 手機降低渲染負擔 + 文字立即顯示，消除 iPhone 首屏文字延遲 */
    /* 1) 移除手機上極重的大半徑模糊與其漂移動畫（iOS GPU 瓶頸） */
    .hero-glow { filter: blur(48px); animation: none; }
    /* 2) 停用 hero-floor SVG 濾鏡發光與無限動畫（手機本就 opacity:0.28，視覺幾乎無差） */
    .hero-floor .hf-cam, .hero-floor .hf-alarm-led, .hero-floor .hf-ac-led { filter: none; }
    .hero-floor .hf-cone, .hero-floor .hf-ring, .hero-floor .hf-alarm-led, .hero-floor .hf-ac-led { animation: none; }
    /* 3) 文字不靠 fadeUp 起始隱藏 → 立即可見（主人關注點：H1 以下文字秒顯） */
    .hero-badge, .hero-title, .hero-subtitle, .hero-cta, .hero-stats {
        animation: none; opacity: 1; transform: none;
    }
    .hero-stats { gap: 32px; }
    .stat-num { font-size: 32px; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { justify-content: center; }
    section { padding: 70px 0; }
    .cta-inner { padding: 36px 28px; flex-direction: column; text-align: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .whatsapp-float { width: 54px; height: 54px; bottom: 20px; right: 20px; }
}
@media (max-width: 480px) {
    .services-grid, .scenarios-grid { grid-template-columns: 1fr; }
    .cert-badge { padding: 14px 22px; font-size: 16px; }
}

/* ===================== SUBPAGE SHARED ===================== */
.page-banner {
    position: relative; padding: clamp(140px, 13vw, 200px) 0 clamp(70px, 8vw, 120px); overflow: hidden;
    border-bottom: 1px solid var(--border);
    min-height: 52vh; display: flex; align-items: center;
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(255,95,0,0.10), transparent 60%),
        radial-gradient(700px 500px at 0% 120%, rgba(255,140,66,0.06), transparent 60%),
        var(--bg);
}
/* moving tech grid */
.page-banner::before {
    content: ""; position: absolute; inset: -2px; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,95,0,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,95,0,0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, #000 30%, transparent 80%);
    animation: bannerGrid 22s linear infinite;
}
@keyframes bannerGrid {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 46px 92px, 92px 46px; }
}
.page-banner .hero-glow { position: absolute; z-index: 0; }
.page-banner .glow-1 { width: 560px; height: 560px; top: -180px; right: -80px; opacity: 0.22; animation: drift 16s ease-in-out infinite; }
.page-banner .container { position: relative; z-index: 3; }
/* floating tech particles */
.banner-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.banner-deco i {
    position: absolute; display: block; border-radius: 2px;
    background: var(--primary); box-shadow: 0 0 14px rgba(255,95,0,0.7);
}
.banner-deco i:nth-child(1) { width: 8px;  height: 8px;  top: 24%; left: 12%; opacity: 0.7; animation: floatY 7s ease-in-out infinite; }
.banner-deco i:nth-child(2) { width: 5px;  height: 5px;  top: 62%; left: 22%; opacity: 0.5; animation: floatY 9s ease-in-out infinite 0.6s; }
.banner-deco i:nth-child(3) { width: 10px; height: 10px; top: 38%; left: 84%; opacity: 0.6; animation: floatY 8s ease-in-out infinite 0.3s; }
.banner-deco i:nth-child(4) { width: 4px;  height: 4px;  top: 78%; left: 68%; opacity: 0.55; animation: floatY 6s ease-in-out infinite 1s; }
.banner-deco i:nth-child(5) { width: 6px;  height: 6px;  top: 18%; left: 56%; opacity: 0.45; animation: floatY 10s ease-in-out infinite 0.4s; }
.banner-deco span {
    position: absolute; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,95,0,0.55), transparent);
}
.banner-deco span:nth-child(6) { width: 220px; top: 30%; left: 8%;  animation: sweepX 9s linear infinite -1s; }
.banner-deco span:nth-child(7) { width: 160px; top: 72%; left: 55%; animation: sweepX 12s linear infinite -4s; }
/* products.html 額外漂浮物與跑線（其他頁僅 7 個子元素，不受影響） */
.banner-deco i:nth-child(8)  { width: 7px;  height: 7px;  top: 46%; left: 38%; opacity: 0.5;  animation: floatY 11s ease-in-out infinite 0.2s; }
.banner-deco i:nth-child(9)  { width: 5px;  height: 5px;  top: 28%; left: 72%; opacity: 0.45; animation: floatY 8.5s ease-in-out infinite 1.4s; }
.banner-deco i:nth-child(10) { width: 9px;  height: 9px;  top: 84%; left: 40%; opacity: 0.55; animation: floatY 7.5s ease-in-out infinite 0.8s; }
.banner-deco i:nth-child(11) { width: 4px;  height: 4px;  top: 54%; left: 92%; opacity: 0.4;  animation: floatY 9.5s ease-in-out infinite 1.7s; }
.banner-deco span:nth-child(12) { width: 180px; top: 18%; left: 30%; animation: sweepX 10.5s linear infinite -6s; }
.banner-deco span:nth-child(13) { width: 120px; top: 50%; left: 72%; animation: sweepX 8s linear infinite -2.5s; }
.banner-deco span:nth-child(14) { width: 200px; top: 88%; left: 15%; animation: sweepX 13s linear infinite -9s; }
/* products.html 再 +50% 漂浮物與跑線 */
.banner-deco i:nth-child(15) { width: 6px;  height: 6px;  top: 34%; left: 28%; opacity: 0.5;  animation: floatY 9s ease-in-out infinite 0.5s; }
.banner-deco i:nth-child(16) { width: 8px;  height: 8px;  top: 70%; left: 52%; opacity: 0.55; animation: floatY 7s ease-in-out infinite 1.2s; }
.banner-deco i:nth-child(17) { width: 4px;  height: 4px;  top: 14%; left: 44%; opacity: 0.4;  animation: floatY 10.5s ease-in-out infinite 0.9s; }
.banner-deco i:nth-child(18) { width: 7px;  height: 7px;  top: 58%; left: 76%; opacity: 0.5;  animation: floatY 8s ease-in-out infinite 1.6s; }
.banner-deco i:nth-child(19) { width: 5px;  height: 5px;  top: 88%; left: 18%; opacity: 0.45; animation: floatY 11.5s ease-in-out infinite 0.3s; }
.banner-deco span:nth-child(20) { width: 150px; top: 40%; left: 45%; animation: sweepX 11s linear infinite -7s; }
.banner-deco span:nth-child(21) { width: 190px; top: 60%; left: 22%; animation: sweepX 9.5s linear infinite -3s; }
.banner-deco span:nth-child(22) { width: 130px; top: 10%; left: 62%; animation: sweepX 12.5s linear infinite -10.5s; }
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-22px); }
}
@keyframes sweepX {
    0%   { transform: translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(110vw); opacity: 0; }
}
.breadcrumb { font-size: 14px; color: var(--text-faint); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-dim); transition: var(--t); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { margin: 0 8px; }
.page-banner h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 900; color: var(--white); letter-spacing: -1px; line-height: 1.1; }
.page-banner h1 .text-gradient { display: inline; }
.page-banner .lead { font-size: clamp(16px, 2vw, 19px); font-weight: 700; color: var(--text-dim); margin-top: 20px; max-width: 720px; }

.content { padding: clamp(56px, 6vw, 96px) 0; }
.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
    padding: 30px 26px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); transition: var(--t);
}
.feature-card:hover { border-color: var(--border-glow); transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,0,0,0.4); }
.feature-card .fc-icon {
    width: 50px; height: 50px; border-radius: 12px; background: var(--surface-2);
    border: 1px solid var(--border-glow); display: grid; place-items: center;
    font-size: 22px; color: var(--primary); margin-bottom: 18px;
}
.feature-card h3 { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: var(--text-dim); line-height: 1.7; }
.fc-kw { font-size: 11px; color: #6f6f6f; line-height: 1.6; margin: -4px 0 10px; letter-spacing: .2px; }
.fc-kw span { color: #9a9a9a; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse > div:first-child { order: 2; }
.split h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; color: var(--white); margin-bottom: 20px; letter-spacing: -0.5px; line-height: 1.35; }
.split p { font-size: 16px; color: var(--text-dim); margin-bottom: 16px; }
.split ul { list-style: none; margin: 20px 0; }
.split ul li { font-size: 15px; color: var(--text); padding: 10px 0 10px 30px; position: relative; border-bottom: 1px solid var(--border); }
.split ul li::before { content: '✓'; position: absolute; left: 0; top: 10px; color: var(--primary); font-weight: 800; }
.split-visual {
    aspect-ratio: 4/3; border-radius: var(--radius); border: 1px solid var(--border-glow);
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    display: grid; place-items: center; position: relative; overflow: hidden;
}
.split-visual::before { content: ''; position: absolute; width: 280px; height: 280px; background: var(--primary); filter: blur(110px); opacity: 0.12; }
.split-visual .big-icon { width: 90px; height: 90px; position: relative; z-index: 1; }
.split-visual .ph-label { position: absolute; bottom: 16px; font-size: 12px; letter-spacing: 2px; color: var(--text-faint); z-index: 1; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.spec-table th, .spec-table td { padding: 16px 24px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--border); }
.spec-table th { background: var(--surface-2); color: var(--primary); font-weight: 700; width: 30%; }
.spec-table td { color: var(--text-dim); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

/* WIP badge */
.wip-note {
    display: flex; align-items: center; gap: 14px; padding: 22px 28px;
    background: var(--primary-soft); border: 1px solid var(--border-glow);
    border-radius: var(--radius); color: var(--text); font-size: 15px; margin-top: 40px;
}
.wip-note strong { color: var(--primary); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-card {
    padding: 32px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); transition: var(--t);
}
.contact-card:hover { border-color: var(--border-glow); }
.contact-card h3 { font-size: 16px; color: var(--primary); font-weight: 700; margin-bottom: 18px; letter-spacing: 1px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.contact-item .ci-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary); font-size: 18px; }
.contact-item .ci-text { font-size: 15px; color: var(--text); line-height: 1.5; }
.contact-item .ci-text strong { display: block; color: var(--text-faint); font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.contact-item a { color: var(--text); transition: var(--t); }
.contact-item a:hover { color: var(--primary); }
.map-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); margin-top: 8px; filter: grayscale(0.3) contrast(1.1); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item {
    aspect-ratio: 4/3; border-radius: var(--radius); border: 1px solid var(--border);
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    position: relative; overflow: hidden; cursor: pointer; transition: var(--t);
    display: grid; place-items: center;
}
.gallery-item::before { content: ''; position: absolute; width: 200px; height: 200px; background: var(--primary); filter: blur(100px); opacity: 0.1; }
.gallery-item:hover { border-color: var(--border-glow); transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,0,0,0.4); }
.gallery-item .gi-tag { position: relative; z-index: 1; font-size: 12px; letter-spacing: 2px; color: var(--text-faint); }
.gallery-item .gi-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); font-size: 16px; font-weight: 700; color: var(--white); z-index: 2; }
.gallery-item .gi-overlay { position: absolute; inset: 0; background: rgba(255,95,0,0.92); display: grid; place-items: center; opacity: 0; transition: var(--t); z-index: 3; color: var(--black); font-weight: 700; font-size: 15px; }
.gallery-item:hover .gi-overlay { opacity: 1; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(6px); }
.modal-box {
    position: relative; z-index: 1; max-width: 560px; width: 100%; background: var(--surface);
    border: 1px solid var(--border-glow); border-radius: 20px; padding: 40px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6); animation: fadeUp 0.4s var(--ease);
}
.modal-box h3 { font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.modal-box .m-tag { font-size: 13px; letter-spacing: 2px; color: var(--primary); font-weight: 700; }
.modal-box p { color: var(--text-dim); font-size: 15px; line-height: 1.8; margin-top: 16px; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--white); font-size: 18px; cursor: pointer; transition: var(--t); }
.modal-close:hover { background: var(--primary); color: var(--black); }

/* CTA band */
.cta-band { text-align: center; padding: 90px 0; }
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: var(--white); margin-bottom: 16px; }
.cta-band p { color: var(--text-dim); font-size: 17px; margin-bottom: 32px; }

@media (max-width: 1024px) {
    .content-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; gap: 36px; }
    .split.reverse > div:first-child { order: 0; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .content-grid, .gallery-grid { grid-template-columns: 1fr; }
    .logo-text { display: none; }
    .page-banner { padding: 140px 0 70px; min-height: auto; }
    .spec-table th, .spec-table td { padding: 12px 14px; font-size: 13px; display: block; width: 100%; }
    .spec-table th { border-bottom: none; }
}

/* Big SVG icons in product split visuals */
.split-visual .big-icon { display: grid; place-items: center; }
.split-visual .big-icon .svg-icon { width: 90px; height: 90px; color: var(--primary); filter: drop-shadow(0 0 16px var(--primary-glow)); }

/* ===================== CABLING BANNER — 辦公室平面圖·文字置於平面圖正中央留白帶 ===================== */
/* 桌面：平面圖滿版長方形作背景，走線讓出中央留白帶，標題/.lead 疊在正中央（線不經過文字）。 */
.page-banner.banner-cabling {
    min-height: auto;
    padding: clamp(104px, 9vw, 132px) 0 clamp(28px, 3vw, 44px);   /* 讓出 fixed header，去除多餘留白 */
    display: block;
    position: relative;
}
/* 桌面長方形平面圖面板（背景層）*/
.banner-cabling .op-viewport {
    position: relative; z-index: 1; overflow: hidden; pointer-events: none;
    width: 100%;
    aspect-ratio: 1600 / 620;      /* 乾淨長方形，與 SVG viewBox 同比例，整圖完整不裁切 */
    max-height: 66vh;
    margin: 0 auto;
    opacity: 0.92;
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        radial-gradient(120% 90% at 50% 50%, rgba(255,95,0,0.05), transparent 70%),
        rgba(0,0,0,0.25);
}
.banner-cabling .op-viewport .op-svg {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; --op-dur: 16s;
}
.banner-cabling .op-viewport .op-svg-mobile { display: none; }   /* 手機版預設隱藏 */

/* 桌面：標題 + .lead 疊在平面圖中央留白帶（絕對定位置中）*/
/* banner 上下 padding 不對稱（上 ~104-132px / 下 ~28-44px），
   故以 banner 高度 50% 置中會偏高；用 padding 差的一半往下補償，
   讓文字對齊「可見圖面板」的真正中心。 */
.banner-cabling .container {
    position: absolute; z-index: 3;
    left: 50%;
    top: calc(50% + (clamp(104px, 9vw, 132px) - clamp(28px, 3vw, 44px)) / 2);
    transform: translate(-50%, -50%);
    width: 100%; text-align: center;
    pointer-events: none;
}
.banner-cabling .container .lead { margin-left: auto; margin-right: auto; }

/* 手機版：用另一張獨立直向動圖；文字回到圖上方（不疊圖，避免太擠）*/
@media (max-width: 600px) {
    .page-banner.banner-cabling { padding: 130px 0 0; }
    .banner-cabling .container {
        position: relative; left: auto; top: auto; transform: none;
        text-align: left; padding-bottom: 22px;
    }
    .banner-cabling .container .lead { margin-left: 0; margin-right: 0; }
    .banner-cabling .op-viewport {
        aspect-ratio: 720 / 1000;       /* 直向長方形 */
        max-height: 72vh;
    }
    .banner-cabling .op-viewport .op-svg { display: none; }            /* 隱藏桌面橫圖 */
    .banner-cabling .op-viewport .op-svg-mobile { display: block; --op-dur: 16s; }  /* 顯示手機直圖 */
}

/* ----- 機櫃 RACK + 交換機（一閃一閃端口）----- */
.banner-cabling .op-rack-box { stroke: rgba(255,95,0,0.45); stroke-width: 1.5; }
.banner-cabling .op-switch   { fill: #15151a; stroke: rgba(255,95,0,0.55); stroke-width: 1.2; }
.banner-cabling .op-swlab    { fill: rgba(255,255,255,0.72); font: 700 11px/1 'Inter','Noto Sans TC', sans-serif; letter-spacing: 0.5px; }
.banner-cabling .op-srv-tag-m { font-size: 22px; }   /* 手機版 SERVER 標籤加大 */
.banner-cabling .op-ru       { fill: #0a0a0d; stroke: rgba(255,95,0,0.25); stroke-width: 0.6; }
.banner-cabling .op-port     { fill: #FF5F00; animation: opPort 1.4s steps(1,end) infinite; }
@keyframes opPort {
    0%, 45%   { opacity: 1; }
    50%, 95%  { opacity: 0.18; }
    100%      { opacity: 1; }
}

/* ----- banner 跳線：同步畫出 → 維持 → 全部一齊清除 → 重畫（連續循環）----- */
.banner-cabling .op-cord {
    fill: none; stroke: #FF5F00; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900);
    animation: opBannerDraw var(--op-dur, 16s) ease-in-out infinite;
}
.banner-cabling .op-led {
    fill: #FF5F00; opacity: 0;
    animation: opBannerLed var(--op-dur, 16s) ease-in-out infinite;
}
/* 畫線速度加快一倍：畫線段由 3%→34%(31%) 縮半至 3%→18.5%(~15.5%)
   重置時間減 50%：原 86%→100%(14%) 減半為 86%→93%(7%)，其餘改為留白維持 */
@keyframes opBannerDraw {
    0%    { stroke-dashoffset: var(--len, 900); opacity: 0; }
    1.5%  { opacity: 1; }
    18.5% { stroke-dashoffset: 0; opacity: 1; }   /* 接駁完成（畫線加快一倍）*/
    89.5% { stroke-dashoffset: 0; opacity: 1; }   /* 維持點亮 */
    93%   { stroke-dashoffset: 0; opacity: 0; }    /* 全部一齊清除（重置減半）*/
    100%  { stroke-dashoffset: var(--len, 900); opacity: 0; }
}
@keyframes opBannerLed {
    0%, 15%   { opacity: 0; }
    18.5%     { opacity: 1; }   /* 接通即亮 */
    89.5%     { opacity: 1; }
    93%, 100% { opacity: 0; }   /* 與線同步熄滅 */
}

/* ===================== OFFICE FLOORPLAN — 辦公室平面圖·逐條接駁至 SERVER 房 ===================== */
.split-visual.op-floor { padding: 0; aspect-ratio: 4/3; --op-dur: 14s; }
.op-floor .op-svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
/* 外牆 / 門口 */
.op-wall  { fill: rgba(255,95,0,0.03); stroke: rgba(255,255,255,0.28); stroke-width: 2.5; stroke-linejoin: round; }
.op-door  { fill: none; stroke: rgba(255,95,0,0.55); stroke-width: 1.6; }
/* 房間 */
.op-room  { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.20); stroke-width: 1.4; }
.op-fix   { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1.2; }
/* SERVER 房 */
.op-srv   { fill: rgba(255,95,0,0.06); stroke: rgba(255,95,0,0.55); stroke-width: 2; }
.op-rack  { fill: #16161b; stroke: rgba(255,95,0,0.4); stroke-width: 1; }
.op-ru    { fill: #0a0a0d; stroke: rgba(255,95,0,0.3); stroke-width: 0.5; }
.op-hub   { fill: var(--primary); }
.op-bus   { stroke: rgba(255,95,0,0.6); stroke-width: 2.4; stroke-linecap: round; }
/* 設備（電視/投影機/電話/會議系統/打印機） */
.op-dev   { fill: rgba(255,95,0,0.14); stroke: rgba(255,95,0,0.5); stroke-width: 1; }
.op-dlab  { fill: rgba(255,255,255,0.6); font: 600 11px/1 'Noto Sans TC', sans-serif; }
/* 工作台 */
.op-desk  { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.22); stroke-width: 1.2; }
.op-pc    { fill: rgba(255,95,0,0.18); stroke: rgba(255,95,0,0.4); stroke-width: 0.6; }
/* 文字 */
.op-tag     { fill: rgba(255,255,255,0.55); font: 600 12px/1 'Noto Sans TC', sans-serif; }
.op-zone    { fill: rgba(255,255,255,0.40); font: 700 13px/1 'Noto Sans TC', sans-serif; letter-spacing: 2px; }
.op-srv-tag { fill: var(--primary); font: 800 13px/1 'Inter','Noto Sans TC', sans-serif; letter-spacing: 1px; }
/* 跳線：逐條畫出接駁至 SERVER 房，連續循環 */
.op-cord {
    fill: none; stroke: #FF5F00; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 900; stroke-dashoffset: 900;
    animation: opDraw var(--op-dur, 14s) ease-in-out infinite;
}
.op-led { fill: #FF5F00; opacity: 0; animation: opLed var(--op-dur, 14s) ease-in-out infinite; }
@keyframes opDraw {
    0%   { stroke-dashoffset: 900; opacity: 0; }
    2%   { opacity: 1; }
    20%  { stroke-dashoffset: 0; opacity: 1; }
    90%  { stroke-dashoffset: 0; opacity: 1; }
    98%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 900; opacity: 0; }
}
@keyframes opLed {
    0%, 15%  { opacity: 0; }
    20%      { opacity: 1; }
    60%      { opacity: 0.4; }
    90%      { opacity: 1; }
    98%,100% { opacity: 0; }
}
@media (max-width: 600px) {
    .split-visual.op-floor { --op-dur: 14s; }
}

/* ===================== FLUKE Versiv 線路認證儀（split-visual fk-visual） ===================== */
.split-visual.fk-visual { padding: 24px; aspect-ratio: 4/3; --fk-dur: 6s; }
.fk-visual .fk-svg { width: auto; height: 100%; max-width: 100%; display: block; position: relative; z-index: 1; }
/* 上方 adapter */
.fk-adapter      { fill: #2b2e33; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.fk-adapter-top  { fill: #232529; }
.fk-adapter-lab  { fill: #ffffff; font: 800 13px/1 'Inter',sans-serif; letter-spacing: 0.5px; }
.fk-adapter-sub  { fill: var(--primary); font: 600 9px/1 'Inter',sans-serif; letter-spacing: 1px; }
.fk-adapter-tiny { fill: rgba(255,255,255,0.45); font: 500 7px/1 'Inter',sans-serif; letter-spacing: 0.3px; }
/* 機身 */
.fk-body  { fill: var(--primary); stroke: rgba(0,0,0,0.25); stroke-width: 1.5; }
.fk-face  { fill: #2b2e33; }
.fk-brand     { fill: #ffffff; font: 800 16px/1 'Inter',sans-serif; letter-spacing: 0.5px; }
.fk-brand-sub { fill: var(--primary); font: 600 9px/1 'Inter',sans-serif; letter-spacing: 1.5px; }
.fk-model     { fill: rgba(255,255,255,0.55); font: 800 12px/1 'Inter',sans-serif; letter-spacing: 1px; }
/* 屏幕 */
.fk-screen   { fill: #06120b; stroke: rgba(0,0,0,0.5); stroke-width: 2; }
.fk-bar      { fill: #11331f; }
.fk-bar-l    { fill: rgba(255,255,255,0.8); font: 600 9px/1 'Inter',sans-serif; }
.fk-bar-r    { fill: #2ee06a; font: 800 11px/1 'Inter',sans-serif; letter-spacing: 0.5px; }
.fk-graph-bg { fill: #020806; stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.fk-grid     { stroke: rgba(255,255,255,0.08); stroke-width: 0.6; }
.fk-read     { fill: rgba(255,255,255,0.78); font: 600 9px/1 'Inter',sans-serif; }
.fk-main     { fill: rgba(46,224,106,0.18); stroke: #2ee06a; stroke-width: 0.8; }
.fk-main-lab { fill: #2ee06a; font: 700 8px/1 'Inter',sans-serif; }
.fk-main-tick{ fill: none; stroke: #2ee06a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 限值線（橙虛線） */
.fk-limit  { fill: none; stroke: var(--primary); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.7; }
.fk-cursor { fill: var(--primary); }
/* 衰減曲線描繪動畫 */
.fk-curve {
    fill: none; stroke: #2ee06a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 260; stroke-dashoffset: 260;
    animation: fkDraw var(--fk-dur,6s) ease-in-out infinite;
}
@keyframes fkDraw {
    0%   { stroke-dashoffset: 260; }
    35%  { stroke-dashoffset: 0; }
    88%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 260; }
}
/* 中央大打勾 + PASS 字 */
.fk-check-ring { fill: none; stroke: #2ee06a; stroke-width: 3; opacity: 0; transform-origin: center;
    animation: fkRing var(--fk-dur,6s) ease-in-out infinite; }
.fk-check {
    fill: none; stroke: #2ee06a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 70; stroke-dashoffset: 70;
    animation: fkTick var(--fk-dur,6s) ease-in-out infinite;
}
@keyframes fkTick {
    0%,40%  { stroke-dashoffset: 70; }
    58%     { stroke-dashoffset: 0; }
    90%     { stroke-dashoffset: 0; }
    100%    { stroke-dashoffset: 70; }
}
@keyframes fkRing {
    0%,40%  { opacity: 0; transform: scale(0.6); }
    55%     { opacity: 0.9; transform: scale(1); }
    90%     { opacity: 0.9; transform: scale(1); }
    100%    { opacity: 0; transform: scale(1.05); }
}
.fk-pass-word { animation: fkPass var(--fk-dur,6s) ease-in-out infinite; }
@keyframes fkPass {
    0%,45%  { opacity: 0.15; }
    58%     { opacity: 1; }
    90%     { opacity: 1; }
    100%    { opacity: 0.15; }
}
/* 按鍵 */
.fk-btn      { fill: #232529; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.fk-btn-test { fill: #1a1c1f; }
.fk-btn-lab  { fill: rgba(255,255,255,0.85); font: 700 11px/1 'Inter',sans-serif; letter-spacing: 0.5px; }
.fk-btn-tick { fill: none; stroke: #2ee06a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fk-power    { fill: #2ee06a; }
@media (max-width: 600px) {
    .split-visual.fk-visual { padding: 16px; aspect-ratio: 3/4; }
}

/* ===================== 4K / 超寬屏彈性（≥ 1920px） ===================== */
@media (min-width: 1920px) {
    .container { max-width: clamp(1500px, 80vw, 1680px); }
}
@media (min-width: 2560px) {
    html { font-size: 18px; }
    .container { max-width: 1860px; }
}
@media (min-width: 3500px) {
    html { font-size: 22px; }
    .container { max-width: 2200px; }
}


/* === CCTV YOLO banner === */
.page-banner.yolo-banner { overflow: hidden; }
.page-banner.yolo-banner .yolo-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.page-banner.yolo-banner .yolo-bg .yolo-svg {
    width: 100%; height: 100%; display: block;
}
/* 左側暗化漸層，保證標題/lead 可讀 */
.page-banner.yolo-banner .yolo-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.78) 38%, rgba(8,8,10,0.45) 60%, rgba(8,8,10,0) 82%);
}
/* YOLO 場景已是滿版背景：隱藏此頁原本的格線/粒子/掃描，避免干擾 */
.page-banner.yolo-banner::before,
.page-banner.yolo-banner .banner-deco,
.page-banner.yolo-banner .hero-glow { display: none; }


/* ===================== 監控畫質放大查證對比（split-visual res-visual） ===================== */
.split-visual.res-visual { padding: 0; aspect-ratio: 4/3; --res-dur: 9s; }
.res-visual .res-svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
/* 場景底 */
.res-scene-bg { fill: #101013; }
.res-lot line { stroke: rgba(255,255,255,0.16); stroke-width: 1.4; }
/* 車（俯視，Cybertruck 風格硬朗棱角） */
.res-car-body { fill: #2b2b30; stroke: rgba(255,255,255,0.35); stroke-width: 1.4; }
.res-car-roof { fill: #1c1c22; stroke: rgba(255,255,255,0.15); stroke-width: 1; }
.res-car-bed { fill: #16161a; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.res-car-glass { fill: rgba(255,95,0,0.2); stroke: rgba(255,95,0,0.45); stroke-width: 1; }
.res-car-wheel { fill: #0a0a0c; stroke: rgba(255,255,255,0.12); stroke-width: 0.8; }
.res-car-light { fill: rgba(255,95,0,0.85); stroke: none; }
.res-plate-mini { fill: #e8e8e8; stroke: none; }

/* 星光級夜視自動循環對比動畫 */
.split-visual.nv-visual { padding: 0; aspect-ratio: 4/3; overflow: hidden; }
.nv-svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
/* 普通鏡頭層自動淡出 → 露出底層星光級畫面，循環 */
.nv-normal { animation: nvFade 7s ease-in-out infinite; }
@keyframes nvFade {
  0%, 32%   { opacity: 1; }
  46%, 82%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
/* 角標籤文字隨畫面切換 */
.nv-tag-normal { animation: nvTagNormal 7s ease-in-out infinite; }
.nv-tag-star   { opacity: 0; animation: nvTagStar 7s ease-in-out infinite; }
@keyframes nvTagNormal { 0%,32% { opacity: 1; } 42%,90% { opacity: 0; } 98%,100% { opacity: 1; } }
@keyframes nvTagStar   { 0%,36% { opacity: 0; } 48%,86% { opacity: 1; } 94%,100% { opacity: 0; } }
/* 狀態圓點：普通=灰、星光級=橙 */
.nv-dot { fill: #9a9a9a; animation: nvDot 7s ease-in-out infinite; }
@keyframes nvDot { 0%,32% { fill: #9a9a9a; } 48%,86% { fill: #FF5F00; } 98%,100% { fill: #9a9a9a; } }
/* 鎖定框 + 引導線 */
.res-lock-box { fill: none; stroke: var(--primary); stroke-width: 2; }
.res-lead { stroke: rgba(255,95,0,0.5); stroke-width: 1; stroke-dasharray: 4 3; }
/* 放大面板 */
.res-zoom-frame { fill: #08080a; stroke: rgba(255,95,0,0.45); stroke-width: 1.6; }
.res-plate-base { fill: #f2f2f2; }
.res-glass circle { fill: none; stroke: var(--primary); stroke-width: 2; }
.res-glass line { stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; }
/* 三檔畫質層：預設隱藏，動畫循環顯示 */
.res-q { opacity: 0; }
.res-q-720, .res-q-1080, .res-q-4k {
    fill: #0a0a0a; font: 800 22px/1 'Inter','Noto Sans TC',sans-serif;
    letter-spacing: 0.5px; text-anchor: middle;
}
/* 720/1080 模糊改用 SVG feGaussianBlur（見 cctv.html，iOS 相容） */
/* 底部資訊文字：預設隱藏 */
.res-lab { fill: var(--primary); font: 800 30px/1 'Inter',sans-serif; letter-spacing: 1px; opacity: 0; }
.res-sub { fill: rgba(255,255,255,0.7); font: 600 12px/1 'Noto Sans TC',sans-serif; opacity: 0; }

/* 三檔同步循環：720P(0-33%) → 1080P(33-66%) → 4K(66-100%) */
.res-q-720,  .res-lab-720,  .res-sub-720  { animation: resQ720  var(--res-dur,9s) steps(1,end) infinite; }
.res-q-1080, .res-lab-1080, .res-sub-1080 { animation: resQ1080 var(--res-dur,9s) steps(1,end) infinite; }
.res-q-4k,   .res-lab-4k,   .res-sub-4k   { animation: resQ4k   var(--res-dur,9s) steps(1,end) infinite; }
@keyframes resQ720  { 0%,30% { opacity: 1; } 33%,100% { opacity: 0; } }
@keyframes resQ1080 { 0%,30% { opacity: 0; } 33%,63% { opacity: 1; } 66%,100% { opacity: 0; } }
@keyframes resQ4k   { 0%,63% { opacity: 0; } 66%,96% { opacity: 1; } 100% { opacity: 0; } }
/* 4K 階段鎖定框輕微脈動，強調「清晰可讀」 */
.res-lock-box { animation: resPulse var(--res-dur,9s) ease-in-out infinite; }
@keyframes resPulse {
    0%,63% { stroke: var(--primary); opacity: 0.6; }
    66%,96% { stroke: var(--primary); opacity: 1; }
    100% { opacity: 0.6; }
}
@media (max-width: 600px) {
    .split-visual.res-visual { padding: 0; aspect-ratio: 4/3; --res-dur: 9s; }
    .split-visual.nv-visual { padding: 0; aspect-ratio: 4/3; }
    .res-q-720, .res-q-1080, .res-q-4k { font-size: 22px; }
    .res-lab { font-size: 26px; }
    .res-sub { font-size: 11px; }
}