:root{
	--bg:#e8eeea;
	--bg2:#f4f7f4;
	--ink:#14201c;
	--muted:#5a6b64;
	--line:rgba(20,32,28,.12);
	--accent:#0f6e5c;
	--accent-ink:#083d34;
	--paper:#fbfcfb;
	--shadow:0 18px 50px rgba(20,32,28,.08);
	--font-display:'Syne',sans-serif;
	--font-body:'Source Sans 3',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
/* 隐藏滚动条，滚轮仍可滚 */
html{
	scrollbar-width:none;
	-ms-overflow-style:none;
}
html::-webkit-scrollbar{width:0;height:0}
body{
	font-family:var(--font-body);
	color:var(--ink);
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(15,110,92,.18), transparent 55%),
		radial-gradient(900px 500px at -10% 30%, rgba(212,160,23,.12), transparent 50%),
		linear-gradient(165deg, var(--bg) 0%, var(--bg2) 45%, #e3ebe6 100%);
	height:100%;
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.page{
	height:100%;
	min-height:100%;
	display:flex;
	flex-direction:column;
	overflow:hidden;
}
.page > main{flex:1;min-height:0;display:flex;flex-direction:column}

.top{
	display:flex;align-items:center;justify-content:space-between;
	padding:1rem clamp(1.2rem,4vw,3.5rem);
	position:relative;z-index:5;
	flex-shrink:0;
}
.brand{
	font-family:var(--font-display);
	font-weight:800;
	font-size:1.15rem;
	letter-spacing:-.02em;
}
.nav{display:flex;align-items:center;gap:1.25rem}
.nav a{font-size:.95rem;color:var(--muted);font-weight:500;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav-cta{
	padding:.45rem 1rem;
	border:1px solid var(--line);
	background:rgba(251,252,251,.7);
	backdrop-filter:blur(8px);
	font-weight:600 !important;
	color:var(--ink) !important;
	transition:transform .2s, background .2s !important;
}
.nav-cta:hover{transform:translateY(-1px);background:var(--paper)}

.hero{
	flex:1;
	display:grid;
	grid-template-columns:1.05fr .95fr;
	gap:2rem;
	align-items:center;
	min-height:0;
	padding:0 clamp(1.2rem,4vw,3.5rem) 1.5rem;
	position:relative;
	overflow:hidden;
}
.hero-copy{position:relative;z-index:2;max-width:34rem}
.eyebrow{
	margin:0 0 .85rem;
	font-size:.9rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--accent);
	font-weight:600;
	opacity:0;
	animation:rise .7s ease .05s forwards;
}
.brand-hero{
	margin:0;
	font-family:var(--font-display);
	font-weight:800;
	font-size:clamp(3.2rem,9vw,6.4rem);
	line-height:.95;
	letter-spacing:-.045em;
	opacity:0;
	animation:rise .75s ease .12s forwards;
}
.lead{
	margin:1.25rem 0 0;
	font-size:clamp(1.05rem,2.2vw,1.25rem);
	line-height:1.55;
	color:var(--muted);
	max-width:28rem;
	opacity:0;
	animation:rise .75s ease .22s forwards;
}
.cta-row{
	display:flex;flex-wrap:wrap;gap:.75rem;
	margin-top:1.75rem;
	opacity:0;
	animation:rise .75s ease .32s forwards;
}
.btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:.85rem 1.35rem;
	font-family:var(--font-display);
	font-weight:700;
	font-size:.95rem;
	letter-spacing:-.01em;
	border:1px solid transparent;
	transition:transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#f5fffb}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(251,252,251,.75)}

.hero-visual{
	position:relative;
	height:min(62vh,520px);
	min-height:280px;
	opacity:0;
	animation:fadein .9s ease .2s forwards;
}
.mesh{
	position:absolute;inset:0;
	background:
		linear-gradient(rgba(20,32,28,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20,32,28,.05) 1px, transparent 1px);
	background-size:28px 28px;
	mask-image:radial-gradient(ellipse at 55% 45%, #000 20%, transparent 72%);
	-webkit-mask-image:radial-gradient(ellipse at 55% 45%, #000 20%, transparent 72%);
}
.orb{
	position:absolute;border-radius:50%;
	filter:blur(2px);
	animation:drift 8s ease-in-out infinite;
}
.orb-a{
	width:48%;height:55%;
	left:18%;top:12%;
	background:radial-gradient(circle at 35% 30%, rgba(15,110,92,.55), rgba(15,110,92,.08) 62%, transparent 70%);
}
.orb-b{
	width:42%;height:42%;
	right:8%;bottom:10%;
	background:radial-gradient(circle at 40% 40%, rgba(212,160,23,.35), rgba(212,160,23,.05) 65%, transparent 72%);
	animation-delay:-3s;
}
.sheet{
	position:absolute;
	background:var(--paper);
	border:1px solid var(--line);
	box-shadow:var(--shadow);
	padding:1rem 1.15rem;
	display:flex;flex-direction:column;gap:.35rem;
	min-width:7.5rem;
}
.sheet-1{left:12%;top:22%;transform:rotate(-6deg);animation:floaty 5.5s ease-in-out infinite}
.sheet-2{right:10%;bottom:24%;transform:rotate(5deg);animation:floaty 6.5s ease-in-out infinite reverse}
.sheet-label{font-size:.7rem;letter-spacing:.12em;color:var(--muted);font-weight:600}
.sheet-num{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em}
.bar{
	position:absolute;height:8px;border-radius:999px;
	background:linear-gradient(90deg, var(--accent), rgba(15,110,92,.15));
	opacity:.85;
}
.bar-1{width:38%;left:28%;top:58%;animation:grow 1.1s ease .5s both}
.bar-2{width:26%;left:34%;top:66%;opacity:.55;animation:grow 1.1s ease .65s both}
.bar-3{width:18%;left:38%;top:74%;opacity:.35;animation:grow 1.1s ease .8s both}

@keyframes rise{
	from{opacity:0;transform:translateY(18px)}
	to{opacity:1;transform:translateY(0)}
}
@keyframes fadein{
	from{opacity:0}
	to{opacity:1}
}
@keyframes drift{
	0%,100%{transform:translate(0,0)}
	50%{transform:translate(12px,-16px)}
}
@keyframes floaty{
	0%,100%{transform:translateY(0) rotate(var(--r, -6deg))}
	50%{transform:translateY(-10px) rotate(var(--r, -6deg))}
}
.sheet-1{--r:-6deg}
.sheet-2{--r:5deg}
@keyframes grow{
	from{transform:scaleX(.2);transform-origin:left;opacity:0}
	to{transform:scaleX(1);transform-origin:left;opacity:1}
}

@media (max-width:900px){
	body{overflow-y:auto;overflow-x:hidden}
	.page{height:auto;min-height:100%;overflow:visible}
	.hero{
		grid-template-columns:1fr;
		padding-top:.5rem;
		padding-bottom:2rem;
	}
	.hero-visual{
		order:-1;
		height:220px;
		min-height:200px;
		margin:0 -0.5rem;
	}
	.brand-hero{font-size:clamp(2.8rem,14vw,4.2rem)}
}
@media (prefers-reduced-motion:reduce){
	*{animation:none !important;transition:none !important}
	.eyebrow,.brand-hero,.lead,.cta-row,.hero-visual{opacity:1}
}