/*
	全局深色主题样式，尽量贴近设计稿观感
	- 使用 CSS 变量统一色彩与圆角
	- Flex 与 Grid 组合实现布局
	- 各模块包含中文注释，方便阅读
*/

:root {
	--bg: #000;
	--bg-soft: #0b0b0b;
	--panel: #111215;
	--text: #eaeaea;
	--muted: #a3a3a3;
	--primary: #0b84ff;
	--primary-600: #0a6cd6;
	--ghost: #1d1f24;
	--border: #1f2228;
	--radius: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
video { display: block; max-width: 100%; border-radius: 10px; background: #000; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 头部导航 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.4));
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid var(--border);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; }
.brand-name { font-weight: 700; letter-spacing: .02em; }

.header-actions { display: flex; gap: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: .2s ease; border: 1px solid transparent; }
.btn-small { height: 34px; padding: 0 12px; font-size: 14px; }
/* 顶部大号按钮变体 */
.btn-lg { height: 44px; padding: 0 18px; font-size: 15.5px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background: #fff; color: #111; }
.btn-secondary:hover { filter: brightness(.92); }
.btn-light { background: #1b1d22; color: #fff; border-color: var(--border); }
.btn-light:hover { background: #23262d; }
.btn-ghost { background: var(--ghost); color: #fff; border-color: var(--border); }
.btn-ghost:hover { background: #262a31; }

/* 首屏 */
.section-hero {
	padding: 100px 0 60px;
	background: radial-gradient(1200px 600px at 70% 0%, rgba(11,132,255,.12), transparent 60%), var(--bg);
}
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
/* 追加：首屏小号副标题样式 */
.hero-subtitle {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	font-weight: 400;
	margin: 0 0 10px;
	max-width: 560px; /* 控制一行长度，置于左侧 */
}

/* 调整主标题与间距，保持层级清晰 */
.hero-title { font-size: 44px; line-height: 1.22; margin: 0 0 24px; letter-spacing: .01em; }
.hero-title .text-sub { display: block; color: #fff; opacity: .9; font-weight: 800; margin-top: 8px; }
.hero-actions { display: flex; gap: 14px; }

/* 手机设备框效果 */
.device-frame {
	position: relative;
	justify-self: end;
	width: 330px;
	height: 660px;
	border-radius: 42px;
	background: linear-gradient(145deg, #1b1c20, #0f1013);
	padding: 18px;
	box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.06);
}
.device-video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }
.device-notch {
	position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
	width: 110px; height: 22px; border-radius: 0 0 16px 16px; background: #0c0d10; box-shadow: 0 2px 6px rgba(0,0,0,.6) inset; opacity: .9;
}

/* 交易终端展示 */
.section-terminal { padding: 60px 0; }
.section-title { margin: 0 0 8px; font-size: 28px; }
.section-title.center { text-align: center; }
.section-subtitle { margin: 0 0 20px; color: var(--muted); }
.section-subtitle.center { text-align: center; }

/* 去除第二段视频的苹果窗口外框，仅保留视频 */
.terminal-window {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
.window-bar { display: none; }
.terminal-body { padding: 0; }
.terminal-video { width: 100%; height: 520px; object-fit: cover; border-radius: 10px; }

/* 邀请加入板块（新增）：左右布局 */
.section-invite { padding: 60px 0; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%); }
.invite-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: center; }
.invite-media img { width: 100%; height: auto; border-radius: 12px; background: #000; }
.invite-text { display: grid; gap: 16px; }
.invite-title { font-size: 32px; line-height: 1.3; margin: 0; font-weight: 800; letter-spacing: .01em; font-family: inherit; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }
.invite-subtitle { margin: 0; color: var(--muted); font-family: inherit; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }
.invite-actions { display: flex; gap: 12px; }

/* 绿色按钮（参考图片：绿底黑字，圆角大） */
.btn-lime { background: #c6ff2b; color: #0a0a0a; border-color: transparent; }
.btn-lime:hover { filter: brightness(.95); }

/* 助手区 */
.section-helper { padding: 60px 0; background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%); }
/* 单列上下：文字在上，视频在下；紧密排列 */
.helper-inner { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.section-desc { color: var(--muted); margin-bottom: 18px; }
.section-desc.center { text-align: center; }
.helper-actions { display: flex; gap: 12px; justify-content: center; }
.helper-text { text-align: center; }
/* 居中并完整展示视频内容：contain + 居中 */
.helper-media { display: flex; justify-content: center; }
.helper-video { width: 100%; max-width: 1100px; height: 420px; object-fit: contain; margin: 0 auto; }

/* FAQ */
.section-faq { padding: 80px 0; }
.faq-list { display: grid; gap: 12px; max-width: 900px; margin: 20px auto 0; }
.faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-question { width: 100%; background: transparent; color: var(--text); text-align: left; border: none; cursor: pointer; padding: 18px 20px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; }
.faq-question:hover { background: rgba(255,255,255,.03); }
.faq-answer { padding: 0 20px 18px; color: var(--muted); }
.faq-item[open] .faq-question { background: rgba(255,255,255,.03); }

/* 页脚 */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0 60px; background: #060607; }
.footer-inner { display: grid; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer-grid h3 { margin: 0 0 10px; font-size: 16px; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: #fff; }
/* 统一右下角 CTA 按钮大小 */
.footer-grid .col:last-child .btn-small { width: 180px; white-space: nowrap; display: inline-flex; justify-content: center; }

/* 响应式适配 */
@media (max-width: 1024px) {
	.hero-inner { grid-template-columns: 1fr; }
	.device-frame { justify-self: start; }
    .invite-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.header-inner { height: 58px; }
	.hero-subtitle { font-size: 13px; }
	.hero-title { font-size: 34px; }
	.device-frame { width: 290px; height: 580px; }
	.terminal-video { height: 360px; }
	/* 保持完整展示但降低高度 */
	.helper-video { height: 300px; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
    .invite-title { font-size: 26px; }
}
@media (max-width: 480px) {
	.btn { height: 38px; padding: 0 14px; }
	.hero-actions { flex-wrap: wrap; }
	.container { padding: 0 16px; }
	.helper-video { height: 240px; }
	.footer-grid .col:last-child .btn-small { width: 100%; }
    .invite-title { font-size: 22px; }
}