@font-face { font-family:"OPPO Sans"; font-weight:100 700; font-style:normal; font-display:swap; src:url("fonts/oppo-sans-4.ttf") format("truetype"); }
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0c10; font-family:'PingFang SC','Microsoft YaHei','Courier New',sans-serif; }
a,button { cursor:pointer; }
:root { --nav-blue:#33a8ee; --nav-text:#1f2937; --nav-muted:rgba(31,41,55,.78); }

/* 与 surgical-robot.html 一致的顶部标识 */
#caseNav { position:fixed; top:0; left:0; right:0; z-index:500; width:100%; height:66px; background:rgba(243,246,251,.94); border-bottom:1px solid rgba(0,140,200,.10); backdrop-filter:blur(28px) saturate(180%); font-family:"OPPO Sans","PingFang SC","Microsoft YaHei",sans-serif; }
#caseNav .nav-shell { position:relative; display:flex; align-items:center; width:100%; height:66px; padding:0 56px; }
.nav-logo { position:relative; z-index:1; display:flex; align-items:center; flex:0 0 auto; }
.nav-logo img { display:block; width:auto; height:40px; }
.nav-menu { position:absolute; left:50%; display:flex; align-items:center; gap:38px; margin:0; padding:0; list-style:none; transform:translateX(-50%); }
.nav-menu a { position:relative; color:#8c95a6; font-size:15px; font-weight:450; letter-spacing:.4px; text-decoration:none; transition:color .25s ease; }
.nav-menu a:hover,.nav-menu li.active a { color:var(--nav-blue); }
.nav-menu a::after { content:""; position:absolute; right:0; bottom:-5px; left:0; height:1.5px; background:var(--nav-blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-menu li.active a::after,.nav-menu a:hover::after { transform:scaleX(1); }
.nav-actions { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav-btn { min-width:auto; height:auto; padding:8px 22px; border:1.5px solid rgba(0,150,210,.35); border-radius:8px; background:transparent; color:var(--nav-blue); font:500 14px inherit; letter-spacing:.4px; text-decoration:none; transition:box-shadow .3s ease,transform .2s ease,background .25s ease; }
.nav-btn:hover { background:rgba(0,150,210,.035); transform:translateY(-1px); }
.nav-btn.primary { border-color:transparent; background:linear-gradient(135deg,#007ab8,#00a8e8); color:#fff; box-shadow:0 3px 14px rgba(0,120,180,.28); }
.nav-btn.primary:hover { background:linear-gradient(135deg,#007ab8,#00a8e8); box-shadow:0 6px 22px rgba(0,120,180,.4); }

#deck { position:fixed; inset:0; width:100vw; height:100vh; transition:transform .9s cubic-bezier(.76,0,.24,1); will-change:transform; }
.slide { position:relative; width:100vw; height:100vh; overflow:hidden; background:#0a0c10; }
.slide.banner,.slide.product-showcase { background:#f4f8fd; }
.banner-inner { position:absolute; inset:0; overflow:hidden; }
.banner-full { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity .9s ease .15s,transform 1.2s cubic-bezier(.16,1,.3,1) .15s; }
.banner.play .banner-full { opacity:1; transform:scale(1); }
.product-shell,.product-stage { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.product-stage { --shift-x:0px; --shift-y:0px; }
.product-stage img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; transform:translate3d(var(--shift-x),var(--shift-y),0) scale(1); transform-origin:center; transition:transform .45s cubic-bezier(.22,1,.36,1),filter .35s ease; will-change:transform; }
.product-stage:hover img { transform:translate3d(var(--shift-x),var(--shift-y),0) scale(1.035); filter:brightness(1.03); }
.scene { position:absolute; inset:0; overflow:hidden; }
.scene video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene::before,.scene::after { content:''; position:absolute; z-index:50; width:22px; height:22px; border:solid rgba(120,200,255,.45); pointer-events:none; }
.scene::before { top:18px; left:18px; border-width:1px 0 0 1px; }
.scene::after { right:18px; bottom:18px; border-width:0 1px 1px 0; }
.header { position:absolute; top:78px; left:50%; z-index:60; width:min(72vw,720px); transform:translateX(-50%); text-align:center; pointer-events:none; }
.header h1 { color:rgba(120,200,255,.65); font-size:13px; font-weight:400; letter-spacing:.45em; text-transform:uppercase; }
.header .cn { margin-top:10px; color:rgba(180,225,255,.92); font-size:22px; font-weight:400; letter-spacing:.3em; }
.progress { position:fixed; top:50%; right:36px; z-index:200; display:flex; flex-direction:column; gap:16px; transform:translateY(-50%); }
.dot { width:9px; height:9px; border:1px solid rgba(120,200,255,.5); border-radius:50%; background:transparent; cursor:pointer; transition:all .3s; }
.dot.active { background:rgba(120,200,255,.9); box-shadow:0 0 10px rgba(120,200,255,.6); transform:scale(1.3); }
.dot.light { border-color:rgba(40,120,200,.5); }
.dot.light.active { background:rgba(30,110,220,.9); box-shadow:0 0 10px rgba(30,110,220,.5); }
.hint { position:fixed; bottom:28px; left:50%; z-index:200; display:flex; flex-direction:column; align-items:center; gap:12px; transform:translateX(-50%); color:rgba(120,200,255,.62); text-align:center; pointer-events:none; }
.hint.dark { color:rgba(40,110,190,.62); }
.hint .idx { font-size:13px; letter-spacing:.28em; }
.hint .arrow-group { display:flex; gap:10px; font-size:26px; line-height:1; }
.hint .arrow-group span { display:block; animation:bob 1.65s ease-in-out infinite; }
.hint .arrow-group span:nth-child(2){animation-delay:.16s}.hint .arrow-group span:nth-child(3){animation-delay:.32s}
@keyframes bob { 0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:.9} }
#loader { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; background:#0a0c10; transition:opacity .6s; }
#loader.hide { opacity:0; pointer-events:none; }
.loader-ring { width:60px; height:60px; border:2px solid rgba(120,200,255,.15); border-top-color:rgba(120,200,255,.9); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loader-txt { color:rgba(120,200,255,.5); font-size:11px; letter-spacing:.35em; }

@media(max-width:768px){#caseNav .nav-shell{padding:0 16px}.nav-logo img{height:36px}.nav-menu{gap:18px}.nav-menu a{font-size:13px}.nav-actions{display:none}.header{top:60px;width:min(84vw,720px)}.header .cn{font-size:17px}.progress{right:16px}.hint .idx{font-size:11px}.hint .arrow-group{gap:8px;font-size:22px}}