:root {
  --faiq-violet: #7554f0;
  --faiq-blue: #2673cc;
  --faiq-violet-soft: rgba(117, 84, 240, 0.12);
  --faiq-blue-soft: rgba(38, 115, 204, 0.1);
  --faiq-gradient: linear-gradient(90deg, var(--faiq-violet), var(--faiq-blue));
  --faiq-ink: #101018;
  --faiq-hero-surface: #f6f5fb;
  --faiq-panel: rgba(255, 255, 255, 0.72);
}

:root[data-theme="dark"] {
  --faiq-violet: #a387ff;
  --faiq-blue: #66b3ff;
  --faiq-violet-soft: rgba(163, 135, 255, 0.14);
  --faiq-blue-soft: rgba(102, 179, 255, 0.1);
  --faiq-ink: #f7f5ff;
  --faiq-hero-surface: #0d0d13;
  --faiq-panel: rgba(23, 23, 31, 0.72);
}

.faiq-page {
  background:
    radial-gradient(circle at 76% 6%, var(--faiq-violet-soft), transparent 25rem),
    var(--background);
}

.faiq-page .site-header.scrolled,
.faiq-page .site-header.menu-open {
  border-color: color-mix(in srgb, var(--faiq-violet) 20%, var(--border));
}

.faiq-nav-button {
  border-color: transparent;
  background: var(--faiq-gradient);
  color: #fff;
}

:root[data-theme="dark"] .faiq-nav-button {
  color: #0d0d13;
}

.faiq-main {
  overflow: hidden;
}

.faiq-hero {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 40px), var(--container));
  min-height: min(850px, 100svh);
  margin: 0 auto;
  padding: calc(var(--header-height) + 86px) 0 72px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(400px, 0.9fr);
  align-items: center;
  gap: clamp(44px, 7vw, 100px);
}

.faiq-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.faiq-glow-one {
  width: 420px;
  height: 420px;
  inset: 5% auto auto -250px;
  background: radial-gradient(circle, var(--faiq-violet-soft), transparent 69%);
}

.faiq-glow-two {
  width: 520px;
  height: 520px;
  inset: auto -260px 0 auto;
  background: radial-gradient(circle, var(--faiq-blue-soft), transparent 70%);
}

.faiq-kicker {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.faiq-kicker span {
  width: 28px;
  height: 2px;
  display: inline-block;
  border-radius: 99px;
  background: var(--faiq-gradient);
}

.faiq-hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(58px, 7.5vw, 102px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.faiq-hero h1 span {
  background: var(--faiq-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faiq-lead {
  max-width: 640px;
  margin: 28px 0 0;
  color: var(--text-secondary);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.85;
}

.faiq-hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faiq-primary-button {
  min-height: 52px;
  border-color: transparent;
  background: var(--faiq-gradient);
  color: #fff;
  box-shadow: 0 14px 30px rgba(75, 77, 213, 0.2);
}

:root[data-theme="dark"] .faiq-primary-button {
  color: #0d0d13;
  box-shadow: 0 16px 38px rgba(105, 114, 247, 0.18);
}

.faiq-secondary-button {
  min-height: 52px;
  border-color: color-mix(in srgb, var(--faiq-violet) 28%, var(--border));
  background: var(--faiq-panel);
  color: var(--text);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.faiq-availability {
  margin: 15px 3px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.faiq-orbit-stage {
  min-height: 560px;
  display: grid;
  place-items: center;
}

.faiq-orbit-shell {
  position: relative;
  width: min(100%, 530px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.faiq-orbit-shell::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--faiq-violet-soft) 0, transparent 66%);
  filter: blur(10px);
}

.orbit-line {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--faiq-violet) 28%, transparent);
  border-radius: 50%;
}

.orbit-line-one {
  inset: 8%;
}

.orbit-line-two {
  inset: 20%;
  border-color: color-mix(in srgb, var(--faiq-blue) 24%, transparent);
}

.orbit-node {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 2px solid var(--background);
  border-radius: 50%;
  background: var(--faiq-gradient);
  box-shadow: 0 0 0 6px var(--faiq-violet-soft);
}

.orbit-node-one { inset: 13% auto auto 18%; }
.orbit-node-two { inset: auto 9% 27% auto; }
.orbit-node-three { inset: auto auto 8% 42%; }

.faiq-core {
  position: relative;
  z-index: 3;
  width: 230px;
  height: 230px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--faiq-violet) 35%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--faiq-panel) 94%, transparent);
  text-align: center;
  box-shadow: 0 32px 90px var(--faiq-violet-soft), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.faiq-core::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  padding: 2px;
  border-radius: inherit;
  background: var(--faiq-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.faiq-core-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.faiq-core strong {
  margin-top: 4px;
  background: var(--faiq-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 54px;
  line-height: 1.25;
}

.faiq-core p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.faiq-orbit-note {
  position: absolute;
  z-index: 4;
  min-height: 42px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--faiq-violet) 22%, var(--border));
  border-radius: 99px;
  background: var(--faiq-panel);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.faiq-orbit-note i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faiq-gradient);
}

.note-one { inset: 10% 4% auto auto; }
.note-two { inset: 47% auto auto -1%; }
.note-three { inset: auto 10% 9% auto; }

.faiq-proof {
  width: min(calc(100% - 40px), var(--container));
  min-height: 80px;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 50px);
  border-block: 1px solid color-mix(in srgb, var(--faiq-violet) 20%, var(--border));
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.faiq-proof p {
  margin: 0;
}

.faiq-proof span {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--faiq-gradient);
}

.faiq-difference {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
  padding: 132px 0;
}

.faiq-section-heading {
  max-width: 750px;
}

.faiq-section-heading h2,
.faiq-flow-copy h2,
.faiq-use-copy h2,
.faiq-final-cta h2 {
  margin: 0;
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 1.17;
  letter-spacing: -0.025em;
}

.faiq-section-heading > p:last-child {
  max-width: 670px;
  margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: 18px;
}

.faiq-feature-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.faiq-feature-card {
  position: relative;
  min-height: 345px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--faiq-violet) 15%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(150deg, var(--faiq-violet-soft), transparent 48%),
    var(--surface-raised);
}

.feature-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--faiq-violet) 25%, var(--border));
  border-radius: 14px;
  background: var(--faiq-panel);
  color: var(--faiq-violet);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.faiq-feature-card > span {
  position: absolute;
  inset: 35px auto auto 32px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.faiq-feature-card h3 {
  margin: auto 0 12px;
  font-size: 24px;
}

.faiq-feature-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.8;
}

.faiq-flow {
  padding: 112px max(20px, calc((100vw - var(--container)) / 2));
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
  border-block: 1px solid color-mix(in srgb, var(--faiq-violet) 18%, var(--border));
  background:
    radial-gradient(circle at 16% 20%, var(--faiq-violet-soft), transparent 24rem),
    var(--faiq-hero-surface);
}

.faiq-flow-copy h2 {
  font-size: clamp(38px, 4.7vw, 62px);
}

.faiq-flow-lead {
  max-width: 580px;
  margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.9;
}

.faiq-agent-principles {
  margin-top: 38px;
  display: grid;
  gap: 6px;
}

.faiq-agent-principles article {
  padding: 18px 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--faiq-violet) 18%, var(--border));
}

.faiq-agent-principles article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--faiq-violet) 30%, var(--border));
  border-radius: 50%;
  color: var(--faiq-violet);
  font-size: 12px;
  font-weight: 700;
}

.faiq-agent-principles strong {
  display: block;
  font-size: 18px;
}

.faiq-agent-principles p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.faiq-flow-footnote {
  margin: 28px 0 0;
  padding: 16px 18px;
  border-inline-start: 2px solid var(--faiq-blue);
  background: var(--faiq-blue-soft);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.8;
}

.faiq-review-demo {
  position: relative;
  min-height: 680px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(163, 135, 255, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 2%, rgba(117, 84, 240, 0.2), transparent 17rem),
    radial-gradient(circle at 7% 96%, rgba(38, 115, 204, 0.14), transparent 18rem),
    #101014;
  color: #f5f3fa;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.22);
}

.review-demo-label {
  width: fit-content;
  min-height: 32px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(163, 135, 255, 0.22);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.035);
  color: #aaa5b3;
  font-size: 11px;
  font-weight: 600;
}

.review-demo-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #a387ff, #66b3ff);
  box-shadow: 0 0 0 4px rgba(163, 135, 255, 0.1);
}

.review-demo-header {
  margin-top: 30px;
}

.review-demo-header h3 {
  margin: 0;
  background: linear-gradient(90deg, #a387ff, #66b3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(30px, 3.5vw, 42px);
}

.review-demo-header p {
  max-width: 570px;
  margin: 8px 0 0;
  color: #b5b0bd;
  font-size: 14px;
  line-height: 1.8;
}

.review-demo-question {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(163, 135, 255, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.review-demo-question span {
  display: block;
  color: #8e87a0;
  font-size: 10px;
  font-weight: 600;
}

.review-demo-question p {
  margin: 5px 0 0;
  color: #eeebf2;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
}

.review-demo-status {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8d4df;
  font-size: 13px;
}

.review-demo-status > span,
.review-demo-result > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #a387ff, #66b3ff);
  color: #0d0d13;
}

.review-demo-status svg,
.review-demo-result svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.review-timeline {
  position: relative;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  list-style: none;
}

.review-timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 25px 21px 25px auto;
  width: 1px;
  background: linear-gradient(#a387ff, rgba(102, 179, 255, 0.18));
}

.review-timeline li {
  position: relative;
  z-index: 1;
  min-height: 88px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
}

.review-timeline li > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #414047;
  border-radius: 50%;
  background: #1b1b20;
  color: #c5c0cc;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 6px #101014;
}

.review-timeline strong {
  display: block;
  color: #f5f3fa;
  font-size: 15px;
}

.review-timeline small {
  display: block;
  margin-bottom: 1px;
  color: #85808d;
  font-size: 9px;
  font-weight: 600;
}

.review-timeline p {
  margin: 3px 0 0;
  color: #a9a4b1;
  font-size: 13px;
  line-height: 1.65;
}

.review-demo-result {
  margin-top: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(163, 135, 255, 0.52);
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(117, 84, 240, 0.16), rgba(102, 179, 255, 0.1));
}

.review-demo-result strong {
  display: block;
  font-size: 14px;
}

.review-demo-result p {
  margin: 2px 0 0;
  color: #c0bbc7;
  font-size: 12px;
  line-height: 1.7;
}

.review-demo-result > a {
  padding: 7px 11px;
  border-radius: 99px;
  background: linear-gradient(90deg, #a387ff, #66b3ff);
  color: #0d0d13;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: transform 150ms ease, filter 150ms ease;
}

.review-demo-result > a:hover,
.review-demo-result > a:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.review-demo-note {
  margin: 12px 0 0;
  color: #77727f;
  font-size: 10px;
  text-align: center;
}

.faiq-use-cases {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
  padding: 120px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.8fr);
  align-items: center;
  gap: 60px;
}

.faiq-use-copy h2 {
  font-size: clamp(38px, 4.8vw, 64px);
}

.faiq-chips {
  display: grid;
  gap: 10px;
}

.faiq-chips span {
  min-height: 66px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--faiq-blue) 18%, var(--border));
  border-radius: 13px;
  background: var(--surface-raised);
  font-weight: 600;
}

.faiq-chips svg {
  color: var(--faiq-blue);
}

.faiq-usage-note {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 18px 20px;
  border-inline-start: 3px solid var(--faiq-violet);
  background: var(--faiq-violet-soft);
  color: var(--text-secondary);
  font-size: 14px;
}

.faiq-final-cta {
  min-height: 560px;
  padding: 82px max(20px, calc((100vw - var(--container)) / 2));
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
  border-block: 1px solid color-mix(in srgb, var(--faiq-violet) 24%, var(--border));
  background:
    radial-gradient(circle at 82% 38%, var(--faiq-violet-soft), transparent 30rem),
    radial-gradient(circle at 14% 75%, var(--faiq-blue-soft), transparent 26rem),
    var(--faiq-hero-surface);
}

.faiq-final-mark {
  width: 108px;
  height: 108px;
  padding: 3px;
  border-radius: 50%;
  background: var(--faiq-gradient);
}

.faiq-final-mark span {
  width: 100%;
  height: 100%;
  display: block;
  border: 14px solid var(--faiq-hero-surface);
  border-radius: inherit;
  background: var(--faiq-gradient);
}

.faiq-final-cta h2 {
  font-size: clamp(44px, 5.5vw, 72px);
}

.faiq-final-cta p:not(.faiq-kicker) {
  margin: 18px 0 0;
  color: var(--text-secondary);
}

.faiq-footer {
  padding-top: 50px;
}

@media (max-width: 1020px) {
  .faiq-hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 84px);
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faiq-hero-copy {
    max-width: 760px;
  }

  .faiq-orbit-stage {
    min-height: 520px;
  }

  .faiq-orbit-shell {
    width: min(100%, 520px);
  }

  .faiq-feature-grid {
    grid-template-columns: 1fr;
  }

  .faiq-feature-card {
    min-height: 260px;
  }

  .faiq-flow,
  .faiq-use-cases,
  .faiq-final-cta {
    grid-template-columns: 1fr;
  }

  .faiq-flow {
    gap: 54px;
  }

  .faiq-use-cases {
    gap: 42px;
  }

  .faiq-final-cta {
    min-height: 610px;
    gap: 32px;
    justify-items: start;
  }

  .faiq-final-mark {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 720px) {
  .faiq-hero {
    width: calc(100% - 32px);
    padding-top: calc(var(--header-height) + 56px);
    padding-bottom: 48px;
  }

  .faiq-hero h1 {
    font-size: clamp(48px, 16vw, 72px);
    line-height: 1.1;
  }

  .faiq-lead {
    margin-top: 22px;
    font-size: 17px;
  }

  .faiq-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .faiq-hero-actions .button {
    padding-inline: 12px;
  }

  .faiq-orbit-stage {
    min-height: 430px;
  }

  .faiq-orbit-shell {
    width: min(100%, 410px);
  }

  .faiq-core {
    width: 184px;
    height: 184px;
    padding: 22px;
  }

  .faiq-core strong {
    font-size: 43px;
  }

  .faiq-core p {
    font-size: 12px;
  }

  .faiq-orbit-note {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .note-one { inset: 7% 1% auto auto; }
  .note-two { inset: 48% auto auto 0; }
  .note-three { inset: auto 4% 7% auto; }

  .faiq-proof {
    width: calc(100% - 32px);
    padding-inline: 0;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
  }

  .faiq-difference {
    width: calc(100% - 32px);
    padding: 92px 0;
  }

  .faiq-section-heading h2,
  .faiq-flow-copy h2,
  .faiq-use-copy h2,
  .faiq-final-cta h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .faiq-section-heading > p:last-child {
    font-size: 16px;
  }

  .faiq-feature-grid {
    margin-top: 42px;
  }

  .faiq-feature-card {
    min-height: 278px;
    padding: 25px;
  }

  .faiq-feature-card > span {
    inset: 29px auto auto 25px;
  }

  .faiq-flow {
    padding-block: 86px;
  }

  .faiq-review-demo {
    min-height: auto;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .review-demo-header {
    margin-top: 24px;
  }

  .review-demo-header h3 {
    font-size: 31px;
  }

  .review-demo-header p {
    font-size: 13px;
  }

  .review-demo-question {
    padding: 14px;
  }

  .review-demo-question p {
    font-size: 13px;
  }

  .review-timeline li {
    min-height: 116px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .review-timeline::before {
    inset-inline-start: 19px;
    inset-inline-end: auto;
  }

  .review-timeline li > span {
    width: 40px;
    height: 40px;
  }

  .review-demo-result {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .review-demo-result > a {
    grid-column: 1 / -1;
    width: 100%;
    padding-block: 9px;
    text-align: center;
  }

  .faiq-use-cases {
    width: calc(100% - 32px);
    padding: 92px 0;
  }

  .faiq-chips span {
    min-height: 60px;
  }

  .faiq-final-cta {
    min-height: 560px;
    padding-block: 72px;
  }
}

@media (max-width: 420px) {
  .faiq-hero-actions {
    grid-template-columns: 1fr;
  }

  .faiq-orbit-stage {
    min-height: 390px;
  }

  .faiq-orbit-note {
    font-size: 9px;
  }

  .faiq-core {
    width: 166px;
    height: 166px;
  }

  .faiq-core strong {
    font-size: 39px;
  }

  .faiq-proof p:nth-of-type(2) {
    max-width: 105px;
  }
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .orbit-line,
  .faiq-feature-card,
  .faiq-chips span,
  .faiq-agent-principles article {
    border-color: var(--border);
  }
}