:root { --navy:#10213a; --blue:#237aad; --azure:#4f92be; --pale:#edf6fb; --muted:#64748b; --line:#e3e9f0; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:#fff; color:var(--navy); font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:94px; max-width:1440px; margin:auto; padding:0 64px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; min-width:188px; }
.brand-logo { display:block; width:194px; height:auto; }
nav { display:flex; align-items:stretch; gap:40px; height:100%; }
nav a { display:grid; place-items:center; position:relative; font-size:15px; font-weight:600; }
nav a:after { content:""; position:absolute; left:50%; right:50%; bottom:0; height:3px; background:var(--blue); transition:.2s; }
nav a:hover:after, nav a.active:after { left:0; right:0; }
nav a.active { color:var(--blue); }
.header-contact { display:none; }
.hero { min-height:696px; max-width:1440px; margin:auto; padding:92px 64px 72px; display:grid; grid-template-columns:52% 48%; align-items:center; overflow:hidden; }
.hero-copy { position:relative; z-index:2; padding-right:64px; }
.eyebrow,.section-kicker { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.2em; }
.eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow span { width:34px; height:2px; background:var(--blue); }
h1 { font-size:clamp(48px,4.4vw,67px); line-height:1.25; letter-spacing:-.055em; margin:26px 0 24px; font-weight:750; }
.hero-lead { max-width:600px; color:#465773; font-size:19px; line-height:1.8; margin:0 0 15px; }
.product-line { color:#66758c; font-size:14px; line-height:1.85; margin:0; }
.hero-actions { display:flex; gap:18px; margin-top:34px; }
.button { min-height:58px; padding:0 28px; display:inline-flex; align-items:center; justify-content:center; gap:30px; border-radius:7px; font-weight:700; transition:transform .18s,box-shadow .18s,background .18s; }
.button:hover { transform:translateY(-2px); }
.primary { background:var(--blue); color:#fff; box-shadow:0 12px 28px rgba(35,122,173,.18); }
.primary:hover { background:#1a668f; box-shadow:0 16px 34px rgba(35,122,173,.25); }
.secondary { color:var(--blue); border:1px solid #9fbfd2; background:#fff; min-width:158px; }
.hero-visual { margin-right:0; position:relative; animation:float 7s ease-in-out infinite; }
.hero-visual img { width:100%; max-width:760px; display:block; object-fit:contain; }
.hero-products { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:-8px 18px 0; position:relative; z-index:2; }
.hero-products span { padding:8px 12px; border:1px solid #cfe2ee; border-radius:999px; background:rgba(255,255,255,.94); color:#315d7d; box-shadow:0 7px 18px rgba(31,92,132,.08); font-size:11px; font-weight:750; letter-spacing:.02em; }
@keyframes float { 50% { transform:translateY(-6px); } }
.trust-bar { min-height:162px; background:linear-gradient(90deg,#f8fbff,var(--pale),#f8fbff); display:grid; grid-template-columns:repeat(3,1fr); padding:0 max(64px,calc((100vw - 1312px)/2)); }
.trust-bar>div { display:flex; align-items:center; justify-content:center; gap:22px; position:relative; }
.trust-bar>div+div:before { content:""; position:absolute; width:1px; height:54px; left:0; background:#d7e3f4; }
.trust-icon { width:54px; height:54px; border-radius:50%; background:#fff; color:var(--blue); display:grid; place-items:center; font-size:29px; box-shadow:0 8px 30px rgba(26,83,176,.08); }
.trust-bar p { display:flex; flex-direction:column; margin:0; }
.trust-bar strong { font-size:18px; }
.trust-bar small { color:#72839b; margin-top:6px; font-size:11px; letter-spacing:.08em; }
.section { max-width:1440px; margin:auto; padding:120px 64px; }
.about-grid { display:grid; grid-template-columns:44% 56%; gap:72px; margin-top:34px; }
.section h2,.capability h2,.contact h2 { font-size:clamp(38px,4vw,58px); line-height:1.3; letter-spacing:-.045em; margin:0; }
.about-intro img { display:block; width:90%; height:auto; margin:26px 0 0 -2%; mix-blend-mode:multiply; }
.about-copy { padding-right:56px; }
.about-copy>p { color:#52637c; font-size:18px; line-height:1.9; margin:0 0 20px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; }
.about-stats div { display:flex; flex-direction:column; min-width:0; padding:18px 14px; border:1px solid #e1edf4; border-radius:12px; background:#f8fcfe; }
.about-stats i { width:34px; height:34px; margin-bottom:14px; display:grid; place-items:center; border-radius:9px; background:#e6f4fa; color:var(--blue); font-size:18px; font-style:normal; font-weight:800; }
.about-stats strong { color:var(--blue); font-size:20px; }
.about-stats span { color:#74849b; font-size:13px; margin-top:8px; }
.services { background:linear-gradient(180deg,#f4fbff 0%,#eaf6fc 100%); max-width:none; }
.services>* { max-width:1312px; margin-left:auto; margin-right:auto; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; }
.section-head h2 { margin-top:14px; }
.section-head>p { color:#60708a; line-height:1.75; max-width:500px; margin:0; }
.section-description { max-width:610px; }
.section-description p { color:#60708a; line-height:1.75; margin:0; }
.section-description p+p { margin-top:12px; color:#455d75; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.service-card { padding:34px 36px 30px; min-height:330px; background:rgba(255,255,255,.96); border:1px solid #d9eaf3; border-radius:16px; transition:.2s; position:relative; overflow:hidden; box-shadow:0 10px 28px rgba(31,102,143,.055); }
.service-card:before { content:""; position:absolute; width:180px; height:180px; right:-85px; top:-95px; border-radius:50%; background:radial-gradient(circle,rgba(55,164,214,.16),rgba(55,164,214,0) 70%); }
.service-card:after { content:""; position:absolute; height:4px; left:0; right:0; top:0; background:linear-gradient(90deg,var(--blue),#6bc1df); }
.service-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(28,91,126,.13); }
.service-card-top { display:flex; align-items:center; justify-content:space-between; }
.service-icon { width:62px; height:62px; display:grid; place-items:center; border-radius:17px; background:linear-gradient(145deg,#d7f1fb,#f5fcff); color:var(--blue); box-shadow:inset 0 0 0 1px #c5e4f0,0 8px 18px rgba(28,111,153,.09); }
.service-icon svg { width:36px; height:36px; display:block; }
.card-no { color:#8fa6c4; font-size:12px; letter-spacing:.16em; }
.service-card h3 { font-size:24px; margin:24px 0 14px; }
.service-card p { color:#5b6d86; line-height:1.8; margin:0; }
.service-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:26px; padding:8px; border:1px solid #d9eaf2; border-radius:13px; background:#f4fafc; }
.service-features span { min-width:0; padding:6px 9px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; color:#315f7c; white-space:nowrap; }
.service-features span+span { border-left:1px solid #d4e5ed; }
.service-features b { color:#6da8c5; font-size:9px; letter-spacing:.14em; }
.service-features em { overflow:hidden; max-width:100%; font-size:11px; font-style:normal; font-weight:750; text-overflow:ellipsis; }
.capability { background:linear-gradient(135deg,#f1f9fd,#e3f2f9); color:var(--navy); padding:112px max(64px,calc((100vw - 1312px)/2)); display:grid; grid-template-columns:41% 59%; gap:80px; }
.section-kicker.light { color:#81bad9; }
.capability-intro h2 { margin:24px 0 28px; }
.capability-intro>p:nth-of-type(2) { color:#597087; line-height:1.8; max-width:450px; }
.capability-intro img { display:block; width:92%; max-width:500px; height:auto; margin:22px 0 -22px -4%; mix-blend-mode:multiply; }
.capability-list { display:grid; gap:12px; align-content:center; }
.capability-list article { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:23px 26px; border:1px solid #d5e7f0; border-radius:13px; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(27,91,126,.055); transition:.2s; }
.capability-list article:hover { transform:translateX(4px); background:#fff; box-shadow:0 12px 30px rgba(27,91,126,.1); }
.capability-list article>span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#e4f4fa; color:var(--blue); font-size:12px; font-weight:800; }
.capability-list h3 { margin:0 0 8px; font-size:22px; }
.capability-list p { margin:0; color:#60778d; line-height:1.7; }
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.case-grid article { padding:34px; border:1px solid var(--line); min-height:310px; display:flex; flex-direction:column; }
.case-grid article>span { color:var(--blue); font-weight:800; letter-spacing:.14em; font-size:10px; }
.case-grid h3 { font-size:22px; margin:28px 0 16px; }
.case-grid p { color:#60708a; line-height:1.8; margin:0; }
.case-grid b { margin-top:auto; padding-top:26px; font-size:13px; color:#355f9a; display:flex; justify-content:space-between; }
.contact { padding:110px 64px; text-align:center; color:#fff; background:linear-gradient(135deg,#12314f,#2b6084); }
.contact h2 { margin:24px 0; }
.contact>p:not(.section-kicker) { color:#c8d7eb; }
.contact-grid { width:min(1120px,100%); margin:42px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
.contact-card { min-height:340px; padding:30px 34px; border:1px solid rgba(255,255,255,.22); border-radius:17px; background:rgba(255,255,255,.09); box-shadow:0 18px 38px rgba(4,29,49,.09); }
.contact-card-head { display:flex; align-items:center; gap:18px; padding-bottom:23px; border-bottom:1px solid rgba(255,255,255,.17); }
.contact-card-head>span { width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; border-radius:18px; background:linear-gradient(145deg,#fff,#dff2fa); color:var(--blue); box-shadow:0 9px 22px rgba(4,29,49,.18); }
.contact-card-head svg { width:32px; height:32px; display:block; }
.contact-card small { color:#9fc5dc; font-size:10px; font-weight:800; letter-spacing:.16em; }
.contact-card h3 { margin:6px 0 0; color:#fff; font-size:25px; }
.contact-card dl { margin:22px 0 0; display:grid; gap:0; }
.contact-card dl>div { display:grid; grid-template-columns:84px 1fr; gap:16px; padding:9px 0; }
.contact-card dt { color:#9fc5dc; font-size:12px; font-weight:700; }
.contact-card dd { margin:0; color:#fff; font-size:14px; line-height:1.55; }
.contact-card dd a { color:#fff; text-decoration-color:rgba(255,255,255,.38); text-underline-offset:4px; }
.contact-card dd a:hover { text-decoration:underline; text-decoration-color:#fff; }
footer { min-height:160px; max-width:1440px; margin:auto; padding:45px 64px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#75849a; font-size:12px; }
.footer-brand { transform:scale(.85); transform-origin:left center; }
footer p:nth-child(2) { text-align:center; } footer p:last-child { text-align:right; }
@media (max-width:1100px) { .site-header { padding:0 28px; } nav { display:none; } .header-contact { display:block; color:var(--blue); font-weight:700; } .hero { padding-left:40px; padding-right:40px; } .hero-copy { padding-right:40px; } .about-grid{grid-template-columns:42% 58%;gap:46px}.about-copy{padding-right:10px}.about-stats{grid-template-columns:1fr}.about-stats div{display:grid;grid-template-columns:42px 1fr;column-gap:12px}.about-stats i{grid-row:1/3;margin:0}.about-stats span{margin-top:2px}.service-features span{padding:6px}.capability{gap:44px}.contact-card{padding:27px 25px}.contact-card dl>div{grid-template-columns:76px 1fr;gap:10px} }
@media (max-width:760px) { .site-header { height:78px; padding:0 20px; } .brand { min-width:0; } .brand-logo { width:156px; } .header-contact{font-size:13px}.hero{min-height:auto;padding:72px 22px 56px;grid-template-columns:1fr}.hero-copy{text-align:left;padding-right:0}.hero-visual{margin:36px -20px -4px}.hero-products{margin:-4px 20px 0}.hero-actions{flex-direction:column}.button{width:100%}.trust-bar{grid-template-columns:1fr;padding:22px}.trust-bar>div{justify-content:flex-start;padding:16px 25px}.trust-bar>div+div:before{width:100%;height:1px;top:0}.section{padding:82px 22px}.about-grid,.capability{grid-template-columns:1fr;gap:48px}.about-grid{margin-top:24px}.about-intro img{width:100%;margin:22px 0 0}.about-copy{padding-right:0}.about-stats{grid-template-columns:1fr}.section-head{display:block}.section-head>p,.section-description{margin-top:20px}.service-grid,.case-grid{grid-template-columns:1fr}.service-card{padding:30px 24px}.service-features span{padding:6px 5px}.capability{padding:82px 22px}.capability-intro img{width:100%;margin:16px 0 -12px}.contact{padding:82px 22px}.contact-grid{grid-template-columns:1fr}.contact-card{min-height:0;padding:26px 21px}.contact-card-head>span{width:56px;height:56px}.contact-card dl>div{grid-template-columns:74px 1fr;gap:8px}footer{padding:42px 22px;display:flex;flex-direction:column;gap:18px;text-align:center}footer p:nth-child(2),footer p:last-child{text-align:center;margin:0}.footer-brand{transform:scale(.8);transform-origin:center} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-visual{animation:none}*{transition:none!important}}