@charset "UTF-8";

/* ============================================================
   商家入驻 SJ3 — 金色奢华 · #C8A86E · 大胆布局
   ============================================================ */

:root{
	--sj-gold:#C8A86E;
	--sj-gold-light:#E8D5B5;
	--sj-gold-dark:#A08050;
	--sj-gold-deep:#8B6914;
	--sj-dark:#0D0B09;
	--sj-dark2:#1A1510;
	--sj-dark3:#252018;
	--sj-cream:#FDF9F2;
	--sj-text:#1A1510;
	--sj-muted:#8B7D6B;
	--sj-glass:rgba(255,255,255,.06);
	--sj-glass-border:rgba(200,168,110,.25);
}

.sj3-page{
	background:var(--sj-dark);
	font-family:"PingFang SC","SF Pro Display","Microsoft YaHei",sans-serif;
	padding-bottom:64px;
	overflow-x:hidden;
}

/* ========== 英雄区 — 纯 CSS 奢华背景（无图片） ========== */
.sj3-hero{
	position:relative;
	min-height:500px;
	margin-bottom:0;
	overflow:hidden;
}
.sj3-hero__bg{
	position:absolute;inset:0;z-index:0;
	background:radial-gradient(ellipse 120% 80% at 50% -10%,#2a2218 0%,var(--sj-dark) 55%);
}
.sj3-hero__base{
	position:absolute;inset:0;
	background:
		linear-gradient(135deg,transparent 40%,rgba(200,168,110,.04) 50%,transparent 60%),
		linear-gradient(225deg,transparent 30%,rgba(160,128,80,.03) 45%,transparent 55%);
}
.sj3-hero__mesh{
	position:absolute;inset:0;
	background:
		radial-gradient(ellipse 55% 45% at 15% 25%,rgba(200,168,110,.18) 0%,transparent 58%),
		radial-gradient(ellipse 45% 40% at 85% 65%,rgba(160,128,80,.12) 0%,transparent 52%),
		radial-gradient(ellipse 30% 25% at 50% 50%,rgba(200,168,110,.06) 0%,transparent 50%);
	animation:sj3Mesh 12s ease-in-out infinite alternate;
}
@keyframes sj3Mesh{0%{opacity:.75}100%{opacity:1;transform:scale(1.03)}}

.sj3-hero__grid{
	position:absolute;inset:0;opacity:.4;
	background-image:
		linear-gradient(rgba(200,168,110,.06) 1px,transparent 1px),
		linear-gradient(90deg,rgba(200,168,110,.06) 1px,transparent 1px);
	background-size:56px 56px;
	mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 15%,transparent 75%);
	animation:sj3GridDrift 24s linear infinite;
}
@keyframes sj3GridDrift{0%{transform:translateY(0)}100%{transform:translateY(56px)}}

.sj3-hero__floor{
	position:absolute;left:-20%;right:-20%;bottom:-30%;height:55%;
	background:
		linear-gradient(180deg,transparent,rgba(200,168,110,.03) 30%,rgba(200,168,110,.08) 100%);
	transform:perspective(400px) rotateX(68deg);
	transform-origin:center bottom;
	background-image:
		linear-gradient(rgba(200,168,110,.08) 1px,transparent 1px),
		linear-gradient(90deg,rgba(200,168,110,.08) 1px,transparent 1px);
	background-size:60px 60px;
	mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 80%,transparent 100%);
	opacity:.5;
}

.sj3-hero__beam{
	position:absolute;width:2px;height:50vh;
	background:linear-gradient(180deg,transparent,rgba(200,168,110,.35),transparent);
	opacity:.35;pointer-events:none;
}
.sj3-hero__beam--1{left:18%;top:5%;transform:rotate(12deg);animation:sj3Beam 8s ease-in-out infinite;}
.sj3-hero__beam--2{right:22%;top:0;transform:rotate(-10deg);animation:sj3Beam 10s ease-in-out infinite 3s;}
@keyframes sj3Beam{0%,100%{opacity:.2;height:40vh}50%{opacity:.5;height:55vh}}

.sj3-hero__aurora{
	position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none;
}
.sj3-hero__aurora--1{width:45vw;height:45vw;background:radial-gradient(circle,rgba(200,168,110,.28),transparent 70%);top:-12%;right:-5%;animation:sj3Aurora 16s ease-in-out infinite;}
.sj3-hero__aurora--2{width:35vw;height:35vw;background:radial-gradient(circle,rgba(139,105,20,.2),transparent 70%);bottom:-8%;left:-5%;animation:sj3Aurora 20s ease-in-out infinite reverse;}
@keyframes sj3Aurora{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,4vh) scale(1.08)}}

.sj3-hero__particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.sj3-hero__particles span{
	position:absolute;width:4px;height:4px;border-radius:50%;
	background:var(--sj-gold);box-shadow:0 0 10px var(--sj-gold);
	opacity:.5;animation:sj3Particle 6s ease-in-out infinite;
}
.sj3-hero__particles span:nth-child(1){left:12%;top:25%;animation-delay:0s;}
.sj3-hero__particles span:nth-child(2){left:28%;top:60%;animation-delay:1s;width:3px;height:3px;}
.sj3-hero__particles span:nth-child(3){left:55%;top:18%;animation-delay:2s;}
.sj3-hero__particles span:nth-child(4){left:72%;top:45%;animation-delay:.5s;width:5px;height:5px;}
.sj3-hero__particles span:nth-child(5){left:88%;top:30%;animation-delay:1.5s;}
.sj3-hero__particles span:nth-child(6){left:40%;top:75%;animation-delay:2.5s;width:3px;height:3px;}
@keyframes sj3Particle{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-18px);opacity:.8}}

.sj3-hero__inner{
	position:relative;z-index:3;
	max-width:1200px;margin:0 auto;
	padding:56px 24px 64px;
	display:flex;align-items:center;justify-content:space-between;gap:48px;
	min-height:480px;box-sizing:border-box;
}

.sj3-hero__panel{
	flex:1;max-width:560px;
	padding:36px 40px;
	background:rgba(20,16,12,.65);
	backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
	border:1px solid var(--sj-glass-border);
	border-radius:24px;
	box-shadow:0 32px 64px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
	animation:sj3PanelIn 1s ease both;
}
@keyframes sj3PanelIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.sj3-hero__tag{
	display:inline-block;padding:6px 16px;margin-bottom:18px;
	font-size:11px;font-weight:700;letter-spacing:3px;
	color:var(--sj-gold);
	background:rgba(200,168,110,.1);border:1px solid var(--sj-glass-border);
	border-radius:20px;
}
.sj3-hero__title{
	margin:0 0 14px;font-size:36px;font-weight:800;line-height:1.2;color:#fff;
}
.sj3-hero__title em{
	font-style:normal;
	background:linear-gradient(135deg,var(--sj-gold-light),var(--sj-gold));
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sj3-hero__user{
	margin:0 0 20px;font-size:15px;color:rgba(245,237,224,.7);line-height:1.6;
}
.sj3-hero__user strong{color:var(--sj-gold-light);}
.sj3-hero__tips{margin:0 0 28px;padding:0;list-style:none;}
.sj3-hero__tips li{
	position:relative;padding-left:20px;margin-bottom:10px;
	font-size:14px;line-height:1.65;color:rgba(245,237,224,.6);
}
.sj3-hero__tips li i{
	position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
	background:linear-gradient(135deg,var(--sj-gold),var(--sj-gold-dark));
	box-shadow:0 0 8px rgba(200,168,110,.5);
}
.sj3-hero__tips strong{color:var(--sj-gold-light);font-weight:600;}

.sj3-hero__actions{display:flex;flex-wrap:wrap;gap:14px;}
.sj3-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:150px;padding:14px 32px;border-radius:14px;
	font-size:15px;font-weight:700;text-decoration:none;
	border:0;cursor:pointer;transition:transform .25s,box-shadow .25s;
	letter-spacing:1px;
}
.sj3-btn--gold{
	color:var(--sj-dark);
	background:linear-gradient(135deg,var(--sj-gold) 0%,var(--sj-gold-dark) 50%,var(--sj-gold-deep) 100%);
	background-size:200% 100%;
	box-shadow:0 8px 32px rgba(200,168,110,.4),inset 0 1px 0 rgba(255,255,255,.25);
}
.sj3-btn--gold:hover{
	transform:translateY(-3px);
	box-shadow:0 14px 40px rgba(200,168,110,.55);
	background-position:100% 0;
	color:var(--sj-dark);text-decoration:none;
}
.sj3-btn--outline{
	color:var(--sj-gold-light);
	background:transparent;
	border:1px solid var(--sj-glass-border);
}
.sj3-btn--outline:hover{
	background:rgba(200,168,110,.1);
	color:var(--sj-gold);text-decoration:none;
}
.sj3-btn--disabled{
	color:rgba(245,237,224,.35);
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	cursor:not-allowed;pointer-events:none;
}

/* 右侧 3D 装饰 */
.sj3-hero__visual{
	flex-shrink:0;width:280px;height:280px;
	display:flex;align-items:center;justify-content:center;
}
.sj3-orbit{
	position:relative;width:240px;height:240px;
	transform-style:preserve-3d;
	animation:sj3OrbitSpin 20s linear infinite;
}
@keyframes sj3OrbitSpin{from{transform:rotateX(60deg) rotateZ(0)}to{transform:rotateX(60deg) rotateZ(360deg)}}
.sj3-orbit__ring{
	position:absolute;inset:0;border-radius:50%;
	border:2px solid rgba(200,168,110,.35);
}
.sj3-orbit__ring--1{box-shadow:0 0 24px rgba(200,168,110,.2);}
.sj3-orbit__ring--2{inset:24px;border-color:rgba(200,168,110,.15);border-style:dashed;}
.sj3-orbit__core{
	position:absolute;left:50%;top:50%;
	width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
	background:radial-gradient(circle at 35% 30%,var(--sj-gold-light),var(--sj-gold) 50%,var(--sj-gold-dark));
	box-shadow:0 0 40px rgba(200,168,110,.6);
	animation:sj3CorePulse 3s ease-in-out infinite;
}
@keyframes sj3CorePulse{0%,100%{box-shadow:0 0 30px rgba(200,168,110,.4)}50%{box-shadow:0 0 60px rgba(200,168,110,.7)}}

/* ========== 服务保障条 ========== */
.sj3-trust{
	position:relative;z-index:2;
	max-width:1200px;margin:-32px auto 40px;padding:0 24px;
}
.sj3-trust__grid{
	display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
	padding:24px 28px;
	background:rgba(26,21,16,.85);
	backdrop-filter:blur(20px);
	border:1px solid var(--sj-glass-border);
	border-radius:20px;
	box-shadow:0 20px 48px rgba(0,0,0,.35);
}
.sj3-trust__item{
	display:flex;align-items:center;gap:14px;
	padding:12px 8px;
}
.sj3-trust__ico{
	width:48px;height:48px;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
	border-radius:14px;
	background:linear-gradient(135deg,rgba(200,168,110,.2),rgba(160,128,80,.08));
	border:1px solid var(--sj-glass-border);
	color:var(--sj-gold);
}
.sj3-trust__ico svg{width:22px;height:22px;}
.sj3-trust__item strong{
	display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:2px;
}
.sj3-trust__item span{font-size:12px;color:rgba(245,237,224,.45);}

/* ========== 主内容 ========== */
.sj3-main{
	max-width:1200px;margin:0 auto;padding:0 24px;
}

.sj3-block{
	margin-bottom:32px;
	padding:36px 40px 40px;
	background:rgba(26,21,16,.7);
	backdrop-filter:blur(16px);
	border:1px solid var(--sj-glass-border);
	border-radius:24px;
	box-shadow:0 24px 56px rgba(0,0,0,.3);
}
.sj3-block__head{margin-bottom:32px;}
.sj3-block__label{
	display:block;font-size:10px;font-weight:700;letter-spacing:4px;
	color:var(--sj-gold);margin-bottom:8px;
}
.sj3-block__head h2{
	margin:0 0 8px;font-size:26px;font-weight:800;color:#fff;
}
.sj3-block__head p{margin:0;font-size:14px;color:rgba(245,237,224,.45);}

/* ========== 全新步骤条 ========== */
.sj3-timeline__header{margin-bottom:40px;}

.sj3-timeline__status{
	display:flex;align-items:center;justify-content:space-between;
	margin-bottom:14px;
}
.sj3-timeline__status-label{
	font-size:13px;color:rgba(245,237,224,.45);letter-spacing:1px;
}
.sj3-timeline__status strong{
	font-size:18px;font-weight:800;color:#fff;
}
.sj3-timeline__status strong em{
	font-style:normal;
	background:linear-gradient(135deg,var(--sj-gold-light),var(--sj-gold));
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.sj3-timeline__track{
	position:relative;height:6px;border-radius:999px;overflow:visible;
}
.sj3-timeline__track-bg{
	position:absolute;inset:0;border-radius:999px;
	background:rgba(255,255,255,.06);
}
.sj3-timeline__track-fill{
	position:relative;z-index:1;height:100%;border-radius:999px;
	background:linear-gradient(90deg,var(--sj-gold-dark),var(--sj-gold),var(--sj-gold-light));
	box-shadow:0 0 16px rgba(200,168,110,.5);
	transition:width .6s ease;
}
.sj3-timeline__track-glow{
	position:absolute;top:50%;z-index:2;
	width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
	background:var(--sj-gold);
	box-shadow:0 0 20px var(--sj-gold),0 0 40px rgba(200,168,110,.4);
	animation:sj3GlowPulse 2s ease-in-out infinite;
	transition:left .6s ease;
}
@keyframes sj3GlowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.sj3-timeline__steps{
	display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
	margin:0;padding:48px 0 0;list-style:none;
	position:relative;
}
.sj3-timeline__steps::before{
	content:'';position:absolute;
	top:24px;left:10%;right:10%;height:2px;
	background:linear-gradient(90deg,transparent,rgba(200,168,110,.25) 15%,rgba(200,168,110,.25) 85%,transparent);
	pointer-events:none;
}

.sj3-step{
	position:relative;display:flex;flex-direction:column;align-items:center;
	text-align:center;
}
.sj3-step__node{
	position:relative;z-index:2;
	width:52px;height:52px;margin-bottom:20px;
	display:flex;align-items:center;justify-content:center;
}
.sj3-step__num{
	position:relative;z-index:2;
	display:flex;align-items:center;justify-content:center;
	width:48px;height:48px;border-radius:50%;
	font-size:14px;font-weight:800;
	color:rgba(245,237,224,.4);
	background:var(--sj-dark3);
	border:2px solid rgba(200,168,110,.15);
	transition:all .35s ease;
}
.sj3-step__pulse{
	position:absolute;inset:0;border-radius:50%;
	border:2px solid var(--sj-gold);
	opacity:0;animation:none;
}
.sj3-step.is-active .sj3-step__num{
	color:var(--sj-dark);
	background:linear-gradient(135deg,var(--sj-gold-light),var(--sj-gold),var(--sj-gold-dark));
	border-color:transparent;
	box-shadow:0 0 24px rgba(200,168,110,.5),0 8px 24px rgba(0,0,0,.3);
	transform:scale(1.08);
}
.sj3-step.is-active .sj3-step__pulse{
	opacity:1;
	animation:sj3StepPulse 2s ease-out infinite;
}
@keyframes sj3StepPulse{
	0%{transform:scale(1);opacity:.8}
	100%{transform:scale(1.6);opacity:0}
}

.sj3-step__card{
	width:100%;padding:22px 14px 18px;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(200,168,110,.1);
	border-radius:18px;
	transition:all .35s ease;
}
.sj3-step__ico{
	width:40px;height:40px;margin:0 auto 14px;
	display:flex;align-items:center;justify-content:center;
	border-radius:12px;
	background:rgba(200,168,110,.08);
	color:rgba(200,168,110,.5);
	transition:all .35s;
}
.sj3-step__ico svg{width:22px;height:22px;}
.sj3-step__card h4{
	margin:0 0 6px;font-size:14px;font-weight:700;
	color:rgba(245,237,224,.7);line-height:1.35;
}
.sj3-step__card p{
	margin:0;font-size:12px;line-height:1.5;
	color:rgba(245,237,224,.35);
}
.sj3-step.is-active .sj3-step__card{
	background:rgba(200,168,110,.08);
	border-color:var(--sj-glass-border);
	box-shadow:0 12px 32px rgba(0,0,0,.25),0 0 0 1px rgba(200,168,110,.1) inset;
	transform:translateY(-6px);
}
.sj3-step.is-active .sj3-step__ico{
	background:linear-gradient(135deg,rgba(200,168,110,.25),rgba(160,128,80,.1));
	color:var(--sj-gold);
}
.sj3-step.is-active .sj3-step__card h4{color:var(--sj-gold-light);}
.sj3-step.is-active .sj3-step__card p{color:rgba(245,237,224,.55);}

.sj3-step:hover .sj3-step__card{
	border-color:rgba(200,168,110,.2);
	transform:translateY(-3px);
}

/* ========== 入驻指南 ========== */
.sj3-guide.wst-tab-box{width:100%!important;margin:0!important;background:transparent!important;}
.sj3-guide__nav{margin-bottom:20px;}
.sj3-guide .wst-tab-nav{
	display:flex!important;flex-wrap:wrap;gap:10px;
	height:auto!important;width:100%!important;
	border:0!important;background:transparent!important;
	padding:0!important;margin:0!important;float:none!important;
}
.sj3-guide .wst-tab-nav li{
	width:auto!important;float:none!important;
	padding:10px 22px!important;margin:0!important;
	border:1px solid var(--sj-glass-border)!important;
	border-radius:999px!important;
	line-height:1.4!important;font-size:14px!important;
	color:rgba(245,237,224,.5)!important;
	background:rgba(255,255,255,.03)!important;
	transition:all .25s;cursor:pointer;
}
.sj3-guide .wst-tab-nav li:hover{
	color:var(--sj-gold)!important;
	border-color:rgba(200,168,110,.35)!important;
}
.sj3-guide .wst-tab-nav li.on{
	color:var(--sj-dark)!important;font-weight:700!important;
	border-color:transparent!important;
	background:linear-gradient(135deg,var(--sj-gold),var(--sj-gold-dark))!important;
	box-shadow:0 4px 20px rgba(200,168,110,.35)!important;
}
.sj3-guide .wst-tab-content{
	padding:28px 32px!important;width:94%!important;
	min-height:260px!important;
	border:1px solid var(--sj-glass-border)!important;
	border-radius:18px!important;
	background:rgba(255,255,255,.04)!important;
}
.sj3-guide .wst-tab-item{
	font-size:15px;line-height:1.9;
	color:#f5ede0!important;
}
/* 覆盖 CMS 文章内联 color:#333 / #999 / 白底等，保证暗色主题可读 */
.sj3-guide .wst-tab-item,
.sj3-guide .wst-tab-item p,
.sj3-guide .wst-tab-item span,
.sj3-guide .wst-tab-item div,
.sj3-guide .wst-tab-item li,
.sj3-guide .wst-tab-item td,
.sj3-guide .wst-tab-item th,
.sj3-guide .wst-tab-item .MsoNormal{
	color:rgba(245,237,224,.9)!important;
	background:transparent!important;
	background-color:transparent!important;
}
.sj3-guide .wst-tab-item strong,
.sj3-guide .wst-tab-item b,
.sj3-guide .wst-tab-item h1,
.sj3-guide .wst-tab-item h2,
.sj3-guide .wst-tab-item h3,
.sj3-guide .wst-tab-item h4{
	color:var(--sj-gold-light)!important;
	font-weight:700!important;
}
.sj3-guide .wst-tab-item img{max-width:100%;height:auto;border-radius:10px;}
.sj3-guide .wst-tab-item a{
	color:var(--sj-gold)!important;
	text-decoration:underline;
	text-underline-offset:3px;
}
.sj3-guide .wst-tab-item a:hover{color:var(--sj-gold-light)!important;}
.sj3-guide .wst-tab-item table{
	width:100%!important;
	border-collapse:collapse!important;
	margin:16px 0!important;
	border:1px solid var(--sj-glass-border)!important;
	border-radius:12px!important;
	overflow:hidden;
}
.sj3-guide .wst-tab-item table td,
.sj3-guide .wst-tab-item table th{
	border:1px solid var(--sj-glass-border)!important;
	padding:10px 12px!important;
	background:rgba(255,255,255,.03)!important;
	color:rgba(245,237,224,.88)!important;
}
.sj3-guide .wst-tab-item table th{
	background:rgba(200,168,110,.14)!important;
	color:var(--sj-gold-light)!important;
}

/* ========== 响应式 ========== */
@media (max-width:1024px){
	.sj3-hero__inner{flex-direction:column;text-align:center;min-height:auto;padding:40px 20px 48px;}
	.sj3-hero__panel{max-width:100%;padding:28px 24px;}
	.sj3-hero__visual{display:none;}
	.sj3-trust__grid{grid-template-columns:repeat(2,1fr);}
	.sj3-timeline__steps{grid-template-columns:1fr;gap:20px;padding-top:24px;}
	.sj3-timeline__steps::before{display:none;}
	.sj3-step{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;}
	.sj3-step__node{margin:0;flex-shrink:0;}
	.sj3-step__card{flex:1;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;text-align:left;}
	.sj3-step__ico{margin:0;flex-shrink:0;}
	.sj3-block{padding:24px 20px 28px;}
}
@media (max-width:600px){
	.sj3-trust{margin:-20px 16px 32px;padding:0 16px;}
	.sj3-trust__grid{grid-template-columns:1fr;padding:16px;}
	.sj3-main{padding:0 16px;}
	.sj3-hero__title{font-size:28px;}
	.sj3-hero__actions{justify-content:center;}
	.sj3-btn{min-width:130px;padding:12px 24px;}
}