/* ============================================================================
 * 交石 AI 官网首页样式
 * ----------------------------------------------------------------------------
 * 来源：Figma 设计稿「交石AI企业官网首页设计」(bk8D5p6JNRAycOERISzzGQ, node 968-3208)
 *       经 Figma Make 导出版本核对，设计令牌与几何完全取自设计稿产物。
 * 说明：
 *   1. 本文件含 Tailwind 的 base reset（*{box-sizing/border/margin/padding}）。
 *      只允许被「独立页面」引入（官网首页、登录页），**不要**引入后台 iframe 内容页，
 *      否则会把 layui 的默认样式一起 reset 掉。
 *   2. 设计令牌集中在 :root（--bg / --orange / --text / --radius-card ...），
 *      改色请改令牌，不要在下面散改十六进制值。
 *   3. 主色 #ed6c00（橙），深色底 #0b0f17，卡片 #141a23，正文 #e8eaf0。
 * ========================================================================== */

@layer components;
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,:before,:after,::backdrop {
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-blur:initial;
      --tw-brightness:initial;
      --tw-contrast:initial;
      --tw-grayscale:initial;
      --tw-hue-rotate:initial;
      --tw-invert:initial;
      --tw-opacity:initial;
      --tw-saturate:initial;
      --tw-sepia:initial;
      --tw-drop-shadow:initial;
      --tw-drop-shadow-color:initial;
      --tw-drop-shadow-alpha:100%;
      --tw-drop-shadow-size:initial;
      --tw-ease:initial
    }
  }
}
@layer theme {
  :root,:host {
    --font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing:.25rem;
    --ease-out:cubic-bezier(0, 0, .2, 1);
    --ease-in-out:cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration:.15s;
    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }
}
@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong {
    font-weight:bolder
  }
  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,ul,menu {
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }
  img,video {
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
  ::file-selector-button {
    margin-inline-end:4px
  }
  ::placeholder {
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit {
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
  ::-webkit-datetime-edit {
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }
  ::file-selector-button {
    appearance:button
  }
  ::-webkit-inner-spin-button {
    height:auto
  }
  ::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
}
@layer utilities {
  .visible {
    visibility:visible
  }
  .fixed {
    position:fixed
  }
  .static {
    position:static
  }
  .start {
    inset-inline-start:var(--spacing)
  }
  .end {
    inset-inline-end:var(--spacing)
  }
  .container {
    width:100%
  }
  @media (width>=40rem) {
    .container {
      max-width:40rem
    }
  }
  @media (width>=48rem) {
    .container {
      max-width:48rem
    }
  }
  @media (width>=64rem) {
    .container {
      max-width:64rem
    }
  }
  @media (width>=80rem) {
    .container {
      max-width:80rem
    }
  }
  @media (width>=96rem) {
    .container {
      max-width:96rem
    }
  }
  .block {
    display:block
  }
  .flex {
    display:flex
  }
  .grid {
    display:grid
  }
  .hidden {
    display:none
  }
  .inline {
    display:inline
  }
  .table {
    display:table
  }
  .transform {
    transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
  }
  .resize {
    resize:both
  }
  .lowercase {
    text-transform:lowercase
  }
  .uppercase {
    text-transform:uppercase
  }
  .blur {
    --tw-blur:blur(8px);
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
  .filter {
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
  .transition {
    transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration))
  }
  .ease-in-out {
    --tw-ease:var(--ease-in-out);
    transition-timing-function:var(--ease-in-out)
  }
  .ease-out {
    --tw-ease:var(--ease-out);
    transition-timing-function:var(--ease-out)
  }
}
:root {
  --bg:#0b0f17;
  --bg-deep:#080c14;
  --card:#141a23;
  --card-2:#1b2432;
  --card-dark:#0d131e;
  --orange:#ed6c00;
  --orange-light:#ff8a45;
  --purple:#9d6cff;
  --green:#30cf91;
  --blue:#438bff;
  --white:#fff;
  --text:#e8eaf0;
  --muted:#a7afbd;
  --muted-2:#667184;
  --line:#ffffff1a;
  --line-soft:#ffffff0f;
  --radius-card:16px;
  --radius-button:11px;
  --space-section:112px;
  --container:1200px;
  --font-cn:"PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-num:"Inter", var(--font-cn)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  background:var(--bg)
}
body {
  background:var(--bg);
  min-width:320px;
  color:var(--text);
  font-family:var(--font-cn);
  -webkit-font-smoothing:antialiased;
  margin:0
}
button,a {
  font:inherit
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--orange-light);
  outline-offset:3px
}
a {
  color:inherit;
  text-decoration:none
}
h1,h2,h3,h4,p {
  margin:0
}
small {
  font-size:12px
}
button {
  cursor:pointer;
  border:0
}
button:disabled {
  cursor:not-allowed;
  opacity:.42;
  filter:saturate(.35)
}
.section-shell,.nav-shell,.footer-shell {
  width:min(calc(100% - 48px), var(--container));
  margin-inline:auto
}
.page-section {
  padding-block:var(--space-section);
  scroll-margin-top:76px
}
.content-section,.agent-section,.data-section {
  background:var(--bg-deep);
  border-block:1px solid var(--line-soft)
}
.icon {
  flex:none;
  display:block
}
.site-header {
  z-index:100;
  border-bottom:1px solid #0000;
  height:72px;
  transition:background .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;
  position:fixed;
  inset:0 0 auto
}
.site-header.is-scrolled {
  border-color:var(--line-soft);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  background:#080c14db
}
.nav-shell {
  justify-content:space-between;
  align-items:center;
  height:72px;
  display:flex
}
.logo-link {
  flex:0 0 178px
}
.logo-link .brand {
  gap:6px
}
.brand {
  align-items:center;
  gap:10px;
  display:inline-flex
}
.brand>span:last-child {
  gap:1px;
  display:grid
}
.brand b {
  color:#f5f7fb;
  letter-spacing:.08em;
  font-size:16px
}
.brand small {
  color:var(--muted-2);
  letter-spacing:.12em;
  font-size:12px
}
.logo-mark {
  width:25px;
  height:28px;
  display:block;
  position:relative
}
.logo-mark i {
  background:linear-gradient(135deg, #ff8a45, var(--orange));
  border-radius:2px 1px;
  width:13px;
  height:7px;
  position:absolute;
  left:5px;
  transform:skew(-12deg)
}
.logo-mark i:first-child {
  top:1px
}
.logo-mark i:nth-child(2) {
  background:#9d6cff;
  top:10px;
  left:3px
}
.logo-mark i:nth-child(3) {
  background:#438bff;
  top:19px;
  left:1px
}
.logo-mark-image {
  width:48px;
  height:48px;
  overflow:hidden
}
.logo-mark-image:before {
  content:"";
  background:#fff;
  border-radius:2px;
  height:53.33%;
  position:absolute;
  top:23.33%;
  left:23.33%;
  right:23.33%
}
.logo-mark-image img {
  width:100.1%;
  height:98.33%;
  display:block;
  position:absolute;
  top:1.67%;
  left:-.05%
}
.desktop-nav {
  min-width:0;
  align-items:center;
  gap:2px;
  height:100%;
  display:flex
}
.nav-group {
  align-items:center;
  height:100%;
  display:flex;
  position:relative
}
.nav-link {
  height:40px;
  color:var(--muted);
  background:0 0;
  border-radius:9px;
  align-items:center;
  gap:5px;
  padding:0 15px;
  font-size:14px;
  transition:color .2s,background .2s;
  display:flex
}
.nav-link:hover,.nav-link.active {
  color:var(--white);
  background:#ffffff0a
}
.nav-link.active:after {
  content:"";
  background:var(--orange);
  height:2px;
  box-shadow:0 0 12px var(--orange);
  position:absolute;
  bottom:0;
  left:18px;
  right:18px
}
.chevron {
  color:var(--muted-2);
  font-size:16px;
  transform:translateY(-2px)
}
/* 按钮防换行 + nav-actions 自适应宽度，原固定 178px 导致 16px 字号折行 */
.nav-actions {
  flex:0 0 auto;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  display:flex
}
.download-html-link {
  min-height:36px;
  color:var(--orange-light);
  white-space:nowrap;
  background:#ed6c0012;
  border:1px solid #ed6c004d;
  border-radius:9px;
  align-items:center;
  padding:0 12px;
  font-size:12px;
  transition:color .2s,border-color .2s,background .2s;
  display:inline-flex
}
.download-html-link:hover {
  color:#fff;
  background:#ed6c0024;
  border-color:#ed6c008c
}
.login-link {
  color:var(--muted);
  background:0 0;
  border-radius:8px;
  padding:10px 12px;
  font-size:14px
}
.login-link:hover {
  color:var(--white);
  background:#ffffff0a
}
.trial-button {
  color:#fff;
  background:linear-gradient(135deg, #ff7d34, var(--orange));
  border-radius:10px;
  min-height:40px;
  padding:0 18px;
  font-size:14px;
  font-weight:600;
  transition:transform .2s,box-shadow .2s,background .2s;
  box-shadow:0 8px 24px #ed6c0038
}
.trial-button:hover {
  background:linear-gradient(135deg,#ff9659,#f2760b);
  transform:translateY(-1px);
  box-shadow:0 10px 32px #ed6c0061
}
.trial-button:active {
  transform:translateY(1px);
  box-shadow:0 4px 12px #ed6c0040
}
.trial-button:focus-visible {
  outline-offset:3px;
  outline:3px solid #ff8a4561
}
/* 顶部导航内登录/试用视觉互换：登录为主按钮，试用以文字入口呈现；字号各 +2px */
.nav-actions > .login-link {
  color:#fff;
  background:linear-gradient(135deg, #ff7d34, var(--orange));
  border-radius:10px;
  display:inline-flex;
  flex:none;
  white-space:nowrap;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:0 18px;
  font-size:16px;
  font-weight:600;
  transition:transform .2s,box-shadow .2s,background .2s;
  box-shadow:0 8px 24px #ed6c0038
}
.nav-actions > .login-link .icon {
  flex:none
}
.nav-actions > .login-link:hover {
  color:#fff;
  background:linear-gradient(135deg,#ff9659,#f2760b);
  transform:translateY(-1px);
  box-shadow:0 10px 32px #ed6c0061
}
.nav-actions > .login-link:active {
  transform:translateY(1px);
  box-shadow:0 4px 12px #ed6c0040
}
.nav-actions > .login-link:focus-visible {
  outline-offset:3px;
  outline:3px solid #ff8a4561
}
.nav-actions > .trial-button {
  color:var(--muted);
  background:0 0;
  border-radius:8px;
  flex:none;
  white-space:nowrap;
  min-height:auto;
  padding:10px 12px;
  font-size:16px;
  font-weight:400;
  box-shadow:none;
  transform:none
}
.nav-actions > .trial-button:hover {
  color:var(--white);
  background:#ffffff0a;
  transform:none;
  box-shadow:none
}
.nav-actions > .trial-button:active {
  transform:none;
  box-shadow:none
}
.nav-actions > .trial-button:focus-visible {
  outline-offset:3px;
  outline:3px solid #ffffff2e
}
.nav-popover {
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  background:#111824fa;
  border-radius:16px;
  animation:.24s ease-out menu-in;
  position:absolute;
  top:66px;
  box-shadow:0 24px 70px #0000007a,0 0 0 1px #ed6c000d
}
.product-popover {
  width:580px;
  padding:18px;
  left:-160px
}
.popover-label {
  color:var(--muted-2);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:0 8px 12px;
  font-size:12px
}
.product-grid {
  grid-template-columns:1fr 1fr;
  gap:6px;
  display:grid
}
.product-grid a {
  border:1px solid #0000;
  border-radius:11px;
  align-items:center;
  gap:12px;
  padding:13px;
  transition:all .2s;
  display:flex
}
.product-grid a:hover {
  border-color:var(--line-soft);
  background:#ffffff0a;
  transform:translateY(-1px)
}
.product-grid a:nth-child(2) .mini-icon,.product-grid a:nth-child(5) .mini-icon {
  color:var(--purple);
  background:#9d6cff1f
}
.product-grid a:nth-child(3) .mini-icon,.product-grid a:nth-child(6) .mini-icon {
  color:var(--blue);
  background:#438bff1f
}
.mini-icon {
  width:38px;
  height:38px;
  color:var(--orange-light);
  background:#ed6c001f;
  border-radius:9px;
  place-items:center;
  display:grid
}
.product-grid a>span:last-child {
  gap:3px;
  display:grid
}
.product-grid b {
  color:var(--text);
  font-size:14px;
  font-weight:600
}
.product-grid small {
  color:var(--muted-2);
  font-size:12px
}
.solution-popover {
  width:230px;
  padding:9px;
  left:-45px
}
.solution-popover a {
  color:var(--muted);
  border-radius:9px;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  font-size:14px;
  display:flex
}
.solution-popover a:hover {
  color:var(--white);
  background:#ffffff0a
}
.mobile-menu-button,.mobile-drawer,.drawer-backdrop {
  display:none
}
.hero {
  isolation:isolate;
  justify-content:center;
  align-items:center;
  min-height:800px;
  padding-top:144px;
  padding-bottom:100px;
  display:flex;
  position:relative
}
.hero:before {
  content:"";
  z-index:-3;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#ed6c001f,#0000 28%),radial-gradient(circle at 24% 30%,#438bff1a,#0000 24%),radial-gradient(circle at 78% 42%,#9d6cff21,#0000 27%),linear-gradient(#0b0f17 0%,#090e17 72%,#0b0f17 100%);
  width:100vw;
  position:absolute;
  inset:0 auto 0 50%;
  transform:translate(-50%)
}
.hero-copy {
  z-index:3;
  text-align:center;
  flex-direction:column;
  align-items:center;
  width:min(850px,100%);
  display:flex;
  position:relative
}
.hero-kicker,.eyebrow {
  color:var(--orange-light);
  letter-spacing:.12em;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  display:inline-flex
}
.hero-kicker {
  letter-spacing:.06em;
  background:#ed6c0012;
  border:1px solid #ed6c0040;
  border-radius:999px;
  padding:8px 12px
}
.hero h1 {
  color:var(--white);
  letter-spacing:-.05em;
  text-wrap:balance;
  margin-top:24px;
  font-size:clamp(58px,5.6vw,80px);
  font-weight:700;
  line-height:1.08
}
.hero h1 span {
  color:var(--orange-light);
  text-shadow:0 0 34px #ed6c0042;
  position:relative
}
.hero-copy>p {
  color:var(--muted);
  max-width:720px;
  margin-top:28px;
  font-size:17px;
  line-height:1.85
}
.selling-tags {
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin-top:28px;
  display:flex
}
.selling-tags span {
  color:#cbd0da;
  border:1px solid var(--line-soft);
  background:#ffffff08;
  border-radius:8px;
  align-items:center;
  gap:5px;
  padding:8px 10px;
  font-size:12px;
  display:inline-flex
}
.selling-tags .icon {
  color:var(--orange-light)
}
.hero-ctas,.section-actions {
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:34px;
  display:flex
}
.button {
  border-radius:var(--radius-button);
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 20px;
  font-size:14px;
  font-weight:600;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;
  display:inline-flex
}
.button-primary {
  color:#fff;
  background:linear-gradient(135deg, #ff7d34, var(--orange));
  box-shadow:0 10px 28px #ed6c0038
}
.button-primary:hover {
  background:linear-gradient(135deg,#ff9659,#f2760b);
  transform:translateY(-2px);
  box-shadow:0 14px 34px #ed6c0059
}
.button-secondary {
  color:var(--text);
  border:1px solid var(--line);
  background:#141a23b8
}
.button-secondary:hover {
  background:var(--card-2);
  border-color:#ed6c0073;
  transform:translateY(-2px)
}
.button:active {
  transform:translateY(1px)
}
.account-entry {
  width:fit-content;
  color:var(--muted-2);
  background:0 0;
  align-items:center;
  gap:5px;
  margin-top:18px;
  font-size:12px;
  display:flex
}
.account-entry b {
  color:var(--muted);
  font-weight:500
}
.account-entry:hover b {
  color:var(--orange-light)
}
.hero-atmosphere {
  z-index:-1;
  pointer-events:none;
  width:100vw;
  position:absolute;
  inset:72px auto 0 50%;
  overflow:hidden;
  transform:translate(-50%)
}
.hero-grid {
  transform-origin:bottom;
  opacity:.5;
  background-image:linear-gradient(#ffffff0e 1px,#0000 1px),linear-gradient(90deg,#ffffff0e 1px,#0000 1px);
  background-size:62px 62px;
  position:absolute;
  inset:28% -10% -42%;
  transform:perspective(600px)rotateX(64deg)scale(1.25);
  -webkit-mask-image:linear-gradient(#0000,#000000b3 35%,#0000 84%);
  mask-image:linear-gradient(#0000,#000000b3 35%,#0000 84%)
}
.hero-beam {
  filter:drop-shadow(0 0 7px #ed6c0080);
  opacity:.65;
  background:linear-gradient(90deg,#0000,#ed6c007a,#ffffff61,#0000);
  width:46vw;
  height:1px;
  position:absolute;
  top:50%
}
.beam-one {
  left:-8%;
  transform:rotate(16deg)
}
.beam-two {
  background:linear-gradient(90deg,#0000,#9d6cff80,#438bff5c,#0000);
  right:-8%;
  transform:rotate(-18deg)
}
.hero-core {
  border:1px solid #ed6c0014;
  border-radius:50%;
  width:420px;
  height:420px;
  position:absolute;
  top:calc(45% + 10px);
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 80px #ed6c0014,inset 0 0 70px #9d6cff0d
}
.hero-core:before,.hero-core:after {
  content:"";
  border:1px solid #ffffff0e;
  border-radius:50%;
  position:absolute;
  inset:14%
}
.hero-core:after {
  border-color:#ed6c002e;
  inset:31%;
  box-shadow:0 0 45px #ed6c0029
}
.hero-core span {
  width:8px;
  height:8px;
  box-shadow:0 0 16px #fff, 0 0 42px var(--orange);
  background:#fff;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.hero-orbit {
  border:1px solid #ffffff14;
  border-radius:50%;
  animation:28s linear infinite orbit-spin;
  position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%)rotate(-12deg)
}
.orbit-one {
  width:min(59vw,740px);
  height:295px
}
.orbit-two {
  border-color:#9d6cff14;
  width:min(74vw,900px);
  height:405px;
  animation-duration:38s;
  animation-direction:reverse;
  transform:translate(-50%,-50%)rotate(15deg)
}
.hero-orbit i {
  background:var(--orange-light);
  width:7px;
  height:7px;
  box-shadow:0 0 16px var(--orange);
  border-radius:50%;
  position:absolute
}
.orbit-one i:first-child {
  top:50%;
  left:0;
  transform:translate(-50%,-50%)
}
.orbit-one i:last-child {
  top:50%;
  right:0;
  transform:translate(50%,-50%)
}
.orbit-two i {
  background:var(--purple);
  box-shadow:0 0 16px var(--purple)
}
.orbit-two i:first-child {
  top:0;
  left:50%;
  transform:translate(-50%,-50%)
}
.orbit-two i:last-child {
  bottom:0;
  left:50%;
  transform:translate(-50%,50%)
}
.hero-node {
  color:#e8eaf0a8;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  letter-spacing:.08em;
  background:#0d131e8c;
  border:1px solid #ffffff14;
  border-radius:7px;
  padding:7px 11px;
  font-size:12px;
  animation:6s ease-in-out infinite node-drift;
  position:absolute;
  box-shadow:0 10px 30px #0003
}
.hero-node:before {
  content:"";
  background:var(--orange);
  width:5px;
  height:5px;
  box-shadow:0 0 8px var(--orange);
  border-radius:50%;
  margin-right:7px;
  display:inline-block
}
.node-one {
  top:27%;
  left:10%
}
.node-two {
  animation-delay:-1.4s;
  top:25%;
  right:12%
}
.node-three {
  animation-delay:-2.8s;
  bottom:24%;
  left:15%
}
.node-four {
  animation-delay:-4.2s;
  bottom:21%;
  right:11%
}
.node-two:before,.node-three:before {
  background:var(--purple);
  box-shadow:0 0 8px var(--purple)
}
.node-four:before {
  background:var(--blue);
  box-shadow:0 0 8px var(--blue)
}
.hero-scroll-cue {
  z-index:3;
  color:var(--muted-2);
  letter-spacing:.12em;
  justify-items:center;
  gap:7px;
  font-size:12px;
  display:grid;
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translate(-50%)
}
.hero-scroll-cue span {
  border:1px solid #ffffff26;
  border-radius:999px;
  width:18px;
  height:30px;
  position:relative
}
.hero-scroll-cue span:after {
  content:"";
  background:var(--orange-light);
  border-radius:999px;
  width:3px;
  height:6px;
  animation:2s ease-in-out infinite scroll-cue;
  position:absolute;
  top:6px;
  left:50%;
  transform:translate(-50%)
}
.hero-visual {
  min-height:520px;
  position:relative
}
.visual-grid {
  opacity:.28;
  background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);
  background-size:36px 36px;
  position:absolute;
  inset:-80px -100px -40px;
  -webkit-mask-image:radial-gradient(circle,#000,#0000 68%);
  mask-image:radial-gradient(circle,#000,#0000 68%)
}
.dashboard {
  background:#080d15;
  border:1px solid #ffffff1a;
  border-radius:17px;
  grid-template-columns:118px 1fr;
  width:78%;
  height:400px;
  display:grid;
  position:absolute;
  top:66px;
  right:4%;
  overflow:hidden;
  transform:perspective(1200px)rotateY(-4deg)rotateX(1deg);
  box-shadow:0 38px 80px #0000008c,0 0 60px #4e2c8b1f
}
.dash-side {
  border-right:1px solid var(--line-soft);
  background:#0c121c;
  padding:17px 11px
}
.dash-side .brand small {
  display:none
}
.dash-side .brand b {
  font-size:12px
}
.dash-side .logo-mark {
  margin-right:-4px;
  transform:scale(.7)
}
.dash-side>span {
  color:#667184;
  border-radius:6px;
  align-items:center;
  gap:7px;
  margin-top:13px;
  padding:9px 8px;
  font-size:12px;
  display:flex
}
.dash-side>span i {
  border:1px solid;
  border-radius:3px;
  width:10px;
  height:10px
}
.dash-side>span.active {
  color:#f5f7fb;
  background:linear-gradient(90deg,#ed6c0029,#ed6c0005)
}
.dash-side>span.active i {
  color:var(--orange)
}
.dash-main {
  min-width:0;
  padding:0 18px 18px
}
.dash-head {
  border-bottom:1px solid var(--line-soft);
  height:45px;
  color:var(--text);
  align-items:center;
  margin-inline:-18px;
  padding-inline:18px;
  font-size:12px;
  display:flex
}
.dash-head span {
  margin-right:auto
}
.dash-head i {
  border:1px solid var(--line);
  border-radius:5px;
  width:17px;
  height:17px;
  margin-left:7px
}
.dash-greeting {
  gap:5px;
  padding:19px 0 13px;
  display:grid
}
.dash-greeting small {
  color:var(--muted-2);
  font-size:12px
}
.dash-greeting b {
  color:#f5f7fb;
  font-size:15px
}
.dash-greeting em {
  color:var(--orange-light);
  font-style:normal
}
.insight-card {
  background:linear-gradient(100deg,#ed6c0024,#9d6cff14);
  border:1px solid #ed6c0029;
  border-radius:10px;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:11px;
  padding:13px;
  display:grid
}
.insight-icon {
  width:31px;
  height:31px;
  color:var(--orange-light);
  background:#ed6c0029;
  border-radius:8px;
  place-items:center;
  display:grid
}
.insight-card>div:nth-child(2) {
  gap:3px;
  display:grid
}
.insight-card small {
  color:var(--orange-light);
  font-size:12px
}
.insight-card b {
  color:#fff;
  font-size:12px
}
.insight-card p {
  color:var(--muted-2);
  font-size:12px
}
.insight-card button {
  color:#fff;
  background:var(--orange);
  border-radius:6px;
  padding:7px 9px;
  font-size:12px
}
.dash-stats {
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
  display:grid
}
.dash-stats div {
  border:1px solid var(--line-soft);
  background:#101722;
  border-radius:8px;
  min-height:64px;
  padding:11px;
  position:relative;
  overflow:hidden
}
.dash-stats small {
  color:var(--muted-2);
  font-size:12px;
  display:block
}
.dash-stats b {
  color:#fff;
  font:600 15px var(--font-num);
  margin-top:7px;
  display:block
}
.dash-stats i {
  border:1px solid #30cf913d;
  border-radius:50%;
  width:42px;
  height:42px;
  position:absolute;
  bottom:-16px;
  right:-5px
}
.task-card {
  border:1px solid var(--line-soft);
  background:#101722;
  border-radius:8px;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:10px;
  display:flex
}
.task-card>span {
  width:30px;
  height:30px;
  color:var(--purple);
  background:#9d6cff1f;
  border-radius:7px;
  place-items:center;
  display:grid
}
.task-card>div {
  gap:3px;
  margin-right:auto;
  display:grid
}
.task-card b {
  color:var(--text);
  font-size:12px
}
.task-card small {
  color:var(--muted-2);
  font-size:12px
}
.task-card em {
  color:var(--green);
  font-size:12px;
  font-style:normal
}
.worker-chip {
  z-index:4;
  border:1px solid var(--line);
  background:#111824f5;
  border-radius:11px;
  align-items:center;
  gap:9px;
  min-width:176px;
  padding:10px;
  animation:5s ease-in-out infinite float;
  display:flex;
  position:absolute;
  box-shadow:0 16px 34px #0000005c
}
.worker-chip:after {
  content:"";
  background:linear-gradient(90deg,#ed6c0073,#0000);
  width:70px;
  height:1px;
  position:absolute
}
.worker-chip>span {
  width:31px;
  height:31px;
  color:var(--orange-light);
  background:#ed6c0021;
  border-radius:8px;
  place-items:center;
  display:grid
}
.worker-chip>div {
  gap:4px;
  display:grid
}
.worker-chip b {
  color:var(--text);
  font-size:12px
}
.worker-chip small {
  color:var(--muted-2);
  white-space:nowrap;
  align-items:center;
  gap:4px;
  font-size:12px;
  display:flex
}
.worker-chip small i {
  background:var(--green);
  width:5px;
  height:5px;
  box-shadow:0 0 7px var(--green);
  border-radius:50%
}
.worker-1 {
  top:6px;
  left:2%
}
.worker-1:after {
  transform-origin:0;
  top:50%;
  left:100%;
  transform:rotate(18deg)
}
.worker-2 {
  animation-delay:-1.2s;
  top:0;
  right:-2%
}
.worker-2>span {
  color:var(--purple);
  background:#9d6cff21
}
.worker-2:after {
  transform-origin:100%;
  top:60%;
  right:100%;
  transform:rotate(160deg)
}
.worker-3 {
  animation-delay:-2.2s;
  bottom:1px;
  left:0
}
.worker-3>span {
  color:var(--blue);
  background:#438bff21
}
.worker-3:after {
  transform-origin:0;
  top:20%;
  left:100%;
  transform:rotate(-20deg)
}
.worker-4 {
  animation-delay:-3.5s;
  bottom:3px;
  right:-1%
}
.worker-4>span {
  color:var(--green);
  background:#30cf9121
}
.worker-4:after {
  transform-origin:100%;
  top:25%;
  right:100%;
  transform:rotate(200deg)
}
.loop-bar {
  border-block:1px solid var(--line-soft);
  background:#0d131e;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  min-height:72px;
  padding:15px max(24px,50vw - 600px);
  display:flex;
  overflow:hidden
}
.loop-bar span {
  color:var(--muted);
  white-space:nowrap;
  font-size:12px
}
.loop-bar i {
  background:linear-gradient(90deg, var(--orange), #ed6c0014);
  flex:1;
  min-width:18px;
  height:1px;
  position:relative
}
.loop-bar i:after {
  content:"";
  background:var(--orange);
  border-radius:50%;
  width:5px;
  height:5px;
  position:absolute;
  top:-2px;
  right:0
}
.section-head {
  max-width:740px
}
.section-head.center {
  text-align:center;
  margin-inline:auto
}
.section-head.center .eyebrow {
  justify-content:center
}
.section-head h2,.final-cta h2 {
  color:var(--white);
  letter-spacing:-.025em;
  margin-top:13px;
  font-size:clamp(34px,3.2vw,44px);
  line-height:1.25
}
.section-head>p {
  color:var(--muted);
  margin-top:16px;
  font-size:16px;
  line-height:1.8
}
.employee-grid {
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:52px;
  display:grid
}
.employee-card {
  border:1px solid var(--line-soft);
  border-radius:var(--radius-card);
  cursor:pointer;
  background:linear-gradient(145deg,#1b2432f0,#0e141ef5);
  flex-direction:column;
  min-width:0;
  padding:22px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  display:flex;
  position:relative;
  overflow:hidden
}
.employee-card:before {
  content:"";
  background:linear-gradient(90deg, var(--accent), transparent 70%);
  opacity:.7;
  width:100%;
  height:2px;
  position:absolute;
  inset:0 auto auto 0
}
.employee-card:hover,.employee-card:focus-visible {
  border-color:var(--accent);
  transform:translateY(-6px)
}
@supports (color:color-mix(in lab, red, red)) {
  .employee-card:hover,.employee-card:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 45%, transparent)
  }
}
.employee-card:hover,.employee-card:focus-visible {
  box-shadow:0 24px 50px #00000042
}
.accent-orange {
  --accent:var(--orange-light)
}
.accent-purple {
  --accent:var(--purple)
}
.accent-blue {
  --accent:var(--blue)
}
.accent-green {
  --accent:var(--green)
}
.employee-title {
  align-items:center;
  gap:12px;
  display:flex
}
.employee-title>span {
  width:42px;
  height:42px;
  color:var(--accent);
  background:var(--accent);
  place-items:center;
  display:grid
}
@supports (color:color-mix(in lab, red, red)) {
  .employee-title>span {
    background:color-mix(in srgb, var(--accent) 12%, transparent)
  }
}
.employee-title>span {
  border-radius:10px
}
.employee-title>div {
  gap:3px;
  display:grid
}
.employee-title small {
  color:var(--muted-2);
  font:500 12px var(--font-num);
  letter-spacing:.09em
}
.employee-title h3 {
  color:#fff;
  font-size:19px
}
.employee-card>p {
  min-height:46px;
  color:var(--muted);
  margin-top:14px;
  font-size:13px;
  line-height:1.7
}
.mini-product {
  border:1px solid var(--line-soft);
  background:#090e16;
  border-radius:10px;
  height:150px;
  margin-top:17px;
  overflow:hidden
}
.mini-top {
  border-bottom:1px solid var(--line-soft);
  align-items:center;
  height:28px;
  padding:0 8px;
  display:flex
}
.mini-top>span {
  gap:3px;
  display:flex
}
.mini-top>span i {
  background:var(--muted-2);
  border-radius:50%;
  width:4px;
  height:4px
}
.mini-top em {
  color:var(--muted);
  margin:0 auto 0 7px;
  font-size:12px;
  font-style:normal
}
.mini-top b {
  color:var(--green);
  font-size:12px
}
.editor-ui {
  grid-template-columns:42px 1fr;
  height:calc(100% - 28px);
  display:grid
}
.editor-side {
  border-right:1px solid var(--line-soft);
  align-content:start;
  gap:8px;
  padding:10px;
  display:grid
}
.editor-side span {
  background:#202a3a;
  border-radius:2px;
  width:20px;
  height:6px
}
.editor-side span.active {
  background:var(--accent)
}
@supports (color:color-mix(in lab, red, red)) {
  .editor-side span.active {
    background:color-mix(in srgb, var(--accent) 50%, #202a3a)
  }
}
.editor-main {
  padding:12px
}
.editor-main strong {
  color:#cdd2dc;
  font-size:12px
}
.editor-main p {
  background:#202a3a;
  border-radius:2px;
  width:90%;
  height:4px;
  margin-top:9px
}
.editor-main p.short {
  width:60%;
  margin-top:6px
}
.asset-row {
  gap:5px;
  margin-top:17px;
  display:flex
}
.asset-row i {
  border:1px solid var(--line-soft);
  background:linear-gradient(145deg, var(--accent), #111824);
  border-radius:4px;
  flex:1;
  height:42px
}
@supports (color:color-mix(in lab, red, red)) {
  .asset-row i {
    background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, #111824), #111824)
  }
}
.chat-ui {
  grid-template-columns:55px 1fr;
  height:calc(100% - 28px);
  display:grid
}
.chat-list {
  border-right:1px solid var(--line-soft);
  align-content:start;
  gap:6px;
  padding:8px;
  display:grid
}
.chat-list span {
  background:#111824;
  border-radius:4px;
  height:20px
}
.chat-list span.active {
  border-left:2px solid var(--accent);
  background:#192334
}
.messages {
  flex-direction:column;
  padding:10px;
  display:flex
}
.messages i {
  background:#192334;
  border-radius:5px 5px 5px 2px;
  width:75%;
  height:19px;
  margin-bottom:6px
}
.messages i.mine {
  background:var(--accent);
  align-self:flex-end;
  width:62%
}
@supports (color:color-mix(in lab, red, red)) {
  .messages i.mine {
    background:color-mix(in srgb, var(--accent) 16%, #192334)
  }
}
.messages i.mine {
  border-radius:5px 5px 2px
}
.messages small {
  color:var(--accent);
  background:var(--accent);
  margin-top:auto;
  padding:5px
}
@supports (color:color-mix(in lab, red, red)) {
  .messages small {
    background:color-mix(in srgb, var(--accent) 8%, transparent)
  }
}
.messages small {
  border-radius:4px;
  font-size:12px
}
.skill-list {
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
  display:flex
}
.skill-list span {
  color:#9ba6b7;
  border:1px solid var(--line-soft);
  background:#ffffff06;
  border-radius:5px;
  align-items:center;
  gap:3px;
  padding:5px 6px;
  font-size:12px;
  display:inline-flex
}
.skill-list .icon {
  color:var(--accent)
}
.card-action {
  width:100%;
  color:var(--text);
  background:0 0;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding:13px 0 0;
  font-size:12px;
  font-weight:600;
  display:flex
}
.card-action .icon {
  color:var(--accent);
  transition:transform .2s
}
.employee-card:hover .card-action .icon {
  transform:translate(4px)
}
.workflow {
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:54px;
  display:grid
}
.workflow-stage {
  border:1px solid var(--line-soft);
  border-radius:var(--radius-card);
  background:var(--card);
  padding:24px;
  position:relative
}
.stage-number {
  color:#ffffff0f;
  font:700 38px var(--font-num);
  position:absolute;
  top:18px;
  right:20px
}
.stage-head {
  align-items:center;
  gap:12px;
  display:flex
}
.stage-head>span {
  width:40px;
  height:40px;
  color:var(--orange-light);
  background:#ed6c001f;
  border-radius:9px;
  place-items:center;
  display:grid
}
.workflow-stage:nth-child(2) .stage-head>span {
  color:var(--purple);
  background:#9d6cff1f
}
.workflow-stage:nth-child(3) .stage-head>span {
  color:var(--blue);
  background:#438bff1f
}
.stage-head h3 {
  color:#fff;
  font-size:22px
}
.stage-head p {
  color:var(--muted-2);
  margin-top:4px;
  font-size:12px
}
.workflow-preview {
  border:1px solid var(--line-soft);
  background:#090e16;
  border-radius:10px;
  height:210px;
  margin-top:22px;
  overflow:hidden
}
.preview-bar {
  border-bottom:1px solid var(--line-soft);
  align-items:center;
  gap:4px;
  height:31px;
  padding:0 9px;
  display:flex
}
.preview-bar span {
  background:#2c3749;
  border-radius:50%;
  width:5px;
  height:5px
}
.preview-bar em {
  color:var(--muted-2);
  margin-left:4px;
  font-size:12px;
  font-style:normal
}
.doc-preview {
  background:#111824;
  border-radius:6px;
  height:150px;
  margin:13px;
  padding:14px
}
.doc-preview h4 {
  color:var(--text);
  font-size:12px
}
.doc-preview p {
  background:#202a3a;
  border-radius:2px;
  width:92%;
  height:5px;
  margin-top:12px
}
.doc-preview p.short {
  width:55%
}
.doc-preview div {
  gap:5px;
  margin-top:18px;
  display:flex
}
.doc-preview span {
  color:var(--orange-light);
  background:#ed6c001a;
  border-radius:4px;
  padding:5px;
  font-size:12px
}
.storyboard {
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:12px;
  display:grid
}
.storyboard>div {
  height:69px;
  color:var(--purple);
  background:linear-gradient(145deg,#9d6cff26,#111824);
  border:1px solid #9d6cff26;
  border-radius:6px;
  place-items:center;
  display:grid;
  position:relative
}
.storyboard span {
  color:var(--muted-2);
  font:12px var(--font-num);
  position:absolute;
  top:5px;
  left:6px
}
.library-preview {
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:12px;
  display:grid
}
.library-preview>div {
  min-width:0
}
.library-preview>div>span {
  height:105px;
  color:var(--blue);
  background:linear-gradient(145deg,#438bff21,#111824);
  border-radius:6px;
  place-items:center;
  display:grid
}
.library-preview small {
  color:var(--muted);
  margin-top:8px;
  font-size:12px;
  display:block
}
.stage-items {
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
  display:flex
}
.stage-items span {
  color:var(--muted);
  background:var(--card-dark);
  border:1px solid var(--line-soft);
  border-radius:5px;
  padding:7px 9px;
  font-size:12px
}
.flow-arrow {
  z-index:3;
  width:39px;
  height:39px;
  color:var(--orange-light);
  background:var(--bg-deep);
  border:1px solid #ed6c0040;
  border-radius:50%;
  place-items:center;
  display:grid;
  position:absolute;
  top:50%;
  right:-30px
}
.process-line {
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-top:54px;
  display:grid
}
.process-node {
  border:1px solid var(--line-soft);
  background:var(--card);
  border-radius:12px;
  flex-direction:column;
  justify-content:center;
  height:95px;
  padding:17px;
  transition:border-color .3s,transform .3s;
  display:flex;
  position:relative
}
.process-node:hover {
  border-color:#ed6c0066;
  transform:translateY(-3px)
}
.process-node span {
  color:var(--orange);
  font:600 12px var(--font-num);
  letter-spacing:.08em
}
.process-node b {
  color:var(--text);
  margin-top:8px;
  font-size:14px
}
.process-node i {
  background:linear-gradient(90deg, var(--orange), #ed6c001a);
  width:23px;
  height:1px;
  position:absolute;
  left:calc(100% + 1px);
  overflow:hidden
}
.process-node i:after {
  content:"";
  background:#fff;
  width:8px;
  height:1px;
  animation:2.8s linear infinite line-travel;
  position:absolute
}
.conversation-showcase {
  grid-template-columns:7fr 5fr;
  gap:18px;
  margin-top:24px;
  display:grid
}
.channel-stack {
  gap:18px;
  display:grid
}
.channel-panel {
  border:1px solid var(--line-soft);
  background:#0d131e;
  border-radius:14px;
  overflow:hidden
}
.panel-head {
  border-bottom:1px solid var(--line-soft);
  align-items:center;
  gap:10px;
  min-height:68px;
  padding:13px 16px;
  display:flex
}
.channel-icon {
  color:#fff;
  background:#238f5c;
  border-radius:9px;
  place-items:center;
  width:38px;
  height:38px;
  font-weight:600;
  display:grid
}
.channel-icon.douyin {
  background:linear-gradient(135deg,#1d2735,#ef4e7b)
}
.channel-icon.group {
  background:linear-gradient(135deg,#438bff,#285dc8)
}
.panel-head>div {
  gap:3px;
  margin-right:auto;
  display:grid
}
.panel-head b {
  color:var(--text);
  font-size:13px
}
.panel-head small {
  color:var(--muted-2);
  font-size:12px
}
.panel-head em {
  color:var(--green);
  background:#30cf9114;
  border-radius:5px;
  padding:6px 8px;
  font-size:12px;
  font-style:normal
}
.conversation-body {
  grid-template-columns:150px 1fr;
  height:275px;
  display:grid
}
.contact-list {
  border-right:1px solid var(--line-soft);
  padding:10px
}
.contact-list>span {
  color:var(--muted);
  border-radius:6px;
  align-items:center;
  gap:7px;
  padding:10px 7px;
  font-size:12px;
  display:flex
}
.contact-list>span.active {
  color:var(--text);
  background:#192334
}
.contact-list i {
  background:#2c3749;
  border-radius:50%;
  width:19px;
  height:19px
}
.contact-list small {
  color:#fff;
  background:var(--orange);
  width:14px;
  height:14px;
  font:12px var(--font-num);
  border-radius:50%;
  place-items:center;
  margin-left:auto;
  display:grid
}
.message-area {
  background:#05090f59;
  flex-direction:column;
  gap:12px;
  padding:20px;
  display:flex
}
.message {
  color:#bbc1cb;
  background:#192334;
  border-radius:3px 10px 10px;
  width:fit-content;
  max-width:86%;
  padding:10px 12px;
  font-size:12px;
  line-height:1.7
}
.message.ai {
  background:#ed6c001f;
  border:1px solid #ed6c0026;
  border-radius:10px 3px 10px 10px;
  align-self:flex-end
}
.reply-tip {
  color:var(--orange-light);
  background:#ed6c000f;
  border:1px solid #ed6c001f;
  border-radius:6px;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding:9px;
  font-size:12px;
  display:flex
}
.compact {
  min-height:163px
}
.compact-message {
  border:1px solid var(--line-soft);
  background:#111824;
  border-radius:8px;
  align-items:center;
  gap:10px;
  margin:13px;
  padding:12px;
  display:flex
}
.compact-message>span {
  background:#2c3749;
  border-radius:50%;
  width:30px;
  height:30px
}
.compact-message>div {
  gap:3px;
  margin-right:auto;
  display:grid
}
.compact-message b {
  color:var(--text);
  font-size:12px
}
.compact-message small {
  color:var(--muted-2);
  font-size:12px
}
.compact-message .icon {
  color:var(--muted-2)
}
.group-bars {
  align-items:end;
  gap:8px;
  height:76px;
  padding:15px 20px;
  display:flex
}
.group-bars i {
  background:linear-gradient(var(--blue), #438bff1f);
  border-radius:3px 3px 0 0;
  width:18%
}
.group-bars i:first-child {
  height:36%
}
.group-bars i:nth-child(2) {
  height:70%
}
.group-bars i:nth-child(3) {
  height:55%
}
.group-bars i:nth-child(4) {
  height:90%
}
.feature-strip {
  border:1px solid var(--line-soft);
  background:#141a238c;
  border-radius:12px;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
  padding:20px;
  display:flex
}
.feature-strip span {
  color:var(--muted);
  align-items:center;
  gap:5px;
  padding:7px 10px;
  font-size:12px;
  display:flex
}
.feature-strip .icon {
  color:var(--green)
}
.agent-builder {
  grid-template-columns:4fr 8fr;
  gap:20px;
  margin-top:52px;
  display:grid
}
.agent-steps {
  gap:8px;
  display:grid
}
.agent-steps button {
  text-align:left;
  border:1px solid var(--line-soft);
  background:var(--card);
  border-radius:12px;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:13px 15px;
  transition:all .2s;
  display:grid
}
.agent-steps button:hover,.agent-steps button.active {
  background:linear-gradient(90deg, #ed6c001c, var(--card));
  border-color:#ed6c0052
}
.agent-steps button>span {
  width:32px;
  height:32px;
  color:var(--muted);
  font:600 12px var(--font-num);
  background:#202a3a;
  border-radius:8px;
  place-items:center;
  display:grid
}
.agent-steps button.active>span {
  color:#fff;
  background:var(--orange);
  box-shadow:0 0 18px #ed6c0040
}
.agent-steps button>div {
  gap:5px;
  display:grid
}
.agent-steps b {
  color:var(--text);
  font-size:13px
}
.agent-steps small {
  color:var(--muted-2);
  font-size:12px
}
.agent-steps .icon {
  color:var(--muted-2)
}
.agent-config {
  border:1px solid var(--line-soft);
  border-radius:var(--radius-card);
  background:#0d131e;
  overflow:hidden
}
.config-head {
  border-bottom:1px solid var(--line-soft);
  justify-content:space-between;
  align-items:center;
  height:64px;
  padding:0 20px;
  display:flex
}
.config-head>div {
  gap:3px;
  display:grid
}
.config-head small {
  color:var(--muted-2);
  font-size:12px
}
.config-head b {
  color:#fff;
  font-size:14px
}
.config-head>span {
  color:var(--green);
  font-size:12px
}
.config-body {
  grid-template-columns:1fr 290px;
  min-height:376px;
  display:grid
}
.form-preview {
  border-right:1px solid var(--line-soft);
  align-content:start;
  gap:14px;
  padding:22px;
  display:grid
}
.form-preview label {
  color:var(--muted);
  gap:7px;
  font-size:12px;
  display:grid
}
.form-preview label>span {
  color:#c9ced8;
  border:1px solid var(--line-soft);
  background:#111824;
  border-radius:7px;
  align-items:center;
  min-height:34px;
  padding:0 11px;
  font-size:12px;
  display:flex
}
.form-preview label>span.textarea {
  align-items:flex-start;
  min-height:62px;
  padding-top:10px;
  line-height:1.6
}
.knowledge-selected {
  background:#9d6cff0f;
  border:1px solid #9d6cff2e;
  border-radius:8px;
  align-items:center;
  gap:10px;
  padding:12px;
  display:flex
}
.knowledge-selected>.icon:first-child {
  color:var(--purple)
}
.knowledge-selected>.icon:last-child {
  color:var(--green);
  margin-left:auto
}
.knowledge-selected>div {
  gap:3px;
  display:grid
}
.knowledge-selected b {
  color:var(--text);
  font-size:12px
}
.knowledge-selected small {
  color:var(--muted-2);
  font-size:12px
}
.agent-builder {
  grid-template-columns:260px minmax(0,1fr);
  align-items:stretch;
  gap:18px;
  margin-top:52px;
  display:grid
}
.agent-stepper {
  border:1px solid var(--line-soft);
  background:#0d131eb8;
  border-radius:14px;
  grid-template-columns:1fr;
  align-content:start;
  gap:0;
  padding:8px;
  display:grid
}
.agent-stepper button {
  text-align:left;
  background:0 0;
  border-radius:10px;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:76px;
  padding:11px 15px;
  transition:background .2s,box-shadow .2s;
  display:grid;
  position:relative
}
.agent-stepper button:hover {
  background:#ffffff09
}
.agent-stepper button.active {
  background:linear-gradient(135deg,#ed6c0029,#ed6c000a);
  box-shadow:inset 0 0 0 1px #ed6c0033
}
.step-index {
  z-index:2;
  width:32px;
  height:32px;
  color:var(--muted);
  border:1px solid var(--line);
  font:600 12px var(--font-num);
  background:#202a3a;
  border-radius:9px;
  place-items:center;
  display:grid;
  position:relative
}
.agent-stepper button.active .step-index {
  color:#fff;
  background:var(--orange);
  border-color:#0000;
  box-shadow:0 0 18px #ed6c0045
}
.agent-stepper button:has(.step-index .icon) .step-index {
  color:var(--green);
  background:#30cf911a;
  border-color:#30cf9133
}
.agent-stepper button>div {
  gap:4px;
  min-width:0;
  display:grid
}
.agent-stepper b {
  color:var(--text);
  font-size:12px
}
.agent-stepper small {
  color:var(--muted-2);
  font-size:12px;
  line-height:1.45
}
.step-line {
  z-index:1;
  background:linear-gradient(#ed6c0061,#ffffff14);
  width:1px;
  height:32px;
  position:absolute;
  top:calc(50% + 16px);
  left:31px
}
.agent-config {
  margin-top:0
}
.step-config-panel {
  border-right:1px solid var(--line-soft);
  flex-direction:column;
  padding:24px;
  display:flex
}
.step-config-intro {
  border-bottom:1px solid var(--line-soft);
  align-items:center;
  gap:12px;
  padding-bottom:18px;
  display:flex
}
.step-config-intro>span {
  width:42px;
  height:42px;
  color:var(--orange-light);
  background:#ed6c001f;
  border-radius:10px;
  place-items:center;
  display:grid
}
.step-config-intro>div {
  gap:3px;
  display:grid
}
.step-config-intro small {
  color:var(--orange-light);
  font-size:12px
}
.step-config-intro h3 {
  color:#fff;
  font-size:16px
}
.step-config-intro p {
  color:var(--muted-2);
  font-size:12px
}
.step-fields {
  gap:12px;
  margin-top:18px;
  display:grid
}
.step-field {
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:12px;
  display:grid
}
.step-field>span {
  color:var(--muted);
  font-size:12px
}
.step-field>div {
  color:#c9ced8;
  border:1px solid var(--line-soft);
  background:#111824;
  border-radius:8px;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  font-size:12px;
  display:flex
}
.step-field>div.long-value {
  min-height:50px;
  line-height:1.55
}
.step-field>div .icon:first-child {
  color:var(--purple)
}
.step-field>div .icon:last-child {
  color:var(--green);
  margin-left:auto
}
.step-note {
  min-height:38px;
  color:var(--muted);
  background:#ed6c000e;
  border:1px solid #ed6c001f;
  border-radius:8px;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding:9px 11px;
  font-size:12px;
  display:flex
}
.step-note .icon {
  color:var(--orange-light)
}
.step-navigation {
  justify-content:flex-end;
  gap:8px;
  margin-top:auto;
  padding-top:18px;
  display:flex
}
.step-navigation button {
  min-height:36px;
  color:var(--muted);
  border:1px solid var(--line);
  background:#141a23;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:0 13px;
  font-size:12px;
  display:flex
}
.step-navigation button:last-child {
  color:#fff;
  background:var(--orange);
  border-color:#0000
}
.step-navigation button:disabled {
  opacity:.35
}
.chat-preview {
  border:1px solid var(--line);
  background:#090e16;
  border-radius:12px;
  flex-direction:column;
  margin:20px;
  padding:13px;
  display:flex;
  box-shadow:0 18px 40px #00000047
}
.preview-label {
  color:var(--muted-2);
  font:500 12px var(--font-num);
  letter-spacing:.12em;
  margin-bottom:10px
}
.chat-preview-head {
  border-bottom:1px solid var(--line-soft);
  align-items:center;
  gap:8px;
  padding-bottom:12px;
  display:flex
}
.chat-preview-head>span {
  color:#fff;
  background:linear-gradient(135deg, var(--orange), #ff8a45);
  border-radius:9px;
  place-items:center;
  width:32px;
  height:32px;
  display:grid
}
.chat-preview-head>div {
  gap:3px;
  display:grid
}
.chat-preview-head b {
  color:#fff;
  font-size:12px
}
.chat-preview-head small {
  color:var(--muted-2);
  align-items:center;
  gap:4px;
  font-size:12px;
  display:flex
}
.chat-preview-head small i {
  background:var(--green);
  border-radius:50%;
  width:4px;
  height:4px
}
.welcome-message {
  color:#bfc5cf;
  background:#192334;
  border-radius:3px 9px 9px;
  width:88%;
  margin-top:25px;
  padding:10px;
  font-size:12px;
  line-height:1.65
}
.suggestions {
  flex-wrap:wrap;
  gap:5px;
  margin-top:11px;
  display:flex
}
.suggestions span {
  color:var(--orange-light);
  border:1px solid #ed6c002e;
  border-radius:6px;
  padding:6px 8px;
  font-size:12px
}
.chat-input {
  min-height:38px;
  color:var(--muted-2);
  border:1px solid var(--line);
  border-radius:8px;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-left:10px;
  font-size:12px;
  display:flex
}
.chat-input span {
  color:#fff;
  background:var(--orange);
  border-radius:6px;
  place-items:center;
  width:27px;
  height:27px;
  margin-right:4px;
  display:grid
}
.data-membership-grid {
  grid-template-columns:1fr;
  margin-top:52px;
  display:grid
}
.membership {
  border:1px solid var(--line-soft);
  border-radius:var(--radius-card);
  background:var(--card);
  padding:22px
}
.subsection-title {
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  display:flex
}
.subsection-title>div {
  gap:5px;
  display:grid
}
.subsection-title small {
  color:var(--muted-2);
  font:500 12px var(--font-num);
  letter-spacing:.12em
}
.subsection-title h3 {
  color:#fff;
  font-size:20px
}
.subsection-title>span {
  color:var(--muted);
  align-items:center;
  gap:5px;
  font-size:12px;
  display:flex
}
.plan-grid {
  grid-template-columns:repeat(2,1fr);
  align-items:stretch;
  gap:10px;
  display:grid
}
.plan-card {
  --plan-accent:var(--orange-light);
  border:1px solid var(--line-soft);
  cursor:pointer;
  background:#0d131e;
  border-radius:11px;
  flex-direction:column;
  min-width:0;
  padding:16px;
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;
  display:flex;
  position:relative
}
.plan-coral {
  --plan-accent:#ff5c5c
}
.plan-purple {
  --plan-accent:#963cff
}
.plan-card:hover,.plan-card:focus-visible {
  border-color:var(--plan-accent);
  transform:translateY(-5px)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card:hover,.plan-card:focus-visible {
    border-color:color-mix(in srgb, var(--plan-accent) 52%, transparent)
  }
}
.plan-card:hover,.plan-card:focus-visible {
  background:linear-gradient(160deg, var(--plan-accent), #0d131e 52%)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card:hover,.plan-card:focus-visible {
    background:linear-gradient(160deg, color-mix(in srgb, var(--plan-accent) 8%, #0d131e), #0d131e 52%)
  }
}
.plan-card:hover,.plan-card:focus-visible {
  box-shadow:0 18px 38px #00000047, 0 0 24px var(--plan-accent)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card:hover,.plan-card:focus-visible {
    box-shadow:0 18px 38px #00000047, 0 0 24px color-mix(in srgb, var(--plan-accent) 10%, transparent)
  }
}
.plan-card:hover,.plan-card:focus-visible {
  outline:none
}
.plan-card.selected {
  border-color:var(--plan-accent);
  transform:translateY(-4px)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card.selected {
    border-color:color-mix(in srgb, var(--plan-accent) 62%, transparent)
  }
}
.plan-card.selected {
  background:linear-gradient(160deg, var(--plan-accent), #0d131e 48%)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card.selected {
    background:linear-gradient(160deg, color-mix(in srgb, var(--plan-accent) 11%, #0d131e), #0d131e 48%)
  }
}
.plan-card.selected {
  box-shadow:0 18px 38px #00000047, 0 0 28px var(--plan-accent)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card.selected {
    box-shadow:0 18px 38px #00000047, 0 0 28px color-mix(in srgb, var(--plan-accent) 12%, transparent)
  }
}
.plan-card:active {
  transform:translateY(-1px)scale(.995)
}
.plan-card h4 {
  color:#fff;
  font-size:19px
}
.plan-card>p {
  min-height:36px;
  color:var(--muted);
  margin-top:8px;
  font-size:12px;
  line-height:1.65
}
.plan-price {
  border-top:1px solid var(--line-soft);
  grid-template-columns:auto 1fr;
  align-items:baseline;
  column-gap:7px;
  margin-top:5px;
  padding-top:12px;
  display:grid
}
.plan-price small {
  color:var(--muted-2);
  font-size:12px
}
.plan-price b {
  color:#fff;
  font:600 24px var(--font-num)
}
.plan-price b em {
  margin-right:2px;
  font-size:15px;
  font-style:normal
}
.plan-price span {
  color:var(--muted);
  grid-column:1/-1;
  margin-top:6px;
  font-size:12px
}
.plan-gift {
  min-height:42px;
  color:var(--plan-accent);
  background:var(--plan-accent);
  border-radius:6px;
  align-items:center;
  gap:6px;
  margin-top:11px;
  padding:9px;
  display:flex
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-gift {
    background:color-mix(in srgb, var(--plan-accent) 10%, transparent)
  }
}
.plan-gift {
  font-size:12px;
  line-height:1.45;
  transition:background .25s
}
.plan-card:hover .plan-gift,.plan-card.selected .plan-gift {
  background:var(--plan-accent)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card:hover .plan-gift,.plan-card.selected .plan-gift {
    background:color-mix(in srgb, var(--plan-accent) 15%, transparent)
  }
}
.plan-card h5 {
  color:var(--muted);
  margin:15px 0 0;
  font-size:12px
}
.plan-features {
  gap:11px;
  padding:14px 0 18px;
  display:grid
}
.plan-features span {
  color:var(--muted);
  align-items:flex-start;
  gap:6px;
  font-size:12px;
  line-height:1.55;
  display:flex
}
.plan-features .icon {
  color:var(--green)
}
.plan-action {
  min-height:42px;
  color:var(--text);
  border:1px solid var(--line);
  background:#141a23;
  border-radius:7px;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin-top:auto;
  font-size:12px;
  transition:color .25s,border-color .25s,background .25s,box-shadow .25s;
  display:flex
}
.plan-card:hover .plan-action {
  color:#fff;
  border-color:var(--plan-accent)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card:hover .plan-action {
    border-color:color-mix(in srgb, var(--plan-accent) 55%, transparent)
  }
}
.plan-card:hover .plan-action {
  background:var(--plan-accent)
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card:hover .plan-action {
    background:color-mix(in srgb, var(--plan-accent) 12%, #141a23)
  }
}
.plan-card.selected .plan-action {
  color:#fff;
  background:var(--plan-accent);
  box-shadow:0 8px 20px var(--plan-accent);
  border-color:#0000
}
@supports (color:color-mix(in lab, red, red)) {
  .plan-card.selected .plan-action {
    box-shadow:0 8px 20px color-mix(in srgb, var(--plan-accent) 22%, transparent)
  }
}
.trust-section {
  padding-bottom:0
}
.trust-stats {
  justify-content:center;
  align-items:stretch;
  margin-top:52px;
  display:flex;
  position:relative
}
.trust-stats>div {
  text-align:center;
  border-right:1px solid var(--line);
  min-width:260px;
  padding:30px 50px
}
.trust-stats>div:nth-child(2) {
  border-right:0
}
.trust-stats strong {
  color:#fff;
  font-size:22px
}
.trust-stats strong span {
  color:var(--orange-light);
  font:700 44px var(--font-num);
  padding-inline:4px
}
.trust-stats small {
  color:var(--muted);
  margin-top:8px;
  font-size:12px;
  display:block
}
.trust-stats>p {
  color:var(--muted-2);
  font-size:12px;
  position:absolute;
  top:calc(100% + 7px)
}
.certifications {
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:52px;
  display:grid
}
.certifications>div {
  border:1px solid var(--line-soft);
  background:var(--card);
  border-radius:12px;
  place-items:center;
  padding:24px;
  display:grid
}
.certifications span {
  width:42px;
  height:42px;
  color:var(--orange-light);
  background:#ed6c001a;
  border-radius:50%;
  place-items:center;
  display:grid
}
.certifications b {
  color:var(--text);
  margin-top:12px;
  font-size:13px
}
.certifications small {
  color:var(--muted-2);
  margin-top:5px;
  font-size:12px
}
.final-cta {
  text-align:center;
  background:linear-gradient(145deg,#ed6c0014,#9d6cff0f 52%,#0d131e);
  border:1px solid #ed6c002e;
  border-radius:24px 24px 0 0;
  flex-direction:column;
  align-items:center;
  min-height:370px;
  margin-top:96px;
  padding:76px 40px;
  display:flex;
  position:relative;
  overflow:hidden
}
.final-cta:before {
  content:"";
  background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);
  background-size:28px 28px;
  position:absolute;
  inset:0;
  -webkit-mask-image:radial-gradient(circle,#000,#0000 70%);
  mask-image:radial-gradient(circle,#000,#0000 70%)
}
.cta-glow {
  filter:blur(70px);
  background:#ed6c0024;
  border-radius:50%;
  width:360px;
  height:160px;
  position:absolute;
  top:80px
}
.final-cta>:not(.cta-glow) {
  position:relative
}
.final-cta p {
  color:var(--muted);
  margin-top:15px;
  font-size:15px
}
.dialog-layer {
  z-index:300;
  place-items:center;
  padding:24px;
  display:grid;
  position:fixed;
  inset:0
}
.dialog-backdrop {
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  cursor:default;
  background:#02050ac7;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.site-dialog {
  z-index:1;
  width:min(100%,480px);
  max-height:calc(100dvh - 48px);
  animation:.28s ease-out dialog-in;
  position:relative;
  overflow-y:auto
}
/* 两个弹窗必须一样长：内容量不同（试用多一组「类型」，登录多一行「记住账号」），
   自然高度会差几像素，并排看就是「一个长一个短」。
   这里统一 min-height 抹平；用 min() 兜底矮屏（min-height 会赢过 max-height，不写 min() 会顶出视口）。 */
.login-dialog,.trial-dialog {
  min-height:min(648px, calc(100dvh - 48px))
}
.login-dialog {
  color:var(--text);
  background:linear-gradient(155deg,#1b2432fa,#080c14fc);
  border:1px solid #ffffff1f;
  border-radius:20px;
  padding:32px;
  box-shadow:0 32px 100px #000000a8,0 0 60px #9d6cff14
}
.login-dialog:before {
  content:"";
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 15% 0,#ed6c0024,#0000 32%),radial-gradient(circle at 100% 80%,#9d6cff1a,#0000 35%);
  position:absolute;
  inset:0
}
.login-dialog>* {
  position:relative
}
.dialog-close {
  z-index:2;
  width:36px;
  height:36px;
  color:var(--muted);
  border:1px solid var(--line);
  background:#ffffff0a;
  border-radius:50%;
  place-items:center;
  transition:all .2s;
  display:grid;
  position:absolute;
  top:18px;
  right:18px
}
.dialog-close:hover {
  color:#fff;
  border-color:#ed6c0066;
  transform:rotate(5deg)
}
.login-brand {
  border-bottom:1px solid var(--line-soft);
  padding-bottom:24px
}
.dialog-heading {
  margin-top:28px
}
.dialog-heading h2 {
  color:#fff;
  letter-spacing:-.03em;
  margin-top:8px;
  font-size:30px
}
.dialog-heading p {
  color:var(--muted);
  margin-top:8px;
  font-size:13px
}
.login-form {
  gap:18px;
  margin-top:28px;
  display:grid
}
.login-form>label {
  color:#d8dce4;
  gap:8px;
  font-size:12px;
  font-weight:500;
  display:grid
}
.field-control {
  min-height:50px;
  color:var(--muted-2);
  border:1px solid var(--line);
  background:#05090f7a;
  border-radius:10px;
  align-items:center;
  gap:10px;
  padding:0 14px;
  transition:border-color .2s,box-shadow .2s;
  display:flex
}
.field-control:focus-within {
  color:var(--orange-light);
  border-color:#ed6c008f;
  box-shadow:0 0 0 3px #ed6c0014
}
.field-control input {
  color:#fff;
  min-width:0;
  font:13px var(--font-cn);
  background:0 0;
  border:0;
  outline:0;
  flex:1
}
.field-control input::placeholder {
  color:#596477
}
.login-options {
  justify-content:space-between;
  align-items:center;
  margin-top:-3px;
  display:flex
}
.login-options>label {
  color:var(--muted);
  align-items:center;
  gap:7px;
  font-size:12px;
  display:flex
}
.login-options input {
  accent-color:var(--orange)
}
.login-options>button {
  color:var(--orange-light);
  background:0 0;
  font-size:12px
}
.dialog-submit {
  color:#fff;
  background:linear-gradient(135deg, #ff8438, var(--orange));
  border-radius:10px;
  justify-content:center;
  align-items:center;
  gap:9px;
  min-height:50px;
  font-size:14px;
  font-weight:600;
  transition:transform .2s,box-shadow .2s;
  display:flex;
  box-shadow:0 12px 30px #ed6c003d
}
.dialog-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 16px 38px #ed6c005c
}
.dialog-switch {
  color:var(--muted-2);
  justify-content:center;
  gap:5px;
  font-size:12px;
  display:flex
}
.dialog-switch button {
  color:var(--orange-light);
  background:0 0
}
.form-message {
  min-height:16px;
  color:var(--green);
  text-align:center;
  font-size:12px
}
.trial-dialog {
  width:min(100%,720px);
  color:var(--text);
  background:linear-gradient(155deg,#1b2432fc,#080c14fc);
  border:1px solid #ffffff1f;
  border-radius:20px;
<<<<<<< HEAD
  padding:48px 42px;
=======
  padding:32px;
>>>>>>> 51b80738685ca56bd714797503f5d89e9c8043e4
  box-shadow:0 34px 110px #000000ad,0 0 70px #ed6c0014
}
.trial-dialog:before {
  content:"";
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 0 0,#ed6c0021,#0000 30%),radial-gradient(circle at 100% 100%,#9d6cff14,#0000 34%);
  position:absolute;
  inset:0
}
.trial-dialog>* {
  position:relative
}
/* 两个弹窗必须长得一样大：宽度都是 min(100%,480px)，内边距/标题/间距也统一到
   .login-dialog 的规格（32px / h2 30px），否则并排看会觉得「一大一小」。
   改这里时同步改 .login-dialog，别只改一边。 */
.trial-dialog .login-brand {
  padding-bottom:20px
<<<<<<< HEAD
}
.trial-dialog .brand b {
  font-size:18px
}
.trial-dialog .brand small {
  font-size:13px
}
.trial-dialog .dialog-heading {
  margin-top:28px
}
.trial-dialog .eyebrow {
  font-size:14px
}
.trial-dialog .dialog-heading h2 {
  margin-top:6px;
  font-size:30px
}
.trial-dialog .dialog-heading p {
  margin-top:5px;
  font-size:15px
=======
}
.trial-dialog .dialog-heading {
  margin-top:24px
}
.trial-dialog .dialog-heading h2 {
  margin-top:8px;
  font-size:30px
}
.trial-dialog .dialog-heading p {
  margin-top:8px
>>>>>>> 51b80738685ca56bd714797503f5d89e9c8043e4
}
.trial-dialog-head {
  border-bottom:1px solid var(--line-soft);
  background:#ffffff04;
  align-items:center;
  gap:16px;
  min-height:92px;
  padding:20px 30px;
  display:flex
}
.trial-head-icon {
  color:#fff;
  background:linear-gradient(145deg,#ffad59,#ff5b08);
  border-radius:14px;
  place-items:center;
  width:46px;
  height:46px;
  display:grid;
  box-shadow:0 9px 18px #ff600a40
}
.trial-dialog-head h2 {
  color:#fff;
  letter-spacing:-.02em;
  font-size:25px
}
.trial-close {
  width:40px;
  height:40px;
  color:var(--muted);
  border:1px solid var(--line);
  background:#ffffff0a;
  border-radius:50%;
  place-items:center;
  margin-left:auto;
  transition:all .2s;
  display:grid
}
.trial-close:hover {
  color:#fff;
  background:#ed6c0014;
  border-color:#ed6c0066;
  transform:rotate(5deg)
}
.trial-form {
<<<<<<< HEAD
  gap:22px;
  margin-top:28px;
=======
  gap:12px;
  margin-top:26px;
>>>>>>> 51b80738685ca56bd714797503f5d89e9c8043e4
  display:grid
}
.trial-form>label {
  color:#d8dce4;
  gap:10px;
  font-size:14px;
  font-weight:500;
  display:grid
}
.trial-form label b,.trial-form legend b {
  color:var(--orange-light)
}
.trial-field {
  border-radius:10px;
  width:100%;
  min-height:56px
}
.trial-field input {
  color:#fff;
  width:100%;
  font:15px var(--font-cn);
  background:0 0;
  border:0;
  outline:0
}
.trial-field input::placeholder {
  color:#596477
}
.trial-form fieldset {
  border:0;
  min-width:0;
  margin:0;
  padding:0
}
.trial-form legend {
  color:#d8dce4;
  margin-bottom:6px;
  font-size:14px;
  font-weight:500
}
.trial-type-options {
  grid-template-columns:1fr 1fr;
  gap:12px;
  display:grid
}
.trial-type-options button {
  min-height:56px;
  color:var(--muted);
  border:1px solid var(--line);
  background:#05090f7a;
  border-radius:10px;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  transition:all .2s;
  display:flex
}
/* hover 只用中性提亮 + 边框变橙，不要加橙色底 ——
   否则「未选中 hover」看起来比「已选中」还满，选中态就失效了 */
.trial-type-options button:hover {
  color:#fff;
  background:#ffffff0a;
  border-color:#ed6c007a
}
/* 选中态（照设计稿）：**橙色 1px 描边 + 橙色图标文字**，按钮里面不加任何填充，
   底色与未选中完全一致；图标跟着 currentColor 变橙。
   ⚠ 走过两次弯路，别再犯：
     1) 最早用 linear-gradient(#ffb25e,#ff5e0a) 实心渐变 —— 那是后台老系统按钮写法，设计稿没有；
     2) 改成描边后又在 background 留了一层 #ed6c000f 橙色底 —— 设计稿里选中不改底色，
        那层底会让人误以为「里面的颜色没改」。
   ⚠ 文字/描边用 var(--orange) #ed6c00，**不是** --orange-light #ff8a45（偏浅，和设计稿对不上）。
      设计稿实测：文字 (237,108,1)、描边 (237,108,1)、按钮内填充 (11,15,24) = 未选中同色。 */
.trial-type-options button.active {
  color:var(--orange);
  background:#05090f7a;
  border-color:var(--orange);
  box-shadow:none
}
.trial-notice {
  min-height:52px;
  color:var(--muted);
  background:#ed6c000f;
  border:1px dashed #ed6c004d;
  border-radius:10px;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  font-size:14px;
  display:flex
}
.trial-notice span {
  color:#fff;
  background:#ed6c002e;
  border-radius:7px;
  flex:none;
  place-items:center;
  width:22px;
  height:22px;
  display:grid
}
.trial-actions {
  grid-template-columns:1fr 1fr;
  gap:16px;
  display:grid
}
.trial-actions button {
  border-radius:10px;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:56px;
  font-size:16px;
  font-weight:600;
  transition:all .2s;
  display:flex
}
.trial-cancel {
  color:var(--text);
  border:1px solid var(--line);
  background:#ffffff0a
}
.trial-cancel:hover {
  background:#ffffff14;
  border-color:#fff3
}
.trial-submit {
  color:#fff;
  background:linear-gradient(135deg, #ff8438, var(--orange));
  box-shadow:0 12px 30px #ed6c003d
}
.trial-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 15px 30px #ff600a4d
}
.trial-message {
  min-height:12px;
  color:var(--green);
  margin-top:-5px;
  font-size:14px
}
/* 申请试用弹窗放大后，图标同步放大（SVG 上的 width/height 是展示属性，CSS 覆盖即可） */
.trial-field .icon,.trial-type-options .icon {
  width:20px;
  height:20px
}
.trial-actions .icon {
  width:19px;
  height:19px
}
.trial-notice .icon {
  width:15px;
  height:15px
}
footer {
  border-top:1px solid var(--line-soft);
  background:#080c14
}
.footer-shell {
  grid-template-columns:4fr 8fr;
  gap:60px;
  padding-block:72px 54px;
  display:grid
}
.footer-brand>p {
  max-width:300px;
  color:var(--muted);
  margin-top:20px;
  font-size:12px;
  line-height:1.8
}
.footer-brand>span {
  color:var(--orange-light);
  margin-top:16px;
  font-size:12px;
  display:inline-block
}
.footer-brand .logo-mark-image {
  margin-left:-8px
}
.footer-links {
  grid-template-columns:1.4fr 1fr 1fr;
  gap:28px;
  display:grid
}
.footer-links>div {
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  display:flex
}
.footer-links b {
  color:var(--text);
  margin-bottom:6px;
  font-size:12px
}
.footer-links a {
  color:var(--muted-2);
  font-size:12px;
  transition:color .2s
}
.footer-links a:hover {
  color:var(--orange-light)
}
.footer-bottom {
  min-height:64px;
  width:min(calc(100% - 48px), var(--container));
  border-top:1px solid var(--line-soft);
  color:var(--muted-2);
  align-items:center;
  gap:24px;
  margin-inline:auto;
  font-size:12px;
  display:flex
}
.footer-bottom small {
  margin-left:auto
}
@keyframes menu-in {
  0% {
    opacity:0;
    transform:translateY(-6px)scale(.98)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes dialog-in {
  0% {
    opacity:0;
    transform:translateY(18px)scale(.97)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes float {
  0%,to {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-7px)
  }
}
@keyframes line-travel {
  0% {
    left:-8px
  }
  to {
    left:100%
  }
}
@keyframes orbit-spin {
  0% {
    transform:translate(-50%,-50%)rotate(-12deg)
  }
  to {
    transform:translate(-50%,-50%)rotate(348deg)
  }
}
@keyframes node-drift {
  0%,to {
    opacity:.68;
    transform:translateY(0)
  }
  50% {
    opacity:1;
    transform:translateY(-8px)
  }
}
@keyframes scroll-cue {
  0% {
    opacity:0;
    transform:translate(-50%)
  }
  35% {
    opacity:1
  }
  to {
    opacity:0;
    transform:translate(-50%,10px)
  }
}
@media (width<=1100px) {
  .desktop-nav {
    gap:0
  }
  .nav-link {
    padding-inline:9px
  }
  .logo-link {
    flex-basis:150px
  }
  /* nav-actions 保持自适应，避免 821~1100px 被压回固定宽度导致按钮折行 */
  .nav-actions {
    flex-basis:auto
  }
  .employee-grid {
    grid-template-columns:1fr 1fr
  }
  .dashboard {
    width:86%
  }
  .worker-chip {
    min-width:155px
  }
  .worker-chip b,.worker-chip small {
    font-size:12px
  }
  .data-membership-grid {
    grid-template-columns:1fr
  }
  .config-body {
    grid-template-columns:1fr 260px
  }
}
@media (width<=820px) {
  :root {
    --space-section:76px
  }
  .section-shell,.nav-shell,.footer-shell {
    width:min(calc(100% - 32px), var(--container))
  }
  .site-header,.nav-shell {
    height:64px
  }
  .desktop-nav,.nav-actions>.login-link,.nav-actions>.trial-button {
    display:none
  }
  .logo-link,.nav-actions {
    flex-basis:auto
  }
  .mobile-menu-button {
    color:#fff;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:9px;
    place-items:center;
    width:40px;
    height:40px;
    display:grid
  }
  .mobile-drawer {
    z-index:102;
    border-left:1px solid var(--line);
    background:#0d131e;
    flex-direction:column;
    width:min(88vw,360px);
    padding:16px;
    transition:transform .3s;
    display:flex;
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    transform:translate(102%)
  }
  .mobile-drawer.open {
    transform:none
  }
  .drawer-backdrop {
    z-index:101;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    background:#0000009e;
    display:block;
    position:fixed;
    inset:0
  }
  .drawer-head {
    border-bottom:1px solid var(--line-soft);
    justify-content:space-between;
    align-items:center;
    height:48px;
    padding-bottom:14px;
    display:flex
  }
  .drawer-head button {
    width:36px;
    height:36px;
    color:var(--muted);
    background:var(--card);
    border-radius:8px;
    place-items:center;
    display:grid
  }
  .drawer-scroll {
    flex:1;
    padding-block:14px 90px;
    overflow:auto
  }
  .drawer-title {
    color:var(--muted-2);
    letter-spacing:.1em;
    padding:16px 10px 8px;
    font-size:12px
  }
  .drawer-scroll a {
    min-height:45px;
    color:var(--text);
    border-radius:8px;
    justify-content:space-between;
    align-items:center;
    padding-inline:10px;
    font-size:13px;
    display:flex
  }
  .drawer-scroll a:hover {
    background:var(--card)
  }
  .drawer-login-link {
    width:100%;
    min-height:45px;
    color:var(--text);
    background:0 0;
    border-radius:8px;
    justify-content:space-between;
    align-items:center;
    padding-inline:10px;
    font-size:13px;
    display:flex
  }
  .drawer-login-link:hover {
    background:var(--card)
  }
  .drawer-trial {
    min-height:48px;
    position:absolute;
    bottom:16px;
    left:16px;
    right:16px
  }
  .hero {
    min-height:740px;
    padding-top:120px;
    padding-bottom:80px
  }
  .hero-copy {
    text-align:center
  }
  .hero-copy>p {
    margin-inline:auto
  }
  .selling-tags,.hero-ctas {
    justify-content:center
  }
  .account-entry {
    margin-inline:auto
  }
  .hero-atmosphere {
    top:64px
  }
  .orbit-one {
    width:min(64vw,570px);
    height:250px
  }
  .orbit-two {
    width:min(80vw,710px);
    height:350px
  }
  .hero-node {
    opacity:.72
  }
  .node-one {
    left:3%
  }
  .node-two {
    right:3%
  }
  .node-three {
    left:5%
  }
  .node-four {
    right:4%
  }
  .dashboard {
    grid-template-columns:95px 1fr;
    width:88%;
    height:360px;
    top:55px;
    right:6%
  }
  .worker-1,.worker-3 {
    left:0
  }
  .worker-2,.worker-4 {
    right:0
  }
  .worker-chip {
    min-width:145px
  }
  .worker-chip:after {
    width:35px
  }
  .loop-bar {
    justify-content:flex-start;
    overflow-x:auto
  }
  .loop-bar i {
    flex-basis:28px
  }
  .workflow {
    grid-template-columns:1fr
  }
  .flow-arrow {
    transform-origin:0;
    inset:auto auto -31px 50%;
    transform:rotate(90deg)translate(-50%)
  }
  .process-line {
    grid-template-columns:repeat(3,1fr)
  }
  .process-node i {
    display:none
  }
  .conversation-showcase,.agent-builder {
    grid-template-columns:1fr
  }
  .agent-steps {
    grid-template-columns:1fr 1fr
  }
  .agent-stepper {
    grid-template-columns:repeat(5,minmax(150px,1fr));
    overflow-x:auto
  }
  .step-line {
    background:linear-gradient(90deg,#ed6c0061,#ffffff14);
    width:22px;
    height:1px;
    top:50%;
    left:auto;
    right:-11px
  }
  .config-body {
    grid-template-columns:1fr 280px
  }
  .footer-shell {
    grid-template-columns:1fr
  }
}
@media (width<=560px) {
  :root {
    --space-section:68px
  }
  .section-shell,.nav-shell,.footer-shell {
    width:min(calc(100% - 28px), var(--container))
  }
  .hero {
    min-height:700px;
    padding-top:104px;
    padding-bottom:76px
  }
  .hero-kicker {
    font-size:12px
  }
  .hero h1 {
    font-size:42px
  }
  .hero-copy>p {
    font-size:14px;
    line-height:1.75
  }
  .selling-tags {
    grid-template-columns:1fr 1fr;
    display:grid
  }
  .selling-tags span {
    justify-content:center;
    font-size:12px
  }
  .hero-ctas .button {
    flex:1
  }
  .hero-atmosphere {
    top:64px
  }
  .hero-core {
    width:300px;
    height:300px
  }
  .orbit-one {
    width:calc(100vw - 76px);
    height:200px
  }
  .orbit-two {
    width:calc(100vw - 48px);
    height:270px
  }
  .hero-node {
    display:none
  }
  .hero-scroll-cue {
    bottom:16px
  }
  .dashboard {
    grid-template-columns:74px 1fr;
    width:100%;
    height:315px;
    top:37px;
    right:0;
    transform:none
  }
  .dash-side {
    padding-inline:7px
  }
  .dash-side .brand {
    gap:3px
  }
  .dash-side>span {
    padding-inline:5px;
    font-size:12px
  }
  .dash-main {
    padding-inline:10px
  }
  .dash-head {
    margin-inline:-10px;
    padding-inline:10px
  }
  .dash-greeting {
    padding-block:12px 9px
  }
  .insight-card {
    padding:8px
  }
  .insight-card p {
    display:none
  }
  .dash-stats div {
    min-height:53px;
    padding:7px
  }
  .task-card {
    padding:7px
  }
  .worker-chip {
    min-width:132px;
    padding:7px
  }
  .worker-chip>span {
    width:27px;
    height:27px
  }
  .worker-chip small {
    text-overflow:ellipsis;
    max-width:88px;
    overflow:hidden
  }
  .worker-1,.worker-2 {
    top:0
  }
  .worker-3,.worker-4 {
    bottom:0
  }
  .section-head h2,.final-cta h2 {
    font-size:30px
  }
  .section-head>p {
    font-size:14px
  }
  .employee-grid {
    grid-template-columns:1fr;
    margin-top:36px
  }
  .employee-card>p {
    min-height:auto
  }
  .mini-product {
    height:180px
  }
  .workflow {
    margin-top:36px
  }
  .workflow-stage {
    padding:20px
  }
  .process-line {
    grid-template-columns:1fr 1fr;
    margin-top:36px
  }
  .process-node {
    height:80px
  }
  .conversation-body {
    grid-template-columns:90px 1fr;
    height:300px
  }
  .contact-list {
    padding:7px
  }
  .contact-list>span {
    padding-inline:4px;
    font-size:12px
  }
  .contact-list i {
    display:none
  }
  .message-area {
    padding:13px
  }
  .feature-strip {
    justify-content:flex-start;
    padding:13px
  }
  .section-actions {
    width:100%
  }
  .section-actions .button {
    flex:1;
    min-width:140px
  }
  .agent-steps {
    grid-template-columns:1fr
  }
  .agent-steps button {
    min-height:70px
  }
  .agent-stepper {
    border-radius:12px;
    width:calc(100vw - 28px);
    margin-inline:calc(50% - 50vw + 14px)
  }
  .agent-stepper button {
    min-height:68px
  }
  .config-body {
    grid-template-columns:1fr
  }
  .form-preview {
    border-right:0;
    border-bottom:1px solid var(--line-soft)
  }
  .step-config-panel {
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    min-height:380px
  }
  .step-field {
    grid-template-columns:1fr;
    gap:6px
  }
  .chat-preview {
    min-height:320px
  }
  .plan-grid {
    grid-template-columns:1fr
  }
  .plan-card>p {
    min-height:auto
  }
  .trust-stats>div {
    min-width:50%;
    padding:24px 10px
  }
  .trust-stats strong {
    font-size:15px
  }
  .trust-stats strong span {
    font-size:32px
  }
  .certifications {
    grid-template-columns:1fr 1fr
  }
  .certifications>div {
    padding:18px 10px
  }
  .final-cta {
    margin-top:68px;
    min-height:380px;
    margin-inline:-2px;
    padding:62px 20px
  }
  .final-cta p {
    font-size:13px;
    line-height:1.7
  }
  .footer-shell {
    gap:42px;
    padding-block:58px 42px
  }
  .footer-links {
    grid-template-columns:1fr 1fr;
    row-gap:36px
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:10px 18px;
    width:calc(100% - 28px);
    min-height:94px;
    padding-block:18px
  }
  .footer-bottom small {
    width:100%;
    margin-left:0
  }
  .dialog-layer {
    padding:12px
  }
  .site-dialog {
    max-height:calc(100dvh - 24px)
  }
  /* 窄屏两个弹窗也必须长得一样大：桌面端已统一到 32px / h2 30px，
     这里同步降到 padding 26px 20px / h2 26px。
     ⚠ .trial-dialog .dialog-heading h2 的特异性(0,3,0)比 .dialog-heading h2(0,1,0) 高，
       所以标题字号必须把两个选择器都写上，否则试用弹窗会留在 30px。 */
  .login-dialog,.trial-dialog {
    border-radius:16px;
    padding:26px 20px
  }
  .dialog-heading h2,.trial-dialog .dialog-heading h2 {
    font-size:26px
  }
<<<<<<< HEAD
  .trial-dialog {
    border-radius:16px;
    padding:24px 20px
  }
  .trial-dialog .dialog-heading {
    margin-top:18px
  }
  .trial-dialog .dialog-heading h2 {
    font-size:24px
  }
  .trial-dialog .dialog-heading p,.trial-dialog .eyebrow {
    font-size:13px
  }
=======
>>>>>>> 51b80738685ca56bd714797503f5d89e9c8043e4
  .trial-form {
    gap:14px;
    margin-top:18px
  }
  .trial-form>label,.trial-form legend {
    font-size:13px
  }
  .trial-field,.trial-type-options button,.trial-actions button {
    height:48px;
    min-height:48px
  }
  .trial-field input,.trial-type-options button,.trial-actions button {
    font-size:14px
  }
  .trial-notice {
    min-height:44px;
    padding:8px 12px;
    font-size:12px
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,:before,:after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}
@property --tw-rotate-x {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-y {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-z {
  syntax:"*";
  inherits:false
}
@property --tw-skew-x {
  syntax:"*";
  inherits:false
}
@property --tw-skew-y {
  syntax:"*";
  inherits:false
}
@property --tw-blur {
  syntax:"*";
  inherits:false
}
@property --tw-brightness {
  syntax:"*";
  inherits:false
}
@property --tw-contrast {
  syntax:"*";
  inherits:false
}
@property --tw-grayscale {
  syntax:"*";
  inherits:false
}
@property --tw-hue-rotate {
  syntax:"*";
  inherits:false
}
@property --tw-invert {
  syntax:"*";
  inherits:false
}
@property --tw-opacity {
  syntax:"*";
  inherits:false
}
@property --tw-saturate {
  syntax:"*";
  inherits:false
}
@property --tw-sepia {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow-color {
  syntax:"*";
  inherits:false
}
@property --tw-drop-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%
}
@property --tw-drop-shadow-size {
  syntax:"*";
  inherits:false
}
@property --tw-ease {
  syntax:"*";
  inherits:false
}

/* ============================================================================
 * 运行时补充（非设计稿导出）
 * ----------------------------------------------------------------------------
 * 设计稿是 React 条件渲染，弹窗根本不存在于 DOM；静态化后弹窗常驻，靠 [hidden] 隐藏。
 * 另外补了提交中的按钮态与表单提示的语义色。
 * ========================================================================== */
.dialog-layer[hidden] {
  display: none !important
}
.dialog-submit:disabled,
.trial-submit:disabled {
  opacity: .72;
  cursor: not-allowed;
  transform: none
}
.form-message.is-error {
  color: #ff6b6b
}
.form-message.is-ok {
  color: var(--green)
}
/* 价格卡的「立即开通」在静态版里是 span + role=button，需要手型与键盘焦点环 */
.plan-action {
  cursor: pointer
}
.plan-action:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 3px
}
/* 移动抽屉遮罩：设计稿是 React 条件渲染（打开时才插入 DOM），静态化后常驻，
 * 而 .drawer-backdrop 在 ≤900 的媒体查询里就是 display:block，
 * 不补下面这条会一直盖在页面上。JS 通过 body.drawer-open 控制。 */
body:not(.drawer-open) .drawer-backdrop {
  display: none
}
/* 移动抽屉打开时禁止背景滚动（JS 也设了 body.style，双保险） */
.mobile-drawer.open {
  overflow-y: auto
}
/* 试用表单的 label：设计稿给的是 display:grid，而结构是「文本节点 + <b>*</b> + 输入框」，
 * 前两者会被拆成两个 grid item ⇒ 红色星号单独掉到第二行。
 * 改 block 让「联系人 *」同行，输入框用 margin-top 补回原来 grid gap 的 8px。
 * ⚠ 登录表单的 label 是「文本 + span」正好两个 item，grid 是对的，不要跟着一起改。 */
.trial-form>label {
  display: block
}
.trial-form>label>.field-control {
  margin-top: 8px
}
/* 「记住账号」复选框：设计稿只给了 accent-color（只影响选中态的填充），
 * 未选中态在深色页面上仍是浏览器默认的白色方块，非常突兀。
 * 加 color-scheme:dark 让它按深色渲染；只作用于这一个控件，不全局改（避免影响输入框/滚动条）。 */
.login-options input {
  color-scheme: dark
}
/* ★ Chrome 自动填充会把深色输入框刷成「白底黑字」（2026-10-22 用户截图）。
 * 它用的是 `background-color: rgb(232,240,254) !important`，改 background 没用；
 * 只能靠 inset 阴影盖住 —— 阴影优先级高于自动填充的背景色。
 * #0d121b = .field-control 的 rgba(5,9,15,.48) 叠在弹窗卡片 rgb(20,27,39) 上的实际合成色，
 * 保证填充前后框内底色一致。登录表单与试用表单的输入框都在 .field-control 里，一条规则覆盖两处。 */
.field-control input:-webkit-autofill,
.field-control input:-webkit-autofill:hover,
.field-control input:-webkit-autofill:focus,
.field-control input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0d121b inset;
  box-shadow: 0 0 0 1000px #0d121b inset;
  caret-color: #fff;
  transition: background-color 99999s ease-in-out 0s
}
/* 会话列表的未读数徽标：14×14 圆 + 12px 数字，行高是 normal（约 14.5px）⇒
 * 行盒比圆还高，数字视觉上偏下、底部被圆裁掉一点（用户截图 2026-10-22）。
 * 钉死 line-height:1 让文字盒正好等于字号，grid 居中才是真正的视觉居中。 */
.contact-list small {
  line-height: 1;
  font-size: 11px;
  padding-bottom: 1px
}


/* ============================================================================
 * 窄屏修复（设计稿在 <=560 有缺陷，这里补）
 * ----------------------------------------------------------------------------
 * 现象（设计稿导出物在 390px 下同样存在）：
 *   1. hero 副标题不换行，横向溢出把 body 撑宽 —— 进而把顶栏的汉堡按钮顶出视口；
 *   2. .nav-actions 固定 flex:0 0 178px，窄屏只剩汉堡时仍占 178px，加剧挤压。
 * 修法：让段落强制占满容器宽度（flex 交叉轴上 fit-content 会按 max-content 计算），
 *       并把 nav-actions 在窄屏改为自适应宽度。
 * ========================================================================== */
@media (width <= 560px) {
  .hero-copy > p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word
  }
  .nav-actions {
    flex: 0 0 auto
  }
  .nav-shell {
    gap: 12px
  }
}


/* ============================================================================
 * trial 弹窗关闭按钮定位（设计稿导出物的 bug）
 * ----------------------------------------------------------------------------
 * .trial-dialog > * { position: relative } 写在 .dialog-close 之后，
 * 同特异性下把 .dialog-close 的 position:absolute 覆盖掉了 ——
 * 结果申请试用弹窗的 × 掉到品牌 logo 左边、压在文字上。
 * 登录弹窗因为 .login-dialog > * 写在 .dialog-close 之前，所以没这个毛病。
 * 这里用更高特异性（0,2,0）把绝对定位钉回来。
 * ========================================================================== */
.site-dialog > .dialog-close {
  position: absolute;
  top: 18px;
  right: 18px
}
/* trial 弹窗放大到 720px 后，× 跟着内边距外移到 24px 并放大到 40px（同理需要 (0,2,0) 特异性，
 * 且必须写在上一条之后才能覆盖 top/right；登录弹窗不受影响） */
.trial-dialog > .dialog-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px
}


/* ============================================================================
 * loop-bar 滚动条（移动端）
 * ----------------------------------------------------------------------------
 * 设计稿在 <=820 给 .loop-bar 设了 overflow-x:auto —— 7 个阶段要横滑，
 * 但默认滚动条是一条粗灰带，压在深色底上非常突兀。这里保留滑动能力、隐藏滚动条。
 * ========================================================================== */
.loop-bar {
  scrollbar-width: none;
  -ms-overflow-style: none
}
.loop-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0
}


/* ============================================================================
 * 深色滚动条（设计稿导出物没有这段）
 * ----------------------------------------------------------------------------
 * Windows 的默认滚动条是浅灰轨道 + 深灰滑块，压在 #0b0f17 的深色页面上非常扎眼。
 * 这里只改外观，不隐藏 —— 官网是长页，滚动条本身是必要的方位提示。
 * ========================================================================== */
html {
  scrollbar-color: #2c3749 #0b0f17;
  scrollbar-width: thin
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px
}
::-webkit-scrollbar-track {
  background: #0b0f17
}
::-webkit-scrollbar-thumb {
  background: #2c3749;
  border: 2px solid #0b0f17;
  border-radius: 6px
}
::-webkit-scrollbar-thumb:hover {
  background: #3a4759
}

/* 右侧面板标题切换时的轻微淡入，避免文字"跳"一下 */
.config-head b.is-switching {
  animation: cfg-title-in .24s ease-out
}
@keyframes cfg-title-in {
  from { opacity: .35; transform: translateY(2px) }
  to { opacity: 1; transform: none }
}