:root {
	 --primary-teal:#53928c; 
	 --deep-navy:#030f44; 
	 --neon-cyan:rgb(0, 232, 218); 
	 --black:#000; 
	 --white:#fff; 
	 --gray-300:#d1d5db; 
	 --gray-400:#9ca3af; 
	 --gray-500:#6b7280; 
	 --glass:rgba(3, 15, 68, 0.4); 
	 --glass-border:rgba(255, 255, 255, 0.1);
	 --glass-border2:rgba(255, 255, 255, 0.2);
}


@font-face {
    font-family: "Daytona W04 Condensed";
    src: url("fonts/34967a0402cdfcdc6ad38ff4e4b614bd.eot");
    src: url("fonts/34967a0402cdfcdc6ad38ff4e4b614bd.eot?#iefix")format("embedded-opentype"),
    url("fonts/34967a0402cdfcdc6ad38ff4e4b614bd.woff2")format("woff2"),
    url("fonts/34967a0402cdfcdc6ad38ff4e4b614bd.woff")format("woff"),
    url("fonts/34967a0402cdfcdc6ad38ff4e4b614bd.ttf")format("truetype"),
    url("fonts/34967a0402cdfcdc6ad38ff4e4b614bd.svg#Daytona W04 Condensed")format("svg");
}



        * {margin:0; padding:0; box-sizing:border-box;}
        body {background-color:var(--black); color:var(--white); font-family:'Inter', system-ui, -apple-system, sans-serif; overflow-x:hidden; }
        
        /* 強制所有連結、按鈕及具備按鈕功能的元素在懸停時顯示手指游標 */
        a, button, [role="button"], .btn-main, .btn-outline, .btn-get-touch, .btn-submit, #menu-btn { 
            cursor: pointer !important; 
        }
        
        a {text-decoration:none; color:inherit; transition:color 0.3s ease;}
        #bg-canvas {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; opacity:0.4;}
        .container {width:100%; max-width:1280px; margin:0 auto; padding:0 1.5rem;}
        .flex {display:flex;}
        .items-center {align-items:center;}
        .justify-between {justify-content:space-between;}
        .justify-center {justify-content:center;}
        .flex-col {flex-direction:column;}
        .grid {display:grid; gap:2rem;}

        @media (min-width: 768px) {
            .md-grid-2 {grid-template-columns:repeat(2, 1fr);}
            .flex-md-row {flex-direction:row;}
        }

        @media (min-width: 1024px) {
            .lg-grid-3 {grid-template-columns:repeat(3, 1fr);}
            .lg-grid-2 {grid-template-columns:repeat(2, 1fr);}
        }

        /* 導覽列樣式優化：整合為一組代碼 */   
        nav {position:fixed; top:0; width:100%; height:54px; z-index:1000; backdrop-filter:blur(10px);background-color: rgba(237, 241, 9, 0.14);border-bottom:1px solid var(--glass-border); display:flex; align-items:center;/*background:var(--glass);*/ }
        .nav-content {display:flex; justify-content:space-between; align-items:center; width:100%; position: relative;}
        .logo {display:flex; align-items:center; gap:0.5rem;}
        .logo-container{ width: 140px; height: auto; position: relative; top: -2px}
.logo-container img{ display: block; width: 100%; height: auto}
        
        /* 整合後的導覽連結列表 */
        .nav-links {
            display: none; 
            flex-direction: column; 
            position: absolute; 
            top: 60px; 
            left: -1.5rem; 
            width: calc(100% + 3rem); 
            background: rgba(0,0,0,0.8); 
            padding: 1rem; 
            border-top: 1px solid var(--glass-border); 
            text-align: center;
        }
        .nav-links.show { display: flex; }
        .nav-links a { padding: 1rem 0; display: block; }
		.nav-links a.active{color: var(--neon-cyan); text-decoration: underline; text-underline-offset: 3px;}
        .nav-links a:hover { color:#FFF; }

        @media (min-width: 768px) { 
            .nav-links {
                display: flex !important; 
                flex-direction: row; 
                position: static; 
                width: auto; 
                background: none; 
                padding: 0; 
                border: none; 
                gap: 2rem;
                align-items: center;
            } 
            .nav-links a { padding: 0; }
			.nav-links a.btn-get-touch{ padding: 10px}
        }

        .btn-get-touch {
            padding:0.5rem 1.25rem; 
            border-radius:9999px; 
            font-weight:600; 
            font-size:0.875rem; 
            text-transform:uppercase; 
            letter-spacing:0.05em; 
            background:linear-gradient(135deg, var(--primary-teal), var(--neon-cyan)); 
            color:var(--black) !important;
        }
        
        @media (max-width: 767px) {
            .nav-links a.btn-get-touch {
                margin: 10px 100px ;
                border-radius: 50px;
            }
        }

        #menu-btn {background:none; border:none; color:white; cursor:pointer; padding:0.5rem;}
        @media (min-width: 768px) { #menu-btn {display:none;} }

        section {padding:6rem 0; width: 100%; display: block}
        .reveal {opacity:0; transform:translateY(80px); transition:all 1s ease-out;}
		.reveal.sl {opacity:0; transform:translateY(150px); transition:all 4s ease-out;}
        .reveal.active {opacity:1; transform:translateY(0);}
        
        #home {min-height:100vh; display:flex; align-items:center; text-align:center; padding: 0px}
        .hero-title {font-size:3rem; font-weight:900; margin-bottom:2rem; line-height:1.1;}

        @media (min-width: 768px) { .hero-title {font-size:5rem;} }

        .text-cyan {color:var(--neon-cyan);}
        #hero-subtext {font-size:1.125rem; color:var(--gray-300); max-width:48rem; margin:0 auto 3rem; line-height:1.6; min-height:4em; white-space:pre-wrap; text-align:center; }

        @media (min-width: 768px) { #hero-subtext {font-size:1.5rem;} }

        .hero-btns {display:flex; flex-direction:column; gap:1.5rem; justify-content:center; margin: 0px 80px}
        @media (min-width: 640px) { .hero-btns {flex-direction:row;} }

        .data-grid-container .btn-main {padding:1rem 2rem; border-radius:8px; font-weight:bold; font-size:1.125rem; background:linear-gradient(135deg, var(--primary-teal), var(--neon-cyan)); color:var(--black); transition:all 0.3s ease; display: inline-block;}
        .data-grid-container .btn-outline {padding:1rem 2rem; border-radius:8px; font-weight:bold; font-size:1.125rem; border:1px solid rgba(255,255,255,0.2); transition:all 0.3s ease; display: inline-block;}
        .btn-main:hover {transform:translateY(-2px); box-shadow:0 0 15px rgba(0, 232, 218, 0.4);}
        .btn-outline:hover {border-color:var(--neon-cyan);}
        .section-tag {color:var(--neon-cyan); font-size:0.875rem; font-weight:bold; text-transform:uppercase; letter-spacing:0.2em; margin-bottom:1rem; display:block;}
        .section-title {font-size:2.5rem; font-weight:bold; margin-bottom:1.5rem; color: var(--neon-cyan)}
        .about-text {color:var(--gray-300); line-height:1.4; margin-bottom:1.5rem; text-align: justify; font-family: Daytona W04 Condensed; font-size: 1.1rem}
        .glass-card {background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--glass-border2); padding:1.5rem; border-radius:1rem;}

        @keyframes float { 0%, 100% {transform:translateY(0px);} 50% {transform:translateY(-15px);} }
        .animate-float {animation:float 4s ease-in-out infinite;}
        .service-card {background:var(--glass); border:1px solid var(--glass-border); padding:2rem; border-radius:1.5rem; transition:all 0.3s ease;backdrop-filter: blur(4px)}
.service-card svg{ width: 64px; height: 64px; stroke-width: 0.5;}
        .service-card:hover {border-color:rgba(0,232,218,0.5); transform:translateY(-5px);}
        .icon-box {width:64px; height:64px;  border-radius:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; color:var(--neon-cyan); margin-right: 10px}
        .service-card h4 {font-size:1.5rem; font-weight:bold; margin-bottom:1.5rem;}
        .service-card p {color:var(--gray-400); font-size:1rem; line-height:1.3; text-align: justify; font-family: Daytona W04 Condensed}
        .contact-info-item {display:flex; gap:1rem; margin-bottom:2rem;}
        .contact-icon {color:var(--neon-cyan); flex-shrink:0;}
        .contact-label {font-weight:bold; font-size:1.125rem; display:block;}
        .contact-desc {color:var(--gray-400);}
        .form-group {margin-bottom:1.5rem; position: relative;}
        .form-label {display:block; font-size:0.75rem; color:var(--gray-500); text-transform:uppercase; margin-bottom:0.5rem;}
        .form-input {width:100%; background:rgba(0,0,0,0.5); border:1px solid var(--glass-border2); border-radius:0.5rem; padding:0.75rem; color:white; outline:none; transition:border-color 0.3s;}
        .form-input:focus {border-color:var(--neon-cyan);}
        
        /* 表單驗證樣式 */
        .form-input.invalid { border-color: #ff4d4d; }
        .error-text { color: #ff4d4d; font-size: 0.7rem; margin-top: 0.25rem; display: none; }
        .form-input.invalid + .error-text { display: block; }
        
        /* 鎖定狀態樣式 */
        .form-input:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-submit:disabled { opacity: 0.8; cursor: not-allowed; filter: grayscale(0.5); }

        .btn-submit {width:100%; padding:1rem; background:linear-gradient(135deg, var(--primary-teal), var(--neon-cyan)); border:none; border-radius:0.5rem; font-weight:bold; text-transform:uppercase; cursor:pointer; margin-top:1rem; color: var(--black);}
        footer {padding:3rem 0; border-top:1px solid var(--glass-border); text-align:center; color:var(--gray-500); font-size:0.875rem;}

        .about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
        .feature-box { border: 1px solid var(--glass-border); padding: 2rem 1.5rem; border-radius: 1rem; text-align: center; transition: all 0.3s ease; backdrop-filter:blur(4px)}
        .feature-box:hover { border-color: var(--neon-cyan); transform: translateY(-5px); }
        .feature-box i { color: var(--neon-cyan); width: 40px; height: 40px; margin-bottom: 1rem; }
		.feature-box svg{ width: 64px; height: 64px; stroke-width: 0.5; opacity: 0.6; color:var(--neon-cyan)  }
        .feature-box h4 { font-size: 1rem; font-weight: normal; color: var(--white); line-height: 1.3; color:var(--neon-cyan) }

        /* Data Grid Background */
        .data-grid-container {
            --bg-color: #020617;
            --grid-color: #1e3a8a;
            --active-color: #3b82f6;
            --flicker-color: #ffffff;
            --cell-size: 50px;
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: var(--bg-color);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .grid-container {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fill, var(--cell-size));
            grid-template-rows: repeat(auto-fill, var(--cell-size));
            justify-content: center;
            align-content: center;
            opacity: 0.8;
            transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            mask-image: radial-gradient(circle at center, black 20%, transparent 85%);
            -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 85%);
        }

        .grid-cell { width: var(--cell-size); height: var(--cell-size); position: relative; }
        .grid-cell::after {
            content: ''; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;
            background: var(--grid-color); border-radius: 1px; opacity: 0;
            animation: data-entrance 1s ease-out forwards, data-multiWave 4s infinite ease-in-out;
            animation-delay: var(--load-delay), var(--wave-delay);
        }

        @keyframes data-entrance { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 0.3; transform: scale(1); } }
        @keyframes data-multiWave {
            0%, 100% { opacity: 0.2; transform: translateY(0) scale(1); background: var(--grid-color); }
            50% { opacity: 0.9; transform: translateY(-12px) scale(1.1); background: var(--active-color); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
        }

        .grid-cell.flicker::before {
            content: ''; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;
            background: var(--flicker-color); z-index: 10; border-radius: 1px;
            box-shadow: 0 0 15px var(--flicker-color); animation: data-pulseFlicker 1.5s ease-in-out infinite;
        }

        @keyframes data-pulseFlicker { 0%, 100% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.05); } }

        .glow-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 0%, var(--bg-color) 90%); z-index: 5; pointer-events: none; }
        
        .aboutbg { position: absolute; height: auto; top: -100px; display: block; right: -600px; z-index: -1 }
        .aboutbg img { 
            display: block; 
            width: 80%; 
            height: auto;
            filter: brightness(0.5);
        }
        
        @keyframes breatheBrightness {
            0%, 100% { filter: brightness(0.5); }
            50% { filter: brightness(1.5); }
        }

        .aboutbg.active img {
            animation: breatheBrightness 10s infinite ease-in-out;
        }

        #waveCanvas { width: 100%; height: 500px; display: block; }



	.modal-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 8, 30, 0.35); backdrop-filter:blur(8px); z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity 0.3s ease;}
.modal-overlay.active {display:flex; opacity:1;}
.modal-container {background:rgba(10, 25, 60, 0.95); border:1px solid rgba(0, 232, 218, 0.3); max-width:800px; width:100%; max-height:80vh; border-radius:12px; position:relative; box-shadow:0 0 30px rgba(0, 232, 218, 0.1); display:flex; flex-direction:column; transform:translateY(20px); transition:transform 0.3s ease;}
.modal-overlay.active .modal-container {transform:translateY(0);}
.modal-header {padding:20px 30px; border-bottom:1px solid rgba(255, 255, 255, 0.1); display:flex; justify-content:space-between; align-items:center;}
.modal-title {color:#00e8da; font-size:1.5rem; font-weight:bold; margin:0;}
.modal-close {background:transparent; border:none; color:#fff; cursor:pointer; padding:5px; transition:color 0.2s;}
.modal-close:hover {color:#00e8da;}
.modal-body {padding:30px; overflow-y:auto; color:#cbd5e1; line-height:1.6; font-size:0.95rem;}
.modal-body h4 {color:#fff; margin-top:1.5rem; margin-bottom:0.5rem;}
.modal-body p {margin-bottom:1rem;}