/* ============================================================
 * Alphavant · design tokens
 * Notion-clean black & white, with coral (energy / CTA) and teal
 * (verified / trust) accents. Built to read as dependable, accurate,
 * and reliable for VP / Director / CEO / Quality-Manager audiences —
 * SaaS charm with grown-up gravitas.
 * ============================================================ */
:root {
  /* ----- Neutral ink (text) ----- */
  --ink:        #18181B; /* primary text + primary button surface */
  --ink-hover:  #09090B; /* primary button hover */
  --night:      #111114; /* dark sections / footer */
  --mute:       #6B6B72; /* secondary text */
  --quiet:      #A1A1AA; /* tertiary text / placeholder */

  /* ----- Surfaces (Notion white) ----- */
  --cream:            #FCFCFB; /* page background — barely-warm white */
  --snow:             #FFFFFF; /* cards, inputs, tables */
  --bone:             #F5F5F3; /* pale surface (table header) + text-on-dark */
  --bone-deep:        #EFEFED; /* ghost-button hover */
  --bone-translucent: rgba(255, 255, 255, 0.82); /* nav glass */

  /* ----- Lines ----- */
  --rule:  #E6E6E2; /* card / input / table borders */
  --faint: #ECECEA; /* inner rules, nav border */

  /* ----- Coral accent (energy, the ONE pop / CTA) ----- */
  --coral:      #FB6B58;
  --coral-soft: #FFF0ED;
  --coral-ink:  #C23A2A; /* coral text on soft bg (AA contrast) */
  --coral-glow: 251 107 88; /* rgb for focus-ring rgba() */

  /* ----- Teal accent (verified / trust / accuracy states) ----- */
  --teal:      #0F9E90;
  --teal-soft: #E6F6F3;
  --teal-ink:  #0A6E64; /* teal text / checkmarks on soft bg */

  /* ----- Footer ramp (on --night) ----- */
  --footer-tagline:    #B2B2B8;
  --footer-col-title:  #87878E;
  --footer-link:       #C9C9CF;
  --footer-link-hover: var(--bone);
  --footer-rule:       #2A2A2F;
  --footer-bottom:     #76767C;

  /* ----- Shadows (Notion-subtle) ----- */
  --shadow-color-1: rgba(17, 17, 20, 0.06);
  --shadow-color-2: rgba(17, 17, 20, 0.04);
  --shadow-pill:    0 1px 2px var(--shadow-color-2), 0 6px 16px -6px var(--shadow-color-1);
  --el-2:           0 16px 44px -18px rgba(17, 17, 20, 0.16);

  /* ----- Form states ----- */
  --error:      #DC2626;
  --focus-ring: var(--coral);

  /* ----- Typography ----- */
  --sans:    'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-hero:    clamp(40px, 5vw, 64px);
  --text-display: clamp(32px, 4.5vw, 52px);
  --text-h2:      clamp(26px, 3.4vw, 40px);
  --text-h3:      clamp(20px, 2.4vw, 27px);
  --text-lead:    18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-mono:    12px;
  --text-tiny:    11px;

  /* ----- Spacing (4px scale) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ----- Radius (crisp / dependable, not playful) ----- */
  --radius:    10px;
  --radius-sm: 6px;

  /* ----- Motion ----- */
  --dur-fast:    100ms;
  --dur-short:   150ms;
  --dur-medium:  240ms;
  --dur-long:    360ms;
  --dur-slow:    600ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --page-bg: var(--cream);
}

/* ============================================================
 * Alphavant · component styles
 * All classes are namespaced `av-` so they never collide with a host
 * app's own styles. Built on the Alphavant token system (tokens.css).
 * ============================================================ */

.av-root, .av-root * { box-sizing: border-box; }
.av-root {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== MonoLabel (eyebrow) ===== */
.av-mono {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-block;
}

/* ===== Button ===== */
.av-btn {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.1em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.av-btn:active { transform: translateY(1px); }
.av-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.av-btn--sm { padding: 8px 14px; }
.av-btn--primary { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.av-btn--primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.av-btn--accent { background: var(--coral); color: #fff; border-color: var(--coral); }
.av-btn--accent:hover { filter: brightness(1.04); }
.av-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.av-btn--ghost:hover { background: var(--bone-deep); }
.av-btn[aria-disabled="true"], .av-btn:disabled { opacity: 0.45; pointer-events: none; }
.av-btn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.av-btn--accent .av-btn__dot { background: #fff; }

/* ===== Badge ===== */
.av-badge {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--snow);
  color: var(--mute);
  line-height: 1;
}
.av-badge--coral {
  background: var(--coral-soft);
  border-color: color-mix(in srgb, var(--coral) 38%, transparent);
  color: var(--coral-ink);
}
.av-badge--teal {
  background: var(--teal-soft);
  border-color: color-mix(in srgb, var(--teal) 34%, transparent);
  color: var(--teal-ink);
}
.av-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ===== NavPill ===== */
.av-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 10px 16px;
  background: var(--bone-translucent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pill);
}
.av-nav__word {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.av-nav__word em { color: var(--coral); font-style: normal; }
.av-nav__spacer { flex: 1; }
.av-nav__links { display: flex; align-items: center; gap: var(--space-5); }
.av-nav__link {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  transition: opacity var(--dur-short) var(--ease-out);
}
.av-nav__link:hover { opacity: 0.6; }
.av-nav__cta {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.1em;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}
.av-nav__cta:hover { background: var(--ink-hover); }
.av-nav__cta .av-btn__dot { background: var(--coral); }

/* ===== Hero ===== */
.av-hero { display: flex; flex-direction: column; gap: var(--space-6); max-width: 900px; }
.av-hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-hero);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.av-hero__title em { color: var(--coral); font-style: normal; }
.av-hero__lead {
  font-family: var(--sans);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--mute);
  max-width: 640px;
  margin: 0;
}
.av-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ===== ProductCard ===== */
.av-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--snow);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pill);
  transition: transform var(--dur-medium) var(--ease-out),
              box-shadow var(--dur-medium) var(--ease-out),
              border-color var(--dur-medium) var(--ease-out);
}
.av-card:hover { transform: translateY(-2px); box-shadow: var(--el-2); border-color: var(--quiet); }
.av-card__index {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.16em;
  color: var(--coral);
}
.av-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.av-card__desc {
  font-family: var(--sans);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
}
.av-card__link {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.av-card__link:hover { color: var(--coral); }

/* ===== StatBlock (metrics — dependability / accuracy) ===== */
.av-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.av-stat {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-5) var(--space-6);
  background: var(--snow);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.av-stat__value {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.av-stat--teal .av-stat__value { color: var(--teal); }
.av-stat--coral .av-stat__value { color: var(--coral); }
.av-stat__label {
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--mute);
  line-height: 1.4;
}

/* ===== WaitlistForm ===== */
.av-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--snow);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  max-width: 460px;
  box-shadow: var(--shadow-pill);
}
.av-form__heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.av-form__row { display: flex; gap: var(--space-2); }
.av-input {
  flex: 1;
  font-family: var(--sans);
  font-size: var(--text-body);
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--snow);
  color: var(--ink);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.av-input::placeholder { color: var(--quiet); }
.av-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(var(--coral-glow) / 0.18); }
.av-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--mute);
  line-height: 1.5;
}
.av-form__consent input { margin-top: 3px; accent-color: var(--coral); }

/* ===== BidTable / TraceTable ===== */
.av-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--text-small);
  background: var(--snow);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.av-table th, .av-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--faint);
}
.av-table thead th {
  font-family: var(--mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--bone);
}
.av-table tbody tr:last-child td { border-bottom: none; }
.av-table td.av-table__row-label { font-weight: 500; color: var(--ink); }
.av-table__check { color: var(--teal-ink); font-weight: 600; }
.av-table__col--highlight { background: var(--teal-soft); }
.av-table th.av-table__col--highlight { color: var(--teal-ink); }

/* ===== Footer ===== */
.av-footer {
  background: var(--night);
  color: var(--bone);
  padding: var(--space-16) var(--space-12) var(--space-5);
  border-radius: var(--radius);
}
.av-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}
.av-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.av-footer__word { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.025em; color: var(--bone); line-height: 1; }
.av-footer__word em { color: var(--coral); font-style: normal; }
.av-footer__tagline { font-size: var(--text-small); line-height: 1.6; color: var(--footer-tagline); max-width: 300px; }
.av-footer__col-title { font-family: var(--mono); font-size: var(--text-tiny); letter-spacing: 0.16em; text-transform: uppercase; color: var(--footer-col-title); margin-bottom: var(--space-4); }
.av-footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.av-footer__links a { font-size: 14px; color: var(--footer-link); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.av-footer__links a:hover { color: var(--footer-link-hover); }
.av-footer__bottom { border-top: 1px solid var(--footer-rule); padding-top: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.av-footer__note { font-size: 13px; color: var(--footer-bottom); }