@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{--ink:#06142e;--blue:#0d2f67;--electric:#7ea6ff;--light:#edf3ff;--line:rgba(158,186,239,.2);--muted:#9bb1d5}*{box-sizing:border-box}body{margin:0;background:#020817;color:var(--light);font-family:Manrope,'Noto Sans TC',sans-serif}.card-shell{width:min(100%,760px);margin:auto;min-height:100vh;background:radial-gradient(circle at 85% 10%,#164683 0,transparent 31%),linear-gradient(145deg,#071b3b 0%,#041126 56%,#061832 100%);overflow:hidden;position:relative}.card-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 49.8%,rgba(176,203,255,.04) 50% 50.2%,transparent 50%),linear-gradient(rgba(176,203,255,.03) 1px,transparent 1px);background-size:100% 100%,100% 38px}.topbar,.hero,.cta-grid,.details,.qr-section,.location,footer{position:relative;z-index:1}.topbar{padding:27px clamp(22px,5vw,44px);display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;letter-spacing:-1px;text-decoration:none;color:white;font-size:1.25rem}.brand:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#87a8ff;margin-right:8px;box-shadow:0 0 18px #87a8ff}.brand span{font:10px 'DM Mono',monospace;letter-spacing:1.5px;display:block;margin:2px 0 0 18px;color:var(--muted)}button{font:inherit}.topbar button{background:transparent;border:1px solid var(--line);color:#fff;border-radius:99px;padding:8px 12px;font:11px 'DM Mono',monospace;cursor:pointer}.hero{display:grid;grid-template-columns:1.12fr .88fr;padding:clamp(20px,5vw,55px) clamp(22px,7vw,62px) 43px;min-height:365px;align-items:center}.eyebrow,.section-label{font:11px 'DM Mono',monospace;letter-spacing:1.8px;color:#93b5ff;margin:0 0 14px;text-transform:uppercase}.hero h1{font-size:clamp(3.5rem,9.5vw,6.3rem);line-height:.86;margin:0;letter-spacing:-5px}.hero h1 em{font-style:normal;color:#82a8ff}.cn{font-size:1.2rem;margin:14px 0 2px}.role{color:#cbd8ef;margin:4px 0}.company{font-size:.78rem;color:var(--muted);margin:0}.portrait-wrap{height:290px;position:relative;align-self:end}.portrait-wrap img{position:absolute;bottom:0;right:-13%;height:100%;max-width:135%;object-fit:cover;object-position:50% 18%;filter:drop-shadow(0 16px 27px #0008);border-radius:5px 5px 0 0;mix-blend-mode:normal}.halo{position:absolute;width:200px;height:200px;right:-5%;top:16px;border:1px solid #8fb0ff77;border-radius:50%;box-shadow:0 0 0 27px #1e4d9520,0 0 65px #487cf280}.cta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:0 clamp(22px,5vw,44px) 40px}.cta{min-height:83px;border:1px solid var(--line);border-radius:11px;padding:15px;text-decoration:none;color:white;background:#0a214580;display:flex;flex-direction:column;justify-content:center;transition:.2s}.cta:hover{background:#13356a;transform:translateY(-2px)}.cta b{font-size:.78rem}.cta small{color:#adbfdd;font-size:.75rem;margin-top:7px}.cta.main{grid-column:span 2;background:linear-gradient(100deg,#345ca5,#203f78);position:relative}.cta.main span{position:absolute;right:18px;top:21px;font-size:2rem;color:#b7cbff}.details,.qr-section,.location{margin:0 clamp(22px,5vw,44px);border-top:1px solid var(--line);padding:35px 0;display:flex;justify-content:space-between;gap:25px;align-items:center}.details h2,.qr-section h2,.location h2{margin:0;line-height:1.25;font-size:clamp(1.18rem,3vw,1.6rem);letter-spacing:-.8px}.detail-actions{display:flex;gap:9px;flex-wrap:wrap}.outline,.map-link{border:1px solid #5076af;color:#dbe7ff;text-decoration:none;background:transparent;border-radius:7px;padding:11px 13px;font-size:.75rem;cursor:pointer}.qr-section{align-items:center}.qr-section p:not(.section-label){color:var(--muted);font-size:.82rem;margin-bottom:0}.qr-section img{width:124px;height:124px;background:#fff;border-radius:8px;padding:8px}.map-link{white-space:nowrap}.location{padding-bottom:45px}footer{border-top:1px solid var(--line);color:#7086aa;text-align:center;font:10px 'DM Mono',monospace;letter-spacing:.5px;padding:25px}@media(max-width:490px){.hero{grid-template-columns:1.1fr .9fr;padding-top:22px;min-height:315px}.hero h1{letter-spacing:-3px}.portrait-wrap{height:235px}.details,.qr-section,.location{align-items:flex-start;flex-direction:column;gap:18px}.qr-section{flex-direction:row;align-items:center}.qr-section img{width:98px;height:98px}.detail-actions{width:100%}.outline{flex:1;text-align:center}}

/* MOCI supplied brand palette */
:root{--ink:#231f20;--light:#231f20;--muted:#646064;--line:#dedcde;--electric:#b52487}
body{background:#eee}.card-shell{background:#fff}.card-shell:before{background:none}.brand{display:block;width:240px;height:61px;background:url('assets/moci-brand.png') left center/240px auto no-repeat;font-size:0}.brand:before,.brand span{display:none}.topbar button{color:#92206e;border-color:#b52487}.hero{border-top:5px solid #b52487;background:linear-gradient(120deg,#fff 65%,#f1eff1 65%)}.hero h1 em,.eyebrow,.section-label{color:#ac2180}.role{color:#454045}.halo{border-color:#b5248733;box-shadow:none}.portrait-wrap img{filter:none}.cta{color:#231f20;background:#f5f4f5}.cta:hover{background:#eee7ed}.cta small{color:#615a60}.cta.main{background:#ac2180;color:white}.cta.main small,.cta.main span{color:white}.outline,.map-link{color:#982075;border-color:#b52487}footer{color:#646064}
.office-address{font-size:.8rem;line-height:1.7;color:#646064;max-width:480px}.location{align-items:flex-start}
.social-section{position:relative;padding:30px clamp(22px,5vw,44px);border-top:1px solid #dedcde}.social-section>p{font-size:.82rem;color:#646064;line-height:1.6}.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.social-grid article{min-width:0;text-align:center;background:#f5f4f5;border-radius:10px;padding:12px}.social-grid h3{font-size:.9rem}.social-grid img{width:100%;height:205px;object-fit:contain;background:white}.social-grid article>a{display:block;margin:10px 0;color:#982075;font-size:.75rem}@media(max-width:520px){.social-grid{grid-template-columns:1fr}.social-grid img{height:280px}}
.social-icon{width:64px;height:64px;display:block;margin:20px auto}.social-grid article{padding:16px}
.portrait-wrap{height:220px}.portrait-wrap img{right:0;max-width:100%}.halo{width:150px;height:150px;right:0}@media(max-width:490px){.portrait-wrap{height:175px}.halo{width:120px;height:120px}}
/* Compact one-page business card */
.card-shell{width:min(100%,720px);min-height:100svh}.topbar{padding:12px 22px}.brand{width:190px;height:48px;background-size:190px auto}.hero{min-height:0;padding:18px 26px 20px;grid-template-columns:1fr 120px;align-items:center}.hero h1{font-size:3rem;line-height:1;letter-spacing:-2px}.cn{font-size:1rem;margin:7px 0 2px}.role{font-size:.85rem}.company{font-size:.7rem}.portrait-wrap{height:125px;align-self:center}.portrait-wrap img{right:0;max-width:100%;border-radius:6px}.halo{display:none}.cta-grid{gap:7px;padding:0 22px 15px}.cta{min-height:56px;padding:9px 12px;border-radius:7px}.cta small{margin-top:4px;font-size:.73rem}.social-section{padding:12px 22px}.social-section>h2{font-size:.85rem;margin:0 0 8px}.social-section>p{display:none}.social-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.social-grid article{padding:8px 5px}.social-grid h3{font-size:.7rem;margin:0}.social-icon{width:34px;height:34px;margin:7px auto}.social-grid article>a{margin:5px 0;font-size:.68rem}.social-grid .outline{padding:7px 3px;display:block;white-space:nowrap}.location{margin:0 22px;padding:12px 0 10px;gap:10px;flex-direction:row;align-items:flex-start}.location .section-label{display:none}.location h2{font-size:.85rem;letter-spacing:0}.location p{margin:5px 0;font-size:.7rem;line-height:1.4}.location .map-link{font-size:.68rem;padding:7px 8px}.office-address{max-width:520px}footer{font-size:8px;padding:10px}@media(max-width:490px){.topbar{padding:9px 16px}.hero{padding:12px 18px 15px;grid-template-columns:1fr 90px}.hero h1{font-size:2.25rem}.portrait-wrap{height:105px}.cn{font-size:.9rem}.role{font-size:.75rem}.company{font-size:.62rem}.brand{width:165px;height:42px;background-size:165px auto}.cta-grid{padding:0 16px 12px}.cta{min-height:53px}.cta b{font-size:.72rem}.cta small{font-size:.68rem}.social-section{padding:10px 16px}.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.location{margin:0 16px}.location p{font-size:.65rem}.location .map-link{font-size:.62rem;padding:6px}.social-icon{width:30px;height:30px}}
.brand{width:145px;height:54px;background-size:contain;background-position:left center}@media(max-width:490px){.brand{width:120px;height:44px}}
.footer-banner{position:relative;text-align:center;padding:0 16px 10px}.footer-banner img{display:block;width:min(100%,350px);height:auto;margin:0 auto}
.footer-banner{padding:0}.footer-banner img{width:100%;max-width:none;height:auto}
.cta b{font-size:14px}.cta small{font-size:15px}.role{font-size:15px}.company{font-size:12px}.social-grid h3{font-size:13px}.social-grid article>a{font-size:13px}.location h2{font-size:15px}.location p{font-size:12px;line-height:1.45}.location .map-link{font-size:12px}@media(max-width:490px){.cta b{font-size:13px}.cta small{font-size:14px}.role{font-size:14px}.company{font-size:11px}.social-grid h3,.social-grid article>a{font-size:12px}.location p{font-size:11px}.location .map-link{font-size:11px}}
.social-grid article{display:flex;flex-direction:column;align-items:center;justify-content:center}.social-grid article>a{width:100%;display:flex;align-items:center;justify-content:center}.social-grid article>a:first-of-type{height:46px;margin:6px 0}.social-grid img.social-icon{display:block;width:32px;height:32px;min-width:32px;max-width:32px;object-fit:contain;margin:0;background:transparent}.social-grid .outline{display:flex;min-height:34px;margin:0}.social-grid h3{width:100%;text-align:center;min-height:18px}
.footer-banner{padding:4px 12px 8px}.footer-banner img{width:100%;height:80px;object-fit:contain;object-position:center}@media(max-width:490px){.footer-banner img{height:60px}}
dialog{border:0;border-radius:14px;padding:24px;width:min(90vw,380px);color:#231f20;text-align:center;box-shadow:0 15px 70px #0005}dialog::backdrop{background:#0009}dialog img{display:block;max-width:100%;max-height:55svh;object-fit:contain;margin:auto}dialog p{font-size:13px;line-height:1.5}.wechat-close{position:absolute;right:10px;top:6px;border:0;background:none;font-size:28px;cursor:pointer}

.label-zh,.label-en{display:block}.label-en{font-size:.82em;font-weight:400;color:#686268;margin-top:2px;line-height:1.25}.social-grid .outline{flex-direction:column;min-height:46px}.role .label-en{font-size:12px}.location p[data-i18n] .label-en{display:inline;margin-left:7px}.social-section>h2 .label-en{display:inline;margin-left:8px}.company{line-height:1.5}
 .footer-banner{padding:0}.footer-banner img{display:block;width:100%;height:auto;max-width:none;object-fit:contain;margin:0}

html{min-height:100%;background:#eee}body{padding:8px 0;min-height:100svh}.card-shell{min-height:0;transform-origin:top center}.footer-banner img{height:auto;width:100%;object-fit:contain}footer{padding:8px}dialog{zoom:1}

.hero h1,.hero h1 em{color:#111111}


#wechat-add{position:fixed;inset:0;margin:auto;padding:36px 24px 24px;width:min(88vw,330px);height:fit-content;max-height:90svh;overflow:auto}#wechat-add[open]{display:flex;align-items:center;justify-content:center}#wechat-add img{display:block;width:100%;height:auto;max-height:75svh;object-fit:contain;margin:auto;clip-path:none}

#wechat-add[open]{flex-direction:column;gap:18px}#wechat-add .outline{flex:none;text-align:center}

.hero h1.name-row{display:flex;flex-wrap:nowrap;align-items:baseline;gap:16px;font-size:clamp(22px,4vw,32px);letter-spacing:-.5px;line-height:1.3;white-space:nowrap}.name-row>span{font-size:inherit;font-weight:inherit}@media(max-width:490px){.hero{grid-template-columns:minmax(0,1fr) 68px;padding-left:16px;padding-right:16px;gap:8px}.hero h1.name-row{font-size:clamp(16px,4.5vw,22px);gap:8px;letter-spacing:-.4px}.portrait-wrap{height:85px}}


.hero h1.name-row{display:flex;align-items:baseline;flex-wrap:nowrap;gap:14px;white-space:nowrap;font-size:30px;letter-spacing:-.5px;line-height:1.3}.name-row>span{font-size:inherit;font-weight:inherit}@media(max-width:490px){.hero{grid-template-columns:minmax(0,1fr) 62px;gap:7px;padding-left:14px;padding-right:14px}.portrait-wrap{height:80px}.hero h1.name-row{font-size:clamp(15px,4.3vw,21px);gap:7px;letter-spacing:-.4px}}