/* ============ tokens & reset ============ */
:root {
  --bg:#070a12;
  --panel:#0e1422;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#eef1f7;
  --ink-2:#b9c1d3;
  --muted:#7f8aa1;
  --brand:#7c8cff;
  --cyan:#22d3ee;
  --ok:#34d399;
  --warn:#fbbf24;
  --bad:#fb7185;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}

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

html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3 { letter-spacing:-.025em; line-height:1.15; }
a { color:inherit; text-decoration:none; }
img, svg { max-width:100%; }

/* ============ background glow ============ */
.glow {
  position:fixed; inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 32% at 24% 22%, rgba(99,102,241,.22), transparent 70%),
    radial-gradient(30% 28% at 76% 64%, rgba(34,211,238,.13), transparent 70%),
    radial-gradient(26% 24% at 60% 12%, rgba(168,85,247,.12), transparent 70%);
  filter:blur(60px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform:translate3d(-2%, -1%, 0) scale(1); }
  to   { transform:translate3d(2%, 2%, 0) scale(1.06); }
}

/* ============ top nav ============ */
.topnav {
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 28px;
  background:rgba(7,10,18,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:10px; }
.mark {
  width:22px; height:22px; border-radius:7px;
  background:conic-gradient(from 210deg,#6366f1,#a855f7,#22d3ee,#6366f1);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 18px rgba(124,140,255,.45);
  flex:0 0 auto;
}
.brand-name { font-weight:700; font-size:15.5px; letter-spacing:-.02em; }
.nav-actions { display:flex; align-items:center; gap:10px; }

/* ============ pills ============ */
.pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px;
  border-radius:999px;
  font-size:13.5px; font-weight:600;
  white-space:nowrap;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
}
.pill-ghost {
  border-color:var(--line-2);
  color:var(--ink-2);
  background:rgba(255,255,255,.02);
}
.pill-ghost:hover { border-color:rgba(255,255,255,.32); color:var(--ink); transform:translateY(-1px); }
.pill-grad {
  background:linear-gradient(135deg,#8b9bff,#22d3ee);
  color:#0b0f19;
  box-shadow:0 4px 18px rgba(124,140,255,.28);
}
.pill-grad:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(124,140,255,.42); }
.pill-lg { padding:12px 24px; font-size:15px; }

/* ============ hero ============ */
main { max-width:1200px; margin:0 auto; padding:0 24px; }

.hero {
  padding:150px 12px 56px;
  text-align:center;
  max-width:820px;
  margin:0 auto;
}
.eyebrow {
  font-size:12px; font-weight:700;
  letter-spacing:.22em;
  color:var(--brand);
  margin-bottom:16px;
}
.hero h1 {
  font-size:clamp(34px, 5.4vw, 58px);
  font-weight:800;
  margin-bottom:20px;
}
.grad-text {
  background:linear-gradient(100deg,#8b9bff 10%,#22d3ee 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sub {
  color:var(--ink-2);
  font-size:clamp(15.5px, 1.8vw, 18px);
  max-width:640px;
  margin:0 auto 28px;
}
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.trust-line { color:var(--muted); font-size:13.5px; }

/* ============ console window ============ */
.console-wrap { padding:16px 0 40px; }

.window {
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(124,140,255,.06);
  overflow:hidden;
}
.titlebar {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.dots { display:flex; gap:6px; }
.dots i { width:11px; height:11px; border-radius:50%; display:block; }
.dots i:nth-child(1){ background:#fb7185; }
.dots i:nth-child(2){ background:#fbbf24; }
.dots i:nth-child(3){ background:#34d399; }
.win-title { font-size:13px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(52,211,153,.8); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.sim-badge {
  margin-left:auto;
  font-size:10px; font-weight:700; letter-spacing:.14em;
  color:var(--muted);
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:3px 9px;
}

/* desk grid */
.desk {
  display:grid;
  grid-template-columns:270px minmax(0,1fr) 268px;
  gap:0;
  min-height:480px;
}
.col { padding:16px; min-width:0; }
.col-feed { border-right:1px solid var(--line); }
.col-side { border-left:1px solid var(--line); display:flex; flex-direction:column; gap:16px; }

.col-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:12px;
}
.col-head h3 { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.col-sub { font-size:11.5px; color:var(--muted); }
.ok-text { color:var(--ok); }

/* left feed */
.feed { display:flex; flex-direction:column; gap:10px; }
.ticket {
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  animation:slideIn .45s cubic-bezier(.2,.7,.3,1) both;
  transition:opacity .5s ease, border-color .3s ease, background .3s ease;
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(-14px); }
  to   { opacity:1; transform:none; }
}
.ticket.active { border-color:rgba(124,140,255,.55); background:rgba(124,140,255,.07); }
.ticket.fading { opacity:0; }
.ticket-top { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.ticket-top .ch-icon { color:var(--muted); display:inline-flex; flex:0 0 auto; }
.ticket-name { font-size:12.5px; font-weight:700; }
.ticket-when { margin-left:auto; font-size:10.5px; color:var(--muted); font-family:var(--mono); }
.ticket-msg { font-size:12.5px; color:var(--ink-2); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ticket.user-ticket { border-color:rgba(34,211,238,.5); }

/* center work pane */
.work-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
  min-height:58px;
}
.work-who { display:flex; gap:10px; align-items:flex-start; min-width:0; }
.avatar {
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
  background:linear-gradient(135deg, rgba(124,140,255,.3), rgba(34,211,238,.22));
  border:1px solid var(--line-2);
  flex:0 0 auto;
}
.work-name { font-size:14px; font-weight:700; }
.work-text { font-size:12.5px; color:var(--ink-2); }
.ticket-id { font-size:11px; color:var(--muted); white-space:nowrap; }

.stages { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.stage-chip {
  font-size:11px; font-weight:700;
  padding:4px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  transition:color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.stage-arrow { color:var(--muted); font-size:12px; opacity:.6; }
.stage-chip.on {
  color:#0b0f19;
  background:linear-gradient(135deg,#8b9bff,#22d3ee);
  border-color:transparent;
  box-shadow:0 0 14px rgba(124,140,255,.4);
}
.stage-chip.done { color:var(--ok); border-color:rgba(52,211,153,.4); }
.stage-chip.halt { color:#0b0f19; background:linear-gradient(135deg,#fbbf24,#fb7185); border-color:transparent; box-shadow:0 0 14px rgba(251,113,133,.35); }

.work-body { display:flex; flex-direction:column; gap:12px; }
.hidden { display:none !important; }

.work-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.badge {
  font-size:11.5px; font-weight:700;
  padding:4px 11px; border-radius:999px;
  border:1px solid var(--line-2);
  animation:fadeUp .35s ease both;
}
.badge-intent { color:var(--brand); border-color:rgba(124,140,255,.45); background:rgba(124,140,255,.09); }
.badge-sentiment { color:var(--ok); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.08); }
.badge-sentiment.warn { color:var(--warn); border-color:rgba(251,191,36,.42); background:rgba(251,191,36,.08); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

.data-card {
  border:1px solid rgba(34,211,238,.3);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(34,211,238,.045);
  animation:fadeUp .4s ease both;
}
.data-card-title {
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:8px;
}
.data-rows { display:flex; flex-direction:column; gap:3px; font-size:12px; }
.data-row {
  display:flex; gap:12px; justify-content:space-between;
  padding:2px 6px; border-radius:6px;
  transition:background .2s ease, box-shadow .2s ease;
  animation:fadeUp .3s ease both;
}
.data-row .k { color:var(--muted); flex:0 0 auto; }
.data-row .v { color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.data-row.hl { background:rgba(34,211,238,.14); box-shadow:0 0 0 1px rgba(34,211,238,.4); }

.reply-box {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.02);
  animation:fadeUp .4s ease both;
}
.reply-label { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.reply-cites-hint { font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); opacity:.8; }
.reply-text { font-size:13.5px; color:var(--ink-2); line-height:1.65; min-height:44px; }
.reply-text.typing::after {
  content:"";
  display:inline-block;
  width:7px; height:14px;
  margin-left:2px;
  vertical-align:-2px;
  background:var(--cyan);
  animation:blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity:0; } }
.cite {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:15px; height:15px;
  padding:0 3px;
  margin:0 1px;
  vertical-align:super;
  font-size:9.5px; font-weight:700;
  font-family:var(--mono);
  color:var(--cyan);
  border:1px solid rgba(34,211,238,.45);
  border-radius:5px;
  background:rgba(34,211,238,.09);
  cursor:default;
  transition:background .15s ease, box-shadow .15s ease;
}
.cite:hover { background:rgba(34,211,238,.24); box-shadow:0 0 10px rgba(34,211,238,.35); }

.update-row {
  font-size:12px;
  color:var(--ink-2);
  border-left:2px solid var(--warn);
  padding:4px 10px;
  animation:fadeUp .35s ease both;
}
.update-row strong { color:var(--warn); font-weight:600; }

.outcome-row {
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600;
  padding:10px 13px;
  border-radius:12px;
  animation:fadeUp .4s ease both;
}
.outcome-row.sent { color:var(--ok); border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.07); }
.outcome-row.esc { color:var(--bad); border:1px solid rgba(251,113,133,.4); background:rgba(251,113,133,.07); }
.outcome-row .reason { font-weight:500; color:var(--ink-2); font-size:12px; }

/* right side */
.side-panel { min-height:0; }
.human-list, .resolved-list { display:flex; flex-direction:column; gap:8px; }
.human-item {
  border:1px solid rgba(251,113,133,.32);
  border-radius:12px;
  padding:9px 11px;
  background:rgba(251,113,133,.05);
  animation:slideIn .4s ease both;
  transition:opacity .5s ease;
}
.human-item.fading, .resolved-item.fading { opacity:0; }
.human-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.human-name { font-size:12px; font-weight:700; }
.human-badge {
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  color:var(--bad);
  border:1px solid rgba(251,113,133,.45);
  border-radius:999px;
  padding:1px 7px;
}
.human-reason { font-size:11.5px; color:var(--ink-2); }
.human-empty, .resolved-empty { font-size:12px; color:var(--muted); padding:4px 2px; }

.resolved-item {
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(52,211,153,.25);
  border-radius:10px;
  padding:7px 10px;
  background:rgba(52,211,153,.045);
  font-size:11.5px;
  color:var(--ink-2);
  animation:slideIn .4s ease both;
  transition:opacity .5s ease;
}
.resolved-item .r-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); flex:0 0 auto; }
.resolved-item .r-time { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); }

/* audit strip */
.audit {
  border-top:1px solid var(--line);
  padding:10px 16px;
  font-size:11px;
  color:var(--muted);
  display:flex; flex-direction:column; gap:3px;
  min-height:58px;
  background:rgba(0,0,0,.25);
}
.audit .a-line { animation:fadeUp .3s ease both; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit .a-line:last-child { color:var(--ink-2); }
.audit .a-ok { color:var(--ok); }
.audit .a-bad { color:var(--bad); }

/* test ticket row */
.test-row {
  border-top:1px solid var(--line);
  padding:14px 16px 16px;
  background:rgba(124,140,255,.04);
}
.test-label {
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand);
  margin-bottom:8px;
}
.test-controls { display:flex; gap:10px; }
.test-controls input {
  flex:1; min-width:0;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:10px 18px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:13.5px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.test-controls input::placeholder { color:var(--muted); }
.test-controls input:focus { border-color:rgba(124,140,255,.6); box-shadow:0 0 0 3px rgba(124,140,255,.15); }

/* ============ how ============ */
.how { padding:72px 0 24px; text-align:center; }
.how h2 { font-size:clamp(26px,3.4vw,38px); font-weight:800; margin-bottom:36px; }
.steps {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  text-align:left;
}
.step {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  transition:border-color .25s ease, transform .25s ease;
}
.step:hover { border-color:var(--line-2); transform:translateY(-2px); }
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:9px;
  font-size:13px; font-weight:800;
  color:#0b0f19;
  background:linear-gradient(135deg,#8b9bff,#22d3ee);
  margin-bottom:12px;
}
.step h3 { font-size:16px; margin-bottom:6px; }
.step p { font-size:13.5px; color:var(--ink-2); }

/* ============ metrics ============ */
.metrics {
  margin:64px 0 0;
  padding:36px 24px 30px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
  text-align:center;
  position:relative;
}
.metric-num { font-size:clamp(30px,3.8vw,44px); font-weight:800; letter-spacing:-.03em; }
.metric-small { font-size:.55em; }
.metric-label { font-size:12.5px; color:var(--muted); margin-top:2px; }
.metrics-caption {
  grid-column:1 / -1;
  font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:14px;
}

/* ============ trust ============ */
.trust {
  padding:64px 0 8px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.trust-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  transition:border-color .25s ease, transform .25s ease;
}
.trust-card:hover { border-color:rgba(124,140,255,.4); transform:translateY(-2px); }
.trust-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius:12px;
  color:var(--cyan);
  background:rgba(34,211,238,.09);
  border:1px solid rgba(34,211,238,.28);
  margin-bottom:14px;
}
.trust-card h3 { font-size:16.5px; margin-bottom:6px; }
.trust-card p { font-size:13.5px; color:var(--ink-2); }

/* ============ cta & footer ============ */
.cta { padding:88px 12px 96px; text-align:center; }
.cta h2 { font-size:clamp(28px,4vw,44px); font-weight:800; margin-bottom:12px; }
.cta .sub { margin-bottom:26px; }

.footer {
  border-top:1px solid var(--line);
  padding:26px 24px 34px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}
.footer a { color:var(--ink-2); border-bottom:1px solid var(--line-2); transition:color .2s ease; }
.footer a:hover { color:var(--ink); }

/* ============ reveal on scroll ============ */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============ responsive ============ */
@media (max-width: 1020px) {
  .desk { grid-template-columns:230px minmax(0,1fr); }
  .col-side { grid-column:1 / -1; border-left:none; border-top:1px solid var(--line); flex-direction:row; }
  .col-side .side-panel { flex:1; min-width:0; }
}
@media (max-width: 760px) {
  .topnav { padding:12px 16px; }
  .brand-name { font-size:14px; }
  .pill { padding:7px 12px; font-size:12.5px; }
  .hero { padding-top:126px; }
  .desk { grid-template-columns:minmax(0,1fr); }
  .col-feed { border-right:none; border-bottom:1px solid var(--line); }
  .col-side { flex-direction:column; }
  .steps, .trust { grid-template-columns:minmax(0,1fr); }
  .metrics { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .nav-actions .pill-ghost { display:none; }
  .test-controls { flex-direction:column; }
  .metrics { grid-template-columns:minmax(0,1fr); }
  .hero h1 { font-size:31px; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .glow { animation:none; }
  .live-dot { animation:none; }
  .reply-text.typing::after { animation:none; }
  *, *::before, *::after {
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .reveal { opacity:1; transform:none; }
}