@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#07182b;--navy2:#0d2942;--yellow:#f6d51b;--blue:#1688d4;--green:#58b947;--white:#fff;--paper:#f4f6f6;--ink:#152333;--muted:#667585;--line:#dce2e6}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans TC",sans-serif}a{color:inherit;text-decoration:none}.topbar{height:84px;position:absolute;z-index:20;top:0;left:0;width:100%;padding:0 clamp(22px,6vw,96px);display:flex;align-items:center;justify-content:space-between;color:white;border-bottom:1px solid #ffffff20}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;white-space:nowrap}.brand img{width:43px;height:43px;object-fit:contain}.topbar nav{display:flex;gap:clamp(15px,2.4vw,34px);margin-left:auto;margin-right:35px}.topbar nav a,.top-contact{font-size:14px;font-weight:600;color:#e6edf4}.topbar nav a:hover{color:var(--yellow)}.top-contact{border:1px solid #ffffffa8;padding:11px 23px}.hamb{display:none;background:none;border:0;color:#fff;font-size:25px}
.hero{height:min(900px,100svh);min-height:740px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;color:#fff;background:radial-gradient(ellipse at 10% 100%,#12687935,transparent 30%),radial-gradient(ellipse at 95% 0%,#548f4c20,transparent 27%),linear-gradient(125deg,#041426,#0b2037 55%,#102c45)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020d1a66,#03112022 52%,#020d1a55)}.hero-inner{position:relative;margin-top:12px;padding:100px 20px 150px}.eyebrow{font-size:11px;letter-spacing:3px;color:#aebdca;margin:0 0 23px}.hero h1{margin:0;font-size:clamp(38px,5vw,70px);line-height:1.22;font-weight:700}.line-one{display:flex;justify-content:center;align-items:baseline;gap:.22em;white-space:nowrap}.line-one b{font-size:1.55em;letter-spacing:-.06em}.line-one span{font-size:.86em;letter-spacing:.04em}.line-two{display:block;margin-top:9px;letter-spacing:.34em;padding-left:.34em;font-weight:600}.lead{font-size:clamp(15px,1.4vw,19px);color:#e2eaf1;letter-spacing:.04em;margin:28px 0 0}.actions{display:flex;justify-content:center;gap:14px;margin-top:34px}.btn{border:1px solid transparent;padding:14px 26px;min-width:170px;display:inline-flex;justify-content:center;align-items:center;font:700 15px inherit;cursor:pointer}.yellow{background:var(--yellow);color:#142337}.ghost{border-color:#ffffffb8;color:#fff}.btn:hover{filter:brightness(1.06);transform:translateY(-2px)}.hero-bottom{position:absolute;bottom:53px;left:18px;right:18px}.collab{display:flex;justify-content:center;align-items:center;gap:20px;font-size:12px;letter-spacing:2px;color:#e0e7ee;margin-bottom:23px}.collab i{height:1px;width:52px;background:#ffffff75}.social{display:flex;justify-content:center;gap:26px;align-items:center}.social span{width:31px;height:31px;border:1px solid #ffffffb8;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:700}.social .line{font-size:8px}.down{position:absolute;bottom:14px;color:#aebdca}
.band{padding:100px clamp(22px,8vw,128px)}.wrap{max-width:1240px;margin:auto}.kicker{font-size:12px;letter-spacing:1.5px;font-weight:800;color:#788797;margin:0 0 31px}.two{display:grid;grid-template-columns:1fr .9fr;gap:9vw;align-items:start}.band h2{font-size:clamp(34px,4vw,56px);line-height:1.25;letter-spacing:-.045em;margin:0;font-weight:800}.bodycopy{font-size:16px;line-height:2;color:#596979}.bodycopy p{margin:0 0 15px}.emphasis{font-weight:700;color:#1b344a}.pain{background:#fff}.pain-tags,.security-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}.pain-tags span,.security-points span{border:1px solid #d9e0e5;border-radius:30px;padding:10px 17px;font-size:13px;color:#526273}.solution{background:#edf2f4}.solution h2 em{font-style:normal;color:#167db4}.value-grid,.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.value-grid article,.case-grid article{padding:26px;border:1px solid #d9e1e5;background:#ffffffa8;min-height:180px}.value-grid b,.case-grid span{font-size:12px;color:#1688d4;letter-spacing:1px}.value-grid h3,.case-grid h3{font-size:20px;margin:20px 0 8px}.value-grid p,.case-grid p{font-size:14px;line-height:1.8;color:#647383;margin:0}.about{background:#fff}.principle{display:flex;gap:15px;flex-wrap:wrap;margin-top:40px}.principle span{background:#0c2238;color:#fff;padding:17px 22px;font-weight:600}.cases{background:#f1f4f4}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.section-head h2{font-size:clamp(30px,3.5vw,46px)}.section-head p,.note{font-size:13px;color:#71808e;line-height:1.8}.note{margin-top:20px}.case-grid article{background:#fff}.help{background:#fff}.timeline{border-top:1px solid var(--line)}.timeline>div{display:flex;gap:23px;padding:18px 0;border-bottom:1px solid var(--line)}.timeline b{color:#1688d4;font-size:13px}.timeline strong,.timeline small{display:block}.timeline small{color:#6b7a88;margin-top:6px;line-height:1.7}.security{background:#101f2d;color:#fff}.security .kicker{color:#9eb0c1}.security .bodycopy{color:#c0cbd4}.security .emphasis{color:#fff}.security-points span{border-color:#ffffff36;color:#d7e0e8}.pricing{background:#f0f3f3}.inline-link{display:inline-block;color:#176e9d;font-weight:700;margin-top:12px}.pricing-note{margin-top:38px;padding:19px 22px;border-left:3px solid var(--blue);background:#fff;display:flex;gap:20px;align-items:center}.pricing-note b{font-size:14px}.pricing-note span{font-size:13px;color:#71808e}.knowledge{background:#fff}.faq{border-top:1px solid var(--line)}.faq details{padding:18px 0;border-bottom:1px solid var(--line)}.faq summary{font-weight:700;cursor:pointer;list-style:none}.faq summary:after{content:"＋";float:right;color:#1688d4}.faq details[open] summary:after{content:"－"}.faq p{font-size:14px;line-height:1.8;color:#6a7988;margin:13px 0 0}.contact{background:#07182b;color:#fff}.contact .kicker{color:#a1b4c5}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.contact-grid>div p{color:#aab9c7;line-height:1.8}.contact form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact label{font-size:13px;color:#bdcad5}.contact input,.contact textarea{display:block;width:100%;margin-top:8px;padding:14px;background:#122a40;border:1px solid #29435a;color:#fff;font:inherit}.contact .wide{grid-column:1/-1}.contact button{width:180px}.contact small{grid-column:1/-1;color:#8294a6;font-size:11px}.catalog{background:#f1f4f4}.catalog-list{margin-top:35px;border-top:1px solid #d6dfe4}.catalog-list a{display:grid;grid-template-columns:55px 1.2fr 1fr auto;gap:20px;align-items:center;padding:22px 8px;border-bottom:1px solid #d6dfe4}.catalog-list a>span{color:#1688d4;font-size:13px}.catalog-list b{font-size:18px}.catalog-list small{color:#71808e}.catalog-list i{font-style:normal;font-size:13px;font-weight:700;color:#176e9d}footer{background:#04111f;color:#fff;padding:55px clamp(22px,8vw,128px) 22px}.foot-main{max-width:1240px;margin:auto;display:flex;justify-content:space-between;align-items:end;padding-bottom:30px;border-bottom:1px solid #ffffff25}.foot-main h2{font-size:30px;margin:0}.foot-main p{color:#9eafbf;margin-bottom:0}.foot-main nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:#c5d0da}.foot-bottom{max-width:1240px;margin:20px auto 0;display:flex;justify-content:space-between;color:#8293a4;font-size:11px;letter-spacing:.5px}
@media(max-width:850px){.topbar{padding:0 22px}.topbar nav{gap:14px;margin-right:18px}.topbar nav a{font-size:12px}.two,.contact-grid{grid-template-columns:1fr;gap:26px}.band{padding-top:78px;padding-bottom:78px}.section-head{display:block}.section-head p{margin-top:15px}}
@media(max-width:640px){.topbar{height:70px}.brand{font-size:16px}.brand img{width:37px;height:37px}.topbar nav{display:none;position:absolute;top:70px;left:0;right:0;margin:0;padding:18px 22px;background:#07182b;flex-direction:column;align-items:flex-start}.topbar nav.open{display:flex}.top-contact{display:none}.hamb{display:block}.hero{min-height:680px;height:auto}.hero-inner{padding:110px 12px 170px}.hero h1{font-size:clamp(28px,8vw,43px)}.line-one b{font-size:1.45em}.line-one span{font-size:.8em}.line-two{letter-spacing:.18em;padding-left:.18em;font-size:.88em}.lead{line-height:1.8}.actions{flex-direction:column;align-items:center}.btn{width:min(100%,270px)}.hero-bottom{bottom:45px}.collab{font-size:8px;letter-spacing:.8px;gap:8px}.collab i{width:16px}.social{gap:14px}.social span{width:28px;height:28px}.band{padding:68px 22px}.band h2{font-size:35px}.value-grid,.case-grid{grid-template-columns:1fr}.contact form{grid-template-columns:1fr}.contact .wide{grid-column:auto}.catalog-list a{grid-template-columns:35px 1fr auto;gap:12px}.catalog-list small{grid-column:2}.catalog-list i{grid-column:3;grid-row:1/3}.foot-main,.foot-bottom{display:block}.foot-main nav{margin-top:25px}.foot-bottom span{display:block;margin-top:8px}}

/* v3: contact methods and expanded catalog */
.contact-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact-method{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.035)}
.contact-method b{font-size:1.1rem;color:var(--yellow,#f4c542)}
.contact-method span{font-size:1rem;color:#fff}
.contact-method small{color:rgba(255,255,255,.58)}
.catalog-more{display:grid;grid-template-columns:48px 1fr 1fr auto;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.14);color:inherit}
.catalog-more>span{color:var(--yellow,#f4c542)}
.catalog-more small{color:rgba(255,255,255,.65)}
.catalog-more i{font-style:normal;color:rgba(255,255,255,.55)}
@media(max-width:700px){.contact-methods{grid-template-columns:1fr}.catalog-more{grid-template-columns:34px 1fr;gap:8px}.catalog-more small,.catalog-more i{grid-column:2}}

.line-add{display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:inherit;text-decoration:none}
.line-add img{display:block;width:min(100%,190px);height:auto;border-radius:8px;background:#fff}
.line-add span,.line-url{color:var(--blue,#75baff)}
.line-url{font-size:.92rem;text-decoration:underline;text-underline-offset:4px}
