@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');
:root{--navy:#07192f;--blue:#0b5cff;--light:#f3f6fa;--ink:#122137;--muted:#657187;--line:#dce2ea}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'Noto Sans TC',sans-serif;background:#fff}a{text-decoration:none}.topbar{height:82px;padding:0 6vw;display:flex;align-items:center;background:#fff;position:relative;z-index:20;border-bottom:1px solid #eef1f5}.brand{display:flex!important;align-items:center;gap:12px;padding:0!important}.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--blue);color:#fff;font:bold 23px 'Space Grotesk';transform:skew(-8deg)}.brand strong{display:block;font-size:18px;letter-spacing:.12em}.brand small{display:block;font:600 8px 'Space Grotesk';letter-spacing:.18em;color:#8a94a5}.nav-links{display:flex;align-items:center;height:100%}.nav-links .w3-button{height:100%;display:flex;align-items:center;padding:0 20px;font-size:14px;font-weight:600}.nav-links .w3-button:hover{background:#f4f7fb!important;color:var(--blue)!important}.contact-button{background:var(--navy);color:#fff;margin-left:16px;padding:13px 19px!important;font-weight:700}.contact-button span,.primary-action span{margin-left:24px}.hero{background:var(--navy);color:#fff;overflow:hidden}.hero-grid{min-height:650px;padding-left:7vw}.hero-copy{padding:100px 5vw 70px 0;position:relative;z-index:2}.eyebrow{margin:0 0 24px;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;color:#a9bad1}.eyebrow span{width:28px;height:2px;background:var(--blue);display:inline-block;vertical-align:middle;margin-right:10px}.hero h1{font-size:clamp(44px,5.5vw,78px);font-weight:800;line-height:1.16;letter-spacing:-.04em;margin:0}.hero h1 em,.contact-title h2 em{font-style:normal;color:#4d83ff}.hero-lead{max-width:600px;font-size:18px;line-height:1.9;color:#b4c1d2;margin:32px 0}.hero-actions{display:flex;gap:28px;align-items:center;margin-top:38px}.primary-action{background:var(--blue);color:#fff;padding:17px 22px;font-weight:700}.text-action{color:#d8e1ed;font-size:14px;border-bottom:1px solid #536175;padding:15px 0}.text-action span{margin-left:12px}.hero-visual{min-height:650px;position:relative;background:radial-gradient(circle at center,#113a74 0,#0a2446 35%,#07192f 68%);overflow:hidden}.hero-visual:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:50px 50px}.tech-orbit{position:absolute;width:460px;height:460px;top:95px;left:50%;transform:translateX(-50%)}.orbit{position:absolute;border:1px solid #5a7cae80;border-radius:50%;inset:35px}.orbit-two{inset:95px;border-color:#4976bc;transform:rotate(25deg)}.core{position:absolute;width:160px;height:160px;left:150px;top:150px;border-radius:50%;background:linear-gradient(145deg,#1268ff,#073e9f);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 70px #1768ff7d}.core b{font:700 62px 'Space Grotesk';line-height:1}.core small{font:600 9px 'Space Grotesk';letter-spacing:.3em}.node{position:absolute;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid #7194c9;background:#0a2446;font:700 11px 'Space Grotesk';letter-spacing:.12em}.node-a{top:12px;left:198px}.node-b{right:5px;bottom:94px}.node-c{left:10px;bottom:90px}.trust-strip{padding:0 7vw;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}.trust-strip>div{padding:28px 3vw;border-right:1px solid var(--line);display:flex;align-items:center;gap:14px}.trust-strip>div:first-child{padding-left:0}.trust-strip>div:last-child{border:0}.trust-strip b{font:700 26px 'Space Grotesk';color:var(--blue)}.trust-strip span{font-size:13px;color:var(--muted)}.section{padding:110px 6vw}.section-heading{max-width:1180px;margin:0 auto 55px;align-items:end}.eyebrow.dark{color:#607087}.section-heading h2,.about-copy h2,.contact-title h2{font-size:clamp(34px,4vw,54px);font-weight:800;letter-spacing:-.04em;margin:0}.section-intro{font-size:16px;line-height:1.9;color:var(--muted);padding:25px 0 0 7vw!important;max-width:620px}.service-grid{max-width:1210px;margin:auto}.service-card{min-height:410px;padding:38px;background:var(--light);border:1px solid transparent;transition:.25s}.service-card:hover{background:#fff;border-color:#b8c9e5;box-shadow:0 20px 50px #10274b12;transform:translateY(-5px)}.card-top{display:flex;justify-content:space-between;color:var(--blue);font:700 13px 'Space Grotesk';letter-spacing:.1em}.card-arrow{font-size:24px;color:#8c99ab}.service-card h3{font-size:25px;margin:70px 0 20px;font-weight:700}.service-card p{font-size:15px;line-height:1.9;color:var(--muted);min-height:88px}.service-card ul{padding:22px 0 0;margin:0;border-top:1px solid var(--line);display:flex;gap:8px;list-style:none;flex-wrap:wrap}.service-card li{font-size:12px;padding:6px 10px;background:#fff;color:#526176}.about-section{background:var(--navy);color:#fff}.about-visual{min-height:670px;background:#0c2648;display:grid;place-items:center;padding:50px}.blueprint{width:min(390px,100%);aspect-ratio:1;position:relative;border:1px solid #4c6e9d;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:30px 30px}.blueprint:before,.blueprint:after{content:'';position:absolute;border:1px solid #1767e9;border-radius:50%}.blueprint:before{inset:15%}.blueprint:after{inset:29%;background:#0b5cff26}.blueprint b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:39px;line-height:1.3;z-index:2}.bp-label{position:absolute;left:20px;top:20px;font:600 9px 'Space Grotesk';letter-spacing:.18em;color:#6fa0e3}.about-copy{padding:90px 8vw}.about-copy>p:not(.eyebrow){font-size:16px;line-height:2;color:#aebed1;max-width:650px}.about-copy h2{margin-bottom:28px}.values{margin-top:45px;border-top:1px solid #2c405c;padding-top:25px}.values b{display:block;font-size:20px}.values span{display:block;color:#8294aa;font-size:12px;margin-top:6px}.process-section{background:#f6f8fb}.process-section .section-heading{text-align:center}.process-grid{max-width:1180px;margin:auto;border-top:1px solid #cbd4e0}.process-item{padding:38px 30px 10px;border-right:1px solid #d8dfe8;min-height:210px}.process-item:last-child{border:0}.process-item>span{font:700 12px 'Space Grotesk';color:var(--blue)}.process-item h3{font-size:21px;margin:35px 0 8px}.process-item p{color:var(--muted);font-size:14px;line-height:1.7}.contact-section{background:#0a203d;color:#fff;padding:95px 7vw}.contact-title{padding-right:7vw}.contact-title>p:last-child{color:#9dafc4;line-height:1.8;margin-top:26px}.contact-details{display:grid;grid-template-columns:1fr 1fr}.contact-details>a,.contact-details>div{color:#fff;min-height:145px;padding:28px;border-top:1px solid #3a4b61;position:relative}.contact-details>a:nth-child(odd),.contact-details>div:nth-child(odd){border-right:1px solid #3a4b61}.contact-details small,.contact-details b{display:block}.contact-details small{color:#7f94ad;font-size:11px;margin-bottom:14px}.contact-details b{font-size:17px}.contact-details span{position:absolute;right:24px;top:28px;color:#4f82da}.footer{display:flex;justify-content:space-between;align-items:center;padding:32px 6vw!important}.footer p,.footer>a{font-size:11px;color:#7a8798}.footer .brand-mark{width:32px;height:32px;font-size:18px}.footer .brand strong{font-size:14px}
@media(max-width:992px){.hero-grid{padding:0 7vw}.hero-copy{padding-right:0}.hero-visual{min-height:500px}.about-copy{padding:75px 8vw}.contact-title{margin-bottom:50px}.process-item:nth-child(2){border-right:0}.nav-links .w3-button{display:none}.contact-button{display:block!important}.section-intro{padding-left:0!important}.trust-strip>div{justify-content:center}.service-card{min-height:0;margin-bottom:16px}.service-card h3{margin-top:45px}.service-card p{min-height:0}.footer{gap:20px}}
@media(max-width:600px){.topbar{height:72px;padding:0 5vw}.brand strong{font-size:15px}.contact-button{font-size:12px;margin-left:auto}.contact-button span{display:none}.hero-copy{padding:75px 0 55px}.hero-lead{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:10px}.hero-visual{min-height:410px}.tech-orbit{width:350px;height:350px;top:28px}.core{width:130px;height:130px;left:110px;top:110px}.core b{font-size:48px}.node-a{left:145px}.node-b{bottom:55px}.node-c{bottom:55px}.trust-strip>div{border-right:0;border-bottom:1px solid var(--line);padding:20px}.section{padding:80px 5vw}.section-heading{margin-bottom:35px}.service-grid{padding:0!important}.service-card{padding:30px}.about-visual{min-height:430px}.about-copy{padding:70px 7vw}.process-item{border-right:0!important;border-bottom:1px solid #d8dfe8}.contact-section{padding:75px 6vw}.contact-details{grid-template-columns:1fr}.contact-details>*{border-right:0!important}.footer{flex-direction:column;text-align:center}.footer>a{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-card{transition:none}}


/* Website photography */
.hero-visual{min-height:650px;position:relative;background:#0a2446;overflow:hidden}
.hero-visual:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#07192f99 0%,transparent 48%),linear-gradient(0deg,#07192fcc 0%,transparent 42%)}
.hero-photo{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.05)}
.hero-image-label{position:absolute;z-index:2;right:35px;bottom:35px;display:flex;align-items:center;gap:13px;padding:13px 18px;background:#07192fe6;border:1px solid #ffffff2e;backdrop-filter:blur(8px)}
.hero-image-label b{font:700 25px 'Space Grotesk';color:#4d83ff}.hero-image-label span{font-size:12px;letter-spacing:.12em;color:#fff}
.service-card{overflow:hidden}.service-image{display:block;width:100%;height:155px;object-fit:cover;margin:22px 0 0;filter:saturate(.88);transition:transform .35s ease}
.service-card:hover .service-image{transform:scale(1.025)}.service-card h3{margin:27px 0 16px}
@media(max-width:600px){.hero-image-label{right:20px;bottom:20px}.service-image{height:190px}}
@media(prefers-reduced-motion:reduce){.service-image{transition:none}}