/* Consultance AI startup assistant. Scoped to .ai so the rest of the site stays unchanged. */

.ai {
  --ai-ink: #171b2e;
  --ai-muted: #687087;
  --ai-line: #e8e7f3;
  --ai-bg: #f8f7fc;
  --ai-purple: #6230f0;
  --ai-purple-2: #5425e8;
  --ai-soft: #f3efff;
  --ai-radius: 16px;
  --ai-shadow: 0 10px 30px rgba(40, 24, 90, 0.06);
  color: var(--ai-ink);
  background: var(--ai-bg);
  font-family: "Plus Jakarta Sans", var(--font-sans, sans-serif);
}
.ai a { color: inherit; }
.ai svg.lucide { width: 18px; height: 18px; }
.ai :focus-visible {
  outline: 2px solid var(--ai-purple);
  outline-offset: 2px;
}

.ai-wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.ai-page { padding: 28px 0 72px; }

.ai-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ai-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.ai-kicker svg { width: 16px; height: 16px; }

.ai h1 { margin: 10px 0 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.025em; }
.ai-lede { max-width: 560px; margin: 12px auto 0; color: var(--ai-muted); font-size: 16px; }

#homepage { background: #fff; }

.ai-composer {
  margin: 26px auto 0; max-width: 760px; text-align: left;
  background: #fff; border: 1.5px solid #ddd6ff; border-radius: 18px;
  box-shadow: 0 12px 36px rgba(84, 37, 232, 0.08);
}
.ai-composer:focus-within { border-color: var(--ai-purple); box-shadow: 0 0 0 4px rgba(98, 48, 240, 0.12); }
.ai-composer textarea {
  width: 100%; border: 0; resize: vertical; min-height: 84px; max-height: 220px;
  padding: 16px 18px 8px; background: transparent; color: var(--ai-ink);
}
.ai-composer textarea::placeholder { color: #9aa1b5; }
.ai-composer__bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px 12px; flex-wrap: wrap;
}
.ai-tool {
  border: 0; background: transparent; color: var(--ai-muted); font-weight: 650;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px; border-radius: 10px; cursor: pointer;
}
.ai-tool svg { width: 18px; height: 18px; }
.ai-tool:hover { background: var(--ai-soft); color: var(--ai-ink); }
.ai-count { margin-left: auto; color: #8b90a5; font-size: 13px; font-weight: 650; }
.ai-btn {
  border: 0; cursor: pointer; border-radius: 12px; padding: 10px 16px;
  background: linear-gradient(180deg, #6d3df5, #5425e8); color: #fff;
  font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 180ms ease, filter 180ms ease;
}
.ai-btn:hover { filter: brightness(1.05); }
.ai-btn:active { transform: translateY(1px); }
.ai-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-btn svg { width: 18px; height: 18px; }
.ai-btn--ghost {
  background: #fff; color: var(--ai-ink); border: 1px solid var(--ai-line);
}
.ai-btn--ghost:hover { border-color: #cfc6f5; }
.ai-error { color: #9f1239; font-size: 13px; margin: 8px 18px 0; }

.ai-chips, .ai-trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ai-chip, .ai-trust span {
  border: 1px solid var(--ai-line); background: #fff; border-radius: 999px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; color: #2c3348; cursor: pointer;
}
.ai-chip:hover { border-color: #c9b8ff; color: var(--ai-purple); }
.ai-trust { gap: 22px; color: var(--ai-muted); font-weight: 650; }
.ai-trust span { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.ai-trust svg { width: 16px; height: 16px; color: var(--ai-purple); }

.ai-cards { margin: 22px auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ai-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  text-align: left; background: #fff; border: 1px solid var(--ai-line); border-radius: var(--ai-radius);
  padding: 16px; box-shadow: var(--ai-shadow); transition: border-color 180ms ease, transform 180ms ease;
}
.ai-card:hover { border-color: #d5c9ff; transform: translateY(-2px); }
.ai-card strong { display: block; font-size: 14px; }
.ai-card p { margin: 2px 0 0; color: var(--ai-muted); font-size: 13px; }
.ai-ico {
  width: 42px; height: 42px; border-radius: 12px; background: var(--ai-soft); color: var(--ai-purple);
  display: grid; place-items: center;
}
.ai-ico svg { width: 22px; height: 22px; }

.ai-stepper { display: flex; justify-content: center; gap: 8px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.ai-stepper__item { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.ai-stepper__n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--ai-line); font-size: 13px; font-weight: 800; color: var(--ai-muted);
}
.ai-stepper__item.is-on .ai-stepper__n, .ai-stepper__item.is-done .ai-stepper__n { background: var(--ai-purple); color: #fff; border-color: transparent; }
.ai-stepper__item strong { display: block; font-size: 14px; }
.ai-stepper__item span { display: block; font-size: 12px; color: var(--ai-muted); }
.ai-stepper__line { width: 48px; height: 2px; background: #e4dff3; }
.ai-stepper__line.is-on { background: var(--ai-purple); }

.ai-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.ai-panel, .ai-side, .ai-note, .ai-listing, .ai-filter {
  background: #fff; border: 1px solid var(--ai-line); border-radius: var(--ai-radius); box-shadow: var(--ai-shadow);
}
.ai-side, .ai-panel, .ai-filter { padding: 16px; }
.ai-side h2, .ai-panel h2, .ai-filter h2 { margin: 0 0 12px; font-size: 16px; }
.ai-query { font-size: 14px; margin: 0 0 12px; }
.ai-ans { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ai-line); font-size: 13px; }
.ai-ans a { color: var(--ai-purple); font-weight: 750; }
.ai-options { display: grid; gap: 10px; }
.ai-option {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ai-line);
  border-radius: 14px; padding: 12px 14px; cursor: pointer; font-weight: 700; background: #fff;
}
.ai-option:hover { border-color: #d4c8ff; }
.ai-option:has(input:checked) { border-color: var(--ai-purple); background: #faf8ff; box-shadow: 0 0 0 3px rgba(98, 48, 240, 0.12); }
.ai-option input { accent-color: var(--ai-purple); width: 18px; height: 18px; }
.ai-option span { flex: 1; }
.ai-or { display: flex; align-items: center; gap: 10px; color: #9aa1b5; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; margin: 14px 0; }
.ai-or::before, .ai-or::after { content: ""; height: 1px; background: var(--ai-line); flex: 1; }
.ai-free { width: 100%; border: 1.5px solid var(--ai-line); border-radius: 12px; padding: 12px 14px; }
.ai-free:focus { border-color: var(--ai-purple); outline: none; }
.ai-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ai-note { margin-top: 12px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; background: #faf8ff; }
.ai-note p { margin: 0; font-size: 14px; }
.ai-note svg { width: 18px; height: 18px; color: var(--ai-purple); flex: none; margin-top: 2px; }

.ai-head { display: flex; justify-content: space-between; gap: 16px 20px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.ai-head > :first-child { flex: 1 1 640px; min-width: 0; }
.ai-head h1 { font-size: clamp(28px, 3vw, 36px); }
.ai-head p { margin: 6px 0 0; color: var(--ai-muted); max-width: 680px; }
.ai-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-meter { height: 8px; background: #ece9f6; border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.ai-meter span { display: block; height: 100%; background: var(--ai-purple); }

.ai-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.ai-step + .ai-step { margin-top: 8px; }
.ai-rail { display: flex; flex-direction: column; align-items: center; }
.ai-rail i {
  width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ai-soft); color: var(--ai-purple); font-style: normal; font-weight: 800; font-size: 13px;
}
.ai-step.is-done .ai-rail i { background: #e8f8ee; color: #12824a; }
.ai-step.is-current .ai-rail i { background: var(--ai-purple); color: #fff; }
.ai-rail b { width: 2px; flex: 1; background: #e6e1f4; min-height: 12px; }
.ai-details { background: #fff; border: 1px solid var(--ai-line); border-radius: 16px; padding: 0 16px 4px; }
.ai-details summary { cursor: pointer; list-style: none; padding: 14px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ai-details summary::-webkit-details-marker { display: none; }
.ai-details summary strong { display: block; }
.ai-details summary span { color: var(--ai-muted); font-size: 13px; }
.ai-details[open] { box-shadow: var(--ai-shadow); }
.ai-check { margin: 0 0 12px; padding-left: 18px; }
.ai-check li { margin: 4px 0; }
.ai-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ai-meta span, .ai-tag {
  background: var(--ai-soft); color: #5136c9; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 750;
}
.ai-people { display: grid; gap: 8px; margin: 8px 0 14px; }
.ai-person {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--ai-line); border-radius: 14px; padding: 10px;
}
.ai-person h3 { margin: 0; font-size: 15px; }
.ai-person p { margin: 2px 0 0; color: var(--ai-muted); font-size: 13px; }
.ai-person__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ai-link { color: var(--ai-purple); font-weight: 750; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.ai-empty { color: var(--ai-muted); font-size: 14px; background: #fafafc; border-radius: 12px; padding: 12px; }

.ai-results { display: grid;  gap: 12px; align-items: start; }
.ai-field { margin-bottom: 12px; }
.ai-field label { display: block; font-size: 12px; font-weight: 750; color: var(--ai-muted); margin-bottom: 6px; }
.ai-field select, .ai-field input { width: 100%; border: 1px solid var(--ai-line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.ai-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ai-stat { background: #fff; border: 1px solid var(--ai-line); border-radius: 14px; padding: 12px; }
.ai-stat b { display: block; font-size: 22px; }
.ai-stat span { color: var(--ai-muted); font-size: 12px; font-weight: 700; }
.ai-listing { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; margin-bottom: 8px; }
.ai-listing h3 { margin: 0 0 4px; font-size: 16px; }
.ai-listing p { margin: 0; color: var(--ai-muted); font-size: 13px; }

.ai-split { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
.ai-task { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ai-line); }
.ai-disclaimer { font-size: 13px; color: var(--ai-muted); margin-top: 8px; }

@media (max-width: 1024px) {
  .ai-results, .ai-layout, .ai-split, .ai-cards { grid-template-columns: 1fr; }
  .ai-stats { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .ai-orbit { display: none; }
  .ai-count { margin-left: 0; }
  .ai-person, .ai-listing, .ai-head { grid-template-columns: 1fr; display: grid; }
  .ai-person__actions, .ai-head__actions { align-items: stretch; }
  .ai-btn, .ai-btn--ghost { width: 100%; }
  .ai-stepper__line { display: none; }
  .ai-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-card, .ai-btn { transition: none; }
  .ai-orbit__ring { display: none; }
}