@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Noto+Sans+TC:wght@400;500;600;700;900&display=swap');
:root{color-scheme:dark;--bg:#090b12;--panel:#111622;--line:#252d3c;--muted:#929caf;--red:#ff4055;--blue:#3ca6ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f6f7fb;font-family:'Noto Sans TC',sans-serif;overflow-x:hidden}.ambient{position:fixed;width:38rem;height:38rem;filter:blur(120px);opacity:.13;pointer-events:none;z-index:-1}.ambient-a{background:var(--red);top:8rem;left:-25rem}.ambient-b{background:var(--blue);top:30rem;right:-25rem}
.topbar{height:76px;padding:0 clamp(20px,6vw,96px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;background:#090b12cc;backdrop-filter:blur(18px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font:800 20px 'Barlow Condensed',sans-serif;letter-spacing:2px}.brand i{font-style:normal;color:#8d98aa}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--red),#a71e45);box-shadow:0 0 25px #ff405533;font-size:16px}.top-actions{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.status-dot{width:7px;height:7px;border-radius:50%;background:#ffb84d;box-shadow:0 0 12px #ffb84d}.icon-button{margin-left:12px;background:#171e2b;border:1px solid var(--line);color:white;border-radius:9px;width:38px;height:38px;font-size:22px;cursor:pointer}
main{max-width:1160px;margin:auto;padding:0 26px}.hero{padding:88px 0 56px;text-align:center;position:relative}.eyebrow{font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:3px;color:#9aa7bb}.eyebrow span{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px;box-shadow:0 0 12px var(--red)}h1{font:900 clamp(58px,9vw,112px)/.86 'Barlow Condensed',sans-serif;letter-spacing:-2px;margin:24px 0 20px}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #aab5c8}.lead{max-width:620px;margin:0 auto;color:#aab4c5;font-size:14px;line-height:1.9}.hero-actions{display:flex;justify-content:center;gap:12px;margin:28px 0 58px;flex-wrap:wrap}button,a{font-family:inherit}.primary,.secondary{padding:13px 20px;border-radius:9px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}.primary{border:0;background:linear-gradient(100deg,#ff4055,#df2748);color:white;box-shadow:0 8px 30px #ff405533}.primary span{margin-left:16px}.secondary{border:1px solid #30394a;background:#111722;color:#dbe2ed}.console-stage{max-width:720px;margin:auto;position:relative;padding:0 0 22px}.console-frame{height:260px;display:flex;align-items:stretch;gap:0;filter:drop-shadow(0 25px 35px #0009);position:relative;z-index:1}.screen{flex:1;background:radial-gradient(ellipse at 50% 45%,#1d2b43,#080d18 70%);border:9px solid #242b36;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;padding:14px 18px;min-width:0}.screen-top,.screen-bottom{display:flex;justify-content:space-between;color:#77859a;font:600 9px 'Barlow Condensed';letter-spacing:1.5px}.screen-center{display:flex;flex-direction:column;align-items:center;gap:5px}.mx-logo{font:900 62px/.9 'Barlow Condensed';letter-spacing:-5px}.mx-logo span{color:var(--red);font-size:28px;vertical-align:top}.screen-center strong{font:700 13px 'Barlow Condensed';letter-spacing:4px}.screen-center small{font-size:8px;color:#77859a;letter-spacing:2px}.joy{width:65px;position:relative;display:flex;align-items:center;justify-content:center}.joy-left{background:linear-gradient(90deg,#0878c7,#36b6ff);border-radius:36px 5px 5px 36px}.joy-right{background:linear-gradient(90deg,#ff5261,#d91e3e);border-radius:5px 36px 36px 5px}.stick{width:25px;height:25px;border-radius:50%;background:#141a24;border:5px solid #364252;position:absolute;top:65px;box-shadow:0 2px 3px #000}.joy-btn{position:absolute;color:#1b2430;font-weight:900}.joy-left .plus{top:28px;right:12px}.joy-left .cross{bottom:34px;left:21px}.joy-right .plus{top:28px;left:12px}.joy-right .cross{bottom:34px;right:21px}.stage-glow{position:absolute;bottom:0;left:15%;right:15%;height:65px;background:linear-gradient(90deg,var(--blue),var(--red));filter:blur(55px);opacity:.25}
.workspace{padding:50px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-heading h2{font-size:23px;margin:7px 0 0}.pill{font-size:10px;letter-spacing:1px;border-radius:20px;padding:7px 11px}.warning{color:#ffc36a;background:#ffc36a18;border:1px solid #ffc36a40}.workspace-card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#131a27,#0d111a);overflow:hidden}.workspace-screen{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 20px}.loader-ring{width:42px;height:42px;border:2px solid #2b3547;border-top-color:var(--red);border-radius:50%;margin-bottom:18px;animation:spin 1.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.workspace-screen h3{font-size:19px;margin:0 0 8px}.workspace-screen p{max-width:570px;color:var(--muted);font-size:12px;line-height:1.8;margin:0}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;margin-top:25px;text-align:left;font-size:11px;color:#c3ccda}.check{color:#56d69b;margin-right:7px}.pending{color:#ffbd5c;margin-right:7px}.workspace-footer{display:flex;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--line);color:#8592a6;font-size:10px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 0 80px}.feature{border:1px solid var(--line);background:#101520a8;border-radius:13px;padding:22px}.feature-icon{color:var(--red);font-size:23px}.feature h3{font:700 17px 'Barlow Condensed';letter-spacing:1px;margin:13px 0 6px}.feature p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}footer{border-top:1px solid #ffffff12;padding:22px clamp(20px,6vw,96px);display:flex;justify-content:space-between;gap:12px;color:#687487;font-size:10px;letter-spacing:.4px}
@media(max-width:600px){.topbar{height:64px}.hero{padding-top:65px}h1{font-size:64px}.lead{font-size:12px}.console-frame{height:180px}.joy{width:42px}.screen{border-width:6px;padding:10px}.mx-logo{font-size:44px}.screen-top,.screen-bottom{font-size:7px}.stick{width:19px;height:19px;top:48px}.joy-left .cross{left:12px;bottom:22px}.joy-right .cross{right:12px;bottom:22px}.features{grid-template-columns:1fr;padding-bottom:45px}.workspace-footer{flex-direction:column;gap:8px}.check-grid{grid-template-columns:1fr}footer{flex-direction:column}}
