/* ========================================================================
   base.css — 变量、重置、排版、按钮、容器、通用组件（浅色纸张主题）
   配色参考 ezoic.com
   ======================================================================== */

:root {
	/* 配色 — 浅色纸张主题 */
	--c-bg: #e3e3e3;              /* paper 纸张底色 */
	--c-bg-2: #dcdcdc;            /* 比 paper 略深一点的分区背景 */
	--c-surface: #ffffff;         /* 卡片白底 */
	--c-surface-2: #f5f5f3;       /* 卡片次级底色 */
	--c-line: rgba(37, 39, 38, 0.10);   /* hairline 极淡边框 */
	--c-line-strong: rgba(37, 39, 38, 0.18);
	--c-light: #252726;           /* ink 主文字（深色） */
	--c-light-2: #575757;         /* graphite 正文次要文字 */
	--c-muted: #969696;           /* steel 辅助/占位文字 */
	--c-muted-2: #7a7a7a;         /* 页脚等小字 */
	--c-primary: #79a65a;         /* sage/olive green 品牌主色（橄榄绿） */
	--c-primary-2: #8ab868;       /* 亮一点的绿 */
	--c-accent: #79a65a;          /* 统一品牌绿 */
	--c-accent-2: #6b974e;        /* hover 深绿 */
	--c-text-on-accent: #ffffff;  /* 绿底白字 */

	/* 字体 */
	--f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--f-display: "Space Grotesk", "Noto Sans SC", sans-serif;

	/* 间距 */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* 圆角 */
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;

	/* 阴影 — 浅色主题下更柔和 */
	--sh-sm: 0 2px 8px rgba(37, 39, 38, 0.06);
	--sh-md: 0 8px 24px rgba(37, 39, 38, 0.08);
	--sh-lg: 0 20px 50px rgba(37, 39, 38, 0.10);
	--sh-glow: 0 0 32px rgba(121, 166, 90, 0.20);

	/* 容器 */
	--container: 1200px;

	/* 动效 */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.5s;
}

/* ---------------- 重置 ---------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-light);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--ease);
}

ul {
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-light);
}

::selection {
	background: var(--c-primary);
	color: #fff;
}

/* ---------------- 容器 ---------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.section {
	padding: var(--space-10) 0;
	position: relative;
}

.section-dark {
	background: var(--c-bg-2);
}

/* ---------------- 排版工具 ---------------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
	margin-bottom: 16px;
}

.eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--c-primary);
}

.section-head {
	max-width: 760px;
	margin-bottom: var(--space-8);
}

.section-head-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-title {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.1;
	color: var(--c-light);
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.section-lead {
	font-size: 18px;
	color: var(--c-light-2);
	line-height: 1.7;
}

/* ---------------- 按钮 ---------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: var(--r-pill);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
	white-space: nowrap;
}

.btn-sm {
	padding: 10px 18px;
	font-size: 14px;
}

.btn-lg {
	padding: 16px 32px;
	font-size: 16px;
}

/* 主按钮 — 深色墨底（参考 ezoic CTA：bg-foreground text-background） */
.btn-primary {
	background: var(--c-light);
	color: var(--c-bg);
	box-shadow: 0 4px 16px rgba(37, 39, 38, 0.18);
	border: 1px solid rgba(255,255,255,0.35);
}

.btn-primary:hover {
	background: #000;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(37, 39, 38, 0.25);
}

/* 绿色强调按钮（用于次重要 CTA） */
.btn-accent {
	background: var(--c-primary);
	color: #fff;
	box-shadow: 0 4px 16px rgba(121, 166, 90, 0.3);
}

.btn-accent:hover {
	background: var(--c-accent-2);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(121, 166, 90, 0.4);
}

/* 描边按钮 */
.btn-ghost {
	background: transparent;
	color: var(--c-light);
	border: 1px solid var(--c-line-strong);
}

.btn-ghost:hover {
	border-color: var(--c-light);
	background: rgba(37, 39, 38, 0.04);
	transform: translateY(-2px);
}

/* ---------------- 滚动渐入 ---------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* ---------------- 无障碍 ---------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--c-primary);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 3px;
}