/* Seatly 产品站样式。
   ★ 和 app 的 base.css 共用调色板，但排版语言刻意不同：
     app 是密集的工具界面，产品站要留白、要大字号。
   ★ 不依赖 base.css——这两个页面由 nginx 直接发，不经过应用，
     也就不该跟应用的样式表绑在一起。 */

:root{
  --paper:#FFFFFF; --soft:#F4F6F5; --card:#FAFBFA;
  --ink:#141A19; --ink-mute:#57625F; --ink-faint:#8A9491;
  --rule:#DDE2E0; --rule-soft:#EBEEED;
  --cinnabar:#B3342A; --cinnabar-bg:#FBEEEC;
  --slate:#2F5C55; --slate-bg:#E7F0ED;
  --sel:#1F6FB2;
  /* ★ 一律用系统字体，不再从 Google Fonts 拉
     原来第一档是 Noto Sans SC，国内基本拉不到，实际落到的仍是苹方/雅黑——
     也就是说那次跨境请求多数时候只换来一段首屏字体闪烁和几百毫秒等待。
     索性去掉，以系统字体为准。

     顺序的用意：-apple-system / Segoe UI 负责拉丁字母（它们没有中文字形，
     中文会自动落到后面那几档），苹方管 macOS，雅黑管 Windows，
     思源/Noto CJK 管 Linux。 */
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1120px;

  /* 插画专用色板。刻意比界面配色饱和得多——界面要克制（一屏几百个座位，
     花了就没法看），广告图要抓人。两套色板各管各的，别互相牵制。 */
  --i-teal:#0FB5A0; --i-teal-d:#079C8A;
  --i-coral:#FF6B52; --i-coral-d:#E8452B;
  --i-indigo:#5B6CFF; --i-indigo-d:#3D4FE0;
  --i-amber:#FFB020; --i-amber-d:#E89200;
  --i-violet:#A855F7;
  --i-ink:#0F1A18;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101514; --soft:#161D1B; --card:#1A2321;
    --ink:#E7ECEA; --ink-mute:#9EA9A6; --ink-faint:#6E7976;
    --rule:#2A3532; --rule-soft:#212A28;
    --cinnabar:#E2705F; --cinnabar-bg:#2C1D1B;
    --slate:#6FAEA2; --slate-bg:#182724;
    --sel:#6BA9DC;
    /* 深色下把饱和色提亮一档，否则在暗底上会发闷 */
    --i-teal:#2BD3BC; --i-teal-d:#14B8A1;
    --i-coral:#FF8570; --i-coral-d:#FF6146;
    --i-indigo:#8A94FF; --i-indigo-d:#6875F5;
    --i-amber:#FFC24D; --i-amber-d:#FFA81F;
    --i-violet:#C084FC;
    --i-ink:#0B1413;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{margin:0;font-weight:500;line-height:1.3}
p{margin:0}
a{color:inherit}

/* ── 顶栏 ───────────────────────── */
.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;
  padding:14px 24px;
  /* 不透明度给到 96%：backdrop-filter 在一些环境（老 Safari、截图渲染器）
     根本不生效，只靠它的话正文会直接透过顶栏，看着像串行了。 */
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-soft);
}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand .wm-cn{font-weight:700;font-size:20px;letter-spacing:.07em}
.brand .wm-en{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  color:var(--ink-faint);margin-left:7px}
.navlinks{display:flex;gap:26px;margin-left:12px}
.navlinks a{text-decoration:none;font-size:14.5px;color:var(--ink-mute)}
.navlinks a:hover{color:var(--ink)}
.navcta{margin-left:auto;display:flex;gap:10px;align-items:center}

.btn{
  display:inline-block;text-decoration:none;border-radius:6px;
  font-size:14.5px;font-weight:400;padding:9px 18px;white-space:nowrap;
  transition:background .14s,border-color .14s,transform .14s;
}
.btn.ghost{border:1px solid var(--rule);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink-faint);background:var(--soft)}
.btn.solid{background:var(--slate);border:1px solid var(--slate);color:#fff}
.btn.solid:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn.big{font-size:16px;padding:13px 28px;border-radius:7px}

/* ── 首屏 ───────────────────────── */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:68px 24px 76px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.eyebrow{
  display:inline-block;font-size:12.5px;letter-spacing:.1em;color:var(--slate);
  background:var(--slate-bg);padding:5px 13px;border-radius:14px;margin-bottom:22px;
}
.hero h1{font-size:50px;font-weight:700;letter-spacing:-.01em;margin-bottom:22px}
.lead{font-size:17.5px;color:var(--ink-mute);margin-bottom:30px}
.lead b{font-weight:500;color:var(--ink)}
.herobtn{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tiny{font-size:13px;color:var(--ink-faint)}
.hero-art svg{width:100%;height:auto;display:block}

/* ── 插画笔法 ─────────────────────
   原则：色块优先、描边其次。表意为主，不做界面还原——
   线框图看着像产品截图，放在广告位上既不好看也不说明问题。 */
.ill{width:100%;height:auto;display:block}
.ill text{font-family:var(--f-body)}
.i-cap{font-size:13px;font-weight:500;fill:#fff;text-anchor:middle}
.i-cap-d{font-size:12.5px;font-weight:500;fill:var(--ink);text-anchor:middle}
.i-tag{font-size:12px;font-weight:500;fill:#fff}
.i-num{font-size:15px;font-weight:700;fill:#fff;text-anchor:middle;
  font-family:var(--f-mono)}

/* ── 通用分区 /* ── 通用分区 ───────────────────── */
.sec-t{font-size:33px;font-weight:700;text-align:center;letter-spacing:-.01em}
.sec-s{text-align:center;color:var(--ink-mute);margin-top:12px;font-size:16.5px}
.band{background:var(--soft);padding:72px 0;border-block:1px solid var(--rule-soft)}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:26px 24px}
.card h3{font-size:17px;margin:14px 0 9px}
.card p{font-size:14.5px;color:var(--ink-mute)}
.ic{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  font-size:16px;font-weight:500;
}
.ic-cin{background:var(--cinnabar-bg);color:var(--cinnabar)}

/* ── 功能块 ─────────────────────── */
.feats{padding:80px 24px}
.feat{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  margin-top:64px;
}
.feat.rev .feat-t{order:2}
.num{font-family:var(--f-mono);font-size:13px;color:var(--slate);margin-bottom:10px}
.feat h3{font-size:26px;font-weight:700;margin-bottom:14px}
.feat p{color:var(--ink-mute);font-size:16px}
.feat p b{font-weight:500;color:var(--ink)}
.ticks{list-style:none;padding:0;margin:20px 0 0}
.ticks li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:14.5px;color:var(--ink-mute);
}
.ticks li b{font-weight:500;color:var(--ink)}
.ticks li::before{
  content:'';position:absolute;left:4px;top:10px;width:9px;height:9px;
  border-radius:50%;background:var(--slate);
}
.feat-art{border-radius:16px;padding:8px;overflow:hidden}
.feat-art svg{width:100%;height:auto;display:block}

/* ── 数字 ───────────────────────── */
.stats{background:var(--slate);color:#fff;padding:44px 0;margin-top:80px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.statgrid b{display:block;font-family:var(--f-mono);font-size:40px;font-weight:500;line-height:1.2}
.statgrid span{font-size:14px;opacity:.82}

/* ── 四步 ───────────────────────── */
.steps{padding:80px 24px}
.steplist{list-style:none;padding:0;margin:48px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steplist li{display:flex;flex-direction:column;gap:14px}
.steplist span{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--slate-bg);color:var(--slate);
  font-family:var(--f-mono);font-size:16px;font-weight:500;
}
.steplist h4{font-size:17px;margin-bottom:7px}
.steplist p{font-size:14.5px;color:var(--ink-mute)}

/* ── CTA ────────────────────────── */
.cta{background:var(--soft);padding:76px 0;text-align:center;
  border-top:1px solid var(--rule-soft)}
.cta h2{font-size:31px;font-weight:700}
.cta p{color:var(--ink-mute);margin:14px 0 28px;font-size:16.5px}

/* ── 页脚 ───────────────────────── */
.foot{background:var(--paper);border-top:1px solid var(--rule);padding:52px 0 26px}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.foot-brand{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.foot-brand b{display:block;font-weight:700;font-size:16px}
.foot-brand span{font-size:12.5px;color:var(--ink-faint)}
.foot-col h5{font-size:12.5px;letter-spacing:.06em;color:var(--ink-faint);
  margin-bottom:12px;font-weight:500}
.foot-col a{display:block;text-decoration:none;font-size:14px;
  color:var(--ink-mute);margin-bottom:9px}
.foot-col a:hover{color:var(--slate);text-decoration:underline}
.foot-bot{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-faint);
}
.fnote{max-width:520px}

/* ── 窄屏 ───────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:38px;padding:44px 24px 56px}
  .hero h1{font-size:36px}
  .feat,.feat.rev .feat-t{grid-template-columns:1fr;order:0}
  .feat{gap:28px;margin-top:48px}
  .cards3,.steplist{grid-template-columns:1fr}
  .statgrid{grid-template-columns:repeat(2,1fr);gap:28px}
  .foot-top{grid-template-columns:repeat(2,1fr);gap:26px}
  .sec-t{font-size:26px}

  /* 手机上的导航。原来这里是 .navlinks{display:none}——顶栏只剩品牌和
     登录按钮，「座次指南」「场景示例」两个内容栏目在手机上根本点不到，
     而手机正是搜索来的人最多的入口。
     改成折到第二行、横向可滑：不引入 JS，也不用汉堡菜单那套展开收起——
     链接一直看得见，比藏进抽屉里更容易被点。 */
  .nav{flex-wrap:wrap;gap:0 14px;padding:12px 16px 0}
  .navlinks{
    order:3;width:100%;margin:11px -16px 0;padding:10px 16px;
    gap:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--rule-soft);
    scrollbar-width:none;                 /* 滑动条在窄屏上只会碍事 */
  }
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap}         /* 不许折行，否则一条挤成两行 */
}
@media (max-width:560px){
  .foot-top{grid-template-columns:1fr}
  .herobtn .btn{flex:1;text-align:center}
}

/* 页脚的品牌字块 */
.foot-brand .wm-cn{display:block;font-weight:700;font-size:16px;letter-spacing:.06em}
.foot-brand .wm-en{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--ink-faint)}