/* template/saas/style.css
 * SaaS · 现代化产品官网（Linear / Vercel 风）
 * 字体：Sora（display）+ Inter（body）+ JetBrains Mono（mono）
 * 主色：极光蓝绿 #0e8a83 + 暗夜蓝 #0c4a6e + 暖琥珀 #b45309
 */

body.sa-site {
	background: #fbfaf6;
	color: #161a23;
	font-family: "Inter", "PingFang SC", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.sa-site h1, .sa-site h2, .sa-site h3, .sa-site h4, .sa-site h5, .sa-site h6 { font-family: "Sora", "PingFang SC", system-ui, sans-serif; margin: 0; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; }
.sa-site a { color: inherit; text-decoration: none; }

.sa-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------- NAV ---------- */
.sa-nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 246, 0.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.sa-nav__inner { max-width: 1240px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; }
.sa-mark { display: inline-flex; align-items: center; gap: 12px; }
.sa-mark__icon { color: #0e8a83; }
.sa-mark__name { font-family: "Sora", sans-serif; font-weight: 700; font-size: 18px; color: #0c4a6e; letter-spacing: -0.005em; }
.sa-nav__links { display: flex; gap: 28px; margin-left: 12px; }
.sa-nav__links a { color: rgba(22, 26, 35, 0.7); font-size: 14px; font-weight: 500; }
.sa-nav__links a:hover, .sa-nav__links a.is-active { color: #161a23; }
.sa-nav__cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Burger */
.sa-nav__check { position: absolute; left: -9999px; }
.sa-nav__burger { display: none; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(15, 23, 42, 0.14); background: #fff; flex-shrink: 0; }
.sa-nav__burger span { display: block; width: 18px; height: 2px; background: #161a23; border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }

@media (max-width: 880px) {
	.sa-nav__inner { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
	.sa-nav__burger { display: inline-flex; margin-left: auto; order: 2; }
	.sa-nav__cta { order: 3; margin-left: 0; gap: 6px; flex-wrap: wrap; width: auto; }
	.sa-nav__cta .sa-btn { padding: 0 12px; height: 34px; font-size: 13px; }
	.sa-nav__links { display: none; order: 4; flex-direction: column; gap: 0; width: 100%; padding: 8px 0 4px; border-top: 1px solid rgba(15, 23, 42, 0.06); margin: 8px 0 0; }
	.sa-nav__links a { padding: 12px 8px; border-bottom: 1px solid rgba(15, 23, 42, 0.04); }
	.sa-nav__check:checked ~ .sa-nav__inner .sa-nav__links { display: flex; }
	.sa-nav__check:checked ~ .sa-nav__inner .sa-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.sa-nav__check:checked ~ .sa-nav__inner .sa-nav__burger span:nth-child(2) { opacity: 0; }
	.sa-nav__check:checked ~ .sa-nav__inner .sa-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 480px) {
	.sa-nav__cta .sa-btn { padding: 0 10px; }
	.sa-mark__name { font-size: 14px; }
}

/* ---------- BTN ----------
 * 注：因为 .sa-site a { color: inherit; } 比 .sa-btn--* 特异度高，
 * 这里 button 系列规则全部用 .sa-site .sa-btn--* 把特异度提到 0,2,0+ 再覆盖。
 */
.sa-site .sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; border: 1px solid transparent; line-height: 1; white-space: nowrap; }
.sa-site .sa-btn--ghost { background: transparent; color: #161a23; border-color: rgba(15, 23, 42, 0.14); }
.sa-site .sa-btn--ghost:hover { background: #fff; border-color: rgba(15, 23, 42, 0.22); color: #161a23; }
.sa-site .sa-btn--solid { background: #161a23; color: #fff; border-color: #161a23; }
.sa-site .sa-btn--solid:hover { background: #0c4a6e; border-color: #0c4a6e; color: #fff; transform: translateY(-1px); }
.sa-site .sa-btn--solid > span { transition: transform 200ms ease; }
.sa-site .sa-btn--solid:hover > span { transform: translateX(3px); }
.sa-site .sa-btn--lg { height: 44px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.sa-site .sa-btn .pp-icon { width: 14px; height: 14px; }

/* ---------- HERO ---------- */
.sa-hero { padding: 60px 0 80px; position: relative; overflow: hidden; }
.sa-hero::before {
	content: ""; position: absolute; top: -200px; right: -200px; width: 800px; height: 800px;
	background: radial-gradient(circle, rgba(14, 138, 131, 0.08) 0%, transparent 60%);
	pointer-events: none;
}
.sa-hero__inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: center; position: relative; }
@media (max-width: 980px) { .sa-hero__inner { grid-template-columns: 1fr; gap: 50px; } }

.sa-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 99px; font-size: 13px; color: #161a23; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); transition: all 200ms ease; margin-bottom: 28px; }
.sa-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.sa-pill__new { padding: 3px 8px; background: #161a23; color: #fff; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.sa-pill__arrow { color: rgba(22, 26, 35, 0.5); font-family: "JetBrains Mono", monospace; }

.sa-hero__title { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 22px; color: #0c1422; }
.sa-hero__lead { font-size: 19px; line-height: 1.6; color: rgba(22, 26, 35, 0.7); max-width: 560px; margin-bottom: 36px; }
.sa-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.sa-hero__trust { font-size: 12px; color: rgba(22, 26, 35, 0.5); padding-top: 30px; border-top: 1px solid rgba(15, 23, 42, 0.08); }
.sa-hero__trust-label { display: block; margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.sa-hero__trust-logos { font-family: "JetBrains Mono", monospace; letter-spacing: 0.14em; color: rgba(22, 26, 35, 0.65); font-size: 13px; }
.sa-hero__trust-logos b { font-weight: 600; }

/* Product mock */
.sa-hero__product { position: relative; }
.sa-browser { background: #fff; border-radius: 14px; box-shadow: 0 30px 60px rgba(15, 23, 42, 0.16), 0 1px 0 rgba(15, 23, 42, 0.04); overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.08); transform: rotate(-1deg); }
.sa-browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #f5f4ee; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.sa-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(15, 23, 42, 0.15); }
.sa-browser__bar i:nth-child(1) { background: #ef4444; }
.sa-browser__bar i:nth-child(2) { background: #f59e0b; }
.sa-browser__bar i:nth-child(3) { background: #22c55e; }
.sa-browser__url { margin-left: 12px; padding: 4px 14px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 99px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(22, 26, 35, 0.6); flex: 1; }
.sa-browser__body { display: grid; grid-template-columns: 130px 1fr; min-height: 320px; }
.sa-mock-aside { padding: 16px 0; border-right: 1px solid rgba(15, 23, 42, 0.06); background: #fbfaf6; }
.sa-mock-aside__item { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 12px; color: rgba(22, 26, 35, 0.6); border-left: 2px solid transparent; }
.sa-mock-aside__item.is-active { color: #0e8a83; background: rgba(14, 138, 131, 0.08); border-left-color: #0e8a83; font-weight: 600; }
.sa-mock-aside__item svg { width: 14px; height: 14px; }
.sa-mock-main { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.sa-mock-head { display: flex; align-items: center; justify-content: space-between; }
.sa-mock-head small { font-size: 10px; letter-spacing: 0.16em; color: rgba(22, 26, 35, 0.5); }
.sa-mock-head h4 { font-family: "JetBrains Mono", monospace; font-size: 24px; margin-top: 4px; color: #161a23; letter-spacing: -0.01em; }
.sa-mock-tag { padding: 4px 10px; border-radius: 99px; background: rgba(5, 122, 85, 0.12); color: #057a55; font-size: 11px; font-weight: 600; }
.sa-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sa-mock-card { padding: 12px; background: #fbfaf6; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 8px; }
.sa-mock-card small { font-size: 9px; letter-spacing: 0.16em; color: rgba(22, 26, 35, 0.5); }
.sa-mock-card b { display: block; font-family: "JetBrains Mono", monospace; font-size: 16px; margin: 4px 0 8px; color: #161a23; }
.sa-mock-card small + b small { font-size: 0.6em; color: rgba(22, 26, 35, 0.5); margin-left: 1px; }
.sa-mock-bar { height: 4px; background: rgba(15, 23, 42, 0.08); border-radius: 99px; overflow: hidden; }
.sa-mock-bar div { height: 100%; background: #0e8a83; border-radius: 99px; }
.sa-mock-chart { width: 100%; height: 70px; background: #fbfaf6; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 8px; padding: 6px; box-sizing: border-box; }

/* Floating chips */
.sa-hero__chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 10px; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1); z-index: 2; }
.sa-hero__chip--top { top: 30px; left: -20px; transform: rotate(-2deg); }
.sa-hero__chip--bot { bottom: 40px; right: -20px; transform: rotate(2deg); }
.sa-hero__chip svg { width: 22px; height: 22px; }
.sa-hero__chip--top svg { color: #0e8a83; }
.sa-hero__chip small { display: block; font-size: 9px; letter-spacing: 0.16em; color: rgba(22, 26, 35, 0.5); }
.sa-hero__chip b { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
@media (max-width: 980px) { .sa-hero__chip--top { left: 0; } .sa-hero__chip--bot { right: 0; } }

/* ---------- LOGO STRIP ---------- */
.sa-strip { padding: 50px 0; border-top: 1px solid rgba(15, 23, 42, 0.06); border-bottom: 1px solid rgba(15, 23, 42, 0.06); background: rgba(245, 244, 238, 0.5); }
.sa-strip__label { font-size: 11px; letter-spacing: 0.18em; color: rgba(22, 26, 35, 0.5); text-transform: uppercase; font-weight: 600; margin-bottom: 22px; text-align: center; }
.sa-strip__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 40px; }
.sa-strip__item { display: inline-flex; align-items: center; gap: 8px; color: rgba(22, 26, 35, 0.55); font-size: 13px; font-weight: 500; transition: color 200ms ease; }
.sa-strip__item:hover { color: #161a23; }
.sa-strip__item svg { width: 22px; height: 22px; }

/* ---------- SECTION ---------- */
.sa-section { padding: 100px 0; }
.sa-section__head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.sa-section__head small { display: inline-block; padding: 4px 12px; background: rgba(14, 138, 131, 0.10); color: #0e8a83; font-size: 11px; letter-spacing: 0.16em; font-weight: 700; border-radius: 99px; margin-bottom: 18px; }
.sa-section__head h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); margin-bottom: 14px; color: #0c1422; }
.sa-section__head p { color: rgba(22, 26, 35, 0.65); font-size: 17px; line-height: 1.65; }

.sa-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .sa-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sa-features { grid-template-columns: 1fr; } }

.sa-feature { padding: 32px 28px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 16px; transition: all 220ms ease; position: relative; overflow: hidden; }
.sa-feature:hover { transform: translateY(-3px); border-color: rgba(14, 138, 131, 0.32); box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06); }
.sa-feature__ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 20px; }
.sa-feature__ico .pp-icon { width: 22px; height: 22px; }
.sa-feature h3 { font-size: 1.15rem; margin-bottom: 10px; color: #161a23; }
.sa-feature p { color: rgba(22, 26, 35, 0.65); font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.sa-feature__link { display: inline-flex; align-items: center; gap: 4px; color: #0e8a83; font-size: 13px; font-weight: 600; transition: gap 180ms ease; }
.sa-feature__link:hover { gap: 8px; color: #0e8a83; }

/* ---------- STATS BAND ---------- */
.sa-stats { padding: 80px 0; background: #161a23; color: #fff; }
.sa-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 880px) { .sa-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
.sa-stats__grid > div { text-align: center; }
.sa-stats__grid b { display: block; font-family: "Sora", sans-serif; font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; color: #fff; letter-spacing: -0.025em; line-height: 1; }
.sa-stats__grid b small { font-size: 0.45em; color: #22d3ee; margin-left: 2px; vertical-align: super; font-weight: 500; }
.sa-stats__grid span { display: block; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; }

/* ---------- CTA ---------- */
.sa-cta { padding: 100px 0; }
.sa-cta__card { background: linear-gradient(135deg, #0e8a83 0%, #0c4a6e 100%); padding: 70px 50px; border-radius: 20px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.sa-cta__card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12), transparent 50%); pointer-events: none; }
.sa-cta__card small { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.8); display: block; margin-bottom: 14px; }
.sa-cta__card h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); color: #fff; margin-bottom: 16px; }
.sa-cta__card p { font-size: 18px; color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.sa-cta__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.sa-cta__card .sa-btn--solid { background: #fff; color: #0c4a6e; border-color: #fff; }
.sa-cta__card .sa-btn--solid:hover { background: #f3f4f6; color: #0c4a6e; }
.sa-cta__card .sa-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.sa-cta__card .sa-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* ---------- FOOTER ---------- */
.sa-foot { padding: 56px 0 24px; background: #fff; border-top: 1px solid rgba(15, 23, 42, 0.06); }
.sa-foot__inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 60px; }
.sa-foot__brand .sa-mark { gap: 10px; }
.sa-foot__brand .sa-mark__name { font-size: 17px; }
.sa-foot__about { color: rgba(22, 26, 35, 0.62); font-size: 13.5px; margin-top: 16px; max-width: 380px; line-height: 1.7; }
.sa-foot__icp { margin-top: 14px; font-size: 12px; color: rgba(22, 26, 35, 0.45); }
.sa-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.sa-foot__cols > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sa-foot__cols h6 { font-size: 11px; letter-spacing: 0.16em; color: rgba(22, 26, 35, 0.5); font-weight: 700; margin: 0 0 4px; text-transform: uppercase; }
.sa-foot__cols a, .sa-foot__cols span { color: rgba(22, 26, 35, 0.75); font-size: 14px; line-height: 1.4; }
.sa-foot__cols a:hover { color: #161a23; }
.sa-foot__copy { max-width: 1240px; margin: 44px auto 0; padding: 20px 32px 0; border-top: 1px solid rgba(15, 23, 42, 0.06); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(22, 26, 35, 0.5); }
@media (max-width: 980px) { .sa-foot__inner { grid-template-columns: 1fr; gap: 36px; } .sa-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sa-foot { padding: 40px 0 18px; } .sa-foot__cols { grid-template-columns: 1fr; gap: 22px; } .sa-foot__copy { padding: 16px 18px 0; margin-top: 28px; } .sa-foot__inner { padding: 0 18px; } }