/* ============================================================================
 * ClickSplice — CALIBRE · 宣传站
 * ----------------------------------------------------------------------------
 * 作用域：只命中 `.mkt-page`（未登录访客看到的营销面）与认证页，不触碰后台
 * 工作区（.app-frame）。原样式表是 public-home.css。
 *
 * 原设计的结构是好的（信息架构清楚、8 个区块齐备），问题在视觉表达：
 *  · hero 标题只有 clamp(32→50px)，撑不起第一屏
 *  · 8 个区块共用「标题 + 卡片网格」同一套节奏，通篇无强弱变化
 *  · 内容宽 1120px，1440 视口两侧各空 160px，显得局促
 *  · 几乎全灰蓝，强调色只出现在按钮上，没有一个视觉焦点
 *  · 卡片是同一种深色长方体，没有层次、没有交互反馈
 *
 * 改版方向：延续后台「精密仪器」的家族感，但营销面更外向 —— 更大的排版
 * 尺度、更强的节奏对比、有节制的光晕，以及可见的状态反馈。
 * ========================================================================== */

/* ==========================================================================
 * 1. 设计令牌
 * ======================================================================== */

/* 令牌同时挂到 .dark 变体上：线上的 apple-theme 覆盖层用
 * `.dark .mkt-page { --mkt-bg:#000 }` 这类更高特异性（0,2,0）的选择器把宣传站
 * 改成了浅色。自定义属性不受 !important 影响，只能靠"同特异性 + 后加载"或
 * "更高特异性"取胜，所以这里显式带上 .dark / html.dark 两种写法。 */
.mkt-page,
.login-page,
.dark .mkt-page,
.dark .login-page,
html.dark .mkt-page,
html.dark .login-page {
  --mkt-bg: #070a11;
  --mkt-bg-2: #0b0f18;
  --mkt-panel: #0e131d;
  --mkt-panel-2: #131926;
  --mkt-border: rgba(255, 255, 255, 0.075);
  --mkt-border-strong: rgba(255, 255, 255, 0.16);
  --mkt-text: #edf0f6;
  --mkt-muted: #8a93a6;
  --mkt-accent: #4f6bff;
  --mkt-accent-bright: #7c8cff;
  --mkt-green: #3ddba2;
  --mkt-red: #ff6b70;

  /* CALIBRE 家族补充令牌 */
  --mkt-w: 1200px;
  --mkt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mkt-radius: 16px;
  --mkt-radius-lg: 22px;
  --mkt-input-bg: rgba(255, 255, 255, 0.035);
  --mkt-glow: radial-gradient(
    60% 50% at 50% 0%,
    rgba(79, 107, 255, 0.22) 0%,
    rgba(79, 107, 255, 0) 70%
  );
  --mkt-hairline: inset 0 1px 0 0 rgba(255, 255, 255, 0.055);
}

/* ==========================================================================
 * 1b. 进入层叠层
 * --------------------------------------------------------------------------
 * 线上的 apple-theme 覆盖层对宣传站用了大量 !important：
 *   .mkt-page   { background:#fff !important; background-image:none !important }
 *   .mkt-btn-primary { background:#0071e3 !important; box-shadow:none !important }
 *   .login-page { background: var(--a-gray6) !important }
 * 本皮肤是运行时最后注入的样式表，但"后加载"只在特异性打平时才起作用 ——
 * 它对 !important 声明无效。
 *
 * 层叠规则：对 !important 声明，**分层内优先于未分层**。所以把组件规则整体
 * 包进 @layer，就能稳定压过 apple 层的 !important，不必逐条抬高特异性。
 * 上面的设计令牌刻意留在层外 —— 普通声明相反，未分层的优先级更高，令牌必须
 * 压得住 apple 的 `.mkt-page { --mkt-bg:#ffffff }`。
 * ======================================================================== */

@layer mkt {

/* 页面基座（原来的 font/背景 从令牌块里搬出来，并补上 !important） */
.mkt-page,
.login-page {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei",
    system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.008em !important;
  color: var(--mkt-text) !important;
  /* 网格底纹 + 首屏品牌光晕，向下由 ::before 渐隐 */
  background:
    var(--mkt-glow) no-repeat top center,
    linear-gradient(rgba(124, 140, 255, 0.045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(124, 140, 255, 0.045) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--mkt-bg) !important;
  background-attachment: scroll, scroll, scroll, scroll !important;
  background-image:
    var(--mkt-glow),
    linear-gradient(rgba(124, 140, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 140, 255, 0.045) 1px, transparent 1px) !important;
  background-repeat: no-repeat, repeat, repeat !important;
  background-size: auto, 64px 64px, 64px 64px !important;
}

/* 网格只出现在首屏附近 */
.mkt-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1100px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, var(--mkt-bg) 100%);
  z-index: 0;
}
.mkt-page {
  position: relative;
}
.mkt-page > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
 * 2. 容器与排版尺度
 * ======================================================================== */

.mkt-header-inner,
.mkt-preview,
.mkt-section,
.mkt-cta,
.mkt-footer-inner,
.mkt-doc {
  max-width: var(--mkt-w) !important;
}

/* hero 的文字舞台比正文容器窄一档，行宽更舒服 */
.mkt-hero {
  max-width: 940px !important;
}

/* 交替区块原设计就是全宽的（.mkt-section-alt { max-width: none }），
 * 不能被上面的容器宽度压回居中窄栏 —— 那会毁掉整页的宽窄节奏。 */
.mkt-page .mkt-section-alt {
  max-width: none !important;
}

.mkt-page h1,
.mkt-page h2,
.mkt-page h3 {
  letter-spacing: -0.034em;
  line-height: 1.08;
}

.mkt-page p {
  line-height: 1.62;
}

.mkt-eyebrow {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.115em !important;
  text-transform: uppercase !important;
  color: var(--mkt-accent-bright) !important;
  margin-bottom: 18px !important;
}

/* 区块标题整体放大：营销面的层级靠尺度拉开，不靠颜色 */
.mkt-section h2,
.mkt-overview h2,
.mkt-cta h2 {
  font-size: clamp(30px, 3.5vw, 46px) !important;
  font-weight: 680 !important;
  letter-spacing: -0.036em !important;
  line-height: 1.06 !important;
  max-width: 20ch;
}

.mkt-section-copy,
.mkt-overview p,
.mkt-doc-intro p {
  font-size: 15.5px !important;
  color: var(--mkt-muted) !important;
  max-width: 62ch;
}

/* ==========================================================================
 * 3. 顶栏
 * ======================================================================== */

.mkt-header {
  background: rgba(7, 10, 17, 0.72) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid var(--mkt-border) !important;
}

.mkt-header-inner {
  height: 62px !important;
  padding: 0 24px !important;
  gap: 28px !important;
}

/* 滚动进度条：用滚动驱动动画，不需要 JS */
.mkt-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--mkt-accent), var(--mkt-accent-bright));
  animation: mkt-progress linear both;
  animation-timeline: scroll(root block);
}

@keyframes mkt-progress {
  to {
    transform: scaleX(1);
  }
}

.mkt-brand {
  font-size: 15px !important;
  font-weight: 560 !important;
  letter-spacing: -0.018em !important;
}
.mkt-brand strong {
  font-weight: 760 !important;
}

/* 品牌标识：apple 层把它钉死在 #0071e3，这里压回我们的强调色 */
.mkt-mark,
.mkt-brand svg {
  color: var(--mkt-accent-bright) !important;
  fill: currentColor !important;
}

.mkt-nav a {
  padding: 8px 13px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  color: var(--mkt-muted) !important;
  transition: color 0.18s var(--mkt-ease), background-color 0.18s var(--mkt-ease) !important;
}
.mkt-nav a:hover {
  color: var(--mkt-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
 * 4. 按钮
 * ======================================================================== */

.mkt-btn {
  border-radius: 999px !important;
  font-weight: 580 !important;
  letter-spacing: -0.012em !important;
  transition: transform 0.18s var(--mkt-ease), box-shadow 0.18s var(--mkt-ease),
    background-color 0.18s var(--mkt-ease), border-color 0.18s var(--mkt-ease) !important;
}
.mkt-btn:active {
  transform: translateY(1px) scale(0.99);
}

.mkt-btn-primary {
  background: linear-gradient(180deg, #5a73ff 0%, var(--mkt-accent) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 8px 24px -8px rgba(79, 107, 255, 0.7) !important;
}
.mkt-btn-primary:hover {
  background: linear-gradient(180deg, #6d83ff 0%, #5a73ff 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 32px -8px rgba(79, 107, 255, 0.85) !important;
  transform: translateY(-1px);
}

.mkt-btn-outline {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--mkt-border-strong) !important;
  color: var(--mkt-text) !important;
}
.mkt-btn-outline:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px);
}

.mkt-btn-lg {
  height: 48px !important;
  padding: 0 26px !important;
  font-size: 14.5px !important;
}

/* ==========================================================================
 * 5. Hero
 * ======================================================================== */

.mkt-hero {
  padding: 132px 24px 64px !important;
  text-align: center;
}

.mkt-hero h1 {
  font-size: clamp(42px, 6.1vw, 78px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
  max-width: 17ch;
  margin: 0 auto !important;
  text-wrap: balance;
}

/* 标题里的强调短语做成渐变文字。色标刻意收在可见范围内 ——
 * 原来把末端放在 130% 会让最后一两个字母褪到几乎看不见。 */
.mkt-hero h1 span,
.mkt-hero h1 em,
.mkt-hero h1 strong {
  background: linear-gradient(
    95deg,
    #7c8cff 0%,
    #9aa8ff 46%,
    #6fe3bb 96%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: inherit;
  font-style: normal;
}

.mkt-hero-copy {
  font-size: clamp(15.5px, 1.15vw, 18px) !important;
  line-height: 1.62 !important;
  color: var(--mkt-muted) !important;
  max-width: 60ch !important;
  margin: 22px auto 0 !important;
}

.mkt-hero-cta {
  gap: 12px !important;
  margin-top: 34px !important;
  justify-content: center;
}

.mkt-hero-note {
  font-size: 12.5px !important;
  color: var(--mkt-muted) !important;
  opacity: 0.85;
  margin-top: 18px !important;
}

/* ==========================================================================
 * 6. 产品预览 —— 首屏下方的主角，给它真正的"窗口感"
 * ======================================================================== */

.mkt-preview {
  padding: 12px 24px 0 !important;
}

.mkt-preview-tabs {
  justify-content: center;
  margin-bottom: 16px !important;
}
.mkt-preview-tabs button {
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  transition: all 0.18s var(--mkt-ease) !important;
}
/* apple 层把激活态固定成 #0071e3 系，这里同样压回 */
.mkt-preview-tabs button.is-active,
.mkt-page [class*="preview-tabs"] button.is-active {
  background: rgba(79, 107, 255, 0.16) !important;
  color: #b9c2ff !important;
  border-color: rgba(124, 140, 255, 0.3) !important;
}

.mkt-preview-frame {
  border-radius: var(--mkt-radius-lg) !important;
  border: 1px solid var(--mkt-border-strong) !important;
  background: linear-gradient(180deg, var(--mkt-panel-2) 0%, var(--mkt-panel) 100%) !important;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  overflow: hidden;
  position: relative;
}

/* 预览窗口下方的品牌光晕 */
.mkt-preview-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 70%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(79, 107, 255, 0.35) 0%,
    transparent 70%
  );
  pointer-events: none;
  filter: blur(30px);
}

.mkt-preview-caption {
  font-size: 11.5px !important;
  color: var(--mkt-muted) !important;
  opacity: 0.75;
  margin-top: 16px !important;
  text-align: center;
}

/* 假 UI 内部也统一到新的表面语言 */
.mkt-mock-toolbar {
  background: rgba(255, 255, 255, 0.025) !important;
  border-bottom: 1px solid var(--mkt-border) !important;
}
.mkt-mock-title {
  font-size: 12px !important;
  font-weight: 580 !important;
  letter-spacing: -0.01em;
  color: var(--mkt-text) !important;
}
.mkt-mock-range,
.mkt-mock-kpis span {
  font-size: 11px !important;
  color: var(--mkt-muted) !important;
  font-variant-numeric: tabular-nums;
}
.mkt-mock th,
.mkt-mock td {
  font-variant-numeric: tabular-nums;
}
.mkt-mock-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 11px !important;
}

/* ==========================================================================
 * 7. 区块节奏 —— 打破"8 个区块一个样"
 * ======================================================================== */

.mkt-section,
.mkt-overview {
  padding: 92px 24px !important;
}

/* 交替区块用轻微的表面差 + 更窄的上下留白，制造节奏 */
.mkt-section-alt {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.014) 18%,
    rgba(255, 255, 255, 0.014) 82%,
    transparent 100%
  ) !important;
  border-top: 1px solid var(--mkt-border) !important;
  border-bottom: 1px solid var(--mkt-border) !important;
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

.mkt-section-head {
  margin-bottom: 44px !important;
}

.mkt-overview-points {
  gap: 14px !important;
  margin-top: 34px !important;
}

/* ==========================================================================
 * 8. 卡片
 * ======================================================================== */

.mkt-card,
.mkt-contact-card {
  position: relative;
  background: linear-gradient(180deg, var(--mkt-panel-2) 0%, var(--mkt-panel) 100%) !important;
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 22px 22px 24px !important;
  box-shadow: var(--mkt-hairline), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.24s var(--mkt-ease), border-color 0.24s var(--mkt-ease),
    box-shadow 0.24s var(--mkt-ease) !important;
  overflow: hidden;
}

.mkt-card:hover,
.mkt-contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--mkt-border-strong) !important;
  box-shadow: var(--mkt-hairline), 0 20px 40px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(124, 140, 255, 0.12) !important;
}

.mkt-card h3,
.mkt-contact-card h3 {
  font-size: 15.5px !important;
  font-weight: 620 !important;
  letter-spacing: -0.022em !important;
  margin-bottom: 8px !important;
}

.mkt-card p,
.mkt-contact-card p {
  font-size: 13.5px !important;
  color: var(--mkt-muted) !important;
  line-height: 1.6 !important;
}

.mkt-card code,
.mkt-card kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 12px !important;
  background: rgba(124, 140, 255, 0.1) !important;
  border: 1px solid rgba(124, 140, 255, 0.16) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  color: #b9c2ff !important;
}

/* 卡片里的要点列表：原来的 7px 八边形在深底上像一块方块，
 * 换成带淡光晕的小圆点，更精细也不抢视线。 */
.mkt-card li {
  padding-left: 15px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.mkt-card li::before {
  width: 5px !important;
  height: 5px !important;
  top: 0.62em !important;
  border-radius: 50% !important;
  clip-path: none !important;
  background: var(--mkt-accent-bright) !important;
  opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.11);
}

.mkt-feature-grid {
  gap: 14px !important;
}

/* 功能卡片：hover 时左上角亮起一道渐变边 */
.mkt-feature-grid .mkt-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 140, 255, 0.65),
    transparent
  );
  opacity: 0;
  transition: opacity 0.24s var(--mkt-ease);
}
.mkt-feature-grid .mkt-card:hover::before {
  opacity: 1;
}

/* ==========================================================================
 * 9. 流程 / 步骤 / 维度标签
 * ======================================================================== */

.mkt-flow-node,
.mkt-steps > li {
  background: linear-gradient(180deg, var(--mkt-panel-2) 0%, var(--mkt-panel) 100%) !important;
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  box-shadow: var(--mkt-hairline) !important;
}

.mkt-flow-arrow {
  color: var(--mkt-accent-bright) !important;
  opacity: 0.7;
}

.mkt-dimension-chips {
  gap: 7px !important;
}
.mkt-dimension-chips span,
.mkt-dimension-chips li {
  border-radius: 999px !important;
  border: 1px solid var(--mkt-border) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-size: 11.5px !important;
  font-weight: 520 !important;
  color: var(--mkt-muted) !important;
  padding: 5px 11px !important;
  transition: all 0.18s var(--mkt-ease) !important;
}
.mkt-dimension-chips span:hover,
.mkt-dimension-chips li:hover {
  color: var(--mkt-text) !important;
  border-color: var(--mkt-border-strong) !important;
  background: rgba(124, 140, 255, 0.09) !important;
}

/* 流量质量条 */
.mkt-quality-track {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  overflow: hidden;
}
.mkt-quality-note {
  font-size: 11.5px !important;
  color: var(--mkt-muted) !important;
  opacity: 0.85;
}

/* ==========================================================================
 * 10. 文档页（FAQ / 隐私 / 条款 / 联系）
 * ======================================================================== */

.mkt-doc {
  padding: 96px 24px 88px !important;
}
.mkt-doc h1 {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}
.mkt-doc-intro {
  margin-bottom: 40px !important;
}

.mkt-faq-list {
  display: grid !important;
  gap: 10px !important;
}
.mkt-faq-item {
  background: linear-gradient(180deg, var(--mkt-panel-2) 0%, var(--mkt-panel) 100%) !important;
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  box-shadow: var(--mkt-hairline) !important;
  transition: border-color 0.22s var(--mkt-ease) !important;
}
.mkt-faq-item:hover {
  border-color: var(--mkt-border-strong) !important;
}
.mkt-faq-answer {
  color: var(--mkt-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

.mkt-contact-grid {
  gap: 14px !important;
}
.mkt-contact-note {
  font-size: 12.5px !important;
  color: var(--mkt-muted) !important;
}

/* ==========================================================================
 * 11. 结尾 CTA
 * ======================================================================== */

.mkt-cta {
  padding: 104px 24px !important;
  text-align: center;
}
.mkt-cta h2 {
  font-size: clamp(32px, 4.2vw, 54px) !important;
  max-width: 22ch;
  margin: 0 auto !important;
}
.mkt-cta p {
  font-size: 16px !important;
  color: var(--mkt-muted) !important;
  max-width: 54ch;
  margin: 18px auto 0 !important;
}

/* ==========================================================================
 * 12. 页脚
 * ======================================================================== */

.mkt-footer {
  border-top: 1px solid var(--mkt-border) !important;
  background: rgba(0, 0, 0, 0.24) !important;
}
.mkt-footer-inner {
  padding: 56px 24px 32px !important;
  gap: 40px !important;
}
.mkt-footer-brand {
  font-size: 14px !important;
  font-weight: 560 !important;
}
.mkt-footer-col h4,
.mkt-footer-col strong {
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mkt-muted) !important;
  margin-bottom: 12px !important;
}
.mkt-footer-col a {
  font-size: 13px !important;
  color: var(--mkt-muted) !important;
  transition: color 0.16s var(--mkt-ease) !important;
}
.mkt-footer-col a:hover {
  color: var(--mkt-text) !important;
}
.mkt-footer-note {
  font-size: 11.5px !important;
  color: var(--mkt-muted) !important;
  opacity: 0.7;
}

/* ==========================================================================
 * 13. 动效 —— 入场 stagger + 光晕呼吸
 * ======================================================================== */

@keyframes mkt-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mkt-glow-drift {
  0%,
  100% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

/* Hero 分三拍进入：标题 → 副文 → CTA */
.mkt-hero .mkt-eyebrow {
  animation: mkt-rise 0.7s var(--mkt-ease) both;
}
.mkt-hero h1 {
  animation: mkt-rise 0.8s var(--mkt-ease) 0.07s both;
}
.mkt-hero-copy {
  animation: mkt-rise 0.8s var(--mkt-ease) 0.16s both;
}
.mkt-hero-cta {
  animation: mkt-rise 0.8s var(--mkt-ease) 0.24s both;
}
.mkt-hero-note {
  animation: mkt-rise 0.8s var(--mkt-ease) 0.3s both;
}

.mkt-preview-frame {
  animation: mkt-rise 1s var(--mkt-ease) 0.18s both;
}
.mkt-preview-frame::after {
  animation: mkt-glow-drift 7s ease-in-out infinite;
}

/* 网格内卡片阶梯入场（进入视口由浏览器决定，这里只给节奏） */
.mkt-feature-grid .mkt-card,
.mkt-overview-points > *,
.mkt-steps > li {
  animation: mkt-rise 0.7s var(--mkt-ease) both;
}
.mkt-feature-grid .mkt-card:nth-child(1) { animation-delay: 0.02s; }
.mkt-feature-grid .mkt-card:nth-child(2) { animation-delay: 0.07s; }
.mkt-feature-grid .mkt-card:nth-child(3) { animation-delay: 0.12s; }
.mkt-feature-grid .mkt-card:nth-child(4) { animation-delay: 0.17s; }
.mkt-feature-grid .mkt-card:nth-child(5) { animation-delay: 0.22s; }
.mkt-feature-grid .mkt-card:nth-child(6) { animation-delay: 0.27s; }

.mkt-nav-mobile,
.mkt-menu-btn {
  border-radius: 10px !important;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-page *,
  .mkt-page *::before,
  .mkt-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
 * 15. 认证页（登录 / 注册）
 * --------------------------------------------------------------------------
 * 原来是一张浅色白卡 + 绿色按钮，从深色首页点进来会闪一下、且品牌色不一致。
 * 这里把它拉回营销站的深色语言，保持跳转前后的视觉连续。
 * ======================================================================== */

.login-page {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 40px 20px !important;
  color: var(--mkt-text) !important;
  letter-spacing: -0.008em;
}

/* 认证页撑满时还要保证露出的 body 也是深色（视口比内容高时不会闪白边） */
body:has(> .login-page),
body:has(.login-page) {
  background: #070a11 !important;
}

/* 品牌标识跟营销站的亮色一致（原来是绿色） */
.login-brand svg,
.login-brand .oll-glyph,
.login-brand [class*="mark"] {
  color: var(--mkt-accent-bright) !important;
  fill: currentColor;
}

.login-panel {
  width: min(100%, 436px) !important;
  padding: 34px 32px 30px !important;
  background: linear-gradient(180deg, var(--mkt-panel-2) 0%, var(--mkt-panel) 100%) !important;
  border: 1px solid var(--mkt-border-strong) !important;
  border-radius: var(--mkt-radius-lg) !important;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  animation: mkt-rise 0.6s var(--mkt-ease) both;
}

.login-brand {
  color: var(--mkt-text) !important;
  font-size: 15px !important;
  font-weight: 620 !important;
  letter-spacing: -0.018em !important;
}

.login-heading {
  margin: 34px 0 24px !important;
}
.login-heading p {
  color: var(--mkt-accent-bright) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.115em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.login-heading h1 {
  margin: 9px 0 7px !important;
  color: var(--mkt-text) !important;
  font-size: 30px !important;
  font-weight: 690 !important;
  letter-spacing: -0.036em !important;
}
.login-heading span {
  color: var(--mkt-muted) !important;
  font-size: 13.5px !important;
}

.login-form {
  gap: 16px !important;
}
.login-form label {
  color: var(--mkt-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.login-form input {
  height: 42px !important;
  padding: 0 13px !important;
  background: var(--mkt-input-bg) !important;
  border: 1px solid var(--mkt-border-strong) !important;
  border-radius: 11px !important;
  color: var(--mkt-text) !important;
  font-size: 14px !important;
  transition: border-color 0.18s var(--mkt-ease), box-shadow 0.18s var(--mkt-ease),
    background-color 0.18s var(--mkt-ease) !important;
}
.login-form input::placeholder {
  color: var(--mkt-muted) !important;
  opacity: 0.6;
}
.login-form input:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--mkt-accent-bright) !important;
  box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.24) !important;
  outline: none !important;
}
.login-form input[aria-invalid="true"] {
  border-color: var(--mkt-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 112, 0.18) !important;
}

.login-form button {
  width: 100% !important;
  height: 44px !important;
  margin-top: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #5a73ff 0%, var(--mkt-accent) 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 580 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 8px 24px -8px rgba(79, 107, 255, 0.7) !important;
  transition: transform 0.18s var(--mkt-ease), box-shadow 0.18s var(--mkt-ease),
    background 0.18s var(--mkt-ease) !important;
}
.login-form button:hover:not(:disabled) {
  background: linear-gradient(180deg, #6d83ff 0%, #5a73ff 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 32px -8px rgba(79, 107, 255, 0.85) !important;
  transform: translateY(-1px);
}
.login-form button:active:not(:disabled) {
  transform: translateY(1px) scale(0.994);
}

.register-field-error {
  color: var(--mkt-red) !important;
  font-size: 11.5px !important;
}

.login-notice {
  background: rgba(79, 107, 255, 0.1) !important;
  border: 1px solid rgba(79, 107, 255, 0.22) !important;
  border-radius: 11px !important;
}
.login-notice-message {
  color: #b9c2ff !important;
  font-size: 12.5px !important;
}

.login-switch {
  color: var(--mkt-muted) !important;
  font-size: 13px !important;
}
.login-switch-link {
  color: var(--mkt-accent-bright) !important;
  font-weight: 560 !important;
  transition: color 0.16s var(--mkt-ease) !important;
}
.login-switch-link:hover {
  color: #a3b0ff !important;
}

/* ==========================================================================
 * 16. 响应式
 * ======================================================================== */

@media (max-width: 1024px) {
  .mkt-hero {
    padding: 104px 20px 56px !important;
  }
  .mkt-section,
  .mkt-overview {
    padding: 72px 20px !important;
  }
}

@media (max-width: 760px) {
  .mkt-hero {
    padding: 84px 16px 44px !important;
  }
  .mkt-hero h1 {
    font-size: clamp(34px, 9vw, 46px) !important;
    letter-spacing: -0.036em !important;
  }
  .mkt-section h2,
  .mkt-overview h2,
  .mkt-cta h2 {
    font-size: clamp(26px, 7vw, 34px) !important;
  }
  .mkt-section,
  .mkt-overview,
  .mkt-doc {
    padding: 56px 16px !important;
  }
  .mkt-cta {
    padding: 64px 16px !important;
  }
  .mkt-header-inner {
    height: 56px !important;
    padding: 0 16px !important;
  }
  .mkt-card {
    padding: 18px 18px 20px !important;
  }
}

} /* @layer mkt */