:root{
	--border: rgba(0,0,0,.08);
	--muted: rgba(0,0,0,.55);
	--card-shadow: 0 18px 50px rgba(0,0,0,.10);
}

html, body {
	height: 100%;
}

body{
	background: #fff;
	color: #111;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Page layout */
.page{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.main{
	flex: 1;
	display: flex;
	width: 100%;
}
.left-col{
	width: 45%;
	padding: 48px 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.right-col{
	flex: 1;
	position: relative;
	border-left: 1px solid rgba(0,0,0,.08);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 28px;
	background: #0b0f1a; /* 深色底更科技 */
}

/* 微弱网格 */
.right-col::before{
	content:"";
	position:absolute;
	inset:0;
	background:
	linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity:.6;
	pointer-events:none;
}

/* 渐变光晕层 */
.right-col::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(80,120,255,.35), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0,255,200,.25), transparent 60%),
    radial-gradient(circle at 60% 20%, rgba(160,0,255,.20), transparent 60%);
  filter: blur(60px);
  animation: glowMove 18s ease-in-out infinite alternate;
  pointer-events:none;
}

/* 慢速流动动画 */
@keyframes glowMove{
  0%{
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  50%{
    transform: translate3d(2%, 3%, 0) scale(1.05);
  }
  100%{
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
}



/* Left content */
.left-wrap{
	width: 100%;
	max-width: 500px;
}
.rotator{
	height: 24px;
	color: rgba(0,0,0,.45);
	font-size: 14px;
	letter-spacing: .2px;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	gap: 10px;
	user-select: none;
}
.rotator .dot{
	width: 8px; height: 8px; border-radius: 99px;
	background: rgba(0,0,0,.22);
}

.left-logo{
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 5px;
}

.left-logo-icon {
    width: 45px;
    vertical-align: text-bottom;
}

.left-title{
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}
.left-subtitle{
	color: var(--muted);
	margin-bottom: 22px;
}

.form-card{
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 30px 20px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.form-label{
	font-size: 13px;
	color: rgba(0,0,0,.8);
	margin-bottom: 10px;
}
.input{
	border-radius: 12px !important;
	height: 46px;
}
.btn-continue{
	height: 46px;
	border-radius: 12px;
	font-weight: 600;
}

.demo-box{
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.demo-left small{ color: var(--muted); display:block; }
.avatars{
	display:flex;
	align-items:center;
}
.avatar{
	width: 32px; height: 32px;
	border-radius: 999px;
	border: 2px solid #fff;
	margin-left: -10px;
	box-shadow: 0 8px 18px rgba(0,0,0,.08);
	object-fit: cover;
	background: #f2f2f2;
}
.avatar:first-child{ margin-left: 0; }

/* Testimonial carousel with prev/next previews */
.t-wrap{
	position: relative;
	width: min(980px, 100%);
	z-index: 2;
}
.t-stage{
	position: relative;
	height: 360px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.t-card{
	width: min(640px, 92%);
	border-radius: 18px;
	background:#fff;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: var(--card-shadow);
	padding: 26px 26px 18px;
	position: absolute;
	transition: transform .55s ease, opacity .55s ease, filter .55s ease;
}
.t-card .quote{
	font-size: 18px;
	line-height: 1.55;
	letter-spacing: -0.01em;
	margin: 0 0 18px 0;
	color: rgba(0,0,0,.88);
}
.t-meta{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
}
.t-person{
	display:flex;
	align-items:center;
	gap: 12px;
}
.t-person img{
	width: 34px; height: 34px; border-radius: 999px;
	object-fit: cover;
	background:#f2f2f2;
}
.t-person .name{
	font-weight: 650;
	font-size: 14px;
	line-height: 1.1;
}
.t-person .role{
	font-size: 12px;
	color: rgba(0,0,0,.55);
	margin-top: 2px;
}
.t-logo{
	width: 44px; height: 44px;
	border-radius: 12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgba(84,110,255,.12);
	border: 1px solid rgba(84,110,255,.18);
	font-weight: 800;
	color: rgba(84,110,255,.95);
	user-select:none;
}

/* positions */
.t-card.is-current{
	opacity: 1;
	transform: translateX(0) scale(1);
	filter: blur(0);
	z-index: 3;
}
.t-card.is-prev{
	opacity: .22;
	transform: translateX(-360px) scale(.92);
	filter: blur(.2px);
	z-index: 2;
}
.t-card.is-next{
	opacity: .22;
	transform: translateX(360px) scale(.92);
	filter: blur(.2px);
	z-index: 2;
}


.report-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.report-center{
	text-align: center;
	transform: translateY(-8px);
}
.report-logo{
	display: inline-block;
	margin-bottom: 14px;
	animation: float 2.2s ease-in-out infinite;
	user-select: none;
}
.report-logo img{
	width: 100%;
	height: 100%;
	display:block;
}

.report-text{
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.25;
	margin: 0;
}


.small-muted{color:#6b7280;font-size:16px;}
.domain-pill{display:block;align-items:center;gap:8px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;margin:14px 0 18px;}
.domain-pill code{font-size:13px;color:#111827;}
.paybox{border:1px solid #e5e7eb;border-radius:16px;padding:22px;background:linear-gradient(180deg,#ffffff,#fafafa);}
.price{font-size:34px;font-weight:800;letter-spacing:-0.5px;margin:6px 0 10px;}
.feature-list{margin:0;padding-left:18px;color:#374151;font-size:14px;}
.feature-list li{margin:6px 0;}
.cta{padding:12px 14px;font-size:16px;border-radius:12px;}

.right-col-report{flex:1;background:#f8fafc;padding:60px;overflow-y:auto;height: calc(100vh - 50px);}
.report-topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#ffffff;
  border-bottom:1px solid #e9edf3;
  padding:18px 24px;
  box-shadow:0 6px 18px rgba(16,24,40,.06); /* 轻阴影，区分层级 */
}

.report-topbar-title{
  font-size:32px;
  font-weight:700;
  letter-spacing:-0.02em;
}
.report{max-width:980px;margin:auto;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:40px;box-shadow:0 10px 25px rgba(0,0,0,.04);}
.report h1{font-size:30px;margin-bottom:16px;}
.mini-card{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fbfdff;}
.mini-label{color:#6b7280;font-size:12px;}
.mini-value{font-size:18px;font-weight:700;margin-top:2px;}
.preview-fade{position:relative;margin-top:8px;}
.preview-fade:after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(transparent,#fff);}
.lock-banner{margin-top:18px;border:1px solid #fde68a;background:#fffbeb;border-radius:14px;padding:14px;display:flex;align-items:flex-start;gap:10px;}
.lock-banner i{font-size:18px;margin-top:2px;}
.lock-banner strong{display:block;}
.lock-actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}


@media (max-width: 992px){
	.main{ flex-direction: column; }
	.right-col{display: none; }
	.left-col{ max-width: none; width: 100%;}
	.t-card.is-prev{ transform: translateX(-180px) scale(.92); }
	.t-card.is-next{ transform: translateX(180px) scale(.92); }
	.right-col-report {padding: 30px;}
}
@media (max-width: 576px){
	.t-stage{ height: 420px; }
	.t-card{ padding: 22px 20px 16px; }
	.t-card .quote{ font-size: 16px; }
	.t-card.is-prev, .t-card.is-next{
		opacity: .14;
		transform: translateX(0) scale(.96);
	}
}

.t-controls{
	display:flex;
	justify-content:center;
	gap: 10px;
	margin-top: 12px;
	z-index: 3;
	position: relative;
}
.icon-btn{
	width: 40px; height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.10);
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(6px);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition: transform .15s ease, background .15s ease;
	user-select:none;
}
.icon-btn:hover{ transform: translateY(-1px); background:#fff; }

/* Footer */
footer{
	border-top: 1px solid var(--border);
	padding: 14px 20px;
	display:flex;
	align-items:center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	color: rgba(0,0,0,.55);
	font-size: 13px;
}
footer a{
	color: rgba(0,0,0,.65);
	text-decoration: none;
}
footer a:hover{ text-decoration: underline; }

.footer-left, .footer-right {
	display:flex;
	align-items:center;
	gap: 14px;
	flex-wrap: wrap;
}