:root{
  --blue:#1d4fe8; --blue-d:#1a43c9; --blue-l:#2e63ff;
  --amber:#ffb437; --amber-t:#5b3a00;
  --price:#ff6a00;
  --ink:#17255c; --text:#3f4d70; --muted:#8a97b8;
  --line:#e3eaf8; --bg-alt:#f7f9ff; --ok:#0faf6e; --warn:#d97706;
  --page:#ffffff; --surface:#ffffff; --surface-2:#f7f9ff; --chip:#eaf0ff;
  --shadow:rgba(9,24,74,.10); --shadow-sm:rgba(9,24,74,.06);
  --r:12px; --rs:7px;
}
[data-theme="dark"]{
  --blue:#3b82f6; --blue-d:#2563eb;
  --price:#ff8a3d;
  --ink:#eaeff8; --text:#b7c2d6; --muted:#7a879f;
  --line:#28323f; --bg-alt:#121826; --ok:#2fd191; --warn:#e0982f;
  --page:#0d121c; --surface:#161d2b; --surface-2:#1b2333; --chip:#1e2b45;
  --shadow:rgba(0,0,0,.5); --shadow-sm:rgba(0,0,0,.32);
}
*,*::before,*::after{ box-sizing:border-box; }
[v-cloak]{ display:none !important; }
html{ scroll-behavior:smooth; background-color:var(--page); transition:background-color .3s; }
body{
  margin:0; background-color:var(--page); color:var(--text); transition:background-color .3s, color .3s;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
section[id]{ scroll-margin-top:80px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 22px; border-radius:var(--rs); font-size:14px; font-weight:500;
  cursor:pointer; border:1px solid transparent; transition:.2s; white-space:nowrap; }
.btn-amber{ background:var(--amber); color:var(--amber-t); }
.btn-amber:hover{ filter:brightness(1.05); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-d); }
.btn-outline{ border-color:var(--blue); color:var(--blue); background:var(--surface); }
.btn-outline:hover{ background:var(--chip); }
.btn-glass{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-glass:hover{ background:rgba(255,255,255,.12); }
.btn-sm{ height:32px; padding:0 14px; font-size:12px; }
.btn-lg{ height:46px; padding:0 26px; font-size:15px; }

/* ============ HERO ============ */
.hero{ position:relative; overflow:hidden; background:#1d4fe8; }
.hero-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:70px; display:block; z-index:3; }
.hero-wave path{ fill:var(--page); }
/* 固定背景叠层：内容横滑时背景钉在原地，仅做颜色淡入淡出 */
.hero-bg-layers{ position:absolute; inset:0; z-index:0; }
.hero-bg{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.hero-bg.active{ opacity:1; }
.hero-bg::before{ content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px;
  border-radius:50%; background:rgba(255,255,255,.07); }
.hero-bg::after{ content:""; position:absolute; left:-70px; bottom:-40px; width:220px; height:220px;
  border-radius:50px; background:rgba(255,255,255,.05); transform:rotate(20deg); }
.hero-bg.theme-cloud{ background:linear-gradient(135deg,#1740c9 0%,#1d4fe8 55%,#2a5cf5 100%); }
.hero-bg.theme-metal{ background:linear-gradient(135deg,#141d30 0%,#22304a 55%,#2f4463 100%); }
.hero-bg.theme-game{ background:linear-gradient(135deg,#3a1178 0%,#5b21b6 52%,#7c3aed 100%); }
.hero-bg.theme-web{ background:linear-gradient(135deg,#0b5563 0%,#0e7490 55%,#12a3b8 100%); }
.hero-bg.theme-ssl{ background:linear-gradient(135deg,#064e3b 0%,#047857 55%,#10b981 100%); }
.hero-bg.theme-domain{ background:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#6366f1 100%); }
.hero-bg.theme-cdn{ background:linear-gradient(135deg,#083344 0%,#0e7490 50%,#06b6d4 100%); }
.hero-bg.theme-game::before{ background:rgba(216,180,254,.14); }
.hero-bg.theme-web::before{ background:rgba(153,246,228,.14); }
.hero-bg.theme-metal::before{ background:rgba(147,197,253,.10); }
.hero-bg.theme-ssl::before{ background:rgba(167,243,208,.14); }
.hero-bg.theme-domain::before{ background:rgba(199,210,254,.16); }
.hero-bg.theme-cdn::before{ background:rgba(165,243,252,.14); }
/* 深色模式：首屏渐变压暗、降饱和，与暗色页面融合（保留品牌色相点缀）*/
[data-theme="dark"] .hero-bg.theme-cloud{  background:linear-gradient(135deg,#0a1224 0%,#122152 55%,#16307a 100%); }
[data-theme="dark"] .hero-bg.theme-metal{  background:linear-gradient(135deg,#0b111f 0%,#151e30 55%,#1d2940 100%); }
[data-theme="dark"] .hero-bg.theme-game{   background:linear-gradient(135deg,#150a30 0%,#281255 52%,#3a1d74 100%); }
[data-theme="dark"] .hero-bg.theme-web{    background:linear-gradient(135deg,#061e25 0%,#0a3340 55%,#0e4a58 100%); }
[data-theme="dark"] .hero-bg.theme-ssl{    background:linear-gradient(135deg,#04211a 0%,#073a2c 55%,#0a5440 100%); }
[data-theme="dark"] .hero-bg.theme-domain{ background:linear-gradient(135deg,#121236 0%,#201f57 55%,#2c2a70 100%); }
[data-theme="dark"] .hero-bg.theme-cdn{    background:linear-gradient(135deg,#05171f 0%,#0a2b3a 50%,#0e3d52 100%); }
[data-theme="dark"] .hero-bg::before{ opacity:.6; }
.hero-slide{ background:transparent; }
/* 反转布局（视觉在左，文案在右）*/
.hero-grid.reverse{ grid-template-columns:1fr 1.12fr; }
/* 居中布局（域名搜索）*/
.hero-center{ position:relative; z-index:2; text-align:center; max-width:760px;
  margin:0 auto; padding-top:104px; padding-bottom:96px; }
.hero-center .hero-sub{ margin-left:auto; margin-right:auto; }
.domain-hero-search{ display:flex; gap:10px; max-width:520px; margin:6px auto 20px; }
.domain-hero-search input{ flex:1; height:50px; border:0; border-radius:9px; padding:0 18px;
  font-size:15px; color:var(--ink); outline:none; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.domain-hero-tags{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.domain-hero-tags span{ font-size:13px; color:rgba(255,255,255,.82); }
.domain-hero-tags em{ color:#ffe08a; font-style:normal; font-weight:500; }
/* SSL 浏览器地址栏视觉 */
.ssl-visual{ width:300px; }
.ssl-bar{ display:flex; align-items:center; gap:9px; background:#fff; border-radius:10px;
  padding:13px 16px; font-size:13px; color:var(--ink); box-shadow:0 16px 40px rgba(0,0,0,.28); }
.ssl-bar > i{ color:#10b981; }
.ssl-url{ font-family:ui-monospace,Consolas,monospace; }
.ssl-safe{ margin-left:auto; font-size:11px; color:#059669; background:#d1fae5; padding:2px 10px; border-radius:999px; }
.ssl-certs{ display:flex; gap:10px; margin-top:14px; }
.ssl-cert{ flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:11px; padding:15px 6px; text-align:center; color:#fff; }
.ssl-cert i{ font-size:18px; } .ssl-cert span{ display:block; font-size:12px; margin-top:6px; }
.ssl-cert.on{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.55); }
/* CDN 测速对比视觉 */
.cdn-visual{ width:300px; }
.cdn-speed{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:18px; }
.cdn-row{ display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.85); margin-bottom:14px; }
.cdn-row:last-child{ margin-bottom:0; }
.cdn-row > span{ width:44px; flex:0 0 44px; }
.cdn-track{ flex:1; height:8px; background:rgba(255,255,255,.16); border-radius:4px; overflow:hidden; }
.cdn-track span{ display:block; height:100%; border-radius:4px; }
.cdn-track .slow{ width:88%; background:#f59e0b; }
.cdn-track .fast{ width:16%; background:#34d399; }
.cdn-row b{ width:54px; flex:0 0 54px; text-align:right; color:#fff; font-weight:500; }
.cdn-row b.ok{ color:#6ee7b7; }
.cdn-nodes{ margin-top:14px; text-align:center; font-size:12px; color:#fff; background:rgba(255,255,255,.1); border-radius:10px; padding:11px; }

/* 固定吸顶导航（首屏透明白字 → 滚动后白底深字） */
.site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s ease, box-shadow .3s ease; }
.site-nav .nav{ display:flex; align-items:center; gap:16px; height:64px; }
.logo{ display:flex; align-items:center; gap:9px; font-size:18px; font-weight:500; color:#fff; letter-spacing:1px; transition:color .3s; }
.logo-mark{ width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; transition:background .3s,box-shadow .3s; overflow:hidden; flex:0 0 auto; }
.logo-mark i{ color:#fff; } /* 方块图标恒为白色，不跟随导航文字变深 */
.logo-mark img{ width:100%; height:100%; object-fit:cover; }
.logo-img{ height:30px; max-width:180px; display:block; object-fit:contain; }
.nav-menu{ display:flex; gap:22px; margin-left:14px; }
.nav-menu a{ font-size:14px; color:rgba(255,255,255,.82); transition:color .3s; }
.nav-menu a:hover,.nav-menu a.active{ color:#fff; }
/* 产品分组下拉 */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.nav-drop-t{ font-size:14px; color:rgba(255,255,255,.82); cursor:pointer; transition:color .3s; display:inline-flex; align-items:center; gap:6px; }
.nav-drop-t::after{ content:''; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); margin-top:-3px; opacity:.7; transition:transform .2s; }
.nav-drop:hover .nav-drop-t{ color:#fff; }
.nav-drop:hover .nav-drop-t::after{ transform:rotate(225deg); margin-top:2px; }
.nav-drop::before{ content:''; position:absolute; top:100%; left:0; right:0; height:14px; }
.nav-drop-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:174px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px var(--shadow);
  padding:8px; opacity:0; visibility:hidden; transition:.2s; z-index:120; }
.nav-drop:hover .nav-drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(6px); }
.nav-drop-menu a{ display:block; padding:9px 14px; font-size:13.5px; color:var(--text); border-radius:8px; white-space:nowrap; }
.nav-drop-menu a:hover{ background:var(--bg-alt); color:var(--blue); }
.site-nav.scrolled .nav-drop-t{ color:var(--text); }
.site-nav.scrolled .nav-drop:hover .nav-drop-t{ color:var(--blue); }
.nav-act{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; }
.nav-theme{ width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.4);
  background:transparent; color:#fff; cursor:pointer; font-size:14px; transition:.3s; display:flex; align-items:center; justify-content:center; }
.nav-theme:hover{ background:rgba(255,255,255,.14); }
.site-nav.scrolled .nav-theme{ border-color:var(--line); color:var(--text); }
.site-nav.scrolled .nav-theme:hover{ background:var(--bg-alt); color:var(--blue); }
.nav-reg{ border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; transition:.3s; }
.nav-reg:hover{ background:rgba(255,255,255,.12); }
/* 滚动后状态 */
.site-nav.scrolled{ background:var(--page); box-shadow:0 2px 18px var(--shadow-sm); }
.site-nav.scrolled .logo{ color:var(--ink); }
.site-nav.scrolled .logo-mark{ background:linear-gradient(135deg,var(--blue),#5b86ff); box-shadow:0 4px 12px rgba(29,79,232,.28); }
.site-nav.scrolled .nav-menu a{ color:var(--text); }
.site-nav.scrolled .nav-menu a:hover,.site-nav.scrolled .nav-menu a.active{ color:var(--blue); }
.site-nav.scrolled .nav-toggle{ color:var(--ink); }
.site-nav.scrolled .nav-reg{ border-color:var(--blue); color:var(--blue); }
.site-nav.scrolled .nav-reg:hover{ background:var(--chip); }

.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.12fr 1fr;
  gap:34px; align-items:center; padding-bottom:96px; }
.hero-badge{ display:inline-block; font-size:12px; color:#fff; background:rgba(255,255,255,.16);
  padding:5px 14px; border-radius:999px; }
.hero h1{ margin:16px 0 12px; font-size:38px; line-height:1.28; font-weight:500; color:#fff; white-space:pre-line; }
.hero-sub{ margin:0 0 24px; font-size:15px; color:#cddbff; line-height:1.9; white-space:pre-line; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust{ margin:20px 0 0; font-size:12px; color:#9db4f5; }

/* console card in hero */
.console{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(9,24,74,.28); }
.console-h{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line); }
.console-h b{ font-size:13px; color:var(--ink); font-weight:500; }
.console-tag{ font-size:11px; color:var(--blue); background:var(--chip); padding:2px 10px; border-radius:999px; }
.console-b{ padding:6px 18px; }
.console-row{ display:flex; justify-content:space-between; align-items:center; font-size:12px;
  color:var(--text); padding:9px 0; border-bottom:1px solid var(--line); }
.console-row:last-child{ border-bottom:0; }
.console-row .mono{ color:#9aa8c7; }
.console-f{ display:flex; justify-content:space-between; padding:12px 18px; background:var(--bg-alt); font-size:12px; color:var(--text); }
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; vertical-align:1px; margin-right:5px; }
.dot-ok{ background:var(--ok); } .dot-blue{ background:var(--blue); } .dot-warn{ background:var(--warn); }

/* 3D server visual in hero */
.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; }
.hv-glow{ position:absolute; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); animation:hv-breathe 4s ease-in-out infinite; }
.hv-stack{ position:relative; display:flex; flex-direction:column; gap:12px; transform:perspective(700px) rotateX(6deg); }
.hv-unit{ width:210px; height:52px; border-radius:10px; display:flex; align-items:center; gap:12px; padding:0 18px;
  background:linear-gradient(160deg,#ffffff,#e9effb); box-shadow:0 16px 34px rgba(6,17,54,.35);
  border:1px solid rgba(255,255,255,.6); animation:hv-float 5s ease-in-out infinite; }
.hv-unit:nth-child(2){ animation-delay:.5s; }
.hv-unit:nth-child(3){ animation-delay:1s; }
.hv-led{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.hv-led.ok{ background:#22c55e; box-shadow:0 0 8px #22c55e; animation:hv-blink 1.6s ease-in-out infinite; }
.hv-led.amber{ background:#ffb437; box-shadow:0 0 8px #ffb437; animation:hv-blink 1.6s ease-in-out infinite .4s; }
.hv-bars{ flex:1; display:flex; flex-direction:column; gap:5px; }
.hv-bars i{ display:block; height:5px; border-radius:3px; background:#c7d3ee; }
.hv-bars i:nth-child(1){ width:80%; } .hv-bars i:nth-child(2){ width:60%; } .hv-bars i:nth-child(3){ width:70%; }
.hv-slot{ width:26px; height:26px; border-radius:6px; background:#1d4fe8; flex:0 0 26px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.75); }
.hv-chip{ position:relative; margin-top:20px; font-size:12px; color:#fff; background:rgba(255,255,255,.14);
  padding:6px 16px; border-radius:999px; backdrop-filter:blur(4px); }
@keyframes hv-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes hv-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes hv-breathe{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.12); opacity:.6; } }

/* ============ hero 轮播（淡入淡出 + 内容渐次入场）============ */
.hero-viewport{ position:relative; z-index:1; overflow:hidden; }
.hero-track{ display:grid; }
.hero-slide{ grid-area:1 / 1; opacity:0; pointer-events:none; transition:opacity .7s ease; }
.hero-slide.active{ opacity:1; pointer-events:auto; }
/* 内容渐次上浮入场 */
@keyframes hv-rise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.hero-slide.active .hero-badge{ animation:hv-rise .55s .05s both; }
.hero-slide.active h1{ animation:hv-rise .55s .15s both; }
.hero-slide.active .hero-sub{ animation:hv-rise .55s .25s both; }
.hero-slide.active .hero-actions,
.hero-slide.active .domain-hero-search{ animation:hv-rise .55s .35s both; }
.hero-slide.active .hero-trust,
.hero-slide.active .domain-hero-tags{ animation:hv-rise .55s .45s both; }
.hero-slide.active .hero-visual{ animation:hv-rise .7s .2s both; }
.hero-grid{ padding-top:104px; }
.hero-nav-btn{ position:absolute; top:44%; z-index:4; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.10); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px; transition:.2s; }
.hero-nav-btn:hover{ background:rgba(255,255,255,.22); }
.hero-nav-btn.prev{ left:20px; } .hero-nav-btn.next{ right:20px; }
.hero-dots{ position:absolute; left:0; right:0; bottom:88px; z-index:4; display:flex; justify-content:center; gap:9px; }
.hero-dots span{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.4); cursor:pointer; transition:.3s; }
.hero-dots span.active{ width:22px; background:#fff; }
/* 各产品视觉 */
.hv-card{ width:280px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:18px; backdrop-filter:blur(6px); }
.hv-card-h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hv-card-ic{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; }
.hv-card-t{ font-size:14px; font-weight:500; color:#fff; }
.hv-card-s{ font-size:11px; color:rgba(255,255,255,.7); }
.hv-card-row{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.85);
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.hv-card-row:last-child{ border-bottom:0; }
.hv-card-row .v{ color:#fff; font-weight:500; }
.hv-games{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.hv-game{ background:rgba(255,255,255,.12); border-radius:9px; padding:12px 6px; text-align:center; }
.hv-game i{ font-size:20px; color:#fff; }
.hv-game span{ display:block; font-size:10px; color:rgba(255,255,255,.85); margin-top:4px; }

/* 物理服务器：机架视觉 */
.hv-rack{ position:relative; overflow:hidden; width:250px; background:linear-gradient(160deg,#0d1526,#182338);
  border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:12px; box-shadow:0 20px 46px rgba(0,0,0,.4); }
.hv-rack-scan{ position:absolute; left:0; right:0; top:0; height:46px; pointer-events:none; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(52,211,153,.14),transparent);
  animation:rack-scan 4s linear infinite; }
@keyframes rack-scan{ 0%{ transform:translateY(-46px); } 100%{ transform:translateY(280px); } }
.hv-rack-top{ display:flex; justify-content:space-between; align-items:center; font-size:11px;
  color:rgba(255,255,255,.55); font-family:ui-monospace,Consolas,monospace; padding:2px 4px 10px; }
.hv-rack-net{ color:#7dd3fc; } .hv-rack-net i{ font-size:6px; vertical-align:2px; margin-right:3px; animation:hv-blink 1.6s ease-in-out infinite; }
.hv-ru{ position:relative; display:flex; align-items:center; gap:9px; height:34px; padding:0 12px; margin-bottom:7px;
  background:linear-gradient(#2a3956,#1e2b44); border:1px solid rgba(255,255,255,.10);
  border-radius:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.hv-ru:last-child{ margin-bottom:0; }
.hv-ru-led{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#3a4a68; }
.hv-ru-led.on{ background:#22c55e; box-shadow:0 0 7px #22c55e; animation:led-cycle 2.4s ease-in-out infinite; }
.hv-ru-led.amber{ background:#ffb437; box-shadow:0 0 7px #ffb437; animation:led-cycle 2.4s ease-in-out infinite; }
/* LED 循环波浪：按机位错峰 */
.hv-ru:nth-child(2) .hv-ru-led{ animation-delay:0s; }
.hv-ru:nth-child(3) .hv-ru-led{ animation-delay:.28s; }
.hv-ru:nth-child(4) .hv-ru-led{ animation-delay:.56s; }
.hv-ru:nth-child(5) .hv-ru-led{ animation-delay:.84s; }
.hv-ru:nth-child(6) .hv-ru-led{ animation-delay:1.12s; }
@keyframes led-cycle{ 0%,100%{ opacity:.35; } 15%{ opacity:1; } 40%{ opacity:.5; } }
/* 散热口数据流光 */
.hv-ru-vent{ position:relative; overflow:hidden; width:26px; height:14px; flex:0 0 26px; border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 4px); }
.hv-ru-vent::after{ content:""; position:absolute; top:0; bottom:0; width:7px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.85),transparent);
  animation:vent-flow 1.9s linear infinite; }
.hv-ru:nth-child(3) .hv-ru-vent::after{ animation-delay:.5s; }
.hv-ru:nth-child(4) .hv-ru-vent::after{ animation-delay:1s; }
.hv-ru:nth-child(5) .hv-ru-vent::after{ animation-delay:.3s; }
.hv-ru:nth-child(6) .hv-ru-vent::after{ animation-delay:.8s; }
@keyframes vent-flow{ 0%{ left:-8px; } 60%,100%{ left:27px; } }
.hv-ru-lbl{ font-size:11px; color:rgba(255,255,255,.82); font-family:ui-monospace,Consolas,monospace; }

/* 游戏云：开服面板 */
.hv-gp{ width:290px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:16px; backdrop-filter:blur(6px); }
.hv-gp-head{ display:flex; align-items:center; gap:10px; }
.hv-gp-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:rgba(255,255,255,.18);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; }
.hv-gp-t{ font-size:13px; font-weight:500; color:#fff; }
.hv-gp-s{ font-size:11px; color:rgba(255,255,255,.65); font-family:ui-monospace,Consolas,monospace; }
.hv-gp-live{ margin-left:auto; font-size:10px; color:#bbf7d0; background:rgba(34,197,94,.24); padding:3px 9px; border-radius:999px; }
.hv-gp-live i{ font-size:6px; vertical-align:2px; margin-right:3px; }
.hv-gp-players{ margin:14px 0 10px; }
.hv-gp-prow{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.85); margin-bottom:6px; }
.hv-gp-prow b{ color:#fff; display:inline-block; transition:transform .2s ease, color .2s ease; }
.hv-gp-prow b.tick{ transform:scale(1.16); color:#ddd6fe; }
.hv-gp-bar{ height:7px; background:rgba(255,255,255,.16); border-radius:4px; overflow:hidden; }
.hv-gp-bar span{ display:block; height:100%; background:linear-gradient(90deg,#a78bfa,#c4b5fd); border-radius:4px; transition:width .55s cubic-bezier(.4,0,.2,1); }
.hv-gp-meta{ display:flex; gap:16px; font-size:11px; color:rgba(255,255,255,.75); margin-bottom:14px; }
.hv-gp-meta i{ font-size:10px; margin-right:3px; }
.hv-gp-games{ display:flex; gap:7px; }
.hv-gp-games span{ flex:1; height:34px; border-radius:8px; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:15px; }
.hv-gp-games span.on{ background:rgba(255,255,255,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.hv-gp-games span.more{ font-size:12px; font-weight:500; }

/* 虚拟主机：网站预览 */
.hv-site{ width:290px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.3); }
.hv-site-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#eef2f9; }
.hv-site-dot{ width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.hv-site-url{ margin-left:10px; font-size:11px; color:#64748b; font-family:ui-monospace,Consolas,monospace; }
.hv-site-url i{ color:#10b981; font-size:9px; margin-right:3px; }
.hv-site-body{ padding:16px; }
.hv-site-hero{ background:linear-gradient(120deg,#0e7490,#12a3b8); border-radius:10px; padding:18px; margin-bottom:12px; }
.hv-site-h1{ width:70%; height:10px; background:rgba(255,255,255,.9); border-radius:3px; margin-bottom:8px; }
.hv-site-h2{ width:45%; height:7px; background:rgba(255,255,255,.6); border-radius:3px; margin-bottom:14px; }
.hv-site-btn{ display:inline-block; font-size:10px; color:#0e7490; background:#fff; padding:5px 12px; border-radius:5px; }
.hv-site-cards{ display:flex; gap:8px; }
.hv-site-cards span{ flex:1; height:44px; border-radius:8px; background:#eef2f9; border:1px solid #e2e8f0; }

/* ============ quick entry cards（自适应：居中弹性栅格）============ */
.entries{ position:relative; z-index:5; margin-top:-56px; display:flex; flex-wrap:wrap;
  justify-content:center; gap:14px; }
.entry{ flex:1 1 240px; max-width:290px; display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  box-shadow:0 8px 24px rgba(9,24,74,.06); transition:.2s; }
.entry:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(9,24,74,.12); border-color:#c9d6f5; }
.entry i{ font-size:26px; color:var(--blue); flex:0 0 auto; }
.entry .e-t{ font-size:13px; font-weight:500; color:var(--ink); }
.entry .e-d{ font-size:12px; color:var(--muted); margin-top:1px; }
/* 只开 1 个模块：单卡放大居中 */
.entries.solo .entry{ flex:0 1 440px; max-width:480px; padding:22px 26px; }
.entries.solo .entry i{ font-size:32px; }
/* 只开 2 个：略放大，避免过窄 */
.entries.duo .entry{ flex:0 1 300px; max-width:340px; }

/* ============ sections ============ */
.sec, .hero{ scroll-margin-top:68px; }
.sec{ padding:56px 0; }
.sec-alt{ background:var(--bg-alt); }
.sec-head{ text-align:center; margin-bottom:30px; }
.sec-head.left{ text-align:left; }
.sec-head h2{ margin:0; font-size:27px; font-weight:500; color:var(--ink); }
.sec-head p{ margin:7px 0 0; font-size:13px; color:var(--muted); }

/* region tabs */
.tabs-wrap{ text-align:center; margin-bottom:24px; }
.tabs{ display:inline-flex; gap:4px; max-width:100%; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:4px; overflow-x:auto; vertical-align:top; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs.dragging{ cursor:grabbing; }
.tabs span{ flex:0 0 auto; white-space:nowrap; font-size:13px; color:var(--text); padding:6px 20px; border-radius:6px; cursor:pointer; transition:.2s; user-select:none; }
.tabs span:hover{ color:var(--blue); }
.tabs span.active{ background:var(--blue); color:#fff; font-weight:500; }

/* plans */
.plans{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.plan{ flex:1 1 280px; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:.2s; }
.plan:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(9,24,74,.10); border-color:#c9d6f5; }
.plan.feat{ border:2px solid var(--blue); position:relative; }
.plan-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11px;
  color:#fff; background:var(--blue); padding:3px 14px; border-radius:999px; font-weight:500; }
.plan-name{ font-size:15px; font-weight:500; color:var(--ink); }
.plan-desc{ font-size:12px; color:var(--muted); margin:2px 0 14px; }
.plan-price{ margin:0 0 14px; }
.plan-price .cur{ font-size:13px; color:var(--price); }
.plan-price .num{ font-size:27px; font-weight:500; color:var(--price); }
.plan-price .unit{ font-size:12px; color:var(--muted); }
.plan-specs{ font-size:12px; color:var(--text); line-height:2.1; border-top:1px dashed var(--line);
  padding-top:12px; margin-bottom:16px; }
.plan-specs .mk{ color:var(--blue); margin-right:4px; }
.plan-actions{ display:flex; gap:8px; }
.plan-actions .btn{ flex:1; height:36px; font-size:13px; }
/* 「查看全部」卡（占最后一格，保持整行对齐）*/
.plan.plan-more{ border-style:dashed; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:7px; cursor:pointer; min-height:200px; }
.plan.plan-more:hover{ border-color:var(--blue); box-shadow:none; transform:translateY(-4px); }
.plan-more > i{ font-size:28px; color:var(--blue); }
.plan-more .pm-t{ font-size:15px; font-weight:600; color:var(--ink); }
.plan-more:hover .pm-t{ color:var(--blue); }
.plan-more .pm-d{ font-size:12px; color:var(--muted); }

/* bare metal rows */
.rows{ display:flex; flex-direction:column; gap:10px; }
.row-card{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 20px; transition:.2s; }
.row-card:hover{ border-color:#c9d6f5; box-shadow:0 8px 22px rgba(9,24,74,.07); }
.row-card > i{ font-size:24px; color:var(--blue); }
.row-info{ flex:1; }
.row-title{ font-size:14px; font-weight:500; color:var(--ink); }
.row-title .region{ font-size:12px; color:var(--muted); font-weight:400; margin-left:8px; }
.row-title .chip{ font-size:11px; color:var(--amber-t); background:var(--amber); padding:1px 8px; border-radius:999px; margin-left:8px; }
.row-spec{ font-size:12px; color:var(--muted); margin-top:3px; }
.row-price{ font-size:18px; font-weight:500; color:var(--price); white-space:nowrap; }
.row-price .unit{ font-size:11px; color:var(--muted); }
/* 「查看全部」横条 */
.row-card.row-more{ border-style:dashed; cursor:pointer; }
.row-card.row-more:hover{ border-color:var(--blue); }
.row-more .row-title{ color:var(--blue); }

/* image tags (lxc) */
.img-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.img-tags span{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 16px; }
.img-tags span i{ color:var(--blue); font-size:15px; }

/* game cloud */
.game-sec{ background:#0a1020; }
.game-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.game-card{ flex:1 1 150px; max-width:200px; }
.game-card{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 10px;
  background:#111a30; border:1px solid #1c2a45; border-radius:14px; transition:.2s; cursor:pointer; }
.game-card:hover{ transform:translateY(-4px); border-color:#38e0a5; box-shadow:0 14px 30px rgba(0,0,0,.4); }
.game-card i{ font-size:30px; color:#38e0a5; }
.game-card .g-ico{ width:40px; height:40px; object-fit:contain; border-radius:8px; }
.game-card .g-name{ font-size:13px; font-weight:500; color:#e6edf7; margin-top:6px; }
.game-card .g-price{ font-size:12px; color:#38e0a5; }
.game-card .g-price.soft{ color:#8b9bb8; }

/* ssl certs */
.cert-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.cert-card{ flex:1 1 260px; max-width:360px; }
.cert-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; text-align:center; transition:.2s; }
.cert-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(9,24,74,.10); border-color:#c9d6f5; }
.cert-ico{ width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--chip);
  color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:24px; }
.cert-name{ font-size:15px; font-weight:500; color:var(--ink); }
.cert-desc{ font-size:12px; color:var(--muted); margin:3px 0 12px; }
.cert-price{ font-size:22px; font-weight:500; color:var(--price); margin-bottom:16px; }
.cert-price .cur{ font-size:13px; } .cert-price .unit{ font-size:12px; color:var(--muted); font-weight:400; }
.cert-price .free{ color:var(--ok); }
.cert-price .cert-none{ font-size:15px; font-weight:500; color:var(--muted); }
.cert-card .btn{ width:100%; }
.cert-card .btn.disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }

/* domain */
.domain-box{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:34px; text-align:center; }
.domain-box .sec-head{ margin-bottom:20px; }
.domain-search{ display:flex; gap:10px; max-width:560px; margin:0 auto 18px; }
.domain-search input{ flex:1; height:48px; border:1px solid var(--line); border-radius:9px;
  padding:0 18px; font-size:14px; color:var(--ink); background:var(--surface); outline:none; }
.domain-search input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,79,232,.12); }
.domain-suffix{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.domain-suffix span{ font-size:13px; color:var(--muted); }
.domain-suffix b{ color:var(--ink); font-weight:500; }
.domain-suffix em{ color:var(--price); font-style:normal; font-weight:500; }

/* more products */
.more-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.more-card{ flex:1 1 280px; max-width:380px; }
.more-card{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; transition:.2s; cursor:pointer; }
.more-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(9,24,74,.10); border-color:#c9d6f5; }
.more-ico{ width:48px; height:48px; border-radius:12px; background:var(--chip); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:14px; }
.more-card h3{ margin:0 0 6px; font-size:15px; font-weight:500; color:var(--ink); }
.more-card p{ margin:0 0 14px; font-size:12px; color:var(--muted); line-height:1.8; }
.more-link{ font-size:13px; color:var(--blue); display:inline-flex; align-items:center; gap:4px; }

/* global map panel */
.map-panel{ background:#070d1c; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px rgba(6,17,54,.28); }
.map-head{ padding:26px 28px 6px; }
.map-kicker{ margin:0 0 5px; font-size:11px; color:#38e0a5; letter-spacing:2px; font-family:ui-monospace,Consolas,monospace; }
.map-head h2{ margin:0; font-size:24px; font-weight:500; color:#f2f6ff; }
.map-desc{ margin:6px 0 0; font-size:13px; color:#5f7099; }
.map-grid{ display:grid; grid-template-columns:2.4fr 1fr; gap:12px; padding:10px 20px 24px; align-items:start; }
.map-canvas svg{ width:100%; display:block; }
.map-list{ display:flex; flex-direction:column; gap:7px; max-height:360px; overflow-y:auto; padding-right:6px; }
.map-list::-webkit-scrollbar{ width:6px; }
.map-list::-webkit-scrollbar-track{ background:transparent; }
.map-list::-webkit-scrollbar-thumb{ background:#26344f; border-radius:3px; }
.map-list::-webkit-scrollbar-thumb:hover{ background:#38507a; }
.map-list{ scrollbar-width:thin; scrollbar-color:#26344f transparent; }
.map-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 15px;
  border-radius:9px; border:1px solid #17233f; transition:background .2s; }
.map-row:hover{ background:#0f1c38; }
.map-row .mr-name{ font-size:12px; color:#dbe4f7; }
.map-row .mr-lat{ font-size:12px; font-family:ui-monospace,Consolas,monospace; }
.mr-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; background:#3d4d6e; }
.mr-dot.ok{ background:#38e0a5; box-shadow:0 0 8px #38e0a5; }
.mr-dot.blue{ background:#5aa9ff; box-shadow:0 0 8px #5aa9ff; }
.mr-lat.ok{ color:#38e0a5; } .mr-lat.blue{ color:#5aa9ff; }
.map-row.soon{ opacity:.55; } .map-row.soon .mr-name,.map-row.soon .mr-lat{ color:#8ba3c9; }
.map-node{ animation:map-blink 2.2s ease-in-out infinite; }
.map-ring{ transform-origin:center; transform-box:fill-box; animation:map-pulse 2.6s ease-out infinite; }
.map-arc{ stroke-dasharray:4 8; animation:map-dash 1.2s linear infinite; }
@keyframes map-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes map-pulse{ 0%{ transform:scale(.6); opacity:.9; } 70%{ transform:scale(2.6); opacity:0; } 100%{ opacity:0; } }
@keyframes map-dash{ to{ stroke-dashoffset:-24; } }

/* control panel showcase */
.panel-showcase{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:36px; align-items:center; }
.ps-features{ display:flex; flex-direction:column; gap:22px; }
.ps-feat{ display:flex; gap:14px; align-items:flex-start; }
.ps-ico{ flex:0 0 40px; width:40px; height:40px; border-radius:11px; background:var(--chip); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:18px; }
.ps-t{ font-size:14px; font-weight:500; color:var(--ink); }
.ps-d{ font-size:12px; color:var(--muted); line-height:1.7; margin-top:2px; }
.ps-window{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(9,24,74,.16); }
.ps-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.ps-dot{ width:9px; height:9px; border-radius:50%; }
.ps-url{ margin-left:10px; font-size:11px; color:var(--muted); font-family:ui-monospace,Consolas,monospace; }
.ps-body{ display:flex; }
.ps-side{ width:112px; flex:0 0 112px; background:var(--surface-2); border-right:1px solid var(--line); padding:12px 8px; }
.ps-nav{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text); padding:8px 10px; border-radius:7px; margin-bottom:2px; }
.ps-nav i{ font-size:12px; width:14px; }
.ps-nav.active{ background:var(--chip); color:var(--blue); font-weight:500; }
.ps-main{ flex:1; padding:16px; }
.ps-server{ border:1px solid var(--line); border-radius:10px; padding:14px; }
.ps-server-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ps-server-name{ font-size:13px; font-weight:500; color:var(--ink); }
.ps-server-ip{ font-size:11px; color:var(--muted); margin-left:8px; font-family:ui-monospace,Consolas,monospace; }
.ps-status{ font-size:11px; color:var(--ok); background:#e6f8f0; padding:2px 10px; border-radius:999px; }
.ps-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ps-act{ font-size:11px; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:5px 10px; display:inline-flex; align-items:center; gap:5px; }
.ps-act i{ font-size:10px; }
.ps-act.on{ color:var(--blue); border-color:var(--blue); background:var(--chip); }
.ps-metrics{ display:flex; gap:8px; }
.ps-metric{ flex:1; background:var(--surface-2); border-radius:8px; padding:8px 10px; }
.ps-metric-v{ font-size:15px; font-weight:500; color:var(--blue); }
.ps-metric-v.ok{ color:var(--ok); }
.ps-metric-l{ font-size:10px; color:var(--muted); margin:1px 0 6px; }
.ps-bar-track{ height:4px; background:#e3eaf8; border-radius:2px; overflow:hidden; }
.ps-bar-track span{ display:block; height:100%; background:var(--blue); border-radius:2px; }
.ps-bar-track span.ok{ background:var(--ok); }
.ps-row-list{ margin-top:10px; }
.ps-row-item{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text); padding:8px 2px; border-bottom:1px solid var(--line); }
.ps-row-item:last-child{ border-bottom:0; }
.ps-row-item i{ font-size:8px; vertical-align:2px; margin-right:6px; }
.ps-row-item i.ok{ color:var(--ok); } .ps-row-item i.warn{ color:var(--warn); }
.ps-row-spec{ color:var(--muted); font-family:ui-monospace,Consolas,monospace; font-size:11px; }

/* cta */
.cta{ position:relative; overflow:hidden; margin:44px 0; border-radius:16px;
  background:linear-gradient(120deg,#1a43c9,#2a5cf5); padding:30px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; }
.cta::after{ content:""; position:absolute; right:-40px; top:-70px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); }
.cta-txt{ position:relative; }
.cta-txt h3{ margin:0 0 4px; font-size:19px; font-weight:500; color:#fff; }
.cta-txt p{ margin:0; font-size:13px; color:#cddbff; }
.cta .btn{ position:relative; }

/* footer */
.footer{ background:#0c1636; color:#8091c4; }
.footer-top{ display:grid; grid-template-columns:1.15fr 3fr; gap:56px; padding:56px 0 44px; align-items:start; }
.footer-brand .f-logo{ display:flex; align-items:center; gap:10px; color:#fff; font-size:18px; font-weight:600; }
.footer-brand .f-logo .logo-mark{ width:32px; height:32px; border-radius:9px; overflow:hidden;
  background:linear-gradient(135deg,var(--blue),#5b86ff); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.footer-brand .f-logo .logo-mark img{ width:100%; height:100%; object-fit:cover; }
.footer-brand .f-logo .f-logo-img{ max-height:40px; max-width:200px; width:auto; height:auto; display:block; }
.f-desc{ margin:16px 0 22px; font-size:13px; line-height:1.85; color:#6f80b6; max-width:330px; }
.f-contact{ display:flex; flex-direction:column; gap:11px; }
.f-contact a{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:#aab6dd; width:max-content; transition:.2s; }
.f-contact a i{ width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#6f8ce0; transition:.2s; }
.f-contact a:hover{ color:#fff; } .f-contact a:hover i{ background:var(--blue); color:#fff; }
.footer-cols{ display:flex; flex-wrap:wrap; gap:30px 40px; }
.footer-cols .f-col{ flex:1 1 140px; min-width:140px; max-width:220px; }
.f-col h4{ margin:0 0 18px; font-size:14px; color:#eaf0ff; font-weight:600; }
.f-links a{ display:block; font-size:13px; color:#7f90c2; padding:7px 0; transition:.2s; }
.f-links a:hover{ color:#fff; transform:translateX(3px); }
.footer-bar{ border-top:1px solid rgba(255,255,255,.07); }
.footer-bar-in{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 0; font-size:12px; color:#6274a8; flex-wrap:wrap; }
.footer-bar-in .f-beian{ color:#586aa0; }

/* chat 浮动客服 */
.chat{ position:fixed; right:18px; bottom:26px; z-index:50; display:flex; flex-direction:column; gap:10px; }
.chat-item{ position:relative; }
.chat-btn{ width:50px; height:50px; border-radius:14px; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:20px; cursor:pointer;
  box-shadow:0 8px 22px rgba(9,24,74,.12); transition:.2s; }
.chat-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.chat-pop{ position:absolute; right:60px; top:50%; transform:translateY(-50%) translateX(8px);
  min-width:180px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  box-shadow:0 16px 40px rgba(9,24,74,.18); opacity:0; visibility:hidden; pointer-events:none; transition:.22s; }
.chat-item:hover .chat-pop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(-50%) translateX(0); }
/* 透明桥：填补按钮与弹窗之间的缝隙，保证鼠标能移进弹窗不断开 hover */
.chat-pop::before{ content:''; position:absolute; right:-18px; top:0; bottom:0; width:18px; }
.chat-pop::after{ content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--surface); border-right:1px solid var(--line); border-top:1px solid var(--line); }
.cp-title{ font-size:12px; color:var(--muted); margin-bottom:6px; white-space:nowrap; }
.cp-phone{ font-size:19px; font-weight:700; color:var(--ink); white-space:nowrap; }
.cp-link{ display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:7px 0; font-size:13px; color:var(--text); border-top:1px solid var(--line); }
.cp-link:first-of-type{ border-top:0; }
.cp-link:hover{ color:var(--blue); }
.cp-link b{ color:var(--blue); font-weight:600; }
.chat-qr .cp-qrs{ display:flex; gap:14px; }
.chat-qr .cp-qr{ text-align:center; }
.chat-qr .cp-qr img{ width:126px; height:126px; object-fit:contain; border-radius:10px; display:block; background:#fff; border:1px solid var(--line); }
.chat-qr .cp-qr span{ display:block; font-size:12px; color:var(--muted); margin-top:7px; white-space:nowrap; }

@media (max-width:900px){
  /* —— 顶部导航：汉堡下拉展开（含菜单项 + 登录/主题）—— */
  .site-nav .nav{ flex-wrap:wrap; height:auto; min-height:64px; }
  .site-nav .logo{ height:64px; }
  .nav-toggle{ display:block; order:2; margin-left:auto; }
  .nav-menu{ display:none; order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; margin:0; }
  .nav-menu a{ padding:13px 4px; }
  /* 移动端下拉平铺展开 */
  .nav-drop{ display:block; }
  .nav-drop-t{ color:var(--text); padding:13px 4px; width:100%; }
  .nav-drop-t::after{ margin-left:auto; }
  .nav-drop::before{ display:none; }
  .nav-drop-menu{ position:static; transform:none !important; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:0 0 6px 16px; min-width:0; }
  .nav-drop-menu a{ padding:11px 4px; }
  .nav-act{ display:none; order:4; flex-basis:100%; margin-left:0; padding:6px 0 14px; gap:10px; }
  .nav-act .btn{ flex:1; height:38px; }
  .site-nav.nav-open{ background:var(--page); box-shadow:0 8px 24px var(--shadow-sm); }
  .site-nav.nav-open .nav-menu{ display:flex; }
  .site-nav.nav-open .nav-act{ display:flex; }
  .site-nav.nav-open .logo{ color:var(--ink); }
  .site-nav.nav-open .logo-mark{ background:linear-gradient(135deg,var(--blue),#5b86ff); box-shadow:0 4px 12px rgba(29,79,232,.28); }
  .site-nav.nav-open .nav-menu a{ color:var(--text); border-top:1px solid var(--line); }
  .site-nav.nav-open .nav-menu a:hover,.site-nav.nav-open .nav-menu a.active{ color:var(--blue); }
  .site-nav.nav-open .nav-toggle{ color:var(--ink); }
  .site-nav.nav-open .nav-theme{ border-color:var(--line); color:var(--text); }
  /* —— hero：单列 + 让开固定导航 —— */
  .hero-grid{ grid-template-columns:1fr; gap:24px; padding-top:92px !important; padding-bottom:84px !important; padding-left:30px !important; padding-right:30px !important; }
  .hero-grid.reverse{ grid-template-columns:1fr; }
  .hero-grid.reverse .hero-visual{ order:2; }
  .hero-center{ padding-top:96px !important; padding-bottom:72px !important; padding-left:30px !important; padding-right:30px !important; }
  /* 保险：让开固定导航(64px)防与 LOGO/汉堡重叠；左右留白仍由 .wrap(0 24px) 提供，不清零 */
  .hero-slide > .hero-grid,.hero-slide > .hero-center{ padding-top:92px !important; }
  .hero h1{ font-size:26px; }
  .hero-sub{ font-size:14px; }
  /* 首屏可视化卡片自适应、防溢出 */
  .hero-visual{ min-height:auto; }
  .console,.hv-card,.hv-gp,.hv-site,.hv-rack,.ssl-visual,.cdn-visual{ width:100%; max-width:340px; }
  .hv-stack{ transform:none; }
  .entry{ flex:1 1 calc(50% - 7px); max-width:none; }
  .plans{ grid-template-columns:1fr; }
  .map-grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; }
  .cert-grid,.more-grid{ grid-template-columns:1fr; }
  .game-grid{ grid-template-columns:1fr 1fr 1fr; }
  .domain-search{ flex-direction:column; }
  .domain-search input{ flex:none; width:100%; }
  .panel-showcase{ grid-template-columns:1fr; gap:28px; }
  .domain-hero-search{ flex-direction:column; }
  .domain-hero-search input{ flex:none; width:100%; }
  .footer-top{ grid-template-columns:1fr; gap:32px; padding:40px 0 28px; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:20px 26px; }
  .footer-bar-in{ justify-content:center; text-align:center; }
  .cta{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .wrap{ padding:0 16px; }
  .hero h1{ font-size:22px; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
  .game-grid{ grid-template-columns:1fr 1fr; }
  .sec-head h2{ font-size:22px; }
}

/* ===== 物理机租用·快速下单弹窗外壳（layui layer 定制 skin） ===== */
.layui-layer.fb-layer{ border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(23,37,92,.28); }
.layui-layer.fb-layer .layui-layer-title{
  height:54px; line-height:54px; padding:0 54px 0 38px;
  font-size:16px; font-weight:600; color:#17255c;
  background:#fff; border-bottom:1px solid #eef2fb; border-radius:16px 16px 0 0;
}
/* 头部左侧品牌竖条 */
.layui-layer.fb-layer .layui-layer-title::before{
  content:""; position:absolute; left:24px; top:19px; width:4px; height:16px;
  background:#ffb437; border-radius:2px;
}
.layui-layer.fb-layer .layui-layer-content{ border-radius:0 0 16px 16px; background:#fff; }
.layui-layer.fb-layer .layui-layer-content iframe{ background:#fff; }
/* 关闭按钮：改为细线 × + 圆形 hover 底 */
.layui-layer.fb-layer .layui-layer-setwin{ right:16px; top:16px; }
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1{
  width:26px; height:26px; margin-left:0; background:none; border-radius:50%;
  transition:background .15s ease;
}
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1::before,
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:1.6px;
  background:#8a97b8; border-radius:2px;
}
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1::before{ transform:translate(-50%,-50%) rotate(45deg); }
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1:hover{ background:#f1f4fb; opacity:1; }
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1:hover::before,
.layui-layer.fb-layer .layui-layer-setwin .layui-layer-close1:hover::after{ background:#17255c; }