:root { --ink:#101418; --paper:#f2f0e9; --line:#c9c7bf; --orange:#ff5b22; --blue:#2862ff; --green:#49ed83; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"Noto Sans TC",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
.site-header { height:82px; position:absolute; z-index:30; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 4.5vw; color:white; border-bottom:1px solid rgba(255,255,255,.16); }
.brand { display:flex; align-items:center; gap:13px; }
.official-logo { width:48px; height:59px; object-fit:contain; background:white; padding:2px; }
.official-name b { display:block; font-size:13px; letter-spacing:.055em; line-height:1.15; }.official-name small { display:block; font-size:9px; letter-spacing:.1em; margin-top:6px; opacity:.7; }
.nav { display:flex; align-items:center; gap:34px; font-size:13px; }.nav>a:not(.nav-cta){opacity:.72}.nav>a:hover{opacity:1}.nav-cta{padding:12px 18px;border:1px solid rgba(255,255,255,.42)}.nav-cta span{margin-left:18px;color:var(--orange)}
.language-switch{display:flex;align-items:center;gap:6px;border-left:1px solid rgba(255,255,255,.25);padding-left:18px}.language-switch button{border:0;background:transparent;color:white;opacity:.48;cursor:pointer;padding:5px 2px;font-size:12px}.language-switch button.active{opacity:1;border-bottom:1px solid var(--orange)}.language-switch span{opacity:.25}
.menu-button { display:none; background:none; border:0; font-size:26px; }
.hero { min-height:780px; height:100vh; position:relative; overflow:hidden; background:#0b1016; color:white; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; padding:110px 7vw 80px; }
.hero-grid,.ecoco-grid { position:absolute; inset:0; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to right,transparent,#000 25%,#000); }
.hero:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 77% 50%,rgba(40,98,255,.18),transparent 30%),linear-gradient(90deg,rgba(11,16,22,.9),transparent 70%); pointer-events:none; }
.hero-copy { position:relative; z-index:2; max-width:690px; }.eyebrow { font:600 10px/1 monospace; letter-spacing:.2em; display:flex; align-items:center; gap:12px; }.eyebrow>span{width:30px;height:1px;background:var(--orange)}
.hero h1 { font-size:clamp(52px,6vw,92px); line-height:1.03; letter-spacing:-.07em; margin:34px 0 28px; font-weight:700; }.hero h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65)}
.hero-lead { max-width:580px; color:#aeb5bd; font-size:16px; line-height:1.85; letter-spacing:.03em; }.hero-actions{display:flex;align-items:center;gap:32px;margin-top:40px}
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:45px; padding:17px 20px; font-size:13px; font-weight:700; border:0; cursor:pointer; }.button.primary{background:var(--orange);min-width:170px}.text-link{font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.35);padding:10px 0}.text-link span{margin-left:22px;color:var(--orange)}.text-link.dark{border-color:#999}.text-link.dark span{color:var(--blue)}
.hero-visual { position:relative; z-index:2; height:580px; display:grid; place-items:center; }.core-ring{width:340px;height:340px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018)}
.core-ring:before,.core-ring:after{content:"";position:absolute;width:460px;height:1px;background:linear-gradient(90deg,transparent,#555,transparent)}.core-ring:after{transform:rotate(90deg)}.core-ring>div{width:160px;height:160px;border-radius:50%;background:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 60px rgba(40,98,255,.4)}.core-ring small,.core-ring span{font:9px monospace;letter-spacing:.2em;opacity:.65}.core-ring strong{font-size:54px;letter-spacing:-.08em;margin:6px 0}
.signal-card{position:absolute;width:170px;padding:14px;border:1px solid rgba(255,255,255,.18);background:rgba(15,21,29,.9);backdrop-filter:blur(8px)}.signal-card span,.signal-card small{font:9px monospace;letter-spacing:.13em;color:#87909c}.signal-card b{display:block;font-size:24px;margin:8px 0}.top-card{right:2%;top:13%}.bottom-card{left:2%;bottom:12%}.node{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange)}.node-a{top:22%;left:24%}.node-b{right:14%;bottom:31%}.node-c{left:18%;bottom:40%;background:var(--green);box-shadow:0 0 14px var(--green)}
.hero-foot{position:absolute;z-index:3;bottom:25px;left:7vw;right:7vw;display:flex;align-items:center;gap:20px;font:8px monospace;letter-spacing:.18em;color:#7f8995}.hero-lines{display:flex;gap:7px;flex:1}.hero-lines i{height:1px;background:#39404a;flex:1}.hero-lines i:first-child{background:var(--orange);max-width:80px}
.section { padding:110px 7vw; }.section-kicker{display:flex;gap:18px;align-items:center;font:10px monospace;letter-spacing:.18em;color:#60646a;border-bottom:1px solid var(--line);padding-bottom:20px}.section-kicker span{color:var(--blue)}.section-kicker.light{color:#7d8792;border-color:#2e353d}.section-kicker.light span{color:var(--orange)}
.intro-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:9vw;padding:75px 0 95px}.intro h2,.section-heading h2,.faq h2,.contact h2,.ecoco-copy h2{font-size:clamp(38px,4.5vw,68px);letter-spacing:-.06em;line-height:1.12;margin:0}.intro-copy{font-size:16px;line-height:1.95;color:#555c62}.intro-copy p{margin:0 0 22px}.intro-copy b{color:var(--ink)}.intro-copy .text-link{display:inline-block;margin-top:14px}
.principles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.principles article{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:210px}.principles span{font:10px monospace;color:var(--blue)}.principles h3{font-size:20px;margin:55px 0 14px}.principles p{font-size:13px;line-height:1.8;color:#686d72;margin:0}
.dark-section{background:#11171d;color:white}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:72px 0}.mini-label{font:10px monospace;letter-spacing:.17em;color:var(--blue);margin:0 0 22px}.light-heading .mini-label{color:var(--orange)}.section-heading>p{max-width:420px;color:#818a93;line-height:1.8;font-size:14px;margin:0}.light-heading h2{color:white}
.service-shell{display:grid;grid-template-columns:.85fr 1.15fr;border-top:1px solid #30373f}.service-list button{width:100%;height:78px;display:grid;grid-template-columns:45px 1fr 30px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid #30373f;cursor:pointer}.service-list button span{font:10px monospace;color:#66717c}.service-list button b{font-size:17px}.service-list button i{font-style:normal;font-size:18px;color:#66717c}.service-list button.active{background:var(--orange);padding:0 22px}.service-list button.active span,.service-list button.active i{color:white}.service-detail{position:relative;border-left:1px solid #30373f;padding:38px 44px 42px;min-height:430px;overflow:hidden;background:radial-gradient(circle at 80% 20%,rgba(40,98,255,.16),transparent 35%)}.service-code{font:9px monospace;letter-spacing:.2em;color:#67717d;text-align:right}.service-graphic{height:180px;display:flex;align-items:center;justify-content:center;position:relative}.service-graphic span{font-size:92px;font-weight:800;color:transparent;-webkit-text-stroke:1px #48515a;position:relative;z-index:2}.service-graphic i{position:absolute;width:170px;height:170px;border:1px solid #303942;border-radius:50%}.service-graphic i:nth-child(2){width:115px;height:115px}.service-graphic i:nth-child(3){width:240px;height:1px;border-radius:0}.service-body{display:grid;grid-template-columns:1fr auto;gap:20px;border-top:1px solid #30373f;padding-top:24px}.service-body>p{color:#a1a9b1;font-size:14px;line-height:1.8;max-width:520px}.tags{grid-column:1;display:flex;gap:7px;flex-wrap:wrap}.tags span{border:1px solid #39414a;padding:6px 9px;font:9px monospace;color:#929ba4}.service-stat{grid-column:2;grid-row:1/3;text-align:right}.service-stat b{display:block;color:var(--green);font:16px monospace}.service-stat small{font-size:9px;color:#68727b}
.filters{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.filters button{border:1px solid var(--line);background:transparent;padding:9px 12px;font-size:11px;cursor:pointer}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:55px 24px}.case-card{min-width:0}.case-art{height:330px;background:#d6d4cd;position:relative;overflow:hidden;display:grid;place-items:center}.case-art:before,.case-art:after{content:"";position:absolute;border:1px solid rgba(10,20,25,.2);border-radius:50%;width:250px;height:250px}.case-art:after{width:360px;height:360px}.case-art span{font:bold 72px monospace;letter-spacing:-.1em;z-index:2}.case-art i{position:absolute;width:80%;height:1px;background:rgba(10,20,25,.22);transform:rotate(-35deg)}.art-1{background:#cdd1cc}.art-2{background:#bcc8ff}.art-3{background:#ffd0b9}.art-4{background:#bdeac9}.case-meta{display:flex;justify-content:space-between;font:9px monospace;color:#767c81;letter-spacing:.13em;padding-top:18px}.case-card h3{font-size:23px;margin:14px 0 8px}.case-card p{color:#666d72;font-size:13px;line-height:1.7;margin:0;max-width:500px}.case-card>a{display:inline-block;font:9px monospace;margin-top:20px;border-bottom:1px solid #aaa;padding-bottom:7px}.case-card>a span{margin-left:25px;color:var(--blue)}
.ecoco-section{background:#0b2215;color:white;min-height:720px;padding:100px 7vw;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr .95fr;gap:8vw;align-items:center}.ecoco-grid{opacity:.1;mask-image:none}.ecoco-copy,.eco-dashboard{position:relative;z-index:2}.eyebrow.green>span{background:var(--green)}.eco-logo{display:flex;align-items:center;gap:12px;margin:35px 0}.eco-logo>i{font-style:normal;background:var(--green);color:#0b2215;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font:bold 32px Georgia}.eco-logo span{font-weight:800;letter-spacing:.04em}.eco-logo small{display:block;font:8px monospace;letter-spacing:.26em;color:#8cab95}.ecoco-copy h2{font-size:clamp(42px,4.5vw,66px)}.ecoco-copy>p:not(.eyebrow){color:#9ab3a2;line-height:1.85;max-width:610px}.eco-points{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0;color:#8ab096;font:9px monospace;letter-spacing:.1em}.eco-points i{color:var(--green)}.eco-button{background:var(--green);color:#0b2215;margin-top:10px}.eco-dashboard{border:1px solid rgba(73,237,131,.23);padding:25px;background:rgba(8,25,15,.75);box-shadow:0 30px 80px rgba(0,0,0,.28)}.dash-top{display:flex;justify-content:space-between;font:8px monospace;color:#699076}.dash-top b{color:var(--green)}.dash-number{padding:55px 0 30px}.dash-number small{font:8px monospace;color:#699076}.dash-number strong{display:block;font:clamp(36px,4vw,58px) monospace;color:var(--green);letter-spacing:-.06em}.dash-number sup{font-size:16px}.dash-number i{font:8px monospace;color:#699076}.dash-chart{height:150px;border-bottom:1px solid #35503e;display:flex;align-items:flex-end;gap:9%;padding:0 5%}.dash-chart span{width:6%;background:var(--green);opacity:.35}.dash-chart span:nth-child(1){height:18%}.dash-chart span:nth-child(2){height:45%}.dash-chart span:nth-child(3){height:36%}.dash-chart span:nth-child(4){height:70%}.dash-chart span:nth-child(5){height:54%}.dash-chart span:nth-child(6){height:88%;opacity:.7}.dash-chart span:nth-child(7){height:72%}.dash-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.dash-bottom div{border:1px solid #294431;padding:13px}.dash-bottom small{display:block;font:7px monospace;color:#699076}.dash-bottom b{font:17px monospace;color:#a5deb6}
.article-list{border-top:1px solid var(--line)}.article-list article{display:grid;grid-template-columns:60px 1fr 120px 30px;gap:20px;align-items:center;padding:28px 12px;border-bottom:1px solid var(--line)}.article-no{font:10px monospace;color:var(--blue)}.article-list small{font:9px monospace;color:#747b80;letter-spacing:.1em}.article-list h3{font-size:18px;margin:8px 0 0}.article-list time{font:9px monospace;color:#747b80}.article-list i{font-style:normal;color:var(--blue)}
.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw;background:#e9e7df}.faq-title h2{margin:65px 0 20px;font-size:clamp(38px,4vw,60px)}.faq-title>p{color:#6b7175;font-size:14px}.faq-list{border-top:1px solid var(--line)}.faq-list article{border-bottom:1px solid var(--line)}.faq-list button{display:grid;grid-template-columns:40px 1fr 30px;width:100%;text-align:left;align-items:center;padding:25px 5px;background:transparent;border:0;cursor:pointer}.faq-list button span{font:9px monospace;color:var(--blue)}.faq-list button b{font-size:16px}.faq-list button i{font-style:normal;font-size:20px}.faq-list article>div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}.faq-list article>div p{overflow:hidden;margin:0;padding:0 50px 0 45px;color:#636b70;font-size:13px;line-height:1.8}.faq-list article.open>div{grid-template-rows:1fr}.faq-list article.open>div p{padding-bottom:25px}
.contact{background:var(--blue);color:white;padding:110px 7vw;display:grid;grid-template-columns:1fr .9fr;gap:9vw}.contact-copy h2{margin:35px 0 25px;font-size:clamp(42px,4.8vw,72px)}.contact-copy>p:not(.eyebrow){max-width:560px;color:#c0ccff;font-size:15px;line-height:1.8}.contact-mail{margin-top:70px}.contact-mail small{display:block;font:8px monospace;letter-spacing:.17em;color:#a9b7f9;margin-bottom:10px}.contact-mail a{font-size:20px;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:7px}.contact-form{border-top:1px solid rgba(255,255,255,.28);padding-top:14px}.contact-form label{display:block;border-bottom:1px solid rgba(255,255,255,.28);padding:19px 0}.contact-form label span{display:block;font:9px monospace;letter-spacing:.12em;color:#aab8ff;margin-bottom:10px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;background:transparent;border:0;outline:0;color:white;font-size:14px;resize:none}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#97a9fa}.contact-form select option{color:#111}.submit{background:white;color:var(--blue);width:100%;margin-top:25px}.form-success{text-align:center;padding:70px 15px}.form-success>span{display:grid;place-items:center;margin:auto;width:60px;height:60px;border:1px solid white;border-radius:50%;font-size:24px}.form-success h3{font-size:26px}.form-success p{color:#c0ccff;line-height:1.7}.form-success button{background:transparent;color:white;border:0;border-bottom:1px solid white;padding:8px;cursor:pointer}
footer{background:#0b1016;color:white;padding:70px 7vw 30px}.footer-brand{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:60px;border-bottom:1px solid #293038}.footer-brand p{font-size:12px;color:#6f7881}.footer-logo-lockup{display:flex;align-items:center;gap:22px}.footer-logo-lockup img{width:86px;height:106px;object-fit:contain;background:white;padding:4px}.footer-logo-lockup b{display:block;font-size:17px;letter-spacing:.055em}.footer-logo-lockup small{display:block;margin-top:10px;color:#9ba3ab;font-size:12px;letter-spacing:.09em}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);margin-left:45%;padding:50px 0}.footer-links div{display:flex;flex-direction:column;gap:12px}.footer-links b{font:8px monospace;letter-spacing:.15em;color:#66717c;margin-bottom:8px}.footer-links a{font-size:12px;color:#9ba3ab}.footer-bottom{border-top:1px solid #293038;padding-top:24px;display:flex;justify-content:space-between;font:8px monospace;color:#5f6872}.footer-bottom div{display:flex;gap:24px}
@media (max-width:900px){.site-header{height:70px}.menu-button{display:block;color:white;z-index:3}.nav{display:none;position:absolute;top:0;left:0;right:0;background:#0b1016;padding:95px 7vw 35px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.hero{height:auto;min-height:900px;grid-template-columns:1fr;padding-top:130px}.hero-visual{height:360px}.core-ring{width:240px;height:240px}.core-ring>div{width:125px;height:125px}.core-ring:before,.core-ring:after{width:330px}.signal-card{width:140px}.hero-foot{display:none}.intro-layout,.ecoco-section,.contact,.faq{grid-template-columns:1fr}.principles{grid-template-columns:repeat(2,1fr)}.service-shell{grid-template-columns:1fr}.service-detail{border-left:0}.section-heading{align-items:flex-start;flex-direction:column}.case-grid{gap:45px 18px}.faq{gap:55px}.footer-links{margin-left:0}.ecoco-section{padding-top:90px;padding-bottom:90px}}
@media (max-width:600px){.section{padding:80px 6vw}.official-logo{width:39px;height:48px}.official-name b{font-size:10px}.official-name small{font-size:8px;letter-spacing:.04em}.hero{padding-left:6vw;padding-right:6vw;min-height:850px}.hero h1{font-size:52px}.hero-actions{align-items:flex-start;flex-direction:column;gap:15px}.hero-visual{height:300px}.core-ring{width:190px;height:190px}.core-ring>div{width:105px;height:105px}.core-ring strong{font-size:38px}.core-ring:before,.core-ring:after{width:250px}.signal-card{width:125px;padding:10px}.top-card{right:-3%}.bottom-card{left:-3%}.intro-layout{padding:55px 0}.principles{grid-template-columns:1fr}.principles article{min-height:150px}.principles h3{margin-top:30px}.service-list button{height:68px}.service-detail{padding:28px 22px}.service-body{grid-template-columns:1fr}.service-stat{grid-column:1;grid-row:auto;text-align:left}.case-grid{grid-template-columns:1fr}.case-art{height:270px}.filters{justify-content:flex-start}.ecoco-section{padding:80px 6vw}.eco-dashboard{padding:18px}.article-list article{grid-template-columns:34px 1fr 20px}.article-list time{display:none}.faq{padding-top:80px;padding-bottom:80px}.contact{padding:80px 6vw}.contact-mail{margin-top:40px}.footer-brand,.footer-bottom{flex-direction:column;gap:20px}.footer-logo-lockup{align-items:flex-start}.footer-logo-lockup img{width:68px;height:84px}.footer-logo-lockup b{font-size:13px}.footer-logo-lockup small{font-size:10px}.footer-links{grid-template-columns:repeat(2,1fr);gap:35px}.footer-bottom div{flex-wrap:wrap}.article-list h3{font-size:15px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media (max-width:900px){.language-switch{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;width:100%}}
.service-list button:focus-visible,.filters button:focus-visible,.faq-list button:focus-visible,.language-switch button:focus-visible,.menu-button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.hero h1,.intro h2,.section-heading h2,.faq h2,.contact h2,.ecoco-copy h2{white-space:pre-line}
.upload-note{font-size:11px;color:#7e8790;margin-top:14px}