/* 覆盖 entry.CXYHAkmp.css 里的品牌配色与按钮/卡片圆角，让视觉风格向 Starpago 靠拢：
   更鲜艳的品牌蓝、更小的圆角（矩形按钮而非胶囊按钮）、更深的正文字色。 */
:root {
	--font-sans: "Microsoft YaHei", "PingFang SC", "MiSans", "Hiragino Sans GB", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--color-brand-50: #eef4ff;
	--color-brand-100: #dbe8ff;
	--color-brand-200: #b3d1ff;
	--color-brand-300: #85b3ff;
	--color-brand-500: #2d6bff;
	--color-brand-600: #004aff;
	--color-brand-700: #0039cc;
	--color-brand-soft: #004aff1a;
	--color-ink-900: #1a2233;
	--color-ink-700: #333c4d;
	--color-ink-500: #5b6472;
}

.btn-pill {
	border-radius: 6px;
}

.card-soft {
	border-radius: 8px;
}

.card-outline {
	border-radius: 8px;
}

.rounded-2xl {
	border-radius: 10px;
}

.rounded-\[10px\], .rounded-\[30px\] {
	border-radius: 6px;
}

.bg-compliance {
	background-color: var(--color-brand-50);
	background-image: radial-gradient(60rem 30rem at 12% 0, #004aff1a, #0000 60%), radial-gradient(50rem 26rem at 92% 100%, #004aff14, #0000 62%);
}

/* 全站每个页面顶部都是深色 Hero，导航栏不管悬浮在最顶部(透明)还是滚动后(深蓝实底
   #0a1a40，见 .bg-brand-dark)都始终衬深色背景，文字统一用白色，不需要再按滚动状态切换颜色。 */
header .lp-nav-text {
	color: #fff;
}

.bg-brand-dark {
	background-color: #0a1a40;
}

/* 导航栏在页面顶部时是 bg-transparent(background-color:transparent)，完全看不出
   有导航栏存在，用户反馈应参考 Starpago 的效果：即使还没滚动，也要能看出这里有一条
   导航栏。给透明状态叠一层由深到浅的渐变蒙层，background-image 和 background-color:
   transparent 不冲突，滚动后切到 .bg-brand-dark 实底时会被覆盖，互不影响。 */
header.bg-transparent {
	background-image: linear-gradient(to bottom, rgba(10, 26, 64, 0.65), rgba(10, 26, 64, 0.15) 70%, rgba(10, 26, 64, 0) 100%);
}

.lp-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: border-color 0.2s, background-color 0.2s;
}

.lp-lang-toggle:hover,
.lp-lang-toggle[aria-expanded="true"] {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.1);
}

/* entry.CXYHAkmp.css 是一份静态编译好的 Tailwind 产物，不会随着新页面里用到的新类名
   实时重新生成；下面这几个"白色+透明度"的组合是深色主题改版时新引入的，原文件里
   从未出现过对应组合，所以编译产物里根本没有这几条规则，写了也不生效，要在这里补上。 */
.text-white\/70 {
	color: rgba(255, 255, 255, 0.7);
}

.text-white\/80 {
	color: rgba(255, 255, 255, 0.8);
}

.bg-white\/10 {
	background-color: rgba(255, 255, 255, 0.1);
}

.border-white\/10 {
	border-color: rgba(255, 255, 255, 0.1);
}

.hover\:text-\[\#004AFF\]:hover {
	color: #004aff;
}

.lp-mega-list li + li {
	margin-top: 39px;
}

/* 导航项间距：在 px-6(左右各24px)基础上再扩大一半，改用自定义类而不是 px-9/max-xl:px-3——
   这两个类组合在原站里从没出现过，静态编译的 entry.CXYHAkmp.css 里没有对应规则。
   媒体查询断点数值取自该文件里其它 max-xl 规则实际使用的 80rem，保持和全站一致。 */
.lp-nav-item {
	padding-left: 36px;
	padding-right: 36px;
}

@media not all and (width >= 80rem) {
	.lp-nav-item {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* 首页底部留资表单改成深色 Hero 风格：左侧大标题+说明文字，右侧下划线输入框(无边框、
   无底色)，跟其它板块的深色基调统一，不再是白底方框表单。 */
.lp-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 64px;
	align-items: start;
}

@media not all and (width >= 64rem) {
	.lp-contact-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.lp-contact-input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	padding: 14px 2px;
	font-size: 15px;
	font-family: inherit;
}

.lp-contact-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.lp-contact-input:focus {
	outline: none;
	border-bottom-color: rgba(255, 255, 255, 0.75);
}

.lp-contact-submit {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-radius: 8px;
	height: 60px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.lp-contact-submit:hover {
	background-color: rgba(255, 255, 255, 0.18);
}

/* 各子页面底部的"联系我们"通栏卡片(.bg-cta-card)原来是亮蓝色渐变，跟全站已经统一的
   深蓝(#0a1a40)基调完全不搭；这里直接覆盖这个全局共用类，26 个用到它的页面一次性生效。 */
.bg-cta-card {
	background-color: #0a1a40;
	background-image: radial-gradient(38rem 38rem at 88% -20%, #2d6bff33, transparent 60%), radial-gradient(30rem 30rem at 12% 130%, #004aff26, transparent 60%);
}

/* 公司介绍页的数据统计条：原来是纯白底+纯蓝数字+悬停变蓝卡片，改成浅蓝紫底、数字改深色，
   去掉悬停反色交互。第一版加了四个装饰方块，实际渲染出来像是角落里孤零零的一块色斑，
   不是自然的背景纹理，去掉；改用一个居中的柔和径向渐变让底色不那么死板，同时把留白
   拉大，避免整体显得局促。 */
.lp-stats-strip {
	background-color: #eef4ff;
	background-image: radial-gradient(60rem 30rem at 50% 20%, #ffffffcc, transparent 70%);
}

/* 服务费用页的分类锚点导航条，参考 starpago.com/zh/service 的 el-anchor 组件用 CSS
   position:sticky 实现吸顶。Starpago 原站的锚点条吸顶后会直接盖住它自己的导航栏(两者
   高度接近，看不出违和)；但我们的导航栏有 90px 高，锚点条只有约 73px，如果照搬"盖住
   导航栏"的做法，会在锚点条下方露出一截导航栏残影，很难看。所以这里改成吸顶在导航栏
   正下方(top:var(--nav-h))，两者上下相邻、都完整可见，不产生这道错位的缝。具体的点击
   滚动、滚动高亮逻辑在 home.js 里实现。
   z-index 必须比"产品和解决方案/服务费用"下拉菜单(#lpMegaMenu，z-index:10)低——锚点条
   固定高度只有 73px，但下拉菜单有 420px+ 高，两者在 y:[nav-h, nav-h+73] 这段范围里是
   重叠的；之前锚点条 z-index 给到 900，下拉菜单打开时锚点条会盖在下拉面板最上面，把
   面板顶部的几行菜单硬生生切出一道亮色横条。锚点条只需要盖住普通页面内容(z-index:auto)
   即可，不需要也不能盖过下拉菜单。 */
.lp-service-tabs {
	position: sticky;
	top: var(--nav-h);
	z-index: 5;
	background-color: #fff;
	border-bottom: 1px solid #ececec;
}

.lp-service-tabs-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 56px;
	padding: 25px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lp-service-tab-link {
	color: #999;
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.lp-service-tab-link:hover {
	color: var(--color-brand-600);
}

.lp-service-tab-link.is-active {
	color: var(--color-ink-900);
	font-weight: 700;
}

@media not all and (width >= 64rem) {
	.lp-service-tabs-list {
		justify-content: flex-start;
		gap: 28px;
		padding: 16px 24px;
	}
}

/* .lp-mega-col 是绝对定位的空白盒子，没有任何宽度约束；在某些行折行规则下浏览器会把
   auto 宽度算成一个字符那么窄，导致中文逐字换行、整列被撑得很高，超出面板底部露出后面
   的内容（造成"两种颜色+一条横杠"的观感）。这里锁死不换行，宽度按最长的一行内容撑开。 */
.lp-mega-col {
	width: max-content;
	white-space: nowrap;
}

/* container-page 在超过 --container-w(1400px)的宽屏上会用 margin-inline:auto 居中，
   两侧留白很大，logo 跟着被推到很靠右的位置。这里让 logo 往左移动这部分留白的一半，
   不影响其余导航项和右侧按钮仍然在居中的容器内对齐。仅在 --container-w 生效为 1400px
   的桌面宽度(>992px，与 entry.CXYHAkmp.css 里的断点一致)下计算这个偏移；移动端/平板
   --container-w 变成 100%，套用同样的公式会算出一个很大的负 margin，把 logo 推出屏幕外
   (即"手机端看不到 logo"的问题根源)，所以移动端不应用这条规则。 */
@media (width > 992px) {
	.lp-logo-shift {
		margin-left: calc((100vw - var(--container-w)) / -4);
	}
}

/* 首页除了最后的留资表单板块，其余板块统一成同一套深色底(#0a1a40)；
   .card-outline/.card-soft 是全站公用组件，默认是白底浅色主题，不能直接改全局定义
   (会影响其他浅色页面)，这里只在首页深色板块的作用域内覆盖它们的背景/边框颜色。 */
.lp-dark-section {
	background-color: #0a1a40;
}

.lp-dark-section .card-outline {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}

.lp-dark-section .card-soft {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
}