:root{
  --c-bg:#f8fafc;
  --c-bg2:#f1f5f9;
  --c-white:#ffffff;
  --c-border:#e2e8f0;
  --c-border2:#cbd5e1;
  --c-text:#0f172a;
  --c-text2:#334155;
  --c-muted:#64748b;
  --c-light:#94a3b8;
  --c-brand:#0052cc;
  --c-brand2:#0066ff;
  --c-brand3:#3b82f6;
  --c-brand-bg:#eff6ff;
  --c-brand-bd:#bfdbfe;
  --c-green:#10b981;
  --c-green-bg:#ecfdf5;
  --c-amber:#f59e0b;
  --c-red:#ef4444;
  --s-xs:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --s-sm:0 4px 12px rgba(15,23,42,.07),0 2px 4px rgba(15,23,42,.04);
  --s-md:0 10px 28px rgba(15,23,42,.09),0 4px 8px rgba(15,23,42,.05);
  --s-lg:0 20px 50px rgba(15,23,42,.11),0 8px 20px rgba(15,23,42,.06);
  --s-brand:0 8px 24px rgba(0,102,255,.22);
  --s-hover:0 18px 40px rgba(15,23,42,.10),0 8px 22px rgba(59,130,246,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
.container{width:min(1200px,calc(100% - 40px));margin:0 auto}
h1,h2,h3{color:var(--c-text);font-weight:900;letter-spacing:0}
h1{font-size:clamp(34px,5vw,56px);line-height:1.06}
h2{font-size:clamp(26px,3vw,38px);line-height:1.14}
h3{font-size:clamp(18px,2vw,22px);line-height:1.24}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:15px;border:1.5px solid transparent;
  font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg,#1670ff 0%,#005df5 100%);color:#fff;border-color:#0f62f5;box-shadow:0 14px 30px rgba(0,102,255,.24)}
.btn-primary:hover{background:var(--c-brand)}
.btn-ghost{background:#fff;color:var(--c-text2);border-color:var(--c-border);box-shadow:0 6px 16px rgba(15,23,42,.05)}
.btn-ghost:hover{background:var(--c-brand-bg);border-color:var(--c-brand-bd);color:var(--c-brand2)}
.btn-white{background:#fff;color:var(--c-brand2);border-color:#fff}
.btn-white:hover{background:#f8fbff}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.78)}

.site-header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.88);box-shadow:0 1px 0 rgba(255,255,255,.72),0 8px 24px rgba(15,23,42,.03)
}
.hdr-inner{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;border-radius:11px;background:var(--c-brand2);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:900;
  box-shadow:0 10px 24px rgba(0,102,255,.16)
}
.brand-text{display:flex;flex-direction:column}
.brand-text strong{font-size:16px;line-height:1.1}
.brand-text em{font-style:normal;font-size:10px;color:var(--c-muted);margin-top:1px;white-space:nowrap}

.desk-nav{flex:1;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none}
.nav-link,.nav-btn{
  position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:14px;
  font-size:15px;font-weight:800;color:var(--c-muted);border:0;background:none;cursor:pointer;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease
}
.nav-link:hover,.nav-btn:hover,.nav-link.is-active,.nav-btn.is-active{
  background:linear-gradient(180deg,#eef5ff 0%,#e7f1ff 100%);color:var(--c-brand2);box-shadow:inset 0 0 0 1px rgba(191,219,254,.92)
}
.nav-caret{
  display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .2s
}
.has-dd{position:relative}
.has-dd.is-open .nav-caret{transform:rotate(180deg)}
.dd-panel{
  position:absolute;top:calc(100% + 12px);left:0;width:min(900px,calc(100vw - 32px));
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;z-index:300
}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:16px}
.has-dd:hover .dd-panel,.has-dd:focus-within .dd-panel,.has-dd.is-open .dd-panel{opacity:1;pointer-events:auto;transform:translateY(0)}
.dd-inner{
  background:#fff;border:1px solid rgba(214,226,243,.95);border-radius:30px;box-shadow:0 28px 72px rgba(15,23,42,.13),0 10px 24px rgba(59,130,246,.08);
  display:grid;grid-template-columns:294px 1fr;overflow:hidden
}
.dd-intro{padding:30px 28px;background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);border-right:1px solid rgba(226,232,240,.92);display:flex;flex-direction:column;gap:12px}
.dd-label{font-size:12px;font-weight:900;color:var(--c-brand2)}
.dd-intro strong{font-size:19px;line-height:1.35}
.dd-intro p{font-size:13px;line-height:1.85;color:var(--c-muted);flex:1}
.dd-cta{display:inline-flex;align-items:center;margin-top:10px;font-size:15px;font-weight:900;color:var(--c-brand2)}
.dd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:22px;list-style:none}
.dd-link{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:98px;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);border:1px solid rgba(221,230,243,.96);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease
}
.dd-link:hover{border-color:var(--c-brand-bd);background:linear-gradient(180deg,#f9fbff 0%,#eef5ff 100%);box-shadow:0 12px 24px rgba(0,102,255,.08);transform:translateY(-1px)}
.dd-link::after{
  content:"->";position:absolute;right:16px;top:14px;font-size:12px;font-weight:900;color:rgba(0,102,255,.36)
}
.dd-link strong{font-size:16px;line-height:1.32;color:#142338}
.dd-link span{font-size:13px;color:var(--c-muted);line-height:1.65}
.dd-link.is-current{
  border-color:#9ec5ff;background:linear-gradient(180deg,#f7fbff 0%,#eaf3ff 100%);box-shadow:0 14px 28px rgba(0,102,255,.10)
}
.dd-link.is-current::after{color:var(--c-brand2)}

.hdr-actions{display:flex;gap:12px;flex-shrink:0}
.mob-menu-btn{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;
  border:1px solid var(--c-border);border-radius:10px;background:#fff;cursor:pointer
}
.mob-menu-btn span{display:block;width:18px;height:1.5px;background:var(--c-text2);transition:.25s}
.mob-menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mob-menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.mob-menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mob-nav{display:none}
.mob-nav.is-open{display:block}
.mob-nav-inner{display:grid;gap:6px;padding:0 0 20px}
.mob-link,.mob-toggle,.mob-sub{
  display:block;width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--c-border);
  background:#fff;font-size:14px;font-weight:700;color:var(--c-text2)
}
.mob-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.mob-sub{font-size:13px;color:var(--c-muted);background:var(--c-bg);padding-left:22px}
.mob-sub.is-current,.mob-link.is-current{
  border-color:var(--c-brand-bd);background:var(--c-brand-bg);color:var(--c-brand2)
}
.mob-sub-list{display:none;gap:5px}
.mob-group.is-open .mob-sub-list{display:grid}
.mob-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
body.mob-menu-open{overflow:hidden}

.bc-wrap{padding:12px 0 0}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#7b8ba6}
.breadcrumb a{color:var(--c-muted)}
.bc-sep{color:var(--c-light)}

.section{padding:72px 0}
.section-bg{background:var(--c-bg2);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{margin:0 auto 12px;max-width:820px}
.section-head p{max-width:760px;margin:0 auto;color:var(--c-muted);font-size:16px;line-height:1.85}
.sh-kicker{
  display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--c-brand-bg);border:1px solid var(--c-brand-bd);
  font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--c-brand2);text-transform:uppercase;margin-bottom:10px
}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--c-brand-bg);
  border:1px solid var(--c-brand-bd);font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--c-brand2);text-transform:uppercase
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-brand3);box-shadow:0 0 0 5px rgba(59,130,246,.12)}

.page-hero-section{
  padding:28px 0 54px;background:linear-gradient(160deg,var(--c-white) 0%,#eff6ff 58%,#f0f9ff 100%);
  border-bottom:1px solid var(--c-border)
}
.page-jc .page-hero-section{
  padding:8px 0 46px;
  background:
  radial-gradient(circle at 14% 16%,rgba(59,130,246,.08),transparent 18%),
  radial-gradient(circle at 86% 20%,rgba(148,163,184,.08),transparent 22%),
  linear-gradient(160deg,#fbfdff 0%,#edf5ff 52%,#eef7ff 100%)
}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(500px,1fr);gap:42px;align-items:start}
.page-hero-grid.hero-jc-grid{grid-template-columns:minmax(0,.95fr) minmax(560px,1.05fr);gap:56px}
.page-hero-sub{font-size:20px;line-height:1.55;color:var(--c-text2);font-weight:900;margin-top:14px}
.page-hero-desc{font-size:16px;line-height:1.9;color:var(--c-muted);margin-top:14px;max-width:580px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.pstat{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid var(--c-border);border-radius:20px;padding:18px 14px;text-align:center;box-shadow:var(--s-sm)
}
.pstat,.feat-card,.workflow-card,.chip-card,.traffic-lane,.layer-card,.feed-item,.route-card,.mini-panel,.scan-chip{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease
}
.pstat:hover,.feat-card:hover,.workflow-card:hover,.chip-card:hover,.traffic-lane:hover,.layer-card:hover,.feed-item:hover,.route-card:hover,.mini-panel:hover{
  transform:translateY(-2px);box-shadow:var(--s-hover)
}
.pstat strong{display:block;font-size:30px;line-height:1;color:var(--c-brand2);font-weight:900}
.pstat span{display:block;margin-top:8px;font-size:13px;color:var(--c-muted)}

.page-hero-visual{position:relative;align-self:stretch}
.hero-card{
  position:relative;border-radius:30px;border:1px solid var(--c-border);background:#fff;
  box-shadow:0 26px 60px rgba(15,23,42,.10),0 8px 20px rgba(59,130,246,.08);padding:84px 24px 24px;overflow:hidden;min-height:446px;
  transition:transform .22s ease,box-shadow .22s ease
}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 34px 70px rgba(15,23,42,.12),0 12px 26px rgba(59,130,246,.10)}
.hero-card::before{
  content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 18% 18%,rgba(0,102,255,.08),transparent 24%),
  radial-gradient(circle at 82% 12%,rgba(16,185,129,.08),transparent 18%),
  linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  pointer-events:none
}
.hero-card::after{
  content:"";position:absolute;inset:14px;border-radius:24px;border:1px solid rgba(191,219,254,.34);pointer-events:none
}
.hero-badge{
  position:absolute;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.96);border:1px solid rgba(191,219,254,.82);box-shadow:0 10px 28px rgba(15,23,42,.10);
  font-size:12px;font-weight:800;color:var(--c-text2);z-index:2
}
.hero-badge-1{top:16px;left:16px}
.hero-badge-2{right:16px;top:16px;color:#047857}
.hero-badge-bottom{right:16px;bottom:16px;top:auto;color:#10b981}
.dot-green{width:8px;height:8px;border-radius:50%;background:var(--c-green);display:inline-block;box-shadow:0 0 0 4px rgba(16,185,129,.14)}
.badge-check{
  width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(16,185,129,.12);color:#10b981;font-size:12px;font-weight:900;line-height:1
}

.visual-shell{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.visual-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.visual-top strong{font-size:16px}
.visual-chip{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--c-green-bg);
  color:#047857;border:1px solid #a7f3d0;font-size:12px;font-weight:800
}
.visual-board{
  position:relative;border-radius:24px;border:1px solid #dbe7f5;background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  padding:20px;min-height:326px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)
}
.visual-board::before{
  content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(59,130,246,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(59,130,246,.07) 1px,transparent 1px);
  background-size:28px 28px;mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.66))
}
.cc-visual .visual-board,.ip-visual .visual-board{padding:18px}
.jc-visual .visual-board,.map-visual .visual-board{padding:18px}
.proxy-visual .visual-board{padding:20px}

.panel-stack{position:relative;z-index:1;display:grid;gap:12px}
.mini-panel{
  background:rgba(255,255,255,.92);border:1px solid rgba(191,219,254,.95);border-radius:18px;padding:14px 16px;
  box-shadow:0 10px 24px rgba(59,130,246,.07)
}
.mini-panel strong{display:block;font-size:14px}
.mini-panel p{margin-top:6px;font-size:12px;line-height:1.7;color:var(--c-muted)}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-tag{
  display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;
  background:#eff6ff;color:var(--c-brand2);border:1px solid var(--c-brand-bd)
}

.traffic-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;height:100%}
.traffic-lane{
  border:1px solid rgba(191,219,254,.95);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(248,251,255,.92) 100%);padding:16px;
  box-shadow:0 10px 24px rgba(59,130,246,.07)
}
.traffic-lane h4{font-size:14px;font-weight:900}
.traffic-lane small{display:block;margin-top:2px;font-size:11px;color:var(--c-muted)}
.request-list{display:grid;gap:10px;margin-top:14px}
.request-pill{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;
  position:relative;background:#fff;border:1px solid var(--c-border);font-size:13px;font-weight:700
}
.request-pill::before{
  content:"";position:absolute;left:12px;top:12px;bottom:12px;width:6px;border-radius:999px;background:#e2e8f0
}
.request-pill span{display:flex;align-items:center;gap:10px;padding-left:14px}
.request-pill.allow{border-color:#bbf7d0;background:linear-gradient(180deg,#ffffff 0%,#f7fffb 100%)}
.request-pill.allow::before{background:linear-gradient(180deg,#bbf7d0,#34d399)}
.request-pill.block{border-color:#fecaca;background:#fff7f7}
.request-pill.block::before{background:linear-gradient(180deg,#fecaca,#f87171)}
.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot.good{background:var(--c-green);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.status-dot.bad{background:var(--c-red);box-shadow:0 0 0 4px rgba(239,68,68,.12)}

.line-stream{
  position:absolute;inset:0;pointer-events:none
}
.stream{
  position:absolute;height:2px;background:linear-gradient(90deg,rgba(239,68,68,0),rgba(239,68,68,.8),rgba(59,130,246,.95));
  transform-origin:left center;overflow:hidden
}
.stream::after{
  content:"";position:absolute;top:0;left:-20%;width:22%;height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:linePulse 1.9s linear infinite
}
.stream.s1{left:16%;top:24%;width:164px;transform:rotate(15deg)}
.stream.s2{left:57%;top:29%;width:112px;transform:rotate(-26deg)}
.stream.s3{left:14%;top:64%;width:182px;transform:rotate(-12deg)}
.stream.s4{left:58%;top:66%;width:104px;transform:rotate(28deg)}

.threat-columns{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:14px;height:100%}
.threat-map{
  position:relative;border-radius:22px;border:1px solid rgba(191,219,254,.95);background:rgba(255,255,255,.9);
  overflow:hidden;min-height:260px
}
.threat-map::before{
  content:"";position:absolute;inset:18px 20px;background:
    radial-gradient(circle at 20% 34%,rgba(59,130,246,.12),transparent 10%),
    radial-gradient(circle at 34% 48%,rgba(59,130,246,.12),transparent 8%),
    radial-gradient(circle at 53% 30%,rgba(59,130,246,.12),transparent 11%),
    radial-gradient(circle at 68% 46%,rgba(59,130,246,.12),transparent 9%),
    radial-gradient(circle at 79% 36%,rgba(59,130,246,.12),transparent 8%),
    radial-gradient(circle at 82% 66%,rgba(59,130,246,.12),transparent 7%);
  border-radius:18px;
}
.threat-map::after{
  content:"";position:absolute;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-50%);
  border:1px dashed rgba(0,102,255,.26);border-radius:50%;animation:spinSlow 16s linear infinite
}
.pulse-point{
  position:absolute;width:12px;height:12px;border-radius:50%;background:var(--c-red);
  box-shadow:0 0 0 7px rgba(239,68,68,.12),0 0 16px rgba(239,68,68,.36);animation:pingRed 1.8s ease-out infinite
}
.pulse-point.p1{left:18%;top:27%}
.pulse-point.p2{left:36%;top:58%}
.pulse-point.p3{left:53%;top:23%}
.pulse-point.p4{left:69%;top:44%}
.pulse-point.p5{left:81%;top:62%}
.pulse-point.p6{left:76%;top:21%}
.shield-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:116px;height:116px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#65a8ff 0%,#1d6bff 52%,#0b4dcb 100%);
  box-shadow:0 0 0 12px rgba(0,102,255,.08),0 0 0 28px rgba(0,102,255,.04)
}
.shield-center::before{
  content:"";position:absolute;inset:20px;background:#fff;
  clip-path:path("M31 4 L49 11 V23 C49 36 41 47 31 53 C21 47 13 36 13 23 V11 Z");
}
.threat-feed{display:grid;gap:10px}
.feed-item{
  border:1px solid rgba(191,219,254,.95);border-radius:18px;background:rgba(255,255,255,.92);padding:12px 14px;
  box-shadow:0 10px 24px rgba(59,130,246,.07)
}
.feed-item strong{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.feed-item span{display:block;margin-top:6px;font-size:12px;color:var(--c-muted)}
.feed-badge{font-size:11px;font-weight:800;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:999px;padding:4px 8px}

.filter-stack{position:relative;z-index:1;display:grid;gap:14px}
.layer-card{
  border:1px solid rgba(191,219,254,.95);border-radius:22px;background:rgba(255,255,255,.92);padding:16px 18px;
  box-shadow:0 10px 24px rgba(59,130,246,.07)
}
.layer-card strong{display:block;font-size:14px}
.layer-card p{margin-top:6px;font-size:12px;line-height:1.7;color:var(--c-muted)}
.metric-list{display:grid;gap:8px;margin-top:12px}
.metric-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;border-radius:12px;background:rgba(239,246,255,.74);border:1px solid rgba(191,219,254,.78);
  font-size:12px;font-weight:700;color:var(--c-text2)
}
.metric-row b{font-size:12px;color:var(--c-brand2)}
.layer-bars{display:flex;gap:10px;align-items:flex-end;height:66px;margin-top:12px}
.layer-bars i{
  display:block;flex:0 0 14px;border-radius:999px 999px 6px 6px;background:linear-gradient(180deg,#7fb3ff,#2563eb);
  box-shadow:0 8px 16px rgba(37,99,235,.18);
  animation:barWave 2.8s ease-in-out infinite
}
.layer-bars i:nth-child(2){animation-delay:.12s}
.layer-bars i:nth-child(3){animation-delay:.24s}
.layer-bars i:nth-child(4){animation-delay:.36s}
.layer-bars i:nth-child(5){animation-delay:.48s}
.layer-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding-top:12px;border-top:1px dashed rgba(191,219,254,.9)
}
.layer-footer span{font-size:12px;color:var(--c-muted)}
.layer-footer b{font-size:13px;color:var(--c-text);font-weight:800}

.proxy-flow{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:.92fr 1.08fr;gap:14px}
.route-card{
  border:1px solid rgba(191,219,254,.95);border-radius:22px;background:rgba(255,255,255,.92);padding:16px;
  box-shadow:0 10px 24px rgba(59,130,246,.07)
}
.route-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.route-title strong{font-size:14px}
.route-title span{font-size:11px;font-weight:800;color:var(--c-brand2);background:#eff6ff;border:1px solid var(--c-brand-bd);border-radius:999px;padding:4px 8px}
.route-track{display:grid;gap:12px;margin-top:16px}
.route-node{
  position:relative;padding:12px 14px;border-radius:16px;border:1px solid var(--c-border);background:#fff;font-size:12px;font-weight:700
}
.route-node.bad{border-color:#fecaca;background:#fff6f6}
.route-node.good{border-color:#bbf7d0;background:#f5fff8}
.route-node::after{
  content:"";position:absolute;left:50%;bottom:-12px;width:2px;height:12px;background:linear-gradient(180deg,rgba(59,130,246,.45),rgba(59,130,246,0))
}
.route-node:last-child::after{display:none}
.route-side{display:grid;gap:12px}

.scan-cloud{position:relative;z-index:1;display:grid;gap:14px}
.scan-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
.scan-chip{
  padding:12px 10px;border-radius:16px;border:1px solid rgba(191,219,254,.95);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  text-align:center;font-size:12px;font-weight:800;color:var(--c-text2);box-shadow:0 10px 24px rgba(59,130,246,.07);
  animation:floatLift 4.2s ease-in-out infinite
}
.scan-chip:nth-child(2n){animation-delay:.2s}
.scan-chip:nth-child(3n){animation-delay:.4s}
.scan-chip.blocked{color:#b91c1c;background:#fff7f7;border-color:#fecaca}

.jc-reference-copy h1{
  font-size:clamp(58px,6.4vw,90px);
  line-height:.92;
  max-width:720px;
  text-wrap:balance
}
.jc-reference-copy .page-hero-sub{
  font-size:28px;
  margin-top:20px;
  max-width:680px
}
.jc-reference-copy .page-hero-desc{
  font-size:18px;
  line-height:1.92;
  max-width:700px;
  margin-top:22px
}
.hero-inline-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px
}
.hero-inline-points span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(191,219,254,.9);
  background:rgba(255,255,255,.8);
  color:#33517d;
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 22px rgba(15,23,42,.04)
}
.hero-inline-points span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2f88ff;
  box-shadow:0 0 0 5px rgba(47,136,255,.12)
}
.jc-reference-copy .hero-btns{margin-top:34px}
.jc-reference-copy .pstats{margin-top:36px}
.jc-reference-copy .pstat{
  min-height:134px;
  padding:28px 18px 22px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-color:rgba(209,224,247,.95)
}
.jc-reference-copy .pstat strong{
  font-size:56px;
  font-weight:900;
  letter-spacing:0
}
.jc-reference-copy .pstat span{font-size:15px;color:#7081a1}
.jc-reference-visual{
  min-width:0
}
.hero-card.jc-reference-card{
  min-height:670px;
  padding:20px;
  border-radius:40px;
  background:linear-gradient(180deg,#d9e6fb 0%,#dbe7fb 62%,#d9e5fb 100%);
  box-shadow:0 42px 92px rgba(114,146,205,.26),0 12px 28px rgba(59,130,246,.11)
}
.hero-card.jc-reference-card::before{
  background:
  radial-gradient(circle at 14% 66%,rgba(91,126,215,.16),transparent 22%),
  radial-gradient(circle at 82% 18%,rgba(255,255,255,.46),transparent 24%),
  radial-gradient(circle at 66% 78%,rgba(102,149,230,.10),transparent 28%),
  linear-gradient(180deg,#d9e6fb 0%,#dce7fb 100%)
}
.hero-card.jc-reference-card::after{
  inset:0;
  border-radius:40px;
  border:1px solid rgba(255,255,255,.38)
}
.jc-reference-stage{
  position:relative;
  height:100%;
  border-radius:32px;
  overflow:hidden
}
.jc-reference-shadow{
  position:absolute;
  left:8%;
  right:8%;
  bottom:9%;
  height:84px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(122,150,204,.32) 0%,rgba(122,150,204,.12) 44%,rgba(122,150,204,0) 80%);
  filter:blur(18px)
}
.jc-scene{
  position:relative;
  min-height:628px;
  margin-top:18px;
  perspective:1400px;
  transform-style:preserve-3d
}
.jc-floor{
  position:absolute;
  left:8%;
  width:62%;
  height:150px;
  border-radius:24px;
  transform-style:preserve-3d;
  background:linear-gradient(180deg,#fbfdff 0%,#edf5ff 100%);
  border:1px solid rgba(198,217,245,.96);
  box-shadow:0 20px 32px rgba(109,139,193,.12)
}
.jc-floor::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
  linear-gradient(rgba(79,145,255,.10) 1px,transparent 1px),
  linear-gradient(90deg,rgba(79,145,255,.10) 1px,transparent 1px);
  background-size:42px 42px,42px 42px;
  opacity:.8
}
.jc-floor-back{
  bottom:102px;
  transform:rotateX(70deg) rotateZ(-26deg) translateZ(-14px)
}
.jc-floor-front{
  left:24%;
  bottom:46px;
  width:48%;
  height:112px;
  transform:rotateX(72deg) rotateZ(-26deg);
  box-shadow:0 18px 26px rgba(119,149,203,.16)
}
.jc-panel-main{
  position:absolute;
  right:8%;
  top:28px;
  width:278px;
  height:376px;
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff 0%,#eff6ff 100%);
  border:1px solid rgba(207,223,246,.96);
  box-shadow:0 34px 68px rgba(117,144,197,.28),-24px 20px 40px rgba(108,137,189,.14);
  transform:skewY(-16deg) rotateX(8deg);
  transform-origin:right top;
  padding:30px 24px 24px
}
.jc-panel-main::before{
  content:"";
  position:absolute;
  top:18px;
  left:-34px;
  width:34px;
  height:266px;
  border-radius:18px 0 0 18px;
  background:linear-gradient(180deg,#eff5ff 0%,#e3eeff 100%);
  border:1px solid rgba(207,223,246,.92);
  border-right:none;
  transform:skewY(16deg)
}
.jc-panel-main::after{
  content:"";
  position:absolute;
  top:-24px;
  left:-4px;
  width:264px;
  height:24px;
  border-radius:18px 18px 4px 4px;
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
  border:1px solid rgba(207,223,246,.88);
  transform:skewX(58deg);
  transform-origin:left bottom
}
.jc-panel-head{
  display:grid;
  gap:10px
}
.jc-head-pill{
  width:144px;
  height:20px;
  border-radius:999px;
  background:linear-gradient(90deg,#4bb8ff 0%,#1f78ff 100%);
  box-shadow:0 12px 24px rgba(38,114,255,.2)
}
.jc-head-line{
  display:block;
  height:8px;
  width:134px;
  border-radius:999px;
  background:#dcecff
}
.jc-head-line-lg{width:172px;background:#eff7ff}
.jc-panel-body{
  margin-top:24px;
  display:grid;
  grid-template-columns:92px 1fr 60px;
  align-items:start;
  gap:18px
}
.jc-stack{
  display:grid;
  gap:10px
}
.jc-stack-card{
  display:block;
  width:88px;
  height:78px;
  border-radius:16px;
  background:linear-gradient(180deg,#62c3ff 0%,#1f7cff 100%);
  box-shadow:0 16px 24px rgba(38,114,255,.22)
}
.jc-stack-mini{
  display:block;
  width:38px;
  height:18px;
  border-radius:8px;
  background:linear-gradient(90deg,#56beff 0%,#267fff 100%);
  justify-self:end
}
.jc-stack-line{
  display:block;
  height:8px;
  width:54px;
  border-radius:999px;
  background:#eff7ff
}
.jc-stack-line-lg{width:62px;background:#d8ebff}
.jc-stack-line-sm{width:38px}
.jc-radar{
  position:relative;
  width:118px;
  height:118px;
  margin-top:18px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#d4ecff 0%,#bfe4ff 34%,#48a9ff 35%,#2f86ff 100%);
  box-shadow:0 20px 32px rgba(44,126,255,.24)
}
.jc-radar-ring{
  position:absolute;
  inset:17px;
  border-radius:50%;
  border:1px solid rgba(237,247,255,.66)
}
.jc-radar-ring-b{inset:34px}
.jc-radar-core{
  position:absolute;
  inset:41px;
  border-radius:50%;
  background:#d9edff
}
.jc-radar-slice{
  position:absolute;
  inset:0;
  border-radius:50%;
  clip-path:polygon(50% 50%,100% 19%,100% 54%);
  background:rgba(244,251,255,.96)
}
.jc-radar-slice-b{
  clip-path:polygon(50% 50%,16% 83%,41% 0);
  background:rgba(99,194,255,.48)
}
.jc-stack-side{
  align-content:start;
  justify-items:end
}
.jc-pillar{
  position:absolute;
  width:28px;
  border-radius:14px 14px 10px 10px;
  background:linear-gradient(180deg,#ffffff 0%,#edf5ff 100%);
  border:1px solid rgba(209,224,246,.94);
  box-shadow:0 16px 24px rgba(114,144,196,.14)
}
.jc-pillar::before{
  content:"";
  position:absolute;
  inset:7px 5px 7px 5px;
  border-radius:9px;
  background:linear-gradient(180deg,#fefefe 0%,#f1f7ff 100%)
}
.jc-pillar-a{left:14%;top:266px;height:104px;transform:rotate(-28deg)}
.jc-pillar-b{left:25%;top:330px;height:120px;transform:rotate(-28deg)}
.jc-pillar-c{right:25%;top:398px;height:116px;transform:rotate(-28deg)}
.jc-pillar-d{right:15%;top:470px;height:98px;transform:rotate(-28deg)}
.jc-node{
  position:absolute;
  border-radius:18px;
  background:linear-gradient(180deg,#3fb1ff 0%,#1d79ff 100%);
  box-shadow:0 16px 26px rgba(41,117,255,.22);
  border:1px solid rgba(157,214,255,.72);
  display:grid;
  gap:8px;
  padding:16px
}
.jc-node::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none
}
.jc-node-a{
  left:18%;
  top:402px;
  width:102px;
  height:80px;
  transform:rotate(-28deg)
}
.jc-node-b{
  right:21%;
  top:480px;
  width:102px;
  height:80px;
  transform:rotate(-28deg)
}
.jc-node-c{
  left:12%;
  top:486px;
  width:42px;
  height:24px;
  transform:rotate(-28deg);
  padding:0
}
.jc-node-chip{
  width:30px;
  height:8px;
  border-radius:999px;
  background:#eef8ff
}
.jc-node-line{
  width:44px;
  height:8px;
  border-radius:999px;
  background:#d9eeff
}
.jc-node-line-sm{width:28px;background:#eef8ff}
.jc-beam{
  position:absolute;
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(76,168,255,.84) 0%,rgba(76,168,255,.18) 100%);
  box-shadow:0 0 14px rgba(76,168,255,.26)
}
.jc-beam-a{left:22%;top:430px;width:244px;transform:rotate(-31deg)}
.jc-beam-b{left:31%;top:356px;width:182px;transform:rotate(-13deg)}
.jc-beam-c{left:42%;top:486px;width:126px;transform:rotate(18deg)}
.jc-beam-d{left:47%;top:522px;width:156px;transform:rotate(23deg)}

.section-head{
  text-align:center;
  margin-bottom:44px
}
.section-head h2{
  margin:0 auto 12px;
  max-width:860px;
  text-wrap:balance
}
.feat-grid{
  gap:22px
}
.section-jc-core{
  padding-top:56px
}
.page-jc .section-jc-core .section-head{
  margin-bottom:32px
}
.page-jc .section-jc-core .section-head p{
  max-width:700px
}
.feat-card{
  border-radius:28px;
  padding:30px 26px;
  border:1px solid rgba(216,227,244,.96);
  box-shadow:0 24px 56px rgba(15,23,42,.06),0 8px 18px rgba(59,130,246,.05)
}
.feat-card h3{
  margin-top:20px;
  font-size:22px
}
.feat-card p{
  margin-top:14px;
  color:#6d7f9e
}
.feat-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px
}
.feat-meta span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(180deg,#f4f8ff 0%,#e9f2ff 100%);
  border:1px solid rgba(191,219,254,.95);
  color:#1d4ed8;
  font-size:13px;
  font-weight:900
}
.feat-meta em{
  font-style:normal;
  font-size:12px;
  font-weight:800;
  color:#8ba0c2;
  letter-spacing:.06em;
  text-transform:uppercase
}
.feat-foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(226,232,240,.92);
  color:#3f5d8f;
  font-size:13px;
  font-weight:700;
  line-height:1.7
}
.chip-layout{
  gap:24px
}
.chip-cloud{
  border-radius:30px;
  padding:28px;
  border-color:rgba(216,227,244,.96);
  box-shadow:0 24px 56px rgba(15,23,42,.05)
}
.chip{
  min-height:44px;
  padding:0 18px;
  font-size:13px
}
.chip-note{gap:16px}
.chip-card{
  border-radius:28px;
  padding:26px 24px;
  border:1px solid rgba(216,227,244,.96);
  box-shadow:0 20px 44px rgba(15,23,42,.05)
}
.chip-card h3{font-size:20px}
.chip-card p{color:#6d7f9e}
.faq-list{
  gap:12px
}
.faq-item{
  border-radius:24px;
  border:1px solid rgba(216,227,244,.96);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.04)
}
.faq-q{
  padding:22px 24px;
  font-size:17px
}
.faq-a{
  padding:0 24px 22px;
  color:#6d7f9e
}

.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.feat-card{
  background:#fff;border:1px solid rgba(216,227,244,.96);border-radius:28px;padding:30px 26px;box-shadow:0 24px 56px rgba(15,23,42,.06),0 8px 18px rgba(59,130,246,.05);min-height:236px
}
.feat-icon{
  width:68px;height:68px;border-radius:20px;background:linear-gradient(180deg,#eef5ff 0%,#edf4ff 100%);
  border:1px solid var(--c-brand-bd);display:grid;place-items:center;color:var(--c-brand2)
}
.feat-icon svg{width:30px;height:30px}
.feat-card h3{margin-top:20px;font-size:22px}
.feat-card p{margin-top:14px;font-size:15px;line-height:1.9;color:#6d7f9e}

.cmp-table-wrap{overflow-x:auto;border-radius:24px;border:1px solid var(--c-border);box-shadow:var(--s-sm)}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.cmp-table thead tr{background:var(--c-text)}
.cmp-table thead th{padding:14px 18px;color:#fff;font-weight:800;font-size:13px;text-align:left;white-space:nowrap}
.cmp-table thead th:first-child{border-radius:24px 0 0 0}
.cmp-table thead th:last-child{border-radius:0 24px 0 0}
.cmp-table tbody tr{border-bottom:1px solid var(--c-border)}
.cmp-table tbody tr:last-child{border:none}
.cmp-table tbody tr:hover{background:var(--c-bg)}
.cmp-table td{padding:12px 18px;color:var(--c-text2);vertical-align:middle}
.cmp-table td:first-child{font-weight:700;color:var(--c-text)}
.cmp-table td.col-hi{background:var(--c-brand-bg);font-weight:800;color:var(--c-brand2)}
.cmp-no,.cmp-yes{
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  font-size:12px;font-weight:900
}
.cmp-no{background:#fff1f2;color:#be123c}
.cmp-yes{background:#ecfdf5;color:#047857}

.chip-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.chip-cloud{
  background:#fff;border:1px solid rgba(216,227,244,.96);border-radius:30px;padding:28px;box-shadow:0 24px 56px rgba(15,23,42,.05);
  display:flex;flex-wrap:wrap;gap:12px
}
.chip{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--c-brand-bd);background:var(--c-brand-bg);color:var(--c-brand2);font-size:13px;font-weight:800
}
.chip.warn{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.chip.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}
.chip-note{display:grid;gap:16px}
.chip-card{
  background:#fff;border:1px solid rgba(216,227,244,.96);border-radius:28px;padding:26px 24px;box-shadow:0 20px 44px rgba(15,23,42,.05)
}
.chip-card h3{font-size:20px}
.chip-card p{margin-top:10px;font-size:15px;line-height:1.85;color:#6d7f9e}

.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.workflow-card{
  background:#fff;border:1px solid var(--c-border);border-radius:24px;padding:26px 22px;box-shadow:var(--s-sm);min-height:214px
}
.workflow-card strong{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:var(--c-brand2);color:#fff;font-size:16px
}
.workflow-card h3{margin-top:16px}
.workflow-card p{margin-top:12px;font-size:15px;line-height:1.8;color:var(--c-muted)}

.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid rgba(216,227,244,.96);border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);box-shadow:0 18px 40px rgba(15,23,42,.04);overflow:hidden
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border:0;background:#fff;color:var(--c-text);font-size:17px;font-weight:800;text-align:left;cursor:pointer;
  transition:background .16s ease,color .16s ease
}
.faq-q:hover{background:#fbfdff}
.faq-q[aria-expanded=true]{background:#f9fbff;color:var(--c-brand)}
.faq-icon{
  width:26px;height:26px;border-radius:999px;background:var(--c-brand-bg);border:1px solid var(--c-brand-bd);
  color:var(--c-brand2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;flex-shrink:0
}
.faq-q[aria-expanded=true] .faq-icon{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px;font-size:15px;line-height:1.9;color:#6d7f9e}

.scenario-hero-copy h1{
  font-size:clamp(48px,5.8vw,78px);
  line-height:.96;
  max-width:720px;
  text-wrap:balance;
  letter-spacing:-.02em;
  text-shadow:0 14px 32px rgba(15,23,42,.05)
}
.scenario-hero-copy .page-hero-sub{
  font-size:26px;
  margin-top:18px;
  max-width:660px;
  color:#233d67
}
.scenario-hero-copy .page-hero-desc{
  max-width:700px;
  margin-top:18px;
  color:#6b7f9f
}
.scenario-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px
}
.scenario-points span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(191,219,254,.9);
  background:rgba(255,255,255,.84);
  color:#33517d;
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 22px rgba(15,23,42,.04)
}
.scenario-points span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2f88ff;
  box-shadow:0 0 0 5px rgba(47,136,255,.12)
}
.scenario-hero-copy .hero-btns{margin-top:32px}
.scenario-hero-copy .pstats{margin-top:34px}
.scenario-hero-copy .pstat{
  min-height:132px;
  padding:26px 18px 22px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-color:rgba(209,224,247,.95);
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 34px rgba(15,23,42,.06),0 8px 18px rgba(59,130,246,.05)
}
.scenario-hero-copy .pstat::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);
  opacity:.82
}
.scenario-hero-copy .pstat strong{
  font-size:48px;
  letter-spacing:-.02em
}
.page-scenario .page-hero-section{
  position:relative;
  overflow:hidden
}
.page-scenario .page-hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 18%,rgba(59,130,246,.08),transparent 22%),
    radial-gradient(circle at 88% 16%,rgba(148,163,184,.08),transparent 24%);
  opacity:.9
}
.page-scenario .page-hero-section .container{
  position:relative;
  z-index:1
}
.page-web .page-hero-section{
  background:
    radial-gradient(circle at 14% 18%,rgba(59,130,246,.10),transparent 20%),
    radial-gradient(circle at 82% 12%,rgba(56,189,248,.10),transparent 18%),
    linear-gradient(160deg,#fbfdff 0%,#edf5ff 56%,#edf7ff 100%)
}
.page-game .page-hero-section{
  background:
    radial-gradient(circle at 16% 20%,rgba(59,130,246,.12),transparent 20%),
    radial-gradient(circle at 84% 14%,rgba(34,197,94,.10),transparent 18%),
    linear-gradient(160deg,#fbfdff 0%,#edf4ff 50%,#eefaff 100%)
}
.page-jinrong .page-hero-section{
  background:
    radial-gradient(circle at 16% 20%,rgba(37,99,235,.10),transparent 20%),
    radial-gradient(circle at 84% 12%,rgba(14,165,233,.10),transparent 18%),
    linear-gradient(160deg,#fbfdff 0%,#eef5ff 54%,#f2f8ff 100%)
}
.page-hk .page-hero-section{
  background:
    radial-gradient(circle at 16% 18%,rgba(59,130,246,.12),transparent 20%),
    radial-gradient(circle at 84% 14%,rgba(6,182,212,.12),transparent 18%),
    linear-gradient(160deg,#fbfdff 0%,#edf4ff 52%,#eaf8ff 100%)
}

.scenario-visual-card{
  position:relative;
  min-height:660px;
  padding:22px;
  border-radius:38px;
  background:linear-gradient(180deg,#dce8fc 0%,#d7e5fb 60%,#dce8fc 100%);
  box-shadow:0 42px 92px rgba(114,146,205,.24),0 12px 28px rgba(59,130,246,.1)
}
.scenario-visual-card::before{
  background:
    radial-gradient(circle at 16% 70%,rgba(91,126,215,.16),transparent 22%),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.46),transparent 24%),
    radial-gradient(circle at 66% 78%,rgba(102,149,230,.10),transparent 28%),
    linear-gradient(180deg,#dce8fc 0%,#d7e5fb 100%)
}
.scenario-visual-card::after{
  inset:0;
  border-radius:38px;
  border:1px solid rgba(255,255,255,.38)
}
.scenario-visual-card:hover{
  transform:translateY(-2px);
  box-shadow:0 48px 104px rgba(114,146,205,.28),0 16px 34px rgba(59,130,246,.12)
}
.scenario-visual-card .hero-badge-bottom{right:16px;bottom:16px;top:auto}
.scenario-stage{
  position:relative;
  min-height:614px;
  border-radius:30px;
  overflow:hidden
}
.scenario-stage::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none
}
.scenario-stage::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:7%;
  height:86px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(122,150,204,.3) 0%,rgba(122,150,204,.12) 44%,rgba(122,150,204,0) 80%);
  filter:blur(18px)
}
.scenario-grid-board{
  position:relative;
  min-height:614px;
  padding:34px 28px 28px;
  background:
    linear-gradient(rgba(79,145,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,145,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(235,244,255,.55) 100%);
  background-size:42px 42px,42px 42px,100% 100%
}
.page-web .scenario-grid-board{
  background:
    linear-gradient(rgba(79,145,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,145,255,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(238,246,255,.65) 100%);
  background-size:42px 42px,42px 42px,100% 100%
}
.page-game .scenario-grid-board{
  background:
    linear-gradient(rgba(34,197,94,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(236,248,255,.68) 100%);
  background-size:42px 42px,42px 42px,100% 100%
}
.page-jinrong .scenario-grid-board{
  background:
    linear-gradient(rgba(29,78,216,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(239,246,255,.68) 100%);
  background-size:42px 42px,42px 42px,100% 100%
}
.page-hk .scenario-grid-board{
  background:
    linear-gradient(rgba(14,165,233,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(232,247,255,.68) 100%);
  background-size:42px 42px,42px 42px,100% 100%
}
.scenario-hub{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  width:172px;
  height:172px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#65a8ff 0%,#1d6bff 52%,#0b4dcb 100%);
  box-shadow:0 0 0 16px rgba(0,102,255,.08),0 0 0 40px rgba(0,102,255,.04),0 26px 46px rgba(38,114,255,.24)
}
.scenario-hub::before{
  content:"";
  position:absolute;
  inset:26px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.26)
}
.scenario-hub::after{
  content:"";
  position:absolute;
  inset:44px;
  border-radius:50%;
  background:rgba(255,255,255,.2)
}
.scenario-icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:76px;
  height:76px;
  border-radius:22px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  backdrop-filter:blur(8px)
}
.scenario-icon svg{width:42px;height:42px}
.scenario-ring{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(0,102,255,.22);
  animation:spinSlow 16s linear infinite
}
.scenario-ring.r1{width:290px;height:290px}
.scenario-ring.r2{
  width:372px;
  height:372px;
  border-color:rgba(16,185,129,.18);
  animation-direction:reverse
}
.scenario-node{
  position:absolute;
  min-width:132px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(207,223,246,.95);
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(244,249,255,.92) 100%);
  box-shadow:0 16px 30px rgba(59,130,246,.08);
  display:grid;
  gap:6px
}
.scenario-node strong{font-size:14px;color:var(--c-text)}
.scenario-node span{font-size:12px;line-height:1.6;color:var(--c-muted)}
.scenario-node small{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid var(--c-brand-bd);
  color:var(--c-brand2);
  font-size:11px;
  font-weight:800
}
.scenario-node.n1{left:20px;top:30px}
.scenario-node.n2{right:28px;top:54px}
.scenario-node.n3{left:18px;bottom:120px}
.scenario-node.n4{right:16px;bottom:132px}
.scenario-link{
  position:absolute;
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(76,168,255,.82) 0%,rgba(76,168,255,.18) 100%);
  box-shadow:0 0 14px rgba(76,168,255,.22)
}
.scenario-link::after{
  content:"";
  position:absolute;
  top:0;
  left:-20%;
  width:24%;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:linePulse 1.9s linear infinite
}
.scenario-link.l1{left:138px;top:142px;width:168px;transform:rotate(18deg)}
.scenario-link.l2{left:370px;top:158px;width:156px;transform:rotate(-16deg)}
.scenario-link.l3{left:146px;top:414px;width:168px;transform:rotate(-18deg)}
.scenario-link.l4{left:382px;top:408px;width:148px;transform:rotate(21deg)}
.scenario-kpi-stack{
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  width:min(88%,560px)
}
.scenario-kpi{
  border-radius:18px;
  border:1px solid rgba(207,223,246,.95);
  background:rgba(255,255,255,.92);
  padding:14px 12px;
  text-align:center;
  box-shadow:0 14px 24px rgba(59,130,246,.06);
  backdrop-filter:blur(10px)
}
.scenario-kpi strong{
  display:block;
  font-size:22px;
  line-height:1;
  color:var(--c-brand2)
}
.scenario-kpi span{
  display:block;
  margin-top:7px;
  font-size:12px;
  color:var(--c-muted)
}
.web-panel{
  position:absolute;
  left:54px;
  right:54px;
  top:66px;
  bottom:132px;
  border-radius:28px;
  border:1px solid rgba(207,223,246,.96);
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 28px 60px rgba(15,23,42,.08),0 10px 24px rgba(59,130,246,.08);
  padding:18px 18px 16px
}
.web-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(226,232,240,.92)
}
.web-panel-title{display:grid;gap:4px}
.web-panel-title strong{font-size:16px}
.web-panel-title span{font-size:12px;color:var(--c-muted)}
.web-pill{
  display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;
  background:#eff6ff;border:1px solid var(--c-brand-bd);color:var(--c-brand2);font-size:11px;font-weight:900
}
.web-panel-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
  margin-top:16px
}
.web-chart{
  border:1px solid rgba(216,227,244,.96);
  border-radius:22px;
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
  padding:16px;
  min-height:236px;
  position:relative;
  overflow:hidden
}
.web-chart::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(59,130,246,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.08) 1px,transparent 1px);
  background-size:26px 26px
}
.web-chart-line,
.web-chart-line::before{
  position:absolute;
  left:24px;
  right:24px;
  height:2px;
  border-radius:999px
}
.web-chart-line{bottom:72px;background:linear-gradient(90deg,#60a5fa,#2563eb)}
.web-chart-line::before{
  content:"";
  bottom:48px;
  background:linear-gradient(90deg,#22c55e,#2563eb);
  transform:translateY(-56px) skewX(-32deg)
}
.web-metric-stack{display:grid;gap:12px}
.web-metric{
  border:1px solid rgba(216,227,244,.96);
  border-radius:18px;
  background:#fff;
  padding:14px 14px 12px
}
.web-metric strong{display:block;font-size:15px}
.web-metric span{display:block;margin-top:6px;font-size:12px;color:var(--c-muted);line-height:1.7}
.game-route{
  position:absolute;
  left:54px;
  right:54px;
  top:70px;
  bottom:138px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  align-items:center
}
.game-lane{
  border:1px solid rgba(216,227,244,.96);
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding:18px 16px;
  min-height:252px;
  box-shadow:0 18px 34px rgba(15,23,42,.06)
}
.game-lane strong{display:block;font-size:15px}
.game-lane span{display:block;margin-top:6px;font-size:12px;color:var(--c-muted);line-height:1.7}
.game-list{display:grid;gap:10px;margin-top:16px}
.game-list i{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:40px;
  padding:0 12px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(216,227,244,.96);
  font-style:normal;
  font-size:12px;
  color:#314867
}
.game-list i b{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  font-size:10px;
  background:#eff6ff;
  color:#2563eb
}
.game-bridge{
  position:absolute;
  top:50%;
  width:70px;
  height:2px;
  background:linear-gradient(90deg,rgba(34,197,94,.7),rgba(59,130,246,.7));
  box-shadow:0 0 14px rgba(34,197,94,.18)
}
.game-bridge.g1{left:34%}
.game-bridge.g2{right:34%}
.finance-board{
  position:absolute;
  left:58px;
  right:58px;
  top:70px;
  bottom:138px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:16px
}
.finance-pane{
  border:1px solid rgba(216,227,244,.96);
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding:18px 16px;
  min-height:264px;
  box-shadow:0 18px 34px rgba(15,23,42,.06)
}
.finance-pane strong{display:block;font-size:15px}
.finance-pane span{display:block;margin-top:6px;font-size:12px;color:var(--c-muted);line-height:1.7}
.finance-flow{display:grid;gap:12px;margin-top:16px}
.finance-flow i{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  padding:0 12px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(216,227,244,.96);
  font-style:normal;
  font-size:12px;
  color:#314867
}
.finance-flow i b{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-size:10px
}
.finance-risk{
  display:grid;
  gap:10px;
  margin-top:16px
}
.finance-risk i{
  display:block;
  min-height:52px;
  padding:12px 12px 10px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(216,227,244,.96);
  font-style:normal;
  font-size:12px;
  color:#4b627f;
  line-height:1.65
}
.finance-risk i b{
  display:block;
  margin-bottom:6px;
  color:#0f172a;
  font-size:13px
}
.hk-layers{
  position:absolute;
  left:58px;
  right:58px;
  top:74px;
  bottom:140px;
  display:grid;
  gap:14px
}
.hk-layer{
  border:1px solid rgba(216,227,244,.96);
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  padding:16px 18px;
  box-shadow:0 16px 28px rgba(15,23,42,.05)
}
.hk-layer strong{display:block;font-size:15px}
.hk-layer span{display:block;margin-top:6px;font-size:12px;color:var(--c-muted);line-height:1.7}
.hk-layer-bars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px
}
.hk-layer-bars i{
  display:block;
  min-height:42px;
  border-radius:14px;
  background:linear-gradient(180deg,#eef6ff 0%,#dcebff 100%);
  border:1px solid rgba(191,219,254,.96);
  font-style:normal;
  font-size:11px;
  color:#31506f;
  text-align:center;
  line-height:42px
}
.scenario-coverage{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.scenario-cover-card{
  border-radius:24px;
  border:1px solid rgba(216,227,244,.96);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.04);
  padding:24px 22px;
  position:relative;
  overflow:hidden
}
.scenario-cover-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#60a5fa,#22c55e)
}
.scenario-cover-card h3{font-size:20px}
.scenario-cover-card p{
  margin-top:12px;
  font-size:14px;
  line-height:1.85;
  color:#6d7f9e
}
.scenario-cover-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px
}
.scenario-cover-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#f8fbff;
  border:1px solid #e3edf9;
  font-size:11px;
  font-weight:800;
  color:#496280
}
.scenario-notice{
  margin-top:18px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(191,219,254,.95);
  background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  color:#496280;
  font-size:14px;
  line-height:1.85
}
.scenario-notice strong{color:#1346af}
.scenario-focus-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.scenario-focus-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(216,227,244,.96);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.04);
  padding:22px 22px 20px
}
.scenario-focus-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#60a5fa)
}
.scenario-focus-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px
}
.scenario-focus-top strong{
  font-size:18px;
  color:var(--c-text)
}
.scenario-focus-top span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid var(--c-brand-bd);
  color:var(--c-brand2);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase
}
.scenario-focus-card p{
  font-size:14px;
  line-height:1.85;
  color:#6d7f9e
}
.scenario-focus-list{
  display:grid;
  gap:10px;
  margin-top:16px
}
.scenario-focus-list li{
  list-style:none;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#314867;
  font-size:13px;
  line-height:1.75
}
.scenario-focus-list li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:8px;
  border-radius:50%;
  background:#2f88ff;
  box-shadow:0 0 0 4px rgba(47,136,255,.12);
  flex-shrink:0
}
.scenario-band{
  padding-top:0
}
.scenario-band-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.scenario-band-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(216,227,244,.96);
  background:linear-gradient(180deg,#ffffff 0%,#f9fcff 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.04);
  padding:22px 22px 20px
}
.scenario-band-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#60a5fa)
}
.scenario-band-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.scenario-band-top strong{
  font-size:16px;
  color:var(--c-text)
}
.scenario-band-top span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#f8fbff;
  border:1px solid #e3edf9;
  color:#47617f;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase
}
.scenario-band-value{
  margin-top:14px;
  font-size:34px;
  line-height:1;
  font-weight:900;
  color:var(--c-brand2);
  letter-spacing:-.03em
}
.scenario-band-note{
  margin-top:10px;
  font-size:14px;
  line-height:1.85;
  color:#6d7f9e
}
.scenario-band-list{
  display:grid;
  gap:8px;
  margin-top:14px
}
.scenario-band-list li{
  list-style:none;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#314867;
  font-size:13px;
  line-height:1.7
}
.scenario-band-list li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:8px;
  border-radius:50%;
  background:#2f88ff;
  box-shadow:0 0 0 4px rgba(47,136,255,.12);
  flex-shrink:0
}
.scenario-hk-card{
  position:relative;
  border-radius:28px;
  border:1px solid rgba(216,227,244,.96);
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  padding:26px 24px;
  box-shadow:0 20px 44px rgba(15,23,42,.05);
  overflow:hidden
}
.scenario-hk-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 100% 0,rgba(59,130,246,.08),transparent 35%);
  pointer-events:none
}
.scenario-hk-card h3{font-size:22px}
.scenario-hk-card p{
  margin-top:12px;
  font-size:15px;
  line-height:1.88;
  color:#6d7f9e
}
.page-scenario .section-head{
  margin-bottom:42px
}
.page-scenario .section-head h2{
  max-width:920px;
  text-wrap:balance
}
.page-scenario .feat-grid{
  gap:24px
}
.page-scenario .feat-card{
  position:relative;
  overflow:hidden;
  min-height:272px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 28px 60px rgba(15,23,42,.06),0 10px 22px rgba(59,130,246,.05)
}
.page-scenario .feat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 92% 10%,rgba(59,130,246,.06),transparent 20%);
  pointer-events:none
}
.page-scenario .feat-card:hover{
  transform:translateY(-4px)
}
.page-scenario .feat-icon{
  box-shadow:0 12px 24px rgba(59,130,246,.08)
}
.page-scenario .cmp-table-wrap{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 24px 56px rgba(15,23,42,.06)
}
.page-scenario .cmp-table thead tr{
  background:linear-gradient(90deg,#0f172a 0%,#14233f 100%)
}
.page-scenario .cmp-table tbody tr:nth-child(even){
  background:rgba(248,251,255,.78)
}
.page-scenario .cmp-table tbody tr:hover{
  background:#f4f8ff
}
.page-web .scenario-focus-card::before{
  background:linear-gradient(90deg,#2563eb,#60a5fa)
}
.page-web .scenario-band-card::before{
  background:linear-gradient(90deg,#2563eb,#60a5fa)
}
.page-game .scenario-focus-card::before{
  background:linear-gradient(90deg,#2563eb,#22c55e)
}
.page-game .scenario-band-card::before{
  background:linear-gradient(90deg,#2563eb,#22c55e)
}
.page-jinrong .scenario-focus-card::before{
  background:linear-gradient(90deg,#1d4ed8,#0ea5e9)
}
.page-jinrong .scenario-band-card::before{
  background:linear-gradient(90deg,#1d4ed8,#0ea5e9)
}
.page-hk .scenario-focus-card::before{
  background:linear-gradient(90deg,#0ea5e9,#2563eb)
}
.page-hk .scenario-band-card::before{
  background:linear-gradient(90deg,#0ea5e9,#2563eb)
}
.page-web .scenario-hub{
  background:radial-gradient(circle at 30% 30%,#75b2ff 0%,#226dff 52%,#0a4fd0 100%)
}
.page-game .scenario-hub{
  background:radial-gradient(circle at 30% 30%,#6cc6ff 0%,#2a83ff 42%,#1f8b62 100%)
}
.page-game .scenario-link{
  background:linear-gradient(90deg,rgba(34,197,94,.82) 0%,rgba(59,130,246,.22) 100%)
}
.page-jinrong .scenario-hub{
  background:radial-gradient(circle at 30% 30%,#8ab8ff 0%,#245dff 48%,#0b44b5 100%)
}
.page-hk .scenario-hub{
  background:radial-gradient(circle at 30% 30%,#74d8ff 0%,#16a3ff 45%,#0b57d0 100%)
}
.page-hk .scenario-link{
  background:linear-gradient(90deg,rgba(14,165,233,.86) 0%,rgba(59,130,246,.22) 100%)
}
.page-scenario .scenario-cover-card:hover,
.page-scenario .scenario-hk-card:hover,
.page-scenario .scenario-kpi:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 52px rgba(15,23,42,.08),0 10px 24px rgba(59,130,246,.08)
}
.page-scenario .scenario-focus-card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 52px rgba(15,23,42,.08),0 10px 24px rgba(59,130,246,.08)
}
.page-scenario .scenario-band-card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 52px rgba(15,23,42,.08),0 10px 24px rgba(59,130,246,.08)
}
.page-scenario .cta-card{
  box-shadow:0 34px 72px rgba(15,23,42,.18)
}
.scenario-hk-list{
  display:grid;
  gap:12px;
  margin-top:18px
}
.scenario-hk-list li{
  list-style:none;
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:#314867;
  font-size:14px;
  line-height:1.8
}
.scenario-hk-list li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:8px;
  border-radius:50%;
  background:#2f88ff;
  box-shadow:0 0 0 5px rgba(47,136,255,.12);
  flex-shrink:0
}

/* jc page round 6 polish */
.page-jc .bc-wrap{
  padding:12px 0 0
}
.page-jc .hero-jc-grid{
  align-items:center
}
.page-jc .site-header{
  background:rgba(255,255,255,.98)
}
.page-jc .desk-nav{
  transform:translateY(-1px)
}
.page-jc .nav-link.is-active,.page-jc .nav-btn.is-active{
  color:#0f62fe
}
.page-jc .breadcrumb{
  min-height:34px
}
.page-jc .page-hero-section{
  border-top:0
}
.page-jc .jc-reference-copy{
  position:relative;
  z-index:1
}
.page-jc .jc-reference-copy::after{
  content:"";
  position:absolute;
  left:-56px;
  top:78px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.08) 0%,rgba(59,130,246,0) 72%);
  pointer-events:none;
  z-index:-1
}
.page-jc .jc-reference-copy h1{
  letter-spacing:-.02em;
  text-shadow:0 10px 28px rgba(15,23,42,.04)
}
.page-jc .jc-reference-copy .page-hero-sub{
  color:#233d67
}
.page-jc .jc-reference-copy .page-hero-desc{
  color:#6b7f9f
}
.page-jc .hero-inline-points span{
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(247,251,255,.92) 100%);
  backdrop-filter:blur(10px)
}
.page-jc .jc-reference-copy .hero-btns .btn{
  min-width:150px
}
.page-jc .jc-reference-copy .pstats{
  gap:14px
}
.page-jc .jc-reference-copy .pstat{
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 34px rgba(15,23,42,.06),0 8px 18px rgba(59,130,246,.05)
}
.page-jc .jc-reference-copy .pstat::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);
  opacity:.82
}
.page-jc .hero-card.jc-reference-card{
  backdrop-filter:blur(8px)
}
.page-jc .hero-card.jc-reference-card::before{
  background:
  radial-gradient(circle at 16% 70%,rgba(89,126,215,.18),transparent 22%),
  radial-gradient(circle at 84% 18%,rgba(255,255,255,.5),transparent 24%),
  radial-gradient(circle at 50% 52%,rgba(255,255,255,.18),transparent 32%),
  linear-gradient(180deg,#d8e4fb 0%,#dbe6fb 58%,#d7e4fb 100%)
}
.page-jc .jc-reference-stage::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none
}
.page-jc .jc-panel-main{
  box-shadow:0 44px 86px rgba(117,144,197,.3),-20px 24px 44px rgba(108,137,189,.18)
}
.page-jc .jc-floor{
  box-shadow:0 26px 40px rgba(109,139,193,.16)
}
.page-jc .jc-node{
  box-shadow:0 20px 34px rgba(41,117,255,.24)
}
.page-jc .jc-beam{
  opacity:.92
}
.page-jc .section-jc-core{
  position:relative;
  padding-top:68px
}
.page-jc .section-jc-core::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:120px;
  background:linear-gradient(180deg,rgba(219,232,251,.46) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none
}
.page-jc .section-jc-core .section-head{
  margin-bottom:36px
}
.page-jc .section-jc-core .feat-grid{
  gap:24px
}
.page-jc .section-jc-core .feat-card{
  position:relative;
  overflow:hidden;
  min-height:268px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 28px 60px rgba(15,23,42,.06),0 10px 22px rgba(59,130,246,.05)
}
.page-jc .section-jc-core .feat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 92% 10%,rgba(59,130,246,.06),transparent 20%);
  pointer-events:none
}
.page-jc .section-jc-core .feat-card:hover{
  transform:translateY(-4px)
}
.page-jc .section-jc-core .feat-icon{
  box-shadow:0 12px 24px rgba(59,130,246,.08)
}
.page-jc .section-jc-core .feat-foot{
  margin-top:auto
}
.page-jc .section-bg{
  background:linear-gradient(180deg,#f8fbff 0%,#f4f8ff 100%);
  border-top:1px solid rgba(216,227,244,.8);
  border-bottom:1px solid rgba(216,227,244,.8)
}
.page-jc .chip-cloud{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)
}
.page-jc .chip{
  box-shadow:0 8px 18px rgba(15,23,42,.04)
}
.page-jc .chip-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)
}
.page-jc .faq-item{
  background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%)
}
.page-jc .faq-q{
  min-height:74px
}
.page-jc .faq-a{
  padding-bottom:24px
}
.page-jc .cta-card{
  box-shadow:0 34px 72px rgba(15,23,42,.18)
}

.cta-section{padding:56px 0 72px}
.cta-card{
  display:flex;align-items:center;justify-content:space-between;gap:40px;padding:32px 30px;border-radius:28px;
  background:linear-gradient(135deg,#0f172a,#12203e 58%,#1a2f66);border:1px solid rgba(255,255,255,.06);box-shadow:var(--s-lg)
}
.cta-eyebrow{font-size:12px;font-weight:900;letter-spacing:.12em;color:#93c5fd;text-transform:uppercase}
.cta-card h2{margin-top:10px;color:#fff}
.cta-card p{margin-top:12px;max-width:680px;color:rgba(255,255,255,.74);font-size:16px;line-height:1.85}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

.site-footer{padding:28px 0 42px;color:#6b7280;font-size:13px}
.ft-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--c-border);padding-top:22px}

@keyframes pingRed{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.18),0 0 14px rgba(239,68,68,.4)}
  50%{box-shadow:0 0 0 10px rgba(239,68,68,0),0 0 18px rgba(239,68,68,.52)}
}
@keyframes linePulse{from{left:-22%}to{left:102%}}
@keyframes spinSlow{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes barWave{
  0%,100%{height:24%}
  50%{height:100%}
}
@keyframes floatLift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

@media(max-width:1180px){
  .page-hero-grid,.feat-grid,.chip-layout,.workflow-grid,.scenario-coverage{grid-template-columns:1fr}
  .traffic-grid,.threat-columns,.proxy-flow{grid-template-columns:1fr}
  .scan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-card{flex-direction:column;align-items:flex-start;gap:24px}
  .feat-card,.workflow-card{min-height:auto}
  .page-hero-grid.hero-jc-grid{grid-template-columns:1fr;gap:30px}
  .scenario-visual-card{min-height:620px}
}
@media(max-width:920px){
  .desk-nav,.hdr-actions{display:none}
  .mob-menu-btn{display:flex;margin-left:auto}
  .mob-nav{display:none;border-top:1px solid var(--c-border);background:#fff}
  .mob-nav.is-open{display:block}
  .brand-text em{display:none}
  .container{width:min(1200px,calc(100% - 32px))}
  .page-hero-section{padding:20px 0 28px}
  .page-hero-grid{grid-template-columns:1fr}
  .page-hero-visual{order:2}
  .pstats{grid-template-columns:1fr 1fr}
  .cmp-table{font-size:13px}
  .cmp-table td,.cmp-table th{padding:10px 12px}
  .jc-reference-copy h1{font-size:clamp(42px,10vw,64px)}
  .jc-reference-copy .page-hero-sub{font-size:21px}
  .jc-reference-copy .page-hero-desc{font-size:16px}
  .hero-card.jc-reference-card{min-height:0}
  .page-jc .section-jc-core .feat-card{min-height:auto}
  .page-jc .page-hero-section{padding:4px 0 28px}
  .scenario-stage,.scenario-grid-board{min-height:560px}
  .scenario-kpi-stack{width:min(92%,540px)}
}
@media(max-width:640px){
  .container{width:min(1200px,calc(100% - 24px))}
  .site-header .container{width:min(1200px,calc(100% - 24px))}
  .page-hero-sub{font-size:17px}
  .page-hero-desc,.section-head p,.feat-card p,.workflow-card p,.chip-card p,.faq-a,.cta-card p{font-size:14px}
  .hero-btns,.cta-actions{flex-direction:column;align-items:stretch}
  .hero-btns .btn,.cta-actions .btn{width:100%}
  .pstats{grid-template-columns:1fr}
  .hero-card{padding:106px 18px 18px;min-height:auto}
  .hero-badge{font-size:11px;padding:7px 12px;max-width:calc(100% - 36px)}
  .hero-badge-1{top:14px;left:14px}
  .hero-badge-2{top:52px;left:14px;right:auto}
  .hero-badge-bottom{left:14px;right:auto;bottom:14px}
  .visual-board{min-height:280px}
  .scan-grid{grid-template-columns:1fr 1fr}
  .request-pill{font-size:12px}
  .request-pill b{font-size:12px}
  .jc-reference-copy .pstats{margin-top:24px}
  .jc-reference-copy .pstat{min-height:0;padding:22px 14px 18px}
  .jc-reference-copy .pstat strong{font-size:44px}
  .hero-card.jc-reference-card{padding:14px}
  .jc-scene{min-height:520px;margin-top:36px}
  .jc-panel-main{right:4%;top:24px;transform:scale(.9) skewY(-16deg) rotateX(8deg);transform-origin:right top}
  .jc-floor-back{left:4%;width:70%}
  .jc-floor-front{left:20%;width:54%}
  .page-jc .jc-reference-copy::after{display:none}
  .page-jc .jc-reference-copy .hero-btns .btn{min-width:0}
  .feat-card{padding:24px 20px;border-radius:24px}
  .feat-card h3{font-size:18px}
  .feat-meta{margin-bottom:14px}
  .feat-foot{margin-top:16px;padding-top:12px}
  .hero-inline-points{gap:10px}
  .hero-inline-points span{min-height:34px;padding:0 12px;font-size:12px}
  .scenario-hero-copy h1{font-size:clamp(40px,11vw,56px)}
  .scenario-hero-copy .page-hero-sub{font-size:18px}
  .scenario-visual-card{padding:14px;border-radius:28px;min-height:auto}
  .scenario-stage,.scenario-grid-board{min-height:520px;padding:22px 16px 18px}
  .scenario-ring.r1{width:220px;height:220px}
  .scenario-ring.r2{width:286px;height:286px}
  .scenario-hub{width:130px;height:130px}
  .scenario-icon{width:58px;height:58px;border-radius:18px}
  .scenario-icon svg{width:32px;height:32px}
  .scenario-node{min-width:108px;padding:12px 12px;border-radius:16px}
  .scenario-node strong{font-size:12px}
  .scenario-node span{font-size:10px}
  .scenario-node.n1{left:8px;top:18px}
  .scenario-node.n2{right:8px;top:26px}
  .scenario-node.n3{left:8px;bottom:118px}
  .scenario-node.n4{right:8px;bottom:120px}
  .scenario-link{display:none}
  .scenario-kpi-stack{position:relative;left:auto;bottom:auto;transform:none;width:100%;margin-top:318px;grid-template-columns:1fr}
  .web-panel{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    border-radius:24px;
    padding:16px 16px 14px
  }
  .web-panel-grid{grid-template-columns:1fr;gap:12px}
  .web-chart{min-height:180px}
  .game-route{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    grid-template-columns:1fr;
    gap:12px
  }
  .game-lane{min-height:auto;padding:16px 14px}
  .game-bridge{display:none}
  .finance-board{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    grid-template-columns:1fr;
    gap:12px
  }
  .finance-pane{min-height:auto;padding:16px 14px}
  .hk-layers{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto
  }
  .hk-layer{padding:16px 14px}
  .hk-layer-bars{grid-template-columns:1fr 1fr}
  .scenario-coverage,.scenario-focus-grid,.scenario-band-grid{grid-template-columns:1fr}
  .scenario-cover-card,.scenario-hk-card{padding:22px 18px;border-radius:22px}
  .chip-cloud,.chip-card{border-radius:24px;padding:22px 18px}
  .faq-item{border-radius:20px}
  .faq-q{padding:18px 18px 16px;font-size:15px}
  .faq-a{padding:0 18px 18px}
  .dd-panel{position:static;width:100%;opacity:1;pointer-events:auto;transform:none;display:none}
  .has-dd.is-open .dd-panel{display:block}
  .dd-inner{grid-template-columns:1fr;border-radius:20px}
  .dd-intro{border-right:0;border-bottom:1px solid var(--c-border)}
  .dd-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}