:root {
  --bg:#07080b;
  --bg-soft:#0d0f14;
  --panel:#12151c;
  --panel-2:#171a22;
  --ink:#f7f8fb;
  --muted:#a3a9b6;
  --line:#292e39;
  --blue:#0e84ff;
  --violet:#8b5cf6;
  --pink:#ed5ca7;
  --green:#50d890;
  --shell:1180px;
  --radius:6px;
}

* { box-sizing:border-box; letter-spacing:0 }
html { scroll-behavior:smooth }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
button,summary { font:inherit }
.shell { width:min(var(--shell),calc(100% - 48px)); margin-inline:auto }

.site-header {
  height:72px;
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  background:rgba(7,8,11,.9);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.header-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px }
.brand { display:inline-flex; align-items:center; gap:10px; width:max-content; font-size:18px; font-weight:800; white-space:nowrap }
.brand img { width:38px; height:38px; border-radius:5px; object-fit:cover }
.brand b { color:var(--blue) }
.desktop-nav { display:flex; align-items:center; gap:30px; color:#c0c4cd; font-size:13px }
.desktop-nav a { padding:8px 0; border-bottom:1px solid transparent }
.desktop-nav a:hover { color:#fff; border-color:var(--blue) }
.header-download {
  justify-self:end;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 15px;
  background:var(--blue);
  color:#fff;
  border-radius:4px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 30px rgba(14,132,255,.22);
}

.hero {
  min-height:calc(100svh - 118px);
  max-height:820px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:#08090c;
}
.hero-wall { position:absolute; inset:0; z-index:-3; overflow:hidden }
.shot { position:absolute; margin:0; width:280px; height:498px; overflow:hidden; border:1px solid rgba(255,255,255,.17); background:#121318; box-shadow:0 30px 80px rgba(0,0,0,.65) }
.shot img { width:100%; height:100%; object-fit:cover }
.shot-one { right:5%; top:6%; transform:rotate(2deg); z-index:4 }
.shot-two { right:26%; top:27%; transform:rotate(-5deg); z-index:3 }
.shot-three { right:43%; top:-18%; transform:rotate(5deg); z-index:2 }
.shot-four { right:-9%; top:35%; transform:rotate(-4deg); z-index:1 }
.hero-overlay {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#07080b 0%,rgba(7,8,11,.97) 31%,rgba(7,8,11,.62) 58%,rgba(7,8,11,.16) 100%),linear-gradient(0deg,#07080b 0%,transparent 30%,rgba(7,8,11,.24) 100%);
}
.hero-content { position:relative; z-index:2; padding:64px 0 82px }
.eyebrow,.section-index { margin:0 0 18px; color:#9aa3b2; font-size:11px; font-weight:800; text-transform:uppercase }
.eyebrow { display:flex; align-items:center; gap:9px }
.eyebrow span { width:30px; height:2px; background:var(--blue) }
.hero h1 { margin:0; font-size:84px; line-height:1; font-weight:900 }
.hero-line { margin:14px 0 0; font-size:30px; line-height:1.35; font-weight:750 }
.hero-copy { max-width:590px; margin:20px 0 0; color:#bdc3ce; font-size:16px }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:28px }
.primary-action {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 19px;
  background:var(--blue);
  border-radius:4px;
  font-size:14px;
  font-weight:800;
  box-shadow:0 14px 36px rgba(14,132,255,.25);
}
.primary-action:hover,.header-download:hover { background:#3196ff }
.text-action { color:#d4d8e0; font-size:13px; border-bottom:1px solid #6f7580 }
.hero-stats { display:flex; gap:0; margin:36px 0 0 }
.hero-stats div { min-width:126px; padding:0 24px; border-left:1px solid var(--line) }
.hero-stats div:first-child { padding-left:0; border-left:0 }
.hero-stats dt { color:#fff; font-size:23px; font-weight:850; line-height:1.2 }
.hero-stats dd { margin:4px 0 0; color:#858c98; font-size:11px }
.hero-edge {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:24px;
  padding:0 18px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(7,8,11,.7);
  color:#737b89;
  font-size:10px;
  white-space:nowrap;
}

.intro-band { padding:98px 0; background:#fff; color:#0a0b0e }
.intro-grid { display:grid; grid-template-columns:150px minmax(0,1.2fr) minmax(280px,.7fr); gap:48px; align-items:start }
.intro-band .section-index { color:#59606b }
.intro-band h2,.persona h2,.dialogue h2,.community-copy h2,.voices h2,.questions h2 { margin:0; font-size:45px; line-height:1.22; font-weight:850 }
.intro-band>div>p:last-child { margin:10px 0 0; color:#535a65; font-size:15px }

.discover { padding:120px 0 132px; background:var(--bg) }
.discover-grid { display:grid; grid-template-columns:minmax(360px,.85fr) minmax(0,1fr); gap:110px; align-items:center }
.discover-screen { width:360px; height:637px; position:relative; justify-self:center }
.discover-screen:before { content:""; position:absolute; inset:-15px; border:1px solid #2b3341; transform:translate(22px,22px); z-index:0 }
.discover-screen:after { content:""; position:absolute; left:-36px; top:82px; width:5px; height:160px; background:linear-gradient(var(--blue),var(--violet)); z-index:3 }
.discover-screen>img { position:relative; z-index:2; width:100%; height:100%; object-fit:cover; border:1px solid #3a414e; box-shadow:0 34px 90px rgba(0,0,0,.7) }
.screen-note { position:absolute; z-index:4; display:flex; align-items:center; gap:7px; padding:8px 11px; background:#f7f8fb; color:#111319; border-radius:3px; font-size:11px; font-weight:800; box-shadow:0 12px 36px rgba(0,0,0,.4) }
.screen-note i { color:var(--blue) }
.note-top { right:-72px; top:112px }
.note-bottom { left:-70px; bottom:96px }
.discover-content h2 { margin:0; font-size:56px; line-height:1.15 }
.lead { max-width:590px; margin:22px 0 0; color:var(--muted); font-size:16px }
.feature-lines { margin:38px 0 0; padding:0; list-style:none; border-top:1px solid var(--line) }
.feature-lines li { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line) }
.feature-lines li>span { color:var(--blue); font-size:11px; font-weight:800 }
.feature-lines h3 { margin:0; font-size:16px }
.feature-lines p { margin:5px 0 0; color:#9299a6; font-size:13px }

.persona { padding:120px 0 0; overflow:hidden; background:#0d0f14; border-block:1px solid var(--line) }
.persona-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.58fr); gap:80px; align-items:end }
.persona-head>p { margin:0 0 8px; color:var(--muted); font-size:15px }
.persona-stage { min-height:700px; position:relative; margin-top:62px }
.persona-stage figure { margin:0; position:absolute; overflow:hidden; background:#111318; border:1px solid #323743; box-shadow:0 30px 70px rgba(0,0,0,.55) }
.persona-stage img { width:100%; height:100%; object-fit:cover }
.persona-primary { left:12%; top:0; width:360px; height:641px; z-index:3 }
.persona-secondary { right:8%; top:74px; width:300px; height:534px; z-index:2; transform:rotate(3deg) }
.persona-stage figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; padding:64px 18px 16px; background:linear-gradient(transparent,rgba(0,0,0,.93)); font-size:12px; font-weight:800 }
.persona-stage figcaption small { color:#aeb4be; font-size:10px; font-weight:500 }
.persona-words { position:absolute; left:43%; top:80px; z-index:1; display:grid; gap:5px; color:#202530; font-size:64px; line-height:1; font-weight:900 }
.persona-words span:nth-child(2) { color:#243246 }
.persona-words span:nth-child(3) { color:#2b2442 }
.persona-words span:nth-child(4) { color:#29212a }

.dialogue { padding:126px 0; background:#f5f6f8; color:#0c0d11 }
.dialogue-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(480px,1fr); gap:96px; align-items:center }
.dialogue-copy>p:not(.section-index) { margin:22px 0 0; color:#575e68 }
.dialogue-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px }
.dialogue-tags span { padding:6px 9px; border:1px solid #cfd3da; border-radius:3px; color:#444a54; font-size:11px }
.chat-window { min-height:570px; display:flex; flex-direction:column; background:#0c0e13; color:#fff; border:1px solid #242a35; border-radius:6px; box-shadow:0 32px 80px rgba(20,28,41,.22); overflow:hidden }
.chat-bar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid #282d37; background:#11141a }
.chat-bar>div { display:flex; align-items:center; gap:11px }
.chat-bar img { width:40px; height:40px; border-radius:4px }
.chat-bar span { display:grid }
.chat-bar b { font-size:13px }
.chat-bar small { color:#8b93a0; font-size:10px }
.chat-bar small i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--green) }
.messages { flex:1; display:flex; flex-direction:column; gap:13px; padding:30px 24px }
.message { max-width:78%; margin:0; padding:12px 14px; border-radius:5px; font-size:13px; line-height:1.65 }
.message.bot { align-self:flex-start; background:#1a1e26; border:1px solid #292f3a }
.message.user { align-self:flex-end; background:#0e84ff }
.typing { width:56px; display:flex; gap:4px; padding:13px 14px; background:#1a1e26; border:1px solid #292f3a; border-radius:5px }
.typing i { width:5px; height:5px; border-radius:50%; background:#8f96a2 }
.chat-input { height:56px; margin:0 20px 20px; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 15px; border:1px solid #303641; border-radius:5px; color:#747b88; font-size:12px }
.chat-input i { width:38px; height:38px; display:grid; place-items:center; background:var(--blue); color:#fff; border-radius:4px; font-size:18px }

.community-view { padding:126px 0; background:#0b0d11 }
.community-grid { display:grid; grid-template-columns:minmax(320px,.7fr) minmax(0,1fr); gap:116px; align-items:center }
.community-grid figure { width:360px; height:641px; margin:0; justify-self:end; position:relative }
.community-grid figure:after { content:"400+ COMMUNITY BOTS"; position:absolute; left:-34px; bottom:40px; padding:9px 12px; background:var(--violet); color:#fff; font-size:10px; font-weight:850 }
.community-grid figure img { width:100%; height:100%; object-fit:cover; border:1px solid #333945 }
.community-copy>p:not(.section-index) { color:var(--muted); max-width:580px }
.community-copy ul { margin:34px 0 0; padding:0; list-style:none; display:grid; gap:0 }
.community-copy li { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--line); color:#969da9; font-size:13px }
.community-copy li:last-child { border-bottom:1px solid var(--line) }
.community-copy li>i { color:var(--blue); font-size:24px }
.community-copy li span { display:grid }
.community-copy li b { color:#f3f5f8; font-size:14px }

.voices { padding:118px 0; background:#101218; border-block:1px solid var(--line) }
.voices-head { display:flex; align-items:end; justify-content:space-between; gap:30px }
.voices-head .section-index { margin:0 }
.voice-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.voice-list article { min-height:300px; display:flex; flex-direction:column; padding:28px; border-right:1px solid var(--line) }
.voice-list article:last-child { border-right:0 }
.stars { color:var(--pink); font-size:12px }
.voice-list blockquote { margin:24px 0 34px; color:#e1e4ea; font-size:15px; line-height:1.9 }
.voice-list footer { margin-top:auto; display:flex; justify-content:space-between; gap:16px; color:#777f8d; font-size:10px }

.questions { padding:126px 0; background:#f5f6f8; color:#111318 }
.questions-grid { display:grid; grid-template-columns:minmax(320px,.7fr) minmax(0,1fr); gap:110px; align-items:start }
.questions-title { position:sticky; top:110px }
.question-list { border-top:1px solid #cfd3da }
.question-list details { border-bottom:1px solid #cfd3da }
.question-list summary { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; list-style:none; font-size:15px; font-weight:750 }
.question-list summary::-webkit-details-marker { display:none }
.question-list summary i { flex:0 0 28px; height:28px; display:grid; place-items:center; border:1px solid #c6cad2; border-radius:50%; transition:transform .2s ease }
.question-list details[open] summary i { transform:rotate(45deg); color:var(--blue) }
.question-list details p { margin:-4px 52px 22px 0; color:#5a616c; font-size:13px }

.final-cta { padding:116px 0; background:#07080b; text-align:center }
.final-inner { display:flex; flex-direction:column; align-items:center }
.final-inner>img { width:68px; height:68px; border-radius:6px; box-shadow:0 16px 46px rgba(14,132,255,.24) }
.final-inner>p { margin:25px 0 10px; color:#777f8c; font-size:10px; font-weight:800 }
.final-inner h2 { margin:0; font-size:42px; line-height:1.3 }
.final-inner>a { min-height:48px; margin-top:28px; display:inline-flex; align-items:center; gap:9px; padding:10px 20px; background:var(--blue); border-radius:4px; font-size:14px; font-weight:800 }

.site-footer { padding:58px 0 24px; background:#0c0e12; border-top:1px solid var(--line) }
.footer-main { display:grid; grid-template-columns:1fr auto; gap:60px; padding-bottom:38px }
.footer-main>div>p { max-width:430px; margin:16px 0 0; color:#7f8793; font-size:12px }
.footer-main nav { display:grid; grid-template-columns:repeat(2,auto); gap:8px 34px; align-content:start; color:#adb3bd; font-size:12px }
.footer-main nav a:hover { color:var(--blue) }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid var(--line); color:#626a77; font-size:10px }

@media (max-width:960px) {
  .header-inner { grid-template-columns:1fr auto }
  .desktop-nav { display:none }
  .hero h1 { font-size:66px }
  .hero-line { font-size:26px }
  .shot { width:230px; height:410px }
  .shot-one { right:2% }
  .shot-two { right:23%; top:38% }
  .shot-three { display:none }
  .shot-four { right:-15% }
  .intro-grid { grid-template-columns:110px 1fr; gap:32px }
  .intro-grid>p:last-child { grid-column:2 }
  .discover-grid,.community-grid { gap:64px }
  .persona-primary { left:4% }
  .persona-secondary { right:1% }
  .persona-words { left:38%; font-size:50px }
  .dialogue-grid { grid-template-columns:1fr 1.1fr; gap:54px }
  .questions-grid { gap:64px }
}

@media (max-width:700px) {
  .shell { width:min(100% - 28px,var(--shell)) }
  .site-header { height:66px }
  .brand { font-size:16px }
  .brand img { width:36px; height:36px }
  .header-download { min-height:38px; padding:7px 11px; font-size:12px }
  .hero { min-height:calc(100svh - 112px); max-height:none; align-items:flex-end }
  .hero-wall { opacity:.78 }
  .shot { border-color:rgba(255,255,255,.13); box-shadow:none }
  .shot-one { width:240px; height:426px; right:-16px; top:2%; transform:rotate(2deg) }
  .shot-two { width:190px; height:338px; right:38%; top:14%; transform:rotate(-6deg) }
  .shot-three,.shot-four { display:none }
  .hero-overlay { background:linear-gradient(0deg,#07080b 0%,rgba(7,8,11,.98) 42%,rgba(7,8,11,.36) 75%,rgba(7,8,11,.2) 100%) }
  .hero-content { padding:320px 0 72px }
  .eyebrow { margin-bottom:12px; font-size:9px }
  .hero h1 { font-size:48px }
  .hero-line { margin-top:8px; font-size:23px }
  .hero-copy { margin-top:14px; font-size:13px; line-height:1.75 }
  .hero-actions { margin-top:20px; gap:16px }
  .primary-action { min-height:44px; padding:9px 14px; font-size:12px }
  .text-action { font-size:11px }
  .hero-stats { margin-top:25px }
  .hero-stats div { min-width:0; flex:1; padding:0 11px }
  .hero-stats dt { font-size:18px }
  .hero-stats dd { font-size:8px }
  .hero-edge { height:40px; justify-content:flex-start }
  .intro-band { padding:72px 0 }
  .intro-grid { grid-template-columns:1fr; gap:14px }
  .intro-grid>p:last-child { grid-column:auto }
  .intro-band h2,.persona h2,.dialogue h2,.community-copy h2,.voices h2,.questions h2 { font-size:30px }
  .intro-band>div>p:last-child { font-size:13px }
  .discover { padding:84px 0 92px }
  .discover-grid { grid-template-columns:1fr; gap:72px }
  .discover-screen { width:280px; height:495px }
  .discover-screen:after { left:-20px }
  .screen-note { font-size:9px }
  .note-top { right:-26px }
  .note-bottom { left:-25px }
  .discover-content h2 { font-size:38px }
  .lead { font-size:13px }
  .feature-lines li { grid-template-columns:36px 1fr }
  .persona { padding:84px 0 0 }
  .persona-head { grid-template-columns:1fr; gap:18px }
  .persona-head>p { font-size:13px }
  .persona-stage { min-height:580px; margin-top:48px }
  .persona-primary { left:0; width:250px; height:445px }
  .persona-secondary { right:-28px; top:112px; width:210px; height:374px }
  .persona-words { left:17%; top:395px; font-size:35px }
  .persona-stage figcaption { padding:50px 12px 11px; font-size:10px }
  .dialogue { padding:84px 0 }
  .dialogue-grid { grid-template-columns:1fr; gap:44px }
  .dialogue-copy>p:not(.section-index) { font-size:13px }
  .chat-window { min-height:520px }
  .messages { padding:24px 16px }
  .message { max-width:87%; font-size:12px }
  .community-view { padding:88px 0 }
  .community-grid { grid-template-columns:1fr; gap:64px }
  .community-grid figure { width:280px; height:499px; justify-self:center }
  .community-grid figure:after { left:-18px }
  .community-copy>p:not(.section-index) { font-size:13px }
  .voices { padding:84px 0 }
  .voices-head { display:block }
  .voices-head h2 { margin-top:12px }
  .voice-list { grid-template-columns:1fr; margin-top:32px }
  .voice-list article { min-height:240px; padding:24px 4px; border-right:0; border-bottom:1px solid var(--line) }
  .voice-list article:last-child { border-bottom:0 }
  .questions { padding:84px 0 }
  .questions-grid { grid-template-columns:1fr; gap:44px }
  .questions-title { position:static }
  .question-list summary { min-height:72px; font-size:13px }
  .question-list details p { margin-right:0; font-size:12px }
  .final-cta { padding:84px 0 }
  .final-inner h2 { font-size:30px }
  .footer-main { grid-template-columns:1fr; gap:34px }
  .footer-main nav { grid-template-columns:repeat(2,1fr) }
  .footer-bottom { flex-direction:column; gap:6px }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
}