/* seacomb 设计系统 —— 2026-09-19 定稿（标志 A 三格梳齿 + 宋体标题）
 *
 * 这份是全站唯一的样式来源。页面里不写行内样式，改颜色/字号只动这里。
 * 和海捷内部门户那套蓝色母版没有关系，是另一套皮。
 */

:root {
  /* 颜色 —— 深墨绿打底，黄铜做唯一强调色 */
  --deep: #0A1E1C;          /* 最深，页脚/登录左栏 */
  --deep-2: #0C2422;        /* 深色区渐变的上端 */
  --deep-3: #081A18;        /* 深色区渐变的下端 */
  --ink: #0E2A2B;           /* 正文字色 / 深色卡片 */
  --teal: #0F5B56;          /* 次强调：状态、图标描边 */
  --brass: #C8912F;         /* 唯一强调色：按钮、重点 */
  --honey: #E8B54C;         /* 深色底上的强调 */
  --ground: #EEF1EE;        /* 页面底色，海沫灰 */
  --card: #FFFFFF;
  --line: #DCE4E1;          /* 分隔线 */
  --line-2: #F1F5F4;        /* 更淡的分隔线（表格行） */
  --muted: #4A6663;         /* 次级正文 */
  --dim: #6B8481;           /* 说明文字 */
  --faint: #8FA3A0;         /* 最淡 */
  --teal-ink: #0B4A46;      /* 深青的「够黑」版：白底上写字用这个 */
  --brass-ink: #8A5E12;     /* 黄铜的「够黑」版：黄铜 #C8912F 在白底只有 2.6:1，不及格 */
  --danger: #A33D2A;        /* 风险 */
  --danger-bg: #F6E3DF;
  --warn-bg: #F7EBD3;
  --warn-fg: #7A5410;

  --on-deep: #F8F6F0;               /* 深色底上的正文 */
  --on-deep-soft: rgba(242, 239, 230, 0.74);
  --on-deep-dim: rgba(242, 239, 230, 0.5);
  --on-deep-line: rgba(242, 239, 230, 0.12);

  --serif: "Noto Serif SC", Georgia, "Songti SC", serif;
  --sans: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --page: 1440px;           /* 内容最大宽度 */
  --gutter: 96px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: 68px; line-height: 1.16; letter-spacing: -1px; }
h2 { font-size: 46px; line-height: 1.2; letter-spacing: -0.5px; }
h3 { font-size: 22px; line-height: 1.35; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ── 六边形：全站的母题（标志、序号牌、小圆点都用它） ───────────── */
.hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

/* ── 版心 ───────────────────────────────────────────────── */
.wrap { max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.dark { background: linear-gradient(180deg, var(--deep-2) 0%, var(--deep-3) 100%); color: var(--on-deep); position: relative; overflow: hidden; }
.dark .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(242,239,230,0.09) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.dark > .wrap { position: relative; }

.eyebrow { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 12px; letter-spacing: 2.2px; color: var(--teal); text-transform: uppercase; }
.dark .eyebrow { color: var(--honey); }
.eyebrow .hex { width: 10px; height: 12px; background: var(--brass); flex: none; }

/* ── 顶栏 ───────────────────────────────────────────────── */
.topbar { border-bottom: 1px solid var(--on-deep-line); }
.topbar .wrap { height: 92px; display: flex; align-items: center; gap: 52px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .marks { display: flex; gap: 3px; }
.brand .marks i { width: 13px; height: 15px; display: block; }
.brand .marks i:nth-child(1) { background: #F2EFE6; }
.brand .marks i:nth-child(2) { background: var(--teal); }
.brand .marks i:nth-child(3) { background: var(--brass); }
.brand .name { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 0.6px; color: #F2EFE6; }
.nav { flex: 1; display: flex; gap: 38px; font-size: 15px; }
.nav a { color: rgba(242, 239, 230, 0.78); }
.nav a:hover, .nav a.on { color: var(--on-deep); }
.nav a.on { border-bottom: 2px solid var(--brass); padding-bottom: 3px; }
/* 登录：描边按钮。以前是一行淡淡的字，挨着实心的「注册」几乎看不见（Leo 09-19 指出）。
   两个都长得像按钮，一个实心一个描边，主次清楚又都显眼。 */
.topbar .signin {
  color: var(--on-deep); font-size: 15px; font-weight: 500;
  padding: 11px 22px; border: 1px solid rgba(242, 239, 230, 0.45); border-radius: 2px;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.topbar .signin:hover {
  color: var(--on-deep); background: rgba(242, 239, 230, 0.1);
  border-color: var(--on-deep); transform: translateY(-2px);
}


/* 登录和注册是一对按钮，得挨着。顶栏的 flex gap 是 52px（给导航用的），
   不包一层的话这俩被撑开老远，看着不像一组（Leo 09-19 指出）。*/
.authbtns { display: flex; align-items: center; gap: 12px; }

/* ── 按钮 ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border: none; border-radius: 2px;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn-primary { background: var(--brass); color: #1C1205; }
.btn-primary:hover { color: #1C1205; transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(200, 145, 47, 0.7); }
.btn-ghost { background: transparent; color: var(--on-deep); border: 1px solid rgba(242, 239, 230, 0.3); font-weight: 500; }
.btn-ghost:hover { color: var(--on-deep); transform: translateY(-2px); }
.btn-sm { padding: 12px 24px; font-size: 15px; }
.btn-block { width: 100%; }

/* ── 卡片 ───────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.lift { transition: transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease, border-color 260ms ease; }
.lift:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -22px rgba(10, 30, 28, 0.35); border-color: var(--teal); }

/* 小标签：白底上必须看得清。黄铜 #C8912F 在白底只有 2.6:1，不及格，
   所以文字用深一档的 --brass-ink / --teal-ink，色块本身还是黄铜。 */
.chip { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 1px; white-space: nowrap; }
.chip-live { color: var(--teal-ink); }
.chip-beta { color: var(--brass-ink); }
.chip-plan { color: var(--dim); }
.chip-custom { padding: 3px 9px; border: 1px solid var(--teal); border-radius: 2px; color: var(--teal-ink); font-weight: 700; }

.mobilebrand { display: none; }      /* 桌面上不要，左边那块大的够了 */

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -1px; }

/* 深色区里的白卡片：字色必须掰回墨色。不掰的话 label 继承深色区的米色，
   白底米字 = 几乎看不见（2026-09-19 首页注册表单的「公司」「怎么称呼」就这么隐身了）。*/
.dark .card, .dark .card h1, .dark .card h2, .dark .card h3,
.dark .card p, .dark .card label, .dark .card span, .dark .card div { color: var(--ink); }
.dark .card .hint, .card .hint { color: var(--dim); }

/* ── 表单 ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field input, .field textarea, .field select {
  height: 50px; padding: 0 14px; border: 1px solid #C9D6D3; border-radius: 2px;
  font-family: inherit; color: var(--ink); background: var(--card);
  /* 16px 不是随便定的：iOS Safari 遇到小于 16px 的输入框会自动放大整页，
     放大之后卡片被顶出屏幕、什么都对不齐（2026-09-20 Leo 在手机上撞到）。 */
  font-size: 16px;
  max-width: 100%;
}
.field textarea { height: auto; padding: 12px 14px; font-family: var(--mono); font-size: 13px; line-height: 1.75; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }


/* 主视觉那句「客户拿什么语言问价」：十句轮着换。
   十条各占 10%，每条亮 3 秒左右，循环 30 秒。纯 CSS，没脚本也在转。 */
.rot { position: relative; display: block; height: 1.7em; overflow: hidden; }
.rot span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: #F2EFE6; font-weight: 500; opacity: 0;
  animation: rotword 30s ease-in-out infinite;
}
@keyframes rotword {
  0%, 1%   { opacity: 0; transform: translateY(10px); }
  2%, 8.5% { opacity: 1; transform: translateY(0); }
  10%, 100% { opacity: 0; transform: translateY(-10px); }
}
.rot span:nth-child(1)  { animation-delay: 0s; }
.rot span:nth-child(2)  { animation-delay: 3s; }
.rot span:nth-child(3)  { animation-delay: 6s; }
.rot span:nth-child(4)  { animation-delay: 9s; }
.rot span:nth-child(5)  { animation-delay: 12s; }
.rot span:nth-child(6)  { animation-delay: 15s; }
.rot span:nth-child(7)  { animation-delay: 18s; }
.rot span:nth-child(8)  { animation-delay: 21s; }
.rot span:nth-child(9)  { animation-delay: 24s; }
.rot span:nth-child(10) { animation-delay: 27s; }
/* 不转的时候至少得看见第一句，别留一行空白 */
@media (prefers-reduced-motion: reduce) {
  .rot { height: auto; }
  .rot span { position: static; opacity: 1; animation: none; }
  .rot span:not(:first-child) { display: none; }
}

/* ── 主视觉里的「梳理机」动画 ─────────────────────────────── */
@keyframes cellpulse {
  0%, 72%, 100% { opacity: 0.24; transform: translateY(0); }
  12% { opacity: 1; transform: translateY(-3px); }
  30% { opacity: 0.46; transform: translateY(0); }
}
.cell { animation: cellpulse 4.8s ease-in-out infinite; }
.cell:nth-child(1) { animation-delay: 0s; }
.cell:nth-child(2) { animation-delay: .16s; }
.cell:nth-child(3) { animation-delay: .32s; }
.cell:nth-child(4) { animation-delay: .48s; }
.cell:nth-child(5) { animation-delay: .64s; }
.cell:nth-child(6) { animation-delay: .8s; }
.cell:nth-child(7) { animation-delay: .96s; }
.cell:nth-child(8) { animation-delay: 1.12s; }

@keyframes laneflow {
  0%   { transform: translateX(0) scale(1); opacity: .25; }
  8%   { opacity: 1; }
  58%  { transform: translateX(196px) scale(.94); opacity: 1; }
  76%  { transform: translateX(238px) scale(.68); opacity: 0; }
  100% { transform: translateX(238px) scale(.68); opacity: .25; }
}
.lane { animation: laneflow 6.6s cubic-bezier(.45,.05,.3,1) infinite; }
.lane.l2 { animation-delay: 2.2s; }
.lane.l3 { animation-delay: 4.4s; }

@keyframes rowlight {
  0%, 46%, 100% { background: rgba(232,181,76,0); }
  56% { background: rgba(232,181,76,.16); }
  74% { background: rgba(232,181,76,.05); }
}
.rowl { animation: rowlight 6.6s ease-out infinite; }
.rowl.l2 { animation-delay: 2.2s; }
.rowl.l3 { animation-delay: 4.4s; }

@keyframes scanx {
  0%, 100% { transform: translateY(0); opacity: 0; }
  18% { opacity: .9; }
  62% { transform: translateY(150px); opacity: 0; }
}
.scan { animation: scanx 4.8s ease-in-out infinite; }

@keyframes feedroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.feedroll { animation: feedroll 24s linear infinite; }

@keyframes runx { 0% { left: 0; } 100% { left: calc(100% - 12px); } }
.runner { animation: runx 7.5s cubic-bezier(.65,0,.35,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .cell, .lane, .rowl, .scan, .feedroll, .runner { animation: none; }
  .cell, .lane { opacity: 1; }
}


/* ── 手机（≤760px）───────────────────────────────────────────
   Leo 一整天在手机上用，这一段不是附送的，是主场之一。 */
@media (max-width: 760px) {
  :root { --gutter: 18px; }

  h1 { font-size: 32px; letter-spacing: -0.5px; }
  h2 { font-size: 25px; }
  h3 { font-size: 19px; }

  /* 顶栏：导航收起来，只留标志和登录/注册 */
  .topbar .wrap { height: 62px; gap: 10px; }
  .brand .name { font-size: 19px; }
  .topbar .signin { padding: 9px 13px; font-size: 14px; }
  .btn { padding: 13px 20px; font-size: 15px; }
  .btn-sm { padding: 10px 15px; font-size: 14px; }

  /* 手机上左边品牌块收掉了，顶上得补一个小标志，不然没处点回首页 */
  .mobilebrand { display: flex !important; margin-bottom: 20px; }
  .mobilebrand .name { color: var(--ink); font-size: 21px; }
  .mobilebrand .marks i:nth-child(1) { background: var(--ink); }

  /* 登录/注册/验证码那几页：左边那半块品牌图在手机上不占地方 */
  .brandside { display: none !important; }
  .authpage { grid-template-columns: 1fr !important; min-height: auto !important; }
  .authpane { padding: 26px 18px !important; }

  /* 卡片和分栏：一律一栏 */
  .card { border-radius: 4px; }
  .two-col, .grid-3, .grid-4, .hero-grid, .app-grid { grid-template-columns: 1fr !important; }

  /* 表格横着滑，别把页面撑破 */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablewrap > * { min-width: 560px; }

  /* 深色区里那些大块留白收一收 */
  section > .wrap { padding-top: 34px !important; padding-bottom: 34px !important; }
}

/* ── 窄屏：一列排下来 ─────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  .topbar .wrap { height: 64px; gap: 16px; }
  .nav { display: none; }
  .two-col, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
}

/* ── 密码框右边的眼睛 ─────────────────────────────────────── */
.pw { position: relative; display: flex; }
.pw input { flex: 1; padding-right: 48px; }
.pw .eye {
  position: absolute; right: 0; top: 0; width: 48px; height: 50px;
  background: none; border: none; cursor: pointer; color: var(--dim);
  display: flex; align-items: center; justify-content: center;
}
.pw .eye:hover { color: var(--ink); }

/* ── 验证码那一格 ─────────────────────────────────────────── */
.code-input {
  height: 62px; font-family: var(--mono); font-size: 30px; font-weight: 500;
  letter-spacing: 14px; text-align: center; text-indent: 14px;
}