/* 涌考落地页样式。
   色值全部复用 style.css :root 里那套变量，不另起一套 —— 首页和站内点进去
   要看着是同一个产品。
   所有类名带 .lp- 前缀，是为了跟站内样式彻底隔开（站内已经有 .topbar/.card/
   .btn 等等，重名会互相污染）。 */

/* 落地页自己的一层变量。
   为什么不直接用考试星那个紫（#5b5bd6）：站内所有页面是 style.css 里的蓝
   （--primary:#1b66f0），首页紫、点进去蓝，会像两个产品。所以学考试星的
   「浅底 + 白卡 + 深字」那套排布，主色仍旧用本系统的蓝。 */
.lp-body {
  --lp-ink: #1a2138;          /* 大标题用的深字，比 --text 更重一点 */
  --lp-ink-2: #5a6480;        /* 正文灰字 */
  --lp-tint: #f2f5fd;         /* 浅底 */
  --lp-tint-2: #e8eefb;       /* 浅底再深一档，做渐变 */
  --lp-line: #e6ebf6;
  --lp-soft: 0 2px 12px rgba(26, 33, 56, .05);
  --lp-lift: 0 18px 44px rgba(26, 33, 56, .09);
}

.lp-body {
  margin: 0;
  background: var(--card);
  color: var(--lp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lp-body a { text-decoration: none; color: inherit; }

/* ---------- 顶部导航 ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lp-line);
}
/* 导航单独用一个更宽的容器（1440），不跟下面内容区共用 1160。
   1160 在宽屏上会把 logo 和菜单挤到屏幕正中间，左边空出一大片，
   看着像没对齐 —— 考试星的导航也是贴着两边走的。 */
.lp-nav-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 40px;
  height: 68px; display: flex; align-items: center; gap: 34px;
}
.lp-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.lp-logo img { width: 30px; height: 30px; }
.lp-logo-text { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.lp-logo-sub { font-size: 13px; color: var(--lp-ink-2); padding-left: 10px; border-left: 1px solid var(--lp-line); }
.lp-logo-sub:empty { display: none; }

.lp-menu { display: flex; gap: 30px; font-size: 15px; color: var(--lp-ink); }
.lp-menu a { padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.lp-menu a:hover { color: var(--primary); border-bottom-color: var(--primary); }

.lp-nav-cta { margin-left: auto; display: flex; gap: 10px; }

/* ---------- 按钮 ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.lp-btn-lg { height: 46px; padding: 0 28px; font-size: 15px; border-radius: 12px; }
.lp-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(27, 102, 240, .25); }
.lp-btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
/* 次要按钮给足白底：首屏底是浅蓝灰，半透明白在上面会显得脏，直接写死 #fff */
.lp-btn-ghost { color: var(--lp-ink); border-color: var(--lp-line); background: #fff; box-shadow: var(--lp-soft); }
.lp-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
/* 深底上用：白底蓝字。蓝底按钮压在蓝色行动区上会糊成一片 */
.lp-btn-invert { background: #fff; color: var(--primary); }
.lp-btn-invert:hover { background: #f0f5ff; transform: translateY(-1px); }
.lp-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.lp-btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
/* 键盘操作的人要能看清焦点落在哪 —— 客户员工里有只用键盘的 */
.lp-btn:focus-visible, .lp-role:focus-visible, .lp-menu a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

/* ---------- 首屏 ----------
   改成浅底深字（学考试星）。原来是深蓝底白字，一是压得重，二是下面几屏
   全是浅底，头一屏一块深色像贴上去的。 */
.lp-hero {
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(27, 102, 240, .10), transparent 66%),
    linear-gradient(180deg, var(--lp-tint) 0%, var(--lp-tint-2) 100%);
  color: var(--lp-ink);
  padding: 84px 40px 96px;
}
.lp-hero-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 60px; align-items: center;
}
/* 左列。min-width:0 是必须的：grid 子项默认 min-width:auto，长句子会把这一列
   撑宽，右边示意图被挤扁。 */
.lp-hero-copy { min-width: 0; }
.lp-eyebrow {
  margin: 0 0 20px; font-size: 14px; letter-spacing: 1px;
  color: var(--primary); font-weight: 600;
}
.lp-title { margin: 0 0 20px; font-size: 46px; line-height: 1.26; font-weight: 700; letter-spacing: .5px; }
.lp-sub { margin: 0 0 34px; font-size: 16.5px; line-height: 1.9; color: var(--lp-ink-2); max-width: 26em; }
.lp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.lp-hero-note { margin: 22px 0 0; font-size: 13px; color: var(--lp-ink-2); }

/* ---------- 首屏右侧示意图（DOM 画的，不是图片） ----------
   底改成浅色了，卡片阴影要跟着调淡：原来那套 rgba(4,16,42,.42) 是压在
   深蓝底上的浓度，直接搬到浅底上会脏成一坨灰。 */
.lp-hero-art { position: relative; padding: 8px 20px; }
.lp-art-card {
  background: #fff; color: var(--lp-ink);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px; padding: 24px;
  box-shadow: var(--lp-lift);
}
.lp-art-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--lp-line);
  font-size: 13px; color: var(--lp-ink-2);
}
.lp-art-timer { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.lp-art-main { font-size: 15.5px; font-weight: 600; line-height: 1.65; margin: 0 0 16px; }
.lp-art-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin-bottom: 9px;
  border: 1px solid var(--lp-line); border-radius: 11px;
  font-size: 14px; color: var(--lp-ink);
}
.lp-art-opt i {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--lp-line); font-style: normal;
  font-size: 11px; display: grid; place-items: center; color: var(--lp-ink-2);
}
.lp-art-opt.on { border-color: var(--primary); background: rgba(27, 102, 240, .05); }
.lp-art-opt.on i { background: var(--primary); border-color: var(--primary); color: #fff; }
.lp-art-score, .lp-art-proctor {
  position: absolute; background: #fff; border-radius: 14px;
  padding: 13px 17px; box-shadow: var(--lp-lift);
  display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.lp-art-score { right: -6px; top: -14px; }
.lp-art-score b { font-size: 24px; color: var(--ok); font-variant-numeric: tabular-nums; }
.lp-art-score span { color: var(--lp-ink-2); }
.lp-art-proctor { left: 0; bottom: -12px; color: var(--lp-ink-2); }
.lp-art-proctor i { font-style: normal; color: var(--bad); }

/* ---------- 数字条 ---------- */
.lp-stats { background: #fff; border-bottom: 1px solid var(--lp-line); }
.lp-stats-inner {
  max-width: 1160px; margin: 0 auto; padding: 30px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
}
.lp-stat b { display: block; font-size: 30px; font-weight: 700; color: var(--primary); line-height: 1.3; }
.lp-stat span { font-size: 13px; color: var(--lp-ink-2); }

/* ---------- 通用区块 ---------- */
.lp-section { padding: 84px 40px; }
.lp-section-alt { background: var(--lp-tint); }
.lp-section-inner { max-width: 1160px; margin: 0 auto; }
.lp-kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: 1px; color: var(--primary); font-weight: 600; }
.lp-h2 { margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: .5px; }
.lp-lead { margin: 0 0 44px; font-size: 15.5px; color: var(--lp-ink-2); line-height: 1.85; }

/* ---------- 功能卡 ---------- */
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-card {
  background: #fff; border: 1px solid var(--lp-line);
  border-radius: 16px; padding: 28px 26px;
  box-shadow: var(--lp-soft);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lp-card:hover { border-color: rgba(27, 102, 240, .35); box-shadow: var(--lp-lift); transform: translateY(-3px); }
.lp-card-ico {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, rgba(27, 102, 240, .12), rgba(99, 192, 245, .18));
  color: var(--primary);
}
.lp-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.lp-card p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--lp-ink-2); }

/* ---------- 场景 ---------- */
.lp-scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-scene {
  background: #fff; border: 1px solid var(--lp-line);
  border-radius: 16px; padding: 26px 22px;
  border-top: 3px solid var(--primary);
  box-shadow: var(--lp-soft);
}
.lp-scene h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.lp-scene p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--lp-ink-2); }

/* ---------- 四步 ---------- */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 78px; }
.lp-step { position: relative; padding-top: 8px; }
/* 步骤之间的连线。最后一个不画，:not(:last-child) 比给最后一个加类干净 */
.lp-step:not(:last-child)::after {
  content: ''; position: absolute; left: 46px; top: 25px; right: -24px;
  height: 1px; background: var(--lp-line);
}
.lp-step-num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 700; margin-bottom: 16px;
}
.lp-step h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.lp-step p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--lp-ink-2); }

/* ---------- 底部行动区 ----------
   整页就这一块深色。首屏改浅底之后，这里留着深色是有用的 ——
   页面最后需要一个视觉落点，全浅到底会散。 */
.lp-cta {
  background: linear-gradient(135deg, #16357a 0%, var(--primary) 100%);
  color: #fff; border-radius: 22px; padding: 58px 40px; text-align: center;
}
.lp-cta .lp-h2 { color: #fff; }
.lp-cta .lp-lead { color: rgba(255, 255, 255, .72); margin-bottom: 30px; }
.lp-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 页脚 ----------
   页脚也改成浅色：深色页脚紧跟在深色行动区后面，两块贴在一起分不出层次。 */
.lp-foot { background: var(--lp-tint); color: var(--lp-ink-2); padding: 36px 40px; border-top: 1px solid var(--lp-line); }
.lp-foot-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.lp-foot-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lp-ink); font-weight: 500; }
.lp-foot-brand img { width: 24px; height: 24px; }
.lp-foot-links { display: flex; gap: 22px; font-size: 13.5px; margin-left: auto; }
.lp-foot-links a:hover { color: var(--primary); }
.lp-foot-copy { width: 100%; margin: 0; padding-top: 20px; border-top: 1px solid var(--lp-line); font-size: 12.5px; }
.lp-foot-copy:empty { display: none; }

/* ---------- 窄屏 ----------
   同事多半是手机上点开链接看，首屏在手机上不能糊。
   示意图在窄屏直接隐掉：缩到手机宽度里字全挤成一团，不如不放。 */
@media (max-width: 1080px) {
  .lp-nav-inner { padding: 0 24px; }
  .lp-hero { padding: 64px 24px 72px; }
  .lp-section { padding: 64px 24px; }
  .lp-stats-inner { padding: 26px 24px; }
  .lp-foot { padding: 32px 24px; }
}
@media (max-width: 960px) {
  .lp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero-art { display: none; }
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-scene-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .lp-step:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .lp-menu { display: none; }
  .lp-nav-inner { gap: 12px; padding: 0 16px; }
  /* 手机上导航只留一个按钮，两个挤在一行会换行把导航撑成两层。
     留「管理员登录」是因为学员入口首屏那个大按钮已经有了。 */
  .lp-nav-cta .lp-btn-ghost { display: none; }
  .lp-logo-sub { display: none; }
  .lp-hero { padding: 48px 20px 56px; }
  .lp-title { font-size: 29px; }
  .lp-sub { font-size: 15px; }
  .lp-hero-cta { flex-direction: column; }
  .lp-hero-cta .lp-btn { width: 100%; }
  .lp-section { padding: 52px 20px; }
  .lp-stats-inner { padding: 24px 20px; }
  .lp-foot { padding: 28px 20px; }
  .lp-h2 { font-size: 24px; }
  .lp-grid, .lp-scene-grid, .lp-steps { grid-template-columns: 1fr; }
  .lp-stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .lp-cta { padding: 38px 22px; }
  .lp-cta-row { flex-direction: column; }
  .lp-foot-inner { flex-direction: column; align-items: flex-start; }
  .lp-foot-links { margin-left: 0; flex-wrap: wrap; gap: 16px; }
}

/* 「看使用演示」按钮。
   【为什么做成无边框的第三档】首屏已经有主按钮（进入考试）和次按钮（管理端登录）。
   再来一个描边按钮，三个框并排一样重，主行动就不突出了。文字 + 一个播放小圆点
   刚好让人看见但不抢戏。 */
.lp-btn-link { color: var(--lp-ink); border-color: transparent; background: transparent; padding: 0 10px; }
.lp-btn-link:hover { color: var(--primary); }
.lp-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; padding-left: 2px;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px;
}
/* 窄屏首屏三个按钮竖排时，这个不占满整行，免得看着像第三个主按钮 */
@media (max-width: 560px) {
  .lp-btn-link { justify-content: flex-start; padding: 0; }
}