.ai-body {
  --content-width: min(1240px, calc(100vw - 32px));
  background:
    radial-gradient(circle at 50% -8%, rgba(145, 210, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #84cfff 0%, #75c5ff 16%, #242424 38%, #212121 100%);
  color: #f6f7fb;
}

.ai-body::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), transparent 20%);
  opacity: 0.45;
}

.ai-header {
  --header-scrolled-bg: rgba(16, 16, 18, 0.7);
  --header-scrolled-border: rgba(255, 255, 255, 0.08);
}

.ai-actions {
  gap: 18px;
}

.ai-header-button {
  border-radius: 999px;
  padding-inline: 18px;
  background: rgba(17, 17, 19, 0.94);
  color: #f4f6fb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.ai-page {
  overflow: clip;
}

.ai-hero {
  position: relative;
  padding: 132px 0 76px;
  min-height: 100svh;
}

.ai-hero,
.ai-feature-intro,
.ai-feature,
.ai-control,
.ai-more,
.ai-download,
.ai-faq,
.ai-footer {
  padding-inline: max(16px, calc((100vw - 1240px) / 2));
}

.ai-hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ai-orb,
.ai-float-panel {
  position: absolute;
  border-radius: 32px;
  filter: blur(0.2px);
}

.ai-orb {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.68), transparent 24%),
    linear-gradient(135deg, rgba(71, 171, 255, 0.66), rgba(161, 93, 255, 0.3) 48%, rgba(72, 226, 255, 0.2));
  opacity: 0.74;
  mix-blend-mode: screen;
}

.ai-orb--one {
  width: 260px;
  height: 260px;
  top: 176px;
  left: max(8px, calc(50% - 620px));
}

.ai-orb--two {
  width: 210px;
  height: 210px;
  top: 180px;
  right: max(18px, calc(50% - 620px));
}

.ai-orb--three {
  width: 180px;
  height: 180px;
  top: 620px;
  left: max(40px, calc(50% - 520px));
  opacity: 0.58;
}

.ai-float-panel {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(112, 195, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ai-float-panel::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.ai-float-panel--left {
  width: 120px;
  height: 160px;
  top: 244px;
  left: max(0px, calc(50% - 665px));
}

.ai-float-panel--right {
  width: 126px;
  height: 138px;
  top: 230px;
  right: max(0px, calc(50% - 665px));
}

.ai-float-panel--bottom {
  width: 170px;
  height: 128px;
  bottom: -24px;
  right: max(26px, calc(50% - 570px));
}

.ai-hero-copy {
  position: relative;
  z-index: 2;
  width: min(640px, calc(100vw - 40px));
  margin: 0 auto;
  text-align: center;
}

.ai-hero h1,
.ai-feature-intro h2,
.ai-control h2,
.ai-download h2,
.ai-faq h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 4.45rem);
  line-height: 0.97;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.ai-hero p,
.ai-hero-caption,
.ai-control p,
.ai-download p,
.ai-faq-head p {
  margin: 18px auto 0;
  max-width: 660px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(246, 247, 251, 0.88);
  text-wrap: balance;
}

.ai-hero-button,
.ai-control-button,
.ai-download-button {
  margin-top: 20px;
}

.ai-hero-stage {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100vw - 40px));
  margin: 52px auto 0;
  padding: 34px 20px 18px;
}

.ai-stage-backdrop {
  position: absolute;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.45), transparent 18%),
    linear-gradient(135deg, rgba(140, 211, 255, 0.44), rgba(114, 139, 255, 0.16), rgba(201, 105, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.ai-stage-backdrop--left {
  inset: 110px auto 44px 0;
  width: 210px;
}

.ai-stage-backdrop--right {
  inset: 54px 0 94px auto;
  width: 232px;
}

.ai-stage-window {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    0 42px 110px rgba(23, 55, 92, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(26px);
}

.ai-stage-window--shell {
  width: min(760px, calc(100vw - 120px));
  margin: 0 auto;
}

.ai-window-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
}

.ai-window-bar span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.ai-stage-window-inner {
  padding: 20px;
}

.ai-stage-browser {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(18, 32, 52, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: #132035;
  box-shadow: 0 24px 60px rgba(19, 32, 53, 0.18);
}

.ai-browser-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(19, 32, 53, 0.08);
  background: rgba(247, 250, 255, 0.96);
}

.ai-browser-search {
  width: min(430px, 70%);
  height: 30px;
  border-radius: 999px;
  background: rgba(19, 32, 53, 0.07);
}

.ai-browser-actions {
  display: flex;
  gap: 10px;
}

.ai-browser-actions span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(32, 118, 255, 0.24);
}

.ai-browser-body {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  min-height: 380px;
}

.ai-browser-sidebar {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px 14px;
  border-right: 1px solid rgba(19, 32, 53, 0.08);
  background: rgba(245, 248, 252, 0.9);
}

.ai-browser-sidebar span,
.ai-browser-footer-lines span {
  height: 12px;
  border-radius: 999px;
  background: rgba(19, 32, 53, 0.08);
}

.ai-browser-main {
  padding: 18px;
}

.ai-browser-banner {
  height: 150px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(153, 120, 88, 0.26), rgba(78, 53, 34, 0.22)),
    linear-gradient(135deg, #d9cab7, #b08f71);
}

.ai-browser-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ai-browser-grid span {
  aspect-ratio: 1 / 0.88;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(211, 223, 242, 0.95), rgba(163, 184, 219, 0.95));
}

.ai-browser-footer-lines {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.ai-hero-caption {
  margin-top: 30px;
  text-align: center;
  max-width: 620px;
}

.ai-feature-intro {
  padding-top: 86px;
  padding-bottom: 24px;
  text-align: center;
}

.ai-feature-intro h2 {
  max-width: 700px;
  margin-inline: auto;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
}

.ai-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  padding-top: 54px;
  padding-bottom: 54px;
}

.ai-feature--reverse {
  grid-template-columns: minmax(320px, 560px) minmax(0, 1fr);
}

.ai-feature-copy h3,
.ai-more h2 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.ai-feature-copy p,
.ai-more-card p,
.ai-faq-item p {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(246, 247, 251, 0.8);
}

.ai-feature-copy--right,
.ai-feature-copy--left {
  max-width: 420px;
}

.ai-feature-copy--right {
  justify-self: end;
}

.ai-feature-media {
  position: relative;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(calc(1 + var(--parallax-scale, 0)));
  transition: transform 220ms ease;
}

.ai-demo,
.ai-more-card,
.ai-faq-item {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(35, 35, 37, 0.98), rgba(18, 18, 20, 0.98));
  box-shadow:
    0 30px 72px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ai-demo {
  min-height: 360px;
  padding: 24px;
}

.ai-demo--workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 220px;
  gap: 18px;
}

.ai-demo-panel--canvas {
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent),
    linear-gradient(180deg, #ededed, #bfbfbf 42%, #202020 100%);
}

.ai-demo-chat,
.ai-voice-card,
.ai-chat-window {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 12, 0.72);
}

.ai-demo-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 20px;
}

.ai-demo-chip,
.ai-control-floating span,
.ai-flow-step {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(36, 116, 255, 0.26);
  border: 1px solid rgba(110, 173, 255, 0.24);
}

.ai-demo-lines,
.ai-chat-compose {
  display: grid;
  gap: 10px;
}

.ai-demo-lines span,
.ai-chat-compose {
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.ai-demo-lines span:nth-child(2) {
  width: 86%;
}

.ai-demo-lines span:nth-child(3) {
  width: 74%;
}

.ai-demo-lines span:nth-child(4) {
  width: 52%;
}

.ai-demo-bubble,
.ai-chat-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ai-demo-bubble,
.ai-chat-bubble--assistant {
  background: rgba(39, 123, 255, 0.84);
  color: #f8fbff;
}

.ai-demo--voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 24px;
  align-items: center;
}

.ai-voice-card {
  padding: 26px;
}

.ai-waveform {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: end;
  height: 110px;
  margin-bottom: 22px;
}

.ai-waveform span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(90, 156, 255, 0.95), rgba(147, 112, 255, 0.7));
}

.ai-waveform span:nth-child(1) { height: 36px; }
.ai-waveform span:nth-child(2) { height: 82px; }
.ai-waveform span:nth-child(3) { height: 58px; }
.ai-waveform span:nth-child(4) { height: 96px; }
.ai-waveform span:nth-child(5) { height: 50px; }
.ai-waveform span:nth-child(6) { height: 72px; }
.ai-waveform span:nth-child(7) { height: 42px; }

.ai-side-note {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(246, 247, 251, 0.78);
}

.ai-demo--chat {
  display: grid;
  place-items: center;
}

.ai-chat-window {
  width: min(100%, 380px);
  padding: 22px;
}

.ai-chat-bubble--user {
  justify-self: end;
  margin-left: 64px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}

.ai-chat-bubble + .ai-chat-bubble {
  margin-top: 12px;
}

.ai-chat-compose {
  height: 42px;
  margin-top: 18px;
}

.ai-demo--flow {
  display: grid;
  gap: 14px;
  align-content: center;
}

.ai-flow-step:nth-child(2),
.ai-flow-step:nth-child(4) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.ai-control {
  padding-top: 80px;
  padding-bottom: 74px;
  text-align: center;
}

.ai-control-stack {
  max-width: 720px;
  margin: 0 auto;
}

.ai-control-floating {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.ai-more {
  padding-top: 34px;
  padding-bottom: 66px;
  text-align: center;
}

.ai-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.ai-more-card {
  padding: 18px 18px 22px;
  text-align: left;
}

.ai-more-card h3 {
  margin: 18px 0 0;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.ai-more-visual {
  height: 118px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-more-visual--agents {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.12), transparent 42%),
    #030303;
}

.ai-more-visual--systems {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.ai-more-visual--systems span {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.ai-more-visual--spectrum {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(90deg, #4d86ff, #64d8ff, #c57cff, #ffc95e, #8ff790);
}

.ai-download {
  padding-top: 30px;
  padding-bottom: 68px;
}

.ai-download-panel {
  position: relative;
  padding: 92px 24px 112px;
  border-radius: 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.3), transparent 30%),
    linear-gradient(180deg, #80ccff 0%, #70c5ff 52%, #76c7ff 100%);
  overflow: hidden;
}

.ai-download-panel::before,
.ai-download-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 120px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    rgba(145, 172, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.ai-download-panel::before {
  bottom: -14px;
  left: 52px;
}

.ai-download-panel::after {
  top: 32px;
  right: 52px;
}

.ai-download-panel h2,
.ai-download-panel p {
  color: #ffffff;
}

.ai-download-panel p {
  max-width: 470px;
}

.ai-download-button {
  background: rgba(255, 255, 255, 0.96);
  color: #101114;
}

.ai-faq {
  padding-top: 48px;
  padding-bottom: 70px;
}

.ai-faq-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 28px;
}

.ai-faq-list {
  display: grid;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.ai-faq-item {
  padding: 0;
  overflow: hidden;
}

.ai-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ai-faq-item summary::-webkit-details-marker {
  display: none;
}

.ai-faq-item p {
  margin: 0;
  padding: 0 24px 22px;
}

.ai-footer {
  padding-top: 22px;
  background: #1d1d1f;
}

html[data-theme="light"] body.ai-body {
  background:
    radial-gradient(circle at 50% -8%, rgba(145, 210, 255, 0.22), transparent 34%),
    linear-gradient(180deg, #eef7ff 0%, #dbe9ff 18%, #f5f8fc 44%, #edf2f7 100%);
  color: #11131a;
}

html[data-theme="light"] body.ai-body::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 16%),
    linear-gradient(0deg, rgba(17, 24, 39, 0.04), transparent 20%);
  opacity: 0.54;
}

html[data-theme="light"] .ai-header {
  --header-scrolled-bg: rgba(245, 247, 252, 0.86);
  --header-scrolled-border: rgba(17, 24, 39, 0.08);
  color: rgba(17, 19, 26, 0.8);
}

html[data-theme="light"] .ai-nav {
  color: rgba(17, 19, 26, 0.68);
}

html[data-theme="light"] .ai-header-button {
  background: rgba(17, 19, 26, 0.94);
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(17, 24, 39, 0.12);
  box-shadow: 0 16px 40px rgba(88, 110, 149, 0.12);
}

html[data-theme="light"] .ai-hero h1,
html[data-theme="light"] .ai-feature-intro h2,
html[data-theme="light"] .ai-feature-copy h3,
html[data-theme="light"] .ai-control h2,
html[data-theme="light"] .ai-download h2,
html[data-theme="light"] .ai-faq h2,
html[data-theme="light"] .ai-more h2,
html[data-theme="light"] .ai-more-card h3 {
  color: rgba(17, 23, 47, 0.96);
}

html[data-theme="light"] .ai-hero p,
html[data-theme="light"] .ai-hero-caption,
html[data-theme="light"] .ai-control p,
html[data-theme="light"] .ai-download p,
html[data-theme="light"] .ai-faq-head p,
html[data-theme="light"] .ai-feature-copy p,
html[data-theme="light"] .ai-more-card p,
html[data-theme="light"] .ai-faq-item p {
  color: rgba(17, 23, 47, 0.72);
}

html[data-theme="light"] .ai-stage-window {
  border-color: rgba(17, 24, 39, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 249, 253, 0.92)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 42px 110px rgba(88, 110, 149, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

html[data-theme="light"] .ai-demo,
html[data-theme="light"] .ai-more-card,
html[data-theme="light"] .ai-faq-item {
  border-color: rgba(17, 24, 39, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 246, 252, 0.96));
  box-shadow:
    0 30px 72px rgba(88, 110, 149, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

html[data-theme="light"] .ai-demo-chat,
html[data-theme="light"] .ai-voice-card,
html[data-theme="light"] .ai-chat-window {
  border-color: rgba(17, 24, 39, 0.08);
  background: rgba(17, 24, 39, 0.06);
}

html[data-theme="light"] .ai-demo-chip {
  color: rgba(17, 23, 47, 0.94);
  background: rgba(110, 164, 255, 0.2);
  border-color: rgba(110, 164, 255, 0.34);
}

html[data-theme="light"] .ai-demo-bubble,
html[data-theme="light"] .ai-chat-bubble--assistant {
  color: rgba(17, 23, 47, 0.96);
  background: rgba(98, 151, 255, 0.9);
}

html[data-theme="light"] .ai-chat-bubble--user {
  color: rgba(17, 23, 47, 0.88);
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(17, 24, 39, 0.08);
}

html[data-theme="light"] .ai-control-floating span {
  color: rgba(17, 23, 47, 0.94);
  background: rgba(110, 164, 255, 0.2);
  border-color: rgba(110, 164, 255, 0.34);
}

html[data-theme="light"] .ai-flow-step {
  color: rgba(17, 23, 47, 0.94);
  background: rgba(110, 164, 255, 0.2);
  border-color: rgba(110, 164, 255, 0.34);
}

html[data-theme="light"] .ai-flow-step:nth-child(2),
html[data-theme="light"] .ai-flow-step:nth-child(4) {
  color: rgba(17, 23, 47, 0.82);
  background: rgba(17, 24, 39, 0.05);
  border-color: rgba(17, 24, 39, 0.1);
}

html[data-theme="light"] .ai-more-visual {
  border-color: rgba(17, 24, 39, 0.08);
}

@media (max-width: 1024px) {
  .ai-feature,
  .ai-feature--reverse,
  .ai-more-grid {
    grid-template-columns: 1fr;
  }

  .ai-feature-copy,
  .ai-feature-copy--right {
    justify-self: start;
    max-width: 100%;
  }

  .ai-demo--workspace,
  .ai-demo--voice {
    grid-template-columns: 1fr;
  }

  .ai-stage-window--shell {
    width: min(760px, calc(100vw - 56px));
  }
}

@media (max-width: 720px) {
  .ai-header .header-inner {
    gap: 14px;
  }

  .ai-nav {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .ai-hero {
    padding-top: 120px;
  }

  .ai-hero h1,
  .ai-feature-intro h2,
  .ai-control h2,
  .ai-download h2,
  .ai-faq h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .ai-feature-copy h3 {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }

  .ai-stage-window--shell {
    width: min(760px, calc(100vw - 20px));
  }

  .ai-stage-window-inner {
    padding: 12px;
  }

  .ai-browser-body {
    grid-template-columns: 1fr;
  }

  .ai-browser-sidebar {
    display: none;
  }

  .ai-browser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-float-panel--left,
  .ai-float-panel--right,
  .ai-orb--three {
    display: none;
  }

  .ai-download-panel::before,
  .ai-download-panel::after {
    display: none;
  }
}