.site{overflow-x:clip}.topbar{z-index:40;background:color-mix(in srgb, var(--paper) 82%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #0000;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1rem,3vw,2rem);display:flex;position:fixed;inset:0 0 auto}.brand-mark{align-items:center;gap:.7rem;display:flex}.brand-mark__logo{background:var(--ink);width:2.4rem;height:2.4rem;color:var(--signal);font-family:var(--font-display);letter-spacing:-.04em;border-radius:.7rem;place-items:center;font-size:.85rem;font-weight:800;display:grid}.brand-mark__text{flex-direction:column;line-height:1.05;display:flex}.brand-mark__text strong{font-family:var(--font-display);letter-spacing:-.03em;font-size:1rem}.brand-mark__text small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}.topnav{color:var(--ink-soft);gap:1.1rem;font-size:.92rem;display:flex}.topnav a{transition:color .2s var(--ease)}.topnav a:hover{color:var(--ink)}.hero{background:radial-gradient(ellipse 70% 55% at 15% 10%, #0ecf9a2e, transparent 55%), radial-gradient(ellipse 55% 45% at 90% 20%, #ff5a1f1f, transparent 50%), linear-gradient(165deg, #f7fafc 0%, var(--mist) 45%, #dfe7ef 100%);grid-template-columns:1.1fr .9fr;align-items:end;gap:clamp(1.5rem,4vw,3rem);min-height:100dvh;padding:clamp(5.5rem,12vh,7rem) clamp(1rem,4vw,3rem) clamp(2rem,6vh,3.5rem);display:grid;position:relative;overflow:hidden}.hero-atmosphere{pointer-events:none;position:absolute;inset:0}.hero-grid{background-image:linear-gradient(#07131f0d 1px,#0000 1px),linear-gradient(90deg,#07131f0d 1px,#0000 1px);background-size:56px 56px;animation:28s linear infinite alternate drift;position:absolute;inset:-10%;-webkit-mask-image:radial-gradient(70% 65% at 50% 40%,#000 30%,#0000 80%);mask-image:radial-gradient(70% 65% at 50% 40%,#000 30%,#0000 80%)}.hero-orb{filter:blur(40px);opacity:.55;border-radius:50%;position:absolute}.hero-orb--a{background:#0ecf9a59;width:28vw;height:28vw;top:18%;left:-6vw}.hero-orb--b{background:#ff5a1f38;width:22vw;height:22vw;top:8%;right:4vw}.hero-sweep{width:35%;height:1px;animation:sweep 5.5s var(--ease) infinite;background:linear-gradient(90deg,#0000,#0ecf9ab3,#0000);position:absolute;top:18%;left:0}.hero-content{z-index:1;max-width:38rem;padding-bottom:1rem;position:relative}.hero-brand{font-family:var(--font-display);letter-spacing:-.055em;color:var(--ink);animation:rise .8s var(--ease) both;margin:0 0 1.15rem;font-size:clamp(2.4rem,6.5vw,4.4rem);font-weight:800;line-height:.95}.hero-content h1{font-family:var(--font-display);letter-spacing:-.025em;color:var(--ink-soft);max-width:28rem;animation:rise .9s var(--ease) 80ms both;margin:0;font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:600;line-height:1.35}.hero-lead{max-width:32rem;color:var(--ink-soft);animation:rise .9s var(--ease) .16s both;margin:1.1rem 0 0;font-size:clamp(.98rem,1.6vw,1.12rem);line-height:1.65}.hero-cta{animation:rise .9s var(--ease) .24s both;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;display:flex}.btn{min-height:2.85rem;transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);border:1px solid #0000;border-radius:.7rem;justify-content:center;align-items:center;gap:.45rem;padding:0 1.15rem;font-size:.95rem;font-weight:700;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn--primary{background:var(--ink);color:#f4fbf8}.btn--primary:hover{background:#102033}.btn--secondary{border-color:var(--line);color:var(--ink);background:0 0}.btn--secondary:hover{background:#ffffff8c;border-color:#07131f47}.btn--ghost{color:var(--ink);background:0 0;border-color:#07131f29;padding-inline:1rem}.btn--ghost:hover{border-color:var(--signal-deep);color:var(--signal-deep)}.hero-stage{z-index:1;min-height:clamp(280px,48vh,460px);animation:rise 1s var(--ease) .18s both;position:relative}.stage-rail{background:linear-gradient(90deg,#0000,#07131f2e,#0000);height:2px;position:absolute;top:58%;left:12%;right:8%}.stage-panel{background:color-mix(in srgb, var(--panel) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);border:1px solid #07131f1a;border-radius:1.1rem;padding:1rem 1.1rem;position:absolute}.stage-panel strong{font-family:var(--font-display);letter-spacing:-.03em;font-size:1.05rem;display:block}.stage-panel span{color:var(--muted);margin-top:.25rem;font-size:.82rem;display:block}.stage-panel--main{width:min(78%,280px);padding:1.25rem 1.3rem 1.35rem;top:18%;left:8%}.stage-label{color:var(--signal-deep);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .35rem;font-size:.72rem;font-weight:700}.stage-dot{background:var(--signal);border-radius:50%;width:.55rem;height:.55rem;margin-bottom:.7rem;animation:2.4s ease-in-out infinite pulse-dot}.stage-panel--a{width:min(52%,180px);top:8%;right:4%}.stage-panel--b{width:min(56%,190px);bottom:12%;right:10%}.section{padding:clamp(3.5rem,9vh,6rem) clamp(1rem,4vw,3rem)}.section-head{max-width:40rem;margin-bottom:clamp(2rem,5vh,3rem)}.eyebrow{font-family:var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--signal-deep);margin:0 0 .6rem;font-size:.78rem;font-weight:700}.section-head h2,.contact-panel h2{font-family:var(--font-display);letter-spacing:-.035em;margin:0;font-size:clamp(1.7rem,3.5vw,2.5rem);line-height:1.15}.section-head p{color:var(--ink-soft);margin:.85rem 0 0;line-height:1.65}.products{background:var(--paper)}.product-list{gap:clamp(2rem,5vh,3.5rem);display:grid}.product{opacity:0;transition:opacity .7s var(--ease), transform .7s var(--ease);transition-delay:var(--delay,0s);grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);display:grid;transform:translateY(28px)}.product.is-in{opacity:1;transform:translateY(0)}.product--flip .product-copy{order:2}.product--flip .product-visual{order:1}.product-kicker{color:var(--ember-deep);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .45rem;font-size:.8rem;font-weight:700}.product-copy h3{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:clamp(1.45rem,2.8vw,2rem)}.product-blurb{color:var(--ink-soft);margin:.85rem 0 0;line-height:1.65}.product-copy ul{gap:.45rem;margin:1rem 0 1.35rem;padding:0;list-style:none;display:grid}.product-copy li{color:var(--ink);padding-left:1rem;font-size:.95rem;position:relative}.product-copy li:before{content:"";background:var(--signal);border-radius:50%;width:.4rem;height:.4rem;position:absolute;top:.55em;left:0}.product-visual{border:1px solid var(--line);min-height:240px;box-shadow:var(--shadow-soft);background:linear-gradient(145deg,#0ecf9a14,#0000 40%),#dce4ec;border-radius:1.35rem;overflow:hidden}.product-visual img{object-fit:cover;width:100%;height:100%;min-height:280px}.product-visual--abstract{color:#eef6f2;background:radial-gradient(circle at 30% 30%,#0ecf9a40,#0000 45%),radial-gradient(circle at 75% 70%,#ff5a1f2e,#0000 40%),linear-gradient(160deg,#102033,#07131f);place-items:center;min-height:280px;display:grid;position:relative}.abstract-ring{border:1px solid #0ecf9a73;border-radius:50%;width:10rem;height:10rem;animation:3.2s ease-in-out infinite pulse-dot;position:absolute}.abstract-chip{z-index:1;font-family:var(--font-display);letter-spacing:.08em;background:#ffffff0f;border:1px solid #ffffff29;border-radius:999px;padding:.55rem .85rem;font-size:.72rem;position:relative}.abstract-steps{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex;position:absolute;inset:auto 1rem 1.1rem}.abstract-steps span{background:#ffffff14;border-radius:.45rem;padding:.28rem .55rem;font-size:.72rem}.approach{background:linear-gradient(#edf2f6 0%,#e4ebf2 100%)}.approach-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.approach-item{border-top:1px solid #07131f1f;padding:.35rem 0 .85rem}.approach-item h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.15rem}.approach-item p{color:var(--ink-soft);margin:.7rem 0 0;font-size:.95rem;line-height:1.6}.contact{background:var(--ink);color:#edf4f0}.contact .eyebrow{color:var(--signal)}.contact-panel{max-width:42rem}.contact-panel p{color:#edf4f0c7;margin:.9rem 0 0;line-height:1.65}.contact-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;display:flex}.contact .btn--primary{background:var(--signal);color:var(--ink)}.contact .btn--primary:hover{background:#2fdbaa}.contact .btn--secondary{color:#edf4f0;border-color:#ffffff38}.contact .btn--secondary:hover{background:#ffffff0f;border-color:#fff6}.footer{color:#edf4f09e;background:#050d16;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;padding:1.4rem clamp(1rem,4vw,3rem) 1.8rem;font-size:.85rem;display:flex}.footer strong{color:#edf4f0;font-family:var(--font-display);letter-spacing:-.02em;display:block}.footer span{margin-top:.15rem;font-size:.78rem;display:block}.footer p{align-self:end;margin:0}@media (width<=900px){.hero{grid-template-columns:1fr;align-items:start;min-height:auto;padding-bottom:2.5rem}.hero-stage{min-height:300px;margin-top:.5rem}.product,.product--flip{grid-template-columns:1fr}.product--flip .product-copy,.product--flip .product-visual{order:initial}.approach-grid{grid-template-columns:1fr}}@media (width<=640px){.topnav{gap:.75rem;font-size:.85rem}.brand-mark__text small{display:none}.stage-panel--main{width:min(84%,250px);left:4%}.stage-panel--a{top:4%;right:3%}.stage-panel--b{bottom:6%;right:6%}}:root{--ink:#07131f;--ink-soft:#243447;--mist:#e6ebf1;--paper:#f4f7fa;--panel:#fff;--line:#07131f1a;--signal:#0ecf9a;--signal-deep:#089e76;--ember:#ff5a1f;--ember-deep:#e04512;--muted:#5c6b7a;--shadow-soft:0 18px 50px #07131f14;--font-display:"Syne", "Noto Sans TC", sans-serif;--font-body:"Noto Sans TC", sans-serif;--ease:cubic-bezier(.22, 1, .36, 1);color:var(--ink);background:var(--mist);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--mist);min-width:320px;margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}#root{min-height:100dvh}@keyframes rise{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{0%{transform:translate(0,0)}to{transform:translate(-40px,-24px)}}@keyframes sweep{0%{opacity:0;transform:translate(-30%)skew(-12deg)}35%{opacity:.55}to{opacity:0;transform:translate(130%)skew(-12deg)}}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
