/* ASK360 public landing page — served at `/` by app/main.py.

   Plain CSS, no build step: this page is static marketing content that has to
   load instantly and be readable by crawlers, so it carries none of the
   dashboard's React bundle. Neutrals mirror the dashboard's tokens
   (frontend/apps/dashboard/src/styles.css) so moving from here to the sign-in
   screen feels like one product; the accent here is the logo's own
   cyan → blue → violet, the brand colour, rather than the dashboard's teal UI
   accent. Theme follows the same `minirag-theme` localStorage key the
   dashboard uses, so a choice made in either place carries over. */

:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --text: #0a1124;
  --muted: #56637d;
  --border: #dae2ef;
  --border-strong: #c0cbdf;

  --brand-from: #0ea5e9;
  --brand-via: #2563eb;
  --brand-to: #6d4aff;
  --brand-soft: #e8efff;
  --brand-ink: #1d4ed8;
  /* Solid fills that carry white text (buttons, chat header, bubbles) — kept
     deep in both themes for contrast, unlike the gradient used on text. */
  --fill-from: #2563eb;
  --fill-to: #6d4aff;

  --ok: #15803d;
  --shadow: 0 24px 60px -24px rgba(10, 17, 36, 0.28);
  --radius: 14px;
  --font:
    'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono Variable', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}

:root.dark {
  --bg: #070c1a;
  --surface: #0e1629;
  --surface-2: #151f38;
  --text: #e7edfa;
  --muted: #94a2c4;
  --border: #1e2a48;
  --border-strong: #2c3b63;

  --brand-from: #38bdf8;
  --brand-via: #60a5fa;
  --brand-to: #a78bfa;
  --brand-soft: #14224a;
  --brand-ink: #93b4ff;
  --fill-from: #1d4ed8;
  --fill-to: #6d28d9;

  --ok: #4ade80;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.025em;
  /* Even line lengths — no lone last word ("…chatbot / needs"). */
  text-wrap: balance;
}

p {
  margin: 0;
}

/* Scrollbars follow the theme, same treatment as the dashboard (styles.css):
   thin, rounded thumb on a transparent track. Firefox reads scrollbar-color;
   Chromium/Safari read the ::-webkit-scrollbar pseudo-elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

:focus-visible {
  outline: 2px solid var(--brand-via);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(1180px, 100% - 40px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.gradient-text {
  background: linear-gradient(90deg, var(--brand-from), var(--brand-via) 55%, var(--brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.btn .icon {
  width: 18px;
  height: 18px;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(100deg, var(--fill-from), var(--fill-to));
  box-shadow: 0 10px 28px -12px var(--fill-from);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px var(--fill-from);
}
.btn-ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--brand-via);
}
.btn-sm {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

/* ── Header ────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
/* The icon artwork has an opaque white background (and a white robot head),
   so it sits on its own white rounded tile — reads the same in both themes. */
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 22%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 17, 36, 0.08);
  overflow: hidden;
}
.dark .brand-mark {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.brand-mark img {
  width: 100%;
  height: 100%;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav-links + .nav-actions {
  margin-left: 0;
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--text);
}
.theme-toggle .icon {
  width: 18px;
  height: 18px;
}
.theme-toggle .i-sun {
  display: none;
}
.dark .theme-toggle .i-sun {
  display: block;
}
.dark .theme-toggle .i-moon {
  display: none;
}

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
}
.hero::before {
  /* Soft brand glow + faint grid — the same "instrument panel" texture the
     dashboard's login uses, kept quiet behind the copy. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 420px at 78% 18%, color-mix(in srgb, var(--brand-to) 18%, transparent), transparent 70%),
    radial-gradient(640px 420px at 12% 0%, color-mix(in srgb, var(--brand-from) 16%, transparent), transparent 70%),
    linear-gradient(to right, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 56px;
}
/* Grid items default to `min-width: auto`, so the demo's one-line tab row
   would widen its column past a phone screen (and the hero's overflow:hidden
   then clips the copy). Let both columns shrink to the viewport. */
.hero-grid > * {
  min-width: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent);
}
.hero h1 {
  margin-top: 22px;
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 800;
}
.hero-lede {
  margin-top: 20px;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-checks .icon {
  width: 16px;
  height: 16px;
  color: var(--ok);
  stroke-width: 2.5;
}

/* Hero visual: a static mock of the real widget answering a customer, using
   the same shapes as frontend/apps/widget (avatar, tail corner, rendered
   Markdown, a tool-call note). Illustrative only — no network. */
.demo {
  position: relative;
  justify-self: center;
  width: min(400px, 100%);
}
.demo-window {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(100deg, var(--fill-from), var(--fill-to));
}
.demo-head .brand-mark {
  width: 30px;
  height: 30px;
  box-shadow: none;
}
.demo-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}
.demo-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.85;
}
.demo-sub::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
}
.demo-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.msg-user {
  align-self: flex-end;
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 16px 4px 16px 16px;
  color: #fff;
  background: var(--fill-from);
}
.msg-bot {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.msg-bot .brand-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.msg-bot-bubble {
  padding: 10px 13px;
  border-radius: 4px 16px 16px 16px;
  background: var(--surface-2);
}
.msg-bot-bubble ul {
  margin: 6px 0;
  padding-left: 18px;
}
.msg-bot-bubble li {
  margin: 2px 0;
}
.msg-bot-bubble strong {
  font-weight: 600;
}
.tool-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border));
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
  color: var(--ok);
  font-size: 12px;
  font-weight: 500;
  align-self: flex-start;
}
.tool-note .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}
.demo-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}
.demo-input > span:first-child {
  flex: 1;
}
.demo-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: var(--fill-from);
}
.demo-send .icon {
  width: 16px;
  height: 16px;
}
/* A row of proof points under the mock window, centred on it — off the
   window entirely, so they never cover a message or sit at odd offsets. */
.demo-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.demo-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px -18px rgba(10, 17, 36, 0.45);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.demo-badge .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-ink);
}

/* ── Stats ─────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--border);
}
.stat {
  padding: 22px 24px;
  background: var(--surface);
}
.stat-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stat-label {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

/* ── Sections ──────────────────────────────────────────── */

.section {
  padding: 96px 0;
}
.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.section-head {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}
.kicker {
  color: var(--brand-ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-head h2 {
  margin-top: 10px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
}
.section-head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.card {
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.section-alt .card {
  background: var(--bg);
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-via) 45%, var(--border));
  box-shadow: 0 18px 40px -24px var(--brand-via);
}
.card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: var(--brand-ink);
  background: var(--brand-soft);
}
.card h3 {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
}
.card p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
}

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--fill-from), var(--fill-to));
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}
.step h3 {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 700;
}
.step p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}
.code-card {
  margin-top: 28px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: #0b1222;
  color: #d6e1ff;
}
.code-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid #1c2742;
  color: #8a98bd;
  font-family: var(--mono);
  font-size: 12.5px;
}
.code-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a3758;
}
.code-bar span {
  margin-left: 8px;
}
.code-card pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  /* The code card is dark in both themes, so its scrollbar is too. */
  scrollbar-color: #2a3758 transparent;
}
.code-card pre::-webkit-scrollbar-thumb {
  background-color: #2a3758;
}
.tok-tag {
  color: #7dd3fc;
}
.tok-attr {
  color: #c4b5fd;
}
.tok-str {
  color: #86efac;
}

/* Industries */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.industry .chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 14px;
}
.chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
}
.industry-custom {
  border-style: dashed;
}

/* Security */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.split .section-head {
  margin: 0;
  text-align: left;
}
.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.check-list .card-icon {
  /* Fixed square: as a flex item beside a long description it would
     otherwise be squeezed, by a different amount in every card. */
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.check-list .card-icon .icon {
  width: 18px;
  height: 18px;
}
.check-list strong {
  display: block;
  font-size: 15px;
}
/* The description only — a bare `.check-list span` would also hit the icon
   tile (a span too) and break its centring. */
.check-list strong + span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Closing call to action */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 56px;
  border-radius: 22px;
  color: #fff;
  text-align: center;
  background: linear-gradient(110deg, var(--brand-from), var(--brand-via) 50%, var(--brand-to));
}
.dark .cta-band {
  background: linear-gradient(110deg, #0369a1, #1d4ed8 50%, #5b21b6);
}
.cta-band h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
}
.cta-band p {
  max-width: 560px;
  margin: 12px auto 0;
  opacity: 0.9;
  font-size: 17px;
}
.cta-band .hero-ctas {
  justify-content: center;
}
.btn-light {
  color: #1d2b6b;
  background: #fff;
}
.btn-light:hover {
  transform: translateY(-1px);
}
.btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.btn-outline-light:hover {
  border-color: #fff;
}

/* Footer: brand column (with live status), two link columns, then a bottom
   bar. A faint brand glow along the top edge ties it to the CTA above. */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 64px 0 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 14.5px;
}
.footer-glow {
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-from), var(--brand-to), transparent);
  opacity: 0.7;
}
.footer-glow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(720px, 90%);
  height: 160px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-via) 14%, transparent), transparent);
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .brand {
  color: var(--text);
  font-size: 20px;
}
.footer-brand .brand-mark {
  width: 34px;
  height: 34px;
}
.footer-brand p {
  max-width: 340px;
  margin-top: 14px;
  line-height: 1.6;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-col h3 {
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-col a {
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease;
}
/* Underline that grows from the left on hover. */
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.footer-col a:hover {
  color: var(--text);
}
.footer-col a:hover::after {
  transform: scaleX(1);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
}
.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.status-pill[data-state='ok'] .status-dot {
  background: var(--ok);
}
.status-pill[data-state='ok'] .status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: status-ping 2s ease-out infinite;
}
.status-pill[data-state='down'] .status-dot {
  background: #f59e0b;
}
@keyframes status-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  80%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.footer-top:hover {
  color: var(--text);
}
.footer-top .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.footer-top:hover .icon {
  transform: translateY(-2px);
}

/* Reveal-on-scroll (landing.js adds .in). Without JS, everything is visible.
   `--d` staggers siblings in a grid so a row cascades in. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s ease var(--d, 0ms),
    transform 0.6s ease var(--d, 0ms);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 1080px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  /* With the links hidden, push the actions to the right edge. */
  .nav-links + .nav-actions {
    margin-left: auto;
  }
  .hero {
    padding: 48px 0 64px;
  }
  .hero-grid,
  .split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-lede {
    margin-inline: auto;
  }
  .hero-ctas,
  .hero-checks {
    justify-content: center;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .split .section-head {
    text-align: center;
  }
  .section {
    padding: 72px 0;
  }
}

@media (max-width: 600px) {
  .container {
    width: min(1180px, 100% - 32px);
  }
  .nav {
    height: 60px;
  }
  .nav-actions .btn-sm {
    padding: 0 13px;
  }
  .feature-grid,
  .check-list {
    grid-template-columns: 1fr;
  }
  .industry-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cta-band {
    padding: 40px 22px;
  }
  .stat {
    padding: 18px;
  }
  .stat-value {
    font-size: 24px;
  }
}

/* ══ Interactive layer (behaviour in landing.js) ═══════════════════════
   Everything below is progressive: with JS off or reduced motion on, the
   page is complete and static. */

/* An element's own `display` would otherwise beat the `hidden` attribute,
   and JS-only controls ship `hidden` until the script reveals them. */
[hidden] {
  display: none !important;
}

/* Scroll progress: a hairline under the sticky header. */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-via), var(--brand-to));
}

/* Scrollspy: the section in view is marked in the nav. */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a.is-active {
  color: var(--text);
}
.nav-links a.is-active::after {
  transform: scaleX(1);
}

/* Hero: a soft brand glow that follows the cursor. */
.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    560px circle at var(--mx, 70%) var(--my, 30%),
    color-mix(in srgb, var(--brand-via) 13%, transparent),
    transparent 70%
  );
}
.hero.is-pointer .hero-spotlight {
  opacity: 1;
}

/* Hero demo: industry tabs, a soft halo behind the window, a gentle float. */
.demo::before {
  content: '';
  position: absolute;
  inset: 14% -10% -4%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brand-to) 26%, transparent),
    color-mix(in srgb, var(--brand-from) 12%, transparent) 60%,
    transparent
  );
  filter: blur(28px);
  pointer-events: none;
}
.demo-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.demo-tabs::-webkit-scrollbar {
  display: none;
}
.demo-tab {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.demo-tab .icon {
  width: 15px;
  height: 15px;
}
.demo-tab:hover {
  color: var(--text);
}
.demo-tab[aria-selected='true'] {
  color: #fff;
  background: linear-gradient(100deg, var(--fill-from), var(--fill-to));
  box-shadow: 0 6px 18px -10px var(--fill-from);
}
/* Fills while the example dwells, then the next one plays (autoplay only). */
.demo-tab-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  opacity: 0;
}
.demo-tab[aria-selected='true'] .demo-tab-progress {
  opacity: 0.85;
}
.demo-window {
  animation: demo-float 7s ease-in-out infinite;
}
.demo:hover .demo-window,
.demo:focus-within .demo-window {
  animation-play-state: paused;
}
@keyframes demo-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
/* Fixed height so switching examples never shifts the layout around it. */
.demo-body {
  min-height: 312px;
}
.demo-title {
  transition: opacity 0.2s ease;
}
.msg-in {
  animation: msg-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Streamed reply: every word is laid out up front (so the bubble never
   resizes) and fades in one at a time. */
.msg-bot-bubble .w {
  opacity: 0;
  transition: opacity 0.22s ease;
}
.msg-bot-bubble .w.on {
  opacity: 1;
}
.msg-bot-bubble p {
  margin: 0;
}
.msg-bot-bubble p + p,
.msg-bot-bubble ul + p {
  margin-top: 6px;
}
.demo-typing {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 12px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--surface-2);
}
.demo-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing 1.2s infinite;
}
.demo-typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.demo-typing i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
.demo-badges .demo-badge {
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.demo-badges .demo-badge:nth-child(2) {
  transition-delay: 0.12s;
}
.demo-badges.is-pending .demo-badge {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition-delay: 0s;
}

/* Feature cards: a glow that follows the cursor across the whole grid. */
[data-spotlight-cards] .card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-spotlight-cards] .card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--brand-via) 14%, transparent),
    transparent 65%
  );
}
[data-spotlight-cards].is-pointer .card::before {
  opacity: 1;
}
.card-icon {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card:hover .card-icon {
  transform: translateY(-2px) rotate(-6deg) scale(1.06);
}

/* How it works: a connector drawn across the step numbers. It starts at the
   first number's centre (24px padding + 17px radius) and spans two columns
   plus their gaps to the third. */
.steps {
  position: relative;
}
.steps-line {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 41px;
  width: calc(66.667% + 13.333px);
  height: 2px;
  pointer-events: none;
}
.steps-line span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-via) 70%, transparent) 0 8px,
    transparent 8px 14px
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}
.steps-line.drawn span {
  transform: scaleX(1);
}
.step-num {
  position: relative;
  z-index: 3;
  /* Ring in the card's colour so the dashed connector stops cleanly at it. */
  box-shadow: 0 0 0 5px var(--surface);
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid #24304f;
  background: #121b31;
  color: #c9d5f5;
  font: 500 12px var(--font);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.code-copy:hover {
  color: #fff;
  border-color: #3a4a75;
}
.code-copy .icon {
  width: 14px;
  height: 14px;
}
.code-copy.is-copied {
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.45);
}

/* Industries: "See it answer" jumps to the hero demo with that example. */
.industry-try {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font: 600 13.5px var(--font);
  cursor: pointer;
}
.industry-try .icon {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}
.industry-try:hover .icon {
  transform: translateX(3px);
}

/* FAQ */
.container.faq-wrap {
  width: min(820px, 100% - 40px);
}
.faq-list {
  display: grid;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.faq-item:hover {
  border-color: var(--border-strong);
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--brand-via) 40%, var(--border));
  box-shadow: 0 18px 40px -30px var(--brand-via);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}
.faq-item[open] summary .icon {
  color: var(--brand-ink);
  transform: rotate(180deg);
}
.faq-body {
  overflow: hidden;
}
.faq-body p {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
}

/* Closing CTA: two soft orbs drifting behind the copy. */
.cta-band {
  isolation: isolate;
}
.cta-orb {
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.45;
  pointer-events: none;
}
.cta-orb-a {
  top: -150px;
  left: -90px;
  background: #7dd3fc;
  animation: orb-drift 13s ease-in-out infinite;
}
.cta-orb-b {
  right: -70px;
  bottom: -170px;
  background: #c4b5fd;
  animation: orb-drift 16s ease-in-out infinite reverse;
}
@keyframes orb-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(46px, 28px);
  }
}

/* Floating back-to-top (shown by landing.js after a screen of scrolling). */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--fill-from), var(--fill-to));
  box-shadow: 0 12px 28px -12px var(--fill-from);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.to-top:hover {
  transform: translateY(-2px);
}
.to-top .icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .steps-line {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .demo-body {
    min-height: 336px;
  }
  /* All four example tabs fit a phone without scrolling once the icons go. */
  .demo-tab {
    padding: 7px 10px;
  }
  .demo-tab .icon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}