:root{
  --x-section-gap:112px;
  --x-hero-grid:rgba(68,48,184,.035);
}
.p-hero{
  position:relative;
  overflow:hidden;
  padding:82px 0 0;
  background:
    linear-gradient(var(--x-hero-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--x-hero-grid) 1px,transparent 1px),
    var(--x-white);
  background-position:center 14px;
  background-size:40px 40px;
}
.p-hero-copy{position:relative;z-index:2;text-align:center}
.p-hero h1{max-width:1080px;margin:0 auto}
.p-hero-sub{max-width:880px;margin:24px auto 0;color:#575461;font-size:1.125rem;line-height:1.75}
.p-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.p-hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;margin-top:21px;color:#75717D;font-family:var(--x-font-mono);font-size:var(--x-fs-0)}
.p-hero-meta span::before{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--x-green);content:""}
.p-hero-visual{position:relative;width:min(1180px,calc(100% - 48px));height:610px;margin:50px auto 0}
.p-scene{
  position:absolute;
  inset:0 24px;
  overflow:hidden;
  border:1px solid #CAC6D8;
  border-radius:var(--x-radius-lg) var(--x-radius-lg) 0 0;
  background:#16141D;
  box-shadow:var(--x-shadow-scene);
}
.p-scene-bar{
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  border-bottom:1px solid #D5D2CC;
  background:#F7F6F3;
}
.p-scene-bar i{width:9px;height:9px;border-radius:50%}
.p-scene-bar i:nth-child(1){background:var(--x-red)}
.p-scene-bar i:nth-child(2){background:var(--x-orange)}
.p-scene-bar i:nth-child(3){background:var(--x-green)}
.p-scene-title{margin-left:12px;color:#6A6871;font-family:var(--x-font-mono);font-size:10px;letter-spacing:.08em}
.p-scene-image{position:absolute;inset:42px 0 0;width:100%;height:calc(100% - 42px);object-fit:cover}
.p-terminal{
  position:absolute;
  z-index:6;
  left:5%;
  top:90px;
  width:min(455px,43%);
  height:270px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--x-radius-md);
  background:rgba(12,11,16,.94);
  box-shadow:0 24px 55px rgba(0,0,0,.32);
}
.p-terminal-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.1);color:#A7A3B4;font-family:var(--x-font-mono);font-size:10px}
.p-terminal-status{display:flex;align-items:center;gap:7px;color:#78E6B5}
.p-terminal-status::before{width:6px;height:6px;border-radius:50%;background:var(--x-green);box-shadow:0 0 10px var(--x-green);content:""}
.p-terminal-body{height:234px;overflow:hidden;padding:15px 17px;color:#D9D6E3;font-family:var(--x-font-mono);font-size:11px;line-height:1.72}
.p-terminal-scroll{animation:x-terminal-scroll 10s linear infinite}
.p-terminal-scroll p{margin:0;white-space:nowrap}
.p-prompt{color:#9A8CFF}
.p-ok{color:#5FE0A7}
.p-dim{color:#777382}
.p-warn{color:#FFC175}
.p-cursor{display:inline-block;width:7px;height:13px;vertical-align:-2px;background:#8C7CFF;animation:x-blink 1s steps(1) infinite}
.p-metric{
  position:absolute;
  z-index:7;
  width:184px;
  padding:15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--x-radius-md);
  background:rgba(250,249,247,.97);
  color:#26232D;
  box-shadow:0 17px 42px rgba(4,3,8,.23);
  animation:x-float 5s ease-in-out infinite;
}
.p-metric-one{right:5%;top:84px}
.p-metric-two{right:8%;top:284px;animation-delay:-2s}
.p-metric-label{color:#716E79;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.p-metric-value{display:flex;align-items:flex-end;justify-content:space-between;margin-top:6px;font-family:var(--x-font-mono);font-size:27px;font-weight:750;line-height:1}
.p-metric-value small{color:#777480;font-size:10px;font-weight:500}
.p-metric svg{width:100%;height:34px;margin-top:12px}
.p-node-badge{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#24212D;color:#F7F5FA;font-family:var(--x-font-mono);font-size:9px}
.p-node-badge::before{width:7px;height:7px;border-radius:50%;background:var(--x-green);box-shadow:0 0 0 4px rgba(95,224,167,.13);content:""}
.p-node-sg{left:38%;top:73%}
.p-node-jp{left:62%;top:27%}
.p-node-kr{left:53%;top:42%}
.p-node-hk{left:65%;top:66%}
.p-page-hero{padding:88px 0 78px;border-bottom:1px solid var(--x-line);background:var(--x-light)}
.p-page-hero .c-breadcrumb{margin-bottom:40px}
.p-page-hero h1{max-width:900px;margin-bottom:20px}
.p-page-hero p{max-width:760px;color:var(--x-muted);font-size:1.1rem}
.p-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--x-space-4);margin-bottom:52px}
.p-section-head h2{max-width:750px;margin:0}
.p-section-head>p{width:min(390px,100%);margin:0;color:var(--x-muted);font-size:var(--x-fs-2)}
.p-cta{padding:85px 0;color:var(--x-white);background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.14),transparent 24%),linear-gradient(120deg,#3E28AE,#6048D9 55%,#4149BB)}
.p-cta h2{max-width:700px;margin:0;color:var(--x-white)}
.p-cta p{margin:17px 0 0;color:rgba(255,255,255,.82)}
@keyframes x-terminal-scroll{
  0%,18%{transform:translateY(0)}
  28%,45%{transform:translateY(-44px)}
  55%,72%{transform:translateY(-88px)}
  82%,100%{transform:translateY(-132px)}
}
@keyframes x-blink{50%{opacity:0}}
@keyframes x-float{50%{transform:translateY(-8px)}}
@media(max-width:900px){
  .p-hero{padding-top:65px}
  .p-hero-visual{height:540px}
  .p-terminal{width:57%;left:4%}
  .p-metric{width:165px}
  .p-section-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:680px){
  .p-hero-visual{width:calc(100% - 20px);height:485px;margin-top:38px}
  .p-scene{inset:0}
  .p-terminal{left:4%;right:4%;top:72px;width:auto;height:250px}
  .p-terminal-body{height:214px}
  .p-metric{display:none}
  .p-node-badge{font-size:8px}
  .p-node-sg{left:8%;top:82%}
  .p-node-jp{left:auto;right:6%;top:73%}
  .p-node-kr,.p-node-hk{display:none}
  .p-hero-meta{gap:10px 16px}
  .p-hero-actions{align-items:stretch;flex-direction:column}
  .p-hero-actions .c-btn{width:100%}
  .p-page-hero{padding:64px 0 55px}
}