/* jq22.com/code4585 — namespaced as .jq4585-* for Lumo sidebar */
.jq4585-wrap, .jq4585-wrap *{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;} .jq4585-wrap { margin: 0; font-family: Untitled Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; background: #05060f linear-gradient(0deg,rgba(216,236,248,.06),rgba(152,192,239,.06)); font-size: max(calc(var(--_size) * 0.03), 10px); --_factor: min(600px, 80vh); --_size: min(var(--_factor), 80vw); } .jq4585-wrap.gold .jq4585-header h2 , .jq4585-wrap.gold p, .jq4585-wrap.gold > * > * :not(.jq4585-contact-btn) { filter: invert(1) brightness(4.7); } .jq4585-wrap.gold .jq4585-header h2 a{ filter: hue-rotate(0deg); } .jq4585-wrap.gold canvas { filter: drop-shadow(2em 4em 0px #d8bd10) drop-shadow(-8em -14em 0px #d8bd10); } .jq4585-wrap.gold .jq4585-header .jq4585-spotlight { filter: invert(1) brightness(4.7) opacity(0.5); } .jq4585-wrap.gold .jq4585-mountains > div { box-shadow: -1em -0.2em 0.4em -1.1em #c2ccff, inset 0em 0em 0em 2px #d8a910, inset 0.2em 0.3em 0.2em -0.2em #c2ccff, inset 10.2em 10.3em 2em -10em #d4e6ff2f; } .jq4585-wrap.gold .jq4585-content-section, .jq4585-wrap.gold .jq4585-content-section ::before, .jq4585-wrap.gold .jq4585-content-section ::after{ filter: invert(1) brightness(4.4) opacity(1); } .jq4585-wrap h2 { font-family: 'Hubot-Sans', sans-serif; } .jq4585-wrap h2, .jq4585-wrap p { margin: 0; padding: 0; } .jq4585-wrap h2 a { text-decoration: none; color: unset; } .jq4585-header { display: flex; width: 100%; justify-content: center; color: #bad6f7; padding: 2em; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; opacity: 0; translate: 0 -1em; animation: load 2s ease-in 2s forwards, up 1.4s ease-out 2s forwards; } .jq4585-header > :nth-child(1) { font-size: 1em; position: absolute; left: 0; right: 29em; margin: 0.2em auto; width: fit-content; } .jq4585-header > :nth-child(2) { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; } .jq4585-header > h2{ opacity: 0.5; cursor: pointer; transition: opacity 0.04s ease-in-out; } .jq4585-header > h2:hover { opacity: 1; text-shadow: 0 2px 16px rgba(174,207,242, 0.6); width: fit-content; } .jq4585-header > div.jq4585-mid-spot { width: 1.8em; height: 1.8em; border-radius: 50%; background: black; box-shadow: 0 0 1em 0 #98c0ef; cursor: pointer; transition: box-shadow 1s ease-in-out; } .jq4585-header > div.jq4585-mid-spot:hover { box-shadow: -0.3em 0.1em 0.2em 0 #d8bd10; } .jq4585-wrap.gold .jq4585-header > div.jq4585-mid-spot:hover { box-shadow: -0.3em 0.1em 0.2em 0 #98c0ef; } .jq4585-wrap.gold .jq4585-header > div.jq4585-mid-spot { box-shadow: 0 0 1em 0 #d8bd10; } .jq4585-header > :nth-child(2):hover ~ .jq4585-spotlight { animation: colorize 10s linear infinite; } @keyframes colorize { 0%{filter: hue-rotate(0deg); } 100% {filter: hue-rotate(-380deg);} } button.jq4585-contact-btn { position: absolute; left: min(46em, 60vw); right: 0; margin: 0 auto; width: 8em; height: 2.4em; cursor: pointer; border-radius: 20em; border: none; transition: background 0.5s, transform 0.5s; border: 1px solid #c2ccff33; opacity: 1; padding-top: 0.3em; background: #121521; color: #9dc3f7; white-space:nowrap; } button.jq4585-contact-btn::before { content: ''; display: block; position:absolute; left: 0; top:0; border-radius: 20em; width: 100%; height: 100%; background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent); opacity: 0.1; transition: all 0.4s ease-in-out; } button.jq4585-contact-btn:hover::before { background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent); opacity: 0.3; } .jq4585-contact-btn .jq4585-glow { --border-width: 1px; --loop-cycle: 24s; position: absolute; inset: calc(var(--border-width) * -1); border-radius: 50px; border: var(--border-width) solid transparent; -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask: linear-gradient(transparent, transparent), linear-gradient(white, white); -webkit-mask-clip: padding-box, border-box; mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; mask-composite: intersect; pointer-events: none; } button.jq4585-contact-btn:hover .jq4585-glow { --loop-cycle: 2s; } .jq4585-contact-btn .jq4585-glow::after, .jq4585-contact-btn .jq4585-glow::before { content: ""; height: 100%; offset-anchor: 100% 50%; background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent); opacity: 0.4; offset-path: rect(0 100% 100% 0 round 33px); position: absolute; display: inline-block; -webkit-animation: loop 4s linear infinite; animation: loop var(--loop-cycle) linear infinite; aspect-ratio: 1 / 1; transition: opacity 1s ease-in-out; } .jq4585-contact-btn .jq4585-glow::before { animation-delay: calc( var(--loop-cycle) / -2 ); } @keyframes loop { 100% { offset-distance: 100%; } } .jq4585-contact-btn-content { background: linear-gradient(0deg, #d8ecf8, #98c0ef); background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.2em; line-height: 142%; } button.jq4585-contact-btn:hover .jq4585-glow::after, button.jq4585-contact-btn:hover .jq4585-glow::before { opacity: 0.6; } @keyframes btn-rot { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } .jq4585-header .jq4585-spotlight { pointer-events: none; position: absolute; left: 0; right: 0; top:0; margin: 0 auto; transition: filter 1s ease-in-out; height: 42em; width: 100%; overflow: hidden; } .jq4585-header .jq4585-spotlight > div { border-radius: 0 0 50% 50%; position: absolute; left: 0; right: 0; margin: 0 auto; top: 3em; width: 30em; height: max(42em, 86vh); background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(124, 145, 182, .3) 49%, rgba(124, 145, 182, .5) 50%, rgba(124, 145, 182, .3) 51%, transparent 55%); transform-origin: 50% 0; filter: blur(15px) opacity(0.5); z-index: -1; animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 21s ease-in-out infinite reverse; } .jq4585-header .jq4585-spotlight > div:nth-child(1){ rotate: 20deg; animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 17s ease-in-out infinite; } .jq4585-header .jq4585-spotlight > div:nth-child(2){ rotate: -20deg; animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 14s ease-in-out infinite; } @keyframes loadrot { 0% { rotate: 0deg; scale: 0;} 100% { scale: 1;} } @keyframes spotlight { 0% { transform: rotateZ(0deg) scale(1); filter: blur(15px) opacity(0.5); } 20% { transform: rotateZ(-1deg) scale(1.2); filter: blur(16px) opacity(0.6); } 40% { transform: rotateZ(2deg) scale(1.3); filter: blur(14px) opacity(0.4); } 60% { transform: rotateZ(-2deg) scale(1.2); filter: blur(15px) opacity(0.6); } 80% { transform: rotateZ(1deg) scale(1.1); filter: blur(13px) opacity(0.4); } 100% { transform: rotateZ(0deg) scale(1); filter: blur(15px) opacity(0.5); } } #leafsJq4585ParticleCanvas { position: absolute; pointer-events: none; animation: load 0.4s ease-in-out forwards; z-index: 1; width: 100%; } .jq4585-wrap p { font-size: 1.5em; } .jq4585-hero { width: 100%; height: 100%; max-height: 140px; position: absolute; top: 16em; } .jq4585-heroT { position: absolute; left: 0; right: 0; margin: auto; height: 20em; padding-top: 2em; translate: 0 -1.6em; opacity: 0; animation: load 2s ease-in-out 0.6s forwards; } @keyframes load { 0% { opacity: 0;} 100% { opacity: 1;} } .jq4585-heroT > h2 { position: absolute;left: 0; right: 0; margin: auto; width: fit-content; font-size: 7em; font-weight: 600; color: #9dc3f7; background: radial-gradient( 2em 2em at 50% 50%, transparent calc(var(--p) - 2em), #fff calc(var(--p) - 1em), #fff calc(var(--p) - 0.4em), transparent var(--p) ), linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 16px rgba(174,207,242,.24); --p:0%; transition:--p 3s linear; animation: pulse 10s linear 1.2s infinite; } .jq4585-heroT h2:nth-child(2) { background: radial-gradient( 2em 2em at 50% 50%, transparent calc(var(--p) - 2em), transparent calc(var(--p) - 1em), #fff calc(var(--p) - 1em), #fff calc(var(--p) - 0.4em), transparent calc(var(--p) - 0.4em), transparent var(--p) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(16px) opacity(0.4); } @keyframes pulse { 0% { --p:0%; } 50% { --p:300%;} 100% { --p:300%;} } @property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .jq4585-heroP { font-size: 1.2em; position: absolute; left: 0; right: 0; top: 20.6em; margin: auto; height: fit-content; width: fit-content; text-align: center; opacity: 0; translate: 0 1em; animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards; color: #d8ecf8; text-shadow: 0 2px 16px rgba(174,207,242,.24); background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @keyframes up { 100% { translate: 0; } } .jq4585-heroSubP { position: absolute; left: 0; right: 0; top: 13em; margin: auto; height: fit-content; opacity: 0; translate: 0 -1em; animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards; } @keyframes load3 { 0% { opacity: 0;} 100% { opacity: 0.7;} } .jq4585-heroSubP p { font-size: 1em; position: relative; width: fit-content; margin: auto; color: #d8ecf8; text-shadow: 0 2px 16px rgba(174,207,242,.24); background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .jq4585-heroSubP p::before, .jq4585-heroSubP p::after { position: absolute; top: 60%; display: block; content: ''; width: 5em; height: 1px; opacity: 0; animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards; } @keyframes load2 { 0% { opacity: 0;} 100% { opacity: 0.3;} } .jq4585-heroSubP p::before{ background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%); right: 120%; translate: -5em 0; } .jq4585-heroSubP p::after { background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%); left: 120%; translate: 5em 0; } .jq4585-accent-lines { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 42em; z-index: -2; --accent-lines-clr: rgba(186, 215, 247, .18); } .jq4585-accent-lines > div { position: absolute; top: 0; right: 0; left: 0; margin: auto; height: 100%; width: 100%; } .jq4585-accent-lines > div:nth-child(1) > div{ position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-lines-clr), transparent); opacity: 0; scale: 0; animation: accentload 2s ease-out 2.4s forwards; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1){ top: 6em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2){ top: 11em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(3){ top: 16em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(4){ top: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(5){ top: 29em; } .jq4585-accent-lines > div:nth-child(2) > div{ position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 1px; height: 100%; background: var(--accent-lines-clr); } @keyframes accentload { 0% { opacity: 0; scale: 0; } 100% { opacity: 1; scale: 1; } } .jq4585-accent-lines > div:nth-child(2) > div { opacity: 0; scale: 0; animation: accentload 2s ease-out 2s forwards; } .jq4585-accent-lines > div:nth-child(2) > div:nth-child(1){ left: 24em; } .jq4585-accent-lines > div:nth-child(2) > div:nth-child(2){ left: 34em; } .jq4585-accent-lines > div:nth-child(2) > div:nth-child(3){ right: 24em; } .jq4585-accent-lines > div:nth-child(2) > div:nth-child(4){ right: 34em; } .jq4585-accent-lines > div:nth-child(1) > div::before, .jq4585-accent-lines > div:nth-child(1) > div::after { content: ''; display: none; position: absolute; width: 0.2em; height: 0.2em; border-radius: 1em; background: #9dc3f7; left: 0; right: 0; margin: auto; translate: 0 -1px; opacity: 0; scale: 0; animation: accentload 2s ease-out 4.4s forwards; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(3)::before{ display: block; left: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(3)::after{ display: block; right: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(4)::before{ display: block; left: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(4)::after{ display: block; right: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(5)::before{ display: block; left: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(5)::after{ display: block; right: 24em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2)::before, .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2)::after{ display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2)::before{ right: 24em; rotate: 45deg; translate: -2.5em 2.5em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2)::after{ right: 24em; rotate: -45deg; translate: -2.5em 2.5em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1)::before, .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1)::after{ display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1)::before{ left: 24em; rotate: 45deg; translate: 2.5em 7.5em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1)::after{ left: 24em; rotate: -45deg; translate: 2.5em 7.5em; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2)::before, .jq4585-accent-lines > div:nth-child(1) > div:nth-child(2)::after { opacity: 0; scale: 0; animation: accentload2 2s ease-out 2.4s forwards; } .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1)::before, .jq4585-accent-lines > div:nth-child(1) > div:nth-child(1)::after { opacity: 0; scale: 0; animation: accentload3 2s ease-out 2.4s forwards; } @keyframes accentload2 { 0% { opacity: 0; scale: 0; transform: rotate(360deg); } 50% { scale: 0; } 100% { opacity: 0.12; scale: 1; transform: rotate(0deg); } } @keyframes accentload3 { 0% { opacity: 0; scale: 0; transform: rotate(-360deg); } 50% { scale: 0; } 100% { opacity: 0.12; scale: 1; transform: rotate(0deg); } } .jq4585-mountains { position: absolute; left: 0; right: 0; top: 31em; margin: auto; width: 100%; height: 10em; pointer-events: none; } .jq4585-mountains::before { content: ''; display: block; width: 100%; height: 500%; position: absolute; top: 0%; background: linear-gradient(90deg, #121521 0%, transparent 50%); background: linear-gradient(0deg, #121521 80%, transparent 90%); z-index: 2; } .jq4585-mountains > div { box-shadow: -1em -0.2em 0.4em -1.1em #c2ccff, inset 0em 0em 0em 2px #c2ccff, inset 0.2em 0.3em 0.2em -0.2em #c2ccff, inset 10.2em 10.3em 2em -10em #d4e6ff2f; background: #121521; z-index: 1; filter: brightness(0.8); position: absolute; left: 0; right: 0; margin: auto; width: 20em; height: 20em; rotate: 45deg; } .jq4585-mountains > div:nth-child(1) { bottom: -240%; translate: -6em 2em; animation: mountainload1 2s ease-out 2.4s forwards; } .jq4585-mountains > div:nth-child(2) { bottom: -240%; translate: -2em 0em; width: 14em; height: 20em; animation: mountainload2 2s ease-out 2.2s forwards; } .jq4585-mountains > div:nth-child(3) { bottom: -240%; translate: 6em 3em; animation: mountainload1 2s ease-out 2s forwards; } @keyframes mountainload1 { 0% { bottom: -240%; } 100% { bottom: -140%; } } @keyframes mountainload2 { 0% { bottom: -240%; } 100% { bottom: -108%; } } .jq4585-mountains > div::before { content: ''; display: block; background: repeating-radial-gradient( at 100% 100%, transparent 0%, #c2ccff22 2px, transparent 4px); width: 12em; height: 12em; position: absolute; left: 0; top: 0; border-bottom-right-radius: 100%; } .jq4585-hero-spacer { height: 40em; pointer-events: none; } .jq4585-content-section { position: relative; z-index: 1112; color: #fff; width: 100%; text-align: center; padding: 16em 0 12em 0; overflow: hidden; } .jq4585-content-section p.jq4585-subt { color: #d8ecf8be; font-size: 0.8em; font-weight: 200; position: relative; width: fit-content; margin: auto; } .jq4585-content-section h3 { margin: 0.4em 0 0.6em 0; font-size: 2.3em; font-weight: 600; color: #d8ecf8; text-shadow: 0 2px 16px rgba(174,207,242,.24); background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .jq4585-content-section p.jq4585-subp { color: #d8ecf8be; font-size: 1em; font-weight: 400; max-width: 26em; margin: auto; } .jq4585-content-section p.jq4585-subt::before, .jq4585-content-section p.jq4585-subt::after { position: absolute; top: 60%; display: block; content: ''; width: 5em; height: 1px; opacity: 0.5; } .jq4585-content-section p.jq4585-subt::before{ background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%); right: 120%; top: 50%; } .jq4585-content-section p.jq4585-subt::after { background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%); left: 120%; top: 50%; } .jq4585-content-section .jq4585-content-acc { position: absolute; left: 0; right: 0; top: 25%; margin: auto; display: flex; justify-content: center; } .jq4585-content-section .jq4585-content-acc div{ width: 10em; height: 10em; border-radius: 50%; box-shadow: -1em -0.2em 0.4em -1.1em #c2ccff, inset 0em 0em 0em 2px #c2ccff, inset 0.2em 0.3em 0.2em -0.2em #c2ccff, inset -1.2em 2.3em 2em -0.5em #d4e6ff2f; background: #121521; z-index: 1; filter: brightness(0.8); background: repeating-radial-gradient( at 50% 50%, transparent 0%, #c2ccff22 2px, transparent 4px); translate: -18em; } .jq4585-content-section .jq4585-content-acc div:nth-child(2){ translate: 18em 12em; border-radius: 2em; box-shadow: -1em -0.2em 0.4em -1.1em #c2ccff, inset 0em 0em 0em 2px #c2ccff, inset 0.2em 0.3em 0.2em -0.2em #c2ccff, inset 10.8em 11.3em 2em -10.5em #d4e6ff2f; } 

.leafs-panel--jq4585 {
	padding: 0 !important;
	margin-bottom: 12px;
}

/* 整卡统一为同一基底色 + 极轻高光，避免上下「两截」色差 */
.leafs-panel--jq4585.jq4585-shell {
	--jq4585-bg: #05060f;
	background-color: var(--jq4585-bg);
	background-image: radial-gradient(
		ellipse 110% 48% at 50% -8%,
		rgba(152, 192, 239, 0.06),
		transparent 42%
	);
}

.jq4585-shell {
	position: relative;
	border-radius: var(--leafs-radius-panel, 14px);
	overflow: hidden;
	border: 1px solid rgba(194, 204, 255, 0.12);
	box-shadow: var(--leafs-shadow-card, 0 8px 28px rgba(0, 0, 0, 0.12));
	isolation: isolate;
}

/* 侧栏卡片：接近原版比例高度，仅保留主视觉区 */
.jq4585-shell .jq4585-wrap {
	position: relative;
	--jq4585-fs: clamp(10px, 2.75cqw, 12.5px);
	font-size: var(--jq4585-fs);
	min-height: 31em;
	padding-bottom: 1.25em;
	--_factor: min(600px, 100%);
	--_size: min(var(--_factor), 100cqw);
	container-type: inline-size;
	background: transparent !important;
}

.jq4585-shell #leafsJq4585ParticleCanvas {
	left: 0;
	top: 0;
	height: 100%;
	z-index: 0;
	opacity: 0.78;
}

/* —— 侧栏精简：顶区仅圆点+聚光；底区居中 Contact；Eclipx 加大 —— */

.jq4585-shell .jq4585-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	padding: 1em 0.65em 1.25em;
	position: absolute;
	inset: 0 0 auto 0;
	width: 100%;
	opacity: 1 !important;
	translate: none !important;
	animation: none !important;
}

.jq4585-shell .jq4585-header > div.jq4585-mid-spot {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	margin: 0 auto !important;
}

.jq4585-shell .jq4585-mid-spot:hover ~ .jq4585-spotlight {
	animation: colorize 10s linear infinite;
}

/* 聚光：接近 jq4585 原版强度，略柔、不刺眼 */
.jq4585-shell .jq4585-header .jq4585-spotlight {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	margin: 0 auto !important;
	width: 100% !important;
	height: 42em !important;
	overflow: hidden !important;
	opacity: 1 !important;
	pointer-events: none !important;
}

.jq4585-shell .jq4585-header .jq4585-spotlight > div {
	top: 3em !important;
	width: min(34em, 100%) !important;
	height: max(38em, 58vh) !important;
	filter: blur(14px) opacity(0.52) saturate(1.02) !important;
	background-image: conic-gradient(
		from 0deg at 50% -5%,
		transparent 40%,
		rgba(150, 175, 220, 0.32) 47%,
		rgba(210, 228, 255, 0.58) 50%,
		rgba(150, 175, 220, 0.32) 53%,
		transparent 60%
	) !important;
}

/* 中层区块：略上移，靠近 notch */
.jq4585-shell .jq4585-heroSubP {
	top: 7.65em;
	opacity: 1 !important;
	transform: none;
}

.jq4585-shell .jq4585-heroSubP p {
	font-size: 0.82em;
	letter-spacing: 0.04em;
}

.jq4585-shell .jq4585-hero {
	top: 9.35em;
	max-height: none !important;
	height: 7.5em;
	width: 100%;
}

.jq4585-shell .jq4585-heroT {
	height: 7em !important;
	min-height: 0;
	padding-top: 0 !important;
	translate: none !important;
	opacity: 1 !important;
}

.jq4585-shell .jq4585-heroT > h2 {
	font-size: clamp(2.15rem, 12.5cqi, 3.15rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.02em;
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: 100%;
	padding: 0 0.35em;
	box-sizing: border-box;
	text-wrap: balance;
}

.jq4585-shell .jq4585-heroT > h2:nth-child(1) {
	z-index: 2;
}

.jq4585-shell .jq4585-heroT > h2:nth-child(2) {
	top: 0.06em;
	z-index: 1;
	filter: blur(10px) opacity(0.38) !important;
}

.jq4585-shell .jq4585-heroT__link {
	color: inherit;
	text-decoration: none;
}

.jq4585-shell .jq4585-heroT__link:hover {
	opacity: 0.92;
}

/* 后台「说明文案」：主标题与按钮之间 */
.jq4585-shell .jq4585-heroTagline {
	position: absolute;
	left: 0;
	right: 0;
	top: 16.95em;
	margin: 0 auto;
	max-width: 96%;
	padding: 0 0.65em;
	text-align: center;
	font-size: 0.78em;
	line-height: 1.4;
	color: rgba(216, 236, 248, 0.88);
	text-shadow: 0 1px 10px rgba(174, 207, 242, 0.22);
	z-index: 3;
	box-sizing: border-box;
}

.jq4585-shell .jq4585-heroTagline a {
	color: rgba(157, 195, 247, 0.95);
	text-decoration: none;
}

.jq4585-shell .jq4585-heroTagline a:hover {
	color: rgba(186, 215, 252, 0.98);
}

.jq4585-shell .jq4585-wrap--tagline .jq4585-brandbar {
	top: 19.45em;
}

/* 山脉：底边贴齐容器底部，三角形而非旋转正方形（菱形） */
.jq4585-shell .jq4585-mountains {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: 7.25em;
	margin: 0;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
	isolation: isolate;
}

/* 叠在底层，勿盖在山体之上，否则会吃掉峰顶的 box-shadow / 描边 */
.jq4585-shell .jq4585-mountains::before {
	z-index: 0;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(5, 6, 15, 0.04) 32%,
		rgba(5, 6, 15, 0.2) 68%,
		rgba(5, 6, 15, 0.34) 100%
	) !important;
}

.jq4585-shell .jq4585-mountains > div {
	rotate: 0deg !important;
	position: absolute;
	margin: 0 !important;
	left: auto;
	right: auto;
	bottom: 0 !important;
	width: 12em !important;
	height: 6.25em !important;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background: linear-gradient(165deg, #161a2e 0%, #0f111f 45%, #0c0e18 100%) !important;
	box-shadow:
		0 0 0 1px rgba(220, 235, 255, 0.55),
		0 0 0 2px rgba(140, 170, 230, 0.12),
		-0.35em 0.2em 0.85em -0.45em rgba(194, 204, 255, 0.45),
		inset 0 1px 0 0 rgba(240, 248, 255, 0.28),
		inset 0 -1px 0 0 rgba(194, 204, 255, 0.28) !important;
	/* drop-shadow 随 clip-path 轮廓走，强化两腰 + 峰顶「轮廓光」 */
	filter: brightness(1.06)
		drop-shadow(0 -1px 0 rgba(230, 242, 255, 0.85))
		drop-shadow(0 -2px 5px rgba(180, 205, 255, 0.5))
		drop-shadow(-3px 2px 4px rgba(160, 188, 240, 0.25))
		drop-shadow(3px 2px 4px rgba(160, 188, 240, 0.25)) !important;
	opacity: 0;
	animation: jq4585-mtn-in 1.8s ease-out 1.6s forwards !important;
	translate: none !important;
	z-index: 1;
}

.jq4585-shell .jq4585-mountains > div::before {
	content: '';
	position: absolute;
	inset: 0;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	border-radius: 0;
	width: 100%;
	height: 100%;
	background: repeating-radial-gradient(
		circle at 50% 100%,
		transparent 0,
		transparent 2px,
		rgba(210, 224, 255, 0.22) 2px,
		rgba(210, 224, 255, 0.22) 3px,
		transparent 4px
	);
	opacity: 0.95;
	pointer-events: none;
	z-index: 0;
}

/* 峰缘高光线（压在纹理之上、不参与布局） */
.jq4585-shell .jq4585-mountains > div::after {
	content: '';
	position: absolute;
	inset: 0;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(
		185deg,
		rgba(240, 248, 255, 0.55) 0%,
		rgba(200, 218, 255, 0.18) 8%,
		transparent 22%
	);
	opacity: 0.9;
	mix-blend-mode: screen;
}

/* 左 / 中 / 右三座三角峰 */
.jq4585-shell .jq4585-mountains > div:nth-child(1) {
	left: 50%;
	width: 11em !important;
	height: 5.1em !important;
	margin-left: -12.25em !important;
	z-index: 1;
	bottom: 0 !important;
	animation: jq4585-mtn-in 1.8s ease-out 1.6s forwards !important;
}

.jq4585-shell .jq4585-mountains > div:nth-child(2) {
	left: 50%;
	width: 15em !important;
	height: 6.8em !important;
	margin-left: -7.5em !important;
	z-index: 3;
	bottom: 0 !important;
	animation: jq4585-mtn-in 1.8s ease-out 1.6s forwards !important;
	box-shadow:
		0 0 0 1px rgba(230, 240, 255, 0.62),
		0 0 0 2px rgba(140, 170, 230, 0.14),
		-0.45em 0.25em 0.85em -0.4em rgba(194, 204, 255, 0.5),
		inset 0 1px 0 0 rgba(248, 252, 255, 0.32),
		inset 0 -1px 0 0 rgba(194, 204, 255, 0.32) !important;
}

.jq4585-shell .jq4585-mountains > div:nth-child(3) {
	left: 50%;
	width: 10em !important;
	height: 4.85em !important;
	margin-left: 3.5em !important;
	z-index: 2;
	bottom: 0 !important;
	animation: jq4585-mtn-in 1.8s ease-out 1.6s forwards !important;
}

@keyframes jq4585-mtn-in {
	from {
		opacity: 0;
		transform: translateY(0.65em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 仅居中 Contact：在标题区下方、三角峰之上（峰顶约在卡片下 1/4 内） */
.jq4585-shell .jq4585-brandbar {
	z-index: 4;
	position: absolute;
	left: 0;
	right: 0;
	top: 17.15em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.65em;
	margin: 0 auto;
	padding: 0.35em 0.85em 0.85em;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

/* 侧栏内 button / a 共用一套视觉（原版只写了 button，链接会丢 ::before 与 hover 动效） */
.jq4585-shell .jq4585-brandbar .jq4585-contact-btn {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	flex: 0 0 auto;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8em;
	height: 2.4em;
	min-height: 2.4em;
	padding: 0.3em 0 0;
	cursor: pointer;
	border-radius: 20em;
	border: 1px solid #c2ccff33;
	background: #121521;
	color: #9dc3f7;
	white-space: nowrap;
	overflow: visible;
	transition: background 0.5s, transform 0.5s;
	-webkit-tap-highlight-color: transparent;
}

.jq4585-shell .jq4585-brandbar button.jq4585-contact-btn {
	appearance: none;
	font: inherit;
	line-height: inherit;
}

.jq4585-shell .jq4585-brandbar a.jq4585-contact-btn {
	text-decoration: none;
	color: #9dc3f7;
}

.jq4585-shell .jq4585-brandbar a.jq4585-contact-btn::before,
.jq4585-shell .jq4585-brandbar button.jq4585-contact-btn::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 20em;
	width: 100%;
	height: 100%;
	background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);
	opacity: 0.1;
	transition: all 0.4s ease-in-out;
	pointer-events: none;
	z-index: 0;
}

.jq4585-shell .jq4585-brandbar a.jq4585-contact-btn:hover::before,
.jq4585-shell .jq4585-brandbar button.jq4585-contact-btn:hover::before {
	background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);
	opacity: 0.3;
}

.jq4585-shell .jq4585-brandbar a.jq4585-contact-btn:hover .jq4585-glow,
.jq4585-shell .jq4585-brandbar button.jq4585-contact-btn:hover .jq4585-glow {
	--loop-cycle: 2s;
}

.jq4585-shell .jq4585-brandbar a.jq4585-contact-btn:hover .jq4585-glow::after,
.jq4585-shell .jq4585-brandbar a.jq4585-contact-btn:hover .jq4585-glow::before,
.jq4585-shell .jq4585-brandbar button.jq4585-contact-btn:hover .jq4585-glow::after,
.jq4585-shell .jq4585-brandbar button.jq4585-contact-btn:hover .jq4585-glow::before {
	opacity: 0.6;
}

.jq4585-shell .jq4585-brandbar .jq4585-contact-btn .jq4585-contact-btn-content {
	position: relative;
	z-index: 1;
}

.jq4585-shell .jq4585-heroSubP p {
	max-width: 100%;
	padding: 0 0.5em;
	box-sizing: border-box;
}

/* —— 日间模式（html[data-leafs-theme="light"]）：浅底、深字、暖色聚光与山体 —— */
html[data-leafs-theme="light"] .leafs-panel--jq4585.jq4585-shell {
	--jq4585-bg: #eef1f8;
	background-color: var(--jq4585-bg);
	background-image: radial-gradient(
		ellipse 100% 55% at 50% -12%,
		color-mix(in srgb, var(--leafs-brand, #0f766e) 12%, transparent),
		transparent 48%
	);
	border-color: rgba(15, 118, 110, 0.14);
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-header > div.jq4585-mid-spot {
	box-shadow: 0 0 0.85em rgba(15, 118, 110, 0.25);
	background: #1a1d28;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-header .jq4585-spotlight > div {
	filter: blur(14px) opacity(0.48) saturate(1.05) !important;
	background-image: conic-gradient(
		from 0deg at 50% -5%,
		transparent 38%,
		rgba(255, 248, 220, 0.45) 47%,
		rgba(255, 252, 235, 0.72) 50%,
		rgba(255, 248, 220, 0.45) 53%,
		transparent 62%
	) !important;
}

html[data-leafs-theme="light"] .jq4585-shell #leafsJq4585ParticleCanvas {
	opacity: 0.55;
	filter: contrast(0.92);
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-heroSubP p {
	color: #475569 !important;
	text-shadow: none;
	background: none !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
	-webkit-text-fill-color: unset !important;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-heroT > h2 {
	color: #0f172a;
	background: linear-gradient(180deg, #1e293b 12%, #0f172a 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-heroT > h2:nth-child(2) {
	filter: blur(10px) opacity(0.32) !important;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-heroTagline {
	color: rgba(51, 65, 85, 0.88);
	text-shadow: none;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-heroTagline a {
	color: var(--leafs-brand, #0f766e);
	text-decoration-color: color-mix(in srgb, var(--leafs-brand, #0f766e) 40%, transparent);
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-mountains::before {
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(238, 241, 248, 0.2) 45%,
		rgba(226, 232, 242, 0.55) 100%
	) !important;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-mountains > div {
	background: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
	box-shadow:
		0 0 0 1px rgba(15, 118, 110, 0.35),
		0 0 0 2px rgba(255, 255, 255, 0.65),
		0 0.35em 1em rgba(15, 23, 42, 0.08),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.85) !important;
	filter: brightness(1.02)
		drop-shadow(0 -1px 0 rgba(15, 118, 110, 0.28))
		drop-shadow(0 0 8px rgba(15, 118, 110, 0.1)) !important;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-mountains > div::before {
	background: repeating-radial-gradient(
		circle at 50% 100%,
		transparent 0,
		transparent 2px,
		rgba(15, 118, 110, 0.14) 2px,
		rgba(15, 118, 110, 0.14) 3px,
		transparent 4px
	);
	opacity: 1;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-mountains > div::after {
	background: linear-gradient(
		185deg,
		rgba(255, 255, 255, 0.75) 0%,
		rgba(226, 232, 240, 0.35) 10%,
		transparent 26%
	);
	mix-blend-mode: soft-light;
	opacity: 0.85;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-mountains > div:nth-child(2) {
	box-shadow:
		0 0 0 1px rgba(15, 118, 110, 0.32),
		0 0.4em 1.1em rgba(15, 23, 42, 0.1),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-brandbar a.jq4585-contact-btn,
html[data-leafs-theme="light"] .jq4585-shell .jq4585-brandbar button.jq4585-contact-btn {
	background: #fff;
	border-color: color-mix(in srgb, var(--leafs-brand, #0f766e) 28%, #cbd5e1);
	color: #0f172a;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-brandbar a.jq4585-contact-btn::before,
html[data-leafs-theme="light"] .jq4585-shell .jq4585-brandbar button.jq4585-contact-btn::before {
	background: color-mix(in srgb, var(--leafs-brand, #0f766e) 22%, transparent)
		radial-gradient(farthest-side at 50% 100%, var(--leafs-brand, #0f766e), transparent);
	opacity: 0.12;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-brandbar a.jq4585-contact-btn:hover::before,
html[data-leafs-theme="light"] .jq4585-shell .jq4585-brandbar button.jq4585-contact-btn:hover::before {
	opacity: 0.22;
}

html[data-leafs-theme="light"] .jq4585-shell .jq4585-contact-btn-content {
	background: linear-gradient(180deg, #0f172a, #334155);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

html[data-leafs-theme="light"] .jq4585-wrap.gold .jq4585-header .jq4585-spotlight {
	filter: invert(1) brightness(4.2) opacity(0.42);
}