/* VisibleTrust design system — ported from the Flowstate landing (dark glass, Onest, violet/cyan/magenta ink).
   One token layer for the marketing site and the app. Every component below is what the landing uses:
   pill, badge, chip, glass card with a gradient ring, section glows, hairlines, the grid backdrop. */

:root {
  /* surfaces */
  --hero-base: #04050c;
  --bg: #04050c;
  --bg-lift: #0a0c17;
  --heading: #eef0f6;
  --body: #d5d9e6;
  --body-muted: #b9becf;
  --muted-2: #8b91a8;
  --on-media: #ffffff;

  /* ink accents */
  --ink-violet: #a78bfa;
  --ink-cyan: #6ee7f9;
  --ink-magenta: #f472d0;
  --ink-mint: #7fe8c0;
  --ink-amber: #fbbf6a;
  --accent: var(--ink-violet);

  /* semantic */
  --ok: var(--ink-mint);
  --warn: var(--ink-amber);
  --danger: #fb7185;
  --info: var(--ink-cyan);

  /* glass */
  --glass-fill: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.16);
  --glass-grad: linear-gradient(155deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.025) 48%, rgba(255,255,255,0.05) 100%);
  --glass-grad-2: linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 52%, rgba(255,255,255,0.075) 100%);
  --hairline: rgba(255,255,255,0.10);
  --hairline-strong: rgba(255,255,255,0.18);
  --inner-light: inset 0 1px 0 rgba(255,255,255,0.16);
  --drop: 0 26px 50px -30px rgba(0,0,0,0.9);
  --drop-lift: 0 34px 60px -28px rgba(0,0,0,0.95);
  --ring: linear-gradient(150deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.06) 42%, rgba(167,139,250,0.30) 100%);
  --ring-hot: linear-gradient(150deg, rgba(255,255,255,0.65) 0%, rgba(110,231,249,0.25) 45%, rgba(244,114,208,0.45) 100%);
  --blur: blur(16px) saturate(135%);
  --scrim: rgba(4,5,12,0.46);
  --scrim-soft: rgba(4,5,12,0.12);
  --scrim-strong: rgba(4,5,12,0.68);

  /* actions */
  --action-inverse: #ffffff;
  --action-inverse-fg: #2f2f33;

  /* type & motion */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --duration-fast: 150ms;
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 9999px;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--body); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--heading); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--heading); font-weight: 500; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.12; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { margin: 0; }
::selection { background: rgba(167,139,250,0.35); color: #fff; }

/* ---------- backdrop: grid + aurora (CSS only) ---------- */
.bg-grid, .bg-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-grid {
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 0%, transparent 72%);
  opacity: .7;
}
.bg-aurora::before, .bg-aurora::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: drift 26s var(--ease-out-cubic) infinite alternate;
}
.bg-aurora::before { left: -18vmax; top: -22vmax; background: radial-gradient(circle at 40% 40%, rgba(167,139,250,.55), rgba(110,231,249,.28) 45%, transparent 70%); }
.bg-aurora::after { right: -22vmax; top: 4vmax; background: radial-gradient(circle at 60% 40%, rgba(244,114,208,.42), rgba(167,139,250,.24) 48%, transparent 72%); animation-delay: -12s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }

/* ---------- layout ---------- */
.wrap { width: min(72rem, 100% - 2.5rem); margin: 0 auto; position: relative; z-index: 1; }
.wrap--narrow { width: min(46rem, 100% - 2.5rem); }
.section { position: relative; width: 100%; padding: 5.5rem 1.25rem; }
.section--tight { padding: 3.5rem 1.25rem; }
.section--hairline::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(72rem, 100% - 2.5rem); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 22%, rgba(167,139,250,0.35) 50%, rgba(255,255,255,0.16) 78%, transparent);
  pointer-events: none;
}
.section--glow::before, .section--glow-magenta::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.section--glow::before { background: radial-gradient(48% 55% at 12% 10%, rgba(110,231,249,0.10) 0%, transparent 70%), radial-gradient(45% 50% at 90% 46%, rgba(167,139,250,0.12) 0%, transparent 72%); }
.section--glow-magenta::before { background: radial-gradient(48% 55% at 86% 6%, rgba(244,114,208,0.11) 0%, transparent 70%), radial-gradient(45% 55% at 8% 62%, rgba(110,231,249,0.09) 0%, transparent 72%); }
.section > .wrap { position: relative; z-index: 1; }
.section__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.section__title { margin-top: .9rem; max-width: 42rem; }
.section__lede { margin-top: 1rem; max-width: 40rem; font-size: 1.05rem; line-height: 1.6; color: var(--body-muted); }
.center { text-align: center; }
.center .section__title, .center .section__lede { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 1rem; margin-top: 2.75rem; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- glass primitives ---------- */
.card, .panel, .quote, .table-wrap, .faq, .final__panel {
  position: relative; border-radius: var(--radius-lg); background: var(--glass-grad);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--inner-light), var(--drop);
}
.card::before, .panel::before, .quote::before, .table-wrap::before, .faq::before, .final__panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none; transition: background var(--duration-fast) var(--ease-entrance);
}
.card { padding: 1.5rem; overflow: hidden; text-align: left; transition: transform 350ms var(--ease-entrance), box-shadow 350ms var(--ease-entrance), background 350ms var(--ease-entrance); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.12), transparent 62%); opacity: 0; transition: opacity 300ms var(--ease-entrance); pointer-events: none; }
.card--lift:hover { transform: translateY(-0.35rem); background: var(--glass-grad-2); box-shadow: var(--inner-light), var(--drop-lift); }
.card--lift:hover::after { opacity: 1; }
.card--lift:hover::before { background: var(--ring-hot); }
.card > * { position: relative; z-index: 1; }
.card__index { display: inline-flex; font-size: 1.75rem; line-height: 1; font-weight: 500; margin-bottom: .9rem; background: linear-gradient(120deg, var(--ink-cyan), var(--ink-violet), var(--ink-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card__title { font-size: 1.05rem; font-weight: 500; color: var(--heading); letter-spacing: -0.01em; }
.card__lede { margin-top: .4rem; font-size: .9rem; color: var(--accent); }
.card__body { margin-top: .75rem; font-size: .9rem; line-height: 1.65; color: var(--body-muted); }
.card--violet { --accent: var(--ink-violet); } .card--cyan { --accent: var(--ink-cyan); } .card--magenta { --accent: var(--ink-magenta); } .card--mint { --accent: var(--ink-mint); }
.panel { padding: 1.75rem; }

/* pill = primary action */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; border-radius: var(--radius-pill); border: 0; background: var(--action-inverse); padding: 0 1.125rem; font-size: .9rem; font-weight: 500; color: var(--action-inverse-fg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); white-space: nowrap; cursor: pointer; transition: background var(--duration-fast) var(--ease-entrance), transform var(--duration-fast) var(--ease-entrance); }
.pill:hover { background: rgba(255,255,255,0.86); text-decoration: none; }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.pill:disabled, .pill.disabled { opacity: .5; cursor: not-allowed; }
.pill--lg { height: 3rem; padding: 0 1.75rem; font-size: 1rem; }
.pill--sm { height: 2rem; padding: 0 .85rem; font-size: .82rem; }
.pill--ghost { background: var(--glass-fill); color: var(--heading); box-shadow: inset 0 0 0 1px var(--glass-border); }
.pill--ghost:hover { background: rgba(255,255,255,0.14); }
.pill--quiet { background: transparent; color: var(--body-muted); box-shadow: none; }
.pill--quiet:hover { background: var(--glass-fill); color: var(--heading); }
.pill--danger { color: var(--danger); }
.pill--accent { background: linear-gradient(120deg, var(--ink-violet), var(--ink-magenta)); color: #0b0616; }

/* badge = eyebrow capsule, chip = small fact */
.badge { display: inline-flex; align-items: center; gap: .45rem; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: var(--glass-fill); padding: .4rem .875rem; font-size: .74rem; color: var(--body-muted); backdrop-filter: blur(12px); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--radius-pill); padding: .32rem .7rem; font-size: .76rem; line-height: 1.3; color: var(--body-muted); background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.08); transition: color var(--duration-fast) var(--ease-entrance), box-shadow var(--duration-fast) var(--ease-entrance); }
.chip:hover { color: var(--heading); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(167,139,250,0.45); }
.chip.mini { padding: .1rem .5rem; font-size: .68rem; }
.chip.source { color: var(--ink-violet); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(167,139,250,0.45); }
.chip.teal, .chip.ok { color: var(--ink-mint); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(127,232,192,0.45); }
.chip.warn { color: var(--ink-amber); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(251,191,106,0.45); }
.chip.danger { color: var(--danger); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(251,113,133,0.45); }
.chip.sentinel { color: var(--muted-2); background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); border-style: dashed; }
.chip.cyan { color: var(--ink-cyan); }

/* the flow line: Discover → Enrich → Qualify → Personalize → Reach → Convert */
.flow { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .7rem; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--body-muted); }
.flow li { display: inline-flex; align-items: center; gap: .7rem; }
.flow li + li::before { content: "→"; color: var(--muted-2); }
.flow li.on { color: var(--heading); }
.flow li.done { color: var(--ink-mint); }
.flow li a { color: inherit; }

/* forms */
.input, .select, .textarea { width: 100%; padding: .65rem .85rem; border-radius: .8rem; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.05); color: var(--heading); outline: 0; transition: border-color var(--duration-fast) var(--ease-entrance), box-shadow var(--duration-fast) var(--ease-entrance); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(167,139,250,0.6); box-shadow: 0 0 0 3px rgba(167,139,250,0.18); }
.select option { background: var(--bg-lift); color: var(--heading); }
.textarea { min-height: 90px; resize: vertical; }
.entry { position: relative; display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 30rem; margin: 0 auto; padding: .6rem; border-radius: 1.4rem; background: var(--glass-grad); box-shadow: var(--inner-light), var(--drop); backdrop-filter: var(--blur); }
.entry::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.entry input { position: relative; z-index: 1; border: 0; background: transparent; padding: .55rem .9rem .2rem; font-size: 1rem; color: var(--heading); outline: 0; }
.entry input::placeholder { color: var(--body-muted); }
.entry .pill { position: relative; z-index: 1; width: 100%; }
@media (min-width: 640px) { .entry { flex-direction: row; align-items: center; padding: .45rem .45rem .45rem 1rem; } .entry input { flex: 1; padding: .4rem 0; } .entry .pill { width: auto; } }

/* tables */
.table-wrap { overflow: hidden; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-wrap th, .table-wrap td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table-wrap th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td.yes { color: var(--ink-mint); } .table-wrap td.no { color: var(--muted-2); }

/* faq */
.faq { padding: .25rem 1.5rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 500; color: var(--heading); display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted-2); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 1.1rem; color: var(--body-muted); line-height: 1.65; max-width: 60ch; }

/* motion + a11y */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-entrance), transform 600ms var(--ease-entrance); }
.reveal.is-in { opacity: 1; transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before, .bg-aurora::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .pill, .chip { transition: none; }
}