:root{--ink:#061840;--blue:#0869f6;--cyan:#00c7f2;--muted:#617599;--accent:#eaf3ff;--header-height:82px;--ease:cubic-bezier(.2,.9,.25,1)}
*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-height)}body{margin:0;background:#f9fcff;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #06b6ff;outline-offset:3px}button:disabled{opacity:.35;cursor:default}
.header{position:fixed;z-index:60;top:0;left:0;width:100%;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:26px;padding:0 clamp(22px,4.3vw,84px);background:rgba(250,253,255,.83);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(174,206,247,.28)}.brand{display:flex;flex:none}.brand img{display:block;width:clamp(205px,21vw,335px);height:auto}.top-nav{margin:auto;display:flex;align-items:center;gap:clamp(20px,2.4vw,43px)}.top-nav a{position:relative;padding:12px 0;font-size:16px;font-weight:650;white-space:nowrap;letter-spacing:.01em}.top-nav a.selected{color:#096ef6}.top-nav a.selected:after{content:"";position:absolute;bottom:5px;height:3px;border-radius:5px;background:#0869fa;left:0;right:0}.top-nav a:hover{color:var(--blue)}.header-cta{color:#fff;background:linear-gradient(105deg,#008dfd,#075cfa);box-shadow:0 10px 23px #0867ff22;min-width:172px;padding:14px 23px;border-radius:50px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:17px;font-weight:700}.header-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px #0867ff38}.mobile-menu-button{display:none;width:42px;height:42px;background:#eef6ff;border:1px solid #dbeafb;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px}.mobile-menu-button span{height:2px;width:21px;background:#113a7b;border-radius:5px}.mobile-menu[hidden]{display:none!important}.mobile-menu{position:absolute;top:calc(100% + 1px);left:0;right:0;display:flex;flex-direction:column;background:rgba(255,255,255,.98);border-bottom:1px solid #dce7f8;box-shadow:0 20px 42px #1f4d9a14;padding:12px 23px}.mobile-menu a{padding:13px;font-size:16px;font-weight:600}
.scroll-track{height:510svh;position:relative}.hero-sticky{position:sticky;top:0;height:100svh;min-height:630px;overflow:hidden;background:radial-gradient(ellipse 60% 75% at 84% 48%,#e3f2ff 0%,#f6fbff 70%,transparent 100%),linear-gradient(122deg,#ffffff 8%,#f8fbff 59%,#e4f3ff 100%);isolation:isolate}.ambient,.faint-grid,.ribbon{position:absolute;pointer-events:none}.ambient-one{right:-16%;top:-19%;width:70vw;height:75vw;border-radius:50%;background:radial-gradient(circle,#d3e9ff 0%,#e3f5ff6c 37%,transparent 70%);filter:blur(27px)}.ambient-two{right:21%;bottom:4%;width:27vw;height:27vw;border-radius:50%;background:radial-gradient(circle,#acf3ff40 0%,transparent 68%);filter:blur(18px)}.faint-grid{inset:0;background-image:linear-gradient(#328fff06 1px,transparent 1px),linear-gradient(90deg,#328fff06 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,transparent 40%,#000)}.ribbon{border-radius:50%;border:1px solid rgba(15,137,255,.08);width:1000px;height:260px;right:-210px;top:28%;transform:rotate(-19deg)}.ribbon-b{width:1250px;height:420px;top:49%;right:-200px;transform:rotate(-21deg)}
.hero-content{position:absolute;left:clamp(28px,4.7vw,88px);top:47%;transform:translateY(-43%);z-index:8;width:min(45.8vw,745px);will-change:transform,opacity;pointer-events:auto}.hero-eyebrow{display:flex;align-items:center;gap:16px;color:#3d659d;font-size:clamp(14px,1.12vw,17px);font-weight:680;letter-spacing:.04em;margin-bottom:27px}.accent-line{display:block;width:41px;height:2px;background:#008ff9}.hero-content h1{font-size:clamp(40px,3.6vw,70px);letter-spacing:-.065em;line-height:1.24;margin:0;font-weight:850;white-space:nowrap}.hero-content h1 span{color:#076bf9;letter-spacing:-.055em}.hero-intro{font-size:clamp(15px,1.13vw,17px);line-height:1.95;color:#466087;letter-spacing:.012em;margin:26px 0 31px;font-weight:450}.hero-buttons{display:flex;align-items:center;gap:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:19px;white-space:nowrap;border:0;padding:15px 26px;border-radius:100px;font-size:clamp(14px,1vw,15px);font-weight:700;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-3px)}.btn-primary{color:#fff;background:linear-gradient(105deg,#079afe,#0961fa);box-shadow:0 9px 24px rgba(0,99,252,.18)}.btn-primary:hover{box-shadow:0 12px 26px rgba(0,99,252,.28)}.btn-secondary{color:#1a467f;border:1.5px solid #b5d2fd;background:rgba(255,255,255,.8)}.play-icon{display:grid;place-items:center;border:1.5px solid #227bea;border-radius:50%;width:24px;height:24px;font-size:14px;color:#006dff;padding-left:2px}.metrics{display:flex;gap:0;margin-top:44px}.metrics>div{padding:0 clamp(16px,2.5vw,44px);border-right:1px solid #d6e2f2;display:flex;flex-direction:column;gap:8px}.metrics>div:first-child{padding-left:2px}.metrics>div:last-child{border-right:0}.metrics strong{font-size:clamp(25px,2.55vw,42px);font-weight:800;color:#075ef0;letter-spacing:-.05em;line-height:1}.metrics span{font-size:15px;color:#3b5074;font-weight:530}
.visual-viewport{position:absolute;z-index:3;left:40%;right:0;top:8.2%;bottom:14.5%;pointer-events:none;overflow:visible;contain:layout}.visual-canvas{position:absolute;width:1040px;height:720px;left:50%;top:50%;transform-origin:center center;transform:translate(-50%,-50%) scale(.81);will-change:transform}.stage-glow{position:absolute;width:740px;height:560px;left:160px;top:110px;background:radial-gradient(ellipse,#cce8ffb5 0%,#defaff7c 34%,transparent 72%);filter:blur(24px);z-index:0}.stage-orbit{position:absolute;border-radius:50%;border:1px solid #7ac2fa55;transform:rotate(-13deg);z-index:1}.orbit-one{width:840px;height:245px;left:100px;top:340px}.orbit-two{width:1000px;height:355px;left:0;top:228px;transform:rotate(-17deg);border-color:#b2dafc7b}.spark{position:absolute;color:#fff;text-shadow:0 0 11px #10b8ff,0 0 26px #40bdf9;z-index:2;animation:glimmer 4.8s ease-in-out infinite alternate}.s1{top:208px;left:177px;font-size:22px}.s2{top:105px;left:805px;font-size:30px;animation-delay:.9s}.s3{top:428px;left:890px;font-size:17px;animation-delay:1.5s}.s4{top:583px;left:60px;font-size:26px;animation-delay:2.1s}.float-dot{position:absolute;background:radial-gradient(circle at 35% 30%,#fff,#9eeafa 37%,#48adf9 72%,#1f63dd);border-radius:50%;opacity:.7;box-shadow:0 0 27px #64d8fd7b;z-index:2;animation:float 6s ease-in-out infinite}.dot1{left:158px;top:70px;width:19px;height:19px}.dot2{left:863px;top:396px;width:30px;height:30px;animation-delay:-1s}.dot3{left:114px;top:550px;width:13px;height:13px;animation-delay:-3s}
.laptop-device{position:absolute;inset:0;opacity:0;transform-origin:58% 69%;will-change:transform,opacity;z-index:5}.laptop-device img{position:absolute;inset:0;display:block;width:1040px;height:720px;object-fit:contain}.laptop-base{filter:drop-shadow(0 20px 20px #2357ae1e)}.laptop-lid{transform-origin:47% 64%;transform:perspective(900px) rotateX(82deg);backface-visibility:hidden;filter:drop-shadow(0 3px 8px #204c9644);will-change:transform}.robot-device{position:absolute;left:69px;top:302px;width:298px;height:284px;z-index:7;opacity:0;will-change:transform,opacity;transform-origin:50% 60%;filter:drop-shadow(1px 16px 12px #2468b03d)}.robot-device .robot-float{width:100%;height:100%;animation:robotBreathe 4s ease-in-out infinite}.robot-device img{display:block;width:100%;height:100%;object-fit:contain}.robot-greeting{position:absolute;left:57%;top:5%;transform:translate(-50%,-50%) rotate(6deg);background:rgba(255,255,255,.88);border:1px solid #a8d9ff;border-radius:14px;padding:8px 15px;box-shadow:0 11px 26px #2378cf16;color:#197ef4;font-size:14px;font-weight:900;letter-spacing:.08em;opacity:.8}.robot-greeting span{color:#00dbfb}.phone-device{position:absolute;left:684px;top:334px;width:281px;height:354px;z-index:8;opacity:0;will-change:transform,opacity;filter:drop-shadow(4px 16px 16px #235cb044)}.phone-float{width:100%;height:100%;animation:phoneBreathe 5s ease-in-out infinite}.phone-device img{display:block;width:100%;height:100%;object-fit:contain}
.service-float{position:absolute;z-index:11;display:flex;align-items:center;gap:14px;min-height:83px;padding:12px 18px;background:linear-gradient(128deg,rgba(255,255,255,.95),rgba(229,243,255,.90));border:1.5px solid rgba(255,255,255,.95);box-shadow:0 14px 35px rgba(49,117,193,.12),inset 0 1px rgba(255,255,255,.95);border-radius:20px;backdrop-filter:blur(12px);opacity:0;will-change:transform,opacity}.service-float-icon{font-size:39px;font-weight:900;min-width:54px;text-align:center;line-height:1}.service-float strong{display:block;font-size:19px;color:#102c59;white-space:nowrap}.service-float span{display:block;color:#486591;font-size:14px;white-space:nowrap;margin-top:3px}.service-float-icon.blue{color:#0579fc}.service-float-icon.violet{color:#7851ff}.service-float-icon.mint{color:#08b69a}.service-float-icon.pink{color:#ef5ca6}.service-float-icon.cyan{color:#0f9af3}.service-float--ai{left:258px;top:15px}.service-float--web{left:677px;top:115px}.service-float--app{left:725px;top:270px}.service-float--marketing{left:262px;top:574px}.service-float--cloud{left:620px;top:568px}.final-image{position:absolute;inset:0;background-image:url('../assets/hero/final-scene.webp');background-size:1040px 720px;background-position:center center;z-index:12;opacity:0;will-change:opacity;pointer-events:none;mask-image:linear-gradient(to right,transparent 0%,black 7%,black 100%)}
.scroll-bottom{position:absolute;z-index:20;bottom:22px;left:clamp(24px,4.6vw,88px);right:clamp(24px,4.6vw,88px);display:flex;align-items:center;justify-content:space-between;gap:20px}.scroll-instruction{display:flex;align-items:center;gap:12px;color:#315d93;font-weight:750;letter-spacing:.14em;font-size:9px}.scroll-instruction small{font-size:10px;font-weight:400;letter-spacing:0;line-height:1.9;color:#8499ba}.mouse-outline{height:32px;width:20px;border:1px solid #3f86df;border-radius:11px;display:grid;place-items:start center;padding-top:6px}.mouse-outline i{width:2px;height:7px;border-radius:4px;background:#117cfd;animation:mouseWheel 1.5s infinite}.step-controller{display:flex;align-items:center;gap:9px}.step-controller button{width:29px;height:29px;border-radius:50%;border:1px solid #9fbcec;background:#fff;color:#6b85a9;font-size:10px;font-weight:800;transition:all .2s}.step-controller button.active{background:#116cf4;color:#fff;border-color:#116cf4;box-shadow:0 0 0 4px #e5f0ff}.step-controller>span{width:26px;height:1px;background:#c7dafa}.scene-indicator{display:flex;align-items:center;gap:9px;color:#6493c7;font-size:14px;letter-spacing:.06em;white-space:nowrap}.scene-indicator b{color:#076bf9}.progress-bar{width:75px;height:3px;border-radius:10px;background:#cfddf2;overflow:hidden}.progress-bar i{display:block;width:0;height:100%;background:#067afa}
.service-dock{position:absolute;z-index:15;left:clamp(25px,3.6vw,70px);right:clamp(25px,3.6vw,70px);bottom:70px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;opacity:0;pointer-events:none;will-change:opacity,transform}.dock-card{display:flex;gap:12px;align-items:center;min-width:0;border:1px solid #e0ebf9;padding:15px 14px;background:rgba(255,255,255,.95);border-radius:17px;box-shadow:0 8px 24px #4f8cd710;transition:transform .2s,box-shadow .2s}.dock-card:hover{transform:translateY(-5px);box-shadow:0 13px 25px #388af126}.dock-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:54px;height:57px;border-radius:13px;font-size:31px;font-weight:800;background:#edf4ff}.dock-icon .eho-dock-icon{display:block;width:auto;height:1em;max-width:100%;margin:0 auto;overflow:visible}.dock-icon.indigo{color:#067bfd}.dock-icon.violet{color:#7957fc;background:#f3edff}.dock-icon.blue{color:#1786ff}.dock-icon.coral{color:#f28b38;background:#fff4ed}.dock-icon.sky{color:#1498ff}.dock-card strong{font-size:clamp(14px,.85vw,15px);white-space:nowrap;font-weight:760}.dock-card small{display:block;font-size:clamp(14px,.72vw,15px);line-height:1.45;color:#7086a9;margin-top:5px}.dock-arrow{margin-left:auto;color:#1677ff;font-size:23px;font-weight:500}
.following-section,.process-section,.contact-section{position:relative;padding:145px clamp(25px,6vw,110px);background:#fff}.section-wrap{max-width:1300px;margin:0 auto}.section-overline{font-size:14px;letter-spacing:.18em;font-weight:760;color:#0c79fc}.following-section h2,.process-section h2,.contact-section h2{font-size:clamp(36px,4.5vw,68px);line-height:1.24;letter-spacing:-.06em;margin:20px 0}.following-section h2 span,.process-section h2 span,.contact-section h2 span{color:#0975fa}.section-desc{max-width:650px;line-height:1.9;color:#6c7e9a}.offerings{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}.offerings article{background:linear-gradient(150deg,#f9fcff,#edf5ff);border:1px solid #dceafb;border-radius:26px;padding:30px}.offering-icon{color:#0a75ff;background:#dcecff;border-radius:17px;width:64px;height:64px;display:grid;place-items:center;font-size:34px}.offerings h3{font-size:21px}.offerings p{color:#697f9e;line-height:1.75;font-size:14px}.process-section{background:linear-gradient(140deg,#edf6ff,#f8fcff)}.contact-section{background:#f8fbff}.contact-end{background:linear-gradient(130deg,#e9f4ff,#f9fcff);min-height:500px}.contact-end .btn{margin-top:15px}footer{display:flex;justify-content:space-between;gap:20px;padding:30px clamp(25px,6vw,110px);background:#0c2755;color:#b6d5f9;font-size:14px;letter-spacing:.03em}
@keyframes glimmer{0%{opacity:.25;transform:scale(.7)}100%{opacity:1;transform:scale(1.12)}}@keyframes float{50%{transform:translateY(-18px)}}@keyframes robotBreathe{50%{transform:translateY(-9px) rotate(-1.4deg)}}@keyframes phoneBreathe{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes mouseWheel{0%{transform:translateY(0);opacity:0}50%{opacity:1}100%{transform:translateY(8px);opacity:0}}
@media(max-width:1300px){.top-nav{gap:23px}.hero-content{width:47vw}.hero-content h1{font-size:clamp(36px,3.6vw,57px)}.visual-viewport{left:40%;bottom:13.5%}.service-dock{bottom:70px;gap:7px}.dock-card{padding:12px 10px;gap:7px}.dock-icon{width:45px;height:50px;font-size:26px}.dock-arrow{display:none}.metrics{margin-top:35px}}
@media(max-width:1050px){:root{--header-height:74px}.top-nav{gap:18px}.top-nav a{font-size:14px}.brand img{width:228px}.header-cta{font-size:14px;min-width:126px;padding:12px}.hero-content{left:31px;top:43%;width:50%}.hero-content h1{font-size:clamp(33px,4vw,48px)}.hero-intro{font-size:15px;line-height:1.8}.hero-buttons{gap:8px}.btn{padding:13px 17px;gap:8px}.visual-viewport{left:38%;top:11%;bottom:13%}.metrics strong{font-size:28px}.metrics>div{padding:0 17px}.service-dock{left:19px;right:19px}.dock-card small{display:none}.dock-icon{width:43px;height:44px}.dock-card{padding:10px;min-height:65px}.offerings{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){:root{--header-height:65px}.header{padding:0 20px}.brand img{width:205px}.top-nav,.header-cta{display:none}.mobile-menu-button{display:flex}.scroll-track{height:425svh}.hero-sticky{min-height:0;height:100svh}.hero-content{top:calc(var(--header-height) + 32px);left:5%;transform:none;width:90%;text-align:left}.hero-eyebrow{margin-bottom:12px;font-size:14px;gap:8px}.accent-line{width:24px}.hero-content h1{font-size:clamp(31px,6.7vw,49px);letter-spacing:-.06em;line-height:1.28}.hero-intro{font-size:14px;line-height:1.65;margin:12px 0 16px;max-width:93%}.large-only{display:none}.hero-buttons{gap:8px}.btn{font-size:14px;padding:11px 17px;gap:8px}.play-icon{width:19px;height:19px}.metrics{margin-top:19px}.metrics strong{font-size:23px}.metrics>div{padding:0 17px;gap:3px}.metrics span{font-size:14px}.visual-viewport{left:0;right:0;top:43%;bottom:8%;overflow:hidden}.service-dock{grid-template-columns:repeat(2,minmax(0,1fr));bottom:70px;left:6%;right:6%;gap:8px}.dock-card{min-height:53px}.dock-card:nth-child(5){display:none}.dock-icon{width:38px;height:39px;font-size:23px}.dock-card strong{font-size:14px}.scroll-bottom{bottom:16px;left:5%;right:5%;justify-content:center}.scroll-instruction,.scene-indicator{display:none}.step-controller{gap:6px}.step-controller button{width:26px;height:26px;font-size:9px}.step-controller>span{width:29px}.following-section,.process-section,.contact-section{padding:90px 6%}.offerings{gap:10px}.offerings article{padding:19px}.following-section h2,.process-section h2,.contact-section h2{font-size:36px}footer{flex-direction:column;gap:4px;font-size:14px;padding:22px 6%}}
@media(max-width:420px){.brand img{width:185px}.hero-content{top:calc(var(--header-height) + 25px)}.hero-content h1{font-size:clamp(28px,7.2vw,33px)}.hero-intro{font-size:14px}.hero-buttons .btn{padding:10px 12px;font-size:14px}.metrics strong{font-size:22px}.metrics>div{padding:0 12px}.visual-viewport{top:47%;bottom:7%}.service-dock{bottom:61px}.dock-card strong{font-size:14px;white-space:normal;line-height:1.35}.dock-icon{width:34px;height:34px;font-size:21px}}
@media(max-height:750px) and (min-width:781px){.hero-content{top:44%}.hero-content h1{font-size:clamp(38px,3.1vw,58px)}.hero-intro{margin:16px 0 21px}.metrics{margin-top:28px}.visual-viewport{top:9%;bottom:12%}.service-dock{bottom:61px}.scroll-bottom{bottom:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-track{height:100svh}.hero-sticky{position:relative}.spark,.float-dot,.robot-float,.phone-float,.mouse-outline i{animation:none!important}.step-controller,.scroll-instruction,#play-demo{display:none!important}.visual-viewport{opacity:1}.service-dock{opacity:1;pointer-events:auto}}
@media(max-width:370px){.offerings{grid-template-columns:minmax(0,1fr)}.offerings article{min-width:0}}

/* v2.1: In-between device replacements only. The original approved final scene remains unchanged. */
.laptop-device .laptop-clean{position:absolute;inset:auto;left:175px;top:88px;width:780px;height:auto;max-height:590px;object-fit:contain;filter:drop-shadow(0 23px 23px rgba(39,93,164,.19));backface-visibility:hidden;transform-origin:50% 88%;will-change:transform}
.phone-device{left:666px;top:258px;width:350px;height:460px;filter:drop-shadow(5px 18px 16px rgba(24,78,151,.18))}
.phone-device .phone-float,.phone-device img{width:100%;height:100%;object-fit:contain}