:root {
	--bg:#070A12;
	--panel:rgba(255,255,255,.06);
	--panel-2:rgba(255,255,255,.09);
	--stroke:rgba(255,255,255,.12);
	--text:rgba(255,255,255,.86);
	--muted:rgba(255,255,255,.62);
	--muted2:rgba(255,255,255,.48);
	--accent:#7C5CFF;
	--accent2:#00D4FF;
	--accent3:#00FFB2;
	--danger:#FF3D81;
	--shadow:0 18px 50px rgba(0,0,0,.55);
	--shadow2:0 10px 30px rgba(0,0,0,.4);
	--r:20px;
	--r2:28px;
	--max:1140px;
	--grid:16px;
	--nav-h:28px;
	color-scheme:dark;
}
* {
	box-sizing:border-box;
}
html,body {
	height:100%;
}
body {
	margin:0;
	color:var(--text);
	background:transparent;
	/* 关键：不要再把渐变挂在 body 上 */
      min-height:100vh;
	/* 关键：防止某些情况下露底 */
      font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif;
	overflow-x:hidden;
	padding-top:var(--nav-h);
	min-width:320px;
}
.bg {
	position:fixed;
	inset:0;
	z-index:-2;
	/* 在 blobs/noise 后面 */
      pointer-events:none;
	background:radial-gradient(1200px 800px at 80% 10%,rgba(124,92,255,.22),transparent 60%),radial-gradient(900px 700px at 15% 20%,rgba(0,212,255,.18),transparent 55%),radial-gradient(900px 700px at 70% 85%,rgba(0,255,178,.12),transparent 60%),linear-gradient(180deg,#050711 0%,#070A12 45%,#050711 100%);
	transform:translateZ(0);
	/* 关键：稳定合成层 */
}
/* subtle animated noise */
    .noise {
	pointer-events:none;
	position:fixed;
	inset:0;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
	mix-blend-mode:overlay;
	opacity:.25;
	transform:translateZ(0);
	animation:drift 10s linear infinite;
	z-index:-0;
}
@keyframes drift {
	0% {
	transform:translate3d(0,0,0);
}
100% {
	transform:translate3d(-80px,60px,0);
}
}/* floating blobs */
    .blob {
	position:fixed;
	width:520px;
	height:520px;
	border-radius:50%;
	filter:blur(60px);
	opacity:.22;
	z-index:-1;
	transform:translateZ(0);
	animation:float 10s ease-in-out infinite;
}
.blob.b1 {
	left:-180px;
	top:-160px;
	background:radial-gradient(circle at 30% 30%,rgba(0,212,255,.9),transparent 55%);
}
.blob.b2 {
	right:-220px;
	top:40px;
	background:radial-gradient(circle at 35% 35%,rgba(124,92,255,.95),transparent 55%);
	animation-duration:13s;
}
.blob.b3 {
	left:30%;
	bottom:-260px;
	background:radial-gradient(circle at 40% 40%,rgba(0,255,178,.85),transparent 55%);
	animation-duration:12s;
}
@keyframes float {
	0%,100% {
	transform:translate3d(0,0,0) scale(1);
}
50% {
	transform:translate3d(0,-24px,0) scale(1.03);
}
}a {
	color:inherit;
	text-decoration:none;
}
.wrap {
	max-width:var(--max);
	margin:0 auto;
	padding:0 22px;
}
.topbar {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:50;
	backdrop-filter:blur(14px);
	background:rgba(7,10,18,.55);
	border-bottom:1px solid rgba(255,255,255,.10);
	transform:translateZ(0);
	/* 稳定合成层，避免滚动时闪动 */
}
.nav {
	height:72px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
}
.brand {
	display:flex;
	align-items:center;
	gap:10px;
	min-width:210px;
}
.logo {
	width:34px;
	height:34px;
	border-radius:12px;
	background-image:url('../img/avatar.jpg');
	background-size:100% 100%;
	box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 24px rgba(124,92,255,.25);
	position:relative;
}
.brand h1 {
	margin:0;
	font-size:16px;
	letter-spacing:.6px;
}
.brand p {
	margin:0;
	font-size:12px;
	color:var(--muted2);
}
.navlinks {
	display:flex;
	align-items:center;
	gap:6px;
	padding:8px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:999px;
	background:rgba(255,255,255,.04);
}
.navlinks a {
	font-size:13px;
	padding:10px 12px;
	border-radius:999px;
	color:var(--muted);
	transition:.2s ease;
	position:relative;
	outline:none;
}
.navlinks a:hover {
	color:var(--text);
	background:rgba(255,255,255,.06);
}
.navlinks a.active {
	color:rgba(255,255,255,.92);
	background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(0,212,255,.18));
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
@media (max-width:640px) {
	.navlinks {
	display:none;
}
}.cta {
	display:flex;
	align-items:center;
	gap:10px;
	min-width:210px;
	justify-content:flex-end;
}
.btn {
	cursor:pointer;
	font-size:12.5px;
	padding:10px 14px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	color:rgba(255,255,255,.90);
	background:linear-gradient(135deg,rgba(124,92,255,.42),rgba(0,212,255,.18));
	box-shadow:0 12px 30px rgba(124,92,255,.18);
	transition:transform .15s ease,filter .15s ease;
	user-select:none;
}
.btn:hover {
	transform:translateY(-1px);
	filter:brightness(1.05);
}
header.hero {
	padding:56px 0 26px;
}
.hero-grid {
	display:grid;
	grid-template-columns:1.25fr .75fr;
	gap:18px;
	align-items:stretch;
}
.card {
	border-radius:var(--r2);
	background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.04));
	border:1px solid rgba(255,255,255,.10);
	box-shadow:var(--shadow);
	position:relative;
	overflow:hidden;
}
.card:before {
	content:"";
	position:absolute;
	inset:-2px;
	background:radial-gradient(500px 200px at 30% 10%,rgba(0,212,255,.20),transparent 60%),radial-gradient(500px 200px at 70% 10%,rgba(124,92,255,.20),transparent 60%),radial-gradient(500px 240px at 30% 90%,rgba(0,255,178,.14),transparent 60%);
	pointer-events:none;
}
.card > * {
	position:relative;
}
.hero-left {
	padding:26px 26px 22px;
}
.kicker {
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:8px 12px;
	border-radius:999px;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.10);
	color:var(--muted);
	font-size:12px;
	letter-spacing:.3px;
}
.dot {
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--accent3);
	box-shadow:0 0 0 4px rgba(0,255,178,.12);
}
.title {
	margin:18px 0 8px;
	font-size:40px;
	line-height:1.15;
	letter-spacing:.2px;
}
.subtitle {
	margin:0 0 18px;
	color:var(--muted);
	font-size:15px;
	line-height:1.8;
	max-width:60ch;
}
.hero-actions {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:12px;
}
.ghost {
	cursor:pointer;
	font-size:12.5px;
	padding:10px 14px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.12);
	color:rgba(255,255,255,.82);
	background:rgba(255,255,255,.04);
	transition:.2s ease;
	user-select:none;
}
.ghost:hover {
	background:rgba(255,255,255,.06);
	color:rgba(255,255,255,.92);
}
.hero-right {
	padding:22px;
	display:flex;
	flex-direction:column;
	gap:14px;
}
.avatar {
	width:74px;
	height:74px;
	border-radius:24px;
	background-image:url('../img/avatar.jpg');
	background-size:100% 100%;
	box-shadow:0 0 0 1px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.45);
	position:relative;
	overflow:hidden;
}
.mini {
	padding:16px;
	border-radius:var(--r);
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.10);
}
.mini h3 {
	margin:0 0 6px;
	font-size:13px;
	color:rgba(255,255,255,.86);
}
.mini p {
	margin:0;
	font-size:12.5px;
	color:var(--muted);
	line-height:1.7;
}
.tagrow {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
}
.tag {
	font-size:12px;
	color:rgba(255,255,255,.78);
	padding:7px 10px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.04);
}
section {
	padding:22px 0;
}
.section-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}
.section-head h2 {
	margin:0;
	font-size:18px;
	letter-spacing:.4px;
}
.section-head p {
	margin:0;
	font-size:12.5px;
	color:var(--muted2);
}
.grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:14px;
}
.item {
	padding:18px;
	border-radius:var(--r);
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.10);
	box-shadow:0 10px 30px rgba(0,0,0,.22);
	transition:transform .18s ease,border-color .18s ease,background .18s ease;
	position:relative;
	overflow:hidden;
	min-height:132px;
}
.item:before {
	content:"";
	position:absolute;
	inset:-2px;
	background:radial-gradient(240px 120px at 25% 0%,rgba(0,212,255,.14),transparent 60%),radial-gradient(240px 120px at 75% 0%,rgba(124,92,255,.14),transparent 60%);
	opacity:0;
	transition:opacity .18s ease;
	pointer-events:none;
}
.item:hover {
	transform:translateY(-2px);
	border-color:rgba(255,255,255,.16);
	background:rgba(255,255,255,.06);
}
.item:hover:before {
	opacity:1;
}
.item > * {
	position:relative;
}
.item h3 {
	margin:0 0 8px;
	font-size:14px;
	letter-spacing:.2px;
}
.item p {
	margin:0;
	font-size:12.8px;
	color:var(--muted);
	line-height:1.75;
}
.pillrow {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin-top:12px;
}
.pill {
	font-size:11.5px;
	padding:6px 10px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.04);
	color:rgba(255,255,255,.72);
}
.status {
	position:absolute;
	top:14px;
	right:14px;
	font-size:11.5px;
	padding:6px 10px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.05);
	color:rgba(255,255,255,.74);
}
.status.archived {
	border-color:rgba(255,61,129,.25);
	background:rgba(255,61,129,.08);
	color:rgba(255,255,255,.82);
}
.contact {
	display:grid;
	grid-template-columns:1.2fr .8fr;
	gap:14px;
}
.contact .panel {
	padding:18px;
	border-radius:var(--r);
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.10);
	box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.kv {
	display:grid;
	grid-template-columns:100px 1fr;
	gap:10px 12px;
	align-items:center;
	margin-top:8px;
}
.k {
	color:var(--muted2);
	font-size:12.5px;
}
.v {
	color:rgba(255,255,255,.84);
	font-size:13px;
}
.links {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:12px;
}
.link {
	font-size:12.5px;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(255,255,255,.04);
	color:rgba(255,255,255,.82);
	transition:.18s ease;
}
.link:hover {
	background:rgba(255,255,255,.06);
	border-color:rgba(255,255,255,.16);
	transform:translateY(-1px);
}
footer {
	padding:22px 0 36px;
	color:rgba(255,255,255,.45);
	font-size:12px;
}
/* responsive */
    @media (max-width:980px) {
	.hero-grid {
	grid-template-columns:1fr;
}
.cta {
	display:none;
}
.grid {
	grid-template-columns:1fr 1fr;
}
.contact {
	grid-template-columns:1fr;
}
}@media (max-width:640px) {
	.nav {
	height:66px;
}
.brand {
	min-width:auto;
}
.title {
	font-size:32px;
}
.grid {
	grid-template-columns:1fr;
}
.navlinks {
	overflow-x:auto;
	max-width:72vw;
}
.navlinks a {
	padding:9px 11px;
}
.cta {
	display:flex !important;
	min-width:0;
}
}/* smooth scroll offset for sticky header */
    [id] {
	scroll-margin-top:92px;
}
/* Modal */
    .modal {
	position:fixed;
	inset:0;
	z-index:120;
	/* 高于 topbar */
      display:none;
}
.modal.is-open {
	display:block;
}
.modal__backdrop {
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.55);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
}
.modal__panel {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) scale(.98);
	width:min(420px,calc(100vw - 44px));
	border-radius:22px;
	background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 22px 70px rgba(0,0,0,.60);
	overflow:hidden;
	opacity:0;
	transition:transform .18s ease,opacity .18s ease;
}
.modal.is-open .modal__panel {
	transform:translate(-50%,-50%) scale(1);
	opacity:1;
}
.modal__head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 16px;
	border-bottom:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.12);
}
.modal__title {
	font-size:13.5px;
	color:rgba(255,255,255,.88);
	letter-spacing:.2px;
}
.modal__close {
	cursor:pointer;
	width:34px;
	height:34px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.12);
	background:rgba(255,255,255,.05);
	color:rgba(255,255,255,.85);
	font-size:18px;
	line-height:32px;
	padding:0;
	transition:.15s ease;
}
.modal__close:hover {
	background:rgba(255,255,255,.08);
	transform:translateY(-1px);
}
.modal__body {
	padding:16px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
}
.modal__img {
	width:min(320px,78vw);
	height:auto;
	border-radius:18px;
	border:1px solid rgba(255,255,255,.12);
	background:rgba(255,255,255,.03);
	box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.modal__hint {
	font-size:12.5px;
	color:rgba(255,255,255,.62);
}