:root { color-scheme:dark; --white:#f7f7f6; --muted:#cbd0d3; --amber:#f0bd89; --font:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif; font-family:var(--font); color:var(--white); background:#090e13; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid #ffd9ae; outline-offset:3px; }
.skip-link { position:fixed; z-index:99; left:8px; top:8px; padding:8px 12px; background:#fff; color:#111; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-shell { min-height:100svh; }
.showcase { position:relative; isolation:isolate; height:100svh; min-height:760px; overflow:hidden; background:#0d121a url("./images/service-background.png") center center / cover no-repeat; }
.scene-wash { position:absolute; z-index:0; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(3,8,15,.44) 0%,rgba(3,8,14,.18) 35%,transparent 65%),linear-gradient(180deg,rgba(3,7,11,.42),transparent 28%,rgba(2,5,8,.08) 68%,rgba(2,5,9,.52)); }

.masthead { position:absolute; z-index:20; top:0; left:0; right:0; height:86px; display:flex; align-items:center; gap:0; padding:0 3.4%; border-bottom:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(4,8,13,.77),rgba(4,8,13,.28)); backdrop-filter:blur(10px); }
.brand { flex:none; display:inline-flex; align-items:center; gap:10px; }
.brand img { width:44px; height:44px; object-fit:contain; }
.brand-type { display:grid; gap:1px; white-space:nowrap; }
.brand-type strong { font-size:27px; font-weight:800; line-height:1.04; letter-spacing:.025em; }
.brand-type small { font-size:8px; letter-spacing:.10em; font-weight:700; line-height:1; }
.brand-line { flex:none; min-width:250px; display:grid; gap:4px; margin-left:28px; padding-left:25px; border-left:1px solid rgba(255,255,255,.54); white-space:nowrap; }
.brand-line strong { font-size:13px; font-weight:650; letter-spacing:.08em; }
.brand-line small { font-size:10px; letter-spacing:.10em; color:#b8c0c8; }
.main-nav { display:flex; align-items:center; justify-content:center; gap:clamp(20px,2.1vw,35px); flex:1; white-space:nowrap; }
.main-nav a,.main-nav span { position:relative; display:block; padding:33px 0 31px; font-size:13px; font-weight:650; }
.main-nav a:hover { color:#ffd1aa; }
.main-nav a.active::after { content:""; position:absolute; height:2px; background:#fff; bottom:20px; left:0; right:0; }
.main-nav span { color:rgba(246,247,248,.88); cursor:default; }
.header-action { flex:none; display:flex; align-items:center; gap:22px; }
.search-box { position:relative; }
.search-box summary { display:grid; place-items:center; width:31px; height:40px; list-style:none; cursor:pointer; }
.search-box summary::-webkit-details-marker { display:none; }
.search-box svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; }
.search-panel { position:absolute; top:48px; right:-30px; width:230px; padding:14px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:rgba(10,17,24,.97); box-shadow:0 16px 30px #0008; }
.search-panel label { display:block; margin-bottom:9px; font-size:12px; }
.search-panel input { width:100%; padding:9px; border:1px solid #77838c; border-radius:4px; background:#17232d; color:#fff; font-size:12px; }
#search-links { display:grid; margin-top:8px; }
#search-links a { padding:8px 2px; border-bottom:1px solid #ffffff1e; font-size:12px; }
#search-empty { font-size:12px; }
.consult { display:inline-flex; align-items:center; justify-content:center; gap:14px; height:47px; border-radius:99px; background:#f7f8fa; color:#121921; font-size:13px; font-weight:700; white-space:nowrap; transition:transform .2s,background .2s; }
.consult:hover { transform:translateY(-2px); background:#fff; }
.consult span { font-size:17px; font-weight:400; }
.header-consult { width:155px; height:44px; }
.menu-toggle { display:none; }

.shop-sign { position:absolute; z-index:1; top:15.5%; right:9.5%; display:grid; transform:rotate(-5deg); text-align:center; color:#cce9ff; opacity:.75; filter:blur(.35px); text-shadow:0 0 8px #79bfff,0 0 22px #5da9f2,0 0 42px #338be7; pointer-events:none; }
.shop-sign strong { font-size:34px; line-height:1.0; letter-spacing:.06em; }
.shop-sign small { font-size:10px; font-weight:750; letter-spacing:.08em; }
.tomorrow { position:absolute; z-index:4; top:11.5%; right:3.4%; color:#c7c9cc; font-size:12px; line-height:1.28; letter-spacing:.03em; pointer-events:none; }

.machine { position:absolute; z-index:2; inset:0; pointer-events:none; }
.machine-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(.85); transform-origin:53.2% 9%; pointer-events:none; user-select:none; }
.machine-shadow { opacity:.6; }
.gpu-target { position:absolute; z-index:5; top:43%; left:38%; width:26%; height:19%; border:0; background:transparent; cursor:pointer; pointer-events:auto; }
.gpu-target-label { position:absolute; left:-26%; top:0; display:grid; gap:8px; min-width:110px; padding:11px 12px; border:1px solid rgba(232,213,194,.45); border-radius:6px; background:rgba(17,24,32,.79); box-shadow:0 10px 25px rgba(0,0,0,.25); text-align:left; color:#fff; font-size:14px; font-weight:750; backdrop-filter:blur(8px); }
.gpu-target-label small { color:#cbd2d6; font-size:10px; font-weight:400; }
.gpu-target-label .tap-label { display:none; }
.machine[data-state="gpu"] .gpu-target-label { border-color:rgba(255,196,135,.75); }

.intro { position:absolute; z-index:5; left:3.4%; top:19.0%; width:35%; max-width:565px; text-shadow:0 2px 18px rgba(0,0,0,.44); }
.eyebrow { margin:0 0 18px; color:#d3d8dc; font-size:16px; letter-spacing:.10em; }
.eyebrow span { font-size:18px; color:#e4e4e5; }
.intro h1 { margin:0; white-space:nowrap; font-size:clamp(43px,3.20vw,55px); line-height:1.25; font-weight:800; letter-spacing:.02em; }
.intro h1 em { font-style:normal; color:#ffe6c3; }
.intro-copy { margin:21px 0 0; color:#e0e1e2; font-size:16px; line-height:1.75; letter-spacing:.025em; }
.intro-actions { display:flex; align-items:center; gap:18px; margin-top:29px; }
.intro-consult { width:166px; }
.more-services { display:inline-flex; align-items:center; justify-content:center; gap:15px; width:198px; height:47px; border:1px solid rgba(255,255,255,.8); border-radius:99px; background:rgba(11,18,25,.34); font-size:13px; transition:background .2s; }
.more-services:hover { background:rgba(27,39,52,.75); }
.more-services span { display:grid; place-items:center; width:21px; height:21px; border:1px solid #fff; border-radius:50%; font-size:10px; }
.trust-line { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:min(565px,105%); margin-top:53px; }
.trust-line span { display:grid; gap:4px; padding:0 12px; border-left:1px solid rgba(255,255,255,.4); }
.trust-line span:first-child { padding-left:0; border-left:0; }
.trust-line strong { font-size:15px; white-space:nowrap; }
.trust-line small { color:#d0d2d4; font-size:10px; white-space:nowrap; }

.feature-panel { position:absolute; z-index:6; top:32.3%; right:3.5%; display:flex; flex-direction:column; width:20.7%; min-width:280px; height:45.4%; min-height:400px; padding:16px 23px 19px; border:1px solid rgba(230,230,233,.42); border-radius:11px; background:linear-gradient(140deg,rgba(23,28,34,.86),rgba(14,19,27,.80)); box-shadow:0 20px 48px #0008; backdrop-filter:blur(15px); }
.feature-image { display:block; width:100%; height:37%; object-fit:contain; margin:0 auto 5px; transform:scale(1.5); filter:drop-shadow(0 13px 15px #0007); }
.feature-head { display:flex; align-items:baseline; gap:7px; }
.feature-head h2 { margin:0; font-size:26px; line-height:1.2; }
.feature-head span { color:#c8cdd1; font-size:12px; }
.feature-title { margin-top:7px; font-size:16px; line-height:1.4; white-space:nowrap; }
.feature-panel p { margin:14px 0 0; color:#d8dadd; font-size:12px; line-height:1.75; }
.feature-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.feature-bottom a { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 16px; border-radius:99px; background:#f7f7f9; color:#111820; font-size:12px; font-weight:700; white-space:nowrap; }
.feature-bottom a:hover { background:#fff; }
.feature-count { color:#e4e5e7; font-size:12px; white-space:nowrap; }
.feature-close { position:absolute; top:10px; right:11px; width:26px; height:26px; border:0; background:transparent; color:#e9edef; cursor:pointer; font-size:20px; opacity:0; pointer-events:none; }
.machine[data-state="gpu"] ~ .feature-panel .feature-close { opacity:1; pointer-events:auto; }

.quick-services { position:absolute; z-index:8; left:3.4%; right:3.4%; bottom:4.3%; display:grid; grid-template-columns:210px repeat(5,minmax(0,1fr)) 190px; align-items:end; gap:7px; }
.footer-note { padding:0 0 13px; color:#91b9e4; font-size:12px; letter-spacing:.12em; line-height:1.55; }
.quick-services > a,.quick-services > .pending-service { display:grid; grid-template-columns:43px minmax(0,1fr) 17px; align-items:center; gap:7px; min-height:95px; padding:12px 13px; border:1px solid rgba(240,242,246,.25); border-radius:7px; background:rgba(20,27,35,.77); box-shadow:0 12px 25px #0004; backdrop-filter:blur(13px); transition:background .2s,transform .2s,border-color .2s; }
.quick-services > a:hover { transform:translateY(-3px); border-color:#ffd2a5a1; background:rgba(32,42,52,.93); }
.service-icon { display:grid; place-items:center; font-size:31px; line-height:1; }
.service-icon svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.service-icon.blue { color:#67b3ff; }
.service-icon.red { color:#f16b66; }
.quick-services > a > span:nth-child(2),.quick-services > .pending-service > span:nth-child(2) { display:grid; gap:6px; min-width:0; }
.quick-services strong { overflow:hidden; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
.quick-services small { overflow:hidden; color:#bdc4c9; font-size:8px; letter-spacing:.04em; white-space:nowrap; text-overflow:ellipsis; }
.quick-services b { font-size:19px; font-weight:400; }
.footer-promise { justify-self:end; margin-bottom:17px; padding-left:22px; border-left:1px solid rgba(255,255,255,.7); color:#dadde0; font-size:12px; line-height:1.8; white-space:nowrap; }
.footer-promise small { color:#c3c9cf; font-size:11px; }
.preview-disclosure { position:absolute; z-index:12; right:3.4%; bottom:0.7%; padding:4px 7px; border-radius:3px; background:rgba(5,9,13,.76); color:#c5c9cd; font-size:9px; }
.preview-disclosure strong { color:#f3c18d; }
.preview-disclosure a { text-decoration:underline; text-underline-offset:2px; }

@media (max-width:1450px) {
  .brand-line { min-width:0; margin-left:16px; padding-left:16px; }
  .brand-line strong { font-size:11px; }
  .brand-line small { font-size:9px; }
  .main-nav { gap:17px; }
  .main-nav a,.main-nav span { font-size:11px; }
  .quick-services { grid-template-columns:125px repeat(5,minmax(0,1fr)) 143px; }
  .quick-services > a,.quick-services > .pending-service { padding:10px 8px; grid-template-columns:31px minmax(0,1fr) 11px; }
  .service-icon { font-size:25px; }
  .quick-services strong { font-size:11px; }
  .footer-promise { padding-left:10px; font-size:10px; }
}
@media (max-width:1150px) {
  .masthead { height:72px; }
  .brand-line { display:none; }
  .main-nav { gap:15px; }
  .intro { top:17%; width:43%; }
  .intro h1 { font-size:clamp(34px,3.9vw,45px); }
  .intro-copy { font-size:13px; }
  .trust-line { margin-top:30px; }
  .trust-line strong { font-size:11px; }
  .trust-line small { font-size:8px; }
  .feature-panel { right:2%; top:37%; width:28%; min-width:235px; min-height:340px; height:43%; padding:13px; }
  .feature-title { white-space:normal; font-size:14px; }
  .feature-panel p { font-size:10px; }
  .quick-services { left:2%; right:2%; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .footer-note,.footer-promise { display:none; }
  .shop-sign,.tomorrow { display:none; }
}
@media (max-width:900px) {
  .masthead { height:66px; padding-inline:22px; }
  .brand img { width:36px; height:36px; }
  .brand-type strong { font-size:21px; }
  .brand-type small { font-size:7px; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:37px; height:36px; margin-left:auto; padding:8px; border:1px solid #ffffff4d; border-radius:4px; background:#111b26a8; cursor:pointer; }
  .menu-toggle span { height:1px; background:#fff; }
  .main-nav { position:absolute; top:65px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 22px; background:#0b131dee; border-bottom:1px solid #ffffff4d; }
  .main-nav.open { display:flex; }
  .main-nav a,.main-nav span { padding:9px 0; font-size:12px; }
  .main-nav a.active::after { display:none; }
  .header-action { margin-left:13px; }
  .search-box { display:none; }
  .header-consult { width:118px; height:37px; font-size:11px; }
  .showcase { min-height:760px; }
  .intro { top:13%; width:50%; }
  .intro h1 { font-size:clamp(30px,4.5vw,41px); }
  .intro-copy { font-size:12px; }
  .intro-actions { gap:9px; margin-top:20px; }
  .intro-consult { width:120px; height:38px; font-size:11px; }
  .more-services { width:145px; height:38px; gap:5px; font-size:10px; }
  .trust-line { grid-template-columns:repeat(2,max-content); gap:13px 16px; }
  .trust-line span { padding-left:8px; }
  .feature-panel { top:47%; right:2%; width:32%; min-width:210px; height:36%; min-height:270px; }
  .feature-image { height:30%; }
  .feature-head h2 { font-size:20px; }
  .feature-panel p { margin-top:8px; line-height:1.5; }
  .feature-bottom a { height:30px; padding-inline:9px; font-size:10px; }
  .quick-services > a,.quick-services > .pending-service { min-height:72px; }
  .quick-services small { display:none; }
  .quick-services b { display:none; }
}
@media (max-width:700px) {
  .showcase { height:auto; min-height:100svh; padding:83px 18px 26px; overflow:hidden; background-position:42% top; background-size:auto 100%; }
  .scene-wash { background:linear-gradient(180deg,#07101bbb 0%,#07101b88 34%,#07101b44 70%,#07101bcc 100%); }
  .masthead { height:63px; padding-inline:15px; }
  .brand img { width:32px; height:32px; }
  .brand-type strong { font-size:18px; }
  .header-action { display:none; }
  .intro { position:relative; top:auto; left:auto; width:100%; max-width:none; }
  .eyebrow { margin-bottom:10px; font-size:11px; }
  .intro h1 { font-size:clamp(28px,7.6vw,38px); line-height:1.28; }
  .intro-copy { margin-top:12px; font-size:11px; }
  .intro-actions { margin-top:17px; }
  .trust-line { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:12px 4px; margin-top:22px; }
  .trust-line span { padding-left:8px; }
  .trust-line span:nth-child(odd) { border-left:0; padding-left:0; }
  .trust-line strong { font-size:11px; }
  .trust-line small { font-size:9px; }
  .machine { position:relative; height:360px; margin:14px -18px 0; overflow:hidden; }
  .machine-image { object-fit:cover; object-position:59% center; transform:none; }
  .gpu-target { left:17%; top:42%; width:58%; height:28%; }
  .gpu-target-label { left:0; top:0; min-width:72px; padding:6px; font-size:10px; }
  .gpu-target-label small { font-size:8px; }
  .gpu-target-label .hover-label { display:none; }
  .gpu-target-label .tap-label { display:block; }
  .feature-panel { position:relative; top:auto; right:auto; width:100%; min-width:0; height:auto; min-height:0; padding:15px; margin-top:8px; }
  .feature-image { height:120px; transform:none; }
  .feature-head h2 { font-size:21px; }
  .feature-title { font-size:13px; }
  .feature-panel p { font-size:11px; }
  .feature-bottom { margin-top:14px; }
  .quick-services { position:relative; left:auto; right:auto; bottom:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:18px; }
  .quick-services > a,.quick-services > .pending-service { min-height:62px; }
  .quick-services > a:last-of-type { grid-column:1/-1; }
  .preview-disclosure { position:relative; right:auto; bottom:auto; display:block; width:fit-content; margin-top:15px; font-size:9px; }
}
@media (min-width:701px) and (max-width:1150px) {
  .showcase { height:auto; min-height:100svh; padding:115px 3.4% 32px; background-position:center top; }
  .scene-wash { background:linear-gradient(180deg,rgba(4,10,17,.72),rgba(4,10,17,.45) 45%,rgba(4,10,17,.75)); }
  .intro { position:relative; left:auto; top:auto; width:min(650px,100%); max-width:none; }
  .intro h1 { font-size:clamp(38px,4.6vw,52px); }
  .intro-copy { font-size:14px; }
  .trust-line { grid-template-columns:repeat(4,minmax(0,1fr)); width:min(650px,100%); margin-top:28px; }
  .trust-line span { padding-inline:9px; }
  .machine { position:relative; inset:auto; height:520px; margin:6px -3.5vw -34px; overflow:hidden; }
  .machine-image { object-fit:contain; object-position:center; transform:scale(1.2); transform-origin:center center; }
  .gpu-target { left:32%; top:38%; width:40%; height:28%; }
  .gpu-target-label { left:-19%; top:2%; }
  .feature-panel { position:relative; top:auto; right:auto; display:grid; grid-template-columns:210px minmax(0,1fr); column-gap:20px; row-gap:7px; width:100%; height:auto; min-height:0; padding:16px 20px; margin-top:0; }
  .feature-image { grid-column:1; grid-row:1 / 5; width:100%; height:170px; margin:0; transform:none; }
  .feature-head,.feature-title,.feature-panel p,.feature-bottom { grid-column:2; }
  .feature-title { white-space:normal; }
  .feature-panel p { margin-top:0; font-size:11px; }
  .feature-bottom { margin-top:6px; }
  .quick-services { position:relative; left:auto; right:auto; bottom:auto; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:26px; }
  .quick-services > a,.quick-services > .pending-service { min-height:75px; }
  .footer-note,.footer-promise { display:none; }
  .preview-disclosure { position:relative; right:auto; bottom:auto; width:fit-content; margin:14px 0 0 auto; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }

.quick-services > .pending-service { opacity:.78; cursor:default; }
