/* ── @font-face (filenames per assets/fonts/) ───────────────────────── */
@font-face { font-family:"Inter"; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap; src:url("/assets/fonts/jbmono-latin-400.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap; src:url("/assets/fonts/jbmono-latin-500.woff2") format("woff2"); }

/* ── tokens (mirror of src/sidepanel/index.css, light only) ─────────── */
:root {
  --c-canvas:#FAFBFC; --c-surface:#FFFFFF; --c-field:#F4F6F8; --c-line:#E4E8EC;
  --c-fg-1:#14181D; --c-fg-2:#5A6470; --c-fg-3:#98A1AC; --c-fg-4:#B8BFC8;
  --c-accent:#4A5C6E; --c-accent-tint:rgba(74,92,110,0.08); --c-warning:#B85A4D;
  --c-dot:rgba(20,24,29,0.05); --c-dot-dark:rgba(232,236,242,0.07);
  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --maxw:1312px; /* 1440 - 64*2 内容宽 */
  --ease:cubic-bezier(0.32,0.72,0,1);
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--c-canvas); color:var(--c-fg-1);
  font-family:var(--font-sans); font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; }

/* ── shared utilities ───────────────────────────────────────────────── */
.caps { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; }
.mono { font-family:var(--font-mono); }
.tabular { font-variant-numeric:tabular-nums; }
.hairline { height:1px; width:100%; background:var(--c-line); }
.section { width:100%; padding:104px 64px; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; }

/* ── motion (Linear/Raycast easing) ─────────────────────────────────── */
@keyframes reveal { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none; } }
.reveal { animation:reveal 480ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ── topbar ──────────────────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.8); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--c-line); }
.topbar-in { display:flex; align-items:center; justify-content:space-between; padding:14px 64px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-word { font-weight:600; font-size:19px; letter-spacing:-0.01em; }
.nav-right { display:flex; align-items:center; gap:16px; }
.lang { display:flex; align-items:center; gap:2px; padding:3px; background:var(--c-field); border-radius:9px; }
.lang-btn { font-family:var(--font-mono); font-size:11px; font-weight:500; padding:5px 11px; border:0; background:transparent; color:var(--c-fg-3); border-radius:7px; cursor:pointer; }
.lang-btn[aria-pressed="true"] { background:#fff; color:var(--c-fg-1); box-shadow:0 1px 2px rgba(20,24,29,0.06); }
.ghost.gh-pill { display:flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--c-line); border-radius:10px; font-size:14px; font-weight:500; color:var(--c-fg-2); cursor:pointer; }
.gh-count { font-size:13px; color:var(--c-fg-3); }
.btn-ink { display:inline-flex; align-items:center; gap:9px; padding:10px 18px; background:var(--c-fg-1); color:var(--c-canvas); border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:transform 150ms var(--ease); }
.btn-ink:hover { transform:translateY(-1px); }

/* ── hero ──────────────────────────────────────────────────── */
.hero-in { display:flex; gap:72px; align-items:center; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:24px; flex:1; max-width:600px; }
.hero-eyebrow { color:var(--c-accent); }
.hero-title { margin:0; font-size:66px; font-weight:600; line-height:1.03; letter-spacing:-0.025em; }
.hero-sub { margin:0; font-size:18px; line-height:1.55; color:var(--c-fg-2); max-width:500px; }
.cta-row { display:flex; align-items:center; gap:12px; padding-top:8px; }
.btn-ink.lg { padding:14px 22px; font-size:15px; }
.btn-outline { display:inline-flex; align-items:center; gap:8px; padding:13px 18px; background:#fff; border:1px solid var(--c-line); border-radius:11px; font-size:15px; font-weight:500; cursor:pointer; transition:border-color 150ms var(--ease); }
.btn-outline:hover { border-color:var(--c-fg-3); }
.hero-micro { color:var(--c-fg-3); font-size:12px; letter-spacing:0.02em; }

/* ── side panel mock ─────────────────────────────────────────────────── */
.panel { display:flex; flex-direction:column; width:432px; flex-shrink:0; background:#fff; border:1px solid var(--c-line); border-radius:16px; box-shadow:0 24px 60px -24px rgba(20,24,29,0.22), 0 4px 12px rgba(20,24,29,0.04); overflow:hidden; }
.panel-bar { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--c-line); }
.panel-title { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; }
.panel-icons { display:flex; gap:14px; }
.panel-body { display:flex; flex-direction:column; gap:14px; padding:18px 16px 16px; background:var(--c-canvas); }
.bubble-user { align-self:flex-end; max-width:78%; padding:10px 14px; background:var(--c-fg-1); color:var(--c-canvas); border-radius:13px 13px 4px 13px; font-size:13px; line-height:1.46; }
.steps { display:flex; flex-direction:column; gap:8px; align-self:flex-start; padding-left:2px; }
.step { display:flex; align-items:center; gap:8px; }
.step .ck { width:13px; height:13px; fill:none; stroke:var(--c-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.step .mono { font-size:11px; font-weight:500; letter-spacing:0.04em; color:var(--c-fg-2); }
.reply { display:flex; flex-direction:column; gap:10px; }
.reply-badge { display:flex; align-items:center; gap:8px; }
.reply-badge .dot { width:4px; height:4px; border-radius:50%; background:var(--c-accent); }
.reply-badge .caps { color:var(--c-fg-2); }
.md-list { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
.md-list li { font-size:13px; line-height:1.54; color:var(--c-fg-1); }
.panel-input { display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--c-line); }
.panel-field { flex:1; padding:10px 13px; background:var(--c-field); border-radius:10px; font-size:13px; color:var(--c-fg-3); }
.panel-send { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; background:var(--c-accent); border-radius:9px; }

/* ── scenario tour ───────────────────────────────────────────────────── */
.tour .wrap { display:flex; flex-direction:column; gap:80px; }
.tour-head { display:flex; flex-direction:column; gap:16px; max-width:640px; }
.h-section { margin:0; font-size:46px; font-weight:600; line-height:1.08; letter-spacing:-0.02em; }
.sub { margin:0; font-size:17px; line-height:1.55; color:var(--c-fg-2); }
.srow { display:flex; gap:56px; align-items:flex-start; width:100%; }
.cmd { width:520px; flex:0 0 520px; display:flex; flex-direction:column; gap:18px; }
.res { width:736px; flex:0 0 736px; }
.srow-tag { display:flex; align-items:center; gap:8px; }
.tag-n { color:var(--c-accent); font-weight:600; letter-spacing:0.14em; }
.tag-d { color:var(--c-fg-3); letter-spacing:0.14em; }
.prompt { display:flex; flex-direction:column; gap:9px; width:100%; padding:18px 20px; background:var(--c-field); border-radius:16px; }
.prompt .you { color:var(--c-fg-3); }
.prompt-q { font-size:20px; font-weight:500; line-height:1.4; letter-spacing:-0.01em; }
.srow-out { margin:0; font-size:15px; line-height:1.53; color:var(--c-fg-2); }
.reply-surface { display:flex; flex-direction:column; gap:11px; width:100%; padding:18px 20px; background:#fff; border:1px solid var(--c-line); border-radius:14px; box-shadow:0 16px 40px -22px rgba(20,24,29,0.16); }
.reply-text { margin:0; font-size:13px; line-height:1.54; color:var(--c-fg-1); }
.md-table { width:100%; border:1px solid var(--c-line); border-radius:5px; overflow:hidden; }
.md-tr { display:flex; align-items:center; border-bottom:1px solid #EEF1F3; }
.md-tr.last { border-bottom:0; }
.md-th { border-bottom:1px solid var(--c-line); }
.md-tr .td-a { flex:1; padding:7px 10px; font-size:12px; color:var(--c-fg-1); }
.md-tr .td-b { width:96px; padding:7px 10px; font-size:12px; color:var(--c-fg-1); }
.md-th .td-a, .md-th .td-b { font-size:10px; letter-spacing:0.08em; color:var(--c-fg-3); }
.popover { width:100%; background:#fff; border:1px solid var(--c-line); border-radius:10px; box-shadow:0 8px 24px rgba(20,24,29,0.12); overflow:hidden; }
.pop-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--c-line); }
.pop-q { font-size:11px; color:var(--c-accent); }
.pop-count { font-size:11px; color:var(--c-fg-3); }
.pop-item { display:flex; flex-direction:column; gap:4px; padding:10px 14px; border-bottom:1px solid var(--c-line); }
.pop-item:last-of-type { border-bottom:0; }
.pop-item.sel { border-left:2px solid var(--c-accent); padding-left:12px; background:var(--c-accent-tint); }
.pop-row { display:flex; align-items:center; }
.pop-slug { font-size:12px; color:var(--c-fg-1); }
.pop-tag { margin-left:auto; letter-spacing:0.08em; color:var(--c-fg-3); }
.pop-desc { font-size:12px; line-height:1.5; color:var(--c-fg-2); }
.pop-foot { display:flex; gap:14px; padding:6px 14px; border-top:1px solid var(--c-line); background:var(--c-canvas); }
.pop-foot .caps { letter-spacing:0.08em; color:var(--c-fg-3); }

/* ── trust strip ─────────────────────────────────────────────────────── */
.trust { border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); background:var(--c-canvas); }
.trust-in { display:flex; align-items:flex-start; padding:44px 64px; }
.trust-item { display:flex; flex-direction:column; gap:10px; flex:1; padding:0 40px; }
.trust-item:first-child { padding-left:0; } .trust-item:last-child { padding-right:0; }
.trust-item .ti { width:20px; height:20px; fill:none; stroke:var(--c-fg-1); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ti-t { font-size:15px; font-weight:600; }
.ti-d { font-size:13px; line-height:1.46; color:var(--c-fg-2); }
.trust-div { width:1px; align-self:center; height:52px; background:var(--c-line); flex-shrink:0; }

/* ── capabilities grid ───────────────────────────────────────────────── */
.caps-wrap { display:flex; flex-direction:column; gap:44px; }
.cap-head { display:flex; flex-direction:column; gap:16px; max-width:640px; }
.h-section.sm { font-size:38px; }
.cap-grid { display:flex; flex-wrap:wrap; border-top:1px solid var(--c-line); border-left:1px solid var(--c-line); }
.cap-cell { display:flex; flex-direction:column; gap:12px; flex-basis:33.333%; box-sizing:border-box; border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:28px 26px; }
.cap-ic { width:20px; height:20px; fill:none; stroke:var(--c-fg-1); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cap-t { font-size:16px; font-weight:600; }
.cap-d { font-size:13.5px; line-height:1.48; color:var(--c-fg-2); }

/* ── dark CTA ────────────────────────────────────────────────────────── */
.cta-dark { background:var(--c-fg-1); padding:104px 64px; }
.cta-in { display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.cta-eyebrow { color:#B8C8D6; }
.cta-title { margin:0; font-size:46px; font-weight:600; line-height:1.08; letter-spacing:-0.02em; color:var(--c-canvas); }
.cta-sub { margin:0; font-size:17px; line-height:1.55; color:#8A929E; max-width:440px; }
.btn-light { display:inline-flex; align-items:center; padding:14px 24px; background:var(--c-canvas); color:var(--c-fg-1); border-radius:11px; font-size:15px; font-weight:600; cursor:pointer; transition:transform 150ms var(--ease); }
.btn-light:hover { transform:translateY(-1px); }
.btn-ghost-dark { display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border:1px solid rgba(250,251,252,0.22); border-radius:11px; font-size:15px; font-weight:500; color:var(--c-canvas); cursor:pointer; }
.cta-meta { color:#525965; font-size:12px; }

/* ── footer ──────────────────────────────────────────────────────────── */
.foot { background:var(--c-canvas); border-top:1px solid var(--c-line); padding:56px 64px 40px; }
.foot .wrap { display:flex; flex-direction:column; gap:28px; }
.foot-top { display:flex; align-items:flex-start; justify-content:space-between; }
.foot-brand { display:flex; flex-direction:column; gap:10px; }
.foot-tag { font-size:13px; line-height:1.46; color:var(--c-fg-3); max-width:280px; }
.foot-links { display:flex; flex-wrap:wrap; align-items:center; gap:26px; }
.foot-links a { font-size:14px; color:var(--c-fg-2); }
.foot-links a:hover { color:var(--c-fg-1); }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; }
.foot-bottom .mono { font-size:11px; color:var(--c-fg-3); }

/* ── dot-grid background + cursor spotlight ──────────────────────────── */
.dotgrid { position:relative; }
.dotgrid::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(circle at 1px 1px, var(--c-dot) 1px, transparent 0); background-size:24px 24px; }
.dotgrid > * { position:relative; z-index:1; }
.dotgrid-dark { position:relative; }
.dotgrid-dark::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(circle at 1px 1px, var(--c-dot-dark) 1px, transparent 0); background-size:26px 26px; }
.dotgrid-dark > * { position:relative; z-index:1; }
.dotgrid.spotlight::after, .dotgrid-dark.spotlight::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(circle at 1px 1px, var(--c-accent) 1px, transparent 0); background-size:24px 24px; -webkit-mask-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px), #000 0%, transparent 70%); mask-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px), #000 0%, transparent 70%); opacity:0.5; transition:opacity 200ms var(--ease); }
.dotgrid-dark.spotlight::after { background-image:radial-gradient(circle at 1px 1px, #B8C8D6 1px, transparent 0); background-size:26px 26px; }

/* ── focus states (a11y) ─────────────────────────────────────────────── */
.lang-btn:focus-visible, .btn-ink:focus-visible, .btn-outline:focus-visible, .btn-light:focus-visible, .btn-ghost-dark:focus-visible, .gh-pill:focus-visible, .foot-links a:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .section, .trust-in, .cta-dark, .foot, .topbar-in { padding-left:40px; padding-right:40px; }
  .hero-title { font-size:52px; }
}
@media (max-width: 960px) {
  .hero-in { flex-direction:column; align-items:flex-start; gap:48px; }
  .panel { width:100%; max-width:432px; }
  .srow { flex-direction:column; gap:20px; }
  .cmd, .res { width:100%; flex:1 1 auto; }
  .cap-cell { flex-basis:50%; }
}
@media (max-width: 640px) {
  .section { padding-top:72px; padding-bottom:72px; padding-left:22px; padding-right:22px; }
  .topbar-in, .trust-in, .cta-dark, .foot { padding-left:22px; padding-right:22px; }
  .hero-title { font-size:40px; }
  .h-section { font-size:34px; } .h-section.sm { font-size:30px; }
  .trust-in { flex-wrap:wrap; gap:28px 0; } .trust-item { flex-basis:50%; flex:0 0 50%; padding:0 16px 0 0; } .trust-div { display:none; }
  .cap-cell { flex-basis:100%; }
  .foot-top { flex-direction:column; gap:24px; }
  .nav-right { gap:10px; } .gh-pill { display:none; }
}