/* ===== Movira 落地页样式 ===== */
:root {
  --ink: #10141a;
  --accent: #b85f2c;
  --accent-soft: #d4793f;
  --bg: #10141a;
  --surface: #171d27;
  --surface-2: #1d2430;
  --text: #f4f6f8;
  --text-2: #ffffffa8;
  --text-on-ink: #ffffff;
  --border: #ffffff14;
  --maxw: 1080px;
  --pad: 20px;
  /* --fp-rise：淡入上浮的位移量。整屏「逃生舱」容器的下内边距要不小于它，两处必须联动。
     --fp-pad-b：容器「自己本来的下内边距」，默认 0；有自带内边距的容器在自己身上
     覆盖它，供整屏那段的 max() 判据取用。默认值必须挂在祖先，不能挂进
     `.fullpage-slide > .container` 那条规则，否则会盖过容器自身的覆盖值。 */
  --fp-rise: 12px;
  --fp-pad-b: 0px;
  --radius: 16px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--bg);
       line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 72px 0; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: 13px;
           letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; }
h1 { font-size: clamp(36px, 7vw, 64px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.5px; line-height: 1.18; }
h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.hidden { display: none !important; }
#fullpage-dots { display: none; }

/* ===== 顶部导航 ===== */
.nav { background: var(--ink); color: var(--text-on-ink);
       position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; height: 60px; gap: 16px; }
.nav-back { font-size: 14px; color: #ffffff70; transition: color .12s; }
.nav-back:hover { color: #fff; }
.nav-brand { font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: #fff; margin-right: auto; }
.nav-actions { position: relative; display: flex; align-items: center; }
.lang-toggle { background: transparent; color: #fff; border: 1px solid #ffffff2e;
               height: 34px; padding: 0 10px; border-radius: 8px; cursor: pointer;
               font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.lang-menu { position: absolute; top: 42px; right: 0; background: #fff; color: var(--ink);
             border-radius: 10px; box-shadow: 0 8px 24px #0003; padding: 6px;
             display: none; min-width: 130px; z-index: 10; }
.lang-menu.open { display: block; }
.lang-menu a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
/* 白底菜单上的 hover 底色：不能用 --bg —— Movira 的 --bg 是 #10141a 深色页面底，
   会变成黑底黑字（文字色继承 .lang-menu 的 var(--ink)，同为 #10141a，对比度 1:1）。
   公司站 styles.css 里同名规则能生效，是因为那边 --bg 是浅色暖白，别照抄回来。 */
.lang-menu a:hover { background: #00000010; }

/* ===== Hero ===== */
.hero { background: var(--ink); color: var(--text-on-ink);
        padding: 96px 0 112px; position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, #2a1a0e44, transparent);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-badge {
  display: inline-block;
  background: #ffffff12;
  border: 1px solid #ffffff22;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  color: #ffffff99;
  letter-spacing: .5px;
  margin-bottom: 24px;
}
.hero h1 { max-width: 14ch; margin-bottom: 20px; }
.hero-sub { font-size: 18px; color: #ffffffb0; max-width: 44ch; margin-bottom: 40px; }

/* ===== 邮箱表单 ===== */
.signup-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 480px;
}
.signup-input {
  flex: 1; min-width: 220px;
  height: 48px; padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid #ffffff22;
  background: #ffffff14;
  color: #fff;
  font: inherit; font-size: 15px;
  outline: none;
  transition: border-color .15s;
}
.signup-input::placeholder { color: #ffffff55; }
.signup-input:focus { border-color: #ffffff55; background: #ffffff1e; }
.btn-signup {
  height: 48px; padding: 0 24px;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: opacity .12s;
}
.btn-signup:hover { opacity: .9; }
.signup-note { margin-top: 12px; font-size: 13px; color: #ffffff50; }
.signup-success { margin-top: 14px; font-size: 15px; color: #6adc9e; font-weight: 600; }

/* ===== 功能卡片 ===== */
.features { background: var(--ink); color: var(--text-on-ink); }
.features h2 { margin: 8px 0 32px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.feat-ic { font-size: 26px; margin-bottom: 12px; }
.feat-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; }

@media (max-width: 960px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* ===== 为什么 Movira ===== */
.highlights { background: var(--ink); color: var(--text-on-ink); }
.highlights h2 { margin: 8px 0 24px; }
.highlights .hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.highlights .hl {
  border-top: 2px solid var(--accent);
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.highlights .hl h3 { margin-bottom: 6px; }
.highlights .hl p { color: var(--text-2); font-size: 14px; line-height: 1.6; }

@media (max-width: 720px) { .highlights .hl-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ===== 底部 CTA ===== */
.cta-section { background: var(--ink); color: var(--text-on-ink); }
.cta-inner { text-align: center; }
.cta-inner h2 { margin-bottom: 14px; }
.cta-inner p { color: #ffffffb0; margin-bottom: 32px; font-size: 17px; }
.cta-inner .signup-form { margin: 0 auto; justify-content: center; }

/* ===== 页脚 ===== */
.footer { background: var(--ink); border-top: 1px solid #ffffff0f; padding: 28px 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
                font-size: 13px; color: #ffffff60; }
.footer-copy { color: #ffffff60; }
.footer-inner a { color: #ffffff80; }
.footer-inner a:hover { color: #fff; }
.footer-icp { color: #ffffff52; }
/* 备案合规信息栏 —— 独占页脚最下面一整行 */
.footer-compliance { width: 100%; display: grid; gap: 4px;
                     margin-top: 16px; padding-top: 14px;
                     border-top: 1px solid #ffffff14;
                     font-size: 12px; line-height: 1.7; color: #ffffff8c; }
/* i18n 的 data-lang-only 用 el.hidden 隐藏；上面的 display:grid 会盖过
   UA 的 [hidden]{display:none}，必须显式补这条，否则非中文语言下仍会显示 */
.footer-compliance[hidden] { display: none; }
.footer-compliance p { margin: 0; }
.footer-inner .footer-compliance a { color: #ffffff9e; }
.footer-inner .footer-compliance a:hover { color: #fff; }
.footer-inner .footer-compliance .footer-icp a { color: #ffffff52; }
.footer-inner .footer-compliance .footer-icp a:hover { color: #fff; }
/* ICP 号和公安备案号尽量同一行、单个号码内部绝不能被拆断（用户明确要求），
   所以 > * 恒定 flex-shrink:0 + white-space:nowrap；但极窄屏幕（≤560px）下
   两个号加起来可能比视口还宽，这时改成允许整组换行——两个号各自单独一行、
   完整可见，优先保证公示号码不被裁掉，而不是死守"同一行"逼出横向滚动条 */
.footer-beian-group { display: flex; flex-wrap: nowrap; gap: 24px; max-width: 100%; }
.footer-beian-group > * { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .footer-beian-group { flex-wrap: wrap; gap: 2px 24px; }
}
.footer-beian-icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }

@media (min-width: 720.02px) {
  html { scroll-snap-type: y mandatory; }
  html.fp-jump { scroll-snap-type: none !important; }
  html.fp-js-ready .fp-stagger [data-fp-order] {
    opacity: 0;
    transform: translateY(var(--fp-rise));
    transition-property: opacity, transform;
    transition-duration: .45s, .45s;
    transition-timing-function: ease, ease;
  }
  .fp-stagger [data-fp-order="1"] { transition-delay: 0ms; }
  .fp-stagger [data-fp-order="2"] { transition-delay: 80ms; }
  .fp-stagger [data-fp-order="3"] { transition-delay: 160ms; }
  .fp-stagger [data-fp-order="4"] { transition-delay: 240ms; }
  .fp-stagger [data-fp-order="5"] { transition-delay: 320ms; }
  .fp-stagger [data-fp-order="6"] { transition-delay: 400ms; }
  .fullpage-slide.is-active .fp-stagger [data-fp-order] {
    opacity: 1;
    transform: translateY(0);
  }

  .fullpage-slide {
    height: calc(100vh - 60px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    overflow: hidden;
  }

  .fullpage-slide[data-slide-index="3"] > .cta-section {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    align-items: safe center;
  }

  .fullpage-slide[data-slide-index="3"] > .footer { flex: 0 0 auto; }

  .fullpage-slide > .container,
  .fullpage-slide[data-slide-index="3"] > .cta-section {
    max-height: 100%;
    overflow-y: auto;
  }
  /* 未激活的屏，内容带着 translateY(--fp-rise) 等淡入。transform 位移会算进滚动
     溢出区，让上面的 overflow-y:auto 冒出一条幽灵滚动条（内容并未真的超出），
     位移那一截还会被裁掉。判据是「容器自身下内边距 ≥ --fp-rise」，取两者较大者：
     本来就够宽裕的保持原值，谁改小了也会自动被垫回来，不会静默退化。

     两条使用须知，别踩：
     ① 本规则**无条件**接管所有 .fullpage-slide > .container 的 padding-bottom。
        将来给某个 slide 直接子容器加下内边距，必须同时把值报进 --fp-pad-b，
        否则会被这里静默压成 --fp-rise。三个 .container 目前都靠基础 .container
        规则的 `padding: 0 var(--pad)`，下内边距为 0，所以无需申报。
     ② 覆盖范围**只有** .container。.cta-section 是另一个滚动容器，靠 .section 的
        32px（> --fp-rise）自带余量豁免，属静态假设、不在自愈范围内：.section 的
        32px 哪天被改到小于 --fp-rise，第 4 屏的幽灵滚动条会悄悄回来。 */
  .fullpage-slide > .container { padding-bottom: max(var(--fp-pad-b), var(--fp-rise)); }

  .hero { padding: 48px 0 56px; }
  .section { padding: 32px 0; }
  .features h2 { margin-bottom: 24px; }
  .highlights .hl-grid { gap: 20px; }
  .feat-card { padding: 18px; }
  .cta-inner p { margin-bottom: 24px; }

  #fullpage-dots {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 30;
  }

  .fullpage-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
  }

  .fullpage-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    opacity: .35;
  }

  .fullpage-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .fullpage-dot.is-current::before {
    opacity: 1;
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 720.02px) {
  html { scroll-behavior: auto; }
  /* 本分支下 transform 被强制 none，没有位移要容纳，补偿纯属多余的上下不对称，
     还会让矮视口逃生舱提前 --fp-rise 触发。退回容器自带的下内边距，不写死 0，
     以免将来某个容器有了自己的下内边距被一并抹掉。
     ⚠️ 本条与桌面态那条补偿规则特异度同为 (0,2,0)，靠"写在更后面"胜出，顺序敏感；
        取到的值还依赖 --fp-pad-b 在桌面态媒体查询里被声明，两处断点必须一致 */
  .fullpage-slide > .container { padding-bottom: var(--fp-pad-b); }
  .fp-stagger [data-fp-order] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .hero { padding: 64px 0 80px; }
  .section { padding: 52px 0; }
  .signup-form { flex-direction: column; }
  .signup-input, .btn-signup { width: 100%; }
  #fullpage-dots { display: none !important; }
}

/* ── 法务页（legal/privacy.html · legal/terms.html）────────────────────
   落地页是全屏滚动的营销页,法务页是长文档,两者布局需求不同,
   故单列一组 .legal-* 样式,不与 .section / .fullpage-slide 混用。 */

.legal-main { background: var(--bg); padding: 56px 0 80px; }
.legal-doc { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }

.legal-doc h1 { font-size: 30px; letter-spacing: -.5px; margin-bottom: 12px; }
.legal-doc h2 {
  font-size: 20px; margin: 44px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.legal-doc h3 { font-size: 16px; margin: 26px 0 10px; }
.legal-doc p, .legal-doc li { color: #ffffffc4; font-size: 15px; line-height: 1.75; }
.legal-doc p { margin-bottom: 14px; }
.legal-doc strong { color: var(--text); font-weight: 700; }
.legal-doc a { color: var(--accent-soft); text-decoration: underline; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px 22px; }
.legal-doc li { margin-bottom: 8px; }

/* 文档头的生效日期 / 版本行 */
.legal-meta {
  color: #ffffff70; font-size: 13px; line-height: 1.7;
  padding-bottom: 22px; margin-bottom: 4px;
}

/* 「本政策仅适用于 App」这类范围声明 */
.legal-scope {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 22px;
}
.legal-scope p { margin: 0; font-size: 14px; color: #ffffffb0; }

/* 重点提示块（健康风险 / 注销不可逆） */
.legal-callout {
  background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; margin: 20px 0;
}
.legal-callout p:last-child { margin-bottom: 0; }

/* 表格:窄屏横向滚动,不撑破页面 */
.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.legal-doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.legal-doc th, .legal-doc td {
  border: 1px solid var(--border); padding: 10px 12px;
  text-align: left; vertical-align: top; line-height: 1.6;
}
.legal-doc th { background: var(--surface); color: var(--text); font-weight: 700; }
.legal-doc td { color: #ffffffb8; }

.legal-back { display: inline-block; margin-bottom: 26px; font-size: 14px; color: #ffffff80; }
.legal-back:hover { color: #fff; }

.legal-sign {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border);
  color: #ffffff60; font-size: 13px;
}

@media (max-width: 720px) {
  .legal-main { padding: 32px 0 56px; }
  .legal-doc h1 { font-size: 25px; }
  .legal-doc h2 { font-size: 18px; margin-top: 34px; }
}